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
This commit is contained in:
Hafid Nur
Binary file not shown.
|
After Width: | Height: | Size: 13 KiB |
@@ -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>[] = [
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -11,6 +11,10 @@ const config: StorybookConfig = {
|
||||
},
|
||||
},
|
||||
},
|
||||
staticDirs: [
|
||||
'../../../apps/backoffice/public',
|
||||
'../../../apps/gacha/public',
|
||||
'../../../apps/dimentorin/public', ],
|
||||
};
|
||||
|
||||
export default config;
|
||||
|
||||
@@ -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],
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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',
|
||||
|
||||
@@ -0,0 +1 @@
|
||||
export * from './modal-backoffice';
|
||||
@@ -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;
|
||||
@@ -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>
|
||||
),
|
||||
},
|
||||
};
|
||||
Reference in New Issue
Block a user