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

apps/backoffice/src/app/accounts/components/index.ts

@@ -1,2 +0,0 @@
-export * from './DataTable';
-export * from './Pagination';

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) => ({

libs/ui/src/molecules/index.ts

@@ -1 +1,2 @@
 export * from './input-form';
+export * from './pagination';

libs/ui/src/molecules/pagination/index.ts

@@ -0,0 +1 @@
+export * from './pagination';

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<typeof Pagination>;
+
+export default meta;
+
+export const Default: StoryObj<PaginationProps> = {
+  args: {
+    currentPage: 1,
+    totalPages: 5,
+    onPageChange: (page: number) => console.log('Page changed to:', page),
+  },
+};

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;

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<typeof DataTable>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+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),
+};

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<DataTableProps> = ({
+  // Exporting DataTableProps for use in stories
+
   data,
   onEdit,
 }): ReactElement => {
@@ -65,4 +67,4 @@ export const DataTable: FC<DataTableProps> = ({
   );
 };
 
-export default DataTable;
+export default DataTable; // Default export of DataTable component

libs/ui/src/organisms/datatable/index.ts

@@ -0,0 +1 @@
+export * from './datatable';

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'