0xycvv/instructure-ui

A UI Component Library made by Instructure, Inc.

instructure-ui

Browser Support

• Internet Explorer 11 and Edge
• Chrome, Safari, Firefox (last two versions)

Contribute

Before contributing please read our code of conduct

Prerequisites and Installation

You'll need to have Git installed on your system.

We use Lerna to manage inter-package dependencies in this monorepo.

Prerequisites: Node.js v8+, Yarn v1.1.0+

Installation steps:

1. Install Git.
2. Install Node) and nvm.
3. Install Yarn.
4. Clone this repository: git clone gerrit:instructure-ui.
5. Run cd instructure-ui
6. Run yarn
7. Run yarn bootstrap

Run yarn run to list the available commands.

Usage

1. Run yarn start
2. Open http://localhost:8001 in your browser

Development

1. Run yarn build:watch to build all of the packages for a development environment and watch for changes.
2. Run yarn start:watch to start the dev server to run/develop examples and documentation. You can then visit http://localhost:8080 in a browser. When you make changes to the source code you should see the page auto-reload.
3. Run yarn test:watch --scope [package name] to run the tests for 'package name' and watch for changes.

Updating build dependencies

1. yarn add <package-name> or yarn upgrade <package-name>.
2. Commit the result.

Updating package dependencies

1. Update the relevant package.json file. Make sure to retain the ^ semver range.
2. Run yarn bootstrap and commit the result.

Linting and Code Formatting

Linting is run as part of the build. If you use the Sublime Text, Atom, or VSCode editors, you can set up the following plugins to catch linting and formatting errors earlier.

1. Install the Linter plugin Sublime, Atom. Linting is included in VSCode.
2. Install the EditorConfig plugin Sublime, Atom, VSCode
3. Install the Eslint plugin Sublime, Atom, VSCode
4. Install the Stylelint plugin Sublime, Atom, VSCode
5. Run yarn to install the dependencies
6. Restart your editor

Commit Guidelines

1. Run yarn commit to commit your changes and follow our commit message format.
2. Please do not include the output of yarn build in your commits.

Local Development with React Storybook

The storybook displays component examples, documented via a .examples.js file in the __examples__ directory for each component.

React Storybook has some excellent tools for local development and documentation, including an HCM/background switcher, viewport switchers, action loggers, and many more that may be implemented as we continue to develop this feature.

Here's how to use it:

• Run yarn storybook to spin up the storybook on localhost:9001

Here are some links to some useful Storybook Docs:

• Storybook Docs
• Writing Stories
• Addons

Sketch Asset Generation

Sketch assets for each component can be generated from the component examples that are displayed in the storybook.

In order to import the components into Sketch, you'll need to first install the asketch2sketch.sketchplugin by downloading html-sketchapp and copying the asketch2sketch.sketchplugin file into your Sketch Plugins directory.

Then to generate the Sketch assets:

1. Run yarn storybook to spin up the storybook on localhost:9001
2. Run yarn generate:sketch to generate a stories.asketch.json file.
3. Once in Sketch, open the "Plugins" menu, select "From Almost Sketch to Sketch", and select the stories.asketch.json file.

Documentation

Please update the documentation and examples with any changes, the code and docs should always be in sync.

License

MIT