woowacourse-todari-components v1.0.1

woowacourse-todari-components

Install

npm i woowacourse-todari-components

Storybook

click here for check storybook page

API

Top-Level Exports

• <Button>
• <Modal>
• <AlertModal>
• <ConfirmModal>
• <PromptModal>

<Button>

Usage

Add the <Button> component near the top of your application's tree.

import { Button } from 'woowacourse-todari-components';

const App = () => {
  return (
    <Button
      text="button"
      onClick={() => alert('clicked')}
      size="medium"
      width="full"
      buttonStyle="primary"
      primaryColor="#1C77C1"
    />
  );
};

props

<Modal>

Usage

Add the <Modal> component near the top of your application's tree.

import { Modal } from 'woowacourse-todari-components';

const App = () => {
  const [modalOpened, setModalOpened] = useState(false);

  const handleModalOpen = () => {
    setModalOpened(true);
  };

  const handleModalClose = () => {
    setModalOpened(false);
  };

  return (
    <>
      <Button
        text="open modal"
        onClick={handleModalOpen}
        size="large"
        width="full"
        buttonStyle="primary"
        primaryColor="#1C77C1"
      />
      <Modal
        isOpened={modalOpened}
        onClose={handleModalClose}
        title="Todal Modal"
        description="This is for woowacourse mission"
        modalPosition="bottom"
        primaryButton={{
          text: 'DO SOMETHING!',
          onClick: () => {},
          size: 'medium',
          width: 'full',
        }}
        secondaryButton={{
          text: 'Cancel',
          onClick: handleModalClose,
          size: 'medium',
          width: 'fit',
        }}
        buttonPosition="row"
        showCloseButton={false}
      >
        <div
          style={{
            backgroundColor: '#dddddd',
            padding: '8px',
            height: '50vh',
          }}
        >
          Children Area
        </div>
      </Modal>
    </>
  );
};

props

<AlertModal>

Usage

Add the <AlertModal> component near the top of your application's tree.

import { AlertModal } from 'woowacourse-todari-components';

const App = () => {
  const [modalOpened, setModalOpened] = useState(false);

  const handleModalOpen = () => {
    setModalOpened(true);
  };

  const handleModalClose = () => {
    setModalOpened(false);
  };

  return (
    <>
      <Button
        text="open modal"
        onClick={handleModalOpen}
        size="large"
        width="full"
        buttonStyle="primary"
        primaryColor="#1C77C1"
      />
      <AlertModal
        isOpened={modalOpened}
        onClose={handleModalClose}
        title="Todal Modal"
        description="This is for woowacourse mission"
        showCloseButton={false}
      />
    </>
  );
};

props

<ConfirmModal>

Usage

Add the <ConfirmModal> component near the top of your application's tree.

import { ConfirmModal } from 'woowacourse-todari-components';

const App = () => {
  const [modalOpened, setModalOpened] = useState(false);

  const handleModalOpen = () => {
    setModalOpened(true);
  };

  const handleModalClose = () => {
    setModalOpened(false);
  };

  return (
    <>
      <Button
        text="open modal"
        onClick={handleModalOpen}
        size="large"
        width="full"
        buttonStyle="primary"
        primaryColor="#1C77C1"
      />
      <ConfirmModal
        isOpened={modalOpened}
        onClose={handleModalClose}
        onConfirm={() => alert('confirmed!')}
        title="Todal Modal"
        description="This is for woowacourse mission"
        showCloseButton={false}
      />
    </>
  );
};

props

<PromptModal>

Usage

Add the <PromptModal> component near the top of your application's tree.

import { PromptModal } from 'woowacourse-todari-components';

const App = () => {
  const [modalOpened, setModalOpened] = useState(false);

  const handleModalOpen = () => {
    setModalOpened(true);
  };

  const handleModalClose = () => {
    setModalOpened(false);
  };

  return (
    <>
      <Button
        text="open modal"
        onClick={handleModalOpen}
        size="large"
        width="full"
        buttonStyle="primary"
        primaryColor="#1C77C1"
      />
      <PromptModal
        isOpened={modalOpened}
        onClose={handleModalClose}
        onConfirm={(value) => alert(`your email is '${value}'`)}
        title="Email"
        description="write your email"
        showCloseButton={false}
        validateOnChange={(value) => {
          if (/^[a-zA-Z0-9@.]+$/.test(value)) {
            return { isValid: true, errorMessage: '' };
          }

          return { isValid: false, errorMessage: 'invalid input' };
        }}
        validateOnBlur={(value) => {
          if (/^[\w-\.]+@([\w-]+\.)+[\w-]{2,4}$/.test(value)) {
            return { isValid: true, errorMessage: '' };
          }

          return { isValid: false, errorMessage: 'invalid email' };
        }}
      />
    </>
  );
};

props