@workday/canvas-kit-docs 13.0.0-alpha.998-next.0 → 13.0.1

package/dist/mdx/style-props/examples/Grid.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Grid} from '@workday/canvas-kit-react/layout';
 
 const baseStyles = {

package/dist/mdx/style-props/examples/GridItem.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Grid} from '@workday/canvas-kit-react/layout';
 
 const baseStyles = {

package/dist/mdx/style-props/examples/Layout.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Flex} from '@workday/canvas-kit-react/layout';
 
 const baseStyles = {

package/dist/mdx/style-props/examples/Other.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Box} from '@workday/canvas-kit-react/layout';
 import {colors} from '@workday/canvas-kit-react/tokens';
 

package/dist/mdx/style-props/examples/Position.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Box} from '@workday/canvas-kit-react/layout';
 
 const baseStyles = {
@@ -11,7 +10,7 @@ const baseStyles = {
 
 export default () => {
   return (
-    <>
+    <div>
       <Box
         backgroundColor="cinnamon300"
         left={0}
@@ -45,6 +44,6 @@ export default () => {
       >
         Right
       </Box>
-    </>
+    </div>
   );
 };

package/dist/mdx/style-props/examples/Space.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Box} from '@workday/canvas-kit-react/layout';
 
 const baseStyles = {
@@ -9,7 +8,7 @@ const baseStyles = {
 };
 
 export default () => (
-  <>
+  <div>
     <Box backgroundColor="cinnamon300" margin="xxs" padding="s" textAlign="center" {...baseStyles}>
       <Box border="dotted 2px" borderColor="blackPepper500">
         Small
@@ -25,5 +24,5 @@ export default () => (
         Large
       </Box>
     </Box>
-  </>
+  </div>
 );

package/dist/mdx/style-props/examples/Text.tsx

@@ -1,4 +1,3 @@
-import * as React from 'react';
 import {Box} from '@workday/canvas-kit-react/layout';
 
 export default () => (

package/lib/ExampleCodeBlock.tsx

@@ -7,7 +7,17 @@ import {calc, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
 import {system} from '@workday/canvas-tokens-web';
 import {vscDarkPlus} from 'react-syntax-highlighter/dist/cjs/styles/prism';
 import {checkCircleIcon, copyIcon} from '@workday/canvas-system-icons-web';
-import {Tooltip} from '@workday/canvas-kit-react';
+import {Tooltip} from '@workday/canvas-kit-react/tooltip';
+import sdk from '@stackblitz/sdk';
+import tsconfigFile from '!!raw-loader!./stackblitzFiles/tsconfig.json';
+import {packageJSONFile} from './stackblitzFiles/packageJSONFile';
+import indexHTMLFile from '!!raw-loader!./stackblitzFiles/index.html';
+import mainFile from '!!raw-loader!./stackblitzFiles/main.tsx';
+import viteConfigFile from '!!raw-loader!./stackblitzFiles/vite.config.ts';
+import eslintrc from '!!raw-loader!./stackblitzFiles/.eslintrc.cjs.txt';
+import tsconfigNodeFile from '!!raw-loader!./stackblitzFiles/tsconfig.node.json';
+import appFile from '!!raw-loader!./stackblitzFiles/App.tsx';
+import viteEnvFile from '!!raw-loader!./stackblitzFiles/vite-env.d.ts';
 
 const cardStencil = createStencil({
   base: {
@@ -21,10 +31,12 @@ const cardStencil = createStencil({
       boxShadow: system.depth[1],
       borderRadius: system.shape.x1,
     },
-    '[data-part="code-toggle-btn"]': {
+    '[data-part="code-toggle-stackblitz-btn-container"]': {
       position: 'absolute',
       right: calc.negate(px2rem(1)),
       bottom: calc.negate(px2rem(1)),
+      display: 'flex',
+      gap: system.space.x2,
     },
     '[data-part="copy-btn"]': {
       position: 'absolute',
@@ -70,17 +82,42 @@ export const ExampleCodeBlock = ({code}: any) => {
     navigator.clipboard.writeText(textInput.current.textContent);
   };
 
-  // React.useEffect(() => {
-  //   if (copied) {
-  //     const copyCodeTimeout = setTimeout(() => {
-  //       setCopied(false);
-  //     }, 2000);
+  /**
+   * `code` returns our examples. We need to rewrite them so that they export `Demo`.
+   */
+  const handleExampleRewrite = (code: any) => {
+    return code
+      .replace(/\bexport\s+const\s+(\w+)\s*=/, `export const Demo =`)
+      .replace(/export default/, 'export const Demo =');
+  };
 
-  //     return () => {
-  //       clearTimeout(copyCodeTimeout);
-  //     };
-  //   }
-  // }, [copied]);
+  const openProjectInStackblitz = () => {
+    sdk.openProject(
+      {
+        files: {
+          'src/Demo.tsx': handleExampleRewrite(code.__RAW__),
+          'src/vite-env-d.ts': viteEnvFile,
+          'src/App.tsx': appFile,
+          'tsconfig.node.json': tsconfigNodeFile,
+          '.eslintrc.js': eslintrc,
+          'vite.config.ts': viteConfigFile,
+          'src/main.tsx': mainFile,
+          'index.html': indexHTMLFile,
+          'tsconfig.json': tsconfigFile,
+          'package.json': packageJSONFile,
+        },
+        template: 'node',
+        title: `Demo`,
+        description: `This is a Canvas Kit Demo. Edit and play around!`,
+      },
+
+      // Options
+      {
+        newWindow: true,
+        openFile: 'src/Demo.tsx',
+      }
+    );
+  };
 
   return (
     <div {...cardStencil({opened: isCodeDisplayed})}>
@@ -88,13 +125,14 @@ export const ExampleCodeBlock = ({code}: any) => {
         <Card.Body>
           {React.createElement(code)}
           {code && (
-            <TertiaryButton
-              size="extraSmall"
-              onClick={() => setCodeDisplayed(!isCodeDisplayed)}
-              data-part="code-toggle-btn"
-            >
-              {!isCodeDisplayed ? 'Show Code' : 'Hide Code'}
-            </TertiaryButton>
+            <div data-part="code-toggle-stackblitz-btn-container">
+              <TertiaryButton size="extraSmall" onClick={() => openProjectInStackblitz()}>
+                ⚡️ Edit in Stackblitz
+              </TertiaryButton>
+              <TertiaryButton size="extraSmall" onClick={() => setCodeDisplayed(!isCodeDisplayed)}>
+                {!isCodeDisplayed ? 'Show Code' : 'Hide Code'}
+              </TertiaryButton>
+            </div>
           )}
         </Card.Body>
       </Card>

package/lib/MDXElements.tsx

@@ -25,7 +25,7 @@ export const MDX = createComponent('div')({
  */
 const Button = (props: any) => {
   const components = useMDXComponents();
-  if (props['data-symbol'] !== undefined) {
+  if (props['data-symbol'] !== undefined && props.children) {
     return (
       <code>
         <SymbolDialog
@@ -49,8 +49,8 @@ const Button = (props: any) => {
 function convertLinkToSymbolLinks(input: string): string {
   return input.replace(
     /{@link ([a-z0-9.]+)( [a-z0-9.]+)?}/gi,
-    (substr, symbol, text = '') =>
-      `<button href="#" data-symbol="${text.trim()}" class="token symbol">${symbol}</button>`
+    (_substr, symbol, text = '') =>
+      `<button data-symbol="${text.trim()}" className="token symbol">${symbol}</button>`
   );
 }
 

package/lib/StylePropsTable.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {Box} from '@workday/canvas-kit-react/layout';
 import {ExternalHyperlink} from '@workday/canvas-kit-react';
 import {Table} from './Table';
@@ -38,7 +37,7 @@ export const StylePropsTable = ({styleProps = []}: StylePropsTableProps) => {
                 const mdnUrl = `https://developer.mozilla.org/en-US/docs/Web/CSS/${formattedName}`;
                 return (
                   <Box display="inline-block" marginInlineEnd="xxxs">
-                    <ExternalHyperlink href={mdnUrl} key={i}>
+                    <ExternalHyperlink href={mdnUrl} key={i} iconLabel="Open link in new window">
                       {formattedName}
                     </ExternalHyperlink>
                   </Box>

package/lib/Table.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {createComponent, StyledType} from '@workday/canvas-kit-react/common';
 import {Box, BoxProps} from '@workday/canvas-kit-react/layout';
 import {Text, TextProps} from '@workday/canvas-kit-react/text';

package/lib/stackblitzFiles/.eslintrc.cjs.txt

@@ -0,0 +1,15 @@
+module.exports = {
+  root: true,
+  env: {browser: true, es2020: true},
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': ['warn', {allowConstantExport: true}],
+  },
+};

package/lib/stackblitzFiles/App.tsx

@@ -0,0 +1,33 @@
+import {
+  CanvasProvider,
+  ContentDirection,
+  PartialEmotionCanvasTheme,
+  useTheme,
+} from '@workday/canvas-kit-react/common';
+import {createStyles} from '@workday/canvas-kit-styling';
+
+import {Demo} from './Demo';
+import {system} from '@workday/canvas-tokens-web';
+
+const mainContentStyles = createStyles({
+  padding: system.space.x4,
+});
+
+export const App = () => {
+  // useTheme is filling in the Canvas theme object if any keys are missing
+  const canvasTheme: PartialEmotionCanvasTheme = useTheme({
+    canvas: {
+      direction: ContentDirection.LTR,
+    },
+  });
+
+  return (
+    <CanvasProvider theme={canvasTheme}>
+      <>
+        <main className={mainContentStyles}>
+          <Demo />
+        </main>
+      </>
+    </CanvasProvider>
+  );
+};

package/lib/stackblitzFiles/Demo.tsx

@@ -0,0 +1 @@
+export const Demo = ({}) => <div></div>;

package/lib/stackblitzFiles/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

package/lib/stackblitzFiles/main.tsx

@@ -0,0 +1,27 @@
+import {createRoot} from 'react-dom/client';
+import {fonts} from '@workday/canvas-kit-react-fonts';
+import {system} from '@workday/canvas-tokens-web';
+import {cssVar, injectGlobal} from '@workday/canvas-kit-styling';
+import {App} from './App';
+
+import '@workday/canvas-tokens-web/css/base/_variables.css';
+import '@workday/canvas-tokens-web/css/brand/_variables.css';
+import '@workday/canvas-tokens-web/css/system/_variables.css';
+
+//@ts-ignore
+injectGlobal({
+  ...fonts,
+  'html, body': {
+    fontFamily: cssVar(system.fontFamily.default),
+    margin: 0,
+    minHeight: '100vh',
+  },
+  '#root, #root < div': {
+    minHeight: '100vh',
+    ...system.type.body.small,
+  },
+});
+
+const container = document.getElementById('root')!;
+const root = createRoot(container);
+root.render(<App />);

package/lib/stackblitzFiles/packageJSONFile.ts

@@ -0,0 +1,42 @@
+// @ts-ignore: Cannot find module error
+import {version} from '../../../../lerna.json';
+export const packageJSONFile = `{
+  "name": "vite-react-typescript-starter",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "@emotion/css": "11.11.2",
+    "@emotion/react": "11.11.4",
+    "@types/react": "18.2.60",
+    "@types/react-dom": "18.2.19",
+    "@workday/canvas-kit-labs-react": "${version}",
+    "@workday/canvas-kit-preview-react": "${version}",
+    "@workday/canvas-kit-react": "${version}",
+    "@workday/canvas-kit-react-fonts": "^${version}",
+    "@workday/canvas-kit-styling": "${version}",
+    "@workday/canvas-system-icons-web": "3.0.22",
+    "@workday/canvas-tokens-web": "2.0.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.59",
+    "@types/react-dom": "^18.2.19",
+    "@typescript-eslint/eslint-plugin": "^7.1.0",
+    "@typescript-eslint/parser": "^7.1.0",
+    "@vitejs/plugin-react": "^4.2.1",
+    "eslint": "^8.57.0",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-react-refresh": "^0.4.5",
+    "typescript": "^5.2.2",
+    "vite": "^5.1.4"
+  }
+}
+`;

package/lib/stackblitzFiles/tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "types": ["vite-env"],
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"],
+  "references": [{ "path": "./tsconfig.node.json" }]
+}

package/lib/stackblitzFiles/tsconfig.node.json

@@ -0,0 +1,12 @@
+{
+  "compilerOptions": {
+    "composite": true,
+    "skipLibCheck": true,
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "include": ["vite.config.ts"]
+}
+

package/lib/stackblitzFiles/types/custom-imports.d.ts

@@ -0,0 +1,13 @@
+declare module '!!raw-loader!*' {
+  const content: string;
+  export default content;
+}
+
+declare module 'vite' {
+  export function defineConfig(config: any): any;
+}
+
+declare module '@vitejs/plugin-react' {
+  const react: any;
+  export default react;
+}

package/lib/stackblitzFiles/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />`

package/lib/stackblitzFiles/vite.config.ts

@@ -0,0 +1,10 @@
+/// <reference path="./types/custom-imports.d.ts" />
+
+import {defineConfig} from 'vite';
+
+import react from '@vitejs/plugin-react';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+});

package/lib/widgets/array.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {ArrayValue} from '../../docgen/docTypes';
 import {registerWidget, Value} from '../Value';
 import {RenderContext} from '../widgetUtils';

package/lib/widgets/canvasColor.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {colors} from '@workday/canvas-kit-react/tokens';
 import {ColorPicker} from '@workday/canvas-kit-preview-react/color-picker';
 

package/lib/widgets/component.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {ComponentValue} from '../../docgen/plugins/customTypes';
 import {PropertiesTable, registerWidget} from '../Value';
 import {Heading} from '../widgetUtils';

package/lib/widgets/conditional.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {ConditionalTypeValue} from '../../docgen/docTypes';
 import {registerWidget, Value} from '../Value';
 

package/lib/widgets/enhancedComponent.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import {Expandable} from '@workday/canvas-kit-labs-react/expandable';
+import {Expandable} from '@workday/canvas-kit-react/expandable';
 
 import {defaultJSDoc} from '../../docgen/docParser';
 import {EnhancedComponentValue} from '../../docgen/plugins/customTypes';

package/lib/widgets/external.tsx

@@ -1,4 +1,3 @@
-import React from 'react';
 import {ExternalHyperlink} from '@workday/canvas-kit-react/button';
 
 import {renderTypeParameters} from '../widgetUtils';
@@ -8,7 +7,9 @@ import {registerWidget} from '../Value';
 
 registerWidget<ExternalSymbolValue>('external', ({value}) => (
   <>
-    <ExternalHyperlink href={value.url}>{value.name}</ExternalHyperlink>
+    <ExternalHyperlink href={value.url} iconLabel="Open link in new window">
+      {value.name}
+    </ExternalHyperlink>
     {renderTypeParameters(value.typeParameters)}
   </>
 ));

package/lib/widgets/model.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {ModelHookValue, ModelValue} from '../../docgen/plugins/customTypes';
 import {PropertiesTable, registerWidget, Value} from '../Value';
 import {Heading} from '../widgetUtils';

package/lib/widgets/parenthesis.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {ParenthesisValue} from '../../docgen/docTypes';
 import {registerWidget, Value} from '../Value';
 

package/lib/widgets/primitives.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {registerWidget, Value} from '../Value';
 import {
   BooleanLiteralValue,
@@ -40,9 +38,7 @@ registerWidget<TypeValue>('type', ({value, doc}) => {
         <>
           <span className="token keyword">type</span>{' '}
           <span className="token symbol">{doc?.name || 'unknown'}</span>
-          {renderTypeParameters(
-            value.typeParameters
-          )} <span className="token operator">=</span>{' '}
+          {renderTypeParameters(value.typeParameters)} <span className="token operator">=</span>{' '}
         </>
       )}
       <Value value={value.value} />

package/lib/widgets/qualifiedName.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {QualifiedNameValue} from '../../docgen/docTypes';
 import {registerWidget, Value} from '../Value';
 

package/lib/widgets/symbol.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {SymbolValue} from '../../docgen/docTypes';
 import {registerWidget} from '../Value';
 import {SymbolDialog} from '../widgetUtils';

package/lib/widgets/tuple.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {TupleValue} from '../../docgen/docTypes';
 import {registerWidget, Value} from '../Value';
 import {RenderContext} from '../widgetUtils';

package/lib/widgets/typeParameter.tsx

@@ -1,5 +1,3 @@
-import React from 'react';
-
 import {TypeParameter} from '../../docgen/docTypes';
 import {registerWidget, Value} from '../Value';
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "13.0.0-alpha.998-next.0",
+  "version": "13.0.1",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -43,13 +43,14 @@
   ],
   "dependencies": {
     "@emotion/styled": "^11.6.0",
+    "@stackblitz/sdk": "^1.11.0",
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-labs-react": "^13.0.0-alpha.998-next.0",
-    "@workday/canvas-kit-preview-react": "^13.0.0-alpha.998-next.0",
-    "@workday/canvas-kit-react": "^13.0.0-alpha.998-next.0",
-    "@workday/canvas-kit-styling": "^13.0.0-alpha.998-next.0",
+    "@workday/canvas-kit-labs-react": "^13.0.1",
+    "@workday/canvas-kit-preview-react": "^13.0.1",
+    "@workday/canvas-kit-react": "^13.0.1",
+    "@workday/canvas-kit-styling": "^13.0.1",
     "@workday/canvas-system-icons-web": "^3.0.0",
-    "@workday/canvas-tokens-web": "^2.1.0",
+    "@workday/canvas-tokens-web": "^2.1.1",
     "markdown-to-jsx": "^7.2.0",
     "react-syntax-highlighter": "^15.5.0",
     "ts-node": "^10.9.1"
@@ -60,5 +61,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "5.0"
   },
-  "gitHead": "d95041596e2b948c0a371f4c763746a98c58b2da"
+  "gitHead": "bb1ae05330f359a59d9776efe8e99cdc20e99f52"
 }

package/dist/mdx/preview-react/InformationHighlight/examples/Informational.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import {Flex} from '@workday/canvas-kit-react/layout';
-import {InformationHighlight} from '@workday/canvas-kit-preview-react/InformationHighlight';
-import {system} from '@workday/canvas-tokens-web';
-
-export default () => {
-  return (
-    <Flex flexDirection={'column'} gap={system.space.x2}>
-      <InformationHighlight variant={'informational'}>
-        <InformationHighlight.Icon />
-        <InformationHighlight.Heading> Informational Highlight </InformationHighlight.Heading>
-        <InformationHighlight.Body>
-          If you select the link below it will just reroute you back to this page
-        </InformationHighlight.Body>
-        <InformationHighlight.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
-      </InformationHighlight>
-      <InformationHighlight variant={'informational'} emphasis={'high'}>
-        <InformationHighlight.Icon />
-        <InformationHighlight.Heading> Informational Highlight </InformationHighlight.Heading>
-        <InformationHighlight.Body>
-          If you select the link below it will just reroute you back to this page
-        </InformationHighlight.Body>
-        <InformationHighlight.Link href="#hyperlink">View the Docs</InformationHighlight.Link>
-      </InformationHighlight>
-    </Flex>
-  );
-};