From ce043325481011ab2db551d398b1c586221c5ae1 Mon Sep 17 00:00:00 2001
From: Umut Sirin <umutsirin1@gmail.com>
Date: Tue, 8 Aug 2023 01:00:05 -0700
Subject: [PATCH] feat(packages/ui): add <Card /> and <Form /> components &
 their stories (#614)

Adds `<Card />` and `<Form />` components to our design system/component
lib.
---
 apps/ui/stories/Avatar.stories.tsx |   2 +-
 apps/ui/stories/Card.stories.tsx   |  68 +++++++++++
 apps/ui/stories/Form.stories.tsx   | 115 +++++++++++++++++
 apps/ui/stories/Toast.stories.tsx  |   1 +
 package-lock.json                  |  28 ++++-
 packages/ui/components/card.tsx    |  56 +++++++++
 packages/ui/components/form.tsx    | 190 +++++++++++++++++++++++++++++
 packages/ui/components/index.ts    |   2 +
 packages/ui/index.ts               |   5 +
 packages/ui/package.json           |   5 +-
 10 files changed, 469 insertions(+), 3 deletions(-)
 create mode 100644 apps/ui/stories/Card.stories.tsx
 create mode 100644 apps/ui/stories/Form.stories.tsx
 create mode 100644 packages/ui/components/card.tsx
 create mode 100644 packages/ui/components/form.tsx

diff --git a/apps/ui/stories/Avatar.stories.tsx b/apps/ui/stories/Avatar.stories.tsx
index 8eb35274..0c5abfaf 100644
--- a/apps/ui/stories/Avatar.stories.tsx
+++ b/apps/ui/stories/Avatar.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta, StoryObj } from "@storybook/react";
 
