TrueHome UI

React components made for truehome

Developing a new component

All components have the following structure:

ComponentName
- ComponentName.jsx # React Component
- ComponentName.css # Component Styles
- stories.jsx       # Component stories for storybook
- tests.js          # Not yet implemented but they will be

And they will be exported on src/index.js to be importable from other projects.

Running storybook

This project is build using storybook. This will allow to visualize and create the components on a graphical interface inside the browser. To start

npm run storybook

This will open a browser with storybook running. After you make a change and save it, and storybook will reload.

Building and publishing

To build the artifacts for publishing the NPM package run

npm run build

To publish them you should bump the package.json version and after that run

npm run release

Working locally with another project

You can link this project and enable it to use for another local projects you are working with. To start

npm link

inside this project path. This will create a local link to this project so you can pseudo-install it from another one.

Then, inside the other project path, run

npm link @truehome/ui

This will link it as if it's a remote project.

Bugs when trying to run with a linked project

Thanks to a current NPM bug regarding symlinks, to avoid link problems, you need to link local project react to th-ui react. Inside this project directory run

ln -fs /local/path/of/other/project/node_modules/react react

If react is already present, remove it and link it again

Install it as a dependency

To use a published version, use

npm install @truehome/ui

And import whatever component you will be using inside your project

import { Button } from "@truehome/ui";
...
	<Button prop={prop} />
...

Commit message guidelines

Using standard commit messages allows us to use a myriad of tools to automate different tasks that should be manually made otherwise. The commit format is:

<type>: <description>

[optional body]

[optional footer]

The type can have the following values:

• Fix: Small changes on any file
• Update: Small changes on any file
• New: Implementing new components
• Breaking: Big change that will break the previous version.

Any other commit type will be ignored by the tools and will not trigger any actions.

More about this can be read on conventionalcommits