@fluentui/react-storybook-addon 0.4.1 → 0.4.3

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.
Files changed (83) hide show
  1. package/CHANGELOG.md +38 -2
  2. package/package.json +14 -14
  3. package/dist/index.d.ts +0 -86
  4. package/lib/components/DirectionSwitch.js +0 -26
  5. package/lib/components/DirectionSwitch.js.map +0 -1
  6. package/lib/components/ReactStrictMode.js +0 -23
  7. package/lib/components/ReactStrictMode.js.map +0 -1
  8. package/lib/components/ThemePicker.js +0 -61
  9. package/lib/components/ThemePicker.js.map +0 -1
  10. package/lib/constants.js +0 -4
  11. package/lib/constants.js.map +0 -1
  12. package/lib/decorators/withAriaLive.js +0 -18
  13. package/lib/decorators/withAriaLive.js.map +0 -1
  14. package/lib/decorators/withFluentProvider.js +0 -48
  15. package/lib/decorators/withFluentProvider.js.map +0 -1
  16. package/lib/decorators/withReactStrictMode.js +0 -16
  17. package/lib/decorators/withReactStrictMode.js.map +0 -1
  18. package/lib/docs/DirSwitch.js +0 -51
  19. package/lib/docs/DirSwitch.js.map +0 -1
  20. package/lib/docs/FluentDocsContainer.js +0 -24
  21. package/lib/docs/FluentDocsContainer.js.map +0 -1
  22. package/lib/docs/FluentDocsPage.js +0 -296
  23. package/lib/docs/FluentDocsPage.js.map +0 -1
  24. package/lib/docs/ThemePicker.js +0 -61
  25. package/lib/docs/ThemePicker.js.map +0 -1
  26. package/lib/docs/Toc.js +0 -130
  27. package/lib/docs/Toc.js.map +0 -1
  28. package/lib/docs/index.js +0 -2
  29. package/lib/docs/index.js.map +0 -1
  30. package/lib/docs/utils.js +0 -72
  31. package/lib/docs/utils.js.map +0 -1
  32. package/lib/hooks.js +0 -16
  33. package/lib/hooks.js.map +0 -1
  34. package/lib/index.js +0 -3
  35. package/lib/index.js.map +0 -1
  36. package/lib/preset/manager.js +0 -28
  37. package/lib/preset/manager.js.map +0 -1
  38. package/lib/preset/preview.js +0 -26
  39. package/lib/preset/preview.js.map +0 -1
  40. package/lib/theme.js +0 -31
  41. package/lib/theme.js.map +0 -1
  42. package/lib/utils/isDecoratorDisabled.js +0 -6
  43. package/lib/utils/isDecoratorDisabled.js.map +0 -1
  44. package/lib-commonjs/components/DirectionSwitch.js +0 -37
  45. package/lib-commonjs/components/DirectionSwitch.js.map +0 -1
  46. package/lib-commonjs/components/ReactStrictMode.js +0 -34
  47. package/lib-commonjs/components/ReactStrictMode.js.map +0 -1
  48. package/lib-commonjs/components/ThemePicker.js +0 -72
  49. package/lib-commonjs/components/ThemePicker.js.map +0 -1
  50. package/lib-commonjs/constants.js +0 -28
  51. package/lib-commonjs/constants.js.map +0 -1
  52. package/lib-commonjs/decorators/withAriaLive.js +0 -29
  53. package/lib-commonjs/decorators/withAriaLive.js.map +0 -1
  54. package/lib-commonjs/decorators/withFluentProvider.js +0 -59
  55. package/lib-commonjs/decorators/withFluentProvider.js.map +0 -1
  56. package/lib-commonjs/decorators/withReactStrictMode.js +0 -27
  57. package/lib-commonjs/decorators/withReactStrictMode.js.map +0 -1
  58. package/lib-commonjs/docs/DirSwitch.js +0 -60
  59. package/lib-commonjs/docs/DirSwitch.js.map +0 -1
  60. package/lib-commonjs/docs/FluentDocsContainer.js +0 -33
  61. package/lib-commonjs/docs/FluentDocsContainer.js.map +0 -1
  62. package/lib-commonjs/docs/FluentDocsPage.js +0 -307
  63. package/lib-commonjs/docs/FluentDocsPage.js.map +0 -1
  64. package/lib-commonjs/docs/ThemePicker.js +0 -70
  65. package/lib-commonjs/docs/ThemePicker.js.map +0 -1
  66. package/lib-commonjs/docs/Toc.js +0 -149
  67. package/lib-commonjs/docs/Toc.js.map +0 -1
  68. package/lib-commonjs/docs/index.js +0 -20
  69. package/lib-commonjs/docs/index.js.map +0 -1
  70. package/lib-commonjs/docs/utils.js +0 -86
  71. package/lib-commonjs/docs/utils.js.map +0 -1
  72. package/lib-commonjs/hooks.js +0 -37
  73. package/lib-commonjs/hooks.js.map +0 -1
  74. package/lib-commonjs/index.js +0 -27
  75. package/lib-commonjs/index.js.map +0 -1
  76. package/lib-commonjs/preset/manager.js +0 -32
  77. package/lib-commonjs/preset/manager.js.map +0 -1
  78. package/lib-commonjs/preset/preview.js +0 -47
  79. package/lib-commonjs/preset/preview.js.map +0 -1
  80. package/lib-commonjs/theme.js +0 -49
  81. package/lib-commonjs/theme.js.map +0 -1
  82. package/lib-commonjs/utils/isDecoratorDisabled.js +0 -16
  83. package/lib-commonjs/utils/isDecoratorDisabled.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,12 +1,48 @@
1
1
  # Change Log - @fluentui/react-storybook-addon
2
2
 
