@fluentui/react-storybook-addon-export-to-sandbox 0.1.3 → 0.2.1
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/CHANGELOG.md +27 -2
- package/README.md +95 -1
- package/dist/index.d.ts +44 -0
- package/dist/styles.css +47 -0
- package/lib/decorators/with-export-to-sandbox-button.js +8 -4
- package/lib/decorators/with-export-to-sandbox-button.js.map +1 -1
- package/lib/getDependencies.js +5 -13
- package/lib/getDependencies.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/index.js.map +1 -1
- package/lib/preset/preview.js.map +1 -1
- package/lib/sandbox-factory.js +5 -6
- package/lib/sandbox-factory.js.map +1 -1
- package/lib/sandbox-scaffold.js +5 -15
- package/lib/sandbox-scaffold.js.map +1 -1
- package/lib/sandbox-utils.js +23 -25
- package/lib/sandbox-utils.js.map +1 -1
- package/lib/types.js.map +1 -1
- package/lib/webpack.js +1 -1
- package/lib/webpack.js.map +1 -1
- package/lib-commonjs/decorators/with-export-to-sandbox-button.js +1 -3
- package/lib-commonjs/decorators/with-export-to-sandbox-button.js.map +1 -1
- package/lib-commonjs/getDependencies.js +5 -13
- package/lib-commonjs/getDependencies.js.map +1 -1
- package/lib-commonjs/index.js +7 -0
- package/lib-commonjs/index.js.map +1 -1
- package/lib-commonjs/preset/preview.js.map +1 -1
- package/lib-commonjs/sandbox-factory.js +4 -5
- package/lib-commonjs/sandbox-factory.js.map +1 -1
- package/lib-commonjs/sandbox-scaffold.js +5 -15
- package/lib-commonjs/sandbox-scaffold.js.map +1 -1
- package/lib-commonjs/sandbox-utils.js +25 -27
- package/lib-commonjs/sandbox-utils.js.map +1 -1
- package/lib-commonjs/webpack.js +1 -1
- package/lib-commonjs/webpack.js.map +1 -1
- package/package.json +7 -8
- package/preset.js +9 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,12 +1,37 @@
|
|
|
1
1
|
# Change Log - @fluentui/react-storybook-addon-export-to-sandbox
|
|
2
2
|
|
|
3
|
-
This log was last generated on
|
|
3
|
+
This log was last generated on Wed, 01 Apr 2026 14:06:04 GMT and should not be manually modified.
|
|
4
4
|
|
|
5
5
|
<!-- Start content -->
|
|
6
6
|
|
|
7
|
+
## [0.2.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon-export-to-sandbox_v0.2.1)
|
|
8
|
+
|
|
9
|
+
Wed, 01 Apr 2026 14:06:04 GMT
|
|
10
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon-export-to-sandbox_v0.2.0..@fluentui/react-storybook-addon-export-to-sandbox_v0.2.1)
|
|
11
|
+
|
|
12
|
+
### Patches
|
|
13
|
+
|
|
14
|
+
- fix: button selector issue to support SB 10 ([PR #35801](https://github.com/microsoft/fluentui/pull/35801) by vgenaev@gmail.com)
|
|
15
|
+
- fix: ship public types and resolve cjs/esm issues for preset loader ([PR #35932](https://github.com/microsoft/fluentui/pull/35932) by martinhochel@microsoft.com)
|
|
16
|
+
|
|
17
|
+
## [0.2.0](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon-export-to-sandbox_v0.2.0)
|
|
18
|
+
|
|
19
|
+
Tue, 03 Mar 2026 13:16:27 GMT
|
|
20
|
+
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon-export-to-sandbox_v0.1.3..@fluentui/react-storybook-addon-export-to-sandbox_v0.2.0)
|
|
21
|
+
|
|
22
|
+
### Minor changes
|
|
23
|
+
|
|
24
|
+
- add withExportToSandboxButton decorator export and fix default story missing export button ([PR #35677](https://github.com/microsoft/fluentui/pull/35677) by dmytrokirpa@microsoft.com)
|
|
25
|
+
- feat: upgrade to storybook 9 ([PR #35459](https://github.com/microsoft/fluentui/pull/35459) by dmytrokirpa@microsoft.com)
|
|
26
|
+
- BREAKING: upgrade storybook to v8 ([PR #35279](https://github.com/microsoft/fluentui/pull/35279) by dmytrokirpa@microsoft.com)
|
|
27
|
+
|
|
28
|
+
### Patches
|
|
29
|
+
|
|
30
|
+
- chore: bump storybook to mitigate CVE ([PR #35748](https://github.com/microsoft/fluentui/pull/35748) by martinhochel@microsoft.com)
|
|
31
|
+
|
|
7
32
|
## [0.1.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon-export-to-sandbox_v0.1.3)
|
|
8
33
|
|
|
9
|
-
Tue, 04 Nov 2025 14:
|
|
34
|
+
Tue, 04 Nov 2025 14:47:01 GMT
|
|
10
35
|
[Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon-export-to-sandbox_v0.1.2..@fluentui/react-storybook-addon-export-to-sandbox_v0.1.3)
|
|
11
36
|
|
|
12
37
|
### Patches
|
package/README.md
CHANGED
|
@@ -30,7 +30,101 @@ module.exports = {
|
|
|
30
30
|
|
|
31
31
|
## Configuration
|
|
32
32
|
|
|
33
|
-
The addon can be configured
|
|
33
|
+
The addon can be configured at two levels:
|
|
34
|
+
|
|
35
|
+
1. **Preset configuration** — passed via `.storybook/main.js` addon options (controls the build-time babel transform)
|
|
36
|
+
2. **Parameters configuration** — passed via `.storybook/preview.ts` or per-story (controls runtime sandbox export behavior)
|
|
37
|
+
|
|
38
|
+
### Preset Configuration (`.storybook/main.js`)
|
|
39
|
+
|
|
40
|
+
Preset options configure how the addon transforms story source code at build time via `@fluentui/babel-preset-storybook-full-source`.
|
|
41
|
+
|
|
42
|
+
```js
|
|
43
|
+
// .storybook/main.ts
|
|
44
|
+
|
|
45
|
+
import type { StorybookConfig } from '@storybook/react-webpack5';
|
|
46
|
+
import type { PresetConfig } from '@fluentui/react-storybook-addon-export-to-sandbox';
|
|
47
|
+
|
|
48
|
+
const config: StorybookConfig = {
|
|
49
|
+
addons: [
|
|
50
|
+
{
|
|
51
|
+
name: '@fluentui/react-storybook-addon-export-to-sandbox',
|
|
52
|
+
options: {
|
|
53
|
+
/**
|
|
54
|
+
* Import mappings replace internal/private package imports with their public re-export package.
|
|
55
|
+
* Keys are package names to replace, values define the replacement.
|
|
56
|
+
*/
|
|
57
|
+
importMappings: {
|
|
58
|
+
'@fluentui/react-button': { replace: '@fluentui/react-components' },
|
|
59
|
+
'@fluentui/react-text': { replace: '@fluentui/react-components' },
|
|
60
|
+
},
|
|
61
|
+
/**
|
|
62
|
+
* Optional: Override the default webpack rule for the babel loader.
|
|
63
|
+
*/
|
|
64
|
+
webpackRule: {},
|
|
65
|
+
/**
|
|
66
|
+
* Optional: Modify the babel-loader options before they are applied.
|
|
67
|
+
*/
|
|
68
|
+
babelLoaderOptionsUpdater: options => options,
|
|
69
|
+
} satisfies PresetConfig,
|
|
70
|
+
},
|
|
71
|
+
],
|
|
72
|
+
};
|
|
73
|
+
```
|
|
74
|
+
|
|
75
|
+
| Option | Type | Description |
|
|
76
|
+
| --------------------------- | ----------------------------------------------- | ----------------------------------------------------------------------------------- |
|
|
77
|
+
| `importMappings` | `Record<string, { replace: string }>` | Maps internal package imports to their public re-export package in generated source |
|
|
78
|
+
| `webpackRule` | `webpack.RuleSetRule` | Override the default webpack rule for the story babel loader |
|
|
79
|
+
| `babelLoaderOptionsUpdater` | `(options: TransformOptions) => typeof options` | Transform babel-loader options before they are applied |
|
|
80
|
+
|
|
81
|
+
### Styles
|
|
82
|
+
|
|
83
|
+
The addon ships a CSS file for styling the export button in Storybook Docs. Import it in your `.storybook/preview.ts`:
|
|
84
|
+
|
|
85
|
+
```ts
|
|
86
|
+
// .storybook/preview.ts
|
|
87
|
+
import '@fluentui/react-storybook-addon-export-to-sandbox/styles.css';
|
|
88
|
+
```
|
|
89
|
+
|
|
90
|
+
### Global Parameters Configuration (`.storybook/preview.ts`)
|
|
91
|
+
|
|
92
|
+
Global parameters set the default sandbox export behavior for all stories.
|
|
93
|
+
|
|
94
|
+
```ts
|
|
95
|
+
// .storybook/preview.ts
|
|
96
|
+
import '@fluentui/react-storybook-addon-export-to-sandbox/styles.css';
|
|
97
|
+
|
|
98
|
+
import type { Preview } from '@storybook/react';
|
|
99
|
+
import type { Parameters } from '@fluentui/react-storybook-addon-export-to-sandbox';
|
|
100
|
+
|
|
101
|
+
const preview = {
|
|
102
|
+
parameters: {
|
|
103
|
+
exportToSandbox: {
|
|
104
|
+
provider: 'stackblitz-cloud',
|
|
105
|
+
bundler: 'vite',
|
|
106
|
+
requiredDependencies: {
|
|
107
|
+
react: '^18.0.0',
|
|
108
|
+
'react-dom': '^18.0.0',
|
|
109
|
+
},
|
|
110
|
+
optionalDependencies: {
|
|
111
|
+
'@fluentui/react-components': '^9.0.0',
|
|
112
|
+
},
|
|
113
|
+
},
|
|
114
|
+
} satisfies Parameters,
|
|
115
|
+
} satisfies Preview;
|
|
116
|
+
|
|
117
|
+
export default preview;
|
|
118
|
+
```
|
|
119
|
+
|
|
120
|
+
| Option | Type | Required | Description |
|
|
121
|
+
| ---------------------- | -------------------------------------------------------------------- | -------- | ---------------------------------------------------------- |
|
|
122
|
+
| `provider` | `'codesandbox-cloud' \| 'codesandbox-browser' \| 'stackblitz-cloud'` | Yes | Which sandbox provider to use for the export |
|
|
123
|
+
| `bundler` | `'vite' \| 'cra'` | Yes | Which bundler template to scaffold in the sandbox |
|
|
124
|
+
| `requiredDependencies` | `Record<string, string>` | No | Dependencies always included in the sandbox `package.json` |
|
|
125
|
+
| `optionalDependencies` | `Record<string, string>` | No | Dependencies included only when detected in story imports |
|
|
126
|
+
|
|
127
|
+
### Local (Per Story) Configuration
|
|
34
128
|
|
|
35
129
|
```js
|
|
36
130
|
export const MyStory = () => <MyComponent />;
|
package/dist/index.d.ts
CHANGED
|
@@ -1 +1,45 @@
|
|
|
1
|
+
import { BabelPluginOptions } from '@fluentui/babel-preset-storybook-full-source';
|
|
2
|
+
import type { JSXElement } from '@fluentui/react-utilities';
|
|
3
|
+
import type { Parameters as Parameters_3 } from '@storybook/react-webpack5';
|
|
4
|
+
import { RuleSetRule } from 'webpack';
|
|
5
|
+
import type { StoryContext as StoryContext_2 } from '@storybook/react-webpack5';
|
|
6
|
+
import { TransformOptions } from '@babel/core';
|
|
7
|
+
|
|
8
|
+
declare interface Parameters_2 {
|
|
9
|
+
exportToSandbox?: ParametersConfig;
|
|
10
|
+
}
|
|
11
|
+
export { Parameters_2 as Parameters }
|
|
12
|
+
|
|
13
|
+
/**
|
|
14
|
+
* NOTE:
|
|
15
|
+
* Don't import anything from source code in this file !!
|
|
16
|
+
*
|
|
17
|
+
* only pure API definitions of addon are allowed to live here, that are used both internal and for external storybook `Parameter` type extensions
|
|
18
|
+
*/
|
|
19
|
+
declare interface ParametersConfig {
|
|
20
|
+
optionalDependencies?: Record<string, string>;
|
|
21
|
+
requiredDependencies?: Record<string, string>;
|
|
22
|
+
provider: 'codesandbox-cloud' | 'codesandbox-browser' | 'stackblitz-cloud';
|
|
23
|
+
bundler: 'vite' | 'cra';
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
export declare interface PresetConfig {
|
|
27
|
+
importMappings: BabelPluginOptions;
|
|
28
|
+
webpackRule?: RuleSetRule;
|
|
29
|
+
babelLoaderOptionsUpdater?: (value: TransformOptions) => typeof value;
|
|
30
|
+
}
|
|
31
|
+
|
|
32
|
+
declare interface StoryContext extends StoryContext_2 {
|
|
33
|
+
parameters: Parameters_3 & Parameters_2;
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
/**
|
|
37
|
+
* Decorator to add "Export to Sandbox" button in Storybook Docs view
|
|
38
|
+
*
|
|
39
|
+
* @param storyFn - original story function
|
|
40
|
+
* @param context - story context
|
|
41
|
+
* @returns - decorated story
|
|
42
|
+
*/
|
|
43
|
+
export declare const withExportToSandboxButton: (storyFn: (context: StoryContext) => JSXElement, context: StoryContext) => JSXElement;
|
|
44
|
+
|
|
1
45
|
export { }
|
package/dist/styles.css
ADDED
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
/* Remove z-index from "show code" button container */
|
|
2
|
+
/* https://github.com/microsoft/fluentui/issues/22773 */
|
|
3
|
+
.docs-story > div:nth-child(2) {
|
|
4
|
+
z-index: auto;
|
|
5
|
+
}
|
|
6
|
+
|
|
7
|
+
#storybook-docs .docblock-code-toggle,
|
|
8
|
+
.docs-story .with-code-sandbox-button {
|
|
9
|
+
font-family: 'Segoe UI', 'Segoe UI Web (West European)', -apple-system, BlinkMacSystemFont, Roboto, 'Helvetica Neue',
|
|
10
|
+
sans-serif;
|
|
11
|
+
min-width: 91px;
|
|
12
|
+
font-size: 14px !important;
|
|
13
|
+
font-weight: 600 !important;
|
|
14
|
+
line-height: 150% !important;
|
|
15
|
+
color: #201f1e !important;
|
|
16
|
+
text-align: center !important;
|
|
17
|
+
justify-content: center !important;
|
|
18
|
+
letter-spacing: -0.01em !important;
|
|
19
|
+
background: #f8f8f8 !important;
|
|
20
|
+
border: none !important;
|
|
21
|
+
/* box-shadow: 0px 0px 4px rgba(0, 0, 0, 0.25) !important; */
|
|
22
|
+
border-radius: 5px 5px 0px 0px !important;
|
|
23
|
+
}
|
|
24
|
+
|
|
25
|
+
.docs-story .with-code-sandbox-button {
|
|
26
|
+
margin-right: 32px;
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
/* Reduce font size of CodeSandbox and Show Code button when zoomed or small window width*/
|
|
30
|
+
/* https://github.com/microsoft/fluentui/issues/22764 */
|
|
31
|
+
|
|
32
|
+
@media screen and (max-width: 380px) {
|
|
33
|
+
#storybook-docs .docblock-code-toggle,
|
|
34
|
+
.docs-story .with-code-sandbox-button {
|
|
35
|
+
font-size: 10px !important;
|
|
36
|
+
}
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
/* Make storybook codesandbox export button match Figma design */
|
|
40
|
+
.docs-story .with-code-sandbox-button {
|
|
41
|
+
right: 105px !important;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
.docs-story .with-code-sandbox-button:focus {
|
|
45
|
+
outline: none;
|
|
46
|
+
box-shadow: #1ea7fd 0 -3px 0 0 inset;
|
|
47
|
+
}
|
|
@@ -1,7 +1,11 @@
|
|
|
1
1
|
import { addDemoActionButton } from '../sandbox-factory';
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
2
|
+
/**
|
|
3
|
+
* Decorator to add "Export to Sandbox" button in Storybook Docs view
|
|
4
|
+
*
|
|
5
|
+
* @param storyFn - original story function
|
|
6
|
+
* @param context - story context
|
|
7
|
+
* @returns - decorated story
|
|
8
|
+
*/ export const withExportToSandboxButton = (storyFn, context)=>{
|
|
9
|
+
if (context.viewMode === 'docs') addDemoActionButton(context);
|
|
6
10
|
return storyFn(context);
|
|
7
11
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/decorators/with-export-to-sandbox-button.ts"],"sourcesContent":["import type { JSXElement } from '@fluentui/react-utilities';\n\nimport { addDemoActionButton } from '../sandbox-factory';\nimport type { StoryContext } from '../types';\n\nexport const withExportToSandboxButton = (storyFn: (context: StoryContext) => JSXElement, context: StoryContext) => {\n if (context.viewMode === 'docs') {\n addDemoActionButton(context);\n }\n\n return storyFn(context);\n};\n"],"names":["addDemoActionButton","withExportToSandboxButton","storyFn","context","viewMode"],"mappings":"AAEA,SAASA,mBAAmB,QAAQ,qBAAqB;AAGzD,OAAO,MAAMC,4BAA4B,CAACC,SAAgDC;IACxF,IAAIA,QAAQC,QAAQ,KAAK,
|
|
1
|
+
{"version":3,"sources":["../src/decorators/with-export-to-sandbox-button.ts"],"sourcesContent":["import type { JSXElement } from '@fluentui/react-utilities';\n\nimport { addDemoActionButton } from '../sandbox-factory';\nimport type { StoryContext } from '../types';\n\n/**\n * Decorator to add \"Export to Sandbox\" button in Storybook Docs view\n *\n * @param storyFn - original story function\n * @param context - story context\n * @returns - decorated story\n */\nexport const withExportToSandboxButton = (storyFn: (context: StoryContext) => JSXElement, context: StoryContext) => {\n if (context.viewMode === 'docs') {\n addDemoActionButton(context);\n }\n\n return storyFn(context);\n};\n"],"names":["addDemoActionButton","withExportToSandboxButton","storyFn","context","viewMode"],"mappings":"AAEA,SAASA,mBAAmB,QAAQ,qBAAqB;AAGzD;;;;;;CAMC,GACD,OAAO,MAAMC,4BAA4B,CAACC,SAAgDC;IACxF,IAAIA,QAAQC,QAAQ,KAAK,QACvBJ,oBAAoBG;IAGtB,OAAOD,QAAQC;AACjB,EAAE"}
|
package/lib/getDependencies.js
CHANGED
|
@@ -2,9 +2,7 @@ const IMPORT_PATH_REGEX = /from ['"](.*?)['"];/g;
|
|
|
2
2
|
function matchAll(str, re) {
|
|
3
3
|
let match = null;
|
|
4
4
|
const matches = [];
|
|
5
|
-
while(match = re.exec(str))
|
|
6
|
-
matches.push(match);
|
|
7
|
-
}
|
|
5
|
+
while(match = re.exec(str))matches.push(match);
|
|
8
6
|
return matches;
|
|
9
7
|
}
|
|
10
8
|
/**
|
|
@@ -19,14 +17,10 @@ function matchAll(str, re) {
|
|
|
19
17
|
const importPath = match[1];
|
|
20
18
|
const isReactPath = importPath.startsWith('react/');
|
|
21
19
|
const isRelativeImportPath = importPath.startsWith('.');
|
|
22
|
-
if (isReactPath || isRelativeImportPath)
|
|
23
|
-
return dependencies;
|
|
24
|
-
}
|
|
20
|
+
if (isReactPath || isRelativeImportPath) return dependencies;
|
|
25
21
|
const dependency = parsePackageName(importPath).name;
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
dependencies[dependency] = (_optionalDependencies_dependency = optionalDependencies[dependency]) !== null && _optionalDependencies_dependency !== void 0 ? _optionalDependencies_dependency : 'latest';
|
|
29
|
-
}
|
|
22
|
+
var _optionalDependencies_dependency;
|
|
23
|
+
if (!dependencies.hasOwnProperty(dependency)) dependencies[dependency] = (_optionalDependencies_dependency = optionalDependencies[dependency]) !== null && _optionalDependencies_dependency !== void 0 ? _optionalDependencies_dependency : 'latest';
|
|
30
24
|
return dependencies;
|
|
31
25
|
}, {});
|
|
32
26
|
return {
|
|
@@ -40,9 +34,7 @@ const RE_SCOPED = /^(@[^\/]+\/[^@\/]+)(?:@([^\/]+))?(\/.*)?$/;
|
|
|
40
34
|
const RE_NON_SCOPED = /^([^@\/]+)(?:@([^\/]+))?(\/.*)?$/;
|
|
41
35
|
function parsePackageName(input) {
|
|
42
36
|
const m = RE_SCOPED.exec(input) || RE_NON_SCOPED.exec(input);
|
|
43
|
-
if (!m) {
|
|
44
|
-
throw new Error(`[parse-package-name] invalid package name: ${input}`);
|
|
45
|
-
}
|
|
37
|
+
if (!m) throw new Error(`[parse-package-name] invalid package name: ${input}`);
|
|
46
38
|
return {
|
|
47
39
|
name: m[1] || '',
|
|
48
40
|
version: m[2] || 'latest',
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/getDependencies.ts"],"sourcesContent":["type PackageDependencies = { [dependencyName: string]: string };\n\nconst IMPORT_PATH_REGEX = /from ['\"](.*?)['\"];/g;\n\nfunction matchAll(str: string, re: RegExp) {\n let match: RegExpExecArray | null = null;\n const matches: RegExpExecArray[] = [];\n\n while ((match = re.exec(str))) {\n matches.push(match);\n }\n\n return matches;\n}\n\n/**\n *\n * @param fileContent - code\n * @param requiredDependencies - dependencies that will always be included in package.json\n * @param optionalDependencies - whose versions will override those found in the code\n * @returns - Map of dependencies and their versions to include in package.json\n */\nexport const getDependencies = (\n fileContent: string,\n requiredDependencies: PackageDependencies,\n optionalDependencies: PackageDependencies,\n) => {\n const importPaths = matchAll(fileContent, IMPORT_PATH_REGEX);\n\n const dependenciesInCode = importPaths.reduce((dependencies, match) => {\n const importPath = match[1];\n const isReactPath = importPath.startsWith('react/');\n const isRelativeImportPath = importPath.startsWith('.');\n\n if (isReactPath || isRelativeImportPath) {\n return dependencies;\n }\n\n const dependency = parsePackageName(importPath).name;\n\n if (!dependencies.hasOwnProperty(dependency)) {\n dependencies[dependency] = optionalDependencies[dependency] ?? 'latest';\n }\n\n return dependencies;\n }, {} as PackageDependencies);\n\n return { ...dependenciesInCode, ...requiredDependencies };\n};\n\n// Parsed a scoped package name into name, version, and path.\nconst RE_SCOPED = /^(@[^\\/]+\\/[^@\\/]+)(?:@([^\\/]+))?(\\/.*)?$/;\n// Parsed a non-scoped package name into name, version, path\nconst RE_NON_SCOPED = /^([^@\\/]+)(?:@([^\\/]+))?(\\/.*)?$/;\n\nfunction parsePackageName(input: string) {\n const m = RE_SCOPED.exec(input) || RE_NON_SCOPED.exec(input);\n\n if (!m) {\n throw new Error(`[parse-package-name] invalid package name: ${input}`);\n }\n\n return {\n name: m[1] || '',\n version: m[2] || 'latest',\n path: m[3] || '',\n };\n}\n"],"names":["IMPORT_PATH_REGEX","matchAll","str","re","match","matches","exec","push","getDependencies","fileContent","requiredDependencies","optionalDependencies","importPaths","dependenciesInCode","reduce","dependencies","importPath","isReactPath","startsWith","isRelativeImportPath","dependency","parsePackageName","name","hasOwnProperty","RE_SCOPED","RE_NON_SCOPED","input","m","Error","version","path"],"mappings":"AAEA,MAAMA,oBAAoB;AAE1B,SAASC,SAASC,GAAW,EAAEC,EAAU;IACvC,IAAIC,QAAgC;IACpC,MAAMC,UAA6B,EAAE;IAErC,MAAQD,QAAQD,GAAGG,IAAI,CAACJ,
|
|
1
|
+
{"version":3,"sources":["../src/getDependencies.ts"],"sourcesContent":["type PackageDependencies = { [dependencyName: string]: string };\n\nconst IMPORT_PATH_REGEX = /from ['\"](.*?)['\"];/g;\n\nfunction matchAll(str: string, re: RegExp) {\n let match: RegExpExecArray | null = null;\n const matches: RegExpExecArray[] = [];\n\n while ((match = re.exec(str))) {\n matches.push(match);\n }\n\n return matches;\n}\n\n/**\n *\n * @param fileContent - code\n * @param requiredDependencies - dependencies that will always be included in package.json\n * @param optionalDependencies - whose versions will override those found in the code\n * @returns - Map of dependencies and their versions to include in package.json\n */\nexport const getDependencies = (\n fileContent: string,\n requiredDependencies: PackageDependencies,\n optionalDependencies: PackageDependencies,\n) => {\n const importPaths = matchAll(fileContent, IMPORT_PATH_REGEX);\n\n const dependenciesInCode = importPaths.reduce((dependencies, match) => {\n const importPath = match[1];\n const isReactPath = importPath.startsWith('react/');\n const isRelativeImportPath = importPath.startsWith('.');\n\n if (isReactPath || isRelativeImportPath) {\n return dependencies;\n }\n\n const dependency = parsePackageName(importPath).name;\n\n if (!dependencies.hasOwnProperty(dependency)) {\n dependencies[dependency] = optionalDependencies[dependency] ?? 'latest';\n }\n\n return dependencies;\n }, {} as PackageDependencies);\n\n return { ...dependenciesInCode, ...requiredDependencies };\n};\n\n// Parsed a scoped package name into name, version, and path.\nconst RE_SCOPED = /^(@[^\\/]+\\/[^@\\/]+)(?:@([^\\/]+))?(\\/.*)?$/;\n// Parsed a non-scoped package name into name, version, path\nconst RE_NON_SCOPED = /^([^@\\/]+)(?:@([^\\/]+))?(\\/.*)?$/;\n\nfunction parsePackageName(input: string) {\n const m = RE_SCOPED.exec(input) || RE_NON_SCOPED.exec(input);\n\n if (!m) {\n throw new Error(`[parse-package-name] invalid package name: ${input}`);\n }\n\n return {\n name: m[1] || '',\n version: m[2] || 'latest',\n path: m[3] || '',\n };\n}\n"],"names":["IMPORT_PATH_REGEX","matchAll","str","re","match","matches","exec","push","getDependencies","fileContent","requiredDependencies","optionalDependencies","importPaths","dependenciesInCode","reduce","dependencies","importPath","isReactPath","startsWith","isRelativeImportPath","dependency","parsePackageName","name","hasOwnProperty","RE_SCOPED","RE_NON_SCOPED","input","m","Error","version","path"],"mappings":"AAEA,MAAMA,oBAAoB;AAE1B,SAASC,SAASC,GAAW,EAAEC,EAAU;IACvC,IAAIC,QAAgC;IACpC,MAAMC,UAA6B,EAAE;IAErC,MAAQD,QAAQD,GAAGG,IAAI,CAACJ,KACtBG,QAAQE,IAAI,CAACH;IAGf,OAAOC;AACT;AAEA;;;;;;CAMC,GACD,OAAO,MAAMG,kBAAkB,CAC7BC,aACAC,sBACAC;IAEA,MAAMC,cAAcX,SAASQ,aAAaT;IAE1C,MAAMa,qBAAqBD,YAAYE,MAAM,CAAC,CAACC,cAAcX;QAC3D,MAAMY,aAAaZ,KAAK,CAAC,EAAE;QAC3B,MAAMa,cAAcD,WAAWE,UAAU,CAAC;QAC1C,MAAMC,uBAAuBH,WAAWE,UAAU,CAAC;QAEnD,IAAID,eAAeE,sBACjB,OAAOJ;QAGT,MAAMK,aAAaC,iBAAiBL,YAAYM,IAAI;YAGvBX;QAD7B,IAAI,CAACI,aAAaQ,cAAc,CAACH,aAC/BL,YAAY,CAACK,WAAW,GAAGT,CAAAA,mCAAAA,oBAAoB,CAACS,WAAW,cAAhCT,8CAAAA,mCAAoC;QAGjE,OAAOI;IACT,GAAG,CAAC;IAEJ,OAAO;QAAE,GAAGF,kBAAkB;QAAE,GAAGH,oBAAoB;IAAC;AAC1D,EAAE;AAEF,6DAA6D;AAC7D,MAAMc,YAAY;AAClB,4DAA4D;AAC5D,MAAMC,gBAAgB;AAEtB,SAASJ,iBAAiBK,KAAa;IACrC,MAAMC,IAAIH,UAAUlB,IAAI,CAACoB,UAAUD,cAAcnB,IAAI,CAACoB;IAEtD,IAAI,CAACC,GACH,MAAM,IAAIC,MAAM,CAAC,2CAA2C,EAAEF,OAAO;IAGvE,OAAO;QACLJ,MAAMK,CAAC,CAAC,EAAE,IAAI;QACdE,SAASF,CAAC,CAAC,EAAE,IAAI;QACjBG,MAAMH,CAAC,CAAC,EAAE,IAAI;IAChB;AACF"}
|
package/lib/index.js
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
export { };
|
|
1
|
+
export { withExportToSandboxButton } from './decorators/with-export-to-sandbox-button';
|
package/lib/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export {};\n"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"sources":["../src/index.ts"],"sourcesContent":["export { withExportToSandboxButton } from './decorators/with-export-to-sandbox-button';\n\nexport type { ParametersExtension as Parameters, PresetConfig } from './public-types';\n"],"names":["withExportToSandboxButton"],"mappings":"AAAA,SAASA,yBAAyB,QAAQ,6CAA6C"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/preset/preview.ts"],"sourcesContent":["import type { Parameters } from '@storybook/react';\nimport type { StoryContextForEnhancers } from '
|
|
1
|
+
{"version":3,"sources":["../src/preset/preview.ts"],"sourcesContent":["import type { Parameters } from '@storybook/react-webpack5';\nimport type { StoryContextForEnhancers } from 'storybook/internal/csf';\n\nimport { withExportToSandboxButton } from '../decorators/with-export-to-sandbox-button';\n\nexport const decorators = [withExportToSandboxButton];\n\nexport const parameters: Parameters = {\n docs: {\n source: {\n /**\n * Override source code shown within \"Show Code\" Docs tab.\n * @see https://github.com/storybookjs/storybook/blob/release-6-5/addons/docs/docs/recipes.md#customizing-source-snippets\n */\n transform: (source: string, storyContext: StoryContextForEnhancers) => {\n // This config renders story source generated via `fullSource` parameter that is being added by @fluentui/babel-preset-storybook-full-source plugin, which is registered as part of this preset\n return storyContext.parameters.fullSource;\n },\n },\n },\n};\n"],"names":["withExportToSandboxButton","decorators","parameters","docs","source","transform","storyContext","fullSource"],"mappings":"AAGA,SAASA,yBAAyB,QAAQ,8CAA8C;AAExF,OAAO,MAAMC,aAAa;IAACD;CAA0B,CAAC;AAEtD,OAAO,MAAME,aAAyB;IACpCC,MAAM;QACJC,QAAQ;YACN;;;OAGC,GACDC,WAAW,CAACD,QAAgBE;gBAC1B,+LAA+L;gBAC/L,OAAOA,aAAaJ,UAAU,CAACK,UAAU;YAC3C;QACF;IACF;AACF,EAAE"}
|
package/lib/sandbox-factory.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { getParameters } from 'codesandbox-import-utils/lib/api/define';
|
|
2
2
|
import { scaffold } from './sandbox-scaffold';
|
|
3
|
-
import { addHiddenInput, prepareData,
|
|
3
|
+
import { addHiddenInput, prepareData, prepareSandboxContainers } from './sandbox-utils';
|
|
4
4
|
const defaultFileToPreview = encodeURIComponent('src/example.tsx');
|
|
5
5
|
const actionConfig = {
|
|
6
6
|
'codesandbox-cloud': {
|
|
@@ -26,12 +26,11 @@ const actionConfig = {
|
|
|
26
26
|
}
|
|
27
27
|
};
|
|
28
28
|
export function addDemoActionButton(context) {
|
|
29
|
-
const { container, cssClasses } = prepareSandboxContainer(context);
|
|
30
29
|
const config = prepareData(context);
|
|
31
|
-
if (!config)
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
30
|
+
if (!config) throw new Error('issues with data');
|
|
31
|
+
prepareSandboxContainers(context).forEach(({ container, cssClasses })=>{
|
|
32
|
+
addActionButton(container, config, cssClasses);
|
|
33
|
+
});
|
|
35
34
|
}
|
|
36
35
|
function addActionButton(container, config, classList) {
|
|
37
36
|
const files = scaffold[config.bundler](config);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/sandbox-factory.ts"],"sourcesContent":["import { getParameters } from 'codesandbox-import-utils/lib/api/define';\n\nimport { scaffold } from './sandbox-scaffold';\nimport { addHiddenInput, prepareData,
|
|
1
|
+
{"version":3,"sources":["../src/sandbox-factory.ts"],"sourcesContent":["import { getParameters } from 'codesandbox-import-utils/lib/api/define';\n\nimport { scaffold } from './sandbox-scaffold';\nimport { addHiddenInput, prepareData, prepareSandboxContainers, type Data } from './sandbox-utils';\nimport { StoryContext } from './types';\n\nconst defaultFileToPreview = encodeURIComponent('src/example.tsx');\n\nconst actionConfig = {\n 'codesandbox-cloud': {\n label: 'CodeSandbox',\n factory: (files: Record<string, string>, config: Data) => openCodeSandbox({ files, ...config }),\n },\n 'codesandbox-browser': {\n label: 'CodeSandbox',\n factory: (files: Record<string, string>, config: Data) => openCodeSandbox({ files, ...config }),\n },\n 'stackblitz-cloud': {\n label: 'Stackblitz',\n factory: (files: Record<string, string>, config: Data) => openStackblitz({ files, ...config }),\n },\n};\n\nexport function addDemoActionButton(context: StoryContext) {\n const config = prepareData(context);\n if (!config) {\n throw new Error('issues with data');\n }\n\n prepareSandboxContainers(context).forEach(({ container, cssClasses }) => {\n addActionButton(container, config, cssClasses);\n });\n}\n\nfunction addActionButton(container: HTMLElement, config: Data, classList: string[]) {\n const files = scaffold[config.bundler](config);\n const action = actionConfig[config.provider];\n\n const button = document.createElement('button');\n button.classList.add(...classList);\n button.textContent = `Open in ${action.label}`;\n\n container?.prepend(button);\n\n button.addEventListener('click', _ev => {\n action.factory(files, config);\n });\n}\n\n/**\n *\n * @see https://developer.stackblitz.com/docs/platform/post-api/\n */\nfunction openStackblitz(data: { files: Record<string, string> } & Data) {\n const { files, description, title } = data;\n const form = document.createElement('form');\n form.method = 'post';\n form.target = '_blank';\n form.action = `https://stackblitz.com/run?file=${defaultFileToPreview}`;\n // node template - boots web-container\n addHiddenInput(form, 'project[template]', 'node');\n addHiddenInput(form, 'project[title]', title);\n addHiddenInput(form, 'project[description]', `# ${description}`);\n\n Object.keys(files).forEach(key => {\n const value = files[key];\n addHiddenInput(form, `project[files][${key}]`, value);\n });\n\n document.body.appendChild(form);\n form.submit();\n document.body.removeChild(form);\n}\n\n/**\n *\n * @see https://codesandbox.io/docs/learn/sandboxes/cli-api#define-api\n */\nfunction openCodeSandbox({ files, provider }: { files: Record<string, string> } & Data) {\n const normalizedFilesApi = Object.entries(files).reduce((acc, current) => {\n acc[current[0]] = { isBinary: false, content: current[1] };\n return acc;\n }, {} as Record<string, { content: string; isBinary: boolean }>);\n\n const env = provider === 'codesandbox-cloud' ? 'server' : 'browser';\n const parameters = getParameters({ files: normalizedFilesApi });\n\n const form = document.createElement('form');\n form.method = 'POST';\n form.target = '_blank';\n form.action = `https://codesandbox.io/api/v1/sandboxes/define?environment=${env}`;\n\n addHiddenInput(form, 'parameters', parameters);\n addHiddenInput(form, 'query', `file=${defaultFileToPreview}`);\n document.body.appendChild(form);\n form.submit();\n document.body.removeChild(form);\n}\n"],"names":["getParameters","scaffold","addHiddenInput","prepareData","prepareSandboxContainers","defaultFileToPreview","encodeURIComponent","actionConfig","label","factory","files","config","openCodeSandbox","openStackblitz","addDemoActionButton","context","Error","forEach","container","cssClasses","addActionButton","classList","bundler","action","provider","button","document","createElement","add","textContent","prepend","addEventListener","_ev","data","description","title","form","method","target","Object","keys","key","value","body","appendChild","submit","removeChild","normalizedFilesApi","entries","reduce","acc","current","isBinary","content","env","parameters"],"mappings":"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"}
|
package/lib/sandbox-scaffold.js
CHANGED
|
@@ -7,9 +7,7 @@ const commonDevDeps = {
|
|
|
7
7
|
};
|
|
8
8
|
export const scaffold = {
|
|
9
9
|
vite: (data)=>{
|
|
10
|
-
if (data.provider === 'codesandbox-browser')
|
|
11
|
-
throw new Error('vite is not supported on codesandbox-browser');
|
|
12
|
-
}
|
|
10
|
+
if (data.provider === 'codesandbox-browser') throw new Error('vite is not supported on codesandbox-browser');
|
|
13
11
|
const base = {
|
|
14
12
|
'index.html': Vite.getHTML(),
|
|
15
13
|
'src/App.tsx': Vite.getApp(data),
|
|
@@ -20,12 +18,8 @@ export const scaffold = {
|
|
|
20
18
|
'vite.config.ts': Vite.getViteCfg(),
|
|
21
19
|
'package.json': Vite.getPkgJson(data)
|
|
22
20
|
};
|
|
23
|
-
if (data.provider === 'stackblitz-cloud')
|
|
24
|
-
|
|
25
|
-
}
|
|
26
|
-
if (data.provider === 'codesandbox-cloud') {
|
|
27
|
-
Object.assign(base, getCodesandboxConfig('vite'));
|
|
28
|
-
}
|
|
21
|
+
if (data.provider === 'stackblitz-cloud') Object.assign(base, getStackblitzConfig());
|
|
22
|
+
if (data.provider === 'codesandbox-cloud') Object.assign(base, getCodesandboxConfig('vite'));
|
|
29
23
|
return base;
|
|
30
24
|
},
|
|
31
25
|
cra: (data)=>{
|
|
@@ -37,12 +31,8 @@ export const scaffold = {
|
|
|
37
31
|
'tsconfig.json': CRA.getTsconfig(),
|
|
38
32
|
'package.json': CRA.getPkgJson(data)
|
|
39
33
|
};
|
|
40
|
-
if (data.provider === 'stackblitz-cloud')
|
|
41
|
-
|
|
42
|
-
}
|
|
43
|
-
if (data.provider === 'codesandbox-cloud') {
|
|
44
|
-
Object.assign(base, getCodesandboxConfig('cra'));
|
|
45
|
-
}
|
|
34
|
+
if (data.provider === 'stackblitz-cloud') Object.assign(base, getStackblitzConfig());
|
|
35
|
+
if (data.provider === 'codesandbox-cloud') Object.assign(base, getCodesandboxConfig('cra'));
|
|
46
36
|
return base;
|
|
47
37
|
}
|
|
48
38
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/sandbox-scaffold.ts"],"sourcesContent":["import dedent from 'dedent';\n\nimport type { Data } from './sandbox-utils';\nimport { serializeJson } from './utils';\n\nconst commonDevDeps = { '@types/react': '^17', '@types/react-dom': '^17', typescript: '~4.7.0' };\n\nexport const scaffold = {\n vite: (data: Data): Record<string, string> => {\n if (data.provider === 'codesandbox-browser') {\n throw new Error('vite is not supported on codesandbox-browser');\n }\n\n const base = {\n 'index.html': Vite.getHTML(),\n 'src/App.tsx': Vite.getApp(data),\n 'src/index.tsx': Vite.getRootIndex(),\n 'src/example.tsx': Vite.getExample(data),\n 'tsconfig.json': Vite.getTsconfig(),\n 'tsconfig.node.json': Vite.getTsconfigNode(),\n 'vite.config.ts': Vite.getViteCfg(),\n 'package.json': Vite.getPkgJson(data),\n };\n if (data.provider === 'stackblitz-cloud') {\n Object.assign(base, getStackblitzConfig());\n }\n if (data.provider === 'codesandbox-cloud') {\n Object.assign(base, getCodesandboxConfig('vite'));\n }\n return base;\n },\n cra: (data: Data): Record<string, string> => {\n const base = {\n 'public/index.html': CRA.getHTML(),\n 'src/App.tsx': CRA.getApp(data),\n 'src/index.tsx': CRA.getRootIndex(),\n 'src/example.tsx': CRA.getExample(data),\n 'tsconfig.json': CRA.getTsconfig(),\n 'package.json': CRA.getPkgJson(data),\n };\n if (data.provider === 'stackblitz-cloud') {\n Object.assign(base, getStackblitzConfig());\n }\n if (data.provider === 'codesandbox-cloud') {\n Object.assign(base, getCodesandboxConfig('cra'));\n }\n\n return base;\n },\n};\n\nconst Vite = {\n getHTML: () => dedent`\n <!doctype html>\n <html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/vite.svg\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Vite + React + TS</title>\n </head>\n <body>\n <div id=\"root\"></div>\n <script type=\"module\" src=\"/src/index.tsx\"></script>\n </body>\n </html>\n `,\n getRootIndex: getIndex,\n getExample,\n getApp,\n getViteCfg: () => {\n return dedent`\n import { defineConfig } from 'vite'\n import react from '@vitejs/plugin-react'\n\n // https://vitejs.dev/config/\n export default defineConfig({\n plugins: [react()],\n })\n `;\n },\n getTsconfigNode: () => {\n return serializeJson({\n compilerOptions: {\n composite: true,\n skipLibCheck: true,\n module: 'ESNext',\n moduleResolution: 'bundler',\n allowSyntheticDefaultImports: true,\n },\n include: ['vite.config.ts'],\n });\n },\n getTsconfig: () => {\n return serializeJson({\n compilerOptions: {\n target: 'ES2020',\n useDefineForClassFields: true,\n lib: ['ES2020', 'DOM', 'DOM.Iterable'],\n module: 'ESNext',\n skipLibCheck: true,\n\n /* Bundler mode */\n moduleResolution: 'node',\n // moduleResolution: 'bundler',\n allowImportingTsExtensions: true,\n resolveJsonModule: true,\n isolatedModules: true,\n noEmit: true,\n jsx: 'react-jsx',\n\n /* Linting */\n strict: true,\n noUnusedLocals: true,\n noUnusedParameters: true,\n noFallthroughCasesInSwitch: true,\n },\n include: ['src'],\n references: [{ path: './tsconfig.node.json' }],\n });\n },\n getPkgJson: (data: Data) => {\n return serializeJson({\n name: 'vite-react-typescript-starter',\n private: true,\n version: '0.0.0',\n type: 'module',\n scripts: {\n dev: 'vite',\n build: 'tsc && vite build',\n preview: 'vite preview',\n },\n dependencies: {\n ...data.dependencies,\n },\n devDependencies: {\n ...commonDevDeps,\n '@vitejs/plugin-react': '^4.2.0',\n vite: '^5.0.0',\n },\n });\n },\n};\n\nconst CRA = {\n getHTML: () => `<div id=\"root\"></div>`,\n getRootIndex: getIndex,\n getExample,\n getApp,\n getTsconfig: () =>\n serializeJson({\n include: ['./src/**/*'],\n compilerOptions: {\n strict: true,\n esModuleInterop: true,\n lib: ['dom', 'es2015'],\n jsx: 'react-jsx',\n },\n }),\n getPkgJson: (data: Data) => {\n return serializeJson({\n main: 'src/index.tsx',\n dependencies: {\n ...data.dependencies,\n },\n devDependencies: {\n ...commonDevDeps,\n 'react-scripts': '^5.0.0',\n '@babel/plugin-proposal-private-property-in-object': 'latest',\n },\n scripts: {\n start: 'react-scripts start',\n build: 'react-scripts build',\n test: 'react-scripts test --env=jsdom',\n eject: 'react-scripts eject',\n },\n browserslist: ['>0.2%', 'not dead', 'not ie <= 11', 'not op_mini all'],\n });\n },\n};\n\nfunction getCodesandboxConfig(kind: 'cra' | 'vite') {\n const startConfig = {\n cra: { command: 'yarn start', preview: { port: 3000 } },\n vite: { command: 'yarn dev', preview: { port: 5173 } },\n };\n return {\n '.devcontainer/devcontainer.json': serializeJson({\n name: 'Devcontainer',\n build: {\n dockerfile: './Dockerfile',\n },\n }),\n '.devcontainer/Dockerfile': `FROM node:16-bullseye`,\n '.codesandbox/tasks.json': serializeJson({\n // These tasks will run in order when initializing your CodeSandbox project.\n setupTasks: [\n {\n name: 'Install Dependencies',\n command: 'yarn install',\n },\n ],\n\n // These tasks can be run from CodeSandbox. Running one will open a log in the app.\n tasks: {\n dev: {\n name: 'dev',\n runAtStart: true,\n ...startConfig[kind],\n },\n build: {\n name: 'build',\n command: 'yarn build',\n runAtStart: false,\n },\n preview: {\n name: 'preview',\n command: 'yarn preview',\n runAtStart: false,\n },\n },\n }),\n };\n}\n\nfunction getStackblitzConfig() {\n return {\n '.stackblitzrc': serializeJson({}),\n };\n}\n\nfunction getIndex() {\n return dedent`\n import * as React from 'react';\n import { createRoot } from 'react-dom/client';\n import App from './App';\n\n const root = createRoot(document.getElementById('root') as HTMLElement);\n\n root.render(\n <React.StrictMode>\n <App />\n </React.StrictMode>,\n );\n `;\n}\n\nfunction getExample(demoData: Data) {\n return demoData.storyFile;\n}\n\nfunction getApp(data: Data) {\n const code = dedent`\n import { FluentProvider, webLightTheme } from '@fluentui/react-components';\n import { ${data.storyExportToken} as Example } from './example';\n\n const App = () => {\n return (\n <FluentProvider theme={webLightTheme}>\n <Example />\n </FluentProvider>\n );\n };\n\n export default App;\n `;\n\n return code;\n}\n"],"names":["dedent","serializeJson","commonDevDeps","typescript","scaffold","vite","data","provider","Error","base","Vite","getHTML","getApp","getRootIndex","getExample","getTsconfig","getTsconfigNode","getViteCfg","getPkgJson","Object","assign","getStackblitzConfig","getCodesandboxConfig","cra","CRA","getIndex","compilerOptions","composite","skipLibCheck","module","moduleResolution","allowSyntheticDefaultImports","include","target","useDefineForClassFields","lib","allowImportingTsExtensions","resolveJsonModule","isolatedModules","noEmit","jsx","strict","noUnusedLocals","noUnusedParameters","noFallthroughCasesInSwitch","references","path","name","private","version","type","scripts","dev","build","preview","dependencies","devDependencies","esModuleInterop","main","start","test","eject","browserslist","kind","startConfig","command","port","dockerfile","setupTasks","tasks","runAtStart","demoData","storyFile","code","storyExportToken"],"mappings":"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"}
|
|
1
|
+
{"version":3,"sources":["../src/sandbox-scaffold.ts"],"sourcesContent":["import dedent from 'dedent';\n\nimport type { Data } from './sandbox-utils';\nimport { serializeJson } from './utils';\n\nconst commonDevDeps = { '@types/react': '^17', '@types/react-dom': '^17', typescript: '~4.7.0' };\n\nexport const scaffold = {\n vite: (data: Data): Record<string, string> => {\n if (data.provider === 'codesandbox-browser') {\n throw new Error('vite is not supported on codesandbox-browser');\n }\n\n const base = {\n 'index.html': Vite.getHTML(),\n 'src/App.tsx': Vite.getApp(data),\n 'src/index.tsx': Vite.getRootIndex(),\n 'src/example.tsx': Vite.getExample(data),\n 'tsconfig.json': Vite.getTsconfig(),\n 'tsconfig.node.json': Vite.getTsconfigNode(),\n 'vite.config.ts': Vite.getViteCfg(),\n 'package.json': Vite.getPkgJson(data),\n };\n if (data.provider === 'stackblitz-cloud') {\n Object.assign(base, getStackblitzConfig());\n }\n if (data.provider === 'codesandbox-cloud') {\n Object.assign(base, getCodesandboxConfig('vite'));\n }\n return base;\n },\n cra: (data: Data): Record<string, string> => {\n const base = {\n 'public/index.html': CRA.getHTML(),\n 'src/App.tsx': CRA.getApp(data),\n 'src/index.tsx': CRA.getRootIndex(),\n 'src/example.tsx': CRA.getExample(data),\n 'tsconfig.json': CRA.getTsconfig(),\n 'package.json': CRA.getPkgJson(data),\n };\n if (data.provider === 'stackblitz-cloud') {\n Object.assign(base, getStackblitzConfig());\n }\n if (data.provider === 'codesandbox-cloud') {\n Object.assign(base, getCodesandboxConfig('cra'));\n }\n\n return base;\n },\n};\n\nconst Vite = {\n getHTML: () => dedent`\n <!doctype html>\n <html lang=\"en\">\n <head>\n <meta charset=\"UTF-8\" />\n <link rel=\"icon\" type=\"image/svg+xml\" href=\"/vite.svg\" />\n <meta name=\"viewport\" content=\"width=device-width, initial-scale=1.0\" />\n <title>Vite + React + TS</title>\n </head>\n <body>\n <div id=\"root\"></div>\n <script type=\"module\" src=\"/src/index.tsx\"></script>\n </body>\n </html>\n `,\n getRootIndex: getIndex,\n getExample,\n getApp,\n getViteCfg: () => {\n return dedent`\n import { defineConfig } from 'vite'\n import react from '@vitejs/plugin-react'\n\n // https://vitejs.dev/config/\n export default defineConfig({\n plugins: [react()],\n })\n `;\n },\n getTsconfigNode: () => {\n return serializeJson({\n compilerOptions: {\n composite: true,\n skipLibCheck: true,\n module: 'ESNext',\n moduleResolution: 'bundler',\n allowSyntheticDefaultImports: true,\n },\n include: ['vite.config.ts'],\n });\n },\n getTsconfig: () => {\n return serializeJson({\n compilerOptions: {\n target: 'ES2020',\n useDefineForClassFields: true,\n lib: ['ES2020', 'DOM', 'DOM.Iterable'],\n module: 'ESNext',\n skipLibCheck: true,\n\n /* Bundler mode */\n moduleResolution: 'node',\n // moduleResolution: 'bundler',\n allowImportingTsExtensions: true,\n resolveJsonModule: true,\n isolatedModules: true,\n noEmit: true,\n jsx: 'react-jsx',\n\n /* Linting */\n strict: true,\n noUnusedLocals: true,\n noUnusedParameters: true,\n noFallthroughCasesInSwitch: true,\n },\n include: ['src'],\n references: [{ path: './tsconfig.node.json' }],\n });\n },\n getPkgJson: (data: Data) => {\n return serializeJson({\n name: 'vite-react-typescript-starter',\n private: true,\n version: '0.0.0',\n type: 'module',\n scripts: {\n dev: 'vite',\n build: 'tsc && vite build',\n preview: 'vite preview',\n },\n dependencies: {\n ...data.dependencies,\n },\n devDependencies: {\n ...commonDevDeps,\n '@vitejs/plugin-react': '^4.2.0',\n vite: '^5.0.0',\n },\n });\n },\n};\n\nconst CRA = {\n getHTML: () => `<div id=\"root\"></div>`,\n getRootIndex: getIndex,\n getExample,\n getApp,\n getTsconfig: () =>\n serializeJson({\n include: ['./src/**/*'],\n compilerOptions: {\n strict: true,\n esModuleInterop: true,\n lib: ['dom', 'es2015'],\n jsx: 'react-jsx',\n },\n }),\n getPkgJson: (data: Data) => {\n return serializeJson({\n main: 'src/index.tsx',\n dependencies: {\n ...data.dependencies,\n },\n devDependencies: {\n ...commonDevDeps,\n 'react-scripts': '^5.0.0',\n '@babel/plugin-proposal-private-property-in-object': 'latest',\n },\n scripts: {\n start: 'react-scripts start',\n build: 'react-scripts build',\n test: 'react-scripts test --env=jsdom',\n eject: 'react-scripts eject',\n },\n browserslist: ['>0.2%', 'not dead', 'not ie <= 11', 'not op_mini all'],\n });\n },\n};\n\nfunction getCodesandboxConfig(kind: 'cra' | 'vite') {\n const startConfig = {\n cra: { command: 'yarn start', preview: { port: 3000 } },\n vite: { command: 'yarn dev', preview: { port: 5173 } },\n };\n return {\n '.devcontainer/devcontainer.json': serializeJson({\n name: 'Devcontainer',\n build: {\n dockerfile: './Dockerfile',\n },\n }),\n '.devcontainer/Dockerfile': `FROM node:16-bullseye`,\n '.codesandbox/tasks.json': serializeJson({\n // These tasks will run in order when initializing your CodeSandbox project.\n setupTasks: [\n {\n name: 'Install Dependencies',\n command: 'yarn install',\n },\n ],\n\n // These tasks can be run from CodeSandbox. Running one will open a log in the app.\n tasks: {\n dev: {\n name: 'dev',\n runAtStart: true,\n ...startConfig[kind],\n },\n build: {\n name: 'build',\n command: 'yarn build',\n runAtStart: false,\n },\n preview: {\n name: 'preview',\n command: 'yarn preview',\n runAtStart: false,\n },\n },\n }),\n };\n}\n\nfunction getStackblitzConfig() {\n return {\n '.stackblitzrc': serializeJson({}),\n };\n}\n\nfunction getIndex() {\n return dedent`\n import * as React from 'react';\n import { createRoot } from 'react-dom/client';\n import App from './App';\n\n const root = createRoot(document.getElementById('root') as HTMLElement);\n\n root.render(\n <React.StrictMode>\n <App />\n </React.StrictMode>,\n );\n `;\n}\n\nfunction getExample(demoData: Data) {\n return demoData.storyFile;\n}\n\nfunction getApp(data: Data) {\n const code = dedent`\n import { FluentProvider, webLightTheme } from '@fluentui/react-components';\n import { ${data.storyExportToken} as Example } from './example';\n\n const App = () => {\n return (\n <FluentProvider theme={webLightTheme}>\n <Example />\n </FluentProvider>\n );\n };\n\n export default App;\n `;\n\n return code;\n}\n"],"names":["dedent","serializeJson","commonDevDeps","typescript","scaffold","vite","data","provider","Error","base","Vite","getHTML","getApp","getRootIndex","getExample","getTsconfig","getTsconfigNode","getViteCfg","getPkgJson","Object","assign","getStackblitzConfig","getCodesandboxConfig","cra","CRA","getIndex","compilerOptions","composite","skipLibCheck","module","moduleResolution","allowSyntheticDefaultImports","include","target","useDefineForClassFields","lib","allowImportingTsExtensions","resolveJsonModule","isolatedModules","noEmit","jsx","strict","noUnusedLocals","noUnusedParameters","noFallthroughCasesInSwitch","references","path","name","private","version","type","scripts","dev","build","preview","dependencies","devDependencies","esModuleInterop","main","start","test","eject","browserslist","kind","startConfig","command","port","dockerfile","setupTasks","tasks","runAtStart","demoData","storyFile","code","storyExportToken"],"mappings":"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"}
|
package/lib/sandbox-utils.js
CHANGED
|
@@ -7,25 +7,27 @@ export function addHiddenInput(form, name, value) {
|
|
|
7
7
|
input.value = value;
|
|
8
8
|
form.appendChild(input);
|
|
9
9
|
}
|
|
10
|
-
export function
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
}
|
|
16
|
-
const
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
10
|
+
export function prepareSandboxContainers(context) {
|
|
11
|
+
// Support anchor ID formats for our Storybook major versions range.
|
|
12
|
+
// 10< `#anchor--{id}`
|
|
13
|
+
// >=10 `#anchor--primary--{id}`
|
|
14
|
+
// See: https://github.com/storybookjs/storybook/pull/33384
|
|
15
|
+
const docsSelector = `#anchor--${context.id} .docs-story, #anchor--primary--${context.id} .docs-story`;
|
|
16
|
+
const rootElements = document.querySelectorAll(docsSelector);
|
|
17
|
+
if (!rootElements.length) throw new Error(`css selector: ${docsSelector}, doesn't exist `);
|
|
18
|
+
return Array.from(rootElements).map((rootElement)=>{
|
|
19
|
+
const showCodeButton = rootElement.querySelector('.docblock-code-toggle');
|
|
20
|
+
const container = showCodeButton === null || showCodeButton === void 0 ? void 0 : showCodeButton.parentElement;
|
|
21
|
+
if (!container) throw new Error(`css selector: '.docblock-code-toggle', doesn't exist `);
|
|
22
|
+
const classList = (showCodeButton.classList.value + ' with-code-sandbox-button').split(' ');
|
|
23
|
+
// remove button if it already existed
|
|
24
|
+
const ourButtons = container.querySelectorAll(`.with-code-sandbox-button`);
|
|
25
|
+
ourButtons.forEach((node)=>node.remove());
|
|
26
|
+
return {
|
|
27
|
+
container,
|
|
28
|
+
cssClasses: classList
|
|
29
|
+
};
|
|
30
|
+
});
|
|
29
31
|
}
|
|
30
32
|
const addonConfigDefaults = {
|
|
31
33
|
requiredDependencies: {},
|
|
@@ -33,9 +35,7 @@ const addonConfigDefaults = {
|
|
|
33
35
|
};
|
|
34
36
|
export function prepareData(context) {
|
|
35
37
|
var _context_parameters;
|
|
36
|
-
if (!context.parameters.exportToSandbox)
|
|
37
|
-
throw new Error('exportToSandbox config parameter cannot be empty');
|
|
38
|
-
}
|
|
38
|
+
if (!context.parameters.exportToSandbox) throw new Error('exportToSandbox config parameter cannot be empty');
|
|
39
39
|
const addonConfig = {
|
|
40
40
|
...addonConfigDefaults,
|
|
41
41
|
...context.parameters.exportToSandbox
|
|
@@ -57,9 +57,7 @@ export function prepareData(context) {
|
|
|
57
57
|
// just get the "Default"
|
|
58
58
|
// @TODO - im not sure this is still needed, wasn't able to repro. Can we remove it ?
|
|
59
59
|
const storyExportToken = context.originalStoryFn.name.split('_stories_').slice(-1).pop();
|
|
60
|
-
if (!storyExportToken)
|
|
61
|
-
throw new Error('issues processing story export token');
|
|
62
|
-
}
|
|
60
|
+
if (!storyExportToken) throw new Error('issues processing story export token');
|
|
63
61
|
const demoData = {
|
|
64
62
|
storyFile,
|
|
65
63
|
storyExportToken,
|