@raspberrypifoundation/design-system-react 1.7.0 → 2.0.0-beta.2

package/CHANGELOG.md

@@ -4,11 +4,19 @@ All notable changes to this project will be documented in this file.
 
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/), and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## 2.0 BETA
+
+- Updated Storybook Introduction (#119)
+- Moved to use Vite for development (#114)
+- Include all design-system-core components into the package so design system core can be removed as dependency from library users
+  (see [UPDATING.md](UPDATING.md) for more details)
+
 ## v1.7.0 - 2024-12-03
 
 ### Added
 
 - Added support for closing `Alert`s (#112)
+- Update the design-system-core requirement to >2.0.0
 
 ### Changed
 

package/README.md

@@ -2,16 +2,23 @@
 
 The React implementation of the **Raspberry Pi Foundation Design System**
 
-<a href="https://design-system-react.rpf-internal.org/?path=/docs/documentation-introduction--documentation">![Foo](https://img.shields.io/badge/React-Components_(Storybook)-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=00AECE)</a>
+<a href="https://design-system-react.rpf-internal.org/?path=/docs/documentation-introduction--documentation">![React Components](<https://img.shields.io/badge/React-Components_(Storybook)-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=00AECE>)</a>
 
 ### Design System links:
-<a href="https://rpf-design-system.pages.dev/">![Foo](https://img.shields.io/badge/Design_System-Documentation-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=CD2355)</a>
+
+<a href="https://rpf-design-system.pages.dev/">![Design System Documentation](<https://img.shields.io/badge/Design_System-Documentation-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=CD2355>)</a>
+
 <br>
-<a href="https://github.com/raspberrypifoundation/design-system-core/">![Foo](https://img.shields.io/badge/Core-Repository-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=D95495)</a>
-<a href="https://design-system-core.rpf-internal.org/?path=/docs/about--docs">![Foo](https://img.shields.io/badge/Core-Components_(Storybook)-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=D95495)</a>
+
+<a href="https://github.com/raspberrypifoundation/design-system-core/">![Core Repository](<https://img.shields.io/badge/Core-Repository-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=D95495>)</a>
+
+<a href="https://design-system-core.rpf-internal.org/?path=/docs/about--docs">![Core Components](<https://img.shields.io/badge/Core-Components_(Storybook)-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=D95495>)</a>
+
 <br>
-<a href="https://github.com/raspberrypifoundation/design-system-rails/">![Foo](https://img.shields.io/badge/Rails-Repository-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=CC0000)</a>
-<a href="https://design-system-rails.rpf-internal.org/lookbook">![Foo](https://img.shields.io/badge/Rails-Components_(Lookbook)-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=CC0000)</a>
+
+<a href="https://github.com/raspberrypifoundation/design-system-rails/">![Rails Repository](<https://img.shields.io/badge/Rails-Repository-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=CC0000>)</a>
+
+<a href="https://design-system-rails.rpf-internal.org/lookbook">![Rails Components](<https://img.shields.io/badge/Rails-Components_(Lookbook)-label?style=for-the-badge&color=hsla(223%2C%209%25%2C%2085%25%2C%201)&labelColor=CC0000>)</a>
 
 ---
 
@@ -26,13 +33,15 @@ yarn add @raspberrypifoundation/design-system-react
 ## Development
 
 Dependencies:
-* asdf (https://asdf-vm.com/)
+
+- asdf (https://asdf-vm.com/)
 
 ```
 asdf install
 ```
 
 Enable corepack, which adds the yarn binary to your path
+
 ```
 corepack enable
 ```
@@ -49,6 +58,51 @@ Run Storybook:
 yarn run storybook
 ```
 
+### Linting & Formatting
+
+We use ESLint for linting and Prettier for formatting.
+
+<details>
+<summary>Why both?</summary>
+
+Learn more [here](https://prettier.io/docs/en/comparison) and [here](https://eslint.org/blog/2023/10/deprecating-formatting-rules/#main).
+
+In short:
+
+- Formatting is faster and simpler with Prettier.
+- Seperation of concerns for code quality and bug catching (ESLint) and code formatting (Prettier).
+- It is recommended by ESLint maintainers to run a dedicated source code formatter - such as Prettier.
+
+For both we are using the default recommend configurations to avoid [bike-shedding](https://en.wikipedia.org/wiki/Law_of_triviality). Prettier uses purposely [opinionated options](https://prettier.io/docs/en/options) for example.
+
+</details>
+
+#### Linting
+
+You are manually run ESLint with:
+
+```bash
+yarn lint
+```
+
+To automatically fix issues where possible:
+
+```bash
+yarn lint --fix
+```
+
+#### Formatting
+
+The `.prettierrc` file lets lets editors and other tools know we're are using Prettier.
+
+To get the most out of Prettier, it’s recommended to [run it from your editor](https://prettier.io/docs/en/editors).
+
+If you just want to run the formatting manually:
+
+```bash
+yarn format
+```
+
 ### Testing
 
 Run the tests with `yarn run test`.
@@ -57,7 +111,7 @@ Run the tests with `yarn run test`.
 
 Sometimes you may want to work on `design-system-core` and `design-system-react` at the same time. You can do this by working with your local version of core using `yarn link`.
 
-1. In your `design-system-react` repo and tell the application to use your local version of `design-system-core`.  In this command `../design-system-core` should be replaced with the path to your copy of `design-system-core`.
+1. In your `design-system-react` repo and tell the application to use your local version of `design-system-core`. In this command `../design-system-core` should be replaced with the path to your copy of `design-system-core`.
 
 ```
 yarn link ../design-system-core
@@ -96,13 +150,13 @@ If you are experiencing issues and believe design-system-react is not using your
 
 ## Node versions
 
-We've two places where the NodeJS version is specified, and we should keep these in-sync.  The `.tool-versions` is used for local development, installed via `asdf`.  The `.nvmrc` is used in the CI/publish Github action, and the Cloudflare pages build process.  If you change one, please change t'other.
+We've two places where the NodeJS version is specified, and we should keep these in-sync. The `.tool-versions` is used for local development, installed via `asdf`. The `.nvmrc` is used in the CI/publish Github action, and the Cloudflare pages build process. If you change one, please change t'other.
 
 ## Deployment
 
 Create a new [release](https://github.com/RaspberryPiFoundation/design-system-react/releases):
 
-- Use `yarn version -i minor` to increment the version in `package.json`.  You can also use `major` or `patch` instead of `minor` here.
+- Use `yarn version -i minor` to increment the version in `package.json`. You can also use `major` or `patch` instead of `minor` here.
 - Update the changelog
 - Commit and push to a branch, and open a PR for review.