@fluentui/react-storybook-addon 0.1.0 → 0.1.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.
Files changed (55) hide show
  1. package/CHANGELOG.md +11 -1
  2. package/package.json +3 -3
  3. package/dist/index.d.ts +0 -65
  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 -46
  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/hooks.js +0 -12
  19. package/lib/hooks.js.map +0 -1
  20. package/lib/index.js +0 -3
  21. package/lib/index.js.map +0 -1
  22. package/lib/preset/manager.js +0 -28
  23. package/lib/preset/manager.js.map +0 -1
  24. package/lib/preset/preview.js +0 -27
  25. package/lib/preset/preview.js.map +0 -1
  26. package/lib/theme.js +0 -23
  27. package/lib/theme.js.map +0 -1
  28. package/lib/utils/isDecoratorDisabled.js +0 -5
  29. package/lib/utils/isDecoratorDisabled.js.map +0 -1
  30. package/lib-commonjs/components/DirectionSwitch.js +0 -37
  31. package/lib-commonjs/components/DirectionSwitch.js.map +0 -1
  32. package/lib-commonjs/components/ReactStrictMode.js +0 -34
  33. package/lib-commonjs/components/ReactStrictMode.js.map +0 -1
  34. package/lib-commonjs/components/ThemePicker.js +0 -72
  35. package/lib-commonjs/components/ThemePicker.js.map +0 -1
  36. package/lib-commonjs/constants.js +0 -28
  37. package/lib-commonjs/constants.js.map +0 -1
  38. package/lib-commonjs/decorators/withAriaLive.js +0 -29
  39. package/lib-commonjs/decorators/withAriaLive.js.map +0 -1
  40. package/lib-commonjs/decorators/withFluentProvider.js +0 -57
  41. package/lib-commonjs/decorators/withFluentProvider.js.map +0 -1
  42. package/lib-commonjs/decorators/withReactStrictMode.js +0 -27
  43. package/lib-commonjs/decorators/withReactStrictMode.js.map +0 -1
  44. package/lib-commonjs/hooks.js +0 -30
  45. package/lib-commonjs/hooks.js.map +0 -1
  46. package/lib-commonjs/index.js +0 -27
  47. package/lib-commonjs/index.js.map +0 -1
  48. package/lib-commonjs/preset/manager.js +0 -32
  49. package/lib-commonjs/preset/manager.js.map +0 -1
  50. package/lib-commonjs/preset/preview.js +0 -48
  51. package/lib-commonjs/preset/preview.js.map +0 -1
  52. package/lib-commonjs/theme.js +0 -41
  53. package/lib-commonjs/theme.js.map +0 -1
  54. package/lib-commonjs/utils/isDecoratorDisabled.js +0 -15
  55. package/lib-commonjs/utils/isDecoratorDisabled.js.map +0 -1
package/CHANGELOG.md CHANGED
@@ -1,9 +1,19 @@
1
1
  # Change Log - @fluentui/react-storybook-addon
2
2
 
3
- This log was last generated on Thu, 24 Apr 2025 09:59:45 GMT and should not be manually modified.
3
+ This log was last generated on Wed, 14 May 2025 18:45:49 GMT and should not be manually modified.
4
4
 
5
5
  <!-- Start content -->
6
6
 
