@coopdigital/react 0.0.8 → 0.0.10

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Co-operative Group Limited
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,160 @@
+<nav>
+<img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/logos/coopeng-logo.svg" alt="Co-op logo" width="100"/>
+<br />
+<br />
+</nav>
+
+
+
+# Experience Kit for React
+
+<!-- ALL-CONTRIBUTORS-BADGE:START - Do not remove or modify this section -->
+[all_contributors_badge]: https://img.shields.io/badge/all_contributors-15-C08A00.svg '' 
+<!-- ALL-CONTRIBUTORS-BADGE:END -->
+
+<a href="https://www.npmjs.com/package/@coopdigital/react"><img src="https://img.shields.io/npm/v/%40coopdigital%2Freact?color=E85A00" alt="npm version" /></a>
+<img alt="NPM Last Update" src="https://img.shields.io/npm/last-update/%40coopdigital%2Freact?label=published&color=6762F9">
+<img alt="NPM Downloads" src="https://img.shields.io/npm/d18m/%40coopdigital%2Freact?color=819C00">
+<a href="https://static.coop.co.uk/experience-kit-storybook-react"><img src="https://img.shields.io/badge/storybook-react-F85792" alt="storybook" /></a>
+[![All Contributors][all_contributors_badge]](#contributors)
+
+
+
+
+## Getting started
+
+Install the package from NPM:
+```
+npm install @coopdigital/react
+```
+
+Import the components that you need:
+```
+import { Button } from "@coopdigital/react"
+```
+
+## Developing
+
+Refer to the [root README](https://gitlab.com/coopeng/sds/oneweb/experience-kit/-/blob/main/README.md) for general development setup and usage instructions (lint, formatting, etc).
+
+
+### Package Scripts
+
+The following scripts should be run inside the react package folder.
+
+
+| Script               | Action                                   |
+| -------------------- | ---------------------------------------- |
+| `npm run test` | To run vitest |
+| `npm run test:coverage` | To run vitest test coverage |
+| `npm run test:e2e` | To run playwright in headless mode |
+| `npm run test:e2e:ui` | To run playwright with UI |
+| `npm run build` | To run build script |
+| `npm run build:storybook` | To build storybook |
+| `npm run storybook` | To run storybook |
+
+
+
+## Contributors ✨
+
+Thanks goes to these wonderful people:
+<!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->
+<!-- prettier-ignore-start -->
+<!-- markdownlint-disable -->
+<table>
+<tbody>
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/aaronrleslie">
+<div><img src="https://ca.slack-edge.com/T0C9E3ZF0-UKMP0F917-34a22da610d8-150" width="200px;" alt=""/></div>
+<small>Aaron Leslie</small>
+<div><a href="#infra-aaronrleslie" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></div>
+</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/catia.costa1">
+<div><img src="https://gitlab.com/uploads/-/system/user/avatar/25728410/avatar.png" width="200px;" alt=""/></div>
+<small>Catia Costa</small>
+<div><a href="#a11y-catia.costa1" title="Accessibility">️️️️♿️</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Documentation">📖</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Tests">⚠️</a></div>
+</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/chris.latimer">
+<div><img src="https://gitlab.com/uploads/-/system/user/avatar/10570471/avatar.png" width="200px;" alt=""/></div>
+<small>Chris Latimer</small>
+<div><a href="#infra-chris.latimer" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a></div>
+</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/craig.mckay">
+<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
+<small>Craig Mckay</small>
+<div><a href="#projectManagement-craig.mckay" title="Project Management">📆</a></div>
+</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/daniel.lippross">
+<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
+<small>Daniel Lippross</small>
+<div><a href="#platform-daniel.lippross" title="Packaging/porting to new platform">📦</a></div>
+</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/emalin.matthews">
+<div><img src="https://ca.slack-edge.com/T0C9E3ZF0-UMGDXU8JH-ade541a7f09e-150" width="200px;" alt=""/></div>
+<small>Emalin Matthews</small>
+<div><a href="#a11y-emalin.matthews" title="Accessibility">️️️️♿️</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Documentation">📖</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Tests">⚠️</a></div>
+</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/jelena.milosevic">
+<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
+<small>Jelena Milosevic</small>
+<div><a href="#infra-jelena.milosevic" title="Infrastructure (Hosting, Build-Tools, etc)">🚇</a></div>
+</a></td>
+    </tr><br />
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/kamini.pagare">
+<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
+<small>Kamini Pagare</small>
+<div><a href="#a11y-kamini.pagare" title="Accessibility">️️️️♿️</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Documentation">📖</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Tests">⚠️</a></div>
+</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="">
+<div><img src="https://ca.slack-edge.com/T0C9E3ZF0-U3AJ40BGS-ec515dc443cb-150" width="200px;" alt=""/></div>
+<small>Lee Connolly</small>
+<div><a href="#projectManagement-lee.connolly" title="Project Management">📆</a></div>
+</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="">
+<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
+<small>Liam Hall</small>
+<div><a href="#projectManagement-liam.hall" title="Project Management">📆</a></div>
+</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="">
+<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/meg.jpg" width="200px;" alt=""/></div>
+<small>Meg White</small>
+<div><a href="#projectManagement-meg.white" title="Project Management">📆</a></div>
+</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/omid.kashan">
+<div><img src="https://secure.gravatar.com/avatar/faf90b70d749cf9460eb603fa1700add94fd7d3a32645b4be6fa12eb45c4ffa3?s=80&d=identicon" width="200px;" alt=""/></div>
+<small>Omid Kashan</small>
+<div><a href="#a11y-omid.kashan" title="Accessibility">️️️️♿️</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Documentation">📖</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Tests">⚠️</a></div>
+</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/sam.harden">
+<div><img src="https://ca.slack-edge.com/T0C9E3ZF0-U03NT7D39L6-2fc82e7f7c6e-150" width="200px;" alt=""/></div>
+<small>Sam Harden</small>
+<div><a href="#a11y-sam.harden" title="Accessibility">️️️️♿️</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Documentation">📖</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Tests">⚠️</a></div>
+</a></td>
+      <td align="center" valign="top" width="14.28%"><a href="">
+<div><img src="https://s3.eu-west-1.amazonaws.com/assets.digital.coop.co.uk/oneweb/blank.jpg" width="200px;" alt=""/></div>
+<small>Shweta Jaju</small>
+<div><a href="#userTesting-shweta.jaju" title="User Testing">📓</a></div>
+</a></td>
+    </tr><br />
+    <tr>
+      <td align="center" valign="top" width="14.28%"><a href="https://gitlab.com/theodore.kouzelis">
+<div><img src="https://secure.gravatar.com/avatar/3988f940029d9053174ac68e7f5bfa8fd61f184872d46281f44e2e698711d37d?s=80&d=identicon" width="200px;" alt=""/></div>
+<small>Theo Kouzelis</small>
+<div><a href="#a11y-theodore.kouzelis" title="Accessibility">️️️️♿️</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Code">💻</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Documentation">📖</a> <a href="https://gitlab.com/coopeng/sds/oneweb/experience-kit/commits/master" title="Tests">⚠️</a></div>
+</a></td>
+    </tr>
+</tbody></table>
+
+
+<!-- markdownlint-restore -->
+<!-- prettier-ignore-end -->
+
+<!-- ALL-CONTRIBUTORS-LIST:END -->
+
+This project follows the [all-contributors](https://github.com/all-contributors/all-contributors) specification. Check out the [contributing guidelines](https://gitlab.com/coopeng/sds/oneweb/experience-kit/-/blob/main/CONTRIBUTING.md) to add new people. Contributions of any kind welcome! 
+
+
+## Troubleshooting
+
+This is still a work in progress, we appreciate feedback. If you have any issues, please get in touch via [tech query channel on slack](https://co-opdigital.slack.com/archives/C0167V69R8W).

package/dist/components/Button/Button.e2e.test.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/components/Button/Button.test.d.ts

@@ -0,0 +1,4 @@
+/**
+ * @vitest-environment jsdom
+ */
+export {};

package/package.json

@@ -1,27 +1,29 @@
 {
   "name": "@coopdigital/react",
   "type": "module",
-  "version": "0.0.8",
+  "version": "0.0.10",
   "main": "src/index.ts",
   "private": false,
   "publishConfig": {
     "access": "public"
   },
   "files": [
-    "dist/*"
+    "dist",
+    "src"
   ],
   "scripts": {
     "test": "vitest run",
     "test:coverage": "vitest run --coverage",
-    "build-storybook": "storybook build",
     "build": "tsx scripts build",
+    "build:storybook": "storybook build --disable-telemetry && npm run storybook:fix-paths",
     "test:e2e": "npx playwright test",
     "test:e2e:ui": "npx playwright test --ui",
     "storybook": "storybook dev -p 6006",
-    "storybook:playwright": "storybook dev -p 9000"
+    "storybook:playwright": "storybook dev -p 9000",
+    "storybook:fix-paths": "tsx scripts/storybook-fix-paths.ts"
   },
   "author": "",
-  "license": "ISC",
+  "license": "MIT",
   "description": "",
   "devDependencies": {
     "@axe-core/playwright": "^4.10.1",
@@ -49,5 +51,5 @@
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
-  "gitHead": "a09ce8f3b343338a120f08608287a5284d285c13"
+  "gitHead": "a8fc664a2f4931af694002d4fe3b7832cff99569"
 }

package/src/components/Button/Button.e2e.test.ts

@@ -0,0 +1,8 @@
+import { expect, test } from "@playwright/test"
+
+const server_url = "/iframe.html?viewMode=story&id=components-button--primary&args=&globals="
+
+test("Add to basket button visibility", async ({ page }) => {
+  await page.goto(server_url)
+  await expect(page.getByRole("button", { name: "Add to basket" })).toBeVisible()
+})

package/src/components/Button/Button.stories.tsx

@@ -0,0 +1,13 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import Button from "./Button"
+
+const meta = {
+  component: Button,
+} satisfies Meta<typeof Button>
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Primary: Story = {}

package/src/components/Button/Button.test.tsx

@@ -0,0 +1,18 @@
+/**
+ * @vitest-environment jsdom
+ */
+
+import { render } from "@testing-library/react"
+import { describe, it, afterEach } from "vitest"
+import { Button } from "."
+import { cleanup } from "@testing-library/react"
+afterEach(() => {
+  cleanup()
+})
+
+describe("Button", () => {
+  it("renders button", () => {
+    render(<Button />)
+    //screen.debug()
+  })
+})

package/src/components/Button/Button.tsx

@@ -0,0 +1,10 @@
+export const Button = () => {
+  const a = "test"
+
+  return (
+    <button data-testid="react-button-id" className={a}>
+      Add to basket
+    </button>
+  )
+}
+export default Button

package/src/components/Button/index.ts

@@ -0,0 +1,5 @@
+import Button from "./Button"
+
+export default Button
+export { Button }
+export * from "./Button"