nikchao/coffee-shope

*Sip*

coffee-shope

Sip

Creating a component/util

• from the root dir run yarn create-component <name> --typescript
• from the root dir run yarn bootstrap to bootstrap dependencies
• you're good to go! run yarn start or yarn storybook to see the components in storybook!
• when you're done, to publish run yarn publish-all which will publish your new package + update any packages that may reference it as a dependency

coffee-shope's Issues

Add storybook runner into barista

Fix utils creation and build

Create

At the moment the create util command makes a directory structure that looks like:

├── index.ts
├── package.json
└── tsconfig.json

rather than

├── src
│   └── index.ts
├── package.json
└── tsconfig.json

which is an issue as build looks for the src/index.ts and so fails.

Solution

Update the createUtil function to place the index file into a src directory

Build

Once creating the src/index.ts file manually the build command runs but outputs the type declaration file to lib/src/index.d.ts rather than lib/index.d.ts

Solution

Update the rollup-util.js file to ensure that all build files are placed directly in the lib directory

Fix unmounted setState on ripple

Currently call setTimeout on mount to destroy ripple. Don't call setState is component has been unmounted.

Can do this with a flag that gets set on componentDidMount and unset on componentWillUnmount

Abstract rollup build into barista

Fix rollup namedExport relative pathing wrt. root level

Changing package_dir in baristarc affects the relative path of the root node_modules directory, and therefore things inside of any created components/utils must take this into account when generating relative paths.

e.g. in Campfire:
In the rollup.config.js file the '../../node_modules/react/index.js': reactExports line does not go up enough levels to reach the project root, as it was hardcoded with the intention of the components directory being at the project root.

// packages/components/button/rollup.config.js
  ...
      namedExports: {
        'node_modules/react/index.js': reactExports,
        // just in case its pulling deps from root of mono-repo
        '../../node_modules/react/index.js': reactExports
      }
  ...

Should be:

// packages/components/button/rollup.config.js
     namedExports: {
        ...
        // just in case its pulling deps from root of mono-repo
        '../../../node_modules/react/index.js': reactExports
      }

Add native component library

react-native-web exists, and there was a request to have these work with native. Might be worth giving it a go for a few components given that @emotion/native exists. Could also have a go at abstracting out core styles.

Idea for Animator class

For animator, might make it nice if you allow it to have onEnter and onExit props with possible strings for baked in animations. Try using something like this for inspo:
https://intuit.github.io/qb-animation-library/#animation-classes

Clean up barista build output

All of the treating it as an external dependency can probably be hidden.
Seems to have no implication on the functionality of the component after build/publish.

Possibly this whole "external by default" situation should be documented as well

campfire/client.campfire/packages/components/example-button @hotfix/barista-builds ✗
🤯 yarn buildyarn run v1.13.0
$ rm -rf ./lib && barista build component
Creating bundle
'@emotion/styled' is imported by src/index.tsx, but could not be resolved – treating it as an external dependency
'@emotion/core' is imported by src/index.tsx, but could not be resolved – treating it as an external dependency
'@material-ui/icons/CategorySharp' is imported by src/index.tsx, but could not be resolved – treati
ng it as an external dependency
'@material-ui/core/Button/Button' is imported by src/index.tsx, but could not be resolved – treatin
g it as an external dependency
Writing bundle
No name was provided for external module 'react' in output.globals – guessing 'React'
No name was provided for external module '@material-ui/icons/CategorySharp' in output.globals – gue
sing 'Button'
No name was provided for external module '@material-ui/icons/CategorySharp' in output.globals – gue
ssing 'CategoryIcon'
No name was provided for external module '@emotion/core' in output.globals – guessing 'core'
No name was provided for external module '@emotion/styled' in output.globals – guessing 'styled'
Created bundle index.js: 1.08 kB → 510 B (gzip)
✨  Done in 3.37s.

Add large button

Large (rectangular) button not implemented yet, should probably add it

Components are not function components

Classes? What are you a fucking teacher?
It's time for fun, ƒun, Fun, FUN, FUN!, FUN!!!, FUNCTIONS(!!!)

Barista build could store a hash or something to avoid non-changes being built

No need to build every component on every build-all, why not store a hash or some such to skip components that have not had any changes?

Create util: tests are not runnable immediately after creation

Problem

Currently a new util doesn't include any babel config or jest as a dependency so tests cannot be run without some prior setup

Solution

Include a basic .babelrc.js file in the template and jest as a dependency

Typescript loader not configured?

I'm getting the following error when I run yarn storybook:

$ yarn storybook
yarn run v1.6.0
(node:20896) [DEP0005] DeprecationWarning: Buffer() is deprecated due to security and usability issues. Please use the Buffer.alloc(), Buffer.allocUnsafe(), or Buffer.from() methods instead.
$ start-storybook -p 9001 -c .storybook
info @storybook/react v4.1.11
info
info => Loading presets
info => Loading presets
info => Loading custom .babelrc
info => Loading custom .babelrc
info => Using base config because react-scripts is not installed.
info => Loading custom webpack config (extending mode).
webpack built f3d79389f292b1bce010 in 15699ms
× ｢wdm｣: Hash: f3d79389f292b1bce010
Version: webpack 4.29.3
Time: 15699ms
Built at: 02/20/2019 5:13:11 PM
                                          Asset      Size        Chunks                    Chunk Names
                                    iframe.html  2.25 KiB                [emitted]
            main.f3d79389f292b1bce010.bundle.js  55.8 KiB          main  [emitted]         main
        main.f3d79389f292b1bce010.bundle.js.map  33.4 KiB          main  [emitted]         main
    runtime~main.f3d79389f292b1bce010.bundle.js    31 KiB  runtime~main  [emitted]         runtime~main
