@toniq-labs/design-system-react
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

Toniq Labs Design System

Reusable elements for Toniq Lab's websites. All elements are implemented as native custom elements using element-vir.

React wrappers for all elements also included and are importable through @toniq-labs/design-system-react/dist/esm/elements/react-components. (If you need CommonJS imports, replace esm with cjs in that import line.) See ./test-files/react-elements-package for a usage example of these React wrappers.

Usage

npm i @toniq-labs/design-system-react

importing into React

Import React-wrapped versions of each component from dist/esm/elements/react-components:

import {ToniqIcon} from '@toniq-labs/design-system-react/dist/esm/elements/react-components';
import {Copy16Icon} from '@toniq-labs/design-system-react'


function myComponentFunction() {
    return (
        <>
            <ToniqIcon icon={Copy16Icon} />
        </>
    );
}

Dev

Make sure that:

  • you're on Node.js version v16.15.0. So far, later versions of v16.15 have massive issues running npm install for this repo.

  • you run npm install first.

  • Run tests:

    # run all native element tests
    npm test
    # run all complex script tests
    npm run test:scripts
    # run ALL tests, including formatting and spellchecking
    npm run test:all
  • Run Storybook:

    npm start
    
  • Build for publishing:

    npm run build
    
  • Adding new dependencies: The peer dependencies between our deps are messed up (thanks, React), so if you see a bunch of ERESOLVE overriding peer dependency errors, try using the --force flag: npm i --force <package-name>

Package Sidebar

Install

npm i @toniq-labs/design-system-react

Weekly Downloads

1

Version

1.0.0

License

MIT

Unpacked Size

5.62 MB

Total Files

617

Last publish

Collaborators

  • crisdelli
  • ponnexcodev
  • stephenandrews