@workday/canvas-kit-docs 12.4.3 → 12.4.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/es6/lib/ExampleCodeBlock.d.ts.map +1 -1
- package/dist/es6/lib/ExampleCodeBlock.js +47 -13
- package/dist/es6/lib/stackblitzFiles/App.d.ts +3 -0
- package/dist/es6/lib/stackblitzFiles/App.d.ts.map +1 -0
- package/dist/es6/lib/stackblitzFiles/App.js +20 -0
- package/dist/es6/lib/stackblitzFiles/Demo.d.ts +3 -0
- package/dist/es6/lib/stackblitzFiles/Demo.d.ts.map +1 -0
- package/dist/es6/lib/stackblitzFiles/Demo.js +2 -0
- package/dist/es6/lib/stackblitzFiles/main.d.ts +4 -0
- package/dist/es6/lib/stackblitzFiles/main.d.ts.map +1 -0
- package/dist/es6/lib/stackblitzFiles/main.js +25 -0
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.d.ts +2 -0
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.d.ts.map +1 -0
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.js +42 -0
- package/dist/es6/lib/stackblitzFiles/vite.config.d.ts +4 -0
- package/dist/es6/lib/stackblitzFiles/vite.config.d.ts.map +1 -0
- package/dist/es6/lib/stackblitzFiles/vite.config.js +7 -0
- package/lib/ExampleCodeBlock.tsx +55 -19
- package/lib/stackblitzFiles/.eslintrc.cjs.txt +15 -0
- package/lib/stackblitzFiles/App.tsx +34 -0
- package/lib/stackblitzFiles/Demo.tsx +3 -0
- package/lib/stackblitzFiles/index.html +13 -0
- package/lib/stackblitzFiles/main.tsx +28 -0
- package/lib/stackblitzFiles/packageJSONFile.ts +42 -0
- package/lib/stackblitzFiles/tsconfig.json +26 -0
- package/lib/stackblitzFiles/tsconfig.node.json +12 -0
- package/lib/stackblitzFiles/types/custom-imports.d.ts +13 -0
- package/lib/stackblitzFiles/vite-env.d.ts +1 -0
- package/lib/stackblitzFiles/vite.config.ts +10 -0
- package/package.json +6 -6
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExampleCodeBlock.d.ts","sourceRoot":"","sources":["../../../lib/ExampleCodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;
|
|
1
|
+
{"version":3,"file":"ExampleCodeBlock.d.ts","sourceRoot":"","sources":["../../../lib/ExampleCodeBlock.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAiE1B,eAAO,MAAM,gBAAgB,aAAY,GAAG,sBAwG3C,CAAC"}
|
|
@@ -6,7 +6,17 @@ import { calc, createStencil, cssVar, px2rem } from '@workday/canvas-kit-styling
|
|
|
6
6
|
import { system } from '@workday/canvas-tokens-web';
|
|
7
7
|
import { vscDarkPlus } from 'react-syntax-highlighter/dist/cjs/styles/prism';
|
|
8
8
|
import { checkCircleIcon, copyIcon } from '@workday/canvas-system-icons-web';
|
|
9
|
-
import { Tooltip } from '@workday/canvas-kit-react';
|
|
9
|
+
import { Tooltip } from '@workday/canvas-kit-react/tooltip';
|
|
10
|
+
import sdk from '@stackblitz/sdk';
|
|
11
|
+
import tsconfigFile from '!!raw-loader!./stackblitzFiles/tsconfig.json';
|
|
12
|
+
import { packageJSONFile } from './stackblitzFiles/packageJSONFile';
|
|
13
|
+
import indexHTMLFile from '!!raw-loader!./stackblitzFiles/index.html';
|
|
14
|
+
import mainFile from '!!raw-loader!./stackblitzFiles/main.tsx';
|
|
15
|
+
import viteConfigFile from '!!raw-loader!./stackblitzFiles/vite.config.ts';
|
|
16
|
+
import eslintrc from '!!raw-loader!./stackblitzFiles/.eslintrc.cjs.txt';
|
|
17
|
+
import tsconfigNodeFile from '!!raw-loader!./stackblitzFiles/tsconfig.node.json';
|
|
18
|
+
import appFile from '!!raw-loader!./stackblitzFiles/App.tsx';
|
|
19
|
+
import viteEnvFile from '!!raw-loader!./stackblitzFiles/vite-env.d.ts';
|
|
10
20
|
const cardStencil = createStencil({
|
|
11
21
|
base: {
|
|
12
22
|
'[data-part="example-block"]': {
|
|
@@ -19,10 +29,12 @@ const cardStencil = createStencil({
|
|
|
19
29
|
boxShadow: system.depth[1],
|
|
20
30
|
borderRadius: system.shape.x1,
|
|
21
31
|
},
|
|
22
|
-
'[data-part="code-toggle-btn"]': {
|
|
32
|
+
'[data-part="code-toggle-stackblitz-btn-container"]': {
|
|
23
33
|
position: 'absolute',
|
|
24
34
|
right: calc.negate(px2rem(1)),
|
|
25
35
|
bottom: calc.negate(px2rem(1)),
|
|
36
|
+
display: 'flex',
|
|
37
|
+
gap: system.space.x2,
|
|
26
38
|
},
|
|
27
39
|
'[data-part="copy-btn"]': {
|
|
28
40
|
position: 'absolute',
|
|
@@ -64,21 +76,43 @@ export const ExampleCodeBlock = ({ code }) => {
|
|
|
64
76
|
// @ts-ignore
|
|
65
77
|
navigator.clipboard.writeText(textInput.current.textContent);
|
|
66
78
|
};
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
79
|
+
/**
|
|
80
|
+
* `code` returns our examples. We need to rewrite them so that they export `Demo`.
|
|
81
|
+
*/
|
|
82
|
+
const handleExampleRewrite = (code) => {
|
|
83
|
+
return code.replace(/\bexport\s+const\s+(\w+)\s*=/, `export const Demo =`);
|
|
84
|
+
};
|
|
85
|
+
const openProjectInStackblitz = () => {
|
|
86
|
+
sdk.openProject({
|
|
87
|
+
files: {
|
|
88
|
+
'src/Demo.tsx': handleExampleRewrite(code.__RAW__),
|
|
89
|
+
'src/vite-env-d.ts': viteEnvFile,
|
|
90
|
+
'src/App.tsx': appFile,
|
|
91
|
+
'tsconfig.node.json': tsconfigNodeFile,
|
|
92
|
+
'.eslintrc.js': eslintrc,
|
|
93
|
+
'vite.config.ts': viteConfigFile,
|
|
94
|
+
'src/main.tsx': mainFile,
|
|
95
|
+
'index.html': indexHTMLFile,
|
|
96
|
+
'tsconfig.json': tsconfigFile,
|
|
97
|
+
'package.json': packageJSONFile,
|
|
98
|
+
},
|
|
99
|
+
template: 'node',
|
|
100
|
+
title: `Demo`,
|
|
101
|
+
description: `This is a Canvas Kit Demo. Edit and play around!`,
|
|
102
|
+
},
|
|
103
|
+
// Options
|
|
104
|
+
{
|
|
105
|
+
newWindow: true,
|
|
106
|
+
openFile: 'src/Demo.tsx',
|
|
107
|
+
});
|
|
108
|
+
};
|
|
77
109
|
return (React.createElement("div", { ...cardStencil({ opened: isCodeDisplayed }) },
|
|
78
110
|
React.createElement(Card, { "data-part": "example-block", className: "sb-unstyled" },
|
|
79
111
|
React.createElement(Card.Body, null,
|
|
80
112
|
React.createElement(code),
|
|
81
|
-
code && (React.createElement(
|
|
113
|
+
code && (React.createElement("div", { "data-part": "code-toggle-stackblitz-btn-container" },
|
|
114
|
+
React.createElement(TertiaryButton, { size: "extraSmall", onClick: () => openProjectInStackblitz() }, "\u26A1\uFE0F Edit in Stackblitz"),
|
|
115
|
+
React.createElement(TertiaryButton, { size: "extraSmall", onClick: () => setCodeDisplayed(!isCodeDisplayed) }, !isCodeDisplayed ? 'Show Code' : 'Hide Code'))))),
|
|
82
116
|
React.createElement(Card, { "data-part": "code-block", padding: 0 },
|
|
83
117
|
React.createElement(Card.Body, { cs: { position: 'relative' } },
|
|
84
118
|
code && (React.createElement("div", { ref: textInput },
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"App.d.ts","sourceRoot":"","sources":["../../../../lib/stackblitzFiles/App.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAgB/B,eAAO,MAAM,GAAG,yBAiBf,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { CanvasProvider, ContentDirection, useTheme, } from '@workday/canvas-kit-react/common';
|
|
3
|
+
import { createStyles } from '@workday/canvas-kit-styling';
|
|
4
|
+
import { Demo } from './Demo';
|
|
5
|
+
import { system } from '@workday/canvas-tokens-web';
|
|
6
|
+
const mainContentStyles = createStyles({
|
|
7
|
+
padding: system.space.x4,
|
|
8
|
+
});
|
|
9
|
+
export const App = () => {
|
|
10
|
+
// useTheme is filling in the Canvas theme object if any keys are missing
|
|
11
|
+
const canvasTheme = useTheme({
|
|
12
|
+
canvas: {
|
|
13
|
+
direction: ContentDirection.LTR,
|
|
14
|
+
},
|
|
15
|
+
});
|
|
16
|
+
return (React.createElement(CanvasProvider, { theme: canvasTheme },
|
|
17
|
+
React.createElement(React.Fragment, null,
|
|
18
|
+
React.createElement("main", { className: mainContentStyles },
|
|
19
|
+
React.createElement(Demo, null)))));
|
|
20
|
+
};
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Demo.d.ts","sourceRoot":"","sources":["../../../../lib/stackblitzFiles/Demo.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAC;AAE1B,eAAO,MAAM,IAAI,+BAAsB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"main.d.ts","sourceRoot":"","sources":["../../../../lib/stackblitzFiles/main.tsx"],"names":[],"mappings":"AAOA,OAAO,oDAAoD,CAAC;AAC5D,OAAO,qDAAqD,CAAC;AAC7D,OAAO,sDAAsD,CAAC"}
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import { createRoot } from 'react-dom/client';
|
|
3
|
+
import { fonts } from '@workday/canvas-kit-react-fonts';
|
|
4
|
+
import { system } from '@workday/canvas-tokens-web';
|
|
5
|
+
import { cssVar, injectGlobal } from '@workday/canvas-kit-styling';
|
|
6
|
+
import { App } from './App';
|
|
7
|
+
import '@workday/canvas-tokens-web/css/base/_variables.css';
|
|
8
|
+
import '@workday/canvas-tokens-web/css/brand/_variables.css';
|
|
9
|
+
import '@workday/canvas-tokens-web/css/system/_variables.css';
|
|
10
|
+
//@ts-ignore
|
|
11
|
+
injectGlobal({
|
|
12
|
+
...fonts,
|
|
13
|
+
'html, body': {
|
|
14
|
+
fontFamily: cssVar(system.fontFamily.default),
|
|
15
|
+
margin: 0,
|
|
16
|
+
minHeight: '100vh',
|
|
17
|
+
},
|
|
18
|
+
'#root, #root < div': {
|
|
19
|
+
minHeight: '100vh',
|
|
20
|
+
...system.type.body.small,
|
|
21
|
+
},
|
|
22
|
+
});
|
|
23
|
+
const container = document.getElementById('root');
|
|
24
|
+
const root = createRoot(container);
|
|
25
|
+
root.render(React.createElement(App, null));
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"packageJSONFile.d.ts","sourceRoot":"","sources":["../../../../lib/stackblitzFiles/packageJSONFile.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,eAAe,QAuC3B,CAAC"}
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
// @ts-ignore: Cannot find module error
|
|
2
|
+
import { version } from '../../../../lerna.json';
|
|
3
|
+
export const packageJSONFile = `{
|
|
4
|
+
"name": "vite-react-typescript-starter",
|
|
5
|
+
"private": true,
|
|
6
|
+
"version": "0.0.0",
|
|
7
|
+
"type": "module",
|
|
8
|
+
"scripts": {
|
|
9
|
+
"dev": "vite",
|
|
10
|
+
"build": "tsc && vite build",
|
|
11
|
+
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
|
12
|
+
"preview": "vite preview"
|
|
13
|
+
},
|
|
14
|
+
"dependencies": {
|
|
15
|
+
"react": "^18.2.0",
|
|
16
|
+
"react-dom": "^18.2.0",
|
|
17
|
+
"@emotion/css": "11.11.2",
|
|
18
|
+
"@emotion/react": "11.11.4",
|
|
19
|
+
"@types/react": "18.2.60",
|
|
20
|
+
"@types/react-dom": "18.2.19",
|
|
21
|
+
"@workday/canvas-kit-labs-react": "${version}",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "${version}",
|
|
23
|
+
"@workday/canvas-kit-react": "${version}",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^${version}",
|
|
25
|
+
"@workday/canvas-kit-styling": "${version}",
|
|
26
|
+
"@workday/canvas-system-icons-web": "3.0.22",
|
|
27
|
+
"@workday/canvas-tokens-web": "2.0.0"
|
|
28
|
+
},
|
|
29
|
+
"devDependencies": {
|
|
30
|
+
"@types/react": "^18.2.59",
|
|
31
|
+
"@types/react-dom": "^18.2.19",
|
|
32
|
+
"@typescript-eslint/eslint-plugin": "^7.1.0",
|
|
33
|
+
"@typescript-eslint/parser": "^7.1.0",
|
|
34
|
+
"@vitejs/plugin-react": "^4.2.1",
|
|
35
|
+
"eslint": "^8.57.0",
|
|
36
|
+
"eslint-plugin-react-hooks": "^4.6.0",
|
|
37
|
+
"eslint-plugin-react-refresh": "^0.4.5",
|
|
38
|
+
"typescript": "^5.2.2",
|
|
39
|
+
"vite": "^5.1.4"
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
`;
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"vite.config.d.ts","sourceRoot":"","sources":["../../../../lib/stackblitzFiles/vite.config.ts"],"names":[],"mappings":";;AAOA,wBAEG"}
|
package/lib/ExampleCodeBlock.tsx
CHANGED
|
@@ -7,7 +7,17 @@ import {calc, createStencil, cssVar, px2rem} from '@workday/canvas-kit-styling';
|
|
|
7
7
|
import {system} from '@workday/canvas-tokens-web';
|
|
8
8
|
import {vscDarkPlus} from 'react-syntax-highlighter/dist/cjs/styles/prism';
|
|
9
9
|
import {checkCircleIcon, copyIcon} from '@workday/canvas-system-icons-web';
|
|
10
|
-
import {Tooltip} from '@workday/canvas-kit-react';
|
|
10
|
+
import {Tooltip} from '@workday/canvas-kit-react/tooltip';
|
|
11
|
+
import sdk from '@stackblitz/sdk';
|
|
12
|
+
import tsconfigFile from '!!raw-loader!./stackblitzFiles/tsconfig.json';
|
|
13
|
+
import {packageJSONFile} from './stackblitzFiles/packageJSONFile';
|
|
14
|
+
import indexHTMLFile from '!!raw-loader!./stackblitzFiles/index.html';
|
|
15
|
+
import mainFile from '!!raw-loader!./stackblitzFiles/main.tsx';
|
|
16
|
+
import viteConfigFile from '!!raw-loader!./stackblitzFiles/vite.config.ts';
|
|
17
|
+
import eslintrc from '!!raw-loader!./stackblitzFiles/.eslintrc.cjs.txt';
|
|
18
|
+
import tsconfigNodeFile from '!!raw-loader!./stackblitzFiles/tsconfig.node.json';
|
|
19
|
+
import appFile from '!!raw-loader!./stackblitzFiles/App.tsx';
|
|
20
|
+
import viteEnvFile from '!!raw-loader!./stackblitzFiles/vite-env.d.ts';
|
|
11
21
|
|
|
12
22
|
const cardStencil = createStencil({
|
|
13
23
|
base: {
|
|
@@ -21,10 +31,12 @@ const cardStencil = createStencil({
|
|
|
21
31
|
boxShadow: system.depth[1],
|
|
22
32
|
borderRadius: system.shape.x1,
|
|
23
33
|
},
|
|
24
|
-
'[data-part="code-toggle-btn"]': {
|
|
34
|
+
'[data-part="code-toggle-stackblitz-btn-container"]': {
|
|
25
35
|
position: 'absolute',
|
|
26
36
|
right: calc.negate(px2rem(1)),
|
|
27
37
|
bottom: calc.negate(px2rem(1)),
|
|
38
|
+
display: 'flex',
|
|
39
|
+
gap: system.space.x2,
|
|
28
40
|
},
|
|
29
41
|
'[data-part="copy-btn"]': {
|
|
30
42
|
position: 'absolute',
|
|
@@ -70,17 +82,40 @@ export const ExampleCodeBlock = ({code}: any) => {
|
|
|
70
82
|
navigator.clipboard.writeText(textInput.current.textContent);
|
|
71
83
|
};
|
|
72
84
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
85
|
+
/**
|
|
86
|
+
* `code` returns our examples. We need to rewrite them so that they export `Demo`.
|
|
87
|
+
*/
|
|
88
|
+
const handleExampleRewrite = (code: any) => {
|
|
89
|
+
return code.replace(/\bexport\s+const\s+(\w+)\s*=/, `export const Demo =`);
|
|
90
|
+
};
|
|
78
91
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
92
|
+
const openProjectInStackblitz = () => {
|
|
93
|
+
sdk.openProject(
|
|
94
|
+
{
|
|
95
|
+
files: {
|
|
96
|
+
'src/Demo.tsx': handleExampleRewrite(code.__RAW__),
|
|
97
|
+
'src/vite-env-d.ts': viteEnvFile,
|
|
98
|
+
'src/App.tsx': appFile,
|
|
99
|
+
'tsconfig.node.json': tsconfigNodeFile,
|
|
100
|
+
'.eslintrc.js': eslintrc,
|
|
101
|
+
'vite.config.ts': viteConfigFile,
|
|
102
|
+
'src/main.tsx': mainFile,
|
|
103
|
+
'index.html': indexHTMLFile,
|
|
104
|
+
'tsconfig.json': tsconfigFile,
|
|
105
|
+
'package.json': packageJSONFile,
|
|
106
|
+
},
|
|
107
|
+
template: 'node',
|
|
108
|
+
title: `Demo`,
|
|
109
|
+
description: `This is a Canvas Kit Demo. Edit and play around!`,
|
|
110
|
+
},
|
|
111
|
+
|
|
112
|
+
// Options
|
|
113
|
+
{
|
|
114
|
+
newWindow: true,
|
|
115
|
+
openFile: 'src/Demo.tsx',
|
|
116
|
+
}
|
|
117
|
+
);
|
|
118
|
+
};
|
|
84
119
|
|
|
85
120
|
return (
|
|
86
121
|
<div {...cardStencil({opened: isCodeDisplayed})}>
|
|
@@ -88,13 +123,14 @@ export const ExampleCodeBlock = ({code}: any) => {
|
|
|
88
123
|
<Card.Body>
|
|
89
124
|
{React.createElement(code)}
|
|
90
125
|
{code && (
|
|
91
|
-
<
|
|
92
|
-
size="extraSmall"
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
126
|
+
<div data-part="code-toggle-stackblitz-btn-container">
|
|
127
|
+
<TertiaryButton size="extraSmall" onClick={() => openProjectInStackblitz()}>
|
|
128
|
+
⚡️ Edit in Stackblitz
|
|
129
|
+
</TertiaryButton>
|
|
130
|
+
<TertiaryButton size="extraSmall" onClick={() => setCodeDisplayed(!isCodeDisplayed)}>
|
|
131
|
+
{!isCodeDisplayed ? 'Show Code' : 'Hide Code'}
|
|
132
|
+
</TertiaryButton>
|
|
133
|
+
</div>
|
|
98
134
|
)}
|
|
99
135
|
</Card.Body>
|
|
100
136
|
</Card>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
root: true,
|
|
3
|
+
env: {browser: true, es2020: true},
|
|
4
|
+
extends: [
|
|
5
|
+
'eslint:recommended',
|
|
6
|
+
'plugin:@typescript-eslint/recommended',
|
|
7
|
+
'plugin:react-hooks/recommended',
|
|
8
|
+
],
|
|
9
|
+
ignorePatterns: ['dist', '.eslintrc.cjs'],
|
|
10
|
+
parser: '@typescript-eslint/parser',
|
|
11
|
+
plugins: ['react-refresh'],
|
|
12
|
+
rules: {
|
|
13
|
+
'react-refresh/only-export-components': ['warn', {allowConstantExport: true}],
|
|
14
|
+
},
|
|
15
|
+
};
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import {
|
|
3
|
+
CanvasProvider,
|
|
4
|
+
ContentDirection,
|
|
5
|
+
PartialEmotionCanvasTheme,
|
|
6
|
+
useTheme,
|
|
7
|
+
} from '@workday/canvas-kit-react/common';
|
|
8
|
+
import {createStyles} from '@workday/canvas-kit-styling';
|
|
9
|
+
|
|
10
|
+
import {Demo} from './Demo';
|
|
11
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
12
|
+
|
|
13
|
+
const mainContentStyles = createStyles({
|
|
14
|
+
padding: system.space.x4,
|
|
15
|
+
});
|
|
16
|
+
|
|
17
|
+
export const App = () => {
|
|
18
|
+
// useTheme is filling in the Canvas theme object if any keys are missing
|
|
19
|
+
const canvasTheme: PartialEmotionCanvasTheme = useTheme({
|
|
20
|
+
canvas: {
|
|
21
|
+
direction: ContentDirection.LTR,
|
|
22
|
+
},
|
|
23
|
+
});
|
|
24
|
+
|
|
25
|
+
return (
|
|
26
|
+
<CanvasProvider theme={canvasTheme}>
|
|
27
|
+
<>
|
|
28
|
+
<main className={mainContentStyles}>
|
|
29
|
+
<Demo />
|
|
30
|
+
</main>
|
|
31
|
+
</>
|
|
32
|
+
</CanvasProvider>
|
|
33
|
+
);
|
|
34
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<!DOCTYPE html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
|
6
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
7
|
+
<title>Vite + React + TS</title>
|
|
8
|
+
</head>
|
|
9
|
+
<body>
|
|
10
|
+
<div id="root"></div>
|
|
11
|
+
<script type="module" src="/src/main.tsx"></script>
|
|
12
|
+
</body>
|
|
13
|
+
</html>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
import {createRoot} from 'react-dom/client';
|
|
3
|
+
import {fonts} from '@workday/canvas-kit-react-fonts';
|
|
4
|
+
import {system} from '@workday/canvas-tokens-web';
|
|
5
|
+
import {cssVar, injectGlobal} from '@workday/canvas-kit-styling';
|
|
6
|
+
import {App} from './App';
|
|
7
|
+
|
|
8
|
+
import '@workday/canvas-tokens-web/css/base/_variables.css';
|
|
9
|
+
import '@workday/canvas-tokens-web/css/brand/_variables.css';
|
|
10
|
+
import '@workday/canvas-tokens-web/css/system/_variables.css';
|
|
11
|
+
|
|
12
|
+
//@ts-ignore
|
|
13
|
+
injectGlobal({
|
|
14
|
+
...fonts,
|
|
15
|
+
'html, body': {
|
|
16
|
+
fontFamily: cssVar(system.fontFamily.default),
|
|
17
|
+
margin: 0,
|
|
18
|
+
minHeight: '100vh',
|
|
19
|
+
},
|
|
20
|
+
'#root, #root < div': {
|
|
21
|
+
minHeight: '100vh',
|
|
22
|
+
...system.type.body.small,
|
|
23
|
+
},
|
|
24
|
+
});
|
|
25
|
+
|
|
26
|
+
const container = document.getElementById('root')!;
|
|
27
|
+
const root = createRoot(container);
|
|
28
|
+
root.render(<App />);
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
// @ts-ignore: Cannot find module error
|
|
2
|
+
import {version} from '../../../../lerna.json';
|
|
3
|
+
export const packageJSONFile = `{
|
|
4
|
+
"name": "vite-react-typescript-starter",
|
|
5
|
+
"private": true,
|
|
6
|
+
"version": "0.0.0",
|
|
7
|
+
"type": "module",
|
|
8
|
+
"scripts": {
|
|
9
|
+
"dev": "vite",
|
|
10
|
+
"build": "tsc && vite build",
|
|
11
|
+
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
|
|
12
|
+
"preview": "vite preview"
|
|
13
|
+
},
|
|
14
|
+
"dependencies": {
|
|
15
|
+
"react": "^18.2.0",
|
|
16
|
+
"react-dom": "^18.2.0",
|
|
17
|
+
"@emotion/css": "11.11.2",
|
|
18
|
+
"@emotion/react": "11.11.4",
|
|
19
|
+
"@types/react": "18.2.60",
|
|
20
|
+
"@types/react-dom": "18.2.19",
|
|
21
|
+
"@workday/canvas-kit-labs-react": "${version}",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "${version}",
|
|
23
|
+
"@workday/canvas-kit-react": "${version}",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^${version}",
|
|
25
|
+
"@workday/canvas-kit-styling": "${version}",
|
|
26
|
+
"@workday/canvas-system-icons-web": "3.0.22",
|
|
27
|
+
"@workday/canvas-tokens-web": "2.0.0"
|
|
28
|
+
},
|
|
29
|
+
"devDependencies": {
|
|
30
|
+
"@types/react": "^18.2.59",
|
|
31
|
+
"@types/react-dom": "^18.2.19",
|
|
32
|
+
"@typescript-eslint/eslint-plugin": "^7.1.0",
|
|
33
|
+
"@typescript-eslint/parser": "^7.1.0",
|
|
34
|
+
"@vitejs/plugin-react": "^4.2.1",
|
|
35
|
+
"eslint": "^8.57.0",
|
|
36
|
+
"eslint-plugin-react-hooks": "^4.6.0",
|
|
37
|
+
"eslint-plugin-react-refresh": "^0.4.5",
|
|
38
|
+
"typescript": "^5.2.2",
|
|
39
|
+
"vite": "^5.1.4"
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
`;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
{
|
|
2
|
+
"compilerOptions": {
|
|
3
|
+
"target": "ES2020",
|
|
4
|
+
"useDefineForClassFields": true,
|
|
5
|
+
"lib": ["ES2020", "DOM", "DOM.Iterable"],
|
|
6
|
+
"module": "ESNext",
|
|
7
|
+
"skipLibCheck": true,
|
|
8
|
+
|
|
9
|
+
/* Bundler mode */
|
|
10
|
+
"moduleResolution": "bundler",
|
|
11
|
+
"allowImportingTsExtensions": true,
|
|
12
|
+
"resolveJsonModule": true,
|
|
13
|
+
"isolatedModules": true,
|
|
14
|
+
"noEmit": true,
|
|
15
|
+
"jsx": "react-jsx",
|
|
16
|
+
"types": ["vite-env"],
|
|
17
|
+
|
|
18
|
+
/* Linting */
|
|
19
|
+
"strict": true,
|
|
20
|
+
"noUnusedLocals": true,
|
|
21
|
+
"noUnusedParameters": true,
|
|
22
|
+
"noFallthroughCasesInSwitch": true
|
|
23
|
+
},
|
|
24
|
+
"include": ["src"],
|
|
25
|
+
"references": [{ "path": "./tsconfig.node.json" }]
|
|
26
|
+
}
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
declare module '!!raw-loader!*' {
|
|
2
|
+
const content: string;
|
|
3
|
+
export default content;
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
declare module 'vite' {
|
|
7
|
+
export function defineConfig(config: any): any;
|
|
8
|
+
}
|
|
9
|
+
|
|
10
|
+
declare module '@vitejs/plugin-react' {
|
|
11
|
+
const react: any;
|
|
12
|
+
export default react;
|
|
13
|
+
}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
/// <reference types="vite/client" />`
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "12.4.
|
|
3
|
+
"version": "12.4.4",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -44,10 +44,10 @@
|
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
46
|
"@storybook/csf": "0.0.1",
|
|
47
|
-
"@workday/canvas-kit-labs-react": "^12.4.
|
|
48
|
-
"@workday/canvas-kit-preview-react": "^12.4.
|
|
49
|
-
"@workday/canvas-kit-react": "^12.4.
|
|
50
|
-
"@workday/canvas-kit-styling": "^12.4.
|
|
47
|
+
"@workday/canvas-kit-labs-react": "^12.4.4",
|
|
48
|
+
"@workday/canvas-kit-preview-react": "^12.4.4",
|
|
49
|
+
"@workday/canvas-kit-react": "^12.4.4",
|
|
50
|
+
"@workday/canvas-kit-styling": "^12.4.4",
|
|
51
51
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
52
52
|
"@workday/canvas-tokens-web": "^2.1.1",
|
|
53
53
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -60,5 +60,5 @@
|
|
|
60
60
|
"mkdirp": "^1.0.3",
|
|
61
61
|
"typescript": "5.0"
|
|
62
62
|
},
|
|
63
|
-
"gitHead": "
|
|
63
|
+
"gitHead": "921fb688382b24c47999ab26d6045b0e182e3064"
|
|
64
64
|
}
|