BrandwatchLtd / Axiom React
Axiom - Brandwatch design system and React pattern library
Stars: ✭ 41
Programming Languages
javascript
184084 projects - #8 most used programming language
Labels
Projects that are alternatives of or similar to Axiom React
Styleguide
The VTEX Design System and React component library.
Stars: ✭ 138 (+236.59%)
Mutual labels: styleguide, design-system, react-components, component-library
vf-core
A (primarily CSS) framework that targets needs of life science websites and services
Stars: ✭ 16 (-60.98%)
Mutual labels: styleguide, pattern-library, component-library, design-system
carbon-components-svelte
Svelte implementation of the Carbon Design System
Stars: ✭ 1,615 (+3839.02%)
Mutual labels: component-library, ui-components, design-system
smores-react
🍭 Marshmallow React components
Stars: ✭ 34 (-17.07%)
Mutual labels: react-components, component-library, design-system
nuxt-styleguide
Increase the quality and efficiency of product design and development workflows
Stars: ✭ 15 (-63.41%)
Mutual labels: styleguide, pattern-library, component-library
Awesome Ui Component Library
Curated list of framework component libraries for UI styles/toolkit
Stars: ✭ 702 (+1612.2%)
Mutual labels: ui-components, react-components, component-library
react-pluto
A package of small but beautiful React components from the planet, Pluto. 🔵 Get minimal components for your React based applications 😍
Stars: ✭ 17 (-58.54%)
Mutual labels: styleguide, react-components, design-system
Sugui Design System
A design system template for the SugUI components library based on styleguidist
Stars: ✭ 17 (-58.54%)
Mutual labels: styleguide, design-system, ui-components
design-systems
A list of famous design systems, design languages and guidelines
Stars: ✭ 403 (+882.93%)
Mutual labels: pattern-library, component-library, design-system
Uiengine
Workbench for UI-driven development
Stars: ✭ 349 (+751.22%)
Mutual labels: styleguide, design-system, pattern-library
React Weui
weui for react
Stars: ✭ 2,793 (+6712.2%)
Mutual labels: ui-components, react-components, component-library
Hiui
HIUI is a solution that is adequate for the fomulation and implementation of interaction and UI design standard for front, middle and backend.
Stars: ✭ 366 (+792.68%)
Mutual labels: design-system, react-components, component-library
core
The Pangolin.js core that drives everything.
Stars: ✭ 18 (-56.1%)
Mutual labels: styleguide, pattern-library, design-system
react-dsfr
Non-official React components of the official french Système de Design de l'État.
Stars: ✭ 48 (+17.07%)
Mutual labels: styleguide, component-library, design-system
paragon
💎 An accessible, theme-ready design system built for learning applications and Open edX.
Stars: ✭ 85 (+107.32%)
Mutual labels: react-components, component-library, design-system
sodium-ui
Sodium is a simple, modular and customizable web component library to build elegant and accessible UI pieces for your React Application.
Stars: ✭ 23 (-43.9%)
Mutual labels: component-library, ui-components, design-system
Circuit Ui
SumUp's component library for the web
Stars: ✭ 625 (+1424.39%)
Mutual labels: design-system, react-components, component-library
Styled Bootstrap
💅🏻 A styled-component implementation of Bootstrap
Stars: ✭ 154 (+275.61%)
Mutual labels: styleguide, ui-components, react-components
Vue Styleguidist
Created from react styleguidist for Vue Components with a living style guide
Stars: ✭ 2,133 (+5102.44%)
Mutual labels: styleguide, style-guide, design-system
Operational Ui
Building blocks for effective operational interfaces
Stars: ✭ 258 (+529.27%)
Mutual labels: design-system, react-components, component-library
Brandwatch design system and React pattern library
Getting started
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.
Adding the button component
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 variant="primary">
Primary
</Button>
Set a theme
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>
Packages
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 |  |
Developing
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 [email protected]:BrandwatchLtd/axiom-react.git
cd axiom
yarn
yarn start
Contributing
Note: Please don't use a fork as PR preview builds won't work. Styleguide driven development is crucial. Most changes should be visble and replicable through the style guide and, where appropriate, through design review.
Please feel free to seek help on our #axiom-clinic channel on Slack Please also checkout the CONTRIBUTING.md
Commits
Commits use the commit format from angular. Optionally you can create commits in the appropriate form by running:
npx git-cz
and then following the CLI instructions to compose the message.
Note that the project description data, including the texts, logos, images, and/or trademarks,
for each open source project belongs to its rightful owner.
If you wish to add or remove any projects, please contact us at [email protected].