diff --git a/frontend/.storybook/main.js b/frontend/.storybook/main.js index a1b422ae61..e9546b1fd3 100644 --- a/frontend/.storybook/main.js +++ b/frontend/.storybook/main.js @@ -2,12 +2,7 @@ const config = { stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"], staticDirs: ["../resources/public"], - addons: [ - "@storybook/addon-links", - "@storybook/addon-essentials", - "@storybook/addon-onboarding", - "@storybook/addon-interactions", - ], + addons: ["@storybook/addon-essentials"], framework: { name: "@storybook/react-vite", options: {}, diff --git a/frontend/package.json b/frontend/package.json index 2bbad53ed6..50f2559a33 100644 --- a/frontend/package.json +++ b/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", diff --git a/frontend/src/app/main/ui/ds.cljs b/frontend/src/app/main/ui/ds.cljs index 14fde3f515..150048e7a2 100644 --- a/frontend/src/app/main/ui/ds.cljs +++ b/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.icon :refer [icon* icon-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.assets.icon :refer [icon* icon-list]] + [app.main.ui.ds.foundations.assets.raw-svg :refer [raw-svg* raw-svg-list]] [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 diff --git a/frontend/src/app/main/ui/ds/foundations/icon.clj b/frontend/src/app/main/ui/ds/foundations/assets/icon.clj similarity index 93% rename from frontend/src/app/main/ui/ds/foundations/icon.clj rename to frontend/src/app/main/ui/ds/foundations/assets/icon.clj index 4f721c6d04..e51c10d357 100644 --- a/frontend/src/app/main/ui/ds/foundations/icon.clj +++ b/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] diff --git a/frontend/src/app/main/ui/ds/foundations/icon.cljs b/frontend/src/app/main/ui/ds/foundations/assets/icon.cljs similarity index 98% rename from frontend/src/app/main/ui/ds/foundations/icon.cljs rename to frontend/src/app/main/ui/ds/foundations/assets/icon.cljs index f9aa7b4023..d1578d4016 100644 --- a/frontend/src/app/main/ui/ds/foundations/icon.cljs +++ b/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}]])) diff --git a/frontend/src/app/main/ui/ds/foundations/icon.mdx b/frontend/src/app/main/ui/ds/foundations/assets/icon.mdx similarity index 92% rename from frontend/src/app/main/ui/ds/foundations/icon.mdx rename to frontend/src/app/main/ui/ds/foundations/assets/icon.mdx index d83361d79d..140b897a2d 100644 --- a/frontend/src/app/main/ui/ds/foundations/icon.mdx +++ b/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 `` 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 diff --git a/frontend/src/app/main/ui/ds/foundations/icon.scss b/frontend/src/app/main/ui/ds/foundations/assets/icon.scss similarity index 100% rename from frontend/src/app/main/ui/ds/foundations/icon.scss rename to frontend/src/app/main/ui/ds/foundations/assets/icon.scss diff --git a/frontend/src/app/main/ui/ds/foundations/icon.stories.jsx b/frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx similarity index 56% rename from frontend/src/app/main/ui/ds/foundations/icon.stories.jsx rename to frontend/src/app/main/ui/ds/foundations/assets/icon.stories.jsx index 52bb1076c6..c6b93f2668 100644 --- a/frontend/src/app/main/ui/ds/foundations/icon.stories.jsx +++ b/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 = { - render: () => ( +export default { + 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 }) => (

All Icons

-

Hover on an icon to see its ID

+

Hover on an icon to see its ID.

 {iconList.map((iconId) => ( @@ -29,29 +39,43 @@ export const AllIcons = { key={iconId} style={{ color: "var(--color-accent-primary)" }} > - + ))} ), + args: { + size: "m", + }, parameters: { + controls: { exclude: ["id", "size"] }, backgrounds: { disable: true }, }, }; export const Default = { - render: () => ( + render: ({ id, ...args }) => ( - + ), + args: { + id: "pin", + }, + parameters: { + controls: { exclude: ["size"] }, + }, }; -export const Small = { - render: () => ( +export const CustomSize = { + render: ({ id, size, ...args }) => ( - + ), + args: { + id: "pin", + size: "m", + }, }; diff --git a/frontend/src/app/main/ui/ds/foundations/raw_svg.clj b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.clj similarity index 93% rename from frontend/src/app/main/ui/ds/foundations/raw_svg.clj rename to frontend/src/app/main/ui/ds/foundations/assets/raw_svg.clj index 2ba5104aeb..814702ef41 100644 --- a/frontend/src/app/main/ui/ds/foundations/raw_svg.clj +++ b/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] diff --git a/frontend/src/app/main/ui/ds/foundations/raw_svg.cljs b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs similarity index 85% rename from frontend/src/app/main/ui/ds/foundations/raw_svg.cljs rename to frontend/src/app/main/ui/ds/foundations/assets/raw_svg.cljs index c89201ace2..afc691f1fd 100644 --- a/frontend/src/app/main/ui/ds/foundations/raw_svg.cljs +++ b/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)}]]) diff --git a/frontend/src/app/main/ui/ds/foundations/raw_svg.mdx b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.mdx similarity index 91% rename from frontend/src/app/main/ui/ds/foundations/raw_svg.mdx rename to frontend/src/app/main/ui/ds/foundations/assets/raw_svg.mdx index c5eaed5075..fcd5e2c094 100644 --- a/frontend/src/app/main/ui/ds/foundations/raw_svg.mdx +++ b/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 diff --git a/frontend/src/app/main/ui/ds/foundations/raw_svg.stories.jsx b/frontend/src/app/main/ui/ds/foundations/assets/raw_svg.stories.jsx similarity index 63% rename from frontend/src/app/main/ui/ds/foundations/raw_svg.stories.jsx rename to frontend/src/app/main/ui/ds/foundations/assets/raw_svg.stories.jsx index b73e6b56ec..dcdf6e5096 100644 --- a/frontend/src/app/main/ui/ds/foundations/raw_svg.stories.jsx +++ b/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 = { - render: () => ( +export default { + title: "Foundations/Assets/RawSvg", + component: Components.RawSvg, + argTypes: { + id: { + options: assetList, + control: { type: "select" }, + }, + }, +}; + +export const All = { + render: ({}) => ( -

All assets

-

Hover on a asset to see its id.

+

All SVG Assets

+

Hover on an asset to see its ID.

 {assetList.map((x) => ( - + ))} ), parameters: { + controls: { exclude: ["id"] }, backgrounds: { values: [{ name: "debug", value: "#ccc" }] }, }, }; export const Default = { - render: () => ( + render: ({ id, ...args }) => ( - + ), + args: { + id: "brand-gitlab", + }, }; diff --git a/frontend/src/app/main/ui/ds/foundations/heading.stories.jsx b/frontend/src/app/main/ui/ds/foundations/heading.stories.jsx deleted file mode 100644 index ac017b79f6..0000000000 --- a/frontend/src/app/main/ui/ds/foundations/heading.stories.jsx +++ /dev/null @@ -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: () => ( - - - - h1 / display - - - - - h2 / display - - - - - h3 / display - - - - ), -}; - -export const HeadingTypography = { - render: () => ( - - - - h1 / title-large - - - - - h1 / title-medium - - - - - h1 / code-font - - - - ), -}; diff --git a/frontend/src/app/main/ui/ds/foundations/text.mdx b/frontend/src/app/main/ui/ds/foundations/text.mdx deleted file mode 100644 index 0f526cf271..0000000000 --- a/frontend/src/app/main/ui/ds/foundations/text.mdx +++ /dev/null @@ -1,48 +0,0 @@ -import { Canvas, Meta } from "@storybook/blocks"; -import * as TextStories from "./text.stories"; - - - -# 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 `

` per page. - -Headings are used to navigate the page and must follow the `

` -> `

` -> `

` -> `

` -> `

` -> `
` hierarchy. -For example, do not skip levels in the `

` -> `

` hierarchy if there is no `

` in between. - -We should not choose the heading level by its visual aspect. diff --git a/frontend/src/app/main/ui/ds/foundations/text.stories.jsx b/frontend/src/app/main/ui/ds/foundations/text.stories.jsx deleted file mode 100644 index 703522c3fa..0000000000 --- a/frontend/src/app/main/ui/ds/foundations/text.stories.jsx +++ /dev/null @@ -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: () => ( - - - - p / Title - - - - - span / Title large - - - - - div / Title large - - - - ), -}; - -export const TypographyParagraph = { - render: () => ( - - - - p / Title large - - - - - p / Title medium - - - - - p / Code font - - - - ), -}; diff --git a/frontend/src/app/main/ui/ds/foundations/typography.cljs b/frontend/src/app/main/ui/ds/foundations/typography.cljs index 9fd00b2c53..f52b0c583c 100644 --- a/frontend/src/app/main/ui/ds/foundations/typography.cljs +++ b/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 diff --git a/frontend/src/app/main/ui/ds/foundations/typography.stories.jsx b/frontend/src/app/main/ui/ds/foundations/typography.stories.jsx deleted file mode 100644 index 761a7076aa..0000000000 --- a/frontend/src/app/main/ui/ds/foundations/typography.stories.jsx +++ /dev/null @@ -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: () => ( - - -

All Typography

-

Hover on a heading to see its ID

- - {Object.values(typographyList).map( - ({ id, name, size, weight, line, font }) => ( - - - {name} - {weight} - {size}/{line} {font} - - - ), - )} - - ), - parameters: { - backgrounds: { disable: true }, - }, -}; diff --git a/frontend/src/app/main/ui/ds/foundations/heading.cljs b/frontend/src/app/main/ui/ds/foundations/typography/heading.cljs similarity index 97% rename from frontend/src/app/main/ui/ds/foundations/heading.cljs rename to frontend/src/app/main/ui/ds/foundations/typography/heading.cljs index 59c8e3dde4..374ae545f5 100644 --- a/frontend/src/app/main/ui/ds/foundations/heading.cljs +++ b/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")) diff --git a/frontend/src/app/main/ui/ds/foundations/heading.mdx b/frontend/src/app/main/ui/ds/foundations/typography/heading.mdx similarity index 88% rename from frontend/src/app/main/ui/ds/foundations/heading.mdx rename to frontend/src/app/main/ui/ds/foundations/typography/heading.mdx index 52e3bb1204..ffda6ede40 100644 --- a/frontend/src/app/main/ui/ds/foundations/heading.mdx +++ b/frontend/src/app/main/ui/ds/foundations/typography/heading.mdx @@ -11,7 +11,7 @@ This component will add a heading tag element to our code. This components accepts to props: -- `level` (default value: `1`) : A number from `1` to `6`, to set the heading level (i.e. `

`, `

`, etc.). +- `level` (default value: `1`) : A number from `1` to `6`, to set the heading level (i.e. `

`, `

`, etc.). - `typography` (mandatory): Any of the [supported typography IDs](?path=/docs/foundations-typography--docs). You can check passed props to renderized components on hover `level / typography`; @@ -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: diff --git a/frontend/src/app/main/ui/ds/foundations/heading.scss b/frontend/src/app/main/ui/ds/foundations/typography/heading.scss similarity index 96% rename from frontend/src/app/main/ui/ds/foundations/heading.scss rename to frontend/src/app/main/ui/ds/foundations/typography/heading.scss index 1cd69b7bcb..67c16bd367 100644 --- a/frontend/src/app/main/ui/ds/foundations/heading.scss +++ b/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"); diff --git a/frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx b/frontend/src/app/main/ui/ds/foundations/typography/heading.stories.jsx new file mode 100644 index 0000000000..30e592e88a --- /dev/null +++ b/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 }) => ( + + + Lorem ipsum + + + ), + args: { + level: 1, + typography: "display", + }, +}; diff --git a/frontend/src/app/main/ui/ds/foundations/text.cljs b/frontend/src/app/main/ui/ds/foundations/typography/text.cljs similarity index 91% rename from frontend/src/app/main/ui/ds/foundations/text.cljs rename to frontend/src/app/main/ui/ds/foundations/typography/text.cljs index 180ee703f5..6f9baa2dd2 100644 --- a/frontend/src/app/main/ui/ds/foundations/text.cljs +++ b/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])) diff --git a/frontend/src/app/main/ui/ds/foundations/typography/text.mdx b/frontend/src/app/main/ui/ds/foundations/typography/text.mdx new file mode 100644 index 0000000000..1abe72cc17 --- /dev/null +++ b/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"; + + + +# 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"] +``` diff --git a/frontend/src/app/main/ui/ds/foundations/text.scss b/frontend/src/app/main/ui/ds/foundations/typography/text.scss similarity index 96% rename from frontend/src/app/main/ui/ds/foundations/text.scss rename to frontend/src/app/main/ui/ds/foundations/typography/text.scss index 1cd69b7bcb..67c16bd367 100644 --- a/frontend/src/app/main/ui/ds/foundations/text.scss +++ b/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"); diff --git a/frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx b/frontend/src/app/main/ui/ds/foundations/typography/text.stories.jsx new file mode 100644 index 0000000000..1eaec1b8eb --- /dev/null +++ b/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 }) => ( + + + Lorem ipsum + + + ), + args: { + typography: "display", + }, +}; + +export const CustomTag = { + render: ({ typography, ...args }) => ( + + + Lorem ipsum + + + ), + args: { + typography: "display", + as: "li", + }, +}; diff --git a/frontend/src/app/main/ui/ds/foundations/typography.mdx b/frontend/src/app/main/ui/ds/foundations/typography/typography.mdx similarity index 73% rename from frontend/src/app/main/ui/ds/foundations/typography.mdx rename to frontend/src/app/main/ui/ds/foundations/typography/typography.mdx index e36d292711..a3fae5d150 100644 --- a/frontend/src/app/main/ui/ds/foundations/typography.mdx +++ b/frontend/src/app/main/ui/ds/foundations/typography/typography.mdx @@ -1,8 +1,7 @@ -import { Canvas, Meta, Story } from "@storybook/blocks"; -import * as TypographyStories from "./typography.stories"; +import { Canvas, Meta } from "@storybook/blocks"; import Components from "@target/components"; - + # Typography @@ -19,7 +18,7 @@ This situation is something to be corrected in future improvements. Typographic colours are used in text elements such as headers and body and in the various components that make up the tool... -The colours used in typography are the Foreground colours such +The colours used in typography are the Foreground colours such `--color-foreground-primary` or `--color-foreground-secondary` but different colours can be applied in specific component applications with their own styles, such as buttons. @@ -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. - Display - 400 - 36px/1.4 "Work Sans" + Display - 400 - 36px/1.4 "Work Sans" ### Title large `title-large` @@ -64,7 +63,7 @@ Page headers for main pages (dashboard, Profiles...). If too big use title (medium) in narrow windows. - Title large - 400 - 24px/1.4 "Work Sans" + Title large - 400 - 24px/1.4 "Work Sans" ### 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. - Title medium - 400 - 20px/1.4 "Work Sans" + Title medium - 400 - 20px/1.4 "Work Sans" ### 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). - Title small - 400 - 14px/1.2 "Work Sans" + Title small - 400 - 14px/1.2 "Work Sans" ## Headline @@ -92,20 +91,20 @@ page titles (automated action titles, for example). Same line height as title (m ### Headline large `headline-large` - Headline large - 400 - 18px/1.4 "Work Sans" + Headline large - 400 - 18px/1.4 "Work Sans" ### Headline medium `headline-medium` - Headline medium - 400 - 16px/1.4 "Work Sans" + Headline medium - 400 - 16px/1.4 "Work Sans" ### Headline small `headline-small` - Headline small - 500 - 12px/1.2 "Work Sans" + Headline small - 500 - 12px/1.2 "Work Sans" ## Body @@ -115,7 +114,7 @@ page titles (automated action titles, for example). Same line height as title (m Generic content. - Body large - 400 - 16px/1.4 "Work Sans" + Body large - 400 - 16px/1.4 "Work Sans" ### Body medium `body-medium` @@ -123,7 +122,7 @@ Generic content. Default UI font. Most commonly used for body text. - Body medium - 400 - 14px/1.3 "Work Sans" + Body medium - 400 - 14px/1.3 "Work Sans" @@ -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. - Body small - 400 - 12px/1.3 "Work Sans" + Body small - 400 - 12px/1.3 "Work Sans" ## 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. - Code font - 400 - 12px/1.2 "Roboto Mono" + Code font - 400 - 12px/1.2 "Roboto Mono" ## Fonts diff --git a/frontend/yarn.lock b/frontend/yarn.lock index 1eaae603b0..983a02c96e 100644 --- a/frontend/yarn.lock +++ b/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: