feat: add Switch component and showcase
- Introduced a new Switch component with variants and status colors. - Created a SwitchShowcase component to demonstrate the Switch functionality. - Updated package.json to include dayjs and rc-component/switch dependencies. - Added styles for the Switch component in switch.style.css. - Updated form.style.css to import switch styles. - Enhanced types for Switch props in types/index.ts. - Updated globals.css with CSS variables for the Switch component.
This commit is contained in:
Firman Ramdhani
@@ -15,6 +15,7 @@
|
||||
"@repo/ui": "workspace:*",
|
||||
"@repo/utils": "workspace:*",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"dayjs": "^1.11.19",
|
||||
"react": "^19.2.3",
|
||||
"react-dom": "^19.2.3",
|
||||
"react-router-dom": "^7.11.0",
|
||||
|
||||
@@ -0,0 +1,220 @@
|
||||
import React, { useState } from 'react';
|
||||
import { Switch } from '@repo/ui';
|
||||
|
||||
export const SwitchShowcase = () => {
|
||||
// State untuk Controlled Switch Demo
|
||||
const [checked, setChecked] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen bg-gray-50 p-8 font-sans text-gray-800">
|
||||
<div className="max-w-4xl mx-auto space-y-10">
|
||||
{/* Header */}
|
||||
<div className="border-b border-gray-200 pb-5">
|
||||
<h1 className="text-3xl font-bold text-gray-900">Switch Component</h1>
|
||||
<p className="mt-2 text-gray-600">Showcase fitur, variant, status, dan state interaksi.</p>
|
||||
</div>
|
||||
|
||||
{/* 1. VARIANTS */}
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-4 text-gray-700">1. Variants</h2>
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-8">
|
||||
{/* Variant: Outlined (Default) */}
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-sm font-medium text-gray-500 uppercase tracking-wider">Outlined (Default)</h3>
|
||||
<p className="text-xs text-gray-400 mb-2">Background transparan saat off.</p>
|
||||
<div className="flex flex-col gap-3">
|
||||
<Switch variant="outlined" label="Outlined Off" />
|
||||
<Switch variant="outlined" defaultChecked label="Outlined On" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* Variant: Filled */}
|
||||
<div className="space-y-2">
|
||||
<h3 className="text-sm font-medium text-gray-500 uppercase tracking-wider">Filled</h3>
|
||||
<p className="text-xs text-gray-400 mb-2">Background abu-abu solid saat off.</p>
|
||||
<div className="flex flex-col gap-3">
|
||||
<Switch variant="filled" label="Filled Off" />
|
||||
<Switch variant="filled" defaultChecked label="Filled On" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 2. STATUS COLORS */}
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-4 text-gray-700">2. Status Colors</h2>
|
||||
<p className="text-sm text-gray-500 mb-4">
|
||||
Warna diterapkan pada state <strong>Checked</strong> dan <strong>Focus Ring</strong>.
|
||||
</p>
|
||||
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<Switch variant="outlined" status="default" defaultChecked />
|
||||
<span className="text-xs font-medium text-gray-500">Default (Brand)</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<Switch variant="outlined" status="success" defaultChecked />
|
||||
<span className="text-xs font-medium text-green-600">Success</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<Switch variant="outlined" status="warning" defaultChecked />
|
||||
<span className="text-xs font-medium text-amber-600">Warning</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<Switch variant="outlined" status="error" defaultChecked />
|
||||
<span className="text-xs font-medium text-red-600">Error</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<Switch variant="outlined" status="info" defaultChecked />
|
||||
<span className="text-xs font-medium text-sky-600">Info</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
|
||||
<div className="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-5 gap-6">
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<Switch variant="filled" status="default" defaultChecked />
|
||||
<span className="text-xs font-medium text-gray-500">Default (Brand)</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<Switch variant="filled" status="success" defaultChecked />
|
||||
<span className="text-xs font-medium text-green-600">Success</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<Switch variant="filled" status="warning" defaultChecked />
|
||||
<span className="text-xs font-medium text-amber-600">Warning</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<Switch variant="filled" status="error" defaultChecked />
|
||||
<span className="text-xs font-medium text-red-600">Error</span>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<Switch variant="filled" status="info" defaultChecked />
|
||||
<span className="text-xs font-medium text-sky-600">Info</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 3. STATES (Loading & Disabled) */}
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-4 text-gray-700">3. States</h2>
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 space-y-8">
|
||||
{/* Disabled State */}
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-500 mb-3">Disabled</h3>
|
||||
<div className="flex gap-6 items-center">
|
||||
<Switch disabled label="Disabled Off" />
|
||||
<Switch disabled defaultChecked label="Disabled On" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<hr className="border-gray-100" />
|
||||
|
||||
{/* Loading State */}
|
||||
<div>
|
||||
<h3 className="text-sm font-medium text-gray-500 mb-3">Loading</h3>
|
||||
<div className="flex gap-6 items-center flex-wrap">
|
||||
<Switch loading label="Loading Off" />
|
||||
<Switch loading defaultChecked label="Loading On" />
|
||||
{/* Loading with Status Color */}
|
||||
<Switch loading status="error" defaultChecked label="Loading Error" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 4. CUSTOM SIZES */}
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-4 text-gray-700">4. Custom Sizes</h2>
|
||||
<p className="text-sm text-gray-500 mb-4">Menggunakan CSS Variables inline untuk override ukuran default.</p>
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200 flex items-end gap-8">
|
||||
{/* Small Override */}
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<Switch
|
||||
defaultChecked
|
||||
style={
|
||||
{
|
||||
'--switch-width': '32px',
|
||||
'--switch-height': '16px',
|
||||
'--switch-handle-size': '12px',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
<span className="text-xs text-gray-400">Tiny</span>
|
||||
</div>
|
||||
|
||||
{/* Normal */}
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<Switch defaultChecked />
|
||||
<span className="text-xs text-gray-400">Default</span>
|
||||
</div>
|
||||
|
||||
{/* Large Override */}
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<Switch
|
||||
defaultChecked
|
||||
style={
|
||||
{
|
||||
'--switch-width': '60px',
|
||||
'--switch-height': '30px',
|
||||
'--switch-handle-size': '26px',
|
||||
} as React.CSSProperties
|
||||
}
|
||||
/>
|
||||
<span className="text-xs text-gray-400">Large</span>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
{/* 5. INTERACTIVE PLAYGROUND */}
|
||||
<section>
|
||||
<h2 className="text-xl font-semibold mb-4 text-gray-700">5. Interactive Playground</h2>
|
||||
<div className="bg-white p-6 rounded-lg shadow-sm border border-gray-200">
|
||||
<div className="flex items-center justify-between mb-6 bg-gray-50 p-4 rounded-md">
|
||||
<div className="text-sm">
|
||||
<p>
|
||||
<strong>Value:</strong> {checked ? 'true' : 'false'}
|
||||
</p>
|
||||
<p>
|
||||
<strong>Loading:</strong> {loading ? 'true' : 'false'}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={() => setLoading(!loading)}
|
||||
className="px-3 py-1 text-xs bg-white border border-gray-300 rounded shadow-sm hover:bg-gray-50"
|
||||
>
|
||||
Toggle Loading
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div className="flex gap-8 justify-center p-8 border-2 border-dashed border-gray-100 rounded-lg">
|
||||
<Switch
|
||||
checked={checked}
|
||||
onChange={(v) => setChecked(v)}
|
||||
loading={loading}
|
||||
label="Control Me"
|
||||
status="success"
|
||||
variant="filled"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
@@ -2,6 +2,7 @@ import { useState } from 'react';
|
||||
import { InputStatusType } from '@repo/ui';
|
||||
import CheckboxShowcase from './components/checkbox.showcase';
|
||||
import InputShowCase from './components/input.showcase';
|
||||
import { SwitchShowcase } from './components/switch.showcase';
|
||||
|
||||
export default function Showcase() {
|
||||
// State untuk menyimpan status yang dipilih
|
||||
@@ -65,6 +66,7 @@ export default function Showcase() {
|
||||
</div>
|
||||
|
||||
<div className="space-y-12 p-8 ">
|
||||
<SwitchShowcase />
|
||||
<CheckboxShowcase status={selectedStatus} />
|
||||
<InputShowCase status={selectedStatus} />
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user