From 4f250ebc41a4dcdd957a11f1905f2f5cc2f03e35 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sun, 29 Aug 2021 22:23:41 +0900 Subject: [PATCH 001/246] update readme docs with dedicated component types --- packages/app-component-manage/README.md | 15 +++++++++++++-- 1 file changed, 13 insertions(+), 2 deletions(-) diff --git a/packages/app-component-manage/README.md b/packages/app-component-manage/README.md index 9555d743..5c1b449e 100644 --- a/packages/app-component-manage/README.md +++ b/packages/app-component-manage/README.md @@ -1,12 +1,23 @@ # Component view -> A code preview widget that displays extra component's information such as storybook url, documentation url, and local code directory path, etc.. +> A code preview widget that displays extra component's information such as storybook url, documentation url, and local code directory path, etc.. this is not customizable yet. but will engineered with extensibility. - ## How it works + 1. get selected layer 2. check if selected layer is a component or an instance. 3. find if data to display exists on a master component. 4. display data if exists. else, display input. + +## Types of supported Component-like layers + +> Components types may vary by design tools (the abstraction is based on figma platform. (since it is most advanced at the this point)) + +- **master-component** (component that is as master) +- **instance-component** (instance component that is from master-component (not from variant-set) ) +- **base-master-component** (temporarily exceptional) (master component that is used for making a managed variant-set - this is because at the time of the development, figma does not support a smart way to manage a base component like it can be represneted via code.) +- **variant-set** +- **variant-instance-component** +- **variant-master-component** From 988abc5ab8619154090abb8097e76e72ceb899b8 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 30 Aug 2021 16:59:21 +0900 Subject: [PATCH 002/246] cleanup component-manage pacakge --- .../component-view-screen.tsx | 6 +- packages/app-data-mapper/__plugin/index.ts | 4 +- packages/app-schema-editor/schema-editor.tsx | 102 ++++++++++-------- .../app-schema-editor/single-property.tsx | 30 +++--- packages/app-schema-editor/types/index.ts | 5 + .../types/single-layer-property-type.ts | 24 +++++ packages/design-sdk | 2 +- 7 files changed, 104 insertions(+), 69 deletions(-) create mode 100644 packages/app-schema-editor/types/index.ts create mode 100644 packages/app-schema-editor/types/single-layer-property-type.ts diff --git a/packages/app-component-manage/component-view-screen.tsx b/packages/app-component-manage/component-view-screen.tsx index 5dfaa915..79ba3c03 100644 --- a/packages/app-component-manage/component-view-screen.tsx +++ b/packages/app-component-manage/component-view-screen.tsx @@ -65,8 +65,8 @@ export function ComponentViewScreen() { return (
- - {selection ? ( + {/* */} + {/* {selection ? (

component view placeholder

) : ( <> - )} + )} */}
); diff --git a/packages/app-data-mapper/__plugin/index.ts b/packages/app-data-mapper/__plugin/index.ts index b34403ba..d55a30ec 100644 --- a/packages/app-data-mapper/__plugin/index.ts +++ b/packages/app-data-mapper/__plugin/index.ts @@ -183,7 +183,7 @@ function mapVariant_try( const set = variant.extractTypeFromVariantNames_Figma(_names); for (const s of set) { - const value = data[s.name]; + const value = data[s.key]; const _isConpat = value && typeof s.type == "string" ? s.type == value @@ -194,7 +194,7 @@ function mapVariant_try( const swappingName = variant.buildVariantNameIncluding_Figma({ including: { - swapPropertyName: s.name, + swapPropertyName: s.key, swapPropertyValue: value, thisOriginName: thisVariantName, }, diff --git a/packages/app-schema-editor/schema-editor.tsx b/packages/app-schema-editor/schema-editor.tsx index 761cdda8..4ae26768 100644 --- a/packages/app-schema-editor/schema-editor.tsx +++ b/packages/app-schema-editor/schema-editor.tsx @@ -2,12 +2,11 @@ import React, { useEffect, useState } from "react"; import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "@core/constant"; import { useSingleSelection } from "plugin-app"; import { PluginSdk } from "@plugin-sdk/app"; -import { - SingleLayerPropertyDefinition, - ISingleLayerProperty, -} from "./single-property"; +import { SingleLayerPropertyDefinition } from "./single-property"; +import { ISingleLayerProperty, IProperties } from "./types"; import { nodes, utils } from "@design-sdk/core"; import { variant } from "@design-sdk/figma/features"; +import { _FigmaVariantPropertyCompatType_to_string } from "../design-sdk/figma/features/variant"; const ERROR_MESSAGES = { nothing_is_selected: "Nothing is selected", @@ -15,20 +14,41 @@ const ERROR_MESSAGES = { "You must select instance or component type of node.", }; -type EditerMode = - // single layer - no matter where it lives under a componennt or a raw group, etc. - | "single-layer-property" - // component set frame +type ComponentLikeType = // component set frame | "master-variant-set" // componennt with/without variant compat (can be used for both, but use it only for non variant component) | "master-component" // instance of simple or varianted component - | "instance" + | "instance"; + +type SchemaDefinitionLike = + | ComponentLikeType + // single layer - no matter where it lives under a componennt or a raw group, etc. + | "single-layer-property"; + +type EditerMode = + | SchemaDefinitionLike // non is set, loading state - | "loading"; + | "no-selection"; + +function analyzeSelection(node): SchemaDefinitionLike { + if ( + node?.origin != nodes.ReflectSceneNodeType.component && + node?.origin != nodes.ReflectSceneNodeType.variant_set && + node?.origin != nodes.ReflectSceneNodeType.instance + ) { + return "single-layer-property"; + } else if (node?.origin == nodes.ReflectSceneNodeType.component) { + return "master-component"; + } else if (node?.origin == nodes.ReflectSceneNodeType.variant_set) { + return "master-variant-set"; + } else if (node?.origin == nodes.ReflectSceneNodeType.instance) { + return "instance"; + } +} export function SchemaEditor(props: {}) { - const [mode, setMode] = useState("loading"); + const [mode, setMode] = useState("no-selection"); // use selection hook, then update the mode corresponding to selected layer on design tool @@ -36,27 +56,10 @@ export function SchemaEditor(props: {}) { useEffect(() => { if (selection) { - if ( - selection?.node?.origin != nodes.ReflectSceneNodeType.component && - selection?.node?.origin != nodes.ReflectSceneNodeType.variant_set && - selection?.node?.origin != nodes.ReflectSceneNodeType.instance - ) { - setMode("single-layer-property"); - } else if ( - selection?.node?.origin == nodes.ReflectSceneNodeType.component - ) { - setMode("master-component"); - } else if ( - selection?.node?.origin == nodes.ReflectSceneNodeType.variant_set - ) { - setMode("master-variant-set"); - } else if ( - selection?.node?.origin == nodes.ReflectSceneNodeType.instance - ) { - setMode("instance"); - } + const analysis = analyzeSelection(selection?.node); + setMode(analysis); } else { - setMode("loading"); + setMode("no-selection"); } }, [selection]); @@ -66,8 +69,8 @@ export function SchemaEditor(props: {}) { return <_Mode_Empty />; } switch (mode) { - case "loading": - return <_Mode_Loading />; + case "no-selection": + return <_Mode_NoSelection />; case "single-layer-property": return <_Mode_SingleLayerProperty node={selection.node} />; case "master-variant-set": @@ -84,6 +87,7 @@ export function SchemaEditor(props: {}) { return ( <>

schema editor

+

{selection?.node?.origin}

); @@ -93,8 +97,8 @@ function _Mode_Empty() { return <>Nothing is selected; } -function _Mode_Loading() { - return <>loading..; +function _Mode_NoSelection() { + return <>nothing selected; } function _Mode_SingleLayerProperty(props: { @@ -103,7 +107,7 @@ function _Mode_SingleLayerProperty(props: { const { node } = props; const id = node.id; - const [data, setData] = useState([]); + const [data, setData] = useState([]); const handleOnSave = (d: ISingleLayerProperty) => { const newData = data; newData.push(d); @@ -177,7 +181,7 @@ function _Mode_Component(props: { node: nodes.light.IReflectNodeReference }) { node.parentReference.origin == nodes.ReflectSceneNodeType.variant_set; // if variant, load default property set by variant namings. - let variantProperties: variant.FimaVariantPropertyData[]; + let variantProperties: variant.VariantProperty[]; if (isVariantCompat) { const names = variant.getVariantNamesSetFromReference_Figma(node); variantProperties = variant.extractTypeFromVariantNames_Figma(names); @@ -210,24 +214,28 @@ function _Mode_Component(props: { node: nodes.light.IReflectNodeReference }) { {variantProperties ? ( <>
variant properties
- {variantProperties.map((n) => { - return ( -

- name:{n.name}, type:{n.type} -

- ); - })} +
    + {variantProperties.map((n) => { + return ( +
  • + name:{n.key}, type: + {`${_FigmaVariantPropertyCompatType_to_string(n.type)}`} +
    • + ); + })} +
+
data
) : ( <> )} {/* */} {properties ? ( - <> +
    {properties.map((p) => { - return

    {JSON.stringify(p)}

    ; + return
  • {JSON.stringify(p)}
    • ; })} - +
) : ( <>Loading.. )} diff --git a/packages/app-schema-editor/single-property.tsx b/packages/app-schema-editor/single-property.tsx index da698ee0..dca1e9ef 100644 --- a/packages/app-schema-editor/single-property.tsx +++ b/packages/app-schema-editor/single-property.tsx @@ -1,6 +1,7 @@ import { Button, Divider, TextField } from "@material-ui/core"; -import React, { useRef, useState } from "react"; -import { schema } from "coli"; +import React, { useState } from "react"; +import { ISingleLayerProperty } from "./types"; + type UserInteractionMode = "editing" | "viewing"; const ModeToggleButton = (props: { @@ -14,20 +15,6 @@ const ModeToggleButton = (props: { return ; }; -/** - * Storable object. this is stored to layer's metadata. do not modify this. - */ -export interface ISingleLayerProperty { - schema: schema.IProperty; - locateMode: string; - /** - * target property on layer. - * for example if this is a text layer's property, - * it can be mapped to text#characters or also text#fills[0]. - * but only once at a time. - */ - targetProperty: string; -} interface ISingleLayerPropertyDefinitionProps { initial?: ISingleLayerProperty; initialMode?: UserInteractionMode; @@ -118,6 +105,17 @@ export function SingleLayerPropertyDefinition( defaultValue={data?.locateMode} disabled={disableInputs} /> + { + setData({ + ...data, + targetProperty: e.target.value as any, + }); + }} + defaultValue={data?.targetProperty} + disabled={disableInputs} + /> Date: Mon, 30 Aug 2021 17:16:37 +0900 Subject: [PATCH 003/246] resolve re-exporting --- packages/app-schema-editor/types/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app-schema-editor/types/index.ts b/packages/app-schema-editor/types/index.ts index e08c4709..4f928354 100644 --- a/packages/app-schema-editor/types/index.ts +++ b/packages/app-schema-editor/types/index.ts @@ -2,4 +2,4 @@ import type { ISingleLayerProperty } from "./single-layer-property-type"; // region export export type IProperties = ISingleLayerProperty[]; -export { ISingleLayerProperty } from "./single-layer-property-type"; +export type { ISingleLayerProperty } from "./single-layer-property-type"; From e55bd015e9f8dd1c37183db32b9fc5b028711fee Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 30 Aug 2021 17:35:15 +0900 Subject: [PATCH 004/246] fix with updated figma enum constraints --- packages/app-data-mapper/__plugin/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app-data-mapper/__plugin/index.ts b/packages/app-data-mapper/__plugin/index.ts index d55a30ec..d23e3495 100644 --- a/packages/app-data-mapper/__plugin/index.ts +++ b/packages/app-data-mapper/__plugin/index.ts @@ -187,7 +187,7 @@ function mapVariant_try( const _isConpat = value && typeof s.type == "string" ? s.type == value - : s.type.includes(value); + : (s.type as variant.FigmaEnum).values.includes(value); if (_isConpat) { // 4. map the variant From 59b090161d119515f5b693daf2e088ba66e63901 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 30 Aug 2021 20:16:03 +0900 Subject: [PATCH 005/246] add node-api for plugin sdk - easier node access on ui thread of the plugin. --- packages/plugin-sdk-app/index.ts | 421 +------------------------- packages/plugin-sdk-app/node-api.ts | 55 ++++ packages/plugin-sdk-app/plugin-sdk.ts | 397 ++++++++++++++++++++++++ packages/plugin-sdk-app/request.ts | 19 ++ packages/plugin-sdk-core/events.ts | 10 + 5 files changed, 483 insertions(+), 419 deletions(-) create mode 100644 packages/plugin-sdk-app/node-api.ts create mode 100644 packages/plugin-sdk-app/plugin-sdk.ts create mode 100644 packages/plugin-sdk-app/request.ts diff --git a/packages/plugin-sdk-app/index.ts b/packages/plugin-sdk-app/index.ts index 91294a64..e64c2743 100644 --- a/packages/plugin-sdk-app/index.ts +++ b/packages/plugin-sdk-app/index.ts @@ -1,419 +1,2 @@ -import { - BasePluginEvent, - PLUGIN_SDK_EK_DRAG_AND_DROPPED, - PLUGIN_SDK_EK_REQUEST_FETCH_NODE_MAIN_COMPONENT_LAYER_META, - PLUGIN_SDK_EK_REQUEST_FETCH_NODE_MAIN_COMPONENT_META, - PLUGIN_SDK_EK_REQUEST_FETCH_NODE_META, - PLUGIN_SDK_EK_REQUEST_FETCH_ROOT_META, - PLUGIN_SDK_EK_SIMPLE_NOTIFY, - PLUGIN_SDK_NS_APP_REQUEST_CUSTOM_ALL, - PLUGIN_SDK_NS_DRAG_AND_DROP, - PLUGIN_SDK_NS_META_API, - PLUGIN_SDK_NS_NOTIFY_API, - PUGIN_SDK_EK_REQUEST_UPDATE_MAIN_COMPONENT_META, - PUGIN_SDK_EK_REQUEST_UPDATE_NODE_META, - PLUGIN_SDK_NS_STORAGE, - PLUGIN_SDK_EK_STORAGE_ALIAS, - TransportPluginEvent, - reqid, - BatchMetaFetchRequest, - NodeMetaFetchRequest, - NodeMetaUpdateRequest, - StorageSetItemRequest, - StorageGetItemRequest, - StorageGetItemResponse, - NotifyRequest, - DragAndDropOnCanvasRequest, - PLUGIN_SDK_NS_FOCUS_API, - PLUGIN_SDK_EK_SIMPLE_FOCUS, - FocusRequest, - PLUGIN_SDK_NS_BROWSER_API, - PLUGIN_SDK_EK_BROWSER_OPEN_URI, - PLUGIN_SDK_NS_EXPORT_AS_IMAGE, - PLUGIN_SDK_EK_REQUEST_EXPORT_AS_IMAGE, - ImageExportRequest, - ImageExportResponse, - PLUGIN_SDK_NS_GET_NODE, - PLUGIN_SDK_EK_REQUEST_GET_NODE_BY_ID, - target_platform, - TargetPlatform, -} from "@plugin-sdk/core"; -import type { ReflectSceneNode } from "@design-sdk/core/nodes"; -import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "@core/constant"; - -import { _SharedStorageCache } from "./_shared-storage-cache"; - -const __main_plugin_sdk_instance_storage_cache = new _SharedStorageCache( - "co.grida.assistant" -); - -export class PluginSdk { - private static _window: Window; - static get window(): Window { - return this._window; - } - static initializeWindow(window: Window) { - this._window = window; - } - - /** - * this only sets TARGET_PLATFORM on ui thread. - * @param platform - */ - static async initializeTargetPlatform(platform: TargetPlatform) { - if (!!target_platform.get()) { - throw "cannot overwrite target platform on runtime."; - } - - target_platform.set(platform); - if (platform == TargetPlatform.webdev) { - return true; - } - - // sync this to code side. - await PluginSdk.request({ - namespace: "__INTERNAL__", - key: "sync-target-platform", - data: platform, - }); - // console.info(`thread#ui: target platform set as ${platform}`); - } - - // region general canvas api - static get selectedNodeIds(): readonly string[] { - throw "not implemented"; - return []; - } - - static get selectedNodes(): readonly ReflectSceneNode[] { - throw "not implemented"; - return []; - } - - static get selectedNodeId(): string { - // TODO - throw "not implemented"; - return undefined; - } - - static get selectedNode(): ReflectSceneNode { - // TODO - throw "not implemented"; - return undefined; - } - - static async getNode(id: string): Promise<{ - id: string; - name: string; - x: number; - y: number; - width: number; - height: number; - }> { - return await this.request({ - namespace: PLUGIN_SDK_NS_GET_NODE, - key: PLUGIN_SDK_EK_REQUEST_GET_NODE_BY_ID, - data: { id: id }, - }); - // - } - - static async getNodeImage( - req: ImageExportRequest - ): Promise { - return await this.request({ - namespace: PLUGIN_SDK_NS_EXPORT_AS_IMAGE, - key: PLUGIN_SDK_EK_REQUEST_EXPORT_AS_IMAGE, - data: req, - }); - } - - // enderegion general canvas api - - // region network api - static get(params: any) { - throw "not implmtd"; - } - - static post(params: any) { - throw "not implmtd"; - } - - // endregion network api - - // - // region storage api - static setItem(key: string, value: T) { - __main_plugin_sdk_instance_storage_cache.setCache( - key, - value - ); /* 1. set cache */ - - /* 2. send set request */ - this.request({ - namespace: PLUGIN_SDK_NS_STORAGE, - key: PLUGIN_SDK_EK_STORAGE_ALIAS.set, - data: >{ - type: "set-item", - key: key, - value: value, - }, - }).finally(() => { - __main_plugin_sdk_instance_storage_cache.removeCache( - key - ); /* 3. remove cache after saving complete */ - }); - } - - static async getItem(key: string): Promise { - const _has_cached = __main_plugin_sdk_instance_storage_cache.hasCache(key); - if (_has_cached) { - return __main_plugin_sdk_instance_storage_cache.getCache(key); - } else { - const _resp = await this.request>({ - namespace: PLUGIN_SDK_NS_STORAGE, - key: PLUGIN_SDK_EK_STORAGE_ALIAS.get, - data: >{ - type: "get-item", - key: key, - }, - }); - return _resp.value; - } - } - - // endregion storage api - // - - // - // region metadata - static updateMetadata(request: NodeMetaUpdateRequest) { - return this.request({ - namespace: PLUGIN_SDK_NS_META_API, - key: PUGIN_SDK_EK_REQUEST_UPDATE_NODE_META, - data: request, - }); - } - - /** - * fetches the metadata with grida default namespace provided. - */ - static async fetchMetadata_grida( - on: string, - key: string - ): Promise { - return this.fetchMetadata({ - id: on, - key: key, - namespace: ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE, - }); - } - - static async fetchMetadata( - request: NodeMetaFetchRequest - ): Promise { - return this.request({ - namespace: PLUGIN_SDK_NS_META_API, - key: PLUGIN_SDK_EK_REQUEST_FETCH_NODE_META, - data: request, - }); - } - - /** - * fetches the master component metadata no matter the input id (node id) was id of master component or a instance. - * when instance id was givven it will automatically locate master component to set the metadata - * @param request - * @returns - */ - static async fetchMainComponentMetadata(request: NodeMetaFetchRequest) { - return this.request({ - namespace: PLUGIN_SDK_NS_META_API, - key: PLUGIN_SDK_EK_REQUEST_FETCH_NODE_MAIN_COMPONENT_META, - data: request, - }); - } - - /** - * fetches the master component's layer corresponding to givven id. works similar like "fetchMainComponentMetadata" - */ - static async fetchMainComponentLayerMetadata(request: NodeMetaFetchRequest) { - throw "not implemented on handler side"; - return this.request({ - namespace: PLUGIN_SDK_NS_META_API, - key: PLUGIN_SDK_EK_REQUEST_FETCH_NODE_MAIN_COMPONENT_LAYER_META, - data: request, - }); - } - - /** - * updates the main component's meta data. - * (this also works for a variant compat component, - * but it does't save on variant set's meta, - * intead saves on master component of single variant. - * - so you'll need to prevent using this on some case to prevent future confusion) - * @param request - * @returns - */ - static async updateMainComponentMetadata(request: NodeMetaUpdateRequest) { - return this.request({ - namespace: PLUGIN_SDK_NS_META_API, - key: PUGIN_SDK_EK_REQUEST_UPDATE_MAIN_COMPONENT_META, - data: request, - }); - } - - static fetchRootMetadata(key: string): Promise { - const data: BatchMetaFetchRequest = { - key: key, - }; - return this.request({ - namespace: PLUGIN_SDK_NS_META_API, - key: PLUGIN_SDK_EK_REQUEST_FETCH_ROOT_META, - data: data, - }); - } - - // endregion metadata - - /** - * inner iframe blocked js functions - * this is designed to be used inside iframe that has no popup permission, so that calling open() in inner iframe won't work. - * But we can simply allow popups for inner iframe, so we don't have to use this function. - * this function does not check if this is being called inside a popup-blocked iframe. - * - * @deprecated use allow-popup & open instead. - **/ - static openUri(uri: string) { - if (process.env.HOSTED ?? process.env.NEXT_PUBLIC_HOSTED) { - this.request({ - namespace: PLUGIN_SDK_NS_BROWSER_API, - key: PLUGIN_SDK_EK_BROWSER_OPEN_URI, - data: { - uri: uri, - }, - }); - } else { - open(uri); - } - } - - // region user feedbacks - static notify(message: string, duration?: number) { - this.request({ - namespace: PLUGIN_SDK_NS_NOTIFY_API, - key: PLUGIN_SDK_EK_SIMPLE_NOTIFY, - data: { - message: message, - duration: duration, - }, - }); - } - - static notifyCopied() { - this.notify("Copied to clipboard", 1); - } - - static focus(target: string, zoom?: number) { - this.request({ - namespace: PLUGIN_SDK_NS_FOCUS_API, - key: PLUGIN_SDK_EK_SIMPLE_FOCUS, - data: { - target: target, - zoom: zoom, - }, - }); - } - - // endregion user feedbacks - - // region canvas - static async dropOnCanvas(data: DragAndDropOnCanvasRequest) { - return await this.request({ - namespace: PLUGIN_SDK_NS_DRAG_AND_DROP, - key: PLUGIN_SDK_EK_DRAG_AND_DROPPED, - data: data, - }); - } - // endregion canvas - - static postMessage(event: TransportPluginEvent) { - // console.log("::plugin-sdk post message", event); - PluginSdk.window.postMessage( - { - pluginMessage: event, - }, - "*" - ); - } - - static promises: Map = new Map(); - - static request(event: BasePluginEvent): Promise { - // make id - const requestId = this.makeRequetsId(event.key); - - return new Promise((resolve, reject) => { - // register to event / response que - this.registerToEventQue(requestId, resolve, reject); - - // post message after registration is complete. - this.postMessage({ - type: "request", - origin: "app", - ...event, - id: requestId, - }); - }); - } - - private static makeRequetsId(key: string): string { - return `${key}-${reqid()}`; - } - - private static registerToEventQue(requestId: string, resolve, reject) { - this.promises.set(requestId, { - resolve: resolve, - reject: reject, - }); - } - - private static removeFromEventQue(requestId: string) { - this.promises.delete(requestId); - } - - static handle(event: TransportPluginEvent) { - if (event.type == "response") { - this.handleResponse(event); - } - } - - private static handleResponse(event: TransportPluginEvent) { - const promise = this.promises.get(event.id); - if (!promise) { - throw `no promise found to handle from event que with id ${ - event.id - } current promises are.. ${[...this.promises.keys()]}`; - } - - if (event.error) { - promise.reject(event.error); - } else { - promise.resolve(event.data); - } - - // remove resolved promise from que - this.removeFromEventQue(event.id); - } - - /** - * raises custom app event/request - * see PluginSdkService#onAppRequest for more detail - */ - static appEvent(key: string, data: any) { - this.request({ - namespace: PLUGIN_SDK_NS_APP_REQUEST_CUSTOM_ALL, - key: key, - data: data, - }); - } -} +export { PluginSdk } from "./plugin-sdk"; +export { NodeApi } from "./node-api"; diff --git a/packages/plugin-sdk-app/node-api.ts b/packages/plugin-sdk-app/node-api.ts new file mode 100644 index 00000000..deb27f51 --- /dev/null +++ b/packages/plugin-sdk-app/node-api.ts @@ -0,0 +1,55 @@ +import { request } from "./request"; +import { + PLUGIN_SDK_NS_GET_NODE, + PLUGIN_SDK_EK_REQUEST_GET_NODE_BY_ID, +} from "@plugin-sdk/core"; +export class NodeApi { + constructor(private readonly id: string) {} + + async get(): Promise<{ + id: string; + name: string; + x: number; + y: number; + type: string; + width: number; + height: number; + }> { + return await request({ + namespace: PLUGIN_SDK_NS_GET_NODE, + key: PLUGIN_SDK_EK_REQUEST_GET_NODE_BY_ID, + data: { id: this.id }, + }); + } + + async resize(p: { + width: number; + height: number; + options?: { + withoutConstraints: boolean; + }; + }) { + // + } + + async rescale(p: { scale: number }) { + // + } + + async remove() { + // + } + + async getPluginData(p?: { shared?: boolean }) { + // + return ""; + } + + async setPluginData(p?: { shared?: boolean }) { + // + } + + A() { + // (figma.getNodeById("") as SceneNode). + } +} diff --git a/packages/plugin-sdk-app/plugin-sdk.ts b/packages/plugin-sdk-app/plugin-sdk.ts new file mode 100644 index 00000000..e70e21c0 --- /dev/null +++ b/packages/plugin-sdk-app/plugin-sdk.ts @@ -0,0 +1,397 @@ +import { + BasePluginEvent, + PLUGIN_SDK_EK_DRAG_AND_DROPPED, + PLUGIN_SDK_EK_REQUEST_FETCH_NODE_MAIN_COMPONENT_LAYER_META, + PLUGIN_SDK_EK_REQUEST_FETCH_NODE_MAIN_COMPONENT_META, + PLUGIN_SDK_EK_REQUEST_FETCH_NODE_META, + PLUGIN_SDK_EK_REQUEST_FETCH_ROOT_META, + PLUGIN_SDK_EK_SIMPLE_NOTIFY, + PLUGIN_SDK_NS_APP_REQUEST_CUSTOM_ALL, + PLUGIN_SDK_NS_DRAG_AND_DROP, + PLUGIN_SDK_NS_META_API, + PLUGIN_SDK_NS_NOTIFY_API, + PUGIN_SDK_EK_REQUEST_UPDATE_MAIN_COMPONENT_META, + PUGIN_SDK_EK_REQUEST_UPDATE_NODE_META, + PLUGIN_SDK_NS_STORAGE, + PLUGIN_SDK_EK_STORAGE_ALIAS, + TransportPluginEvent, + reqid, + BatchMetaFetchRequest, + NodeMetaFetchRequest, + NodeMetaUpdateRequest, + StorageSetItemRequest, + StorageGetItemRequest, + StorageGetItemResponse, + NotifyRequest, + DragAndDropOnCanvasRequest, + PLUGIN_SDK_NS_FOCUS_API, + PLUGIN_SDK_EK_SIMPLE_FOCUS, + FocusRequest, + PLUGIN_SDK_NS_BROWSER_API, + PLUGIN_SDK_EK_BROWSER_OPEN_URI, + PLUGIN_SDK_NS_EXPORT_AS_IMAGE, + PLUGIN_SDK_EK_REQUEST_EXPORT_AS_IMAGE, + ImageExportRequest, + ImageExportResponse, + target_platform, + TargetPlatform, +} from "@plugin-sdk/core"; +import type { ReflectSceneNode } from "@design-sdk/core/nodes"; +import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "@core/constant"; + +import { _SharedStorageCache } from "./_shared-storage-cache"; +import { NodeApi } from "./node-api"; +import { request } from "./request"; + +const __main_plugin_sdk_instance_storage_cache = new _SharedStorageCache( + "co.grida.assistant" +); + +export class PluginSdk { + private static _window: Window; + static get window(): Window { + return this._window; + } + static initializeWindow(window: Window) { + this._window = window; + } + + /** + * this only sets TARGET_PLATFORM on ui thread. + * @param platform + */ + static async initializeTargetPlatform(platform: TargetPlatform) { + if (!!target_platform.get()) { + throw "cannot overwrite target platform on runtime."; + } + + target_platform.set(platform); + if (platform == TargetPlatform.webdev) { + return true; + } + + // sync this to code side. + await PluginSdk.request({ + namespace: "__INTERNAL__", + key: "sync-target-platform", + data: platform, + }); + // console.info(`thread#ui: target platform set as ${platform}`); + } + + // region general canvas api + static get selectedNodeIds(): readonly string[] { + throw "not implemented"; + return []; + } + + static get selectedNodes(): readonly ReflectSceneNode[] { + throw "not implemented"; + return []; + } + + static get selectedNodeId(): string { + // TODO + throw "not implemented"; + return undefined; + } + + static get selectedNode(): ReflectSceneNode { + // TODO + throw "not implemented"; + return undefined; + } + + static async getNode(id: string) { + return new NodeApi(id).get(); + } + + static node(id: string): NodeApi { + return new NodeApi(id); + } + + static async getNodeImage( + req: ImageExportRequest + ): Promise { + return await this.request({ + namespace: PLUGIN_SDK_NS_EXPORT_AS_IMAGE, + key: PLUGIN_SDK_EK_REQUEST_EXPORT_AS_IMAGE, + data: req, + }); + } + + // enderegion general canvas api + + // region network api + static get(params: any) { + throw "not implmtd"; + } + + static post(params: any) { + throw "not implmtd"; + } + + // endregion network api + + // + // region storage api + static setItem(key: string, value: T) { + __main_plugin_sdk_instance_storage_cache.setCache( + key, + value + ); /* 1. set cache */ + + /* 2. send set request */ + this.request({ + namespace: PLUGIN_SDK_NS_STORAGE, + key: PLUGIN_SDK_EK_STORAGE_ALIAS.set, + data: >{ + type: "set-item", + key: key, + value: value, + }, + }).finally(() => { + __main_plugin_sdk_instance_storage_cache.removeCache( + key + ); /* 3. remove cache after saving complete */ + }); + } + + static async getItem(key: string): Promise { + const _has_cached = __main_plugin_sdk_instance_storage_cache.hasCache(key); + if (_has_cached) { + return __main_plugin_sdk_instance_storage_cache.getCache(key); + } else { + const _resp = await this.request>({ + namespace: PLUGIN_SDK_NS_STORAGE, + key: PLUGIN_SDK_EK_STORAGE_ALIAS.get, + data: >{ + type: "get-item", + key: key, + }, + }); + return _resp.value; + } + } + + // endregion storage api + // + + // + // region metadata + static updateMetadata(request: NodeMetaUpdateRequest) { + return this.request({ + namespace: PLUGIN_SDK_NS_META_API, + key: PUGIN_SDK_EK_REQUEST_UPDATE_NODE_META, + data: request, + }); + } + + /** + * fetches the metadata with grida default namespace provided. + */ + static async fetchMetadata_grida( + on: string, + key: string + ): Promise { + return this.fetchMetadata({ + id: on, + key: key, + namespace: ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE, + }); + } + + static async fetchMetadata( + request: NodeMetaFetchRequest + ): Promise { + return this.request({ + namespace: PLUGIN_SDK_NS_META_API, + key: PLUGIN_SDK_EK_REQUEST_FETCH_NODE_META, + data: request, + }); + } + + /** + * fetches the master component metadata no matter the input id (node id) was id of master component or a instance. + * when instance id was givven it will automatically locate master component to set the metadata + * @param request + * @returns + */ + static async fetchMainComponentMetadata(request: NodeMetaFetchRequest) { + return this.request({ + namespace: PLUGIN_SDK_NS_META_API, + key: PLUGIN_SDK_EK_REQUEST_FETCH_NODE_MAIN_COMPONENT_META, + data: request, + }); + } + + /** + * fetches the master component's layer corresponding to givven id. works similar like "fetchMainComponentMetadata" + */ + static async fetchMainComponentLayerMetadata(request: NodeMetaFetchRequest) { + throw "not implemented on handler side"; + return this.request({ + namespace: PLUGIN_SDK_NS_META_API, + key: PLUGIN_SDK_EK_REQUEST_FETCH_NODE_MAIN_COMPONENT_LAYER_META, + data: request, + }); + } + + /** + * updates the main component's meta data. + * (this also works for a variant compat component, + * but it does't save on variant set's meta, + * intead saves on master component of single variant. + * - so you'll need to prevent using this on some case to prevent future confusion) + * @param request + * @returns + */ + static async updateMainComponentMetadata(request: NodeMetaUpdateRequest) { + return this.request({ + namespace: PLUGIN_SDK_NS_META_API, + key: PUGIN_SDK_EK_REQUEST_UPDATE_MAIN_COMPONENT_META, + data: request, + }); + } + + static fetchRootMetadata(key: string): Promise { + const data: BatchMetaFetchRequest = { + key: key, + }; + return this.request({ + namespace: PLUGIN_SDK_NS_META_API, + key: PLUGIN_SDK_EK_REQUEST_FETCH_ROOT_META, + data: data, + }); + } + + // endregion metadata + + /** + * inner iframe blocked js functions + * this is designed to be used inside iframe that has no popup permission, so that calling open() in inner iframe won't work. + * But we can simply allow popups for inner iframe, so we don't have to use this function. + * this function does not check if this is being called inside a popup-blocked iframe. + * + * @deprecated use allow-popup & open instead. + **/ + static openUri(uri: string) { + if (process.env.HOSTED ?? process.env.NEXT_PUBLIC_HOSTED) { + this.request({ + namespace: PLUGIN_SDK_NS_BROWSER_API, + key: PLUGIN_SDK_EK_BROWSER_OPEN_URI, + data: { + uri: uri, + }, + }); + } else { + open(uri); + } + } + + // region user feedbacks + static notify(message: string, duration?: number) { + this.request({ + namespace: PLUGIN_SDK_NS_NOTIFY_API, + key: PLUGIN_SDK_EK_SIMPLE_NOTIFY, + data: { + message: message, + duration: duration, + }, + }); + } + + static notifyCopied() { + this.notify("Copied to clipboard", 1); + } + + static focus(target: string, zoom?: number) { + this.request({ + namespace: PLUGIN_SDK_NS_FOCUS_API, + key: PLUGIN_SDK_EK_SIMPLE_FOCUS, + data: { + target: target, + zoom: zoom, + }, + }); + } + + // endregion user feedbacks + + // region canvas + static async dropOnCanvas(data: DragAndDropOnCanvasRequest) { + return await this.request({ + namespace: PLUGIN_SDK_NS_DRAG_AND_DROP, + key: PLUGIN_SDK_EK_DRAG_AND_DROPPED, + data: data, + }); + } + // endregion canvas + + static postMessage(event: TransportPluginEvent) { + // console.log("::plugin-sdk post message", event); + PluginSdk.window.postMessage( + { + pluginMessage: event, + }, + "*" + ); + } + + static promises: Map = new Map(); + + static request(event: BasePluginEvent): Promise { + return request(event); + } + + private static makeRequetsId(key: string): string { + return `${key}-${reqid()}`; + } + + private static registerToEventQue(requestId: string, resolve, reject) { + this.promises.set(requestId, { + resolve: resolve, + reject: reject, + }); + } + + private static removeFromEventQue(requestId: string) { + this.promises.delete(requestId); + } + + static handle(event: TransportPluginEvent) { + if (event.type == "response") { + this.handleResponse(event); + } + } + + private static handleResponse(event: TransportPluginEvent) { + const promise = this.promises.get(event.id); + if (!promise) { + throw `no promise found to handle from event que with id ${ + event.id + } current promises are.. ${[...this.promises.keys()]}`; + } + + if (event.error) { + promise.reject(event.error); + } else { + promise.resolve(event.data); + } + + // remove resolved promise from que + this.removeFromEventQue(event.id); + } + + /** + * raises custom app event/request + * see PluginSdkService#onAppRequest for more detail + */ + static appEvent(key: string, data: any) { + this.request({ + namespace: PLUGIN_SDK_NS_APP_REQUEST_CUSTOM_ALL, + key: key, + data: data, + }); + } +} diff --git a/packages/plugin-sdk-app/request.ts b/packages/plugin-sdk-app/request.ts new file mode 100644 index 00000000..28dfba41 --- /dev/null +++ b/packages/plugin-sdk-app/request.ts @@ -0,0 +1,19 @@ +import { BasePluginEvent } from "@plugin-sdk/core"; + +export function request(event: BasePluginEvent): Promise { + // make id + const requestId = this.makeRequetsId(event.key); + + return new Promise((resolve, reject) => { + // register to event / response que + this.registerToEventQue(requestId, resolve, reject); + + // post message after registration is complete. + this.postMessage({ + type: "request", + origin: "app", + ...event, + id: requestId, + }); + }); +} diff --git a/packages/plugin-sdk-core/events.ts b/packages/plugin-sdk-core/events.ts index 5efdc01d..a762312f 100644 --- a/packages/plugin-sdk-core/events.ts +++ b/packages/plugin-sdk-core/events.ts @@ -39,6 +39,16 @@ export const PLUGIN_SDK_NS_GET_NODE = `${__PLUGIN_SDK_NAMESPACE_BASE_TOKEN}/get- export const PLUGIN_SDK_EK_REQUEST_GET_NODE_BY_ID = "assistant/node/get/by-id"; // endregion node read +// region node access +export const PLUGIN_SDK_NS_NODE = `${__PLUGIN_SDK_NAMESPACE_BASE_TOKEN}/node`; +export const PLUGIN_SDK_EK_REQUEST_RESCALE_NODE_BY_ID = + "assistant/node/rescale/by-id"; +export const PLUGIN_SDK_EK_REQUEST_RESIZE_NODE_BY_ID = + "assistant/node/resize/by-id"; +export const PLUGIN_SDK_EK_REQUEST_REMOVE_NODE_BY_ID = + "assistant/node/remove/by-id"; +// endregion node access + // region storage export const PLUGIN_SDK_NS_STORAGE = `${__PLUGIN_SDK_NAMESPACE_BASE_TOKEN}/storage`; export const PLUGIN_SDK_EK_REQUEST_STORAGE_SET_ITEM = From abc2d719b2c3878f86de543a6d8b508ec7085b89 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 31 Aug 2021 15:25:20 +0900 Subject: [PATCH 006/246] bump dependencies for coli interface builder use --- figma-core/code-thread/runon.ts | 2 +- package.json | 2 +- packages/design-sdk | 2 +- packages/design-to-code | 2 +- packages/reflect-core | 2 +- yarn.lock | 597 +++++++++++++++++++++++++++++++- 6 files changed, 601 insertions(+), 6 deletions(-) diff --git a/figma-core/code-thread/runon.ts b/figma-core/code-thread/runon.ts index 8f359dde..7086644a 100644 --- a/figma-core/code-thread/runon.ts +++ b/figma-core/code-thread/runon.ts @@ -3,7 +3,7 @@ import { EK_IMAGE_ASSET_REPOSITORY_MAP, EK_VANILLA_TRANSPORT, } from "@core/constant/ek.constant"; -import { vanilla } from "@design-sdk/core"; +import * as vanilla from "@design-sdk/vanilla"; import { ReflectFrameNode, ReflectSceneNode } from "@design-sdk/core/nodes"; import { user_interest } from "./user-interest"; import { broadcastSelectionPreview } from "./broadcast-selection-preview"; diff --git a/package.json b/package.json index a935359e..7056302d 100644 --- a/package.json +++ b/package.json @@ -21,7 +21,7 @@ "packages/base-sdk/_firstparty/*", "packages/reflect-core/packages/*", "packages/design-to-code/packages/designto-*", - "packages/design-to-code/packages/builder-config", + "packages/design-to-code/packages/builder-*", "packages/design-to-code/packages/coli/packages/*", "packages/design-to-code/packages/coli-web-builder/*", "packages/design-to-code/packages/reflect-detection" diff --git a/packages/design-sdk b/packages/design-sdk index 55c6e85f..2d523989 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit 55c6e85f10e43a5dda893ebb3edfb47bc8220463 +Subproject commit 2d52398964fdad7519556e8e41cee640b5f71fde diff --git a/packages/design-to-code b/packages/design-to-code index 9826a17b..fefc2590 160000 --- a/packages/design-to-code +++ b/packages/design-to-code @@ -1 +1 @@ -Subproject commit 9826a17b02f8d000fe09a3f7c054286ff723dfe9 +Subproject commit fefc2590281ebd8fd25ceb88cb229517d1dc81fa diff --git a/packages/reflect-core b/packages/reflect-core index 91342a7a..9c9bded5 160000 --- a/packages/reflect-core +++ b/packages/reflect-core @@ -1 +1 @@ -Subproject commit 91342a7a4fdc5ea1b9667b9a015351748b5c4450 +Subproject commit 9c9bded514fa046c44746bccc2e4268a1b17cfe2 diff --git a/yarn.lock b/yarn.lock index 0e5c0d42..ce92e43e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1055,6 +1055,11 @@ "@tippyjs/react" "^4.2.5" handlebars "^4.7.7" +"@design-sdk/figma-remote-api@0.0.0": + version "0.0.0" + resolved "https://registry.yarnpkg.com/@design-sdk/figma-remote-api/-/figma-remote-api-0.0.0.tgz#c1937575bbf824ca8fc45141db5327dd98d789ff" + integrity sha512-AA+LelJSudE2fEIvrecgcc7nmXTeRZy8WEdqhqZV4SuvgqZUH8i+t2m3dw/L/NmbxxdduRmltzTuX78MxwGntA== + "@design-sdk/figma-url@0.0.2": version "0.0.2" resolved "https://registry.yarnpkg.com/@design-sdk/figma-url/-/figma-url-0.0.2.tgz#6cdac717440def04f419efea080f95dae23e9d6f" @@ -1475,6 +1480,18 @@ jest-util "^27.0.6" slash "^3.0.0" +"@jest/console@^27.1.0": + version "27.1.0" + resolved "https://registry.yarnpkg.com/@jest/console/-/console-27.1.0.tgz#de13b603cb1d389b50c0dc6296e86e112381e43c" + integrity sha512-+Vl+xmLwAXLNlqT61gmHEixeRbS4L8MUzAjtpBCOPWH+izNI/dR16IeXjkXJdRtIVWVSf9DO1gdp67B1XorZhQ== + dependencies: + "@jest/types" "^27.1.0" + "@types/node" "*" + chalk "^4.0.0" + jest-message-util "^27.1.0" + jest-util "^27.1.0" + slash "^3.0.0" + "@jest/core@^27.0.6": version "27.0.6" resolved "https://registry.yarnpkg.com/@jest/core/-/core-27.0.6.tgz#c5f642727a0b3bf0f37c4b46c675372d0978d4a1" @@ -1510,6 +1527,41 @@ slash "^3.0.0" strip-ansi "^6.0.0" +"@jest/core@^27.1.0": + version "27.1.0" + resolved "https://registry.yarnpkg.com/@jest/core/-/core-27.1.0.tgz#622220f18032f5869e579cecbe744527238648bf" + integrity sha512-3l9qmoknrlCFKfGdrmiQiPne+pUR4ALhKwFTYyOeKw6egfDwJkO21RJ1xf41rN8ZNFLg5W+w6+P4fUqq4EMRWA== + dependencies: + "@jest/console" "^27.1.0" + "@jest/reporters" "^27.1.0" + "@jest/test-result" "^27.1.0" + "@jest/transform" "^27.1.0" + "@jest/types" "^27.1.0" + "@types/node" "*" + ansi-escapes "^4.2.1" + chalk "^4.0.0" + emittery "^0.8.1" + exit "^0.1.2" + graceful-fs "^4.2.4" + jest-changed-files "^27.1.0" + jest-config "^27.1.0" + jest-haste-map "^27.1.0" + jest-message-util "^27.1.0" + jest-regex-util "^27.0.6" + jest-resolve "^27.1.0" + jest-resolve-dependencies "^27.1.0" + jest-runner "^27.1.0" + jest-runtime "^27.1.0" + jest-snapshot "^27.1.0" + jest-util "^27.1.0" + jest-validate "^27.1.0" + jest-watcher "^27.1.0" + micromatch "^4.0.4" + p-each-series "^2.1.0" + rimraf "^3.0.0" + slash "^3.0.0" + strip-ansi "^6.0.0" + "@jest/environment@^27.0.6": version "27.0.6" resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-27.0.6.tgz#ee293fe996db01d7d663b8108fa0e1ff436219d2" @@ -1520,6 +1572,16 @@ "@types/node" "*" jest-mock "^27.0.6" +"@jest/environment@^27.1.0": + version "27.1.0" + resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-27.1.0.tgz#c7224a67004759ec203d8fa44e8bc0db93f66c44" + integrity sha512-wRp50aAMY2w1U2jP1G32d6FUVBNYqmk8WaGkiIEisU48qyDV0WPtw3IBLnl7orBeggveommAkuijY+RzVnNDOQ== + dependencies: + "@jest/fake-timers" "^27.1.0" + "@jest/types" "^27.1.0" + "@types/node" "*" + jest-mock "^27.1.0" + "@jest/fake-timers@^27.0.6": version "27.0.6" resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-27.0.6.tgz#cbad52f3fe6abe30e7acb8cd5fa3466b9588e3df" @@ -1532,6 +1594,18 @@ jest-mock "^27.0.6" jest-util "^27.0.6" +"@jest/fake-timers@^27.1.0": + version "27.1.0" + resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-27.1.0.tgz#c0b343d8a16af17eab2cb6862e319947c0ea2abe" + integrity sha512-22Zyn8il8DzpS+30jJNVbTlm7vAtnfy1aYvNeOEHloMlGy1PCYLHa4PWlSws0hvNsMM5bON6GISjkLoQUV3oMA== + dependencies: + "@jest/types" "^27.1.0" + "@sinonjs/fake-timers" "^7.0.2" + "@types/node" "*" + jest-message-util "^27.1.0" + jest-mock "^27.1.0" + jest-util "^27.1.0" + "@jest/globals@^27.0.6": version "27.0.6" resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-27.0.6.tgz#48e3903f99a4650673d8657334d13c9caf0e8f82" @@ -1541,6 +1615,15 @@ "@jest/types" "^27.0.6" expect "^27.0.6" +"@jest/globals@^27.1.0": + version "27.1.0" + resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-27.1.0.tgz#e093a49c718dd678a782c197757775534c88d3f2" + integrity sha512-73vLV4aNHAlAgjk0/QcSIzzCZSqVIPbmFROJJv9D3QUR7BI4f517gVdJpSrCHxuRH3VZFhe0yGG/tmttlMll9g== + dependencies: + "@jest/environment" "^27.1.0" + "@jest/types" "^27.1.0" + expect "^27.1.0" + "@jest/reporters@^27.0.6": version "27.0.6" resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-27.0.6.tgz#91e7f2d98c002ad5df94d5b5167c1eb0b9fd5b00" @@ -1571,6 +1654,36 @@ terminal-link "^2.0.0" v8-to-istanbul "^8.0.0" +"@jest/reporters@^27.1.0": + version "27.1.0" + resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-27.1.0.tgz#02ed1e6601552c2f6447378533f77aad002781d4" + integrity sha512-5T/zlPkN2HnK3Sboeg64L5eC8iiaZueLpttdktWTJsvALEtP2YMkC5BQxwjRWQACG9SwDmz+XjjkoxXUDMDgdw== + dependencies: + "@bcoe/v8-coverage" "^0.2.3" + "@jest/console" "^27.1.0" + "@jest/test-result" "^27.1.0" + "@jest/transform" "^27.1.0" + "@jest/types" "^27.1.0" + chalk "^4.0.0" + collect-v8-coverage "^1.0.0" + exit "^0.1.2" + glob "^7.1.2" + graceful-fs "^4.2.4" + istanbul-lib-coverage "^3.0.0" + istanbul-lib-instrument "^4.0.3" + istanbul-lib-report "^3.0.0" + istanbul-lib-source-maps "^4.0.0" + istanbul-reports "^3.0.2" + jest-haste-map "^27.1.0" + jest-resolve "^27.1.0" + jest-util "^27.1.0" + jest-worker "^27.1.0" + slash "^3.0.0" + source-map "^0.6.0" + string-length "^4.0.1" + terminal-link "^2.0.0" + v8-to-istanbul "^8.0.0" + "@jest/source-map@^27.0.6": version "27.0.6" resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-27.0.6.tgz#be9e9b93565d49b0548b86e232092491fb60551f" @@ -1590,6 +1703,16 @@ "@types/istanbul-lib-coverage" "^2.0.0" collect-v8-coverage "^1.0.0" +"@jest/test-result@^27.1.0": + version "27.1.0" + resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-27.1.0.tgz#9345ae5f97f6a5287af9ebd54716cd84331d42e8" + integrity sha512-Aoz00gpDL528ODLghat3QSy6UBTD5EmmpjrhZZMK/v1Q2/rRRqTGnFxHuEkrD4z/Py96ZdOHxIWkkCKRpmnE1A== + dependencies: + "@jest/console" "^27.1.0" + "@jest/types" "^27.1.0" + "@types/istanbul-lib-coverage" "^2.0.0" + collect-v8-coverage "^1.0.0" + "@jest/test-sequencer@^27.0.6": version "27.0.6" resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-27.0.6.tgz#80a913ed7a1130545b1cd777ff2735dd3af5d34b" @@ -1600,6 +1723,16 @@ jest-haste-map "^27.0.6" jest-runtime "^27.0.6" +"@jest/test-sequencer@^27.1.0": + version "27.1.0" + resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-27.1.0.tgz#04e8b3bd735570d3d48865e74977a14dc99bff2d" + integrity sha512-lnCWawDr6Z1DAAK9l25o3AjmKGgcutq1iIbp+hC10s/HxnB8ZkUsYq1FzjOoxxZ5hW+1+AthBtvS4x9yno3V1A== + dependencies: + "@jest/test-result" "^27.1.0" + graceful-fs "^4.2.4" + jest-haste-map "^27.1.0" + jest-runtime "^27.1.0" + "@jest/transform@^27.0.6": version "27.0.6" resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-27.0.6.tgz#189ad7107413208f7600f4719f81dd2f7278cc95" @@ -1621,6 +1754,27 @@ source-map "^0.6.1" write-file-atomic "^3.0.0" +"@jest/transform@^27.1.0": + version "27.1.0" + resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-27.1.0.tgz#962e385517e3d1f62827fa39c305edcc3ca8544b" + integrity sha512-ZRGCA2ZEVJ00ubrhkTG87kyLbN6n55g1Ilq0X9nJb5bX3MhMp3O6M7KG+LvYu+nZRqG5cXsQnJEdZbdpTAV8pQ== + dependencies: + "@babel/core" "^7.1.0" + "@jest/types" "^27.1.0" + babel-plugin-istanbul "^6.0.0" + chalk "^4.0.0" + convert-source-map "^1.4.0" + fast-json-stable-stringify "^2.0.0" + graceful-fs "^4.2.4" + jest-haste-map "^27.1.0" + jest-regex-util "^27.0.6" + jest-util "^27.1.0" + micromatch "^4.0.4" + pirates "^4.0.1" + slash "^3.0.0" + source-map "^0.6.1" + write-file-atomic "^3.0.0" + "@jest/types@^26.6.2": version "26.6.2" resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.6.2.tgz#bef5a532030e1d88a2f5a6d933f84e97226ed48e" @@ -1643,6 +1797,17 @@ "@types/yargs" "^16.0.0" chalk "^4.0.0" +"@jest/types@^27.1.0": + version "27.1.0" + resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.1.0.tgz#674a40325eab23c857ebc0689e7e191a3c5b10cc" + integrity sha512-pRP5cLIzN7I7Vp6mHKRSaZD7YpBTK7hawx5si8trMKqk4+WOdK8NEKOTO2G8PKWD1HbKMVckVB6/XHh/olhf2g== + dependencies: + "@types/istanbul-lib-coverage" "^2.0.0" + "@types/istanbul-reports" "^3.0.0" + "@types/node" "*" + "@types/yargs" "^16.0.0" + chalk "^4.0.0" + "@material-ui/core@^4.11.0": version "4.12.3" resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.3.tgz#80d665caf0f1f034e52355c5450c0e38b099d3ca" @@ -2114,6 +2279,14 @@ jest-diff "^26.0.0" pretty-format "^26.0.0" +"@types/jest@^27.0.1": + version "27.0.1" + resolved "https://registry.yarnpkg.com/@types/jest/-/jest-27.0.1.tgz#fafcc997da0135865311bb1215ba16dba6bdf4ca" + integrity sha512-HTLpVXHrY69556ozYkcq47TtQJXpcWAWfkoqz+ZGz2JnmZhzlRjprCIyFnetSy8gpDWwTTGBcRVv1J1I1vBrHw== + dependencies: + jest-diff "^27.0.0" + pretty-format "^27.0.0" + "@types/json-schema@^7.0.5", "@types/json-schema@^7.0.8": version "7.0.9" resolved "https://registry.yarnpkg.com/@types/json-schema/-/json-schema-7.0.9.tgz#97edc9037ea0c38585320b28964dde3b39e4660d" @@ -2754,6 +2927,20 @@ babel-jest@^27.0.6: graceful-fs "^4.2.4" slash "^3.0.0" +babel-jest@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-27.1.0.tgz#e96ca04554fd32274439869e2b6d24de9d91bc4e" + integrity sha512-6NrdqzaYemALGCuR97QkC/FkFIEBWP5pw5TMJoUHZTVXyOgocujp6A0JE2V6gE0HtqAAv6VKU/nI+OCR1Z4gHA== + dependencies: + "@jest/transform" "^27.1.0" + "@jest/types" "^27.1.0" + "@types/babel__core" "^7.1.14" + babel-plugin-istanbul "^6.0.0" + babel-preset-jest "^27.0.6" + chalk "^4.0.0" + graceful-fs "^4.2.4" + slash "^3.0.0" + babel-loader@^8.0.5, babel-loader@^8.2.2: version "8.2.2" resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.2.tgz#9363ce84c10c9a40e6c753748e1441b60c8a0b81" @@ -4343,6 +4530,18 @@ expect@^27.0.6: jest-message-util "^27.0.6" jest-regex-util "^27.0.6" +expect@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/expect/-/expect-27.1.0.tgz#380de0abb3a8f2299c4c6c66bbe930483b5dba9b" + integrity sha512-9kJngV5hOJgkFil4F/uXm3hVBubUK2nERVfvqNNwxxuW8ZOUwSTTSysgfzckYtv/LBzj/LJXbiAF7okHCXgdug== + dependencies: + "@jest/types" "^27.1.0" + ansi-styles "^5.0.0" + jest-get-type "^27.0.6" + jest-matcher-utils "^27.1.0" + jest-message-util "^27.1.0" + jest-regex-util "^27.0.6" + extend-shallow@^2.0.1: version "2.0.1" resolved "https://registry.yarnpkg.com/extend-shallow/-/extend-shallow-2.0.1.tgz#51af7d614ad9a9f610ea1bafbb989d6b1c56890f" @@ -5581,6 +5780,15 @@ jest-changed-files@^27.0.6: execa "^5.0.0" throat "^6.0.1" +jest-changed-files@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-27.1.0.tgz#42da6ea00f06274172745729d55f42b60a9dffe0" + integrity sha512-eRcb13TfQw0xiV2E98EmiEgs9a5uaBIqJChyl0G7jR9fCIvGjXovnDS6Zbku3joij4tXYcSK4SE1AXqOlUxjWg== + dependencies: + "@jest/types" "^27.1.0" + execa "^5.0.0" + throat "^6.0.1" + jest-circus@^27.0.6: version "27.0.6" resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-27.0.6.tgz#dd4df17c4697db6a2c232aaad4e9cec666926668" @@ -5606,6 +5814,31 @@ jest-circus@^27.0.6: stack-utils "^2.0.3" throat "^6.0.1" +jest-circus@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-27.1.0.tgz#24c280c90a625ea57da20ee231d25b1621979a57" + integrity sha512-6FWtHs3nZyZlMBhRf1wvAC5CirnflbGJAY1xssSAnERLiiXQRH+wY2ptBVtXjX4gz4AA2EwRV57b038LmifRbA== + dependencies: + "@jest/environment" "^27.1.0" + "@jest/test-result" "^27.1.0" + "@jest/types" "^27.1.0" + "@types/node" "*" + chalk "^4.0.0" + co "^4.6.0" + dedent "^0.7.0" + expect "^27.1.0" + is-generator-fn "^2.0.0" + jest-each "^27.1.0" + jest-matcher-utils "^27.1.0" + jest-message-util "^27.1.0" + jest-runtime "^27.1.0" + jest-snapshot "^27.1.0" + jest-util "^27.1.0" + pretty-format "^27.1.0" + slash "^3.0.0" + stack-utils "^2.0.3" + throat "^6.0.1" + jest-cli@^27.0.6: version "27.0.6" resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-27.0.6.tgz#d021e5f4d86d6a212450d4c7b86cb219f1e6864f" @@ -5624,6 +5857,24 @@ jest-cli@^27.0.6: prompts "^2.0.1" yargs "^16.0.3" +jest-cli@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-27.1.0.tgz#118438e4d11cf6fb66cb2b2eb5778817eab3daeb" + integrity sha512-h6zPUOUu+6oLDrXz0yOWY2YXvBLk8gQinx4HbZ7SF4V3HzasQf+ncoIbKENUMwXyf54/6dBkYXvXJos+gOHYZw== + dependencies: + "@jest/core" "^27.1.0" + "@jest/test-result" "^27.1.0" + "@jest/types" "^27.1.0" + chalk "^4.0.0" + exit "^0.1.2" + graceful-fs "^4.2.4" + import-local "^3.0.2" + jest-config "^27.1.0" + jest-util "^27.1.0" + jest-validate "^27.1.0" + prompts "^2.0.1" + yargs "^16.0.3" + jest-config@^27.0.6: version "27.0.6" resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-27.0.6.tgz#119fb10f149ba63d9c50621baa4f1f179500277f" @@ -5651,6 +5902,33 @@ jest-config@^27.0.6: micromatch "^4.0.4" pretty-format "^27.0.6" +jest-config@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-27.1.0.tgz#e6826e2baaa34c07c3839af86466870e339d9ada" + integrity sha512-GMo7f76vMYUA3b3xOdlcKeKQhKcBIgurjERO2hojo0eLkKPGcw7fyIoanH+m6KOP2bLad+fGnF8aWOJYxzNPeg== + dependencies: + "@babel/core" "^7.1.0" + "@jest/test-sequencer" "^27.1.0" + "@jest/types" "^27.1.0" + babel-jest "^27.1.0" + chalk "^4.0.0" + deepmerge "^4.2.2" + glob "^7.1.1" + graceful-fs "^4.2.4" + is-ci "^3.0.0" + jest-circus "^27.1.0" + jest-environment-jsdom "^27.1.0" + jest-environment-node "^27.1.0" + jest-get-type "^27.0.6" + jest-jasmine2 "^27.1.0" + jest-regex-util "^27.0.6" + jest-resolve "^27.1.0" + jest-runner "^27.1.0" + jest-util "^27.1.0" + jest-validate "^27.1.0" + micromatch "^4.0.4" + pretty-format "^27.1.0" + jest-diff@^26.0.0: version "26.6.2" resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.6.2.tgz#1aa7468b52c3a68d7d5c5fdcdfcd5e49bd164394" @@ -5661,6 +5939,16 @@ jest-diff@^26.0.0: jest-get-type "^26.3.0" pretty-format "^26.6.2" +jest-diff@^27.0.0, jest-diff@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.1.0.tgz#c7033f25add95e2218f3c7f4c3d7b634ab6b3cd2" + integrity sha512-rjfopEYl58g/SZTsQFmspBODvMSytL16I+cirnScWTLkQVXYVZfxm78DFfdIIXc05RCYuGjxJqrdyG4PIFzcJg== + dependencies: + chalk "^4.0.0" + diff-sequences "^27.0.6" + jest-get-type "^27.0.6" + pretty-format "^27.1.0" + jest-diff@^27.0.6: version "27.0.6" resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.0.6.tgz#4a7a19ee6f04ad70e0e3388f35829394a44c7b5e" @@ -5689,6 +5977,17 @@ jest-each@^27.0.6: jest-util "^27.0.6" pretty-format "^27.0.6" +jest-each@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-27.1.0.tgz#36ac75f7aeecb3b8da2a8e617ccb30a446df408c" + integrity sha512-K/cNvQlmDqQMRHF8CaQ0XPzCfjP5HMJc2bIJglrIqI9fjwpNqITle63IWE+wq4p+3v+iBgh7Wq0IdGpLx5xjDg== + dependencies: + "@jest/types" "^27.1.0" + chalk "^4.0.0" + jest-get-type "^27.0.6" + jest-util "^27.1.0" + pretty-format "^27.1.0" + jest-environment-jsdom@^27.0.6: version "27.0.6" resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-27.0.6.tgz#f66426c4c9950807d0a9f209c590ce544f73291f" @@ -5702,6 +6001,19 @@ jest-environment-jsdom@^27.0.6: jest-util "^27.0.6" jsdom "^16.6.0" +jest-environment-jsdom@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-27.1.0.tgz#5fb3eb8a67e02e6cc623640388d5f90e33075f18" + integrity sha512-JbwOcOxh/HOtsj56ljeXQCUJr3ivnaIlM45F5NBezFLVYdT91N5UofB1ux2B1CATsQiudcHdgTaeuqGXJqjJYQ== + dependencies: + "@jest/environment" "^27.1.0" + "@jest/fake-timers" "^27.1.0" + "@jest/types" "^27.1.0" + "@types/node" "*" + jest-mock "^27.1.0" + jest-util "^27.1.0" + jsdom "^16.6.0" + jest-environment-node@^27.0.6: version "27.0.6" resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-27.0.6.tgz#a6699b7ceb52e8d68138b9808b0c404e505f3e07" @@ -5714,6 +6026,18 @@ jest-environment-node@^27.0.6: jest-mock "^27.0.6" jest-util "^27.0.6" +jest-environment-node@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-27.1.0.tgz#feea6b765f1fd4582284d4f1007df2b0a8d15b7f" + integrity sha512-JIyJ8H3wVyM4YCXp7njbjs0dIT87yhGlrXCXhDKNIg1OjurXr6X38yocnnbXvvNyqVTqSI4M9l+YfPKueqL1lw== + dependencies: + "@jest/environment" "^27.1.0" + "@jest/fake-timers" "^27.1.0" + "@jest/types" "^27.1.0" + "@types/node" "*" + jest-mock "^27.1.0" + jest-util "^27.1.0" + jest-get-type@^26.3.0: version "26.3.0" resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0" @@ -5744,6 +6068,26 @@ jest-haste-map@^27.0.6: optionalDependencies: fsevents "^2.3.2" +jest-haste-map@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-27.1.0.tgz#a39f456823bd6a74e3c86ad25f6fa870428326bf" + integrity sha512-7mz6LopSe+eA6cTFMf10OfLLqRoIPvmMyz5/OnSXnHO7hB0aDP1iIeLWCXzAcYU5eIJVpHr12Bk9yyq2fTW9vg== + dependencies: + "@jest/types" "^27.1.0" + "@types/graceful-fs" "^4.1.2" + "@types/node" "*" + anymatch "^3.0.3" + fb-watchman "^2.0.0" + graceful-fs "^4.2.4" + jest-regex-util "^27.0.6" + jest-serializer "^27.0.6" + jest-util "^27.1.0" + jest-worker "^27.1.0" + micromatch "^4.0.4" + walker "^1.0.7" + optionalDependencies: + fsevents "^2.3.2" + jest-jasmine2@^27.0.6: version "27.0.6" resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-27.0.6.tgz#fd509a9ed3d92bd6edb68a779f4738b100655b37" @@ -5768,6 +6112,30 @@ jest-jasmine2@^27.0.6: pretty-format "^27.0.6" throat "^6.0.1" +jest-jasmine2@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-27.1.0.tgz#324a3de0b2ee20d238b2b5b844acc4571331a206" + integrity sha512-Z/NIt0wBDg3przOW2FCWtYjMn3Ip68t0SL60agD/e67jlhTyV3PIF8IzT9ecwqFbeuUSO2OT8WeJgHcalDGFzQ== + dependencies: + "@babel/traverse" "^7.1.0" + "@jest/environment" "^27.1.0" + "@jest/source-map" "^27.0.6" + "@jest/test-result" "^27.1.0" + "@jest/types" "^27.1.0" + "@types/node" "*" + chalk "^4.0.0" + co "^4.6.0" + expect "^27.1.0" + is-generator-fn "^2.0.0" + jest-each "^27.1.0" + jest-matcher-utils "^27.1.0" + jest-message-util "^27.1.0" + jest-runtime "^27.1.0" + jest-snapshot "^27.1.0" + jest-util "^27.1.0" + pretty-format "^27.1.0" + throat "^6.0.1" + jest-leak-detector@^27.0.6: version "27.0.6" resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-27.0.6.tgz#545854275f85450d4ef4b8fe305ca2a26450450f" @@ -5776,6 +6144,14 @@ jest-leak-detector@^27.0.6: jest-get-type "^27.0.6" pretty-format "^27.0.6" +jest-leak-detector@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-27.1.0.tgz#fe7eb633c851e06280ec4dd248067fe232c00a79" + integrity sha512-oHvSkz1E80VyeTKBvZNnw576qU+cVqRXUD3/wKXh1zpaki47Qty2xeHg2HKie9Hqcd2l4XwircgNOWb/NiGqdA== + dependencies: + jest-get-type "^27.0.6" + pretty-format "^27.1.0" + jest-matcher-utils@^27.0.6: version "27.0.6" resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.0.6.tgz#2a8da1e86c620b39459f4352eaa255f0d43e39a9" @@ -5786,6 +6162,16 @@ jest-matcher-utils@^27.0.6: jest-get-type "^27.0.6" pretty-format "^27.0.6" +jest-matcher-utils@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.1.0.tgz#68afda0885db1f0b9472ce98dc4c535080785301" + integrity sha512-VmAudus2P6Yt/JVBRdTPFhUzlIN8DYJd+et5Rd9QDsO/Z82Z4iwGjo43U8Z+PTiz8CBvKvlb6Fh3oKy39hykkQ== + dependencies: + chalk "^4.0.0" + jest-diff "^27.1.0" + jest-get-type "^27.0.6" + pretty-format "^27.1.0" + jest-message-util@^27.0.6: version "27.0.6" resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-27.0.6.tgz#158bcdf4785706492d164a39abca6a14da5ab8b5" @@ -5801,6 +6187,21 @@ jest-message-util@^27.0.6: slash "^3.0.0" stack-utils "^2.0.3" +jest-message-util@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-27.1.0.tgz#e77692c84945d1d10ef00afdfd3d2c20bd8fb468" + integrity sha512-Eck8NFnJ5Sg36R9XguD65cf2D5+McC+NF5GIdEninoabcuoOfWrID5qJhufq5FB0DRKoiyxB61hS7MKoMD0trQ== + dependencies: + "@babel/code-frame" "^7.12.13" + "@jest/types" "^27.1.0" + "@types/stack-utils" "^2.0.0" + chalk "^4.0.0" + graceful-fs "^4.2.4" + micromatch "^4.0.4" + pretty-format "^27.1.0" + slash "^3.0.0" + stack-utils "^2.0.3" + jest-mock@^27.0.6: version "27.0.6" resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-27.0.6.tgz#0efdd40851398307ba16778728f6d34d583e3467" @@ -5809,6 +6210,14 @@ jest-mock@^27.0.6: "@jest/types" "^27.0.6" "@types/node" "*" +jest-mock@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-27.1.0.tgz#7ca6e4d09375c071661642d1c14c4711f3ab4b4f" + integrity sha512-iT3/Yhu7DwAg/0HvvLCqLvrTKTRMyJlrrfJYWzuLSf9RCAxBoIXN3HoymZxMnYsC3eD8ewGbUa9jUknwBenx2w== + dependencies: + "@jest/types" "^27.1.0" + "@types/node" "*" + jest-pnp-resolver@^1.2.2: version "1.2.2" resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c" @@ -5828,6 +6237,15 @@ jest-resolve-dependencies@^27.0.6: jest-regex-util "^27.0.6" jest-snapshot "^27.0.6" +jest-resolve-dependencies@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-27.1.0.tgz#d32ea4a2c82f76410f6157d0ec6cde24fbff2317" + integrity sha512-Kq5XuDAELuBnrERrjFYEzu/A+i2W7l9HnPWqZEeKGEQ7m1R+6ndMbdXCVCx29Se1qwLZLgvoXwinB3SPIaitMQ== + dependencies: + "@jest/types" "^27.1.0" + jest-regex-util "^27.0.6" + jest-snapshot "^27.1.0" + jest-resolve@^27.0.6: version "27.0.6" resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-27.0.6.tgz#e90f436dd4f8fbf53f58a91c42344864f8e55bff" @@ -5843,6 +6261,22 @@ jest-resolve@^27.0.6: resolve "^1.20.0" slash "^3.0.0" +jest-resolve@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-27.1.0.tgz#bb22303c9e240cccdda28562e3c6fbcc6a23ac86" + integrity sha512-TXvzrLyPg0vLOwcWX38ZGYeEztSEmW+cQQKqc4HKDUwun31wsBXwotRlUz4/AYU/Fq4GhbMd/ileIWZEtcdmIA== + dependencies: + "@jest/types" "^27.1.0" + chalk "^4.0.0" + escalade "^3.1.1" + graceful-fs "^4.2.4" + jest-haste-map "^27.1.0" + jest-pnp-resolver "^1.2.2" + jest-util "^27.1.0" + jest-validate "^27.1.0" + resolve "^1.20.0" + slash "^3.0.0" + jest-runner@^27.0.6: version "27.0.6" resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-27.0.6.tgz#1325f45055539222bbc7256a6976e993ad2f9520" @@ -5871,6 +6305,34 @@ jest-runner@^27.0.6: source-map-support "^0.5.6" throat "^6.0.1" +jest-runner@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-27.1.0.tgz#1b28d114fb3b67407b8354c9385d47395e8ff83f" + integrity sha512-ZWPKr9M5w5gDplz1KsJ6iRmQaDT/yyAFLf18fKbb/+BLWsR1sCNC2wMT0H7pP3gDcBz0qZ6aJraSYUNAGSJGaw== + dependencies: + "@jest/console" "^27.1.0" + "@jest/environment" "^27.1.0" + "@jest/test-result" "^27.1.0" + "@jest/transform" "^27.1.0" + "@jest/types" "^27.1.0" + "@types/node" "*" + chalk "^4.0.0" + emittery "^0.8.1" + exit "^0.1.2" + graceful-fs "^4.2.4" + jest-docblock "^27.0.6" + jest-environment-jsdom "^27.1.0" + jest-environment-node "^27.1.0" + jest-haste-map "^27.1.0" + jest-leak-detector "^27.1.0" + jest-message-util "^27.1.0" + jest-resolve "^27.1.0" + jest-runtime "^27.1.0" + jest-util "^27.1.0" + jest-worker "^27.1.0" + source-map-support "^0.5.6" + throat "^6.0.1" + jest-runtime@^27.0.6: version "27.0.6" resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-27.0.6.tgz#45877cfcd386afdd4f317def551fc369794c27c9" @@ -5903,6 +6365,39 @@ jest-runtime@^27.0.6: strip-bom "^4.0.0" yargs "^16.0.3" +jest-runtime@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-27.1.0.tgz#1a98d984ffebc16a0b4f9eaad8ab47c00a750cf5" + integrity sha512-okiR2cpGjY0RkWmUGGado6ETpFOi9oG3yV0CioYdoktkVxy5Hv0WRLWnJFuArSYS8cHMCNcceUUMGiIfgxCO9A== + dependencies: + "@jest/console" "^27.1.0" + "@jest/environment" "^27.1.0" + "@jest/fake-timers" "^27.1.0" + "@jest/globals" "^27.1.0" + "@jest/source-map" "^27.0.6" + "@jest/test-result" "^27.1.0" + "@jest/transform" "^27.1.0" + "@jest/types" "^27.1.0" + "@types/yargs" "^16.0.0" + chalk "^4.0.0" + cjs-module-lexer "^1.0.0" + collect-v8-coverage "^1.0.0" + execa "^5.0.0" + exit "^0.1.2" + glob "^7.1.3" + graceful-fs "^4.2.4" + jest-haste-map "^27.1.0" + jest-message-util "^27.1.0" + jest-mock "^27.1.0" + jest-regex-util "^27.0.6" + jest-resolve "^27.1.0" + jest-snapshot "^27.1.0" + jest-util "^27.1.0" + jest-validate "^27.1.0" + slash "^3.0.0" + strip-bom "^4.0.0" + yargs "^16.0.3" + jest-serializer@^27.0.6: version "27.0.6" resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-27.0.6.tgz#93a6c74e0132b81a2d54623251c46c498bb5bec1" @@ -5941,6 +6436,36 @@ jest-snapshot@^27.0.6: pretty-format "^27.0.6" semver "^7.3.2" +jest-snapshot@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-27.1.0.tgz#2a063ab90064017a7e9302528be7eaea6da12d17" + integrity sha512-eaeUBoEjuuRwmiRI51oTldUsKOohB1F6fPqWKKILuDi/CStxzp2IWekVUXbuHHoz5ik33ioJhshiHpgPFbYgcA== + dependencies: + "@babel/core" "^7.7.2" + "@babel/generator" "^7.7.2" + "@babel/parser" "^7.7.2" + "@babel/plugin-syntax-typescript" "^7.7.2" + "@babel/traverse" "^7.7.2" + "@babel/types" "^7.0.0" + "@jest/transform" "^27.1.0" + "@jest/types" "^27.1.0" + "@types/babel__traverse" "^7.0.4" + "@types/prettier" "^2.1.5" + babel-preset-current-node-syntax "^1.0.0" + chalk "^4.0.0" + expect "^27.1.0" + graceful-fs "^4.2.4" + jest-diff "^27.1.0" + jest-get-type "^27.0.6" + jest-haste-map "^27.1.0" + jest-matcher-utils "^27.1.0" + jest-message-util "^27.1.0" + jest-resolve "^27.1.0" + jest-util "^27.1.0" + natural-compare "^1.4.0" + pretty-format "^27.1.0" + semver "^7.3.2" + jest-util@^27.0.0, jest-util@^27.0.6: version "27.0.6" resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-27.0.6.tgz#e8e04eec159de2f4d5f57f795df9cdc091e50297" @@ -5953,6 +6478,18 @@ jest-util@^27.0.0, jest-util@^27.0.6: is-ci "^3.0.0" picomatch "^2.2.3" +jest-util@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-27.1.0.tgz#06a53777a8cb7e4940ca8e20bf9c67dd65d9bd68" + integrity sha512-edSLD2OneYDKC6gZM1yc+wY/877s/fuJNoM1k3sOEpzFyeptSmke3SLnk1dDHk9CgTA+58mnfx3ew3J11Kes/w== + dependencies: + "@jest/types" "^27.1.0" + "@types/node" "*" + chalk "^4.0.0" + graceful-fs "^4.2.4" + is-ci "^3.0.0" + picomatch "^2.2.3" + jest-validate@^27.0.6: version "27.0.6" resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-27.0.6.tgz#930a527c7a951927df269f43b2dc23262457e2a6" @@ -5965,6 +6502,18 @@ jest-validate@^27.0.6: leven "^3.1.0" pretty-format "^27.0.6" +jest-validate@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-27.1.0.tgz#d9e82024c5e3f5cef52a600cfc456793a84c0998" + integrity sha512-QiJ+4XuSuMsfPi9zvdO//IrSRSlG6ybJhOpuqYSsuuaABaNT84h0IoD6vvQhThBOKT+DIKvl5sTM0l6is9+SRA== + dependencies: + "@jest/types" "^27.1.0" + camelcase "^6.2.0" + chalk "^4.0.0" + jest-get-type "^27.0.6" + leven "^3.1.0" + pretty-format "^27.1.0" + jest-watcher@^27.0.6: version "27.0.6" resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-27.0.6.tgz#89526f7f9edf1eac4e4be989bcb6dec6b8878d9c" @@ -5978,6 +6527,19 @@ jest-watcher@^27.0.6: jest-util "^27.0.6" string-length "^4.0.1" +jest-watcher@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-27.1.0.tgz#2511fcddb0e969a400f3d1daa74265f93f13ce93" + integrity sha512-ivaWTrA46aHWdgPDgPypSHiNQjyKnLBpUIHeBaGg11U+pDzZpkffGlcB1l1a014phmG0mHgkOHtOgiqJQM6yKQ== + dependencies: + "@jest/test-result" "^27.1.0" + "@jest/types" "^27.1.0" + "@types/node" "*" + ansi-escapes "^4.2.1" + chalk "^4.0.0" + jest-util "^27.1.0" + string-length "^4.0.1" + jest-worker@27.0.0-next.5: version "27.0.0-next.5" resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.0.0-next.5.tgz#5985ee29b12a4e191f4aae4bb73b97971d86ec28" @@ -6005,6 +6567,15 @@ jest-worker@^27.0.6: merge-stream "^2.0.0" supports-color "^8.0.0" +jest-worker@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.1.0.tgz#65f4a88e37148ed984ba8ca8492d6b376938c0aa" + integrity sha512-mO4PHb2QWLn9yRXGp7rkvXLAYuxwhq1ZYUo0LoDhg8wqvv4QizP1ZWEJOeolgbEgAWZLIEU0wsku8J+lGWfBhg== + dependencies: + "@types/node" "*" + merge-stream "^2.0.0" + supports-color "^8.0.0" + jest@^27.0.3, jest@^27.0.4, jest@^27.0.6: version "27.0.6" resolved "https://registry.yarnpkg.com/jest/-/jest-27.0.6.tgz#10517b2a628f0409087fbf473db44777d7a04505" @@ -6014,6 +6585,15 @@ jest@^27.0.3, jest@^27.0.4, jest@^27.0.6: import-local "^3.0.2" jest-cli "^27.0.6" +jest@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest/-/jest-27.1.0.tgz#eaab62dfdc02d8b7c814cd27b8d2d92bc46d3d69" + integrity sha512-pSQDVwRSwb109Ss13lcMtdfS9r8/w2Zz8+mTUA9VORD66GflCdl8nUFCqM96geOD2EBwWCNURrNAfQsLIDNBdg== + dependencies: + "@jest/core" "^27.1.0" + import-local "^3.0.2" + jest-cli "^27.1.0" + "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: version "4.0.0" resolved "https://registry.yarnpkg.com/js-tokens/-/js-tokens-4.0.0.tgz#19203fb59991df98e3a287050d4647cdeaf32499" @@ -7363,6 +7943,16 @@ pretty-format@^26.0.0, pretty-format@^26.6.2: ansi-styles "^4.0.0" react-is "^17.0.1" +pretty-format@^27.0.0, pretty-format@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.1.0.tgz#022f3fdb19121e0a2612f3cff8d724431461b9ca" + integrity sha512-4aGaud3w3rxAO6OXmK3fwBFQ0bctIOG3/if+jYEFGNGIs0EvuidQm3bZ9mlP2/t9epLNC/12czabfy7TZNSwVA== + dependencies: + "@jest/types" "^27.1.0" + ansi-regex "^5.0.0" + ansi-styles "^5.0.0" + react-is "^17.0.1" + pretty-format@^27.0.6: version "27.0.6" resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.0.6.tgz#ab770c47b2c6f893a21aefc57b75da63ef49a11f" @@ -8741,7 +9331,7 @@ tr46@^2.1.0: dependencies: punycode "^2.1.1" -ts-jest@^27.0.2, ts-jest@^27.0.3: +ts-jest@^27.0.2, ts-jest@^27.0.3, ts-jest@^27.0.5: version "27.0.5" resolved "https://registry.yarnpkg.com/ts-jest/-/ts-jest-27.0.5.tgz#0b0604e2271167ec43c12a69770f0bb65ad1b750" integrity sha512-lIJApzfTaSSbtlksfFNHkWOzLJuuSm4faFAfo5kvzOiRAuoN4/eKxVJ2zEAho8aecE04qX6K1pAzfH5QHL1/8w== @@ -8847,6 +9437,11 @@ typescript@^4.0.5, typescript@^4.1.2, typescript@^4.2.3, typescript@^4.2.4, type resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.2.tgz#399ab18aac45802d6f2498de5054fcbbe716a805" integrity sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw== +typescript@^4.4.2: + version "4.4.2" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.2.tgz#6d618640d430e3569a1dfb44f7d7e600ced3ee86" + integrity sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ== + uglify-js@3.4.x: version "3.4.10" resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f" From a2b87d86173222293a5c2f9656cb5ee91c7eb151 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 31 Aug 2021 15:27:16 +0900 Subject: [PATCH 007/246] update assistant port from 3000 to 3303 --- README.md | 5 ++--- figma/README.md | 2 +- figma/src/ui.tsx | 2 +- web/README.md | 6 +----- web/package.json | 2 +- 5 files changed, 6 insertions(+), 11 deletions(-) diff --git a/README.md b/README.md index 3955e632..08118ff6 100644 --- a/README.md +++ b/README.md @@ -56,7 +56,7 @@ yarn sketch # [OPTIONAL 3 & Contributors only] run plugin ui in webdev mode yarn web -# visit http://localhost:3000/init-webdev to work on browser +# visit http://localhost:3303/init-webdev to work on browser ``` _soon as the subpackages are released as stable, we will remove git submodule dependency for ease of use. until then, this will be the primary repository and all the edits and PRs will be caused by this project._ - [Learn more here](https://github.com/bridgedxyz/.github/blob/main/contributing/working-with-submodules.md) @@ -176,14 +176,13 @@ we release new updates in a by-monthluy cycle. Watch this repository on github o All update logs available at [CHANGELOG.md](./CHANGELOG.md) - ## Blogs + - [Flutter force week 103](https://medium.com/flutterforce/flutterforce-week-103-95b0822ef25f) - [Flutter force week 135](https://medium.com/flutterforce/flutterforce-week-135-d28b8741302a) - [Assistant initial release](https://blog.grida.co/assistant-initial-release-f75d0084df9c) - [Introducng Grida Assistant 2021.8.0b](https://blog.grida.co/figma-assistant-by-grida-supercharge-your-design-development-workflow-e6b2989216e2) - ## LEGAL > read [LICENSE](./LICENSE). diff --git a/figma/README.md b/figma/README.md index eed6b6f9..08c38f94 100644 --- a/figma/README.md +++ b/figma/README.md @@ -22,7 +22,7 @@ $ yarn install # building for production - this will load production web hosted version in your plugin host $ yarn run build -# building for development - this will load localhost:3000/init-figma page in to your plugin host +# building for development - this will load localhost:3303/init-figma page in to your plugin host $ yarn run build:dev $ yarn run watch # same as `build:dev`, but in watch mode. (if you are not interacting with figma-core, you don't have to run this command.) ``` diff --git a/figma/src/ui.tsx b/figma/src/ui.tsx index 5dfb96ab..82fd4b7c 100644 --- a/figma/src/ui.tsx +++ b/figma/src/ui.tsx @@ -48,7 +48,7 @@ function LiteHostedAppConnector() { const _host = process.env.NODE_ENV === "production" ? "https://assistant-serve.grida.co" - : "http://localhost:3000"; + : "http://localhost:3303"; // use opacity // if (initialized) => show iframe only diff --git a/web/README.md b/web/README.md index 2d75308c..526d1b9e 100644 --- a/web/README.md +++ b/web/README.md @@ -14,10 +14,6 @@ npm run dev yarn dev ``` -Open [http://localhost:3000](http://localhost:3000) with your browser to see the result. +Open [http://localhost:3303](http://localhost:3303) with your browser to see the result. You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file. - -[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.js`. - -The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages. diff --git a/web/package.json b/web/package.json index bba50540..39caba6e 100644 --- a/web/package.json +++ b/web/package.json @@ -3,7 +3,7 @@ "version": "0.1.0", "private": true, "scripts": { - "dev": "next dev", + "dev": "next dev -p 3303", "build": "next build && next export", "start": "next start" }, From 327dc682165c77196e4ad7aadbb59d2093b05098 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 31 Aug 2021 15:31:25 +0900 Subject: [PATCH 008/246] revert plugin sdk request separation --- packages/plugin-sdk-app/node-api.ts | 4 ++-- packages/plugin-sdk-app/plugin-sdk.ts | 17 +++++++++++++++-- packages/plugin-sdk-app/request.ts | 19 ------------------- 3 files changed, 17 insertions(+), 23 deletions(-) delete mode 100644 packages/plugin-sdk-app/request.ts diff --git a/packages/plugin-sdk-app/node-api.ts b/packages/plugin-sdk-app/node-api.ts index deb27f51..6667f818 100644 --- a/packages/plugin-sdk-app/node-api.ts +++ b/packages/plugin-sdk-app/node-api.ts @@ -1,4 +1,4 @@ -import { request } from "./request"; +import { PluginSdk } from "./plugin-sdk"; import { PLUGIN_SDK_NS_GET_NODE, PLUGIN_SDK_EK_REQUEST_GET_NODE_BY_ID, @@ -15,7 +15,7 @@ export class NodeApi { width: number; height: number; }> { - return await request({ + return await PluginSdk.request({ namespace: PLUGIN_SDK_NS_GET_NODE, key: PLUGIN_SDK_EK_REQUEST_GET_NODE_BY_ID, data: { id: this.id }, diff --git a/packages/plugin-sdk-app/plugin-sdk.ts b/packages/plugin-sdk-app/plugin-sdk.ts index e70e21c0..42576c08 100644 --- a/packages/plugin-sdk-app/plugin-sdk.ts +++ b/packages/plugin-sdk-app/plugin-sdk.ts @@ -41,7 +41,6 @@ import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "@core/constant"; import { _SharedStorageCache } from "./_shared-storage-cache"; import { NodeApi } from "./node-api"; -import { request } from "./request"; const __main_plugin_sdk_instance_storage_cache = new _SharedStorageCache( "co.grida.assistant" @@ -341,7 +340,21 @@ export class PluginSdk { static promises: Map = new Map(); static request(event: BasePluginEvent): Promise { - return request(event); + // make id + const requestId = this.makeRequetsId(event.key); + + return new Promise((resolve, reject) => { + // register to event / response que + this.registerToEventQue(requestId, resolve, reject); + + // post message after registration is complete. + this.postMessage({ + type: "request", + origin: "app", + ...event, + id: requestId, + }); + }); } private static makeRequetsId(key: string): string { diff --git a/packages/plugin-sdk-app/request.ts b/packages/plugin-sdk-app/request.ts deleted file mode 100644 index 28dfba41..00000000 --- a/packages/plugin-sdk-app/request.ts +++ /dev/null @@ -1,19 +0,0 @@ -import { BasePluginEvent } from "@plugin-sdk/core"; - -export function request(event: BasePluginEvent): Promise { - // make id - const requestId = this.makeRequetsId(event.key); - - return new Promise((resolve, reject) => { - // register to event / response que - this.registerToEventQue(requestId, resolve, reject); - - // post message after registration is complete. - this.postMessage({ - type: "request", - origin: "app", - ...event, - id: requestId, - }); - }); -} From b584da5281660bf2fa2008c726a1e49af9da3fc1 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 31 Aug 2021 17:38:35 +0900 Subject: [PATCH 009/246] bump design to code --- packages/design-to-code | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/design-to-code b/packages/design-to-code index fefc2590..a4d8373f 160000 --- a/packages/design-to-code +++ b/packages/design-to-code @@ -1 +1 @@ -Subproject commit fefc2590281ebd8fd25ceb88cb229517d1dc81fa +Subproject commit a4d8373fb8caae710b983ff7192acd43f6838aec From bc74c6355cc1420d416d9b649d0af29f2585619e Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 31 Aug 2021 17:38:49 +0900 Subject: [PATCH 010/246] inline props --- packages/ui-code-box/codebox.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/packages/ui-code-box/codebox.tsx b/packages/ui-code-box/codebox.tsx index fc804a40..19c09db8 100644 --- a/packages/ui-code-box/codebox.tsx +++ b/packages/ui-code-box/codebox.tsx @@ -11,14 +11,12 @@ import styled from "@emotion/styled"; export type SourceInput = string | { raw: string }; -interface Props { +export function CodeBox(props: { language: "dart" | "jsx" | string; code: SourceInput; app?: any; codeActions?: Array; -} - -export function CodeBox(props: Props) { +}) { const raw = typeof props.code == "string" ? props.code : props.code.raw; useEffect(() => { From 4ef7b011f9139c42100606372c42dbf1aa1343ec Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 31 Aug 2021 17:39:09 +0900 Subject: [PATCH 011/246] microized state views --- .../component-view-screen.tsx | 7 +- packages/app-schema-editor/analyze-node.ts | 37 +++ .../by-selection-state/index.ts | 10 + .../selection-base-master-component.tsx | 5 + .../selection-configurable-layer.tsx | 68 ++++++ .../selection-instance-component.tsx | 6 + .../by-selection-state/selection-invalid.tsx | 5 + .../selection-master-component.tsx | 77 ++++++ .../by-selection-state/selection-none.tsx | 5 + .../selection-variant-instance.tsx | 5 + .../selection-variant-master.tsx | 5 + .../selection-variant-set.tsx | 10 + packages/app-schema-editor/index.ts | 1 + packages/app-schema-editor/schema-editor.tsx | 225 ++---------------- .../app-schema-editor/ux-messages/index.ts | 5 + 15 files changed, 262 insertions(+), 209 deletions(-) create mode 100644 packages/app-schema-editor/analyze-node.ts create mode 100644 packages/app-schema-editor/by-selection-state/index.ts create mode 100644 packages/app-schema-editor/by-selection-state/selection-base-master-component.tsx create mode 100644 packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx create mode 100644 packages/app-schema-editor/by-selection-state/selection-instance-component.tsx create mode 100644 packages/app-schema-editor/by-selection-state/selection-invalid.tsx create mode 100644 packages/app-schema-editor/by-selection-state/selection-master-component.tsx create mode 100644 packages/app-schema-editor/by-selection-state/selection-none.tsx create mode 100644 packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx create mode 100644 packages/app-schema-editor/by-selection-state/selection-variant-master.tsx create mode 100644 packages/app-schema-editor/by-selection-state/selection-variant-set.tsx create mode 100644 packages/app-schema-editor/ux-messages/index.ts diff --git a/packages/app-component-manage/component-view-screen.tsx b/packages/app-component-manage/component-view-screen.tsx index 79ba3c03..98ac88a9 100644 --- a/packages/app-component-manage/component-view-screen.tsx +++ b/packages/app-component-manage/component-view-screen.tsx @@ -13,6 +13,8 @@ import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "@core/constant"; import { Edit, Settings } from "@material-ui/icons"; import { ComponentCodebox } from "./component-codebox"; import { ComponentSchemaEditor } from "./schema-editor"; +import { useSingleSelection } from "plugin-app"; +import { CodeBox } from "@ui/codebox"; interface VisualComponentManifest { name: string; @@ -23,8 +25,6 @@ interface VisualComponentManifest { codeSnippet: string; } -import { useSingleSelection } from "plugin-app"; - export function ComponentViewScreen() { const [data, setData] = useState(undefined); @@ -65,7 +65,8 @@ export function ComponentViewScreen() { return (
- {/* */} + + {/* {selection ? (

component view placeholder

diff --git a/packages/app-schema-editor/analyze-node.ts b/packages/app-schema-editor/analyze-node.ts new file mode 100644 index 00000000..3b04051a --- /dev/null +++ b/packages/app-schema-editor/analyze-node.ts @@ -0,0 +1,37 @@ +import { nodes } from "@design-sdk/core"; + +export type ComponentLikeType = + // componennt with/without variant compat (can be used for both, but use it only for non variant component) + | "master-component" + // instance of simple or varianted component + | "instance-component" + // base master component that is used as a constraint for variant set variants masters. + | "base-master-component" + // component set frame + | "master-variant-set" + // the single master variant of variant set + | "master-variant-compoent" + // the single instance variant + | "master-variant-instance"; + +export type SchemaDefinitionLike = + | ComponentLikeType + // single layer - no matter where it lives under a componennt or a raw group, etc. + | "single-layer-property" + | "invalid-target"; + +export function analyzeNode(node): SchemaDefinitionLike { + if ( + node?.origin != nodes.ReflectSceneNodeType.component && + node?.origin != nodes.ReflectSceneNodeType.variant_set && + node?.origin != nodes.ReflectSceneNodeType.instance + ) { + return "single-layer-property"; + } else if (node?.origin == nodes.ReflectSceneNodeType.component) { + return "master-component"; + } else if (node?.origin == nodes.ReflectSceneNodeType.variant_set) { + return "master-variant-set"; + } else if (node?.origin == nodes.ReflectSceneNodeType.instance) { + return "instance-component"; + } +} diff --git a/packages/app-schema-editor/by-selection-state/index.ts b/packages/app-schema-editor/by-selection-state/index.ts new file mode 100644 index 00000000..be2e2988 --- /dev/null +++ b/packages/app-schema-editor/by-selection-state/index.ts @@ -0,0 +1,10 @@ +export { default as BaseMaster } from "./selection-base-master-component"; +export { default as ConfigurableLayer } from "./selection-configurable-layer"; +export { default as InstanceComponent } from "./selection-instance-component"; +export { default as MasterComponent } from "./selection-master-component"; +export { default as VariantSet } from "./selection-variant-set"; +export { default as VariantMaster } from "./selection-variant-master"; +export { default as VariantInstance } from "./selection-variant-instance"; + +export { default as InvalidSelection } from "./selection-invalid"; +export { default as NoSelection } from "./selection-none"; diff --git a/packages/app-schema-editor/by-selection-state/selection-base-master-component.tsx b/packages/app-schema-editor/by-selection-state/selection-base-master-component.tsx new file mode 100644 index 00000000..8436bf6d --- /dev/null +++ b/packages/app-schema-editor/by-selection-state/selection-base-master-component.tsx @@ -0,0 +1,5 @@ +import React from "react"; + +export default function () { + return <>; +} diff --git a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx new file mode 100644 index 00000000..4b432ece --- /dev/null +++ b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx @@ -0,0 +1,68 @@ +import React, { useEffect, useState } from "react"; +import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "@core/constant"; +import { PluginSdk } from "@plugin-sdk/app"; +import { SingleLayerPropertyDefinition } from "../single-property"; +import { ISingleLayerProperty, IProperties } from "../types"; +import { nodes } from "@design-sdk/core"; +import { _FigmaVariantPropertyCompatType_to_string } from "@design-sdk/figma/features/variant"; + +export default function (props: { node: nodes.light.IReflectNodeReference }) { + const { node } = props; + const id = node.id; + + const [data, setData] = useState([]); + const handleOnSave = (d: ISingleLayerProperty) => { + const newData = data; + newData.push(d); + setData(newData); + + // this update logic shall be applied to master node's corresponding layer + PluginSdk.updateMetadata({ + id: id, + namespace: ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE, + key: "layer-property-data", + value: data, + }); + }; + + useEffect(() => { + PluginSdk.fetchMetadata({ + id: id, + namespace: ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE, + key: "layer-property-data", + }).then((d) => { + if (d) { + setData(d); + } + }); + }, []); + + return ( + <> + {data.length > 0 ? ( + data.map((d) => ( + + )) + ) : ( + // automatically preset a new property + + )} + + ); +} diff --git a/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx b/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx new file mode 100644 index 00000000..0a410665 --- /dev/null +++ b/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx @@ -0,0 +1,6 @@ +import React from "react"; +import { nodes } from "@design-sdk/core"; + +export default function (props: { node: nodes.light.IReflectNodeReference }) { + return <>; +} diff --git a/packages/app-schema-editor/by-selection-state/selection-invalid.tsx b/packages/app-schema-editor/by-selection-state/selection-invalid.tsx new file mode 100644 index 00000000..8436bf6d --- /dev/null +++ b/packages/app-schema-editor/by-selection-state/selection-invalid.tsx @@ -0,0 +1,5 @@ +import React from "react"; + +export default function () { + return <>; +} diff --git a/packages/app-schema-editor/by-selection-state/selection-master-component.tsx b/packages/app-schema-editor/by-selection-state/selection-master-component.tsx new file mode 100644 index 00000000..199cfa1f --- /dev/null +++ b/packages/app-schema-editor/by-selection-state/selection-master-component.tsx @@ -0,0 +1,77 @@ +import React, { useEffect, useState } from "react"; +import { nodes, utils } from "@design-sdk/core"; +import { variant } from "@design-sdk/figma/features"; +import { ISingleLayerProperty, IProperties } from "../types"; +import { PluginSdk } from "@plugin-sdk/app"; +import { _FigmaVariantPropertyCompatType_to_string } from "@design-sdk/figma/features/variant"; + +export default function (props: { node: nodes.light.IReflectNodeReference }) { + const { node } = props; + const [properties, setProperties] = useState(null); + + // 0. check if variant compat component (if it's parent is variant-set then it is.) + const isVariantCompat = + node.parentReference.origin == nodes.ReflectSceneNodeType.variant_set; + + // if variant, load default property set by variant namings. + let variantProperties: variant.VariantProperty[]; + if (isVariantCompat) { + const names = variant.getVariantNamesSetFromReference_Figma(node); + variantProperties = variant.extractTypeFromVariantNames_Figma(names); + } + + //1. list all layers under this component + const grandchilds = utils.mapGrandchildren(node); + + //2. extract schema from layers + useEffect(() => { + Promise.all( + grandchilds.map((c) => { + return PluginSdk.fetchMetadata_grida( + c.id, + "layer-property-data" + ); + }) + ).then((res) => { + const layersWithPropertyData = res.filter((i) => i !== undefined); + setProperties(layersWithPropertyData); + }); + }, []); + + //3. display available layer schema as this component's property + + return ( + <> +
Properties
+ {/* */} + {variantProperties ? ( + <> +
variant properties
+
    + {variantProperties.map((n) => { + return ( +
  • + name:{n.key}, type: + {`${_FigmaVariantPropertyCompatType_to_string(n.type)}`} +
    • + ); + })} +
+
data
+ + ) : ( + <> + )} + {/* */} + {properties ? ( +
    + {properties.map((p) => { + return
  • {JSON.stringify(p)}
    • ; + })} +
+ ) : ( + <>Loading.. + )} + + ); +} diff --git a/packages/app-schema-editor/by-selection-state/selection-none.tsx b/packages/app-schema-editor/by-selection-state/selection-none.tsx new file mode 100644 index 00000000..1e61efec --- /dev/null +++ b/packages/app-schema-editor/by-selection-state/selection-none.tsx @@ -0,0 +1,5 @@ +import React from "react"; + +export default function () { + return <>nothing selected; +} diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx new file mode 100644 index 00000000..8436bf6d --- /dev/null +++ b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx @@ -0,0 +1,5 @@ +import React from "react"; + +export default function () { + return <>; +} diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx new file mode 100644 index 00000000..8436bf6d --- /dev/null +++ b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx @@ -0,0 +1,5 @@ +import React from "react"; + +export default function () { + return <>; +} diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-set.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-set.tsx new file mode 100644 index 00000000..5df33003 --- /dev/null +++ b/packages/app-schema-editor/by-selection-state/selection-variant-set.tsx @@ -0,0 +1,10 @@ +import React from "react"; +import { nodes } from "@design-sdk/core"; + +export default function (props: { + node?: nodes.light.IReflectNodeReference; + defaultComponent?: nodes.light.IReflectNodeReference; +}) { + // TODO + return

select component inside variant set

; +} diff --git a/packages/app-schema-editor/index.ts b/packages/app-schema-editor/index.ts index 677605b2..692092d6 100644 --- a/packages/app-schema-editor/index.ts +++ b/packages/app-schema-editor/index.ts @@ -1 +1,2 @@ export { SchemaEditor } from "./schema-editor"; +export { analyzeNode } from "./analyze-node"; diff --git a/packages/app-schema-editor/schema-editor.tsx b/packages/app-schema-editor/schema-editor.tsx index 4ae26768..fd65e553 100644 --- a/packages/app-schema-editor/schema-editor.tsx +++ b/packages/app-schema-editor/schema-editor.tsx @@ -1,62 +1,23 @@ import React, { useEffect, useState } from "react"; -import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "@core/constant"; import { useSingleSelection } from "plugin-app"; -import { PluginSdk } from "@plugin-sdk/app"; -import { SingleLayerPropertyDefinition } from "./single-property"; -import { ISingleLayerProperty, IProperties } from "./types"; -import { nodes, utils } from "@design-sdk/core"; -import { variant } from "@design-sdk/figma/features"; -import { _FigmaVariantPropertyCompatType_to_string } from "../design-sdk/figma/features/variant"; - -const ERROR_MESSAGES = { - nothing_is_selected: "Nothing is selected", - you_must_select_instance_or_component_type_of_node: - "You must select instance or component type of node.", -}; - -type ComponentLikeType = // component set frame - | "master-variant-set" - // componennt with/without variant compat (can be used for both, but use it only for non variant component) - | "master-component" - // instance of simple or varianted component - | "instance"; - -type SchemaDefinitionLike = - | ComponentLikeType - // single layer - no matter where it lives under a componennt or a raw group, etc. - | "single-layer-property"; +import { _FigmaVariantPropertyCompatType_to_string } from "@design-sdk/figma/features/variant"; +import { analyzeNode, SchemaDefinitionLike } from "./analyze-node"; +import * as Modes from "./by-selection-state"; type EditerMode = | SchemaDefinitionLike // non is set, loading state | "no-selection"; -function analyzeSelection(node): SchemaDefinitionLike { - if ( - node?.origin != nodes.ReflectSceneNodeType.component && - node?.origin != nodes.ReflectSceneNodeType.variant_set && - node?.origin != nodes.ReflectSceneNodeType.instance - ) { - return "single-layer-property"; - } else if (node?.origin == nodes.ReflectSceneNodeType.component) { - return "master-component"; - } else if (node?.origin == nodes.ReflectSceneNodeType.variant_set) { - return "master-variant-set"; - } else if (node?.origin == nodes.ReflectSceneNodeType.instance) { - return "instance"; - } -} - export function SchemaEditor(props: {}) { const [mode, setMode] = useState("no-selection"); // use selection hook, then update the mode corresponding to selected layer on design tool - const selection = useSingleSelection(); useEffect(() => { if (selection) { - const analysis = analyzeSelection(selection?.node); + const analysis = analyzeNode(selection?.node); setMode(analysis); } else { setMode("no-selection"); @@ -64,21 +25,27 @@ export function SchemaEditor(props: {}) { }, [selection]); const Body = () => { - if (!selection) { + if (!selection || mode === "no-selection") { // Empty state - return <_Mode_Empty />; + return ; } switch (mode) { - case "no-selection": - return <_Mode_NoSelection />; + case "invalid-target": + return ; case "single-layer-property": - return <_Mode_SingleLayerProperty node={selection.node} />; + return ; + case "base-master-component": + return ; + case "master-variant-compoent": + return ; case "master-variant-set": - return <_Mode_Variant_Set />; + return ; + case "master-variant-instance": + return ; case "master-component": - return <_Mode_Component node={selection.node} />; - case "instance": - return <_Mode_Instance node={selection.node} />; + return ; + case "instance-component": + return ; default: throw `${mode} not handled`; } @@ -92,157 +59,3 @@ export function SchemaEditor(props: {}) { ); } - -function _Mode_Empty() { - return <>Nothing is selected; -} - -function _Mode_NoSelection() { - return <>nothing selected; -} - -function _Mode_SingleLayerProperty(props: { - node: nodes.light.IReflectNodeReference; -}) { - const { node } = props; - const id = node.id; - - const [data, setData] = useState([]); - const handleOnSave = (d: ISingleLayerProperty) => { - const newData = data; - newData.push(d); - setData(newData); - - // this update logic shall be applied to master node's corresponding layer - PluginSdk.updateMetadata({ - id: id, - namespace: ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE, - key: "layer-property-data", - value: data, - }); - }; - - useEffect(() => { - PluginSdk.fetchMetadata({ - id: id, - namespace: ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE, - key: "layer-property-data", - }).then((d) => { - if (d) { - setData(d); - } - }); - }, []); - - return ( - <> - {data.length > 0 ? ( - data.map((d) => ( - - )) - ) : ( - // automatically preset a new property - - )} - - ); -} - -function _Mode_Variant_Set(props: { - node?: nodes.light.IReflectNodeReference; - defaultComponent?: nodes.light.IReflectNodeReference; -}) { - // TODO - return

select component inside variant set

; -} - -function _Mode_Component(props: { node: nodes.light.IReflectNodeReference }) { - const { node } = props; - const [properties, setProperties] = useState(null); - - // 0. check if variant compat component (if it's parent is variant-set then it is.) - const isVariantCompat = - node.parentReference.origin == nodes.ReflectSceneNodeType.variant_set; - - // if variant, load default property set by variant namings. - let variantProperties: variant.VariantProperty[]; - if (isVariantCompat) { - const names = variant.getVariantNamesSetFromReference_Figma(node); - variantProperties = variant.extractTypeFromVariantNames_Figma(names); - } - - //1. list all layers under this component - const grandchilds = utils.mapGrandchildren(node); - - //2. extract schema from layers - useEffect(() => { - Promise.all( - grandchilds.map((c) => { - return PluginSdk.fetchMetadata_grida( - c.id, - "layer-property-data" - ); - }) - ).then((res) => { - const layersWithPropertyData = res.filter((i) => i !== undefined); - setProperties(layersWithPropertyData); - }); - }, []); - - //3. display available layer schema as this component's property - - return ( - <> -
Properties
- {/* */} - {variantProperties ? ( - <> -
variant properties
-
    - {variantProperties.map((n) => { - return ( -
  • - name:{n.key}, type: - {`${_FigmaVariantPropertyCompatType_to_string(n.type)}`} -
    • - ); - })} -
-
data
- - ) : ( - <> - )} - {/* */} - {properties ? ( -
    - {properties.map((p) => { - return
  • {JSON.stringify(p)}
    • ; - })} -
- ) : ( - <>Loading.. - )} - - ); -} - -function _Mode_Instance(props: { node: nodes.light.IReflectNodeReference }) { - return <>; -} diff --git a/packages/app-schema-editor/ux-messages/index.ts b/packages/app-schema-editor/ux-messages/index.ts new file mode 100644 index 00000000..502a09d7 --- /dev/null +++ b/packages/app-schema-editor/ux-messages/index.ts @@ -0,0 +1,5 @@ +export const ERROR_MESSAGES = { + nothing_is_selected: "Nothing is selected", + you_must_select_instance_or_component_type_of_node: + "You must select instance or component type of node.", +}; From afdc22a9856674a15091632683adfcb1817fb020 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 31 Aug 2021 19:36:06 +0900 Subject: [PATCH 012/246] add interface builder for variant-instance --- .../component-view-screen.tsx | 4 +- packages/app-schema-editor/analyze-node.ts | 37 -------- .../selection-base-master-component.tsx | 6 +- .../selection-configurable-layer.tsx | 1 + .../selection-instance-component.tsx | 6 +- .../by-selection-state/selection-invalid.tsx | 6 +- .../selection-master-component.tsx | 38 +------- .../by-selection-state/selection-none.tsx | 6 +- .../selection-variant-instance.tsx | 91 ++++++++++++++++++- .../selection-variant-master.tsx | 6 +- .../selection-variant-set.tsx | 7 +- packages/app-schema-editor/index.ts | 1 - packages/app-schema-editor/schema-editor.tsx | 27 ++---- packages/design-sdk | 2 +- packages/design-to-code | 2 +- packages/plugin-app/plugin-app.tsx | 8 +- 16 files changed, 140 insertions(+), 108 deletions(-) delete mode 100644 packages/app-schema-editor/analyze-node.ts diff --git a/packages/app-component-manage/component-view-screen.tsx b/packages/app-component-manage/component-view-screen.tsx index 98ac88a9..bc55d44b 100644 --- a/packages/app-component-manage/component-view-screen.tsx +++ b/packages/app-component-manage/component-view-screen.tsx @@ -11,10 +11,8 @@ import { PluginSdk } from "@plugin-sdk/app"; import { Divider, IconButton, Typography } from "@material-ui/core"; import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "@core/constant"; import { Edit, Settings } from "@material-ui/icons"; -import { ComponentCodebox } from "./component-codebox"; import { ComponentSchemaEditor } from "./schema-editor"; import { useSingleSelection } from "plugin-app"; -import { CodeBox } from "@ui/codebox"; interface VisualComponentManifest { name: string; @@ -66,7 +64,7 @@ export function ComponentViewScreen() { return (
- + {/* {selection ? (

component view placeholder

diff --git a/packages/app-schema-editor/analyze-node.ts b/packages/app-schema-editor/analyze-node.ts deleted file mode 100644 index 3b04051a..00000000 --- a/packages/app-schema-editor/analyze-node.ts +++ /dev/null @@ -1,37 +0,0 @@ -import { nodes } from "@design-sdk/core"; - -export type ComponentLikeType = - // componennt with/without variant compat (can be used for both, but use it only for non variant component) - | "master-component" - // instance of simple or varianted component - | "instance-component" - // base master component that is used as a constraint for variant set variants masters. - | "base-master-component" - // component set frame - | "master-variant-set" - // the single master variant of variant set - | "master-variant-compoent" - // the single instance variant - | "master-variant-instance"; - -export type SchemaDefinitionLike = - | ComponentLikeType - // single layer - no matter where it lives under a componennt or a raw group, etc. - | "single-layer-property" - | "invalid-target"; - -export function analyzeNode(node): SchemaDefinitionLike { - if ( - node?.origin != nodes.ReflectSceneNodeType.component && - node?.origin != nodes.ReflectSceneNodeType.variant_set && - node?.origin != nodes.ReflectSceneNodeType.instance - ) { - return "single-layer-property"; - } else if (node?.origin == nodes.ReflectSceneNodeType.component) { - return "master-component"; - } else if (node?.origin == nodes.ReflectSceneNodeType.variant_set) { - return "master-variant-set"; - } else if (node?.origin == nodes.ReflectSceneNodeType.instance) { - return "instance-component"; - } -} diff --git a/packages/app-schema-editor/by-selection-state/selection-base-master-component.tsx b/packages/app-schema-editor/by-selection-state/selection-base-master-component.tsx index 8436bf6d..866d4702 100644 --- a/packages/app-schema-editor/by-selection-state/selection-base-master-component.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-base-master-component.tsx @@ -1,5 +1,9 @@ import React from "react"; export default function () { - return <>; + return ( + <> +
base master component
+ + ); } diff --git a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx index 4b432ece..1085b9a9 100644 --- a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx @@ -39,6 +39,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { return ( <> +
configurable layer
{data.length > 0 ? ( data.map((d) => ( ; + return ( + <> +
instance of non-variant
+ + ); } diff --git a/packages/app-schema-editor/by-selection-state/selection-invalid.tsx b/packages/app-schema-editor/by-selection-state/selection-invalid.tsx index 8436bf6d..d86005b8 100644 --- a/packages/app-schema-editor/by-selection-state/selection-invalid.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-invalid.tsx @@ -1,5 +1,9 @@ import React from "react"; export default function () { - return <>; + return ( + <> +
invalid target
+ + ); } diff --git a/packages/app-schema-editor/by-selection-state/selection-master-component.tsx b/packages/app-schema-editor/by-selection-state/selection-master-component.tsx index 199cfa1f..4da0d441 100644 --- a/packages/app-schema-editor/by-selection-state/selection-master-component.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-master-component.tsx @@ -1,25 +1,12 @@ import React, { useEffect, useState } from "react"; import { nodes, utils } from "@design-sdk/core"; -import { variant } from "@design-sdk/figma/features"; import { ISingleLayerProperty, IProperties } from "../types"; import { PluginSdk } from "@plugin-sdk/app"; -import { _FigmaVariantPropertyCompatType_to_string } from "@design-sdk/figma/features/variant"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const { node } = props; const [properties, setProperties] = useState(null); - // 0. check if variant compat component (if it's parent is variant-set then it is.) - const isVariantCompat = - node.parentReference.origin == nodes.ReflectSceneNodeType.variant_set; - - // if variant, load default property set by variant namings. - let variantProperties: variant.VariantProperty[]; - if (isVariantCompat) { - const names = variant.getVariantNamesSetFromReference_Figma(node); - variantProperties = variant.extractTypeFromVariantNames_Figma(names); - } - //1. list all layers under this component const grandchilds = utils.mapGrandchildren(node); @@ -38,30 +25,11 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { }); }, []); - //3. display available layer schema as this component's property - return ( <> -
Properties
- {/* */} - {variantProperties ? ( - <> -
variant properties
-
    - {variantProperties.map((n) => { - return ( -
  • - name:{n.key}, type: - {`${_FigmaVariantPropertyCompatType_to_string(n.type)}`} -
    • - ); - })} -
-
data
- - ) : ( - <> - )} +
mater component
+
+ {/* */} {properties ? (
    diff --git a/packages/app-schema-editor/by-selection-state/selection-none.tsx b/packages/app-schema-editor/by-selection-state/selection-none.tsx index 1e61efec..8c12aee1 100644 --- a/packages/app-schema-editor/by-selection-state/selection-none.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-none.tsx @@ -1,5 +1,9 @@ import React from "react"; export default function () { - return <>nothing selected; + return ( + <> +
    nothing selected
    + + ); } diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx index 8436bf6d..f1aa172f 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx @@ -1,5 +1,92 @@ import React from "react"; +import { nodes, utils } from "@design-sdk/core"; +import { variant } from "@design-sdk/figma/features"; +import { _FigmaVariantPropertyCompatType_to_string } from "@design-sdk/figma/features/variant"; +import { CodeBox } from "@ui/codebox"; -export default function () { - return <>; +export default function (props: { node: nodes.light.IReflectNodeReference }) { + const master = props.node.mainComponent; + + // 0. check if variant compat component (if it's parent is variant-set then it is.) + // load default property set by variant namings. + const names = variant.getVariantNamesSetFromReference_Figma(master); + const variantProperties: variant.VariantProperty[] = + variant.extractTypeFromVariantNames_Figma(names); + + // display available layer schema as this component's property + return ( + <> +
    instance of variant
    + { + return { + name: d.key, + type: _FigmaVariantPropertyCompatType_to_string(d.type), + }; + }), + })} + /> +
    Properties
    + {/* */} + {variantProperties ? ( + <> +
    variant properties
    +
      + {variantProperties.map((n) => { + return ( +
    • + name:{n.key}, type: + {`${_FigmaVariantPropertyCompatType_to_string(n.type)}`} +
      • + ); + })} +
    +
    data
    + + ) : ( + <> + )} + + ); +} + +interface InterfaceCodeBuilParam { + name: string; + properties: { + name: string; + type: string; + }[]; +} + +import { + InterfaceDeclaration, + PropertySignature, + Identifier, + LiteralType, + StringLiteral, +} from "coli"; +import { stringfy } from "@coli.codes/export-string"; +function buildInterface(p: InterfaceCodeBuilParam) { + return new InterfaceDeclaration({ + name: p.name, + members: p.properties.map((n) => { + return new PropertySignature({ + name: new Identifier(n.name), + type: new LiteralType(new StringLiteral(n.type)), + }); + }), + }); +} + +function buildInterfaceString(p: InterfaceCodeBuilParam): string { + return interfaceColiToString(buildInterface(p)); +} + +function interfaceColiToString(i: InterfaceDeclaration): string { + return stringfy(i, { + language: "typescript", + }); } diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx index 8436bf6d..492636e5 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx @@ -1,5 +1,9 @@ import React from "react"; export default function () { - return <>; + return ( + <> +
    variant
    + + ); } diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-set.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-set.tsx index 5df33003..9ec0111c 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-set.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-set.tsx @@ -6,5 +6,10 @@ export default function (props: { defaultComponent?: nodes.light.IReflectNodeReference; }) { // TODO - return

    select component inside variant set

    ; + return ( + <> +
    variant set
    +

    select component inside variant set

    ; + + ); } diff --git a/packages/app-schema-editor/index.ts b/packages/app-schema-editor/index.ts index 692092d6..677605b2 100644 --- a/packages/app-schema-editor/index.ts +++ b/packages/app-schema-editor/index.ts @@ -1,2 +1 @@ export { SchemaEditor } from "./schema-editor"; -export { analyzeNode } from "./analyze-node"; diff --git a/packages/app-schema-editor/schema-editor.tsx b/packages/app-schema-editor/schema-editor.tsx index fd65e553..352ca0d4 100644 --- a/packages/app-schema-editor/schema-editor.tsx +++ b/packages/app-schema-editor/schema-editor.tsx @@ -1,7 +1,10 @@ import React, { useEffect, useState } from "react"; import { useSingleSelection } from "plugin-app"; import { _FigmaVariantPropertyCompatType_to_string } from "@design-sdk/figma/features/variant"; -import { analyzeNode, SchemaDefinitionLike } from "./analyze-node"; +import { + analyzeNode, + SchemaDefinitionLike, +} from "@design-sdk/figma/node-analysis"; import * as Modes from "./by-selection-state"; type EditerMode = @@ -10,19 +13,10 @@ type EditerMode = | "no-selection"; export function SchemaEditor(props: {}) { - const [mode, setMode] = useState("no-selection"); - // use selection hook, then update the mode corresponding to selected layer on design tool const selection = useSingleSelection(); - useEffect(() => { - if (selection) { - const analysis = analyzeNode(selection?.node); - setMode(analysis); - } else { - setMode("no-selection"); - } - }, [selection]); + const mode = analyzeNode(selection?.node) ?? "no-selection"; const Body = () => { if (!selection || mode === "no-selection") { @@ -36,12 +30,12 @@ export function SchemaEditor(props: {}) { return ; case "base-master-component": return ; + case "variant-set": + return ; case "master-variant-compoent": return ; - case "master-variant-set": - return ; - case "master-variant-instance": - return ; + case "variant-instance": + return ; case "master-component": return ; case "instance-component": @@ -53,8 +47,7 @@ export function SchemaEditor(props: {}) { return ( <> -

    schema editor

    -

    {selection?.node?.origin}

    +

    schema editor

    ); diff --git a/packages/design-sdk b/packages/design-sdk index 2d523989..d8faba00 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit 2d52398964fdad7519556e8e41cee640b5f71fde +Subproject commit d8faba007c4b9d9c3929a9fc349faf91abbecb87 diff --git a/packages/design-to-code b/packages/design-to-code index a4d8373f..42568ac8 160000 --- a/packages/design-to-code +++ b/packages/design-to-code @@ -1 +1 @@ -Subproject commit a4d8373fb8caae710b983ff7192acd43f6838aec +Subproject commit 42568ac84759ef7377b47f9aba145f99d724a5e1 diff --git a/packages/plugin-app/plugin-app.tsx b/packages/plugin-app/plugin-app.tsx index 9f61cecc..a76cadbc 100644 --- a/packages/plugin-app/plugin-app.tsx +++ b/packages/plugin-app/plugin-app.tsx @@ -1,5 +1,4 @@ import React, { useEffect, useState } from "react"; -import { useSetRecoilState } from "recoil"; import Axios from "axios"; import { PLC_REMOTE_API_RES, @@ -11,7 +10,6 @@ import { import { NetworkRequest } from "@plugin-sdk/core"; import { PluginSdk } from "@plugin-sdk/app"; import type { TargetPlatform } from "@plugin-sdk/core"; -import { currentlySelectedPrimaryNodeId } from "./states/canvas"; import { initialize as cid_initialize, client_id } from "./client-id"; export function PluginApp(props: { @@ -97,9 +95,9 @@ function registerPluginGlobalStateHandler(message: TransportPluginEvent) { if (message.namespace == PLUGIN_SDK_NS_GENERAL_STATE_DATA) { if (message.key == "general.canvas.selection-change") { // update selection change - const setCrrentSelection = useSetRecoilState( - currentlySelectedPrimaryNodeId - ); + // const setCrrentSelection = useSetRecoilState( + // currentlySelectedPrimaryNodeId + // ); // ... } } From 0212f41aabe942aaddd979b06477255e3a61fc38 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 31 Aug 2021 20:22:40 +0900 Subject: [PATCH 013/246] update interface building with enum, bool, number support (string only for enum type) --- .../selection-variant-instance.tsx | 33 ++++++++++++++++--- packages/design-sdk | 2 +- packages/design-to-code | 2 +- 3 files changed, 31 insertions(+), 6 deletions(-) diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx index f1aa172f..4701bc42 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx @@ -1,7 +1,12 @@ import React from "react"; import { nodes, utils } from "@design-sdk/core"; import { variant } from "@design-sdk/figma/features"; -import { _FigmaVariantPropertyCompatType_to_string } from "@design-sdk/figma/features/variant"; +import { + FigmaBoolean, + FigmaNumber, + FigmaUnique, + _FigmaVariantPropertyCompatType_to_string, +} from "@design-sdk/figma/features/variant"; import { CodeBox } from "@ui/codebox"; export default function (props: { node: nodes.light.IReflectNodeReference }) { @@ -24,7 +29,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { properties: variantProperties.map((d) => { return { name: d.key, - type: _FigmaVariantPropertyCompatType_to_string(d.type), + type: d.type, }; }), })} @@ -57,7 +62,7 @@ interface InterfaceCodeBuilParam { name: string; properties: { name: string; - type: string; + type: variant.FigmaVariantPropertyCompatType; }[]; } @@ -67,15 +72,35 @@ import { Identifier, LiteralType, StringLiteral, + UnionType, + BooleanKeyword, + NumberKeyword, } from "coli"; + import { stringfy } from "@coli.codes/export-string"; function buildInterface(p: InterfaceCodeBuilParam) { + const _make_type = (t: variant.FigmaVariantPropertyCompatType) => { + if (t == FigmaNumber) { + return new NumberKeyword(); + } else if (t == FigmaBoolean) { + return new BooleanKeyword(); + } else if (t.type == "unique") { + return new LiteralType(new StringLiteral(t.value)); + } else if (t.type == "enum") { + return new UnionType({ + types: t.values.map((v) => { + return new LiteralType(new StringLiteral(v)); + }), + }); + } + }; + return new InterfaceDeclaration({ name: p.name, members: p.properties.map((n) => { return new PropertySignature({ name: new Identifier(n.name), - type: new LiteralType(new StringLiteral(n.type)), + type: _make_type(n.type), }); }), }); diff --git a/packages/design-sdk b/packages/design-sdk index d8faba00..77750900 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit d8faba007c4b9d9c3929a9fc349faf91abbecb87 +Subproject commit 777509003db2e2a4f99520f99e49e920c4663a94 diff --git a/packages/design-to-code b/packages/design-to-code index 42568ac8..44a69333 160000 --- a/packages/design-to-code +++ b/packages/design-to-code @@ -1 +1 @@ -Subproject commit 42568ac84759ef7377b47f9aba145f99d724a5e1 +Subproject commit 44a693330db5c2218433128a3814e1f79b8d2241 From 765391c8db7582a0d1b739bc37694c4c32fc4563 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 31 Aug 2021 20:28:46 +0900 Subject: [PATCH 014/246] add interface builder support for variant-master --- .../selection-variant-instance.tsx | 86 +------------------ .../selection-variant-master.tsx | 27 +++++- .../interface-code-builder/index.ts | 1 + .../interface-code-builder/props-builder.ts | 65 ++++++++++++++ packages/app-schema-editor/schema-editor.tsx | 2 +- 5 files changed, 95 insertions(+), 86 deletions(-) create mode 100644 packages/app-schema-editor/interface-code-builder/index.ts create mode 100644 packages/app-schema-editor/interface-code-builder/props-builder.ts diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx index 4701bc42..6d9960c5 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx @@ -1,13 +1,9 @@ import React from "react"; import { nodes, utils } from "@design-sdk/core"; import { variant } from "@design-sdk/figma/features"; -import { - FigmaBoolean, - FigmaNumber, - FigmaUnique, - _FigmaVariantPropertyCompatType_to_string, -} from "@design-sdk/figma/features/variant"; +import { _FigmaVariantPropertyCompatType_to_string } from "@design-sdk/figma/features/variant"; import { CodeBox } from "@ui/codebox"; +import { buildInterfaceString } from "../interface-code-builder"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const master = props.node.mainComponent; @@ -34,84 +30,6 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { }), })} /> -
    Properties
    - {/* */} - {variantProperties ? ( - <> -
    variant properties
    -
      - {variantProperties.map((n) => { - return ( -
    • - name:{n.key}, type: - {`${_FigmaVariantPropertyCompatType_to_string(n.type)}`} -
      • - ); - })} -
    -
    data
    - - ) : ( - <> - )} ); } - -interface InterfaceCodeBuilParam { - name: string; - properties: { - name: string; - type: variant.FigmaVariantPropertyCompatType; - }[]; -} - -import { - InterfaceDeclaration, - PropertySignature, - Identifier, - LiteralType, - StringLiteral, - UnionType, - BooleanKeyword, - NumberKeyword, -} from "coli"; - -import { stringfy } from "@coli.codes/export-string"; -function buildInterface(p: InterfaceCodeBuilParam) { - const _make_type = (t: variant.FigmaVariantPropertyCompatType) => { - if (t == FigmaNumber) { - return new NumberKeyword(); - } else if (t == FigmaBoolean) { - return new BooleanKeyword(); - } else if (t.type == "unique") { - return new LiteralType(new StringLiteral(t.value)); - } else if (t.type == "enum") { - return new UnionType({ - types: t.values.map((v) => { - return new LiteralType(new StringLiteral(v)); - }), - }); - } - }; - - return new InterfaceDeclaration({ - name: p.name, - members: p.properties.map((n) => { - return new PropertySignature({ - name: new Identifier(n.name), - type: _make_type(n.type), - }); - }), - }); -} - -function buildInterfaceString(p: InterfaceCodeBuilParam): string { - return interfaceColiToString(buildInterface(p)); -} - -function interfaceColiToString(i: InterfaceDeclaration): string { - return stringfy(i, { - language: "typescript", - }); -} diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx index 492636e5..eb368f51 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx @@ -1,9 +1,34 @@ import React from "react"; +import { nodes, utils } from "@design-sdk/core"; +import { variant } from "@design-sdk/figma/features"; +import { _FigmaVariantPropertyCompatType_to_string } from "@design-sdk/figma/features/variant"; +import { CodeBox } from "@ui/codebox"; +import { buildInterfaceString } from "../interface-code-builder"; + +export default function (props: { node: nodes.light.IReflectNodeReference }) { + const master = props.node; + + // 0. check if variant compat component (if it's parent is variant-set then it is.) + // load default property set by variant namings. + const names = variant.getVariantNamesSetFromReference_Figma(master); + const variantProperties: variant.VariantProperty[] = + variant.extractTypeFromVariantNames_Figma(names); -export default function () { return ( <>
    variant
    + { + return { + name: d.key, + type: d.type, + }; + }), + })} + /> ); } diff --git a/packages/app-schema-editor/interface-code-builder/index.ts b/packages/app-schema-editor/interface-code-builder/index.ts new file mode 100644 index 00000000..b8f311f3 --- /dev/null +++ b/packages/app-schema-editor/interface-code-builder/index.ts @@ -0,0 +1 @@ +export * from "./props-builder"; diff --git a/packages/app-schema-editor/interface-code-builder/props-builder.ts b/packages/app-schema-editor/interface-code-builder/props-builder.ts new file mode 100644 index 00000000..e756abc8 --- /dev/null +++ b/packages/app-schema-editor/interface-code-builder/props-builder.ts @@ -0,0 +1,65 @@ +import { variant } from "@design-sdk/figma/features"; +import { + FigmaBoolean, + FigmaNumber, + FigmaUnique, + _FigmaVariantPropertyCompatType_to_string, +} from "@design-sdk/figma/features/variant"; +import { + InterfaceDeclaration, + PropertySignature, + Identifier, + LiteralType, + StringLiteral, + UnionType, + BooleanKeyword, + NumberKeyword, +} from "coli"; + +import { stringfy } from "@coli.codes/export-string"; + +export interface InterfaceCodeBuilParam { + name: string; + properties: { + name: string; + type: variant.FigmaVariantPropertyCompatType; + }[]; +} + +export function buildInterface(p: InterfaceCodeBuilParam) { + const _make_type = (t: variant.FigmaVariantPropertyCompatType) => { + if (t == FigmaNumber) { + return new NumberKeyword(); + } else if (t == FigmaBoolean) { + return new BooleanKeyword(); + } else if (t.type == "unique") { + return new LiteralType(new StringLiteral(t.value)); + } else if (t.type == "enum") { + return new UnionType({ + types: t.values.map((v) => { + return new LiteralType(new StringLiteral(v)); + }), + }); + } + }; + + return new InterfaceDeclaration({ + name: p.name, + members: p.properties.map((n) => { + return new PropertySignature({ + name: new Identifier(n.name), + type: _make_type(n.type), + }); + }), + }); +} + +export function buildInterfaceString(p: InterfaceCodeBuilParam): string { + return interfaceColiToString(buildInterface(p)); +} + +export function interfaceColiToString(i: InterfaceDeclaration): string { + return stringfy(i, { + language: "typescript", + }); +} diff --git a/packages/app-schema-editor/schema-editor.tsx b/packages/app-schema-editor/schema-editor.tsx index 352ca0d4..7a72037c 100644 --- a/packages/app-schema-editor/schema-editor.tsx +++ b/packages/app-schema-editor/schema-editor.tsx @@ -33,7 +33,7 @@ export function SchemaEditor(props: {}) { case "variant-set": return ; case "master-variant-compoent": - return ; + return ; case "variant-instance": return ; case "master-component": From 61650fc2189b21e26d4d9abf3689aabadb182c78 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 31 Aug 2021 23:03:02 +0900 Subject: [PATCH 015/246] support data preview with view code preview --- .../selection-variant-instance.tsx | 33 ++++++++++++++----- .../interface-code-builder/props-builder.ts | 7 +++- packages/design-sdk | 2 +- 3 files changed, 31 insertions(+), 11 deletions(-) diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx index 6d9960c5..a8f66cd8 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx @@ -1,19 +1,19 @@ import React from "react"; import { nodes, utils } from "@design-sdk/core"; import { variant } from "@design-sdk/figma/features"; -import { _FigmaVariantPropertyCompatType_to_string } from "@design-sdk/figma/features/variant"; +import { + _FigmaVariantPropertyCompatType_to_string, + VariantPropertyParser, +} from "@design-sdk/figma/features/variant"; import { CodeBox } from "@ui/codebox"; import { buildInterfaceString } from "../interface-code-builder"; +import { nameit, NameCases } from "@coli.codes/naming"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const master = props.node.mainComponent; - // 0. check if variant compat component (if it's parent is variant-set then it is.) - // load default property set by variant namings. - const names = variant.getVariantNamesSetFromReference_Figma(master); - const variantProperties: variant.VariantProperty[] = - variant.extractTypeFromVariantNames_Figma(names); - + const parser = new VariantPropertyParser(master); + const data_of_properties = parser.getData(master); // display available layer schema as this component's property return ( <> @@ -21,8 +21,10 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { { + name: nameit(props.node.name + "-props", { + case: NameCases.pascal, + }).name, + properties: parser.properties.map((d) => { return { name: d.key, type: d.type, @@ -30,6 +32,19 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { }), })} /> + + + `} + /> ); } diff --git a/packages/app-schema-editor/interface-code-builder/props-builder.ts b/packages/app-schema-editor/interface-code-builder/props-builder.ts index e756abc8..a22e813e 100644 --- a/packages/app-schema-editor/interface-code-builder/props-builder.ts +++ b/packages/app-schema-editor/interface-code-builder/props-builder.ts @@ -16,6 +16,7 @@ import { NumberKeyword, } from "coli"; +import { NameCases, nameit } from "@coli.codes/naming"; import { stringfy } from "@coli.codes/export-string"; export interface InterfaceCodeBuilParam { @@ -47,7 +48,11 @@ export function buildInterface(p: InterfaceCodeBuilParam) { name: p.name, members: p.properties.map((n) => { return new PropertySignature({ - name: new Identifier(n.name), + name: new Identifier( + nameit(n.name, { + case: NameCases.camel, + }).name + ), type: _make_type(n.type), }); }), diff --git a/packages/design-sdk b/packages/design-sdk index 77750900..52295c7b 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit 777509003db2e2a4f99520f99e49e920c4663a94 +Subproject commit 52295c7bd8f8c1da1a92e182addf9e807d87d77d From 5a4cca2e904e95f9e96267dc17dabce297b9ce99 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 1 Sep 2021 12:31:27 +0900 Subject: [PATCH 016/246] update interface naming --- .../selection-variant-instance.tsx | 2 +- .../selection-variant-master.tsx | 30 +++++++++++++------ 2 files changed, 22 insertions(+), 10 deletions(-) diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx index a8f66cd8..1b2d2676 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx @@ -40,7 +40,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { `} diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx index eb368f51..14fb848d 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx @@ -1,18 +1,15 @@ import React from "react"; import { nodes, utils } from "@design-sdk/core"; -import { variant } from "@design-sdk/figma/features"; -import { _FigmaVariantPropertyCompatType_to_string } from "@design-sdk/figma/features/variant"; +import { VariantPropertyParser } from "@design-sdk/figma/features/variant"; import { CodeBox } from "@ui/codebox"; import { buildInterfaceString } from "../interface-code-builder"; +import { nameit, NameCases } from "@coli.codes/naming"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const master = props.node; - // 0. check if variant compat component (if it's parent is variant-set then it is.) - // load default property set by variant namings. - const names = variant.getVariantNamesSetFromReference_Figma(master); - const variantProperties: variant.VariantProperty[] = - variant.extractTypeFromVariantNames_Figma(names); + const parser = new VariantPropertyParser(master); + const data_of_properties = parser.getData(master); return ( <> @@ -20,8 +17,10 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { { + name: nameit(master.parent.name + "-props", { + case: NameCases.pascal, + }).name, + properties: parser.properties.map((d) => { return { name: d.key, type: d.type, @@ -29,6 +28,19 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { }), })} /> + + + `} + /> ); } From bad802df082276bbedd4efe620ff4ba85b8ec1c5 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 1 Sep 2021 14:33:33 +0900 Subject: [PATCH 017/246] add optional type reference to data example code (static, no-coli) --- .../selection-variant-instance.tsx | 21 ++++++++++++------- .../selection-variant-master.tsx | 21 ++++++++++++------- .../example-data-builder.ts | 9 ++++++++ .../interface-code-builder/index.ts | 1 + 4 files changed, 38 insertions(+), 14 deletions(-) create mode 100644 packages/app-schema-editor/interface-code-builder/example-data-builder.ts diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx index 1b2d2676..1c0e4f17 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx @@ -1,12 +1,14 @@ import React from "react"; -import { nodes, utils } from "@design-sdk/core"; -import { variant } from "@design-sdk/figma/features"; +import { nodes } from "@design-sdk/core"; import { _FigmaVariantPropertyCompatType_to_string, VariantPropertyParser, } from "@design-sdk/figma/features/variant"; import { CodeBox } from "@ui/codebox"; -import { buildInterfaceString } from "../interface-code-builder"; +import { + buildeExampleData, + buildInterfaceString, +} from "../interface-code-builder"; import { nameit, NameCases } from "@coli.codes/naming"; export default function (props: { node: nodes.light.IReflectNodeReference }) { @@ -14,6 +16,9 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { const parser = new VariantPropertyParser(master); const data_of_properties = parser.getData(master); + const interfaceName = nameit(props.node.name + "-props", { + case: NameCases.pascal, + }).name; // display available layer schema as this component's property return ( <> @@ -21,9 +26,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { { return { name: d.key, @@ -34,7 +37,11 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { />
    variant
    { return { name: d.key, @@ -30,7 +33,11 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { /> Date: Wed, 1 Sep 2021 15:12:04 +0900 Subject: [PATCH 018/246] add experimental monaco editor support --- app/lib/pages/code/code-screen.tsx | 1 - packages/design-to-code | 2 +- packages/ui-code-box/codebox.tsx | 36 ++++++++++---- packages/ui-code-box/monaco-editor.tsx | 68 ++++++++++++++++++++++++++ packages/ui-code-box/package.json | 8 ++- yarn.lock | 25 ++++++++++ 6 files changed, 127 insertions(+), 13 deletions(-) create mode 100644 packages/ui-code-box/monaco-editor.tsx diff --git a/app/lib/pages/code/code-screen.tsx b/app/lib/pages/code/code-screen.tsx index c69f585c..54724498 100644 --- a/app/lib/pages/code/code-screen.tsx +++ b/app/lib/pages/code/code-screen.tsx @@ -161,7 +161,6 @@ export function CodeScreen() { /> diff --git a/packages/design-to-code b/packages/design-to-code index 44a69333..be87b568 160000 --- a/packages/design-to-code +++ b/packages/design-to-code @@ -1 +1 @@ -Subproject commit 44a693330db5c2218433128a3814e1f79b8d2241 +Subproject commit be87b5685511fe1bc093416ea2f25816aa7e9a50 diff --git a/packages/ui-code-box/codebox.tsx b/packages/ui-code-box/codebox.tsx index 19c09db8..444be9a4 100644 --- a/packages/ui-code-box/codebox.tsx +++ b/packages/ui-code-box/codebox.tsx @@ -8,19 +8,30 @@ import { // import Prism from "prism-react-renderer/prism"; import { useEffect, useState } from "react"; import styled from "@emotion/styled"; +import { MonacoEditor } from "./monaco-editor"; export type SourceInput = string | { raw: string }; -export function CodeBox(props: { +export function CodeBox({ + language, + editor = "prism", + readonly = true, + code, + codeActions, +}: { language: "dart" | "jsx" | string; + editor?: "monaco" | "prism"; + /** + * true by default + */ + readonly?: boolean; code: SourceInput; - app?: any; codeActions?: Array; }) { - const raw = typeof props.code == "string" ? props.code : props.code.raw; + const raw = typeof code == "string" ? code : code.raw; useEffect(() => { - if (props.language == "dart") { + if (language == "dart") { // region custom dart support // https://github.com/FormidableLabs/prism-react-renderer/issues/22#issuecomment-553042928 const dartLang = require("refractor/lang/dart"); @@ -29,17 +40,24 @@ export function CodeBox(props: { } }, []); + const Editor = + editor == "monaco" ? ( + + ) : ( + + ); + return ( <> {/* */} - {props.codeActions && - props.codeActions.map((e) => { + {codeActions && + codeActions.map((e) => { return e; })} {typeof raw == "string" ? ( - + Editor ) : ( <>Invalid code was givven. cannot display result (this is a bug) )} @@ -50,12 +68,12 @@ export function CodeBox(props: { ); } -function PrismCodehighlight(props: { code: string; language: any | Language }) { +function PrismCodehighlight(props: { src: string; language: any | Language }) { return ( {({ className, style, tokens, getLineProps, getTokenProps }) => ( diff --git a/packages/ui-code-box/monaco-editor.tsx b/packages/ui-code-box/monaco-editor.tsx new file mode 100644 index 00000000..9207a542 --- /dev/null +++ b/packages/ui-code-box/monaco-editor.tsx @@ -0,0 +1,68 @@ +import React, { useEffect } from "react"; +import Editor, { DiffEditor, useMonaco, loader } from "@monaco-editor/react"; + +export function MonacoEditor(props: { src: string }) { + const monaco = useMonaco(); + + useEffect(() => { + if (monaco) { + monaco.languages.typescript.typescriptDefaults.setCompilerOptions({ + target: monaco.languages.typescript.ScriptTarget.Latest, + allowNonTsExtensions: true, + moduleResolution: + monaco.languages.typescript.ModuleResolutionKind.NodeJs, + module: monaco.languages.typescript.ModuleKind.CommonJS, + noEmit: true, + esModuleInterop: true, + jsx: monaco.languages.typescript.JsxEmit.React, + reactNamespace: "React", + allowJs: true, + typeRoots: ["node_modules/@types"], + }); + + monaco.languages.typescript.typescriptDefaults.setDiagnosticsOptions({ + noSemanticValidation: false, + noSyntaxValidation: false, + }); + } + }, [props.src]); + + return ( + <> + + + ); +} diff --git a/packages/ui-code-box/package.json b/packages/ui-code-box/package.json index c05e8733..9d592495 100644 --- a/packages/ui-code-box/package.json +++ b/packages/ui-code-box/package.json @@ -1,5 +1,9 @@ { "name": "@ui/codebox", "version": "0.0.0", - "private": false -} \ No newline at end of file + "private": false, + "dependencies": { + "@monaco-editor/react": "^4.2.2", + "monaco-editor": "^0.27.0" + } +} diff --git a/yarn.lock b/yarn.lock index ce92e43e..9f6ae900 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1890,6 +1890,21 @@ prop-types "^15.7.2" react-is "^16.8.0 || ^17.0.0" +"@monaco-editor/loader@^1.1.1": + version "1.1.1" + resolved "https://registry.yarnpkg.com/@monaco-editor/loader/-/loader-1.1.1.tgz#37db648c81a86946d0febd391de00df9c28a0a3d" + integrity sha512-mkT4r4xDjIyOG9o9M6rJDSzEIeonwF80sYErxEvAAL4LncFVdcbNli8Qv6NDqF6nyv6sunuKkDzo4iFjxPL+uQ== + dependencies: + state-local "^1.0.6" + +"@monaco-editor/react@^4.2.2": + version "4.2.2" + resolved "https://registry.yarnpkg.com/@monaco-editor/react/-/react-4.2.2.tgz#636e5b8eb9519ef62f475f9a4a50f62ee0c493a8" + integrity sha512-yDDct+f/mZ946tJEXudvmMC8zXDygkELNujpJGjqJ0gS3WePZmS/IwBBsuJ8JyKQQC3Dy/+Ivg1sSpW+UvCv9g== + dependencies: + "@monaco-editor/loader" "^1.1.1" + prop-types "^15.7.2" + "@mrmlnc/readdir-enhanced@^2.2.1": version "2.2.1" resolved "https://registry.yarnpkg.com/@mrmlnc/readdir-enhanced/-/readdir-enhanced-2.2.1.tgz#524af240d1a360527b730475ecfa1344aa540dde" @@ -7196,6 +7211,11 @@ mocha-js-delegate@^0.2.0: resolved "https://registry.yarnpkg.com/mocha-js-delegate/-/mocha-js-delegate-0.2.0.tgz#3ec26bddbbe106b259fc62e8dbbd2d36d80721f4" integrity sha512-2Sy62SNYHWscIR0UeROWs19RClXhlKofmABgnGzYhNkBauqUr1fysABoWEzyGrTtWTuJTV7conZaWVVIV6cLaw== +monaco-editor@^0.27.0: + version "0.27.0" + resolved "https://registry.yarnpkg.com/monaco-editor/-/monaco-editor-0.27.0.tgz#4b69108bb1dc1f60174c5dcdf51bc5306ab5ba26" + integrity sha512-UhwP78Wb8w0ZSYoKXQNTV/0CHObp6NS3nCt51QfKE6sKyBo5PBsvuDOHoI2ooBakc6uIwByRLHVeT7+yXQe2fQ== + move-concurrently@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/move-concurrently/-/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92" @@ -8840,6 +8860,11 @@ stacktrace-parser@0.1.10: dependencies: type-fest "^0.7.1" +state-local@^1.0.6: + version "1.0.7" + resolved "https://registry.yarnpkg.com/state-local/-/state-local-1.0.7.tgz#da50211d07f05748d53009bee46307a37db386d5" + integrity sha512-HTEHMNieakEnoe33shBYcZ7NX83ACUjCu8c40iOGEZsngj9zRnkqS9j1pqQPXwobB0ZcVTk27REb7COQ0UR59w== + static-extend@^0.1.1: version "0.1.2" resolved "https://registry.yarnpkg.com/static-extend/-/static-extend-0.1.2.tgz#60809c39cbff55337226fd5e0b520f341f1fb5c6" From caf4de39a23d31acc7260836106e4188a4a00b85 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 1 Sep 2021 15:21:13 +0900 Subject: [PATCH 019/246] update loading emptystate --- app/lib/pages/code/code-screen.tsx | 1 + packages/ui-code-box/README.md | 6 ++++++ packages/ui-code-box/monaco-editor.tsx | 1 + 3 files changed, 8 insertions(+) create mode 100644 packages/ui-code-box/README.md diff --git a/app/lib/pages/code/code-screen.tsx b/app/lib/pages/code/code-screen.tsx index 54724498..0823163f 100644 --- a/app/lib/pages/code/code-screen.tsx +++ b/app/lib/pages/code/code-screen.tsx @@ -160,6 +160,7 @@ export function CodeScreen() { onUseroptionChange={onOptionChange} /> diff --git a/packages/ui-code-box/README.md b/packages/ui-code-box/README.md new file mode 100644 index 00000000..2c670d10 --- /dev/null +++ b/packages/ui-code-box/README.md @@ -0,0 +1,6 @@ +## Codebox + +## Monaco editor issues. + +1. loading speed +2. height. - https://github.com/microsoft/monaco-editor/issues/794#issuecomment-688959283 diff --git a/packages/ui-code-box/monaco-editor.tsx b/packages/ui-code-box/monaco-editor.tsx index 9207a542..c5f0f167 100644 --- a/packages/ui-code-box/monaco-editor.tsx +++ b/packages/ui-code-box/monaco-editor.tsx @@ -30,6 +30,7 @@ export function MonacoEditor(props: { src: string }) { return ( <> } theme="vs-dark" height="100%" defaultLanguage="javascript" From bdcf57a50102eebbb13a0c46afb7e93137eb5160 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 1 Sep 2021 17:18:02 +0900 Subject: [PATCH 020/246] update default prisma view theme to vs-dark --- packages/ui-code-box/codebox.tsx | 56 +----------------- packages/ui-code-box/editors/index.ts | 2 + .../{ => editors}/monaco-editor.tsx | 0 packages/ui-code-box/editors/prism-view.tsx | 59 +++++++++++++++++++ 4 files changed, 64 insertions(+), 53 deletions(-) create mode 100644 packages/ui-code-box/editors/index.ts rename packages/ui-code-box/{ => editors}/monaco-editor.tsx (100%) create mode 100644 packages/ui-code-box/editors/prism-view.tsx diff --git a/packages/ui-code-box/codebox.tsx b/packages/ui-code-box/codebox.tsx index 444be9a4..6255d674 100644 --- a/packages/ui-code-box/codebox.tsx +++ b/packages/ui-code-box/codebox.tsx @@ -1,14 +1,6 @@ -import * as React from "react"; -import { - default as PrismHighlight, - defaultProps, - Language, - Prism, -} from "prism-react-renderer"; -// import Prism from "prism-react-renderer/prism"; -import { useEffect, useState } from "react"; +import React from "react"; import styled from "@emotion/styled"; -import { MonacoEditor } from "./monaco-editor"; +import { MonacoEditor, PrismView } from "./editors"; export type SourceInput = string | { raw: string }; @@ -30,21 +22,11 @@ export function CodeBox({ }) { const raw = typeof code == "string" ? code : code.raw; - useEffect(() => { - if (language == "dart") { - // region custom dart support - // https://github.com/FormidableLabs/prism-react-renderer/issues/22#issuecomment-553042928 - const dartLang = require("refractor/lang/dart"); - dartLang(Prism); - // endregion - } - }, []); - const Editor = editor == "monaco" ? ( ) : ( - + ); return ( @@ -68,39 +50,7 @@ export function CodeBox({ ); } -function PrismCodehighlight(props: { src: string; language: any | Language }) { - return ( - - {({ className, style, tokens, getLineProps, getTokenProps }) => ( - - {tokens.map((line, i) => ( -
    - {line.map((token, key) => ( - - ))} -
    - ))} -     - )} -     - ); -} - const CodeWrapper = styled.code` width: max-content; height: auto; `; - -const CodeInnerWrapper = styled.pre` - width: 100%; - /* height: 408px; */ - margin: 0 8px; - /* margin: 0 -8px; */ - padding: 8px; - /* overflow: scroll; */ -`; diff --git a/packages/ui-code-box/editors/index.ts b/packages/ui-code-box/editors/index.ts new file mode 100644 index 00000000..2714766d --- /dev/null +++ b/packages/ui-code-box/editors/index.ts @@ -0,0 +1,2 @@ +export * from "./monaco-editor"; +export * from "./prism-view"; diff --git a/packages/ui-code-box/monaco-editor.tsx b/packages/ui-code-box/editors/monaco-editor.tsx similarity index 100% rename from packages/ui-code-box/monaco-editor.tsx rename to packages/ui-code-box/editors/monaco-editor.tsx diff --git a/packages/ui-code-box/editors/prism-view.tsx b/packages/ui-code-box/editors/prism-view.tsx new file mode 100644 index 00000000..9dc559f2 --- /dev/null +++ b/packages/ui-code-box/editors/prism-view.tsx @@ -0,0 +1,59 @@ +import React, { useEffect } from "react"; +import { + default as PrismHighlight, + defaultProps, + Language, + Prism, +} from "prism-react-renderer"; +// import Prism from "prism-react-renderer/prism"; +import styled from "@emotion/styled"; +import vsdark from "prism-react-renderer/themes/vsDark"; + +export function PrismView(props: { src: string; language: any | Language }) { + useEffect(() => { + if (props.language == "dart") { + // region custom dart support + // https://github.com/FormidableLabs/prism-react-renderer/issues/22#issuecomment-553042928 + const dartLang = require("refractor/lang/dart"); + dartLang(Prism); + // endregion + } + }, [props.language]); + + return ( + + {({ className, style, tokens, getLineProps, getTokenProps }) => ( + + {tokens.map((line, i) => ( +
    + {line.map((token, key) => ( + + ))} +
    + ))} +     + )} +     + ); +} + +const CodeInnerWrapper = styled.pre` + .token { + font-family: "Source Code Pro", "Courier New", "Lucida Console", Monaco; + font-size: 14px; + line-height: 98%; + font-weight: 400; + } + width: 100%; + /* height: 408px; */ + margin: 0 8px; + /* margin: 0 -8px; */ + padding: 8px; + /* overflow: scroll; */ +`; From c4ba7f6375bb7952e0f0752bfb286a6851a2f27f Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 1 Sep 2021 17:35:14 +0900 Subject: [PATCH 021/246] add language props to monaco --- packages/ui-code-box/codebox.tsx | 2 +- packages/ui-code-box/editors/monaco-editor.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/ui-code-box/codebox.tsx b/packages/ui-code-box/codebox.tsx index 6255d674..eb81b993 100644 --- a/packages/ui-code-box/codebox.tsx +++ b/packages/ui-code-box/codebox.tsx @@ -24,7 +24,7 @@ export function CodeBox({ const Editor = editor == "monaco" ? ( - + ) : ( ); diff --git a/packages/ui-code-box/editors/monaco-editor.tsx b/packages/ui-code-box/editors/monaco-editor.tsx index c5f0f167..338c5570 100644 --- a/packages/ui-code-box/editors/monaco-editor.tsx +++ b/packages/ui-code-box/editors/monaco-editor.tsx @@ -1,7 +1,7 @@ import React, { useEffect } from "react"; import Editor, { DiffEditor, useMonaco, loader } from "@monaco-editor/react"; -export function MonacoEditor(props: { src: string }) { +export function MonacoEditor(props: { src: string; language: string }) { const monaco = useMonaco(); useEffect(() => { @@ -30,10 +30,10 @@ export function MonacoEditor(props: { src: string }) { return ( <> } + loading={<>} // TODO: add loading state. theme="vs-dark" height="100%" - defaultLanguage="javascript" + defaultLanguage={props.language} defaultValue={props.src} value={props.src} options={{ From f1d226f0e5b2a3f12351734996ca4a0fd5322fd5 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 1 Sep 2021 19:40:10 +0900 Subject: [PATCH 022/246] update example jsx builder attr key naming case to `camel` --- .../selection-variant-instance.tsx | 15 ++++--- .../selection-variant-master.tsx | 16 ++++--- .../interface-code-builder/index.ts | 1 + .../jsx-view-example-builder.ts | 43 +++++++++++++++++++ packages/design-sdk | 2 +- 5 files changed, 66 insertions(+), 11 deletions(-) create mode 100644 packages/app-schema-editor/interface-code-builder/jsx-view-example-builder.ts diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx index 1c0e4f17..d22e856e 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx @@ -8,6 +8,7 @@ import { CodeBox } from "@ui/codebox"; import { buildeExampleData, buildInterfaceString, + jsxViewExampleBuilder, } from "../interface-code-builder"; import { nameit, NameCases } from "@coli.codes/naming"; @@ -19,6 +20,9 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { const interfaceName = nameit(props.node.name + "-props", { case: NameCases.pascal, }).name; + const viewName = nameit(master.parent.name, { + case: NameCases.pascal, + }).name; // display available layer schema as this component's property return ( <> @@ -46,11 +50,12 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { `} + code={jsxViewExampleBuilder({ + varName: "view", + viewTag: viewName, + typeReference: viewName, + properties: data_of_properties, + })} /> ); diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx index 0db82cb6..8e26fc75 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx @@ -5,6 +5,7 @@ import { CodeBox } from "@ui/codebox"; import { buildeExampleData, buildInterfaceString, + jsxViewExampleBuilder, } from "../interface-code-builder"; import { nameit, NameCases } from "@coli.codes/naming"; @@ -16,6 +17,10 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { const interfaceName = nameit(master.parent.name + "-props", { case: NameCases.pascal, }).name; + const viewName = nameit(master.parent.name, { + case: NameCases.pascal, + }).name; + return ( <>
    variant
    @@ -42,11 +47,12 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { `} + code={jsxViewExampleBuilder({ + varName: "view", + viewTag: viewName, + typeReference: viewName, + properties: data_of_properties, + })} /> ); diff --git a/packages/app-schema-editor/interface-code-builder/index.ts b/packages/app-schema-editor/interface-code-builder/index.ts index d203a6c6..96ff3e7d 100644 --- a/packages/app-schema-editor/interface-code-builder/index.ts +++ b/packages/app-schema-editor/interface-code-builder/index.ts @@ -1,2 +1,3 @@ export * from "./props-builder"; export * from "./example-data-builder"; +export * from "./jsx-view-example-builder"; diff --git a/packages/app-schema-editor/interface-code-builder/jsx-view-example-builder.ts b/packages/app-schema-editor/interface-code-builder/jsx-view-example-builder.ts new file mode 100644 index 00000000..46c0441f --- /dev/null +++ b/packages/app-schema-editor/interface-code-builder/jsx-view-example-builder.ts @@ -0,0 +1,43 @@ +import { + Identifier, + JSX, + JSXAtrribute, + Snippet, + StringLiteral, + TypeReference, + VariableDeclaration, +} from "coli"; +import { stringfy } from "@coli.codes/export-string"; +import { nameit, NameCases } from "@coli.codes/naming"; + +export function jsxViewExampleBuilder(p: { + varName: string; + viewTag: string; + typeReference: string; + properties: { [key: string]: string }; +}): string { + const _attrs = Object.keys(p.properties).map((k) => { + const _v = p.properties[k]; + const keyname = nameit(k, { + case: NameCases.camel, + }).name; + return new JSXAtrribute(keyname, new StringLiteral(_v)); + }); + + const customTagBuilder = JSX.tag(p.viewTag, { + attributes: _attrs, + }); + + const jsx_coli = customTagBuilder.make(); + const vardec = new VariableDeclaration(p.varName, { + kind: "const", + type: new TypeReference({ + typeName: new Identifier(p.typeReference), + }), + initializer: jsx_coli, + }); + + return stringfy(vardec, { + language: "tsx", + }); +} diff --git a/packages/design-sdk b/packages/design-sdk index 52295c7b..77e7b7b7 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit 52295c7bd8f8c1da1a92e182addf9e807d87d77d +Subproject commit 77e7b7b725b92c789d062f71c8881f810189aa11 From 0dcef100b56a1f80fce2bdb0d00d2b7e683f20cf Mon Sep 17 00:00:00 2001 From: You-j Date: Wed, 1 Sep 2021 21:15:08 +0900 Subject: [PATCH 023/246] stash add: interface package --- .../selection-variant-master.tsx | 27 +++++++++++++++++++ packages/app-schema-editor/package.json | 16 ++++++----- yarn.lock | 27 +++++++++++++++++++ 3 files changed, 63 insertions(+), 7 deletions(-) diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx index 0db82cb6..e12b4b12 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx @@ -7,6 +7,12 @@ import { buildInterfaceString, } from "../interface-code-builder"; import { nameit, NameCases } from "@coli.codes/naming"; +import { Interface } from "@code-ui/interface"; +import { + InterfaceAttr, + InterfaceProps, + InterfaceTypeOption, +} from "@code-ui/interface/dist/lib/type"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const master = props.node; @@ -16,9 +22,30 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { const interfaceName = nameit(master.parent.name + "-props", { case: NameCases.pascal, }).name; + + const interfaceAttrs: InterfaceAttr[] = parser.properties.map((d) => { + const _contorls: InterfaceTypeOption = { + name: "name", + value: "string", + description: "type", + }; + return { + label: d.key, + contorls: [_contorls], + }; + }); + return ( <>
    variant
    + + {}} + /> Date: Wed, 1 Sep 2021 21:17:10 +0900 Subject: [PATCH 024/246] update stringfy import --- .../interface-code-builder/jsx-view-example-builder.ts | 2 +- .../app-schema-editor/interface-code-builder/props-builder.ts | 2 +- packages/design-to-code | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/app-schema-editor/interface-code-builder/jsx-view-example-builder.ts b/packages/app-schema-editor/interface-code-builder/jsx-view-example-builder.ts index 46c0441f..46372206 100644 --- a/packages/app-schema-editor/interface-code-builder/jsx-view-example-builder.ts +++ b/packages/app-schema-editor/interface-code-builder/jsx-view-example-builder.ts @@ -6,8 +6,8 @@ import { StringLiteral, TypeReference, VariableDeclaration, + stringfy, } from "coli"; -import { stringfy } from "@coli.codes/export-string"; import { nameit, NameCases } from "@coli.codes/naming"; export function jsxViewExampleBuilder(p: { diff --git a/packages/app-schema-editor/interface-code-builder/props-builder.ts b/packages/app-schema-editor/interface-code-builder/props-builder.ts index a22e813e..7d49431b 100644 --- a/packages/app-schema-editor/interface-code-builder/props-builder.ts +++ b/packages/app-schema-editor/interface-code-builder/props-builder.ts @@ -14,10 +14,10 @@ import { UnionType, BooleanKeyword, NumberKeyword, + stringfy, } from "coli"; import { NameCases, nameit } from "@coli.codes/naming"; -import { stringfy } from "@coli.codes/export-string"; export interface InterfaceCodeBuilParam { name: string; diff --git a/packages/design-to-code b/packages/design-to-code index be87b568..73323631 160000 --- a/packages/design-to-code +++ b/packages/design-to-code @@ -1 +1 @@ -Subproject commit be87b5685511fe1bc093416ea2f25816aa7e9a50 +Subproject commit 733236312e31b46f3aa4170fc9d74db793684eba From fb08e7ef76811b58cc7ef54389d728de28b9a95d Mon Sep 17 00:00:00 2001 From: You-j Date: Wed, 1 Sep 2021 21:18:14 +0900 Subject: [PATCH 025/246] rename --- .../by-selection-state/selection-variant-master.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx index b02cd40c..afe00668 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx @@ -25,14 +25,14 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { }).name; const interfaceAttrs: InterfaceAttr[] = parser.properties.map((d) => { - const _contorls: InterfaceTypeOption = { + const _contorl: InterfaceTypeOption = { name: "name", value: "string", description: "type", }; return { label: d.key, - contorls: [_contorls], + contorls: [_contorl], }; }); const viewName = nameit(master.parent.name, { From 771d308208ec9a27b46d11cca0fbcf5df03aa0fa Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 1 Sep 2021 22:29:42 +0900 Subject: [PATCH 026/246] fix builderror type export --- packages/design-to-code | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/design-to-code b/packages/design-to-code index 73323631..b89e2b61 160000 --- a/packages/design-to-code +++ b/packages/design-to-code @@ -1 +1 @@ -Subproject commit 733236312e31b46f3aa4170fc9d74db793684eba +Subproject commit b89e2b61b4f8b01e6b77844d694b22ff3708f7bf From 7acc20ffe97158131a4a7c26d8707e6d29b104d8 Mon Sep 17 00:00:00 2001 From: You-j Date: Thu, 2 Sep 2021 13:42:10 +0900 Subject: [PATCH 027/246] stash add: type handle func for interface package --- .../selection-variant-master.tsx | 34 ++++++++++++++++--- 1 file changed, 30 insertions(+), 4 deletions(-) diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx index afe00668..b7151121 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx @@ -1,6 +1,10 @@ import React from "react"; import { nodes } from "@design-sdk/core"; -import { VariantPropertyParser } from "@design-sdk/figma/features/variant"; +import { + FigmaNumber, + FigmaVariantPropertyCompatType, + VariantPropertyParser, +} from "@design-sdk/figma/features/variant"; import { CodeBox } from "@ui/codebox"; import { buildeExampleData, @@ -17,6 +21,8 @@ import { export default function (props: { node: nodes.light.IReflectNodeReference }) { const master = props.node; + const regxNumberType = /(number)/; + const regxBooleanType = /(boolean)/; const parser = new VariantPropertyParser(master); const data_of_properties = parser.getData(master); @@ -24,11 +30,31 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { case: NameCases.pascal, }).name; + function typeToString(_data: FigmaVariantPropertyCompatType): any { + if (typeof _data === "symbol") { + const isNumberType = regxNumberType.test(_data.toString()); + const isBooleanType = regxBooleanType.test(_data.toString()); + + if (isNumberType) { + return "number"; + } else if (isBooleanType) { + // will be change to boolean + // it just for interface package typo missing + return "bool"; + } + } else if (_data.type) { + return _data.type; + } else { + return "any"; + } + } + const interfaceAttrs: InterfaceAttr[] = parser.properties.map((d) => { + const attrTypes = typeToString(d.type); const _contorl: InterfaceTypeOption = { - name: "name", - value: "string", - description: "type", + name: attrTypes, + value: attrTypes, + description: `type is ${attrTypes}`, }; return { label: d.key, From 88ee9b5a8254e45e8f9a7361e0649a28f08af9c2 Mon Sep 17 00:00:00 2001 From: You-j Date: Thu, 2 Sep 2021 14:54:17 +0900 Subject: [PATCH 028/246] stash add: interface type handling component --- .../selection-variant-instance.tsx | 9 +++ .../selection-variant-master.tsx | 41 +----------- .../selectoin-code-ui-interface.tsx | 64 +++++++++++++++++++ 3 files changed, 76 insertions(+), 38 deletions(-) create mode 100644 packages/app-schema-editor/by-selection-state/selectoin-code-ui-interface.tsx diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx index d22e856e..4705a4a2 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx @@ -11,6 +11,7 @@ import { jsxViewExampleBuilder, } from "../interface-code-builder"; import { nameit, NameCases } from "@coli.codes/naming"; +import { SelectionCodeUiInterface } from "./selectoin-code-ui-interface"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const master = props.node.mainComponent; @@ -24,9 +25,17 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { case: NameCases.pascal, }).name; // display available layer schema as this component's property + + console.log(parser.properties); return ( <>
    instance of variant
    + + {}} + /> { - const attrTypes = typeToString(d.type); - const _contorl: InterfaceTypeOption = { - name: attrTypes, - value: attrTypes, - description: `type is ${attrTypes}`, - }; - return { - label: d.key, - contorls: [_contorl], - }; - }); const viewName = nameit(master.parent.name, { case: NameCases.pascal, }).name; @@ -69,11 +36,9 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { <>
    variant
    - {}} /> void; +} + +// only using for interface package! +export function typeToString(_data: FigmaVariantPropertyCompatType): any { + if (typeof _data === "symbol") { + const isNumberType = regxNumberType.test(_data.toString()); + const isBooleanType = regxBooleanType.test(_data.toString()); + + if (isNumberType) { + return "number"; + } else if (isBooleanType) { + // will be change to boolean + // it just for interface package typo missing + return "bool"; + } + } else if (_data.type) { + return _data.type; + } else { + return "any"; + } +} + +export function SelectionCodeUiInterface(props: ISelectionCodeUiInterface) { + const interfaceAttrs: InterfaceAttr[] = props.properties.map((d) => { + const attrTypes = typeToString(d.type); + const _contorl: InterfaceTypeOption = { + name: attrTypes, + value: attrTypes, + description: `type is ${attrTypes}`, + }; + return { + label: d.key, + contorls: [_contorl], + }; + }); + return ( + + ); +} From 6560998b46cc663e1bd3d9dd9d112ee05cfa4627 Mon Sep 17 00:00:00 2001 From: You-j Date: Thu, 2 Sep 2021 18:38:45 +0900 Subject: [PATCH 029/246] stash add interfaceHandle --- .../by-selection-state/selectoin-code-ui-interface.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/app-schema-editor/by-selection-state/selectoin-code-ui-interface.tsx b/packages/app-schema-editor/by-selection-state/selectoin-code-ui-interface.tsx index 31808636..4406f6ca 100644 --- a/packages/app-schema-editor/by-selection-state/selectoin-code-ui-interface.tsx +++ b/packages/app-schema-editor/by-selection-state/selectoin-code-ui-interface.tsx @@ -3,6 +3,7 @@ import { Interface } from "@code-ui/interface"; import { InterfaceAttr, InterfaceTypeOption, + KindOfType, } from "@code-ui/interface/dist/lib/type"; import { @@ -52,13 +53,19 @@ export function SelectionCodeUiInterface(props: ISelectionCodeUiInterface) { contorls: [_contorl], }; }); + + function interfaceHandle(field: string, value: string) { + console.log(field); + console.log(value); + } + return ( ); } From 4869052eda0ee317d66f7fdfb7675cdddbbc3847 Mon Sep 17 00:00:00 2001 From: You-j Date: Thu, 2 Sep 2021 19:43:36 +0900 Subject: [PATCH 030/246] update code-ui interfaace version --- packages/app-schema-editor/package.json | 2 +- yarn.lock | 34 ++++++++++++++----------- 2 files changed, 20 insertions(+), 16 deletions(-) diff --git a/packages/app-schema-editor/package.json b/packages/app-schema-editor/package.json index aef95ba0..5f9ba331 100644 --- a/packages/app-schema-editor/package.json +++ b/packages/app-schema-editor/package.json @@ -5,6 +5,6 @@ "version": "0.0.0", "private": false, "dependencies": { - "@code-ui/interface": "^0.0.3" + "@code-ui/interface": "^0.0.5" } } diff --git a/yarn.lock b/yarn.lock index 3717081a..6eca9254 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1047,15 +1047,19 @@ "@abraham/reflection" "^0.8.0" dart-style "^1.3.2-dev" -"@code-ui/color-scheme@0.0.0": +"@code-ui/color-scheme@0.0.0", "@code-ui/color-scheme@^0.0.0": version "0.0.0" resolved "https://registry.yarnpkg.com/@code-ui/color-scheme/-/color-scheme-0.0.0.tgz#9f7b1d32e33193166c2958dec999c9fbf9009c8d" integrity sha512-KqxYgHgEZYEqs0+n2wX4cIAo4PpBtsLDHxWJcUdXcYeV9u0cTVQ9qJA/8M+d44L6Hu8sYz+lM7f5q2o3W4hloQ== -"@code-ui/core@^0.0.0": - version "0.0.0" - resolved "https://registry.yarnpkg.com/@code-ui/core/-/core-0.0.0.tgz#1ded6bfd5ab2ec1f44e40116baa569662a0de60c" - integrity sha512-NTFTGyzdEBmyfQR68slWe99D0VvHQWJnl/5KqS+WZfm1bn0C+i5g/ZEKyqyNnF+F755dTF/rMYCs2eZw0Cn0EA== +"@code-ui/core@^0.0.1": + version "0.0.1" + resolved "https://registry.yarnpkg.com/@code-ui/core/-/core-0.0.1.tgz#42d8ecea95ffa90037778a1b8fde537956158181" + integrity sha512-YoVyYAYOSwxZnSzs+/uyobth0ixC2p7UvkGrOpUpnTcQr8GP6xqZiC6Tm9iHl8L0SRxiQeRdt9rrLljEMyoaiQ== + dependencies: + "@code-ui/color-scheme" "^0.0.0" + "@code-ui/token" "^0.0.1" + handlebars "^4.7.7" "@code-ui/docstring@^0.0.9": version "0.0.9" @@ -1065,22 +1069,22 @@ "@tippyjs/react" "^4.2.5" handlebars "^4.7.7" -"@code-ui/interface@^0.0.3": - version "0.0.3" - resolved "https://registry.yarnpkg.com/@code-ui/interface/-/interface-0.0.3.tgz#f506008427c3cf1a65d404915f21e02c1308fbc7" - integrity sha512-yF0yVLtXuwKPr2sa2JrPItW22NRaBQWkDg2sVkYw20Y395cRtJkk8f5OiJwGkZCCc5swcErn6uERXinFFd7pkw== +"@code-ui/interface@^0.0.5": + version "0.0.5" + resolved "https://registry.yarnpkg.com/@code-ui/interface/-/interface-0.0.5.tgz#0b967f91cf648b7c8e1f60891e95031f28783fcc" + integrity sha512-PXUeukdmEcqHjFCT19MLlvg60HLN4yFIpJuBHzP4zaBEb2ki7O5gwuREuZzPnrXl3A0NcGfK8xecd/17E4ix7w== dependencies: "@code-ui/color-scheme" "0.0.0" - "@code-ui/core" "^0.0.0" - "@code-ui/token" "^0.0.2" + "@code-ui/core" "^0.0.1" "@emotion/react" "^11.4.1" -"@code-ui/token@^0.0.2": - version "0.0.2" - resolved "https://registry.yarnpkg.com/@code-ui/token/-/token-0.0.2.tgz#c44f8cce112a938b7dbd0608a0f3cd2e082e65f8" - integrity sha512-JKNvZ1TcRjW/uHwQ8bghIpEU4w97F+dwWt4TKu8tx9I42Rmy3xeqN9Fq4s9+M2pt3xYjRER7CwYq9s+R2ye6Qg== +"@code-ui/token@^0.0.1": + version "0.0.1" + resolved "https://registry.yarnpkg.com/@code-ui/token/-/token-0.0.1.tgz#910af77dd7deb310406b40fef62eef9db1e15115" + integrity sha512-wKXzAEjIi5zur7En74I1KZBWArkER+aiMHSMxx3uuXzW+gnx3BWtWAqbWmJjDAOjD8WqbwN/frvtidl9M8E3cw== dependencies: "@tippyjs/react" "^4.2.5" + handlebars "^4.7.7" "@design-sdk/figma-remote-api@0.0.0": version "0.0.0" From 22aaf5c084555f4cab2d4d6b63cd6dfcf9bcca62 Mon Sep 17 00:00:00 2001 From: You-j Date: Thu, 2 Sep 2021 19:44:33 +0900 Subject: [PATCH 031/246] add: interface name format --- .../selection-variant-instance.tsx | 54 +++++++++++-------- .../selection-variant-master.tsx | 7 +-- .../props-interface-view.tsx} | 31 +++++++---- 3 files changed, 55 insertions(+), 37 deletions(-) rename packages/app-schema-editor/{by-selection-state/selectoin-code-ui-interface.tsx => interface-code-builder/props-interface-view.tsx} (65%) diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx index 4705a4a2..b93a7648 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx @@ -1,4 +1,4 @@ -import React from "react"; +import React, { useState } from "react"; import { nodes } from "@design-sdk/core"; import { _FigmaVariantPropertyCompatType_to_string, @@ -11,48 +11,56 @@ import { jsxViewExampleBuilder, } from "../interface-code-builder"; import { nameit, NameCases } from "@coli.codes/naming"; -import { SelectionCodeUiInterface } from "./selectoin-code-ui-interface"; +import { PropsInterfaceView } from "../interface-code-builder/props-interface-view"; export default function (props: { node: nodes.light.IReflectNodeReference }) { - const master = props.node.mainComponent; + const _format_interface_pascal = (n) => { + return nameit(n + "-props", { + case: NameCases.pascal, + }).name; + }; + + const [interfaceName, setInterfaceName] = useState( + _format_interface_pascal(props.node.name) + ); + + const formattedInterfaceName = _format_interface_pascal(interfaceName); + const master = props.node.mainComponent; const parser = new VariantPropertyParser(master); const data_of_properties = parser.getData(master); - const interfaceName = nameit(props.node.name + "-props", { - case: NameCases.pascal, - }).name; + const interface_raw_code = buildInterfaceString({ + name: formattedInterfaceName, + properties: parser.properties.map((d) => { + return { + name: d.key, + type: d.type, + }; + }), + }); const viewName = nameit(master.parent.name, { case: NameCases.pascal, }).name; // display available layer schema as this component's property - console.log(parser.properties); return ( <>
    instance of variant
    - - { + setInterfaceName(n); + }} properties={parser.properties} - interfaceName={interfaceName} + initialInterfaceName={interfaceName} onChange={() => {}} /> - { - return { - name: d.key, - type: d.type, - }; - }), - })} - /> + diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx index 6a91a7a4..76d03f53 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx @@ -17,7 +17,7 @@ import { InterfaceProps, InterfaceTypeOption, } from "@code-ui/interface/dist/lib/type"; -import { SelectionCodeUiInterface } from "./selectoin-code-ui-interface"; +import { PropsInterfaceView } from "../interface-code-builder/props-interface-view"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const master = props.node; @@ -36,9 +36,10 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { <>
    variant
    - {}} properties={parser.properties} - interfaceName={interfaceName} + initialInterfaceName={interfaceName} onChange={() => {}} /> void; + onInterfaceNameChange: (n: string) => void; } // only using for interface package! @@ -40,7 +42,10 @@ export function typeToString(_data: FigmaVariantPropertyCompatType): any { } } -export function SelectionCodeUiInterface(props: ISelectionCodeUiInterface) { +export function PropsInterfaceView(props: ISelectionCodeUiInterface) { + const [interfaceName, setInterfaceName] = useState( + props.initialInterfaceName + ); const interfaceAttrs: InterfaceAttr[] = props.properties.map((d) => { const attrTypes = typeToString(d.type); const _contorl: InterfaceTypeOption = { @@ -49,23 +54,27 @@ export function SelectionCodeUiInterface(props: ISelectionCodeUiInterface) { description: `type is ${attrTypes}`, }; return { - label: d.key, + label: nameit(d.key, { + case: NameCases.camel, + }).name, contorls: [_contorl], }; }); - function interfaceHandle(field: string, value: string) { - console.log(field); - console.log(value); + function onchange(field: string, value: string) { + if (field == "interfaceName") { + setInterfaceName(value); + props.onInterfaceNameChange(value); + } } return ( - ); } From 7508d1a4e68a5e472de494fa49e33f2c31483860 Mon Sep 17 00:00:00 2001 From: You-j Date: Thu, 2 Sep 2021 20:13:40 +0900 Subject: [PATCH 032/246] remove test version tite --- .../by-selection-state/selection-variant-instance.tsx | 1 - .../by-selection-state/selection-variant-master.tsx | 2 -- packages/app-schema-editor/schema-editor.tsx | 1 - 3 files changed, 4 deletions(-) diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx index b93a7648..9c4cfb17 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx @@ -45,7 +45,6 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { return ( <> -
    instance of variant
    {/* TODO: add copy - 1interface_raw_code1 */} { diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx index 76d03f53..14792430 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx @@ -34,8 +34,6 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { return ( <> -
    variant
    - {}} properties={parser.properties} diff --git a/packages/app-schema-editor/schema-editor.tsx b/packages/app-schema-editor/schema-editor.tsx index 7a72037c..e9fbdc1e 100644 --- a/packages/app-schema-editor/schema-editor.tsx +++ b/packages/app-schema-editor/schema-editor.tsx @@ -47,7 +47,6 @@ export function SchemaEditor(props: {}) { return ( <> -

    schema editor

    ); From 220b3e1938b6b407cb5d2cf0a6c5ea6e99e8417d Mon Sep 17 00:00:00 2001 From: You-j Date: Fri, 3 Sep 2021 01:38:33 +0900 Subject: [PATCH 033/246] stash style fix: reset body style --- app/lib/app.css | 5 ++ app/lib/components/comming-soon-template.tsx | 5 +- app/lib/components/upload-steps.tsx | 2 +- app/lib/main/index.tsx | 6 +- app/lib/pages/code/code-screen.tsx | 1 - .../code/footer-action/code-screen-footer.tsx | 18 ++++-- .../code/footer-action/next-upload-button.tsx | 2 - packages/app-design-lint/lint-screen.tsx | 59 ++++++++++--------- packages/app-icons-loader/icons-loader.tsx | 1 - .../by-selection-state/selection-none.tsx | 2 +- packages/ui-code-box/editors/prism-view.tsx | 8 ++- packages/ui-previewer/preview.css | 1 - 12 files changed, 61 insertions(+), 49 deletions(-) diff --git a/app/lib/app.css b/app/lib/app.css index 3f3c5600..745c57aa 100644 --- a/app/lib/app.css +++ b/app/lib/app.css @@ -2,6 +2,11 @@ font-family: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif; } +body { + /* for reset user agnet style -> margin: 8px */ + margin: 0px; +} + /* If you want to change the font, be sure to check the following! tippy-1 is `tippyjs' id. it is only for drop item in @code-ui/docstring diff --git a/app/lib/components/comming-soon-template.tsx b/app/lib/components/comming-soon-template.tsx index de9b03ec..bccb3e4e 100644 --- a/app/lib/components/comming-soon-template.tsx +++ b/app/lib/components/comming-soon-template.tsx @@ -26,10 +26,7 @@ export function CommingSoonTemplate(props: Props) { ); } -const Wrapper = styled.div` - /* -8 is for reset body margin */ - margin: 0 -8px; -`; +const Wrapper = styled.div``; const ImageBox = styled.div``; diff --git a/app/lib/components/upload-steps.tsx b/app/lib/components/upload-steps.tsx index 7fa8ae16..2134fbc8 100644 --- a/app/lib/components/upload-steps.tsx +++ b/app/lib/components/upload-steps.tsx @@ -142,7 +142,7 @@ const Item = styled(motion.h5)` const FooterButtonWrapper = styled.div` position: absolute; - bottom: 8px; + bottom: 16px; width: calc(100% - 40px); `; const IconBox = styled.div` diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx index 3d571037..702e21df 100644 --- a/app/lib/main/index.tsx +++ b/app/lib/main/index.tsx @@ -123,7 +123,7 @@ function TabsLayout(props: { return (
    {props.isTabVisible && ( -
    +
    { - <> + {_can_show_preview && ( )} - + } ); @@ -63,13 +63,15 @@ export function CodeScreenFooter(props: ICodeScreenFooter) { const CodeFooterCtaWrapper = styled.footer` /* 32 is padding */ - width: calc(100% - 32px); - padding: 12px 16px; + /* width: calc(100% - 32px); */ + width: 100%; + padding: 12px 0; display: flex; background: #fff; position: absolute; left: 0; bottom: 0; + display: flex; button { &:first-child { @@ -77,8 +79,14 @@ const CodeFooterCtaWrapper = styled.footer` } } `; + +const InnerWrapper = styled.div` + width: 100%; + margin: 0 16px; +`; const PreviewButton = styled.button` ${WhtieButtonStyle} /* 1/3 size. 12 is wrapper padding */ - width: calc(33.333% - 12px); + /* width: calc(33.333% - 12px); */ + width: 33.333%; `; diff --git a/app/lib/pages/code/footer-action/next-upload-button.tsx b/app/lib/pages/code/footer-action/next-upload-button.tsx index bedfb3ef..68955dc5 100644 --- a/app/lib/pages/code/footer-action/next-upload-button.tsx +++ b/app/lib/pages/code/footer-action/next-upload-button.tsx @@ -83,8 +83,6 @@ function buildOpenUrlForRegisteredScene(sceneId: string) { const NextStepButton = styled.button` ${BlackButtonStyle} - /* 2/3 size. 12 is wrapper padding */ - width: calc(66.666% - 12px); /* FIXME: stupid! */ &:hover { color: #fff; diff --git a/packages/app-design-lint/lint-screen.tsx b/packages/app-design-lint/lint-screen.tsx index c7f70149..2abe983a 100644 --- a/packages/app-design-lint/lint-screen.tsx +++ b/packages/app-design-lint/lint-screen.tsx @@ -103,7 +103,7 @@ export const LintScreen = () => { return ( <> {/* */} - + {!!selection ? ( <>{handleSelectionLayer()} ) : ( @@ -113,32 +113,34 @@ export const LintScreen = () => { )} {ErrorLineItem()} - {feedbacks.length === 0 ? ( - - Run lint - - ) : ( - - { - setIsFixingMode(true); - }} + + {feedbacks.length === 0 ? ( + - Jump to first error - - { - setFeedbacks([]); // clear feedbacks - }} - > - Clear - - - )} - + Run lint + + ) : ( + <> + { + setIsFixingMode(true); + }} + > + Jump to first error + + { + setFeedbacks([]); // clear feedbacks + }} + > + Clear + + + )} + + -
    nothing selected
    +
    nothing selected
    ); } diff --git a/packages/ui-code-box/editors/prism-view.tsx b/packages/ui-code-box/editors/prism-view.tsx index 9dc559f2..1e66474f 100644 --- a/packages/ui-code-box/editors/prism-view.tsx +++ b/packages/ui-code-box/editors/prism-view.tsx @@ -51,9 +51,13 @@ const CodeInnerWrapper = styled.pre` font-weight: 400; } width: 100%; + padding: 8px; + + // for reset pre user agent style + margin: 0; + /* height: 408px; */ - margin: 0 8px; + /* margin: 0 8px; */ /* margin: 0 -8px; */ - padding: 8px; /* overflow: scroll; */ `; diff --git a/packages/ui-previewer/preview.css b/packages/ui-previewer/preview.css index 355807bb..9db8ec41 100644 --- a/packages/ui-previewer/preview.css +++ b/packages/ui-previewer/preview.css @@ -1,5 +1,4 @@ .preview { - margin: 0 -8px; padding: 12px; background: #f1f1f1; height: calc(200px - 24px); From 1dcc75b998c8c4e54a49509ff74a50260199f4cf Mon Sep 17 00:00:00 2001 From: You-j Date: Fri, 3 Sep 2021 04:09:35 +0900 Subject: [PATCH 034/246] fix style: footer btn style --- .../code/footer-action/code-screen-footer.tsx | 5 +- packages/app-design-lint/lint-screen.tsx | 68 ++++++++++--------- .../selection-variant-instance.tsx | 62 ++++++++++------- .../selection-variant-master.tsx | 12 +++- packages/ui-core/button-style/index.ts | 2 +- 5 files changed, 86 insertions(+), 63 deletions(-) diff --git a/app/lib/pages/code/footer-action/code-screen-footer.tsx b/app/lib/pages/code/footer-action/code-screen-footer.tsx index 340e1643..8557d49a 100644 --- a/app/lib/pages/code/footer-action/code-screen-footer.tsx +++ b/app/lib/pages/code/footer-action/code-screen-footer.tsx @@ -86,7 +86,6 @@ const InnerWrapper = styled.div` `; const PreviewButton = styled.button` ${WhtieButtonStyle} - /* 1/3 size. 12 is wrapper padding */ - /* width: calc(33.333% - 12px); */ - width: 33.333%; + /* temp before add button component */ + width: 36%; `; diff --git a/packages/app-design-lint/lint-screen.tsx b/packages/app-design-lint/lint-screen.tsx index 2abe983a..2e610589 100644 --- a/packages/app-design-lint/lint-screen.tsx +++ b/packages/app-design-lint/lint-screen.tsx @@ -114,31 +114,33 @@ export const LintScreen = () => { {ErrorLineItem()} - {feedbacks.length === 0 ? ( - - Run lint - - ) : ( - <> - { - setIsFixingMode(true); - }} + + {feedbacks.length === 0 ? ( + - Jump to first error - - { - setFeedbacks([]); // clear feedbacks - }} - > - Clear - - - )} + Run lint + + ) : ( + <> + { + setIsFixingMode(true); + }} + > + Jump to first error + + { + setFeedbacks([]); // clear feedbacks + }} + > + Clear + + + )} + @@ -213,30 +215,34 @@ const ErrorList = styled.ul` `; const FooterActionsWrapper = styled.div` - // FIXME: - /* width: calc(100% - 32px); */ width: 100%; display: flex; position: absolute; bottom: 16px; + left: 0; +`; + +const InnerWrapper = styled.div` + width: 100%; + margin: 0 16px; `; const RunLintButtton = styled.button` ${BlackButtonStyle} - width: calc(100% - 32px); // FIXME: - position: absolute; - bottom: 16px; + width: 100%; `; const FirstErrorButton = styled.button` ${BlackButtonStyle} - width: 66.6666%; + /* temp before add button component */ + width: 61%; margin-right: 8px; `; const ClearButton = styled.button` ${TransparentButtonStyle} - width: 33.3333%; + /* temp before add button component */ + width: 36%; background: #fff; `; diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx index 9c4cfb17..555e927b 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx @@ -12,6 +12,7 @@ import { } from "../interface-code-builder"; import { nameit, NameCases } from "@coli.codes/naming"; import { PropsInterfaceView } from "../interface-code-builder/props-interface-view"; +import styled from "@emotion/styled"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const _format_interface_pascal = (n) => { @@ -45,34 +46,43 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { return ( <> - {/* TODO: add copy - 1interface_raw_code1 */} - { - setInterfaceName(n); - }} - properties={parser.properties} - initialInterfaceName={interfaceName} - onChange={() => {}} - /> + + {/* TODO: add copy - 1interface_raw_code1 */} + { + setInterfaceName(n); + }} + properties={parser.properties} + initialInterfaceName={interfaceName} + onChange={() => {}} + /> - + - + + ); } + +const CodeStyleWrapper = styled.div` + height: calc(100vh - 292px); + background: #1e1e1e; + overflow: auto; + padding: 0 6px; +`; diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx index 14792430..438f221f 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx @@ -18,6 +18,7 @@ import { InterfaceTypeOption, } from "@code-ui/interface/dist/lib/type"; import { PropsInterfaceView } from "../interface-code-builder/props-interface-view"; +import styled from "@emotion/styled"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const master = props.node; @@ -33,7 +34,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { }).name; return ( - <> + {}} properties={parser.properties} @@ -70,6 +71,13 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { properties: data_of_properties, })} /> - + ); } + +const CodeStyleWrapper = styled.div` + height: calc(100vh - 292px); + background: #1e1e1e; + overflow: auto; + padding: 0 6px; +`; diff --git a/packages/ui-core/button-style/index.ts b/packages/ui-core/button-style/index.ts index dac1c4f5..a67b4987 100644 --- a/packages/ui-core/button-style/index.ts +++ b/packages/ui-core/button-style/index.ts @@ -22,7 +22,7 @@ export const BlackButtonStyle = css` border: 1px solid #151617; background: #151617; color: #fff; - width: 66.666666%; + width: 61%; // for reset material-ui button style &:hover { From 0b48997b0fd37e676453a0283a3c1ee64fc50e48 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 3 Sep 2021 04:31:27 +0900 Subject: [PATCH 035/246] init package --- packages/app-design-text-code-syntax-hightlight/index.ts | 0 .../app-design-text-code-syntax-hightlight/package.json | 7 +++++++ 2 files changed, 7 insertions(+) create mode 100644 packages/app-design-text-code-syntax-hightlight/index.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/package.json diff --git a/packages/app-design-text-code-syntax-hightlight/index.ts b/packages/app-design-text-code-syntax-hightlight/index.ts new file mode 100644 index 00000000..e69de29b diff --git a/packages/app-design-text-code-syntax-hightlight/package.json b/packages/app-design-text-code-syntax-hightlight/package.json new file mode 100644 index 00000000..12cc251a --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/package.json @@ -0,0 +1,7 @@ +{ + "name": "@app/design-text-code-syntax-highlight", + "version": "0.0.0", + "description": "code syntax highlighter for design texts", + "private": false, + "license": "BSD-3-Clause" +} \ No newline at end of file From 6fc1dd9ccdcf436e1199ef9406b9ac0c3eff80a3 Mon Sep 17 00:00:00 2001 From: You-j Date: Fri, 3 Sep 2021 04:38:35 +0900 Subject: [PATCH 036/246] fix style: code screen scroll issue --- app/lib/pages/code/code-screen.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/app/lib/pages/code/code-screen.tsx b/app/lib/pages/code/code-screen.tsx index f127562c..bbb12014 100644 --- a/app/lib/pages/code/code-screen.tsx +++ b/app/lib/pages/code/code-screen.tsx @@ -202,8 +202,8 @@ const CopyCodeButton = styled.div` `; const CodeWrapper = styled.div` - /* 374 is preview and navigation height*/ - height: calc(100vh - 374px); + /* 366px is preview(200) + navigation(52+40) + footer btn wrapper(74) height*/ + height: calc(100vh - 366px); background: rgb(42, 39, 52); - overflow-y: scroll; + overflow-y: hidden; `; From 90c3442eefb41a908a91a871a022c6e398b791d1 Mon Sep 17 00:00:00 2001 From: You-j Date: Fri, 3 Sep 2021 04:39:17 +0900 Subject: [PATCH 037/246] fix style: icon loader interval --- packages/app-icons-loader/icons-loader.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/app-icons-loader/icons-loader.tsx b/packages/app-icons-loader/icons-loader.tsx index cf1b1f60..0eae7ecd 100644 --- a/packages/app-icons-loader/icons-loader.tsx +++ b/packages/app-icons-loader/icons-loader.tsx @@ -367,12 +367,12 @@ const SearchBar = styled.div` width: 100%; font-size: 14px; height: 55px; + padding: 8px; display: flex; align-items: center; svg { - margin: 10px; - margin-left: 8px; + margin: 10px 10px 10px 8px; font-size: 20px; } `; From 5a78312ea5174624cdffd92c3fbc3e5b5e4e46f7 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 3 Sep 2021 06:21:21 +0900 Subject: [PATCH 038/246] implement simple text content syntax highlighter --- app/__plugin__init__/index.ts | 1 + app/lib/main/index.tsx | 5 +- .../LICENSE | 31 + .../README.md | 11 + .../__plugin/change-color-usecase.ts | 94 ++ .../__plugin/event.ts | 19 + .../__plugin/index.ts | 20 + .../color-schema/color-schemaList.ts | 92 ++ .../color-schema/index.ts | 185 ++++ .../color-schema/schemas/a11yDark.ts | 203 ++++ .../color-schema/schemas/a11yLight.ts | 235 +++++ .../color-schema/schemas/agate.ts | 155 +++ .../color-schema/schemas/anOldHope.ts | 227 +++++ .../color-schema/schemas/androidstudio.ts | 179 ++++ .../color-schema/schemas/arduinoLight.ts | 144 +++ .../color-schema/schemas/arta.ts | 110 +++ .../color-schema/schemas/ascetic.ts | 23 + .../color-schema/schemas/atelierCaveDark.ts | 243 +++++ .../color-schema/schemas/atelierCaveLight.ts | 243 +++++ .../color-schema/schemas/atelierDuneDark.ts | 211 ++++ .../color-schema/schemas/atelierDuneLight.ts | 219 +++++ .../schemas/atelierEstuaryDark.ts | 235 +++++ .../schemas/atelierEstuaryLight.ts | 235 +++++ .../color-schema/schemas/atelierForestDark.ts | 219 +++++ .../schemas/atelierForestLight.ts | 219 +++++ .../color-schema/schemas/atelierHeathDark.ts | 227 +++++ .../color-schema/schemas/atelierHeathLight.ts | 227 +++++ .../schemas/atelierLakesideDark.ts | 227 +++++ .../schemas/atelierLakesideLight.ts | 227 +++++ .../schemas/atelierPlateauDark.ts | 243 +++++ .../schemas/atelierPlateauLight.ts | 243 +++++ .../schemas/atelierSavannaDark.ts | 227 +++++ .../schemas/atelierSavannaLight.ts | 227 +++++ .../schemas/atelierSeasideDark.ts | 219 +++++ .../schemas/atelierSeasideLight.ts | 227 +++++ .../schemas/atelierSulphurpoolDark.ts | 219 +++++ .../schemas/atelierSulphurpoolLight.ts | 207 ++++ .../color-schema/schemas/atomOneDark.ts | 251 +++++ .../schemas/atomOneDarkReasonable.ts | 223 +++++ .../color-schema/schemas/atomOneLight.ts | 283 ++++++ .../color-schema/schemas/brownPaper.ts | 101 ++ .../color-schema/schemas/codepenEmbed.ts | 208 ++++ .../color-schema/schemas/colorBrewer.ts | 216 +++++ .../color-schema/schemas/darcula.ts | 260 +++++ .../color-schema/schemas/dark.ts | 29 + .../color-schema/schemas/defaultColor.ts | 140 +++ .../color-schema/schemas/docco.ts | 147 +++ .../color-schema/schemas/dracula.ts | 137 +++ .../color-schema/schemas/far.ts | 37 + .../color-schema/schemas/foundation.ts | 53 ++ .../color-schema/schemas/github.ts | 71 ++ .../color-schema/schemas/githubGist.ts | 170 ++++ .../color-schema/schemas/gml.ts | 256 +++++ .../color-schema/schemas/googlecode.ts | 62 ++ .../color-schema/schemas/gorilla.ts | 127 +++ .../schemas/gorillaColorSchema.ts | 44 + .../color-schema/schemas/grayscale.ts | 36 + .../color-schema/schemas/gruvboxDark.ts | 320 +++++++ .../color-schema/schemas/gruvboxLight.ts | 280 ++++++ .../color-schema/schemas/hopscotch.ts | 255 +++++ .../color-schema/schemas/hybrid.ts | 246 +++++ .../color-schema/schemas/idea.ts | 77 ++ .../color-schema/schemas/irBlack.ts | 197 ++++ .../color-schema/schemas/isblEditorDark.ts | 279 ++++++ .../color-schema/schemas/isblEditorLight.ts | 104 ++ .../color-schema/schemas/kimbieDark.ts | 251 +++++ .../color-schema/schemas/kimbieLight.ts | 251 +++++ .../color-schema/schemas/lightfair.ts | 203 ++++ .../color-schema/schemas/magula.ts | 235 +++++ .../color-schema/schemas/monoBlue.ts | 148 +++ .../color-schema/schemas/monokai.ts | 201 ++++ .../color-schema/schemas/monokaiSublime.ts | 245 +++++ .../color-schema/schemas/noctis.ts | 127 +++ .../color-schema/schemas/nord.ts | 328 +++++++ .../color-schema/schemas/obsidian.ts | 190 ++++ .../color-schema/schemas/ocean.ts | 243 +++++ .../color-schema/schemas/paraisoDark.ts | 243 +++++ .../color-schema/schemas/paraisoLight.ts | 243 +++++ .../color-schema/schemas/pojoaque.ts | 207 ++++ .../color-schema/schemas/purebasic.ts | 111 +++ .../color-schema/schemas/qtcreatorDark.ts | 150 +++ .../color-schema/schemas/qtcreatorLight.ts | 118 +++ .../color-schema/schemas/railscasts.ts | 239 +++++ .../color-schema/schemas/rainbow.ts | 204 ++++ .../color-schema/schemas/routeros.ts | 167 ++++ .../color-schema/schemas/schoolBook.ts | 106 +++ .../color-schema/schemas/shadesOfPurple.ts | 169 ++++ .../color-schema/schemas/solarizedDark.ts | 255 +++++ .../color-schema/schemas/solarizedLight.ts | 255 +++++ .../color-schema/schemas/sunburst.ts | 223 +++++ .../color-schema/schemas/tomorrow.ts | 223 +++++ .../color-schema/schemas/tomorrowNight.ts | 190 ++++ .../color-schema/schemas/tomorrowNightBlue.ts | 138 +++ .../schemas/tomorrowNightBright.ts | 243 +++++ .../schemas/tomorrowNightEighties.ts | 145 +++ .../color-schema/schemas/vs.ts | 145 +++ .../color-schema/schemas/vs2015.ts | 339 +++++++ .../color-schema/schemas/xcode.ts | 198 ++++ .../color-schema/schemas/xt256.ts | 106 +++ .../color-schema/schemas/zenburn.ts | 227 +++++ .../components/highlight-executor.tsx | 67 ++ .../components/select.tsx | 65 ++ ...esign-text-code-syntax-highligh-screen.css | 26 + ...esign-text-code-syntax-highligh-screen.tsx | 44 + .../index.ts | 1 + .../language/index.ts | 1 + .../language/language-list.ts | 187 ++++ .../models/index.ts | 1 + .../models/schema-and-language.ts | 7 + .../package.json | 10 +- .../preferences/index.ts | 27 + web/next.config.js | 1 + yarn.lock | 898 +++++++++--------- 113 files changed, 18857 insertions(+), 431 deletions(-) create mode 100644 packages/app-design-text-code-syntax-hightlight/LICENSE create mode 100644 packages/app-design-text-code-syntax-hightlight/README.md create mode 100644 packages/app-design-text-code-syntax-hightlight/__plugin/change-color-usecase.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/__plugin/event.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/__plugin/index.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/color-schemaList.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/index.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/a11yDark.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/a11yLight.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/agate.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/anOldHope.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/androidstudio.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/arduinoLight.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/arta.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/ascetic.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierCaveDark.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierCaveLight.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierDuneDark.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierDuneLight.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierEstuaryDark.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierEstuaryLight.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierForestDark.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierForestLight.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierHeathDark.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierHeathLight.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierLakesideDark.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierLakesideLight.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierPlateauDark.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierPlateauLight.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierSavannaDark.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierSavannaLight.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierSeasideDark.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierSeasideLight.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierSulphurpoolDark.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierSulphurpoolLight.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atomOneDark.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atomOneDarkReasonable.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atomOneLight.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/brownPaper.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/codepenEmbed.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/colorBrewer.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/darcula.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/dark.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/defaultColor.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/docco.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/dracula.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/far.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/foundation.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/github.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/githubGist.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/gml.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/googlecode.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/gorilla.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/gorillaColorSchema.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/grayscale.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/gruvboxDark.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/gruvboxLight.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/hopscotch.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/hybrid.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/idea.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/irBlack.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/isblEditorDark.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/isblEditorLight.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/kimbieDark.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/kimbieLight.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/lightfair.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/magula.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/monoBlue.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/monokai.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/monokaiSublime.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/noctis.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/nord.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/obsidian.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/ocean.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/paraisoDark.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/paraisoLight.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/pojoaque.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/purebasic.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/qtcreatorDark.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/qtcreatorLight.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/railscasts.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/rainbow.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/routeros.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/schoolBook.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/shadesOfPurple.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/solarizedDark.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/solarizedLight.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/sunburst.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/tomorrow.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/tomorrowNight.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/tomorrowNightBlue.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/tomorrowNightBright.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/tomorrowNightEighties.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/vs.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/vs2015.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/xcode.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/xt256.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/color-schema/schemas/zenburn.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/components/highlight-executor.tsx create mode 100644 packages/app-design-text-code-syntax-hightlight/components/select.tsx create mode 100644 packages/app-design-text-code-syntax-hightlight/design-text-code-syntax-highligh-screen.css create mode 100644 packages/app-design-text-code-syntax-hightlight/design-text-code-syntax-highligh-screen.tsx create mode 100644 packages/app-design-text-code-syntax-hightlight/language/index.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/language/language-list.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/models/index.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/models/schema-and-language.ts create mode 100644 packages/app-design-text-code-syntax-hightlight/preferences/index.ts diff --git a/app/__plugin__init__/index.ts b/app/__plugin__init__/index.ts index ef25073e..30194f2a 100644 --- a/app/__plugin__init__/index.ts +++ b/app/__plugin__init__/index.ts @@ -2,3 +2,4 @@ import "../lib/pages/code/__plugin"; import "@app/data-mapper/__plugin"; import "@app/design-lint/__plugin"; +import "@app/design-text-code-syntax-highlight/__plugin"; diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx index 3d571037..6b8fd39f 100644 --- a/app/lib/main/index.tsx +++ b/app/lib/main/index.tsx @@ -24,6 +24,7 @@ import { FontReplacerScreen } from "@toolbox/font-replacer"; import { CodeScreen } from "../pages/code/code-screen"; import { AboutScreen } from "../pages/about"; import { SigninScreen } from "@app/auth"; +import { DesignTextCdoeSyntaxHighligherScreen } from "@app/design-text-code-syntax-highlight"; // endregion screens import // @@ -61,7 +62,9 @@ function Screen(props: { screen: WorkScreen }) { case WorkScreen.component: return ; case WorkScreen.layout: - return ; + // return ; + // FIXME: temporary dev + return ; case WorkScreen.icon: return ; case WorkScreen.lint: diff --git a/packages/app-design-text-code-syntax-hightlight/LICENSE b/packages/app-design-text-code-syntax-hightlight/LICENSE new file mode 100644 index 00000000..906243e0 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/LICENSE @@ -0,0 +1,31 @@ +BSD 3-Clause License + +Copyright (c) 2019, ixtgorilla +Copyright (c) 2021, Grida.co + +All rights reserved. + +Redistribution and use in source and binary forms, with or without +modification, are permitted provided that the following conditions are met: + +1. Redistributions of source code must retain the above copyright notice, this + list of conditions and the following disclaimer. + +2. Redistributions in binary form must reproduce the above copyright notice, + this list of conditions and the following disclaimer in the documentation + and/or other materials provided with the distribution. + +3. Neither the name of the copyright holder nor the names of its + contributors may be used to endorse or promote products derived from + this software without specific prior written permission. + +THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" +AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE +IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE +DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE +FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL +DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR +SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER +CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, +OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE +OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. \ No newline at end of file diff --git a/packages/app-design-text-code-syntax-hightlight/README.md b/packages/app-design-text-code-syntax-hightlight/README.md new file mode 100644 index 00000000..a5ace922 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/README.md @@ -0,0 +1,11 @@ +# code syntax highligher for design + +## Disclaimer + +> This package was initiated from https://github.com/ixtgorilla/figma-code-highlighter + +Under `BSD-3` + +## About Highlight js. + +do not upgrade hightlight.js version - it won't run for figma. current tested version is `9.15.10` diff --git a/packages/app-design-text-code-syntax-hightlight/__plugin/change-color-usecase.ts b/packages/app-design-text-code-syntax-hightlight/__plugin/change-color-usecase.ts new file mode 100644 index 00000000..64f7c87a --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/__plugin/change-color-usecase.ts @@ -0,0 +1,94 @@ +import { highlightAuto } from "highlight.js"; +import * as colorSchema from "../color-schema"; +import { SchemaAndLanguage } from "../models/schema-and-language"; +import xpath from "xpath"; +const dom = require("xmldom").DOMParser; + +function* walkTree(node) { + yield node; + let children = node.childNodes; + if (children) { + for (let i = 0; i < children.length; i++) { + yield* walkTree(children[i]); + } + } +} + +function countLength(node): number { + let lng: number = 0; + + if (node.childNodes) { + /* ElementNode */ + for (let i = 0; i < node.childNodes.length; i++) { + lng = lng + countLength(node.childNodes[i]); + } + } else { + /* TextNode */ + lng = lng + node.length; + } + + return lng; +} + +const changeColorUsecase = ( + selections: ReadonlyArray, + schemaAndLanguage: SchemaAndLanguage +) => { + selections.map((item) => { + if (item.type == "TEXT") { + let itm: TextNode = item; + + const result = highlightAuto(itm.characters, [ + schemaAndLanguage.language, + ]); + const str: string = `
    ${result.value}
    `; + // const str = ""; + const doc = new dom().parseFromString(str); + + let nodes: Node = xpath.select("//div", doc)[0] as Node; + let results = []; + let length: number = 0; + + for (let i = 0; i < nodes.childNodes.length; i++) { + let walker = walkTree(nodes.childNodes[i]); + let res; + + while (!(res = walker.next()).done) { + let node = res.value; + + if (node.data) { + length = length + node.length; + } else { + results.push({ + length: countLength(node), + lengthStart: length, + lengthEnd: length + countLength(node), + className: node.attributes[0].nodeValue, + }); + } + } + } + itm.setRangeFills(0, itm.characters.length, [ + colorSchema[schemaAndLanguage.colorSchema]["hljs"], + ]); + + results.map((res) => { + let color = colorSchema[schemaAndLanguage.colorSchema][res.className]; + color = color + ? color + : colorSchema[schemaAndLanguage.colorSchema]["hljs"]; + + itm.setRangeFills(res.lengthStart, res.lengthEnd, [color]); + }); + figma.notify("Completed.", { timeout: 1 }); + } else { + figma.notify("Please select Textbox before running."); + } + }); + + if (selections.length == 0) { + figma.notify("Please select Textbox before running."); + } +}; + +export default changeColorUsecase; diff --git a/packages/app-design-text-code-syntax-hightlight/__plugin/event.ts b/packages/app-design-text-code-syntax-hightlight/__plugin/event.ts new file mode 100644 index 00000000..f133697d --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/__plugin/event.ts @@ -0,0 +1,19 @@ +import { PluginSdkService } from "@plugin-sdk/service"; +import { PluginSdk } from "@plugin-sdk/app"; +import { SchemaAndLanguage } from "../models"; + +const EVKEY = "highligter"; +const CHANGE_COLOR_REQUEST_KEY = "CHANGE_COLOR"; + +export interface HighlightEvent { + type: typeof CHANGE_COLOR_REQUEST_KEY; + schemaAndLanguage: SchemaAndLanguage; +} + +export function fromApp(data: HighlightEvent) { + PluginSdk.appEvent(EVKEY, data); +} + +export function onService(cb: (data: HighlightEvent) => void) { + PluginSdkService.onAppReqquest(EVKEY, cb); +} diff --git a/packages/app-design-text-code-syntax-hightlight/__plugin/index.ts b/packages/app-design-text-code-syntax-hightlight/__plugin/index.ts new file mode 100644 index 00000000..93fc8c48 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/__plugin/index.ts @@ -0,0 +1,20 @@ +import { SchemaAndLanguage } from "../models/schema-and-language"; +import changeColorUsecase from "./change-color-usecase"; +import { HighlightEvent, onService } from "./event"; + +onService(main_cb); + +// main callback +function main_cb(evt: HighlightEvent) { + if (evt.type == "CHANGE_COLOR") { + const schemaAndLanguage: SchemaAndLanguage = evt.schemaAndLanguage; + + try { + figma.currentPage.selection && + changeColorUsecase(figma.currentPage.selection, schemaAndLanguage); + } catch (e) { + console.error(e); + figma.notify(`😭 ${e}`); + } + } +} diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/color-schemaList.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/color-schemaList.ts new file mode 100644 index 00000000..8ed8209e --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/color-schemaList.ts @@ -0,0 +1,92 @@ +export const colorschema_list = [ + "a11yDark", + "a11yLight", + "agate", + "anOldHope", + "androidstudio", + "arduinoLight", + "arta", + "ascetic", + "atelierCaveDark", + "atelierCaveLight", + "atelierDuneDark", + "atelierDuneLight", + "atelierEstuaryDark", + "atelierEstuaryLight", + "atelierForestDark", + "atelierForestLight", + "atelierHeathDark", + "atelierHeathLight", + "atelierLakesideDark", + "atelierLakesideLight", + "atelierPlateauDark", + "atelierPlateauLight", + "atelierSavannaDark", + "atelierSavannaLight", + "atelierSeasideDark", + "atelierSeasideLight", + "atelierSulphurpoolDark", + "atelierSulphurpoolLight", + "atomOneDark", + "atomOneDarkReasonable", + "atomOneLight", + "brownPaper", + "codepenEmbed", + "colorBrewer", + "darcula", + "dark", + "defaultColor", + "docco", + "dracula", + "far", + "foundation", + "github", + "githubGist", + "gml", + "googlecode", + "gorilla", + "grayscale", + "gruvboxDark", + "gruvboxLight", + "hopscotch", + "hybrid", + "idea", + "irBlack", + "isblEditorDark", + "isblEditorLight", + "kimbieDark", + "kimbieLight", + "lightfair", + "magula", + "monoBlue", + "monokai", + "monokaiSublime", + "noctis", + "nord", + "obsidian", + "ocean", + "paraisoDark", + "paraisoLight", + "pojoaque", + "purebasic", + "qtcreatorDark", + "qtcreatorLight", + "railscasts", + "rainbow", + "routeros", + "schoolBook", + "shadesOfPurple", + "solarizedDark", + "solarizedLight", + "sunburst", + "tomorrow", + "tomorrowNight", + "tomorrowNightBlue", + "tomorrowNightBright", + "tomorrowNightEighties", + "vs", + "vs2015", + "xcode", + "xt256", + "zenburn", +]; diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/index.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/index.ts new file mode 100644 index 00000000..120b8f1d --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/index.ts @@ -0,0 +1,185 @@ +import a11yDark from "./schemas/a11yDark"; +import a11yLight from "./schemas/a11yLight"; +import agate from "./schemas/agate"; +import anOldHope from "./schemas/anOldHope"; +import androidstudio from "./schemas/androidstudio"; +import arduinoLight from "./schemas/arduinoLight"; +import arta from "./schemas/arta"; +import ascetic from "./schemas/ascetic"; +import atelierCaveDark from "./schemas/atelierCaveDark"; +import atelierCaveLight from "./schemas/atelierCaveLight"; +import atelierDuneDark from "./schemas/atelierDuneDark"; +import atelierDuneLight from "./schemas/atelierDuneLight"; +import atelierEstuaryDark from "./schemas/atelierEstuaryDark"; +import atelierEstuaryLight from "./schemas/atelierEstuaryLight"; +import atelierForestDark from "./schemas/atelierForestDark"; +import atelierForestLight from "./schemas/atelierForestLight"; +import atelierHeathDark from "./schemas/atelierHeathDark"; +import atelierHeathLight from "./schemas/atelierHeathLight"; +import atelierLakesideDark from "./schemas/atelierLakesideDark"; +import atelierLakesideLight from "./schemas/atelierLakesideLight"; +import atelierPlateauDark from "./schemas/atelierPlateauDark"; +import atelierPlateauLight from "./schemas/atelierPlateauLight"; +import atelierSavannaDark from "./schemas/atelierSavannaDark"; +import atelierSavannaLight from "./schemas/atelierSavannaLight"; +import atelierSeasideDark from "./schemas/atelierSeasideDark"; +import atelierSeasideLight from "./schemas/atelierSeasideLight"; +import atelierSulphurpoolDark from "./schemas/atelierSulphurpoolDark"; +import atelierSulphurpoolLight from "./schemas/atelierSulphurpoolLight"; +import atomOneDark from "./schemas/atomOneDark"; +import atomOneDarkReasonable from "./schemas/atomOneDarkReasonable"; +import atomOneLight from "./schemas/atomOneLight"; +import brownPaper from "./schemas/brownPaper"; +import codepenEmbed from "./schemas/codepenEmbed"; +import colorBrewer from "./schemas/colorBrewer"; +import darcula from "./schemas/darcula"; +import dark from "./schemas/dark"; +import defaultColor from "./schemas/defaultColor"; +import docco from "./schemas/docco"; +import dracula from "./schemas/dracula"; +import far from "./schemas/far"; +import foundation from "./schemas/foundation"; +import github from "./schemas/github"; +import githubGist from "./schemas/githubGist"; +import gml from "./schemas/gml"; +import googlecode from "./schemas/googlecode"; +import gorilla from "./schemas/gorilla"; +import grayscale from "./schemas/grayscale"; +import gruvboxDark from "./schemas/gruvboxDark"; +import gruvboxLight from "./schemas/gruvboxLight"; +import hopscotch from "./schemas/hopscotch"; +import hybrid from "./schemas/hybrid"; +import idea from "./schemas/idea"; +import irBlack from "./schemas/irBlack"; +import isblEditorDark from "./schemas/isblEditorDark"; +import isblEditorLight from "./schemas/isblEditorLight"; +import kimbieDark from "./schemas/kimbieDark"; +import kimbieLight from "./schemas/kimbieLight"; +import lightfair from "./schemas/lightfair"; +import magula from "./schemas/magula"; +import monoBlue from "./schemas/monoBlue"; +import monokai from "./schemas/monokai"; +import monokaiSublime from "./schemas/monokaiSublime"; +import noctis from "./schemas/noctis"; +import nord from "./schemas/nord"; +import obsidian from "./schemas/obsidian"; +import ocean from "./schemas/ocean"; +import paraisoDark from "./schemas/paraisoDark"; +import paraisoLight from "./schemas/paraisoLight"; +import pojoaque from "./schemas/pojoaque"; +import purebasic from "./schemas/purebasic"; +import qtcreatorDark from "./schemas/qtcreatorDark"; +import qtcreatorLight from "./schemas/qtcreatorLight"; +import railscasts from "./schemas/railscasts"; +import rainbow from "./schemas/rainbow"; +import routeros from "./schemas/routeros"; +import schoolBook from "./schemas/schoolBook"; +import shadesOfPurple from "./schemas/shadesOfPurple"; +import solarizedDark from "./schemas/solarizedDark"; +import solarizedLight from "./schemas/solarizedLight"; +import sunburst from "./schemas/sunburst"; +import tomorrow from "./schemas/tomorrow"; +import tomorrowNight from "./schemas/tomorrowNight"; +import tomorrowNightBlue from "./schemas/tomorrowNightBlue"; +import tomorrowNightBright from "./schemas/tomorrowNightBright"; +import tomorrowNightEighties from "./schemas/tomorrowNightEighties"; +import vs from "./schemas/vs"; +import vs2015 from "./schemas/vs2015"; +import xcode from "./schemas/xcode"; +import xt256 from "./schemas/xt256"; +import zenburn from "./schemas/zenburn"; + +export { + a11yDark, + a11yLight, + agate, + anOldHope, + androidstudio, + arduinoLight, + arta, + ascetic, + atelierCaveDark, + atelierCaveLight, + atelierDuneDark, + atelierDuneLight, + atelierEstuaryDark, + atelierEstuaryLight, + atelierForestDark, + atelierForestLight, + atelierHeathDark, + atelierHeathLight, + atelierLakesideDark, + atelierLakesideLight, + atelierPlateauDark, + atelierPlateauLight, + atelierSavannaDark, + atelierSavannaLight, + atelierSeasideDark, + atelierSeasideLight, + atelierSulphurpoolDark, + atelierSulphurpoolLight, + atomOneDark, + atomOneDarkReasonable, + atomOneLight, + brownPaper, + codepenEmbed, + colorBrewer, + darcula, + dark, + defaultColor, + docco, + dracula, + far, + foundation, + github, + githubGist, + gml, + googlecode, + gorilla, + grayscale, + gruvboxDark, + gruvboxLight, + hopscotch, + hybrid, + idea, + irBlack, + isblEditorDark, + isblEditorLight, + kimbieDark, + kimbieLight, + lightfair, + magula, + monoBlue, + monokai, + monokaiSublime, + nord, + noctis, + obsidian, + ocean, + paraisoDark, + paraisoLight, + pojoaque, + purebasic, + qtcreatorDark, + qtcreatorLight, + railscasts, + rainbow, + routeros, + schoolBook, + shadesOfPurple, + solarizedDark, + solarizedLight, + sunburst, + tomorrow, + tomorrowNight, + tomorrowNightBlue, + tomorrowNightBright, + tomorrowNightEighties, + vs, + vs2015, + xcode, + xt256, + zenburn, +}; + +export * from "./color-schemaList"; diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/a11yDark.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/a11yDark.ts new file mode 100644 index 00000000..bb0dabeb --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/a11yDark.ts @@ -0,0 +1,203 @@ +const a11yDark = { + hljs: { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { r: 1, g: 0.6274509803921569, b: 0.47843137254901963 }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { r: 1, g: 0.6274509803921569, b: 0.47843137254901963 }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { r: 1, g: 0.6274509803921569, b: 0.47843137254901963 }, + }, + 'hljs-name': { + type: 'SOLID', + color: { r: 1, g: 0.6274509803921569, b: 0.47843137254901963 }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { r: 1, g: 0.6274509803921569, b: 0.47843137254901963 }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { r: 1, g: 0.6274509803921569, b: 0.47843137254901963 }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { r: 1, g: 0.6274509803921569, b: 0.47843137254901963 }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { r: 1, g: 0.6274509803921569, b: 0.47843137254901963 }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { r: 0, g: 0.8784313725490196, b: 0.8784313725490196 }, + }, + 'hljs-section': { + type: 'SOLID', + color: { r: 0, g: 0.8784313725490196, b: 0.8784313725490196 }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, +} +export default a11yDark diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/a11yLight.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/a11yLight.ts new file mode 100644 index 00000000..c834d97a --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/a11yLight.ts @@ -0,0 +1,235 @@ +const a11yLight = { + hljs: { + type: 'SOLID', + color: { + r: 0.32941176470588235, + g: 0.32941176470588235, + b: 0.32941176470588235, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.32941176470588235, + g: 0.32941176470588235, + b: 0.32941176470588235, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.32941176470588235, + g: 0.32941176470588235, + b: 0.32941176470588235, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.8509803921568627, + g: 0.11764705882352941, + b: 0.09411764705882353, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.8509803921568627, + g: 0.11764705882352941, + b: 0.09411764705882353, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.8509803921568627, + g: 0.11764705882352941, + b: 0.09411764705882353, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.8509803921568627, + g: 0.11764705882352941, + b: 0.09411764705882353, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.8509803921568627, + g: 0.11764705882352941, + b: 0.09411764705882353, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.8509803921568627, + g: 0.11764705882352941, + b: 0.09411764705882353, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.8509803921568627, + g: 0.11764705882352941, + b: 0.09411764705882353, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.8509803921568627, + g: 0.11764705882352941, + b: 0.09411764705882353, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.32941176470588235, + g: 0.32941176470588235, + b: 0.32941176470588235, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.32941176470588235, + g: 0.32941176470588235, + b: 0.32941176470588235, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.32941176470588235, + g: 0.32941176470588235, + b: 0.32941176470588235, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.32941176470588235, + g: 0.32941176470588235, + b: 0.32941176470588235, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.32941176470588235, + g: 0.32941176470588235, + b: 0.32941176470588235, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.32941176470588235, + g: 0.32941176470588235, + b: 0.32941176470588235, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.32941176470588235, + g: 0.32941176470588235, + b: 0.32941176470588235, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.32941176470588235, + g: 0.32941176470588235, + b: 0.32941176470588235, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.32941176470588235, + g: 0.32941176470588235, + b: 0.32941176470588235, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.32941176470588235, + g: 0.32941176470588235, + b: 0.32941176470588235, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.32941176470588235, + g: 0.32941176470588235, + b: 0.32941176470588235, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.32941176470588235, + g: 0.32941176470588235, + b: 0.32941176470588235, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.32941176470588235, + g: 0.32941176470588235, + b: 0.32941176470588235, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { r: 0, g: 0.4980392156862745, b: 0.6666666666666666 }, + }, + 'hljs-section': { + type: 'SOLID', + color: { r: 0, g: 0.4980392156862745, b: 0.6666666666666666 }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.32941176470588235, + g: 0.32941176470588235, + b: 0.32941176470588235, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.32941176470588235, + g: 0.32941176470588235, + b: 0.32941176470588235, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.32941176470588235, + g: 0.32941176470588235, + b: 0.32941176470588235, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.32941176470588235, + g: 0.32941176470588235, + b: 0.32941176470588235, + }, + }, +} +export default a11yLight diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/agate.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/agate.ts new file mode 100644 index 00000000..3e9324b2 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/agate.ts @@ -0,0 +1,155 @@ +const agate = { + hljs: { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-name': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-code': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.3843137254901961, + g: 0.7843137254901961, + b: 0.9529411764705882, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.6784313725490196, + g: 0.8980392156862745, + b: 0.9882352941176471, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.6784313725490196, + g: 0.8980392156862745, + b: 0.9882352941176471, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.6784313725490196, + g: 0.8980392156862745, + b: 0.9882352941176471, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.6784313725490196, + g: 0.8980392156862745, + b: 0.9882352941176471, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.6352941176470588, + g: 0.9882352941176471, + b: 0.6352941176470588, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.8274509803921568, + g: 0.38823529411764707, + b: 0.38823529411764707, + }, + }, + 'hljs-type': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-title': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-section': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-attribute': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-quote': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-built_in': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-builtin-name': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.8274509803921568, + g: 0.38823529411764707, + b: 0.38823529411764707, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.8274509803921568, + g: 0.38823529411764707, + b: 0.38823529411764707, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.9882352941176471, + g: 0.7607843137254902, + b: 0.5490196078431373, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.9882352941176471, + g: 0.7607843137254902, + b: 0.5490196078431373, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.9882352941176471, + g: 0.7607843137254902, + b: 0.5490196078431373, + }, + }, + 'hljs-comment': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.9882352941176471, + g: 0.6078431372549019, + b: 0.6078431372549019, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.7764705882352941, + g: 0.7058823529411765, + b: 0.9411764705882353, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.7764705882352941, + g: 0.7058823529411765, + b: 0.9411764705882353, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.9882352941176471, + g: 0.6078431372549019, + b: 0.6078431372549019, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.6352941176470588, + g: 0.9882352941176471, + b: 0.6352941176470588, + }, + }, + hljsa: { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljsa:focus': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljsa:hover': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default agate diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/anOldHope.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/anOldHope.ts new file mode 100644 index 00000000..4b4d6411 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/anOldHope.ts @@ -0,0 +1,227 @@ +const anOldHope = { + hljs: { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7725490196078432, + b: 0.807843137254902, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.7137254901960784, + g: 0.6941176470588235, + b: 0.5450980392156862, + }, + }, + te: { + type: 'SOLID', + color: { + r: 0.9333333333333333, + g: 0.48627450980392156, + b: 0.16862745098039217, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.9215686274509803, + g: 0.23529411764705882, + b: 0.32941176470588235, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.9215686274509803, + g: 0.23529411764705882, + b: 0.32941176470588235, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.9215686274509803, + g: 0.23529411764705882, + b: 0.32941176470588235, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.9215686274509803, + g: 0.23529411764705882, + b: 0.32941176470588235, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.9215686274509803, + g: 0.23529411764705882, + b: 0.32941176470588235, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.9215686274509803, + g: 0.23529411764705882, + b: 0.32941176470588235, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.9215686274509803, + g: 0.23529411764705882, + b: 0.32941176470588235, + }, + }, + on: { + type: 'SOLID', + color: { + r: 0.47058823529411764, + g: 0.7333333333333333, + b: 0.396078431372549, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.9058823529411765, + g: 0.807843137254902, + b: 0.33725490196078434, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.9058823529411765, + g: 0.807843137254902, + b: 0.33725490196078434, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.9058823529411765, + g: 0.807843137254902, + b: 0.33725490196078434, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.9058823529411765, + g: 0.807843137254902, + b: 0.33725490196078434, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.9058823529411765, + g: 0.807843137254902, + b: 0.33725490196078434, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.9058823529411765, + g: 0.807843137254902, + b: 0.33725490196078434, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.9058823529411765, + g: 0.807843137254902, + b: 0.33725490196078434, + }, + }, + nk: { + type: 'SOLID', + color: { + r: 0.9058823529411765, + g: 0.807843137254902, + b: 0.33725490196078434, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.30980392156862746, + g: 0.7058823529411765, + b: 0.8431372549019608, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.30980392156862746, + g: 0.7058823529411765, + b: 0.8431372549019608, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.30980392156862746, + g: 0.7058823529411765, + b: 0.8431372549019608, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.47058823529411764, + g: 0.7333333333333333, + b: 0.396078431372549, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.7058823529411765, + g: 0.3686274509803922, + b: 0.6431372549019608, + }, + }, + ag: { + type: 'SOLID', + color: { + r: 0.7058823529411765, + g: 0.3686274509803922, + b: 0.6431372549019608, + }, + }, + js: { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7725490196078432, + b: 0.807843137254902, + }, + }, + is: { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7725490196078432, + b: 0.807843137254902, + }, + }, + ng: { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7725490196078432, + b: 0.807843137254902, + }, + }, +} +export default anOldHope diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/androidstudio.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/androidstudio.ts new file mode 100644 index 00000000..1dda131f --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/androidstudio.ts @@ -0,0 +1,179 @@ +const androidstudio = { + hljs: { + type: 'SOLID', + color: { + r: 0.6627450980392157, + g: 0.7176470588235294, + b: 0.7764705882352941, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.40784313725490196, + g: 0.592156862745098, + b: 0.7333333333333333, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.40784313725490196, + g: 0.592156862745098, + b: 0.7333333333333333, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.40784313725490196, + g: 0.592156862745098, + b: 0.7333333333333333, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.40784313725490196, + g: 0.592156862745098, + b: 0.7333333333333333, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { r: 0.8, g: 0.47058823529411764, b: 0.19607843137254902 }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { r: 0.8, g: 0.47058823529411764, b: 0.19607843137254902 }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { r: 0.8, g: 0.47058823529411764, b: 0.19607843137254902 }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.3843137254901961, + g: 0.592156862745098, + b: 0.3333333333333333, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.3843137254901961, + g: 0.592156862745098, + b: 0.3333333333333333, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.3843137254901961, + g: 0.592156862745098, + b: 0.3333333333333333, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.5019607843137255, + g: 0.5019607843137255, + b: 0.5019607843137255, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.5019607843137255, + g: 0.5019607843137255, + b: 0.5019607843137255, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.7333333333333333, + g: 0.7098039215686275, + b: 0.1607843137254902, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.41568627450980394, + g: 0.5294117647058824, + b: 0.34901960784313724, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.41568627450980394, + g: 0.5294117647058824, + b: 0.34901960784313724, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.41568627450980394, + g: 0.5294117647058824, + b: 0.34901960784313724, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { r: 1, g: 0.7764705882352941, b: 0.42745098039215684 }, + }, + 'hljs-title': { + type: 'SOLID', + color: { r: 1, g: 0.7764705882352941, b: 0.42745098039215684 }, + }, + 'hljs-type': { + type: 'SOLID', + color: { r: 1, g: 0.7764705882352941, b: 0.42745098039215684 }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.9098039215686274, + g: 0.7490196078431373, + b: 0.41568627450980394, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.9098039215686274, + g: 0.7490196078431373, + b: 0.41568627450980394, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.9098039215686274, + g: 0.7490196078431373, + b: 0.41568627450980394, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.6627450980392157, + g: 0.7176470588235294, + b: 0.7764705882352941, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.6627450980392157, + g: 0.7176470588235294, + b: 0.7764705882352941, + }, + }, +} +export default androidstudio diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/arduinoLight.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/arduinoLight.ts new file mode 100644 index 00000000..3a84e381 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/arduinoLight.ts @@ -0,0 +1,144 @@ +const arduinoLight = { + hljs: { + type: 'SOLID', + color: { + r: 0.2627450980392157, + g: 0.30980392156862746, + b: 0.32941176470588235, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.2627450980392157, + g: 0.30980392156862746, + b: 0.32941176470588235, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { r: 0, g: 0.592156862745098, b: 0.615686274509804 }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { r: 0, g: 0.592156862745098, b: 0.615686274509804 }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { r: 0, g: 0.592156862745098, b: 0.615686274509804 }, + }, + 'hljs-doctag': { + type: 'SOLID', + color: { r: 0, g: 0.592156862745098, b: 0.615686274509804 }, + }, + 'hljs-name': { + type: 'SOLID', + color: { r: 0, g: 0.592156862745098, b: 0.615686274509804 }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { r: 0.8274509803921568, g: 0.32941176470588235, b: 0 }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { r: 0.8274509803921568, g: 0.32941176470588235, b: 0 }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { r: 0.8274509803921568, g: 0.32941176470588235, b: 0 }, + }, + 'hljs-code': { + type: 'SOLID', + color: { r: 0.8274509803921568, g: 0.32941176470588235, b: 0 }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { r: 0.8274509803921568, g: 0.32941176470588235, b: 0 }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { r: 0, g: 0.592156862745098, b: 0.615686274509804 }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { r: 0, g: 0.592156862745098, b: 0.615686274509804 }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { r: 0, g: 0.592156862745098, b: 0.615686274509804 }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { r: 0, g: 0.592156862745098, b: 0.615686274509804 }, + }, + 'hljs-link': { + type: 'SOLID', + color: { r: 0, g: 0.592156862745098, b: 0.615686274509804 }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { r: 0, g: 0.592156862745098, b: 0.615686274509804 }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { r: 0, g: 0.592156862745098, b: 0.615686274509804 }, + }, + 'hljs-type': { + type: 'SOLID', + color: { r: 0, g: 0.3607843137254902, b: 0.37254901960784315 }, + }, + 'hljs-string': { + type: 'SOLID', + color: { r: 0, g: 0.3607843137254902, b: 0.37254901960784315 }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { r: 0, g: 0.3607843137254902, b: 0.37254901960784315 }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { r: 0, g: 0.3607843137254902, b: 0.37254901960784315 }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { r: 0, g: 0.3607843137254902, b: 0.37254901960784315 }, + }, + 'hljs-template-tag': { + type: 'SOLID', + color: { r: 0, g: 0.3607843137254902, b: 0.37254901960784315 }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { r: 0, g: 0.3607843137254902, b: 0.37254901960784315 }, + }, + 'hljs-title': { type: 'SOLID', color: { r: 0.5333333333333333, g: 0, b: 0 } }, + 'hljs-section': { + type: 'SOLID', + color: { r: 0.5333333333333333, g: 0, b: 0 }, + }, + 'hljs-comment': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'color:rgba(149165166': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-meta-keyword': { + type: 'SOLID', + color: { r: 0.4470588235294118, g: 0.5568627450980392, b: 0 }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { r: 0.4470588235294118, g: 0.5568627450980392, b: 0 }, + }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-function': { + type: 'SOLID', + color: { r: 0.4470588235294118, g: 0.5568627450980392, b: 0 }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.5411764705882353, + g: 0.4823529411764706, + b: 0.3215686274509804, + }, + }, +} +export default arduinoLight diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/arta.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/arta.ts new file mode 100644 index 00000000..2f79cd38 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/arta.ts @@ -0,0 +1,110 @@ +const arta = { + hljs: { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-subst': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-section': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-comment': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-quote': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-meta': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-string': { type: 'SOLID', color: { r: 1, g: 0.8, b: 0.2 } }, + 'hljs-symbol': { type: 'SOLID', color: { r: 1, g: 0.8, b: 0.2 } }, + 'hljs-bullet': { type: 'SOLID', color: { r: 1, g: 0.8, b: 0.2 } }, + 'hljs-regexp': { type: 'SOLID', color: { r: 1, g: 0.8, b: 0.2 } }, + 'hljs-number': { type: 'SOLID', color: { r: 0, g: 0.8, b: 0.4 } }, + 'hljs-addition': { type: 'SOLID', color: { r: 0, g: 0.8, b: 0.4 } }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.19607843137254902, + g: 0.6666666666666666, + b: 0.9333333333333333, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.19607843137254902, + g: 0.6666666666666666, + b: 0.9333333333333333, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.19607843137254902, + g: 0.6666666666666666, + b: 0.9333333333333333, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.19607843137254902, + g: 0.6666666666666666, + b: 0.9333333333333333, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.19607843137254902, + g: 0.6666666666666666, + b: 0.9333333333333333, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.19607843137254902, + g: 0.6666666666666666, + b: 0.9333333333333333, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.19607843137254902, + g: 0.6666666666666666, + b: 0.9333333333333333, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { r: 0.4, g: 0.26666666666666666, b: 0.6666666666666666 }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { r: 0.4, g: 0.26666666666666666, b: 0.6666666666666666 }, + }, + 'hljs-name': { + type: 'SOLID', + color: { r: 0.4, g: 0.26666666666666666, b: 0.6666666666666666 }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { r: 0.4, g: 0.26666666666666666, b: 0.6666666666666666 }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { r: 0.4, g: 0.26666666666666666, b: 0.6666666666666666 }, + }, + 'hljs-title': { + type: 'SOLID', + color: { r: 0.7333333333333333, g: 0.06666666666666667, b: 0.4 }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { r: 0.7333333333333333, g: 0.06666666666666667, b: 0.4 }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { r: 0.7333333333333333, g: 0.06666666666666667, b: 0.4 }, + }, + 'hljs-template-tag': { + type: 'SOLID', + color: { r: 0.7333333333333333, g: 0.06666666666666667, b: 0.4 }, + }, + 'hljs-doctag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default arta diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/ascetic.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/ascetic.ts new file mode 100644 index 00000000..d25be228 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/ascetic.ts @@ -0,0 +1,23 @@ +const ascetic = { + hljs: { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-string': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-variable': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-template-variable': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-symbol': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-bullet': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-section': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-addition': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-attribute': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-link': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-comment': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-quote': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-meta': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-deletion': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-keyword': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-name': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-type': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default ascetic diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierCaveDark.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierCaveDark.ts new file mode 100644 index 00000000..a47fcb05 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierCaveDark.ts @@ -0,0 +1,243 @@ +const atelierCaveDark = { + hljs: { + type: 'SOLID', + color: { + r: 0.5450980392156862, + g: 0.5294117647058824, + b: 0.5725490196078431, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.49411764705882355, + g: 0.47058823529411764, + b: 0.5294117647058824, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.49411764705882355, + g: 0.47058823529411764, + b: 0.5294117647058824, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.7450980392156863, + g: 0.27450980392156865, + b: 0.47058823529411764, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.7450980392156863, + g: 0.27450980392156865, + b: 0.47058823529411764, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.7450980392156863, + g: 0.27450980392156865, + b: 0.47058823529411764, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.7450980392156863, + g: 0.27450980392156865, + b: 0.47058823529411764, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.7450980392156863, + g: 0.27450980392156865, + b: 0.47058823529411764, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.7450980392156863, + g: 0.27450980392156865, + b: 0.47058823529411764, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.7450980392156863, + g: 0.27450980392156865, + b: 0.47058823529411764, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.7450980392156863, + g: 0.27450980392156865, + b: 0.47058823529411764, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.7450980392156863, + g: 0.27450980392156865, + b: 0.47058823529411764, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.6666666666666666, + g: 0.3411764705882353, + b: 0.23529411764705882, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.6666666666666666, + g: 0.3411764705882353, + b: 0.23529411764705882, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.6666666666666666, + g: 0.3411764705882353, + b: 0.23529411764705882, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.6666666666666666, + g: 0.3411764705882353, + b: 0.23529411764705882, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.6666666666666666, + g: 0.3411764705882353, + b: 0.23529411764705882, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.6666666666666666, + g: 0.3411764705882353, + b: 0.23529411764705882, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.6666666666666666, + g: 0.3411764705882353, + b: 0.23529411764705882, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.16470588235294117, + g: 0.5725490196078431, + b: 0.5725490196078431, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.16470588235294117, + g: 0.5725490196078431, + b: 0.5725490196078431, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.16470588235294117, + g: 0.5725490196078431, + b: 0.5725490196078431, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.3411764705882353, + g: 0.42745098039215684, + b: 0.8588235294117647, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.3411764705882353, + g: 0.42745098039215684, + b: 0.8588235294117647, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.5843137254901961, + g: 0.35294117647058826, + b: 0.9058823529411765, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.5843137254901961, + g: 0.35294117647058826, + b: 0.9058823529411765, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.7450980392156863, + g: 0.27450980392156865, + b: 0.47058823529411764, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.16470588235294117, + g: 0.5725490196078431, + b: 0.5725490196078431, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.5450980392156862, + g: 0.5294117647058824, + b: 0.5725490196078431, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.5450980392156862, + g: 0.5294117647058824, + b: 0.5725490196078431, + }, + }, +} +export default atelierCaveDark diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierCaveLight.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierCaveLight.ts new file mode 100644 index 00000000..d1616f0b --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierCaveLight.ts @@ -0,0 +1,243 @@ +const atelierCaveLight = { + hljs: { + type: 'SOLID', + color: { + r: 0.34509803921568627, + g: 0.3215686274509804, + b: 0.3764705882352941, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.396078431372549, + g: 0.37254901960784315, + b: 0.42745098039215684, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.396078431372549, + g: 0.37254901960784315, + b: 0.42745098039215684, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.7450980392156863, + g: 0.27450980392156865, + b: 0.47058823529411764, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.7450980392156863, + g: 0.27450980392156865, + b: 0.47058823529411764, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.7450980392156863, + g: 0.27450980392156865, + b: 0.47058823529411764, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.7450980392156863, + g: 0.27450980392156865, + b: 0.47058823529411764, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.7450980392156863, + g: 0.27450980392156865, + b: 0.47058823529411764, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.7450980392156863, + g: 0.27450980392156865, + b: 0.47058823529411764, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.7450980392156863, + g: 0.27450980392156865, + b: 0.47058823529411764, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.7450980392156863, + g: 0.27450980392156865, + b: 0.47058823529411764, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.7450980392156863, + g: 0.27450980392156865, + b: 0.47058823529411764, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.6666666666666666, + g: 0.3411764705882353, + b: 0.23529411764705882, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.6666666666666666, + g: 0.3411764705882353, + b: 0.23529411764705882, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.6666666666666666, + g: 0.3411764705882353, + b: 0.23529411764705882, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.6666666666666666, + g: 0.3411764705882353, + b: 0.23529411764705882, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.6666666666666666, + g: 0.3411764705882353, + b: 0.23529411764705882, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.6666666666666666, + g: 0.3411764705882353, + b: 0.23529411764705882, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.6666666666666666, + g: 0.3411764705882353, + b: 0.23529411764705882, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.16470588235294117, + g: 0.5725490196078431, + b: 0.5725490196078431, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.16470588235294117, + g: 0.5725490196078431, + b: 0.5725490196078431, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.16470588235294117, + g: 0.5725490196078431, + b: 0.5725490196078431, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.3411764705882353, + g: 0.42745098039215684, + b: 0.8588235294117647, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.3411764705882353, + g: 0.42745098039215684, + b: 0.8588235294117647, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.5843137254901961, + g: 0.35294117647058826, + b: 0.9058823529411765, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.5843137254901961, + g: 0.35294117647058826, + b: 0.9058823529411765, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.7450980392156863, + g: 0.27450980392156865, + b: 0.47058823529411764, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.16470588235294117, + g: 0.5725490196078431, + b: 0.5725490196078431, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.34509803921568627, + g: 0.3215686274509804, + b: 0.3764705882352941, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.34509803921568627, + g: 0.3215686274509804, + b: 0.3764705882352941, + }, + }, +} +export default atelierCaveLight diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierDuneDark.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierDuneDark.ts new file mode 100644 index 00000000..ea8c3a43 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierDuneDark.ts @@ -0,0 +1,211 @@ +const atelierDuneDark = { + hljs: { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.6352941176470588, + b: 0.5490196078431373, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { r: 0.6, g: 0.5843137254901961, b: 0.5019607843137255 }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { r: 0.6, g: 0.5843137254901961, b: 0.5019607843137255 }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.21568627450980393, + b: 0.21568627450980393, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.21568627450980393, + b: 0.21568627450980393, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.21568627450980393, + b: 0.21568627450980393, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.21568627450980393, + b: 0.21568627450980393, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.21568627450980393, + b: 0.21568627450980393, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.21568627450980393, + b: 0.21568627450980393, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.21568627450980393, + b: 0.21568627450980393, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.21568627450980393, + b: 0.21568627450980393, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.21568627450980393, + b: 0.21568627450980393, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.7137254901960784, + g: 0.33725490196078434, + b: 0.06666666666666667, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.7137254901960784, + g: 0.33725490196078434, + b: 0.06666666666666667, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.7137254901960784, + g: 0.33725490196078434, + b: 0.06666666666666667, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.7137254901960784, + g: 0.33725490196078434, + b: 0.06666666666666667, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.7137254901960784, + g: 0.33725490196078434, + b: 0.06666666666666667, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.7137254901960784, + g: 0.33725490196078434, + b: 0.06666666666666667, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.7137254901960784, + g: 0.33725490196078434, + b: 0.06666666666666667, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.3764705882352941, + g: 0.6745098039215687, + b: 0.2235294117647059, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.3764705882352941, + g: 0.6745098039215687, + b: 0.2235294117647059, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.3764705882352941, + g: 0.6745098039215687, + b: 0.2235294117647059, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { r: 0.4, g: 0.5176470588235295, b: 0.8823529411764706 }, + }, + 'hljs-section': { + type: 'SOLID', + color: { r: 0.4, g: 0.5176470588235295, b: 0.8823529411764706 }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.7215686274509804, + g: 0.32941176470588235, + b: 0.8313725490196079, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.7215686274509804, + g: 0.32941176470588235, + b: 0.8313725490196079, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.6352941176470588, + b: 0.5490196078431373, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.6352941176470588, + b: 0.5490196078431373, + }, + }, +} +export default atelierDuneDark diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierDuneLight.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierDuneLight.ts new file mode 100644 index 00000000..4a6e8fd6 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierDuneLight.ts @@ -0,0 +1,219 @@ +const atelierDuneLight = { + hljs: { + type: 'SOLID', + color: { + r: 0.43137254901960786, + g: 0.4196078431372549, + b: 0.3686274509803922, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.49019607843137253, + g: 0.47843137254901963, + b: 0.40784313725490196, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.49019607843137253, + g: 0.47843137254901963, + b: 0.40784313725490196, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.21568627450980393, + b: 0.21568627450980393, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.21568627450980393, + b: 0.21568627450980393, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.21568627450980393, + b: 0.21568627450980393, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.21568627450980393, + b: 0.21568627450980393, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.21568627450980393, + b: 0.21568627450980393, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.21568627450980393, + b: 0.21568627450980393, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.21568627450980393, + b: 0.21568627450980393, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.21568627450980393, + b: 0.21568627450980393, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.21568627450980393, + b: 0.21568627450980393, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.7137254901960784, + g: 0.33725490196078434, + b: 0.06666666666666667, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.7137254901960784, + g: 0.33725490196078434, + b: 0.06666666666666667, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.7137254901960784, + g: 0.33725490196078434, + b: 0.06666666666666667, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.7137254901960784, + g: 0.33725490196078434, + b: 0.06666666666666667, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.7137254901960784, + g: 0.33725490196078434, + b: 0.06666666666666667, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.7137254901960784, + g: 0.33725490196078434, + b: 0.06666666666666667, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.7137254901960784, + g: 0.33725490196078434, + b: 0.06666666666666667, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.3764705882352941, + g: 0.6745098039215687, + b: 0.2235294117647059, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.3764705882352941, + g: 0.6745098039215687, + b: 0.2235294117647059, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.3764705882352941, + g: 0.6745098039215687, + b: 0.2235294117647059, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { r: 0.4, g: 0.5176470588235295, b: 0.8823529411764706 }, + }, + 'hljs-section': { + type: 'SOLID', + color: { r: 0.4, g: 0.5176470588235295, b: 0.8823529411764706 }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.7215686274509804, + g: 0.32941176470588235, + b: 0.8313725490196079, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.7215686274509804, + g: 0.32941176470588235, + b: 0.8313725490196079, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.43137254901960786, + g: 0.4196078431372549, + b: 0.3686274509803922, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.43137254901960786, + g: 0.4196078431372549, + b: 0.3686274509803922, + }, + }, +} +export default atelierDuneLight diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierEstuaryDark.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierEstuaryDark.ts new file mode 100644 index 00000000..6b4d3363 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierEstuaryDark.ts @@ -0,0 +1,235 @@ +const atelierEstuaryDark = { + hljs: { + type: 'SOLID', + color: { + r: 0.5725490196078431, + g: 0.5686274509803921, + b: 0.5058823529411764, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.5294117647058824, + g: 0.5215686274509804, + b: 0.45098039215686275, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.5294117647058824, + g: 0.5215686274509804, + b: 0.45098039215686275, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.7294117647058823, + g: 0.3843137254901961, + b: 0.21176470588235294, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.7294117647058823, + g: 0.3843137254901961, + b: 0.21176470588235294, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.7294117647058823, + g: 0.3843137254901961, + b: 0.21176470588235294, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.7294117647058823, + g: 0.3843137254901961, + b: 0.21176470588235294, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.7294117647058823, + g: 0.3843137254901961, + b: 0.21176470588235294, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.7294117647058823, + g: 0.3843137254901961, + b: 0.21176470588235294, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.7294117647058823, + g: 0.3843137254901961, + b: 0.21176470588235294, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.7294117647058823, + g: 0.3843137254901961, + b: 0.21176470588235294, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.7294117647058823, + g: 0.3843137254901961, + b: 0.21176470588235294, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.6823529411764706, + g: 0.45098039215686275, + b: 0.07450980392156863, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.6823529411764706, + g: 0.45098039215686275, + b: 0.07450980392156863, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.6823529411764706, + g: 0.45098039215686275, + b: 0.07450980392156863, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.6823529411764706, + g: 0.45098039215686275, + b: 0.07450980392156863, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.6823529411764706, + g: 0.45098039215686275, + b: 0.07450980392156863, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.6823529411764706, + g: 0.45098039215686275, + b: 0.07450980392156863, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.6823529411764706, + g: 0.45098039215686275, + b: 0.07450980392156863, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.49019607843137253, + g: 0.592156862745098, + b: 0.14901960784313725, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.49019607843137253, + g: 0.592156862745098, + b: 0.14901960784313725, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.49019607843137253, + g: 0.592156862745098, + b: 0.14901960784313725, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { r: 0.21176470588235294, g: 0.6313725490196078, b: 0.4 }, + }, + 'hljs-section': { + type: 'SOLID', + color: { r: 0.21176470588235294, g: 0.6313725490196078, b: 0.4 }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.37254901960784315, + g: 0.5686274509803921, + b: 0.5098039215686274, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.37254901960784315, + g: 0.5686274509803921, + b: 0.5098039215686274, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.7294117647058823, + g: 0.3843137254901961, + b: 0.21176470588235294, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.49019607843137253, + g: 0.592156862745098, + b: 0.14901960784313725, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.5725490196078431, + g: 0.5686274509803921, + b: 0.5058823529411764, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.5725490196078431, + g: 0.5686274509803921, + b: 0.5058823529411764, + }, + }, +} +export default atelierEstuaryDark diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierEstuaryLight.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierEstuaryLight.ts new file mode 100644 index 00000000..2a4efb32 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierEstuaryLight.ts @@ -0,0 +1,235 @@ +const atelierEstuaryLight = { + hljs: { + type: 'SOLID', + color: { + r: 0.37254901960784315, + g: 0.3686274509803922, + b: 0.3058823529411765, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.4235294117647059, + g: 0.4196078431372549, + b: 0.35294117647058826, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.4235294117647059, + g: 0.4196078431372549, + b: 0.35294117647058826, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.7294117647058823, + g: 0.3843137254901961, + b: 0.21176470588235294, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.7294117647058823, + g: 0.3843137254901961, + b: 0.21176470588235294, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.7294117647058823, + g: 0.3843137254901961, + b: 0.21176470588235294, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.7294117647058823, + g: 0.3843137254901961, + b: 0.21176470588235294, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.7294117647058823, + g: 0.3843137254901961, + b: 0.21176470588235294, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.7294117647058823, + g: 0.3843137254901961, + b: 0.21176470588235294, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.7294117647058823, + g: 0.3843137254901961, + b: 0.21176470588235294, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.7294117647058823, + g: 0.3843137254901961, + b: 0.21176470588235294, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.7294117647058823, + g: 0.3843137254901961, + b: 0.21176470588235294, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.6823529411764706, + g: 0.45098039215686275, + b: 0.07450980392156863, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.6823529411764706, + g: 0.45098039215686275, + b: 0.07450980392156863, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.6823529411764706, + g: 0.45098039215686275, + b: 0.07450980392156863, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.6823529411764706, + g: 0.45098039215686275, + b: 0.07450980392156863, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.6823529411764706, + g: 0.45098039215686275, + b: 0.07450980392156863, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.6823529411764706, + g: 0.45098039215686275, + b: 0.07450980392156863, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.6823529411764706, + g: 0.45098039215686275, + b: 0.07450980392156863, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.49019607843137253, + g: 0.592156862745098, + b: 0.14901960784313725, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.49019607843137253, + g: 0.592156862745098, + b: 0.14901960784313725, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.49019607843137253, + g: 0.592156862745098, + b: 0.14901960784313725, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { r: 0.21176470588235294, g: 0.6313725490196078, b: 0.4 }, + }, + 'hljs-section': { + type: 'SOLID', + color: { r: 0.21176470588235294, g: 0.6313725490196078, b: 0.4 }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.37254901960784315, + g: 0.5686274509803921, + b: 0.5098039215686274, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.37254901960784315, + g: 0.5686274509803921, + b: 0.5098039215686274, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.7294117647058823, + g: 0.3843137254901961, + b: 0.21176470588235294, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.49019607843137253, + g: 0.592156862745098, + b: 0.14901960784313725, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.37254901960784315, + g: 0.3686274509803922, + b: 0.3058823529411765, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.37254901960784315, + g: 0.3686274509803922, + b: 0.3058823529411765, + }, + }, +} +export default atelierEstuaryLight diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierForestDark.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierForestDark.ts new file mode 100644 index 00000000..81ccac72 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierForestDark.ts @@ -0,0 +1,219 @@ +const atelierForestDark = { + hljs: { + type: 'SOLID', + color: { + r: 0.6588235294117647, + g: 0.6313725490196078, + b: 0.6235294117647059, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.611764705882353, + g: 0.5803921568627451, + b: 0.5686274509803921, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.611764705882353, + g: 0.5803921568627451, + b: 0.5686274509803921, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.17254901960784313, + b: 0.25098039215686274, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.17254901960784313, + b: 0.25098039215686274, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.17254901960784313, + b: 0.25098039215686274, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.17254901960784313, + b: 0.25098039215686274, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.17254901960784313, + b: 0.25098039215686274, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.17254901960784313, + b: 0.25098039215686274, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.17254901960784313, + b: 0.25098039215686274, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.17254901960784313, + b: 0.25098039215686274, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.17254901960784313, + b: 0.25098039215686274, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.8745098039215686, + g: 0.3254901960784314, + b: 0.12549019607843137, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.8745098039215686, + g: 0.3254901960784314, + b: 0.12549019607843137, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.8745098039215686, + g: 0.3254901960784314, + b: 0.12549019607843137, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.8745098039215686, + g: 0.3254901960784314, + b: 0.12549019607843137, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.8745098039215686, + g: 0.3254901960784314, + b: 0.12549019607843137, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.8745098039215686, + g: 0.3254901960784314, + b: 0.12549019607843137, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.8745098039215686, + g: 0.3254901960784314, + b: 0.12549019607843137, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.4823529411764706, + g: 0.592156862745098, + b: 0.14901960784313725, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.4823529411764706, + g: 0.592156862745098, + b: 0.14901960784313725, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.4823529411764706, + g: 0.592156862745098, + b: 0.14901960784313725, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.25098039215686274, + g: 0.49411764705882355, + b: 0.9058823529411765, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.25098039215686274, + g: 0.49411764705882355, + b: 0.9058823529411765, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { r: 0.4, g: 0.4, b: 0.9176470588235294 }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { r: 0.4, g: 0.4, b: 0.9176470588235294 }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.6588235294117647, + g: 0.6313725490196078, + b: 0.6235294117647059, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.6588235294117647, + g: 0.6313725490196078, + b: 0.6235294117647059, + }, + }, +} +export default atelierForestDark diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierForestLight.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierForestLight.ts new file mode 100644 index 00000000..28fade3f --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierForestLight.ts @@ -0,0 +1,219 @@ +const atelierForestLight = { + hljs: { + type: 'SOLID', + color: { + r: 0.40784313725490196, + g: 0.3803921568627451, + b: 0.3686274509803922, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.4627450980392157, + g: 0.43137254901960786, + b: 0.4196078431372549, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.4627450980392157, + g: 0.43137254901960786, + b: 0.4196078431372549, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.17254901960784313, + b: 0.25098039215686274, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.17254901960784313, + b: 0.25098039215686274, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.17254901960784313, + b: 0.25098039215686274, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.17254901960784313, + b: 0.25098039215686274, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.17254901960784313, + b: 0.25098039215686274, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.17254901960784313, + b: 0.25098039215686274, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.17254901960784313, + b: 0.25098039215686274, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.17254901960784313, + b: 0.25098039215686274, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.17254901960784313, + b: 0.25098039215686274, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.8745098039215686, + g: 0.3254901960784314, + b: 0.12549019607843137, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.8745098039215686, + g: 0.3254901960784314, + b: 0.12549019607843137, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.8745098039215686, + g: 0.3254901960784314, + b: 0.12549019607843137, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.8745098039215686, + g: 0.3254901960784314, + b: 0.12549019607843137, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.8745098039215686, + g: 0.3254901960784314, + b: 0.12549019607843137, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.8745098039215686, + g: 0.3254901960784314, + b: 0.12549019607843137, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.8745098039215686, + g: 0.3254901960784314, + b: 0.12549019607843137, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.4823529411764706, + g: 0.592156862745098, + b: 0.14901960784313725, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.4823529411764706, + g: 0.592156862745098, + b: 0.14901960784313725, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.4823529411764706, + g: 0.592156862745098, + b: 0.14901960784313725, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.25098039215686274, + g: 0.49411764705882355, + b: 0.9058823529411765, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.25098039215686274, + g: 0.49411764705882355, + b: 0.9058823529411765, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { r: 0.4, g: 0.4, b: 0.9176470588235294 }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { r: 0.4, g: 0.4, b: 0.9176470588235294 }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.40784313725490196, + g: 0.3803921568627451, + b: 0.3686274509803922, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.40784313725490196, + g: 0.3803921568627451, + b: 0.3686274509803922, + }, + }, +} +export default atelierForestLight diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierHeathDark.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierHeathDark.ts new file mode 100644 index 00000000..e303ca25 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierHeathDark.ts @@ -0,0 +1,227 @@ +const atelierHeathDark = { + hljs: { + type: 'SOLID', + color: { + r: 0.6705882352941176, + g: 0.6078431372549019, + b: 0.6705882352941176, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.6196078431372549, + g: 0.5607843137254902, + b: 0.6196078431372549, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.6196078431372549, + g: 0.5607843137254902, + b: 0.6196078431372549, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.25098039215686274, + b: 0.16862745098039217, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.25098039215686274, + b: 0.16862745098039217, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.25098039215686274, + b: 0.16862745098039217, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.25098039215686274, + b: 0.16862745098039217, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.25098039215686274, + b: 0.16862745098039217, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.25098039215686274, + b: 0.16862745098039217, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.25098039215686274, + b: 0.16862745098039217, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.25098039215686274, + b: 0.16862745098039217, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.25098039215686274, + b: 0.16862745098039217, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.34901960784313724, + b: 0.14901960784313725, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.34901960784313724, + b: 0.14901960784313725, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.34901960784313724, + b: 0.14901960784313725, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.34901960784313724, + b: 0.14901960784313725, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.34901960784313724, + b: 0.14901960784313725, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.34901960784313724, + b: 0.14901960784313725, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.34901960784313724, + b: 0.14901960784313725, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.5686274509803921, + g: 0.5450980392156862, + b: 0.23137254901960785, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.5686274509803921, + g: 0.5450980392156862, + b: 0.23137254901960785, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.5686274509803921, + g: 0.5450980392156862, + b: 0.23137254901960785, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.3176470588235294, + g: 0.41568627450980394, + b: 0.9254901960784314, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.3176470588235294, + g: 0.41568627450980394, + b: 0.9254901960784314, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.4823529411764706, + g: 0.34901960784313724, + b: 0.7529411764705882, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.4823529411764706, + g: 0.34901960784313724, + b: 0.7529411764705882, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.6705882352941176, + g: 0.6078431372549019, + b: 0.6705882352941176, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.6705882352941176, + g: 0.6078431372549019, + b: 0.6705882352941176, + }, + }, +} +export default atelierHeathDark diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierHeathLight.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierHeathLight.ts new file mode 100644 index 00000000..4c80cc81 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierHeathLight.ts @@ -0,0 +1,227 @@ +const atelierHeathLight = { + hljs: { + type: 'SOLID', + color: { + r: 0.4117647058823529, + g: 0.36470588235294116, + b: 0.4117647058823529, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.4666666666666667, + g: 0.4117647058823529, + b: 0.4666666666666667, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.4666666666666667, + g: 0.4117647058823529, + b: 0.4666666666666667, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.25098039215686274, + b: 0.16862745098039217, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.25098039215686274, + b: 0.16862745098039217, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.25098039215686274, + b: 0.16862745098039217, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.25098039215686274, + b: 0.16862745098039217, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.25098039215686274, + b: 0.16862745098039217, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.25098039215686274, + b: 0.16862745098039217, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.25098039215686274, + b: 0.16862745098039217, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.25098039215686274, + b: 0.16862745098039217, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.25098039215686274, + b: 0.16862745098039217, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.34901960784313724, + b: 0.14901960784313725, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.34901960784313724, + b: 0.14901960784313725, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.34901960784313724, + b: 0.14901960784313725, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.34901960784313724, + b: 0.14901960784313725, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.34901960784313724, + b: 0.14901960784313725, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.34901960784313724, + b: 0.14901960784313725, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.34901960784313724, + b: 0.14901960784313725, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.5686274509803921, + g: 0.5450980392156862, + b: 0.23137254901960785, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.5686274509803921, + g: 0.5450980392156862, + b: 0.23137254901960785, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.5686274509803921, + g: 0.5450980392156862, + b: 0.23137254901960785, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.3176470588235294, + g: 0.41568627450980394, + b: 0.9254901960784314, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.3176470588235294, + g: 0.41568627450980394, + b: 0.9254901960784314, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.4823529411764706, + g: 0.34901960784313724, + b: 0.7529411764705882, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.4823529411764706, + g: 0.34901960784313724, + b: 0.7529411764705882, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.4117647058823529, + g: 0.36470588235294116, + b: 0.4117647058823529, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.4117647058823529, + g: 0.36470588235294116, + b: 0.4117647058823529, + }, + }, +} +export default atelierHeathLight diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierLakesideDark.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierLakesideDark.ts new file mode 100644 index 00000000..2f94f5c5 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierLakesideDark.ts @@ -0,0 +1,227 @@ +const atelierLakesideDark = { + hljs: { + type: 'SOLID', + color: { + r: 0.49411764705882355, + g: 0.6352941176470588, + b: 0.7058823529411765, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.44313725490196076, + g: 0.5843137254901961, + b: 0.6588235294117647, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.44313725490196076, + g: 0.5843137254901961, + b: 0.6588235294117647, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.8235294117647058, + g: 0.17647058823529413, + b: 0.4470588235294118, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.8235294117647058, + g: 0.17647058823529413, + b: 0.4470588235294118, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.8235294117647058, + g: 0.17647058823529413, + b: 0.4470588235294118, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.8235294117647058, + g: 0.17647058823529413, + b: 0.4470588235294118, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.8235294117647058, + g: 0.17647058823529413, + b: 0.4470588235294118, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.8235294117647058, + g: 0.17647058823529413, + b: 0.4470588235294118, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.8235294117647058, + g: 0.17647058823529413, + b: 0.4470588235294118, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.8235294117647058, + g: 0.17647058823529413, + b: 0.4470588235294118, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.8235294117647058, + g: 0.17647058823529413, + b: 0.4470588235294118, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.5764705882352941, + g: 0.3607843137254902, + b: 0.1450980392156863, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.5764705882352941, + g: 0.3607843137254902, + b: 0.1450980392156863, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.5764705882352941, + g: 0.3607843137254902, + b: 0.1450980392156863, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.5764705882352941, + g: 0.3607843137254902, + b: 0.1450980392156863, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.5764705882352941, + g: 0.3607843137254902, + b: 0.1450980392156863, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.5764705882352941, + g: 0.3607843137254902, + b: 0.1450980392156863, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.5764705882352941, + g: 0.3607843137254902, + b: 0.1450980392156863, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.33725490196078434, + g: 0.5490196078431373, + b: 0.23137254901960785, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.33725490196078434, + g: 0.5490196078431373, + b: 0.23137254901960785, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.33725490196078434, + g: 0.5490196078431373, + b: 0.23137254901960785, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.1450980392156863, + g: 0.4980392156862745, + b: 0.6784313725490196, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.1450980392156863, + g: 0.4980392156862745, + b: 0.6784313725490196, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.4196078431372549, + g: 0.4196078431372549, + b: 0.7215686274509804, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.4196078431372549, + g: 0.4196078431372549, + b: 0.7215686274509804, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.49411764705882355, + g: 0.6352941176470588, + b: 0.7058823529411765, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.49411764705882355, + g: 0.6352941176470588, + b: 0.7058823529411765, + }, + }, +} +export default atelierLakesideDark diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierLakesideLight.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierLakesideLight.ts new file mode 100644 index 00000000..829343e9 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierLakesideLight.ts @@ -0,0 +1,227 @@ +const atelierLakesideLight = { + hljs: { + type: 'SOLID', + color: { + r: 0.3176470588235294, + g: 0.42745098039215684, + b: 0.4823529411764706, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.35294117647058826, + g: 0.4823529411764706, + b: 0.5490196078431373, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.35294117647058826, + g: 0.4823529411764706, + b: 0.5490196078431373, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.8235294117647058, + g: 0.17647058823529413, + b: 0.4470588235294118, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.8235294117647058, + g: 0.17647058823529413, + b: 0.4470588235294118, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.8235294117647058, + g: 0.17647058823529413, + b: 0.4470588235294118, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.8235294117647058, + g: 0.17647058823529413, + b: 0.4470588235294118, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.8235294117647058, + g: 0.17647058823529413, + b: 0.4470588235294118, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.8235294117647058, + g: 0.17647058823529413, + b: 0.4470588235294118, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.8235294117647058, + g: 0.17647058823529413, + b: 0.4470588235294118, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.8235294117647058, + g: 0.17647058823529413, + b: 0.4470588235294118, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.8235294117647058, + g: 0.17647058823529413, + b: 0.4470588235294118, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.5764705882352941, + g: 0.3607843137254902, + b: 0.1450980392156863, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.5764705882352941, + g: 0.3607843137254902, + b: 0.1450980392156863, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.5764705882352941, + g: 0.3607843137254902, + b: 0.1450980392156863, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.5764705882352941, + g: 0.3607843137254902, + b: 0.1450980392156863, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.5764705882352941, + g: 0.3607843137254902, + b: 0.1450980392156863, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.5764705882352941, + g: 0.3607843137254902, + b: 0.1450980392156863, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.5764705882352941, + g: 0.3607843137254902, + b: 0.1450980392156863, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.33725490196078434, + g: 0.5490196078431373, + b: 0.23137254901960785, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.33725490196078434, + g: 0.5490196078431373, + b: 0.23137254901960785, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.33725490196078434, + g: 0.5490196078431373, + b: 0.23137254901960785, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.1450980392156863, + g: 0.4980392156862745, + b: 0.6784313725490196, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.1450980392156863, + g: 0.4980392156862745, + b: 0.6784313725490196, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.4196078431372549, + g: 0.4196078431372549, + b: 0.7215686274509804, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.4196078431372549, + g: 0.4196078431372549, + b: 0.7215686274509804, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.3176470588235294, + g: 0.42745098039215684, + b: 0.4823529411764706, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.3176470588235294, + g: 0.42745098039215684, + b: 0.4823529411764706, + }, + }, +} +export default atelierLakesideLight diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierPlateauDark.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierPlateauDark.ts new file mode 100644 index 00000000..7ef10457 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierPlateauDark.ts @@ -0,0 +1,243 @@ +const atelierPlateauDark = { + hljs: { + type: 'SOLID', + color: { + r: 0.5411764705882353, + g: 0.5215686274509804, + b: 0.5215686274509804, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.49411764705882355, + g: 0.4666666666666667, + b: 0.4666666666666667, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.49411764705882355, + g: 0.4666666666666667, + b: 0.4666666666666667, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.28627450980392155, + b: 0.28627450980392155, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.28627450980392155, + b: 0.28627450980392155, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.28627450980392155, + b: 0.28627450980392155, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.28627450980392155, + b: 0.28627450980392155, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.28627450980392155, + b: 0.28627450980392155, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.28627450980392155, + b: 0.28627450980392155, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.28627450980392155, + b: 0.28627450980392155, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.28627450980392155, + b: 0.28627450980392155, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.28627450980392155, + b: 0.28627450980392155, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.7058823529411765, + g: 0.35294117647058826, + b: 0.23529411764705882, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.7058823529411765, + g: 0.35294117647058826, + b: 0.23529411764705882, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.7058823529411765, + g: 0.35294117647058826, + b: 0.23529411764705882, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.7058823529411765, + g: 0.35294117647058826, + b: 0.23529411764705882, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.7058823529411765, + g: 0.35294117647058826, + b: 0.23529411764705882, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.7058823529411765, + g: 0.35294117647058826, + b: 0.23529411764705882, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.7058823529411765, + g: 0.35294117647058826, + b: 0.23529411764705882, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.29411764705882354, + g: 0.5450980392156862, + b: 0.5450980392156862, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.29411764705882354, + g: 0.5450980392156862, + b: 0.5450980392156862, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.29411764705882354, + g: 0.5450980392156862, + b: 0.5450980392156862, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.4470588235294118, + g: 0.4470588235294118, + b: 0.792156862745098, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.4470588235294118, + g: 0.4470588235294118, + b: 0.792156862745098, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.5176470588235295, + g: 0.39215686274509803, + b: 0.7686274509803922, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.5176470588235295, + g: 0.39215686274509803, + b: 0.7686274509803922, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.28627450980392155, + b: 0.28627450980392155, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.29411764705882354, + g: 0.5450980392156862, + b: 0.5450980392156862, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.5411764705882353, + g: 0.5215686274509804, + b: 0.5215686274509804, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.5411764705882353, + g: 0.5215686274509804, + b: 0.5215686274509804, + }, + }, +} +export default atelierPlateauDark diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierPlateauLight.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierPlateauLight.ts new file mode 100644 index 00000000..aef15fcc --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierPlateauLight.ts @@ -0,0 +1,243 @@ +const atelierPlateauLight = { + hljs: { + type: 'SOLID', + color: { + r: 0.34509803921568627, + g: 0.3137254901960784, + b: 0.3137254901960784, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.396078431372549, + g: 0.36470588235294116, + b: 0.36470588235294116, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.396078431372549, + g: 0.36470588235294116, + b: 0.36470588235294116, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.28627450980392155, + b: 0.28627450980392155, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.28627450980392155, + b: 0.28627450980392155, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.28627450980392155, + b: 0.28627450980392155, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.28627450980392155, + b: 0.28627450980392155, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.28627450980392155, + b: 0.28627450980392155, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.28627450980392155, + b: 0.28627450980392155, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.28627450980392155, + b: 0.28627450980392155, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.28627450980392155, + b: 0.28627450980392155, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.28627450980392155, + b: 0.28627450980392155, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.7058823529411765, + g: 0.35294117647058826, + b: 0.23529411764705882, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.7058823529411765, + g: 0.35294117647058826, + b: 0.23529411764705882, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.7058823529411765, + g: 0.35294117647058826, + b: 0.23529411764705882, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.7058823529411765, + g: 0.35294117647058826, + b: 0.23529411764705882, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.7058823529411765, + g: 0.35294117647058826, + b: 0.23529411764705882, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.7058823529411765, + g: 0.35294117647058826, + b: 0.23529411764705882, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.7058823529411765, + g: 0.35294117647058826, + b: 0.23529411764705882, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.29411764705882354, + g: 0.5450980392156862, + b: 0.5450980392156862, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.29411764705882354, + g: 0.5450980392156862, + b: 0.5450980392156862, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.29411764705882354, + g: 0.5450980392156862, + b: 0.5450980392156862, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.4470588235294118, + g: 0.4470588235294118, + b: 0.792156862745098, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.4470588235294118, + g: 0.4470588235294118, + b: 0.792156862745098, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.5176470588235295, + g: 0.39215686274509803, + b: 0.7686274509803922, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.5176470588235295, + g: 0.39215686274509803, + b: 0.7686274509803922, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.792156862745098, + g: 0.28627450980392155, + b: 0.28627450980392155, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.29411764705882354, + g: 0.5450980392156862, + b: 0.5450980392156862, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.34509803921568627, + g: 0.3137254901960784, + b: 0.3137254901960784, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.34509803921568627, + g: 0.3137254901960784, + b: 0.3137254901960784, + }, + }, +} +export default atelierPlateauLight diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierSavannaDark.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierSavannaDark.ts new file mode 100644 index 00000000..c629a4ca --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierSavannaDark.ts @@ -0,0 +1,227 @@ +const atelierSavannaDark = { + hljs: { + type: 'SOLID', + color: { + r: 0.5294117647058824, + g: 0.5725490196078431, + b: 0.5411764705882353, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.47058823529411764, + g: 0.5294117647058824, + b: 0.49019607843137253, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.47058823529411764, + g: 0.5294117647058824, + b: 0.49019607843137253, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.6941176470588235, + g: 0.3803921568627451, + b: 0.2235294117647059, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.6941176470588235, + g: 0.3803921568627451, + b: 0.2235294117647059, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.6941176470588235, + g: 0.3803921568627451, + b: 0.2235294117647059, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.6941176470588235, + g: 0.3803921568627451, + b: 0.2235294117647059, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.6941176470588235, + g: 0.3803921568627451, + b: 0.2235294117647059, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.6941176470588235, + g: 0.3803921568627451, + b: 0.2235294117647059, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.6941176470588235, + g: 0.3803921568627451, + b: 0.2235294117647059, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.6941176470588235, + g: 0.3803921568627451, + b: 0.2235294117647059, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.6941176470588235, + g: 0.3803921568627451, + b: 0.2235294117647059, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.6235294117647059, + g: 0.44313725490196076, + b: 0.23529411764705882, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.6235294117647059, + g: 0.44313725490196076, + b: 0.23529411764705882, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.6235294117647059, + g: 0.44313725490196076, + b: 0.23529411764705882, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.6235294117647059, + g: 0.44313725490196076, + b: 0.23529411764705882, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.6235294117647059, + g: 0.44313725490196076, + b: 0.23529411764705882, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.6235294117647059, + g: 0.44313725490196076, + b: 0.23529411764705882, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.6235294117647059, + g: 0.44313725490196076, + b: 0.23529411764705882, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { r: 0.2823529411764706, g: 0.6, b: 0.38823529411764707 }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { r: 0.2823529411764706, g: 0.6, b: 0.38823529411764707 }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { r: 0.2823529411764706, g: 0.6, b: 0.38823529411764707 }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.2784313725490196, + g: 0.5490196078431373, + b: 0.5647058823529412, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.2784313725490196, + g: 0.5490196078431373, + b: 0.5647058823529412, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.3333333333333333, + g: 0.5215686274509804, + b: 0.6078431372549019, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.3333333333333333, + g: 0.5215686274509804, + b: 0.6078431372549019, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.6941176470588235, + g: 0.3803921568627451, + b: 0.2235294117647059, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { r: 0.2823529411764706, g: 0.6, b: 0.38823529411764707 }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.5294117647058824, + g: 0.5725490196078431, + b: 0.5411764705882353, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.5294117647058824, + g: 0.5725490196078431, + b: 0.5411764705882353, + }, + }, +} +export default atelierSavannaDark diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierSavannaLight.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierSavannaLight.ts new file mode 100644 index 00000000..8435d17f --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierSavannaLight.ts @@ -0,0 +1,227 @@ +const atelierSavannaLight = { + hljs: { + type: 'SOLID', + color: { + r: 0.3215686274509804, + g: 0.3764705882352941, + b: 0.3411764705882353, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.37254901960784315, + g: 0.42745098039215684, + b: 0.39215686274509803, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.37254901960784315, + g: 0.42745098039215684, + b: 0.39215686274509803, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.6941176470588235, + g: 0.3803921568627451, + b: 0.2235294117647059, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.6941176470588235, + g: 0.3803921568627451, + b: 0.2235294117647059, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.6941176470588235, + g: 0.3803921568627451, + b: 0.2235294117647059, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.6941176470588235, + g: 0.3803921568627451, + b: 0.2235294117647059, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.6941176470588235, + g: 0.3803921568627451, + b: 0.2235294117647059, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.6941176470588235, + g: 0.3803921568627451, + b: 0.2235294117647059, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.6941176470588235, + g: 0.3803921568627451, + b: 0.2235294117647059, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.6941176470588235, + g: 0.3803921568627451, + b: 0.2235294117647059, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.6941176470588235, + g: 0.3803921568627451, + b: 0.2235294117647059, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.6235294117647059, + g: 0.44313725490196076, + b: 0.23529411764705882, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.6235294117647059, + g: 0.44313725490196076, + b: 0.23529411764705882, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.6235294117647059, + g: 0.44313725490196076, + b: 0.23529411764705882, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.6235294117647059, + g: 0.44313725490196076, + b: 0.23529411764705882, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.6235294117647059, + g: 0.44313725490196076, + b: 0.23529411764705882, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.6235294117647059, + g: 0.44313725490196076, + b: 0.23529411764705882, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.6235294117647059, + g: 0.44313725490196076, + b: 0.23529411764705882, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { r: 0.2823529411764706, g: 0.6, b: 0.38823529411764707 }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { r: 0.2823529411764706, g: 0.6, b: 0.38823529411764707 }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { r: 0.2823529411764706, g: 0.6, b: 0.38823529411764707 }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.2784313725490196, + g: 0.5490196078431373, + b: 0.5647058823529412, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.2784313725490196, + g: 0.5490196078431373, + b: 0.5647058823529412, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.3333333333333333, + g: 0.5215686274509804, + b: 0.6078431372549019, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.3333333333333333, + g: 0.5215686274509804, + b: 0.6078431372549019, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.6941176470588235, + g: 0.3803921568627451, + b: 0.2235294117647059, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { r: 0.2823529411764706, g: 0.6, b: 0.38823529411764707 }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.3215686274509804, + g: 0.3764705882352941, + b: 0.3411764705882353, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.3215686274509804, + g: 0.3764705882352941, + b: 0.3411764705882353, + }, + }, +} +export default atelierSavannaLight diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierSeasideDark.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierSeasideDark.ts new file mode 100644 index 00000000..b8fa5ba8 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierSeasideDark.ts @@ -0,0 +1,219 @@ +const atelierSeasideDark = { + hljs: { + type: 'SOLID', + color: { + r: 0.5490196078431373, + g: 0.6509803921568628, + b: 0.5490196078431373, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { r: 0.5019607843137255, g: 0.6, b: 0.5019607843137255 }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { r: 0.5019607843137255, g: 0.6, b: 0.5019607843137255 }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.09803921568627451, + b: 0.23529411764705882, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.09803921568627451, + b: 0.23529411764705882, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.09803921568627451, + b: 0.23529411764705882, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.09803921568627451, + b: 0.23529411764705882, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.09803921568627451, + b: 0.23529411764705882, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.09803921568627451, + b: 0.23529411764705882, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.09803921568627451, + b: 0.23529411764705882, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.09803921568627451, + b: 0.23529411764705882, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.09803921568627451, + b: 0.23529411764705882, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.5294117647058824, + g: 0.44313725490196076, + b: 0.11372549019607843, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.5294117647058824, + g: 0.44313725490196076, + b: 0.11372549019607843, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.5294117647058824, + g: 0.44313725490196076, + b: 0.11372549019607843, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.5294117647058824, + g: 0.44313725490196076, + b: 0.11372549019607843, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.5294117647058824, + g: 0.44313725490196076, + b: 0.11372549019607843, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.5294117647058824, + g: 0.44313725490196076, + b: 0.11372549019607843, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.5294117647058824, + g: 0.44313725490196076, + b: 0.11372549019607843, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.1607843137254902, + g: 0.6392156862745098, + b: 0.1607843137254902, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.1607843137254902, + g: 0.6392156862745098, + b: 0.1607843137254902, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.1607843137254902, + g: 0.6392156862745098, + b: 0.1607843137254902, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.23921568627450981, + g: 0.3843137254901961, + b: 0.9607843137254902, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.23921568627450981, + g: 0.3843137254901961, + b: 0.9607843137254902, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.6784313725490196, + g: 0.16862745098039217, + b: 0.9333333333333333, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.6784313725490196, + g: 0.16862745098039217, + b: 0.9333333333333333, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.5490196078431373, + g: 0.6509803921568628, + b: 0.5490196078431373, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.5490196078431373, + g: 0.6509803921568628, + b: 0.5490196078431373, + }, + }, +} +export default atelierSeasideDark diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierSeasideLight.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierSeasideLight.ts new file mode 100644 index 00000000..ef21412e --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierSeasideLight.ts @@ -0,0 +1,227 @@ +const atelierSeasideLight = { + hljs: { + type: 'SOLID', + color: { + r: 0.3686274509803922, + g: 0.43137254901960786, + b: 0.3686274509803922, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.40784313725490196, + g: 0.49019607843137253, + b: 0.40784313725490196, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.40784313725490196, + g: 0.49019607843137253, + b: 0.40784313725490196, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.09803921568627451, + b: 0.23529411764705882, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.09803921568627451, + b: 0.23529411764705882, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.09803921568627451, + b: 0.23529411764705882, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.09803921568627451, + b: 0.23529411764705882, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.09803921568627451, + b: 0.23529411764705882, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.09803921568627451, + b: 0.23529411764705882, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.09803921568627451, + b: 0.23529411764705882, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.09803921568627451, + b: 0.23529411764705882, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.09803921568627451, + b: 0.23529411764705882, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.5294117647058824, + g: 0.44313725490196076, + b: 0.11372549019607843, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.5294117647058824, + g: 0.44313725490196076, + b: 0.11372549019607843, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.5294117647058824, + g: 0.44313725490196076, + b: 0.11372549019607843, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.5294117647058824, + g: 0.44313725490196076, + b: 0.11372549019607843, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.5294117647058824, + g: 0.44313725490196076, + b: 0.11372549019607843, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.5294117647058824, + g: 0.44313725490196076, + b: 0.11372549019607843, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.5294117647058824, + g: 0.44313725490196076, + b: 0.11372549019607843, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.1607843137254902, + g: 0.6392156862745098, + b: 0.1607843137254902, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.1607843137254902, + g: 0.6392156862745098, + b: 0.1607843137254902, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.1607843137254902, + g: 0.6392156862745098, + b: 0.1607843137254902, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.23921568627450981, + g: 0.3843137254901961, + b: 0.9607843137254902, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.23921568627450981, + g: 0.3843137254901961, + b: 0.9607843137254902, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.6784313725490196, + g: 0.16862745098039217, + b: 0.9333333333333333, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.6784313725490196, + g: 0.16862745098039217, + b: 0.9333333333333333, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.3686274509803922, + g: 0.43137254901960786, + b: 0.3686274509803922, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.3686274509803922, + g: 0.43137254901960786, + b: 0.3686274509803922, + }, + }, +} +export default atelierSeasideLight diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierSulphurpoolDark.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierSulphurpoolDark.ts new file mode 100644 index 00000000..f6e90403 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierSulphurpoolDark.ts @@ -0,0 +1,219 @@ +const atelierSulphurpoolDark = { + hljs: { + type: 'SOLID', + color: { + r: 0.592156862745098, + g: 0.615686274509804, + b: 0.7058823529411765, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.5372549019607843, + g: 0.5568627450980392, + b: 0.6431372549019608, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.5372549019607843, + g: 0.5568627450980392, + b: 0.6431372549019608, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.788235294117647, + g: 0.28627450980392155, + b: 0.13333333333333333, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.788235294117647, + g: 0.28627450980392155, + b: 0.13333333333333333, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.788235294117647, + g: 0.28627450980392155, + b: 0.13333333333333333, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.788235294117647, + g: 0.28627450980392155, + b: 0.13333333333333333, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.788235294117647, + g: 0.28627450980392155, + b: 0.13333333333333333, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.788235294117647, + g: 0.28627450980392155, + b: 0.13333333333333333, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.788235294117647, + g: 0.28627450980392155, + b: 0.13333333333333333, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.788235294117647, + g: 0.28627450980392155, + b: 0.13333333333333333, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.788235294117647, + g: 0.28627450980392155, + b: 0.13333333333333333, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.7803921568627451, + g: 0.4196078431372549, + b: 0.1607843137254902, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.7803921568627451, + g: 0.4196078431372549, + b: 0.1607843137254902, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.7803921568627451, + g: 0.4196078431372549, + b: 0.1607843137254902, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.7803921568627451, + g: 0.4196078431372549, + b: 0.1607843137254902, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.7803921568627451, + g: 0.4196078431372549, + b: 0.1607843137254902, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.7803921568627451, + g: 0.4196078431372549, + b: 0.1607843137254902, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.7803921568627451, + g: 0.4196078431372549, + b: 0.1607843137254902, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.6745098039215687, + g: 0.592156862745098, + b: 0.2235294117647059, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.6745098039215687, + g: 0.592156862745098, + b: 0.2235294117647059, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.6745098039215687, + g: 0.592156862745098, + b: 0.2235294117647059, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.23921568627450981, + g: 0.5607843137254902, + b: 0.8196078431372549, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.23921568627450981, + g: 0.5607843137254902, + b: 0.8196078431372549, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { r: 0.4, g: 0.4745098039215686, b: 0.8 }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { r: 0.4, g: 0.4745098039215686, b: 0.8 }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.592156862745098, + g: 0.615686274509804, + b: 0.7058823529411765, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.592156862745098, + g: 0.615686274509804, + b: 0.7058823529411765, + }, + }, +} +export default atelierSulphurpoolDark diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierSulphurpoolLight.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierSulphurpoolLight.ts new file mode 100644 index 00000000..3f5a48af --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atelierSulphurpoolLight.ts @@ -0,0 +1,207 @@ +const atelierSulphurpoolLight = { + hljs: { + type: 'SOLID', + color: { r: 0.3686274509803922, g: 0.4, b: 0.5294117647058824 }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.4196078431372549, + g: 0.45098039215686275, + b: 0.5803921568627451, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.4196078431372549, + g: 0.45098039215686275, + b: 0.5803921568627451, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.788235294117647, + g: 0.28627450980392155, + b: 0.13333333333333333, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.788235294117647, + g: 0.28627450980392155, + b: 0.13333333333333333, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.788235294117647, + g: 0.28627450980392155, + b: 0.13333333333333333, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.788235294117647, + g: 0.28627450980392155, + b: 0.13333333333333333, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.788235294117647, + g: 0.28627450980392155, + b: 0.13333333333333333, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.788235294117647, + g: 0.28627450980392155, + b: 0.13333333333333333, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.788235294117647, + g: 0.28627450980392155, + b: 0.13333333333333333, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.788235294117647, + g: 0.28627450980392155, + b: 0.13333333333333333, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.788235294117647, + g: 0.28627450980392155, + b: 0.13333333333333333, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.7803921568627451, + g: 0.4196078431372549, + b: 0.1607843137254902, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.7803921568627451, + g: 0.4196078431372549, + b: 0.1607843137254902, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.7803921568627451, + g: 0.4196078431372549, + b: 0.1607843137254902, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.7803921568627451, + g: 0.4196078431372549, + b: 0.1607843137254902, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.7803921568627451, + g: 0.4196078431372549, + b: 0.1607843137254902, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.7803921568627451, + g: 0.4196078431372549, + b: 0.1607843137254902, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.7803921568627451, + g: 0.4196078431372549, + b: 0.1607843137254902, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.6745098039215687, + g: 0.592156862745098, + b: 0.2235294117647059, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.6745098039215687, + g: 0.592156862745098, + b: 0.2235294117647059, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.6745098039215687, + g: 0.592156862745098, + b: 0.2235294117647059, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.23921568627450981, + g: 0.5607843137254902, + b: 0.8196078431372549, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.23921568627450981, + g: 0.5607843137254902, + b: 0.8196078431372549, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { r: 0.4, g: 0.4745098039215686, b: 0.8 }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { r: 0.4, g: 0.4745098039215686, b: 0.8 }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { r: 0.3686274509803922, g: 0.4, b: 0.5294117647058824 }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { r: 0.3686274509803922, g: 0.4, b: 0.5294117647058824 }, + }, +} +export default atelierSulphurpoolLight diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atomOneDark.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atomOneDark.ts new file mode 100644 index 00000000..b8e1b60b --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atomOneDark.ts @@ -0,0 +1,251 @@ +const atomOneDark = { + hljs: { + type: 'SOLID', + color: { + r: 0.6705882352941176, + g: 0.6980392156862745, + b: 0.7490196078431373, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.3607843137254902, + g: 0.38823529411764707, + b: 0.4392156862745098, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.3607843137254902, + g: 0.38823529411764707, + b: 0.4392156862745098, + }, + }, + 'hljs-doctag': { + type: 'SOLID', + color: { + r: 0.7764705882352941, + g: 0.47058823529411764, + b: 0.8666666666666667, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.7764705882352941, + g: 0.47058823529411764, + b: 0.8666666666666667, + }, + }, + 'hljs-formula': { + type: 'SOLID', + color: { + r: 0.7764705882352941, + g: 0.47058823529411764, + b: 0.8666666666666667, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.8784313725490196, + g: 0.4235294117647059, + b: 0.4588235294117647, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.8784313725490196, + g: 0.4235294117647059, + b: 0.4588235294117647, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.8784313725490196, + g: 0.4235294117647059, + b: 0.4588235294117647, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.8784313725490196, + g: 0.4235294117647059, + b: 0.4588235294117647, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.8784313725490196, + g: 0.4235294117647059, + b: 0.4588235294117647, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.33725490196078434, + g: 0.7137254901960784, + b: 0.7607843137254902, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.596078431372549, + g: 0.7647058823529411, + b: 0.4745098039215686, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.596078431372549, + g: 0.7647058823529411, + b: 0.4745098039215686, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.596078431372549, + g: 0.7647058823529411, + b: 0.4745098039215686, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.596078431372549, + g: 0.7647058823529411, + b: 0.4745098039215686, + }, + }, + 'hljs-meta-string': { + type: 'SOLID', + color: { + r: 0.596078431372549, + g: 0.7647058823529411, + b: 0.4745098039215686, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.7529411764705882, + b: 0.4823529411764706, + }, + }, + 'hljs-classhljs-title': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.7529411764705882, + b: 0.4823529411764706, + }, + }, + 'hljs-attr': { + type: 'SOLID', + color: { r: 0.8196078431372549, g: 0.6039215686274509, b: 0.4 }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { r: 0.8196078431372549, g: 0.6039215686274509, b: 0.4 }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { r: 0.8196078431372549, g: 0.6039215686274509, b: 0.4 }, + }, + 'hljs-type': { + type: 'SOLID', + color: { r: 0.8196078431372549, g: 0.6039215686274509, b: 0.4 }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { r: 0.8196078431372549, g: 0.6039215686274509, b: 0.4 }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { r: 0.8196078431372549, g: 0.6039215686274509, b: 0.4 }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { r: 0.8196078431372549, g: 0.6039215686274509, b: 0.4 }, + }, + 'hljs-number': { + type: 'SOLID', + color: { r: 0.8196078431372549, g: 0.6039215686274509, b: 0.4 }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.3803921568627451, + g: 0.6823529411764706, + b: 0.9333333333333333, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.3803921568627451, + g: 0.6823529411764706, + b: 0.9333333333333333, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.6705882352941176, + g: 0.6980392156862745, + b: 0.7490196078431373, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.3803921568627451, + g: 0.6823529411764706, + b: 0.9333333333333333, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.3803921568627451, + g: 0.6823529411764706, + b: 0.9333333333333333, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.3803921568627451, + g: 0.6823529411764706, + b: 0.9333333333333333, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.6705882352941176, + g: 0.6980392156862745, + b: 0.7490196078431373, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.6705882352941176, + g: 0.6980392156862745, + b: 0.7490196078431373, + }, + }, +} +export default atomOneDark diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atomOneDarkReasonable.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atomOneDarkReasonable.ts new file mode 100644 index 00000000..04617c9a --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atomOneDarkReasonable.ts @@ -0,0 +1,223 @@ +const atomOneDarkReasonable = { + hljs: { + type: 'SOLID', + color: { + r: 0.6705882352941176, + g: 0.6980392156862745, + b: 0.7490196078431373, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.14901960784313725, + b: 0.4470588235294118, + }, + }, + 'hljs-operator': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.14901960784313725, + b: 0.4470588235294118, + }, + }, + 'hljs-pattern-match': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.14901960784313725, + b: 0.4470588235294118, + }, + }, + 'hljs-pattern-matchhljs-constructor': { + type: 'SOLID', + color: { + r: 0.3803921568627451, + g: 0.6823529411764706, + b: 0.9333333333333333, + }, + }, + 'hljs-function': { + type: 'SOLID', + color: { + r: 0.3803921568627451, + g: 0.6823529411764706, + b: 0.9333333333333333, + }, + }, + 'hljs-functionhljs-params': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.8862745098039215, + b: 0.1803921568627451, + }, + }, + 'hljs-functionhljs-paramshljs-typing': { + type: 'SOLID', + color: { + r: 0.9921568627450981, + g: 0.592156862745098, + b: 0.12156862745098039, + }, + }, + 'hljs-module-accesshljs-module': { + type: 'SOLID', + color: { + r: 0.49411764705882355, + g: 0.3411764705882353, + b: 0.7607843137254902, + }, + }, + 'hljs-constructor': { + type: 'SOLID', + color: { + r: 0.8862745098039215, + g: 0.7254901960784313, + b: 0.23921568627450981, + }, + }, + 'hljs-constructorhljs-string': { + type: 'SOLID', + color: { r: 0.611764705882353, g: 0.8, b: 0.396078431372549 }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.6941176470588235, + g: 0.5568627450980392, + b: 0.6941176470588235, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.6941176470588235, + g: 0.5568627450980392, + b: 0.6941176470588235, + }, + }, + 'hljs-doctag': { + type: 'SOLID', + color: { + r: 0.7764705882352941, + g: 0.47058823529411764, + b: 0.8666666666666667, + }, + }, + 'hljs-formula': { + type: 'SOLID', + color: { + r: 0.7764705882352941, + g: 0.47058823529411764, + b: 0.8666666666666667, + }, + }, + 'hljs-sectionhljs-namehljs-selector-taghljs-deletion': { + type: 'SOLID', + color: { + r: 0.8784313725490196, + g: 0.4235294117647059, + b: 0.4588235294117647, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.8784313725490196, + g: 0.4235294117647059, + b: 0.4588235294117647, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.33725490196078434, + g: 0.7137254901960784, + b: 0.7607843137254902, + }, + }, + 'hljs-stringhljs-regexphljs-additionhljs-attribute': { + type: 'SOLID', + color: { + r: 0.596078431372549, + g: 0.7647058823529411, + b: 0.4745098039215686, + }, + }, + 'hljs-meta-string': { + type: 'SOLID', + color: { + r: 0.596078431372549, + g: 0.7647058823529411, + b: 0.4745098039215686, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.7529411764705882, + b: 0.4823529411764706, + }, + }, + 'hljs-classhljs-title': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.7529411764705882, + b: 0.4823529411764706, + }, + }, + 'hljs-attrhljs-variablehljs-template-variablehljs-typehljs-selector-classhljs-selector-attrhljs-selector-pseudo': { + type: 'SOLID', + color: { r: 0.8196078431372549, g: 0.6039215686274509, b: 0.4 }, + }, + 'hljs-number': { + type: 'SOLID', + color: { r: 0.8196078431372549, g: 0.6039215686274509, b: 0.4 }, + }, + 'hljs-symbolhljs-bullethljs-linkhljs-metahljs-selector-id': { + type: 'SOLID', + color: { + r: 0.3803921568627451, + g: 0.6823529411764706, + b: 0.9333333333333333, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.3803921568627451, + g: 0.6823529411764706, + b: 0.9333333333333333, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.6705882352941176, + g: 0.6980392156862745, + b: 0.7490196078431373, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.6705882352941176, + g: 0.6980392156862745, + b: 0.7490196078431373, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.6705882352941176, + g: 0.6980392156862745, + b: 0.7490196078431373, + }, + }, +} +export default atomOneDarkReasonable diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atomOneLight.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atomOneLight.ts new file mode 100644 index 00000000..6a3ba770 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/atomOneLight.ts @@ -0,0 +1,283 @@ +const atomOneLight = { + hljs: { + type: 'SOLID', + color: { + r: 0.2196078431372549, + g: 0.22745098039215686, + b: 0.25882352941176473, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.6274509803921569, + g: 0.6313725490196078, + b: 0.6549019607843137, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.6274509803921569, + g: 0.6313725490196078, + b: 0.6549019607843137, + }, + }, + 'hljs-doctag': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.14901960784313725, + b: 0.6431372549019608, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.14901960784313725, + b: 0.6431372549019608, + }, + }, + 'hljs-formula': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.14901960784313725, + b: 0.6431372549019608, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.8941176470588236, + g: 0.33725490196078434, + b: 0.28627450980392155, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.8941176470588236, + g: 0.33725490196078434, + b: 0.28627450980392155, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.8941176470588236, + g: 0.33725490196078434, + b: 0.28627450980392155, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.8941176470588236, + g: 0.33725490196078434, + b: 0.28627450980392155, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.8941176470588236, + g: 0.33725490196078434, + b: 0.28627450980392155, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.00392156862745098, + g: 0.5176470588235295, + b: 0.7333333333333333, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.3137254901960784, + g: 0.6313725490196078, + b: 0.30980392156862746, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.3137254901960784, + g: 0.6313725490196078, + b: 0.30980392156862746, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.3137254901960784, + g: 0.6313725490196078, + b: 0.30980392156862746, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.3137254901960784, + g: 0.6313725490196078, + b: 0.30980392156862746, + }, + }, + 'hljs-meta-string': { + type: 'SOLID', + color: { + r: 0.3137254901960784, + g: 0.6313725490196078, + b: 0.30980392156862746, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.7568627450980392, + g: 0.5176470588235295, + b: 0.00392156862745098, + }, + }, + 'hljs-classhljs-title': { + type: 'SOLID', + color: { + r: 0.7568627450980392, + g: 0.5176470588235295, + b: 0.00392156862745098, + }, + }, + 'hljs-attr': { + type: 'SOLID', + color: { + r: 0.596078431372549, + g: 0.40784313725490196, + b: 0.00392156862745098, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.596078431372549, + g: 0.40784313725490196, + b: 0.00392156862745098, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.596078431372549, + g: 0.40784313725490196, + b: 0.00392156862745098, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.596078431372549, + g: 0.40784313725490196, + b: 0.00392156862745098, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.596078431372549, + g: 0.40784313725490196, + b: 0.00392156862745098, + }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { + r: 0.596078431372549, + g: 0.40784313725490196, + b: 0.00392156862745098, + }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { + r: 0.596078431372549, + g: 0.40784313725490196, + b: 0.00392156862745098, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.596078431372549, + g: 0.40784313725490196, + b: 0.00392156862745098, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.25098039215686274, + g: 0.47058823529411764, + b: 0.9490196078431372, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.25098039215686274, + g: 0.47058823529411764, + b: 0.9490196078431372, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.2196078431372549, + g: 0.22745098039215686, + b: 0.25882352941176473, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.25098039215686274, + g: 0.47058823529411764, + b: 0.9490196078431372, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.25098039215686274, + g: 0.47058823529411764, + b: 0.9490196078431372, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.25098039215686274, + g: 0.47058823529411764, + b: 0.9490196078431372, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.2196078431372549, + g: 0.22745098039215686, + b: 0.25882352941176473, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.2196078431372549, + g: 0.22745098039215686, + b: 0.25882352941176473, + }, + }, +} +export default atomOneLight diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/brownPaper.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/brownPaper.ts new file mode 100644 index 00000000..7fd18b78 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/brownPaper.ts @@ -0,0 +1,101 @@ +const brownPaper = { + hljs: { + type: 'SOLID', + color: { + r: 0.21176470588235294, + g: 0.23529411764705882, + b: 0.4117647058823529, + }, + }, + 'hljs-keyword': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-literal': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.21176470588235294, + g: 0.23529411764705882, + b: 0.4117647058823529, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { r: 0.17254901960784313, g: 0, b: 0.6235294117647059 }, + }, + 'hljs-title': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-section': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-type': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-attribute': { + type: 'SOLID', + color: { r: 0.17254901960784313, g: 0, b: 0.6235294117647059 }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { r: 0.17254901960784313, g: 0, b: 0.6235294117647059 }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { r: 0.17254901960784313, g: 0, b: 0.6235294117647059 }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { r: 0.17254901960784313, g: 0, b: 0.6235294117647059 }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { r: 0.17254901960784313, g: 0, b: 0.6235294117647059 }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { r: 0.17254901960784313, g: 0, b: 0.6235294117647059 }, + }, + 'hljs-template-tag': { + type: 'SOLID', + color: { r: 0.17254901960784313, g: 0, b: 0.6235294117647059 }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { r: 0.17254901960784313, g: 0, b: 0.6235294117647059 }, + }, + 'hljs-link': { + type: 'SOLID', + color: { r: 0.17254901960784313, g: 0, b: 0.6235294117647059 }, + }, + 'hljs-name': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.5019607843137255, + g: 0.12549019607843137, + b: 0.13333333333333333, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.5019607843137255, + g: 0.12549019607843137, + b: 0.13333333333333333, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.5019607843137255, + g: 0.12549019607843137, + b: 0.13333333333333333, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.5019607843137255, + g: 0.12549019607843137, + b: 0.13333333333333333, + }, + }, + 'hljs-doctag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default brownPaper diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/codepenEmbed.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/codepenEmbed.ts new file mode 100644 index 00000000..f05af41a --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/codepenEmbed.ts @@ -0,0 +1,208 @@ +const codepenEmbed = { + hljs: { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-comment': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-quote': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.6705882352941176, + g: 0.5294117647058824, + b: 0.36470588235294116, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.6705882352941176, + g: 0.5294117647058824, + b: 0.36470588235294116, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.6705882352941176, + g: 0.5294117647058824, + b: 0.36470588235294116, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.6705882352941176, + g: 0.5294117647058824, + b: 0.36470588235294116, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.6705882352941176, + g: 0.5294117647058824, + b: 0.36470588235294116, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.6705882352941176, + g: 0.5294117647058824, + b: 0.36470588235294116, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.6705882352941176, + g: 0.5294117647058824, + b: 0.36470588235294116, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.6705882352941176, + g: 0.5294117647058824, + b: 0.36470588235294116, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.6705882352941176, + g: 0.5294117647058824, + b: 0.36470588235294116, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.6705882352941176, + g: 0.5294117647058824, + b: 0.36470588235294116, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.6705882352941176, + g: 0.5294117647058824, + b: 0.36470588235294116, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.6705882352941176, + g: 0.5294117647058824, + b: 0.36470588235294116, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.6705882352941176, + g: 0.5294117647058824, + b: 0.36470588235294116, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.6705882352941176, + g: 0.5294117647058824, + b: 0.36470588235294116, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.6078431372549019, + g: 0.5254901960784314, + b: 0.6078431372549019, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.6078431372549019, + g: 0.5254901960784314, + b: 0.6078431372549019, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.6078431372549019, + g: 0.5254901960784314, + b: 0.6078431372549019, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.6078431372549019, + g: 0.5254901960784314, + b: 0.6078431372549019, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.6078431372549019, + g: 0.5254901960784314, + b: 0.6078431372549019, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.6078431372549019, + g: 0.5254901960784314, + b: 0.6078431372549019, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.6078431372549019, + g: 0.5254901960784314, + b: 0.6078431372549019, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.611764705882353, + b: 0.4235294117647059, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.611764705882353, + b: 0.4235294117647059, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.611764705882353, + b: 0.4235294117647059, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.611764705882353, + b: 0.4235294117647059, + }, + }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default codepenEmbed diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/colorBrewer.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/colorBrewer.ts new file mode 100644 index 00000000..5741bfc2 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/colorBrewer.ts @@ -0,0 +1,216 @@ +const colorBrewer = { + hljs: { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-subst': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.4588235294117647, + g: 0.4196078431372549, + b: 0.6941176470588235, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.4588235294117647, + g: 0.4196078431372549, + b: 0.6941176470588235, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.4588235294117647, + g: 0.4196078431372549, + b: 0.6941176470588235, + }, + }, + 'hljs-template-tag': { + type: 'SOLID', + color: { + r: 0.4588235294117647, + g: 0.4196078431372549, + b: 0.6941176470588235, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.4588235294117647, + g: 0.4196078431372549, + b: 0.6941176470588235, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.4588235294117647, + g: 0.4196078431372549, + b: 0.6941176470588235, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.38823529411764707, + g: 0.38823529411764707, + b: 0.38823529411764707, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.38823529411764707, + g: 0.38823529411764707, + b: 0.38823529411764707, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.19215686274509805, + g: 0.6392156862745098, + b: 0.32941176470588235, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.19215686274509805, + g: 0.6392156862745098, + b: 0.32941176470588235, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.19215686274509805, + g: 0.6392156862745098, + b: 0.32941176470588235, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.19215686274509805, + g: 0.6392156862745098, + b: 0.32941176470588235, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.19215686274509805, + g: 0.6392156862745098, + b: 0.32941176470588235, + }, + }, + 'hljs-deletion': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-variable': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.19215686274509805, + g: 0.5098039215686274, + b: 0.7411764705882353, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.19215686274509805, + g: 0.5098039215686274, + b: 0.7411764705882353, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.19215686274509805, + g: 0.5098039215686274, + b: 0.7411764705882353, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.19215686274509805, + g: 0.5098039215686274, + b: 0.7411764705882353, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.19215686274509805, + g: 0.5098039215686274, + b: 0.7411764705882353, + }, + }, + 'hljs-doctag': { + type: 'SOLID', + color: { + r: 0.19215686274509805, + g: 0.5098039215686274, + b: 0.7411764705882353, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.19215686274509805, + g: 0.5098039215686274, + b: 0.7411764705882353, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.19215686274509805, + g: 0.5098039215686274, + b: 0.7411764705882353, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.19215686274509805, + g: 0.5098039215686274, + b: 0.7411764705882353, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.19215686274509805, + g: 0.5098039215686274, + b: 0.7411764705882353, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.19215686274509805, + g: 0.5098039215686274, + b: 0.7411764705882353, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.19215686274509805, + g: 0.5098039215686274, + b: 0.7411764705882353, + }, + }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.3333333333333333, + b: 0.050980392156862744, + }, + }, +} +export default colorBrewer diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/darcula.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/darcula.ts new file mode 100644 index 00000000..e83775a7 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/darcula.ts @@ -0,0 +1,260 @@ +const darcula = { + hljs: { + type: 'SOLID', + color: { + r: 0.7294117647058823, + g: 0.7294117647058823, + b: 0.7294117647058823, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.6588235294117647, + g: 0.6588235294117647, + b: 0.6352941176470588, + }, + }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.40784313725490196, + g: 0.5882352941176471, + b: 0.7294117647058823, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.40784313725490196, + g: 0.5882352941176471, + b: 0.7294117647058823, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.40784313725490196, + g: 0.5882352941176471, + b: 0.7294117647058823, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.40784313725490196, + g: 0.5882352941176471, + b: 0.7294117647058823, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.40784313725490196, + g: 0.5882352941176471, + b: 0.7294117647058823, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.40784313725490196, + g: 0.5882352941176471, + b: 0.7294117647058823, + }, + }, + 'hljs-code': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.8862745098039215, + b: 0.1803921568627451, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.8862745098039215, + b: 0.1803921568627451, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.47058823529411764, + b: 0.19607843137254902, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.47058823529411764, + b: 0.19607843137254902, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.47058823529411764, + b: 0.19607843137254902, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.47058823529411764, + b: 0.19607843137254902, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.47058823529411764, + b: 0.19607843137254902, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.47058823529411764, + b: 0.19607843137254902, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.7254901960784313, + g: 0.7254901960784313, + b: 0.7254901960784313, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.41568627450980394, + g: 0.5294117647058824, + b: 0.34901960784313724, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.8784313725490196, + g: 0.7686274509803922, + b: 0.4235294117647059, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.8784313725490196, + g: 0.7686274509803922, + b: 0.4235294117647059, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.8784313725490196, + g: 0.7686274509803922, + b: 0.4235294117647059, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.8784313725490196, + g: 0.7686274509803922, + b: 0.4235294117647059, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.8784313725490196, + g: 0.7686274509803922, + b: 0.4235294117647059, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.8784313725490196, + g: 0.7686274509803922, + b: 0.4235294117647059, + }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { + r: 0.8784313725490196, + g: 0.7686274509803922, + b: 0.4235294117647059, + }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { + r: 0.8784313725490196, + g: 0.7686274509803922, + b: 0.4235294117647059, + }, + }, + 'hljs-template-tag': { + type: 'SOLID', + color: { + r: 0.8784313725490196, + g: 0.7686274509803922, + b: 0.4235294117647059, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.8784313725490196, + g: 0.7686274509803922, + b: 0.4235294117647059, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.8784313725490196, + g: 0.7686274509803922, + b: 0.4235294117647059, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.4980392156862745, + g: 0.4980392156862745, + b: 0.4980392156862745, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.4980392156862745, + g: 0.4980392156862745, + b: 0.4980392156862745, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.4980392156862745, + g: 0.4980392156862745, + b: 0.4980392156862745, + }, + }, +} +export default darcula diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/dark.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/dark.ts new file mode 100644 index 00000000..b4aaef56 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/dark.ts @@ -0,0 +1,29 @@ +const dark = { + hljs: { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-keyword': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-literal': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-section': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-link': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-subst': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-string': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-title': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-name': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-type': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-attribute': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-symbol': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-bullet': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-built_in': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-addition': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-variable': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-template-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-template-variable': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-comment': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-quote': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-deletion': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-meta': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-doctag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default dark diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/defaultColor.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/defaultColor.ts new file mode 100644 index 00000000..f828bb42 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/defaultColor.ts @@ -0,0 +1,140 @@ +const defaultColor = { + hljs: { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-subst': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.5333333333333333, + g: 0.5333333333333333, + b: 0.5333333333333333, + }, + }, + 'hljs-keyword': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-attribute': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-meta-keyword': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-doctag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-name': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-type': { type: 'SOLID', color: { r: 0.5333333333333333, g: 0, b: 0 } }, + 'hljs-string': { + type: 'SOLID', + color: { r: 0.5333333333333333, g: 0, b: 0 }, + }, + 'hljs-number': { + type: 'SOLID', + color: { r: 0.5333333333333333, g: 0, b: 0 }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { r: 0.5333333333333333, g: 0, b: 0 }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { r: 0.5333333333333333, g: 0, b: 0 }, + }, + 'hljs-quote': { type: 'SOLID', color: { r: 0.5333333333333333, g: 0, b: 0 } }, + 'hljs-template-tag': { + type: 'SOLID', + color: { r: 0.5333333333333333, g: 0, b: 0 }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { r: 0.5333333333333333, g: 0, b: 0 }, + }, + 'hljs-title': { type: 'SOLID', color: { r: 0.5333333333333333, g: 0, b: 0 } }, + 'hljs-section': { + type: 'SOLID', + color: { r: 0.5333333333333333, g: 0, b: 0 }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.7372549019607844, + g: 0.3764705882352941, + b: 0.3764705882352941, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.7372549019607844, + g: 0.3764705882352941, + b: 0.3764705882352941, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.7372549019607844, + g: 0.3764705882352941, + b: 0.3764705882352941, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.7372549019607844, + g: 0.3764705882352941, + b: 0.3764705882352941, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.7372549019607844, + g: 0.3764705882352941, + b: 0.3764705882352941, + }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { + r: 0.7372549019607844, + g: 0.3764705882352941, + b: 0.3764705882352941, + }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { + r: 0.7372549019607844, + g: 0.3764705882352941, + b: 0.3764705882352941, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.47058823529411764, + g: 0.6627450980392157, + b: 0.3764705882352941, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { r: 0.2235294117647059, g: 0.45098039215686275, b: 0 }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { r: 0.2235294117647059, g: 0.45098039215686275, b: 0 }, + }, + 'hljs-code': { + type: 'SOLID', + color: { r: 0.2235294117647059, g: 0.45098039215686275, b: 0 }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { r: 0.2235294117647059, g: 0.45098039215686275, b: 0 }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { r: 0.12156862745098039, g: 0.44313725490196076, b: 0.6 }, + }, + 'hljs-meta-string': { + type: 'SOLID', + color: { r: 0.30196078431372547, g: 0.6, b: 0.7490196078431373 }, + }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default defaultColor diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/docco.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/docco.ts new file mode 100644 index 00000000..b3b5f514 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/docco.ts @@ -0,0 +1,147 @@ +const docco = { + hljs: { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.25098039215686274, + g: 0.5019607843137255, + b: 0.5019607843137255, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.25098039215686274, + g: 0.5019607843137255, + b: 0.5019607843137255, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.5843137254901961, + g: 0.2549019607843137, + b: 0.12941176470588237, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.5843137254901961, + g: 0.2549019607843137, + b: 0.12941176470588237, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.5843137254901961, + g: 0.2549019607843137, + b: 0.12941176470588237, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.5843137254901961, + g: 0.2549019607843137, + b: 0.12941176470588237, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.25098039215686274, + g: 0.6274509803921569, + b: 0.4392156862745098, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.12941176470588237, + g: 0.5686274509803921, + b: 0.3803921568627451, + }, + }, + 'hljs-doctag': { + type: 'SOLID', + color: { + r: 0.12941176470588237, + g: 0.5686274509803921, + b: 0.3803921568627451, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.09803921568627451, + g: 0.27450980392156865, + b: 0.615686274509804, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.09803921568627451, + g: 0.27450980392156865, + b: 0.615686274509804, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.09803921568627451, + g: 0.27450980392156865, + b: 0.615686274509804, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.09803921568627451, + g: 0.27450980392156865, + b: 0.615686274509804, + }, + }, + 'hljs-params': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-title': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-tag': { type: 'SOLID', color: { r: 0, g: 0, b: 0.5019607843137255 } }, + 'hljs-name': { type: 'SOLID', color: { r: 0, g: 0, b: 0.5019607843137255 } }, + 'hljs-attribute': { + type: 'SOLID', + color: { r: 0, g: 0, b: 0.5019607843137255 }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { r: 0, g: 0.5019607843137255, b: 0.5019607843137255 }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { r: 0, g: 0.5019607843137255, b: 0.5019607843137255 }, + }, + 'hljs-regexp': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-link': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-symbol': { + type: 'SOLID', + color: { r: 0.6, g: 0, b: 0.45098039215686275 }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { r: 0.6, g: 0, b: 0.45098039215686275 }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { r: 0, g: 0.5254901960784314, b: 0.7019607843137254 }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { r: 0, g: 0.5254901960784314, b: 0.7019607843137254 }, + }, + 'hljs-meta': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-deletion': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-addition': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default docco diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/dracula.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/dracula.ts new file mode 100644 index 00000000..d1c93469 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/dracula.ts @@ -0,0 +1,137 @@ +const dracula = { + hljs: { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-keyword': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-literal': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-section': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.5450980392156862, + g: 0.9137254901960784, + b: 0.9921568627450981, + }, + }, + 'hljs-functionhljs-keyword': { + type: 'SOLID', + color: { r: 1, g: 0.4745098039215686, b: 0.7764705882352941 }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.9450980392156862, + g: 0.9803921568627451, + b: 0.5490196078431373, + }, + }, + 'hljs-title': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-name': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-type': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.9450980392156862, + g: 0.9803921568627451, + b: 0.5490196078431373, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.9450980392156862, + g: 0.9803921568627451, + b: 0.5490196078431373, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.9450980392156862, + g: 0.9803921568627451, + b: 0.5490196078431373, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.9450980392156862, + g: 0.9803921568627451, + b: 0.5490196078431373, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.9450980392156862, + g: 0.9803921568627451, + b: 0.5490196078431373, + }, + }, + 'hljs-template-tag': { + type: 'SOLID', + color: { + r: 0.9450980392156862, + g: 0.9803921568627451, + b: 0.5490196078431373, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.9450980392156862, + g: 0.9803921568627451, + b: 0.5490196078431373, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.3843137254901961, + g: 0.4470588235294118, + b: 0.6431372549019608, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.3843137254901961, + g: 0.4470588235294118, + b: 0.6431372549019608, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.3843137254901961, + g: 0.4470588235294118, + b: 0.6431372549019608, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.3843137254901961, + g: 0.4470588235294118, + b: 0.6431372549019608, + }, + }, + 'hljs-doctag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default dracula diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/far.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/far.ts new file mode 100644 index 00000000..5a33d018 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/far.ts @@ -0,0 +1,37 @@ +const far = { + hljs: { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-subst': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-string': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-attribute': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-symbol': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-bullet': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-built_in': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-builtin-name': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-template-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-template-variable': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-addition': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-keyword': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-section': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-type': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-name': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-id': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-class': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-variable': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-comment': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-quote': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-doctag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-deletion': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-number': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-regexp': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-literal': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-link': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-meta': { + type: 'SOLID', + color: { r: 0, g: 0.5019607843137255, b: 0.5019607843137255 }, + }, + 'hljs-title': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default far diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/foundation.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/foundation.ts new file mode 100644 index 00000000..48fab5db --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/foundation.ts @@ -0,0 +1,53 @@ +const foundation = { + hljs: { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-link': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-attribute': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-addition': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-string': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-deletion': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-quote': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-comment': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-section': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-title': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-classhljs-title': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-type': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-variable': { type: 'SOLID', color: { r: 0.2, g: 0.4, b: 0.6 } }, + 'hljs-template-variable': { + type: 'SOLID', + color: { r: 0.2, g: 0.4, b: 0.6 }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { r: 0.6, g: 0.4666666666666667, b: 0 }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { r: 0.2, g: 0.26666666666666666, b: 0.7333333333333333 }, + }, + 'hljs-code': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-number': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-literal': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-keyword': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-regexp': { + type: 'SOLID', + color: { r: 1, g: 0.9411764705882353, b: 1 }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { r: 0.6, g: 0, b: 0.45098039215686275 }, + }, + 'hljs-tag': { type: 'SOLID', color: { r: 0, g: 0.4666666666666667, b: 0 } }, + 'hljs-name': { type: 'SOLID', color: { r: 0, g: 0.4666666666666667, b: 0 } }, + 'hljs-selector-id': { + type: 'SOLID', + color: { r: 0, g: 0.4666666666666667, b: 0 }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { r: 0, g: 0.4666666666666667, b: 0 }, + }, +} +export default foundation diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/github.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/github.ts new file mode 100644 index 00000000..30467a3d --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/github.ts @@ -0,0 +1,71 @@ +const github = { + hljs: { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-comment': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-quote': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-keyword': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-subst': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-number': { + type: 'SOLID', + color: { r: 0, g: 0.5019607843137255, b: 0.5019607843137255 }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { r: 0, g: 0.5019607843137255, b: 0.5019607843137255 }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { r: 0, g: 0.5019607843137255, b: 0.5019607843137255 }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { r: 0, g: 0.5019607843137255, b: 0.5019607843137255 }, + }, + 'hljs-taghljs-attr': { + type: 'SOLID', + color: { r: 0, g: 0.5019607843137255, b: 0.5019607843137255 }, + }, + 'hljs-string': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-doctag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-title': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-section': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-id': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-type': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-classhljs-title': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-tag': { type: 'SOLID', color: { r: 0, g: 0, b: 0.5019607843137255 } }, + 'hljs-name': { type: 'SOLID', color: { r: 0, g: 0, b: 0.5019607843137255 } }, + 'hljs-attribute': { + type: 'SOLID', + color: { r: 0, g: 0, b: 0.5019607843137255 }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { r: 0, g: 0.6, b: 0.14901960784313725 }, + }, + 'hljs-link': { + type: 'SOLID', + color: { r: 0, g: 0.6, b: 0.14901960784313725 }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { r: 0.6, g: 0, b: 0.45098039215686275 }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { r: 0.6, g: 0, b: 0.45098039215686275 }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { r: 0, g: 0.5254901960784314, b: 0.7019607843137254 }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { r: 0, g: 0.5254901960784314, b: 0.7019607843137254 }, + }, + 'hljs-meta': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-deletion': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-addition': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default github diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/githubGist.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/githubGist.ts new file mode 100644 index 00000000..5b1711d1 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/githubGist.ts @@ -0,0 +1,170 @@ +const githubGist = { + hljs: { type: 'SOLID', color: { r: 0.2, g: 0.2, b: 0.2 } }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.5882352941176471, + g: 0.596078431372549, + b: 0.5882352941176471, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.5882352941176471, + g: 0.596078431372549, + b: 0.5882352941176471, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { r: 0.8745098039215686, g: 0.3137254901960784, b: 0 }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { r: 0.8745098039215686, g: 0.3137254901960784, b: 0 }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { r: 0.8745098039215686, g: 0.3137254901960784, b: 0 }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { r: 0.8745098039215686, g: 0.3137254901960784, b: 0 }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { r: 0.8745098039215686, g: 0.3137254901960784, b: 0 }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.22745098039215686, + b: 0.28627450980392155, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.22745098039215686, + b: 0.28627450980392155, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.22745098039215686, + b: 0.28627450980392155, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { r: 0, g: 0.5254901960784314, b: 0.7019607843137254 }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { r: 0, g: 0.5254901960784314, b: 0.7019607843137254 }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { r: 0, g: 0.5254901960784314, b: 0.7019607843137254 }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { r: 0, g: 0.5254901960784314, b: 0.7019607843137254 }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.38823529411764707, + g: 0.6392156862745098, + b: 0.3607843137254902, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.38823529411764707, + g: 0.6392156862745098, + b: 0.3607843137254902, + }, + }, + 'hljs-tag': { type: 'SOLID', color: { r: 0.2, g: 0.2, b: 0.2 } }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.43529411764705883, + g: 0.25882352941176473, + b: 0.7568627450980392, + }, + }, + 'hljs-attr': { + type: 'SOLID', + color: { + r: 0.43529411764705883, + g: 0.25882352941176473, + b: 0.7568627450980392, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.43529411764705883, + g: 0.25882352941176473, + b: 0.7568627450980392, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.43529411764705883, + g: 0.25882352941176473, + b: 0.7568627450980392, + }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { + r: 0.43529411764705883, + g: 0.25882352941176473, + b: 0.7568627450980392, + }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { + r: 0.43529411764705883, + g: 0.25882352941176473, + b: 0.7568627450980392, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.3333333333333333, + g: 0.6470588235294118, + b: 0.19607843137254902, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { r: 0.7411764705882353, g: 0.17254901960784313, b: 0 }, + }, + 'hljs-link': { type: 'SOLID', color: { r: 0.2, g: 0.2, b: 0.2 } }, + 'hljs-number': { + type: 'SOLID', + color: { r: 0, g: 0.3607843137254902, b: 0.7725490196078432 }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.011764705882352941, + g: 0.1843137254901961, + b: 0.3843137254901961, + }, + }, +} +export default githubGist diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/gml.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/gml.ts new file mode 100644 index 00000000..fb43c007 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/gml.ts @@ -0,0 +1,256 @@ +const gml = { + hljs: { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-keywords': { + type: 'SOLID', + color: { r: 1, g: 0.7215686274509804, b: 0.44313725490196076 }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { r: 1, g: 0.7215686274509804, b: 0.44313725490196076 }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { r: 1, g: 0.5019607843137255, b: 0.5019607843137255 }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.34509803921568627, + g: 0.8980392156862745, + b: 0.35294117647058826, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { r: 0.3568627450980392, g: 0.6, b: 0.3568627450980392 }, + }, + 'hljs-string': { type: 'SOLID', color: { r: 1, g: 1, b: 0 } }, + 'hljs-number': { + type: 'SOLID', + color: { r: 1, g: 0.5019607843137255, b: 0.5019607843137255 }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-doctag': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-code': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-template-tag': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-function': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-meta-keyword': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7529411764705882, + b: 0.7529411764705882, + }, + }, +} +export default gml diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/googlecode.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/googlecode.ts new file mode 100644 index 00000000..35ea186c --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/googlecode.ts @@ -0,0 +1,62 @@ +const googlecode = { + hljs: { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-comment': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-quote': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-keyword': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-section': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-title': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-name': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-variable': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-template-variable': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-string': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-attr': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-pseudo': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-regexp': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-literal': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-symbol': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-bullet': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-meta': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-number': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-link': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-doctag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-type': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-attr': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-built_in': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-builtin-name': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-params': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-attribute': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-subst': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-formula': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.6078431372549019, + g: 0.4392156862745098, + b: 0.24705882352941178, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.6078431372549019, + g: 0.4392156862745098, + b: 0.24705882352941178, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.7294117647058823, + g: 0.9333333333333333, + b: 0.7294117647058823, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { r: 1, g: 0.7843137254901961, b: 0.7411764705882353 }, + }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default googlecode diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/gorilla.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/gorilla.ts new file mode 100644 index 00000000..62aaf793 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/gorilla.ts @@ -0,0 +1,127 @@ +const gorilla = { + hljs: { + type: 'SOLID', + color: { r: 0.8941176471, g: 0.7176470588, b: 0.5058823529 }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { r: 0.3568627451, g: 0.5215686275, b: 0.5450980392 }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { r: 0.3568627451, g: 0.5215686275, b: 0.5450980392 }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { r: 0.8941176471, g: 0.7176470588, b: 0.5058823529 }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { r: 0.0862745098, g: 0.7137254902, b: 0.4509803922 }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { r: 0.2862745098, g: 0.6745098039, b: 0.9137254902 }, + }, + 'hljs-name': { + type: 'SOLID', + color: { r: 0.8941176471, g: 0.7176470588, b: 0.5058823529 }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { r: 0.6980392157, g: 0.7921568627, b: 0.8039215686 }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { r: 0.6980392157, g: 0.7921568627, b: 0.8039215686 }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { r: 0.2862745098, g: 0.9137254902, b: 0.6509803922 }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { r: 0.6980392157, g: 0.7921568627, b: 0.8039215686 }, + }, + 'hljs-function': { + type: 'SOLID', + color: { r: 0.0862745098, g: 0.6392156863, b: 0.7137254902 }, + }, + 'hljs-number': { + type: 'SOLID', + color: { r: 0.4392156863, g: 0.3764705882, b: 0.9215686275 }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { r: 0.8392156863, g: 0.4941176471, b: 0.3607843137 }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { r: 0.9019607843, g: 0.3960784314, b: 0.2 }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { r: 0.4392156863, g: 0.3764705882, b: 0.9215686275 }, + }, + 'hljs-type': { + type: 'SOLID', + color: { r: 0.8392156863, g: 0.4941176471, b: 0.3607843137 }, + }, + 'hljs-params': { + type: 'SOLID', + color: { r: 0.8941176471, g: 0.7176470588, b: 0.5058823529 }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { r: 0.6980392157, g: 0.7921568627, b: 0.8039215686 }, + }, + 'hljs-link': { + type: 'SOLID', + color: { r: 0.2862745098, g: 0.6745098039, b: 0.9137254902 }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { r: 0.8352941176, g: 0.5921568627, b: 0.1019607843 }, + }, + 'hljs-string': { + type: 'SOLID', + color: { r: 0.2862745098, g: 0.9137254902, b: 0.6509803922 }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { r: 0.2862745098, g: 0.6745098039, b: 0.9137254902 }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { r: 0.6980392157, g: 0.7921568627, b: 0.8039215686 }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { r: 0.6980392157, g: 0.7921568627, b: 0.8039215686 }, + }, + 'hljs-title': { + type: 'SOLID', + color: { r: 0.0862745098, g: 0.6392156863, b: 0.7137254902 }, + }, + 'hljs-section': { + type: 'SOLID', + color: { r: 0.6980392157, g: 0.7921568627, b: 0.8039215686 }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { r: 0.9019607843, g: 0.3960784314, b: 0.2 }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { r: 0.6980392157, g: 0.7921568627, b: 0.8039215686 }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { r: 0.6980392157, g: 0.7921568627, b: 0.8039215686 }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { r: 0.6980392157, g: 0.7921568627, b: 0.8039215686 }, + }, +} +export default gorilla diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/gorillaColorSchema.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/gorillaColorSchema.ts new file mode 100644 index 00000000..c659d968 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/gorillaColorSchema.ts @@ -0,0 +1,44 @@ +const gorillaColorSchema = { + 'hljs-function': { + type: 'SOLID', + color: { r: 0.0859375, g: 0.63671875, b: 0.7109375 }, + }, + 'hljs-params': { + type: 'SOLID', + color: { r: 0.890625, g: 0.71484375, b: 0.50390625 }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { r: 0.8984375, g: 0.39453125, b: 0.19921875 }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { r: 0.8359375, g: 0.4921875, b: 0.359375 }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { r: 0.4375, g: 0.375, b: 0.91796875 }, + }, + 'hljs-number': { + type: 'SOLID', + color: { r: 0.4375, g: 0.375, b: 0.91796875 }, + }, + 'hljs-string': { + type: 'SOLID', + color: { r: 0.28515625, g: 0.91015625, b: 0.6484375 }, + }, + 'hljs-title': { + type: 'SOLID', + color: { r: 0.0862745098, g: 0.6352941176, b: 0.7137254902 }, + }, + default: { + type: 'SOLID', + color: { r: 0.890625, g: 0.71484375, b: 0.50390625 }, + }, + '': { + type: 'SOLID', + color: { r: 0.890625, g: 0.71484375, b: 0.50390625 }, + }, +} + +export default gorillaColorSchema diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/grayscale.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/grayscale.ts new file mode 100644 index 00000000..77c0c20f --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/grayscale.ts @@ -0,0 +1,36 @@ +const grayscale = { + hljs: { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-comment': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-quote': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-keyword': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-subst': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-number': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-literal': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-string': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-doctag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-formula': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'background:url(data:image/png;base64': { + type: 'SOLID', + color: { r: 1, g: 1, b: 1 }, + }, + 'hljs-title': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-section': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-id': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-classhljs-title': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-type': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-name': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-regexp': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-symbol': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-bullet': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-link': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-built_in': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-builtin-name': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-meta': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-deletion': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-addition': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default grayscale diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/gruvboxDark.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/gruvboxDark.ts new file mode 100644 index 00000000..3011f60f --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/gruvboxDark.ts @@ -0,0 +1,320 @@ +const gruvboxDark = { + hljs: { + type: 'SOLID', + color: { + r: 0.9215686274509803, + g: 0.8588235294117647, + b: 0.6980392156862745, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.9215686274509803, + g: 0.8588235294117647, + b: 0.6980392156862745, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.984313725490196, + g: 0.28627450980392155, + b: 0.20392156862745098, + }, + }, + 'hljs-formula': { + type: 'SOLID', + color: { + r: 0.984313725490196, + g: 0.28627450980392155, + b: 0.20392156862745098, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.984313725490196, + g: 0.28627450980392155, + b: 0.20392156862745098, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.984313725490196, + g: 0.28627450980392155, + b: 0.20392156862745098, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.984313725490196, + g: 0.28627450980392155, + b: 0.20392156862745098, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.5137254901960784, + g: 0.6470588235294118, + b: 0.596078431372549, + }, + }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.5137254901960784, + g: 0.6470588235294118, + b: 0.596078431372549, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.5137254901960784, + g: 0.6470588235294118, + b: 0.596078431372549, + }, + }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.5137254901960784, + g: 0.6470588235294118, + b: 0.596078431372549, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.5137254901960784, + g: 0.6470588235294118, + b: 0.596078431372549, + }, + }, + 'hljs-attr': { + type: 'SOLID', + color: { + r: 0.9803921568627451, + g: 0.7411764705882353, + b: 0.1843137254901961, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.9803921568627451, + g: 0.7411764705882353, + b: 0.1843137254901961, + }, + }, + 'hljs-template-tag': { + type: 'SOLID', + color: { + r: 0.9803921568627451, + g: 0.7411764705882353, + b: 0.1843137254901961, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.9803921568627451, + g: 0.7411764705882353, + b: 0.1843137254901961, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.24705882352941178, + b: 0.44313725490196076, + }, + }, + 'hljs-doctag': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.24705882352941178, + b: 0.44313725490196076, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.8274509803921568, + g: 0.5254901960784314, + b: 0.6078431372549019, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.8274509803921568, + g: 0.5254901960784314, + b: 0.6078431372549019, + }, + }, + 'hljs-code': { + type: 'SOLID', + color: { + r: 0.996078431372549, + g: 0.5019607843137255, + b: 0.09803921568627451, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.996078431372549, + g: 0.5019607843137255, + b: 0.09803921568627451, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.996078431372549, + g: 0.5019607843137255, + b: 0.09803921568627451, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.996078431372549, + g: 0.5019607843137255, + b: 0.09803921568627451, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.996078431372549, + g: 0.5019607843137255, + b: 0.09803921568627451, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.7215686274509804, + g: 0.7333333333333333, + b: 0.14901960784313725, + }, + }, + 'hljs-meta-string': { + type: 'SOLID', + color: { + r: 0.7215686274509804, + g: 0.7333333333333333, + b: 0.14901960784313725, + }, + }, + 'hljs-section': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { + r: 0.7215686274509804, + g: 0.7333333333333333, + b: 0.14901960784313725, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.7215686274509804, + g: 0.7333333333333333, + b: 0.14901960784313725, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.7215686274509804, + g: 0.7333333333333333, + b: 0.14901960784313725, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.7215686274509804, + g: 0.7333333333333333, + b: 0.14901960784313725, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.5568627450980392, + g: 0.7529411764705882, + b: 0.48627450980392156, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.5568627450980392, + g: 0.7529411764705882, + b: 0.48627450980392156, + }, + }, + 'hljs-class': { + type: 'SOLID', + color: { + r: 0.5568627450980392, + g: 0.7529411764705882, + b: 0.48627450980392156, + }, + }, + 'hljs-function': { + type: 'SOLID', + color: { + r: 0.5568627450980392, + g: 0.7529411764705882, + b: 0.48627450980392156, + }, + }, + 'hljs-functionhljs-keyword': { + type: 'SOLID', + color: { + r: 0.5568627450980392, + g: 0.7529411764705882, + b: 0.48627450980392156, + }, + }, + 'hljs-meta-keyword': { + type: 'SOLID', + color: { + r: 0.5568627450980392, + g: 0.7529411764705882, + b: 0.48627450980392156, + }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { + r: 0.5568627450980392, + g: 0.7529411764705882, + b: 0.48627450980392156, + }, + }, + 'hljs-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-comment': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-link_label': { + type: 'SOLID', + color: { + r: 0.8274509803921568, + g: 0.5254901960784314, + b: 0.6078431372549019, + }, + }, +} +export default gruvboxDark diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/gruvboxLight.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/gruvboxLight.ts new file mode 100644 index 00000000..4ba41a49 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/gruvboxLight.ts @@ -0,0 +1,280 @@ +const gruvboxLight = { + hljs: { + type: 'SOLID', + color: { + r: 0.23529411764705882, + g: 0.2196078431372549, + b: 0.21176470588235294, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.23529411764705882, + g: 0.2196078431372549, + b: 0.21176470588235294, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { r: 0.615686274509804, g: 0, b: 0.023529411764705882 }, + }, + 'hljs-formula': { + type: 'SOLID', + color: { r: 0.615686274509804, g: 0, b: 0.023529411764705882 }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { r: 0.615686274509804, g: 0, b: 0.023529411764705882 }, + }, + 'hljs-link': { + type: 'SOLID', + color: { r: 0.615686274509804, g: 0, b: 0.023529411764705882 }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { r: 0.615686274509804, g: 0, b: 0.023529411764705882 }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { r: 0.027450980392156862, g: 0.4, b: 0.47058823529411764 }, + }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-name': { + type: 'SOLID', + color: { r: 0.027450980392156862, g: 0.4, b: 0.47058823529411764 }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { r: 0.027450980392156862, g: 0.4, b: 0.47058823529411764 }, + }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-title': { + type: 'SOLID', + color: { r: 0.027450980392156862, g: 0.4, b: 0.47058823529411764 }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { r: 0.027450980392156862, g: 0.4, b: 0.47058823529411764 }, + }, + 'hljs-attr': { + type: 'SOLID', + color: { + r: 0.7098039215686275, + g: 0.4627450980392157, + b: 0.0784313725490196, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.7098039215686275, + g: 0.4627450980392157, + b: 0.0784313725490196, + }, + }, + 'hljs-template-tag': { + type: 'SOLID', + color: { + r: 0.7098039215686275, + g: 0.4627450980392157, + b: 0.0784313725490196, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.7098039215686275, + g: 0.4627450980392157, + b: 0.0784313725490196, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.24705882352941178, + b: 0.44313725490196076, + }, + }, + 'hljs-doctag': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.24705882352941178, + b: 0.44313725490196076, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.24705882352941178, + b: 0.44313725490196076, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.24705882352941178, + b: 0.44313725490196076, + }, + }, + 'hljs-code': { + type: 'SOLID', + color: { + r: 0.6862745098039216, + g: 0.22745098039215686, + b: 0.011764705882352941, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.6862745098039216, + g: 0.22745098039215686, + b: 0.011764705882352941, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.6862745098039216, + g: 0.22745098039215686, + b: 0.011764705882352941, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.6862745098039216, + g: 0.22745098039215686, + b: 0.011764705882352941, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.6862745098039216, + g: 0.22745098039215686, + b: 0.011764705882352941, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.4745098039215686, + g: 0.4549019607843137, + b: 0.054901960784313725, + }, + }, + 'hljs-meta-string': { + type: 'SOLID', + color: { + r: 0.4745098039215686, + g: 0.4549019607843137, + b: 0.054901960784313725, + }, + }, + 'hljs-section': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { + r: 0.4745098039215686, + g: 0.4549019607843137, + b: 0.054901960784313725, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.4745098039215686, + g: 0.4549019607843137, + b: 0.054901960784313725, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.4745098039215686, + g: 0.4549019607843137, + b: 0.054901960784313725, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.4745098039215686, + g: 0.4549019607843137, + b: 0.054901960784313725, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.25882352941176473, + g: 0.4823529411764706, + b: 0.34509803921568627, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.25882352941176473, + g: 0.4823529411764706, + b: 0.34509803921568627, + }, + }, + 'hljs-class': { + type: 'SOLID', + color: { + r: 0.25882352941176473, + g: 0.4823529411764706, + b: 0.34509803921568627, + }, + }, + 'hljs-function': { + type: 'SOLID', + color: { + r: 0.25882352941176473, + g: 0.4823529411764706, + b: 0.34509803921568627, + }, + }, + 'hljs-functionhljs-keyword': { + type: 'SOLID', + color: { + r: 0.25882352941176473, + g: 0.4823529411764706, + b: 0.34509803921568627, + }, + }, + 'hljs-meta-keyword': { + type: 'SOLID', + color: { + r: 0.25882352941176473, + g: 0.4823529411764706, + b: 0.34509803921568627, + }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { + r: 0.25882352941176473, + g: 0.4823529411764706, + b: 0.34509803921568627, + }, + }, + 'hljs-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-comment': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-link_label': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.24705882352941178, + b: 0.44313725490196076, + }, + }, +} +export default gruvboxLight diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/hopscotch.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/hopscotch.ts new file mode 100644 index 00000000..6d19ae78 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/hopscotch.ts @@ -0,0 +1,255 @@ +const hopscotch = { + hljs: { + type: 'SOLID', + color: { + r: 0.7254901960784313, + g: 0.7098039215686275, + b: 0.7215686274509804, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.596078431372549, + g: 0.5803921568627451, + b: 0.596078431372549, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.596078431372549, + g: 0.5803921568627451, + b: 0.596078431372549, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.8666666666666667, + g: 0.27450980392156865, + b: 0.2980392156862745, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.8666666666666667, + g: 0.27450980392156865, + b: 0.2980392156862745, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.8666666666666667, + g: 0.27450980392156865, + b: 0.2980392156862745, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.8666666666666667, + g: 0.27450980392156865, + b: 0.2980392156862745, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.8666666666666667, + g: 0.27450980392156865, + b: 0.2980392156862745, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.8666666666666667, + g: 0.27450980392156865, + b: 0.2980392156862745, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.8666666666666667, + g: 0.27450980392156865, + b: 0.2980392156862745, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.8666666666666667, + g: 0.27450980392156865, + b: 0.2980392156862745, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.8666666666666667, + g: 0.27450980392156865, + b: 0.2980392156862745, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.8666666666666667, + g: 0.27450980392156865, + b: 0.2980392156862745, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.9921568627450981, + g: 0.5450980392156862, + b: 0.09803921568627451, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.9921568627450981, + g: 0.5450980392156862, + b: 0.09803921568627451, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.9921568627450981, + g: 0.5450980392156862, + b: 0.09803921568627451, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.9921568627450981, + g: 0.5450980392156862, + b: 0.09803921568627451, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.9921568627450981, + g: 0.5450980392156862, + b: 0.09803921568627451, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.9921568627450981, + g: 0.5450980392156862, + b: 0.09803921568627451, + }, + }, + 'hljs-classhljs-title': { + type: 'SOLID', + color: { r: 0.9921568627450981, g: 0.8, b: 0.34901960784313724 }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.7568627450980392, + b: 0.24313725490196078, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.7568627450980392, + b: 0.24313725490196078, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.7568627450980392, + b: 0.24313725490196078, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.7568627450980392, + b: 0.24313725490196078, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.0784313725490196, + g: 0.6078431372549019, + b: 0.5764705882352941, + }, + }, + 'hljs-function': { + type: 'SOLID', + color: { + r: 0.07058823529411765, + g: 0.5647058823529412, + b: 0.7490196078431373, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.07058823529411765, + g: 0.5647058823529412, + b: 0.7490196078431373, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.07058823529411765, + g: 0.5647058823529412, + b: 0.7490196078431373, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.7843137254901961, + g: 0.3686274509803922, + b: 0.48627450980392156, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.7843137254901961, + g: 0.3686274509803922, + b: 0.48627450980392156, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.7254901960784313, + g: 0.7098039215686275, + b: 0.7215686274509804, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.7254901960784313, + g: 0.7098039215686275, + b: 0.7215686274509804, + }, + }, +} +export default hopscotch diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/hybrid.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/hybrid.ts new file mode 100644 index 00000000..3fca04aa --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/hybrid.ts @@ -0,0 +1,246 @@ +const hybrid = { + hljs: { + type: 'SOLID', + color: { + r: 0.7725490196078432, + g: 0.7843137254901961, + b: 0.7764705882352941, + }, + }, + 'hljs::selection': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljsspan::selection': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs::-moz-selection': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljsspan::-moz-selection': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.7764705882352941, + b: 0.4549019607843137, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.7764705882352941, + b: 0.4549019607843137, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.4392156862745098, + g: 0.47058823529411764, + b: 0.5019607843137255, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.4392156862745098, + g: 0.47058823529411764, + b: 0.5019607843137255, + }, + }, + 'hljs-metahljs-keyword': { + type: 'SOLID', + color: { + r: 0.4392156862745098, + g: 0.47058823529411764, + b: 0.5019607843137255, + }, + }, + 'hljs-number': { type: 'SOLID', color: { r: 0.8, g: 0.4, b: 0.4 } }, + 'hljs-symbol': { type: 'SOLID', color: { r: 0.8, g: 0.4, b: 0.4 } }, + 'hljs-literal': { type: 'SOLID', color: { r: 0.8, g: 0.4, b: 0.4 } }, + 'hljs-deletion': { type: 'SOLID', color: { r: 0.8, g: 0.4, b: 0.4 } }, + 'hljs-link': { type: 'SOLID', color: { r: 0.8, g: 0.4, b: 0.4 } }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.7098039215686275, + g: 0.7411764705882353, + b: 0.40784313725490196, + }, + }, + 'hljs-doctag': { + type: 'SOLID', + color: { + r: 0.7098039215686275, + g: 0.7411764705882353, + b: 0.40784313725490196, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.7098039215686275, + g: 0.7411764705882353, + b: 0.40784313725490196, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.7098039215686275, + g: 0.7411764705882353, + b: 0.40784313725490196, + }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { + r: 0.7098039215686275, + g: 0.7411764705882353, + b: 0.40784313725490196, + }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { + r: 0.7098039215686275, + g: 0.7411764705882353, + b: 0.40784313725490196, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.6980392156862745, + g: 0.5803921568627451, + b: 0.7333333333333333, + }, + }, + 'hljs-code': { + type: 'SOLID', + color: { + r: 0.6980392156862745, + g: 0.5803921568627451, + b: 0.7333333333333333, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.6980392156862745, + g: 0.5803921568627451, + b: 0.7333333333333333, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.5058823529411764, + g: 0.6352941176470588, + b: 0.7450980392156863, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.5058823529411764, + g: 0.6352941176470588, + b: 0.7450980392156863, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.5058823529411764, + g: 0.6352941176470588, + b: 0.7450980392156863, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.5058823529411764, + g: 0.6352941176470588, + b: 0.7450980392156863, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.5411764705882353, + g: 0.7450980392156863, + b: 0.7176470588235294, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.5411764705882353, + g: 0.7450980392156863, + b: 0.7176470588235294, + }, + }, + 'hljs-template-tag': { + type: 'SOLID', + color: { + r: 0.5411764705882353, + g: 0.7450980392156863, + b: 0.7176470588235294, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.5411764705882353, + g: 0.7450980392156863, + b: 0.7176470588235294, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.8705882352941177, + g: 0.5764705882352941, + b: 0.37254901960784315, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.8705882352941177, + g: 0.5764705882352941, + b: 0.37254901960784315, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.8705882352941177, + g: 0.5764705882352941, + b: 0.37254901960784315, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.8705882352941177, + g: 0.5764705882352941, + b: 0.37254901960784315, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.8705882352941177, + g: 0.5764705882352941, + b: 0.37254901960784315, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.8705882352941177, + g: 0.5764705882352941, + b: 0.37254901960784315, + }, + }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default hybrid diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/idea.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/idea.ts new file mode 100644 index 00000000..16bbd916 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/idea.ts @@ -0,0 +1,77 @@ +const idea = { + hljs: { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-subst': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-title': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.5019607843137255, + g: 0.5019607843137255, + b: 0.5019607843137255, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.5019607843137255, + g: 0.5019607843137255, + b: 0.5019607843137255, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { r: 0.5019607843137255, g: 0.5019607843137255, b: 0 }, + }, + 'hljs-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-section': { + type: 'SOLID', + color: { r: 0, g: 0, b: 0.5019607843137255 }, + }, + 'hljs-name': { type: 'SOLID', color: { r: 0, g: 0, b: 0.5019607843137255 } }, + 'hljs-literal': { + type: 'SOLID', + color: { r: 0, g: 0, b: 0.5019607843137255 }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { r: 0, g: 0, b: 0.5019607843137255 }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { r: 0, g: 0, b: 0.5019607843137255 }, + }, + 'hljs-type': { type: 'SOLID', color: { r: 0, g: 0, b: 0.5019607843137255 } }, + 'hljs-selector-id': { + type: 'SOLID', + color: { r: 0, g: 0, b: 0.5019607843137255 }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { r: 0, g: 0, b: 0.5019607843137255 }, + }, + 'hljs-attribute': { type: 'SOLID', color: { r: 0, g: 0, b: 1 } }, + 'hljs-number': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-regexp': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-link': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-string': { + type: 'SOLID', + color: { r: 0, g: 0.5019607843137255, b: 0 }, + }, + 'hljs-symbol': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-bullet': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-formula': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-doctag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-variable': { + type: 'SOLID', + color: { r: 0.4, g: 0.054901960784313725, b: 0.47843137254901963 }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { r: 0.4, g: 0.054901960784313725, b: 0.47843137254901963 }, + }, + 'hljs-addition': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-deletion': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default idea diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/irBlack.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/irBlack.ts new file mode 100644 index 00000000..7fae07be --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/irBlack.ts @@ -0,0 +1,197 @@ +const irBlack = { + hljs: { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9725490196078431, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.48627450980392156, + g: 0.48627450980392156, + b: 0.48627450980392156, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.48627450980392156, + g: 0.48627450980392156, + b: 0.48627450980392156, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.48627450980392156, + g: 0.48627450980392156, + b: 0.48627450980392156, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.5882352941176471, + g: 0.796078431372549, + b: 0.996078431372549, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.5882352941176471, + g: 0.796078431372549, + b: 0.996078431372549, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.5882352941176471, + g: 0.796078431372549, + b: 0.996078431372549, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.5882352941176471, + g: 0.796078431372549, + b: 0.996078431372549, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { r: 1, g: 1, b: 0.7137254901960784 }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { r: 1, g: 1, b: 0.7137254901960784 }, + }, + 'hljs-string': { + type: 'SOLID', + color: { r: 0.6588235294117647, g: 1, b: 0.3764705882352941 }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { r: 0.6588235294117647, g: 1, b: 0.3764705882352941 }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { r: 0.6588235294117647, g: 1, b: 0.3764705882352941 }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { r: 0.6588235294117647, g: 1, b: 0.3764705882352941 }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.8549019607843137, + g: 0.9372549019607843, + b: 0.6392156862745098, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.9137254901960784, + g: 0.7529411764705882, + b: 0.3843137254901961, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.9137254901960784, + g: 0.7529411764705882, + b: 0.3843137254901961, + }, + }, + 'hljs-title': { type: 'SOLID', color: { r: 1, g: 1, b: 0.7137254901960784 } }, + 'hljs-section': { + type: 'SOLID', + color: { r: 1, g: 1, b: 0.7137254901960784 }, + }, + 'hljs-type': { type: 'SOLID', color: { r: 1, g: 1, b: 0.7137254901960784 } }, + 'hljs-doctag': { + type: 'SOLID', + color: { r: 1, g: 1, b: 0.7137254901960784 }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.7764705882352941, + g: 0.7725490196078432, + b: 0.996078431372549, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.7764705882352941, + g: 0.7725490196078432, + b: 0.996078431372549, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.7764705882352941, + g: 0.7725490196078432, + b: 0.996078431372549, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.7764705882352941, + g: 0.7725490196078432, + b: 0.996078431372549, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.7764705882352941, + g: 0.7725490196078432, + b: 0.996078431372549, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9725490196078431, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9725490196078431, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9725490196078431, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9725490196078431, + }, + }, +} +export default irBlack diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/isblEditorDark.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/isblEditorDark.ts new file mode 100644 index 00000000..7e1b5a6d --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/isblEditorDark.ts @@ -0,0 +1,279 @@ +const isblEditorDark = { + hljs: { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.9411764705882353, + b: 0.9411764705882353, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.9411764705882353, + b: 0.9411764705882353, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.7098039215686275, + g: 0.7098039215686275, + b: 0.7098039215686275, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.9411764705882353, + b: 0.9411764705882353, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.9411764705882353, + b: 0.9411764705882353, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.9411764705882353, + b: 0.9411764705882353, + }, + }, + 'hljs-meta-keyword': { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.9411764705882353, + b: 0.9411764705882353, + }, + }, + 'hljs-doctag': { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.9411764705882353, + b: 0.9411764705882353, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.9411764705882353, + b: 0.9411764705882353, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.592156862745098, + g: 0.7490196078431373, + b: 0.050980392156862744, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.9411764705882353, + b: 0.9411764705882353, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.9411764705882353, + b: 0.9411764705882353, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.9411764705882353, + b: 0.9411764705882353, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.9411764705882353, + b: 0.9411764705882353, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.9411764705882353, + b: 0.9411764705882353, + }, + }, + 'hljs-template-tag': { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.9411764705882353, + b: 0.9411764705882353, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.9411764705882353, + b: 0.9411764705882353, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.8745098039215686, + g: 0.2784313725490196, + b: 0.11764705882352941, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.8745098039215686, + g: 0.2784313725490196, + b: 0.11764705882352941, + }, + }, + 'hljs-title>hljs-built_in': { + type: 'SOLID', + color: { + r: 0.5058823529411764, + g: 0.7372549019607844, + b: 0.9137254901960784, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.8862745098039215, + g: 0.7764705882352941, + b: 0.5882352941176471, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.8862745098039215, + g: 0.7764705882352941, + b: 0.5882352941176471, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.8862745098039215, + g: 0.7764705882352941, + b: 0.5882352941176471, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.8862745098039215, + g: 0.7764705882352941, + b: 0.5882352941176471, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.8862745098039215, + g: 0.7764705882352941, + b: 0.5882352941176471, + }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { + r: 0.8862745098039215, + g: 0.7764705882352941, + b: 0.5882352941176471, + }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { + r: 0.8862745098039215, + g: 0.7764705882352941, + b: 0.5882352941176471, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.592156862745098, + g: 0.7490196078431373, + b: 0.050980392156862744, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.592156862745098, + g: 0.7490196078431373, + b: 0.050980392156862744, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { r: 0.2235294117647059, g: 0.45098039215686275, b: 0 }, + }, + 'hljs-code': { + type: 'SOLID', + color: { r: 0.2235294117647059, g: 0.45098039215686275, b: 0 }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { r: 0.2235294117647059, g: 0.45098039215686275, b: 0 }, + }, + 'hljs-class': { + type: 'SOLID', + color: { + r: 0.807843137254902, + g: 0.615686274509804, + b: 0.30196078431372547, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { r: 0.12156862745098039, g: 0.44313725490196076, b: 0.6 }, + }, + 'hljs-meta-string': { + type: 'SOLID', + color: { r: 0.30196078431372547, g: 0.6, b: 0.7490196078431373 }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.9411764705882353, + b: 0.9411764705882353, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.9411764705882353, + b: 0.9411764705882353, + }, + }, +} +export default isblEditorDark diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/isblEditorLight.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/isblEditorLight.ts new file mode 100644 index 00000000..0aa3d8ff --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/isblEditorLight.ts @@ -0,0 +1,104 @@ +const isblEditorLight = { + hljs: { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-subst': { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.3333333333333333, + g: 0.3333333333333333, + b: 0.3333333333333333, + }, + }, + 'hljs-keyword': { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-attribute': { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-selector-tag': { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-meta-keyword': { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-doctag': { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-name': { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-string': { + type: 'SOLID', + color: { r: 0, g: 0, b: 0.5019607843137255 }, + }, + 'hljs-type': { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-number': { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-selector-id': { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-selector-class': { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-quote': { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-template-tag': { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-deletion': { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-title': { + type: 'SOLID', + color: { r: 0.984313725490196, g: 0.17254901960784313, b: 0 }, + }, + 'hljs-section': { + type: 'SOLID', + color: { r: 0.984313725490196, g: 0.17254901960784313, b: 0 }, + }, + 'hljs-title>hljs-built_in': { + type: 'SOLID', + color: { r: 0, g: 0.5019607843137255, b: 0.5019607843137255 }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { r: 0.3686274509803922, g: 0.09019607843137255, b: 0 }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { r: 0.3686274509803922, g: 0.09019607843137255, b: 0 }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { r: 0.3686274509803922, g: 0.09019607843137255, b: 0 }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { r: 0.3686274509803922, g: 0.09019607843137255, b: 0 }, + }, + 'hljs-link': { + type: 'SOLID', + color: { r: 0.3686274509803922, g: 0.09019607843137255, b: 0 }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { r: 0.3686274509803922, g: 0.09019607843137255, b: 0 }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { r: 0.3686274509803922, g: 0.09019607843137255, b: 0 }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { r: 0, g: 0, b: 0.5019607843137255 }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { r: 0, g: 0, b: 0.5019607843137255 }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { r: 0.2235294117647059, g: 0.45098039215686275, b: 0 }, + }, + 'hljs-code': { + type: 'SOLID', + color: { r: 0.2235294117647059, g: 0.45098039215686275, b: 0 }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { r: 0.2235294117647059, g: 0.45098039215686275, b: 0 }, + }, + 'hljs-class': { + type: 'SOLID', + color: { r: 0.43529411764705883, g: 0.10980392156862745, b: 0 }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { r: 0.12156862745098039, g: 0.44313725490196076, b: 0.6 }, + }, + 'hljs-meta-string': { + type: 'SOLID', + color: { r: 0.30196078431372547, g: 0.6, b: 0.7490196078431373 }, + }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default isblEditorLight diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/kimbieDark.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/kimbieDark.ts new file mode 100644 index 00000000..6fcd7707 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/kimbieDark.ts @@ -0,0 +1,251 @@ +const kimbieDark = { + hljs: { + type: 'SOLID', + color: { + r: 0.8274509803921568, + g: 0.6862745098039216, + b: 0.5254901960784314, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.8392156862745098, + g: 0.7294117647058823, + b: 0.6784313725490196, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.8392156862745098, + g: 0.7294117647058823, + b: 0.6784313725490196, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.2235294117647059, + b: 0.34509803921568627, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.2235294117647059, + b: 0.34509803921568627, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.2235294117647059, + b: 0.34509803921568627, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.2235294117647059, + b: 0.34509803921568627, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.2235294117647059, + b: 0.34509803921568627, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.2235294117647059, + b: 0.34509803921568627, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.2235294117647059, + b: 0.34509803921568627, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.2235294117647059, + b: 0.34509803921568627, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.9686274509803922, + g: 0.6039215686274509, + b: 0.19607843137254902, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.9686274509803922, + g: 0.6039215686274509, + b: 0.19607843137254902, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.9686274509803922, + g: 0.6039215686274509, + b: 0.19607843137254902, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.9686274509803922, + g: 0.6039215686274509, + b: 0.19607843137254902, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.9686274509803922, + g: 0.6039215686274509, + b: 0.19607843137254902, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.9686274509803922, + g: 0.6039215686274509, + b: 0.19607843137254902, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.9686274509803922, + g: 0.6039215686274509, + b: 0.19607843137254902, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.9686274509803922, + g: 0.6039215686274509, + b: 0.19607843137254902, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.39215686274509803, + b: 0.19215686274509805, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.39215686274509803, + b: 0.19215686274509805, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.39215686274509803, + b: 0.19215686274509805, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.5333333333333333, + g: 0.6078431372549019, + b: 0.2901960784313726, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.5333333333333333, + g: 0.6078431372549019, + b: 0.2901960784313726, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.5333333333333333, + g: 0.6078431372549019, + b: 0.2901960784313726, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.5333333333333333, + g: 0.6078431372549019, + b: 0.2901960784313726, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.596078431372549, + g: 0.403921568627451, + b: 0.41568627450980394, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.596078431372549, + g: 0.403921568627451, + b: 0.41568627450980394, + }, + }, + 'hljs-function': { + type: 'SOLID', + color: { + r: 0.596078431372549, + g: 0.403921568627451, + b: 0.41568627450980394, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.8274509803921568, + g: 0.6862745098039216, + b: 0.5254901960784314, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.8274509803921568, + g: 0.6862745098039216, + b: 0.5254901960784314, + }, + }, +} +export default kimbieDark diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/kimbieLight.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/kimbieLight.ts new file mode 100644 index 00000000..45d536c3 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/kimbieLight.ts @@ -0,0 +1,251 @@ +const kimbieLight = { + hljs: { + type: 'SOLID', + color: { + r: 0.5176470588235295, + g: 0.3803921568627451, + b: 0.23921568627450981, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.6470588235294118, + g: 0.47843137254901963, + b: 0.2980392156862745, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.6470588235294118, + g: 0.47843137254901963, + b: 0.2980392156862745, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.2235294117647059, + b: 0.34509803921568627, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.2235294117647059, + b: 0.34509803921568627, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.2235294117647059, + b: 0.34509803921568627, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.2235294117647059, + b: 0.34509803921568627, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.2235294117647059, + b: 0.34509803921568627, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.2235294117647059, + b: 0.34509803921568627, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.2235294117647059, + b: 0.34509803921568627, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.2235294117647059, + b: 0.34509803921568627, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.9686274509803922, + g: 0.6039215686274509, + b: 0.19607843137254902, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.9686274509803922, + g: 0.6039215686274509, + b: 0.19607843137254902, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.9686274509803922, + g: 0.6039215686274509, + b: 0.19607843137254902, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.9686274509803922, + g: 0.6039215686274509, + b: 0.19607843137254902, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.9686274509803922, + g: 0.6039215686274509, + b: 0.19607843137254902, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.9686274509803922, + g: 0.6039215686274509, + b: 0.19607843137254902, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.9686274509803922, + g: 0.6039215686274509, + b: 0.19607843137254902, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.9686274509803922, + g: 0.6039215686274509, + b: 0.19607843137254902, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.39215686274509803, + b: 0.19215686274509805, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.39215686274509803, + b: 0.19215686274509805, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.39215686274509803, + b: 0.19215686274509805, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.5333333333333333, + g: 0.6078431372549019, + b: 0.2901960784313726, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.5333333333333333, + g: 0.6078431372549019, + b: 0.2901960784313726, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.5333333333333333, + g: 0.6078431372549019, + b: 0.2901960784313726, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.5333333333333333, + g: 0.6078431372549019, + b: 0.2901960784313726, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.596078431372549, + g: 0.403921568627451, + b: 0.41568627450980394, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.596078431372549, + g: 0.403921568627451, + b: 0.41568627450980394, + }, + }, + 'hljs-function': { + type: 'SOLID', + color: { + r: 0.596078431372549, + g: 0.403921568627451, + b: 0.41568627450980394, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.5176470588235295, + g: 0.3803921568627451, + b: 0.23921568627450981, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.5176470588235295, + g: 0.3803921568627451, + b: 0.23921568627450981, + }, + }, +} +export default kimbieLight diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/lightfair.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/lightfair.ts new file mode 100644 index 00000000..5c783170 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/lightfair.ts @@ -0,0 +1,203 @@ +const lightfair = { + hljs: { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-name': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-meta': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-subst': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.5333333333333333, + g: 0.5333333333333333, + b: 0.5333333333333333, + }, + }, + 'hljs-keyword': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-attribute': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-meta-keyword': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-doctag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.25882352941176473, + g: 0.5254901960784314, + b: 0.9568627450980393, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.25882352941176473, + g: 0.5254901960784314, + b: 0.9568627450980393, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.25882352941176473, + g: 0.5254901960784314, + b: 0.9568627450980393, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.25882352941176473, + g: 0.5254901960784314, + b: 0.9568627450980393, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.25882352941176473, + g: 0.5254901960784314, + b: 0.9568627450980393, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.25882352941176473, + g: 0.5254901960784314, + b: 0.9568627450980393, + }, + }, + 'hljs-template-tag': { + type: 'SOLID', + color: { + r: 0.25882352941176473, + g: 0.5254901960784314, + b: 0.9568627450980393, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.25882352941176473, + g: 0.5254901960784314, + b: 0.9568627450980393, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.25882352941176473, + g: 0.5254901960784314, + b: 0.9568627450980393, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.25882352941176473, + g: 0.5254901960784314, + b: 0.9568627450980393, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.7372549019607844, + g: 0.3764705882352941, + b: 0.3764705882352941, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.7372549019607844, + g: 0.3764705882352941, + b: 0.3764705882352941, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.7372549019607844, + g: 0.3764705882352941, + b: 0.3764705882352941, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.7372549019607844, + g: 0.3764705882352941, + b: 0.3764705882352941, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.7372549019607844, + g: 0.3764705882352941, + b: 0.3764705882352941, + }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { + r: 0.7372549019607844, + g: 0.3764705882352941, + b: 0.3764705882352941, + }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { + r: 0.7372549019607844, + g: 0.3764705882352941, + b: 0.3764705882352941, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.3843137254901961, + g: 0.7372549019607844, + b: 0.7372549019607844, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.1450980392156863, + g: 0.7764705882352941, + b: 0.7764705882352941, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.1450980392156863, + g: 0.7764705882352941, + b: 0.7764705882352941, + }, + }, + 'hljs-code': { + type: 'SOLID', + color: { + r: 0.1450980392156863, + g: 0.7764705882352941, + b: 0.7764705882352941, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.1450980392156863, + g: 0.7764705882352941, + b: 0.7764705882352941, + }, + }, + 'hljs-meta-string': { + type: 'SOLID', + color: { r: 0.30196078431372547, g: 0.6, b: 0.7490196078431373 }, + }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default lightfair diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/magula.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/magula.ts new file mode 100644 index 00000000..2c0ad20c --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/magula.ts @@ -0,0 +1,235 @@ +const magula = { + hljs: { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-template-tag': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-doctag': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.9568627450980393, + g: 0.9568627450980393, + b: 0.9568627450980393, + }, + }, +} +export default magula diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/monoBlue.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/monoBlue.ts new file mode 100644 index 00000000..55a8e391 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/monoBlue.ts @@ -0,0 +1,148 @@ +const monoBlue = { + hljs: { + type: 'SOLID', + color: { r: 0, g: 0.09803921568627451, b: 0.22745098039215686 }, + }, + 'hljs-keyword': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-title': { + type: 'SOLID', + color: { r: 0, g: 0.2823529411764706, b: 0.6705882352941176 }, + }, + 'hljs-section': { + type: 'SOLID', + color: { r: 0, g: 0.2823529411764706, b: 0.6705882352941176 }, + }, + 'hljs-doctag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-name': { + type: 'SOLID', + color: { r: 0, g: 0.2823529411764706, b: 0.6705882352941176 }, + }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.45098039215686275, + g: 0.5058823529411764, + b: 0.5686274509803921, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { r: 0, g: 0.2823529411764706, b: 0.6705882352941176 }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { r: 0, g: 0.2823529411764706, b: 0.6705882352941176 }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { r: 0, g: 0.2823529411764706, b: 0.6705882352941176 }, + }, + 'hljs-type': { + type: 'SOLID', + color: { r: 0, g: 0.2823529411764706, b: 0.6705882352941176 }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { r: 0, g: 0.2823529411764706, b: 0.6705882352941176 }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { r: 0, g: 0.2823529411764706, b: 0.6705882352941176 }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { r: 0, g: 0.2823529411764706, b: 0.6705882352941176 }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { r: 0, g: 0.2823529411764706, b: 0.6705882352941176 }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { r: 0, g: 0.2823529411764706, b: 0.6705882352941176 }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.2980392156862745, + g: 0.5058823529411764, + b: 0.788235294117647, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.2980392156862745, + g: 0.5058823529411764, + b: 0.788235294117647, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.2980392156862745, + g: 0.5058823529411764, + b: 0.788235294117647, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.2980392156862745, + g: 0.5058823529411764, + b: 0.788235294117647, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.2980392156862745, + g: 0.5058823529411764, + b: 0.788235294117647, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.2980392156862745, + g: 0.5058823529411764, + b: 0.788235294117647, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.2980392156862745, + g: 0.5058823529411764, + b: 0.788235294117647, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.2980392156862745, + g: 0.5058823529411764, + b: 0.788235294117647, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.2980392156862745, + g: 0.5058823529411764, + b: 0.788235294117647, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.2980392156862745, + g: 0.5058823529411764, + b: 0.788235294117647, + }, + }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default monoBlue diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/monokai.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/monokai.ts new file mode 100644 index 00000000..af1b31ea --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/monokai.ts @@ -0,0 +1,201 @@ +const monokai = { + hljs: { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.14901960784313725, + b: 0.4470588235294118, + }, + }, + 'hljs-keyword': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-literal': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.14901960784313725, + b: 0.4470588235294118, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.14901960784313725, + b: 0.4470588235294118, + }, + }, + 'hljs-code': { + type: 'SOLID', + color: { r: 0.4, g: 0.8509803921568627, b: 0.9372549019607843 }, + }, + 'hljs-classhljs-title': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.7490196078431373, + g: 0.4745098039215686, + b: 0.8588235294117647, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.7490196078431373, + g: 0.4745098039215686, + b: 0.8588235294117647, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.7490196078431373, + g: 0.4745098039215686, + b: 0.8588235294117647, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.7490196078431373, + g: 0.4745098039215686, + b: 0.8588235294117647, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.8862745098039215, + b: 0.1803921568627451, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.8862745098039215, + b: 0.1803921568627451, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.8862745098039215, + b: 0.1803921568627451, + }, + }, + 'hljs-title': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-section': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.8862745098039215, + b: 0.1803921568627451, + }, + }, + 'hljs-type': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.8862745098039215, + b: 0.1803921568627451, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.8862745098039215, + b: 0.1803921568627451, + }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.8862745098039215, + b: 0.1803921568627451, + }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.8862745098039215, + b: 0.1803921568627451, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.8862745098039215, + b: 0.1803921568627451, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.8862745098039215, + b: 0.1803921568627451, + }, + }, + 'hljs-template-tag': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.8862745098039215, + b: 0.1803921568627451, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.8862745098039215, + b: 0.1803921568627451, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.4588235294117647, + g: 0.44313725490196076, + b: 0.3686274509803922, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.4588235294117647, + g: 0.44313725490196076, + b: 0.3686274509803922, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.4588235294117647, + g: 0.44313725490196076, + b: 0.3686274509803922, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.4588235294117647, + g: 0.44313725490196076, + b: 0.3686274509803922, + }, + }, + 'hljs-doctag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-id': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default monokai diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/monokaiSublime.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/monokaiSublime.ts new file mode 100644 index 00000000..3ec3983c --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/monokaiSublime.ts @@ -0,0 +1,245 @@ +const monokaiSublime = { + hljs: { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-bullet': { + type: 'SOLID', + color: { r: 0.6823529411764706, g: 0.5058823529411764, b: 1 }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { r: 0.6823529411764706, g: 0.5058823529411764, b: 1 }, + }, + 'hljs-number': { + type: 'SOLID', + color: { r: 0.6823529411764706, g: 0.5058823529411764, b: 1 }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { r: 0.6823529411764706, g: 0.5058823529411764, b: 1 }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { r: 0.6823529411764706, g: 0.5058823529411764, b: 1 }, + }, + 'hljs-link': { + type: 'SOLID', + color: { r: 0.6823529411764706, g: 0.5058823529411764, b: 1 }, + }, + 'hljs-code': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.8862745098039215, + b: 0.1803921568627451, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.8862745098039215, + b: 0.1803921568627451, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.8862745098039215, + b: 0.1803921568627451, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.6509803921568628, + g: 0.8862745098039215, + b: 0.1803921568627451, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.14901960784313725, + b: 0.4470588235294118, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.14901960784313725, + b: 0.4470588235294118, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.14901960784313725, + b: 0.4470588235294118, + }, + }, + 'hljs-attr': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.14901960784313725, + b: 0.4470588235294118, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { r: 0.4, g: 0.8509803921568627, b: 0.9372549019607843 }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { r: 0.4, g: 0.8509803921568627, b: 0.9372549019607843 }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-classhljs-title': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9490196078431372, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.8588235294117647, + b: 0.4549019607843137, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.8588235294117647, + b: 0.4549019607843137, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.8588235294117647, + b: 0.4549019607843137, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.8588235294117647, + b: 0.4549019607843137, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.8588235294117647, + b: 0.4549019607843137, + }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.8588235294117647, + b: 0.4549019607843137, + }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.8588235294117647, + b: 0.4549019607843137, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.8588235294117647, + b: 0.4549019607843137, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.8588235294117647, + b: 0.4549019607843137, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.8588235294117647, + b: 0.4549019607843137, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.4588235294117647, + g: 0.44313725490196076, + b: 0.3686274509803922, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.4588235294117647, + g: 0.44313725490196076, + b: 0.3686274509803922, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.4588235294117647, + g: 0.44313725490196076, + b: 0.3686274509803922, + }, + }, +} +export default monokaiSublime diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/noctis.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/noctis.ts new file mode 100644 index 00000000..db19f9e9 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/noctis.ts @@ -0,0 +1,127 @@ +const noctis = { + hljs: { + type: 'SOLID', + color: { r: 0.6980392157, g: 0.7921568627, b: 0.8039215686 }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { r: 0.3568627451, g: 0.5215686275, b: 0.5450980392 }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { r: 0.3568627451, g: 0.5215686275, b: 0.5450980392 }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { r: 0.8941176471, g: 0.7176470588, b: 0.5058823529 }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { r: 0.0862745098, g: 0.7137254902, b: 0.4509803922 }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { r: 0.2862745098, g: 0.6745098039, b: 0.9137254902 }, + }, + 'hljs-name': { + type: 'SOLID', + color: { r: 0.8941176471, g: 0.7176470588, b: 0.5058823529 }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { r: 0.6980392157, g: 0.7921568627, b: 0.8039215686 }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { r: 0.6980392157, g: 0.7921568627, b: 0.8039215686 }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { r: 0.2862745098, g: 0.9137254902, b: 0.6509803922 }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { r: 0.6980392157, g: 0.7921568627, b: 0.8039215686 }, + }, + 'hljs-function': { + type: 'SOLID', + color: { r: 0.0862745098, g: 0.6392156863, b: 0.7137254902 }, + }, + 'hljs-number': { + type: 'SOLID', + color: { r: 0.4392156863, g: 0.3764705882, b: 0.9215686275 }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { r: 0.9019607843, g: 0.3960784314, b: 0.2 }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { r: 0.9019607843, g: 0.3960784314, b: 0.2 }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { r: 0.4392156863, g: 0.3764705882, b: 0.9215686275 }, + }, + 'hljs-type': { + type: 'SOLID', + color: { r: 0.8392156863, g: 0.4941176471, b: 0.3607843137 }, + }, + 'hljs-params': { + type: 'SOLID', + color: { r: 0.8941176471, g: 0.7176470588, b: 0.5058823529 }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { r: 0.6980392157, g: 0.7921568627, b: 0.8039215686 }, + }, + 'hljs-link': { + type: 'SOLID', + color: { r: 0.2862745098, g: 0.6745098039, b: 0.9137254902 }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { r: 0.8352941176, g: 0.5921568627, b: 0.1019607843 }, + }, + 'hljs-string': { + type: 'SOLID', + color: { r: 0.2862745098, g: 0.9137254902, b: 0.6509803922 }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { r: 0.2862745098, g: 0.6745098039, b: 0.9137254902 }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { r: 0.6980392157, g: 0.7921568627, b: 0.8039215686 }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { r: 0.6980392157, g: 0.7921568627, b: 0.8039215686 }, + }, + 'hljs-title': { + type: 'SOLID', + color: { r: 0.0862745098, g: 0.6392156863, b: 0.7137254902 }, + }, + 'hljs-section': { + type: 'SOLID', + color: { r: 0.6980392157, g: 0.7921568627, b: 0.8039215686 }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { r: 0.8745098039, g: 0.462745098, b: 0.6078431373 }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { r: 0.6980392157, g: 0.7921568627, b: 0.8039215686 }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { r: 0.6980392157, g: 0.7921568627, b: 0.8039215686 }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { r: 0.6980392157, g: 0.7921568627, b: 0.8039215686 }, + }, +} +export default noctis diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/nord.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/nord.ts new file mode 100644 index 00000000..4c18a1b3 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/nord.ts @@ -0,0 +1,328 @@ +const nord = { + hljs: { + type: 'SOLID', + color: { + r: 0.8470588235294118, + g: 0.8705882352941177, + b: 0.9137254901960784, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.8470588235294118, + g: 0.8705882352941177, + b: 0.9137254901960784, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.5058823529411764, + g: 0.6313725490196078, + b: 0.7568627450980392, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.7372549019607844, + b: 0.7333333333333333, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.7372549019607844, + b: 0.7333333333333333, + }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.7372549019607844, + b: 0.7333333333333333, + }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { + r: 0.5333333333333333, + g: 0.7529411764705882, + b: 0.8156862745098039, + }, + }, + 'hljs-addition': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'background-color:rgba(163190140': { + type: 'SOLID', + color: { r: 1, g: 1, b: 1 }, + }, + 'hljs-deletion': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'background-color:rgba(19197106': { + type: 'SOLID', + color: { r: 1, g: 1, b: 1 }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.5333333333333333, + g: 0.7529411764705882, + b: 0.8156862745098039, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.7372549019607844, + b: 0.7333333333333333, + }, + }, + 'hljs-class': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.7372549019607844, + b: 0.7333333333333333, + }, + }, + 'hljs-function': { + type: 'SOLID', + color: { + r: 0.5333333333333333, + g: 0.7529411764705882, + b: 0.8156862745098039, + }, + }, + 'hljs-function>hljs-title': { + type: 'SOLID', + color: { + r: 0.5333333333333333, + g: 0.7529411764705882, + b: 0.8156862745098039, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.5058823529411764, + g: 0.6313725490196078, + b: 0.7568627450980392, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.5058823529411764, + g: 0.6313725490196078, + b: 0.7568627450980392, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.9215686274509803, + g: 0.796078431372549, + b: 0.5450980392156862, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.7058823529411765, + g: 0.5568627450980392, + b: 0.6784313725490196, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.9215686274509803, + g: 0.796078431372549, + b: 0.5450980392156862, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.6392156862745098, + g: 0.7450980392156863, + b: 0.5490196078431373, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.5333333333333333, + g: 0.7529411764705882, + b: 0.8156862745098039, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.8470588235294118, + g: 0.8705882352941177, + b: 0.9137254901960784, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.5058823529411764, + g: 0.6313725490196078, + b: 0.7568627450980392, + }, + }, + 'hljs-code': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.7372549019607844, + b: 0.7333333333333333, + }, + }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-formula': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.7372549019607844, + b: 0.7333333333333333, + }, + }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-link:hover': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.2980392156862745, + g: 0.33725490196078434, + b: 0.41568627450980394, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.2980392156862745, + g: 0.33725490196078434, + b: 0.41568627450980394, + }, + }, + 'hljs-doctag': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.7372549019607844, + b: 0.7333333333333333, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.8156862745098039, + g: 0.5294117647058824, + b: 0.4392156862745098, + }, + }, + 'hljs-meta-keyword': { + type: 'SOLID', + color: { + r: 0.3686274509803922, + g: 0.5058823529411764, + b: 0.6745098039215687, + }, + }, + 'hljs-meta-string': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.7372549019607844, + b: 0.7333333333333333, + }, + }, + 'hljs-attr': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.7372549019607844, + b: 0.7333333333333333, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.5333333333333333, + g: 0.7529411764705882, + b: 0.8156862745098039, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.5058823529411764, + g: 0.6313725490196078, + b: 0.7568627450980392, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.5333333333333333, + g: 0.7529411764705882, + b: 0.8156862745098039, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.3686274509803922, + g: 0.5058823529411764, + b: 0.6745098039215687, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.5058823529411764, + g: 0.6313725490196078, + b: 0.7568627450980392, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.8470588235294118, + g: 0.8705882352941177, + b: 0.9137254901960784, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.8470588235294118, + g: 0.8705882352941177, + b: 0.9137254901960784, + }, + }, + 'hljs-template-tag': { + type: 'SOLID', + color: { + r: 0.3686274509803922, + g: 0.5058823529411764, + b: 0.6745098039215687, + }, + }, + 'hljs-meta:not(:first-child)': { + type: 'SOLID', + color: { + r: 0.8156862745098039, + g: 0.5294117647058824, + b: 0.4392156862745098, + }, + }, +} +export default nord diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/obsidian.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/obsidian.ts new file mode 100644 index 00000000..bbec525d --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/obsidian.ts @@ -0,0 +1,190 @@ +const obsidian = { + hljs: { + type: 'SOLID', + color: { + r: 0.8784313725490196, + g: 0.8862745098039215, + b: 0.8941176470588236, + }, + }, + 'hljs-keyword': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-literal': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.5764705882352941, + g: 0.7803921568627451, + b: 0.38823529411764707, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { r: 1, g: 0.803921568627451, b: 0.13333333333333333 }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { r: 0.4, g: 0.5450980392156862, b: 0.6901960784313725 }, + }, + 'hljs-code': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-classhljs-title': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-section': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.8274509803921568, + g: 0.592156862745098, + b: 0.27058823529411763, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.8274509803921568, + g: 0.592156862745098, + b: 0.27058823529411763, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.3333333333333333, + g: 0.44313725490196076, + b: 0.5098039215686274, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.5490196078431373, + g: 0.7333333333333333, + b: 0.6784313725490196, + }, + }, + 'hljs-name': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.5490196078431373, + g: 0.7333333333333333, + b: 0.6784313725490196, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.5490196078431373, + g: 0.7333333333333333, + b: 0.6784313725490196, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.5490196078431373, + g: 0.7333333333333333, + b: 0.6784313725490196, + }, + }, + 'hljs-type': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.5490196078431373, + g: 0.7333333333333333, + b: 0.6784313725490196, + }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { + r: 0.5490196078431373, + g: 0.7333333333333333, + b: 0.6784313725490196, + }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { + r: 0.5490196078431373, + g: 0.7333333333333333, + b: 0.6784313725490196, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.5490196078431373, + g: 0.7333333333333333, + b: 0.6784313725490196, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.5490196078431373, + g: 0.7333333333333333, + b: 0.6784313725490196, + }, + }, + 'hljs-template-tag': { + type: 'SOLID', + color: { + r: 0.5490196078431373, + g: 0.7333333333333333, + b: 0.6784313725490196, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.5490196078431373, + g: 0.7333333333333333, + b: 0.6784313725490196, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { r: 0.9254901960784314, g: 0.4627450980392157, b: 0 }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { r: 0.9254901960784314, g: 0.4627450980392157, b: 0 }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.5058823529411764, + g: 0.5568627450980392, + b: 0.5882352941176471, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.5058823529411764, + g: 0.5568627450980392, + b: 0.5882352941176471, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.5058823529411764, + g: 0.5568627450980392, + b: 0.5882352941176471, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.6274509803921569, + g: 0.5098039215686274, + b: 0.7411764705882353, + }, + }, + 'hljs-doctag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-title': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default obsidian diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/ocean.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/ocean.ts new file mode 100644 index 00000000..0c7842bf --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/ocean.ts @@ -0,0 +1,243 @@ +const ocean = { + hljs: { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7725490196078432, + b: 0.807843137254902, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.396078431372549, + g: 0.45098039215686275, + b: 0.49411764705882355, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.396078431372549, + g: 0.45098039215686275, + b: 0.49411764705882355, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.7490196078431373, + g: 0.3803921568627451, + b: 0.41568627450980394, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.7490196078431373, + g: 0.3803921568627451, + b: 0.41568627450980394, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.7490196078431373, + g: 0.3803921568627451, + b: 0.41568627450980394, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.7490196078431373, + g: 0.3803921568627451, + b: 0.41568627450980394, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.7490196078431373, + g: 0.3803921568627451, + b: 0.41568627450980394, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.7490196078431373, + g: 0.3803921568627451, + b: 0.41568627450980394, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.7490196078431373, + g: 0.3803921568627451, + b: 0.41568627450980394, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.7490196078431373, + g: 0.3803921568627451, + b: 0.41568627450980394, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.8156862745098039, + g: 0.5294117647058824, + b: 0.4392156862745098, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.8156862745098039, + g: 0.5294117647058824, + b: 0.4392156862745098, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.8156862745098039, + g: 0.5294117647058824, + b: 0.4392156862745098, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.8156862745098039, + g: 0.5294117647058824, + b: 0.4392156862745098, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.8156862745098039, + g: 0.5294117647058824, + b: 0.4392156862745098, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.8156862745098039, + g: 0.5294117647058824, + b: 0.4392156862745098, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.8156862745098039, + g: 0.5294117647058824, + b: 0.4392156862745098, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.8156862745098039, + g: 0.5294117647058824, + b: 0.4392156862745098, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.9215686274509803, + g: 0.796078431372549, + b: 0.5450980392156862, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.6392156862745098, + g: 0.7450980392156863, + b: 0.5490196078431373, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.6392156862745098, + g: 0.7450980392156863, + b: 0.5490196078431373, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.6392156862745098, + g: 0.7450980392156863, + b: 0.5490196078431373, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.6392156862745098, + g: 0.7450980392156863, + b: 0.5490196078431373, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.6313725490196078, + b: 0.7019607843137254, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.6313725490196078, + b: 0.7019607843137254, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.7058823529411765, + g: 0.5568627450980392, + b: 0.6784313725490196, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.7058823529411765, + g: 0.5568627450980392, + b: 0.6784313725490196, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7725490196078432, + b: 0.807843137254902, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.7529411764705882, + g: 0.7725490196078432, + b: 0.807843137254902, + }, + }, +} +export default ocean diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/paraisoDark.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/paraisoDark.ts new file mode 100644 index 00000000..526cff06 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/paraisoDark.ts @@ -0,0 +1,243 @@ +const paraisoDark = { + hljs: { + type: 'SOLID', + color: { + r: 0.6392156862745098, + g: 0.6196078431372549, + b: 0.6078431372549019, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.5529411764705883, + g: 0.5254901960784314, + b: 0.5294117647058824, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.5529411764705883, + g: 0.5254901960784314, + b: 0.5294117647058824, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.3803921568627451, + b: 0.3333333333333333, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.3803921568627451, + b: 0.3333333333333333, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.3803921568627451, + b: 0.3333333333333333, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.3803921568627451, + b: 0.3333333333333333, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.3803921568627451, + b: 0.3333333333333333, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.3803921568627451, + b: 0.3333333333333333, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.3803921568627451, + b: 0.3333333333333333, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.3803921568627451, + b: 0.3333333333333333, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.3803921568627451, + b: 0.3333333333333333, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.6078431372549019, + b: 0.08235294117647059, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.6078431372549019, + b: 0.08235294117647059, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.6078431372549019, + b: 0.08235294117647059, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.6078431372549019, + b: 0.08235294117647059, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.6078431372549019, + b: 0.08235294117647059, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.6078431372549019, + b: 0.08235294117647059, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.6078431372549019, + b: 0.08235294117647059, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.996078431372549, + g: 0.7686274509803922, + b: 0.09411764705882353, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.996078431372549, + g: 0.7686274509803922, + b: 0.09411764705882353, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.996078431372549, + g: 0.7686274509803922, + b: 0.09411764705882353, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.2823529411764706, + g: 0.7137254901960784, + b: 0.5215686274509804, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.2823529411764706, + g: 0.7137254901960784, + b: 0.5215686274509804, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.2823529411764706, + g: 0.7137254901960784, + b: 0.5215686274509804, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.2823529411764706, + g: 0.7137254901960784, + b: 0.5215686274509804, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.5058823529411764, + g: 0.3568627450980392, + b: 0.6431372549019608, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.5058823529411764, + g: 0.3568627450980392, + b: 0.6431372549019608, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.6392156862745098, + g: 0.6196078431372549, + b: 0.6078431372549019, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.6392156862745098, + g: 0.6196078431372549, + b: 0.6078431372549019, + }, + }, +} +export default paraisoDark diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/paraisoLight.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/paraisoLight.ts new file mode 100644 index 00000000..507ece42 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/paraisoLight.ts @@ -0,0 +1,243 @@ +const paraisoLight = { + hljs: { + type: 'SOLID', + color: { + r: 0.30980392156862746, + g: 0.25882352941176473, + b: 0.2980392156862745, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.4666666666666667, + g: 0.43137254901960786, + b: 0.44313725490196076, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.4666666666666667, + g: 0.43137254901960786, + b: 0.44313725490196076, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.3803921568627451, + b: 0.3333333333333333, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.3803921568627451, + b: 0.3333333333333333, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.3803921568627451, + b: 0.3333333333333333, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.3803921568627451, + b: 0.3333333333333333, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.3803921568627451, + b: 0.3333333333333333, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.3803921568627451, + b: 0.3333333333333333, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.3803921568627451, + b: 0.3333333333333333, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.3803921568627451, + b: 0.3333333333333333, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.3803921568627451, + b: 0.3333333333333333, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.6078431372549019, + b: 0.08235294117647059, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.6078431372549019, + b: 0.08235294117647059, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.6078431372549019, + b: 0.08235294117647059, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.6078431372549019, + b: 0.08235294117647059, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.6078431372549019, + b: 0.08235294117647059, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.6078431372549019, + b: 0.08235294117647059, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.6078431372549019, + b: 0.08235294117647059, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.996078431372549, + g: 0.7686274509803922, + b: 0.09411764705882353, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.996078431372549, + g: 0.7686274509803922, + b: 0.09411764705882353, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.996078431372549, + g: 0.7686274509803922, + b: 0.09411764705882353, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.2823529411764706, + g: 0.7137254901960784, + b: 0.5215686274509804, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.2823529411764706, + g: 0.7137254901960784, + b: 0.5215686274509804, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.2823529411764706, + g: 0.7137254901960784, + b: 0.5215686274509804, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.2823529411764706, + g: 0.7137254901960784, + b: 0.5215686274509804, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.5058823529411764, + g: 0.3568627450980392, + b: 0.6431372549019608, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.5058823529411764, + g: 0.3568627450980392, + b: 0.6431372549019608, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.30980392156862746, + g: 0.25882352941176473, + b: 0.2980392156862745, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.30980392156862746, + g: 0.25882352941176473, + b: 0.2980392156862745, + }, + }, +} +export default paraisoLight diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/pojoaque.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/pojoaque.ts new file mode 100644 index 00000000..b3dc2ba9 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/pojoaque.ts @@ -0,0 +1,207 @@ +const pojoaque = { + hljs: { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.8117647058823529, + b: 0.5607843137254902, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.34509803921568627, + g: 0.43137254901960786, + b: 0.4588235294117647, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.34509803921568627, + g: 0.43137254901960786, + b: 0.4588235294117647, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.7137254901960784, + g: 0.28627450980392155, + b: 0.14901960784313725, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.7137254901960784, + g: 0.28627450980392155, + b: 0.14901960784313725, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.7137254901960784, + g: 0.28627450980392155, + b: 0.14901960784313725, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.7137254901960784, + g: 0.28627450980392155, + b: 0.14901960784313725, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { r: 0.27450980392156865, g: 0.5372549019607843, b: 0.4 }, + }, + 'hljs-string': { + type: 'SOLID', + color: { r: 0.27450980392156865, g: 0.5372549019607843, b: 0.4 }, + }, + 'hljs-doctag': { + type: 'SOLID', + color: { r: 0.27450980392156865, g: 0.5372549019607843, b: 0.4 }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { r: 0.27450980392156865, g: 0.5372549019607843, b: 0.4 }, + }, + 'hljs-title': { + type: 'SOLID', + color: { r: 1, g: 0.6901960784313725, b: 0.23137254901960785 }, + }, + 'hljs-section': { + type: 'SOLID', + color: { r: 1, g: 0.6901960784313725, b: 0.23137254901960785 }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { r: 1, g: 0.6901960784313725, b: 0.23137254901960785 }, + }, + 'hljs-name': { + type: 'SOLID', + color: { r: 1, g: 0.6901960784313725, b: 0.23137254901960785 }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { r: 0.7098039215686275, g: 0.5372549019607843, b: 0 }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { r: 0.7098039215686275, g: 0.5372549019607843, b: 0 }, + }, + 'hljs-classhljs-title': { + type: 'SOLID', + color: { r: 0.7098039215686275, g: 0.5372549019607843, b: 0 }, + }, + 'hljs-type': { + type: 'SOLID', + color: { r: 0.7098039215686275, g: 0.5372549019607843, b: 0 }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { r: 0.7098039215686275, g: 0.5372549019607843, b: 0 }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.7215686274509804, + g: 0.596078431372549, + b: 0.34901960784313724, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.29411764705882354, + b: 0.08627450980392157, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.29411764705882354, + b: 0.08627450980392157, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.29411764705882354, + b: 0.08627450980392157, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.29411764705882354, + b: 0.08627450980392157, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.29411764705882354, + b: 0.08627450980392157, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.19607843137254902, + b: 0.1843137254901961, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.8274509803921568, + g: 0.6509803921568628, + b: 0.047058823529411764, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.8274509803921568, + g: 0.6509803921568628, + b: 0.047058823529411764, + }, + }, + 'hljs-formula': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.8117647058823529, + b: 0.5607843137254902, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.8117647058823529, + b: 0.5607843137254902, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.8117647058823529, + b: 0.5607843137254902, + }, + }, +} +export default pojoaque diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/purebasic.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/purebasic.ts new file mode 100644 index 00000000..11836709 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/purebasic.ts @@ -0,0 +1,111 @@ +const purebasic = { + hljs: { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + '\t\tIfyouneedtocustomizeastylesheetforPureBASIConly': { + type: 'SOLID', + color: { r: 1, g: 1, b: 1 }, + }, + 'hljs-type': { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-function': { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-name': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-number': { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-attr': { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-params': { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-subst': { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-comment': { + type: 'SOLID', + color: { r: 0, g: 0.6666666666666666, b: 0.6666666666666666 }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { r: 0, g: 0.6666666666666666, b: 0.6666666666666666 }, + }, + 'hljs-section': { + type: 'SOLID', + color: { r: 0, g: 0.6666666666666666, b: 0.6666666666666666 }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { r: 0, g: 0.6666666666666666, b: 0.6666666666666666 }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { r: 0, g: 0.6666666666666666, b: 0.6666666666666666 }, + }, + 'hljs-title': { type: 'SOLID', color: { r: 0, g: 0.4, b: 0.4 } }, + 'hljs-tag': { type: 'SOLID', color: { r: 0, g: 0.4, b: 0.4 } }, + 'hljs-variable': { type: 'SOLID', color: { r: 0, g: 0.4, b: 0.4 } }, + 'hljs-code': { type: 'SOLID', color: { r: 0, g: 0.4, b: 0.4 } }, + 'hljs-keyword': { type: 'SOLID', color: { r: 0, g: 0.4, b: 0.4 } }, + 'hljs-class': { type: 'SOLID', color: { r: 0, g: 0.4, b: 0.4 } }, + 'hljs-meta-keyword': { type: 'SOLID', color: { r: 0, g: 0.4, b: 0.4 } }, + 'hljs-selector-class': { type: 'SOLID', color: { r: 0, g: 0.4, b: 0.4 } }, + 'hljs-built_in': { type: 'SOLID', color: { r: 0, g: 0.4, b: 0.4 } }, + 'hljs-builtin-name': { type: 'SOLID', color: { r: 0, g: 0.4, b: 0.4 } }, + 'hljs-string': { + type: 'SOLID', + color: { r: 0, g: 0.5019607843137255, b: 1 }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { r: 0, g: 0.5019607843137255, b: 1 }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.5725490196078431, + g: 0.29411764705882354, + b: 0.4470588235294118, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.5725490196078431, + g: 0.29411764705882354, + b: 0.4470588235294118, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.5725490196078431, + g: 0.29411764705882354, + b: 0.4470588235294118, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.5725490196078431, + g: 0.29411764705882354, + b: 0.4470588235294118, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.5725490196078431, + g: 0.29411764705882354, + b: 0.4470588235294118, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.5725490196078431, + g: 0.29411764705882354, + b: 0.4470588235294118, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.5725490196078431, + g: 0.29411764705882354, + b: 0.4470588235294118, + }, + }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default purebasic diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/qtcreatorDark.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/qtcreatorDark.ts new file mode 100644 index 00000000..effa15c9 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/qtcreatorDark.ts @@ -0,0 +1,150 @@ +const qtcreatorDark = { + hljs: { + type: 'SOLID', + color: { + r: 0.6666666666666666, + g: 0.6666666666666666, + b: 0.6666666666666666, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.6666666666666666, + g: 0.6666666666666666, + b: 0.6666666666666666, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.6666666666666666, + g: 0.6666666666666666, + b: 0.6666666666666666, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.6666666666666666, + g: 0.6666666666666666, + b: 0.6666666666666666, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.6588235294117647, + g: 0.6588235294117647, + b: 0.6352941176470588, + }, + }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-bullet': { + type: 'SOLID', + color: { r: 1, g: 0.3333333333333333, b: 1 }, + }, + 'hljs-quote': { type: 'SOLID', color: { r: 1, g: 0.3333333333333333, b: 1 } }, + 'hljs-number': { + type: 'SOLID', + color: { r: 1, g: 0.3333333333333333, b: 1 }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { r: 1, g: 0.3333333333333333, b: 1 }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { r: 1, g: 0.3333333333333333, b: 1 }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { r: 0.6666666666666666, g: 0.6666666666666666, b: 1 }, + }, + 'hljs-stronge': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-type': { type: 'SOLID', color: { r: 1, g: 0.3333333333333333, b: 1 } }, + 'hljs-keyword': { + type: 'SOLID', + color: { r: 1, g: 1, b: 0.3333333333333333 }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { r: 1, g: 1, b: 0.3333333333333333 }, + }, + 'hljs-function': { + type: 'SOLID', + color: { r: 1, g: 1, b: 0.3333333333333333 }, + }, + 'hljs-section': { + type: 'SOLID', + color: { r: 1, g: 1, b: 0.3333333333333333 }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { r: 1, g: 1, b: 0.3333333333333333 }, + }, + 'hljs-name': { type: 'SOLID', color: { r: 1, g: 1, b: 0.3333333333333333 } }, + 'hljs-attribute': { + type: 'SOLID', + color: { r: 1, g: 0.3333333333333333, b: 0.3333333333333333 }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { r: 0.5333333333333333, g: 0.5333333333333333, b: 1 }, + }, + 'hljs-params': { + type: 'SOLID', + color: { r: 0.5333333333333333, g: 0.5333333333333333, b: 1 }, + }, + 'hljs-classhljs-title': { + type: 'SOLID', + color: { r: 0.5333333333333333, g: 0.5333333333333333, b: 1 }, + }, + 'hljs-string': { + type: 'SOLID', + color: { r: 1, g: 0.3333333333333333, b: 1 }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { r: 1, g: 0.3333333333333333, b: 1 }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { r: 1, g: 0.3333333333333333, b: 1 }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { r: 1, g: 0.3333333333333333, b: 1 }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { r: 1, g: 0.3333333333333333, b: 1 }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { r: 1, g: 0.3333333333333333, b: 1 }, + }, + 'hljs-template-tag': { + type: 'SOLID', + color: { r: 1, g: 0.3333333333333333, b: 1 }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { r: 1, g: 0.3333333333333333, b: 1 }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { r: 1, g: 0.3333333333333333, b: 1 }, + }, + 'hljs-link': { type: 'SOLID', color: { r: 1, g: 0.3333333333333333, b: 1 } }, + 'hljs-comment': { + type: 'SOLID', + color: { r: 0.3333333333333333, g: 1, b: 1 }, + }, + 'hljs-meta': { type: 'SOLID', color: { r: 0.3333333333333333, g: 1, b: 1 } }, + 'hljs-deletion': { + type: 'SOLID', + color: { r: 0.3333333333333333, g: 1, b: 1 }, + }, +} +export default qtcreatorDark diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/qtcreatorLight.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/qtcreatorLight.ts new file mode 100644 index 00000000..16573020 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/qtcreatorLight.ts @@ -0,0 +1,118 @@ +const qtcreatorLight = { + hljs: { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-subst': { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-tag': { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-title': { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 0, g: 0, b: 0 } }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-bullet': { + type: 'SOLID', + color: { r: 0, g: 0, b: 0.5019607843137255 }, + }, + 'hljs-quote': { type: 'SOLID', color: { r: 0, g: 0, b: 0.5019607843137255 } }, + 'hljs-number': { + type: 'SOLID', + color: { r: 0, g: 0, b: 0.5019607843137255 }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { r: 0, g: 0, b: 0.5019607843137255 }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { r: 0, g: 0, b: 0.5019607843137255 }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { r: 0.5019607843137255, g: 0, b: 0.5019607843137255 }, + }, + 'hljs-stronge': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-type': { type: 'SOLID', color: { r: 0, g: 0.5019607843137255, b: 0 } }, + 'hljs-keyword': { + type: 'SOLID', + color: { r: 0.5019607843137255, g: 0.5019607843137255, b: 0 }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { r: 0.5019607843137255, g: 0.5019607843137255, b: 0 }, + }, + 'hljs-function': { + type: 'SOLID', + color: { r: 0.5019607843137255, g: 0.5019607843137255, b: 0 }, + }, + 'hljs-section': { + type: 'SOLID', + color: { r: 0.5019607843137255, g: 0.5019607843137255, b: 0 }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { r: 0.5019607843137255, g: 0.5019607843137255, b: 0 }, + }, + 'hljs-name': { + type: 'SOLID', + color: { r: 0.5019607843137255, g: 0.5019607843137255, b: 0 }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { r: 0.5019607843137255, g: 0, b: 0 }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { r: 0, g: 0.3333333333333333, b: 0.6862745098039216 }, + }, + 'hljs-params': { + type: 'SOLID', + color: { r: 0, g: 0.3333333333333333, b: 0.6862745098039216 }, + }, + 'hljs-classhljs-title': { + type: 'SOLID', + color: { r: 0, g: 0.3333333333333333, b: 0.6862745098039216 }, + }, + 'hljs-string': { + type: 'SOLID', + color: { r: 0, g: 0.5019607843137255, b: 0 }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { r: 0, g: 0.5019607843137255, b: 0 }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { r: 0, g: 0.5019607843137255, b: 0 }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { r: 0, g: 0.5019607843137255, b: 0 }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { r: 0, g: 0.5019607843137255, b: 0 }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { r: 0, g: 0.5019607843137255, b: 0 }, + }, + 'hljs-template-tag': { + type: 'SOLID', + color: { r: 0, g: 0.5019607843137255, b: 0 }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { r: 0, g: 0.5019607843137255, b: 0 }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { r: 0, g: 0.5019607843137255, b: 0 }, + }, + 'hljs-link': { type: 'SOLID', color: { r: 0, g: 0.5019607843137255, b: 0 } }, + 'hljs-comment': { + type: 'SOLID', + color: { r: 0, g: 0.5019607843137255, b: 0 }, + }, + 'hljs-meta': { type: 'SOLID', color: { r: 0, g: 0.5019607843137255, b: 0 } }, + 'hljs-deletion': { + type: 'SOLID', + color: { r: 0, g: 0.5019607843137255, b: 0 }, + }, +} +export default qtcreatorLight diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/railscasts.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/railscasts.ts new file mode 100644 index 00000000..c08c873f --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/railscasts.ts @@ -0,0 +1,239 @@ +const railscasts = { + hljs: { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.8823529411764706, + b: 0.8627450980392157, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.7372549019607844, + g: 0.5803921568627451, + b: 0.34509803921568627, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.7372549019607844, + g: 0.5803921568627451, + b: 0.34509803921568627, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.7607843137254902, + g: 0.3843137254901961, + b: 0.18823529411764706, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.7607843137254902, + g: 0.3843137254901961, + b: 0.18823529411764706, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.6470588235294118, + g: 0.7607843137254902, + b: 0.3803921568627451, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.6470588235294118, + g: 0.7607843137254902, + b: 0.3803921568627451, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.6470588235294118, + g: 0.7607843137254902, + b: 0.3803921568627451, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.6470588235294118, + g: 0.7607843137254902, + b: 0.3803921568627451, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.6470588235294118, + g: 0.7607843137254902, + b: 0.3803921568627451, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.3176470588235294, + g: 0.6235294117647059, + b: 0.3137254901960784, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.9098039215686274, + g: 0.7490196078431373, + b: 0.41568627450980394, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.9098039215686274, + g: 0.7490196078431373, + b: 0.41568627450980394, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.8549019607843137, + g: 0.28627450980392155, + b: 0.2235294117647059, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.42745098039215684, + g: 0.611764705882353, + b: 0.7450980392156863, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.42745098039215684, + g: 0.611764705882353, + b: 0.7450980392156863, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.42745098039215684, + g: 0.611764705882353, + b: 0.7450980392156863, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.42745098039215684, + g: 0.611764705882353, + b: 0.7450980392156863, + }, + }, + 'hljs-attr': { + type: 'SOLID', + color: { + r: 0.42745098039215684, + g: 0.611764705882353, + b: 0.7450980392156863, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.8823529411764706, + b: 0.8627450980392157, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { r: 0.8156862745098039, g: 0.8156862745098039, b: 1 }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.803921568627451, + g: 0.6588235294117647, + b: 0.4117647058823529, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.6078431372549019, + g: 0.5215686274509804, + b: 0.615686274509804, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { r: 1, g: 0.7764705882352941, b: 0.42745098039215684 }, + }, + 'hljs-section': { + type: 'SOLID', + color: { r: 1, g: 0.7764705882352941, b: 0.42745098039215684 }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.0784313725490196, + g: 0.25882352941176473, + b: 0.07058823529411765, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.8823529411764706, + b: 0.8627450980392157, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.6078431372549019, + g: 0.4392156862745098, + b: 0.24705882352941178, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.5450980392156862, + g: 0.596078431372549, + b: 0.6705882352941176, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.8823529411764706, + b: 0.8627450980392157, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.8823529411764706, + b: 0.8627450980392157, + }, + }, +} +export default railscasts diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/rainbow.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/rainbow.ts new file mode 100644 index 00000000..66aa7078 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/rainbow.ts @@ -0,0 +1,204 @@ +const rainbow = { + hljs: { + type: 'SOLID', + color: { + r: 0.8196078431372549, + g: 0.8509803921568627, + b: 0.8823529411764706, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.5882352941176471, + g: 0.596078431372549, + b: 0.5882352941176471, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.5882352941176471, + g: 0.596078431372549, + b: 0.5882352941176471, + }, + }, + 'hljs-keyword': { type: 'SOLID', color: { r: 0.8, g: 0.6, b: 0.8 } }, + 'hljs-selector-tag': { type: 'SOLID', color: { r: 0.8, g: 0.6, b: 0.8 } }, + 'hljs-literal': { type: 'SOLID', color: { r: 0.8, g: 0.6, b: 0.8 } }, + 'hljs-type': { type: 'SOLID', color: { r: 0.8, g: 0.6, b: 0.8 } }, + 'hljs-addition': { type: 'SOLID', color: { r: 0.8, g: 0.6, b: 0.8 } }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.5686274509803921, + b: 0.3411764705882353, + }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.5686274509803921, + b: 0.3411764705882353, + }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.5686274509803921, + b: 0.3411764705882353, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.5411764705882353, + g: 0.7450980392156863, + b: 0.7176470588235294, + }, + }, + 'hljs-doctag': { + type: 'SOLID', + color: { + r: 0.5411764705882353, + g: 0.7450980392156863, + b: 0.7176470588235294, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.5411764705882353, + g: 0.7450980392156863, + b: 0.7176470588235294, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.7098039215686275, + g: 0.7411764705882353, + b: 0.40784313725490196, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.8196078431372549, + g: 0.8509803921568627, + b: 0.8823529411764706, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.8196078431372549, + g: 0.8509803921568627, + b: 0.8823529411764706, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.7098039215686275, + g: 0.7411764705882353, + b: 0.40784313725490196, + }, + }, + 'hljs-variable': { type: 'SOLID', color: { r: 1, g: 0.8, b: 0.4 } }, + 'hljs-template-variable': { type: 'SOLID', color: { r: 1, g: 0.8, b: 0.4 } }, + 'hljs-selector-id': { type: 'SOLID', color: { r: 1, g: 0.8, b: 0.4 } }, + 'hljs-classhljs-title': { type: 'SOLID', color: { r: 1, g: 0.8, b: 0.4 } }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.8196078431372549, + g: 0.8509803921568627, + b: 0.8823529411764706, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.5686274509803921, + b: 0.3411764705882353, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.5686274509803921, + b: 0.3411764705882353, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.5686274509803921, + b: 0.3411764705882353, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.5686274509803921, + b: 0.3411764705882353, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.5686274509803921, + b: 0.3411764705882353, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.19607843137254902, + b: 0.1843137254901961, + }, + }, + 'hljs-formula': { + type: 'SOLID', + color: { + r: 0.8196078431372549, + g: 0.8509803921568627, + b: 0.8823529411764706, + }, + }, + 'hljs-attr': { + type: 'SOLID', + color: { + r: 0.5058823529411764, + g: 0.6352941176470588, + b: 0.7450980392156863, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.5058823529411764, + g: 0.6352941176470588, + b: 0.7450980392156863, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.8196078431372549, + g: 0.8509803921568627, + b: 0.8823529411764706, + }, + }, +} +export default rainbow diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/routeros.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/routeros.ts new file mode 100644 index 00000000..4307ebaa --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/routeros.ts @@ -0,0 +1,167 @@ +const routeros = { + hljs: { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-subst': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.5333333333333333, + g: 0.5333333333333333, + b: 0.5333333333333333, + }, + }, + 'hljs-keyword': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-meta-keyword': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-doctag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-name': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-attribute': { + type: 'SOLID', + color: { r: 0.054901960784313725, g: 0.6039215686274509, b: 0 }, + }, + 'hljs-function': { + type: 'SOLID', + color: { r: 0.6, g: 0.023529411764705882, b: 0.6039215686274509 }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { r: 0.6, g: 0.023529411764705882, b: 0.6039215686274509 }, + }, + 'hljs-type': { type: 'SOLID', color: { r: 0.5333333333333333, g: 0, b: 0 } }, + 'hljs-string': { + type: 'SOLID', + color: { r: 0.5333333333333333, g: 0, b: 0 }, + }, + 'hljs-number': { + type: 'SOLID', + color: { r: 0.5333333333333333, g: 0, b: 0 }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { r: 0.5333333333333333, g: 0, b: 0 }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { r: 0.5333333333333333, g: 0, b: 0 }, + }, + 'hljs-quote': { type: 'SOLID', color: { r: 0.5333333333333333, g: 0, b: 0 } }, + 'hljs-template-tag': { + type: 'SOLID', + color: { r: 0.5333333333333333, g: 0, b: 0 }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { r: 0.5333333333333333, g: 0, b: 0 }, + }, + 'hljs-title': { type: 'SOLID', color: { r: 0.5333333333333333, g: 0, b: 0 } }, + 'hljs-section': { + type: 'SOLID', + color: { r: 0.5333333333333333, g: 0, b: 0 }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.7372549019607844, + g: 0.3764705882352941, + b: 0.3764705882352941, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.7372549019607844, + g: 0.3764705882352941, + b: 0.3764705882352941, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.7372549019607844, + g: 0.3764705882352941, + b: 0.3764705882352941, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.7372549019607844, + g: 0.3764705882352941, + b: 0.3764705882352941, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.7372549019607844, + g: 0.3764705882352941, + b: 0.3764705882352941, + }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { + r: 0.7372549019607844, + g: 0.3764705882352941, + b: 0.3764705882352941, + }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { + r: 0.7372549019607844, + g: 0.3764705882352941, + b: 0.3764705882352941, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.47058823529411764, + g: 0.6627450980392157, + b: 0.3764705882352941, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.047058823529411764, + g: 0.6039215686274509, + b: 0.6039215686274509, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.047058823529411764, + g: 0.6039215686274509, + b: 0.6039215686274509, + }, + }, + 'hljs-code': { + type: 'SOLID', + color: { + r: 0.047058823529411764, + g: 0.6039215686274509, + b: 0.6039215686274509, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.047058823529411764, + g: 0.6039215686274509, + b: 0.6039215686274509, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { r: 0.12156862745098039, g: 0.44313725490196076, b: 0.6 }, + }, + 'hljs-meta-string': { + type: 'SOLID', + color: { r: 0.30196078431372547, g: 0.6, b: 0.7490196078431373 }, + }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default routeros diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/schoolBook.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/schoolBook.ts new file mode 100644 index 00000000..8bba97ec --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/schoolBook.ts @@ -0,0 +1,106 @@ +const schoolBook = { + hljs: { + type: 'SOLID', + color: { + r: 0.24313725490196078, + g: 0.34901960784313724, + b: 0.08235294117647059, + }, + }, + 'hljs-keyword': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-literal': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.24313725490196078, + g: 0.34901960784313724, + b: 0.08235294117647059, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { r: 0.17254901960784313, g: 0, b: 0.6235294117647059 }, + }, + 'hljs-title': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-section': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-type': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-symbol': { + type: 'SOLID', + color: { r: 0.17254901960784313, g: 0, b: 0.6235294117647059 }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { r: 0.17254901960784313, g: 0, b: 0.6235294117647059 }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { r: 0.17254901960784313, g: 0, b: 0.6235294117647059 }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { r: 0.17254901960784313, g: 0, b: 0.6235294117647059 }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { r: 0.17254901960784313, g: 0, b: 0.6235294117647059 }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { r: 0.17254901960784313, g: 0, b: 0.6235294117647059 }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { r: 0.17254901960784313, g: 0, b: 0.6235294117647059 }, + }, + 'hljs-template-tag': { + type: 'SOLID', + color: { r: 0.17254901960784313, g: 0, b: 0.6235294117647059 }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { r: 0.17254901960784313, g: 0, b: 0.6235294117647059 }, + }, + 'hljs-link': { + type: 'SOLID', + color: { r: 0.17254901960784313, g: 0, b: 0.6235294117647059 }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.01568627450980392, + b: 0.08235294117647059, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.01568627450980392, + b: 0.08235294117647059, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.01568627450980392, + b: 0.08235294117647059, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.9019607843137255, + g: 0.01568627450980392, + b: 0.08235294117647059, + }, + }, + 'hljs-doctag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-name': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-id': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default schoolBook diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/shadesOfPurple.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/shadesOfPurple.ts new file mode 100644 index 00000000..b06e6bef --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/shadesOfPurple.ts @@ -0,0 +1,169 @@ +const shadesOfPurple = { + hljs: { + type: 'SOLID', + color: { r: 0.8901960784313725, g: 0.8745098039215686, b: 1 }, + }, + "/*font-family:'OperatorMono''FiraCode''Menlo''Monaco''CourierNew'": { + type: 'SOLID', + color: { r: 1, g: 1, b: 1 }, + }, + 'hljs-title': { + type: 'SOLID', + color: { r: 0.9803921568627451, g: 0.8156862745098039, b: 0 }, + }, + 'hljs-name': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-attr': { + type: 'SOLID', + color: { r: 0.9725490196078431, g: 0.8156862745098039, b: 0 }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { r: 0.984313725490196, g: 0.6196078431372549, b: 0 }, + }, + 'hljs-selector-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-section': { + type: 'SOLID', + color: { r: 0.984313725490196, g: 0.6196078431372549, b: 0 }, + }, + 'hljs-keyword': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-subst': { + type: 'SOLID', + color: { r: 0.8901960784313725, g: 0.8745098039215686, b: 1 }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.2980392156862745, + g: 0.8235294117647058, + b: 0.07450980392156863, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.2980392156862745, + g: 0.8235294117647058, + b: 0.07450980392156863, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.2980392156862745, + g: 0.8235294117647058, + b: 0.07450980392156863, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.2980392156862745, + g: 0.8235294117647058, + b: 0.07450980392156863, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.2980392156862745, + g: 0.8235294117647058, + b: 0.07450980392156863, + }, + }, + 'hljs-code': { + type: 'SOLID', + color: { + r: 0.2980392156862745, + g: 0.8235294117647058, + b: 0.07450980392156863, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.2980392156862745, + g: 0.8235294117647058, + b: 0.07450980392156863, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.2980392156862745, + g: 0.8235294117647058, + b: 0.07450980392156863, + }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { + r: 0.2980392156862745, + g: 0.8235294117647058, + b: 0.07450980392156863, + }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { + r: 0.2980392156862745, + g: 0.8235294117647058, + b: 0.07450980392156863, + }, + }, + 'hljs-template-tag': { + type: 'SOLID', + color: { + r: 0.2980392156862745, + g: 0.8235294117647058, + b: 0.07450980392156863, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.2980392156862745, + g: 0.8235294117647058, + b: 0.07450980392156863, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.2980392156862745, + g: 0.8235294117647058, + b: 0.07450980392156863, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { r: 0.984313725490196, g: 0.6196078431372549, b: 0 }, + }, + 'hljs-meta-string': { + type: 'SOLID', + color: { r: 0.984313725490196, g: 0.6196078431372549, b: 0 }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { r: 0.6745098039215687, g: 0.396078431372549, b: 1 }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.9803921568627451, + g: 0.396078431372549, + b: 0.5529411764705883, + }, + }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.9803921568627451, + g: 0.396078431372549, + b: 0.5529411764705883, + }, + }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default shadesOfPurple diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/solarizedDark.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/solarizedDark.ts new file mode 100644 index 00000000..95993724 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/solarizedDark.ts @@ -0,0 +1,255 @@ +const solarizedDark = { + hljs: { + type: 'SOLID', + color: { + r: 0.5137254901960784, + g: 0.5803921568627451, + b: 0.5882352941176471, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.34509803921568627, + g: 0.43137254901960786, + b: 0.4588235294117647, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.34509803921568627, + g: 0.43137254901960786, + b: 0.4588235294117647, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { r: 0.5215686274509804, g: 0.6, b: 0 }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { r: 0.5215686274509804, g: 0.6, b: 0 }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { r: 0.5215686274509804, g: 0.6, b: 0 }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.16470588235294117, + g: 0.6313725490196078, + b: 0.596078431372549, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.16470588235294117, + g: 0.6313725490196078, + b: 0.596078431372549, + }, + }, + 'hljs-metahljs-meta-string': { + type: 'SOLID', + color: { + r: 0.16470588235294117, + g: 0.6313725490196078, + b: 0.596078431372549, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.16470588235294117, + g: 0.6313725490196078, + b: 0.596078431372549, + }, + }, + 'hljs-doctag': { + type: 'SOLID', + color: { + r: 0.16470588235294117, + g: 0.6313725490196078, + b: 0.596078431372549, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.16470588235294117, + g: 0.6313725490196078, + b: 0.596078431372549, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.14901960784313725, + g: 0.5450980392156862, + b: 0.8235294117647058, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.14901960784313725, + g: 0.5450980392156862, + b: 0.8235294117647058, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.14901960784313725, + g: 0.5450980392156862, + b: 0.8235294117647058, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.14901960784313725, + g: 0.5450980392156862, + b: 0.8235294117647058, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.14901960784313725, + g: 0.5450980392156862, + b: 0.8235294117647058, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { r: 0.7098039215686275, g: 0.5372549019607843, b: 0 }, + }, + 'hljs-attr': { + type: 'SOLID', + color: { r: 0.7098039215686275, g: 0.5372549019607843, b: 0 }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { r: 0.7098039215686275, g: 0.5372549019607843, b: 0 }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { r: 0.7098039215686275, g: 0.5372549019607843, b: 0 }, + }, + 'hljs-classhljs-title': { + type: 'SOLID', + color: { r: 0.7098039215686275, g: 0.5372549019607843, b: 0 }, + }, + 'hljs-type': { + type: 'SOLID', + color: { r: 0.7098039215686275, g: 0.5372549019607843, b: 0 }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.29411764705882354, + b: 0.08627450980392157, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.29411764705882354, + b: 0.08627450980392157, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.29411764705882354, + b: 0.08627450980392157, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.29411764705882354, + b: 0.08627450980392157, + }, + }, + 'hljs-metahljs-keyword': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.29411764705882354, + b: 0.08627450980392157, + }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.29411764705882354, + b: 0.08627450980392157, + }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.29411764705882354, + b: 0.08627450980392157, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.29411764705882354, + b: 0.08627450980392157, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.19607843137254902, + b: 0.1843137254901961, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.19607843137254902, + b: 0.1843137254901961, + }, + }, + 'hljs-formula': { + type: 'SOLID', + color: { + r: 0.5137254901960784, + g: 0.5803921568627451, + b: 0.5882352941176471, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.5137254901960784, + g: 0.5803921568627451, + b: 0.5882352941176471, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.5137254901960784, + g: 0.5803921568627451, + b: 0.5882352941176471, + }, + }, +} +export default solarizedDark diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/solarizedLight.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/solarizedLight.ts new file mode 100644 index 00000000..2fd85427 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/solarizedLight.ts @@ -0,0 +1,255 @@ +const solarizedLight = { + hljs: { + type: 'SOLID', + color: { + r: 0.396078431372549, + g: 0.4823529411764706, + b: 0.5137254901960784, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.5764705882352941, + g: 0.6313725490196078, + b: 0.6313725490196078, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.5764705882352941, + g: 0.6313725490196078, + b: 0.6313725490196078, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { r: 0.5215686274509804, g: 0.6, b: 0 }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { r: 0.5215686274509804, g: 0.6, b: 0 }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { r: 0.5215686274509804, g: 0.6, b: 0 }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.16470588235294117, + g: 0.6313725490196078, + b: 0.596078431372549, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.16470588235294117, + g: 0.6313725490196078, + b: 0.596078431372549, + }, + }, + 'hljs-metahljs-meta-string': { + type: 'SOLID', + color: { + r: 0.16470588235294117, + g: 0.6313725490196078, + b: 0.596078431372549, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.16470588235294117, + g: 0.6313725490196078, + b: 0.596078431372549, + }, + }, + 'hljs-doctag': { + type: 'SOLID', + color: { + r: 0.16470588235294117, + g: 0.6313725490196078, + b: 0.596078431372549, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.16470588235294117, + g: 0.6313725490196078, + b: 0.596078431372549, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.14901960784313725, + g: 0.5450980392156862, + b: 0.8235294117647058, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.14901960784313725, + g: 0.5450980392156862, + b: 0.8235294117647058, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.14901960784313725, + g: 0.5450980392156862, + b: 0.8235294117647058, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.14901960784313725, + g: 0.5450980392156862, + b: 0.8235294117647058, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.14901960784313725, + g: 0.5450980392156862, + b: 0.8235294117647058, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { r: 0.7098039215686275, g: 0.5372549019607843, b: 0 }, + }, + 'hljs-attr': { + type: 'SOLID', + color: { r: 0.7098039215686275, g: 0.5372549019607843, b: 0 }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { r: 0.7098039215686275, g: 0.5372549019607843, b: 0 }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { r: 0.7098039215686275, g: 0.5372549019607843, b: 0 }, + }, + 'hljs-classhljs-title': { + type: 'SOLID', + color: { r: 0.7098039215686275, g: 0.5372549019607843, b: 0 }, + }, + 'hljs-type': { + type: 'SOLID', + color: { r: 0.7098039215686275, g: 0.5372549019607843, b: 0 }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.29411764705882354, + b: 0.08627450980392157, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.29411764705882354, + b: 0.08627450980392157, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.29411764705882354, + b: 0.08627450980392157, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.29411764705882354, + b: 0.08627450980392157, + }, + }, + 'hljs-metahljs-keyword': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.29411764705882354, + b: 0.08627450980392157, + }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.29411764705882354, + b: 0.08627450980392157, + }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.29411764705882354, + b: 0.08627450980392157, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.796078431372549, + g: 0.29411764705882354, + b: 0.08627450980392157, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.19607843137254902, + b: 0.1843137254901961, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.19607843137254902, + b: 0.1843137254901961, + }, + }, + 'hljs-formula': { + type: 'SOLID', + color: { + r: 0.396078431372549, + g: 0.4823529411764706, + b: 0.5137254901960784, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.396078431372549, + g: 0.4823529411764706, + b: 0.5137254901960784, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.396078431372549, + g: 0.4823529411764706, + b: 0.5137254901960784, + }, + }, +} +export default solarizedLight diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/sunburst.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/sunburst.ts new file mode 100644 index 00000000..70f844df --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/sunburst.ts @@ -0,0 +1,223 @@ +const sunburst = { + hljs: { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9725490196078431, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.6823529411764706, + g: 0.6823529411764706, + b: 0.6823529411764706, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.6823529411764706, + g: 0.6823529411764706, + b: 0.6823529411764706, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.8862745098039215, + g: 0.5372549019607843, + b: 0.39215686274509803, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.8862745098039215, + g: 0.5372549019607843, + b: 0.39215686274509803, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.8862745098039215, + g: 0.5372549019607843, + b: 0.39215686274509803, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.396078431372549, + g: 0.6901960784313725, + b: 0.25882352941176473, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.8549019607843137, + g: 0.9372549019607843, + b: 0.6392156862745098, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.9137254901960784, + g: 0.7529411764705882, + b: 0.3843137254901961, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.9137254901960784, + g: 0.7529411764705882, + b: 0.3843137254901961, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { r: 0.5372549019607843, g: 0.7411764705882353, b: 1 }, + }, + 'hljs-section': { + type: 'SOLID', + color: { r: 0.5372549019607843, g: 0.7411764705882353, b: 1 }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { r: 0.5372549019607843, g: 0.7411764705882353, b: 1 }, + }, + 'hljs-name': { + type: 'SOLID', + color: { r: 0.5372549019607843, g: 0.7411764705882353, b: 1 }, + }, + 'hljs-classhljs-title': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9725490196078431, + }, + }, + 'hljs-doctag': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9725490196078431, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { r: 0.2, g: 0.5294117647058824, b: 0.8 }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { r: 0.2, g: 0.5294117647058824, b: 0.8 }, + }, + 'hljs-number': { + type: 'SOLID', + color: { r: 0.2, g: 0.5294117647058824, b: 0.8 }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.24313725490196078, + g: 0.5294117647058824, + b: 0.8901960784313725, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.24313725490196078, + g: 0.5294117647058824, + b: 0.8901960784313725, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.24313725490196078, + g: 0.5294117647058824, + b: 0.8901960784313725, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.803921568627451, + g: 0.6588235294117647, + b: 0.4117647058823529, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.5372549019607843, + g: 0.5882352941176471, + b: 0.6588235294117647, + }, + }, + 'hljs-formula': { + type: 'SOLID', + color: { + r: 0.054901960784313725, + g: 0.13333333333333333, + b: 0.19215686274509805, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.1450980392156863, + g: 0.23137254901960785, + b: 0.13333333333333333, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.25882352941176473, + g: 0.054901960784313725, + b: 0.03529411764705882, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.6078431372549019, + g: 0.4392156862745098, + b: 0.24705882352941178, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.5450980392156862, + g: 0.596078431372549, + b: 0.6705882352941176, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9725490196078431, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.9725490196078431, + g: 0.9725490196078431, + b: 0.9725490196078431, + }, + }, +} +export default sunburst diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/tomorrow.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/tomorrow.ts new file mode 100644 index 00000000..41516628 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/tomorrow.ts @@ -0,0 +1,223 @@ +const tomorrow = { + hljs: { + type: 'SOLID', + color: { + r: 0.30196078431372547, + g: 0.30196078431372547, + b: 0.2980392156862745, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.5568627450980392, + g: 0.5647058823529412, + b: 0.5490196078431373, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.5568627450980392, + g: 0.5647058823529412, + b: 0.5490196078431373, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.7843137254901961, + g: 0.1568627450980392, + b: 0.1607843137254902, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.7843137254901961, + g: 0.1568627450980392, + b: 0.1607843137254902, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.7843137254901961, + g: 0.1568627450980392, + b: 0.1607843137254902, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.7843137254901961, + g: 0.1568627450980392, + b: 0.1607843137254902, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.7843137254901961, + g: 0.1568627450980392, + b: 0.1607843137254902, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.7843137254901961, + g: 0.1568627450980392, + b: 0.1607843137254902, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.7843137254901961, + g: 0.1568627450980392, + b: 0.1607843137254902, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.7843137254901961, + g: 0.1568627450980392, + b: 0.1607843137254902, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.9607843137254902, + g: 0.5294117647058824, + b: 0.12156862745098039, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.9607843137254902, + g: 0.5294117647058824, + b: 0.12156862745098039, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.9607843137254902, + g: 0.5294117647058824, + b: 0.12156862745098039, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.9607843137254902, + g: 0.5294117647058824, + b: 0.12156862745098039, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.9607843137254902, + g: 0.5294117647058824, + b: 0.12156862745098039, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.9607843137254902, + g: 0.5294117647058824, + b: 0.12156862745098039, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.9607843137254902, + g: 0.5294117647058824, + b: 0.12156862745098039, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.9607843137254902, + g: 0.5294117647058824, + b: 0.12156862745098039, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { r: 0.9176470588235294, g: 0.7176470588235294, b: 0 }, + }, + 'hljs-string': { + type: 'SOLID', + color: { r: 0.44313725490196076, g: 0.5490196078431373, b: 0 }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { r: 0.44313725490196076, g: 0.5490196078431373, b: 0 }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { r: 0.44313725490196076, g: 0.5490196078431373, b: 0 }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { r: 0.44313725490196076, g: 0.5490196078431373, b: 0 }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.25882352941176473, + g: 0.44313725490196076, + b: 0.6823529411764706, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.25882352941176473, + g: 0.44313725490196076, + b: 0.6823529411764706, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.5372549019607843, + g: 0.34901960784313724, + b: 0.6588235294117647, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.5372549019607843, + g: 0.34901960784313724, + b: 0.6588235294117647, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.30196078431372547, + g: 0.30196078431372547, + b: 0.2980392156862745, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.30196078431372547, + g: 0.30196078431372547, + b: 0.2980392156862745, + }, + }, +} +export default tomorrow diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/tomorrowNight.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/tomorrowNight.ts new file mode 100644 index 00000000..59b8391b --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/tomorrowNight.ts @@ -0,0 +1,190 @@ +const tomorrowNight = { + hljs: { + type: 'SOLID', + color: { + r: 0.7725490196078432, + g: 0.7843137254901961, + b: 0.7764705882352941, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.5882352941176471, + g: 0.596078431372549, + b: 0.5882352941176471, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.5882352941176471, + g: 0.596078431372549, + b: 0.5882352941176471, + }, + }, + 'hljs-variable': { type: 'SOLID', color: { r: 0.8, g: 0.4, b: 0.4 } }, + 'hljs-template-variable': { + type: 'SOLID', + color: { r: 0.8, g: 0.4, b: 0.4 }, + }, + 'hljs-tag': { type: 'SOLID', color: { r: 0.8, g: 0.4, b: 0.4 } }, + 'hljs-name': { type: 'SOLID', color: { r: 0.8, g: 0.4, b: 0.4 } }, + 'hljs-selector-id': { type: 'SOLID', color: { r: 0.8, g: 0.4, b: 0.4 } }, + 'hljs-selector-class': { type: 'SOLID', color: { r: 0.8, g: 0.4, b: 0.4 } }, + 'hljs-regexp': { type: 'SOLID', color: { r: 0.8, g: 0.4, b: 0.4 } }, + 'hljs-deletion': { type: 'SOLID', color: { r: 0.8, g: 0.4, b: 0.4 } }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.8705882352941177, + g: 0.5764705882352941, + b: 0.37254901960784315, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.8705882352941177, + g: 0.5764705882352941, + b: 0.37254901960784315, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.8705882352941177, + g: 0.5764705882352941, + b: 0.37254901960784315, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.8705882352941177, + g: 0.5764705882352941, + b: 0.37254901960784315, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.8705882352941177, + g: 0.5764705882352941, + b: 0.37254901960784315, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.8705882352941177, + g: 0.5764705882352941, + b: 0.37254901960784315, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.8705882352941177, + g: 0.5764705882352941, + b: 0.37254901960784315, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.8705882352941177, + g: 0.5764705882352941, + b: 0.37254901960784315, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.9411764705882353, + g: 0.7764705882352941, + b: 0.4549019607843137, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.7098039215686275, + g: 0.7411764705882353, + b: 0.40784313725490196, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.7098039215686275, + g: 0.7411764705882353, + b: 0.40784313725490196, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.7098039215686275, + g: 0.7411764705882353, + b: 0.40784313725490196, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.7098039215686275, + g: 0.7411764705882353, + b: 0.40784313725490196, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.5058823529411764, + g: 0.6352941176470588, + b: 0.7450980392156863, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.5058823529411764, + g: 0.6352941176470588, + b: 0.7450980392156863, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.6980392156862745, + g: 0.5803921568627451, + b: 0.7333333333333333, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.6980392156862745, + g: 0.5803921568627451, + b: 0.7333333333333333, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.7725490196078432, + g: 0.7843137254901961, + b: 0.7764705882352941, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.7725490196078432, + g: 0.7843137254901961, + b: 0.7764705882352941, + }, + }, +} +export default tomorrowNight diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/tomorrowNightBlue.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/tomorrowNightBlue.ts new file mode 100644 index 00000000..770e73ff --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/tomorrowNightBlue.ts @@ -0,0 +1,138 @@ +const tomorrowNightBlue = { + hljs: { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.4470588235294118, + g: 0.5215686274509804, + b: 0.7176470588235294, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.4470588235294118, + g: 0.5215686274509804, + b: 0.7176470588235294, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { r: 1, g: 0.615686274509804, b: 0.6431372549019608 }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { r: 1, g: 0.615686274509804, b: 0.6431372549019608 }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { r: 1, g: 0.615686274509804, b: 0.6431372549019608 }, + }, + 'hljs-name': { + type: 'SOLID', + color: { r: 1, g: 0.615686274509804, b: 0.6431372549019608 }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { r: 1, g: 0.615686274509804, b: 0.6431372549019608 }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { r: 1, g: 0.615686274509804, b: 0.6431372549019608 }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { r: 1, g: 0.615686274509804, b: 0.6431372549019608 }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { r: 1, g: 0.615686274509804, b: 0.6431372549019608 }, + }, + 'hljs-number': { + type: 'SOLID', + color: { r: 1, g: 0.7725490196078432, b: 0.5607843137254902 }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { r: 1, g: 0.7725490196078432, b: 0.5607843137254902 }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { r: 1, g: 0.7725490196078432, b: 0.5607843137254902 }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { r: 1, g: 0.7725490196078432, b: 0.5607843137254902 }, + }, + 'hljs-type': { + type: 'SOLID', + color: { r: 1, g: 0.7725490196078432, b: 0.5607843137254902 }, + }, + 'hljs-params': { + type: 'SOLID', + color: { r: 1, g: 0.7725490196078432, b: 0.5607843137254902 }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { r: 1, g: 0.7725490196078432, b: 0.5607843137254902 }, + }, + 'hljs-link': { + type: 'SOLID', + color: { r: 1, g: 0.7725490196078432, b: 0.5607843137254902 }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { r: 1, g: 0.9333333333333333, b: 0.6784313725490196 }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.8196078431372549, + g: 0.9450980392156862, + b: 0.6627450980392157, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.8196078431372549, + g: 0.9450980392156862, + b: 0.6627450980392157, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.8196078431372549, + g: 0.9450980392156862, + b: 0.6627450980392157, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.8196078431372549, + g: 0.9450980392156862, + b: 0.6627450980392157, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { r: 0.7333333333333333, g: 0.8549019607843137, b: 1 }, + }, + 'hljs-section': { + type: 'SOLID', + color: { r: 0.7333333333333333, g: 0.8549019607843137, b: 1 }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { r: 0.9215686274509803, g: 0.7333333333333333, b: 1 }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { r: 0.9215686274509803, g: 0.7333333333333333, b: 1 }, + }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default tomorrowNightBlue diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/tomorrowNightBright.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/tomorrowNightBright.ts new file mode 100644 index 00000000..b1622555 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/tomorrowNightBright.ts @@ -0,0 +1,243 @@ +const tomorrowNightBright = { + hljs: { + type: 'SOLID', + color: { + r: 0.9176470588235294, + g: 0.9176470588235294, + b: 0.9176470588235294, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.5882352941176471, + g: 0.596078431372549, + b: 0.5882352941176471, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.5882352941176471, + g: 0.596078431372549, + b: 0.5882352941176471, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.8352941176470589, + g: 0.3058823529411765, + b: 0.3254901960784314, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.8352941176470589, + g: 0.3058823529411765, + b: 0.3254901960784314, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.8352941176470589, + g: 0.3058823529411765, + b: 0.3254901960784314, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.8352941176470589, + g: 0.3058823529411765, + b: 0.3254901960784314, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.8352941176470589, + g: 0.3058823529411765, + b: 0.3254901960784314, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.8352941176470589, + g: 0.3058823529411765, + b: 0.3254901960784314, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.8352941176470589, + g: 0.3058823529411765, + b: 0.3254901960784314, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.8352941176470589, + g: 0.3058823529411765, + b: 0.3254901960784314, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.9058823529411765, + g: 0.5490196078431373, + b: 0.27058823529411763, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.9058823529411765, + g: 0.5490196078431373, + b: 0.27058823529411763, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.9058823529411765, + g: 0.5490196078431373, + b: 0.27058823529411763, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.9058823529411765, + g: 0.5490196078431373, + b: 0.27058823529411763, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.9058823529411765, + g: 0.5490196078431373, + b: 0.27058823529411763, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.9058823529411765, + g: 0.5490196078431373, + b: 0.27058823529411763, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.9058823529411765, + g: 0.5490196078431373, + b: 0.27058823529411763, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.9058823529411765, + g: 0.5490196078431373, + b: 0.27058823529411763, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.9058823529411765, + g: 0.7725490196078432, + b: 0.2784313725490196, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.7254901960784313, + g: 0.792156862745098, + b: 0.2901960784313726, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.7254901960784313, + g: 0.792156862745098, + b: 0.2901960784313726, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.7254901960784313, + g: 0.792156862745098, + b: 0.2901960784313726, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.7254901960784313, + g: 0.792156862745098, + b: 0.2901960784313726, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.47843137254901963, + g: 0.6509803921568628, + b: 0.8549019607843137, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.47843137254901963, + g: 0.6509803921568628, + b: 0.8549019607843137, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.7647058823529411, + g: 0.592156862745098, + b: 0.8470588235294118, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.7647058823529411, + g: 0.592156862745098, + b: 0.8470588235294118, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.9176470588235294, + g: 0.9176470588235294, + b: 0.9176470588235294, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.9176470588235294, + g: 0.9176470588235294, + b: 0.9176470588235294, + }, + }, +} +export default tomorrowNightBright diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/tomorrowNightEighties.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/tomorrowNightEighties.ts new file mode 100644 index 00000000..6cd79151 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/tomorrowNightEighties.ts @@ -0,0 +1,145 @@ +const tomorrowNightEighties = { + hljs: { type: 'SOLID', color: { r: 0.8, g: 0.8, b: 0.8 } }, + 'hljs-comment': { type: 'SOLID', color: { r: 0.6, g: 0.6, b: 0.6 } }, + 'hljs-quote': { type: 'SOLID', color: { r: 0.6, g: 0.6, b: 0.6 } }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.4666666666666667, + b: 0.47843137254901963, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.4666666666666667, + b: 0.47843137254901963, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.4666666666666667, + b: 0.47843137254901963, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.4666666666666667, + b: 0.47843137254901963, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.4666666666666667, + b: 0.47843137254901963, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.4666666666666667, + b: 0.47843137254901963, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.4666666666666667, + b: 0.47843137254901963, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.9490196078431372, + g: 0.4666666666666667, + b: 0.47843137254901963, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.5686274509803921, + b: 0.3411764705882353, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.5686274509803921, + b: 0.3411764705882353, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.5686274509803921, + b: 0.3411764705882353, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.5686274509803921, + b: 0.3411764705882353, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.5686274509803921, + b: 0.3411764705882353, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.5686274509803921, + b: 0.3411764705882353, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.5686274509803921, + b: 0.3411764705882353, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.9764705882352941, + g: 0.5686274509803921, + b: 0.3411764705882353, + }, + }, + 'hljs-attribute': { type: 'SOLID', color: { r: 1, g: 0.8, b: 0.4 } }, + 'hljs-string': { type: 'SOLID', color: { r: 0.6, g: 0.8, b: 0.6 } }, + 'hljs-symbol': { type: 'SOLID', color: { r: 0.6, g: 0.8, b: 0.6 } }, + 'hljs-bullet': { type: 'SOLID', color: { r: 0.6, g: 0.8, b: 0.6 } }, + 'hljs-addition': { type: 'SOLID', color: { r: 0.6, g: 0.8, b: 0.6 } }, + 'hljs-title': { type: 'SOLID', color: { r: 0.4, g: 0.6, b: 0.8 } }, + 'hljs-section': { type: 'SOLID', color: { r: 0.4, g: 0.6, b: 0.8 } }, + 'hljs-keyword': { type: 'SOLID', color: { r: 0.8, g: 0.6, b: 0.8 } }, + 'hljs-selector-tag': { type: 'SOLID', color: { r: 0.8, g: 0.6, b: 0.8 } }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 0.8, g: 0.8, b: 0.8 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 0.8, g: 0.8, b: 0.8 } }, +} +export default tomorrowNightEighties diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/vs.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/vs.ts new file mode 100644 index 00000000..8b03e9b0 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/vs.ts @@ -0,0 +1,145 @@ +const vs = { + hljs: { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-comment': { + type: 'SOLID', + color: { r: 0, g: 0.5019607843137255, b: 0 }, + }, + 'hljs-quote': { type: 'SOLID', color: { r: 0, g: 0.5019607843137255, b: 0 } }, + 'hljs-variable': { + type: 'SOLID', + color: { r: 0, g: 0.5019607843137255, b: 0 }, + }, + 'hljs-keyword': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-selector-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-built_in': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-name': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-tag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.6392156862745098, + g: 0.08235294117647059, + b: 0.08235294117647059, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.6392156862745098, + g: 0.08235294117647059, + b: 0.08235294117647059, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.6392156862745098, + g: 0.08235294117647059, + b: 0.08235294117647059, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.6392156862745098, + g: 0.08235294117647059, + b: 0.08235294117647059, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.6392156862745098, + g: 0.08235294117647059, + b: 0.08235294117647059, + }, + }, + 'hljs-template-tag': { + type: 'SOLID', + color: { + r: 0.6392156862745098, + g: 0.08235294117647059, + b: 0.08235294117647059, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.6392156862745098, + g: 0.08235294117647059, + b: 0.08235294117647059, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.6392156862745098, + g: 0.08235294117647059, + b: 0.08235294117647059, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.6392156862745098, + g: 0.08235294117647059, + b: 0.08235294117647059, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.16862745098039217, + g: 0.5686274509803921, + b: 0.6862745098039216, + }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { + r: 0.16862745098039217, + g: 0.5686274509803921, + b: 0.6862745098039216, + }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { + r: 0.16862745098039217, + g: 0.5686274509803921, + b: 0.6862745098039216, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.16862745098039217, + g: 0.5686274509803921, + b: 0.6862745098039216, + }, + }, + 'hljs-doctag': { + type: 'SOLID', + color: { + r: 0.5019607843137255, + g: 0.5019607843137255, + b: 0.5019607843137255, + }, + }, + 'hljs-attr': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-symbol': { + type: 'SOLID', + color: { r: 0, g: 0.6901960784313725, b: 0.9098039215686274 }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { r: 0, g: 0.6901960784313725, b: 0.9098039215686274 }, + }, + 'hljs-link': { + type: 'SOLID', + color: { r: 0, g: 0.6901960784313725, b: 0.9098039215686274 }, + }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default vs diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/vs2015.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/vs2015.ts new file mode 100644 index 00000000..9429bf30 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/vs2015.ts @@ -0,0 +1,339 @@ +const vs2015 = { + hljs: { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.8627450980392157, + b: 0.8627450980392157, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.33725490196078434, + g: 0.611764705882353, + b: 0.8392156862745098, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.33725490196078434, + g: 0.611764705882353, + b: 0.8392156862745098, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.33725490196078434, + g: 0.611764705882353, + b: 0.8392156862745098, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.33725490196078434, + g: 0.611764705882353, + b: 0.8392156862745098, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.33725490196078434, + g: 0.611764705882353, + b: 0.8392156862745098, + }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { + r: 0.3058823529411765, + g: 0.788235294117647, + b: 0.6901960784313725, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.3058823529411765, + g: 0.788235294117647, + b: 0.6901960784313725, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.7215686274509804, + g: 0.8431372549019608, + b: 0.6392156862745098, + }, + }, + 'hljs-class': { + type: 'SOLID', + color: { + r: 0.7215686274509804, + g: 0.8431372549019608, + b: 0.6392156862745098, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.8392156862745098, + g: 0.615686274509804, + b: 0.5215686274509804, + }, + }, + 'hljs-meta-string': { + type: 'SOLID', + color: { + r: 0.8392156862745098, + g: 0.615686274509804, + b: 0.5215686274509804, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { + r: 0.6039215686274509, + g: 0.3254901960784314, + b: 0.20392156862745098, + }, + }, + 'hljs-template-tag': { + type: 'SOLID', + color: { + r: 0.6039215686274509, + g: 0.3254901960784314, + b: 0.20392156862745098, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.8627450980392157, + b: 0.8627450980392157, + }, + }, + 'hljs-function': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.8627450980392157, + b: 0.8627450980392157, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.8627450980392157, + b: 0.8627450980392157, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.8627450980392157, + b: 0.8627450980392157, + }, + }, + 'hljs-formula': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.8627450980392157, + b: 0.8627450980392157, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.3411764705882353, + g: 0.6509803921568628, + b: 0.2901960784313726, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.3411764705882353, + g: 0.6509803921568628, + b: 0.2901960784313726, + }, + }, + 'hljs-doctag': { + type: 'SOLID', + color: { + r: 0.3764705882352941, + g: 0.5450980392156862, + b: 0.3058823529411765, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.6078431372549019, + g: 0.6078431372549019, + b: 0.6078431372549019, + }, + }, + 'hljs-meta-keyword': { + type: 'SOLID', + color: { + r: 0.6078431372549019, + g: 0.6078431372549019, + b: 0.6078431372549019, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.6078431372549019, + g: 0.6078431372549019, + b: 0.6078431372549019, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.7411764705882353, + g: 0.38823529411764707, + b: 0.7725490196078432, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.7411764705882353, + g: 0.38823529411764707, + b: 0.7725490196078432, + }, + }, + 'hljs-attr': { + type: 'SOLID', + color: { + r: 0.611764705882353, + g: 0.8627450980392157, + b: 0.996078431372549, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.611764705882353, + g: 0.8627450980392157, + b: 0.996078431372549, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.611764705882353, + g: 0.8627450980392157, + b: 0.996078431372549, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.8627450980392157, + b: 0.8627450980392157, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.8627450980392157, + b: 0.8627450980392157, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.8627450980392157, + b: 0.8627450980392157, + }, + }, + 'hljs-code': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.8627450980392157, + b: 0.8627450980392157, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.7294117647058823, + b: 0.49019607843137253, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.7294117647058823, + b: 0.49019607843137253, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.7294117647058823, + b: 0.49019607843137253, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.7294117647058823, + b: 0.49019607843137253, + }, + }, + 'hljs-selector-attr': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.7294117647058823, + b: 0.49019607843137253, + }, + }, + 'hljs-selector-pseudo': { + type: 'SOLID', + color: { + r: 0.8431372549019608, + g: 0.7294117647058823, + b: 0.49019607843137253, + }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.0784313725490196, + g: 0.25882352941176473, + b: 0.07058823529411765, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.8627450980392157, + b: 0.8627450980392157, + }, + }, +} +export default vs2015 diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/xcode.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/xcode.ts new file mode 100644 index 00000000..0b72d36d --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/xcode.ts @@ -0,0 +1,198 @@ +const xcode = { + hljs: { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.39215686274509803, + g: 0.2196078431372549, + b: 0.12549019607843137, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { r: 0, g: 0.4549019607843137, b: 0 }, + }, + 'hljs-quote': { type: 'SOLID', color: { r: 0, g: 0.4549019607843137, b: 0 } }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.6666666666666666, + g: 0.050980392156862744, + b: 0.5686274509803921, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.6666666666666666, + g: 0.050980392156862744, + b: 0.5686274509803921, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.6666666666666666, + g: 0.050980392156862744, + b: 0.5686274509803921, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.6666666666666666, + g: 0.050980392156862744, + b: 0.5686274509803921, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.6666666666666666, + g: 0.050980392156862744, + b: 0.5686274509803921, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.6666666666666666, + g: 0.050980392156862744, + b: 0.5686274509803921, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.24705882352941178, + g: 0.43137254901960786, + b: 0.4549019607843137, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.24705882352941178, + g: 0.43137254901960786, + b: 0.4549019607843137, + }, + }, + 'hljs-code': { + type: 'SOLID', + color: { + r: 0.7686274509803922, + g: 0.10196078431372549, + b: 0.08627450980392157, + }, + }, + 'hljs-string': { + type: 'SOLID', + color: { + r: 0.7686274509803922, + g: 0.10196078431372549, + b: 0.08627450980392157, + }, + }, + 'hljs-meta-string': { + type: 'SOLID', + color: { + r: 0.7686274509803922, + g: 0.10196078431372549, + b: 0.08627450980392157, + }, + }, + 'hljs-regexp': { + type: 'SOLID', + color: { r: 0.054901960784313725, g: 0.054901960784313725, b: 1 }, + }, + 'hljs-link': { + type: 'SOLID', + color: { r: 0.054901960784313725, g: 0.054901960784313725, b: 1 }, + }, + 'hljs-title': { + type: 'SOLID', + color: { r: 0.10980392156862745, g: 0, b: 0.8117647058823529 }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { r: 0.10980392156862745, g: 0, b: 0.8117647058823529 }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { r: 0.10980392156862745, g: 0, b: 0.8117647058823529 }, + }, + 'hljs-number': { + type: 'SOLID', + color: { r: 0.10980392156862745, g: 0, b: 0.8117647058823529 }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.39215686274509803, + g: 0.2196078431372549, + b: 0.12549019607843137, + }, + }, + 'hljs-classhljs-title': { + type: 'SOLID', + color: { r: 0.3607843137254902, g: 0.14901960784313725, b: 0.6 }, + }, + 'hljs-type': { + type: 'SOLID', + color: { r: 0.3607843137254902, g: 0.14901960784313725, b: 0.6 }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { r: 0.3607843137254902, g: 0.14901960784313725, b: 0.6 }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { r: 0.3607843137254902, g: 0.14901960784313725, b: 0.6 }, + }, + 'hljs-params': { + type: 'SOLID', + color: { r: 0.3607843137254902, g: 0.14901960784313725, b: 0.6 }, + }, + 'hljs-attr': { + type: 'SOLID', + color: { + r: 0.5137254901960784, + g: 0.4235294117647059, + b: 0.1568627450980392, + }, + }, + 'hljs-subst': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-formula': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.7294117647058823, + g: 0.9333333333333333, + b: 0.7294117647058823, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { r: 1, g: 0.7843137254901961, b: 0.7411764705882353 }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.6078431372549019, + g: 0.4392156862745098, + b: 0.24705882352941178, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.6078431372549019, + g: 0.4392156862745098, + b: 0.24705882352941178, + }, + }, + 'hljs-doctag': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-strong': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, + 'hljs-emphasis': { type: 'SOLID', color: { r: 1, g: 1, b: 1 } }, +} +export default xcode diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/xt256.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/xt256.ts new file mode 100644 index 00000000..01695640 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/xt256.ts @@ -0,0 +1,106 @@ +const xt256 = { + hljs: { + type: 'SOLID', + color: { + r: 0.9176470588235294, + g: 0.9176470588235294, + b: 0.9176470588235294, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.9176470588235294, + g: 0.9176470588235294, + b: 0.9176470588235294, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.9176470588235294, + g: 0.9176470588235294, + b: 0.9176470588235294, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.9176470588235294, + g: 0.9176470588235294, + b: 0.9176470588235294, + }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { + r: 0.9176470588235294, + g: 0.9176470588235294, + b: 0.9176470588235294, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.9176470588235294, + g: 0.9176470588235294, + b: 0.9176470588235294, + }, + }, + 'hljs-params': { + type: 'SOLID', + color: { r: 0.8549019607843137, g: 0, b: 0 }, + }, + 'hljs-literal': { type: 'SOLID', color: { r: 1, g: 0, b: 0 } }, + 'hljs-number': { type: 'SOLID', color: { r: 1, g: 0, b: 0 } }, + 'hljs-name': { type: 'SOLID', color: { r: 1, g: 0, b: 0 } }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.5882352941176471, + g: 0.596078431372549, + b: 0.5882352941176471, + }, + }, + 'hljs-selector-id': { type: 'SOLID', color: { r: 0, g: 1, b: 1 } }, + 'hljs-quote': { type: 'SOLID', color: { r: 0, g: 1, b: 1 } }, + 'hljs-template-variable': { type: 'SOLID', color: { r: 0, g: 1, b: 1 } }, + 'hljs-variable': { type: 'SOLID', color: { r: 0, g: 1, b: 1 } }, + 'hljs-title': { type: 'SOLID', color: { r: 0, g: 1, b: 1 } }, + 'hljs-selector-class': { + type: 'SOLID', + color: { r: 1, g: 0.9411764705882353, b: 0 }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { r: 1, g: 0.9411764705882353, b: 0 }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { r: 1, g: 0.9411764705882353, b: 0 }, + }, + 'hljs-string': { type: 'SOLID', color: { r: 0, g: 1, b: 0 } }, + 'hljs-bullet': { type: 'SOLID', color: { r: 0, g: 1, b: 0 } }, + 'hljs-tag': { type: 'SOLID', color: { r: 0, g: 0.058823529411764705, b: 1 } }, + 'hljs-section': { + type: 'SOLID', + color: { r: 0, g: 0.058823529411764705, b: 1 }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { r: 0, g: 0.058823529411764705, b: 1 }, + }, + 'hljs-attribute': { type: 'SOLID', color: { r: 1, g: 0, b: 1 } }, + 'hljs-built_in': { type: 'SOLID', color: { r: 1, g: 0, b: 1 } }, + 'hljs-regexp': { type: 'SOLID', color: { r: 1, g: 0, b: 1 } }, + 'hljs-link': { type: 'SOLID', color: { r: 1, g: 0, b: 1 } }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.9176470588235294, + g: 0.9176470588235294, + b: 0.9176470588235294, + }, + }, +} +export default xt256 diff --git a/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/zenburn.ts b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/zenburn.ts new file mode 100644 index 00000000..d8d9e676 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/color-schema/schemas/zenburn.ts @@ -0,0 +1,227 @@ +const zenburn = { + hljs: { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.8627450980392157, + b: 0.8627450980392157, + }, + }, + 'hljs-keyword': { + type: 'SOLID', + color: { + r: 0.8901960784313725, + g: 0.807843137254902, + b: 0.6705882352941176, + }, + }, + 'hljs-selector-tag': { + type: 'SOLID', + color: { + r: 0.8901960784313725, + g: 0.807843137254902, + b: 0.6705882352941176, + }, + }, + 'hljs-tag': { + type: 'SOLID', + color: { + r: 0.8901960784313725, + g: 0.807843137254902, + b: 0.6705882352941176, + }, + }, + 'hljs-template-tag': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.8627450980392157, + b: 0.8627450980392157, + }, + }, + 'hljs-number': { + type: 'SOLID', + color: { + r: 0.5490196078431373, + g: 0.8156862745098039, + b: 0.8274509803921568, + }, + }, + 'hljs-variable': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.8627450980392157, + b: 0.7372549019607844, + }, + }, + 'hljs-template-variable': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.8627450980392157, + b: 0.7372549019607844, + }, + }, + 'hljs-attribute': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.8627450980392157, + b: 0.7372549019607844, + }, + }, + 'hljs-literal': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.9372549019607843, + b: 0.6862745098039216, + }, + }, + 'hljs-subst': { + type: 'SOLID', + color: { + r: 0.5607843137254902, + g: 0.5607843137254902, + b: 0.5607843137254902, + }, + }, + 'hljs-title': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.9372549019607843, + b: 0.5607843137254902, + }, + }, + 'hljs-name': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.9372549019607843, + b: 0.5607843137254902, + }, + }, + 'hljs-selector-id': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.9372549019607843, + b: 0.5607843137254902, + }, + }, + 'hljs-selector-class': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.9372549019607843, + b: 0.5607843137254902, + }, + }, + 'hljs-section': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.9372549019607843, + b: 0.5607843137254902, + }, + }, + 'hljs-type': { + type: 'SOLID', + color: { + r: 0.9372549019607843, + g: 0.9372549019607843, + b: 0.5607843137254902, + }, + }, + 'hljs-symbol': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.6392156862745098, + b: 0.6392156862745098, + }, + }, + 'hljs-bullet': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.6392156862745098, + b: 0.6392156862745098, + }, + }, + 'hljs-link': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.6392156862745098, + b: 0.6392156862745098, + }, + }, + 'hljs-deletion': { + type: 'SOLID', + color: { r: 0.8, g: 0.5764705882352941, b: 0.5764705882352941 }, + }, + 'hljs-string': { + type: 'SOLID', + color: { r: 0.8, g: 0.5764705882352941, b: 0.5764705882352941 }, + }, + 'hljs-built_in': { + type: 'SOLID', + color: { r: 0.8, g: 0.5764705882352941, b: 0.5764705882352941 }, + }, + 'hljs-builtin-name': { + type: 'SOLID', + color: { r: 0.8, g: 0.5764705882352941, b: 0.5764705882352941 }, + }, + 'hljs-addition': { + type: 'SOLID', + color: { + r: 0.4980392156862745, + g: 0.6235294117647059, + b: 0.4980392156862745, + }, + }, + 'hljs-comment': { + type: 'SOLID', + color: { + r: 0.4980392156862745, + g: 0.6235294117647059, + b: 0.4980392156862745, + }, + }, + 'hljs-quote': { + type: 'SOLID', + color: { + r: 0.4980392156862745, + g: 0.6235294117647059, + b: 0.4980392156862745, + }, + }, + 'hljs-meta': { + type: 'SOLID', + color: { + r: 0.4980392156862745, + g: 0.6235294117647059, + b: 0.4980392156862745, + }, + }, + 'hljs-emphasis': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.8627450980392157, + b: 0.8627450980392157, + }, + }, + 'hljs-strong': { + type: 'SOLID', + color: { + r: 0.8627450980392157, + g: 0.8627450980392157, + b: 0.8627450980392157, + }, + }, +} +export default zenburn diff --git a/packages/app-design-text-code-syntax-hightlight/components/highlight-executor.tsx b/packages/app-design-text-code-syntax-hightlight/components/highlight-executor.tsx new file mode 100644 index 00000000..672ab144 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/components/highlight-executor.tsx @@ -0,0 +1,67 @@ +import * as React from "react"; +import { SchemaAndLanguage } from "../models/schema-and-language"; +import { colorschema_list } from "../color-schema"; +import { language_list } from "../language"; +import { set_syntax_highlight_preferences } from "../preferences"; +import Select from "./select"; +import { fromApp } from "../__plugin/event"; +import { BlackButtonStyle } from "@ui/core/button-style"; +import styled from "@emotion/styled"; + +interface Props { + schemaAndLanguage: SchemaAndLanguage; + setColorSchema: (event) => void; + setLanguage: (event) => void; +} + +const runHighlight = (schemaAndLanguage: SchemaAndLanguage) => { + fromApp({ type: "CHANGE_COLOR", schemaAndLanguage }); + set_syntax_highlight_preferences(schemaAndLanguage); +}; + +const HighlightExecutor: React.FC = ({ + schemaAndLanguage, + setColorSchema, + setLanguage, +}: Props) => { + return ( +
    +
    +
    + { + setLanguage(event); + }} + /> +
    +
    + +
    + ); +}; + +const Button = styled.button` + ${BlackButtonStyle} + width: 100%; +`; + +export default HighlightExecutor; diff --git a/packages/app-design-text-code-syntax-hightlight/components/select.tsx b/packages/app-design-text-code-syntax-hightlight/components/select.tsx new file mode 100644 index 00000000..51b5f0c3 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/components/select.tsx @@ -0,0 +1,65 @@ +import * as React from "react"; +import SelectBase from "@material-ui/core/Select"; +import MenuItem from "@material-ui/core/MenuItem"; +import styled from "@emotion/styled"; +import withStyles from "@material-ui/core/styles/withStyles"; +import InputBase from "@material-ui/core/InputBase"; + +interface Props { + label: string; + current: string; + collection: string[]; + onChange: (event) => void; +} + +const BootstrapInput = withStyles((theme) => ({ + root: { + "label + &": { + marginTop: theme.spacing(3), + }, + }, + input: { + fontSize: 14, + }, +}))(InputBase); + +const Select: React.FC = ({ + label, + current, + collection, + onChange, +}: Props) => { + return ( + { + onChange(event); + }} + input={} + > + {collection.map((item, index) => { + return item == current ? ( + + {item} + + ) : ( + + {item} + + ); + })} + + ); +}; + +const StyledSelect = styled(SelectBase)` + width: 100% !important; + &.root { + font-size: 14px; + font-weight: 400; + line-height: 17px; + } +`; + +export default Select; diff --git a/packages/app-design-text-code-syntax-hightlight/design-text-code-syntax-highligh-screen.css b/packages/app-design-text-code-syntax-hightlight/design-text-code-syntax-highligh-screen.css new file mode 100644 index 00000000..904d8bb3 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/design-text-code-syntax-highligh-screen.css @@ -0,0 +1,26 @@ +.box { + margin: 8px 0 16px; +} + +.flex { + display: flex; + padding-bottom: 8px; +} + +.flexChild:first-child { + width: 50%; + padding-right: 4px; +} + +.flexChild:last-child { + width: 50%; + padding-left: 4px; +} + +.boxPadding { + padding: 16px 0; +} + +.cursor { + cursor: pointer; +} diff --git a/packages/app-design-text-code-syntax-hightlight/design-text-code-syntax-highligh-screen.tsx b/packages/app-design-text-code-syntax-hightlight/design-text-code-syntax-highligh-screen.tsx new file mode 100644 index 00000000..0d172280 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/design-text-code-syntax-highligh-screen.tsx @@ -0,0 +1,44 @@ +import React, { useState, useEffect } from "react"; +import HighlightExecutor from "./components/highlight-executor"; +import { SchemaAndLanguage } from "./models"; +import { get_syntax_highlight_preferences } from "./preferences"; +import "./design-text-code-syntax-highligh-screen.css"; + +export function DesignTextCdoeSyntaxHighligherScreen() { + const [schemaAndLanguage, setSchemaAndLanguage] = useState( + { + language: "typescript", + colorSchema: "vs2015", + } + ); + + useEffect(() => { + get_syntax_highlight_preferences().then((d) => { + if (d) { + setSchemaAndLanguage(d); + } + }); + }, []); + + return ( +
    + { + setSchemaAndLanguage( + Object.assign(schemaAndLanguage, { + colorSchema: event.target.value, + }) + ); + }} + setLanguage={(event) => { + setSchemaAndLanguage( + Object.assign(schemaAndLanguage, { + language: event.target.value, + }) + ); + }} + /> +
    + ); +} diff --git a/packages/app-design-text-code-syntax-hightlight/index.ts b/packages/app-design-text-code-syntax-hightlight/index.ts index e69de29b..1e422b1c 100644 --- a/packages/app-design-text-code-syntax-hightlight/index.ts +++ b/packages/app-design-text-code-syntax-hightlight/index.ts @@ -0,0 +1 @@ +export { DesignTextCdoeSyntaxHighligherScreen } from "./design-text-code-syntax-highligh-screen"; diff --git a/packages/app-design-text-code-syntax-hightlight/language/index.ts b/packages/app-design-text-code-syntax-hightlight/language/index.ts new file mode 100644 index 00000000..e53ffb62 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/language/index.ts @@ -0,0 +1 @@ +export * from "./language-list"; diff --git a/packages/app-design-text-code-syntax-hightlight/language/language-list.ts b/packages/app-design-text-code-syntax-hightlight/language/language-list.ts new file mode 100644 index 00000000..fde3ddd9 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/language/language-list.ts @@ -0,0 +1,187 @@ +export const language_list = [ + "1c", + "abnf", + "accesslog", + "actionscript", + "ada", + "angelscript", + "apache", + "applescript", + "arcade", + "cpp", + "arduino", + "armasm", + "xml", + "asciidoc", + "aspectj", + "autohotkey", + "autoit", + "avrasm", + "awk", + "axapta", + "bash", + "basic", + "bnf", + "brainfuck", + "cal", + "capnproto", + "ceylon", + "clean", + "clojure", + "clojure-repl", + "cmake", + "coffeescript", + "coq", + "cos", + "crmsh", + "crystal", + "cs", + "csp", + "css", + "d", + "markdown", + "dart", + "delphi", + "diff", + "django", + "dns", + "dockerfile", + "dos", + "dsconfig", + "dts", + "dust", + "ebnf", + "elixir", + "elm", + "ruby", + "erb", + "erlang-repl", + "erlang", + "excel", + "fix", + "flix", + "fortran", + "fsharp", + "gams", + "gauss", + "gcode", + "gherkin", + "glsl", + "gml", + "go", + "golo", + "gradle", + "groovy", + "haml", + "handlebars", + "haskell", + "haxe", + "hsp", + "htmlbars", + "http", + "hy", + "inform7", + "ini", + "irpf90", + "isbl", + "java", + "javascript", + "jboss-cli", + "json", + "julia", + "julia-repl", + "kotlin", + "lasso", + "ldif", + "leaf", + "less", + "lisp", + "livecodeserver", + "livescript", + "llvm", + "lsl", + "lua", + "makefile", + "mathematica", + "matlab", + "maxima", + "mel", + "mercury", + "mipsasm", + "mizar", + "perl", + "mojolicious", + "monkey", + "moonscript", + "n1ql", + "nginx", + "nimrod", + "nix", + "nsis", + "objectivec", + "ocaml", + "openscad", + "oxygene", + "parser3", + "pf", + "pgsql", + "php", + "plaintext", + "pony", + "powershell", + "processing", + "profile", + "prolog", + "properties", + "protobuf", + "puppet", + "purebasic", + "python", + "q", + "qml", + "r", + "reasonml", + "rib", + "roboconf", + "routeros", + "rsl", + "ruleslanguage", + "rust", + "sas", + "scala", + "scheme", + "scilab", + "scss", + "shell", + "smali", + "smalltalk", + "sml", + "sqf", + "sql", + "stan", + "stata", + "step21", + "stylus", + "subunit", + "swift", + "taggerscript", + "yaml", + "tap", + "tcl", + "tex", + "thrift", + "tp", + "twig", + "typescript", + "vala", + "vbnet", + "vbscript", + "vbscript-html", + "verilog", + "vhdl", + "vim", + "x86asm", + "xl", + "xquery", + "zephir", +]; diff --git a/packages/app-design-text-code-syntax-hightlight/models/index.ts b/packages/app-design-text-code-syntax-hightlight/models/index.ts new file mode 100644 index 00000000..7412983b --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/models/index.ts @@ -0,0 +1 @@ +export * from "./schema-and-language"; diff --git a/packages/app-design-text-code-syntax-hightlight/models/schema-and-language.ts b/packages/app-design-text-code-syntax-hightlight/models/schema-and-language.ts new file mode 100644 index 00000000..108085bf --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/models/schema-and-language.ts @@ -0,0 +1,7 @@ +export interface SchemaAndLanguage { + language: string; + colorSchema: string; +} + +export type FavoriteBookmarks = SchemaAndLanguage[]; +export type CurrentPreference = SchemaAndLanguage; diff --git a/packages/app-design-text-code-syntax-hightlight/package.json b/packages/app-design-text-code-syntax-hightlight/package.json index 12cc251a..605f16bd 100644 --- a/packages/app-design-text-code-syntax-hightlight/package.json +++ b/packages/app-design-text-code-syntax-hightlight/package.json @@ -3,5 +3,13 @@ "version": "0.0.0", "description": "code syntax highlighter for design texts", "private": false, - "license": "BSD-3-Clause" + "license": "BSD-3-Clause", + "dependencies": { + "highlight.js": "9.15.10", + "xmldom": "^0.6.0", + "xpath": "^0.0.32" + }, + "devDependencies": { + "@types/highlight.js": "9.12.3" + } } \ No newline at end of file diff --git a/packages/app-design-text-code-syntax-hightlight/preferences/index.ts b/packages/app-design-text-code-syntax-hightlight/preferences/index.ts new file mode 100644 index 00000000..26e7af15 --- /dev/null +++ b/packages/app-design-text-code-syntax-hightlight/preferences/index.ts @@ -0,0 +1,27 @@ +import { SchemaAndLanguage, FavoriteBookmarks } from "../models"; +import { PluginSdk } from "@plugin-sdk/app"; + +const current_schema_and_language_setting_key = + "highlighter/current-schema-and-language"; +const bookmarks_store_key = "highlighter/favorite-settings-bookmark"; + +export async function get_syntax_highlight_preferences() { + return await PluginSdk.getItem( + current_schema_and_language_setting_key + ); +} + +export async function set_syntax_highlight_preferences(d: SchemaAndLanguage) { + return await PluginSdk.setItem( + current_schema_and_language_setting_key, + d + ); +} + +export async function get_favorite_bookmarks() { + return await PluginSdk.getItem(bookmarks_store_key); +} + +export function set_favorite_bookmarks(l: FavoriteBookmarks) { + PluginSdk.setItem(bookmarks_store_key, l); +} diff --git a/web/next.config.js b/web/next.config.js index 21e750e5..190e59be 100644 --- a/web/next.config.js +++ b/web/next.config.js @@ -18,6 +18,7 @@ const withTM = require("next-transpile-modules")([ "@app/button-maker", "@app/data-mapper", "@app/design-lint", + "@app/design-text-code-syntax-highlight", "@app/icons-loader", "@app/meta-editor", "@app/meta-editor", diff --git a/yarn.lock b/yarn.lock index 0e5c0d42..e4ca5e88 100644 --- a/yarn.lock +++ b/yarn.lock @@ -964,7 +964,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": +"@babel/runtime@^7.1.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.13", "@babel/runtime@^7.13.10", "@babel/runtime@^7.14.0", "@babel/runtime@^7.3.1", "@babel/runtime@^7.4.4", "@babel/runtime@^7.5.5", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.3", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": version "7.15.3" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.3.tgz#2e1c2880ca118e5b2f9988322bd8a7656a32502b" integrity sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA== @@ -995,7 +995,7 @@ debug "^4.1.0" globals "^11.1.0" -"@babel/types@7.15.0", "@babel/types@^7.14.8", "@babel/types@^7.14.9", "@babel/types@^7.15.0": +"@babel/types@7.15.0", "@babel/types@^7.0.0", "@babel/types@^7.14.5", "@babel/types@^7.14.8", "@babel/types@^7.14.9", "@babel/types@^7.15.0", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4": version "7.15.0" resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.0.tgz#61af11f2286c4e9c69ca8deb5f4375a73c72dcbd" integrity sha512-OBvfqnllOIdX4ojTHpwZbpvz4j3EWyjkZEdmjH0/cgsd6QOdSgU8rLSk6ard/pcW7rlmjdVSX/AWOaORR1uNOQ== @@ -1003,14 +1003,6 @@ "@babel/helper-validator-identifier" "^7.14.9" to-fast-properties "^2.0.0" -"@babel/types@^7.0.0", "@babel/types@^7.14.5", "@babel/types@^7.3.0", "@babel/types@^7.3.3", "@babel/types@^7.4.4": - version "7.14.5" - resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.14.5.tgz#3bb997ba829a2104cedb20689c4a5b8121d383ff" - integrity sha512-M/NzBpEL95I5Hh4dwhin5JlE7EzO5PHMAuzjxss3tiOBD46KfQvVedN/3jEPZvdRvtsK2222XfdHogNIttFgcg== - dependencies: - "@babel/helper-validator-identifier" "^7.14.5" - to-fast-properties "^2.0.0" - "@base-sdk/core@0.1.0": version "0.1.0" resolved "https://registry.yarnpkg.com/@base-sdk/core/-/core-0.1.0.tgz#865eb7373b77d367dd57dc7660452a889d6bb139" @@ -1179,9 +1171,9 @@ integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA== "@figma/plugin-typings@^1.19.3": - version "1.30.0" - resolved "https://registry.yarnpkg.com/@figma/plugin-typings/-/plugin-typings-1.30.0.tgz#2c71b99d0312d2859130d2d366f096acd88babe6" - integrity sha512-KQQPrsUNoZKF9zUG6YvaQk528/LinTzjxCu4eoyOFhx10jdlOqvgLEU7hbVZZxtbKcEFjhUiC3edc185kfCKNw== + version "1.33.0" + resolved "https://registry.yarnpkg.com/@figma/plugin-typings/-/plugin-typings-1.33.0.tgz#dd9d22aaec1126b6cba73079c9d0da8e2de890c4" + integrity sha512-k0YazDJqo5daYznnH+PKJJ32MGv8ftimFp1x+flH4k4lFwtH8UQ/tUGFBClZHDXZWX3rdr1GvUzhbUMdZhN3ug== "@firebase/analytics-types@0.4.0": version "0.4.0" @@ -1436,9 +1428,9 @@ "@hapi/hoek" "9.x.x" "@hapi/boom@9.x.x": - version "9.1.3" - resolved "https://registry.yarnpkg.com/@hapi/boom/-/boom-9.1.3.tgz#22cad56e39b7a4819161a99b1db19eaaa9b6cc6e" - integrity sha512-RlrGyZ603hE/eRTZtTltocRm50HHmrmL3kGOP0SQ9MasazlW1mt/fkv4C5P/6rnpFXjwld/POFX1C8tMZE3ldg== + version "9.1.4" + resolved "https://registry.yarnpkg.com/@hapi/boom/-/boom-9.1.4.tgz#1f9dad367c6a7da9f8def24b4a986fc5a7bd9db6" + integrity sha512-Ls1oH8jaN1vNsqcaHVYJrKmgMcKsC1wcp8bujvXrHaAqD2iDYq3HoOwsxwo09Cuda5R5nC0o0IxlrlTuvPuzSw== dependencies: "@hapi/hoek" "9.x.x" @@ -1463,94 +1455,94 @@ resolved "https://registry.yarnpkg.com/@istanbuljs/schema/-/schema-0.1.3.tgz#e45e384e4b8ec16bce2fd903af78450f6bf7ec98" integrity sha512-ZXRY4jNvVgSVQ8DL3LTcakaAtXwTVUxE81hslsyD2AtoXW/wVob10HkOJ1X/pAlcI7D+2YoZKg5do8G/w6RYgA== -"@jest/console@^27.0.6": - version "27.0.6" - resolved "https://registry.yarnpkg.com/@jest/console/-/console-27.0.6.tgz#3eb72ea80897495c3d73dd97aab7f26770e2260f" - integrity sha512-fMlIBocSHPZ3JxgWiDNW/KPj6s+YRd0hicb33IrmelCcjXo/pXPwvuiKFmZz+XuqI/1u7nbUK10zSsWL/1aegg== +"@jest/console@^27.1.0": + version "27.1.0" + resolved "https://registry.yarnpkg.com/@jest/console/-/console-27.1.0.tgz#de13b603cb1d389b50c0dc6296e86e112381e43c" + integrity sha512-+Vl+xmLwAXLNlqT61gmHEixeRbS4L8MUzAjtpBCOPWH+izNI/dR16IeXjkXJdRtIVWVSf9DO1gdp67B1XorZhQ== dependencies: - "@jest/types" "^27.0.6" + "@jest/types" "^27.1.0" "@types/node" "*" chalk "^4.0.0" - jest-message-util "^27.0.6" - jest-util "^27.0.6" + jest-message-util "^27.1.0" + jest-util "^27.1.0" slash "^3.0.0" -"@jest/core@^27.0.6": - version "27.0.6" - resolved "https://registry.yarnpkg.com/@jest/core/-/core-27.0.6.tgz#c5f642727a0b3bf0f37c4b46c675372d0978d4a1" - integrity sha512-SsYBm3yhqOn5ZLJCtccaBcvD/ccTLCeuDv8U41WJH/V1MW5eKUkeMHT9U+Pw/v1m1AIWlnIW/eM2XzQr0rEmow== - dependencies: - "@jest/console" "^27.0.6" - "@jest/reporters" "^27.0.6" - "@jest/test-result" "^27.0.6" - "@jest/transform" "^27.0.6" - "@jest/types" "^27.0.6" +"@jest/core@^27.1.0": + version "27.1.0" + resolved "https://registry.yarnpkg.com/@jest/core/-/core-27.1.0.tgz#622220f18032f5869e579cecbe744527238648bf" + integrity sha512-3l9qmoknrlCFKfGdrmiQiPne+pUR4ALhKwFTYyOeKw6egfDwJkO21RJ1xf41rN8ZNFLg5W+w6+P4fUqq4EMRWA== + dependencies: + "@jest/console" "^27.1.0" + "@jest/reporters" "^27.1.0" + "@jest/test-result" "^27.1.0" + "@jest/transform" "^27.1.0" + "@jest/types" "^27.1.0" "@types/node" "*" ansi-escapes "^4.2.1" chalk "^4.0.0" emittery "^0.8.1" exit "^0.1.2" graceful-fs "^4.2.4" - jest-changed-files "^27.0.6" - jest-config "^27.0.6" - jest-haste-map "^27.0.6" - jest-message-util "^27.0.6" + jest-changed-files "^27.1.0" + jest-config "^27.1.0" + jest-haste-map "^27.1.0" + jest-message-util "^27.1.0" jest-regex-util "^27.0.6" - jest-resolve "^27.0.6" - jest-resolve-dependencies "^27.0.6" - jest-runner "^27.0.6" - jest-runtime "^27.0.6" - jest-snapshot "^27.0.6" - jest-util "^27.0.6" - jest-validate "^27.0.6" - jest-watcher "^27.0.6" + jest-resolve "^27.1.0" + jest-resolve-dependencies "^27.1.0" + jest-runner "^27.1.0" + jest-runtime "^27.1.0" + jest-snapshot "^27.1.0" + jest-util "^27.1.0" + jest-validate "^27.1.0" + jest-watcher "^27.1.0" micromatch "^4.0.4" p-each-series "^2.1.0" rimraf "^3.0.0" slash "^3.0.0" strip-ansi "^6.0.0" -"@jest/environment@^27.0.6": - version "27.0.6" - resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-27.0.6.tgz#ee293fe996db01d7d663b8108fa0e1ff436219d2" - integrity sha512-4XywtdhwZwCpPJ/qfAkqExRsERW+UaoSRStSHCCiQTUpoYdLukj+YJbQSFrZjhlUDRZeNiU9SFH0u7iNimdiIg== +"@jest/environment@^27.1.0": + version "27.1.0" + resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-27.1.0.tgz#c7224a67004759ec203d8fa44e8bc0db93f66c44" + integrity sha512-wRp50aAMY2w1U2jP1G32d6FUVBNYqmk8WaGkiIEisU48qyDV0WPtw3IBLnl7orBeggveommAkuijY+RzVnNDOQ== dependencies: - "@jest/fake-timers" "^27.0.6" - "@jest/types" "^27.0.6" + "@jest/fake-timers" "^27.1.0" + "@jest/types" "^27.1.0" "@types/node" "*" - jest-mock "^27.0.6" + jest-mock "^27.1.0" -"@jest/fake-timers@^27.0.6": - version "27.0.6" - resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-27.0.6.tgz#cbad52f3fe6abe30e7acb8cd5fa3466b9588e3df" - integrity sha512-sqd+xTWtZ94l3yWDKnRTdvTeZ+A/V7SSKrxsrOKSqdyddb9CeNRF8fbhAU0D7ZJBpTTW2nbp6MftmKJDZfW2LQ== +"@jest/fake-timers@^27.1.0": + version "27.1.0" + resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-27.1.0.tgz#c0b343d8a16af17eab2cb6862e319947c0ea2abe" + integrity sha512-22Zyn8il8DzpS+30jJNVbTlm7vAtnfy1aYvNeOEHloMlGy1PCYLHa4PWlSws0hvNsMM5bON6GISjkLoQUV3oMA== dependencies: - "@jest/types" "^27.0.6" + "@jest/types" "^27.1.0" "@sinonjs/fake-timers" "^7.0.2" "@types/node" "*" - jest-message-util "^27.0.6" - jest-mock "^27.0.6" - jest-util "^27.0.6" + jest-message-util "^27.1.0" + jest-mock "^27.1.0" + jest-util "^27.1.0" -"@jest/globals@^27.0.6": - version "27.0.6" - resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-27.0.6.tgz#48e3903f99a4650673d8657334d13c9caf0e8f82" - integrity sha512-DdTGCP606rh9bjkdQ7VvChV18iS7q0IMJVP1piwTWyWskol4iqcVwthZmoJEf7obE1nc34OpIyoVGPeqLC+ryw== +"@jest/globals@^27.1.0": + version "27.1.0" + resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-27.1.0.tgz#e093a49c718dd678a782c197757775534c88d3f2" + integrity sha512-73vLV4aNHAlAgjk0/QcSIzzCZSqVIPbmFROJJv9D3QUR7BI4f517gVdJpSrCHxuRH3VZFhe0yGG/tmttlMll9g== dependencies: - "@jest/environment" "^27.0.6" - "@jest/types" "^27.0.6" - expect "^27.0.6" + "@jest/environment" "^27.1.0" + "@jest/types" "^27.1.0" + expect "^27.1.0" -"@jest/reporters@^27.0.6": - version "27.0.6" - resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-27.0.6.tgz#91e7f2d98c002ad5df94d5b5167c1eb0b9fd5b00" - integrity sha512-TIkBt09Cb2gptji3yJXb3EE+eVltW6BjO7frO7NEfjI9vSIYoISi5R3aI3KpEDXlB1xwB+97NXIqz84qYeYsfA== +"@jest/reporters@^27.1.0": + version "27.1.0" + resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-27.1.0.tgz#02ed1e6601552c2f6447378533f77aad002781d4" + integrity sha512-5T/zlPkN2HnK3Sboeg64L5eC8iiaZueLpttdktWTJsvALEtP2YMkC5BQxwjRWQACG9SwDmz+XjjkoxXUDMDgdw== dependencies: "@bcoe/v8-coverage" "^0.2.3" - "@jest/console" "^27.0.6" - "@jest/test-result" "^27.0.6" - "@jest/transform" "^27.0.6" - "@jest/types" "^27.0.6" + "@jest/console" "^27.1.0" + "@jest/test-result" "^27.1.0" + "@jest/transform" "^27.1.0" + "@jest/types" "^27.1.0" chalk "^4.0.0" collect-v8-coverage "^1.0.0" exit "^0.1.2" @@ -1561,10 +1553,10 @@ istanbul-lib-report "^3.0.0" istanbul-lib-source-maps "^4.0.0" istanbul-reports "^3.0.2" - jest-haste-map "^27.0.6" - jest-resolve "^27.0.6" - jest-util "^27.0.6" - jest-worker "^27.0.6" + jest-haste-map "^27.1.0" + jest-resolve "^27.1.0" + jest-util "^27.1.0" + jest-worker "^27.1.0" slash "^3.0.0" source-map "^0.6.0" string-length "^4.0.1" @@ -1580,41 +1572,41 @@ graceful-fs "^4.2.4" source-map "^0.6.0" -"@jest/test-result@^27.0.6": - version "27.0.6" - resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-27.0.6.tgz#3fa42015a14e4fdede6acd042ce98c7f36627051" - integrity sha512-ja/pBOMTufjX4JLEauLxE3LQBPaI2YjGFtXexRAjt1I/MbfNlMx0sytSX3tn5hSLzQsR3Qy2rd0hc1BWojtj9w== +"@jest/test-result@^27.1.0": + version "27.1.0" + resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-27.1.0.tgz#9345ae5f97f6a5287af9ebd54716cd84331d42e8" + integrity sha512-Aoz00gpDL528ODLghat3QSy6UBTD5EmmpjrhZZMK/v1Q2/rRRqTGnFxHuEkrD4z/Py96ZdOHxIWkkCKRpmnE1A== dependencies: - "@jest/console" "^27.0.6" - "@jest/types" "^27.0.6" + "@jest/console" "^27.1.0" + "@jest/types" "^27.1.0" "@types/istanbul-lib-coverage" "^2.0.0" collect-v8-coverage "^1.0.0" -"@jest/test-sequencer@^27.0.6": - version "27.0.6" - resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-27.0.6.tgz#80a913ed7a1130545b1cd777ff2735dd3af5d34b" - integrity sha512-bISzNIApazYOlTHDum9PwW22NOyDa6VI31n6JucpjTVM0jD6JDgqEZ9+yn575nDdPF0+4csYDxNNW13NvFQGZA== +"@jest/test-sequencer@^27.1.0": + version "27.1.0" + resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-27.1.0.tgz#04e8b3bd735570d3d48865e74977a14dc99bff2d" + integrity sha512-lnCWawDr6Z1DAAK9l25o3AjmKGgcutq1iIbp+hC10s/HxnB8ZkUsYq1FzjOoxxZ5hW+1+AthBtvS4x9yno3V1A== dependencies: - "@jest/test-result" "^27.0.6" + "@jest/test-result" "^27.1.0" graceful-fs "^4.2.4" - jest-haste-map "^27.0.6" - jest-runtime "^27.0.6" + jest-haste-map "^27.1.0" + jest-runtime "^27.1.0" -"@jest/transform@^27.0.6": - version "27.0.6" - resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-27.0.6.tgz#189ad7107413208f7600f4719f81dd2f7278cc95" - integrity sha512-rj5Dw+mtIcntAUnMlW/Vju5mr73u8yg+irnHwzgtgoeI6cCPOvUwQ0D1uQtc/APmWgvRweEb1g05pkUpxH3iCA== +"@jest/transform@^27.1.0": + version "27.1.0" + resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-27.1.0.tgz#962e385517e3d1f62827fa39c305edcc3ca8544b" + integrity sha512-ZRGCA2ZEVJ00ubrhkTG87kyLbN6n55g1Ilq0X9nJb5bX3MhMp3O6M7KG+LvYu+nZRqG5cXsQnJEdZbdpTAV8pQ== dependencies: "@babel/core" "^7.1.0" - "@jest/types" "^27.0.6" + "@jest/types" "^27.1.0" babel-plugin-istanbul "^6.0.0" chalk "^4.0.0" convert-source-map "^1.4.0" fast-json-stable-stringify "^2.0.0" graceful-fs "^4.2.4" - jest-haste-map "^27.0.6" + jest-haste-map "^27.1.0" jest-regex-util "^27.0.6" - jest-util "^27.0.6" + jest-util "^27.1.0" micromatch "^4.0.4" pirates "^4.0.1" slash "^3.0.0" @@ -1632,10 +1624,10 @@ "@types/yargs" "^15.0.0" chalk "^4.0.0" -"@jest/types@^27.0.6": - version "27.0.6" - resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.0.6.tgz#9a992bc517e0c49f035938b8549719c2de40706b" - integrity sha512-aSquT1qa9Pik26JK5/3rvnYb4bGtm1VFNesHKmNTwmPIgOrixvhL2ghIvFRNEpzy3gU+rUgjIF/KodbkFAl++g== +"@jest/types@^27.1.0": + version "27.1.0" + resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.1.0.tgz#674a40325eab23c857ebc0689e7e191a3c5b10cc" + integrity sha512-pRP5cLIzN7I7Vp6mHKRSaZD7YpBTK7hawx5si8trMKqk4+WOdK8NEKOTO2G8PKWD1HbKMVckVB6/XHh/olhf2g== dependencies: "@types/istanbul-lib-coverage" "^2.0.0" "@types/istanbul-reports" "^3.0.0" @@ -1837,9 +1829,9 @@ "@otplib/plugin-thirty-two" "^12.0.1" "@popperjs/core@^2.8.3": - version "2.9.3" - resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.9.3.tgz#8b68da1ebd7fc603999cf6ebee34a4899a14b88e" - integrity sha512-xDu17cEfh7Kid/d95kB6tZsLOmSWKCZKtprnhVepjsSaCij+lM3mItSJDuuHDMbCWTh8Ejmebwb+KONcCJ0eXQ== + version "2.10.0" + resolved "https://registry.yarnpkg.com/@popperjs/core/-/core-2.10.0.tgz#6f2f845cbb8f8f897236d9bf221379f14429c608" + integrity sha512-QWvCHtYwNIR3C/mxW9jGzOu1gbaZkq/6is2OedayPH7HsxI4CVuVzAZ1PmxRElXLwwwCN7aMjRhxtTAGLEZ8IQ== "@protobufjs/aspromise@^1.1.1", "@protobufjs/aspromise@^1.1.2": version "1.1.2" @@ -2076,12 +2068,17 @@ "@types/node" "*" "@types/hast@^2.0.0": - version "2.3.2" - resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.2.tgz#236201acca9e2695e42f713d7dd4f151dc2982e4" - integrity sha512-Op5W7jYgZI7AWKY5wQ0/QNMzQM7dGQPyW1rXKNiymVCy5iTfdPuGu4HhYNOM2sIv8gUfIuIdcYlXmAepwaowow== + version "2.3.4" + resolved "https://registry.yarnpkg.com/@types/hast/-/hast-2.3.4.tgz#8aa5ef92c117d20d974a82bdfb6a648b08c0bafc" + integrity sha512-wLEm0QvaoawEDoTRwzTXp4b4jpwiJDvR5KMnFnVodm3scufTlBOWRD6N1OBf9TZMhjlNsSfcO5V+7AF4+Vy+9g== dependencies: "@types/unist" "*" +"@types/highlight.js@9.12.3": + version "9.12.3" + resolved "https://registry.yarnpkg.com/@types/highlight.js/-/highlight.js-9.12.3.tgz#b672cfaac25cbbc634a0fd92c515f66faa18dbca" + integrity sha512-pGF/zvYOACZ/gLGWdQH8zSwteQS1epp68yRcVLJMgUck/MjEn/FBYmPub9pXT8C1e4a8YZfHo1CKyV8q1vKUnQ== + "@types/history@*": version "4.7.9" resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.9.tgz#1cfb6d60ef3822c589f18e70f8b12f9a28ce8724" @@ -2135,24 +2132,19 @@ integrity sha512-Klz949h02Gz2uZCMGwDUSDS1YBlTdDDgbWHi+81l29tQALUtvz4rAYi5uoVhE5Lagoq6DeqAUlbrHvW/mXDgdQ== "@types/node@*", "@types/node@>=12.12.47", "@types/node@>=13.7.0", "@types/node@^16.3.3": - version "16.6.1" - resolved "https://registry.yarnpkg.com/@types/node/-/node-16.6.1.tgz#aee62c7b966f55fc66c7b6dfa1d58db2a616da61" - integrity sha512-Sr7BhXEAer9xyGuCN3Ek9eg9xPviCF2gfu9kTfuU2HkTVAMYSDeX40fvpmo72n5nansg3nsBjuQBrsS28r+NUw== - -"@types/node@^14.11.8": - version "14.17.12" - resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.12.tgz#7a31f720b85a617e54e42d24c4ace136601656c7" - integrity sha512-vhUqgjJR1qxwTWV5Ps5txuy2XMdf7Fw+OrdChRboy8BmWUPkckOhphaohzFG6b8DW7CrxaBMdrdJ47SYFq1okw== + version "16.7.10" + resolved "https://registry.yarnpkg.com/@types/node/-/node-16.7.10.tgz#7aa732cc47341c12a16b7d562f519c2383b6d4fc" + integrity sha512-S63Dlv4zIPb8x6MMTgDq5WWRJQe56iBEY0O3SOFA9JrRienkOVDXSXBjjJw6HTNQYSE2JI6GMCR6LVbIMHJVvA== -"@types/node@^14.14.20": - version "14.17.9" - resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.9.tgz#b97c057e6138adb7b720df2bd0264b03c9f504fd" - integrity sha512-CMjgRNsks27IDwI785YMY0KLt3co/c0cQ5foxHYv/shC2w8oOnVwz5Ubq1QG5KzrcW+AXk6gzdnxIkDnTvzu3g== +"@types/node@^14.11.8", "@types/node@^14.14.20": + version "14.17.14" + resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.14.tgz#6fda9785b41570eb628bac27be4b602769a3f938" + integrity sha512-rsAj2u8Xkqfc332iXV12SqIsjVi07H479bOP4q94NAcjzmAvapumEhuVIt53koEf7JFrpjgNKjBga5Pnn/GL8A== "@types/node@^15.12.1", "@types/node@^15.6.0": - version "15.14.7" - resolved "https://registry.yarnpkg.com/@types/node/-/node-15.14.7.tgz#29fea9a5b14e2b75c19028e1c7a32edd1e89fe92" - integrity sha512-FA45p37/mLhpebgbPWWCKfOisTjxGK9lwcHlJ6XVLfu3NgfcazOJHdYUZCWPMK8QX4LhNZdmfo6iMz9FqpUbaw== + version "15.14.9" + resolved "https://registry.yarnpkg.com/@types/node/-/node-15.14.9.tgz#bc43c990c3c9be7281868bbc7b8fdd6e2b57adfa" + integrity sha512-qjd88DrCxupx/kJD5yQgZdcYKZKSIGBVDIBE1/LTGcNm3d2Np/jxojkdePDdfnBHJc5W7vSMpbJ1aB7p/Py69A== "@types/parse-json@^4.0.0": version "4.0.0" @@ -2205,28 +2197,28 @@ dependencies: "@types/react" "*" -"@types/react@*", "@types/react@17.0.18", "@types/react@^17.0.3": - version "17.0.18" - resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.18.tgz#4109cbbd901be9582e5e39e3d77acd7b66bb7fbe" - integrity sha512-YTLgu7oS5zvSqq49X5Iue5oAbVGhgPc5Au29SJC4VeE17V6gASoOxVkUDy9pXFMRFxCWCD9fLeweNFizo3UzOg== +"@types/react@*", "@types/react@^17.0.14", "@types/react@^17.0.3": + version "17.0.19" + resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.19.tgz#8f2a85e8180a43b57966b237d26a29481dacc991" + integrity sha512-sX1HisdB1/ZESixMTGnMxH9TDe8Sk709734fEQZzCV/4lSu9kJCPbo2PbTRoZM+53Pp0P10hYVyReUueGwUi4A== dependencies: "@types/prop-types" "*" "@types/scheduler" "*" csstype "^3.0.2" -"@types/react@^16": - version "16.14.13" - resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.13.tgz#14f77c75ea581fa632907440dfda23b3c6ab24c9" - integrity sha512-KznsRYfqPmbcA5pMxc4mYQ7UgsJa2tAgKE2YwEmY5xKaTVZXLAY/ImBohyQHnEoIjxIJR+Um4FmaEYDr3q3zlg== +"@types/react@17.0.18": + version "17.0.18" + resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.18.tgz#4109cbbd901be9582e5e39e3d77acd7b66bb7fbe" + integrity sha512-YTLgu7oS5zvSqq49X5Iue5oAbVGhgPc5Au29SJC4VeE17V6gASoOxVkUDy9pXFMRFxCWCD9fLeweNFizo3UzOg== dependencies: "@types/prop-types" "*" "@types/scheduler" "*" csstype "^3.0.2" -"@types/react@^17.0.14": - version "17.0.19" - resolved "https://registry.yarnpkg.com/@types/react/-/react-17.0.19.tgz#8f2a85e8180a43b57966b237d26a29481dacc991" - integrity sha512-sX1HisdB1/ZESixMTGnMxH9TDe8Sk709734fEQZzCV/4lSu9kJCPbo2PbTRoZM+53Pp0P10hYVyReUueGwUi4A== +"@types/react@^16": + version "16.14.14" + resolved "https://registry.yarnpkg.com/@types/react/-/react-16.14.14.tgz#853de95a32a6a0e719192e222eacad024add2b8e" + integrity sha512-uwIWDYW8LznHzEMJl7ag9St1RsK0gw/xaFZ5+uI1ZM1HndwUgmPH3/wQkSb87GkOVg7shUxnpNW8DcN0AzvG5Q== dependencies: "@types/prop-types" "*" "@types/scheduler" "*" @@ -2565,7 +2557,7 @@ anymatch@^2.0.0: micromatch "^3.1.4" normalize-path "^2.1.1" -anymatch@^3.0.3, anymatch@~3.1.1: +anymatch@^3.0.3, anymatch@~3.1.1, anymatch@~3.1.2: version "3.1.2" resolved "https://registry.yarnpkg.com/anymatch/-/anymatch-3.1.2.tgz#c0557c096af32f106198f4f4e2a383537e378716" integrity sha512-P43ePfOAIupkguHUycrc4qJ9kz8ZiuOUijaETwX7THt0Y/GNK7v0aa8rY816xWjZ7rJdA5XdMcpVFTKMq+RvWg== @@ -2721,10 +2713,10 @@ author-regex@^1.0.0: resolved "https://registry.yarnpkg.com/author-regex/-/author-regex-1.0.0.tgz#d08885be6b9bbf9439fe087c76287245f0a81450" integrity sha1-0IiFvmubv5Q5/gh8dihyRfCoFFA= -available-typed-arrays@^1.0.4: - version "1.0.4" - resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.4.tgz#9e0ae84ecff20caae6a94a1c3bc39b955649b7a9" - integrity sha512-SA5mXJWrId1TaQjfxUYghbqQ/hYioKmLJvPJyDuYRtXXenFNMjj4hSSt1Cf1xsuXSXrtxrVC5Ot4eU6cOtBDdA== +available-typed-arrays@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7" + integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw== axios-retry@^3.1.9: version "3.1.9" @@ -2740,13 +2732,13 @@ axios@^0.21.0, axios@^0.21.1: dependencies: follow-redirects "^1.10.0" -babel-jest@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-27.0.6.tgz#e99c6e0577da2655118e3608b68761a5a69bd0d8" - integrity sha512-iTJyYLNc4wRofASmofpOc5NK9QunwMk+TLFgGXsTFS8uEqmd8wdI7sga0FPe2oVH3b5Agt/EAK1QjPEuKL8VfA== +babel-jest@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-27.1.0.tgz#e96ca04554fd32274439869e2b6d24de9d91bc4e" + integrity sha512-6NrdqzaYemALGCuR97QkC/FkFIEBWP5pw5TMJoUHZTVXyOgocujp6A0JE2V6gE0HtqAAv6VKU/nI+OCR1Z4gHA== dependencies: - "@jest/transform" "^27.0.6" - "@jest/types" "^27.0.6" + "@jest/transform" "^27.1.0" + "@jest/types" "^27.1.0" "@types/babel__core" "^7.1.14" babel-plugin-istanbul "^6.0.0" babel-preset-jest "^27.0.6" @@ -3032,7 +3024,7 @@ browserify-zlib@0.2.0, browserify-zlib@^0.2.0: dependencies: pako "~1.0.5" -browserslist@4.16.6, browserslist@^4.16.6: +browserslist@4.16.6: version "4.16.6" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.6.tgz#d7901277a5a88e554ed305b183ec9b0c08f66fa2" integrity sha512-Wspk/PqO+4W9qp5iUTJsa1B/QrYn1keNCcEP5OvP7WBwT4KaDly0uONYmC6Xa3Z5IqnUgS0KcgLYu1l74x0ZXQ== @@ -3043,7 +3035,7 @@ browserslist@4.16.6, browserslist@^4.16.6: escalade "^3.1.1" node-releases "^1.1.71" -browserslist@^4.16.7: +browserslist@^4.16.6, browserslist@^4.16.8: version "4.16.8" resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.8.tgz#cb868b0b554f137ba6e33de0ecff2eda403c4fb0" integrity sha512-sc2m9ohR/49sWEbPj14ZSSZqp+kbi16aLao42Hmn3Z8FpjuMaq2xCA2l4zl9ITfyzvnvyE0hcg62YkIGKxgaNQ== @@ -3215,9 +3207,9 @@ camelcase@^6.2.0: integrity sha512-c7wVvbw3f37nuobQNtgsgG9POC9qMbNuMQmTCqZv23b6MIz0fcYpBiOlv9gEN/hdLdnZTDQhg6e9Dq5M1vKvfg== caniuse-lite@^1.0.30001202, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001228, caniuse-lite@^1.0.30001251: - version "1.0.30001251" - resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001251.tgz#6853a606ec50893115db660f82c094d18f096d85" - integrity sha512-HOe1r+9VkU4TFmnU70z+r7OLmtR+/chB1rdcJUeQlAinjEeb0cKL20tlAtOagNZhbrtLnCvV19B4FmF1rgzl6A== + version "1.0.30001252" + resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001252.tgz#cb16e4e3dafe948fc4a9bb3307aea054b912019a" + integrity sha512-I56jhWDGMtdILQORdusxBOH+Nl/KgQSdDmpJezYddnAkVOmnoU8zwjTV9xAjMIYxr0iPreEAVylCGcmHCjfaOw== chalk@2.4.2, chalk@^2.0.0, chalk@^2.3.0, chalk@^2.4.1, chalk@^2.4.2: version "2.4.2" @@ -3264,7 +3256,7 @@ character-reference-invalid@^1.0.0: resolved "https://registry.yarnpkg.com/character-reference-invalid/-/character-reference-invalid-1.1.4.tgz#083329cda0eae272ab3dbbf37e9a382c13af1560" integrity sha512-mKKUkUbhPpQlCOfIuZkvSEgktjPFIsZKRRbC6KWVEMvlzblj3i3asQv5ODsrwt0N3pHAEvjP8KTQPHkp0+6jOg== -chokidar@3.5.1, chokidar@^3.4.1: +chokidar@3.5.1: version "3.5.1" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.1.tgz#ee9ce7bbebd2b79f49f304799d5468e31e14e68a" integrity sha512-9+s+Od+W0VJJzawDma/gvBNQqkTiqYTWLuZoyAsivsI4AaWTCzHG06/TMjsf1cYe9Cb97UCEhjz7HvnPk2p/tw== @@ -3298,6 +3290,21 @@ chokidar@^2.1.8: optionalDependencies: fsevents "^1.2.7" +chokidar@^3.4.1: + version "3.5.2" + resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75" + integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ== + dependencies: + anymatch "~3.1.2" + braces "~3.0.2" + glob-parent "~5.1.2" + is-binary-path "~2.1.0" + is-glob "~4.0.1" + normalize-path "~3.0.0" + readdirp "~3.6.0" + optionalDependencies: + fsevents "~2.3.2" + chownr@^1.1.1: version "1.1.4" resolved "https://registry.yarnpkg.com/chownr/-/chownr-1.1.4.tgz#6fc9d7b42d32a583596337666e7d08084da2cc6b" @@ -3568,11 +3575,11 @@ copy-to-clipboard@^3.3.1: toggle-selection "^1.0.6" core-js-compat@^3.14.0, core-js-compat@^3.16.0: - version "3.16.2" - resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.16.2.tgz#442ef1d933ca6fc80859bd5a1db7a3ba716aaf56" - integrity sha512-4lUshXtBXsdmp8cDWh6KKiHUg40AjiuPD3bOWkNVsr1xkAhpUqCjaZ8lB1bKx9Gb5fXcbRbFJ4f4qpRIRTuJqQ== + version "3.17.2" + resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.17.2.tgz#f461ab950c0a0ffedfc327debf28b7e518950936" + integrity sha512-lHnt7A1Oqplebl5i0MrQyFv/yyEzr9p29OjlkcsFRDDgHwwQyVckfRGJ790qzXhkwM8ba4SFHHa2sO+T5f1zGg== dependencies: - browserslist "^4.16.7" + browserslist "^4.16.8" semver "7.0.0" core-js@3.6.5: @@ -3581,9 +3588,9 @@ core-js@3.6.5: integrity sha512-vZVEEwZoIsI+vPEuoF9Iqf5H7/M3eeQqWlQnYa8FSKKePuYTf5MWnxb5SDAzCa60b3JBRS5g9b+Dq7b1y/RCrA== core-util-is@~1.0.0: - version "1.0.2" - resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.2.tgz#b5fd54220aa2bc5ab57aab7140c940754503c1a7" - integrity sha1-tf1UIgqivFq1eqtxQMlAdUUDwac= + version "1.0.3" + resolved "https://registry.yarnpkg.com/core-util-is/-/core-util-is-1.0.3.tgz#a6042d3634c2b27e9328f837b965fac83808db85" + integrity sha512-ZQBvi1DcpJ4GDqanjucZ2Hj3wEO5pZDS89BWbkcrvdxksJorwUDDZamX9ldFkp9aw2lmBDLgkObEA4DWNJ9FYQ== cosmiconfig@^6.0.0: version "6.0.0" @@ -4009,16 +4016,16 @@ domexception@^2.0.1: webidl-conversions "^5.0.0" domhandler@^4.0.0, domhandler@^4.2.0: - version "4.2.0" - resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.2.0.tgz#f9768a5f034be60a89a27c2e4d0f74eba0d8b059" - integrity sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA== + version "4.2.2" + resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.2.2.tgz#e825d721d19a86b8c201a35264e226c678ee755f" + integrity sha512-PzE9aBMsdZO8TK4BnuJwH0QT41wgMbRzuZrHUcpYncEjmQazq8QEaBWgLG7ZyC/DAZKEgglpIA6j4Qn/HmxS3w== dependencies: domelementtype "^2.2.0" domutils@^2.5.2, domutils@^2.6.0: - version "2.7.0" - resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.7.0.tgz#8ebaf0c41ebafcf55b0b72ec31c56323712c5442" - integrity sha512-8eaHa17IwJUPAiB+SoTYBo5mCdeMgdcAoXJ59m6DT1vw+5iLS3gNoqYaRowaBKtGVrOF1Jz4yDTgYKLK2kvfJg== + version "2.8.0" + resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135" + integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A== dependencies: dom-serializer "^1.0.1" domelementtype "^2.2.0" @@ -4059,9 +4066,9 @@ duplexify@^3.4.2, duplexify@^3.6.0: stream-shift "^1.0.0" electron-to-chromium@^1.3.723, electron-to-chromium@^1.3.811: - version "1.3.812" - resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.812.tgz#4c4fb407e0e1335056097f172e9f2c0a09efe77d" - integrity sha512-7KiUHsKAWtSrjVoTSzxQ0nPLr/a+qoxNZwkwd9LkylTOgOXSVXkQbpIVT0WAUQcI5gXq3SwOTCrK+WfINHOXQg== + version "1.3.827" + resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.827.tgz#c725e8db8c5be18b472a919e5f57904512df0fc1" + integrity sha512-ye+4uQOY/jbjRutMcE/EmOcNwUeo1qo9aKL2tPyb09cU3lmxNeyDF4RWiemmkknW+p29h7dyDqy02higTxc9/A== elliptic@^6.5.3: version "6.5.4" @@ -4331,16 +4338,16 @@ expand-tilde@^2.0.0, expand-tilde@^2.0.2: dependencies: homedir-polyfill "^1.0.1" -expect@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/expect/-/expect-27.0.6.tgz#a4d74fbe27222c718fff68ef49d78e26a8fd4c05" - integrity sha512-psNLt8j2kwg42jGBDSfAlU49CEZxejN1f1PlANWDZqIhBOVU/c2Pm888FcjWJzFewhIsNWfZJeLjUjtKGiPuSw== +expect@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/expect/-/expect-27.1.0.tgz#380de0abb3a8f2299c4c6c66bbe930483b5dba9b" + integrity sha512-9kJngV5hOJgkFil4F/uXm3hVBubUK2nERVfvqNNwxxuW8ZOUwSTTSysgfzckYtv/LBzj/LJXbiAF7okHCXgdug== dependencies: - "@jest/types" "^27.0.6" + "@jest/types" "^27.1.0" ansi-styles "^5.0.0" jest-get-type "^27.0.6" - jest-matcher-utils "^27.0.6" - jest-message-util "^27.0.6" + jest-matcher-utils "^27.1.0" + jest-message-util "^27.1.0" jest-regex-util "^27.0.6" extend-shallow@^2.0.1: @@ -4457,7 +4464,7 @@ fill-range@^7.0.1: dependencies: to-regex-range "^5.0.1" -find-cache-dir@3.3.1, find-cache-dir@^3.3.1: +find-cache-dir@3.3.1: version "3.3.1" resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.1.tgz#89b33fad4a4670daa94f855f7fbe31d6d84fe880" integrity sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ== @@ -4475,6 +4482,15 @@ find-cache-dir@^2.1.0: make-dir "^2.0.0" pkg-dir "^3.0.0" +find-cache-dir@^3.3.1: + version "3.3.2" + resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.2.tgz#b30c5b6eff0730731aea9bbd9dbecbd80256d64b" + integrity sha512-wXZV5emFEjrridIgED11OoUKLxiYjAcqot/NJdAkOhlJ+vGzwhOAfcG5OX1jP+S0PcjEn8bdMJv+g2jwQ3Onig== + dependencies: + commondir "^1.0.1" + make-dir "^3.0.2" + pkg-dir "^4.1.0" + find-root@^1.1.0: version "1.1.0" resolved "https://registry.yarnpkg.com/find-root/-/find-root-1.1.0.tgz#abcfc8ba76f708c42a97b3d685b7e9450bfb9ce4" @@ -4534,9 +4550,9 @@ flush-write-stream@^1.0.0: readable-stream "^2.3.6" follow-redirects@^1.10.0: - version "1.14.2" - resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.2.tgz#cecb825047c00f5e66b142f90fed4f515dec789b" - integrity sha512-yLR6WaE2lbF0x4K2qE2p9PEXKLDjUjnR/xmjS3wHAYxtlsI9MLLBJUZirAHKzUZDGLxje7w/cXR49WOUo4rbsA== + version "1.14.3" + resolved "https://registry.yarnpkg.com/follow-redirects/-/follow-redirects-1.14.3.tgz#6ada78118d8d24caee595595accdc0ac6abd022e" + integrity sha512-3MkHxknWMUtb23apkgz/83fDoe+y+qr0TdgacGIA7bew+QLBo3vdgEN2xEsuXNivpFy4CyDhBBZnNZOtalmenw== for-in@^1.0.2: version "1.0.2" @@ -4627,7 +4643,7 @@ fsevents@^1.2.7: bindings "^1.5.0" nan "^2.12.1" -fsevents@^2.3.2, fsevents@~2.3.1: +fsevents@^2.3.2, fsevents@~2.3.1, fsevents@~2.3.2: version "2.3.2" resolved "https://registry.yarnpkg.com/fsevents/-/fsevents-2.3.2.tgz#8a526f78b8fdf4623b709e0b975c52c24c02fd1a" integrity sha512-xiqMQR4xAeHTuB9uWm+fFRcIOgKBMiOBP+eXiyT7jsgVCq1bkVygt00oASowB7EdtpOHaaPgKt812P9ab+DDKA== @@ -4686,7 +4702,7 @@ glob-parent@^3.1.0: is-glob "^3.1.0" path-dirname "^1.0.0" -glob-parent@~5.1.0: +glob-parent@~5.1.0, glob-parent@~5.1.2: version "5.1.2" resolved "https://registry.yarnpkg.com/glob-parent/-/glob-parent-5.1.2.tgz#869832c58034fe68a4093c17dc15e8340d8401c4" integrity sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow== @@ -4895,6 +4911,11 @@ hey-listen@^1.0.8: resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68" integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q== +highlight.js@9.15.10: + version "9.15.10" + resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.15.10.tgz#7b18ed75c90348c045eef9ed08ca1319a2219ad2" + integrity sha512-RoV7OkQm0T3os3Dd2VHLNMoaoDVx77Wygln3n9l5YV172XonWG6rgQD3XnF/BuFFZw9A0TJgmMSO8FEWQgvcXw== + history@^4.9.0: version "4.10.1" resolved "https://registry.yarnpkg.com/history/-/history-4.10.1.tgz#33371a65e3a83b267434e2b3f3b1b4c58aad4cf3" @@ -5471,12 +5492,12 @@ is-symbol@^1.0.2, is-symbol@^1.0.3: dependencies: has-symbols "^1.0.2" -is-typed-array@^1.1.3, is-typed-array@^1.1.6: - version "1.1.7" - resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.7.tgz#881ddc660b13cb8423b2090fa88c0fe37a83eb2f" - integrity sha512-VxlpTBGknhQ3o7YiVjIhdLU6+oD8dPz/79vvvH4F+S/c8608UCVa9fgDpa1kZgFoUST2DCgacc70UszKgzKuvA== +is-typed-array@^1.1.3, is-typed-array@^1.1.7: + version "1.1.8" + resolved "https://registry.yarnpkg.com/is-typed-array/-/is-typed-array-1.1.8.tgz#cbaa6585dc7db43318bc5b89523ea384a6f65e79" + integrity sha512-HqH41TNZq2fgtGT8WHVFVJhBVGuY3AnP3Q36K8JKXUxSxRgk/d+7NjmwG2vo2mYmXK8UYZKu0qH8bVP5gEisjA== dependencies: - available-typed-arrays "^1.0.4" + available-typed-arrays "^1.0.5" call-bind "^1.0.2" es-abstract "^1.18.5" foreach "^2.0.5" @@ -5572,84 +5593,84 @@ istanbul-reports@^3.0.2: html-escaper "^2.0.0" istanbul-lib-report "^3.0.0" -jest-changed-files@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-27.0.6.tgz#bed6183fcdea8a285482e3b50a9a7712d49a7a8b" - integrity sha512-BuL/ZDauaq5dumYh5y20sn4IISnf1P9A0TDswTxUi84ORGtVa86ApuBHqICL0vepqAnZiY6a7xeSPWv2/yy4eA== +jest-changed-files@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-27.1.0.tgz#42da6ea00f06274172745729d55f42b60a9dffe0" + integrity sha512-eRcb13TfQw0xiV2E98EmiEgs9a5uaBIqJChyl0G7jR9fCIvGjXovnDS6Zbku3joij4tXYcSK4SE1AXqOlUxjWg== dependencies: - "@jest/types" "^27.0.6" + "@jest/types" "^27.1.0" execa "^5.0.0" throat "^6.0.1" -jest-circus@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-27.0.6.tgz#dd4df17c4697db6a2c232aaad4e9cec666926668" - integrity sha512-OJlsz6BBeX9qR+7O9lXefWoc2m9ZqcZ5Ohlzz0pTEAG4xMiZUJoacY8f4YDHxgk0oKYxj277AfOk9w6hZYvi1Q== +jest-circus@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-27.1.0.tgz#24c280c90a625ea57da20ee231d25b1621979a57" + integrity sha512-6FWtHs3nZyZlMBhRf1wvAC5CirnflbGJAY1xssSAnERLiiXQRH+wY2ptBVtXjX4gz4AA2EwRV57b038LmifRbA== dependencies: - "@jest/environment" "^27.0.6" - "@jest/test-result" "^27.0.6" - "@jest/types" "^27.0.6" + "@jest/environment" "^27.1.0" + "@jest/test-result" "^27.1.0" + "@jest/types" "^27.1.0" "@types/node" "*" chalk "^4.0.0" co "^4.6.0" dedent "^0.7.0" - expect "^27.0.6" + expect "^27.1.0" is-generator-fn "^2.0.0" - jest-each "^27.0.6" - jest-matcher-utils "^27.0.6" - jest-message-util "^27.0.6" - jest-runtime "^27.0.6" - jest-snapshot "^27.0.6" - jest-util "^27.0.6" - pretty-format "^27.0.6" + jest-each "^27.1.0" + jest-matcher-utils "^27.1.0" + jest-message-util "^27.1.0" + jest-runtime "^27.1.0" + jest-snapshot "^27.1.0" + jest-util "^27.1.0" + pretty-format "^27.1.0" slash "^3.0.0" stack-utils "^2.0.3" throat "^6.0.1" -jest-cli@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-27.0.6.tgz#d021e5f4d86d6a212450d4c7b86cb219f1e6864f" - integrity sha512-qUUVlGb9fdKir3RDE+B10ULI+LQrz+MCflEH2UJyoUjoHHCbxDrMxSzjQAPUMsic4SncI62ofYCcAvW6+6rhhg== +jest-cli@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-27.1.0.tgz#118438e4d11cf6fb66cb2b2eb5778817eab3daeb" + integrity sha512-h6zPUOUu+6oLDrXz0yOWY2YXvBLk8gQinx4HbZ7SF4V3HzasQf+ncoIbKENUMwXyf54/6dBkYXvXJos+gOHYZw== dependencies: - "@jest/core" "^27.0.6" - "@jest/test-result" "^27.0.6" - "@jest/types" "^27.0.6" + "@jest/core" "^27.1.0" + "@jest/test-result" "^27.1.0" + "@jest/types" "^27.1.0" chalk "^4.0.0" exit "^0.1.2" graceful-fs "^4.2.4" import-local "^3.0.2" - jest-config "^27.0.6" - jest-util "^27.0.6" - jest-validate "^27.0.6" + jest-config "^27.1.0" + jest-util "^27.1.0" + jest-validate "^27.1.0" prompts "^2.0.1" yargs "^16.0.3" -jest-config@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-27.0.6.tgz#119fb10f149ba63d9c50621baa4f1f179500277f" - integrity sha512-JZRR3I1Plr2YxPBhgqRspDE2S5zprbga3swYNrvY3HfQGu7p/GjyLOqwrYad97tX3U3mzT53TPHVmozacfP/3w== +jest-config@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-27.1.0.tgz#e6826e2baaa34c07c3839af86466870e339d9ada" + integrity sha512-GMo7f76vMYUA3b3xOdlcKeKQhKcBIgurjERO2hojo0eLkKPGcw7fyIoanH+m6KOP2bLad+fGnF8aWOJYxzNPeg== dependencies: "@babel/core" "^7.1.0" - "@jest/test-sequencer" "^27.0.6" - "@jest/types" "^27.0.6" - babel-jest "^27.0.6" + "@jest/test-sequencer" "^27.1.0" + "@jest/types" "^27.1.0" + babel-jest "^27.1.0" chalk "^4.0.0" deepmerge "^4.2.2" glob "^7.1.1" graceful-fs "^4.2.4" is-ci "^3.0.0" - jest-circus "^27.0.6" - jest-environment-jsdom "^27.0.6" - jest-environment-node "^27.0.6" + jest-circus "^27.1.0" + jest-environment-jsdom "^27.1.0" + jest-environment-node "^27.1.0" jest-get-type "^27.0.6" - jest-jasmine2 "^27.0.6" + jest-jasmine2 "^27.1.0" jest-regex-util "^27.0.6" - jest-resolve "^27.0.6" - jest-runner "^27.0.6" - jest-util "^27.0.6" - jest-validate "^27.0.6" + jest-resolve "^27.1.0" + jest-runner "^27.1.0" + jest-util "^27.1.0" + jest-validate "^27.1.0" micromatch "^4.0.4" - pretty-format "^27.0.6" + pretty-format "^27.1.0" jest-diff@^26.0.0: version "26.6.2" @@ -5661,15 +5682,15 @@ jest-diff@^26.0.0: jest-get-type "^26.3.0" pretty-format "^26.6.2" -jest-diff@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.0.6.tgz#4a7a19ee6f04ad70e0e3388f35829394a44c7b5e" - integrity sha512-Z1mqgkTCSYaFgwTlP/NUiRzdqgxmmhzHY1Tq17zL94morOHfHu3K4bgSgl+CR4GLhpV8VxkuOYuIWnQ9LnFqmg== +jest-diff@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.1.0.tgz#c7033f25add95e2218f3c7f4c3d7b634ab6b3cd2" + integrity sha512-rjfopEYl58g/SZTsQFmspBODvMSytL16I+cirnScWTLkQVXYVZfxm78DFfdIIXc05RCYuGjxJqrdyG4PIFzcJg== dependencies: chalk "^4.0.0" diff-sequences "^27.0.6" jest-get-type "^27.0.6" - pretty-format "^27.0.6" + pretty-format "^27.1.0" jest-docblock@^27.0.6: version "27.0.6" @@ -5678,41 +5699,41 @@ jest-docblock@^27.0.6: dependencies: detect-newline "^3.0.0" -jest-each@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-27.0.6.tgz#cee117071b04060158dc8d9a66dc50ad40ef453b" - integrity sha512-m6yKcV3bkSWrUIjxkE9OC0mhBZZdhovIW5ergBYirqnkLXkyEn3oUUF/QZgyecA1cF1QFyTE8bRRl8Tfg1pfLA== +jest-each@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-27.1.0.tgz#36ac75f7aeecb3b8da2a8e617ccb30a446df408c" + integrity sha512-K/cNvQlmDqQMRHF8CaQ0XPzCfjP5HMJc2bIJglrIqI9fjwpNqITle63IWE+wq4p+3v+iBgh7Wq0IdGpLx5xjDg== dependencies: - "@jest/types" "^27.0.6" + "@jest/types" "^27.1.0" chalk "^4.0.0" jest-get-type "^27.0.6" - jest-util "^27.0.6" - pretty-format "^27.0.6" + jest-util "^27.1.0" + pretty-format "^27.1.0" -jest-environment-jsdom@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-27.0.6.tgz#f66426c4c9950807d0a9f209c590ce544f73291f" - integrity sha512-FvetXg7lnXL9+78H+xUAsra3IeZRTiegA3An01cWeXBspKXUhAwMM9ycIJ4yBaR0L7HkoMPaZsozCLHh4T8fuw== +jest-environment-jsdom@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-27.1.0.tgz#5fb3eb8a67e02e6cc623640388d5f90e33075f18" + integrity sha512-JbwOcOxh/HOtsj56ljeXQCUJr3ivnaIlM45F5NBezFLVYdT91N5UofB1ux2B1CATsQiudcHdgTaeuqGXJqjJYQ== dependencies: - "@jest/environment" "^27.0.6" - "@jest/fake-timers" "^27.0.6" - "@jest/types" "^27.0.6" + "@jest/environment" "^27.1.0" + "@jest/fake-timers" "^27.1.0" + "@jest/types" "^27.1.0" "@types/node" "*" - jest-mock "^27.0.6" - jest-util "^27.0.6" + jest-mock "^27.1.0" + jest-util "^27.1.0" jsdom "^16.6.0" -jest-environment-node@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-27.0.6.tgz#a6699b7ceb52e8d68138b9808b0c404e505f3e07" - integrity sha512-+Vi6yLrPg/qC81jfXx3IBlVnDTI6kmRr08iVa2hFCWmJt4zha0XW7ucQltCAPhSR0FEKEoJ3i+W4E6T0s9is0w== +jest-environment-node@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-27.1.0.tgz#feea6b765f1fd4582284d4f1007df2b0a8d15b7f" + integrity sha512-JIyJ8H3wVyM4YCXp7njbjs0dIT87yhGlrXCXhDKNIg1OjurXr6X38yocnnbXvvNyqVTqSI4M9l+YfPKueqL1lw== dependencies: - "@jest/environment" "^27.0.6" - "@jest/fake-timers" "^27.0.6" - "@jest/types" "^27.0.6" + "@jest/environment" "^27.1.0" + "@jest/fake-timers" "^27.1.0" + "@jest/types" "^27.1.0" "@types/node" "*" - jest-mock "^27.0.6" - jest-util "^27.0.6" + jest-mock "^27.1.0" + jest-util "^27.1.0" jest-get-type@^26.3.0: version "26.3.0" @@ -5724,12 +5745,12 @@ jest-get-type@^27.0.6: resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-27.0.6.tgz#0eb5c7f755854279ce9b68a9f1a4122f69047cfe" integrity sha512-XTkK5exIeUbbveehcSR8w0bhH+c0yloW/Wpl+9vZrjzztCPWrxhHwkIFpZzCt71oRBsgxmuUfxEqOYoZI2macg== -jest-haste-map@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-27.0.6.tgz#4683a4e68f6ecaa74231679dca237279562c8dc7" - integrity sha512-4ldjPXX9h8doB2JlRzg9oAZ2p6/GpQUNAeiYXqcpmrKbP0Qev0wdZlxSMOmz8mPOEnt4h6qIzXFLDi8RScX/1w== +jest-haste-map@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-27.1.0.tgz#a39f456823bd6a74e3c86ad25f6fa870428326bf" + integrity sha512-7mz6LopSe+eA6cTFMf10OfLLqRoIPvmMyz5/OnSXnHO7hB0aDP1iIeLWCXzAcYU5eIJVpHr12Bk9yyq2fTW9vg== dependencies: - "@jest/types" "^27.0.6" + "@jest/types" "^27.1.0" "@types/graceful-fs" "^4.1.2" "@types/node" "*" anymatch "^3.0.3" @@ -5737,76 +5758,76 @@ jest-haste-map@^27.0.6: graceful-fs "^4.2.4" jest-regex-util "^27.0.6" jest-serializer "^27.0.6" - jest-util "^27.0.6" - jest-worker "^27.0.6" + jest-util "^27.1.0" + jest-worker "^27.1.0" micromatch "^4.0.4" walker "^1.0.7" optionalDependencies: fsevents "^2.3.2" -jest-jasmine2@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-27.0.6.tgz#fd509a9ed3d92bd6edb68a779f4738b100655b37" - integrity sha512-cjpH2sBy+t6dvCeKBsHpW41mjHzXgsavaFMp+VWRf0eR4EW8xASk1acqmljFtK2DgyIECMv2yCdY41r2l1+4iA== +jest-jasmine2@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-27.1.0.tgz#324a3de0b2ee20d238b2b5b844acc4571331a206" + integrity sha512-Z/NIt0wBDg3przOW2FCWtYjMn3Ip68t0SL60agD/e67jlhTyV3PIF8IzT9ecwqFbeuUSO2OT8WeJgHcalDGFzQ== dependencies: "@babel/traverse" "^7.1.0" - "@jest/environment" "^27.0.6" + "@jest/environment" "^27.1.0" "@jest/source-map" "^27.0.6" - "@jest/test-result" "^27.0.6" - "@jest/types" "^27.0.6" + "@jest/test-result" "^27.1.0" + "@jest/types" "^27.1.0" "@types/node" "*" chalk "^4.0.0" co "^4.6.0" - expect "^27.0.6" + expect "^27.1.0" is-generator-fn "^2.0.0" - jest-each "^27.0.6" - jest-matcher-utils "^27.0.6" - jest-message-util "^27.0.6" - jest-runtime "^27.0.6" - jest-snapshot "^27.0.6" - jest-util "^27.0.6" - pretty-format "^27.0.6" + jest-each "^27.1.0" + jest-matcher-utils "^27.1.0" + jest-message-util "^27.1.0" + jest-runtime "^27.1.0" + jest-snapshot "^27.1.0" + jest-util "^27.1.0" + pretty-format "^27.1.0" throat "^6.0.1" -jest-leak-detector@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-27.0.6.tgz#545854275f85450d4ef4b8fe305ca2a26450450f" - integrity sha512-2/d6n2wlH5zEcdctX4zdbgX8oM61tb67PQt4Xh8JFAIy6LRKUnX528HulkaG6nD5qDl5vRV1NXejCe1XRCH5gQ== +jest-leak-detector@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-27.1.0.tgz#fe7eb633c851e06280ec4dd248067fe232c00a79" + integrity sha512-oHvSkz1E80VyeTKBvZNnw576qU+cVqRXUD3/wKXh1zpaki47Qty2xeHg2HKie9Hqcd2l4XwircgNOWb/NiGqdA== dependencies: jest-get-type "^27.0.6" - pretty-format "^27.0.6" + pretty-format "^27.1.0" -jest-matcher-utils@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.0.6.tgz#2a8da1e86c620b39459f4352eaa255f0d43e39a9" - integrity sha512-OFgF2VCQx9vdPSYTHWJ9MzFCehs20TsyFi6bIHbk5V1u52zJOnvF0Y/65z3GLZHKRuTgVPY4Z6LVePNahaQ+tA== +jest-matcher-utils@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.1.0.tgz#68afda0885db1f0b9472ce98dc4c535080785301" + integrity sha512-VmAudus2P6Yt/JVBRdTPFhUzlIN8DYJd+et5Rd9QDsO/Z82Z4iwGjo43U8Z+PTiz8CBvKvlb6Fh3oKy39hykkQ== dependencies: chalk "^4.0.0" - jest-diff "^27.0.6" + jest-diff "^27.1.0" jest-get-type "^27.0.6" - pretty-format "^27.0.6" + pretty-format "^27.1.0" -jest-message-util@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-27.0.6.tgz#158bcdf4785706492d164a39abca6a14da5ab8b5" - integrity sha512-rBxIs2XK7rGy+zGxgi+UJKP6WqQ+KrBbD1YMj517HYN3v2BG66t3Xan3FWqYHKZwjdB700KiAJ+iES9a0M+ixw== +jest-message-util@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-27.1.0.tgz#e77692c84945d1d10ef00afdfd3d2c20bd8fb468" + integrity sha512-Eck8NFnJ5Sg36R9XguD65cf2D5+McC+NF5GIdEninoabcuoOfWrID5qJhufq5FB0DRKoiyxB61hS7MKoMD0trQ== dependencies: "@babel/code-frame" "^7.12.13" - "@jest/types" "^27.0.6" + "@jest/types" "^27.1.0" "@types/stack-utils" "^2.0.0" chalk "^4.0.0" graceful-fs "^4.2.4" micromatch "^4.0.4" - pretty-format "^27.0.6" + pretty-format "^27.1.0" slash "^3.0.0" stack-utils "^2.0.3" -jest-mock@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-27.0.6.tgz#0efdd40851398307ba16778728f6d34d583e3467" - integrity sha512-lzBETUoK8cSxts2NYXSBWT+EJNzmUVtVVwS1sU9GwE1DLCfGsngg+ZVSIe0yd0ZSm+y791esiuo+WSwpXJQ5Bw== +jest-mock@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-27.1.0.tgz#7ca6e4d09375c071661642d1c14c4711f3ab4b4f" + integrity sha512-iT3/Yhu7DwAg/0HvvLCqLvrTKTRMyJlrrfJYWzuLSf9RCAxBoIXN3HoymZxMnYsC3eD8ewGbUa9jUknwBenx2w== dependencies: - "@jest/types" "^27.0.6" + "@jest/types" "^27.1.0" "@types/node" "*" jest-pnp-resolver@^1.2.2: @@ -5819,86 +5840,88 @@ jest-regex-util@^27.0.6: resolved "https://registry.yarnpkg.com/jest-regex-util/-/jest-regex-util-27.0.6.tgz#02e112082935ae949ce5d13b2675db3d8c87d9c5" integrity sha512-SUhPzBsGa1IKm8hx2F4NfTGGp+r7BXJ4CulsZ1k2kI+mGLG+lxGrs76veN2LF/aUdGosJBzKgXmNCw+BzFqBDQ== -jest-resolve-dependencies@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-27.0.6.tgz#3e619e0ef391c3ecfcf6ef4056207a3d2be3269f" - integrity sha512-mg9x9DS3BPAREWKCAoyg3QucCr0n6S8HEEsqRCKSPjPcu9HzRILzhdzY3imsLoZWeosEbJZz6TKasveczzpJZA== +jest-resolve-dependencies@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-27.1.0.tgz#d32ea4a2c82f76410f6157d0ec6cde24fbff2317" + integrity sha512-Kq5XuDAELuBnrERrjFYEzu/A+i2W7l9HnPWqZEeKGEQ7m1R+6ndMbdXCVCx29Se1qwLZLgvoXwinB3SPIaitMQ== dependencies: - "@jest/types" "^27.0.6" + "@jest/types" "^27.1.0" jest-regex-util "^27.0.6" - jest-snapshot "^27.0.6" + jest-snapshot "^27.1.0" -jest-resolve@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-27.0.6.tgz#e90f436dd4f8fbf53f58a91c42344864f8e55bff" - integrity sha512-yKmIgw2LgTh7uAJtzv8UFHGF7Dm7XfvOe/LQ3Txv101fLM8cx2h1QVwtSJ51Q/SCxpIiKfVn6G2jYYMDNHZteA== +jest-resolve@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-27.1.0.tgz#bb22303c9e240cccdda28562e3c6fbcc6a23ac86" + integrity sha512-TXvzrLyPg0vLOwcWX38ZGYeEztSEmW+cQQKqc4HKDUwun31wsBXwotRlUz4/AYU/Fq4GhbMd/ileIWZEtcdmIA== dependencies: - "@jest/types" "^27.0.6" + "@jest/types" "^27.1.0" chalk "^4.0.0" escalade "^3.1.1" graceful-fs "^4.2.4" + jest-haste-map "^27.1.0" jest-pnp-resolver "^1.2.2" - jest-util "^27.0.6" - jest-validate "^27.0.6" + jest-util "^27.1.0" + jest-validate "^27.1.0" resolve "^1.20.0" slash "^3.0.0" -jest-runner@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-27.0.6.tgz#1325f45055539222bbc7256a6976e993ad2f9520" - integrity sha512-W3Bz5qAgaSChuivLn+nKOgjqNxM7O/9JOJoKDCqThPIg2sH/d4A/lzyiaFgnb9V1/w29Le11NpzTJSzga1vyYQ== - dependencies: - "@jest/console" "^27.0.6" - "@jest/environment" "^27.0.6" - "@jest/test-result" "^27.0.6" - "@jest/transform" "^27.0.6" - "@jest/types" "^27.0.6" +jest-runner@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-27.1.0.tgz#1b28d114fb3b67407b8354c9385d47395e8ff83f" + integrity sha512-ZWPKr9M5w5gDplz1KsJ6iRmQaDT/yyAFLf18fKbb/+BLWsR1sCNC2wMT0H7pP3gDcBz0qZ6aJraSYUNAGSJGaw== + dependencies: + "@jest/console" "^27.1.0" + "@jest/environment" "^27.1.0" + "@jest/test-result" "^27.1.0" + "@jest/transform" "^27.1.0" + "@jest/types" "^27.1.0" "@types/node" "*" chalk "^4.0.0" emittery "^0.8.1" exit "^0.1.2" graceful-fs "^4.2.4" jest-docblock "^27.0.6" - jest-environment-jsdom "^27.0.6" - jest-environment-node "^27.0.6" - jest-haste-map "^27.0.6" - jest-leak-detector "^27.0.6" - jest-message-util "^27.0.6" - jest-resolve "^27.0.6" - jest-runtime "^27.0.6" - jest-util "^27.0.6" - jest-worker "^27.0.6" + jest-environment-jsdom "^27.1.0" + jest-environment-node "^27.1.0" + jest-haste-map "^27.1.0" + jest-leak-detector "^27.1.0" + jest-message-util "^27.1.0" + jest-resolve "^27.1.0" + jest-runtime "^27.1.0" + jest-util "^27.1.0" + jest-worker "^27.1.0" source-map-support "^0.5.6" throat "^6.0.1" -jest-runtime@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-27.0.6.tgz#45877cfcd386afdd4f317def551fc369794c27c9" - integrity sha512-BhvHLRVfKibYyqqEFkybsznKwhrsu7AWx2F3y9G9L95VSIN3/ZZ9vBpm/XCS2bS+BWz3sSeNGLzI3TVQ0uL85Q== +jest-runtime@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-27.1.0.tgz#1a98d984ffebc16a0b4f9eaad8ab47c00a750cf5" + integrity sha512-okiR2cpGjY0RkWmUGGado6ETpFOi9oG3yV0CioYdoktkVxy5Hv0WRLWnJFuArSYS8cHMCNcceUUMGiIfgxCO9A== dependencies: - "@jest/console" "^27.0.6" - "@jest/environment" "^27.0.6" - "@jest/fake-timers" "^27.0.6" - "@jest/globals" "^27.0.6" + "@jest/console" "^27.1.0" + "@jest/environment" "^27.1.0" + "@jest/fake-timers" "^27.1.0" + "@jest/globals" "^27.1.0" "@jest/source-map" "^27.0.6" - "@jest/test-result" "^27.0.6" - "@jest/transform" "^27.0.6" - "@jest/types" "^27.0.6" + "@jest/test-result" "^27.1.0" + "@jest/transform" "^27.1.0" + "@jest/types" "^27.1.0" "@types/yargs" "^16.0.0" chalk "^4.0.0" cjs-module-lexer "^1.0.0" collect-v8-coverage "^1.0.0" + execa "^5.0.0" exit "^0.1.2" glob "^7.1.3" graceful-fs "^4.2.4" - jest-haste-map "^27.0.6" - jest-message-util "^27.0.6" - jest-mock "^27.0.6" + jest-haste-map "^27.1.0" + jest-message-util "^27.1.0" + jest-mock "^27.1.0" jest-regex-util "^27.0.6" - jest-resolve "^27.0.6" - jest-snapshot "^27.0.6" - jest-util "^27.0.6" - jest-validate "^27.0.6" + jest-resolve "^27.1.0" + jest-snapshot "^27.1.0" + jest-util "^27.1.0" + jest-validate "^27.1.0" slash "^3.0.0" strip-bom "^4.0.0" yargs "^16.0.3" @@ -5911,10 +5934,10 @@ jest-serializer@^27.0.6: "@types/node" "*" graceful-fs "^4.2.4" -jest-snapshot@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-27.0.6.tgz#f4e6b208bd2e92e888344d78f0f650bcff05a4bf" - integrity sha512-NTHaz8He+ATUagUgE7C/UtFcRoHqR2Gc+KDfhQIyx+VFgwbeEMjeP+ILpUTLosZn/ZtbNdCF5LkVnN/l+V751A== +jest-snapshot@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-27.1.0.tgz#2a063ab90064017a7e9302528be7eaea6da12d17" + integrity sha512-eaeUBoEjuuRwmiRI51oTldUsKOohB1F6fPqWKKILuDi/CStxzp2IWekVUXbuHHoz5ik33ioJhshiHpgPFbYgcA== dependencies: "@babel/core" "^7.7.2" "@babel/generator" "^7.7.2" @@ -5922,60 +5945,60 @@ jest-snapshot@^27.0.6: "@babel/plugin-syntax-typescript" "^7.7.2" "@babel/traverse" "^7.7.2" "@babel/types" "^7.0.0" - "@jest/transform" "^27.0.6" - "@jest/types" "^27.0.6" + "@jest/transform" "^27.1.0" + "@jest/types" "^27.1.0" "@types/babel__traverse" "^7.0.4" "@types/prettier" "^2.1.5" babel-preset-current-node-syntax "^1.0.0" chalk "^4.0.0" - expect "^27.0.6" + expect "^27.1.0" graceful-fs "^4.2.4" - jest-diff "^27.0.6" + jest-diff "^27.1.0" jest-get-type "^27.0.6" - jest-haste-map "^27.0.6" - jest-matcher-utils "^27.0.6" - jest-message-util "^27.0.6" - jest-resolve "^27.0.6" - jest-util "^27.0.6" + jest-haste-map "^27.1.0" + jest-matcher-utils "^27.1.0" + jest-message-util "^27.1.0" + jest-resolve "^27.1.0" + jest-util "^27.1.0" natural-compare "^1.4.0" - pretty-format "^27.0.6" + pretty-format "^27.1.0" semver "^7.3.2" -jest-util@^27.0.0, jest-util@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-27.0.6.tgz#e8e04eec159de2f4d5f57f795df9cdc091e50297" - integrity sha512-1JjlaIh+C65H/F7D11GNkGDDZtDfMEM8EBXsvd+l/cxtgQ6QhxuloOaiayt89DxUvDarbVhqI98HhgrM1yliFQ== +jest-util@^27.0.0, jest-util@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-27.1.0.tgz#06a53777a8cb7e4940ca8e20bf9c67dd65d9bd68" + integrity sha512-edSLD2OneYDKC6gZM1yc+wY/877s/fuJNoM1k3sOEpzFyeptSmke3SLnk1dDHk9CgTA+58mnfx3ew3J11Kes/w== dependencies: - "@jest/types" "^27.0.6" + "@jest/types" "^27.1.0" "@types/node" "*" chalk "^4.0.0" graceful-fs "^4.2.4" is-ci "^3.0.0" picomatch "^2.2.3" -jest-validate@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-27.0.6.tgz#930a527c7a951927df269f43b2dc23262457e2a6" - integrity sha512-yhZZOaMH3Zg6DC83n60pLmdU1DQE46DW+KLozPiPbSbPhlXXaiUTDlhHQhHFpaqIFRrInko1FHXjTRpjWRuWfA== +jest-validate@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-27.1.0.tgz#d9e82024c5e3f5cef52a600cfc456793a84c0998" + integrity sha512-QiJ+4XuSuMsfPi9zvdO//IrSRSlG6ybJhOpuqYSsuuaABaNT84h0IoD6vvQhThBOKT+DIKvl5sTM0l6is9+SRA== dependencies: - "@jest/types" "^27.0.6" + "@jest/types" "^27.1.0" camelcase "^6.2.0" chalk "^4.0.0" jest-get-type "^27.0.6" leven "^3.1.0" - pretty-format "^27.0.6" + pretty-format "^27.1.0" -jest-watcher@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-27.0.6.tgz#89526f7f9edf1eac4e4be989bcb6dec6b8878d9c" - integrity sha512-/jIoKBhAP00/iMGnTwUBLgvxkn7vsOweDrOTSPzc7X9uOyUtJIDthQBTI1EXz90bdkrxorUZVhJwiB69gcHtYQ== +jest-watcher@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-27.1.0.tgz#2511fcddb0e969a400f3d1daa74265f93f13ce93" + integrity sha512-ivaWTrA46aHWdgPDgPypSHiNQjyKnLBpUIHeBaGg11U+pDzZpkffGlcB1l1a014phmG0mHgkOHtOgiqJQM6yKQ== dependencies: - "@jest/test-result" "^27.0.6" - "@jest/types" "^27.0.6" + "@jest/test-result" "^27.1.0" + "@jest/types" "^27.1.0" "@types/node" "*" ansi-escapes "^4.2.1" chalk "^4.0.0" - jest-util "^27.0.6" + jest-util "^27.1.0" string-length "^4.0.1" jest-worker@27.0.0-next.5: @@ -5996,23 +6019,23 @@ jest-worker@^26.5.0: merge-stream "^2.0.0" supports-color "^7.0.0" -jest-worker@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.0.6.tgz#a5fdb1e14ad34eb228cfe162d9f729cdbfa28aed" - integrity sha512-qupxcj/dRuA3xHPMUd40gr2EaAurFbkwzOh7wfPaeE9id7hyjURRQoqNfHifHK3XjJU6YJJUQKILGUnwGPEOCA== +jest-worker@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.1.0.tgz#65f4a88e37148ed984ba8ca8492d6b376938c0aa" + integrity sha512-mO4PHb2QWLn9yRXGp7rkvXLAYuxwhq1ZYUo0LoDhg8wqvv4QizP1ZWEJOeolgbEgAWZLIEU0wsku8J+lGWfBhg== dependencies: "@types/node" "*" merge-stream "^2.0.0" supports-color "^8.0.0" jest@^27.0.3, jest@^27.0.4, jest@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest/-/jest-27.0.6.tgz#10517b2a628f0409087fbf473db44777d7a04505" - integrity sha512-EjV8aETrsD0wHl7CKMibKwQNQc3gIRBXlTikBmmHUeVMKaPFxdcUIBfoDqTSXDoGJIivAYGqCWVlzCSaVjPQsA== + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest/-/jest-27.1.0.tgz#eaab62dfdc02d8b7c814cd27b8d2d92bc46d3d69" + integrity sha512-pSQDVwRSwb109Ss13lcMtdfS9r8/w2Zz8+mTUA9VORD66GflCdl8nUFCqM96geOD2EBwWCNURrNAfQsLIDNBdg== dependencies: - "@jest/core" "^27.0.6" + "@jest/core" "^27.1.0" import-local "^3.0.2" - jest-cli "^27.0.6" + jest-cli "^27.1.0" "js-tokens@^3.0.0 || ^4.0.0", js-tokens@^4.0.0: version "4.0.0" @@ -7318,9 +7341,9 @@ postcss@8.2.15: source-map "^0.6.1" postcss@^7.0.14, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6: - version "7.0.35" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.35.tgz#d2be00b998f7f211d8a276974079f2e92b970e24" - integrity sha512-3QT8bBJeX/S5zKTTjTCIjRF3If4avAT6kqxcASlTWEtAFCb9NH0OUxNDfgZSWdP5fJnBYCMEWkIFfWeugjzYMg== + version "7.0.36" + resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.36.tgz#056f8cffa939662a8f5905950c07d5285644dfcb" + integrity sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw== dependencies: chalk "^2.4.2" source-map "^0.6.1" @@ -7363,12 +7386,12 @@ pretty-format@^26.0.0, pretty-format@^26.6.2: ansi-styles "^4.0.0" react-is "^17.0.1" -pretty-format@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.0.6.tgz#ab770c47b2c6f893a21aefc57b75da63ef49a11f" - integrity sha512-8tGD7gBIENgzqA+UBzObyWqQ5B778VIFZA/S66cclyd5YkFLYs2Js7gxDKf0MXtTc9zcS7t1xhdfcElJ3YIvkQ== +pretty-format@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.1.0.tgz#022f3fdb19121e0a2612f3cff8d724431461b9ca" + integrity sha512-4aGaud3w3rxAO6OXmK3fwBFQ0bctIOG3/if+jYEFGNGIs0EvuidQm3bZ9mlP2/t9epLNC/12czabfy7TZNSwVA== dependencies: - "@jest/types" "^27.0.6" + "@jest/types" "^27.1.0" ansi-regex "^5.0.0" ansi-styles "^5.0.0" react-is "^17.0.1" @@ -7585,24 +7608,24 @@ react-refresh@0.8.3: integrity sha512-X8jZHc7nCMjaCqoU+V2I0cOhNW+QMBwSUkeXnTi8IPe6zaRWfn60ZzvFDZqWPfmSJfjub7dDW1SP0jaHWLu/hg== react-router-dom@^5.2.0: - version "5.2.0" - resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.0.tgz#9e65a4d0c45e13289e66c7b17c7e175d0ea15662" - integrity sha512-gxAmfylo2QUjcwxI63RhQ5G85Qqt4voZpUXSEqCwykV0baaOTQDR1f0PmY8AELqIyVc0NEZUj0Gov5lNGcXgsA== + version "5.2.1" + resolved "https://registry.yarnpkg.com/react-router-dom/-/react-router-dom-5.2.1.tgz#34af8b551a4ce17487d3f80e651b91651978dff6" + integrity sha512-xhFFkBGVcIVPbWM2KEYzED+nuHQPmulVa7sqIs3ESxzYd1pYg8N8rxPnQ4T2o1zu/2QeDUWcaqST131SO1LR3w== dependencies: - "@babel/runtime" "^7.1.2" + "@babel/runtime" "^7.12.13" history "^4.9.0" loose-envify "^1.3.1" prop-types "^15.6.2" - react-router "5.2.0" + react-router "5.2.1" tiny-invariant "^1.0.2" tiny-warning "^1.0.0" -react-router@5.2.0, react-router@^5.2.0: - version "5.2.0" - resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.0.tgz#424e75641ca8747fbf76e5ecca69781aa37ea293" - integrity sha512-smz1DUuFHRKdcJC0jobGo8cVbhO3x50tCL4icacOlcwDOEQPq4TMqwx3sY1TP+DvtTgz4nm3thuo7A+BK2U0Dw== +react-router@5.2.1, react-router@^5.2.0: + version "5.2.1" + resolved "https://registry.yarnpkg.com/react-router/-/react-router-5.2.1.tgz#4d2e4e9d5ae9425091845b8dbc6d9d276239774d" + integrity sha512-lIboRiOtDLFdg1VTemMwud9vRVuOCZmUIT/7lUoZiSpPODiiH1UQlfXy+vPLC/7IWdFYnhRwAyNqA/+I7wnvKQ== dependencies: - "@babel/runtime" "^7.1.2" + "@babel/runtime" "^7.12.13" history "^4.9.0" hoist-non-react-statics "^3.1.0" loose-envify "^1.3.1" @@ -7669,6 +7692,13 @@ readdirp@~3.5.0: dependencies: picomatch "^2.2.1" +readdirp@~3.6.0: + version "3.6.0" + resolved "https://registry.yarnpkg.com/readdirp/-/readdirp-3.6.0.tgz#74a370bd857116e245b29cc97340cd431a02a6c7" + integrity sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA== + dependencies: + picomatch "^2.2.1" + recast@~0.11.12: version "0.11.23" resolved "https://registry.yarnpkg.com/recast/-/recast-0.11.23.tgz#451fd3004ab1e4df9b4e4b66376b2a21912462d3" @@ -8837,15 +8867,15 @@ typedarray@^0.0.6: resolved "https://registry.yarnpkg.com/typedarray/-/typedarray-0.0.6.tgz#867ac74e3864187b1d3d47d996a78ec5c8830777" integrity sha1-hnrHTjhkGHsdPUfZlqeOxciDB3c= -typescript@4.3.5, typescript@^4.3.5: +typescript@4.3.5: version "4.3.5" resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4" integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA== -typescript@^4.0.5, typescript@^4.1.2, typescript@^4.2.3, typescript@^4.2.4, typescript@^4.3.2: - version "4.3.2" - resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.2.tgz#399ab18aac45802d6f2498de5054fcbbe716a805" - integrity sha512-zZ4hShnmnoVnAHpVHWpTcxdv7dWP60S2FsydQLV8V5PbS3FifjWFFRiHSWpDJahly88PRyV5teTSLoq4eG7mKw== +typescript@^4.0.5, typescript@^4.1.2, typescript@^4.2.3, typescript@^4.2.4, typescript@^4.3.2, typescript@^4.3.5: + version "4.4.2" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.2.tgz#6d618640d430e3569a1dfb44f7d7e600ced3ee86" + integrity sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ== uglify-js@3.4.x: version "3.4.10" @@ -9291,16 +9321,16 @@ which-module@^2.0.0: integrity sha1-2e8H3Od7mQK4o6j6SzHD4/fm6Ho= which-typed-array@^1.1.2: - version "1.1.6" - resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.6.tgz#f3713d801da0720a7f26f50c596980a9f5c8b383" - integrity sha512-DdY984dGD5sQ7Tf+x1CkXzdg85b9uEel6nr4UkFg1LoE9OXv3uRuZhe5CoWdawhGACeFpEZXH8fFLQnDhbpm/Q== + version "1.1.7" + resolved "https://registry.yarnpkg.com/which-typed-array/-/which-typed-array-1.1.7.tgz#2761799b9a22d4b8660b3c1b40abaa7739691793" + integrity sha512-vjxaB4nfDqwKI0ws7wZpxIlde1XrLX5uB0ZjpfshgmapJMD7jJWhZI+yToJTqaFByF0eNBcYxbjmCzoRP7CfEw== dependencies: - available-typed-arrays "^1.0.4" + available-typed-arrays "^1.0.5" call-bind "^1.0.2" es-abstract "^1.18.5" foreach "^2.0.5" has-tostringtag "^1.0.0" - is-typed-array "^1.1.6" + is-typed-array "^1.1.7" which@^1.2.14, which@^1.2.9, which@^1.3.1: version "1.3.1" @@ -9372,9 +9402,9 @@ write-file-atomic@^3.0.0: typedarray-to-buffer "^3.1.5" ws@^7.4.6: - version "7.5.3" - resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.3.tgz#160835b63c7d97bfab418fc1b8a9fced2ac01a74" - integrity sha512-kQ/dHIzuLrS6Je9+uv81ueZomEwH0qVYstcAQ4/Z93K8zeko9gtAbttJWzoC5ukqXY1PpoouV3+VSOqEAFt5wg== + version "7.5.4" + resolved "https://registry.yarnpkg.com/ws/-/ws-7.5.4.tgz#56bfa20b167427e138a7795de68d134fe92e21f9" + integrity sha512-zP9z6GXm6zC27YtspwH99T3qTG7bBFv2VIkeHstMLrLlDJuzA7tQ5ls3OJ1hOGGCzTQPniNJoHXIAOS0Jljohg== xml-name-validator@^3.0.0: version "3.0.0" @@ -9386,11 +9416,21 @@ xmlchars@^2.2.0: resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb" integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw== +xmldom@^0.6.0: + version "0.6.0" + resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.6.0.tgz#43a96ecb8beece991cef382c08397d82d4d0c46f" + integrity sha512-iAcin401y58LckRZ0TkI4k0VSM1Qg0KGSc3i8rU+xrxe19A/BN1zHyVSJY7uoutVlaTSzYyk/v5AmkewAP7jtg== + xmlhttprequest@1.8.0: version "1.8.0" resolved "https://registry.yarnpkg.com/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz#67fe075c5c24fef39f9d65f5f7b7fe75171968fc" integrity sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw= +xpath@^0.0.32: + version "0.0.32" + resolved "https://registry.yarnpkg.com/xpath/-/xpath-0.0.32.tgz#1b73d3351af736e17ec078d6da4b8175405c48af" + integrity sha512-rxMJhSIoiO8vXcWvSifKqhvV96GjiD5wYb8/QHdoRyQvraTpp4IEv944nhGausZZ3u7dhQXteZuZbaqfpB7uYw== + xtend@^4.0.0, xtend@^4.0.2, xtend@~4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54" From 1c67814f77f877b88cf46ae00e8646749d8610d7 Mon Sep 17 00:00:00 2001 From: You-j Date: Fri, 3 Sep 2021 19:23:50 +0900 Subject: [PATCH 039/246] fix contorl code - app initialized --- figma/src/ui.tsx | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/figma/src/ui.tsx b/figma/src/ui.tsx index 82fd4b7c..0c77122d 100644 --- a/figma/src/ui.tsx +++ b/figma/src/ui.tsx @@ -16,12 +16,10 @@ function LiteHostedAppConnector() { useEffect(() => { if (frame) { window.addEventListener("message", (event) => { - // console.log("event recievd from lite-fima-app", event.data); - if (event.data == "plugin-app-initialized") { + if (event.data === "plugin-app-initialized") { setInitialized(true); - } - - if ("pluginMessage" in event.data) { + return; + } else if ("pluginMessage" in event.data) { if (event.data.pluginMessage.__proxy_request_from_hosted_plugin) { handle(event.data.pluginMessage); return; From c1d5a65db7ef14ace203d5025f3343180a76de0c Mon Sep 17 00:00:00 2001 From: You-j Date: Mon, 6 Sep 2021 19:52:45 +0900 Subject: [PATCH 040/246] update @code-ui/docstring package --- app/lib/pages/code/code-options-control.tsx | 5 ++-- app/package.json | 6 ++--- yarn.lock | 30 +++++++++++++++++---- 3 files changed, 30 insertions(+), 11 deletions(-) diff --git a/app/lib/pages/code/code-options-control.tsx b/app/lib/pages/code/code-options-control.tsx index 2af0182f..9acc8c97 100644 --- a/app/lib/pages/code/code-options-control.tsx +++ b/app/lib/pages/code/code-options-control.tsx @@ -1,7 +1,6 @@ import React, { useEffect, useState } from "react"; -import { IField, Option } from "@code-ui/docstring/dist/lib/field/type"; -import { LanguageType } from "@code-ui/docstring/dist/lib/type"; -import { CodeLikeView as DocstringView } from "@code-ui/docstring"; +import { IField, LanguageType, Option } from "@code-ui/docstring/dist/lib/type"; +import { Docstring as DocstringView } from "@code-ui/docstring"; import { Framework, FrameworkOption, diff --git a/app/package.json b/app/package.json index c2632091..917deec6 100644 --- a/app/package.json +++ b/app/package.json @@ -7,14 +7,14 @@ "author": "bridged.xyz by softmarshmallow ", "scripts": {}, "dependencies": { + "@analytics.bridged.xyz/internal": "^0.0.9", "@assistant/icons": "0.0.0", "@assistant/lint-icons": "0.0.0", - "@analytics.bridged.xyz/internal": "^0.0.9", "@base-sdk-fp/auth": "0.1.0-2", "@base-sdk/base": "0.1.0-5", "@base-sdk/functions-code-format": "^0.0.0", "@bridged.xyz/base-sdk": "^0.0.2-1", - "@code-ui/docstring": "^0.0.9", + "@code-ui/docstring": "^0.0.12", "@design-sdk/universal": "^0.0.0", "@designto/code": "0.0.1", "@emotion/react": "^11.4.0", @@ -49,4 +49,4 @@ "@types/react-dom": "^16.9.8", "@types/react-router-dom": "^5.1.8" } -} \ No newline at end of file +} diff --git a/yarn.lock b/yarn.lock index 6eca9254..9fc2341c 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1052,6 +1052,11 @@ resolved "https://registry.yarnpkg.com/@code-ui/color-scheme/-/color-scheme-0.0.0.tgz#9f7b1d32e33193166c2958dec999c9fbf9009c8d" integrity sha512-KqxYgHgEZYEqs0+n2wX4cIAo4PpBtsLDHxWJcUdXcYeV9u0cTVQ9qJA/8M+d44L6Hu8sYz+lM7f5q2o3W4hloQ== +"@code-ui/color-scheme@^0.0.2": + version "0.0.2" + resolved "https://registry.yarnpkg.com/@code-ui/color-scheme/-/color-scheme-0.0.2.tgz#aa3e805068591cad4f2f7f476d89fba037cb4d85" + integrity sha512-Z7YHcEj/2+6oBEQITlxC3qJyRbhilsr0xyeKUJ4SBdY+MTVWmMKN5P/zvVO7DUQ/Lqi9E6bKSk9VOvvfFwvKdQ== + "@code-ui/core@^0.0.1": version "0.0.1" resolved "https://registry.yarnpkg.com/@code-ui/core/-/core-0.0.1.tgz#42d8ecea95ffa90037778a1b8fde537956158181" @@ -1061,14 +1066,22 @@ "@code-ui/token" "^0.0.1" handlebars "^4.7.7" -"@code-ui/docstring@^0.0.9": - version "0.0.9" - resolved "https://registry.yarnpkg.com/@code-ui/docstring/-/docstring-0.0.9.tgz#d46d6024924f4ec6f1e3cceee4816a23c903f35d" - integrity sha512-xe2vUOtUJmTgQSn9+dDpDaWRvc6B696wAKID+mfGA3s8WwncAOiE60mQJbxq4Td+HwyWDpaEOZScb/1/OEDDqw== +"@code-ui/core@^0.0.2": + version "0.0.2" + resolved "https://registry.yarnpkg.com/@code-ui/core/-/core-0.0.2.tgz#40ea9c3284e8b33f6c6201f16129707edad22dbf" + integrity sha512-uDluALu5H3uh8Qsg7ACnXccaNxwmnXntTlaSWr+R/nXb1LnMJGaO5bBuaw16UbA86DjDz2eWCK1iierdb47KWA== dependencies: - "@tippyjs/react" "^4.2.5" + "@code-ui/color-scheme" "^0.0.2" + "@code-ui/token" "^0.0.2-beta" handlebars "^4.7.7" +"@code-ui/docstring@^0.0.12": + version "0.0.12" + resolved "https://registry.yarnpkg.com/@code-ui/docstring/-/docstring-0.0.12.tgz#8e3b2b3ef67ee7927e564377bd844329278eef42" + integrity sha512-1418Jsu5Nk9bzxmHO5YoY1Y4MAFduBzhrd0dIZ1IaDWcLzxsaHxkPyRmj16lt8ThYnhlmcYLH6GzuRk4hXQmkg== + dependencies: + "@code-ui/core" "^0.0.2" + "@code-ui/interface@^0.0.5": version "0.0.5" resolved "https://registry.yarnpkg.com/@code-ui/interface/-/interface-0.0.5.tgz#0b967f91cf648b7c8e1f60891e95031f28783fcc" @@ -1086,6 +1099,13 @@ "@tippyjs/react" "^4.2.5" handlebars "^4.7.7" +"@code-ui/token@^0.0.2-beta": + version "0.0.2" + resolved "https://registry.yarnpkg.com/@code-ui/token/-/token-0.0.2.tgz#c44f8cce112a938b7dbd0608a0f3cd2e082e65f8" + integrity sha512-JKNvZ1TcRjW/uHwQ8bghIpEU4w97F+dwWt4TKu8tx9I42Rmy3xeqN9Fq4s9+M2pt3xYjRER7CwYq9s+R2ye6Qg== + dependencies: + "@tippyjs/react" "^4.2.5" + "@design-sdk/figma-remote-api@0.0.0": version "0.0.0" resolved "https://registry.yarnpkg.com/@design-sdk/figma-remote-api/-/figma-remote-api-0.0.0.tgz#c1937575bbf824ca8fc45141db5327dd98d789ff" From 0d9ccb54a8c8adcba886a3e006e1bf27490af300 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 7 Sep 2021 20:36:23 +0900 Subject: [PATCH 041/246] register code-syntax-hightliter with staging - `beta` --- app/lib/main/index.tsx | 11 ++++++----- app/lib/navigation/layout-preference.ts | 9 ++++++++- app/lib/navigation/pages.ts | 8 ++++++++ app/lib/navigation/release-visibility-preference.ts | 1 + app/lib/navigation/work-screen.ts | 1 + .../components/select.tsx | 1 + 6 files changed, 25 insertions(+), 6 deletions(-) diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx index 6b8fd39f..8a89709d 100644 --- a/app/lib/main/index.tsx +++ b/app/lib/main/index.tsx @@ -62,9 +62,7 @@ function Screen(props: { screen: WorkScreen }) { case WorkScreen.component: return ; case WorkScreen.layout: - // return ; - // FIXME: temporary dev - return ; + return ; case WorkScreen.icon: return ; case WorkScreen.lint: @@ -85,6 +83,8 @@ function Screen(props: { screen: WorkScreen }) { return ; case WorkScreen.tool_data_mapper: return ; + case WorkScreen.tool_code_syntax_highlighter: + return ; case WorkScreen.scene_upload_steps_final: return ; case WorkScreen.signin: @@ -236,8 +236,9 @@ function RouterTabNavigationApp(props) { function Home() { const history = useHistory(); - const [savedLayout, setSavedLayout] = - useState(undefined); + const [savedLayout, setSavedLayout] = useState( + undefined + ); useEffect(() => { loadLayout() diff --git a/app/lib/navigation/layout-preference.ts b/app/lib/navigation/layout-preference.ts index c112eae1..245ecef2 100644 --- a/app/lib/navigation/layout-preference.ts +++ b/app/lib/navigation/layout-preference.ts @@ -15,7 +15,12 @@ export function getWorkmodeTabLayout(workspaceMode: WorkMode): TabLayout { WorkScreen.lint, ]; case WorkMode.design: - return [WorkScreen.icon, WorkScreen.layout, WorkScreen.lint]; + return [ + WorkScreen.icon, + WorkScreen.layout, + WorkScreen.lint, + WorkScreen.tool_code_syntax_highlighter /** temporarily placing under design workmode. though, it won't matter since code-syntax-hightlight will still be on beta staging. */, + ]; case WorkMode.content: return [WorkScreen.g11n, WorkScreen.exporter]; case WorkMode.settings: @@ -58,6 +63,8 @@ export function workScreenToName(appMode: WorkScreen): string { return "exporter"; case WorkScreen.g11n: return "globalization"; + case WorkScreen.tool_code_syntax_highlighter: + return "syntax highlight"; case WorkScreen.tool_desing_button_maker: return "button maker"; case WorkScreen.tool_font_replacer: diff --git a/app/lib/navigation/pages.ts b/app/lib/navigation/pages.ts index 49870294..ee326686 100644 --- a/app/lib/navigation/pages.ts +++ b/app/lib/navigation/pages.ts @@ -94,6 +94,13 @@ const page_toolbox_data_mapper: PageConfig = { path: "/toolbox/data-mapper", }; +const page_toolbox_code_syntax_highlight: PageConfig = { + id: WorkScreen.tool_code_syntax_highlighter, + title: "Code syntax highlighter", + /** this is temporarily under design workmode. - change under toolbox after workmode preference switch is ready. */ + path: "/design/code-syntax-highlight", +}; + const page_scene_upload_steps_final: PageConfig = { id: WorkScreen.scene_upload_steps_final, title: "Review your scene", // not used @@ -123,6 +130,7 @@ const all_pages: PageConfig[] = [ page_code_preview, page_code_component, page_code_lint, + page_toolbox_code_syntax_highlight /** temporarily under design workmode */, // standalones page_signup, page_about, diff --git a/app/lib/navigation/release-visibility-preference.ts b/app/lib/navigation/release-visibility-preference.ts index 1c2e5f04..f0641a6e 100644 --- a/app/lib/navigation/release-visibility-preference.ts +++ b/app/lib/navigation/release-visibility-preference.ts @@ -17,6 +17,7 @@ const SCREEN_VISIBILITY_PREFERENCE: Map = new Map([ [WorkScreen.g11n, "beta"], [WorkScreen.exporter, "beta"], [WorkScreen.dev, "beta"], + [WorkScreen.tool_code_syntax_highlighter, "beta"], [WorkScreen.tool_desing_button_maker, "alpha"], [WorkScreen.tool_font_replacer, "release"], [WorkScreen.tool_meta_editor, "release"], diff --git a/app/lib/navigation/work-screen.ts b/app/lib/navigation/work-screen.ts index ae07362d..67a61cc3 100644 --- a/app/lib/navigation/work-screen.ts +++ b/app/lib/navigation/work-screen.ts @@ -15,6 +15,7 @@ export enum WorkScreen { slot = "slot", exporter = "exporter", tool_desing_button_maker = "tool_desing_button_maker", + tool_code_syntax_highlighter = "tool_code_syntax_highlighter", tool_font_replacer = "tool_font_replacer", tool_meta_editor = "tool_meta_editor", tool_batch_meta_editor = "tool_batch_meta_editor", diff --git a/packages/app-design-text-code-syntax-hightlight/components/select.tsx b/packages/app-design-text-code-syntax-hightlight/components/select.tsx index 51b5f0c3..2adeadc1 100644 --- a/packages/app-design-text-code-syntax-hightlight/components/select.tsx +++ b/packages/app-design-text-code-syntax-hightlight/components/select.tsx @@ -36,6 +36,7 @@ const Select: React.FC = ({ onChange={(event) => { onChange(event); }} + value={current} input={} > {collection.map((item, index) => { From c61e54d167374a0169a2753c013583e6b5787a4e Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 7 Sep 2021 20:42:25 +0900 Subject: [PATCH 042/246] yarn --- yarn.lock | 114 +++++++++++++++++++++++------------------------------- 1 file changed, 49 insertions(+), 65 deletions(-) diff --git a/yarn.lock b/yarn.lock index b37ff904..104b4f79 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1439,7 +1439,7 @@ dependencies: regenerator-runtime "^0.13.4" -"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.8", "@babel/runtime@^7.5.0", "@babel/runtime@^7.7.6": +"@babel/runtime@^7.0.0", "@babel/runtime@^7.10.2", "@babel/runtime@^7.12.13", "@babel/runtime@^7.12.5", "@babel/runtime@^7.14.8", "@babel/runtime@^7.5.0", "@babel/runtime@^7.7.6": version "7.15.4" resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.4.tgz#fd17d16bfdf878e6dd02d19753a39fa8a8d9c84a" integrity sha512-99catp6bHCaxr4sJ/DbTGgHS4+Rs2RVd2g7iOap6SLGPDknRK9ztKNsE/Fg6QhSeh1FGE5f6gHGQmvvn3I3xhw== @@ -2223,19 +2223,19 @@ source-map "^0.6.1" write-file-atomic "^3.0.0" -"@jest/transform@^27.0.6": - version "27.0.6" - resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-27.0.6.tgz#189ad7107413208f7600f4719f81dd2f7278cc95" - integrity sha512-rj5Dw+mtIcntAUnMlW/Vju5mr73u8yg+irnHwzgtgoeI6cCPOvUwQ0D1uQtc/APmWgvRweEb1g05pkUpxH3iCA== +"@jest/transform@^27.1.0": + version "27.1.0" + resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-27.1.0.tgz#962e385517e3d1f62827fa39c305edcc3ca8544b" + integrity sha512-ZRGCA2ZEVJ00ubrhkTG87kyLbN6n55g1Ilq0X9nJb5bX3MhMp3O6M7KG+LvYu+nZRqG5cXsQnJEdZbdpTAV8pQ== dependencies: "@babel/core" "^7.1.0" - "@jest/types" "^27.0.6" + "@jest/types" "^27.1.0" babel-plugin-istanbul "^6.0.0" chalk "^4.0.0" convert-source-map "^1.4.0" fast-json-stable-stringify "^2.0.0" graceful-fs "^4.2.4" - jest-haste-map "^27.0.6" + jest-haste-map "^27.1.0" jest-regex-util "^27.0.6" jest-util "^27.1.0" micromatch "^4.0.4" @@ -3654,17 +3654,7 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-16.6.1.tgz#aee62c7b966f55fc66c7b6dfa1d58db2a616da61" integrity sha512-Sr7BhXEAer9xyGuCN3Ek9eg9xPviCF2gfu9kTfuU2HkTVAMYSDeX40fvpmo72n5nansg3nsBjuQBrsS28r+NUw== -"@types/node@^14.0.10": - version "14.17.14" - resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.14.tgz#6fda9785b41570eb628bac27be4b602769a3f938" - integrity sha512-rsAj2u8Xkqfc332iXV12SqIsjVi07H479bOP4q94NAcjzmAvapumEhuVIt53koEf7JFrpjgNKjBga5Pnn/GL8A== - -"@types/node@^14.11.8": - version "14.17.12" - resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.12.tgz#7a31f720b85a617e54e42d24c4ace136601656c7" - integrity sha512-vhUqgjJR1qxwTWV5Ps5txuy2XMdf7Fw+OrdChRboy8BmWUPkckOhphaohzFG6b8DW7CrxaBMdrdJ47SYFq1okw== - -"@types/node@^14.11.8", "@types/node@^14.14.20": +"@types/node@^14.0.10", "@types/node@^14.11.8", "@types/node@^14.14.20": version "14.17.14" resolved "https://registry.yarnpkg.com/@types/node/-/node-14.17.14.tgz#6fda9785b41570eb628bac27be4b602769a3f938" integrity sha512-rsAj2u8Xkqfc332iXV12SqIsjVi07H479bOP4q94NAcjzmAvapumEhuVIt53koEf7JFrpjgNKjBga5Pnn/GL8A== @@ -4492,10 +4482,10 @@ autoprefixer@^9.8.6: postcss "^7.0.32" postcss-value-parser "^4.1.0" -available-typed-arrays@^1.0.4: - version "1.0.4" - resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.4.tgz#9e0ae84ecff20caae6a94a1c3bc39b955649b7a9" - integrity sha512-SA5mXJWrId1TaQjfxUYghbqQ/hYioKmLJvPJyDuYRtXXenFNMjj4hSSt1Cf1xsuXSXrtxrVC5Ot4eU6cOtBDdA== +available-typed-arrays@^1.0.5: + version "1.0.5" + resolved "https://registry.yarnpkg.com/available-typed-arrays/-/available-typed-arrays-1.0.5.tgz#92f95616501069d07d10edb2fc37d3e1c65123b7" + integrity sha512-DMD0KiN46eipeziST1LPP/STfDU0sufISXmjSgvVsoU2tqxctQeASejWcfNtxYKqETM1UxQ8sp2OrSBWpHY6sw== axios-retry@^3.1.9: version "3.1.9" @@ -4954,17 +4944,6 @@ browserslist@^4.12.0, browserslist@^4.16.8: escalade "^3.1.1" node-releases "^1.1.75" -browserslist@^4.16.7: - version "4.16.8" - resolved "https://registry.yarnpkg.com/browserslist/-/browserslist-4.16.8.tgz#cb868b0b554f137ba6e33de0ecff2eda403c4fb0" - integrity sha512-sc2m9ohR/49sWEbPj14ZSSZqp+kbi16aLao42Hmn3Z8FpjuMaq2xCA2l4zl9ITfyzvnvyE0hcg62YkIGKxgaNQ== - dependencies: - caniuse-lite "^1.0.30001251" - colorette "^1.3.0" - electron-to-chromium "^1.3.811" - escalade "^3.1.1" - node-releases "^1.1.75" - bs-logger@0.x: version "0.2.6" resolved "https://registry.yarnpkg.com/bs-logger/-/bs-logger-0.2.6.tgz#eb7d365307a72cf974cc6cda76b68354ad336bd8" @@ -5166,7 +5145,7 @@ caniuse-lite@^1.0.30001109, caniuse-lite@^1.0.30001125, caniuse-lite@^1.0.300012 resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001255.tgz#f3b09b59ab52e39e751a569523618f47c4298ca0" integrity sha512-F+A3N9jTZL882f/fg/WWVnKSu6IOo3ueLz4zwaOPbPYHNmM/ZaDUyzyJwS1mZhX7Ex5jqTyW599Gdelh5PDYLQ== -caniuse-lite@^1.0.30001202, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001228, caniuse-lite@^1.0.30001251: +caniuse-lite@^1.0.30001202, caniuse-lite@^1.0.30001219, caniuse-lite@^1.0.30001228: version "1.0.30001252" resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30001252.tgz#cb16e4e3dafe948fc4a9bb3307aea054b912019a" integrity sha512-I56jhWDGMtdILQORdusxBOH+Nl/KgQSdDmpJezYddnAkVOmnoU8zwjTV9xAjMIYxr0iPreEAVylCGcmHCjfaOw== @@ -5275,7 +5254,7 @@ chokidar@^2.1.8: optionalDependencies: fsevents "^1.2.7" -chokidar@^3.4.2: +chokidar@^3.4.1, chokidar@^3.4.2: version "3.5.2" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-3.5.2.tgz#dba3976fcadb016f66fd365021d91600d01c1e75" integrity sha512-ekGhOnNVPgT77r4K/U3GDhu+FQ2S8TnK/s2KbIGXi0SZWuwkZ2QNyfWdZW+TVfn84DpEP7rLeCt2UI6bJ8GwbQ== @@ -5656,15 +5635,7 @@ copy-to-clipboard@^3.3.1: dependencies: toggle-selection "^1.0.6" -core-js-compat@^3.14.0, core-js-compat@^3.16.0: - version "3.17.2" - resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.17.2.tgz#f461ab950c0a0ffedfc327debf28b7e518950936" - integrity sha512-lHnt7A1Oqplebl5i0MrQyFv/yyEzr9p29OjlkcsFRDDgHwwQyVckfRGJ790qzXhkwM8ba4SFHHa2sO+T5f1zGg== - dependencies: - browserslist "^4.16.8" - semver "7.0.0" - -core-js-compat@^3.8.1: +core-js-compat@^3.14.0, core-js-compat@^3.16.0, core-js-compat@^3.8.1: version "3.17.2" resolved "https://registry.yarnpkg.com/core-js-compat/-/core-js-compat-3.17.2.tgz#f461ab950c0a0ffedfc327debf28b7e518950936" integrity sha512-lHnt7A1Oqplebl5i0MrQyFv/yyEzr9p29OjlkcsFRDDgHwwQyVckfRGJ790qzXhkwM8ba4SFHHa2sO+T5f1zGg== @@ -6331,7 +6302,7 @@ electron-to-chromium@^1.3.564, electron-to-chromium@^1.3.830: resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.830.tgz#40e3144204f8ca11b2cebec83cf14c20d3499236" integrity sha512-gBN7wNAxV5vl1430dG+XRcQhD4pIeYeak6p6rjdCtlz5wWNwDad8jwvphe5oi1chL5MV6RNRikfffBBiFuj+rQ== -electron-to-chromium@^1.3.723, electron-to-chromium@^1.3.811: +electron-to-chromium@^1.3.723: version "1.3.827" resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.827.tgz#c725e8db8c5be18b472a919e5f57904512df0fc1" integrity sha512-ye+4uQOY/jbjRutMcE/EmOcNwUeo1qo9aKL2tPyb09cU3lmxNeyDF4RWiemmkknW+p29h7dyDqy02higTxc9/A== @@ -6934,7 +6905,7 @@ finalhandler@~1.1.2: statuses "~1.5.0" unpipe "~1.0.0" -find-cache-dir@3.3.1, find-cache-dir@^3.3.1: +find-cache-dir@3.3.1: version "3.3.1" resolved "https://registry.yarnpkg.com/find-cache-dir/-/find-cache-dir-3.3.1.tgz#89b33fad4a4670daa94f855f7fbe31d6d84fe880" integrity sha512-t2GDMt3oGC/v+BMwzmllWDuJF/xcDtE5j/fCGbqDD7OLuJkj0cfh1YSA5VKPvwMeLFLNDBkwOKZ2X85jGLVftQ== @@ -7675,6 +7646,11 @@ hey-listen@^1.0.8: resolved "https://registry.yarnpkg.com/hey-listen/-/hey-listen-1.0.8.tgz#8e59561ff724908de1aa924ed6ecc84a56a9aa68" integrity sha512-COpmrF2NOg4TBWUJ5UVyaCU2A88wEMkUPK4hNqyCkqHbxT92BbvfjoSozkAIIm6XhicGlJHhFdullInrdhwU8Q== +highlight.js@9.15.10: + version "9.15.10" + resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-9.15.10.tgz#7b18ed75c90348c045eef9ed08ca1319a2219ad2" + integrity sha512-RoV7OkQm0T3os3Dd2VHLNMoaoDVx77Wygln3n9l5YV172XonWG6rgQD3XnF/BuFFZw9A0TJgmMSO8FEWQgvcXw== + highlight.js@^10.1.1, highlight.js@~10.7.0: version "10.7.3" resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531" @@ -8570,10 +8546,10 @@ iterate-value@^1.0.2: es-get-iterator "^1.0.2" iterate-iterator "^1.0.1" -jest-changed-files@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-27.0.6.tgz#bed6183fcdea8a285482e3b50a9a7712d49a7a8b" - integrity sha512-BuL/ZDauaq5dumYh5y20sn4IISnf1P9A0TDswTxUi84ORGtVa86ApuBHqICL0vepqAnZiY6a7xeSPWv2/yy4eA== +jest-changed-files@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-27.1.0.tgz#42da6ea00f06274172745729d55f42b60a9dffe0" + integrity sha512-eRcb13TfQw0xiV2E98EmiEgs9a5uaBIqJChyl0G7jR9fCIvGjXovnDS6Zbku3joij4tXYcSK4SE1AXqOlUxjWg== dependencies: "@jest/types" "^27.1.0" execa "^5.0.0" @@ -8743,10 +8719,10 @@ jest-haste-map@^26.6.2: optionalDependencies: fsevents "^2.1.2" -jest-haste-map@^27.0.6: - version "27.0.6" - resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-27.0.6.tgz#4683a4e68f6ecaa74231679dca237279562c8dc7" - integrity sha512-4ldjPXX9h8doB2JlRzg9oAZ2p6/GpQUNAeiYXqcpmrKbP0Qev0wdZlxSMOmz8mPOEnt4h6qIzXFLDi8RScX/1w== +jest-haste-map@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-27.1.0.tgz#a39f456823bd6a74e3c86ad25f6fa870428326bf" + integrity sha512-7mz6LopSe+eA6cTFMf10OfLLqRoIPvmMyz5/OnSXnHO7hB0aDP1iIeLWCXzAcYU5eIJVpHr12Bk9yyq2fTW9vg== dependencies: "@jest/types" "^27.1.0" "@types/graceful-fs" "^4.1.2" @@ -8987,10 +8963,22 @@ jest-util@^26.6.2: is-ci "^2.0.0" micromatch "^4.0.2" -jest-util@^27.0.0, jest-util@^27.0.6: +jest-util@^27.0.0: version "27.0.6" resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-27.0.6.tgz#e8e04eec159de2f4d5f57f795df9cdc091e50297" integrity sha512-1JjlaIh+C65H/F7D11GNkGDDZtDfMEM8EBXsvd+l/cxtgQ6QhxuloOaiayt89DxUvDarbVhqI98HhgrM1yliFQ== + dependencies: + "@jest/types" "^27.0.6" + "@types/node" "*" + chalk "^4.0.0" + graceful-fs "^4.2.4" + is-ci "^3.0.0" + picomatch "^2.2.3" + +jest-util@^27.1.0: + version "27.1.0" + resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-27.1.0.tgz#06a53777a8cb7e4940ca8e20bf9c67dd65d9bd68" + integrity sha512-edSLD2OneYDKC6gZM1yc+wY/877s/fuJNoM1k3sOEpzFyeptSmke3SLnk1dDHk9CgTA+58mnfx3ew3J11Kes/w== dependencies: "@jest/types" "^27.1.0" "@types/node" "*" @@ -10807,16 +10795,7 @@ postcss@8.2.15: nanoid "^3.1.23" source-map "^0.6.1" -postcss@^7.0.14, postcss@^7.0.32, postcss@^7.0.5, postcss@^7.0.6: - version "7.0.36" - resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.36.tgz#056f8cffa939662a8f5905950c07d5285644dfcb" - integrity sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw== - dependencies: - chalk "^2.4.2" - source-map "^0.6.1" - supports-color "^6.1.0" - -postcss@^7.0.26, postcss@^7.0.36: +postcss@^7.0.14, postcss@^7.0.26, postcss@^7.0.32, postcss@^7.0.36, postcss@^7.0.5, postcss@^7.0.6: version "7.0.36" resolved "https://registry.yarnpkg.com/postcss/-/postcss-7.0.36.tgz#056f8cffa939662a8f5905950c07d5285644dfcb" integrity sha512-BebJSIUMwJHRH0HAQoxN4u1CN86glsrwsW0q7T+/m44eXOUAxSNdHRkNZPYz5vVUbg17hFgOQDE7fZk7li3pZw== @@ -13800,6 +13779,11 @@ xmlhttprequest@1.8.0: resolved "https://registry.yarnpkg.com/xmlhttprequest/-/xmlhttprequest-1.8.0.tgz#67fe075c5c24fef39f9d65f5f7b7fe75171968fc" integrity sha1-Z/4HXFwk/vOfnWX197f+dRcZaPw= +xpath@^0.0.32: + version "0.0.32" + resolved "https://registry.yarnpkg.com/xpath/-/xpath-0.0.32.tgz#1b73d3351af736e17ec078d6da4b8175405c48af" + integrity sha512-rxMJhSIoiO8vXcWvSifKqhvV96GjiD5wYb8/QHdoRyQvraTpp4IEv944nhGausZZ3u7dhQXteZuZbaqfpB7uYw== + xtend@^4.0.0, xtend@^4.0.1, xtend@^4.0.2, xtend@~4.0.1: version "4.0.2" resolved "https://registry.yarnpkg.com/xtend/-/xtend-4.0.2.tgz#bb72779f5fa465186b1f438f674fa347fdb5db54" From 66508abeb8aa0541f212fe29e2c9dbd79e6e3a68 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 7 Sep 2021 21:48:28 +0900 Subject: [PATCH 043/246] rm webpack html inline plugin since it's no longer required in hosted version of plugin for figma --- figma/webpack.config.js | 30 ++++-------------------------- 1 file changed, 4 insertions(+), 26 deletions(-) diff --git a/figma/webpack.config.js b/figma/webpack.config.js index b33e5388..7fb6aec2 100644 --- a/figma/webpack.config.js +++ b/figma/webpack.config.js @@ -1,8 +1,7 @@ -const HtmlWebpackInlineSourcePlugin = require("html-webpack-inline-source-plugin"); const HtmlWebpackPlugin = require("html-webpack-plugin"); const path = require("path"); -const Dotenv = require("dotenv-webpack"); const TerserPlugin = require("terser-webpack-plugin"); +const InlineChunkHtmlPlugin = require("react-dev-utils/InlineChunkHtmlPlugin"); module.exports = (env, argv) => ({ mode: argv.mode === "production" ? "production" : "development", @@ -49,28 +48,7 @@ module.exports = (env, argv) => ({ // minimize optimization: { minimize: false, - minimizer: [ - new TerserPlugin({ - terserOptions: { - sourceMap: true, - compress: { - keep_classnames: true, // keep class name cause, flutter-builder uses class name reflection. - keep_fnames: true, - drop_console: true, - conditionals: true, - unused: true, - comparisons: true, - dead_code: true, - if_return: true, - join_vars: true, - warnings: false, - }, - output: { - comments: false, - }, - }, - }), - ], + minimizer: [new TerserPlugin()], }, // Tells Webpack to generate "ui.html" and to inline "ui.ts" into it @@ -81,7 +59,7 @@ module.exports = (env, argv) => ({ inlineSource: ".(js)$", chunks: ["ui"], }), - new HtmlWebpackInlineSourcePlugin(), - new Dotenv(), + // https://github.com/jantimon/html-webpack-plugin/issues/1379#issuecomment-610208969 + new InlineChunkHtmlPlugin(HtmlWebpackPlugin, [/\.(js|css)$/]), ], }); From ed690360f68a4dd8a8c1f24dfdd2891b92e965bc Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 7 Sep 2021 21:49:18 +0900 Subject: [PATCH 044/246] yarn --- yarn.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index 104b4f79..c3e6bd30 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2255,7 +2255,7 @@ "@types/yargs" "^15.0.0" chalk "^4.0.0" -"@jest/types@^27.1.0": +"@jest/types@^27.0.6", "@jest/types@^27.1.0": version "27.1.0" resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.1.0.tgz#674a40325eab23c857ebc0689e7e191a3c5b10cc" integrity sha512-pRP5cLIzN7I7Vp6mHKRSaZD7YpBTK7hawx5si8trMKqk4+WOdK8NEKOTO2G8PKWD1HbKMVckVB6/XHh/olhf2g== From d2749606e7b3aeaf31e093ed93a57de3caeddc72 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 8 Sep 2021 12:57:59 +0900 Subject: [PATCH 045/246] bump packages --- packages/design-sdk | 2 +- packages/design-to-code | 2 +- packages/reflect-core | 2 +- yarn.lock | 5 +++++ 4 files changed, 8 insertions(+), 3 deletions(-) diff --git a/packages/design-sdk b/packages/design-sdk index 77e7b7b7..620d2209 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit 77e7b7b725b92c789d062f71c8881f810189aa11 +Subproject commit 620d220970d0136be4db9e88338ce57d540b1c28 diff --git a/packages/design-to-code b/packages/design-to-code index b89e2b61..21fc05c9 160000 --- a/packages/design-to-code +++ b/packages/design-to-code @@ -1 +1 @@ -Subproject commit b89e2b61b4f8b01e6b77844d694b22ff3708f7bf +Subproject commit 21fc05c90793a1bb24c9ebe46836e12779fe157e diff --git a/packages/reflect-core b/packages/reflect-core index 9c9bded5..91342a7a 160000 --- a/packages/reflect-core +++ b/packages/reflect-core @@ -1 +1 @@ -Subproject commit 9c9bded514fa046c44746bccc2e4268a1b17cfe2 +Subproject commit 91342a7a4fdc5ea1b9667b9a015351748b5c4450 diff --git a/yarn.lock b/yarn.lock index 9fc2341c..dbb8a128 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2140,6 +2140,11 @@ resolved "https://registry.yarnpkg.com/@reflect-ui/uiutils/-/uiutils-0.1.2.tgz#1020e557d2fdbf512a10b97b0c424c430ff7ad38" integrity sha512-uhE5Btrzud86MuNykB23EfEHn/jBJ8BicYjOkq7ZFgh38dnvF54vqZV0/LNYF77Z+3jTgQMwZR++e4gL8zCyHw== +"@reflect-ui/uiutils@0.1.2-1": + version "0.1.2-1" + resolved "https://registry.yarnpkg.com/@reflect-ui/uiutils/-/uiutils-0.1.2-1.tgz#b88d08223eb19ab5e6dd5ecf4a03075a41bb89c1" + integrity sha512-fv3mITNqM6U7DEpOr5B6c9lmmkj22r3114aR8Tvp2izMIndLbFJBzLnYEVA07bHiglic1POWCePwYVhB+bAF1Q== + "@sinonjs/commons@^1.7.0": version "1.8.3" resolved "https://registry.yarnpkg.com/@sinonjs/commons/-/commons-1.8.3.tgz#3802ddd21a50a949b6721ddd72da36e67e7f1b2d" From 7927f427e8cd4dccf40e9cbc0d70a64b2064b342 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 8 Sep 2021 13:12:09 +0900 Subject: [PATCH 046/246] update lint screen event listener to be unregistered with hooks --- app/lib/main/index.tsx | 22 ++++++++++++++++++---- packages/app-design-lint/lint-screen.tsx | 13 ++++++++++--- 2 files changed, 28 insertions(+), 7 deletions(-) diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx index 702e21df..f6e9bed6 100644 --- a/app/lib/main/index.tsx +++ b/app/lib/main/index.tsx @@ -233,20 +233,34 @@ function RouterTabNavigationApp(props) { function Home() { const history = useHistory(); - const [savedLayout, setSavedLayout] = - useState(undefined); + const [savedLayout, setSavedLayout] = useState( + undefined + ); useEffect(() => { loadLayout() .then((d) => { setSavedLayout(d); }) + .catch((e) => { + console.log("failed loading layout", e); + }) .finally(() => {}); }, []); if (savedLayout) { - const p = get_page_config(savedLayout.currentWork).path; - history.replace(p); + try { + const p = get_page_config(savedLayout.currentWork).path; + history.replace(p); + } catch (e) { + console.log("failed to load saved layout", e); + console.log( + "this can happen during development, switching between branches, or could happen on production wehn new version lo longer has a page that is previously loaded." + ); + // if somehow, failed loading the path of the current work, we will redirect to the home page. + // this can happen during development, switching between branches, or could happen on production wehn new version lo longer has a page that is previously loaded. + history.replace("/code/preview"); + } } return <>; diff --git a/packages/app-design-lint/lint-screen.tsx b/packages/app-design-lint/lint-screen.tsx index 2e610589..4d6ed338 100644 --- a/packages/app-design-lint/lint-screen.tsx +++ b/packages/app-design-lint/lint-screen.tsx @@ -1,4 +1,4 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import styled from "@emotion/styled"; import { PluginSdk } from "@plugin-sdk/app"; import { ReflectLintFeedback } from "@reflect-ui/lint/lib/feedbacks"; @@ -25,7 +25,7 @@ export const LintScreen = () => { const [isFixingMode, setIsFixingMode] = useState(false); const selection = useSingleSelection(); - window.addEventListener("message", (ev: MessageEvent) => { + const messagehandler = (ev: MessageEvent) => { const msg = ev.data.pluginMessage; if (msg.type == _APP_EVENT_LINT_RESULT_EK) { const _feedbacks = msg.data as Array; @@ -35,7 +35,14 @@ export const LintScreen = () => { setFeedbacks(_feedbacks); } } - }); + }; + + useEffect(() => { + window.addEventListener("message", messagehandler); + return () => { + window.removeEventListener("message", messagehandler); + }; + }, []); function countSelection() { return mapGrandchildren(selection.node, null, { From 90457c03f1edfbc9c8726a935c9bfa9df2c08a59 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 8 Sep 2021 13:13:04 +0900 Subject: [PATCH 047/246] add null safety --- packages/app-design-lint/lint-screen.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/app-design-lint/lint-screen.tsx b/packages/app-design-lint/lint-screen.tsx index 4d6ed338..2af34ed0 100644 --- a/packages/app-design-lint/lint-screen.tsx +++ b/packages/app-design-lint/lint-screen.tsx @@ -27,7 +27,7 @@ export const LintScreen = () => { const messagehandler = (ev: MessageEvent) => { const msg = ev.data.pluginMessage; - if (msg.type == _APP_EVENT_LINT_RESULT_EK) { + if (msg && msg.type == _APP_EVENT_LINT_RESULT_EK) { const _feedbacks = msg.data as Array; if (_feedbacks.length === 0) { PluginSdk.notify("🤩 Neat and clean (nothing to clean)", 2); From af49a736ed271ddd9749dfeb922044ee9e3d53b7 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 8 Sep 2021 13:15:37 +0900 Subject: [PATCH 048/246] update code wrapper bg color to match vscode bg color --- app/lib/pages/code/code-screen.tsx | 7 ++++--- 1 file changed, 4 insertions(+), 3 deletions(-) diff --git a/app/lib/pages/code/code-screen.tsx b/app/lib/pages/code/code-screen.tsx index bbb12014..73fb9f51 100644 --- a/app/lib/pages/code/code-screen.tsx +++ b/app/lib/pages/code/code-screen.tsx @@ -110,8 +110,7 @@ export function CodeScreen() { break; case EK_IMAGE_ASSET_REPOSITORY_MAP: - const imageRepo = - msg.data as repo_assets.TransportableImageRepository; + const imageRepo = msg.data as repo_assets.TransportableImageRepository; repo_assets.ImageHostingRepository.setRepository(imageRepo); break; } @@ -201,9 +200,11 @@ const CopyCodeButton = styled.div` cursor: pointer; `; +const _VSCODE_DARK_BG = "#1e1e1e"; + const CodeWrapper = styled.div` /* 366px is preview(200) + navigation(52+40) + footer btn wrapper(74) height*/ height: calc(100vh - 366px); - background: rgb(42, 39, 52); + background: ${_VSCODE_DARK_BG}; overflow-y: hidden; `; From 461d5936258a2bbc7bb44cd214dc490198009272 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 8 Sep 2021 23:05:57 +0900 Subject: [PATCH 049/246] enable colordecorator to monaco --- packages/design-sdk | 2 +- packages/ui-code-box/editors/monaco-editor.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/design-sdk b/packages/design-sdk index 620d2209..f3b89061 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit 620d220970d0136be4db9e88338ce57d540b1c28 +Subproject commit f3b89061ef5dd1706c8ced28bc72ddb7cf067f1f diff --git a/packages/ui-code-box/editors/monaco-editor.tsx b/packages/ui-code-box/editors/monaco-editor.tsx index 338c5570..cd1f7de8 100644 --- a/packages/ui-code-box/editors/monaco-editor.tsx +++ b/packages/ui-code-box/editors/monaco-editor.tsx @@ -39,7 +39,7 @@ export function MonacoEditor(props: { src: string; language: string }) { options={{ fontFamily: `Menlo, Monaco, 'Courier New', monospace`, fontSize: 14, - + colorDecorators: true, minimap: { // disable minimap a.k.a preview enabled: false, From 06890cc2ea6c8345847d5b21df52aede9566b8fc Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Thu, 9 Sep 2021 15:12:59 +0900 Subject: [PATCH 050/246] update language sorting order for syntax highlight select --- ...esign-text-code-syntax-highligh-screen.tsx | 18 +++--- .../language/language-list.ts | 60 ++++++++++--------- 2 files changed, 40 insertions(+), 38 deletions(-) diff --git a/packages/app-design-text-code-syntax-hightlight/design-text-code-syntax-highligh-screen.tsx b/packages/app-design-text-code-syntax-hightlight/design-text-code-syntax-highligh-screen.tsx index 0d172280..4d993136 100644 --- a/packages/app-design-text-code-syntax-hightlight/design-text-code-syntax-highligh-screen.tsx +++ b/packages/app-design-text-code-syntax-hightlight/design-text-code-syntax-highligh-screen.tsx @@ -25,18 +25,16 @@ export function DesignTextCdoeSyntaxHighligherScreen() { { - setSchemaAndLanguage( - Object.assign(schemaAndLanguage, { - colorSchema: event.target.value, - }) - ); + setSchemaAndLanguage({ + ...schemaAndLanguage, + colorSchema: event.target.value, + }); }} setLanguage={(event) => { - setSchemaAndLanguage( - Object.assign(schemaAndLanguage, { - language: event.target.value, - }) - ); + setSchemaAndLanguage({ + ...schemaAndLanguage, + language: event.target.value, + }); }} />
    diff --git a/packages/app-design-text-code-syntax-hightlight/language/language-list.ts b/packages/app-design-text-code-syntax-hightlight/language/language-list.ts index fde3ddd9..efeb9420 100644 --- a/packages/app-design-text-code-syntax-hightlight/language/language-list.ts +++ b/packages/app-design-text-code-syntax-hightlight/language/language-list.ts @@ -1,4 +1,36 @@ export const language_list = [ + // REGION custom sorting -- most used languages to top + "typescript", + "json", + "javascript", + "markdown", + "dart", + "css", + "scss", + "java", + "kotlin", + "swift", + "objectivec", + "arduino", + "bash", + "python", + "go", + "r", + "rust", + "cpp", + "cs", + "sql", + "yaml", + "xml", + "ini", + "plaintext", + "http", + "nginx", + "php", + "shell", + + // ENDREGION custom sorting -- most used languages to top + "1c", "abnf", "accesslog", @@ -8,10 +40,7 @@ export const language_list = [ "apache", "applescript", "arcade", - "cpp", - "arduino", "armasm", - "xml", "asciidoc", "aspectj", "autohotkey", @@ -19,7 +48,6 @@ export const language_list = [ "avrasm", "awk", "axapta", - "bash", "basic", "bnf", "brainfuck", @@ -35,12 +63,8 @@ export const language_list = [ "cos", "crmsh", "crystal", - "cs", "csp", - "css", "d", - "markdown", - "dart", "delphi", "diff", "django", @@ -68,7 +92,6 @@ export const language_list = [ "gherkin", "glsl", "gml", - "go", "golo", "gradle", "groovy", @@ -78,19 +101,13 @@ export const language_list = [ "haxe", "hsp", "htmlbars", - "http", "hy", "inform7", - "ini", "irpf90", "isbl", - "java", - "javascript", "jboss-cli", - "json", "julia", "julia-repl", - "kotlin", "lasso", "ldif", "leaf", @@ -114,19 +131,15 @@ export const language_list = [ "monkey", "moonscript", "n1ql", - "nginx", "nimrod", "nix", "nsis", - "objectivec", "ocaml", "openscad", "oxygene", "parser3", "pf", "pgsql", - "php", - "plaintext", "pony", "powershell", "processing", @@ -136,43 +149,34 @@ export const language_list = [ "protobuf", "puppet", "purebasic", - "python", "q", "qml", - "r", "reasonml", "rib", "roboconf", "routeros", "rsl", "ruleslanguage", - "rust", "sas", "scala", "scheme", "scilab", - "scss", - "shell", "smali", "smalltalk", "sml", "sqf", - "sql", "stan", "stata", "step21", "stylus", "subunit", - "swift", "taggerscript", - "yaml", "tap", "tcl", "tex", "thrift", "tp", "twig", - "typescript", "vala", "vbnet", "vbscript", From b2f7fd008f0f259471b0f774c4ce81c0cfb6804c Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Thu, 9 Sep 2021 15:22:43 +0900 Subject: [PATCH 051/246] disable response logging --- packages/plugin-sdk-service/index.ts | 26 ++++++++++++++++---------- 1 file changed, 16 insertions(+), 10 deletions(-) diff --git a/packages/plugin-sdk-service/index.ts b/packages/plugin-sdk-service/index.ts index d471a901..7bba8e61 100644 --- a/packages/plugin-sdk-service/index.ts +++ b/packages/plugin-sdk-service/index.ts @@ -387,9 +387,9 @@ async function handleExportEvent(event: HanderProps) { return undefined; } case TargetPlatform.figma: { - const r = await ( - figma.getNodeById(event.data.id) as SceneNode - ).exportAsync({ + const r = await (figma.getNodeById( + event.data.id + ) as SceneNode).exportAsync({ ..._ImageExportOption_to_FigmaCompat(event.data.opt), }); @@ -436,8 +436,14 @@ async function handleBrowserApiEvent(props: TransportPluginEvent) { function handleDragDropped(props: HanderProps) { console.log("handling drop event", props.data); - const { dropPosition, windowSize, offset, itemSize, eventKey, customData } = - props.data; + const { + dropPosition, + windowSize, + offset, + itemSize, + eventKey, + customData, + } = props.data; // Getting the position and size of the visible area of the canvas. const bounds = figma.viewport.bounds; @@ -477,11 +483,11 @@ function response( data: T, error: Error | undefined = undefined ): boolean { - console.info( - `${target_platform.get()}>> responding to request ${requestId} with data ${JSON.stringify( - data - )} and ${error ? "" + error : "no error"}` - ); + // console.info( + // `${target_platform.get()}>> responding to request ${requestId} with data ${JSON.stringify( + // data + // )} and ${error ? "" + error : "no error"}` + // ); const msg = { id: requestId, From 3d290fe78b730cba70eec568171936fd6a8ff058 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Thu, 9 Sep 2021 16:53:35 +0900 Subject: [PATCH 052/246] add theme --- packages/ui-theme/dark.ts | 25 ++++++++ packages/ui-theme/index.ts | 19 ++++++ packages/ui-theme/light.ts | 94 ++++++++++++++++++++++++++++ packages/ui-theme/media-query.ts | 13 ++++ packages/ui-theme/package.json | 7 +++ packages/ui-theme/theme-provider.tsx | 47 ++++++++++++++ 6 files changed, 205 insertions(+) create mode 100644 packages/ui-theme/dark.ts create mode 100644 packages/ui-theme/index.ts create mode 100644 packages/ui-theme/light.ts create mode 100644 packages/ui-theme/media-query.ts create mode 100644 packages/ui-theme/package.json create mode 100644 packages/ui-theme/theme-provider.tsx diff --git a/packages/ui-theme/dark.ts b/packages/ui-theme/dark.ts new file mode 100644 index 00000000..0ea4e6a7 --- /dev/null +++ b/packages/ui-theme/dark.ts @@ -0,0 +1,25 @@ +import * as lightTheme from "./light"; + +export const colors = { + ...lightTheme.colors, + text: "rgb(248,248,250)", + textMuted: "rgb(180,180,180)", + textDisabled: "rgb(100,100,100)", + inputBackground: "rgb(50,50,52)", + divider: "rgba(255,255,255,0.1)", + canvas: { + ...lightTheme.colors.canvas, + background: "rgb(19,20,21)", + }, +}; + +export const textStyles = lightTheme.textStyles; +export const fonts = lightTheme.fonts; +export const sizes = lightTheme.sizes; + +export const dark = { + colors: colors, + fonts: fonts, + textStyles: textStyles, + sizes: sizes, +}; diff --git a/packages/ui-theme/index.ts b/packages/ui-theme/index.ts new file mode 100644 index 00000000..9ef6eb1b --- /dev/null +++ b/packages/ui-theme/index.ts @@ -0,0 +1,19 @@ +import { light } from "./light"; +import { dark } from "./dark"; +import styled, { CreateStyled } from "@emotion/styled"; +export * from "./theme-provider"; + +export const theme = { + dark: dark, + light: light, +}; + +type _Theme = typeof light; +export type Theme = _Theme; + +declare module "@emotion/react" { + export interface Theme extends _Theme {} +} + +//@ts-ignore - below line sometimes throw "Type error: Type 'CreateStyled' is not generic." even if it is generic typed +export default styled as CreateStyled<_Theme>; diff --git a/packages/ui-theme/light.ts b/packages/ui-theme/light.ts new file mode 100644 index 00000000..d5cb24ad --- /dev/null +++ b/packages/ui-theme/light.ts @@ -0,0 +1,94 @@ +import { mediaQuery } from "./media-query"; +import { CSSObject } from "@emotion/css"; + +export const colors = { + text: "rgb(85, 85, 85)", + textMuted: "rgb(166, 166, 166)", + textDisabled: "rgb(166, 166, 166)", + textDecorativeLight: "rgb(168, 185, 212)", + textLink: "rgb(58, 108, 234)", + textLinkFocused: "rgb(35, 82, 124)", + divider: "rgba(0, 0, 0, 0.07)", + primary: "#DADADA", + white: "##FFF", + black: "#000000", + inputBackground: "rgb(240, 240, 242)", + activeBackground: "rgba(0,0,0,0.1)", + button: { + primaryText: "white", + secondaryText: "white", + get primaryBackground() { + return colors.primary; + }, + secondaryBackground: "rgb(160, 160, 160)", + }, + canvas: { + background: "rgb(249,249,249)", + }, + icon: "rgb(139, 139, 139)", + iconSelected: "rgb(220, 220, 220)", +}; + +export const fonts = { + normal: "'Helvetica Neue', Helvetica, Arial, sans-serif", + monospace: "Menlo, Monaco, Consolas, 'Courier New', monospace", +}; + +const typeScale = [3.052, 2.441, 1.953, 1.563, 1.25, 1, 0.85]; + +export const textStyles = { + title: { + fontFamily: fonts.normal, + fontSize: `${typeScale[0]}rem`, + fontWeight: "bold", + lineHeight: "1.4", + [mediaQuery.small]: { + fontSize: "36px", + }, + } as CSSObject, + subtitle: { + fontFamily: fonts.normal, + fontSize: `${typeScale[3]}rem`, + fontWeight: 500, + lineHeight: "1.75", + [mediaQuery.small]: { + fontSize: "18px", + }, + } as CSSObject, + body: { + fontFamily: fonts.normal, + fontSize: `${typeScale[5]}rem`, + fontWeight: 400, + lineHeight: "1.75", + } as CSSObject, + code: { + fontFamily: fonts.monospace, + fontSize: "90%", + lineHeight: "1.5", + } as CSSObject, +}; + +export const sizes = { + body: { + padding: { + left: 16, + right: 16, + }, + }, + spacing: { + nano: 2, + micro: 4, + small: 8, + medium: 16, + large: 32, + xlarge: 64, + xxlarge: 128, + }, +}; + +export const light = { + colors: colors, + fonts: fonts, + textStyles: textStyles, + sizes: sizes, +}; diff --git a/packages/ui-theme/media-query.ts b/packages/ui-theme/media-query.ts new file mode 100644 index 00000000..0fdd2ce3 --- /dev/null +++ b/packages/ui-theme/media-query.ts @@ -0,0 +1,13 @@ +export const size = { + medium: "800px", + large: "1280px", + xlarge: "1550px", + xxlarge: "1680px", +}; + +export const mediaQuery = { + small: `@media (max-width: ${size.medium})`, + medium: `@media (max-width: ${size.large}) and (min-width: ${size.medium})`, + large: `@media (max-width: ${size.xlarge}) and (min-width: ${size.large})`, + xlarge: `@media (min-width: ${size.xlarge})`, +}; diff --git a/packages/ui-theme/package.json b/packages/ui-theme/package.json new file mode 100644 index 00000000..d34d33f6 --- /dev/null +++ b/packages/ui-theme/package.json @@ -0,0 +1,7 @@ +{ + "name": "@ui/theme", + "version": "0.0.0", + "private": false, + "author": "Grida.co", + "license": "MIT" +} \ No newline at end of file diff --git a/packages/ui-theme/theme-provider.tsx b/packages/ui-theme/theme-provider.tsx new file mode 100644 index 00000000..43da7517 --- /dev/null +++ b/packages/ui-theme/theme-provider.tsx @@ -0,0 +1,47 @@ +import React from "react"; + +// =========== issue: https://github.com/storybookjs/storybook/issues/10231 +import { ThemeProvider as _ThemeProvider, useTheme } from "@emotion/react"; +// import { ThemeProvider as _ThemeProvider, useTheme } from "emotion-theming"; +// =========== +import styled from "@emotion/styled"; + +import { light } from "./light"; +import { dark } from "./dark"; + +/** + * if both light and dark is checked, it follows system theme, otherwise fallbacks to light. + * @param props + * @returns + */ +export function EditorThemeProvider(props: { + children: JSX.Element[] | JSX.Element; + light?: boolean; + dark?: boolean; + theme?: "light" | "dark"; + debug?: boolean; +}) { + /** + * 1. use theme props + * 2. use light props + * 3. use dark props + * 4. otherwise, fallback to light + */ + const themename = props?.theme ?? props.light ?? props.dark ?? "light"; + const themedata = themename ? light : dark; + return ( + <_ThemeProvider theme={themedata}> + {props.debug && } + {props.children} + + ); +} + +function ThemeDebugger() { + const theme = useTheme(); + console.log("theme", theme); + return {JSON.stringify(theme)}; +} + +export { useTheme }; +export { styled }; From ebb5976b085d93436538b5aa4524991c41afd740 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Thu, 9 Sep 2021 17:11:35 +0900 Subject: [PATCH 053/246] add empty selection view --- .../by-selection-state/selection-none.tsx | 55 ++++++++++++++++++- 1 file changed, 54 insertions(+), 1 deletion(-) diff --git a/packages/app-schema-editor/by-selection-state/selection-none.tsx b/packages/app-schema-editor/by-selection-state/selection-none.tsx index 01e9877c..20aa480d 100644 --- a/packages/app-schema-editor/by-selection-state/selection-none.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-none.tsx @@ -1,9 +1,62 @@ import React from "react"; +import { Docstring } from "@code-ui/docstring"; +import { CodeBox } from "@ui/codebox"; +import styled from "@emotion/styled"; export default function () { return ( <> -
    nothing selected
    +
    + + + + +
    ); } + +const __placeholder_dummy_interface_code = + // + `interface ComponentProps { + property1: type; + property2: type; + property3: type; +} +`; + +function DummyInterfacePreview() { + return ( + + ); +} + +const DisabledOverlay = styled.div` + /* TODO: add overlay color */ + /* color: #8c1d1d1d; */ +`; From 1c118c7798e367915462d40191d4b806aaf45b66 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Thu, 9 Sep 2021 17:26:01 +0900 Subject: [PATCH 054/246] move code/preview to @app/design-to-code --- app/__plugin__init__/index.ts | 2 +- app/lib/main/index.tsx | 2 +- .../app-design-to-code}/__plugin/design-to-code.ts | 0 .../code => packages/app-design-to-code}/__plugin/events.ts | 0 .../code => packages/app-design-to-code}/__plugin/index.ts | 0 .../app-design-to-code}/code-options-control.tsx | 0 .../code => packages/app-design-to-code}/code-screen.tsx | 0 .../pages/code => packages/app-design-to-code}/constants.ts | 0 .../app-design-to-code}/footer-action/code-screen-footer.tsx | 0 .../app-design-to-code}/footer-action/index.ts | 0 .../app-design-to-code}/footer-action/next-upload-button.tsx | 0 .../pages/code => packages/app-design-to-code}/formatter.ts | 0 .../code => packages/app-design-to-code}/framework-option.ts | 0 {app/lib/pages/code => packages/app-design-to-code}/index.ts | 0 packages/app-design-to-code/package.json | 5 +++++ web/next.config.js | 1 + 16 files changed, 8 insertions(+), 2 deletions(-) rename {app/lib/pages/code => packages/app-design-to-code}/__plugin/design-to-code.ts (100%) rename {app/lib/pages/code => packages/app-design-to-code}/__plugin/events.ts (100%) rename {app/lib/pages/code => packages/app-design-to-code}/__plugin/index.ts (100%) rename {app/lib/pages/code => packages/app-design-to-code}/code-options-control.tsx (100%) rename {app/lib/pages/code => packages/app-design-to-code}/code-screen.tsx (100%) rename {app/lib/pages/code => packages/app-design-to-code}/constants.ts (100%) rename {app/lib/pages/code => packages/app-design-to-code}/footer-action/code-screen-footer.tsx (100%) rename {app/lib/pages/code => packages/app-design-to-code}/footer-action/index.ts (100%) rename {app/lib/pages/code => packages/app-design-to-code}/footer-action/next-upload-button.tsx (100%) rename {app/lib/pages/code => packages/app-design-to-code}/formatter.ts (100%) rename {app/lib/pages/code => packages/app-design-to-code}/framework-option.ts (100%) rename {app/lib/pages/code => packages/app-design-to-code}/index.ts (100%) create mode 100644 packages/app-design-to-code/package.json diff --git a/app/__plugin__init__/index.ts b/app/__plugin__init__/index.ts index 30194f2a..57cb7886 100644 --- a/app/__plugin__init__/index.ts +++ b/app/__plugin__init__/index.ts @@ -1,5 +1,5 @@ // DO NOT REMOVE THIS LINE -import "../lib/pages/code/__plugin"; +import "@app/design-to-code/__plugin"; import "@app/data-mapper/__plugin"; import "@app/design-lint/__plugin"; import "@app/design-text-code-syntax-highlight/__plugin"; diff --git a/app/lib/main/index.tsx b/app/lib/main/index.tsx index 6043c39c..5b937398 100644 --- a/app/lib/main/index.tsx +++ b/app/lib/main/index.tsx @@ -21,7 +21,7 @@ import { DataMapperScreen } from "@app/data-mapper"; import { GlobalizationScreen } from "@app/i18n"; import { ToolboxScreen } from "../pages/tool-box"; import { FontReplacerScreen } from "@toolbox/font-replacer"; -import { CodeScreen } from "../pages/code/code-screen"; +import { CodeScreen } from "@app/design-to-code"; import { AboutScreen } from "../pages/about"; import { SigninScreen } from "@app/auth"; import { DesignTextCdoeSyntaxHighligherScreen } from "@app/design-text-code-syntax-highlight"; diff --git a/app/lib/pages/code/__plugin/design-to-code.ts b/packages/app-design-to-code/__plugin/design-to-code.ts similarity index 100% rename from app/lib/pages/code/__plugin/design-to-code.ts rename to packages/app-design-to-code/__plugin/design-to-code.ts diff --git a/app/lib/pages/code/__plugin/events.ts b/packages/app-design-to-code/__plugin/events.ts similarity index 100% rename from app/lib/pages/code/__plugin/events.ts rename to packages/app-design-to-code/__plugin/events.ts diff --git a/app/lib/pages/code/__plugin/index.ts b/packages/app-design-to-code/__plugin/index.ts similarity index 100% rename from app/lib/pages/code/__plugin/index.ts rename to packages/app-design-to-code/__plugin/index.ts diff --git a/app/lib/pages/code/code-options-control.tsx b/packages/app-design-to-code/code-options-control.tsx similarity index 100% rename from app/lib/pages/code/code-options-control.tsx rename to packages/app-design-to-code/code-options-control.tsx diff --git a/app/lib/pages/code/code-screen.tsx b/packages/app-design-to-code/code-screen.tsx similarity index 100% rename from app/lib/pages/code/code-screen.tsx rename to packages/app-design-to-code/code-screen.tsx diff --git a/app/lib/pages/code/constants.ts b/packages/app-design-to-code/constants.ts similarity index 100% rename from app/lib/pages/code/constants.ts rename to packages/app-design-to-code/constants.ts diff --git a/app/lib/pages/code/footer-action/code-screen-footer.tsx b/packages/app-design-to-code/footer-action/code-screen-footer.tsx similarity index 100% rename from app/lib/pages/code/footer-action/code-screen-footer.tsx rename to packages/app-design-to-code/footer-action/code-screen-footer.tsx diff --git a/app/lib/pages/code/footer-action/index.ts b/packages/app-design-to-code/footer-action/index.ts similarity index 100% rename from app/lib/pages/code/footer-action/index.ts rename to packages/app-design-to-code/footer-action/index.ts diff --git a/app/lib/pages/code/footer-action/next-upload-button.tsx b/packages/app-design-to-code/footer-action/next-upload-button.tsx similarity index 100% rename from app/lib/pages/code/footer-action/next-upload-button.tsx rename to packages/app-design-to-code/footer-action/next-upload-button.tsx diff --git a/app/lib/pages/code/formatter.ts b/packages/app-design-to-code/formatter.ts similarity index 100% rename from app/lib/pages/code/formatter.ts rename to packages/app-design-to-code/formatter.ts diff --git a/app/lib/pages/code/framework-option.ts b/packages/app-design-to-code/framework-option.ts similarity index 100% rename from app/lib/pages/code/framework-option.ts rename to packages/app-design-to-code/framework-option.ts diff --git a/app/lib/pages/code/index.ts b/packages/app-design-to-code/index.ts similarity index 100% rename from app/lib/pages/code/index.ts rename to packages/app-design-to-code/index.ts diff --git a/packages/app-design-to-code/package.json b/packages/app-design-to-code/package.json new file mode 100644 index 00000000..352b3fa8 --- /dev/null +++ b/packages/app-design-to-code/package.json @@ -0,0 +1,5 @@ +{ + "name": "@app/design-to-code", + "version": "0.0.0", + "private": false +} \ No newline at end of file diff --git a/web/next.config.js b/web/next.config.js index 190e59be..3aeedf88 100644 --- a/web/next.config.js +++ b/web/next.config.js @@ -12,6 +12,7 @@ const withTM = require("next-transpile-modules")([ // @app "app", + "@app/design-to-code", "@app/auth", "@app/i18n", "@app/component-manage", From 542daced3630cf44d4d5363af7720622ab01b6d4 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Thu, 9 Sep 2021 18:03:40 +0900 Subject: [PATCH 055/246] extract controlled code view from code screen for reuse --- .../code-options-control.tsx | 3 +- packages/app-design-to-code/code-screen.tsx | 191 ++++-------------- .../code-view-with-control.tsx | 144 +++++++++++++ packages/app-design-to-code/user-options.ts | 3 + packages/ui-code-box/codebox.tsx | 6 +- 5 files changed, 188 insertions(+), 159 deletions(-) create mode 100644 packages/app-design-to-code/code-view-with-control.tsx create mode 100644 packages/app-design-to-code/user-options.ts diff --git a/packages/app-design-to-code/code-options-control.tsx b/packages/app-design-to-code/code-options-control.tsx index 9acc8c97..a045fde8 100644 --- a/packages/app-design-to-code/code-options-control.tsx +++ b/packages/app-design-to-code/code-options-control.tsx @@ -13,8 +13,7 @@ import { react_styles, } from "./framework-option"; import styled from "@emotion/styled"; - -export type DesigntoCodeUserOptions = FrameworkOption; +import { DesigntoCodeUserOptions } from "./user-options"; // FIXME: get useroption as props from parent. userprops & preset (optional) should be managed on its parent interface CodeOptionsControlProps { diff --git a/packages/app-design-to-code/code-screen.tsx b/packages/app-design-to-code/code-screen.tsx index 73fb9f51..cdfdc033 100644 --- a/packages/app-design-to-code/code-screen.tsx +++ b/packages/app-design-to-code/code-screen.tsx @@ -1,138 +1,50 @@ import React, { useEffect, useState } from "react"; -import { CodeBox, SourceInput } from "@ui/codebox"; import { Preview } from "@ui/previewer"; -import { - EK_GENERATED_CODE_PLAIN, - EK_IMAGE_ASSET_REPOSITORY_MAP, -} from "@core/constant/ek.constant"; -import { repo_assets } from "@design-sdk/core"; import { assistant as analytics } from "@analytics.bridged.xyz/internal"; -import { - FrameworkOption, - all_preset_options_map__prod, -} from "./framework-option"; +import { DesigntoCodeUserOptions } from "./user-options"; import styled from "@emotion/styled"; -import { make_empty_selection_state_text_content } from "./constants"; -import { format } from "./formatter"; +// import { make_empty_selection_state_text_content } from "./constants"; + import copy from "copy-to-clipboard"; import { PluginSdk } from "@plugin-sdk/app"; import { CodeScreenFooter } from "./footer-action/code-screen-footer"; -import { CodeOptionsControl } from "./code-options-control"; -import { fromApp, CodeGenRequest } from "./__plugin/events"; -import { useSingleSelection } from "plugin-app"; -type DesigntoCodeUserOptions = FrameworkOption; +import { useSingleSelection } from "plugin-app"; +import { CodeViewWithControl } from "./code-view-with-control"; export function CodeScreen() { - const [app, setApp] = useState(); - const [useroption, setUseroption] = React.useState( - all_preset_options_map__prod.flutter_default - ); - const [source, setSource] = useState(); const selection = useSingleSelection(); - /** register event listener for events from code thread. */ - useEffect(() => { - window.addEventListener("message", onMessage); - return function cleaup() { - window.removeEventListener("message", onMessage); - }; - }, [useroption.language]); - - /** post to code thread about target framework change */ - useEffect(() => { - // 1. clear previous result. - setSource(undefined); - // 2. request new code gen. - fromApp({ - type: "code-gen-request", - option: useroption, - }); - }, [useroption.framework, selection]); - - const _make_placeholder = () => { - return make_empty_selection_state_text_content("empty"); - }; - - const _make_source = (): SourceInput => { - if (typeof source == "string") { - if (source && source.length > 0) { - return source; - } - } else { - if (source && source.raw.length > 0) { - return source; - } - } - return _make_placeholder(); - }; - - const handleSourceInput = ({ - app, - code, - }: { - app: string; - code: SourceInput; - }) => { - format(app, useroption.language, (s) => { - setApp(s); - }); - - // for SourceInput, we need type checking - if (typeof code == "string") { - // source input as string - format(code, useroption.language, (s) => { - setSource(s); - }); - } else { - // source input as { raw: string } - format(code.raw, useroption.language, (s) => { - setSource({ - raw: s, - }); - }); - } - }; - - const onMessage = (ev: MessageEvent) => { - const msg = ev.data.pluginMessage; - if (msg) { - switch (msg.type) { - case EK_GENERATED_CODE_PLAIN: - handleSourceInput({ - app: msg.data.app, - code: msg.data.code, - }); - // analytics - analytics.event_selection_to_code({ - framework: useroption.framework, - }); - - break; - case EK_IMAGE_ASSET_REPOSITORY_MAP: - const imageRepo = msg.data as repo_assets.TransportableImageRepository; - repo_assets.ImageHostingRepository.setRepository(imageRepo); - break; - } - } else { - // ignore - } - }; + const [source, setSource] = useState(); + const [app, setApp] = useState(); + const [useroption, setUseroption] = useState(); + // const _make_placeholder = () => { + // return make_empty_selection_state_text_content("empty"); + // }; + + // const _make_source = (): SourceInput => { + // if (typeof source == "string") { + // if (source && source.length > 0) { + // return source; + // } + // } else { + // if (source && source.raw.length > 0) { + // return source; + // } + // } + // return _make_placeholder(); + // }; const onCopyClicked = (e) => { - const _code: SourceInput = _make_source(); - const raw = typeof _code == "string" ? _code : _code.raw; - copy(raw); + // const _code: SourceInput = _make_source(); + // const raw = typeof _code == "string" ? _code : _code.raw; + copy(source); PluginSdk.notifyCopied(); // ANALYTICS analytics.event_click_copy_code(); }; - const onOptionChange = (op: DesigntoCodeUserOptions) => { - setUseroption(op); - }; - return (
    @@ -152,21 +64,17 @@ export function CodeScreen() { /> - - - - - + { + setApp(app); + setSource(src); + }} + onUserOptionsChange={setUseroption} + /> @@ -174,22 +82,6 @@ export function CodeScreen() { ); } -/** - * get language by framework (default) (for code display) (non critical) - * - * -- used by code view (for styling only - used by highlight js) - */ -const _src_view_language = (framework: string): string => { - switch (framework) { - case "flutter": - return "dart"; - case "react": - return "jsx"; - default: - throw `default language for code display on framework "${framework}" is not supported`; - } -}; - const CopyCodeButton = styled.div` width: 24px; height: 24px; @@ -199,12 +91,3 @@ const CopyCodeButton = styled.div` margin-right: 20px; cursor: pointer; `; - -const _VSCODE_DARK_BG = "#1e1e1e"; - -const CodeWrapper = styled.div` - /* 366px is preview(200) + navigation(52+40) + footer btn wrapper(74) height*/ - height: calc(100vh - 366px); - background: ${_VSCODE_DARK_BG}; - overflow-y: hidden; -`; diff --git a/packages/app-design-to-code/code-view-with-control.tsx b/packages/app-design-to-code/code-view-with-control.tsx new file mode 100644 index 00000000..755c56b2 --- /dev/null +++ b/packages/app-design-to-code/code-view-with-control.tsx @@ -0,0 +1,144 @@ +import React, { useEffect, useState } from "react"; +import { CodeBox, SourceInput } from "@ui/codebox"; +import { CodeOptionsControl } from "./code-options-control"; +import styled from "@emotion/styled"; +import { format } from "./formatter"; +import { all_preset_options_map__prod } from "./framework-option"; +import { fromApp, CodeGenRequest } from "./__plugin/events"; +import { DesigntoCodeUserOptions } from "./user-options"; +import { + EK_GENERATED_CODE_PLAIN, + EK_IMAGE_ASSET_REPOSITORY_MAP, +} from "@core/constant/ek.constant"; +import { repo_assets } from "@design-sdk/core"; +import { assistant as analytics } from "@analytics.bridged.xyz/internal"; + +export function CodeViewWithControl(props: { + targetid: string; + onUserOptionsChange?: (options: DesigntoCodeUserOptions) => void; + onGeneration: (app: string, src: string) => void; +}) { + const [app, setApp] = useState(); + const [source, setSource] = useState(); + const [useroption, setUseroption] = React.useState( + all_preset_options_map__prod.flutter_default + ); + + /** register event listener for events from code thread. */ + useEffect(() => { + window.addEventListener("message", onMessage); + return function cleaup() { + window.removeEventListener("message", onMessage); + }; + }, [useroption.language]); + + /** post to code thread about target framework change */ + useEffect(() => { + // 1. clear previous result. + setSource(undefined); + // 2. request new code gen. + fromApp({ + type: "code-gen-request", + option: useroption, + }); + }, [useroption.framework, props.targetid]); + + // tell parent about user option initial change + useEffect(() => { + props.onUserOptionsChange?.(useroption); + }, [useroption.framework, useroption.language]); + + const onOptionChange = (op: DesigntoCodeUserOptions) => { + setUseroption(op); + }; + + const __onGeneration__cb = (app, src) => { + const _source = typeof src == "string" ? source : src?.raw; + props.onGeneration(app, _source); + }; + + const handleSourceInput = ({ + app, + code, + }: { + app: string; + code: SourceInput; + }) => { + format(app, useroption.language, (s) => { + setApp(s); + __onGeneration__cb(s, source); + }); + + // for SourceInput, we need type checking + const _code = typeof code == "string" ? code : code.raw; + format(_code, useroption.language, (s) => { + setSource(s); + __onGeneration__cb(app, s); + }); + }; + + const onMessage = (ev: MessageEvent) => { + const msg = ev.data.pluginMessage; + if (msg) { + switch (msg.type) { + case EK_GENERATED_CODE_PLAIN: + handleSourceInput({ + app: msg.data.app, + code: msg.data.code, + }); + // analytics + analytics.event_selection_to_code({ + framework: useroption.framework, + }); + + break; + case EK_IMAGE_ASSET_REPOSITORY_MAP: + const imageRepo = msg.data as repo_assets.TransportableImageRepository; + repo_assets.ImageHostingRepository.setRepository(imageRepo); + break; + } + } else { + // ignore + } + }; + + return ( + + + + + ); +} + +/** + * get language by framework (default) (for code display) (non critical) + * + * -- used by code view (for styling only - used by highlight js) + */ +const _src_view_language = (framework: string): string => { + switch (framework) { + case "flutter": + return "dart"; + case "react": + return "jsx"; + default: + throw `default language for code display on framework "${framework}" is not supported`; + } +}; + +const _VSCODE_DARK_BG = "#1e1e1e"; + +const CodeWrapper = styled.div` + /* 366px is preview(200) + navigation(52+40) + footer btn wrapper(74) height*/ + height: calc(100vh - 366px); + background: ${_VSCODE_DARK_BG}; + overflow-y: hidden; +`; diff --git a/packages/app-design-to-code/user-options.ts b/packages/app-design-to-code/user-options.ts new file mode 100644 index 00000000..b3d7cdd3 --- /dev/null +++ b/packages/app-design-to-code/user-options.ts @@ -0,0 +1,3 @@ +import { FrameworkOption } from "./framework-option"; + +export type DesigntoCodeUserOptions = FrameworkOption; diff --git a/packages/ui-code-box/codebox.tsx b/packages/ui-code-box/codebox.tsx index eb81b993..3b0f796c 100644 --- a/packages/ui-code-box/codebox.tsx +++ b/packages/ui-code-box/codebox.tsx @@ -20,7 +20,7 @@ export function CodeBox({ code: SourceInput; codeActions?: Array; }) { - const raw = typeof code == "string" ? code : code.raw; + const raw = (code && (typeof code == "string" ? code : code.raw)) || ""; const Editor = editor == "monaco" ? ( @@ -37,8 +37,8 @@ export function CodeBox({ codeActions.map((e) => { return e; })} - - {typeof raw == "string" ? ( + {/* when empty input, don't raise error */} + {raw || typeof raw == "string" ? ( Editor ) : ( <>Invalid code was givven. cannot display result (this is a bug) From 7c459596edf699463f9af935e5a01848bab7b680 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Thu, 9 Sep 2021 18:07:37 +0900 Subject: [PATCH 056/246] update invalid selection screen --- .../app-design-to-code/code-view-with-control.tsx | 4 ++-- .../by-selection-state/selection-invalid.tsx | 15 +++++++++++++-- packages/app-schema-editor/schema-editor.tsx | 2 +- packages/design-sdk | 2 +- packages/ui-theme/index.ts | 4 ++-- 5 files changed, 19 insertions(+), 8 deletions(-) diff --git a/packages/app-design-to-code/code-view-with-control.tsx b/packages/app-design-to-code/code-view-with-control.tsx index 755c56b2..1d97ab9b 100644 --- a/packages/app-design-to-code/code-view-with-control.tsx +++ b/packages/app-design-to-code/code-view-with-control.tsx @@ -16,7 +16,7 @@ import { assistant as analytics } from "@analytics.bridged.xyz/internal"; export function CodeViewWithControl(props: { targetid: string; onUserOptionsChange?: (options: DesigntoCodeUserOptions) => void; - onGeneration: (app: string, src: string) => void; + onGeneration?: (app: string, src: string) => void; }) { const [app, setApp] = useState(); const [source, setSource] = useState(); @@ -54,7 +54,7 @@ export function CodeViewWithControl(props: { const __onGeneration__cb = (app, src) => { const _source = typeof src == "string" ? source : src?.raw; - props.onGeneration(app, _source); + props.onGeneration?.(app, _source); }; const handleSourceInput = ({ diff --git a/packages/app-schema-editor/by-selection-state/selection-invalid.tsx b/packages/app-schema-editor/by-selection-state/selection-invalid.tsx index d86005b8..ef296109 100644 --- a/packages/app-schema-editor/by-selection-state/selection-invalid.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-invalid.tsx @@ -1,9 +1,20 @@ import React from "react"; +import { CodeViewWithControl } from "@app/design-to-code/code-view-with-control"; +import { nodes } from "@design-sdk/core"; -export default function () { +export default function (props: { node: nodes.light.IReflectNodeReference }) { return ( <> -
    invalid target
    +

    Not a component

    +

    + You have to click one of the layer that is already a component or in a + component. +

    +
    + + +
    + ); } diff --git a/packages/app-schema-editor/schema-editor.tsx b/packages/app-schema-editor/schema-editor.tsx index e9fbdc1e..360af35b 100644 --- a/packages/app-schema-editor/schema-editor.tsx +++ b/packages/app-schema-editor/schema-editor.tsx @@ -25,7 +25,7 @@ export function SchemaEditor(props: {}) { } switch (mode) { case "invalid-target": - return ; + return ; case "single-layer-property": return ; case "base-master-component": diff --git a/packages/design-sdk b/packages/design-sdk index f3b89061..a4fe9fac 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit f3b89061ef5dd1706c8ced28bc72ddb7cf067f1f +Subproject commit a4fe9face4fdf10f07412972b2ed224d69039a60 diff --git a/packages/ui-theme/index.ts b/packages/ui-theme/index.ts index 9ef6eb1b..62a3417a 100644 --- a/packages/ui-theme/index.ts +++ b/packages/ui-theme/index.ts @@ -15,5 +15,5 @@ declare module "@emotion/react" { export interface Theme extends _Theme {} } -//@ts-ignore - below line sometimes throw "Type error: Type 'CreateStyled' is not generic." even if it is generic typed -export default styled as CreateStyled<_Theme>; +// //@ts-ignore - below line sometimes throw "Type error: Type 'CreateStyled' is not generic." even if it is generic typed +// export default styled as CreateStyled<_Theme>; From bff9cfa30b987ab444c37174e7f29323d0bf779b Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Thu, 9 Sep 2021 18:22:01 +0900 Subject: [PATCH 057/246] update invalid selection optimized --- .../code-options-control.tsx | 8 +++++- .../code-view-with-control.tsx | 21 ++++++++++++---- .../by-selection-state/selection-invalid.tsx | 25 ++++++++++++------- 3 files changed, 39 insertions(+), 15 deletions(-) diff --git a/packages/app-design-to-code/code-options-control.tsx b/packages/app-design-to-code/code-options-control.tsx index a045fde8..83ada892 100644 --- a/packages/app-design-to-code/code-options-control.tsx +++ b/packages/app-design-to-code/code-options-control.tsx @@ -17,6 +17,7 @@ import { DesigntoCodeUserOptions } from "./user-options"; // FIXME: get useroption as props from parent. userprops & preset (optional) should be managed on its parent interface CodeOptionsControlProps { + customFields?: IField[]; initialPreset?: string; onUseroptionChange: (op: DesigntoCodeUserOptions) => void; } @@ -158,6 +159,11 @@ export function CodeOptionsControl(props: CodeOptionsControlProps) { } } + const _controls = [ + ...(props.customFields ?? []), + ...fields_config[useroption.framework], + ]; + // console.log("code-screen-control::useroption", useroption); return ( @@ -166,7 +172,7 @@ export function CodeOptionsControl(props: CodeOptionsControlProps) { lang={__lang_to_docstring_lang(useroption.language)} theme={"monokai"} padding={"16px"} - controls={fields_config[useroption.framework]} + controls={_controls} expandableConfig={{ lines: 2, expandable: true, diff --git a/packages/app-design-to-code/code-view-with-control.tsx b/packages/app-design-to-code/code-view-with-control.tsx index 1d97ab9b..d14c3768 100644 --- a/packages/app-design-to-code/code-view-with-control.tsx +++ b/packages/app-design-to-code/code-view-with-control.tsx @@ -13,10 +13,18 @@ import { import { repo_assets } from "@design-sdk/core"; import { assistant as analytics } from "@analytics.bridged.xyz/internal"; -export function CodeViewWithControl(props: { +export function CodeViewWithControl({ + targetid, + editor = "monaco", + onUserOptionsChange, + onGeneration, + customMessages, +}: { targetid: string; + editor?: "monaco" | "prism"; onUserOptionsChange?: (options: DesigntoCodeUserOptions) => void; onGeneration?: (app: string, src: string) => void; + customMessages?: string[]; }) { const [app, setApp] = useState(); const [source, setSource] = useState(); @@ -41,11 +49,11 @@ export function CodeViewWithControl(props: { type: "code-gen-request", option: useroption, }); - }, [useroption.framework, props.targetid]); + }, [useroption.framework, targetid]); // tell parent about user option initial change useEffect(() => { - props.onUserOptionsChange?.(useroption); + onUserOptionsChange?.(useroption); }, [useroption.framework, useroption.language]); const onOptionChange = (op: DesigntoCodeUserOptions) => { @@ -54,7 +62,7 @@ export function CodeViewWithControl(props: { const __onGeneration__cb = (app, src) => { const _source = typeof src == "string" ? source : src?.raw; - props.onGeneration?.(app, _source); + onGeneration?.(app, _source); }; const handleSourceInput = ({ @@ -108,9 +116,12 @@ export function CodeViewWithControl(props: { // key={JSON.stringify(useroption)} // FIXME: do not uncomment me // initialPreset="react_default" // FIXME: do not uncomment me onUseroptionChange={onOptionChange} + customFields={customMessages?.map((d) => { + return { name: d }; + })} /> diff --git a/packages/app-schema-editor/by-selection-state/selection-invalid.tsx b/packages/app-schema-editor/by-selection-state/selection-invalid.tsx index ef296109..dd7b14b4 100644 --- a/packages/app-schema-editor/by-selection-state/selection-invalid.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-invalid.tsx @@ -1,20 +1,27 @@ import React from "react"; import { CodeViewWithControl } from "@app/design-to-code/code-view-with-control"; import { nodes } from "@design-sdk/core"; +import { padding } from "@web-builder/styles"; export default function (props: { node: nodes.light.IReflectNodeReference }) { return ( <> -

    Not a component

    -

    - You have to click one of the layer that is already a component or in a - component. -

    -
    - - +
    +

    Not a component

    +

    + You have to click one of the layer that is already a component or in a + component. +

    +
    + + +
    - + ); } From 28fa697344b828943f179c4211ccbedb38da124e Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Thu, 9 Sep 2021 19:27:34 +0900 Subject: [PATCH 058/246] add placeholder views fro master / instance component --- .../selection-instance-component.tsx | 14 +++++++++++++- .../selection-master-component.tsx | 15 ++++++++++++--- 2 files changed, 25 insertions(+), 4 deletions(-) diff --git a/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx b/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx index 7dab7226..3463fdbe 100644 --- a/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx @@ -1,10 +1,22 @@ import React from "react"; import { nodes } from "@design-sdk/core"; +import { PropsInterfaceView } from "../interface-code-builder/props-interface-view"; +import { NameCases, nameit } from "@coli.codes/naming"; export default function (props: { node: nodes.light.IReflectNodeReference }) { + const master = props.node.mainComponent; + const interfaceName = nameit(master.name + "-props", { + case: NameCases.pascal, + }).name; + return ( <> -
    instance of non-variant
    + {}} + properties={[]} + initialInterfaceName={interfaceName} + onChange={() => {}} + /> ); } diff --git a/packages/app-schema-editor/by-selection-state/selection-master-component.tsx b/packages/app-schema-editor/by-selection-state/selection-master-component.tsx index 4da0d441..5ed603b5 100644 --- a/packages/app-schema-editor/by-selection-state/selection-master-component.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-master-component.tsx @@ -2,11 +2,17 @@ import React, { useEffect, useState } from "react"; import { nodes, utils } from "@design-sdk/core"; import { ISingleLayerProperty, IProperties } from "../types"; import { PluginSdk } from "@plugin-sdk/app"; +import { PropsInterfaceView } from "../interface-code-builder/props-interface-view"; +import { NameCases, nameit } from "@coli.codes/naming"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const { node } = props; const [properties, setProperties] = useState(null); + const interfaceName = nameit(node.name + "-props", { + case: NameCases.pascal, + }).name; + //1. list all layers under this component const grandchilds = utils.mapGrandchildren(node); @@ -27,9 +33,12 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { return ( <> -
    mater component
    -
    - + {}} + properties={[]} + initialInterfaceName={interfaceName} + onChange={() => {}} + /> {/* */} {properties ? (
      From 3b90e075ea86dec1182951dd90a733eae2a2dfee Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Thu, 9 Sep 2021 19:36:07 +0900 Subject: [PATCH 059/246] add data view for instance selection --- .../selection-instance-component.tsx | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx b/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx index 3463fdbe..f5198317 100644 --- a/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx @@ -2,6 +2,8 @@ import React from "react"; import { nodes } from "@design-sdk/core"; import { PropsInterfaceView } from "../interface-code-builder/props-interface-view"; import { NameCases, nameit } from "@coli.codes/naming"; +import { CodeBox } from "@ui/codebox"; +import { buildeExampleData } from "../interface-code-builder"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const master = props.node.mainComponent; @@ -17,6 +19,14 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { initialInterfaceName={interfaceName} onChange={() => {}} /> + ); } From 71b488d4b0b3c5d9aabf08264e4f0547afdb5cd4 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Thu, 9 Sep 2021 23:06:17 +0900 Subject: [PATCH 060/246] add layer selection case --- .../selection-configurable-layer.tsx | 49 +++++++++-- .../app-schema-editor/single-property.tsx | 88 ++++++++++++++----- packages/design-sdk | 2 +- 3 files changed, 109 insertions(+), 30 deletions(-) diff --git a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx index 1085b9a9..734860c5 100644 --- a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx @@ -5,7 +5,9 @@ import { SingleLayerPropertyDefinition } from "../single-property"; import { ISingleLayerProperty, IProperties } from "../types"; import { nodes } from "@design-sdk/core"; import { _FigmaVariantPropertyCompatType_to_string } from "@design-sdk/figma/features/variant"; - +import { nameit, NameCases } from "@coli.codes/naming"; +import { CodeBox } from "@ui/codebox"; +import { isMemberOfComponentLike } from "@design-sdk/figma/node-analysis/component-like-type-analysis/analyze"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const { node } = props; const id = node.id; @@ -15,7 +17,22 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { const newData = data; newData.push(d); setData(newData); + _update_all(); + }; + + const manifest = isMemberOfComponentLike(node); + + if (manifest) { + // with this, you can show root parent's info + manifest.parent.type; + manifest.parent.node; + } else { + throw "logical error."; + } + // TODO: layer analysis. configurable layer can be raw layyer or instance of a component (including variant isntance.) + // << this is irrelevant comment to below code. + const _update_all = () => { // this update logic shall be applied to master node's corresponding layer PluginSdk.updateMetadata({ id: id, @@ -25,6 +42,12 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { }); }; + const handleOnRemove = (at: number) => { + data.splice(at, at + 1); + setData([...data]); + _update_all(); + }; + useEffect(() => { PluginSdk.fetchMetadata({ id: id, @@ -37,12 +60,28 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { }); }, []); + const _has_saved_data = data.length > 0; return ( <> -
      configurable layer
      - {data.length > 0 ? ( - data.map((d) => ( + + + {_has_saved_data ? ( + data.map((d, i) => ( { + handleOnRemove(i); + }} key={d?.schema.name} onSave={handleOnSave} initial={d} @@ -56,7 +95,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { onSave={handleOnSave} initial={{ schema: { - name: `${node.name}`, + name: nameit(node.name, { case: NameCases.camel }).name, type: "string", }, targetProperty: undefined, diff --git a/packages/app-schema-editor/single-property.tsx b/packages/app-schema-editor/single-property.tsx index dca1e9ef..73161d53 100644 --- a/packages/app-schema-editor/single-property.tsx +++ b/packages/app-schema-editor/single-property.tsx @@ -1,6 +1,13 @@ -import { Button, Divider, TextField } from "@material-ui/core"; +import { + Button, + Divider, + TextField, + Select, + MenuItem, +} from "@material-ui/core"; import React, { useState } from "react"; import { ISingleLayerProperty } from "./types"; +import { nameit, NameCases } from "@coli.codes/naming"; type UserInteractionMode = "editing" | "viewing"; @@ -19,6 +26,10 @@ interface ISingleLayerPropertyDefinitionProps { initial?: ISingleLayerProperty; initialMode?: UserInteractionMode; onSave: (data: ISingleLayerProperty) => void; + /** + * when remove this whole preference. if not provided, remove button won't be present. + */ + onRemove?: () => void; } export function SingleLayerPropertyDefinition( @@ -79,48 +90,77 @@ export function SingleLayerPropertyDefinition( helperText="description for this property" disabled={disableInputs} /> - { setData({ ...data, - schema: { - ...data.schema, - type: e.target.value, - }, + targetProperty: e.target.value as any, }); }} + defaultValue={data?.targetProperty} disabled={disableInputs} - /> - + {[1, 2, 3, 4, 5].map((d) => { + return ( + + {d} + + ); + })} + + + {data?.targetProperty && ( + { + setData({ + ...data, + schema: { + ...data.schema, + type: e.target.value, + }, + }); + }} + disabled={disableInputs} + /> + )} + + + + {props.onRemove && ( + + )} ); diff --git a/packages/design-sdk b/packages/design-sdk index a4fe9fac..50565472 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit a4fe9face4fdf10f07412972b2ed224d69039a60 +Subproject commit 505654724059504bfa671e534c8222eb018228f1 From 5c3a90f9a8e3e5a91e25c2cde85498290b236965 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Thu, 9 Sep 2021 23:36:21 +0900 Subject: [PATCH 061/246] update configurable layer targetting & add notify to invalid selection --- figma-core/code-thread/selection.ts | 13 +++++++++---- .../selection-configurable-layer.tsx | 19 +++++++++++++++++++ .../app-schema-editor/single-property.tsx | 2 +- packages/design-sdk | 2 +- 4 files changed, 30 insertions(+), 6 deletions(-) diff --git a/figma-core/code-thread/selection.ts b/figma-core/code-thread/selection.ts index 2fb3afa4..83de089c 100644 --- a/figma-core/code-thread/selection.ts +++ b/figma-core/code-thread/selection.ts @@ -70,10 +70,15 @@ export function onfigmaselectionchange() { // Logger.debug("reflect-converted-selection", rnode); // region sync selection event (search "selectionchange" for references) - figma.ui.postMessage({ - type: "selectionchange", - data: light.makeReference(rnode), - }); + try { + const data = light.makeReference(rnode); + figma.ui.postMessage({ + type: "selectionchange", + data: data, + }); + } catch (_) { + figma.notify(`Oops. we don't support "${target.type}" yet.`); + } // endregion FigmaNodeCache.setConverted(rnode); runon(rnode); diff --git a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx index 734860c5..ae9cc1e4 100644 --- a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx @@ -8,6 +8,25 @@ import { _FigmaVariantPropertyCompatType_to_string } from "@design-sdk/figma/fea import { nameit, NameCases } from "@coli.codes/naming"; import { CodeBox } from "@ui/codebox"; import { isMemberOfComponentLike } from "@design-sdk/figma/node-analysis/component-like-type-analysis/analyze"; + +type ConfigurableLayerContext = + /** + * frame with auto layout + */ + | "frame-layouted" + /** + * + */ + | "text" + /** + * + */ + | "vector-colored" + /** + * + */ + | "shape-with-image"; + export default function (props: { node: nodes.light.IReflectNodeReference }) { const { node } = props; const id = node.id; diff --git a/packages/app-schema-editor/single-property.tsx b/packages/app-schema-editor/single-property.tsx index 73161d53..4a9b02bb 100644 --- a/packages/app-schema-editor/single-property.tsx +++ b/packages/app-schema-editor/single-property.tsx @@ -103,7 +103,7 @@ export function SingleLayerPropertyDefinition( disabled={disableInputs} value={data?.targetProperty} > - {[1, 2, 3, 4, 5].map((d) => { + {["on click", "on double click", "enabled", "opacity"].map((d) => { return ( {d} diff --git a/packages/design-sdk b/packages/design-sdk index 50565472..6946d66b 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit 505654724059504bfa671e534c8222eb018228f1 +Subproject commit 6946d66b488b0b978564a54cbf57eb2e37d18b93 From e6508828cdee4f0cf31f98cab180c4d22d26f1ac Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 10 Sep 2021 01:30:55 +0900 Subject: [PATCH 062/246] single layer property saving with suggestion on root reference --- figma-core/code-thread/selection.ts | 1 + .../code-view-with-control.tsx | 3 + .../selection-configurable-layer.tsx | 93 +++++++------ .../by-selection-state/selection-invalid.tsx | 1 + .../property-suggestions/index.ts | 126 ++++++++++++++++++ .../app-schema-editor/single-property.tsx | 47 +++---- packages/design-sdk | 2 +- packages/ui-code-box/codebox.tsx | 7 +- 8 files changed, 200 insertions(+), 80 deletions(-) create mode 100644 packages/app-schema-editor/property-suggestions/index.ts diff --git a/figma-core/code-thread/selection.ts b/figma-core/code-thread/selection.ts index 83de089c..9f8df1c0 100644 --- a/figma-core/code-thread/selection.ts +++ b/figma-core/code-thread/selection.ts @@ -78,6 +78,7 @@ export function onfigmaselectionchange() { }); } catch (_) { figma.notify(`Oops. we don't support "${target.type}" yet.`); + console.error(_) } // endregion FigmaNodeCache.setConverted(rnode); diff --git a/packages/app-design-to-code/code-view-with-control.tsx b/packages/app-design-to-code/code-view-with-control.tsx index d14c3768..64cf733c 100644 --- a/packages/app-design-to-code/code-view-with-control.tsx +++ b/packages/app-design-to-code/code-view-with-control.tsx @@ -17,6 +17,7 @@ export function CodeViewWithControl({ targetid, editor = "monaco", onUserOptionsChange, + disabled, onGeneration, customMessages, }: { @@ -25,6 +26,7 @@ export function CodeViewWithControl({ onUserOptionsChange?: (options: DesigntoCodeUserOptions) => void; onGeneration?: (app: string, src: string) => void; customMessages?: string[]; + disabled?: true; }) { const [app, setApp] = useState(); const [source, setSource] = useState(); @@ -121,6 +123,7 @@ export function CodeViewWithControl({ })} /> ([]); const handleOnSave = (d: ISingleLayerProperty) => { const newData = data; newData.push(d); - setData(newData); - _update_all(); + setData([...newData]); + _sync_data_with_storage(); }; const manifest = isMemberOfComponentLike(node); @@ -48,10 +30,16 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { } else { throw "logical error."; } + + const id = + (manifest.parent.node.mainComponent && + manifest.parent.node.mainComponent.id) || + manifest.parent.node.id; + // TODO: layer analysis. configurable layer can be raw layyer or instance of a component (including variant isntance.) // << this is irrelevant comment to below code. - const _update_all = () => { + const _sync_data_with_storage = () => { // this update logic shall be applied to master node's corresponding layer PluginSdk.updateMetadata({ id: id, @@ -64,7 +52,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { const handleOnRemove = (at: number) => { data.splice(at, at + 1); setData([...data]); - _update_all(); + _sync_data_with_storage(); }; useEffect(() => { @@ -79,6 +67,11 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { }); }, []); + const all_suggestions = get_suggestions(node); + const suggestions = Array.isArray(all_suggestions) + ? all_suggestions + : (all_suggestions && [all_suggestions]) || []; + const _has_saved_data = data.length > 0; return ( <> @@ -95,33 +88,39 @@ interface Props { }`} /> - {_has_saved_data ? ( - data.map((d, i) => ( +
      + {_has_saved_data ? ( + <> + {data.map((d, i) => ( + { + handleOnRemove(i); + }} + key={d?.schema.name} + onSave={handleOnSave} + initial={d} + suggestions={suggestions} + /> + ))} + + + ) : ( + // automatically preset a new property { - handleOnRemove(i); - }} - key={d?.schema.name} + initialMode={"editing"} onSave={handleOnSave} - initial={d} + initial={{ + schema: { + name: nameit(node.name, { case: NameCases.camel }).name, + type: "string", + }, + targetProperty: undefined, + locateMode: "auto", + }} + suggestions={suggestions} /> - )) - ) : ( - // automatically preset a new property - - )} + )} +
      ); } diff --git a/packages/app-schema-editor/by-selection-state/selection-invalid.tsx b/packages/app-schema-editor/by-selection-state/selection-invalid.tsx index dd7b14b4..da316b50 100644 --- a/packages/app-schema-editor/by-selection-state/selection-invalid.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-invalid.tsx @@ -19,6 +19,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) {
    diff --git a/packages/app-schema-editor/property-suggestions/index.ts b/packages/app-schema-editor/property-suggestions/index.ts new file mode 100644 index 00000000..a319dd3b --- /dev/null +++ b/packages/app-schema-editor/property-suggestions/index.ts @@ -0,0 +1,126 @@ +import type { IReflectNodeReference } from "@design-sdk/core/nodes/lignt"; +import { ReflectSceneNodeType } from "@design-sdk/core/nodes"; + +type ConfigurableLayerContext = + /** + * frame with auto layout + */ + | "frame-layouted" + /** + * + */ + | "text" + | "text-with-link" + /** + * + */ + | "vector-with-color" + /** + * + */ + | "shape-with-image"; + +const global_properties = ["on click", "on double click", "enabled", "opacity"]; + +const default_type_map: { [key in PropertyAccessors]: string } = { + "text.text": "string", + "text.color": "string", + "image.src": "string", + "vector.color": "string", +}; + +export type PropertyAccessors = + // text chars + | "text.text" + // single fill color + | "text.color" + // single fill image-like node image fill + | "image.src" + // single fill for vector (e.g. icon content vector) + | "vector.color"; + +export interface NoSuggestionReason { + type: "no-suggestions"; + reason: string; +} + +export interface NoAvailablePropertyReason { + type: "no-available-property"; + reason: string; +} + +export interface Suggestion { + type: "suggestion"; + locate: "auto" | "xpath" | "id" | "name"; + to: PropertyAccessors; +} + +export type UserSuggestionReason = + | NoSuggestionReason + | NoAvailablePropertyReason + | Suggestion; + +export function get_suggestions( + node: IReflectNodeReference +): UserSuggestionReason | UserSuggestionReason[] { + switch (node.origin) { + case ReflectSceneNodeType.group: + return { + type: "no-available-property", + reason: "group is not configurable for components. use frame instead.", + }; + + case ReflectSceneNodeType.instance: + return; + case ReflectSceneNodeType.text: + return get_text_property_suggestions(node); + case ReflectSceneNodeType.frame: + return; + case ReflectSceneNodeType.line: + return { + type: "no-available-property", + reason: "we do not support mapping data to line yet. use rect instead.", + }; + case ReflectSceneNodeType.vector: + return get_vector_property_suggestions(node); + + case ReflectSceneNodeType.image: // handle this when conversion is properly implemented + case ReflectSceneNodeType.constraint: // handle this when conversion is properly implemented + case ReflectSceneNodeType.unknown: + throw "unknown node type"; + + case ReflectSceneNodeType.component: + case ReflectSceneNodeType.variant_set: + throw "logical error"; + } + // +} + +function get_text_property_suggestions( + text: IReflectNodeReference +): UserSuggestionReason[] { + return [ + { + type: "suggestion", + to: "text.text", + locate: "auto", + }, + { + type: "suggestion", + to: "text.color", + locate: "auto", + }, + ]; +} + +function get_vector_property_suggestions( + vector: IReflectNodeReference +): UserSuggestionReason[] { + return [ + { + type: "suggestion", + to: "vector.color", + locate: "auto", + }, + ]; +} diff --git a/packages/app-schema-editor/single-property.tsx b/packages/app-schema-editor/single-property.tsx index 4a9b02bb..ece013cc 100644 --- a/packages/app-schema-editor/single-property.tsx +++ b/packages/app-schema-editor/single-property.tsx @@ -8,6 +8,7 @@ import { import React, { useState } from "react"; import { ISingleLayerProperty } from "./types"; import { nameit, NameCases } from "@coli.codes/naming"; +import { UserSuggestionReason } from "./property-suggestions"; type UserInteractionMode = "editing" | "viewing"; @@ -30,6 +31,8 @@ interface ISingleLayerPropertyDefinitionProps { * when remove this whole preference. if not provided, remove button won't be present. */ onRemove?: () => void; + + suggestions: UserSuggestionReason[]; } export function SingleLayerPropertyDefinition( @@ -56,12 +59,12 @@ export function SingleLayerPropertyDefinition( const disableInputs = mode == "viewing"; return ( - <> +
    { setData({ @@ -103,12 +106,17 @@ export function SingleLayerPropertyDefinition( disabled={disableInputs} value={data?.targetProperty} > - {["on click", "on double click", "enabled", "opacity"].map((d) => { - return ( - - {d} - - ); + {props.suggestions.map((d) => { + switch (d.type) { + case "suggestion": + return ( + + {d.to} + + ); + default: + return <>; + } })} @@ -130,27 +138,6 @@ export function SingleLayerPropertyDefinition( /> )} - - )} - +
    ); } diff --git a/packages/design-sdk b/packages/design-sdk index 6946d66b..bd230edb 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit 6946d66b488b0b978564a54cbf57eb2e37d18b93 +Subproject commit bd230edb9c98e827f152cbfa9efd129a4fb581f5 diff --git a/packages/ui-code-box/codebox.tsx b/packages/ui-code-box/codebox.tsx index 3b0f796c..13f7b9b3 100644 --- a/packages/ui-code-box/codebox.tsx +++ b/packages/ui-code-box/codebox.tsx @@ -10,6 +10,7 @@ export function CodeBox({ readonly = true, code, codeActions, + disabled, }: { language: "dart" | "jsx" | string; editor?: "monaco" | "prism"; @@ -19,6 +20,7 @@ export function CodeBox({ readonly?: boolean; code: SourceInput; codeActions?: Array; + disabled?: true; }) { const raw = (code && (typeof code == "string" ? code : code.raw)) || ""; @@ -32,7 +34,7 @@ export function CodeBox({ return ( <> {/* */} - + {codeActions && codeActions.map((e) => { return e; @@ -50,7 +52,8 @@ export function CodeBox({ ); } -const CodeWrapper = styled.code` +const CodeWrapper = styled.code<{ disabled?: boolean }>` + opacity: ${(props) => (props.disabled ? 0.5 : 1)}; width: max-content; height: auto; `; From fc84887c5ded8eb0a17e2483aafdcafe697b5be3 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 10 Sep 2021 14:14:43 +0900 Subject: [PATCH 063/246] update plugin-sdk meta storage --- packages/plugin-app/plugin-hooks/index.ts | 1 + packages/plugin-app/plugin-hooks/use-meta.ts | 8 +- packages/plugin-sdk-app/plugin-sdk.ts | 5 + .../interfaces/meta/meta.requests.ts | 10 ++ packages/plugin-sdk-service/index.ts | 163 ++++++++---------- packages/plugin-sdk-service/storage/index.ts | 1 + .../storage/metadata/README.md | 1 + .../storage/metadata/index.ts | 37 ++++ 8 files changed, 133 insertions(+), 93 deletions(-) create mode 100644 packages/plugin-sdk-service/storage/metadata/README.md create mode 100644 packages/plugin-sdk-service/storage/metadata/index.ts diff --git a/packages/plugin-app/plugin-hooks/index.ts b/packages/plugin-app/plugin-hooks/index.ts index dabcac89..829dc019 100644 --- a/packages/plugin-app/plugin-hooks/index.ts +++ b/packages/plugin-app/plugin-hooks/index.ts @@ -1 +1,2 @@ export * from "./use-selection"; +export * from "./use-meta"; diff --git a/packages/plugin-app/plugin-hooks/use-meta.ts b/packages/plugin-app/plugin-hooks/use-meta.ts index 9a2f3547..a0bc5fe7 100644 --- a/packages/plugin-app/plugin-hooks/use-meta.ts +++ b/packages/plugin-app/plugin-hooks/use-meta.ts @@ -2,8 +2,6 @@ import { useEffect, useState } from "react"; import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "@core/constant"; import { PluginSdk } from "@plugin-sdk/app"; -export function useMeta() {} - export interface VisualComponentManifest { name: string; description: string; @@ -13,6 +11,11 @@ export interface VisualComponentManifest { codeSnippet: string; } +/** + * @deprecated + * @param id + * @returns + */ export function useMainComponentMeta( id?: string ): VisualComponentManifest | null { @@ -23,6 +26,7 @@ export function useMainComponentMeta( const [data, setData] = useState(null); useEffect(() => { PluginSdk.fetchMainComponentMetadata({ + type: "node-meta-fetch-request", id: id, namespace: ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE, key: "component-meta-data", diff --git a/packages/plugin-sdk-app/plugin-sdk.ts b/packages/plugin-sdk-app/plugin-sdk.ts index 42576c08..b2269dc9 100644 --- a/packages/plugin-sdk-app/plugin-sdk.ts +++ b/packages/plugin-sdk-app/plugin-sdk.ts @@ -194,6 +194,7 @@ export class PluginSdk { key: string ): Promise { return this.fetchMetadata({ + type: "node-meta-fetch-request", id: on, key: key, namespace: ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE, @@ -215,6 +216,7 @@ export class PluginSdk { * when instance id was givven it will automatically locate master component to set the metadata * @param request * @returns + * @deprecated - use plain meta update instead. */ static async fetchMainComponentMetadata(request: NodeMetaFetchRequest) { return this.request({ @@ -226,6 +228,7 @@ export class PluginSdk { /** * fetches the master component's layer corresponding to givven id. works similar like "fetchMainComponentMetadata" + * @deprecated - use plain meta update instead. */ static async fetchMainComponentLayerMetadata(request: NodeMetaFetchRequest) { throw "not implemented on handler side"; @@ -244,6 +247,7 @@ export class PluginSdk { * - so you'll need to prevent using this on some case to prevent future confusion) * @param request * @returns + * @deprecated - use plain meta update instead. */ static async updateMainComponentMetadata(request: NodeMetaUpdateRequest) { return this.request({ @@ -255,6 +259,7 @@ export class PluginSdk { static fetchRootMetadata(key: string): Promise { const data: BatchMetaFetchRequest = { + type: "batch-meta-fetch-request", key: key, }; return this.request({ diff --git a/packages/plugin-sdk-core/interfaces/meta/meta.requests.ts b/packages/plugin-sdk-core/interfaces/meta/meta.requests.ts index 7c14dd64..8739efd3 100644 --- a/packages/plugin-sdk-core/interfaces/meta/meta.requests.ts +++ b/packages/plugin-sdk-core/interfaces/meta/meta.requests.ts @@ -1,6 +1,13 @@ import { BatchMetaOperationTargetType } from "./meta.types"; +export type MetaRequest = + | BatchMetaUpdateRequest + | BatchMetaFetchRequest + | NodeMetaFetchRequest + | NodeMetaUpdateRequest; + export interface BatchMetaUpdateRequest { + type: "batch-meta-update-request"; targetType: BatchMetaOperationTargetType; custom: T; key: string; @@ -8,10 +15,12 @@ export interface BatchMetaUpdateRequest { } export interface BatchMetaFetchRequest { + type: "batch-meta-fetch-request"; key: string; } export interface NodeMetaFetchRequest { + type: "node-meta-fetch-request"; /** * the id of node */ @@ -21,6 +30,7 @@ export interface NodeMetaFetchRequest { } export interface NodeMetaUpdateRequest { + type: "node-meta-update-request"; /** * the id of node */ diff --git a/packages/plugin-sdk-service/index.ts b/packages/plugin-sdk-service/index.ts index 7bba8e61..76fe11da 100644 --- a/packages/plugin-sdk-service/index.ts +++ b/packages/plugin-sdk-service/index.ts @@ -39,9 +39,15 @@ import { PLUGIN_SDK_NS_GET_NODE, TargetPlatform, target_platform, + MetaRequest, } from "@plugin-sdk/core"; -import { WebStorage, FigmaStorage, IStorage } from "./storage"; +import { + WebStorage, + FigmaStorage, + IStorage, + LayerMetadataStorage, +} from "./storage"; // TODO - make it universal import { Figma, figma } from "@design-sdk/figma"; @@ -228,95 +234,68 @@ function handleInternalEvent(event: HanderProps) { return response(event.id, true); } -function handleMetaEvent(props: HanderProps) { - if (props.key == PLUGIN_SDK_EK_BATCH_META_UPDATE) { - const d = props.data as BatchMetaUpdateRequest; - figma?.root.setSharedPluginData(NS_FILE_ROOT_METADATA, d.key, d.value); - figma?.notify("metadata updated", { timeout: 1 }); - } else if (props.key == PLUGIN_SDK_EK_REQUEST_FETCH_ROOT_META) { - const d = props.data as BatchMetaFetchRequest; - const fetched = figma?.root.getSharedPluginData( - NS_FILE_ROOT_METADATA, - d.key - ); - console.log(`fetched root metadata for key ${d.key} is.`, fetched); - response(props.id, fetched); - } else if (props.key == PLUGIN_SDK_EK_REQUEST_FETCH_NODE_META) { - const request: NodeMetaFetchRequest = props.data; - if (!request.id) { - throw `node id is required in order to perform meta fetch`; - } - const data = figma - .getNodeById(request.id) - .getSharedPluginData(request.namespace, request.key); - const normData = normalizeMetadata(data); - return response(props.id, normData); - } else if ( - props.key == PLUGIN_SDK_EK_REQUEST_FETCH_NODE_MAIN_COMPONENT_META +function handleMetaEvent(props: HanderProps) { + if ( + props.key == PLUGIN_SDK_EK_BATCH_META_UPDATE || + props.key == PLUGIN_SDK_EK_REQUEST_FETCH_ROOT_META || + props.key == PLUGIN_SDK_EK_REQUEST_FETCH_NODE_META || + props.key == PUGIN_SDK_EK_REQUEST_UPDATE_NODE_META ) { - const request: NodeMetaFetchRequest = props.data; - const node = figma?.getNodeById(request.id); - let targetNode: Figma.SceneNode = getMaincomponentLike(node?.id); - const data = targetNode.getSharedPluginData(request.namespace, request.key); - const normData = normalizeMetadata(data); - return response(props.id, normData); - } else if (props.key == PUGIN_SDK_EK_REQUEST_UPDATE_MAIN_COMPONENT_META) { - const request: NodeMetaUpdateRequest = props.data; - const node = figma?.getNodeById(request.id); - let targetNode: Figma.SceneNode = getMaincomponentLike(node?.id); - targetNode.setSharedPluginData( - request.namespace, - request.key, - normalizeSavingMetadata(request.value) - ); - return response(props.id, true); - // - } else if (props.key == PUGIN_SDK_EK_REQUEST_UPDATE_NODE_META) { - const request: NodeMetaUpdateRequest = props.data; - figma - .getNodeById(request.id) - .setSharedPluginData( - request.namespace, - request.key, - normalizeSavingMetadata(request.value) - ); - return response(props.id, true); - } -} - -function normalizeSavingMetadata(data: string | object) { - return typeof data == "object" ? JSON.stringify(data) : data; -} - -function normalizeMetadata(data: string): object | string { - if (data == undefined || data.length == 0) { - return undefined; - } + const d = props.data; + switch (d.type) { + case "batch-meta-update-request": { + new LayerMetadataStorage(figma.root.id, NS_FILE_ROOT_METADATA).setItem( + d.key, + d.value + ); + figma.notify("metadata updated", { timeout: 1 }); + return response(props.id, true); + } + case "batch-meta-fetch-request": { + const fetched = new LayerMetadataStorage( + figma.root.id, + NS_FILE_ROOT_METADATA + ).getItem(d.key); - try { - const json = JSON.parse(data); - return json; - } catch (_) { - return data; + return response(props.id, fetched); + } + case "node-meta-fetch-request": { + if (!d.id) { + throw `node id is required in order to perform meta fetch`; + } + const fetched = new LayerMetadataStorage( + figma.root.id, + d.namespace + ).getItem(d.key); + return response(props.id, fetched); + } + case "node-meta-update-request": { + new LayerMetadataStorage(figma.root.id, d.namespace).setItem( + d.key, + d.value + ); + return response(props.id, true); + } + } } -} -function getMaincomponentLike(nodeID: string): Figma.SceneNode { - if (!nodeID) { - throw `node id is required in order to perform meta fetch`; - } - const node = figma?.getNodeById(nodeID); - let targetNode: Figma.SceneNode; - if (node.type == "INSTANCE") { - targetNode = node.mainComponent; - } else if (node.type == "COMPONENT") { - targetNode = node; - } else if (node.type == "COMPONENT_SET") { - targetNode = node; - } else { - throw `node ${node.id} of type ${node.type} is not supported for component meta manipulation.`; - } - return targetNode; + // if (props.key == PLUGIN_SDK_EK_REQUEST_FETCH_NODE_MAIN_COMPONENT_META) { + // const request: NodeMetaFetchRequest = props.data; + // let targetNode: Figma.SceneNode = getMaincomponentLike(request.id); + // const data = targetNode.getSharedPluginData(request.namespace, request.key); + // const normData = decode(data); + // return response(props.id, normData); + // } else if (props.key == PUGIN_SDK_EK_REQUEST_UPDATE_MAIN_COMPONENT_META) { + // const request: NodeMetaUpdateRequest = props.data; + // let targetNode: Figma.SceneNode = getMaincomponentLike(request?.id); + // targetNode.setSharedPluginData( + // request.namespace, + // request.key, + // encode(request.value) + // ); + // return response(props.id, true); + // // + // } } function handleRemoteApiEvent(props: HanderProps) {} @@ -483,11 +462,13 @@ function response( data: T, error: Error | undefined = undefined ): boolean { - // console.info( - // `${target_platform.get()}>> responding to request ${requestId} with data ${JSON.stringify( - // data - // )} and ${error ? "" + error : "no error"}` - // ); + if (process.env.NODE_ENV == "development" && process.env.VERBOSE) { + console.info( + `${target_platform.get()}>> responding to request ${requestId} with data ${JSON.stringify( + data + )} and ${error ? "" + error : "no error"}` + ); + } const msg = { id: requestId, diff --git a/packages/plugin-sdk-service/storage/index.ts b/packages/plugin-sdk-service/storage/index.ts index b80276d3..0802fa38 100644 --- a/packages/plugin-sdk-service/storage/index.ts +++ b/packages/plugin-sdk-service/storage/index.ts @@ -1,4 +1,5 @@ export * from "./web.storage"; export * from "./figma.storage"; export type { IStorage } from "./istorage"; +export { LayerMetadataStorage } from "./metadata"; // do not export universal storage until it is fullly implemented diff --git a/packages/plugin-sdk-service/storage/metadata/README.md b/packages/plugin-sdk-service/storage/metadata/README.md new file mode 100644 index 00000000..73df0aaf --- /dev/null +++ b/packages/plugin-sdk-service/storage/metadata/README.md @@ -0,0 +1 @@ +# Layer storage - a.k.a Metadata storage diff --git a/packages/plugin-sdk-service/storage/metadata/index.ts b/packages/plugin-sdk-service/storage/metadata/index.ts new file mode 100644 index 00000000..85ca0c98 --- /dev/null +++ b/packages/plugin-sdk-service/storage/metadata/index.ts @@ -0,0 +1,37 @@ +import { figma, Figma } from "@design-sdk/figma-types"; +import { IStorage } from "../istorage"; +import { decode, encode } from "../payload-handle"; + +export class LayerMetadataStorage implements IStorage { + constructor(readonly id: string, readonly namespace: string) {} + + getItem(key: string): Promise { + return decode( + figma.getNodeById(this.id).getSharedPluginData(this.namespace, key) + ); + } + + setItem(key: string, value: T) { + figma + .getNodeById(this.id) + .setSharedPluginData(this.namespace, key, encode(value)); + } +} + +// function getMaincomponentLike(nodeID: string): Figma.SceneNode { +// if (!nodeID) { +// throw `node id is required in order to perform meta fetch`; +// } +// const node = figma?.getNodeById(nodeID); +// let targetNode: Figma.SceneNode; +// if (node.type == "INSTANCE") { +// targetNode = node.mainComponent; +// } else if (node.type == "COMPONENT") { +// targetNode = node; +// } else if (node.type == "COMPONENT_SET") { +// targetNode = node; +// } else { +// throw `node ${node.id} of type ${node.type} is not supported for component meta manipulation.`; +// } +// return targetNode; +// } From 8685db10ad4438553da3059138103ba2f302410c Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 10 Sep 2021 14:15:23 +0900 Subject: [PATCH 064/246] update single layer property shape & add index path finder, store it to main compoenent's meta store --- .../component-view-screen.tsx | 15 +--- .../batch-meta-editor/index.tsx | 1 + packages/app-meta-editor/repository/index.ts | 2 + .../selection-configurable-layer.tsx | 90 ++++++++++++++----- .../selection-master-component.tsx | 39 +++----- .../app-schema-editor/single-property.tsx | 12 +-- packages/app-schema-editor/storage/index.ts | 88 ++++++++++++++++++ packages/app-schema-editor/types/index.ts | 6 +- .../types/single-layer-property-type.ts | 33 ++++--- packages/design-sdk | 2 +- 10 files changed, 213 insertions(+), 75 deletions(-) create mode 100644 packages/app-schema-editor/storage/index.ts diff --git a/packages/app-component-manage/component-view-screen.tsx b/packages/app-component-manage/component-view-screen.tsx index bc55d44b..1f434a96 100644 --- a/packages/app-component-manage/component-view-screen.tsx +++ b/packages/app-component-manage/component-view-screen.tsx @@ -12,7 +12,7 @@ import { Divider, IconButton, Typography } from "@material-ui/core"; import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "@core/constant"; import { Edit, Settings } from "@material-ui/icons"; import { ComponentSchemaEditor } from "./schema-editor"; -import { useSingleSelection } from "plugin-app"; +import { useSingleSelection, useMainComponentMeta } from "plugin-app"; interface VisualComponentManifest { name: string; @@ -24,22 +24,14 @@ interface VisualComponentManifest { } export function ComponentViewScreen() { - const [data, setData] = useState(undefined); - const selection = useSingleSelection(); + // const _data = useMainComponentMeta(selection.id); + const [data, setData] = useState(undefined); if (selection) { // 2. check if selected layer is a component or an instance. // TODO - // 3. find if data to display exists on a master component. - PluginSdk.fetchMainComponentMetadata({ - id: selection.id, - namespace: ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE, - key: "component-meta-data", - }).then((d) => { - setData(d); - }); } // 4. display data if exists. else, display input. @@ -54,6 +46,7 @@ export function ComponentViewScreen() { setData(newData); PluginSdk.updateMainComponentMetadata({ + type: "node-meta-update-request", id: selection.id, namespace: ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE, key: "component-meta-data", diff --git a/packages/app-meta-editor/batch-meta-editor/index.tsx b/packages/app-meta-editor/batch-meta-editor/index.tsx index 2475bb84..21cdfe60 100644 --- a/packages/app-meta-editor/batch-meta-editor/index.tsx +++ b/packages/app-meta-editor/batch-meta-editor/index.tsx @@ -26,6 +26,7 @@ export function BatchMetaEditor() { const handleUpdateClick = () => { const data: BatchMetaUpdateRequest = { + type: "batch-meta-update-request", targetType: targetType, custom: {}, key: propertyName, diff --git a/packages/app-meta-editor/repository/index.ts b/packages/app-meta-editor/repository/index.ts index 3c1b51ef..fa916965 100644 --- a/packages/app-meta-editor/repository/index.ts +++ b/packages/app-meta-editor/repository/index.ts @@ -24,6 +24,7 @@ export abstract class MetaDataRepository { switch (target_platform.get()) { case TargetPlatform.figma: return await PluginSdk.fetchMetadata({ + type: "node-meta-fetch-request", id: this.id, namespace: ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE, key: this.key, @@ -39,6 +40,7 @@ export abstract class MetaDataRepository { // TODO -- figma api call does not work here. case TargetPlatform.figma: return await PluginSdk.updateMetadata({ + type: "node-meta-update-request", id: this.id, namespace: ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE, key: this.key, diff --git a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx index f0929a0f..26b9f4f3 100644 --- a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx @@ -1,6 +1,5 @@ import React, { useEffect, useState } from "react"; import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "@core/constant"; -import { PluginSdk } from "@plugin-sdk/app"; import { SingleLayerPropertyDefinition } from "../single-property"; import { ISingleLayerProperty, IProperties } from "../types"; import { nodes } from "@design-sdk/core"; @@ -9,7 +8,8 @@ import { nameit, NameCases } from "@coli.codes/naming"; import { CodeBox } from "@ui/codebox"; import { isMemberOfComponentLike } from "@design-sdk/figma/node-analysis/component-like-type-analysis/analyze"; import { get_suggestions } from "../property-suggestions"; - +import { MappedPropertyStorage } from "../storage"; +import { IReflectNodeReference } from "@design-sdk/core/nodes/lignt"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const { node } = props; @@ -22,7 +22,6 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { }; const manifest = isMemberOfComponentLike(node); - if (manifest) { // with this, you can show root parent's info manifest.parent.type; @@ -31,22 +30,28 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { throw "logical error."; } - const id = - (manifest.parent.node.mainComponent && - manifest.parent.node.mainComponent.id) || - manifest.parent.node.id; + const this_root = manifest.parent.node; + const this_relative_index_path = getRelativeIndexPath( + manifest.parent.node, + node + ); + + const mainComponent = this_root.mainComponent || this_root; + const id = mainComponent.id; + + const main_component_sibling_layer = findWithRelativeIndexPath( + mainComponent, + this_relative_index_path + ); + + const storage = new MappedPropertyStorage(id); // TODO: layer analysis. configurable layer can be raw layyer or instance of a component (including variant isntance.) // << this is irrelevant comment to below code. const _sync_data_with_storage = () => { // this update logic shall be applied to master node's corresponding layer - PluginSdk.updateMetadata({ - id: id, - namespace: ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE, - key: "layer-property-data", - value: data, - }); + storage.sync(data); }; const handleOnRemove = (at: number) => { @@ -56,11 +61,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { }; useEffect(() => { - PluginSdk.fetchMetadata({ - id: id, - namespace: ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE, - key: "layer-property-data", - }).then((d) => { + storage.getProperties().then((d) => { if (d) { setData(d); } @@ -114,8 +115,11 @@ interface Props { name: nameit(node.name, { case: NameCases.camel }).name, type: "string", }, - targetProperty: undefined, - locateMode: "auto", + layer: { + id: main_component_sibling_layer.id, + propertyType: undefined, + location: "auto", + }, }} suggestions={suggestions} /> @@ -124,3 +128,49 @@ interface Props { ); } + +/** + * relative path of current node. (not main component) + * e.g. 0/1 + * ``` + * instance + * - layer + * - layer + * - THIS + * - layer + * ``` + */ +function getRelativeIndexPath( + root: IReflectNodeReference, + target: IReflectNodeReference +) { + const paths = []; + while (target) { + if (target.id === root.id) { + break; + } + paths.push(target.parent.children.findIndex((c) => c.id === target.id)); + target = target.parent; + } + + return paths.reverse().join("/"); +} + +function findWithRelativeIndexPath( + root: IReflectNodeReference, + indexPath: string | number[] +): IReflectNodeReference { + if (typeof indexPath === "string") { + indexPath = indexPath.split("/").map(Number); + } + + let children = root.children; + let i = 0; + for (const at of indexPath) { + if (i === indexPath.length - 1) { + return children[at]; + } + children = children[at].children; + i++; + } +} diff --git a/packages/app-schema-editor/by-selection-state/selection-master-component.tsx b/packages/app-schema-editor/by-selection-state/selection-master-component.tsx index 5ed603b5..cc9043be 100644 --- a/packages/app-schema-editor/by-selection-state/selection-master-component.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-master-component.tsx @@ -4,6 +4,8 @@ import { ISingleLayerProperty, IProperties } from "../types"; import { PluginSdk } from "@plugin-sdk/app"; import { PropsInterfaceView } from "../interface-code-builder/props-interface-view"; import { NameCases, nameit } from "@coli.codes/naming"; +import { FigmaNumber } from "@design-sdk/figma/features/variant"; +import { MappedPropertyStorage } from "../storage"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const { node } = props; @@ -13,21 +15,10 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { case: NameCases.pascal, }).name; - //1. list all layers under this component - const grandchilds = utils.mapGrandchildren(node); - - //2. extract schema from layers + const storage = new MappedPropertyStorage(node.id); useEffect(() => { - Promise.all( - grandchilds.map((c) => { - return PluginSdk.fetchMetadata_grida( - c.id, - "layer-property-data" - ); - }) - ).then((res) => { - const layersWithPropertyData = res.filter((i) => i !== undefined); - setProperties(layersWithPropertyData); + storage.getProperties().then((properties) => { + setProperties(properties); }); }, []); @@ -35,20 +26,18 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { <> {}} - properties={[]} + properties={ + properties?.map((i) => { + return { + key: i.schema.name, + type: FigmaNumber, // FIXME: change this to - i.schema.type + nullable: false, // TODO: + }; + }) ?? [] + } initialInterfaceName={interfaceName} onChange={() => {}} /> - {/* */} - {properties ? ( -
      - {properties.map((p) => { - return
    • {JSON.stringify(p)}
      • ; - })} -
    - ) : ( - <>Loading.. - )} ); } diff --git a/packages/app-schema-editor/single-property.tsx b/packages/app-schema-editor/single-property.tsx index ece013cc..fc14d1b3 100644 --- a/packages/app-schema-editor/single-property.tsx +++ b/packages/app-schema-editor/single-property.tsx @@ -7,7 +7,6 @@ import { } from "@material-ui/core"; import React, { useState } from "react"; import { ISingleLayerProperty } from "./types"; -import { nameit, NameCases } from "@coli.codes/naming"; import { UserSuggestionReason } from "./property-suggestions"; type UserInteractionMode = "editing" | "viewing"; @@ -99,12 +98,15 @@ export function SingleLayerPropertyDefinition( onChange={(e) => { setData({ ...data, - targetProperty: e.target.value as any, + layer: { + ...data.layer, + propertyType: e.target.value as any, + }, }); }} - defaultValue={data?.targetProperty} + defaultValue={data?.layer?.propertyType} disabled={disableInputs} - value={data?.targetProperty} + value={data?.layer?.propertyType} > {props.suggestions.map((d) => { switch (d.type) { @@ -120,7 +122,7 @@ export function SingleLayerPropertyDefinition( })} - {data?.targetProperty && ( + {data?.layer?.propertyType && ( p.id === `${layerId}/${accessor}`); + + const newRecord = { + id: `${layerId}/${accessor}`, + layer: layerId, + schema: { + name: name, + type: type, + }, + targetProperty: accessor, + }; + + if (existing !== -1) { + all[existing] = newRecord; + await this.updateProperties(...all); + } else { + await this.updateProperties(...all, newRecord); + } + return newRecord; + } + + async getPropertiesOf(layer: string) { + return (await this.getProperties()).filter((p) => p.layer.id === layer); + } + + private __properties__cache: IProperties; + async getProperties(): Promise { + if (!this.__properties__cache) { + this.__properties__cache = await PluginSdk.getItem(this.key); + } + return this.__properties__cache ?? []; + } + + private async updateProperties(...all: IProperties) { + this.__properties__cache = all; + await PluginSdk.setItem(this.key, all); + } + + async sync(all: IProperties) { + this.updateProperties(...all); + } +} + +//// archive --- legacy way, list all meta data under master's children. access all. +//2. extract schema from layers + +// Promise.all( +// grandchilds.map((c) => { +// return PluginSdk.fetchMetadata_grida( +// c.id, +// "layer-property-data" +// ); +// }) +// ).then((res) => { +// const layersWithPropertyData = res.filter((i) => i !== undefined); +// setProperties(layersWithPropertyData); +// }); diff --git a/packages/app-schema-editor/types/index.ts b/packages/app-schema-editor/types/index.ts index 4f928354..3711125c 100644 --- a/packages/app-schema-editor/types/index.ts +++ b/packages/app-schema-editor/types/index.ts @@ -1,5 +1,5 @@ -import type { ISingleLayerProperty } from "./single-layer-property-type"; +import type { ISingleLayerPropertyMapping } from "./single-layer-property-type"; // region export -export type IProperties = ISingleLayerProperty[]; -export type { ISingleLayerProperty } from "./single-layer-property-type"; +export type IProperties = ISingleLayerPropertyMapping[]; +export type { ISingleLayerPropertyMapping as ISingleLayerProperty } from "./single-layer-property-type"; diff --git a/packages/app-schema-editor/types/single-layer-property-type.ts b/packages/app-schema-editor/types/single-layer-property-type.ts index 6044e1d0..fde96c60 100644 --- a/packages/app-schema-editor/types/single-layer-property-type.ts +++ b/packages/app-schema-editor/types/single-layer-property-type.ts @@ -3,19 +3,32 @@ import { schema } from "coli"; /** * Storable object. this is stored to layer's metadata. do not modify this. */ -export interface ISingleLayerProperty { +export interface ISingleLayerPropertyMapping { + /** the record is unique by (layerId + accessor) */ + id?: string; + /** the id of the layer */ + layer: { + id?: string; + location: LocateMode; + /** + * target property on layer. + * for example if this is a text layer's property, + * it can be mapped to text#characters or also text#fills[0]. + * but only once at a time. + */ + propertyType: TargetPropertyType; + }; schema: schema.IProperty; - locateMode: string; - /** - * target property on layer. - * for example if this is a text layer's property, - * it can be mapped to text#characters or also text#fills[0]. - * but only once at a time. - */ - targetProperty: TargetProperty; } -type TargetProperty = TextNodeEditableProperty; +type LocateMode = + | "auto" + | { + type: "xpath"; + xpath: string; + }; + +type TargetPropertyType = TextNodeEditableProperty; type TextNodeEditableProperty = | { key: "text" } diff --git a/packages/design-sdk b/packages/design-sdk index bd230edb..0891a6b7 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit bd230edb9c98e827f152cbfa9efd129a4fb581f5 +Subproject commit 0891a6b733ee8776ceb4c563753f022245c86c79 From da635f4cf53eb5f3e17fd17feaad6f242e1425a2 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 10 Sep 2021 14:56:18 +0900 Subject: [PATCH 065/246] extract sibling finder to figma-xpath --- .../selection-configurable-layer.tsx | 96 ++++++------------- packages/app-schema-editor/storage/index.ts | 14 ++- .../types/single-layer-property-type.ts | 4 +- packages/design-sdk | 2 +- web/next.config.js | 1 + 5 files changed, 46 insertions(+), 71 deletions(-) diff --git a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx index 26b9f4f3..973d7cbc 100644 --- a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx @@ -10,16 +10,14 @@ import { isMemberOfComponentLike } from "@design-sdk/figma/node-analysis/compone import { get_suggestions } from "../property-suggestions"; import { MappedPropertyStorage } from "../storage"; import { IReflectNodeReference } from "@design-sdk/core/nodes/lignt"; +import { + findWithRelativeIndexPath, + getRelativeIndexPath, +} from "@design-sdk/figma-xpath"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const { node } = props; const [data, setData] = useState([]); - const handleOnSave = (d: ISingleLayerProperty) => { - const newData = data; - newData.push(d); - setData([...newData]); - _sync_data_with_storage(); - }; const manifest = isMemberOfComponentLike(node); if (manifest) { @@ -46,26 +44,38 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { const storage = new MappedPropertyStorage(id); + const handleOnSave = (d: ISingleLayerProperty) => { + console.log("on save", d); + storage + .upsertLayerProperty({ + layerId: d.layer.id, + name: d.schema.name, + type: d.schema.type, + accessor: d.layer.propertyType, + }) + .then(() => { + refresh_list(); + }); + }; + // TODO: layer analysis. configurable layer can be raw layyer or instance of a component (including variant isntance.) // << this is irrelevant comment to below code. - const _sync_data_with_storage = () => { - // this update logic shall be applied to master node's corresponding layer - storage.sync(data); + const handleOnRemove = (at: number) => { + storage.remove(data[at].id); + refresh_list(); }; - const handleOnRemove = (at: number) => { - data.splice(at, at + 1); - setData([...data]); - _sync_data_with_storage(); + const refresh_list = () => { + storage.getPropertiesOf(main_component_sibling_layer.id).then((d) => { + setData(d); + console.log("refresh list", main_component_sibling_layer.id, d); + }); }; useEffect(() => { - storage.getProperties().then((d) => { - if (d) { - setData(d); - } - }); + // load list for the first time. + refresh_list(); }, []); const all_suggestions = get_suggestions(node); @@ -79,10 +89,10 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { ); } - -/** - * relative path of current node. (not main component) - * e.g. 0/1 - * ``` - * instance - * - layer - * - layer - * - THIS - * - layer - * ``` - */ -function getRelativeIndexPath( - root: IReflectNodeReference, - target: IReflectNodeReference -) { - const paths = []; - while (target) { - if (target.id === root.id) { - break; - } - paths.push(target.parent.children.findIndex((c) => c.id === target.id)); - target = target.parent; - } - - return paths.reverse().join("/"); -} - -function findWithRelativeIndexPath( - root: IReflectNodeReference, - indexPath: string | number[] -): IReflectNodeReference { - if (typeof indexPath === "string") { - indexPath = indexPath.split("/").map(Number); - } - - let children = root.children; - let i = 0; - for (const at of indexPath) { - if (i === indexPath.length - 1) { - return children[at]; - } - children = children[at].children; - i++; - } -} diff --git a/packages/app-schema-editor/storage/index.ts b/packages/app-schema-editor/storage/index.ts index 6601efa1..3d270990 100644 --- a/packages/app-schema-editor/storage/index.ts +++ b/packages/app-schema-editor/storage/index.ts @@ -33,7 +33,7 @@ export class MappedPropertyStorage { const newRecord = { id: `${layerId}/${accessor}`, - layer: layerId, + layer: { id: layerId }, schema: { name: name, type: type, @@ -59,16 +59,26 @@ export class MappedPropertyStorage { if (!this.__properties__cache) { this.__properties__cache = await PluginSdk.getItem(this.key); } + console.log("getProperties", this.__properties__cache); return this.__properties__cache ?? []; } + async remove(id: string) { + const all = await this.getProperties(); + const index = all.findIndex((p) => p.id === id); + if (index !== -1) { + all.splice(index, 1); + await this.updateProperties(...all); + } + } + private async updateProperties(...all: IProperties) { this.__properties__cache = all; await PluginSdk.setItem(this.key, all); } async sync(all: IProperties) { - this.updateProperties(...all); + await this.updateProperties(...all); } } diff --git a/packages/app-schema-editor/types/single-layer-property-type.ts b/packages/app-schema-editor/types/single-layer-property-type.ts index fde96c60..9db2c9f7 100644 --- a/packages/app-schema-editor/types/single-layer-property-type.ts +++ b/packages/app-schema-editor/types/single-layer-property-type.ts @@ -9,14 +9,14 @@ export interface ISingleLayerPropertyMapping { /** the id of the layer */ layer: { id?: string; - location: LocateMode; + location?: LocateMode; /** * target property on layer. * for example if this is a text layer's property, * it can be mapped to text#characters or also text#fills[0]. * but only once at a time. */ - propertyType: TargetPropertyType; + propertyType?: TargetPropertyType; }; schema: schema.IProperty; } diff --git a/packages/design-sdk b/packages/design-sdk index 0891a6b7..e06be05e 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit 0891a6b733ee8776ceb4c563753f022245c86c79 +Subproject commit e06be05e7e5b176031faaa12e461bc9369883737 diff --git a/web/next.config.js b/web/next.config.js index 3aeedf88..762509b9 100644 --- a/web/next.config.js +++ b/web/next.config.js @@ -53,6 +53,7 @@ const withTM = require("next-transpile-modules")([ "@design-sdk/universal", "@design-sdk/figma", "@design-sdk/figma-url", + "@design-sdk/figma-xpath", "@design-sdk/url-analysis", "@design-sdk/sketch", // reflect-ui From c81d77309279677af3dab613c8cb2b6343f77ceb Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 10 Sep 2021 15:02:15 +0900 Subject: [PATCH 066/246] add master property loading on instance --- .../selection-instance-component.tsx | 24 +++++++++++++++++-- 1 file changed, 22 insertions(+), 2 deletions(-) diff --git a/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx b/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx index f5198317..faf42d6f 100644 --- a/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx @@ -1,21 +1,41 @@ -import React from "react"; +import React, { useEffect, useState } from "react"; import { nodes } from "@design-sdk/core"; +import { ISingleLayerProperty } from "../types"; import { PropsInterfaceView } from "../interface-code-builder/props-interface-view"; import { NameCases, nameit } from "@coli.codes/naming"; +import { FigmaNumber } from "@design-sdk/figma/features/variant"; +import { MappedPropertyStorage } from "../storage"; import { CodeBox } from "@ui/codebox"; import { buildeExampleData } from "../interface-code-builder"; export default function (props: { node: nodes.light.IReflectNodeReference }) { + const [properties, setProperties] = useState(null); + const master = props.node.mainComponent; const interfaceName = nameit(master.name + "-props", { case: NameCases.pascal, }).name; + const storage = new MappedPropertyStorage(master.id); + useEffect(() => { + storage.getProperties().then((properties) => { + setProperties(properties); + }); + }, []); + return ( <> {}} - properties={[]} + properties={ + properties?.map((i) => { + return { + key: i.schema.name, + type: FigmaNumber, // FIXME: change this to - i.schema.type + nullable: false, // TODO: + }; + }) ?? [] + } initialInterfaceName={interfaceName} onChange={() => {}} /> From 578fab82e662a46f809e3d50fd48a661190b3ccf Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 10 Sep 2021 15:08:40 +0900 Subject: [PATCH 067/246] add mapped properties loading to variant master and instance --- .../selection-variant-instance.tsx | 29 ++++++++++++++-- .../selection-variant-master.tsx | 34 ++++++++++++++----- 2 files changed, 52 insertions(+), 11 deletions(-) diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx index 555e927b..df8e4d36 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx @@ -1,8 +1,10 @@ -import React, { useState } from "react"; +import React, { useState, useEffect } from "react"; import { nodes } from "@design-sdk/core"; import { _FigmaVariantPropertyCompatType_to_string, VariantPropertyParser, + FigmaNumber, + VariantProperty, } from "@design-sdk/figma/features/variant"; import { CodeBox } from "@ui/codebox"; import { @@ -13,6 +15,8 @@ import { import { nameit, NameCases } from "@coli.codes/naming"; import { PropsInterfaceView } from "../interface-code-builder/props-interface-view"; import styled from "@emotion/styled"; +import { MappedPropertyStorage } from "../storage"; +import { ISingleLayerProperty } from "../types"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const _format_interface_pascal = (n) => { @@ -21,6 +25,9 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { }).name; }; + const [mappedProperties, setMappedProperties] = useState< + ISingleLayerProperty[] + >(null); const [interfaceName, setInterfaceName] = useState( _format_interface_pascal(props.node.name) ); @@ -28,8 +35,26 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { const formattedInterfaceName = _format_interface_pascal(interfaceName); const master = props.node.mainComponent; + const mappedPropertyStorage = new MappedPropertyStorage(master.id); + useEffect(() => { + mappedPropertyStorage.getProperties().then((properties) => { + setMappedProperties(properties); + }); + }, []); const parser = new VariantPropertyParser(master); const data_of_properties = parser.getData(master); + + const merged_properties: VariantProperty[] = [ + ...parser.properties, + ...(mappedProperties?.map((i) => { + return { + key: i.schema.name, + type: FigmaNumber, // FIXME: change this to - i.schema.type + nullable: false, // TODO: + } as VariantProperty; + }) || []), + ]; + const interface_raw_code = buildInterfaceString({ name: formattedInterfaceName, properties: parser.properties.map((d) => { @@ -52,7 +77,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { onInterfaceNameChange={(n) => { setInterfaceName(n); }} - properties={parser.properties} + properties={merged_properties} initialInterfaceName={interfaceName} onChange={() => {}} /> diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx index 438f221f..30433770 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx @@ -1,8 +1,8 @@ -import React from "react"; +import React, { useState, useEffect } from "react"; import { nodes } from "@design-sdk/core"; import { FigmaNumber, - FigmaVariantPropertyCompatType, + VariantProperty, VariantPropertyParser, } from "@design-sdk/figma/features/variant"; import { CodeBox } from "@ui/codebox"; @@ -12,17 +12,16 @@ import { jsxViewExampleBuilder, } from "../interface-code-builder"; import { nameit, NameCases } from "@coli.codes/naming"; -import { - InterfaceAttr, - InterfaceProps, - InterfaceTypeOption, -} from "@code-ui/interface/dist/lib/type"; import { PropsInterfaceView } from "../interface-code-builder/props-interface-view"; import styled from "@emotion/styled"; +import { ISingleLayerProperty } from "../types"; +import { MappedPropertyStorage } from "../storage"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const master = props.node; - + const [mappedProperties, setMappedProperties] = useState< + ISingleLayerProperty[] + >(null); const parser = new VariantPropertyParser(master); const data_of_properties = parser.getData(master); const interfaceName = nameit(master.parent.name + "-props", { @@ -33,11 +32,28 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { case: NameCases.pascal, }).name; + const mappedPropertyStorage = new MappedPropertyStorage(master.id); + useEffect(() => { + mappedPropertyStorage.getProperties().then((properties) => { + setMappedProperties(properties); + }); + }, []); + const merged_properties: VariantProperty[] = [ + ...parser.properties, + ...(mappedProperties?.map((i) => { + return { + key: i.schema.name, + type: FigmaNumber, // FIXME: change this to - i.schema.type + nullable: false, // TODO: + } as VariantProperty; + }) || []), + ]; + return ( {}} - properties={parser.properties} + properties={merged_properties} initialInterfaceName={interfaceName} onChange={() => {}} /> From 150918d47710865cb0132af8dcbe6e984c70bc19 Mon Sep 17 00:00:00 2001 From: You-j Date: Fri, 10 Sep 2021 15:45:04 +0900 Subject: [PATCH 068/246] add style: selection invalid --- .../by-selection-state/selection-invalid.tsx | 87 +++++++++++++++++-- 1 file changed, 79 insertions(+), 8 deletions(-) diff --git a/packages/app-schema-editor/by-selection-state/selection-invalid.tsx b/packages/app-schema-editor/by-selection-state/selection-invalid.tsx index da316b50..1326607f 100644 --- a/packages/app-schema-editor/by-selection-state/selection-invalid.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-invalid.tsx @@ -1,22 +1,42 @@ import React from "react"; import { CodeViewWithControl } from "@app/design-to-code/code-view-with-control"; import { nodes } from "@design-sdk/core"; -import { padding } from "@web-builder/styles"; +import styled from "@emotion/styled"; export default function (props: { node: nodes.light.IReflectNodeReference }) { + function mdiWarning() { + return ( + + + + ); + } + return ( <> -
    -

    Not a component

    -

    + + + {mdiWarning()} + Not a component + + You have to click one of the layer that is already a component or in a component. -

    +
    - - + Move to Preview Tab + Learn more
    -
    +     ); } + +const Wrapper = styled.div` + background: #1e1e1e; + color: #fff; + padding: 16px; + font-weight: 500; + font-size: 16px; + line-height: 20px; +`; + +const Svg = styled.svg` + margin-right: 8px; +`; + +const Title = styled.h1` + color: #c7c7c7; + margin: 0; + font-weight: 500; + font-size: 16px; + line-height: 20px; +`; + +const Description = styled.h6` + font-weight: normal; + font-size: 14px; + line-height: 17px; + + color: #717171; + margin: 8px 0; +`; + +const CustomButton = styled.button` + border: 0; + outline: none; + background: rgba(255, 255, 255, 0); + font-size: 14px; + line-height: 17px; + /* identical to box height */ + padding-left: 0; + padding-right: 0; + + text-decoration-line: underline; + + color: #868686; + cursor: pointer; + + margin-right: 16px; + &:last-child { + margin-right: 0; + } +`; From ccc98416d02f45f9629055372f9034f9af443d79 Mon Sep 17 00:00:00 2001 From: You-j Date: Fri, 10 Sep 2021 15:57:07 +0900 Subject: [PATCH 069/246] add warning icon in package --- .../by-selection-state/selection-invalid.tsx | 25 +++++-------------- packages/ui-icons/warning.tsx | 17 +++++++++++++ 2 files changed, 23 insertions(+), 19 deletions(-) create mode 100644 packages/ui-icons/warning.tsx diff --git a/packages/app-schema-editor/by-selection-state/selection-invalid.tsx b/packages/app-schema-editor/by-selection-state/selection-invalid.tsx index 1326607f..f3e9497d 100644 --- a/packages/app-schema-editor/by-selection-state/selection-invalid.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-invalid.tsx @@ -2,30 +2,16 @@ import React from "react"; import { CodeViewWithControl } from "@app/design-to-code/code-view-with-control"; import { nodes } from "@design-sdk/core"; import styled from "@emotion/styled"; +import Warning from "@assistant/icons/warning"; export default function (props: { node: nodes.light.IReflectNodeReference }) { - function mdiWarning() { - return ( - - - - ); - } - return ( <> - {mdiWarning()} + <Icon> + <Warning /> + </Icon> Not a component @@ -56,7 +42,8 @@ const Wrapper = styled.div` line-height: 20px; `; -const Svg = styled.svg` +const Icon = styled.div` + display: inline-block; margin-right: 8px; `; diff --git a/packages/ui-icons/warning.tsx b/packages/ui-icons/warning.tsx new file mode 100644 index 00000000..dd13ea41 --- /dev/null +++ b/packages/ui-icons/warning.tsx @@ -0,0 +1,17 @@ +import React from "react"; +export default function Warning() { + return ( + + + + ); +} From 560278b38933ba3087657f81b133f95c2eac50ce Mon Sep 17 00:00:00 2001 From: You-j Date: Fri, 10 Sep 2021 16:09:55 +0900 Subject: [PATCH 070/246] temp fix style: code wrapper opacity --- packages/ui-code-box/codebox.tsx | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/ui-code-box/codebox.tsx b/packages/ui-code-box/codebox.tsx index 13f7b9b3..1f82e633 100644 --- a/packages/ui-code-box/codebox.tsx +++ b/packages/ui-code-box/codebox.tsx @@ -53,7 +53,10 @@ export function CodeBox({ } const CodeWrapper = styled.code<{ disabled?: boolean }>` - opacity: ${(props) => (props.disabled ? 0.5 : 1)}; + // TEMPORARILY STYLE + pre { + opacity: ${(props) => (props.disabled ? 0.5 : 1)}; + } width: max-content; height: auto; `; From c13b672dd7983b16b2b2ab834c071163f3814f67 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 10 Sep 2021 16:18:41 +0900 Subject: [PATCH 071/246] bump design sdk with numeric variant type support --- packages/app-data-mapper/__plugin/index.ts | 6 +++--- packages/design-sdk | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/app-data-mapper/__plugin/index.ts b/packages/app-data-mapper/__plugin/index.ts index d23e3495..df4d713d 100644 --- a/packages/app-data-mapper/__plugin/index.ts +++ b/packages/app-data-mapper/__plugin/index.ts @@ -184,12 +184,12 @@ function mapVariant_try( for (const s of set) { const value = data[s.key]; - const _isConpat = - value && typeof s.type == "string" + const _isCompat = + value && typeof s.type == "symbol" ? s.type == value : (s.type as variant.FigmaEnum).values.includes(value); - if (_isConpat) { + if (_isCompat) { // 4. map the variant const swappingName = variant.buildVariantNameIncluding_Figma({ diff --git a/packages/design-sdk b/packages/design-sdk index e06be05e..7cbc52e2 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit e06be05e7e5b176031faaa12e461bc9369883737 +Subproject commit 7cbc52e284f1cf96bf5056870a85a937b5616ad1 From fc2814ee0910ba5d73fd858e8a292eff0bf3bf5a Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 10 Sep 2021 16:32:38 +0900 Subject: [PATCH 072/246] bump design sdk with figma api version up --- figma-core/package.json | 2 +- packages/design-sdk | 2 +- packages/design-to-code | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/figma-core/package.json b/figma-core/package.json index 5ce2471a..7e17546c 100644 --- a/figma-core/package.json +++ b/figma-core/package.json @@ -9,7 +9,7 @@ "@plugin-sdk/service": "0.0.0" }, "devDependencies": { - "@figma/plugin-typings": "^1.19.3", + "@figma/plugin-typings": "^1.33.0", "typescript": "^4.0.5" } } \ No newline at end of file diff --git a/packages/design-sdk b/packages/design-sdk index 7cbc52e2..ea660c0c 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit 7cbc52e284f1cf96bf5056870a85a937b5616ad1 +Subproject commit ea660c0c54b58b740a740b9103c2e8cb44918dc1 diff --git a/packages/design-to-code b/packages/design-to-code index 21fc05c9..aa605e74 160000 --- a/packages/design-to-code +++ b/packages/design-to-code @@ -1 +1 @@ -Subproject commit 21fc05c90793a1bb24c9ebe46836e12779fe157e +Subproject commit aa605e74f4cd66971e85c4b1b71101669a235b09 From 222d291426def2805c1c11fb3006b19ae788d6d7 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 10 Sep 2021 16:33:12 +0900 Subject: [PATCH 073/246] yarn --- yarn.lock | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/yarn.lock b/yarn.lock index 742cc5c0..eb74910b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1836,7 +1836,7 @@ resolved "https://registry.yarnpkg.com/@emotion/weak-memoize/-/weak-memoize-0.2.5.tgz#8eed982e2ee6f7f4e44c253e12962980791efd46" integrity sha512-6U71C2Wp7r5XtFtQzYrW5iKFT67OixrSxjI4MptCHzdSVlgabczzqLe0ZSgnub/5Kp4hSbpDB1tMytZY9pwxxA== -"@figma/plugin-typings@^1.19.3": +"@figma/plugin-typings@^1.33.0": version "1.33.0" resolved "https://registry.yarnpkg.com/@figma/plugin-typings/-/plugin-typings-1.33.0.tgz#dd9d22aaec1126b6cba73079c9d0da8e2de890c4" integrity sha512-k0YazDJqo5daYznnH+PKJJ32MGv8ftimFp1x+flH4k4lFwtH8UQ/tUGFBClZHDXZWX3rdr1GvUzhbUMdZhN3ug== From ca1a0d9bf0c94ad0e97cfdeaf208fc54688d6dd8 Mon Sep 17 00:00:00 2001 From: You-j Date: Fri, 10 Sep 2021 17:12:25 +0900 Subject: [PATCH 074/246] stash fix style: selection code boxs --- .../by-selection-state/selection-invalid.tsx | 22 ++++++++---- .../by-selection-state/selection-none.tsx | 35 +++++++++++++++++-- 2 files changed, 49 insertions(+), 8 deletions(-) diff --git a/packages/app-schema-editor/by-selection-state/selection-invalid.tsx b/packages/app-schema-editor/by-selection-state/selection-invalid.tsx index f3e9497d..b1d2cdfd 100644 --- a/packages/app-schema-editor/by-selection-state/selection-invalid.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-invalid.tsx @@ -23,12 +23,14 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { Learn more
    - + + + ); } @@ -68,6 +70,7 @@ const CustomButton = styled.button` border: 0; outline: none; background: rgba(255, 255, 255, 0); + font-weight: 400; font-size: 14px; line-height: 17px; /* identical to box height */ @@ -84,3 +87,10 @@ const CustomButton = styled.button` margin-right: 0; } `; + +const InnerWrapper = styled.div` + white-space: pre; + * { + font-family: "Source Code Pro", "Courier New", "Lucida Console", Monaco; + } +`; diff --git a/packages/app-schema-editor/by-selection-state/selection-none.tsx b/packages/app-schema-editor/by-selection-state/selection-none.tsx index 20aa480d..eb0f5e5e 100644 --- a/packages/app-schema-editor/by-selection-state/selection-none.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-none.tsx @@ -6,7 +6,7 @@ import styled from "@emotion/styled"; export default function () { return ( <> -
    + -
    + ); } @@ -56,6 +56,37 @@ function DummyInterfacePreview() { ); } +const Wrapper = styled.div` + /* 366px is preview(200) + navigation(52+40) + padding 16*2 height*/ + height: calc(100vh - 324px); + font-family: "Source Code Pro", "Courier New", "Lucida Console", Monaco; + background: #1e1e1e; + padding: 16px; + overflow-x: auto; + + font-weight: normal; + font-size: 14px; + line-height: 17px; + color: #717171; + white-space: pre; + + .token { + font-size: 14px; + line-height: 98%; + font-weight: 400; + } + + * { + font-family: "Source Code Pro", "Courier New", "Lucida Console", Monaco; + overflow: visible; + } + + -ms-overflow-style: none; // IE에서 스크롤바 감춤 + &::-webkit-scrollbar { + display: none !important; // 윈도우 크롬 등 + } +`; + const DisabledOverlay = styled.div` /* TODO: add overlay color */ /* color: #8c1d1d1d; */ From bf5aa60db7bdf46abf2afa5e52465efc2e62a812 Mon Sep 17 00:00:00 2001 From: You-j Date: Fri, 10 Sep 2021 17:29:50 +0900 Subject: [PATCH 075/246] fix style selection none --- .../app-schema-editor/by-selection-state/selection-none.tsx | 3 +++ 1 file changed, 3 insertions(+) diff --git a/packages/app-schema-editor/by-selection-state/selection-none.tsx b/packages/app-schema-editor/by-selection-state/selection-none.tsx index eb0f5e5e..4efc42c9 100644 --- a/packages/app-schema-editor/by-selection-state/selection-none.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-none.tsx @@ -52,6 +52,7 @@ function DummyInterfacePreview() { editor="prism" code={__placeholder_dummy_interface_code} language={"typescript"} + disabled={true} /> ); } @@ -90,4 +91,6 @@ const Wrapper = styled.div` const DisabledOverlay = styled.div` /* TODO: add overlay color */ /* color: #8c1d1d1d; */ + margin-top: 25px; + } `; From 6b20a4f2d85481bbccec243218034fa2d0d0a4db Mon Sep 17 00:00:00 2001 From: You-j Date: Fri, 10 Sep 2021 17:45:49 +0900 Subject: [PATCH 076/246] fix style: pre --- .../by-selection-state/selection-invalid.tsx | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/app-schema-editor/by-selection-state/selection-invalid.tsx b/packages/app-schema-editor/by-selection-state/selection-invalid.tsx index b1d2cdfd..e70aca92 100644 --- a/packages/app-schema-editor/by-selection-state/selection-invalid.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-invalid.tsx @@ -90,7 +90,13 @@ const CustomButton = styled.button` const InnerWrapper = styled.div` white-space: pre; + * { font-family: "Source Code Pro", "Courier New", "Lucida Console", Monaco; } + + // TEMP STYLE + pre { + padding: 0 16px; + } `; From 1a5606875ff1233a9c8b18553ab627540c9ece19 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 10 Sep 2021 18:36:22 +0900 Subject: [PATCH 077/246] update configurablle layer to use pure coli for dynamic interface building --- .../selection-configurable-layer.coli.ts | 112 ++++++++++++++++++ .../selection-configurable-layer.tsx | 55 +++++---- .../interface-code-builder/props-builder.ts | 26 ++-- .../type-to-coli-type.ts | 25 ++++ packages/app-schema-editor/storage/index.ts | 5 +- packages/design-sdk | 2 +- 6 files changed, 184 insertions(+), 41 deletions(-) create mode 100644 packages/app-schema-editor/by-selection-state/selection-configurable-layer.coli.ts create mode 100644 packages/app-schema-editor/interface-code-builder/type-to-coli-type.ts diff --git a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.coli.ts b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.coli.ts new file mode 100644 index 00000000..e3d25c06 --- /dev/null +++ b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.coli.ts @@ -0,0 +1,112 @@ +import { NameCases, ScopedVariableNamer } from "@coli.codes/naming"; +import { IReflectNodeReference } from "@design-sdk/core/nodes/lignt"; +import { variant } from "@design-sdk/figma/features"; +import { + FigmaBoolean, + FigmaNumber, + FigmaUnique, + _FigmaVariantPropertyCompatType_to_string, +} from "@design-sdk/figma/features/variant"; + +import { + InterfaceDeclaration, + PropertySignature, + Identifier, + LiteralType, + StringLiteral, + UnionType, + BooleanKeyword, + CommentExpression, + NumberKeyword, + stringfy, +} from "coli"; +import { typeToColiType } from "../interface-code-builder/type-to-coli-type"; +import { IProperties } from "../types"; +import { ISingleLayerPropertyMapping } from "../types/single-layer-property-type"; + +export default function ({ + root, + rootInterfaceName, + rootProperties, + propertyNamer, + layerProperties, + layer, +}: { + root: IReflectNodeReference; + rootInterfaceName: string; + rootProperties: IProperties; + propertyNamer: ScopedVariableNamer; + layerProperties: IProperties; + layer: IReflectNodeReference; +}) { + const _parent_static_property_signatures = rootProperties.map((n) => { + return new PropertySignature({ + name: new Identifier( + propertyNamer.nameit(n.schema.name, { + case: NameCases.camel, + }).name + ), + type: typeToColiType(FigmaNumber), // FIXME: use => n.schema.type + }); + }); + + const _this_static_property_signatures = [...layerProperties]; + + const _this_configurable_property_signature = [ + ..._this_static_property_signatures, + // TODO: + { + layer: { + id: "unknown", + }, + schema: { + name: "todo", + type: "todo", + }, + }, + ].map((n) => { + return new PropertySignature({ + name: new Identifier( + propertyNamer.nameit(n.schema.name, { + case: NameCases.camel, + }).name + ), + type: typeToColiType(FigmaNumber), // FIXME: use => n.schema.type + }); + }); + + return [ + // @ts-ignore + new CommentExpression({ + style: "multi-line", + content: `${root.name}'s interface`, + }) as any, + + new InterfaceDeclaration({ + name: rootInterfaceName, + members: [ + ..._parent_static_property_signatures, + + // @ts-ignore + new CommentExpression({ + style: "single-line", + content: `properties of "${layer.name}"`, + }) as any, + new CommentExpression({ + style: "single-line", + content: `-------------------------------`, + }) as any, + ..._this_configurable_property_signature, + new CommentExpression({ + style: "single-line", + content: `-------------------------------`, + }) as any, + // link button + new CommentExpression({ + style: "single-line", + content: `add new property mapping`, + }) as any, + ], + }), + ]; +} diff --git a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx index 973d7cbc..ca32c8f3 100644 --- a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx @@ -4,7 +4,7 @@ import { SingleLayerPropertyDefinition } from "../single-property"; import { ISingleLayerProperty, IProperties } from "../types"; import { nodes } from "@design-sdk/core"; import { _FigmaVariantPropertyCompatType_to_string } from "@design-sdk/figma/features/variant"; -import { nameit, NameCases } from "@coli.codes/naming"; +import { nameit, NameCases, ScopedVariableNamer } from "@coli.codes/naming"; import { CodeBox } from "@ui/codebox"; import { isMemberOfComponentLike } from "@design-sdk/figma/node-analysis/component-like-type-analysis/analyze"; import { get_suggestions } from "../property-suggestions"; @@ -14,10 +14,15 @@ import { findWithRelativeIndexPath, getRelativeIndexPath, } from "@design-sdk/figma-xpath"; +import { stringfy } from "coli"; +import this_interface_builder from "./selection-configurable-layer.coli"; +import { ReservedKeywordPlatformPresets } from "@coli.codes/naming/reserved"; + export default function (props: { node: nodes.light.IReflectNodeReference }) { const { node } = props; - const [data, setData] = useState([]); + const [localProperties, setLocalProperties] = useState([]); + const [parentProperties, setParentProperties] = useState([]); const manifest = isMemberOfComponentLike(node); if (manifest) { @@ -62,20 +67,22 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { // << this is irrelevant comment to below code. const handleOnRemove = (at: number) => { - storage.remove(data[at].id); + storage.remove(localProperties[at].id); refresh_list(); }; const refresh_list = () => { storage.getPropertiesOf(main_component_sibling_layer.id).then((d) => { - setData(d); - console.log("refresh list", main_component_sibling_layer.id, d); + setLocalProperties(d); }); }; useEffect(() => { // load list for the first time. refresh_list(); + storage + .getPropertiesExcept(main_component_sibling_layer.id) + .then(setParentProperties); }, []); const all_suggestions = get_suggestions(node); @@ -83,26 +90,32 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { ? all_suggestions : (all_suggestions && [all_suggestions]) || []; - const _has_saved_data = data.length > 0; + const final_code = stringfy( + this_interface_builder({ + root: mainComponent, + rootInterfaceName: mainComponent.name, // TODO: pass built name + rootProperties: parentProperties, + propertyNamer: new ScopedVariableNamer( + "properties", + ReservedKeywordPlatformPresets.react + ), + layerProperties: localProperties, + layer: node, + }), + { + language: "typescript", + } + ); + + const _has_saved_data = localProperties.length > 0; return ( <> - - -
    + + +
    {_has_saved_data ? ( <> - {data.map((d, i) => ( + {localProperties.map((d, i) => ( { handleOnRemove(i); diff --git a/packages/app-schema-editor/interface-code-builder/props-builder.ts b/packages/app-schema-editor/interface-code-builder/props-builder.ts index 7d49431b..62f20fdf 100644 --- a/packages/app-schema-editor/interface-code-builder/props-builder.ts +++ b/packages/app-schema-editor/interface-code-builder/props-builder.ts @@ -17,7 +17,9 @@ import { stringfy, } from "coli"; -import { NameCases, nameit } from "@coli.codes/naming"; +import { NameCases, nameit, ScopedVariableNamer } from "@coli.codes/naming"; +import { ReservedKeywordPlatforms } from "@coli.codes/naming/reserved"; +import { typeToColiType } from "./type-to-coli-type"; export interface InterfaceCodeBuilParam { name: string; @@ -28,32 +30,20 @@ export interface InterfaceCodeBuilParam { } export function buildInterface(p: InterfaceCodeBuilParam) { - const _make_type = (t: variant.FigmaVariantPropertyCompatType) => { - if (t == FigmaNumber) { - return new NumberKeyword(); - } else if (t == FigmaBoolean) { - return new BooleanKeyword(); - } else if (t.type == "unique") { - return new LiteralType(new StringLiteral(t.value)); - } else if (t.type == "enum") { - return new UnionType({ - types: t.values.map((v) => { - return new LiteralType(new StringLiteral(v)); - }), - }); - } - }; + const propertyNamer = new ScopedVariableNamer("property", [ + ReservedKeywordPlatforms.typescript, + ]); return new InterfaceDeclaration({ name: p.name, members: p.properties.map((n) => { return new PropertySignature({ name: new Identifier( - nameit(n.name, { + propertyNamer.nameit(n.name, { case: NameCases.camel, }).name ), - type: _make_type(n.type), + type: typeToColiType(n.type), }); }), }); diff --git a/packages/app-schema-editor/interface-code-builder/type-to-coli-type.ts b/packages/app-schema-editor/interface-code-builder/type-to-coli-type.ts new file mode 100644 index 00000000..296f9498 --- /dev/null +++ b/packages/app-schema-editor/interface-code-builder/type-to-coli-type.ts @@ -0,0 +1,25 @@ +import { variant } from "@design-sdk/figma/features"; +import { FigmaBoolean, FigmaNumber } from "@design-sdk/figma/features/variant"; +import { + BooleanKeyword, + LiteralType, + NumberKeyword, + StringLiteral, + UnionType, +} from "coli"; + +export function typeToColiType(t: variant.FigmaVariantPropertyCompatType) { + if (t == FigmaNumber) { + return new NumberKeyword(); + } else if (t == FigmaBoolean) { + return new BooleanKeyword(); + } else if (t.type == "unique") { + return new LiteralType(new StringLiteral(t.value)); + } else if (t.type == "enum") { + return new UnionType({ + types: t.values.map((v) => { + return new LiteralType(new StringLiteral(v)); + }), + }); + } +} diff --git a/packages/app-schema-editor/storage/index.ts b/packages/app-schema-editor/storage/index.ts index 3d270990..d956e90f 100644 --- a/packages/app-schema-editor/storage/index.ts +++ b/packages/app-schema-editor/storage/index.ts @@ -54,12 +54,15 @@ export class MappedPropertyStorage { return (await this.getProperties()).filter((p) => p.layer.id === layer); } + async getPropertiesExcept(layerId: string) { + return (await this.getProperties()).filter((p) => p.layer.id !== layerId); + } + private __properties__cache: IProperties; async getProperties(): Promise { if (!this.__properties__cache) { this.__properties__cache = await PluginSdk.getItem(this.key); } - console.log("getProperties", this.__properties__cache); return this.__properties__cache ?? []; } diff --git a/packages/design-sdk b/packages/design-sdk index ea660c0c..551441c8 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit ea660c0c54b58b740a740b9103c2e8cb44918dc1 +Subproject commit 551441c8ea895fd75f206eb5a3a6a6b62a87fc76 From a13793c11c7a88e0106771394ee774c6bf5f1e4e Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 10 Sep 2021 19:11:38 +0900 Subject: [PATCH 078/246] update all selection view to show coli based code ui --- .../selection-configurable-layer.coli.ts | 28 ++++--------- .../selection-configurable-layer.tsx | 6 +-- .../selection-instance-component.coli.ts | 42 +++++++++++++++++++ .../selection-instance-component.tsx | 19 +++++++-- .../selection-master-component.coli.ts | 42 +++++++++++++++++++ .../selection-master-component.tsx | 25 ++++++++--- .../selection-variant-instance.tsx | 18 ++++---- .../selection-variant-master.tsx | 6 --- .../scoped-property-id-namer.ts | 7 ++++ ...-property-mapping-to-property-signature.ts | 22 ++++++++++ 10 files changed, 171 insertions(+), 44 deletions(-) create mode 100644 packages/app-schema-editor/by-selection-state/selection-instance-component.coli.ts create mode 100644 packages/app-schema-editor/by-selection-state/selection-master-component.coli.ts create mode 100644 packages/app-schema-editor/interface-code-builder/scoped-property-id-namer.ts create mode 100644 packages/app-schema-editor/interface-code-builder/single-layer-property-mapping-to-property-signature.ts diff --git a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.coli.ts b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.coli.ts index e3d25c06..93546890 100644 --- a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.coli.ts +++ b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.coli.ts @@ -20,6 +20,7 @@ import { NumberKeyword, stringfy, } from "coli"; +import { singleLayerPropertyMappingToPropertySignature } from "../interface-code-builder/single-layer-property-mapping-to-property-signature"; import { typeToColiType } from "../interface-code-builder/type-to-coli-type"; import { IProperties } from "../types"; import { ISingleLayerPropertyMapping } from "../types/single-layer-property-type"; @@ -39,16 +40,14 @@ export default function ({ layerProperties: IProperties; layer: IReflectNodeReference; }) { - const _parent_static_property_signatures = rootProperties.map((n) => { - return new PropertySignature({ - name: new Identifier( - propertyNamer.nameit(n.schema.name, { - case: NameCases.camel, - }).name - ), - type: typeToColiType(FigmaNumber), // FIXME: use => n.schema.type + const mapper = (singleLineProperty) => { + return singleLayerPropertyMappingToPropertySignature({ + singlePropertyMapping: singleLineProperty, + propertyNamer, }); - }); + }; + + const _parent_static_property_signatures = rootProperties.map(mapper); const _this_static_property_signatures = [...layerProperties]; @@ -64,16 +63,7 @@ export default function ({ type: "todo", }, }, - ].map((n) => { - return new PropertySignature({ - name: new Identifier( - propertyNamer.nameit(n.schema.name, { - case: NameCases.camel, - }).name - ), - type: typeToColiType(FigmaNumber), // FIXME: use => n.schema.type - }); - }); + ].map(mapper); return [ // @ts-ignore diff --git a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx index ca32c8f3..79f29857 100644 --- a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx @@ -17,6 +17,7 @@ import { import { stringfy } from "coli"; import this_interface_builder from "./selection-configurable-layer.coli"; import { ReservedKeywordPlatformPresets } from "@coli.codes/naming/reserved"; +import { reactNamer } from "../interface-code-builder/scoped-property-id-namer"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const { node } = props; @@ -95,10 +96,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { root: mainComponent, rootInterfaceName: mainComponent.name, // TODO: pass built name rootProperties: parentProperties, - propertyNamer: new ScopedVariableNamer( - "properties", - ReservedKeywordPlatformPresets.react - ), + propertyNamer: reactNamer, layerProperties: localProperties, layer: node, }), diff --git a/packages/app-schema-editor/by-selection-state/selection-instance-component.coli.ts b/packages/app-schema-editor/by-selection-state/selection-instance-component.coli.ts new file mode 100644 index 00000000..f18655eb --- /dev/null +++ b/packages/app-schema-editor/by-selection-state/selection-instance-component.coli.ts @@ -0,0 +1,42 @@ +import { NameCases, ScopedVariableNamer } from "@coli.codes/naming"; +import { IReflectNodeReference } from "@design-sdk/core/nodes/lignt"; +import { variant } from "@design-sdk/figma/features"; + +import { + InterfaceDeclaration, + PropertySignature, + Identifier, + LiteralType, + StringLiteral, + UnionType, + BooleanKeyword, + CommentExpression, + NumberKeyword, + stringfy, +} from "coli"; +import { singleLayerPropertyMappingToPropertySignature } from "../interface-code-builder/single-layer-property-mapping-to-property-signature"; +import { typeToColiType } from "../interface-code-builder/type-to-coli-type"; +import { IProperties } from "../types"; +import { ISingleLayerPropertyMapping } from "../types/single-layer-property-type"; + +export default function ({ + mainInterfaceName, + properties, + propertyNamer, +}: { + mainInterfaceName: string; + properties: IProperties; + propertyNamer: ScopedVariableNamer; +}) { + const property_signatures = properties.map((d) => { + return singleLayerPropertyMappingToPropertySignature({ + singlePropertyMapping: d, + propertyNamer, + }); + }); + + return new InterfaceDeclaration({ + name: mainInterfaceName, + members: [...property_signatures], + }); +} diff --git a/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx b/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx index faf42d6f..0f883cf9 100644 --- a/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx @@ -7,9 +7,12 @@ import { FigmaNumber } from "@design-sdk/figma/features/variant"; import { MappedPropertyStorage } from "../storage"; import { CodeBox } from "@ui/codebox"; import { buildeExampleData } from "../interface-code-builder"; +import this_interface_builder from "./selection-instance-component.coli"; +import { reactNamer } from "../interface-code-builder/scoped-property-id-namer"; +import { stringfy } from "coli"; export default function (props: { node: nodes.light.IReflectNodeReference }) { - const [properties, setProperties] = useState(null); + const [properties, setProperties] = useState([]); const master = props.node.mainComponent; const interfaceName = nameit(master.name + "-props", { @@ -23,9 +26,19 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { }); }, []); + const interface_code_coli = this_interface_builder({ + mainInterfaceName: interfaceName, + properties: properties, + propertyNamer: reactNamer, + }); + const interface_code_string = stringfy(interface_code_coli, { + language: "typescript", + }); + return ( <> - + {/* {}} properties={ properties?.map((i) => { @@ -38,7 +51,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { } initialInterfaceName={interfaceName} onChange={() => {}} - /> + /> */} { + return singleLayerPropertyMappingToPropertySignature({ + singlePropertyMapping: d, + propertyNamer, + }); + }); + + return new InterfaceDeclaration({ + name: mainInterfaceName, + members: [...property_signatures], + }); +} diff --git a/packages/app-schema-editor/by-selection-state/selection-master-component.tsx b/packages/app-schema-editor/by-selection-state/selection-master-component.tsx index cc9043be..313d4085 100644 --- a/packages/app-schema-editor/by-selection-state/selection-master-component.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-master-component.tsx @@ -6,10 +6,15 @@ import { PropsInterfaceView } from "../interface-code-builder/props-interface-vi import { NameCases, nameit } from "@coli.codes/naming"; import { FigmaNumber } from "@design-sdk/figma/features/variant"; import { MappedPropertyStorage } from "../storage"; - +import { CodeBox } from "@ui/codebox"; +import this_interface_builder from "./selection-master-component.coli"; +import { reactNamer } from "../interface-code-builder/scoped-property-id-namer"; +import { stringfy } from "coli"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const { node } = props; - const [properties, setProperties] = useState(null); + const [mappedProperties, setMappedProperties] = useState< + ISingleLayerProperty[] + >([]); const interfaceName = nameit(node.name + "-props", { case: NameCases.pascal, @@ -18,13 +23,23 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { const storage = new MappedPropertyStorage(node.id); useEffect(() => { storage.getProperties().then((properties) => { - setProperties(properties); + setMappedProperties(properties); }); }, []); + const interface_code_coli = this_interface_builder({ + mainInterfaceName: interfaceName, + properties: mappedProperties, + propertyNamer: reactNamer, + }); + const interface_code_string = stringfy(interface_code_coli, { + language: "typescript", + }); + return ( <> - + {/* {}} properties={ properties?.map((i) => { @@ -37,7 +52,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { } initialInterfaceName={interfaceName} onChange={() => {}} - /> + /> */} ); } diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx index df8e4d36..d385ad26 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx @@ -73,13 +73,17 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { <> {/* TODO: add copy - 1interface_raw_code1 */} - { - setInterfaceName(n); - }} - properties={merged_properties} - initialInterfaceName={interfaceName} - onChange={() => {}} + { + return { + name: d.key, + type: d.type, + }; + }), + })} /> - {}} - properties={merged_properties} - initialInterfaceName={interfaceName} - onChange={() => {}} - /> n.schema.type + }); +} From 645bb9c654333335f6f499afd5de41b12b44543a Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 10 Sep 2021 21:42:43 +0900 Subject: [PATCH 079/246] update wrapper style --- .../by-selection-state/_shared-components/index.ts | 8 ++++++++ .../by-selection-state/selection-configurable-layer.tsx | 5 +++-- .../by-selection-state/selection-instance-component.tsx | 5 +++-- .../by-selection-state/selection-master-component.tsx | 5 +++-- .../by-selection-state/selection-variant-master.tsx | 9 +-------- 5 files changed, 18 insertions(+), 14 deletions(-) create mode 100644 packages/app-schema-editor/by-selection-state/_shared-components/index.ts diff --git a/packages/app-schema-editor/by-selection-state/_shared-components/index.ts b/packages/app-schema-editor/by-selection-state/_shared-components/index.ts new file mode 100644 index 00000000..0e3248d6 --- /dev/null +++ b/packages/app-schema-editor/by-selection-state/_shared-components/index.ts @@ -0,0 +1,8 @@ +import styled from "@emotion/styled"; + +export const CodeStyleWrapper = styled.div` + height: calc(100vh - 292px); + background: #1e1e1e; + overflow: auto; + padding: 0 6px; +`; diff --git a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx index 79f29857..b7032c53 100644 --- a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx @@ -18,6 +18,7 @@ import { stringfy } from "coli"; import this_interface_builder from "./selection-configurable-layer.coli"; import { ReservedKeywordPlatformPresets } from "@coli.codes/naming/reserved"; import { reactNamer } from "../interface-code-builder/scoped-property-id-namer"; +import { CodeStyleWrapper } from "./_shared-components"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const { node } = props; @@ -107,7 +108,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { const _has_saved_data = localProperties.length > 0; return ( - <> +
    @@ -146,6 +147,6 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { /> )}
    - +     ); } diff --git a/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx b/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx index 0f883cf9..8981fac6 100644 --- a/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx @@ -10,6 +10,7 @@ import { buildeExampleData } from "../interface-code-builder"; import this_interface_builder from "./selection-instance-component.coli"; import { reactNamer } from "../interface-code-builder/scoped-property-id-namer"; import { stringfy } from "coli"; +import { CodeStyleWrapper } from "./_shared-components"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const [properties, setProperties] = useState([]); @@ -36,7 +37,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { }); return ( - <> + {/* {}} @@ -60,6 +61,6 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { properties: {}, })} /> - + ); } diff --git a/packages/app-schema-editor/by-selection-state/selection-master-component.tsx b/packages/app-schema-editor/by-selection-state/selection-master-component.tsx index 313d4085..621f6a22 100644 --- a/packages/app-schema-editor/by-selection-state/selection-master-component.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-master-component.tsx @@ -10,6 +10,7 @@ import { CodeBox } from "@ui/codebox"; import this_interface_builder from "./selection-master-component.coli"; import { reactNamer } from "../interface-code-builder/scoped-property-id-namer"; import { stringfy } from "coli"; +import { CodeStyleWrapper } from "./_shared-components"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const { node } = props; const [mappedProperties, setMappedProperties] = useState< @@ -37,7 +38,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { }); return ( - <> + {/* {}} @@ -53,6 +54,6 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { initialInterfaceName={interfaceName} onChange={() => {}} /> */} - + ); } diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx index acd4bb46..92efdf80 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx @@ -13,9 +13,9 @@ import { } from "../interface-code-builder"; import { nameit, NameCases } from "@coli.codes/naming"; import { PropsInterfaceView } from "../interface-code-builder/props-interface-view"; -import styled from "@emotion/styled"; import { ISingleLayerProperty } from "../types"; import { MappedPropertyStorage } from "../storage"; +import { CodeStyleWrapper } from "./_shared-components"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const master = props.node; @@ -84,10 +84,3 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) {     ); } - -const CodeStyleWrapper = styled.div` - height: calc(100vh - 292px); - background: #1e1e1e; - overflow: auto; - padding: 0 6px; -`; From 6d61e2c6162bf44f7bb03c48c87f6c51eba678f1 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 10 Sep 2021 21:59:51 +0900 Subject: [PATCH 080/246] add cache to invalid code previewer --- .../code-session-cache-storage.ts | 19 +++++++++++++++++++ .../code-view-with-control.tsx | 16 ++++++++++++++++ .../by-selection-state/selection-invalid.tsx | 1 + 3 files changed, 36 insertions(+) create mode 100644 packages/app-design-to-code/code-session-cache-storage.ts diff --git a/packages/app-design-to-code/code-session-cache-storage.ts b/packages/app-design-to-code/code-session-cache-storage.ts new file mode 100644 index 00000000..05c280f4 --- /dev/null +++ b/packages/app-design-to-code/code-session-cache-storage.ts @@ -0,0 +1,19 @@ +import { DesigntoCodeUserOptions } from "./user-options"; + +export class CodeSessionCacheStorage { + private readonly key; + constructor( + readonly node: string, + readonly preference: DesigntoCodeUserOptions + ) { + this.key = `${node}-${preference.framework}-${preference.language}`; + } + + setCache(code: string) { + window.localStorage.setItem(this.key, code); + } + + getCache(): string | null { + return window.localStorage.getItem(this.key); + } +} diff --git a/packages/app-design-to-code/code-view-with-control.tsx b/packages/app-design-to-code/code-view-with-control.tsx index 64cf733c..180f46a3 100644 --- a/packages/app-design-to-code/code-view-with-control.tsx +++ b/packages/app-design-to-code/code-view-with-control.tsx @@ -12,6 +12,7 @@ import { } from "@core/constant/ek.constant"; import { repo_assets } from "@design-sdk/core"; import { assistant as analytics } from "@analytics.bridged.xyz/internal"; +import { CodeSessionCacheStorage } from "./code-session-cache-storage"; export function CodeViewWithControl({ targetid, @@ -20,6 +21,7 @@ export function CodeViewWithControl({ disabled, onGeneration, customMessages, + useCache = false, }: { targetid: string; editor?: "monaco" | "prism"; @@ -27,6 +29,7 @@ export function CodeViewWithControl({ onGeneration?: (app: string, src: string) => void; customMessages?: string[]; disabled?: true; + useCache?: boolean; }) { const [app, setApp] = useState(); const [source, setSource] = useState(); @@ -34,8 +37,16 @@ export function CodeViewWithControl({ all_preset_options_map__prod.flutter_default ); + const cacheStore = new CodeSessionCacheStorage(targetid, useroption); + /** register event listener for events from code thread. */ useEffect(() => { + const _cache = cacheStore.getCache(); + _cache && setSource(_cache); // for fpc + if (useCache && _cache) { + // if use cache & cache is present, do not register callback. + return; + } window.addEventListener("message", onMessage); return function cleaup() { window.removeEventListener("message", onMessage); @@ -44,6 +55,10 @@ export function CodeViewWithControl({ /** post to code thread about target framework change */ useEffect(() => { + if (useCache && cacheStore.getCache()) { + setSource(cacheStore.getCache()); + return; + } // 1. clear previous result. setSource(undefined); // 2. request new code gen. @@ -63,6 +78,7 @@ export function CodeViewWithControl({ }; const __onGeneration__cb = (app, src) => { + cacheStore.setCache(src); const _source = typeof src == "string" ? source : src?.raw; onGeneration?.(app, _source); }; diff --git a/packages/app-schema-editor/by-selection-state/selection-invalid.tsx b/packages/app-schema-editor/by-selection-state/selection-invalid.tsx index e70aca92..5e1feeb7 100644 --- a/packages/app-schema-editor/by-selection-state/selection-invalid.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-invalid.tsx @@ -27,6 +27,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { From 2686fac37a02bb06f3fadadd76ffdb2f68c6f137 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 10 Sep 2021 23:26:06 +0900 Subject: [PATCH 081/246] bump with design sdk - main component's deep layer selection error fixed. --- packages/design-sdk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/design-sdk b/packages/design-sdk index 551441c8..886922d7 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit 551441c8ea895fd75f206eb5a3a6a6b62a87fc76 +Subproject commit 886922d7bcf4400fe4a73a5bd13ef9b9029ecdd4 From da80b8217a25b51962d51aeb25fc5b611b58f1af Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Fri, 10 Sep 2021 23:48:43 +0900 Subject: [PATCH 082/246] add general session caching for non cached-only type --- .../code-view-with-control.tsx | 53 ++++++++++--------- .../by-selection-state/selection-invalid.tsx | 2 +- 2 files changed, 28 insertions(+), 27 deletions(-) diff --git a/packages/app-design-to-code/code-view-with-control.tsx b/packages/app-design-to-code/code-view-with-control.tsx index 180f46a3..13f3f286 100644 --- a/packages/app-design-to-code/code-view-with-control.tsx +++ b/packages/app-design-to-code/code-view-with-control.tsx @@ -21,7 +21,7 @@ export function CodeViewWithControl({ disabled, onGeneration, customMessages, - useCache = false, + cachedOnly = false, }: { targetid: string; editor?: "monaco" | "prism"; @@ -29,7 +29,7 @@ export function CodeViewWithControl({ onGeneration?: (app: string, src: string) => void; customMessages?: string[]; disabled?: true; - useCache?: boolean; + cachedOnly?: boolean; }) { const [app, setApp] = useState(); const [source, setSource] = useState(); @@ -39,35 +39,36 @@ export function CodeViewWithControl({ const cacheStore = new CodeSessionCacheStorage(targetid, useroption); - /** register event listener for events from code thread. */ - useEffect(() => { - const _cache = cacheStore.getCache(); - _cache && setSource(_cache); // for fpc - if (useCache && _cache) { - // if use cache & cache is present, do not register callback. - return; - } - window.addEventListener("message", onMessage); - return function cleaup() { - window.removeEventListener("message", onMessage); - }; - }, [useroption.language]); - /** post to code thread about target framework change */ useEffect(() => { - if (useCache && cacheStore.getCache()) { - setSource(cacheStore.getCache()); - return; + // 1. clear previous result & preload the cache. + const _cache = cacheStore.getCache(); + setSource(_cache ?? undefined); // for fpc + if (!cachedOnly || !_cache) { + // 2. request new code gen. + fromApp({ + type: "code-gen-request", + option: useroption, + }); } - // 1. clear previous result. - setSource(undefined); - // 2. request new code gen. - fromApp({ - type: "code-gen-request", - option: useroption, - }); }, [useroption.framework, targetid]); + /** register event listener for events from code thread. */ + useEffect( + () => { + if (cachedOnly && cacheStore.getCache()) { + // if use cache & cache is present, do not register callback. + return; + } + window.addEventListener("message", onMessage); + return function cleaup() { + window.removeEventListener("message", onMessage); + }; + }, + // having dependencies becuase event listener must be registered when there is no saved cache when using cached mode. + [useroption.framework, useroption.language, targetid] + ); + // tell parent about user option initial change useEffect(() => { onUserOptionsChange?.(useroption); diff --git a/packages/app-schema-editor/by-selection-state/selection-invalid.tsx b/packages/app-schema-editor/by-selection-state/selection-invalid.tsx index 5e1feeb7..be9d4e3b 100644 --- a/packages/app-schema-editor/by-selection-state/selection-invalid.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-invalid.tsx @@ -27,7 +27,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { From 2ae5341c70f7ebce51d62186277cd3503157fa94 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sat, 11 Sep 2021 00:07:07 +0900 Subject: [PATCH 083/246] update node conversion short lived memory cache --- figma-core/code-thread/selection.ts | 5 +-- figma-core/node-cache/index.ts | 50 ++++++++++++++++++++++++++--- 2 files changed, 48 insertions(+), 7 deletions(-) diff --git a/figma-core/code-thread/selection.ts b/figma-core/code-thread/selection.ts index 9f8df1c0..fc85aba1 100644 --- a/figma-core/code-thread/selection.ts +++ b/figma-core/code-thread/selection.ts @@ -57,8 +57,9 @@ export function onfigmaselectionchange() { // TODO: this will not trigger unless user deselects and re select the same node. currently node cache does not have expiry control. let rnode; - const _cached = FigmaNodeCache.getLastConverted(); + const _cached = FigmaNodeCache.getConverted(singleFigmaNodeSelection.id); if (_cached) { + console.info("using cached", _cached.name); rnode = _cached; } else { rnode = convert.intoReflectNode( @@ -78,7 +79,7 @@ export function onfigmaselectionchange() { }); } catch (_) { figma.notify(`Oops. we don't support "${target.type}" yet.`); - console.error(_) + console.error(_); } // endregion FigmaNodeCache.setConverted(rnode); diff --git a/figma-core/node-cache/index.ts b/figma-core/node-cache/index.ts index 55638731..e01125f4 100644 --- a/figma-core/node-cache/index.ts +++ b/figma-core/node-cache/index.ts @@ -1,6 +1,14 @@ import { SceneNode } from "@design-sdk/figma-types"; import { ReflectSceneNode } from "@design-sdk/core/nodes"; +const RUNTIME_RAPID_SHORT_LIVED_CACHE_TIMEOUT_MS = 5 * 1000; // after 5 seconds, we'll assume the node is not available +const RUNTIME_SHORT_LIVED_SAME_SELECTION_CACHE_TIMEOUT_MS = 2.5 * 1000; + +interface TimedCacheContainer { + updatedAt: number; + data: T; +} + /** Global runtime figma selection & conversion cache repository * @todo: add conversion cache */ @@ -12,9 +20,12 @@ export class FigmaNodeCache { return this._lastSelections; } - private static _lastConverted: ReflectSceneNode | null = null; + private static _conversions: { + [key: string]: TimedCacheContainer; + } = {}; + private static _lastConverted: TimedCacheContainer | null = null; static get lastConverted(): ReflectSceneNode | null { - return this._lastConverted; + return this._lastConverted.data; } static select(...ids: string[]) { @@ -22,7 +33,36 @@ export class FigmaNodeCache { } static setConverted(rnode: ReflectSceneNode) { - this._lastConverted = rnode; + const record = { + updatedAt: Date.now(), + data: rnode, + }; + this._conversions[rnode.id] = record; + this._lastConverted = record; + } + + static getConverted(id: string): ReflectSceneNode | null { + // when the selection is not changed, without looking up the timeout, return the last converted node. + if (id == this._lastConverted?.data?.id) { + if ( + this._lastConverted.updatedAt + + RUNTIME_SHORT_LIVED_SAME_SELECTION_CACHE_TIMEOUT_MS > + Date.now() + ) { + return this._lastConverted.data; + } + } + // + const conversion = this._conversions[id]; + if (conversion) { + if ( + conversion.updatedAt + RUNTIME_RAPID_SHORT_LIVED_CACHE_TIMEOUT_MS > + Date.now() + ) { + return conversion.data; + } + } + return null; } static get lastId(): string | null { @@ -39,8 +79,8 @@ export class FigmaNodeCache { } static getLastConverted(): ReflectSceneNode | null { - if (this.lastId == this._lastConverted?.id) { - return this._lastConverted; + if (this.lastId == this._lastConverted?.data?.id) { + return this._lastConverted.data; } return null; } From 4b8907368cb92703ce0720cdfcf48e37abd9f6c2 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sat, 11 Sep 2021 00:16:08 +0900 Subject: [PATCH 084/246] update deselection cache timeout reset --- figma-core/node-cache/index.ts | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/figma-core/node-cache/index.ts b/figma-core/node-cache/index.ts index e01125f4..7a751f3e 100644 --- a/figma-core/node-cache/index.ts +++ b/figma-core/node-cache/index.ts @@ -30,6 +30,14 @@ export class FigmaNodeCache { static select(...ids: string[]) { this._lastSelections = ids; + + /// when deselected, update last selected nodes' updated at. + if (ids.length === 0) { + this._lastConverted = { + ...this._lastConverted, + updatedAt: Date.now(), + }; + } } static setConverted(rnode: ReflectSceneNode) { From f2a62027ff87c7c0886b8d34bb6d0ad67530abcd Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sat, 11 Sep 2021 01:50:04 +0900 Subject: [PATCH 085/246] add visual store page manager --- figma-core/index.ts | 4 ++ figma-core/physical-visual-store/README.md | 5 +++ figma-core/physical-visual-store/index.ts | 1 + .../page-manager/craete-page-if-non-exist.ts | 34 ++++++++++++++ .../page-manager/create-readme.ts | 45 +++++++++++++++++++ .../page-manager/index.ts | 1 + .../used-emoji/README.md | 3 ++ .../physical-visual-store/used-emoji/index.ts | 1 + packages/plugin-sdk-service/index.ts | 4 +- 9 files changed, 97 insertions(+), 1 deletion(-) create mode 100644 figma-core/physical-visual-store/README.md create mode 100644 figma-core/physical-visual-store/index.ts create mode 100644 figma-core/physical-visual-store/page-manager/craete-page-if-non-exist.ts create mode 100644 figma-core/physical-visual-store/page-manager/create-readme.ts create mode 100644 figma-core/physical-visual-store/page-manager/index.ts create mode 100644 figma-core/physical-visual-store/used-emoji/README.md create mode 100644 figma-core/physical-visual-store/used-emoji/index.ts diff --git a/figma-core/index.ts b/figma-core/index.ts index 65751d47..d8fc0e60 100644 --- a/figma-core/index.ts +++ b/figma-core/index.ts @@ -41,10 +41,14 @@ figma.on("currentpagechange", () => { // MAIN INITIALIZATION import { showUI } from "./code-thread/show-ui"; import { provideFigma } from "@design-sdk/figma"; +import { createPrimaryVisualStorePageIfNonExists } from "./physical-visual-store/page-manager/craete-page-if-non-exist"; function main() { MainImageRepository.instance = new ImageRepositories(); provideFigma(figma); showUI(); + + // create primary visual store + createPrimaryVisualStorePageIfNonExists(); } main(); diff --git a/figma-core/physical-visual-store/README.md b/figma-core/physical-visual-store/README.md new file mode 100644 index 00000000..e8e2136e --- /dev/null +++ b/figma-core/physical-visual-store/README.md @@ -0,0 +1,5 @@ +# Physical visual store + +This is a package for creating a physical & visual data node inside figma. this is designed for sync data between accounts and devices. + +> Since figma's `setPluginData` nor `setSharedPluginData` does not sync the data between clients. diff --git a/figma-core/physical-visual-store/index.ts b/figma-core/physical-visual-store/index.ts new file mode 100644 index 00000000..9ee20be3 --- /dev/null +++ b/figma-core/physical-visual-store/index.ts @@ -0,0 +1 @@ +export * from "./page-manager"; diff --git a/figma-core/physical-visual-store/page-manager/craete-page-if-non-exist.ts b/figma-core/physical-visual-store/page-manager/craete-page-if-non-exist.ts new file mode 100644 index 00000000..038f5a14 --- /dev/null +++ b/figma-core/physical-visual-store/page-manager/craete-page-if-non-exist.ts @@ -0,0 +1,34 @@ +import { creaateReadme } from "./create-readme"; +import { converters, FigmaColorFormat } from "@design-sdk/figma"; + +/** + * the empty space is for hiding following text from figma's page hierarchy. + * user can change the icon, spacing, but not the token for regex validation. + */ +const PRIMARY_ASSISTANT_VISUAL_STORE_PAGE_NAME = + "📕 __storage__ (assistant.grida.co/primary)"; +const PRIMARY_ASSISTANT_VISUAL_STORE_PAGE_NAME_REGEX = /__storage__([\w ]+)\(assistant.grida.co\/primary\)/g; +export function createPrimaryVisualStorePageIfNonExists() { + const document = figma.currentPage.parent as DocumentNode; + const existing = document.findChild((x) => + RegExp(PRIMARY_ASSISTANT_VISUAL_STORE_PAGE_NAME_REGEX).test(x.name) + ); + if (existing) { + // + } else { + const page = figma.createPage(); + document.insertChild(document.children.length, page); // add to last + page.name = PRIMARY_ASSISTANT_VISUAL_STORE_PAGE_NAME; + page.backgrounds = [ + { + type: "SOLID", + color: converters.reflectColorToFigmaColor( + "#1E1E1E", + FigmaColorFormat.rgb + ), + }, + ]; + + creaateReadme({ at: page }); + } +} diff --git a/figma-core/physical-visual-store/page-manager/create-readme.ts b/figma-core/physical-visual-store/page-manager/create-readme.ts new file mode 100644 index 00000000..458dc3b8 --- /dev/null +++ b/figma-core/physical-visual-store/page-manager/create-readme.ts @@ -0,0 +1,45 @@ +import { renderText } from "../../reflect-render/text.render"; + +export async function creaateReadme({ + at, + afterMoving = false, +}: { + at: PageNode; + afterMoving?: boolean; +}): Promise { + if (afterMoving) { + figma.currentPage = at; + } + const readmeframe = figma.createFrame(); + at.insertChild(0, readmeframe); + readmeframe.name = "README"; + readmeframe.resize(1440, 900); + readmeframe.x = 0; + readmeframe.y = 0; + readmeframe.locked = true; + + // + readmeframe.insertChild(0, await createInitialReadmeText()); + // + return readmeframe; +} + +async function createInitialReadmeText() { + const font = { + family: "Helvetica Neue", + style: "Regular", + }; + await figma.loadFontAsync(font); + const readmeText = renderText({ + text: + "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque sapien felis, volutpat ut cursus nec, euismod vel dolor. Vestibulum et purus eget ligula tempus scelerisque eget ut mi. Curabitur quam augue, vulputate et mi imperdiet, scelerisque posuere ligula. Sed finibus, turpis ultrices mollis aliquet, ipsum lacus pulvinar sapien, sit amet fringilla ante augue sit amet leo. Curabitur dapibus finibus quam, sit amet rhoncus augue pharetra id. Sed eget laoreet ex. Integer convallis orci massa, ac convallis libero tempor ut.", + fontName: font, + fontSize: 14, + color: "#111111", + }); + readmeText.x = 24; + readmeText.y = 24; + readmeText.resize(1392, 100); + + return readmeText; +} diff --git a/figma-core/physical-visual-store/page-manager/index.ts b/figma-core/physical-visual-store/page-manager/index.ts new file mode 100644 index 00000000..e62ef4b4 --- /dev/null +++ b/figma-core/physical-visual-store/page-manager/index.ts @@ -0,0 +1 @@ +export { createPrimaryVisualStorePageIfNonExists as createPageIfNonExists } from "./craete-page-if-non-exist"; diff --git a/figma-core/physical-visual-store/used-emoji/README.md b/figma-core/physical-visual-store/used-emoji/README.md new file mode 100644 index 00000000..85c96db5 --- /dev/null +++ b/figma-core/physical-visual-store/used-emoji/README.md @@ -0,0 +1,3 @@ +# Emojis are only used inside a visual store document. + +> Grida is not fan of a emoji. (well we do love to use them in a document, but we try our best to avoid them in our products design.) diff --git a/figma-core/physical-visual-store/used-emoji/index.ts b/figma-core/physical-visual-store/used-emoji/index.ts new file mode 100644 index 00000000..8fe685dc --- /dev/null +++ b/figma-core/physical-visual-store/used-emoji/index.ts @@ -0,0 +1 @@ +const GEAR = "⚙"; // U+2699 diff --git a/packages/plugin-sdk-service/index.ts b/packages/plugin-sdk-service/index.ts index 76fe11da..117448bd 100644 --- a/packages/plugin-sdk-service/index.ts +++ b/packages/plugin-sdk-service/index.ts @@ -298,7 +298,9 @@ function handleMetaEvent(props: HanderProps) { // } } -function handleRemoteApiEvent(props: HanderProps) {} +function handleRemoteApiEvent(props: HanderProps) { + throw "not implemented"; +} function handleNotify(props: HanderProps) { if (props.key == PLUGIN_SDK_EK_SIMPLE_NOTIFY) { From 3c271844767be64cba5455dd5437632cae44273c Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sat, 11 Sep 2021 16:31:31 +0900 Subject: [PATCH 086/246] add more coli interface builder features with native formatting --- .../code-view-with-control.tsx | 32 ++++++++--- packages/app-design-to-code/formatter.ts | 17 ++++-- .../selection-instance-component.tsx | 4 +- .../selection-variant-instance.tsx | 4 +- .../selection-variant-master.tsx | 4 +- .../example-data-builder.ts | 53 +++++++++++++++++-- packages/design-to-code | 2 +- 7 files changed, 92 insertions(+), 24 deletions(-) diff --git a/packages/app-design-to-code/code-view-with-control.tsx b/packages/app-design-to-code/code-view-with-control.tsx index 13f3f286..0492d9fd 100644 --- a/packages/app-design-to-code/code-view-with-control.tsx +++ b/packages/app-design-to-code/code-view-with-control.tsx @@ -21,6 +21,7 @@ export function CodeViewWithControl({ disabled, onGeneration, customMessages, + automaticRemoteFormatting = false, cachedOnly = false, }: { targetid: string; @@ -28,6 +29,7 @@ export function CodeViewWithControl({ onUserOptionsChange?: (options: DesigntoCodeUserOptions) => void; onGeneration?: (app: string, src: string) => void; customMessages?: string[]; + automaticRemoteFormatting?: boolean; disabled?: true; cachedOnly?: boolean; }) { @@ -91,17 +93,31 @@ export function CodeViewWithControl({ app: string; code: SourceInput; }) => { - format(app, useroption.language, (s) => { - setApp(s); - __onGeneration__cb(s, source); - }); + format( + app, + useroption.language, + (s) => { + setApp(s); + __onGeneration__cb(s, source); + }, + { + disable_remote_format: !automaticRemoteFormatting, + } + ); // for SourceInput, we need type checking const _code = typeof code == "string" ? code : code.raw; - format(_code, useroption.language, (s) => { - setSource(s); - __onGeneration__cb(app, s); - }); + format( + _code, + useroption.language, + (s) => { + setSource(s); + __onGeneration__cb(app, s); + }, + { + disable_remote_format: !automaticRemoteFormatting, + } + ); }; const onMessage = (ev: MessageEvent) => { diff --git a/packages/app-design-to-code/formatter.ts b/packages/app-design-to-code/formatter.ts index 2eed6074..be0ed4db 100644 --- a/packages/app-design-to-code/formatter.ts +++ b/packages/app-design-to-code/formatter.ts @@ -51,8 +51,12 @@ export const formatter_by_lang = (lang: Language): Formatter => { export function format( code: string, lang: Language, - onFormat: (code: string) => void + onFormat: (code: string) => void, + options?: { + disable_remote_format?: boolean; + } ) { + const can_remote_format = !options?.disable_remote_format; // prevalidation if (typeof code != "string") { onFormat(code); // return as marked as format. @@ -66,16 +70,21 @@ export function format( const formatting = _formatter(code); if (formatting instanceof Promise) { onFormat(code); // fast response - formatting.then(onFormat); + if (can_remote_format) { + formatting.then(onFormat); + } } else { onFormat(formatting); } break; case "smart": const fastresult = (formatter as SmartFormatter).sync(code); - onFormat(fastresult); // fastresult - (formatter as SmartFormatter).async(code).then(onFormat); + onFormat(fastresult); + + if (can_remote_format) { + (formatter as SmartFormatter).async(code).then(onFormat); + } break; } } diff --git a/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx b/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx index 8981fac6..47d006a6 100644 --- a/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx @@ -6,7 +6,7 @@ import { NameCases, nameit } from "@coli.codes/naming"; import { FigmaNumber } from "@design-sdk/figma/features/variant"; import { MappedPropertyStorage } from "../storage"; import { CodeBox } from "@ui/codebox"; -import { buildeExampleData } from "../interface-code-builder"; +import { buildeExampleDataDeclaration } from "../interface-code-builder"; import this_interface_builder from "./selection-instance-component.coli"; import { reactNamer } from "../interface-code-builder/scoped-property-id-namer"; import { stringfy } from "coli"; @@ -55,7 +55,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { /> */} { + return new PropertyAssignment({ + name: new Identifier(nameit(k, { case: NameCases.camel }).name), + initializer: new StringLiteral(properties[k]), + }); + }), + }), + }); + + return stringfy(vari, { + language: "typescript", + }); } diff --git a/packages/design-to-code b/packages/design-to-code index aa605e74..3c79d55a 160000 --- a/packages/design-to-code +++ b/packages/design-to-code @@ -1 +1 @@ -Subproject commit aa605e74f4cd66971e85c4b1b71101669a235b09 +Subproject commit 3c79d55a2517b97e4e7a0ff53305dde93d22a18f From 2eef1659fd654c3336ca076d8a7c8873ef4b069f Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sat, 11 Sep 2021 17:10:11 +0900 Subject: [PATCH 087/246] add divider core component --- packages/ui-core/divider/divider.tsx | 15 +++++++++++++++ packages/ui-core/divider/index.ts | 1 + packages/ui-core/index.ts | 1 + 3 files changed, 17 insertions(+) create mode 100644 packages/ui-core/divider/divider.tsx create mode 100644 packages/ui-core/divider/index.ts diff --git a/packages/ui-core/divider/divider.tsx b/packages/ui-core/divider/divider.tsx new file mode 100644 index 00000000..d10fe6b3 --- /dev/null +++ b/packages/ui-core/divider/divider.tsx @@ -0,0 +1,15 @@ +import styled from "@emotion/styled"; +import React from "react"; +export function Divider({ + theme = "light", + color = "#bbb", +}: { + theme?: "dark" | "light"; + color?: string; +}) { + return ; +} + +const DividerStyled = styled.div` + border-top: 1px solid #bbb; +`; diff --git a/packages/ui-core/divider/index.ts b/packages/ui-core/divider/index.ts new file mode 100644 index 00000000..f1e13610 --- /dev/null +++ b/packages/ui-core/divider/index.ts @@ -0,0 +1 @@ +export { Divider } from "./divider"; diff --git a/packages/ui-core/index.ts b/packages/ui-core/index.ts index feeabc1e..b72e1aba 100644 --- a/packages/ui-core/index.ts +++ b/packages/ui-core/index.ts @@ -1,2 +1,3 @@ export { Row } from "./row"; export { Column } from "./column"; +export { Divider } from "./divider"; From 4a5f95c66938ef295a3c4da4d5393f4602bbf2da Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sat, 11 Sep 2021 17:10:29 +0900 Subject: [PATCH 088/246] move accessor type --- .../property-suggestions/index.ts | 11 +---------- .../types/single-layer-property-type.ts | 18 ++++++++++-------- 2 files changed, 11 insertions(+), 18 deletions(-) diff --git a/packages/app-schema-editor/property-suggestions/index.ts b/packages/app-schema-editor/property-suggestions/index.ts index a319dd3b..4f3c79d1 100644 --- a/packages/app-schema-editor/property-suggestions/index.ts +++ b/packages/app-schema-editor/property-suggestions/index.ts @@ -1,5 +1,6 @@ import type { IReflectNodeReference } from "@design-sdk/core/nodes/lignt"; import { ReflectSceneNodeType } from "@design-sdk/core/nodes"; +import { PropertyAccessors } from "../types/single-layer-property-type"; type ConfigurableLayerContext = /** @@ -29,16 +30,6 @@ const default_type_map: { [key in PropertyAccessors]: string } = { "vector.color": "string", }; -export type PropertyAccessors = - // text chars - | "text.text" - // single fill color - | "text.color" - // single fill image-like node image fill - | "image.src" - // single fill for vector (e.g. icon content vector) - | "vector.color"; - export interface NoSuggestionReason { type: "no-suggestions"; reason: string; diff --git a/packages/app-schema-editor/types/single-layer-property-type.ts b/packages/app-schema-editor/types/single-layer-property-type.ts index 9db2c9f7..cb161e63 100644 --- a/packages/app-schema-editor/types/single-layer-property-type.ts +++ b/packages/app-schema-editor/types/single-layer-property-type.ts @@ -16,7 +16,7 @@ export interface ISingleLayerPropertyMapping { * it can be mapped to text#characters or also text#fills[0]. * but only once at a time. */ - propertyType?: TargetPropertyType; + propertyType?: PropertyAccessors; }; schema: schema.IProperty; } @@ -28,10 +28,12 @@ type LocateMode = xpath: string; }; -type TargetPropertyType = TextNodeEditableProperty; - -type TextNodeEditableProperty = - | { key: "text" } - | { key: "text-style" } // with design tool's saved text style - // - | { key: "text-align" }; //? +export type PropertyAccessors = + // text chars + | "text.text" + // single fill color + | "text.color" + // single fill image-like node image fill + | "image.src" + // single fill for vector (e.g. icon content vector) + | "vector.color"; From 523b73aa662ba0bcbd83e6a6bc3c2348794d0427 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sat, 11 Sep 2021 17:10:49 +0900 Subject: [PATCH 089/246] fix style syntax error --- .../app-schema-editor/by-selection-state/selection-none.tsx | 3 --- 1 file changed, 3 deletions(-) diff --git a/packages/app-schema-editor/by-selection-state/selection-none.tsx b/packages/app-schema-editor/by-selection-state/selection-none.tsx index 4efc42c9..6f2ba70c 100644 --- a/packages/app-schema-editor/by-selection-state/selection-none.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-none.tsx @@ -89,8 +89,5 @@ const Wrapper = styled.div` `; const DisabledOverlay = styled.div` - /* TODO: add overlay color */ - /* color: #8c1d1d1d; */ margin-top: 25px; - } `; From b946e4d146cd813a30207dc16b167a0109e31fa4 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sat, 11 Sep 2021 17:11:04 +0900 Subject: [PATCH 090/246] rm material ui, replaced with native --- .../app-schema-editor/single-property.tsx | 47 +++++++------------ 1 file changed, 18 insertions(+), 29 deletions(-) diff --git a/packages/app-schema-editor/single-property.tsx b/packages/app-schema-editor/single-property.tsx index fc14d1b3..717b8240 100644 --- a/packages/app-schema-editor/single-property.tsx +++ b/packages/app-schema-editor/single-property.tsx @@ -1,13 +1,7 @@ -import { - Button, - Divider, - TextField, - Select, - MenuItem, -} from "@material-ui/core"; import React, { useState } from "react"; import { ISingleLayerProperty } from "./types"; import { UserSuggestionReason } from "./property-suggestions"; +import { Divider } from "@ui/core"; type UserInteractionMode = "editing" | "viewing"; @@ -17,9 +11,9 @@ const ModeToggleButton = (props: { onStartEdit: () => void; }) => { if (props.current == "viewing") { - return ; + return ; } - return ; + return ; }; interface ISingleLayerPropertyDefinitionProps { @@ -61,9 +55,9 @@ export function SingleLayerPropertyDefinition(
    - { setData({ @@ -74,12 +68,11 @@ export function SingleLayerPropertyDefinition( }, }); }} - helperText="name for this property" disabled={disableInputs} /> - { setData({ ...data, @@ -89,12 +82,10 @@ export function SingleLayerPropertyDefinition( }, }); }} - helperText="description for this property" disabled={disableInputs} /> - + {data?.layer?.propertyType && ( - { setData({ @@ -145,11 +138,7 @@ export function SingleLayerPropertyDefinition( onSave={handleSave} onStartEdit={handleStartEdit} /> - {props.onRemove && ( - - )} + {props.onRemove && }
    ); From 9bea38e5dcdbe9082b711b10fffa4b42602d85d5 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sat, 11 Sep 2021 17:11:31 +0900 Subject: [PATCH 091/246] update scoped react namer to follow & to be based on master component's id --- .../selection-configurable-layer.tsx | 2 +- .../selection-instance-component.tsx | 9 +++++++-- .../selection-master-component.tsx | 2 +- .../scoped-property-id-namer.ts | 13 +++++++++---- 4 files changed, 18 insertions(+), 8 deletions(-) diff --git a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx index b7032c53..65923ae3 100644 --- a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx @@ -97,7 +97,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { root: mainComponent, rootInterfaceName: mainComponent.name, // TODO: pass built name rootProperties: parentProperties, - propertyNamer: reactNamer, + propertyNamer: reactNamer(mainComponent.id), layerProperties: localProperties, layer: node, }), diff --git a/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx b/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx index 47d006a6..7ec4e91d 100644 --- a/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx @@ -30,12 +30,17 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { const interface_code_coli = this_interface_builder({ mainInterfaceName: interfaceName, properties: properties, - propertyNamer: reactNamer, + propertyNamer: reactNamer(master.id), }); const interface_code_string = stringfy(interface_code_coli, { language: "typescript", }); + const properties_as_data_map = properties.reduce(function (map, p) { + map[p.schema.name] = p.schema.type; + return map; + }, {}); + return ( @@ -58,7 +63,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { code={buildeExampleDataDeclaration({ name: "data", interfaceName: interfaceName, - properties: {}, + properties: properties_as_data_map, })} /> diff --git a/packages/app-schema-editor/by-selection-state/selection-master-component.tsx b/packages/app-schema-editor/by-selection-state/selection-master-component.tsx index 621f6a22..50ad391a 100644 --- a/packages/app-schema-editor/by-selection-state/selection-master-component.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-master-component.tsx @@ -31,7 +31,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { const interface_code_coli = this_interface_builder({ mainInterfaceName: interfaceName, properties: mappedProperties, - propertyNamer: reactNamer, + propertyNamer: reactNamer(node.id), }); const interface_code_string = stringfy(interface_code_coli, { language: "typescript", diff --git a/packages/app-schema-editor/interface-code-builder/scoped-property-id-namer.ts b/packages/app-schema-editor/interface-code-builder/scoped-property-id-namer.ts index 231037e5..fd3678c9 100644 --- a/packages/app-schema-editor/interface-code-builder/scoped-property-id-namer.ts +++ b/packages/app-schema-editor/interface-code-builder/scoped-property-id-namer.ts @@ -1,7 +1,12 @@ import { ScopedVariableNamer } from "@coli.codes/naming"; import { ReservedKeywordPlatformPresets } from "@coli.codes/naming/reserved"; -export const reactNamer = new ScopedVariableNamer( - "properties", - ReservedKeywordPlatformPresets.react -); +const _default_key_val = "property-key"; +export const reactNamer = (scope: string = _default_key_val) => + new ScopedVariableNamer( + _make_scope_name(scope), + ReservedKeywordPlatformPresets.react + ); + +const _make_scope_name = (scope: string) => + scope === _default_key_val ? _default_key_val : `property-key-of-${scope}`; From e766226d4f07483a21976aa26972517cfc31b700 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sat, 11 Sep 2021 18:16:29 +0900 Subject: [PATCH 092/246] add property suggestions to rect, ellipse and frame --- .../checksum/is-managed-node.ts | 28 +++++++ .../property-suggestions/index.ts | 78 ++++++++++++++++++- .../types/single-layer-property-type.ts | 14 +++- packages/design-sdk | 2 +- 4 files changed, 117 insertions(+), 5 deletions(-) create mode 100644 figma-core/physical-visual-store/checksum/is-managed-node.ts diff --git a/figma-core/physical-visual-store/checksum/is-managed-node.ts b/figma-core/physical-visual-store/checksum/is-managed-node.ts new file mode 100644 index 00000000..378f08f8 --- /dev/null +++ b/figma-core/physical-visual-store/checksum/is-managed-node.ts @@ -0,0 +1,28 @@ +/** + * to keep data container node's name clean, we add the checksum container under it as a text's content. + * @param node + * @returns + */ +export function isManagedNodeByAssistant(node: BaseNode) { + const jwt = checksum_container_name_inline_jwt(node.id); + const regex = checksum_container_regex(jwt); + if ("children" in node) { + const checksum = node.findChildren( + (c) => c.type === "TEXT" && RegExp(regex).test(c.characters) + ); + if (!checksum || checksum.length === 0) { + return false; + } + } else { + // node itself is a checksum container. this can only exist directly under page node. + return RegExp(regex).test(node.name); + } + return true; +} + +function checksum_container_name_inline_jwt(parent: string): string { + // build checksum based on parent's id. + return "--"; // TODO: +} + +const checksum_container_regex = (jwt) => `/${jwt}/g`; diff --git a/packages/app-schema-editor/property-suggestions/index.ts b/packages/app-schema-editor/property-suggestions/index.ts index 4f3c79d1..abaac5ac 100644 --- a/packages/app-schema-editor/property-suggestions/index.ts +++ b/packages/app-schema-editor/property-suggestions/index.ts @@ -1,6 +1,7 @@ import type { IReflectNodeReference } from "@design-sdk/core/nodes/lignt"; import { ReflectSceneNodeType } from "@design-sdk/core/nodes"; import { PropertyAccessors } from "../types/single-layer-property-type"; +import { IReflectNodeRootShapeReference } from "@design-sdk/core/nodes/types/reflect-node-reference"; type ConfigurableLayerContext = /** @@ -21,13 +22,25 @@ type ConfigurableLayerContext = */ | "shape-with-image"; -const global_properties = ["on click", "on double click", "enabled", "opacity"]; +const global_properties = [ + "event.click", + "event.double-click", + "enabled", + "opacity", +]; const default_type_map: { [key in PropertyAccessors]: string } = { "text.text": "string", "text.color": "string", + color: "string", "image.src": "string", "vector.color": "string", + // + "event.click": "callback", + "event.double-click": "callback", + enabled: "boolean", + opacity: "number", + any: "any", }; export interface NoSuggestionReason { @@ -54,7 +67,8 @@ export type UserSuggestionReason = export function get_suggestions( node: IReflectNodeReference ): UserSuggestionReason | UserSuggestionReason[] { - switch (node.origin) { + console.log("get suggestion for", node.type, node); + switch (node.type) { case ReflectSceneNodeType.group: return { type: "no-available-property", @@ -66,16 +80,23 @@ export function get_suggestions( case ReflectSceneNodeType.text: return get_text_property_suggestions(node); case ReflectSceneNodeType.frame: - return; + return get_frame_layer_property_suggestions(node); case ReflectSceneNodeType.line: return { type: "no-available-property", reason: "we do not support mapping data to line yet. use rect instead.", }; + case ReflectSceneNodeType.rectangle: + case ReflectSceneNodeType.ellipse: + return get_shape_layer_property_suggestions( + node as IReflectNodeRootShapeReference + ); case ReflectSceneNodeType.vector: return get_vector_property_suggestions(node); case ReflectSceneNodeType.image: // handle this when conversion is properly implemented + // Won't work. + return get_single_image_fill_layer_property_suggestions(node); case ReflectSceneNodeType.constraint: // handle this when conversion is properly implemented case ReflectSceneNodeType.unknown: throw "unknown node type"; @@ -87,6 +108,57 @@ export function get_suggestions( // } +function get_frame_layer_property_suggestions( + shape: IReflectNodeReference +): UserSuggestionReason[] { + return [ + { + type: "suggestion", + to: "event.click", + locate: "auto", + }, + { + type: "suggestion", + to: "enabled", + locate: "auto", + }, + ]; +} + +function get_shape_layer_property_suggestions( + shape: IReflectNodeRootShapeReference +): UserSuggestionReason[] { + console.log("shape", shape); + if (shape.fills?.length === 1) { + switch (shape.fills[0].type) { + case "IMAGE": + return get_single_image_fill_layer_property_suggestions(shape); + case "SOLID": + return [ + { + type: "suggestion", + to: "color", + locate: "auto", + }, + ]; + } + } + + return []; +} + +function get_single_image_fill_layer_property_suggestions( + image: IReflectNodeReference +): UserSuggestionReason[] { + return [ + { + type: "suggestion", + to: "image.src", + locate: "auto", + }, + ]; +} + function get_text_property_suggestions( text: IReflectNodeReference ): UserSuggestionReason[] { diff --git a/packages/app-schema-editor/types/single-layer-property-type.ts b/packages/app-schema-editor/types/single-layer-property-type.ts index cb161e63..1f13db00 100644 --- a/packages/app-schema-editor/types/single-layer-property-type.ts +++ b/packages/app-schema-editor/types/single-layer-property-type.ts @@ -36,4 +36,16 @@ export type PropertyAccessors = // single fill image-like node image fill | "image.src" // single fill for vector (e.g. icon content vector) - | "vector.color"; + | "vector.color" + // primary color when single color fill. + | "color" + + // + // region global properties + | "event.click" + | "event.double-click" + | "enabled" + | "opacity" + // region global properties + // + | "any"; diff --git a/packages/design-sdk b/packages/design-sdk index 886922d7..a5b04b14 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit 886922d7bcf4400fe4a73a5bd13ef9b9029ecdd4 +Subproject commit a5b04b14b9ebd0955666f36244c9f9c02767e136 From 8207d0124703927de6f0d75d775bbf87a4256daf Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sat, 11 Sep 2021 18:28:31 +0900 Subject: [PATCH 093/246] update namer --- .../selection-configurable-layer.tsx | 7 ++++-- .../selection-instance-component.tsx | 7 ++++-- .../selection-master-component.tsx | 7 ++++-- .../selection-variant-instance.tsx | 7 +++--- .../selection-variant-master.tsx | 1 - .../jsx-view-example-builder.ts | 24 ++++++++++++------- .../scoped-property-id-namer.ts | 6 +++++ packages/design-to-code | 2 +- packages/ui-code-box/codebox.tsx | 2 +- 9 files changed, 41 insertions(+), 22 deletions(-) diff --git a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx index 65923ae3..8082bc5a 100644 --- a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx @@ -17,7 +17,10 @@ import { import { stringfy } from "coli"; import this_interface_builder from "./selection-configurable-layer.coli"; import { ReservedKeywordPlatformPresets } from "@coli.codes/naming/reserved"; -import { reactNamer } from "../interface-code-builder/scoped-property-id-namer"; +import { + reactNamer, + tsNamer, +} from "../interface-code-builder/scoped-property-id-namer"; import { CodeStyleWrapper } from "./_shared-components"; export default function (props: { node: nodes.light.IReflectNodeReference }) { @@ -97,7 +100,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { root: mainComponent, rootInterfaceName: mainComponent.name, // TODO: pass built name rootProperties: parentProperties, - propertyNamer: reactNamer(mainComponent.id), + propertyNamer: tsNamer(mainComponent.id), layerProperties: localProperties, layer: node, }), diff --git a/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx b/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx index 7ec4e91d..20fb2624 100644 --- a/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx @@ -8,7 +8,10 @@ import { MappedPropertyStorage } from "../storage"; import { CodeBox } from "@ui/codebox"; import { buildeExampleDataDeclaration } from "../interface-code-builder"; import this_interface_builder from "./selection-instance-component.coli"; -import { reactNamer } from "../interface-code-builder/scoped-property-id-namer"; +import { + reactNamer, + tsNamer, +} from "../interface-code-builder/scoped-property-id-namer"; import { stringfy } from "coli"; import { CodeStyleWrapper } from "./_shared-components"; @@ -30,7 +33,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { const interface_code_coli = this_interface_builder({ mainInterfaceName: interfaceName, properties: properties, - propertyNamer: reactNamer(master.id), + propertyNamer: tsNamer(master.id), }); const interface_code_string = stringfy(interface_code_coli, { language: "typescript", diff --git a/packages/app-schema-editor/by-selection-state/selection-master-component.tsx b/packages/app-schema-editor/by-selection-state/selection-master-component.tsx index 50ad391a..1147b1cc 100644 --- a/packages/app-schema-editor/by-selection-state/selection-master-component.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-master-component.tsx @@ -8,7 +8,10 @@ import { FigmaNumber } from "@design-sdk/figma/features/variant"; import { MappedPropertyStorage } from "../storage"; import { CodeBox } from "@ui/codebox"; import this_interface_builder from "./selection-master-component.coli"; -import { reactNamer } from "../interface-code-builder/scoped-property-id-namer"; +import { + reactNamer, + tsNamer, +} from "../interface-code-builder/scoped-property-id-namer"; import { stringfy } from "coli"; import { CodeStyleWrapper } from "./_shared-components"; export default function (props: { node: nodes.light.IReflectNodeReference }) { @@ -31,7 +34,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { const interface_code_coli = this_interface_builder({ mainInterfaceName: interfaceName, properties: mappedProperties, - propertyNamer: reactNamer(node.id), + propertyNamer: tsNamer(node.id), }); const interface_code_string = stringfy(interface_code_coli, { language: "typescript", diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx index 47259759..b3854282 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx @@ -74,7 +74,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { {/* TODO: add copy - 1interface_raw_code1 */} { @@ -87,7 +87,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { /> ReservedKeywordPlatformPresets.react ); +export const tsNamer = (scope: string = _default_key_val) => + new ScopedVariableNamer( + _make_scope_name(scope), + ReservedKeywordPlatformPresets.typescript + ); + const _make_scope_name = (scope: string) => scope === _default_key_val ? _default_key_val : `property-key-of-${scope}`; diff --git a/packages/design-to-code b/packages/design-to-code index 3c79d55a..d5d47fab 160000 --- a/packages/design-to-code +++ b/packages/design-to-code @@ -1 +1 @@ -Subproject commit 3c79d55a2517b97e4e7a0ff53305dde93d22a18f +Subproject commit d5d47fab077306aebb319d78e8c8ff8521f2f6ef diff --git a/packages/ui-code-box/codebox.tsx b/packages/ui-code-box/codebox.tsx index 1f82e633..32b14329 100644 --- a/packages/ui-code-box/codebox.tsx +++ b/packages/ui-code-box/codebox.tsx @@ -12,7 +12,7 @@ export function CodeBox({ codeActions, disabled, }: { - language: "dart" | "jsx" | string; + language: "dart" | "jsx" | "tsx" | "ts" | "js" | string; editor?: "monaco" | "prism"; /** * true by default From 244449fb44c2018639215620b2c30111fa365fed Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sat, 11 Sep 2021 18:55:09 +0900 Subject: [PATCH 094/246] fix coli typo --- .../interface-code-builder/jsx-view-example-builder.ts | 4 ++-- packages/design-to-code | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/app-schema-editor/interface-code-builder/jsx-view-example-builder.ts b/packages/app-schema-editor/interface-code-builder/jsx-view-example-builder.ts index 97d4a77c..bdd62913 100644 --- a/packages/app-schema-editor/interface-code-builder/jsx-view-example-builder.ts +++ b/packages/app-schema-editor/interface-code-builder/jsx-view-example-builder.ts @@ -1,7 +1,7 @@ import { Identifier, JSX, - JSXAtrribute, + JSXAttribute, Snippet, StringLiteral, TypeReference, @@ -21,7 +21,7 @@ export function jsxViewExampleBuilder(p: { const keyname = nameit(k, { case: NameCases.camel, }).name; - return new JSXAtrribute(keyname, new StringLiteral(_v)); + return new JSXAttribute(keyname, new StringLiteral(_v)); }); const customTagBuilder = JSX.tag(p.viewTag, { diff --git a/packages/design-to-code b/packages/design-to-code index d5d47fab..c55968bd 160000 --- a/packages/design-to-code +++ b/packages/design-to-code @@ -1 +1 @@ -Subproject commit d5d47fab077306aebb319d78e8c8ff8521f2f6ef +Subproject commit c55968bd8ee51669d47dde3998b5f3d998a44a48 From de26c919aedce74b9685cd4f3999cca06f971676 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sat, 11 Sep 2021 20:28:22 +0900 Subject: [PATCH 095/246] bump coli & design to code --- packages/design-to-code | 2 +- web/next.config.js | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/design-to-code b/packages/design-to-code index c55968bd..56ff77f9 160000 --- a/packages/design-to-code +++ b/packages/design-to-code @@ -1 +1 @@ -Subproject commit c55968bd8ee51669d47dde3998b5f3d998a44a48 +Subproject commit 56ff77f9c74e55e61e765f7ee30fd115d73d0735 diff --git a/web/next.config.js b/web/next.config.js index 762509b9..6a441168 100644 --- a/web/next.config.js +++ b/web/next.config.js @@ -76,6 +76,7 @@ const withTM = require("next-transpile-modules")([ "coli", "@coli.codes/escape-string", "@coli.codes/web-builder", + "@coli.codes/core-syntax-kind", "@coli.codes/web-builder-core", "@coli.codes/nodejs-builder", "@coli.codes/react-builder", From 12d7ef0949b60eb092dc3c245978b60e957f4b10 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sat, 11 Sep 2021 20:32:34 +0900 Subject: [PATCH 096/246] fix ci build --- packages/design-sdk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/design-sdk b/packages/design-sdk index a5b04b14..20275878 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit a5b04b14b9ebd0955666f36244c9f9c02767e136 +Subproject commit 2027587846cc8ef70e5e23b4e9068ad08d815ef3 From b737d3bef72b14e0bf94969e47e4c5422b5b5f77 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sun, 12 Sep 2021 17:09:55 +0900 Subject: [PATCH 097/246] add property hover with mock data based on @code-ui/hover --- .../selection-configurable-layer.tsx | 93 +++++++---- .../selection-instance-component.tsx | 22 +-- .../selection-master-component.tsx | 26 +-- .../selection-variant-instance.tsx | 2 +- .../selection-variant-master.tsx | 2 +- .../property-field-lookup-hover-card.tsx | 38 +++++ .../props-interface-view.tsx | 0 .../components/single-property.tsx | 156 ++++++++++++++++++ packages/app-schema-editor/package.json | 4 +- .../app-schema-editor/single-property.tsx | 145 ---------------- yarn.lock | 156 +++++++++++++++++- 11 files changed, 416 insertions(+), 228 deletions(-) create mode 100644 packages/app-schema-editor/components/property-field-lookup-hover-card.tsx rename packages/app-schema-editor/{interface-code-builder => components}/props-interface-view.tsx (100%) create mode 100644 packages/app-schema-editor/components/single-property.tsx delete mode 100644 packages/app-schema-editor/single-property.tsx diff --git a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx index 8082bc5a..cf6cf3c6 100644 --- a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx @@ -1,34 +1,29 @@ import React, { useEffect, useState } from "react"; -import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "@core/constant"; -import { SingleLayerPropertyDefinition } from "../single-property"; +import { SingleLayerPropertyDefinition } from "../components/single-property"; import { ISingleLayerProperty, IProperties } from "../types"; import { nodes } from "@design-sdk/core"; import { _FigmaVariantPropertyCompatType_to_string } from "@design-sdk/figma/features/variant"; -import { nameit, NameCases, ScopedVariableNamer } from "@coli.codes/naming"; +import { nameit, NameCases } from "@coli.codes/naming"; import { CodeBox } from "@ui/codebox"; import { isMemberOfComponentLike } from "@design-sdk/figma/node-analysis/component-like-type-analysis/analyze"; import { get_suggestions } from "../property-suggestions"; import { MappedPropertyStorage } from "../storage"; -import { IReflectNodeReference } from "@design-sdk/core/nodes/lignt"; import { findWithRelativeIndexPath, getRelativeIndexPath, } from "@design-sdk/figma-xpath"; import { stringfy } from "coli"; import this_interface_builder from "./selection-configurable-layer.coli"; -import { ReservedKeywordPlatformPresets } from "@coli.codes/naming/reserved"; -import { - reactNamer, - tsNamer, -} from "../interface-code-builder/scoped-property-id-namer"; +import { tsNamer } from "../interface-code-builder/scoped-property-id-namer"; import { CodeStyleWrapper } from "./_shared-components"; +import { ISingleLayerPropertyMapping } from "../types/single-layer-property-type"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const { node } = props; const [localProperties, setLocalProperties] = useState([]); const [parentProperties, setParentProperties] = useState([]); - + const [editingProperties, setEditingProperties] = useState([]); const manifest = isMemberOfComponentLike(node); if (manifest) { // with this, you can show root parent's info @@ -64,7 +59,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { accessor: d.layer.propertyType, }) .then(() => { - refresh_list(); + refreshThisPropertiesList(); }); }; @@ -73,18 +68,48 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { const handleOnRemove = (at: number) => { storage.remove(localProperties[at].id); - refresh_list(); + refreshThisPropertiesList(); + }; + + const empty_placeholder: ISingleLayerPropertyMapping = { + schema: { + name: nameit(node.name, { case: NameCases.camel }).name, + type: "string", + }, + layer: { + id: main_component_sibling_layer.id, + propertyType: undefined, + location: "auto", + }, + }; + + const initiallyLoadThisPropertiesList = async () => { + const d = await refreshThisPropertiesList(); + if (d?.length === 0) { + setEditingProperties([empty_placeholder]); + } + }; + + const handle_add_new_field = () => { + setEditingProperties([...editingProperties, empty_placeholder]); + }; + + const handle_cancel_new_field = () => { + editingProperties.pop(); + setEditingProperties([...editingProperties]); }; - const refresh_list = () => { - storage.getPropertiesOf(main_component_sibling_layer.id).then((d) => { + const refreshThisPropertiesList = async () => { + const d = await storage.getPropertiesOf(main_component_sibling_layer.id); + if (d?.length > 0) { setLocalProperties(d); - }); + } + return d; }; useEffect(() => { // load list for the first time. - refresh_list(); + initiallyLoadThisPropertiesList(); storage .getPropertiesExcept(main_component_sibling_layer.id) .then(setParentProperties); @@ -110,12 +135,13 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { ); const _has_saved_data = localProperties.length > 0; + const _is_editing_data = editingProperties.length > 0; return (
    - {_has_saved_data ? ( + {_has_saved_data && ( <> {localProperties.map((d, i) => ( ))} - - ) : ( - // automatically preset a new property - )} + {_is_editing_data && ( // automatically preset a new property + <> + {editingProperties.map((d, i) => ( + + ))} + + )} +
    ); diff --git a/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx b/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx index 20fb2624..3c379445 100644 --- a/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx @@ -1,17 +1,12 @@ import React, { useEffect, useState } from "react"; import { nodes } from "@design-sdk/core"; import { ISingleLayerProperty } from "../types"; -import { PropsInterfaceView } from "../interface-code-builder/props-interface-view"; import { NameCases, nameit } from "@coli.codes/naming"; -import { FigmaNumber } from "@design-sdk/figma/features/variant"; import { MappedPropertyStorage } from "../storage"; import { CodeBox } from "@ui/codebox"; import { buildeExampleDataDeclaration } from "../interface-code-builder"; import this_interface_builder from "./selection-instance-component.coli"; -import { - reactNamer, - tsNamer, -} from "../interface-code-builder/scoped-property-id-namer"; +import { tsNamer } from "../interface-code-builder/scoped-property-id-namer"; import { stringfy } from "coli"; import { CodeStyleWrapper } from "./_shared-components"; @@ -47,20 +42,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { return ( - {/* {}} - properties={ - properties?.map((i) => { - return { - key: i.schema.name, - type: FigmaNumber, // FIXME: change this to - i.schema.type - nullable: false, // TODO: - }; - }) ?? [] - } - initialInterfaceName={interfaceName} - onChange={() => {}} - /> */} + - {/* {}} - properties={ - properties?.map((i) => { - return { - key: i.schema.name, - type: FigmaNumber, // FIXME: change this to - i.schema.type - nullable: false, // TODO: - }; - }) ?? [] - } - initialInterfaceName={interfaceName} - onChange={() => {}} - /> */} ); } diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx index b3854282..ee58a365 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx @@ -13,7 +13,7 @@ import { jsxViewExampleBuilder, } from "../interface-code-builder"; import { nameit, NameCases } from "@coli.codes/naming"; -import { PropsInterfaceView } from "../interface-code-builder/props-interface-view"; +import { PropsInterfaceView } from "../components/props-interface-view"; import styled from "@emotion/styled"; import { MappedPropertyStorage } from "../storage"; import { ISingleLayerProperty } from "../types"; diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx index bd5ec274..200af090 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx @@ -12,7 +12,7 @@ import { jsxViewExampleBuilder, } from "../interface-code-builder"; import { nameit, NameCases } from "@coli.codes/naming"; -import { PropsInterfaceView } from "../interface-code-builder/props-interface-view"; +import { PropsInterfaceView } from "../components/props-interface-view"; import { ISingleLayerProperty } from "../types"; import { MappedPropertyStorage } from "../storage"; import { CodeStyleWrapper } from "./_shared-components"; diff --git a/packages/app-schema-editor/components/property-field-lookup-hover-card.tsx b/packages/app-schema-editor/components/property-field-lookup-hover-card.tsx new file mode 100644 index 00000000..a050969f --- /dev/null +++ b/packages/app-schema-editor/components/property-field-lookup-hover-card.tsx @@ -0,0 +1,38 @@ +import React from "react"; +import styled from "@emotion/styled"; +import { HoverView } from "@code-ui/hover"; + +export function PropertyFieldDocuemntationHoverCard() { + return ( + + + + frame/inner-wrap/cover
    + fills[0].src
    +
    + current: https://unsplash.com/331SS42.png +     + , + ]} + >     + ); + // +} + +const Wrapper = styled.div` + display: flex; + padding: 8px; +`; + +const Image = styled.div` + width: 80px; + height: 80px; + background-color: wheat; + margin-right: 6px; +`; + +const Contents = styled.div` + color: #fff; +`; diff --git a/packages/app-schema-editor/interface-code-builder/props-interface-view.tsx b/packages/app-schema-editor/components/props-interface-view.tsx similarity index 100% rename from packages/app-schema-editor/interface-code-builder/props-interface-view.tsx rename to packages/app-schema-editor/components/props-interface-view.tsx diff --git a/packages/app-schema-editor/components/single-property.tsx b/packages/app-schema-editor/components/single-property.tsx new file mode 100644 index 00000000..12e2b6fc --- /dev/null +++ b/packages/app-schema-editor/components/single-property.tsx @@ -0,0 +1,156 @@ +import React, { useState } from "react"; +import { ISingleLayerProperty } from "../types"; +import { UserSuggestionReason } from "../property-suggestions"; +import { Divider } from "@ui/core"; +import * as HoverCard from "@radix-ui/react-hover-card"; +import { PropertyFieldDocuemntationHoverCard } from "./property-field-lookup-hover-card"; + +type UserInteractionMode = "editing" | "viewing"; + +const ModeToggleButton = (props: { + current: UserInteractionMode; + onSave: () => void; + onStartEdit: () => void; +}) => { + if (props.current == "viewing") { + return ; + } + return ; +}; + +interface ISingleLayerPropertyDefinitionProps { + initial?: ISingleLayerProperty; + initialMode?: UserInteractionMode; + onSave: (data: ISingleLayerProperty) => void; + /** + * when remove this whole preference. if not provided, remove button won't be present. + */ + onRemove?: () => void; + onCancel?: () => void; + suggestions: UserSuggestionReason[]; +} + +export function SingleLayerPropertyDefinition( + props: ISingleLayerPropertyDefinitionProps +) { + const [data, setData] = useState(props.initial); + + // if no initial data provided, start with editing mode + const _initialMode: UserInteractionMode = + props.initialMode ?? (props.initial ? "viewing" : "editing"); + + // mode state of the user interaction + const [mode, setMode] = useState(_initialMode); + + const handleSave = () => { + props.onSave(data); + setMode("viewing"); + }; + + const handleStartEdit = () => { + setMode("editing"); + }; + + const disableInputs = mode == "viewing"; + + return ( + + +
    + +
    + { + setData({ + ...data, + schema: { + ...data.schema, + name: e.target.value, + }, + }); + }} + disabled={disableInputs} + /> + { + setData({ + ...data, + schema: { + ...data.schema, + description: e.target.value, + }, + }); + }} + disabled={disableInputs} + /> + + + + {data?.layer?.propertyType && ( + { + setData({ + ...data, + schema: { + ...data.schema, + type: e.target.value, + }, + }); + }} + disabled={disableInputs} + /> + )} + + + {props.onRemove && } + {props.onCancel && } + +
    +     + + + + +     + ); +} diff --git a/packages/app-schema-editor/package.json b/packages/app-schema-editor/package.json index 5f9ba331..4b131bbc 100644 --- a/packages/app-schema-editor/package.json +++ b/packages/app-schema-editor/package.json @@ -5,6 +5,8 @@ "version": "0.0.0", "private": false, "dependencies": { - "@code-ui/interface": "^0.0.5" + "@code-ui/hover": "^0.0.2", + "@code-ui/interface": "^0.0.5", + "@radix-ui/react-hover-card": "^0.1.0" } } diff --git a/packages/app-schema-editor/single-property.tsx b/packages/app-schema-editor/single-property.tsx deleted file mode 100644 index 717b8240..00000000 --- a/packages/app-schema-editor/single-property.tsx +++ /dev/null @@ -1,145 +0,0 @@ -import React, { useState } from "react"; -import { ISingleLayerProperty } from "./types"; -import { UserSuggestionReason } from "./property-suggestions"; -import { Divider } from "@ui/core"; - -type UserInteractionMode = "editing" | "viewing"; - -const ModeToggleButton = (props: { - current: UserInteractionMode; - onSave: () => void; - onStartEdit: () => void; -}) => { - if (props.current == "viewing") { - return ; - } - return ; -}; - -interface ISingleLayerPropertyDefinitionProps { - initial?: ISingleLayerProperty; - initialMode?: UserInteractionMode; - onSave: (data: ISingleLayerProperty) => void; - /** - * when remove this whole preference. if not provided, remove button won't be present. - */ - onRemove?: () => void; - - suggestions: UserSuggestionReason[]; -} - -export function SingleLayerPropertyDefinition( - props: ISingleLayerPropertyDefinitionProps -) { - const [data, setData] = useState(props.initial); - - // if no initial data provided, start with editing mode - const _initialMode: UserInteractionMode = - props.initialMode ?? (props.initial ? "viewing" : "editing"); - - // mode state of the user interaction - const [mode, setMode] = useState(_initialMode); - - const handleSave = () => { - props.onSave(data); - setMode("viewing"); - }; - - const handleStartEdit = () => { - setMode("editing"); - }; - - const disableInputs = mode == "viewing"; - - return ( -
    - -
    - { - setData({ - ...data, - schema: { - ...data.schema, - name: e.target.value, - }, - }); - }} - disabled={disableInputs} - /> - { - setData({ - ...data, - schema: { - ...data.schema, - description: e.target.value, - }, - }); - }} - disabled={disableInputs} - /> - - - - {data?.layer?.propertyType && ( - { - setData({ - ...data, - schema: { - ...data.schema, - type: e.target.value, - }, - }); - }} - disabled={disableInputs} - /> - )} - - - {props.onRemove && } - -
    - ); -} diff --git a/yarn.lock b/yarn.lock index eb74910b..76a6e610 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1609,6 +1609,11 @@ dependencies: "@code-ui/core" "^0.0.2" +"@code-ui/hover@^0.0.2": + version "0.0.2" + resolved "https://registry.yarnpkg.com/@code-ui/hover/-/hover-0.0.2.tgz#0e66637417b02b79e3caa2debfeda8f486705375" + integrity sha512-czTCGSPloamoxG5uz+MDNsigbtjdbAuK0rjIZKxb0XXl3CmUu/lbFvlRDl87pAqI5us6OLqDdYVUzfzC4oqBcw== + "@code-ui/interface@^0.0.5": version "0.0.5" resolved "https://registry.yarnpkg.com/@code-ui/interface/-/interface-0.0.5.tgz#0b967f91cf648b7c8e1f60891e95031f28783fcc" @@ -2670,6 +2675,150 @@ resolved "https://registry.yarnpkg.com/@protobufjs/utf8/-/utf8-1.1.0.tgz#a777360b5b39a1a2e5106f8e858f2fd2d060c570" integrity sha1-p3c2C1s5oaLlEG+OhY8v0tBgxXA= +"@radix-ui/popper@0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/popper/-/popper-0.1.0.tgz#c387a38f31b7799e1ea0d2bb1ca0c91c2931b063" + integrity sha512-uzYeElL3w7SeNMuQpXiFlBhTT+JyaNMCwDfjKkrzugEcYrf5n52PHqncNdQPUtR42hJh8V9FsqyEDbDxkeNjJQ== + dependencies: + "@babel/runtime" "^7.13.10" + csstype "^3.0.4" + +"@radix-ui/primitive@0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/primitive/-/primitive-0.1.0.tgz#6206b97d379994f0d1929809db035733b337e543" + integrity sha512-tqxZKybwN5Fa3VzZry4G6mXAAb9aAqKmPtnVbZpL0vsBwvOHTBwsjHVPXylocYLwEtBY9SCe665bYnNB515uoA== + dependencies: + "@babel/runtime" "^7.13.10" + +"@radix-ui/react-arrow@0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-arrow/-/react-arrow-0.1.0.tgz#9491f7244c574c0a7a281de8bf8c55b85438948d" + integrity sha512-BfrFYTOEVjG7lukoXcveEVgNl6+hvKdMlxXQhQrkZxNYBq6TuJ2VRWfcWzCPJNbVv09g2NXoh2cBGWCLMVH1nQ== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-primitive" "0.1.0" + +"@radix-ui/react-compose-refs@0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-0.1.0.tgz#cff6e780a0f73778b976acff2c2a5b6551caab95" + integrity sha512-eyclbh+b77k+69Dk72q3694OHrn9B3QsoIRx7ywX341U9RK1ThgQjMFZoPtmZNQTksXHLNEiefR8hGVeFyInGg== + dependencies: + "@babel/runtime" "^7.13.10" + +"@radix-ui/react-context@0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-0.1.0.tgz#670a7a2a63f8380a7cb5ff0bce87d51bdb065c5c" + integrity sha512-o8h7SP6ePEBLC33BsHiuFqW898c+wiyBiY2ZC2xFJUUnHj1Z6XrQdZCNjm3/VuhljMkPrIA5xC4swVWBo/gzOA== + dependencies: + "@babel/runtime" "^7.13.10" + +"@radix-ui/react-hover-card@^0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-hover-card/-/react-hover-card-0.1.0.tgz#e65f1e7cf7ef4313494bc7c8574af4afa9753934" + integrity sha512-pIyPBukxKl+rydDBTXmfkC50Gzux4KgtpuYetUx8cVTb5kLF6djysMREujU4vlX3PgwBD34ZoqfeIAXzBMArUg== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/primitive" "0.1.0" + "@radix-ui/react-context" "0.1.0" + "@radix-ui/react-popper" "0.1.0" + "@radix-ui/react-portal" "0.1.0" + "@radix-ui/react-presence" "0.1.0" + "@radix-ui/react-primitive" "0.1.0" + "@radix-ui/react-use-controllable-state" "0.1.0" + +"@radix-ui/react-popper@0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-popper/-/react-popper-0.1.0.tgz#5b41c806870c51562ca7dbfc137bdfe8c8eeb761" + integrity sha512-WfNSqAA5caPv7zJD+LPMoIBiNW7rsbyzt903NFYpd0cHDweprYdAWTAtXvjjY2wb193UVTGkJUAWwYz3f0ku7A== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/popper" "0.1.0" + "@radix-ui/react-arrow" "0.1.0" + "@radix-ui/react-compose-refs" "0.1.0" + "@radix-ui/react-context" "0.1.0" + "@radix-ui/react-primitive" "0.1.0" + "@radix-ui/react-use-rect" "0.1.0" + "@radix-ui/react-use-size" "0.1.0" + "@radix-ui/rect" "0.1.0" + +"@radix-ui/react-portal@0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-portal/-/react-portal-0.1.0.tgz#5f72fa2f9837df9a5e27ca9ff7a63393ff8e1f0b" + integrity sha512-HiSDaQVlhoZWvp5Wy0JPPojqo31Z3efs890oyYkpKgRDWDdMYHzEWYZxC7pB60a6c6yM5JzjJc0bP7o6bye+/Q== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-primitive" "0.1.0" + "@radix-ui/react-use-layout-effect" "0.1.0" + +"@radix-ui/react-presence@0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-presence/-/react-presence-0.1.0.tgz#e7931009cbaa383f17be7d9863da9f0424efae7b" + integrity sha512-MIj5dywsSB1mWi7f9EqsxNoR5hfIScquYANbMdRmzxqNQzq2UrO8GEhOMXPo99YssdfpK9d0Pc9nLNwsFyq5Eg== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-compose-refs" "0.1.0" + "@radix-ui/react-use-layout-effect" "0.1.0" + +"@radix-ui/react-primitive@0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-0.1.0.tgz#4e6fb04ede36845cf3a061311a4f879c2051c1c5" + integrity sha512-ydO24k5Cvry5RCMfm5OJNnIwvxSIUuUZ3Kf6bu1GaSsDfBKiv5JeuQkipURW28KlX7I85Jr/I02JlE+Ec4HmWA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-slot" "0.1.0" + +"@radix-ui/react-slot@0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-0.1.0.tgz#56965f2af80576f9e3fcdbba839ef7fccbd3b577" + integrity sha512-ZuvAUhSK9EAE42b3+K7k7w4nF1uF+Wd4bFj2OCE1aSiW3tgiu7ZU+J61m2+RIDps0WLu95PUx6eZrnpfqBXFRg== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-compose-refs" "0.1.0" + +"@radix-ui/react-use-callback-ref@0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-0.1.0.tgz#934b6e123330f5b3a6b116460e6662cbc663493f" + integrity sha512-Va041McOFFl+aV+sejvl0BS2aeHx86ND9X/rVFmEFQKTXCp6xgUK0NGUAGcgBlIjnJSbMYPGEk1xKSSlVcN2Aw== + dependencies: + "@babel/runtime" "^7.13.10" + +"@radix-ui/react-use-controllable-state@0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-controllable-state/-/react-use-controllable-state-0.1.0.tgz#4fced164acfc69a4e34fb9d193afdab973a55de1" + integrity sha512-zv7CX/PgsRl46a52Tl45TwqwVJdmqnlQEQhaYMz/yBOD2sx2gCkCFSoF/z9mpnYWmS6DTLNTg5lIps3fV6EnXg== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/react-use-callback-ref" "0.1.0" + +"@radix-ui/react-use-layout-effect@0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-0.1.0.tgz#ebf71bd6d2825de8f1fbb984abf2293823f0f223" + integrity sha512-+wdeS51Y+E1q1Wmd+1xSSbesZkpVj4jsg0BojCbopWvgq5iBvixw5vgemscdh58ep98BwUbsFYnrywFhV9yrVg== + dependencies: + "@babel/runtime" "^7.13.10" + +"@radix-ui/react-use-rect@0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-rect/-/react-use-rect-0.1.0.tgz#074defa995c104e66319817c0b57ddbe3a22d53e" + integrity sha512-BTj9vMz336G3ukxCOb3QLC1oEOtGrWKPTdEG0pFEw75jyg360rLsfuydYemOtGFPVamXL9Pxo9JCwMcxLWdUlA== + dependencies: + "@babel/runtime" "^7.13.10" + "@radix-ui/rect" "0.1.0" + +"@radix-ui/react-use-size@0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-size/-/react-use-size-0.1.0.tgz#dc49295d646f5d3f570943dbb88bd94fc7db7daf" + integrity sha512-TcZAsR+BYI46w/RbaSFCRACl+Jh6mDqhu6GS2r0iuJpIVrj8atff7qtTjmMmfGtEDNEjhl7DxN3pr1nTS/oruQ== + dependencies: + "@babel/runtime" "^7.13.10" + +"@radix-ui/rect@0.1.0": + version "0.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/rect/-/rect-0.1.0.tgz#6e4becf9f0161bae08a40a8a13185e6bcac9b185" + integrity sha512-YcQuy5hUDnS8CkmIKJA6lE8wQpMqv8KN3SoO3dtOg7FQmZo1lgF1yAtrp5STJYxs1n7UChW3eEhrKXl/LmbHJQ== + dependencies: + "@babel/runtime" "^7.13.10" + "@reach/router@^1.3.4": version "1.3.4" resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.3.4.tgz#d2574b19370a70c80480ed91f3da840136d10f8c" @@ -5995,7 +6144,7 @@ csstype@^2.5.2, csstype@^2.5.7: resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.17.tgz#4cf30eb87e1d1a005d8b6510f95292413f6a1c0e" integrity sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A== -csstype@^3.0.2, csstype@^3.0.8: +csstype@^3.0.2, csstype@^3.0.4, csstype@^3.0.8: version "3.0.8" resolved "https://registry.yarnpkg.com/csstype/-/csstype-3.0.8.tgz#d2266a792729fb227cd216fb572f43728e1ad340" integrity sha512-jXKhWqXPmlUeoQnF/EhTtTl4C9SnrxSH/jZUih3jmO6lBKr99rP3/+FmrMj4EFpOXzMtXHAZkd3x0E6h6Fgflw== @@ -13087,6 +13236,11 @@ typescript@^4.0.5, typescript@^4.1.2, typescript@^4.2.3, typescript@^4.2.4, type resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.2.tgz#6d618640d430e3569a1dfb44f7d7e600ced3ee86" integrity sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ== +typescript@^4.4.3: + version "4.4.3" + resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.3.tgz#bdc5407caa2b109efd4f82fe130656f977a29324" + integrity sha512-4xfscpisVgqqDfPaJo5vkd+Qd/ItkoagnHpufr+i2QCHBsNYp+G7UAoyFl8aPtx879u38wPV65rZ8qbGZijalA== + uglify-js@3.4.x: version "3.4.10" resolved "https://registry.yarnpkg.com/uglify-js/-/uglify-js-3.4.10.tgz#9ad9563d8eb3acdfb8d38597d2af1d815f6a755f" From 9d16f486ae581f492dca988960cf6fbc3dfb37c5 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sun, 12 Sep 2021 17:16:16 +0900 Subject: [PATCH 098/246] bump with fixed design to code pkg --- packages/design-to-code | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/design-to-code b/packages/design-to-code index 56ff77f9..9ae1b9e2 160000 --- a/packages/design-to-code +++ b/packages/design-to-code @@ -1 +1 @@ -Subproject commit 56ff77f9c74e55e61e765f7ee30fd115d73d0735 +Subproject commit 9ae1b9e20afb1493669043022dfb901fd01b7faf From b57e7f1151411d0f49cae88e3dab3d5f75c44e61 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sun, 12 Sep 2021 17:19:30 +0900 Subject: [PATCH 099/246] bump dtc --- packages/design-to-code | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/design-to-code b/packages/design-to-code index 9ae1b9e2..c8f02ad2 160000 --- a/packages/design-to-code +++ b/packages/design-to-code @@ -1 +1 @@ -Subproject commit 9ae1b9e20afb1493669043022dfb901fd01b7faf +Subproject commit c8f02ad2e002883c9a8da9bf73b53a034ff1b2f8 From 4a717d37e784fb6670edbe80ee56bbf8317aca48 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sun, 12 Sep 2021 18:13:24 +0900 Subject: [PATCH 100/246] update preview component & plugin sdk to get the targeet node's preview --- app/lib/components/storybook-screen.tsx | 6 +- .../broadcast-selection-preview.ts | 36 +++++----- .../property-field-lookup-hover-card.tsx | 13 +++- .../components/single-property.tsx | 10 +-- packages/core-constant/ek.constant.ts | 3 +- .../export-image/export-image.requests.ts | 8 ++- .../export-image/export-image.responses.ts | 7 +- .../export-image/export-image.types.ts | 48 ++++++++++++++ packages/plugin-sdk-service/index.ts | 3 +- packages/ui-previewer/preview.tsx | 65 +++++++++++++++---- 10 files changed, 153 insertions(+), 46 deletions(-) diff --git a/app/lib/components/storybook-screen.tsx b/app/lib/components/storybook-screen.tsx index 247d06b6..b4465b4c 100644 --- a/app/lib/components/storybook-screen.tsx +++ b/app/lib/components/storybook-screen.tsx @@ -22,11 +22,7 @@ export class BoxTab extends React.Component { componentDidMount() { window.addEventListener("message", function (ev: MessageEvent) { const msg = ev.data.pluginMessage; - switch ( - msg.type - // case EK_GENERATED_CODE_PLAIN: - // case EK_PREVIEW_SOURCE: - ) { + switch (msg.type) { } }); } diff --git a/figma-core/code-thread/broadcast-selection-preview.ts b/figma-core/code-thread/broadcast-selection-preview.ts index e1923c1a..7cf27811 100644 --- a/figma-core/code-thread/broadcast-selection-preview.ts +++ b/figma-core/code-thread/broadcast-selection-preview.ts @@ -1,4 +1,5 @@ -import { EK_PREVIEW_SOURCE } from "@core/constant/ek.constant"; +import { EK_CURRENT_SELECTION_PREVIEW_SOURCE_CHANGED } from "@core/constant/ek.constant"; +import { preset, QuickImageExportPreset } from "@plugin-sdk/core"; /** * extracts the png image of selection, broadcasts to listeners. @@ -6,22 +7,23 @@ import { EK_PREVIEW_SOURCE } from "@core/constant/ek.constant"; * @param selection */ export function broadcastSelectionPreview(selection: SceneNode) { - selection - .exportAsync({ - format: "PNG", - contentsOnly: true, - constraint: { - type: "HEIGHT", - value: 250, + exportImage(selection).then((d) => { + figma.ui.postMessage({ + type: EK_CURRENT_SELECTION_PREVIEW_SOURCE_CHANGED, + data: { + source: d, + name: selection.name, }, - }) - .then((d) => { - figma.ui.postMessage({ - type: EK_PREVIEW_SOURCE, - data: { - source: d, - name: selection.name, - }, - }); }); + }); +} + +export async function exportImage( + target: SceneNode, + options?: { + preset?: QuickImageExportPreset; + } +): Promise { + const config = preset(options?.preset ?? "small"); + return await target.exportAsync(config); } diff --git a/packages/app-schema-editor/components/property-field-lookup-hover-card.tsx b/packages/app-schema-editor/components/property-field-lookup-hover-card.tsx index a050969f..749c3f0a 100644 --- a/packages/app-schema-editor/components/property-field-lookup-hover-card.tsx +++ b/packages/app-schema-editor/components/property-field-lookup-hover-card.tsx @@ -1,14 +1,21 @@ import React from "react"; import styled from "@emotion/styled"; import { HoverView } from "@code-ui/hover"; +import { Preview } from "@ui/previewer"; -export function PropertyFieldDocuemntationHoverCard() { +export function PropertyFieldDocuemntationHoverCard(props: { + layer: string; + hierarchy?: string[]; +}) { return ( - + + + + {props.layer} frame/inner-wrap/cover
    fills[0].src

    @@ -26,7 +33,7 @@ const Wrapper = styled.div` padding: 8px; `; -const Image = styled.div` +const PreviewWrap = styled.div` width: 80px; height: 80px; background-color: wheat; diff --git a/packages/app-schema-editor/components/single-property.tsx b/packages/app-schema-editor/components/single-property.tsx index 12e2b6fc..ac46867f 100644 --- a/packages/app-schema-editor/components/single-property.tsx +++ b/packages/app-schema-editor/components/single-property.tsx @@ -147,10 +147,12 @@ export function SingleLayerPropertyDefinition(
    - - - - + {mode == "viewing" && ( + + + + + )} ); } diff --git a/packages/core-constant/ek.constant.ts b/packages/core-constant/ek.constant.ts index b7220016..cabc5538 100644 --- a/packages/core-constant/ek.constant.ts +++ b/packages/core-constant/ek.constant.ts @@ -4,7 +4,8 @@ export const EK_GENERATED_CODE_PLAIN = "EK_GENERATED_CODE_PLAIN"; export const EK_IMAGE_ASSET_REPOSITORY_MAP = "EK_IMAGE_ASSET_REPOSITORY_MAP"; export const EK_VANILLA_TRANSPORT = "EK_VANILLA_TRANSPORT"; -export const EK_PREVIEW_SOURCE = "EK_PREVIEW_SOURCE"; +export const EK_CURRENT_SELECTION_PREVIEW_SOURCE_CHANGED = + "EK_CURRENT_SELECTION_PREVIEW_SOURCE_CHANGED"; // icon related export const EK_ICON_DRAG_AND_DROPPED = "assistant/design/icons/add/dropped"; export const EK_CREATE_ICON = "assistant/design/icons/add/create"; diff --git a/packages/plugin-sdk-core/interfaces/export-image/export-image.requests.ts b/packages/plugin-sdk-core/interfaces/export-image/export-image.requests.ts index 767e1c07..2e8cda43 100644 --- a/packages/plugin-sdk-core/interfaces/export-image/export-image.requests.ts +++ b/packages/plugin-sdk-core/interfaces/export-image/export-image.requests.ts @@ -1,6 +1,10 @@ -import { ImageExportOptions } from "./export-image.types"; +import { + ImageExportOptions, + QuickImageExportPreset, + _ImageExportOption_to_FigmaCompat, +} from "./export-image.types"; export interface ImageExportRequest { id: string; - opt: ImageExportOptions; + opt: ImageExportOptions | QuickImageExportPreset; } diff --git a/packages/plugin-sdk-core/interfaces/export-image/export-image.responses.ts b/packages/plugin-sdk-core/interfaces/export-image/export-image.responses.ts index c6a9fe37..fd9700ff 100644 --- a/packages/plugin-sdk-core/interfaces/export-image/export-image.responses.ts +++ b/packages/plugin-sdk-core/interfaces/export-image/export-image.responses.ts @@ -1,7 +1,10 @@ -import { ImageExportOptions } from "./export-image.types"; +import { + ImageExportOptions, + QuickImageExportPreset, +} from "./export-image.types"; export interface ImageExportResponse { id: string; data: Uint8Array; - opt: ImageExportOptions; + opt: ImageExportOptions | QuickImageExportPreset; } diff --git a/packages/plugin-sdk-core/interfaces/export-image/export-image.types.ts b/packages/plugin-sdk-core/interfaces/export-image/export-image.types.ts index 266e6443..629ab341 100644 --- a/packages/plugin-sdk-core/interfaces/export-image/export-image.types.ts +++ b/packages/plugin-sdk-core/interfaces/export-image/export-image.types.ts @@ -46,3 +46,51 @@ interface _FigmaExportSettingsConstraints { readonly type: "SCALE" | "WIDTH" | "HEIGHT"; readonly value: number; } + +export type QuickImageExportPreset = "mini" | "small" | "original" | "@2x"; +export function makeExportSetting( + p: ImageExportOptions | QuickImageExportPreset +): ExportSettings { + if (typeof p === "string") { + return preset(p); + } else { + return _ImageExportOption_to_FigmaCompat(p); + } +} + +export function preset(p: QuickImageExportPreset): ExportSettings { + switch (p) { + case "mini": + return { + format: "PNG", + contentsOnly: true, + constraint: { + type: "HEIGHT", + value: 124, + }, + }; + case "small": + return { + format: "PNG", + contentsOnly: true, + constraint: { + type: "HEIGHT", + value: 248, + }, + }; + case "original": + return { + format: "PNG", + contentsOnly: true, + }; + case "@2x": + return { + format: "PNG", + contentsOnly: true, + constraint: { + type: "SCALE", + value: 2, + }, + }; + } +} diff --git a/packages/plugin-sdk-service/index.ts b/packages/plugin-sdk-service/index.ts index 117448bd..b8104396 100644 --- a/packages/plugin-sdk-service/index.ts +++ b/packages/plugin-sdk-service/index.ts @@ -40,6 +40,7 @@ import { TargetPlatform, target_platform, MetaRequest, + makeExportSetting, } from "@plugin-sdk/core"; import { @@ -371,7 +372,7 @@ async function handleExportEvent(event: HanderProps) { const r = await (figma.getNodeById( event.data.id ) as SceneNode).exportAsync({ - ..._ImageExportOption_to_FigmaCompat(event.data.opt), + ...makeExportSetting(event.data.opt), }); return response(event.id, { diff --git a/packages/ui-previewer/preview.tsx b/packages/ui-previewer/preview.tsx index 265d388b..aea2a3b9 100644 --- a/packages/ui-previewer/preview.tsx +++ b/packages/ui-previewer/preview.tsx @@ -1,28 +1,63 @@ import { Typography, CircularProgress, Fade } from "@material-ui/core"; import React, { useState, useEffect } from "react"; -import { EK_PREVIEW_SOURCE } from "@core/constant/ek.constant"; +import { EK_CURRENT_SELECTION_PREVIEW_SOURCE_CHANGED } from "@core/constant/ek.constant"; import EmptyIndicatorIcon from "@assistant/icons/empty-indicator-icon"; import "./preview.css"; +import { PluginSdk } from "@plugin-sdk/app"; +import { QuickImageExportPreset } from "@plugin-sdk/core"; interface Props { auto?: boolean; data?: Uint8Array; + empty?: JSX.Element; name?: string; + /** + * the background color + * @deprecated not implemented + */ + background?: string; type?: string; + /** + * show image of. + */ + of?: string; + fetchingConfig?: QuickImageExportPreset; } export function Preview(props: Props) { const [data, setData] = useState(props.data); const [name, setName] = useState(props.name); + const preview_selection_change_broadcast_event_listener = ( + ev: MessageEvent + ) => { + const msg = ev.data.pluginMessage; + if (msg && msg.type == EK_CURRENT_SELECTION_PREVIEW_SOURCE_CHANGED) { + setName(msg.data.name); + setData(msg.data.source); + } + }; + useEffect(() => { if (props.auto) { - window.addEventListener("message", (ev: MessageEvent) => { - const msg = ev.data.pluginMessage; - if (msg && msg.type == EK_PREVIEW_SOURCE) { - setName(msg.data.name); - setData(msg.data.source); - } + window.addEventListener( + "message", + preview_selection_change_broadcast_event_listener + ); + return () => { + window.removeEventListener( + "message", + preview_selection_change_broadcast_event_listener + ); + }; + } + + if (props.of) { + PluginSdk.getNodeImage({ + id: props.of, + opt: props.fetchingConfig ?? "small", + }).then((data) => { + setData(data.data); }); } }, []); @@ -46,10 +81,18 @@ export function Preview(props: Props) { ) : (
    - - - Nothing is selected - + {props.auto && ( + <> + {props.empty || ( + <> + + + Nothing is selected + + + )} + + )}
    ); From 64501c7437e9d6df3633b068841968153976f1ca Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sun, 12 Sep 2021 18:35:50 +0900 Subject: [PATCH 101/246] add temp fields viewer to all selection type --- .../selection-instance-component.tsx | 13 +++++++++++++ .../selection-master-component.tsx | 13 +++++++++++++ .../selection-variant-instance.tsx | 14 +++++++++++++- .../selection-variant-master.tsx | 16 ++++++++++++++-- 4 files changed, 53 insertions(+), 3 deletions(-) diff --git a/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx b/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx index 3c379445..6a4c532f 100644 --- a/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx @@ -9,6 +9,7 @@ import this_interface_builder from "./selection-instance-component.coli"; import { tsNamer } from "../interface-code-builder/scoped-property-id-namer"; import { stringfy } from "coli"; import { CodeStyleWrapper } from "./_shared-components"; +import { SingleLayerPropertyDefinition } from "../components/single-property"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const [properties, setProperties] = useState([]); @@ -51,6 +52,18 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { properties: properties_as_data_map, })} /> + + {properties.map((d, i) => ( + { + // handleOnRemove(i); + }} + key={d?.schema.name} + onSave={() => {}} + initial={d} + suggestions={[]} + /> + ))} ); } diff --git a/packages/app-schema-editor/by-selection-state/selection-master-component.tsx b/packages/app-schema-editor/by-selection-state/selection-master-component.tsx index 4260bae0..cdac2f7d 100644 --- a/packages/app-schema-editor/by-selection-state/selection-master-component.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-master-component.tsx @@ -8,6 +8,7 @@ import this_interface_builder from "./selection-master-component.coli"; import { tsNamer } from "../interface-code-builder/scoped-property-id-namer"; import { stringfy } from "coli"; import { CodeStyleWrapper } from "./_shared-components"; +import { SingleLayerPropertyDefinition } from "../components/single-property"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const { node } = props; const [mappedProperties, setMappedProperties] = useState< @@ -37,6 +38,18 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { return ( + + {mappedProperties.map((d, i) => ( + { + // handleOnRemove(i); + }} + key={d?.schema.name} + onSave={() => {}} + initial={d} + suggestions={[]} + /> + ))} ); } diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx index ee58a365..14befceb 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx @@ -17,6 +17,7 @@ import { PropsInterfaceView } from "../components/props-interface-view"; import styled from "@emotion/styled"; import { MappedPropertyStorage } from "../storage"; import { ISingleLayerProperty } from "../types"; +import { SingleLayerPropertyDefinition } from "../components/single-property"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const _format_interface_pascal = (n) => { @@ -77,7 +78,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { language="ts" code={buildInterfaceString({ name: interfaceName, - properties: parser.properties.map((d) => { + properties: merged_properties.map((d) => { return { name: d.key, type: d.type, @@ -103,6 +104,17 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { properties: data_of_properties, })} /> + {mappedProperties?.map((d, i) => ( + { + // handleOnRemove(i); + }} + key={d?.schema.name} + onSave={() => {}} + initial={d} + suggestions={[]} + /> + ))} ); diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx index 200af090..29fbbe85 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx @@ -12,10 +12,10 @@ import { jsxViewExampleBuilder, } from "../interface-code-builder"; import { nameit, NameCases } from "@coli.codes/naming"; -import { PropsInterfaceView } from "../components/props-interface-view"; import { ISingleLayerProperty } from "../types"; import { MappedPropertyStorage } from "../storage"; import { CodeStyleWrapper } from "./_shared-components"; +import { SingleLayerPropertyDefinition } from "../components/single-property"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const master = props.node; @@ -55,7 +55,7 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { language="jsx" code={buildInterfaceString({ name: interfaceName, - properties: parser.properties.map((d) => { + properties: merged_properties.map((d) => { return { name: d.key, type: d.type, @@ -80,6 +80,18 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { properties: data_of_properties, })} /> + + {mappedProperties?.map((d, i) => ( + { + // handleOnRemove(i); + }} + key={d?.schema.name} + onSave={() => {}} + initial={d} + suggestions={[]} + /> + ))} ); } From b7fdbaa45046d8f1565a512a09fe46324ce928ac Mon Sep 17 00:00:00 2001 From: You-j Date: Sun, 12 Sep 2021 19:42:15 +0900 Subject: [PATCH 102/246] fix hover-view content style --- .../property-field-lookup-hover-card.tsx | 26 +++++++++++++++++-- 1 file changed, 24 insertions(+), 2 deletions(-) diff --git a/packages/app-schema-editor/components/property-field-lookup-hover-card.tsx b/packages/app-schema-editor/components/property-field-lookup-hover-card.tsx index 749c3f0a..77fec682 100644 --- a/packages/app-schema-editor/components/property-field-lookup-hover-card.tsx +++ b/packages/app-schema-editor/components/property-field-lookup-hover-card.tsx @@ -16,10 +16,14 @@ export function PropertyFieldDocuemntationHoverCard(props: { {props.layer} - frame/inner-wrap/cover
    +
    + frame/inner-wrap/cover
    +
    fills[0].src

    - current: https://unsplash.com/331SS42.png +
    + current:
    + https://unsplash.com/331SS42.png     , ]} @@ -36,10 +40,28 @@ const Wrapper = styled.div` const PreviewWrap = styled.div` width: 80px; height: 80px; + display: inline-block; background-color: wheat; margin-right: 6px; + + img { + height: calc(100% - 16px) !important; + } `; const Contents = styled.div` color: #fff; + font-weight: normal; + font-size: 12px; + line-height: 90%; + /* or 11px */ + + letter-spacing: -0.015em; + + color: #ffffff; +`; + +const GrayContent = styled.b` + color: #646464; + font-weight: normal; `; From 816be025fad9ba44e7b081c2ff8f1fddd85d8b7b Mon Sep 17 00:00:00 2001 From: You-j Date: Sun, 12 Sep 2021 21:13:35 +0900 Subject: [PATCH 103/246] fix preview style to temp --- .../components/property-field-lookup-hover-card.tsx | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/packages/app-schema-editor/components/property-field-lookup-hover-card.tsx b/packages/app-schema-editor/components/property-field-lookup-hover-card.tsx index 77fec682..8393b5c0 100644 --- a/packages/app-schema-editor/components/property-field-lookup-hover-card.tsx +++ b/packages/app-schema-editor/components/property-field-lookup-hover-card.tsx @@ -44,8 +44,15 @@ const PreviewWrap = styled.div` background-color: wheat; margin-right: 6px; + // TEMP!! WILL BE CHANGE + + div { + height: fit-content !important; + } + img { - height: calc(100% - 16px) !important; + // PreviewWrap's height - Wrapper padding 8*2 - preview padding 16 + height: calc(64px - 16px) !important; } `; From 004055f4c44244c01b272aa3749acbf9e005977b Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 13 Sep 2021 17:05:27 +0900 Subject: [PATCH 104/246] fix ci build with updated coli --- packages/design-to-code | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/design-to-code b/packages/design-to-code index c8f02ad2..88f622f1 160000 --- a/packages/design-to-code +++ b/packages/design-to-code @@ -1 +1 @@ -Subproject commit c8f02ad2e002883c9a8da9bf73b53a034ff1b2f8 +Subproject commit 88f622f155ab4817f0ef73598600f186fcca623f From 28c49f0cd42256b87758a19b9410b18eba8d0403 Mon Sep 17 00:00:00 2001 From: You-j Date: Tue, 14 Sep 2021 14:00:52 +0900 Subject: [PATCH 105/246] Change single propert to using code-ui package --- .../components/single-property.tsx | 108 +++++++++++++----- packages/app-schema-editor/package.json | 1 + yarn.lock | 13 ++- 3 files changed, 91 insertions(+), 31 deletions(-) diff --git a/packages/app-schema-editor/components/single-property.tsx b/packages/app-schema-editor/components/single-property.tsx index ac46867f..c824dcfe 100644 --- a/packages/app-schema-editor/components/single-property.tsx +++ b/packages/app-schema-editor/components/single-property.tsx @@ -4,6 +4,8 @@ import { UserSuggestionReason } from "../property-suggestions"; import { Divider } from "@ui/core"; import * as HoverCard from "@radix-ui/react-hover-card"; import { PropertyFieldDocuemntationHoverCard } from "./property-field-lookup-hover-card"; +import { BasedToken, Colon, Input } from "@code-ui/token"; +import styled from "@emotion/styled"; type UserInteractionMode = "editing" | "viewing"; @@ -53,42 +55,85 @@ export function SingleLayerPropertyDefinition( const disableInputs = mode == "viewing"; + const suggestionItems = props.suggestions.map( + (item: UserSuggestionReason) => { + if (item.type === "suggestion") { + return { + id: item.to, + label: item.to, + }; + } + } + ); + return (
    - { - setData({ - ...data, - schema: { - ...data.schema, - name: e.target.value, - }, - }); - }} - disabled={disableInputs} - /> - { - setData({ - ...data, - schema: { - ...data.schema, - description: e.target.value, - }, - }); - }} - disabled={disableInputs} - /> + + { + console.log("onClicked"); + }} + onDoubleClick={() => { + console.log("onDoubleClick"); + }} + onHover={(isOver) => console.log(isOver)} + hoverOverlayColor={"rgba(157, 178, 255, 0.25)"} + cornerRadius={2} + contentPadding={[0, 2]} + contentColor="#9CDCFE" + content={ + { + setData({ + ...data, + schema: { + ...data.schema, + name: e.target.value, + }, + }); + }} + /> + } + /> + + { + console.log("onClicked"); + }} + onDoubleClick={() => { + console.log("onDoubleClick"); + }} + onHover={(isOver) => console.log(isOver)} + hoverOverlayColor={"rgba(157, 178, 255, 0.25)"} + cornerRadius={2} + contentPadding={[0, 2]} + contentColor="#9CDCFE" + content={ + { + setData({ + ...data, + schema: { + ...data.schema, + description: e.target.value, + }, + }); + }} + disabled={disableInputs} + /> + } + /> + { - setData({ - ...data, - schema: { - ...data.schema, - description: e.target.value, - }, - }); - }} - disabled={disableInputs} - /> +
    + +
    + { + setData({ + ...data, + schema: { + ...data.schema, + description: e.target.value, + }, + }); + }} + disabled={disableInputs} + /> +
    +     +
    } /> + {data?.layer?.propertyType && ( - { - setData({ - ...data, - schema: { - ...data.schema, - type: e.target.value, - }, - }); - }} - disabled={disableInputs} - /> + <> + { + console.log("onClicked"); + }} + onDoubleClick={() => { + console.log("onDoubleClick"); + }} + onHover={(isOver) => console.log(isOver)} + hoverOverlayColor={"rgba(157, 178, 255, 0.25)"} + cornerRadius={2} + contentPadding={[0, 2]} + contentColor="#9CDCFE" + content={ + { + setData({ + ...data, + schema: { + ...data.schema, + type: e.target.value, + }, + }); + }} + disabled={disableInputs} + /> + } + /> + )} Date: Tue, 14 Sep 2021 17:07:04 +0900 Subject: [PATCH 107/246] update package --- packages/app-schema-editor/package.json | 4 ++-- yarn.lock | 16 ++++++++-------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/packages/app-schema-editor/package.json b/packages/app-schema-editor/package.json index 0ce825a0..6f390c8a 100644 --- a/packages/app-schema-editor/package.json +++ b/packages/app-schema-editor/package.json @@ -5,10 +5,10 @@ "version": "0.0.0", "private": false, "dependencies": { - "@code-ui/completion-provider": "^0.0.3", + "@code-ui/completion-provider": "^0.0.4", "@code-ui/hover": "^0.0.2", "@code-ui/interface": "^0.0.5", - "@code-ui/token": "^0.0.4", + "@code-ui/token": "^0.0.5", "@radix-ui/react-hover-card": "^0.1.0", "@tippyjs/react": "^4.2.5" } diff --git a/yarn.lock b/yarn.lock index 31e67de9..003dd7a5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1584,10 +1584,10 @@ resolved "https://registry.yarnpkg.com/@code-ui/color-scheme/-/color-scheme-0.0.2.tgz#aa3e805068591cad4f2f7f476d89fba037cb4d85" integrity sha512-Z7YHcEj/2+6oBEQITlxC3qJyRbhilsr0xyeKUJ4SBdY+MTVWmMKN5P/zvVO7DUQ/Lqi9E6bKSk9VOvvfFwvKdQ== -"@code-ui/completion-provider@^0.0.3": - version "0.0.3" - resolved "https://registry.yarnpkg.com/@code-ui/completion-provider/-/completion-provider-0.0.3.tgz#43243cf6403c18cad7b848e5520487bbfba297b6" - integrity sha512-EkVXD9b1Jugz+uWTjJ31UyzGecs5DhJnbpz8URb5bhIfqOmYjaPF3P9hkDr0PUqfg/Mc4StxFfyDgZQz+7zhXg== +"@code-ui/completion-provider@^0.0.4": + version "0.0.4" + resolved "https://registry.yarnpkg.com/@code-ui/completion-provider/-/completion-provider-0.0.4.tgz#56958b13e8b6ea1a166ae51342f9aac1a43e25ff" + integrity sha512-pOLugIPGEoBYsMQXFOKZm9svd3Wll/2csTtA+goNGJFW9WUFym+w47XoYSeiEBwS8sthFP+HRs3w/WZh40GseA== dependencies: "@code-ui/hover" "0.0.2" "@tippyjs/react" "^4.2.5" @@ -1646,10 +1646,10 @@ dependencies: "@tippyjs/react" "^4.2.5" -"@code-ui/token@^0.0.4": - version "0.0.4" - resolved "https://registry.yarnpkg.com/@code-ui/token/-/token-0.0.4.tgz#e20f711935b3814a0af9fcf6497aa99cdf40e793" - integrity sha512-1CoDXpYjcquctBs8IlPHMB4w3SXojKpbnjgyDPzIBz01/4KNbLLsrVb8rglykpGhOcGQ3Q4CEKpXSXFrs656Tg== +"@code-ui/token@^0.0.5": + version "0.0.5" + resolved "https://registry.yarnpkg.com/@code-ui/token/-/token-0.0.5.tgz#fd877f3df72feee5e9b70a0974fb8516e23a00e2" + integrity sha512-czaNgr4+nQreaYH38UOYXNOrK0ItD6sXEDziRb4Uv9tHmewIIiP6yLdn7t0hMh8rZP1hPI9CCaO/gDLZURwUoA== dependencies: "@code-ui/color-scheme" "0.0.2" "@code-ui/hover" "0.0.2" From efab340eb162fa8d574f281846f8ac397c2d6552 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 14 Sep 2021 18:23:49 +0900 Subject: [PATCH 108/246] ci fix - explicit import figma type --- .../interfaces/export-image/export-image.types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/plugin-sdk-core/interfaces/export-image/export-image.types.ts b/packages/plugin-sdk-core/interfaces/export-image/export-image.types.ts index 629ab341..ca01edaa 100644 --- a/packages/plugin-sdk-core/interfaces/export-image/export-image.types.ts +++ b/packages/plugin-sdk-core/interfaces/export-image/export-image.types.ts @@ -1,3 +1,4 @@ +import type { ExportSettings } from "@design-sdk/figma-types"; export interface ImageExportOptions { format: "png" | "jpeg" | "webp" | "pdf" | "svg"; contentsOnly: boolean; From 18a0f224ae4ad0bfbca047799fbeab22276a4ac4 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 14 Sep 2021 19:00:20 +0900 Subject: [PATCH 109/246] update button style --- packages/ui-core/button-style/index.ts | 12 +++++------- 1 file changed, 5 insertions(+), 7 deletions(-) diff --git a/packages/ui-core/button-style/index.ts b/packages/ui-core/button-style/index.ts index a67b4987..8bd1c591 100644 --- a/packages/ui-core/button-style/index.ts +++ b/packages/ui-core/button-style/index.ts @@ -1,20 +1,18 @@ import { css } from "@emotion/react"; export const ButtonStyle = css` - width: calc(50% - 5px); + /* width: calc(50% - 5px); */ /* for unused .MuiButton-root margin: 0 */ /* margin-left: 5px !important; */ - font-size: 14px; + height: 48px; + font-size: 16px; font-weight: bold; border-radius: 4px; box-sizing: border-box; - padding-top: 16px; - padding-bottom: 16px; + padding-top: 14px; + padding-bottom: 14px; cursor: pointer; outline: none; - - // FIXME: CHEKC IS RIGHT capitalize? - text-transform: capitalize; `; export const BlackButtonStyle = css` From b19c0313dd2a36545f4c898c5fff82514aad89f8 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 14 Sep 2021 19:13:13 +0900 Subject: [PATCH 110/246] init app preference --- packages/app-preferences/index.ts | 0 packages/app-preferences/package.json | 6 ++++++ packages/app-preferences/prefer-language/index.ts | 0 packages/app-preferences/prefer-platform/index.ts | 5 +++++ 4 files changed, 11 insertions(+) create mode 100644 packages/app-preferences/index.ts create mode 100644 packages/app-preferences/package.json create mode 100644 packages/app-preferences/prefer-language/index.ts create mode 100644 packages/app-preferences/prefer-platform/index.ts diff --git a/packages/app-preferences/index.ts b/packages/app-preferences/index.ts new file mode 100644 index 00000000..e69de29b diff --git a/packages/app-preferences/package.json b/packages/app-preferences/package.json new file mode 100644 index 00000000..ab4dada0 --- /dev/null +++ b/packages/app-preferences/package.json @@ -0,0 +1,6 @@ +{ + "name": "@app/preferences", + "version": "0.0.0", + "private": false, + "author": "Grida.co" +} \ No newline at end of file diff --git a/packages/app-preferences/prefer-language/index.ts b/packages/app-preferences/prefer-language/index.ts new file mode 100644 index 00000000..e69de29b diff --git a/packages/app-preferences/prefer-platform/index.ts b/packages/app-preferences/prefer-platform/index.ts new file mode 100644 index 00000000..0f00ff06 --- /dev/null +++ b/packages/app-preferences/prefer-platform/index.ts @@ -0,0 +1,5 @@ +export class PreferPlatform { + constructor() {} + get() {} + set() {} +} From 2662f9519ba09eba604fc010545272211f157bf5 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Tue, 14 Sep 2021 19:34:36 +0900 Subject: [PATCH 111/246] add prefered framework preferences; --- figma-core/node-cache/index.ts | 2 +- packages/app-design-to-code/__plugin/index.ts | 5 +- .../code-options-control.tsx | 1 - .../code-view-with-control.tsx | 11 +- .../footer-action/code-screen-footer.tsx | 2 +- .../app-design-to-code/framework-option.ts | 15 +- packages/app-preferences/index.ts | 2 + .../app-preferences/prefer-framework/index.ts | 16 + .../app-preferences/prefer-language/index.ts | 1 + .../app-preferences/prefer-platform/index.ts | 5 - web/next.config.js | 2 + yarn.lock | 595 ++++++++++++++++++ 12 files changed, 639 insertions(+), 18 deletions(-) create mode 100644 packages/app-preferences/prefer-framework/index.ts delete mode 100644 packages/app-preferences/prefer-platform/index.ts diff --git a/figma-core/node-cache/index.ts b/figma-core/node-cache/index.ts index 7a751f3e..8268b386 100644 --- a/figma-core/node-cache/index.ts +++ b/figma-core/node-cache/index.ts @@ -87,7 +87,7 @@ export class FigmaNodeCache { } static getLastConverted(): ReflectSceneNode | null { - if (this.lastId == this._lastConverted?.data?.id) { + if (this.lastId && this.lastId == this._lastConverted?.data?.id) { return this._lastConverted.data; } return null; diff --git a/packages/app-design-to-code/__plugin/index.ts b/packages/app-design-to-code/__plugin/index.ts index fbcef43b..67250162 100644 --- a/packages/app-design-to-code/__plugin/index.ts +++ b/packages/app-design-to-code/__plugin/index.ts @@ -10,7 +10,7 @@ import { } from "./events"; import { designToFlutter, designToReact } from "./design-to-code"; import { FigmaNodeCache } from "figma-core/node-cache"; -import { Framework } from "../framework-option"; +import { Framework } from "@grida/builder-platform-types"; import { repo_assets } from "@design-sdk/core"; onService(main_cb); @@ -43,8 +43,7 @@ async function _handle_code_gen_request(req: CodeGenRequest) { const hostingjob = async () => { // host images - const transportableImageAssetRepository = - await repo_assets.MainImageRepository.instance.current.makeTransportable(); + const transportableImageAssetRepository = await repo_assets.MainImageRepository.instance.current.makeTransportable(); figma.ui.postMessage({ type: EK_IMAGE_ASSET_REPOSITORY_MAP, data: transportableImageAssetRepository, diff --git a/packages/app-design-to-code/code-options-control.tsx b/packages/app-design-to-code/code-options-control.tsx index 83ada892..645894d4 100644 --- a/packages/app-design-to-code/code-options-control.tsx +++ b/packages/app-design-to-code/code-options-control.tsx @@ -2,7 +2,6 @@ import React, { useEffect, useState } from "react"; import { IField, LanguageType, Option } from "@code-ui/docstring/dist/lib/type"; import { Docstring as DocstringView } from "@code-ui/docstring"; import { - Framework, FrameworkOption, getpreset, Language, diff --git a/packages/app-design-to-code/code-view-with-control.tsx b/packages/app-design-to-code/code-view-with-control.tsx index 0492d9fd..22bc7085 100644 --- a/packages/app-design-to-code/code-view-with-control.tsx +++ b/packages/app-design-to-code/code-view-with-control.tsx @@ -3,7 +3,7 @@ import { CodeBox, SourceInput } from "@ui/codebox"; import { CodeOptionsControl } from "./code-options-control"; import styled from "@emotion/styled"; import { format } from "./formatter"; -import { all_preset_options_map__prod } from "./framework-option"; +import { getDefaultPresetByFramework } from "./framework-option"; import { fromApp, CodeGenRequest } from "./__plugin/events"; import { DesigntoCodeUserOptions } from "./user-options"; import { @@ -13,6 +13,8 @@ import { import { repo_assets } from "@design-sdk/core"; import { assistant as analytics } from "@analytics.bridged.xyz/internal"; import { CodeSessionCacheStorage } from "./code-session-cache-storage"; +import { PreferFramework } from "@app/preferences"; +import { Framework } from "@grida/builder-platform-types"; export function CodeViewWithControl({ targetid, @@ -35,8 +37,10 @@ export function CodeViewWithControl({ }) { const [app, setApp] = useState(); const [source, setSource] = useState(); - const [useroption, setUseroption] = React.useState( - all_preset_options_map__prod.flutter_default + + const framework_preference = new PreferFramework(); + const [useroption, setUseroption] = useState( + getDefaultPresetByFramework(framework_preference.get() ?? Framework.flutter) ); const cacheStore = new CodeSessionCacheStorage(targetid, useroption); @@ -77,6 +81,7 @@ export function CodeViewWithControl({ }, [useroption.framework, useroption.language]); const onOptionChange = (op: DesigntoCodeUserOptions) => { + framework_preference.set(op.framework); // save updated. setUseroption(op); }; diff --git a/packages/app-design-to-code/footer-action/code-screen-footer.tsx b/packages/app-design-to-code/footer-action/code-screen-footer.tsx index 8557d49a..ee34d562 100644 --- a/packages/app-design-to-code/footer-action/code-screen-footer.tsx +++ b/packages/app-design-to-code/footer-action/code-screen-footer.tsx @@ -6,7 +6,7 @@ import { PluginSdk } from "@plugin-sdk/app"; import { preview } from "@app/scene-view"; import { NextUploadButton } from "./next-upload-button"; import type { ReflectSceneNode } from "@design-sdk/core/nodes"; -import { Framework } from "../framework-option"; +import { Framework } from "@grida/builder-platform-types"; interface ICodeScreenFooter { framework: Framework; diff --git a/packages/app-design-to-code/framework-option.ts b/packages/app-design-to-code/framework-option.ts index 87386b6c..83e067f1 100644 --- a/packages/app-design-to-code/framework-option.ts +++ b/packages/app-design-to-code/framework-option.ts @@ -1,7 +1,5 @@ -export enum Framework { - react = "react", - flutter = "flutter", -} +import { Framework } from "@grida/builder-platform-types"; + export enum Language { jsx = "jsx", tsx = "tsx", @@ -93,3 +91,12 @@ export const getpreset = (preset_name: string): FrameworkOption => { } throw `"${preset_name}" is not a valid platform preset key`; }; + +export const getDefaultPresetByFramework = (frameowrk: Framework) => { + switch (frameowrk) { + case Framework.flutter: + return all_preset_options_map__prod.flutter_default; + case Framework.react: + return all_preset_options_map__prod.react_default; + } +}; diff --git a/packages/app-preferences/index.ts b/packages/app-preferences/index.ts index e69de29b..f62b7c37 100644 --- a/packages/app-preferences/index.ts +++ b/packages/app-preferences/index.ts @@ -0,0 +1,2 @@ +export * from "./prefer-language"; +export * from "./prefer-framework"; diff --git a/packages/app-preferences/prefer-framework/index.ts b/packages/app-preferences/prefer-framework/index.ts new file mode 100644 index 00000000..85940422 --- /dev/null +++ b/packages/app-preferences/prefer-framework/index.ts @@ -0,0 +1,16 @@ +import { Framework } from "@grida/builder-platform-types"; + +const key = "prefer-platform"; +export class PreferFramework { + readonly storage: Storage; + + constructor() { + this.storage = window.localStorage; + } + set(platform: Framework) { + this.storage.setItem(key, platform); + } + get(): Framework | undefined { + return this.storage.getItem(key) as Framework; + } +} diff --git a/packages/app-preferences/prefer-language/index.ts b/packages/app-preferences/prefer-language/index.ts index e69de29b..151e3e5b 100644 --- a/packages/app-preferences/prefer-language/index.ts +++ b/packages/app-preferences/prefer-language/index.ts @@ -0,0 +1 @@ +export class PreferLanguage {} diff --git a/packages/app-preferences/prefer-platform/index.ts b/packages/app-preferences/prefer-platform/index.ts deleted file mode 100644 index 0f00ff06..00000000 --- a/packages/app-preferences/prefer-platform/index.ts +++ /dev/null @@ -1,5 +0,0 @@ -export class PreferPlatform { - constructor() {} - get() {} - set() {} -} diff --git a/web/next.config.js b/web/next.config.js index 6a441168..a8a6a59c 100644 --- a/web/next.config.js +++ b/web/next.config.js @@ -18,6 +18,7 @@ const withTM = require("next-transpile-modules")([ "@app/component-manage", "@app/button-maker", "@app/data-mapper", + "@app/preferences", "@app/design-lint", "@app/design-text-code-syntax-highlight", "@app/icons-loader", @@ -40,6 +41,7 @@ const withTM = require("next-transpile-modules")([ "@plugin-sdk/draggable", "plugin-app", + "@grida/builder-platform-types", "@designto/config", "@designto/code", "@designto/token", diff --git a/yarn.lock b/yarn.lock index 003dd7a5..49f2d8e8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2155,6 +2155,18 @@ jest-util "^27.1.0" slash "^3.0.0" +"@jest/console@^27.2.0": + version "27.2.0" + resolved "https://registry.yarnpkg.com/@jest/console/-/console-27.2.0.tgz#57f702837ec52899be58c3794dce5941c77a8b63" + integrity sha512-35z+RqsK2CCgNxn+lWyK8X4KkaDtfL4BggT7oeZ0JffIiAiEYFYPo5B67V50ZubqDS1ehBrdCR2jduFnIrZOYw== + dependencies: + "@jest/types" "^27.1.1" + "@types/node" "*" + chalk "^4.0.0" + jest-message-util "^27.2.0" + jest-util "^27.2.0" + slash "^3.0.0" + "@jest/core@^27.1.0": version "27.1.0" resolved "https://registry.yarnpkg.com/@jest/core/-/core-27.1.0.tgz#622220f18032f5869e579cecbe744527238648bf" @@ -2190,6 +2202,41 @@ slash "^3.0.0" strip-ansi "^6.0.0" +"@jest/core@^27.2.0": + version "27.2.0" + resolved "https://registry.yarnpkg.com/@jest/core/-/core-27.2.0.tgz#61fc27b244e9709170ed9ffe41b006add569f1b3" + integrity sha512-E/2NHhq+VMo18DpKkoty8Sjey8Kps5Cqa88A8NP757s6JjYqPdioMuyUBhDiIOGCdQByEp0ou3jskkTszMS0nw== + dependencies: + "@jest/console" "^27.2.0" + "@jest/reporters" "^27.2.0" + "@jest/test-result" "^27.2.0" + "@jest/transform" "^27.2.0" + "@jest/types" "^27.1.1" + "@types/node" "*" + ansi-escapes "^4.2.1" + chalk "^4.0.0" + emittery "^0.8.1" + exit "^0.1.2" + graceful-fs "^4.2.4" + jest-changed-files "^27.1.1" + jest-config "^27.2.0" + jest-haste-map "^27.2.0" + jest-message-util "^27.2.0" + jest-regex-util "^27.0.6" + jest-resolve "^27.2.0" + jest-resolve-dependencies "^27.2.0" + jest-runner "^27.2.0" + jest-runtime "^27.2.0" + jest-snapshot "^27.2.0" + jest-util "^27.2.0" + jest-validate "^27.2.0" + jest-watcher "^27.2.0" + micromatch "^4.0.4" + p-each-series "^2.1.0" + rimraf "^3.0.0" + slash "^3.0.0" + strip-ansi "^6.0.0" + "@jest/environment@^27.1.0": version "27.1.0" resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-27.1.0.tgz#c7224a67004759ec203d8fa44e8bc0db93f66c44" @@ -2200,6 +2247,16 @@ "@types/node" "*" jest-mock "^27.1.0" +"@jest/environment@^27.2.0": + version "27.2.0" + resolved "https://registry.yarnpkg.com/@jest/environment/-/environment-27.2.0.tgz#48d1dbfa65f8e4a5a5c6cbeb9c59d1a5c2776f6b" + integrity sha512-iPWmQI0wRIYSZX3wKu4FXHK4eIqkfq6n1DCDJS+v3uby7SOXrHvX4eiTBuEdSvtDRMTIH2kjrSkjHf/F9JIYyQ== + dependencies: + "@jest/fake-timers" "^27.2.0" + "@jest/types" "^27.1.1" + "@types/node" "*" + jest-mock "^27.1.1" + "@jest/fake-timers@^27.1.0": version "27.1.0" resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-27.1.0.tgz#c0b343d8a16af17eab2cb6862e319947c0ea2abe" @@ -2212,6 +2269,18 @@ jest-mock "^27.1.0" jest-util "^27.1.0" +"@jest/fake-timers@^27.2.0": + version "27.2.0" + resolved "https://registry.yarnpkg.com/@jest/fake-timers/-/fake-timers-27.2.0.tgz#560841bc21ae7fbeff0cbff8de8f5cf43ad3561d" + integrity sha512-gSu3YHvQOoVaTWYGgHFB7IYFtcF2HBzX4l7s47VcjvkUgL4/FBnE20x7TNLa3W6ABERtGd5gStSwsA8bcn+c4w== + dependencies: + "@jest/types" "^27.1.1" + "@sinonjs/fake-timers" "^7.0.2" + "@types/node" "*" + jest-message-util "^27.2.0" + jest-mock "^27.1.1" + jest-util "^27.2.0" + "@jest/globals@^27.1.0": version "27.1.0" resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-27.1.0.tgz#e093a49c718dd678a782c197757775534c88d3f2" @@ -2221,6 +2290,15 @@ "@jest/types" "^27.1.0" expect "^27.1.0" +"@jest/globals@^27.2.0": + version "27.2.0" + resolved "https://registry.yarnpkg.com/@jest/globals/-/globals-27.2.0.tgz#4d7085f51df5ac70c8240eb3501289676503933d" + integrity sha512-raqk9Gf9WC3hlBa57rmRmJfRl9hom2b+qEE/ifheMtwn5USH5VZxzrHHOZg0Zsd/qC2WJ8UtyTwHKQAnNlDMdg== + dependencies: + "@jest/environment" "^27.2.0" + "@jest/types" "^27.1.1" + expect "^27.2.0" + "@jest/reporters@^27.1.0": version "27.1.0" resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-27.1.0.tgz#02ed1e6601552c2f6447378533f77aad002781d4" @@ -2251,6 +2329,36 @@ terminal-link "^2.0.0" v8-to-istanbul "^8.0.0" +"@jest/reporters@^27.2.0": + version "27.2.0" + resolved "https://registry.yarnpkg.com/@jest/reporters/-/reporters-27.2.0.tgz#629886d9a42218e504a424889a293abb27919e25" + integrity sha512-7wfkE3iRTLaT0F51h1mnxH3nQVwDCdbfgXiLuCcNkF1FnxXLH9utHqkSLIiwOTV1AtmiE0YagHbOvx4rnMP/GA== + dependencies: + "@bcoe/v8-coverage" "^0.2.3" + "@jest/console" "^27.2.0" + "@jest/test-result" "^27.2.0" + "@jest/transform" "^27.2.0" + "@jest/types" "^27.1.1" + chalk "^4.0.0" + collect-v8-coverage "^1.0.0" + exit "^0.1.2" + glob "^7.1.2" + graceful-fs "^4.2.4" + istanbul-lib-coverage "^3.0.0" + istanbul-lib-instrument "^4.0.3" + istanbul-lib-report "^3.0.0" + istanbul-lib-source-maps "^4.0.0" + istanbul-reports "^3.0.2" + jest-haste-map "^27.2.0" + jest-resolve "^27.2.0" + jest-util "^27.2.0" + jest-worker "^27.2.0" + slash "^3.0.0" + source-map "^0.6.0" + string-length "^4.0.1" + terminal-link "^2.0.0" + v8-to-istanbul "^8.0.0" + "@jest/source-map@^27.0.6": version "27.0.6" resolved "https://registry.yarnpkg.com/@jest/source-map/-/source-map-27.0.6.tgz#be9e9b93565d49b0548b86e232092491fb60551f" @@ -2270,6 +2378,16 @@ "@types/istanbul-lib-coverage" "^2.0.0" collect-v8-coverage "^1.0.0" +"@jest/test-result@^27.2.0": + version "27.2.0" + resolved "https://registry.yarnpkg.com/@jest/test-result/-/test-result-27.2.0.tgz#377b46a41a6415dd4839fd0bed67b89fecea6b20" + integrity sha512-JPPqn8h0RGr4HyeY1Km+FivDIjTFzDROU46iAvzVjD42ooGwYoqYO/MQTilhfajdz6jpVnnphFrKZI5OYrBONA== + dependencies: + "@jest/console" "^27.2.0" + "@jest/types" "^27.1.1" + "@types/istanbul-lib-coverage" "^2.0.0" + collect-v8-coverage "^1.0.0" + "@jest/test-sequencer@^27.1.0": version "27.1.0" resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-27.1.0.tgz#04e8b3bd735570d3d48865e74977a14dc99bff2d" @@ -2280,6 +2398,16 @@ jest-haste-map "^27.1.0" jest-runtime "^27.1.0" +"@jest/test-sequencer@^27.2.0": + version "27.2.0" + resolved "https://registry.yarnpkg.com/@jest/test-sequencer/-/test-sequencer-27.2.0.tgz#b02b507687825af2fdc84e90c539d36fd8cf7bc9" + integrity sha512-PrqarcpzOU1KSAK7aPwfL8nnpaqTMwPe7JBPnaOYRDSe/C6AoJiL5Kbnonqf1+DregxZIRAoDg69R9/DXMGqXA== + dependencies: + "@jest/test-result" "^27.2.0" + graceful-fs "^4.2.4" + jest-haste-map "^27.2.0" + jest-runtime "^27.2.0" + "@jest/transform@^26.6.2": version "26.6.2" resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-26.6.2.tgz#5ac57c5fa1ad17b2aae83e73e45813894dcf2e4b" @@ -2322,6 +2450,27 @@ source-map "^0.6.1" write-file-atomic "^3.0.0" +"@jest/transform@^27.2.0": + version "27.2.0" + resolved "https://registry.yarnpkg.com/@jest/transform/-/transform-27.2.0.tgz#e7e6e49d2591792db2385c33cdbb4379d407068d" + integrity sha512-Q8Q/8xXIZYllk1AF7Ou5sV3egOZsdY/Wlv09CSbcexBRcC1Qt6lVZ7jRFAZtbHsEEzvOCyFEC4PcrwKwyjXtCg== + dependencies: + "@babel/core" "^7.1.0" + "@jest/types" "^27.1.1" + babel-plugin-istanbul "^6.0.0" + chalk "^4.0.0" + convert-source-map "^1.4.0" + fast-json-stable-stringify "^2.0.0" + graceful-fs "^4.2.4" + jest-haste-map "^27.2.0" + jest-regex-util "^27.0.6" + jest-util "^27.2.0" + micromatch "^4.0.4" + pirates "^4.0.1" + slash "^3.0.0" + source-map "^0.6.1" + write-file-atomic "^3.0.0" + "@jest/types@^26.6.2": version "26.6.2" resolved "https://registry.yarnpkg.com/@jest/types/-/types-26.6.2.tgz#bef5a532030e1d88a2f5a6d933f84e97226ed48e" @@ -2344,6 +2493,17 @@ "@types/yargs" "^16.0.0" chalk "^4.0.0" +"@jest/types@^27.1.1": + version "27.1.1" + resolved "https://registry.yarnpkg.com/@jest/types/-/types-27.1.1.tgz#77a3fc014f906c65752d12123a0134359707c0ad" + integrity sha512-yqJPDDseb0mXgKqmNqypCsb85C22K1aY5+LUxh7syIM9n/b0AsaltxNy+o6tt29VcfGDpYEve175bm3uOhcehA== + dependencies: + "@types/istanbul-lib-coverage" "^2.0.0" + "@types/istanbul-reports" "^3.0.0" + "@types/node" "*" + "@types/yargs" "^16.0.0" + chalk "^4.0.0" + "@material-ui/core@^4.11.0": version "4.12.3" resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.3.tgz#80d665caf0f1f034e52355c5450c0e38b099d3ca" @@ -4765,6 +4925,20 @@ babel-jest@^27.1.0: graceful-fs "^4.2.4" slash "^3.0.0" +babel-jest@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/babel-jest/-/babel-jest-27.2.0.tgz#c0f129a81f1197028aeb4447acbc04564c8bfc52" + integrity sha512-bS2p+KGGVVmWXBa8+i6SO/xzpiz2Q/2LnqLbQknPKefWXVZ67YIjA4iXup/jMOEZplga9PpWn+wrdb3UdDwRaA== + dependencies: + "@jest/transform" "^27.2.0" + "@jest/types" "^27.1.1" + "@types/babel__core" "^7.1.14" + babel-plugin-istanbul "^6.0.0" + babel-preset-jest "^27.2.0" + chalk "^4.0.0" + graceful-fs "^4.2.4" + slash "^3.0.0" + babel-loader@^8.0.5, babel-loader@^8.2.2: version "8.2.2" resolved "https://registry.yarnpkg.com/babel-loader/-/babel-loader-8.2.2.tgz#9363ce84c10c9a40e6c753748e1441b60c8a0b81" @@ -4839,6 +5013,16 @@ babel-plugin-jest-hoist@^27.0.6: "@types/babel__core" "^7.0.0" "@types/babel__traverse" "^7.0.6" +babel-plugin-jest-hoist@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/babel-plugin-jest-hoist/-/babel-plugin-jest-hoist-27.2.0.tgz#79f37d43f7e5c4fdc4b2ca3e10cc6cf545626277" + integrity sha512-TOux9khNKdi64mW+0OIhcmbAn75tTlzKhxmiNXevQaPbrBYK7YKjP1jl6NHTJ6XR5UgUrJbCnWlKVnJn29dfjw== + dependencies: + "@babel/template" "^7.3.3" + "@babel/types" "^7.3.3" + "@types/babel__core" "^7.0.0" + "@types/babel__traverse" "^7.0.6" + babel-plugin-macros@^2.0.0, babel-plugin-macros@^2.6.1, babel-plugin-macros@^2.8.0: version "2.8.0" resolved "https://registry.yarnpkg.com/babel-plugin-macros/-/babel-plugin-macros-2.8.0.tgz#0f958a7cc6556b1e65344465d99111a1e5e10138" @@ -4934,6 +5118,14 @@ babel-preset-jest@^27.0.6: babel-plugin-jest-hoist "^27.0.6" babel-preset-current-node-syntax "^1.0.0" +babel-preset-jest@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/babel-preset-jest/-/babel-preset-jest-27.2.0.tgz#556bbbf340608fed5670ab0ea0c8ef2449fba885" + integrity sha512-z7MgQ3peBwN5L5aCqBKnF6iqdlvZvFUQynEhu0J+X9nHLU72jO3iY331lcYrg+AssJ8q7xsv5/3AICzVmJ/wvg== + dependencies: + babel-plugin-jest-hoist "^27.2.0" + babel-preset-current-node-syntax "^1.0.0" + bail@^1.0.0: version "1.0.5" resolved "https://registry.yarnpkg.com/bail/-/bail-1.0.5.tgz#b6fa133404a392cbc1f8c4bf63f5953351e7a776" @@ -6935,6 +7127,18 @@ expect@^27.1.0: jest-message-util "^27.1.0" jest-regex-util "^27.0.6" +expect@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/expect/-/expect-27.2.0.tgz#40eb89a492afb726a3929ccf3611ee0799ab976f" + integrity sha512-oOTbawMQv7AK1FZURbPTgGSzmhxkjFzoARSvDjOMnOpeWuYQx1tP6rXu9MIX5mrACmyCAM7fSNP8IJO2f1p0CQ== + dependencies: + "@jest/types" "^27.1.1" + ansi-styles "^5.0.0" + jest-get-type "^27.0.6" + jest-matcher-utils "^27.2.0" + jest-message-util "^27.2.0" + jest-regex-util "^27.0.6" + express@^4.17.1: version "4.17.1" resolved "https://registry.yarnpkg.com/express/-/express-4.17.1.tgz#4491fc38605cf51f8629d39c2b5d026f98a4c134" @@ -8805,6 +9009,15 @@ jest-changed-files@^27.1.0: execa "^5.0.0" throat "^6.0.1" +jest-changed-files@^27.1.1: + version "27.1.1" + resolved "https://registry.yarnpkg.com/jest-changed-files/-/jest-changed-files-27.1.1.tgz#9b3f67a34cc58e3e811e2e1e21529837653e4200" + integrity sha512-5TV9+fYlC2A6hu3qtoyGHprBwCAn0AuGA77bZdUgYvVlRMjHXo063VcWTEAyx6XAZ85DYHqp0+aHKbPlfRDRvA== + dependencies: + "@jest/types" "^27.1.1" + execa "^5.0.0" + throat "^6.0.1" + jest-circus@^27.1.0: version "27.1.0" resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-27.1.0.tgz#24c280c90a625ea57da20ee231d25b1621979a57" @@ -8830,6 +9043,31 @@ jest-circus@^27.1.0: stack-utils "^2.0.3" throat "^6.0.1" +jest-circus@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/jest-circus/-/jest-circus-27.2.0.tgz#ad0d6d75514050f539d422bae41344224d2328f9" + integrity sha512-WwENhaZwOARB1nmcboYPSv/PwHBUGRpA4MEgszjr9DLCl97MYw0qZprBwLb7rNzvMwfIvNGG7pefQ5rxyBlzIA== + dependencies: + "@jest/environment" "^27.2.0" + "@jest/test-result" "^27.2.0" + "@jest/types" "^27.1.1" + "@types/node" "*" + chalk "^4.0.0" + co "^4.6.0" + dedent "^0.7.0" + expect "^27.2.0" + is-generator-fn "^2.0.0" + jest-each "^27.2.0" + jest-matcher-utils "^27.2.0" + jest-message-util "^27.2.0" + jest-runtime "^27.2.0" + jest-snapshot "^27.2.0" + jest-util "^27.2.0" + pretty-format "^27.2.0" + slash "^3.0.0" + stack-utils "^2.0.3" + throat "^6.0.1" + jest-cli@^27.1.0: version "27.1.0" resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-27.1.0.tgz#118438e4d11cf6fb66cb2b2eb5778817eab3daeb" @@ -8848,6 +9086,24 @@ jest-cli@^27.1.0: prompts "^2.0.1" yargs "^16.0.3" +jest-cli@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/jest-cli/-/jest-cli-27.2.0.tgz#6da5ecca5bd757e20449f5ec1f1cad5b0303d16b" + integrity sha512-bq1X/B/b1kT9y1zIFMEW3GFRX1HEhFybiqKdbxM+j11XMMYSbU9WezfyWIhrSOmPT+iODLATVjfsCnbQs7cfIA== + dependencies: + "@jest/core" "^27.2.0" + "@jest/test-result" "^27.2.0" + "@jest/types" "^27.1.1" + chalk "^4.0.0" + exit "^0.1.2" + graceful-fs "^4.2.4" + import-local "^3.0.2" + jest-config "^27.2.0" + jest-util "^27.2.0" + jest-validate "^27.2.0" + prompts "^2.0.1" + yargs "^16.0.3" + jest-config@^27.1.0: version "27.1.0" resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-27.1.0.tgz#e6826e2baaa34c07c3839af86466870e339d9ada" @@ -8875,6 +9131,33 @@ jest-config@^27.1.0: micromatch "^4.0.4" pretty-format "^27.1.0" +jest-config@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/jest-config/-/jest-config-27.2.0.tgz#d1c359253927005c53d11ab3e50d3b2f402a673a" + integrity sha512-Z1romHpxeNwLxQtouQ4xt07bY6HSFGKTo0xJcvOK3u6uJHveA4LB2P+ty9ArBLpTh3AqqPxsyw9l9GMnWBYS9A== + dependencies: + "@babel/core" "^7.1.0" + "@jest/test-sequencer" "^27.2.0" + "@jest/types" "^27.1.1" + babel-jest "^27.2.0" + chalk "^4.0.0" + deepmerge "^4.2.2" + glob "^7.1.1" + graceful-fs "^4.2.4" + is-ci "^3.0.0" + jest-circus "^27.2.0" + jest-environment-jsdom "^27.2.0" + jest-environment-node "^27.2.0" + jest-get-type "^27.0.6" + jest-jasmine2 "^27.2.0" + jest-regex-util "^27.0.6" + jest-resolve "^27.2.0" + jest-runner "^27.2.0" + jest-util "^27.2.0" + jest-validate "^27.2.0" + micromatch "^4.0.4" + pretty-format "^27.2.0" + jest-diff@^26.0.0: version "26.6.2" resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-26.6.2.tgz#1aa7468b52c3a68d7d5c5fdcdfcd5e49bd164394" @@ -8895,6 +9178,16 @@ jest-diff@^27.0.0, jest-diff@^27.1.0: jest-get-type "^27.0.6" pretty-format "^27.1.0" +jest-diff@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-27.2.0.tgz#bda761c360f751bab1e7a2fe2fc2b0a35ce8518c" + integrity sha512-QSO9WC6btFYWtRJ3Hac0sRrkspf7B01mGrrQEiCW6TobtViJ9RWL0EmOs/WnBsZDsI/Y2IoSHZA2x6offu0sYw== + dependencies: + chalk "^4.0.0" + diff-sequences "^27.0.6" + jest-get-type "^27.0.6" + pretty-format "^27.2.0" + jest-docblock@^27.0.6: version "27.0.6" resolved "https://registry.yarnpkg.com/jest-docblock/-/jest-docblock-27.0.6.tgz#cc78266acf7fe693ca462cbbda0ea4e639e4e5f3" @@ -8913,6 +9206,17 @@ jest-each@^27.1.0: jest-util "^27.1.0" pretty-format "^27.1.0" +jest-each@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/jest-each/-/jest-each-27.2.0.tgz#4c531c7223de289429fc7b2473a86e653c86d61f" + integrity sha512-biDmmUQjg+HZOB7MfY2RHSFL3j418nMoC3TK3pGAj880fQQSxvQe1y2Wy23JJJNUlk6YXiGU0yWy86Le1HBPmA== + dependencies: + "@jest/types" "^27.1.1" + chalk "^4.0.0" + jest-get-type "^27.0.6" + jest-util "^27.2.0" + pretty-format "^27.2.0" + jest-environment-jsdom@^27.1.0: version "27.1.0" resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-27.1.0.tgz#5fb3eb8a67e02e6cc623640388d5f90e33075f18" @@ -8926,6 +9230,19 @@ jest-environment-jsdom@^27.1.0: jest-util "^27.1.0" jsdom "^16.6.0" +jest-environment-jsdom@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/jest-environment-jsdom/-/jest-environment-jsdom-27.2.0.tgz#c654dfae50ca2272c2a2e2bb95ff0af298283a3c" + integrity sha512-wNQJi6Rd/AkUWqTc4gWhuTIFPo7tlMK0RPZXeM6AqRHZA3D3vwvTa9ktAktyVyWYmUoXdYstOfyYMG3w4jt7eA== + dependencies: + "@jest/environment" "^27.2.0" + "@jest/fake-timers" "^27.2.0" + "@jest/types" "^27.1.1" + "@types/node" "*" + jest-mock "^27.1.1" + jest-util "^27.2.0" + jsdom "^16.6.0" + jest-environment-node@^27.1.0: version "27.1.0" resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-27.1.0.tgz#feea6b765f1fd4582284d4f1007df2b0a8d15b7f" @@ -8938,6 +9255,18 @@ jest-environment-node@^27.1.0: jest-mock "^27.1.0" jest-util "^27.1.0" +jest-environment-node@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/jest-environment-node/-/jest-environment-node-27.2.0.tgz#73ef2151cb62206669becb94cd84f33276252de5" + integrity sha512-WbW+vdM4u88iy6Q3ftUEQOSgMPtSgjm3qixYYK2AKEuqmFO2zmACTw1vFUB0qI/QN88X6hA6ZkVKIdIWWzz+yg== + dependencies: + "@jest/environment" "^27.2.0" + "@jest/fake-timers" "^27.2.0" + "@jest/types" "^27.1.1" + "@types/node" "*" + jest-mock "^27.1.1" + jest-util "^27.2.0" + jest-get-type@^26.3.0: version "26.3.0" resolved "https://registry.yarnpkg.com/jest-get-type/-/jest-get-type-26.3.0.tgz#e97dc3c3f53c2b406ca7afaed4493b1d099199e0" @@ -8989,6 +9318,26 @@ jest-haste-map@^27.1.0: optionalDependencies: fsevents "^2.3.2" +jest-haste-map@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/jest-haste-map/-/jest-haste-map-27.2.0.tgz#703b3a473e3f2e27d75ab07864ffd7bbaad0d75e" + integrity sha512-laFet7QkNlWjwZtMGHCucLvF8o9PAh2cgePRck1+uadSM4E4XH9J4gnx4do+a6do8ZV5XHNEAXEkIoNg5XUH2Q== + dependencies: + "@jest/types" "^27.1.1" + "@types/graceful-fs" "^4.1.2" + "@types/node" "*" + anymatch "^3.0.3" + fb-watchman "^2.0.0" + graceful-fs "^4.2.4" + jest-regex-util "^27.0.6" + jest-serializer "^27.0.6" + jest-util "^27.2.0" + jest-worker "^27.2.0" + micromatch "^4.0.4" + walker "^1.0.7" + optionalDependencies: + fsevents "^2.3.2" + jest-jasmine2@^27.1.0: version "27.1.0" resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-27.1.0.tgz#324a3de0b2ee20d238b2b5b844acc4571331a206" @@ -9013,6 +9362,30 @@ jest-jasmine2@^27.1.0: pretty-format "^27.1.0" throat "^6.0.1" +jest-jasmine2@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/jest-jasmine2/-/jest-jasmine2-27.2.0.tgz#1ece0ee37c348b59ed3dfcfe509fc24e3377b12d" + integrity sha512-NcPzZBk6IkDW3Z2V8orGueheGJJYfT5P0zI/vTO/Jp+R9KluUdgFrgwfvZ0A34Kw6HKgiWFILZmh3oQ/eS+UxA== + dependencies: + "@babel/traverse" "^7.1.0" + "@jest/environment" "^27.2.0" + "@jest/source-map" "^27.0.6" + "@jest/test-result" "^27.2.0" + "@jest/types" "^27.1.1" + "@types/node" "*" + chalk "^4.0.0" + co "^4.6.0" + expect "^27.2.0" + is-generator-fn "^2.0.0" + jest-each "^27.2.0" + jest-matcher-utils "^27.2.0" + jest-message-util "^27.2.0" + jest-runtime "^27.2.0" + jest-snapshot "^27.2.0" + jest-util "^27.2.0" + pretty-format "^27.2.0" + throat "^6.0.1" + jest-leak-detector@^27.1.0: version "27.1.0" resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-27.1.0.tgz#fe7eb633c851e06280ec4dd248067fe232c00a79" @@ -9021,6 +9394,14 @@ jest-leak-detector@^27.1.0: jest-get-type "^27.0.6" pretty-format "^27.1.0" +jest-leak-detector@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/jest-leak-detector/-/jest-leak-detector-27.2.0.tgz#9a7ca2dad1a21c4e49ad2a8ad7f1214ffdb86a28" + integrity sha512-e91BIEmbZw5+MHkB4Hnrq7S86coTxUMCkz4n7DLmQYvl9pEKmRx9H/JFH87bBqbIU5B2Ju1soKxRWX6/eGFGpA== + dependencies: + jest-get-type "^27.0.6" + pretty-format "^27.2.0" + jest-matcher-utils@^27.1.0: version "27.1.0" resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.1.0.tgz#68afda0885db1f0b9472ce98dc4c535080785301" @@ -9031,6 +9412,16 @@ jest-matcher-utils@^27.1.0: jest-get-type "^27.0.6" pretty-format "^27.1.0" +jest-matcher-utils@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-27.2.0.tgz#b4d224ab88655d5fab64b96b989ac349e2f5da43" + integrity sha512-F+LG3iTwJ0gPjxBX6HCyrARFXq6jjiqhwBQeskkJQgSLeF1j6ui1RTV08SR7O51XTUhtc8zqpDj8iCG4RGmdKw== + dependencies: + chalk "^4.0.0" + jest-diff "^27.2.0" + jest-get-type "^27.0.6" + pretty-format "^27.2.0" + jest-message-util@^27.1.0: version "27.1.0" resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-27.1.0.tgz#e77692c84945d1d10ef00afdfd3d2c20bd8fb468" @@ -9046,6 +9437,21 @@ jest-message-util@^27.1.0: slash "^3.0.0" stack-utils "^2.0.3" +jest-message-util@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/jest-message-util/-/jest-message-util-27.2.0.tgz#2f65c71df55267208686b1d7514e18106c91ceaf" + integrity sha512-y+sfT/94CiP8rKXgwCOzO1mUazIEdEhrLjuiu+RKmCP+8O/TJTSne9dqQRbFIHBtlR2+q7cddJlWGir8UATu5w== + dependencies: + "@babel/code-frame" "^7.12.13" + "@jest/types" "^27.1.1" + "@types/stack-utils" "^2.0.0" + chalk "^4.0.0" + graceful-fs "^4.2.4" + micromatch "^4.0.4" + pretty-format "^27.2.0" + slash "^3.0.0" + stack-utils "^2.0.3" + jest-mock@^27.1.0: version "27.1.0" resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-27.1.0.tgz#7ca6e4d09375c071661642d1c14c4711f3ab4b4f" @@ -9054,6 +9460,14 @@ jest-mock@^27.1.0: "@jest/types" "^27.1.0" "@types/node" "*" +jest-mock@^27.1.1: + version "27.1.1" + resolved "https://registry.yarnpkg.com/jest-mock/-/jest-mock-27.1.1.tgz#c7a2e81301fdcf3dab114931d23d89ec9d0c3a82" + integrity sha512-SClsFKuYBf+6SSi8jtAYOuPw8DDMsTElUWEae3zq7vDhH01ayVSIHUSIa8UgbDOUalCFp6gNsaikN0rbxN4dbw== + dependencies: + "@jest/types" "^27.1.1" + "@types/node" "*" + jest-pnp-resolver@^1.2.2: version "1.2.2" resolved "https://registry.yarnpkg.com/jest-pnp-resolver/-/jest-pnp-resolver-1.2.2.tgz#b704ac0ae028a89108a4d040b3f919dfddc8e33c" @@ -9078,6 +9492,15 @@ jest-resolve-dependencies@^27.1.0: jest-regex-util "^27.0.6" jest-snapshot "^27.1.0" +jest-resolve-dependencies@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/jest-resolve-dependencies/-/jest-resolve-dependencies-27.2.0.tgz#b56a1aab95b0fd21e0a69a15fda985c05f902b8a" + integrity sha512-EY5jc/Y0oxn+oVEEldTidmmdVoZaknKPyDORA012JUdqPyqPL+lNdRyI3pGti0RCydds6coaw6xt4JQY54dKsg== + dependencies: + "@jest/types" "^27.1.1" + jest-regex-util "^27.0.6" + jest-snapshot "^27.2.0" + jest-resolve@^27.1.0: version "27.1.0" resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-27.1.0.tgz#bb22303c9e240cccdda28562e3c6fbcc6a23ac86" @@ -9094,6 +9517,22 @@ jest-resolve@^27.1.0: resolve "^1.20.0" slash "^3.0.0" +jest-resolve@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/jest-resolve/-/jest-resolve-27.2.0.tgz#f5d053693ab3806ec2f778e6df8b0aa4cfaef95f" + integrity sha512-v09p9Ib/VtpHM6Cz+i9lEAv1Z/M5NVxsyghRHRMEUOqwPQs3zwTdwp1xS3O/k5LocjKiGS0OTaJoBSpjbM2Jlw== + dependencies: + "@jest/types" "^27.1.1" + chalk "^4.0.0" + escalade "^3.1.1" + graceful-fs "^4.2.4" + jest-haste-map "^27.2.0" + jest-pnp-resolver "^1.2.2" + jest-util "^27.2.0" + jest-validate "^27.2.0" + resolve "^1.20.0" + slash "^3.0.0" + jest-runner@^27.1.0: version "27.1.0" resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-27.1.0.tgz#1b28d114fb3b67407b8354c9385d47395e8ff83f" @@ -9122,6 +9561,34 @@ jest-runner@^27.1.0: source-map-support "^0.5.6" throat "^6.0.1" +jest-runner@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/jest-runner/-/jest-runner-27.2.0.tgz#281b255d88a473aebc0b5cb46e58a83a1251cab3" + integrity sha512-Cl+BHpduIc0cIVTjwoyx0pQk4Br8gn+wkr35PmKCmzEdOUnQ2wN7QVXA8vXnMQXSlFkN/+KWnk20TAVBmhgrww== + dependencies: + "@jest/console" "^27.2.0" + "@jest/environment" "^27.2.0" + "@jest/test-result" "^27.2.0" + "@jest/transform" "^27.2.0" + "@jest/types" "^27.1.1" + "@types/node" "*" + chalk "^4.0.0" + emittery "^0.8.1" + exit "^0.1.2" + graceful-fs "^4.2.4" + jest-docblock "^27.0.6" + jest-environment-jsdom "^27.2.0" + jest-environment-node "^27.2.0" + jest-haste-map "^27.2.0" + jest-leak-detector "^27.2.0" + jest-message-util "^27.2.0" + jest-resolve "^27.2.0" + jest-runtime "^27.2.0" + jest-util "^27.2.0" + jest-worker "^27.2.0" + source-map-support "^0.5.6" + throat "^6.0.1" + jest-runtime@^27.1.0: version "27.1.0" resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-27.1.0.tgz#1a98d984ffebc16a0b4f9eaad8ab47c00a750cf5" @@ -9155,6 +9622,39 @@ jest-runtime@^27.1.0: strip-bom "^4.0.0" yargs "^16.0.3" +jest-runtime@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/jest-runtime/-/jest-runtime-27.2.0.tgz#998295ccd80008b3031eeb5cc60e801e8551024b" + integrity sha512-6gRE9AVVX49hgBbWQ9PcNDeM4upMUXzTpBs0kmbrjyotyUyIJixLPsYjpeTFwAA07PVLDei1iAm2chmWycdGdQ== + dependencies: + "@jest/console" "^27.2.0" + "@jest/environment" "^27.2.0" + "@jest/fake-timers" "^27.2.0" + "@jest/globals" "^27.2.0" + "@jest/source-map" "^27.0.6" + "@jest/test-result" "^27.2.0" + "@jest/transform" "^27.2.0" + "@jest/types" "^27.1.1" + "@types/yargs" "^16.0.0" + chalk "^4.0.0" + cjs-module-lexer "^1.0.0" + collect-v8-coverage "^1.0.0" + execa "^5.0.0" + exit "^0.1.2" + glob "^7.1.3" + graceful-fs "^4.2.4" + jest-haste-map "^27.2.0" + jest-message-util "^27.2.0" + jest-mock "^27.1.1" + jest-regex-util "^27.0.6" + jest-resolve "^27.2.0" + jest-snapshot "^27.2.0" + jest-util "^27.2.0" + jest-validate "^27.2.0" + slash "^3.0.0" + strip-bom "^4.0.0" + yargs "^16.0.3" + jest-serializer@^26.6.2: version "26.6.2" resolved "https://registry.yarnpkg.com/jest-serializer/-/jest-serializer-26.6.2.tgz#d139aafd46957d3a448f3a6cdabe2919ba0742d1" @@ -9201,6 +9701,36 @@ jest-snapshot@^27.1.0: pretty-format "^27.1.0" semver "^7.3.2" +jest-snapshot@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/jest-snapshot/-/jest-snapshot-27.2.0.tgz#7961e7107ac666a46fbb23e7bb48ce0b8c6a9285" + integrity sha512-MukJvy3KEqemCT2FoT3Gum37CQqso/62PKTfIzWmZVTsLsuyxQmJd2PI5KPcBYFqLlA8LgZLHM8ZlazkVt8LsQ== + dependencies: + "@babel/core" "^7.7.2" + "@babel/generator" "^7.7.2" + "@babel/parser" "^7.7.2" + "@babel/plugin-syntax-typescript" "^7.7.2" + "@babel/traverse" "^7.7.2" + "@babel/types" "^7.0.0" + "@jest/transform" "^27.2.0" + "@jest/types" "^27.1.1" + "@types/babel__traverse" "^7.0.4" + "@types/prettier" "^2.1.5" + babel-preset-current-node-syntax "^1.0.0" + chalk "^4.0.0" + expect "^27.2.0" + graceful-fs "^4.2.4" + jest-diff "^27.2.0" + jest-get-type "^27.0.6" + jest-haste-map "^27.2.0" + jest-matcher-utils "^27.2.0" + jest-message-util "^27.2.0" + jest-resolve "^27.2.0" + jest-util "^27.2.0" + natural-compare "^1.4.0" + pretty-format "^27.2.0" + semver "^7.3.2" + jest-util@^26.6.2: version "26.6.2" resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-26.6.2.tgz#907535dbe4d5a6cb4c47ac9b926f6af29576cbc1" @@ -9237,6 +9767,18 @@ jest-util@^27.1.0: is-ci "^3.0.0" picomatch "^2.2.3" +jest-util@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/jest-util/-/jest-util-27.2.0.tgz#bfccb85cfafae752257319e825a5b8d4ada470dc" + integrity sha512-T5ZJCNeFpqcLBpx+Hl9r9KoxBCUqeWlJ1Htli+vryigZVJ1vuLB9j35grEBASp4R13KFkV7jM52bBGnArpJN6A== + dependencies: + "@jest/types" "^27.1.1" + "@types/node" "*" + chalk "^4.0.0" + graceful-fs "^4.2.4" + is-ci "^3.0.0" + picomatch "^2.2.3" + jest-validate@^27.1.0: version "27.1.0" resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-27.1.0.tgz#d9e82024c5e3f5cef52a600cfc456793a84c0998" @@ -9249,6 +9791,18 @@ jest-validate@^27.1.0: leven "^3.1.0" pretty-format "^27.1.0" +jest-validate@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/jest-validate/-/jest-validate-27.2.0.tgz#b7535f12d95dd3b4382831f4047384ca098642ab" + integrity sha512-uIEZGkFKk3+4liA81Xu0maG5aGDyPLdp+4ed244c+Ql0k3aLWQYcMbaMLXOIFcb83LPHzYzqQ8hwNnIxTqfAGQ== + dependencies: + "@jest/types" "^27.1.1" + camelcase "^6.2.0" + chalk "^4.0.0" + jest-get-type "^27.0.6" + leven "^3.1.0" + pretty-format "^27.2.0" + jest-watcher@^27.1.0: version "27.1.0" resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-27.1.0.tgz#2511fcddb0e969a400f3d1daa74265f93f13ce93" @@ -9262,6 +9816,19 @@ jest-watcher@^27.1.0: jest-util "^27.1.0" string-length "^4.0.1" +jest-watcher@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/jest-watcher/-/jest-watcher-27.2.0.tgz#dc2eef4c13c6d41cebf3f1fc5f900a54b51c2ea0" + integrity sha512-SjRWhnr+qO8aBsrcnYIyF+qRxNZk6MZH8TIDgvi+VlsyrvOyqg0d+Rm/v9KHiTtC9mGGeFi9BFqgavyWib6xLg== + dependencies: + "@jest/test-result" "^27.2.0" + "@jest/types" "^27.1.1" + "@types/node" "*" + ansi-escapes "^4.2.1" + chalk "^4.0.0" + jest-util "^27.2.0" + string-length "^4.0.1" + jest-worker@27.0.0-next.5: version "27.0.0-next.5" resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.0.0-next.5.tgz#5985ee29b12a4e191f4aae4bb73b97971d86ec28" @@ -9289,6 +9856,15 @@ jest-worker@^27.1.0: merge-stream "^2.0.0" supports-color "^8.0.0" +jest-worker@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/jest-worker/-/jest-worker-27.2.0.tgz#11eef39f1c88f41384ca235c2f48fe50bc229bc0" + integrity sha512-laB0ZVIBz+voh/QQy9dmUuuDsadixeerrKqyVpgPz+CCWiOYjOBabUXHIXZhsdvkWbLqSHbgkAHWl5cg24Q6RA== + dependencies: + "@types/node" "*" + merge-stream "^2.0.0" + supports-color "^8.0.0" + jest@^27.0.3, jest@^27.0.4, jest@^27.0.6, jest@^27.1.0: version "27.1.0" resolved "https://registry.yarnpkg.com/jest/-/jest-27.1.0.tgz#eaab62dfdc02d8b7c814cd27b8d2d92bc46d3d69" @@ -9298,6 +9874,15 @@ jest@^27.0.3, jest@^27.0.4, jest@^27.0.6, jest@^27.1.0: import-local "^3.0.2" jest-cli "^27.1.0" +jest@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/jest/-/jest-27.2.0.tgz#3bc329287d699d26361e2094919630eefdf1ac0d" + integrity sha512-oUqVXyvh5YwEWl263KWdPUAqEzBFzGHdFLQ05hUnITr1tH+9SscEI9A/GH9eBClA+Nw1ct+KNuuOV6wlnmBPcg== + dependencies: + "@jest/core" "^27.2.0" + import-local "^3.0.2" + jest-cli "^27.2.0" + js-string-escape@^1.0.1: version "1.0.1" resolved "https://registry.yarnpkg.com/js-string-escape/-/js-string-escape-1.0.1.tgz#e2625badbc0d67c7533e9edc1068c587ae4137ef" @@ -11111,6 +11696,16 @@ pretty-format@^27.0.0, pretty-format@^27.1.0: ansi-styles "^5.0.0" react-is "^17.0.1" +pretty-format@^27.2.0: + version "27.2.0" + resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.2.0.tgz#ee37a94ce2a79765791a8649ae374d468c18ef19" + integrity sha512-KyJdmgBkMscLqo8A7K77omgLx5PWPiXJswtTtFV7XgVZv2+qPk6UivpXXO+5k6ZEbWIbLoKdx1pZ6ldINzbwTA== + dependencies: + "@jest/types" "^27.1.1" + ansi-regex "^5.0.0" + ansi-styles "^5.0.0" + react-is "^17.0.1" + pretty-hrtime@^1.0.3: version "1.0.3" resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1" From 707ed9c5fb91d40649d06ed1a644c14e39e16540 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 15 Sep 2021 00:16:00 +0900 Subject: [PATCH 112/246] add framework option persistance --- .../app-design-to-code/code-options-control.tsx | 7 ++++--- .../code-session-cache-storage.ts | 2 +- .../app-design-to-code/code-view-with-control.tsx | 14 ++++++++++++-- packages/app-design-to-code/framework-option.ts | 14 +++++++++++--- 4 files changed, 28 insertions(+), 9 deletions(-) diff --git a/packages/app-design-to-code/code-options-control.tsx b/packages/app-design-to-code/code-options-control.tsx index 645894d4..37bd854a 100644 --- a/packages/app-design-to-code/code-options-control.tsx +++ b/packages/app-design-to-code/code-options-control.tsx @@ -17,15 +17,16 @@ import { DesigntoCodeUserOptions } from "./user-options"; // FIXME: get useroption as props from parent. userprops & preset (optional) should be managed on its parent interface CodeOptionsControlProps { customFields?: IField[]; + fallbackPreset?: string; initialPreset?: string; onUseroptionChange: (op: DesigntoCodeUserOptions) => void; } export function CodeOptionsControl(props: CodeOptionsControlProps) { - const __preetname = props.initialPreset ?? "flutter_default"; - const [presetname, setPresetname] = React.useState(__preetname); + const __presetname = props.initialPreset ?? props.fallbackPreset; + const [presetname, setPresetname] = React.useState(__presetname); const [useroption, setUseroption] = React.useState( - all_preset_options_map__prod[__preetname] + all_preset_options_map__prod[__presetname] ); // FIXME: this should be fixed on https://github.com/gridaco/code-like-ui (view CURSOR) diff --git a/packages/app-design-to-code/code-session-cache-storage.ts b/packages/app-design-to-code/code-session-cache-storage.ts index 05c280f4..7e61df6a 100644 --- a/packages/app-design-to-code/code-session-cache-storage.ts +++ b/packages/app-design-to-code/code-session-cache-storage.ts @@ -6,7 +6,7 @@ export class CodeSessionCacheStorage { readonly node: string, readonly preference: DesigntoCodeUserOptions ) { - this.key = `${node}-${preference.framework}-${preference.language}`; + this.key = `${node}-${preference?.framework}-${preference?.language}`; } setCache(code: string) { diff --git a/packages/app-design-to-code/code-view-with-control.tsx b/packages/app-design-to-code/code-view-with-control.tsx index 22bc7085..382b41e6 100644 --- a/packages/app-design-to-code/code-view-with-control.tsx +++ b/packages/app-design-to-code/code-view-with-control.tsx @@ -3,7 +3,10 @@ import { CodeBox, SourceInput } from "@ui/codebox"; import { CodeOptionsControl } from "./code-options-control"; import styled from "@emotion/styled"; import { format } from "./formatter"; -import { getDefaultPresetByFramework } from "./framework-option"; +import { + getDefaultPresetNameByFramework, + getPresetByName, +} from "./framework-option"; import { fromApp, CodeGenRequest } from "./__plugin/events"; import { DesigntoCodeUserOptions } from "./user-options"; import { @@ -39,8 +42,13 @@ export function CodeViewWithControl({ const [source, setSource] = useState(); const framework_preference = new PreferFramework(); + const initialPresetName = getDefaultPresetNameByFramework( + framework_preference.get() ?? Framework.flutter + ); + + const initialPreset = getPresetByName(initialPresetName); const [useroption, setUseroption] = useState( - getDefaultPresetByFramework(framework_preference.get() ?? Framework.flutter) + initialPreset ); const cacheStore = new CodeSessionCacheStorage(targetid, useroption); @@ -155,6 +163,8 @@ export function CodeViewWithControl({ { return { name: d }; diff --git a/packages/app-design-to-code/framework-option.ts b/packages/app-design-to-code/framework-option.ts index 83e067f1..9573918f 100644 --- a/packages/app-design-to-code/framework-option.ts +++ b/packages/app-design-to-code/framework-option.ts @@ -92,11 +92,19 @@ export const getpreset = (preset_name: string): FrameworkOption => { throw `"${preset_name}" is not a valid platform preset key`; }; -export const getDefaultPresetByFramework = (frameowrk: Framework) => { +export const getDefaultPresetNameByFramework = (frameowrk: Framework) => { switch (frameowrk) { case Framework.flutter: - return all_preset_options_map__prod.flutter_default; + return "flutter_default"; case Framework.react: - return all_preset_options_map__prod.react_default; + return "react_default"; } }; + +export const getDefaultPresetByFramework = (frameowrk: Framework) => { + return getPresetByName(getDefaultPresetNameByFramework(frameowrk)); +}; + +export function getPresetByName(name: string) { + return all_preset_options_map__prod[name]; +} From 3db64dc007410cec4bda5f3317176ff5dc265912 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 15 Sep 2021 00:22:54 +0900 Subject: [PATCH 113/246] bump designtocode --- packages/design-to-code | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/design-to-code b/packages/design-to-code index 88f622f1..d20ee21e 160000 --- a/packages/design-to-code +++ b/packages/design-to-code @@ -1 +1 @@ -Subproject commit 88f622f155ab4817f0ef73598600f186fcca623f +Subproject commit d20ee21e7aefd3d16d180d773286f3eba77b3941 From 2d27693bd2538d0aeb5cb4cfe7473d22fe33a73c Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 15 Sep 2021 00:44:55 +0900 Subject: [PATCH 114/246] add preview cache storage i/o --- packages/ui-previewer/cache/index.ts | 27 +++++++++++++++++++++++++++ packages/ui-previewer/preview.tsx | 11 +++++++++++ 2 files changed, 38 insertions(+) create mode 100644 packages/ui-previewer/cache/index.ts diff --git a/packages/ui-previewer/cache/index.ts b/packages/ui-previewer/cache/index.ts new file mode 100644 index 00000000..6c5c97a6 --- /dev/null +++ b/packages/ui-previewer/cache/index.ts @@ -0,0 +1,27 @@ +import { ImageExportOptions, QuickImageExportPreset } from "@plugin-sdk/core"; + +type SerializableImageExportOption = + | ImageExportOptions + | QuickImageExportPreset; + +export class PreviewSessionCache { + private readonly key; + constructor( + readonly node: string, + readonly setting: SerializableImageExportOption + ) { + this.key = `${node}-${ + typeof setting === "string" ? setting : JSON.stringify(setting) + }`; + } + + setCache(data: Uint8Array) { + const payload = JSON.stringify(Array.from(data)); + payload && window.localStorage.setItem(this.key, payload); + } + + getCache(): Uint8Array | null { + const payload = window.localStorage.getItem(this.key); + return payload && new Uint8Array(JSON.parse(payload)); + } +} diff --git a/packages/ui-previewer/preview.tsx b/packages/ui-previewer/preview.tsx index aea2a3b9..1047adee 100644 --- a/packages/ui-previewer/preview.tsx +++ b/packages/ui-previewer/preview.tsx @@ -5,6 +5,7 @@ import EmptyIndicatorIcon from "@assistant/icons/empty-indicator-icon"; import "./preview.css"; import { PluginSdk } from "@plugin-sdk/app"; import { QuickImageExportPreset } from "@plugin-sdk/core"; +import { PreviewSessionCache } from "./cache"; interface Props { auto?: boolean; @@ -53,10 +54,20 @@ export function Preview(props: Props) { } if (props.of) { + const cachestore = new PreviewSessionCache( + props.of, + props.fetchingConfig + ); + const cache = cachestore.getCache(); + if (cache) { + setData(cache); + } + PluginSdk.getNodeImage({ id: props.of, opt: props.fetchingConfig ?? "small", }).then((data) => { + cachestore.setCache(data.data); setData(data.data); }); } From 87008b89906ab0150983c8f9894c31c844e60668 Mon Sep 17 00:00:00 2001 From: You-j Date: Wed, 15 Sep 2021 13:18:30 +0900 Subject: [PATCH 115/246] upate code-ui/token --- packages/app-schema-editor/package.json | 2 +- yarn.lock | 8 ++++---- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/packages/app-schema-editor/package.json b/packages/app-schema-editor/package.json index 6f390c8a..dd943c8c 100644 --- a/packages/app-schema-editor/package.json +++ b/packages/app-schema-editor/package.json @@ -8,7 +8,7 @@ "@code-ui/completion-provider": "^0.0.4", "@code-ui/hover": "^0.0.2", "@code-ui/interface": "^0.0.5", - "@code-ui/token": "^0.0.5", + "@code-ui/token": "^0.0.6", "@radix-ui/react-hover-card": "^0.1.0", "@tippyjs/react": "^4.2.5" } diff --git a/yarn.lock b/yarn.lock index 003dd7a5..f968e02d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1646,10 +1646,10 @@ dependencies: "@tippyjs/react" "^4.2.5" -"@code-ui/token@^0.0.5": - version "0.0.5" - resolved "https://registry.yarnpkg.com/@code-ui/token/-/token-0.0.5.tgz#fd877f3df72feee5e9b70a0974fb8516e23a00e2" - integrity sha512-czaNgr4+nQreaYH38UOYXNOrK0ItD6sXEDziRb4Uv9tHmewIIiP6yLdn7t0hMh8rZP1hPI9CCaO/gDLZURwUoA== +"@code-ui/token@^0.0.6": + version "0.0.6" + resolved "https://registry.yarnpkg.com/@code-ui/token/-/token-0.0.6.tgz#429fd3e56f21872d26bfbcab99758115ae90898a" + integrity sha512-i2+bJ+KMtvvavpYMjywuM6VuDNs8qbt8iRIkwSY5+8I1VK0+S6DlhwCIhwdRU9drfo/sJVnjl1gyB4GYbXgfFg== dependencies: "@code-ui/color-scheme" "0.0.2" "@code-ui/hover" "0.0.2" From 107779444ebbdb2f501c0152a5389bc28ccbcab7 Mon Sep 17 00:00:00 2001 From: You-j Date: Wed, 15 Sep 2021 13:18:55 +0900 Subject: [PATCH 116/246] fix input attr --- .../components/single-property.tsx | 68 +++++++++++++------ 1 file changed, 46 insertions(+), 22 deletions(-) diff --git a/packages/app-schema-editor/components/single-property.tsx b/packages/app-schema-editor/components/single-property.tsx index 2bae3a8b..4a978141 100644 --- a/packages/app-schema-editor/components/single-property.tsx +++ b/packages/app-schema-editor/components/single-property.tsx @@ -4,10 +4,10 @@ import { UserSuggestionReason } from "../property-suggestions"; import { Divider } from "@ui/core"; import * as HoverCard from "@radix-ui/react-hover-card"; import { PropertyFieldDocuemntationHoverCard } from "./property-field-lookup-hover-card"; -import { BasedToken, Colon, Input } from "@code-ui/token"; import { SuggestionItems, Suggestions } from "@code-ui/completion-provider"; import styled from "@emotion/styled"; import Tippy from "@tippyjs/react"; +import { BasedToken, Colon, Input } from "@code-ui/token"; type UserInteractionMode = "editing" | "viewing"; @@ -17,9 +17,9 @@ const ModeToggleButton = (props: { onStartEdit: () => void; }) => { if (props.current == "viewing") { - return ; + return edit; } - return ; + return save; }; interface ISingleLayerPropertyDefinitionProps { @@ -39,7 +39,6 @@ export function SingleLayerPropertyDefinition( ) { const [data, setData] = useState(props.initial); const [isVisible, setIsVisible] = useState(false); - console.log(props.suggestions); // if no initial data provided, start with editing mode const _initialMode: UserInteractionMode = props.initialMode ?? (props.initial ? "viewing" : "editing"); @@ -82,13 +81,13 @@ export function SingleLayerPropertyDefinition( function suggestionShow() { return ( - +
    console.log(id)} /> - +
    ); } @@ -111,7 +110,8 @@ export function SingleLayerPropertyDefinition( contentColor="#9CDCFE" content={ { setData({ @@ -149,7 +149,7 @@ export function SingleLayerPropertyDefinition( >
    - + */} {data?.layer?.propertyType && ( <> @@ -249,14 +247,21 @@ export function SingleLayerPropertyDefinition( /> )} + + + / + {props.onRemove && ( + add property + )} - - {props.onRemove && } - {props.onCancel && } + {props.onCancel && ( + remove + )} +
    @@ -280,6 +285,25 @@ const StyledTippy = styled(Tippy)` transform: translate3d(0, -10px, 0px); `; -const Test = styled.div` - position: relative; +const Field = styled.div` + display: flex; + flex-direction: row; + justify-items: center; + align-items: center; +`; + +const OptionalBtn = styled.button` + text-decoration: underline; + outline: none; + background: transparent; + color: #868686; + border: none; + cursor: pointer; + align-items: center; +`; + +const Splash = styled.span` + outline: none; + background: transparent; + color: #868686; `; From 170d6c54f0b8e63817e786bbe2a9ecef8e6365b9 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Wed, 15 Sep 2021 13:47:29 +0900 Subject: [PATCH 117/246] bump design to code & related pacakges --- packages/design-sdk | 2 +- packages/design-to-code | 2 +- packages/reflect-core | 2 +- yarn.lock | 7 +------ 4 files changed, 4 insertions(+), 9 deletions(-) diff --git a/packages/design-sdk b/packages/design-sdk index 20275878..de1c7a72 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit 2027587846cc8ef70e5e23b4e9068ad08d815ef3 +Subproject commit de1c7a72e0cae9d3e19f9160743c20f537116b33 diff --git a/packages/design-to-code b/packages/design-to-code index d20ee21e..4f14db0f 160000 --- a/packages/design-to-code +++ b/packages/design-to-code @@ -1 +1 @@ -Subproject commit d20ee21e7aefd3d16d180d773286f3eba77b3941 +Subproject commit 4f14db0f0b2793f69b088f8921a394ab84f31d1f diff --git a/packages/reflect-core b/packages/reflect-core index 91342a7a..9a0b94a6 160000 --- a/packages/reflect-core +++ b/packages/reflect-core @@ -1 +1 @@ -Subproject commit 91342a7a4fdc5ea1b9667b9a015351748b5c4450 +Subproject commit 9a0b94a68cf8fd05bb9a079770d6dcda21e61be3 diff --git a/yarn.lock b/yarn.lock index f8422308..6b4740c5 100644 --- a/yarn.lock +++ b/yarn.lock @@ -3016,12 +3016,7 @@ resolved "https://registry.yarnpkg.com/@reflect-ui/namings/-/namings-0.0.3.tgz#6e9fd4809dd5c9d2a996516236c71b99ea93fbcb" integrity sha512-rNNW9nK8qhz+54pOL11MRUTjRhRHTL/rbM5kvtddDY2g7t/1XxGl7d3tLs/0LEoy2LFPtNf/fFZYEgQD/jyoFA== -"@reflect-ui/uiutils@0.1.2": - version "0.1.2" - resolved "https://registry.yarnpkg.com/@reflect-ui/uiutils/-/uiutils-0.1.2.tgz#1020e557d2fdbf512a10b97b0c424c430ff7ad38" - integrity sha512-uhE5Btrzud86MuNykB23EfEHn/jBJ8BicYjOkq7ZFgh38dnvF54vqZV0/LNYF77Z+3jTgQMwZR++e4gL8zCyHw== - -"@reflect-ui/uiutils@0.1.2-1": +"@reflect-ui/uiutils@0.1.2-1", "@reflect-ui/uiutils@^0.1.2-1": version "0.1.2-1" resolved "https://registry.yarnpkg.com/@reflect-ui/uiutils/-/uiutils-0.1.2-1.tgz#b88d08223eb19ab5e6dd5ecf4a03075a41bb89c1" integrity sha512-fv3mITNqM6U7DEpOr5B6c9lmmkj22r3114aR8Tvp2izMIndLbFJBzLnYEVA07bHiglic1POWCePwYVhB+bAF1Q== From 6f9f14fb2d37da14ffed00a355c3beed4dd3b8d9 Mon Sep 17 00:00:00 2001 From: You-j Date: Wed, 15 Sep 2021 18:02:38 +0900 Subject: [PATCH 118/246] add btn style --- .../selection-configurable-layer.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx index cf6cf3c6..26cfcd25 100644 --- a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx @@ -17,6 +17,7 @@ import this_interface_builder from "./selection-configurable-layer.coli"; import { tsNamer } from "../interface-code-builder/scoped-property-id-namer"; import { CodeStyleWrapper } from "./_shared-components"; import { ISingleLayerPropertyMapping } from "../types/single-layer-property-type"; +import styled from "@emotion/styled"; export default function (props: { node: nodes.light.IReflectNodeReference }) { const { node } = props; @@ -169,8 +170,17 @@ export default function (props: { node: nodes.light.IReflectNodeReference }) { ))} )} - + add new
    ); } +const OptionalBtn = styled.button` + text-decoration: underline; + outline: none; + background: transparent; + color: #868686; + border: none; + cursor: pointer; + align-items: center; +`; From fff2fd2442f8e0dd103bae9687d9ac08f899e4aa Mon Sep 17 00:00:00 2001 From: You-j Date: Wed, 15 Sep 2021 18:03:05 +0900 Subject: [PATCH 119/246] update package and stash add handling hover --- .../components/single-property.tsx | 291 ++++++++---------- packages/app-schema-editor/package.json | 2 +- yarn.lock | 8 +- 3 files changed, 133 insertions(+), 168 deletions(-) diff --git a/packages/app-schema-editor/components/single-property.tsx b/packages/app-schema-editor/components/single-property.tsx index 4a978141..10969ee2 100644 --- a/packages/app-schema-editor/components/single-property.tsx +++ b/packages/app-schema-editor/components/single-property.tsx @@ -55,6 +55,7 @@ export function SingleLayerPropertyDefinition( setMode("editing"); }; + // for test const items: SuggestionItems[] = [ { id: "29213123123/cover", @@ -83,201 +84,165 @@ export function SingleLayerPropertyDefinition( return (
    console.log(id)} + items={suggestionItems} + selectedId={data.schema.description} + onSelected={(id: string) => + setData({ + ...data, + schema: { + ...data.schema, + description: id, + }, + }) + } />
    ); } return ( - - -
    - -
    - - { - setIsVisible(!isVisible); - }} - onDoubleClick={() => { - console.log("onDoubleClick"); - }} - cornerRadius={2} - contentPadding={[0, 2]} - contentColor="#9CDCFE" - content={ - { - setData({ - ...data, - schema: { - ...data.schema, - name: e.target.value, - }, - }); - }} - /> - } - /> - - { - setIsVisible(!isVisible); - }} - onDoubleClick={() => { - console.log("onDoubleClick"); - }} - onHover={(isOver) => console.log(isOver)} - hoverOverlayColor={"rgba(157, 178, 255, 0.25)"} - cornerRadius={2} - contentPadding={[0, 2]} - contentColor="#9CDCFE" - content={ -
    - -
    - { - setData({ - ...data, - schema: { - ...data.schema, - description: e.target.value, - }, - }); - }} - disabled={disableInputs} - /> -
    -     -
    - } - /> -     - - {/* */} - - {data?.layer?.propertyType && ( - <> + <> +
    + + + + + { - console.log("onClicked"); - }} - onDoubleClick={() => { - console.log("onDoubleClick"); - }} - onHover={(isOver) => console.log(isOver)} - hoverOverlayColor={"rgba(157, 178, 255, 0.25)"} + onClick={() => {}} + onDoubleClick={() => {}} cornerRadius={2} contentPadding={[0, 2]} contentColor="#9CDCFE" content={ { setData({ ...data, schema: { ...data.schema, - type: e.target.value, + name: e.target.value, }, }); }} - disabled={disableInputs} /> } /> - - )} - - - / - {props.onRemove && ( - add property - )} + + { + setIsVisible(!isVisible); + }} + onDoubleClick={() => {}} + onHover={(isOver) => console.log(isOver)} + hoverOverlayColor={"rgba(157, 178, 255, 0.25)"} + cornerRadius={2} + contentPadding={[0, 2]} + contentColor="#9CDCFE" + content={ +
    + +
    + { + setData({ + ...data, + schema: { + ...data.schema, + description: e.target.value, + }, + }); + }} + disabled={disableInputs} + /> +
    +     +
    + } + /> +     - {props.onCancel && ( - remove + {data?.layer?.propertyType && ( + <> + { + console.log("onClicked"); + }} + onDoubleClick={() => { + console.log("onDoubleClick"); + }} + onHover={(isOver) => console.log(isOver)} + hoverOverlayColor={"rgba(157, 178, 255, 0.25)"} + cornerRadius={2} + contentPadding={[0, 2]} + contentColor="#9CDCFE" + content={ + { + setData({ + ...data, + schema: { + ...data.schema, + type: e.target.value, + }, + }); + }} + disabled={disableInputs} + /> + } + /> + )} - - -
    - - {mode == "viewing" && ( - - - - - )} - + + {mode == "viewing" && ( + + + + + )} + + + + / + {props.onRemove && ( + add property + )} + + {props.onCancel && ( + remove + )} + + +
    + ); } const Flex = styled.div` display: flex; align-items: center; + width: fit-content; `; const StyledTippy = styled(Tippy)` diff --git a/packages/app-schema-editor/package.json b/packages/app-schema-editor/package.json index dd943c8c..db5e8445 100644 --- a/packages/app-schema-editor/package.json +++ b/packages/app-schema-editor/package.json @@ -8,7 +8,7 @@ "@code-ui/completion-provider": "^0.0.4", "@code-ui/hover": "^0.0.2", "@code-ui/interface": "^0.0.5", - "@code-ui/token": "^0.0.6", + "@code-ui/token": "^0.0.7", "@radix-ui/react-hover-card": "^0.1.0", "@tippyjs/react": "^4.2.5" } diff --git a/yarn.lock b/yarn.lock index f8422308..cc368ca8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1646,10 +1646,10 @@ dependencies: "@tippyjs/react" "^4.2.5" -"@code-ui/token@^0.0.6": - version "0.0.6" - resolved "https://registry.yarnpkg.com/@code-ui/token/-/token-0.0.6.tgz#429fd3e56f21872d26bfbcab99758115ae90898a" - integrity sha512-i2+bJ+KMtvvavpYMjywuM6VuDNs8qbt8iRIkwSY5+8I1VK0+S6DlhwCIhwdRU9drfo/sJVnjl1gyB4GYbXgfFg== +"@code-ui/token@^0.0.7": + version "0.0.7" + resolved "https://registry.yarnpkg.com/@code-ui/token/-/token-0.0.7.tgz#def0237057116d8c3fc1914fb1354faf959f24cb" + integrity sha512-lo05EWYBpJ59/eiLpanzfKlbJw4a3OV8O/zvuuEZBN84ZCMxLlVM6PhrJXDBO/1/vID/13iQMSbkpH74qH0rOw== dependencies: "@code-ui/color-scheme" "0.0.2" "@code-ui/hover" "0.0.2" From 55b6e845e16c6fbb03413e4de9e926b2496a9c69 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sun, 26 Sep 2021 21:10:33 +0900 Subject: [PATCH 120/246] update node type imports --- figma-core/code-thread/runon.ts | 5 ++--- figma-core/code-thread/selection.ts | 6 ++--- figma-core/node-cache/index.ts | 2 +- packages/app-data-mapper/data-source-node.tsx | 2 +- .../__plugin/design-to-code.ts | 2 +- .../property-suggestions/index.ts | 8 ++++--- .../plugin-app/plugin-hooks/use-selection.ts | 22 +++++++++++-------- packages/plugin-app/utils/canvas.ts | 2 +- packages/plugin-sdk-app/plugin-sdk.ts | 2 +- 9 files changed, 28 insertions(+), 23 deletions(-) diff --git a/figma-core/code-thread/runon.ts b/figma-core/code-thread/runon.ts index 7086644a..d8c75806 100644 --- a/figma-core/code-thread/runon.ts +++ b/figma-core/code-thread/runon.ts @@ -4,7 +4,7 @@ import { EK_VANILLA_TRANSPORT, } from "@core/constant/ek.constant"; import * as vanilla from "@design-sdk/vanilla"; -import { ReflectFrameNode, ReflectSceneNode } from "@design-sdk/core/nodes"; +import { ReflectFrameNode, ReflectSceneNode } from "@design-sdk/figma-node"; import { user_interest } from "./user-interest"; import { broadcastSelectionPreview } from "./broadcast-selection-preview"; import { singleFigmaNodeSelection } from "./selection"; @@ -37,8 +37,7 @@ export async function runon(rnode: ReflectSceneNode) { // region make vanilla if (user_interest == "g11n" || user_interest == "exporter") { const globalizatoinScreen = vanilla.makeVanilla(rnode as ReflectFrameNode); - const vanillaTransportableImageRepository = - await globalizatoinScreen.repository.makeTransportable(); + const vanillaTransportableImageRepository = await globalizatoinScreen.repository.makeTransportable(); figma.ui.postMessage({ type: EK_IMAGE_ASSET_REPOSITORY_MAP, data: vanillaTransportableImageRepository, diff --git a/figma-core/code-thread/selection.ts b/figma-core/code-thread/selection.ts index fc85aba1..ce8c1846 100644 --- a/figma-core/code-thread/selection.ts +++ b/figma-core/code-thread/selection.ts @@ -1,7 +1,7 @@ import { analyzeSelection, SelectionAnalysis } from "plugin-app/utils"; import { convert } from "@design-sdk/figma"; import { Logger } from "logger"; -import { light } from "@design-sdk/core/nodes"; +import { makeReference } from "@design-sdk/figma-node"; import { runon } from "./runon"; import { FigmaNodeCache } from "../node-cache"; @@ -45,7 +45,7 @@ export function onfigmaselectionchange() { // region sync selection event (search "selectionchange" for references) figma.ui.postMessage({ type: "selectionchange", - data: rnodes.map((n) => light.makeReference(n)), + data: rnodes.map((n) => makeReference(n)), }); // endregion @@ -72,7 +72,7 @@ export function onfigmaselectionchange() { // region sync selection event (search "selectionchange" for references) try { - const data = light.makeReference(rnode); + const data = makeReference(rnode); figma.ui.postMessage({ type: "selectionchange", data: data, diff --git a/figma-core/node-cache/index.ts b/figma-core/node-cache/index.ts index 8268b386..98d22307 100644 --- a/figma-core/node-cache/index.ts +++ b/figma-core/node-cache/index.ts @@ -1,5 +1,5 @@ import { SceneNode } from "@design-sdk/figma-types"; -import { ReflectSceneNode } from "@design-sdk/core/nodes"; +import { ReflectSceneNode } from "@design-sdk/figma-node"; const RUNTIME_RAPID_SHORT_LIVED_CACHE_TIMEOUT_MS = 5 * 1000; // after 5 seconds, we'll assume the node is not available const RUNTIME_SHORT_LIVED_SAME_SELECTION_CACHE_TIMEOUT_MS = 2.5 * 1000; diff --git a/packages/app-data-mapper/data-source-node.tsx b/packages/app-data-mapper/data-source-node.tsx index b10b8fbf..ba15dd0f 100644 --- a/packages/app-data-mapper/data-source-node.tsx +++ b/packages/app-data-mapper/data-source-node.tsx @@ -3,7 +3,7 @@ // TOOD - make it universal import { keyAnnotations, Figma } from "@design-sdk/figma"; -import type { IReflectNodeReference } from "@design-sdk/core/nodes/lignt"; +import type { IReflectNodeReference } from "@design-sdk/figma-node"; /** * currently only root level text are supported for data source node. diff --git a/packages/app-design-to-code/__plugin/design-to-code.ts b/packages/app-design-to-code/__plugin/design-to-code.ts index e99859a9..23c57478 100644 --- a/packages/app-design-to-code/__plugin/design-to-code.ts +++ b/packages/app-design-to-code/__plugin/design-to-code.ts @@ -1,4 +1,4 @@ -import type { ReflectSceneNode } from "@design-sdk/core/nodes"; +import type { ReflectSceneNode } from "@design-sdk/figma-node"; import { flutter, react, token } from "@designto/code"; interface GenerationResultToUI { diff --git a/packages/app-schema-editor/property-suggestions/index.ts b/packages/app-schema-editor/property-suggestions/index.ts index abaac5ac..b3ecd697 100644 --- a/packages/app-schema-editor/property-suggestions/index.ts +++ b/packages/app-schema-editor/property-suggestions/index.ts @@ -1,7 +1,9 @@ -import type { IReflectNodeReference } from "@design-sdk/core/nodes/lignt"; -import { ReflectSceneNodeType } from "@design-sdk/core/nodes"; +import { + ReflectSceneNodeType, + IReflectNodeReference, + IReflectNodeRootShapeReference, +} from "@design-sdk/figma-node"; import { PropertyAccessors } from "../types/single-layer-property-type"; -import { IReflectNodeRootShapeReference } from "@design-sdk/core/nodes/types/reflect-node-reference"; type ConfigurableLayerContext = /** diff --git a/packages/plugin-app/plugin-hooks/use-selection.ts b/packages/plugin-app/plugin-hooks/use-selection.ts index 992745ec..2efee302 100644 --- a/packages/plugin-app/plugin-hooks/use-selection.ts +++ b/packages/plugin-app/plugin-hooks/use-selection.ts @@ -1,7 +1,10 @@ import { useEffect, useState } from "react"; -import type { IReflectNodeReference } from "@design-sdk/core/nodes/lignt"; -import { ReflectSceneNodeType } from "@design-sdk/core/nodes"; +import { + IReflectNodeReference, + ReflectSceneNodeType, +} from "@design-sdk/figma-node"; import { detectIf } from "@reflect-ui/detection"; + export enum SelectionType { "single", // updated with single selection "multi", // updated with multi selection @@ -144,8 +147,9 @@ export function usePairSelection(): _PairSelectionEvent { * @returns */ export function useRangeSelection(min: number, max: number) { - const [rangedSelections, setRangedSelections] = - useState(null); + const [rangedSelections, setRangedSelections] = useState( + null + ); const selection = useSelection(); useEffect(() => { if (selection) { @@ -183,8 +187,9 @@ export function useSingleSelectionWithMeta() { const selection = useSingleSelection(); const { node } = selection; - let type_in_meta: ScaffoldMetaNodeType = - _reflect_scene_node_type__to__scaffold_meta_node_type(node); + let type_in_meta: ScaffoldMetaNodeType = _reflect_scene_node_type__to__scaffold_meta_node_type( + node + ); return { meta: { type: type_in_meta }, @@ -213,9 +218,8 @@ function _reflect_scene_node_type__to__scaffold_meta_node_type( case ReflectSceneNodeType.instance: return "component-like"; case ReflectSceneNodeType.frame: - const _detection_result_if_screen = detectIf.screen( - node as any - ).result; /** TODO: remove `as any` */ + const _detection_result_if_screen = detectIf.screen(node as any) + .result; /** TODO: remove `as any` */ if (_detection_result_if_screen) { return "screen"; diff --git a/packages/plugin-app/utils/canvas.ts b/packages/plugin-app/utils/canvas.ts index ee247e6f..b282bd1b 100644 --- a/packages/plugin-app/utils/canvas.ts +++ b/packages/plugin-app/utils/canvas.ts @@ -1,4 +1,4 @@ -import type { ReflectSceneNode } from "@design-sdk/core/nodes"; +import type { ReflectSceneNode } from "@design-sdk/figma-node"; export function getPrimarySelectedNode(selection: readonly ReflectSceneNode[]) { // if (){ diff --git a/packages/plugin-sdk-app/plugin-sdk.ts b/packages/plugin-sdk-app/plugin-sdk.ts index b2269dc9..c71c2b09 100644 --- a/packages/plugin-sdk-app/plugin-sdk.ts +++ b/packages/plugin-sdk-app/plugin-sdk.ts @@ -36,7 +36,7 @@ import { target_platform, TargetPlatform, } from "@plugin-sdk/core"; -import type { ReflectSceneNode } from "@design-sdk/core/nodes"; +import type { ReflectSceneNode } from "@design-sdk/figma-node"; import { ASSISTANT_PLUGIN_NAMESPACE__NOCHANGE } from "@core/constant"; import { _SharedStorageCache } from "./_shared-storage-cache"; From 67d324a1df5b2b82727cea426ca8bb3033e5acf1 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sun, 26 Sep 2021 21:11:03 +0900 Subject: [PATCH 121/246] update icon config type imports --- figma-core/event-handlers/create-icon.ts | 4 ++-- figma-core/reflect-render/icons.render/index.ts | 11 +++++------ 2 files changed, 7 insertions(+), 8 deletions(-) diff --git a/figma-core/event-handlers/create-icon.ts b/figma-core/event-handlers/create-icon.ts index fbaf63d6..854ca25d 100644 --- a/figma-core/event-handlers/create-icon.ts +++ b/figma-core/event-handlers/create-icon.ts @@ -1,4 +1,4 @@ -import { IconConfig } from "@reflect-ui/core"; +import { NamedIconConfig } from "@reflect-ui/core"; import { EK_CREATE_ICON, EK_ICON_DRAG_AND_DROPPED } from "@core/constant"; import { PluginSdkService } from "@plugin-sdk/service"; import { IconPlacement, renderSvgIcon } from "../reflect-render/icons.render"; @@ -7,7 +7,7 @@ import { addEventHandler } from "../code-thread"; interface CreateIconProps { key: string; svg: string; - config: IconConfig; + config: NamedIconConfig; } function createIcon( diff --git a/figma-core/reflect-render/icons.render/index.ts b/figma-core/reflect-render/icons.render/index.ts index 18e23c4a..668777c7 100644 --- a/figma-core/reflect-render/icons.render/index.ts +++ b/figma-core/reflect-render/icons.render/index.ts @@ -1,7 +1,6 @@ -// todo - make this universal -import { converters } from "@design-sdk/figma"; +import { reflectColorToFigmaColor } from "@design-sdk/figma-node-conversion"; import { Color } from "@reflect-ui/core/lib/color"; -import { IconConfig } from "@reflect-ui/core/lib/icon/icon.config"; +import { NamedIconConfig } from "@reflect-ui/core"; import { ICON_DEFAULT_SIZE, ICON_MAX_SIZE, @@ -19,7 +18,7 @@ export function renderSvgIcon( data: string, color: Color = "#000000", placement: IconPlacement = "center", - config?: IconConfig + config?: NamedIconConfig ): FrameNode { console.log(`inserting icon with name ${name} and data ${data}`); @@ -63,7 +62,7 @@ export function renderSvgIcon( export function buildReflectIconNameForRender( name: string, - config: IconConfig + config: NamedIconConfig ): string { if (config.host == "material") { return `icons/mdi_${name}`; @@ -90,7 +89,7 @@ export function switchSvgColor( node.fills = [ { type: "SOLID", - color: converters.reflectColorToFigmaColor(sets[0].to), + color: reflectColorToFigmaColor(sets[0].to), }, ]; } From 5d8703f003d2ae4c29aa61bed3582bbc3732f883 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sun, 26 Sep 2021 21:11:28 +0900 Subject: [PATCH 122/246] update color converter use --- figma-core/reflect-render/buttons.render/index.ts | 4 ++-- figma-core/reflect-render/cgrect.render/index.ts | 11 +++++++---- figma-core/reflect-render/text.render/index.ts | 4 ++-- 3 files changed, 11 insertions(+), 8 deletions(-) diff --git a/figma-core/reflect-render/buttons.render/index.ts b/figma-core/reflect-render/buttons.render/index.ts index 1b6eebe6..91335e2e 100644 --- a/figma-core/reflect-render/buttons.render/index.ts +++ b/figma-core/reflect-render/buttons.render/index.ts @@ -1,5 +1,5 @@ import { Color } from "@reflect-ui/core/lib/color"; -import { converters } from "@design-sdk/figma"; +import { reflectColorToFigmaRGB } from "@design-sdk/figma-node-conversion"; import { ButtonColorScheme } from "@reflect-ui/core/lib/theme/color-schemes"; import { BUTTON_COLOR_SCHEMES_SET } from "@reflect.bridged.xyz/ui-generator/lib/seeds/color-schemes/button.color-scheme.seed"; import { BUTTON_TEXTS_SET_EN } from "@reflect.bridged.xyz/ui-generator/lib/seeds"; @@ -188,7 +188,7 @@ function generateRandomBorder(color: Color | undefined): Paint | undefined { return { type: "SOLID", - color: converters.reflectColorToFigmaRGB(color), + color: reflectColorToFigmaRGB(color), visible: chanceBy(0.5), }; } diff --git a/figma-core/reflect-render/cgrect.render/index.ts b/figma-core/reflect-render/cgrect.render/index.ts index 19903926..bdaa0e11 100644 --- a/figma-core/reflect-render/cgrect.render/index.ts +++ b/figma-core/reflect-render/cgrect.render/index.ts @@ -1,4 +1,7 @@ -import { converters } from "@design-sdk/figma"; +import { + reflectColorToFigmaRGBA, + reflectColorToFigmaRGB, +} from "@design-sdk/figma-node-conversion"; import { Color } from "@reflect-ui/core/lib/color"; // his should be repplaced by reflect's `CGRectManifest` when fully constructed @@ -25,7 +28,7 @@ export function renderCgRect( rect.fills = [ { type: "SOLID", - color: converters.reflectColorToFigmaRGB(rectManifest.color), + color: reflectColorToFigmaRGB(rectManifest.color), opacity: 1, }, ]; @@ -47,11 +50,11 @@ export function renderCgRect( ], gradientStops: [ { - color: converters.reflectColorToFigmaRGBA(startColor), + color: reflectColorToFigmaRGBA(startColor), position: 0, }, { - color: converters.reflectColorToFigmaRGBA(endColor), + color: reflectColorToFigmaRGBA(endColor), position: 1, }, ], diff --git a/figma-core/reflect-render/text.render/index.ts b/figma-core/reflect-render/text.render/index.ts index 0b20f5c8..0536fa37 100644 --- a/figma-core/reflect-render/text.render/index.ts +++ b/figma-core/reflect-render/text.render/index.ts @@ -1,4 +1,4 @@ -import { converters } from "@design-sdk/figma"; +import { reflectColorToFigmaColor } from "@design-sdk/figma-node-conversion"; import { Color } from "@reflect-ui/core/lib/color"; // FIXME - this should be repplaced by reflect's `TextManifest` when fully constructed @@ -21,7 +21,7 @@ export function renderText(textManifest: FigmaRenderTextManifest): TextNode { // randomize font size text.fontSize = textManifest.fontSize; - const textColor = converters.reflectColorToFigmaColor(textManifest.color); + const textColor = reflectColorToFigmaColor(textManifest.color); text.fills = [ { From de9deac16162497938891db20c10f12dd734b09f Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sun, 26 Sep 2021 21:11:39 +0900 Subject: [PATCH 123/246] update image repo api --- packages/app-design-to-code/__plugin/index.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/app-design-to-code/__plugin/index.ts b/packages/app-design-to-code/__plugin/index.ts index 67250162..4a915820 100644 --- a/packages/app-design-to-code/__plugin/index.ts +++ b/packages/app-design-to-code/__plugin/index.ts @@ -43,7 +43,9 @@ async function _handle_code_gen_request(req: CodeGenRequest) { const hostingjob = async () => { // host images - const transportableImageAssetRepository = await repo_assets.MainImageRepository.instance.current.makeTransportable(); + const transportableImageAssetRepository = await repo_assets.MainImageRepository.instance + .get("fill-later-assets") + .makeTransportable(); figma.ui.postMessage({ type: EK_IMAGE_ASSET_REPOSITORY_MAP, data: transportableImageAssetRepository, From a131ec0dd228f8dd983635ba873ba6d8c1e273bf Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sun, 26 Sep 2021 21:11:50 +0900 Subject: [PATCH 124/246] update color converter --- .../page-manager/craete-page-if-non-exist.ts | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/figma-core/physical-visual-store/page-manager/craete-page-if-non-exist.ts b/figma-core/physical-visual-store/page-manager/craete-page-if-non-exist.ts index 038f5a14..3718ea7a 100644 --- a/figma-core/physical-visual-store/page-manager/craete-page-if-non-exist.ts +++ b/figma-core/physical-visual-store/page-manager/craete-page-if-non-exist.ts @@ -1,5 +1,6 @@ import { creaateReadme } from "./create-readme"; -import { converters, FigmaColorFormat } from "@design-sdk/figma"; +import { FigmaColorFormat } from "@design-sdk/figma"; +import { reflectColorToFigmaColor } from "@design-sdk/figma-node-conversion"; /** * the empty space is for hiding following text from figma's page hierarchy. @@ -22,10 +23,7 @@ export function createPrimaryVisualStorePageIfNonExists() { page.backgrounds = [ { type: "SOLID", - color: converters.reflectColorToFigmaColor( - "#1E1E1E", - FigmaColorFormat.rgb - ), + color: reflectColorToFigmaColor("#1E1E1E", FigmaColorFormat.rgb), }, ]; From 6e233dda9d9e62b66bf9a8a7dd12f1711787c0d2 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sun, 26 Sep 2021 21:12:11 +0900 Subject: [PATCH 125/246] bump packages; update next config; yarn --- package.json | 2 +- packages/design-sdk | 2 +- packages/design-to-code | 2 +- packages/reflect-core | 2 +- web/next.config.js | 40 +++++++++++++++++++++++++++++++++------- yarn.lock | 2 +- 6 files changed, 38 insertions(+), 12 deletions(-) diff --git a/package.json b/package.json index b3a9d409..3a5b09b5 100644 --- a/package.json +++ b/package.json @@ -22,8 +22,8 @@ "packages/reflect-core/packages/*", "packages/design-to-code/packages/designto-*", "packages/design-to-code/packages/builder-*", + "packages/design-to-code/packages/support-*", "packages/design-to-code/packages/coli/packages/*", - "packages/design-to-code/packages/coli-web-builder/*", "packages/design-to-code/packages/reflect-detection" ] }, diff --git a/packages/design-sdk b/packages/design-sdk index de1c7a72..a318ea99 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit de1c7a72e0cae9d3e19f9160743c20f537116b33 +Subproject commit a318ea99911038487d67fcfe611f7f2b5adf5835 diff --git a/packages/design-to-code b/packages/design-to-code index 4f14db0f..b56cf6c1 160000 --- a/packages/design-to-code +++ b/packages/design-to-code @@ -1 +1 @@ -Subproject commit 4f14db0f0b2793f69b088f8921a394ab84f31d1f +Subproject commit b56cf6c1d107ffb7f1746d37a54b370b35a58099 diff --git a/packages/reflect-core b/packages/reflect-core index 9a0b94a6..e59ff4b4 160000 --- a/packages/reflect-core +++ b/packages/reflect-core @@ -1 +1 @@ -Subproject commit 9a0b94a68cf8fd05bb9a079770d6dcda21e61be3 +Subproject commit e59ff4b4886288459b1a742e6a18c9aa497a3b18 diff --git a/web/next.config.js b/web/next.config.js index a8a6a59c..60cdb3ab 100644 --- a/web/next.config.js +++ b/web/next.config.js @@ -41,13 +41,23 @@ const withTM = require("next-transpile-modules")([ "@plugin-sdk/draggable", "plugin-app", - "@grida/builder-platform-types", + // ----------------------------- + // region @designto-code "@designto/config", + "@grida/builder-config-preset", + "@grida/builder-platform-types", "@designto/code", + "@designto/sanitized", "@designto/token", "@designto/flutter", "@designto/web", + "@designto/vanilla", "@designto/react", + + "@code-features/assets", + // ----------------------------- + + // ----------------------------- // design-sdk "@design-sdk/key-annotations", "@design-sdk/core", @@ -58,9 +68,13 @@ const withTM = require("next-transpile-modules")([ "@design-sdk/figma-xpath", "@design-sdk/url-analysis", "@design-sdk/sketch", - // reflect-ui + // ----------------------------- + + // ----------------------------- + // region @reflect-ui types & utils "@reflect-ui/core", "@reflect-ui/detection", + // ----------------------------- // base sdk "@base-sdk/core", @@ -74,18 +88,30 @@ const withTM = require("next-transpile-modules")([ // baes sdk fp "@base-sdk-fp/auth", + // ----------------------------- // region coli "coli", "@coli.codes/escape-string", - "@coli.codes/web-builder", "@coli.codes/core-syntax-kind", - "@coli.codes/web-builder-core", + // endregion coli + // ----------------------------- + + // ----------------------------- + // region builders - part of designto-code / coli + // region flutter builder + "@bridged.xyz/flutter-builder", + // endregion flutter builder + + // region web builders "@coli.codes/nodejs-builder", - "@coli.codes/react-builder", + "@web-builder/core", + "@web-builder/vanilla", + "@web-builder/react", + "@web-builder/reflect-ui", "@web-builder/styled", "@web-builder/styles", - "@bridged.xyz/flutter-builder", - // endregion coli + // endregion web builders + // ----------------------------- ]); module.exports = withTM(); diff --git a/yarn.lock b/yarn.lock index 6b4740c5..9f95da1f 100644 --- a/yarn.lock +++ b/yarn.lock @@ -13838,7 +13838,7 @@ typescript@4.3.5: resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.3.5.tgz#4d1c37cc16e893973c45a06886b7113234f119f4" integrity sha512-DqQgihaQ9cUrskJo9kIyW/+g0Vxsk8cDtZ52a3NGh0YNTfpUSArXSohyUGnvbPazEPLu398C0UxmKSOrPumUzA== -typescript@^4.0.5, typescript@^4.1.2, typescript@^4.2.3, typescript@^4.2.4, typescript@^4.3.2, typescript@^4.3.5, typescript@^4.4.2: +typescript@^4.0.5, typescript@^4.1.2, typescript@^4.2.4, typescript@^4.3.2, typescript@^4.3.5, typescript@^4.4.2: version "4.4.2" resolved "https://registry.yarnpkg.com/typescript/-/typescript-4.4.2.tgz#6d618640d430e3569a1dfb44f7d7e600ced3ee86" integrity sha512-gzP+t5W4hdy4c+68bfcv0t400HVJMMd2+H9B7gae1nQlBzCqvrXX+6GL/b3GAgyTH966pzrZ70/fRjwAtZksSQ== From 3f87a72155f8d0ba9d0bea42fb11113d0f68524f Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sun, 26 Sep 2021 21:16:18 +0900 Subject: [PATCH 126/246] bump lint --- packages/lint | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/lint b/packages/lint index bcffe9f3..c73cae23 160000 --- a/packages/lint +++ b/packages/lint @@ -1 +1 @@ -Subproject commit bcffe9f34cbb3f0cab0e1bb0140b4962afc698cd +Subproject commit c73cae23836bda7ceeb277a70519ed61acf9db0f From 3193005e0a6f9bff864bbe1933751e0f6b9fe9d7 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sun, 26 Sep 2021 21:50:17 +0900 Subject: [PATCH 127/246] update node type imports from "@design-sdk/figma-node" --- .../footer-action/code-screen-footer.tsx | 2 +- .../footer-action/next-upload-button.tsx | 2 +- packages/app-icons-loader/icons-loader.tsx | 26 ++++++++++++------- .../selection-configurable-layer.coli.ts | 2 +- .../selection-configurable-layer.tsx | 4 +-- .../selection-instance-component.coli.ts | 1 - .../selection-instance-component.tsx | 4 +-- .../by-selection-state/selection-invalid.tsx | 4 +-- .../selection-master-component.coli.ts | 1 - .../selection-master-component.tsx | 4 +-- .../selection-variant-instance.tsx | 4 +-- .../selection-variant-master.tsx | 4 +-- .../selection-variant-set.tsx | 6 ++--- packages/design-sdk | 2 +- packages/reflect-core | 2 +- 15 files changed, 36 insertions(+), 32 deletions(-) diff --git a/packages/app-design-to-code/footer-action/code-screen-footer.tsx b/packages/app-design-to-code/footer-action/code-screen-footer.tsx index ee34d562..2a98d6b1 100644 --- a/packages/app-design-to-code/footer-action/code-screen-footer.tsx +++ b/packages/app-design-to-code/footer-action/code-screen-footer.tsx @@ -5,7 +5,7 @@ import { assistant as analytics } from "@analytics.bridged.xyz/internal"; import { PluginSdk } from "@plugin-sdk/app"; import { preview } from "@app/scene-view"; import { NextUploadButton } from "./next-upload-button"; -import type { ReflectSceneNode } from "@design-sdk/core/nodes"; +import type { ReflectSceneNode } from "@design-sdk/figma-node"; import { Framework } from "@grida/builder-platform-types"; interface ICodeScreenFooter { diff --git a/packages/app-design-to-code/footer-action/next-upload-button.tsx b/packages/app-design-to-code/footer-action/next-upload-button.tsx index 68955dc5..d2c3098c 100644 --- a/packages/app-design-to-code/footer-action/next-upload-button.tsx +++ b/packages/app-design-to-code/footer-action/next-upload-button.tsx @@ -3,7 +3,7 @@ import styled from "@emotion/styled"; import { BlackButtonStyle } from "@ui/core/button-style"; import { registerScene } from "@app/scene-view"; import { PluginSdk } from "@plugin-sdk/app"; -import type { IReflectNodeReference } from "@design-sdk/core/nodes/lignt"; +import type { IReflectNodeReference } from "@design-sdk/figma-node"; import { isAuthenticated } from "@assistant-fp/auth"; import { useHistory } from "react-router-dom"; diff --git a/packages/app-icons-loader/icons-loader.tsx b/packages/app-icons-loader/icons-loader.tsx index 0eae7ecd..1de6bf62 100644 --- a/packages/app-icons-loader/icons-loader.tsx +++ b/packages/app-icons-loader/icons-loader.tsx @@ -1,6 +1,6 @@ import React, { useEffect, useState } from "react"; import { icons } from "@base-sdk/resources"; -import { IconConfig } from "@reflect-ui/core/lib"; +import { NamedDefaultOssIconConfig } from "@reflect-ui/core"; import Tooltip from "@material-ui/core/Tooltip"; import GridList from "@material-ui/core/GridList"; import GridListTile from "@material-ui/core/GridListTile"; @@ -19,12 +19,18 @@ import { assistant as analytics } from "@analytics.bridged.xyz/internal"; import styled from "@emotion/styled"; // cached icons configs -let CONFIGS: Map; +let CONFIGS: Map; export function IconsLoader() { - const [configs, setConfigs] = useState>(undefined); + const [configs, setConfigs] = useState< + Map + >(undefined); const [queryTerm, setQueryTerm] = useState(undefined); const [iconLoadLimit, setIconLoadLimit] = useState(100); - const [iconProperty, setIconProperty] = useState({ + const [iconProperty, setIconProperty] = useState<{ + default_size: string; + variant: string; + host: string; + }>({ default_size: "size", variant: "variant", host: "material", @@ -203,15 +209,15 @@ function IconSearch(props: { } function filterIcons( - configs: Map, + configs: Map, options: { includes?: string; } -): [string, IconConfig][] { +): [string, NamedDefaultOssIconConfig][] { const keys = Object.keys(configs); const defaultIcons = keys - .map<[string, IconConfig]>((k) => { - const item = configs[k] as IconConfig; + .map<[string, NamedDefaultOssIconConfig]>((k) => { + const item = configs[k] as NamedDefaultOssIconConfig; if (options.includes) { if (k.includes(options.includes)) { @@ -227,7 +233,7 @@ function filterIcons( return defaultIcons; } -function IconList(props: { icons: [string, IconConfig][] }) { +function IconList(props: { icons: [string, NamedDefaultOssIconConfig][] }) { const { icons } = props; return ( @@ -247,7 +253,7 @@ function IconList(props: { icons: [string, IconConfig][] }) { ); } -function IconItem(props: { name: string; config: IconConfig }) { +function IconItem(props: { name: string; config: NamedDefaultOssIconConfig }) { const { name, config } = props; const [downloading, setDownloading] = useState(false); diff --git a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.coli.ts b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.coli.ts index 93546890..1d8d8528 100644 --- a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.coli.ts +++ b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.coli.ts @@ -1,5 +1,5 @@ import { NameCases, ScopedVariableNamer } from "@coli.codes/naming"; -import { IReflectNodeReference } from "@design-sdk/core/nodes/lignt"; +import { IReflectNodeReference } from "@design-sdk/figma-node"; import { variant } from "@design-sdk/figma/features"; import { FigmaBoolean, diff --git a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx index cf6cf3c6..001a2531 100644 --- a/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-configurable-layer.tsx @@ -1,7 +1,7 @@ import React, { useEffect, useState } from "react"; import { SingleLayerPropertyDefinition } from "../components/single-property"; import { ISingleLayerProperty, IProperties } from "../types"; -import { nodes } from "@design-sdk/core"; +import * as nodes from "@design-sdk/figma-node"; import { _FigmaVariantPropertyCompatType_to_string } from "@design-sdk/figma/features/variant"; import { nameit, NameCases } from "@coli.codes/naming"; import { CodeBox } from "@ui/codebox"; @@ -18,7 +18,7 @@ import { tsNamer } from "../interface-code-builder/scoped-property-id-namer"; import { CodeStyleWrapper } from "./_shared-components"; import { ISingleLayerPropertyMapping } from "../types/single-layer-property-type"; -export default function (props: { node: nodes.light.IReflectNodeReference }) { +export default function (props: { node: nodes.IReflectNodeReference }) { const { node } = props; const [localProperties, setLocalProperties] = useState([]); diff --git a/packages/app-schema-editor/by-selection-state/selection-instance-component.coli.ts b/packages/app-schema-editor/by-selection-state/selection-instance-component.coli.ts index f18655eb..a8d353a3 100644 --- a/packages/app-schema-editor/by-selection-state/selection-instance-component.coli.ts +++ b/packages/app-schema-editor/by-selection-state/selection-instance-component.coli.ts @@ -1,5 +1,4 @@ import { NameCases, ScopedVariableNamer } from "@coli.codes/naming"; -import { IReflectNodeReference } from "@design-sdk/core/nodes/lignt"; import { variant } from "@design-sdk/figma/features"; import { diff --git a/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx b/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx index 6a4c532f..3ec83206 100644 --- a/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-instance-component.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from "react"; -import { nodes } from "@design-sdk/core"; +import * as nodes from "@design-sdk/figma-node"; import { ISingleLayerProperty } from "../types"; import { NameCases, nameit } from "@coli.codes/naming"; import { MappedPropertyStorage } from "../storage"; @@ -11,7 +11,7 @@ import { stringfy } from "coli"; import { CodeStyleWrapper } from "./_shared-components"; import { SingleLayerPropertyDefinition } from "../components/single-property"; -export default function (props: { node: nodes.light.IReflectNodeReference }) { +export default function (props: { node: nodes.IReflectNodeReference }) { const [properties, setProperties] = useState([]); const master = props.node.mainComponent; diff --git a/packages/app-schema-editor/by-selection-state/selection-invalid.tsx b/packages/app-schema-editor/by-selection-state/selection-invalid.tsx index be9d4e3b..1eb13366 100644 --- a/packages/app-schema-editor/by-selection-state/selection-invalid.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-invalid.tsx @@ -1,10 +1,10 @@ import React from "react"; import { CodeViewWithControl } from "@app/design-to-code/code-view-with-control"; -import { nodes } from "@design-sdk/core"; +import * as nodes from "@design-sdk/figma-node"; import styled from "@emotion/styled"; import Warning from "@assistant/icons/warning"; -export default function (props: { node: nodes.light.IReflectNodeReference }) { +export default function (props: { node: nodes.IReflectNodeReference }) { return ( <> diff --git a/packages/app-schema-editor/by-selection-state/selection-master-component.coli.ts b/packages/app-schema-editor/by-selection-state/selection-master-component.coli.ts index f18655eb..a8d353a3 100644 --- a/packages/app-schema-editor/by-selection-state/selection-master-component.coli.ts +++ b/packages/app-schema-editor/by-selection-state/selection-master-component.coli.ts @@ -1,5 +1,4 @@ import { NameCases, ScopedVariableNamer } from "@coli.codes/naming"; -import { IReflectNodeReference } from "@design-sdk/core/nodes/lignt"; import { variant } from "@design-sdk/figma/features"; import { diff --git a/packages/app-schema-editor/by-selection-state/selection-master-component.tsx b/packages/app-schema-editor/by-selection-state/selection-master-component.tsx index cdac2f7d..504216f5 100644 --- a/packages/app-schema-editor/by-selection-state/selection-master-component.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-master-component.tsx @@ -1,5 +1,5 @@ import React, { useEffect, useState } from "react"; -import { nodes } from "@design-sdk/core"; +import * as nodes from "@design-sdk/figma-node"; import { ISingleLayerProperty } from "../types"; import { NameCases, nameit } from "@coli.codes/naming"; import { MappedPropertyStorage } from "../storage"; @@ -9,7 +9,7 @@ import { tsNamer } from "../interface-code-builder/scoped-property-id-namer"; import { stringfy } from "coli"; import { CodeStyleWrapper } from "./_shared-components"; import { SingleLayerPropertyDefinition } from "../components/single-property"; -export default function (props: { node: nodes.light.IReflectNodeReference }) { +export default function (props: { node: nodes.IReflectNodeReference }) { const { node } = props; const [mappedProperties, setMappedProperties] = useState< ISingleLayerProperty[] diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx index 14befceb..08208a2a 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-instance.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from "react"; -import { nodes } from "@design-sdk/core"; +import * as nodes from "@design-sdk/figma-node"; import { _FigmaVariantPropertyCompatType_to_string, VariantPropertyParser, @@ -19,7 +19,7 @@ import { MappedPropertyStorage } from "../storage"; import { ISingleLayerProperty } from "../types"; import { SingleLayerPropertyDefinition } from "../components/single-property"; -export default function (props: { node: nodes.light.IReflectNodeReference }) { +export default function (props: { node: nodes.IReflectNodeReference }) { const _format_interface_pascal = (n) => { return nameit(n + "-props", { case: NameCases.pascal, diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx index 29fbbe85..7de657cc 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-master.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from "react"; -import { nodes } from "@design-sdk/core"; +import * as nodes from "@design-sdk/figma-node"; import { FigmaNumber, VariantProperty, @@ -17,7 +17,7 @@ import { MappedPropertyStorage } from "../storage"; import { CodeStyleWrapper } from "./_shared-components"; import { SingleLayerPropertyDefinition } from "../components/single-property"; -export default function (props: { node: nodes.light.IReflectNodeReference }) { +export default function (props: { node: nodes.IReflectNodeReference }) { const master = props.node; const [mappedProperties, setMappedProperties] = useState< ISingleLayerProperty[] diff --git a/packages/app-schema-editor/by-selection-state/selection-variant-set.tsx b/packages/app-schema-editor/by-selection-state/selection-variant-set.tsx index 9ec0111c..d30fa0ce 100644 --- a/packages/app-schema-editor/by-selection-state/selection-variant-set.tsx +++ b/packages/app-schema-editor/by-selection-state/selection-variant-set.tsx @@ -1,9 +1,9 @@ import React from "react"; -import { nodes } from "@design-sdk/core"; +import * as nodes from "@design-sdk/figma-node"; export default function (props: { - node?: nodes.light.IReflectNodeReference; - defaultComponent?: nodes.light.IReflectNodeReference; + node?: nodes.IReflectNodeReference; + defaultComponent?: nodes.IReflectNodeReference; }) { // TODO return ( diff --git a/packages/design-sdk b/packages/design-sdk index a318ea99..1840c1f7 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit a318ea99911038487d67fcfe611f7f2b5adf5835 +Subproject commit 1840c1f7754aa52051fe117e97b3c7301f2930ed diff --git a/packages/reflect-core b/packages/reflect-core index e59ff4b4..16545c40 160000 --- a/packages/reflect-core +++ b/packages/reflect-core @@ -1 +1 @@ -Subproject commit e59ff4b4886288459b1a742e6a18c9aa497a3b18 +Subproject commit 16545c402a8474b86eb79c44ca75939309da1130 From 39421d9dd223431a5d5c6b88d7d714e52850ba7e Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sun, 26 Sep 2021 21:58:42 +0900 Subject: [PATCH 128/246] bump base-sdk with updated icon spec --- packages/base-sdk | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/base-sdk b/packages/base-sdk index 9026bf27..e2687318 160000 --- a/packages/base-sdk +++ b/packages/base-sdk @@ -1 +1 @@ -Subproject commit 9026bf27a950015a9440965afd57dd70ce991958 +Subproject commit e2687318b60d11d6a3eb1ec3be1c583fb3dfe837 From a8e1a32f4572f594dbfe59362f1977728d3c90b3 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 27 Sep 2021 00:51:29 +0900 Subject: [PATCH 129/246] add plugin asset provider --- .../__plugin/design-to-code.ts | 20 +++++++++++++++++++ packages/design-to-code | 2 +- 2 files changed, 21 insertions(+), 1 deletion(-) diff --git a/packages/app-design-to-code/__plugin/design-to-code.ts b/packages/app-design-to-code/__plugin/design-to-code.ts index 23c57478..95b414c4 100644 --- a/packages/app-design-to-code/__plugin/design-to-code.ts +++ b/packages/app-design-to-code/__plugin/design-to-code.ts @@ -1,4 +1,9 @@ +import { + ImageRepository, + MainImageRepository, +} from "@design-sdk/core/assets-repository"; import type { ReflectSceneNode } from "@design-sdk/figma-node"; +import { ImageRepositories } from "@design-sdk/figma/asset-repository"; import { flutter, react, token } from "@designto/code"; interface GenerationResultToUI { @@ -7,11 +12,25 @@ interface GenerationResultToUI { app: any; } +function setup_image_repository() { + // ------------------------------------------------------------ + // set image repo for figma platform + MainImageRepository.instance = new ImageRepositories(); + MainImageRepository.instance.register( + new ImageRepository( + "fill-later-assets", + "grida://assets-reservation/images/" + ) + ); + // ------------------------------------------------------------ +} + type InterceptorJobProcessor = () => Promise; export async function designToFlutter( reflectDesign: ReflectSceneNode, jobs: InterceptorJobProcessor ) { + setup_image_repository(); const buildResult = flutter.buildApp(reflectDesign); // execution order matters. @@ -31,6 +50,7 @@ export async function designToFlutter( } export function designToReact(reflectDesign: ReflectSceneNode) { + setup_image_repository(); const tokens = token.tokenize(reflectDesign); const widget = react.buildReactWidget(tokens); const app = react.buildReactApp(widget, { diff --git a/packages/design-to-code b/packages/design-to-code index b56cf6c1..028487cc 160000 --- a/packages/design-to-code +++ b/packages/design-to-code @@ -1 +1 @@ -Subproject commit b56cf6c1d107ffb7f1746d37a54b370b35a58099 +Subproject commit 028487cc7217c0e0441c36fede963658fd879551 From bd90a1231f49b751e2341f65478ceb57cebd07c8 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 27 Sep 2021 01:16:45 +0900 Subject: [PATCH 130/246] bump design to code - resolve flutter image error caused by update --- packages/design-to-code | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/design-to-code b/packages/design-to-code index 028487cc..259c607b 160000 --- a/packages/design-to-code +++ b/packages/design-to-code @@ -1 +1 @@ -Subproject commit 028487cc7217c0e0441c36fede963658fd879551 +Subproject commit 259c607b079addf846cbd024a7a7e9b954c49147 From e17e166f6c597e7fa45c1fd8d198a379ee7afdd3 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Mon, 27 Sep 2021 04:05:38 +0900 Subject: [PATCH 131/246] init runtime vanilla previewer --- packages/design-sdk | 2 +- packages/ui-previewer/index.ts | 2 +- packages/ui-previewer/preview-runtime/README.md | 1 + packages/ui-previewer/preview-runtime/index.tsx | 0 packages/ui-previewer/preview-static/README.md | 1 + .../ui-previewer/{preview.tsx => preview-static/index.tsx} | 4 ++-- 6 files changed, 6 insertions(+), 4 deletions(-) create mode 100644 packages/ui-previewer/preview-runtime/README.md create mode 100644 packages/ui-previewer/preview-runtime/index.tsx create mode 100644 packages/ui-previewer/preview-static/README.md rename packages/ui-previewer/{preview.tsx => preview-static/index.tsx} (97%) diff --git a/packages/design-sdk b/packages/design-sdk index 1840c1f7..d275cc0f 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit 1840c1f7754aa52051fe117e97b3c7301f2930ed +Subproject commit d275cc0fbab92aff9eea83d0c9a6f90658cd65ae diff --git a/packages/ui-previewer/index.ts b/packages/ui-previewer/index.ts index 54b20cb4..38b1b52c 100644 --- a/packages/ui-previewer/index.ts +++ b/packages/ui-previewer/index.ts @@ -1 +1 @@ -export * from "./preview"; +export * from "./preview-static"; diff --git a/packages/ui-previewer/preview-runtime/README.md b/packages/ui-previewer/preview-runtime/README.md new file mode 100644 index 00000000..e34bb23d --- /dev/null +++ b/packages/ui-previewer/preview-runtime/README.md @@ -0,0 +1 @@ +# Preview - Executable web view of the design (vanilla) diff --git a/packages/ui-previewer/preview-runtime/index.tsx b/packages/ui-previewer/preview-runtime/index.tsx new file mode 100644 index 00000000..e69de29b diff --git a/packages/ui-previewer/preview-static/README.md b/packages/ui-previewer/preview-static/README.md new file mode 100644 index 00000000..932b6c29 --- /dev/null +++ b/packages/ui-previewer/preview-static/README.md @@ -0,0 +1 @@ +# Preview - Static image of design diff --git a/packages/ui-previewer/preview.tsx b/packages/ui-previewer/preview-static/index.tsx similarity index 97% rename from packages/ui-previewer/preview.tsx rename to packages/ui-previewer/preview-static/index.tsx index 1047adee..50a84148 100644 --- a/packages/ui-previewer/preview.tsx +++ b/packages/ui-previewer/preview-static/index.tsx @@ -2,10 +2,10 @@ import { Typography, CircularProgress, Fade } from "@material-ui/core"; import React, { useState, useEffect } from "react"; import { EK_CURRENT_SELECTION_PREVIEW_SOURCE_CHANGED } from "@core/constant/ek.constant"; import EmptyIndicatorIcon from "@assistant/icons/empty-indicator-icon"; -import "./preview.css"; +import "../preview.css"; import { PluginSdk } from "@plugin-sdk/app"; import { QuickImageExportPreset } from "@plugin-sdk/core"; -import { PreviewSessionCache } from "./cache"; +import { PreviewSessionCache } from "../cache"; interface Props { auto?: boolean; From 89302014ae36d30ce80770ea25d0d8501ca3a17f Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sun, 3 Oct 2021 22:06:09 +0900 Subject: [PATCH 132/246] bump design to code & flutter builder next config --- .../__plugin/design-to-code.ts | 56 ++++++++++--------- packages/app-design-to-code/__plugin/index.ts | 10 ++-- packages/design-sdk | 2 +- packages/design-to-code | 2 +- packages/reflect-core | 2 +- web/next.config.js | 2 +- yarn.lock | 16 +++--- 7 files changed, 48 insertions(+), 42 deletions(-) diff --git a/packages/app-design-to-code/__plugin/design-to-code.ts b/packages/app-design-to-code/__plugin/design-to-code.ts index 95b414c4..bfd34151 100644 --- a/packages/app-design-to-code/__plugin/design-to-code.ts +++ b/packages/app-design-to-code/__plugin/design-to-code.ts @@ -4,13 +4,16 @@ import { } from "@design-sdk/core/assets-repository"; import type { ReflectSceneNode } from "@design-sdk/figma-node"; import { ImageRepositories } from "@design-sdk/figma/asset-repository"; -import { flutter, react, token } from "@designto/code"; +import { flutter, react, token, vanilla } from "@designto/code"; +import { output, react as react_config } from "@designto/config"; -interface GenerationResultToUI { - tokens?: any; - widget: any; - app: any; -} +// interface GenerationResultToUI { +// tokens?: any; +// widget: any; +// app: any; +// } + +type O = output.ComponentOutput; function setup_image_repository() { // ------------------------------------------------------------ @@ -29,27 +32,21 @@ type InterceptorJobProcessor = () => Promise; export async function designToFlutter( reflectDesign: ReflectSceneNode, jobs: InterceptorJobProcessor -) { +): Promise { setup_image_repository(); - const buildResult = flutter.buildApp(reflectDesign); - + const tokens = token.tokenize(reflectDesign); + const widget = flutter.buildFlutterWidget(tokens); + const app = flutter.buildFlutterApp(widget); // execution order matters. // this will be fixed by having a builder instance. (currently non available) await jobs(); - const widget = buildResult.widget; - const app = flutter.makeApp({ - widget: widget, - scrollable: buildResult.scrollable, - }); - - return { - widget: widget, - app: app, - }; + return app; } -export function designToReact(reflectDesign: ReflectSceneNode) { +export async function designToReact( + reflectDesign: ReflectSceneNode +): Promise { setup_image_repository(); const tokens = token.tokenize(reflectDesign); const widget = react.buildReactWidget(tokens); @@ -57,11 +54,20 @@ export function designToReact(reflectDesign: ReflectSceneNode) { template: "cra", }); - return { - tokens: tokens, - widget: widget, - app: app.code, - }; + await Promise.resolve(); + + return app; +} + +export async function designToVanilla( + reflectDesign: ReflectSceneNode +): Promise { + setup_image_repository(); + const tokens = token.tokenize(reflectDesign); + const widget = vanilla.buildVanillaWidget(tokens); + const app = vanilla.buildVanillaFile(widget); + await Promise.resolve(); + return app; } export function designToCode() { diff --git a/packages/app-design-to-code/__plugin/index.ts b/packages/app-design-to-code/__plugin/index.ts index 4a915820..02c1d61a 100644 --- a/packages/app-design-to-code/__plugin/index.ts +++ b/packages/app-design-to-code/__plugin/index.ts @@ -58,17 +58,17 @@ async function _handle_code_gen_request(req: CodeGenRequest) { figma.ui.postMessage({ type: EK_GENERATED_CODE_PLAIN, data: { - code: flutterBuild.widget.build().finalize(), - app: flutterBuild.app.build().finalize(), + code: flutterBuild.code, + app: flutterBuild.scaffold, }, }); } else if (codePlatform == "react") { - const reactBuild = designToReact(rnode); + const reactBuild = await designToReact(rnode); figma.ui.postMessage({ type: EK_GENERATED_CODE_PLAIN, data: { - code: reactBuild.app, - app: reactBuild.app, + code: reactBuild.code, + app: reactBuild.scaffold, }, }); } diff --git a/packages/design-sdk b/packages/design-sdk index d275cc0f..e5c44a78 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit d275cc0fbab92aff9eea83d0c9a6f90658cd65ae +Subproject commit e5c44a78e91037de20464b783395313ad7796fa6 diff --git a/packages/design-to-code b/packages/design-to-code index 259c607b..c15987fa 160000 --- a/packages/design-to-code +++ b/packages/design-to-code @@ -1 +1 @@ -Subproject commit 259c607b079addf846cbd024a7a7e9b954c49147 +Subproject commit c15987faf961594608a4a111f58cce34ca6dbb92 diff --git a/packages/reflect-core b/packages/reflect-core index 16545c40..a70b73d5 160000 --- a/packages/reflect-core +++ b/packages/reflect-core @@ -1 +1 @@ -Subproject commit 16545c402a8474b86eb79c44ca75939309da1130 +Subproject commit a70b73d564c11f336040a9468abc4aa96e484d99 diff --git a/web/next.config.js b/web/next.config.js index 60cdb3ab..dacf0734 100644 --- a/web/next.config.js +++ b/web/next.config.js @@ -99,7 +99,7 @@ const withTM = require("next-transpile-modules")([ // ----------------------------- // region builders - part of designto-code / coli // region flutter builder - "@bridged.xyz/flutter-builder", + "@flutter-builder/flutter", // endregion flutter builder // region web builders diff --git a/yarn.lock b/yarn.lock index 9f95da1f..f212b998 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1558,14 +1558,6 @@ resolved "https://registry.yarnpkg.com/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39" integrity sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw== -"@bridged.xyz/flutter-builder@^1.23.0-7.0.pre.42": - version "1.23.0-8.0.pre.42" - resolved "https://registry.yarnpkg.com/@bridged.xyz/flutter-builder/-/flutter-builder-1.23.0-8.0.pre.42.tgz#a8b578056198080681803958ccd9be25ff3444fa" - integrity sha512-3sxO7EFeMgeGQylM0r6HjebncDrDD/M+Xfk32Rf9e6L3z1ycxFYPIwUPMcT7j6XOyVQID+CmwMGfTg4B6B/9JQ== - dependencies: - "@abraham/reflection" "^0.8.0" - dart-style "^1.3.2-dev" - "@cnakazawa/watch@^1.0.3": version "1.0.4" resolved "https://registry.yarnpkg.com/@cnakazawa/watch/-/watch-1.0.4.tgz#f864ae85004d0fcab6f50be9141c4da368d1656a" @@ -2087,6 +2079,14 @@ resolved "https://registry.yarnpkg.com/@firebase/webchannel-wrapper/-/webchannel-wrapper-0.4.0.tgz#becce788818d3f47f0ac1a74c3c061ac1dcf4f6d" integrity sha512-8cUA/mg0S+BxIZ72TdZRsXKBP5n5uRcE3k29TZhZw6oIiHBt9JA7CTb/4pE1uKtE/q5NeTY2tBDcagoZ+1zjXQ== +"@flutter-builder/flutter@^2.5.0-f4": + version "2.5.0-f5" + resolved "https://registry.yarnpkg.com/@flutter-builder/flutter/-/flutter-2.5.0-f5.tgz#a0bd7a08ce5fede37d1321234bdca2275f21eb6b" + integrity sha512-PSZzzKMfILttfOh6/btrOUD+d73mmfjoB2kg3VRmnWUufevH8wGkd+4UQv4d0ShCu/uN15ak9GmA26P87zDjHw== + dependencies: + "@abraham/reflection" "^0.8.0" + dart-style "^1.3.2-dev" + "@gar/promisify@^1.0.1": version "1.1.2" resolved "https://registry.yarnpkg.com/@gar/promisify/-/promisify-1.1.2.tgz#30aa825f11d438671d585bd44e7fd564535fc210" From eff1101fcdb117da4b558c551f11876e0935259f Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sun, 3 Oct 2021 22:18:44 +0900 Subject: [PATCH 133/246] update d2c universal interface, update preview uploading as with it. --- .../footer-action/code-screen-footer.tsx | 2 +- .../app-scene-view/_wrapping-for-hosting.ts | 23 +++++++++++++------ packages/app-scene-view/scene-preview.ts | 2 +- packages/design-to-code | 2 +- 4 files changed, 19 insertions(+), 10 deletions(-) diff --git a/packages/app-design-to-code/footer-action/code-screen-footer.tsx b/packages/app-design-to-code/footer-action/code-screen-footer.tsx index 2a98d6b1..25de8fa4 100644 --- a/packages/app-design-to-code/footer-action/code-screen-footer.tsx +++ b/packages/app-design-to-code/footer-action/code-screen-footer.tsx @@ -23,7 +23,7 @@ export function CodeScreenFooter(props: ICodeScreenFooter) { }; setLoadingState(true); - preview("quicklook", props.app) + preview("quicklook", props.app.raw) .then((r) => { setLoadingState(false); PluginSdk.notify("quick look ready !"); diff --git a/packages/app-scene-view/_wrapping-for-hosting.ts b/packages/app-scene-view/_wrapping-for-hosting.ts index 05581eca..969db9cb 100644 --- a/packages/app-scene-view/_wrapping-for-hosting.ts +++ b/packages/app-scene-view/_wrapping-for-hosting.ts @@ -1,19 +1,28 @@ import { repo_assets } from "@design-sdk/core"; -import { composeAppWithHome } from "@bridged.xyz/flutter-builder"; -import { Widget } from "@bridged.xyz/flutter-builder"; +import { composeAppWithHome, Widget } from "@flutter-builder/flutter"; import { hosting, types } from "@base-sdk/base"; +import * as flutter from "@flutter-builder/flutter"; +import { formatCode as formatDart } from "dart-style"; + export async function wrap_with_hosting__flutter( id: string, + // we use finalized string at this point. scene: Widget | string ) { const imagesMaps = await repo_assets.ImageHostingRepository.hostImages(); - const dartSource = composeAppWithHome(scene, { - withReplacements: imagesMaps, - }); + if (scene instanceof flutter.Widget) { + scene = composeAppWithHome(scene, { + withReplacements: imagesMaps, + custom_branding_content: undefined, + }); + } + + // final code formatting - do again even if it's already done. + scene = formatDart(scene).code; // console.info('the final app code for quicklook is...', dartSource) const uploaded = await hosting.upload({ - file: dartSource, + file: scene, name: id, }); const url = uploaded.url; @@ -31,7 +40,7 @@ export async function wrap_with_hosting__flutter( name: "flutter-example", framework: types.AppFramework.flutter, language: types.AppLanguage.dart, - executable: dartSource, + executable: scene, url: url, }; } diff --git a/packages/app-scene-view/scene-preview.ts b/packages/app-scene-view/scene-preview.ts index 8b17c5df..adda8321 100644 --- a/packages/app-scene-view/scene-preview.ts +++ b/packages/app-scene-view/scene-preview.ts @@ -1,4 +1,4 @@ -import { Widget } from "@bridged.xyz/flutter-builder"; +import { Widget } from "@flutter-builder/flutter"; import { features } from "@base-sdk/base"; import { wrap_with_hosting__flutter } from "./_wrapping-for-hosting"; export async function preview(id: string, app: Widget | string) { diff --git a/packages/design-to-code b/packages/design-to-code index c15987fa..626a1bc3 160000 --- a/packages/design-to-code +++ b/packages/design-to-code @@ -1 +1 @@ -Subproject commit c15987faf961594608a4a111f58cce34ca6dbb92 +Subproject commit 626a1bc310dc2578885af74893a4eaf88ca4e7ed From 12f0d1de207e4a7b362c45f515fb4289548147b1 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sun, 3 Oct 2021 22:21:11 +0900 Subject: [PATCH 134/246] update dir name --- .../{preview-runtime => preview-responsive}/README.md | 0 .../{preview-runtime => preview-responsive}/index.tsx | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename packages/ui-previewer/{preview-runtime => preview-responsive}/README.md (100%) rename packages/ui-previewer/{preview-runtime => preview-responsive}/index.tsx (100%) diff --git a/packages/ui-previewer/preview-runtime/README.md b/packages/ui-previewer/preview-responsive/README.md similarity index 100% rename from packages/ui-previewer/preview-runtime/README.md rename to packages/ui-previewer/preview-responsive/README.md diff --git a/packages/ui-previewer/preview-runtime/index.tsx b/packages/ui-previewer/preview-responsive/index.tsx similarity index 100% rename from packages/ui-previewer/preview-runtime/index.tsx rename to packages/ui-previewer/preview-responsive/index.tsx From 2084a133926856d651fe97f78d4d4dc0d7418334 Mon Sep 17 00:00:00 2001 From: softmarshmallow Date: Sun, 3 Oct 2021 23:20:27 +0900 Subject: [PATCH 135/246] implemented non scalling responsive preview --- app/lib/components/upload-steps.tsx | 2 +- .../component-view-screen.tsx | 2 +- .../app-design-to-code/__plugin/events.ts | 3 + packages/app-design-to-code/__plugin/index.ts | 42 ++++++---- packages/app-design-to-code/code-screen.tsx | 9 +- .../code-view-with-control.tsx | 20 +++-- .../property-field-lookup-hover-card.tsx | 2 +- packages/design-sdk | 2 +- packages/design-to-code | 2 +- .../ui-previewer/components/empty-state.tsx | 12 +++ packages/ui-previewer/components/index.ts | 1 + packages/ui-previewer/index.ts | 2 +- .../ui-previewer/preview-responsive/index.tsx | 21 +++++ .../ui-previewer/preview-static/index.tsx | 48 ++--------- packages/ui-previewer/preview.css | 30 ------- packages/ui-previewer/preview/index.tsx | 83 +++++++++++++++++++ 16 files changed, 182 insertions(+), 99 deletions(-) create mode 100644 packages/ui-previewer/components/empty-state.tsx create mode 100644 packages/ui-previewer/components/index.ts delete mode 100644 packages/ui-previewer/preview.css create mode 100644 packages/ui-previewer/preview/index.tsx diff --git a/app/lib/components/upload-steps.tsx b/app/lib/components/upload-steps.tsx index 2134fbc8..185aaf15 100644 --- a/app/lib/components/upload-steps.tsx +++ b/app/lib/components/upload-steps.tsx @@ -42,7 +42,7 @@ export function UploadSteps() { return ( <> - + {isLoading && } {isLoading ? ( diff --git a/packages/app-component-manage/component-view-screen.tsx b/packages/app-component-manage/component-view-screen.tsx index 1f434a96..4e555dce 100644 --- a/packages/app-component-manage/component-view-screen.tsx +++ b/packages/app-component-manage/component-view-screen.tsx @@ -56,7 +56,7 @@ export function ComponentViewScreen() { return (
    - + {/* {selection ? (
    diff --git a/packages/app-design-to-code/__plugin/events.ts b/packages/app-design-to-code/__plugin/events.ts index 59a0a2de..cf20038b 100644 --- a/packages/app-design-to-code/__plugin/events.ts +++ b/packages/app-design-to-code/__plugin/events.ts @@ -7,6 +7,9 @@ export const _APP_EVENT_CODE_GEN_RESULT_EK = "design-to-code-result"; export interface CodeGenRequest { type: "code-gen-request"; option: FrameworkOption; + config: { + do_generate_vanilla_preview_source: boolean; + }; } export type _Code_Event = CodeGenRequest; diff --git a/packages/app-design-to-code/__plugin/index.ts b/packages/app-design-to-code/__plugin/index.ts index 02c1d61a..28dad634 100644 --- a/packages/app-design-to-code/__plugin/index.ts +++ b/packages/app-design-to-code/__plugin/index.ts @@ -8,7 +8,11 @@ import { _APP_EVENT_CODE_GEN_RESULT_EK, CodeGenRequest, } from "./events"; -import { designToFlutter, designToReact } from "./design-to-code"; +import { + designToFlutter, + designToReact, + designToVanilla, +} from "./design-to-code"; import { FigmaNodeCache } from "figma-core/node-cache"; import { Framework } from "@grida/builder-platform-types"; import { repo_assets } from "@design-sdk/core"; @@ -52,24 +56,27 @@ async function _handle_code_gen_request(req: CodeGenRequest) { }); }; - //@ts-ignore + // generate vanilla preview source ------------------ + let vanilla_preview_source; + if (req.config.do_generate_vanilla_preview_source) { + const vanilla_res = await designToVanilla(rnode); + vanilla_preview_source = vanilla_res.scaffold.raw; + } + // -------------------------------------------------- + if (codePlatform == "flutter") { const flutterBuild = await designToFlutter(rnode, hostingjob); - figma.ui.postMessage({ - type: EK_GENERATED_CODE_PLAIN, - data: { - code: flutterBuild.code, - app: flutterBuild.scaffold, - }, + post_cb({ + code: flutterBuild.code, + app: flutterBuild.scaffold, + vanilla_preview_source: vanilla_preview_source, }); } else if (codePlatform == "react") { const reactBuild = await designToReact(rnode); - figma.ui.postMessage({ - type: EK_GENERATED_CODE_PLAIN, - data: { - code: reactBuild.code, - app: reactBuild.scaffold, - }, + post_cb({ + code: reactBuild.code, + app: reactBuild.scaffold, + vanilla_preview_source: vanilla_preview_source, }); } } else { @@ -77,3 +84,10 @@ async function _handle_code_gen_request(req: CodeGenRequest) { } //#endregion } + +function post_cb(data: { code; app; vanilla_preview_source }) { + figma.ui.postMessage({ + type: EK_GENERATED_CODE_PLAIN, + data: data, + }); +} diff --git a/packages/app-design-to-code/code-screen.tsx b/packages/app-design-to-code/code-screen.tsx index cdfdc033..9a7bf408 100644 --- a/packages/app-design-to-code/code-screen.tsx +++ b/packages/app-design-to-code/code-screen.tsx @@ -15,6 +15,10 @@ import { CodeViewWithControl } from "./code-view-with-control"; export function CodeScreen() { const selection = useSingleSelection(); + const [ + vanilla_preview_source, + set_vanilla_preview_source, + ] = useState(); const [source, setSource] = useState(); const [app, setApp] = useState(); const [useroption, setUseroption] = useState(); @@ -47,7 +51,7 @@ export function CodeScreen() { return (
    - + {/* FIXME: add onCopyClicked to code-box */} @@ -66,9 +70,10 @@ export function CodeScreen() { { + onGeneration={(app, src, vanilla_preview_source) => { setApp(app); setSource(src); + set_vanilla_preview_source(vanilla_preview_source); }} onUserOptionsChange={setUseroption} /> diff --git a/packages/app-design-to-code/code-view-with-control.tsx b/packages/app-design-to-code/code-view-with-control.tsx index 382b41e6..d8fd42ae 100644 --- a/packages/app-design-to-code/code-view-with-control.tsx +++ b/packages/app-design-to-code/code-view-with-control.tsx @@ -32,7 +32,11 @@ export function CodeViewWithControl({ targetid: string; editor?: "monaco" | "prism"; onUserOptionsChange?: (options: DesigntoCodeUserOptions) => void; - onGeneration?: (app: string, src: string) => void; + onGeneration?: ( + app: string, + src: string, + vanilla_preview_source?: string + ) => void; customMessages?: string[]; automaticRemoteFormatting?: boolean; disabled?: true; @@ -63,6 +67,9 @@ export function CodeViewWithControl({ fromApp({ type: "code-gen-request", option: useroption, + config: { + do_generate_vanilla_preview_source: true, + }, }); } }, [useroption.framework, targetid]); @@ -93,25 +100,27 @@ export function CodeViewWithControl({ setUseroption(op); }; - const __onGeneration__cb = (app, src) => { + const __onGeneration__cb = (app, src, vanilla_preview_source) => { cacheStore.setCache(src); const _source = typeof src == "string" ? source : src?.raw; - onGeneration?.(app, _source); + onGeneration?.(app, _source, vanilla_preview_source); }; const handleSourceInput = ({ app, code, + vanilla_preview_source, }: { app: string; code: SourceInput; + vanilla_preview_source?: string; }) => { format( app, useroption.language, (s) => { setApp(s); - __onGeneration__cb(s, source); + __onGeneration__cb(s, source, vanilla_preview_source); }, { disable_remote_format: !automaticRemoteFormatting, @@ -125,7 +134,7 @@ export function CodeViewWithControl({ useroption.language, (s) => { setSource(s); - __onGeneration__cb(app, s); + __onGeneration__cb(app, s, vanilla_preview_source); }, { disable_remote_format: !automaticRemoteFormatting, @@ -141,6 +150,7 @@ export function CodeViewWithControl({ handleSourceInput({ app: msg.data.app, code: msg.data.code, + vanilla_preview_source: msg.data.vanilla_preview_source, }); // analytics analytics.event_selection_to_code({ diff --git a/packages/app-schema-editor/components/property-field-lookup-hover-card.tsx b/packages/app-schema-editor/components/property-field-lookup-hover-card.tsx index 8393b5c0..3b963713 100644 --- a/packages/app-schema-editor/components/property-field-lookup-hover-card.tsx +++ b/packages/app-schema-editor/components/property-field-lookup-hover-card.tsx @@ -12,7 +12,7 @@ export function PropertyFieldDocuemntationHoverCard(props: { contents={[ - + {props.layer} diff --git a/packages/design-sdk b/packages/design-sdk index e5c44a78..e005b31e 160000 --- a/packages/design-sdk +++ b/packages/design-sdk @@ -1 +1 @@ -Subproject commit e5c44a78e91037de20464b783395313ad7796fa6 +Subproject commit e005b31e8c48385f92897ea8eac9a535b8467ea6 diff --git a/packages/design-to-code b/packages/design-to-code index 626a1bc3..7c710627 160000 --- a/packages/design-to-code +++ b/packages/design-to-code @@ -1 +1 @@ -Subproject commit 626a1bc310dc2578885af74893a4eaf88ca4e7ed +Subproject commit 7c7106276d2eb582b82b096b629ea81adf20e2c0 diff --git a/packages/ui-previewer/components/empty-state.tsx b/packages/ui-previewer/components/empty-state.tsx new file mode 100644 index 00000000..a7697b33 --- /dev/null +++ b/packages/ui-previewer/components/empty-state.tsx @@ -0,0 +1,12 @@ +import React from "react"; +import EmptyIndicatorIcon from "@assistant/icons/empty-indicator-icon"; +import { Typography } from "@material-ui/core"; + +export function EmptyState({}: {}) { + return ( + <> + + Nothing is selected + + ); +} diff --git a/packages/ui-previewer/components/index.ts b/packages/ui-previewer/components/index.ts new file mode 100644 index 00000000..ce215b7c --- /dev/null +++ b/packages/ui-previewer/components/index.ts @@ -0,0 +1 @@ +export * from "./empty-state"; diff --git a/packages/ui-previewer/index.ts b/packages/ui-previewer/index.ts index 38b1b52c..54b20cb4 100644 --- a/packages/ui-previewer/index.ts +++ b/packages/ui-previewer/index.ts @@ -1 +1 @@ -export * from "./preview-static"; +export * from "./preview"; diff --git a/packages/ui-previewer/preview-responsive/index.tsx b/packages/ui-previewer/preview-responsive/index.tsx index e69de29b..461d439b 100644 --- a/packages/ui-previewer/preview-responsive/index.tsx +++ b/packages/ui-previewer/preview-responsive/index.tsx @@ -0,0 +1,21 @@ +import React from "react"; + +export interface ResponsivePreviewProps { + type: "responsive"; + /** + * the vanilla html code or remote embeddable web url; + */ + data?: string; + /** + * show responsive view of. + */ + of?: string; +} + +export function ResponsivePreview(props: ResponsivePreviewProps) { + return ( + <> +