@open-raven/react-styleguide v0.18.2
openraven
openraven.
Base technology
- React
- CSS modules
- PostCSS
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
The publishing will be automatically done to CP's jfrog repo based on the config found in the .npmrc
file.
Important
- Make sure you are signed in before publishing or it won't work. Run
npm adduser
to sign in. Credentials can be found here. - Copy the
.npmrc
file to a new project in which you will install this package. That way you fetch the package from the correct repo when doingnpm install
oryarn install
.
Setup
It's assumed that you will consume this package in an application bundled with Webpack. Follow the steps below:
Activate SVGR Module
SVGR Add this config to webpack.config
{ test: /\.svg$/, use: ['@svgr/webpack', 'url-loader'], },
Import base styles
Import the openraven base styles in the app's entry CSS file:
/* src/index.scss */ @import '~@open-raven/react-styleguide/styles/index';
..or in your entry JavaScript file:
// src/index.js import "@open-raven/react-styleguide/styles/index.scss";
Use the components
import { Button } from '@open-raven/react-styleguide'; <Button />
You may take a look at all the components by running the Storybook.
Commands
start
$ 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 openraven
In some cases, you may want to make changes to the openraven at the same time as you work on your project which uses the openraven. In order to use a local version of openraven and have any openraven 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 openraven
and add aliases to import from the un-compiled files.
const fs = require('fs');
const existsReactStyleGuideSrc = fs.existsSync(path.join(projectDir, 'node_modules/@open-raven/react-styleguide/src'));
const alias = {};
if (process.env.NODE_ENV === 'development' && existsReactStyleGuideSrc) {
alias['@open-raven/react-styleguide/styles'] = path.join(paths.appNodeModules, '@open-raven/react-styleguide/src/styles');
}
module.exports = {
resolve: {
alias,
},
};
Link openraven
to your main project
Two steps:
1) run npm link
in this repo
2) update dependent projects by running npm link ../pathToThisRepo
inside the root directory of your other projects.
3) when you make a change here that you want to see reflected, you will need to run step 2 again unless you've made the webpack changes for live development.
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.
Style Guide Usage
Clone to new project
Follow the instruction below to clone the starter to a new project repo.
Note: we should keep the commit history in the new repo for future rebase.
- Create a new project repo in bitbucket
- Clone
react-web-starter
repo locally, andcd path/react-web-starter
- Run
git remote remove origin
- Run
git remote add origin [new repo url]
- Run
git push origin master -u
- Verify: should see all the commits history and master branch in new project repo
- Re-clone
react-web-starter
repo or reset it's origin if you need to develop against it locally
Rebase your project style guide to include latest changes
- Create a new branch in your project style guide
- Run
git remote add starter git@bitbucket.org:CodeParticle/openraven.git
(The url can be https) - Run
git fetch starter
- Run
git rebase starter/master
- Push the branch and open the PR for team review/test before merging
License
Released under the MIT License.
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago
4 years ago