@pfct/purple 1.3.8-rc.2 → 1.4.0-npm-test.2

package/.history/src/storybook/extend-color-type.stories_20240620133541.tsx

@@ -0,0 +1,611 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+	ColorType,
+	ColorTypeArray,
+	SingleButton,
+	BoxMiniButton,
+	IconMiniButton,
+	UnderLineMiniButton,
+	RadioButton,
+	CheckBox,
+	CheckMark,
+	Switch,
+	IconMiniButtonProps,
+	UnderLineMiniButtonProps,
+	ChevronRightSIcon,
+	BaseDatePicker,
+	useRangeDatePicker,
+	PurpleDate,
+	ProgressBar,
+	Modal,
+	TextTabs,
+	TextTabsProps,
+	DateOrNullType,
+	FillTabsProps,
+	FillTabs,
+	BasicChipsProps,
+	BasicChips,
+} from '..';
+import styled from '@emotion/styled';
+
+type Props = {
+	colorType: ColorType;
+};
+
+type Story = StoryObj<Props>;
+
+const meta: Meta<Props> = {
+	title: 'Page/ColorType',
+	tags: ['autodocs'],
+};
+
+export default meta;
+
+const Section = styled.div`
+	margin: 0 auto;
+	max-width: 1200px;
+	padding: 20px;
+
+	table {
+		width: 100%;
+		border-collapse: collapse;
+	}
+
+	th,
+	td {
+		width: 25%; /* 100%를 4개의 열로 나누어 균등하게 분배 */
+		border: 1px solid #ddd;
+		padding: 8px;
+	}
+`;
+
+export const TextTabComponent = (props: Props) => {
+	const [value, setValue] = useState('2');
+	const commonProps: TextTabsProps = {
+		...props,
+		type: 'fixed',
+		value,
+		onChange: setValue,
+		list: [
+			{ label: '라벨1', value: '1' },
+			{ label: '라벨2', value: '2' },
+			{ label: '라벨3', value: '3' },
+		],
+	};
+	return (
+		<Section>
+			<h3>TextTabs</h3>
+			<TextTabs {...commonProps} />
+		</Section>
+	);
+};
+
+export const FillTabComponent = (props: Props) => {
+	const [value, setValue] = useState('2');
+	const commonProps: FillTabsProps = {
+		...props,
+		value,
+		onChange: setValue,
+		list: [
+			{ label: '라벨1', value: '1' },
+			{ label: '라벨2', value: '2' },
+			{ label: '라벨3', value: '3' },
+		],
+	};
+	return (
+		<Section>
+			<h3>FillTabs</h3>
+			<FillTabs {...commonProps} />
+		</Section>
+	);
+};
+
+export const BasicChipsComponent = (props: Props) => {
+	const [value, setValue] = useState(['1']);
+	const commonProps: BasicChipsProps = {
+		...props,
+		value,
+		onChange: setValue,
+		list: [
+			{ label: '라벨1', value: '1' },
+			{ label: '라벨2', value: '2' },
+			{ label: '라벨3', value: '3' },
+		],
+	};
+	return (
+		<Section>
+			<h3>BasicChips</h3>
+			<BasicChips {...commonProps} />
+		</Section>
+	);
+};
+
+const ModalComponent = (props: Props) => {
+	const [visible1, setVisible1] = useState(false);
+	const [visible2, setVisible2] = useState(false);
+
+	return (
+		<Section>
+			<h3>Modal</h3>
+			<table>
+				<tr>
+					<th>DOUBLE_BUTTON.LEFT=DEFAULT</th>
+					<th>DOUBLE_BUTTON.LEFT=COLOR</th>
+				</tr>
+				<tr>
+					<td>
+						<div style={{ width: '200px' }}>
+							<SingleButton
+								colorType={props.colorType}
+								purpose="main"
+								onClick={() => {
+									setVisible1((prev) => !prev);
+								}}
+							>
+								모달 오픈
+							</SingleButton>
+						</div>
+					</td>
+					<td>
+						<div style={{ width: '200px' }}>
+							<SingleButton
+								colorType={props.colorType}
+								purpose="main"
+								onClick={() => {
+									setVisible2((prev) => !prev);
+								}}
+							>
+								모달 오픈
+							</SingleButton>
+						</div>
+					</td>
+				</tr>
+			</table>
+			<Modal
+				visible={visible1}
+				onMaskClick={() => {
+					setVisible1(false);
+				}}
+			>
+				<Modal.Title title="타이틀을 입력해주세요" subTitle={`서브타이틀을 입력해주세요`} />
+				<Modal.Body>
+					<Modal.Comment>설명을 입력해주세요</Modal.Comment>
+					<Modal.UnderLineMiniButton text="미니버튼" />
+				</Modal.Body>
+				<Modal.DoubleButton
+					purpose="main"
+					colorType={props.colorType}
+					left={{
+						children: '취소',
+						onClick: () => {
+							setVisible1(false);
+						},
+					}}
+					right={{
+						children: '확인',
+						onClick: () => {
+							setVisible1(false);
+						},
+					}}
+				/>
+			</Modal>
+			<Modal
+				visible={visible2}
+				onMaskClick={() => {
+					setVisible2(false);
+				}}
+			>
+				<Modal.Title title="타이틀을 입력해주세요" subTitle={`서브타이틀을 입력해주세요`} />
+				<Modal.Body>
+					<Modal.Comment>설명을 입력해주세요</Modal.Comment>
+					<Modal.UnderLineMiniButton text="미니버튼" />
+				</Modal.Body>
+				<Modal.DoubleButton
+					purpose="sub"
+					colorType={props.colorType}
+					left={{
+						children: '취소',
+						onClick: () => {
+							setVisible2(false);
+						},
+					}}
+					right={{
+						children: '확인',
+						onClick: () => {
+							setVisible2(false);
+						},
+					}}
+				>
+					확인
+				</Modal.DoubleButton>
+			</Modal>
+		</Section>
+	);
+};
+
+const ProgressBarComponent = (props: Props) => {
+	return (
+		<Section>
+			<h3>ProgressBar</h3>
+			<table>
+				<tr>
+					<th>progress=20</th>
+				</tr>
+				<tr>
+					<td style={{ position: 'relative', height: '50px' }}>
+						<ProgressBar progress={20} colorType={props.colorType} />
+					</td>
+				</tr>
+			</table>
+		</Section>
+	);
+};
+
+const SingleButtonComponent = (props: Props) => {
+	return (
+		<Section>
+			<h3>SingleButton</h3>
+			<table>
+				<tr>
+					<th>purpose=main, enabled</th>
+					<th>purpose=sub, enabled</th>
+					<th>purpose=main, disabled</th>
+					<th>purpose=sub, disabled</th>
+				</tr>
+				<tr>
+					<td>
+						<SingleButton colorType={props.colorType} purpose="main">
+							버튼
+						</SingleButton>
+					</td>
+					<td>
+						<SingleButton colorType={props.colorType} purpose="sub">
+							버튼
+						</SingleButton>
+					</td>
+					<td>
+						<SingleButton colorType={props.colorType} purpose="main" disabled>
+							버튼
+						</SingleButton>
+					</td>
+					<td>
+						<SingleButton colorType={props.colorType} purpose="sub" disabled>
+							버튼
+						</SingleButton>
+					</td>
+				</tr>
+			</table>
+		</Section>
+	);
+};
+
+const BoxMiniButtonComponent = (props: Props) => {
+	return (
+		<Section>
+			<h3>BoxMiniButton</h3>
+			<table>
+				<tr>
+					<th>enabled</th>
+					<th>disabled</th>
+				</tr>
+				<tr>
+					<td>
+						<BoxMiniButton colorType={props.colorType}>미니버튼</BoxMiniButton>
+					</td>
+					<td>
+						<BoxMiniButton colorType={props.colorType} disabled>
+							미니버튼
+						</BoxMiniButton>
+					</td>
+				</tr>
+			</table>
+		</Section>
+	);
+};
+
+const IconMiniButtonComponent = (props: Props) => {
+	const commonProps: IconMiniButtonProps = {
+		colorType: props.colorType,
+		size: 's',
+		icon: <ChevronRightSIcon />,
+	};
+
+	return (
+		<Section>
+			<h3>IconMiniButton</h3>
+			<table>
+				<tr>
+					<th>enabled</th>
+					<th>disabled</th>
+				</tr>
+				<tr>
+					<td>
+						<IconMiniButton {...commonProps}>미니버튼</IconMiniButton>
+					</td>
+					<td>
+						<IconMiniButton {...commonProps} disabled>
+							미니버튼
+						</IconMiniButton>
+					</td>
+				</tr>
+			</table>
+		</Section>
+	);
+};
+
+const UnderLineMiniButtonComponent = (props: Props) => {
+	const commonProps: UnderLineMiniButtonProps = {
+		colorType: props.colorType,
+		size: 's',
+	};
+
+	return (
+		<Section>
+			<h3>UnderLineMiniButton</h3>
+			<table>
+				<tr>
+					<th>enabled</th>
+					<th>disabled</th>
+				</tr>
+				<tr>
+					<td>
+						<UnderLineMiniButton {...commonProps}>미니버튼</UnderLineMiniButton>
+					</td>
+					<td>
+						<UnderLineMiniButton {...commonProps} disabled>
+							미니버튼
+						</UnderLineMiniButton>
+					</td>
+				</tr>
+			</table>
+		</Section>
+	);
+};
+
+const RadioButtonComponent = (props: Props) => {
+	const commonProps = {
+		colorType: props.colorType,
+		onChange: () => {
+			console.log('handleChange');
+		},
+	};
+
+	return (
+		<Section>
+			<h3>RadioButton</h3>
+			<table>
+				<tr>
+					<th>Default, Active=On</th>
+					<th>Default, Active=Off</th>
+					<th>Disabled, Active=On</th>
+					<th>Disabled, Active=Off</th>
+				</tr>
+				<tr>
+					<td>
+						<RadioButton {...commonProps} name="1" value="1" checked />
+					</td>
+					<td>
+						<RadioButton {...commonProps} name="2" value="2" checked={false} />
+					</td>
+					<td>
+						<RadioButton {...commonProps} name="3" value="3" checked disabled />
+					</td>
+					<td>
+						<RadioButton {...commonProps} name="4" value="4" checked={false} disabled />
+					</td>
+				</tr>
+			</table>
+		</Section>
+	);
+};
+
+const FillCheckBoxComponent = (props: Props) => {
+	const commonProps = {
+		colorType: props.colorType,
+		onChange: () => {
+			console.log('handleChange');
+		},
+	};
+
+	return (
+		<Section>
+			<h3>FillCheckBox</h3>
+			<table>
+				<tr>
+					<th>Default, Active=On</th>
+					<th>Default, Active=Off</th>
+					<th>Disabled, Active=On</th>
+					<th>Disabled, Active=Off</th>
+				</tr>
+				<tr>
+					<td>
+						<CheckBox {...commonProps} type="fill" checked />
+					</td>
+					<td>
+						<CheckBox {...commonProps} type="fill" checked={false} />
+					</td>
+					<td>
+						<CheckBox {...commonProps} type="fill" checked disabled />
+					</td>
+					<td>
+						<CheckBox {...commonProps} type="fill" checked={false} disabled />
+					</td>
+				</tr>
+			</table>
+		</Section>
+	);
+};
+
+const LineCheckBoxComponent = (props: Props) => {
+	const commonProps = {
+		colorType: props.colorType,
+		onChange: () => {
+			console.log('handleChange');
+		},
+	};
+
+	return (
+		<Section>
+			<h3>LineCheckBox</h3>
+			<table>
+				<tr>
+					<th>Default, Active=On</th>
+					<th>Default, Active=Off</th>
+					<th>Disabled, Active=On</th>
+					<th>Disabled, Active=Off</th>
+				</tr>
+				<tr>
+					<td>
+						<CheckBox {...commonProps} type="line" checked />
+					</td>
+					<td>
+						<CheckBox {...commonProps} type="line" checked={false} />
+					</td>
+					<td>
+						<CheckBox {...commonProps} type="line" checked disabled />
+					</td>
+					<td>
+						<CheckBox {...commonProps} type="line" checked={false} disabled />
+					</td>
+				</tr>
+			</table>
+		</Section>
+	);
+};
+
+const CheckMarkComponent = (props: Props) => {
+	const commonProps = {
+		colorType: props.colorType,
+		onChange: () => {
+			console.log('handleChange');
+		},
+	};
+
+	return (
+		<Section>
+			<h3>CheckMark</h3>
+			<table>
+				<tr>
+					<th>Default, Active=On</th>
+					<th>Default, Active=Off</th>
+					<th>Disabled, Active=On</th>
+					<th>Disabled, Active=Off</th>
+				</tr>
+				<tr>
+					<td>
+						<CheckMark {...commonProps} checked />
+					</td>
+					<td>
+						<CheckMark {...commonProps} checked={false} />
+					</td>
+					<td>
+						<CheckMark {...commonProps} checked disabled />
+					</td>
+					<td>
+						<CheckMark {...commonProps} checked={false} disabled />
+					</td>
+				</tr>
+			</table>
+		</Section>
+	);
+};
+
+const SwitchComponent = (props: Props) => {
+	const commonProps = {
+		colorType: props.colorType,
+		onChange: () => {
+			console.log('handleChange');
+		},
+	};
+
+	return (
+		<Section>
+			<h3>Switch</h3>
+			<table>
+				<tr>
+					<th>Default, Active=On</th>
+					<th>Default, Active=Off</th>
+					<th>Disabled, Active=On</th>
+					<th>Disabled, Active=Off</th>
+				</tr>
+				<tr>
+					<td>
+						<Switch {...commonProps} value />
+					</td>
+					<td>
+						<Switch {...commonProps} value={false} />
+					</td>
+					<td>
+						<Switch {...commonProps} value disabled />
+					</td>
+					<td>
+						<Switch {...commonProps} value={false} disabled />
+					</td>
+				</tr>
+			</table>
+		</Section>
+	);
+};
+
+const RangeDatePickerComponent = (props: Props) => {
+	const [selectedStartDate, setSelectedStartDate] = useState<DateOrNullType>(new PurpleDate([2024, 3, 18]));
+	const [selectedEndDate, setSelectedEndDate] = useState<DateOrNullType>(new PurpleDate([2024, 4, 13]));
+	const [displayDate, setDisplayDate] = useState<PurpleDate>(new PurpleDate([2024, 3, 1]));
+
+	const hookProps = useRangeDatePicker({
+		colorType: props.colorType,
+		disabledDates: [
+			[new PurpleDate([2024, 3, 20]), new PurpleDate([2024, 3, 20])],
+			[new PurpleDate([2024, 3, 8]), new PurpleDate([2024, 3, 10])],
+		],
+		selectedStartDate,
+		selectedEndDate,
+		displayDate,
+		onUpdateSelectedStartDate: setSelectedStartDate,
+		onUpdateSelectedEndDate: setSelectedEndDate,
+		onUpdateDisplayDate: setDisplayDate,
+	});
+	return (
+		<Section>
+			<h3>RangeDatePicker</h3>
+			<BaseDatePicker {...hookProps} />
+		</Section>
+	);
+};
+
+const Component = (props: Props) => {
+	return (
+		<>
+			<ProgressBarComponent {...props} />
+			<ModalComponent {...props} />
+			<SingleButtonComponent {...props} />
+			<BoxMiniButtonComponent {...props} />
+			<IconMiniButtonComponent {...props} />
+			<UnderLineMiniButtonComponent {...props} />
+			<RadioButtonComponent {...props} />
+			<FillCheckBoxComponent {...props} />
+			<LineCheckBoxComponent {...props} />
+			<CheckMarkComponent {...props} />
+			<SwitchComponent {...props} />
+			<TextTabComponent {...props} />
+			<FillTabComponent {...props} />
+			<BasicChipsComponent {...props} />
+			<RangeDatePickerComponent {...props} />
+		</>
+	);
+};
+
+export const Story1: Story = {
+	render: (props) => <Component {...props} />,
+	args: {
+		colorType: 'gray',
+	},
+	argTypes: {
+		colorType: {
+			options: ColorTypeArray,
+			control: { type: 'select' },
+		},
+	},
+};
+Story1.storyName = '컴포넌트 모음집';