InputField component (#50)

Co-authored-by: martinwenisch <[email protected]>

.vscode/settings.json

@@ -1,15 +1,15 @@
 {
-  "editor.formatOnSave": true, // Enable format on save
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": "explicit" // Let ESLint handle non-formatting fixes
+    "source.fixAll.eslint": "explicit"
   },
-  "eslint.format.enable": true, // ESlint uses prettier rules for formatting
-
   "[prisma]": {
     "editor.defaultFormatter": "Prisma.prisma"
   },
   "tailwindCSS.experimental.classRegex": [
-    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"] // Allows us to use Tailwind intellisense with cva() syntax
+    ["cva\\(([^)]*)\\)", "[\"'`]([^\"'`]*).*?[\"'`]"]
   ],
-  "typescript.preferences.importModuleSpecifier": "non-relative" // Always auto-import from module root (avoid ../../..)
+  "typescript.preferences.importModuleSpecifier": "non-relative",
+  "eslint.format.enable": true
 }

apps/design-system/stories/input.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "@storybook/react";
+import { InputField } from "../../../packages/design-system/src/ui/input/inputField";
+import { SearchIcon } from "@repo/design-system/demo";
+import { HomeIcon } from "@repo/design-system/demo";
+
+const meta: Meta<typeof InputField> = {
+  title: "Components/Input",
+  component: InputField,
+  argTypes: {
+    label: { control: "text" },
+    error: { control: "text" },
+    showClearButton: { control: "boolean" },
+    icon: {
+      control: { type: "select" },
+      options: {
+        NoIcon: undefined,
+        SearchIcon: SearchIcon,
+        HomeIcon: HomeIcon,
+      },
+      mapping: {
+        SearchIcon: SearchIcon,
+        HomeIcon: HomeIcon,
+      },
+    },
+  },
+  tags: ["autodocs"],
+};
+
+type InputStory = StoryObj<typeof meta>;
+
+export const Default: InputStory = {
+  args: {
+    label: "First Name",
+    error: "Fix it",
+    showClearButton: true,
+    icon: undefined,
+  },
+};
+
+export default meta;

apps/web/app/[lang]/layout.tsx

@@ -1,6 +1,8 @@
 import Link from "next/link";
 
 import "../globals.css";
+import "@repo/design-system/styles";
+import "@repo/design-system/themes/theme-default";
 
 export default function RootLayout({
   params: { lang },

apps/web/app/[lang]/test/page.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import { BadgeStarIcon } from "@repo/design-system/demo";
+import { InputField } from "@repo/design-system/ui";
+
+export default function Page() {
+  return (
+    <div className="w-full min-h-80 flex flex-col p-10 justify-center items-center gap-4">
+      <InputField label="Full Name" icon={BadgeStarIcon} />
+      <InputField label="Full Name" icon={BadgeStarIcon} error="Test error" />
+      <InputField
+        label="Full Name"
+        icon={BadgeStarIcon}
+        showClearButton={true}
+        required
+      />
+      <InputField label="Full Name" showClearButton={true} required />
+    </div>
+  );
+}

apps/web/next-env.d.ts

@@ -2,4 +2,4 @@
 /// <reference types="next/image-types/global" />
 
 // NOTE: This file should not be edited
-// see https://nextjs.org/docs/basic-features/typescript for more information.
+// see https://nextjs.org/docs/app/building-your-application/configuring/typescript for more information.

apps/web/package.json

@@ -13,12 +13,12 @@
     "@repo/design-system": "*",
     "next": "^14.1.1",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0"
+    "react-dom": "^18.2.0",
+    "tailwind-merge": "^2.5.3"
   },
   "devDependencies": {
     "@next/eslint-plugin-next": "^14.1.1",
     "@repo/eslint-config": "*",
-    "@repo/tailwind-config": "^0.0.0",
     "@repo/typescript-config": "*",
     "@types/eslint": "^8.56.5",
     "@types/node": "^20.11.24",