storybook 10.0.0-beta.0 → 10.0.0-beta.2

package/dist/manager/runtime.js

@@ -16390,76 +16390,103 @@ var SidebarBottom = /* @__PURE__ */ __name(({ isDevelopment }) => {
 }, "SidebarBottom");
 
 // src/manager/components/sidebar/TagsFilterPanel.tsx
-var BUILT_IN_TAGS_SHOW = /* @__PURE__ */ new Set(["play-fn"]);
+var BUILT_IN_TAGS = /* @__PURE__ */ new Set([
+  "dev",
+  "test",
+  "autodocs",
+  "attached-mdx",
+  "unattached-mdx",
+  "play-fn",
+  "test-fn",
+  "vitest",
+  "svelte-csf",
+  "svelte-csf-v4",
+  "svelte-csf-v5"
+]);
 var Wrapper3 = styled.div({
-  minWidth: 180,
-  maxWidth: 220
+  minWidth: 240,
+  maxWidth: 300
 });
+var Actions3 = styled.div(({ theme }) => ({
+  display: "flex",
+  justifyContent: "space-between",
+  gap: 4,
+  padding: 4,
+  borderBottom: `1px solid ${theme.appBorderColor}`
+}));
 var TagsFilterPanel = /* @__PURE__ */ __name(({
   api,
   allTags,
   selectedTags,
   toggleTag,
+  setAllTags,
+  inverted,
+  setInverted,
   isDevelopment
 }) => {
-  const userTags = allTags.filter((tag) => !BUILT_IN_TAGS_SHOW.has(tag));
+  const [builtInEntries, userEntries] = Array.from(allTags.entries()).reduce(
+    (acc, [tag, count]) => {
+      acc[BUILT_IN_TAGS.has(tag) ? 0 : 1].push([tag, count]);
+      return acc;
+    },
+    [[], []]
+  );
   const docsUrl = api.getDocsUrl({ subpath: "writing-stories/tags#filtering-by-custom-tags" });
+  const noTags = {
+    id: "no-tags",
+    title: "There are no tags. Use tags to organize and filter your Storybook.",
+    isIndented: false
+  };
   const groups = [
-    allTags.map((tag) => {
+    allTags.size === 0 ? [noTags] : [],
+    userEntries.sort((a2, b2) => a2[0].localeCompare(b2[0])).map(([tag, count]) => {
       const checked = selectedTags.includes(tag);
       const id = `tag-${tag}`;
       return {
         id,
         title: tag,
-        right: react_default.createElement(
-          "input",
-          {
-            type: "checkbox",
-            id,
-            name: id,
-            value: tag,
-            checked,
-            onChange: () => {
-            }
-          }
-        ),
-        onClick: /* @__PURE__ */ __name(() => toggleTag(tag), "onClick")
+        right: count,
+        input: react_default.createElement(Form.Checkbox, { checked, onChange: () => toggleTag(tag) })
+      };
+    }),
+    builtInEntries.sort((a2, b2) => a2[0].localeCompare(b2[0])).map(([tag, count]) => {
+      const checked = selectedTags.includes(tag);
+      const id = `tag-${tag}`;
+      return {
+        id,
+        title: tag,
+        right: count,
+        input: react_default.createElement(Form.Checkbox, { checked, onChange: () => toggleTag(tag) })
       };
     })
   ];
-  if (allTags.length === 0) {
-    groups.push([
-      {
-        id: "no-tags",
-        title: "There are no tags. Use tags to organize and filter your Storybook.",
-        isIndented: false
-      }
-    ]);
-  }
-  if (userTags.length === 0 && isDevelopment) {
+  if (userEntries.length === 0 && isDevelopment) {
     groups.push([
       {
         id: "tags-docs",
         title: "Learn how to add tags",
-        icon: react_default.createElement(ShareAltIcon, null),
+        icon: react_default.createElement(DocumentIcon, null),
+        right: react_default.createElement(ShareAltIcon, null),
         href: docsUrl
       }
     ]);
   }
-  return react_default.createElement(Wrapper3, null, react_default.createElement(TooltipLinkList, { links: groups }));
+  return react_default.createElement(Wrapper3, null, allTags.size > 0 && react_default.createElement(Actions3, null, selectedTags.length ? react_default.createElement(IconButton, { id: "unselect-all", onClick: () => setAllTags(false) }, react_default.createElement(CloseIcon, null), "Clear filters") : react_default.createElement(IconButton, { id: "select-all", onClick: () => setAllTags(true) }, react_default.createElement(BatchAcceptIcon, null), "Select all"), react_default.createElement(
+    IconButton,
+    {
+      id: "invert-selection",
+      disabled: selectedTags.length === 0,
+      onClick: () => setInverted(!inverted),
+      active: inverted
+    },
+    inverted ? react_default.createElement(EyeCloseIcon, null) : react_default.createElement(EyeIcon, null),
+    "Invert"
+  )), react_default.createElement(TooltipLinkList, { links: groups }));
 }, "TagsFilterPanel");
 
 // src/manager/components/sidebar/TagsFilter.tsx
 var TAGS_FILTER = "tags-filter";
-var BUILT_IN_TAGS_HIDE = /* @__PURE__ */ new Set([
-  "dev",
-  "docs-only",
-  "test-only",
-  "autodocs",
-  "test",
-  "attached-mdx",
-  "unattached-mdx"
-]);
+var BUILT_IN_TAGS_HIDE = /* @__PURE__ */ new Set(["dev", "autodocs", "test", "attached-mdx", "unattached-mdx"]);
 var Wrapper4 = styled.div({
   position: "relative"
 });
@@ -16488,23 +16515,25 @@ var TagsFilter = /* @__PURE__ */ __name(({
 }) => {
   const [selectedTags, setSelectedTags] = useState(initialSelectedTags);
   const [expanded, setExpanded] = useState(false);
+  const [inverted, setInverted] = useState(false);
   const tagsActive = selectedTags.length > 0;
   useEffect(() => {
     api.experimental_setFilter(TAGS_FILTER, (item) => {
       if (selectedTags.length === 0) {
         return true;
       }
-      return selectedTags.some((tag) => item.tags?.includes(tag));
+      const match = selectedTags.some((tag) => item.tags?.includes(tag));
+      return inverted ? !match : match;
     });
-  }, [api, selectedTags]);
+  }, [api, selectedTags, inverted]);
   const allTags = Object.values(indexJson.entries).reduce((acc, entry) => {
     entry.tags?.forEach((tag) => {
       if (!BUILT_IN_TAGS_HIDE.has(tag)) {
-        acc.add(tag);
+        acc.set(tag, (acc.get(tag) || 0) + 1);
       }
     });
     return acc;
-  }, /* @__PURE__ */ new Set());
+  }, /* @__PURE__ */ new Map());
   const toggleTag = useCallback(
     (tag) => {
       if (selectedTags.includes(tag)) {
@@ -16515,6 +16544,17 @@ var TagsFilter = /* @__PURE__ */ __name(({
     },
     [selectedTags, setSelectedTags]
   );
+  const setAllTags = useCallback(
+    (selected) => {
+      if (selected) {
+        setSelectedTags(Array.from(allTags.keys()));
+      } else {
+        setSelectedTags([]);
+        setInverted(false);
+      }
+    },
+    [allTags, setSelectedTags]
+  );
   const handleToggleExpand = useCallback(
     (event) => {
       event.preventDefault();
@@ -16525,21 +16565,23 @@ var TagsFilter = /* @__PURE__ */ __name(({
   if (allTags.size === 0 && !isDevelopment) {
     return null;
   }
-  const tags = Array.from(allTags);
-  tags.sort();
   return react_default.createElement(
     WithTooltip,
     {
       placement: "bottom",
       trigger: "click",
       onVisibleChange: setExpanded,
+      portalContainer: "#storybook-mobile-menu",
       tooltip: () => react_default.createElement(
         TagsFilterPanel,
         {
           api,
-          allTags: tags,
+          allTags,
           selectedTags,
           toggleTag,
+          setAllTags,
+          inverted,
+          setInverted,
           isDevelopment
         }
       ),
@@ -23627,7 +23669,7 @@ var Footer = styled.div(({ theme }) => ({
   fontWeight: theme.typography.weight.regular,
   fontSize: theme.typography.size.s2
 }));
-var Actions3 = styled.div({
+var Actions4 = styled.div({
   display: "flex",
   flexDirection: "row",
   alignItems: "center",
@@ -23645,7 +23687,7 @@ var StyledLink = styled(Link)(({ theme }) => ({
   }
 }));
 var AboutScreen = /* @__PURE__ */ __name(({ onNavigateToWhatsNew }) => {
-  return react_default.createElement(Container8, null, react_default.createElement(Header, null, react_default.createElement(StorybookLogo, { alt: "Storybook" })), react_default.createElement(UpgradeBlock, { onNavigateToWhatsNew }), react_default.createElement(Footer, null, react_default.createElement(Actions3, null, react_default.createElement(Button, { asChild: true }, react_default.createElement("a", { href: "https://github.com/storybookjs/storybook" }, react_default.createElement(GithubIcon, null), "GitHub")), react_default.createElement(Button, { asChild: true }, react_default.createElement("a", { href: "https://storybook.js.org/docs?ref=ui" }, react_default.createElement(DocumentIcon, { style: { display: "inline", marginRight: 5 } }), "Documentation"))), react_default.createElement("div", null, "Open source software maintained by", " ", react_default.createElement(StyledLink, { href: "https://www.chromatic.com/" }, "Chromatic"), " and the", " ", react_default.createElement(StyledLink, { href: "https://github.com/storybookjs/storybook/graphs/contributors" }, "Storybook Community"))));
+  return react_default.createElement(Container8, null, react_default.createElement(Header, null, react_default.createElement(StorybookLogo, { alt: "Storybook" })), react_default.createElement(UpgradeBlock, { onNavigateToWhatsNew }), react_default.createElement(Footer, null, react_default.createElement(Actions4, null, react_default.createElement(Button, { asChild: true }, react_default.createElement("a", { href: "https://github.com/storybookjs/storybook" }, react_default.createElement(GithubIcon, null), "GitHub")), react_default.createElement(Button, { asChild: true }, react_default.createElement("a", { href: "https://storybook.js.org/docs?ref=ui" }, react_default.createElement(DocumentIcon, { style: { display: "inline", marginRight: 5 } }), "Documentation"))), react_default.createElement("div", null, "Open source software maintained by", " ", react_default.createElement(StyledLink, { href: "https://www.chromatic.com/" }, "Chromatic"), " and the", " ", react_default.createElement(StyledLink, { href: "https://github.com/storybookjs/storybook/graphs/contributors" }, "Storybook Community"))));
 }, "AboutScreen");
 
 // src/manager/settings/AboutPage.tsx