fix: add storybook demos to eslint config (#1958)

zendeskgarden · Oct 22, 2024 · 821d0f2 · 821d0f2
1 parent bbe1263
commit 821d0f2
Show file tree

Hide file tree

Showing 41 changed files with 124 additions and 103 deletions.
diff --git a/eslint.config.mjs b/eslint.config.mjs
@@ -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'
+    }
   }
 ];
diff --git a/packages/accordions/demo/stories/AccordionStory.tsx b/packages/accordions/demo/stories/AccordionStory.tsx
@@ -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>

diff --git a/packages/accordions/demo/stories/TimelineStory.tsx b/packages/accordions/demo/stories/TimelineStory.tsx
@@ -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>

diff --git a/packages/avatars/demo/~patterns/stories/StatusMenuStory.tsx b/packages/avatars/demo/~patterns/stories/StatusMenuStory.tsx
@@ -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}
           >

diff --git a/packages/buttons/demo/stories/ButtonStory.tsx b/packages/buttons/demo/stories/ButtonStory.tsx
@@ -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>

diff --git a/packages/chrome/demo/stories/ChromeStory.tsx b/packages/chrome/demo/stories/ChromeStory.tsx
@@ -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>
@@ -139,7 +139,7 @@ export const ChromeStory: Story<IArgs> = ({
               </Nav.Item>
             ))}
           </Nav.List>
-          {hasBrandmark && (
+          {!!hasBrandmark && (
             <Nav.Item hasBrandmark>
               <Nav.ItemIcon>
                 <BrandmarkIcon />
@@ -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 />}
@@ -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 />
@@ -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 />
@@ -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'}>

diff --git a/packages/chrome/demo/stories/SheetStory.tsx b/packages/chrome/demo/stories/SheetStory.tsx
@@ -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
@@ -69,7 +69,7 @@ export const SheetComponent = ({
           ))}
       </Sheet.Footer>
     )}
-    {hasClose && <Sheet.Close onClick={onClick} />}
+    {!!hasClose && <Sheet.Close onClick={onClick} />}
   </Sheet>
 );
 

diff --git a/packages/datepickers/demo/stories/DatePickerStory.tsx b/packages/datepickers/demo/stories/DatePickerStory.tsx
@@ -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>

diff --git a/packages/draggable/demo/stories/DraggableStory.tsx b/packages/draggable/demo/stories/DraggableStory.tsx
@@ -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>
 );
diff --git a/packages/draggable/demo/stories/DropzoneStory.tsx b/packages/draggable/demo/stories/DropzoneStory.tsx
@@ -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>
 );
diff --git a/packages/draggable/demo/~patterns/stories/DragAndDropStory.tsx b/packages/draggable/demo/~patterns/stories/DragAndDropStory.tsx
@@ -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 (
@@ -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}
@@ -346,7 +347,7 @@ export const DragAndDropStory: Story<IArgs> = ({
         })}
       </StyledContainer>
       <DragOverlay>
-        {activeItem && (
+        {!!activeItem && (
           <div style={{ padding: isHorizontal ? `0 ${overlayOffset}` : `${overlayOffset} 0` }}>
             <DraggableItem
               ref={overlayRef}

diff --git a/packages/draggable/demo/~patterns/stories/components.tsx b/packages/draggable/demo/~patterns/stories/components.tsx
@@ -112,7 +112,7 @@ const SortableItem = ({
 
   return (
     <>
-      {isUsingKeyboard && showIndicator && (
+      {!!isUsingKeyboard && !!showIndicator && (
         <DropIndicator
           transition={transition}
           transform={transformValue}
@@ -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>
   );
@@ -210,7 +210,7 @@ export const DraggableListItem = ({
         style={draggableItemStyle}
         isCompact={isCompact}
         isBare={isBare}
-        isPlaceholder={isDragging && isPlaceholder}
+        isPlaceholder={!!isDragging && isPlaceholder}
         ref={setActivatorNodeRef}
       />
     </DraggableList.Item>

diff --git a/packages/dropdowns.legacy/demo/stories/DropdownFieldStory.tsx b/packages/dropdowns.legacy/demo/stories/DropdownFieldStory.tsx
@@ -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>

diff --git a/packages/dropdowns.legacy/demo/stories/MenuStory.tsx b/packages/dropdowns.legacy/demo/stories/MenuStory.tsx
@@ -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>
@@ -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>
       );
 
@@ -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>
       );
   }

diff --git a/packages/dropdowns.legacy/demo/stories/TriggerStory.tsx b/packages/dropdowns.legacy/demo/stories/TriggerStory.tsx
@@ -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>

diff --git a/packages/dropdowns.legacy/demo/~patterns/stories/MenuStory.tsx b/packages/dropdowns.legacy/demo/~patterns/stories/MenuStory.tsx
@@ -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={{

diff --git a/packages/dropdowns/demo/stories/ComboboxStory.tsx b/packages/dropdowns/demo/stories/ComboboxStory.tsx
@@ -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>
@@ -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}
@@ -174,7 +175,7 @@ export const ComboboxStory: Story<IArgs> = ({
                 )
               )}
             </Combobox>
-            {message && (
+            {!!message && (
               <Field.Message validation={validation} validationLabel={validationLabel}>
                 {message}
               </Field.Message>

diff --git a/packages/dropdowns/demo/stories/MenuStory.tsx b/packages/dropdowns/demo/stories/MenuStory.tsx
@@ -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>
   );
 };

diff --git a/packages/dropdowns/demo/~patterns/stories/MenuButtonStory.tsx b/packages/dropdowns/demo/~patterns/stories/MenuButtonStory.tsx
@@ -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" />