@bolttech/molecules-dropdown 0.1.0

package/package.json

@@ -0,0 +1,19 @@
+{
+  "name": "@bolttech/molecules-dropdown",
+  "version": "0.1.0",
+  "dependencies": {
+    "@bolttech/atoms-icon": "0.0.1",
+    "@bolttech/atoms-input": "0.0.1"
+  },
+  "module": "./index.js",
+  "main": "./index.js",
+  "type": "module",
+  "types": "./src/index.d.ts",
+  "peerDependencies": {
+    "@bolttech/atoms-select": "0.1.0",
+    "@edirect/frontend-foundations": "0.0.21",
+    "jest-styled-components": "7.1.1",
+    "react": "18.2.0",
+    "styled-components": "5.3.6"
+  }
+}

package/src/index.d.ts

@@ -0,0 +1,3 @@
+export { Dropdown } from './lib/molecules-dropdown';
+export { DropdownOptionsWithHeaders } from './lib/molecules-dropdown-with-header-options';
+export type { DropdownProps, DropdownOptionsWithHeadersProps } from './lib/molecules-dropdown.type';

package/src/lib/molecules-dropdown-with-header-options.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DropdownOptionsWithHeadersProps } from './molecules-dropdown.type';
+export declare const DropdownOptionsWithHeaders: ({ label, variant, required, hasError, optionList, disabled, errorMessage, urlFilterOptions, dataTestId, filterOptionsParam, selectedOption, setSelectedOption, placeholder }: DropdownOptionsWithHeadersProps) => JSX.Element;

package/src/lib/molecules-dropdown.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { DropdownProps } from './molecules-dropdown.type';
+export declare const Dropdown: ({ label, variant, required, hasError, optionList, disabled, errorMessage, urlFilterOptions, dataTestId, filterOptionsParam, selectedOption, setSelectedOption, placeholder }: DropdownProps) => JSX.Element;

package/src/lib/molecules-dropdown.styles.d.ts

@@ -0,0 +1,14 @@
+import { StyleVariants } from './molecules-dropdown.type';
+type DropdownStyledProps = {
+    variant: StyleVariants;
+    hasValue: string;
+    hasError?: boolean;
+    disabled?: boolean;
+};
+export declare const ClickableElement: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ContainerDropdown: import("styled-components").StyledComponent<"section", import("styled-components").DefaultTheme, DropdownStyledProps, never>;
+export declare const SectionContainer: import("styled-components").StyledComponent<"section", import("styled-components").DefaultTheme, Omit<DropdownStyledProps, "hasValue">, never>;
+export declare const InputAndIconDropdown: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const ContentDropdown: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export declare const FieldLabelAndRequiredLabelDropdown: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, {}, never>;
+export {};

package/src/lib/molecules-dropdown.type.d.ts

