@sunggang/ui-lib 0.0.3 → 0.0.5

package/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../.eslintrc.json"],
+  "ignorePatterns": ["!**/*", "storybook-static"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

package/.storybook/main.js

@@ -0,0 +1,14 @@
+const config = {
+  stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: ['@storybook/addon-essentials'],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+};
+
+export default config;
+
+// To customize your webpack configuration you can use the webpackFinal field.
+// Check https://storybook.js.org/docs/react/builders/webpack#extending-storybooks-webpack-config
+// and https://nx.dev/recipes/storybook/custom-builder-configs

package/.storybook/preview.js

@@ -0,0 +1 @@
+import './tailwind-imports.css';

package/.storybook/tailwind-imports.css

@@ -0,0 +1,81 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 215 20.2% 65.1%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
+
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+
+    --accent: 216 34% 17%;
+    --accent-foreground: 210 40% 98%;
+
+    --popover: 224 71% 4%;
+    --popover-foreground: 215 20.2% 65.1%;
+
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
+
+    --card: 224 71% 4%;
+    --card-foreground: 213 31% 91%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
+
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 210 40% 98%;
+
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 216 34% 17%;
+
+    --radius: 0.5rem;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings: 'rlig' 1, 'calt' 1;
+  }
+}

package/components.json

@@ -0,0 +1,15 @@
+{
+  "$schema": "https://ui.shadcn.com/schema.json",
+  "style": "new-york",
+  "rsc": false,
+  "tailwind": {
+    "config": "apps/**/tailwind.config.js",
+    "css": "apps/**/app/global.css",
+    "baseColor": "stone",
+    "cssVariables": true
+  },
+  "aliases": {
+    "components": "@sunggang/uiLibrary/components",
+    "utils": "@sunggang/uiLibrary/lib/utils"
+  }
+}

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "@sunggang/ui-lib",
-  "version": "0.0.3",
-  "module": "./index.esm.js",
-  "type": "module",
-  "main": "./index.esm.js"
+  "version": "0.0.5",
+  "dependencies": {
+    "@radix-ui/react-switch": "^1.0.3",
+    "class-variance-authority": "^0.7.0",
+    "clsx": "^2.1.0",
+    "tailwind-merge": "^2.2.2",
+    "tailwindcss-animate": "^1.0.7"
+  }
 }

package/postcss.config.js

@@ -0,0 +1,10 @@
+const { join } = require('path');
+
+module.exports = {
+  plugins: {
+    tailwindcss: {
+      config: join(__dirname, 'tailwind.config.js'),
+    },
+    autoprefixer: {},
+  },
+};

package/project.json

@@ -0,0 +1,31 @@
+{
+  "name": "uiLibrary",
+  "$schema": "../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "uiLibrary/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "build": {
+      "executor": "@nx/rollup:rollup",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "outputPath": "dist/uiLibrary",
+        "styles": ["apps/ui-lib/styles.css"],
+        "postcssConfig": "apps/ui-lib/postcss.config.js",
+        "tsConfig": "uiLibrary/tsconfig.lib.json",
+        "project": "uiLibrary/package.json",
+        "entryFile": "uiLibrary/src/index.ts",
+        "external": ["react", "react-dom", "react/jsx-runtime"],
+        "rollupConfig": "@nx/react/plugins/bundle-rollup",
+        "compiler": "swc",
+        "assets": [
+          {
+            "glob": "uiLibrary/README.md",
+            "input": ".",
+            "output": "."
+          }
+        ]
+      }
+    }
+  }
+}

package/src/components/ui/switch.tsx

