Sandcastle UI

Sandcastle UI is a React-based component library that can be consumed by applications and website as an NPM dependency .

Using Sandcastle UI

The sandcastle-ui NPM module exports clean, reusable React components.

To use the component library, follow these steps:

Install the NPM module

$ yarn add sandcastle-ui --save

Load the Sandcastle CSS file

<link rel="stylesheet" type="text/css" src="https://tr-sandcastle.s3.amazonaws.com/latest/sc.main.css" />

Usage example

import React from 'react';
import { Button } from 'sandcastle-ui';

class Example extends React.Component {
  render() {
    return (
      <Button />
    );
  }
}

Browse the component library

Sandcastle UI benefits from comprehensive, off-site documentation. Please visit the Sandcastle Design System website for a full inventory and each components respective documentation.

Developing for Sandcastle UI

Note: If you are only looking to use sandcastle-ui as a dependency in your project, please refer to Using Sandcastle UI

Development for Sandcastle components is presently overseen by the core Sandcastle team. If you feel like contributing to this project, please follow the steps below to create a local sandcastle environment.

Set up a local environment

git clone http://{username}@stash/scm/trav/sandcastle-ui.git
git submodule update --remote --init
yarn setup
yarn dev

For more information on how to use the Sandbox environment, please refer to its separate README file.

Using the Sandbox

To aid development of Sandcastle components, a very simple React environment has been provided. This environment can be used to import and test Sandcastle UI components from both the /src folder and the 'sandcastle-ui' NPM module.

The Sandbox environment uses a Webpack 4, Babel, React, GraphQL and Flow configuration. Developers are encouraged use this application to simulate real-world usage of the components prior to publishing new updates to NPM or making Pull Requests. This helps us to manually ascertain the integrity of each component before integrating them in other real world applications.

yarn dev