Hypersign UI (Component Library)

This project contains React components, icons, and typography for building applications across Hypersign.

Development

Local usage

In order to import this package locally, you must first link it to the project you are working on. To link the project, first run the npm install command to make sure all dependencies are installed.

Register the package

In the directory for this package, run the following to register this package as a linkable package. npm link or yarn link

This will register the hypersign-ui package as a globally linkable package.

Link to your project

Now, move over to your target package. (i.e. whatever will be using hypersign-ui).

Link hypersign-ui to your target package by running: npm install ../path/to/your/package or yarn add link:../path/to/your/package

Handle import alias resolutions to your project

In order to properly import hypersign-ui into your project, you will need to tell vite where to look. We can do this by adding the following to the vite.config.ts file in the target project.

resolve: {
    preserveSymlinks: true,
    alias: {
      '@hypersign-dev/hypersign-ui': resolve(__dirname, '../../hypersign-ui/src')
    }
  },

Be sure to update the ../../hypersign-ui/src to the relevant path according to your individual file structure.

Storybook

We are currently using Storybook for development and testing of components.

• Be sure to install dependencies with npm install
• Run the Storybook server with npm run storybook
• Running the Storybook server will also run npm run storybook:css, which overrides the index.css file with any used tailwind classes in the project. This is necessary for all styles to take effect.

Also, TailwindCSS is being used for all styling. Within Hypersign UI, all styling with Tailwind classes are prefixed with ui-:

<div className="ui-flex ui-flex-col ui-gap-1">...</div>

Deployment

We're working on it!

This is getting updated as we move the package from npm.js to AWS CodeArtifact.

Authentication

Open a terminal and run npm login

You will be prompted for you username, password, and email.

Validate your identity by running npm whoami

Deployment

Update the version number and run npm run build or yarn run build

Deploy the package to npm. Currently, the project is flagged as public, but that will be fixed in later versions.

npm publish --access public

The --access public argument is required because the package is a scoped package.

Validation

Navigate to npm.js

Search for @hypersign-dev/hypersign-ui

Validate that the version number you deployed is the latest version.