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/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<Account>[] = [

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

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;

libs/ui/src/atoms/button/button.tsx

@@ -51,7 +51,7 @@ export const Button: FC<TButtonProps> = ({
   ...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],

libs/ui/src/atoms/input/input.tsx

@@ -45,7 +45,7 @@ export const Input: FC<TInputProps> = ({
   };
 
   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

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',

libs/ui/src/organisms/modal-backoffice/index.ts

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

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 (
+    <div
+      className={`w-[400px] bg-primary-50 rounded-lg p-[40px] gap-[32px] ${
+        className || ''
+      }`}
+      {...rest}
+    >
+      {children}
+    </div>
+  );
+};
+
+export default ModalBackoffice;

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<typeof ModalBackoffice> = {
+  title: 'Organisms/Modal Backoffice',
+  component: ModalBackoffice,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+} satisfies Meta<typeof ModalBackoffice>;
+
+export default meta;
+type Story = StoryObj<typeof ModalBackoffice>;
+
+export const Default: Story = {
+  args: {
+    // isOpen: true,
+    // onClose: () => console.log('Modal closed'),
+    // title: 'Sample Modal',
+    children: (
+      <>
+        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+          Modal Title
+        </h2>
+        <p className="text-p3 text-neutral-400">
+          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?
+        </p>
+        <div className="flex flex-col gap-4"></div>
+      </>
+    ),
+  },
+};
+
+export const TambahItemGacha: Story = {
+  args: {
+    children: (
+      <div className="flex flex-col gap-8">
+        <div>
+          <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+            Tambah Item Gacha
+          </h2>
+          <p className="text-p3 text-neutral-400">
+            Lengkapi detail di bawah ini untuk menambahkan item gacha
+          </p>
+        </div>
+        <div className="flex flex-col gap-4">
+          <InputForm
+            label="Nama Hadiah"
+            type="text"
+            placeholder="Masukkan Nama Hadiah"
+            size="lg"
+            className="w-full"
+          />
+          <InputForm
+            label="Chance Rate"
+            type="text"
+            placeholder="Masukkan Chance Rate"
+            size="lg"
+            className="w-full"
+          />
+          <InputForm
+            label="Foto Barang"
+            type="text"
+            placeholder=".jpg, .jpeg, atau .png"
+            size="lg"
+            className="w-full"
+          />
+        </div>
+        <Button variant="primary" size="lg" className="w-full">
+          Tambahkan Item
+        </Button>
+      </div>
+    ),
+  },
+};
+
+export const TambahItem: Story = {
+  args: {
+    children: (
+      <div className="flex flex-col gap-8 text-center">
+        <div>
+          <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+            Tambah Item
+          </h2>
+          <p className="text-p3 text-neutral-400">
+            Apakah kamu yakin ingin
+            <br /> menambahkan item ini?
+          </p>
+        </div>
+        <div className="flex gap-4">
+          <Button variant="bordered" size="lg" className="w-full">
+            Batal
+          </Button>
+          <Button variant="primary" size="lg" className="w-full">
+            Tambahkan
+          </Button>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const EditItemGacha: Story = {
+  args: {
+    children: (
+      <div className="flex flex-col gap-8">
+        <div>
+          <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+            Edit Item Gacha
+          </h2>
+          <p className="text-p3 text-neutral-400">
+            Silakan mengubah detail dari item yang diperlukan
+          </p>
+        </div>
+        <div className="flex flex-col gap-4">
+          <InputForm
+            label="Nama Hadiah"
+            type="text"
+            placeholder="Masukkan Nama Hadiah"
+            size="lg"
+            className="w-full"
+          />
+          <InputForm
+            label="Chance Rate"
+            type="text"
+            placeholder="Masukkan Chance Rate"
+            size="lg"
+            className="w-full"
+          />
+          <InputForm
+            label="Foto Barang"
+            type="text"
+            placeholder=".jpg, .jpeg, atau .png"
+            size="lg"
+            className="w-full"
+          />
+        </div>
+        <Button variant="primary" size="lg" className="w-full">
+          Perbarui Item
+        </Button>
+      </div>
+    ),
+  },
+};
+
+export const UpdateItem: Story = {
+  args: {
+    children: (
+      <div className="flex flex-col gap-8 text-center">
+        <div>
+          <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+            Update Item
+          </h2>
+          <p className="text-p3 text-neutral-400">
+            Apakah kamu yakin dengan
+            <br /> perubahan yang dilakukan?
+          </p>
+        </div>
+        <div className="flex gap-4">
+          <Button variant="bordered" size="lg" className="w-full">
+            Batal
+          </Button>
+          <Button variant="primary" size="lg" className="w-full">
+            Update
+          </Button>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const DeleteItem: Story = {
+  args: {
+    children: (
+      <div className="flex flex-col gap-8 text-center">
+        <img
+          src="/chibi-delete.webp"
+          alt="Delete item?"
+          width={148}
+          className="self-center"
+        />
+        <div>
+          <h2 className="text-p1 font-semibold text-danger-500 mb-3">
+            Delete Item
+          </h2>
+          <p className="text-p3 text-neutral-400">
+            Apakah kamu yakin untuk menghapus item ini?
+          </p>
+        </div>
+        <div className="flex gap-4">
+          <Button variant="secondary" size="lg" className="w-full">
+            Batal Hapus
+          </Button>
+          <Button variant="danger" size="lg" className="w-full">
+            Hapus Item
+          </Button>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const EditDataAkun: Story = {
+  args: {
+    children: (
+      <div className="flex flex-col gap-8">
+        <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+          Edit Data Akun
+        </h2>
+
+        <div className="flex flex-col gap-4">
+          <InputForm
+            label="Nama Lengkap"
+            type="text"
+            placeholder="Masukkan Nama Lengkap"
+            value="Ahmad Wiyana"
+            size="lg"
+            className="w-full"
+          />
+          <InputForm
+            label="Email"
+            type="text"
+            placeholder="Masukkan Email"
+            value="fullname23@gmail.com"
+            size="lg"
+            className="w-full"
+          />
+          <InputForm
+            label="Nomor Telepon"
+            type="text"
+            placeholder="Masukkan Nomor Telepon"
+            value="081904423804"
+            size="lg"
+            className="w-full"
+          />
+          <InputForm
+            label="Alamat"
+            type="text"
+            placeholder="Masukkan Alamat"
+            value="Jl. Pantai Cibaduyut Indah"
+            size="lg"
+            className="w-full"
+          />
+        </div>
+        <Button variant="primary" size="lg" className="w-full">
+          Perbarui Data
+        </Button>
+      </div>
+    ),
+  },
+};
+
+export const UpdateDataAkun: Story = {
+  args: {
+    children: (
+      <div className="flex flex-col gap-8 text-center">
+        <div>
+          <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+            Update Data
+          </h2>
+          <p className="text-p3 text-neutral-400">
+            Apakah kamu yakin dengan
+            <br /> perubahan yang dilakukan?
+          </p>
+        </div>
+        <div className="flex gap-4">
+          <Button variant="bordered" size="lg" className="w-full">
+            Batal
+          </Button>
+          <Button variant="primary" size="lg" className="w-full">
+            Update
+          </Button>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const ValidasiTransaksi: Story = {
+  args: {
+    children: (
+      <div className="flex flex-col gap-8">
+        <h2 className="text-p1 font-semibold text-primary-500 ">
+          Validasi Transaksi
+        </h2>
+
+        <InputForm
+          label="Nomor Transaksi"
+          type="text"
+          placeholder="Masukkan Nomor Transaksi"
+          value="2502133Y9AFVBO"
+          size="lg"
+          className="w-full"
+        />
+        <div className="flex gap-4">
+          <Button
+            variant="bordered"
+            size="lg"
+            className="w-full border-danger-500 text-danger-500 hover:border-danger-700 hover:text-danger-700"
+          >
+            Tidak Valid
+          </Button>
+          <Button variant="primary" size="lg" className="w-full">
+            Valid
+          </Button>
+        </div>
+      </div>
+    ),
+  },
+};
+
+export const ProsesDelivery: Story = {
+  args: {
+    children: (
+      <div className="flex flex-col gap-8">
+        <div>
+          <h2 className="text-p1 font-semibold text-primary-500 mb-3">
+            Delivery Process
+          </h2>
+
+          <p className="text-p3 text-neutral-400">
+            Lakukan pengiriman hadiah gacha untuk pengguna di bawah ini, jika
+            sudah ubah status menjadi “Delivered”.
+          </p>
+        </div>
+
+        <div className="flex flex-col gap-4">
+          <InputForm
+            label="Nama Lengkap"
+            type="text"
+            placeholder="Masukkan Nama Lengkap"
+            value="Ahmad Wiyana"
+            size="lg"
+            className="w-full"
+          />
+          <InputForm
+            label="Item yang didapatkan"
+            type="text"
+            placeholder="Masukkan Nama Item"
+            value="Lanyard + ID Card"
+            size="lg"
+            className="w-full"
+          />
+          <InputForm
+            label="Alamat Pengiriman"
+            type="text"
+            placeholder="Masukkan Alamat Pengiriman"
+            value="Jl. Pantai Cibaduyut Indah"
+            size="lg"
+            className="w-full"
+          />
+          <InputForm
+            label="Status"
+            type="text"
+            placeholder="Isi Status Pengiriman"
+            value="Lanyard + ID Card"
+            size="lg"
+            className="w-full"
+          />
+        </div>
+        <Button variant="primary" size="lg" className="w-full">
+          Tambahkan Item
+        </Button>
+      </div>
+    ),
+  },
+};