@sunggang/ui-lib 0.0.5 → 0.0.7

package/src/lib/Modal/ModalContent.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-
-interface ModalContentProps {
-  title?: string;
-  setModal?: any;
-  children: React.ReactNode;
-  onClick?: any;
-  notice?: boolean;
-}
-
-const ModalContent: React.FC<ModalContentProps> = ({
-  title,
-  setModal,
-  children,
-  onClick,
-  notice = false,
-}) => (
-  <form>
-    {title && (
-      <div className="text-2xl text-gray-700 font-medium border-solid border-b border-gray-300 mb-4 p-4">
-        {title}
-      </div>
-    )}
-
-    {children && <div className="py-4 px-8">{children}</div>}
-
-    <div className="flex items-center text-base p-4 px-8 justify-around">
-      {notice ? (
-        <button
-          type="button"
-          className="w-24 h-10 px-2 text-white bg-gray-600  rounded"
-          onClick={setModal}
-        >
-          確定
-        </button>
-      ) : (
-        <>
-          <button
-            type="button"
-            className="w-24 h-10 px-2 text-white bg-gray-600  rounded"
-            onClick={setModal}
-          >
-            取消
-          </button>
-          {onClick && (
-            <button
-              type="button"
-              className="w-24 h-10 mx-3 text-white bg-gray-500 rounded"
-              onClick={onClick}
-            >
-              送出
-            </button>
-          )}
-        </>
-      )}
-    </div>
-  </form>
-);
-
-export default ModalContent;

package/src/lib/Modal/NoticeModal.jsx

@@ -1,91 +0,0 @@
-import React from 'react';
-import PropTypes from 'prop-types';
-import { Icon } from '@iconify/react';
-
-const NoticeModal = ({
-  title,
-  buttonName,
-  content,
-  setModal,
-  onClick,
-  onlyCheck,
-  action,
-  cancelButtonName = '取消',
-  cancelFunc,
-}) => {
-  const statusCode = action?.statusCode;
-
-  const actionFunc = () => {
-    if (statusCode === 'book_dates') return action?.resetCalendar();
-    if (statusCode === 'book_expired') return action?.redirectBook();
-    if (statusCode === 'not_registered_2times') return action?.redirectToPay();
-    return null;
-  };
-
-  const actionName =
-    statusCode === 'book_dates' ? action?.resetCalendarName : action?.redirectCalendarName;
-
-  const onlyCheckList = ['points', 'tickets', 'promo_tickets', 'member_group'];
-
-  const onlyCheckAction = onlyCheck || onlyCheckList.includes(statusCode);
-
-  return (
-    <div className="px-8 py-9">
-      <button className="w-full flex justify-end" type="button" onClick={() => setModal()}>
-        <Icon className="text-[#000000]" icon="ic:baseline-close" width="24" height="24" />
-      </button>
-      <div className="text-[28px] text-gray-700 font-medium min-w-[16rem] pb-2">{title}</div>
-
-      <div className="text-[20px] text-[#5A5A5A] pb-8">
-        <div>{content}</div>
-      </div>
-      <div className="flex items-center text-lg text-base justify-center gap-8">
-        {onlyCheckAction ? (
-          <button
-            type="button"
-            className={['px-8 py-3 px-2 text-white bg-[#0C7489] rounded-[10px]'].join(' ')}
-            onClick={() => {
-              setModal();
-            }}
-          >
-            確認
-          </button>
-        ) : (
-          <>
-            <button
-              type="button"
-              className={[
-                'px-6 lg:px-8 py-3 rounded-[10px]',
-                'border border-solid border-[#656565] text-[#5A5A5A] bg-[#F5F5F5]',
-              ].join(' ')}
-              onClick={() => (cancelFunc ? cancelFunc() : setModal())}
-            >
-              {cancelButtonName}
-            </button>
-            <button
-              type="button"
-              className="px-6 lg:px-8 py-3 text-white bg-[#0C7489] rounded-[10px]"
-              onClick={statusCode ? actionFunc : onClick}
-            >
-              {actionName || buttonName}
-            </button>
-          </>
-        )}
-      </div>
-    </div>
-  );
-};
-
-NoticeModal.propTypes = {
-  setModal: PropTypes.func,
-  title: PropTypes.string,
-  buttonName: PropTypes.string,
-  content: PropTypes.node,
-  onClick: PropTypes.func,
-  onlyCheck: PropTypes.bool,
-  action: PropTypes.shape(),
-  cancelButtonName: PropTypes.string,
-  cancelFunc: PropTypes.func,
-};
-
-export default NoticeModal;

package/src/lib/Modal/index.jsx

@@ -1 +0,0 @@
-export { default } from './Modal';

package/src/lib/Spin/index.tsx