7
+ ## [0.1.1](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v0.1.1)
8
+
9
+ Wed, 14 May 2025 18:45:49 GMT
10
+ [Compare changes](https://github.com/microsoft/fluentui/compare/@fluentui/react-storybook-addon_v0.0.3..@fluentui/react-storybook-addon_v0.1.1)
11
+
12
+ ### Patches
13
+
14
+ - Bump @fluentui/react-aria to v9.14.7 ([PR #34449](https://github.com/microsoft/fluentui/pull/34449) by beachball)
15
+ - Bump @fluentui/react-provider to v9.20.7 ([PR #34449](https://github.com/microsoft/fluentui/pull/34449) by beachball)
16
+
7
17
  ## [0.0.3](https://github.com/microsoft/fluentui/tree/@fluentui/react-storybook-addon_v0.0.3)
8
18
 
9
19
  Thu, 24 Apr 2025 09:59:45 GMT
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@fluentui/react-storybook-addon",
3
- "version": "0.1.0",
3
+ "version": "0.1.1",
4
4
  "description": "fluentui react storybook addon",
5
5
  "main": "lib-commonjs/index.js",
6
6
  "module": "lib/index.js",
@@ -16,8 +16,8 @@
16
16
  "@fluentui/scripts-api-extractor": "*"
17
17
  },
18
18
  "dependencies": {
19
- "@fluentui/react-aria": "^9.14.6",
20
- "@fluentui/react-provider": "^9.20.6",
19
+ "@fluentui/react-aria": "^9.14.7",
20
+ "@fluentui/react-provider": "^9.20.7",
21
21
  "@fluentui/react-theme": "^9.1.24",
22
22
  "@swc/helpers": "^0.5.1"
23
23
  },
package/dist/index.d.ts DELETED
@@ -1,65 +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
- * Extends the storybook globals object to include fluent specific properties
9
- */
10
- export declare interface FluentGlobals extends Args {
11
- [DIR_ID]?: 'ltr' | 'rtl';
12
- [THEME_ID]?: ThemeIds;
13
- [STRICT_MODE_ID]?: boolean;
14
- }
15
-
16
- /**
17
- * Extends the storybook parameters object to include fluent specific properties
18
- */
19
- export declare interface FluentParameters extends Parameters_2 {
20
- dir?: 'ltr' | 'rtl';
21
- fluentTheme?: ThemeIds;
22
- mode?: 'default' | 'vr-test';
23
- reactStorybookAddon?: {
24
- disabledDecorators: ['AriaLive' | 'FluentProvider' | 'ReactStrictMode'];
25
- };
26
- }
27
-
28
- export declare interface FluentStoryContext extends StoryContext {
29
- globals: FluentGlobals;
30
- parameters: FluentParameters;
31
- }
32
-
33
- export declare function parameters(options?: FluentParameters): {
34
- dir: string;
35
- fluentTheme: string;
36
- mode: string;
37
- reactStorybookAddon?: {
38
- disabledDecorators: ["AriaLive" | "FluentProvider" | "ReactStrictMode"];
39
- } | undefined;
40
- };
41
-
42
- declare const STRICT_MODE_ID: "storybook_fluentui-react-addon_strict-mode";
43
-
44
- export declare const THEME_ID: "storybook_fluentui-react-addon_theme";
45
-
46
- export declare type ThemeIds = (typeof themes)[number]['id'];
47
-
48
- export declare const themes: readonly [{
49
- readonly id: "web-light";
50
- readonly label: "Web Light";
51
- }, {
52
- readonly id: "web-dark";
53
- readonly label: "Web Dark";
54
- }, {
55
- readonly id: "teams-light";
56
- readonly label: "Teams Light";
57
- }, {
58
- readonly id: "teams-dark";
59
- readonly label: "Teams Dark";
60
- }, {
61
- readonly id: "teams-high-contrast";
62
- readonly label: "Teams High Contrast";
63
- }];
64
-
65
- 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;","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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","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,CAAC,EAAED,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"],"rangeMappings":";;;","mappings":"AAAA,OAAO,MAAMA,WAAW,iCAAiC;AAEzD,OAAO,MAAMC,SAAS,CAAC,EAAED,SAAS,IAAI,CAAC,CAAU;AACjD,OAAO,MAAME,iBAAiB,CAAC,EAAEF,SAAS,YAAY,CAAC,CAAU;AACjE,OAAO,MAAMG,WAAW,CAAC,EAAEH,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';\n\nexport const withAriaLive = (Story: () => JSX.Element, 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"],"rangeMappings":";;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,iBAAiB,QAAQ,uBAAuB;AACzD,YAAYC,WAAW,QAAQ;AAG/B,SAASC,mBAAmB,QAAQ,+BAA+B;AAEnE,OAAO,MAAMC,eAAe,CAACC,OAA0BC;IACrD,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,46 +0,0 @@
1
- import * as React from 'react';
2
- import { FluentProvider } from '@fluentui/react-provider';
3
- import { teamsDarkTheme, teamsHighContrastTheme, teamsLightTheme, 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
- };
14
- const findTheme = (themeId)=>{
15
- return themeId ? themes[themeId] : null;
16
- };
17
- export const withFluentProvider = (StoryFn, context)=>{
18
- const { globals, parameters } = context;
19
- const { mode } = parameters;
20
- if (isDecoratorDisabled(context, 'FluentProvider')) {
21
- return StoryFn();
22
- }
23
- const isVrTest = mode === 'vr-test';
24
- var _parameters_dir, _ref;
25
- const dir = (_ref = (_parameters_dir = parameters.dir) !== null && _parameters_dir !== void 0 ? _parameters_dir : globals[DIR_ID]) !== null && _ref !== void 0 ? _ref : 'ltr';
26
- const globalTheme = findTheme(globals[THEME_ID]);
27
- const paramTheme = findTheme(parameters.fluentTheme);
28
- var _ref1;
29
- const theme = (_ref1 = paramTheme !== null && paramTheme !== void 0 ? paramTheme : globalTheme) !== null && _ref1 !== void 0 ? _ref1 : themes[defaultTheme.id];
30
- return /*#__PURE__*/ React.createElement(FluentProvider, {
31
- theme: theme,
32
- dir: dir
33
- }, isVrTest ? StoryFn() : /*#__PURE__*/ React.createElement(FluentExampleContainer, {
34
- theme: theme
35
- }, StoryFn()));
36
- };
37
- const FluentExampleContainer = (props)=>{
38
- const { theme } = props;
39
- const backgroundColor = theme.colorNeutralBackground2;
40
- return /*#__PURE__*/ React.createElement("div", {
41
- style: {
42
- padding: '48px 24px',
43
- backgroundColor
44
- }
45
- }, props.children);
46
- };
@@ -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 {\n Theme,\n teamsDarkTheme,\n teamsHighContrastTheme,\n teamsLightTheme,\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} as const;\n\nconst findTheme = (themeId?: ThemeIds) => {\n return themeId ? themes[themeId] : null;\n};\n\nexport const withFluentProvider = (StoryFn: () => JSX.Element, 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<{ 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","teamsHighContrastTheme","teamsLightTheme","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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,cAAc,QAAQ,2BAA2B;AAC1D,SAEEC,cAAc,EACdC,sBAAsB,EACtBC,eAAe,EACfC,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,eAAeD;IACf,cAAcF;IACd,uBAAuBC;AACzB;AAEA,MAAMS,YAAY,CAACC;IACjB,OAAOA,UAAUF,MAAM,CAACE,QAAQ,GAAG;AACrC;AAEA,OAAO,MAAMC,qBAAqB,CAACC,SAA4BC;IAC7D,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,oBAACzB;QAAewB,OAAOA;QAAOJ,KAAKA;OAChCD,WAAWL,0BAAY,oBAACY;QAAuBF,OAAOA;OAAQV;AAGrE,EAAE;AAEF,MAAMY,yBAAqDC,CAAAA;IACzD,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';\n\nimport { STRICT_MODE_ID } from '../constants';\nimport { FluentStoryContext } from '../hooks';\nimport { isDecoratorDisabled } from '../utils/isDecoratorDisabled';\n\nexport const withReactStrictMode = (StoryFn: () => JSX.Element, 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"],"rangeMappings":";;;;;;;;;;;;;;;","mappings":"AAAA,YAAYA,WAAW,QAAQ;AAE/B,SAASC,cAAc,QAAQ,eAAe;AAE9C,SAASC,mBAAmB,QAAQ,+BAA+B;AAEnE,OAAO,MAAMC,sBAAsB,CAACC,SAA4BC;IAC9D,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"}
package/lib/hooks.js DELETED
@@ -1,12 +0,0 @@
1
- import { useGlobals as useStorybookGlobals } from '@storybook/manager-api';
2
- export function useGlobals() {
3
- return useStorybookGlobals();
4
- }
5
- export function parameters(options) {
6
- return {
7
- dir: 'ltr',
8
- fluentTheme: 'web-light',
9
- mode: 'default',
10
- ...options
11
- };
12
- }
package/lib/hooks.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/hooks.ts"],"sourcesContent":["import { useGlobals as useStorybookGlobals } from '@storybook/manager-api';\nimport { Args as StorybookArgs, StoryContext as StorybookContext, Parameters } from '@storybook/react';\n\nimport { DIR_ID, STRICT_MODE_ID, THEME_ID } from './constants';\nimport type { ThemeIds } from './theme';\n\nexport interface FluentStoryContext extends StorybookContext {\n globals: FluentGlobals;\n parameters: FluentParameters;\n}\n\n/**\n * Extends the storybook globals object to include fluent specific properties\n */\nexport interface FluentGlobals extends StorybookArgs {\n [DIR_ID]?: 'ltr' | 'rtl';\n [THEME_ID]?: ThemeIds;\n [STRICT_MODE_ID]?: boolean;\n}\n\n/**\n * Extends the storybook parameters object to include fluent specific properties\n */\nexport interface FluentParameters extends Parameters {\n dir?: 'ltr' | 'rtl';\n fluentTheme?: ThemeIds;\n mode?: 'default' | 'vr-test';\n reactStorybookAddon?: { disabledDecorators: ['AriaLive' | 'FluentProvider' | 'ReactStrictMode'] };\n}\n\nexport function useGlobals(): [FluentGlobals, (newGlobals: FluentGlobals) => void] {\n return useStorybookGlobals();\n}\n\nexport function parameters(options?: FluentParameters) {\n return { dir: 'ltr', fluentTheme: 'web-light', mode: 'default', ...options };\n}\n"],"names":["useGlobals","useStorybookGlobals","parameters","options","dir","fluentTheme","mode"],"rangeMappings":";;;;;;;;;;;","mappings":"AAAA,SAASA,cAAcC,mBAAmB,QAAQ,yBAAyB;AA8B3E,OAAO,SAASD;IACd,OAAOC;AACT;AAEA,OAAO,SAASC,WAAWC,OAA0B;IACnD,OAAO;QAAEC,KAAK;QAAOC,aAAa;QAAaC,MAAM;QAAW,GAAGH,OAAO;IAAC;AAC7E"}
package/lib/index.js DELETED
@@ -1,3 +0,0 @@
1
- export { themes } from './theme';
2
- export { DIR_ID, THEME_ID } from './constants';
3
- export { parameters } from './hooks';
package/lib/index.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export type { FluentGlobals, FluentParameters, FluentStoryContext } from './hooks';\nexport type { ThemeIds } from './theme';\nexport { themes } from './theme';\nexport { DIR_ID, THEME_ID } from './constants';\nexport { parameters } from './hooks';\n"],"names":["themes","DIR_ID","THEME_ID","parameters"],"rangeMappings":";;","mappings":"AAEA,SAASA,MAAM,QAAQ,UAAU;AACjC,SAASC,MAAM,EAAEC,QAAQ,QAAQ,cAAc;AAC/C,SAASC,UAAU,QAAQ,UAAU"}
@@ -1,28 +0,0 @@
1
- import { addons, types } from '@storybook/manager-api';
2
- import { ADDON_ID, DIR_ID, STRICT_MODE_ID, THEME_ID } from '../constants';
3
- import { ThemePicker } from '../components/ThemePicker';
4
- import { ReactStrictMode } from '../components/ReactStrictMode';
5
- import { DirectionSwitch } from '../components/DirectionSwitch';
6
- addons.register(ADDON_ID, ()=>{
7
- addons.add(THEME_ID, {
8
- title: 'Fluent Theme Picker',
9
- // eslint-disable-next-line @typescript-eslint/no-deprecated
10
- type: types.TOOL,
11
- match: ({ viewMode })=>!!(viewMode && viewMode.match(/^(story|docs)$/)),
12
- render: ThemePicker
13
- });
14
- addons.add(DIR_ID, {
15
- title: 'Direction Switch',
16
- // eslint-disable-next-line @typescript-eslint/no-deprecated
17
- type: types.TOOL,
18
- match: ({ viewMode })=>!!(viewMode && viewMode.match(/^(story|docs)$/)),
19
- render: DirectionSwitch
20
- });
21
- addons.add(STRICT_MODE_ID, {
22
- // eslint-disable-next-line @typescript-eslint/no-deprecated
23
- type: types.TOOL,
24
- title: 'React Strict Mode',
25
- match: ({ viewMode })=>!!(viewMode && viewMode.match(/^(story|docs)$/)),
26
- render: ReactStrictMode
27
- });
28
- });
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/preset/manager.ts"],"sourcesContent":["import { addons, types } from '@storybook/manager-api';\n\nimport { ADDON_ID, DIR_ID, STRICT_MODE_ID, THEME_ID } from '../constants';\nimport { ThemePicker } from '../components/ThemePicker';\nimport { ReactStrictMode } from '../components/ReactStrictMode';\nimport { DirectionSwitch } from '../components/DirectionSwitch';\n\naddons.register(ADDON_ID, () => {\n addons.add(THEME_ID, {\n title: 'Fluent Theme Picker',\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n type: types.TOOL,\n match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),\n render: ThemePicker,\n });\n addons.add(DIR_ID, {\n title: 'Direction Switch',\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n type: types.TOOL,\n match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),\n render: DirectionSwitch,\n });\n addons.add(STRICT_MODE_ID, {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n type: types.TOOL,\n title: 'React Strict Mode',\n match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),\n render: ReactStrictMode,\n });\n});\n"],"names":["addons","types","ADDON_ID","DIR_ID","STRICT_MODE_ID","THEME_ID","ThemePicker","ReactStrictMode","DirectionSwitch","register","add","title","type","TOOL","match","viewMode","render"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,SAASA,MAAM,EAAEC,KAAK,QAAQ,yBAAyB;AAEvD,SAASC,QAAQ,EAAEC,MAAM,EAAEC,cAAc,EAAEC,QAAQ,QAAQ,eAAe;AAC1E,SAASC,WAAW,QAAQ,4BAA4B;AACxD,SAASC,eAAe,QAAQ,gCAAgC;AAChE,SAASC,eAAe,QAAQ,gCAAgC;AAEhER,OAAOS,QAAQ,CAACP,UAAU;IACxBF,OAAOU,GAAG,CAACL,UAAU;QACnBM,OAAO;QACP,4DAA4D;QAC5DC,MAAMX,MAAMY,IAAI;QAChBC,OAAO,CAAC,EAAEC,QAAQ,EAAE,GAAK,CAAC,CAAEA,CAAAA,YAAYA,SAASD,KAAK,CAAC,iBAAgB;QACvEE,QAAQV;IACV;IACAN,OAAOU,GAAG,CAACP,QAAQ;QACjBQ,OAAO;QACP,4DAA4D;QAC5DC,MAAMX,MAAMY,IAAI;QAChBC,OAAO,CAAC,EAAEC,QAAQ,EAAE,GAAK,CAAC,CAAEA,CAAAA,YAAYA,SAASD,KAAK,CAAC,iBAAgB;QACvEE,QAAQR;IACV;IACAR,OAAOU,GAAG,CAACN,gBAAgB;QACzB,4DAA4D;QAC5DQ,MAAMX,MAAMY,IAAI;QAChBF,OAAO;QACPG,OAAO,CAAC,EAAEC,QAAQ,EAAE,GAAK,CAAC,CAAEA,CAAAA,YAAYA,SAASD,KAAK,CAAC,iBAAgB;QACvEE,QAAQT;IACV;AACF"}
@@ -1,27 +0,0 @@
1
- /**
2
- * A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators
3
- * in order to augment stories:
4
- * - with extra rendering
5
- * - gather details about how a story is rendered
6
- *
7
- * When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.
8
- *
9
- * https://storybook.js.org/docs/react/writing-stories/decorators#gatsby-focus-wrapper
10
- */ import { withFluentProvider } from '../decorators/withFluentProvider';
11
- import { withReactStrictMode } from '../decorators/withReactStrictMode';
12
- import { withAriaLive } from '../decorators/withAriaLive';
13
- import { DIR_ID, STRICT_MODE_ID, THEME_ID } from '../constants';
14
- export const decorators = [
15
- withFluentProvider,
16
- withAriaLive,
17
- withReactStrictMode
18
- ];
19
- export const globals = {
20
- [THEME_ID]: undefined,
21
- [DIR_ID]: undefined,
22
- [STRICT_MODE_ID]: undefined
23
- }; // allow theme to be set by URL query param
24
- export default {
25
- decorators,
26
- globals
27
- };
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/preset/preview.ts"],"sourcesContent":["/**\n * A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators\n * in order to augment stories:\n * - with extra rendering\n * - gather details about how a story is rendered\n *\n * When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.\n *\n * https://storybook.js.org/docs/react/writing-stories/decorators#gatsby-focus-wrapper\n */\n\nimport { withFluentProvider } from '../decorators/withFluentProvider';\nimport { withReactStrictMode } from '../decorators/withReactStrictMode';\nimport { withAriaLive } from '../decorators/withAriaLive';\nimport { DIR_ID, STRICT_MODE_ID, THEME_ID } from '../constants';\n\nexport const decorators = [withFluentProvider, withAriaLive, withReactStrictMode];\nexport const globals = { [THEME_ID]: undefined, [DIR_ID]: undefined, [STRICT_MODE_ID]: undefined }; // allow theme to be set by URL query param\n\nexport default {\n decorators,\n globals,\n};\n"],"names":["withFluentProvider","withReactStrictMode","withAriaLive","DIR_ID","STRICT_MODE_ID","THEME_ID","decorators","globals","undefined"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;;;;;CASC,GAED,SAASA,kBAAkB,QAAQ,mCAAmC;AACtE,SAASC,mBAAmB,QAAQ,oCAAoC;AACxE,SAASC,YAAY,QAAQ,6BAA6B;AAC1D,SAASC,MAAM,EAAEC,cAAc,EAAEC,QAAQ,QAAQ,eAAe;AAEhE,OAAO,MAAMC,aAAa;IAACN;IAAoBE;IAAcD;CAAoB,CAAC;AAClF,OAAO,MAAMM,UAAU;IAAE,CAACF,SAAS,EAAEG;IAAW,CAACL,OAAO,EAAEK;IAAW,CAACJ,eAAe,EAAEI;AAAU,EAAE,CAAC,2CAA2C;AAE/I,eAAe;IACbF;IACAC;AACF,EAAE"}
package/lib/theme.js DELETED
@@ -1,23 +0,0 @@
1
- export const themes = [
2
- {
3
- id: 'web-light',
4
- label: 'Web Light'
5
- },
6
- {
7
- id: 'web-dark',
8
- label: 'Web Dark'
9
- },
10
- {
11
- id: 'teams-light',
12
- label: 'Teams Light'
13
- },
14
- {
15
- id: 'teams-dark',
16
- label: 'Teams Dark'
17
- },
18
- {
19
- id: 'teams-high-contrast',
20
- label: 'Teams High Contrast'
21
- }
22
- ];
23
- export const defaultTheme = themes[0];
package/lib/theme.js.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/theme.ts"],"sourcesContent":["export const themes = [\n { id: 'web-light', label: 'Web Light' },\n { id: 'web-dark', label: 'Web Dark' },\n { id: 'teams-light', label: 'Teams Light' },\n { id: 'teams-dark', label: 'Teams Dark' },\n { id: 'teams-high-contrast', label: 'Teams High Contrast' },\n] as const;\n\nexport const defaultTheme = themes[0];\n\nexport type ThemeIds = (typeof themes)[number]['id'];\nexport type ThemeLabels = (typeof themes)[number]['label'];\n"],"names":["themes","id","label","defaultTheme"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA,OAAO,MAAMA,SAAS;IACpB;QAAEC,IAAI;QAAaC,OAAO;IAAY;IACtC;QAAED,IAAI;QAAYC,OAAO;IAAW;IACpC;QAAED,IAAI;QAAeC,OAAO;IAAc;IAC1C;QAAED,IAAI;QAAcC,OAAO;IAAa;IACxC;QAAED,IAAI;QAAuBC,OAAO;IAAsB;CAC3D,CAAU;AAEX,OAAO,MAAMC,eAAeH,MAAM,CAAC,EAAE,CAAC"}
@@ -1,5 +0,0 @@
1
- export function isDecoratorDisabled(context, decoratorName) {
2
- var _context_parameters_reactStorybookAddon_disabledDecorators, _context_parameters_reactStorybookAddon;
3
- var _context_parameters_reactStorybookAddon_disabledDecorators_includes;
4
- return (_context_parameters_reactStorybookAddon_disabledDecorators_includes = (_context_parameters_reactStorybookAddon = context.parameters.reactStorybookAddon) === null || _context_parameters_reactStorybookAddon === void 0 ? void 0 : (_context_parameters_reactStorybookAddon_disabledDecorators = _context_parameters_reactStorybookAddon.disabledDecorators) === null || _context_parameters_reactStorybookAddon_disabledDecorators === void 0 ? void 0 : _context_parameters_reactStorybookAddon_disabledDecorators.includes(decoratorName)) !== null && _context_parameters_reactStorybookAddon_disabledDecorators_includes !== void 0 ? _context_parameters_reactStorybookAddon_disabledDecorators_includes : false;
5
- }
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/utils/isDecoratorDisabled.ts"],"sourcesContent":["import type { FluentParameters, FluentStoryContext } from '../hooks';\n\ntype DecoratorName = NonNullable<FluentParameters['reactStorybookAddon']>['disabledDecorators'][number];\n\nexport function isDecoratorDisabled(context: FluentStoryContext, decoratorName: DecoratorName): boolean {\n return context.parameters.reactStorybookAddon?.disabledDecorators?.includes(decoratorName) ?? false;\n}\n"],"names":["isDecoratorDisabled","context","decoratorName","parameters","reactStorybookAddon","disabledDecorators","includes"],"rangeMappings":";;;;","mappings":"AAIA,OAAO,SAASA,oBAAoBC,OAA2B,EAAEC,aAA4B;QACpFD,4DAAAA;QAAAA;IAAP,OAAOA,CAAAA,uEAAAA,0CAAAA,QAAQE,UAAU,CAACC,mBAAmB,cAAtCH,+DAAAA,6DAAAA,wCAAwCI,kBAAkB,cAA1DJ,iFAAAA,2DAA4DK,QAAQ,CAACJ,4BAArED,iFAAAA,sEAAuF;AAChG"}
@@ -1,37 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
4
- });
5
- Object.defineProperty(exports, "DirectionSwitch", {
6
- enumerable: true,
7
- get: function() {
8
- return DirectionSwitch;
9
- }
10
- });
11
- const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
- const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
13
- const _components = require("@storybook/components");
14
- const _theming = require("@storybook/theming");
15
- const _constants = require("../constants");
16
- const _hooks = require("../hooks");
17
- const Monospace = _theming.styled.span({
18
- fontFamily: "'Cascadia Code', Menlo, 'Courier New', Courier, monospace",
19
- letterSpacing: '-0.05em'
20
- });
21
- const DirectionSwitch = ()=>{
22
- const [globals, updateGlobals] = (0, _hooks.useGlobals)();
23
- var _globals_DIR_ID;
24
- const direction = (_globals_DIR_ID = globals[_constants.DIR_ID]) !== null && _globals_DIR_ID !== void 0 ? _globals_DIR_ID : 'ltr';
25
- const isLTR = direction === 'ltr';
26
- const toggleDirection = _react.useCallback(()=>updateGlobals({
27
- [_constants.DIR_ID]: isLTR ? 'rtl' : 'ltr'
28
- }), [
29
- isLTR,
30
- updateGlobals
31
- ]);
32
- return /*#__PURE__*/ _react.createElement(_components.IconButton, {
33
- key: _constants.DIR_ID,
34
- title: "Change Direction",
35
- onClick: toggleDirection
36
- }, /*#__PURE__*/ _react.createElement("div", null, "Direction: ", /*#__PURE__*/ _react.createElement(Monospace, null, direction.toUpperCase())));
37
- };
@@ -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":["DirectionSwitch","Monospace","styled","span","fontFamily","letterSpacing","globals","updateGlobals","useGlobals","direction","DIR_ID","isLTR","toggleDirection","React","useCallback","IconButton","key","title","onClick","div","toUpperCase"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAYaA;;;eAAAA;;;;iEAZU;4BACI;yBACJ;2BAEA;uBACI;AAE3B,MAAMC,YAAYC,eAAM,CAACC,IAAI,CAAC;IAC5BC,YAAY;IACZC,eAAe;AACjB;AAEO,MAAML,kBAAkB;IAC7B,MAAM,CAACM,SAASC,cAAc,GAAGC,IAAAA,iBAAU;QAEzBF;IAAlB,MAAMG,YAAYH,CAAAA,kBAAAA,OAAO,CAACI,iBAAM,CAAC,cAAfJ,6BAAAA,kBAAmB;IACrC,MAAMK,QAAQF,cAAc;IAE5B,MAAMG,kBAAkBC,OAAMC,WAAW,CACvC,IACEP,cAAc;YACZ,CAACG,iBAAM,CAAC,EAAEC,QAAQ,QAAQ;QAC5B,IACF;QAACA;QAAOJ;KAAc;IAGxB,qBACE,qBAACQ,sBAAU;QAACC,KAAKN,iBAAM;QAAEO,OAAM;QAAmBC,SAASN;qBACzD,qBAACO,aAAI,6BACQ,qBAAClB,iBAAWQ,UAAUW,WAAW;AAIpD"}
@@ -1,34 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
4
- });
5
- Object.defineProperty(exports, "ReactStrictMode", {
6
- enumerable: true,
7
- get: function() {
8
- return ReactStrictMode;
9
- }
10
- });
11
- const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
- const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
13
- const _components = require("@storybook/components");
14
- const _constants = require("../constants");
15
- const _hooks = require("../hooks");
16
- const ReactStrictMode = ()=>{
17
- const [globals, updateGlobals] = (0, _hooks.useGlobals)();
18
- var _globals_STRICT_MODE_ID;
19
- const isActive = (_globals_STRICT_MODE_ID = globals[_constants.STRICT_MODE_ID]) !== null && _globals_STRICT_MODE_ID !== void 0 ? _globals_STRICT_MODE_ID : false;
20
- const toggleStrictMode = _react.useCallback(()=>updateGlobals({
21
- [_constants.STRICT_MODE_ID]: !isActive
22
- }), [
23
- isActive,
24
- updateGlobals
25
- ]);
26
- return /*#__PURE__*/ _react.createElement(_components.IconButton, {
27
- key: _constants.STRICT_MODE_ID,
28
- active: isActive,
29
- title: "Toggle React Strict mode",
30
- onClick: toggleStrictMode
31
- }, /*#__PURE__*/ _react.createElement(_components.Icons, {
32
- icon: "lock"
33
- }));
34
- };
@@ -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":["ReactStrictMode","globals","updateGlobals","useGlobals","isActive","STRICT_MODE_ID","toggleStrictMode","React","useCallback","IconButton","key","active","title","onClick","Icons","icon"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;;iEANU;4BACW;2BAEH;uBACJ;AAEpB,MAAMA,kBAAkB;IAC7B,MAAM,CAACC,SAASC,cAAc,GAAGC,IAAAA,iBAAU;QAE1BF;IAAjB,MAAMG,WAAWH,CAAAA,0BAAAA,OAAO,CAACI,yBAAc,CAAC,cAAvBJ,qCAAAA,0BAA2B;IAE5C,MAAMK,mBAAmBC,OAAMC,WAAW,CACxC,IACEN,cAAc;YACZ,CAACG,yBAAc,CAAC,EAAE,CAACD;QACrB,IACF;QAACA;QAAUF;KAAc;IAG3B,qBACE,qBAACO,sBAAU;QAACC,KAAKL,yBAAc;QAAEM,QAAQP;QAAUQ,OAAM;QAA2BC,SAASP;qBAC3F,qBAACQ,iBAAK;QAACC,MAAK;;AAGlB"}
@@ -1,72 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
4
- });
5
- Object.defineProperty(exports, "ThemePicker", {
6
- enumerable: true,
7
- get: function() {
8
- return ThemePicker;
9
- }
10
- });
11
- const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
- const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
13
- const _components = require("@storybook/components");
14
- const _managerapi = require("@storybook/manager-api");
15
- const _theme = require("../theme");
16
- const _constants = require("../constants");
17
- const _hooks = require("../hooks");
18
- function createThemeItems(value, changeTheme, getCurrentTheme) {
19
- return value.map((item)=>{
20
- return {
21
- id: item.id,
22
- title: item.id === _theme.defaultTheme.id ? `${item.label} (Default)` : item.label,
23
- onClick: ()=>{
24
- changeTheme(item.id);
25
- },
26
- value: item.id,
27
- active: getCurrentTheme() === item.id
28
- };
29
- });
30
- }
31
- const ThemePicker = ()=>{
32
- const [globals, updateGlobals] = (0, _hooks.useGlobals)();
33
- const fluentTheme = (0, _managerapi.useParameter)('fluentTheme');
34
- var _globals_THEME_ID;
35
- const selectedThemeId = fluentTheme ? fluentTheme : (_globals_THEME_ID = globals[_constants.THEME_ID]) !== null && _globals_THEME_ID !== void 0 ? _globals_THEME_ID : _theme.defaultTheme.id;
36
- const selectedTheme = _theme.themes.find((entry)=>entry.id === selectedThemeId);
37
- const isActive = selectedThemeId !== _theme.defaultTheme.id;
38
- const setTheme = _react.useCallback((id)=>{
39
- updateGlobals({
40
- [_constants.THEME_ID]: id
41
- });
42
- }, [
43
- updateGlobals
44
- ]);
45
- const renderTooltip = _react.useCallback((props)=>{
46
- return /*#__PURE__*/ _react.createElement(_components.TooltipLinkList, {
47
- links: createThemeItems(_theme.themes, (id)=>{
48
- setTheme(id);
49
- props.onHide();
50
- }, ()=>selectedThemeId)
51
- });
52
- }, [
53
- selectedThemeId,
54
- setTheme
55
- ]);
56
- return /*#__PURE__*/ _react.createElement(_react.Fragment, null, /*#__PURE__*/ _react.createElement(_components.WithTooltip, {
57
- placement: "top",
58
- trigger: "click",
59
- closeOnClick: true,
60
- tooltip: renderTooltip
61
- }, /*#__PURE__*/ _react.createElement(_components.IconButton, {
62
- key: _constants.THEME_ID,
63
- title: "Change Fluent theme",
64
- active: isActive
65
- }, /*#__PURE__*/ _react.createElement(_components.Icons, {
66
- icon: "arrowdown"
67
- }), /*#__PURE__*/ _react.createElement("span", {
68
- style: {
69
- marginLeft: 5
70
- }
71
- }, "Theme: ", selectedTheme === null || selectedTheme === void 0 ? void 0 : selectedTheme.label))));
72
- };
@@ -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":["ThemePicker","createThemeItems","value","changeTheme","getCurrentTheme","map","item","id","title","defaultTheme","label","onClick","active","globals","updateGlobals","useGlobals","fluentTheme","useParameter","selectedThemeId","THEME_ID","selectedTheme","themes","find","entry","isActive","setTheme","React","useCallback","renderTooltip","props","TooltipLinkList","links","onHide","WithTooltip","placement","trigger","closeOnClick","tooltip","IconButton","key","Icons","icon","span","style","marginLeft"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAkCaA;;;eAAAA;;;;iEAlCU;4BACyC;4BACnC;uBAEkB;2BACtB;uBACoB;AAU7C,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,KAAKE,mBAAY,CAACF,EAAE,GAAG,CAAC,EAAED,KAAKI,KAAK,CAAC,UAAU,CAAC,GAAGJ,KAAKI,KAAK;YAC3EC,SAAS;gBACPR,YAAYG,KAAKC,EAAE;YACrB;YACAL,OAAOI,KAAKC,EAAE;YACdK,QAAQR,sBAAsBE,KAAKC,EAAE;QACvC;IACF;AACF;AAEO,MAAMP,cAAc;IACzB,MAAM,CAACa,SAASC,cAAc,GAAGC,IAAAA,iBAAU;IAC3C,MAAMC,cAA+CC,IAAAA,wBAAY,EAAC;QAEdJ;IAApD,MAAMK,kBAAkBF,cAAcA,cAAcH,CAAAA,oBAAAA,OAAO,CAACM,mBAAQ,CAAC,cAAjBN,+BAAAA,oBAAqBJ,mBAAY,CAACF,EAAE;IACxF,MAAMa,gBAAgBC,aAAM,CAACC,IAAI,CAACC,CAAAA,QAASA,MAAMhB,EAAE,KAAKW;IAExD,MAAMM,WAAWN,oBAAoBT,mBAAY,CAACF,EAAE;IAEpD,MAAMkB,WAAWC,OAAMC,WAAW,CAChC,CAACpB;QACCO,cAAc;YAAE,CAACK,mBAAQ,CAAC,EAAEZ;QAAG;IACjC,GACA;QAACO;KAAc;IAGjB,MAAMc,gBAAgBF,OAAMC,WAAW,CACrC,CAACE;QACC,qBACE,qBAACC,2BAAe;YACdC,OAAO9B,iBACLoB,aAAM,EACNd,CAAAA;gBACEkB,SAASlB;gBACTsB,MAAMG,MAAM;YACd,GACA,IAAMd;;IAId,GACA;QAACA;QAAiBO;KAAS;IAG7B,qBACE,0DACE,qBAACQ,uBAAW;QAACC,WAAU;QAAMC,SAAQ;QAAQC,cAAAA;QAAaC,SAAST;qBACjE,qBAACU,sBAAU;QAACC,KAAKpB,mBAAQ;QAAEX,OAAM;QAAsBI,QAAQY;qBAC7D,qBAACgB,iBAAK;QAACC,MAAK;sBACZ,qBAACC;QAAKC,OAAO;YAAEC,YAAY;QAAE;OAAG,WAAQxB,0BAAAA,oCAAAA,cAAeV,KAAK;AAKtE"}
@@ -1,28 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
4
- });
5
- function _export(target, all) {
6
- for(var name in all)Object.defineProperty(target, name, {
7
- enumerable: true,
8
- get: all[name]
9
- });
10
- }
11
- _export(exports, {
12
- ADDON_ID: function() {
13
- return ADDON_ID;
14
- },
15
- DIR_ID: function() {
16
- return DIR_ID;
17
- },
18
- STRICT_MODE_ID: function() {
19
- return STRICT_MODE_ID;
20
- },
21
- THEME_ID: function() {
22
- return THEME_ID;
23
- }
24
- });
25
- const ADDON_ID = 'storybook_fluentui-react-addon';
26
- const DIR_ID = `${ADDON_ID}_dir`;
27
- const STRICT_MODE_ID = `${ADDON_ID}_strict-mode`;
28
- 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"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAAaA,QAAQ;eAARA;;IAEAC,MAAM;eAANA;;IACAC,cAAc;eAAdA;;IACAC,QAAQ;eAARA;;;AAJN,MAAMH,WAAW;AAEjB,MAAMC,SAAS,CAAC,EAAED,SAAS,IAAI,CAAC;AAChC,MAAME,iBAAiB,CAAC,EAAEF,SAAS,YAAY,CAAC;AAChD,MAAMG,WAAW,CAAC,EAAEH,SAAS,MAAM,CAAC"}
@@ -1,29 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
4
- });
5
- Object.defineProperty(exports, "withAriaLive", {
6
- enumerable: true,
7
- get: function() {
8
- return withAriaLive;
9
- }
10
- });
11
- const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
- const _reactaria = require("@fluentui/react-aria");
13
- const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
14
- const _isDecoratorDisabled = require("../utils/isDecoratorDisabled");
15
- const withAriaLive = (Story, context)=>{
16
- if ((0, _isDecoratorDisabled.isDecoratorDisabled)(context, 'AriaLive')) {
17
- return Story();
18
- }
19
- return /*#__PURE__*/ _react.createElement(AriaLiveWrapper, null, /*#__PURE__*/ _react.createElement(Story, null));
20
- };
21
- const AriaLiveWrapper = (props)=>{
22
- const [mounted, setMounted] = _react.useState(false);
23
- _react.useEffect(()=>{
24
- // The AriaLiveAnnouncer appends an element to DOM in an effect
25
- // Trigger an extra renderer to make sure that doc examples that need to announce on mount can do so
26
- setMounted(true);
27
- }, []);
28
- return /*#__PURE__*/ _react.createElement(_reactaria.AriaLiveAnnouncer, null, mounted && props.children);
29
- };
@@ -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';\n\nexport const withAriaLive = (Story: () => JSX.Element, 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":["withAriaLive","Story","context","isDecoratorDisabled","AriaLiveWrapper","props","mounted","setMounted","React","useState","useEffect","AriaLiveAnnouncer","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;;2BANqB;iEACX;qCAGa;AAE7B,MAAMA,eAAe,CAACC,OAA0BC;IACrD,IAAIC,IAAAA,wCAAmB,EAACD,SAAS,aAAa;QAC5C,OAAOD;IACT;IAEA,qBACE,qBAACG,qCACC,qBAACH;AAGP;AAEA,MAAMG,kBAA2DC,CAAAA;IAC/D,MAAM,CAACC,SAASC,WAAW,GAAGC,OAAMC,QAAQ,CAAC;IAE7CD,OAAME,SAAS,CAAC;QACd,+DAA+D;QAC/D,oGAAoG;QACpGH,WAAW;IACb,GAAG,EAAE;IAEL,qBAAO,qBAACI,4BAAiB,QAAEL,WAAWD,MAAMO,QAAQ;AACtD"}
@@ -1,57 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
4
- });
5
- Object.defineProperty(exports, "withFluentProvider", {
6
- enumerable: true,
7
- get: function() {
8
- return withFluentProvider;
9
- }
10
- });
11
- const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
- const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
13
- const _reactprovider = require("@fluentui/react-provider");
14
- const _reacttheme = require("@fluentui/react-theme");
15
- const _theme = require("../theme");
16
- const _constants = require("../constants");
17
- const _isDecoratorDisabled = require("../utils/isDecoratorDisabled");
18
- const themes = {
19
- 'web-light': _reacttheme.webLightTheme,
20
- 'web-dark': _reacttheme.webDarkTheme,
21
- 'teams-light': _reacttheme.teamsLightTheme,
22
- 'teams-dark': _reacttheme.teamsDarkTheme,
23
- 'teams-high-contrast': _reacttheme.teamsHighContrastTheme
24
- };
25
- const findTheme = (themeId)=>{
26
- return themeId ? themes[themeId] : null;
27
- };
28
- const withFluentProvider = (StoryFn, context)=>{
29
- const { globals, parameters } = context;
30
- const { mode } = parameters;
31
- if ((0, _isDecoratorDisabled.isDecoratorDisabled)(context, 'FluentProvider')) {
32
- return StoryFn();
33
- }
34
- const isVrTest = mode === 'vr-test';
35
- var _parameters_dir, _ref;
36
- const dir = (_ref = (_parameters_dir = parameters.dir) !== null && _parameters_dir !== void 0 ? _parameters_dir : globals[_constants.DIR_ID]) !== null && _ref !== void 0 ? _ref : 'ltr';
37
- const globalTheme = findTheme(globals[_constants.THEME_ID]);
38
- const paramTheme = findTheme(parameters.fluentTheme);
39
- var _ref1;
40
- const theme = (_ref1 = paramTheme !== null && paramTheme !== void 0 ? paramTheme : globalTheme) !== null && _ref1 !== void 0 ? _ref1 : themes[_theme.defaultTheme.id];
41
- return /*#__PURE__*/ _react.createElement(_reactprovider.FluentProvider, {
42
- theme: theme,
43
- dir: dir
44
- }, isVrTest ? StoryFn() : /*#__PURE__*/ _react.createElement(FluentExampleContainer, {
45
- theme: theme
46
- }, StoryFn()));
47
- };
48
- const FluentExampleContainer = (props)=>{
49
- const { theme } = props;
50
- const backgroundColor = theme.colorNeutralBackground2;
51
- return /*#__PURE__*/ _react.createElement("div", {
52
- style: {
53
- padding: '48px 24px',
54
- backgroundColor
55
- }
56
- }, props.children);
57
- };
@@ -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 {\n Theme,\n teamsDarkTheme,\n teamsHighContrastTheme,\n teamsLightTheme,\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} as const;\n\nconst findTheme = (themeId?: ThemeIds) => {\n return themeId ? themes[themeId] : null;\n};\n\nexport const withFluentProvider = (StoryFn: () => JSX.Element, 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<{ 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":["withFluentProvider","themes","webLightTheme","webDarkTheme","teamsLightTheme","teamsDarkTheme","teamsHighContrastTheme","findTheme","themeId","StoryFn","context","globals","parameters","mode","isDecoratorDisabled","isVrTest","dir","DIR_ID","globalTheme","THEME_ID","paramTheme","fluentTheme","theme","defaultTheme","id","FluentProvider","FluentExampleContainer","props","backgroundColor","colorNeutralBackground2","div","style","padding","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BA4BaA;;;eAAAA;;;;iEA5BU;+BAEQ;4BAQxB;uBACgC;2BACN;qCAEG;AAEpC,MAAMC,SAAkC;IACtC,aAAaC,yBAAa;IAC1B,YAAYC,wBAAY;IACxB,eAAeC,2BAAe;IAC9B,cAAcC,0BAAc;IAC5B,uBAAuBC,kCAAsB;AAC/C;AAEA,MAAMC,YAAY,CAACC;IACjB,OAAOA,UAAUP,MAAM,CAACO,QAAQ,GAAG;AACrC;AAEO,MAAMR,qBAAqB,CAACS,SAA4BC;IAC7D,MAAM,EAAEC,OAAO,EAAEC,UAAU,EAAE,GAAGF;IAChC,MAAM,EAAEG,IAAI,EAAE,GAAGD;IAEjB,IAAIE,IAAAA,wCAAmB,EAACJ,SAAS,mBAAmB;QAClD,OAAOD;IACT;IAEA,MAAMM,WAAWF,SAAS;QACdD,iBAAAA;IAAZ,MAAMI,MAAMJ,CAAAA,OAAAA,CAAAA,kBAAAA,WAAWI,GAAG,cAAdJ,6BAAAA,kBAAkBD,OAAO,CAACM,iBAAM,CAAC,cAAjCL,kBAAAA,OAAqC;IACjD,MAAMM,cAAcX,UAAUI,OAAO,CAACQ,mBAAQ,CAAC;IAC/C,MAAMC,aAAab,UAAUK,WAAWS,WAAW;QACrCD;IAAd,MAAME,QAAQF,CAAAA,QAAAA,uBAAAA,wBAAAA,aAAcF,yBAAdE,mBAAAA,QAA6BnB,MAAM,CAACsB,mBAAY,CAACC,EAAE,CAAC;IAElE,qBACE,qBAACC,6BAAc;QAACH,OAAOA;QAAON,KAAKA;OAChCD,WAAWN,0BAAY,qBAACiB;QAAuBJ,OAAOA;OAAQb;AAGrE;AAEA,MAAMiB,yBAAqDC,CAAAA;IACzD,MAAM,EAAEL,KAAK,EAAE,GAAGK;IAElB,MAAMC,kBAAkBN,MAAMO,uBAAuB;IACrD,qBAAO,qBAACC;QAAIC,OAAO;YAAEC,SAAS;YAAaJ;QAAgB;OAAID,MAAMM,QAAQ;AAC/E"}
@@ -1,27 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
4
- });
5
- Object.defineProperty(exports, "withReactStrictMode", {
6
- enumerable: true,
7
- get: function() {
8
- return withReactStrictMode;
9
- }
10
- });
11
- const _interop_require_wildcard = require("@swc/helpers/_/_interop_require_wildcard");
12
- const _react = /*#__PURE__*/ _interop_require_wildcard._(require("react"));
13
- const _constants = require("../constants");
14
- const _isDecoratorDisabled = require("../utils/isDecoratorDisabled");
15
- const withReactStrictMode = (StoryFn, context)=>{
16
- if ((0, _isDecoratorDisabled.isDecoratorDisabled)(context, 'ReactStrictMode')) {
17
- return StoryFn();
18
- }
19
- var _context_globals_STRICT_MODE_ID;
20
- const isActive = (_context_globals_STRICT_MODE_ID = context.globals[_constants.STRICT_MODE_ID]) !== null && _context_globals_STRICT_MODE_ID !== void 0 ? _context_globals_STRICT_MODE_ID : false;
21
- return /*#__PURE__*/ _react.createElement(StrictModeWrapper, {
22
- strictMode: isActive
23
- }, StoryFn());
24
- };
25
- const StrictModeWrapper = (props)=>{
26
- return props.strictMode ? /*#__PURE__*/ _react.createElement(_react.StrictMode, null, props.children) : props.children;
27
- };
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/decorators/withReactStrictMode.tsx"],"sourcesContent":["import * as React from 'react';\n\nimport { STRICT_MODE_ID } from '../constants';\nimport { FluentStoryContext } from '../hooks';\nimport { isDecoratorDisabled } from '../utils/isDecoratorDisabled';\n\nexport const withReactStrictMode = (StoryFn: () => JSX.Element, 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":["withReactStrictMode","StoryFn","context","isDecoratorDisabled","isActive","globals","STRICT_MODE_ID","StrictModeWrapper","strictMode","props","React","StrictMode","children"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;+BAMaA;;;eAAAA;;;;iEANU;2BAEQ;qCAEK;AAE7B,MAAMA,sBAAsB,CAACC,SAA4BC;IAC9D,IAAIC,IAAAA,wCAAmB,EAACD,SAAS,oBAAoB;QACnD,OAAOD;IACT;QAEiBC;IAAjB,MAAME,WAAWF,CAAAA,kCAAAA,QAAQG,OAAO,CAACC,yBAAc,CAAC,cAA/BJ,6CAAAA,kCAAmC;IAEpD,qBAAO,qBAACK;QAAkBC,YAAYJ;OAAWH;AACnD;AAEA,MAAMM,oBAAoB,CAACE;IACzB,OAAOA,MAAMD,UAAU,iBAAG,qBAACE,OAAMC,UAAU,QAAEF,MAAMG,QAAQ,IAAuBH,MAAMG,QAAQ;AAClG"}
@@ -1,30 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
4
- });
5
- function _export(target, all) {
6
- for(var name in all)Object.defineProperty(target, name, {
7
- enumerable: true,
8
- get: all[name]
9
- });
10
- }
11
- _export(exports, {
12
- parameters: function() {
13
- return parameters;
14
- },
15
- useGlobals: function() {
16
- return useGlobals;
17
- }
18
- });
19
- const _managerapi = require("@storybook/manager-api");
20
- function useGlobals() {
21
- return (0, _managerapi.useGlobals)();
22
- }
23
- function parameters(options) {
24
- return {
25
- dir: 'ltr',
26
- fluentTheme: 'web-light',
27
- mode: 'default',
28
- ...options
29
- };
30
- }
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/hooks.ts"],"sourcesContent":["import { useGlobals as useStorybookGlobals } from '@storybook/manager-api';\nimport { Args as StorybookArgs, StoryContext as StorybookContext, Parameters } from '@storybook/react';\n\nimport { DIR_ID, STRICT_MODE_ID, THEME_ID } from './constants';\nimport type { ThemeIds } from './theme';\n\nexport interface FluentStoryContext extends StorybookContext {\n globals: FluentGlobals;\n parameters: FluentParameters;\n}\n\n/**\n * Extends the storybook globals object to include fluent specific properties\n */\nexport interface FluentGlobals extends StorybookArgs {\n [DIR_ID]?: 'ltr' | 'rtl';\n [THEME_ID]?: ThemeIds;\n [STRICT_MODE_ID]?: boolean;\n}\n\n/**\n * Extends the storybook parameters object to include fluent specific properties\n */\nexport interface FluentParameters extends Parameters {\n dir?: 'ltr' | 'rtl';\n fluentTheme?: ThemeIds;\n mode?: 'default' | 'vr-test';\n reactStorybookAddon?: { disabledDecorators: ['AriaLive' | 'FluentProvider' | 'ReactStrictMode'] };\n}\n\nexport function useGlobals(): [FluentGlobals, (newGlobals: FluentGlobals) => void] {\n return useStorybookGlobals();\n}\n\nexport function parameters(options?: FluentParameters) {\n return { dir: 'ltr', fluentTheme: 'web-light', mode: 'default', ...options };\n}\n"],"names":["parameters","useGlobals","useStorybookGlobals","options","dir","fluentTheme","mode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAkCgBA,UAAU;eAAVA;;IAJAC,UAAU;eAAVA;;;4BA9BkC;AA8B3C,SAASA;IACd,OAAOC,IAAAA,sBAAmB;AAC5B;AAEO,SAASF,WAAWG,OAA0B;IACnD,OAAO;QAAEC,KAAK;QAAOC,aAAa;QAAaC,MAAM;QAAW,GAAGH,OAAO;IAAC;AAC7E"}
@@ -1,27 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
4
- });
5
- function _export(target, all) {
6
- for(var name in all)Object.defineProperty(target, name, {
7
- enumerable: true,
8
- get: all[name]
9
- });
10
- }
11
- _export(exports, {
12
- DIR_ID: function() {
13
- return _constants.DIR_ID;
14
- },
15
- THEME_ID: function() {
16
- return _constants.THEME_ID;
17
- },
18
- parameters: function() {
19
- return _hooks.parameters;
20
- },
21
- themes: function() {
22
- return _theme.themes;
23
- }
24
- });
25
- const _theme = require("./theme");
26
- const _constants = require("./constants");
27
- const _hooks = require("./hooks");
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/index.ts"],"sourcesContent":["export type { FluentGlobals, FluentParameters, FluentStoryContext } from './hooks';\nexport type { ThemeIds } from './theme';\nexport { themes } from './theme';\nexport { DIR_ID, THEME_ID } from './constants';\nexport { parameters } from './hooks';\n"],"names":["DIR_ID","THEME_ID","parameters","themes"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAGSA,MAAM;eAANA,iBAAM;;IAAEC,QAAQ;eAARA,mBAAQ;;IAChBC,UAAU;eAAVA,iBAAU;;IAFVC,MAAM;eAANA,aAAM;;;uBAAQ;2BACU;uBACN"}
@@ -1,32 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
4
- });
5
- const _managerapi = require("@storybook/manager-api");
6
- const _constants = require("../constants");
7
- const _ThemePicker = require("../components/ThemePicker");
8
- const _ReactStrictMode = require("../components/ReactStrictMode");
9
- const _DirectionSwitch = require("../components/DirectionSwitch");
10
- _managerapi.addons.register(_constants.ADDON_ID, ()=>{
11
- _managerapi.addons.add(_constants.THEME_ID, {
12
- title: 'Fluent Theme Picker',
13
- // eslint-disable-next-line @typescript-eslint/no-deprecated
14
- type: _managerapi.types.TOOL,
15
- match: ({ viewMode })=>!!(viewMode && viewMode.match(/^(story|docs)$/)),
16
- render: _ThemePicker.ThemePicker
17
- });
18
- _managerapi.addons.add(_constants.DIR_ID, {
19
- title: 'Direction Switch',
20
- // eslint-disable-next-line @typescript-eslint/no-deprecated
21
- type: _managerapi.types.TOOL,
22
- match: ({ viewMode })=>!!(viewMode && viewMode.match(/^(story|docs)$/)),
23
- render: _DirectionSwitch.DirectionSwitch
24
- });
25
- _managerapi.addons.add(_constants.STRICT_MODE_ID, {
26
- // eslint-disable-next-line @typescript-eslint/no-deprecated
27
- type: _managerapi.types.TOOL,
28
- title: 'React Strict Mode',
29
- match: ({ viewMode })=>!!(viewMode && viewMode.match(/^(story|docs)$/)),
30
- render: _ReactStrictMode.ReactStrictMode
31
- });
32
- });
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/preset/manager.ts"],"sourcesContent":["import { addons, types } from '@storybook/manager-api';\n\nimport { ADDON_ID, DIR_ID, STRICT_MODE_ID, THEME_ID } from '../constants';\nimport { ThemePicker } from '../components/ThemePicker';\nimport { ReactStrictMode } from '../components/ReactStrictMode';\nimport { DirectionSwitch } from '../components/DirectionSwitch';\n\naddons.register(ADDON_ID, () => {\n addons.add(THEME_ID, {\n title: 'Fluent Theme Picker',\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n type: types.TOOL,\n match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),\n render: ThemePicker,\n });\n addons.add(DIR_ID, {\n title: 'Direction Switch',\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n type: types.TOOL,\n match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),\n render: DirectionSwitch,\n });\n addons.add(STRICT_MODE_ID, {\n // eslint-disable-next-line @typescript-eslint/no-deprecated\n type: types.TOOL,\n title: 'React Strict Mode',\n match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),\n render: ReactStrictMode,\n });\n});\n"],"names":["addons","register","ADDON_ID","add","THEME_ID","title","type","types","TOOL","match","viewMode","render","ThemePicker","DIR_ID","DirectionSwitch","STRICT_MODE_ID","ReactStrictMode"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;4BAA8B;2BAE6B;6BAC/B;iCACI;iCACA;AAEhCA,kBAAM,CAACC,QAAQ,CAACC,mBAAQ,EAAE;IACxBF,kBAAM,CAACG,GAAG,CAACC,mBAAQ,EAAE;QACnBC,OAAO;QACP,4DAA4D;QAC5DC,MAAMC,iBAAK,CAACC,IAAI;QAChBC,OAAO,CAAC,EAAEC,QAAQ,EAAE,GAAK,CAAC,CAAEA,CAAAA,YAAYA,SAASD,KAAK,CAAC,iBAAgB;QACvEE,QAAQC,wBAAW;IACrB;IACAZ,kBAAM,CAACG,GAAG,CAACU,iBAAM,EAAE;QACjBR,OAAO;QACP,4DAA4D;QAC5DC,MAAMC,iBAAK,CAACC,IAAI;QAChBC,OAAO,CAAC,EAAEC,QAAQ,EAAE,GAAK,CAAC,CAAEA,CAAAA,YAAYA,SAASD,KAAK,CAAC,iBAAgB;QACvEE,QAAQG,gCAAe;IACzB;IACAd,kBAAM,CAACG,GAAG,CAACY,yBAAc,EAAE;QACzB,4DAA4D;QAC5DT,MAAMC,iBAAK,CAACC,IAAI;QAChBH,OAAO;QACPI,OAAO,CAAC,EAAEC,QAAQ,EAAE,GAAK,CAAC,CAAEA,CAAAA,YAAYA,SAASD,KAAK,CAAC,iBAAgB;QACvEE,QAAQK,gCAAe;IACzB;AACF"}
@@ -1,48 +0,0 @@
1
- /**
2
- * A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators
3
- * in order to augment stories:
4
- * - with extra rendering
5
- * - gather details about how a story is rendered
6
- *
7
- * When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.
8
- *
9
- * https://storybook.js.org/docs/react/writing-stories/decorators#gatsby-focus-wrapper
10
- */ "use strict";
11
- Object.defineProperty(exports, "__esModule", {
12
- value: true
13
- });
14
- function _export(target, all) {
15
- for(var name in all)Object.defineProperty(target, name, {
16
- enumerable: true,
17
- get: all[name]
18
- });
19
- }
20
- _export(exports, {
21
- decorators: function() {
22
- return decorators;
23
- },
24
- default: function() {
25
- return _default;
26
- },
27
- globals: function() {
28
- return globals;
29
- }
30
- });
31
- const _withFluentProvider = require("../decorators/withFluentProvider");
32
- const _withReactStrictMode = require("../decorators/withReactStrictMode");
33
- const _withAriaLive = require("../decorators/withAriaLive");
34
- const _constants = require("../constants");
35
- const decorators = [
36
- _withFluentProvider.withFluentProvider,
37
- _withAriaLive.withAriaLive,
38
- _withReactStrictMode.withReactStrictMode
39
- ];
40
- const globals = {
41
- [_constants.THEME_ID]: undefined,
42
- [_constants.DIR_ID]: undefined,
43
- [_constants.STRICT_MODE_ID]: undefined
44
- }; // allow theme to be set by URL query param
45
- const _default = {
46
- decorators,
47
- globals
48
- };
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/preset/preview.ts"],"sourcesContent":["/**\n * A decorator is a way to wrap a story in extra “rendering” functionality. Many addons define decorators\n * in order to augment stories:\n * - with extra rendering\n * - gather details about how a story is rendered\n *\n * When writing stories, decorators are typically used to wrap stories with extra markup or context mocking.\n *\n * https://storybook.js.org/docs/react/writing-stories/decorators#gatsby-focus-wrapper\n */\n\nimport { withFluentProvider } from '../decorators/withFluentProvider';\nimport { withReactStrictMode } from '../decorators/withReactStrictMode';\nimport { withAriaLive } from '../decorators/withAriaLive';\nimport { DIR_ID, STRICT_MODE_ID, THEME_ID } from '../constants';\n\nexport const decorators = [withFluentProvider, withAriaLive, withReactStrictMode];\nexport const globals = { [THEME_ID]: undefined, [DIR_ID]: undefined, [STRICT_MODE_ID]: undefined }; // allow theme to be set by URL query param\n\nexport default {\n decorators,\n globals,\n};\n"],"names":["decorators","globals","withFluentProvider","withAriaLive","withReactStrictMode","THEME_ID","undefined","DIR_ID","STRICT_MODE_ID"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":"AAAA;;;;;;;;;CASC;;;;;;;;;;;IAOYA,UAAU;eAAVA;;IAGb,OAGE;eAHF;;IAFaC,OAAO;eAAPA;;;oCANsB;qCACC;8BACP;2BACoB;AAE1C,MAAMD,aAAa;IAACE,sCAAkB;IAAEC,0BAAY;IAAEC,wCAAmB;CAAC;AAC1E,MAAMH,UAAU;IAAE,CAACI,mBAAQ,CAAC,EAAEC;IAAW,CAACC,iBAAM,CAAC,EAAED;IAAW,CAACE,yBAAc,CAAC,EAAEF;AAAU,GAAG,2CAA2C;MAE/I,WAAe;IACbN;IACAC;AACF"}
@@ -1,41 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
4
- });
5
- function _export(target, all) {
6
- for(var name in all)Object.defineProperty(target, name, {
7
- enumerable: true,
8
- get: all[name]
9
- });
10
- }
11
- _export(exports, {
12
- defaultTheme: function() {
13
- return defaultTheme;
14
- },
15
- themes: function() {
16
- return themes;
17
- }
18
- });
19
- const themes = [
20
- {
21
- id: 'web-light',
22
- label: 'Web Light'
23
- },
24
- {
25
- id: 'web-dark',
26
- label: 'Web Dark'
27
- },
28
- {
29
- id: 'teams-light',
30
- label: 'Teams Light'
31
- },
32
- {
33
- id: 'teams-dark',
34
- label: 'Teams Dark'
35
- },
36
- {
37
- id: 'teams-high-contrast',
38
- label: 'Teams High Contrast'
39
- }
40
- ];
41
- const defaultTheme = themes[0];
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/theme.ts"],"sourcesContent":["export const themes = [\n { id: 'web-light', label: 'Web Light' },\n { id: 'web-dark', label: 'Web Dark' },\n { id: 'teams-light', label: 'Teams Light' },\n { id: 'teams-dark', label: 'Teams Dark' },\n { id: 'teams-high-contrast', label: 'Teams High Contrast' },\n] as const;\n\nexport const defaultTheme = themes[0];\n\nexport type ThemeIds = (typeof themes)[number]['id'];\nexport type ThemeLabels = (typeof themes)[number]['label'];\n"],"names":["defaultTheme","themes","id","label"],"rangeMappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;","mappings":";;;;;;;;;;;IAQaA,YAAY;eAAZA;;IARAC,MAAM;eAANA;;;AAAN,MAAMA,SAAS;IACpB;QAAEC,IAAI;QAAaC,OAAO;IAAY;IACtC;QAAED,IAAI;QAAYC,OAAO;IAAW;IACpC;QAAED,IAAI;QAAeC,OAAO;IAAc;IAC1C;QAAED,IAAI;QAAcC,OAAO;IAAa;IACxC;QAAED,IAAI;QAAuBC,OAAO;IAAsB;CAC3D;AAEM,MAAMH,eAAeC,MAAM,CAAC,EAAE"}
@@ -1,15 +0,0 @@
1
- "use strict";
2
- Object.defineProperty(exports, "__esModule", {
3
- value: true
4
- });
5
- Object.defineProperty(exports, "isDecoratorDisabled", {
6
- enumerable: true,
7
- get: function() {
8
- return isDecoratorDisabled;
9
- }
10
- });
11
- function isDecoratorDisabled(context, decoratorName) {
12
- var _context_parameters_reactStorybookAddon_disabledDecorators, _context_parameters_reactStorybookAddon;
13
- var _context_parameters_reactStorybookAddon_disabledDecorators_includes;
14
- return (_context_parameters_reactStorybookAddon_disabledDecorators_includes = (_context_parameters_reactStorybookAddon = context.parameters.reactStorybookAddon) === null || _context_parameters_reactStorybookAddon === void 0 ? void 0 : (_context_parameters_reactStorybookAddon_disabledDecorators = _context_parameters_reactStorybookAddon.disabledDecorators) === null || _context_parameters_reactStorybookAddon_disabledDecorators === void 0 ? void 0 : _context_parameters_reactStorybookAddon_disabledDecorators.includes(decoratorName)) !== null && _context_parameters_reactStorybookAddon_disabledDecorators_includes !== void 0 ? _context_parameters_reactStorybookAddon_disabledDecorators_includes : false;
15
- }
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/utils/isDecoratorDisabled.ts"],"sourcesContent":["import type { FluentParameters, FluentStoryContext } from '../hooks';\n\ntype DecoratorName = NonNullable<FluentParameters['reactStorybookAddon']>['disabledDecorators'][number];\n\nexport function isDecoratorDisabled(context: FluentStoryContext, decoratorName: DecoratorName): boolean {\n return context.parameters.reactStorybookAddon?.disabledDecorators?.includes(decoratorName) ?? false;\n}\n"],"names":["isDecoratorDisabled","context","decoratorName","parameters","reactStorybookAddon","disabledDecorators","includes"],"rangeMappings":";;;;;;;;;;;;;;","mappings":";;;;+BAIgBA;;;eAAAA;;;AAAT,SAASA,oBAAoBC,OAA2B,EAAEC,aAA4B;QACpFD,4DAAAA;QAAAA;IAAP,OAAOA,CAAAA,uEAAAA,0CAAAA,QAAQE,UAAU,CAACC,mBAAmB,cAAtCH,+DAAAA,6DAAAA,wCAAwCI,kBAAkB,cAA1DJ,iFAAAA,2DAA4DK,QAAQ,CAACJ,4BAArED,iFAAAA,sEAAuF;AAChG"}