Several improvements

.storybook/DocumentationTemplate.mdx

@@ -3,21 +3,7 @@ import { Controls, Meta, Primary, Stories, Title } from "@storybook/blocks"
 <Meta isTemplate />
 
 <Title />
-
-# Default implementation
-
 <Primary />
-
-## Inputs
-
-The component accepts the following inputs (props):
-
 <Controls />
 
----
-
-## Additional variations
-
-Listed below are additional variations of the component.
-
 <Stories />

.storybook/main.ts

@@ -25,5 +25,8 @@ const config: StorybookConfig = {
   docs: {
     autodocs: "tag",
   },
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
 }
 export default config

.storybook/manager.ts → .storybook/manager.tsx

@@ -4,4 +4,7 @@ import factorialOne from "./FactorialOne"
 
 addons.setConfig({
   theme: factorialOne,
+  sidebar: {
+    collapsedRoots: ["foundations", "examples", "experiments"],
+  },
 })

.storybook/preview.tsx

@@ -40,6 +40,7 @@ const preview: Preview = {
     },
     docs: {
       page: DocumentationTemplate,
+      toc: true,
     },
     actions: { argTypesRegex: "^on.*" },
     controls: {

lib/foundations/alert.stories.tsx

@@ -7,7 +7,7 @@ import { BookOpen, CircleCheck, OctagonX, TriangleAlert } from "lucide-react"
 const meta = {
   component: Alert,
   parameters: {
-    layout: "centered",
+    layout: "padded",
   },
   tags: ["autodocs"],
   args: {},
@@ -17,60 +17,73 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Destructive: Story = {
-  render: () => {
-    return (
-      <Alert variant="destructive" className="max-w-80">
-        <OctagonX size={20} />
-        <AlertTitle>Critical system error</AlertTitle>
-        <AlertDescription>
-          System issue detected. Act immediately to prevent data loss.
-        </AlertDescription>
-      </Alert>
-    )
+  args: {
+    variant: "destructive",
   },
+  render: (props) => (
+    <Alert {...props}>
+      <OctagonX size={20} />
+      <AlertTitle>Critical system error</AlertTitle>
+      <AlertDescription>
+        System issue detected. Act immediately to prevent data loss.
+      </AlertDescription>
+    </Alert>
+  ),
 }
 
 export const Positive: Story = {
-  render: () => {
-    return (
-      <Alert variant="positive" className="max-w-80">
-        <CircleCheck size={20} />
-        <AlertTitle>Training completed!</AlertTitle>
-        <AlertDescription>
-          You successfully completed the training ‘Eat. Sleep. Command Z.
-          Repeat’.
-        </AlertDescription>
-      </Alert>
-    )
+  args: {
+    variant: "positive",
   },
+  render: (props) => (
+    <Alert {...props}>
+      <CircleCheck size={20} />
+      <AlertTitle>Training completed!</AlertTitle>
+      <AlertDescription>
+        You successfully completed the training ‘Eat. Sleep. Command Z. Repeat’.
+      </AlertDescription>
+    </Alert>
+  ),
 }
 
 export const Warning: Story = {
-  render: () => {
-    return (
-      <Alert variant="warning" className="max-w-80">
-        <TriangleAlert size={20} />
-        <AlertTitle>Top up account</AlertTitle>
-        <AlertDescription>
-          Your account balance is below 1.000,00 €. Add money to your balance in
-          order to avoid failed card payments immediately.
-        </AlertDescription>
-      </Alert>
-    )
+  args: {
+    variant: "warning",
   },
+  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
+        order to avoid failed card payments immediately.
+      </AlertDescription>
+    </Alert>
+  ),
 }
 
 export const Info: Story = {
-  render: () => {
-    return (
-      <Alert variant="info" className="max-w-80">
+  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>
-      </Alert>
-    )
+      </>
+    ),
   },
+  render: (props) => (
+    <Alert {...props}>
+      <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>
+    </Alert>
+  ),
 }

lib/foundations/badge.stories.tsx

@@ -15,37 +15,42 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Default: Story = {
-  render: () => {
-    return <Badge>Home</Badge>
+  render(props) {
+    return <Badge {...props}>Home</Badge>
   },
 }
 
 export const Neutral: Story = {
-  render: () => {
-    return <Badge variant="neutral">Rejected</Badge>
+  args: {
+    variant: "neutral",
+    children: "Neutral",
   },
 }
 
 export const Destructive: Story = {
-  render: () => {
-    return <Badge variant="destructive">Rejected</Badge>
+  args: {
+    variant: "destructive",
+    children: "Destructive",
   },
 }
 
 export const Positive: Story = {
-  render: () => {
-    return <Badge variant="positive">Completed</Badge>
+  args: {
+    variant: "positive",
+    children: "Positive",
   },
 }
 
 export const Warning: Story = {
-  render: () => {
-    return <Badge variant="warning">Review</Badge>
+  args: {
+    variant: "warning",
+    children: "Warning",
   },
 }
 
 export const Info: Story = {
-  render: () => {
-    return <Badge variant="info">In progress</Badge>
+  args: {
+    variant: "info",
+    children: "Info",
   },
 }

lib/foundations/button.stories.ts

@@ -1,28 +1,14 @@
 import type { Meta, StoryObj } from "@storybook/react"
 import { fn } from "@storybook/test"
 
-import { Button, sizes, variants } from "./button"
+import { Button } from "./button"
 
 const meta = {
   component: Button,
   parameters: {
     layout: "centered",
   },
   tags: ["autodocs"],
-  argTypes: {
-    variant: {
-      control: {
-        type: "select",
-      },
-      options: [...variants],
-    },
-    size: {
-      control: {
-        type: "select",
-      },
-      options: [...sizes],
-    },
-  },
   args: {
     variant: "default",
     size: "default",

lib/foundations/calendar.stories.tsx

@@ -21,11 +21,15 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Single: Story = {
-  render: () => {
+  args: {
+    mode: "single",
+  },
+  render(props) {
     const [selectedDay, setSelectedDay] = useState<Date>()
 
     return (
       <Calendar
+        {...props}
         mode="single"
         selected={selectedDay}
         onSelect={setSelectedDay}
@@ -35,7 +39,11 @@ export const Single: Story = {
 }
 
 export const Multiple: Story = {
-  render: () => {
+  args: {
+    mode: "multiple",
+    min: 1,
+  },
+  render(props) {
     const initialDays: Date[] = []
     const [days, setDays] = useState<Date[] | undefined>(initialDays)
 
@@ -52,6 +60,7 @@ export const Multiple: Story = {
 
     return (
       <Calendar
+        {...props}
         mode="multiple"
         min={1}
         selected={days}
@@ -63,7 +72,7 @@ export const Multiple: Story = {
 }
 
 export const Range: Story = {
-  render: () => {
+  render(props) {
     const pastMonth = new Date(2024, 10, 15)
     const defaultSelected: DateRange = {
       from: pastMonth,
@@ -94,6 +103,7 @@ export const Range: Story = {
 
     return (
       <Calendar
+        {...props}
         id="test"
         mode="range"
         defaultMonth={pastMonth}

lib/foundations/card.stories.tsx

@@ -24,19 +24,19 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Basic: Story = {
-  render: () => {
+  render(props) {
     return (
-      <Card>
+      <Card {...props}>
         <CardContent>This is a basic card</CardContent>
       </Card>
     )
   },
 }
 
 export const WithTitle: Story = {
-  render: () => {
+  render(props) {
     return (
-      <Card>
+      <Card {...props}>
         <CardHeader>
           <CardTitle>Card title</CardTitle>
           <CardDescription>Description of the title</CardDescription>
@@ -48,9 +48,9 @@ export const WithTitle: Story = {
 }
 
 export const WithFooter: Story = {
-  render: () => {
+  render(props) {
     return (
-      <Card>
+      <Card {...props}>
         <CardContent>This is a card with a footer</CardContent>
         <CardFooter>
           <Button className="w-full">Clock in</Button>

lib/foundations/dialog.stories.tsx

@@ -32,9 +32,9 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Basic: Story = {
-  render: () => {
+  render(props) {
     return (
-      <Dialog>
+      <Dialog {...props}>
         <DialogTrigger asChild>
           <Button variant="secondary">Edit Profile</Button>
         </DialogTrigger>
@@ -76,9 +76,9 @@ export const Basic: Story = {
 }
 
 export const WithCloseButton: Story = {
-  render: () => {
+  render(props) {
     return (
-      <Dialog>
+      <Dialog {...props}>
         <DialogTrigger asChild>
           <Button variant="secondary">Share</Button>
         </DialogTrigger>

lib/foundations/select.stories.tsx

@@ -26,9 +26,9 @@ export default meta
 type Story = StoryObj<typeof meta>
 
 export const Basic: Story = {
-  render: () => {
+  render(props) {
     return (
-      <Select>
+      <Select {...props}>
         <SelectTrigger className="w-[180px]">
           <SelectValue placeholder="Theme" />
         </SelectTrigger>
@@ -43,9 +43,9 @@ export const Basic: Story = {
 }
 
 export const Scrollable: Story = {
-  render: () => {
+  render(props) {
     return (
-      <Select>
+      <Select {...props}>
         <SelectTrigger className="w-[280px]">
           <SelectValue placeholder="Select a timezone" />
         </SelectTrigger>