Add new components

.storybook/main.ts

@@ -10,14 +10,10 @@ const config: StorybookConfig = {
       directory: "../lib/components",
       titlePrefix: "Components",
     },
-    ...(publicBuild
-      ? []
-      : [
-          {
-            directory: "../lib/shadcn",
-            titlePrefix: "ShadCN",
-          },
-        ]),
+    {
+      directory: "../lib/primitives",
+      titlePrefix: "Primitives",
+    },
   ],
   staticDirs: ["../public"],
   addons: [

lib/shadcn/card.stories.tsx → lib/components/Blocks/Card/index.stories.tsx

@@ -9,7 +9,7 @@ import {
   CardFooter,
   CardHeader,
   CardTitle,
-} from "./card"
+} from "."
 
 const meta = {
   component: Card,

lib/components/Blocks/Card/index.tsx

@@ -0,0 +1 @@
+export * from "@/shadcn/card"

lib/components/Blocks/index.tsx

@@ -0,0 +1 @@
+export * from "./Card"

lib/shadcn/calendar.stories.tsx → lib/components/Forms/Calendar/index.stories.tsx

@@ -3,7 +3,7 @@ import { addDays, format } from "date-fns"
 import { useState } from "react"
 import { DateRange } from "react-day-picker"
 
-import { Calendar } from "./calendar"
+import { Calendar } from "."
 
 const meta = {
   component: Calendar,

lib/components/Forms/Calendar/index.tsx

@@ -0,0 +1 @@
+export * from "@/shadcn/calendar"

lib/shadcn/input.stories.tsx → lib/components/Forms/Input/index.stories.tsx

@@ -1,7 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react"
 
-import { Input } from "./input"
-import { Label } from "./label"
+import { Input } from "."
 
 const meta = {
   component: Input,
@@ -32,12 +31,4 @@ export const Primary: Story = {
   args: {
     placeholder: "Placeholder text here",
   },
-  render: (props) => {
-    return (
-      <div className="flex w-full flex-col gap-1.5">
-        <Label htmlFor="input">Label</Label>
-        <Input id="input" {...props} />
-      </div>
-    )
-  },
 }

lib/components/Forms/Input/index.tsx

@@ -0,0 +1 @@
+export * from "@/shadcn/input"

lib/shadcn/select.stories.tsx → lib/components/Forms/Select/index.stories.tsx

@@ -8,7 +8,7 @@ import {
   SelectLabel,
   SelectTrigger,
   SelectValue,
-} from "@/shadcn/select"
+} from "."
 
 const meta: Meta = {
   component: Select,

lib/components/Forms/Select/index.tsx

@@ -0,0 +1 @@
+export * from "@/shadcn/select"

lib/components/Forms/index.tsx

@@ -0,0 +1,3 @@
+export * from "./Calendar"
+export * from "./Input"
+export * from "./Select"

lib/components/Information/Alert/index.stories.tsx

@@ -2,8 +2,6 @@ import type { Meta, StoryObj } from "@storybook/react"
 
 import { Alert, AlertDescription, AlertTitle } from "."
 
-import { BookOpen, CircleCheck, OctagonX, TriangleAlert } from "lucide-react"
-
 const meta = {
   component: Alert,
   parameters: {
@@ -22,7 +20,6 @@ export const Destructive: Story = {
   },
   render: (props) => (
     <Alert {...props}>
-      <OctagonX size={20} />
       <AlertTitle>Critical system error</AlertTitle>
       <AlertDescription>
         System issue detected. Act immediately to prevent data loss.
@@ -37,7 +34,6 @@ export const Positive: Story = {
   },
   render: (props) => (
     <Alert {...props}>
-      <CircleCheck size={20} />
       <AlertTitle>Training completed!</AlertTitle>
       <AlertDescription>
         You successfully completed the training ‘Eat. Sleep. Command Z. Repeat’.
@@ -52,7 +48,6 @@ export const Warning: Story = {
   },
   render: (props) => (
     <Alert {...props}>
-      <TriangleAlert size={20} />
       <AlertTitle>Top up account</AlertTitle>
       <AlertDescription>
         Your account balance is below 1.000,00 €. Add money to your balance in
@@ -65,20 +60,9 @@ export const Warning: Story = {
 export const Info: Story = {
   args: {
     variant: "info",
-    children: (
-      <>
-        <BookOpen size={20} />
-        <AlertTitle>Invite your Bookkeeper</AlertTitle>
-        <AlertDescription>
-          You can now invite your Bookkeeper to centralize all types of
-          communications about employee updates in one place.
-        </AlertDescription>
-      </>
-    ),
   },
   render: (props) => (
     <Alert {...props}>
-      <BookOpen size={20} />
       <AlertTitle>Invite your Bookkeeper</AlertTitle>
       <AlertDescription>
         You can now invite your Bookkeeper to centralize all types of

lib/components/Information/Alert/index.tsx

@@ -1,8 +1,12 @@
 import { cva, type VariantProps } from "class-variance-authority"
 import * as React from "react"
 
+import { IconName, icons } from "@/lib/icons"
 import { cn } from "@/lib/utils"
 
+const variants = ["destructive", "positive", "warning", "info"] as const
+type Variants = (typeof variants)[number]
+
 const alertVariants = cva(
   "relative w-full rounded-2xl bg-secondary p-6 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-6 [&>svg]:top-6 [&>svg]:text-foreground [&>svg~*]:pl-8",
   {
@@ -15,25 +19,45 @@ const alertVariants = cva(
         warning:
           "bg-warning text-warning-foreground dark:border-warning-intermediate [&>svg]:text-warning-intermediate",
         info: "bg-info text-info-foreground dark:border-info-intermediate [&>svg]:text-info-intermediate",
-      },
+      } satisfies Record<Variants, string>,
     },
     defaultVariants: {
       variant: "info",
     },
   }
 )
 
+const variantIcons: Record<Variants, IconName> = {
+  destructive: "OctagonX",
+  positive: "CircleCheck",
+  warning: "TriangleAlert",
+  info: "BookOpen",
+}
+
 const Alert = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
->(({ className, variant, ...props }, ref) => (
-  <div
-    ref={ref}
-    role="alert"
-    className={cn(alertVariants({ variant }), className)}
-    {...props}
-  />
-))
+>(({ className, variant = "info", children, ...props }, ref) => {
+  const IconComponent = variant ? icons[variantIcons[variant]] : null
+
+  return (
+    <div
+      ref={ref}
+      role="alert"
+      className={cn(alertVariants({ variant }), className)}
+      {...props}
+    >
+      <div className="flex flex-row">
+        {IconComponent && (
+          <div className="mr-2 flex h-6 items-center">
+            <IconComponent size={20} />
+          </div>
+        )}
+        <div>{children}</div>
+      </div>
+    </div>
+  )
+})
 Alert.displayName = "Alert"
 
 const AlertTitle = React.forwardRef<
@@ -42,7 +66,7 @@ const AlertTitle = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <h5
     ref={ref}
-    className={cn("mb-1 font-medium tracking-tight", className)}
+    className={cn("mb-1 text-base font-medium tracking-tight", className)}
     {...props}
   />
 ))

lib/components/Information/index.tsx

@@ -1,2 +1,3 @@
 export * from "./Alert"
 export * from "./Avatar"
+export * from "./Badge"

lib/components/Layout/Stack/index.stories.tsx

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Placeholder } from "@/lib/storybook-utils"
+import { Stack } from "."
+
+const meta = {
+  component: Stack,
+  tags: ["autodocs"],
+  args: {
+    children: (
+      <>
+        <Placeholder>Test</Placeholder>
+        <Placeholder>Test</Placeholder>
+        <Placeholder>Test</Placeholder>
+      </>
+    ),
+  },
+} satisfies Meta<typeof Stack>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    gap: "md",
+  },
+}

lib/components/Layout/Stack/index.tsx

@@ -0,0 +1,23 @@
+import { cn } from "@/lib/utils"
+import { cva, VariantProps } from "class-variance-authority"
+import React from "react"
+
+const stackVariants = cva("flex flex-col", {
+  variants: {
+    gap: {
+      sm: "gap-4",
+      md: "gap-8",
+      lg: "gap-12",
+    },
+  },
+  defaultVariants: {
+    gap: "md",
+  },
+})
+
+export const Stack = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof stackVariants>
+>(({ className, gap, ...props }, ref) => (
+  <div className={cn(stackVariants({ gap }), className)} ref={ref} {...props} />
+))

lib/components/Layout/index.tsx

@@ -0,0 +1 @@
+export * from "./Stack"

lib/components/index.ts

@@ -1,3 +1,6 @@
 export * from "./Actions"
+export * from "./Blocks"
+export * from "./Forms"
 export * from "./Information"
+export * from "./Layout"
 export * from "./Overlays"

lib/lib/icons.tsx

@@ -0,0 +1,5 @@
+import { icons } from "lucide-react"
+
+export type IconName = keyof typeof icons
+
+export { icons }

lib/lib/one-provider.tsx

@@ -1,5 +1,17 @@
+import { useLayoutEffect } from "react"
+
 export const FactorialOneProvider: React.FC<{ children: React.ReactNode }> = ({
   children,
 }) => {
-  return <div className="font-sans">{children}</div>
+  useLayoutEffect(() => {
+    const classNames = "font-sans"
+
+    document.body.classList.add(classNames)
+
+    return () => {
+      document.body.classList.remove(classNames)
+    }
+  }, [])
+
+  return children
 }

lib/lib/storybook-utils.tsx

@@ -0,0 +1,18 @@
+import React from "react"
+import { cn } from "./utils"
+
+export const Placeholder = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, children, ...props }, ref) => (
+  <div
+    className={cn(
+      className,
+      "flex items-center justify-center border-2 border-dashed border-border p-16"
+    )}
+    ref={ref}
+    {...props}
+  >
+    <div className="w-min text-lg text-muted-foreground">{children}</div>
+  </div>
+))

lib/shadcn/badge.tsx

@@ -4,7 +4,7 @@ import * as React from "react"
 import { cn } from "@/lib/utils"
 
 const badgeVariants = cva(
-  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  "inline-flex items-center rounded-full border border-solid px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
   {
     variants: {
       variant: {

lib/shadcn/card.tsx

@@ -9,7 +9,7 @@ const Card = React.forwardRef<
   <div
     ref={ref}
     className={cn(
-      "rounded-2xl border bg-card text-card-foreground shadow-sm",
+      "rounded-2xl border border-solid border-border bg-card text-card-foreground shadow-sm",
       className
     )}
     {...props}

lib/shadcn/input.tsx

@@ -10,7 +10,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
       <input
         type={type}
         className={cn(
-          "flex h-10 w-full rounded-lg border-2 border-input bg-background px-3 py-2 text-sm ring-offset-background transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground/60 hover:border-input-hover focus-visible:border-input-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-50",
+          "flex h-10 w-full rounded-lg border-2 border-solid border-input bg-background px-3 py-2 text-sm ring-offset-background transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground/60 hover:border-input-hover focus-visible:border-input-hover focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-50",
           className
         )}
         ref={ref}

lib/shadcn/select.tsx

@@ -18,7 +18,7 @@ const SelectTrigger = React.forwardRef<
   <SelectPrimitive.Trigger
     ref={ref}
     className={cn(
-      "flex h-10 w-full items-center justify-between rounded-lg border-2 border-input bg-background px-3 py-2 text-sm ring-offset-background transition-colors placeholder:text-muted-foreground hover:border-input-hover focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus-visible:border-input-hover disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-50 [&>span]:line-clamp-1",
+      "flex h-10 w-full items-center justify-between rounded-lg border-2 border-solid border-input bg-background px-3 py-2 text-sm ring-offset-background transition-colors placeholder:text-muted-foreground hover:border-input-hover focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 focus-visible:border-input-hover disabled:cursor-not-allowed disabled:bg-muted disabled:opacity-50 [&>span]:line-clamp-1",
       className
     )}
     {...props}