input & select components

.npmrc copy

@@ -0,0 +1 @@
+ package-manager-strict=false

apps/storybook/src/Input.stories.ts

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/svelte'
+
+import Input from './Input.svelte'
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: 'Example/Input',
+  component: Input,
+  tags: ['autodocs'],
+  argTypes: {
+    state: {
+      control: { type: 'select' },
+      options: ['default', 'error', 'success', 'disable'],
+    },
+    label: {
+      control: 'text',
+    },
+    desc: {
+      control: 'text',
+    },
+  },
+} satisfies Meta<Input>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {
+    placeholder: 'Input Default',
+    state: 'default',
+  },
+}
+
+export const Error: Story = {
+  args: {
+    placeholder: 'Input error',
+    state: 'error',
+  },
+}
+export const Success: Story = {
+  args: {
+    placeholder: 'Input success',
+    state: 'success',
+  },
+}
+export const Disable: Story = {
+  args: {
+    placeholder: 'Input disable',
+    state: 'disable',
+  },
+}

apps/storybook/src/Input.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import './input.css'
+
+  export let state: 'default' | 'error' | 'success' | 'disable' = 'default'
+
+  export let placeholder: string = 'โปรดกรอกรหัสผ่าน'
+  export let label: string = 'รหัสผ่าน'
+  export let desc: string = 'กรุณากรอกรหัสผ่านให้ถูกต้อง'
+</script>
+
+<div>
+  <label>
+    {label}
+    <input
+      type="text"
+      class="{['storybook-input', `storybook-input--${state}`].join(' ')}"
+      on:click
+      {placeholder}
+      disabled="{state === 'disable'}"
+    />
+    <p
+      class="{state == 'error'
+        ? 'text-error'
+        : state == 'success'
+          ? 'text-success'
+          : ''}"
+    >
+      {desc}
+    </p>
+  </label>
+</div>

apps/storybook/src/input.css

@@ -0,0 +1,65 @@
+*{
+  color: gray;
+  font-weight: 500;
+  font-family: 'Sarabun', sans;
+}
+.storybook-input {
+  display: flex;
+  width: 250px;
+  height: 40px; 
+  border-radius: 10px; 
+  border-width: 3px;
+  padding-left: 16px; 
+  padding-right: 16px; 
+  color: black;
+  margin-top: 3px;
+  margin-bottom: 5px;
+}
+
+.storybook-input--primary {
+  border: 3px solid #4A70C6;
+  background-color: #F6F6F9;
+}
+
+.storybook-input--primary:hover {
+  outline: none;
+  border: 3px solid #4A70C6; /* Replace with the correct color variable */
+}
+
+.storybook-input--primary:focus-visible {
+  outline: none;
+  border: 3px solid #4A70C6; /* Replace with the correct color variable */
+}
+
+.storybook-input--error {
+  border-color: #F96666; /* Replace with the error color variable */
+  border: 3px solid #F96666; /* Replace with the correct color variable */
+  color: var(--on-surface); /* Placeholder text color */
+}
+
+.storybook-input--error:focus-visible,
+.storybook-input--error:hover {
+  outline: none;
+}
+
+.storybook-input--success {
+  border-color: #6CD62B; /* Replace with your success color variable */
+  border: 3px solid #6CD62B; /* Replace with the correct color variable */
+}
+
+.storybook-input--success:focus-visible,
+.storybook-input--success:hover {
+  outline: none;
+}
+
+.storybook-input--disable {
+  background-color: #F6F6F9; /* Replace with your color variable */
+  border: none;
+  cursor: not-allowed;
+  border: 0;
+  color: var(--on-surface-disabled); /* Placeholder text color */
+}
+
+.storybook-input--disable .placeholder {
+  pointer-events: none;
+}

apps/storybook/src/select.css

@@ -0,0 +1,65 @@
+*{
+  color: gray;
+  font-weight: 500;
+  font-family: 'Sarabun', sans;
+}
+.storybook-input {
+  display: flex;
+  width: 250px;
+  height: 40px; 
+  border-radius: 10px; 
+  border-width: 3px;
+  padding-left: 30px; 
+  padding-right: 16px; 
+  color: gray;
+  margin-top: 3px;
+  margin-bottom: 5px;
+}
+
+.storybook-input--primary {
+  border: 3px solid #4A70C6;
+  background-color: #F6F6F9;
+}
+
+.storybook-input--primary:hover {
+  outline: none;
+  border: 3px solid #4A70C6; /* Replace with the correct color variable */
+}
+
+.storybook-input--primary:focus-visible {
+  outline: none;
+  border: 3px solid #4A70C6; /* Replace with the correct color variable */
+}
+
+.storybook-input--error {
+  border-color: #F96666; /* Replace with the error color variable */
+  border: 3px solid #F96666; /* Replace with the correct color variable */
+  color: var(--on-surface); /* Placeholder text color */
+}
+
+.storybook-input--error:focus-visible,
+.storybook-input--error:hover {
+  outline: none;
+}
+
+.storybook-input--success {
+  border-color: #6CD62B; /* Replace with your success color variable */
+  border: 3px solid #6CD62B; /* Replace with the correct color variable */
+}
+
+.storybook-input--success:focus-visible,
+.storybook-input--success:hover {
+  outline: none;
+}
+
+.storybook-input--disable {
+  background-color: #F6F6F9; /* Replace with your color variable */
+  border: none;
+  cursor: not-allowed;
+  border: 0;
+  color: var(--on-surface-disabled); /* Placeholder text color */
+}
+
+.storybook-input--disable .placeholder {
+  pointer-events: none;
+}

