From bbf3ce268f9414fd807908a06829fa3b97a1f0a7 Mon Sep 17 00:00:00 2001 From: Mendes Hugo Date: Sun, 20 Aug 2023 11:09:48 +0200 Subject: [PATCH] feat(graph-arc): can add or remove arcs --- .../src/app/graph/arc/graph-arc.controller.ts | 6 +- .../graph/graph.component.stories.ts | 35 +- .../graph/components/graph/graph.component.ts | 182 ++- .../rete/node/rete.node.component.ts | 11 +- .../views/workflow/workflow.view.html | 4 +- .../workflow/views/workflow/workflow.view.ts | 27 +- libs/ng/src/lib/rete/rete.connection.ts | 3 +- libs/ng/src/lib/rete/rete.node.ts | 2 +- package-lock.json | 1104 ++++++++++++++++- package.json | 1 + 10 files changed, 1342 insertions(+), 33 deletions(-) diff --git a/apps/backend/src/app/graph/arc/graph-arc.controller.ts b/apps/backend/src/app/graph/arc/graph-arc.controller.ts index 41271e60..778dc869 100644 --- a/apps/backend/src/app/graph/arc/graph-arc.controller.ts +++ b/apps/backend/src/app/graph/arc/graph-arc.controller.ts @@ -4,7 +4,6 @@ import { Delete, Get, NotFoundException, - NotImplementedException, Param, Patch, Post, @@ -71,8 +70,9 @@ export class GraphArcController implements EndpointTransformed { @ApiCreatedResponse({ type: GraphArcDto }) @ApiGraphParam() @Post() - public create(@GraphInterceptedParam() _graph: Graph, @Body() _body: GraphArcCreateDto) { - return Promise.reject(new NotImplementedException(`Can not create an arc yet.`)); + public create(@GraphInterceptedParam() _graph: Graph, @Body() body: GraphArcCreateDto) { + // TODO: verify graph + return this.service.create(body); } @ApiExcludeEndpoint() diff --git a/apps/frontend/src/app/graph/components/graph/graph.component.stories.ts b/apps/frontend/src/app/graph/components/graph/graph.component.stories.ts index c1c3e11a..b9cc5279 100644 --- a/apps/frontend/src/app/graph/components/graph/graph.component.stories.ts +++ b/apps/frontend/src/app/graph/components/graph/graph.component.stories.ts @@ -1,3 +1,4 @@ +import { action } from "@storybook/addon-actions"; import { Meta, moduleMetadata } from "@storybook/angular"; import { Jsonify } from "type-fest"; import { GraphDto } from "~/lib/common/app/graph/dtos"; @@ -6,7 +7,7 @@ import { BASE_SEED } from "~/lib/common/seeds"; import { GraphComponent } from "./graph.component"; -const getGraphContent = (graph: GraphDto): Pick => { +const getGraphContent = (graph: GraphDto): Pick => { const { graphArcs, graphNodeInputs, graphNodeOutputs, graphNodes } = JSON.parse( JSON.stringify(BASE_SEED.graph) ) as Jsonify; @@ -19,21 +20,37 @@ const getGraphContent = (graph: GraphDto): Pick __graph_node === node._id) })); + const arcs = graphArcs.filter(({ __from, __to }) => + nodes.some( + ({ inputs, outputs }) => + inputs.some(({ _id }) => _id === __to) || outputs.some(({ _id }) => _id === __from) + ) + ); + return { - arcs: graphArcs.filter(({ __from, __to }) => - nodes.some( - ({ inputs, outputs }) => - inputs.some(({ _id }) => _id === __to) || - outputs.some(({ _id }) => _id === __from) - ) - ), + actions: { + arc: { + create: toCreate => { + action("Arc to create")(toCreate); + + const arc = arcs[arcs.length - 1]; + return Promise.resolve({ ...arc, ...toCreate, _id: arc._id * 10 }); + }, + remove: arc => + Promise.resolve().then(() => { + action("Arc to remove")(arc); + }) + } + }, + arcs, nodes }; }; export const NodeFunctionDivision = { args: { - ...getGraphContent(BASE_SEED.graph.graphs[0]) + ...getGraphContent(BASE_SEED.graph.graphs[0]), + readonly: false } satisfies Partial } satisfies Meta; diff --git a/apps/frontend/src/app/graph/components/graph/graph.component.ts b/apps/frontend/src/app/graph/components/graph/graph.component.ts index c19b9524..29b1a358 100644 --- a/apps/frontend/src/app/graph/components/graph/graph.component.ts +++ b/apps/frontend/src/app/graph/components/graph/graph.component.ts @@ -7,14 +7,18 @@ import { Input, OnChanges, OnDestroy, + Output, SimpleChanges, ViewChild } from "@angular/core"; -import { GetSchemes, NodeEditor } from "rete"; +import { GetSchemes, NodeEditor, Root } from "rete"; import { AngularArea2D, AngularPlugin, Presets as AngularPresets } from "rete-angular-plugin/16"; -import { AreaExtensions, AreaPlugin } from "rete-area-plugin"; +import { Area2D, AreaExtensions, AreaPlugin } from "rete-area-plugin"; import { ConnectionPlugin, Presets as ConnectionPresets } from "rete-connection-plugin"; import { ReadonlyPlugin } from "rete-readonly-plugin"; +import { bufferToggle, filter, map, Observable, Subject } from "rxjs"; +import { GraphArcCreateDto } from "~/lib/common/app/graph/dtos/arc"; +import { PositionDto } from "~/lib/common/app/graph/dtos/node"; import { GraphArc, GraphNode } from "~/lib/common/app/graph/endpoints"; import { ReteConnection, ReteInput, ReteNode, ReteOutput } from "~/lib/ng/lib/rete"; @@ -25,6 +29,51 @@ import { ReteSocketComponent } from "../rete/socket/rete.socket.component"; type Schemes = GetSchemes; type AreaExtra = AngularArea2D; +export interface GraphNodeMoved { + /** + * The new position of the node + */ + current: PositionDto; + /** + * The node that has been moved + */ + node: GraphNode; + /** + * The previous position of the node + */ + previous: PositionDto; +} + +/** + * The possible actions on the graph when adding, removing content. + * If not provided, the features are not enabled. + */ +export interface GraphActions { + /** + * The actions on arcs + */ + arc?: { + /** + * When an arc is being created + * + * Cancels the change if on any fail. + * + * @param toCreate the arc to create + * @returns the created arc + */ + create?: (toCreate: GraphArcCreateDto) => Promise; + /** + * When an arc is being deleted + * + * Cancels the change if on any fail. + * + * @param arc to delete + * @returns An empty promise once the arc is deleted. + */ + remove?: (arc: GraphArc) => Promise; + }; +} + /** * The {@link GraphComponent} manages the whole graph view and edition */ @@ -57,6 +106,18 @@ export class GraphComponent implements AfterViewInit, OnDestroy, OnChanges { @Input() public readonly = true; + /** + * The actions to update the graph + */ + @Input() + public actions: GraphActions = {}; + + /** + * When a node has been moved on the graph + */ + @Output() + public readonly nodeMoved: Observable; + // The ref to this component is not used, so content can more easily be added to this component (context menu, pop-ups, ...) @ViewChild("graph", { static: true }) private readonly container!: ElementRef; @@ -71,7 +132,46 @@ export class GraphComponent implements AfterViewInit, OnDestroy, OnChanges { readonly: ReadonlyPlugin; }; - public constructor(private readonly injector: Injector) {} + /** + * Observable on the area events. + * To pipe and use only what is needed + */ + private readonly area$ = new Subject | AreaExtra | Root>(); + + public constructor(private readonly injector: Injector) { + this.nodeMoved = this.area$.pipe( + // Only want the translation and when the node is dragged + filter(({ type }) => type === "nodetranslated" || type === "nodedragged"), + bufferToggle( + // Start buffering when the node is picked + this.area$.pipe(filter(({ type }) => type === "nodepicked")), + // And stop when it is dragged + () => this.area$.pipe(filter(({ type }) => type === "nodedragged")) + ), + // Ignore when there is not enough emits + filter(buffer => buffer.length >= 3), + map(([previous, ...rest]) => { + const [node, current] = rest.slice().reverse(); + + // For type inference + if ( + previous.type === "nodetranslated" && + current.type === "nodetranslated" && + node.type === "nodedragged" + ) { + return { + current: current.data.position, + node: node.data.graphNode, + previous: previous.data.previous + } satisfies GraphNodeMoved; + } + + throw new Error("Should not happen"); + }), + // Ignore if the node is just clicked or been moved to the same place + filter(({ current, previous }) => previous.x !== current.x || previous.y !== current.y) + ); + } /** * @inheritDoc @@ -132,12 +232,13 @@ export class GraphComponent implements AfterViewInit, OnDestroy, OnChanges { await area.translate(reteNode.id, position); } - for (const { __from, __to } of this.arcs) { + for (const arc of this.arcs) { + const { __from, __to } = arc; const output = outputsMap.get(__from); const input = inputsMap.get(__to); if (input && output) { - await editor.addConnection(new ReteConnection(output, input)); + await editor.addConnection(new ReteConnection(arc, output, input)); } } @@ -151,13 +252,84 @@ export class GraphComponent implements AfterViewInit, OnDestroy, OnChanges { // TODO: on readonly changes if (this.readonly) { readonlyPlugin.enable(); + + // There is a bug in the library that allows to visually modify arcs + area.addPipe(() => undefined); + editor.addPipe(() => undefined); + return; } + + // Only add at the end to avoid triggering the event for the construction of the component + area.addPipe(context => { + // TODO: filters? + this.area$.next(context); + return context; + }); + + editor.addPipe(context => { + if (context.type === "connectioncreate") { + // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition -- The library still uses the default Connection class + if (context.data.arc) { + return context; + } + + const { actions } = this; + if (!actions.arc?.create) { + return undefined; + } + + const source = editor.getNode(context.data.source); + const target = editor.getNode(context.data.target); + + const sourceOutput = source.outputs[context.data.sourceOutput]; + const targetInput = target.inputs[context.data.targetInput]; + + if (!sourceOutput || !targetInput) { + return undefined; + } + + // TODO: Test cyclic here, before continuing + return ( + actions.arc + .create({ __from: sourceOutput.output._id, __to: targetInput.input._id }) + .then(async arc => { + // FIXME: return a modified context (library does not keep the custom `ReteConnection`) + await this.rete?.editor.addConnection( + new ReteConnection(arc, sourceOutput, targetInput) + ); + + return undefined; + }) + // TODO: error message + .catch(() => undefined) + ); + } + + if (context.type === "connectionremove") { + const { actions } = this; + if (!actions.arc?.remove) { + return undefined; + } + + return ( + actions.arc + .remove(context.data.arc) + .then(() => context) + // TODO: error message + .catch(() => undefined) + ); + } + + return context; + }); } /** * @inheritDoc */ public async ngOnDestroy() { + this.area$.complete(); + if (!this.rete) { return; } diff --git a/apps/frontend/src/app/graph/components/rete/node/rete.node.component.ts b/apps/frontend/src/app/graph/components/rete/node/rete.node.component.ts index 0d36d0e4..6d68e95c 100644 --- a/apps/frontend/src/app/graph/components/rete/node/rete.node.component.ts +++ b/apps/frontend/src/app/graph/components/rete/node/rete.node.component.ts @@ -1,5 +1,5 @@ import { CommonModule } from "@angular/common"; -import { Component, Input } from "@angular/core"; +import { Component, Input, OnChanges } from "@angular/core"; import { ReteModule } from "rete-angular-plugin/16"; import { ReteNode } from "~/lib/ng/lib/rete"; @@ -11,7 +11,7 @@ import { ReteNode } from "~/lib/ng/lib/rete"; imports: [CommonModule, ReteModule] }) -export class ReteNodeComponent { +export class ReteNodeComponent implements OnChanges { // TODO @Input({ required: true }) @@ -26,4 +26,11 @@ export class ReteNodeComponent { */ @Input({ required: true }) public readonly rendered!: () => void; + + protected seed = 0; + + public ngOnChanges() { + // force render sockets + ++this.seed; + } } diff --git a/apps/frontend/src/app/workflow/views/workflow/workflow.view.html b/apps/frontend/src/app/workflow/views/workflow/workflow.view.html index 5695389d..ad6bc158 100644 --- a/apps/frontend/src/app/workflow/views/workflow/workflow.view.html +++ b/apps/frontend/src/app/workflow/views/workflow/workflow.view.html @@ -8,8 +8,10 @@ diff --git a/apps/frontend/src/app/workflow/views/workflow/workflow.view.ts b/apps/frontend/src/app/workflow/views/workflow/workflow.view.ts index 8fbfc5c8..6a38bd12 100644 --- a/apps/frontend/src/app/workflow/views/workflow/workflow.view.ts +++ b/apps/frontend/src/app/workflow/views/workflow/workflow.view.ts @@ -1,12 +1,17 @@ import { CommonModule } from "@angular/common"; import { Component, Input } from "@angular/core"; +import { Workflow } from "~/lib/common/app/workflow/endpoints"; import { EntityId } from "~/lib/common/dtos/entity"; import { ApiModule } from "~/lib/ng/lib/api"; import { GraphApiService } from "~/lib/ng/lib/api/graph-api/graph.api.service"; import { WorkflowApiService } from "~/lib/ng/lib/api/workflow-api"; import { RequestStateSubject } from "~/lib/ng/lib/request-state/request.state.subject"; -import { GraphComponent } from "../../../graph/components/graph/graph.component"; +import { + GraphActions, + GraphComponent, + GraphNodeMoved +} from "../../../graph/components/graph/graph.component"; @Component({ standalone: true, @@ -36,4 +41,24 @@ export class WorkflowView { private readonly service: WorkflowApiService, private readonly graphApi: GraphApiService ) {} + + protected handleNodeMove(workflow: Workflow, nodeMoved: GraphNodeMoved) { + // TODO: this is temporary + void this.graphApi + .forNodes(workflow.__graph) + .update(nodeMoved.node._id, { position: nodeMoved.current }); + } + + protected getActions(workflow: Workflow): GraphActions { + // TODO: this is temporary + const { __graph } = workflow; + const arcApi = this.graphApi.forArcs(__graph); + + return { + arc: { + create: toCreate => arcApi.create(toCreate), + remove: arc => arcApi.delete(arc._id).then(() => void 0) + } + }; + } } diff --git a/libs/ng/src/lib/rete/rete.connection.ts b/libs/ng/src/lib/rete/rete.connection.ts index 85ae4f0e..38741ba0 100644 --- a/libs/ng/src/lib/rete/rete.connection.ts +++ b/libs/ng/src/lib/rete/rete.connection.ts @@ -1,4 +1,5 @@ import { ClassicPreset } from "rete"; +import { GraphArc } from "~/lib/common/app/graph/endpoints"; import { ReteInput } from "./rete.input"; import { ReteOutput } from "./rete.output"; @@ -7,7 +8,7 @@ export class ReteConnection extends ClassicPreset.Connection< ClassicPreset.Node, ClassicPreset.Node > { - public constructor(output: ReteOutput, input: ReteInput) { + public constructor(public readonly arc: GraphArc, output: ReteOutput, input: ReteInput) { super(output.node, output.output._id.toString(), input.node, input.input._id.toString()); } diff --git a/libs/ng/src/lib/rete/rete.node.ts b/libs/ng/src/lib/rete/rete.node.ts index 64b381f9..25cc9021 100644 --- a/libs/ng/src/lib/rete/rete.node.ts +++ b/libs/ng/src/lib/rete/rete.node.ts @@ -22,7 +22,7 @@ export class ReteNode extends ClassicPreset.Node< */ public override outputs!: Partial>; - public constructor(graphNode: GraphNode) { + public constructor(public readonly graphNode: GraphNode) { const { inputs, name, outputs } = graphNode; super(name); diff --git a/package-lock.json b/package-lock.json index d9a6d81a..4bbd7a3d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -80,6 +80,7 @@ "@nx/workspace": "16.5.5", "@release-it/conventional-changelog": "^7.0.0", "@shopify/eslint-plugin": "^42.1.0", + "@storybook/addon-actions": "^7.3.2", "@storybook/addon-essentials": "7.1.1", "@storybook/angular": "7.1.1", "@storybook/core-common": "^7.0.11", @@ -5467,6 +5468,44 @@ "integrity": "sha512-cEee/Z+I12mZcFJshKcCqC8tuX5hG3s+d+9nZ3LabqKF1vKdF41B92pJVCBggjAGORAeOzyyDDKrZwIkLffeOQ==", "dev": true }, + "node_modules/@floating-ui/core": { + "version": "1.4.1", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.4.1.tgz", + "integrity": "sha512-jk3WqquEJRlcyu7997NtR5PibI+y5bi+LS3hPmguVClypenMsCY3CBa3LAQnozRCtCrYWSEtAdiskpamuJRFOQ==", + "dev": true, + "dependencies": { + "@floating-ui/utils": "^0.1.1" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.5.1", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.1.tgz", + "integrity": "sha512-KwvVcPSXg6mQygvA1TjbN/gh///36kKtllIF8SUm0qpFj8+rvYrpvlYdL1JoA71SHpDqgSSdGOSoQ0Mp3uY5aw==", + "dev": true, + "dependencies": { + "@floating-ui/core": "^1.4.1", + "@floating-ui/utils": "^0.1.1" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.0.1.tgz", + "integrity": "sha512-rZtAmSht4Lry6gdhAJDrCp/6rKN7++JnL1/Anbr/DdeyYXQPxvg/ivrbYvJulbRf4vL8b212suwMM2lxbv+RQA==", + "dev": true, + "dependencies": { + "@floating-ui/dom": "^1.3.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.1.1", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.1.tgz", + "integrity": "sha512-m0G6wlnhm/AX0H12IOWtK8gASEMffnX08RtKkCgTdHb9JpHKGloI7icFfLg9ZmQeavcvR0PKmzxClyuFPSjKWw==", + "dev": true + }, "node_modules/@foliojs-fork/fontkit": { "version": "1.9.1", "resolved": "https://registry.npmjs.org/@foliojs-fork/fontkit/-/fontkit-1.9.1.tgz", @@ -10471,6 +10510,669 @@ "node": ">=12" } }, + "node_modules/@radix-ui/number": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/number/-/number-1.0.1.tgz", + "integrity": "sha512-T5gIdVO2mmPW3NNhjNgEP3cqMXjXL9UbO0BzWcXfvdBs+BohbQxvd/K5hSVKmn9/lbTdsQVKbUcP5WLCwvUbBg==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10" + } + }, + "node_modules/@radix-ui/primitive": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/primitive/-/primitive-1.0.1.tgz", + "integrity": "sha512-yQ8oGX2GVsEYMWGxcovu1uGWPCxV5BFfeeYxqPmuAzUyLT9qmaMXSAhXpb0WrspIeqYzdJpkh2vHModJPgRIaw==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10" + } + }, + "node_modules/@radix-ui/react-arrow": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-arrow/-/react-arrow-1.0.3.tgz", + "integrity": "sha512-wSP+pHsB/jQRaL6voubsQ/ZlrGBHHrOjmBnr19hxYgtS0WvAFwZhK2WP/YY5yF9uKECCEEDGxuLxq1NBK51wFA==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-collection": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-collection/-/react-collection-1.0.3.tgz", + "integrity": "sha512-3SzW+0PW7yBBoQlT8wNcGtaxaD0XSu0uLUFgrtHY08Acx05TaHaOmVLR73c0j/cqpDy53KBMO7s0dx2wmOIDIA==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-slot": "1.0.2" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-compose-refs": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-compose-refs/-/react-compose-refs-1.0.1.tgz", + "integrity": "sha512-fDSBgd44FKHa1FRMU59qBMPFcl2PZE+2nmqunj+BWFyYYjnhIDWL2ItDs3rrbJDQOtzt5nIebLCQc4QRfz6LJw==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-context": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-context/-/react-context-1.0.1.tgz", + "integrity": "sha512-ebbrdFoYTcuZ0v4wG5tedGnp9tzcV8awzsxYph7gXUyvnNLuTIcCk1q17JEbnVhXAKG9oX3KtchwiMIAYp9NLg==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-direction": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-direction/-/react-direction-1.0.1.tgz", + "integrity": "sha512-RXcvnXgyvYvBEOhCBuddKecVkoMiI10Jcm5cTI7abJRAHYfFxeu+FBQs/DvdxSYucxR5mna0dNsL6QFlds5TMA==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-dismissable-layer": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-dismissable-layer/-/react-dismissable-layer-1.0.4.tgz", + "integrity": "sha512-7UpBa/RKMoHJYjie1gkF1DlK8l1fdU/VKDpoS3rCCo8YBJR294GwcEHyxHw72yvphJ7ld0AXEcSLAzY2F/WyCg==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-escape-keydown": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-focus-guards": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-guards/-/react-focus-guards-1.0.1.tgz", + "integrity": "sha512-Rect2dWbQ8waGzhMavsIbmSVCgYxkXLxxR3ZvCX79JOglzdEy4JXMb98lq4hPxUbLr77nP0UOGf4rcMU+s1pUA==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-focus-scope": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-focus-scope/-/react-focus-scope-1.0.3.tgz", + "integrity": "sha512-upXdPfqI4islj2CslyfUBNlaJCPybbqRHAi1KER7Isel9Q2AtSJ0zRBZv8mWQiFXD2nyAJ4BhC3yXgZ6kMBSrQ==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-id": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-id/-/react-id-1.0.1.tgz", + "integrity": "sha512-tI7sT/kqYp8p96yGWY1OAnLHrqDgzHefRBKQ2YAkBS5ja7QLcZ9Z/uY7bEjPUatf8RomoXM8/1sMj1IJaE5UzQ==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-layout-effect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-popper": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-popper/-/react-popper-1.1.2.tgz", + "integrity": "sha512-1CnGGfFi/bbqtJZZ0P/NQY20xdG3E0LALJaLUEoKwPLwl6PPPfbeiCqMVQnhoFRAxjJj4RpBRJzDmUgsex2tSg==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10", + "@floating-ui/react-dom": "^2.0.0", + "@radix-ui/react-arrow": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1", + "@radix-ui/react-use-rect": "1.0.1", + "@radix-ui/react-use-size": "1.0.1", + "@radix-ui/rect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-portal": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-portal/-/react-portal-1.0.3.tgz", + "integrity": "sha512-xLYZeHrWoPmA5mEKEfZZevoVRK/Q43GfzRXkWV6qawIWWK8t6ifIiLQdd7rmQ4Vk1bmI21XhqF9BN3jWf+phpA==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-primitive": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-primitive/-/react-primitive-1.0.3.tgz", + "integrity": "sha512-yi58uVyoAcK/Nq1inRY56ZSjKypBNKTa/1mcL8qdl6oJeEaDbOldlzrGn7P6Q3Id5d+SYNGc5AJgc4vGhjs5+g==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-slot": "1.0.2" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-roving-focus": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-roving-focus/-/react-roving-focus-1.0.4.tgz", + "integrity": "sha512-2mUg5Mgcu001VkGy+FfzZyzbmuUWzgWkj3rvv4yu+mLw03+mTzbxZHvfcGyFp2b8EkQeMkpRQ5FiA2Vr2O6TeQ==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-collection": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-controllable-state": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-select": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-select/-/react-select-1.2.2.tgz", + "integrity": "sha512-zI7McXr8fNaSrUY9mZe4x/HC0jTLY9fWNhO1oLWYMQGDXuV4UCivIGTxwioSzO0ZCYX9iSLyWmAh/1TOmX3Cnw==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/number": "1.0.1", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-collection": "1.0.3", + "@radix-ui/react-compose-refs": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-dismissable-layer": "1.0.4", + "@radix-ui/react-focus-guards": "1.0.1", + "@radix-ui/react-focus-scope": "1.0.3", + "@radix-ui/react-id": "1.0.1", + "@radix-ui/react-popper": "1.1.2", + "@radix-ui/react-portal": "1.0.3", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-slot": "1.0.2", + "@radix-ui/react-use-callback-ref": "1.0.1", + "@radix-ui/react-use-controllable-state": "1.0.1", + "@radix-ui/react-use-layout-effect": "1.0.1", + "@radix-ui/react-use-previous": "1.0.1", + "@radix-ui/react-visually-hidden": "1.0.3", + "aria-hidden": "^1.1.1", + "react-remove-scroll": "2.5.5" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-separator": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-separator/-/react-separator-1.0.3.tgz", + "integrity": "sha512-itYmTy/kokS21aiV5+Z56MZB54KrhPgn6eHDKkFeOLR34HMN2s8PaN47qZZAGnvupcjxHaFZnW4pQEh0BvvVuw==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-slot": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/@radix-ui/react-slot/-/react-slot-1.0.2.tgz", + "integrity": "sha512-YeTpuq4deV+6DusvVUW4ivBgnkHwECUu0BiN43L5UCDFgdhsRUWAghhTF5MbvNTPzmiFOx90asDSUjWuCNapwg==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-compose-refs": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-toggle": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle/-/react-toggle-1.0.3.tgz", + "integrity": "sha512-Pkqg3+Bc98ftZGsl60CLANXQBBQ4W3mTFS9EJvNxKMZ7magklKV69/id1mlAlOFDDfHvlCms0fx8fA4CMKDJHg==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-toggle-group": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-toggle-group/-/react-toggle-group-1.0.4.tgz", + "integrity": "sha512-Uaj/M/cMyiyT9Bx6fOZO0SAG4Cls0GptBWiBmBxofmDbNVnYYoyRWj/2M/6VCi/7qcXFWnHhRUfdfZFvvkuu8A==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-roving-focus": "1.0.4", + "@radix-ui/react-toggle": "1.0.3", + "@radix-ui/react-use-controllable-state": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-toolbar": { + "version": "1.0.4", + "resolved": "https://registry.npmjs.org/@radix-ui/react-toolbar/-/react-toolbar-1.0.4.tgz", + "integrity": "sha512-tBgmM/O7a07xbaEkYJWYTXkIdU/1pW4/KZORR43toC/4XWyBCURK0ei9kMUdp+gTPPKBgYLxXmRSH1EVcIDp8Q==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/primitive": "1.0.1", + "@radix-ui/react-context": "1.0.1", + "@radix-ui/react-direction": "1.0.1", + "@radix-ui/react-primitive": "1.0.3", + "@radix-ui/react-roving-focus": "1.0.4", + "@radix-ui/react-separator": "1.0.3", + "@radix-ui/react-toggle-group": "1.0.4" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-callback-ref": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.0.1.tgz", + "integrity": "sha512-D94LjX4Sp0xJFVaoQOd3OO9k7tpBYNOXdVhkltUbGv2Qb9OXdrg/CpsjlZv7ia14Sylv398LswWBVVu5nqKzAQ==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-controllable-state": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-1.0.1.tgz", + "integrity": "sha512-Svl5GY5FQeN758fWKrjM6Qb7asvXeiZltlT4U2gVfl8Gx5UAv2sMR0LWo8yhsIZh2oQ0eFdZ59aoOOMV7b47VA==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-callback-ref": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-escape-keydown": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-escape-keydown/-/react-use-escape-keydown-1.0.3.tgz", + "integrity": "sha512-vyL82j40hcFicA+M4Ex7hVkB9vHgSse1ZWomAqV2Je3RleKGO5iM8KMOEtfoSB0PnIelMd2lATjTGMYqN5ylTg==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-callback-ref": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-layout-effect": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.0.1.tgz", + "integrity": "sha512-v/5RegiJWYdoCvMnITBkNNx6bCj20fiaJnWtRkU18yITptraXjffz5Qbn05uOiQnOvi+dbkznkoaMltz1GnszQ==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-previous": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-previous/-/react-use-previous-1.0.1.tgz", + "integrity": "sha512-cV5La9DPwiQ7S0gf/0qiD6YgNqM5Fk97Kdrlc5yBcrF3jyEZQwm7vYFqMo4IfeHgJXsRaMvLABFtd0OVEmZhDw==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-rect": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-rect/-/react-use-rect-1.0.1.tgz", + "integrity": "sha512-Cq5DLuSiuYVKNU8orzJMbl15TXilTnJKUCltMVQg53BQOF1/C5toAaGrowkgksdBQ9H+SRL23g0HDmg9tvmxXw==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/rect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-use-size": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/react-use-size/-/react-use-size-1.0.1.tgz", + "integrity": "sha512-ibay+VqrgcaI6veAojjofPATwledXiSmX+C0KrBk/xgpX9rBzPV3OsfwlhQdUOFbh+LKQorLYT+xTXW9V8yd0g==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-use-layout-effect": "1.0.1" + }, + "peerDependencies": { + "@types/react": "*", + "react": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@radix-ui/react-visually-hidden": { + "version": "1.0.3", + "resolved": "https://registry.npmjs.org/@radix-ui/react-visually-hidden/-/react-visually-hidden-1.0.3.tgz", + "integrity": "sha512-D4w41yN5YRKtu464TLnByKzMDG/JlMPHtfZgQAu9v6mNakUqGUI9vUrfQKz8NK41VMm/xbZbh76NUTVtIYqOMA==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10", + "@radix-ui/react-primitive": "1.0.3" + }, + "peerDependencies": { + "@types/react": "*", + "@types/react-dom": "*", + "react": "^16.8 || ^17.0 || ^18.0", + "react-dom": "^16.8 || ^17.0 || ^18.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + }, + "@types/react-dom": { + "optional": true + } + } + }, + "node_modules/@radix-ui/rect": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/@radix-ui/rect/-/rect-1.0.1.tgz", + "integrity": "sha512-fyrgCaedtvMg9NK3en0pnOYJdtfwxUcNolezkNPUsoX57X8oQk+NkqcvzHXD2uKNij6GXmWU9NDru2IWjrO4BQ==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.13.10" + } + }, "node_modules/@release-it/conventional-changelog": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/@release-it/conventional-changelog/-/conventional-changelog-7.0.0.tgz", @@ -10709,19 +11411,19 @@ } }, "node_modules/@storybook/addon-actions": { - "version": "7.1.1", - "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.1.1.tgz", - "integrity": "sha512-IDxBmNnVgLFfQ407MxOUJmqjz0hgiZB9syi4sfp7BKp5MIPUDT1m+z603kGrvx0bk0W0DPqkp/H8ySEGEx0x6g==", + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.3.2.tgz", + "integrity": "sha512-TsTOHGmwBHRsWS9kaG/bu6haP2dMeiETeGwOgfB5qmukodenXlmi1RujtUdJCNwW3APa0utEFYFKtZVEu9f7WQ==", "dev": true, "dependencies": { - "@storybook/client-logger": "7.1.1", - "@storybook/components": "7.1.1", - "@storybook/core-events": "7.1.1", + "@storybook/client-logger": "7.3.2", + "@storybook/components": "7.3.2", + "@storybook/core-events": "7.3.2", "@storybook/global": "^5.0.0", - "@storybook/manager-api": "7.1.1", - "@storybook/preview-api": "7.1.1", - "@storybook/theming": "7.1.1", - "@storybook/types": "7.1.1", + "@storybook/manager-api": "7.3.2", + "@storybook/preview-api": "7.3.2", + "@storybook/theming": "7.3.2", + "@storybook/types": "7.3.2", "dequal": "^2.0.2", "lodash": "^4.17.21", "polished": "^4.2.2", @@ -10748,6 +11450,186 @@ } } }, + "node_modules/@storybook/addon-actions/node_modules/@storybook/channels": { + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/@storybook/channels/-/channels-7.3.2.tgz", + "integrity": "sha512-GG5+qzv2OZAzXonqUpJR81f2pjKExj7v5MoFJhKYgb3Y+jVYlUzBHBjhQZhuQczP4si418/jvjimvU1PZ4hqcg==", + "dev": true, + "dependencies": { + "@storybook/client-logger": "7.3.2", + "@storybook/core-events": "7.3.2", + "@storybook/global": "^5.0.0", + "qs": "^6.10.0", + "telejson": "^7.0.3", + "tiny-invariant": "^1.3.1" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addon-actions/node_modules/@storybook/client-logger": { + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-7.3.2.tgz", + "integrity": "sha512-T7q/YS5lPUE6xjz9EUwJ/v+KCd5KU9dl1MQ9RcH7IpM73EtQZeNSuM9/P96uKXZTf0wZOUBTXVlTzKr66ZB/RQ==", + "dev": true, + "dependencies": { + "@storybook/global": "^5.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addon-actions/node_modules/@storybook/components": { + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/@storybook/components/-/components-7.3.2.tgz", + "integrity": "sha512-hsa1OJx4yEtLHTzrCxq8G9U5MTbcTuItj9yp1gsW9RTNc/V1n/rReQv4zE/k+//2hDsLrS62o3yhZ9VksRhLNw==", + "dev": true, + "dependencies": { + "@radix-ui/react-select": "^1.2.2", + "@radix-ui/react-toolbar": "^1.0.4", + "@storybook/client-logger": "7.3.2", + "@storybook/csf": "^0.1.0", + "@storybook/global": "^5.0.0", + "@storybook/icons": "^1.1.6", + "@storybook/theming": "7.3.2", + "@storybook/types": "7.3.2", + "memoizerific": "^1.11.3", + "use-resize-observer": "^9.1.0", + "util-deprecate": "^1.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-actions/node_modules/@storybook/core-events": { + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/@storybook/core-events/-/core-events-7.3.2.tgz", + "integrity": "sha512-DCrM3s+sxLKS8vl0zB+1tZEtcl5XQTOGl46XgRRV/SIBabFbsC0l5pQPswWkTUsIqdREtiT0YUHcXB1+YDyFvA==", + "dev": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addon-actions/node_modules/@storybook/manager-api": { + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/@storybook/manager-api/-/manager-api-7.3.2.tgz", + "integrity": "sha512-EEosLcc+CPLjorLf2+rGLBW0sH0SHVcB1yClLIzKM5Wt8Cl/0l19wNtGMooE/28SDLA4DPIl4WDnP83wRE1hsg==", + "dev": true, + "dependencies": { + "@storybook/channels": "7.3.2", + "@storybook/client-logger": "7.3.2", + "@storybook/core-events": "7.3.2", + "@storybook/csf": "^0.1.0", + "@storybook/global": "^5.0.0", + "@storybook/router": "7.3.2", + "@storybook/theming": "7.3.2", + "@storybook/types": "7.3.2", + "dequal": "^2.0.2", + "lodash": "^4.17.21", + "memoizerific": "^1.11.3", + "semver": "^7.3.7", + "store2": "^2.14.2", + "telejson": "^7.0.3", + "ts-dedent": "^2.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-actions/node_modules/@storybook/preview-api": { + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/@storybook/preview-api/-/preview-api-7.3.2.tgz", + "integrity": "sha512-exQrWQQLwf/nXB6OEuQScygN5iO914iNQAvicaJ7mrX9L1ypIq1PpXgJR3mSezBd9dhOMBP/BMy1Zck/wBEL9A==", + "dev": true, + "dependencies": { + "@storybook/channels": "7.3.2", + "@storybook/client-logger": "7.3.2", + "@storybook/core-events": "7.3.2", + "@storybook/csf": "^0.1.0", + "@storybook/global": "^5.0.0", + "@storybook/types": "7.3.2", + "@types/qs": "^6.9.5", + "dequal": "^2.0.2", + "lodash": "^4.17.21", + "memoizerific": "^1.11.3", + "qs": "^6.10.0", + "synchronous-promise": "^2.0.15", + "ts-dedent": "^2.0.0", + "util-deprecate": "^1.0.2" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/@storybook/addon-actions/node_modules/@storybook/router": { + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/@storybook/router/-/router-7.3.2.tgz", + "integrity": "sha512-J3QPudwCJhdnfqPx9GaNDlnsjJ6JbFta/ypp3EkHntyuuaNBeNP3Aq73DJJY2XMTS2Xdw8tD9Y9Y9gCFHJXMDQ==", + "dev": true, + "dependencies": { + "@storybook/client-logger": "7.3.2", + "memoizerific": "^1.11.3", + "qs": "^6.10.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-actions/node_modules/@storybook/theming": { + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-7.3.2.tgz", + "integrity": "sha512-npVsnmNAtqGwl1K7vLC/hcVhL8tBC8G0vdZXEcufF0jHdQmRCUs9ZVrnR6W0LCrtmIHDaDoO7PqJVSzu2wgVxw==", + "dev": true, + "dependencies": { + "@emotion/use-insertion-effect-with-fallbacks": "^1.0.0", + "@storybook/client-logger": "7.3.2", + "@storybook/global": "^5.0.0", + "memoizerific": "^1.11.3" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, + "node_modules/@storybook/addon-actions/node_modules/@storybook/types": { + "version": "7.3.2", + "resolved": "https://registry.npmjs.org/@storybook/types/-/types-7.3.2.tgz", + "integrity": "sha512-1UHC1r2J6H9dEpj4pp9a16P1rTL87V9Yc6TtYBpp7m+cxzyIZBRvu1wZFKmRB51RXE/uDaxGRKzfNRfgTALcIQ==", + "dev": true, + "dependencies": { + "@storybook/channels": "7.3.2", + "@types/babel__core": "^7.0.0", + "@types/express": "^4.7.0", + "file-system-cache": "2.3.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, "node_modules/@storybook/addon-backgrounds": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/@storybook/addon-backgrounds/-/addon-backgrounds-7.1.1.tgz", @@ -10882,6 +11764,46 @@ "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/@storybook/addon-essentials/node_modules/@storybook/addon-actions": { + "version": "7.1.1", + "resolved": "https://registry.npmjs.org/@storybook/addon-actions/-/addon-actions-7.1.1.tgz", + "integrity": "sha512-IDxBmNnVgLFfQ407MxOUJmqjz0hgiZB9syi4sfp7BKp5MIPUDT1m+z603kGrvx0bk0W0DPqkp/H8ySEGEx0x6g==", + "dev": true, + "dependencies": { + "@storybook/client-logger": "7.1.1", + "@storybook/components": "7.1.1", + "@storybook/core-events": "7.1.1", + "@storybook/global": "^5.0.0", + "@storybook/manager-api": "7.1.1", + "@storybook/preview-api": "7.1.1", + "@storybook/theming": "7.1.1", + "@storybook/types": "7.1.1", + "dequal": "^2.0.2", + "lodash": "^4.17.21", + "polished": "^4.2.2", + "prop-types": "^15.7.2", + "react-inspector": "^6.0.0", + "telejson": "^7.0.3", + "ts-dedent": "^2.0.0", + "uuid": "^9.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "react": { + "optional": true + }, + "react-dom": { + "optional": true + } + } + }, "node_modules/@storybook/addon-highlight": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/@storybook/addon-highlight/-/addon-highlight-7.1.1.tgz", @@ -13218,6 +14140,19 @@ "integrity": "sha512-FcOqPAXACP0I3oJ/ws6/rrPT9WGhu915Cg8D02a9YxLo0DE9zI+a9A5gRGvmQ09fiWPukqI8ZAEoQEdWUKMQdQ==", "dev": true }, + "node_modules/@storybook/icons": { + "version": "1.1.6", + "resolved": "https://registry.npmjs.org/@storybook/icons/-/icons-1.1.6.tgz", + "integrity": "sha512-co5gDCYPojRAc5lRMnWxbjrR1V37/rTmAo9Vok4a1hDpHZIwkGTWesdzvYivSQXYFxZTpxdM1b5K3W87brnahw==", + "dev": true, + "engines": { + "node": ">=14.0.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@storybook/manager": { "version": "7.1.1", "resolved": "https://registry.npmjs.org/@storybook/manager/-/manager-7.1.1.tgz", @@ -15769,6 +16704,18 @@ "resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz", "integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==" }, + "node_modules/aria-hidden": { + "version": "1.2.3", + "resolved": "https://registry.npmjs.org/aria-hidden/-/aria-hidden-1.2.3.tgz", + "integrity": "sha512-xcLxITLe2HYa1cnYnwCjkOO1PqUHQpozB8x9AR0OgWN2woOBi5kSDVxKfd0b7sb1hw5qFeJhXm9H1nu3xSfLeQ==", + "dev": true, + "dependencies": { + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + } + }, "node_modules/aria-query": { "version": "5.1.3", "resolved": "https://registry.npmjs.org/aria-query/-/aria-query-5.1.3.tgz", @@ -20688,6 +21635,12 @@ "integrity": "sha512-T0NIuQpnTvFDATNuHN5roPwSBG83rFsuO+MXXH9/3N1eFbn4wcPjttvjMLEPWJ0RGUYgQE7cGgS3tNxbqCGM7g==", "dev": true }, + "node_modules/detect-node-es": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/detect-node-es/-/detect-node-es-1.1.0.tgz", + "integrity": "sha512-ypdmJU/TbBby2Dxibuv7ZLW3Bs1QEmM7nHjEANfohJLvE0XVujisn1qPJcZxg+qDucsr+bP6fLD1rPS3AhJ7EQ==", + "dev": true + }, "node_modules/detect-package-manager": { "version": "2.0.1", "resolved": "https://registry.npmjs.org/detect-package-manager/-/detect-package-manager-2.0.1.tgz", @@ -24059,6 +25012,15 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/get-nonce": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/get-nonce/-/get-nonce-1.0.1.tgz", + "integrity": "sha512-FJhYRoDaiatfEkUK8HKlicmu/3SGFD51q3itKDGoSTysQJBnfOcxU5GxnhE1E6soB76MbT0MBtnKJuXyAx+96Q==", + "dev": true, + "engines": { + "node": ">=6" + } + }, "node_modules/get-npm-tarball-url": { "version": "2.0.3", "resolved": "https://registry.npmjs.org/get-npm-tarball-url/-/get-npm-tarball-url-2.0.3.tgz", @@ -25951,6 +26913,15 @@ "node": ">= 0.10" } }, + "node_modules/invariant": { + "version": "2.2.4", + "resolved": "https://registry.npmjs.org/invariant/-/invariant-2.2.4.tgz", + "integrity": "sha512-phJfQVBuaJM5raOpJjSfkiD6BpbCE4Ns//LaXl6wGYtUBY83nWS6Rf9tXm2e8VaK60JEjYldbPif/A2B1C2gNA==", + "dev": true, + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/ip": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/ip/-/ip-2.0.0.tgz", @@ -34215,6 +35186,76 @@ "integrity": "sha512-xWGDIW6x921xtzPkhiULtthJHoJvBbF3q26fzloPCK0hsvxtPVelvftw3zjbHWSkR2km9Z+4uxbDDK/6Zw9B8w==", "dev": true }, + "node_modules/react-remove-scroll": { + "version": "2.5.5", + "resolved": "https://registry.npmjs.org/react-remove-scroll/-/react-remove-scroll-2.5.5.tgz", + "integrity": "sha512-ImKhrzJJsyXJfBZ4bzu8Bwpka14c/fQt0k+cyFp/PBhTfyDnU5hjOtM4AG/0AMyy8oKzOTR0lDgJIM7pYXI0kw==", + "dev": true, + "dependencies": { + "react-remove-scroll-bar": "^2.3.3", + "react-style-singleton": "^2.2.1", + "tslib": "^2.1.0", + "use-callback-ref": "^1.3.0", + "use-sidecar": "^1.1.2" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/react-remove-scroll-bar": { + "version": "2.3.4", + "resolved": "https://registry.npmjs.org/react-remove-scroll-bar/-/react-remove-scroll-bar-2.3.4.tgz", + "integrity": "sha512-63C4YQBUt0m6ALadE9XV56hV8BgJWDmmTPY758iIJjfQKt2nYwoUrPk0LXRXcB/yIj82T1/Ixfdpdk68LwIB0A==", + "dev": true, + "dependencies": { + "react-style-singleton": "^2.2.1", + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/react-style-singleton": { + "version": "2.2.1", + "resolved": "https://registry.npmjs.org/react-style-singleton/-/react-style-singleton-2.2.1.tgz", + "integrity": "sha512-ZWj0fHEMyWkHzKYUr2Bs/4zU6XLmq9HsgBURm7g5pAVfyn49DgUiNgY2d4lXRlYSiCif9YBGpQleewkcqddc7g==", + "dev": true, + "dependencies": { + "get-nonce": "^1.0.0", + "invariant": "^2.2.4", + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/read-cache": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/read-cache/-/read-cache-1.0.0.tgz", @@ -39938,6 +40979,27 @@ "integrity": "sha512-jmYNElW7yvO7TV33CjSmvSiE2yco3bV2czu/OzDKdMNVZQWfxCblURLhf+47syQRBntjfLdd/H0egrzIG+oaFQ==", "dev": true }, + "node_modules/use-callback-ref": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/use-callback-ref/-/use-callback-ref-1.3.0.tgz", + "integrity": "sha512-3FT9PRuRdbB9HfXhEq35u4oZkvpJ5kuYbpqhCfmiZyReuRgpnhDlbr2ZEnnuS0RrJAPn6l23xjFg9kpDM+Ms7w==", + "dev": true, + "dependencies": { + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/use-resize-observer": { "version": "9.1.0", "resolved": "https://registry.npmjs.org/use-resize-observer/-/use-resize-observer-9.1.0.tgz", @@ -39951,6 +41013,28 @@ "react-dom": "16.8.0 - 18" } }, + "node_modules/use-sidecar": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/use-sidecar/-/use-sidecar-1.1.2.tgz", + "integrity": "sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==", + "dev": true, + "dependencies": { + "detect-node-es": "^1.1.0", + "tslib": "^2.0.0" + }, + "engines": { + "node": ">=10" + }, + "peerDependencies": { + "@types/react": "^16.9.0 || ^17.0.0 || ^18.0.0", + "react": "^16.8.0 || ^17.0.0 || ^18.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, "node_modules/util": { "version": "0.12.5", "resolved": "https://registry.npmjs.org/util/-/util-0.12.5.tgz", diff --git a/package.json b/package.json index 35bb26b8..feb3f2b2 100644 --- a/package.json +++ b/package.json @@ -75,6 +75,7 @@ "@nx/workspace": "16.5.5", "@release-it/conventional-changelog": "^7.0.0", "@shopify/eslint-plugin": "^42.1.0", + "@storybook/addon-actions": "^7.3.2", "@storybook/addon-essentials": "7.1.1", "@storybook/angular": "7.1.1", "@storybook/core-common": "^7.0.11",