Getting Started

Kyper is the MX Design System for application styles and components. This component library was built to be flexible with each project it is used in. There are some foundational steps including installing dependencies and adding configuration files in order to get a project up and running with Kyper.

Why?

Each project that consumes Kyper components is responsible for including Kyper into the existing transpilation and build process for that project. This extra step allows each project to customize the transpilation target, include any custom optimizations, and allows for easier modular builds. It also allows source maps for the Kyper components to be included in the final build.

Dependencies

npm install --save-dev @babel/core @babel/preset-env @babel/preset-react babel-loader webpack

Component-dependent Dependencies

Note: The below plugins are only required if using babel-env 7.7.7 or earlier

npm install --save-dev @babel/plugin-proposal-nullish-coalescing-operator @babel/plugin-proposal-optional-chaining

babel.config.js

Two presets (@babel/env and @babel/preset-react) will need to be added to the Babel config:

module.exports = {
   ...
   presets: [
      ...
      '@babel/env',
      '@babel/preset-react'
   ],
}
Copy

Depending on if it's necessary for the component, a few plugins may need to be added as well:

module.exports = {
   ...
   plugins: [
      ...
      '@babel/plugin-proposal-nullish-coalescing-operator',
      '@babel/plugin-proposal-optional-chaining'
   ],
}
Copy

webpack.config.js

Webpack will need to be configured with the appropriate loaders for the Kyper components:

module.exports = {
   ...,
   module: {
      rules: [
         ...,
         {
            test: /\.js$/,
            include: path.resolve(__dirname, 'node_modules/@kyper/'),
            exclude: [/__tests__/],
            loader: 'babel-loader',
            query: {
               presets: ['@babel/preset-react']
            },
         },
      ],
   },
}
Copy

jest.config.js

A transform pattern will also need to be added to the jest config:

module.exports = {
   ...,
   transformIgnorePatterns: ['/node_modules/(?!(@kyper)/).*/'],
}
Copy

Testing Kyper

Storybook Testing

See QA Process for Kyper

Testing Components in a Local Repo

npm link enables us to develop our modules and test them locally

npm link does this by creating a symbolic link between the local module and the main project's node_modules.

The following will need to be added to your webpack file:

module.exports = {
  ...,
  resolve: {
     symlinks: false,
  },
}
Copy

Linking your component to your project

Inside component directory i.e. /packages/componentname

npm link

Inside root directory of your project

npm link @kyper/componentname

Your component should now be linked to your project. If you check the @kyper/componentname folder in your node_modules you should now see your changes. Now, when you make any changes to files in your component folder, they will update in your linked project.

Using Kyper with CRA

Update Package.json

You also need to update the "scripts" section to use react-app-rewired

"start": "react-app-rewired start",
"build": "react-app-rewired build",
"test": "react-app-rewired test",
"eject": "react-scripts eject"
Copy

Install Dependencies

npm install --save-dev react-app-rewired customize-cra @babel/core @babel/preset-env @babel/preset-react

Note: Due to some peer dependency issues you may have to --force install.

Add config-overrides.js at the Root Level

// Overrides create-react-app webpack configs without ejecting
// https://github.com/timarney/react-app-rewired

const { override, useBabelRc, addWebpackModuleRule } = require("customize-cra");
const path = require("path");

module.exports = override(
  useBabelRc(),
  addWebpackModuleRule(
    {
      test: /\.js$/,
      include: path.resolve(__dirname, 'node_modules/@kyper/'),
      exclude: [/__tests__/],
      loader: 'babel-loader',
      options: {
         presets: ['@babel/preset-react']
      },
    },
  )
)
Copy

Add a .babelrc file at the Root Level

{
  "presets": [
     "@babel/env",
     "@babel/preset-react"
  ]
}
Copy

That's all the setup required for using Kyper in a CRA app. Now you can install kyper components and include them in react files.