runtime~main.f3d79389f292b1bce010.bundle.js.map  32.1 KiB  runtime~main  [emitted]         runtime~main
    vendors~main.f3d79389f292b1bce010.bundle.js  1.85 MiB  vendors~main  [emitted]  [big]  vendors~main
vendors~main.f3d79389f292b1bce010.bundle.js.map  1.97 MiB  vendors~main  [emitted]         vendors~main
Entrypoint main [big] = runtime~main.f3d79389f292b1bce010.bundle.js runtime~main.f3d79389f292b1bce010.bundle.js.map vendors~main.f3d79389f292b1bce010.bundle.js vendors~main.f3d79389f292b1bce010.bundle.js.map main.f3d79389f292b1bce010.bundle.js main.f3d79389f292b1bce010.bundle.js.map
[0] multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true 64 bytes {main} [built]
[./.storybook/config.js] 419 bytes {main} [built]
[./components/button/stories/index.js] 856 bytes {main} [built]
[./components/checkbox/stories/index.js] 323 bytes {main} [built]
[./components/field/stories/index.js] 1.24 KiB {main} [built]
[./components/grid/stories/index.tsx] 330 bytes {main} [built] [failed] [1 error]
[./components/ripple/stories/index.js] 1.68 KiB {main} [built]
[./node_modules/@storybook/core/dist/server/common/polyfills.js] 114 bytes {vendors~main} [built]
[./node_modules/@storybook/core/dist/server/preview/globals.js] 93 bytes {vendors~main} [built]
[./node_modules/@storybook/react/dist/client/index.js] 1.08 KiB {vendors~main} [built]
[./node_modules/airbnb-js-shims/index.js] 40 bytes {vendors~main} [built]
[./node_modules/core-js/fn/symbol/index.js] 240 bytes {vendors~main} [built]
[./node_modules/global/window.js] 232 bytes {vendors~main} [built]
[./node_modules/querystring-es3/index.js] 127 bytes {vendors~main} [built]
[./node_modules/webpack-hot-middleware/client.js?reload=true] (webpack)-hot-middleware/client.js?reload=true 7.59 KiB {vendors~main} [built]
    + 395 hidden modules

ERROR in ./components/grid/stories/index.tsx 5:30
Module parse failed: Unexpected token (5:30)
You may need an appropriate loader to handle this file type.
| import { Grid, Row, Column } from '../index';
|
> function Padded({ bg, height }: { bg: string, height?: number }) {
|   const h = !!height ? `${height}px` : '100%';
|   console.log(h);
 @ ./.storybook/config.js 4:2-49
 @ multi ./node_modules/@storybook/core/dist/server/common/polyfills.js ./node_modules/@storybook/core/dist/server/preview/globals.js ./.storybook/config.js (webpack)-hot-middleware/client.js?reload=true
Child HtmlWebpackCompiler:
                          Asset     Size               Chunks  Chunk Names
    __child-HtmlWebpackPlugin_0  558 KiB  HtmlWebpackPlugin_0  HtmlWebpackPlugin_0
    Entrypoint HtmlWebpackPlugin_0 = __child-HtmlWebpackPlugin_0
    [./node_modules/html-webpack-plugin/lib/loader.js!./node_modules/@storybook/core/dist/server/templates/index.ejs] 1.75 KiB {HtmlWebpackPlugin_0} [built]
    [./node_modules/lodash/lodash.js] 527 KiB {HtmlWebpackPlugin_0} [built]
    [./node_modules/webpack/buildin/global.js] (webpack)/buildin/global.js 472 bytes {HtmlWebpackPlugin_0} [built]
    [./node_modules/webpack/buildin/module.js] (webpack)/buildin/module.js 497 bytes {HtmlWebpackPlugin_0} [built]

OS: Windows 7 x64
yarn version: 1.6.0
lerna version: 3.13.0

Typing chores

• Make typescript default on scaffolds

Currently
shope create-<util | component> --typescript generates a TS util/component

Proposal
typescript by default
shope create-<util | component> --no-typescript generates a JS util/component

• Type ripple
• Type mergeEventHandlers
• Add scss module ambient types

Use transitions for FieldStatus

Use transition to animate field status instead of margin. With margin, the browser needs to recalculate layout on each frame.

Barista build is outputting incorrect css file

Build results in a lib/index.css rather than a lib/styles.css.
Styling is therefore not present on built components

Fix Typescript declaration file location on built components

Currently barista builds components using Typescript like this:

lib
├── index.js
└── src
    └── index.d.ts

Which is for obvious reasons VERY GROTTY and completely fingers the dev build