Merge pull request #4865 from penpot/ladybenko-8347-storybook-controls

Use Storybook controls for stories

frontend/.storybook/main.js

@@ -2,12 +2,7 @@
 const config = {
   stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
   staticDirs: ["../resources/public"],
-  addons: [
+  addons: ["@storybook/addon-essentials"],
-    "@storybook/addon-links",
-    "@storybook/addon-essentials",
-    "@storybook/addon-onboarding",
-    "@storybook/addon-interactions",
-  ],
   framework: {
     name: "@storybook/react-vite",
     options: {},

frontend/package.json

@@ -42,13 +42,9 @@
   "devDependencies": {
     "@playwright/test": "1.44.1",
     "@storybook/addon-essentials": "^7.6.17",
-    "@storybook/addon-interactions": "^7.6.17",
-    "@storybook/addon-links": "^7.6.17",
-    "@storybook/addon-onboarding": "^1.0.11",
     "@storybook/blocks": "^7.6.17",
     "@storybook/react": "^7.6.17",
     "@storybook/react-vite": "^7.6.17",
-    "@storybook/testing-library": "^0.2.2",
     "@types/node": "^20.11.20",
     "autoprefixer": "^10.4.19",
     "concurrently": "^8.2.2",

frontend/src/app/main/ui/ds.cljs

@@ -6,11 +6,11 @@
 
 (ns app.main.ui.ds
   (:require
-   [app.main.ui.ds.foundations.heading :refer [heading*]]
+   [app.main.ui.ds.foundations.assets.icon :refer [icon* icon-list]]
-   [app.main.ui.ds.foundations.icon :refer [icon* icon-list]]
+   [app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg* raw-svg-list]]
-   [app.main.ui.ds.foundations.raw-svg :refer [raw-svg* raw-svg-list]]
-   [app.main.ui.ds.foundations.text :refer [text*]]
    [app.main.ui.ds.foundations.typography :refer [typography-list]]
+   [app.main.ui.ds.foundations.typography.heading :refer [heading*]]
+   [app.main.ui.ds.foundations.typography.text :refer [text*]]
    [app.main.ui.ds.storybook :as sb]))
 
 (def default

frontend/src/app/main/ui/ds/foundations/assets/icon.clj

@@ -4,7 +4,7 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.ds.foundations.icon
+(ns app.main.ui.ds.foundations.assets.icon
   (:require
    [clojure.core :as c]
    [cuerdas.core :as str]

frontend/src/app/main/ui/ds/foundations/assets/icon.cljs

@@ -4,12 +4,12 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.ds.foundations.icon
+(ns app.main.ui.ds.foundations.assets.icon
   (:refer-clojure :exclude [mask])
   (:require-macros
    [app.common.data.macros :as dm]
    [app.main.style :as stl]
-   [app.main.ui.ds.foundations.icon :refer [collect-icons]])
+   [app.main.ui.ds.foundations.assets.icon :refer [collect-icons]])
   (:require
    [rumext.v2 :as mf]))
 
@@ -279,10 +279,10 @@
 
 (mf/defc icon*
   {::mf/props :obj}
-  [{:keys [icon size class] :rest props}]
+  [{:keys [id size class] :rest props}]
   (let [class (dm/str (or class "") " " (stl/css :icon))
         props (mf/spread-props props {:class class :width icon-size-m :height icon-size-m})
         size-px (cond (= size "s") icon-size-s :else icon-size-m)
         offset (/ (- icon-size-m size-px) 2)]
     [:> "svg" props
-     [:use {:href (dm/str "#icon-" icon) :width size-px :height size-px :x offset :y offset}]]))
+     [:use {:href (dm/str "#icon-" id) :width size-px :height size-px :x offset :y offset}]]))

frontend/src/app/main/ui/ds/foundations/assets/icon.mdx

@@ -41,13 +41,13 @@ Assuming the namespace is required as `i`:
 ```clj
 (ns app.main.ui.foo
   (:require
-   [app.main.ui.ds.foundations.icon :as i]))
+   [app.main.ui.ds.foundations.assets.icon :as i]))
 ```
 
 You can now use the icon IDs defined in the namespace:
 
 ```clj
-[:> i/icon* {:icon i/pin}]
+[:> i/icon* {:id i/pin}]
 ```
 
 ### Customizing colors
@@ -59,7 +59,7 @@ If you need to override this behavior, you can use a `class` in the `<Icon>`
 component and set `color` to whatever value you prefer:
 
 ```clj
-[:> i/icon* {:icon i/add :class (stl/css :toolbar-icon)}]
+[:> i/icon* {:id i/add :class (stl/css :toolbar-icon)}]
 ```
 
 ```scss
@@ -74,7 +74,7 @@ By default, icons do not have any accessible text attached to them. You should
 add an `aria-label` attribute to set a proper text:
 
 ```clj
-[:> i/icon* {:icon i/add :aria-label (tr "foo.bar")}]
+[:> i/icon* {:id i/add :aria-label (tr "foo.bar")}]
 ```
 
 ## Usage guidelines for design

frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx

@@ -6,21 +6,31 @@ const { StoryWrapper, StoryGrid, StoryGridCell, StoryHeader } =
   Components.storybook;
 const { icons } = Components.meta;
 
-export default {
-  title: "Foundations/Icons",
-  component: Components.Icon,
-};
-
 const iconList = Object.entries(icons)
   .map(([_, value]) => value)
   .sort();
 
-export const AllIcons = {
+export default {
-  render: () => (
+  title: "Foundations/Assets/Icon",
+  component: Components.Icon,
+  argTypes: {
+    id: {
+      options: iconList,
+      control: { type: "select" },
+    },
+    size: {
+      options: ["m", "s"],
+      control: { type: "radio" },
+    },
+  },
+};
+
+export const All = {
+  render: ({ size }) => (
     <StoryWrapper theme="default">
       <StoryHeader>
         <h1>All Icons</h1>
-        <p>Hover on an icon to see its ID</p>
+        <p>Hover on an icon to see its ID.</p>
       </StoryHeader>
       <StoryGrid>
         {iconList.map((iconId) => (
@@ -29,29 +39,43 @@ export const AllIcons = {
             key={iconId}
             style={{ color: "var(--color-accent-primary)" }}
           >
-            <Icon icon={iconId} />
+            <Icon id={iconId} size={size} />
           </StoryGridCell>
         ))}
       </StoryGrid>
     </StoryWrapper>
   ),
+  args: {
+    size: "m",
+  },
   parameters: {
+    controls: { exclude: ["id", "size"] },
     backgrounds: { disable: true },
   },
 };
 
 export const Default = {
-  render: () => (
+  render: ({ id, ...args }) => (
     <StoryWrapper theme="default">
-      <Icon icon={icons.Pin} />
+      <Icon id={id} {...args} />
     </StoryWrapper>
   ),
+  args: {
+    id: "pin",
+  },
+  parameters: {
+    controls: { exclude: ["size"] },
+  },
 };
 
-export const Small = {
+export const CustomSize = {
-  render: () => (
+  render: ({ id, size, ...args }) => (
     <StoryWrapper theme="default">
-      <Icon icon={icons.Pin} size="s" />
+      <Icon id={id} size={size} {...args} />
     </StoryWrapper>
   ),
+  args: {
+    id: "pin",
+    size: "m",
+  },
 };

frontend/src/app/main/ui/ds/foundations/assets/raw_svg.clj

@@ -4,7 +4,7 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.ds.foundations.raw-svg
+(ns app.main.ui.ds.foundations.assets.raw-svg
   (:require
    [clojure.core :as c]
    [cuerdas.core :as str]

frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs

@@ -4,11 +4,11 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.ds.foundations.raw-svg
+(ns app.main.ui.ds.foundations.assets.raw-svg
   (:refer-clojure :exclude [mask])
   (:require-macros
    [app.common.data.macros :as dm]
-   [app.main.ui.ds.foundations.raw-svg :refer [collect-raw-svgs]])
+   [app.main.ui.ds.foundations.assets.raw-svg :refer [collect-raw-svgs]])
   (:require
    [rumext.v2 :as mf]))
 
@@ -32,6 +32,6 @@
 
 (mf/defc raw-svg*
   {::mf/props :obj}
-  [{:keys [asset] :rest props}]
+  [{:keys [id] :rest props}]
   [:> "svg" props
-   [:use {:href (dm/str "#asset-" asset)}]])
+   [:use {:href (dm/str "#asset-" id)}]])

frontend/src/app/main/ui/ds/foundations/assets/raw_svg.mdx

@@ -20,7 +20,7 @@ For convenience, asset IDs are available in the component namespace.
 ```clj
 (ns app.main.ui.foo
   (:require
-   [app.main.ui.ds.foundations.raw-svg :as svg]))
+   [app.main.ui.ds.foundations.assets.raw-svg :as svg]))
 ```
 
 ```clj

