@bcgov/design-system-react-components 0.8.1-pr854 → 0.8.1-pr857

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +27 -0
  2. package/package.json +16 -16
package/README.md CHANGED
@@ -129,6 +129,33 @@ This project follows semantic versioning. See [CHANGELOG.md](./CHANGELOG.md) for
129
129
 
130
130
  ## Development
131
131
 
132
+ ### Development Principles
133
+
134
+ - We must maintain an **extremely high bar for accessibility**. For example, every action possible with a mouse needs to be possible with a keyboard (or other assistive technology). Adobe's `react-aria-components` is very adept at cross-device support for this, which is one of the main reasons we chose it as our base, un-styled component library.
135
+ - We endeavour to **follow semantic versioning**, though we have not yet released a major version 1. On v0, we are still willing to carefully make breaking changes if the alternative is painting ourselves into a corner. Our rationale here comes from [item #4 of the SemVer spec](https://semver.org/#spec-item-4).
136
+ - Once we are on a major version 1, we will be much more strict about only making breaking changes with major version bumps. [Here's an example of a breaking component change that we consider okay in v0](https://github.com/bcgov/design-system/pull/844#issuecomment-5431222716).
137
+ - We endeavour to release a major version 1 as soon as we consider our initial component set complete.
138
+ - We **do NOT want to make life hard for early adopters**, so we think very hard about breaking changes and we publish specific guidance with releases that involve breaks.
139
+ - We **keep our dependencies extremely minimal**. New `devDependencies` are fine and anticipated, but `dependencies` that get shipped with the library need very careful consideration. So far, we have only added dependencies from under the umbrella of Adobe's Spectrum design system, and only where it's necessary because a particular piece of functionality isn't exposed directly from `react-aria-components`.
140
+ - We want to **support as many new and existing React projects as possible**. To this end, we avoid dependencies that might conflict with existing choices in a project:
141
+ - We avoid importing BC Sans in case a project is already shipping it themselves. It's much worse to ship the heavy BC Sans font files twice in production than to show a generic serifed font in development until the developer figures out that something is wrong.
142
+ - The library should work on as wide a range of React versions as possible given the `react-aria-components` dependency. We chose to very slightly narrow their support version range to start our own support at v16.14.0. This is the version where it's no longer necessary to import unused `react` dependencies into every component file (see [Introducing the New JSX Transform](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html)).
143
+ - Choices that make things harder for apps on older versions of React to adopt the library should be thought through. [Here's an example of thinking through a mitigation that affects React v16 and v17 projects](https://github.com/bcgov/design-system/pull/760#issuecomment-5321364758).
144
+ - We write our CSS styles without the use of a CSS-in-JS tool to avoid conflicts with any existing tools that existing projects might be using.
145
+ - We don't use a CSS framework like Tailwind or Bootstrap.
146
+ - We want to **keep all tests passing**. GitHub Actions is used to run test suites when a PR is made. PRs should not be merged to `main` if new breaks are introduced.
147
+ - Nitty gritty code details below:
148
+ - Class names:
149
+ - Class names start like this:
150
+ - When a React Aria component is being styled: `.bcds-react-aria-<RACComponentName>`
151
+ - React Aria Components are unstyled components that use default class names like `.react-aria-<RACComponentName>`. We append `bcds-` for "B.C. Design System" to scope our styles in case people are using RAC for other things.
152
+ - When a generic HTML tag is the top level component: `.bcds-<ComponentName>`
153
+ - For example, the `Header` and `Footer` are just `<header>` and `<footer>` elements, not components from RAC.
154
+ - Class names use vaguely BEM-like conventions after the first chunk. Ex: `.bcds-react-aria-Disclosure--Panel`
155
+ - We are not currently doing any kind of unique ID-based class name generation/scoping, so it's important to be somewhat verbose in selecting class names. If you accidentally reuse a class like `.bcds-react-aria-Button` as part of some composite selector, its styles will collide with the styles from the `Button` component.
156
+ - We always want to use tokens from our tokens library where possible. Where a hard-coded value is being used because no token is available, it's a good idea to raise it to the team so designers can make the call on whether a new token should be added or if a particular hard-coded value is a genuine one-off.
157
+ - We lint our styles with `stylelint`, and should endeavour to pass the [`no-descending-specificity` rule](https://stylelint.io/user-guide/rules/no-descending-specificity/).
158
+
132
159
  ### Components
133
160
 
134
161
  Components live in `./src/components` and are targeted by the build process with an export in `./src/index.ts`.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bcgov/design-system-react-components",
3
- "version": "0.8.1-pr854",
3
+ "version": "0.8.1-pr857",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "git+https://github.com/bcgov/design-system.git",
@@ -62,44 +62,44 @@
62
62
  "@rollup/plugin-json": "6.1.0",
63
63
  "@rollup/plugin-node-resolve": "16.0.3",
64
64
  "@rollup/plugin-typescript": "12.3.0",
65
- "@storybook/addon-a11y": "10.5.7",
66
- "@storybook/addon-docs": "10.5.7",
67
- "@storybook/addon-links": "10.5.7",
65
+ "@storybook/addon-a11y": "10.5.10",
66
+ "@storybook/addon-docs": "10.5.10",
67
+ "@storybook/addon-links": "10.5.10",
68
68
  "@storybook/addon-mcp": "0.7.0",
69
- "@storybook/addon-vitest": "10.5.7",
69
+ "@storybook/addon-vitest": "10.5.10",
70
70
  "@storybook/mcp": "0.8.0",
71
- "@storybook/react-vite": "10.5.7",
71
+ "@storybook/react-vite": "10.5.10",
72
72
  "@testing-library/jest-dom": "6.9.1",
73
73
  "@testing-library/react": "16.3.2",
74
74
  "@types/node": "25.9.5",
75
75
  "@types/react": "19.2.18",
76
- "@types/react-dom": "19.2.4",
76
+ "@types/react-dom": "19.2.5",
77
77
  "@typescript-eslint/eslint-plugin": "8.67.0",
78
78
  "@typescript-eslint/parser": "8.67.0",
79
- "@vitejs/plugin-react": "6.0.5",
80
- "@vitest/browser-playwright": "4.1.10",
81
- "@vitest/coverage-v8": "4.1.10",
79
+ "@vitejs/plugin-react": "6.1.0",
80
+ "@vitest/browser-playwright": "4.1.11",
81
+ "@vitest/coverage-v8": "4.1.11",
82
82
  "axe-playwright": "2.2.2",
83
- "eslint": "10.8.1",
83
+ "eslint": "10.9.0",
84
84
  "eslint-plugin-react-hooks": "7.1.1",
85
85
  "eslint-plugin-react-refresh": "0.5.4",
86
- "eslint-plugin-storybook": "10.5.7",
86
+ "eslint-plugin-storybook": "10.5.10",
87
87
  "globals": "17.11.0",
88
88
  "jsdom": "29.1.1",
89
89
  "playwright": "1.62.1",
90
90
  "prettier": "3.9.6",
91
- "rollup": "4.62.4",
91
+ "rollup": "4.62.5",
92
92
  "rollup-plugin-dts": "6.5.1",
93
93
  "rollup-plugin-peer-deps-external": "2.2.4",
94
94
  "rollup-plugin-postcss": "4.0.2",
95
- "storybook": "10.5.7",
95
+ "storybook": "10.5.10",
96
96
  "stylelint": "17.14.1",
97
97
  "stylelint-config-standard": "40.0.0",
98
98
  "tslib": "2.8.1",
99
99
  "typescript": "6.0.3",
100
100
  "typescript-eslint": "8.67.0",
101
- "vite": "8.2.1",
102
- "vitest": "4.1.10"
101
+ "vite": "8.2.2",
102
+ "vitest": "4.1.11"
103
103
  },
104
104
  "optionalDependencies": {
105
105
  "@rollup/rollup-linux-x64-gnu": "*"