One.ui 0.1.1

This is a common UI react library developed for the use of one.core inside react applications.

In general

• Download and install
  • node.js
  • git
• A Github account authenticated with a ssh key pair
• Access to
  • github.com/refinio/one.core
  • github.com/refinio/one.models

git clone https://github.com/refinio/one.ui
cd one.ui
npm install
Copy

How to add a new component to the library

Inside src/ui create a new folder with the component name, then develop your component there. After that, make sure you import and export it in ./index.ts.

To add a style design, add a new CSS file with the component name in src/ui/styles. If there is a global style, that should apply in many components, please add those CSS rules in the Primary.css file.

If the component should contain text, then it will need internationalization. All texts must be added to a json file in the locales directory, this being used for internationalization.

Storybooks are used to view the components of the React library. There you can see how the component looks like in the browser, but also its documentation and how it can be imported into another project.
To create a story for the new component, add a new file in stories directory with {name}.stories.tsx extension.

Here is a simple example of Button.stories.tsx file content:

import React from 'react';

import {ComponentMeta} from '@storybook/react';

import {Button} from '../src/ui/customFolder/Button';

export default {
    title: 'Button',
    component: Button
} as ComponentMeta<typeof Button>;
Copy

This will allow the storybook library to pick the file and create the documentation/visualisation for the new component. Read more https://storybook.js.org/docs/react/writing-stories/introduction.

Available Scripts

In the project directory, you can run:

npm run storybook

Runs the storybook in the development mode.
Open http://localhost:6006/ to view it in the browser. Also, storybook can run on your network [http://:6006/], but be aware that webcrypto cannot run without https.

The page will reload if you make edits.
You will also see any lint errors in the component story.

npm storybook-outside-network

Runs the storybook in the development mode outside of local network in https which is required by one.core. Requires running ./development_certs/generate.sh Note: requires openssl

npm run build

Builds the app for production to the lib folder.
The build contains the .d.ts, .d.ts.map and .js files for each component, but also all the resources necessary for each component to work properly.

npm test

Runs all the Jest tests, and the result will be seen in the Terminal.

npm run build-storybook

Builds the storybook static files inside public folder.