@workday/canvas-kit-docs 12.5.0-1046-next.0 → 12.5.0-1058-next.0
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 +3 -1
- package/dist/es6/lib/docs.js +1005 -1623
- package/dist/es6/lib/stackblitzFiles/.eslintrc.cjs.txt +15 -0
- package/dist/es6/lib/stackblitzFiles/App.tsx +34 -0
- package/dist/es6/lib/stackblitzFiles/Demo.tsx +3 -0
- package/dist/es6/lib/stackblitzFiles/index.html +13 -0
- package/dist/es6/lib/stackblitzFiles/main.tsx +28 -0
- package/dist/es6/lib/stackblitzFiles/packageJSONFile.ts +42 -0
- package/dist/es6/lib/stackblitzFiles/tsconfig.json +26 -0
- package/dist/es6/lib/stackblitzFiles/tsconfig.node.json +12 -0
- package/dist/es6/lib/stackblitzFiles/vite-env.d.ts +1 -0
- package/dist/es6/lib/stackblitzFiles/vite.config.ts +10 -0
- package/dist/mdx/TESTING.mdx +25 -0
- package/lib/ExampleCodeBlock.tsx +3 -1
- package/package.json +7 -6
|
@@ -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
|
+
|
|
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": "12.4.19",
|
|
22
|
+
"@workday/canvas-kit-preview-react": "12.4.19",
|
|
23
|
+
"@workday/canvas-kit-react": "12.4.19",
|
|
24
|
+
"@workday/canvas-kit-react-fonts": "^12.4.19",
|
|
25
|
+
"@workday/canvas-kit-styling": "12.4.19",
|
|
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 @@
|
|
|
1
|
+
/// <reference types="vite/client" />`
|
package/dist/mdx/TESTING.mdx
CHANGED
|
@@ -160,6 +160,31 @@ This will ensure snapshot tests have stable ids for each snapshot. It is still p
|
|
|
160
160
|
changing if you add an additional component that uses id generation - subsequent ids will be
|
|
161
161
|
different, but this will prevent snapshot tests that don't have any changes from showing diffs.
|
|
162
162
|
|
|
163
|
+
The Canvas Kit Styling package uses CSS Variables and multiple class names with unique hashes.
|
|
164
|
+
The following snapshot serializers handle styling. Setting unique seeds will not effect static style
|
|
165
|
+
hashes because the styles are created before any test code is run. These serializers ignore the
|
|
166
|
+
hashes instead.
|
|
167
|
+
|
|
168
|
+
```ts
|
|
169
|
+
// Handle `css-{hash}` class names
|
|
170
|
+
const emotionClassnameRegex = /(css-[a-zA-Z0-9]{1,7})/g;
|
|
171
|
+
expect.addSnapshotSerializer({
|
|
172
|
+
test: (val) => typeof val === "string" && emotionClassnameRegex.test(val),
|
|
173
|
+
print: (val) => {
|
|
174
|
+
return `"${val.replaceAll(emotionClassnameRegex, "css-xxxxx")}"`;
|
|
175
|
+
},
|
|
176
|
+
});
|
|
177
|
+
|
|
178
|
+
// Handle `--myVariableName-{hash}` CSS variables used by Stencils
|
|
179
|
+
const cssVariableRegex = /(--([a-zA-Z-]+)-[a-zA-Z0-9]{1,7})/g;
|
|
180
|
+
expect.addSnapshotSerializer({
|
|
181
|
+
test: (val) => typeof val === "string" && cssVariableRegex.test(val),
|
|
182
|
+
print: (val) => {
|
|
183
|
+
return `"${val.replaceAll(cssVariableRegex, "--$2-xxxxx")}"`;
|
|
184
|
+
},
|
|
185
|
+
});
|
|
186
|
+
```
|
|
187
|
+
|
|
163
188
|
## Functional tests
|
|
164
189
|
|
|
165
190
|
Canvas Kit uses [Cypress](https://cypress.io) for browser-based behavior testing (additional info:
|
package/lib/ExampleCodeBlock.tsx
CHANGED
|
@@ -86,7 +86,9 @@ export const ExampleCodeBlock = ({code}: any) => {
|
|
|
86
86
|
* `code` returns our examples. We need to rewrite them so that they export `Demo`.
|
|
87
87
|
*/
|
|
88
88
|
const handleExampleRewrite = (code: any) => {
|
|
89
|
-
return code
|
|
89
|
+
return code
|
|
90
|
+
.replace(/\bexport\s+const\s+(\w+)\s*=/, `export const Demo =`)
|
|
91
|
+
.replace(/export default/, 'export const Demo =');
|
|
90
92
|
};
|
|
91
93
|
|
|
92
94
|
const openProjectInStackblitz = () => {
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@workday/canvas-kit-docs",
|
|
3
|
-
"version": "12.5.0-
|
|
3
|
+
"version": "12.5.0-1058-next.0",
|
|
4
4
|
"description": "Documentation components of Canvas Kit components",
|
|
5
5
|
"author": "Workday, Inc. (https://www.workday.com)",
|
|
6
6
|
"license": "Apache-2.0",
|
|
@@ -43,11 +43,12 @@
|
|
|
43
43
|
],
|
|
44
44
|
"dependencies": {
|
|
45
45
|
"@emotion/styled": "^11.6.0",
|
|
46
|
+
"@stackblitz/sdk": "^1.11.0",
|
|
46
47
|
"@storybook/csf": "0.0.1",
|
|
47
|
-
"@workday/canvas-kit-labs-react": "^12.5.0-
|
|
48
|
-
"@workday/canvas-kit-preview-react": "^12.5.0-
|
|
49
|
-
"@workday/canvas-kit-react": "^12.5.0-
|
|
50
|
-
"@workday/canvas-kit-styling": "^12.5.0-
|
|
48
|
+
"@workday/canvas-kit-labs-react": "^12.5.0-1058-next.0",
|
|
49
|
+
"@workday/canvas-kit-preview-react": "^12.5.0-1058-next.0",
|
|
50
|
+
"@workday/canvas-kit-react": "^12.5.0-1058-next.0",
|
|
51
|
+
"@workday/canvas-kit-styling": "^12.5.0-1058-next.0",
|
|
51
52
|
"@workday/canvas-system-icons-web": "^3.0.0",
|
|
52
53
|
"@workday/canvas-tokens-web": "^2.1.1",
|
|
53
54
|
"markdown-to-jsx": "^7.2.0",
|
|
@@ -60,5 +61,5 @@
|
|
|
60
61
|
"mkdirp": "^1.0.3",
|
|
61
62
|
"typescript": "5.0"
|
|
62
63
|
},
|
|
63
|
-
"gitHead": "
|
|
64
|
+
"gitHead": "30f682a818360ecfabf0543529b0d1e7c7b6d1ff"
|
|
64
65
|
}
|