@invisible/ui v1.14.2

UI Design System

This package contains all the reusable components for Invisible web apps. It also contains prototypes for documentation of upcoming features. Find the latest version of the documentation at https://ui.invisible-tech.now.sh/

Guidelines

Use typed functional components:

interface IComponent {
  active?: boolean
}

const Component: React.FC<IComponent> = ({ active, ...props }) => {}
// or, if using styled-components:
const Component = styled.div<IComponent>

Propagate properties:

const Component: React.FC<IComponent> = ({ active, ...props }) => <div {...props}></div>

UI Local Dev

When you need to make changes to the underlying UI package and see them locally:

There are you two methods to it, try the second method if the first doesn't work for you

First Method

1. in the packages/ui/ directory run yarn link
2. delete react and react-dom from the packages/ui/node_modules/
3. in the midgard/asgard directory run yarn link @invisible/ui
4. in the packages/ui directory run yarn build --watch

Second Method

1. in the packages/ui/ directory run yarn link
2. cd into packages/ui/node_modules/react and run yarn link
3. cd into packages/ui/node_modules/react-dom and run yarn link
4. in the midgard/asgard directory run yarn link @invisible/ui react react-dom
5. in the packages/ui directory run yarn build --watch

This creates a symlink in midgard/asgard node modules to our local ui package directory. Any changes you make here will trigger a re-build in midgard/asgard dev server.

Changes to the UI package should be committed and merged in separate pull requests so that later commits can rely on the newly published package version on NPM.