cosmo-ui-components

Common React components for designing user interfaces

Installation

npm install -D cosmo-ui

This project assumes you are using a module bundler that allows you to require scss files such as webpack.

Any css created by the cosmo-ui components will be compiled into your own bundled css, and you will have the opportunity to overwrite it before it is compiled. As such, you must configure your module bundler to allow scss files to be required. It is recommended that you use webpack 2 with css modules as follows:

const extractSASS = new ExtractTextPlugin('/[name].css')

module.exports = {
    module: {
        rules: [
            {
                test: /\.scss$/,
                loader: extractSASS.extract(['css-loader?modules&localIdentName=[name]__[local]___[hash:base64:5]', 'postcss-loader', 'sass-loader'])
            }
        ]
    },
    plugins: [
        extractSASS
    ]
}

Configure the sass variables

The default variables are located at src/styles/_variables.scss. However cosmo-ui expects the client to provide it's own variables.scss file.

Cosmo-UI can only be used with a bundler that supports aliasing such as webpack.

You are expected to include a "cosmoUiVariables" alias in your webpack config which tells cosmo-ui where to find the sass variable overrides e.g.

alias: {
    cosmoUiVariables: './path/to/my/styles/folder/cosmo-variables.scss',
}

This works because behind the scenes each component will attempt to import 2 variable files:

@import "~cosmoUiVariables";
@import "../variables";

The first is an alias for your custom variables file. The second is the default fallback.

Even if you don't wish to override any of the sass variables you must still make sure this file exists. Inside the variables file, you can now modify the variables as you wish. When you overwrite a variable it's wise to remove the !default tag from the end.

Be aware - there is a key difference between this system and other component libraries like bootstrap or material-ui. With cosmo-ui you are not forced to include all the styles for every single component. If you only use the TextInput component then you will only have the styles related to that component. Nor are you forced to configure a theme such as with material-ui - you can just take a look at any of the sass variables and override them