@starasia/dropdown 1.0.0

package/README.md

@@ -0,0 +1,122 @@
+# starasia Dropdown
+
+starasia Dropdown is a strict and customizable Dropdown component for web development projects, designed for simplicity and adherence to strict design guidelines.
+
+## Screenshots
+
+![App Screenshot](https://github.com/primaramadhaniputra/image/blob/main/IDropdown.png)
+
+## Package instalation
+
+Instal package using pnpm
+
+```bash
+  pnpm add @starasia/dropdown
+```
+
+Instal package using yarn
+
+```bash
+  yarn add @starasia/dropdown
+```
+
+Instal package using npm
+
+```bash
+  npm i @starasia/dropdown
+```
+
+## Usage/Examples (you can combine using icon package starasia)
+
+```javascript
+ import {
+ Dropdown
+} from '@starasia/dropdown'
+
+
+
+import React, {SVGProps} from "react";
+import ReactDOM from "react-dom/client";
+
+const CustomIcon: React.FC<SVGProps<SVGSVGElement>> = (props) => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <g id="Curved/Random">
+        <path
+          id="shape"
+          d="M3.33333 13.3333C3.33333 13.3333 4.16666 12.5 6.66666 12.5C9.16666 12.5 10.8333 14.1667 13.3333 14.1667C15.8333 14.1667 16.6667 13.3333 16.6667 13.3333V3.33333C16.6667 3.33333 15.8333 4.16667 13.3333 4.16667C10.8333 4.16667 9.16666 2.5 6.66666 2.5C4.16666 2.5 3.33333 3.33333 3.33333 3.33333V17.5"
+          stroke="currentColor"
+          strokeWidth="1.5"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+    </svg>
+  );
+};
+
+const App = () => (
+  <div>
+    <h1>Component test</h1>
+    <div style={{margin: "100px"}}>
+      <Dropdown
+        dropdownLists={[
+          {
+            icon: <CustomIcon color="gray" />,
+            label: "testing 1",
+            value: "testing 1",
+          },
+          {
+            icon: <CustomIcon color="red" />,
+            label: "testing 2",
+            value: "testing 2",
+          },
+          {
+            icon: <CustomIcon color="blue" />,
+            label: "testing 3",
+            value: "testing 3",
+          },
+        ]}
+        onChange={(e) => {
+          console.log("e", e);
+        }}
+        defaultValue={[
+          {
+            label: "testing 3",
+            value: "testing 3",
+          },
+        ]}
+        iconLeft={<CustomIcon />}
+        multiSelect
+        searchAble
+        onSearch={(e) => console.log(e)}
+      />
+    </div>
+  </div>
+);
+
+ReactDOM.createRoot(document.getElementById("app")!).render(<App />);
+```
+
+## Props @starasia/menu
+
+#### Props that you can pass to <Menu {...props}></Menu>
+
+| Prop Name     | Type                          | Value                                                               | Default  | required | description                 |
+| :------------ | :---------------------------- | :------------------------------------------------------------------ | :------- | :------- | :-------------------------- |
+| onChange      | function                      | (props: {label: string; value: string}[]) => void                   | required | true     | ""                          |
+| onSearch      | function                      | (props:string) => void                                              |          | false    | ""                          |
+| dropdownLists | array of objects              | [{icon?:React.ReactElement<IconProps>,label: string,value: string}] | required | true     | data list for handle change |
+| defaultValue  | array of objects              | [label: string,value: string}]                                      |          |          | default value               |
+| size          | string                        | "sm" / "md" / "lg"                                                  | 'md'     | false    | sizes for dropdown          |
+| multiSelect   | boolean                       | true/false                                                          | false    | false    | multi select for dropdown   |
+| searchAble    | boolean                       | true/false                                                          | false    | false    | search for dropdown         |
+| iconLeft      | React.ReactElement<IconProps> | React.ReactElement<IconProps>                                       |          | false    | icon for dropdown           |
+| placeholder   | string                        | string                                                              |          | false    | placeholder for dropdown    |

package/dist/Checkbox.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+interface IProps {
+    isChecked: boolean;
+}
+declare const Checkbox: ({ isChecked }: IProps) => React.JSX.Element;
+export default Checkbox;

package/dist/Dropdown.d.ts

@@ -0,0 +1,3 @@
+import React from "react";
+import { IDropdown } from "./interface";
+export declare const Dropdown: React.FC<IDropdown>;

package/dist/DropdownList.d.ts

@@ -0,0 +1,18 @@
+import React from "react";
+import { IDropdown } from "./interface";
+interface IProps {
+    positionDropdown: IDropdown["position"];
+    dropdownLists: IDropdown["dropdownLists"];
+    isComponentVisible: boolean;
+    searchAble: boolean;
+    onSearch?: (e: string) => void;
+    value: {
+        label: string;
+        value: string;
+    }[];
+    handleChangeValue: (label: string, values: string) => void;
+    multiSelect: boolean | undefined;
+    searchValue?: string;
+}
+declare const DropdownList: React.ForwardRefExoticComponent<IProps & React.RefAttributes<HTMLDivElement>>;
+export default DropdownList;

package/dist/ScrollAwareWrapper.d.ts

@@ -0,0 +1,6 @@
+import React, { ReactNode } from "react";
+declare const ScrollAwareWrapper: ({ children, handleChangePosition, }: {
+    children: ReactNode;
+    handleChangePosition: () => void;
+}) => React.JSX.Element;
+export default ScrollAwareWrapper;