diff --git a/apps/backoffice/public/chibi-delete.webp b/apps/backoffice/public/chibi-delete.webp new file mode 100644 index 0000000..c61886e Binary files /dev/null and b/apps/backoffice/public/chibi-delete.webp differ diff --git a/apps/backoffice/src/app/accounts/page.tsx b/apps/backoffice/src/app/accounts/page.tsx index 5b7233b..404b462 100644 --- a/apps/backoffice/src/app/accounts/page.tsx +++ b/apps/backoffice/src/app/accounts/page.tsx @@ -32,7 +32,7 @@ const mockData: Account[] = Array.from({ length: 90 }, (_, i) => ({ 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”. +

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