Merge branch 'develop' into DimentorinAuth

2025-03-28 19:09:37 +07:00
parent a3887519f9 88c71ccdfa
commit 81fa73935f
39 changed files with 1451 additions and 380 deletions
@@ -1 +1,3 @@
-export * from "./forgot-step";
+export * from "./forgot-step";
+export * from './input-form';
+export * from './pagination';
@@ -0,0 +1 @@
+export * from './input-form';
@@ -0,0 +1,20 @@
+import { render, screen } from '@testing-library/react';
+import InputForm from './input-form';
+
+describe('InputForm Component', () => {
+  it('renders correctly with disabled prop', () => {
+    render(<InputForm label="Test Label" disabled={true} />);
+
+    const input = screen.getByLabelText('Test Label');
+    expect(input).toBeDisabled();
+    expect(input).toHaveClass('opacity-50 cursor-not-allowed');
+  });
+
+  it('renders correctly without disabled prop', () => {
+    render(<InputForm label="Test Label" disabled={false} />);
+
+    const input = screen.getByLabelText('Test Label');
+    expect(input).not.toBeDisabled();
+    expect(input).not.toHaveClass('opacity-50 cursor-not-allowed');
+  });
+});
@@ -0,0 +1,131 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { InputForm } from './input-form';
+
+const meta = {
+  title: 'Molecules/InputForm',
+  component: InputForm,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+Komponen input form yang menggabungkan label dengan kolom input.
+
+## Aksesibilitas
+Ketika prop \`htmlFor\` disediakan:
+- Atribut \`htmlFor\` pada label akan diatur ke nilai tersebut
+- Atribut \`id\` pada input akan otomatis diatur ke nilai yang sama
+- Ini menciptakan asosiasi label-input yang tepat untuk aksesibilitas
+
+Cek dan inspect element pada story With HtmlFor untuk melihat hasilnya.
+
+## Helper Text dan Error
+- Jika prop \`error\` disediakan, akan ditampilkan dalam warna merah di bawah input
+- Jika prop \`helperText\` disediakan dan tidak ada error, akan ditampilkan dalam warna abu-abu di bawah input
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof InputForm>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Large: Story = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    type: 'text',
+    size: 'lg',
+    helperText: 'Helper Text',
+  },
+};
+
+export const Medium: Story = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    type: 'text',
+    size: 'md',
+    helperText: 'Helper Text',
+  },
+};
+
+export const Small: Story = {
+  args: {
+    label: 'Label',
+    placeholder: 'Placeholder',
+    type: 'text',
+    size: 'sm',
+    helperText: 'Helper Text',
+  },
+};
+
+export const Default: Story = {
+  args: {
+    label: 'Default',
+    placeholder: 'Enter your name',
+    type: 'text',
+    size: 'md',
+  },
+};
+
+export const PasswordInput: Story = {
+  args: {
+    label: 'Password',
+    placeholder: 'Enter your password',
+    type: 'password',
+    size: 'md',
+  },
+};
+
+export const WithHelperText: Story = {
+  args: {
+    label: 'Email',
+    placeholder: 'Enter your email',
+    type: 'email',
+    size: 'md',
+    helperText: 'We will never share your email',
+  },
+};
+
+export const WithoutHelperText: Story = {
+  args: {
+    label: 'Username',
+    placeholder: 'Enter your username',
+    type: 'text',
+    size: 'md',
+  },
+};
+
+export const WithError: Story = {
+  args: {
+    label: 'Username',
+    placeholder: 'Enter your username',
+    type: 'text',
+    size: 'md',
+    error: 'This field is required',
+  },
+};
+
+export const WithHtmlFor: Story = {
+  args: {
+    label: 'Full Name',
+    placeholder: 'Enter your full name',
+    type: 'text',
+    size: 'md',
+    htmlFor: 'fullname-input',
+    helperText: 'Click on the label',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    label: 'Disabled',
+    placeholder: 'This field is disabled',
+    type: 'text',
+    size: 'md',
+    disabled: true,
+  },
+};
@@ -0,0 +1,92 @@
+import {
+  DetailedHTMLProps,
+  FC,
+  InputHTMLAttributes,
+  ReactElement,
+} from 'react';
+import { Input } from '../../atoms';
+import { cn } from '@imphnen-frontend-service/utils';
+
+type TInputType = 'text' | 'email' | 'password';
+type TInputSize = 'sm' | 'md' | 'lg';
+
+type TInputFormProps = Omit<
+  DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>,
+  'size' | 'type'
+> & {
+  label: string;
+  type?: TInputType;
+  size?: TInputSize;
+  error?: string;
+  disabled?: boolean;
+
+  helperText?: string;
+  htmlFor?: string;
+};
+
+const sizeClasses: Record<TInputSize, { label: string; helperText: string }> = {
+  lg: {
+    label: 'text-p3 font-medium',
+    helperText: 'text-label3 font-normal',
+  },
+  md: {
+    label: 'text-label1 font-medium',
+    helperText: 'text-label2 font-normal',
+  },
+  sm: {
+    label: 'text-label2 font-medium',
+    helperText: 'text-label2 font-normal',
+  },
+};
+
+export const InputForm: FC<TInputFormProps> = ({
+  label,
+  placeholder,
+  type = 'text',
+  size = 'md',
+  error,
+  helperText,
+  htmlFor,
+  className,
+  disabled,
+  ...rest
+}): ReactElement => {
+  return (
+    <div className="flex gap-[8px] flex-col">
+      <label
+        htmlFor={htmlFor}
+        className={cn(
+          'items-start justify-item-start text-start',
+          sizeClasses[size].label
+        )}
+      >
+        {label}
+      </label>
+      <Input
+        {...(htmlFor && { id: htmlFor })}
+        placeholder={placeholder}
+        type={type}
+        size={size}
+        disabled={disabled}
+        className={cn(
+          error &&
+            'border-danger-500 hover:border-danger-500 focus:outline-danger-500',
+          className,
+          disabled && 'opacity-50 cursor-not-allowed' // Add styles for disabled state
+        )}
+        {...rest}
+      />
+      {error ? (
+        <p className="text-danger-500 text-xs mt-1">{error}</p>
+      ) : (
+        helperText && (
+          <p className={cn('text-cs mt-1', sizeClasses[size].helperText)}>
+            {helperText}
+          </p>
+        )
+      )}
+    </div>
+  );
+};
+
+export default InputForm;
@@ -0,0 +1 @@
+export * from './pagination';
@@ -0,0 +1,23 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import Pagination from './pagination';
+
+import { PaginationProps } from './index'; // Import PaginationProps
+
+const meta = {
+  title: 'Molecules/Pagination',
+  component: Pagination,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof Pagination>;
+
+export default meta;
+
+export const Default: StoryObj<PaginationProps> = {
+  args: {
+    currentPage: 1,
+    totalPages: 5,
+    onPageChange: (page: number) => console.log('Page changed to:', page),
+  },
+};
@@ -0,0 +1,93 @@
+import { Table } from '@tanstack/react-table';
+import { ArrowLeftOutlined, ArrowRightOutlined } from '@ant-design/icons';
+
+interface PaginationProps<T> {
+  table: Table<T>;
+}
+
+export const Pagination = <T,>({ table }: PaginationProps<T>) => {
+  return (
+    <div className="flex items-center justify-center gap-[40px]">
+      <button
+        className="disabled:opacity-50 cursor-pointer"
+        onClick={() => table.previousPage()}
+        disabled={!table.getCanPreviousPage()}
+        aria-label="Previous page"
+      >
+        <ArrowLeftOutlined className="text-[16px] text-neutral-800" />
+      </button>
+
+      <div className="flex gap-4 items-baseline">
+        {table.getPageCount() <= 8 ? (
+          Array.from({ length: table.getPageCount() }, (_, index) => (
+            <button
+              key={index}
+              className={`size-[30px] py-[8px] flex items-center justify-center rounded-md cursor-pointer  ${
+                table.getState().pagination.pageIndex === index
+                  ? 'bg-primary-500 text-white'
+                  : 'bg-primary-100 hover:bg-primary-200'
+              }`}
+              onClick={() => table.setPageIndex(index)}
+            >
+              {index + 1}
+            </button>
+          ))
+        ) : (
+          <>
+            <button
+              onClick={() => table.setPageIndex(0)}
+              className={`size-[30px] py-[8px] flex items-center justify-center rounded-md cursor-pointer ${
+                table.getState().pagination.pageIndex === 0
+                  ? 'bg-primary-500 text-white'
+                  : 'bg-primary-100 hover:bg-primary-200'
+              }`}
+            >
+              1
+            </button>
+            {table.getState().pagination.pageIndex > 3 && <span>...</span>}
+            {Array.from(
+              { length: 5 },
+              (_, index) => table.getState().pagination.pageIndex - 2 + index
+            )
+              .filter((page) => page > 0 && page < table.getPageCount() - 1)
+              .map((page) => (
+                <button
+                  key={page}
+                  onClick={() => table.setPageIndex(page)}
+                  className={`size-[30px] py-[8px] flex items-center justify-center rounded-md cursor-pointer ${
+                    table.getState().pagination.pageIndex === page
+                      ? 'bg-primary-500 text-white'
+                      : 'bg-primary-100 hover:bg-primary-200'
+                  }`}
+                >
+                  {page + 1}
+                </button>
+              ))}
+            {table.getState().pagination.pageIndex <
+              table.getPageCount() - 4 && <span>...</span>}
+            <button
+              onClick={() => table.setPageIndex(table.getPageCount() - 1)}
+              className={`size-[30px] py-[8px] flex items-center justify-center rounded-md cursor-pointer ${
+                table.getState().pagination.pageIndex ===
+                table.getPageCount() - 1
+                  ? 'bg-primary-500 text-white'
+                  : 'bg-primary-100 hover:bg-primary-200'
+              }`}
+            >
+              {table.getPageCount()}
+            </button>
+          </>
+        )}
+      </div>
+
+      <button
+        className="disabled:opacity-50 cursor-pointer"
+        onClick={() => table.nextPage()}
+        disabled={!table.getCanNextPage()}
+        aria-label="Next page"
+      >
+        <ArrowRightOutlined className="text-[16px] text-neutral-800" />
+      </button>
+    </div>
+  );
+};