frontend/src/app/main/ui/ds/foundations/assets/raw_svg.stories.jsx

@@ -6,41 +6,51 @@ const { StoryWrapper, StoryGrid, StoryGridCell, StoryHeader } =
   Components.storybook;
 const { svgs } = Components.meta;
 
-export default {
-  title: "Foundations/RawSvg",
-  component: Components.RawSvg,
-};
-
 const assetList = Object.entries(svgs)
   .map(([_, value]) => value)
   .sort();
 
-export const AllAssets = {
+export default {
-  render: () => (
+  title: "Foundations/Assets/RawSvg",
+  component: Components.RawSvg,
+  argTypes: {
+    id: {
+      options: assetList,
+      control: { type: "select" },
+    },
+  },
+};
+
+export const All = {
+  render: ({}) => (
     <StoryWrapper theme="light">
       <StoryHeader>
-        <h1>All assets</h1>
+        <h1>All SVG Assets</h1>
-        <p>Hover on a asset to see its id.</p>
+        <p>Hover on an asset to see its ID.</p>
       </StoryHeader>
 
       <StoryGrid size="200">
         {assetList.map((x) => (
           <StoryGridCell key={x} title={x}>
-            <RawSvg asset={x} style={{ maxWidth: "100%" }} />
+            <RawSvg id={x} style={{ maxWidth: "100%" }} />
           </StoryGridCell>
         ))}
       </StoryGrid>
     </StoryWrapper>
   ),
   parameters: {
+    controls: { exclude: ["id"] },
     backgrounds: { values: [{ name: "debug", value: "#ccc" }] },
   },
 };
 
 export const Default = {
-  render: () => (
+  render: ({ id, ...args }) => (
     <StoryWrapper theme="default">
-      <RawSvg asset={svgs.BrandGitlab} width="200" />
+      <RawSvg id={id} {...args} width="200" />
     </StoryWrapper>
   ),
+  args: {
+    id: "brand-gitlab",
+  },
 };

frontend/src/app/main/ui/ds/foundations/heading.stories.jsx

@@ -1,54 +0,0 @@
-import * as React from "react";
-import Components from "@target/components";
-
-const { Heading } = Components;
-const { StoryWrapper, StoryGridRow } = Components.storybook;
-
-export default {
-  title: "Foundations/Heading",
-  component: Components.Heading,
-};
-
-export const Levels = {
-  render: () => (
-    <StoryWrapper theme="default">
-      <StoryGridRow title={"1 / display"}>
-        <Heading level="1" typography="display">
-          h1 / display
-        </Heading>
-      </StoryGridRow>
-      <StoryGridRow title={"2 / display"}>
-        <Heading level="2" typography="display">
-          h2 / display
-        </Heading>
-      </StoryGridRow>
-      <StoryGridRow title={"3 / display"}>
-        <Heading level="3" typography="display">
-          h3 / display
-        </Heading>
-      </StoryGridRow>
-    </StoryWrapper>
-  ),
-};
-
-export const HeadingTypography = {
-  render: () => (
-    <StoryWrapper theme="default">
-      <StoryGridRow title={"1 / title-large"}>
-        <Heading level="1" typography="title-large">
-          h1 / title-large
-        </Heading>
-      </StoryGridRow>
-      <StoryGridRow title={"1 / title-medium"}>
-        <Heading level="1" typography="title-medium">
-          h1 / title-medium
-        </Heading>
-      </StoryGridRow>
-      <StoryGridRow title={"1 / code-font"}>
-        <Heading level="1" typography="code-font">
-          h1 / code-font
-        </Heading>
-      </StoryGridRow>
-    </StoryWrapper>
-  ),
-};

frontend/src/app/main/ui/ds/foundations/text.mdx

@@ -1,48 +0,0 @@
-import { Canvas, Meta } from "@storybook/blocks";
-import * as TextStories from "./text.stories";
-
-<Meta of={TextStories} />
-
-# Texts
-This component will add a text element to our code that will match the tag prop.
-
-## Technical notes
-
-This components accepts to props:
-
-- `tag` (default value: `p`) : Give a proper tag name (i.e. `p`, `span`, etc.). 
-- `typography` (mandatory): Any of the [supported typography IDs](?path=/docs/foundations-typography--docs).
-
-You can check passed props to renderized components on hover `tag / typography`
-
-
-### Using typography IDs
-
-There are typography ID definitions you can use in your code rather than typing the
-typography ID by hand.
-
-**Using these IDs is recommended**.
-
-Assuming the namespace of the typography is required as `t`:
-
-```clj
-(ns app.main.ui.foo
-  (:require
-   [app.main.ui.ds.foundations.text :refer [text*]]
-   [app.main.ui.ds.foundations.typography :as t]))
-```
-
-You can now use the typography IDs defined in the namespace:
-
-```clj
-[:> text* {:typography t/title-large :tag "p"} "Welcome to Penpot"]
-```
-
-## Accesibility
-
-There should only be one level 1 heading `<h1>` per page.
-
-Headings are used to navigate the page and must follow the `<h1>` -> `<h2>` -> `<h3>` -> `<h4>` -> `<h5>` ->  `<h6>` hierarchy.
-For example, do not skip levels in the `<h1>` -> `<h3>` hierarchy if there is no `<h2>` in between.
-
-We should not choose the heading level by its visual aspect.

frontend/src/app/main/ui/ds/foundations/text.stories.jsx

@@ -1,54 +0,0 @@
-import * as React from "react";
-import Components from "@target/components";
-
-const { Text } = Components;
-const { StoryWrapper, StoryGridRow } = Components.storybook;
-
-export default {
-  title: "Foundations/Text",
-  component: Components.Text,
-};
-
-export const TextTags = {
-  render: () => (
-    <StoryWrapper theme="default">
-      <StoryGridRow title={"p / title-large"}>
-        <Text tag="p" typography="title-large">
-          p / Title
-        </Text>
-      </StoryGridRow>
-      <StoryGridRow title={"span / title-large"}>
-        <Text tag="span" typography="title-large">
-          span / Title large
-        </Text>
-      </StoryGridRow>
-      <StoryGridRow title={"div / title-large"}>
-        <Text tag="div" typography="title-large">
-          div / Title large
-        </Text>
-      </StoryGridRow>
-    </StoryWrapper>
-  ),
-};
-
-export const TypographyParagraph = {
-  render: () => (
-    <StoryWrapper theme="default">
-      <StoryGridRow title={"p / title-large"}>
-        <Text tag="p" typography="title-large">
-          p / Title large
-        </Text>
-      </StoryGridRow>
-      <StoryGridRow title={"p / title-medium"}>
-        <Text tag="p" typography="title-medium">
-          p / Title medium
-        </Text>
-      </StoryGridRow>
-      <StoryGridRow title={"p / code-font"}>
-        <Text tag="p" typography="code-font">
-          p / Code font
-        </Text>
-      </StoryGridRow>
-    </StoryWrapper>
-  ),
-};

frontend/src/app/main/ui/ds/foundations/typography.cljs

@@ -18,7 +18,6 @@
 (def ^:typography-id body-small "body-small")
 (def ^:typography-id code-font "code-font")
 
-
 (def typography-list #{display
                        title-large
                        title-medium

frontend/src/app/main/ui/ds/foundations/typography.stories.jsx

@@ -1,135 +0,0 @@
-import * as React from "react";
-import Components from "@target/components";
-
-const { Heading } = Components;
-const { StoryWrapper, StoryHeader, StoryGridRow } = Components.storybook;
-
-const typographyList = {
-  display: {
-    name: "Display",
-    id: "display",
-    size: "36px",
-    weight: "400",
-    line: "1.4",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  titleLarge: {
-    name: "Title large",
-    id: "title-large",
-    size: "24px",
-    weight: "400",
-    line: "1.4",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  titleMedium: {
-    name: "Title medium",
-    id: "title-medium",
-    size: "20px",
-    weight: "400",
-    line: "1.4",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  titleSmall: {
-    name: "Title small",
-    id: "title-small",
-    size: "14px",
-    weight: "400",
-    line: "1.2",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  headlineLarge: {
-    name: "Headline large",
-    id: "headline-large",
-    size: "18px",
-    weight: "400",
-    line: "1.4",
-    uppercase: true,
-    font: "Work Sans",
-  },
-  headlineMedium: {
-    name: "Headline medium",
-    id: "headline-medium",
-    size: "16px",
-    weight: "400",
-    line: "1.4",
-    uppercase: true,
-    font: "Work Sans",
-  },
-  headlineSmall: {
-    name: "Headline small",
-    id: "headline-small",
-    size: "12px",
-    weight: "500",
-    line: "1.2",
-    uppercase: true,
-    font: "Work Sans",
-  },
-  bodyLarge: {
-    name: "Body large",
-    id: "body-large",
-    size: "16px",
-    weight: "400",
-    line: "1.4",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  bodyMedium: {
-    name: "Body medium",
-    id: "body-medium",
-    size: "14px",
-    weight: "400",
-    line: "1.3",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  bodySmall: {
-    name: "Body small",
-    id: "body-small",
-    size: "12px",
-    weight: "400",
-    line: "1.3",
-    uppercase: false,
-    font: "Work Sans",
-  },
-  codeFont: {
-    name: "Code font",
-    id: "code-font",
-    size: "12px",
-    weight: "400",
-    line: "1.2",
-    uppercase: false,
-    font: "Roboto Mono",
-  },
-};
-
-export default {
-  title: "Foundations/Typography",
-  component: Components.StoryHeader,
-};
-
-export const AllTypography = {
-  render: () => (
-    <StoryWrapper theme="default">
-      <StoryHeader>
-        <h1>All Typography</h1>
-        <p>Hover on a heading to see its ID</p>
-      </StoryHeader>
-      {Object.values(typographyList).map(
-        ({ id, name, size, weight, line, font }) => (
-          <StoryGridRow title={id} key={id}>
-            <Heading level="1" typography={id}>
-              {name} - {weight} - {size}/{line} {font}
-            </Heading>
-          </StoryGridRow>
-        ),
-      )}
-    </StoryWrapper>
-  ),
-  parameters: {
-    backgrounds: { disable: true },
-  },
-};

frontend/src/app/main/ui/ds/foundations/typography/heading.cljs

@@ -4,7 +4,7 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.ds.foundations.heading
+(ns app.main.ui.ds.foundations.typography.heading
   (:require-macros
    [app.common.data.macros :as dm]
    [app.main.style :as stl])
@@ -25,7 +25,6 @@
   (assert (or (valid-level? level)
               (nil? level))
           (dm/str "Invalid level: " level ". Valid numbers are 1 to 6."))
-
   (assert (valid-typography? (dm/str typography))
           (dm/str typography " is an unknown typography"))
 

frontend/src/app/main/ui/ds/foundations/typography/heading.mdx

@@ -28,8 +28,8 @@ Assuming the namespace of the typography is required as `t`:
 ```clj
 (ns app.main.ui.foo
   (:require
-   [app.main.ui.ds.foundations.heading :refer [heading*]]
+   [app.main.ui.ds.foundations.typography :as t]
-   [app.main.ui.ds.foundations.typography :as t]))
+   [app.main.ui.ds.foundations.typography.heading :refer [heading*]]))
 ```
 
 You can now use the typography IDs defined in the namespace:

frontend/src/app/main/ui/ds/foundations/typography/heading.scss

@@ -3,7 +3,7 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
 // Copyright (c) KALEIDOS INC
-@use "../typography.scss" as t;
+@use "../../typography.scss" as t;
 
 .display-typography {
   @include t.use-typography("display");

frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx

@@ -0,0 +1,38 @@
+import * as React from "react";
+import Components from "@target/components";
+
+const { Heading } = Components;
+const { StoryWrapper } = Components.storybook;
+const { typography } = Components.meta;
+
+const typographyIds = typography.sort();
+
+export default {
+  title: "Foundations/Typography/Heading",
+  component: Components.Heading,
+  argTypes: {
+    level: {
+      options: [1, 2, 3, 4, 5, 6],
+      control: { type: "select" },
+    },
+    typography: {
+      options: typographyIds,
+      control: { type: "select" },
+    },
+  },
+};
+
+export const AnyHeading = {
+  name: "Heading",
+  render: ({ level, typography, ...args }) => (
+    <StoryWrapper theme="default">
+      <Heading level={level} typography={typography} {...args}>
+        Lorem ipsum
+      </Heading>
+    </StoryWrapper>
+  ),
+  args: {
+    level: 1,
+    typography: "display",
+  },
+};

frontend/src/app/main/ui/ds/foundations/typography/text.cljs

@@ -4,7 +4,7 @@
 ;;
 ;; Copyright (c) KALEIDOS INC
 
-(ns app.main.ui.ds.foundations.text
+(ns app.main.ui.ds.foundations.typography.text
   (:require-macros
    [app.common.data.macros :as dm]
    [app.main.style :as stl])
@@ -17,12 +17,12 @@
 
 (mf/defc text*
   {::mf/props :obj}
-  [{:keys [tag typography children class] :rest props}]
+  [{:keys [as typography children class] :rest props}]
 
   (assert (valid-typography? (dm/str typography))
           (dm/str typography " is an unknown typography"))
 
-  (let [tag (or tag "p")
+  (let [as (if (or (empty? as) (nil? as)) "p" as)
         class (dm/str (or class "") " " (stl/css-case :display-typography (= typography t/display)
                                                       :title-large-typography (= typography t/title-large)
                                                       :title-medium-typography (= typography t/title-medium)
@@ -35,5 +35,5 @@
                                                       :body-small-typography (= typography t/body-small)
                                                       :code-font-typography (= typography t/code-font)))
         props (mf/spread-props props {:class class})]
-    [:> tag props
+    [:> as props
      children]))

frontend/src/app/main/ui/ds/foundations/typography/text.mdx

@@ -0,0 +1,31 @@
+import { Canvas, Meta } from "@storybook/blocks";
+import * as TextStories from "./text.stories";
+
+<Meta of={TextStories} />
+
+# Texts
+This component will add a text element to our code that will match the tag prop.
+
+## Technical notes
+
+### Using typography IDs
+
+There are typography ID definitions you can use in your code rather than typing the
+typography ID by hand.
+
+**Using these IDs is recommended**.
+
+Assuming the namespace of the typography is required as `t`:
+
+```clj
+(ns app.main.ui.foo
+  (:require
+   [app.main.ui.ds.foundations.typography :as t]
+   [app.main.ui.ds.foundations.typography.text :refer [text*]]))
+```
+
+You can now use the typography IDs defined in the namespace:
+
+```clj
+[:> text* {:typography t/title-large :as "p"} "Welcome to Penpot"]
+```

frontend/src/app/main/ui/ds/foundations/typography/text.scss

@@ -3,7 +3,7 @@
 // file, You can obtain one at http://mozilla.org/MPL/2.0/.
 //
 // Copyright (c) KALEIDOS INC
-@use "../typography.scss" as t;
+@use "../../typography.scss" as t;
 
 .display-typography {
   @include t.use-typography("display");

frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import Components from "@target/components";
+
+const { Text } = Components;
+const { StoryWrapper } = Components.storybook;
+const { typography } = Components.meta;
+
+const typographyIds = typography.sort();
+
+export default {
+  title: "Foundations/Typography/Text",
+  component: Text,
+  argTypes: {
+    typography: {
+      options: typographyIds,
+      control: { type: "select" },
+    },
+  },
+};
+
+export const Default = {
+  render: ({ typography, ...args }) => (
+    <StoryWrapper theme="default">
+      <Text typography={typography} {...args}>
+        Lorem ipsum
+      </Text>
+    </StoryWrapper>
+  ),
+  args: {
+    typography: "display",
+  },
+};
+
+export const CustomTag = {
+  render: ({ typography, ...args }) => (
+    <StoryWrapper theme="default">
+      <Text typography={typography} {...args}>
+        Lorem ipsum
+      </Text>
+    </StoryWrapper>
+  ),
+  args: {
+    typography: "display",
+    as: "li",
+  },
+};

frontend/src/app/main/ui/ds/foundations/typography/typography.mdx

@@ -1,8 +1,7 @@
-import { Canvas, Meta, Story } from "@storybook/blocks";
+import { Canvas, Meta } from "@storybook/blocks";
-import * as TypographyStories from "./typography.stories";
 import Components from "@target/components";
 
-<Meta of={TypographyStories} />
+<Meta title="Foundations/Typography" />
 
 # Typography
 
@@ -55,7 +54,7 @@ for exceptions based on the size of the components.
 Hero style text for transitional pages (Login). If too large use large title in narrow windows.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="display" >Display - 400 - 36px/1.4 "Work Sans" </Components.Heading>
+  <Components.Text typography="display" >Display - 400 - 36px/1.4 "Work Sans" </Components.Text>
 </Canvas>
 
 ### Title large `title-large`
@@ -64,7 +63,7 @@ Page headers for main pages (dashboard, Profiles...). If too big use title
 (medium) in narrow windows.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="title-large" >Title large - 400 - 24px/1.4 "Work Sans" </Components.Heading>
+  <Components.Text typography="title-large" >Title large - 400 - 24px/1.4 "Work Sans" </Components.Text>
 </Canvas>
 
 ### Title medium `title-medium`
@@ -73,7 +72,7 @@ Default page title. Equivalent line height of 32px matches the height
 of buttons and other medium controls. Ideal for page header layout.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="title-medium" >Title medium - 400 - 20px/1.4 "Work Sans"</Components.Heading>
+  <Components.Text typography="title-medium" >Title medium - 400 - 20px/1.4 "Work Sans"</Components.Text>
 </Canvas>
 
 ### Title small `title-small`
@@ -81,7 +80,7 @@ of buttons and other medium controls. Ideal for page header layout.
 Uses the same size as body (large).
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="title-small" >Title small - 400 - 14px/1.2 "Work Sans"</Components.Heading>
+  <Components.Text typography="title-small" >Title small - 400 - 14px/1.2 "Work Sans"</Components.Text>
 </Canvas>
 
 ## Headline
@@ -92,20 +91,20 @@ page titles (automated action titles, for example). Same line height as title (m
 ### Headline large `headline-large`
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="headline-large" >Headline large - 400 - 18px/1.4 "Work Sans"</Components.Heading>
+  <Components.Text typography="headline-large" >Headline large - 400 - 18px/1.4 "Work Sans"</Components.Text>
 </Canvas>
 
 ### Headline medium `headline-medium`
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="headline-medium" >Headline medium - 400 - 16px/1.4 "Work Sans"</Components.Heading>
+  <Components.Text typography="headline-medium" >Headline medium - 400 - 16px/1.4 "Work Sans"</Components.Text>
 </Canvas>
 
 
 ### Headline small `headline-small`
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="headline-small" >Headline small - 500 - 12px/1.2 "Work Sans"</Components.Heading>
+  <Components.Text typography="headline-small" >Headline small - 500 - 12px/1.2 "Work Sans"</Components.Text>
 </Canvas>
 
 ## Body
@@ -115,7 +114,7 @@ page titles (automated action titles, for example). Same line height as title (m
 Generic content.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="body-large" >Body large - 400 - 16px/1.4 "Work Sans"</Components.Heading>
+  <Components.Text typography="body-large" >Body large - 400 - 16px/1.4 "Work Sans"</Components.Text>
 </Canvas>
 
 ### Body medium `body-medium`
@@ -123,7 +122,7 @@ Generic content.
 Default UI font. Most commonly used for body text.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="body-medium" >Body medium - 400 - 14px/1.3 "Work Sans"</Components.Heading>
+  <Components.Text typography="body-medium" >Body medium - 400 - 14px/1.3 "Work Sans"</Components.Text>
 </Canvas>
 
 
@@ -133,7 +132,7 @@ Small compact font with a line height of less than 16px.
 Use for single line scenarios, as the small size does not meet accessibility requirements.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="body-small" >Body small - 400 - 12px/1.3 "Work Sans"</Components.Heading>
+  <Components.Text typography="body-small" >Body small - 400 - 12px/1.3 "Work Sans"</Components.Text>
 </Canvas>
 
 ## Code font `code-font`
@@ -141,7 +140,7 @@ Use for single line scenarios, as the small size does not meet accessibility req
 Default style for rendering code blocks.
 
 <Canvas style={{background: "var(--color-background-primary)", color: "var(--color-foreground-primary)"}}>
-  <Components.Heading level="1" typography="code-font" >Code font - 400 - 12px/1.2 "Roboto Mono"</Components.Heading>
+  <Components.Text typography="code-font" >Code font - 400 - 12px/1.2 "Roboto Mono"</Components.Text>
 </Canvas>
 
 ## Fonts

frontend/yarn.lock

@@ -26,7 +26,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.10.4, @babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.24.2":
+"@babel/code-frame@npm:^7.0.0, @babel/code-frame@npm:^7.23.5, @babel/code-frame@npm:^7.24.2":
   version: 7.24.2
   resolution: "@babel/code-frame@npm:7.24.2"
   dependencies:
@@ -1428,7 +1428,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/runtime@npm:^7.12.5, @babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7":
+"@babel/runtime@npm:^7.13.10, @babel/runtime@npm:^7.17.8, @babel/runtime@npm:^7.21.0, @babel/runtime@npm:^7.7.2, @babel/runtime@npm:^7.8.4, @babel/runtime@npm:^7.8.7":
   version: 7.24.5
   resolution: "@babel/runtime@npm:7.24.5"
   dependencies:
@@ -1981,19 +1981,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@jest/types@npm:^27.5.1":
-  version: 27.5.1
-  resolution: "@jest/types@npm:27.5.1"
-  dependencies:
-    "@types/istanbul-lib-coverage": "npm:^2.0.0"
-    "@types/istanbul-reports": "npm:^3.0.0"
-    "@types/node": "npm:*"
-    "@types/yargs": "npm:^16.0.0"
-    chalk: "npm:^4.0.0"
-  checksum: 10c0/4598b302398db0eb77168b75a6c58148ea02cc9b9f21c5d1bbe985c1c9257110a5653cf7b901c3cab87fba231e3fed83633687f1c0903b4bc6939ab2a8452504
-  languageName: node
-  linkType: hard
-
 "@jest/types@npm:^29.6.3":
   version: 29.6.3
   resolution: "@jest/types@npm:29.6.3"
@@ -3104,35 +3091,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-interactions@npm:^7.6.17":
-  version: 7.6.19
-  resolution: "@storybook/addon-interactions@npm:7.6.19"
-  dependencies:
-    "@storybook/global": "npm:^5.0.0"
-    "@storybook/types": "npm:7.6.19"
-    jest-mock: "npm:^27.0.6"
-    polished: "npm:^4.2.2"
-    ts-dedent: "npm:^2.2.0"
-  checksum: 10c0/430d62298930b5e78398024de99f8f5d19ef22d7eda51015fa88e8ed3fafd2e003b0c8694a97192848ebf3e013ba363d96bf753ef1ff844e8129a9c47d41894c
-  languageName: node
-  linkType: hard
-
-"@storybook/addon-links@npm:^7.6.17":
-  version: 7.6.19
-  resolution: "@storybook/addon-links@npm:7.6.19"
-  dependencies:
-    "@storybook/csf": "npm:^0.1.2"
-    "@storybook/global": "npm:^5.0.0"
-    ts-dedent: "npm:^2.0.0"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-  peerDependenciesMeta:
-    react:
-      optional: true
-  checksum: 10c0/c7f40095e8f00ed1dc9a6118b074d513e3a7dd77334e044d152b42ea5922a0fd26397bbcd45abaa2968a3b27a27b810af0e8039ab07ecee7043582fa2a14ca67
-  languageName: node
-  linkType: hard
-
 "@storybook/addon-measure@npm:7.6.19":
   version: 7.6.19
   resolution: "@storybook/addon-measure@npm:7.6.19"
@@ -3143,19 +3101,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/addon-onboarding@npm:^1.0.11":
-  version: 1.0.11
-  resolution: "@storybook/addon-onboarding@npm:1.0.11"
-  dependencies:
-    "@storybook/telemetry": "npm:^7.1.0"
-    react-confetti: "npm:^6.1.0"
-  peerDependencies:
-    react: ^16.8.0 || ^17.0.0 || ^18.0.0
-    react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
-  checksum: 10c0/ca3de3eb85fb6d04309dbc07c26956777c064bb5032fb99aca3e43361b0816ac4326183aac99204d795fdc2010aa69c4978353c70a42926e9da0819343fcd2a0
-  languageName: node
-  linkType: hard
-
 "@storybook/addon-outline@npm:7.6.19":
   version: 7.6.19
   resolution: "@storybook/addon-outline@npm:7.6.19"
@@ -3712,7 +3657,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/telemetry@npm:7.6.19, @storybook/telemetry@npm:^7.1.0":
+"@storybook/telemetry@npm:7.6.19":
   version: 7.6.19
   resolution: "@storybook/telemetry@npm:7.6.19"
   dependencies:
@@ -3728,17 +3673,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@storybook/testing-library@npm:^0.2.2":
-  version: 0.2.2
-  resolution: "@storybook/testing-library@npm:0.2.2"
-  dependencies:
-    "@testing-library/dom": "npm:^9.0.0"
-    "@testing-library/user-event": "npm:^14.4.0"
-    ts-dedent: "npm:^2.2.0"
-  checksum: 10c0/3179c74148c92267ea449068ce9fb00bf960dbf06654354de7869428415d16dc730a0d58b5adca7619d21e5a058ae0bf713e34c09be8bca574388ec0106c5068
-  languageName: node
-  linkType: hard
-
 "@storybook/theming@npm:7.6.19":
   version: 7.6.19
   resolution: "@storybook/theming@npm:7.6.19"
@@ -3766,31 +3700,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@testing-library/dom@npm:^9.0.0":
-  version: 9.3.4
-  resolution: "@testing-library/dom@npm:9.3.4"
-  dependencies:
-    "@babel/code-frame": "npm:^7.10.4"
-    "@babel/runtime": "npm:^7.12.5"
-    "@types/aria-query": "npm:^5.0.1"
-    aria-query: "npm:5.1.3"
-    chalk: "npm:^4.1.0"
-    dom-accessibility-api: "npm:^0.5.9"
-    lz-string: "npm:^1.5.0"
-    pretty-format: "npm:^27.0.2"
-  checksum: 10c0/147da340e8199d7f98f3a4ad8aa22ed55b914b83957efa5eb22bfea021a979ebe5a5182afa9c1e5b7a5f99a7f6744a5a4d9325ae46ec3b33b5a15aed8750d794
-  languageName: node
-  linkType: hard
-
-"@testing-library/user-event@npm:^14.4.0":
-  version: 14.5.2
-  resolution: "@testing-library/user-event@npm:14.5.2"
-  peerDependencies:
-    "@testing-library/dom": ">=7.21.4"
-  checksum: 10c0/68a0c2aa28a3c8e6eb05cafee29705438d7d8a9427423ce5064d44f19c29e89b5636de46dd2f28620fb10abba75c67130185bbc3aa23ac1163a227a5f36641e1
-  languageName: node
-  linkType: hard
-
 "@trysound/sax@npm:0.2.0":
   version: 0.2.0
   resolution: "@trysound/sax@npm:0.2.0"
@@ -3798,13 +3707,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/aria-query@npm:^5.0.1":
-  version: 5.0.4
-  resolution: "@types/aria-query@npm:5.0.4"
-  checksum: 10c0/dc667bc6a3acc7bba2bccf8c23d56cb1f2f4defaa704cfef595437107efaa972d3b3db9ec1d66bc2711bfc35086821edd32c302bffab36f2e79b97f312069f08
-  languageName: node
-  linkType: hard
-
 "@types/babel__core@npm:^7.0.0, @types/babel__core@npm:^7.18.0, @types/babel__core@npm:^7.20.5":
   version: 7.20.5
   resolution: "@types/babel__core@npm:7.20.5"
@@ -4183,15 +4085,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@types/yargs@npm:^16.0.0":
-  version: 16.0.9
-  resolution: "@types/yargs@npm:16.0.9"
-  dependencies:
-    "@types/yargs-parser": "npm:*"
-  checksum: 10c0/be24bd9a56c97ddb2964c1c18f5b9fe8271a50e100dc6945989901aae58f7ce6fb8f3a591c749a518401b6301358dbd1997e83c36138a297094feae7f9ac8211
-  languageName: node
-  linkType: hard
-
 "@types/yargs@npm:^17.0.8":
   version: 17.0.32
   resolution: "@types/yargs@npm:17.0.32"
@@ -4570,15 +4463,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"aria-query@npm:5.1.3":
-  version: 5.1.3
-  resolution: "aria-query@npm:5.1.3"
-  dependencies:
-    deep-equal: "npm:^2.0.5"
-  checksum: 10c0/edcbc8044c4663d6f88f785e983e6784f98cb62b4ba1e9dd8d61b725d0203e4cfca38d676aee984c31f354103461102a3d583aa4fbe4fd0a89b679744f4e5faf
-  languageName: node
-  linkType: hard
-
 "arr-diff@npm:^4.0.0":
   version: 4.0.0
   resolution: "arr-diff@npm:4.0.0"
@@ -4618,7 +4502,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-buffer-byte-length@npm:^1.0.0, array-buffer-byte-length@npm:^1.0.1":
+"array-buffer-byte-length@npm:^1.0.1":
   version: 1.0.1
   resolution: "array-buffer-byte-length@npm:1.0.1"
   dependencies:
@@ -6325,32 +6209,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"deep-equal@npm:^2.0.5":
-  version: 2.2.3
-  resolution: "deep-equal@npm:2.2.3"
-  dependencies:
-    array-buffer-byte-length: "npm:^1.0.0"
-    call-bind: "npm:^1.0.5"
-    es-get-iterator: "npm:^1.1.3"
-    get-intrinsic: "npm:^1.2.2"
-    is-arguments: "npm:^1.1.1"
-    is-array-buffer: "npm:^3.0.2"
-    is-date-object: "npm:^1.0.5"
-    is-regex: "npm:^1.1.4"
-    is-shared-array-buffer: "npm:^1.0.2"
-    isarray: "npm:^2.0.5"
-    object-is: "npm:^1.1.5"
-    object-keys: "npm:^1.1.1"
-    object.assign: "npm:^4.1.4"
-    regexp.prototype.flags: "npm:^1.5.1"
-    side-channel: "npm:^1.0.4"
-    which-boxed-primitive: "npm:^1.0.2"
-    which-collection: "npm:^1.0.1"
-    which-typed-array: "npm:^1.1.13"
-  checksum: 10c0/a48244f90fa989f63ff5ef0cc6de1e4916b48ea0220a9c89a378561960814794a5800c600254482a2c8fd2e49d6c2e196131dc983976adb024c94a42dfe4949f
-  languageName: node
-  linkType: hard
-
 "default-browser-id@npm:3.0.0":
   version: 3.0.0
   resolution: "default-browser-id@npm:3.0.0"
@@ -6597,13 +6455,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"dom-accessibility-api@npm:^0.5.9":
-  version: 0.5.16
-  resolution: "dom-accessibility-api@npm:0.5.16"
-  checksum: 10c0/b2c2eda4fae568977cdac27a9f0c001edf4f95a6a6191dfa611e3721db2478d1badc01db5bb4fa8a848aeee13e442a6c2a4386d65ec65a1436f24715a2f8d053
-  languageName: node
-  linkType: hard
-
 "dom-helpers@npm:^5.1.3":
   version: 5.2.1
   resolution: "dom-helpers@npm:5.2.1"
@@ -6932,23 +6783,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"es-get-iterator@npm:^1.1.3":
-  version: 1.1.3
-  resolution: "es-get-iterator@npm:1.1.3"
-  dependencies:
-    call-bind: "npm:^1.0.2"
-    get-intrinsic: "npm:^1.1.3"
-    has-symbols: "npm:^1.0.3"
-    is-arguments: "npm:^1.1.1"
-    is-map: "npm:^2.0.2"
-    is-set: "npm:^2.0.2"
-    is-string: "npm:^1.0.7"
-    isarray: "npm:^2.0.5"
-    stop-iteration-iterator: "npm:^1.0.0"
-  checksum: 10c0/ebd11effa79851ea75d7f079405f9d0dc185559fd65d986c6afea59a0ff2d46c2ed8675f19f03dce7429d7f6c14ff9aede8d121fbab78d75cfda6a263030bac0
-  languageName: node
-  linkType: hard
-
 "es-module-lexer@npm:^0.9.3":
   version: 0.9.3
   resolution: "es-module-lexer@npm:0.9.3"
@@ -7907,13 +7741,9 @@ __metadata:
   dependencies:
     "@playwright/test": "npm:1.44.1"
     "@storybook/addon-essentials": "npm:^7.6.17"
-    "@storybook/addon-interactions": "npm:^7.6.17"
-    "@storybook/addon-links": "npm:^7.6.17"
-    "@storybook/addon-onboarding": "npm:^1.0.11"
     "@storybook/blocks": "npm:^7.6.17"
     "@storybook/react": "npm:^7.6.17"
     "@storybook/react-vite": "npm:^7.6.17"
-    "@storybook/testing-library": "npm:^0.2.2"
     "@types/node": "npm:^20.11.20"
     autoprefixer: "npm:^10.4.19"
     compression: "npm:^1.7.4"
@@ -8164,7 +7994,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.2, get-intrinsic@npm:^1.2.3, get-intrinsic@npm:^1.2.4":
+"get-intrinsic@npm:^1.1.3, get-intrinsic@npm:^1.2.1, get-intrinsic@npm:^1.2.3, get-intrinsic@npm:^1.2.4":
   version: 1.2.4
   resolution: "get-intrinsic@npm:1.2.4"
   dependencies:
@@ -9014,7 +8844,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"internal-slot@npm:^1.0.4, internal-slot@npm:^1.0.7":
+"internal-slot@npm:^1.0.7":
   version: 1.0.7
   resolution: "internal-slot@npm:1.0.7"
   dependencies:
@@ -9098,7 +8928,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-arguments@npm:^1.0.4, is-arguments@npm:^1.1.1":
+"is-arguments@npm:^1.0.4":
   version: 1.1.1
   resolution: "is-arguments@npm:1.1.1"
   dependencies:
@@ -9108,7 +8938,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-array-buffer@npm:^3.0.2, is-array-buffer@npm:^3.0.4":
+"is-array-buffer@npm:^3.0.4":
   version: 3.0.4
   resolution: "is-array-buffer@npm:3.0.4"
   dependencies:
@@ -9210,7 +9040,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-date-object@npm:^1.0.1, is-date-object@npm:^1.0.5":
+"is-date-object@npm:^1.0.1":
   version: 1.0.5
   resolution: "is-date-object@npm:1.0.5"
   dependencies:
@@ -9342,13 +9172,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-map@npm:^2.0.2, is-map@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "is-map@npm:2.0.3"
-  checksum: 10c0/2c4d431b74e00fdda7162cd8e4b763d6f6f217edf97d4f8538b94b8702b150610e2c64961340015fe8df5b1fcee33ccd2e9b62619c4a8a3a155f8de6d6d355fc
-  languageName: node
-  linkType: hard
-
 "is-nan@npm:^1.3.2":
   version: 1.3.2
   resolution: "is-nan@npm:1.3.2"
@@ -9468,13 +9291,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-set@npm:^2.0.2, is-set@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "is-set@npm:2.0.3"
-  checksum: 10c0/f73732e13f099b2dc879c2a12341cfc22ccaca8dd504e6edae26484bd5707a35d503fba5b4daad530a9b088ced1ae6c9d8200fd92e09b428fe14ea79ce8080b7
-  languageName: node
-  linkType: hard
-
 "is-shared-array-buffer@npm:^1.0.2, is-shared-array-buffer@npm:^1.0.3":
   version: 1.0.3
   resolution: "is-shared-array-buffer@npm:1.0.3"
@@ -9555,13 +9371,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-weakmap@npm:^2.0.2":
-  version: 2.0.2
-  resolution: "is-weakmap@npm:2.0.2"
-  checksum: 10c0/443c35bb86d5e6cc5929cd9c75a4024bb0fff9586ed50b092f94e700b89c43a33b186b76dbc6d54f3d3d09ece689ab38dcdc1af6a482cbe79c0f2da0a17f1299
-  languageName: node
-  linkType: hard
-
 "is-weakref@npm:^1.0.2":
   version: 1.0.2
   resolution: "is-weakref@npm:1.0.2"
@@ -9571,16 +9380,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"is-weakset@npm:^2.0.3":
-  version: 2.0.3
-  resolution: "is-weakset@npm:2.0.3"
-  dependencies:
-    call-bind: "npm:^1.0.7"
-    get-intrinsic: "npm:^1.2.4"
-  checksum: 10c0/8ad6141b6a400e7ce7c7442a13928c676d07b1f315ab77d9912920bf5f4170622f43126f111615788f26c3b1871158a6797c862233124507db0bcc33a9537d1a
-  languageName: node
-  linkType: hard
-
 "is-windows@npm:^1.0.1, is-windows@npm:^1.0.2":
   version: 1.0.2
   resolution: "is-windows@npm:1.0.2"
@@ -9711,16 +9510,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"jest-mock@npm:^27.0.6":
-  version: 27.5.1
-  resolution: "jest-mock@npm:27.5.1"
-  dependencies:
-    "@jest/types": "npm:^27.5.1"
-    "@types/node": "npm:*"
-  checksum: 10c0/6ad58454b37ee3f726930b07efbf40a7c79d2d2d9c7b226708b4b550bc0904de93bcacf714105d11952a5c0bc855e5d59145c8c9dbbb4e69b46e7367abf53b52
-  languageName: node
-  linkType: hard
-
 "jest-regex-util@npm:^29.6.3":
   version: 29.6.3
   resolution: "jest-regex-util@npm:29.6.3"
@@ -10299,15 +10088,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"lz-string@npm:^1.5.0":
-  version: 1.5.0
-  resolution: "lz-string@npm:1.5.0"
-  bin:
-    lz-string: bin/bin.js
-  checksum: 10c0/36128e4de34791838abe979b19927c26e67201ca5acf00880377af7d765b38d1c60847e01c5ec61b1a260c48029084ab3893a3925fd6e48a04011364b089991b
-  languageName: node
-  linkType: hard
-
 "magic-string@npm:^0.27.0":
   version: 0.27.0
   resolution: "magic-string@npm:0.27.0"
@@ -12119,17 +11899,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"pretty-format@npm:^27.0.2":
-  version: 27.5.1
-  resolution: "pretty-format@npm:27.5.1"
-  dependencies:
-    ansi-regex: "npm:^5.0.1"
-    ansi-styles: "npm:^5.0.0"
-    react-is: "npm:^17.0.1"
-  checksum: 10c0/0cbda1031aa30c659e10921fa94e0dd3f903ecbbbe7184a729ad66f2b6e7f17891e8c7d7654c458fa4ccb1a411ffb695b4f17bbcd3fe075fabe181027c4040ed
-  languageName: node
-  linkType: hard
-
 "pretty-format@npm:^29.7.0":
   version: 29.7.0
   resolution: "pretty-format@npm:29.7.0"
@@ -12460,17 +12229,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-confetti@npm:^6.1.0":
-  version: 6.1.0
-  resolution: "react-confetti@npm:6.1.0"
-  dependencies:
-    tween-functions: "npm:^1.2.0"
-  peerDependencies:
-    react: ^16.3.0 || ^17.0.1 || ^18.0.0
-  checksum: 10c0/5b4eb23eef564695f6db1d25b294ed31d5fa21ff4092c6a38e641f85cd10e3e0b50014366e3ac0f7cf772e73faaecd14614e5b11a5531336fa769dda8068ab59
-  languageName: node
-  linkType: hard
-
 "react-docgen-typescript@npm:^2.2.2":
   version: 2.2.2
   resolution: "react-docgen-typescript@npm:2.2.2"
@@ -12538,13 +12296,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"react-is@npm:^17.0.1":
-  version: 17.0.2
-  resolution: "react-is@npm:17.0.2"
-  checksum: 10c0/2bdb6b93fbb1820b024b496042cce405c57e2f85e777c9aabd55f9b26d145408f9f74f5934676ffdc46f3dcff656d78413a6e43968e7b3f92eea35b3052e9053
-  languageName: node
-  linkType: hard
-
 "react-is@npm:^18.0.0":
   version: 18.3.1
   resolution: "react-is@npm:18.3.1"
@@ -12829,7 +12580,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"regexp.prototype.flags@npm:^1.5.1, regexp.prototype.flags@npm:^1.5.2":
+"regexp.prototype.flags@npm:^1.5.2":
   version: 1.5.2
   resolution: "regexp.prototype.flags@npm:1.5.2"
   dependencies:
@@ -14089,15 +13840,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"stop-iteration-iterator@npm:^1.0.0":
-  version: 1.0.0
-  resolution: "stop-iteration-iterator@npm:1.0.0"
-  dependencies:
-    internal-slot: "npm:^1.0.4"
-  checksum: 10c0/c4158d6188aac510d9e92925b58709207bd94699e9c31186a040c80932a687f84a51356b5895e6dc72710aad83addb9411c22171832c9ae0e6e11b7d61b0dfb9
-  languageName: node
-  linkType: hard
-
 "store2@npm:^2.14.2":
   version: 2.14.3
   resolution: "store2@npm:2.14.3"
@@ -14823,7 +14565,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"ts-dedent@npm:^2.0.0, ts-dedent@npm:^2.2.0":
+"ts-dedent@npm:^2.0.0":
   version: 2.2.0
   resolution: "ts-dedent@npm:2.2.0"
   checksum: 10c0/175adea838468cc2ff7d5e97f970dcb798bbcb623f29c6088cb21aa2880d207c5784be81ab1741f56b9ac37840cbaba0c0d79f7f8b67ffe61c02634cafa5c303
@@ -14851,13 +14593,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"tween-functions@npm:^1.2.0":
-  version: 1.2.0
-  resolution: "tween-functions@npm:1.2.0"
-  checksum: 10c0/7e59295b8b0ee4132ed2fe335f56a9db5c87056dad6b6fd3011be72239fd20398003ddb4403bc98ad9f5c94468890830f64016edbbde35581faf95b32cda8305
-  languageName: node
-  linkType: hard
-
 "type-detect@npm:^4.0.0, type-detect@npm:^4.0.8":
   version: 4.0.8
   resolution: "type-detect@npm:4.0.8"
@@ -15727,18 +15462,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-collection@npm:^1.0.1":
-  version: 1.0.2
-  resolution: "which-collection@npm:1.0.2"
-  dependencies:
-    is-map: "npm:^2.0.3"
-    is-set: "npm:^2.0.3"
-    is-weakmap: "npm:^2.0.2"
-    is-weakset: "npm:^2.0.3"
-  checksum: 10c0/3345fde20964525a04cdf7c4a96821f85f0cc198f1b2ecb4576e08096746d129eb133571998fe121c77782ac8f21cbd67745a3d35ce100d26d4e684c142ea1f2
-  languageName: node
-  linkType: hard
-
 "which-module@npm:^1.0.0":
   version: 1.0.0
   resolution: "which-module@npm:1.0.0"
@@ -15746,7 +15469,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"which-typed-array@npm:^1.1.13, which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15, which-typed-array@npm:^1.1.2":
+"which-typed-array@npm:^1.1.14, which-typed-array@npm:^1.1.15, which-typed-array@npm:^1.1.2":
   version: 1.1.15
   resolution: "which-typed-array@npm:1.1.15"
   dependencies: