Merge pull request #277 from bcgov/feature/components

React components package

Author: ty2k

packages/react-components/.eslintrc.cjs

@@ -0,0 +1,19 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:react-hooks/recommended",
+    "plugin:storybook/recommended",
+  ],
+  ignorePatterns: ["dist", ".eslintrc.cjs"],
+  parser: "@typescript-eslint/parser",
+  plugins: ["react-refresh"],
+  rules: {
+    "react-refresh/only-export-components": [
+      "warn",
+      { allowConstantExport: true },
+    ],
+  },
+};

packages/react-components/.gitignore

@@ -0,0 +1,26 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+storybook-static
+vite-dist
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

packages/react-components/.nvmrc

@@ -0,0 +1 @@
+v20

packages/react-components/.storybook/main.ts

@@ -0,0 +1,15 @@
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+};
+export default config;

packages/react-components/.storybook/preview.ts

@@ -0,0 +1,23 @@
+import type { Preview } from "@storybook/react";
+
+import "@bcgov/bc-sans/css/BC_Sans.css";
+import "@bcgov/design-tokens/css/variables.css";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+    options: {
+      storySort: {
+        order: ["Introduction"],
+      },
+    },
+  },
+};
+
+export default preview;

packages/react-components/CHANGELOG.md

@@ -0,0 +1,18 @@
+# Changelog
+
+## 0.0.2
+
+### Changed
+
+- Moved `@bcgov/bc-sans` to peer dependencies and included import guidance in README, rather than bundling copies of the font in the rollup process.
+- Moved design tokens CSS import out of Tag component and into common index export file.
+
+### Added
+
+- Added Button component.
+
+## 0.0.1
+
+### Added
+
+- Added TagGroup/TagList/Tag components.

packages/react-components/Dockerfile.storybook

@@ -0,0 +1,37 @@
+# Dockerfile.storybook
+
+# -----------
+# Build stage
+# -----------
+FROM node:lts-alpine as build-stage
+
+# Copy package.json and package-lock.json
+WORKDIR /app
+COPY package*.json .
+
+# Print npm config
+RUN npm config list
+
+# Install dependencies
+RUN npm install
+
+# Copy required files
+COPY src ./src
+COPY .storybook ./.storybook
+
+# Run Storybook build script, which places built files in /app/storybook-static
+RUN npm run storybook-build
+
+# -----------
+# Serve stage
+# -----------
+FROM nginxinc/nginx-unprivileged:alpine as serve-stage
+
+# Copy nginx configuration
+COPY ./nginx.storybook.conf /etc/nginx/nginx.conf
+
+# Copy built Storybook files to nginx public web root folder
+COPY --from=build-stage /app/storybook-static /usr/share/nginx/html
+
+EXPOSE 8080
+CMD ["nginx", "-g", "daemon off;"]

packages/react-components/Dockerfile.vite

@@ -0,0 +1,40 @@
+# Dockerfile.vite
+
+# -----------
+# Build stage
+# -----------
+FROM node:lts-alpine as build-stage
+
+# Copy package.json and package-lock.json
+WORKDIR /app
+COPY package*.json .
+
+# Print npm config
+RUN npm config list
+
+# Install dependencies
+RUN npm install
+
+# Copy required files
+COPY index.html ./
+COPY tsconfig.json ./
+COPY tsconfig.vite.json ./
+COPY vite.config.ts ./
+COPY src ./src
+
+# Run Vite build script, which places built files in /app/vite-dist
+RUN npm run vite-build
+
+# -----------
+# Serve stage
+# -----------
+FROM nginxinc/nginx-unprivileged:alpine as serve-stage
+
+# Copy nginx configuration
+COPY ./nginx.vite.conf /etc/nginx/nginx.conf
+
+# Copy built Vite files to nginx public web root folder
+COPY --from=build-stage /app/vite-dist /usr/share/nginx/html
+
+EXPOSE 5555
+CMD ["nginx", "-g", "daemon off;"]

packages/react-components/README.md

