storybook-addon-design-system-docs 1.0.0 → 1.0.2

package/dist/components/assets/index.js

@@ -0,0 +1,604 @@
+import { useState, useMemo } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+import { styled } from 'storybook/theming';
+
+// src/addon/components/assets/AssetSection.tsx
+function CheckerboardIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      fill: "currentColor",
+      role: "img",
+      "aria-label": "Checkerboard background",
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Checkerboard background" }),
+        /* @__PURE__ */ jsx("path", { d: "M0 0h4v4H0V0zm4 4h4v4H4V4zm4-4h4v4H8V0zm4 4h4v4h-4V4zM0 8h4v4H0V8zm8 0h4v4H8V8zm-4 4h4v4H4v-4zm8 0h4v4h-4v-4z" })
+      ]
+    }
+  );
+}
+function InverseIcon() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      viewBox: "0 0 16 16",
+      fill: "currentColor",
+      role: "img",
+      "aria-label": "Inverse background",
+      children: [
+        /* @__PURE__ */ jsx("title", { children: "Inverse background" }),
+        /* @__PURE__ */ jsx(
+          "circle",
+          {
+            cx: "8",
+            cy: "8",
+            r: "7",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "1.5"
+          }
+        ),
+        /* @__PURE__ */ jsx("path", { d: "M8 1a7 7 0 0 1 0 14V1z" })
+      ]
+    }
+  );
+}
+function ResetIcon() {
+  return /* @__PURE__ */ jsxs("svg", { viewBox: "0 0 16 16", fill: "currentColor", role: "img", "aria-label": "Reset", children: [
+    /* @__PURE__ */ jsx("title", { children: "Reset" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 3a5 5 0 1 0 4.546 2.914.5.5 0 0 1 .908-.417A6 6 0 1 1 8 2v1z" }),
+    /* @__PURE__ */ jsx("path", { d: "M8 4.466V.534a.25.25 0 0 1 .41-.192l2.36 1.966c.12.1.12.284 0 .384L8.41 4.658A.25.25 0 0 1 8 4.466z" })
+  ] });
+}
+var Wrapper = styled.div(({ theme }) => ({
+  background: theme.background?.content || "#ffffff",
+  minHeight: "100vh",
+  padding: "40px 20px",
+  boxSizing: "border-box"
+}));
+var Container = styled.div({
+  maxWidth: "1200px",
+  margin: "0 auto"
+});
+var Title = styled.h1(({ theme }) => ({
+  fontFamily: theme.typography?.fonts?.base || "sans-serif",
+  fontSize: "32px",
+  fontWeight: 700,
+  color: theme.color?.defaultText || "#333333",
+  marginBottom: "8px",
+  marginTop: 0
+}));
+var Description = styled.p(({ theme }) => ({
+  fontFamily: theme.typography?.fonts?.base || "sans-serif",
+  fontSize: "16px",
+  color: theme.color?.defaultText || "#333333",
+  opacity: 0.8,
+  marginBottom: "24px",
+  marginTop: 0
+}));
+var ControlsBar = styled.div({
+  display: "flex",
+  gap: "16px",
+  marginBottom: "32px",
+  flexWrap: "wrap",
+  alignItems: "center"
+});
+var SearchInput = styled.input(({ theme }) => ({
+  flex: "1 1 300px",
+  maxWidth: "400px",
+  padding: "10px 14px",
+  fontSize: "14px",
+  border: `1px solid ${theme.appBorderColor || "#eaeaea"}`,
+  borderRadius: "6px",
+  color: theme.color?.defaultText || "#333333",
+  background: theme.background?.content || "#ffffff",
+  outline: "none",
+  transition: "border-color 0.2s, box-shadow 0.2s",
+  "&:focus": {
+    borderColor: theme.color?.secondary || "#0271b6",
+    boxShadow: `0 0 0 2px ${theme.color?.secondary || "#0271b6"}22`
+  },
+  "&::placeholder": {
+    color: theme.color?.defaultText || "#333333",
+    opacity: 0.5
+  }
+}));
+var VariantToggle = styled.button(({ theme }) => ({
+  padding: "10px 16px",
+  fontSize: "14px",
+  fontWeight: 500,
+  border: `1px solid ${theme.appBorderColor || "#eaeaea"}`,
+  borderRadius: "6px",
+  cursor: "pointer",
+  background: theme.background?.content || "#ffffff",
+  color: theme.color?.defaultText || "#333333",
+  transition: "all 0.2s",
+  "&:hover": {
+    borderColor: theme.color?.secondary || "#0271b6",
+    background: theme.background?.hoverable || "#f5f5f5"
+  }
+}));
+var BackgroundControls = styled.div({
+  display: "flex",
+  alignItems: "center",
+  gap: "12px",
+  marginLeft: "auto"
+});
+var BackgroundToggle = styled.div(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "6px",
+  padding: "4px",
+  border: `1px solid ${theme.appBorderColor || "#eaeaea"}`,
+  borderRadius: "6px",
+  background: theme.background?.content || "#ffffff"
+}));
+var ToggleOption = styled.button(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "28px",
+  height: "28px",
+  border: "none",
+  borderRadius: "4px",
+  cursor: "pointer",
+  background: "transparent",
+  color: theme.color?.defaultText || "#333333",
+  opacity: 0.5,
+  transition: "all 0.15s",
+  '&[data-active="true"]': {
+    background: theme.color?.secondary || "#0271b6",
+    color: "#fff",
+    opacity: 1
+  },
+  '&:hover:not([data-active="true"])': {
+    opacity: 0.8,
+    background: theme.background?.hoverable || "#f5f5f5"
+  },
+  "& svg": {
+    width: "16px",
+    height: "16px"
+  }
+}));
+var ColorPickerGroup = styled.div(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  gap: "4px",
+  padding: "4px 6px",
+  border: `1px solid ${theme.appBorderColor || "#eaeaea"}`,
+  borderRadius: "6px",
+  background: theme.background?.content || "#ffffff",
+  transition: "border-color 0.2s",
+  "&:focus-within": {
+    borderColor: theme.color?.secondary || "#0271b6"
+  }
+}));
+var ColorLabel = styled.span(({ theme }) => ({
+  fontFamily: theme.typography?.fonts?.base || "sans-serif",
+  fontSize: "11px",
+  color: theme.color?.defaultText || "#333333",
+  opacity: 0.6,
+  textTransform: "uppercase",
+  letterSpacing: "0.5px"
+}));
+var ColorInput = styled.input({
+  width: "24px",
+  height: "24px",
+  padding: 0,
+  border: "none",
+  borderRadius: "4px",
+  cursor: "pointer",
+  background: "transparent",
+  "&::-webkit-color-swatch-wrapper": {
+    padding: 0
+  },
+  "&::-webkit-color-swatch": {
+    border: "none",
+    borderRadius: "4px"
+  },
+  "&::-moz-color-swatch": {
+    border: "none",
+    borderRadius: "4px"
+  }
+});
+var ResetButton = styled.button(({ theme }) => ({
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  width: "20px",
+  height: "20px",
+  padding: 0,
+  border: "none",
+  borderRadius: "4px",
+  cursor: "pointer",
+  background: "transparent",
+  color: theme.color?.defaultText || "#333333",
+  opacity: 0.4,
+  transition: "all 0.15s",
+  "&:hover": {
+    opacity: 1,
+    background: theme.background?.hoverable || "#f5f5f5"
+  },
+  "& svg": {
+    width: "12px",
+    height: "12px"
+  }
+}));
+var AssetCard = styled.div(({ theme }) => ({
+  display: "flex",
+  flexDirection: "column",
+  alignItems: "center",
+  padding: "16px",
+  borderRadius: "8px",
+  border: `1px solid ${theme.appBorderColor || "#eaeaea"}`,
+  background: theme.background?.content || "#ffffff",
+  transition: "all 0.2s",
+  cursor: "pointer",
+  "&:hover": {
+    borderColor: theme.color?.secondary || "#0271b6",
+    boxShadow: "0 4px 12px rgba(0,0,0,0.1)"
+  }
+}));
+var AssetPreview = styled.div({
+  width: "var(--preview-size, 200px)",
+  height: "var(--preview-size, 200px)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  marginBottom: "12px",
+  borderRadius: "4px"
+});
+var AssetImage = styled.img({
+  maxWidth: "100%",
+  maxHeight: "100%",
+  objectFit: "contain"
+});
+var AssetName = styled.div(({ theme }) => ({
+  fontFamily: theme.typography?.fonts?.base || "sans-serif",
+  fontSize: "13px",
+  fontWeight: 500,
+  color: theme.color?.defaultText || "#333333",
+  textAlign: "center",
+  wordBreak: "break-word",
+  lineHeight: 1.3
+}));
+var AssetFilename = styled.div(({ theme }) => ({
+  fontFamily: theme.typography?.fonts?.mono || "monospace",
+  fontSize: "11px",
+  color: theme.color?.defaultText || "#333333",
+  opacity: 0.6,
+  textAlign: "center",
+  marginTop: "4px"
+}));
+var CopyButtons = styled.div({
+  display: "flex",
+  gap: "8px",
+  marginTop: "8px",
+  opacity: 0,
+  transition: "opacity 0.2s",
+  ".asset-card:hover &": {
+    opacity: 1
+  }
+});
+var CopyButton = styled.button(({ theme }) => ({
+  padding: "4px 8px",
+  fontSize: "11px",
+  border: `1px solid ${theme.appBorderColor || "#eaeaea"}`,
+  borderRadius: "4px",
+  cursor: "pointer",
+  background: theme.background?.content || "#ffffff",
+  color: theme.color?.defaultText || "#333333",
+  transition: "all 0.15s",
+  "&:hover": {
+    background: theme.color?.secondary || "#0271b6",
+    color: "#fff",
+    borderColor: theme.color?.secondary || "#0271b6"
+  }
+}));
+var NoResults = styled.div(({ theme }) => ({
+  fontFamily: theme.typography?.fonts?.base || "sans-serif",
+  fontSize: "16px",
+  color: theme.color?.defaultText || "#333333",
+  opacity: 0.6,
+  textAlign: "center",
+  padding: "60px 20px"
+}));
+var FolderSection = styled.div({
+  marginBottom: "48px"
+});
+var FolderTitle = styled.h2(({ theme }) => ({
+  fontFamily: theme.typography?.fonts?.base || "sans-serif",
+  fontSize: "20px",
+  fontWeight: 600,
+  color: theme.color?.defaultText || "#333333",
+  marginBottom: "16px",
+  marginTop: 0,
+  paddingBottom: "8px",
+  borderBottom: `1px solid ${theme.appBorderColor || "#eaeaea"}`
+}));
+var Toast = styled.div(({ theme }) => ({
+  position: "fixed",
+  bottom: "24px",
+  right: "24px",
+  padding: "12px 20px",
+  background: theme.color?.positive || "#44bb44",
+  color: "#fff",
+  borderRadius: "8px",
+  fontSize: "14px",
+  fontWeight: 500,
+  boxShadow: "0 4px 12px rgba(0,0,0,0.15)",
+  zIndex: 1e3,
+  animation: "fadeInUp 0.3s ease"
+}));
+function AssetSection({
+  title,
+  description,
+  assets,
+  groupByFolder,
+  variants,
+  copy,
+  display,
+  storageKeyPrefix
+}) {
+  const DEFAULT_LIGHT_BG = "#eeeeee";
+  const DEFAULT_DARK_BG = "#181818";
+  const STORAGE_KEY_LIGHT = `${storageKeyPrefix}-light`;
+  const STORAGE_KEY_DARK = `${storageKeyPrefix}-dark`;
+  const STORAGE_KEY_MODE = `${storageKeyPrefix}-mode`;
+  const getStoredValue = (key, defaultValue) => {
+    try {
+      const stored = localStorage.getItem(key);
+      return stored !== null ? stored : defaultValue;
+    } catch {
+      return defaultValue;
+    }
+  };
+  const setStoredValue = (key, value) => {
+    try {
+      localStorage.setItem(key, value);
+    } catch {
+    }
+  };
+  const removeStoredValue = (key) => {
+    try {
+      localStorage.removeItem(key);
+    } catch {
+    }
+  };
+  const [searchTerm, setSearchTerm] = useState("");
+  const [currentVariant, setCurrentVariant] = useState(variants.defaultVariant);
+  const [toastMessage, setToastMessage] = useState(null);
+  const [bgMode, setBgMode] = useState(
+    () => getStoredValue(STORAGE_KEY_MODE, "checkered")
+  );
+  const [lightBgColor, setLightBgColor] = useState(
+    () => getStoredValue(STORAGE_KEY_LIGHT, DEFAULT_LIGHT_BG)
+  );
+  const [darkBgColor, setDarkBgColor] = useState(
+    () => getStoredValue(STORAGE_KEY_DARK, DEFAULT_DARK_BG)
+  );
+  const handleBgModeChange = (mode) => {
+    setBgMode(mode);
+    setStoredValue(STORAGE_KEY_MODE, mode);
+  };
+  const handleLightBgChange = (color) => {
+    setLightBgColor(color);
+    setStoredValue(STORAGE_KEY_LIGHT, color);
+  };
+  const handleDarkBgChange = (color) => {
+    setDarkBgColor(color);
+    setStoredValue(STORAGE_KEY_DARK, color);
+  };
+  const resetLightBg = () => {
+    setLightBgColor(DEFAULT_LIGHT_BG);
+    removeStoredValue(STORAGE_KEY_LIGHT);
+  };
+  const resetDarkBg = () => {
+    setDarkBgColor(DEFAULT_DARK_BG);
+    removeStoredValue(STORAGE_KEY_DARK);
+  };
+  const isLightVariant = currentVariant === "light";
+  const getPreviewBackground = () => {
+    if (bgMode === "checkered") {
+      return "repeating-conic-gradient(#e0e0e0 0% 25%, #ffffff 0% 50%) 50% / 16px 16px";
+    }
+    return isLightVariant ? darkBgColor : lightBgColor;
+  };
+  const showToast = (message) => {
+    setToastMessage(message);
+    setTimeout(() => setToastMessage(null), 2e3);
+  };
+  const copyToClipboard = (text, type) => {
+    navigator.clipboard.writeText(text).then(() => {
+      showToast(`${type} copied to clipboard!`);
+    });
+  };
+  const getImportPath = (asset) => {
+    if (!copy.import) return "";
+    return copy.import.replace(/\{\{name\}\}/g, asset.id).replace(/\{\{ext\}\}/g, asset.ext).replace(/\{\{path\}\}/g, asset.relativePath).replace(/\{\{basename\}\}/g, `${asset.filename}.${asset.ext}`);
+  };
+  const getComponentUsage = (asset) => {
+    if (!copy.component) return "";
+    return copy.component.replace(/\{\{name\}\}/g, asset.id).replace(/\{\{ext\}\}/g, asset.ext).replace(/\{\{path\}\}/g, asset.relativePath).replace(/\{\{basename\}\}/g, `${asset.filename}.${asset.ext}`);
+  };
+  const filteredAssets = useMemo(() => {
+    if (!searchTerm.trim()) return assets;
+    const term = searchTerm.toLowerCase();
+    return assets.filter(
+      (asset) => asset.name.toLowerCase().includes(term) || asset.filename.toLowerCase().includes(term)
+    );
+  }, [assets, searchTerm]);
+  const groupedAssets = useMemo(() => {
+    if (!groupByFolder) return /* @__PURE__ */ new Map();
+    const groups = /* @__PURE__ */ new Map();
+    for (const asset of filteredAssets) {
+      const folder = asset.folder || "root";
+      if (!groups.has(folder)) {
+        groups.set(folder, []);
+      }
+      groups.get(folder).push(asset);
+    }
+    return groups;
+  }, [filteredAssets, groupByFolder]);
+  const renderAsset = (asset) => {
+    const imageSrc = currentVariant === "dark" && asset.variants.dark ? asset.variants.dark : asset.variants.light;
+    const hasCopyAction = copy.import || copy.component;
+    const copyType = copy.import ? "Import" : "Component";
+    const copyText = copy.import ? getImportPath(asset) : getComponentUsage(asset);
+    return /* @__PURE__ */ jsxs(
+      AssetCard,
+      {
+        className: "asset-card",
+        onClick: () => hasCopyAction && copyToClipboard(copyText, copyType),
+        children: [
+          /* @__PURE__ */ jsx(
+            AssetPreview,
+            {
+              style: {
+                width: `${display.previewSize}px`,
+                height: `${display.previewSize}px`,
+                background: getPreviewBackground()
+              },
+              children: /* @__PURE__ */ jsx(AssetImage, { src: imageSrc, alt: asset.name })
+            }
+          ),
+          /* @__PURE__ */ jsx(AssetName, { children: asset.name }),
+          display.showFilename && /* @__PURE__ */ jsxs(AssetFilename, { children: [
+            asset.filename,
+            ".",
+            asset.ext
+          ] }),
+          hasCopyAction && /* @__PURE__ */ jsx(CopyButtons, { children: /* @__PURE__ */ jsx(
+            CopyButton,
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                copyToClipboard(copyText, copyType);
+              },
+              children: copyType
+            }
+          ) })
+        ]
+      },
+      asset.id
+    );
+  };
+  const renderGroupedAssets = () => {
+    const entries = Array.from(groupedAssets.entries());
+    return entries.map(([folder, assets2]) => /* @__PURE__ */ jsxs(FolderSection, { children: [
+      /* @__PURE__ */ jsx(FolderTitle, { children: folder === "root" ? "Root" : folder }),
+      /* @__PURE__ */ jsx(
+        "div",
+        {
+          style: {
+            display: "grid",
+            gridTemplateColumns: `repeat(auto-fill, minmax(${display.previewSize + 40}px, 1fr))`,
+            gap: "24px"
+          },
+          children: assets2.map(renderAsset)
+        }
+      )
+    ] }, folder));
+  };
+  return /* @__PURE__ */ jsx(Wrapper, { children: /* @__PURE__ */ jsxs(Container, { children: [
+    /* @__PURE__ */ jsx(Title, { children: title }),
+    description && /* @__PURE__ */ jsx(Description, { children: description }),
+    /* @__PURE__ */ jsxs(ControlsBar, { children: [
+      /* @__PURE__ */ jsx(
+        SearchInput,
+        {
+          value: searchTerm,
+          onChange: (e) => setSearchTerm(e.target.value),
+          placeholder: `Search ${title.toLowerCase()}...`
+        }
+      ),
+      variants.enabled && /* @__PURE__ */ jsx(
+        VariantToggle,
+        {
+          onClick: () => setCurrentVariant((v) => v === "light" ? "dark" : "light"),
+          children: currentVariant === "light" ? "Light" : "Dark"
+        }
+      ),
+      /* @__PURE__ */ jsxs(BackgroundControls, { children: [
+        /* @__PURE__ */ jsxs(BackgroundToggle, { children: [
+          /* @__PURE__ */ jsx(
+            ToggleOption,
+            {
+              "data-active": bgMode === "inverse",
+              onClick: () => handleBgModeChange("inverse"),
+              title: "Inverse background",
+              children: /* @__PURE__ */ jsx(InverseIcon, {})
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            ToggleOption,
+            {
+              "data-active": bgMode === "checkered",
+              onClick: () => handleBgModeChange("checkered"),
+              title: "Checkered background",
+              children: /* @__PURE__ */ jsx(CheckerboardIcon, {})
+            }
+          )
+        ] }),
+        bgMode === "inverse" && /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsxs(ColorPickerGroup, { children: [
+            /* @__PURE__ */ jsx(ColorLabel, { children: "Light" }),
+            /* @__PURE__ */ jsx(
+              ColorInput,
+              {
+                type: "color",
+                value: lightBgColor,
+                onChange: (e) => handleLightBgChange(e.target.value),
+                title: "Background for dark illustrations"
+              }
+            ),
+            lightBgColor !== DEFAULT_LIGHT_BG && /* @__PURE__ */ jsx(
+              ResetButton,
+              {
+                onClick: resetLightBg,
+                title: "Reset to default",
+                children: /* @__PURE__ */ jsx(ResetIcon, {})
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs(ColorPickerGroup, { children: [
+            /* @__PURE__ */ jsx(ColorLabel, { children: "Dark" }),
+            /* @__PURE__ */ jsx(
+              ColorInput,
+              {
+                type: "color",
+                value: darkBgColor,
+                onChange: (e) => handleDarkBgChange(e.target.value),
+                title: "Background for light illustrations"
+              }
+            ),
+            darkBgColor !== DEFAULT_DARK_BG && /* @__PURE__ */ jsx(ResetButton, { onClick: resetDarkBg, title: "Reset to default", children: /* @__PURE__ */ jsx(ResetIcon, {}) })
+          ] })
+        ] })
+      ] })
+    ] }),
+    filteredAssets.length === 0 ? /* @__PURE__ */ jsxs(NoResults, { children: [
+      "No ",
+      title.toLowerCase(),
+      ' found matching "',
+      searchTerm,
+      '"'
+    ] }) : groupByFolder ? renderGroupedAssets() : /* @__PURE__ */ jsx(
+      "div",
+      {
+        style: {
+          display: "grid",
+          gridTemplateColumns: `repeat(auto-fill, minmax(${display.previewSize + 40}px, 1fr))`,
+          gap: "24px"
+        },
+        children: filteredAssets.map(renderAsset)
+      }
+    ),
+    toastMessage && /* @__PURE__ */ jsx(Toast, { children: toastMessage })
+  ] }) });
+}
+
+export { AssetCard, AssetFilename, AssetImage, AssetName, AssetPreview, AssetSection, BackgroundControls, BackgroundToggle, CheckerboardIcon, ColorInput, ColorLabel, ColorPickerGroup, Container, ControlsBar, CopyButton, CopyButtons, Description, FolderSection, FolderTitle, InverseIcon, NoResults, ResetButton, ResetIcon, SearchInput, Title, Toast, ToggleOption, VariantToggle, Wrapper };
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map