@preply/ds-docs 7.1.0 → 8.0.0

package/{config → .storybook}/decorators/preventIframeFromScrollingParent.tsx

@@ -1,5 +1,5 @@
 import React, { useEffect } from 'react';
-import type { Decorator } from '@storybook/react';
+import type { Decorator } from '@storybook/react-vite';
 import styles from './preventIframeFromScrollingParent.module.css';
 
 /**

package/{config → .storybook}/decorators/withIntlProvider.tsx

@@ -1,4 +1,4 @@
-import type { Decorator, StoryContext } from '@storybook/react';
+import type { Decorator, StoryContext } from '@storybook/react-vite';
 import React from 'react';
 import { IntlProvider } from 'react-intl';
 

package/{config → .storybook}/main.ts

@@ -1,18 +1,10 @@
-import { mkdirSync } from 'fs';
+// This file has been automatically migrated to valid ESM format by Storybook.
+import { createRequire } from 'node:module';
 import { dirname, join, resolve } from 'path';
 
 import type { StorybookConfig } from '@storybook/react-vite';
 
-import { packages } from './packages';
-import { preparePackageStatics, staticsWatcher } from './utils/statics';
-
-const isDev = process.env.NODE_ENV === 'development';
-
-if (isDev) {
-    console.info('watch statics');
-    mkdirSync('./static', { recursive: true });
-    packages.forEach(pkg => preparePackageStatics(pkg, staticsWatcher));
-}
+const require = createRequire(import.meta.url);
 
 function getAbsolutePath(value) {
     return dirname(require.resolve(join(value, 'package.json')));
@@ -20,17 +12,16 @@ function getAbsolutePath(value) {
 
 const config: StorybookConfig = {
     stories: [
-        join(resolve('../docs-pages'), 'docs/**/*.@(stories.tsx|mdx)'),
-        join(resolve('../../packages/web-lib'), 'src/**/*.stories.tsx'),
-        join(resolve('../../packages/web-lib'), 'src/**/*.mdx'),
+        '../pages/**/*.@(stories.tsx|mdx)',
+        '../../../packages/web-lib/src/**/*.stories.tsx',
+        '../../../packages/web-lib/src/**/*.mdx',
     ],
-    staticDirs: ['../static'],
+    staticDirs: ['../public'],
     addons: [
         getAbsolutePath('@storybook/addon-a11y'),
-        getAbsolutePath('@storybook/addon-actions'),
         getAbsolutePath('@storybook/addon-links'),
-        getAbsolutePath('@storybook/addon-essentials'),
-        getAbsolutePath('@storybook/experimental-addon-test'),
+        getAbsolutePath('@storybook/addon-vitest'),
+        getAbsolutePath('@storybook/addon-docs'),
     ],
     framework: {
         name: getAbsolutePath('@storybook/react-vite'),
@@ -48,9 +39,6 @@ const config: StorybookConfig = {
             include: [join(resolve('../../packages/web-lib'), 'src/components/**/*.tsx')],
         },
     },
-    features: {
-        viewportStoryGlobals: true,
-    },
 };
 
 export default config;

package/{config/manager.js → .storybook/manager.ts}

