@dxos/react-ui 0.8.4-main.3a94e84 → 0.8.4-main.3eb6e50203

package/dist/lib/browser/testing/index.mjs.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
-  "sources": ["../../../../src/testing/decorators/withTheme.ts", "../../../../src/testing/decorators/withSurfaceVariantsLayout.tsx"],
-  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator, type StoryContext, type StoryFn } from '@storybook/react';\nimport { useEffect, createElement } from 'react';\n\nimport { defaultTx } from '@dxos/react-ui-theme';\n\nimport { ThemeProvider } from '../../components';\n\nexport const withTheme: Decorator = (Story: StoryFn, context: StoryContext) => {\n  const theme = context?.parameters?.theme || context?.globals?.theme;\n  useEffect(() => {\n    document.documentElement.classList[theme === 'dark' ? 'add' : 'remove']('dark');\n  }, [theme]);\n\n  return createElement(\n    ThemeProvider,\n    {\n      tx: defaultTx,\n    },\n    createElement(Story),\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React, { type ComponentType, type PropsWithChildren } from 'react';\n\nimport { mx, surfaceShadow } from '@dxos/react-ui-theme';\nimport { type Density, type Elevation } from '@dxos/react-ui-types';\n\ntype Config = {\n  elevations?: { elevation: Elevation; surface?: string }[];\n  densities?: Density[];\n};\n\nconst Container = ({ children, elevation, surface }: PropsWithChildren<{ elevation: Elevation; surface?: string }>) => (\n  <div className={mx('rounded-md border border-separator p-2', surface, surfaceShadow({ elevation }))}>{children}</div>\n);\n\nconst Panel = ({\n  Story,\n  elevations,\n  densities,\n  className,\n}: { Story: ComponentType } & Config & { className?: string }) => (\n  <div className={mx('flex flex-col h-full p-4 gap-4', className)}>\n    {elevations?.map(({ elevation, surface }) =>\n      densities?.map((density) => (\n        <Container key={`${elevation}--${density}`} surface={surface} elevation={elevation}>\n          <Story />\n        </Container>\n      )),\n    )}\n  </div>\n);\n\nexport const withSurfaceVariantsLayout = ({\n  elevations = [\n    { elevation: 'base', surface: 'bg-baseSurface' },\n    { elevation: 'positioned', surface: 'bg-cardSurface' },\n    { elevation: 'dialog', surface: 'bg-modalSurface' },\n  ],\n  densities = ['coarse'],\n}: Config = {}): Decorator => {\n  return (Story) => (\n    <div className='fixed inset-0 grid grid-cols-2 overflow-y-auto'>\n      <Panel Story={Story} className='light' elevations={elevations} densities={densities} />\n      <Panel Story={Story} className='dark' elevations={elevations} densities={densities} />\n    </div>\n  );\n};\n"],
-  "mappings": ";;;;;AAKA,SAASA,WAAWC,qBAAqB;AAEzC,SAASC,iBAAiB;AAInB,IAAMC,YAAuB,CAACC,OAAgBC,YAAAA;AACnD,QAAMC,QAAQD,SAASE,YAAYD,SAASD,SAASG,SAASF;AAC9DG,YAAU,MAAA;AACRC,aAASC,gBAAgBC,UAAUN,UAAU,SAAS,QAAQ,QAAA,EAAU,MAAA;EAC1E,GAAG;IAACA;GAAM;AAEV,SAAOO,cACLC,eACA;IACEC,IAAIC;EACN,GACAH,cAAcT,KAAAA,CAAAA;AAElB;;;;ACnBA,OAAOa,WAA2D;AAElE,SAASC,IAAIC,qBAAqB;AAQlC,IAAMC,YAAY,CAAC,EAAEC,UAAUC,WAAWC,QAAO,MAAiE;;;WAChH,sBAAA,cAACC,OAAAA;MAAIC,WAAWC,GAAG,0CAA0CH,SAASI,cAAc;QAAEL;MAAU,CAAA,CAAA;OAAMD,QAAAA;;;;;AAGxG,IAAMO,QAAQ,CAAC,EACbC,OACAC,YACAC,WACAN,UAAS,MACkD;;;WAC3D,sBAAA,cAACD,OAAAA;MAAIC,WAAWC,GAAG,kCAAkCD,SAAAA;OAClDK,YAAYE,IAAI,CAAC,EAAEV,WAAWC,QAAO,MACpCQ,WAAWC,IAAI,CAACC,YACd,sBAAA,cAACb,WAAAA;MAAUc,KAAK,GAAGZ,SAAAA,KAAcW,OAAAA;MAAWV;MAAkBD;OAC5D,sBAAA,cAACO,OAAAA,IAAAA,CAAAA,CAAAA,CAAAA,CAAAA;;;;;AAOJ,IAAMM,4BAA4B,CAAC,EACxCL,aAAa;EACX;IAAER,WAAW;IAAQC,SAAS;EAAiB;EAC/C;IAAED,WAAW;IAAcC,SAAS;EAAiB;EACrD;IAAED,WAAW;IAAUC,SAAS;EAAkB;GAEpDQ,YAAY;EAAC;EAAS,IACZ,CAAC,MAAC;AACZ,SAAO,CAACF,UACN,sBAAA,cAACL,OAAAA;IAAIC,WAAU;KACb,sBAAA,cAACG,OAAAA;IAAMC;IAAcJ,WAAU;IAAQK;IAAwBC;MAC/D,sBAAA,cAACH,OAAAA;IAAMC;IAAcJ,WAAU;IAAOK;IAAwBC;;AAGpE;",
-  "names": ["useEffect", "createElement", "defaultTx", "withTheme", "Story", "context", "theme", "parameters", "globals", "useEffect", "document", "documentElement", "classList", "createElement", "ThemeProvider", "tx", "defaultTx", "React", "mx", "surfaceShadow", "Container", "children", "elevation", "surface", "div", "className", "mx", "surfaceShadow", "Panel", "Story", "elevations", "densities", "map", "density", "key", "withSurfaceVariantsLayout"]
+  "sources": ["../../../../src/testing/decorators/withLayout.tsx", "../../../../src/testing/decorators/withLayoutVariants.tsx", "../../../../src/testing/decorators/withTheme.tsx"],
+  "sourcesContent": ["//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React, { type FC, type PropsWithChildren, memo } from 'react';\n\nimport { type ClassNameValue, type ThemedClassName } from '@dxos/react-ui';\nimport { mx } from '@dxos/ui-theme';\n\nexport type ContainerProps = ThemedClassName<PropsWithChildren>;\n\nexport type ContainerType = 'fullscreen' | 'column';\n\nexport type WithLayoutProps =\n  | FC<ContainerProps>\n  | {\n      classNames?: ClassNameValue;\n      layout?: ContainerType;\n      scroll?: boolean;\n    };\n\n/**\n * Adds layout container.\n */\nexport const withLayout =\n  (props: WithLayoutProps = {}): Decorator =>\n  (Story) => {\n    // Prevent re-rendering of the story.\n    const MemoizedStory = memo(Story);\n    if (typeof props === 'function') {\n      const Container = props;\n      return (\n        <Container>\n          <MemoizedStory />\n        </Container>\n      );\n    } else {\n      const { layout = 'fullscreen', classNames, scroll } = props;\n      const Container = layouts[layout] ?? layouts.fullscreen;\n      return (\n        <Container classNames={mx(classNames, scroll ? 'overflow-y-auto' : 'overflow-hidden')}>\n          <MemoizedStory />\n        </Container>\n      );\n    }\n  };\n\nconst layouts: Record<ContainerType, FC<ContainerProps>> = {\n  fullscreen: ({ children, classNames }: ContainerProps) => (\n    <div role='none' className={mx('fixed inset-0 flex overflow-hidden bg-deckSurface', classNames)}>\n      {children}\n    </div>\n  ),\n\n  column: ({ children, classNames }: ContainerProps) => (\n    <div role='none' className='fixed inset-0 flex justify-center overflow-hidden bg-deckSurface'>\n      <div role='none' className={mx('flex flex-col is-[40rem] bg-baseSurface', classNames)}>\n        {children}\n      </div>\n    </div>\n  ),\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React, { type ComponentType, type PropsWithChildren } from 'react';\n\nimport { mx, surfaceShadow } from '@dxos/ui-theme';\nimport { type Density, type Elevation } from '@dxos/ui-types';\n\ntype Config = {\n  elevations?: { elevation: Elevation; surface?: string }[];\n  densities?: Density[];\n};\n\nconst Container = ({ children, elevation, surface }: PropsWithChildren<{ elevation: Elevation; surface?: string }>) => (\n  <div className={mx('rounded-md border border-separator', surface, surfaceShadow({ elevation }))}>{children}</div>\n);\n\nconst Panel = ({\n  Story,\n  elevations,\n  densities,\n  className,\n}: { Story: ComponentType } & Config & { className?: string }) => (\n  <div className={mx('flex flex-col bs-full p-4 gap-4', className)}>\n    {elevations?.map(({ elevation, surface }) =>\n      densities?.map((density) => (\n        <Container key={`${elevation}--${density}`} surface={surface} elevation={elevation}>\n          <Story />\n        </Container>\n      )),\n    )}\n  </div>\n);\n\nexport const withLayoutVariants = ({\n  elevations = [\n    { elevation: 'base', surface: 'bg-baseSurface' },\n    { elevation: 'positioned', surface: 'bg-cardSurface' },\n    { elevation: 'dialog', surface: 'bg-modalSurface' },\n  ],\n  densities = ['coarse'],\n}: Config = {}): Decorator => {\n  return (Story) => (\n    <div className='fixed inset-0 grid grid-cols-2 overflow-y-auto'>\n      <Panel Story={Story} className='light' elevations={elevations} densities={densities} />\n      <Panel Story={Story} className='dark' elevations={elevations} densities={densities} />\n    </div>\n  );\n};\n", "//\n// Copyright 2023 DXOS.org\n//\n\nimport { type Decorator } from '@storybook/react';\nimport React, { memo } from 'react';\n\nimport { defaultTx } from '@dxos/ui-theme';\nimport { type ThemeMode } from '@dxos/ui-types';\n\nimport { type ThemeContextValue, ThemeProvider, Tooltip } from '../../components';\n\n/**\n * Adds theme decorator.\n */\nexport const withTheme =\n  ({ tx = defaultTx, ...props }: Partial<ThemeContextValue> = {}): Decorator =>\n  (Story, context) => {\n    const {\n      globals: { theme },\n      parameters: { translations },\n    } = context;\n\n    // Prevent re-rendering of the story.\n    const MemoizedStory = memo(Story);\n\n    return (\n      <ThemeProvider {...props} tx={tx} themeMode={theme as ThemeMode} resourceExtensions={translations} noCache>\n        <Tooltip.Provider>\n          <MemoizedStory />\n        </Tooltip.Provider>\n      </ThemeProvider>\n    );\n  };\n"],
+  "mappings": "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",
+  "names": ["React", "memo", "mx", "withLayout", "props", "Story", "MemoizedStory", "memo", "Container", "layout", "classNames", "scroll", "layouts", "fullscreen", "mx", "children", "div", "role", "className", "column", "React", "mx", "surfaceShadow", "Container", "children", "elevation", "surface", "React", "div", "className", "mx", "surfaceShadow", "Panel", "Story", "elevations", "densities", "map", "density", "key", "withLayoutVariants", "React", "memo", "defaultTx", "withTheme", "tx", "defaultTx", "props", "Story", "context", "globals", "theme", "parameters", "translations", "MemoizedStory", "memo", "React", "ThemeProvider", "themeMode", "resourceExtensions", "noCache", "Tooltip", "Provider"]
 }