README
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
, oryarn run release:patch
to bump the version and update changelog - run
yarn publish
ornpm publish
Setup
It's assumed that you will consume this package in an application bundled with Webpack. Follow the steps below:
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 } }, ], },
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";
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,
},
};
whitelabelwallet.styleguide
to your main project
Link 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.