From 31259e0b1224d4a341a6fee45a066c926c76f71a Mon Sep 17 00:00:00 2001 From: Anil Anar Date: Sun, 18 Aug 2024 01:16:47 +0200 Subject: [PATCH] web components --- .changeset/calm-readers-wave.md | 5 + .changeset/cuddly-pears-jam.md | 5 + .changeset/fuzzy-trees-glow.md | 5 + .changeset/hungry-terms-cheer.md | 5 + .changeset/light-trees-cheer.md | 5 + .changeset/pre.json | 21 ++ package.json | 6 +- packages/chakra-ui/package.json | 6 +- packages/chakra-ui/src/Box.tsx | 50 ++-- packages/chakra-ui/src/Flex.tsx | 169 ++++--------- packages/chakra-ui/src/List.tsx | 10 +- packages/chakra-ui/src/Scrollable.tsx | 55 ++--- packages/chakra-ui/src/index.ts | 56 +++++ packages/chakra-ui/src/reactify.ts | 55 +++++ packages/core/package.json | 3 +- packages/core/src/types.ts | 39 +-- packages/dev/base.json | 2 +- packages/dev/bin.mjs | 5 + packages/dev/package.json | 1 + packages/storybook-chakra-ui/.eslintrc.js | 4 + packages/storybook-chakra-ui/package.json | 4 +- .../storybook-chakra-ui/src/Box.stories.tsx | 24 +- .../src/ComplexCases.stories.tsx | 2 +- .../storybook-chakra-ui/src/Flex.stories.tsx | 29 ++- .../src/Scrollable.stories.tsx | 15 +- .../src/animatable-demo.tsx | 2 +- packages/storybook-web/package.json | 4 +- packages/storybook-web/src/Example.stories.ts | 42 ++++ packages/storybook-web/src/Flex.stories.ts | 31 ++- .../storybook-web/src/Scrollable.stories.tsx | 73 ++++++ packages/web/package.json | 1 + packages/web/src/Box.ts | 78 +++--- packages/web/src/Flex.ts | 232 ++++++++++++------ packages/web/src/FlexItem.ts | 114 ++++----- packages/web/src/index.ts | 6 +- packages/web/tsconfig.json | 17 +- pnpm-lock.yaml | 169 ++++++++++++- turbo.json | 3 + 38 files changed, 899 insertions(+), 454 deletions(-) create mode 100644 .changeset/calm-readers-wave.md create mode 100644 .changeset/cuddly-pears-jam.md create mode 100644 .changeset/fuzzy-trees-glow.md create mode 100644 .changeset/hungry-terms-cheer.md create mode 100644 .changeset/light-trees-cheer.md create mode 100644 .changeset/pre.json create mode 100644 packages/chakra-ui/src/reactify.ts create mode 100644 packages/storybook-chakra-ui/.eslintrc.js create mode 100644 packages/storybook-web/src/Example.stories.ts create mode 100644 packages/storybook-web/src/Scrollable.stories.tsx diff --git a/.changeset/calm-readers-wave.md b/.changeset/calm-readers-wave.md new file mode 100644 index 0000000..ef64fb6 --- /dev/null +++ b/.changeset/calm-readers-wave.md @@ -0,0 +1,5 @@ +--- +"@moblin/web": patch +--- + +fix extended inheritance diff --git a/.changeset/cuddly-pears-jam.md b/.changeset/cuddly-pears-jam.md new file mode 100644 index 0000000..b0147b0 --- /dev/null +++ b/.changeset/cuddly-pears-jam.md @@ -0,0 +1,5 @@ +--- +"@moblin/web": patch +--- + +try fix cases that potentially broke due to lack of intermediate root el in flex diff --git a/.changeset/fuzzy-trees-glow.md b/.changeset/fuzzy-trees-glow.md new file mode 100644 index 0000000..9115023 --- /dev/null +++ b/.changeset/fuzzy-trees-glow.md @@ -0,0 +1,5 @@ +--- +"@moblin/web": patch +--- + +try extended style inheritance by applying all: inherit to slot elements diff --git a/.changeset/hungry-terms-cheer.md b/.changeset/hungry-terms-cheer.md new file mode 100644 index 0000000..2785f39 --- /dev/null +++ b/.changeset/hungry-terms-cheer.md @@ -0,0 +1,5 @@ +--- +"@moblin/web": patch +--- + +fix flex by reintroducing intermediate flex root el to normalize flex usages diff --git a/.changeset/light-trees-cheer.md b/.changeset/light-trees-cheer.md new file mode 100644 index 0000000..49088fc --- /dev/null +++ b/.changeset/light-trees-cheer.md @@ -0,0 +1,5 @@ +--- +"@moblin/core": patch +--- + +fix pkg.json diff --git a/.changeset/pre.json b/.changeset/pre.json new file mode 100644 index 0000000..904110c --- /dev/null +++ b/.changeset/pre.json @@ -0,0 +1,21 @@ +{ + "mode": "pre", + "tag": "next", + "initialVersions": { + "@moblin/chakra-ui": "2.0.0", + "@moblin/core": "0.0.1", + "@moblin/storybook-chakra-ui": "1.0.0", + "@moblin/storybook-web": "1.0.0", + "@moblin/web": "0.0.1", + "@moblin/dev": "1.0.0" + }, + "changesets": [ + "calm-readers-wave", + "cuddly-pears-jam", + "fuzzy-trees-glow", + "hungry-terms-cheer", + "light-trees-cheer", + "loud-bugs-decide", + "loud-chairs-talk" + ] +} diff --git a/package.json b/package.json index ddd2922..07d2291 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,11 @@ "name": "moblin", "scripts": { "version": "changeset version", - "release": "turbo build && changeset publish" + "release": "turbo build && changeset publish", + "build": "turbo run build", + "lint": "turbo run lint", + "dev": "turbo run dev", + "build-storybook": "turbo run build-storybook" }, "dependencies": { "@changesets/cli": "^2.25.2", diff --git a/packages/chakra-ui/package.json b/packages/chakra-ui/package.json index 294d0d7..6eed29e 100644 --- a/packages/chakra-ui/package.json +++ b/packages/chakra-ui/package.json @@ -10,16 +10,18 @@ "files": [ "dist" ], - "sideEffects": false, + "sideEffects": true, "publishConfig": { "access": "public" }, "scripts": { + "dev": "../dev/bin.mjs dev", "build": "../dev/bin.mjs build", "lint": "../dev/bin.mjs lint" }, "dependencies": { - "@moblin/core": "workspace:*" + "@moblin/core": "workspace:*", + "@moblin/web": "workspace:*" }, "devDependencies": { "@chakra-ui/react": "^2.8.2", diff --git a/packages/chakra-ui/src/Box.tsx b/packages/chakra-ui/src/Box.tsx index cb42880..e80e0c1 100644 --- a/packages/chakra-ui/src/Box.tsx +++ b/packages/chakra-ui/src/Box.tsx @@ -1,46 +1,24 @@ -import { forwardRef } from "@chakra-ui/system"; -import { __DEV__, ContentPosition } from "@moblin/core"; +import { chakra, ChakraComponent } from "@chakra-ui/system"; +import { __DEV__, AlignItems } from "@moblin/core"; +import { Box as BoxElement } from "@moblin/web"; -import { Flex, FlexItem } from "./Flex"; import { ContainerProps } from "./props"; +import { WithClassName } from "./react"; +import { reactify } from "./reactify"; + +export { BoxElement }; export interface BoxOptions { - valign?: ContentPosition; - halign?: ContentPosition; + valign?: AlignItems; + halign?: AlignItems; } -export interface BoxProps extends BoxOptions, ContainerProps<"div"> { - overflowAnchor?: "auto" | "none"; -} +export interface BoxProps + extends Omit, "class">, + WithClassName {} -export const Box = forwardRef( - ( - { - children, - halign = "stretch", - valign = "stretch", - overflowAnchor, - __css, - ...props - }, - ref - ) => { - return ( - - {children} - - ); - } +export const Box: ChakraComponent<"x-box", BoxProps> = chakra( + reactify("x-box", []) ); if (__DEV__) { diff --git a/packages/chakra-ui/src/Flex.tsx b/packages/chakra-ui/src/Flex.tsx index 7fb1d41..a8aa355 100644 --- a/packages/chakra-ui/src/Flex.tsx +++ b/packages/chakra-ui/src/Flex.tsx @@ -1,78 +1,50 @@ -import { chakra, forwardRef, SystemProps } from "@chakra-ui/system"; +import { + shouldForwardProp, + styled, + SystemProps, + useToken, +} from "@chakra-ui/system"; import { __DEV__, AlignContent, AlignItems, AlignSelf, - FlexDirection, - isHorizontal, - isVertical, JustifyContent, unsafeCoerce, } from "@moblin/core"; +import { Flex as FlexElement, FlexItem as FlexItemElement } from "@moblin/web"; +import { forwardRef } from "react"; + +import { ContainerProps } from "./props"; +import { WithChildren, WithClassName } from "./react"; +import { reactify } from "./reactify"; -import { ContainerProps, SafeFlexItemProps } from "./props"; -import { WithChildren } from "./react"; +export { FlexElement, FlexItemElement }; export interface FlexItemProps extends WithChildren, SafeFlexItemProps { alignSelf?: AlignSelf; grow?: number; shrink?: number; basis?: SystemProps["flexBasis"]; - overflowAnchor?: "auto" | "none"; } -export const FlexItem = ({ - alignSelf, - grow, - shrink = 1, - basis = "auto", - children, - overflowAnchor, - ...props -}: FlexItemProps) => { - return ( - 0 ? "var(--pcss-flex-child-shrink-width)" : "auto"} - minH={shrink > 0 ? "var(--pcss-flex-child-shrink-height)" : "auto"} - __css={{ - "& > *": { - flexGrow: - alignSelf === "stretch" - ? 1 - : alignSelf !== undefined - ? 0 - : unsafeCoerce("var(--pcss-flex-grandchild-grow)"), - flexShrink: 1, - flexBasis: "auto", - minWidth: "var(--pcss-flex-grandchild-shrink-width)", - minHeight: "var(--pcss-flex-grandchild-shrink-height)", - }, - overflowAnchor, - }} - {...props} - > - {children} - - ); -}; +export const FlexItemRaw = reactify("x-flex-item", [ + ["alignSelf", "align-self"], +]); + +export const FlexItem = forwardRef( + ({ basis, ...props }, ref) => { + const basisToken = useToken("space", unsafeCoerce(basis)); + return ; + } +); if (__DEV__) { FlexItem.displayName = "FlexItem"; } export interface FlexOptions { - direction: FlexDirection; + direction?: "row" | "column"; gap?: SystemProps["margin"]; gapX?: SystemProps["margin"]; gapY?: SystemProps["margin"]; @@ -80,85 +52,50 @@ export interface FlexOptions { alignItems?: AlignItems; alignContent?: AlignContent; wrap?: boolean | "reverse"; - overflowAnchor?: "auto" | "none"; } +// +export interface FlexProps + extends FlexOptions, + Omit, "class">, + WithClassName {} -export interface FlexProps extends FlexOptions, ContainerProps<"div"> {} +const FlexRaw = styled(reactify("x-flex"), { + shouldForwardProp: (prop) => prop === "gap" || shouldForwardProp(prop), +}); -export const Flex = forwardRef( +export const Flex = forwardRef( ( { - children, direction, - gap = 0, + gap, gapX = gap, gapY = gap, - alignItems = "stretch", - justifyContent = "flex-start", - alignContent = "flex-start", - wrap = false, - overflowAnchor, - __css, + justifyContent, + alignItems, + alignContent, + wrap, + className, ...props }, ref ) => { + const [gapXToken, gapYToken] = useToken( + "space", + unsafeCoerce([gapX, gapY]) + ); + return ( - - - {children} - - + /> ); } ); diff --git a/packages/chakra-ui/src/List.tsx b/packages/chakra-ui/src/List.tsx index a5ba20e..7c7dcbb 100644 --- a/packages/chakra-ui/src/List.tsx +++ b/packages/chakra-ui/src/List.tsx @@ -1,13 +1,13 @@ -import { forwardRef, SystemProps } from "@chakra-ui/system"; +import { forwardRef } from "@chakra-ui/system"; import { __DEV__ } from "@moblin/core"; -import { Children, isValidElement } from "react"; +import { Children, ComponentProps, isValidElement } from "react"; -import { Flex, FlexItem, FlexProps } from "./Flex"; +import { Flex, FlexItem } from "./Flex"; -export interface ListProps extends FlexProps { +export interface ListProps extends ComponentProps { grow?: number; shrink?: number; - basis?: SystemProps["flexBasis"]; + basis?: string; } /** diff --git a/packages/chakra-ui/src/Scrollable.tsx b/packages/chakra-ui/src/Scrollable.tsx index 310734b..35f28e6 100644 --- a/packages/chakra-ui/src/Scrollable.tsx +++ b/packages/chakra-ui/src/Scrollable.tsx @@ -2,10 +2,7 @@ import { useTheme } from "@chakra-ui/react"; import { chakra, forwardRef } from "@chakra-ui/system"; import { __DEV__, - ContentPosition, - FlexDirection, - isHorizontal, - isVertical, + JustifyContent, MoblinTheme, unsafeCoerce, } from "@moblin/core"; @@ -13,9 +10,8 @@ import { import { ContainerProps } from "./props"; export interface ScrollableOptions { - direction?: FlexDirection; - justifyContent?: ContentPosition; - overflowAnchor?: "auto" | "none"; + direction?: "row" | "column"; + justifyContent?: JustifyContent; } export interface ScrollableProps @@ -23,16 +19,7 @@ export interface ScrollableProps ContainerProps<"div"> {} export const Scrollable = forwardRef( - ( - { - direction = "column", - justifyContent = "flex-start", - overflowAnchor, - __css, - ...props - }, - ref - ) => { + ({ direction = "column", justifyContent = "flex-start", ...props }, ref) => { const theme: MoblinTheme = unsafeCoerce(useTheme()); const scrollMode = theme.moblin?.Scrollable?.overflowType === "overlay" ? "overlay" : "auto"; @@ -42,18 +29,13 @@ export const Scrollable = forwardRef( {...props} ref={ref} display="flex" - overflowX={ - isHorizontal(direction) ? unsafeCoerce(scrollMode) : "hidden" - } - overflowY={isVertical(direction) ? unsafeCoerce(scrollMode) : "hidden"} + overflowX={direction === "row" ? unsafeCoerce(scrollMode) : "hidden"} + overflowY={direction === "column" ? unsafeCoerce(scrollMode) : "hidden"} flexDirection={direction} alignItems="stretch" - __css={{ - ...__css, - overflowAnchor, - // ignore __css['& > *'] on purpose. + sx={{ "& > *": { - flex: justifyContent === "stretch" ? "1 0 auto" : "0 0 auto", + flex: "0 0 auto", [marginStartProp(direction)]: marginStart(justifyContent), [marginEndProp(direction)]: marginEnd(justifyContent), }, @@ -67,18 +49,13 @@ if (__DEV__) { Scrollable.displayName = "Scrollable"; } -const marginStartProp = (direction: FlexDirection) => { - return isHorizontal(direction) ? "marginInlineStart" : "marginBlockStart"; -}; +const marginStartProp = (direction: "row" | "column") => + direction === "row" ? "marginLeft" : "marginTop"; +const marginEndProp = (direction: "row" | "column") => + direction === "row" ? "marginRight" : "marginBottom"; -const marginEndProp = (direction: FlexDirection) => { - return isHorizontal(direction) ? "marginInlineEnd" : "marginBlockEnd"; -}; +const marginStart = (justifyContent: JustifyContent) => + justifyContent === "flex-start" ? "0" : "auto"; -const marginStart = (justifyContent: ContentPosition) => - justifyContent === "stretch" || justifyContent === "flex-start" - ? "0" - : "auto"; - -const marginEnd = (justifyContent: ContentPosition) => - justifyContent === "stretch" || justifyContent === "flex-end" ? "0" : "auto"; +const marginEnd = (justifyContent: JustifyContent) => + justifyContent === "flex-end" ? "0" : "auto"; diff --git a/packages/chakra-ui/src/index.ts b/packages/chakra-ui/src/index.ts index 497aa7b..3c3e0b4 100644 --- a/packages/chakra-ui/src/index.ts +++ b/packages/chakra-ui/src/index.ts @@ -1,3 +1,50 @@ +import { + AlignContent, + AlignItems, + AlignSelf, + JustifyContent, +} from "@moblin/core"; +import { Box, Flex, FlexItem } from "@moblin/web"; + +declare global { + namespace JSX { + interface IntrinsicElements { + ["x-box"]: Omit< + React.DetailedHTMLProps, Box>, + "className" + > & { + class?: string; + valign?: AlignItems; + halign?: AlignItems; + }; + ["x-flex"]: Omit< + React.DetailedHTMLProps, Flex>, + "className" + > & { + class?: string; + direction?: "row" | "column"; + gap?: string; + "row-gap"?: string; + "column-gap"?: string; + "justify-content"?: JustifyContent; + "align-items"?: AlignItems; + "align-content"?: AlignContent; + wrap?: boolean | "reverse"; + }; + ["x-flex-item"]: Omit< + React.DetailedHTMLProps, FlexItem>, + "className" + > & { + class?: string; + "align-self"?: AlignSelf; + grow?: number; + shrink?: number; + basis?: string; + }; + } + } +} + export * from "./Block"; export * from "./Box"; export * from "./Flex"; @@ -5,3 +52,12 @@ export * from "./List"; export * from "./react"; export * from "./Scrollable"; export * from "./Text"; +export type { + AlignContent, + AlignItems, + AlignSelf, + ContentDistribution, + ContentPosition, + JustifyContent, + MoblinTheme, +} from "@moblin/core"; diff --git a/packages/chakra-ui/src/reactify.ts b/packages/chakra-ui/src/reactify.ts new file mode 100644 index 0000000..6f69037 --- /dev/null +++ b/packages/chakra-ui/src/reactify.ts @@ -0,0 +1,55 @@ +import { __DEV__ } from "@moblin/core"; +import { createElement, forwardRef, LegacyRef } from "react"; + +export type ReactifiedProps = Omit< + JSX.IntrinsicElements[T], + "class" +> & { + className?: string; +}; + +/** + * Converts a custom element to a react component. + */ +export const reactify = ( + componentName: T, + attrMap: Array<[string, string]> = [] +) => { + type ElementType = JSX.IntrinsicElements[T] extends { + ref?: LegacyRef | undefined; + } + ? R + : unknown; + + type Props = JSX.IntrinsicElements[T]; + + type XProps = Omit & { + className?: string; + }; + + const Component = forwardRef( + ({ className, children, ...rest }, ref) => { + const dict = rest as any; + for (const [from, to] of attrMap) { + const value = dict[from]; + delete dict[from]; + dict[to] = value; + } + return createElement( + componentName, + { + ref, + class: className, + ...dict, + }, + children + ); + } + ); + + if (__DEV__) { + Component.displayName = `Reactified(${componentName})`; + } + + return Component; +}; diff --git a/packages/core/package.json b/packages/core/package.json index 0d7959b..168bd22 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -1,6 +1,6 @@ { "name": "@moblin/core", - "version": "0.1.4", + "version": "0.0.2-next.1", "author": "Anil Anar", "license": "MIT", "main": "dist/cjs/index.js", @@ -11,6 +11,7 @@ "access": "public" }, "scripts": { + "dev": "../dev/bin.mjs dev", "build": "../dev/bin.mjs build", "lint": "../dev/bin.mjs lint" }, diff --git a/packages/core/src/types.ts b/packages/core/src/types.ts index 8ff5409..7d78efc 100644 --- a/packages/core/src/types.ts +++ b/packages/core/src/types.ts @@ -1,38 +1,47 @@ export type FlexDirection = 'row' | 'column' | 'row-reverse' | 'column-reverse'; export type ContentDistribution = - | 'space-around' - | 'space-between' - | 'space-evenly'; + | "space-around" + | "space-between" + | "space-evenly"; -export type ContentPosition = 'center' | 'flex-end' | 'flex-start' | 'stretch'; +export type ContentPosition = "center" | "flex-end" | "flex-start"; export type AlignContent = ContentDistribution | ContentPosition; -export type AlignItems = ContentPosition; +export type AlignItems = "stretch" | ContentPosition; -export type AlignSelf = ContentPosition; +export type AlignSelf = "stretch" | ContentPosition; export type JustifyContent = ContentDistribution | ContentPosition; export const contentPositions: ContentPosition[] = [ - 'stretch', - 'flex-start', - 'center', - 'flex-end', + "flex-start", + "center", + "flex-end", ]; -export const contentDistributions: (ContentPosition | ContentDistribution)[] = [ +export const alignItems: AlignItems[] = ["stretch", ...contentPositions]; + +export const contentDistributions: ContentDistribution[] = [ + "space-around", + "space-between", + "space-evenly", +]; + +export const justifyContent: JustifyContent[] = [ ...contentPositions, - 'space-around', - 'space-between', - 'space-evenly', + ...contentDistributions, ]; +export const alignContent = [...contentPositions, ...contentDistributions]; + +export const alignSelf: AlignSelf[] = ["stretch", ...contentPositions]; + export interface MoblinTheme { moblin?: { Scrollable?: { - overflowType?: 'normal' | 'overlay'; + overflowType?: "normal" | "overlay"; }; }; } diff --git a/packages/dev/base.json b/packages/dev/base.json index e8f637d..3b633b4 100644 --- a/packages/dev/base.json +++ b/packages/dev/base.json @@ -1,7 +1,7 @@ { "compilerOptions": { "incremental": true, - "target": "ES5", + "target": "ES2017", "module": "ESNext", "lib": ["dom", "esnext"], "importHelpers": true, diff --git a/packages/dev/bin.mjs b/packages/dev/bin.mjs index d5715ab..1d3d3f9 100755 --- a/packages/dev/bin.mjs +++ b/packages/dev/bin.mjs @@ -10,6 +10,7 @@ const commonFlags = "--rootDir src"; const build = { esm: `tsc ${commonFlags} --module esnext --outDir dist/esm --declaration true --declarationMap true --declarationDir dist/types`, cjs: `tsc ${commonFlags} --module commonjs --outDir dist/cjs`, + watch: `tsc ${commonFlags} --module esnext --outDir dist/esm --declaration true --declarationMap true --declarationDir dist/types --watch`, }; const command = argv._.length === 1 ? argv._[0] : null; @@ -22,6 +23,10 @@ if (command === "build") { await $`rimraf dist && cross-env NODE_ENV=production concurrently ${build.esm} ${build.cjs}`; } +if (command === "dev") { + await $([build.watch]); +} + if (command === "lint") { await $`eslint src --ext .ts,.tsx,.js`; } diff --git a/packages/dev/package.json b/packages/dev/package.json index 80bb556..353e36f 100644 --- a/packages/dev/package.json +++ b/packages/dev/package.json @@ -1,5 +1,6 @@ { "name": "@moblin/dev", + "version": "1.0.0", "private": true, "main": "./eslint-config.js", "bin": { diff --git a/packages/storybook-chakra-ui/.eslintrc.js b/packages/storybook-chakra-ui/.eslintrc.js new file mode 100644 index 0000000..7b61944 --- /dev/null +++ b/packages/storybook-chakra-ui/.eslintrc.js @@ -0,0 +1,4 @@ +module.exports = { + root: true, + extends: ["../dev"], +}; diff --git a/packages/storybook-chakra-ui/package.json b/packages/storybook-chakra-ui/package.json index f6da0f8..fa69478 100644 --- a/packages/storybook-chakra-ui/package.json +++ b/packages/storybook-chakra-ui/package.json @@ -21,8 +21,10 @@ "webpack": "^5.76.0" }, "scripts": { + "dev": "pnpm storybook", "storybook": "start-storybook --quiet -p 6006", - "build-storybook": "build-storybook -o dist --quiet" + "build-storybook": "build-storybook -o dist --quiet", + "lint": "../dev/bin.mjs lint" }, "dependencies": { "@chakra-ui/react": "^2.3.5", diff --git a/packages/storybook-chakra-ui/src/Box.stories.tsx b/packages/storybook-chakra-ui/src/Box.stories.tsx index 433213c..129a00b 100644 --- a/packages/storybook-chakra-ui/src/Box.stories.tsx +++ b/packages/storybook-chakra-ui/src/Box.stories.tsx @@ -1,27 +1,27 @@ -import { chakra, HTMLChakraProps } from '@chakra-ui/system'; -import { contentPositions } from '@moblin/core'; -import { storiesOf } from '@storybook/react'; +import { chakra, HTMLChakraProps } from "@chakra-ui/system"; +import { Box } from "@moblin/chakra-ui"; +import { alignItems } from "@moblin/core"; +import { storiesOf } from "@storybook/react"; -import { Box } from '@moblin/chakra-ui'; -import { demo } from './animatable-demo'; +import { demo } from "./animatable-demo"; const Content = ({ overflowHidden, ...props }: { overflowHidden?: boolean; -} & HTMLChakraProps<'div'>) => ( +} & HTMLChakraProps<"div">) => ( ); -const stories = contentPositions.flatMap((valign) => - contentPositions.map( +const stories = alignItems.flatMap((valign) => + alignItems.map( (halign) => [ `v=${valign} h=${halign}`, @@ -39,15 +39,15 @@ stories.reduce( acc.add(name, story); return acc; }, - storiesOf('Box', module) + storiesOf("Box", module) .addDecorator(demo()) .addParameters({ - layout: 'centered', + layout: "centered", docs: { inlineStories: false, iframeHeight: 500, source: { - type: 'code', + type: "code", }, }, }) diff --git a/packages/storybook-chakra-ui/src/ComplexCases.stories.tsx b/packages/storybook-chakra-ui/src/ComplexCases.stories.tsx index 60f263d..6f1c00c 100644 --- a/packages/storybook-chakra-ui/src/ComplexCases.stories.tsx +++ b/packages/storybook-chakra-ui/src/ComplexCases.stories.tsx @@ -1,7 +1,7 @@ +import { Box, Flex, FlexItem, Text } from "@moblin/chakra-ui"; import { contentPositions } from "@moblin/core"; import { storiesOf } from "@storybook/react"; -import { Box, Flex, FlexItem, Text } from "@moblin/chakra-ui"; import { demo } from "./animatable-demo"; const shortText = "foobar"; diff --git a/packages/storybook-chakra-ui/src/Flex.stories.tsx b/packages/storybook-chakra-ui/src/Flex.stories.tsx index f81deea..d15e9c8 100644 --- a/packages/storybook-chakra-ui/src/Flex.stories.tsx +++ b/packages/storybook-chakra-ui/src/Flex.stories.tsx @@ -1,7 +1,12 @@ -import { contentDistributions, contentPositions } from "@moblin/core"; +import { Box, BoxProps, Flex, FlexItem } from "@moblin/chakra-ui"; +import { + alignContent, + alignItems, + alignSelf, + justifyContent, +} from "@moblin/core"; import { storiesOf } from "@storybook/react"; -import { Box, BoxProps, Flex, FlexItem } from "@moblin/chakra-ui"; import { demo } from "./animatable-demo"; const Item = (props: BoxProps) => ( @@ -9,8 +14,8 @@ const Item = (props: BoxProps) => ( ); const flexStories = (["column", "row"] as const).flatMap((direction) => - contentPositions.flatMap((alignItems) => - contentDistributions.map( + alignItems.flatMap((alignItems) => + justifyContent.map( (justifyContent) => [ `d=${direction[0]} a=${alignItems} j=${justifyContent}`, @@ -51,8 +56,8 @@ flexStories.reduce( ); const overflowStories = (["column", "row"] as const).flatMap((direction) => - contentPositions.flatMap((alignItems) => - contentDistributions.map( + alignItems.flatMap((alignItems) => + justifyContent.map( (justifyContent) => [ `d=${direction[0]} a=${alignItems} j=${justifyContent}`, @@ -103,9 +108,9 @@ overflowStories.reduce( ); const flexWrapStories = (["column", "row"] as const).flatMap((direction) => - contentPositions.flatMap((alignItems) => - contentDistributions.flatMap((justifyContent) => - contentDistributions.map( + alignItems.flatMap((alignItems) => + justifyContent.flatMap((justifyContent) => + alignContent.map( (alignContent) => [ `d=${direction[0]} a=${alignItems} j=${justifyContent} w=${alignContent}`, @@ -149,9 +154,9 @@ flexWrapStories.reduce( ); const flexAlignSelfStories = (["column", "row"] as const).flatMap((direction) => - contentPositions.flatMap((alignItems) => - contentDistributions.flatMap((justifyContent) => - contentPositions.map( + alignItems.flatMap((alignItems) => + justifyContent.flatMap((justifyContent) => + alignSelf.map( (alignSelf) => [ `d=${direction[0]} a=${alignItems} j=${justifyContent} as=${alignSelf}`, diff --git a/packages/storybook-chakra-ui/src/Scrollable.stories.tsx b/packages/storybook-chakra-ui/src/Scrollable.stories.tsx index 82cdf54..322e107 100644 --- a/packages/storybook-chakra-ui/src/Scrollable.stories.tsx +++ b/packages/storybook-chakra-ui/src/Scrollable.stories.tsx @@ -1,23 +1,28 @@ import { chakra } from "@chakra-ui/system"; -import { contentPositions } from "@moblin/core"; +import { Scrollable, WithChildren } from "@moblin/chakra-ui"; +import { justifyContent } from "@moblin/core"; import { storiesOf } from "@storybook/react"; -import { Scrollable, WithChildren } from "@moblin/chakra-ui"; import { demo } from "./animatable-demo"; -const Content = ({ big }: { big?: "row" | "column" } & WithChildren) => ( +const Content = ({ + big, + children, +}: { big?: "row" | "column" } & WithChildren) => ( + > + {children} + ); const stories = (["column", "row"] as const).flatMap((direction) => [true, false].flatMap((overflow) => - contentPositions.map( + justifyContent.map( (justifyContent) => [ `d=${direction} ow=${overflow} j=${justifyContent}`, diff --git a/packages/storybook-chakra-ui/src/animatable-demo.tsx b/packages/storybook-chakra-ui/src/animatable-demo.tsx index 22b8727..c9e2d47 100644 --- a/packages/storybook-chakra-ui/src/animatable-demo.tsx +++ b/packages/storybook-chakra-ui/src/animatable-demo.tsx @@ -35,7 +35,7 @@ const DemoContainer = ({ bg="green.300" color="black" __css={{ - '& > div:first-of-type': { + '& > *': { width: '12rem', height: '12rem', willChange: 'width, height', diff --git a/packages/storybook-web/package.json b/packages/storybook-web/package.json index c9a55c3..a5d8a67 100644 --- a/packages/storybook-web/package.json +++ b/packages/storybook-web/package.json @@ -3,6 +3,7 @@ "private": true, "version": "1.1.4", "scripts": { + "dev": "pnpm storybook", "storybook": "start-storybook --quiet -p 6007", "build-storybook": "build-storybook --quiet -o dist", "lint": "../dev/bin.mjs lint" @@ -14,12 +15,9 @@ "@storybook/addon-actions": "^6.5.14", "@storybook/addon-essentials": "^6.5.14", "@storybook/addon-links": "^6.5.14", - "@storybook/builder-webpack4": "^6.5.14", "@storybook/builder-webpack5": "^6.5.12", - "@storybook/manager-webpack4": "^6.5.14", "@storybook/manager-webpack5": "^6.5.12", "@storybook/web-components": "^6.5.14", - "babel-loader": "^8.3.0", "chromatic": "^6.12.0", "lit": "^2.4.0", "lit-html": "^2.4.0", diff --git a/packages/storybook-web/src/Example.stories.ts b/packages/storybook-web/src/Example.stories.ts new file mode 100644 index 0000000..758a7c0 --- /dev/null +++ b/packages/storybook-web/src/Example.stories.ts @@ -0,0 +1,42 @@ +import "@moblin/web"; + +import { html } from "lit"; + +export default {}; + +export const Example = () => html` + + + + + + C1.1 + C1.2 + + + +
+
C2
+
+ + +`; diff --git a/packages/storybook-web/src/Flex.stories.ts b/packages/storybook-web/src/Flex.stories.ts index a62dd83..d9a52cf 100644 --- a/packages/storybook-web/src/Flex.stories.ts +++ b/packages/storybook-web/src/Flex.stories.ts @@ -1,6 +1,11 @@ import "@moblin/web"; -import { contentDistributions, contentPositions } from "@moblin/core"; +import { + alignContent, + alignItems, + alignSelf, + justifyContent, +} from "@moblin/core"; import { storiesOf } from "@storybook/web-components"; import { html, TemplateResult } from "lit"; import { styleMap } from "lit/directives/style-map.js"; @@ -19,8 +24,8 @@ const item = (content: string) => html` `; const flexStories = (["column", "row"] as const).flatMap((direction) => - contentPositions.flatMap((alignItems) => - contentDistributions.map( + alignItems.flatMap((alignItems) => + justifyContent.map( (justifyContent) => [ `d=${direction[0]} a=${alignItems} j=${justifyContent}`, @@ -57,9 +62,9 @@ flexStories.reduce( ); const flexWrapStories = (["column", "row"] as const).flatMap((direction) => - contentPositions.flatMap((alignItems) => - contentDistributions.flatMap((justifyContent) => - contentDistributions.map( + alignItems.flatMap((alignItems) => + justifyContent.flatMap((justifyContent) => + alignContent.map( (alignContent) => [ `d=${direction[0]} a=${alignItems} j=${justifyContent} w=${alignContent}`, @@ -70,7 +75,7 @@ const flexWrapStories = (["column", "row"] as const).flatMap((direction) => justify-content="${justifyContent}" align-content="${alignContent}" gap="0.5rem" - wrap="wrap" + wrap > ${item("Foo")} @@ -103,17 +108,17 @@ flexWrapStories.reduce( ); const flexAlignSelfStories = (["column", "row"] as const).flatMap((direction) => - contentPositions.flatMap((alignItems) => - contentDistributions.flatMap((justifyContent) => - contentPositions.map( + alignItems.flatMap((alignItems) => + justifyContent.flatMap((justifyContent) => + alignSelf.map( (alignSelf) => [ `d=${direction[0]} a=${alignItems} j=${justifyContent} as=${alignSelf}`, () => html` diff --git a/packages/storybook-web/src/Scrollable.stories.tsx b/packages/storybook-web/src/Scrollable.stories.tsx new file mode 100644 index 0000000..82badcd --- /dev/null +++ b/packages/storybook-web/src/Scrollable.stories.tsx @@ -0,0 +1,73 @@ +import "@moblin/web"; + +import { justifyContent } from "@moblin/core"; +import { storiesOf } from "@storybook/web-components"; +import { html, TemplateResult } from "lit"; +import { styleMap } from "lit/directives/style-map.js"; + +import { demo } from "./animatable-demo"; + +const content = ({ + big, + content, +}: { + big?: "row" | "column"; + content: string; +}) => html` +
+ ${content} +
+`; + +const stories = (["column", "row"] as const).flatMap((direction) => + [true, false].flatMap((overflow) => + justifyContent.map( + (justifyContent) => + [ + `d=${direction} ow=${overflow} j=${justifyContent}`, + () => html` + + ${content({ + big: overflow ? direction : undefined, + content: "Content", + })} + + `, + ] as [string, () => TemplateResult] + ) + ) +); + +stories.reduce( + (acc, [name, story]) => { + acc.add(name, story); + return acc; + }, + storiesOf("Scrollable", module) + .addDecorator(demo()) + .addParameters({ + layout: "centered", + docs: { + inlineStories: false, + iframeHeight: 500, + source: { + type: "code", + }, + }, + }) +); diff --git a/packages/web/package.json b/packages/web/package.json index 91d82fb..06c60a4 100644 --- a/packages/web/package.json +++ b/packages/web/package.json @@ -15,6 +15,7 @@ "access": "public" }, "scripts": { + "dev": "../dev/bin.mjs dev", "build": "../dev/bin.mjs build", "lint": "../dev/bin.mjs lint" }, diff --git a/packages/web/src/Box.ts b/packages/web/src/Box.ts index 7b442d6..f89d341 100644 --- a/packages/web/src/Box.ts +++ b/packages/web/src/Box.ts @@ -1,39 +1,61 @@ import "./Flex"; import "./FlexItem"; -import type { ContentPosition } from "@moblin/core"; -import { html, LitElement } from "lit"; -import { customElement, property } from "lit/decorators.js"; -import { styleMap } from "lit/directives/style-map.js"; +import { css,html, LitElement } from "lit"; +import { customElement } from "lit/decorators.js"; @customElement("x-box") export class Box extends LitElement { - @property() - valign: ContentPosition = "stretch"; + static styles = css` + :host { + display: flex; + align-items: stretch; + justify-content: stretch; + } - @property() - halign: ContentPosition = "stretch"; + :host([valign="flex-start"]) { + align-items: flex-start; + } + :host([valign="center"]) { + align-items: center; + } + + :host([valign="flex-end"]) { + align-items: flex-end; + } + + :host([valign="stretch"]) { + align-items: stretch; + } + + :host([halign="flex-start"]) { + justify-content: flex-start; + } + + :host([halign="center"]) { + justify-content: center; + } + + :host([halign="flex-end"]) { + justify-content: flex-end; + } + + :host([halign="stretch"]) { + justify-content: stretch; + } + + ::slotted(*) { + flex-grow: 1; + flex-shrink: 1; + min-width: 0; + } + + :host([halign]:not([halign="stretch"])) ::slotted(*) { + flex-grow: 0; + } + `; render() { - return html` - - - - - - - `; + return html` `; } } diff --git a/packages/web/src/Flex.ts b/packages/web/src/Flex.ts index 0e522a8..d7c537e 100644 --- a/packages/web/src/Flex.ts +++ b/packages/web/src/Flex.ts @@ -1,94 +1,180 @@ -import type { AlignContent, AlignItems, JustifyContent } from "@moblin/core"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators.js"; -import { styleMap } from "lit/directives/style-map.js"; @customElement("x-flex") export class Flex extends LitElement { - @property() - direction: "row" | "column" = "row"; + @property({ attribute: true }) + gap?: string; - @property({ attribute: "justify-content" }) - justifyContent: JustifyContent = "flex-start"; + @property({ attribute: "column-gap" }) + columnGap?: string; - @property({ attribute: "align-items" }) - alignItems: AlignItems = "stretch"; + @property({ attribute: "row-gap" }) + rowGap?: string; - @property({ attribute: "align-content" }) - alignContent: AlignContent = "flex-start"; + static styles = css` + :host { + display: flex; + align-items: stretch; + } - @property() - wrap: "wrap" | "wrap-reverse" | "nowrap" = "nowrap"; + :host([inline]) { + display: inline-flex; + } - @property() - gap: string = "0"; + /** + * Direction + * =================================== + */ + :host(:not([direction])), :host([direction="row"]) { + flex-direction: row; + --moblin-direction: column; + } - @property({ attribute: "gap-x" }) - gapX: string; + :host([direction="row-reverse"]) { + flex-direction: row-reverse; + --moblin-direction: column; + } - @property({ attribute: "gap-y" }) - gapY: string; + :host([direction="column"]) { + flex-direction: column; + --moblin-direction: row; + } + + :host([direction="column-reverse"]) { + flex-direction: column-reverse; + --moblin-direction: row; + } + + /* =================================== */ + + /** + * Wrap + * =================================== + */ + :host([wrap]) { + flex-wrap: wrap; + } + + :host([wrap="reverse"]) { + flex-wrap: wrap-reverse; + } + /* =================================== */ + + /** + * Align content + * =================================== + */ + :host([align-content="flex-start"]) { + align-content: flex-start; + } + :host([align-content="flex-end"]) { + align-content: flex-end; + } + :host([align-content="center"]) { + align-content: center; + } + :host([align-content="space-between"]) { + align-content: space-between; + } + :host([align-content="space-around"]) { + align-content: space-around; + } + :host([align-content="space-evenly"]) { + align-content: space-evenly; + } + /* =================================== */ + + /** + * Justify content + * =================================== + */ + :host([justify-content="flex-start"]) { + justify-content: flex-start; + } + :host([justify-content="flex-end"]) { + justify-content: flex-end; + } + :host([justify-content="center"]) { + justify-content: center; + } + :host([justify-content="space-between"]) { + justify-content: space-between; + } + :host([justify-content="space-around"]) { + justify-content: space-around; + } + :host([justify-content="space-evenly"]) { + justify-content: space-evenly; + } + /* =================================== */ + + /** + * Align items + * =================================== + */ + + :host([align-items="flex-start"]) { + --moblin-align: flex-start; + --moblin-child-grow: 0; + } + + :host([align-items="flex-end"]) { + --moblin-align: flex-end; + --moblin-child-grow: 0; + } + + :host([align-items="center"]) { + --moblin-align: center; + --moblin-child-grow: 0; + } + + :host([align-items="stretch"]), + :host(:not([align-items])) { + --moblin-align: stretch; + --moblin-child-grow: 1; + } + + /* =================================== */ + + /** + * x-flex-item and child min width/height normalization + */ + :host(:not([direction])), :host([direction="row"]), :host([direction="row-reverse"]) { + --moblin-item-min-width: 0; + --moblin-item-min-height: auto; + --moblin-child-min-width: auto; + --moblin-child-min-height: 0; + } + + :host([direction="column"]), :host([direction="column-reverse"]) { + --moblin-item-min-width: auto; + --moblin-item-min-height: 0; + --moblin-child-min-width: 0; + --moblin-child-min-height: auto; + } + + /* =================================== */ + + /** + * extended inheritance + */ + slot { + all: inherit; + display: contents; + } + `; render() { - return html` + const gap = html` -
-
- -
-
`; + + return html`${gap} `; } } diff --git a/packages/web/src/FlexItem.ts b/packages/web/src/FlexItem.ts index dfbb20c..7df162b 100644 --- a/packages/web/src/FlexItem.ts +++ b/packages/web/src/FlexItem.ts @@ -1,96 +1,88 @@ -import type { AlignSelf } from "@moblin/core"; import { css, html, LitElement } from "lit"; import { customElement, property } from "lit/decorators.js"; -import { styleMap } from "lit/directives/style-map.js"; @customElement("x-flex-item") export class FlexItem extends LitElement { + @property({ attribute: true }) + grow: string = "0"; + + @property({ attribute: true }) + shrink: string = "1"; + + @property({ attribute: true }) + basis: string = "auto"; + static styles = css` :host { - min-width: 0; - min-height: 0; - } - - ::slotted(*) { - flex-shrink: 1; - flex-basis: auto; - } + --moblin-direction: inherit; + --moblin-align: inherit; + --moblin-item-min-width: inherit; + --moblin-item-min-height: inherit; + --moblin-child-min-width: inherit; + --moblin-child-min-height: inherit; - :host([align-self="stretch"]) ::slotted(*) { - flex-grow: 1; + display: flex; + flex-direction: var(--moblin-direction); + justify-content: var(--moblin-align); + align-items: stretch; } - x-flex[justify-content="stretch"] :host(:not([align-self])) ::slotted(*) { - flex-grow: 1; + :host(:not([shrink="0"])) { + min-width: var(--moblin-item-min-width); + min-height: var(--moblin-item-min-height); } - x-flex:not([justify-content="stretch"]) - :host(:not([align-self])) - ::slotted(*) { - flex-grow: 0; + ::slotted(*) { + --moblin-child-grow: inherit; + --moblin-child-min-width: inherit; + --moblin-child-min-height: inherit; + flex-shrink: 1; + flex-basis: auto; + flex-grow: var(--moblin-child-grow, 0); + min-width: var(--moblin-child-min-width); + min-height: var(--moblin-child-min-height); } - :host([align-self]):not([align-self="stretch"]) ::slotted(*) { + :host([align-self="flex-start"]) { + --moblin-align: flex-start; + --moblin-child-grow: 0; } - :host(:not([align-self="stretch"])) ::slotted(*) { - flex-grow: 0; + :host([align-self="flex-end"]) { + --moblin-align: flex-end; + --moblin-child-grow: 0; } - x-flex[direction="row"] > :host > ::slotted(*) { - min-height: 0; + :host([align-self="center"]) { + --moblin-align: center; + --moblin-child-grow: 0; } - x-flex[direction="column"] > :host > ::slotted(*) { - min-width: 0; + :host([align-self="stretch"]) { + --moblin-align: stretch; + --moblin-child-grow: 1; } - * { - display: flex; - overflow: visible; - width: 100%; - height: 100%; - flex-direction: "var(--moblin-flex-child-direction)", - alignItems: "stretch", - justifyContent: this.alignSelf ?? "var(--moblin-flex-align-items)", + /** + * extended inheritance + */ + slot { + all: inherit; + display: contents; } `; - @property({ attribute: "align-self" }) - alignSelf?: AlignSelf; - - @property() - grow?: number; - - @property() - shrink: number = 1; - - @property() - basis: string = "auto"; render() { - return html` + const styles = html` -
- -
`; + + return html`${styles} `; } } diff --git a/packages/web/src/index.ts b/packages/web/src/index.ts index 91d7b1b..d6a9b1d 100644 --- a/packages/web/src/index.ts +++ b/packages/web/src/index.ts @@ -1,3 +1,3 @@ -import "./Box"; -import "./Flex"; -import "./FlexItem"; +export * from "./Box"; +export * from "./Flex"; +export * from "./FlexItem"; diff --git a/packages/web/tsconfig.json b/packages/web/tsconfig.json index 3ffecfb..4329cde 100644 --- a/packages/web/tsconfig.json +++ b/packages/web/tsconfig.json @@ -1,16 +1,7 @@ { - "compilerOptions": { - "lib": ["ES2015", "DOM"], - "target": "ES5", - "composite": true, - "incremental": true, - "declaration": true, - "declarationDir": "dist/types", - "experimentalDecorators": true, - "useDefineForClassFields": false, - "esModuleInterop": true, - "moduleResolution": "Node" - }, "include": ["src/**/*"], - "exclude": ["node_modules/*"] + "extends": "../dev/base.json", + "compilerOptions": { + "experimentalDecorators": true + } } diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index fa8a9ec..1e368ec 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -20,6 +20,9 @@ importers: '@moblin/core': specifier: workspace:* version: link:../core + '@moblin/web': + specifier: workspace:* + version: link:../web devDependencies: '@chakra-ui/react': specifier: ^2.8.2 @@ -159,7 +162,7 @@ importers: version: 6.5.14(react-dom@18.2.0)(react@18.2.0) '@storybook/addon-essentials': specifier: ^6.5.14 - version: 6.5.14(@babel/core@7.20.5)(@storybook/builder-webpack4@6.5.14)(@storybook/builder-webpack5@6.5.14)(@storybook/web-components@6.5.14)(lit-html@2.5.0)(lit@2.4.1)(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3)(webpack@5.76.0) + version: 6.5.14(@babel/core@7.20.5)(@storybook/builder-webpack4@6.5.14)(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3)(webpack@5.76.0) '@storybook/addon-interactions': specifier: ^6.5.14 version: 6.5.14(@types/react@18.0.26)(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3) @@ -210,28 +213,19 @@ importers: version: 6.5.14(react-dom@18.2.0)(react@18.2.0) '@storybook/addon-essentials': specifier: ^6.5.14 - version: 6.5.14(@babel/core@7.20.5)(@storybook/builder-webpack4@6.5.14)(@storybook/builder-webpack5@6.5.14)(@storybook/web-components@6.5.14)(lit-html@2.5.0)(lit@2.4.1)(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3)(webpack@5.76.0) + version: 6.5.14(@babel/core@7.20.5)(@storybook/builder-webpack5@6.5.14)(@storybook/web-components@6.5.14)(lit-html@2.5.0)(lit@2.4.1)(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3)(webpack@5.76.0) '@storybook/addon-links': specifier: ^6.5.14 version: 6.5.14(react-dom@18.2.0)(react@18.2.0) - '@storybook/builder-webpack4': - specifier: ^6.5.14 - version: 6.5.14(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3) '@storybook/builder-webpack5': specifier: ^6.5.12 version: 6.5.14(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3) - '@storybook/manager-webpack4': - specifier: ^6.5.14 - version: 6.5.14(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3) '@storybook/manager-webpack5': specifier: ^6.5.12 version: 6.5.14(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3) '@storybook/web-components': specifier: ^6.5.14 version: 6.5.14(@babel/core@7.20.5)(@storybook/builder-webpack5@6.5.14)(@storybook/manager-webpack5@6.5.14)(lit-html@2.5.0)(typescript@4.9.3)(webpack@5.76.0) - babel-loader: - specifier: ^8.3.0 - version: 8.3.0(@babel/core@7.20.5)(webpack@5.76.0) chromatic: specifier: ^6.12.0 version: 6.12.0 @@ -913,6 +907,7 @@ packages: dependencies: '@babel/core': 7.20.5 '@babel/helper-plugin-utils': 7.20.2 + dev: false /@babel/plugin-syntax-json-strings@7.8.3(@babel/core@7.20.5): resolution: {integrity: sha512-lY6kdGpWHvjoe2vk4WrAapEuBR69EMxZl+RoGRhrFGNYVK8mOPAW8VfbT/ZgrFbXlDNiiaxQnAtgVCZ6jv30EA==} @@ -4418,6 +4413,7 @@ packages: /@lit/reactive-element@1.4.2: resolution: {integrity: sha512-VMOxsWh/QDwrxPsgkSQnuZ+8mfNy1OTjzzUdLBvvZtpahwPTHTeVZ51RZRqO4xfKVrR+btIPA8D01IL3xeG66w==} + dev: false /@manypkg/find-root@1.1.0: resolution: {integrity: sha512-mki5uBvhHzO8kYYix/WRy2WX8S3B5wdVSc9D6KcU5lQNglP2yt58/VfLuAK49glRXChosY8ap2oJ1qgma3GUVA==} @@ -4752,7 +4748,7 @@ packages: - webpack-cli - webpack-command - /@storybook/addon-essentials@6.5.14(@babel/core@7.20.5)(@storybook/builder-webpack4@6.5.14)(@storybook/builder-webpack5@6.5.14)(@storybook/web-components@6.5.14)(lit-html@2.5.0)(lit@2.4.1)(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3)(webpack@5.76.0): + /@storybook/addon-essentials@6.5.14(@babel/core@7.20.5)(@storybook/builder-webpack4@6.5.14)(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3)(webpack@5.76.0): resolution: {integrity: sha512-6fmfDHbp1y/hF0GU0W95RLw4rzN3KGcEcpAZ8HbgTyXIF528j0hhlvkD5AjnQ5dVarlHdKAtMRZA9Y3OCEZD6A==} peerDependencies: '@babel/core': ^7.9.6 @@ -4821,6 +4817,92 @@ packages: '@storybook/addons': 6.5.14(react-dom@18.2.0)(react@18.2.0) '@storybook/api': 6.5.14(react-dom@18.2.0)(react@18.2.0) '@storybook/builder-webpack4': 6.5.14(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3) + '@storybook/core-common': 6.5.14(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3) + '@storybook/node-logger': 6.5.14 + core-js: 3.26.1 + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + regenerator-runtime: 0.13.11 + ts-dedent: 2.2.0 + webpack: 5.76.0 + transitivePeerDependencies: + - '@storybook/mdx2-csf' + - eslint + - supports-color + - typescript + - vue-template-compiler + - webpack-cli + - webpack-command + dev: true + + /@storybook/addon-essentials@6.5.14(@babel/core@7.20.5)(@storybook/builder-webpack5@6.5.14)(@storybook/web-components@6.5.14)(lit-html@2.5.0)(lit@2.4.1)(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3)(webpack@5.76.0): + resolution: {integrity: sha512-6fmfDHbp1y/hF0GU0W95RLw4rzN3KGcEcpAZ8HbgTyXIF528j0hhlvkD5AjnQ5dVarlHdKAtMRZA9Y3OCEZD6A==} + peerDependencies: + '@babel/core': ^7.9.6 + '@storybook/angular': '*' + '@storybook/builder-manager4': '*' + '@storybook/builder-manager5': '*' + '@storybook/builder-webpack4': '*' + '@storybook/builder-webpack5': '*' + '@storybook/html': '*' + '@storybook/vue': '*' + '@storybook/vue3': '*' + '@storybook/web-components': '*' + lit: '*' + lit-html: '*' + react: '*' + react-dom: '*' + svelte: '*' + sveltedoc-parser: '*' + vue: '*' + webpack: '*' + peerDependenciesMeta: + '@storybook/angular': + optional: true + '@storybook/builder-manager4': + optional: true + '@storybook/builder-manager5': + optional: true + '@storybook/builder-webpack4': + optional: true + '@storybook/builder-webpack5': + optional: true + '@storybook/html': + optional: true + '@storybook/vue': + optional: true + '@storybook/vue3': + optional: true + '@storybook/web-components': + optional: true + lit: + optional: true + lit-html: + optional: true + react: + optional: true + react-dom: + optional: true + svelte: + optional: true + sveltedoc-parser: + optional: true + vue: + optional: true + webpack: + optional: true + dependencies: + '@babel/core': 7.20.5 + '@storybook/addon-actions': 6.5.14(react-dom@18.2.0)(react@18.2.0) + '@storybook/addon-backgrounds': 6.5.14(react-dom@18.2.0)(react@18.2.0) + '@storybook/addon-controls': 6.5.14(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3) + '@storybook/addon-docs': 6.5.14(@babel/core@7.20.5)(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3)(webpack@5.76.0) + '@storybook/addon-measure': 6.5.14(react-dom@18.2.0)(react@18.2.0) + '@storybook/addon-outline': 6.5.14(react-dom@18.2.0)(react@18.2.0) + '@storybook/addon-toolbars': 6.5.14(react-dom@18.2.0)(react@18.2.0) + '@storybook/addon-viewport': 6.5.14(react-dom@18.2.0)(react@18.2.0) + '@storybook/addons': 6.5.14(react-dom@18.2.0)(react@18.2.0) + '@storybook/api': 6.5.14(react-dom@18.2.0)(react@18.2.0) '@storybook/builder-webpack5': 6.5.14(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3) '@storybook/core-common': 6.5.14(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3) '@storybook/node-logger': 6.5.14 @@ -4841,6 +4923,7 @@ packages: - vue-template-compiler - webpack-cli - webpack-command + dev: false /@storybook/addon-interactions@6.5.14(@types/react@18.0.26)(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3): resolution: {integrity: sha512-Stw/m3+T6ILrQPwyPgRNYtXZTBk9wE0KOSOUVrc6VixCcXm43nIYkUFiq4NL86lCBR4RKewfgl8U3Rn6chE8Tg==} @@ -5017,6 +5100,7 @@ packages: react: 16.14.0 react-dom: 16.14.0(react@16.14.0) regenerator-runtime: 0.13.11 + dev: false /@storybook/addons@6.5.14(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-8wVy1eDKipj+dmWpVmmPa1p2jYVqDvrkWll4IsP/KU7AYFCiyCiVAd1ZPDv9EhDnwArfYYjrdJjAl6gmP0UMag==} @@ -5063,6 +5147,7 @@ packages: telejson: 6.0.8 ts-dedent: 2.2.0 util-deprecate: 1.0.2 + dev: false /@storybook/api@6.5.14(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-RpgEWV4mxD1mNsGWkjSNq3+B/LFNIhXZc4OapEEK5u0jgCZKB7OCsRL9NJZB5WfpyN+vx8SwbUTgo8DIkes3qw==} @@ -5157,6 +5242,7 @@ packages: - vue-template-compiler - webpack-cli - webpack-command + dev: false /@storybook/builder-webpack4@6.5.14(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3): resolution: {integrity: sha512-0pv8BlsMeiP9VYU2CbCZaa3yXDt1ssb8OeTRDbFC0uFFb3eqslsH68I7XsC8ap/dr0RZR0Edtw0OW3HhkjUXXw==} @@ -5225,6 +5311,7 @@ packages: - vue-template-compiler - webpack-cli - webpack-command + dev: true /@storybook/builder-webpack5@6.5.14(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3): resolution: {integrity: sha512-Ukj7Wwxz/3mKn5TI5mkm2mIm583LxOz78ZrpcOgI+vpjeRlMFXmGGEb68R47SiCdZoVCfIeCXXXzBd6Q6As6QQ==} @@ -5286,6 +5373,7 @@ packages: - vue-template-compiler - webpack-cli - webpack-command + dev: false /@storybook/channel-postmessage@6.5.14: resolution: {integrity: sha512-0Cmdze5G3Qwxf7yYPGlJxGiY+KiEUQ+8GfpohsKGfvrP8cfSrx6VhxupHA7hDNyRh75hqZq5BrkW4HO9Ypbt5A==} @@ -5342,6 +5430,7 @@ packages: synchronous-promise: 2.0.16 ts-dedent: 2.2.0 util-deprecate: 1.0.2 + dev: false /@storybook/client-api@6.5.14(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-G5mBQCKn8/VqE9XDCL19ixcvu8YhaQZ0AE+EXGYXUsvPpyQ43oGoGJry5IqOzeRlc7dbglFWpMkB6PeeUD7aCw==} @@ -5394,6 +5483,7 @@ packages: react-dom: 16.14.0(react@16.14.0) regenerator-runtime: 0.13.11 util-deprecate: 1.0.2 + dev: false /@storybook/components@6.5.14(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-wqB9CF3sjxtgffnDW1G/W5SsKumsFQ0ftn/3PdrsvKULu5LM5bjNEqC2cTCWrk9vQhj+EVQxzdVM/BlPl/lSwg==} @@ -5447,6 +5537,7 @@ packages: unfetch: 4.2.0 util-deprecate: 1.0.2 webpack: 4.46.0 + dev: false /@storybook/core-client@6.5.14(react-dom@16.14.0)(react@16.14.0)(typescript@4.9.3)(webpack@5.76.0): resolution: {integrity: sha512-d5mUgz1xSvrAdal8XKI5YOZOM/XUly90vis3DboeZRO58qSp+NH5xFYIBBED5qefDgmGU0Yv4rXHQlph96LSHQ==} @@ -5483,6 +5574,7 @@ packages: unfetch: 4.2.0 util-deprecate: 1.0.2 webpack: 5.76.0 + dev: false /@storybook/core-client@6.5.14(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3)(webpack@4.46.0): resolution: {integrity: sha512-d5mUgz1xSvrAdal8XKI5YOZOM/XUly90vis3DboeZRO58qSp+NH5xFYIBBED5qefDgmGU0Yv4rXHQlph96LSHQ==} @@ -5519,6 +5611,7 @@ packages: unfetch: 4.2.0 util-deprecate: 1.0.2 webpack: 4.46.0 + dev: true /@storybook/core-client@6.5.14(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3)(webpack@5.76.0): resolution: {integrity: sha512-d5mUgz1xSvrAdal8XKI5YOZOM/XUly90vis3DboeZRO58qSp+NH5xFYIBBED5qefDgmGU0Yv4rXHQlph96LSHQ==} @@ -5625,6 +5718,7 @@ packages: - vue-template-compiler - webpack-cli - webpack-command + dev: false /@storybook/core-common@6.5.14(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3): resolution: {integrity: sha512-MrxhYXYrtN6z/+tydjPkCIwDQm5q8Jx+w4TPdLKBZu7vzfp6T3sT12Ym96j9MJ42CvE4vSDl/Njbw6C0D+yEVw==} @@ -5778,6 +5872,7 @@ packages: - vue-template-compiler - webpack-cli - webpack-command + dev: false /@storybook/core-server@6.5.14(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3): resolution: {integrity: sha512-+Z3lHEsDpiBXt6xBwU5AVBoEkicndnHoiLwhEGPkfixy7POYEEny3cm54tteVxV8O5AHMwsHs54/QD+hHxAXnQ==} @@ -5892,6 +5987,7 @@ packages: - vue-template-compiler - webpack-cli - webpack-command + dev: false /@storybook/core@6.5.14(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3)(webpack@5.76.0): resolution: {integrity: sha512-5rjwZXk++NkKWCmHt/CC+h2L4ZbOYkLJpMmaB97CwgQCA6kaF8xuJqlAwG72VUH3oV+6RntW02X6/ypgX1atPw==} @@ -5973,6 +6069,7 @@ packages: - react - react-dom - supports-color + dev: false /@storybook/docs-tools@6.5.14(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-qA0UWvrZ7XyIWD+01NGHiiGPSbfercrxjphM9wHgF6KrO6e5iykNKIEL4elsM+EV4szfhlalQdtpnwM7WtXODA==} @@ -6058,6 +6155,7 @@ packages: - vue-template-compiler - webpack-cli - webpack-command + dev: false /@storybook/manager-webpack4@6.5.14(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3): resolution: {integrity: sha512-ixfJuaG0eiOlxn4i+LJNRUZkm+3WMsiaGUm0hw2XHF0pW3cBIA/+HyzkEwVh/fROHbsOERTkjNl0Ygl12Imw9w==} @@ -6115,6 +6213,7 @@ packages: - vue-template-compiler - webpack-cli - webpack-command + dev: true /@storybook/manager-webpack5@6.5.14(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3): resolution: {integrity: sha512-Z9uXhaBPpUhbLEYkZVm95vKSmyxXk+DLqa1apAQEmHz3EBMTNk/2n0aZnNnsspYzjNP6wvXWT0sGyXG6yhX2cw==} @@ -6171,6 +6270,7 @@ packages: - vue-template-compiler - webpack-cli - webpack-command + dev: false /@storybook/mdx1-csf@0.0.1(@babel/core@7.20.5): resolution: {integrity: sha512-4biZIWWzoWlCarMZmTpqcJNgo/RBesYZwGFbQeXiGYsswuvfWARZnW9RE9aUEMZ4XPn7B1N3EKkWcdcWe/K2tg==} @@ -6228,6 +6328,7 @@ packages: ts-dedent: 2.2.0 unfetch: 4.2.0 util-deprecate: 1.0.2 + dev: false /@storybook/preview-web@6.5.14(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-ey2E7222xw0itPgCWH7ZIrdgM1yCdYte/QxRvwv/O4us4SUs/RQaL1aoCD+hCRwd0BNyZUk/u1KnqB4y0MnHww==} @@ -6378,6 +6479,7 @@ packages: react: 16.14.0 react-dom: 16.14.0(react@16.14.0) regenerator-runtime: 0.13.11 + dev: false /@storybook/router@6.5.14(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-AvHbpRUAHnzm5pmwFPjDR09uPjQITD6kA0QNa2pe+7/Q/b4k40z5dHvHZJ/YhWhwVwGqGBG20KdDOl30wLXAZw==} @@ -6443,6 +6545,7 @@ packages: synchronous-promise: 2.0.16 ts-dedent: 2.2.0 util-deprecate: 1.0.2 + dev: false /@storybook/store@6.5.14(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-s07Vw4nbShPYwBJmVXzptuyCkrDQD3khcrKB5L7NsHHgWsm2QI0OyiPMuMbSvgipjcMc/oRqdL3tFUeFak9EMg==} @@ -6493,6 +6596,7 @@ packages: - vue-template-compiler - webpack-cli - webpack-command + dev: false /@storybook/telemetry@6.5.14(react-dom@18.2.0)(react@18.2.0)(typescript@4.9.3): resolution: {integrity: sha512-AVSw7WyKHrVbXMSZZ0fvg3oAb8xAS7OrmNU6++yUfbuqpF0JNtNkNnRSaJ4Nh7Vujzloy5jYhbpfY44nb/hsCw==} @@ -6546,6 +6650,7 @@ packages: react: 16.14.0 react-dom: 16.14.0(react@16.14.0) regenerator-runtime: 0.13.11 + dev: false /@storybook/theming@6.5.14(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-3ff6RLZGaIil/AFJ0/BRlE2hhdPrC5v6wGbRfroZVmGldRCxio/7+KAA3LH6cuHnjK5MeBcCBaHuxzXqGmbEFw==} @@ -6582,6 +6687,7 @@ packages: react-dom: 16.14.0(react@16.14.0) regenerator-runtime: 0.13.11 resolve-from: 5.0.0 + dev: false /@storybook/ui@6.5.14(react-dom@18.2.0)(react@18.2.0): resolution: {integrity: sha512-dXlCIULh8ytgdFrvVoheQLlZjAyyYmGCuw+6m+s+2yF/oUbFREG/5Zo9hDwlJ4ZiAyqNLkuwg2tnMYtjapZSog==} @@ -6652,6 +6758,7 @@ packages: - webpack - webpack-cli - webpack-command + dev: false /@testing-library/dom@8.19.0: resolution: {integrity: sha512-6YWYPPpxG3e/xOo6HIWwB/58HukkwIVTOaZ0VwdMVjhRUX/01E4FtQbck9GazOOj7MXHc5RBzMrU86iBJHbI+A==} @@ -6729,6 +6836,7 @@ packages: /@types/html-minifier-terser@6.1.0: resolution: {integrity: sha512-oh/6byDPnL1zeNXFrDXFLyZjkr1MsBG667IM792caf1L2UPOOMf65NFzjUH/ltyfwjAGfs1rsX1eftK0jC/KIg==} + dev: false /@types/is-ci@3.0.0: resolution: {integrity: sha512-Q0Op0hdWbYd1iahB+IFNQcWXFq4O0Q5MwQP7uN0souuQ4rPg1vEYcnIOfr1gY+M+6rc8FGoRaBO1mOOvL29sEQ==} @@ -7737,6 +7845,7 @@ packages: '@babel/core': 7.20.5 '@babel/plugin-syntax-import-meta': 7.10.4(@babel/core@7.20.5) '@babel/template': 7.18.10 + dev: false /babel-plugin-extract-import-names@1.6.22: resolution: {integrity: sha512-yJ9BsJaISua7d8zNT7oRG1ZLBJCIdZ4PZqmH8qa9N5AK01ifk3fnkc98AXhtzE7UkfCsEumvoQWgoYLhOnJ7jQ==} @@ -7765,6 +7874,7 @@ packages: /babel-plugin-named-exports-order@0.0.2: resolution: {integrity: sha512-OgOYHOLoRK+/mvXU9imKHlG6GkPLYrUCvFXG/CM93R/aNNO8pOOF4aS+S8CCHMDQoNSeiOYEZb/G6RwL95Jktw==} + dev: false /babel-plugin-polyfill-corejs2@0.3.3(@babel/core@7.20.5): resolution: {integrity: sha512-8hOdmFYFSZhqg2C/JgLUQ+t52o5nirNwaWM2B9LWteozwIvM14VSwdsCAUET10qT+kmySAlseadmfeeSWFCy+Q==} @@ -7872,6 +7982,7 @@ packages: /binary-extensions@2.2.0: resolution: {integrity: sha512-jDctJ/IVQbZoJykoeHbhXpOlNBqGNcwXJKJog42E5HDPUwQTSdjCHdihjj0DlnheQ7blbT6dHOafNAiS8ooQKA==} engines: {node: '>=8'} + requiresBuild: true /bindings@1.5.0: resolution: {integrity: sha512-p2q/t/mhvuOj/UeLlV6566GD/guowlr0hHxClI0W9m7MWYkL1F0hLo+0Aexs9HSPCtR1SXQ0TD3MMKrXZajbiQ==} @@ -7971,6 +8082,7 @@ packages: /browser-assert@1.2.1: resolution: {integrity: sha512-nfulgvOR6S4gt9UKCeGJOuSGBPGiFT6oQ/2UBnvTY/5aQ1PnksW72fhZkM30DzoRRv2WpwZf1vHHEr3mtuXIWQ==} + dev: false /browserify-aes@1.2.0: resolution: {integrity: sha512-+7CHXqGuspUn/Sl5aO7Ea0xWGAtETPXNSAjHo48JfLdPWcMng33Xe4znFvQweqc/uzk5zSOI3H52CYnjCfb5hA==} @@ -8345,6 +8457,7 @@ packages: engines: {node: '>= 10.0'} dependencies: source-map: 0.6.1 + dev: false /clean-stack@2.2.0: resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==} @@ -8469,6 +8582,7 @@ packages: /colorette@1.4.0: resolution: {integrity: sha512-Y2oEozpomLn7Q3HFP7dpww7AtMJplbM9lGZP6RDfHqmbeRjiwRg4n6VM6j4KLmRke85uWEI7JqF17f3pqdRA0g==} + dev: false /colorette@2.0.19: resolution: {integrity: sha512-3tlv/dIP7FWvj3BsbHrGLJ6l/oKh1O3TcgBqMn+yyCagOxc23fyzDS6HypQbgxWbkpDnf52p1LuR4eWDQ/K9WQ==} @@ -8497,6 +8611,7 @@ packages: /commander@8.3.0: resolution: {integrity: sha512-OkTL9umf+He2DZkUq8f8J9of7yL6RJKI24dVITBmNfZBmri9zYZQrKkuXiKhyfPSu8tUhnVBB1iKXevvnlR4Ww==} engines: {node: '>= 12'} + dev: false /commander@9.4.1: resolution: {integrity: sha512-5EEkTNyHNGFPD2H+c/dXXfQZYa/scCKasxWcXJaWnNJ99pnQN9Vnmqow+p+PlFPE63Q6mThaZws1T+HxfpgtPw==} @@ -8803,6 +8918,7 @@ packages: schema-utils: 3.1.1 semver: 7.3.8 webpack: 5.76.0 + dev: false /css-select@4.3.0: resolution: {integrity: sha512-wPpOYtnsVontu2mODhA19JrqWxNsfdatRKd64kmpRbQgh1KtItko5sTnEpPdpSaJszTOhEMlF/RPz28qj4HqhQ==} @@ -10017,6 +10133,7 @@ packages: tapable: 1.1.3 typescript: 4.9.3 webpack: 5.76.0 + dev: false /form-data@3.0.1: resolution: {integrity: sha512-RHkBKtLWUVwd7SqRIvCZMEvAMoGUp0XU+seQiZejj0COz3RI3hWP4sCv3gZWWLjJTd7rGwcsF5eKZGii0r/hbg==} @@ -10585,6 +10702,7 @@ packages: param-case: 3.0.4 relateurl: 0.2.7 terser: 5.16.1 + dev: false /html-tags@3.2.0: resolution: {integrity: sha512-vy7ClnArOZwCnqZgvv+ddgHgJiAFXe3Ge9ML5/mBctVJoUoYPCdxVucOywjDARn6CVoh3dRSFdPHy2sX80L0Wg==} @@ -10623,6 +10741,7 @@ packages: pretty-error: 4.0.0 tapable: 2.2.1 webpack: 5.76.0 + dev: false /htmlparser2@6.1.0: resolution: {integrity: sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==} @@ -10677,6 +10796,7 @@ packages: postcss: ^8.1.0 dependencies: postcss: 8.4.19 + dev: false /ieee754@1.2.1: resolution: {integrity: sha512-dcyqhDvX1C46lXZcVqCpK+FtMRQVdIMN6/Df5js2zouUsqG7I6sFxitIC+7KYK29KdXOLHdu9zL4sFnoVQnqaA==} @@ -11439,6 +11559,7 @@ packages: dependencies: '@lit/reactive-element': 1.4.2 lit-html: 2.5.0 + dev: false /lit-html@2.4.0: resolution: {integrity: sha512-G6qXu4JNUpY6aaF2VMfaszhO9hlWw0hOTRFDmuMheg/nDYGB+2RztUSOyrzALAbr8Nh0Y7qjhYkReh3rPnplVg==} @@ -11450,6 +11571,7 @@ packages: resolution: {integrity: sha512-bLHosg1XL3JRUcKdSVI0sLCs0y1wWrj2sqqAN3cZ7bDDPNgmDHH29RV48x6Wz3ZmkxIupaE+z7uXSZ/pXWAO1g==} dependencies: '@types/trusted-types': 2.0.2 + dev: false /lit@2.4.1: resolution: {integrity: sha512-qohSgLiyN1cFnJG26dIiY03S4F49857A0AHQfnS0zYtnUVnD2MFvx+UT52rtXsIuNFQrnUupX+zyGSATlk1f/A==} @@ -11457,6 +11579,7 @@ packages: '@lit/reactive-element': 1.4.2 lit-element: 3.2.2 lit-html: 2.5.0 + dev: false /load-json-file@1.1.0: resolution: {integrity: sha512-cy7ZdNRXdablkXYNI049pthVeXFurRyb9+hA/dZzerZ0pGTx42z+y+ssxBaVV2l70t1muq5IdKhn4UtcoGUY9A==} @@ -11619,6 +11742,7 @@ packages: engines: {node: '>=6'} dependencies: p-defer: 1.0.0 + dev: false /map-cache@0.2.2: resolution: {integrity: sha512-8y/eV9QQZCiyn1SprXSrCmqJN0yNRATe+PO8ztwqrvrbdRLA3eYJF0yaR0YayLWkMbsQSKWS9N2gPcGEc4UsZg==} @@ -11694,6 +11818,7 @@ packages: dependencies: map-age-cleaner: 0.1.3 mimic-fn: 3.1.0 + dev: false /memfs@3.4.12: resolution: {integrity: sha512-BcjuQn6vfqP+k100e0E9m61Hyqa//Brp+I3f0OBmN0ATHlFA8vx3Lt8z57R3u2bPqe3WGDBC+nF72fTH7isyEw==} @@ -11831,6 +11956,7 @@ packages: /mimic-fn@3.1.0: resolution: {integrity: sha512-Ysbi9uYW9hFyfrThdDEQuykN4Ey6BuwPD2kpI5ES/nFTDn/98yxYNLZJcgUAKPT/mcrLLKaGzJR9YVxJrIdASQ==} engines: {node: '>=8'} + dev: false /mimic-fn@4.0.0: resolution: {integrity: sha512-vqiC06CuhBTUdZH+RYl8sFrL096vA45Ok5ISO6sE/Mr1jRbGH4Csnhi8f3wKVl7x8mO4Au7Ir9D3Oyv1VYMFJw==} @@ -12091,6 +12217,7 @@ packages: /normalize-path@2.1.1: resolution: {integrity: sha512-3pKJwH184Xo/lnH6oyP1q2pMd7HcypqqmRs91/6/i2CGtWwIKGCkOOMTm/zXbgTEWHw1uNpNi/igc3ePOYHb6w==} engines: {node: '>=0.10.0'} + requiresBuild: true dependencies: remove-trailing-separator: 1.1.0 @@ -12323,6 +12450,7 @@ packages: /p-defer@1.0.0: resolution: {integrity: sha512-wB3wfAxZpk2AzOfUMJNL+d36xothRSyj8EXOa4f6GMqYDN9BJaaSISbsk+wS9abmnebVw95C2Kb5t85UmpCxuw==} engines: {node: '>=4'} + dev: false /p-event@4.2.0: resolution: {integrity: sha512-KXatOjCRXXkSePPb1Nbi0p0m+gQAwdlbhi4wQKJPI1HsMQS9g+Sqp2o+QHziPr7eYJyOZet836KoHEVM1mwOrQ==} @@ -12476,9 +12604,11 @@ packages: /path-browserify@1.0.1: resolution: {integrity: sha512-b7uo2UCUOYZcnF/3ID0lulOJi/bafxa1xPe7ZPsammBSpjSWQkjNxlt635YGS2MiR9GjvuXCtz2emr3jbsz98g==} + dev: false /path-dirname@1.0.2: resolution: {integrity: sha512-ALzNPpyNq9AqXMBjeymIjFDAkAFH06mHJH/cSBHAgU0s4vfpBn6b2nf8tiRLvagKD8RbTpq2FKTBg7cl9l3c7Q==} + requiresBuild: true /path-exists@2.1.0: resolution: {integrity: sha512-yTltuKuhtNeFJKa1PiRzfLAU5182q1y4Eb4XCJ3PBqyzEDkAZRzBrKKBct682ls9reBVHf9udYLN5Nd+K1B9BQ==} @@ -12680,6 +12810,7 @@ packages: postcss: ^8.1.0 dependencies: postcss: 8.4.19 + dev: false /postcss-modules-local-by-default@3.0.3: resolution: {integrity: sha512-e3xDq+LotiGesympRlKNgaJ0PCzoUIdpH0dj47iWAui/kyTgh3CiAr1qP54uodmJhl6p9rN6BoNcdEDVJx9RDw==} @@ -12700,6 +12831,7 @@ packages: postcss: 8.4.19 postcss-selector-parser: 6.0.11 postcss-value-parser: 4.2.0 + dev: false /postcss-modules-scope@2.2.0: resolution: {integrity: sha512-YyEgsTMRpNd+HmyC7H/mh3y+MeFWevy7V1evVhJWewmMbjDHIbZbOXICC2y+m1xI1UVfIT1HMW/O04Hxyu9oXQ==} @@ -12716,6 +12848,7 @@ packages: dependencies: postcss: 8.4.19 postcss-selector-parser: 6.0.11 + dev: false /postcss-modules-values@3.0.0: resolution: {integrity: sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==} @@ -12731,6 +12864,7 @@ packages: dependencies: icss-utils: 5.1.0(postcss@8.4.19) postcss: 8.4.19 + dev: false /postcss-selector-parser@6.0.11: resolution: {integrity: sha512-zbARubNdogI9j7WY4nQJBiNqQf3sLS3wCP4WfOidu+p28LofJqDH1tcXypGrcmMHhDk2t9wGhCsYe/+szLTy1g==} @@ -12756,6 +12890,7 @@ packages: nanoid: 3.3.4 picocolors: 1.0.0 source-map-js: 1.0.2 + dev: false /preferred-pm@3.0.3: resolution: {integrity: sha512-+wZgbxNES/KlJs9q40F/1sfOd/j7f1O9JaHcW5Dsn3aUUOZg3L2bjpVUcKV2jvtElYfoTuQiNeMfQJ4kwUAhCQ==} @@ -12806,6 +12941,7 @@ packages: dependencies: lodash: 4.17.21 renderkid: 3.0.0 + dev: false /pretty-format@27.5.1: resolution: {integrity: sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==} @@ -13051,6 +13187,7 @@ packages: prop-types: 15.8.1 react: 16.14.0 scheduler: 0.19.1 + dev: false /react-dom@18.2.0(react@18.2.0): resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} @@ -13267,6 +13404,7 @@ packages: loose-envify: 1.4.0 object-assign: 4.1.1 prop-types: 15.8.1 + dev: false /react@18.2.0: resolution: {integrity: sha512-/3IjMdb2L9QbBdWiW5e3P2/npwMBaU9mHCSCUzNln0ZCYbcfTsGbTJrU/kGemdH2IWmB2ioZ+zkxtmq6g09fGQ==} @@ -13506,6 +13644,7 @@ packages: /remove-trailing-separator@1.1.0: resolution: {integrity: sha512-/hS+Y0u3aOfIETiaiirUFwDBDzmXPvO+jAfKTitUngIPzdKc6Z0LoFjM/CK5PL4C+eKwHohlHAb6H0VFfmmUsw==} + requiresBuild: true /renderkid@2.0.7: resolution: {integrity: sha512-oCcFyxaMrKsKcTY59qnCAtmDVSLfPbrv6A3tVbPdFMMrv5jaK10V6m40cKsoPNhAqN6rmHW9sswW4o3ruSrwUQ==} @@ -13524,6 +13663,7 @@ packages: htmlparser2: 6.1.0 lodash: 4.17.21 strip-ansi: 6.0.1 + dev: false /repeat-element@1.1.4: resolution: {integrity: sha512-LFiNfRcSu7KK3evMyYOuCzv3L10TW7yC1G2/+StMjK8Y6Vqd2MG7r/Qjw4ghtuCOjFvlnms/iMmLqpvW/ES/WQ==} @@ -13688,6 +13828,7 @@ packages: dependencies: loose-envify: 1.4.0 object-assign: 4.1.1 + dev: false /scheduler@0.23.0: resolution: {integrity: sha512-CtuThmgHNg7zIZWAXi3AsyIzA3n4xx7aNyjwC2VJldO2LMVDhFK+63xGqq6CsJH4rTAt6/M+N4GhZiDYPx9eUw==} @@ -13962,6 +14103,7 @@ packages: /source-map-js@1.0.2: resolution: {integrity: sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==} engines: {node: '>=0.10.0'} + dev: false /source-map-resolve@0.5.3: resolution: {integrity: sha512-Htz+RnsXWk5+P2slx5Jh3Q66vhQj1Cllm0zvnaY98+NFx+Dv2CF/f5O/t8x+KaNdrdIAsruNzoh/KpialbqAnw==} @@ -14272,6 +14414,7 @@ packages: loader-utils: 2.0.4 schema-utils: 3.1.1 webpack: 5.76.0 + dev: false /style-to-object@0.3.0: resolution: {integrity: sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==} @@ -15130,6 +15273,7 @@ packages: range-parser: 1.2.1 schema-utils: 3.1.1 webpack: 5.76.0 + dev: false /webpack-filter-warnings-plugin@1.2.1(webpack@4.46.0): resolution: {integrity: sha512-Ez6ytc9IseDMLPo0qCuNNYzgtUl8NovOqjIq4uAU8LTD4uoa1w1KpZyyzFtLTEMZpkkOkLfL9eN+KGYdk1Qtwg==} @@ -15172,6 +15316,7 @@ packages: /webpack-virtual-modules@0.4.6: resolution: {integrity: sha512-5tyDlKLqPfMqjT3Q9TAqf2YqjwmnUleZwzJi1A5qXnlBCdj2AtOJ6wAWdglTIDOPgOiOrXeBeFcsQ8+aGQ6QbA==} + dev: false /webpack@4.46.0: resolution: {integrity: sha512-6jJuJjg8znb/xRItk7bkT0+Q7AHCYjjFnvKIWQPkNIOyRqoCGvkOs0ipeQzrqz4l5FtN5ZI/ukEHroeX/o1/5Q==} diff --git a/turbo.json b/turbo.json index cd66f13..68b4dac 100644 --- a/turbo.json +++ b/turbo.json @@ -6,6 +6,9 @@ "outputs": ["dist/**"], "inputs": ["../dev/*", "package.json", "tsconfig.json", "src/**/*"] }, + "dev": { + "cache": false + }, "storybook": { "cache": false, "dependsOn": ["^build"]