@sunggang/ui-lib 0.0.5 → 0.0.6

package/package.json

@@ -1,11 +1,14 @@
 {
   "name": "@sunggang/ui-lib",
-  "version": "0.0.5",
+  "version": "0.0.6",
   "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"
-  }
+  },
+  "module": "./index.esm.js",
+  "type": "module",
+  "main": "./index.esm.js"
 }

package/src/components/ui/switch.d.ts

@@ -0,0 +1,4 @@
+import * as React from 'react';
+import * as SwitchPrimitives from '@radix-ui/react-switch';
+export declare const Switch: React.ForwardRefExoticComponent<Omit<SwitchPrimitives.SwitchProps & React.RefAttributes<HTMLButtonElement>, "ref"> & React.RefAttributes<HTMLButtonElement>>;
+export default Switch;

package/src/{index.ts → index.d.ts}

@@ -1,5 +1,3 @@
-// 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';

package/src/lib/DropImage/index.d.ts

@@ -0,0 +1,14 @@
+import React from '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 declare const DropImage: React.FC<DropImageProps>;
+export {};

package/src/lib/Modal/ErrorContent.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ErrorContentProps {
+    setModal: any;
+    errmsg: React.ReactNode | string;
+}
+declare const ErrorContent: React.FC<ErrorContentProps>;
+export default ErrorContent;

package/src/lib/Modal/Modal.d.ts

@@ -0,0 +1,7 @@
+import React from 'react';
+interface ModalProps {
+    modal: React.ReactElement;
+    unsetModal?: () => void;
+}
+declare const Modal: React.FC<ModalProps>;
+export default Modal;

package/src/lib/Modal/ModalContent.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface ModalContentProps {
+    title?: string;
+    setModal?: any;
+    children: React.ReactNode;
+    onClick?: any;
+    notice?: boolean;
+}
+declare const ModalContent: React.FC<ModalContentProps>;
+export default ModalContent;

package/src/lib/Spin/index.d.ts

@@ -0,0 +1,5 @@
+export declare function Spin(props: {
+    show: boolean;
+    overlayBackground?: 'bg-[#00000055]' | undefined;
+}): import("react/jsx-runtime").JSX.Element | null;
+export default Spin;

package/src/lib/UploadImage/BaseTemplate.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+interface BaseTemplateProps {
+    file?: File | null;
+    imageUrl?: string;
+}
+declare const BaseTemplate: FC<BaseTemplateProps>;
+export default BaseTemplate;

package/src/lib/UploadImage/CustomUpload.d.ts

@@ -0,0 +1,10 @@
+import React from 'react';
+interface CustomUploadProps {
+    className?: string;
+    children?: React.ReactNode;
+    file?: File | null;
+    setFile?: any;
+    imageUrl?: string;
+}
+export declare const CustomUpload: React.FC<CustomUploadProps>;
+export default CustomUpload;

package/src/lib/hello-server.d.ts

@@ -0,0 +1 @@
+export declare function HelloServer(): Promise<import("react/jsx-runtime").JSX.Element>;

package/src/lib/uiLibrary.d.ts

@@ -0,0 +1,4 @@
+export interface UiLibraryProps {
+}
+export declare function UiLibrary(props: UiLibraryProps): import("react/jsx-runtime").JSX.Element;
+export default UiLibrary;

package/src/lib/utils.d.ts

@@ -0,0 +1,2 @@
+import { type ClassValue } from "clsx";
+export declare function cn(...inputs: ClassValue[]): string;

package/src/server.d.ts

@@ -0,0 +1 @@
+export * from './lib/hello-server';

package/.eslintrc.json

@@ -1,18 +0,0 @@
-{
-  "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

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

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

package/.storybook/tailwind-imports.css

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

@@ -1,15 +0,0 @@
-{
-  "$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/postcss.config.js

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

package/project.json

@@ -1,31 +0,0 @@
-{
-  "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

@@ -1,27 +0,0 @@
-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/lib/DropImage/index.stories.tsx

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

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

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

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

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

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