storybook-addon-rtl
Version:
Right-to-left addon for Storybook.
89 lines (88 loc) • 3.55 kB
JavaScript
import { addons, types, useGlobals, useStorybookApi } from "storybook/manager-api";
import React from "react";
import { IconButton } from "storybook/internal/components";
import { useTheme } from "storybook/theming";
//#region src/constants.ts
const ADDON_ID = "storybook/rtl";
const TOOL_ID = `${ADDON_ID}/rtl-tool`;
//#endregion
//#region src/components/DirectionArrowsIcon.tsx
/**
* An icon with two arrows pointing in different directions.
* Depending on the direction parameter, one of the arrows will be emphasized with color and scale.
*/
const DirectionArrowsIcon = ({ direction }) => {
const theme = useTheme();
const ariaLabel = direction === "ltr" ? "Switch direction to right-to-left." : "Switch Direction to left-to-right";
return /* @__PURE__ */ React.createElement("div", {
"aria-label": ariaLabel,
style: {
width: "20px",
height: "20px",
position: "relative"
}
}, /* @__PURE__ */ React.createElement("div", { style: {
marginBottom: "-45%",
top: 0,
display: "flex",
justifyContent: "center",
backgroundColor: "transparent",
width: "100%",
transition: "transform 0.3s",
transform: direction === "rtl" ? "scale(0.5) translate(0, -35%)" : "scale(1)"
} }, /* @__PURE__ */ React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 512 512",
style: {
transition: "fill 0.3s",
fill: direction === "ltr" ? theme.barSelectedColor : theme.barTextColor,
height: "100%",
width: "80%"
}
}, /* @__PURE__ */ React.createElement("path", { d: "M502.6 278.6l-128 128c-12.51 12.51-32.76 12.49-45.25 0c-12.5-12.5-12.5-32.75 0-45.25L402.8 288H32C14.31 288 0 273.7 0 255.1S14.31 224 32 224h370.8l-73.38-73.38c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l128 128C515.1 245.9 515.1 266.1 502.6 278.6z" }))), /* @__PURE__ */ React.createElement("div", { style: {
display: "flex",
justifyContent: "center",
backgroundColor: "transparent",
width: "100%",
scale: direction === "rtl" ? 1 : .5,
transition: "transform 0.3s",
transform: direction === "ltr" ? "scale(0.5) translate(0, -1px)" : "scale(1) translate(0, -20%)"
} }, /* @__PURE__ */ React.createElement("svg", {
xmlns: "http://www.w3.org/2000/svg",
viewBox: "0 0 512 512",
style: {
transition: "fill 0.3s",
fill: direction === "rtl" ? theme.barSelectedColor : theme.barTextColor,
transform: "rotate(180deg)",
height: "100%",
width: "80%"
}
}, /* @__PURE__ */ React.createElement("path", { d: "M502.6 278.6l-128 128c-12.51 12.51-32.76 12.49-45.25 0c-12.5-12.5-12.5-32.75 0-45.25L402.8 288H32C14.31 288 0 273.7 0 255.1S14.31 224 32 224h370.8l-73.38-73.38c-12.5-12.5-12.5-32.75 0-45.25s32.75-12.5 45.25 0l128 128C515.1 245.9 515.1 266.1 502.6 278.6z" }))));
};
//#endregion
//#region src/components/Tool.tsx
const Tool = () => {
const [globals, setGlobals] = useGlobals();
const storyGlobals = useStorybookApi().getStoryGlobals();
const title = globals.addonRtl === "ltr" ? "Switch direction to right-to-left." : "Switch direction to left-to-right";
return /* @__PURE__ */ React.createElement(IconButton, {
"aria-label": title,
title,
variant: "ghost",
disabled: storyGlobals.addonRtl !== void 0,
onClick: () => {
setGlobals({ addonRtl: globals.addonRtl === "rtl" ? "ltr" : "rtl" });
}
}, /* @__PURE__ */ React.createElement(DirectionArrowsIcon, { direction: globals.addonRtl }));
};
//#endregion
//#region src/manager.ts
addons.register(ADDON_ID, () => {
addons.add(TOOL_ID, {
id: "rtl-tool",
type: types.TOOL,
title: "RTL",
render: Tool
});
});
//#endregion