diff --git a/package.json b/package.json index 26eed5e..9c58fac 100644 --- a/package.json +++ b/package.json @@ -9,6 +9,7 @@ "react-google-places-autocomplete": "^3.3.2", "react-input-mask": "^2.0.4", "react-select": "^4.3.1", + "react-select5": "npm:react-select", "use-places-autocomplete": "^1.9.3", "web-vitals": "^1.0.1", "yup": "^0.32.9" diff --git a/src/index.tsx b/src/index.tsx index af88a88..88f3361 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -55,6 +55,7 @@ export * from "./stories/pill/Pill"; export * from "./stories/placesAutocomplete/PlacesAutocomplete"; export * from "./stories/progress-bar/ProgressBar"; export * from "./stories/select/Select"; +export * from "./stories/Dropdown"; export * from "./stories/sidebar/Sidebar"; export * from "./stories/skeleton/Skeleton"; export * from "./stories/spinner/Spinner"; diff --git a/src/stories/Dropdown/Dropdown.stories.tsx b/src/stories/Dropdown/Dropdown.stories.tsx new file mode 100644 index 0000000..b1bca32 --- /dev/null +++ b/src/stories/Dropdown/Dropdown.stories.tsx @@ -0,0 +1,29 @@ +import { Meta, StoryFn } from "@storybook/react"; +import { Dropdown } from "."; +import { colourOptions } from "./data"; + +export default { + title: "Dropdown", + component: Dropdown, +} as Meta; + +const Template: StoryFn = (args) => { + return ; +}; + +export const SingleDropdown = Template.bind({}); +SingleDropdown.args = { + className: "basic-single", + defaultValue: colourOptions[0], + name: "color", + options: colourOptions, +}; + +export const MultiDropdown = Template.bind({}); +MultiDropdown.args = { + isMulti: true, + className: "basic-multi", + defaultValue: [colourOptions[2], colourOptions[3]], + name: "colors", + options: colourOptions, +}; diff --git a/src/stories/Dropdown/data.ts b/src/stories/Dropdown/data.ts new file mode 100644 index 0000000..d369b8b --- /dev/null +++ b/src/stories/Dropdown/data.ts @@ -0,0 +1,142 @@ +export interface ColourOption { + readonly value: string; + readonly label: string; + readonly color: string; + readonly isFixed?: boolean; + readonly isDisabled?: boolean; +} + +export const colourOptions: readonly ColourOption[] = [ + { value: "ocean", label: "Ocean", color: "#00B8D9", isFixed: true }, + { value: "blue", label: "Blue", color: "#0052CC", isDisabled: true }, + { value: "purple", label: "Purple", color: "#5243AA" }, + { value: "red", label: "Red", color: "#FF5630", isFixed: true }, + { value: "orange", label: "Orange", color: "#FF8B00" }, + { value: "yellow", label: "Yellow", color: "#FFC400" }, + { value: "green", label: "Green", color: "#36B37E" }, + { value: "forest", label: "Forest", color: "#00875A" }, + { value: "slate", label: "Slate", color: "#253858" }, + { value: "silver", label: "Silver", color: "#666666" }, +]; + +export interface FlavourOption { + readonly value: string; + readonly label: string; + readonly rating: string; +} + +export const flavourOptions: readonly FlavourOption[] = [ + { value: "vanilla", label: "Vanilla", rating: "safe" }, + { value: "chocolate", label: "Chocolate", rating: "good" }, + { value: "strawberry", label: "Strawberry", rating: "wild" }, + { value: "salted-caramel", label: "Salted Caramel", rating: "crazy" }, +]; + +export interface StateOption { + readonly value: string; + readonly label: string; +} + +export const stateOptions: readonly StateOption[] = [ + { value: "AL", label: "Alabama" }, + { value: "AK", label: "Alaska" }, + { value: "AS", label: "American Samoa" }, + { value: "AZ", label: "Arizona" }, + { value: "AR", label: "Arkansas" }, + { value: "CA", label: "California" }, + { value: "CO", label: "Colorado" }, + { value: "CT", label: "Connecticut" }, + { value: "DE", label: "Delaware" }, + { value: "DC", label: "District Of Columbia" }, + { value: "FM", label: "Federated States Of Micronesia" }, + { value: "FL", label: "Florida" }, + { value: "GA", label: "Georgia" }, + { value: "GU", label: "Guam" }, + { value: "HI", label: "Hawaii" }, + { value: "ID", label: "Idaho" }, + { value: "IL", label: "Illinois" }, + { value: "IN", label: "Indiana" }, + { value: "IA", label: "Iowa" }, + { value: "KS", label: "Kansas" }, + { value: "KY", label: "Kentucky" }, + { value: "LA", label: "Louisiana" }, + { value: "ME", label: "Maine" }, + { value: "MH", label: "Marshall Islands" }, + { value: "MD", label: "Maryland" }, + { value: "MA", label: "Massachusetts" }, + { value: "MI", label: "Michigan" }, + { value: "MN", label: "Minnesota" }, + { value: "MS", label: "Mississippi" }, + { value: "MO", label: "Missouri" }, + { value: "MT", label: "Montana" }, + { value: "NE", label: "Nebraska" }, + { value: "NV", label: "Nevada" }, + { value: "NH", label: "New Hampshire" }, + { value: "NJ", label: "New Jersey" }, + { value: "NM", label: "New Mexico" }, + { value: "NY", label: "New York" }, + { value: "NC", label: "North Carolina" }, + { value: "ND", label: "North Dakota" }, + { value: "MP", label: "Northern Mariana Islands" }, + { value: "OH", label: "Ohio" }, + { value: "OK", label: "Oklahoma" }, + { value: "OR", label: "Oregon" }, + { value: "PW", label: "Palau" }, + { value: "PA", label: "Pennsylvania" }, + { value: "PR", label: "Puerto Rico" }, + { value: "RI", label: "Rhode Island" }, + { value: "SC", label: "South Carolina" }, + { value: "SD", label: "South Dakota" }, + { value: "TN", label: "Tennessee" }, + { value: "TX", label: "Texas" }, + { value: "UT", label: "Utah" }, + { value: "VT", label: "Vermont" }, + { value: "VI", label: "Virgin Islands" }, + { value: "VA", label: "Virginia" }, + { value: "WA", label: "Washington" }, + { value: "WV", label: "West Virginia" }, + { value: "WI", label: "Wisconsin" }, + { value: "WY", label: "Wyoming" }, +]; + +export const optionLength = [ + { value: 1, label: "general" }, + { + value: 2, + label: + "Evil is the moment when I lack the strength to be true to the Good that compels me.", + }, + { + value: 3, + label: + "It is now an easy matter to spell out the ethic of a truth: 'Do all that you can to persevere in that which exceeds your perseverance. Persevere in the interruption. Seize in your being that which has seized and broken you.", + }, +]; + +export const dogOptions = [ + { id: 1, label: "Chihuahua" }, + { id: 2, label: "Bulldog" }, + { id: 3, label: "Dachshund" }, + { id: 4, label: "Akita" }, +]; + +// let bigOptions = []; +// for (let i = 0; i < 10000; i++) { +// bigOptions = bigOptions.concat(colourOptions); +// } + +export interface GroupedOption { + readonly label: string; + readonly options: readonly ColourOption[] | readonly FlavourOption[]; +} + +export const groupedOptions: readonly GroupedOption[] = [ + { + label: "Colours", + options: colourOptions, + }, + { + label: "Flavours", + options: flavourOptions, + }, +]; diff --git a/src/stories/Dropdown/index.tsx b/src/stories/Dropdown/index.tsx new file mode 100644 index 0000000..3311584 --- /dev/null +++ b/src/stories/Dropdown/index.tsx @@ -0,0 +1,215 @@ +import ReactSelect, { Props, GroupBase, StylesConfig } from "react-select5"; +import { aqTheme, customComponents } from "./styles"; +import { aqBootstrapTheme } from "../theme/defaultTheme"; + +export function Dropdown< + Option, + IsMulti extends boolean = false, + Group extends GroupBase