gather-content-ui

[!CAUTION] This library has been deprecated in favour of @gathercontent/ui and @gathercontent/icons. No further updates will be made here.
For any local development the contents of this repo have been moved to CSR →

Content Workflow UI Component Library 🧩

UI component library for all GatherContent components.

🧑‍🎨 Usage • 💻 Local development • 🎨 Code styling / linting • 🧑‍🔬 Testing • 🏗 Setting up dependencies

⌨ Useful commands • 🚀 How to deploy • 👥 Code owners • 🔗 Useful links

🧑‍🎨 Usage

^{(Back to top)}

The library is available on npm.

npm install gather-content-ui

Using the components is just like any other npm module. For e.g.:

// Import the button component
import { Button } from 'gather-content-ui';

// Require once all the CSS directly from the node_modules folder
require('gather-ui/dist/styles.css');

💻 Local Development

^{(Back to top)}

1. Download the repository and run npm ci
2. Make changes to the components living on the /lib folder
3. Preview changes by running the live style guide, using npm run storybook and pointing your browser to http://localhost:6006/
4. Watch for file changes and rebuild with npm run build:watch (useful when you link your local version of gather-ui in the app)

🎨 Code Styling and Linting

^{(Back to top)}

We use both eslint and prettier to lint and format our code. You can run these commands to check your code;

npm run lint

If you would like to prettier to automatically fix the issues you can run:

npm run format:js

Furthermore, as we use TypeScript we also have the TypeScript compiler to check our code. You can run this command to check your code;

npm run type-check

Stylelint

We also use stylelint to be able to lint and format our CSS. You can run these commands to check your code;

npm run lint:style
npm run format:style

🧑‍🔬 How to run tests

^{(Back to top)}

Tests live alongside the code within a .specs folder and should be ran using npm run test.

🏗 Setting up dependencies

^{(Back to top)}

All the project dependencies are listed in the package.json file. You can install them using npm ci. NPM should have been installed when you ran through the local development in docker-base. However, if you don't have it installed run brew install node@18 to install it.

⌨ Useful commands

^{(Back to top)}

Linking the library

You can use npm link to link your local version of this library to the node_modules in your app.

For this to work, you also need to run npm link react in this repository. Original issue here

🚀 How to deploy

^{(Back to top)}

🧱 Building for production

To build the components to be consumed by any application, both JavaScript and CSS files need to be generated. Running npm run build will:

1. Generate ES5 compliant versions of each component in /dist
2. Generate a .css files containing all the concatenated component styles.
3. Copy over Sass configuration files to the /dist folder in order to be consumed externally.

📰 Publishing

The best and easiest way to publish this library to npm is to use our GitHub action.

1. Head on over to the actions tab
2. Select the "publish-npm" workflow
3. Click the "Run workflow" dropdown
4. Select a branch (this will just be main 99.99% of the time) and a version
5. Click "Run workflow"
6. Sit back and relax as the robots publish it for you! 🤖

👥 Code owners

^{(Back to top)}

@Bynder/content-workflow-frontend →

🔗 Useful links

^{(Back to top)}

Storybook →

Related Repositories

Mono →

CSR →