Merge pull request #184 from AppQuality/dropdown

Dropdown

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"

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";

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 <Dropdown {...args} />;
+};
+
+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,
+};

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,
+  },
+];