@workday/canvas-kit-docs
Version:
Documentation components of Canvas Kit components
124 lines (123 loc) • 6.5 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import React from 'react';
import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
import { TertiaryButton } from '@workday/canvas-kit-react/button';
import { Card } from '@workday/canvas-kit-react/card';
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/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';
import { CanvasProvider, defaultBranding } from '@workday/canvas-kit-react/common';
const cardStencil = createStencil({
base: {
'[data-part="example-block"]': {
boxShadow: system.depth[1],
borderRadius: system.shape.x1,
position: 'relative',
overflow: 'auto', // This allows for the entire ExampleCodeBlock to scroll on smaller viewports
},
'[data-part="example-block-container"]': {
overflow: 'auto',
},
'[data-part="code-block"]': {
display: 'none',
boxShadow: system.depth[1],
borderRadius: system.shape.x1,
},
'[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',
bottom: system.space.zero,
right: system.space.zero,
borderRadius: system.shape.zero,
borderTopLeftRadius: system.shape.x1,
},
},
modifiers: {
opened: {
true: {
'[data-part="code-block"]': {
display: 'block',
borderTopLeftRadius: system.shape.zero,
borderTopRightRadius: system.shape.zero,
},
'[data-part="example-block"]': {
borderBottomLeftRadius: system.shape.zero,
borderBottomRightRadius: system.shape.zero,
},
},
},
},
});
export const ExampleCodeBlock = ({ code }) => {
const [isCodeDisplayed, setCodeDisplayed] = React.useState(false);
const textInput = React.useRef(null);
const [copied, setCopied] = React.useState(false);
const timer = React.useRef();
const onCopy = () => {
if (timer.current) {
clearTimeout(timer.current);
}
timer.current = setTimeout(() => {
setCopied(false);
}, 2000);
setCopied(true);
// @ts-ignore
navigator.clipboard.writeText(textInput.current.textContent);
};
/**
* `code` returns our examples. We need to rewrite them so that they export `Demo`.
*/
const handleExampleRewrite = (code) => {
return code
.replace(/\bexport\s+const\s+(\w+)\s*=/, `export const Demo =`)
.replace(/export default/, 'export const Demo =');
};
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 (_jsxs("div", { ...cardStencil({ opened: isCodeDisplayed }), children: [_jsx(Card, { "data-part": "example-block", className: "sb-unstyled", children: _jsx(Card.Body, { "data-part": "example-block-container", children: _jsxs(CanvasProvider, { className: defaultBranding, children: [React.createElement(code), code && (_jsxs("div", { "data-part": "code-toggle-stackblitz-btn-container", children: [_jsx(TertiaryButton, { size: "extraSmall", onClick: () => openProjectInStackblitz(), children: "\u26A1\uFE0F Edit in Stackblitz" }), _jsx(TertiaryButton, { size: "extraSmall", onClick: () => setCodeDisplayed(!isCodeDisplayed), children: !isCodeDisplayed ? 'Show Code' : 'Hide Code' })] }))] }) }) }), _jsx(Card, { "data-part": "code-block", padding: 0, children: _jsx(Card.Body, { cs: { position: 'relative' }, children: _jsxs(CanvasProvider, { className: defaultBranding, children: [code && (_jsx("div", { ref: textInput, children: _jsx(SyntaxHighlighter, { className: "sb-unstyled", language: "jsx", style: vscDarkPlus, customStyle: {
fontSize: cssVar(system.fontSize.subtext.large),
lineHeight: cssVar(system.lineHeight.subtext.large),
margin: '0',
padding: `${cssVar(system.space.x8)} ${cssVar(system.space.x10)}`,
}, children: code.__RAW__ }) })), _jsx(Tooltip, { title: copied ? 'Copied!' : 'Copy Source Code', children: _jsx(TertiaryButton, { "aria-label": "Copy Code", size: "large", "data-part": "copy-btn", variant: "inverse", iconPosition: "end", icon: copied ? checkCircleIcon : copyIcon, onClick: onCopy }) })] }) }) })] }));
};