{"version":3,"sources":["../src/manager.ts","../src/constants.ts","../src/utils.ts","../src/components/Tool.tsx","../src/components/DirectionArrowsIcon.tsx"],"names":["addons","types","ADDON_ID","TOOL_ID","INITIALIZE_EVENT_ID","UPDATE_EVENT_ID","getDefaultTextDirection","api","queryParam","htmlDirection","STORY_RENDERED","React","useState","useChannel","IconButton","useTheme","DirectionArrowsIcon","direction","theme","Tool","dirState","setDirState","channel","updateEvent","setDirectionOnStoryChange","viewMode","lastUserInteractionValue","lastUpdate","paramValue","newDirection"],"mappings":"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","sourcesContent":["import { API, addons, types } from \"@storybook/manager-api\";\nimport { ADDON_ID, RTLDirection, TOOL_ID, UPDATE_EVENT_ID } from \"./constants\";\nimport { getDefaultTextDirection } from \"./utils\";\nimport { STORY_RENDERED } from \"@storybook/core-events\";\nimport { Tool } from \"./components/Tool\";\n\naddons.register(ADDON_ID, (api) => {\n setDirectionOnStoryChange(api);\n\n addons.add(TOOL_ID, {\n id: \"rtl-tool\",\n hidden: true,\n type: types.TOOL,\n title: \"RTL\",\n disabled: true,\n match: ({ viewMode }) => {\n return viewMode === \"story\";\n },\n render: Tool,\n });\n});\n\nexport function setDirectionOnStoryChange(api: API) {\n const channel = addons.getChannel();\n // Keep track of the most recent value that was a result of user interaction\n // so we can return to this value whenever a story is opened that does not have a parameter\n let lastUserInteractionValue: RTLDirection;\n // Whenever a story is rendered, update the state to represent the parameter value of the story.\n // We do this here and not in the panel component because we want the parameter to be respected\n // even if the panel is never opened\n channel.on(STORY_RENDERED, () => {\n const lastUpdate = channel.last(UPDATE_EVENT_ID)?.[0];\n lastUserInteractionValue = lastUpdate?.userInteraction\n ? lastUpdate.direction\n : lastUserInteractionValue;\n\n const paramValue = api.getCurrentParameter(\"direction\");\n let newDirection;\n if (paramValue) {\n newDirection = paramValue;\n } else if (lastUserInteractionValue) {\n newDirection = lastUserInteractionValue;\n } else {\n newDirection = getDefaultTextDirection(api);\n }\n channel.emit(UPDATE_EVENT_ID, {\n direction: newDirection,\n userInteraction: false,\n });\n });\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","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","import React, { useState } from \"react\";\nimport { useChannel } from \"@storybook/manager-api\";\nimport { RTLDirection, UPDATE_EVENT_ID } from \"src/constants\";\nimport { IconButton } from \"@storybook/components\";\nimport { DirectionArrowsIcon } from \"./DirectionArrowsIcon\";\n\nexport const Tool = () => {\n const [dirState, setDirState] = useState<{ direction: RTLDirection }>({\n direction: \"ltr\",\n });\n const channel = useChannel({\n [UPDATE_EVENT_ID]: (updateEvent) => {\n setDirState({ direction: updateEvent.direction });\n },\n });\n return (\n <>\n {\n channel(UPDATE_EVENT_ID, {\n direction: dirState.direction === \"rtl\" ? \"ltr\" : \"rtl\",\n userInteraction: true,\n });\n }}\n >\n \n \n \n );\n};\n","import { useTheme } from \"@storybook/theming\";\nimport React from \"react\";\nimport { RTLDirection } from \"src/constants\";\n\n// There are a lot of specific translate and scale values in this file that were picked based on trial/error\n// based on what looks the most balanced.\n/**\n * An icon with two arrows pointing in different directions.\n * Depending on the direction parameter, one of the arrows will be emphasized with color and scale.\n */\nexport const DirectionArrowsIcon = ({\n direction,\n}: {\n direction: RTLDirection;\n}) => {\n const theme = useTheme();\n const ariaLabel =\n direction === \"ltr\"\n ? \"Switch direction to right-to-left.\"\n : \"Switch Direction to left-to-right\";\n return (\n \n \n \n \n \n \n \n \n \n \n \n \n );\n};\n"]}