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.		há 3 anos
packages	Add value props, fix styling of docs page	há 3 anos
plop/templates	Update directory structure, generator code	há 4 anos
utilities	Initial commit	há 4 anos
.editorconfig	Initial commit	há 4 anos
.env.example	Add example env file	há 4 anos
.gitignore	Improve navigation on mobile	há 3 anos
.npmignore	Update ignores	há 3 anos
.prettierrc	Improve test coverage	há 4 anos
LICENSE	Add README, LICENSE	há 4 anos
README.md	Add value props, fix styling of docs page	há 3 anos
global.d.ts	Initial commit	há 4 anos
jest.config.js	Add Next.js + MDX support	há 4 anos
jest.setup.ts	Initial commit	há 4 anos
package.json	Add value props, fix styling of docs page	há 3 anos
plopfile.js	Update directory structure, generator code	há 4 anos
rollup.config.js	Update directory structure, generator code	há 4 anos
tsconfig.json	Update ignores	há 3 anos
yarn.lock	Update docs	há 3 anos

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.