feat: add variants to Tabs

SIKKA-6365[closed]
sikka-software · Feb 10, 2024 · 23e4fd8 · 23e4fd8
1 parent 2e4b2c1
commit 23e4fd8
Show file tree

Hide file tree

Showing 10 changed files with 170 additions and 38 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,7 +1,11 @@
 {
   "todo-tree.tree.showBadges": true,
-  "css.customData": [
-    ".vscode/tailwind.json"
-  ],
+  "css.customData": [".vscode/tailwind.json"],
+  "workbench.colorCustomizations": {
+    "titleBar.activeBackground": "#007fff",
+    "titleBar.activeForeground": "#ffffff",
+    "titleBar.inactiveBackground": "#007fff",
+    "titleBar.inactiveForeground": "#ffffff"
+  },
   "typescript.tsdk": "node_modules\\typescript\\lib"
 }
diff --git a/apps/docs/CHANGELOG.md b/apps/docs/CHANGELOG.md
@@ -1,5 +1,12 @@
 # hawa-docs
 
+## 0.0.23
+
+### Patch Changes
+
+- Updated dependencies
+  - @sikka/hawa@0.28.0
+
 ## 0.0.22
 
 ### Patch Changes

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

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -1,5 +1,12 @@
 # @sikka/hawa
 
+## 0.28.0
+
+### Minor Changes
+
+- Adds new variants (`underlined` and `underlined_tabs`) to `Tabs`
+- Initial integration of 'tailwind-variants' package
+
 ## 0.27.24
 
 ### Patch Changes

diff --git a/packages/components/elements/tabs/Tabs.tsx b/packages/components/elements/tabs/Tabs.tsx
@@ -1,54 +1,137 @@
 import * as React from "react";
 
-import { OrientationType } from "@_types/commonTypes";
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-
 import { cn } from "@util/index";
+import { VariantProps, cva } from "class-variance-authority";
+import { tv } from "tailwind-variants";
+
+import { OrientationType } from "@_types/commonTypes";
+
 import { Chip, ChipTypes } from "../chip/Chip";
 
+const tabsListVariant = tv({
+  base: "",
+  variants: {
+    variant: {
+      default:
+        "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
+      underlined:
+        "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded  hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
+      underlined_tabs:
+        "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-text-muted-foreground"
+    },
+    orientation: {
+      horizontal: "",
+      vertical: ""
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "underlined_tabs",
+      orientation: "vertical",
+      class: "hawa-border-e-2 hawa-border-e-primary"
+    },
+    {
+      variant: "underlined_tabs",
+      orientation: "horizontal",
+      class: "hawa-border-b-2 hawa-border-b-primary"
+    }
+  ],
+  defaultVariants: {
+    variant: "default",
+    orientation: "horizontal"
+  }
+});
+
+const tabsTriggerVariant = tv({
+  base: "",
+  variants: {
+    variant: {
+      default:
+        "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm  dark:hawa-border-primary/10",
+      underlined:
+        "hawa-inline-flex  hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-rounded-none hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50",
+      underlined_tabs:
+        "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded   hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 hawa-bg-primary/10 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground  dark:hawa-border-primary/10"
+    },
+    orientation: {
+      horizontal: "",
+      vertical: ""
+    }
+  },
+  compoundVariants: [
+    {
+      variant: "underlined",
+      orientation: "horizontal",
+      class:
+        "data-[state=active]:hawa-border-b-primary hawa-border-b hawa-border-b-2"
+    },
+    {
+      variant: "underlined",
+      orientation: "vertical",
+      class:
+        "data-[state=active]:hawa-border-e-primary hawa-border-e hawa-border-e-2"
+    },
+    {
+      variant: "underlined_tabs",
+      orientation: "horizontal",
+      class: "hawa-rounded-b-none"
+    },
+    {
+      variant: "underlined_tabs",
+      orientation: "vertical",
+      class: "hawa-rounded-e-none"
+    }
+  ],
+  defaultVariants: {
+    variant: "default",
+    orientation: "horizontal"
+  }
+});
+
+type TabsVariants = "default" | "underlined" | "underlined_tabs";
+
 const TabsContext = React.createContext<{
   orientation?: OrientationType;
-}>({ orientation: "vertical" });
+  variant?: TabsVariants;
+}>({ orientation: "horizontal", variant: "default" });
 
 type TabsRootProps = React.ComponentPropsWithoutRef<
   typeof TabsPrimitive.Root
-> & { orientation?: "vertical" | "horizontal" };
+> & {
+  variant?: TabsVariants;
+};
 
 const Tabs = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Root>,
   TabsRootProps
