From cafdb290249f75b2aa93570320eb4ab497c9ee39 Mon Sep 17 00:00:00 2001 From: Hafid Nur Date: Thu, 27 Mar 2025 15:59:02 +0700 Subject: [PATCH] feat: Refactor datatable and pagination component and add storybook - Refactor nama component dari datatable dan pagination mengikuti codebase - Buat storybook untuk preview dari masing-masing komponen --- .../src/app/accounts/components/index.ts | 2 - apps/backoffice/src/app/accounts/page.tsx | 3 +- libs/ui/src/molecules/index.ts | 1 + libs/ui/src/molecules/pagination/index.ts | 1 + .../pagination/pagination.stories.tsx | 23 ++++++++ .../src/molecules/pagination/pagination.tsx | 2 +- .../organisms/datatable/datatable.stories.tsx | 56 +++++++++++++++++++ .../ui/src/organisms/datatable/datatable.tsx | 6 +- libs/ui/src/organisms/datatable/index.ts | 1 + libs/ui/src/organisms/index.ts | 7 ++- 10 files changed, 93 insertions(+), 9 deletions(-) delete mode 100644 apps/backoffice/src/app/accounts/components/index.ts create mode 100644 libs/ui/src/molecules/pagination/index.ts create mode 100644 libs/ui/src/molecules/pagination/pagination.stories.tsx rename apps/backoffice/src/app/accounts/components/Pagination.tsx => libs/ui/src/molecules/pagination/pagination.tsx (98%) create mode 100644 libs/ui/src/organisms/datatable/datatable.stories.tsx rename apps/backoffice/src/app/accounts/components/DataTable.tsx => libs/ui/src/organisms/datatable/datatable.tsx (91%) create mode 100644 libs/ui/src/organisms/datatable/index.ts diff --git a/apps/backoffice/src/app/accounts/components/index.ts b/apps/backoffice/src/app/accounts/components/index.ts deleted file mode 100644 index 887ee93..0000000 --- a/apps/backoffice/src/app/accounts/components/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from './DataTable'; -export * from './Pagination'; diff --git a/apps/backoffice/src/app/accounts/page.tsx b/apps/backoffice/src/app/accounts/page.tsx index 357b380..93f7611 100644 --- a/apps/backoffice/src/app/accounts/page.tsx +++ b/apps/backoffice/src/app/accounts/page.tsx @@ -1,7 +1,8 @@ import { FC, ReactElement, useState } from 'react'; import { FilterOutlined, SearchOutlined } from '@ant-design/icons'; import { Button, Input } from '@imphnen-frontend-service/ui/atoms'; -import { DataTable, Pagination } from './components'; +import { Pagination } from '@imphnen-frontend-service/ui/molecules'; +import { DataTable } from '@imphnen-frontend-service/ui/organisms'; // Mock data for demonstration const mockData = Array.from({ length: 20 }, (_, i) => ({ diff --git a/libs/ui/src/molecules/index.ts b/libs/ui/src/molecules/index.ts index 14dcfcb..dbe5a6d 100644 --- a/libs/ui/src/molecules/index.ts +++ b/libs/ui/src/molecules/index.ts @@ -1 +1,2 @@ export * from './input-form'; +export * from './pagination'; diff --git a/libs/ui/src/molecules/pagination/index.ts b/libs/ui/src/molecules/pagination/index.ts new file mode 100644 index 0000000..cb72765 --- /dev/null +++ b/libs/ui/src/molecules/pagination/index.ts @@ -0,0 +1 @@ +export * from './pagination'; diff --git a/libs/ui/src/molecules/pagination/pagination.stories.tsx b/libs/ui/src/molecules/pagination/pagination.stories.tsx new file mode 100644 index 0000000..43b1888 --- /dev/null +++ b/libs/ui/src/molecules/pagination/pagination.stories.tsx @@ -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; + +export default meta; + +export const Default: StoryObj = { + args: { + currentPage: 1, + totalPages: 5, + onPageChange: (page: number) => console.log('Page changed to:', page), + }, +}; diff --git a/apps/backoffice/src/app/accounts/components/Pagination.tsx b/libs/ui/src/molecules/pagination/pagination.tsx similarity index 98% rename from apps/backoffice/src/app/accounts/components/Pagination.tsx rename to libs/ui/src/molecules/pagination/pagination.tsx index 45db0b7..4bd82e2 100644 --- a/apps/backoffice/src/app/accounts/components/Pagination.tsx +++ b/libs/ui/src/molecules/pagination/pagination.tsx @@ -1,7 +1,7 @@ import { FC, ReactElement } from 'react'; import { LeftOutlined, RightOutlined } from '@ant-design/icons'; -interface PaginationProps { +export interface PaginationProps { currentPage: number; totalPages: number; onPageChange: (page: number) => void; diff --git a/libs/ui/src/organisms/datatable/datatable.stories.tsx b/libs/ui/src/organisms/datatable/datatable.stories.tsx new file mode 100644 index 0000000..beacc38 --- /dev/null +++ b/libs/ui/src/organisms/datatable/datatable.stories.tsx @@ -0,0 +1,56 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import DataTable from './datatable'; + +const meta = { + title: 'Organisms/DataTable', + component: DataTable, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + data: [ + { + id: 1, + name: 'John Doe', + email: 'john@example.com', + phone: '123-456-7890', + address: '123 Main St', + }, + { + id: 2, + name: 'Jane Smith', + email: 'jane@example.com', + phone: '987-654-3210', + address: '456 Elm St', + }, + ], + onEdit: (id: number) => console.log('Edit item with id:', id), + }, +}; + +Default.args = { + data: [ + { + id: 1, + name: 'John Doe', + email: 'john@example.com', + phone: '123-456-7890', + address: '123 Main St', + }, + { + id: 2, + name: 'Jane Smith', + email: 'jane@example.com', + phone: '987-654-3210', + address: '456 Elm St', + }, + ], + onEdit: (id: number) => console.log('Edit item with id:', id), +}; diff --git a/apps/backoffice/src/app/accounts/components/DataTable.tsx b/libs/ui/src/organisms/datatable/datatable.tsx similarity index 91% rename from apps/backoffice/src/app/accounts/components/DataTable.tsx rename to libs/ui/src/organisms/datatable/datatable.tsx index 5581679..202bd3d 100644 --- a/apps/backoffice/src/app/accounts/components/DataTable.tsx +++ b/libs/ui/src/organisms/datatable/datatable.tsx @@ -1,6 +1,6 @@ import { FC, ReactElement } from 'react'; import { EditOutlined } from '@ant-design/icons'; -import { Button } from '@imphnen-frontend-service/ui/atoms'; +import { Button } from '../../atoms'; // Use relative import for Button interface DataTableProps { data: Array<{ @@ -14,6 +14,8 @@ interface DataTableProps { } export const DataTable: FC = ({ + // Exporting DataTableProps for use in stories + data, onEdit, }): ReactElement => { @@ -65,4 +67,4 @@ export const DataTable: FC = ({ ); }; -export default DataTable; +export default DataTable; // Default export of DataTable component diff --git a/libs/ui/src/organisms/datatable/index.ts b/libs/ui/src/organisms/datatable/index.ts new file mode 100644 index 0000000..1c33f72 --- /dev/null +++ b/libs/ui/src/organisms/datatable/index.ts @@ -0,0 +1 @@ +export * from './datatable'; diff --git a/libs/ui/src/organisms/index.ts b/libs/ui/src/organisms/index.ts index 541cfeb..168bd45 100644 --- a/libs/ui/src/organisms/index.ts +++ b/libs/ui/src/organisms/index.ts @@ -1,3 +1,4 @@ -export * from "./navbar"; -export * from "./modals-gacha"; -export * from "./backoffice-sidebar" +export * from './navbar'; +export * from './modals-gacha'; +export * from './backoffice-sidebar' +export * from './datatable'