NCSA UI

Installation

Make sure necessary peerDependencies are installed

yarn add react react-dom prop-types
yarn add @material-ui/core
yarn add styled-components

Install NCSA-UI

yarn add @ncsasports/ui

Usage

To get all the benefits of using NCSA-UI, we need to provide our theme to the whole app.

// index.jsx (probably)
import { ThemeWrapper, c3poTheme } from "@ncsasports/ui";

ReactDOM.render(
  <ThemeWrapper theme={c3poTheme}>
    <MyApp />
  </ThemeWrapper>
);

You can also use the ThemeWrapper lower down in the component tree, if you want isolate which parts of the app are themed, or use different themes for different parts of the app.

Once you've provided the theme, you can simply import and use the components like you would with any other package:

// somewhere else
import { Button } from "@ncsasports/ui";

<Button color="primary" onClick={doSomething}>
  Look mom! I'm using NCSA-UI!
</Button>;

Development

This project uses Yarn.

Installation

yarn

Local Development

To start up the styleguide server, run:

yarn styleguide

You should then be able to go to http://localhost:6060/ and see the styleguide.

To start up the storybook server, run:

yarn storybook

Your browser will automatically open storybook and you can play around in the playground.

Tests

To run tests, you can simply run:

yarn test

This will run jest, so:

• If you want to watch your tests, run: yarn test --watch
• If you want to update snapshots, run: yarn test -u

For debugging, you can either launch "Debug All Jest Tests" from VSCode, or you can run:

yarn test:debug

This will start a remote debugger, which you can attach to by going to chrome://inspect (in chrome) and clicking on the debugger process.

Once you've started your debugger (either via VSCode or directly), you can add debugger; statements to your code and debug from there.

Code Health

To lint your code, run:

yarn lint

We're using Prettier for our JS formatting. To use prettier, you can simply run:

yarn format

Or, configure your text editor to use prettier.