@willphan1712000/frontend 1.0.2 → 1.1.0

package/README.md

@@ -26,6 +26,29 @@ npm i @willphan1712000/frontend
 
 If you found an issue or would like to submit an improvement to this project, please submit an issue using the issues tab above. If you would like to submit a Pull Request with a fix, reference the issue you created
 
-## Happy with this project
+## Happy with this project and want to make a contribution
 
 You can connect to me at [Facebook](https://www.facebook.com/phanthanhnha123200/) [Instagram](https://www.instagram.com/phanthanhnha_0117/)
+
+You can make contributions to this project by adding new UI ideas that stand out so we can compete ones generated by AI.
+
+To test a package, run
+
+```npm
+npm link
+```
+
+On the other frontend environment, run
+
+```npm
+npm link @willphan1712000/frontend
+```
+
+> [!NOTE]
+> if you encounter the problem "3. You might have more than one copy of React in the same app?"
+> it means your application has loaded two different React instances. This breaks React Hooks, which rely on a single, shared state.
+> Run this to connect to react in your testing project
+
+```npm
+npm link <path_to_your_testing_project>/node_modules/react
+```

package/dist/index.d.mts

@@ -1,11 +1,11 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
-import { ReactNode } from 'react';
+import React$1, { ReactNode } from 'react';
 
 type Options$2 = {
     label: string;
     value: string;
 }[];
-interface Props$4 {
+interface Props$b {
     options: Options$2;
     value: string;
     onChange: (value: string) => void;
@@ -19,9 +19,9 @@ interface Props$4 {
  * @param width - specify the width of the component
  * @returns
  */
-declare const DropdownSelect: ({ options, value, onChange, width }: Props$4) => react_jsx_runtime.JSX.Element;
+declare const DropdownSelect: ({ options, value, onChange, width }: Props$b) => react_jsx_runtime.JSX.Element;
 
-interface Props$3 {
+interface Props$a {
     value: string;
     onChange: (value: string) => void;
     min?: string;
@@ -39,13 +39,13 @@ interface Props$3 {
  * @param onChange - to set a value
  * @returns
  */
-declare const RangeSlider: ({ min, max, color, width, value, onChange }: Props$3) => react_jsx_runtime.JSX.Element;
+declare const RangeSlider: ({ min, max, color, width, value, onChange, }: Props$a) => react_jsx_runtime.JSX.Element;
 
 type Options$1 = {
     label: ReactNode;
     value: string;
 }[];
-interface Props$2 {
+interface Props$9 {
     value: string;
     onChange: (value: string) => void;
     width?: string;
@@ -59,9 +59,9 @@ interface Props$2 {
  * @options - list of options, format [{ label: React Node Syntax, value: string }]
  * @returns
  */
-declare const OptionSlider: ({ value, onChange, width, options, color }: Props$2) => react_jsx_runtime.JSX.Element;
+declare const OptionSlider: ({ value, onChange, width, options, color, }: Props$9) => react_jsx_runtime.JSX.Element;
 
-interface Props$1 {
+interface Props$8 {
     value: string;
     onChange: (value: string) => void;
     width?: string;
@@ -73,13 +73,13 @@ interface Props$1 {
  * @param width
  * @returns
  */
-declare const ColorPickerSlider: ({ value, onChange, width }: Props$1) => react_jsx_runtime.JSX.Element;
+declare const ColorPickerSlider: ({ value, onChange, width }: Props$8) => react_jsx_runtime.JSX.Element;
 
 type Options = {
     label: string;
     value: string;
 }[];
-interface Props {
+interface Props$7 {
     options: Options;
     value: string[];
     onChange: React.Dispatch<React.SetStateAction<string[]>>;
@@ -88,11 +88,293 @@ interface Props {
 /**
  * MultiSelect component, allowing users to select multiple options from dropdown menu with search
  * @param options - list of options, which is an array of object [{ label: string, value: string }]
- * @param value - a chosen value
- * @param onChange - a function to set a value
+ * @param value - an array of chosen values
+ * @param onChange - a function to set an array of values
  * @param width - specify the width of the component
  * @returns
  */
-declare const MultiSelect: ({ options, value, onChange, width }: Props) => react_jsx_runtime.JSX.Element;
+declare const MultiSelect: ({ options, value, onChange, width }: Props$7) => react_jsx_runtime.JSX.Element;
+
+interface Props$6 {
+    buttonType?: 'gradient' | 'solid' | 'normal';
+}
+interface Data {
+    content?: string;
+    main?: string;
+    text?: string;
+    first?: string;
+    second?: string;
+    isLoading?: boolean;
+}
+interface Children {
+    children?: ReactNode;
+}
+/**
+ *
+ * @param buttonType type of button, default is normal button
+ * @param content string content inside the button
+ * @param main main color of the button
+ * @param text text color
+ * @param first first color when using gradient button or solid button, default is #3e8fbc
+ * @param second second color when using gradient button, default is #aa6392
+ * @returns button UI component
+ */
+declare const Button: ({ buttonType, content, main, first, second, text, isLoading, children, ...props }: Props$6 & Data & Children & React.ComponentProps<"button">) => react_jsx_runtime.JSX.Element;
+
+interface Props$5 {
+    src?: string;
+    setValue: (src?: string) => void;
+}
+/**
+ * Avatar component. Combination of
+ * - ImageEditor
+ * - Image
+ * - UploadImage
+ * - Button
+ *
+ * These components work together to provide smooth image editing process
+ *
+ * @param src source of an image which will be converted to base64 format automatically
+ * @param setValue set state function for src
+ *
+ * @example
+ * ... component declaration
+ * const [src, setValue] = useState<string|undefined>(initialImageStringUrl)
+ *
+ * return (
+ *  <Avatar src={src} setValue={setValue} />
+ * )
+ */
+declare const Avatar: ({ src, setValue }: Props$5) => react_jsx_runtime.JSX.Element;
+
+interface Props$4 {
+    value?: string;
+    setValue?: (value?: string) => void;
+    label?: string;
+    options?: {
+        focusColor: string;
+    };
+}
+/**
+ * Input component shadows input box implemented by Google
+ *
+ * @link
+ * https://accounts.google.com
+ *
+ * @param value value of input
+ * @param setValue set value function
+ * @param options options object containing focusColor property -> color when input is focused
+ *
+ * @example
+ * ... component declaration
+ * const [value, setValue] = useState<string|undefined>('')
+ *
+ * return (
+ *      <InputGoogle value={value} setValue={setValue} label="Input Google Component Label" options={{ focusColor: "yellow" }}/>
+ * )
+ */
+declare const InputGoogle: ({ value, setValue, label, options, ...props }: Props$4 & React.ComponentProps<"input">) => react_jsx_runtime.JSX.Element;
+
+interface Props$3 {
+    value?: string;
+    setValue?: (value?: string) => void;
+    label?: string;
+    options?: {
+        focusColor: string;
+    };
+}
+/**
+ * Textarea component
+ *
+ * @param value value of input
+ * @param setValue set value function
+ * @param options options object containing focusColor property -> color when input is focused
+ *
+ * @example
+ * ... component declaration
+ * const [value, setValue] = useState<string|undefined>('')
+ *
+ * return (
+ *      <TextArea value={value} setValue={setValue} label="Text Component Label" options={{ focusColor: "yellow" }}/>
+ * )
+ */
+declare const TextArea: ({ value, setValue, label, options, ...props }: Props$3 & React.ComponentProps<"textarea">) => react_jsx_runtime.JSX.Element;
+
+type FileType = 'image/*' | 'image/jpeg' | 'image/png' | 'image/gif' | 'image/webp' | 'image/svg+xml' | 'image/bmp' | 'image/tiff' | 'video/*' | 'video/mp4' | 'video/mpeg' | 'video/quicktime' | 'video/x-msvideo' | 'video/x-ms-wmv' | 'video/webm' | 'video/ogg' | 'audito/*' | 'audio/mpeg' | 'audio/wav' | 'audio/ogg' | 'audio/aac' | 'audio/flac' | 'audio/x-wav' | 'application/*' | 'application/pdf' | 'application/msword' | 'application/vnd.openxmlformats-officedocument.wordprocessingml.document' | 'application/vnd.ms-excel' | 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' | 'application/vnd.ms-powerpoint' | 'application/vnd.openxmlformats-officedocument.presentationml.presentation' | 'text/plain' | 'text/csv' | 'application/json' | 'application/zip' | 'application/octet-stream' | 'application/x-tar' | 'application/x-rar-compressed';
+interface Props$2 {
+    file?: File;
+    onChoose: (file: File) => void;
+    onCancel?: () => void;
+    acceptType?: FileType;
+}
+/**
+ * InputFile component
+ * @param file file object -> binary information
+ * @param onChoose if a file is chosen
+ * @param onCancel if a popup is closed without any chosen data
+ * @param acceptType accepted file type
+ */
+declare const InputFile: ({ file, onChoose, onCancel, acceptType, ...props }: Props$2 & React$1.ComponentProps<"input">) => react_jsx_runtime.JSX.Element;
+
+interface Props$1 {
+    setSrc?: (src?: string) => void;
+}
+/**
+ * Upload Image component
+ * - Upload image binary and convert it to base 64 format
+ * @param setSrc
+ * @returns
+ */
+declare const UploadImage: ({ setSrc, ...props }: Props$1 & React.ComponentProps<"input">) => react_jsx_runtime.JSX.Element;
+
+/**
+ * A wrap around HTML Image Element
+ * - Add default alt text
+ * - Add false draggable
+ */
+declare const Image$1: ({ ...props }: React.ComponentProps<"img">) => react_jsx_runtime.JSX.Element;
+
+interface Props {
+    src?: string;
+    setSrc?: (src?: string) => void;
+    isOpen?: boolean;
+    setOpen?: (open: boolean) => void;
+    isNew: boolean;
+}
+/**
+ * Image Editor component. This provides
+ * - Image transformation such as dragging, scaling, rotating
+ * - Color editing, contrast, ...
+ * - ...
+ *
+ * @param src source of an image to edit
+ * @param setSrc modify source state
+ * @param isOpen boolean open state of edit pannel
+ * @param setSrc modify open state
+ * @param isNew boolean - a random state that signals whether there is a new image that has been chosen. Toggle between true and false
+ *
+ * HOW IT WORKS
+ * - Use useMemo to memorize src value across renders until isNew changes. Also reset transformState to undefined, telling there is a new image that needs to be edited as new
+ * - When isOpen changes, it can either initialize a transform object on already rendered elements (that can either receive its previous state if exists or be reset as new) or set transform object to undefined.
+ * - When hitting Accept button, it uses handleCanvasToSrc function to draw current image src along with current transform state on a canvas, ready to extract a new image url from it. Then new src state value will be set and component re-renders
+ * - When hitting cancel button, it changes isOpen state
+ * - When hitting reset button, it runs reset method on transform object state
+ */
+declare const ImageEditor: ({ src, setSrc, isOpen, setOpen, isNew, }: Props) => react_jsx_runtime.JSX.Element | undefined;
+
+interface CanvasInterface {
+    /**
+     * Create a canvas
+     * @param number width of canvas
+     * @param number height of canvas
+     */
+    createCanvas(width: number, height: number): {
+        canvas: HTMLCanvasElement;
+        context: CanvasRenderingContext2D;
+    };
+    /**
+     * draw an image on canvas
+     */
+    drawImage(e: any, ctx: CanvasRenderingContext2D, x: number, y: number, scale: number, angle: number, canvas: HTMLCanvasElement, containerWidth: number, containerHeight: number): {
+        context: CanvasRenderingContext2D;
+        src: string;
+    };
+    /**
+     * Draw a color on canvas
+     */
+    drawColor(type: string, color: string, ctx: CanvasRenderingContext2D, width: number, ratio: number): [CanvasRenderingContext2D, string];
+}
+declare class Canvas implements CanvasInterface {
+    createCanvas(width: number, height: number): {
+        canvas: HTMLCanvasElement;
+        context: CanvasRenderingContext2D;
+    };
+    drawImage(e: HTMLImageElement, ctx: CanvasRenderingContext2D, x: number, y: number, scale: number, angle: number, canvas: HTMLCanvasElement, containerWidth: number, containerHeight: number): {
+        context: CanvasRenderingContext2D;
+        src: string;
+    };
+    drawColor(type: string, color: string, ctx: CanvasRenderingContext2D, width: number, ratio: number): [CanvasRenderingContext2D, string];
+}
+
+declare const Image: {
+    /**
+     * Convert file (blob) to base64 string format
+     * @param file
+     * @returns
+     */
+    FromFileToImageSrc(file?: File | Blob): Promise<string | null>;
+    /**
+     * Convert urlst
+     * @param url
+     * @returns
+     */
+    FromStringToImageSrc(url?: string): Promise<string | null>;
+    /**
+     * Check if the url is base64 format
+     * @param url
+     * @deprecated Using a weak condition and might be changed later. Use checkBase64 instead
+     */
+    checkBase64(url?: string): boolean;
+    isBase64(url?: string): boolean;
+};
+
+/**
+ * Element 1 : Image Wrapper
+ *
+ * Element 2 : Image Frame
+ *
+ * Element 3 : Image element
+ *
+ * Element 4 : Controller
+ *
+ * @example
+ * ```ts
+ * <div class="frame"> (2)
+ *      <div class="wrapper"> (1)
+ *          <img class="img__preview" /> (3)
+ *      </div>
+ * </div>
+ * ```
+ */
+declare class Transform {
+    private ele1;
+    private ele2;
+    private x;
+    private y;
+    private angle;
+    private w;
+    private h;
+    private wrapperClass;
+    private imgFrame;
+    private controllerClassName;
+    private frameClass;
+    private isRotateOffScreen;
+    private img;
+    private ratio;
+    private controllerContainer;
+    private controller;
+    constructor(ele1: HTMLElement, ele2?: HTMLElement, ele3?: string);
+    initialize(): Promise<void>;
+    reset(): void;
+    setState({ x, y, angle, w, }: {
+        x: number;
+        y: number;
+        angle: number;
+        w: number;
+    }): void;
+    private setValue;
+    exportData(): {
+        x: number;
+        y: number;
+        angle: number;
+        w: number;
+        h: number;
+    };
+    private repositionElement;
+    private resize;
+    private rotateBox;
+    private handleElementGoOffScreen;
+    private transform;
+}
 
-export { ColorPickerSlider, DropdownSelect, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, type Options$1 as SliderOptions };
+export { Avatar, Button, Canvas, ColorPickerSlider, DropdownSelect, Image$1 as Image, ImageEditor, Image as ImageUtilities, InputFile, InputGoogle, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, type Options$1 as SliderOptions, TextArea, Transform, UploadImage };