Installation

We do not enforce any modules and as a result you need to install them specifically for your project. We assume that most modules already exist in your project.

yarn add mobx mobx-react mobx-state-tree mst-middlewares react react-dom
yarn add dynamic-form-semantic-ui

Cosmos

.babelrc

{
  "presets": ["@babel/env", "@babel/preset-typescript", "@babel/react"],
  "plugins": [
    ["@babel/plugin-proposal-decorators", { "legacy": true }],
    ["@babel/plugin-proposal-class-properties", { "loose": true }],
    "@babel/proposal-object-rest-spread"
  ]
}

packages

yarn add @babel/core @babel/preset-env @babel/preset-react @babel/preset-typescript babel-loader style-loader css-loader html-webpack-plugin @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties @babel/proposal-object-rest-spread

cosmos.config.js

module.exports = {
  next: true,
  rootPath: './src',
  globalImports: ['semantic-ui-css/semantic.min.css'],
  webpack: (config, { env }) => {
    // Return customized config
    return {
      ...config,
      resolve: {
        extensions: [...config.resolve.extensions, '.ts', '.tsx']
      },
      module: {
        ...config.module,
        rules: [
          ...config.module.rules,
          {
            test: /\.tsx?$/,
            loader: 'babel-loader'
          },
          {
            test: /\.(woff(2)?|ttf|eot|svg|jpg|png)(\?v=\d+\.\d+\.\d+)?$/,
            use: [
              {
                loader: 'file-loader'
              }
            ]
          }
          // {
          //   test: /\.js$/,
          //   use: ['source-map-loader'],
          //   enforce: 'pre'
          // }
        ]
      }
    };
  }
};