@@ -0,0 +1,27 @@
+import * as React from "react"
+import * as SwitchPrimitives from "@radix-ui/react-switch"
+
+import { cn } from "@sunggang/uiLibrary/lib/utils"
+
+const Switch = React.forwardRef<
+  React.ElementRef<typeof SwitchPrimitives.Root>,
+  React.ComponentPropsWithoutRef<typeof SwitchPrimitives.Root>
+>(({ className, ...props }, ref) => (
+  <SwitchPrimitives.Root
+    className={cn(
+      "peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input",
+      className
+    )}
+    {...props}
+    ref={ref}
+  >
+    <SwitchPrimitives.Thumb
+      className={cn(
+        "pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+      )}
+    />
+  </SwitchPrimitives.Root>
+))
+Switch.displayName = SwitchPrimitives.Root.displayName
+
+export { Switch }

package/src/index.ts

@@ -0,0 +1,7 @@
+// Use this file to export React client components (e.g. those with 'use client' directive) or other non-server utilities
+
+export * from './lib/uiLibrary';
+export * from './lib/Spin';
+export * from './lib/DropImage';
+export * from './lib/UploadImage/CustomUpload';
+export * from './components/ui/switch';

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

@@ -0,0 +1,42 @@
+import type { Meta, StoryFn } from '@storybook/react';
+import { DropImage } from './index';
+
+interface ImageItem {
+  map?: any;
+  length?: ImageItem | undefined;
+  url: string;
+  book_items_category_id: string | null;
+}
+
+interface DropImageProps {
+  preview: boolean;
+  imageUrls?: ImageItem[];
+  setFiles: React.Dispatch<React.SetStateAction<File[]>>;
+}
+
+export default {
+  component: DropImage,
+  title: 'DropImage',
+} as Meta;
+
+const demoImage: ImageItem[] = [
+  {
+    url: 'https://gobobook.s3.ap-northeast-1.amazonaws.com/regions/DEV/region1.png',
+    book_items_category_id: null,
+  },
+  {
+    url: 'https://gobobook.s3.ap-northeast-1.amazonaws.com/regions/DEV/region2.png',
+    book_items_category_id: null,
+  },
+];
+
+const Template: StoryFn<DropImageProps> = (args) => {
+  return <DropImage {...args} />;
+};
+
+export const Base = Template.bind({});
+Base.args = {
+  preview: true,
+  setFiles: () => ({}),
+  imageUrls: demoImage,
+};

package/src/lib/DropImage/index.tsx

@@ -0,0 +1,110 @@
+import React, { useState } from 'react';
+import { useDropzone } from 'react-dropzone';
+import { v4 as uuidv4 } from 'uuid';
+import { Icon } from '@iconify/react';
+
+interface ImageItem {
+  map?: any;
+  length?: ImageItem | undefined;
+  url: string;
+  book_items_category_id: string | null;
+}
+
+interface DropImageProps {
+  preview?: boolean;
+  imageUrls?: ImageItem[];
+  setFiles: React.Dispatch<React.SetStateAction<File[]>>;
+}
+
+export const DropImage: React.FC<DropImageProps> = ({
+  preview = true,
+  setFiles,
+  imageUrls,
+}) => {
+  const [previewFiles, setPreviewFiles] = useState<File[]>([]);
+
+  const {
+    getRootProps,
+    getInputProps,
+    isDragActive,
+    isDragAccept,
+    isDragReject,
+  } = useDropzone({
+    accept: { 'image/png': ['.png'], 'image/jpeg': ['.jpg', '.jpeg'] },
+    maxFiles: 10,
+    maxSize: 5000000,
+    onDrop: (dropFiles) => {
+      const newFiles: File[] = [];
+
+      setFiles(dropFiles);
+
+      dropFiles.forEach((dropFile) => {
+        Object.assign(dropFile, {
+          preview: URL.createObjectURL(dropFile),
+          uuid: uuidv4(),
+        });
+        newFiles.push(dropFile);
+
+        setPreviewFiles(newFiles);
+      });
+    },
+  });
+
+  return (
+    <section className="w-full">
+      <div {...getRootProps({ className: 'dropzone' })}>
+        <input {...getInputProps()} />
+        <div className="flex justify-between">
+          <div className="w-full bg-gray-light rounded-lg">
+            <div className="border-2 border-dashed border-gray-400 rounded-lg bg-gray-100">
+              <div className="flex justify-center py-8">
+                <Icon
+                  icon="material-symbols:upload"
+                  width="2.5rem"
+                  height="2.5rem"
+                />
+              </div>
+
+              <div className="flex items-center flex-col justify-center">
+                <p className="font-normal text-sm text-gray-400 pb-4">
+                  圖片僅支援 png、jpg、jpeg
+                </p>
+
+                <h5 className="mb-2 text-xl font-bold tracking-tight text-gray-700 pb-4">
+                  拖曳圖片至此
+                </h5>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      {preview && (
+        <div className="flex pt-2 gap-2">
+          {previewFiles?.length
+            ? previewFiles.length > 0
+              ? previewFiles.map((item: any) => (
+                  <div key={item?.uuid}>
+                    <img
+                      className="w-24 h-24 object-cover"
+                      src={item?.preview}
+                      alt=""
+                    />
+                  </div>
+                ))
+              : null
+            : imageUrls && imageUrls.length
+            ? imageUrls.map((item) => (
+                <div key={item?.url}>
+                  <img
+                    className="w-24 h-24 object-cover"
+                    src={item?.url}
+                    alt=""
+                  />
+                </div>
+              ))
+            : null}
+        </div>
+      )}
+    </section>
+  );
+};

package/src/lib/Modal/BaseModal.jsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Icon } from '@iconify/react';
+
+const BaseModal = ({
+  isOpen = false,
+  content,
+  height,
+  className,
+  onClose,
+  showCloseIcon = false,
+  fixCloseBtn = false,
+}) =>
+  isOpen && (
+    <div className="fixed top-0 left-0 h-full z-[1000] p-4 duration-300 transition-opacity bg-[#000000b3] w-full">
+      <div className="w-full h-full flex justify-center items-center relative">
+        {showCloseIcon && (
+          <div className="text-right p-2 absolute right-0 top-0">
+            <Icon
+              className="ml-auto cursor-pointer text-white"
+              icon="ion:close"
+              width="24"
+              height="24"
+              onClick={onClose}
+            />
+          </div>
+        )}
+        <div
+          className={[
+            'bg-white rounded-xl overflow-y-auto m-auto',
+            fixCloseBtn ? '' : 'max-w-[932px] max-h-[90vh]',
+            height,
+            className,
+          ].join(' ')}
+        >
+          {content}
+        </div>
+      </div>
+    </div>
+  );
+
+BaseModal.propTypes = {
+  isOpen: PropTypes.bool,
+  content: PropTypes.element,
+  height: PropTypes.string,
+  className: PropTypes.string,
+  onClose: PropTypes.func,
+  showCloseIcon: PropTypes.bool,
+  fixCloseBtn: PropTypes.bool,
+};
+
+export default BaseModal;

package/src/lib/Modal/ErrorContent.tsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import { Icon } from '@iconify/react';
+import ModalContent from './ModalContent';
+
+interface ErrorContentProps {
+  setModal: any;
+  errmsg: React.ReactNode | string;
+}
+
+const ErrorContent: React.FC<ErrorContentProps> = ({ setModal, errmsg }) => (
+  <ModalContent setModal={setModal} onClick={setModal} notice>
+    <div className="w-full max-w-xl">
+      <div className="flex justify-center items-center mb-6">
+        <Icon icon="fluent-mdl2:status-error-full" color="red" height={60} />
+      </div>
+      <div className="text-center text-lg text-gray-500">{errmsg}</div>
+    </div>
+  </ModalContent>
+);
+
+export default ErrorContent;

package/src/lib/Modal/FullScreenModal.jsx

@@ -0,0 +1,39 @@
+import { useEffect } from 'react';
+import PropTypes from 'prop-types';
+
+const FullScreenModal = ({ overHidden, isOpen, children }) => {
+  useEffect(() => {
+    if (overHidden) return;
+    // 在 Modal 打開時，禁止滾動
+    if (isOpen) {
+      document.body.style.overflow = 'hidden';
+    } else {
+      // 在 Modal 關閉時，啟用滾動
+      document.body.style.overflow = 'visible';
+    }
+
+    // 在組件卸載時清除樣式
+    // eslint-disable-next-line consistent-return
+    return () => {
+      document.body.style.overflow = 'visible';
+    };
+  }, [isOpen]);
+
+  return (
+    <div
+      className={`fixed top-0 left-0 w-full h-full overflow-hidden flex items-center justify-center z-[9999] bg-black bg-opacity-10 ${
+        isOpen ? 'block' : 'hidden'
+      }`}
+    >
+      <div className="modal-content bg-white p-[30px] rounded-lg relative">{children}</div>
+    </div>
+  );
+};
+
+FullScreenModal.propTypes = {
+  isOpen: PropTypes.bool.isRequired,
+  children: PropTypes.node.isRequired,
+  overHidden: PropTypes.bool,
+};
+
+export default FullScreenModal;

package/src/lib/Modal/Modal.tsx

@@ -0,0 +1,36 @@
+import React, { useEffect, KeyboardEvent } from 'react';
+
+interface ModalProps {
+  modal: React.ReactElement;
+  unsetModal?: () => void;
+}
+
+const Modal: React.FC<ModalProps> = ({ modal, unsetModal = () => {} }) => {
+  const handleKeyUp = (e: any) => {
+    if (
+      e.key === 'Escape' &&
+      !['INPUT', 'SELECT'].includes(
+        (document.activeElement as HTMLElement)?.tagName
+      )
+    ) {
+      unsetModal();
+    }
+  };
+
+  useEffect(() => {
+    document.addEventListener('keyup', handleKeyUp);
+    return () => document.removeEventListener('keyup', handleKeyUp);
+  }, [unsetModal]);
+
+  return (
+    <div className="fixed top-0 left-0 h-screen z-[2000] transition-opacity duration-300 transition-opacity bg-[#000000b3] w-full">
+      <div className="w-full h-full flex justify-center items-center p-6">
+        <div className="bg-white rounded overflow-y-auto w-full m-auto max-w-[455px] rounded-xl">
+          {modal}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Modal;

package/src/lib/Modal/ModalContent.tsx

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

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