storybook-addon-rtl
Version:
Right-to-left addon for Storybook.
1 lines • 3.17 kB
Source Map (JSON)
{"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","withRtl","StoryFn","channel","useChannel","useEffect","preview","preview_default"],"mappings":"0DAWO,SAASA,CAAiBC,CAAAA,CAAAA,CAAyB,CACxD,QAAA,CAAS,gBAAgB,GAAMA,CAAAA,EACjC,CCbO,IAAMC,EAAW,eACXC,CAEAC,CAAsB,CAAA,CAAA,EAAGF,CAAQ,CAAA,eAAA,CAAA,CAKjCG,EAAkB,CAAGH,EAAAA,CAAQ,CCS1C,WAAA,MAEMI,CAAWC,CAAAA,CAAAA,EAAsC,CACrD,IAAMC,EAAUC,UAAW,CAAA,CACzB,CAACJ,CAAe,EAAG,CAAC,CAAE,SAAA,CAAAJ,CAAU,CAAM,GAAA,CACpCD,CAAiBC,CAAAA,CAAS,EAC5B,CACF,CAAC,CAED,CAAA,OAAAS,UAAU,IAAM,CACdF,CAAQJ,CAAAA,CAAmB,EAC7B,CAAG,CAAA,CAACI,CAAO,CAAC,EAELD,CAAQ,EACjB,CAEMI,CAAAA,CAAAA,CAAwC,CAC5C,UAAY,CAAA,CAACL,CAAO,CACtB,EAEOM,CAAQD,CAAAA","file":"preview.mjs","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 * Events of this type should be accompanied by a parameter with a type of {@link RTLChangeEvent}\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"]}