@@ -1,20 +0,0 @@
-export function Spin(props: {
-  show: boolean;
-  overlayBackground?: 'bg-[#00000055]' | undefined;
-}) {
-  const { show, overlayBackground = 'bg-[#00000055]' } = props;
-  return show ? (
-    <div
-      className={[
-        'fixed flex justify-center items-center w-full h-full left-0 top-0 z-[9999] overflow-hidden',
-        overlayBackground,
-      ].join(' ')}
-    >
-      <div className="top-2/4 left-2/4">
-        <div className="w-10 h-10 rounded-full border-4 border-solid border-[#ffffff33] border-t-[#dbdbdb] animate-spin" />
-      </div>
-    </div>
-  ) : null;
-}
-
-export default Spin;

package/src/lib/Switch/index.stories.tsx

@@ -1,24 +0,0 @@
-import type { Meta, StoryFn } from '@storybook/react';
-import { Switch } from '../../components/ui/switch';
-
-interface SwitchProps {
-  id?: string;
-  onCheckedChange?: () => void;
-  disabled: boolean;
-}
-
-export default {
-  component: Switch,
-  title: 'Switch',
-} as Meta;
-
-const Template: StoryFn<SwitchProps> = (args) => {
-  return <Switch {...args} />;
-};
-
-export const Base = Template.bind({});
-Base.args = {
-  id: 'ad-123',
-  onCheckedChange: () => ({}),
-  disabled: false,
-};

package/src/lib/UploadImage/BaseTemplate.tsx

@@ -1,73 +0,0 @@
-import { useState, useEffect, FC } from 'react';
-import { Icon } from '@iconify/react';
-
-interface BaseTemplateProps {
-  file?: File | null;
-  imageUrl?: string;
-}
-
-const BaseTemplate: FC<BaseTemplateProps> = ({ file, imageUrl }) => {
-  const [tempImage, setTempImage] = useState<string | null>(null);
-
-  useEffect(() => {
-    let fileReader: FileReader | null;
-    let isCancel = false;
-
-    if (file) {
-      fileReader = new FileReader();
-      fileReader.onload = (e) => {
-        const { result } = e.target as FileReader;
-        if (result && !isCancel) {
-          setTempImage(result.toString());
-        }
-      };
-      fileReader.readAsDataURL(file);
-    }
-    return () => {
-      setTempImage(null);
-      isCancel = true;
-      if (fileReader && fileReader.readyState === 1) {
-        fileReader.abort();
-      }
-    };
-  }, [file]);
-
-  return (
-    <div className="max-w-sm mx-auto bg-white rounded-lg shadow-md overflow-hidden items-center">
-      <div className="px-4 py-6 w-72 h-56">
-        {tempImage || imageUrl ? (
-          <img
-            className="w-full h-full object-contain border-dashed border-2 border-gray-400 p-6 rounded-lg"
-            src={tempImage || imageUrl}
-            alt=""
-          />
-        ) : (
-          <div
-            id="image-preview"
-            className="max-w-sm p-6 bg-gray-100 border-dashed border-2 border-gray-400 rounded-lg items-center mx-auto text-center cursor-pointer"
-          >
-            <div className="cursor-pointer">
-              <div className="flex justify-center">
-                <Icon
-                  icon="material-symbols:upload"
-                  width="2.5rem"
-                  height="2.5rem"
-                />
-              </div>
-
-              <p className="font-normal text-sm text-gray-400 py-4">
-                圖片僅支援 png、jpg、jpeg
-              </p>
-
-              <h5 className="mb-2 text-xl font-bold tracking-tight text-gray-700">
-                上傳圖片
-              </h5>
-            </div>
-          </div>
-        )}
-      </div>
-    </div>
-  );
-};
-
-export default BaseTemplate;

package/src/lib/UploadImage/CustomUpload.stories.tsx

@@ -1,52 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, StoryFn } from '@storybook/react';
-import { CustomUpload } from './CustomUpload';
-
-interface CustomUploadProps {
-  file?: File | null;
-  setFile?: any;
-  imageUrl?: string;
-}
-
-export default {
-  component: CustomUpload,
-  title: 'CustomUpload',
-} as Meta;
-
-const demoIcon =
-  'https://gobobook.s3.ap-northeast-1.amazonaws.com/regions/DEV/vaadin_golf.svg';
-
-const Template: StoryFn<CustomUploadProps> = (args) => {
-  const [file, setFile] = useState(null);
-  return <CustomUpload {...args} file={file} setFile={setFile} />;
-};
-
-const CustomerTemplate: StoryFn<CustomUploadProps> = (args) => {
-  const [file, setFile] = useState(null);
-  return (
-    <CustomUpload {...args} file={file} setFile={setFile}>
-      <div className="border border-solid border-gray-400 p-4">
-        <div>圖片僅支援 png、jpg、jpeg</div>
-        <div>點擊上傳</div>
-      </div>
-    </CustomUpload>
-  );
-};
-
-export const Base = Template.bind({});
-Base.args = {
-  file: null,
-  setFile: () => {
-    return;
-  },
-  imageUrl: demoIcon,
-};
-
-export const Customer = CustomerTemplate.bind({});
-Customer.args = {
-  file: null,
-  setFile: () => {
-    return;
-  },
-  imageUrl: '',
-};

