From 52ba835f049b24409e814edcc5b0516d6ed6e9d0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Melihcan=20=C3=87ilek?= <melihcanclk@hotmail.com>
Date: Fri, 1 Sep 2023 12:04:19 +0300
Subject: [PATCH] feat(apps/studio): Checkbox implementation for Storybook
 (#688)

# Description

- Added Default, With Text, Inside Form, OnFocus and Default Check parts
done for checkbox Storybook.
- checked, disable, asChild and children props can be changed from the
table.

### Checklist

- [x] discord username: `cilek`
- [x] Closes #669
- [x] PR must be created for an issue from issues under "In progress"
column from [our project
board](https://github.com/orgs/kamp-us/projects/2/views/1).
- [ ] A descriptive and understandable title: The PR title should
clearly describe the nature and purpose of the changes. The PR title
should be the first thing displayed when the PR is opened. And it should
follow the semantic commit rules, and should include the
app/package/service name in the title. For example, a title like
"docs(@kampus-apps/pano): Add README.md" can be used.
- [ ] Related file selection: Only relevant files should be touched and
no other files should be affected.
- [ ] I ran `npx turbo run` at the root of the repository, and build was
successful.
- [ ] I installed the npm packages using `npm install --save-exact
<package>` so my package is pinned to a specific npm version. Leave
empty if no package was installed. Leave empty if no package was
installed with this PR.

### How were these changes tested?

Please describe the tests you did to test the changes you made. Please
also specify your test configuration.

---------

Co-authored-by: Can Sirin <cansirin12@gmail.com>
---
 apps/studio/stories/Checkbox.stories.tsx | 199 ++++++++++++++++++++---
 1 file changed, 178 insertions(+), 21 deletions(-)

diff --git a/apps/studio/stories/Checkbox.stories.tsx b/apps/studio/stories/Checkbox.stories.tsx
index cf2a5532..dde103d1 100644
--- a/apps/studio/stories/Checkbox.stories.tsx
+++ b/apps/studio/stories/Checkbox.stories.tsx
@@ -1,34 +1,191 @@
 import { Meta, StoryObj } from "@storybook/react";
 
-import { Checkbox, Label } from "@kampus/ui";
-
-const labels = ["köpekleri çıkarmak", "alışverişe gitmek", "kitap okumak"];
+import { Button, Checkbox, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, Label, toast, useForm, z } from "@kampus/ui";
+import { zodResolver } from "@hookform/resolvers/zod"
+import { useState } from "react";
 
 const meta = {
   title: "Checkbox",
+  tags: ["autodocs"],
   component: Checkbox,
+  argTypes: {
+    disabled: {
+      control: "boolean",
+    },
+    checked: {
+      control: "boolean",
+    },
+  }
 } satisfies Meta<typeof Checkbox>;
 
 export default meta;
-type NewType = StoryObj<typeof meta>;
 
-export const Default = {
-  render: () => (
+type Story = StoryObj<typeof meta>;
+
+export const DefaultChecked = {
+  args: {
+    defaultChecked: true,
+  },
+} satisfies Story;
+
+const OnFocusTemplate = ({ ...props }) => {
+  const [isFocused, setIsFocused] = useState(false)
+  return (
     <div className="flex flex-col space-y-2 ">
-      <h4>Günlük Yapmam Gerekenler</h4>
-      {labels.map((label) => {
-        return (
-          <div className="flex items-center space-x-2">
-            <Checkbox id={label} />
-            <Label
-              htmlFor={label}
-              className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-            >
-              {label}
-            </Label>
-          </div>
-        );
-      })}
+      <div className="flex items-center space-x-2">
+        <Checkbox id="checkbox"
+          onFocus={() => {
+            setIsFocused(true)
+          }}
+          onBlur={() => {
+            setIsFocused(false)
+          }}
+          {...props} />
+        <Label
+          htmlFor="checkbox"
+          className="text-primary font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+        >
+          <span id="label">
+            {isFocused ? "Focused" : "Default"}
+          </span>
+        </Label>
+      </div>
     </div>
+  )
+}
+
+export const OnFocus = {
+  render: ({ ...props }) => <OnFocusTemplate {...props} />,
+} satisfies Story;
+
+const DefaultTemplate = ({ ...props }) => {
+  return (
+
+    <div className="items-center flex space-x-2">
+      <Checkbox id="terms1" {...props} />
+      <div className="grid gap-1.5 leading-none">
+        <Label
+          htmlFor="terms1"
+          className="text-primary font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+        >
+          {props?.children
+            ? props?.children
+            : "Default"
+          }
+        </Label>
+        {props?.description && (
+          <p className="text-sm text-muted-foreground">
+            {props?.description}
+          </p>
+        )}
+        {props?.error && (
+          <p className="text-sm text-muted-foreground text-red-500">
+            {props?.error}
+          </p>
+        )}
+      </div>
+    </div >
+  )
+}
+
+export const WithError = {
+  argTypes: {
+    disabled: {
+      control: "boolean",
+    },
+    checked: {
+      control: "boolean",
+    }
+  },
+  render: ({ ...props }) => (
+    <DefaultTemplate {...props} error="This is an error" />
+  ),
+} satisfies Story;
+
+export const WithText = {
+  argTypes: {
+    disabled: {
+      control: "boolean",
+    },
+    checked: {
+      control: "boolean",
+    }
+  },
+  render: ({ ...props }) => (
+    <DefaultTemplate {...props} description="This is a description" />
   ),
-};
+} satisfies Story;
+
+const FormComponent = ({ ...props }) => {
+  const FormSchema = z.object({
+    mobile: z.boolean().default(false).optional(),
+  })
+
+  function onSubmit(data: z.infer<typeof FormSchema>) {
+    toast({
+      title: "You submitted the following values:",
+      description: (
+        <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
+          <code className="text-white">{JSON.stringify(data, null, 2)}</code>
+        </pre>
+      ),
+    })
+  }
+
+  const form = useForm<z.infer<typeof FormSchema>>(
+    FormSchema,
+    {
+      resolver: zodResolver(FormSchema),
+      values: {
+        mobile: props?.checked,
+      }
+    },
+  )
+
+  return (
+    <Form {...form}>
+      <form onSubmit={form.handleSubmit(onSubmit)} className="space-y-6">
+        <FormField
+          control={form.control}
+          name="mobile"
+          render={({ field }) => (
+            <FormItem className="flex flex-row items-start space-x-3 space-y-0 rounded-md border p-4">
+              <FormControl>
+                <Checkbox
+                  checked={field.value}
+                  onCheckedChange={field.onChange}
+                  {...props}
+                />
+              </FormControl>
+              <div className="space-y-1 leading-none">
+                <FormLabel className="text-primary">
+                  Use different settings for my mobile devices
+                </FormLabel>
+                <FormDescription className="text-muted-foreground text-sm">
+                  You can manage your mobile notifications in the mobile settings page.
+                </FormDescription>
+              </div>
+            </FormItem>
+          )}
+        />
+        <Button type="submit">Submit</Button>
+      </form>
+    </Form>
+  )
+}
+
+export const InsideForm = {
+  render: ({ ...props }) => <FormComponent {...props} />
+} satisfies Story;
+
+
+export const Default = {
+  args: {
+    children: "Default"
+  },
+  render: (
+    { ...props }
+  ) => (
+    <DefaultTemplate {...props} />
+  )
+} satisfies Story;