@camunda/camunda-composite-components 0.1.1 → 0.1.2

package/lib/esm/components/test-utils.js

@@ -0,0 +1,22 @@
+import fs from "fs";
+import path from "path"; // Add this import
+const STORYBOOK_DIR = path.resolve(__dirname, "../../storybook-static/");
+/** Load Storybook story for Playwright testing */
+export async function getStory(page, storyID) {
+    // Load stories.json
+    const storiesManifestPath = path.resolve(STORYBOOK_DIR, "stories.json");
+    if (!fs.existsSync(storiesManifestPath)) {
+        throw new Error("Could not find storybook-static/stories.json. Try rebuilding with `yarn build:storybook`");
+    }
+    const storiesManifest = JSON.parse(fs.readFileSync(storiesManifestPath, "utf8"));
+    // Find the specified story
+    const story = storiesManifest.stories[storyID];
+    if (!story) {
+        throw new Error(`Could not find story ID "${storyID}".`);
+    }
+    // Navigate to the specific story
+    const search = new URLSearchParams({ viewMode: "story", id: storyID });
+    await page.goto(`iframe?${search.toString()}`, {
+        waitUntil: "networkidle",
+    });
+}

package/lib/esm/icons/c3-icons.d.ts

@@ -1,8 +1,5 @@
-/// <reference types="react" />
-import { C3IconProps } from "./c3-icons.types"
-export declare const C3AppMenuIcon: ({ size }: C3IconProps) => JSX.Element
-export declare const C3NotificationsUnreadIcon: ({
-	size,
-}: C3IconProps) => JSX.Element
-export declare const C3BellIcon: ({ size }: C3IconProps) => JSX.Element
-export declare const CamundaLogo: () => JSX.Element
+import { C3IconProps } from "./c3-icons.types";
+export declare const C3AppMenuIcon: ({ size }: C3IconProps) => JSX.Element;
+export declare const C3NotificationsUnreadIcon: ({ size }: C3IconProps) => JSX.Element;
+export declare const C3BellIcon: ({ size }: C3IconProps) => JSX.Element;
+export declare const CamundaLogo: () => JSX.Element;

package/lib/esm/icons/c3-icons.js