apps/storybook/src/select.stories.ts

@@ -0,0 +1,52 @@
+import type { Meta, StoryObj } from '@storybook/svelte'
+
+import Select from './select.svelte'
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories
+const meta = {
+  title: 'Example/Select',
+  component: Select,
+  tags: ['autodocs'],
+  argTypes: {
+    state: {
+      control: { type: 'select' },
+      options: ['default', 'error', 'success', 'disable'],
+    },
+    label: {
+      control: 'text',
+    },
+    desc: {
+      control: 'text',
+    },
+  },
+} satisfies Meta<Select>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+  args: {
+    placeholder: 'select default',
+    state: 'default',
+  },
+}
+
+export const Error: Story = {
+  args: {
+    placeholder: 'select error',
+    state: 'error',
+  },
+}
+export const Success: Story = {
+  args: {
+    placeholder: 'select success',
+    state: 'success',
+  },
+}
+export const Disable: Story = {
+  args: {
+    placeholder: 'select disable',
+    state: 'disable',
+  },
+}

apps/storybook/src/select.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+  import './select.css'
+
+  export let state: 'default' | 'error' | 'success' | 'disable' = 'default'
+
+  export let placeholder: string = 'none'
+  export let label: string = 'ตัวเลือก'
+  export let desc: string = 'เลือกตัวเลือกที่กำหนด'
+</script>
+
+<div>
+  <label>
+    {label}
+    <select
+      class="{['storybook-input', `storybook-input--${state}`].join(' ')}"
+      on:click
+      disabled="{state === 'disable'}"
+    >
+      <option>{placeholder}</option>
+    </select>
+    <svg
+      width="10"
+      height="14"
+      viewBox="0 0 12 14"
+      class="relative bottom-[30px] left-[15px]"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M10.6666 13V11.6667C10.6666 10.9594 10.3856 10.2811 9.88554 9.78105C9.38544 9.28095 8.70716 9 7.99992 9H3.99992C3.29267 9 2.6144 9.28095 2.1143 9.78105C1.6142 10.2811 1.33325 10.9594 1.33325 11.6667V13M8.66659 3.66667C8.66659 5.13943 7.47268 6.33333 5.99992 6.33333C4.52716 6.33333 3.33325 5.13943 3.33325 3.66667C3.33325 2.19391 4.52716 1 5.99992 1C7.47268 1 8.66659 2.19391 8.66659 3.66667Z"
+        stroke="#898EA7"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      ></path>
+    </svg>
+    <p
+      class="{state == 'error'
+        ? 'text-error'
+        : state == 'success'
+          ? 'text-success'
+          : ''}"
+    >
+      {desc}
+    </p>
+  </label>
+</div>

apps/web/src/routes/+page.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   import { Button } from '@repo/ui/button'
   import { Input } from '@repo/ui/input'
-
+  import { Select } from '@repo/ui/input-select'
   let counter = 0
 
   const onButtonClick = () => {
@@ -15,8 +15,62 @@
 
 {counter}
 
-<Input placeholder="Input" />
+<div
+  class="flex flex-col space-x-0 space-y-10 w-auto h-auto p-10 my-5 border-b-2 border-t-2"
+>
+  <h1>ตัวอย่าง Input</h1>
+  <Input
+    placeholder="โปรดกรอกรหัสผ่าน"
+    label="รหัสผ่าน"
+    desc="กรุณากรอกรหัสผ่านให้ถูกต้อง"
+  />
+  <Input
+    placeholder="โปรดกรอกรหัสผ่าน"
+    label="รหัสผ่าน"
+    desc="กรุณากรอกรหัสผ่านให้ถูกต้อง"
+    state="error"
+  />
+  <Input placeholder="สำเร็จ" label="รหัสผ่าน" desc="สำเร็จ" state="success" />
+  <Input
+    placeholder="ฟอร์มนี้ใช้ไม่ได้"
+    label="รหัสผ่าน"
+    desc="ฟอร์มนี้ใช้ไม่ได้"
+    state="disable"
+  />
+</div>
+<div
+  class="flex flex-col space-x-0 space-y-10 w-auto h-auto p-10 my-5 border-b-2 border-t-2"
+>
+  <h1>Select</h1>
 
+  <Select
+    placeholder="โปรดเลือกตัวเลือก"
+    label="ตัวเลือก"
+    desc="เลือกตัวเลือกที่กำหนด"
+    items="{['option1', 'option2']}"
+  />
+  <Select
+    placeholder="โปรดเลือกตัวเลือก"
+    label="ตัวเลือก"
+    desc="เลือกตัวเลือกที่กำหนด"
+    state="error"
+    items="{['option1', 'option2']}"
+  />
+  <Select
+    placeholder="โปรดเลือกตัวเลือก"
+    label="ตัวเลือก"
+    desc="เลือกตัวเลือกที่กำหนด"
+    state="success"
+    items="{['option1', 'option2']}"
+  />
+  <Select
+    placeholder="โปรดเลือกตัวเลือก"
+    label="ตัวเลือก"
+    desc="เลือกตัวเลือกที่กำหนด"
+    state="disable"
+    items="{['option1', 'option2']}"
+  />
+</div>
 <p>
   Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation
 </p>