#688 New Autosuggest component for SelectorSelectorField

[BLoe]

This fixes #688

This change includes several things:

• Replaces react-select with react-autosuggest in the SelectorSelectorField component, wrapping react-autosuggest with a new component - CreatableAutosuggest - and passing in a small list item component - SelectorListItem - from SelectorSelectorField

• Sets up storybook examples for SelectorListItem and CreatableAutosuggest:

• Sets up an initial example of a standard way we can organize React components going forward:

/componentName
    ComponentName.tsx
    ComponentName.stories.tsx
    ComponentName.test.tsx
    ComponentName.module.css

• Introduces CSS modules with a typescript plugin. This allows us to define styles using css (or sass) like this:

.container {
  cursor: default;
  padding-right: 10px;
  align-items: center;
}

and then we can import and use the module css styles like this:

import styles from './SelectorListItem.module.css';

...

  <div className={styles.container}>

[twschiller]

We're getting warnings/deprecations during the initial Webpack build coming from bootstrap. @fregante do you have any experience with TypeScript + CSS Modules (this PR is also starting our evaluation of CSS modules)

WARNING: You probably don't mean to use the color value black in interpolation here.
It may end up represented as black, which will likely produce invalid CSS.
Always quote color names when using them as strings or map keys (for example, "black").
If you really want to use the color value here, use '"" + $color'.

  ╷
4 │     --#{$color}: #{$value};
  │         ^^^^^^
  ╵
    node_modules/bootstrap/scss/_root.scss 4:9       @import
    node_modules/bootstrap/scss/bootstrap.scss 11:9  @import
    src/vendors/theme/app/app.scss 22:9              @import
    src/options.scss 17:9                            root stylesheet

[twschiller]

@BLoe Are these declarations missing something?

The documentation has more: https://github.com/mrmckeb/typescript-plugin-css-modules#custom-definitions

I think this should probably also help with the IDE autocomplete issue you were seeing?

declare module "*.module.css" {
  const classes: Record<string, string>;
  export default classes;
}

declare module "*.module.scss" {
  const classes: Record<string, string>;
  export default classes;
}

[BLoe]

I wasn't sure what those extra parts were doing, and those lines only seemed to appear in some of the guides I looked at. I am not really seeing any difference when I add those lines and re-build though. They aren't related to the Sass warnings or anything.

[fregante]

We're getting warnings/deprecations during the initial Webpack build coming from bootstrap. @fregante do you have any experience with TypeScript + CSS Modules (this PR is also starting our evaluation of CSS modules)

That's a sass error: https://stackoverflow.com/q/57455245/288906

Also: sass/sass#1687

And more specifically this seems to be a bootstrap issue and their "solution" seems to be to use node-sass instead of sass: twbs/bootstrap#29219

[twschiller]

That's a sass error:

Yep - I was curious as to why we weren't seeing it before. It seems related to using typescript-plugin-css-modules as this PR doesn't introduce any new @import statements in CSS.

@BLoe Are these files now getting compiled when they hadn't been before? I would they they were getting compiled before too

[fregante]

Oh I see what's happening. I assumed that this issue was already solved:

• Switch from node-sass to dart-sass #975

It wasn't happening because we are using node-sass, so it's never been a problem. However typescript-plugin-css-modules is using dart-sass internally, reparsing the SASS files with it, surfacing the warning:

https://github.com/mrmckeb/typescript-plugin-css-modules/blob/82ba03548c3d2193508e1a4dbc47c1aa9b22943c/package.json#L81

[BLoe]

@fregante @twschiller The typescript plugin has an open issue about removing the sass dependency.

It looks like there are other plugins available to accomplish what we're trying to do here, so I'm going to investigate using a different one.

[fregante]

IMHO it's a "bug" we should resolve or learn to live with since we'll end up switching to sass eventually as per:

• Switch from node-sass to dart-sass #975

Also it's just a warning and doesn't affect the actual build, I think.

[BLoe]

Yeah, I mean, for that it sounds like we need to consider updating to the latest bootstrap version, right?

[twschiller]

This does the same thing as disableOverlay above? What's the point of having both?

• Remove duplicate method

[twschiller]