From 6de54884b50d683c74d695a8c13184dc0ce8d3c4 Mon Sep 17 00:00:00 2001
From: BoBoooooo <17746714@qq.com>
Date: Fri, 16 Aug 2024 11:16:39 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20CodeInput=20=E6=94=AF=E6=8C=81=20jsx=20c?=
=?UTF-8?q?ss=20=E4=BB=A3=E7=A0=81=E8=A1=A5=E5=85=A8=20(#198)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* feat: code setter support jsx css completion
* fix: refactor expression css mode
* fix: update story
* fix: revert code
---
apps/playground/src/helpers/prototypes.ts | 3 +
apps/storybook/src/setting-form.stories.tsx | 11 +
apps/storybook/src/ui/input-code.stories.tsx | 6 +-
.../src/setters/expression-setter.tsx | 32 +-
packages/setting-form/src/form-item.tsx | 2 +-
packages/ui/src/index.ts | 1 +
packages/ui/src/input-code.tsx | 2 +-
packages/ui/src/input-style-code.tsx | 99 +++
packages/ui/src/lang/css-object.ts | 602 ++++++++++++++++++
yarn.lock | 31 +-
10 files changed, 778 insertions(+), 11 deletions(-)
create mode 100644 packages/ui/src/input-style-code.tsx
create mode 100644 packages/ui/src/lang/css-object.ts
diff --git a/apps/playground/src/helpers/prototypes.ts b/apps/playground/src/helpers/prototypes.ts
index d8bf7c68..a3a0793a 100644
--- a/apps/playground/src/helpers/prototypes.ts
+++ b/apps/playground/src/helpers/prototypes.ts
@@ -132,6 +132,9 @@ export const nativeDomPrototypes = () => {
title: '样式',
group: 'style',
setter: 'expressionSetter',
+ setterProps: {
+ expressionType: 'cssObject',
+ },
},
{
name: 'className',
diff --git a/apps/storybook/src/setting-form.stories.tsx b/apps/storybook/src/setting-form.stories.tsx
index 030c656a..a1106f09 100644
--- a/apps/storybook/src/setting-form.stories.tsx
+++ b/apps/storybook/src/setting-form.stories.tsx
@@ -69,6 +69,14 @@ const prototypeHasBasicProps: IComponentPrototype = {
title: 'codeSetter',
setter: 'codeSetter',
},
+ {
+ name: 'style',
+ title: 'codeSetter(cssObject)',
+ setter: 'codeSetter',
+ setterProps: {
+ expressionType: 'cssObject',
+ },
+ },
{
name: 'text',
title: 'textSetter',
@@ -268,6 +276,9 @@ export function InitValues() {
name: 'style',
title: 'codeSetter',
setter: 'codeSetter',
+ setterProps: {
+ expressionType: 'cssObject',
+ },
},
{
name: 'object',
diff --git a/apps/storybook/src/ui/input-code.stories.tsx b/apps/storybook/src/ui/input-code.stories.tsx
index ddb2ae42..16a40984 100644
--- a/apps/storybook/src/ui/input-code.stories.tsx
+++ b/apps/storybook/src/ui/input-code.stories.tsx
@@ -1,5 +1,5 @@
import React from 'react';
-import { Action, InputCode } from '@music163/tango-ui';
+import { Action, InputCode, InputStyleCode } from '@music163/tango-ui';
import { BlockOutlined } from '@ant-design/icons';
export default {
@@ -28,6 +28,10 @@ export function Basic() {
);
}
+export function CSS() {
+ return } size="small" />} />;
+}
+
const code = `
function foo() {
console.log("test");
diff --git a/packages/designer/src/setters/expression-setter.tsx b/packages/designer/src/setters/expression-setter.tsx
index e6d8aca2..5c6aeadd 100644
--- a/packages/designer/src/setters/expression-setter.tsx
+++ b/packages/designer/src/setters/expression-setter.tsx
@@ -4,7 +4,15 @@ import { Dropdown, Button } from 'antd';
import { isValidExpressionCode } from '@music163/tango-core';
import { getValue, IVariableTreeNode, noop } from '@music163/tango-helpers';
import { CloseCircleFilled, MenuOutlined } from '@ant-design/icons';
-import { Panel, InputCode, Action, DragPanel, PopOutOutlined } from '@music163/tango-ui';
+import {
+ Panel,
+ InputCode,
+ Action,
+ DragPanel,
+ PopOutOutlined,
+ InputCodeProps,
+ InputStyleCode,
+} from '@music163/tango-ui';
import { FormItemComponentProps } from '@music163/tango-setting-form';
import { useWorkspace, useWorkspaceData } from '@music163/tango-context';
import { VariableTree } from '../components';
@@ -43,6 +51,10 @@ export interface ExpressionSetterProps extends FormItemComponentProps {
autoCompleteOptions?: string[];
allowClear?: boolean;
showOptionsDropDown?: boolean;
+ /**
+ * 表达式类型指定为 css object
+ */
+ expressionType?: 'cssObject';
}
export function ExpressionSetter(props: ExpressionSetterProps) {
@@ -51,12 +63,13 @@ export function ExpressionSetter(props: ExpressionSetterProps) {
modalTitle,
modalTip,
autoCompleteOptions,
- placeholder = '在这里输入JS代码',
+ placeholder = '在这里输入代码',
value: valueProp,
status,
allowClear = true,
newStoreTemplate,
showOptionsDropDown = true,
+ expressionType,
} = props;
// const codeValue = getCodeOfWrappedCode(valueProp);
const [inputValue, setInputValue] = useState(valueProp);
@@ -79,10 +92,12 @@ export function ExpressionSetter(props: ExpressionSetterProps) {
const sandbox = useSandboxQuery();
const evaluateContext = sandbox.window;
+ const InputCodeComponent = expressionType === 'cssObject' ? InputStyleCode : InputCode;
+
return (
{/* 同时支持下拉框展示 */}
-
@@ -121,6 +136,7 @@ export function ExpressionSetter(props: ExpressionSetterProps) {
autoCompleteOptions={autoCompleteOptions}
newStoreTemplate={newStoreTemplate}
value={inputValue}
+ expressionType={expressionType}
onOk={(value) => {
change(value);
}}
@@ -141,7 +157,7 @@ export function ExpressionSetter(props: ExpressionSetterProps) {
);
}
-export interface ExpressionPopoverProps {
+export interface ExpressionPopoverProps extends InputCodeProps {
title?: string;
subTitle?: string;
placeholder?: string;
@@ -154,6 +170,10 @@ export interface ExpressionPopoverProps {
* 新建 store 的模板代码
*/
newStoreTemplate?: string;
+ /**
+ * 表达式类型指定为 css object
+ */
+ expressionType?: 'cssObject';
children?: React.ReactNode;
}
@@ -168,10 +188,12 @@ export function ExpressionPopover({
autoCompleteOptions,
newStoreTemplate = CODE_TEMPLATES.newStoreTemplate,
children,
+ expressionType,
}: ExpressionPopoverProps) {
const [exp, setExp] = useState(value ?? defaultValue);
const [error, setError] = useState('');
const workspace = useWorkspace();
+ const InputCodeComponent = expressionType === 'cssObject' ? InputStyleCode : InputCode;
const selectNodePath = workspace.selectSource.selected[0]?.codeId;
@@ -207,7 +229,7 @@ export function ExpressionPopover({
body={
-
+
) : (
renderSetter({
...expProps,
diff --git a/packages/ui/src/index.ts b/packages/ui/src/index.ts
index 53c02002..7e7833a7 100644
--- a/packages/ui/src/index.ts
+++ b/packages/ui/src/index.ts
@@ -13,6 +13,7 @@ export * from './menu';
export * from './panel';
export * from './toggle-button';
export * from './input-code';
+export * from './input-style-code';
export * from './input-list';
export * from './search';
export * from './json-view';
diff --git a/packages/ui/src/input-code.tsx b/packages/ui/src/input-code.tsx
index 5c5fd817..188e4569 100644
--- a/packages/ui/src/input-code.tsx
+++ b/packages/ui/src/input-code.tsx
@@ -174,7 +174,7 @@ export function InputCode({
);
}
-function useInputCode({
+export function useInputCode({
shape,
status,
showLineNumbers,
diff --git a/packages/ui/src/input-style-code.tsx b/packages/ui/src/input-style-code.tsx
new file mode 100644
index 00000000..a0519e15
--- /dev/null
+++ b/packages/ui/src/input-style-code.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import { Box } from 'coral-system';
+import CodeMirror from '@uiw/react-codemirror';
+import { javascript, javascriptLanguage, esLint } from '@codemirror/lang-javascript';
+import { CompletionContext } from '@codemirror/autocomplete';
+import { syntaxTree } from '@codemirror/language';
+import { linter, lintGutter } from '@codemirror/lint';
+import * as eslint from 'eslint-linter-browserify';
+import { jsxCSSproperties, jsxCSSvalues } from './lang/css-object';
+import type { Completion } from '@codemirror/autocomplete';
+import { InputCodeProps, useInputCode } from './input-code';
+
+const eslintConfig = {
+ parserOptions: {
+ ecmaVersion: 'latest',
+ sourceType: 'module',
+ },
+ env: {
+ browser: true,
+ },
+ rules: {},
+};
+
+function completeProperties(from: number, cssOptions: Completion[] | readonly Completion[]) {
+ return {
+ from,
+ options: cssOptions,
+ validFor: /^[\w$]*$/,
+ };
+}
+
+/**
+ *
+ * @param scope 预测 CSS 的补全上下文
+ * @param customOptions 自定义补全选项列表
+ * @returns
+ */
+function buildAutoComplete() {
+ /**
+ * @see context https://codemirror.net/docs/ref/#autocomplete.CompletionContext
+ */
+ return function (context: CompletionContext) {
+ const nodeBefore = syntaxTree(context.state).resolveInner(context.pos, -1);
+ if (nodeBefore.name === 'VariableName') {
+ // match css property name
+ return completeProperties(nodeBefore.from, jsxCSSproperties());
+ }
+ // match css property value
+ else if (nodeBefore.name === 'String') {
+ return completeProperties(nodeBefore.from + 1, jsxCSSvalues);
+ }
+ return null;
+ };
+}
+
+export type InputStyleCodeProps = Omit<
+ InputCodeProps,
+ 'autoCompleteContext' | 'autoCompleteOptions'
+>;
+
+export function InputStyleCode({
+ shape = 'solid',
+ suffix,
+ status,
+ showLineNumbers,
+ showFoldGutter,
+ enableESLint = false,
+ ...rest
+}: InputStyleCodeProps) {
+ const extensions = [
+ javascript({ jsx: true }),
+ javascriptLanguage.data.of({
+ autocomplete: buildAutoComplete(),
+ }),
+ ];
+ if (enableESLint) {
+ extensions.push(lintGutter(), linter(esLint(new eslint.Linter(), eslintConfig)));
+ }
+ const { rootStyle, codeSetup } = useInputCode({
+ shape,
+ status,
+ showLineNumbers,
+ showFoldGutter,
+ });
+
+ return (
+
+
+
+
+ {suffix}
+
+ );
+}
diff --git a/packages/ui/src/lang/css-object.ts b/packages/ui/src/lang/css-object.ts
new file mode 100644
index 00000000..8bb6b33a
--- /dev/null
+++ b/packages/ui/src/lang/css-object.ts
@@ -0,0 +1,602 @@
+/**
+ * @file: jsx css completion file
+ * @description: fork from https://github.com/codemirror/lang-css/blob/main/src/complete.ts
+ */
+
+import type { Completion } from '@codemirror/autocomplete';
+
+function toCamelCase(input: string): string {
+ return input.replace(/-([a-z])/g, (_, letter) => letter.toUpperCase());
+}
+
+let _properties: readonly Completion[] | null = null;
+
+// inject global css properties
+export function jsxCSSproperties() {
+ if (!_properties && typeof document === 'object' && document.body) {
+ const { style } = document.body;
+ const names = [];
+ const seen = new Set();
+ for (let prop in style)
+ if (prop !== 'cssText' && prop !== 'cssFloat') {
+ if (typeof style[prop] === 'string') {
+ if (/[A-Z]/.test(prop)) prop = prop.replace(/[A-Z]/g, (ch) => `-${ch.toLowerCase()}`);
+ if (!seen.has(prop)) {
+ names.push(prop);
+ seen.add(prop);
+ }
+ }
+ }
+ _properties = names.sort().map((name) => ({ label: toCamelCase(name), type: 'variable' }));
+ }
+ return _properties || [];
+}
+
+export const jsxCSSvalues = [
+ 'above',
+ 'absolute',
+ 'activeborder',
+ 'additive',
+ 'activecaption',
+ 'after-white-space',
+ 'ahead',
+ 'alias',
+ 'all',
+ 'all-scroll',
+ 'alphabetic',
+ 'alternate',
+ 'always',
+ 'antialiased',
+ 'appworkspace',
+ 'asterisks',
+ 'attr',
+ 'auto',
+ 'auto-flow',
+ 'avoid',
+ 'avoid-column',
+ 'avoid-page',
+ 'avoid-region',
+ 'axis-pan',
+ 'background',
+ 'backwards',
+ 'baseline',
+ 'below',
+ 'bidi-override',
+ 'blink',
+ 'block',
+ 'block-axis',
+ 'bold',
+ 'bolder',
+ 'border',
+ 'border-box',
+ 'both',
+ 'bottom',
+ 'break',
+ 'break-all',
+ 'break-word',
+ 'bullets',
+ 'button',
+ 'button-bevel',
+ 'buttonface',
+ 'buttonhighlight',
+ 'buttonshadow',
+ 'buttontext',
+ 'calc',
+ 'capitalize',
+ 'caps-lock-indicator',
+ 'caption',
+ 'captiontext',
+ 'caret',
+ 'cell',
+ 'center',
+ 'checkbox',
+ 'circle',
+ 'cjk-decimal',
+ 'clear',
+ 'clip',
+ 'close-quote',
+ 'col-resize',
+ 'collapse',
+ 'color',
+ 'color-burn',
+ 'color-dodge',
+ 'column',
+ 'column-reverse',
+ 'compact',
+ 'condensed',
+ 'contain',
+ 'content',
+ 'contents',
+ 'content-box',
+ 'context-menu',
+ 'continuous',
+ 'copy',
+ 'counter',
+ 'counters',
+ 'cover',
+ 'crop',
+ 'cross',
+ 'crosshair',
+ 'currentcolor',
+ 'cursive',
+ 'cyclic',
+ 'darken',
+ 'dashed',
+ 'decimal',
+ 'decimal-leading-zero',
+ 'default',
+ 'default-button',
+ 'dense',
+ 'destination-atop',
+ 'destination-in',
+ 'destination-out',
+ 'destination-over',
+ 'difference',
+ 'disc',
+ 'discard',
+ 'disclosure-closed',
+ 'disclosure-open',
+ 'document',
+ 'dot-dash',
+ 'dot-dot-dash',
+ 'dotted',
+ 'double',
+ 'down',
+ 'e-resize',
+ 'ease',
+ 'ease-in',
+ 'ease-in-out',
+ 'ease-out',
+ 'element',
+ 'ellipse',
+ 'ellipsis',
+ 'embed',
+ 'end',
+ 'ethiopic-abegede-gez',
+ 'ethiopic-halehame-aa-er',
+ 'ethiopic-halehame-gez',
+ 'ew-resize',
+ 'exclusion',
+ 'expanded',
+ 'extends',
+ 'extra-condensed',
+ 'extra-expanded',
+ 'fantasy',
+ 'fast',
+ 'fill',
+ 'fill-box',
+ 'fixed',
+ 'flat',
+ 'flex',
+ 'flex-end',
+ 'flex-start',
+ 'footnotes',
+ 'forwards',
+ 'from',
+ 'geometricPrecision',
+ 'graytext',
+ 'grid',
+ 'groove',
+ 'hand',
+ 'hard-light',
+ 'help',
+ 'hidden',
+ 'hide',
+ 'higher',
+ 'highlight',
+ 'highlighttext',
+ 'horizontal',
+ 'hsl',
+ 'hsla',
+ 'hue',
+ 'icon',
+ 'ignore',
+ 'inactiveborder',
+ 'inactivecaption',
+ 'inactivecaptiontext',
+ 'infinite',
+ 'infobackground',
+ 'infotext',
+ 'inherit',
+ 'initial',
+ 'inline',
+ 'inline-axis',
+ 'inline-block',
+ 'inline-flex',
+ 'inline-grid',
+ 'inline-table',
+ 'inset',
+ 'inside',
+ 'intrinsic',
+ 'invert',
+ 'italic',
+ 'justify',
+ 'keep-all',
+ 'landscape',
+ 'large',
+ 'larger',
+ 'left',
+ 'level',
+ 'lighter',
+ 'lighten',
+ 'line-through',
+ 'linear',
+ 'linear-gradient',
+ 'lines',
+ 'list-item',
+ 'listbox',
+ 'listitem',
+ 'local',
+ 'logical',
+ 'loud',
+ 'lower',
+ 'lower-hexadecimal',
+ 'lower-latin',
+ 'lower-norwegian',
+ 'lowercase',
+ 'ltr',
+ 'luminosity',
+ 'manipulation',
+ 'match',
+ 'matrix',
+ 'matrix3d',
+ 'medium',
+ 'menu',
+ 'menutext',
+ 'message-box',
+ 'middle',
+ 'min-intrinsic',
+ 'mix',
+ 'monospace',
+ 'move',
+ 'multiple',
+ 'multiple_mask_images',
+ 'multiply',
+ 'n-resize',
+ 'narrower',
+ 'ne-resize',
+ 'nesw-resize',
+ 'no-close-quote',
+ 'no-drop',
+ 'no-open-quote',
+ 'no-repeat',
+ 'none',
+ 'normal',
+ 'not-allowed',
+ 'nowrap',
+ 'ns-resize',
+ 'numbers',
+ 'numeric',
+ 'nw-resize',
+ 'nwse-resize',
+ 'oblique',
+ 'opacity',
+ 'open-quote',
+ 'optimizeLegibility',
+ 'optimizeSpeed',
+ 'outset',
+ 'outside',
+ 'outside-shape',
+ 'overlay',
+ 'overline',
+ 'padding',
+ 'padding-box',
+ 'painted',
+ 'page',
+ 'paused',
+ 'perspective',
+ 'pinch-zoom',
+ 'plus-darker',
+ 'plus-lighter',
+ 'pointer',
+ 'polygon',
+ 'portrait',
+ 'pre',
+ 'pre-line',
+ 'pre-wrap',
+ 'preserve-3d',
+ 'progress',
+ 'push-button',
+ 'radial-gradient',
+ 'radio',
+ 'read-only',
+ 'read-write',
+ 'read-write-plaintext-only',
+ 'rectangle',
+ 'region',
+ 'relative',
+ 'repeat',
+ 'repeating-linear-gradient',
+ 'repeating-radial-gradient',
+ 'repeat-x',
+ 'repeat-y',
+ 'reset',
+ 'reverse',
+ 'rgb',
+ 'rgba',
+ 'ridge',
+ 'right',
+ 'rotate',
+ 'rotate3d',
+ 'rotateX',
+ 'rotateY',
+ 'rotateZ',
+ 'round',
+ 'row',
+ 'row-resize',
+ 'row-reverse',
+ 'rtl',
+ 'run-in',
+ 'running',
+ 's-resize',
+ 'sans-serif',
+ 'saturation',
+ 'scale',
+ 'scale3d',
+ 'scaleX',
+ 'scaleY',
+ 'scaleZ',
+ 'screen',
+ 'scroll',
+ 'scrollbar',
+ 'scroll-position',
+ 'se-resize',
+ 'self-start',
+ 'self-end',
+ 'semi-condensed',
+ 'semi-expanded',
+ 'separate',
+ 'serif',
+ 'show',
+ 'single',
+ 'skew',
+ 'skewX',
+ 'skewY',
+ 'skip-white-space',
+ 'slide',
+ 'slider-horizontal',
+ 'slider-vertical',
+ 'sliderthumb-horizontal',
+ 'sliderthumb-vertical',
+ 'slow',
+ 'small',
+ 'small-caps',
+ 'small-caption',
+ 'smaller',
+ 'soft-light',
+ 'solid',
+ 'source-atop',
+ 'source-in',
+ 'source-out',
+ 'source-over',
+ 'space',
+ 'space-around',
+ 'space-between',
+ 'space-evenly',
+ 'spell-out',
+ 'square',
+ 'start',
+ 'static',
+ 'status-bar',
+ 'stretch',
+ 'stroke',
+ 'stroke-box',
+ 'sub',
+ 'subpixel-antialiased',
+ 'svg_masks',
+ 'super',
+ 'sw-resize',
+ 'symbolic',
+ 'symbols',
+ 'system-ui',
+ 'table',
+ 'table-caption',
+ 'table-cell',
+ 'table-column',
+ 'table-column-group',
+ 'table-footer-group',
+ 'table-header-group',
+ 'table-row',
+ 'table-row-group',
+ 'text',
+ 'text-bottom',
+ 'text-top',
+ 'textarea',
+ 'textfield',
+ 'thick',
+ 'thin',
+ 'threeddarkshadow',
+ 'threedface',
+ 'threedhighlight',
+ 'threedlightshadow',
+ 'threedshadow',
+ 'to',
+ 'top',
+ 'transform',
+ 'translate',
+ 'translate3d',
+ 'translateX',
+ 'translateY',
+ 'translateZ',
+ 'transparent',
+ 'ultra-condensed',
+ 'ultra-expanded',
+ 'underline',
+ 'unidirectional-pan',
+ 'unset',
+ 'up',
+ 'upper-latin',
+ 'uppercase',
+ 'url',
+ 'var',
+ 'vertical',
+ 'vertical-text',
+ 'view-box',
+ 'visible',
+ 'visibleFill',
+ 'visiblePainted',
+ 'visibleStroke',
+ 'visual',
+ 'w-resize',
+ 'wait',
+ 'wave',
+ 'wider',
+ 'window',
+ 'windowframe',
+ 'windowtext',
+ 'words',
+ 'wrap',
+ 'wrap-reverse',
+ 'x-large',
+ 'x-small',
+ 'xor',
+ 'xx-large',
+ 'xx-small',
+]
+ .map((name) => ({ label: name, type: 'text' }))
+ .concat(
+ [
+ 'aliceblue',
+ 'antiquewhite',
+ 'aqua',
+ 'aquamarine',
+ 'azure',
+ 'beige',
+ 'bisque',
+ 'black',
+ 'blanchedalmond',
+ 'blue',
+ 'blueviolet',
+ 'brown',
+ 'burlywood',
+ 'cadetblue',
+ 'chartreuse',
+ 'chocolate',
+ 'coral',
+ 'cornflowerblue',
+ 'cornsilk',
+ 'crimson',
+ 'cyan',
+ 'darkblue',
+ 'darkcyan',
+ 'darkgoldenrod',
+ 'darkgray',
+ 'darkgreen',
+ 'darkkhaki',
+ 'darkmagenta',
+ 'darkolivegreen',
+ 'darkorange',
+ 'darkorchid',
+ 'darkred',
+ 'darksalmon',
+ 'darkseagreen',
+ 'darkslateblue',
+ 'darkslategray',
+ 'darkturquoise',
+ 'darkviolet',
+ 'deeppink',
+ 'deepskyblue',
+ 'dimgray',
+ 'dodgerblue',
+ 'firebrick',
+ 'floralwhite',
+ 'forestgreen',
+ 'fuchsia',
+ 'gainsboro',
+ 'ghostwhite',
+ 'gold',
+ 'goldenrod',
+ 'gray',
+ 'grey',
+ 'green',
+ 'greenyellow',
+ 'honeydew',
+ 'hotpink',
+ 'indianred',
+ 'indigo',
+ 'ivory',
+ 'khaki',
+ 'lavender',
+ 'lavenderblush',
+ 'lawngreen',
+ 'lemonchiffon',
+ 'lightblue',
+ 'lightcoral',
+ 'lightcyan',
+ 'lightgoldenrodyellow',
+ 'lightgray',
+ 'lightgreen',
+ 'lightpink',
+ 'lightsalmon',
+ 'lightseagreen',
+ 'lightskyblue',
+ 'lightslategray',
+ 'lightsteelblue',
+ 'lightyellow',
+ 'lime',
+ 'limegreen',
+ 'linen',
+ 'magenta',
+ 'maroon',
+ 'mediumaquamarine',
+ 'mediumblue',
+ 'mediumorchid',
+ 'mediumpurple',
+ 'mediumseagreen',
+ 'mediumslateblue',
+ 'mediumspringgreen',
+ 'mediumturquoise',
+ 'mediumvioletred',
+ 'midnightblue',
+ 'mintcream',
+ 'mistyrose',
+ 'moccasin',
+ 'navajowhite',
+ 'navy',
+ 'oldlace',
+ 'olive',
+ 'olivedrab',
+ 'orange',
+ 'orangered',
+ 'orchid',
+ 'palegoldenrod',
+ 'palegreen',
+ 'paleturquoise',
+ 'palevioletred',
+ 'papayawhip',
+ 'peachpuff',
+ 'peru',
+ 'pink',
+ 'plum',
+ 'powderblue',
+ 'purple',
+ 'rebeccapurple',
+ 'red',
+ 'rosybrown',
+ 'royalblue',
+ 'saddlebrown',
+ 'salmon',
+ 'sandybrown',
+ 'seagreen',
+ 'seashell',
+ 'sienna',
+ 'silver',
+ 'skyblue',
+ 'slateblue',
+ 'slategray',
+ 'snow',
+ 'springgreen',
+ 'steelblue',
+ 'tan',
+ 'teal',
+ 'thistle',
+ 'tomato',
+ 'turquoise',
+ 'violet',
+ 'wheat',
+ 'white',
+ 'whitesmoke',
+ 'yellow',
+ 'yellowgreen',
+ ].map((name) => ({ label: name, type: 'text' })),
+ );
diff --git a/yarn.lock b/yarn.lock
index c651b5e6..a6a44e24 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -17697,7 +17697,16 @@ string-length@^4.0.1:
char-regex "^1.0.2"
strip-ansi "^6.0.0"
-"string-width-cjs@npm:string-width@^4.2.0", "string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
+"string-width-cjs@npm:string-width@^4.2.0":
+ version "4.2.3"
+ resolved "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz"
+ integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
+ dependencies:
+ emoji-regex "^8.0.0"
+ is-fullwidth-code-point "^3.0.0"
+ strip-ansi "^6.0.1"
+
+"string-width@^1.0.2 || 2 || 3 || 4", string-width@^4.0.0, string-width@^4.1.0, string-width@^4.2.0, string-width@^4.2.2, string-width@^4.2.3:
version "4.2.3"
resolved "https://registry.npmmirror.com/string-width/-/string-width-4.2.3.tgz"
integrity sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==
@@ -17810,7 +17819,7 @@ string_decoder@~1.1.1:
dependencies:
safe-buffer "~5.1.0"
-"strip-ansi-cjs@npm:strip-ansi@^6.0.1", strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+"strip-ansi-cjs@npm:strip-ansi@^6.0.1":
version "6.0.1"
resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz"
integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
@@ -17824,6 +17833,13 @@ strip-ansi@^3.0.1:
dependencies:
ansi-regex "^2.0.0"
+strip-ansi@^6.0.0, strip-ansi@^6.0.1:
+ version "6.0.1"
+ resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-6.0.1.tgz"
+ integrity sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==
+ dependencies:
+ ansi-regex "^5.0.1"
+
strip-ansi@^7.0.1, strip-ansi@^7.1.0:
version "7.1.0"
resolved "https://registry.npmmirror.com/strip-ansi/-/strip-ansi-7.1.0.tgz"
@@ -19360,7 +19376,7 @@ workerpool@^9.1.1:
resolved "https://registry.npmmirror.com/workerpool/-/workerpool-9.1.1.tgz#9ba4d534a79a5517c1e1b9d1014151516829be8d"
integrity sha512-EFoFTSEo9m4V4wNrwzVRjxnf/E/oBpOzcI/R5CIugJhl9RsCiq525rszo4AtqcjQQoqFdu2E3H82AnbtpaQHvg==
-"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0", wrap-ansi@^7.0.0:
+"wrap-ansi-cjs@npm:wrap-ansi@^7.0.0":
version "7.0.0"
resolved "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
@@ -19378,6 +19394,15 @@ wrap-ansi@^6.0.1:
string-width "^4.1.0"
strip-ansi "^6.0.0"
+wrap-ansi@^7.0.0:
+ version "7.0.0"
+ resolved "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-7.0.0.tgz"
+ integrity sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==
+ dependencies:
+ ansi-styles "^4.0.0"
+ string-width "^4.1.0"
+ strip-ansi "^6.0.0"
+
wrap-ansi@^8.1.0:
version "8.1.0"
resolved "https://registry.npmmirror.com/wrap-ansi/-/wrap-ansi-8.1.0.tgz"