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
@@ -16,9 +16,12 @@
|
||||
"@rc-component/form": "^1.6.2",
|
||||
"@rc-component/input": "^1.1.2",
|
||||
"@rc-component/input-number": "^1.6.2",
|
||||
"@rc-component/picker": "^1.9.0",
|
||||
"@rc-component/switch": "^1.0.3",
|
||||
"@rc-component/textarea": "^1.1.2",
|
||||
"@repo/utils": "workspace:*",
|
||||
"@tailwindcss/vite": "^4.1.18",
|
||||
"dayjs": "^1.11.19",
|
||||
"react": "^19.2.3",
|
||||
"react-dom": "^19.2.3",
|
||||
"tailwind-merge": "^3.4.0",
|
||||
|
||||
@@ -8,3 +8,4 @@ export * from './input/input-number.component';
|
||||
|
||||
export * from './textarea/textarea.component';
|
||||
export * from './checkbox/checkbox.component';
|
||||
export * from './switch/switch.component';
|
||||
|
||||
@@ -3,3 +3,4 @@
|
||||
@import './input-number.style.css';
|
||||
@import './textarea.style.css';
|
||||
@import './checkbox.style.css';
|
||||
@import './switch.style.css';
|
||||
|
||||
@@ -0,0 +1,443 @@
|
||||
@layer components {
|
||||
/* =========================================
|
||||
BASE WRAPPER & LABEL
|
||||
========================================= */
|
||||
.rc-switch-wrapper {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
cursor: pointer;
|
||||
font-size: var(--form-label-font-size);
|
||||
font-weight: var(--form-label-font-weight);
|
||||
color: var(--form-label-color);
|
||||
line-height: 1;
|
||||
gap: 8px; /* Distance between switch and label */
|
||||
transition: all 0.2s;
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.rc-switch-wrapper-disabled {
|
||||
cursor: not-allowed;
|
||||
color: var(--disabled-text);
|
||||
}
|
||||
|
||||
.rc-switch-label-text {
|
||||
line-height: var(--switch-height); /* Align text vertically with switch */
|
||||
font-size: var(--form-label-font-size);
|
||||
font-weight: var(--form-label-font-weight);
|
||||
color: var(--form-label-color);
|
||||
}
|
||||
|
||||
/* Container for relative positioning of loading state */
|
||||
.rc-switch-container {
|
||||
position: relative;
|
||||
line-height: 0;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
CORE SWITCH STRUCTURE
|
||||
========================================= */
|
||||
.rc-switch {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
width: var(--switch-width);
|
||||
height: var(--switch-height);
|
||||
line-height: calc(var(--switch-height) - 2px);
|
||||
padding: 0;
|
||||
vertical-align: middle;
|
||||
border-radius: 9999px; /* Pill shape */
|
||||
border: 1px solid; /* Border color defined in variants */
|
||||
background-color: transparent; /* Bg defined in variants */
|
||||
cursor: pointer;
|
||||
transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
|
||||
overflow: visible; /* Changed to visible for focus rings or overflow effects if needed */
|
||||
}
|
||||
|
||||
/* Focus Ring (Consistent with Checkbox) */
|
||||
.rc-switch:focus-visible,
|
||||
.rc-switch:focus {
|
||||
outline: none;
|
||||
box-shadow: 0 0 0 3px var(--focus-ring-color);
|
||||
border-color: var(--focus-border-color);
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
HANDLE (THE CIRCLE)
|
||||
========================================= */
|
||||
.rc-switch:after {
|
||||
position: absolute;
|
||||
content: ' ';
|
||||
top: 1px; /* (Height - Handle) / 2 approx, adjusted for border */
|
||||
left: var(--switch-padding);
|
||||
width: var(--switch-handle-size);
|
||||
height: var(--switch-handle-size);
|
||||
border-radius: 50%;
|
||||
background-color: #ffffff;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
|
||||
transform: scale(1);
|
||||
transition: all 0.3s cubic-bezier(0.35, 0, 0.25, 1);
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
/* Hover Effect on Handle */
|
||||
.rc-switch:hover:after {
|
||||
transform: scale(1.1);
|
||||
}
|
||||
|
||||
.rc-switch:active:after {
|
||||
transform: scale(1); /* Reset on click */
|
||||
width: calc(var(--switch-handle-size) + 4px); /* Stretch effect like iOS */
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
CHECKED STATE
|
||||
========================================= */
|
||||
.rc-switch-checked:after {
|
||||
left: var(--switch-checked-pos);
|
||||
}
|
||||
|
||||
.rc-switch-checked:active:after {
|
||||
left: calc(var(--switch-checked-pos) - 4px); /* Adjust stretch position */
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
INNER TEXT (ON/OFF LABELS)
|
||||
========================================= */
|
||||
.rc-switch-inner {
|
||||
display: block;
|
||||
margin: 0 26px 0 8px; /* Adjust spacing */
|
||||
color: #fff;
|
||||
font-size: 12px;
|
||||
transition: margin 0.3s cubic-bezier(0.35, 0, 0.25, 1);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
.rc-switch-checked .rc-switch-inner {
|
||||
margin: 0 8px 0 26px;
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
LOADING STATE
|
||||
========================================= */
|
||||
.rc-switch-loading {
|
||||
opacity: 0.7;
|
||||
}
|
||||
|
||||
/* The SVG Icon inside the handle */
|
||||
.rc-switch-loading-icon {
|
||||
display: inline-block;
|
||||
vertical-align: middle;
|
||||
width: 12px;
|
||||
height: 12px;
|
||||
color: var(--color-brand-500); /* Loading icon color */
|
||||
animation: rcSwitchLoading 1s infinite linear;
|
||||
/* Center inside the handle */
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Override handle style when loading */
|
||||
.rc-switch-loading .rc-switch:after {
|
||||
background-color: #fff; /* Ensure handle is white */
|
||||
}
|
||||
|
||||
@keyframes rcSwitchLoading {
|
||||
100% {
|
||||
transform: translate(-50%, -50%) rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
VARIANTS & STATUS MATRIX
|
||||
========================================= */
|
||||
|
||||
/* -------------------------------
|
||||
VARIANT: OUTLINED (Default)
|
||||
Looks like an empty input when off.
|
||||
------------------------------- */
|
||||
.switch-variant-outlined .rc-switch {
|
||||
background-color: var(--color-gray-200);
|
||||
border-color: var(--color-gray-200);
|
||||
}
|
||||
|
||||
.switch-variant-outlined .rc-switch:hover {
|
||||
border-color: var(--color-brand-500);
|
||||
}
|
||||
|
||||
/* -------------------------------
|
||||
VARIANT: FILLED
|
||||
Looks like a standard grey toggle when off.
|
||||
------------------------------- */
|
||||
.switch-variant-filled .rc-switch {
|
||||
background-color: var(--color-gray-200);
|
||||
border-color: var(--color-gray-200);
|
||||
}
|
||||
|
||||
.switch-variant-filled .rc-switch:hover {
|
||||
border-color: var(--color-brand-500);
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
STATUS COLORS (Applied to Checked State)
|
||||
========================================= */
|
||||
|
||||
/* --- DEFAULT (Brand) --- */
|
||||
|
||||
.switch-status-default .rc-switch-checked {
|
||||
border-color: var(--color-brand-500);
|
||||
background-color: var(--color-brand-500);
|
||||
}
|
||||
.switch-status-default .rc-switch:focus-visible,
|
||||
.switch-status-default .rc-switch:focus {
|
||||
box-shadow: 0 0 0 3px var(--color-brand-100);
|
||||
border-color: var(--color-brand-500);
|
||||
}
|
||||
|
||||
/* --- ERROR --- */
|
||||
/* Hover Off state (Optional: Tint border red on hover even if off) */
|
||||
.switch-status-error.switch-variant-outlined .rc-switch {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--color-error-300);
|
||||
}
|
||||
|
||||
.switch-status-error.switch-variant-outlined .rc-switch:hover {
|
||||
border-color: var(--color-error-500);
|
||||
}
|
||||
|
||||
.switch-status-error.switch-variant-outlined .rc-switch:after {
|
||||
background-color: var(--color-error-300);
|
||||
box-shadow: 0 2px 4px 0 var(--color-error-100);
|
||||
}
|
||||
|
||||
.switch-status-error.switch-variant-filled .rc-switch {
|
||||
background-color: var(--color-error-50);
|
||||
border-color: var(--color-error-300);
|
||||
}
|
||||
|
||||
.switch-status-error.switch-variant-filled .rc-switch:hover {
|
||||
border-color: var(--color-error-500);
|
||||
}
|
||||
|
||||
.switch-status-error.switch-variant-filled .rc-switch:after {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* Checked State */
|
||||
.switch-status-error.switch-variant-outlined .rc-switch-checked {
|
||||
border-color: var(--color-error-500);
|
||||
background-color: var(--color-error-500);
|
||||
}
|
||||
.switch-status-error.switch-variant-outlined .rc-switch-checked:after {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
|
||||
}
|
||||
|
||||
.switch-status-error.switch-variant-filled .rc-switch-checked {
|
||||
border-color: var(--color-error-500);
|
||||
background-color: var(--color-error-500);
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.switch-status-error .rc-switch:focus-visible,
|
||||
.switch-status-error .rc-switch:focus {
|
||||
box-shadow: 0 0 0 3px var(--color-error-100);
|
||||
border-color: var(--color-error-500);
|
||||
}
|
||||
/* Loading Icon Color */
|
||||
.switch-status-error .rc-switch-loading-icon {
|
||||
color: var(--color-error-500);
|
||||
}
|
||||
|
||||
/* --- WARNING --- */
|
||||
.switch-status-warning.switch-variant-outlined .rc-switch {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--color-warning-300);
|
||||
}
|
||||
|
||||
.switch-status-warning.switch-variant-outlined .rc-switch:hover {
|
||||
border-color: var(--color-warning-500);
|
||||
}
|
||||
|
||||
.switch-status-warning.switch-variant-outlined .rc-switch:after {
|
||||
background-color: var(--color-warning-300);
|
||||
box-shadow: 0 2px 4px 0 var(--color-warning-100);
|
||||
}
|
||||
|
||||
.switch-status-warning.switch-variant-filled .rc-switch {
|
||||
background-color: var(--color-warning-50);
|
||||
border-color: var(--color-warning-300);
|
||||
}
|
||||
|
||||
.switch-status-warning.switch-variant-filled .rc-switch:hover {
|
||||
border-color: var(--color-warning-500);
|
||||
}
|
||||
|
||||
.switch-status-warning.switch-variant-filled .rc-switch:after {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* Checked State */
|
||||
.switch-status-warning.switch-variant-outlined .rc-switch-checked {
|
||||
border-color: var(--color-warning-500);
|
||||
background-color: var(--color-warning-500);
|
||||
}
|
||||
.switch-status-warning.switch-variant-outlined .rc-switch-checked:after {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
|
||||
}
|
||||
|
||||
.switch-status-warning.switch-variant-filled .rc-switch-checked {
|
||||
border-color: var(--color-warning-500);
|
||||
background-color: var(--color-warning-500);
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.switch-status-warning .rc-switch:focus-visible,
|
||||
.switch-status-warning .rc-switch:focus {
|
||||
box-shadow: 0 0 0 3px var(--color-warning-100);
|
||||
border-color: var(--color-warning-500);
|
||||
}
|
||||
/* Loading Icon Color */
|
||||
.switch-status-warning .rc-switch-loading-icon {
|
||||
color: var(--color-warning-500);
|
||||
}
|
||||
|
||||
/* --- SUCCESS --- */
|
||||
.switch-status-success.switch-variant-outlined .rc-switch {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--color-success-300);
|
||||
}
|
||||
|
||||
.switch-status-success.switch-variant-outlined .rc-switch:hover {
|
||||
border-color: var(--color-success-500);
|
||||
}
|
||||
|
||||
.switch-status-success.switch-variant-outlined .rc-switch:after {
|
||||
background-color: var(--color-success-300);
|
||||
box-shadow: 0 2px 4px 0 var(--color-success-100);
|
||||
}
|
||||
|
||||
.switch-status-success.switch-variant-filled .rc-switch {
|
||||
background-color: var(--color-success-50);
|
||||
border-color: var(--color-success-300);
|
||||
}
|
||||
|
||||
.switch-status-success.switch-variant-filled .rc-switch:hover {
|
||||
border-color: var(--color-success-500);
|
||||
}
|
||||
|
||||
.switch-status-success.switch-variant-filled .rc-switch:after {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* Checked State */
|
||||
.switch-status-success.switch-variant-outlined .rc-switch-checked {
|
||||
border-color: var(--color-success-500);
|
||||
background-color: var(--color-success-500);
|
||||
}
|
||||
.switch-status-success.switch-variant-outlined .rc-switch-checked:after {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
|
||||
}
|
||||
|
||||
.switch-status-success.switch-variant-filled .rc-switch-checked {
|
||||
border-color: var(--color-success-500);
|
||||
background-color: var(--color-success-500);
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.switch-status-success .rc-switch:focus-visible,
|
||||
.switch-status-success .rc-switch:focus {
|
||||
box-shadow: 0 0 0 3px var(--color-success-100);
|
||||
border-color: var(--color-success-500);
|
||||
}
|
||||
/* Loading Icon Color */
|
||||
.switch-status-success .rc-switch-loading-icon {
|
||||
color: var(--color-success-500);
|
||||
}
|
||||
|
||||
/* --- INFO --- */
|
||||
.switch-status-info.switch-variant-outlined .rc-switch {
|
||||
background-color: var(--input-bg);
|
||||
border-color: var(--color-info-300);
|
||||
}
|
||||
|
||||
.switch-status-info.switch-variant-outlined .rc-switch:hover {
|
||||
border-color: var(--color-info-500);
|
||||
}
|
||||
|
||||
.switch-status-info.switch-variant-outlined .rc-switch:after {
|
||||
background-color: var(--color-info-300);
|
||||
box-shadow: 0 2px 4px 0 var(--color-info-100);
|
||||
}
|
||||
|
||||
.switch-status-info.switch-variant-filled .rc-switch {
|
||||
background-color: var(--color-info-50);
|
||||
border-color: var(--color-info-300);
|
||||
}
|
||||
|
||||
.switch-status-info.switch-variant-filled .rc-switch:hover {
|
||||
border-color: var(--color-info-500);
|
||||
}
|
||||
|
||||
.switch-status-info.switch-variant-filled .rc-switch:after {
|
||||
background-color: #fff;
|
||||
}
|
||||
|
||||
/* Checked State */
|
||||
.switch-status-info.switch-variant-outlined .rc-switch-checked {
|
||||
border-color: var(--color-info-500);
|
||||
background-color: var(--color-info-500);
|
||||
}
|
||||
.switch-status-info.switch-variant-outlined .rc-switch-checked:after {
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 4px 0 rgba(0, 35, 11, 0.2);
|
||||
}
|
||||
|
||||
.switch-status-info.switch-variant-filled .rc-switch-checked {
|
||||
border-color: var(--color-info-500);
|
||||
background-color: var(--color-info-500);
|
||||
}
|
||||
|
||||
/* Focus */
|
||||
.switch-status-info .rc-switch:focus-visible,
|
||||
.switch-status-info .rc-switch:focus {
|
||||
box-shadow: 0 0 0 3px var(--color-info-100);
|
||||
border-color: var(--color-info-500);
|
||||
}
|
||||
/* Loading Icon Color */
|
||||
.switch-status-info .rc-switch-loading-icon {
|
||||
color: var(--color-info-500);
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
DISABLED STATE
|
||||
========================================= */
|
||||
.rc-switch-disabled,
|
||||
.rc-switch-wrapper-disabled .rc-switch {
|
||||
cursor: not-allowed;
|
||||
opacity: 0.6;
|
||||
background-color: var(--disabled-bg) !important;
|
||||
border-color: var(--disabled-border) !important;
|
||||
}
|
||||
|
||||
.rc-switch-disabled:after,
|
||||
.rc-switch-wrapper-disabled .rc-switch:after {
|
||||
cursor: not-allowed;
|
||||
background-color: #f9fafb; /* Lighter white/gray for disabled knob */
|
||||
}
|
||||
|
||||
/* If checked and disabled */
|
||||
.rc-switch-disabled.rc-switch-checked {
|
||||
background-color: var(--disabled-border) !important; /* Darker gray to show it is "on" but disabled */
|
||||
}
|
||||
|
||||
/* Disable animations/hovers */
|
||||
.rc-switch-disabled:hover:after {
|
||||
transform: scale(1);
|
||||
animation-name: none;
|
||||
}
|
||||
}
|
||||
@@ -0,0 +1,65 @@
|
||||
import { forwardRef } from 'react';
|
||||
import RcSwitch from '@rc-component/switch';
|
||||
import { SwitchProps } from '../types';
|
||||
|
||||
/**
|
||||
* Small Spinner Component (SVG)
|
||||
*/
|
||||
const LoadingSpinner = () => (
|
||||
<svg
|
||||
viewBox="0 0 1024 1024"
|
||||
focusable="false"
|
||||
className="rc-switch-loading-icon"
|
||||
data-icon="loading"
|
||||
fill="currentColor"
|
||||
aria-hidden="true"
|
||||
>
|
||||
<path d="M988 548c-19.9 0-36-16.1-36-36 0-59.4-11.6-117-34.6-171.3a440.45 440.45 0 00-94.3-139.9 437.71 437.71 0 00-139.9-94.3C629 83.6 571.4 72 512 72c-19.9 0-36-16.1-36-36s16.1-36 36-36c69.1 0 136.2 13.5 199.3 40.3C772.3 66 827 103 874 150c47 47 83.9 101.8 109.7 162.7 26.7 63.1 40.2 130.2 40.2 199.3.1 19.9-16 36-35.9 36z" />
|
||||
</svg>
|
||||
);
|
||||
|
||||
export const Switch = forwardRef<HTMLButtonElement, SwitchProps>((props, ref) => {
|
||||
const {
|
||||
label,
|
||||
status = 'default',
|
||||
variant = 'outlined',
|
||||
className,
|
||||
children,
|
||||
style,
|
||||
loading,
|
||||
disabled,
|
||||
...rest
|
||||
} = props;
|
||||
|
||||
const displayLabel = label || children;
|
||||
|
||||
const isEnabled = !disabled && !loading;
|
||||
|
||||
const wrapperClass = [
|
||||
'rc-switch-wrapper',
|
||||
`switch-status-${status}`,
|
||||
`switch-variant-${variant}`,
|
||||
!isEnabled ? 'rc-switch-wrapper-disabled' : '',
|
||||
className,
|
||||
]
|
||||
.filter(Boolean)
|
||||
.join(' ');
|
||||
|
||||
return (
|
||||
<label className={wrapperClass} style={style}>
|
||||
<span className={`rc-switch-container ${loading ? 'rc-switch-loading' : ''}`}>
|
||||
<RcSwitch
|
||||
ref={ref}
|
||||
prefixCls="rc-switch"
|
||||
disabled={!isEnabled}
|
||||
loadingIcon={loading ? <LoadingSpinner /> : null}
|
||||
{...rest}
|
||||
/>
|
||||
</span>
|
||||
|
||||
{displayLabel && <span className="rc-switch-label-text">{displayLabel}</span>}
|
||||
</label>
|
||||
);
|
||||
});
|
||||
|
||||
Switch.displayName = 'Switch';
|
||||
@@ -1,6 +1,6 @@
|
||||
import type { FormProps as RcFormProps } from '@rc-component/form';
|
||||
import type { Rule } from '@rc-component/form/lib/interface';
|
||||
import { ReactNode, ReactElement } from 'react';
|
||||
import { ReactNode, ReactElement, ComponentProps, CSSProperties } from 'react';
|
||||
|
||||
import { InputProps as RcInputProps } from '@rc-component/input';
|
||||
import { TextAreaProps as RcTextAreaProps } from '@rc-component/textarea';
|
||||
@@ -8,6 +8,9 @@ import { InputNumberProps as RcInputNumberProps } from '@rc-component/input-numb
|
||||
|
||||
import { CheckboxProps as RcCheckboxProps } from '@rc-component/checkbox';
|
||||
|
||||
import RcSwitch from '@rc-component/switch';
|
||||
type RcSwitchProps = ComponentProps<typeof RcSwitch>;
|
||||
|
||||
/**
|
||||
* Define possible input statuses
|
||||
*/
|
||||
@@ -74,3 +77,11 @@ export interface TextAreaProps extends RcTextAreaProps, BaseFormInputComponentPr
|
||||
export interface CheckboxProps extends RcCheckboxProps, BaseFormInputComponentProps {
|
||||
label?: ReactNode;
|
||||
}
|
||||
|
||||
/**
|
||||
* Define Switch props
|
||||
*/
|
||||
export interface SwitchProps extends RcSwitchProps, BaseFormInputComponentProps {
|
||||
label?: ReactNode;
|
||||
loading?: boolean;
|
||||
}
|
||||
|
||||
@@ -156,6 +156,15 @@
|
||||
--disabled-bg: #f3f4f6;
|
||||
--disabled-text: var(--color-gray-400);
|
||||
--disabled-border: #e5e7eb;
|
||||
|
||||
/* SWITCH COMPONENT VARIABLES */
|
||||
--switch-width: 44px;
|
||||
--switch-height: 22px;
|
||||
--switch-padding: 2px; /* Distance between handle and edge */
|
||||
|
||||
/* Calculate the handle position when checked */
|
||||
/* Formula: Width - HandleSize - Padding */
|
||||
--switch-checked-pos: calc(var(--switch-width) - var(--switch-handle-size) - var(--switch-padding));
|
||||
}
|
||||
|
||||
/* =========================================
|
||||
|
||||
Reference in New Issue
Block a user