3
- This log was last generated on Wed, 13 Aug 2025 12:48:55 GMT and should not be manually modified.
3
+ This log was last generated on Mon, 08 Sep 2025 12:41:17 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [0.4.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v0.4.3)
8
+
9
+ Mon, 08 Sep 2025 12:41:17 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v0.4.2..@fluentui/react-storybook-addon_v0.4.3)
11
+
12
+ ### Patches
13
+
14
+ - chore: enforce explicit module boundary types ([PR #35080](https://github.com/microsoft/fluentui/pull/35080) by dmytrokirpa@microsoft.com)
15
+ - chore: extend peer dependencies versions to support React 19 ([PR #35145](https://github.com/microsoft/fluentui/pull/35145) by dmytrokirpa@microsoft.com)
16
+ - Bump @fluentui/react-aria to v9.17.0 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
17
+ - Bump @fluentui/react-button to v9.6.6 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
18
+ - Bump @fluentui/react-menu to v9.19.6 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
19
+ - Bump @fluentui/react-label to v9.3.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
20
+ - Bump @fluentui/react-switch to v9.4.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
21
+ - Bump @fluentui/react-text to v9.6.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
22
+ - Bump @fluentui/react-link to v9.6.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
23
+ - Bump @fluentui/react-provider to v9.22.5 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
24
+ - Bump @fluentui/react-utilities to v9.24.1 ([commit](https://github.com/microsoft/fluentui/commit/17af11b3c9f4cac2beeaf4342a81c1f08e95fd29) by beachball)
25
+
26
+ ## [0.4.2](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v0.4.2)
27
+
28
+ Thu, 21 Aug 2025 12:25:39 GMT
29
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v0.4.1..@fluentui/react-storybook-addon_v0.4.2)
30
+
31
+ ### Patches
32
+
33
+ - Bump @fluentui/react-aria to v9.16.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
34
+ - Bump @fluentui/react-button to v9.6.5 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
35
+ - Bump @fluentui/react-menu to v9.19.5 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
36
+ - Bump @fluentui/react-label to v9.3.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
37
+ - Bump @fluentui/react-switch to v9.4.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
38
+ - Bump @fluentui/react-text to v9.6.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
39
+ - Bump @fluentui/react-link to v9.6.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
40
+ - Bump @fluentui/react-provider to v9.22.4 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
41
+ - Bump @fluentui/react-utilities to v9.24.0 ([commit](https://github.com/microsoft/fluentui/commit/884c695de4f736774c224fa33b2e410bf42752b0) by beachball)
42
+
7
43
  ## [0.4.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v0.4.1)
8
44
 
9
- Wed, 13 Aug 2025 12:48:55 GMT
45
+ Wed, 13 Aug 2025 12:49:04 GMT
10
46
  [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v0.4.0..@fluentui/react-storybook-addon_v0.4.1)
11
47
 
12
48
  ### Patches
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-storybook-addon",
3
- "version": "0.4.1",
3
+ "version": "0.4.3",
4
4
  "description": "fluentui react storybook addon",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -16,15 +16,15 @@
16
16
  "@fluentui/scripts-api-extractor": "*"
17
17
  },
18
18
  "dependencies": {
19
- "@fluentui/react-aria": "^9.16.3",
20
- "@fluentui/react-button": "^9.6.4",
21
- "@fluentui/react-menu": "^9.19.4",
22
- "@fluentui/react-label": "^9.3.3",
23
- "@fluentui/react-switch": "^9.4.3",
24
- "@fluentui/react-text": "^9.6.3",
25
- "@fluentui/react-link": "^9.6.3",
26
- "@fluentui/react-provider": "^9.22.3",
27
- "@fluentui/react-utilities": "^9.23.2",
19
+ "@fluentui/react-aria": "^9.17.0",
20
+ "@fluentui/react-button": "^9.6.6",
21
+ "@fluentui/react-menu": "^9.19.6",
22
+ "@fluentui/react-label": "^9.3.5",
23
+ "@fluentui/react-switch": "^9.4.5",
24
+ "@fluentui/react-text": "^9.6.5",
25
+ "@fluentui/react-link": "^9.6.5",
26
+ "@fluentui/react-provider": "^9.22.5",
27
+ "@fluentui/react-utilities": "^9.24.1",
28
28
  "@fluentui/react-theme": "^9.2.0",
29
29
  "@griffel/react": "^1.5.22",
30
30
  "@swc/helpers": "^0.5.1"
@@ -37,10 +37,10 @@
37
37
  "@storybook/manager-api": "^7.6.20",
38
38
  "@storybook/react": "^7.6.20",
39
39
  "@storybook/theming": "^7.6.20",
40
- "@types/react-dom": ">=16.9.0 <19.0.0",
41
- "@types/react": ">=16.14.0 <19.0.0",
42
- "react-dom": ">=16.14.0 <19.0.0",
43
- "react": ">=16.14.0 <19.0.0"
40
+ "@types/react-dom": ">=16.9.0 <20.0.0",
41
+ "@types/react": ">=16.14.0 <20.0.0",
42
+ "react-dom": ">=16.14.0 <20.0.0",
43
+ "react": ">=16.14.0 <20.0.0"
44
44
  },
45
45
  "beachball": {
46
46
  "disallowedChangeTypes": [
package/dist/index.d.ts DELETED
@@ -1,86 +0,0 @@
1
- import { Args } from '@storybook/react';
2
- import { Parameters as Parameters_2 } from '@storybook/react';
3
- import { StoryContext } from '@storybook/react';
4
-
5
- export declare const DIR_ID: "storybook_fluentui-react-addon_dir";
6
-
7
- /**
8
- * Configuration for docs components
9
- */
10
- declare type FluentDocsConfig = boolean | {
11
- tableOfContents?: boolean;
12
- dirSwitcher?: boolean;
13
- themePicker?: boolean;
14
- argTable?: boolean | {
15
- slotsApi?: boolean;
16
- nativePropsApi?: boolean;
17
- };
18
- };
19
-
20
- /**
21
- * Extends the storybook globals object to include fluent specific properties
22
- */
23
- export declare interface FluentGlobals extends Args {
24
- [DIR_ID]?: 'ltr' | 'rtl';
25
- [THEME_ID]?: ThemeIds;
26
- [STRICT_MODE_ID]?: boolean;
27
- }
28
-
29
- /**
30
- * Extends the storybook parameters object to include fluent specific properties
31
- */
32
- export declare interface FluentParameters extends Parameters_2 {
33
- dir?: 'ltr' | 'rtl';
34
- fluentTheme?: ThemeIds;
35
- mode?: 'default' | 'vr-test';
36
- reactStorybookAddon?: {
37
- disabledDecorators?: ['AriaLive' | 'FluentProvider' | 'ReactStrictMode'];
38
- docs?: FluentDocsConfig;
39
- };
40
- }
41
-
42
- export declare interface FluentStoryContext extends StoryContext {
43
- globals: FluentGlobals;
44
- parameters: FluentParameters;
45
- }
46
-
47
- export declare function parameters(options?: FluentParameters): {
48
- dir: string;
49
- fluentTheme: string;
50
- mode: string;
51
- reactStorybookAddon?: {
52
- disabledDecorators?: ["AriaLive" | "FluentProvider" | "ReactStrictMode"];
53
- docs?: FluentDocsConfig;
54
- };
55
- };
56
-
57
- declare const STRICT_MODE_ID: "storybook_fluentui-react-addon_strict-mode";
58
-
59
- export declare const THEME_ID: "storybook_fluentui-react-addon_theme";
60
-
61
- export declare type ThemeIds = (typeof themes)[number]['id'];
62
-
63
- export declare const themes: readonly [{
64
- readonly id: "web-light";
65
- readonly label: "Web Light";
66
- }, {
67
- readonly id: "web-dark";
68
- readonly label: "Web Dark";
69
- }, {
70
- readonly id: "teams-light";
71
- readonly label: "Teams Light";
72
- }, {
73
- readonly id: "teams-dark";
74
- readonly label: "Teams Dark";
75
- }, {
76
- readonly id: "teams-light-v21";
77
- readonly label: "Teams Light V2.1";
78
- }, {
79
- readonly id: "teams-dark-v21";
80
- readonly label: "Teams Dark V2.1";
81
- }, {
82
- readonly id: "teams-high-contrast";
83
- readonly label: "Teams High Contrast";
84
- }];
85
-
86
- export { }
@@ -1,26 +0,0 @@
1
- import * as React from 'react';
2
- import { IconButton } from '@storybook/components';
3
- import { styled } from '@storybook/theming';
4
- import { DIR_ID } from '../constants';
5
- import { useGlobals } from '../hooks';
6
- const Monospace = styled.span({
7
- fontFamily: "'Cascadia Code', Menlo, 'Courier New', Courier, monospace",
8
- letterSpacing: '-0.05em'
9
- });
10
- export const DirectionSwitch = ()=>{
11
- const [globals, updateGlobals] = useGlobals();
12
- var _globals_DIR_ID;
13
- const direction = (_globals_DIR_ID = globals[DIR_ID]) !== null && _globals_DIR_ID !== void 0 ? _globals_DIR_ID : 'ltr';
14
- const isLTR = direction === 'ltr';
15
- const toggleDirection = React.useCallback(()=>updateGlobals({
16
- [DIR_ID]: isLTR ? 'rtl' : 'ltr'
17
- }), [
18
- isLTR,
19
- updateGlobals
20
- ]);
21
- return /*#__PURE__*/ React.createElement(IconButton, {
22
- key: DIR_ID,
23
- title: "Change Direction",
24
- onClick: toggleDirection
25
- }, /*#__PURE__*/ React.createElement("div", null, "Direction: ", /*#__PURE__*/ React.createElement(Monospace, null, direction.toUpperCase())));
26
- };
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/DirectionSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconButton } from '@storybook/components';\nimport { styled } from '@storybook/theming';\n\nimport { DIR_ID } from '../constants';\nimport { useGlobals } from '../hooks';\n\nconst Monospace = styled.span({\n fontFamily: \"'Cascadia Code', Menlo, 'Courier New', Courier, monospace\",\n letterSpacing: '-0.05em',\n});\n\nexport const DirectionSwitch = () => {\n const [globals, updateGlobals] = useGlobals();\n\n const direction = globals[DIR_ID] ?? 'ltr';\n const isLTR = direction === 'ltr';\n\n const toggleDirection = React.useCallback(\n () =>\n updateGlobals({\n [DIR_ID]: isLTR ? 'rtl' : 'ltr',\n }),\n [isLTR, updateGlobals],\n );\n\n return (\n <IconButton key={DIR_ID} title=\"Change Direction\" onClick={toggleDirection}>\n <div>\n Direction: <Monospace>{direction.toUpperCase()}</Monospace>\n </div>\n </IconButton>\n );\n};\n"],"names":["React","IconButton","styled","DIR_ID","useGlobals","Monospace","span","fontFamily","letterSpacing","DirectionSwitch","globals","updateGlobals","direction","isLTR","toggleDirection","useCallback","key","title","onClick","div","toUpperCase"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,QAAQ,wBAAwB;AACnD,SAASC,MAAM,QAAQ,qBAAqB;AAE5C,SAASC,MAAM,QAAQ,eAAe;AACtC,SAASC,UAAU,QAAQ,WAAW;AAEtC,MAAMC,YAAYH,OAAOI,IAAI,CAAC;IAC5BC,YAAY;IACZC,eAAe;AACjB;AAEA,OAAO,MAAMC,kBAAkB;IAC7B,MAAM,CAACC,SAASC,cAAc,GAAGP;QAEfM;IAAlB,MAAME,YAAYF,CAAAA,kBAAAA,OAAO,CAACP,OAAO,cAAfO,6BAAAA,kBAAmB;IACrC,MAAMG,QAAQD,cAAc;IAE5B,MAAME,kBAAkBd,MAAMe,WAAW,CACvC,IACEJ,cAAc;YACZ,CAACR,OAAO,EAAEU,QAAQ,QAAQ;QAC5B,IACF;QAACA;QAAOF;KAAc;IAGxB,qBACE,oBAACV;QAAWe,KAAKb;QAAQc,OAAM;QAAmBC,SAASJ;qBACzD,oBAACK,aAAI,6BACQ,oBAACd,iBAAWO,UAAUQ,WAAW;AAIpD,EAAE"}
@@ -1,23 +0,0 @@
1
- import * as React from 'react';
2
- import { IconButton, Icons } from '@storybook/components';
3
- import { STRICT_MODE_ID } from '../constants';
4
- import { useGlobals } from '../hooks';
5
- export const ReactStrictMode = ()=>{
6
- const [globals, updateGlobals] = useGlobals();
7
- var _globals_STRICT_MODE_ID;
8
- const isActive = (_globals_STRICT_MODE_ID = globals[STRICT_MODE_ID]) !== null && _globals_STRICT_MODE_ID !== void 0 ? _globals_STRICT_MODE_ID : false;
9
- const toggleStrictMode = React.useCallback(()=>updateGlobals({
10
- [STRICT_MODE_ID]: !isActive
11
- }), [
12
- isActive,
13
- updateGlobals
14
- ]);
15
- return /*#__PURE__*/ React.createElement(IconButton, {
16
- key: STRICT_MODE_ID,
17
- active: isActive,
18
- title: "Toggle React Strict mode",
19
- onClick: toggleStrictMode
20
- }, /*#__PURE__*/ React.createElement(Icons, {
21
- icon: "lock"
22
- }));
23
- };
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/ReactStrictMode.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconButton, Icons } from '@storybook/components';\n\nimport { STRICT_MODE_ID } from '../constants';\nimport { useGlobals } from '../hooks';\n\nexport const ReactStrictMode = () => {\n const [globals, updateGlobals] = useGlobals();\n\n const isActive = globals[STRICT_MODE_ID] ?? false;\n\n const toggleStrictMode = React.useCallback(\n () =>\n updateGlobals({\n [STRICT_MODE_ID]: !isActive,\n }),\n [isActive, updateGlobals],\n );\n\n return (\n <IconButton key={STRICT_MODE_ID} active={isActive} title=\"Toggle React Strict mode\" onClick={toggleStrictMode}>\n <Icons icon=\"lock\" />\n </IconButton>\n );\n};\n"],"names":["React","IconButton","Icons","STRICT_MODE_ID","useGlobals","ReactStrictMode","globals","updateGlobals","isActive","toggleStrictMode","useCallback","key","active","title","onClick","icon"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,KAAK,QAAQ,wBAAwB;AAE1D,SAASC,cAAc,QAAQ,eAAe;AAC9C,SAASC,UAAU,QAAQ,WAAW;AAEtC,OAAO,MAAMC,kBAAkB;IAC7B,MAAM,CAACC,SAASC,cAAc,GAAGH;QAEhBE;IAAjB,MAAME,WAAWF,CAAAA,0BAAAA,OAAO,CAACH,eAAe,cAAvBG,qCAAAA,0BAA2B;IAE5C,MAAMG,mBAAmBT,MAAMU,WAAW,CACxC,IACEH,cAAc;YACZ,CAACJ,eAAe,EAAE,CAACK;QACrB,IACF;QAACA;QAAUD;KAAc;IAG3B,qBACE,oBAACN;QAAWU,KAAKR;QAAgBS,QAAQJ;QAAUK,OAAM;QAA2BC,SAASL;qBAC3F,oBAACP;QAAMa,MAAK;;AAGlB,EAAE"}
@@ -1,61 +0,0 @@
1
- import * as React from 'react';
2
- import { IconButton, Icons, TooltipLinkList, WithTooltip } from '@storybook/components';
3
- import { useParameter } from '@storybook/manager-api';
4
- import { themes, defaultTheme } from '../theme';
5
- import { THEME_ID } from '../constants';
6
- import { useGlobals } from '../hooks';
7
- function createThemeItems(value, changeTheme, getCurrentTheme) {
8
- return value.map((item)=>{
9
- return {
10
- id: item.id,
11
- title: item.id === defaultTheme.id ? `${item.label} (Default)` : item.label,
12
- onClick: ()=>{
13
- changeTheme(item.id);
14
- },
15
- value: item.id,
16
- active: getCurrentTheme() === item.id
17
- };
18
- });
19
- }
20
- export const ThemePicker = ()=>{
21
- const [globals, updateGlobals] = useGlobals();
22
- const fluentTheme = useParameter('fluentTheme');
23
- var _globals_THEME_ID;
24
- const selectedThemeId = fluentTheme ? fluentTheme : (_globals_THEME_ID = globals[THEME_ID]) !== null && _globals_THEME_ID !== void 0 ? _globals_THEME_ID : defaultTheme.id;
25
- const selectedTheme = themes.find((entry)=>entry.id === selectedThemeId);
26
- const isActive = selectedThemeId !== defaultTheme.id;
27
- const setTheme = React.useCallback((id)=>{
28
- updateGlobals({
29
- [THEME_ID]: id
30
- });
31
- }, [
32
- updateGlobals
33
- ]);
34
- const renderTooltip = React.useCallback((props)=>{
35
- return /*#__PURE__*/ React.createElement(TooltipLinkList, {
36
- links: createThemeItems(themes, (id)=>{
37
- setTheme(id);
38
- props.onHide();
39
- }, ()=>selectedThemeId)
40
- });
41
- }, [
42
- selectedThemeId,
43
- setTheme
44
- ]);
45
- return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(WithTooltip, {
46
- placement: "top",
47
- trigger: "click",
48
- closeOnClick: true,
49
- tooltip: renderTooltip
50
- }, /*#__PURE__*/ React.createElement(IconButton, {
51
- key: THEME_ID,
52
- title: "Change Fluent theme",
53
- active: isActive
54
- }, /*#__PURE__*/ React.createElement(Icons, {
55
- icon: "arrowdown"
56
- }), /*#__PURE__*/ React.createElement("span", {
57
- style: {
58
- marginLeft: 5
59
- }
60
- }, "Theme: ", selectedTheme === null || selectedTheme === void 0 ? void 0 : selectedTheme.label))));
61
- };
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/components/ThemePicker.tsx"],"sourcesContent":["import * as React from 'react';\nimport { IconButton, Icons, TooltipLinkList, WithTooltip } from '@storybook/components';\nimport { useParameter } from '@storybook/manager-api';\n\nimport { ThemeIds, themes, defaultTheme } from '../theme';\nimport { THEME_ID } from '../constants';\nimport { useGlobals, FluentParameters } from '../hooks';\n\nexport interface ThemeSelectorItem {\n id: string;\n title: string;\n onClick: () => void;\n value: string;\n active: boolean;\n}\n\nfunction createThemeItems(\n value: typeof themes,\n changeTheme: (id: ThemeIds) => void,\n getCurrentTheme: () => ThemeIds,\n): ThemeSelectorItem[] {\n return value.map(item => {\n return {\n id: item.id,\n title: item.id === defaultTheme.id ? `${item.label} (Default)` : item.label,\n onClick: () => {\n changeTheme(item.id);\n },\n value: item.id,\n active: getCurrentTheme() === item.id,\n };\n });\n}\n\nexport const ThemePicker = () => {\n const [globals, updateGlobals] = useGlobals();\n const fluentTheme: FluentParameters['fluentTheme'] = useParameter('fluentTheme');\n\n const selectedThemeId = fluentTheme ? fluentTheme : globals[THEME_ID] ?? defaultTheme.id;\n const selectedTheme = themes.find(entry => entry.id === selectedThemeId);\n\n const isActive = selectedThemeId !== defaultTheme.id;\n\n const setTheme = React.useCallback(\n (id: ThemeIds) => {\n updateGlobals({ [THEME_ID]: id });\n },\n [updateGlobals],\n );\n\n const renderTooltip = React.useCallback(\n (props: { onHide: () => void }) => {\n return (\n <TooltipLinkList\n links={createThemeItems(\n themes,\n id => {\n setTheme(id);\n props.onHide();\n },\n () => selectedThemeId,\n )}\n />\n );\n },\n [selectedThemeId, setTheme],\n );\n\n return (\n <>\n <WithTooltip placement=\"top\" trigger=\"click\" closeOnClick tooltip={renderTooltip}>\n <IconButton key={THEME_ID} title=\"Change Fluent theme\" active={isActive}>\n <Icons icon=\"arrowdown\" />\n <span style={{ marginLeft: 5 }}>Theme: {selectedTheme?.label}</span>\n </IconButton>\n </WithTooltip>\n </>\n );\n};\n"],"names":["React","IconButton","Icons","TooltipLinkList","WithTooltip","useParameter","themes","defaultTheme","THEME_ID","useGlobals","createThemeItems","value","changeTheme","getCurrentTheme","map","item","id","title","label","onClick","active","ThemePicker","globals","updateGlobals","fluentTheme","selectedThemeId","selectedTheme","find","entry","isActive","setTheme","useCallback","renderTooltip","props","links","onHide","placement","trigger","closeOnClick","tooltip","key","icon","span","style","marginLeft"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,UAAU,EAAEC,KAAK,EAAEC,eAAe,EAAEC,WAAW,QAAQ,wBAAwB;AACxF,SAASC,YAAY,QAAQ,yBAAyB;AAEtD,SAAmBC,MAAM,EAAEC,YAAY,QAAQ,WAAW;AAC1D,SAASC,QAAQ,QAAQ,eAAe;AACxC,SAASC,UAAU,QAA0B,WAAW;AAUxD,SAASC,iBACPC,KAAoB,EACpBC,WAAmC,EACnCC,eAA+B;IAE/B,OAAOF,MAAMG,GAAG,CAACC,CAAAA;QACf,OAAO;YACLC,IAAID,KAAKC,EAAE;YACXC,OAAOF,KAAKC,EAAE,KAAKT,aAAaS,EAAE,GAAG,GAAGD,KAAKG,KAAK,CAAC,UAAU,CAAC,GAAGH,KAAKG,KAAK;YAC3EC,SAAS;gBACPP,YAAYG,KAAKC,EAAE;YACrB;YACAL,OAAOI,KAAKC,EAAE;YACdI,QAAQP,sBAAsBE,KAAKC,EAAE;QACvC;IACF;AACF;AAEA,OAAO,MAAMK,cAAc;IACzB,MAAM,CAACC,SAASC,cAAc,GAAGd;IACjC,MAAMe,cAA+CnB,aAAa;QAEdiB;IAApD,MAAMG,kBAAkBD,cAAcA,cAAcF,CAAAA,oBAAAA,OAAO,CAACd,SAAS,cAAjBc,+BAAAA,oBAAqBf,aAAaS,EAAE;IACxF,MAAMU,gBAAgBpB,OAAOqB,IAAI,CAACC,CAAAA,QAASA,MAAMZ,EAAE,KAAKS;IAExD,MAAMI,WAAWJ,oBAAoBlB,aAAaS,EAAE;IAEpD,MAAMc,WAAW9B,MAAM+B,WAAW,CAChC,CAACf;QACCO,cAAc;YAAE,CAACf,SAAS,EAAEQ;QAAG;IACjC,GACA;QAACO;KAAc;IAGjB,MAAMS,gBAAgBhC,MAAM+B,WAAW,CACrC,CAACE;QACC,qBACE,oBAAC9B;YACC+B,OAAOxB,iBACLJ,QACAU,CAAAA;gBACEc,SAASd;gBACTiB,MAAME,MAAM;YACd,GACA,IAAMV;;IAId,GACA;QAACA;QAAiBK;KAAS;IAG7B,qBACE,wDACE,oBAAC1B;QAAYgC,WAAU;QAAMC,SAAQ;QAAQC,cAAAA;QAAaC,SAASP;qBACjE,oBAAC/B;QAAWuC,KAAKhC;QAAUS,OAAM;QAAsBG,QAAQS;qBAC7D,oBAAC3B;QAAMuC,MAAK;sBACZ,oBAACC;QAAKC,OAAO;YAAEC,YAAY;QAAE;OAAG,WAAQlB,0BAAAA,oCAAAA,cAAeR,KAAK;AAKtE,EAAE"}
package/lib/constants.js DELETED
@@ -1,4 +0,0 @@
1
- export const ADDON_ID = 'storybook_fluentui-react-addon';
2
- export const DIR_ID = `${ADDON_ID}_dir`;
3
- export const STRICT_MODE_ID = `${ADDON_ID}_strict-mode`;
4
- export const THEME_ID = `${ADDON_ID}_theme`;
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/constants.ts"],"sourcesContent":["export const ADDON_ID = 'storybook_fluentui-react-addon';\n\nexport const DIR_ID = `${ADDON_ID}_dir` as const;\nexport const STRICT_MODE_ID = `${ADDON_ID}_strict-mode` as const;\nexport const THEME_ID = `${ADDON_ID}_theme` as const;\n"],"names":["ADDON_ID","DIR_ID","STRICT_MODE_ID","THEME_ID"],"mappings":"AAAA,OAAO,MAAMA,WAAW,iCAAiC;AAEzD,OAAO,MAAMC,SAAS,GAAGD,SAAS,IAAI,CAAC,CAAU;AACjD,OAAO,MAAME,iBAAiB,GAAGF,SAAS,YAAY,CAAC,CAAU;AACjE,OAAO,MAAMG,WAAW,GAAGH,SAAS,MAAM,CAAC,CAAU"}
@@ -1,18 +0,0 @@
1
- import { AriaLiveAnnouncer } from '@fluentui/react-aria';
2
- import * as React from 'react';
3
- import { isDecoratorDisabled } from '../utils/isDecoratorDisabled';
4
- export const withAriaLive = (Story, context)=>{
5
- if (isDecoratorDisabled(context, 'AriaLive')) {
6
- return Story();
7
- }
8
- return /*#__PURE__*/ React.createElement(AriaLiveWrapper, null, /*#__PURE__*/ React.createElement(Story, null));
9
- };
10
- const AriaLiveWrapper = (props)=>{
11
- const [mounted, setMounted] = React.useState(false);
12
- React.useEffect(()=>{
13
- // The AriaLiveAnnouncer appends an element to DOM in an effect
14
- // Trigger an extra renderer to make sure that doc examples that need to announce on mount can do so
15
- setMounted(true);
16
- }, []);
17
- return /*#__PURE__*/ React.createElement(AriaLiveAnnouncer, null, mounted && props.children);
18
- };
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/decorators/withAriaLive.tsx"],"sourcesContent":["import { AriaLiveAnnouncer } from '@fluentui/react-aria';\nimport * as React from 'react';\n\nimport type { FluentStoryContext } from '../hooks';\nimport { isDecoratorDisabled } from '../utils/isDecoratorDisabled';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nexport const withAriaLive = (Story: () => JSXElement, context: FluentStoryContext) => {\n if (isDecoratorDisabled(context, 'AriaLive')) {\n return Story();\n }\n\n return (\n <AriaLiveWrapper>\n <Story />\n </AriaLiveWrapper>\n );\n};\n\nconst AriaLiveWrapper: React.FC<{ children: React.ReactNode }> = props => {\n const [mounted, setMounted] = React.useState(false);\n\n React.useEffect(() => {\n // The AriaLiveAnnouncer appends an element to DOM in an effect\n // Trigger an extra renderer to make sure that doc examples that need to announce on mount can do so\n setMounted(true);\n }, []);\n\n return <AriaLiveAnnouncer>{mounted && props.children}</AriaLiveAnnouncer>;\n};\n"],"names":["AriaLiveAnnouncer","React","isDecoratorDisabled","withAriaLive","Story","context","AriaLiveWrapper","props","mounted","setMounted","useState","useEffect","children"],"mappings":"AAAA,SAASA,iBAAiB,QAAQ,uBAAuB;AACzD,YAAYC,WAAW,QAAQ;AAG/B,SAASC,mBAAmB,QAAQ,+BAA+B;AAGnE,OAAO,MAAMC,eAAe,CAACC,OAAyBC;IACpD,IAAIH,oBAAoBG,SAAS,aAAa;QAC5C,OAAOD;IACT;IAEA,qBACE,oBAACE,qCACC,oBAACF;AAGP,EAAE;AAEF,MAAME,kBAA2DC,CAAAA;IAC/D,MAAM,CAACC,SAASC,WAAW,GAAGR,MAAMS,QAAQ,CAAC;IAE7CT,MAAMU,SAAS,CAAC;QACd,+DAA+D;QAC/D,oGAAoG;QACpGF,WAAW;IACb,GAAG,EAAE;IAEL,qBAAO,oBAACT,yBAAmBQ,WAAWD,MAAMK,QAAQ;AACtD"}
@@ -1,48 +0,0 @@
1
- import * as React from 'react';
2
- import { FluentProvider } from '@fluentui/react-provider';
3
- import { teamsDarkTheme, teamsDarkV21Theme, teamsHighContrastTheme, teamsLightTheme, teamsLightV21Theme, webDarkTheme, webLightTheme } from '@fluentui/react-theme';
4
- import { defaultTheme } from '../theme';
5
- import { DIR_ID, THEME_ID } from '../constants';
6
- import { isDecoratorDisabled } from '../utils/isDecoratorDisabled';
7
- const themes = {
8
- 'web-light': webLightTheme,
9
- 'web-dark': webDarkTheme,
10
- 'teams-light': teamsLightTheme,
11
- 'teams-dark': teamsDarkTheme,
12
- 'teams-high-contrast': teamsHighContrastTheme,
13
- 'teams-light-v21': teamsLightV21Theme,
14
- 'teams-dark-v21': teamsDarkV21Theme
15
- };
16
- const findTheme = (themeId)=>{
17
- return themeId ? themes[themeId] : null;
18
- };
19
- export const withFluentProvider = (StoryFn, context)=>{
20
- const { globals, parameters } = context;
21
- const { mode } = parameters;
22
- if (isDecoratorDisabled(context, 'FluentProvider')) {
23
- return StoryFn();
24
- }
25
- const isVrTest = mode === 'vr-test';
26
- var _parameters_dir, _ref;
27
- const dir = (_ref = (_parameters_dir = parameters.dir) !== null && _parameters_dir !== void 0 ? _parameters_dir : globals[DIR_ID]) !== null && _ref !== void 0 ? _ref : 'ltr';
28
- const globalTheme = findTheme(globals[THEME_ID]);
29
- const paramTheme = findTheme(parameters.fluentTheme);
30
- var _ref1;
31
- const theme = (_ref1 = paramTheme !== null && paramTheme !== void 0 ? paramTheme : globalTheme) !== null && _ref1 !== void 0 ? _ref1 : themes[defaultTheme.id];
32
- return /*#__PURE__*/ React.createElement(FluentProvider, {
33
- theme: theme,
34
- dir: dir
35
- }, isVrTest ? StoryFn() : /*#__PURE__*/ React.createElement(FluentExampleContainer, {
36
- theme: theme
37
- }, StoryFn()));
38
- };
39
- const FluentExampleContainer = (props)=>{
40
- const { theme } = props;
41
- const backgroundColor = theme.colorNeutralBackground2;
42
- return /*#__PURE__*/ React.createElement("div", {
43
- style: {
44
- padding: '48px 24px',
45
- backgroundColor
46
- }
47
- }, props.children);
48
- };
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/decorators/withFluentProvider.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { FluentProvider } from '@fluentui/react-provider';\nimport type { JSXElement } from '@fluentui/react-utilities';\nimport {\n Theme,\n teamsDarkTheme,\n teamsDarkV21Theme,\n teamsHighContrastTheme,\n teamsLightTheme,\n teamsLightV21Theme,\n webDarkTheme,\n webLightTheme,\n} from '@fluentui/react-theme';\nimport { defaultTheme, ThemeIds } from '../theme';\nimport { DIR_ID, THEME_ID } from '../constants';\nimport { FluentStoryContext } from '../hooks';\nimport { isDecoratorDisabled } from '../utils/isDecoratorDisabled';\n\nconst themes: Record<ThemeIds, Theme> = {\n 'web-light': webLightTheme,\n 'web-dark': webDarkTheme,\n 'teams-light': teamsLightTheme,\n 'teams-dark': teamsDarkTheme,\n 'teams-high-contrast': teamsHighContrastTheme,\n 'teams-light-v21': teamsLightV21Theme,\n 'teams-dark-v21': teamsDarkV21Theme,\n} as const;\n\nconst findTheme = (themeId?: ThemeIds) => {\n return themeId ? themes[themeId] : null;\n};\n\nexport const withFluentProvider = (StoryFn: () => JSXElement, context: FluentStoryContext) => {\n const { globals, parameters } = context;\n const { mode } = parameters;\n\n if (isDecoratorDisabled(context, 'FluentProvider')) {\n return StoryFn();\n }\n\n const isVrTest = mode === 'vr-test';\n const dir = parameters.dir ?? globals[DIR_ID] ?? 'ltr';\n const globalTheme = findTheme(globals[THEME_ID]);\n const paramTheme = findTheme(parameters.fluentTheme);\n const theme = paramTheme ?? globalTheme ?? themes[defaultTheme.id];\n\n return (\n <FluentProvider theme={theme} dir={dir}>\n {isVrTest ? StoryFn() : <FluentExampleContainer theme={theme}>{StoryFn()}</FluentExampleContainer>}\n </FluentProvider>\n );\n};\n\nconst FluentExampleContainer: React.FC<{ children: React.ReactNode; theme: Theme }> = props => {\n const { theme } = props;\n\n const backgroundColor = theme.colorNeutralBackground2;\n return <div style={{ padding: '48px 24px', backgroundColor }}>{props.children}</div>;\n};\n"],"names":["React","FluentProvider","teamsDarkTheme","teamsDarkV21Theme","teamsHighContrastTheme","teamsLightTheme","teamsLightV21Theme","webDarkTheme","webLightTheme","defaultTheme","DIR_ID","THEME_ID","isDecoratorDisabled","themes","findTheme","themeId","withFluentProvider","StoryFn","context","globals","parameters","mode","isVrTest","dir","globalTheme","paramTheme","fluentTheme","theme","id","FluentExampleContainer","props","backgroundColor","colorNeutralBackground2","div","style","padding","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,cAAc,QAAQ,2BAA2B;AAE1D,SAEEC,cAAc,EACdC,iBAAiB,EACjBC,sBAAsB,EACtBC,eAAe,EACfC,kBAAkB,EAClBC,YAAY,EACZC,aAAa,QACR,wBAAwB;AAC/B,SAASC,YAAY,QAAkB,WAAW;AAClD,SAASC,MAAM,EAAEC,QAAQ,QAAQ,eAAe;AAEhD,SAASC,mBAAmB,QAAQ,+BAA+B;AAEnE,MAAMC,SAAkC;IACtC,aAAaL;IACb,YAAYD;IACZ,eAAeF;IACf,cAAcH;IACd,uBAAuBE;IACvB,mBAAmBE;IACnB,kBAAkBH;AACpB;AAEA,MAAMW,YAAY,CAACC;IACjB,OAAOA,UAAUF,MAAM,CAACE,QAAQ,GAAG;AACrC;AAEA,OAAO,MAAMC,qBAAqB,CAACC,SAA2BC;IAC5D,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGF;IAChC,MAAM,EAAEG,IAAI,EAAE,GAAGD;IAEjB,IAAIR,oBAAoBM,SAAS,mBAAmB;QAClD,OAAOD;IACT;IAEA,MAAMK,WAAWD,SAAS;QACdD,iBAAAA;IAAZ,MAAMG,MAAMH,CAAAA,OAAAA,CAAAA,kBAAAA,WAAWG,GAAG,cAAdH,6BAAAA,kBAAkBD,OAAO,CAACT,OAAO,cAAjCU,kBAAAA,OAAqC;IACjD,MAAMI,cAAcV,UAAUK,OAAO,CAACR,SAAS;IAC/C,MAAMc,aAAaX,UAAUM,WAAWM,WAAW;QACrCD;IAAd,MAAME,QAAQF,CAAAA,QAAAA,uBAAAA,wBAAAA,aAAcD,yBAAdC,mBAAAA,QAA6BZ,MAAM,CAACJ,aAAamB,EAAE,CAAC;IAElE,qBACE,oBAAC3B;QAAe0B,OAAOA;QAAOJ,KAAKA;OAChCD,WAAWL,0BAAY,oBAACY;QAAuBF,OAAOA;OAAQV;AAGrE,EAAE;AAEF,MAAMY,yBAAgFC,CAAAA;IACpF,MAAM,EAAEH,KAAK,EAAE,GAAGG;IAElB,MAAMC,kBAAkBJ,MAAMK,uBAAuB;IACrD,qBAAO,oBAACC;QAAIC,OAAO;YAAEC,SAAS;YAAaJ;QAAgB;OAAID,MAAMM,QAAQ;AAC/E"}
@@ -1,16 +0,0 @@
1
- import * as React from 'react';
2
- import { STRICT_MODE_ID } from '../constants';
3
- import { isDecoratorDisabled } from '../utils/isDecoratorDisabled';
4
- export const withReactStrictMode = (StoryFn, context)=>{
5
- if (isDecoratorDisabled(context, 'ReactStrictMode')) {
6
- return StoryFn();
7
- }
8
- var _context_globals_STRICT_MODE_ID;
9
- const isActive = (_context_globals_STRICT_MODE_ID = context.globals[STRICT_MODE_ID]) !== null && _context_globals_STRICT_MODE_ID !== void 0 ? _context_globals_STRICT_MODE_ID : false;
10
- return /*#__PURE__*/ React.createElement(StrictModeWrapper, {
11
- strictMode: isActive
12
- }, StoryFn());
13
- };
14
- const StrictModeWrapper = (props)=>{
15
- return props.strictMode ? /*#__PURE__*/ React.createElement(React.StrictMode, null, props.children) : props.children;
16
- };
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/decorators/withReactStrictMode.tsx"],"sourcesContent":["import * as React from 'react';\nimport type { JSXElement } from '@fluentui/react-utilities';\n\nimport { STRICT_MODE_ID } from '../constants';\nimport { FluentStoryContext } from '../hooks';\nimport { isDecoratorDisabled } from '../utils/isDecoratorDisabled';\n\nexport const withReactStrictMode = (StoryFn: () => JSXElement, context: FluentStoryContext) => {\n if (isDecoratorDisabled(context, 'ReactStrictMode')) {\n return StoryFn();\n }\n\n const isActive = context.globals[STRICT_MODE_ID] ?? false;\n\n return <StrictModeWrapper strictMode={isActive}>{StoryFn()}</StrictModeWrapper>;\n};\n\nconst StrictModeWrapper = (props: { strictMode: boolean; children: React.ReactElement }) => {\n return props.strictMode ? <React.StrictMode>{props.children}</React.StrictMode> : props.children;\n};\n"],"names":["React","STRICT_MODE_ID","isDecoratorDisabled","withReactStrictMode","StoryFn","context","isActive","globals","StrictModeWrapper","strictMode","props","StrictMode","children"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAG/B,SAASC,cAAc,QAAQ,eAAe;AAE9C,SAASC,mBAAmB,QAAQ,+BAA+B;AAEnE,OAAO,MAAMC,sBAAsB,CAACC,SAA2BC;IAC7D,IAAIH,oBAAoBG,SAAS,oBAAoB;QACnD,OAAOD;IACT;QAEiBC;IAAjB,MAAMC,WAAWD,CAAAA,kCAAAA,QAAQE,OAAO,CAACN,eAAe,cAA/BI,6CAAAA,kCAAmC;IAEpD,qBAAO,oBAACG;QAAkBC,YAAYH;OAAWF;AACnD,EAAE;AAEF,MAAMI,oBAAoB,CAACE;IACzB,OAAOA,MAAMD,UAAU,iBAAG,oBAACT,MAAMW,UAAU,QAAED,MAAME,QAAQ,IAAuBF,MAAME,QAAQ;AAClG"}
@@ -1,51 +0,0 @@
1
- import * as React from 'react';
2
- import { addons } from '@storybook/preview-api';
3
- import { Label } from '@fluentui/react-label';
4
- import { Switch } from '@fluentui/react-switch';
5
- import { useId } from '@fluentui/react-utilities';
6
- import { typographyStyles } from '@fluentui/react-theme';
7
- import { makeStyles } from '@griffel/react';
8
- import { DIR_ID } from '../constants';
9
- const useStyles = makeStyles({
10
- container: {
11
- alignItems: 'center',
12
- display: 'flex',
13
- justifyContent: 'start'
14
- },
15
- label: {
16
- ...typographyStyles.subtitle2
17
- }
18
- });
19
- /**
20
- * Dir switch used in the react-components docs header
21
- */ export const DirSwitch = ({ dir })=>{
22
- const switchId = useId('dir-switch');
23
- const styles = useStyles();
24
- const [currentDir, setCurrentDir] = React.useState(dir);
25
- const checked = currentDir === 'rtl';
26
- const setGlobalDir = (newDir)=>{
27
- addons.getChannel().emit('updateGlobals', {
28
- globals: {
29
- [DIR_ID]: newDir
30
- }
31
- });
32
- };
33
- const onChange = React.useCallback((_, data)=>{
34
- const newDir = data.checked ? 'rtl' : 'ltr';
35
- setGlobalDir(newDir);
36
- setCurrentDir(newDir);
37
- }, []);
38
- return /*#__PURE__*/ React.createElement("div", {
39
- className: styles.container
40
- }, /*#__PURE__*/ React.createElement(Label, {
41
- className: styles.label,
42
- htmlFor: currentDir === 'ltr' ? undefined : switchId
43
- }, "LTR"), /*#__PURE__*/ React.createElement(Switch, {
44
- checked: checked,
45
- id: switchId,
46
- onChange: onChange
47
- }), /*#__PURE__*/ React.createElement(Label, {
48
- className: styles.label,
49
- htmlFor: currentDir === 'rtl' ? switchId : undefined
50
- }, "RTL"));
51
- };
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/docs/DirSwitch.tsx"],"sourcesContent":["import * as React from 'react';\nimport { addons } from '@storybook/preview-api';\n\nimport { Label } from '@fluentui/react-label';\nimport { Switch, type SwitchProps } from '@fluentui/react-switch';\nimport { useId } from '@fluentui/react-utilities';\nimport { typographyStyles } from '@fluentui/react-theme';\nimport { makeStyles } from '@griffel/react';\n\nimport { DIR_ID } from '../constants';\n\nconst useStyles = makeStyles({\n container: {\n alignItems: 'center',\n display: 'flex',\n justifyContent: 'start',\n },\n label: {\n ...typographyStyles.subtitle2,\n },\n});\n\n/**\n * Dir switch used in the react-components docs header\n */\nexport const DirSwitch: React.FC<{ dir?: 'ltr' | 'rtl' }> = ({ dir }) => {\n const switchId = useId('dir-switch');\n\n const styles = useStyles();\n\n const [currentDir, setCurrentDir] = React.useState(dir);\n const checked = currentDir === 'rtl';\n\n const setGlobalDir = (newDir: 'ltr' | 'rtl'): void => {\n addons.getChannel().emit('updateGlobals', { globals: { [DIR_ID]: newDir } });\n };\n\n const onChange = React.useCallback<NonNullable<SwitchProps['onChange']>>((_, data) => {\n const newDir = data.checked ? 'rtl' : 'ltr';\n setGlobalDir(newDir);\n setCurrentDir(newDir);\n }, []);\n\n return (\n <div className={styles.container}>\n <Label className={styles.label} htmlFor={currentDir === 'ltr' ? undefined : switchId}>\n LTR\n </Label>\n <Switch checked={checked} id={switchId} onChange={onChange} />\n <Label className={styles.label} htmlFor={currentDir === 'rtl' ? switchId : undefined}>\n RTL\n </Label>\n </div>\n );\n};\n"],"names":["React","addons","Label","Switch","useId","typographyStyles","makeStyles","DIR_ID","useStyles","container","alignItems","display","justifyContent","label","subtitle2","DirSwitch","dir","switchId","styles","currentDir","setCurrentDir","useState","checked","setGlobalDir","newDir","getChannel","emit","globals","onChange","useCallback","_","data","div","className","htmlFor","undefined","id"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,MAAM,QAAQ,yBAAyB;AAEhD,SAASC,KAAK,QAAQ,wBAAwB;AAC9C,SAASC,MAAM,QAA0B,yBAAyB;AAClE,SAASC,KAAK,QAAQ,4BAA4B;AAClD,SAASC,gBAAgB,QAAQ,wBAAwB;AACzD,SAASC,UAAU,QAAQ,iBAAiB;AAE5C,SAASC,MAAM,QAAQ,eAAe;AAEtC,MAAMC,YAAYF,WAAW;IAC3BG,WAAW;QACTC,YAAY;QACZC,SAAS;QACTC,gBAAgB;IAClB;IACAC,OAAO;QACL,GAAGR,iBAAiBS,SAAS;IAC/B;AACF;AAEA;;CAEC,GACD,OAAO,MAAMC,YAA+C,CAAC,EAAEC,GAAG,EAAE;IAClE,MAAMC,WAAWb,MAAM;IAEvB,MAAMc,SAASV;IAEf,MAAM,CAACW,YAAYC,cAAc,GAAGpB,MAAMqB,QAAQ,CAACL;IACnD,MAAMM,UAAUH,eAAe;IAE/B,MAAMI,eAAe,CAACC;QACpBvB,OAAOwB,UAAU,GAAGC,IAAI,CAAC,iBAAiB;YAAEC,SAAS;gBAAE,CAACpB,OAAO,EAAEiB;YAAO;QAAE;IAC5E;IAEA,MAAMI,WAAW5B,MAAM6B,WAAW,CAAuC,CAACC,GAAGC;QAC3E,MAAMP,SAASO,KAAKT,OAAO,GAAG,QAAQ;QACtCC,aAAaC;QACbJ,cAAcI;IAChB,GAAG,EAAE;IAEL,qBACE,oBAACQ;QAAIC,WAAWf,OAAOT,SAAS;qBAC9B,oBAACP;QAAM+B,WAAWf,OAAOL,KAAK;QAAEqB,SAASf,eAAe,QAAQgB,YAAYlB;OAAU,sBAGtF,oBAACd;QAAOmB,SAASA;QAASc,IAAInB;QAAUW,UAAUA;sBAClD,oBAAC1B;QAAM+B,WAAWf,OAAOL,KAAK;QAAEqB,SAASf,eAAe,QAAQF,WAAWkB;OAAW;AAK5F,EAAE"}
@@ -1,24 +0,0 @@
1
- import * as React from 'react';
2
- import { DocsContainer } from '@storybook/addon-docs';
3
- import { webLightTheme } from '@fluentui/react-theme';
4
- import { FluentProvider } from '@fluentui/react-provider';
5
- import { isDocsEnabled } from './utils';
6
- /**
7
- * A container that wraps storybook's native docs container to add extra components to the docs experience
8
- */ export const FluentDocsContainer = ({ children, context })=>{
9
- if (isDocsEnabled(context)) {
10
- return /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement(FluentProvider, {
11
- className: "sb-unstyled",
12
- style: {
13
- backgroundColor: 'transparent'
14
- },
15
- theme: webLightTheme
16
- }, /*#__PURE__*/ React.createElement(DocsContainer, {
17
- context: context
18
- }, children)));
19
- }
20
- // If docs container is not enabled, fall back to Storybook's default DocsContainer
21
- return /*#__PURE__*/ React.createElement(DocsContainer, {
22
- context: context
23
- }, children);
24
- };
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/docs/FluentDocsContainer.tsx"],"sourcesContent":["import * as React from 'react';\nimport { DocsContainer, type DocsContextProps } from '@storybook/addon-docs';\nimport { webLightTheme } from '@fluentui/react-theme';\nimport { FluentProvider } from '@fluentui/react-provider';\n\nimport { isDocsEnabled } from './utils';\n\ninterface FluentDocsContainerProps {\n context: DocsContextProps;\n children: React.ReactNode;\n}\n\n/**\n * A container that wraps storybook's native docs container to add extra components to the docs experience\n */\nexport const FluentDocsContainer: React.FC<FluentDocsContainerProps> = ({ children, context }) => {\n if (isDocsEnabled(context)) {\n return (\n <>\n {/** TODO add table of contents */}\n <FluentProvider className=\"sb-unstyled\" style={{ backgroundColor: 'transparent' }} theme={webLightTheme}>\n <DocsContainer context={context}>{children}</DocsContainer>\n </FluentProvider>\n </>\n );\n }\n\n // If docs container is not enabled, fall back to Storybook's default DocsContainer\n return <DocsContainer context={context}>{children}</DocsContainer>;\n};\n"],"names":["React","DocsContainer","webLightTheme","FluentProvider","isDocsEnabled","FluentDocsContainer","children","context","className","style","backgroundColor","theme"],"mappings":"AAAA,YAAYA,WAAW,QAAQ;AAC/B,SAASC,aAAa,QAA+B,wBAAwB;AAC7E,SAASC,aAAa,QAAQ,wBAAwB;AACtD,SAASC,cAAc,QAAQ,2BAA2B;AAE1D,SAASC,aAAa,QAAQ,UAAU;AAOxC;;CAEC,GACD,OAAO,MAAMC,sBAA0D,CAAC,EAAEC,QAAQ,EAAEC,OAAO,EAAE;IAC3F,IAAIH,cAAcG,UAAU;QAC1B,qBACE,wDAEE,oBAACJ;YAAeK,WAAU;YAAcC,OAAO;gBAAEC,iBAAiB;YAAc;YAAGC,OAAOT;yBACxF,oBAACD;YAAcM,SAASA;WAAUD;IAI1C;IAEA,mFAAmF;IACnF,qBAAO,oBAACL;QAAcM,SAASA;OAAUD;AAC3C,EAAE"}