kryndex / instructure-ui

A UI Component Library made by Instructure, Inc.

instructure-ui monorepo

Packages

This repository contains multiple projects in the packages/ directory that are published as separate packages on NPM:

– UI component library

– UI utilities

– A library for applying themes to UI components

– Themes that can be applied to themeable components

– A babel plugin to transform CSS imports for themeable components

– A testbed and utilities for writing UI tests

– Shared build config for UI libraries

– "Codemod" scripts to help with upgrades that contain API changes

– Documentation client application

– Webpack plugin to generate documentation

– Webpack loader for custom UI poly-fills

The __docs__ package is not published to NPM as it is used to build the documentation.

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 v6+, Yarn v0.27+

Installation steps:

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

Usage

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

Development

• yarn start:watch runs 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 in the packages/ui-core directory you should see the page auto-reload.
• yarn test will run the tests for all of the packages.
• yarn test:watch --scope [package name] will run the tests for 'package name' and will watch for changes to the source code.
• yarn start will build the production version of the documentation. You can view it at http://localhost:8001.

Run yarn run to list the available commands.

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 or Atom editors you can set up the following plugins to catch linting and formatting errors earlier.

1. Install the EditorConfig plugin Sublime, Atom
2. Install the Linter plugin Sublime, Atom
3. Install the Eslint plugin Sublime, Atom
4. Install the Stylelint plugin Sublime, Atom
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.

Documentation

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

Releases

1. Run yarn bump to update the package version. Ignore the advice to push the tag (we do that after we publish the release due to our gerrit review workflow).
2. Optionally update the CHANGELOG to optionally add any additional information about the release.
3. Push up the version bump commit to gerrit for review and testing.
4. Once the version bump commit is merged, run yarn release
5. Verify that the documentation was updated on gh-pages and the release was tagged in github.

License

MIT