gbs-add-block 0.0.77 → 0.0.80

package/README.md

@@ -1,4 +1,4 @@
-# GBS Building Blocks 2.0 (v0.0.77)
+# GBS Building Blocks 2.0 (v0.0.80)
 
 Latest and upgraded version of GBS building blocks with headless UI and removed dependencies.
 
@@ -6,10 +6,10 @@ Latest and upgraded version of GBS building blocks with headless UI and removed
 
 For detailed documentation on usage and props, Please visit: [Building Block Documentation v2.0](https://blackmax-designs.gitbook.io/building-block-v2.0)
 
-## What's New 🎉 (Ver 0.0.77)
+## What's New 🎉 (Ver 0.0.80)
 
 - Updated for bug fixes.
-- New Component Card Added
+- New Component Card & SideBar Added
 
 ## Authors
 

package/index.cjs

@@ -10,6 +10,7 @@ const CONFIG = {
   components: [
     "Card",
     "Select",
+    "SideBar",
     "Grid",
     "MultiSelect",
     "Button",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "gbs-add-block",
-  "version": "0.0.77",
+  "version": "0.0.80",
   "description": "React Component Library",
   "type": "module",
   "files": [

package/source/components/modal/index.tsx

@@ -13,7 +13,7 @@ import { ModalProps } from "./types";
 
 const defaultClasses = {
   modal:
-    "fixed z-10 overflow-y-auto inset-0 flex items-center justify-center bg-[#2b2426bd]",
+    "fixed z-50 overflow-y-auto inset-0 flex items-center justify-center bg-[#2b2426bd]",
   modalContent: "bg-white m-10 md:w-[80vh] rounded-xl relative",
   modalTitle:
     "p-4 text-lg leading-6 font-medium text-gray-900 flex justify-between items-center",
@@ -137,5 +137,3 @@ export const Modal = memo(
 );
 
 Modal.displayName = "Modal";
-
-export default Modal;

package/source/components/multiselect/index.tsx

@@ -113,7 +113,7 @@ const MultiSelect = forwardRef<MultiSelectHandle, MultiSelectProps>(
     return (
       <div className="relative w-full" ref={selectRef}>
         <div
-          className={`relative border w-full flex items-center px-4 py-2 rounded-lg ${
+          className={`relative border border-gary-300 w-full flex items-center px-4 py-2 rounded-lg ${
             error && "border-red-500"
           }`}
         >

package/source/components/select/index.tsx

@@ -186,7 +186,7 @@ const Select = forwardRef<SelectHandle, SelectProps>((props, ref) => {
             </div>
           )}
           {filteredItems.length > 0 ? (
-            filteredItems.map(({ value, label }, index) => (
+            filteredItems.map(({ value, label }, index: number) => (
               <button
                 key={value}
                 ref={(el: any) => (itemRefs.current[index] = el)}

package/source/components/sidebar/components/MenuItem.tsx

@@ -0,0 +1,81 @@
+import { MenuItem, IconComponent } from "../type";
+
+type MenuItemProps = {
+  item: MenuItem;
+  iconMap: Record<string, IconComponent>;
+  onToggle: () => void;
+};
+
+export const MenuItemComponent = ({
+  item,
+  iconMap,
+  onToggle,
+}: MenuItemProps) => {
+  const IconComponent = iconMap[item.icon] || (() => null);
+
+  return (
+    <li>
+      <a
+        href={item.path}
+        onClick={
+          item.expandable
+            ? (e) => {
+                e.preventDefault();
+                onToggle();
+              }
+            : undefined
+        }
+        className={`flex items-center py-2 px-3 rounded-md text-sm ${
+          item.active
+            ? "bg-gray-100 text-black font-medium"
+            : "text-gray-700 hover:bg-gray-50"
+        }`}
+      >
+        <span className="mr-3">
+          <IconComponent />
+        </span>
+        <span className="flex-grow">{item.name}</span>
+        {item.badge && (
+          <span className="bg-black text-white text-xs px-2 py-0.5 rounded-full">
+            {item.badge}
+          </span>
+        )}
+        {item.expandable && (
+          <svg
+            className={`h-4 w-4 transform ${item.expanded ? "rotate-180" : ""}`}
+            fill="none"
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+          >
+            <path
+              strokeLinecap="round"
+              strokeLinejoin="round"
+              strokeWidth={2}
+              d="M19 9l-7 7-7-7"
+            />
+          </svg>
+        )}
+      </a>
+      {item.expandable && item.expanded && (
+        <ul className="pl-10 mt-1 space-y-1">
+          <li>
+            <a
+              href="#"
+              className="block py-1 text-sm text-gray-600 hover:text-teal-600"
+            >
+              Submenu Item 1
+            </a>
+          </li>
+          <li>
+            <a
+              href="#"
+              className="block py-1 text-sm text-gray-600 hover:text-teal-600"
+            >
+              Submenu Item 2
+            </a>
+          </li>
+        </ul>
+      )}
+    </li>
+  );
+};

package/source/components/sidebar/components/MenuSection.tsx

@@ -0,0 +1,34 @@
+import { MenuSection as MenuSectionType, IconComponent } from "../type";
+import { MenuItemComponent } from "./MenuItem";
+
+type MenuSectionProps = {
+  section: MenuSectionType;
+  sectionIndex: number;
+  iconMap: Record<string, IconComponent>;
+  toggleItem: (sectionIndex: number, itemId: number) => void;
+};
+
+export const MenuSection = ({
+  section,
+  sectionIndex,
+  iconMap,
+  toggleItem,
+}: MenuSectionProps) => {
+  return (
+    <div className="mb-6">
+      <div className="text-xs font-medium text-gray-400 mb-2">
+        {section.title}
+      </div>
+      <ul className="space-y-1">
+        {section.items.map((item) => (
+          <MenuItemComponent
+            key={item.id}
+            item={item}
+            iconMap={iconMap}
+            onToggle={() => toggleItem(sectionIndex, item.id)}
+          />
+        ))}
+      </ul>
+    </div>
+  );
+};

package/source/components/sidebar/components/SidebarFooter.tsx

@@ -0,0 +1,66 @@
+import { MenuItem, IconComponent } from "../type";
+
+type SidebarFooterProps = {
+  footerItems?: MenuItem[];
+  iconMap: Record<string, IconComponent>;
+  toggleProMode: () => void;
+};
+
+export const SidebarFooter = ({
+  footerItems,
+  iconMap,
+  toggleProMode,
+}: SidebarFooterProps) => {
+  if (!footerItems) return null;
+  if (!iconMap) return null;
+
+  return (
+    <div className="border-t border-gray-200">
+      <ul className="px-4 py-2 space-y-1">
+        {footerItems?.map((item) => {
+          const IconComponent = iconMap[item.icon] || (() => null);
+
+          if (item.toggle) {
+            return (
+              <li
+                key={item.id}
+                className="flex items-center py-2 px-3 text-sm text-gray-700"
+              >
+                <span className="mr-3">
+                  <IconComponent />
+                </span>
+                <span className="flex-grow">{item.name}</span>
+                <button
+                  onClick={toggleProMode}
+                  className={`w-10 h-5 flex items-center rounded-full p-1 ${
+                    item.active ? "bg-black" : "bg-gray-300"
+                  }`}
+                >
+                  <span
+                    className={`bg-white w-4 h-4 rounded-full shadow-md transform transition-transform ${
+                      item.active ? "translate-x-5" : ""
+                    }`}
+                  />
+                </button>
+              </li>
+            );
+          }
+
+          return (
+            <li key={item.id}>
+              <a
+                href={item.path}
+                className="flex items-center py-2 px-3 rounded-md text-sm text-gray-700 hover:bg-gray-50"
+              >
+                <span className="mr-3">
+                  <IconComponent />
+                </span>
+                <span>{item?.name}</span>
+              </a>
+            </li>
+          );
+        })}
+      </ul>
+    </div>
+  );
+};

package/source/components/sidebar/components/SidebarLogo.tsx

@@ -0,0 +1,24 @@
+import { MenuData } from "../type";
+
+type SidebarLogoProps = {
+  logo: MenuData["logo"];
+};
+
+export const SidebarLogo = ({ logo }: SidebarLogoProps) => {
+  if (!logo) return null;
+
+  return (
+    <div className="p-4 flex items-center">
+      <div className="flex-shrink-0 mr-2">
+        <div className="h-6 w-6 bg-black text-white rounded flex items-center justify-center">
+          <img
+            src={logo?.logoUrl}
+            alt={logo?.name}
+            className="h-4 w-4 text-white"
+          />
+        </div>
+      </div>
+      <span className="text-gray-800 font-semibold text-lg">{logo?.name}</span>
+    </div>
+  );
+};

package/source/components/sidebar/components/SidebarMenu.tsx

@@ -0,0 +1,28 @@
+import { IconComponent, MenuSection } from "../type";
+import { MenuSection as MenuSectionComponent } from "./MenuSection";
+
+type SidebarMenuProps = {
+  sections?: MenuSection[];
+  iconMap: Record<string, IconComponent>;
+  toggleItem: (sectionIndex: number, itemId: number) => void;
+};
+
+export const SidebarMenu = ({
+  sections,
+  iconMap,
+  toggleItem,
+}: SidebarMenuProps) => {
+  return (
+    <div className="flex-grow overflow-y-auto px-4 py-2">
+      {sections?.map((section, sectionIndex) => (
+        <MenuSectionComponent
+          key={section.title}
+          section={section}
+          sectionIndex={sectionIndex}
+          iconMap={iconMap}
+          toggleItem={toggleItem}
+        />
+      ))}
+    </div>
+  );
+};

package/source/components/sidebar/components/UserProfile.tsx

@@ -0,0 +1,31 @@
+import { MenuData } from "../type";
+
+type UserProfileProps = {
+  profile: MenuData["profile"];
+};
+
+export const UserProfile = ({ profile }: UserProfileProps) => {
+  if (!profile) return null;
+
+  return (
+    <div className="border-t border-gray-200 px-4 py-3 flex flex-col gap-2">
+      <div className="flex">
+        <div className="w-8 h-8 rounded-full bg-orange-100 text-orange-700 flex items-center justify-center mr-3">
+          <span className="text-xs font-medium">
+            {profile?.name
+              .split(" ")
+              .map((n) => n[0])
+              .join("")}
+          </span>
+        </div>
+        <div className="flex-grow">
+          <div className="text-sm font-medium text-gray-700">
+            {profile?.name}
+          </div>
+          <div className="text-xs text-gray-400">{profile?.email}</div>
+        </div>
+      </div>
+      <div className="text-xs text-gray-400">© 2024 Sequence Inc.</div>
+    </div>
+  );
+};

package/source/components/sidebar/hooks/useSidebarState.ts

@@ -0,0 +1,38 @@
+import { useState } from "react";
+import { MenuData } from "../type";
+
+export const useSidebarState = (menuData: MenuData) => {
+  const [sidebarData, setSidebarData] = useState<MenuData>(menuData);
+
+  const toggleItem = (sectionIndex: number, itemId: number): void => {
+    const newData = { ...sidebarData };
+
+    const section = newData.sections?.[sectionIndex];
+    if (!section) return;
+
+    const itemIndex = section.items.findIndex((item) => item.id === itemId);
+    if (itemIndex === -1) return;
+
+    if (section.items[itemIndex].expandable) {
+      section.items[itemIndex].expanded = !section.items[itemIndex].expanded;
+      setSidebarData({ ...newData });
+    }
+  };
+
+  const toggleProMode = (): void => {
+    const newData = { ...sidebarData };
+    if (!newData.footer) return;
+
+    const proModeIndex = newData.footer.findIndex((item) => item.toggle);
+    if (proModeIndex === -1) return;
+
+    newData.footer[proModeIndex].active = !newData.footer[proModeIndex].active;
+    setSidebarData({ ...newData });
+  };
+
+  return {
+    sidebarData,
+    toggleItem,
+    toggleProMode,
+  };
+};

package/source/components/sidebar/index.tsx

@@ -0,0 +1,27 @@
+import { SidebarProps } from "./type";
+import { useSidebarState } from "./hooks/useSidebarState";
+import { SidebarLogo } from "./components/SidebarLogo";
+import { SidebarMenu } from "./components/SidebarMenu";
+import { SidebarFooter } from "./components/SidebarFooter";
+import { UserProfile } from "./components/UserProfile";
+
+export function Sidebar({ menuData, iconMap }: SidebarProps) {
+  const { sidebarData, toggleItem, toggleProMode } = useSidebarState(menuData);
+
+  return (
+    <div className="hidden md:flex flex-col h-screen bg-white w-64 border-r border-gray-200">
+      <SidebarLogo logo={sidebarData.logo} />
+      <SidebarMenu
+        sections={sidebarData.sections}
+        iconMap={iconMap}
+        toggleItem={toggleItem}
+      />
+      <SidebarFooter
+        footerItems={sidebarData.footer}
+        iconMap={iconMap}
+        toggleProMode={toggleProMode}
+      />
+      <UserProfile profile={sidebarData.profile} />
+    </div>
+  );
+}

package/source/components/sidebar/type.ts

@@ -0,0 +1,37 @@
+export type IconComponent = React.FC;
+
+export type MenuItem = {
+  id: number;
+  name: string;
+  icon: string;
+  path: string;
+  active?: boolean;
+  expandable?: boolean;
+  expanded?: boolean;
+  badge?: string;
+  toggle?: boolean;
+};
+
+export type MenuSection = {
+  title: string;
+  items: MenuItem[];
+};
+
+export type MenuData = {
+  logo?: {
+    name: string;
+    logoUrl: string;
+  };
+  sections?: MenuSection[];
+  footer?: MenuItem[];
+  profile?: {
+    name: string;
+    email: string;
+    avatarUrl: string;
+  };
+};
+
+export type SidebarProps = {
+  menuData: MenuData;
+  iconMap: Record<string, IconComponent>;
+};

package/source/components/skeleton/index.tsx

@@ -20,7 +20,7 @@ interface SkeletonProps {
   keyframes?: string;
 }
 
-const Skeleton: React.FC<SkeletonProps> = memo(
+export const Skeleton: React.FC<SkeletonProps> = memo(
   ({
     type = "text",
     lines = 1,
@@ -93,5 +93,3 @@ const Skeleton: React.FC<SkeletonProps> = memo(
 );
 
 Skeleton.displayName = "Skeleton";
-
-export default Skeleton;