fix(components):

.eslintrc.js

@@ -0,0 +1,34 @@
+/** @type {import("eslint").Linter.Config} */
+const config = {
+  root: true,
+  parser: "@typescript-eslint/parser",
+  extends: [
+    "next/core-web-vitals",
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:storybook/recommended",
+    "plugin:tailwindcss/recommended",
+  ],
+  plugins: ["@typescript-eslint"],
+  rules: {
+    "@typescript-eslint/no-empty-interface": "off",
+    "tailwindcss/classnames-order": "off",
+    "tailwindcss/no-custom-classname": "off",
+    "@typescript-eslint/no-non-null-assertion": "off",
+    "@typescript-eslint/no-explicit-any": "off",
+    "@typescript-eslint/no-var-requires": "off",
+    "no-unused-vars": "warn",
+    "prefer-const": "warn",
+    "@next/next/no-img-element": "off",
+    "no-var": "warn",
+    "@typescript-eslint/no-unused-vars": [
+      "warn", // or "error"
+      {
+        argsIgnorePattern: "^_",
+        varsIgnorePattern: "^_",
+        caughtErrorsIgnorePattern: "^_",
+      },
+    ],
+  },
+};
+module.exports = config;

package.json

@@ -14,9 +14,11 @@
   },
   "dependencies": {
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-label": "^2.0.2",
     "@radix-ui/react-menubar": "^1.0.4",
     "@radix-ui/react-navigation-menu": "^1.1.4",
     "@radix-ui/react-slot": "^1.0.2",
+    "@radix-ui/react-switch": "^1.0.3",
     "@radix-ui/react-toast": "^1.1.5",
     "@react-three/drei": "^9.86.3",
     "@react-three/fiber": "^8.14.4",
@@ -68,10 +70,12 @@
     "@types/react": "^18.2.24",
     "@types/react-dom": "^18.2.8",
     "@types/three": "^0.156.0",
+    "@typescript-eslint/eslint-plugin": "^6.7.5",
     "autoprefixer": "10.4.16",
     "eslint": "^8.50.0",
     "eslint-config-next": "^13.5.4",
     "eslint-plugin-storybook": "^0.6.15",
+    "eslint-plugin-tailwindcss": "^3.13.0",
     "postcss": "^8.4.31",
     "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.5.4",

src/components/ui/dialog.stories.tsx

@@ -33,7 +33,7 @@ export const Base: Story = {
         <DialogHeader>
           <DialogTitle>Edit profile</DialogTitle>
           <DialogDescription>
-            Make changes to your profile here. Click save when you're done.
+            Make changes to your profile here. Click save when you&apos;re done.
           </DialogDescription>
         </DialogHeader>
         <div className="grid gap-4 py-4">

src/components/ui/input.stories.tsx

@@ -0,0 +1,55 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+
+const meta: Meta<typeof Input> = {
+  title: "ui/Input",
+  component: Input,
+  tags: ["autodocs"],
+  argTypes: {},
+};
+export default meta;
+
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {
+  render: (args) => <Input {...args} />,
+  args: {
+    type: "email",
+    placeholder: "Email",
+  },
+};
+export const Disabled: Story = {
+  render: (args) => <Input {...args} />,
+  args: { ...Default.args, disabled: true },
+};
+export const WithLabel: Story = {
+  render: (args) => (
+    <div className="grid w-full max-w-sm items-center gap-1.5">
+      <Label htmlFor="email">{args.placeholder}</Label>
+      <Input {...args} id="email" />
+    </div>
+  ),
+  args: { ...Default.args },
+};
+export const WithText: Story = {
+  render: (args) => (
+    <div className="grid w-full max-w-sm items-center gap-1.5">
+      <Label htmlFor="email-2">{args.placeholder}</Label>
+      <Input {...args} id="email-2" />
+      <p className="text-sm text-slate-500">Enter your email address.</p>
+    </div>
+  ),
+  args: { ...Default.args },
+};
+export const WithButton: Story = {
+  render: (args) => (
+    <div className="flex w-full max-w-sm items-center space-x-2">
+      <Input {...args} />
+      <Button type="submit">Subscribe</Button>
+    </div>
+  ),
+  args: { ...Default.args },
+};

src/components/ui/input.tsx

@@ -0,0 +1,25 @@
+import * as React from "react"
+
+import { cn } from "@/lib/utils"
+
+export interface InputProps
+  extends React.InputHTMLAttributes<HTMLInputElement> {}
+
+const Input = React.forwardRef<HTMLInputElement, InputProps>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
+          className
+        )}
+        ref={ref}
+        {...props}
+      />
+    )
+  }
+)
+Input.displayName = "Input"
+
+export { Input }

src/components/ui/label.stories.tsx

@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Label } from "@/components/ui/label";
+
+const meta: Meta<typeof Label> = {
+  title: "ui/Label",
+  component: Label,
+  tags: ["autodocs"],
+  argTypes: {},
+};
+export default meta;
+
+type Story = StoryObj<typeof Label>;
+
+export const Base: Story = {
+  render: (args) => (
+    <Label {...args} htmlFor="email">
+      Your email address
+    </Label>
+  ),
+  args: {},
+};

src/components/ui/label.tsx

@@ -0,0 +1,26 @@
+"use client"
+
+import * as React from "react"
+import * as LabelPrimitive from "@radix-ui/react-label"
+import { cva, type VariantProps } from "class-variance-authority"
+
+import { cn } from "@/lib/utils"
+
+const labelVariants = cva(
+  "text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70"
+)
+
+const Label = React.forwardRef<
+  React.ElementRef<typeof LabelPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof LabelPrimitive.Root> &
+    VariantProps<typeof labelVariants>
+>(({ className, ...props }, ref) => (
+  <LabelPrimitive.Root
+    ref={ref}
+    className={cn(labelVariants(), className)}
+    {...props}
+  />
+))
+Label.displayName = LabelPrimitive.Root.displayName
+
+export { Label }

src/components/ui/switch.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from "@storybook/react";
+
+import { Label } from "@/components/ui/label";
+import { Switch } from "@/components/ui/switch";
+
+const meta: Meta<typeof Switch> = {
+  title: "ui/Switch",
+  component: Switch,
+  tags: ["autodocs"],
+  argTypes: {},
+};
+export default meta;
+
+type Story = StoryObj<typeof Switch>;
+
+export const Base: Story = {
+  render: (args) => (
+    <div className="flex items-center space-x-2">
+      <Switch {...args} id="airplane-mode" />
+      <Label htmlFor="airplane-mode">Airplane Mode</Label>
+    </div>
+  ),
+  args: {},
+};

src/components/ui/switch.tsx

@@ -0,0 +1,29 @@
+"use client"
+
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-[24px] w-[44px] shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-5 w-5 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-5 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }