package updates

tremorlabs · May 31, 2024 · 1c95c28 · 1c95c28
1 parent dc37ad8
commit 1c95c28
Show file tree

Hide file tree

Showing 20 changed files with 1,435 additions and 1,478 deletions.
diff --git a/package.json b/package.json
@@ -34,11 +34,11 @@
     "@react-aria/datepicker": "^3.10.1",
     "@react-stately/datepicker": "^3.9.4",
     "@remixicon/react": "^4.2.0",
-    "@storybook/addon-a11y": "^8.1.3",
-    "@storybook/theming": "^8.1.3",
+    "@storybook/addon-a11y": "^8.1.5",
+    "@storybook/theming": "^8.1.5",
     "clsx": "^2.1.1",
     "date-fns": "^3.6.0",
-    "prettier-plugin-tailwindcss": "^0.5.14",
+    "prettier-plugin-tailwindcss": "^0.6.1",
     "react": "^18.3.1",
     "react-day-picker": "^8.10.1",
     "react-dom": "^18.3.1",
@@ -47,20 +47,20 @@
     "tailwind-variants": "^0.2.1"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.4.0",
+    "@chromatic-com/storybook": "^1.5.0",
     "@playwright/test": "^1.44.1",
-    "@storybook/addon-essentials": "^8.1.3",
-    "@storybook/addon-interactions": "^8.1.3",
-    "@storybook/addon-links": "^8.1.3",
-    "@storybook/blocks": "^8.1.3",
-    "@storybook/react": "^8.1.3",
-    "@storybook/react-vite": "^8.1.3",
-    "@storybook/test": "^8.1.3",
-    "@types/node": "^20.12.12",
+    "@storybook/addon-essentials": "^8.1.5",
+    "@storybook/addon-interactions": "^8.1.5",
+    "@storybook/addon-links": "^8.1.5",
+    "@storybook/blocks": "^8.1.5",
+    "@storybook/react": "^8.1.5",
+    "@storybook/react-vite": "^8.1.5",
+    "@storybook/test": "^8.1.5",
+    "@types/node": "^20.13.0",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",
-    "@typescript-eslint/eslint-plugin": "^7.10.0",
-    "@typescript-eslint/parser": "^7.10.0",
+    "@typescript-eslint/eslint-plugin": "^7.11.0",
+    "@typescript-eslint/parser": "^7.11.0",
     "@vitejs/plugin-react": "^4.3.0",
     "autoprefixer": "^10.4.19",
     "eslint": "^8.57.0",
@@ -69,10 +69,10 @@
     "eslint-plugin-storybook": "^0.8.0",
     "postcss": "^8.4.38",
     "prettier": "3.2.5",
-    "storybook": "^8.1.3",
+    "storybook": "^8.1.5",
     "tailwindcss": "^3.4.3",
     "typescript": "^5.4.5",
-    "vite": "^5.2.11",
+    "vite": "^5.2.12",
     "vite-tsconfig-paths": "^4.3.2",
     "vitest": "^1.6.0"
   }

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/Accordion/Accordion.tsx b/src/components/Accordion/Accordion.tsx
@@ -38,7 +38,7 @@ const AccordionTrigger = React.forwardRef<
           // text color
           "text-gray-400 dark:text-gray-600",
           // disabled
-          " group-data-[disabled]:text-gray-300 group-data-[disabled]:dark:text-gray-700",
+          "group-data-[disabled]:text-gray-300 group-data-[disabled]:dark:text-gray-700",
         )}
         aria-hidden="true"
         focusable="false"

