@willphan1712000/frontend 1.0.0 → 1.0.2

package/README.md

@@ -1,14 +1,8 @@
 <img style="width: 15%" src="./will.png">
 
-## Will-js is a Web development library made easy for Full-stack Development to develop, build, and push to production created by Will Phan
+## Will-js is a Frontend package developed by Will Phan that makes Fronted development easy with pre-built UI components
 
-## It has pre-built classes that can be used for Web Development
-
-## Key Benefits
-
-- Simple syntax that includes object-oriented programming techniques
-- Pre-built functionalities that handle difficult tasks in Full-stack Development
-- Provides flexibility, maintainability, and extensibility
+## UI Components
 
 ## Technology
 
@@ -16,27 +10,12 @@
 
 ## Installation
 
-### Option 1: Clone this project to your local computer
-
-There is a file called W.ts that exports $$ function, this is the root function to use every other functions and classes.
-Simply import $$ to every ts files that you want to use Will-js
-
-```ts
-import { $$ } from "path/of/your/project/Web-Development/W";
-```
-
-### Options 2: Install from npm
+### Install from npm
 
 Run this command in your terminal (note: this assumes you have installed Nodejs)
 
 ```npm
-npm i @willphan1712000/w
-```
-
-Then import $$ function to every ts files that you want to use Will-js as an entry point where you can access every features of the library
-
-```ts
-import { $$ } from "@willphan1712000/w";
+npm i @willphan1712000/frontend
 ```
 
 ## How to use Will-js

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$4 {
+    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$4) => react_jsx_runtime.JSX.Element;
 
-interface Props$2 {
+interface Props$3 {
     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$3) => react_jsx_runtime.JSX.Element;
 
-type Options = {
+type Options$1 = {
     label: ReactNode;
     value: string;
 }[];
-interface Props$1 {
+interface Props$2 {
     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$2) => react_jsx_runtime.JSX.Element;
 
-interface Props {
+interface Props$1 {
     value: string;
     onChange: (value: string) => void;
     width?: string;
@@ -73,6 +73,26 @@ interface Props {
  * @param width
  * @returns
  */
-declare const ColorPickerSlider: ({ value, onChange, width }: Props) => react_jsx_runtime.JSX.Element;
+declare const ColorPickerSlider: ({ value, onChange, width }: Props$1) => react_jsx_runtime.JSX.Element;
+
+type Options = {
+    label: string;
+    value: string;
+}[];
+interface Props {
+    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 - a chosen value
+ * @param onChange - a function to set a value
+ * @param width - specify the width of the component
+ * @returns
+ */
+declare const MultiSelect: ({ options, value, onChange, width }: Props) => react_jsx_runtime.JSX.Element;
 
-export { ColorPickerSlider, DropdownSelect, OptionSlider, type Options$1 as Options, RangeSlider, type Options as SliderOptions };
+export { 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$4 {
+    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$4) => react_jsx_runtime.JSX.Element;
 
-interface Props$2 {
+interface Props$3 {
     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$3) => react_jsx_runtime.JSX.Element;
 
-type Options = {
+type Options$1 = {
     label: ReactNode;
     value: string;
 }[];
-interface Props$1 {
+interface Props$2 {
     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$2) => react_jsx_runtime.JSX.Element;
 
-interface Props {
+interface Props$1 {
     value: string;
     onChange: (value: string) => void;
     width?: string;
@@ -73,6 +73,26 @@ interface Props {
  * @param width
  * @returns
  */
-declare const ColorPickerSlider: ({ value, onChange, width }: Props) => react_jsx_runtime.JSX.Element;
+declare const ColorPickerSlider: ({ value, onChange, width }: Props$1) => react_jsx_runtime.JSX.Element;
+
+type Options = {
+    label: string;
+    value: string;
+}[];
+interface Props {
+    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 - a chosen value
+ * @param onChange - a function to set a value
+ * @param width - specify the width of the component
+ * @returns
+ */
+declare const MultiSelect: ({ options, value, onChange, width }: Props) => react_jsx_runtime.JSX.Element;
 
-export { ColorPickerSlider, DropdownSelect, OptionSlider, type Options$1 as Options, RangeSlider, type Options as SliderOptions };
+export { ColorPickerSlider, DropdownSelect, MultiSelect, OptionSlider, type Options$2 as Options, RangeSlider, type Options$1 as SliderOptions };