docs: Vibe3 sidebar

packages/core/.storybook/manager-head.html

@@ -7,37 +7,131 @@
 <script src="https://use.fontawesome.com/660238b999.js"></script>
 <style>
   body {
-    font-family: "Roboto", sans-serif;
-    background: #f0f3ff !important;
+    font-family: "Figtree", sans-serif;
+    background: #f9f9f9 !important;
     font-size: 14px;
   }
 
+  /* Sections style */
+  #storybook-explorer-menu .sidebar-item:not([data-parent-id]),
+  #storybook-explorer-menu .sidebar-item:not([data-parent-id]) a,
+  #storybook-explorer-menu .sidebar-item:not([data-parent-id]) button {
+    font-family: "Figtree", sans-serif;
+    font-size: 16px;
+    line-height: 16px;
+    font-weight: 500;
+  }
+
+  /* Sidebar spacings */
+  #storybook-explorer-menu #foundations {
+    margin-top: 24px;
+  }
+
+  /* Items style */
+  #storybook-explorer-menu a,
+  #storybook-explorer-menu button {
+    font-family: "Figtree", sans-serif;
+    font-size: 14px;
+    line-height: 16px;
+    font-weight: 500;
+    color: var(--sb-secondary-text-color);
+    margin-left: 5px;
+  }
+  #storybook-explorer-menu [data-item-id]:focus {
+    background: none;
+  }
+  #storybook-explorer-menu [data-item-id]:hover {
+    background-color: var(--sb-primary-background-hover-color);
+  }
+
+  /* Items spacings */
+  #storybook-explorer-menu a,
+  #storybook-explorer-menu button {
+    padding-top: 6px;
+    padding-bottom: 6px;
+  }
+
+  /* Icons color */
   #storybook-explorer-menu svg {
+    color: var(--sb-secondary-text-color);
+  }
+
+  /* Items hover style */
+  #storybook-explorer-menu [data-item-id] {
+    margin: 0 8px;
+    border-radius: 8px;
+  }
+
+  /* Selected items style */
+  #storybook-explorer-menu [data-selected="true"],
+  #storybook-explorer-menu [data-selected="true"]:hover {
+    background: none;
+  }
+  #storybook-explorer-menu [data-selected="true"] a,
+  #storybook-explorer-menu [data-selected="true"] a svg {
     color: #5034ff;
   }
-  #storybook-explorer-menu button[aria-expanded="true"],
-  #storybook-explorer-menu button:focus,
-  #storybook-explorer-menu a[data-selected]:hover {
-    background-color: rgba(80, 52, 255, 0.1);
+
+  /* Removes node-type icons */
+  #storybook-explorer-menu .sidebar-item:not([data-parent-id]) > a > div > svg,
+  #storybook-explorer-menu .sidebar-item[data-parent-id="foundations"] > a > div > svg,
+  #storybook-explorer-menu .sidebar-item:not([data-nodetype="story"], [data-nodetype="document"]) > a > div > svg,
+  #storybook-explorer-menu .sidebar-item:not([data-parent-id]) > div > svg,
+  #storybook-explorer-menu .sidebar-item:not([data-nodetype="story"], [data-nodetype="document"]) > div > svg {
+    display: none;
   }
 
-  #storybook-explorer-menu a[data-selected="true"],
-  #storybook-explorer-menu a[data-selected="true"]:hover {
-    background-color: #5034ff;
-    color: #f0f3ff;
+  /* Removed items arrow icon */
+  #storybook-explorer-menu .sidebar-item:not([data-parent-id]) > a > div > span,
+  #storybook-explorer-menu .sidebar-item[data-parent-id="foundations"] > a > div > span,
+  #storybook-explorer-menu .sidebar-item:not([data-nodetype="story"], [data-nodetype="document"]) > a > div > span,
+  #storybook-explorer-menu .sidebar-item:not([data-parent-id]) > div > span,
+  #storybook-explorer-menu .sidebar-item:not([data-nodetype="story"], [data-nodetype="document"]) > div > span:empty {
+    visibility: hidden;
+    margin-left: 9px;
+    margin-right: 9px;
   }
 
