@dotss/ui 0.0.6 → 0.0.8

package/components/DatePicker/index.ts

@@ -1,6 +0,0 @@
-import type { DateFormatter, DatePickerValue, DateValue } from './DatePicker';
-import DatePicker from './DatePicker';
-
-export type { DatePickerValue, DateValue, DateFormatter };
-
-export default DatePicker;

package/components/Dialog/Dialog.stories.tsx

@@ -1,579 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Button from '@components/Button';
-
-import Flexbox from '@components/Flexbox';
-import TextField from '@components/TextField';
-import Typography from '@components/Typography';
-import useTheme from '@core/useTheme';
-
-import Dialog from './Dialog';
-import DialogAction from './DialogAction';
-import DialogContent from './DialogContent';
-import DialogText from './DialogText';
-import DialogTitle from './DialogTitle';
-
-const meta = {
-  title: 'Component/Dialog',
-  component: Dialog,
-  parameters: {
-    layout: 'centered'
-  },
-  argTypes: {
-    backdropProps: {
-      control: {
-        disable: true
-      }
-    }
-  },
-  tags: ['autodocs']
-} satisfies Meta<typeof Dialog>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  render: (props) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    const handleOpen = () => setIsOpen((prevState) => !prevState);
-
-    useEffect(() => {
-      setIsOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <>
-        <Button onClick={handleOpen}>Open Dialog</Button>
-        <Dialog
-          open={isOpen}
-          onClose={handleOpen}
-          fullWidth={props?.fullWidth}
-          fullScreen={props?.fullScreen}
-          maxWidth={props?.maxWidth}
-          maxHeight={props?.maxHeight}
-          transitionDuration={props?.transitionDuration}
-        >
-          Dialog
-        </Dialog>
-      </>
-    );
-  },
-  args: {
-    fullWidth: true,
-    fullScreen: false,
-    maxWidth: 320,
-    maxHeight: 438,
-    transitionDuration: 200
-  }
-};
-
-export const FullFeature: Story = {
-  render: (props) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    const handleOpen = () => setIsOpen((prevState) => !prevState);
-
-    useEffect(() => {
-      setIsOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <>
-        <Button onClick={handleOpen}>Open Dialog</Button>
-        <Dialog
-          open={isOpen}
-          onClose={handleOpen}
-          fullWidth={props?.fullWidth}
-          fullScreen={props?.fullScreen}
-          maxWidth={props?.maxWidth}
-          maxHeight={props?.maxHeight}
-          transitionDuration={props?.transitionDuration}
-        >
-          <DialogTitle fullScreen={props?.fullScreen} onClose={handleOpen}>
-            Dialog Title
-          </DialogTitle>
-          <DialogContent>
-            <DialogText>메인텍스트메인텍스트메인텍스트</DialogText>
-            <DialogText type="sub">서브 텍스트 서브 텍스트 서브 텍스트</DialogText>
-            <TextField placeholder="내용을 입력해 주세요." />
-          </DialogContent>
-          <DialogAction>
-            <Button variant="outlined" color="secondary" size="large" onClick={handleOpen}>
-              Sec. Button
-            </Button>
-            <Button size="large" onClick={handleOpen}>
-              Pri. Button
-            </Button>
-          </DialogAction>
-        </Dialog>
-      </>
-    );
-  },
-  args: {
-    fullWidth: true,
-    fullScreen: false,
-    maxWidth: 320,
-    maxHeight: 438,
-    transitionDuration: 200
-  }
-};
-
-export const WithDialogTitle: Story = {
-  render: (props) => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [hideCloseButton, setHideCloseButton] = useState(false);
-
-    const handleOpen = () => setIsOpen((prevState) => !prevState);
-
-    const handleHideCloseButton = () => setHideCloseButton((prevState) => !prevState);
-
-    useEffect(() => {
-      setIsOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <>
-        <Button onClick={handleOpen}>Open Dialog</Button>
-        <Dialog
-          open={isOpen}
-          onClose={handleOpen}
-          fullWidth={props?.fullWidth}
-          fullScreen={props?.fullScreen}
-          maxWidth={props?.maxWidth}
-          maxHeight={props?.maxHeight}
-          transitionDuration={props?.transitionDuration}
-        >
-          <DialogTitle
-            fullScreen={props?.fullScreen}
-            onClose={handleOpen}
-            hideCloseButton={hideCloseButton}
-          >
-            Dialog Title
-          </DialogTitle>
-          <DialogContent>
-            <Button onClick={handleHideCloseButton}>Hide Close Button</Button>
-          </DialogContent>
-        </Dialog>
-      </>
-    );
-  },
-  args: {
-    fullWidth: true,
-    fullScreen: false,
-    maxWidth: 320,
-    maxHeight: 438,
-    transitionDuration: 200
-  }
-};
-
-export const WithDialogContent: Story = {
-  render: (props) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    const handleOpen = () => setIsOpen((prevState) => !prevState);
-
-    useEffect(() => {
-      setIsOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <>
-        <Button onClick={handleOpen}>Open Dialog</Button>
-        <Dialog
-          open={isOpen}
-          onClose={handleOpen}
-          fullWidth={props?.fullWidth}
-          fullScreen={props?.fullScreen}
-          maxWidth={props?.maxWidth}
-          maxHeight={props?.maxHeight}
-          transitionDuration={props?.transitionDuration}
-        >
-          <DialogContent>
-            <DialogText>메인텍스트메인텍스트메인텍스트</DialogText>
-            <DialogText type="sub">서브 텍스트 서브 텍스트 서브 텍스트</DialogText>
-          </DialogContent>
-        </Dialog>
-      </>
-    );
-  },
-  args: {
-    fullWidth: true,
-    fullScreen: false,
-    maxWidth: 320,
-    maxHeight: 438,
-    transitionDuration: 200
-  }
-};
-
-export const WithDialogAction: Story = {
-  render: (props) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    const handleOpen = () => setIsOpen((prevState) => !prevState);
-
-    useEffect(() => {
-      setIsOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <>
-        <Button onClick={handleOpen}>Open Dialog</Button>
-        <Dialog
-          open={isOpen}
-          onClose={handleOpen}
-          fullWidth={props?.fullWidth}
-          fullScreen={props?.fullScreen}
-          maxWidth={props?.maxWidth}
-          maxHeight={props?.maxHeight}
-          transitionDuration={props?.transitionDuration}
-        >
-          <DialogContent>
-            <DialogText>메인텍스트메인텍스트메인텍스트</DialogText>
-            <DialogText type="sub">서브 텍스트 서브 텍스트 서브 텍스트</DialogText>
-          </DialogContent>
-          <DialogAction>
-            <Button variant="outlined" color="secondary" size="large" onClick={handleOpen}>
-              Sec. Button
-            </Button>
-            <Button size="large" onClick={handleOpen}>
-              Pri. Button
-            </Button>
-          </DialogAction>
-        </Dialog>
-      </>
-    );
-  },
-  args: {
-    fullWidth: true,
-    fullScreen: false,
-    maxWidth: 320,
-    maxHeight: 438,
-    transitionDuration: 200
-  }
-};
-
-export const Custom: Story = {
-  render: (props) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    const handleOpen = () => setIsOpen((prevState) => !prevState);
-
-    useEffect(() => {
-      setIsOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <>
-        <Button onClick={handleOpen}>Open Dialog</Button>
-        <Dialog
-          open={isOpen}
-          onClose={handleOpen}
-          fullWidth={props?.fullWidth}
-          fullScreen={props?.fullScreen}
-          maxWidth={props?.maxWidth}
-          maxHeight={props?.maxHeight}
-          transitionDuration={props?.transitionDuration}
-        >
-          <DialogContent>
-            <TextField placeholder="내용을 입력해 주세요." />
-          </DialogContent>
-        </Dialog>
-      </>
-    );
-  },
-  args: {
-    fullWidth: true,
-    fullScreen: false,
-    maxWidth: 320,
-    maxHeight: 438,
-    transitionDuration: 200
-  }
-};
-
-export const MaxHeight: Story = {
-  render: (props) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    const handleOpen = () => setIsOpen((prevState) => !prevState);
-
-    useEffect(() => {
-      setIsOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <>
-        <Button onClick={handleOpen}>Open Dialog</Button>
-        <Dialog
-          open={isOpen}
-          onClose={handleOpen}
-          fullWidth={props?.fullWidth}
-          fullScreen={props?.fullScreen}
-          maxWidth={props?.maxWidth}
-          maxHeight={props?.maxHeight}
-          transitionDuration={props?.transitionDuration}
-        >
-          {Array.from({ length: 100 })
-            .map((_, index) => index)
-            .map((index) => (
-              <Typography key={`typography-${index}`}>
-                서브 텍스트 서브 텍스트 서브 텍스트
-              </Typography>
-            ))}
-        </Dialog>
-      </>
-    );
-  },
-  args: {
-    fullWidth: true,
-    fullScreen: false,
-    maxWidth: 320,
-    maxHeight: 438,
-    transitionDuration: 200
-  }
-};
-
-export const MaxHeightWithDialogContent: Story = {
-  render: (props) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    const handleOpen = () => setIsOpen((prevState) => !prevState);
-
-    useEffect(() => {
-      setIsOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <>
-        <Button onClick={handleOpen}>Open Dialog</Button>
-        <Dialog
-          open={isOpen}
-          onClose={handleOpen}
-          fullWidth={props?.fullWidth}
-          fullScreen={props?.fullScreen}
-          maxWidth={props?.maxWidth}
-          maxHeight={props?.maxHeight}
-          transitionDuration={props?.transitionDuration}
-        >
-          <DialogTitle fullScreen={props?.fullScreen} onClose={handleOpen}>
-            Dialog Title
-          </DialogTitle>
-          <DialogContent>
-            <DialogText>메인텍스트메인텍스트메인텍스트</DialogText>
-            {Array.from({ length: 100 })
-              .map((_, index) => index)
-              .map((index) => (
-                <DialogText key={`dialog-sub-text-${index}`} type="sub">
-                  서브 텍스트 서브 텍스트 서브 텍스트
-                </DialogText>
-              ))}
-          </DialogContent>
-          <DialogAction>
-            <Button variant="outlined" color="secondary" size="large" onClick={handleOpen}>
-              Sec. Button
-            </Button>
-            <Button size="large" onClick={handleOpen}>
-              Pri. Button
-            </Button>
-          </DialogAction>
-        </Dialog>
-      </>
-    );
-  },
-  args: {
-    fullWidth: true,
-    fullScreen: false,
-    maxWidth: 320,
-    maxHeight: 438,
-    transitionDuration: 200
-  }
-};
-
-export const FullWidth: Story = {
-  render: (props) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    const handleOpen = () => setIsOpen((prevState) => !prevState);
-
-    useEffect(() => {
-      setIsOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <>
-        <Button onClick={handleOpen}>Open Dialog</Button>
-        <Dialog
-          open={isOpen}
-          onClose={handleOpen}
-          fullWidth={props?.fullWidth}
-          fullScreen={props?.fullScreen}
-          maxWidth={props?.maxWidth}
-          maxHeight={props?.maxHeight}
-          transitionDuration={props?.transitionDuration}
-        >
-          Dialog
-        </Dialog>
-      </>
-    );
-  },
-  args: {
-    fullWidth: true,
-    fullScreen: false,
-    maxWidth: 'auto',
-    maxHeight: 438,
-    transitionDuration: 200
-  }
-};
-
-export const FullScreen: Story = {
-  render: (props) => {
-    const [isOpen, setIsOpen] = useState(false);
-
-    const handleOpen = () => setIsOpen((prevState) => !prevState);
-
-    useEffect(() => {
-      setIsOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <>
-        <Button onClick={handleOpen}>Open Dialog</Button>
-        <Dialog
-          open={isOpen}
-          onClose={handleOpen}
-          fullWidth={props?.fullWidth}
-          fullScreen={props?.fullScreen}
-          maxWidth={props?.maxWidth}
-          maxHeight={props?.maxHeight}
-          transitionDuration={props?.transitionDuration}
-        >
-          <Button
-            onClick={handleOpen}
-            inlineCSS={{
-              maxWidth: 'fit-content'
-            }}
-          >
-            Close Dialog
-          </Button>
-        </Dialog>
-      </>
-    );
-  },
-  args: {
-    fullWidth: true,
-    fullScreen: true,
-    maxHeight: 438,
-    transitionDuration: 200
-  }
-};
-
-export const InContainer: Story = {
-  render: (props) => {
-    const {
-      palette: { grey }
-    } = useTheme();
-
-    const [isOpen, setIsOpen] = useState(false);
-    const [isOpenInContainer, setIsOpenInContainer] = useState(false);
-
-    const containerRef = useRef<HTMLDivElement>(null);
-
-    const handleOpen = () => setIsOpen((prevState) => !prevState);
-
-    const handleOpenInContainer = () => setIsOpenInContainer((prevState) => !prevState);
-
-    useEffect(() => {
-      setIsOpen(props?.open || false);
-    }, [props?.open]);
-
-    return (
-      <Flexbox gap={10}>
-        <Flexbox p={5} alignItems="center" justifyContent="center">
-          <Button onClick={handleOpen}>Open Dialog</Button>
-          <Dialog
-            open={isOpen}
-            onClose={handleOpen}
-            fullWidth={props?.fullWidth}
-            fullScreen={props?.fullScreen}
-            maxWidth={props?.maxWidth}
-            maxHeight={props?.maxHeight}
-            transitionDuration={props?.transitionDuration}
-          >
-            <DialogTitle fullScreen={props?.fullScreen} onClose={handleOpen}>
-              Dialog Title
-            </DialogTitle>
-            <DialogContent>
-              <DialogText>메인텍스트메인텍스트메인텍스트</DialogText>
-              <DialogText type="sub">서브 텍스트 서브 텍스트 서브 텍스트</DialogText>
-              <TextField placeholder="내용을 입력해 주세요." />
-            </DialogContent>
-            <DialogAction>
-              <Button variant="outlined" color="secondary" size="large" onClick={handleOpen}>
-                Sec. Button
-              </Button>
-              <Button size="large" onClick={handleOpen}>
-                Pri. Button
-              </Button>
-            </DialogAction>
-          </Dialog>
-        </Flexbox>
-        <Flexbox
-          ref={containerRef}
-          p={5}
-          alignItems="center"
-          justifyContent="center"
-          inlineCSS={{
-            width: 320,
-            height: 500,
-            backgroundColor: grey['20']
-          }}
-        >
-          <Button onClick={handleOpenInContainer}>Open Dialog In Container</Button>
-          <Dialog
-            open={isOpenInContainer}
-            onClose={handleOpenInContainer}
-            fullWidth={props?.fullWidth}
-            fullScreen={props?.fullScreen}
-            maxWidth={props?.maxWidth}
-            maxHeight={props?.maxHeight}
-            transitionDuration={props?.transitionDuration}
-            backdropProps={{
-              containerRef
-            }}
-          >
-            <DialogTitle fullScreen={props?.fullScreen} onClose={handleOpenInContainer}>
-              Dialog Title
-            </DialogTitle>
-            <DialogContent>
-              <DialogText>메인텍스트메인텍스트메인텍스트</DialogText>
-              <DialogText type="sub">서브 텍스트 서브 텍스트 서브 텍스트</DialogText>
-              <TextField placeholder="내용을 입력해 주세요." />
-            </DialogContent>
-            <DialogAction>
-              <Button
-                variant="outlined"
-                color="secondary"
-                size="large"
-                onClick={handleOpenInContainer}
-              >
-                Sec. Button
-              </Button>
-              <Button size="large" onClick={handleOpenInContainer}>
-                Pri. Button
-              </Button>
-            </DialogAction>
-          </Dialog>
-        </Flexbox>
-      </Flexbox>
-    );
-  },
-  args: {
-    fullWidth: true,
-    fullScreen: false,
-    maxWidth: 320,
-    maxHeight: 438,
-    transitionDuration: 200
-  }
-};

package/components/Dialog/Dialog.styles.ts

@@ -1,50 +0,0 @@
-import type { CSSObject } from '@emotion/styled';
-import styled from '@emotion/styled';
-
-import type { DialogProps } from '@components/Dialog/Dialog';
-
-export const StyledDialog = styled.div<
-  Pick<
-    DialogProps,
-    'open' | 'transitionDuration' | 'fullWidth' | 'fullScreen' | 'maxWidth' | 'maxHeight'
-  >
->`
-  position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate3d(-50%, -50%, 0);
-  display: flex;
-  flex-direction: column;
-  width: ${({ fullWidth }) => (fullWidth ? '100%' : 'auto')};
-  max-width: ${({ maxWidth }) => (typeof maxWidth === 'number' ? `${maxWidth}px` : 'auto')};
-  max-height: ${({ maxHeight }) => (typeof maxHeight === 'number' ? `${maxHeight}px` : '100%')};
-  border-radius: 16px;
-  background-color: ${({
-    theme: {
-      palette: { grey }
-    }
-  }) => grey.white};
-  box-shadow: ${({ theme: { elevation } }) => elevation['2']};
-  overflow-y: auto;
-
-  transition: transform ${({ transitionDuration }) => transitionDuration}ms;
-  ${({ open }): CSSObject =>
-    open
-      ? {
-          transform: 'translate3d(-50%, -50%, 0)'
-        }
-      : {
-          transform: 'translate3d(-50%, -50%, 0) scale(0.97)'
-        }};
-
-  ${({ fullScreen }): CSSObject | null =>
-    fullScreen
-      ? {
-          width: '100%',
-          height: '100%',
-          maxWidth: '100%',
-          maxHeight: '100%',
-          borderRadius: 0
-        }
-      : null}
-`;