@@ -1,82 +1,14 @@
-import React from "react"
-export const C3AppMenuIcon = ({ size }) =>
-	React.createElement(
-		"svg",
-		{
-			width: size,
-			height: size,
-			viewBox: `0 0 ${size} ${size}`,
-			fill: "transparent",
-			xmlns: "http://www.w3.org/2000/svg",
-		},
-		React.createElement("path", {
-			fill: "transparent",
-			style: { mixBlendMode: "multiply" },
-			d: "M0 0h20v20H0z",
-		}),
-		React.createElement("path", {
-			d: "M11.5 1h-3v3h3V1ZM4 1H1v3h3V1Zm15 0h-3v3h3V1Zm-7.5 7.5h-3v3h3v-3ZM4 8.5H1v3h3v-3Zm15 0h-3v3h3v-3ZM11.5 16h-3v3h3v-3ZM4 16H1v3h3v-3Zm15 0h-3v3h3v-3Z",
-		}),
-	)
-export const C3NotificationsUnreadIcon = ({ size }) =>
-	React.createElement(
-		"svg",
-		{
-			width: size,
-			height: size,
-			viewBox: `0 0 ${size} ${size}`,
-			fill: "none",
-			xmlns: "http://www.w3.org/2000/svg",
-		},
-		React.createElement("path", {
-			fillRule: "evenodd",
-			clipRule: "evenodd",
-			d: "M10.625.857V.625h-1.25v1.282A6.258 6.258 0 0 0 3.75 8.125v2.241l-1.692 1.692a.625.625 0 0 0-.183.442v1.875A.625.625 0 0 0 2.5 15h4.375v.486a3.22 3.22 0 0 0 2.813 3.249 3.129 3.129 0 0 0 3.437-3.11V15H17.5a.624.624 0 0 0 .625-.625V12.5a.625.625 0 0 0-.183-.442l-.939-.939a6.174 6.174 0 0 1-1.46.308l1.332 1.332v.991H3.125v-.991l1.692-1.692A.625.625 0 0 0 5 10.625v-2.5a5 5 0 0 1 4.148-4.927A6.202 6.202 0 0 1 10.625.857Zm5.625 9.235V8.125a6.258 6.258 0 0 0-5.044-6.131 5.003 5.003 0 0 0-.743 1.152A5 5 0 0 1 15 8.125v2.125c.432 0 .85-.055 1.25-.158Zm-4.924 6.859c.351-.352.549-.829.549-1.326V15h-3.75v.625a1.875 1.875 0 0 0 3.2 1.326Z",
-			fill: "$icon-primary",
-		}),
-		React.createElement("path", {
-			d: "M15 10.25a5 5 0 1 0 0-10 5 5 0 0 0 0 10Z",
-			style: { fill: "var(--cds-link-primary)" },
-		}),
-	)
-export const C3BellIcon = ({ size }) =>
-	React.createElement(
-		"svg",
-		{
-			width: size,
-			height: size,
-			viewBox: `0 0 ${size} ${size}`,
-			fill: "transparent",
-			xmlns: "http://www.w3.org/2000/svg",
-		},
-		React.createElement("path", {
-			d: "M50.2373 33.7627L45.5 29.0253V22.75C45.4944 18.4134 43.881 14.2329 40.9718 11.0169C38.0626 7.80093 34.0643 5.77786 29.75 5.3389V1.75H26.25V5.3389C21.9357 5.77786 17.9374 7.80093 15.0282 11.0169C12.119 14.2329 10.5056 18.4134 10.5 22.75V29.0253L5.76275 33.7627C5.60018 33.9252 5.47122 34.118 5.38324 34.3303C5.29526 34.5426 5.24998 34.7702 5.25 35V40.25C5.25 40.7141 5.43437 41.1592 5.76256 41.4874C6.09075 41.8156 6.53587 42 7 42H19.25V43.75C19.25 46.0706 20.1719 48.2962 21.8128 49.9372C23.4538 51.5781 25.6794 52.5 28 52.5C30.3206 52.5 32.5462 51.5781 34.1872 49.9372C35.8281 48.2962 36.75 46.0706 36.75 43.75V42H49C49.4641 42 49.9092 41.8156 50.2374 41.4874C50.5656 41.1592 50.75 40.7141 50.75 40.25V35C50.75 34.7702 50.7047 34.5426 50.6168 34.3303C50.5288 34.118 50.3998 33.9252 50.2373 33.7627ZM33.25 43.75C33.25 45.1424 32.6969 46.4777 31.7123 47.4623C30.7277 48.4469 29.3924 49 28 49C26.6076 49 25.2723 48.4469 24.2877 47.4623C23.3031 46.4777 22.75 45.1424 22.75 43.75V42H33.25V43.75Z",
-			fill: "#FF8201",
-		}),
-	)
-export const CamundaLogo = () =>
-	React.createElement(
-		"svg",
-		{
-			xmlns: "http://www.w3.org/2000/svg",
-			width: "24",
-			height: "24",
-			viewBox: "0 0 24 24",
-			fill: "none",
-		},
-		React.createElement("title", null, "Camunda logo"),
-		React.createElement("rect", {
-			width: "24",
-			height: "24",
-			rx: "3",
-			style: { fill: "var(--cds-icon-primary)" },
-		}),
-		React.createElement("path", {
-			d: "M11.986 15.585c1.824 0 2.762-1.075 2.776-2.967v-1.564h-1.755v1.687c0 .844-.368 1.143-.966 1.143-.585 0-.966-.3-.966-1.143V6.364c0-.843.367-1.17.966-1.156.585 0 .966.326.966 1.17v1.261h1.755V6.496c0-1.891-.94-2.965-2.762-2.965-1.823 0-2.764 1.074-2.776 2.965v6.136c0 1.864.943 2.953 2.762 2.953Z",
-			style: { fill: "var(--cds-text-inverse)" },
-		}),
-		React.createElement("path", {
-			d: "M14.762 17.312H9.224v3.13h5.538v-3.13Z",
-			fill: "#FC5D0D",
-		}),
-	)
+import React from "react";
+export const C3AppMenuIcon = ({ size }) => (React.createElement("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "transparent", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { fill: "transparent", style: { mixBlendMode: "multiply" }, d: "M0 0h20v20H0z" }),
+    React.createElement("path", { d: "M11.5 1h-3v3h3V1ZM4 1H1v3h3V1Zm15 0h-3v3h3V1Zm-7.5 7.5h-3v3h3v-3ZM4 8.5H1v3h3v-3Zm15 0h-3v3h3v-3ZM11.5 16h-3v3h3v-3ZM4 16H1v3h3v-3Zm15 0h-3v3h3v-3Z" })));
+export const C3NotificationsUnreadIcon = ({ size }) => (React.createElement("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "none", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { fillRule: "evenodd", clipRule: "evenodd", d: "M10.625.857V.625h-1.25v1.282A6.258 6.258 0 0 0 3.75 8.125v2.241l-1.692 1.692a.625.625 0 0 0-.183.442v1.875A.625.625 0 0 0 2.5 15h4.375v.486a3.22 3.22 0 0 0 2.813 3.249 3.129 3.129 0 0 0 3.437-3.11V15H17.5a.624.624 0 0 0 .625-.625V12.5a.625.625 0 0 0-.183-.442l-.939-.939a6.174 6.174 0 0 1-1.46.308l1.332 1.332v.991H3.125v-.991l1.692-1.692A.625.625 0 0 0 5 10.625v-2.5a5 5 0 0 1 4.148-4.927A6.202 6.202 0 0 1 10.625.857Zm5.625 9.235V8.125a6.258 6.258 0 0 0-5.044-6.131 5.003 5.003 0 0 0-.743 1.152A5 5 0 0 1 15 8.125v2.125c.432 0 .85-.055 1.25-.158Zm-4.924 6.859c.351-.352.549-.829.549-1.326V15h-3.75v.625a1.875 1.875 0 0 0 3.2 1.326Z", fill: "$icon-primary" }),
+    React.createElement("path", { d: "M15 10.25a5 5 0 1 0 0-10 5 5 0 0 0 0 10Z", style: { fill: "var(--cds-link-primary)" } })));
+export const C3BellIcon = ({ size }) => (React.createElement("svg", { width: size, height: size, viewBox: `0 0 ${size} ${size}`, fill: "transparent", xmlns: "http://www.w3.org/2000/svg" },
+    React.createElement("path", { d: "M50.2373 33.7627L45.5 29.0253V22.75C45.4944 18.4134 43.881 14.2329 40.9718 11.0169C38.0626 7.80093 34.0643 5.77786 29.75 5.3389V1.75H26.25V5.3389C21.9357 5.77786 17.9374 7.80093 15.0282 11.0169C12.119 14.2329 10.5056 18.4134 10.5 22.75V29.0253L5.76275 33.7627C5.60018 33.9252 5.47122 34.118 5.38324 34.3303C5.29526 34.5426 5.24998 34.7702 5.25 35V40.25C5.25 40.7141 5.43437 41.1592 5.76256 41.4874C6.09075 41.8156 6.53587 42 7 42H19.25V43.75C19.25 46.0706 20.1719 48.2962 21.8128 49.9372C23.4538 51.5781 25.6794 52.5 28 52.5C30.3206 52.5 32.5462 51.5781 34.1872 49.9372C35.8281 48.2962 36.75 46.0706 36.75 43.75V42H49C49.4641 42 49.9092 41.8156 50.2374 41.4874C50.5656 41.1592 50.75 40.7141 50.75 40.25V35C50.75 34.7702 50.7047 34.5426 50.6168 34.3303C50.5288 34.118 50.3998 33.9252 50.2373 33.7627ZM33.25 43.75C33.25 45.1424 32.6969 46.4777 31.7123 47.4623C30.7277 48.4469 29.3924 49 28 49C26.6076 49 25.2723 48.4469 24.2877 47.4623C23.3031 46.4777 22.75 45.1424 22.75 43.75V42H33.25V43.75Z", fill: "#FF8201" })));
+export const CamundaLogo = () => (React.createElement("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", viewBox: "0 0 24 24", fill: "none" },
+    React.createElement("title", null, "Camunda logo"),
+    React.createElement("rect", { width: "24", height: "24", rx: "3", style: { fill: "var(--cds-icon-primary)" } }),
+    React.createElement("path", { d: "M11.986 15.585c1.824 0 2.762-1.075 2.776-2.967v-1.564h-1.755v1.687c0 .844-.368 1.143-.966 1.143-.585 0-.966-.3-.966-1.143V6.364c0-.843.367-1.17.966-1.156.585 0 .966.326.966 1.17v1.261h1.755V6.496c0-1.891-.94-2.965-2.762-2.965-1.823 0-2.764 1.074-2.776 2.965v6.136c0 1.864.943 2.953 2.762 2.953Z", style: { fill: "var(--cds-text-inverse)" } }),
+    React.createElement("path", { d: "M14.762 17.312H9.224v3.13h5.538v-3.13Z", fill: "#FC5D0D" })));

