Styleguide for the CodeParticle White Label Wallet
Codeparticle's White Label Wallet Styleguide.
- React
- CSS modules
- PostCSS
- Automatically enables keyboard-online-outlines so that outlines are only shown when necessary
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
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):
``js`
{
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:
`scss`
/ src/index.scss /
@import '~@codeparticle/whitelabelwallet.styleguide/styles/index';
..or in your entry JavaScript file:
`js`
// src/index.js
import "@codeparticle/whitelabelwallet.styleguide/styles/index.scss";
4. Use the components
`js
import { Button } from '@codeparticle/whitelabelwallet.styleguide';
`
You may take a look at all the components by running the Storybook.
.`sh
$ npm start
`Starts Storybook.
$3
`sh
$ npm run build
`Builds the project.
$3
`sh
$ npm run lint
`Checks if the project has any linting errors.
$3
`sh
$ npm test
`Runs the project tests.
$3
`sh
$ 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.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.
$3
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.`js
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,
},
};
`
$3
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.Released under the MIT License.