fix(storybook): only display on story and update selected logic

siriwatknp · Aug 13, 2024 · e413748 · e413748
1 parent 60f565d
commit e413748
Show file tree

Hide file tree

Showing 2 changed files with 27 additions and 7 deletions.
diff --git a/.storybook/decorators/BlockPicker.tsx b/.storybook/decorators/BlockPicker.tsx
@@ -25,22 +25,34 @@ export const BlockPicker = memo(function MyAddonSelector() {
   const [, copy] = useCopyToClipboard();
   const [copied, setCopied] = React.useState(false);
   const timeoutRef = React.useRef<number | undefined>();
-  const isAdded = blocks.some((block) => block.id === storybookState.storyId);
+  const isAdded = blocks.some(
+    (block) =>
+      block.id.replace(/--.*/, "") ===
+      storybookState.storyId.replace(/--.*/, ""),
+  );
   return (
     <React.Fragment key="cli-toolbar/toolbar">
       <Button
         disabled={!!isAdded}
         onClick={() =>
           setBlocks((prev) => {
-            if (prev.find((block) => block.id === storybookState.storyId)) {
+            if (
+              prev.find(
+                (block) =>
+                  block.id.replace(/--.*/, "") ===
+                  storybookState.storyId.replace(/--.*/, ""),
+              )
+            ) {
               return prev;
             }
             const list = [
               ...prev,
               { id: storybookState.storyId },
-              ...(modules || []).map((m: string) => ({
-                id: m,
-              })),
+              ...(modules || [])
+                .filter((m: string) => !prev.find((item) => item.id === m))
+                .map((m: string) => ({
+                  id: m,
+                })),
             ];
             localStorage.setItem("cli-blocks", JSON.stringify(list));
             copy(
@@ -75,7 +87,7 @@ export const BlockPicker = memo(function MyAddonSelector() {
           }}
         >
           {(<CopyIcon />) as any}
-          {copied ? "Copied" : "CLI 🪄✨"}
+          {copied ? "Copied🪄" : "Copy CLI"}
         </Button>
       )}
       {blocks.length > 0 && (
@@ -85,7 +97,7 @@ export const BlockPicker = memo(function MyAddonSelector() {
             setAnchorEl(event.currentTarget as HTMLElement);
           }}
         >
-          View Blocks
+          View Blocks ({blocks.length})
           {
             (
               <svg
@@ -113,6 +125,7 @@ export const BlockPicker = memo(function MyAddonSelector() {
             <List dense>
               {blocks.map((block) => (
                 <ListItem
+                  key={block.id}
                   disablePadding
                   secondaryAction={
                     <IconButton
@@ -142,6 +155,10 @@ export const BlockPicker = memo(function MyAddonSelector() {
                 >
                   <ListItemButton
                     key={block.id}
+                    selected={
+                      storybookState.storyId.replace(/--.*/, "") ===
+                      block.id.replace(/--.*/, "")
+                    }
                     onClick={() => {
                       storybookApi.selectStory(block.id);
                       setAnchorEl(null);

diff --git a/.storybook/manager.tsx b/.storybook/manager.tsx
@@ -51,6 +51,7 @@ addons.register("block-usage", () => {
   addons.add("block-usage/toolbar", {
     title: "Block Usage",
     type: types.TOOL,
+    match: ({ viewMode }) => viewMode === "story",
     render: BlockUsage as unknown as () => React.ReactElement,
   });
 });
@@ -59,6 +60,7 @@ addons.register("cli-toolbar", () => {
   addons.add("cli-toolbar/toolbar", {
     title: "CLI Toolbar",
     type: types.TOOL,
+    match: ({ viewMode }) => viewMode === "story",
     render: BlockPicker as unknown as () => React.ReactElement,
   });
 });
@@ -67,6 +69,7 @@ addons.register("contributor", () => {
   addons.add("contributor/toolbar", {
     title: "Author",
     type: types.TOOL,
+    match: ({ viewMode }) => viewMode === "story",
     render: Tool as unknown as () => React.ReactElement,
   });
 });