@cucumber/react-components 20.0.0

package/LICENSE

@@ -0,0 +1,21 @@
+The MIT License (MIT)
+
+Copyright (c) Cucumber Ltd
+
+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,215 @@
+# @cucumber/react-components
+
+> A set of React components for rendering Gherkin documents and Cucumber results.
+
+## Screenshot
+
+![Examples Tables](screenshots/examples-tables.png)
+
+## Usage
+
+The source code for screenshots above is:
+
+```jsx
+<EnvelopesWrapper envelopes={envelopes}>
+  <GherkinDocumentList />
+</EnvelopesWrapper>
+```
+
+The [`<GherkinDocumentList>`](src/components/app/GherkinDocumentList.tsx) React component,
+is an accordion of [`<GherkinDocument>`](src/components/gherkin/GherkinDocument.tsx).
+
+The `<GherkinDocument>` React component and any component nested within it (such as [`<Scenario>`](src/components/gherkin/Scenario.tsx)) can be rendered standalone.
+
+## `<GherkinDocument>` features
+
+The `<GherkinDocument>` React component is instantiated with a single `gherkinDocument` prop.
+The value must be a [GherkinDocument](../../cucumber-messages/messages.md#io.cucumber.messages.GherkinDocument) object.
+You can use the [Gherkin](../../gherkin) parser to generate a `GherkinDocument` object.
+
+By default the `<GherkinDocument>` component will not display any coloured results, as the `GherkinDocument`
+message object does not contain results, only the [AST](https://en.wikipedia.org/wiki/Abstract_syntax_tree) of the document. 
+This is fine for simple use cases where results are not important.
+
+To render a `<GherkinDocument>` with results and highlighted [Cucumber Expression parameters](https://cucumber.io/docs/cucumber/cucumber-expressions/) parameters it must be nested inside a 
+[`<Wrapper>`](src/components/app/Wrapper.tsx) component.
+
+## Styling
+
+The standard styling comes from wrapping your top-level usage with the `CucumberReact` component (sans-props). There are several ways you can apply different styling to the components.
+
+### Built-in themes
+
+These are the built-in themes:
+
+- `light` (default)
+- `dark`
+- `auto` (honours your operating system preference for either light or dark)
+
+You can activate one of these by passing the `theme` prop to the `CucumberReact` component:
+
+```jsx
+<CucumberReact theme="dark">
+  <GherkinDocument />
+</CucumberReact>
+```
+
+### Custom themes
+
+You can also provide your own theme with a small amount of CSS. Pass the `CucumberReact` component a class name instead of a theme name:
+
+```jsx
+<CucumberReact className="acme-widgets">
+  <GherkinDocument />
+</CucumberReact>
+```
+
+In your CSS for the `acme-widgets` class, you can override the supported [custom property](https://developer.mozilla.org/en-US/docs/Web/CSS/--*) values as desired. Here's the CSS that drives the built-in "dark" theme:
+
+```css
+.darkTheme {
+  --cucumber-background-color: #1d1d26;
+  --cucumber-text-color: #c9c9d1;
+  --cucumber-anchor-color: #4caaee;
+  --cucumber-keyword-color: #d89077;
+  --cucumber-parameter-color: #4caaee;
+  --cucumber-tag-color: #85a658;
+  --cucumber-docstring-color: #66a565;
+  --cucumber-error-background-color: #cf6679;
+  --cucumber-error-text-color: #222;
+  --cucumber-code-background-color: #282a36;
+  --cucumber-code-text-color: #f8f8f2;
+  --cucumber-panel-background-color: #282a36;
+  --cucumber-panel-accent-color: #313442;
+  --cucumber-panel-text-color: #f8f8f2;
+}
+```
+
+### Custom styles
+
+For more control over the styling, you can override the CSS used by individual components.
+
+Let's say you want to do something totally different with the typography of doc strings. In your own CSS, you might write something like:
+
+```css
+.acme-docstring {
+  font-weight: bold;
+  font-style: italic;
+  background-color: black;
+  color: hotpink;
+  text-shadow: 1px 1px 2px white;
+  padding: 10px;
+}
+```
+
+Then, you can provide a `customRendering` prop to the `CucumberReact` component, in the form of an object that declares which class names you're going to override and what with:
+
+```jsx
+<CucumberReact customRendering={{
+  DocString: {
+    docString: 'acme-docstring'
+  }
+}}>
+  <GherkinDocument />
+</CucumberReact>
+```
+
+Some components have multiple styling hooks - e.g. the `<Tags>` component has the `tags` class name for the list, and the `tag` class name for each item. In these cases, you can provide custom class names for just the ones you want to change, and any you omit will pick up the built-in styling like normal.
+
+### Custom rendering
+
+To change the rendering of some components entirely, you can selectively provide your own component implementations to be used instead of the built-in ones.
+
+Staying with the doc string example, you can use the same `customRendering` prop, but this time instead of an object with class names, you provide a React functional component, giving you full control over the rendering:
+
+```jsx
+<CucumberReact customRendering={{
+  DocString: (props) => (
+    <>
+      <p>I am going to render this doc string in a textarea:</p>
+      <textarea>{props.docString.content}</textarea>
+    </>
+  )
+}}>
+  <GherkinDocument />
+</CucumberReact>
+```
+
+In each case where you provide your own component, it will receive the same props as the default component, plus two more:
+
+- `styles` - class names for the default styling, so you can still apply these to your custom component if it makes sense
+- `DefaultRenderer` - the default React component, useful if you only want to provide your own rendering for certain cases, and otherwise fall back to the default rendering (don't forget to pass it the props)
+
+## Build / hack
+
+Install dependencies
+
+    npm install
+
+Run tests
+
+    npm test
+
+Interactive development
+
+    npm run storybook
+
+## Ideas
+
+### `ScenarioList` component
+
+A component that renders a list of scenarios (possibly from multiple files, filtered by e.g. tag). 
+
+This component could be used to render relevant scenarios in 3rd-party tools, such as 
+JIRA, Confluence and various issue trackers that support plugins.
+
+### Link to JIRA
+
+Configure with a regexp and url function, and tags will be rendered as JIRA issue links
+
+### Search
+
+Search by tag, but also by text. Could use http://elasticlunr.com/
+or https://lunrjs.com/ - or it could simply perform filtering on an array of `GherkinDocument` messages.
+
+### Search results
+
+Each scenario displayed underneath each other, grouped by feature file. The feature description is "collapsed", 
+(unless it contains the search term) but can be opened.
+
+### Filtering / sorting
+
+* by tag
+* by duration (find slow ones)
+* by status
+* by recency (update timestamp) - exclude old ones
+* by flickeriness
+
+### Tag search
+
+* Render a tag cloud for all tags
+  * Size: count
+  * Color: pass/fail/undefined
+    
+### On-demand data
+
+For large reports (especially with screenshots) it may be too heavy to store it all in the browser.
+The GUI should request data for the current document on demand. The GUI should also be able to filter
+what kind of events it wants. For example, to render the initial screen.
+
+### Server / App
+
+It should be easy to use. Just run the app (Electron). It will create a named pipe where
+it will listen. What's written here gets written straight to the React app (no websocket,
+it's in the same process). This app can be fairly small.
+
+### Rerun tests
+
+Add a message to represent a config+cwd+env for a run, so the GUI can rerun it.
+The config is essentially command line options. They can be modified in the gui.
+Rerun on file change can also be set up. This just makes the whole DX simple.
+
+### Alerts
+
+The app could use the OS to send screen messages (autotest like)
+

package/dist/src/CucumberQueryContext.d.ts

@@ -0,0 +1,5 @@
+import { Query as CucumberQuery } from '@cucumber/query';
+import React from 'react';
+declare const _default: React.Context<CucumberQuery>;
+export default _default;
+//# sourceMappingURL=CucumberQueryContext.d.ts.map

package/dist/src/CucumberQueryContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CucumberQueryContext.d.ts","sourceRoot":"","sources":["../../src/CucumberQueryContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAA;AACxD,OAAO,KAAK,MAAM,OAAO,CAAA;;AAEzB,wBAAuD"}

package/dist/src/CucumberQueryContext.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const query_1 = require("@cucumber/query");
+const react_1 = __importDefault(require("react"));
+exports.default = react_1.default.createContext(new query_1.Query());
+//# sourceMappingURL=CucumberQueryContext.js.map

package/dist/src/CucumberQueryContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CucumberQueryContext.js","sourceRoot":"","sources":["../../src/CucumberQueryContext.ts"],"names":[],"mappings":";;;;;AAAA,2CAAwD;AACxD,kDAAyB;AAEzB,kBAAe,eAAK,CAAC,aAAa,CAAC,IAAI,aAAa,EAAE,CAAC,CAAA"}

package/dist/src/EnvelopesQueryContext.d.ts

@@ -0,0 +1,14 @@
+import * as messages from '@cucumber/messages';
+import React from 'react';
+export declare class EnvelopesQuery {
+    private envelopes;
+    update(envelope: messages.Envelope): void;
+    find(predicate: (envelope: messages.Envelope) => boolean): messages.Envelope | undefined;
+    filter(predicate: (envelope: messages.Envelope) => boolean): messages.Envelope[];
+    getMeta(): messages.Meta | undefined;
+    getTestRunStarted(): messages.TestRunStarted | undefined;
+    getTestRunFinished(): messages.TestRunFinished | undefined;
+}
+declare const _default: React.Context<EnvelopesQuery>;
+export default _default;
+//# sourceMappingURL=EnvelopesQueryContext.d.ts.map

package/dist/src/EnvelopesQueryContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnvelopesQueryContext.d.ts","sourceRoot":"","sources":["../../src/EnvelopesQueryContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,oBAAoB,CAAA;AAC9C,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,qBAAa,cAAc;IACzB,OAAO,CAAC,SAAS,CAA0B;IAEpC,MAAM,CAAC,QAAQ,EAAE,QAAQ,CAAC,QAAQ;IAIlC,IAAI,CAAC,SAAS,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,KAAK,OAAO,GAAG,QAAQ,CAAC,QAAQ,GAAG,SAAS;IAIxF,MAAM,CAAC,SAAS,EAAE,CAAC,QAAQ,EAAE,QAAQ,CAAC,QAAQ,KAAK,OAAO,GAAG,QAAQ,CAAC,QAAQ,EAAE;IAIhF,OAAO,IAAI,QAAQ,CAAC,IAAI,GAAG,SAAS;IAIpC,iBAAiB,IAAI,QAAQ,CAAC,cAAc,GAAG,SAAS;IAIxD,kBAAkB,IAAI,QAAQ,CAAC,eAAe,GAAG,SAAS;CAGlE;;AAED,wBAAwD"}

package/dist/src/EnvelopesQueryContext.js

@@ -0,0 +1,36 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EnvelopesQuery = void 0;
+const react_1 = __importDefault(require("react"));
+class EnvelopesQuery {
+    constructor() {
+        this.envelopes = [];
+    }
+    update(envelope) {
+        this.envelopes.push(envelope);
+    }
+    find(predicate) {
+        return this.envelopes.find(predicate);
+    }
+    filter(predicate) {
+        return this.envelopes.filter(predicate);
+    }
+    getMeta() {
+        var _a;
+        return (_a = this.find((envelope) => !!envelope.meta)) === null || _a === void 0 ? void 0 : _a.meta;
+    }
+    getTestRunStarted() {
+        var _a;
+        return (_a = this.find((envelope) => !!envelope.testRunStarted)) === null || _a === void 0 ? void 0 : _a.testRunStarted;
+    }
+    getTestRunFinished() {
+        var _a;
+        return (_a = this.find((envelope) => !!envelope.testRunFinished)) === null || _a === void 0 ? void 0 : _a.testRunFinished;
+    }
+}
+exports.EnvelopesQuery = EnvelopesQuery;
+exports.default = react_1.default.createContext(new EnvelopesQuery());
+//# sourceMappingURL=EnvelopesQueryContext.js.map

package/dist/src/EnvelopesQueryContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"EnvelopesQueryContext.js","sourceRoot":"","sources":["../../src/EnvelopesQueryContext.ts"],"names":[],"mappings":";;;;;;AACA,kDAAyB;AAEzB,MAAa,cAAc;IAA3B;QACU,cAAS,GAAwB,EAAE,CAAA;IAyB7C,CAAC;IAvBQ,MAAM,CAAC,QAA2B;QACvC,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAA;IAC/B,CAAC;IAEM,IAAI,CAAC,SAAmD;QAC7D,OAAO,IAAI,CAAC,SAAS,CAAC,IAAI,CAAC,SAAS,CAAC,CAAA;IACvC,CAAC;IAEM,MAAM,CAAC,SAAmD;QAC/D,OAAO,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,SAAS,CAAC,CAAA;IACzC,CAAC;IAEM,OAAO;;QACZ,OAAO,MAAA,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,IAAI,CAAC,0CAAE,IAAI,CAAA;IACvD,CAAC;IAEM,iBAAiB;;QACtB,OAAO,MAAA,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,cAAc,CAAC,0CAAE,cAAc,CAAA;IAC3E,CAAC;IAEM,kBAAkB;;QACvB,OAAO,MAAA,IAAI,CAAC,IAAI,CAAC,CAAC,QAAQ,EAAE,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC,eAAe,CAAC,0CAAE,eAAe,CAAA;IAC7E,CAAC;CACF;AA1BD,wCA0BC;AAED,kBAAe,eAAK,CAAC,aAAa,CAAC,IAAI,cAAc,EAAE,CAAC,CAAA"}

package/dist/src/GherkinQueryContext.d.ts

@@ -0,0 +1,5 @@
+import { Query as GherkinQuery } from '@cucumber/gherkin-utils';
+import React from 'react';
+declare const _default: React.Context<GherkinQuery>;
+export default _default;
+//# sourceMappingURL=GherkinQueryContext.d.ts.map

package/dist/src/GherkinQueryContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GherkinQueryContext.d.ts","sourceRoot":"","sources":["../../src/GherkinQueryContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,yBAAyB,CAAA;AAC/D,OAAO,KAAK,MAAM,OAAO,CAAA;;AAEzB,wBAAsD"}

package/dist/src/GherkinQueryContext.js

@@ -0,0 +1,9 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const gherkin_utils_1 = require("@cucumber/gherkin-utils");
+const react_1 = __importDefault(require("react"));
+exports.default = react_1.default.createContext(new gherkin_utils_1.Query());
+//# sourceMappingURL=GherkinQueryContext.js.map

package/dist/src/GherkinQueryContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"GherkinQueryContext.js","sourceRoot":"","sources":["../../src/GherkinQueryContext.ts"],"names":[],"mappings":";;;;;AAAA,2DAA+D;AAC/D,kDAAyB;AAEzB,kBAAe,eAAK,CAAC,aAAa,CAAC,IAAI,qBAAY,EAAE,CAAC,CAAA"}

package/dist/src/SearchQueryContext.d.ts

@@ -0,0 +1,34 @@
+import { TestStepResultStatus as Status } from '@cucumber/messages';
+import React from 'react';
+export interface SearchQueryUpdate {
+    readonly query?: string | null;
+    readonly hideStatuses?: readonly Status[];
+}
+export interface SearchQuery {
+    readonly query: string;
+    readonly hideStatuses: readonly Status[];
+}
+export declare type SearchQueryUpdateFn = (query: SearchQuery) => void;
+export interface SearchQueryProps extends SearchQueryUpdate {
+    onSearchQueryUpdated?: SearchQueryUpdateFn;
+}
+export interface WindowUrlApi {
+    getURL: () => string;
+    setURL: (url: string) => void;
+}
+export declare function searchFromURLParams(opts?: {
+    querySearchParam?: string;
+    hideStatusesSearchParam?: string;
+    windowUrlApi?: WindowUrlApi;
+}): SearchQueryProps;
+export declare class SearchQueryCtx implements SearchQuery {
+    readonly query: string;
+    readonly hideStatuses: readonly Status[];
+    readonly update: (query: SearchQueryUpdate) => void;
+    constructor(value: SearchQuery, updateValue: SearchQueryUpdateFn);
+    static withDefaults: (value?: SearchQueryUpdate, onSearchQueryUpdated?: SearchQueryUpdateFn) => SearchQueryCtx;
+}
+export declare function useSearchQueryCtx(props: SearchQueryProps): SearchQueryCtx;
+declare const _default: React.Context<SearchQueryCtx>;
+export default _default;
+//# sourceMappingURL=SearchQueryContext.d.ts.map

package/dist/src/SearchQueryContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchQueryContext.d.ts","sourceRoot":"","sources":["../../src/SearchQueryContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,IAAI,MAAM,EAAE,MAAM,oBAAoB,CAAA;AACnE,OAAO,KAAmB,MAAM,OAAO,CAAA;AAQvC,MAAM,WAAW,iBAAiB;IAChC,QAAQ,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,IAAI,CAAA;IAC9B,QAAQ,CAAC,YAAY,CAAC,EAAE,SAAS,MAAM,EAAE,CAAA;CAC1C;AAED,MAAM,WAAW,WAAW;IAC1B,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,YAAY,EAAE,SAAS,MAAM,EAAE,CAAA;CACzC;AAED,oBAAY,mBAAmB,GAAG,CAAC,KAAK,EAAE,WAAW,KAAK,IAAI,CAAA;AAE9D,MAAM,WAAW,gBAAiB,SAAQ,iBAAiB;IACzD,oBAAoB,CAAC,EAAE,mBAAmB,CAAA;CAC3C;AAED,MAAM,WAAW,YAAY;IAC3B,MAAM,EAAE,MAAM,MAAM,CAAA;IACpB,MAAM,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAA;CAC9B;AAOD,wBAAgB,mBAAmB,CAAC,IAAI,CAAC,EAAE;IACzC,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB,uBAAuB,CAAC,EAAE,MAAM,CAAA;IAChC,YAAY,CAAC,EAAE,YAAY,CAAA;CAC5B,GAAG,gBAAgB,CA6BnB;AASD,qBAAa,cAAe,YAAW,WAAW;IAChD,QAAQ,CAAC,KAAK,EAAE,MAAM,CAAA;IACtB,QAAQ,CAAC,YAAY,EAAE,SAAS,MAAM,EAAE,CAAA;IACxC,QAAQ,CAAC,MAAM,EAAE,CAAC,KAAK,EAAE,iBAAiB,KAAK,IAAI,CAAA;gBAEvC,KAAK,EAAE,WAAW,EAAE,WAAW,EAAE,mBAAmB;IAWhE,MAAM,CAAC,YAAY,WACV,iBAAiB,yBACF,mBAAmB,oBAK1C;CACF;AAED,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,gBAAgB,GAAG,cAAc,CAWzE;;AAED,wBAAmF"}

package/dist/src/SearchQueryContext.js

@@ -0,0 +1,102 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.useSearchQueryCtx = exports.SearchQueryCtx = exports.searchFromURLParams = void 0;
+const messages_1 = require("@cucumber/messages");
+const react_1 = __importStar(require("react"));
+const defaultQuerySearchParam = 'search';
+const defaultHideStatusesSearchParam = 'hide';
+const defaultQuery = '';
+const defaultHideStatuses = [];
+const defaultWindowUrlApi = {
+    getURL: () => window.location.toString(),
+    setURL: (url) => window.history.replaceState({}, '', url),
+};
+function searchFromURLParams(opts) {
+    var _a, _b, _c;
+    const querySearchParam = (_a = opts === null || opts === void 0 ? void 0 : opts.querySearchParam) !== null && _a !== void 0 ? _a : defaultQuerySearchParam;
+    const hideStatusesSearchParam = (_b = opts === null || opts === void 0 ? void 0 : opts.hideStatusesSearchParam) !== null && _b !== void 0 ? _b : defaultHideStatusesSearchParam;
+    const windowUrlApi = (_c = opts === null || opts === void 0 ? void 0 : opts.windowUrlApi) !== null && _c !== void 0 ? _c : defaultWindowUrlApi;
+    function onSearchQueryUpdated(query) {
+        const url = new URL(windowUrlApi.getURL());
+        if (query.query !== defaultQuery) {
+            url.searchParams.set(querySearchParam, query.query);
+        }
+        else {
+            url.searchParams.delete(querySearchParam);
+        }
+        url.searchParams.delete(hideStatusesSearchParam);
+        query.hideStatuses.forEach((s) => url.searchParams.append(hideStatusesSearchParam, s));
+        windowUrlApi.setURL(url.toString());
+    }
+    const url = new URL(windowUrlApi.getURL());
+    return {
+        query: url.searchParams.get(querySearchParam),
+        hideStatuses: url.searchParams
+            .getAll(hideStatusesSearchParam)
+            .filter((s) => Object.values(messages_1.TestStepResultStatus).includes(s))
+            .map((s) => messages_1.TestStepResultStatus[s]),
+        onSearchQueryUpdated,
+    };
+}
+exports.searchFromURLParams = searchFromURLParams;
+function toSearchQuery(iQuery) {
+    var _a, _b;
+    return {
+        query: (_a = iQuery === null || iQuery === void 0 ? void 0 : iQuery.query) !== null && _a !== void 0 ? _a : defaultQuery,
+        hideStatuses: (_b = iQuery === null || iQuery === void 0 ? void 0 : iQuery.hideStatuses) !== null && _b !== void 0 ? _b : defaultHideStatuses,
+    };
+}
+class SearchQueryCtx {
+    constructor(value, updateValue) {
+        this.query = value.query;
+        this.hideStatuses = value.hideStatuses;
+        this.update = (values) => {
+            var _a, _b;
+            updateValue({
+                query: (_a = values.query) !== null && _a !== void 0 ? _a : this.query,
+                hideStatuses: (_b = values.hideStatuses) !== null && _b !== void 0 ? _b : this.hideStatuses,
+            });
+        };
+    }
+}
+exports.SearchQueryCtx = SearchQueryCtx;
+SearchQueryCtx.withDefaults = (value = {}, onSearchQueryUpdated = () => {
+    //Do nothing
+}) => {
+    return new SearchQueryCtx(toSearchQuery(value), onSearchQueryUpdated);
+};
+function useSearchQueryCtx(props) {
+    const [searchQuery, setSearchQuery] = (0, react_1.useState)(toSearchQuery(props));
+    return new SearchQueryCtx(searchQuery, props.onSearchQueryUpdated
+        ? (query) => {
+            props.onSearchQueryUpdated && props.onSearchQueryUpdated(query);
+            setSearchQuery(query);
+        }
+        : setSearchQuery);
+}
+exports.useSearchQueryCtx = useSearchQueryCtx;
+exports.default = react_1.default.createContext(SearchQueryCtx.withDefaults({}));
+//# sourceMappingURL=SearchQueryContext.js.map

package/dist/src/SearchQueryContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SearchQueryContext.js","sourceRoot":"","sources":["../../src/SearchQueryContext.ts"],"names":[],"mappings":"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"}

package/dist/src/UriContext.d.ts

@@ -0,0 +1,4 @@
+import React from 'react';
+declare const _default: React.Context<string | null>;
+export default _default;
+//# sourceMappingURL=UriContext.d.ts.map

package/dist/src/UriContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UriContext.d.ts","sourceRoot":"","sources":["../../src/UriContext.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,OAAO,CAAA;;AAEzB,wBAAuD"}

package/dist/src/UriContext.js

@@ -0,0 +1,8 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const react_1 = __importDefault(require("react"));
+exports.default = react_1.default.createContext(null);
+//# sourceMappingURL=UriContext.js.map

package/dist/src/UriContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"UriContext.js","sourceRoot":"","sources":["../../src/UriContext.ts"],"names":[],"mappings":";;;;;AAAA,kDAAyB;AAEzB,kBAAe,eAAK,CAAC,aAAa,CAAgB,IAAI,CAAC,CAAA"}

package/dist/src/ciCommitLink.d.ts

@@ -0,0 +1,3 @@
+import * as messages from '@cucumber/messages';
+export default function ciCommitLink(ci: messages.Ci): string | null;
+//# sourceMappingURL=ciCommitLink.d.ts.map

package/dist/src/ciCommitLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ciCommitLink.d.ts","sourceRoot":"","sources":["../../src/ciCommitLink.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,oBAAoB,CAAA;AAI9C,MAAM,CAAC,OAAO,UAAU,YAAY,CAAC,EAAE,EAAE,QAAQ,CAAC,EAAE,GAAG,MAAM,GAAG,IAAI,CASnE"}

package/dist/src/ciCommitLink.js

@@ -0,0 +1,18 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+const toRepositoryId_1 = __importDefault(require("./toRepositoryId"));
+function ciCommitLink(ci) {
+    if (ci.git && ci.git.remote) {
+        const repositoryId = (0, toRepositoryId_1.default)(ci.git.remote);
+        const github = repositoryId.startsWith('github.com') || ci.name === 'GitHub Actions';
+        if (ci.git.revision && github) {
+            return `https://${repositoryId}/commit/${ci.git.revision}`;
+        }
+    }
+    return null;
+}
+exports.default = ciCommitLink;
+//# sourceMappingURL=ciCommitLink.js.map

package/dist/src/ciCommitLink.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ciCommitLink.js","sourceRoot":"","sources":["../../src/ciCommitLink.ts"],"names":[],"mappings":";;;;;AAEA,sEAA6C;AAE7C,SAAwB,YAAY,CAAC,EAAe;IAClD,IAAI,EAAE,CAAC,GAAG,IAAI,EAAE,CAAC,GAAG,CAAC,MAAM,EAAE;QAC3B,MAAM,YAAY,GAAG,IAAA,wBAAc,EAAC,EAAE,CAAC,GAAG,CAAC,MAAM,CAAC,CAAA;QAClD,MAAM,MAAM,GAAG,YAAY,CAAC,UAAU,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC,IAAI,KAAK,gBAAgB,CAAA;QACpF,IAAI,EAAE,CAAC,GAAG,CAAC,QAAQ,IAAI,MAAM,EAAE;YAC7B,OAAO,WAAW,YAAY,WAAW,EAAE,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAA;SAC3D;KACF;IACD,OAAO,IAAI,CAAA;AACb,CAAC;AATD,+BASC"}

package/dist/src/components/CucumberReact.d.ts

@@ -0,0 +1,10 @@
+import { FunctionComponent } from 'react';
+import { CustomRenderingSupport, IncludedTheme } from './customise';
+interface IProps {
+    theme?: IncludedTheme;
+    customRendering?: CustomRenderingSupport;
+    className?: string;
+}
+export declare const CucumberReact: FunctionComponent<IProps>;
+export {};
+//# sourceMappingURL=CucumberReact.d.ts.map

package/dist/src/components/CucumberReact.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CucumberReact.d.ts","sourceRoot":"","sources":["../../../src/components/CucumberReact.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAA;AAGhD,OAAO,EAA0B,sBAAsB,EAAE,aAAa,EAAE,MAAM,aAAa,CAAA;AAE3F,UAAU,MAAM;IACd,KAAK,CAAC,EAAE,aAAa,CAAA;IACrB,eAAe,CAAC,EAAE,sBAAsB,CAAA;IACxC,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,eAAO,MAAM,aAAa,EAAE,iBAAiB,CAAC,MAAM,CAcnD,CAAA"}

package/dist/src/components/CucumberReact.js

@@ -0,0 +1,16 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CucumberReact = void 0;
+const react_1 = __importDefault(require("react"));
+const CucumberReact_module_scss_1 = __importDefault(require("./CucumberReact.module.scss"));
+const customise_1 = require("./customise");
+const CucumberReact = ({ children, theme = 'light', customRendering = {}, className, }) => {
+    const classes = [CucumberReact_module_scss_1.default.cucumberReact, CucumberReact_module_scss_1.default[`${theme}Theme`], className];
+    return (react_1.default.createElement(customise_1.CustomRenderingContext.Provider, { value: customRendering },
+        react_1.default.createElement("div", { "data-testid": "cucumber-react", className: classes.filter((c) => !!c).join(' ') }, children)));
+};
+exports.CucumberReact = CucumberReact;
+//# sourceMappingURL=CucumberReact.js.map

package/dist/src/components/CucumberReact.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"CucumberReact.js","sourceRoot":"","sources":["../../../src/components/CucumberReact.tsx"],"names":[],"mappings":";;;;;;AAAA,kDAAgD;AAEhD,4FAAgD;AAChD,2CAA2F;AAQpF,MAAM,aAAa,GAA8B,CAAC,EACvD,QAAQ,EACR,KAAK,GAAG,OAAO,EACf,eAAe,GAAG,EAAE,EACpB,SAAS,GACV,EAAE,EAAE;IACH,MAAM,OAAO,GAAG,CAAC,mCAAM,CAAC,aAAa,EAAE,mCAAM,CAAC,GAAG,KAAK,OAAO,CAAC,EAAE,SAAS,CAAC,CAAA;IAC1E,OAAO,CACL,8BAAC,kCAAsB,CAAC,QAAQ,IAAC,KAAK,EAAE,eAAe;QACrD,sDAAiB,gBAAgB,EAAC,SAAS,EAAE,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC,GAAG,CAAC,IAC9E,QAAQ,CACL,CAC0B,CACnC,CAAA;AACH,CAAC,CAAA;AAdY,QAAA,aAAa,iBAczB"}

package/dist/src/components/CucumberReact.module.scss

@@ -0,0 +1,35 @@
+@import '../styles/theming';
+
+.cucumberReact {
+    font-size: 14px;
+    font-family: $sansFamily;
+    color: $textColor;
+    background: $backgroundColor;
+}
+
+@mixin dark-theme {
+    --cucumber-background-color: #1d1d26;
+    --cucumber-text-color: #c9c9d1;
+    --cucumber-anchor-color: #4caaee;
+    --cucumber-keyword-color: #d89077;
+    --cucumber-parameter-color: #4caaee;
+    --cucumber-tag-color: #85a658;
+    --cucumber-docstring-color: #66a565;
+    --cucumber-error-background-color: #cf6679;
+    --cucumber-error-text-color: #222;
+    --cucumber-code-background-color: #282a36;
+    --cucumber-code-text-color: #f8f8f2;
+    --cucumber-panel-background-color: #282a36;
+    --cucumber-panel-accent-color: #313442;
+    --cucumber-panel-text-color: #f8f8f2;
+}
+
+.darkTheme {
+    @include dark-theme;
+}
+
+.autoTheme {
+    @media all and (prefers-color-scheme: dark) {
+        @include dark-theme;
+    }
+}

package/dist/src/components/app/CICommitLink.d.ts

@@ -0,0 +1,8 @@
+import * as messages from '@cucumber/messages';
+import React from 'react';
+interface IProps {
+    ci: messages.Ci;
+}
+export declare const CICommitLink: React.FunctionComponent<IProps>;
+export {};
+//# sourceMappingURL=CICommitLink.d.ts.map

package/dist/src/components/app/CICommitLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CICommitLink.d.ts","sourceRoot":"","sources":["../../../../src/components/app/CICommitLink.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,QAAQ,MAAM,oBAAoB,CAAA;AAG9C,OAAO,KAAK,MAAM,OAAO,CAAA;AAIzB,UAAU,MAAM;IACd,EAAE,EAAE,QAAQ,CAAC,EAAE,CAAA;CAChB;AAED,eAAO,MAAM,YAAY,EAAE,KAAK,CAAC,iBAAiB,CAAC,MAAM,CAgBxD,CAAA"}