Legalesign Components Library for React

This repository is a StencilJS project that builds a component library built by Legalesign which can be exported to a React project. There is a web-components version of the library which can be used in any frontend framework project - legalesign-ui and a React specific one - legalesign-ui-react. This README is for the React version of the library.

Languages

Generally speaking, pages should be built and tested using StencilJS language and TypeScript(tsx) where that is allowed.

Folder Structure

/___tests___
/dist
/lib
    /components
    /stencil-generated
        components.ts
package.json
README.md
tsconfig.json

Development

Development of the React output target is done via legalesign-ui project's configuration file - stencil.config.ts. For more info: https://stenciljs.com/docs/react

Publish to NPM

N.B. Before publishing to NPM, make sure to upgrade the main stencil library - legalesign-ui. This can be done by running the following command:

pnpm install legalesign-ui@latest

This will upgrade the main stencil library to the latest version.

To publish the package to NPM, run the following command:

pnpm publish

This will publish the package to NPM with the version specified in package.json. Make sure to update the version number before publishing.

Usage

To use the components in your project, you should install legalesign-ui-react npm package. This can be done by running:

npm install legalesign-ui-react
pnpm install legalesign-ui-react

Then it will get added to your package.json file:

  "dependencies": {
    "legalesign-ui-react": "^0.0.1"
  }

To use the components in your project, you should import the component you want to use from the package. For example:

import { LsButton } from 'legalesign-ui-react';

const App = () => {
  return (
    <div>
      <LsButton variant="destructive" text="click me" />
    </div>
  );
};

Storybook

All components are documented in Storybook. To check them out, follow the link: https://ui.legalesign.io/