From 5c84dc24135cbac5a748357db45e91db338128cd Mon Sep 17 00:00:00 2001 From: Danilo Woznica Date: Mon, 4 Mar 2024 14:48:19 +0000 Subject: [PATCH] feat: Remove unused Icons import from Tool.tsx and replace Icons component with BoxIcon --- .storybook/preview.tsx | 32 ++++++++++++ src/Tool.tsx | 108 ++++++++++++++++++++++++++++------------- src/manager.tsx | 13 ++--- 3 files changed, 108 insertions(+), 45 deletions(-) diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx index d035c8e..f35184e 100644 --- a/.storybook/preview.tsx +++ b/.storybook/preview.tsx @@ -15,6 +15,38 @@ const preview: Preview = { date: /Date$/, }, }, + + codesandbox: { + /** + * CodeSandbox workspace id where sandbox will be created. + * @required + */ + workspaceId: "foo", + + /** + * List of dependencies to install in the sandbox + * @optional + */ + dependencies: { + "@radix-ui/themes": "latest", + }, + + /** + * All required providers to run the sandbox properly, such as + * themes, i18n, store, and so on. + * @optional + */ + provider: `import { Theme } from "@radix-ui/themes"; +import '@radix-ui/themes/styles.css'; + +export default ThemeProvider = ({ children }) => { + return ( + + {children} + + ) +}`, + }, }, decorators: [ (Story) => ( diff --git a/src/Tool.tsx b/src/Tool.tsx index 10f3752..4ad57cd 100644 --- a/src/Tool.tsx +++ b/src/Tool.tsx @@ -1,18 +1,50 @@ import React, { memo, useEffect, useState } from "react"; -import { API, useParameter } from "@storybook/manager-api"; -import { Icons, Button } from "@storybook/components"; -import { TOOL_ID } from "./constants"; +import { API, useAddonState, useParameter } from "@storybook/manager-api"; +import { Button } from "@storybook/components"; import LZString from "lz-string"; +import { BoxIcon } from "@storybook/icons"; + +import { TOOL_ID } from "./constants"; -const ADDON_ID = "storybook/docs"; -const SNIPPET_RENDERED = `${ADDON_ID}/snippet-rendered`; +const SNIPPET_RENDERED = `storybook/docs/snippet-rendered`; + +type CSBParameters = + | { + /** + * CodeSandbox workspace id where sandbox will be created. + * @required + */ + workspaceId: string; + + /** + * Key/value mapping of components to import in the sandbox + * @optional + */ + mapComponent?: Record; + + /** + * List of dependencies to install in the sandbox + * @optional + */ + dependencies?: Record; + + /** + * All required providers to run the sandbox properly, such as + * themes, i18n, store, and so on. + * @optional + */ + provider?: string; + } + | undefined; -export const Tool = memo(function MyAddonSelector({ api }: { api: API }) { +export const CodeSandboxTool = memo(function MyAddonSelector({ + api, +}: { + api: API; +}) { const formRef = React.useRef(null); const [storySource, setStorySource] = useState(); - const codesandboxParameters: - | { mapComponent: Record } - | undefined = useParameter("codesandbox"); + const codesandboxParameters: CSBParameters = useParameter("codesandbox"); useEffect(() => { api @@ -20,13 +52,30 @@ export const Tool = memo(function MyAddonSelector({ api }: { api: API }) { .on(SNIPPET_RENDERED, ({ source }) => setStorySource(source)); }, []); + if (!codesandboxParameters || !storySource) { + return; + } + + const options = { + activeFile: "/App.js", + workspaceId: codesandboxParameters.workspaceId, + mapComponent: codesandboxParameters.mapComponent ?? {}, + dependencies: codesandboxParameters.dependencies ?? {}, + provider: + codesandboxParameters.provider ?? + `export default GenericProvider = ({ children }) => { + return children +}`, + }; + let imports = ``; - for (const [key, value] of Object.entries( - codesandboxParameters?.mapComponent ?? {}, - )) { + for (const [key, value] of Object.entries(options.mapComponent)) { imports += `import { ${value.join(", ")} } from '${key}';\n`; } + /** + * Template + */ const files = { "/package.json": { code: JSON.stringify({ @@ -34,25 +83,27 @@ export const Tool = memo(function MyAddonSelector({ api }: { api: API }) { react: "^18.0.0", "react-dom": "^18.0.0", "react-scripts": "^5.0.0", - "@radix-ui/themes": "latest", + ...options.dependencies, }, main: "/index.js", }), }, + "/provider.js": { + code: options.provider, + }, "/index.js": { code: `import React, { StrictMode } from "react"; import { createRoot } from "react-dom/client"; -import { Theme } from "@radix-ui/themes"; -import '@radix-ui/themes/styles.css'; +import GenericProvider from "./provider"; import App from "./App"; const root = createRoot(document.getElementById("root")); root.render( - + - + ); `, @@ -66,24 +117,11 @@ export default App = () => { }, }; - // const submit = () => { - // const parameters = getParameters({ files }); - // const url = `https://codesandbox.io/api/v1/sandboxes/define?parameters=${parameters}&file=/App.js`; - - // window.open(url, "_blank"); - // }; - - if (!storySource) { - return null; - } - - const activeFile = "/App.js"; - const params = getFileParameters(files); const searchParams = new URLSearchParams({ parameters: params, query: new URLSearchParams({ - file: activeFile, + file: options.activeFile, utm_medium: "storybook", }).toString(), }); @@ -91,9 +129,9 @@ export default App = () => { return ( ); diff --git a/src/manager.tsx b/src/manager.tsx index 9f6a9ba..8fef7fd 100644 --- a/src/manager.tsx +++ b/src/manager.tsx @@ -1,20 +1,13 @@ import React from "react"; -import { addons, types } from "@storybook/manager-api"; +import { addons, types, StoreOptions } from "@storybook/manager-api"; import { ADDON_ID, TOOL_ID } from "./constants"; -import { Tool } from "./Tool"; +import { CodeSandboxTool } from "./Tool"; -/** - * Note: if you want to use JSX in this file, rename it to `manager.tsx` - * and update the entry prop in tsup.config.ts to use "src/manager.tsx", - */ - -// Register the addon addons.register(ADDON_ID, (api) => { - // Register the tool addons.add(TOOL_ID, { type: types.TOOL, title: "CodeSandbox", match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)), - render: () => , + render: () => , }); });