@hyphen/hyphen-components 5.3.0 → 5.4.1

package/dist/lib/tokens.d.ts

@@ -1,5 +1,5 @@
 import { BorderRadiusSize, Breakpoint, BreakpointSizeWithBase } from '../types';
-export declare const ICON_NAMES: ("add" | "alarm-disable" | "alarm" | "analytics" | "app-window" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "circle" | "clipboard" | "cloud" | "code" | "command-line" | "contact" | "copy-document" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "filter" | "flag" | "folder" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "key" | "launch-app" | "lightbulb" | "link" | "list" | "lock" | "logo-deploy" | "logo-env" | "logo-link" | "logo-netinfo" | "logo-toggle" | "logout" | "mail" | "menu" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "qr-code" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "search" | "send" | "settings" | "skip" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out")[];
+export declare const ICON_NAMES: ("add" | "alarm-disable" | "alarm" | "analytics" | "app-window" | "arrow-down" | "arrow-left" | "arrow-right" | "arrow-up" | "arrows-maximize" | "at" | "ban" | "block" | "blocks" | "book-open" | "c-add" | "c-check" | "c-delete" | "c-in-progress" | "c-info" | "c-question" | "c-remove" | "c-user" | "c-warning" | "calendar-create" | "calendar" | "camera" | "caret-down" | "caret-left" | "caret-right" | "caret-sm-down" | "caret-sm-left" | "caret-sm-right" | "caret-sm-up" | "caret-up-down" | "caret-up" | "chart-bar" | "chart-line" | "chat" | "check" | "checkbox-btn-checked" | "checkbox-btn-indeterminate" | "checkbox-btn" | "circle-filled" | "circle" | "clipboard" | "cloud" | "code" | "command-line" | "contact" | "copy-document" | "dashboard" | "database" | "dock-left" | "document" | "dots" | "download" | "electricity-bolt" | "exclamation-mark" | "eye-slash" | "eye" | "filter" | "flag" | "folder" | "gear" | "grab" | "hash-mark" | "heart-o" | "heart" | "home" | "info" | "integrations" | "key" | "launch-app" | "lightbulb" | "link" | "list" | "lock" | "logo-deploy" | "logo-env" | "logo-link" | "logo-netinfo" | "logo-toggle" | "logout" | "mail" | "menu" | "minus" | "moon" | "paperclip" | "path-intersect" | "pause" | "pc" | "pencil" | "phone" | "photo" | "play" | "qr-code" | "radio-btn-checked" | "radio-btn-unchecked" | "refresh" | "remove" | "rewind" | "search" | "send" | "settings" | "skip" | "stack" | "star-o" | "star" | "stopwatch" | "subtract" | "sun" | "t-warning" | "tag" | "terminal" | "time-alarm" | "time-clock" | "trash" | "unlocked" | "upload" | "user-create" | "user" | "users" | "wifi-off" | "wifi" | "zoom-in" | "zoom-out")[];
 export declare const BORDER_RADIUS_OPTIONS: BorderRadiusSize[];
 export declare const BORDER_SIZE_OPTIONS: ("0" | "sm" | "md" | "lg")[];
 export declare const BREAKPOINT_OPTIONS: BreakpointSizeWithBase[];

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hyphen/hyphen-components",
-  "version": "5.3.0",
+  "version": "5.4.1",
   "license": "MIT",
   "author": {
     "name": "@hyphen"
@@ -62,7 +62,7 @@
   ],
   "dependencies": {
     "@emotion/react": "^11.14.0",
-    "@hyphen/hyphen-design-tokens": "^4.34.0",
+    "@hyphen/hyphen-design-tokens": "^4.35.0",
     "@popperjs/core": "^2.11.8",
     "@radix-ui/react-collapsible": "^1.1.11",
     "@radix-ui/react-dropdown-menu": "^2.1.15",

package/src/components/Sidebar/Sidebar.stories.tsx

@@ -158,24 +158,20 @@ const data = {
 
 // type Story = StoryObj<typeof Sidebar>;
 
-function getCookieValue(name: string): string | null {
-  const match = document.cookie.match(
-    new RegExp(
-      `(?:^|; )${name.replace(/([.$?*|{}()[\]\\/+^])/g, '\\$1')}=([^;]*)`
-    )
-  );
-  return match ? decodeURIComponent(match[1]) : null;
-}
-
 export const SidebarExample = () => {
   const [activeTeam, setActiveTeam] = React.useState(data.teams[0]);
   const isMobile = useIsMobile();
 
-  const startOpen = getCookieValue('sidebar_expanded') || 'true';
+  const STORAGE_KEY = 'sidebar_expanded_storybook';
+
+  const startOpen = localStorage.getItem(STORAGE_KEY) || 'true';
 
   return (
     <ResponsiveProvider>
-      <SidebarProvider defaultOpen={startOpen === 'true'}>
+      <SidebarProvider
+        storageKey={STORAGE_KEY}
+        defaultOpen={startOpen === 'true'}
+      >
         <Sidebar side="left" collapsible="icon">
           <NavHeader activeTeam={activeTeam} setActiveTeam={setActiveTeam} />
           <SidebarContent>
@@ -197,14 +193,18 @@ export const SidebarExample = () => {
 };
 
 export const SidebarCollapsed = () => {
+  const STORAGE_KEY = 'sidebar_collapsed';
+
   const [activeTeam, setActiveTeam] = React.useState(data.teams[0]);
   const isMobile = useIsMobile();
-
-  const startOpen = getCookieValue('false');
+  const startOpen = localStorage.getItem(STORAGE_KEY) || 'false';
 
   return (
     <ResponsiveProvider>
-      <SidebarProvider defaultOpen={startOpen === 'true'}>
+      <SidebarProvider
+        storageKey={STORAGE_KEY}
+        defaultOpen={startOpen === 'true'}
+      >
         <Sidebar side="left" collapsible="icon">
           <NavHeader activeTeam={activeTeam} setActiveTeam={setActiveTeam} />
           <SidebarContent>
@@ -326,10 +326,10 @@ const NavMain = ({ items }: { items: NavItem[] }) => {
     <SidebarGroup>
       <SidebarGroupLabel>Platform</SidebarGroupLabel>
       <SidebarMenu>
-        {items.map((item, idx) =>
+        {items.map((item) =>
           item.items && state === 'expanded' ? (
             <Collapsible
-              key={`${item.title}-${idx}`}
+              key={`${item.title}`}
               className="group/collapsible"
               asChild
             >
@@ -364,7 +364,7 @@ const NavMain = ({ items }: { items: NavItem[] }) => {
               </SidebarMenuItem>
             </Collapsible>
           ) : item.items && state === 'collapsed' ? (
-            <DropdownMenu>
+            <DropdownMenu key={`${item.title}`}>
               <DropdownMenuTrigger asChild>
                 <SidebarMenuButton tooltip={item.title}>
                   <Icon

package/src/components/Sidebar/Sidebar.tsx

@@ -21,8 +21,6 @@ import {
   TooltipTrigger,
 } from '../Tooltip/Tooltip';
 
-const SIDEBAR_COOKIE_NAME = 'sidebar_expanded';
-const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
 const SIDEBAR_WIDTH = '16rem';
 const SIDEBAR_WIDTH_ICON = '44px';
 const SIDEBAR_KEYBOARD_SHORTCUT = '[';
@@ -52,6 +50,7 @@ const SidebarProvider = forwardRef<
   React.ComponentProps<'div'> & {
     defaultOpen?: boolean;
     open?: boolean;
+    storageKey?: string;
     onOpenChange?: (open: boolean) => void;
   }
 >(
@@ -59,6 +58,7 @@ const SidebarProvider = forwardRef<
     {
       defaultOpen = true,
       open: openProp,
+      storageKey = 'sidebar_expanded',
       onOpenChange: setOpenProp,
       className,
       style,
@@ -96,8 +96,7 @@ const SidebarProvider = forwardRef<
             _setOpen(newOpenState);
           }
 
-          // Set cookie only if state changes
-          document.cookie = `${SIDEBAR_COOKIE_NAME}=${newOpenState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+          localStorage.setItem(storageKey, `${newOpenState}`);
         }
       },
       [setOpenProp, open]