->(
-  (
-    { className, orientation = "vertical" as OrientationType, ...props },
-    ref
-  ) => (
-    <TabsPrimitive.Root
-      ref={ref}
-      className={cn(
-        "hawa-flex hawa-gap-2",
-        orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
-        className
-      )}
-      {...props}
-    >
-      <TabsContext.Provider value={{ orientation }}>
-        {props.children}
-      </TabsContext.Provider>
-    </TabsPrimitive.Root>
-  )
-);
+>(({ className, orientation, variant = "default", ...props }, ref) => (
+  <TabsPrimitive.Root
+    ref={ref}
+    className={cn(
+      "hawa-flex hawa-gap-2",
+      orientation === "vertical" ? "hawa-flex-row" : "hawa-flex-col",
+      className
+    )}
+    {...props}
+  >
+    <TabsContext.Provider value={{ orientation, variant }}>
+      {props.children}
+    </TabsContext.Provider>
+  </TabsPrimitive.Root>
+));
 Tabs.displayName = TabsPrimitive.Root.displayName;
 
 const TabsList = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.List>,
   React.ComponentPropsWithoutRef<typeof TabsPrimitive.List>
 >(({ className, ...props }, ref) => {
-  const { orientation } = React.useContext(TabsContext);
+  const { orientation, variant } = React.useContext(TabsContext);
   return (
     <TabsPrimitive.List
       ref={ref}
       className={cn(
-        "hawa-flex hawa-w-fit hawa-flex-wrap hawa-items-center hawa-justify-start hawa-gap-1 hawa-rounded hawa-border hawa-bg-muted hawa-p-1 hawa-text-muted-foreground  dark:hawa-border-primary/10",
+        tabsListVariant({ variant, orientation }),
         orientation === "vertical" ? "hawa-flex-col" : "hawa-flex-row",
         className
       )}
@@ -69,13 +152,11 @@ const TabsTrigger = React.forwardRef<
   React.ElementRef<typeof TabsPrimitive.Trigger>,
   TabsTriggerProps
 >(({ className, chipProps, ...props }, ref) => {
+  const { orientation, variant } = React.useContext(TabsContext);
   return (
     <TabsPrimitive.Trigger
       ref={ref}
-      className={cn(
-        "hawa-inline-flex hawa-w-full hawa-flex-1 hawa-select-none hawa-items-center hawa-justify-center hawa-gap-2 hawa-whitespace-nowrap hawa-rounded hawa-border hawa-px-3 hawa-py-1.5 hawa-text-sm hawa-font-medium hawa-ring-offset-background hawa-transition-all focus-visible:hawa-outline-none focus-visible:hawa-ring-2 focus-visible:hawa-ring-ring focus-visible:hawa-ring-offset-2 disabled:hawa-pointer-events-none disabled:hawa-opacity-50 data-[state=active]:hawa-bg-primary data-[state=active]:hawa-text-primary-foreground data-[state=active]:hawa-shadow-sm  dark:hawa-border-primary/10",
-        className
-      )}
+      className={cn(tabsTriggerVariant({ variant, orientation }), className)}
       {...props}
     >
       {props.children}

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@sikka/hawa",
-  "version": "0.27.24",
+  "version": "0.28.0",
   "description": "Modern UI Kit made with Tailwind",
   "author": {
     "name": "Sikka Software",
@@ -91,6 +91,7 @@
     "react-select": "^5.8.0",
     "signature_pad": "^4.1.7",
     "tailwind-merge": "^2.2.1",
+    "tailwind-variants": "^0.1.20",
     "trim-canvas": "^0.1.2",
     "zod": "^3.22.4"
   },

diff --git a/packages/storybook/CHANGELOG.md b/packages/storybook/CHANGELOG.md
@@ -1,5 +1,12 @@
 # hawa-storybook
 
+## 0.26.40
+
+### Patch Changes
+
+- Updated dependencies
+  - @sikka/hawa@0.28.0
+
 ## 0.26.39
 
 ### Patch Changes

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

diff --git a/packages/storybook/stories/ElementsStories/Tabs.stories.tsx b/packages/storybook/stories/ElementsStories/Tabs.stories.tsx
@@ -8,6 +8,7 @@ import {
   TabsList,
   TabsTrigger
 } from "@sikka/hawa/elements/tabs";
+import { OrientationType } from "@sikka/hawa/types/commonTypes";
 
 import { setLocale, t } from "../../translations/i18n";
 
@@ -25,7 +26,7 @@ export const Default: Story = {
     setLocale(locale);
 
     return (
-      <Tabs defaultValue="account" dir={direction}>
+      <Tabs variant={args.variant} defaultValue="account" dir={direction}>
         <TabsList className="hawa-w-full">
           <TabsTrigger value="account">{t("account")}</TabsTrigger>
           <TabsTrigger value="password">{t("password")}</TabsTrigger>
@@ -70,6 +71,9 @@ export const Default: Story = {
         </TabsContent>
       </Tabs>
     );
+  },
+  args: {
+    variant: "default"
   }
 };
 export const Vertical: Story = {
@@ -79,7 +83,12 @@ export const Vertical: Story = {
     const direction = locale === "ar" ? "rtl" : "ltr";
 
     return (
-      <Tabs defaultValue="account" orientation="vertical" dir={direction}>
+      <Tabs
+        variant={args.variant}
+        defaultValue="account"
+        orientation="vertical"
+        dir={direction}
+      >
         <TabsList>
           <TabsTrigger value="account">{t("account")}</TabsTrigger>
           <TabsTrigger value="password">{t("password")}</TabsTrigger>
@@ -114,5 +123,8 @@ export const Vertical: Story = {
         </TabsContent>
       </Tabs>
     );
+  },
+  args: {
+    variant: "default"
   }
 };
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml