chore: refactor FilmSelect into new private dev package (#5632)

lerna.json

@@ -1,5 +1,5 @@
 {
-    "lerna": "4.0.0",
+    "lerna": "5.5.4",
     "npmClient": "yarn",
     "useWorkspaces": true,
     "version": "independent"

package.json

@@ -53,7 +53,7 @@
         "eslint-plugin-prettier": "^4.2.1",
         "gh-pages": "^4.0.0",
         "http-server": "^14.1.1",
-        "lerna": "^5.1.8",
+        "lerna": "^5.5.4",
         "npm-run-all": "^4.1.5",
         "prettier": "~2.7.1",
         "sinon": "^9.2.1",

packages/docs-app/src/examples/popover2-examples/popover2Example.tsx

@@ -49,8 +49,7 @@ import {
     Popover2SharedProps,
     StrictModifierNames,
 } from "@blueprintjs/popover2";
-
-import FilmSelect from "../../common/filmSelect";
+import { FilmSelect } from "@blueprintjs/select/examples";
 
 const POPPER_DOCS_URL = "https://popper.js.org/docs/v2/";
 

packages/docs-app/src/examples/select-examples/multiSelectExample.tsx

@@ -20,34 +20,34 @@ import { Code, H5, Intent, MenuItem, Switch, TagProps } from "@blueprintjs/core"
 import { Example, ExampleProps } from "@blueprintjs/docs-theme";
 import { Popover2 } from "@blueprintjs/popover2";
 import { ItemRenderer, MultiSelect2 } from "@blueprintjs/select";
-
 import {
     areFilmsEqual,
     arrayContainsFilm,
     createFilms,
+    Film,
     filterFilm,
     getFilmItemProps,
-    IFilm,
     maybeAddCreatedFilmToArrays,
     maybeDeleteCreatedFilmFromArrays,
     renderCreateFilmsMenuItem,
     TOP_100_FILMS,
-} from "../../common/films";
+} from "@blueprintjs/select/examples";
+
 import { PropCodeTooltip } from "../../common/propCodeTooltip";
 
-const FilmMultiSelect = MultiSelect2.ofType<IFilm>();
+const FilmMultiSelect = MultiSelect2.ofType<Film>();
 
 const INTENTS = [Intent.NONE, Intent.PRIMARY, Intent.SUCCESS, Intent.DANGER, Intent.WARNING];
 
 export interface IMultiSelectExampleState {
     allowCreate: boolean;
-    createdItems: IFilm[];
+    createdItems: Film[];
     disabled: boolean;
     fill: boolean;
-    films: IFilm[];
+    films: Film[];
     hasInitialContent: boolean;
     intent: boolean;
-    items: IFilm[];
+    items: Film[];
     matchTargetWidth: boolean;
     openOnKeyDown: boolean;
     popoverMinimal: boolean;
@@ -225,9 +225,9 @@ export class MultiSelectExample extends React.PureComponent<ExampleProps, IMulti
         );
     }
 
-    private renderTag = (film: IFilm) => film.title;
+    private renderTag = (film: Film) => film.title;
 
-    private renderFilm: ItemRenderer<IFilm> = (film, props) => {
+    private renderFilm: ItemRenderer<Film> = (film, props) => {
         if (!props.modifiers.matchesPredicate) {
             return null;
         }
@@ -246,19 +246,19 @@ export class MultiSelectExample extends React.PureComponent<ExampleProps, IMulti
         this.deselectFilm(index);
     };
 
-    private getSelectedFilmIndex(film: IFilm) {
+    private getSelectedFilmIndex(film: Film) {
         return this.state.films.indexOf(film);
     }
 
-    private isFilmSelected(film: IFilm) {
+    private isFilmSelected(film: Film) {
         return this.getSelectedFilmIndex(film) !== -1;
     }
 
-    private selectFilm(film: IFilm) {
+    private selectFilm(film: Film) {
         this.selectFilms([film]);
     }
 
-    private selectFilms(filmsToSelect: IFilm[]) {
+    private selectFilms(filmsToSelect: Film[]) {
         this.setState(({ createdItems, films, items }) => {
             let nextCreatedItems = createdItems.slice();
             let nextFilms = films.slice();
@@ -299,15 +299,15 @@ export class MultiSelectExample extends React.PureComponent<ExampleProps, IMulti
         });
     }
 
-    private handleFilmSelect = (film: IFilm) => {
+    private handleFilmSelect = (film: Film) => {
         if (!this.isFilmSelected(film)) {
             this.selectFilm(film);
         } else {
             this.deselectFilm(this.getSelectedFilmIndex(film));
         }
     };
 
-    private handleFilmsPaste = (films: IFilm[]) => {
+    private handleFilmsPaste = (films: Film[]) => {
         // On paste, don't bother with deselecting already selected values, just
         // add the new ones.
         this.selectFilms(films);

packages/docs-app/src/examples/select-examples/omnibarExample.tsx

@@ -17,18 +17,17 @@ import * as React from "react";
 import { Button, H5, HotkeysTarget2, KeyCombo, MenuItem, Position, Switch, Toaster } from "@blueprintjs/core";
 import { Example, ExampleProps, handleBooleanChange } from "@blueprintjs/docs-theme";
 import { Omnibar } from "@blueprintjs/select";
-
 import {
     areFilmsEqual,
     createFilm,
+    Film,
     filterFilm,
-    IFilm,
     renderCreateFilmMenuItem,
     renderFilm,
     TOP_100_FILMS,
-} from "./../../common/films";
+} from "@blueprintjs/select/examples";
 
-const FilmOmnibar = Omnibar.ofType<IFilm>();
+const FilmOmnibar = Omnibar.ofType<Film>();
 
 export interface IOmnibarExampleState {
     allowCreate: boolean;
@@ -115,7 +114,7 @@ export class OmnibarExample extends React.PureComponent<ExampleProps, IOmnibarEx
         this.setState({ isOpen: true });
     };
 
-    private handleItemSelect = (film: IFilm) => {
+    private handleItemSelect = (film: Film) => {
         this.setState({ isOpen: false });
 
         this.toaster.show({

packages/docs-app/src/examples/select-examples/selectExample.tsx

@@ -18,14 +18,12 @@ import * as React from "react";
 
 import { H5, MenuItem, Switch } from "@blueprintjs/core";
 import { Example, ExampleProps } from "@blueprintjs/docs-theme";
-
-import { IFilm, TOP_100_FILMS } from "../../common/films";
-import FilmSelect from "../../common/filmSelect";
+import { Film, FilmSelect, TOP_100_FILMS } from "@blueprintjs/select/examples";
 
 export interface ISelectExampleState {
     allowCreate: boolean;
     createFirst: boolean;
-    createdItems: IFilm[];
+    createdItems: Film[];
     disableItems: boolean;
     disabled: boolean;
     fill: boolean;
@@ -168,5 +166,5 @@ export class SelectExample extends React.PureComponent<ExampleProps, ISelectExam
         };
     }
 
-    private isItemDisabled = (film: IFilm) => this.state.disableItems && film.year < 2000;
+    private isItemDisabled = (film: Film) => this.state.disableItems && film.year < 2000;
 }

packages/docs-app/src/examples/select-examples/suggestExample.tsx

@@ -19,29 +19,26 @@ import * as React from "react";
 import { H5, MenuItem, Switch } from "@blueprintjs/core";
 import { Example, ExampleProps } from "@blueprintjs/docs-theme";
 import { Suggest2 } from "@blueprintjs/select";
-
 import {
     areFilmsEqual,
     createFilm,
+    Film,
     filterFilm,
-    IFilm,
     maybeAddCreatedFilmToArrays,
     maybeDeleteCreatedFilmFromArrays,
     renderCreateFilmMenuItem,
     renderFilm,
     TOP_100_FILMS,
-} from "./../../common/films";
-
-const FilmSuggest = Suggest2.ofType<IFilm>();
+} from "@blueprintjs/select/examples";
 
-export interface ISuggestExampleState {
+export interface SuggestExampleState {
     allowCreate: boolean;
     closeOnSelect: boolean;
-    createdItems: IFilm[];
+    createdItems: Film[];
     disabled: boolean;
     fill: boolean;
-    film: IFilm;
-    items: IFilm[];
+    film: Film;
+    items: Film[];
     matchTargetWidth: boolean;
     minimal: boolean;
     openOnKeyDown: boolean;
@@ -50,8 +47,8 @@ export interface ISuggestExampleState {
     resetOnSelect: boolean;
 }
 
-export class SuggestExample extends React.PureComponent<ExampleProps, ISuggestExampleState> {
-    public state: ISuggestExampleState = {
+export class SuggestExample extends React.PureComponent<ExampleProps, SuggestExampleState> {
+    public state: SuggestExampleState = {
         allowCreate: false,
         closeOnSelect: true,
         createdItems: [],
@@ -95,7 +92,7 @@ export class SuggestExample extends React.PureComponent<ExampleProps, ISuggestEx
 
         return (
             <Example options={this.renderOptions()} {...this.props}>
-                <FilmSuggest
+                <Suggest2<Film>
                     {...flags}
                     createNewItemFromQuery={maybeCreateNewItemFromQuery}
                     createNewItemRenderer={maybeCreateNewItemRenderer}
@@ -164,9 +161,9 @@ export class SuggestExample extends React.PureComponent<ExampleProps, ISuggestEx
         );
     }
 
-    private renderInputValue = (film: IFilm) => film.title;
+    private renderInputValue = (film: Film) => film.title;
 
-    private handleValueChange = (film: IFilm) => {
+    private handleValueChange = (film: Film) => {
         // delete the old film from the list if it was newly created
         const { createdItems, items } = maybeDeleteCreatedFilmFromArrays(
             this.state.items,
@@ -182,7 +179,7 @@ export class SuggestExample extends React.PureComponent<ExampleProps, ISuggestEx
         this.setState({ createdItems: nextCreatedItems, film, items: nextItems });
     };
 
-    private handleSwitchChange(prop: keyof ISuggestExampleState) {
+    private handleSwitchChange(prop: keyof SuggestExampleState) {
         return (event: React.FormEvent<HTMLInputElement>) => {
             const checked = event.currentTarget.checked;
             this.setState(state => ({ ...state, [prop]: checked }));

packages/eslint-config/index.js

@@ -37,11 +37,15 @@ module.exports = {
     },
     overrides: [
         {
-            files: ["*.js"],
+            files: ["*.js", "*.mjs"],
             env: {
                 node: true,
                 es6: true,
             },
+            parserOptions: {
+                ecmaVersion: 2022,
+                sourceType: "module",
+            },
         },
         {
             files: ["**/*.{ts,tsx}"],

packages/eslint-config/tslint.json

@@ -6,6 +6,7 @@
                 "core-js",
                 "date-fns",
                 "react-dom",
+                "@blueprintjs/select/examples",
                 "@blueprintjs/table/src",
                 "@blueprintjs/test-commons/bootstrap",
                 "tsutils"

packages/node-build-scripts/.eslintrc.json

@@ -1,8 +1,4 @@
 {
-    "parserOptions": {
-        "ecmaVersion": 2022,
-        "sourceType": "module"
-    },
     "rules": {
         "no-console": "off"
     }

packages/select/.eslintignore

@@ -0,0 +1,2 @@
+/*.js
+/*.d.ts

packages/select/examples.d.ts

@@ -0,0 +1 @@
+export * from "./lib/esm/__examples__";

packages/select/examples.js

@@ -0,0 +1 @@
+export * from "./lib/esm/__examples__";

packages/select/karma.conf.js

@@ -7,6 +7,7 @@ const { createKarmaConfig } = require("@blueprintjs/karma-build-scripts");
 module.exports = function (config) {
     const baseConfig = createKarmaConfig({
         dirname: __dirname,
+        coverageExcludes: ["src/__examples__/*"],
     });
     config.set(baseConfig);
 };

packages/docs-app/src/common/filmSelect.tsx → packages/select/src/__examples__/filmSelect.tsx

@@ -17,24 +17,23 @@
 import * as React from "react";
 
 import { Button, MenuItem } from "@blueprintjs/core";
-import { ItemRenderer, Select2, Select2Props } from "@blueprintjs/select";
 
+import type { ItemRenderer } from "../common";
+import { Select2, Select2Props } from "../components/select/select2";
 import {
     areFilmsEqual,
     createFilm,
+    Film,
     filterFilm,
     getFilmItemProps,
-    IFilm,
     maybeAddCreatedFilmToArrays,
     maybeDeleteCreatedFilmFromArrays,
     renderCreateFilmMenuItem,
     TOP_100_FILMS,
 } from "./films";
 
-const FilmSelect = Select2.ofType<IFilm>();
-
-type Props = Omit<
-    Select2Props<IFilm>,
+type FilmSelectProps = Omit<
+    Select2Props<Film>,
     | "createNewItemFromQuery"
     | "createNewItemRenderer"
     | "itemPredicate"
@@ -47,15 +46,11 @@ type Props = Omit<
     allowCreate?: boolean;
 };
 
-// eslint-disable-next-line import/no-default-export
-export default function ({ allowCreate = false, fill, ...restProps }: Props) {
-    const maybeCreateNewItemFromQuery = allowCreate ? createFilm : undefined;
-    const maybeCreateNewItemRenderer = allowCreate ? renderCreateFilmMenuItem : null;
-
+export function FilmSelect({ allowCreate = false, fill, ...restProps }: FilmSelectProps) {
     const [items, setItems] = React.useState([...TOP_100_FILMS]);
-    const [createdItems, setCreatedItems] = React.useState<IFilm[]>([]);
+    const [createdItems, setCreatedItems] = React.useState<Film[]>([]);
     const [selectedFilm, setSelectedFilm] = React.useState(TOP_100_FILMS[0]);
-    const handleItemSelect = React.useCallback((newFilm: IFilm) => {
+    const handleItemSelect = React.useCallback((newFilm: Film) => {
         // Delete the old film from the list if it was newly created.
         const step1Result = maybeDeleteCreatedFilmFromArrays(items, createdItems, selectedFilm);
         // Add the new film to the list if it is newly created.
@@ -65,7 +60,7 @@ export default function ({ allowCreate = false, fill, ...restProps }: Props) {
         setItems(step2Result.items);
     }, []);
 
-    const itemRenderer = React.useCallback<ItemRenderer<IFilm>>(
+    const itemRenderer = React.useCallback<ItemRenderer<Film>>(
         (film, props) => {
             if (!props.modifiers.matchesPredicate) {
                 return null;
@@ -76,9 +71,9 @@ export default function ({ allowCreate = false, fill, ...restProps }: Props) {
     );
 
     return (
-        <FilmSelect
-            createNewItemFromQuery={maybeCreateNewItemFromQuery}
-            createNewItemRenderer={maybeCreateNewItemRenderer}
+        <Select2<Film>
+            createNewItemFromQuery={allowCreate ? createFilm : undefined}
+            createNewItemRenderer={allowCreate ? renderCreateFilmMenuItem : undefined}
             fill={fill}
             itemPredicate={filterFilm}
             itemRenderer={itemRenderer}
@@ -96,6 +91,6 @@ export default function ({ allowCreate = false, fill, ...restProps }: Props) {
                 rightIcon="caret-down"
                 text={selectedFilm ? `${selectedFilm.title} (${selectedFilm.year})` : "(No selection)"}
             />
-        </FilmSelect>
+        </Select2>
     );
 }