matrix-artifact-react-io-ui-components v0.1.11

matrix-artifact-react-io-ui-components

Design System iO

Installation

To use dependence, execute this command:

npm install matrix-artifact-react-io-ui-components

or

yarn add matrix-artifact-react-io-ui-components

Requirements

Don't forget to read this. If you use the icons, you must install the following package for linking configurations, execute this command:

npm install react-native-svg

or

yarn add react-native-svg

Fonts

Add the fonts on your project:

module.exports = {
  project: {
    ios: {},
    android: {},
  },
  assets: ['../../assets/fonts'], // replace for your path
};

Download assets:

• Roboto Serif
• Outfit

For setup you can use this script, execute this command:

npx react-native-asset

Usage

Example of use and importance of theme:

import {
  H1,
  UITheme,
  UIThemeProvider,
} from 'matrix-artifact-react-io-ui-components';

// ...

<UIThemeProvider theme={UITheme}>
  <H1>Hello world</H1>
</UIThemeProvider>;

Testing

To run the tests, execute this script:

npm run test

or

yarn test

If you want to see the coverage of your unit tests, execute this script:

npm run test --coverage

or

yarn test --coverage

Commits

Please make sure your commit messages follow the convention stated here. For a quick look into this convention find below some of the most common formats for commit messages:

• feat: changes that introduce new component or features
• fix: changes that fix a bug (reference an issue if present)
• docs: adding or updating tests
• test: changing existing or creating new story
• chore: all changes to the repository that do not fit into any of the above categories

Make sure you add a scope to your commit messages. There are currently a few scopes that indicate the workspace(s) where the commit will be affecting.

• g: general or cross configuration
• component: change for a specific component

Here's a few examples of commit messages made to the repo:

chore(g): update README file
feat(g): add new workspace
fix(btn): update property and default value
feat(test): add test for it

Run Workspaces APP and Storybook

To run APP, execute this script:

npm run app start
npm run app android
npm run app ios

or

yarn app start
yarn app android
yarn app ios

To run Storybook, execute this script:

npm run sb start
npm run sb android
npm run sb ios

or

yarn sb start
yarn sb android
yarn sb ios

Contributing

See the contributing guide to learn how to contribute to the repository and the development workflow.

License

MIT