Chore/update storybook part I

.storybook/main.ts

@@ -4,7 +4,7 @@ import path from "path";
 const config: StorybookConfig = {
   stories: [
     "../components/**/*.stories.@(js|jsx|mjs|ts|tsx)",
-    "../app/**/*.stories.@(js|jsx|mjs|ts|tsx)",
+    "../docs/*.stories.mdx",
   ],
   addons: [
     "@storybook/addon-links",
@@ -13,6 +13,7 @@ const config: StorybookConfig = {
     "@storybook/addon-a11y",
     "@storybook/addon-designs",
   ],
+  staticDirs: ["../public", "../docs/assets"],
   webpackFinal: async (config) => {
     if (config && config.resolve && config.resolve.alias) {
       config.resolve.alias = {

.storybook/manager.ts

@@ -6,7 +6,6 @@ const theme = create({
 
   // Brand assets
   brandTitle: "NomadHair",
-  // TODO: Replace with real url.
   brandUrl: "https://nomadhair.co/",
   brandImage:
     "https://res.cloudinary.com/dtsdpcbcv/image/upload/v1712891768/logo-light-lg_pmi0xn.svg",

.storybook/preview.tsx

@@ -48,6 +48,18 @@ const preview: Preview = {
         ...MINIMAL_VIEWPORTS,
       },
     },
+    options: {
+      storySort: {
+        method: "",
+        order: [
+          "Getting Started",
+          "Style Guide",
+          "Atoms",
+          "Molecules",
+          "Organisms",
+        ],
+      },
+    },
   },
 };
 

app/(protected)/my-appointments/components/appointmentDateTimePicker/appointmentDateTimePicker.tsx

@@ -1,6 +1,6 @@
 "use client";
 
-import { Calendar } from "@/components/atoms/calendar";
+import { Calendar } from "@/components/molecules/calendar";
 import React, { useState } from "react";
 import useSWR, { mutate } from "swr";
 import AppointmentTimeslots from "./appointmentTimeslots";

components/atoms/avatar/avatar.stories.tsx

@@ -1,6 +1,9 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { Avatar, AvatarImage, AvatarFallback } from "./avatar";
 
+/**
+ * Avatar component is used to represent a user, and display the profile picture, initials or fallback icon.
+ */
 const meta: Meta<typeof Avatar> = {
   title: "Atoms/Avatar",
   component: Avatar,

components/atoms/avatar/avatar.tsx

@@ -6,7 +6,7 @@ import { cva, type VariantProps } from "class-variance-authority";
 
 import { cn } from "@/lib/utils";
 
-const avatarVariatnts = cva(
+const avatarVariants = cva(
   "relative flex shrink-0 overflow-hidden rounded-full",
   {
     variants: {
@@ -24,15 +24,15 @@ const avatarVariatnts = cva(
 
 export interface AvatarProps
   extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>,
-    VariantProps<typeof avatarVariatnts> {}
+    VariantProps<typeof avatarVariants> {}
 
 const Avatar = React.forwardRef<
   React.ElementRef<typeof AvatarPrimitive.Root>,
   AvatarProps
 >(({ className, size, ...props }, ref) => (
   <AvatarPrimitive.Root
     ref={ref}
-    className={cn(avatarVariatnts({ size }), className)}
+    className={cn(avatarVariants({ size }), className)}
     {...props}
   />
 ));

components/atoms/button/button.stories.tsx

@@ -1,6 +1,11 @@
 import { Meta, StoryObj } from "@storybook/react";
 import { Button } from "./button";
-import { PlusIcon, icons } from "lucide-react";
+import { PlusIcon } from "lucide-react";
+
+/**
+ * Button allows users to take action, and make choices, with a single step.
+ * The component can be used as native `<button>` element or can embed `<a>` to redirect user to new page.
+ */
 
 const meta: Meta<typeof Button> = {
   title: "Atoms/Button",
@@ -20,7 +25,7 @@ const meta: Meta<typeof Button> = {
   },
   argTypes: {
     intent: {
-      options: ["primary", "secondary", "tertiary", "danger"],
+      options: ["primary", "secondary", "danger"],
       control: { type: "radio" },
     },
     variant: {

components/atoms/button/button.tsx

@@ -11,7 +11,6 @@ const buttonVariants = cva(
       intent: {
         primary: "bg-primary-100 text-white hover:bg-primary-100/90",
         secondary: "bg-secondary-100 text-neutral-90 hover:bg-secondary-100/90",
-        tertiary: "bg-tertiary-100 text-neutral-90 hover:bg-tertiary-100/90",
         danger: "bg-danger-100 text-white hover:bg-danger-100/90",
       },
       variant: {
@@ -40,11 +39,6 @@ const buttonVariants = cva(
         variant: ["outline", "ghost"],
         className: "text-secondary-100 hover:bg-secondary-100/5",
       },
-      {
-        intent: "tertiary",
-        variant: ["outline", "ghost"],
-        className: "text-tertiary-100 hover:bg-tertiary-100/5",
-      },
       {
         intent: "danger",
         variant: ["outline", "ghost"],
@@ -60,11 +54,6 @@ const buttonVariants = cva(
         variant: "link",
         className: "text-secondary-100",
       },
-      {
-        intent: "tertiary",
-        variant: "link",
-        className: "text-tertiary-100",
-      },
       {
         intent: "danger",
         variant: "link",

components/atoms/skeleton/skeleton.stories.tsx

@@ -12,18 +12,12 @@ type Story = StoryObj<typeof Skeleton>;
 
 export const Default: Story = {
   render: () => (
-    <>
-      <Card>
-        <div className="flex w-full items-center gap-4">
-          <Skeleton className="h-10 w-10 rounded-full" />
-          <Skeleton className="h-8 w-20 flex-grow" />
-        </div>
-        <CardContent className="flex flex-col gap-2">
-          <Skeleton className="h-6 w-full " />
-          <Skeleton className="h-6 w-full " />
-          <Skeleton className="h-6 w-full " />
-        </CardContent>
-      </Card>
-    </>
+    <div className="flex w-full items-center gap-4">
+      <Skeleton className="h-10 w-10 rounded-full" />
+      <div>
+        <Skeleton className="mb-2 h-4 w-32 flex-grow" />
+        <Skeleton className="h-4 w-32 flex-grow" />
+      </div>
+    </div>
   ),
 };

components/atoms/calendar/calendar.stories.tsx → components/molecules/calendar/calendar.stories.tsx

@@ -3,7 +3,7 @@ import { Calendar } from "./calendar";
 import { useState } from "react";
 
 const meta: Meta<typeof Calendar> = {
-  title: "Atoms/Calendar",
+  title: "Molecules/Calendar",
   component: Calendar,
   parameters: {
     layout: "centered",

components/atoms/calendar/calendar.tsx → components/molecules/calendar/calendar.tsx

@@ -5,7 +5,7 @@ import { ChevronLeftIcon, ChevronRightIcon } from "@radix-ui/react-icons";
 import { DayPicker } from "react-day-picker";
 
 import { cn } from "@/lib/utils";
-import { buttonVariants } from "../button";
+import { buttonVariants } from "../../atoms/button";
 
 export type CalendarProps = React.ComponentProps<typeof DayPicker>;
 

components/molecules/card/card.stories.tsx

@@ -9,23 +9,14 @@ const meta: Meta<typeof Card> = {
   parameters: {
     layout: "centered",
   },
-  args: {
-    intent: "neutral",
-  },
-  argTypes: {
-    intent: {
-      options: ["primary", "secondary", "tertiary", "neutral"],
-      control: { type: "radio" },
-    },
-  },
 };
 
 export default meta;
 type Story = StoryObj<typeof Card>;
 
 export const Default: Story = {
-  render: ({ intent }) => (
-    <Card className="w-96" intent={intent}>
+  render: () => (
+    <Card className="w-96">
       <CardContent>
         “Lorem ipsum dolor sit amet, consec tetur adi piscing elit. Praesent
         tellus leo, vesti bulum a ipsum sed, suscipit sodales ex. Vestibulum id
@@ -36,8 +27,8 @@ export const Default: Story = {
 };
 
 export const WithHeader: Story = {
-  render: ({ intent }) => (
-    <Card className="w-96" intent={intent}>
+  render: () => (
+    <Card className="w-96">
       <CardHeader headingLevel={2} title="Title" subheader="subheading" />
       <CardContent>
         “Lorem ipsum dolor sit amet, consec tetur adi piscing elit. Praesent
@@ -49,8 +40,8 @@ export const WithHeader: Story = {
 };
 
 export const WithAvatar: Story = {
-  render: ({ intent }) => (
-    <Card className="w-96" intent={intent}>
+  render: () => (
+    <Card className="w-96">
       <CardHeader
         avatar={
           <Avatar>
@@ -71,8 +62,8 @@ export const WithAvatar: Story = {
 };
 
 export const WithAction: Story = {
-  render: ({ intent }) => (
-    <Card className="w-96" intent={intent}>
+  render: () => (
+    <Card className="w-96">
       <CardContent>
         “Lorem ipsum dolor sit amet, consec tetur adi piscing elit. Praesent
         tellus leo, vesti bulum a ipsum sed, suscipit sodales ex. Vestibulum id

components/molecules/card/card.tsx

@@ -1,38 +1,22 @@
 import { cn } from "@/lib/utils";
 import React, { forwardRef } from "react";
-import { cva, type VariantProps } from "class-variance-authority";
 
-const cardVariants = cva(
-  "flex min-w-56 flex-col gap-4 p-6 shadow-md rounded-2xl",
-  {
-    variants: {
-      intent: {
-        primary: "bg-primary-90 text-neutral-10",
-        secondary: "bg-secondary-90 text-neutral-90",
-        tertiary: "bg-tertiary-90 text-neutral-90",
-        neutral: "bg-white text-neutral-90",
-      },
-    },
-    defaultVariants: {
-      intent: "neutral",
-    },
+const Card = forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, children, ...props }, ref) => {
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex min-w-56 flex-col gap-4 rounded-2xl bg-white p-6 text-neutral-90 shadow-md",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+      </div>
+    );
   },
 );
-
-const Card = forwardRef<
-  HTMLDivElement,
-  React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof cardVariants>
->(({ className, intent, children, ...props }, ref) => {
-  return (
-    <div
-      ref={ref}
-      className={cn(cardVariants({ intent }), className)}
-      {...props}
-    >
-      {children}
-    </div>
-  );
-});
 Card.displayName = "Card";
 
 interface CardHeader extends React.HTMLAttributes<HTMLDivElement> {