-  #storybook-explorer-menu a[data-selected="true"] svg {
-    color: #f0f3ff;
+  #storybook-explorer-menu .sidebar-item:not([data-parent-id]):hover > a > div > span,
+  #storybook-explorer-menu .sidebar-item[data-parent-id="foundations"]:hover > a > div > span,
+  #storybook-explorer-menu
+    .sidebar-item:not([data-nodetype="story"], [data-nodetype="document"]):hover
+    > a
+    > div
+    > span,
+  #storybook-explorer-menu .sidebar-item:not([data-parent-id]):hover > div > span,
+  #storybook-explorer-menu .sidebar-item:not([data-nodetype="story"], [data-nodetype="document"]):hover > div > span {
+    visibility: visible;
   }
 
-  .os-content button:hover {
-    background-color: rgba(80, 52, 255, 0.1);
-    color: #5034ff;
+  /* Fixes items spacings */
+  #storybook-explorer-menu button[data-item-id] {
+    width: calc(100% - 16px);
   }
 
-  .os-content button:hover svg {
-    color: #5034ff;
+  /* Adds a margin between the sidebar sections */
+  [data-parent-id]:has(+ :not([data-parent-id])) {
+    margin-bottom: 16px !important;
+  }
+
+  /* Search field */
+  .sidebar-container .search-field {
+    margin-left: 8px;
+    margin-right: 8px;
+    margin-top: 22px !important;
+    margin-bottom: 32px;
+  }
+  .sidebar-container .sidebar-header {
+    margin-top: 2px !important;
+    margin-left: 12px !important;
+  }
+  #storybook-explorer-searchfield::placeholder {
+    color: #32333861;
+  }
+
+  /* Removes content<->sidebar border */
+  div[role="main"] > div {
+    box-shadow: none !important;
   }
 
   /* https://github.com/storybookjs/storybook/issues/25094 */

packages/core/.storybook/manager.jsx

@@ -28,7 +28,8 @@ addons.setConfig({
     },
     filters: {
       patterns: filterStory
-    }
+    },
+    showRoots: false
   }
 });
 

packages/core/.storybook/preview.tsx