package/lib/esm/icons/c3-icons.types.d.ts

@@ -1,3 +1,3 @@
 export interface C3IconProps {
-	size: number
+    size: number;
 }

package/lib/esm/icons/c3-icons.types.js

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

package/lib/esm/index.d.ts

@@ -1,14 +1,9 @@
-export { C3EmptyState } from "./components/c3-empty-state/c3-empty-state"
-export { C3EmptyStateProps } from "./components/c3-empty-state/c3-empty-state.types"
-export { default as C3Navigation } from "./components/c3-navigation"
-export {
-	C3NavigationAppProps,
-	C3NavigationElementProps,
-	C3NavigationNavBarProps,
-	C3NavigationProps,
-} from "./components/c3-navigation/c3-navigation.types"
-export { C3NavigationSideBarBaseProps } from "./components/c3-navigation/c3-navigation-sidebar/c3-navigation-sidebar.types"
-export { C3AppMenuIcon } from "./icons/c3-icons"
-export { C3IconProps } from "./icons/c3-icons.types"
-export { default as C3UserConfigurationProvider } from "./components/c3-user-configuration/c3-user-configuration-provider"
-export { C3UserConfiguration } from "./components/c3-user-configuration/c3-user-configuration-provider"
+export { C3EmptyState } from "./components/c3-empty-state/c3-empty-state";
+export { C3EmptyStateProps } from "./components/c3-empty-state/c3-empty-state.types";
+export { default as C3Navigation } from "./components/c3-navigation";
+export { C3NavigationAppProps, C3NavigationElementProps, C3NavigationNavBarProps, C3NavigationProps, } from "./components/c3-navigation/c3-navigation.types";
+export { C3NavigationSideBarBaseProps } from "./components/c3-navigation/c3-navigation-sidebar/c3-navigation-sidebar.types";
+export { C3AppMenuIcon } from "./icons/c3-icons";
+export { C3IconProps } from "./icons/c3-icons.types";
+export { default as C3UserConfigurationProvider } from "./components/c3-user-configuration/c3-user-configuration-provider";
+export { C3UserConfiguration } from "./components/c3-user-configuration/c3-user-configuration-provider";

