DEV storybook docker build is broken

[MrOrz]

See:
https://dev.cofacts.org/storybook/index.html?path=/story/*

Root cause

• In 20200827 release #323 we are adding new components like TimeInfo to the storybook. It requires process.env.LOCALE.
• Storybook only support custom variables with STORYBOOK_ prefix
  • It is not practical to use such prefix because it requires us to change everywhere using the environment variable
• Storybook actually loads .env file during build
  • Related code: https://github.com/storybookjs/storybook/blob/c831408b26bc1faabe44ab4b09ed13d953a18f84/lib/core/src/server/manager/manager-webpack.config.js#L99-L104
    • It is using dotenv-webpack without reading env vars (not setting systemvars flag) to add process.env.xxx to DefinePlugin
    • It is also using its own mechanism to load env from .env and process.env and populate process.env using DefinePlugin
    • 貴圈真亂
  • This is why it's not breaking local storybook build, only occurs in Docker builds, where there is no .env file.

Proposed fix

There are multiple ways to fix:

1. Copy .env.sample to .env in Dockerfile before build-storybook

• Pros: easy to achieve
• Cons: due to how storybook handles process.env and process.env.XXX, this may cause weird inconsistency in the two DefinePlugin.
  • Result webpack config (using --debug-webpack flag):

2. Write `LOCALE` to `.env` file in Dockerfile before `build-storybook` - Pros: contents of both `process.env` and `process.env.XXX` will be consistent, since they are all reading from .env file - Cons: we must add manually for each env vars to add to storybook build

[MrOrz]

Resolved in #484