# test-publish-jay
> A skeleton to create your own React component library using Rollup, TypeScript, Sass and Storybook
Latest version **0.1.6** (published 2021-09-30) · MIT license · 0 weekly downloads
## Install
```sh
npm install test-publish-jay
pnpm add test-publish-jay
yarn add test-publish-jay
bun add test-publish-jay
```
## Health
**Score 30/100 (F)** — status: abandoned.
Positive: has types; esm support; no vulnerabilities; high quality score.
Warnings: low downloads; pre 1.0.
Negative: abandoned; low maintenance score.
## Facts
| | |
|---|---|
| Version | 0.1.6 |
| Published | 2021-09-30 |
| First published | 2021-09-30 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 2 |
| Unpacked size | 108.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 782 |
| Author | Cornell WebDev |
| Maintainers | cornellwebdev |
| Keywords | React, Component, Library, Rollup, Typescript, Sass, Storybook |
## Links
- npm: https://www.npmjs.com/package/test-publish-jay
- Repository: https://github.com/HarveyD/react-component-library
- Homepage: https://github.com/HarveyD/react-component-library#readme
- Issues: https://github.com/HarveyD/react-component-library/issues
- npm.io page: https://npm.io/package/test-publish-jay
## Dependencies (2)
- [styled-normalize](https://npm.io/package/styled-normalize.md) ^8.0.7
- [storybook-addon-react-docgen](https://npm.io/package/storybook-addon-react-docgen.md) ^1.2.42
## Alternatives
- [mobx-react](https://npm.io/package/mobx-react.md) — 2.8M weekly downloads
- [rc-tree](https://npm.io/package/rc-tree.md) — 2.6M weekly downloads
- [@react-oauth/google](https://npm.io/package/@react-oauth/google.md) — 1.3M weekly downloads
- [@wagmi/connectors](https://npm.io/package/@wagmi/connectors.md) — 877.0K weekly downloads
- [vee-validate](https://npm.io/package/vee-validate.md) — 836.4K weekly downloads
## Recent versions
- 0.1.6 (latest) — 2021-09-30
- 0.1.5 — 2021-09-30
- 0.1.4 — 2021-09-30
- 0.1.3 — 2021-09-30
- 0.1.2 — 2021-09-30
- 0.1.0 — 2021-09-30
## README
# Glue UI
[](https://buildkite.com/harvey/react-component-library)
[](https://opensource.org/licenses/MIT)
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](https://github.com/rollup/rollup)
- [TypeScript](https://www.typescriptlang.org/)
- [Storybook](https://storybook.js.org/)
## 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
```
```TSX
import React from "react";
import { ExampleComponent } from "glue-ui";
const App = () => (
Hello I'm consuming the component library
);
export default App;
```
#### Styled Components
If you want to use [`styled-components`](https://styled-components.com/), 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](https://github.com/HarveyD/react-component-library/tree/styled-components).
### Component Code Splitting
Code splitting of your components is not supported by default.
[Read this section of my blog post](https://blog.harveydelaney.com/creating-your-own-react-component-library/#introducing-code-splitting-optional-) 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](https://github.com/HarveyD/react-component-library/tree/code-splitting) or [this commit](https://github.com/HarveyD/react-component-library/commit/94631be5a871f3b39dbc3e9bd3e75a8ae5b3b759) 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](https://github.com/rollup/plugins/tree/master/packages/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:
```tsx
import logo from "./rollup.png";
export const ImageComponent = () => (
);
```
### Supporting JSON Imports
Add the following library to your component library [@rollup/plugin-json](https://github.com/rollup/plugins/tree/master/packages/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:
```tsx
import data from "./some-data.json";
export const JsonDataComponent = () => {data.description}
;
```
Checkout the [official Rollup plugin list](https://github.com/rollup/plugins) for additional helpful plugins.
---
_Source: https://npm.io/package/test-publish-jay · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._