medbelle-ui-v6 v6.0.0-alpha.38

MEDBELLE-UI

Shared UI components library for Medbelle projects.

Installation

npm i -S @medbelle/medbelle-ui

Usage

import React from 'react';
import { Text, Title } from '@medbelle/medbelle-ui/Typography';
import ChatBubble from '@medbelle/medbelle-ui/ChatBubble';

const MyComponent = props => {
  return (
    <ChatBubble>
      <Title rank={2}>Title</Title>
      <Text>Body</Text>
    </ChatBubble>
  );
};

Contents

Components

You can see list of available components and their usage at: https://styleguide.medbelle.com/

Theming

• ThemeProvider - you need to wrap your root component with theme provider in order to create context for library components styling.

import ThemeProvider from '@medbelle/medbelle-ui/ThemeProvider';

const Root = () => (
  <ThemeProvider>
    <MyApp />
  </ThemeProvider>
);

• Fonts - you need to import any custom fonts used for the theme:
  • Add a <link rel="stylesheet" type="text/css" href={theme.typography.fontImportLink} /> to your head to import the fonts
  • You also need to enable font kerning in your CSS settings by publishing the output of getDefaultFontOptimisation() from the theme in your body styles.

Constants

• ThemeProvider - you need to wrap your root component with constants provider in order to create context for library constants (texts, messages, icons and etc).

import ThemeProvider from '@medbelle/medbelle-ui/constantsProvider';

const Root = () => (
  <ThemeProvider>
    <MyApp />
  </ThemeProvider>
);

Learn more about constants

Helper methods

See Helper methods readme

Library development

Tools

• styled-components - is used for components styling.

Styleguide

Storybook is used to create styleguide site - https://styleguide.medbelle.com/.
For each exportable component storybook page should be created.

Linting

Eslint + Prettier are used to make code style consistent.
There is pre-commit hook via husky + lint-staged for eslint and prettier to run against staged files.
You may run eslint manually using next command:

npm run lint

Testing

For testing purposes storyshots is used which snapshots all component's stories using Jest. Tests run on preversion hook. To run test manually use following command:

npm run test

Running it locally

From library root directory

• yarn build will build the library into /dist
• cd dist/
• yarn link will register the package

In medbelle-next root directory

• yarn to update/install all the necessary libraries
• yarn link "@medbelle/medbelle-ui" will create a symlink named medbelle-next/node_modules/@medbelle/medbelle-ui that links to your local copy of the medbelle-ui project.

To reverse this process, simply use yarn unlink or yarn unlink "@medbelle/medbelle-ui"

Be aware that react gets messy when you run multiple versions of it at the same time. To avoid this, follow the instructions here: https://github.com/facebook/react/issues/14257#issuecomment-595183610

You need to be aware you need to rebuild on every change you made in medbelle-ui, but you are not required to run yarn link again, you'll also need to stop the current local server from medbelle-next and start it again.

Publishing

Before publishing a new version please use npm version [patch|minor|major] to add a new version and then use npm publish dist in order to only publish the dist directory.