cpk-ui 0.0.1

package/README.md

@@ -0,0 +1,27 @@
+# CPK-UI
+
+React Native UI components for [Expo](https://expo.dev).
+
+[![Npm Version](http://img.shields.io/npm/v/CPK-UI.svg?style=flat-square)](https://npmjs.org/package/CPK-UI)
+[![Downloads](http://img.shields.io/npm/dm/CPK-UI.svg?style=flat-square)](https://npmjs.org/package/CPK-UI)
+[![codecov](https://codecov.io/gh/crossplatformkorea/cpk-ui/graph/badge.svg?token=LWZI4U369L)](https://codecov.io/gh/crossplatformkorea/cpk-ui)
+[![CI](https://github.com/crossplatformkorea/CPK-UI/actions/workflows/ci.yml/badge.svg)](https://github.com/crossplatformkorea/CPK-UI/actions/workflows/ci.yml)
+[![gh-pages](https://github.com/crossplatformkorea/CPK-UI/actions/workflows/gh-pages.yml/badge.svg)](https://crossplatformkorea.github.io/CPK-UI)
+[![Publish](https://github.com/crossplatformkorea/CPK-UI/actions/workflows/publish.yml/badge.svg)](https://github.com/crossplatformkorea/CPK-UI/actions/workflows/publish.yml)
+[![Sponsor](https://opencollective.com/crossplatformkorea/tiers/badge.svg?style=shield)](https://opencollective.com/crossplatformkorea/tiers/badge.svg)
+
+<img src="https://private-user-images.githubusercontent.com/27461460/398448953-c31ac1c2-cc0e-4f13-a542-c35045c266cd.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MzUwNTk1ODcsIm5iZiI6MTczNTA1OTI4NywicGF0aCI6Ii8yNzQ2MTQ2MC8zOTg0NDg5NTMtYzMxYWMxYzItY2MwZS00ZjEzLWE1NDItYzM1MDQ1YzI2NmNkLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDEyMjQlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQxMjI0VDE2NTQ0N1omWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTcxN2ExN2YwZTEzZWEzZmVmZmQ4NDQ2OGJhN2E5ODIyZWI4MjJiM2RhNzI3YTRmZDYzNWZjODU5ZmJiZWJhY2MmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0In0.QUUg_5gLMfBXDxQybO9ZA4zTS8no_0ZqXlFXEvuUhmk" width="320"/>
+
+## Documentation
+
+Check out [ui.crossplatformkorea.com](https://ui.crossplatformkorea.com)
+
+> Not all ui components are written in documents. Currently working :construction_worker:. Please see the [Demo](https://github.com/ui.crossplatformkorea/CPK-UI#demo) to see all components.
+
+## Demo
+
+You can see live example at [https://crossplatformkorea.github.io/CPK-UI](https://crossplatformkorea.github.io/CPK-UI).
+
+To run the storybook in your local environments. Follow [Contributing Guide](./Contributing).
+
+> `Documentation` is not identical to `Demo`. `Demo` is just a playground whereas `documentation` is for the customers. Documentations are missing many features yet.

package/components/modals/AlertDialog/AlertDialog.js

@@ -0,0 +1,80 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { cloneElement, forwardRef, useImperativeHandle, useState, } from 'react';
+import { Modal, Platform, StyleSheet, TouchableWithoutFeedback, } from 'react-native';
+import styled, { css } from '@emotion/native';
+import { useTheme } from '../../../providers/ThemeProvider';
+import { Typography } from '../../uis/Typography/Typography';
+import { Button } from '../../uis/Button/Button';
+import { Icon } from '../../uis/Icon/Icon';
+const Container = styled.View `
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+
+  flex-direction: row;
+`;
+const AlertDialogContainer = styled.View `
+  flex: 0.87;
+  background-color: ${({ theme }) => theme.bg.basic};
+  padding: 20px 20px 28px 24px;
+  border-radius: 8px;
+`;
+const TitleRow = styled.View `
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`;
+const BodyRow = styled.View `
+  margin-top: 12px;
+  margin-bottom: 8px;
+`;
+const ActionRow = styled.View `
+  margin-top: 20px;
+  padding-right: 4px;
+  flex-direction: row;
+`;
+function AlertDialog({ style }, ref) {
+    const [options, setOptions] = useState(null);
+    const [visible, setVisible] = useState(false);
+    const { theme, themeType } = useTheme();
+    useImperativeHandle(ref, () => ({
+        open: (alertDialogOptions) => {
+            setVisible(true);
+            if (alertDialogOptions) {
+                setOptions(alertDialogOptions);
+            }
+        },
+        close: () => {
+            setVisible(false);
+            setOptions(null);
+        },
+    }));
+    const { backdropOpacity = 0.2, title, body, styles, actions, closeOnTouchOutside = true, } = options ?? {};
+    const AlertDialogContent = (_jsx(Container, { style: css `
+        background-color: ${themeType === 'light'
+            ? `rgba(0,0,0,${backdropOpacity})`
+            : `rgba(255,255,255,${backdropOpacity})`};
+      `, children: _jsxs(AlertDialogContainer, { style: StyleSheet.flatten([
+                Platform.OS !== 'web' && {
+                    shadowOffset: { width: 0, height: 4 },
+                    shadowColor: theme.text.basic,
+                },
+                styles?.container,
+            ]), children: [_jsxs(TitleRow, { style: styles?.titleContainer, children: [typeof title === 'string' ? (_jsx(Typography.Heading3, { style: styles?.title, children: title })) : (title), _jsx(Button, { onPress: () => setVisible(false), borderRadius: 24, text: _jsx(Icon, { color: theme.text.basic, name: "X", size: 18 }), type: "text" })] }), _jsx(BodyRow, { style: styles?.bodyContainer, children: typeof body === 'string' ? (_jsx(Typography.Body3, { style: styles?.body, children: body })) : (body) }), actions ? (_jsx(ActionRow, { style: styles?.actionContainer, children: actions.map((action, index) => cloneElement(action, {
+                        key: `action-${index}`,
+                        style: {
+                            flex: 1,
+                            marginLeft: index !== 0 ? 12 : 0,
+                        },
+                    })) })) : null] }) }));
+    return (_jsx(Modal, { animationType: "fade", style: [
+            css `
+          flex: 1;
+          align-self: stretch;
+        `,
+            style,
+        ], transparent: true, visible: visible, children: closeOnTouchOutside ? (_jsx(TouchableWithoutFeedback, { onPress: () => setVisible(false), style: css `
+            flex: 1;
+          `, children: AlertDialogContent })) : (AlertDialogContent) }));
+}
+export default forwardRef(AlertDialog);

package/components/modals/AlertDialog/AlertDialog.stories.tsx

@@ -0,0 +1,80 @@
+import type {ComponentProps} from 'react';
+import styled, {css} from '@emotion/native';
+import type {Meta, StoryObj} from '@storybook/react';
+
+import {withThemeProvider} from '../../../../.storybook/decorators';
+import {useCPK} from '../../../providers';
+import {Typography} from '../../uis/Typography/Typography';
+import {Button} from '../../uis/Button/Button';
+import AlertDialog from './AlertDialog';
+
+const Container = styled.SafeAreaView`
+  background-color: ${({theme}) => theme.bg.basic};
+`;
+
+function AlertDialogBasicStory(): JSX.Element {
+  const {alertDialog} = useCPK();
+
+  return (
+    <Container
+      style={css`
+        flex-direction: column;
+        padding: 48px 24px;
+        align-self: stretch;
+        justify-content: center;
+        align-items: center;
+      `}
+    >
+      <Typography.Title>AlertDialog</Typography.Title>
+      <Button
+        color="primary"
+        onPress={() =>
+          alertDialog.open({
+            title: 'Hello there!',
+            body: 'This is an alert dialog.',
+          })
+        }
+        style={{marginTop: 60, width: 200}}
+        text="Dialog"
+      />
+      <Button
+        color="primary"
+        onPress={() =>
+          alertDialog.open({
+            title: 'Hello there!',
+            body: 'This is an alert dialog.',
+            actions: [
+              <Button
+                color="light"
+                key="button-cancel"
+                onPress={() => alertDialog.close()}
+                text="Cancel"
+              />,
+              <Button
+                key="button-ok"
+                onPress={() => alertDialog.close()}
+                text="OK"
+              />,
+            ],
+          })
+        }
+        style={{marginTop: 20, width: 200}}
+        text="With actions"
+      />
+    </Container>
+  );
+}
+
+const meta = {
+  title: 'AlertDialog',
+  component: AlertDialogBasicStory,
+  decorators: [withThemeProvider],
+} satisfies Meta<typeof AlertDialog>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {},
+};

package/components/modals/AlertDialog/AlertDialog.tsx

@@ -0,0 +1,194 @@
+import React, {
+  cloneElement,
+  forwardRef,
+  useImperativeHandle,
+  useState,
+} from 'react';
+import type {StyleProp, TextStyle, ViewStyle} from 'react-native';
+import {
+  Modal,
+  Platform,
+  StyleSheet,
+  TouchableWithoutFeedback,
+} from 'react-native';
+import styled, {css} from '@emotion/native';
+import {useTheme} from '../../../providers/ThemeProvider';
+import {Typography} from '../../uis/Typography/Typography';
+import {Button} from '../../uis/Button/Button';
+import {Icon} from '../../uis/Icon/Icon';
+
+const Container = styled.View`
+  flex: 1;
+  justify-content: center;
+  align-items: center;
+
+  flex-direction: row;
+`;
+
+const AlertDialogContainer = styled.View`
+  flex: 0.87;
+  background-color: ${({theme}) => theme.bg.basic};
+  padding: 20px 20px 28px 24px;
+  border-radius: 8px;
+`;
+
+const TitleRow = styled.View`
+  flex-direction: row;
+  justify-content: space-between;
+  align-items: center;
+`;
+
+const BodyRow = styled.View`
+  margin-top: 12px;
+  margin-bottom: 8px;
+`;
+
+const ActionRow = styled.View`
+  margin-top: 20px;
+  padding-right: 4px;
+  flex-direction: row;
+`;
+
+export type AlertDialogProps = {
+  style?: StyleProp<ViewStyle>;
+};
+
+export type AlertDialogStyles = {
+  container?: StyleProp<ViewStyle>;
+  titleContainer?: StyleProp<ViewStyle>;
+  title?: StyleProp<TextStyle>;
+  bodyContainer?: StyleProp<ViewStyle>;
+  body?: StyleProp<TextStyle>;
+  actionContainer?: StyleProp<ViewStyle>;
+};
+
+export type AlertDialogOptions = {
+  styles?: AlertDialogStyles;
+  title?: string | JSX.Element;
+  body?: string | JSX.Element;
+  backdropOpacity?: number;
+  closeOnTouchOutside?: boolean;
+  actions?: JSX.Element[];
+};
+
+export type AlertDialogContext = {
+  open(alertDialogOptions?: AlertDialogOptions): void;
+  close(): void;
+};
+
+function AlertDialog(
+  {style}: AlertDialogProps,
+  ref: React.Ref<AlertDialogContext>,
+): JSX.Element {
+  const [options, setOptions] = useState<AlertDialogOptions | null>(null);
+  const [visible, setVisible] = useState(false);
+  const {theme, themeType} = useTheme();
+
+  useImperativeHandle(ref, () => ({
+    open: (alertDialogOptions) => {
+      setVisible(true);
+      if (alertDialogOptions) {
+        setOptions(alertDialogOptions);
+      }
+    },
+    close: () => {
+      setVisible(false);
+      setOptions(null);
+    },
+  }));
+
+  const {
+    backdropOpacity = 0.2,
+    title,
+    body,
+    styles,
+    actions,
+    closeOnTouchOutside = true,
+  } = options ?? {};
+
+  const AlertDialogContent = (
+    <Container
+      style={css`
+        background-color: ${themeType === 'light'
+          ? `rgba(0,0,0,${backdropOpacity})`
+          : `rgba(255,255,255,${backdropOpacity})`};
+      `}
+    >
+      <AlertDialogContainer
+        style={StyleSheet.flatten([
+          Platform.OS !== 'web' && {
+            shadowOffset: {width: 0, height: 4},
+            shadowColor: theme.text.basic,
+          },
+          styles?.container,
+        ])}
+      >
+        <TitleRow style={styles?.titleContainer}>
+          {typeof title === 'string' ? (
+            <Typography.Heading3 style={styles?.title}>
+              {title}
+            </Typography.Heading3>
+          ) : (
+            title
+          )}
+          <Button
+            onPress={() => setVisible(false)}
+            borderRadius={24}
+            text={<Icon color={theme.text.basic} name="X" size={18} />}
+            type="text"
+          />
+        </TitleRow>
+        <BodyRow style={styles?.bodyContainer}>
+          {typeof body === 'string' ? (
+            <Typography.Body3 style={styles?.body}>{body}</Typography.Body3>
+          ) : (
+            body
+          )}
+        </BodyRow>
+        {actions ? (
+          <ActionRow style={styles?.actionContainer}>
+            {actions.map((action, index) =>
+              cloneElement(action, {
+                key: `action-${index}`,
+                style: {
+                  flex: 1,
+                  marginLeft: index !== 0 ? 12 : 0,
+                },
+              }),
+            )}
+          </ActionRow>
+        ) : null}
+      </AlertDialogContainer>
+    </Container>
+  );
+
+  return (
+    <Modal
+      animationType="fade"
+      style={[
+        css`
+          flex: 1;
+          align-self: stretch;
+        `,
+        style,
+      ]}
+      transparent={true}
+      visible={visible}
+    >
+      {closeOnTouchOutside ? (
+        <TouchableWithoutFeedback
+          onPress={() => setVisible(false)}
+          style={css`
+            flex: 1;
+          `}
+        >
+          {AlertDialogContent}
+        </TouchableWithoutFeedback>
+      ) : (
+        AlertDialogContent
+      )}
+    </Modal>
+  );
+}
+
+export default forwardRef<AlertDialogContext, AlertDialogProps>(AlertDialog);

package/components/modals/Snackbar/Snackbar.js

@@ -0,0 +1,94 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { forwardRef, useImperativeHandle, useState } from 'react';
+import { Modal, Platform, StyleSheet } from 'react-native';
+import styled, { css } from '@emotion/native';
+import { SnackbarTimer } from './const';
+import { Button } from '../../uis/Button/Button';
+import { useTheme } from '../../../providers/ThemeProvider';
+import { Icon } from '../../uis/Icon/Icon';
+const Container = styled.View `
+  flex: 1;
+  align-self: stretch;
+
+  flex-direction: row;
+  justify-content: center;
+`;
+const SnackbarContainer = styled.SafeAreaView `
+  background-color: ${({ theme, color }) => theme.button[color].bg};
+  border-radius: 8px;
+  margin-bottom: 52px;
+  margin-left: 12px;
+  margin-right: 12px;
+  align-self: flex-end;
+
+  flex-direction: row;
+  align-items: center;
+`;
+const ActionContainer = styled.View `
+  margin-right: 4px;
+`;
+const SnackbarText = styled.Text `
+  font-family: Pretendard;
+  color: ${({ theme, color }) => theme.button[color].text};
+  flex: 1;
+  padding: 12px;
+`;
+let timer = null;
+function clearTimer() {
+    if (timer) {
+        clearTimeout(timer);
+        timer = null;
+    }
+}
+function Snackbar({ style }, ref) {
+    const [options, setOptions] = useState(null);
+    const [visible, setVisible] = useState(false);
+    const { theme } = useTheme();
+    useImperativeHandle(ref, () => ({
+        open: (snackbarOptions) => {
+            clearTimer();
+            setVisible(true);
+            if (snackbarOptions) {
+                setOptions(snackbarOptions);
+            }
+            timer = setTimeout(() => {
+                setVisible(false);
+                clearTimer();
+            }, snackbarOptions?.timer ?? SnackbarTimer.SHORT);
+        },
+        close: () => {
+            setVisible(false);
+            setOptions(null);
+        },
+    }));
+    const { text, styles, actionText, color = 'primary' } = options ?? {};
+    const SnackbarContent = (_jsx(Container, { children: _jsxs(SnackbarContainer, { color: color, style: StyleSheet.flatten([
+                Platform.OS !== 'web' && {
+                    shadowOffset: { width: 0, height: 4 },
+                    shadowColor: theme.text.basic,
+                },
+                styles?.container,
+            ]), children: [_jsx(SnackbarText, { color: color, style: StyleSheet.flatten([
+                        css `
+              font-family: 'Pretendard';
+              color: ${theme.button[color].text};
+            `,
+                        styles?.text,
+                    ]), children: text }), _jsx(ActionContainer, { style: styles?.actionContainer, children: actionText ? (_jsx(Button, { onPress: () => setVisible(false), styles: {
+                            text: StyleSheet.flatten([
+                                css `
+                    font-family: 'Pretendard';
+                    color: ${theme.button[color].text};
+                  `,
+                                styles?.actionText,
+                            ]),
+                        }, text: actionText, type: "text" })) : (_jsx(Button, { onPress: () => setVisible(false), text: _jsx(Icon, { color: theme.button[color].text, name: "X" }), type: "text" })) })] }) }));
+    return (_jsx(Modal, { animationType: "fade", style: [
+            css `
+          flex: 1;
+          align-self: stretch;
+        `,
+            style,
+        ], transparent: true, visible: visible, children: SnackbarContent }));
+}
+export default forwardRef(Snackbar);

package/components/modals/Snackbar/Snackbar.stories.tsx

@@ -0,0 +1,98 @@
+import type {ComponentProps} from 'react';
+import styled, {css} from '@emotion/native';
+import type {Meta, StoryObj} from '@storybook/react';
+import {useCPK} from '../../../providers';
+import {Typography} from '../../uis/Typography/Typography';
+import {Button} from '../../uis/Button/Button';
+import {withThemeProvider} from '../../../../.storybook/decorators';
+import Snackbar from './Snackbar';
+
+const Container = styled.SafeAreaView`
+  background-color: ${({theme}) => theme.bg.basic};
+`;
+
+function SnackbarBasicStory(): JSX.Element {
+  const {snackbar} = useCPK();
+
+  return (
+    <Container
+      style={css`
+        flex-direction: column;
+        padding: 48px 24px;
+        align-self: stretch;
+        justify-content: center;
+        align-items: center;
+      `}
+    >
+      <Typography.Title>Snackbar</Typography.Title>
+      <Button
+        color="primary"
+        onPress={() =>
+          snackbar.open({
+            text: 'Hello there!',
+          })
+        }
+        style={{marginTop: 60, width: 200}}
+        text="Snackbar"
+      />
+      <Button
+        color="primary"
+        onPress={() =>
+          snackbar.open({
+            text: 'Hello there!',
+            actionText: 'Cancel',
+          })
+        }
+        style={{marginTop: 20, width: 200}}
+        text="With action"
+      />
+      <Button
+        color="info"
+        onPress={() =>
+          snackbar.open({
+            text: 'Hello there!',
+            color: 'info',
+          })
+        }
+        style={{marginTop: 20, width: 200}}
+        text="Color = info"
+      />
+      <Button
+        color="danger"
+        onPress={() =>
+          snackbar.open({
+            text: 'Hello there!',
+            color: 'danger',
+          })
+        }
+        style={{marginTop: 20, width: 200}}
+        text="Color = danger"
+      />
+      <Button
+        color="light"
+        onPress={() =>
+          snackbar.open({
+            text: 'Hello there!',
+            color: 'light',
+          })
+        }
+        style={{marginTop: 20, width: 200}}
+        text="Color = light"
+      />
+    </Container>
+  );
+}
+
+const meta = {
+  title: 'Snackbar',
+  component: SnackbarBasicStory,
+  decorators: [withThemeProvider],
+} satisfies Meta<typeof Snackbar>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Basic: Story = {
+  args: {},
+};