From 9c572218bfc51594313a3630eba7ce6dd029474e Mon Sep 17 00:00:00 2001 From: Seojisoo20191941 Date: Sun, 21 Jan 2024 23:43:32 +0900 Subject: [PATCH 1/7] =?UTF-8?q?etc:=20=EB=8B=A4=EC=9D=B4=EC=96=BC=EB=A1=9C?= =?UTF-8?q?=EA=B7=B8=20=EB=A1=9C=EC=BB=AC=20=EC=8B=A4=ED=96=89=20=EC=8B=9C?= =?UTF-8?q?=EB=8F=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/web/app/layout.tsx | 7 +++- apps/web/app/page.tsx | 47 ++++++++++++++++++++++-- apps/web/package.json | 4 +- packages/ui/.gitignore | 4 ++ packages/ui/.npmignore | 4 ++ packages/ui/index.ts | 9 +++++ packages/ui/scripts/build-css-modules.js | 26 +++++++++++++ 7 files changed, 94 insertions(+), 7 deletions(-) create mode 100644 packages/ui/.gitignore create mode 100644 packages/ui/.npmignore create mode 100644 packages/ui/index.ts create mode 100644 packages/ui/scripts/build-css-modules.js diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx index 50d7d04..69ea747 100644 --- a/apps/web/app/layout.tsx +++ b/apps/web/app/layout.tsx @@ -1,5 +1,6 @@ -import "./globals.css"; import type { Metadata } from "next"; +import DialogProvider from "ui/Dialog/DialogProvider"; +import "./globals.css"; export const metadata: Metadata = { title: "Create Turborepo", @@ -13,7 +14,9 @@ export default function RootLayout({ }): JSX.Element { return ( - {children} + + + {children} ); } diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx index 539da62..e142fba 100644 --- a/apps/web/app/page.tsx +++ b/apps/web/app/page.tsx @@ -1,10 +1,49 @@ -import { Test } from 'ui'; +"use client" + +import { useContext } from 'react'; +import { DialogContext } from 'ui/Dialog/DialogProvider'; +import { DialogOptionType } from 'ui/Dialog/types'; +import useDialog from '../../../packages/ui/Dialog/useDialog'; import styles from './page.module.css'; export default function Page(): JSX.Element { + const { closeDialog, checkCheckBox } = useContext(DialogContext); + + const option: DialogOptionType = { + title: '타이틀 자리입니다.', + description: ( + <> + 안녕하세요! makers입니다.
+ 피드백은 언제나 환영입니다! + + ), + checkBoxOptions: { + label: '다시는 보지 않기', + checked: false, + size: 'small', + color: 'white', + onChange: checkCheckBox, + }, + type: 'default', + typeOptions: { + cancelButtonText: '취소', + approveButtonText: '확인', + buttonFunction: closeDialog, + }, + }; + + + return ( -
- -
+
+ +
); } + +function DialogButton({ option }: { option: DialogOptionType }) { + const { open } = useDialog(); + + return ; +} + diff --git a/apps/web/package.json b/apps/web/package.json index b4b7b71..684cde7 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -23,6 +23,8 @@ "@types/react-dom": "^18.0.7", "eslint-config-custom": "*", "tsconfig": "*", - "typescript": "^4.5.3" + "typescript": "^4.5.3", + "webpack": "^5.89.0", + "webpack-cli": "^5.1.4" } } diff --git a/packages/ui/.gitignore b/packages/ui/.gitignore new file mode 100644 index 0000000..1091ed5 --- /dev/null +++ b/packages/ui/.gitignore @@ -0,0 +1,4 @@ +/node_modules/ +/dist +.DS_Store +/*.css diff --git a/packages/ui/.npmignore b/packages/ui/.npmignore new file mode 100644 index 0000000..606d0cf --- /dev/null +++ b/packages/ui/.npmignore @@ -0,0 +1,4 @@ +/src/ +/scripts/ +.gitignore +tsconfig.json diff --git a/packages/ui/index.ts b/packages/ui/index.ts new file mode 100644 index 0000000..01e8cdd --- /dev/null +++ b/packages/ui/index.ts @@ -0,0 +1,9 @@ +export * from "./cssVariables"; + +// component exports +// export { default as Button } from "./Button"; +export { default as Dialog } from "./Dialog"; +export { default as Test } from "./Test"; +// export { ToastProvider, useToast } from "./Toast"; +// export type { ToastOptionType } from "./Toast"; + diff --git a/packages/ui/scripts/build-css-modules.js b/packages/ui/scripts/build-css-modules.js new file mode 100644 index 0000000..b9b8f22 --- /dev/null +++ b/packages/ui/scripts/build-css-modules.js @@ -0,0 +1,26 @@ +const fs = require("fs"); +const path = require("path"); +const allVariables = require("../dist/cssVariables"); +const outputDir = require("../tsconfig.json").compilerOptions.outDir; + +Object.keys(allVariables).forEach((key) => { + const variableValues = Object.entries(allVariables).find( + ([name]) => name === key + )[1]; + + fs.writeFileSync( + path.join(outputDir, toFileName(key) + ".css"), + `${variableValues}` + ); +}); + +function toCssCasing(str) { + return str + .replace(/([a-z])/, "$1") + .replace(/([A-Z])/g, "-$1") + .toLowerCase(); +} + +function toFileName(str) { + return toCssCasing(str); +} From 6ec4fd4ad1b058b2c8760a88a48dc32f5e7b428c Mon Sep 17 00:00:00 2001 From: Seojisoo20191941 Date: Mon, 22 Jan 2024 01:24:47 +0900 Subject: [PATCH 2/7] =?UTF-8?q?fix:=20css=20variables=20=EC=98=A4=ED=83=80?= =?UTF-8?q?=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/Dialog/components/style.css.ts | 26 +++++++++++----------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/packages/ui/Dialog/components/style.css.ts b/packages/ui/Dialog/components/style.css.ts index 159203a..ca4f9b1 100644 --- a/packages/ui/Dialog/components/style.css.ts +++ b/packages/ui/Dialog/components/style.css.ts @@ -3,13 +3,13 @@ import theme from '../../theme.css'; export const title = style({ color: `${theme.colors.gray10}`, - marginBottom: 'var(-mds-dialog-title-margin-bottom,8px)', - fontFamily: 'var(-mds-dialog-title-font-family, SUIT)', - fontSize: 'var(-mds-dialog-title-font-size, 18px)', - fontStyle: 'var(-mds-dialog-title-font-stlye, normal)', - fontWeight: 'var(-mds-dialog-title-font-weight, 600)', - lineHeight: 'var(-mds-dialog-title-font-line-height, 28px)', - letterSpacing: 'var(-mds-dialog-title-font-letter-spacing, -2%)', + marginBottom: 'var(--mds-dialog-title-margin-bottom,8px)', + fontFamily: 'var(--mds-dialog-title-font-family,SUIT)', + fontSize: 'var(--mds-dialog-title-font-size,18px)', + fontStyle: 'var(--mds-dialog-title-font-style,normal)', + fontWeight: 'var(--mds-dialog-title-font-weight,600)', + lineHeight: 'var(--mds-dialog-title-font-line-height,28px)', + letterSpacing: 'var(--mds-dialog-title-font-letter-spacing,-2%)', }); export const description = style({ @@ -17,12 +17,12 @@ export const description = style({ overflowY: 'scroll', color: `${theme.colors.gray100}`, - fontFamily: 'var(-mds-dialog-description-font-family, SUIT)', - fontSize: 'var(-mds-dialog-description-font-size, 14px)', - fontStyle: 'var(-mds-dialog-description-font-stlye, normal)', - fontWeight: 'var(-mds-dialog-description-font-weight, 400)', - lineHeight: 'var(-mds-dialog-description-font-line-height, 22px)', - letterSpacing: 'var(-mds-dialog-v-font-letter-spacing, -1.5%)', + fontFamily: 'var(--mds-dialog-description-font-family, SUIT)', + fontSize: 'var(--mds-dialog-description-font-size, 14px)', + fontStyle: 'var(--mds-dialog-description-font-style, normal)', + fontWeight: 'var(--mds-dialog-description-font-weight, 400)', + lineHeight: 'var(--mds-dialog-description-font-line-height, 22px)', + letterSpacing: 'var(--mds-dialog-v-font-letter-spacing, -1.5%)', '::-webkit-scrollbar': { width: '4px', From e49d9013dca9460a43b852826a6b106b1952c9e7 Mon Sep 17 00:00:00 2001 From: Seojisoo20191941 Date: Mon, 22 Jan 2024 05:28:00 +0900 Subject: [PATCH 3/7] =?UTF-8?q?refactor:=20=EB=8B=A4=EC=9D=B4=EC=96=BC?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=20=EA=B3=A0=EB=8F=84=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/ui/Dialog/Dialog.tsx | 31 +++++++++++++++ packages/ui/Dialog/DialogComponent.tsx | 7 ++-- packages/ui/Dialog/DialogProvider.tsx | 53 +++++++++++--------------- packages/ui/Dialog/index.tsx | 36 ++--------------- packages/ui/index.ts | 10 +++-- 5 files changed, 67 insertions(+), 70 deletions(-) create mode 100644 packages/ui/Dialog/Dialog.tsx diff --git a/packages/ui/Dialog/Dialog.tsx b/packages/ui/Dialog/Dialog.tsx new file mode 100644 index 0000000..8493f24 --- /dev/null +++ b/packages/ui/Dialog/Dialog.tsx @@ -0,0 +1,31 @@ +import { FC } from 'react'; + +import * as Dialogs from '@radix-ui/react-dialog'; +import { DialogAnimation, DialogDescription, DialogFooter, DialogTitle } from './components'; +import { dialogContainer, overlay } from './style.css'; +import { DialogProps } from './types'; + +export const DialogContainer: FC = ({ isOpen, onClose, children, ...restProps }) => { + return ( + + + + + +
{children}
+ + + + + + ); +}; + +const Dialog = Object.assign(DialogContainer, { + Title: DialogTitle, + Description: DialogDescription, + Footer: DialogFooter, + Animation: DialogAnimation, +}); + +export default Dialog; diff --git a/packages/ui/Dialog/DialogComponent.tsx b/packages/ui/Dialog/DialogComponent.tsx index 992bb1a..4c117f3 100644 --- a/packages/ui/Dialog/DialogComponent.tsx +++ b/packages/ui/Dialog/DialogComponent.tsx @@ -1,8 +1,7 @@ -import React from 'react'; -import Dialog from '.'; import Button from '../Button'; import CheckBox from '../CheckBox'; -import { buttonMinSize, buttonSize, checkBoxWapper, descriptionMarginBottom } from './style.css'; +import Dialog from './Dialog'; +import { buttonSize, checkBoxWapper, descriptionMarginBottom } from './style.css'; import { DialogValueProps } from './types'; export const DialogComponent = ({ @@ -72,7 +71,7 @@ export const DialogComponent = ({ rounded="md" theme="white" onClick={onApprove} - className={`${buttonSize} ${buttonMinSize['single']}`} + className={`${buttonSize}`} > {typeOptions?.approveButtonText} diff --git a/packages/ui/Dialog/DialogProvider.tsx b/packages/ui/Dialog/DialogProvider.tsx index 339c752..1250d2c 100644 --- a/packages/ui/Dialog/DialogProvider.tsx +++ b/packages/ui/Dialog/DialogProvider.tsx @@ -1,54 +1,47 @@ 'use client'; -import React, { ChangeEvent, createContext, useCallback, useEffect, useState } from 'react'; +import { createContext, useEffect, useState } from 'react'; import { DialogComponent } from './DialogComponent'; import { DialogOptionType, ProviderChildren } from './types'; export const DialogContext = createContext({ openDialog(option: DialogOptionType) {}, closeDialog() {}, - checkCheckBox(e: ChangeEvent) {}, + checkCheckBox(isCheckValue:boolean) {}, }); function DialogProvider({ children }: ProviderChildren) { const [dialogOption, setDialogOption] = useState(null); - const [isMounted, setIsMounted] = useState(false); - useEffect(() => { - setIsMounted(true); - }); - - const openDialog = useCallback( - (option: DialogOptionType) => { - setDialogOption(option); - }, - [dialogOption] - ); + const [isCheck, setIsCheck] = useState(dialogOption?.checkBoxOptions?.checked ?? false); + + const openDialog = (option: DialogOptionType) => { + setDialogOption(option); + }; const closeDialog = () => { setDialogOption(null); }; - const checkCheckBox = (e: ChangeEvent) => { - setDialogOption((prevOption) => ({ - ...prevOption, - checkBoxOptions: { ...prevOption?.checkBoxOptions, checked: e.target.checked }, - })); + const checkCheckBox = (isCheckValue:boolean) => { + setIsCheck(isCheckValue); }; + useEffect(() => { + if (dialogOption?.checkBoxOptions) { + const newCheckBoxOption = { ...dialogOption.checkBoxOptions, checked: isCheck }; + const newDialogOption = { ...dialogOption, checkBoxOptions: newCheckBoxOption }; + setDialogOption(newDialogOption); + } + }, [isCheck]); + return ( <> - {isMounted && ( - - {children} - {dialogOption && ( - - )} - - )} + + {children} + {dialogOption && ( + + )} + ); } diff --git a/packages/ui/Dialog/index.tsx b/packages/ui/Dialog/index.tsx index 33f4e36..2e6cb80 100644 --- a/packages/ui/Dialog/index.tsx +++ b/packages/ui/Dialog/index.tsx @@ -1,32 +1,4 @@ -import { FC } from 'react'; - -import * as Dialogs from '@radix-ui/react-dialog'; -import React from 'react'; -import { DialogAnimation, DialogDescription, DialogFooter, DialogTitle } from './components'; -import { dialogContainer, overlay } from './style.css'; -import { DialogProps } from './types'; - -export const DialogContainer: FC = ({ isOpen, onClose, children, ...restProps }) => { - return ( - - - - - -
{children}
- - - - - - ); -}; - -const Dialog = Object.assign(DialogContainer, { - Title: DialogTitle, - Description: DialogDescription, - Footer: DialogFooter, - Animation: DialogAnimation, -}); - -export default Dialog; +export { default as Dialog } from './Dialog'; +export { DialogContext, default as DialogProvider } from './DialogProvider'; +export type { DialogOptionType } from './types'; +export { default as useDialog } from './useDialog'; diff --git a/packages/ui/index.ts b/packages/ui/index.ts index 218a300..1355cdd 100644 --- a/packages/ui/index.ts +++ b/packages/ui/index.ts @@ -1,7 +1,9 @@ export * from "./cssVariables"; // component exports -// export { default as Button } from "./Button"; -export { default as Dialog } from "./Dialog"; -// export { ToastProvider, useToast } from "./Toast"; -// export type { ToastOptionType } from "./Toast"; +export { default as Button } from "./Button"; +export { Dialog, DialogContext, DialogProvider, useDialog } from "./Dialog"; +export type { DialogOptionType } from "./Dialog"; +export { ToastProvider, useToast } from "./Toast"; +export type { ToastOptionType } from "./Toast"; + From e208e418cc00d3928801be86a869b7156bdd5299 Mon Sep 17 00:00:00 2001 From: seojisoosoo <76681519+seojisoosoo@users.noreply.github.com> Date: Mon, 22 Jan 2024 05:33:01 +0900 Subject: [PATCH 4/7] Update --- apps/web/app/layout.tsx | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/apps/web/app/layout.tsx b/apps/web/app/layout.tsx index 69ea747..50d7d04 100644 --- a/apps/web/app/layout.tsx +++ b/apps/web/app/layout.tsx @@ -1,6 +1,5 @@ -import type { Metadata } from "next"; -import DialogProvider from "ui/Dialog/DialogProvider"; import "./globals.css"; +import type { Metadata } from "next"; export const metadata: Metadata = { title: "Create Turborepo", @@ -14,9 +13,7 @@ export default function RootLayout({ }): JSX.Element { return ( - - - {children} + {children} ); } From 773cd4bf0f660146cd19dc5e9353fea5426ede52 Mon Sep 17 00:00:00 2001 From: seojisoosoo <76681519+seojisoosoo@users.noreply.github.com> Date: Mon, 22 Jan 2024 05:33:36 +0900 Subject: [PATCH 5/7] Update --- apps/web/app/page.tsx | 47 ++++--------------------------------------- 1 file changed, 4 insertions(+), 43 deletions(-) diff --git a/apps/web/app/page.tsx b/apps/web/app/page.tsx index e142fba..539da62 100644 --- a/apps/web/app/page.tsx +++ b/apps/web/app/page.tsx @@ -1,49 +1,10 @@ -"use client" - -import { useContext } from 'react'; -import { DialogContext } from 'ui/Dialog/DialogProvider'; -import { DialogOptionType } from 'ui/Dialog/types'; -import useDialog from '../../../packages/ui/Dialog/useDialog'; +import { Test } from 'ui'; import styles from './page.module.css'; export default function Page(): JSX.Element { - const { closeDialog, checkCheckBox } = useContext(DialogContext); - - const option: DialogOptionType = { - title: '타이틀 자리입니다.', - description: ( - <> - 안녕하세요! makers입니다.
- 피드백은 언제나 환영입니다! - - ), - checkBoxOptions: { - label: '다시는 보지 않기', - checked: false, - size: 'small', - color: 'white', - onChange: checkCheckBox, - }, - type: 'default', - typeOptions: { - cancelButtonText: '취소', - approveButtonText: '확인', - buttonFunction: closeDialog, - }, - }; - - - return ( -
- -
+
+ +
); } - -function DialogButton({ option }: { option: DialogOptionType }) { - const { open } = useDialog(); - - return ; -} - From fc11b5f4fb2a47c2f586da366015b5eafe9b2200 Mon Sep 17 00:00:00 2001 From: seojisoosoo <76681519+seojisoosoo@users.noreply.github.com> Date: Mon, 22 Jan 2024 05:34:20 +0900 Subject: [PATCH 6/7] revert package.json --- apps/web/package.json | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/apps/web/package.json b/apps/web/package.json index 684cde7..b4b7b71 100644 --- a/apps/web/package.json +++ b/apps/web/package.json @@ -23,8 +23,6 @@ "@types/react-dom": "^18.0.7", "eslint-config-custom": "*", "tsconfig": "*", - "typescript": "^4.5.3", - "webpack": "^5.89.0", - "webpack-cli": "^5.1.4" + "typescript": "^4.5.3" } } From 37186b3eced2008ebf0ce94ae836cd96d1cba931 Mon Sep 17 00:00:00 2001 From: Seojisoo20191941 Date: Mon, 22 Jan 2024 05:40:09 +0900 Subject: [PATCH 7/7] =?UTF-8?q?fix:=20=EC=B2=B4=ED=81=AC=EB=B0=95=EC=8A=A4?= =?UTF-8?q?=20=ED=95=A8=EC=88=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- apps/docs/src/stories/Dialog.stories.tsx | 11 +++++------ packages/ui/Dialog/DialogProvider.tsx | 2 +- 2 files changed, 6 insertions(+), 7 deletions(-) diff --git a/apps/docs/src/stories/Dialog.stories.tsx b/apps/docs/src/stories/Dialog.stories.tsx index 8c9a76c..f0ed834 100644 --- a/apps/docs/src/stories/Dialog.stories.tsx +++ b/apps/docs/src/stories/Dialog.stories.tsx @@ -1,8 +1,7 @@ import { Meta, StoryFn, StoryObj } from '@storybook/react'; -import Dialog from 'ui/Dialog'; - import { useContext } from 'react'; +import { Dialog } from 'ui'; import DialogProvider, { DialogContext } from 'ui/Dialog/DialogProvider'; import { DialogOptionType } from 'ui/Dialog/types'; import useDialog from '../../../../packages/ui/Dialog/useDialog'; @@ -106,7 +105,7 @@ export const DesktopSingleLabel: StoryObj = { checked: false, size: 'small', color: 'white', - onChange: checkCheckBox, + onChange: (e) => checkCheckBox(e.target.checked), }, type: 'single', typeOptions: { @@ -178,7 +177,7 @@ export const DesktopSingleLong: StoryObj = { checked: false, size: 'small', color: 'white', - onChange: checkCheckBox, + onChange: (e) => checkCheckBox(e.target.checked), }, type: 'default', typeOptions: { @@ -269,7 +268,7 @@ export const MobileSingleLabel: StoryObj = { checked: false, size: 'small', color: 'white', - onChange: checkCheckBox, + onChange: (e) => checkCheckBox(e.target.checked), }, type: 'single', typeOptions: { @@ -333,7 +332,7 @@ export const MobileSingleLong: StoryObj = { checked: false, size: 'small', color: 'white', - onChange: checkCheckBox, + onChange: (e) => checkCheckBox(e.target.checked), }, type: 'default', typeOptions: { diff --git a/packages/ui/Dialog/DialogProvider.tsx b/packages/ui/Dialog/DialogProvider.tsx index 1250d2c..a1a7ff4 100644 --- a/packages/ui/Dialog/DialogProvider.tsx +++ b/packages/ui/Dialog/DialogProvider.tsx @@ -25,7 +25,7 @@ function DialogProvider({ children }: ProviderChildren) { const checkCheckBox = (isCheckValue:boolean) => { setIsCheck(isCheckValue); }; - + useEffect(() => { if (dialogOption?.checkBoxOptions) { const newCheckBoxOption = { ...dialogOption.checkBoxOptions, checked: isCheck };