@sebgroup/green-react 3.28.4 → 3.29.1-rc.20250730100346308

package/README.md

@@ -0,0 +1,65 @@
+<div align-items="center">
+<img width="600" alt="green-react" src="https://github.com/seb-oss/green/assets/11420341/ad4c9fe3-137f-4230-9ea7-a4de87752aa9">
+<h1>@sebgroup/green-react</h1>
+<p>
+React components with SEB's look and feel.
+</p>
+</div>
+
+## Install
+
+```bash
+npm install --save @sebgroup/green-react
+```
+
+```bash
+yarn add @sebgroup/green-react
+```
+
+## Use
+
+```tsx
+import { Button } from '@sebgroup/green-react'
+
+// Use in your JSX
+
+;<Button>A Green React Button!</Button>
+```
+
+### Components
+
+View all components in the [React Storybook](https://storybook.seb.io/latest/react/)
+
+## Develop \*
+
+1. Clone the monorepo
+
+```bash
+git clone git@github.com:sebgroup/green.git
+```
+
+2. Install the dependencies
+
+```bash
+cd green
+yarn
+```
+
+3. Start the Storybook
+
+```bash
+npx nx run react:storybook
+```
+
+4. Start the test runner (or make sure your IDE runs the tests continuously)
+
+```bash
+yarn test react --watch
+```
+
+5. Pick an issue from the board and pull it into `In progress`
+6. Open a Draft PR and reference the Issue
+7. Start coding 🎉 Don't forget:
+   1. Test
+   2. Code
+   3. Refactor

package/jest.config.ts

@@ -0,0 +1,25 @@
+/* eslint-disable */
+const { pathsToModuleNameMapper } = require('ts-jest')
+const { compilerOptions } = require('../../tsconfig.base')
+
+export default {
+  displayName: 'react',
+  preset: '../../jest.preset.js',
+  transform: {
+    '^.+\\.[tj]sx?$': [
+      'babel-jest',
+      {
+        presets: ['@nx/react/babel'],
+        plugins: [
+          ['@babel/plugin-transform-class-static-block', { loose: true }],
+        ],
+      },
+    ],
+  },
+  moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx'],
+  coverageDirectory: '../../coverage/libs/react',
+  setupFilesAfterEnv: ['@testing-library/jest-dom'],
+  moduleNameMapper: pathsToModuleNameMapper(compilerOptions.paths, {
+    prefix: '<rootDir>/../..',
+  }),
+}

package/package.json

@@ -2,13 +2,13 @@
   "name": "@sebgroup/green-react",
   "main": "./src/index.js",
   "module": "./src/index.js",
-  "version": "3.28.4",
+  "version": "3.29.1-rc.20250730100346308",
   "peerDependencies": {
     "react": "^17 || ^18 || ^19",
     "react-dom": "^17 || ^18 || ^19"
   },
   "dependencies": {
-    "@sebgroup/green-core": "^1.79.0",
+    "@sebgroup/green-core": "^1.87.0",
     "@sebgroup/chlorophyll": "^3.6.16",
     "@sebgroup/extract": "^3.0.3",
     "@lit/react": "^1.0.2",

package/project.json

@@ -0,0 +1,132 @@
+{
+  "name": "react",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/react/src",
+  "projectType": "library",
+  "tags": ["lib"],
+  "targets": {
+    "build": {
+      "executor": "nx:run-commands",
+      "outputs": ["{options.outputPath}"],
+      "options": {
+        "command": "npx copyfiles -f libs/react/package.json dist/libs/react"
+      },
+      "dependsOn": ["rollup", "generate-core-wrappers"]
+    },
+    "rollup": {
+      "executor": "@nx/rollup:rollup",
+      "outputs": ["{options.outputPath}"],
+      "dependsOn": ["^build"],
+      "cache": true,
+      "inputs": ["{projectRoot}/**/*"],
+      "options": {
+        "outputPath": "dist/libs/react",
+        "tsConfig": "libs/react/tsconfig.lib.json",
+        "project": "libs/react/package.json",
+        "entryFile": "libs/react/src/index.ts",
+        "external": ["react/jsx-runtime"],
+        "rollupConfig": [
+          "@nx/react/plugins/bundle-rollup",
+          "libs/react/rollup.config.mjs"
+        ],
+        "assets": [
+          {
+            "glob": "(README.md)",
+            "input": "libs/react",
+            "output": "."
+          }
+        ],
+        "babelUpwardRootMode": true
+      }
+    },
+    "lint": {
+      "executor": "@nx/eslint:lint"
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/libs/react"],
+      "dependsOn": ["core:build"],
+      "options": {
+        "jestConfig": "libs/react/jest.config.ts"
+      }
+    },
+    "storybook": {
+      "executor": "@nx/storybook:storybook",
+      "options": {
+        "port": 4401,
+        "configDir": "libs/react/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      },
+      "dependsOn": [
+        {
+          "target": "build",
+          "dependencies": true
+        },
+        "tokens:build"
+      ]
+    },
+    "build-nx-storybook": {
+      "executor": "@nrwl/storybook:build",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "uiFramework": "@storybook/react",
+        "configDir": "libs/react/.storybook",
+        "outputDir": "dist/storybook/react"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      },
+      "dependsOn": [
+        {
+          "target": "build",
+          "dependencies": true
+        },
+        "tokens:build"
+      ]
+    },
+    "build-storybook": {
+      "executor": "@nx/storybook:build",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "outputDir": "dist/storybook/react",
+        "configDir": "libs/react/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      },
+      "dependsOn": [
+        {
+          "target": "build",
+          "dependencies": true
+        },
+        "tokens:build"
+      ]
+    },
+    "copy-designlibrary-json": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "npx copyfiles -f libs/react/.storybook/designlibrary.json dist/storybook/react"
+      }
+    },
+    "update-dependencies": {
+      "executor": "@sebgroup/repo-tools:update-lib-deps",
+      "options": {}
+    },
+    "version-as-snapshot": {
+      "executor": "@sebgroup/repo-tools:version-as-snapshot",
+      "options": {}
+    },
+    "publish-snapshot": {
+      "executor": "@sebgroup/repo-tools:publish-snapshot",
+      "options": {}
+    }
+  }
+}

