app-ui

The UI components and storybooks for our web application's UI

Compiling Styles

Similar to ant.design, our app-ui library has been built so that you can simply modify Less variables in order to customize the library.

The all the components within the lib directory (exported by default by the index of this package) will include the necessary Less files to fully build the styles of our library.

Oppositely, the componentsof the ss directory (not exported by the index, requiring explicit imports) do not include any Less files and are primarily designed to be used in server-side rendering of the components.

To include the styles on the client side, within your Webpack config include the following, or flavor of the following, rule:

const appUiLessOptions = require('@serverkeeper/app-ui/less-options');

rules: {
  ...,
  {
    test: /\.less$/,
    use: [
      'style-loader',
      'css-loader',
      {
        loader: 'less-loader',
        options: {
          lessOptions: appUiLessOptions,
        },
      },
    ],
  },
}

Be sure to note the require('@serverkeeper/app-ui/less-options') which will provide you with the default Less options for the library.

Note: This requires that less-loader, css-loader, and style-loader all be installed.

Should you need/want to customize the Less options (ex. adding a modifyVars statement to override a variable), simply combine your custom options with the appUiLessOptions.

lessOptions: {
  ...appUiLessOptions, 
  modifyVars: {
    ...appUiLessOptions.modifyVars,
    'my-example-color': '#ffffff',
  },
}

Server-Side Rendering

SSR for app-ui components is a little tricky largely because of the included Less requires included by default in the library's built code. Without any configuration, using Babel to transpile your server's code will result in errors when the components attempt to require their Less files...

Since styling is done on the client side for this library, Webpack will build and include the necessary .css files including tree-shaking features for components which are not used. As a result, we can simply ignore the .less require statements within our React as it's being rendered server side.

To accomplish this we'll use ant.design's own babel-plugin-import. It was built to solve this problem with ant.design by automatically including the Less files for their components, or alternatively, rewriting the Less requires with css instead.

You can add the following snippet to your Babel config when transpiling your server code:

plugins: [
 ['import', { libraryName: 'antd', style: null }]
]

Note: Make sure to have babel-plugin-import installed before using the above snippet.