@smartcow/design-system-components v1.0.8
SmartCow Design System
A collection of React components based on Design Library System 2.0
Visit the Roadmap board to view the high-level objectives for the SmartCow Design System. To check on issues currently being completed, view our Tactical board instead.
Releases & versioning
All packages are published to the NPM registry and we adhere to semantic versioning.
Supported technologies
The following view layer libraries are currently supported:
- React
- Mantine
Component usage guidelines
Please refer to the component demo pages and Storybook to see interactive examples, code snippets and details on how best to consume each of the components.
Installation & quick start
Installation
To install and save to your project's package.json dependencies, run:
# with npm
npm install @smartcow/design-system-components
# ...or with yarn
yarn add @smartcow/design-system-components
Quick start
Here's a quick example application to get you started:
import React from 'react';
import ReactDOM from 'react-dom';
import { MantineProvider, Button } from '@smartcow/design-system-components';
function App() {
return (
<MantineProvider>
<Button variant="primary">Hello, World!</Button>
</MantineProvider>
);
}
ReactDOM.render(<App />, document.querySelector('#app'));
Run locally
You'll need Git and Node.js installed to get this project running.
Note: You will need the active LTS (Long-term support) Node.js version for this project (as specified in .nvmrc)
Fork repository (optional)
If you're an external contributor make sure to fork this project first
Clone repository
git clone git@smartcow.dev:SmartCow/design-system-components.git # or clone your own fork
cd design-system-components
Using nvm (optional)
If you work across multiple Node.js projects there's a good chance they require different Node.js and npm versions.
To enable this we use nvm (Node Version Manager) to switch between versions easily.
- Install nvm
- Run
nvm install
in the project directory (this will use .nvmrc)
Scripts
The top level project contains scripts that are then executed for all packages.
lint
Checks syntax and simple errors in javascript files.build
Runs the build script in all packages.
Git hooks
Git commit hooks trigger linting of all staged files when a change is committed.
Prettier
We have configured a set of Prettier options to enforce consistent code formatting.
Browser support
The SmartCow Design System currently supports all major evergreen browsers.
Licensing
The @smartcow/design-system-components is licensed under the Apache License 2.0.
Contributing
Read the contributing guidelines.
Thanks
We use Chromatic for visual regression testing.