@@ -0,0 +1,93 @@
+# @bcgov/design-system-react-components
+
+[![Lifecycle:Experimental](https://img.shields.io/badge/Lifecycle-Experimental-339999)](https://github.com/bcgov/repomountie/blob/master/doc/lifecycle-badges.md)
+
+This package contains a library of React components built using [React Aria Components](https://react-spectrum.adobe.com/react-aria/react-aria-components.html) to implement the BC Design System.
+
+Questions? Please email the <a href="mailto:DesignSystem@gov.bc.ca">GDX OSS Design Team</a>.
+
+See repository: https://github.com/bcgov/design-system
+
+To use, install this package and import the components into your application.
+
+## Install
+
+`npm install @bcgov/design-system-react-components`
+
+## BC Sans font dependency
+
+This package installs [@bcgov/bc-sans](https://www.npmjs.com/package/@bcgov/bc-sans) as a peer dependency. You must import the font-face declarations from @bcgov/bc-sans and ensure the font is reachable for your end user. The React components require that the `BC Sans` font-face is available to display correctly. The components do not ship their own copies of the font to minimize your bundle size.
+
+**Important!** If you are on a BC Government-provisioned laptop, you already have the BC Sans font installed on your machine. This package uses `BC Sans` (with a space) for its font styles. If you are using this component library but not supplying the font, it's possible that your machine will still display the font correctly for you, **but not your end user**. Make sure to check this by disabling the font on your machine or by testing with another machine.
+
+### Use
+
+```jsx
+// App.jsx
+
+// If you're already importing the BC Sans font-face somewhere else in your
+// project, there is no need to import it again. Just make sure the `BC Sans`
+// declaration and font files are available.
+import "@bcgov/bc-sans/css/BC_Sans.css";
+
+// Import the individual components you need
+import { TagGroup, TagList } from "@bcgov/design-system-react-components";
+
+export default function App() {
+  return (
+    <TagGroup aria-label="Tag group with two items">
+      <TagList
+        items={[
+          { id: "one", textValue: "One" },
+          { id: "two", textValue: "Two" },
+        ]}
+      />
+    </TagGroup>
+  );
+}
+```
+
+## Component list
+
+| Component              | React Aria Components docs link                           |
+| ---------------------- | --------------------------------------------------------- |
+| Button                 | https://react-spectrum.adobe.com/react-aria/Button.html   |
+| TagGroup, TagList, Tag | https://react-spectrum.adobe.com/react-aria/TagGroup.html |
+
+## Supported React versions
+
+This package has a peer dependency on `react` and `react-dom` at these versions: `"^16.14.0 || ^17.0.0-rc.1 || ^18.0.0"`
+
+By targeting v16.4.0 as a minimum, we get to use [React's modern JSX transformation](https://legacy.reactjs.org/blog/2020/09/22/introducing-the-new-jsx-transform.html) in `tsconfig.json`:
+
+```json
+"jsx": "react-jsx",
+```
+
+This means there's no need for unused `import React from "react"` statements in your JSX files.
+
+## Development
+
+### Components
+
+Components live in `./src/components` and are targeted by the build process with an export in `./src/index.ts`.
+
+### Storybook
+
+Storybook stories live in `./src/stories`.
+
+Run `npm run storybook-dev` to access the Storybook instance for the component library.
+
+### Vite kitchen sink application
+
+Vite uses the components code directly from `./src/components` in groups of content in `./src/pages`.
+
+Run `npm run vite-dev` to access the Vite React demo app.
+
+### Publish new versions
+
+To generate an updated copy of the package for distribution, run the included Rollup script: `npm run rollup`.
+
+This will place artifacts in the `dist` folder, which is targeted for publishing in `package.json` with the [`files` field](https://docs.npmjs.com/cli/v10/configuring-npm/package-json#files).
+
+Update the package version in `package.json` and run `npm publish` to push a new version.

packages/react-components/index.html

@@ -0,0 +1,13 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>BC Design System React Components Vite Kitchen Sink</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>