fix: apply formatter and linter fixes

Author: aaronbassett

packages/component-library/src/AppShell/index.stories.tsx

@@ -1,27 +1,29 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { ErrorPage, type Props as ErrorPageProps } from "../ErrorPage/index.jsx";
+import { AppBody as AppShellComponent } from "./index.jsx";
+import type { Props as ErrorPageProps } from "../ErrorPage/index.jsx";
+import { ErrorPage } from "../ErrorPage/index.jsx";
 import { NetworkError as NetworkErrorStory } from "../ErrorPage/index.stories.jsx";
 import { InfoBox } from "../InfoBox/index.jsx";
-import { NoResults, type Props as NoResultsProps } from "../NoResults/index.jsx";
+import type { Props as NoResultsProps } from "../NoResults/index.jsx";
+import { NoResults } from "../NoResults/index.jsx";
 import { WarningVariant as WarningVariantStory } from "../NoResults/index.stories.jsx";
 import { NotFoundPage } from "../NotFoundPage/index.jsx";
-import { AppBody as AppShellComponent } from "./index.jsx";
 
 const meta = {
   title: "layouts & pages/AppShell",
   component: AppShellComponent,
   subcomponents: { ErrorPage, NoResults, NotFoundPage },
   globals: {
     args: {
-    appName: "Component Library",
-    children: "Hello world!",
-    tabs: [
-      { children: "Home", segment: "" },
-      { children: "Products", segment: "products" },
-      { children: "Developers", segment: "developers" },
-    ],
-  },
+      appName: "Component Library",
+      children: "Hello world!",
+      tabs: [
+        { children: "Home", segment: "" },
+        { children: "Products", segment: "products" },
+        { children: "Developers", segment: "developers" },
+      ],
+    },
     bare: true,
     theme: {
       disable: true,
@@ -58,48 +60,46 @@ export default meta;
 
 export const AppShell = {
   args: {
-    ...meta.globals?.args,
+    ...meta.globals.args,
   },
   render: (args) => (
     <AppShellComponent {...args}>
-      <InfoBox>
-        {args.children}
-      </InfoBox>
+      <InfoBox>{args.children}</InfoBox>
     </AppShellComponent>
-  )
+  ),
 } satisfies StoryObj<typeof AppShellComponent>;
 
 type Story = StoryObj<typeof meta>;
 
 export const ErrorStory: Story = {
   args: {
-    ...meta.globals?.args,
+    ...meta.globals.args,
   },
   render: (args) => (
     <AppShellComponent {...args}>
-      <ErrorPage {...NetworkErrorStory.args as ErrorPageProps} />
+      <ErrorPage {...(NetworkErrorStory.args as ErrorPageProps)} />
     </AppShellComponent>
-  )
+  ),
 };
 
 export const NoResultsStory: Story = {
   args: {
-    ...meta.globals?.args,
+    ...meta.globals.args,
   },
   render: (args) => (
     <AppShellComponent {...args}>
-      <NoResults {...WarningVariantStory.args as NoResultsProps} />
+      <NoResults {...(WarningVariantStory.args as NoResultsProps)} />
     </AppShellComponent>
-  )
+  ),
 };
 
 export const NotFoundStory: Story = {
   args: {
-    ...meta.globals?.args,
+    ...meta.globals.args,
   },
   render: (args) => (
     <AppShellComponent {...args}>
       <NotFoundPage />
     </AppShellComponent>
-  )
-};
+  ),
+};

packages/component-library/src/Badge/index.stories.module.scss

@@ -5,4 +5,4 @@
   gap: theme.spacing(2);
   flex-wrap: wrap;
   align-items: center;
-}
+}

packages/component-library/src/Badge/index.stories.tsx

