react-ittsu

React components using ittsu styles.

The interactive storybook can be found here: https://drawbotics.github.io/react-ittsu/

Installation

This package is published to the GitHub Package Registry under the @drawbotics scope.

1. Configure npm for the @drawbotics scope

Create or update your project's .npmrc file:

@drawbotics:registry=https://npm.pkg.github.com

2. Authenticate with GitHub Packages

You need a GitHub personal access token with read:packages scope. Then log in:

npm login --scope=@drawbotics --registry=https://npm.pkg.github.com

3. Install

npm install @drawbotics/react-ittsu

Peer dependencies

• react >= 16.0.0
• react-dom >= 16.0.0

Usage

import { Button, Card, CardContent } from '@drawbotics/react-ittsu/components';
import { Input, Select, Form } from '@drawbotics/react-ittsu/forms';
import { Grid, Cell, Container } from '@drawbotics/react-ittsu/layout';

Components

Button, Card, CardContent, CardFooter, Code, Dropdown, DropdownTrigger, DropdownContent, DropdownOption, Icon, Link, Navbar, NavbarIcon, NavbarContainer, NavbarControls, NavbarLink, NavbarText, NavbarDropdown, NavbarDivisor, Panel, PanelHeader, PanelTitle, PanelBody, Paragraph, Popover, showPopover, hidePopover, T1, T2, T3, SectionTitle, Table, THead, TBody, TFoot, TRow, TCell, Tag, Tooltip, showTooltip, hideTooltip

Forms

Form, Input, TextArea, Checkbox, Radio, Select, FormGroup, Label, ErrorLabel, Slider, Handle, CountBox, InputGroup, withForms

Layout

Main, Header, Footer, Container, Grid, Cell, Offset

Development

npm install
npm run build-watch
npm run storybook

build-watch continuously compiles the source, while Storybook displays the components in the browser at http://localhost:9001.

Publishing the style guide

npm run build-storybook

Push to dev. After merging into master, the GitHub Pages site will update.

Publishing a new version

1. Bump the version in package.json
2. Commit and push to dev
3. Publish to GitHub Packages:

npm publish