Glue UI

Glue UI is Cornell WebDev's centralized UI component library. It implements Cornell WebDev's Glue Design System and serves as a single source of truth for React components in our web applications.

Glue UI was built using:

• Rollup
• TypeScript
• Storybook

Development

Building

npm run build

Storybook

To run a live-reload Storybook server on your local machine:

npm run install
npm run storybook

To export your Storybook as static files:

npm run storybook:export

Generating New Components

npm run generate InsertComponentName

Publishing

Hosting via NPM

npm login
npm publish

The "prepublishOnly": "npm run build" script in package.json will execute before publish occurs, ensuring that the changes have compiled into the build directory before being published.

Usage

npm install glue-ui

import React from "react";
import { ExampleComponent } from "glue-ui";

const App = () => (
  <div>
    <h1>Hello I'm consuming the component library</h1>
    <ExampleComponent />
  </div>
);

export default App;

Styled Components

If you want to use styled-components, the changes required are a bit more involved. As such, I've created a branch where I've got styled-components working in this component library, check it out here.

Component Code Splitting

Code splitting of your components is not supported by default.

Read this section of my blog post to find out how and why you would enable code splitting of your components. In summary, code splitting enables users to import components in isolation like:

import TestComponent from 'harvey-component-library/build/TestComponent';

This can reduce the bundle size for projects using older (CJS) module formats.

You can check out this branch or this commit to see what changes are neccesary to implement it.

Please note, there's an issue with code splitting and using rollup-plugin-postcss. I recommend using rollup-plugin-sass instead alongside code splitting.

Supporting Image Imports

Add the following library to your component library @rollup/plugin-image:

npm i -D @rollup/plugin-image

Then add it to rollup-config.js:

...
plugins:[
  ...,
  image(),
  ...
]
...

You can then import and render images in your components like:

import logo from "./rollup.png";

export const ImageComponent = () => (
  <div>
    <img src={logo} />
  </div>
);

Supporting JSON Imports

Add the following library to your component library @rollup/plugin-json:

npm i -D @rollup/plugin-json

Then add it to rollup-config.js:

...
plugins:[
  ...,
  json(),
  ...
]
...

You can then import and use JSON as ES6 Modules:

import data from "./some-data.json";

export const JsonDataComponent = () => <div>{data.description}</div>;

Checkout the official Rollup plugin list for additional helpful plugins.