package/src/lib/UploadImage/CustomUpload.tsx

@@ -1,95 +0,0 @@
-import React, { useState, useRef, ChangeEvent } from 'react';
-import ErrorContent from '../Modal/ErrorContent';
-import Modal from '../Modal';
-import BaseTemplate from './BaseTemplate';
-
-
-interface CustomUploadProps {
-  className?: string;
-  children?: React.ReactNode;
-  file?: File | null;
-  setFile?: any;
-  imageUrl?: string;
-}
-
-export const CustomUpload: React.FC<CustomUploadProps> = ({
-  className,
-  children,
-  file,
-  setFile,
-  imageUrl,
-}) => {
-  const imageMimeType = /image\/(png|jpg|jpeg)/i;
-  const DEFAULT_IMAGE_SIZE_LIMIT_IN_BYTES = 5120000; // 5000 KB
-
-  const [modal, setModal] = useState<React.ReactNode | null>(null);
-
-  const hiddenFileInput = useRef<HTMLInputElement | null>(null);
-
-  const handleImageClick = () => {
-    hiddenFileInput.current?.click();
-  };
-
-  const handleImageChange = (event: ChangeEvent<HTMLInputElement>) => {
-    const currentFile = event.target.files?.[0];
-
-    if (!currentFile) {
-      setFile(null);
-      return;
-    }
-
-    if (currentFile && !currentFile.type?.match(imageMimeType)) {
-      setModal(
-        <ErrorContent setModal={setModal} errmsg="圖片僅支援 png、jpg、jpeg!" />
-      );
-      return;
-    }
-
-    if (currentFile && currentFile.size > DEFAULT_IMAGE_SIZE_LIMIT_IN_BYTES) {
-      setModal(
-        <ErrorContent
-          setModal={setModal}
-          errmsg={
-            <span>
-              選擇的檔案大小：
-              {String((currentFile.size / 1024 / 1024).toFixed(3))}
-              {' MB'}
-              <br />
-              <hr />
-              上限：
-              {String(
-                (DEFAULT_IMAGE_SIZE_LIMIT_IN_BYTES / 1024 / 1024).toFixed(3)
-              )}
-              {' MB'}
-            </span>
-          }
-        />
-      );
-      return;
-    }
-
-    setFile(currentFile);
-  };
-
-  return (
-    <>
-      <button
-        className={className ? [className].join(' ') : ''}
-        type="button"
-        onClick={handleImageClick}
-      >
-        {children || <BaseTemplate file={file} imageUrl={imageUrl} />}
-        <input
-          type="file"
-          ref={hiddenFileInput}
-          accept=".png, .jpg, .jpeg"
-          onChange={handleImageChange}
-          className="hidden"
-        />
-      </button>
-      {modal && <Modal modal={modal} unsetModal={setModal} />}
-    </>
-  );
-};
-
-export default CustomUpload;

package/src/lib/hello-server.tsx

@@ -1,4 +0,0 @@
-// React server components are async so you make database or API calls.
-export async function HelloServer() {
-  return <h1>Hello Server</h1>;
-}

package/src/lib/uiLibrary.module.css

@@ -1,7 +0,0 @@
-/*
- * Replace this with your own classes
- *
- * e.g.
- * .container {
- * }
-*/

package/src/lib/uiLibrary.spec.tsx

@@ -1,10 +0,0 @@
-import { render } from '@testing-library/react';
-
-import UiLibrary from './uiLibrary';
-
-describe('UiLibrary', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<UiLibrary />);
-    expect(baseElement).toBeTruthy();
-  });
-});

package/src/lib/uiLibrary.tsx

@@ -1,14 +0,0 @@
-import styles from './uiLibrary.module.css';
-
-/* eslint-disable-next-line */
-export interface UiLibraryProps {}
-
-export function UiLibrary(props: UiLibraryProps) {
-  return (
-    <div className={styles['container']}>
-      <h1>Welcome to UiLibrary!</h1>
-    </div>
-  );
-}
-
-export default UiLibrary;

package/src/lib/utils.ts

@@ -1,6 +0,0 @@
-import { clsx, type ClassValue } from "clsx"
-import { twMerge } from "tailwind-merge"
-
-export function cn(...inputs: ClassValue[]) {
-  return twMerge(clsx(inputs))
-}

package/src/server.ts

@@ -1,2 +0,0 @@
-// Use this file to export React server components
-export * from './lib/hello-server';