Skip to content

fix: add storybook demos to eslint config #1958

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Oct 22, 2024
Merged

fix: add storybook demos to eslint config #1958

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9f6a4d8
fix: add storybook demos to eslint config
jzempel Oct 22, 2024
d4b0aa4
Run eslint --fix to address `react/jsx-no-leaked-render` errors
jzempel Oct 22, 2024
c92ac40
Fix lint errors
jzempel Oct 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 9 additions & 0 deletions eslint.config.mjs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -56,5 +56,14 @@ export default [
'no-console': 'off',
'react/button-has-type': 'off'
}
},
{
files: ['packages/*/demo/**/*.{ts,tsx}'],
ignores: ['packages/.template/**/*.{ts,tsx}'],
...typescriptPlugin,
rules: {
...typescriptRules,
'react/no-array-index-key': 'off'
}
}
];
2 changes: 1 addition & 1 deletion packages/accordions/demo/stories/AccordionStory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,7 @@ export const AccordionStory: Story<IArgs> = ({ sections, ...args }: IArgs) => (
<Accordion.Section key={index}>
<Accordion.Header>
<Accordion.Label>{section.headerLabel}</Accordion.Label>
{args.hasIconButtons && <IconButtons isCompact={args.isCompact || false} />}
{!!args.hasIconButtons && <IconButtons isCompact={args.isCompact || false} />}
</Accordion.Header>
<Accordion.Panel>{section.panel}</Accordion.Panel>
</Accordion.Section>
Expand Down
2 changes: 1 addition & 1 deletion packages/accordions/demo/stories/TimelineStory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ export const TimelineStory: StoryFn<IArgs> = ({ items, surfaceColor, ...args })
icon={args.hasIcon ? <Icon /> : undefined}
surfaceColor={surfaceColor}
>
{args.hasOppositeContent && (
{!!args.hasOppositeContent && (
<Timeline.OppositeContent>
<Span hue="grey">{item.description}</Span>
</Timeline.OppositeContent>
Expand Down
17 changes: 10 additions & 7 deletions packages/avatars/demo/~patterns/stories/StatusMenuStory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,13 +29,16 @@ export const StatusMenuStory: Story = ({ isCompact }) => {
<Grid.Row style={{ height: 'calc(100vh - 80px)' }}>
<Grid.Col textAlign="center" alignSelf="center">
<Menu
button={props => (
<StyledIconButton {...props} aria-label="Select status">
<Avatar status={selectedType} size={isCompact ? 'small' : 'medium'}>
<img alt="Example User" src="images/avatars/chrome.png" />
</Avatar>
</StyledIconButton>
)}
button={
/* eslint-disable-next-line react/no-unstable-nested-components */
props => (
<StyledIconButton {...props} aria-label="Select status">
<Avatar status={selectedType} size={isCompact ? 'small' : 'medium'}>
<img alt="Example User" src="images/avatars/chrome.png" />
</Avatar>
</StyledIconButton>
)
}
onChange={onChange}
isCompact={isCompact}
>
Expand Down
4 changes: 2 additions & 2 deletions packages/buttons/demo/stories/ButtonStory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,13 +26,13 @@ export const ButtonStory: Story<IArgs> = ({
...args
}) => (
<Button {...args}>
{hasStartIcon && (
{!!hasStartIcon && (
<Button.StartIcon isRotated={isStartIconRotated}>
<StartIcon />
</Button.StartIcon>
)}
{args.children}
{hasEndIcon && (
{!!hasEndIcon && (
<Button.EndIcon isRotated={isEndIconRotated}>
<EndIcon />
</Button.EndIcon>
Expand Down
18 changes: 9 additions & 9 deletions packages/chrome/demo/stories/ChromeStory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -117,9 +117,9 @@ export const ChromeStory: Story<IArgs> = ({
return (
<Chrome {...args} style={{ margin: `-${DEFAULT_THEME.space.xl}` }}>
<SkipNav targetId="main-content">{skipNav}</SkipNav>
{hasNav && (
{!!hasNav && (
<Nav isExpanded={isExpanded} aria-label="Nav">
{hasLogo && (
{!!hasLogo && (
<Nav.Item hasLogo product={product}>
<Nav.ItemIcon>{product ? PRODUCT_ICONS[product] : <ProductIcon />}</Nav.ItemIcon>
<Nav.ItemText>Nav Logo</Nav.ItemText>
Expand All @@ -139,7 +139,7 @@ export const ChromeStory: Story<IArgs> = ({
</Nav.Item>
))}
</Nav.List>
{hasBrandmark && (
{!!hasBrandmark && (
<Nav.Item hasBrandmark>
<Nav.ItemIcon>
<BrandmarkIcon />
Expand All @@ -151,9 +151,9 @@ export const ChromeStory: Story<IArgs> = ({
)}

<Body>
{hasHeader && (
{!!hasHeader && (
<Header isStandalone={!hasNav}>
{hasLogo && (
{!!hasLogo && (
<Header.Item hasLogo product={product}>
<Header.ItemIcon>
{product ? PRODUCT_ICONS[product] : <ProductIcon />}
Expand All @@ -169,7 +169,7 @@ export const ChromeStory: Story<IArgs> = ({
maxY={item.maxY}
isRound={item.isRound}
>
{item.hasIcon && (
{!!item.hasIcon && (
<Header.ItemIcon>
{HEADER_ICONS[HEADER_ICONS.length - headerItems.length + index] || (
<HeaderIcon />
Expand All @@ -180,7 +180,7 @@ export const ChromeStory: Story<IArgs> = ({
</Header.ItemWrapper>
) : (
<Header.Item key={index} maxX={item.maxX} maxY={item.maxY} isRound={item.isRound}>
{item.hasIcon && (
{!!item.hasIcon && (
<Header.ItemIcon>
{HEADER_ICONS[HEADER_ICONS.length - headerItems.length + index] || (
<HeaderIcon />
Expand Down Expand Up @@ -210,9 +210,9 @@ export const ChromeStory: Story<IArgs> = ({
{...args}
/>
</Content>
{hasFooter && (
{!!hasFooter && (
<Footer>
{footerItems &&
{!!footerItems &&
footerItems.map(({ text, type }, index) => (
<Footer.Item key={index}>
<Button isBasic={type === 'basic'} isPrimary={type === 'primary'}>
Expand Down
12 changes: 6 additions & 6 deletions packages/chrome/demo/stories/SheetStory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,16 +45,16 @@ export const SheetComponent = ({
...props
}: ISheetComponentProps) => (
<Sheet {...props}>
{hasHeader && (
{!!hasHeader && (
<Sheet.Header>
{hasTitle && <Sheet.Title>{title}</Sheet.Title>}
{hasDescription && <Sheet.Description>{description}</Sheet.Description>}
{!!hasTitle && <Sheet.Title>{title}</Sheet.Title>}
{!!hasDescription && <Sheet.Description>{description}</Sheet.Description>}
</Sheet.Header>
)}
{hasBody ? <Sheet.Body>{body}</Sheet.Body> : body}
{hasFooter && (
{!!hasFooter && (
<Sheet.Footer isCompact={isCompact}>
{footerItems &&
{!!footerItems &&
footerItems.map(({ text, type }, index) => (
<Sheet.FooterItem key={index}>
<Button
Expand All @@ -69,7 +69,7 @@ export const SheetComponent = ({
))}
</Sheet.Footer>
)}
{hasClose && <Sheet.Close onClick={onClick} />}
{!!hasClose && <Sheet.Close onClick={onClick} />}
</Sheet>
);

Expand Down
2 changes: 1 addition & 1 deletion packages/datepickers/demo/stories/DatePickerStory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,7 @@ export const DatePickerStory: Story<IArgs> = ({
<DatePicker {...args} formatDate={formatDate} isCompact={isCompact}>
<Input isCompact={isCompact} validation={validation} />
</DatePicker>
{hasMessage && (
{!!hasMessage && (
<Field.Message validation={validation} validationLabel={validationLabel}>
{message}
</Field.Message>
Expand Down
4 changes: 2 additions & 2 deletions packages/draggable/demo/stories/DraggableStory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ interface IArgs extends IDraggableProps {

export const DraggableStory: Story<IArgs> = ({ hasGrip, children, ...args }) => (
<Draggable {...args}>
{hasGrip && <Draggable.Grip />}
{children && <Draggable.Content>{children}</Draggable.Content>}
{!!hasGrip && <Draggable.Grip />}
{!!children && <Draggable.Content>{children}</Draggable.Content>}
</Draggable>
);
4 changes: 2 additions & 2 deletions packages/draggable/demo/stories/DropzoneStory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,11 +17,11 @@ interface IArgs extends IDropzoneProps {

export const DropzoneStory: Story<IArgs> = ({ children, hasIcon, ...args }) => (
<Dropzone {...args}>
{hasIcon && (
{!!hasIcon && (
<Dropzone.Icon>
<ReplaceIcon />
</Dropzone.Icon>
)}
{children && <Dropzone.Message>{children}</Dropzone.Message>}
{!!children && <Dropzone.Message>{children}</Dropzone.Message>}
</Dropzone>
);
7 changes: 4 additions & 3 deletions packages/draggable/demo/~patterns/stories/DragAndDropStory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -326,6 +326,7 @@ export const DragAndDropStory: Story<IArgs> = ({
>
{Object.keys(columns).map(columnId => {
const isDraggablesColumn = columnId === draggablesColId;
/* eslint-disable-next-line no-useless-assignment */
const ColumnComponent = isDraggablesColumn ? DraggablesColumn : DroppablesColumn;

return (
Expand All @@ -335,8 +336,8 @@ export const DragAndDropStory: Story<IArgs> = ({
key={columnId}
activeId={activeId}
activeColumnId={activeColumnId}
hasDropIndicator={hasDropIndicator && !isDraggablesColumn}
hasPlaceholder={hasPlaceholder && isDraggablesColumn}
hasDropIndicator={!!hasDropIndicator && !isDraggablesColumn}
hasPlaceholder={!!hasPlaceholder && isDraggablesColumn}
isCompact={isCompact}
isHorizontal={isHorizontal}
isBare={isBare}
Expand All @@ -346,7 +347,7 @@ export const DragAndDropStory: Story<IArgs> = ({
})}
</StyledContainer>
<DragOverlay>
{activeItem && (
{!!activeItem && (
<div style={{ padding: isHorizontal ? `0 ${overlayOffset}` : `${overlayOffset} 0` }}>
<DraggableItem
ref={overlayRef}
Expand Down
6 changes: 3 additions & 3 deletions packages/draggable/demo/~patterns/stories/components.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -112,7 +112,7 @@ const SortableItem = ({

return (
<>
{isUsingKeyboard && showIndicator && (
{!!isUsingKeyboard && !!showIndicator && (
<DropIndicator
transition={transition}
transform={transformValue}
Expand Down Expand Up @@ -175,7 +175,7 @@ export const SortablesColumn = ({
))}
</DraggableList>
{items.length === 0 && <Dropzone.Message>Drag to add</Dropzone.Message>}
{showDropMessage && <Dropzone.Message>Drop item here</Dropzone.Message>}
{!!showDropMessage && <Dropzone.Message>Drop item here</Dropzone.Message>}
</SortableContext>
</Dropzone>
);
Expand Down Expand Up @@ -210,7 +210,7 @@ export const DraggableListItem = ({
style={draggableItemStyle}
isCompact={isCompact}
isBare={isBare}
isPlaceholder={isDragging && isPlaceholder}
isPlaceholder={!!isDragging && isPlaceholder}
ref={setActivatorNodeRef}
/>
</DraggableList.Item>
Expand Down
6 changes: 3 additions & 3 deletions packages/dropdowns.legacy/demo/stories/DropdownFieldStory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,10 +48,10 @@ export const DropdownFieldStory: Story<IArgs> = ({
<Label hidden={isLabelHidden} isRegular={isLabelRegular}>
{label}
</Label>
{hasHint && !isLabelHidden && <Hint>{hint}</Hint>}
{!!hasHint && !isLabelHidden && <Hint>{hint}</Hint>}
{children}
{hasHint && isLabelHidden && <Hint>{hint}</Hint>}
{hasMessage && (
{!!hasHint && !!isLabelHidden && <Hint>{hint}</Hint>}
{!!hasMessage && (
<Message validation={validation} validationLabel={validationLabel}>
{message}
</Message>
Expand Down
12 changes: 6 additions & 6 deletions packages/dropdowns.legacy/demo/stories/MenuStory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,14 +38,14 @@ const MenuItem = ({ text: children, type, hasIcon, meta, ...props }: IProps) =>
return (
<AddItem {...props}>
{children}
{meta && <ItemMeta>{meta}</ItemMeta>}
{!!meta && <ItemMeta>{meta}</ItemMeta>}
</AddItem>
);

case 'header':
return (
<HeaderItem hasIcon={hasIcon}>
{hasIcon && (
{!!hasIcon && (
<HeaderIcon>
<Icon />
</HeaderIcon>
Expand All @@ -58,15 +58,15 @@ const MenuItem = ({ text: children, type, hasIcon, meta, ...props }: IProps) =>
return (
<NextItem {...props}>
{children}
{meta && <ItemMeta>{meta}</ItemMeta>}
{!!meta && <ItemMeta>{meta}</ItemMeta>}
</NextItem>
);

case 'previous':
return (
<PreviousItem {...props}>
{children}
{meta && <ItemMeta>{meta}</ItemMeta>}
{!!meta && <ItemMeta>{meta}</ItemMeta>}
</PreviousItem>
);

Expand All @@ -78,13 +78,13 @@ const MenuItem = ({ text: children, type, hasIcon, meta, ...props }: IProps) =>
</MediaFigure>
<MediaBody>
{children}
{meta && <ItemMeta>{meta}</ItemMeta>}
{!!meta && <ItemMeta>{meta}</ItemMeta>}
</MediaBody>
</MediaItem>
) : (
<Item {...props}>
{children}
{meta && <ItemMeta>{meta}</ItemMeta>}
{!!meta && <ItemMeta>{meta}</ItemMeta>}
</Item>
);
}
Expand Down
2 changes: 1 addition & 1 deletion packages/dropdowns.legacy/demo/stories/TriggerStory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ export const TriggerStory: Story<IArgs> = ({
>
<Trigger>
<Button isDanger={isDanger} size={args.isCompact ? 'small' : undefined}>
{hasMedia && (
{!!hasMedia && (
<Button.StartIcon>
<Icon />
</Button.StartIcon>
Expand Down
2 changes: 1 addition & 1 deletion packages/dropdowns.legacy/demo/~patterns/stories/MenuStory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,7 +44,7 @@ export const MenuStory: Story<IArgs> = ({ items, appendToNode, ...rest }) => {
// Grant a bit of room, so the menu will fit
style={{ minHeight: '300px' }}
>
{isReady && (
{!!isReady && (
<Grid>
<Grid.Row
style={{
Expand Down
7 changes: 4 additions & 3 deletions packages/dropdowns/demo/stories/ComboboxStory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -26,11 +26,12 @@ import { IOption, Options } from './types';
const toLabel = (option: IOption) => option.label || option.value;

const ComboboxOption = ({ icon, meta, ...props }: IOption) => {
/* eslint-disable-next-line no-useless-assignment */
const Svg = props.tagProps?.isPill ? Avatar : Icon;

return (
<Option icon={icon ? <Svg /> : undefined} {...props}>
{meta && (
{!!meta && (
<>
<span>{props.children || toLabel(props)}</span>
<Option.Meta>{meta}</Option.Meta>
Expand Down Expand Up @@ -126,7 +127,7 @@ export const ComboboxStory: Story<IArgs> = ({
<Field.Label hidden={isLabelHidden} isRegular={isLabelRegular}>
{label}
</Field.Label>
{hint && <Field.Hint>{hint}</Field.Hint>}
{!!hint && <Field.Hint>{hint}</Field.Hint>}
<Combobox
validation={validation}
{...args}
Expand Down Expand Up @@ -174,7 +175,7 @@ export const ComboboxStory: Story<IArgs> = ({
)
)}
</Combobox>
{message && (
{!!message && (
<Field.Message validation={validation} validationLabel={validationLabel}>
{message}
</Field.Message>
Expand Down
2 changes: 1 addition & 1 deletion packages/dropdowns/demo/stories/MenuStory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const MenuItem = ({ icon, meta, ...item }: IItem) => {
return (
<Item {...item} icon={icon ? <LeafIcon /> : undefined}>
{item.label}
{meta && <Item.Meta>{meta}</Item.Meta>}
{!!meta && <Item.Meta>{meta}</Item.Meta>}
</Item>
);
};
Expand Down
13 changes: 8 additions & 5 deletions packages/dropdowns/demo/~patterns/stories/MenuButtonStory.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,11 +20,14 @@ export const MenuButtonStory: StoryFn = () => {
<div style={{ display: 'inline-block', position: 'relative', width: 300 }}>
<Menu
hasArrow
button={props => (
<IconButton {...props} aria-label="Menu">
<LeafIcon />
</IconButton>
)}
button={
/* eslint-disable-next-line react/no-unstable-nested-components */
props => (
<IconButton {...props} aria-label="Menu">
<LeafIcon />
</IconButton>
)
}
minHeight="fit-content"
>
<Item value="One" />
Expand Down
Loading