Skip to content

Commit 821d0f2

Browse files
jzempeljzempel
authored
fix: add storybook demos to eslint config (#1958)
1 parent bbe1263 commit 821d0f2

File tree

41 files changed

+124
-103
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

41 files changed

+124
-103
lines changed

‎eslint.config.mjs

+9
Original file line numberDiff line numberDiff line change
@@ -56,5 +56,14 @@ export default [
5656
'no-console': 'off',
5757
'react/button-has-type': 'off'
5858
}
59+
},
60+
{
61+
files: ['packages/*/demo/**/*.{ts,tsx}'],
62+
ignores: ['packages/.template/**/*.{ts,tsx}'],
63+
...typescriptPlugin,
64+
rules: {
65+
...typescriptRules,
66+
'react/no-array-index-key': 'off'
67+
}
5968
}
6069
];

‎packages/accordions/demo/stories/AccordionStory.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@ export const AccordionStory: Story<IArgs> = ({ sections, ...args }: IArgs) => (
5454
<Accordion.Section key={index}>
5555
<Accordion.Header>
5656
<Accordion.Label>{section.headerLabel}</Accordion.Label>
57-
{args.hasIconButtons && <IconButtons isCompact={args.isCompact || false} />}
57+
{!!args.hasIconButtons && <IconButtons isCompact={args.isCompact || false} />}
5858
</Accordion.Header>
5959
<Accordion.Panel>{section.panel}</Accordion.Panel>
6060
</Accordion.Section>

‎packages/accordions/demo/stories/TimelineStory.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export const TimelineStory: StoryFn<IArgs> = ({ items, surfaceColor, ...args })
3636
icon={args.hasIcon ? <Icon /> : undefined}
3737
surfaceColor={surfaceColor}
3838
>
39-
{args.hasOppositeContent && (
39+
{!!args.hasOppositeContent && (
4040
<Timeline.OppositeContent>
4141
<Span hue="grey">{item.description}</Span>
4242
</Timeline.OppositeContent>

‎packages/avatars/demo/~patterns/stories/StatusMenuStory.tsx

+10-7
Original file line numberDiff line numberDiff line change
@@ -29,13 +29,16 @@ export const StatusMenuStory: Story = ({ isCompact }) => {
2929
<Grid.Row style={{ height: 'calc(100vh - 80px)' }}>
3030
<Grid.Col textAlign="center" alignSelf="center">
3131
<Menu
32-
button={props => (
33-
<StyledIconButton {...props} aria-label="Select status">
34-
<Avatar status={selectedType} size={isCompact ? 'small' : 'medium'}>
35-
<img alt="Example User" src="images/avatars/chrome.png" />
36-
</Avatar>
37-
</StyledIconButton>
38-
)}
32+
button={
33+
/* eslint-disable-next-line react/no-unstable-nested-components */
34+
props => (
35+
<StyledIconButton {...props} aria-label="Select status">
36+
<Avatar status={selectedType} size={isCompact ? 'small' : 'medium'}>
37+
<img alt="Example User" src="images/avatars/chrome.png" />
38+
</Avatar>
39+
</StyledIconButton>
40+
)
41+
}
3942
onChange={onChange}
4043
isCompact={isCompact}
4144
>

‎packages/buttons/demo/stories/ButtonStory.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -26,13 +26,13 @@ export const ButtonStory: Story<IArgs> = ({
2626
...args
2727
}) => (
2828
<Button {...args}>
29-
{hasStartIcon && (
29+
{!!hasStartIcon && (
3030
<Button.StartIcon isRotated={isStartIconRotated}>
3131
<StartIcon />
3232
</Button.StartIcon>
3333
)}
3434
{args.children}
35-
{hasEndIcon && (
35+
{!!hasEndIcon && (
3636
<Button.EndIcon isRotated={isEndIconRotated}>
3737
<EndIcon />
3838
</Button.EndIcon>

‎packages/chrome/demo/stories/ChromeStory.tsx

+9-9
Original file line numberDiff line numberDiff line change
@@ -117,9 +117,9 @@ export const ChromeStory: Story<IArgs> = ({
117117
return (
118118
<Chrome {...args} style={{ margin: `-${DEFAULT_THEME.space.xl}` }}>
119119
<SkipNav targetId="main-content">{skipNav}</SkipNav>
120-
{hasNav && (
120+
{!!hasNav && (
121121
<Nav isExpanded={isExpanded} aria-label="Nav">
122-
{hasLogo && (
122+
{!!hasLogo && (
123123
<Nav.Item hasLogo product={product}>
124124
<Nav.ItemIcon>{product ? PRODUCT_ICONS[product] : <ProductIcon />}</Nav.ItemIcon>
125125
<Nav.ItemText>Nav Logo</Nav.ItemText>
@@ -139,7 +139,7 @@ export const ChromeStory: Story<IArgs> = ({
139139
</Nav.Item>
140140
))}
141141
</Nav.List>
142-
{hasBrandmark && (
142+
{!!hasBrandmark && (
143143
<Nav.Item hasBrandmark>
144144
<Nav.ItemIcon>
145145
<BrandmarkIcon />
@@ -151,9 +151,9 @@ export const ChromeStory: Story<IArgs> = ({
151151
)}
152152

153153
<Body>
154-
{hasHeader && (
154+
{!!hasHeader && (
155155
<Header isStandalone={!hasNav}>
156-
{hasLogo && (
156+
{!!hasLogo && (
157157
<Header.Item hasLogo product={product}>
158158
<Header.ItemIcon>
159159
{product ? PRODUCT_ICONS[product] : <ProductIcon />}
@@ -169,7 +169,7 @@ export const ChromeStory: Story<IArgs> = ({
169169
maxY={item.maxY}
170170
isRound={item.isRound}
171171
>
172-
{item.hasIcon && (
172+
{!!item.hasIcon && (
173173
<Header.ItemIcon>
174174
{HEADER_ICONS[HEADER_ICONS.length - headerItems.length + index] || (
175175
<HeaderIcon />
@@ -180,7 +180,7 @@ export const ChromeStory: Story<IArgs> = ({
180180
</Header.ItemWrapper>
181181
) : (
182182
<Header.Item key={index} maxX={item.maxX} maxY={item.maxY} isRound={item.isRound}>
183-
{item.hasIcon && (
183+
{!!item.hasIcon && (
184184
<Header.ItemIcon>
185185
{HEADER_ICONS[HEADER_ICONS.length - headerItems.length + index] || (
186186
<HeaderIcon />
@@ -210,9 +210,9 @@ export const ChromeStory: Story<IArgs> = ({
210210
{...args}
211211
/>
212212
</Content>
213-
{hasFooter && (
213+
{!!hasFooter && (
214214
<Footer>
215-
{footerItems &&
215+
{!!footerItems &&
216216
footerItems.map(({ text, type }, index) => (
217217
<Footer.Item key={index}>
218218
<Button isBasic={type === 'basic'} isPrimary={type === 'primary'}>

‎packages/chrome/demo/stories/SheetStory.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -45,16 +45,16 @@ export const SheetComponent = ({
4545
...props
4646
}: ISheetComponentProps) => (
4747
<Sheet {...props}>
48-
{hasHeader && (
48+
{!!hasHeader && (
4949
<Sheet.Header>
50-
{hasTitle && <Sheet.Title>{title}</Sheet.Title>}
51-
{hasDescription && <Sheet.Description>{description}</Sheet.Description>}
50+
{!!hasTitle && <Sheet.Title>{title}</Sheet.Title>}
51+
{!!hasDescription && <Sheet.Description>{description}</Sheet.Description>}
5252
</Sheet.Header>
5353
)}
5454
{hasBody ? <Sheet.Body>{body}</Sheet.Body> : body}
55-
{hasFooter && (
55+
{!!hasFooter && (
5656
<Sheet.Footer isCompact={isCompact}>
57-
{footerItems &&
57+
{!!footerItems &&
5858
footerItems.map(({ text, type }, index) => (
5959
<Sheet.FooterItem key={index}>
6060
<Button
@@ -69,7 +69,7 @@ export const SheetComponent = ({
6969
))}
7070
</Sheet.Footer>
7171
)}
72-
{hasClose && <Sheet.Close onClick={onClick} />}
72+
{!!hasClose && <Sheet.Close onClick={onClick} />}
7373
</Sheet>
7474
);
7575

‎packages/datepickers/demo/stories/DatePickerStory.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -41,7 +41,7 @@ export const DatePickerStory: Story<IArgs> = ({
4141
<DatePicker {...args} formatDate={formatDate} isCompact={isCompact}>
4242
<Input isCompact={isCompact} validation={validation} />
4343
</DatePicker>
44-
{hasMessage && (
44+
{!!hasMessage && (
4545
<Field.Message validation={validation} validationLabel={validationLabel}>
4646
{message}
4747
</Field.Message>

‎packages/draggable/demo/stories/DraggableStory.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ interface IArgs extends IDraggableProps {
1515

1616
export const DraggableStory: Story<IArgs> = ({ hasGrip, children, ...args }) => (
1717
<Draggable {...args}>
18-
{hasGrip && <Draggable.Grip />}
19-
{children && <Draggable.Content>{children}</Draggable.Content>}
18+
{!!hasGrip && <Draggable.Grip />}
19+
{!!children && <Draggable.Content>{children}</Draggable.Content>}
2020
</Draggable>
2121
);

‎packages/draggable/demo/stories/DropzoneStory.tsx

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ interface IArgs extends IDropzoneProps {
1717

1818
export const DropzoneStory: Story<IArgs> = ({ children, hasIcon, ...args }) => (
1919
<Dropzone {...args}>
20-
{hasIcon && (
20+
{!!hasIcon && (
2121
<Dropzone.Icon>
2222
<ReplaceIcon />
2323
</Dropzone.Icon>
2424
)}
25-
{children && <Dropzone.Message>{children}</Dropzone.Message>}
25+
{!!children && <Dropzone.Message>{children}</Dropzone.Message>}
2626
</Dropzone>
2727
);

‎packages/draggable/demo/~patterns/stories/DragAndDropStory.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -326,6 +326,7 @@ export const DragAndDropStory: Story<IArgs> = ({
326326
>
327327
{Object.keys(columns).map(columnId => {
328328
const isDraggablesColumn = columnId === draggablesColId;
329+
/* eslint-disable-next-line no-useless-assignment */
329330
const ColumnComponent = isDraggablesColumn ? DraggablesColumn : DroppablesColumn;
330331

331332
return (
@@ -335,8 +336,8 @@ export const DragAndDropStory: Story<IArgs> = ({
335336
key={columnId}
336337
activeId={activeId}
337338
activeColumnId={activeColumnId}
338-
hasDropIndicator={hasDropIndicator && !isDraggablesColumn}
339-
hasPlaceholder={hasPlaceholder && isDraggablesColumn}
339+
hasDropIndicator={!!hasDropIndicator && !isDraggablesColumn}
340+
hasPlaceholder={!!hasPlaceholder && isDraggablesColumn}
340341
isCompact={isCompact}
341342
isHorizontal={isHorizontal}
342343
isBare={isBare}
@@ -346,7 +347,7 @@ export const DragAndDropStory: Story<IArgs> = ({
346347
})}
347348
</StyledContainer>
348349
<DragOverlay>
349-
{activeItem && (
350+
{!!activeItem && (
350351
<div style={{ padding: isHorizontal ? `0 ${overlayOffset}` : `${overlayOffset} 0` }}>
351352
<DraggableItem
352353
ref={overlayRef}

‎packages/draggable/demo/~patterns/stories/components.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ const SortableItem = ({
112112

113113
return (
114114
<>
115-
{isUsingKeyboard && showIndicator && (
115+
{!!isUsingKeyboard && !!showIndicator && (
116116
<DropIndicator
117117
transition={transition}
118118
transform={transformValue}
@@ -175,7 +175,7 @@ export const SortablesColumn = ({
175175
))}
176176
</DraggableList>
177177
{items.length === 0 && <Dropzone.Message>Drag to add</Dropzone.Message>}
178-
{showDropMessage && <Dropzone.Message>Drop item here</Dropzone.Message>}
178+
{!!showDropMessage && <Dropzone.Message>Drop item here</Dropzone.Message>}
179179
</SortableContext>
180180
</Dropzone>
181181
);
@@ -210,7 +210,7 @@ export const DraggableListItem = ({
210210
style={draggableItemStyle}
211211
isCompact={isCompact}
212212
isBare={isBare}
213-
isPlaceholder={isDragging && isPlaceholder}
213+
isPlaceholder={!!isDragging && isPlaceholder}
214214
ref={setActivatorNodeRef}
215215
/>
216216
</DraggableList.Item>

‎packages/dropdowns.legacy/demo/stories/DropdownFieldStory.tsx

+3-3
Original file line numberDiff line numberDiff line change
@@ -48,10 +48,10 @@ export const DropdownFieldStory: Story<IArgs> = ({
4848
<Label hidden={isLabelHidden} isRegular={isLabelRegular}>
4949
{label}
5050
</Label>
51-
{hasHint && !isLabelHidden && <Hint>{hint}</Hint>}
51+
{!!hasHint && !isLabelHidden && <Hint>{hint}</Hint>}
5252
{children}
53-
{hasHint && isLabelHidden && <Hint>{hint}</Hint>}
54-
{hasMessage && (
53+
{!!hasHint && !!isLabelHidden && <Hint>{hint}</Hint>}
54+
{!!hasMessage && (
5555
<Message validation={validation} validationLabel={validationLabel}>
5656
{message}
5757
</Message>

‎packages/dropdowns.legacy/demo/stories/MenuStory.tsx

+6-6
Original file line numberDiff line numberDiff line change
@@ -38,14 +38,14 @@ const MenuItem = ({ text: children, type, hasIcon, meta, ...props }: IProps) =>
3838
return (
3939
<AddItem {...props}>
4040
{children}
41-
{meta && <ItemMeta>{meta}</ItemMeta>}
41+
{!!meta && <ItemMeta>{meta}</ItemMeta>}
4242
</AddItem>
4343
);
4444

4545
case 'header':
4646
return (
4747
<HeaderItem hasIcon={hasIcon}>
48-
{hasIcon && (
48+
{!!hasIcon && (
4949
<HeaderIcon>
5050
<Icon />
5151
</HeaderIcon>
@@ -58,15 +58,15 @@ const MenuItem = ({ text: children, type, hasIcon, meta, ...props }: IProps) =>
5858
return (
5959
<NextItem {...props}>
6060
{children}
61-
{meta && <ItemMeta>{meta}</ItemMeta>}
61+
{!!meta && <ItemMeta>{meta}</ItemMeta>}
6262
</NextItem>
6363
);
6464

6565
case 'previous':
6666
return (
6767
<PreviousItem {...props}>
6868
{children}
69-
{meta && <ItemMeta>{meta}</ItemMeta>}
69+
{!!meta && <ItemMeta>{meta}</ItemMeta>}
7070
</PreviousItem>
7171
);
7272

@@ -78,13 +78,13 @@ const MenuItem = ({ text: children, type, hasIcon, meta, ...props }: IProps) =>
7878
</MediaFigure>
7979
<MediaBody>
8080
{children}
81-
{meta && <ItemMeta>{meta}</ItemMeta>}
81+
{!!meta && <ItemMeta>{meta}</ItemMeta>}
8282
</MediaBody>
8383
</MediaItem>
8484
) : (
8585
<Item {...props}>
8686
{children}
87-
{meta && <ItemMeta>{meta}</ItemMeta>}
87+
{!!meta && <ItemMeta>{meta}</ItemMeta>}
8888
</Item>
8989
);
9090
}

‎packages/dropdowns.legacy/demo/stories/TriggerStory.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -58,7 +58,7 @@ export const TriggerStory: Story<IArgs> = ({
5858
>
5959
<Trigger>
6060
<Button isDanger={isDanger} size={args.isCompact ? 'small' : undefined}>
61-
{hasMedia && (
61+
{!!hasMedia && (
6262
<Button.StartIcon>
6363
<Icon />
6464
</Button.StartIcon>

‎packages/dropdowns.legacy/demo/~patterns/stories/MenuStory.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@ export const MenuStory: Story<IArgs> = ({ items, appendToNode, ...rest }) => {
4444
// Grant a bit of room, so the menu will fit
4545
style={{ minHeight: '300px' }}
4646
>
47-
{isReady && (
47+
{!!isReady && (
4848
<Grid>
4949
<Grid.Row
5050
style={{

‎packages/dropdowns/demo/stories/ComboboxStory.tsx

+4-3
Original file line numberDiff line numberDiff line change
@@ -26,11 +26,12 @@ import { IOption, Options } from './types';
2626
const toLabel = (option: IOption) => option.label || option.value;
2727

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

3132
return (
3233
<Option icon={icon ? <Svg /> : undefined} {...props}>
33-
{meta && (
34+
{!!meta && (
3435
<>
3536
<span>{props.children || toLabel(props)}</span>
3637
<Option.Meta>{meta}</Option.Meta>
@@ -126,7 +127,7 @@ export const ComboboxStory: Story<IArgs> = ({
126127
<Field.Label hidden={isLabelHidden} isRegular={isLabelRegular}>
127128
{label}
128129
</Field.Label>
129-
{hint && <Field.Hint>{hint}</Field.Hint>}
130+
{!!hint && <Field.Hint>{hint}</Field.Hint>}
130131
<Combobox
131132
validation={validation}
132133
{...args}
@@ -174,7 +175,7 @@ export const ComboboxStory: Story<IArgs> = ({
174175
)
175176
)}
176177
</Combobox>
177-
{message && (
178+
{!!message && (
178179
<Field.Message validation={validation} validationLabel={validationLabel}>
179180
{message}
180181
</Field.Message>

‎packages/dropdowns/demo/stories/MenuStory.tsx

+1-1
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const MenuItem = ({ icon, meta, ...item }: IItem) => {
1717
return (
1818
<Item {...item} icon={icon ? <LeafIcon /> : undefined}>
1919
{item.label}
20-
{meta && <Item.Meta>{meta}</Item.Meta>}
20+
{!!meta && <Item.Meta>{meta}</Item.Meta>}
2121
</Item>
2222
);
2323
};

‎packages/dropdowns/demo/~patterns/stories/MenuButtonStory.tsx

+8-5
Original file line numberDiff line numberDiff line change
@@ -20,11 +20,14 @@ export const MenuButtonStory: StoryFn = () => {
2020
<div style={{ display: 'inline-block', position: 'relative', width: 300 }}>
2121
<Menu
2222
hasArrow
23-
button={props => (
24-
<IconButton {...props} aria-label="Menu">
25-
<LeafIcon />
26-
</IconButton>
27-
)}
23+
button={
24+
/* eslint-disable-next-line react/no-unstable-nested-components */
25+
props => (
26+
<IconButton {...props} aria-label="Menu">
27+
<LeafIcon />
28+
</IconButton>
29+
)
30+
}
2831
minHeight="fit-content"
2932
>
3033
<Item value="One" />

0 commit comments

Comments
 (0)