diff --git a/app/client/package.json b/app/client/package.json index 1afd07ed12..0377a835f2 100644 --- a/app/client/package.json +++ b/app/client/package.json @@ -7,7 +7,7 @@ "npm": "^8.5.5" }, "workspaces": [ - "packages/*" + "packages/**/*" ], "cracoConfig": "craco.dev.config.js", "scripts": { @@ -41,7 +41,7 @@ "@blueprintjs/icons": "^3.10.0", "@blueprintjs/popover2": "^0.5.0", "@blueprintjs/select": "^3.10.0", - "@design-system/wds": "*", + "@design-system/widgets": "*", "@fusioncharts/powercharts": "^3.16.0", "@github/g-emoji-element": "^1.1.5", "@googlemaps/markerclusterer": "^2.0.14", diff --git a/app/client/packages/design-system/headless/.eslintrc.json b/app/client/packages/design-system/headless/.eslintrc.json new file mode 100644 index 0000000000..856ec188a8 --- /dev/null +++ b/app/client/packages/design-system/headless/.eslintrc.json @@ -0,0 +1,3 @@ +{ + "extends": ["../../../.eslintrc.json"] +} diff --git a/app/client/packages/design-system/headless/package.json b/app/client/packages/design-system/headless/package.json new file mode 100644 index 0000000000..2c3b7370a0 --- /dev/null +++ b/app/client/packages/design-system/headless/package.json @@ -0,0 +1,30 @@ +{ + "name": "@design-system/headless", + "version": "1.0.0", + "main": "src/index.ts", + "author": "Valera Melnikov , Pawan Kumar ", + "license": "MIT", + "scripts": { + "lint:ci": "eslint --cache .", + "prettier:ci": "prettier --check ." + }, + "dependencies": { + "@react-aria/button": "^3.7.0", + "@react-aria/focus": "^3.11.0", + "@react-aria/interactions": "^3.14.0", + "@react-aria/utils": "^3.15.0", + "@react-spectrum/utils": "^3.9.0", + "@react-types/button": "^3.7.1", + "@react-types/shared": "^3.17.0", + "classnames": "*", + "react": "*", + "react-dom": "*" + }, + "devDependencies": { + "@types/react": "*", + "@types/react-dom": "*" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } +} diff --git a/app/client/packages/design-system/headless/src/components/Button.tsx b/app/client/packages/design-system/headless/src/components/Button.tsx new file mode 100644 index 0000000000..bb9dbf806c --- /dev/null +++ b/app/client/packages/design-system/headless/src/components/Button.tsx @@ -0,0 +1,39 @@ +import React, { forwardRef } from "react"; +import { useFocusableRef } from "@react-spectrum/utils"; +import classNames from "classnames"; +import { FocusRing } from "@react-aria/focus"; +import { mergeProps } from "@react-aria/utils"; +import { useButton } from "@react-aria/button"; +import { useHover } from "@react-aria/interactions"; +import type { RefObject } from "react"; +import type { FocusableRef } from "@react-types/shared"; +import type { ButtonProps as SpectrumButtonProps } from "@react-types/button"; + +export interface ButtonProps extends SpectrumButtonProps { + className?: string; +} + +export type ButtonRef = FocusableRef; + +export const Button = forwardRef((props: ButtonProps, ref: ButtonRef) => { + const { autoFocus, children, className, isDisabled } = props; + const domRef = useFocusableRef(ref) as RefObject; + const { buttonProps, isPressed } = useButton(props, domRef); + const { hoverProps, isHovered } = useHover({ isDisabled }); + + return ( + + + + ); +}); diff --git a/app/client/packages/design-system/headless/src/index.ts b/app/client/packages/design-system/headless/src/index.ts new file mode 100644 index 0000000000..499cd64146 --- /dev/null +++ b/app/client/packages/design-system/headless/src/index.ts @@ -0,0 +1,2 @@ +export { Button } from "./components/Button"; +export type { ButtonProps, ButtonRef } from "./components/Button"; diff --git a/app/client/packages/design-system/headless/tsconfig.json b/app/client/packages/design-system/headless/tsconfig.json new file mode 100644 index 0000000000..15bd9fe595 --- /dev/null +++ b/app/client/packages/design-system/headless/tsconfig.json @@ -0,0 +1,4 @@ +{ + "extends": "../../../tsconfig.json", + "include": ["./src/**/*"] +} diff --git a/app/client/packages/wds/.eslintrc.json b/app/client/packages/design-system/theming/.eslintrc.json similarity index 67% rename from app/client/packages/wds/.eslintrc.json rename to app/client/packages/design-system/theming/.eslintrc.json index a618049b54..8bf5795608 100644 --- a/app/client/packages/wds/.eslintrc.json +++ b/app/client/packages/design-system/theming/.eslintrc.json @@ -1,5 +1,5 @@ { - "extends": ["../../.eslintrc.json", "plugin:storybook/recommended"], + "extends": ["../../../.eslintrc.json"], "overrides": [ { "files": ["**/*.stories.*"], diff --git a/app/client/packages/design-system/theming/package.json b/app/client/packages/design-system/theming/package.json new file mode 100644 index 0000000000..df89c785d9 --- /dev/null +++ b/app/client/packages/design-system/theming/package.json @@ -0,0 +1,23 @@ +{ + "name": "@design-system/theming", + "version": "1.0.0", + "main": "src/index.ts", + "author": "Valera Melnikov , Pawan Kumar ", + "license": "MIT", + "scripts": { + "lint:ci": "eslint --cache .", + "prettier:ci": "prettier --check .", + "build:tokens": "npx ts-node ./src/utils/buildTokens.ts" + }, + "dependencies": { + "react": "*", + "react-dom": "*" + }, + "devDependencies": { + "@types/react": "*", + "@types/react-dom": "*" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" + } +} diff --git a/app/client/packages/design-system/theming/src/components/ThemeProvider.tsx b/app/client/packages/design-system/theming/src/components/ThemeProvider.tsx new file mode 100644 index 0000000000..c8eb4db3a5 --- /dev/null +++ b/app/client/packages/design-system/theming/src/components/ThemeProvider.tsx @@ -0,0 +1,36 @@ +import React from "react"; +import styled, { css } from "styled-components"; +import kebabCase from "lodash/kebabCase"; +import type { ReactNode } from "react"; +import type themeTokens from "../tokens/themeTokens.json"; + +type Theme = typeof themeTokens; + +export interface ThemeProviderProps { + theme: Theme; + children: ReactNode; +} + +/** + * creates locally scoped css variables + * + */ +const StyledProvider = styled.div` + ${({ theme }) => { + return css` + ${Object.keys(theme).map((key) => { + return Object.keys(theme[key]).map((nestedKey) => { + return `--${kebabCase(key)}-${kebabCase(nestedKey)}: ${ + theme[key][nestedKey].value + };`; + }); + })} + `; + }} +`; + +export const ThemeProvider = (props: ThemeProviderProps) => { + const { children, theme } = props; + + return {children}; +}; diff --git a/app/client/packages/design-system/theming/src/index.ts b/app/client/packages/design-system/theming/src/index.ts new file mode 100644 index 0000000000..0a8b4beff4 --- /dev/null +++ b/app/client/packages/design-system/theming/src/index.ts @@ -0,0 +1,3 @@ +export { ThemeProvider } from "./components/ThemeProvider"; +export { TokensAccessor } from "./utils/TokensAccessor"; +export { ColorsAccessor } from "./utils/ColorsAccessor"; diff --git a/app/client/packages/design-system/theming/src/tokens/defaultTokens.json b/app/client/packages/design-system/theming/src/tokens/defaultTokens.json new file mode 100644 index 0000000000..0f624a96ba --- /dev/null +++ b/app/client/packages/design-system/theming/src/tokens/defaultTokens.json @@ -0,0 +1,18 @@ +{ + "seedColor": "#553de9", + "focusColor": "#2a82ea", + "rootUnit": 4, + "isDarkMode": false, + "borderRadius": { + "1": "0px" + }, + "boxShadow": { + "1": "0 0 0 0 rgba(0, 0, 0, 0.2)" + }, + "borderWidth": { + "1": "1px" + }, + "opacity": { + "disabled": 0.3 + } +} diff --git a/app/client/packages/design-system/theming/src/tokens/themeTokens.json b/app/client/packages/design-system/theming/src/tokens/themeTokens.json new file mode 100644 index 0000000000..4dc2ff659d --- /dev/null +++ b/app/client/packages/design-system/theming/src/tokens/themeTokens.json @@ -0,0 +1,96 @@ +{ + "color": { + "bg-accent": { + "value": "#553de9", + "type": "color" + }, + "bg-accent-hover": { + "value": "#6e61ff", + "type": "color" + }, + "bg-accent-active": { + "value": "#8f85ff", + "type": "color" + }, + "bg-accent-subtle-hover": { + "value": "#b6adff", + "type": "color" + }, + "bg-accent-subtle-active": { + "value": "#d7d0ff", + "type": "color" + }, + "bd-accent": { + "value": "#553de9", + "type": "color" + }, + "fg-accent": { + "value": "#553de9", + "type": "color" + }, + "fg-on-accent": { + "value": "#fff", + "type": "color" + }, + "bd-focus": { + "value": "#2a82ea", + "type": "color" + } + }, + "sizing": { + "root-unit": { + "value": "4px", + "type": "sizing" + } + }, + "spacing": { + "0": { + "value": "0px", + "type": "spacing" + }, + "1": { + "value": "4px", + "type": "spacing" + }, + "2": { + "value": "8px", + "type": "spacing" + }, + "3": { + "value": "12px", + "type": "spacing" + }, + "4": { + "value": "16px", + "type": "spacing" + }, + "5": { + "value": "20px", + "type": "spacing" + } + }, + "borderRadius": { + "1": { + "value": "0px", + "type": "borderRadius" + } + }, + "boxShadow": { + "1": { + "value": "0 0 0 0 rgba(0, 0, 0, 0.2)", + "type": "boxShadow" + } + }, + "borderWidth": { + "1": { + "value": "1px", + "type": "borderWidth" + } + }, + "opacity": { + "disabled": { + "value": 0.3, + "type": "opacity" + } + } +} diff --git a/app/client/packages/design-system/theming/src/utils/ColorsAccessor.ts b/app/client/packages/design-system/theming/src/utils/ColorsAccessor.ts new file mode 100644 index 0000000000..080b8c5c94 --- /dev/null +++ b/app/client/packages/design-system/theming/src/utils/ColorsAccessor.ts @@ -0,0 +1,95 @@ +import Color from "colorjs.io"; +import type { ColorTypes } from "colorjs.io/types/src/color"; +import defaultsTokens from "../tokens/defaultTokens.json"; + +export class ColorsAccessor { + private color: Color; + + constructor(color: ColorTypes) { + this.color = this.parse(color); + } + + private parse = (color: ColorTypes) => { + try { + return new Color(color); + } catch (error) { + return new Color(defaultsTokens.seedColor); + } + }; + + updateColor = (color: ColorTypes) => { + this.color = this.parse(color); + }; + + getHex = () => { + return this.color.toString({ format: "hex" }); + }; + + /* Lightness */ + isVeryDark = () => { + return this.color.oklch.l < 30; + }; + + isVeryLight = () => { + return this.color.oklch.l > 90; + }; + + /* Chroma */ + isAchromatic = () => { + return this.color.oklch.c < 5; + }; + + isColorful = () => { + return this.color.oklch.c > 17; + }; + + /* Hue */ + isCold = () => { + return this.color.oklch.h >= 120 && this.color.oklch.h <= 300; + }; + + isBlue = () => { + return this.color.oklch.h >= 230 && this.color.oklch.h <= 270; + }; + + isGreen = () => { + return this.color.oklch.h >= 105 && this.color.oklch.h <= 165; + }; + + isYellow = () => { + return this.color.oklch.h >= 60 && this.color.oklch.h <= 75; + }; + + isRed = () => { + return this.color.oklch.h >= 29 && this.color.oklch.h <= 50; + }; + + lighten = (color: ColorTypes, lightness = 0.1) => { + return this.parse(color) + .set("oklch.l", (l) => l + lightness) + .toString({ format: "hex" }); + }; + + darken = (color: ColorTypes, lightness = 0.1) => { + return this.parse(color) + .set("oklch.l", (l) => l - lightness) + .toString({ format: "hex" }); + }; + + /** + * returns black or white based on the contrast of the color compare to white + * using APCA algorithm + */ + getComplementaryGrayscale = () => { + const contrast = this.color.contrast(new Color("#fff"), "APCA"); + + // if contrast is less than -35 then the text color should be white + if (contrast < -60) return "#fff"; + + return "#000"; + }; + + getFocus = () => { + return defaultsTokens.focusColor; + }; +} diff --git a/app/client/packages/design-system/theming/src/utils/TokensAccessor.ts b/app/client/packages/design-system/theming/src/utils/TokensAccessor.ts new file mode 100644 index 0000000000..ab265e8c7d --- /dev/null +++ b/app/client/packages/design-system/theming/src/utils/TokensAccessor.ts @@ -0,0 +1,164 @@ +import { ColorsAccessor } from "../utils/ColorsAccessor"; +import type { ColorTypes } from "colorjs.io/types/src/color"; +import defaultTokens from "../tokens/defaultTokens.json"; +import range from "lodash/range"; +import kebabCase from "lodash/kebabCase"; + +type TokenType = + | "sizing" + | "color" + | "spacing" + | "borderRadius" + | "boxShadow" + | "borderWidth" + | "opacity"; + +type Token = { + value: string | number; + type: TokenType; +}; + +type ThemeTokens = { + [key in TokenType]: { [key: string]: Token }; +}; + +type TokenObj = { [key: string]: string | number }; + +export class TokensAccessor { + constructor( + private color: ColorTypes = defaultTokens.seedColor, + private rootUnit: number = defaultTokens.rootUnit, + private borderRadius: TokenObj = defaultTokens.borderRadius, + private boxShadow: TokenObj = defaultTokens.boxShadow, + private borderWidth: TokenObj = defaultTokens.borderWidth, + private opacity: TokenObj = defaultTokens.opacity, + private colorsAccessor: ColorsAccessor = new ColorsAccessor(color), + ) {} + + updateSeedColor = (color: ColorTypes) => { + this.colorsAccessor.updateColor(color); + }; + + updateBorderRadius = (borderRadius: TokenObj) => { + this.borderRadius = borderRadius; + this.createTokenObject(this.borderRadius, "borderRadius"); + }; + + getColors = () => { + const colors = { + bgAccent: this.getBgAccent(), + bgAccentHover: this.getBgAccentHover(), + bgAccentActive: this.getBgAccentActive(), + bgAccentSubtleHover: this.getBgAccentSubtleHover(), + bgAccentSubtleActive: this.getAccentSubtleActive(), + bdAccent: this.getBdAccent(), + fgAccent: this.getFgAccent(), + fgOnAccent: this.getFgOnAccent(), + bdFocus: this.getBdFocus(), + }; + + return this.createTokenObject(colors, "color"); + }; + + getSizing = () => { + const sizing = { + rootUnit: `${this.rootUnit}px`, + }; + + return this.createTokenObject(sizing, "sizing"); + }; + + getSpacing = (count = 6) => { + const spacing = range(count).reduce((acc, value, index) => { + return { + ...acc, + [index]: `${this.rootUnit * value}px`, + }; + }, {}); + + return this.createTokenObject(spacing, "spacing"); + }; + + getBorderRadius = () => { + return this.createTokenObject(this.borderRadius, "borderRadius"); + }; + + getBoxShadow = () => { + return this.createTokenObject(this.boxShadow, "boxShadow"); + }; + + getBorderWidth = () => { + return this.createTokenObject(this.borderWidth, "borderWidth"); + }; + + getOpacity = () => { + return this.createTokenObject(this.opacity, "opacity"); + }; + + getAllTokens = () => { + return { + ...this.getColors(), + ...this.getSizing(), + ...this.getSpacing(), + ...this.getBorderRadius(), + ...this.getBoxShadow(), + ...this.getBorderWidth(), + ...this.getOpacity(), + }; + }; + + private createTokenObject = ( + tokenObj: TokenObj, + tokenType: TokenType, + ): ThemeTokens => { + const themeTokens = {} as ThemeTokens; + + Object.keys(tokenObj).forEach((key) => { + themeTokens[tokenType] = { + ...themeTokens[tokenType], + [kebabCase(key)]: { + value: tokenObj[key], + type: tokenType, + }, + }; + }); + + return themeTokens; + }; + + private getBgAccent = () => { + return this.colorsAccessor.getHex(); + }; + + private getBgAccentHover = () => { + return this.colorsAccessor.lighten(this.getBgAccent()); + }; + + private getBgAccentActive = () => { + return this.colorsAccessor.lighten(this.getBgAccentHover()); + }; + + private getBgAccentSubtleHover = () => { + return this.colorsAccessor.lighten(this.getBgAccent(), 0.3); + }; + + private getAccentSubtleActive = () => { + return this.colorsAccessor.lighten(this.getBgAccentSubtleHover()); + }; + + private getBdAccent = () => { + return this.colorsAccessor.getHex(); + }; + + private getFgAccent = () => { + return this.colorsAccessor.getHex(); + }; + + private getFgOnAccent = () => { + return this.colorsAccessor.getComplementaryGrayscale(); + }; + + private getBdFocus = () => { + return this.colorsAccessor.getFocus(); + }; +} diff --git a/app/client/packages/design-system/theming/src/utils/buildTokens.ts b/app/client/packages/design-system/theming/src/utils/buildTokens.ts new file mode 100644 index 0000000000..c5d935e85b --- /dev/null +++ b/app/client/packages/design-system/theming/src/utils/buildTokens.ts @@ -0,0 +1,7 @@ +import fs from "fs"; +import { TokensAccessor } from "../utils/TokensAccessor"; + +fs.writeFileSync( + `${__dirname}/../tokens/themeTokens.json`, + `${JSON.stringify(new TokensAccessor().getAllTokens(), null, 2)}\r\n`, +); diff --git a/app/client/packages/wds/tsconfig.json b/app/client/packages/design-system/theming/tsconfig.json similarity index 77% rename from app/client/packages/wds/tsconfig.json rename to app/client/packages/design-system/theming/tsconfig.json index d31268cb1b..cf2a4b0774 100644 --- a/app/client/packages/wds/tsconfig.json +++ b/app/client/packages/design-system/theming/tsconfig.json @@ -1,5 +1,5 @@ { - "extends": "../../tsconfig.json", + "extends": "../../../tsconfig.json", "include": ["./src/**/*"], "ts-node": { "compilerOptions": { diff --git a/app/client/packages/design-system/widgets/.eslintrc.json b/app/client/packages/design-system/widgets/.eslintrc.json new file mode 100644 index 0000000000..1a20e582bc --- /dev/null +++ b/app/client/packages/design-system/widgets/.eslintrc.json @@ -0,0 +1,11 @@ +{ + "extends": ["../../../.eslintrc.json", "plugin:storybook/recommended"], + "overrides": [ + { + "files": ["**/*.stories.*"], + "rules": { + "import/no-anonymous-default-export": "off" + } + } + ] +} diff --git a/app/client/packages/wds/package.json b/app/client/packages/design-system/widgets/package.json similarity index 61% rename from app/client/packages/wds/package.json rename to app/client/packages/design-system/widgets/package.json index 44246ba056..6fc64ba212 100644 --- a/app/client/packages/wds/package.json +++ b/app/client/packages/design-system/widgets/package.json @@ -1,26 +1,28 @@ { - "name": "@design-system/wds", + "name": "@design-system/widgets", "version": "1.0.0", "main": "src/index.ts", "author": "Valera Melnikov , Pawan Kumar ", "license": "MIT", "scripts": { - "build:tokens": "npx ts-node ./src/utils/buildTokens.ts", "lint:ci": "eslint --cache .", "prettier:ci": "prettier --check ." }, - "devDependencies": { - "@types/react": "^17.0.2", - "@types/react-dom": "^17.0.2", - "eslint": "*", - "eslint-plugin-storybook": "^0.6.10", - "prettier": "*" - }, "dependencies": { "@capsizecss/core": "^3.1.0", "@capsizecss/metrics": "^1.0.1", + "@design-system/headless": "*", + "@design-system/theming": "*", "colorjs.io": "^0.4.3", - "react": "^17.0.2", - "react-dom": "^17.0.2" + "eslint-plugin-storybook": "^0.6.10", + "react": "*", + "react-dom": "*" + }, + "devDependencies": { + "@types/react": "*", + "@types/react-dom": "*" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0" } } diff --git a/app/client/packages/design-system/widgets/src/components/Button/Button.stories.mdx b/app/client/packages/design-system/widgets/src/components/Button/Button.stories.mdx new file mode 100644 index 0000000000..06f3d0cf31 --- /dev/null +++ b/app/client/packages/design-system/widgets/src/components/Button/Button.stories.mdx @@ -0,0 +1,84 @@ +import { Canvas, Meta, Story, ArgsTable } from "@storybook/addon-docs"; +import { Button } from "./"; + + + +export const Template = (args, { globals: { fontFamily } }) => ( + - - - - ); -}; - -export const TextStory = Template.bind({}); -TextStory.storyName = "Button Group"; -TextStory.args = { - isLoading: false, - isDisabled: false, -}; - -TextStory.parameters = { - height: "32px", - width: "300px", -}; diff --git a/app/client/packages/wds/src/constants/defaultTokens.json b/app/client/packages/wds/src/constants/defaultTokens.json deleted file mode 100644 index a4d5aaab30..0000000000 --- a/app/client/packages/wds/src/constants/defaultTokens.json +++ /dev/null @@ -1,13 +0,0 @@ -{ - "seedColor": "#1a7f37", - "rootUnit": 4, - "isDarkMode": false, - "borderRadius": 4, - "boxShadow": { - "x": 0, - "y": 0, - "blur": 0, - "spread": 0, - "color": "rgba(0, 0, 0, 0.2)" - } -} diff --git a/app/client/packages/wds/src/styles/tokens/raw.css b/app/client/packages/wds/src/styles/tokens/raw.css deleted file mode 100644 index 9cb4668816..0000000000 --- a/app/client/packages/wds/src/styles/tokens/raw.css +++ /dev/null @@ -1,8 +0,0 @@ -:root { - --wds-v2-spacing-root: 4px; - - --wds-v2-spacing-0: 0px; - --wds-v2-spacing-1: var(--wds-v2-spacing-root); - --wds-v2-spacing-2: calc(var(--wds-v2-spacing-root) * 2); - --wds-v2-spacing-4: calc(var(--wds-v2-spacing-root) * 4); -} diff --git a/app/client/packages/wds/src/styles/tokens/semantic.css b/app/client/packages/wds/src/styles/tokens/semantic.css deleted file mode 100644 index 198dc27a5d..0000000000 --- a/app/client/packages/wds/src/styles/tokens/semantic.css +++ /dev/null @@ -1,11 +0,0 @@ -:root { - --wds-v2-color-bg-disabled: var(--wds-v2-color-gray-100); - --wds-v2-color-text-disabled: var(--wds-v2-color-gray-400); - - --wds-v2-color-border: var(--wds-v2-color-gray-200); - --wds-v2-color-border-disabled: var(--wds-v2-color-gray-200); - --wds-v2-color-border-focus: var(--wds-v2-color-blue-300); - - --wds-v2-color-bg-select: var(--wds-v2-color-white); - --wds-v2-color-bg-select-hover: var(--wds-v2-color-gray-100); -} diff --git a/app/client/packages/wds/src/utils/buildTokens.ts b/app/client/packages/wds/src/utils/buildTokens.ts deleted file mode 100644 index 8d85694b8f..0000000000 --- a/app/client/packages/wds/src/utils/buildTokens.ts +++ /dev/null @@ -1,58 +0,0 @@ -import * as fs from "fs"; -import { kebabCase, startCase, range } from "lodash"; - -import defaults from "../constants/defaultTokens.json"; -import { createSemanticColorTokens } from "./createTokens"; - -type Token = { - value: string; - type: "color" | "sizing" | "borderRadius" | "boxShadow" | "opacity"; -}; - -// generating semantic tokens -const semanticColors = createSemanticColorTokens(defaults.seedColor); - -const transformedSemanticTokens: Record = {}; -for (const [key, value] of Object.entries(semanticColors)) { - transformedSemanticTokens[kebabCase(`color${startCase(key)}`)] = { - value: value, - type: "color", - }; -} - -// generating spacing tokens -const spacingTokens: Record = {}; - -range(6).map((value, index) => { - spacingTokens[`spacing-${index}`] = { - value: `${defaults.rootUnit * value}px`, - type: "sizing", - }; -}); - -const finalTokens = { - semantic: { - ...transformedSemanticTokens, - "opacity-disabled": { - value: 0.5, - type: "opacity", - }, - }, - raw: { - ...spacingTokens, - "border-radius": { - value: `${defaults.borderRadius}px`, - type: "borderRadius", - }, - "box-shadow": { - value: defaults.boxShadow, - type: "boxShadow", - }, - }, -}; - -// write to file -fs.writeFileSync( - `${__dirname}/../tokens.json`, - JSON.stringify(finalTokens, null, 2) + "\r\n", -); diff --git a/app/client/packages/wds/src/utils/colors.ts b/app/client/packages/wds/src/utils/colors.ts deleted file mode 100644 index db0de362d8..0000000000 --- a/app/client/packages/wds/src/utils/colors.ts +++ /dev/null @@ -1,128 +0,0 @@ -import Color from "colorjs.io"; - -/* Color Utility Functions. Lightness */ - -export const isVeryDark = (hex = "#000") => { - return parseColor(hex).oklch.l < 30; -}; - -export const isVeryLight = (hex = "#000") => { - return parseColor(hex).oklch.l > 90; -}; - -/* Chroma */ - -export const isAchromatic = (hex = "#000") => { - return parseColor(hex).oklch.c < 5; -}; - -export const isColorful = (hex = "#000") => { - return parseColor(hex).oklch.c > 17; -}; - -/* Hue */ - -export const isCold = (hex = "#000") => { - return parseColor(hex).oklch.h >= 120 && parseColor(hex).oklch.h <= 300; -}; - -export const isBlue = (hex = "#000") => { - return parseColor(hex).oklch.h >= 230 && parseColor(hex).oklch.h <= 270; -}; - -export const isGreen = (hex = "#000") => { - return parseColor(hex).oklch.h >= 105 && parseColor(hex).oklch.h <= 165; -}; - -export const isYellow = (hex = "#000") => { - return parseColor(hex).oklch.h >= 60 && parseColor(hex).oklch.h <= 75; -}; - -export const isRed = (hex = "#000") => { - return parseColor(hex).oklch.h >= 29 && parseColor(hex).oklch.h <= 50; -}; - -/** - * returns black or white based on the constrast of the color compare to white - * using APCA algorithm - * - * @param color - * @returns - */ -export const getComplementaryGrayscaleColor = (hex = "#000") => { - const bg = parseColor(hex); - const text = new Color("#fff"); - - const contrast = bg.contrast(text, "APCA"); - - // if contrast is less than -35 then the text color should be white - if (contrast < -35) return "#fff"; - - return "#000"; -}; - -/** - * lightens color - * - * @param color - * @param amount - * @returns - */ -export const lightenColor = (hex = "#000", lightness = 0.9) => { - const color = parseColor(hex); - - color.set("oklch.l", () => lightness); - - return color.toString({ format: "hex" }); -}; - -/** - * darkens color by a given amount - * - * @param hex - * @param lightness - * @returns - */ -export const darkenColor = (hex = "#000", lightness = 0.03) => { - const color = parseColor(hex); - - color.set("oklch.l", (l: any) => l - lightness); - - return color.toString({ format: "hex" }); -}; - -/** - * calculate the hover color - * - * @param hex - * @returns - */ -export const calulateHoverColor = (hex = "#000") => { - const color = parseColor(hex); - - switch (true) { - case color.get("oklch.l") > 0.35: - color.set("oklch.l", (l: any) => l + 0.03); - break; - case color.get("oklch.l") < 0.35: - color.set("oklch.l", (l: any) => l - 0.03); - break; - } - - return color.toString({ format: "hex" }); -}; - -/** - * Parses a color and returns a color object - * if the color is invalid it returns black - * - * @param hex - * @returns - */ -export const parseColor = (hex = "#000") => { - try { - return new Color(hex); - } catch (error) { - return new Color("#000"); - } -}; diff --git a/app/client/packages/wds/src/utils/createTokens.ts b/app/client/packages/wds/src/utils/createTokens.ts deleted file mode 100644 index 82eca66db1..0000000000 --- a/app/client/packages/wds/src/utils/createTokens.ts +++ /dev/null @@ -1,112 +0,0 @@ -import kebabCase from "lodash/kebabCase"; -import type { CSSProperties } from "styled-components"; -import { css } from "styled-components"; -import { - lightenColor, - darkenColor, - getComplementaryGrayscaleColor, - parseColor, - calulateHoverColor, -} from "./colors"; -import defaultsTokens from "../constants/defaultTokens.json"; - -/** - * This function is used to create tokens for widgets - */ -export const createCSSVars = css` - ${({ - accentColor: color, - borderRadius, - boxShadow, - }: { - accentColor: CSSProperties["color"]; - borderRadius: CSSProperties["borderRadius"]; - boxShadow: CSSProperties["boxShadow"]; - }) => { - const colorTokens: any = createSemanticColorTokens(color); - - return css` - ${Object.keys(colorTokens).map( - (key) => css` - --wds-v2-color-${kebabCase(key)}: ${colorTokens[key]};`, - )} - - --wds-v2-shadow: ${boxShadow}; - --wds-v2-radii: ${borderRadius}; - `; - }} -`; - -/** Semantic tokens utils */ - -const getBgAccentColor = (color: CSSProperties["color"]) => { - return parseColor(color).toString({ format: "hex" }); -}; - -const getBgAccentHoverColor = (color: CSSProperties["color"]) => { - return calulateHoverColor(color); -}; - -const getBgAccentSubtleColor = (color: CSSProperties["color"]) => { - return lightenColor(color); -}; - -const getBgAccentSubtleHoverColor = (color: CSSProperties["color"]) => { - return calulateHoverColor(color); -}; - -const getBgAccentActiveColor = (color: CSSProperties["color"]) => { - return darkenColor(color); -}; - -const getFgOnAccentTextColor = (color: CSSProperties["color"]) => { - return getComplementaryGrayscaleColor(color); -}; - -const getAccentSubtleActiveColor = (color: CSSProperties["color"]) => { - return darkenColor(color, 0.03); -}; - -const getBdOnAccentColor = (color: CSSProperties["color"]) => { - return darkenColor(color, 0.1); -}; - -const getBdOnAccentSubtleColor = (color: CSSProperties["color"]) => { - return lightenColor(color, 0.98); -}; - -/** - * create semantic color tokens - * - * @param color - * @returns - */ -export const createSemanticColorTokens = ( - color: CSSProperties["color"] = defaultsTokens.seedColor, -) => { - const bgAccent = getBgAccentColor(color); - const bgAccentHover = getBgAccentHoverColor(color); - const bgAccentSubtle = getBgAccentSubtleColor(color); - const bgAccentActive = getBgAccentActiveColor(bgAccentHover); - const bgAccentSubtleHover = getBgAccentSubtleHoverColor(bgAccentSubtle); - const fgOnaccent = getFgOnAccentTextColor(bgAccent); - const bgAccentSubtleActive = getAccentSubtleActiveColor(bgAccentSubtleHover); - const bgOnAccent = getBdOnAccentColor(color); - const bdOnAccentSubtle = getBdOnAccentSubtleColor(color); - - return { - bgAccent, - bgAccentHover, - bgAccentSubtle, - bgAccentActive, - bgAccentSubtleActive, - bgAccentSubtleHover, - - fgAccent: color, - fgOnaccent, - - bdAccent: color, - bdOnaccent: bgOnAccent, - bdOnaccentSubtle: bdOnAccentSubtle, - }; -}; diff --git a/app/client/yarn.lock b/app/client/yarn.lock index 44c1b70d50..e4c55d6bdc 100644 --- a/app/client/yarn.lock +++ b/app/client/yarn.lock @@ -2896,17 +2896,12 @@ integrity sha512-AHPmaAx+RYfZz0eYu6Gviiagpmiyw98ySSlQvCUhVGDRtDFe4DBS0x1bSjdF3gqUDYOczB+yYvBTtEylYSdRhg== "@eslint-community/eslint-utils@^4.2.0": - version "4.3.0" - resolved "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.3.0.tgz#a556790523a351b4e47e9d385f47265eaaf9780a" - integrity sha512-v3oplH6FYCULtFuCeqyuTd9D2WKO937Dxdq+GmHOLL72TTRriLxz2VLlNfkZRsvj6PKnOPAtuT6dwrs/pA5DvA== + version "4.4.0" + resolved "https://registry.npmjs.org/@eslint-community/eslint-utils/-/eslint-utils-4.4.0.tgz#a23514e8fb9af1269d5f7788aa556798d61c6b59" + integrity sha512-1/sA4dwrzBAyeUoQ6oxahHKmrZvsnLCg4RfxW3ZFGGmQkSNQPFNLV9CUEFQP1x9EYXHTo5p6xdhZM1Ne9p/AfA== dependencies: eslint-visitor-keys "^3.3.0" -"@eslint-community/regexpp@^4.4.0": - version "4.4.0" - resolved "https://registry.npmjs.org/@eslint-community/regexpp/-/regexpp-4.4.0.tgz#3e61c564fcd6b921cb789838631c5ee44df09403" - integrity sha512-A9983Q0LnDGdLPjxyXQ00sbV+K+O+ko2Dr+CZigbHWtX9pNfxlaBkMR8X1CztI73zuEyEBXTVjx7CE+/VSwDiQ== - "@eslint/eslintrc@^1.2.3": version "1.2.3" resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.3.tgz" @@ -2937,31 +2932,11 @@ minimatch "^3.1.2" strip-json-comments "^3.1.1" -"@eslint/eslintrc@^2.0.1": - version "2.0.1" - resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-2.0.1.tgz#7888fe7ec8f21bc26d646dbd2c11cd776e21192d" - integrity sha512-eFRmABvW2E5Ho6f5fHLqgena46rOj7r7OKHYfLElqcBfGFHHpjBhivyi5+jOEQuSpdc/1phIZJlbC2te+tZNIw== - dependencies: - ajv "^6.12.4" - debug "^4.3.2" - espree "^9.5.0" - globals "^13.19.0" - ignore "^5.2.0" - import-fresh "^3.2.1" - js-yaml "^4.1.0" - minimatch "^3.1.2" - strip-json-comments "^3.1.1" - "@eslint/js@8.35.0": version "8.35.0" resolved "https://registry.yarnpkg.com/@eslint/js/-/js-8.35.0.tgz#b7569632b0b788a0ca0e438235154e45d42813a7" integrity sha512-JXdzbRiWclLVoD8sNUjR443VVlYqiYmDVT6rGUEIEHU5YJW0gaVZwV2xgM7D4arkvASqD0IlLUVjHiFuxaftRw== -"@eslint/js@8.36.0": - version "8.36.0" - resolved "https://registry.npmjs.org/@eslint/js/-/js-8.36.0.tgz#9837f768c03a1e4a30bd304a64fb8844f0e72efe" - integrity sha512-lxJ9R5ygVm8ZWgYdUweoq5ownDlJ4upvoWmO4eLxBYHdMo+vZ/Rx0EN6MbKWDJOSUGrqJy2Gt+Dyv/VKml0fjg== - "@faker-js/faker@^7.4.0": version "7.4.0" resolved "https://registry.yarnpkg.com/@faker-js/faker/-/faker-7.4.0.tgz#cac720d860a89d487b47e55e66a4fd114f1d3fe5" @@ -2992,6 +2967,45 @@ lodash.isundefined "^3.0.1" lodash.uniq "^4.5.0" +"@formatjs/ecma402-abstract@1.14.3": + version "1.14.3" + resolved "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.14.3.tgz#6428f243538a11126180d121ce8d4b2f17465738" + integrity sha512-SlsbRC/RX+/zg4AApWIFNDdkLtFbkq3LNoZWXZCE/nHVKqoIJyaoQyge/I0Y38vLxowUn9KTtXgusLD91+orbg== + dependencies: + "@formatjs/intl-localematcher" "0.2.32" + tslib "^2.4.0" + +"@formatjs/fast-memoize@2.0.0": + version "2.0.0" + resolved "https://registry.npmjs.org/@formatjs/fast-memoize/-/fast-memoize-2.0.0.tgz#e9655d2d2bba87c14b277f5bfc8caf4ba8114223" + integrity sha512-U88W/qhEs5ZuX+Inw/DZHjA6w2YCTWTNzTkprzNznyWoGl8h+XtlOCW3nM78+VX7lSbvpMdnaHmWLnDnjJjuwg== + dependencies: + tslib "^2.4.0" + +"@formatjs/icu-messageformat-parser@2.3.0": + version "2.3.0" + resolved "https://registry.npmjs.org/@formatjs/icu-messageformat-parser/-/icu-messageformat-parser-2.3.0.tgz#8e8fd577c3e39454ef14bba4963f2e1d5f2cc46c" + integrity sha512-xqtlqYAbfJDF4b6e4O828LBNOWXrFcuYadqAbYORlDRwhyJ2bH+xpUBPldZbzRGUN2mxlZ4Ykhm7jvERtmI8NQ== + dependencies: + "@formatjs/ecma402-abstract" "1.14.3" + "@formatjs/icu-skeleton-parser" "1.3.18" + tslib "^2.4.0" + +"@formatjs/icu-skeleton-parser@1.3.18": + version "1.3.18" + resolved "https://registry.npmjs.org/@formatjs/icu-skeleton-parser/-/icu-skeleton-parser-1.3.18.tgz#7aed3d60e718c8ad6b0e64820be44daa1e29eeeb" + integrity sha512-ND1ZkZfmLPcHjAH1sVpkpQxA+QYfOX3py3SjKWMUVGDow18gZ0WPqz3F+pJLYQMpS2LnnQ5zYR2jPVYTbRwMpg== + dependencies: + "@formatjs/ecma402-abstract" "1.14.3" + tslib "^2.4.0" + +"@formatjs/intl-localematcher@0.2.32": + version "0.2.32" + resolved "https://registry.npmjs.org/@formatjs/intl-localematcher/-/intl-localematcher-0.2.32.tgz#00d4d307cd7d514b298e15a11a369b86c8933ec1" + integrity sha512-k/MEBstff4sttohyEpXxCmC3MqbUn9VvHGlZ8fauLzkbwXmVrEeyzS+4uhrvAk9DWU9/7otYWxyDox4nT/KVLQ== + dependencies: + tslib "^2.4.0" + "@fortawesome/fontawesome-common-types@6.3.0": version "6.3.0" resolved "https://registry.yarnpkg.com/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.3.0.tgz#51f734e64511dbc3674cd347044d02f4dd26e86b" @@ -3222,6 +3236,35 @@ resolved "https://registry.npmjs.org/@humanwhocodes/object-schema/-/object-schema-1.2.1.tgz" integrity sha512-ZnQMnLV4e7hDlUvw8H+U8ASL02SS2Gn6+9Ac3wGGLIe7+je2AeAOxPY+izIPJDfFDb7eDjev0Us8MO1iFRN8hA== +"@internationalized/date@^3.1.0": + version "3.1.0" + resolved "https://registry.npmjs.org/@internationalized/date/-/date-3.1.0.tgz#da48aeaa971df6ad410cd32597c174d6cab9a3b4" + integrity sha512-wjeur7K4AecT+YwoBmBXQ/+n5lP69tuZc34hw09s44EozZK7FZHSyfPvRp5/xEb2D6abLboskDY4jG+Nt0TNUQ== + dependencies: + "@swc/helpers" "^0.4.14" + +"@internationalized/message@^3.1.0": + version "3.1.0" + resolved "https://registry.npmjs.org/@internationalized/message/-/message-3.1.0.tgz#b284014cd8bbb430a648b76c87c62bdca968b04c" + integrity sha512-Oo5m70FcBdADf7G8NkUffVSfuCdeAYVfsvNjZDi9ELpjvkc4YNJVTHt/NyTI9K7FgAVoELxiP9YmN0sJ+HNHYQ== + dependencies: + "@swc/helpers" "^0.4.14" + intl-messageformat "^10.1.0" + +"@internationalized/number@^3.2.0": + version "3.2.0" + resolved "https://registry.npmjs.org/@internationalized/number/-/number-3.2.0.tgz#dffb661cacd61a87b814c47b7d5240a286249066" + integrity sha512-GUXkhXSX1Ee2RURnzl+47uvbOxnlMnvP9Er+QePTjDjOPWuunmLKlEkYkEcLiiJp7y4l9QxGDLOlVr8m69LS5w== + dependencies: + "@swc/helpers" "^0.4.14" + +"@internationalized/string@^3.1.0": + version "3.1.0" + resolved "https://registry.npmjs.org/@internationalized/string/-/string-3.1.0.tgz#0b365906a8c3f44800b0db52c2e990cff345abce" + integrity sha512-TJQKiyUb+wyAfKF59UNeZ/kELMnkxyecnyPCnBI1ma4NaXReJW+7Cc2mObXAqraIBJUVv7rgI46RLKrLgi35ng== + dependencies: + "@swc/helpers" "^0.4.14" + "@istanbuljs/load-nyc-config@^1.0.0": version "1.1.0" resolved "https://registry.npmjs.org/@istanbuljs/load-nyc-config/-/load-nyc-config-1.1.0.tgz" @@ -3579,6 +3622,7 @@ version "5.10.1" resolved "https://registry.yarnpkg.com/@mantine/hooks/-/hooks-5.10.1.tgz#0227441a818144932dd6e8fd8f53eb7525dfe005" integrity sha512-Fhl2f5z/F+NVzZgPUPP9tP4NUUMeTBpmlmlo3mPuQztw1kmXdxtBjD1MzRS7A84FuaJNo2wxLhQ+Gnjtf3hZ8A== + "@mdx-js/mdx@^1.6.22": version "1.6.22" resolved "https://registry.yarnpkg.com/@mdx-js/mdx/-/mdx-1.6.22.tgz#8a723157bf90e78f17dc0f27995398e6c731f1ba" @@ -3728,6 +3772,83 @@ version "2.9.2" resolved "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz" +"@react-aria/button@^3.7.0": + version "3.7.0" + resolved "https://registry.npmjs.org/@react-aria/button/-/button-3.7.0.tgz#b00635c8be0e47e19733c96f3702b699f65242b7" + integrity sha512-4DSGXrAWflzT4cQe/x0KdrPzz7hv9vZgqYJuNXQkpmeIMs1EmUKuby2xC+W9GHuZ+8dMxjTWKy3XdwX2tCM42A== + dependencies: + "@react-aria/focus" "^3.11.0" + "@react-aria/interactions" "^3.14.0" + "@react-aria/utils" "^3.15.0" + "@react-stately/toggle" "^3.5.0" + "@react-types/button" "^3.7.1" + "@react-types/shared" "^3.17.0" + "@swc/helpers" "^0.4.14" + +"@react-aria/focus@^3.11.0": + version "3.11.0" + resolved "https://registry.npmjs.org/@react-aria/focus/-/focus-3.11.0.tgz#8124b2341e8d43af72f3da85b08567bda45421b7" + integrity sha512-yPuWs9bAR9CMfIwyOPm2oXLPF19gNkUqW+ozSPhWbLMTEa8Ma09eHW1br4xbN+4ONOm/dCJsIkxTNPUkiLdQoA== + dependencies: + "@react-aria/interactions" "^3.14.0" + "@react-aria/utils" "^3.15.0" + "@react-types/shared" "^3.17.0" + "@swc/helpers" "^0.4.14" + clsx "^1.1.1" + +"@react-aria/i18n@^3.7.0": + version "3.7.0" + resolved "https://registry.npmjs.org/@react-aria/i18n/-/i18n-3.7.0.tgz#c1dfcd7a76a5161cbccbd6980ecf201c9b4d1826" + integrity sha512-PZCWmhO9mJvelwiYlsXLY6W4L2o+oza3xnDx0cZDVqp/Hf+OwMAPHWtZsFRTKdjk4TaOPB/ISc9HknWn6UpY4w== + dependencies: + "@internationalized/date" "^3.1.0" + "@internationalized/message" "^3.1.0" + "@internationalized/number" "^3.2.0" + "@internationalized/string" "^3.1.0" + "@react-aria/ssr" "^3.5.0" + "@react-aria/utils" "^3.15.0" + "@react-types/shared" "^3.17.0" + "@swc/helpers" "^0.4.14" + +"@react-aria/interactions@^3.14.0": + version "3.14.0" + resolved "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.14.0.tgz#d6480985048c009d58b8572428010dc61093cfcc" + integrity sha512-e1Tkr0UTuYFpV21PJrXy7jEY542Vl+C2Fo70oukZ1fN+wtfQkzodsTIzyepXb7kVMGmC34wDisMJUrksVkfY2w== + dependencies: + "@react-aria/utils" "^3.15.0" + "@react-types/shared" "^3.17.0" + "@swc/helpers" "^0.4.14" + +"@react-aria/ssr@^3.5.0": + version "3.5.0" + resolved "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.5.0.tgz#40c1270a75868185f72a88cafe37bd1392f690cb" + integrity sha512-h0MJdSWOd1qObLnJ8mprU31wI8tmKFJMuwT22MpWq6psisOOZaga6Ml4u6Ee6M6duWWISjXvqO4Sb/J0PBA+nQ== + dependencies: + "@swc/helpers" "^0.4.14" + +"@react-aria/utils@^3.15.0": + version "3.15.0" + resolved "https://registry.npmjs.org/@react-aria/utils/-/utils-3.15.0.tgz#a836674dd40ec7f15e9f7a69b1a14f19b1ee42e6" + integrity sha512-aJZBG++iz1UwTW5gXFaHicKju4p0MPhAyBTcf2awHYWeTUUslDjJcEnNg7kjBYZBOrOSlA2rAt7/7C5CCURQPg== + dependencies: + "@react-aria/ssr" "^3.5.0" + "@react-stately/utils" "^3.6.0" + "@react-types/shared" "^3.17.0" + "@swc/helpers" "^0.4.14" + clsx "^1.1.1" + +"@react-spectrum/utils@^3.9.0": + version "3.9.0" + resolved "https://registry.npmjs.org/@react-spectrum/utils/-/utils-3.9.0.tgz#60d782efce26c5ebed53a587177edbbf9e046c1e" + integrity sha512-I1JKwiyLE54mAT7Z2wadVKoai1Q60QFg4XNuYUwk8TwWAEz7DUUHucntHAND6dqFpVIMK1Rk9lcZBft43FF2BQ== + dependencies: + "@react-aria/i18n" "^3.7.0" + "@react-aria/ssr" "^3.5.0" + "@react-aria/utils" "^3.15.0" + "@react-types/shared" "^3.17.0" + "@swc/helpers" "^0.4.14" + clsx "^1.1.1" + "@react-spring/animated@~9.4.0": version "9.4.1" resolved "https://registry.npmjs.org/@react-spring/animated/-/animated-9.4.1.tgz" @@ -3814,6 +3935,42 @@ "@react-spring/shared" "~9.4.0" "@react-spring/types" "~9.4.0" +"@react-stately/toggle@^3.5.0": + version "3.5.0" + resolved "https://registry.npmjs.org/@react-stately/toggle/-/toggle-3.5.0.tgz#fee5a29d7699e43867c52981834af5393f47c1c4" + integrity sha512-vKwLLkFsiIve4pXIQC/dqLAz7Z+qtzJ8+D00EXXO1Nf8YHcyIMDkTmi3NTM8Qtvmt4xX2hbJFiPDF6WvF6mBIg== + dependencies: + "@react-stately/utils" "^3.6.0" + "@react-types/checkbox" "^3.4.2" + "@react-types/shared" "^3.17.0" + "@swc/helpers" "^0.4.14" + +"@react-stately/utils@^3.6.0": + version "3.6.0" + resolved "https://registry.npmjs.org/@react-stately/utils/-/utils-3.6.0.tgz#f273e7fcb348254347d2e88c8f0c45571060c207" + integrity sha512-rptF7iUWDrquaYvBAS4QQhOBQyLBncDeHF03WnHXAxnuPJXNcr9cXJtjJPGCs036ZB8Q2hc9BGG5wNyMkF5v+Q== + dependencies: + "@swc/helpers" "^0.4.14" + +"@react-types/button@^3.7.1": + version "3.7.1" + resolved "https://registry.npmjs.org/@react-types/button/-/button-3.7.1.tgz#a51d2617a593d9862c72306b3bf0c4b5bff4793d" + integrity sha512-c+8xjmqWSjI5/mEHVLbVSp0eh/z2UU8Ga+wqjbEUZUjm8uopYj1PaCAwZ7YgcAebyQrL/21GyjK6tFHKzuUdJQ== + dependencies: + "@react-types/shared" "^3.17.0" + +"@react-types/checkbox@^3.4.2": + version "3.4.2" + resolved "https://registry.npmjs.org/@react-types/checkbox/-/checkbox-3.4.2.tgz#6089e9ef2d023415a5f871e312f30bae54143ba5" + integrity sha512-/NWFCEQLvVgo25afPt2jv4syxYvZeY/D/n2Y92IGtoNV4akdz4AuQ65+1X+JOhQc/ZbAblWw5fFWUZoQs3CLZg== + dependencies: + "@react-types/shared" "^3.17.0" + +"@react-types/shared@^3.17.0": + version "3.17.0" + resolved "https://registry.npmjs.org/@react-types/shared/-/shared-3.17.0.tgz#b7c5e318664aadb315d305a27dd2a209d1837d95" + integrity sha512-1SNZ/RhVrrQ1e6yE0bPV7d5Sfp+Uv0dfUEhwF9MAu2v5msu7AMewnsiojKNA0QA6Ing1gpDLjHCxtayQfuxqcg== + "@redux-saga/core@^1.1.3": version "1.1.3" resolved "https://registry.npmjs.org/@redux-saga/core/-/core-1.1.3.tgz" @@ -4092,7 +4249,7 @@ lodash "^4.17.21" ts-dedent "^2.0.0" -"@storybook/addon-docs@6.5.16", "@storybook/addon-docs@^6.5.16": +"@storybook/addon-docs@6.5.16": version "6.5.16" resolved "https://registry.yarnpkg.com/@storybook/addon-docs/-/addon-docs-6.5.16.tgz#3de912f51fb8e48b9a53b11a5b1cede067acbe70" integrity sha512-QM9WDZG9P02UvbzLu947a8ZngOrQeAKAT8jCibQFM/+RJ39xBlfm8rm+cQy3dm94wgtjmVkA3mKGOV/yrrsddg== @@ -4652,7 +4809,7 @@ "@storybook/csf@^0.0.1": version "0.0.1" - resolved "https://registry.yarnpkg.com/@storybook/csf/-/csf-0.0.1.tgz#95901507dc02f0bc6f9ac8ee1983e2fc5bb98ce6" + resolved "https://registry.npmjs.org/@storybook/csf/-/csf-0.0.1.tgz#95901507dc02f0bc6f9ac8ee1983e2fc5bb98ce6" integrity sha512-USTLkZze5gkel8MYCujSRBVIrUQ3YPBrLOx7GNk/0wttvVtlzWXAq9eLbQ4p/NicGxP+3T7KPEMVV//g+yubpw== dependencies: lodash "^4.17.15" @@ -5200,6 +5357,13 @@ "@svgr/plugin-svgo" "^5.5.0" loader-utils "^2.0.0" +"@swc/helpers@^0.4.14": + version "0.4.14" + resolved "https://registry.npmjs.org/@swc/helpers/-/helpers-0.4.14.tgz#1352ac6d95e3617ccb7c1498ff019654f1e12a74" + integrity sha512-4C7nX/dvpzB7za4Ql9K81xK3HPxCpHMgwTZVyf+9JQ6VUbn9jjZVN7/Nkdz/Ugzs2CSjqnL/UPXroiVBVHUWUw== + dependencies: + tslib "^2.4.0" + "@szmarczak/http-timer@^4.0.5": version "4.0.6" resolved "https://registry.yarnpkg.com/@szmarczak/http-timer/-/http-timer-4.0.6.tgz#b4a914bb62e7c272d4e5989fe4440f812ab1d807" @@ -6092,7 +6256,7 @@ "@types/semver@^7.3.12": version "7.3.13" - resolved "https://registry.yarnpkg.com/@types/semver/-/semver-7.3.13.tgz#da4bfd73f49bd541d28920ab0e2bf0ee80f71c91" + resolved "https://registry.npmjs.org/@types/semver/-/semver-7.3.13.tgz#da4bfd73f49bd541d28920ab0e2bf0ee80f71c91" integrity sha512-21cFJr9z3g5dW8B0CVI9g2O9beqaThGQ6ZFBqHfwhzLDKUxaqTIy3vnfah/UPkfOiF2pLq+tGz+W8RyCskuslw== "@types/serve-index@^1.9.1": @@ -6333,13 +6497,13 @@ "@typescript-eslint/types" "5.25.0" "@typescript-eslint/visitor-keys" "5.25.0" -"@typescript-eslint/scope-manager@5.54.0": - version "5.54.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/scope-manager/-/scope-manager-5.54.0.tgz#74b28ac9a3fc8166f04e806c957adb8c1fd00536" - integrity sha512-VTPYNZ7vaWtYna9M4oD42zENOBrb+ZYyCNdFs949GcN8Miwn37b8b7eMj+EZaq7VK9fx0Jd+JhmkhjFhvnovhg== +"@typescript-eslint/scope-manager@5.57.0": + version "5.57.0" + resolved "https://registry.npmjs.org/@typescript-eslint/scope-manager/-/scope-manager-5.57.0.tgz#79ccd3fa7bde0758059172d44239e871e087ea36" + integrity sha512-NANBNOQvllPlizl9LatX8+MHi7bx7WGIWYjPHDmQe5Si/0YEYfxSljJpoTyTWFTgRy3X8gLYSE4xQ2U+aCozSw== dependencies: - "@typescript-eslint/types" "5.54.0" - "@typescript-eslint/visitor-keys" "5.54.0" + "@typescript-eslint/types" "5.57.0" + "@typescript-eslint/visitor-keys" "5.57.0" "@typescript-eslint/type-utils@5.25.0": version "5.25.0" @@ -6355,10 +6519,10 @@ resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.25.0.tgz" integrity sha512-7fWqfxr0KNHj75PFqlGX24gWjdV/FDBABXL5dyvBOWHpACGyveok8Uj4ipPX/1fGU63fBkzSIycEje4XsOxUFA== -"@typescript-eslint/types@5.54.0": - version "5.54.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/types/-/types-5.54.0.tgz#7d519df01f50739254d89378e0dcac504cab2740" - integrity sha512-nExy+fDCBEgqblasfeE3aQ3NuafBUxZxgxXcYfzYRZFHdVvk5q60KhCSkG0noHgHRo/xQ/BOzURLZAafFpTkmQ== +"@typescript-eslint/types@5.57.0": + version "5.57.0" + resolved "https://registry.npmjs.org/@typescript-eslint/types/-/types-5.57.0.tgz#727bfa2b64c73a4376264379cf1f447998eaa132" + integrity sha512-mxsod+aZRSyLT+jiqHw1KK6xrANm19/+VFALVFP5qa/aiJnlP38qpyaTd0fEKhWvQk6YeNZ5LGwI1pDpBRBhtQ== "@typescript-eslint/typescript-estree@5.25.0": version "5.25.0" @@ -6373,13 +6537,13 @@ semver "^7.3.7" tsutils "^3.21.0" -"@typescript-eslint/typescript-estree@5.54.0": - version "5.54.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/typescript-estree/-/typescript-estree-5.54.0.tgz#f6f3440cabee8a43a0b25fa498213ebb61fdfe99" - integrity sha512-X2rJG97Wj/VRo5YxJ8Qx26Zqf0RRKsVHd4sav8NElhbZzhpBI8jU54i6hfo9eheumj4oO4dcRN1B/zIVEqR/MQ== +"@typescript-eslint/typescript-estree@5.57.0": + version "5.57.0" + resolved "https://registry.npmjs.org/@typescript-eslint/typescript-estree/-/typescript-estree-5.57.0.tgz#ebcd0ee3e1d6230e888d88cddf654252d41e2e40" + integrity sha512-LTzQ23TV82KpO8HPnWuxM2V7ieXW8O142I7hQTxWIHDcCEIjtkat6H96PFkYBQqGFLW/G/eVVOB9Z8rcvdY/Vw== dependencies: - "@typescript-eslint/types" "5.54.0" - "@typescript-eslint/visitor-keys" "5.54.0" + "@typescript-eslint/types" "5.57.0" + "@typescript-eslint/visitor-keys" "5.57.0" debug "^4.3.4" globby "^11.1.0" is-glob "^4.0.3" @@ -6399,17 +6563,17 @@ eslint-utils "^3.0.0" "@typescript-eslint/utils@^5.45.0": - version "5.54.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/utils/-/utils-5.54.0.tgz#3db758aae078be7b54b8ea8ea4537ff6cd3fbc21" - integrity sha512-cuwm8D/Z/7AuyAeJ+T0r4WZmlnlxQ8wt7C7fLpFlKMR+dY6QO79Cq1WpJhvZbMA4ZeZGHiRWnht7ZJ8qkdAunw== + version "5.57.0" + resolved "https://registry.npmjs.org/@typescript-eslint/utils/-/utils-5.57.0.tgz#eab8f6563a2ac31f60f3e7024b91bf75f43ecef6" + integrity sha512-ps/4WohXV7C+LTSgAL5CApxvxbMkl9B9AUZRtnEFonpIxZDIT7wC1xfvuJONMidrkB9scs4zhtRyIwHh4+18kw== dependencies: + "@eslint-community/eslint-utils" "^4.2.0" "@types/json-schema" "^7.0.9" "@types/semver" "^7.3.12" - "@typescript-eslint/scope-manager" "5.54.0" - "@typescript-eslint/types" "5.54.0" - "@typescript-eslint/typescript-estree" "5.54.0" + "@typescript-eslint/scope-manager" "5.57.0" + "@typescript-eslint/types" "5.57.0" + "@typescript-eslint/typescript-estree" "5.57.0" eslint-scope "^5.1.1" - eslint-utils "^3.0.0" semver "^7.3.7" "@typescript-eslint/visitor-keys@5.25.0": @@ -6420,12 +6584,12 @@ "@typescript-eslint/types" "5.25.0" eslint-visitor-keys "^3.3.0" -"@typescript-eslint/visitor-keys@5.54.0": - version "5.54.0" - resolved "https://registry.yarnpkg.com/@typescript-eslint/visitor-keys/-/visitor-keys-5.54.0.tgz#846878afbf0cd67c19cfa8d75947383d4490db8f" - integrity sha512-xu4wT7aRCakGINTLGeyGqDn+78BwFlggwBjnHa1ar/KaGagnmwLYmlrXIrgAaQ3AE1Vd6nLfKASm7LrFHNbKGA== +"@typescript-eslint/visitor-keys@5.57.0": + version "5.57.0" + resolved "https://registry.npmjs.org/@typescript-eslint/visitor-keys/-/visitor-keys-5.57.0.tgz#e2b2f4174aff1d15eef887ce3d019ecc2d7a8ac1" + integrity sha512-ery2g3k0hv5BLiKpPuwYt9KBkAp2ugT6VvyShXdLOkax895EC55sP0Tx5L0fZaQueiK3fBLvHVvEl3jFS5ia+g== dependencies: - "@typescript-eslint/types" "5.54.0" + "@typescript-eslint/types" "5.57.0" eslint-visitor-keys "^3.3.0" "@ungap/promise-all-settled@1.1.2": @@ -8377,6 +8541,11 @@ class-utils@^0.3.5: isobject "^3.0.0" static-extend "^0.1.1" +classnames@*: + version "2.3.2" + resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz#351d813bf0137fcc6a76a16b88208d2560a0d924" + integrity sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw== + classnames@2.x, classnames@^2.3.1: version "2.3.1" resolved "https://registry.npmjs.org/classnames/-/classnames-2.3.1.tgz" @@ -8514,6 +8683,11 @@ clsx@^1.0.4, clsx@^1.1.0: version "1.1.1" resolved "https://registry.npmjs.org/clsx/-/clsx-1.1.1.tgz" +clsx@^1.1.1: + version "1.2.1" + resolved "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz#0ddc4a20a549b59c93a4116bb26f5294ca17dc12" + integrity sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg== + co@^4.6.0: version "4.6.0" resolved "https://registry.npmjs.org/co/-/co-4.6.0.tgz" @@ -10500,7 +10674,7 @@ eslint-plugin-sort-destructure-keys@^1.3.5: eslint-plugin-storybook@^0.6.10: version "0.6.11" - resolved "https://registry.yarnpkg.com/eslint-plugin-storybook/-/eslint-plugin-storybook-0.6.11.tgz#3c52fc3e994d1539d8a69c4028999402601eaacb" + resolved "https://registry.npmjs.org/eslint-plugin-storybook/-/eslint-plugin-storybook-0.6.11.tgz#3c52fc3e994d1539d8a69c4028999402601eaacb" integrity sha512-lIVmCqQgA0bhcuS1yWYBFrnPHBKPEQI+LHPDtlN81UE1/17onCqgwUW7Nyt7gS2OHjCAiOR4npjTGEoe0hssKw== dependencies: "@storybook/csf" "^0.0.1" @@ -10562,52 +10736,6 @@ eslint-webpack-plugin@^3.1.1: normalize-path "^3.0.0" schema-utils "^3.1.1" -eslint@*: - version "8.36.0" - resolved "https://registry.npmjs.org/eslint/-/eslint-8.36.0.tgz#1bd72202200a5492f91803b113fb8a83b11285cf" - integrity sha512-Y956lmS7vDqomxlaaQAHVmeb4tNMp2FWIvU/RnU5BD3IKMD/MJPr76xdyr68P8tV1iNMvN2mRK0yy3c+UjL+bw== - dependencies: - "@eslint-community/eslint-utils" "^4.2.0" - "@eslint-community/regexpp" "^4.4.0" - "@eslint/eslintrc" "^2.0.1" - "@eslint/js" "8.36.0" - "@humanwhocodes/config-array" "^0.11.8" - "@humanwhocodes/module-importer" "^1.0.1" - "@nodelib/fs.walk" "^1.2.8" - ajv "^6.10.0" - chalk "^4.0.0" - cross-spawn "^7.0.2" - debug "^4.3.2" - doctrine "^3.0.0" - escape-string-regexp "^4.0.0" - eslint-scope "^7.1.1" - eslint-visitor-keys "^3.3.0" - espree "^9.5.0" - esquery "^1.4.2" - esutils "^2.0.2" - fast-deep-equal "^3.1.3" - file-entry-cache "^6.0.1" - find-up "^5.0.0" - glob-parent "^6.0.2" - globals "^13.19.0" - grapheme-splitter "^1.0.4" - ignore "^5.2.0" - import-fresh "^3.0.0" - imurmurhash "^0.1.4" - is-glob "^4.0.0" - is-path-inside "^3.0.3" - js-sdsl "^4.1.4" - js-yaml "^4.1.0" - json-stable-stringify-without-jsonify "^1.0.1" - levn "^0.4.1" - lodash.merge "^4.6.2" - minimatch "^3.1.2" - natural-compare "^1.4.0" - optionator "^0.9.1" - strip-ansi "^6.0.1" - strip-json-comments "^3.1.0" - text-table "^0.2.0" - eslint@^8.3.0: version "8.15.0" resolved "https://registry.npmjs.org/eslint/-/eslint-8.15.0.tgz" @@ -10713,15 +10841,6 @@ espree@^9.4.0: acorn-jsx "^5.3.2" eslint-visitor-keys "^3.3.0" -espree@^9.5.0: - version "9.5.0" - resolved "https://registry.npmjs.org/espree/-/espree-9.5.0.tgz#3646d4e3f58907464edba852fa047e6a27bdf113" - integrity sha512-JPbJGhKc47++oo4JkEoTe2wjy4fmMwvFpgJT9cQzmfXKp22Dr6Hf1tdCteLz1h0P3t+mGvWZ+4Uankvh8+c6zw== - dependencies: - acorn "^8.8.0" - acorn-jsx "^5.3.2" - eslint-visitor-keys "^3.3.0" - esprima@^4.0.0, esprima@^4.0.1: version "4.0.1" resolved "https://registry.npmjs.org/esprima/-/esprima-4.0.1.tgz" @@ -12748,6 +12867,16 @@ interweave@^12.7.2: dependencies: escape-html "^1.0.3" +intl-messageformat@^10.1.0: + version "10.3.2" + resolved "https://registry.npmjs.org/intl-messageformat/-/intl-messageformat-10.3.2.tgz#39b6929bbb41e47b122b24a87dca95efe2cbf8c3" + integrity sha512-kGY1KrpxPGbWX/yz6rpWQahBh5bJC6pIbq/cTzVYlmAYjRVzP+l2MulagbZf/5mABbcLT/0RJbZC46Iw6Mhmtw== + dependencies: + "@formatjs/ecma402-abstract" "1.14.3" + "@formatjs/fast-memoize" "2.0.0" + "@formatjs/icu-messageformat-parser" "2.3.0" + tslib "^2.4.0" + invariant@^2.2.4: version "2.2.4" resolved "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz" @@ -17115,11 +17244,6 @@ prettier-linter-helpers@^1.0.0: dependencies: fast-diff "^1.1.2" -prettier@*, prettier@^2.8.6: - version "2.8.6" - resolved "https://registry.npmjs.org/prettier/-/prettier-2.8.6.tgz#5c174b29befd507f14b83e3c19f83fdc0e974b71" - integrity sha512-mtuzdiBbHwPEgl7NxWlqOkithPyp4VN93V7VeHVWBF+ad3I5avc0RVDT4oImXQy9H/AqxA2NSQH8pSxHW6FYbQ== - "prettier@>=2.2.1 <=2.3.0": version "2.3.0" resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.3.0.tgz#b6a5bf1284026ae640f17f7ff5658a7567fc0d18" @@ -17130,6 +17254,11 @@ prettier@^2.6.2: resolved "https://registry.yarnpkg.com/prettier/-/prettier-2.7.1.tgz#e235806850d057f97bb08368a4f7d899f7760c64" integrity sha512-ujppO+MkdPqoVINuDFDRLClm7D78qbDt0/NR+wp5FqEZOoTNAjPHWj17QRhu7geIHJfcNhRk1XVQmF8Bp3ye+g== +prettier@^2.8.6: + version "2.8.6" + resolved "https://registry.npmjs.org/prettier/-/prettier-2.8.6.tgz#5c174b29befd507f14b83e3c19f83fdc0e974b71" + integrity sha512-mtuzdiBbHwPEgl7NxWlqOkithPyp4VN93V7VeHVWBF+ad3I5avc0RVDT4oImXQy9H/AqxA2NSQH8pSxHW6FYbQ== + pretty-bytes@^5.3.0: version "5.4.1" resolved "https://registry.npmjs.org/pretty-bytes/-/pretty-bytes-5.4.1.tgz" @@ -17718,7 +17847,7 @@ react-dnd@^9.3.4: hoist-non-react-statics "^3.3.0" shallowequal "^1.1.0" -react-docgen-typescript@^2.1.1: +react-docgen-typescript@^2.1.1, react-docgen-typescript@^2.2.2: version "2.2.2" resolved "https://registry.yarnpkg.com/react-docgen-typescript/-/react-docgen-typescript-2.2.2.tgz#4611055e569edc071204aadb20e1c93e1ab1659c" integrity sha512-tvg2ZtOpOi6QDwsb3GZhOjDkkX0h8Z2gipvTg6OVMUyoYoURhEiRNePT8NZItTVCDh39JJHnLdfCOkzoLbFnTg== @@ -17744,6 +17873,14 @@ react-documents@^1.0.4: resolved "https://registry.npmjs.org/react-documents/-/react-documents-1.0.4.tgz" integrity sha512-EpoY+MZEu3hPffIWA4FadUYu8daubNkr+LK2zuoPkCAVtyNY+z+/RuzzTriuhjcDydKXzgzp42kQTfAD2j3Mxw== +react-dom@*: + version "18.2.0" + resolved "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz#22aaf38708db2674ed9ada224ca4aa708d821e3d" + integrity sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g== + dependencies: + loose-envify "^1.1.0" + scheduler "^0.23.0" + react-dom@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react-dom/-/react-dom-17.0.2.tgz#ecffb6845e3ad8dbfcdc498f0d0a939736502c23" @@ -18242,6 +18379,13 @@ react-zoom-pan-pinch@^1.6.1: version "1.6.1" resolved "https://registry.npmjs.org/react-zoom-pan-pinch/-/react-zoom-pan-pinch-1.6.1.tgz" +react@*: + version "18.2.0" + resolved "https://registry.npmjs.org/react/-/react-18.2.0.tgz#555bd98592883255fa00de14f1151a917b5d77d5" + integrity sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ== + dependencies: + loose-envify "^1.1.0" + react@^17.0.2: version "17.0.2" resolved "https://registry.yarnpkg.com/react/-/react-17.0.2.tgz#d0b5cc516d29eb3eee383f75b62864cfb6800037" @@ -18742,7 +18886,7 @@ require-main-filename@^2.0.0: requireindex@^1.1.0: version "1.2.0" - resolved "https://registry.yarnpkg.com/requireindex/-/requireindex-1.2.0.tgz#3463cdb22ee151902635aa6c9535d4de9c2ef1ef" + resolved "https://registry.npmjs.org/requireindex/-/requireindex-1.2.0.tgz#3463cdb22ee151902635aa6c9535d4de9c2ef1ef" integrity sha512-L9jEkOi3ASd9PYit2cwRfyppc9NoABujTP8/5gFcbERmo5jUoAKovIC3fsF17pkTnGsrByysqX+Kxd2OTNI1ww== requires-port@^1.0.0: @@ -19061,6 +19205,13 @@ scheduler@^0.20.2: loose-envify "^1.1.0" object-assign "^4.1.1" +scheduler@^0.23.0: + version "0.23.0" + resolved "https://registry.npmjs.org/scheduler/-/scheduler-0.23.0.tgz#ba8041afc3d30eb206a487b6b384002e4e61fdfe" + integrity sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw== + dependencies: + loose-envify "^1.1.0" + schema-utils@2.7.0: version "2.7.0" resolved "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.0.tgz" @@ -20681,7 +20832,7 @@ tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3: version "1.14.1" resolved "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz" -tslib@^2.0.0, tslib@^2.0.1: +tslib@^2.0.0, tslib@^2.0.1, tslib@^2.4.0: version "2.5.0" resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.5.0.tgz#42bfed86f5787aeb41d031866c8f402429e0fddf" integrity sha512-336iVw3rtn2BUK7ORdIAHTyxHGRIHVReokCR3XjbckJMK7ms8FysBfhLR8IXnAgy7T0PTPNBWKiH514FOW/WSg== diff --git a/app/yarn.lock b/yarn.lock similarity index 100% rename from app/yarn.lock rename to yarn.lock