From 5b098b82f51c998c6263e7fa3138d5b8164770ab Mon Sep 17 00:00:00 2001 From: Chris Normansell Date: Fri, 22 Dec 2023 11:49:14 +0000 Subject: [PATCH 1/2] =?UTF-8?q?=F0=9F=93=9D=20Rebuilt=20readme=20to=20foll?= =?UTF-8?q?ow=20new=20format?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- CODEOWNERS | 1 + README.md | 147 +++++++++++++++++++++++++++++++++++++++++++---------- 2 files changed, 120 insertions(+), 28 deletions(-) create mode 100644 CODEOWNERS diff --git a/CODEOWNERS b/CODEOWNERS new file mode 100644 index 000000000..69d55e399 --- /dev/null +++ b/CODEOWNERS @@ -0,0 +1 @@ +* @Bynder/content-workflow-frontend diff --git a/README.md b/README.md index 82fa6ccd7..6a0ec99e7 100644 --- a/README.md +++ b/README.md @@ -1,39 +1,34 @@ -# GatherContent UI Library +
-**Warning: This library is being sunsetted. There will be occasional updates for bug fixes and new components we require for legacy pages, but for the most part this is no longer being maintained.** -UI component library for all GatherContent components. - -This uses [React Storybook](https://github.com/storybooks/react-storybook) to showcase and host the development of the UI components used at GatherContent. +# Content Workflow UI Component Library 🧩 -## Developing the library +![TypeScript](https://img.shields.io/badge/typescript-%23007ACC.svg?style=for-the-badge&logo=typescript&logoColor=white) +[![Storybook](https://img.shields.io/badge/-Storybook-FF4785?style=for-the-badge&logo=storybook&logoColor=white)](https://637e11221b165a5f068e36ca-brffybdhva.chromatic.com) +![TailwindCSS](https://img.shields.io/badge/tailwindcss-%2338B2AC.svg?style=for-the-badge&logo=tailwind-css&logoColor=white) +![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white) +[![GitHub Actions](https://img.shields.io/badge/github%20actions-%232671E5.svg?style=for-the-badge&logo=githubactions&logoColor=white)](https://github.com/Bynder/gathercontent-api/actions) -1. Download the repository and run `npm run install` -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) +> [!WARNING] +> This library is being sunsetted. There will be occasional updates for bug fixes and new components we require for legacy pages, but for the most part this is no longer being maintained. -## Linking the library - -[You can use `npm link` to link your local version of this library to the `node_modules` in your app.](https://github.com/gathercontent/app/blob/master/webapp/README.md#linking-gather-content-ui) - -For this to work, you also need to run `npm link react` in this repository. -[Original issue here](https://github.com/facebook/react/issues/15315#issuecomment-479802153) - -## Running the test suite +UI component library for all GatherContent components. -Tests live under the `tests` folder and should be ran using `npm run test`. -To develop the components, a TDD runner is available by running `npm run tdd` +**[πŸ§‘β€πŸŽ¨ Usage](#-usage)** β€’ +**[πŸ’» Local development](#-local-development)** β€’ +**[🎨 Code styling / linting](#-code-styling-and-linting)** β€’ +**[πŸ§‘β€πŸ”¬ Testing](#-how-to-run-tests)** β€’ +**[πŸ— Setting up dependencies](#-setting-up-dependencies)** -## Building for production +**[⌨ Useful commands](#-useful-commands)** β€’ +**[πŸš€ How to deploy](#-how-to-deploy)** β€’ +**[πŸ‘₯ Code owners](#-code-owners)** β€’ +**[πŸ”— Useful links](#-useful-links)** -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. +## πŸ§‘β€πŸŽ¨ Usage -## Using the library +[(Back to top)](#content-workflow-ui-component-library-) The library is available on npm. @@ -49,7 +44,85 @@ import { Button } from 'gather-content-ui'; require('gather-ui/dist/styles.css'); ``` -## Publishing the library +## πŸ’» Local Development + +[(Back to top)](#content-workflow-ui-component-library-) + +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)](#content-workflow-ui-component-library-) + +We use both eslint and prettier to lint and format our code. You can run these commands to check your code; + +```shell +npm run lint +``` + +If you would like to prettier to automatically fix the issues you can run: + +```shell +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; + +```shell +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; + +```shell +npm run lint:style +npm run format:style +``` + +## πŸ§‘β€πŸ”¬ How to run tests + +[(Back to top)](#content-workflow-ui-component-library-) + +Tests live alongside the code within a `.specs` folder and should be ran using `npm run test`. + +## πŸ— Setting up dependencies + +[(Back to top)](#content-workflow-ui-component-library-) + +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)](#content-workflow-ui-component-library-) + +### 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](https://github.com/facebook/react/issues/15315#issuecomment-479802153) + +## πŸš€ How to deploy + +[(Back to top)](#content-workflow-ui-component-library-) + +### 🧱 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. @@ -59,3 +132,21 @@ The best and easiest way to publish this library to npm is to use our GitHub act 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](CODEOWNERS) + +[(Back to top)](#content-workflow-ui-component-library-) + +[**@Bynder/content-workflow-frontend β†’**](https://github.com/orgs/Bynder/teams/content-workflow-frontend) + +## πŸ”— Useful links + +[(Back to top)](#content-workflow-ui-component-library-) + +**Storybook β†’** + +### Related Repositories + +**Mono β†’** + +**CSR β†’** From 377c52ac5562201b16273508b3f868a832c15850 Mon Sep 17 00:00:00 2001 From: Chris Normansell Date: Fri, 22 Dec 2023 11:51:39 +0000 Subject: [PATCH 2/2] =?UTF-8?q?=F0=9F=93=9D=20Rebuilt=20readme=20to=20foll?= =?UTF-8?q?ow=20new=20format?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- README.md | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/README.md b/README.md index 6a0ec99e7..d3620e5ed 100644 --- a/README.md +++ b/README.md @@ -8,9 +8,6 @@ ![NPM](https://img.shields.io/badge/NPM-%23CB3837.svg?style=for-the-badge&logo=npm&logoColor=white) [![GitHub Actions](https://img.shields.io/badge/github%20actions-%232671E5.svg?style=for-the-badge&logo=githubactions&logoColor=white)](https://github.com/Bynder/gathercontent-api/actions) -> [!WARNING] -> This library is being sunsetted. There will be occasional updates for bug fixes and new components we require for legacy pages, but for the most part this is no longer being maintained. - UI component library for all GatherContent components. **[πŸ§‘β€πŸŽ¨ Usage](#-usage)** β€’ @@ -26,6 +23,9 @@ UI component library for all GatherContent components. +> [!CAUTION] +> This library is being sunsetted. There will be occasional updates for bug fixes and new components we require for legacy pages, but for the most part this is no longer being maintained. + ## πŸ§‘β€πŸŽ¨ Usage [(Back to top)](#content-workflow-ui-component-library-)