diff --git a/src/components/Accordion/accordion.stories.tsx b/src/components/Accordion/accordion.stories.tsx
@@ -88,7 +88,7 @@ export const WithIcons: Story = {
       <Accordion type="multiple" className="mt-3">
         <AccordionItem value="item-1">
           <AccordionTrigger>
-            <span className="flex items-center gap-2 ">
+            <span className="flex items-center gap-2">
               <RiCoupon3Fill className="size-4 text-blue-500" />
               Access Your Booking
             </span>
@@ -103,7 +103,7 @@ export const WithIcons: Story = {
         </AccordionItem>
         <AccordionItem value="item-2">
           <AccordionTrigger>
-            <span className="flex items-center gap-2 ">
+            <span className="flex items-center gap-2">
               <RiArrowLeftRightLine className="size-4 text-blue-500" />
               Change Flights
             </span>
@@ -141,7 +141,7 @@ export const WithIcons: Story = {
         </AccordionItem>
         <AccordionItem value="item-3">
           <AccordionTrigger>
-            <span className="flex items-center gap-2 ">
+            <span className="flex items-center gap-2">
               <RiAddCircleFill className="size-4 text-blue-500" />
               Add Special Requests
             </span>
@@ -156,7 +156,7 @@ export const WithIcons: Story = {
         </AccordionItem>
         <AccordionItem value="item-4">
           <AccordionTrigger>
-            <span className="flex items-center gap-2 ">
+            <span className="flex items-center gap-2">
               <RiCheckboxMultipleFill className="size-4 text-blue-500" />
               Check-In Online
             </span>
@@ -210,7 +210,7 @@ export const DefaultValueAndCollapsibleDisabled: Story = {
       >
         <AccordionItem value="item-1">
           <AccordionTrigger>
-            <span className="flex items-center gap-2 ">
+            <span className="flex items-center gap-2">
               <RiCoupon3Fill className="group-data-[disabled]:texdark:t-blue-200 group-data-[disabled]:t8xt-blue-200 size-4 text-blue-500" />
               Access Your Booking
             </span>
@@ -225,7 +225,7 @@ export const DefaultValueAndCollapsibleDisabled: Story = {
         </AccordionItem>
         <AccordionItem value="item-2">
           <AccordionTrigger>
-            <span className="flex items-center gap-2 ">
+            <span className="flex items-center gap-2">
               <RiArrowLeftRightLine className="size-4 text-blue-500 group-data-[disabled]:text-blue-200 dark:group-data-[disabled]:text-blue-900" />
               Change Flights
             </span>
@@ -263,7 +263,7 @@ export const DefaultValueAndCollapsibleDisabled: Story = {
         </AccordionItem>
         <AccordionItem value="item-3" disabled>
           <AccordionTrigger>
-            <span className="flex items-center gap-2 ">
+            <span className="flex items-center gap-2">
               <RiAddCircleFill className="size-4 text-blue-500 group-data-[disabled]:text-blue-200 dark:group-data-[disabled]:text-blue-900" />
               Add Special Requests
             </span>
@@ -278,7 +278,7 @@ export const DefaultValueAndCollapsibleDisabled: Story = {
         </AccordionItem>
         <AccordionItem value="item-4">
           <AccordionTrigger>
-            <span className="flex items-center gap-2 ">
+            <span className="flex items-center gap-2">
               <RiCheckboxMultipleFill className="size-4 text-blue-500 group-data-[disabled]:text-blue-200 dark:group-data-[disabled]:text-blue-900" />
               Check-In Online
             </span>

diff --git a/src/components/AreaChart/AreaChart.tsx b/src/components/AreaChart/AreaChart.tsx
@@ -261,7 +261,7 @@ const Legend = React.forwardRef<HTMLOListElement, LegendProps>((props, ref) => {
           "flex h-full",
           enableLegendSlider
             ? hasScroll?.right || hasScroll?.left
-              ? "snap-mandatory items-center  overflow-auto pl-4 pr-12 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+              ? "snap-mandatory items-center overflow-auto pl-4 pr-12 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
               : ""
             : "flex-wrap",
         )}

diff --git a/src/components/BarChart/BarChart.tsx b/src/components/BarChart/BarChart.tsx
@@ -316,7 +316,7 @@ const Legend = React.forwardRef<HTMLOListElement, LegendProps>((props, ref) => {
           "flex h-full",
           enableLegendSlider
             ? hasScroll?.right || hasScroll?.left
-              ? "snap-mandatory items-center  overflow-auto pl-4 pr-12 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+              ? "snap-mandatory items-center overflow-auto pl-4 pr-12 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
               : ""
             : "flex-wrap",
         )}

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -38,7 +38,7 @@ const buttonVariants = tv({
         // text color
         "text-gray-900 dark:text-gray-50",
         // background color
-        " bg-white dark:bg-gray-950",
+        "bg-white dark:bg-gray-950",
         //hover color
         "hover:bg-gray-50 dark:hover:bg-gray-900/60",
         // disabled

diff --git a/src/components/Callout/Callout.tsx b/src/components/Callout/Callout.tsx
@@ -13,23 +13,23 @@ const calloutVariants = tv({
         // text color
         "text-blue-900 dark:text-blue-400",
         // background color
-        "bg-blue-50 dark:bg-blue-950/70 ",
+        "bg-blue-50 dark:bg-blue-950/70",
       ],
       success: [
         // text color
         "text-emerald-900 dark:text-emerald-500",
         // background color
-        "bg-emerald-50 dark:bg-emerald-950/70 ",
+        "bg-emerald-50 dark:bg-emerald-950/70",
       ],
       error: [
         // text color
-        " text-red-900 dark:text-red-500",
+        "text-red-900 dark:text-red-500",
         // background color
         "bg-red-50 dark:bg-red-950/70",
       ],
       warning: [
         // text color
-        " text-yellow-900 dark:text-yellow-500",
+        "text-yellow-900 dark:text-yellow-500",
         // background color
         "bg-yellow-50 dark:bg-yellow-950/70",
       ],

diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -19,7 +19,7 @@ const Card = React.forwardRef<HTMLDivElement, CardProps>(
           // base
           "relative w-full rounded-md border p-6 text-left shadow-sm",
           // background color
-          " bg-white dark:bg-[#090E1A]",
+          "bg-white dark:bg-[#090E1A]",
           // border color
           "border-gray-200 dark:border-gray-900",
           className,

diff --git a/src/components/DatePicker/DatePicker.tsx b/src/components/DatePicker/DatePicker.tsx
@@ -161,7 +161,7 @@ const triggerStyles = tv({
     // base
     "peer flex w-full cursor-pointer appearance-none items-center gap-x-2 truncate rounded-md border px-3 py-2 shadow-sm outline-none transition-all sm:text-sm",
     // background color
-    "bg-white dark:bg-gray-950 ",
+    "bg-white dark:bg-gray-950",
     // border color
     "border-gray-300 dark:border-gray-800",
     // text color

diff --git a/src/components/Dialog/Dialog.tsx b/src/components/Dialog/Dialog.tsx
@@ -61,9 +61,9 @@ const DialogContent = React.forwardRef<
             // base
             "fixed left-1/2 top-1/2 z-50 w-[95vw] max-w-lg -translate-x-1/2 -translate-y-1/2 overflow-y-auto rounded-md border p-6 shadow-lg",
             // border color
-            "border-gray-200 dark:border-gray-900 ",
+            "border-gray-200 dark:border-gray-900",
             // background color
-            " bg-white dark:bg-[#090E1A]",
+            "bg-white dark:bg-[#090E1A]",
             // transition
             "data-[state=open]:animate-dialogContentShow",
             focusRing,

diff --git a/src/components/DropdownMenu/DropdownMenu.tsx b/src/components/DropdownMenu/DropdownMenu.tsx
@@ -42,7 +42,7 @@ const DropdownMenuSubMenuTrigger = React.forwardRef<
       // disabled
       "data-[disabled]:pointer-events-none data-[disabled]:text-gray-400 data-[disabled]:hover:bg-none dark:data-[disabled]:text-gray-600",
       // focus
-      "focus-visible:bg-gray-100 data-[state=open]:bg-gray-100  focus-visible:dark:bg-gray-900 data-[state=open]:dark:bg-gray-900",
+      "focus-visible:bg-gray-100 data-[state=open]:bg-gray-100 focus-visible:dark:bg-gray-900 data-[state=open]:dark:bg-gray-900",
       // hover
       "hover:bg-gray-100 hover:dark:bg-gray-900",
       //
@@ -200,7 +200,7 @@ const DropdownMenuCheckboxItem = React.forwardRef<
         // text color
         "text-gray-900 dark:text-gray-50",
         // disabled
-        "data-[disabled]:pointer-events-none  data-[disabled]:text-gray-400 data-[disabled]:hover:bg-none dark:data-[disabled]:text-gray-600",
+        "data-[disabled]:pointer-events-none data-[disabled]:text-gray-400 data-[disabled]:hover:bg-none dark:data-[disabled]:text-gray-600",
         // focus
         "focus-visible:bg-gray-100 focus-visible:dark:bg-gray-900",
         // hover
@@ -257,7 +257,7 @@ const DropdownMenuRadioItem = React.forwardRef<
       // text color
       "text-gray-900 dark:text-gray-50",
       // disabled
-      "data-[disabled]:pointer-events-none  data-[disabled]:text-gray-400 data-[disabled]:hover:bg-none dark:data-[disabled]:text-gray-600",
+      "data-[disabled]:pointer-events-none data-[disabled]:text-gray-400 data-[disabled]:hover:bg-none dark:data-[disabled]:text-gray-600",
       // focus
       "focus-visible:bg-gray-100 focus-visible:dark:bg-gray-900",
       // hover
@@ -309,7 +309,7 @@ const DropdownMenuLabel = React.forwardRef<
       // base
       "px-2 py-2 text-xs font-medium tracking-wide",
       // text color
-      " text-gray-500 dark:text-gray-500",
+      "text-gray-500 dark:text-gray-500",
       className,
     )}
     {...props}

diff --git a/src/components/Input/Input.tsx b/src/components/Input/Input.tsx
@@ -114,7 +114,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
                 // base
                 "h-fit w-fit rounded-sm outline-none transition-all",
                 // text
-                "text-gray-400  dark:text-gray-600",
+                "text-gray-400 dark:text-gray-600",
                 // hover
                 "hover:text-gray-500 hover:dark:text-gray-500",
                 focusRing,

diff --git a/src/components/Input/input.stories.tsx b/src/components/Input/input.stories.tsx
@@ -27,7 +27,7 @@ export const WithPlaceholder: Story = {
 
 export const TypePassword: Story = {
   render: () => (
-    <div className="flex flex-col gap-2 ">
+    <div className="flex flex-col gap-2">
       <Label htmlFor="password">Password</Label>
       <Input
         placeholder="Enter password"
@@ -41,7 +41,7 @@ export const TypePassword: Story = {
 
 export const TypeSearchDisabled: Story = {
   render: () => (
-    <div className="flex flex-col gap-2 ">
+    <div className="flex flex-col gap-2">
       <Label htmlFor="search">Search</Label>
       <Input
         disabled
@@ -56,7 +56,7 @@ export const TypeSearchDisabled: Story = {
 
 export const RequiredAndPattern: Story = {
   render: () => (
-    <form className="flex flex-col gap-2 ">
+    <form className="flex flex-col gap-2">
       <p>Non capitalized characters only</p>
       <Label htmlFor="secret">Secret</Label>
       <Input
@@ -76,7 +76,7 @@ export const RequiredAndPattern: Story = {
 
 export const TypeFile: Story = {
   render: () => (
-    <div className="flex flex-col gap-2 ">
+    <div className="flex flex-col gap-2">
       <Label htmlFor="upload">Search</Label>
       <Input id="upload" name="upload" type="file" />
     </div>
@@ -85,7 +85,7 @@ export const TypeFile: Story = {
 
 export const TypeNumber: Story = {
   render: () => (
-    <div className="flex flex-col gap-2 ">
+    <div className="flex flex-col gap-2">
       <Label htmlFor="number">Enter Salary</Label>
       <Input id="number" name="number" type="number" />
     </div>
@@ -94,7 +94,7 @@ export const TypeNumber: Story = {
 
 export const HasError: Story = {
   render: () => (
-    <div className="flex flex-col gap-2 ">
+    <div className="flex flex-col gap-2">
       <Label htmlFor="email">Email</Label>
       <Input
         hasError
@@ -127,7 +127,7 @@ export const Controlled: Story = {
   render: () => {
     const [search, setSearch] = React.useState("")
     return (
-      <form className="flex flex-col gap-2 ">
+      <form className="flex flex-col gap-2">
         <Label htmlFor="File">Search</Label>
         <Input
           placeholder="Enter search"

diff --git a/src/components/LineChart/LineChart.tsx b/src/components/LineChart/LineChart.tsx
@@ -260,7 +260,7 @@ const Legend = React.forwardRef<HTMLOListElement, LegendProps>((props, ref) => {
           "flex h-full",
           enableLegendSlider
             ? hasScroll?.right || hasScroll?.left
-              ? "snap-mandatory items-center  overflow-auto pl-4 pr-12 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
+              ? "snap-mandatory items-center overflow-auto pl-4 pr-12 [scrollbar-width:none] [&::-webkit-scrollbar]:hidden"
               : ""
             : "flex-wrap",
         )}

diff --git a/src/components/RadioGroup/RadioGroup.tsx b/src/components/RadioGroup/RadioGroup.tsx
@@ -63,7 +63,7 @@ const RadioGroupItem = React.forwardRef<
           // base
           "flex size-4 shrink-0 items-center justify-center rounded-full border shadow-sm",
           // border color
-          " border-gray-300 dark:border-gray-800",
+          "border-gray-300 dark:border-gray-800",
           // background color
           "bg-white dark:bg-gray-950",
           // checked

diff --git a/src/components/Select/Select.tsx b/src/components/Select/Select.tsx
@@ -186,7 +186,7 @@ const SelectGroupLabel = React.forwardRef<
       // base
       "px-3 py-2 text-xs font-medium tracking-wide",
       // text color
-      " text-gray-500 dark:text-gray-500",
+      "text-gray-500 dark:text-gray-500",
       className,
     )}
     {...props}

diff --git a/src/components/SelectNative/SelectNative.tsx b/src/components/SelectNative/SelectNative.tsx
@@ -12,7 +12,7 @@ const selectNativeStyles = tv({
     // base
     "peer w-full cursor-pointer appearance-none truncate rounded-md border py-2 pl-3 pr-7 shadow-sm outline-none transition-all sm:text-sm",
     // background color
-    "bg-white dark:bg-gray-950 ",
+    "bg-white dark:bg-gray-950",
     // border color
     "border-gray-300 dark:border-gray-800",
     // text color

diff --git a/src/components/Table/Table.tsx b/src/components/Table/Table.tsx
@@ -63,7 +63,7 @@ const TableHeaderCell = React.forwardRef<
       // base
       "border-b px-4 py-3.5 text-left text-sm font-semibold",
       // text color
-      " text-gray-900 dark:text-gray-50",
+      "text-gray-900 dark:text-gray-50",
       // border color
       "border-gray-200 dark:border-gray-800",
       className,
@@ -140,7 +140,7 @@ const TableFoot = React.forwardRef<
         // base
         "border-t text-left font-medium",
         // text color
-        " text-gray-900 dark:text-gray-50",
+        "text-gray-900 dark:text-gray-50",
         // border color
         "border-gray-200 dark:border-gray-800",
         className,

diff --git a/src/components/Toast/Toast.tsx b/src/components/Toast/Toast.tsx
@@ -114,7 +114,7 @@ const Toast = React.forwardRef<
           // base
           "flex h-fit min-h-16 w-full overflow-hidden rounded-md border shadow-lg shadow-black/5",
           // background color
-          " bg-white dark:bg-[#090E1A]",
+          "bg-white dark:bg-[#090E1A]",
           // border color
           "border-gray-200 dark:border-gray-800",
           // swipe