| 1 |
- {"version":3,"sources":["../src/utils.ts","../src/constants.ts","../src/preview.ts"],"names":["setTextDirection","direction","ADDON_ID","TOOL_ID","INITIALIZE_EVENT_ID","UPDATE_EVENT_ID","useChannel","useEffect","withRtl","StoryFn","channel","preview","preview_default"],"mappings":"AAWO,SAASA,EAAiBC,EAAyB,CACxD,SAAS,gBAAgB,IAAMA,CACjC,CCbO,IAAMC,EAAW,gBACXC,EAAU,GAAGD,CAAQ,YAErBE,EAAsB,GAAGF,CAAQ,kBAKjCG,EAAkB,GAAGH,CAAQ,cCS1C,OAAS,cAAAI,EAAY,aAAAC,MAAiB,yBAEtC,IAAMC,EAAWC,GAAsC,CACrD,IAAMC,EAAUJ,EAAW,CACzB,CAACD,CAAe,EAAG,CAAC,CAAE,UAAAJ,CAAU,IAAM,CACpCD,EAAiBC,CAAS,CAC5B,CACF,CAAC,EAED,OAAAM,EAAU,IAAM,CACdG,EAAQN,CAAmB,CAC7B,EAAG,CAACM,CAAO,CAAC,EAELD,EAAQ,CACjB,EAEME,EAAwC,CAC5C,WAAY,CAACH,CAAO,CACtB,EAEOI,EAAQD","sourcesContent":["import { API } from \"@storybook/manager-api\";\nimport { RTLDirection } from \"./constants\";\n\nexport function getDefaultTextDirection(api: API) {\n const queryParam = api.getQueryParam(\"direction\");\n const htmlDirection = window\n .getComputedStyle(document.documentElement)\n .direction.toLowerCase();\n return queryParam || htmlDirection || \"ltr\";\n}\n\nexport function setTextDirection(direction: RTLDirection) {\n document.documentElement.dir = direction;\n}\n","export const ADDON_ID = \"storybook/rtl\";\nexport const TOOL_ID = `${ADDON_ID}/rtl-tool`;\n\nexport const INITIALIZE_EVENT_ID = `${ADDON_ID}/rtl-initialize`;\n/**\n * The ID for an event that is emitted in the Storybook channel whenever an change to the direction happens.\n * The event will include\n */\nexport const UPDATE_EVENT_ID = `${ADDON_ID}/rtl-update`;\n\nexport type RTLDirection = \"rtl\" | \"ltr\";\n\nexport type RTLChangeEvent = {\n direction: RTLDirection;\n /**\n * Whether this event is the result of a user interaction,\n * or something else (like the initial state, or the parameter of a story)\n */\n userInteraction: boolean;\n};\n","/**\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\n */\nimport type {\n Renderer,\n ProjectAnnotations,\n PartialStoryFn,\n} from \"@storybook/types\";\nimport { setTextDirection } from \"./utils\";\nimport { INITIALIZE_EVENT_ID, UPDATE_EVENT_ID } from \"./constants\";\nimport { useChannel, useEffect } from \"@storybook/preview-api\";\n\nconst withRtl = (StoryFn: PartialStoryFn<Renderer>) => {\n const channel = useChannel({\n [UPDATE_EVENT_ID]: ({ direction }) => {\n setTextDirection(direction);\n },\n });\n\n useEffect(() => {\n channel(INITIALIZE_EVENT_ID);\n }, [channel]);\n\n return StoryFn();\n};\n\nconst preview: ProjectAnnotations<Renderer> = {\n decorators: [withRtl],\n};\n\nexport default preview;\n"]}
|
