bnk-components
Version:
Reusable React components for Issaglam UI - Modern, responsive UI components with TypeScript support
47 lines (46 loc) • 5.06 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { useState } from 'react';
import CheckBox from './CheckBox';
export default {
title: 'Components/CheckBox',
component: CheckBox,
parameters: {
layout: 'centered',
},
};
export const BasicExample = () => {
const [checked, setChecked] = useState(false);
return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h3", { children: "Basic CheckBox" }), _jsx(CheckBox, { checked: checked, onChange: setChecked, label: "Kullan\u0131m \u015Fartlar\u0131n\u0131 kabul ediyorum" }), _jsxs("p", { children: ["Se\u00E7ili durum: ", checked ? 'Evet' : 'Hayır'] })] }));
};
export const SizeVariants = () => (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h3", { children: "Size Variants" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [_jsx(CheckBox, { checked: true, onChange: () => { }, label: "Small CheckBox", size: "small" }), _jsx(CheckBox, { checked: true, onChange: () => { }, label: "Medium CheckBox (default)", size: "medium" }), _jsx(CheckBox, { checked: true, onChange: () => { }, label: "Large CheckBox", size: "large" })] })] }));
export const ColorVariants = () => (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h3", { children: "Color Variants" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [_jsx(CheckBox, { checked: true, onChange: () => { }, label: "Default CheckBox", variant: "default" }), _jsx(CheckBox, { checked: true, onChange: () => { }, label: "Primary CheckBox", variant: "primary" }), _jsx(CheckBox, { checked: true, onChange: () => { }, label: "Success CheckBox", variant: "success" }), _jsx(CheckBox, { checked: true, onChange: () => { }, label: "Warning CheckBox", variant: "warning" }), _jsx(CheckBox, { checked: true, onChange: () => { }, label: "Danger CheckBox", variant: "danger" })] })] }));
export const LabelPositions = () => (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h3", { children: "Label Positions" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [_jsx(CheckBox, { checked: true, onChange: () => { }, label: "Label on the right (default)", labelPosition: "right" }), _jsx(CheckBox, { checked: true, onChange: () => { }, label: "Label on the left", labelPosition: "left" })] })] }));
export const IndeterminateState = () => {
const [parentChecked, setParentChecked] = useState(false);
const [childStates, setChildStates] = useState([false, false, false]);
const handleParentChange = (checked) => {
setParentChecked(checked);
setChildStates(childStates.map(() => checked));
};
const handleChildChange = (index, checked) => {
const newChildStates = [...childStates];
newChildStates[index] = checked;
setChildStates(newChildStates);
// Update parent state based on children
const allChecked = newChildStates.every(state => state);
const anyChecked = newChildStates.some(state => state);
if (allChecked) {
setParentChecked(true);
}
else if (anyChecked) {
setParentChecked(false); // This will show indeterminate
}
else {
setParentChecked(false);
}
};
const indeterminate = childStates.some(state => state) && !childStates.every(state => state);
return (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h3", { children: "Indeterminate State" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [_jsx(CheckBox, { checked: parentChecked, indeterminate: indeterminate, onChange: handleParentChange, label: "Select All" }), _jsx("div", { style: { marginLeft: '20px' }, children: childStates.map((checked, index) => (_jsx(CheckBox, { checked: checked, onChange: (value) => handleChildChange(index, value), label: `Item ${index + 1}` }, index))) })] })] }));
};
export const WithHelperText = () => (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h3", { children: "With Helper Text" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [_jsx(CheckBox, { checked: true, onChange: () => { }, label: "E-posta bildirimleri", helperText: "\u00D6nemli g\u00FCncellemeler i\u00E7in e-posta alacaks\u0131n\u0131z" }), _jsx(CheckBox, { checked: false, onChange: () => { }, label: "SMS bildirimleri", error: true, errorMessage: "Bu se\u00E7enek \u015Fu anda kullan\u0131lam\u0131yor" })] })] }));
export const DisabledState = () => (_jsxs("div", { style: { padding: '20px' }, children: [_jsx("h3", { children: "Disabled State" }), _jsxs("div", { style: { display: 'flex', flexDirection: 'column', gap: '10px' }, children: [_jsx(CheckBox, { checked: true, onChange: () => { }, label: "Disabled CheckBox (checked)", disabled: true }), _jsx(CheckBox, { checked: false, onChange: () => { }, label: "Disabled CheckBox (unchecked)", disabled: true })] })] }));