package/lib/esm/index.js

@@ -1,4 +1,4 @@
-export { C3EmptyState } from "./components/c3-empty-state/c3-empty-state"
-export { default as C3Navigation } from "./components/c3-navigation"
-export { C3AppMenuIcon } from "./icons/c3-icons"
-export { default as C3UserConfigurationProvider } from "./components/c3-user-configuration/c3-user-configuration-provider"
+export { C3EmptyState } from "./components/c3-empty-state/c3-empty-state";
+export { default as C3Navigation } from "./components/c3-navigation";
+export { C3AppMenuIcon } from "./icons/c3-icons";
+export { default as C3UserConfigurationProvider } from "./components/c3-user-configuration/c3-user-configuration-provider";

package/package.json

@@ -1,13 +1,13 @@
 {
 	"name": "@camunda/camunda-composite-components",
-	"version": "0.1.1",
+	"version": "0.1.2",
 	"scripts": {
 		"clean": "rimraf lib/",
-		"copy-css-files": "copyfiles -u 1 src/components/**/*.css lib/esm",
-		"build": "yarn clean && tsc && yarn copy-css-files",
+		"build": "yarn clean && tsc",
 		"storybook": "storybook dev -p 6006",
 		"start": "yarn storybook",
-		"build-storybook": "storybook build",
+		"build:storybook": "storybook build",
+		"serve:storybook": "serve ./storybook-static -p 8081 -n -L",
 		"prepare": "husky install",
 		"format": "prettier --write .",
 		"lint": "eslint src/",
@@ -15,15 +15,23 @@
 		"test:ts": "tsc --noEmit --project ./tsconfig.json",
 		"test:storybook": "TEST_A11Y=true test-storybook",
 		"test:storybook:smoke": "test-storybook",
-		"test": "yarn test:ts && yarn test:storybook"
+		"start:docker-storybook": "yarn build:storybook && docker run --rm --network host -v $(pwd):/work/ -w /work/ -it --name c3-visual-regression mcr.microsoft.com/playwright:v1.37.0 yarn serve:storybook",
+		"test:visual-regression": "wait-on http://localhost:8081 && PWTEST_SKIP_TEST_OUTPUT=1 yarn playwright test",
+		"test:visual-regression:ui": "yarn test:playwright --ui",
+		"report:visual-regression": "yarn playwright show-report",
+		"update:visual-regression": "yarn playwright test --update-snapshots",
+		"test:visual-regression:docker": "docker exec -it -t c3-visual-regression yarn test:visual-regression",
+		"update:visual-regression:docker": "docker exec -it -t c3-visual-regression yarn update:visual-regression",
+		"test": "yarn test:ts && yarn test:storybook && yarn test:visual-regression:docker"
 	},
 	"devDependencies": {
-		"@babel/core": "7.19.6",
-		"@babel/preset-env": "7.22.4",
-		"@babel/preset-react": "7.22.3",
-		"@babel/preset-typescript": "7.21.5",
-		"@carbon/react": "1.34.1",
+		"@babel/core": "7.22.10",
+		"@babel/preset-env": "7.22.10",
+		"@babel/preset-react": "7.22.5",
+		"@babel/preset-typescript": "7.22.5",
+		"@carbon/react": "1.35.0",
 		"@mdx-js/react": "1.6.22",
+		"@playwright/test": "1.37.0",
 		"@storybook/addon-a11y": "7.0.18",
 		"@storybook/addon-actions": "7.0.18",
 		"@storybook/addon-docs": "7.0.18",
@@ -34,10 +42,10 @@
 		"@storybook/preset-scss": "1.0.3",
 		"@storybook/react": "7.0.18",
 		"@storybook/react-webpack5": "7.0.18",
-		"@storybook/test-runner": "0.10.0",
-		"@storybook/testing-library": "0.1.0",
+		"@storybook/test-runner": "0.13.0",
+		"@storybook/testing-library": "0.2.0",
 		"@types/carbon-components-react": "7.55.2",
-		"@types/event-source-polyfill": "1.0.0",
+		"@types/event-source-polyfill": "1.0.1",
 		"@types/node": "18.11.5",
 		"@types/react": "18.0.22",
 		"@types/react-dom": "18.0.7",
@@ -54,19 +62,21 @@
 		"eslint-plugin-prettier": "4.2.1",
 		"eslint-plugin-react": "7.31.10",
 		"eslint-plugin-react-hooks": "4.6.0",
-		"eslint-plugin-storybook": "0.6.12",
+		"eslint-plugin-storybook": "0.6.13",
 		"event-source-polyfill": "1.0.31",
-		"husky": "8.0.0",
-		"prettier": "2.7.1",
+		"husky": "8.0.3",
+		"prettier": "2.8.8",
 		"react": "18.2.0",
 		"react-dom": "18.2.0",
 		"rimraf": "3.0.2",
 		"sass": "1.55.0",
 		"sass-loader": "13.1.0",
+		"serve": "14.2.0",
 		"storybook": "7.0.18",
-		"style-loader": "3.3.1",
-		"styled-components": "5.3.6",
-		"typescript": "4.8.4"
+		"style-loader": "3.3.3",
+		"styled-components": "5.3.11",
+		"typescript": "4.8.4",
+		"wait-on": "7.0.1"
 	},
 	"peerDependencies": {
 		"@carbon/react": "1.x",
@@ -83,5 +93,5 @@
 	],
 	"author": "Camunda",
 	"license": "Apache-2.0",
-	"packageManager": "yarn@3.2.1"
+	"packageManager": "yarn@3.6.1"
 }