Clean up

jpmorganchase · May 12, 2024 · 2926676 · 2926676
1 parent 5b43970
commit 2926676
Show file tree

Hide file tree

Showing 11 changed files with 94 additions and 126 deletions.
diff --git a/packages/core/stories/dialog/dialog.stories.tsx b/packages/core/stories/dialog/dialog.stories.tsx
@@ -1,5 +1,4 @@
-/* eslint-disable @typescript-eslint/no-unsafe-assignment */
-import { PropsWithChildren, ReactNode, useEffect, useState } from "react";
+import { ComponentProps, PropsWithChildren, ReactNode, useEffect, useState } from "react";
 import {
   Button,
   StackLayout,
@@ -9,6 +8,7 @@ import {
   DialogContent,
   DialogCloseButton,
   DialogProps,
+  DialogContentProps,
 } from "@salt-ds/core";
 import { StoryFn, Meta } from "@storybook/react";
 import "./dialog.stories.css";
@@ -33,7 +33,10 @@ const UnmountLogger = () => {
 };
 
 const DialogTemplate: StoryFn<
-  DialogProps & { header: string; preheader: string; content: ReactNode }
+  Omit<DialogProps, "content"> &
+    Pick<ComponentProps<typeof DialogHeader>, "header" | "preheader"> & {
+      content: DialogContentProps["children"];
+    }
 > = ({
   header,
   preheader,
@@ -99,51 +102,54 @@ export const LongContent = DialogTemplate.bind({});
 LongContent.args = {
   header: "Congratulations! You have created a Dialog.",
   content: (
-    <StackLayout>
-      <div>
-        Lorem Ipsum is simply dummy text of the printing and typesetting
-        industry. Lorem Ipsum has been the industry's standard dummy text ever
-        since the 1500s, when an unknown printer took a galley of type and
-        scrambled it to make a type specimen book.
-      </div>
-      <div>
-        It has survived not only five centuries, but also the leap into
-        electronic typesetting, remaining essentially unchanged. It was
-        popularised in the 1960s with the release of Letraset sheets containing
-        Lorem Ipsum passages, and more recently with desktop publishing software
-        like Aldus PageMaker including versions of Lorem Ipsum.
-      </div>
-      <div>
-        It is a long established fact that a reader will be distracted by the
-        readable content of a page when looking at its layout. The point of
-        using Lorem Ipsum is that it has a more-or-less normal distribution of
-        letters, as opposed to using 'Content here, content here', making it
-        look like readable English.
-      </div>
-      <div>
-        Many desktop publishing packages and web page editors now use Lorem
-        Ipsum as their default model text, and a search for 'lorem ipsum' will
-        uncover many web sites still in their infancy. Various versions have
-        evolved over the years, sometimes by accident, sometimes on purpose
-        (injected humour and the like).
-      </div>
-      <div>
-        Contrary to popular belief, Lorem Ipsum is not simply random text. It
-        has roots in a piece of classical Latin literature from 45 BC, making it
-        over 2000 years old. Richard McClintock, a Latin professor at
-        Hampden-Sydney College in Virginia, looked up one of the more obscure
-        Latin words, consectetur, from a Lorem Ipsum passage, and going through
-        the cites of the word in classical literature, discovered the
-        undoubtable source.
-      </div>
-      <div>
-        Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
-        Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written
-        in 45 BC. This book is a treatise on the theory of ethics, very popular
-        during the Renaissance. The first line of Lorem Ipsum, "Lorem ipsum
-        dolor sit amet..", comes from a line in section 1.10.32.
-      </div>
-    </StackLayout>
+    <>
+      <StackLayout>
+        <div>
+          Lorem Ipsum is simply dummy text of the printing and typesetting
+          industry. Lorem Ipsum has been the industry's standard dummy text ever
+          since the 1500s, when an unknown printer took a galley of type and
+          scrambled it to make a type specimen book.
+        </div>
+        <div>
+          It has survived not only five centuries, but also the leap into
+          electronic typesetting, remaining essentially unchanged. It was
+          popularised in the 1960s with the release of Letraset sheets
+          containing Lorem Ipsum passages, and more recently with desktop
+          publishing software like Aldus PageMaker including versions of Lorem
+          Ipsum.
+        </div>
+        <div>
+          It is a long established fact that a reader will be distracted by the
+          readable content of a page when looking at its layout. The point of
+          using Lorem Ipsum is that it has a more-or-less normal distribution of
+          letters, as opposed to using 'Content here, content here', making it
+          look like readable English.
+        </div>
+        <div>
+          Many desktop publishing packages and web page editors now use Lorem
+          Ipsum as their default model text, and a search for 'lorem ipsum' will
+          uncover many web sites still in their infancy. Various versions have
+          evolved over the years, sometimes by accident, sometimes on purpose
+          (injected humour and the like).
+        </div>
+        <div>
+          Contrary to popular belief, Lorem Ipsum is not simply random text. It
+          has roots in a piece of classical Latin literature from 45 BC, making
+          it over 2000 years old. Richard McClintock, a Latin professor at
+          Hampden-Sydney College in Virginia, looked up one of the more obscure
+          Latin words, consectetur, from a Lorem Ipsum passage, and going
+          through the cites of the word in classical literature, discovered the
+          undoubtable source.
+        </div>
+        <div>
+          Lorem Ipsum comes from sections 1.10.32 and 1.10.33 of "de Finibus
+          Bonorum et Malorum" (The Extremes of Good and Evil) by Cicero, written
+          in 45 BC. This book is a treatise on the theory of ethics, very
+          popular during the Renaissance. The first line of Lorem Ipsum, "Lorem
+          ipsum dolor sit amet..", comes from a line in section 1.10.32.
+        </div>
+      </StackLayout>
+    </>
   ),
 };
 

diff --git a/packages/data-grid/stories/grid.mdx b/packages/data-grid/stories/grid.mdx
@@ -1,6 +1,5 @@
-import { ArgTypes, Canvas, Meta, Story } from "@storybook/addon-docs";
+import { ArgTypes, Canvas, Meta } from "@storybook/addon-docs";
 import { Grid, GridColumn } from "@salt-ds/data-grid";
-import { withFlexGap } from "docs/decorators/withFlexGap";
 import { Banner, BannerContent } from "@salt-ds/core";
 import { LazyStoryCanvas } from "./LazyStoryCanvas";
 import {

diff --git a/packages/icons/stories/icon.stories.tsx b/packages/icons/stories/icon.stories.tsx
@@ -126,7 +126,7 @@ export const AllIconsWithSearch: StoryFn<typeof Icon> = () => {
                 style={{ width: "150px" }}
                 gap={1}
                 align="center"
-                key={icon}
+                key={name}
               >
                 {createElement(icon, {
                   key: i,

diff --git a/packages/lab/stories/deck-layout/deck-layout.mdx b/packages/lab/stories/deck-layout/deck-layout.mdx
@@ -1,11 +1,6 @@
-import {
-  ArgTypes,
-  Canvas,
-  Meta
-} from "@storybook/blocks";
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks";
 import HelpAndSupport from "docs/blocks/help-and-support.mdx";
 import * as DeckLayoutStories from "./deck-layout.stories";
-import {DeckLayout } from "@salt-ds/lab";
 
 <Meta title="Documentation/Lab/Layout/Deck Layout" />
 

diff --git a/packages/lab/stories/layer-layout/layer-layout.mdx b/packages/lab/stories/layer-layout/layer-layout.mdx
@@ -1,13 +1,6 @@
-import {
-  ArgTypes,
-  Canvas,
-  Meta,
-} from "@storybook/blocks";
-import { LayerLayout } from "@salt-ds/lab";
-import * as LayerLayoutStories
-  from "./layer-layout.stories";
-import HelpAndSupport
-  from "docs/blocks/help-and-support.mdx";
+import { ArgTypes, Canvas, Meta } from "@storybook/blocks";
+import * as LayerLayoutStories from "./layer-layout.stories";
+import HelpAndSupport from "docs/blocks/help-and-support.mdx";
 
 <Meta title="Documentation/Lab/Layout/Layer Layout" />
 
@@ -71,4 +64,4 @@ import { LayerLayout } from "@salt-ds/lab";
 
 <ArgTypes of={LayerLayoutStories} />
 
-<HelpAndSupport/>
+<HelpAndSupport />
diff --git a/packages/lab/stories/layout/layouts.mdx b/packages/lab/stories/layout/layouts.mdx
@@ -1,9 +1,7 @@
 import { Meta, Canvas } from "@storybook/blocks";
-import * as ParentChildLayoutStories
-  from "../parent-child-layout/parent-child-layout.stories";
+import * as ParentChildLayoutStories from "../parent-child-layout/parent-child-layout.stories";
 import * as DeckLayoutStories from "../deck-layout/deck-layout.stories";
-import * as LayerLayoutStories
-  from "../layer-layout/layer-layout.stories";
+import * as LayerLayoutStories from "../layer-layout/layer-layout.stories";
 
 <Meta title="Documentation/Lab/Layout/Introduction" />
 

diff --git a/packages/lab/stories/skip-link/skip-link.mdx b/packages/lab/stories/skip-link/skip-link.mdx
@@ -1,9 +1,4 @@
-import {
-  Controls,
-  Canvas,
-  Meta,
-  ArgTypes
-} from "@storybook/blocks";
+import { Canvas, Meta, ArgTypes } from "@storybook/blocks";
 import { SkipLink } from "@salt-ds/lab";
 import {
   CharacteristicUsage,
@@ -66,7 +61,7 @@ Multiple links should be used sparingly. In order to avoid polluting the page-ta
 
 ## Props
 
-<ArgTypes  of={SkipLinkStories} />
+<ArgTypes of={SkipLinkStories} />
 
 ## CSS Classes
 

diff --git a/packages/lab/stories/stepper-input/stepper-input.mdx b/packages/lab/stories/stepper-input/stepper-input.mdx
@@ -1,9 +1,4 @@
-import {
-  Controls,
-  Canvas,
-  Meta,
-  ArgTypes
-} from "@storybook/blocks";
+import { Canvas, Meta, ArgTypes } from "@storybook/blocks";
 import { StepperInput } from "@salt-ds/lab";
 import {
   CharacteristicUsage,

diff --git a/packages/lab/stories/tokenized-input/tokenized-input.stories.tsx b/packages/lab/stories/tokenized-input/tokenized-input.stories.tsx
@@ -287,9 +287,8 @@ export const WithCustomizedDelimiter: StoryFn<typeof TokenizedInput> = () => {
             </div>
           ) : (
             <Input
-              inputProps={{ maxLength: 1 }}
+              inputProps={{ maxLength: 1, placeholder: "Enter a delimiter" }}
               onChange={handleInputChange}
-              placeholder="Enter a delimiter"
               style={{ maxWidth: 180 }}
             />
           )}

diff --git a/packages/theme/stories/palettes/opacity.mdx b/packages/theme/stories/palettes/opacity.mdx
@@ -8,36 +8,31 @@ import { OpacityBlock } from "docs/components/OpacityBlock";
 
 <DocGrid className="lighterGrid">
   <OpacityBlock opacity="--salt-opacity-0" cssVariable="--salt-palette-opacity-background-readonly" />
-
-{" "}
-<OpacityBlock
-  opacity="--salt-opacity-8"
-  cssVariable="--salt-palette-opacity-border-readonly"
-/>
-
-{" "}
-<OpacityBlock
-  opacity="--salt-opacity-40"
-  cssVariable="--salt-palette-opacity-primary-border"
-/>
-
-{" "}
-<OpacityBlock
-  opacity="--salt-opacity-25"
-  cssVariable="--salt-palette-opacity-secondary-border"
-/>
-
-{" "}
-<OpacityBlock
-  opacity="--salt-opacity-15"
-  cssVariable="--salt-palette-opacity-tertiary-border"
-/>
-
-{" "}
-<OpacityBlock
-  opacity="--salt-opacity-40"
-  cssVariable="--salt-palette-opacity-disabled"
-/>
+
+  <OpacityBlock
+    opacity="--salt-opacity-8"
+    cssVariable="--salt-palette-opacity-border-readonly"
+  />
+
+  <OpacityBlock
+    opacity="--salt-opacity-40"
+    cssVariable="--salt-palette-opacity-primary-border"
+  />
+
+  <OpacityBlock
+    opacity="--salt-opacity-25"
+    cssVariable="--salt-palette-opacity-secondary-border"
+  />
+
+  <OpacityBlock
+    opacity="--salt-opacity-15"
+    cssVariable="--salt-palette-opacity-tertiary-border"
+  />
+
+  <OpacityBlock
+    opacity="--salt-opacity-40"
+    cssVariable="--salt-palette-opacity-disabled"
+  />
 
   <OpacityBlock opacity="--salt-opacity-70" cssVariable="--salt-palette-opacity-backdrop" />
 </DocGrid>
@@ -53,20 +48,12 @@ import { OpacityBlock } from "docs/components/OpacityBlock";
   cssVariable="--salt-palette-opacity-stroke"
   replacementToken="--salt-palette-opacity-disabled"
 />
-
-{" "}
 <OpacityBlock
   opacity="--salt-opacity-40"
   cssVariable="--salt-palette-opacity-background"
   replacementToken="--salt-palette-opacity-disabled"
 />
-
-{" "}
-<OpacityBlock
-  opacity="--salt-opacity-40"
-  cssVariable="--salt-palette-opacity-border"
-  replacementToken="--salt-palette-opacity-disabled"
-/>
+<OpacityBlock opacity="--salt-opacity-40" cssVariable="--salt-palette-opacity-border" replacementToken="--salt-palette-opacity-disabled" />
 
   <OpacityBlock opacity="--salt-opacity-40" cssVariable="--salt-palette-opacity-foreground" replacementToken="--salt-palette-opacity-disabled" />
 </DocGrid>
diff --git a/site/package.json b/site/package.json
@@ -40,6 +40,7 @@
     "lodash-es": "^4.17.21",
     "next": "^14.0.4",
     "next-auth": "^4.24.7",
+    "node-fetch": "^3.0.0",
     "raw-loader": "^4.0.2"
   },
   "devDependencies": {