package/rollup.config.mjs

@@ -0,0 +1,41 @@
+import path from 'node:path'
+import glob from 'glob'
+
+const inputs = Object.fromEntries(
+  glob
+    .sync('libs/react/src/**/!(*.spec|*.test|*.stories).ts?(x)')
+    .map((file) => [
+      // This remove `libs/react` as well as the file extension from each
+      // file, so e.g. libs/react/src/lib/nested/foo.js becomes src/lib/nested/foo
+      path.relative(
+        'libs/react',
+        file.slice(0, file.length - path.extname(file).length),
+      ),
+      file,
+    ]),
+)
+
+export default function getRollupOptions(options) {
+  options.input = { ...options.input, ...inputs }
+  options.output = {
+    ...options.output,
+    dir: 'dist/libs/react',
+    entryFileNames: '[name].js',
+    chunkFileNames: '[name].js',
+  }
+
+  // Removing the `dts-bundle` plugin gets rid of `The emitted file "..." overwrites a previously emitted file of the same name` warnings
+  // in the build log, but it also removes the generation of the `index.d.ts` file in the `dist/libs/react` directory.
+  //
+  // This would be fine if the `module` field in package.json was set to `./src/index.js`, but NX always overwrites this field to point
+  // to a non-existent file for some reason (seems like NX is assuming a hard-coded output file name). Maybe it's a bug in NX 19, or just
+  // some hard-to-find, poorly documented, config option.
+  //
+  // Leaving this comment here for posterity.
+  //
+  options.plugins = options.plugins.filter(
+    (plugin) => plugin.name !== 'dts-bundle',
+  )
+
+  return options
+}

package/src/index.ts

