chore: add badge to subitems in AppLayout

sikka-software · Jul 18, 2024 · 315c6f4 · 315c6f4
1 parent 45d7f28
commit 315c6f4
Show file tree

Hide file tree

Showing 9 changed files with 59 additions and 16 deletions.
diff --git a/apps/docs/CHANGELOG.md b/apps/docs/CHANGELOG.md
@@ -1,5 +1,12 @@
 # hawa-docs
 
+## 0.0.95
+
+### Patch Changes
+
+- Updated dependencies
+  - @sikka/hawa@0.42.10
+
 ## 0.0.94
 
 ### Patch Changes

diff --git a/apps/docs/package.json b/apps/docs/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hawa-docs",
-  "version": "0.0.94",
+  "version": "0.0.95",
   "private": true,
   "scripts": {
     "dev": "next dev -p 3001",

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,11 @@
 # @sikka/hawa
 
+## 0.42.10
+
+### Patch Changes
+
+- `Sidebar`: Allow adding badge to menu items that have subitems and subitems directly.
+
 ## 0.42.9
 
 ### Patch Changes

diff --git a/packages/components/layout/sidebar/Sidebar.tsx b/packages/components/layout/sidebar/Sidebar.tsx
@@ -85,6 +85,7 @@ type SubItem = {
   value: string;
   label: string;
   slug?: string;
+  badge?: { label: string; color: ChipColors };
   icon?: any;
   onMouseDown?: (e: React.MouseEvent) => void;
   onClick?: (e: React.MouseEvent) => void;
@@ -203,6 +204,9 @@ const SidebarItem: React.FC<{
               )}
             >
               {item.label}
+              {item.badge && (
+                <Chip label={item.badge.label} color="hyper" size="small" />
+              )}
             </span>
           </div>
         </AccordionTrigger>
@@ -239,6 +243,13 @@ const SidebarItem: React.FC<{
                 >
                   {subitem.icon && subitem.icon}
                   {subitem.label}
+                  {subitem.badge && (
+                    <Chip
+                      label={subitem.badge.label}
+                      color="hyper"
+                      size="small"
+                    />
+                  )}
                 </LinkComponent>
               ))}
             </div>

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.42.9",
+  "version": "0.42.10",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",

diff --git a/packages/storybook/CHANGELOG.md b/packages/storybook/CHANGELOG.md
@@ -1,5 +1,18 @@
 # hawa-storybook
 
+## 0.26.117
+
+### Patch Changes
+
+- Fix broken `useDarkMode` hook in `AppLayout` story
+
+## 0.26.116
+
+### Patch Changes
+
+- Updated dependencies
+  - @sikka/hawa@0.42.10
+
 ## 0.26.115
 
 ### Patch Changes

diff --git a/packages/storybook/package.json b/packages/storybook/package.json
@@ -1,6 +1,6 @@
 {
   "name": "hawa-storybook",
-  "version": "0.26.115",
+  "version": "0.26.117",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",

diff --git a/packages/storybook/stories/LayoutStories/AppLayout.stories.tsx b/packages/storybook/stories/LayoutStories/AppLayout.stories.tsx
@@ -11,7 +11,7 @@ import { AppLayoutStory } from "./AppLayoutStory";
 
 const meta = {
   title: "Layout/App Layout",
-  component: AppLayout
+  component: AppLayout,
 } satisfies Meta<typeof AppLayout>;
 
 export default meta;
@@ -23,7 +23,9 @@ export const Default: Story = {
     const locale = globals.globals?.locale === "ar" ? "ar" : "en";
     const direction = locale === "ar" ? "rtl" : "ltr";
     setLocale(locale);
-    return <AppLayoutStory {...args} direction={direction} />;
+
+    console.log("dark sis ", dark);
+    return <AppLayoutStory {...args} direction={direction} isDark={dark} />;
   },
   args: {
     topBar: true,
@@ -37,9 +39,9 @@ export const Default: Story = {
       <Button size="smallIcon" variant={"light"}>
         <Settings className="hawa-icon" />
       </Button>
-    )
+    ),
   },
