aaronshaf/instructure-ui

A UI Component Library made by Instructure, Inc.

id
instructure-ui

instructure-ui

Browser Support

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

Quick Start

Instructure-UI has a number of beautiful and accessible React components with baked-in styles and theming and helpful utility functions.

To start using Instructure-UI React components, you must do the following:

1. Activate a style theme.
2. Import and render an Instructure-UI component.

To get the default styles as shown in the examples, use the pre-built Canvas theme.

Example:

$ yarn add @instructure/ui-themes @instructure/ui-elements

import React, { Component } from 'react'
import theme from '@instructure/ui-themes/lib/canvas'
import Heading from '@instructure/ui-elements/lib/components/Heading'

theme.use()

class App extends Component {
  render() {
    return (
      <div className="App">
        <Heading>Now using Instructure-UI components with default Canvas theme!</Heading>
      </div>
    )
  }
}

export default App

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 @instructure/[package name] to run the tests for 'package name' and watch for changes.
4. Run yarn test to run all the tests for every package.

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.

Documentation

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

License

MIT