@@ -76,7 +76,6 @@ const preview: Preview = {
         ComponentName: ComponentNameDecorator,
         h2: SectionName,
         h3: Title,
-        li: AnchorListItem,
         p: Paragraph,
         AlphaWarning,
         DeprecatedWarning,
@@ -104,15 +103,13 @@ const preview: Preview = {
           "Playground",
           "Changelog",
           "Migration Guide",
-          "Internal",
+          "Contributing",
           "Foundations",
-          "Buttons",
-          "Inputs",
-          "Data display",
-          "Media",
-          "Popover",
-          "Pickers",
-          "*",
+          "Components",
+          "Layout",
+          "Text",
+          "Theming",
+          "Technical Patterns",
           "Accessibility",
           "Hooks"
         ]

packages/core/src/components/Accordion/Accordion/__stories__/Accordion.stories.tsx

@@ -40,7 +40,7 @@ const accordionTemplate = (args: AccordionProps) => {
 };
 
 export default {
-  title: "Data display/Accordion",
+  title: "Components/Accordion",
   component: Accordion,
 
   subcomponents: {

packages/core/src/components/AlertBanner/__stories__/AlertBanner.mdx

@@ -92,7 +92,7 @@ There are five types of alert banners: primary, positive, negative, warning and
         description: (
           <>
             Don’t use banners for notifying a user of an action they have taken. Instead, provide visual feedback with a{" "}
-            <StorybookLink page="Feedback/Toast">Toast.</StorybookLink>
+            <StorybookLink page="Components/Toast">Toast.</StorybookLink>
           </>
         )
       }

packages/core/src/components/AlertBanner/__stories__/AlertBanner.stories.helpers.tsx

@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipWhenToUse = () => (
   <Tip title="When to use?">
     Alert banners should be reserved only for high-signal, system-level alert messages. For in-app notifications use a{" "}
-    <StorybookLink page="Feedback/Toast" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/Toast" size={StorybookLink.sizes.SMALL}>
       Toast.
     </StorybookLink>
   </Tip>

packages/core/src/components/AlertBanner/__stories__/AlertBanner.stories.tsx

@@ -21,7 +21,7 @@ const alertBannerTemplate = (args: AlertBannerProps) => {
 };
 
 export default {
-  title: "Feedback/AlertBanner",
+  title: "Components/AlertBanner",
   component: AlertBanner,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators

packages/core/src/components/AttentionBox/__stories__/AttentionBox.mdx

@@ -121,7 +121,7 @@ There are five types of attention boxes: Primary, success, danger, warning and d
           <>
             Don’t use when a message applies at a system level, does not apply to a specific piece of content, or needs
             to alert all users. On those cases, use{" "}
-            <StorybookLink page="Feedback/AlertBanner">Alert banner.</StorybookLink>
+            <StorybookLink page="Components/AlertBanner">Alert banner.</StorybookLink>
           </>
         )
       }

packages/core/src/components/AttentionBox/__stories__/AttentionBox.stories.helpers.tsx

@@ -4,7 +4,7 @@ import { Tip, StorybookLink } from "vibe-storybook-components";
 export const TipCheckYourself = () => (
   <Tip title="Check yourself">
     If the information about a component isn’t critical for the user, use a{" "}
-    <StorybookLink page="Popover/Tooltip" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/Tooltip" size={StorybookLink.sizes.SMALL}>
       Tooltip
     </StorybookLink>{" "}
     instead.

packages/core/src/components/AttentionBox/__stories__/AttentionBox.stories.tsx

@@ -23,7 +23,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
 const attentionBoxTemplate = createComponentTemplate(AttentionBox);
 
 export default {
-  title: "Feedback/AttentionBox",
+  title: "Components/AttentionBox",
   component: AttentionBox,
   subcomponents: {
     AttentionBoxLink

packages/core/src/components/Avatar/__stories__/Avatar.mdx

@@ -148,7 +148,7 @@ Use to fire actions on avatar click event.
 
 ### Multiple avatars
 
-To group multiple Avatars together, use the <StorybookLink page="Media/Avatar/AvatarGroup">AvatarGroup</StorybookLink> component.
+To group multiple Avatars together, use the <StorybookLink page="Components/AvatarGroup">AvatarGroup</StorybookLink> component.
 
 <Canvas of={AvatarStories.MultipleAvatars} />
 

packages/core/src/components/Avatar/__stories__/Avatar.stories.helpers.tsx

@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipMultipleAvatarsTogether = () => (
   <Tip title="Mutiple avatars togethers?">
     If you want to stack multiple avatars together, check out{" "}
-    <StorybookLink page="Media/Avatar/AvatarGroup" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/AvatarGroup" size={StorybookLink.sizes.SMALL}>
       AvatarGroup
     </StorybookLink>{" "}
     component

packages/core/src/components/Avatar/__stories__/Avatar.stories.tsx

@@ -17,7 +17,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
 const avatarTemplate = createComponentTemplate(Avatar);
 
 export default {
-  title: "Media/Avatar/Avatar",
+  title: "Components/Avatar",
   component: Avatar,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators

packages/core/src/components/AvatarGroup/__stories__/AvatarGroup.mdx

@@ -35,12 +35,12 @@ import { AvatarGroup } from "@vibe/core";
 <UsageGuidelines
   guidelines={[
     <>
-      Use <StorybookLink page="Popover/Tooltip">tooltip</StorybookLink> component while hovering on the counter when you
-      need only to display the content
+      Use <StorybookLink page="Components/Tooltip">tooltip</StorybookLink> component while hovering on the counter when
+      you need only to display the content
     </>,
     <>
       If clickable and navigable list is required on counter, use{" "}
-      <StorybookLink page="Navigation/Menu/Menu">Menu</StorybookLink> component
+      <StorybookLink page="Components/Menu/Menu">Menu</StorybookLink> component
     </>
   ]}
 />
@@ -61,7 +61,7 @@ You can use Light or Dark counter color to maintain visual hierarchy.
 
 ### Clickable vs. Hover
 
-If avatars are clickable, they will be displayed via <StorybookLink page="Navigation/Menu/Menu">Menu</StorybookLink> and user will be able to navigate each additional item.
+If avatars are clickable, they will be displayed via <StorybookLink page="Components/Menu/Menu">Menu</StorybookLink> and user will be able to navigate each additional item.
 Otherwise, avatars will be displayed in a Tooltip with no item's navigation.
 
 <Canvas of={AvatarGroupStories.HoverVsClickable} />

packages/core/src/components/AvatarGroup/__stories__/AvatarGroup.stories.tsx

@@ -22,7 +22,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
 });
 
 export default {
-  title: "Media/Avatar/AvatarGroup",
+  title: "Components/AvatarGroup",
   component: AvatarGroup,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators,

packages/core/src/components/Badge/__stories__/Badge.stories.tsx

@@ -17,7 +17,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
 const badgeTemplate = createComponentTemplate(Badge);
 
 export default {
-  title: "Feedback/Badge",
+  title: "Components/Badge",
   component: Badge,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators

packages/core/src/components/BreadcrumbsBar/BreadcrumbItem/__stories__/BreadcrumbItem.stories.tsx

@@ -14,7 +14,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
 const breadcrumbItemTemplate = createComponentTemplate(BreadcrumbItem);
 
 export default {
-  title: "Navigation/BreadcrumbsBar/BreadcrumbItem",
+  title: "Components/BreadcrumbsBar/BreadcrumbItem",
   component: BreadcrumbItem,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators

packages/core/src/components/BreadcrumbsBar/__stories__/BreadcrumbsBar.stories.helpers.tsx

@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipCheckYourself = () => (
   <Tip title="Check yourself">
     If you are taking users through a multistep process, use the{" "}
-    <StorybookLink page="Navigation/MultiStepIndicator" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/MultiStepIndicator" size={StorybookLink.sizes.SMALL}>
       MultiStepIndicator
     </StorybookLink>{" "}
     component instead.

packages/core/src/components/BreadcrumbsBar/__stories__/BreadcrumbsBar.stories.tsx

@@ -24,7 +24,7 @@ const breadcrumbsBarTemplate = (args: BreadcrumbBarProps) => {
 };
 
 export default {
-  title: "Navigation/BreadcrumbsBar/BreadcrumbsBar",
+  title: "Components/BreadcrumbsBar/BreadcrumbsBar",
   component: BreadcrumbsBar,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators

packages/core/src/components/Button/__stories__/Button.stories.helpers.tsx

@@ -4,7 +4,7 @@ import { StorybookLink, Tip } from "vibe-storybook-components";
 export const TipIconButton = () => (
   <Tip>
     If you need to use icon as button with no text, check out{" "}
-    <StorybookLink page="Buttons/IconButton" size={StorybookLink.sizes.SMALL}>
+    <StorybookLink page="Components/IconButton" size={StorybookLink.sizes.SMALL}>
       IconButton
     </StorybookLink>{" "}
     component

packages/core/src/components/Button/__stories__/Button.stories.tsx

@@ -17,7 +17,7 @@ const metaSettings = createStoryMetaSettingsDecorator({
 });
 
 export default {
-  title: "Buttons/Button",
+  title: "Components/Button",
   component: Button,
   argTypes: metaSettings.argTypes,
   decorators: metaSettings.decorators