Clean up.

CQCL · Dec 18, 2023 · 8532a61 · 8532a61
1 parent e9a6051
commit 8532a61
Show file tree

Hide file tree

Showing 46 changed files with 996 additions and 628 deletions.
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -7,3 +7,10 @@
   src="dist/src/utils/syncTheme.js"
   type="application/javascript"
 ></script>
+
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap"
+  rel="stylesheet"
+/>
diff --git a/components.json b/components.json
@@ -4,7 +4,7 @@
   "rsc": true,
   "tsx": true,
   "tailwind": {
-    "config": "src/tailwind.config.ts",
+    "config": "tailwind.config.ts",
     "css": "src/globals.css",
     "baseColor": "zinc",
     "cssVariables": true

diff --git a/src/styles.css b/src/styles.css
@@ -8,5 +8,6 @@
   }
   body {
     @apply bg-background text-foreground;
+    @apply font-sans;
   }
 }
diff --git a/stories/atoms/accordion.stories.tsx b/stories/atoms/accordion.stories.tsx
@@ -1,12 +1,11 @@
 import { Meta, StoryObj } from "@storybook/react";
-import React from "react";
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
   AccordionTrigger,
 } from "src/atoms/accordion";
-export function AccordionDemo() {
+function AccordionDemo() {
   return (
     <Accordion type="single" collapsible className="w-full">
       <AccordionItem value="item-1">
@@ -37,8 +36,7 @@ const meta: Meta<typeof AccordionDemo> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof AccordionDemo>;
 
-export const Default: Story = {
+export const Default: StoryObj<typeof AccordionDemo> = {
   args: {},
 };
diff --git a/stories/atoms/alert-dialog.stories.tsx b/stories/atoms/alert-dialog.stories.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -11,7 +10,7 @@ import {
   AlertDialogTrigger,
 } from "src/atoms/alert-dialog";
 import { Button } from "src/atoms/button";
-export function AlertDialogDemo() {
+function AlertDialogDemo() {
   return (
     <AlertDialog>
       <AlertDialogTrigger asChild>
@@ -41,8 +40,7 @@ const meta: Meta<typeof AlertDialogDemo> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof AlertDialogDemo>;
 
-export const Default: Story = {
+export const Default: StoryObj<typeof AlertDialogDemo> = {
   args: {},
 };
diff --git a/stories/atoms/alert.stories.tsx b/stories/atoms/alert.stories.tsx
@@ -1,7 +1,7 @@
 import { RocketIcon } from "@radix-ui/react-icons";
-import { Meta, StoryObj } from "@storybook/react";
+import { Meta } from "@storybook/react";
 
-import React from "react";
+import type { StoryObj } from "@storybook/react";
 import { Alert, AlertDescription, AlertTitle } from "src/atoms/alert";
 
 export function AlertDemo() {
@@ -15,13 +15,13 @@ export function AlertDemo() {
     </Alert>
   );
 }
+
 const meta: Meta<typeof AlertDemo> = {
   component: AlertDemo,
 };
 
 export default meta;
-type Story = StoryObj<typeof AlertDemo>;
 
-export const Default: Story = {
+export const Default: StoryObj<typeof AlertDemo> = {
   args: {},
 };
diff --git a/stories/atoms/aspect-ratio.stories.tsx b/stories/atoms/aspect-ratio.stories.tsx
@@ -1,5 +1,4 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
+import type { Meta } from "@storybook/react";
 import { AspectRatio } from "src/atoms/aspect-ratio";
 export function AspectRatioDemo() {
   return (
@@ -13,13 +12,14 @@ export function AspectRatioDemo() {
   );
 }
 
-const meta: Meta<typeof AspectRatio> = {
-  component: AspectRatio,
+import type { StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof AspectRatioDemo> = {
+  component: AspectRatioDemo,
 };
 
 export default meta;
-type Story = StoryObj<typeof AspectRatio>;
 
-export const Default: Story = {
+export const Default: StoryObj<typeof AspectRatioDemo> = {
   args: {},
 };
diff --git a/stories/atoms/avatar.stories.tsx b/stories/atoms/avatar.stories.tsx
@@ -1,4 +1,3 @@
-import React from "react";
 import { Avatar, AvatarFallback, AvatarImage } from "src/atoms/avatar";
 export function AvatarDemo() {
   return (
@@ -16,8 +15,7 @@ const meta: Meta<typeof AvatarDemo> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof AvatarDemo>;
 
-export const Default: Story = {
+export const Default: StoryObj<typeof AvatarDemo> = {
   args: {},
 };
diff --git a/stories/atoms/badge.stories.tsx b/stories/atoms/badge.stories.tsx
@@ -1,23 +1,23 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
 import { Badge } from "src/atoms/badge";
 
-const meta: Meta<typeof Badge> = {
-  component: () => {
-    return (
-      <div className="flex flex-col gap-2 w-32">
-        <Badge variant="default">Default</Badge>
-        <Badge variant="destructive">Destructive</Badge>
-        <Badge variant="outline">Outlined</Badge>
-        <Badge variant="secondary">Secondary</Badge>
-      </div>
-    );
-  },
+export function BadgeDemo() {
+  return (
+    <div className="flex flex-col gap-2 w-32">
+      <Badge variant="default">Default</Badge>
+      <Badge variant="destructive">Destructive</Badge>
+      <Badge variant="outline">Outlined</Badge>
+      <Badge variant="secondary">Secondary</Badge>
+    </div>
+  );
+}
+
+const meta: Meta<typeof BadgeDemo> = {
+  component: BadgeDemo,
 };
 
 export default meta;
-type Story = StoryObj<typeof Badge>;
 
-export const Default: Story = {
+export const Default: StoryObj<typeof BadgeDemo> = {
   args: {},
 };
diff --git a/stories/atoms/button.stories.tsx b/stories/atoms/button.stories.tsx
@@ -6,11 +6,7 @@ const meta: Meta<typeof Button> = {
 };
 
 export default meta;
-type Story = StoryObj<typeof Button>;
 
-export const Default: Story = {
-  args: {
-    children: "default",
-    value: 50,
-  },
+export const Default: StoryObj<typeof Button> = {
+  args: {},
 };
diff --git a/stories/atoms/calendar.stories.tsx b/stories/atoms/calendar.stories.tsx
@@ -19,18 +19,17 @@ export function CalendarDemo() {
   );
 }
 
-import type { Meta, StoryObj } from "@storybook/react";
+import type { Meta } from "@storybook/react";
 import { DateRange } from "react-day-picker";
 
+import type { StoryObj } from "@storybook/react";
+
 const meta: Meta<typeof CalendarDemo> = {
   component: CalendarDemo,
 };
 
 export default meta;
-type Story = StoryObj<typeof CalendarDemo>;
 
-export const Default: Story = {
-  args: {
-    children: "default",
-  },
+export const Default: StoryObj<typeof CalendarDemo> = {
+  args: {},
 };
diff --git a/stories/atoms/card.stories.tsx b/stories/atoms/card.stories.tsx
@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
 import { Button } from "src/atoms/button";
 import {
   Card,
@@ -19,55 +18,51 @@ import {
   SelectValue,
 } from "src/atoms/select";
 
-const meta: Meta<typeof Button> = {
-  component: () => {
-    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>
+const CardDemo = () => {
+  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>
-          </form>
-        </CardContent>
-        <CardFooter className="flex justify-between">
-          <Button variant="outline">Cancel</Button>
-          <Button>Deploy</Button>
-        </CardFooter>
-      </Card>
-    );
-  },
+            <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>
+  );
+};
+
+const meta: Meta<typeof CardDemo> = {
+  component: CardDemo,
 };
 
 export default meta;
-type Story = StoryObj<typeof Button>;
 
-export const Default: Story = {
-  args: {
-    variant: "default",
-    children: "default",
-  },
+export const Default: StoryObj<typeof CardDemo> = {
+  args: {},
 };
diff --git a/stories/atoms/checkbox.stories.tsx b/stories/atoms/checkbox.stories.tsx
@@ -1,35 +1,33 @@
-import type { Meta, StoryObj } from "@storybook/react";
-import React from "react";
-import { Button } from "src/atoms/button";
+import type { Meta } from "@storybook/react";
 import { Checkbox } from "src/atoms/checkbox";
 
-const meta: Meta<typeof Button> = {
-  component: () => {
-    return (
-      <div className="items-top flex space-x-2">
-        <Checkbox id="terms1" />
-        <div className="grid gap-1.5 leading-none">
-          <label
-            htmlFor="terms1"
-            className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
-          >
-            Accept terms and conditions
-          </label>
-          <p className="text-sm text-muted-foreground">
-            You agree to our Terms of Service and Privacy Policy.
-          </p>
-        </div>
+const CheckboxDemo = () => {
+  return (
+    <div className="items-top flex space-x-2">
+      <Checkbox id="terms1" />
+      <div className="grid gap-1.5 leading-none">
+        <label
+          htmlFor="terms1"
+          className="text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+        >
+          Accept terms and conditions
+        </label>
+        <p className="text-sm text-muted-foreground">
+          You agree to our Terms of Service and Privacy Policy.
+        </p>
       </div>
-    );
-  },
+    </div>
+  );
+};
+
+import type { StoryObj } from "@storybook/react";
+
+const meta: Meta<typeof CheckboxDemo> = {
+  component: CheckboxDemo,
 };
 
 export default meta;
-type Story = StoryObj<typeof Button>;
 
-export const Default: Story = {
-  args: {
-    variant: "default",
-    children: "default",
-  },
+export const Default: StoryObj<typeof CheckboxDemo> = {
+  args: {},
 };
-Original file line number
+Diff line change
@@ Expand Up / @@ -8,5 +8,6 @@ @@
       }
       body {
         @apply bg-background text-foreground;
+        @apply font-sans;
       }
     }