npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@unstoppabledomains/ui-kit

v0.3.25

Published

A set of common Unstoppable Domains components

Downloads

1,605

Readme

UI Kit

A set of common Unstoppable Domains components 🧩

license npm node

Installation

Install the package in your project directory:

// with npm
npm install --save @unstoppabledomains/ui-kit

// with yarn
yarn add @unstoppabledomains/ui-kit

Note that the UI Kit has peer dependencies on the React and the React DOM. If you are not already using them in your project, you'd need to install them (either 17th or 18th versions are required):

// with npm
npm install react react-dom

// with yarn
yarn add react react-dom

You might also need to install identical versions of @types/react and @types/react-dom in the same way (in case you're using TypeScript).

Usage

Importing MUI components

All Material UI components, hooks, types, icons, lab, and colors can be re-exported from the UI Kit by using these imports, respectively:

import {Typography, useMediaQuery} from '@unstoppabledomains/ui-kit';
import type {Theme} from '@unstoppabledomains/ui-kit';
import {Edit} from '@unstoppabledomains/ui-kit/icons';
import {LoadingButton} from '@unstoppabledomains/ui-kit/lab';
import {indigo as indigoColor} from '@unstoppabledomains/ui-kit/colors';

The supported MUI imports mapping is as follows:

{
  "@mui/material": "unstoppabledomains/ui-kit",
  "@mui/lab": "@unstoppabledomains/ui-kit/lab",
  "@mui/icons-material": "@unstoppabledomains/ui-kit/icons",
  "@mui/material/colors": "@unstoppabledomains/ui-kit/colors"
}

Default MUI imports (e.g. import Select from '@unstoppabledomains/ui-kit/Select) are not supported.

@unstoppabledomains/ui-kit/styles path contains light and dark themes used on the Unstoppable Domains website, as well as some constants specific to UD, and helper functions for creating styles with the help of tss-react library:

import {
  makeStyles,
  useStyles,
  withStyles,
  lightTheme,
  darkTheme,
  MAX_PAGE_CONTENT_WIDTH,
  MAX_ARTICLE_CONTENT_WIDTH,
} from '@unstoppabledomains/ui-kit/styles'; // all supported import names at this path

For example, to render a MUI component with the Unstoppable Domains website theme applied, use the ThemeProvider with the UI Kit lightTheme or darkTheme applied:

import React from 'react';
import {ThemeProvider, Button} from '@unstoppabledomains/ui-kit';
import theme from '@unstoppabledomains/ui-kit/styles'; // lightTheme is exported as default

const App = () => {
  return (
    <ThemeProvider theme={theme}>
      <Button variant="contained>Hello World</Button>
    </ThemeProvider>
  );
}

Importing UD-specific components

Some components are very different from MUI components, in such cases they will have unique names not to conflict with MUI convention. Example: DomainSearchCard. As a result such components will be documented with Storybook with a specific set of props.

There are cases when UD & MUI components have similarities, such as Modal or Button. In such cases UD will inherit MUI component props and will extend them to support UD-specific props. New props will be documented in Storybook, with a reference to the MUI component documentation.

Development and contributing

Local development environment

Make sure you have the LTS version of Node and Yarn v1.22 installed on your local machine. Then clone this repo and run yarn install from the project root to install the dependencies.

Creating a distribution package

Once your changes in src are ready, run yarn dist from the root to create a dist folder that contains all the entities built from src.

Files important specifically for the NPM package (package.json, README.md, LICENSE, and CHANGELOG.md) are copied over to dist with this script.

The script will also build *.d.ts. types (put under dist alongside the *.js files) and storybook static files.

Publishing to npm registry

  1. Make sure to document the changes in the CHANGELOG.md file:
## 1.2.3

- Added styled Alert component
- Updated readme
  1. Update the package.json file with the new version number:
"version": "1.2.3"
  1. Create a pull request to the UI Kit with the desired changes and wait for it to be merged and published

Storybook

Storybook is installed and configured to visualize the Unstoppable Domains website components.

To run Storybook:

yarn storybook:start

This command will open up http://localhost:6006/ in your browser with the introductory page.

To create standalone HTML files for the Storybook documentation:

yarn storybook:build

Storybook is available at https://unstoppabledomains.github.io/UI-Kit.

Testing

To run the tests (src/**/*.test.tsx files):

yarn test # run all tests
yarn test:watch # run all tests in watch mode
yarn test:coverage # run all tests and generate coverage report

Linting and code formatting

yarn eslint:check # checks for linting errors
yarn eslint:fix # automatically fixes linting errors
yarn prettier:check # checks for formatting errors
yarn prettier:fix # automatically fixes formatting errors

All the files marked as "staged" via git add are automatically fixed and re-formatted with ESLint and Prettier before you commit.