canvas-planner

canvas-planner

Canvas Planner is the UI component for the Planner feature in Canvas.

Production

Usage

yarn add canvas-planner

import Planner from 'canvas-planner';

Polyfill

Canvas Planner is developed using modern JavaScript and supports modern browsers. If you are using it in an environment such as IE 11 where some core browser features are unavailable, then you should make sure to polyfill appropriately. This package does not ship any polyfills to maintain a smaller footprint.

Development

Getting Started

yarn
yarn start

Go to your browser to http://localhost:3005 to see the app. This will also start a json-server instance at http://localhost:3004 which api requests will be proxied from webpack-dev-server to eliminating the need to have an instance of Canvas running to do development.

Running without a delay

By default, all requests to the json-server have a 1.5 second delay introduced to help us develop for proper loading states. If you want to run without the delay you'll need to instead run:

yarn run start:json-server:no-delay

And then in a separate terminal tab/session/window/etc.

yarn run start:webpack-dev

Linting

This project uses eslint-config-react-app for linting JS files. Linting is enforced at the build level. ESLint errors will cause the build to fail.

Testing

We use Jest for testing the codebase. You can run it by running yarn test for a single run or yarn test:watch to start up a watcher process for it. If you are having trouble with the watch process you may need to set up [watchman] (https://facebook.github.io/watchman/). It should be as simple as brew install watchman on a Mac, no configuration is required. For more details about these issues see the discussion on the issue, watch mode stopped working on macOS Sierra.

Testing a local Canvas Planner version

If you want to test a version of the planner locally without publishing it you can do so by using yarn link.

The way it is done is as follows:

cd canvas-planner
yarn run build # Build the proper transpiled versions of the files
yarn link

cd ./canvas-lms
yarn link canvas-planner

Once you've done those things, run the proper build steps for your Canvas installation and you'll see your local copy of canvas-planner working inside Canvas.