Merge pull request #1 from IMPHNEN/feat/component-migrate

Migrate component from 'imphnen-gacha' repository

libs/ui/src/atoms/index.ts

@@ -1 +1,4 @@
 export * from './button';
+export * from './input';
+export * from './password-input';
+export * from './textarea';

libs/ui/src/atoms/input/index.ts

@@ -0,0 +1 @@
+export * from "./input";

libs/ui/src/atoms/input/input.spec.tsx

@@ -0,0 +1,36 @@
+import { describe, it, expect } from "vitest";
+import { render, screen } from "@testing-library/react";
+import { Input } from "./input";
+
+describe("Test Input Component", () => {
+  it("renders the input with placeholder text", () => {
+    render(<Input placeholder="Placeholder" />);
+    expect(screen.getByPlaceholderText("Placeholder")).toBeInTheDocument();
+  });
+
+  // it("renders the input with different sizes", () => {
+  //   const sizeClasses = {
+  //     sm: "text-[10px] max-h-[28px]",
+  //     md: "text-[12px] max-h-[30px]",
+  //     lg: "text-[15px] max-h-[34px]",
+  //   };
+  //   Object.entries(sizeClasses).forEach(([size, className]) => {
+  //     render(<Input size={size} />);
+  //     expect(screen.getByRole("textbox")).toHaveClass(className);
+  //   });
+  // });
+
+  // it("renders the input with different types", () => {
+  //   const types = ["text", "password", "email", "number"];
+  //   types.forEach((type) => {
+  //     render(<Input type={type} />);
+  //     const input = screen.getByRole("textbox");
+  //     expect(input).toHaveAttribute("type", type);
+  //   });
+  // });
+
+  it("disables the input field when 'disabled' prop is set", () => {
+    render(<Input disabled />);
+    expect(screen.getByRole("textbox")).toBeDisabled();
+  });
+});

libs/ui/src/atoms/input/input.stories.tsx