@@ -0,0 +1,29 @@
+export * from './lib/accordion/accordion'
+export * from './lib/alert-ribbon/alert-ribbon'
+export * from './lib/badge/badge'
+export * from './lib/card/card'
+export * from './lib/datepicker/datepicker'
+export * from './lib/dropdown/dropdown'
+export * from './lib/form'
+export * from './lib/formItem'
+export * from './lib/layout'
+export * from './lib/in-page-wizard'
+export * from './lib/link/link'
+export * from './lib/list'
+export * from './lib/grouped-list'
+export * from './lib/navbar/navbar'
+export * from './lib/select'
+export * from './lib/slider'
+export * from './lib/stepper/stepper'
+export * from './lib/tabs/tabs'
+export * from './lib/modal/modal'
+export * from './lib/context-menu/context-menu'
+export * from './types'
+export * from './lib/icon/icons'
+export * from './lib/table/components'
+export * from './lib/icons'
+export * from './lib/breadcrumb/breadcrumb'
+export * from './lib/segmented-control/segmented-control'
+
+// Backwards compatibility export
+export { AlertRibbon as Alert } from './lib/alert-ribbon/alert-ribbon'

package/src/introduction/install.mdx

@@ -0,0 +1,39 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Install" />
+
+# Green React
+
+Green React is a collection of React components for the Green design system. It provides a set of reusable components that can be easily integrated into your React applications.
+
+## Legacy code
+
+A migration is currently in progress, where the React-specific implementations are being replaced by framework-agnostic web components. This means that some components in this library are plain React components, and some are simply wrappers for web components. Some wrappers are more complex than others in order to maintain the same API as the original React components.
+
+When this work was started, React still did not have proper support for web components, and these wrappers were necessary. Since then, things have changed a bit, and React 19 now does have proper support for web components. This means that we now also export React-versions of the web components from the Green Core library (`@sebgroup/green-core`). A benefit of this is these components will always be up to date and provide a 1:1 feature parity with the web components. Therefore, going forward, the recommended way of consuming React components is to import them directly from `@sebgroup/green-core/react`. You can find more information about this in the [Green Core Storybook](https://storybook.seb.io/latest/core/?path=/docs/green-design-system--docs).
+
+### In this library
+
+Of the components in this library, these are currently wrappers, and use a web component from Green Core under the hood:
+- Context menu
+- Dropdown
+- Datepicker
+- Popover
+- Filter chips
+- Grouped list
+- Segmented control
+
+The rest are regular React components, and will be migrated or deprecated over time. Prefer to use the web components whenever possible.
+
+Another this to be aware of is that the regular React components rely on the Chlorophyll CSS framework for styling (this is included as a dependency), while the web components have styles included and encapsulated in shadow DOM out of the box.
+
+## Install
+
+Install React components npm package using the following
+
+```
+npm install @sebgroup/green-react --save
+
+```
+
+[Next step](./?path=/story/use--page)

package/src/introduction/testing.mdx

@@ -0,0 +1,94 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Testing" />
+
+# Testing React applications built with Green
+
+## Jest
+
+To test React applications using Green React, you need to add some extra configuration. Because
+some of the components in Green are Web Components, and Jest runs in a Node environment, Jest
+needs some browser APIs mocked. Also, the code in both the `@sebgroup/green-react` and `@sebgroup/green-core`
+packages needs to be transformed by Babel before Jest can understand it. If you run into errors like
+`Jest encountered an unexpected token`, this is probably the reason.
+
+To make testing as seamless as possible, Green provides some pre-packaged configuration that you can apply to your Jest configuration.
+
+### Babel config
+
+First, you need to make sure that you have `babel-jest` installed in your project. If you don't, you can install it by running:
+
+```bash
+$ npm install --save-dev babel-jest @babel/core @babel/preset-env
+```
+
+Then, create a file called `babel.config.js` in the root of your project with the following content:
+
+```js
+module.exports = {
+  presets: [['@babel/preset-env', { targets: { node: 'current' } }]],
+}
+```
+
+### Jest config
+
+To use the config from Green, you first need to make sure your Jest config is written in Javascript and not Typescript,
+or else convert it. If you have a `jest.config.ts` file, rename it to `jest.config.cjs`.
+
+Then, change the `const config = { ... }` to `module.exports = { ... }`. Also remove the `export default config` line.
+
+Then, you can extend your configuration like this:
+
+```js
+// import green jest config
+const greenJestConfig = require('@sebgroup/green-core/jest-config')
+
+// apply the green jest config
+module.exports = greenJestConfig.apply({
+  // Your existing config, for example:
+  testEnvironment: 'jsdom',
+  transform: {
+    '^.+\\.(js|jsx)$': 'babel-jest',
+    '^.+\\.(ts|tsx)$': 'ts-jest',
+  },
+  clearMocks: true,
+  coverageProvider: 'v8',
+  testEnvironment: 'jsdom',
+  setupFilesAfterEnv: ['<rootDir>/setup-jest.ts'],
+})
+```
+
+With both Babel and Jest properly configured, you should be able to test your app as usual with Jest.
+
+## Interacting with Green web components in a test
+
+Here's an example using `@testing-library/react` to test a React component that uses a Green web component internally:
+
+```tsx
+// Import types from Green core:
+import type { GdsDropdown } from '@sebgroup/green-core'
+
+// Then in your test:
+it('should render correct dropdown text', async () => {
+  // arrange
+  const { container } = render(<HelloWorld msg="Hello React!" />)
+
+  // Query the DOM using the GdsDropdown type
+  const dropdown = container.querySelector<GdsDropdown>(
+    '[gds-element="gds-dropdown"]', // This is the attribute that Green components use to identify themselves, since the element name itself will have a scoping suffix.
+  )!
+
+  // act
+  dropdown.value = '1'
+
+  // Wait for both `updateComplete` and `setTimeout` (for the next event loop tick)
+  // This is usually enough to let the Web Component work out it's internal state
+  await dropdown.updateComplete
+  await new Promise((resolve) => setTimeout(resolve, 0))
+
+  // assert
+  expect(dropdown?.displayValue).toContain('Option 1')
+})
+```
+
+Check the component's API documentation for more information on how to interact with the components.

package/src/introduction/use.mdx

@@ -0,0 +1,45 @@
+import { Meta } from '@storybook/blocks'
+
+<Meta title="Use" />
+
+# Use
+
+**Note:** The preferred way to consume React components is from the Core library. Read how to do it [here](https://storybook.seb.io/latest/core/?path=/docs/guides-react--docs)
+
+But if you need components from this storybook, read on.
+
+## Use Components with Chlorophyll styles
+
+React components rely on Chlorophyll styling to work as intented. Introduce the chlorophyll library to your main styles file which is typically `styles.css` located in your `src` folder
+
+```css
+// project/src/styles.scss
+@use "~@sebgroup/chlorophyll/scss";
+```
+
+**Note:** Depending on your bundler, you may need to configure the font path by setting the `$font-path` variable:
+
+```css
+@use '@sebgroup/chlorophyll/scss' with (
+  $font-path: '@sebgroup/fonts/fonts'
+);
+```
+
+### Selective imports
+
+I you are only using a few components, it's better to selectively import the components you need. This will reduce the size of the final css bundle.
+
+Check out the example on [this page](https://storybook.seb.io/latest/chlorophyll/?path=/docs/get-started-use--page).
+
+## Importing a React component
+
+Within your React project component file, you can import green-react components as below:
+
+```ts
+// project/src/ProjectComponent
+import { Button } from "@sebgroup/green-react";
+
+...
+
+<Button variant="secondary"> Click Me </Button>
+```

package/src/lib/accordion/accordion-item.tsx

@@ -0,0 +1,89 @@
+import React, { JSX, ReactNode, RefObject, useRef, useState } from 'react'
+
+interface AccordionItemProps {
+  item: AccordionItemInterface
+  index: number
+  uuid: string
+}
+
+export interface AccordionItemInterface {
+  label?: string
+  customLabel?: ReactNode
+  /*
+   * https://www.w3.org/WAI/ARIA/apg/patterns/accordion/
+   * Each accordion button needs to be wrapped in a heading that has a set value for aria-level.
+   * This can be done on a div by setting the heading role and the correct aria-level for the element
+   * */
+  labelElementLevel: 2 | 3 | 4 | 5 | 6
+  subLabel?: string
+  content: JSX.Element
+  onClick?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+  onOpen?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+  onClose?: (e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void
+  defaultOpen?: boolean
+}
+
+const AccordionItem = ({ item, index, uuid }: AccordionItemProps) => {
+  const { labelElementLevel, label, subLabel, content, customLabel } = item
+  const contentRef = useRef<HTMLDivElement>(null)
+
+  const [isOpen, setIsOpen] = useState(item.defaultOpen || false)
+
+  const handleOnClick = (
+    event: React.MouseEvent<HTMLButtonElement, MouseEvent>,
+  ) => {
+    item.onClick && item.onClick(event)
+    setIsOpen((state) => {
+      if (!state) {
+        item.onOpen && item.onOpen(event)
+        window.requestAnimationFrame(() => {
+          contentRef.current?.scrollIntoView({
+            behavior: 'smooth',
+            block: 'nearest',
+          })
+        })
+      } else {
+        item.onClose && item.onClose(event)
+      }
+      return !state
+    })
+  }
+
+  return (
+    <div>
+      <div role="heading" aria-level={labelElementLevel}>
+        <button
+          id={`accordion-item-button-${index}-${uuid}`}
+          aria-expanded={isOpen}
+          aria-controls={`accordion-item-region-${index}-${uuid}`}
+          onClick={(event) => {
+            handleOnClick(event)
+          }}
+        >
+          {customLabel ? customLabel : <span>{label}</span>}
+          {subLabel && <span>{subLabel}</span>}
+          <svg
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M18.8095 9.22817L18.1907 8.60942C18.0438 8.46255 17.8063 8.46255 17.6595 8.60942L12.0001 14.2563L6.34072 8.60942C6.19385 8.46255 5.95635 8.46255 5.80947 8.60942L5.19072 9.22817C5.04385 9.37505 5.04385 9.61255 5.19072 9.75942L11.7345 16.3032C11.8813 16.45 12.1188 16.45 12.2657 16.3032L18.8095 9.75942C18.9563 9.61255 18.9563 9.37505 18.8095 9.22817Z"
+              fill="#333333"
+            />
+          </svg>
+        </button>
+      </div>
+      <div
+        role="region"
+        id={`accordion-item-region-${index}-${uuid}`}
+        aria-labelledby={`accordion-item-button-${index}-${uuid}`}
+        hidden={!isOpen}
+      >
+        <div ref={contentRef}>{content}</div>
+      </div>
+    </div>
+  )
+}
+
+export default AccordionItem

package/src/lib/accordion/accordion.mdx

@@ -0,0 +1,58 @@
+import { Meta, Story, Canvas, Markdown } from '@storybook/blocks'
+import Accordion from './accordion'
+import * as AccordionStories from './accordion.stories';
+
+export const Template = (args) => <Accordion {...args} />
+
+<Meta of={AccordionStories} />
+
+# Accordion
+
+An accordion lets users show and hide sections of related content on a page.
+
+<Story of={AccordionStories.Default} />
+
+<br />
+
+## Description
+
+Accordions can make information processing more effective. Best suited for plain text, lists, tables and inline links. A good example for use could be a FAQ and Terms and conditions.
+
+## Usage
+
+Use the accordions to "hide" information that users doesn't necessarily need to read or only need to read occasionally. If the majority of users will read it, it should be visible.
+
+## Props
+
+<Markdown>
+  {`
+  | Prop  | Type                            | Description                    |
+  | :---- | :------------------------------ | :----------------------------- |
+  | items | \`Array<AccordionItemInterface>\` | List of items in the accordion |
+  `}
+</Markdown>
+
+### AccordionItemInterface
+
+<Markdown>
+  {`
+  | Key            | Type                                                           |
+  | :--------------| :------------------------------------------------------------- |
+  | label          | \`string\`                                                       |
+  | subLabel       | \`string\`                                                       |
+  | content        | \`JSXElement\`                                                   |
+  | onClick?       | \`(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\` |
+  | onOpen?        | \`(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\` |
+  | onClose?       | \`(e: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void\` |
+  | defaultOpen?   | \`boolean\` |
+  | customLabel    | \`ReactNode\`                                                 |
+  `}
+</Markdown>
+
+## Example
+
+<Canvas>
+  {/* <Story id="components-accordion--accordion" /> is deprecated, please migrate it to <Story of={referenceToStory} /> see: https://storybook.js.org/migration-guides/7.0 */}
+
+  <Story id="components-accordion--accordion" />
+</Canvas>