diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml index c5921ee37..9b19ffb3d 100644 --- a/.github/workflows/release.yml +++ b/.github/workflows/release.yml @@ -47,6 +47,7 @@ jobs: "@ollion/flow-log":"packages/flow-log/CHANGELOG.md", "@ollion/flow-code-editor":"packages/flow-code-editor/CHANGELOG.md", "@ollion/flow-md-editor":"packages/flow-md-editor/CHANGELOG.md", + "@ollion/flow-text-editor":"packages/flow-text-editor/CHANGELOG.md", "@ollion/flow-core":"packages/flow-core/CHANGELOG.md", "@ollion/flow-table":"packages/flow-table/CHANGELOG.md", "@ollion/flow-core-config":"packages/flow-core-config/CHANGELOG.md", diff --git a/.storybook/main.ts b/.storybook/main.ts index 28cbeea51..cc56872bd 100644 --- a/.storybook/main.ts +++ b/.storybook/main.ts @@ -9,6 +9,7 @@ const alias = [ "flow-lineage", "flow-log", "flow-md-editor", + "flow-text-editor", "flow-table", "flow-dashboard" ].map(pkg => ({ diff --git a/.storybook/preview.ts b/.storybook/preview.ts index 66a216a1a..bac1f03c5 100644 --- a/.storybook/preview.ts +++ b/.storybook/preview.ts @@ -11,6 +11,7 @@ import "@ollion/flow-log"; import "@ollion/flow-code-editor"; import "@ollion/flow-table"; import "@ollion/flow-md-editor"; +import "@ollion/flow-text-editor"; import "@ollion/flow-form-builder"; import "@ollion/flow-lineage"; import "@ollion/flow-dashboard"; @@ -65,6 +66,8 @@ export const parameters = { ["About", "Release Notes", "Properties", "*", "Examples", "Debug"], "flow-code-editor", ["About", "Release Notes"], + "flow-text-editor", + ["About", "Release Notes"], "flow-md-editor", ["About", "Release Notes"], "flow-log", @@ -134,6 +137,10 @@ async function run() { await fetch(new URL("../packages/flow-md-editor/custom-elements.json", import.meta.url)) ).json(); + const textEditorCustomElements = await ( + await fetch(new URL("../packages/flow-text-editor/custom-elements.json", import.meta.url)) + ).json(); + setCustomElementsManifest(customElements); setCustomElements(customElements); setCustomElementsManifest(loggerCustomElements); @@ -146,6 +153,8 @@ async function run() { setCustomElementsManifest(mdEditorCustomElements); setCustomElements(mdEditorCustomElements); + setCustomElementsManifest(textEditorCustomElements); + setCustomElements(textEditorCustomElements); setCustomElementsManifest(dashboardCustomElements); setCustomElements(dashboardCustomElements); } diff --git a/package.json b/package.json index ed573845c..1f821fae6 100644 --- a/package.json +++ b/package.json @@ -80,6 +80,7 @@ "@ollion/flow-lineage": "workspace:*", "@ollion/flow-log": "workspace:*", "@ollion/flow-md-editor": "workspace:*", + "@ollion/flow-text-editor": "workspace:*", "@ollion/flow-product-icon": "1.14.0", "@ollion/flow-system-icon": "latest", "@ollion/flow-table": "workspace:*", diff --git a/packages/flow-core/CHANGELOG.md b/packages/flow-core/CHANGELOG.md index dd5951eb9..c61b9bfae 100644 --- a/packages/flow-core/CHANGELOG.md +++ b/packages/flow-core/CHANGELOG.md @@ -2,6 +2,12 @@ # Change Log +## [2.10.0] - 2024-07-10 + +### Minor Changes + +- `actions` property added in `f-button`, it will be displayed under chevron + ## [2.9.15] - 2024-07-08 ### Patch Changes diff --git a/packages/flow-core/package.json b/packages/flow-core/package.json index 3de257842..ef9e2c93c 100644 --- a/packages/flow-core/package.json +++ b/packages/flow-core/package.json @@ -1,6 +1,6 @@ { "name": "@ollion/flow-core", - "version": "2.9.15", + "version": "2.10.0", "description": "Core package of flow design system", "module": "dist/flow-core.es.js", "main": "dist/flow-core.cjs.js", diff --git a/packages/flow-core/src/components/f-button/f-button.scss b/packages/flow-core/src/components/f-button/f-button.scss index 55c66f272..87425ed12 100644 --- a/packages/flow-core/src/components/f-button/f-button.scss +++ b/packages/flow-core/src/components/f-button/f-button.scss @@ -43,6 +43,7 @@ $sizes: ( "x-small": ( "height": 20px, "padding": 0px 8px, + "options-padding": 0px 4px, "fontSize": 10px, "gap": 4px, "loaderSize": 12px @@ -50,6 +51,7 @@ $sizes: ( "small": ( "height": 28px, "padding": 0px 12px, + "options-padding": 0px 8px, "fontSize": 12px, "gap": 8px, "loaderSize": 16px @@ -57,6 +59,7 @@ $sizes: ( "medium": ( "height": 36px, "padding": 0px 16px, + "options-padding": 0px 12px, "fontSize": 14px, "gap": 12px, "loaderSize": 20px @@ -64,6 +67,7 @@ $sizes: ( "large": ( "height": 44px, "padding": 0px 20px, + "options-padding": 0px 16px, "fontSize": 16px, "gap": 16px, "loaderSize": 24px @@ -162,7 +166,10 @@ in this case it is `f-button` } } } - + &.has-options { + border-top-right-radius: 0px !important; + border-bottom-right-radius: 0px !important; + } /** * Iterating over sizes with padding, fontsize, height **/ @@ -180,6 +187,10 @@ in this case it is `f-button` padding: map.get($value, "padding"); } + &.has-options { + padding-right: map.get($value, "gap") !important; + } + f-counter { margin-left: map.get($value, "gap"); } @@ -231,4 +242,65 @@ in this case it is `f-button` button:focus { outline: none; } + + .options-wrapper { + display: flex; + align-items: center; + justify-content: center; + box-sizing: border-box; + cursor: pointer; + // + + @each $state, $color in $states { + &[state="#{$state}"][category="fill"] { + background-color: map.get($color, "background"); + border: 1px solid map.get($color, "background"); // added to match width of outline category + border-left: 1px solid var(--color-border-default) !important; + // hover changes background + &:hover { + background-color: map.get($color, "hover"); + border: 1px solid map.get($color, "hover"); + } + } + + // outline category states styles, where backgrounds are transparent + &[state="#{$state}"][category="outline"] { + background-color: transparent; + border: 1px solid map.get($color, "background"); + border-left: 1px solid transparent !important; + color: map.get($color, "background"); + &:hover { + border: 1px solid map.get($color, "hover"); + color: map.get($color, "hover"); + } + } + //transparent category with transparent background and border + &[state="#{$state}"][category="transparent"], + &[state="#{$state}"][category="packed"] { + background-color: transparent; + border: 1px solid transparent; + color: map.get($color, "background"); + &:hover { + border: 1px solid transparent; + color: map.get($color, "hover"); + } + } + } + + @each $size, $value in $sizes { + &[size="#{$size}"] { + &[variant="round"] { + border-top-right-radius: var(--input-border-radius-round); + border-bottom-right-radius: var(--input-border-radius-round); + } + &[category="packed"] { + padding: 0px; + } + &:not([category="packed"]) { + height: map.get($value, "height"); + padding: map.get($value, "options-padding"); + } + } + } + } } diff --git a/packages/flow-core/src/components/f-button/f-button.ts b/packages/flow-core/src/components/f-button/f-button.ts index cf0c56723..994f6f331 100644 --- a/packages/flow-core/src/components/f-button/f-button.ts +++ b/packages/flow-core/src/components/f-button/f-button.ts @@ -1,4 +1,11 @@ -import { html, PropertyValueMap, PropertyValues, unsafeCSS } from "lit"; +import { + html, + HTMLTemplateResult, + nothing, + PropertyValueMap, + PropertyValues, + unsafeCSS +} from "lit"; import { property, query, state } from "lit/decorators.js"; import { FRoot } from "../../mixins/components/f-root/f-root"; import eleStyle from "./f-button.scss?inline"; @@ -16,6 +23,9 @@ import { FCounter } from "../f-counter/f-counter"; import { flowElement } from "./../../utils"; import { injectCss } from "@ollion/flow-core-config"; import { ifDefined } from "lit/directives/if-defined.js"; +import { FPopover } from "../f-popover/f-popover"; +import { FDiv } from "../f-div/f-div"; +import { FText } from "../f-text/f-text"; export type FButtonState = | "primary" @@ -28,6 +38,9 @@ export type FButtonState = injectCss("f-button", globalStyle); +export type FButtonAction = string | (() => HTMLTemplateResult); +export type FButtonActions = FButtonAction[]; + /** * @summary Buttons allow users to perform an action or to initiate a new function. */ @@ -40,7 +53,10 @@ export class FButton extends FRoot { unsafeCSS(eleStyle), unsafeCSS(globalStyle), ...FIcon.styles, - ...FCounter.styles + ...FCounter.styles, + ...FDiv.styles, + ...FPopover.styles, + ...FText.styles ]; /** @@ -109,6 +125,18 @@ export class FButton extends FRoot { @property({ reflect: true, type: Boolean }) disabled?: boolean = false; + /** + * @attribute actions are used to display if single button can do multiple actions + */ + @property({ reflect: false, type: Array }) + actions?: FButtonActions = []; + + /** + * @attribute to show which action is currently selected + */ + @property({ reflect: true, type: String, attribute: "selected-action" }) + selectedAction?: FButtonAction; + /** * @attribute Set true if want to wrap content if there is no space in button */ @@ -120,6 +148,11 @@ export class FButton extends FRoot { */ @query("f-icon") iconElement!: FIcon; + /** + * icon element reference + */ + @query("#f-button-actions") + buttonActionsPopover?: FPopover; /** * counter element reference @@ -212,6 +245,10 @@ export class FButton extends FRoot { this.setAttribute("aria-disabled", this.disabled ? "true" : "false"); } + get hasActions() { + return this.actions && this.actions.length > 0; + } + render() { /** * creating local fill variable out of state prop. @@ -251,7 +288,7 @@ export class FButton extends FRoot { .size=${this.iconSize} clickable >` - : ""; + : nothing; /** * create iconRight if available */ @@ -288,7 +325,7 @@ export class FButton extends FRoot { .label=${this.counter} class=${classMap(counterClasses)} >` - : ""; + : nothing; /** * render loading if required */ @@ -317,23 +354,106 @@ export class FButton extends FRoot { * Final html to render */ return html` - ${iconLeft}${this.label}${iconRight}${counter} - `; + part="f-button-wrapper" + class=${classMap({ + "f-button": true, + "custom-loader": this.fill ? true : false, + "custom-hover": this.fill && this.category === "fill" ? true : false, + "has-options": this.hasActions ? true : false + })} + style=${this.applyStyles()} + category=${ifDefined(this.category)} + size=${ifDefined(this.size)} + state=${ifDefined(this.state)} + variant=${ifDefined(this.variant)} + ?loading=${this.loading} + ?disabled=${this.disabled} + data-qa-id=${ifDefined(this.getAttribute("data-qa-element-id")) ?? ""} + > + ${iconLeft}${this.label}${iconRight}${counter} + + ${this.hasActions + ? html`
+ +
+ + + ${this.actions!.map((a, ai) => { + const border = (() => { + if (ai === this.actions!.length - 1) { + return "none"; + } + return "small solid secondary bottom"; + })(); + return html` this.selectAction(a)} + > + ${typeof a === "function" + ? a() + : html`${a}`} + ${this.selectedAction === a + ? html`` + : nothing} + `; + })} + + ` + : nothing} `; + } + + selectAction(action: FButtonAction) { + this.selectedAction = action; + this.closeButtonActions(); + + const event = new CustomEvent<{ action: FButtonAction }>("action", { + detail: { + action + }, + bubbles: true, + composed: true + }); + this.dispatchEvent(event); + } + handleButtonActions() { + if (this.buttonActionsPopover) { + this.buttonActionsPopover.target = this; + this.buttonActionsPopover.offset = { + mainAxis: 4, + crossAxis: 0, + alignmentAxis: 0 + }; + this.buttonActionsPopover.open = true; + } + } + + closeButtonActions() { + if (this.buttonActionsPopover) { + this.buttonActionsPopover.open = false; + } } protected updated(changedProperties: PropertyValues) { diff --git a/packages/flow-md-editor/CHANGELOG.md b/packages/flow-md-editor/CHANGELOG.md index 738a7bb02..820e84ff3 100644 --- a/packages/flow-md-editor/CHANGELOG.md +++ b/packages/flow-md-editor/CHANGELOG.md @@ -2,6 +2,13 @@ # Change Log +## [2.1.2] - 2024-07-08 + +### Patch Changes + +- `f-md-editor` stories added. +- minor css changes when used inside `f-div`. + ## [2.1.1] - 2024-07-08 ### Patch Changes diff --git a/packages/flow-md-editor/package.json b/packages/flow-md-editor/package.json index 9a94d38c6..5c0607525 100644 --- a/packages/flow-md-editor/package.json +++ b/packages/flow-md-editor/package.json @@ -1,6 +1,6 @@ { "name": "@ollion/flow-md-editor", - "version": "2.1.1", + "version": "2.1.2", "description": "Code editor component for flow library", "module": "dist/flow-md-editor.es.js", "main": "dist/flow-md-editor.es.js", diff --git a/packages/flow-md-editor/src/components/f-md-editor/f-md-editor-global.scss b/packages/flow-md-editor/src/components/f-md-editor/f-md-editor-global.scss index b2fa73397..09c5117b2 100644 --- a/packages/flow-md-editor/src/components/f-md-editor/f-md-editor-global.scss +++ b/packages/flow-md-editor/src/components/f-md-editor/f-md-editor-global.scss @@ -18,6 +18,8 @@ f-md-editor { width: minmax(100%, max-content); border: 1px solid transparent; padding: 8px; + box-sizing: border-box; + height: 100%; white-space: pre-line; background-color: var(--color-surface-tertiary); @@ -164,3 +166,18 @@ f-md-editor { padding: 0; } } + +f-div[direction="column"] { + > f-md-editor { + width: 100%; + flex: 1 0 auto; + } +} + +f-div[direction="row"] { + > f-md-editor { + flex: 1 0; + max-width: 100%; + height: 100%; + } +} diff --git a/packages/flow-text-editor/.npmignore b/packages/flow-text-editor/.npmignore new file mode 100644 index 000000000..f245c4cd1 --- /dev/null +++ b/packages/flow-text-editor/.npmignore @@ -0,0 +1,8 @@ +* +!dist/**/*.* +!shims.d.ts +!custom-elements.json +!html.html-data.json +!src/**/*.* +!README.md +!umd/**/*.* \ No newline at end of file diff --git a/packages/flow-text-editor/CHANGELOG.md b/packages/flow-text-editor/CHANGELOG.md new file mode 100644 index 000000000..27a33d6bf --- /dev/null +++ b/packages/flow-text-editor/CHANGELOG.md @@ -0,0 +1,9 @@ +

Release Notes

+ +# Change Log + +## [0.0.1] - 2024-07-08 + +### Features + +- `f-text-editor` : component added diff --git a/packages/flow-text-editor/LICENSE b/packages/flow-text-editor/LICENSE new file mode 100644 index 000000000..3263a06ef --- /dev/null +++ b/packages/flow-text-editor/LICENSE @@ -0,0 +1,20 @@ +Copyright (c) 2022 CloudCover Consultancy Pvt 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. \ No newline at end of file diff --git a/packages/flow-text-editor/README.md b/packages/flow-text-editor/README.md new file mode 100644 index 000000000..30f008a2e --- /dev/null +++ b/packages/flow-text-editor/README.md @@ -0,0 +1,60 @@ +# Flow Text Editor + +The Flow text editor is built on the Flow design framework ([website](https://flow.ollion.com/) / [github](https://github.com/ollionorg/flow-core)) using [Quill](https://github.com/slab/quill?tab=readme-ov-file) + +# Installation + +### 1️⃣ Install flow code editor dependency + +``` +npm i --save @ollion/flow-text-editor +``` + +**Note:** after installation, re-start your application. + +
+ +### 2️⃣ Import flow-text-editor into your project + +Paste the below snippet in your project and add your application startup/runtime code to it. + +```javascript +import "@ollion/flow-core"; +import "@ollion/flow-text-editor"; +``` + +
+ +### 3️⃣ For a typescript enabled project (optional) + +**Note:** After adding, re-start your application. Make sure you are using version >4.5 + +**For Vue 3:** +Copy paste below import types in your `main.ts` file. + +```Javascript +import "@ollion/flow-text-editor/dist/types/vue3"; +``` + +
+For Vue 2 + +Copy paste below import types in your `main.ts` file. + +```Javascript +import "@ollion/flow-text-editor/dist/types/vue2"; +``` + +
+ +
+For React + +**React**: Include react type in `tsconfig.json` file like below. + +```json +"include": ["src", "./node_modules/@ollion/flow-text-editor/dist/types/react.ts"] +``` + +
+
diff --git a/packages/flow-text-editor/compile.sh b/packages/flow-text-editor/compile.sh new file mode 100644 index 000000000..066339adf --- /dev/null +++ b/packages/flow-text-editor/compile.sh @@ -0,0 +1,11 @@ + +#!/bin/bash + +HERE=$( cd -- "$( dirname -- "${BASH_SOURCE[0]}" )" &> /dev/null && pwd ) + +cd "$HERE" + +pnpm run analyze + +echo "building library..." +pnpm vite build --emptyOutDir diff --git a/packages/flow-text-editor/package.json b/packages/flow-text-editor/package.json new file mode 100644 index 000000000..eea1f4816 --- /dev/null +++ b/packages/flow-text-editor/package.json @@ -0,0 +1,61 @@ +{ + "name": "@ollion/flow-text-editor", + "version": "0.0.1", + "description": "Code editor component for flow library", + "module": "dist/flow-text-editor.es.js", + "main": "dist/flow-text-editor.cjs.js", + "types": "dist/src/index.d.ts", + "scripts": { + "build": "bash ./compile.sh", + "build:watch": "concurrently --kill-others \"vite build --emptyOutDir --watch\" \"tsc --watch\"", + "analyze": "cem analyze --litelement --globs \"src/**/*.ts\" && wca analyze src --format vscode --outFile html.html-data.json", + "analyze:watch": "cem analyze --litelement --globs \"src/**/*.ts\" --watch", + "test": "web-test-runner ./src/**/*.test.ts --node-resolve --port 8096" + }, + "keywords": [ + "web-components", + "lit-element", + "typescript", + "lit" + ], + "dependencies": { + "@ollion/flow-core": "workspace:*", + "@ollion/flow-core-config": "workspace:*", + "lit": "^3.1.0", + "quill": "^2.0.2" + }, + "devDependencies": { + "@custom-elements-manifest/analyzer": "^0.5.7", + "@open-wc/testing": "^3.1.5", + "@types/jest": "29.5.5", + "@web/dev-server-esbuild": "^0.4.1", + "@web/test-runner": "^0.17.1", + "concurrently": "^8.2.1", + "esbuild-sass-plugin": "2.2.6", + "lit-html": "^3.1.0", + "sass": "^1.52.3", + "typescript": "^5.2.2", + "vite": "^4.4.11", + "web-component-analyzer": "^2.0.0-next.4" + }, + "peerDependencies": { + "@ollion/flow-core": "^2.0.3", + "@ollion/flow-core-config": "^1.1.3" + }, + "repository": { + "type": "git", + "url": "https://github.com/ollionorg/flow-core.git", + "directory": "packages/flow-text-editor" + }, + "publishConfig": { + "access": "public", + "registry": "https://registry.npmjs.org" + }, + "customElements": "custom-elements.json", + "bugs": { + "url": "https://github.com/ollionorg/flow-core/issues" + }, + "homepage": "https://github.com/ollionorg/flow-core", + "author": "@ollion", + "license": "MIT" +} diff --git a/packages/flow-text-editor/src/components/f-text-editor/f-text-editor-global.scss b/packages/flow-text-editor/src/components/f-text-editor/f-text-editor-global.scss new file mode 100644 index 000000000..352eca6d0 --- /dev/null +++ b/packages/flow-text-editor/src/components/f-text-editor/f-text-editor-global.scss @@ -0,0 +1,266 @@ +@import "../../../../flow-core/src/mixins/scss/mixins"; +@import "quill/dist/quill.snow.css"; + +f-text-editor { + @include base(); + display: flex; + flex: 1 0 auto; + max-width: 100%; + max-height: 100%; + overflow: auto; + border-radius: 4px; + flex-direction: column; + > .ql-toolbar.ql-snow { + font-family: var(--flow-font); + border: 1px solid var(--color-input-default); + background-color: var(--color-input-default); + .ql-picker { + color: var(--color-text-default); + + &.ql-expanded .ql-picker-label .ql-stroke { + stroke: var(--color-text-default); + } + .ql-picker-label .ql-stroke { + stroke: var(--color-text-default); + } + &.ql-expanded .ql-picker-options, + &.ql-expanded .ql-picker-label { + border-color: var(--color-surface-secondary); + } + + &.ql-expanded .ql-picker-label { + background-color: var(--color-surface-secondary); + } + } + .ql-picker-options { + background-color: var(--color-surface-secondary); + } + } + + > .f-text-editor-root { + display: flex; + max-width: 100%; + max-height: 100%; + overflow: auto; + flex-direction: column; + background-color: var(--color-input-default); + + &.ql-container.ql-snow { + border: 1px solid var(--color-input-default); + } + .ql-editor { + padding: 0px 12px 12px 12px; + } + } + + .ql-snow.ql-toolbar button:hover, + .ql-snow .ql-toolbar button:hover, + .ql-snow.ql-toolbar button:focus, + .ql-snow .ql-toolbar button:focus, + .ql-snow.ql-toolbar button.ql-active, + .ql-snow .ql-toolbar button.ql-active, + .ql-snow.ql-toolbar .ql-picker-label:hover, + .ql-snow .ql-toolbar .ql-picker-label:hover, + .ql-snow.ql-toolbar .ql-picker-label.ql-active, + .ql-snow .ql-toolbar .ql-picker-label.ql-active, + .ql-snow.ql-toolbar .ql-picker-item:hover, + .ql-snow .ql-toolbar .ql-picker-item:hover, + .ql-snow.ql-toolbar .ql-picker-item.ql-selected, + .ql-snow .ql-toolbar .ql-picker-item.ql-selected { + color: var(--color-primary-default); + } + .ql-snow .ql-stroke { + stroke: var(--color-text-default); + } + + .ql-snow.ql-toolbar button:hover .ql-stroke, + .ql-snow .ql-toolbar button:hover .ql-stroke, + .ql-snow.ql-toolbar button:focus .ql-stroke, + .ql-snow .ql-toolbar button:focus .ql-stroke, + .ql-snow.ql-toolbar button.ql-active .ql-stroke, + .ql-snow .ql-toolbar button.ql-active .ql-stroke, + .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke, + .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke, + .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke, + .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke, + .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke, + .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke, + .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke, + .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke, + .ql-snow.ql-toolbar button:hover .ql-stroke-miter, + .ql-snow .ql-toolbar button:hover .ql-stroke-miter, + .ql-snow.ql-toolbar button:focus .ql-stroke-miter, + .ql-snow .ql-toolbar button:focus .ql-stroke-miter, + .ql-snow.ql-toolbar button.ql-active .ql-stroke-miter, + .ql-snow .ql-toolbar button.ql-active .ql-stroke-miter, + .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke-miter, + .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke-miter, + .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, + .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke-miter, + .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke-miter, + .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke-miter, + .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter, + .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke-miter { + stroke: var(--color-primary-default); + } + + .ql-snow .ql-tooltip { + background-color: var(--color-surface-secondary); + border: 1px solid var(--color-surface-secondary); + box-shadow: 0 0 5px var(--color-surface-secondary); + color: var(--color-text-default); + padding: 12px; + border-radius: 4px; + } + .ql-snow .ql-tooltip input[type="text"] { + background-color: var(--color-input-default); + padding: 12px; + outline: none; + height: 28px; + border: none; + border-radius: 4px; + color: var(--color-text-default); + width: 250px; + + &:focus { + border: 1px solid var(--color-primary-default); + } + } + .ql-snow a { + color: var(--color-primary-default); + } + .ql-editor.ql-blank::before { + color: var(--color-text-subtle); + font-style: normal; + } + .ql-snow .ql-fill, + .ql-snow .ql-stroke.ql-fill { + fill: var(--color-text-default); + } + .ql-snow.ql-toolbar button:hover .ql-fill, + .ql-snow .ql-toolbar button:hover .ql-fill, + .ql-snow.ql-toolbar button:focus .ql-fill, + .ql-snow .ql-toolbar button:focus .ql-fill, + .ql-snow.ql-toolbar button.ql-active .ql-fill, + .ql-snow .ql-toolbar button.ql-active .ql-fill, + .ql-snow.ql-toolbar .ql-picker-label:hover .ql-fill, + .ql-snow .ql-toolbar .ql-picker-label:hover .ql-fill, + .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-fill, + .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-fill, + .ql-snow.ql-toolbar .ql-picker-item:hover .ql-fill, + .ql-snow .ql-toolbar .ql-picker-item:hover .ql-fill, + .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-fill, + .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-fill, + .ql-snow.ql-toolbar button:hover .ql-stroke.ql-fill, + .ql-snow .ql-toolbar button:hover .ql-stroke.ql-fill, + .ql-snow.ql-toolbar button:focus .ql-stroke.ql-fill, + .ql-snow .ql-toolbar button:focus .ql-stroke.ql-fill, + .ql-snow.ql-toolbar button.ql-active .ql-stroke.ql-fill, + .ql-snow .ql-toolbar button.ql-active .ql-stroke.ql-fill, + .ql-snow.ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, + .ql-snow .ql-toolbar .ql-picker-label:hover .ql-stroke.ql-fill, + .ql-snow.ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, + .ql-snow .ql-toolbar .ql-picker-label.ql-active .ql-stroke.ql-fill, + .ql-snow.ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, + .ql-snow .ql-toolbar .ql-picker-item:hover .ql-stroke.ql-fill, + .ql-snow.ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill, + .ql-snow .ql-toolbar .ql-picker-item.ql-selected .ql-stroke.ql-fill { + fill: var(--color-primary-default); + } + + strong { + font-weight: bold; + } + em { + font-style: italic; + } + u { + text-decoration: underline; + } + s { + text-decoration: line-through; + } + blockquote { + border-left: 4px solid var(--color-border-default); + margin-bottom: 5px; + margin-top: 5px; + padding-left: 16px; + } + .ql-snow .ql-editor { + h1 { + font-size: 20px; + font-weight: bold; + line-height: 30px; + } + + h2 { + font-size: 18px; + font-weight: bold; + line-height: 27px; + } + + h3 { + font-size: 16px; + font-weight: bold; + line-height: 24px; + } + } + ol { + list-style-type: decimal; + li { + counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; + counter-increment: list-0; + list-style-type: none; + &:before { + margin-left: -1.5em; + margin-right: 0.3em; + text-align: right; + content: counter(list-0, decimal) ". "; + display: inline-block; + white-space: nowrap; + width: 1.2em; + } + } + } + ul { + padding-left: 1.5em; + margin: 0; + padding: 0; + counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9; + li { + list-style-type: none; + &:before { + margin-left: -1.5em; + margin-right: 0.3em; + text-align: right; + content: "\2022"; + display: inline-block; + white-space: nowrap; + width: 1.2em; + } + } + } + .ql-snow .ql-editor pre.ql-syntax, + pre.ql-syntax { + background-color: var(--color-surface-secondary); + white-space: pre-wrap; + margin-bottom: 5px; + margin-top: 5px; + padding: 5px 10px; + } +} + +f-div[direction="column"] { + > f-text-editor { + width: 100%; + flex: 1 0 auto; + } +} + +f-div[direction="row"] { + > f-text-editor { + flex: 1 0; + max-width: 100%; + height: 100%; + } +} diff --git a/packages/flow-text-editor/src/components/f-text-editor/f-text-editor.test.ts b/packages/flow-text-editor/src/components/f-text-editor/f-text-editor.test.ts new file mode 100644 index 000000000..f9b95bbce --- /dev/null +++ b/packages/flow-text-editor/src/components/f-text-editor/f-text-editor.test.ts @@ -0,0 +1,19 @@ +import IconPack from "@ollion/flow-system-icon/dist/types/icon-pack"; +import { expect } from "@open-wc/testing"; + +// import flow-core elements +import "@ollion/flow-core"; + +import { ConfigUtil } from "@ollion/flow-core"; +import { FTextEditor } from "@ollion/flow-text-editor"; +ConfigUtil.setConfig({ iconPack: IconPack }); + +/** + * flow-text-editor is based on Quill so we added our skin and few props. hence for feature testing we don't need more test cases + */ +describe("f-text-editor", () => { + it("is defined", () => { + const el = document.createElement("f-text-editor"); + expect(el).instanceOf(FTextEditor); + }); +}); diff --git a/packages/flow-text-editor/src/components/f-text-editor/f-text-editor.ts b/packages/flow-text-editor/src/components/f-text-editor/f-text-editor.ts new file mode 100644 index 000000000..9098f86a9 --- /dev/null +++ b/packages/flow-text-editor/src/components/f-text-editor/f-text-editor.ts @@ -0,0 +1,138 @@ +import { unsafeCSS, html, PropertyValues, PropertyValueMap } from "lit"; +import { FRoot, flowElement } from "@ollion/flow-core"; +import globalStyle from "./f-text-editor-global.scss?inline"; +import { FTextArea } from "@ollion/flow-core"; +import { property } from "lit/decorators.js"; +import { injectCss } from "@ollion/flow-core-config"; +import { createRef, ref } from "lit-html/directives/ref.js"; +import Quill from "quill"; +import { keyed } from "lit-html/directives/keyed.js"; +import { unsafeHTML } from "lit/directives/unsafe-html.js"; + +injectCss("f-text-editor", globalStyle); + +export type FTextEditorToolbarAction = + | "bold" + | "italic" + | "underline" + | "strike" + | "blockquote" + | "code-block" + | "link" + | "image" + | "video" + | "formula" + | { header: (1 | 2 | 3 | 4 | 5 | 6 | false)[] | 1 | 2 | 3 | 4 | 5 | 6 } + | { list: "ordered" | "bullet" | "check" } + | { script: "super" | "sub" } + | { indent: "-1" | "+1" } + | { direction: "rtl" } + | { size: "small" | false | "large" | "huge" } + | { color: string[] } + | { background: string[] } + | { align: ("left" | "center" | "right" | "justify")[] }; + +export type FTextEditorToolbar = FTextEditorToolbarAction[] | FTextEditorToolbarAction[][]; +@flowElement("f-text-editor") +export class FTextEditor extends FRoot { + /** + * To force re-render + */ + key = 0; + /** + * css loaded from scss file + */ + static styles = [unsafeCSS(globalStyle), ...FTextArea.styles]; + + /** + * @attribute value to be inserted in text-area. + */ + @property({ reflect: false, type: String }) + value?: string; + /** + * @attribute value to be inserted in text-area. + */ + @property({ reflect: true, type: String }) + placeholder?: string; + + /** + * @attribute to make read-only + */ + @property({ reflect: true, type: Boolean, attribute: "read-only" }) + readOnly?: boolean; + + set ["read-only"](val: boolean) { + this.readOnly = val; + } + + /** + * @attribute toolbar to be displayed on top + */ + @property({ reflect: true, type: String }) + toolbar?: FTextEditorToolbar = ["bold", "italic", "underline", "strike", "link"]; + + editorRoot = createRef(); + + quillInstance?: Quill; + + createRenderRoot() { + return this; + } + protected willUpdate(changedProperties: PropertyValueMap | Map): void { + super.willUpdate(changedProperties); + + this.key += 1; + } + + render() { + return keyed( + this.key, + html`
ev.stopPropagation()} + class="f-text-editor-root" + > + ${unsafeHTML(this.value)} +
` + ); + } + + protected updated(changedProperties: PropertyValues): void { + super.updated(changedProperties); + + if (this.editorRoot.value) { + this.quillInstance = new Quill(this.editorRoot.value, { + theme: "snow", + placeholder: this.placeholder, + readOnly: this.readOnly, + modules: { + toolbar: this.toolbar + } + }); + + this.quillInstance.on("editor-change", (eventName, ...args) => { + const event = new CustomEvent<{ + value: string; + quillMeta: { eventName: string; args: unknown }; + }>("input", { + detail: { + value: this.quillInstance?.root.innerHTML ?? "", + quillMeta: { eventName, args } + }, + bubbles: true, + composed: true + }); + this.dispatchEvent(event); + }); + } + } +} + +/** + * Required for typescript + */ +declare global { + export interface HTMLElementTagNameMap { + "f-text-editor": FTextEditor; + } +} diff --git a/packages/flow-text-editor/src/index.ts b/packages/flow-text-editor/src/index.ts new file mode 100644 index 000000000..7e616dace --- /dev/null +++ b/packages/flow-text-editor/src/index.ts @@ -0,0 +1 @@ +export * from "./components/f-text-editor/f-text-editor"; diff --git a/packages/flow-text-editor/tsconfig.json b/packages/flow-text-editor/tsconfig.json new file mode 100644 index 000000000..9b4f19797 --- /dev/null +++ b/packages/flow-text-editor/tsconfig.json @@ -0,0 +1,7 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "./dist" + }, + "include": ["src/**/*"] +} diff --git a/packages/flow-text-editor/vite.config.ts b/packages/flow-text-editor/vite.config.ts new file mode 100644 index 000000000..7ed62465f --- /dev/null +++ b/packages/flow-text-editor/vite.config.ts @@ -0,0 +1,27 @@ +import { defineConfig } from "vite"; + +export default defineConfig({ + build: { + // Disabling minification makes it easy to debug during development + // And all modern bundlers will consume the library and minify it anyway + minify: false, + sourcemap: true, + lib: { + entry: "src/index.ts", + name: "flow-text-editor", + fileName: format => `flow-text-editor.${format}.js`, + formats: ["es", "cjs"] + }, + rollupOptions: { + // If we want to publish standalone components we don't externalize lit, + // if you are going to use lit in your own project, you can make it a dep instead. + // external: /^lit/, <-- comment this line + external: ["@ollion/flow-core-config", "@ollion/flow-core", /^lit/], + output: { + globals: { + "@ollion/flow-core": "@ollion/flow-core" + } + } + } + } +}); diff --git a/packages/flow-text-editor/web-test-runner.config.mjs b/packages/flow-text-editor/web-test-runner.config.mjs new file mode 100644 index 000000000..d410ad4ef --- /dev/null +++ b/packages/flow-text-editor/web-test-runner.config.mjs @@ -0,0 +1,5 @@ +import { esbuildPlugin } from "@web/dev-server-esbuild"; + +export default { + plugins: [esbuildPlugin({ ts: true })] +}; diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 89cbd96ef..88cfc3e0a 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -10,7 +10,7 @@ importers: dependencies: '@ollion/flow-aws-icon': specifier: latest - version: 1.9.1(@ollion/flow-core-config@packages+flow-core-config) + version: 1.9.1(@ollion/flow-core-config@1.1.3) '@ollion/flow-code-editor': specifier: workspace:* version: link:packages/flow-code-editor @@ -25,7 +25,7 @@ importers: version: link:packages/flow-form-builder '@ollion/flow-gcp-icon': specifier: latest - version: 1.8.1(@ollion/flow-core-config@packages+flow-core-config) + version: 1.8.1(@ollion/flow-core-config@1.1.3) '@ollion/flow-lineage': specifier: workspace:* version: link:packages/flow-lineage @@ -37,13 +37,16 @@ importers: version: link:packages/flow-md-editor '@ollion/flow-product-icon': specifier: 1.14.0 - version: 1.14.0(@ollion/flow-core-config@packages+flow-core-config) + version: 1.14.0(@ollion/flow-core-config@1.1.3) '@ollion/flow-system-icon': specifier: latest - version: 1.16.1(@ollion/flow-core-config@packages+flow-core-config) + version: 1.16.1(@ollion/flow-core-config@1.1.3) '@ollion/flow-table': specifier: workspace:* version: link:packages/flow-table + '@ollion/flow-text-editor': + specifier: workspace:* + version: link:packages/flow-text-editor d3: specifier: ^7.6.1 version: 7.8.5 @@ -74,7 +77,7 @@ importers: version: 7.6.7 '@storybook/addon-essentials': specifier: ^7.5.3 - version: 7.6.7(react-dom@18.2.0)(react@18.2.0) + version: 7.6.7(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@storybook/addon-links': specifier: ^7.5.3 version: 7.6.7(react@18.2.0) @@ -86,13 +89,13 @@ importers: version: 7.6.7 '@storybook/blocks': specifier: ^7.5.3 - version: 7.6.7(react-dom@18.2.0)(react@18.2.0) + version: 7.6.7(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@storybook/web-components': specifier: ^7.5.3 - version: 7.6.7(lit@3.1.1)(react-dom@18.2.0)(react@18.2.0) + version: 7.6.7(lit@3.1.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@storybook/web-components-vite': specifier: ^7.5.3 - version: 7.6.7(lit@3.1.1)(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)(vite@4.5.1) + version: 7.6.7(lit@3.1.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.3.3)(vite@4.5.1(@types/node@18.19.6)(sass@1.69.7)) '@types/d3': specifier: 7.4.3 version: 7.4.3 @@ -107,7 +110,7 @@ importers: version: 3.0.0 '@typescript-eslint/eslint-plugin': specifier: ^6.7.5 - version: 6.18.1(@typescript-eslint/parser@6.18.1)(eslint@8.56.0)(typescript@5.3.3) + version: 6.18.1(@typescript-eslint/parser@6.18.1(eslint@8.56.0)(typescript@5.3.3))(eslint@8.56.0)(typescript@5.3.3) '@typescript-eslint/parser': specifier: ^6.7.5 version: 6.18.1(eslint@8.56.0)(typescript@5.3.3) @@ -128,13 +131,13 @@ importers: version: 8.0.3 lint-staged: specifier: ^14.0.1 - version: 14.0.1 + version: 14.0.1(enquirer@2.4.1) lit-html: specifier: ^3.1.0 version: 3.1.1 loki: specifier: ^0.32.0 - version: 0.32.0 + version: 0.32.0(@types/react@18.2.47) prettier: specifier: ^3.0.3 version: 3.0.3 @@ -155,7 +158,7 @@ importers: version: 5.3.3 vite: specifier: ^4.4.11 - version: 4.5.1(sass@1.69.7) + version: 4.5.1(@types/node@18.19.6)(sass@1.69.7) packages/custom-elements-manifest-to-types: dependencies: @@ -180,10 +183,10 @@ importers: version: 0.19.11 jest: specifier: ^29.7.0 - version: 29.7.0(@types/node@18.19.6)(ts-node@10.9.2) + version: 29.7.0(@types/node@18.19.6)(ts-node@10.9.2(@types/node@18.19.6)(typescript@5.3.3)) ts-jest: specifier: ^29.1.1 - version: 29.1.1(@babel/core@7.23.7)(esbuild@0.19.11)(jest@29.7.0)(typescript@5.3.3) + version: 29.1.1(@babel/core@7.23.7)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.23.7))(esbuild@0.19.11)(jest@29.7.0(@types/node@18.19.6)(ts-node@10.9.2(@types/node@18.19.6)(typescript@5.3.3)))(typescript@5.3.3) ts-node: specifier: ^10.8.2 version: 10.9.2(@types/node@18.19.6)(typescript@5.3.3) @@ -238,7 +241,7 @@ importers: version: 5.3.3 vite: specifier: ^4.4.11 - version: 4.5.1(sass@1.69.7) + version: 4.5.1(@types/node@18.19.6)(sass@1.69.7) web-component-analyzer: specifier: ^2.0.0-next.4 version: 2.0.0 @@ -332,7 +335,7 @@ importers: version: 5.3.3 vite: specifier: ^4.4.11 - version: 4.5.1(sass@1.69.7) + version: 4.5.1(@types/node@18.19.6)(sass@1.69.7) vue: specifier: 2.6.14 version: 2.6.14 @@ -351,7 +354,7 @@ importers: version: 5.3.3 vite: specifier: ^4.4.11 - version: 4.5.1(sass@1.69.7) + version: 4.5.1(@types/node@18.19.6)(sass@1.69.7) packages/flow-dashboard: dependencies: @@ -412,7 +415,7 @@ importers: version: 5.3.3 vite: specifier: ^4.4.11 - version: 4.5.1(sass@1.69.7) + version: 4.5.1(@types/node@18.19.6)(sass@1.69.7) web-component-analyzer: specifier: ^2.0.0-next.4 version: 2.0.0 @@ -470,7 +473,7 @@ importers: version: 5.3.3 vite: specifier: ^4.4.11 - version: 4.5.1(sass@1.69.7) + version: 4.5.1(@types/node@18.19.6)(sass@1.69.7) web-component-analyzer: specifier: ^2.0.0-next.4 version: 2.0.0 @@ -525,7 +528,7 @@ importers: version: 5.3.3 vite: specifier: ^4.4.11 - version: 4.5.1(sass@1.69.7) + version: 4.5.1(@types/node@18.19.6)(sass@1.69.7) vue: specifier: 2.6.14 version: 2.6.14 @@ -586,7 +589,7 @@ importers: version: 5.3.3 vite: specifier: ^4.4.11 - version: 4.5.1(sass@1.69.7) + version: 4.5.1(@types/node@18.19.6)(sass@1.69.7) web-component-analyzer: specifier: ^2.0.0-next.4 version: 2.0.0 @@ -641,7 +644,7 @@ importers: version: 5.3.3 vite: specifier: ^4.4.11 - version: 4.5.1(sass@1.69.7) + version: 4.5.1(@types/node@18.19.6)(sass@1.69.7) web-component-analyzer: specifier: ^2.0.0-next.4 version: 2.0.0 @@ -690,7 +693,59 @@ importers: version: 5.3.3 vite: specifier: ^4.4.11 - version: 4.5.1(sass@1.69.7) + version: 4.5.1(@types/node@18.19.6)(sass@1.69.7) + web-component-analyzer: + specifier: ^2.0.0-next.4 + version: 2.0.0 + + packages/flow-text-editor: + dependencies: + '@ollion/flow-core': + specifier: workspace:* + version: link:../flow-core + '@ollion/flow-core-config': + specifier: workspace:* + version: link:../flow-core-config + lit: + specifier: ^3.1.0 + version: 3.1.1 + quill: + specifier: ^2.0.2 + version: 2.0.2 + devDependencies: + '@custom-elements-manifest/analyzer': + specifier: ^0.5.7 + version: 0.5.7 + '@open-wc/testing': + specifier: ^3.1.5 + version: 3.2.2 + '@types/jest': + specifier: 29.5.5 + version: 29.5.5 + '@web/dev-server-esbuild': + specifier: ^0.4.1 + version: 0.4.4 + '@web/test-runner': + specifier: ^0.17.1 + version: 0.17.3(typescript@5.3.3) + concurrently: + specifier: ^8.2.1 + version: 8.2.2 + esbuild-sass-plugin: + specifier: 2.2.6 + version: 2.2.6 + lit-html: + specifier: ^3.1.0 + version: 3.1.1 + sass: + specifier: ^1.52.3 + version: 1.69.7 + typescript: + specifier: ^5.2.2 + version: 5.3.3 + vite: + specifier: ^4.4.11 + version: 4.5.1(@types/node@18.19.6)(sass@1.69.7) web-component-analyzer: specifier: ^2.0.0-next.4 version: 2.0.0 @@ -2125,6 +2180,9 @@ packages: peerDependencies: '@ollion/flow-core-config': '*' + '@ollion/flow-core-config@1.1.3': + resolution: {integrity: sha512-Im5UNwO+/KHkD+gAMvE1OicpLmTbof3qnxJj1vHSay+7MfzAbeuZH5YaTK7cChJ6ocBaR99vS4XGKrBs10/z6Q==} + '@ollion/flow-gcp-icon@1.8.1': resolution: {integrity: sha512-JAdA6ffgyrQ4HDyXZRfcmsV7iZRKViY9JqHLU0C67ntOtnm7L62AVQywzPkjeSgZhIeyp5F0WVuWvAhKSyehHw==} peerDependencies: @@ -4710,6 +4768,9 @@ packages: fast-deep-equal@3.1.3: resolution: {integrity: sha512-f3qQ9oQy9j2AhBe/H9VC91wLmKBCCU/gDOnKNAYG5hswO7BLKj09Hc5HYNz9cGI++xlpDCIgDaitVs03ATR84Q==} + fast-diff@1.3.0: + resolution: {integrity: sha512-VxPP4NqbUjj6MaAOafWeUn2cXWLcCtljklUtZf0Ind4XQ+QPtmA0b18zZy0jIQx+ExRVCR/ZQpBmik5lXshNsw==} + fast-fifo@1.3.2: resolution: {integrity: sha512-/d9sfos4yxzpwkDkuN7k2SqFKtYNmCTzgfEpz82x34IM9/zc8KGxQoXg1liNC/izpRM/MBdt44Nmx41ZWqk+FQ==} @@ -5705,9 +5766,15 @@ packages: lodash.camelcase@4.3.0: resolution: {integrity: sha512-TwuEnCnxbc3rAvhf/LbG7tJUDzhqXyFnv3dtzLOPgCG/hODL7WFnsbwktkD7yUV0RrreP/l1PALq/YSg6VvjlA==} + lodash.clonedeep@4.5.0: + resolution: {integrity: sha512-H5ZhCF25riFd9uB5UCkVKo61m3S/xZk1x4wA6yp/L3RFP6Z/eHH1ymQcGLo7J3GMPfm0V/7m1tryHuGVxpqEBQ==} + lodash.debounce@4.0.8: resolution: {integrity: sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==} + lodash.isequal@4.5.0: + resolution: {integrity: sha512-pDo3lu8Jhfjqls6GkMgpahsF9kCyayhgykjyLMNFTKWrpVdAQtYyB4muAMWozBB4ig/dtWAmsMxLEI8wuz+DYQ==} + lodash.memoize@4.1.2: resolution: {integrity: sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag==} @@ -6256,6 +6323,9 @@ packages: pako@0.2.9: resolution: {integrity: sha512-NUcwaKxUxWrZLpDG+z/xZaCgQITkA/Dv4V/T6bw7VON6l1Xz/VnrBqrYjZQ12TamKHzITTfOEIYUj48y2KXImA==} + parchment@3.0.0: + resolution: {integrity: sha512-HUrJFQ/StvgmXRcQ1ftY6VEZUq3jA2t9ncFN4F84J/vN0/FPpQF+8FKXb3l6fLces6q0uOHj6NJn+2xvZnxO6A==} + parent-module@1.0.1: resolution: {integrity: sha512-GQ2EWRpQV8/o+Aw8YqtfZZPfNRWZYkbidE9k5rpl/hC3vtHHBfGm2Ifi6qWV+coDGkrUKZAxE3Lot5kcsRlh+g==} engines: {node: '>=6'} @@ -6503,6 +6573,14 @@ packages: resolution: {integrity: sha512-ARhCpm70fzdcvNQfPoy49IaanKkTlRWF2JMzqhcJbhSFRZv7nPTvZJdcY7301IPmvW+/p0RgIWnQDLJxifsQ7g==} engines: {node: '>=8'} + quill-delta@5.1.0: + resolution: {integrity: sha512-X74oCeRI4/p0ucjb5Ma8adTXd9Scumz367kkMK5V/IatcX6A0vlgLgKbzXWy5nZmCGeNJm2oQX0d2Eqj+ZIlCA==} + engines: {node: '>= 12.0.0'} + + quill@2.0.2: + resolution: {integrity: sha512-QfazNrhMakEdRG57IoYFwffUIr04LWJxbS/ZkidRFXYCQt63c1gK6Z7IHUXMx/Vh25WgPBU42oBaNzQ0K1R/xw==} + engines: {npm: '>=8.2.3'} + raf@3.4.1: resolution: {integrity: sha512-Sq4CW4QhwOHE8ucn6J34MqtZCeWFP2aQSmrlroYgqAV1PjStIhJXxYuTgUIfkEk7zTLjmIjLmU5q+fbD1NnOJA==} @@ -9048,7 +9126,7 @@ snapshots: '@floating-ui/core': 1.5.3 '@floating-ui/utils': 0.2.1 - '@floating-ui/react-dom@2.0.5(react-dom@18.2.0)(react@18.2.0)': + '@floating-ui/react-dom@2.0.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@floating-ui/dom': 1.5.4 react: 18.2.0 @@ -9104,7 +9182,7 @@ snapshots: jest-util: 29.7.0 slash: 3.0.0 - '@jest/core@29.7.0(ts-node@10.9.2)': + '@jest/core@29.7.0(ts-node@10.9.2(@types/node@18.19.6)(typescript@5.3.3))': dependencies: '@jest/console': 29.7.0 '@jest/reporters': 29.7.0 @@ -9118,7 +9196,7 @@ snapshots: exit: 0.1.2 graceful-fs: 4.2.11 jest-changed-files: 29.7.0 - jest-config: 29.7.0(@types/node@18.19.6)(ts-node@10.9.2) + jest-config: 29.7.0(@types/node@18.19.6)(ts-node@10.9.2(@types/node@18.19.6)(typescript@5.3.3)) jest-haste-map: 29.7.0 jest-message-util: 29.7.0 jest-regex-util: 29.6.3 @@ -9332,7 +9410,7 @@ snapshots: dependencies: '@loki/browser': 0.32.0 - '@loki/runner@0.32.0': + '@loki/runner@0.32.0(@types/react@18.2.47)': dependencies: '@loki/core': 0.32.0 '@loki/diff-graphics-magick': 0.32.0 @@ -9349,7 +9427,7 @@ snapshots: cosmiconfig: 7.1.0 fs-extra: 9.1.0 import-jsx: 4.0.1 - ink: 3.2.0(react@17.0.2) + ink: 3.2.0(@types/react@18.2.47)(react@17.0.2) minimist: 1.2.8 ramda: 0.27.2 react: 17.0.2 @@ -9480,21 +9558,25 @@ snapshots: '@nodelib/fs.scandir': 2.1.5 fastq: 1.16.0 - '@ollion/flow-aws-icon@1.9.1(@ollion/flow-core-config@packages+flow-core-config)': + '@ollion/flow-aws-icon@1.9.1(@ollion/flow-core-config@1.1.3)': + dependencies: + '@ollion/flow-core-config': 1.1.3 + + '@ollion/flow-core-config@1.1.3': dependencies: - '@ollion/flow-core-config': link:packages/flow-core-config + rxjs: 7.8.1 - '@ollion/flow-gcp-icon@1.8.1(@ollion/flow-core-config@packages+flow-core-config)': + '@ollion/flow-gcp-icon@1.8.1(@ollion/flow-core-config@1.1.3)': dependencies: - '@ollion/flow-core-config': link:packages/flow-core-config + '@ollion/flow-core-config': 1.1.3 - '@ollion/flow-product-icon@1.14.0(@ollion/flow-core-config@packages+flow-core-config)': + '@ollion/flow-product-icon@1.14.0(@ollion/flow-core-config@1.1.3)': dependencies: - '@ollion/flow-core-config': link:packages/flow-core-config + '@ollion/flow-core-config': 1.1.3 - '@ollion/flow-system-icon@1.16.1(@ollion/flow-core-config@packages+flow-core-config)': + '@ollion/flow-system-icon@1.16.1(@ollion/flow-core-config@1.1.3)': dependencies: - '@ollion/flow-core-config': link:packages/flow-core-config + '@ollion/flow-core-config': 1.1.3 '@ollion/prettier-config@2.1.0(prettier@3.0.3)': dependencies: @@ -9545,9 +9627,10 @@ snapshots: progress: 2.0.3 proxy-agent: 6.3.0 tar-fs: 3.0.4 - typescript: 5.3.3 unbzip2-stream: 1.4.3 yargs: 17.7.1 + optionalDependencies: + typescript: 5.3.3 transitivePeerDependencies: - supports-color @@ -9559,234 +9642,288 @@ snapshots: dependencies: '@babel/runtime': 7.23.8 - '@radix-ui/react-arrow@1.0.3(react-dom@18.2.0)(react@18.2.0)': + '@radix-ui/react-arrow@1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 - '@radix-ui/react-primitive': 1.0.3(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-collection@1.0.3(react-dom@18.2.0)(react@18.2.0)': + '@radix-ui/react-collection@1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 - '@radix-ui/react-compose-refs': 1.0.1(react@18.2.0) - '@radix-ui/react-context': 1.0.1(react@18.2.0) - '@radix-ui/react-primitive': 1.0.3(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-slot': 1.0.2(react@18.2.0) + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-context': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-slot': 1.0.2(@types/react@18.2.47)(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-compose-refs@1.0.1(react@18.2.0)': + '@radix-ui/react-compose-refs@1.0.1(@types/react@18.2.47)(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-context@1.0.1(react@18.2.0)': + '@radix-ui/react-context@1.0.1(@types/react@18.2.47)(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-direction@1.0.1(react@18.2.0)': + '@radix-ui/react-direction@1.0.1(@types/react@18.2.47)(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-dismissable-layer@1.0.4(react-dom@18.2.0)(react@18.2.0)': + '@radix-ui/react-dismissable-layer@1.0.4(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 '@radix-ui/primitive': 1.0.1 - '@radix-ui/react-compose-refs': 1.0.1(react@18.2.0) - '@radix-ui/react-primitive': 1.0.3(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-use-callback-ref': 1.0.1(react@18.2.0) - '@radix-ui/react-use-escape-keydown': 1.0.3(react@18.2.0) + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-use-escape-keydown': 1.0.3(@types/react@18.2.47)(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-focus-guards@1.0.1(react@18.2.0)': + '@radix-ui/react-focus-guards@1.0.1(@types/react@18.2.47)(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-focus-scope@1.0.3(react-dom@18.2.0)(react@18.2.0)': + '@radix-ui/react-focus-scope@1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 - '@radix-ui/react-compose-refs': 1.0.1(react@18.2.0) - '@radix-ui/react-primitive': 1.0.3(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-use-callback-ref': 1.0.1(react@18.2.0) + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.47)(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-id@1.0.1(react@18.2.0)': + '@radix-ui/react-id@1.0.1(@types/react@18.2.47)(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 - '@radix-ui/react-use-layout-effect': 1.0.1(react@18.2.0) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.47)(react@18.2.0) react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-popper@1.1.2(react-dom@18.2.0)(react@18.2.0)': + '@radix-ui/react-popper@1.1.2(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 - '@floating-ui/react-dom': 2.0.5(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-arrow': 1.0.3(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-compose-refs': 1.0.1(react@18.2.0) - '@radix-ui/react-context': 1.0.1(react@18.2.0) - '@radix-ui/react-primitive': 1.0.3(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-use-callback-ref': 1.0.1(react@18.2.0) - '@radix-ui/react-use-layout-effect': 1.0.1(react@18.2.0) - '@radix-ui/react-use-rect': 1.0.1(react@18.2.0) - '@radix-ui/react-use-size': 1.0.1(react@18.2.0) + '@floating-ui/react-dom': 2.0.5(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-arrow': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-context': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-use-rect': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-use-size': 1.0.1(@types/react@18.2.47)(react@18.2.0) '@radix-ui/rect': 1.0.1 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-portal@1.0.3(react-dom@18.2.0)(react@18.2.0)': + '@radix-ui/react-portal@1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 - '@radix-ui/react-primitive': 1.0.3(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-primitive@1.0.3(react-dom@18.2.0)(react@18.2.0)': + '@radix-ui/react-primitive@1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 - '@radix-ui/react-slot': 1.0.2(react@18.2.0) + '@radix-ui/react-slot': 1.0.2(@types/react@18.2.47)(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-roving-focus@1.0.4(react-dom@18.2.0)(react@18.2.0)': + '@radix-ui/react-roving-focus@1.0.4(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 '@radix-ui/primitive': 1.0.1 - '@radix-ui/react-collection': 1.0.3(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-compose-refs': 1.0.1(react@18.2.0) - '@radix-ui/react-context': 1.0.1(react@18.2.0) - '@radix-ui/react-direction': 1.0.1(react@18.2.0) - '@radix-ui/react-id': 1.0.1(react@18.2.0) - '@radix-ui/react-primitive': 1.0.3(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-use-callback-ref': 1.0.1(react@18.2.0) - '@radix-ui/react-use-controllable-state': 1.0.1(react@18.2.0) + '@radix-ui/react-collection': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-context': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-direction': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-id': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.47)(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-select@1.2.2(react-dom@18.2.0)(react@18.2.0)': + '@radix-ui/react-select@1.2.2(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 '@radix-ui/number': 1.0.1 '@radix-ui/primitive': 1.0.1 - '@radix-ui/react-collection': 1.0.3(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-compose-refs': 1.0.1(react@18.2.0) - '@radix-ui/react-context': 1.0.1(react@18.2.0) - '@radix-ui/react-direction': 1.0.1(react@18.2.0) - '@radix-ui/react-dismissable-layer': 1.0.4(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-focus-guards': 1.0.1(react@18.2.0) - '@radix-ui/react-focus-scope': 1.0.3(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-id': 1.0.1(react@18.2.0) - '@radix-ui/react-popper': 1.1.2(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-portal': 1.0.3(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-primitive': 1.0.3(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-slot': 1.0.2(react@18.2.0) - '@radix-ui/react-use-callback-ref': 1.0.1(react@18.2.0) - '@radix-ui/react-use-controllable-state': 1.0.1(react@18.2.0) - '@radix-ui/react-use-layout-effect': 1.0.1(react@18.2.0) - '@radix-ui/react-use-previous': 1.0.1(react@18.2.0) - '@radix-ui/react-visually-hidden': 1.0.3(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-collection': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-context': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-direction': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-dismissable-layer': 1.0.4(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-focus-guards': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-focus-scope': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-id': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-popper': 1.1.2(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-portal': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-slot': 1.0.2(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-use-previous': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-visually-hidden': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) aria-hidden: 1.2.3 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - react-remove-scroll: 2.5.5(react@18.2.0) + react-remove-scroll: 2.5.5(@types/react@18.2.47)(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-separator@1.0.3(react-dom@18.2.0)(react@18.2.0)': + '@radix-ui/react-separator@1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 - '@radix-ui/react-primitive': 1.0.3(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-slot@1.0.2(react@18.2.0)': + '@radix-ui/react-slot@1.0.2(@types/react@18.2.47)(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 - '@radix-ui/react-compose-refs': 1.0.1(react@18.2.0) + '@radix-ui/react-compose-refs': 1.0.1(@types/react@18.2.47)(react@18.2.0) react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-toggle-group@1.0.4(react-dom@18.2.0)(react@18.2.0)': + '@radix-ui/react-toggle-group@1.0.4(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 '@radix-ui/primitive': 1.0.1 - '@radix-ui/react-context': 1.0.1(react@18.2.0) - '@radix-ui/react-direction': 1.0.1(react@18.2.0) - '@radix-ui/react-primitive': 1.0.3(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-roving-focus': 1.0.4(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-toggle': 1.0.3(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-use-controllable-state': 1.0.1(react@18.2.0) + '@radix-ui/react-context': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-direction': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-roving-focus': 1.0.4(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-toggle': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.47)(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-toggle@1.0.3(react-dom@18.2.0)(react@18.2.0)': + '@radix-ui/react-toggle@1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 '@radix-ui/primitive': 1.0.1 - '@radix-ui/react-primitive': 1.0.3(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-use-controllable-state': 1.0.1(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-use-controllable-state': 1.0.1(@types/react@18.2.47)(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-toolbar@1.0.4(react-dom@18.2.0)(react@18.2.0)': + '@radix-ui/react-toolbar@1.0.4(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 '@radix-ui/primitive': 1.0.1 - '@radix-ui/react-context': 1.0.1(react@18.2.0) - '@radix-ui/react-direction': 1.0.1(react@18.2.0) - '@radix-ui/react-primitive': 1.0.3(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-roving-focus': 1.0.4(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-separator': 1.0.3(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-toggle-group': 1.0.4(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-context': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-direction': 1.0.1(@types/react@18.2.47)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-roving-focus': 1.0.4(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-separator': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-toggle-group': 1.0.4(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-use-callback-ref@1.0.1(react@18.2.0)': + '@radix-ui/react-use-callback-ref@1.0.1(@types/react@18.2.47)(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-use-controllable-state@1.0.1(react@18.2.0)': + '@radix-ui/react-use-controllable-state@1.0.1(@types/react@18.2.47)(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 - '@radix-ui/react-use-callback-ref': 1.0.1(react@18.2.0) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.47)(react@18.2.0) react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-use-escape-keydown@1.0.3(react@18.2.0)': + '@radix-ui/react-use-escape-keydown@1.0.3(@types/react@18.2.47)(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 - '@radix-ui/react-use-callback-ref': 1.0.1(react@18.2.0) + '@radix-ui/react-use-callback-ref': 1.0.1(@types/react@18.2.47)(react@18.2.0) react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-use-layout-effect@1.0.1(react@18.2.0)': + '@radix-ui/react-use-layout-effect@1.0.1(@types/react@18.2.47)(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-use-previous@1.0.1(react@18.2.0)': + '@radix-ui/react-use-previous@1.0.1(@types/react@18.2.47)(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-use-rect@1.0.1(react@18.2.0)': + '@radix-ui/react-use-rect@1.0.1(@types/react@18.2.47)(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 '@radix-ui/rect': 1.0.1 react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-use-size@1.0.1(react@18.2.0)': + '@radix-ui/react-use-size@1.0.1(@types/react@18.2.47)(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 - '@radix-ui/react-use-layout-effect': 1.0.1(react@18.2.0) + '@radix-ui/react-use-layout-effect': 1.0.1(@types/react@18.2.47)(react@18.2.0) react: 18.2.0 + optionalDependencies: + '@types/react': 18.2.47 - '@radix-ui/react-visually-hidden@1.0.3(react-dom@18.2.0)(react@18.2.0)': + '@radix-ui/react-visually-hidden@1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@babel/runtime': 7.23.8 - '@radix-ui/react-primitive': 1.0.3(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-primitive': 1.0.3(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) react: 18.2.0 react-dom: 18.2.0(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.47 '@radix-ui/rect@1.0.1': dependencies: @@ -9810,6 +9947,7 @@ snapshots: is-builtin-module: 3.2.1 is-module: 1.0.0 resolve: 1.22.8 + optionalDependencies: rollup: 3.29.4 '@rollup/pluginutils@3.1.0(rollup@2.79.1)': @@ -9824,6 +9962,7 @@ snapshots: '@types/estree': 1.0.5 estree-walker: 2.0.2 picomatch: 2.3.1 + optionalDependencies: rollup: 3.29.4 '@sideway/address@4.1.4': @@ -9864,9 +10003,9 @@ snapshots: memoizerific: 1.11.3 ts-dedent: 2.2.0 - '@storybook/addon-controls@7.6.7(react-dom@18.2.0)(react@18.2.0)': + '@storybook/addon-controls@7.6.7(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: - '@storybook/blocks': 7.6.7(react-dom@18.2.0)(react@18.2.0) + '@storybook/blocks': 7.6.7(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) lodash: 4.17.21 ts-dedent: 2.2.0 transitivePeerDependencies: @@ -9877,13 +10016,13 @@ snapshots: - react-dom - supports-color - '@storybook/addon-docs@7.6.7(react-dom@18.2.0)(react@18.2.0)': + '@storybook/addon-docs@7.6.7(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@jest/transform': 29.7.0 '@mdx-js/react': 2.3.0(react@18.2.0) - '@storybook/blocks': 7.6.7(react-dom@18.2.0)(react@18.2.0) + '@storybook/blocks': 7.6.7(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@storybook/client-logger': 7.6.7 - '@storybook/components': 7.6.7(react-dom@18.2.0)(react@18.2.0) + '@storybook/components': 7.6.7(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@storybook/csf-plugin': 7.6.7 '@storybook/csf-tools': 7.6.7 '@storybook/global': 5.0.0 @@ -9891,8 +10030,8 @@ snapshots: '@storybook/node-logger': 7.6.7 '@storybook/postinstall': 7.6.7 '@storybook/preview-api': 7.6.7 - '@storybook/react-dom-shim': 7.6.7(react-dom@18.2.0)(react@18.2.0) - '@storybook/theming': 7.6.7(react-dom@18.2.0)(react@18.2.0) + '@storybook/react-dom-shim': 7.6.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@storybook/theming': 7.6.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@storybook/types': 7.6.7 fs-extra: 11.2.0 react: 18.2.0 @@ -9906,19 +10045,19 @@ snapshots: - encoding - supports-color - '@storybook/addon-essentials@7.6.7(react-dom@18.2.0)(react@18.2.0)': + '@storybook/addon-essentials@7.6.7(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@storybook/addon-actions': 7.6.7 '@storybook/addon-backgrounds': 7.6.7 - '@storybook/addon-controls': 7.6.7(react-dom@18.2.0)(react@18.2.0) - '@storybook/addon-docs': 7.6.7(react-dom@18.2.0)(react@18.2.0) + '@storybook/addon-controls': 7.6.7(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@storybook/addon-docs': 7.6.7(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@storybook/addon-highlight': 7.6.7 '@storybook/addon-measure': 7.6.7 '@storybook/addon-outline': 7.6.7 '@storybook/addon-toolbars': 7.6.7 '@storybook/addon-viewport': 7.6.7 '@storybook/core-common': 7.6.7 - '@storybook/manager-api': 7.6.7(react-dom@18.2.0)(react@18.2.0) + '@storybook/manager-api': 7.6.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@storybook/node-logger': 7.6.7 '@storybook/preview-api': 7.6.7 react: 18.2.0 @@ -9942,8 +10081,9 @@ snapshots: dependencies: '@storybook/csf': 0.1.2 '@storybook/global': 5.0.0 - react: 18.2.0 ts-dedent: 2.2.0 + optionalDependencies: + react: 18.2.0 '@storybook/addon-mdx-gfm@7.6.7': dependencies: @@ -9975,18 +10115,18 @@ snapshots: dependencies: memoizerific: 1.11.3 - '@storybook/blocks@7.6.7(react-dom@18.2.0)(react@18.2.0)': + '@storybook/blocks@7.6.7(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@storybook/channels': 7.6.7 '@storybook/client-logger': 7.6.7 - '@storybook/components': 7.6.7(react-dom@18.2.0)(react@18.2.0) + '@storybook/components': 7.6.7(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@storybook/core-events': 7.6.7 '@storybook/csf': 0.1.2 '@storybook/docs-tools': 7.6.7 '@storybook/global': 5.0.0 - '@storybook/manager-api': 7.6.7(react-dom@18.2.0)(react@18.2.0) + '@storybook/manager-api': 7.6.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@storybook/preview-api': 7.6.7 - '@storybook/theming': 7.6.7(react-dom@18.2.0)(react@18.2.0) + '@storybook/theming': 7.6.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@storybook/types': 7.6.7 '@types/lodash': 4.14.202 color-convert: 2.0.1 @@ -9996,7 +10136,7 @@ snapshots: memoizerific: 1.11.3 polished: 4.2.2 react: 18.2.0 - react-colorful: 5.6.1(react-dom@18.2.0)(react@18.2.0) + react-colorful: 5.6.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0) react-dom: 18.2.0(react@18.2.0) telejson: 7.2.0 tocbot: 4.25.0 @@ -10030,7 +10170,7 @@ snapshots: - encoding - supports-color - '@storybook/builder-vite@7.6.7(typescript@5.3.3)(vite@4.5.1)': + '@storybook/builder-vite@7.6.7(typescript@5.3.3)(vite@4.5.1(@types/node@18.19.6)(sass@1.69.7))': dependencies: '@storybook/channels': 7.6.7 '@storybook/client-logger': 7.6.7 @@ -10048,8 +10188,9 @@ snapshots: fs-extra: 11.2.0 magic-string: 0.30.5 rollup: 3.29.4 + vite: 4.5.1(@types/node@18.19.6)(sass@1.69.7) + optionalDependencies: typescript: 5.3.3 - vite: 4.5.1(sass@1.69.7) transitivePeerDependencies: - encoding - supports-color @@ -10093,7 +10234,7 @@ snapshots: get-port: 5.1.1 giget: 1.2.1 globby: 11.1.0 - jscodeshift: 0.15.1(@babel/preset-env@7.23.8) + jscodeshift: 0.15.1(@babel/preset-env@7.23.8(@babel/core@7.23.7)) leven: 3.1.0 ora: 5.4.1 prettier: 2.8.8 @@ -10128,26 +10269,26 @@ snapshots: '@types/cross-spawn': 6.0.6 cross-spawn: 7.0.3 globby: 11.1.0 - jscodeshift: 0.15.1(@babel/preset-env@7.23.8) + jscodeshift: 0.15.1(@babel/preset-env@7.23.8(@babel/core@7.23.7)) lodash: 4.17.21 prettier: 2.8.8 recast: 0.23.4 transitivePeerDependencies: - supports-color - '@storybook/components@7.6.7(react-dom@18.2.0)(react@18.2.0)': + '@storybook/components@7.6.7(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: - '@radix-ui/react-select': 1.2.2(react-dom@18.2.0)(react@18.2.0) - '@radix-ui/react-toolbar': 1.0.4(react-dom@18.2.0)(react@18.2.0) + '@radix-ui/react-select': 1.2.2(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) + '@radix-ui/react-toolbar': 1.0.4(@types/react@18.2.47)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@storybook/client-logger': 7.6.7 '@storybook/csf': 0.1.2 '@storybook/global': 5.0.0 - '@storybook/theming': 7.6.7(react-dom@18.2.0)(react@18.2.0) + '@storybook/theming': 7.6.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@storybook/types': 7.6.7 memoizerific: 1.11.3 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - use-resize-observer: 9.1.0(react-dom@18.2.0)(react@18.2.0) + use-resize-observer: 9.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0) util-deprecate: 1.0.2 transitivePeerDependencies: - '@types/react' @@ -10286,7 +10427,7 @@ snapshots: '@storybook/global@5.0.0': {} - '@storybook/manager-api@7.6.7(react-dom@18.2.0)(react@18.2.0)': + '@storybook/manager-api@7.6.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@storybook/channels': 7.6.7 '@storybook/client-logger': 7.6.7 @@ -10294,7 +10435,7 @@ snapshots: '@storybook/csf': 0.1.2 '@storybook/global': 5.0.0 '@storybook/router': 7.6.7 - '@storybook/theming': 7.6.7(react-dom@18.2.0)(react@18.2.0) + '@storybook/theming': 7.6.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@storybook/types': 7.6.7 dequal: 2.0.3 lodash: 4.17.21 @@ -10333,7 +10474,7 @@ snapshots: '@storybook/preview@7.6.7': {} - '@storybook/react-dom-shim@7.6.7(react-dom@18.2.0)(react@18.2.0)': + '@storybook/react-dom-shim@7.6.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: react: 18.2.0 react-dom: 18.2.0(react@18.2.0) @@ -10366,7 +10507,7 @@ snapshots: - encoding - supports-color - '@storybook/theming@7.6.7(react-dom@18.2.0)(react@18.2.0)': + '@storybook/theming@7.6.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@emotion/use-insertion-effect-with-fallbacks': 1.0.1(react@18.2.0) '@storybook/client-logger': 7.6.7 @@ -10382,12 +10523,12 @@ snapshots: '@types/express': 4.17.21 file-system-cache: 2.3.0 - '@storybook/web-components-vite@7.6.7(lit@3.1.1)(react-dom@18.2.0)(react@18.2.0)(typescript@5.3.3)(vite@4.5.1)': + '@storybook/web-components-vite@7.6.7(lit@3.1.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)(typescript@5.3.3)(vite@4.5.1(@types/node@18.19.6)(sass@1.69.7))': dependencies: - '@storybook/builder-vite': 7.6.7(typescript@5.3.3)(vite@4.5.1) + '@storybook/builder-vite': 7.6.7(typescript@5.3.3)(vite@4.5.1(@types/node@18.19.6)(sass@1.69.7)) '@storybook/core-server': 7.6.7 '@storybook/node-logger': 7.6.7 - '@storybook/web-components': 7.6.7(lit@3.1.1)(react-dom@18.2.0)(react@18.2.0) + '@storybook/web-components': 7.6.7(lit@3.1.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0) magic-string: 0.30.5 transitivePeerDependencies: - '@preact/preset-vite' @@ -10402,13 +10543,13 @@ snapshots: - vite - vite-plugin-glimmerx - '@storybook/web-components@7.6.7(lit@3.1.1)(react-dom@18.2.0)(react@18.2.0)': + '@storybook/web-components@7.6.7(lit@3.1.1)(react-dom@18.2.0(react@18.2.0))(react@18.2.0)': dependencies: '@storybook/client-logger': 7.6.7 '@storybook/core-client': 7.6.7 '@storybook/docs-tools': 7.6.7 '@storybook/global': 5.0.0 - '@storybook/manager-api': 7.6.7(react-dom@18.2.0)(react@18.2.0) + '@storybook/manager-api': 7.6.7(react-dom@18.2.0(react@18.2.0))(react@18.2.0) '@storybook/preview-api': 7.6.7 '@storybook/types': 7.6.7 lit: 3.1.1 @@ -10825,7 +10966,7 @@ snapshots: '@types/yoga-layout@1.9.2': {} - '@typescript-eslint/eslint-plugin@6.18.1(@typescript-eslint/parser@6.18.1)(eslint@8.56.0)(typescript@5.3.3)': + '@typescript-eslint/eslint-plugin@6.18.1(@typescript-eslint/parser@6.18.1(eslint@8.56.0)(typescript@5.3.3))(eslint@8.56.0)(typescript@5.3.3)': dependencies: '@eslint-community/regexpp': 4.10.0 '@typescript-eslint/parser': 6.18.1(eslint@8.56.0)(typescript@5.3.3) @@ -10840,6 +10981,7 @@ snapshots: natural-compare: 1.4.0 semver: 7.5.4 ts-api-utils: 1.0.3(typescript@5.3.3) + optionalDependencies: typescript: 5.3.3 transitivePeerDependencies: - supports-color @@ -10852,6 +10994,7 @@ snapshots: '@typescript-eslint/visitor-keys': 6.18.1 debug: 4.3.4 eslint: 8.56.0 + optionalDependencies: typescript: 5.3.3 transitivePeerDependencies: - supports-color @@ -10873,6 +11016,7 @@ snapshots: debug: 4.3.4 eslint: 8.56.0 ts-api-utils: 1.0.3(typescript@5.3.3) + optionalDependencies: typescript: 5.3.3 transitivePeerDependencies: - supports-color @@ -10890,6 +11034,7 @@ snapshots: is-glob: 4.0.3 semver: 7.5.4 tsutils: 3.21.0(typescript@5.3.3) + optionalDependencies: typescript: 5.3.3 transitivePeerDependencies: - supports-color @@ -10904,6 +11049,7 @@ snapshots: minimatch: 9.0.3 semver: 7.5.4 ts-api-utils: 1.0.3(typescript@5.3.3) + optionalDependencies: typescript: 5.3.3 transitivePeerDependencies: - supports-color @@ -12140,13 +12286,13 @@ snapshots: path-type: 4.0.0 yaml: 1.10.2 - create-jest@29.7.0(@types/node@18.19.6)(ts-node@10.9.2): + create-jest@29.7.0(@types/node@18.19.6)(ts-node@10.9.2(@types/node@18.19.6)(typescript@5.3.3)): dependencies: '@jest/types': 29.6.3 chalk: 4.1.2 exit: 0.1.2 graceful-fs: 4.2.11 - jest-config: 29.7.0(@types/node@18.19.6)(ts-node@10.9.2) + jest-config: 29.7.0(@types/node@18.19.6)(ts-node@10.9.2(@types/node@18.19.6)(typescript@5.3.3)) jest-util: 29.7.0 prompts: 2.4.2 transitivePeerDependencies: @@ -13020,6 +13166,8 @@ snapshots: fast-deep-equal@3.1.3: {} + fast-diff@1.3.0: {} + fast-fifo@1.3.2: {} fast-glob@3.3.2: @@ -13129,7 +13277,7 @@ snapshots: flow-parser@0.226.0: {} follow-redirects@1.15.4(debug@4.3.4): - dependencies: + optionalDependencies: debug: 4.3.4 for-each@0.3.3: @@ -13507,7 +13655,7 @@ snapshots: inherits@2.0.4: {} - ink@3.2.0(react@17.0.2): + ink@3.2.0(@types/react@18.2.47)(react@17.0.2): dependencies: ansi-escapes: 4.3.2 auto-bind: 4.0.0 @@ -13533,6 +13681,8 @@ snapshots: wrap-ansi: 6.2.0 ws: 7.5.9 yoga-layout-prebuilt: 1.10.0 + optionalDependencies: + '@types/react': 18.2.47 transitivePeerDependencies: - bufferutil - utf-8-validate @@ -13793,16 +13943,16 @@ snapshots: - babel-plugin-macros - supports-color - jest-cli@29.7.0(@types/node@18.19.6)(ts-node@10.9.2): + jest-cli@29.7.0(@types/node@18.19.6)(ts-node@10.9.2(@types/node@18.19.6)(typescript@5.3.3)): dependencies: - '@jest/core': 29.7.0(ts-node@10.9.2) + '@jest/core': 29.7.0(ts-node@10.9.2(@types/node@18.19.6)(typescript@5.3.3)) '@jest/test-result': 29.7.0 '@jest/types': 29.6.3 chalk: 4.1.2 - create-jest: 29.7.0(@types/node@18.19.6)(ts-node@10.9.2) + create-jest: 29.7.0(@types/node@18.19.6)(ts-node@10.9.2(@types/node@18.19.6)(typescript@5.3.3)) exit: 0.1.2 import-local: 3.1.0 - jest-config: 29.7.0(@types/node@18.19.6)(ts-node@10.9.2) + jest-config: 29.7.0(@types/node@18.19.6)(ts-node@10.9.2(@types/node@18.19.6)(typescript@5.3.3)) jest-util: 29.7.0 jest-validate: 29.7.0 yargs: 17.7.2 @@ -13812,12 +13962,11 @@ snapshots: - supports-color - ts-node - jest-config@29.7.0(@types/node@18.19.6)(ts-node@10.9.2): + jest-config@29.7.0(@types/node@18.19.6)(ts-node@10.9.2(@types/node@18.19.6)(typescript@5.3.3)): dependencies: '@babel/core': 7.23.7 '@jest/test-sequencer': 29.7.0 '@jest/types': 29.6.3 - '@types/node': 18.19.6 babel-jest: 29.7.0(@babel/core@7.23.7) chalk: 4.1.2 ci-info: 3.9.0 @@ -13837,6 +13986,8 @@ snapshots: pretty-format: 29.7.0 slash: 3.0.0 strip-json-comments: 3.1.1 + optionalDependencies: + '@types/node': 18.19.6 ts-node: 10.9.2(@types/node@18.19.6)(typescript@5.3.3) transitivePeerDependencies: - babel-plugin-macros @@ -13919,7 +14070,7 @@ snapshots: jest-util: 29.7.0 jest-pnp-resolver@1.2.3(jest-resolve@29.7.0): - dependencies: + optionalDependencies: jest-resolve: 29.7.0 jest-regex-util@29.6.3: {} @@ -14057,12 +14208,12 @@ snapshots: merge-stream: 2.0.0 supports-color: 8.1.1 - jest@29.7.0(@types/node@18.19.6)(ts-node@10.9.2): + jest@29.7.0(@types/node@18.19.6)(ts-node@10.9.2(@types/node@18.19.6)(typescript@5.3.3)): dependencies: - '@jest/core': 29.7.0(ts-node@10.9.2) + '@jest/core': 29.7.0(ts-node@10.9.2(@types/node@18.19.6)(typescript@5.3.3)) '@jest/types': 29.6.3 import-local: 3.1.0 - jest-cli: 29.7.0(@types/node@18.19.6)(ts-node@10.9.2) + jest-cli: 29.7.0(@types/node@18.19.6)(ts-node@10.9.2(@types/node@18.19.6)(typescript@5.3.3)) transitivePeerDependencies: - '@types/node' - babel-plugin-macros @@ -14090,7 +14241,7 @@ snapshots: dependencies: argparse: 2.0.1 - jscodeshift@0.15.1(@babel/preset-env@7.23.8): + jscodeshift@0.15.1(@babel/preset-env@7.23.8(@babel/core@7.23.7)): dependencies: '@babel/core': 7.23.7 '@babel/parser': 7.23.6 @@ -14099,7 +14250,6 @@ snapshots: '@babel/plugin-transform-nullish-coalescing-operator': 7.23.4(@babel/core@7.23.7) '@babel/plugin-transform-optional-chaining': 7.23.4(@babel/core@7.23.7) '@babel/plugin-transform-private-methods': 7.23.3(@babel/core@7.23.7) - '@babel/preset-env': 7.23.8(@babel/core@7.23.7) '@babel/preset-flow': 7.23.3(@babel/core@7.23.7) '@babel/preset-typescript': 7.23.3(@babel/core@7.23.7) '@babel/register': 7.23.7(@babel/core@7.23.7) @@ -14113,6 +14263,8 @@ snapshots: recast: 0.23.4 temp: 0.8.4 write-file-atomic: 2.4.3 + optionalDependencies: + '@babel/preset-env': 7.23.8(@babel/core@7.23.7) transitivePeerDependencies: - supports-color @@ -14244,14 +14396,14 @@ snapshots: lines-and-columns@1.2.4: {} - lint-staged@14.0.1: + lint-staged@14.0.1(enquirer@2.4.1): dependencies: chalk: 5.3.0 commander: 11.0.0 debug: 4.3.4 execa: 7.2.0 lilconfig: 2.1.0 - listr2: 6.6.1 + listr2: 6.6.1(enquirer@2.4.1) micromatch: 4.0.5 pidtree: 0.6.0 string-argv: 0.3.2 @@ -14260,7 +14412,7 @@ snapshots: - enquirer - supports-color - listr2@6.6.1: + listr2@6.6.1(enquirer@2.4.1): dependencies: cli-truncate: 3.1.0 colorette: 2.0.20 @@ -14268,6 +14420,8 @@ snapshots: log-update: 5.0.1 rfdc: 1.3.0 wrap-ansi: 8.1.0 + optionalDependencies: + enquirer: 2.4.1 lit-element@4.0.3: dependencies: @@ -14311,8 +14465,12 @@ snapshots: lodash.camelcase@4.3.0: {} + lodash.clonedeep@4.5.0: {} + lodash.debounce@4.0.8: {} + lodash.isequal@4.5.0: {} + lodash.memoize@4.1.2: {} lodash.merge@4.6.2: {} @@ -14341,12 +14499,12 @@ snapshots: strip-ansi: 7.1.0 wrap-ansi: 8.1.0 - loki@0.32.0: + loki@0.32.0(@types/react@18.2.47): dependencies: '@loki/integration-react': 0.32.0 '@loki/integration-react-native': 0.32.0 '@loki/integration-vue': 0.32.0 - '@loki/runner': 0.32.0 + '@loki/runner': 0.32.0(@types/react@18.2.47) '@loki/target-chrome-app': 0.32.0 '@loki/target-chrome-docker': 0.32.0 '@loki/target-native-android-emulator': 0.32.0 @@ -14999,6 +15157,8 @@ snapshots: pako@0.2.9: {} + parchment@3.0.0: {} + parent-module@1.0.1: dependencies: callsites: 3.1.0 @@ -15224,8 +15384,9 @@ snapshots: cross-fetch: 4.0.0 debug: 4.3.4 devtools-protocol: 0.0.1147663 - typescript: 5.3.3 ws: 8.13.0 + optionalDependencies: + typescript: 5.3.3 transitivePeerDependencies: - bufferutil - encoding @@ -15250,6 +15411,19 @@ snapshots: quick-lru@4.0.1: {} + quill-delta@5.1.0: + dependencies: + fast-diff: 1.3.0 + lodash.clonedeep: 4.5.0 + lodash.isequal: 4.5.0 + + quill@2.0.2: + dependencies: + eventemitter3: 5.0.1 + lodash-es: 4.17.21 + parchment: 3.0.0 + quill-delta: 5.1.0 + raf@3.4.1: dependencies: performance-now: 2.1.0 @@ -15275,7 +15449,7 @@ snapshots: iconv-lite: 0.4.24 unpipe: 1.0.0 - react-colorful@5.6.1(react-dom@18.2.0)(react@18.2.0): + react-colorful@5.6.1(react-dom@18.2.0(react@18.2.0))(react@18.2.0): dependencies: react: 18.2.0 react-dom: 18.2.0(react@18.2.0) @@ -15303,27 +15477,33 @@ snapshots: react: 17.0.2 scheduler: 0.20.2 - react-remove-scroll-bar@2.3.4(react@18.2.0): + react-remove-scroll-bar@2.3.4(@types/react@18.2.47)(react@18.2.0): dependencies: react: 18.2.0 - react-style-singleton: 2.2.1(react@18.2.0) + react-style-singleton: 2.2.1(@types/react@18.2.47)(react@18.2.0) tslib: 2.6.2 + optionalDependencies: + '@types/react': 18.2.47 - react-remove-scroll@2.5.5(react@18.2.0): + react-remove-scroll@2.5.5(@types/react@18.2.47)(react@18.2.0): dependencies: react: 18.2.0 - react-remove-scroll-bar: 2.3.4(react@18.2.0) - react-style-singleton: 2.2.1(react@18.2.0) + react-remove-scroll-bar: 2.3.4(@types/react@18.2.47)(react@18.2.0) + react-style-singleton: 2.2.1(@types/react@18.2.47)(react@18.2.0) tslib: 2.6.2 - use-callback-ref: 1.3.1(react@18.2.0) - use-sidecar: 1.1.2(react@18.2.0) + use-callback-ref: 1.3.1(@types/react@18.2.47)(react@18.2.0) + use-sidecar: 1.1.2(@types/react@18.2.47)(react@18.2.0) + optionalDependencies: + '@types/react': 18.2.47 - react-style-singleton@2.2.1(react@18.2.0): + react-style-singleton@2.2.1(@types/react@18.2.47)(react@18.2.0): dependencies: get-nonce: 1.0.1 invariant: 2.2.4 react: 18.2.0 tslib: 2.6.2 + optionalDependencies: + '@types/react': 18.2.47 react@17.0.2: dependencies: @@ -16013,13 +16193,11 @@ snapshots: ts-dedent@2.2.0: {} - ts-jest@29.1.1(@babel/core@7.23.7)(esbuild@0.19.11)(jest@29.7.0)(typescript@5.3.3): + ts-jest@29.1.1(@babel/core@7.23.7)(@jest/types@29.6.3)(babel-jest@29.7.0(@babel/core@7.23.7))(esbuild@0.19.11)(jest@29.7.0(@types/node@18.19.6)(ts-node@10.9.2(@types/node@18.19.6)(typescript@5.3.3)))(typescript@5.3.3): dependencies: - '@babel/core': 7.23.7 bs-logger: 0.2.6 - esbuild: 0.19.11 fast-json-stable-stringify: 2.1.0 - jest: 29.7.0(@types/node@18.19.6)(ts-node@10.9.2) + jest: 29.7.0(@types/node@18.19.6)(ts-node@10.9.2(@types/node@18.19.6)(typescript@5.3.3)) jest-util: 29.7.0 json5: 2.2.3 lodash.memoize: 4.1.2 @@ -16027,6 +16205,11 @@ snapshots: semver: 7.5.4 typescript: 5.3.3 yargs-parser: 21.1.1 + optionalDependencies: + '@babel/core': 7.23.7 + '@jest/types': 29.6.3 + babel-jest: 29.7.0(@babel/core@7.23.7) + esbuild: 0.19.11 ts-node@10.9.2(@types/node@18.19.6)(typescript@5.3.3): dependencies: @@ -16247,22 +16430,26 @@ snapshots: punycode: 1.3.2 querystring: 0.2.0 - use-callback-ref@1.3.1(react@18.2.0): + use-callback-ref@1.3.1(@types/react@18.2.47)(react@18.2.0): dependencies: react: 18.2.0 tslib: 2.6.2 + optionalDependencies: + '@types/react': 18.2.47 - use-resize-observer@9.1.0(react-dom@18.2.0)(react@18.2.0): + use-resize-observer@9.1.0(react-dom@18.2.0(react@18.2.0))(react@18.2.0): dependencies: '@juggle/resize-observer': 3.4.0 react: 18.2.0 react-dom: 18.2.0(react@18.2.0) - use-sidecar@1.1.2(react@18.2.0): + use-sidecar@1.1.2(@types/react@18.2.47)(react@18.2.0): dependencies: detect-node-es: 1.1.0 react: 18.2.0 tslib: 2.6.2 + optionalDependencies: + '@types/react': 18.2.47 util-deprecate@1.0.2: {} @@ -16331,14 +16518,15 @@ snapshots: unist-util-stringify-position: 3.0.3 vfile-message: 3.1.4 - vite@4.5.1(sass@1.69.7): + vite@4.5.1(@types/node@18.19.6)(sass@1.69.7): dependencies: esbuild: 0.18.20 postcss: 8.4.33 rollup: 3.29.4 - sass: 1.69.7 optionalDependencies: + '@types/node': 18.19.6 fsevents: 2.3.3 + sass: 1.69.7 vue@2.6.14: {} diff --git a/stories/flow-core/f-button.stories.js b/stories/flow-core/f-button.stories.ts similarity index 68% rename from stories/flow-core/f-button.stories.js rename to stories/flow-core/f-button.stories.ts index 095a1270d..1f8cb1f3b 100644 --- a/stories/flow-core/f-button.stories.js +++ b/stories/flow-core/f-button.stories.ts @@ -2,6 +2,7 @@ import { html } from "lit-html"; import fButtonAnatomy from "../svg/i-fbutton-anatomy.js"; import { unsafeSVG } from "lit-html/directives/unsafe-svg.js"; import { createRef, ref } from "lit/directives/ref.js"; +import type { FButton } from "@ollion/flow-core"; export default { title: "@ollion/flow-core/f-button", @@ -14,10 +15,10 @@ export default { }; export const Playground = { - render: args => { - const fieldRef = createRef(); + render: (args: Record) => { + const fieldRef = createRef(); - const handleClick = event => { + const handleClick = (event: Event) => { console.log(event); }; @@ -27,6 +28,12 @@ export const Playground = { } }, 2000); + const handleAction = (event: CustomEvent) => { + if (fieldRef.value) { + fieldRef.value.label = event.detail.action; + } + }; + return html` `; }, @@ -99,7 +109,12 @@ export const Playground = { counter: { control: "text" }, - + actions: { + control: "object" + }, + ["selected-action"]: { + control: "text" + }, loading: { control: "boolean" }, @@ -122,6 +137,8 @@ export const Playground = { ["icon-left"]: undefined, ["icon-right"]: undefined, counter: undefined, + actions: ["Merge", "Squash and merge", "Rebase and merge"], + ["selected-action"]: "Merge", loading: false, disabled: false, ["label-wrap"]: false @@ -134,7 +151,7 @@ export const Anatomy = { }; export const Variant = { - render: args => + render: () => html` @@ -145,7 +162,7 @@ export const Variant = { }; export const Category = { - render: args => + render: () => html` @@ -157,7 +174,7 @@ export const Category = { }; export const Size = { - render: args => + render: () => html` @@ -169,7 +186,7 @@ export const Size = { }; export const State = { - render: args => + render: () => html` @@ -212,7 +229,7 @@ export const State = { }; export const Label = { - render: args => + render: () => html` `, @@ -221,7 +238,7 @@ export const Label = { }; export const IconLeft = { - render: args => + render: () => html` `, @@ -230,7 +247,7 @@ export const IconLeft = { }; export const IconRight = { - render: args => + render: () => html` @@ -240,7 +257,7 @@ export const IconRight = { }; export const Counter = { - render: args => + render: () => html` @@ -250,30 +267,119 @@ export const Counter = { name: "counter" }; +export const Actions = { + render: () => { + const actions = ["Merge", "Squash and merge", "Rebase and merge"]; + + const mergeTemplate = () => + html` + + + Merge + + + In hac habitasse platea dictumst. Nunc gravida lacus in nulla euismod, eget varius enim + mattis. + + `; + const sqAndMergeTemplate = () => + html` + + + Squash and merge + + + In hac habitasse platea dictumst. Nunc gravida lacus in nulla euismod, eget varius enim + mattis. + + `; + const rbAndMergeTemplate = () => + html` + + + Rebase and merge + + + In hac habitasse platea dictumst. Nunc gravida lacus in nulla euismod, eget varius enim + mattis. + + `; + const templateActions = [mergeTemplate, sqAndMergeTemplate, rbAndMergeTemplate]; + return html` + + + `; + }, + name: "actions" +}; + +export const SelectedAction = { + render: () => { + const actions = ["Merge", "Squash and merge", "Rebase and merge"]; + + return html` + + `; + }, + name: "selected-action" +}; + +export const Action = { + render: () => { + const actions = ["Merge", "Squash and merge", "Rebase and merge"]; + const fieldRef = createRef(); + const handleAction = (event: CustomEvent) => { + if (fieldRef.value) { + fieldRef.value.label = event.detail.action; + } + }; + return html` + 'action' event emitted when action is selected, In following example we are updating label + when action is selected. + + `; + }, + name: "@action" +}; + export const Flags = { - render: args => + render: () => html` Loading - + - + - + Disabled - + { - const handleInput = function (ev) { - console.log(ev); - }; - - return html` - - `; - }, - - name: "Playground", - - argTypes: { - value: { - control: "text" - }, - - mode: { - control: "radio", - options: ["edit", "view"] - } - }, - - args: { - value: sampleMd, - mode: "view" - } -}; diff --git a/stories/flow-md-editor/f-md-editor.stories.ts b/stories/flow-md-editor/f-md-editor.stories.ts new file mode 100644 index 000000000..652cba338 --- /dev/null +++ b/stories/flow-md-editor/f-md-editor.stories.ts @@ -0,0 +1,116 @@ +import { html } from "lit-html"; +import sampleMd from "./sample-md"; +import { createRef, ref } from "lit-html/directives/ref.js"; +import { FMDEditor } from "@ollion/flow-md-editor"; + +export default { + title: "@ollion/flow-md-editor/f-md-editor", + + parameters: { + controls: { + hideNoControlsWarning: true + } + } +}; + +export const Playground = { + render: (args: Record) => { + const mdRef = createRef(); + const handleInput = function (ev: CustomEvent) { + console.log(ev.detail.value); + }; + + return html` + + `; + }, + + name: "Playground", + + argTypes: { + value: { + control: "text" + }, + + mode: { + control: "radio", + options: ["edit", "view"] + } + }, + + args: { + value: sampleMd, + mode: "view" + } +}; + +export const Value = { + render: () => { + return html` + 'value' will display inside editor + + `; + }, + + name: "value" +}; + +export const Mode = { + render: () => { + const editValue = `## This is edit mode`; + const viewValue = `## This is view mode`; + return html` + + + + `; + }, + + name: "mode" +}; + +export const InputEvent = { + render: () => { + const preRef = createRef(); + const handleInput = (ev: CustomEvent) => { + if (preRef.value) { + preRef.value.textContent = JSON.stringify(ev.detail, null, 4); + } + }; + return html` + + + + It will emit 'input' event whenver there are any modification in editor + + + + + + + + 'event.detail' will display here + 

+				
+			
+		`;
+	},
+
+	name: "@input"
+};
diff --git a/stories/flow-text-editor/About.mdx b/stories/flow-text-editor/About.mdx
new file mode 100644
index 000000000..56c31f12b
--- /dev/null
+++ b/stories/flow-text-editor/About.mdx
@@ -0,0 +1,6 @@
+import { Meta } from "@storybook/addon-docs/blocks";
+import README from "./../../packages/flow-text-editor/README.md?raw";
+
+
+
+
diff --git a/stories/flow-text-editor/f-text-editor.mdx b/stories/flow-text-editor/f-text-editor.mdx
new file mode 100644
index 000000000..bd595f2fb
--- /dev/null
+++ b/stories/flow-text-editor/f-text-editor.mdx
@@ -0,0 +1,30 @@
+import { Meta, Story, Canvas, ArgsTable } from "@storybook/blocks";
+import { html } from "lit-html";
+import fDividerAnatomy from "../svg/i-fdivider-anatomy.js";
+import { unsafeSVG } from "lit-html/directives/unsafe-svg.js";
+
+import * as FTextEditorStories from "./f-text-editor.stories";
+
+
+
+# f-text-editor
+
+

+
+

+
+## Overview
+
+
+
+f-text-editor used to edit and view rich text content.
+
+

+
+### [Playground](/story/ollion-flow-text-editor-components-f-text-editor--playground)
+
+
+	
+
+
+

diff --git a/stories/flow-text-editor/f-text-editor.stories.ts b/stories/flow-text-editor/f-text-editor.stories.ts
new file mode 100644
index 000000000..f823d443d
--- /dev/null
+++ b/stories/flow-text-editor/f-text-editor.stories.ts
@@ -0,0 +1,150 @@
+import { html } from "lit-html";
+import { createRef, ref } from "lit-html/directives/ref.js";
+
+export default {
+	title: "@ollion/flow-text-editor/f-text-editor",
+
+	parameters: {
+		controls: {
+			hideNoControlsWarning: true
+		}
+	}
+};
+
+export const Playground = {
+	render: (args: Record) => {
+		const handleInput = function (ev: CustomEvent) {
+			console.log(ev);
+		};
+
+		return html`
+			
+		`;
+	},
+
+	name: "Playground",
+
+	argTypes: {
+		value: {
+			control: "text"
+		},
+		placeholder: {
+			control: "text"
+		}
+	},
+
+	args: {
+		value: `
Hello World!
`,
+		placeholder: `Enter rich text here...`
+	}
+};
+
+export const Value = {
+	render: () => {
+		return html`
+			'value' will display inside editor
+			This is value"}>
+		`;
+	},
+
+	name: "value"
+};
+
+export const Placeholder = {
+	render: () => {
+		return html`
+			'placeholder' will display whenever there is no content
+			
+		`;
+	},
+
+	name: "placeholder"
+};
+
+export const ReadOnly = {
+	render: () => {
+		return html`
+			If 'read-only' is set then you can't edit
+			You can't edit this value"}
+			>
+		`;
+	},
+
+	name: "read-only"
+};
+
+export const ToolBar = {
+	render: () => {
+		const toolbarOptions = [
+			["bold", "italic", "underline", "strike"], // toggled buttons
+			["blockquote", "code-block"],
+			["link", "image", "video", "formula"],
+
+			[{ header: 1 }, { header: 2 }], // custom button values
+			[{ list: "ordered" }, { list: "bullet" }, { list: "check" }],
+			[{ script: "sub" }, { script: "super" }], // superscript/subscript
+			[{ indent: "-1" }, { indent: "+1" }], // outdent/indent
+			[{ direction: "rtl" }], // text direction
+
+			[{ size: ["small", false, "large", "huge"] }], // custom dropdown
+			[{ header: [1, 2, 3, 4, 5, 6, false] }],
+
+			[{ color: [] }, { background: [] }], // dropdown with defaults from theme
+			[{ font: [] }],
+			[{ align: [] }],
+
+			["clean"] // remove formatting button
+		];
+		return html`
+			
+				'toolbar' is used customize toolbar actions
+			
+			
+				${JSON.stringify(toolbarOptions, null, 4)}`}
+				>
+			
+		`;
+	},
+
+	name: "tooltbar"
+};
+
+export const InputEvent = {
+	render: () => {
+		const preRef = createRef();
+		const handleInput = (ev: CustomEvent) => {
+			if (preRef.value) {
+				preRef.value.textContent = JSON.stringify(ev.detail, null, 4);
+			}
+		};
+		return html`
+			
+				
+					
+						It will emit 'input' event whenver there are any modification in editor
+					
+					
+						This is value`}>
+					
+				
+				
+				
+					'event.detail' will display here
+					

+				
+			
+		`;
+	},
+
+	name: "@input"
+};
diff --git a/stories/flow-text-editor/release-notes.mdx b/stories/flow-text-editor/release-notes.mdx
new file mode 100644
index 000000000..861c0fb41
--- /dev/null
+++ b/stories/flow-text-editor/release-notes.mdx
@@ -0,0 +1,5 @@
+import { Meta, Markdown } from "@storybook/addon-docs/blocks";
+import Changelog from "../../packages/flow-text-editor/CHANGELOG.md?raw";
+
+
+{Changelog}
diff --git a/tsconfig.json b/tsconfig.json
index ae807553e..c0e805dc5 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -32,6 +32,9 @@
 		},
 		{
 			"path": "./packages/flow-md-editor"
+		},
+		{
+			"path": "./packages/flow-text-editor"
 		}
 	]
 }