White Label Wallet Styleguide

Codeparticle's White Label Wallet Styleguide.

Base technology

• React
• CSS modules
• PostCSS
• Automatically enables keyboard-online-outlines so that outlines are only shown when necessary

Publishing

Publishing should already be setup. Just follow these steps to publish the project:

• commit code
• run yarn run release:major, yarn run release:minor, or yarn run release:patch to bump the version and update changelog
• run yarn publish or npm publish

Setup

It's assumed that you will consume this package in an application bundled with Webpack. Follow the steps below:

1. Activate CSS modules

   Activate CSS modules for this package directory (or for your whole project if you like):

   {
       test: /\.s?css$/,
       loader: [
           {
               loader: require.resolve('style-loader'),
           },
           {
               loader: require.resolve('css-loader'),
               options: {
                   modules: true,
                   sourceMap: true,
                   importLoaders: 1,
                   localIdentName: '[name]__[local]___[hash:base64:5]!',
               },
           },
           require.resolve('postcss-loader'),
           {
               loader: 'sass-loader',
               options: {
                   includePaths: [path.join(__dirname, '../src/styles'), path.join(__dirname, 'node_modules')],
                   sourceMap: true
               }
           },
       ],
   },

2. Import base styles

   Import the styleguide base styles in the app's entry CSS file:

   /* src/index.scss */
   @import '~@codeparticle/whitelabelwallet.styleguide/styles/index';

   ..or in your entry JavaScript file:

   // src/index.js
   import "@codeparticle/whitelabelwallet.styleguide/styles/index.scss";

3. Use the components

   import { Button } from '@codeparticle/whitelabelwallet.styleguide';
   
   <Button />

   You may take a look at all the components by running the Storybook.

Commands

start

It is best to run the project on a node 10.x.x version. To prevent an issue between your node_modules and storybook, it is also recommended you install from the existing lockfile with npm ci.

$ npm start

Starts Storybook.

build

$ npm run build

Builds the project.

lint

$ npm run lint

Checks if the project has any linting errors.

test

$ npm test

Runs the project tests.

release

$ npm run release

Releases the package. Runs tests, lints and builds the project beforehand. If successful, you may publish the release to npm by running $ npm publish.

This command uses standard-version underneath. The version is automatically inferred from the conventional commits.

Using a linked version of whitelabelwallet.styleguide

In some cases, you may want to make changes to the whitelabelwallet.styleguide at the same time as you work on your project which uses the whitelabelwallet.styleguide. In order to use a local version of whitelabelwallet.styleguide and have any whitelabelwallet.styleguide modifications be reflected live on your project, some pages have to be made in your main project.

Some of the instructions below assume you are using Webpack in your main project.

Make required changes to your Webpack config

Before exporting the webpack configuration, add the following line to the file. This will check if there is a linked version of whitelabelwallet.styleguide and add aliases to import from the un-compiled files.

const fs = require('fs');
const existsReactStyleGuideSrc = fs.existsSync(path.join(projectDir, 'node_modules/@codeparticle/whitelabelwallet.styleguide/src'));
const alias = {};

if (process.env.NODE_ENV === 'development' && existsReactStyleGuideSrc) {
  alias['@codeparticle/whitelabelwallet.styleguide/styles'] = path.join(paths.appNodeModules, '@codeparticle/whitelabelwallet.styleguide/src/styles');
}

module.exports = {
  resolve: {
    alias,
  },
};

Link whitelabelwallet.styleguide to your main project

Delete the folder at node_modules/@codeparticle/whitelabelwallet.styleguide and link the projects by running npm link ../pathToReactStyleGuide inside the root directory of your project project. NOTE: this step has to be retaken every time you run an npm i or yarn commands in your main project, because npm i will replace your linked version with an installed version.

License

Released under the MIT License.