@willphan1712000/frontend 1.0.1 → 1.0.3

package/README.md

@@ -26,6 +26,25 @@ 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,12 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 
-type Options$1 = {
+type Options$2 = {
     label: string;
     value: string;
 }[];
-interface Props$3 {
-    options: Options$1;
+interface Props$5 {
+    options: Options$2;
     value: string;
     onChange: (value: string) => void;
     width?: string;
@@ -19,9 +19,9 @@ interface Props$3 {
  * @param width - specify the width of the component
  * @returns
  */
-declare const DropdownSelect: ({ options, value, onChange, width }: Props$3) => react_jsx_runtime.JSX.Element;
+declare const DropdownSelect: ({ options, value, onChange, width }: Props$5) => react_jsx_runtime.JSX.Element;
 
-interface Props$2 {
+interface Props$4 {
     value: string;
     onChange: (value: string) => void;
     min?: string;
@@ -39,17 +39,17 @@ interface Props$2 {
  * @param onChange - to set a value
  * @returns
  */
-declare const RangeSlider: ({ min, max, color, width, value, onChange }: Props$2) => react_jsx_runtime.JSX.Element;
+declare const RangeSlider: ({ min, max, color, width, value, onChange }: Props$4) => react_jsx_runtime.JSX.Element;
 
-type Options = {
+type Options$1 = {
     label: ReactNode;
     value: string;
 }[];
-interface Props$1 {
+interface Props$3 {
     value: string;
     onChange: (value: string) => void;
     width?: string;
-    options: Options;
+    options: Options$1;
     color?: string;
 }
 /**
@@ -59,9 +59,9 @@ interface Props$1 {
  * @options - list of options, format [{ label: React Node Syntax, value: string }]
  * @returns
  */
-declare const OptionSlider: ({ value, onChange, width, options, color }: Props$1) => react_jsx_runtime.JSX.Element;
+declare const OptionSlider: ({ value, onChange, width, options, color }: Props$3) => react_jsx_runtime.JSX.Element;
 
-interface Props {
+interface Props$2 {
     value: string;
     onChange: (value: string) => void;
     width?: string;
@@ -73,6 +73,49 @@ interface Props {
  * @param width
  * @returns
  */
-declare const ColorPickerSlider: ({ value, onChange, width }: Props) => react_jsx_runtime.JSX.Element;
+declare const ColorPickerSlider: ({ value, onChange, width }: Props$2) => react_jsx_runtime.JSX.Element;
+
+type Options = {
+    label: string;
+    value: string;
+}[];
+interface Props$1 {
+    options: Options;
+    value: string[];
+    onChange: React.Dispatch<React.SetStateAction<string[]>>;
+    width?: string;
+}
+/**
+ * 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 - 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$1) => react_jsx_runtime.JSX.Element;
+
+interface Props {
+    buttonType: "gradient" | "solid" | "normal";
+}
+interface Data {
+    content: string;
+    main?: string;
+    text?: string;
+    first?: string;
+    second?: string;
+    isLoading?: boolean;
+}
+/**
+ *
+ * @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, ...props }: Props & Data & React.ComponentProps<"button">) => react_jsx_runtime.JSX.Element;
 
-export { ColorPickerSlider, DropdownSelect, OptionSlider, type Options$1 as Options, RangeSlider, type Options as SliderOptions };
+export { Button, ColorPickerSlider, DropdownSelect, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, type Options$1 as SliderOptions };

package/dist/index.d.ts

@@ -1,12 +1,12 @@
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { ReactNode } from 'react';
 
-type Options$1 = {
+type Options$2 = {
     label: string;
     value: string;
 }[];
-interface Props$3 {
-    options: Options$1;
+interface Props$5 {
+    options: Options$2;
     value: string;
     onChange: (value: string) => void;
     width?: string;
@@ -19,9 +19,9 @@ interface Props$3 {
  * @param width - specify the width of the component
  * @returns
  */
-declare const DropdownSelect: ({ options, value, onChange, width }: Props$3) => react_jsx_runtime.JSX.Element;
+declare const DropdownSelect: ({ options, value, onChange, width }: Props$5) => react_jsx_runtime.JSX.Element;
 
-interface Props$2 {
+interface Props$4 {
     value: string;
     onChange: (value: string) => void;
     min?: string;
@@ -39,17 +39,17 @@ interface Props$2 {
  * @param onChange - to set a value
  * @returns
  */
-declare const RangeSlider: ({ min, max, color, width, value, onChange }: Props$2) => react_jsx_runtime.JSX.Element;
+declare const RangeSlider: ({ min, max, color, width, value, onChange }: Props$4) => react_jsx_runtime.JSX.Element;
 
-type Options = {
+type Options$1 = {
     label: ReactNode;
     value: string;
 }[];
-interface Props$1 {
+interface Props$3 {
     value: string;
     onChange: (value: string) => void;
     width?: string;
-    options: Options;
+    options: Options$1;
     color?: string;
 }
 /**
@@ -59,9 +59,9 @@ interface Props$1 {
  * @options - list of options, format [{ label: React Node Syntax, value: string }]
  * @returns
  */
-declare const OptionSlider: ({ value, onChange, width, options, color }: Props$1) => react_jsx_runtime.JSX.Element;
+declare const OptionSlider: ({ value, onChange, width, options, color }: Props$3) => react_jsx_runtime.JSX.Element;
 
-interface Props {
+interface Props$2 {
     value: string;
     onChange: (value: string) => void;
     width?: string;
@@ -73,6 +73,49 @@ interface Props {
  * @param width
  * @returns
  */
-declare const ColorPickerSlider: ({ value, onChange, width }: Props) => react_jsx_runtime.JSX.Element;
+declare const ColorPickerSlider: ({ value, onChange, width }: Props$2) => react_jsx_runtime.JSX.Element;
+
+type Options = {
+    label: string;
+    value: string;
+}[];
+interface Props$1 {
+    options: Options;
+    value: string[];
+    onChange: React.Dispatch<React.SetStateAction<string[]>>;
+    width?: string;
+}
+/**
+ * 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 - 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$1) => react_jsx_runtime.JSX.Element;
+
+interface Props {
+    buttonType: "gradient" | "solid" | "normal";
+}
+interface Data {
+    content: string;
+    main?: string;
+    text?: string;
+    first?: string;
+    second?: string;
+    isLoading?: boolean;
+}
+/**
+ *
+ * @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, ...props }: Props & Data & React.ComponentProps<"button">) => react_jsx_runtime.JSX.Element;
 
-export { ColorPickerSlider, DropdownSelect, OptionSlider, type Options$1 as Options, RangeSlider, type Options as SliderOptions };
+export { Button, ColorPickerSlider, DropdownSelect, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, type Options$1 as SliderOptions };