@@ -50,7 +50,11 @@ export const Badge = {
 
 type Story = StoryObj<typeof BadgeComponent>;
 
-const renderAllVariants = (style: typeof STYLES[number], size: typeof SIZES[number], children: React.ReactNode) => (
+const renderAllVariants = (
+  style: (typeof STYLES)[number],
+  size: (typeof SIZES)[number],
+  children: React.ReactNode,
+) => (
   <div className={styles.variantsContainer}>
     {VARIANTS.map((variant) => (
       <BadgeComponent key={variant} variant={variant} style={style} size={size}>
@@ -136,7 +140,6 @@ export const OutlineXS: Story = {
   },
 };
 
-
 export const OutlineMD: Story = {
   args: {
     children: "Badge",

packages/component-library/src/Card/index.stories.module.scss

@@ -55,4 +55,4 @@
   display: flex;
   flex-direction: column;
   gap: theme.spacing(4);
-}
+}

packages/component-library/src/Card/index.stories.tsx

@@ -1,5 +1,6 @@
 import * as icons from "@phosphor-icons/react/dist/ssr";
 import type { Meta, StoryObj } from "@storybook/react";
+import { fn } from "@storybook/test";
 
 import { Badge } from "../Badge/index.jsx";
 import { Button } from "../Button/index.jsx";
@@ -87,8 +88,8 @@ export const BasicCard: Story = {
   args: {
     children: (
       <p>
-        This is a basic card with just content. It can contain any React elements
-        and will display them with appropriate styling.
+        This is a basic card with just content. It can contain any React
+        elements and will display them with appropriate styling.
       </p>
     ),
     variant: "secondary",
@@ -102,7 +103,7 @@ export const WithTitleAndIcon: Story = {
     children: (
       <div>
         <p>This card has a title and an icon in the header.</p>
-        <p>Icons help users quickly identify the card's purpose.</p>
+        <p>Icons help users quickly identify the card&apos;s purpose.</p>
       </div>
     ),
     variant: "secondary",
@@ -146,9 +147,7 @@ export const WithFooter: Story = {
     ),
     footer: (
       <div className={styles.footerContent}>
-        <span className={styles.footerText}>
-          Last updated 5 minutes ago
-        </span>
+        <span className={styles.footerText}>Last updated 5 minutes ago</span>
         <Button size="sm" variant="outline">
           View All
         </Button>
@@ -175,7 +174,7 @@ export const AsLink: Story = {
 
 export const AsButton: Story = {
   args: {
-    onPress: () => alert("Card clicked!"),
+    onPress: fn(),
     icon: <icons.CursorClick />,
     title: "Interactive Card",
     children: (

packages/component-library/src/CrossfadeTabPanels/index.stories.module.scss

@@ -112,4 +112,4 @@
   &:hover {
     background-color: theme.color("button", "primary", "background", "hover");
   }
-}
+}

packages/component-library/src/CrossfadeTabPanels/index.stories.tsx

@@ -1,9 +1,9 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { TabList } from "../TabList/index.jsx";
-import { Tabs } from "../unstyled/Tabs/index.jsx";
 import { CrossfadeTabPanels as CrossfadeTabPanelsComponent } from "./index.jsx";
 import styles from "./index.stories.module.scss";
+import { TabList } from "../TabList/index.jsx";
+import { Tabs } from "../unstyled/Tabs/index.jsx";
 
 const meta = {
   title: "navigation & menus/CrossfadeTabPanels",
@@ -18,7 +18,8 @@ const meta = {
   },
   argTypes: {
     items: {
-      description: "Array of tab panel items with id, optional className, and children",
+      description:
+        "Array of tab panel items with id, optional className, and children",
       table: {
         category: "Props",
       },
@@ -156,8 +157,14 @@ export const DifferentHeights: Story = {
               <div className={styles.tabContent}>
                 <h2 className={styles.heading}>Medium Content</h2>
                 <p>This tab has more content than the first one.</p>
-                <p>It includes multiple paragraphs to show how the crossfade handles different heights.</p>
-                <p>The animation should smoothly transition between different content sizes.</p>
+                <p>
+                  It includes multiple paragraphs to show how the crossfade
+                  handles different heights.
+                </p>
+                <p>
+                  The animation should smoothly transition between different
+                  content sizes.
+                </p>
               </div>
             ),
           },
@@ -166,13 +173,22 @@ export const DifferentHeights: Story = {
             children: (
               <div className={styles.tabContent}>
                 <h2 className={styles.heading}>Long Content</h2>
-                <p>This tab contains the most content to demonstrate height transitions.</p>
+                <p>
+                  This tab contains the most content to demonstrate height
+                  transitions.
+                </p>
                 <h3>Section 1</h3>
                 <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
                 <h3>Section 2</h3>
-                <p>Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+                <p>
+                  Sed do eiusmod tempor incididunt ut labore et dolore magna
+                  aliqua.
+                </p>
                 <h3>Section 3</h3>
-                <p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.</p>
+                <p>
+                  Ut enim ad minim veniam, quis nostrud exercitation ullamco
+                  laboris.
+                </p>
               </div>
             ),
           },
@@ -221,11 +237,12 @@ export const ComplexContent: Story = {
                 <div className={styles.section}>
                   <div className={styles.chartPlaceholder}>
                     <h3>Chart Placeholder</h3>
-                    <div className={styles.chart}>
-                      Chart would go here
-                    </div>
+                    <div className={styles.chart}>Chart would go here</div>
                   </div>
-                  <p>Analytics data and insights would be displayed in this panel.</p>
+                  <p>
+                    Analytics data and insights would be displayed in this
+                    panel.
+                  </p>
                 </div>
               </div>
             ),
@@ -237,12 +254,16 @@ export const ComplexContent: Story = {
                 <h2 className={styles.heading}>Settings</h2>
                 <form className={styles.form}>
                   <div className={styles.formField}>
-                    <label className={styles.label}>Setting 1</label>
-                    <input type="text" className={styles.input} />
+                    <label className={styles.label} htmlFor="setting1">
+                      Setting 1
+                    </label>
+                    <input type="text" className={styles.input} id="setting1" />
                   </div>
                   <div className={styles.formField}>
-                    <label className={styles.label}>Setting 2</label>
-                    <select className={styles.select}>
+                    <label className={styles.label} htmlFor="setting2">
+                      Setting 2
+                    </label>
+                    <select className={styles.select} id="setting2">
                       <option>Option 1</option>
                       <option>Option 2</option>
                     </select>
@@ -258,4 +279,4 @@ export const ComplexContent: Story = {
       />
     </Tabs>
   ),
-};
+};

packages/component-library/src/DropdownCaretDown/index.stories.tsx

@@ -51,4 +51,4 @@ export default meta;
 
 type Story = StoryObj<typeof DropdownCaretDownComponent>;
 
-export const Default: Story = {};
+export const Default: Story = {};

packages/component-library/src/EntityList/index.stories.module.scss

@@ -8,4 +8,4 @@
 .actionsContainer {
   display: flex;
   gap: theme.spacing(2);
-}
+}

packages/component-library/src/EntityList/index.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { Badge } from "../Badge/index.jsx";
 import { EntityList as EntityListComponent } from "./index.jsx";
 import styles from "./index.stories.module.scss";
+import { Badge } from "../Badge/index.jsx";
 
 const meta = {
   title: "data & tables/EntityList",
@@ -232,4 +232,4 @@ export const ComplexContent: Story = {
       },
     ],
   },
-};
+};