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

package/.history/src/components/Input/index.stories_20230619184317.tsx

@@ -0,0 +1,210 @@
+import React, { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { BasicInputProps, PostfixInputProps, ResidentNumberInputProps } from '.';
+import { BaseInput, BoxMiniButton, PostfixInput, ResidentNumberInput, SelectBox, SelectBoxProps } from '..';
+import { formatDisplayValueWithManWon, formatRealValueWithManWon } from './PostfixInput/index.util';
+
+const WidthLimitComp: React.FC<{ width?: number; height?: number; children: React.ReactNode }> = ({
+	width = '400px',
+	height,
+	children,
+}) => {
+	return <div style={{ width, height }}>{children}</div>;
+};
+
+const BaseInputComp: React.FC<BasicInputProps> = (props) => {
+	const [value, setValue] = useState('');
+
+	const onChange: BasicInputProps['onChange'] = (e) => {
+		setValue(e.target.value);
+	};
+
+	return <BaseInput {...props} value={value} onChange={onChange} />;
+};
+
+/**
+ * updated 230523
+ *
+ * <a href="https://www.notion.so/Textfield-fdde7ce93e65439cb8188cfb4a8609aa?pvs=4" target="_blank">노션페이지</a>
+ * <br/>
+ * 사용자가 입력할 수 있는 영역입니다. 직접 입력하거나 정보 값을 선택하여 입력합니다.<br/>다양한 옵션이 있으며 숫자를 포함한 여러 텍스트 형식을 지원합니다.
+ */
+const meta: Meta<BasicInputProps> = {
+	title: 'Component/TextField',
+	component: BaseInput,
+	tags: ['autodocs'],
+};
+
+export default meta;
+
+// Props 교체 가능
+type BaseInputStory = StoryObj<BasicInputProps>;
+export const Story1: BaseInputStory = {
+	render: (props) => (
+		<WidthLimitComp>
+			<BaseInputComp {...props} />
+		</WidthLimitComp>
+	),
+	args: {
+		placeholder: 'placeholder',
+		disabled: true,
+		guideText: '000-0000-0000',
+		errorValidation: [
+			{
+				condition: (value) => {
+					return value[0] === '1';
+				},
+				errorText: '1로 시작해주세요',
+			},
+		],
+	},
+};
+Story1.storyName = 'Basic';
+
+export const Story2: BaseInputStory = {
+	render: (props) => (
+		<WidthLimitComp>
+			<BaseInputComp {...props} />
+		</WidthLimitComp>
+	),
+	args: {
+		placeholder: 'placeholder',
+		decoration: (
+			<BoxMiniButton colorType="pink" purpose="sub">
+				인증 요청
+			</BoxMiniButton>
+		),
+		errorValidation: [
+			{
+				condition: (value) => {
+					return value[0] === '1';
+				},
+				errorText: '1로 시작해주세요',
+			},
+		],
+	},
+};
+Story2.storyName = '+ Button (Decoration)';
+
+const SelectBoxComp: React.FC<SelectBoxProps> = (props) => {
+	const [value, setValue] = useState('');
+
+	const onChange: SelectBoxProps['onChange'] = (val) => {
+		setValue(val);
+	};
+
+	return (
+		<>
+			selected: {value}
+			<br />
+			<br />
+			<SelectBox {...props} value={value} onChange={onChange} />
+		</>
+	);
+};
+
+export const Story3: StoryObj<SelectBoxProps> = {
+	render: (props) => (
+		<WidthLimitComp height={400}>
+			<SelectBoxComp {...props} />
+		</WidthLimitComp>
+	),
+	args: {
+		placeholder: 'placeholder',
+		itemList: [
+			{ label: '선택 1', value: 'VALUE_1' },
+			{ label: '선택 2', value: 'VALUE_2' },
+			{ label: '선택 3', value: 'VALUE_3' },
+		],
+	},
+	argTypes: {
+		onChange: { action: 'onChange' },
+	},
+	parameters: {
+		docs: {
+			description: {
+				story:
+					'PC) 셀렉트 필드를 클릭하면 드랍다운 메뉴가 나타납니다.<br/> MOBILE) 셀렉트 필드를 탭 하면 바텀 시트를 제공합니다.',
+			},
+		},
+	},
+};
+Story3.storyName = '+ Select';
+
+const ResidentNumberInputComp: React.FC<ResidentNumberInputProps> = (props) => {
+	const [value, setValue] = useState('');
+
+	const onChange: ResidentNumberInputProps['setValue'] = (val) => {
+		setValue(val);
+	};
+
+	return <ResidentNumberInput {...props} value={value} setValue={onChange} />;
+};
+
+export const Story4: StoryObj<ResidentNumberInputProps> = {
+	render: (props) => (
+		<WidthLimitComp>
+			<ResidentNumberInputComp {...props} />
+		</WidthLimitComp>
+	),
+	args: {
+		placeholder: 'placeholder',
+	},
+	argTypes: {
+		onChange: { action: 'onChange' },
+	},
+};
+Story4.storyName = '+ Blind (rrnInputType=13)';
+
+export const Story5: StoryObj<ResidentNumberInputProps> = {
+	render: (props) => (
+		<WidthLimitComp>
+			<ResidentNumberInputComp {...props} />
+		</WidthLimitComp>
+	),
+	args: {
+		placeholder: 'placeholder',
+		rrnInputType: 7,
+	},
+	argTypes: {
+		onChange: { action: 'onChange' },
+	},
+};
+Story5.storyName = '+ Blind (rrnInputType=7)';
+
+const PostfixInputComp: React.FC<PostfixInputProps> = (props) => {
+	const [value, setValue] = useState('');
+
+	const submitValue = Number(value);
+
+	return (
+		<>
+			submitValue : {submitValue}
+			<PostfixInput
+				{...props}
+				realValue={value}
+				updateRealValue={setValue}
+				formatRealValue={formatRealValueWithManWon}
+				formatDisplayValue={formatDisplayValueWithManWon}
+			/>
+		</>
+	);
+};
+
+export const Story6: StoryObj<PostfixInputProps> = {
+	render: (props) => (
+		<WidthLimitComp>
+			<PostfixInputComp {...props} />
+		</WidthLimitComp>
+	),
+	args: {
+		placeholder: 'placeholder',
+		postfix: '만원',
+		max: 100000000000,
+		disabled: false,
+	},
+	argTypes: {
+		onChange: { action: 'onChange' },
+	},
+};
+Story6.storyName = '+ Unit';

package/.history/src/components/Loading/index_20230510193851.ts

@@ -0,0 +1,4 @@
+import Skeleton, { SkeletonProps } from './Skeleton';
+import SkeletonLayout from './SkeletonLayout';
+
+export { Skeleton, SkeletonLayout, SkeletonProps };

package/.history/src/components/Loading/index_20230511140917.ts

@@ -0,0 +1,5 @@
+import Skeleton, { SkeletonProps } from './Skeleton';
+import SkeletonLayout from './SkeletonLayout';
+
+export { Skeleton, SkeletonLayout, SkeletonProps };
+export default SkeletonLayout;

package/.history/src/components/Loading/index_20230511151553.ts

@@ -0,0 +1,4 @@
+import Skeleton, { SkeletonProps } from './Skeleton';
+import SkeletonLayout from './SkeletonLayout';
+
+export { Skeleton, SkeletonLayout, SkeletonProps };

package/.history/src/core/TextStyles/index_20230518172815.ts

@@ -0,0 +1,158 @@
+import { css } from '@emotion/react';
+import { basicColors } from '../Colors';
+
+const DEFAULT_TEXT_COLOR = basicColors.gray900;
+const DEFAULT_HEADLINE_TEXT_FONT_WEIGHT = 600;
+const DEFAULT_TITLE_TEXT_FONT_WEIGHT = 500;
+const DEFAULT_BODY_TEXT_FONT_WEIGHT = 400;
+
+export const typography = {
+	h1: css`
+		font-size: 41px;
+		line-height: 49px;
+		letter-spacing: -0.8px;
+		margin: 0;
+		font-weight: ${DEFAULT_HEADLINE_TEXT_FONT_WEIGHT};
+	`,
+	h2: css`
+		font-size: 29px;
+		line-height: 35px;
+		letter-spacing: -0.4px;
+		margin: 0;
+		font-weight: ${DEFAULT_HEADLINE_TEXT_FONT_WEIGHT};
+	`,
+	h3: css`
+		font-size: 23px;
+		line-height: 27px;
+		letter-spacing: -0.3px;
+		margin: 0;
+		font-weight: ${DEFAULT_HEADLINE_TEXT_FONT_WEIGHT};
+	`,
+	h4: css`
+		font-size: 19px;
+		line-height: 23px;
+		letter-spacing: -0.3px;
+		margin: 0;
+		font-weight: ${DEFAULT_HEADLINE_TEXT_FONT_WEIGHT};
+	`,
+	h5: css`
+		font-size: 17px;
+		line-height: 20px;
+		letter-spacing: -0.3px;
+		margin: 0;
+		font-weight: ${DEFAULT_HEADLINE_TEXT_FONT_WEIGHT};
+	`,
+	h6: css`
+		font-size: 15px;
+		line-height: 18px;
+		letter-spacing: -0.2px;
+		margin: 0;
+		font-weight: ${DEFAULT_HEADLINE_TEXT_FONT_WEIGHT};
+	`,
+	title1: css`
+		font-size: 19px;
+		line-height: 23px;
+		letter-spacing: -0.3px;
+		margin: 0;
+		font-weight: ${DEFAULT_TITLE_TEXT_FONT_WEIGHT};
+	`,
+	title2: css`
+		font-size: 17px;
+		line-height: 20px;
+		letter-spacing: -0.2px;
+		margin: 0;
+		font-weight: ${DEFAULT_TITLE_TEXT_FONT_WEIGHT};
+	`,
+	title3: css`
+		font-size: 15px;
+		line-height: 18px;
+		letter-spacing: -0.2px;
+		margin: 0;
+		font-weight: ${DEFAULT_TITLE_TEXT_FONT_WEIGHT};
+	`,
+	title4: css`
+		font-size: 13px;
+		line-height: 14px;
+		letter-spacing: -0.2px;
+		margin: 0;
+		font-weight: ${DEFAULT_TITLE_TEXT_FONT_WEIGHT};
+	`,
+	body1: css`
+		font-size: 15px;
+		line-height: 18px;
+		letter-spacing: -0.2px;
+		margin: 0;
+		font-weight: ${DEFAULT_BODY_TEXT_FONT_WEIGHT};
+	`,
+	body2: css`
+		font-size: 13px;
+		line-height: 16px;
+		letter-spacing: -0.2px;
+		margin: 0;
+		font-weight: ${DEFAULT_BODY_TEXT_FONT_WEIGHT};
+	`,
+};
+
+export interface TextStyleProperties {
+	color?: string;
+}
+
+export const headline1 = (args?: TextStyleProperties) => css`
+	${typography.h1};
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+
+export const headline2 = (args?: TextStyleProperties) => css`
+	${typography.h2};
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+
+export const headline3 = (args?: TextStyleProperties) => css`
+	${typography.h3};
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+
+export const headline4 = (args?: TextStyleProperties) => css`
+	${typography.h4};
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+
+export const headline5 = (args?: TextStyleProperties) => css`
+	${typography.h5};
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+
+export const headline6 = (args?: TextStyleProperties) => css`
+	${typography.h6};
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+
+export const title1 = (args?: TextStyleProperties) => css`
+	${typography.title1};
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+
+export const title2 = (args?: TextStyleProperties) => css`
+	${typography.title2};
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+
+export const title3 = (args?: TextStyleProperties) => css`
+	${typography.title3};
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+
+export const title4 = (args?: TextStyleProperties) => css`
+	${typography.title4};
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+
+export const body1 = (args?: TextStyleProperties) => css`
+	${typography.body1};
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+
+export const body2 = (args?: TextStyleProperties) => css`
+	${typography.body2};
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;

package/.history/src/core/TextStyles/index_20230522164636.ts

@@ -0,0 +1,158 @@
+import { css } from '@emotion/react';
+import { basicColors } from '../Colors';
+
+const DEFAULT_TEXT_COLOR = basicColors.gray900;
+const DEFAULT_HEADLINE_TEXT_FONT_WEIGHT = 600;
+const DEFAULT_TITLE_TEXT_FONT_WEIGHT = 500;
+const DEFAULT_BODY_TEXT_FONT_WEIGHT = 400;
+
+export const typography = {
+	h1: css`
+		font-size: 41px;
+		line-height: 49px;
+		letter-spacing: -0.8px;
+		font-weight: ${DEFAULT_HEADLINE_TEXT_FONT_WEIGHT};
+	`,
+	h2: css`
+		font-size: 29px;
+		line-height: 35px;
+		letter-spacing: -0.4px;
+		font-weight: ${DEFAULT_HEADLINE_TEXT_FONT_WEIGHT};
+	`,
+	h3: css`
+		font-size: 23px;
+		line-height: 27px;
+		letter-spacing: -0.3px;
+		font-weight: ${DEFAULT_HEADLINE_TEXT_FONT_WEIGHT};
+	`,
+	h4: css`
+		font-size: 19px;
+		line-height: 23px;
+		letter-spacing: -0.3px;
+		font-weight: ${DEFAULT_HEADLINE_TEXT_FONT_WEIGHT};
+	`,
+	h5: css`
+		font-size: 17px;
+		line-height: 20px;
+		letter-spacing: -0.3px;
+		font-weight: ${DEFAULT_HEADLINE_TEXT_FONT_WEIGHT};
+	`,
+	h6: css`
+		font-size: 15px;
+		line-height: 18px;
+		letter-spacing: -0.2px;
+		font-weight: ${DEFAULT_HEADLINE_TEXT_FONT_WEIGHT};
+	`,
+	title1: css`
+		font-size: 19px;
+		line-height: 23px;
+		letter-spacing: -0.3px;
+		font-weight: ${DEFAULT_TITLE_TEXT_FONT_WEIGHT};
+	`,
+	title2: css`
+		font-size: 17px;
+		line-height: 20px;
+		letter-spacing: -0.2px;
+		font-weight: ${DEFAULT_TITLE_TEXT_FONT_WEIGHT};
+	`,
+	title3: css`
+		font-size: 15px;
+		line-height: 18px;
+		letter-spacing: -0.2px;
+		font-weight: ${DEFAULT_TITLE_TEXT_FONT_WEIGHT};
+	`,
+	title4: css`
+		font-size: 13px;
+		line-height: 14px;
+		letter-spacing: -0.2px;
+		font-weight: ${DEFAULT_TITLE_TEXT_FONT_WEIGHT};
+	`,
+	body1: css`
+		font-size: 15px;
+		line-height: 18px;
+		letter-spacing: -0.2px;
+		font-weight: ${DEFAULT_BODY_TEXT_FONT_WEIGHT};
+	`,
+	body2: css`
+		font-size: 13px;
+		line-height: 16px;
+		letter-spacing: -0.2px;
+		font-weight: ${DEFAULT_BODY_TEXT_FONT_WEIGHT};
+	`,
+};
+
+export interface TextStyleProperties {
+	color?: string;
+}
+
+export const headline1 = (args?: TextStyleProperties) => css`
+	${typography.h1};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+
+export const headline2 = (args?: TextStyleProperties) => css`
+	${typography.h2};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+
+export const headline3 = (args?: TextStyleProperties) => css`
+	${typography.h3};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+
+export const headline4 = (args?: TextStyleProperties) => css`
+	${typography.h4};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+
+export const headline5 = (args?: TextStyleProperties) => css`
+	${typography.h5};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+
+export const headline6 = (args?: TextStyleProperties) => css`
+	${typography.h6};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+
+export const title1 = (args?: TextStyleProperties) => css`
+	${typography.title1};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+
+export const title2 = (args?: TextStyleProperties) => css`
+	${typography.title2};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+
+export const title3 = (args?: TextStyleProperties) => css`
+	${typography.title3};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+
+export const title4 = (args?: TextStyleProperties) => css`
+	${typography.title4};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+
+export const body1 = (args?: TextStyleProperties) => css`
+	${typography.body1};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;
+
+export const body2 = (args?: TextStyleProperties) => css`
+	${typography.body2};
+	margin: 0;
+	color: ${(args && args.color) || DEFAULT_TEXT_COLOR};
+`;

package/.history/src/hooks/useLayoutIsMobile_20230510193851.ts

@@ -0,0 +1,23 @@
+import { useCallback, useEffect, useState } from 'react';
+import { MediaQuerySize } from '../utils';
+import useResize from './useResize';
+
+const useLayoutIsMobile = (): boolean => {
+	const [isMobile, setIsMobile] = useState(false);
+
+	const checkIsMobile = useCallback(() => {
+		setIsMobile(window.innerWidth <= MediaQuerySize.Mobile);
+	}, []);
+
+	useEffect(() => {
+		if (typeof window !== 'undefined') {
+			checkIsMobile();
+		}
+	}, [checkIsMobile]);
+
+	useResize(checkIsMobile);
+
+	return isMobile;
+};
+
+export default useLayoutIsMobile;

package/.history/src/hooks/useLayoutIsMobile_20240112115425.ts

@@ -0,0 +1,23 @@
+import { useCallback, useEffect, useState } from 'react';
+import { MediaQuerySize } from '../utils';
+import useResize from './useResize';
+
+const useLayoutIsMobile = (): boolean => {
+	const [isMobile, setIsMobile] = useState(false);
+
+	const checkIsMobile = useCallback(() => {
+		setIsMobile(window.outerWidth <= MediaQuerySize.Mobile);
+	}, []);
+
+	useEffect(() => {
+		if (typeof window !== 'undefined') {
+			checkIsMobile();
+		}
+	}, [checkIsMobile]);
+
+	useResize(checkIsMobile);
+
+	return isMobile;
+};
+
+export default useLayoutIsMobile;

package/.history/src/library/BasicLayout/index_20240620100732.tsx

@@ -0,0 +1,89 @@
+import React, { useContext } from 'react';
+import { Title } from '../..';
+import BasicForm from '../BasicForm';
+import * as Styled from './index.styled';
+import { ImageCenterBodyComp } from './Body';
+import {
+	SingleButtonComp,
+	SingleATagComp,
+	DoubleButtonComp,
+	SingleButtonWithTooltipComp,
+	SingleButtonWithInformationIconComp,
+	StickBottomWrapperComp,
+} from './Footer';
+import { GlobalLayoutHeaderContext } from '../GlobalLayoutHeaderProvider/index.type';
+import { PropsWithChildren } from '../../types/react';
+import { useLayoutIsMobile } from '../../hooks';
+
+export type BasicLayoutProps = PropsWithChildren<{
+	hasHeader: boolean;
+	hasFooter: boolean;
+	bottomExtraComp?: React.ReactNode /* Card 영역 외부(pc) / 내부(mobile) */;
+	bodyCenterizing?: boolean /* true : 가운데 정렬을 위해 space-between 을 적용합니다. */;
+	marginBottomNoFooterColor?: string;
+}>;
+
+/**  getElementByName 으로 하고 싶었으나, Title 등이 bottomSheet 에 있으면, children 있다고 하기도 애매하네, props 로 명시해야할 듯 */
+const BasicLayoutComp: React.FC<BasicLayoutProps> = React.memo(
+	({ hasHeader, hasFooter, children, bottomExtraComp, bodyCenterizing = false }) => {
+		const isMobile = useLayoutIsMobile();
+		const { hasGlobalLayoutHeaderInMobile, hasGlobalLayoutHeader } = useContext(GlobalLayoutHeaderContext);
+
+		return (
+			<Styled.BasicLayoutBase.ParentWrapper
+				hasGlobalLayoutHeader={hasGlobalLayoutHeader}
+				bodyCenterizing={bodyCenterizing}
+			>
+				<Styled.BasicLayoutBase.ChildrenWrapper bodyCenterizing={bodyCenterizing}>
+					{!hasGlobalLayoutHeaderInMobile && !hasHeader && <Styled.MarginTopNoHeader />}
+					{children}
+					{isMobile && Boolean(bottomExtraComp) && bottomExtraComp}
+					{!hasFooter && <Styled.MarginBottomNoFooter />}
+				</Styled.BasicLayoutBase.ChildrenWrapper>
+				{!isMobile && Boolean(bottomExtraComp) && bottomExtraComp}
+			</Styled.BasicLayoutBase.ParentWrapper>
+		);
+	}
+);
+
+const VerticalHorizontalCenterLayoutComp: React.FC = ({ children }) => {
+	return (
+		<Styled.PureLayoutBase.ParentWrapper>
+			<Styled.PureLayoutBase.VerticalHorizontalCenterBody>
+				{children}
+			</Styled.PureLayoutBase.VerticalHorizontalCenterBody>
+		</Styled.PureLayoutBase.ParentWrapper>
+	);
+};
+
+// fyi. 원하는 컴포넌트 선택해서 끼워넣을 수 있도록
+const BasicLayout = Object.assign(BasicLayoutComp, {
+	/* Layout */
+	// BasicLayout (itself): BasicLayoutComp
+	VerticalHorizontalCenterLayout: VerticalHorizontalCenterLayoutComp,
+
+	/* Header */
+	Header: Title,
+
+	/* Body */
+	Body: Styled.BasicLayoutBase.Body,
+	SidePaddingBody: Styled.SidePaddingBody,
+	CenterBody: Styled.CenterBody,
+	ImageCenterBody: ImageCenterBodyComp,
+
+	/* Footer */
+	Footer: Styled.BasicLayoutBase.Footer,
+	SingleButton: SingleButtonComp,
+	SingleATag: SingleATagComp,
+	DoubleButton: DoubleButtonComp,
+	ContentsPadding: Styled.ContentsPadding,
+	ContentsVerticalPadding: Styled.ContentsVerticalPadding,
+	StickBottomWrapper: StickBottomWrapperComp,
+	SingleButtonWithTooltip: SingleButtonWithTooltipComp,
+	SingleButtonWithInformationIcon: SingleButtonWithInformationIconComp,
+
+	/* etc */
+	Form: BasicForm,
+});
+
+export default BasicLayout;