axiom-react: https://github.com/Binarytales/axiom-react
If you have forked this repository we recommend updating your remotes or even removing your fork and reforking the axiom-react repository.
Bug fixes will need to be replicated across both repositories until we have publishing from this now private repository set up correctly. If you have any problems as a result of this change please seek help in #axiom-contrib on Slack
Brandwatch design system and React pattern library
The best way to consume Axiom-React is with the npm package.
First install which part of Axiom you need - Refer to the Packages table for more information about what is within each package.
npm i @brandwatch/axiom-components --save
import { Button } from '@brandwatch/axiom-components';
You can now use the button component - To see how this can be styled and configured see Button
<Button style="primary">
Primary
</Button>
Axiom needs to run in one of two themes, day or night.
The class of ax-theme--day or ax-theme--night should be applied to either <html>, <body>, or an app encompassing <div>
This is the monorepo for Axiom packages.
| package | description | version |
|---|---|---|
| axiom-automation-testing | Provides IDs and selectors for targeting Axiom internal elements for Automation testing |  |
| axiom-charts | Provides Axiom charting and data visualisation React components |  |
| axiom-components | Provides core Axiom components for building Brandwatch UIs |  |
| axiom-composites | Provides Brandwatch contexutal components, comprising of Axiom components and materials. |  |
| axiom-documentation-loader | Webpack loader for extracting React component prop types and descriptions. |  |
| axiom-documentation-viewer | Provides React components for displaying, testing and viewing React components in configurable states. |  |
| axiom-formatting | Axiom resources for formatting dates and numbers |  |
| axiom-localization | Resources for helping out with localizations |  |
| axiom-materials | Low level resources, like colours and sizing variables to help build components |  |
| axiom-utils | Helpful javascript utilities |  |
| babel-plugin-axiom-imports | An Axiom specific babel plugin that transforms and removes unused Axiom exports. |  |
| babel-plugin-transform-svg-axiom | A babel plugin that recolours, optimises and inlines SVG files |  |
| eslint-config-axiom | eslint configurations used by Axiom and some other Brandwatch applications |  |
| stylelint-config-axiom | stylelint configurations used by Axiom and some other Brandwatch applications |  |
Axiom uses lerna and yarn workspaces to manage the various packages. To get up and running developing locally, you need the lerna cli. We're using the latest stable Node.js release.
git clone git@github.com:BrandwatchLtd/axiom-react.git
cd axiom
yarn
yarn start
Please checkout the CONTRIBUTING.md but basically we use the conventional commit format (google it) to handle automatic publishing, check tests and add them where appropriate and check linting.
Styleguide driven development is crucial. Most changes should be visble and replicable through the style guide and, where appropriate, through design review.