@willphan1712000/frontend 1.0.3 → 1.1.0

package/README.md

@@ -33,10 +33,13 @@ You can connect to me at [Facebook](https://www.facebook.com/phanthanhnha123200/
 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 
+
+On the other frontend environment, run
+
 ```npm
 npm link @willphan1712000/frontend
 ```
@@ -45,6 +48,7 @@ npm link @willphan1712000/frontend
 > 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$5 {
+interface Props$b {
     options: Options$2;
     value: string;
     onChange: (value: string) => void;
@@ -19,9 +19,9 @@ interface Props$5 {
  * @param width - specify the width of the component
  * @returns
  */
-declare const DropdownSelect: ({ options, value, onChange, width }: Props$5) => react_jsx_runtime.JSX.Element;
+declare const DropdownSelect: ({ options, value, onChange, width }: Props$b) => react_jsx_runtime.JSX.Element;
 
-interface Props$4 {
+interface Props$a {
     value: string;
     onChange: (value: string) => void;
     min?: string;
@@ -39,13 +39,13 @@ interface Props$4 {
  * @param onChange - to set a value
  * @returns
  */
-declare const RangeSlider: ({ min, max, color, width, value, onChange }: Props$4) => 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$3 {
+interface Props$9 {
     value: string;
     onChange: (value: string) => void;
     width?: string;
@@ -59,9 +59,9 @@ interface Props$3 {
  * @options - list of options, format [{ label: React Node Syntax, value: string }]
  * @returns
  */
-declare const OptionSlider: ({ value, onChange, width, options, color }: Props$3) => react_jsx_runtime.JSX.Element;
+declare const OptionSlider: ({ value, onChange, width, options, color, }: Props$9) => react_jsx_runtime.JSX.Element;
 
-interface Props$2 {
+interface Props$8 {
     value: string;
     onChange: (value: string) => void;
     width?: string;
@@ -73,13 +73,13 @@ interface Props$2 {
  * @param width
  * @returns
  */
-declare const ColorPickerSlider: ({ value, onChange, width }: Props$2) => 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$1 {
+interface Props$7 {
     options: Options;
     value: string[];
     onChange: React.Dispatch<React.SetStateAction<string[]>>;
@@ -93,19 +93,22 @@ interface Props$1 {
  * @param width - specify the width of the component
  * @returns
  */
-declare const MultiSelect: ({ options, value, onChange, width }: Props$1) => react_jsx_runtime.JSX.Element;
+declare const MultiSelect: ({ options, value, onChange, width }: Props$7) => react_jsx_runtime.JSX.Element;
 
-interface Props {
-    buttonType: "gradient" | "solid" | "normal";
+interface Props$6 {
+    buttonType?: 'gradient' | 'solid' | 'normal';
 }
 interface Data {
-    content: string;
+    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
@@ -116,6 +119,262 @@ interface Data {
  * @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, ...props }: Props & Data & React.ComponentProps<"button">) => react_jsx_runtime.JSX.Element;
+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 { Button, 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 };