-import { UserAvatar } from "@kampus/ui-next/components/user-avatar";
+import { UserAvatar } from "@kampus/ui-next";
 
 const meta = {
   component: UserAvatar,
diff --git a/apps/ui/stories/Card.stories.tsx b/apps/ui/stories/Card.stories.tsx
new file mode 100644
index 00000000..12f344ee
--- /dev/null
+++ b/apps/ui/stories/Card.stories.tsx
@@ -0,0 +1,68 @@
+"use client";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Input,
+  Label,
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@kampus/ui-next";
+
+const meta = {
+  title: "Card",
+  component: Card,
+} satisfies Meta<typeof Card>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+export const Default = {
+  render: () => {
+    return (
+      <Card className="w-[350px]">
+        <CardHeader>
+          <CardTitle>Create project</CardTitle>
+          <CardDescription>Deploy your new project in one-click.</CardDescription>
+        </CardHeader>
+        <CardContent>
+          <form>
+            <div className="grid w-full items-center gap-4">
+              <div className="flex flex-col space-y-1.5">
+                <Label htmlFor="name">Name</Label>
+                <Input id="name" placeholder="Name of your project" />
+              </div>
+              <div className="flex flex-col space-y-1.5">
+                <Label htmlFor="framework">Framework</Label>
+                <Select>
+                  <SelectTrigger id="framework">
+                    <SelectValue placeholder="Select" />
+                  </SelectTrigger>
+                  <SelectContent position="popper">
+                    <SelectItem value="next">Next.js</SelectItem>
+                    <SelectItem value="sveltekit">SvelteKit</SelectItem>
+                    <SelectItem value="astro">Astro</SelectItem>
+                    <SelectItem value="nuxt">Nuxt.js</SelectItem>
+                  </SelectContent>
+                </Select>
+              </div>
+            </div>
+          </form>
+        </CardContent>
+        <CardFooter className="flex justify-between">
+          <Button variant="outline">Cancel</Button>
+          <Button>Deploy</Button>
+        </CardFooter>
+      </Card>
+    );
+  },
+} satisfies Story;
diff --git a/apps/ui/stories/Form.stories.tsx b/apps/ui/stories/Form.stories.tsx
new file mode 100644
index 00000000..646b8ade
--- /dev/null
+++ b/apps/ui/stories/Form.stories.tsx
@@ -0,0 +1,115 @@
+"use client";
+
+import type { Meta, StoryObj } from "@storybook/react";
+
+import {
+  Button,
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+  Form,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  Input,
+  Textarea,
+  useForm,
+  z,
+} from "@kampus/ui-next";
+
+// 1. create a form schema
+
+const formSchema = z.object({
+  title: z.string().min(1, { message: "baslik en az 1 karakterli" }),
+  content: z.string().optional(),
+});
+
+const FormStory = () => {
+  // create a form state helper using `useForm` hook
+  const form = useForm(formSchema, {
+    defaultValues: {
+      title: "",
+      content: "",
+    },
+  });
+
+  const onSubmit = (values: z.infer<typeof formSchema>) => {
+    console.log({ values });
+  };
+
+  return (
+    <Card>
+      <CardHeader>
+        <CardTitle>Add new post</CardTitle>
+        <CardDescription>Share your links & thoughts with us</CardDescription>
+      </CardHeader>
+      <Form {...form}>
+        {/* eslint-disable-next-line @typescript-eslint/no-misused-promises */}
+        <form onSubmit={form.handleSubmit(onSubmit)}>
+          <CardContent className="space-y-4">
+            <FormField
+              control={form.control}
+              name="title"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Title</FormLabel>
+                  <FormControl>
+                    <Input placeholder="What's your title?" {...field} />
+                  </FormControl>
+                  <FormDescription>Write a descriptive title for your post.</FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+
+            <FormField
+              control={form.control}
+              name="content"
+              render={({ field }) => (
+                <FormItem>
+                  <FormLabel>Content</FormLabel>
+                  <FormControl>
+                    <Textarea placeholder="Add your thoughts ..." {...field} />
+                  </FormControl>
+                  <FormDescription>Add your thoughts about this post.</FormDescription>
+                  <FormMessage />
+                </FormItem>
+              )}
+            />
+          </CardContent>
+          <CardFooter className="space-x-2">
+            <Button variant="outline" type="reset" onClick={() => form.reset()}>
+              Reset form
+            </Button>
+            <Button type="submit">Submit</Button>
+          </CardFooter>
+        </form>
+      </Form>
+    </Card>
+  );
+};
+
+export const Default = {
+  render: () => {
+    return (
+      <>
+        <FormStory />
+      </>
+    );
+  },
+} satisfies Story;
+
+const meta = {
+  title: "Form",
+  component: FormStory,
+} satisfies Meta<typeof FormStory>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
diff --git a/apps/ui/stories/Toast.stories.tsx b/apps/ui/stories/Toast.stories.tsx
index 93ec43f6..06724271 100644
--- a/apps/ui/stories/Toast.stories.tsx
+++ b/apps/ui/stories/Toast.stories.tsx
@@ -13,6 +13,7 @@ export default meta;
 type Story = StoryObj<typeof meta>;
 export const Default = {
   render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
     const { toast } = useToast();
 
     return (
diff --git a/package-lock.json b/package-lock.json
index 404d3181..24b6766c 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -4521,6 +4521,14 @@
         "node": ">=6"
       }
     },
+    "node_modules/@hookform/resolvers": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/@hookform/resolvers/-/resolvers-3.2.0.tgz",
+      "integrity": "sha512-skXQHhLxq0Sz2xDwCyv5dygBCtXJe1GmWwxDzfdtl0X6agD6qcyTG8HrZWkjJoy8AkiLARqYvSYJ8z7+Nwmi7w==",
+      "peerDependencies": {
+        "react-hook-form": "^7.0.0"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.10",
       "license": "Apache-2.0",
@@ -20876,6 +20884,21 @@
         "node": ">=10"
       }
     },