@@ -1,11 +1,11 @@
-const { addons } = require('@storybook/manager-api');
-const { create } = require('@storybook/theming');
+import { addons } from 'storybook/manager-api';
+import { create } from 'storybook/theming';
 
 const theme = create({
     base: 'light',
     brandTitle: 'Path',
     brandUrl: 'https://ds.preply.org',
-    brandImage: './global/docs/static/logo.svg',
+    brandImage: './assets/logo.svg',
 });
 
 addons.setConfig({

package/{config → .storybook}/preview-head.html

@@ -9,5 +9,10 @@
     type="font/woff2"
     crossorigin=""
 />
+<style>
+    .prismjs * {
+        font-family: unset;
+    }
+</style>
 
 <noscript id="jss-insertion-point"></noscript>

package/{config → .storybook}/preview.tsx

@@ -1,8 +1,10 @@
-import { Preview } from '@storybook/react';
-import { DocContextDSWeb } from '@preply/ds-docs-context';
+import { Preview } from '@storybook/react-vite';
 import { withRootProvider } from './decorators/withRootProvider';
 import { intlGlobals, intlLoader, withIntlProvider } from './decorators/withIntlProvider';
 import { PreventIframeFromScrollingParent } from './decorators/preventIframeFromScrollingParent';
+import { RootProvider } from '@preply/ds-web-root';
+import { DocsContainer as StorybookDocsContainer } from '@storybook/addon-docs/blocks';
+import React from 'react';
 
 const viewports = {
     default: {
@@ -49,21 +51,29 @@ const viewports = {
     },
 };
 
+function DocsContainer({ children, ...props }: { children: React.ReactNode }) {
+    return (
+        <RootProvider theme="tokyo-ui">
+            <StorybookDocsContainer {...props}>{children}</StorybookDocsContainer>
+        </RootProvider>
+    );
+}
+
 const preview: Preview = {
     tags: ['autodocs', 'a11y-test'],
+
     parameters: {
         layout: 'fullscreen',
         viewport: {
             options: viewports,
         },
         backgrounds: {
-            default: 'white',
-            values: [
-                {
+            options: {
+                white: {
                     name: 'white',
                     value: '#ffffff',
                 },
-            ],
+            },
         },
         options: {
             storySort: {
@@ -81,7 +91,8 @@ const preview: Preview = {
             selectedPanel: 'addon-controls',
         },
         docs: {
-            container: DocContextDSWeb,
+            container: DocsContainer,
+            codePanel: true,
         },
         /* This is currently only enabled for the playground story. */
         liveCodeEditor: { disable: true },
@@ -93,6 +104,7 @@ const preview: Preview = {
             options: {
                 preload: false,
             },
+
             config: {
                 rules: [
                     {
@@ -104,13 +116,26 @@ const preview: Preview = {
                     },
                 ],
             },
+
+            // 'todo' - show a11y violations in the test UI only
+            // 'error' - fail CI on a11y violations
+            // 'off' - skip a11y checks entirely
+            test: 'todo',
         },
     },
+
     decorators: [PreventIframeFromScrollingParent, withRootProvider, withIntlProvider],
     loaders: [intlLoader],
+
     globalTypes: {
         ...intlGlobals,
     },
+
+    initialGlobals: {
+        backgrounds: {
+            value: 'white',
+        },
+    },
 };
 
 export default preview;

package/.storybook/vitest.setup.ts

@@ -0,0 +1,5 @@
+import { setProjectAnnotations } from '@storybook/react-vite';
+import * as previewAnnotations from './preview';
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
+
+setProjectAnnotations([a11yAddonAnnotations, previewAnnotations]);

package/README.md

@@ -29,7 +29,7 @@ To execute the static build run `yarn build && yarn serve`.
 
 ### Which documentation is included in this package?
 
-None. Homepage and DS wide capabilities are documented in [@preply/ds-docs-pages](../../support/docs-pages/README.md).
+Homepage and DS wide capabilities are documented in [pages/](pages/).
 
 Remaining docs are co-located with the source code in [@preply/ds-web-lib](../../packages/web-lib/README.md) (components) and [@preply/ds-web-core](../../packages/web-core/README.md) (capabilities).
 
@@ -44,7 +44,6 @@ Uses `storybook@latest` + `wepback`.
 
 Scans for pages in the monorepo, namely in:
 
-- [@preply/ds-docs-pages](../../support/docs-pages/README.md)
 - [@preply/ds-web-lib/src/components](../../packages/web-lib/README.md)
 
 Details about global tools and configurations in [@preply/ds-workspace](../../README.md).

package/dist/assets/00.LayoutFlex.stories-Trn9fl1r.js

@@ -0,0 +1,85 @@
+import{j as n}from"./iframe-CWgEsn_I.js";import{L as r}from"./LayoutFlexItem-CG7Crdkt.js";import{L as p}from"./LayoutFlex-TxluN-Yw.js";import{S as t,a as h}from"./consts-KAYct7Gj.js";import"./preload-helper-Dp1pzeXC.js";import"./align-self-Dj6Hw1ei.js";import"./layout-relative-Dd1oD7no.js";import"./layout-relative.module-DtLbhGhZ.js";import"./constants-DYYVurUY.js";import"./filterAttributesPassedByRadixUIAtRuntime-B7QTVwVw.js";import"./componentNames-CmmTyjin.js";const C={title:"components/LayoutFlex",component:p,subcomponents:{LayoutFlexItem:r},argTypes:{gap:{description:t},padding:{description:h},direction:{description:t},justifyContent:{description:t},alignItems:{description:t},hide:{description:t},relative:{description:t}}},e=()=>n.jsxs(p,{gap:"16",children:[n.jsx("div",{style:{minWidth:"100px",backgroundColor:"hotpink"},children:" "}),n.jsx("div",{style:{minWidth:"100px",backgroundColor:"hotpink"},children:" "}),n.jsx(r,{stretch:!0,children:n.jsx("div",{style:{minWidth:"100px",backgroundColor:"hotpink",textAlign:"center"},children:"stretch"})})]});e.storyName="LayoutFlex";const o={parameters:{chromatic:{disableSnapshot:!0}},args:{gap:"16",children:n.jsxs(n.Fragment,{children:[n.jsx("div",{style:{minWidth:"100px",height:50,backgroundColor:"hotpink"},children:" "}),n.jsx("div",{style:{minWidth:"100px",height:75,backgroundColor:"hotpink"},children:" "}),n.jsx(r,{stretch:!0,children:n.jsx("div",{style:{minWidth:"100px",height:100,backgroundColor:"hotpink",textAlign:"center"}})})]}),dataset:{qaid:"layout-flex"}},argTypes:{dataset:{control:"object"},nowrap:{control:"boolean"},hide:{control:"boolean"},relative:{control:"boolean"},inline:{control:"boolean"},direction:{control:"select"},children:{control:!1},column:{table:{disable:!0}},reverse:{table:{disable:!0}}}};var i,a,l;e.parameters={...e.parameters,docs:{...(i=e.parameters)==null?void 0:i.docs,source:{originalSource:`() => <LayoutFlex gap="16">
+        <div style={{
+    minWidth: '100px',
+    backgroundColor: 'hotpink'
+  }}> </div>
+        <div style={{
+    minWidth: '100px',
+    backgroundColor: 'hotpink'
+  }}> </div>
+        <LayoutFlexItem stretch>
+            <div style={{
+      minWidth: '100px',
+      backgroundColor: 'hotpink',
+      textAlign: 'center'
+    }}>
+                stretch
+            </div>
+        </LayoutFlexItem>
+    </LayoutFlex>`,...(l=(a=e.parameters)==null?void 0:a.docs)==null?void 0:l.source}}};var s,d,c;o.parameters={...o.parameters,docs:{...(s=o.parameters)==null?void 0:s.docs,source:{originalSource:`{
+  parameters: {
+    chromatic: {
+      disableSnapshot: true
+    }
+  },
+  args: {
+    gap: '16',
+    children: <>
+                <div style={{
+        minWidth: '100px',
+        height: 50,
+        backgroundColor: 'hotpink'
+      }}> </div>
+                <div style={{
+        minWidth: '100px',
+        height: 75,
+        backgroundColor: 'hotpink'
+      }}> </div>
+                <LayoutFlexItem stretch>
+                    <div style={{
+          minWidth: '100px',
+          height: 100,
+          backgroundColor: 'hotpink',
+          textAlign: 'center'
+        }}></div>
+                </LayoutFlexItem>
+            </>,
+    dataset: {
+      qaid: 'layout-flex'
+    }
+  },
+  argTypes: {
+    dataset: {
+      control: 'object'
+    },
+    nowrap: {
+      control: 'boolean'
+    },
+    hide: {
+      control: 'boolean'
+    },
+    relative: {
+      control: 'boolean'
+    },
+    inline: {
+      control: 'boolean'
+    },
+    direction: {
+      control: 'select'
+    },
+    children: {
+      control: false
+    },
+    // Disable deprecated props
+    column: {
+      table: {
+        disable: true
+      }
+    },
+    reverse: {
+      table: {
+        disable: true
+      }
+    }
+  }
+}`,...(c=(d=o.parameters)==null?void 0:d.docs)==null?void 0:c.source}}};const W=["Base","Playground"];export{e as Base,o as Playground,W as __namedExportsOrder,C as default};

package/dist/assets/{00.applications-CUkoHGre.js → 00.applications-DgG50o0h.js}

@@ -1,4 +1,4 @@
-import{j as e}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as r}from"./index-BN6VMYqa.js";import{M as o}from"./index-CRQycg-8.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-C3SpczPa.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-CA5R8PN9.js";import"./index-DrFu-skq.js";function t(s){const n={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...r(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(o,{title:"Guides/Installation/Applications"}),`
+import{j as e,M as o}from"./iframe-CWgEsn_I.js";import{useMDXComponents as r}from"./index-BiSZC2o0.js";import"./preload-helper-Dp1pzeXC.js";function t(s){const n={a:"a",code:"code",em:"em",h1:"h1",h2:"h2",li:"li",p:"p",pre:"pre",strong:"strong",ul:"ul",...r(),...s.components};return e.jsxs(e.Fragment,{children:[e.jsx(o,{title:"Guides/Installation/Applications"}),`
 `,e.jsx(n.h1,{id:"installation-applications",children:"Installation: Applications"}),`
 `,e.jsx(n.p,{children:"This guide applies to both client-side and server-side rendered React applications."}),`
 `,e.jsx(n.h2,{id:"packages",children:"Packages"}),`
@@ -47,4 +47,4 @@ ReactDOM.render(
     document.getElementById('root'),
 );
 `})}),`
-`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note:"})," If your app is rendered server side, continue with the instructions in the ",e.jsx(n.a,{href:"/story/guides-installation-ssr--page",children:"Installation: SSR"})," guide."]})]})}function y(s={}){const{wrapper:n}={...r(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(t,{...s})}):t(s)}export{y as default};
+`,e.jsxs(n.p,{children:[e.jsx(n.strong,{children:"Note:"})," If your app is rendered server side, continue with the instructions in the ",e.jsx(n.a,{href:"/story/guides-installation-ssr--page",children:"Installation: SSR"})," guide."]})]})}function c(s={}){const{wrapper:n}={...r(),...s.components};return n?e.jsx(n,{...s,children:e.jsx(t,{...s})}):t(s)}export{c as default};

package/dist/assets/{00.favicons.guide-BACLlsQJ.js → 00.favicons.guide-BPbT_6WU.js}

@@ -1,4 +1,4 @@
-import{j as n}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as t}from"./index-BN6VMYqa.js";import{M as i}from"./index-CRQycg-8.js";import"./index-ChsGqxH_.js";import"./index-Cb9e4tly.js";import"./_commonjsHelpers-Cpj98o6Y.js";import"./iframe-C3SpczPa.js";import"./index-s7KTOhR7.js";import"./index-BPCsOyHr.js";import"./index-CA5R8PN9.js";import"./index-DrFu-skq.js";function o(s){const e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...t(),...s.components};return n.jsxs(n.Fragment,{children:[n.jsx(i,{title:"Guides/Assets/Favicons"}),`
+import{j as n,M as o}from"./iframe-CWgEsn_I.js";import{useMDXComponents as i}from"./index-BiSZC2o0.js";import"./preload-helper-Dp1pzeXC.js";function t(s){const e={a:"a",code:"code",h1:"h1",h2:"h2",h3:"h3",p:"p",pre:"pre",strong:"strong",...i(),...s.components};return n.jsxs(n.Fragment,{children:[n.jsx(o,{title:"Guides/Assets/Favicons"}),`
 `,n.jsx(e.h1,{id:"favicons",children:"Favicons"}),`
 `,n.jsxs(e.p,{children:["The optimised assets are available under ",n.jsx(e.strong,{children:"preply.com"})," in the formats required by modern and legacy browsers, as well as Android and iOS devices."]}),`
 `,n.jsxs(e.p,{children:["Refer to ",n.jsx(e.a,{href:"https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs",rel:"nofollow",children:"How to Favicon in 2022: Six files that fit most needs"})," for a detailed breakdown of the formats."]}),`
@@ -18,4 +18,4 @@ import{j as n}from"./jsx-runtime-BTJTZTIL.js";import{useMDXComponents as t}from"
     href="https://static.preply.com/ds/icons/rebrand-23-v0/icon-180.pngg"
 />
 <link rel="manifest" href="https://static.preply.com/ds/icons/rebrand-23-v0/web.manifest.json" />
-`})})]})}function g(s={}){const{wrapper:e}={...t(),...s.components};return e?n.jsx(e,{...s,children:n.jsx(o,{...s})}):o(s)}export{g as default};
+`})})]})}function l(s={}){const{wrapper:e}={...i(),...s.components};return e?n.jsx(e,{...s,children:n.jsx(t,{...s})}):t(s)}export{l as default};