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

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.