From 1594be9d469e637e8335b736edde371fce157e45 Mon Sep 17 00:00:00 2001 From: Hafid Nur Date: Sat, 29 Mar 2025 02:34:02 +0700 Subject: [PATCH] feat: slicing modal backoffice - Slicing desain modal untuk backoffice di storybook component ModalBackoffice - Update static directory untuk storybook agar dapat membaca gambar pada folder public - Minor edit component button & input --- apps/backoffice/public/chibi-delete.webp | Bin 0 -> 13742 bytes apps/backoffice/src/app/accounts/page.tsx | 2 +- apps/backoffice/src/app/prizes/page.tsx | 2 +- libs/ui/.storybook/main.ts | 4 + libs/ui/src/atoms/button/button.tsx | 2 +- libs/ui/src/atoms/input/input.tsx | 2 +- .../input-form/input-form.stories.tsx | 2 +- .../src/organisms/modal-backoffice/index.ts | 1 + .../modal-backoffice/modal-backoffice.tsx | 25 ++ .../modal-backoffice/modal.stories.tsx | 373 ++++++++++++++++++ 10 files changed, 408 insertions(+), 5 deletions(-) create mode 100644 apps/backoffice/public/chibi-delete.webp create mode 100644 libs/ui/src/organisms/modal-backoffice/index.ts create mode 100644 libs/ui/src/organisms/modal-backoffice/modal-backoffice.tsx create mode 100644 libs/ui/src/organisms/modal-backoffice/modal.stories.tsx diff --git a/apps/backoffice/public/chibi-delete.webp b/apps/backoffice/public/chibi-delete.webp new file mode 100644 index 0000000000000000000000000000000000000000..c61886e2f1f1dd7dd85b70a6156357c061ca87fc GIT binary patch literal 13742 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 ({ name: i === 0 ? 'Ahmad Wijuana' : 'Nama Lengkap', email: 'fullname23@gmail.com', phone: '081904423804', - address: 'Jl. Pantai Cibaduyut Indonesia', + address: 'Jl. Pantai Cibaduyut Indah', })); const columns: ColumnDef[] = [ diff --git a/apps/backoffice/src/app/prizes/page.tsx b/apps/backoffice/src/app/prizes/page.tsx index e53327e..f7828c4 100644 --- a/apps/backoffice/src/app/prizes/page.tsx +++ b/apps/backoffice/src/app/prizes/page.tsx @@ -48,7 +48,7 @@ const mockData: Prize[] = Array.from({ length: 90 }, (_, i) => ({ ? 'unchecked' : 'valid') as Status, items: items[i % items.length], - address: 'Jl. Pantai Cibaduyut Indonesia', + address: 'Jl. Pantai Cibaduyut Indah', status: (i % 3 === 0 ? 'unchecked' : i % 5 === 0 diff --git a/libs/ui/.storybook/main.ts b/libs/ui/.storybook/main.ts index 6b4496c..0b23e83 100644 --- a/libs/ui/.storybook/main.ts +++ b/libs/ui/.storybook/main.ts @@ -11,6 +11,10 @@ const config: StorybookConfig = { }, }, }, + staticDirs: [ + '../../../apps/backoffice/public', + '../../../apps/gacha/public', + '../../../apps/dimentorin/public', ], }; export default config; diff --git a/libs/ui/src/atoms/button/button.tsx b/libs/ui/src/atoms/button/button.tsx index 39483e5..dc831b5 100644 --- a/libs/ui/src/atoms/button/button.tsx +++ b/libs/ui/src/atoms/button/button.tsx @@ -51,7 +51,7 @@ export const Button: FC = ({ ...rest }): ReactElement => { const mergedClassName = cn( - 'inline-flex items-center justify-center font-[600] rounded-lg px-[16px] py-[10px]', + 'inline-flex items-center justify-center font-[600] rounded-md px-[16px] py-[10px]', 'transition-colors duration-200 cursor-pointer', sizeClasses[size], variantClasses[variant], diff --git a/libs/ui/src/atoms/input/input.tsx b/libs/ui/src/atoms/input/input.tsx index a20ed2d..72f8575 100644 --- a/libs/ui/src/atoms/input/input.tsx +++ b/libs/ui/src/atoms/input/input.tsx @@ -45,7 +45,7 @@ export const Input: FC = ({ }; 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 min-w-70', + 'px-[12px] py-[8px] text-neutral-800 bg-white placeholder:text-neutral-300 border border-neutral-200 hover:border-blue-300 focus:outline-1 focus:outline-blue-500 rounded-md font-bai-jamjuree min-w-70', sizeClasses[size].textSize, disabled && disabledClass, className diff --git a/libs/ui/src/molecules/input-form/input-form.stories.tsx b/libs/ui/src/molecules/input-form/input-form.stories.tsx index 024805a..eae33dc 100644 --- a/libs/ui/src/molecules/input-form/input-form.stories.tsx +++ b/libs/ui/src/molecules/input-form/input-form.stories.tsx @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/react'; import { InputForm } from './input-form'; const meta = { - title: 'Molecules/InputForm', + title: 'Molecules/Input Form', component: InputForm, parameters: { layout: 'centered', diff --git a/libs/ui/src/organisms/modal-backoffice/index.ts b/libs/ui/src/organisms/modal-backoffice/index.ts new file mode 100644 index 0000000..47fe845 --- /dev/null +++ b/libs/ui/src/organisms/modal-backoffice/index.ts @@ -0,0 +1 @@ +export * from './modal-backoffice'; diff --git a/libs/ui/src/organisms/modal-backoffice/modal-backoffice.tsx b/libs/ui/src/organisms/modal-backoffice/modal-backoffice.tsx new file mode 100644 index 0000000..5c9ba0d --- /dev/null +++ b/libs/ui/src/organisms/modal-backoffice/modal-backoffice.tsx @@ -0,0 +1,25 @@ +import { ReactElement, ReactNode } from 'react'; + +interface ModalBackofficeProps { + children: ReactNode; + className?: string; +} + +export const ModalBackoffice = ({ + children, + className, + ...rest +}: ModalBackofficeProps): ReactElement => { + return ( +
+ {children} +
+ ); +}; + +export default ModalBackoffice; diff --git a/libs/ui/src/organisms/modal-backoffice/modal.stories.tsx b/libs/ui/src/organisms/modal-backoffice/modal.stories.tsx new file mode 100644 index 0000000..2eb38e1 --- /dev/null +++ b/libs/ui/src/organisms/modal-backoffice/modal.stories.tsx @@ -0,0 +1,373 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import { ModalBackoffice } from './modal-backoffice'; +import { InputForm } from '../../molecules'; +import { Button } from '../../atoms'; + +const meta: Meta = { + title: 'Organisms/Modal Backoffice', + component: ModalBackoffice, + tags: ['autodocs'], + parameters: { + layout: 'centered', + }, +} satisfies Meta; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + // isOpen: true, + // onClose: () => console.log('Modal closed'), + // title: 'Sample Modal', + children: ( + <> +

+ Modal Title +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quas repellat + rerum doloremque dolorem fugit architecto eos blanditiis ratione + facere? Esse dolores inventore deleniti. Dicta voluptatem dolore vel + quia amet dolorem? +

+
+ + ), + }, +}; + +export const TambahItemGacha: Story = { + args: { + children: ( +
+
+

+ Tambah Item Gacha +

+

+ Lengkapi detail di bawah ini untuk menambahkan item gacha +

+
+
+ + + +
+ +
+ ), + }, +}; + +export const TambahItem: Story = { + args: { + children: ( +
+
+

+ Tambah Item +

+

+ Apakah kamu yakin ingin +
menambahkan item ini? +

+
+
+ + +
+
+ ), + }, +}; + +export const EditItemGacha: Story = { + args: { + children: ( +
+
+

+ Edit Item Gacha +

+

+ Silakan mengubah detail dari item yang diperlukan +

+
+
+ + + +
+ +
+ ), + }, +}; + +export const UpdateItem: Story = { + args: { + children: ( +
+
+

+ Update Item +

+

+ Apakah kamu yakin dengan +
perubahan yang dilakukan? +

+
+
+ + +
+
+ ), + }, +}; + +export const DeleteItem: Story = { + args: { + children: ( +
+ Delete item? +
+

+ Delete Item +

+

+ Apakah kamu yakin untuk menghapus item ini? +

+
+
+ + +
+
+ ), + }, +}; + +export const EditDataAkun: Story = { + args: { + children: ( +
+

+ Edit Data Akun +

+ +
+ + + + +
+ +
+ ), + }, +}; + +export const UpdateDataAkun: Story = { + args: { + children: ( +
+
+

+ Update Data +

+

+ Apakah kamu yakin dengan +
perubahan yang dilakukan? +

+
+
+ + +
+
+ ), + }, +}; + +export const ValidasiTransaksi: Story = { + args: { + children: ( +
+

+ Validasi Transaksi +

+ + +
+ + +
+
+ ), + }, +}; + +export const ProsesDelivery: Story = { + args: { + children: ( +
+
+

+ Delivery Process +

+ +

+ Lakukan pengiriman hadiah gacha untuk pengguna di bawah ini, jika + sudah ubah status menjadi “Delivered”. +

+
+ +
+ + + + +
+ +
+ ), + }, +};