Skip to content

Commit

Permalink
Merge pull request #48 from sopt-makers/feat/47-dialogTest
Browse files Browse the repository at this point in the history
Feat/47 dialog test
  • Loading branch information
seojisoosoo authored Jan 31, 2024
2 parents 81ee600 + 714c4d6 commit 162d606
Show file tree
Hide file tree
Showing 8 changed files with 89 additions and 91 deletions.
11 changes: 5 additions & 6 deletions apps/docs/src/stories/Dialog.stories.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -96,7 +95,7 @@ export const DesktopSingleLabel: StoryObj = {
checked: false,
size: 'small',
color: 'white',
onChange: checkCheckBox,
onChange: (e) => checkCheckBox(e.target.checked),
},
type: 'single',
typeOptions: {
Expand Down Expand Up @@ -168,7 +167,7 @@ export const DesktopSingleLong: StoryObj = {
checked: false,
size: 'small',
color: 'white',
onChange: checkCheckBox,
onChange: (e) => checkCheckBox(e.target.checked),
},
type: 'default',
typeOptions: {
Expand Down Expand Up @@ -259,7 +258,7 @@ export const MobileSingleLabel: StoryObj = {
checked: false,
size: 'small',
color: 'white',
onChange: checkCheckBox,
onChange: (e) => checkCheckBox(e.target.checked),
},
type: 'single',
typeOptions: {
Expand Down Expand Up @@ -323,7 +322,7 @@ export const MobileSingleLong: StoryObj = {
checked: false,
size: 'small',
color: 'white',
onChange: checkCheckBox,
onChange: (e) => checkCheckBox(e.target.checked),
},
type: 'default',
typeOptions: {
Expand Down
5 changes: 4 additions & 1 deletion apps/web/app/globals.css
Original file line number Diff line number Diff line change
Expand Up @@ -55,4 +55,7 @@ a {
format('woff2');
font-weight: 700;
font-style: normal;
}
}

@import url('ui/desktop-variables.css') screen;
@import url('ui/mobile-variables.css') screen and (max-width: 768px);
31 changes: 31 additions & 0 deletions packages/ui/Dialog/Dialog.tsx
Original file line number Diff line number Diff line change
@@ -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<DialogProps> = ({ isOpen, onClose, children, ...restProps }) => {
return (
<Dialogs.Root open={isOpen} onOpenChange={onClose}>
<Dialogs.Portal>
<Dialogs.Overlay className={overlay}>
<DialogAnimation>
<Dialogs.Content className={dialogContainer} asChild {...restProps}>
<div>{children}</div>
</Dialogs.Content>
</DialogAnimation>
</Dialogs.Overlay>
</Dialogs.Portal>
</Dialogs.Root>
);
};

const Dialog = Object.assign(DialogContainer, {
Title: DialogTitle,
Description: DialogDescription,
Footer: DialogFooter,
Animation: DialogAnimation,
});

export default Dialog;
7 changes: 3 additions & 4 deletions packages/ui/Dialog/DialogComponent.tsx
Original file line number Diff line number Diff line change
@@ -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 = ({
Expand Down Expand Up @@ -72,7 +71,7 @@ export const DialogComponent = ({
rounded="md"
theme="white"
onClick={onApprove}
className={`${buttonSize} ${buttonMinSize['single']}`}
className={`${buttonSize}`}
>
{typeOptions?.approveButtonText}
</Button>
Expand Down
53 changes: 23 additions & 30 deletions packages/ui/Dialog/DialogProvider.tsx
Original file line number Diff line number Diff line change
@@ -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<HTMLInputElement>) {},
checkCheckBox(isCheckValue:boolean) {},
});

function DialogProvider({ children }: ProviderChildren) {
const [dialogOption, setDialogOption] = useState<DialogOptionType | null>(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<HTMLInputElement>) => {
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 && (
<DialogContext.Provider value={{ openDialog, closeDialog, checkCheckBox }}>
{children}
{dialogOption && (
<DialogComponent
isOpen={dialogOption !== null}
onClose={closeDialog}
{...dialogOption}
/>
)}
</DialogContext.Provider>
)}
<DialogContext.Provider value={{ openDialog, closeDialog, checkCheckBox }}>
{children}
{dialogOption && (
<DialogComponent isOpen={dialogOption !== null} onClose={closeDialog} {...dialogOption} />
)}
</DialogContext.Provider>
</>
);
}
Expand Down
26 changes: 13 additions & 13 deletions packages/ui/Dialog/components/style.css.ts
Original file line number Diff line number Diff line change
Expand Up @@ -3,26 +3,26 @@ 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({
maxHeight: '264px',
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',
Expand Down
36 changes: 4 additions & 32 deletions packages/ui/Dialog/index.tsx
Original file line number Diff line number Diff line change
@@ -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<DialogProps> = ({ isOpen, onClose, children, ...restProps }) => {
return (
<Dialogs.Root open={isOpen} onOpenChange={onClose}>
<Dialogs.Portal>
<Dialogs.Overlay className={overlay}>
<DialogAnimation>
<Dialogs.Content className={dialogContainer} asChild {...restProps}>
<div>{children}</div>
</Dialogs.Content>
</DialogAnimation>
</Dialogs.Overlay>
</Dialogs.Portal>
</Dialogs.Root>
);
};

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';
11 changes: 6 additions & 5 deletions packages/ui/index.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
export * from "./cssVariables";

// component exports
// export { default as Button } from "./Button";
// export { ToastProvider, useToast } from "./Toast";
// export type { ToastOptionType } from "./Toast";
// export { default as Test } from "./Test";
// export { default as Dialog } from "./Dialog";
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";

0 comments on commit 162d606

Please sign in to comment.