Mudita Space Design System

A React based library for components and predefined styles used in Mudita products like Mudita Cloud.

All the currently available components can be seen on our Storybook. It's a kind of visual guide and documentation.

Usage

Install @mudita/space-design-system package:

npm install --save @mudita/space-design-system

Install additional dependencies:
- react in version 17 or higher
```
npm install --save react
```
- styled-components in version 5 or higher
```
npm install --save styled-components
```

Use the ThemeProvider from the package:

import { MuditaThemeProvider } from "@mudita/space-design-system"

ReactDOM.render(
  <MuditaThemeProvider>
    <App />
  </MuditaThemeProvider>,
  document.getElementById("root")
)

Now you can use the library freely:
```
import { Button } from "@mudita/space-design-system"

const SomeComponent = () => (
  <Button>
    Click me!
  </Button>
)
```
CJS, ESModules, and UMD module formats are supported.

Fonts

The basic Mudita's font is Facto but it's not open sourced, so we can't provide it to you. Instead, there is a very similar font used as a fallback - Arial. However, you can still attach a Facto font to your project if you own it.

Then, you just need to import the CSS file in your main app's component:
```
// index.tsx

import "./path/to/font/style.css"

ReactDOM.render(...)
```
The Facto font has bigger priority, so no additional actions are required. It will be immediately displayed instead of other fonts.

Development

Installation

Install dependencies:
```
npm install
```
Install Facto font (optional):
1. add FONTS_DIRECTORY_URL and GITHUB_ACCESS_TOKEN environment variables to your repo with given font
2. run font downloading script:
```
npm run fonts:download
```
Note: Please make sure you entered FONTS_DIRECTORY_URL in a proper format (refer to troubleshooting section).

Local testing

Make appropriate changes.
Increase package version manually (only in package.json file).
Build the package:
```
npm run build
```
Pack the library into a tar package:
```
npm pack
```
In your project that consumes this library, instead of version number in dependencies for @mudita/space-design-system package put the path to the already generated .tar file:
```
"@mudita/space-design-system": "file:../space-design-system/mudita-space-design-system-X.Y.Z.tgz",
```

Reinstall the updated package:

npm install @mudita/space-design-system

Depending on your project's setup, rebuild it or reload the page to apply changes.

More information and different methods of developing and testing packages locally can be found in this awesome article.

Release flow

Make appropriate changes.
Rebuild the package:
```
npm run build
```
Increase package version:
```
npm version <version>
```
Note: For version 0.0.31 the command will be npm version 0.0.31. We are using semantic versioning.
Publish the package to the NPM registry:
```
npm publish
```

Commit and push changes (with updated version) to the repo:

git add .
git commit -m "Updated to version x.y.z"
git push -u origin master

Troubleshooting

Authentication error while downloading fonts (npm run fonts:download).

Solution: Please make sure you have the following envs added in the .env file:
```
GITHUB_ACCESS_TOKEN=
FONTS_DIRECTORY_URL=https://raw.githubusercontent.com/<username | organisation name>/<repo name>/<branch name>/<path to directory with font files>
```
Note: The token should have granted at least repo scope and be able to access the repository defined in FONTS_DIRECTORY_URL env.

Bundle analysis

Calculates the real cost of your library using size-limit with npm run size and visualize it with npm run analyze.