Common front-end components for Web using the Tesseract design system, written for React. https://make.modal.sh/tesseract/web/react/common

react components web

TheoryOfNekomata fca1838487 Add value props, fix styling of docs page Add value, defaultValue, and checked props to appropriate elements. Add link to Feather Icons for the Icon component. The styling of TextInput docs has been fixed.		3 anni fa
packages	Add value props, fix styling of docs page	3 anni fa
plop/templates	Update directory structure, generator code	3 anni fa
utilities	Initial commit	4 anni fa
.editorconfig	Initial commit	4 anni fa
.env.example	Add example env file	4 anni fa
.gitignore	Improve navigation on mobile	3 anni fa
.npmignore	Update ignores	3 anni fa
.prettierrc	Improve test coverage	4 anni fa
LICENSE	Add README, LICENSE	4 anni fa
README.md	Add value props, fix styling of docs page	3 anni fa
global.d.ts	Initial commit	4 anni fa
jest.config.js	Add Next.js + MDX support	3 anni fa
jest.setup.ts	Initial commit	4 anni fa
package.json	Add value props, fix styling of docs page	3 anni fa
plopfile.js	Update directory structure, generator code	3 anni fa
rollup.config.js	Update directory structure, generator code	3 anni fa
tsconfig.json	Update ignores	3 anni fa
yarn.lock	Update docs	3 anni fa

README.md

Tesseract Design - React Common

Common front-end components for Web using the Tesseract design system, written for React.

Package:

Dependencies:

Check the documentation for more details.

Installation

This package resides primarily in the Modal.sh JavaScript Package Registry. You will need to adjust configuration in your chosen package manager.

With Yarn v.1.x, add this to your .yarnrc file:

"@tesseract-design:registry" "https://js.pack.modal.sh/"

Then, install the package by running the following command:

yarn add @tesseract-design/react-common

Usage

The package includes components as named exports. Simply import the components you need individually or use a namespace import, like so:

import * as React from 'react'
import ReactDOM from 'react-dom'
import * as T from '@tesseract-design/react-common'

const LoginForm = etcProps => (
  <form
    {...etcProps}
  >
    <fieldset>
      <legend>
        Log In
      </legend>
      <div>
        <T.TextInput
          label="Username"
        />
      </div>
      <div>
        <T.TextInput
          type="password"
          label="Password"
        />
      </div>
      <div>
        <T.Button>
          Log In
        </T.Button>
      </div>
    </fieldset>
  </form>
)

const mountNode = window.document.createElement('div')

ReactDOM.render(
  <LoginForm />,
  mountNode,
)

window.document.body.appendChild(mountNode)

Detailed usage guides can be found in the documentation linked above.

TypeScript

The package is written and tested using TypeScript. Thus, typings for consumption in TypeScript are bundled with the compiled source.

License

MIT. See the LICENSE file on the package repository for the full text.