@@ -0,0 +1,175 @@
+/// <reference types="react" />
+import { OptionType, OptionWithHeaderType } from '@bolttech/atoms-select';
+/**
+ * @typedef {StyleVariants}
+ The string value possibilities to affect the theme
+ */
+export type StyleVariants = 'grey' | 'border';
+/**
+
+Default props for Dropdown component
+@property label - A string to display as the label of the dropdown
+@property placeholder - An optional string to display as the placeholder of the dropdown
+@property disabled - An optional boolean to disable the dropdown
+@property dataTestId - An optional string to use as the data-testid attribute for the dropdown
+@property errorMessage - An optional string to display as an error message for the dropdown
+@property hasError - An optional boolean to indicate if the dropdown has an error
+@property required - An optional boolean to indicate if the dropdown is required
+@property variant - An optional string to set the variant of the dropdown
+*/
+type DefaultProps = {
+    label: string;
+    placeholder?: string;
+    disabled?: boolean;
+    dataTestId?: string;
+    errorMessage?: string;
+    hasError?: boolean;
+    required?: boolean;
+    variant?: StyleVariants;
+};
+/**
+  Props for Dropdown component
+  @extends DefaultProps
+  @property optionList - An optional array of option objects to display in the dropdown
+  @property filterOptionsParam - An optional function that filters the option list based on input value
+  @property urlFilterOptions - An optional string representing the url to fetch options
+  @property setSelectedOption - A function to set the selected option
+  @property selectedOption - An optional object representing the currently selected option
+  */
+export type DropdownProps = DefaultProps & {
+    optionList?: OptionType[];
+    /**
+     * An optional function that filters the option list based on input value
+     * The function can be get by the current optionList or can get by url from server side
+     * @example
+     * // Filter by current optionList
+     * function filterOptions(inputValue: string, optionList?: OptionType[]) {
+     *  if (!optionList) return [];
+     *  if (!inputValue) return optionList;
+     *  return optionList.filter(
+     *    (opt) =>
+     *      opt.label.toLowerCase().search(inputValue.trim().toLowerCase()) !== -1
+     *    );
+     *  }
+     * @example
+     * // Filter by url
+     * function filterOptions(inputValue: string, optionList?: OptionType[], urlValue?: string) {
+     *  if (!inputValue || !urlValue) return [];
+     *  return fetch(`${urlValue}?valueSearch=${inputValue}`)
+     *    .then(response => {
+     *      if (!response.ok) {
+     *        throw new Error('Network response was not ok');
+     *      }
+     *      return response.json();
+     *    })
+     *    .then(data => {
+     *      const options: OptionType[] = data.map(option => ({
+     *        label: option.name,
+     *        value: option.id
+     *     }));
+     *     return options;
+     *  });
+     * }
+     */
+    filterOptionsParam?: (inputValue: string, optionList?: OptionType[], urlValue?: string) => OptionType[] | Promise<OptionType[]>;
+    urlFilterOptions?: string;
+    /**
+     * A function to set the selected option it's possible to use a void function or useStateFunction
+     * @example useStateFunction
+     * const [selectedOption, setSelectedOption] = useState<OptionType>();
+     * <Dropdown setSelectedOption={setSelectedOption} />
+     * @example void
+     * const manipulateData = (selectedOption?: OptionType) => {
+     *  console.log(selectedOption);
+     * }
+     * <Dropdown setSelectedOption={manipulateData} />
+     */
+    setSelectedOption: (selectedOption?: OptionType) => void | React.Dispatch<React.SetStateAction<OptionType>>;
+    selectedOption?: OptionType;
+};
+/**
+  Props for DropdownOptionsWithHeaders component
+  @extends DefaultProps
+  @property optionList - An optional array of option objects to display in the dropdown with headers
+  @property filterOptionsParam - An optional function that filters the option list based on input value
+  @property urlFilterOptions - An optional string representing the url to fetch options
+  @property setSelectedOption - A function to set the selected option
+  @property selectedOption - An optional object representing the currently selected option
+  */
+export type DropdownOptionsWithHeadersProps = DefaultProps & {
+    optionList?: OptionWithHeaderType[];
+    /**
+     * An optional function that filters the option list based on input value
+     * The function can be get by the current optionList or can get by url from server side
+     * @example
+     * // Filter by current optionList
+     * function filterOptionsWithHeaders(
+     *  inputValue: string,
+     *  optionList?: OptionWithHeaderType[]
+     * ) {
+     *  if (!optionList) return [];
+     *  if (!inputValue) return optionList;
+     *  return optionList.map((element) => {
+     *    return {
+     *    ...element,
+     *    options: element.options.filter(
+     *     (subElement) =>
+     *       subElement.label
+     *         .toLowerCase()
+     *         .search(inputValue.trim().toLowerCase()) !== -1
+     *    ),
+     *   };
+     *  });
+     * }
+     * @example
+     * // Filter by url
+     * function filterOptions(inputValue: string, optionList?: OptionWithHeaderType[], urlValue?: string) {
+     *  if (!inputValue || !urlValue) return [];
+     *  return fetch(`${urlValue}?valueSearch=${inputValue}`)
+     *    .then(response => {
+     *      if (!response.ok) {
+     *        throw new Error('Network response was not ok');
+     *      }
+     *      return response.json();
+     *    })
+     *    .then(data => {
+     *     return options as OptionWithHeaderType[];
+     *  });
+     * }
+     */
+    filterOptionsParam?: (inputValue: string, optionList?: OptionWithHeaderType[], urlValue?: string) => OptionWithHeaderType[] | Promise<OptionWithHeaderType[]>;
+    urlFilterOptions?: string;
+    /**
+     * A function to set the selected option it's possible to use a void function or useStateFunction
+     * @example useStateFunction
+     * const [selectedOption, setSelectedOption] = useState<OptionType>();
+     * <Dropdown setSelectedOption={setSelectedOption} />
+     * @example void
+     * const manipulateData = (selectedOption?: OptionType) => {
+     *  console.log(selectedOption);
+     * }
+     * <Dropdown setSelectedOption={manipulateData} />
+     */
+    setSelectedOption: (selectedOption?: OptionType) => void | React.Dispatch<React.SetStateAction<OptionType>>;
+    selectedOption?: OptionType;
+};
+/**
+  Props for ReusableDropdownComponent component
+  This type will be private, it will be use by only by our ReusableDropdownComponent
+  @extends DefaultProps
+  @property setShowSelectComponent - A function to set the visibility of the dropdown
+  @property showSelectComponent - A boolean indicating the visibility of the dropdown
+  @property onChangeInputValue - A function to set the input value of the dropdown
+  @property inputValue - A string representing the input value of the dropdown
+  @property setSelectedOptionOnInputValue - A function to set the selected option based on the input value
+  @property inputRef - A ref to the input element of the dropdown
+  */
+export type ReusableDropdownComponentProps = DefaultProps & {
+    setShowSelectComponent: React.Dispatch<React.SetStateAction<boolean>>;
+    showSelectComponent: boolean;
+    onChangeInputValue: React.Dispatch<React.SetStateAction<string>>;
+    inputValue: string;
+    setSelectedOptionOnInputValue: () => void;
+    inputRef: React.RefObject<HTMLInputElement>;
+};
+export {};

package/src/lib/molecules-dropdown.utils.d.ts

@@ -0,0 +1,3 @@
+import { OptionType, OptionWithHeaderType } from '@bolttech/atoms-select';
+export declare function filterOptions(inputValue: string, optionList?: OptionType[]): OptionType[];
+export declare function filterOptionsWithHeaders(inputValue: string, optionList?: OptionWithHeaderType[]): OptionWithHeaderType[];

package/src/lib/molecules-reusable-dropdown-component.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ReusableDropdownComponentProps } from './molecules-dropdown.type';
+export declare const ReusableDropdownComponent: ({ label, variant, required, inputValue, hasError, disabled, errorMessage, onChangeInputValue, setShowSelectComponent, showSelectComponent, setSelectedOptionOnInputValue, inputRef, dataTestId, placeholder, }: ReusableDropdownComponentProps) => JSX.Element;