@sunggang/ui-lib 0.0.4 → 0.0.5

package/src/lib/Modal/index.jsx

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

package/src/lib/Spin/index.tsx

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,73 @@
+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

@@ -0,0 +1,52 @@
+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

@@ -0,0 +1,95 @@
+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

@@ -0,0 +1,4 @@
+// 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.spec.tsx

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,14 @@
+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

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

package/src/server.ts

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