-  argTypes: { onLogoClick: { action: "onLogoClick" } }
+  argTypes: { onLogoClick: { action: "onLogoClick" } },
 };
 export const CustomHeader: Story = {
   render: (args: any, globals: any) => {
@@ -51,7 +53,7 @@ export const CustomHeader: Story = {
   },
   args: {
     header: (
-      <div className=" hawa-flex hawa-h-full hawa-w-full hawa-flex-col hawa-items-center hawa-justify-center">
+      <div className="hawa-flex hawa-h-full hawa-w-full hawa-flex-col hawa-items-center hawa-justify-center">
         <div className="hawa-flex hawa-flex-row hawa-items-center hawa-justify-start hawa-gap-2">
           <div className="hawa-flex hawa-h-8 hawa-w-8 hawa-items-center hawa-justify-center hawa-rounded-full hawa-bg-gray-200">
             <User2 className="hawa-icon" />
@@ -74,7 +76,7 @@ export const CustomHeader: Story = {
       <Button size="smallIcon" variant={"light"}>
         <Settings className="hawa-icon" />
       </Button>
-    )
+    ),
   },
-  argTypes: { onLogoClick: { action: "onLogoClick" } }
+  argTypes: { onLogoClick: { action: "onLogoClick" } },
 };
diff --git a/packages/storybook/stories/LayoutStories/AppLayoutStory.tsx b/packages/storybook/stories/LayoutStories/AppLayoutStory.tsx
@@ -16,16 +16,17 @@ import { AppLayout } from "@sikka/hawa/layout";
 import { t } from "../../translations/i18n";
 
 export const AppLayoutStory = (args: any) => {
-  const dark = useDarkMode();
+  // const dark = useDarkMode();
   const [selectedPage, setSelectedPage] = useState("/home");
   const [count, updateCount] = useState(0);
   const [isDrawerOpen, setIsDrawerOpen] = useState(false);
+
   const logoLink =
     args.direction === "rtl"
-      ? dark
+      ? args.isDark
         ? "https://sikka-images.s3.ap-southeast-1.amazonaws.com/hawa/hawa-bilingual-wordmark-rtl-white.png"
         : "https://sikka-images.s3.ap-southeast-1.amazonaws.com/hawa/hawa-bilingual-wordmark-rtl.png"
-      : dark
+      : args.isDark
         ? "https://sikka-images.s3.ap-southeast-1.amazonaws.com/hawa/hawa-bilingual-wordmark-ltr-white.png"
         : "https://sikka-images.s3.ap-southeast-1.amazonaws.com/hawa/hawa-bilingual-wordmark-ltr.png";
 
@@ -82,6 +83,9 @@ export const AppLayoutStory = (args: any) => {
               onClick: () => setSelectedPage("/new-item3"),
             },
             {
+              badge: {
+                label: "Soon?",
+              },
               label: t("sub-item") + " 4",
               icon: <FolderDot className="hawa-icon" />,
               value: "/file-item",
@@ -107,11 +111,11 @@ export const AppLayoutStory = (args: any) => {
       ]}
     >
       <div
-        className=" hawa-h-full  hawa-p-4"
+        className="hawa-h-full hawa-p-4"
         onClick={() => updateCount(count + 1)}
       >
-        <div className="hawa-m-0 hawa-flex hawa-h-full hawa-w-full hawa-flex-col hawa-items-center hawa-justify-center hawa-overflow-auto hawa-rounded-lg hawa-border-2 hawa-border-dashed hawa-border-black hawa-bg-blue-50">
-          <span className=" hawa-font-bold hawa-capitalize hawa-text-gray-400">
+        <div className="hawa-m-0 hawa-flex hawa-h-full hawa-w-full hawa-flex-col hawa-items-center hawa-justify-center hawa-overflow-auto hawa-rounded-lg hawa-border-2 hawa-border-dashed hawa-border-black hawa-bg-blue-50 dark:hawa-bg-blue-950">
+          <span className="hawa-font-bold hawa-capitalize hawa-text-gray-400">
             App Content
           </span>
           <span className="hawa-font-bold hawa-text-[20rem] hawa-select-none">