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

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.