Migrate components (1st batch)

[zhusee2]

Purpose

Migrate components from iC-framework-react.

Components

📦 <Tag>
📦 <Icon>
📦 <TextEllipsis>
📦 <StatusIcon> (slightly modified)
📦 <FlexCell> (slightly modified)

Other implements

1. Config Webpack to handle font files with file-loader
2. Update simple documents.

Demo

[cjies]

The .scss files should placed in src/sass or src/scss folder? 🤔

[cjies]

We should add src and doc as the aliases in webpack to resolve their paths.

webpackBaseConfig = {
    resolve: {
        alias: {
            src: path.resolve(__dirname, '../src'),
            doc: path.resolve(__dirname, '../doc')
        }
    }
}

[cjies]

Just take a note here.

If we import the resources that will be actually rendered in CSS, it will be added to every imported SASS file. Maybe we can try cssnano to discard the duplicated parts.

But this suggestion is not the main scope of this PR, I will open a PR to fix this problem later.

[zhusee2]

Or I can simply move them to index.scss?

[cjies]

That's is a good idea 👍

[zhusee2]

Regarding the naming of stylesheets folder:

I think I'll just pick styles/ so it can hold all kinds of stylesheets (though we're pretty much only going to use Sass.)

[zhusee2]

Post-review changes

1. Use babel-plugin-module-resolver for module aliases.
   I choose to set alias on Babel because almost every JS file will go through Babel before they reach other tools such as Webpack or Jest.
   It's easier to maintain aliases in one single place by asking Babel to transform the import path first.

2. Rename /src/css to /src/styles
   So it can possibly hold other stylesheets in the future.

3. **Move @import "./animations" to index.scss
   So it won't duplicate if more than one file imports it.