@@ -0,0 +1,71 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Input } from './input';
+
+const meta: Meta<typeof Input> = {
+  title: 'Components/Input',
+  component: Input,
+  argTypes: {
+    type: {
+      control: 'select',
+      options: ['text', 'email'],
+    },
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Input>;
+
+export const Large: Story = {
+  args: {
+    size: 'lg',
+    placeholder: 'Placeholder',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: 'md',
+    placeholder: 'Placeholder',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'sm',
+    placeholder: 'Placeholder',
+  },
+};
+
+export const TextInput: Story = {
+  args: {
+    size: 'md',
+    type: 'text',
+  },
+};
+
+export const EmailInput: Story = {
+  args: {
+    size: 'md',
+    type: 'email',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    size: 'md',
+    type: 'text',
+    disabled: true,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    size: 'md',
+    type: 'text',
+    error: 'This field is required',
+  },
+};

libs/ui/src/atoms/input/input.tsx

@@ -0,0 +1,60 @@
+import {
+  DetailedHTMLProps,
+  FC,
+  InputHTMLAttributes,
+  ReactElement,
+} from 'react';
+import { cn } from '@imphnen-frontend-service/utils';
+
+type TInputType = 'text' | 'email';
+type TInputSize = 'sm' | 'md' | 'lg';
+
+type TInputProps = Omit<
+  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
+  'size' | 'type'
+> & {
+  type?: TInputType;
+  size?: TInputSize;
+  error?: string;
+};
+
+const sizeClasses: Record<TInputSize, string> = {
+  sm: 'text-[10px] max-h-[28px]',
+  md: 'text-[12px] max-h-[30px]',
+  lg: 'text-[15px] max-h-[34px]',
+};
+
+const disabledClass = 'opacity-50 hover:border-neutral-200 cursor-not-allowed';
+const errorClass =
+  'border-danger-500 hover:border-danger-500 focus:outline-danger-500';
+
+export const Input: FC<TInputProps> = ({
+  size = 'md',
+  type,
+  placeholder = 'Placeholder',
+  disabled,
+  error,
+  className,
+  ...rest
+}): ReactElement => {
+  const mergedClassName = cn(
+    'px-[12px] py-[8px] text-neutral-800 placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree',
+    sizeClasses[size],
+    disabled && disabledClass,
+    error && errorClass,
+    className
+  );
+
+  return (
+    <>
+      <input
+        className={mergedClassName}
+        type={type}
+        disabled={disabled}
+        placeholder={placeholder}
+        {...rest}
+      />
+      {error && <p className="text-danger-500 text-xs mt-1">{error}</p>}
+    </>
+  );
+};

libs/ui/src/atoms/password-input/index.ts

@@ -0,0 +1 @@
+export * from "./password-input";

libs/ui/src/atoms/password-input/password-input.stories.tsx

@@ -0,0 +1,58 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { PasswordInput } from './password-input';
+
+const meta: Meta<typeof PasswordInput> = {
+  title: 'Components/Password Input',
+  component: PasswordInput,
+  argTypes: {
+    size: {
+      control: 'select',
+      options: ['sm', 'md', 'lg'],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof PasswordInput>;
+
+export const Large: Story = {
+  args: {
+    size: 'lg',
+    placeholder: 'Placeholder',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: 'md',
+    placeholder: 'Placeholder',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: 'sm',
+    placeholder: 'Placeholder',
+  },
+};
+
+export const Input: Story = {
+  args: {
+    size: 'md',
+    placeholder: 'Placeholder',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    size: 'md',
+    disabled: true,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    size: 'md',
+    error: 'This field is required',
+  },
+};

libs/ui/src/atoms/password-input/password-input.tsx

@@ -0,0 +1,111 @@
+import {
+  DetailedHTMLProps,
+  FC,
+  InputHTMLAttributes,
+  ReactElement,
+  useState,
+} from 'react';
+import { cn } from '@imphnen-frontend-service/utils';
+import { Button } from '@imphnen-frontend-service/ui/atoms';
+import { EyeInvisibleOutlined, EyeOutlined } from '@ant-design/icons';
+
+type TPasswordInputType = 'password';
+type TPasswordInputSize = 'sm' | 'md' | 'lg';
+
+type TPasswordInputProps = Omit<
+  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
+  'size' | 'type'
+> & {
+  type?: TPasswordInputType;
+  size?: TPasswordInputSize;
+  error?: string;
+};
+
+const sizeClasses: Record<TPasswordInputSize, string> = {
+  sm: 'text-[10px] max-h-[28px]',
+  md: 'text-[12px] max-h-[30px]',
+  lg: 'text-[15px] max-h-[34px]',
+};
+
+const iconSizeClasses: Record<TPasswordInputSize, string> = {
+  sm: 'text-[10px]',
+  md: 'text-[12px]',
+  lg: 'text-[16px]',
+};
+
+const disabledClass = 'opacity-50 hover:border-neutral-200 cursor-not-allowed';
+const errorClass =
+  'border-danger-500 hover:border-danger-500 focus:outline-danger-500';
+
+export const PasswordInput: FC<TPasswordInputProps> = ({
+  size = 'md',
+  placeholder = 'Placeholder',
+  disabled,
+  error,
+  className,
+  ...rest
+}): ReactElement => {
+  const [showPassword, setShowPassword] = useState(false);
+
+  const togglePasswordVisibility = () => {
+    if (!disabled) setShowPassword((prev) => !prev);
+  };
+
+  const mergedClassName = cn(
+    'px-[12px] py-[8px] text-neutral-800 placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree',
+    sizeClasses[size],
+    disabled && disabledClass,
+    error && errorClass,
+    className
+  );
+
+  return (
+    <>
+      <div
+        className={cn(
+          'relative inline-flex items-center border border-neutral-200 rounded-md',
+          mergedClassName
+        )}
+      >
+        <input
+          className="focus:outline-0"
+          type={showPassword ? 'text' : 'password'}
+          disabled={disabled}
+          placeholder={placeholder}
+          {...rest}
+        />
+        <div className="absolute end-0 px-[12px] h-full flex items-center">
+          <Button
+            variant="text"
+            size={size}
+            onClick={togglePasswordVisibility}
+            className={cn(
+              'relative aspect-square -me-[10px] p-[6px]',
+              iconSizeClasses[size],
+              disabled && 'cursor-not-allowed'
+            )}
+          >
+            {showPassword ? (
+              <EyeInvisibleOutlined
+                style={{
+                  color: error
+                    ? 'var(--color-danger-500)'
+                    : 'var(--color-neutral-500)',
+                }}
+              />
+            ) : (
+              <EyeOutlined
+                style={{
+                  color: error
+                    ? 'var(--color-danger-500)'
+                    : 'var(--color-neutral-500)',
+                }}
+              />
+            )}
+          </Button>
+        </div>
+      </div>
+      {error && <p className="text-danger-500 text-xs mt-1">{error}</p>}
+    </>
+  );
+};

libs/ui/src/atoms/textarea/index.ts

@@ -0,0 +1 @@
+export * from "./textarea";

libs/ui/src/atoms/textarea/textarea.stories.tsx

@@ -0,0 +1,49 @@
+import { Meta, StoryObj } from "@storybook/react";
+import { Textarea } from "./textarea";
+
+const meta: Meta = {
+  title: "Components/Textarea",
+  component: Textarea,
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["sm", "md", "lg"],
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof Textarea>;
+
+export const Large: Story = {
+  args: {
+    size: "lg",
+    placeholder: "Placeholder",
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    size: "md",
+  },
+};
+
+export const Small: Story = {
+  args: {
+    size: "sm",
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    size: "md",
+    disabled: true,
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    size: "md",
+    error: "Error message",
+  },
+};

libs/ui/src/atoms/textarea/textarea.tsx

@@ -0,0 +1,59 @@
+import { cn } from '@imphnen-frontend-service/utils';
+import {
+  DetailedHTMLProps,
+  FC,
+  ReactElement,
+  TextareaHTMLAttributes,
+} from 'react';
+
+type TTextareaSize = 'sm' | 'md' | 'lg';
+
+type TTextareaProps = Omit<
+  DetailedHTMLProps<
+    TextareaHTMLAttributes<HTMLTextAreaElement>,
+    HTMLTextAreaElement
+  >,
+  'size'
+> & {
+  size?: TTextareaSize;
+  error?: string;
+};
+
+const sizeClasses: Record<TTextareaSize, string> = {
+  sm: 'text-[10px]',
+  md: 'text-[12px]',
+  lg: 'text-[15px]',
+};
+
+const disabledClass = 'opacity-50 hover:border-neutral-200 cursor-not-allowed';
+const errorClass =
+  'border-danger-500 hover:border-danger-500 focus:outline-danger-500';
+
+export const Textarea: FC<TTextareaProps> = ({
+  size = 'md',
+  placeholder = 'Placeholder',
+  disabled,
+  error,
+  className,
+  ...rest
+}): ReactElement => {
+  const mergedClassName = cn(
+    'rounded-md border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 px-[12px] py-[8px] invalid:border-danger-500 invalid:text-danger-500',
+    sizeClasses[size],
+    disabled && disabledClass,
+    error && errorClass,
+    className
+  );
+  return (
+    <>
+      <textarea
+        className={mergedClassName}
+        placeholder={placeholder}
+        disabled={disabled}
+        style={{ resize: disabled ? 'none' : 'both' }}
+        {...rest}
+      ></textarea>
+      {error && <p className="text-danger-500 text-xs">{error}</p>}
+    </>
+  );
+};