@bitrise/bitkit 10.8.0 → 10.9.2

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@bitrise/bitkit",
   "description": "Bitrise React component library",
-  "version": "10.8.0",
+  "version": "10.9.2",
   "repository": "git@github.com:bitrise-io/bitkit.git",
   "main": "src/index.ts",
   "license": "UNLICENSED",
@@ -21,8 +21,11 @@
   },
   "dependencies": {
     "@chakra-ui/react": "^2.2.4",
+    "@chakra-ui/react-utils": "^2.0.1",
+    "@chakra-ui/utils": "^2.0.4",
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
+    "@floating-ui/react-dom-interactions": "^0.8.1",
     "@popperjs/core": "^2.11.5",
     "classnames": "^2.3.1",
     "clipboard": "^2.0.11",
@@ -58,10 +61,14 @@
     "@storybook/testing-library": "^0.0.13",
     "@storybook/theming": "^6.5.9",
     "@svgr/core": "^6.3.0",
+    "@testing-library/dom": "^8.16.0",
+    "@testing-library/jest-dom": "^5.16.4",
+    "@testing-library/react": "^13.3.0",
+    "@testing-library/user-event": "^14.3.0",
     "@types/cheerio": "^0.22.31",
     "@types/clipboard": "^2.0.1",
     "@types/enzyme": "^3.10.12",
-    "@types/jest": "^27.5.2",
+    "@types/jest": "^28.1.6",
     "@types/luxon": "^2.4.0",
     "@types/react": "18.0.15",
     "@types/react-dom": "^18.0.6",
@@ -87,12 +94,14 @@
     "glob": "^8.0.3",
     "husky": "^7.0.4",
     "identity-obj-proxy": "^3.0.0",
-    "jest": "^27.5.1",
+    "jest": "^28.1.3",
+    "jest-environment-jsdom": "^28.1.3",
     "jsdom": "^19.0.0",
     "prettier": "^2.7.1",
+    "react-hook-form": "^7.33.1",
     "recast": "^0.21.1",
     "semantic-release": "^19.0.3",
-    "ts-jest": "^27.1.5",
+    "ts-jest": "^28.0.7",
     "ts-node": "^10.9.1",
     "tsconfig-paths-webpack-plugin": "^3.5.2",
     "typescript": "^4.7.4",
@@ -110,12 +119,13 @@
     "moduleNameMapper": {
       "^.+\\.css$": "identity-obj-proxy"
     },
-    "setupFiles": [
-      "./jest.setup.js"
+    "setupFilesAfterEnv": [
+      "./spec/jest.setup.ts"
     ],
     "transform": {
       "\\.tsx?$": "ts-jest"
-    }
+    },
+    "testEnvironment": "./spec/test-env.js"
   },
   "resolutions": {
     "**/ast-types": "npm:@gkz/ast-types",

package/src/Components/Dropdown/Dropdown.context.tsx

@@ -0,0 +1,42 @@
+import { ComponentProps, ReactNode } from 'react';
+import { createStylesContext } from '@chakra-ui/react';
+import { createContext } from '@chakra-ui/react-utils';
+
+const [DropdownStylesProvider, useDropdownStyles] = createStylesContext('Dropdown');
+
+export type DropdownEventArgs<T> = { value: T; index: number | undefined; label: ReactNode };
+
+type DropdownContext<T> = {
+  formValue: T;
+  onOptionSelected: (arg: DropdownEventArgs<T>) => void;
+  listRef: React.RefObject<(HTMLElement | null)[]>;
+  searchValue: string;
+  searchRef: React.Ref<HTMLInputElement>;
+  searchOnChange: (sv: string) => void;
+  searchOnSubmit: () => void;
+  filter?: string;
+  activeIndex?: number | null;
+  getItemProps: (x: object) => object;
+};
+
+const [DropdownContextProvider, useDropdownContext] = createContext<DropdownContext<unknown>>();
+
+function useDropdownContextTyped<T>(): DropdownContext<T> {
+  return useDropdownContext() as unknown as DropdownContext<T>;
+}
+
+const DropdownProvider = <T,>({
+  styles,
+  context,
+  children,
+}: {
+  styles: ComponentProps<typeof DropdownStylesProvider>['value'];
+  children: ReactNode;
+  context: DropdownContext<T>;
+}) => (
+  <DropdownContextProvider value={context as DropdownContext<unknown>}>
+    <DropdownStylesProvider value={styles}>{children}</DropdownStylesProvider>
+  </DropdownContextProvider>
+);
+
+export { DropdownProvider, useDropdownContextTyped as useDropdownContext, useDropdownStyles };

package/src/Components/Dropdown/Dropdown.stories.tsx

@@ -0,0 +1,110 @@
+import { ReactNode, useState } from 'react';
+import { ComponentStoryFn } from '@storybook/react';
+import Notification from '../Notification/Notification';
+import Avatar from '../Avatar/Avatar';
+import Dropdown, {
+  DropdownGroup,
+  DropdownOption,
+  DropdownDetailedOption,
+  NoResultsFound,
+  DropdownSearch,
+} from './Dropdown';
+
+export default {
+  title: 'Components/Dropdown',
+  component: Dropdown,
+};
+
+const opts = [
+  { value: 'x1', label: 'text1' },
+  { value: 'x2', label: 'text2' },
+  { value: 'x3', label: 'text3' },
+  { value: 'x4', label: 'text4' },
+];
+export const CustomSearch = () => {
+  const [searchValue, setSearchValue] = useState('');
+  const [options, setOptions] = useState<ReactNode[]>([]);
+  const searchOnChange = (nv: string) => {
+    setSearchValue(nv);
+    setOptions(
+      opts
+        .filter((opt) => opt.label.includes(nv))
+        .map((opt) => (
+          <DropdownOption value={opt.value} key={opt.value}>
+            {opt.label}
+          </DropdownOption>
+        )),
+    );
+  };
+  return <Dropdown search={<DropdownSearch value={searchValue} onChange={searchOnChange} />}>{options}</Dropdown>;
+};
+export const CustomSearchError = () => {
+  return (
+    <Dropdown search={<DropdownSearch />}>
+      <NoResultsFound>
+        <Notification status="error">Error</Notification>
+      </NoResultsFound>
+    </Dropdown>
+  );
+};
+
+export const WithDetail = () => {
+  return (
+    <Dropdown>
+      <DropdownDetailedOption value="user1" icon={<Avatar name="some" />} title="hello" subtitle="sub" />
+    </Dropdown>
+  );
+};
+
+export const WithLongOptions = () => {
+  return (
+    <Dropdown defaultValue="y" w="150px">
+      <DropdownOption value="y">
+        some very long option text longer than the component with verylongwordwithoutbreakopportunities
+      </DropdownOption>
+      <DropdownOption>some very long option text longer than the component</DropdownOption>
+    </Dropdown>
+  );
+};
+
+export const WithoutSearch = () => {
+  return (
+    <Dropdown search={false}>
+      <DropdownOption>opt1</DropdownOption>
+      <DropdownOption>opt2</DropdownOption>
+      <DropdownOption>opt3</DropdownOption>
+    </Dropdown>
+  );
+};
+
+export const Default: ComponentStoryFn<typeof Dropdown> = (args) => {
+  return (
+    <form
+      onSubmit={(ev) => {
+        ev.preventDefault();
+        const data = new FormData(ev.target as HTMLFormElement);
+        console.log(data.get('dropdown'));
+      }}
+    >
+      <Dropdown aria-label="test" name="dropdown" w="800px" {...args}>
+        <DropdownOption>Unset</DropdownOption>
+        <DropdownOption value="x1">text1</DropdownOption>
+        <DropdownOption value="x2">text2</DropdownOption>
+        <DropdownOption value="x3">text3</DropdownOption>
+        <DropdownOption value="x4">text4</DropdownOption>
+        <DropdownGroup label="test">
+          <DropdownOption value="x5">text5</DropdownOption>
+          <DropdownOption value="x6">text6</DropdownOption>
+          <DropdownOption value="x7">text7</DropdownOption>
+        </DropdownGroup>
+        <DropdownOption value="v1">
+          <div>label</div>
+        </DropdownOption>
+        <DropdownOption value="v2">
+          <div>label</div>
+        </DropdownOption>
+      </Dropdown>
+      <button type="submit">Send</button>
+    </form>
+  );
+};