@@ -1,39 +1,7 @@
# Tesseract Design - React Common
# Tesseract Design - React Common
Common front-end components for Web using the [Tesseract design system](https://make.modal.sh/tesseract/design), written for [React](https://reactjs.org).
Package:
[![@tesseract-design/react-common](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=package&color=C78AB3&kind=name)](https://js.pack.modal.sh/-/web/detail/@tesseract-design/react-common)
[![Version List](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=package&color=C78AB3&kind=version)](https://js.pack.modal.sh/-/web/detail/@tesseract-design/react-common#versions)
Dependencies:
[![React](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=react&kind=peerDependencies)](https://github.com/facebook/react)
[![Styled Components](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=styled-components&kind=peerDependencies)](https://github.com/styled-components/styled-components)
[![TypeScript](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=typescript&kind=devDependencies)](https://github.com/microsoft/typescript)
[![Jest](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=jest&kind=devDependencies)](https://github.com/facebook/jest)
[![Rollup](https://code.modal.sh/badge?repo=tesseract-design/react-common&type=dependency&dependency=rollup&kind=devDependencies)](https://github.com/rollup/rollup)
Check the [documentation](https://make.modal.sh/tesseract/web/react/common) for more details.
Check the [documentation](https://make.modal.sh/tesseract/web/react/common) for more details.
## Installation
This package resides primarily in the [Modal.sh JavaScript Package Registry](https://js.pack.modal.sh/). You will need to
adjust configuration in your chosen package manager.
With [Yarn v.1.x](https://classic.arnpkg.com), add this to your `.yarnrc` file:
```yarnrc
"@tesseract-design:registry" "https://js.pack.modal.sh/"
```
Then, install the package by running the following command:
```shell script
yarn add @tesseract-design/react-common
```
## Usage
## Usage
The package includes components as named exports. Simply import the components you need individually or use a namespace
The package includes components as named exports. Simply import the components you need individually or use a namespace
@@ -54,11 +22,13 @@ const LoginForm = etcProps => (
</legend>
</legend>
<div>
<div>
<T.TextInput
<T.TextInput
name="username"
label="Username"
label="Username"
/>
/>
</div>
</div>
<div>
<div>
<T.TextInput
<T.TextInput
name="password"
type="password"
type="password"
label="Password"
label="Password"
/>
/>
@@ -82,13 +52,7 @@ ReactDOM.render(
window.document.body.appendChild(mountNode)
window.document.body.appendChild(mountNode)
```
```
Detailed usage guides can be found in the documentation linked above.
## TypeScript
## TypeScript
The package is written and tested using TypeScript. Thus, typings for consumption in TypeScript are bundled with the
The package is written and tested using TypeScript. Thus, typings for consumption in TypeScript are bundled with the
compiled source.
compiled source.
## License
MIT. See the LICENSE file on the package repository for the full text.