+    "node_modules/react-hook-form": {
+      "version": "7.45.4",
+      "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.45.4.tgz",
+      "integrity": "sha512-HGDV1JOOBPZj10LB3+OZgfDBTn+IeEsNOKiq/cxbQAIbKaiJUe/KV8DBUzsx0Gx/7IG/orWqRRm736JwOfUSWQ==",
+      "engines": {
+        "node": ">=12.22.0"
+      },
+      "funding": {
+        "type": "opencollective",
+        "url": "https://opencollective.com/react-hook-form"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17 || ^18"
+      }
+    },
     "node_modules/react-inspector": {
       "version": "6.0.2",
       "dev": true,
@@ -25169,6 +25192,7 @@
       "version": "0.0.0",
       "license": "MIT",
       "dependencies": {
+        "@hookform/resolvers": "3.2.0",
         "@radix-ui/react-alert-dialog": "^1.0.4",
         "@radix-ui/react-avatar": "^1.0.3",
         "@radix-ui/react-dialog": "^1.0.4",
@@ -25181,7 +25205,9 @@
         "class-variance-authority": "0.6.0",
         "lucide-react": "0.241.0",
         "next-themes": "0.2.1",
-        "react-share": "4.4.1"
+        "react-hook-form": "7.45.4",
+        "react-share": "4.4.1",
+        "zod": "3.21.4"
       },
       "devDependencies": {
         "@kampus/tailwind": "*"
diff --git a/packages/ui/components/card.tsx b/packages/ui/components/card.tsx
new file mode 100644
index 00000000..8d0fb6ff
--- /dev/null
+++ b/packages/ui/components/card.tsx
@@ -0,0 +1,56 @@
+import * as React from "react";
+
+import { cn } from "@kampus/ui-next/utils";
+
+const Card = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div
+      ref={ref}
+      className={cn("bg-card text-card-foreground rounded-lg border shadow-sm", className)}
+      {...props}
+    />
+  )
+);
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex flex-col space-y-1.5 p-6", className)} {...props} />
+  )
+);
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
+  ({ className, ...props }, ref) => (
+    <h3
+      ref={ref}
+      className={cn("text-2xl font-semibold leading-none tracking-tight", className)}
+      {...props}
+    />
+  )
+);
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn("text-muted-foreground text-sm", className)} {...props} />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+  )
+);
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => (
+    <div ref={ref} className={cn("flex items-center p-6 pt-0", className)} {...props} />
+  )
+);
+CardFooter.displayName = "CardFooter";
+
+export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent };
diff --git a/packages/ui/components/form.tsx b/packages/ui/components/form.tsx
new file mode 100644
index 00000000..d73ffd78
--- /dev/null
+++ b/packages/ui/components/form.tsx
@@ -0,0 +1,190 @@
+"use client";
+
+import * as React from "react";
+import { zodResolver } from "@hookform/resolvers/zod";
+import type * as LabelPrimitive from "@radix-ui/react-label";
+import { Slot } from "@radix-ui/react-slot";
+import {
+  Controller,
+  FormProvider,
+  useFormContext,
+  useForm as useReactHookForm,
+  type ControllerProps,
+  type FieldPath,
+  type FieldValues,
+  type UseFormProps,
+  type UseFormReturn,
+} from "react-hook-form";
+import { type z } from "zod";
+
+import { cn } from "../utils";
+import { Label } from "./label";
+
+const Form = FormProvider;
+
+type FormFieldContextValue<
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+> = {
+  name: TName;
+};
+
+const FormFieldContext = React.createContext<FormFieldContextValue>({} as FormFieldContextValue);
+
+const FormField = <
+  TFieldValues extends FieldValues = FieldValues,
+  TName extends FieldPath<TFieldValues> = FieldPath<TFieldValues>
+>(
+  props: ControllerProps<TFieldValues, TName>
+) => {
+  return (
+    <FormFieldContext.Provider value={{ name: props.name }}>
+      <Controller {...props} />
+    </FormFieldContext.Provider>
+  );
+};
+
+function useForm<
+  TContext = unknown,
+  TTransformedValues extends FieldValues | undefined = undefined,
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  TSchema extends z.Schema<any, any> = z.Schema<any, any>
+>(
+  schema: TSchema,
+  props: UseFormProps<z.infer<TSchema>, TContext>
+): UseFormReturn<z.infer<TSchema>, TContext, TTransformedValues> {
+  return useReactHookForm<z.infer<TSchema>, TContext, TTransformedValues>({
+    ...props,
+    resolver: zodResolver(schema),
+  });
+}
+
+const useFormField = () => {
+  const fieldContext = React.useContext(FormFieldContext);
+  const itemContext = React.useContext(FormItemContext);
+  const { getFieldState, formState } = useFormContext();
+
+  const fieldState = getFieldState(fieldContext.name, formState);
+
+  if (!fieldContext) {
+    throw new Error("useFormField should be used within <FormField>");
+  }
+
+  const { id } = itemContext;
+
+  return {
+    id,
+    name: fieldContext.name,
+    formItemId: `${id}-form-item`,
+    formDescriptionId: `${id}-form-item-description`,
+    formMessageId: `${id}-form-item-message`,
+    ...fieldState,
+  };
+};
+
+type FormItemContextValue = {
+  id: string;
+};
+
+const FormItemContext = React.createContext<FormItemContextValue>({} as FormItemContextValue);
+
+const FormItem = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(
+  ({ className, ...props }, ref) => {
+    const id = React.useId();
+
+    return (
+      <FormItemContext.Provider value={{ id }}>
+        <div ref={ref} className={cn("space-y-2", className)} {...props} />
+      </FormItemContext.Provider>
+    );
+  }
+);
+FormItem.displayName = "FormItem";
+
+const FormLabel = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root>
+>(({ className, ...props }, ref) => {
+  const { error, formItemId } = useFormField();
+
+  return (
+    <Label
+      ref={ref}
+      className={cn(error && "text-destructive", className)}
+      htmlFor={formItemId}
+      {...props}
+    />
+  );
+});
+FormLabel.displayName = "FormLabel";
+
+const FormControl = React.forwardRef<
+  React.ElementRef<typeof Slot>,
+  React.ComponentPropsWithoutRef<typeof Slot>
+>(({ ...props }, ref) => {
+  const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+
+  return (
+    <Slot
+      ref={ref}
+      id={formItemId}
+      aria-describedby={!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`}
+      aria-invalid={!!error}
+      {...props}
+    />
+  );
+});
+FormControl.displayName = "FormControl";
+
+const FormDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => {
+  const { formDescriptionId } = useFormField();
+
+  return (
+    <p
+      ref={ref}
+      id={formDescriptionId}
+      className={cn("text-muted-foreground text-sm", className)}
+      {...props}
+    />
+  );
+});
+FormDescription.displayName = "FormDescription";
+
+const FormMessage = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, children, ...props }, ref) => {
+  const { error, formMessageId } = useFormField();
+  const body = error ? String(error?.message) : children;
+
+  if (!body) {
+    return null;
+  }
+
+  return (
+    <p
+      ref={ref}
+      id={formMessageId}
+      className={cn("text-destructive text-sm font-medium", className)}
+      {...props}
+    >
+      {body}
+    </p>
+  );
+});
+FormMessage.displayName = "FormMessage";
+
+export {
+  useForm,
+  useFormField,
+  Form,
+  FormItem,
+  FormLabel,
+  FormControl,
+  FormDescription,
+  FormMessage,
+  FormField,
+};
diff --git a/packages/ui/components/index.ts b/packages/ui/components/index.ts
index f6048f6b..50a6cc5f 100644
--- a/packages/ui/components/index.ts
+++ b/packages/ui/components/index.ts
@@ -18,3 +18,5 @@ export * from "./top-nav";
 export * from "./use-toast";
 export * from "./user-avatar";
 export * from "./toaster";
+export * from "./card";
+export * from "./form";
diff --git a/packages/ui/index.ts b/packages/ui/index.ts
index 40b494c5..ff4c7931 100644
--- a/packages/ui/index.ts
+++ b/packages/ui/index.ts
@@ -1 +1,6 @@
+import { z } from "zod";
+
+// export zod for convinience
+export { z };
+
 export * from "./components";
diff --git a/packages/ui/package.json b/packages/ui/package.json
index d6a04214..c15021ce 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -14,6 +14,7 @@
     "@kampus/tailwind": "*"
   },
   "dependencies": {
+    "@hookform/resolvers": "3.2.0",
     "@radix-ui/react-alert-dialog": "^1.0.4",
     "@radix-ui/react-avatar": "^1.0.3",
     "@radix-ui/react-dialog": "^1.0.4",
@@ -26,6 +27,8 @@
     "class-variance-authority": "0.6.0",
     "lucide-react": "0.241.0",
     "next-themes": "0.2.1",
-    "react-share": "4.4.1"
+    "react-hook-form": "7.45.4",
+    "react-share": "4.4.1",
+    "zod": "3.21.4"
   }
 }