Allan Crisostomo 6a12d9c524 | 3 years ago | |
---|---|---|
packages | 3 years ago | |
plop/templates | 4 years ago | |
utilities | 4 years ago | |
.editorconfig | 4 years ago | |
.env.example | 4 years ago | |
.gitignore | 3 years ago | |
.npmignore | 4 years ago | |
.prettierrc | 4 years ago | |
LICENSE | 4 years ago | |
README.md | 3 years ago | |
global.d.ts | 4 years ago | |
jest.config.js | 4 years ago | |
jest.setup.ts | 4 years ago | |
package.json | 3 years ago | |
plopfile.js | 4 years ago | |
rollup.config.js | 4 years ago | |
tsconfig.json | 4 years ago | |
yarn.lock | 3 years ago |
Common front-end components for Web using the Tesseract design system, written for React.
Package:
Dependencies:
Since this package resides in the Modal.sh JavaScript Package Registry, you may need to adjust configuration in your chosen package manager.
With Yarn, 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
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
block
label="Username"
/>
</div>
<div>
<T.TextInput
block
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 Tesseract Design - React Common documentation.
The package is written and tested using TypeScript. Thus, typings for consumption in TypeScript are bundled with the compiled source.