From f92ea296cd1ecbb55d9217362e135706cdae8895 Mon Sep 17 00:00:00 2001 From: Khuda Dad Nomani Date: Mon, 3 Jun 2024 21:37:38 +0100 Subject: [PATCH 1/4] add the utils package --- packages/utils/package.json | 21 ++++++++++ packages/utils/src/class-names.ts | 6 +++ packages/utils/src/index.ts | 1 + packages/utils/tsconfig.json | 6 +++ packages/utils/tsup.config.ts | 11 ++++++ pnpm-lock.yaml | 64 ++++++++++++++----------------- 6 files changed, 74 insertions(+), 35 deletions(-) create mode 100644 packages/utils/package.json create mode 100644 packages/utils/src/class-names.ts create mode 100644 packages/utils/src/index.ts create mode 100644 packages/utils/tsconfig.json create mode 100644 packages/utils/tsup.config.ts diff --git a/packages/utils/package.json b/packages/utils/package.json new file mode 100644 index 000000000..0563c6eb3 --- /dev/null +++ b/packages/utils/package.json @@ -0,0 +1,21 @@ +{ + "name": "@asyncapi/studio-utils", + "version": "0.0.0", + "description": "Shared utilities for studio.", + "main": "dist/index.js", + "types": "dist/index.d.ts", + "private": true, + "scripts": { + "build": "tsup" + }, + "keywords": [], + "author": "", + "license": "ISC", + "dependencies": { + "clsx": "^2.1.1", + "tailwind-merge": "^2.3.0" + }, + "devDependencies": { + "tsup": "^8.0.2" + } +} diff --git a/packages/utils/src/class-names.ts b/packages/utils/src/class-names.ts new file mode 100644 index 000000000..d32b0fe65 --- /dev/null +++ b/packages/utils/src/class-names.ts @@ -0,0 +1,6 @@ +import { type ClassValue, clsx } from 'clsx' +import { twMerge } from 'tailwind-merge' + +export function cn(...inputs: ClassValue[]) { + return twMerge(clsx(inputs)) +} diff --git a/packages/utils/src/index.ts b/packages/utils/src/index.ts new file mode 100644 index 000000000..77e4c79a8 --- /dev/null +++ b/packages/utils/src/index.ts @@ -0,0 +1 @@ +export { cn } from './class-names' diff --git a/packages/utils/tsconfig.json b/packages/utils/tsconfig.json new file mode 100644 index 000000000..b6307a4dc --- /dev/null +++ b/packages/utils/tsconfig.json @@ -0,0 +1,6 @@ +{ + "exclude": ["dist", "node_modules"], + "compilerOptions": { + "moduleResolution": "Node" + } +} diff --git a/packages/utils/tsup.config.ts b/packages/utils/tsup.config.ts new file mode 100644 index 000000000..fc7547eb2 --- /dev/null +++ b/packages/utils/tsup.config.ts @@ -0,0 +1,11 @@ +import { defineConfig, Options } from 'tsup' + +export default defineConfig((options: Options) => ({ + treeshake: true, + splitting: true, + entry: ['src/index.ts'], + format: ['esm', 'cjs'], + dts: true, + minify: true, + ...options, +})) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 8dce01fa8..4be524057 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -676,6 +676,9 @@ importers: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) devDependencies: + '@asyncapi/studio-utils': + specifier: workspace:* + version: link:../utils '@types/lodash': specifier: ^4.17.0 version: 4.17.1 @@ -701,6 +704,19 @@ importers: specifier: ^4.9.4 version: 4.9.5 + packages/utils: + dependencies: + clsx: + specifier: ^2.1.1 + version: 2.1.1 + tailwind-merge: + specifier: ^2.3.0 + version: 2.3.0 + devDependencies: + tsup: + specifier: ^8.0.2 + version: 8.0.2(postcss@8.4.31)(typescript@4.9.5) + packages: /@adobe/css-tools@4.3.3: @@ -10551,6 +10567,11 @@ packages: resolution: {integrity: sha512-JQHZ2QMW6l3aH/j6xCqQThY/9OH4D/9ls34cgkUBiEeocRTU04tHfKPBsUK1PqZCUQM7GiA0IIXJSuXHI64Kbg==} engines: {node: '>=0.8'} + /clsx@2.1.1: + resolution: {integrity: sha512-eYm0QWBtUrBWZWG0d386OGAw16Z995PiOVo2B7bjWSbHedGl5e0ZWaq65kOGgUSNesEIDkB9ISbTg/JK9dhCZA==} + engines: {node: '>=6'} + dev: false + /co@4.6.0: resolution: {integrity: sha512-QVb0dM5HvG+uaxitm8wONl7jltx8dqhfU33DcqtOZcLSVIKSDDLDi7+0LbAKiyI8hD9u42m2YxXSkMGWThaecQ==} engines: {iojs: '>= 1.0.0', node: '>= 0.12.0'} @@ -12220,7 +12241,6 @@ packages: - eslint-import-resolver-node - eslint-import-resolver-webpack - supports-color - dev: false /eslint-module-utils@2.8.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0): resolution: {integrity: sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==} @@ -12250,36 +12270,6 @@ packages: eslint-import-resolver-typescript: 3.6.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-node@0.3.9)(eslint-plugin-import@2.29.1)(eslint@8.57.0) transitivePeerDependencies: - supports-color - dev: false - - /eslint-module-utils@2.8.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-node@0.3.9)(eslint@8.57.0): - resolution: {integrity: sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==} - engines: {node: '>=4'} - peerDependencies: - '@typescript-eslint/parser': '*' - eslint: '*' - eslint-import-resolver-node: '*' - eslint-import-resolver-typescript: '*' - eslint-import-resolver-webpack: '*' - peerDependenciesMeta: - '@typescript-eslint/parser': - optional: true - eslint: - optional: true - eslint-import-resolver-node: - optional: true - eslint-import-resolver-typescript: - optional: true - eslint-import-resolver-webpack: - optional: true - dependencies: - '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@4.9.5) - debug: 3.2.7 - eslint: 8.57.0 - eslint-import-resolver-node: 0.3.9 - transitivePeerDependencies: - - supports-color - dev: true /eslint-module-utils@2.8.1(@typescript-eslint/parser@7.9.0)(eslint-import-resolver-node@0.3.9)(eslint@8.57.0): resolution: {integrity: sha512-rXDXR3h7cs7dy9RNpUlQf80nX31XWJEyGq1tRMo+6GsO5VmTe4UTwtmonAD4ZkAsrfMVDA2wlGJ3790Ys+D49Q==} @@ -12334,7 +12324,7 @@ packages: '@typescript-eslint/parser': optional: true dependencies: - '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@4.9.5) + '@typescript-eslint/parser': 5.62.0(eslint@8.57.0)(typescript@5.1.6) array-includes: 3.1.8 array.prototype.findlastindex: 1.2.5 array.prototype.flat: 1.3.2 @@ -12343,7 +12333,7 @@ packages: doctrine: 2.1.0 eslint: 8.57.0 eslint-import-resolver-node: 0.3.9 - eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-node@0.3.9)(eslint@8.57.0) + eslint-module-utils: 2.8.1(@typescript-eslint/parser@5.62.0)(eslint-import-resolver-node@0.3.9)(eslint-import-resolver-typescript@3.6.1)(eslint@8.57.0) hasown: 2.0.2 is-core-module: 2.13.1 is-glob: 4.0.3 @@ -13479,7 +13469,6 @@ packages: resolution: {integrity: sha512-ZCuZCnlqNzjb4QprAzXKdpp/gh6KTxSJuw3IBsPnV/7fV4NxC9ckB+vPTt8w7fJA0TaSD7c55BR47JD6MEDyDw==} dependencies: resolve-pkg-maps: 1.0.0 - dev: false /giget@1.2.3: resolution: {integrity: sha512-8EHPljDvs7qKykr6uw8b+lqLiUc/vUg+KVTI0uND4s63TdsZM2Xus3mflvF0DDG9SiM4RlCkFGL+7aAjRmV7KA==} @@ -18991,7 +18980,6 @@ packages: /resolve-pkg-maps@1.0.0: resolution: {integrity: sha512-seS2Tj26TBVOC2NIc2rOe2y2ZO7efxITtLZcGSOnHHNOQ7CkiUBfw0Iw2ck6xkIhPwLhKNLS8BO+hEpngQlqzw==} - dev: false /resolve-url-loader@4.0.0: resolution: {integrity: sha512-05VEMczVREcbtT7Bz+C+96eUO5HDNvdthIiMB34t7FcF8ehcu4wC0sSgPUubs3XW2Q3CNLJk/BJrCU9wVRymiA==} @@ -20013,6 +20001,12 @@ packages: resolution: {integrity: sha512-AsS729u2RHUfEra9xJrE39peJcc2stq2+poBXX8bcM08Y6g9j/i/PUzwNQqkaJde7Ntg1TO7bSREbR5sdosQ+g==} dev: true + /tailwind-merge@2.3.0: + resolution: {integrity: sha512-vkYrLpIP+lgR0tQCG6AP7zZXCTLc1Lnv/CCRT3BqJ9CZ3ui2++GPaGb1x/ILsINIMSYqqvrpqjUFsMNLlW99EA==} + dependencies: + '@babel/runtime': 7.24.5 + dev: false + /tailwindcss@3.3.3(ts-node@10.9.2): resolution: {integrity: sha512-A0KgSkef7eE4Mf+nKJ83i75TMyq8HqY3qmFIJSWy8bNt0v1lG7jUcpGpoTFxAwYcWOphcTBLPPJg+bDfhDf52w==} engines: {node: '>=14.0.0'} From 7cadab6a1bd01ac4227f9e3620917129b9421f65 Mon Sep 17 00:00:00 2001 From: Khuda Dad Nomani Date: Mon, 3 Jun 2024 21:40:28 +0100 Subject: [PATCH 2/4] rafactor dropdown menu --- .../src/components/DropdownMenu.stories.tsx | 49 +++---- packages/ui/components/DropdownMenu.tsx | 129 ++++++++++-------- 2 files changed, 91 insertions(+), 87 deletions(-) diff --git a/apps/design-system/src/components/DropdownMenu.stories.tsx b/apps/design-system/src/components/DropdownMenu.stories.tsx index f103a1111..1408409c1 100644 --- a/apps/design-system/src/components/DropdownMenu.stories.tsx +++ b/apps/design-system/src/components/DropdownMenu.stories.tsx @@ -1,42 +1,31 @@ -import { DropdownMenu } from '@asyncapi/studio-ui' +import React from 'react'; +import { Meta } from '@storybook/react'; +import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger, DropdownMenuItem, DropdownMenuSeparator } from '@asyncapi/studio-ui' -export default { +const meta: Meta = { component: DropdownMenu, parameters: { layout: 'fullscreen', backgrounds: { default: 'dark' } - }, + } } -const items = [ - { - title: 'Import from URL', - onSelect: () => console.log('Import from URL') - }, - { - title: 'Import from file', - onSelect: () => console.log('Import from file') - }, - { - title: 'Import from Base64', - onSelect: () => console.log('Import from Base64') - }, - { - type: 'separator' - }, - { - title: 'Generate code/docs', - onSelect: () => console.log('Generate code/docs') - }, -] +export default meta + export const Default = { - args: { - trigger: , - items, - side: 'bottom', - align: 'start' - } + render: () => ( + + + + + console.log(e.target)}>Import from URL + console.log(e.target)}>Import from file + console.log(e.target)}>Import from Base64 + + console.log(e.target)}>Generate code/docs + + ) } diff --git a/packages/ui/components/DropdownMenu.tsx b/packages/ui/components/DropdownMenu.tsx index 52def607a..69245d9af 100644 --- a/packages/ui/components/DropdownMenu.tsx +++ b/packages/ui/components/DropdownMenu.tsx @@ -1,65 +1,80 @@ -import type { FunctionComponent, ReactNode } from 'react' -import * as RadixDropdownMenu from '@radix-ui/react-dropdown-menu' +"use client" -interface DropdownMenuRegularItem { - type?: 'regular' - title: string - onSelect: () => void -} +import * as React from "react" +import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu" -interface DropdownMenuSeparatorItem { - type: 'separator' -} +import { cn } from "@asyncapi/studio-utils" -export type DropdownMenuItem = DropdownMenuRegularItem | DropdownMenuSeparatorItem +const DropdownMenu = DropdownMenuPrimitive.Root -interface DropdownMenuProps { - trigger: ReactNode - items: DropdownMenuItem[] - side?: 'top' | 'right' | 'bottom' | 'left' - align?: 'start' | 'center' | 'end' -} +const DropdownMenuTrigger = DropdownMenuPrimitive.Trigger -interface DropdownMenuItemComponentProps { - item: DropdownMenuItem -} +const DropdownMenuGroup = DropdownMenuPrimitive.Group + +const DropdownMenuPortal = DropdownMenuPrimitive.Portal + +const DropdownMenuSub = DropdownMenuPrimitive.Sub + +const DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup + + +const DropdownMenuContent = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, sideOffset = 5, ...props }, ref) => ( + + + +)) +DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName + +const DropdownMenuItem = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef & { + inset?: boolean + } +>(({ className, ...props }, ref) => ( + +)) +DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName + + +const DropdownMenuSeparator = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)) +DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName -const DropdownMenuItemComponent: FunctionComponent = ({ item }) => { - return ( - item.type === 'separator' ? ( - - ) : ( - - {item.title} - - ) - ) -} -export const DropdownMenu: FunctionComponent = ({ - trigger, - items, - side, - align, -}) => { - return ( - - - {trigger} - - - - { - items.map((item, index) => ( - - )) - } - - - - - ) +export { + DropdownMenu, + DropdownMenuTrigger, + DropdownMenuContent, + DropdownMenuItem, + DropdownMenuSeparator, + DropdownMenuGroup, + DropdownMenuPortal, + DropdownMenuSub, + DropdownMenuRadioGroup, } From 97fc2e4a0b39628b40e8194f5c10c28930575d41 Mon Sep 17 00:00:00 2001 From: Khuda Dad Nomani Date: Mon, 3 Jun 2024 21:40:43 +0100 Subject: [PATCH 3/4] refactor it's user --- .../src/styles/tailwind.output.css | 36 ++++++++++++++----- packages/ui/components/Toolbar.tsx | 33 +++++++++++------ packages/ui/package.json | 1 + 3 files changed, 52 insertions(+), 18 deletions(-) diff --git a/apps/design-system/src/styles/tailwind.output.css b/apps/design-system/src/styles/tailwind.output.css index 15b242d52..0a66c7bef 100644 --- a/apps/design-system/src/styles/tailwind.output.css +++ b/apps/design-system/src/styles/tailwind.output.css @@ -1,5 +1,5 @@ /* -! tailwindcss v3.3.3 | MIT License | https://tailwindcss.com +! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com */ /* @@ -32,9 +32,11 @@ 4. Use the user's configured `sans` font-family by default. 5. Use the user's configured `sans` font-feature-settings by default. 6. Use the user's configured `sans` font-variation-settings by default. +7. Disable tap highlights on iOS */ -html { +html, +:host { line-height: 1.5; /* 1 */ -webkit-text-size-adjust: 100%; @@ -48,6 +50,8 @@ html { /* 5 */ font-variation-settings: normal; /* 6 */ + -webkit-tap-highlight-color: transparent; + /* 7 */ } /* @@ -119,8 +123,10 @@ strong { } /* -1. Use the user's configured `mono` font family by default. -2. Correct the odd `em` font sizing in all browsers. +1. Use the user's configured `mono` font-family by default. +2. Use the user's configured `mono` font-feature-settings by default. +3. Use the user's configured `mono` font-variation-settings by default. +4. Correct the odd `em` font sizing in all browsers. */ code, @@ -129,8 +135,12 @@ samp, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; /* 1 */ - font-size: 1em; + font-feature-settings: normal; /* 2 */ + font-variation-settings: normal; + /* 3 */ + font-size: 1em; + /* 4 */ } /* @@ -199,6 +209,8 @@ textarea { /* 1 */ line-height: inherit; /* 1 */ + letter-spacing: inherit; + /* 1 */ color: inherit; /* 1 */ margin: 0; @@ -222,9 +234,9 @@ select { */ button, -[type='button'], -[type='reset'], -[type='submit'] { +input:where([type='button']), +input:where([type='reset']), +input:where([type='submit']) { -webkit-appearance: button; /* 1 */ background-color: transparent; @@ -473,6 +485,10 @@ video { --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; } ::backdrop { @@ -523,6 +539,10 @@ video { --tw-backdrop-opacity: ; --tw-backdrop-saturate: ; --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; } .m-3 { diff --git a/packages/ui/components/Toolbar.tsx b/packages/ui/components/Toolbar.tsx index 3b41ab134..3c20f6237 100644 --- a/packages/ui/components/Toolbar.tsx +++ b/packages/ui/components/Toolbar.tsx @@ -1,7 +1,7 @@ import Tooltip from './Tooltip' import * as RadixToolbar from '@radix-ui/react-toolbar' import { FunctionComponent } from 'react' -import { DropdownMenu, DropdownMenuItem } from './DropdownMenu' +import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from './DropdownMenu' interface ToolbarToggleItem { type: 'toggle' @@ -31,10 +31,21 @@ interface ToolbarSeparatorItem { type: 'separator' } +interface DropdownMenuRegularItem { + type?: 'regular' + title: string + onSelect: () => void +} + +interface DropdownMenuSeparatorItem { + type: 'separator' +} + +type DropdownMenuItemInterface = DropdownMenuRegularItem | DropdownMenuSeparatorItem interface ToolbarDropdownMenuItem { type: 'dropdownMenu', icon: FunctionComponent - items: DropdownMenuItem[] + items: DropdownMenuItemInterface[] } type ToolbarItem = ToolbarToggleItem | ToolbarToggleGroupSingleItem | ToolbarToggleGroupMultipleItem | ToolbarSeparatorItem | ToolbarDropdownMenuItem @@ -117,17 +128,19 @@ const ToolbarItem: FunctionComponent = ({ item }) => { ) } else if (type === 'dropdownMenu') { return ( - + - } - items={item.items} - side="bottom" - align="end" - /> - + + + {item.items.map((menuItem) => ( + menuItem.type === 'separator' ? : + {menuItem.title} + ))} + + ) } throw new Error(`Unsupported type of Toolbar item: ${type}`) diff --git a/packages/ui/package.json b/packages/ui/package.json index ac3a5c139..f6b53e03d 100644 --- a/packages/ui/package.json +++ b/packages/ui/package.json @@ -39,6 +39,7 @@ "eslint-config-custom": "workspace:*", "postcss": "^8.4.31", "tailwind-config": "workspace:*", + "@asyncapi/studio-utils": "workspace:*", "tsconfig": "workspace:*", "tsup": "^8.0.2", "typescript": "^4.9.4" From c719e4743de281c76d2386fa594f02cbe8311a9e Mon Sep 17 00:00:00 2001 From: Khuda Dad Nomani Date: Tue, 11 Jun 2024 12:25:46 +0100 Subject: [PATCH 4/4] merge master into branch --- packages/ui/components/VisualEditor.tsx | 66 +++++++++---------- .../VisualEditor/PropertyControls.tsx | 59 +++++++++-------- .../VisualEditor/SchemaProperty.tsx | 57 +++++++++------- packages/ui/tsup.config.ts | 1 + 4 files changed, 99 insertions(+), 84 deletions(-) diff --git a/packages/ui/components/VisualEditor.tsx b/packages/ui/components/VisualEditor.tsx index 42e93a5e2..e68e07d7b 100644 --- a/packages/ui/components/VisualEditor.tsx +++ b/packages/ui/components/VisualEditor.tsx @@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react'; import SchemaObject from './VisualEditor/SchemaObject'; import _ from 'lodash'; import { getColorForType } from './VisualEditor/SchemaProperty'; -import { DropdownMenu, DropdownMenuItem } from './DropdownMenu'; +import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from './DropdownMenu'; import { IoIosArrowDropdown } from 'react-icons/io'; interface VisualEditorProps { @@ -75,23 +75,19 @@ export const VisualEditor: React.FC = ({ schema, onSchemaChan handleSchemaChange({ items: schemaObject.items ? { ...schemaObject.items, type: selectedOption } : { type: selectedOption } }); }; - const rootTypeOptions: DropdownMenuItem[] = [ - { title: 'Select Root Type',onSelect: () => {}}, - { type: 'separator'}, - { type: 'regular', title: 'Object', onSelect: () => handleRootTypeDropdownSelect('object') }, - { type: 'regular', title: 'Array', onSelect: () => handleRootTypeDropdownSelect('array') }, - { type: 'regular', title: 'String', onSelect: () => handleRootTypeDropdownSelect('string') }, - { type: 'regular', title: 'Number', onSelect: () => handleRootTypeDropdownSelect('number') }, - { type: 'regular', title: 'Boolean', onSelect: () => handleRootTypeDropdownSelect('boolean') }, + const rootTypeOptions = [ + { title: 'Object', onSelect: () => handleRootTypeDropdownSelect('object') }, + { title: 'Array', onSelect: () => handleRootTypeDropdownSelect('array') }, + { title: 'String', onSelect: () => handleRootTypeDropdownSelect('string') }, + { title: 'Number', onSelect: () => handleRootTypeDropdownSelect('number') }, + { title: 'Boolean', onSelect: () => handleRootTypeDropdownSelect('boolean') }, ]; - const itemTypeOptions: DropdownMenuItem[] = [ - { title: 'Select Items Type',onSelect: () => {}}, - { type: 'separator'}, - { type: 'regular', title: 'String', onSelect: () => handleArrayItemTypeDropdownSelect('string') }, - { type: 'regular', title: 'Number', onSelect: () => handleArrayItemTypeDropdownSelect('number') }, - { type: 'regular', title: 'Boolean', onSelect: () => handleArrayItemTypeDropdownSelect('boolean') }, - { type: 'regular', title: 'Object', onSelect: () => handleArrayItemTypeDropdownSelect('object') }, + const itemTypeOptions = [ + { title: 'String', onSelect: () => handleArrayItemTypeDropdownSelect('string') }, + { title: 'Number', onSelect: () => handleArrayItemTypeDropdownSelect('number') }, + { title: 'Boolean', onSelect: () => handleArrayItemTypeDropdownSelect('boolean') }, + { title: 'Object', onSelect: () => handleArrayItemTypeDropdownSelect('object') }, ]; const renderRootTypeDisplay = () => { @@ -154,23 +150,27 @@ export const VisualEditor: React.FC = ({ schema, onSchemaChan
{renderRootTypeDisplay()} {renderArrayItemTypeDisplay()} - - - - } - items={rootTypeOptions} - /> + + + + + + Select Root Type + + {rootTypeOptions.map((menuItem) => ({menuItem.title}))} + + {schemaObject.type === "array" && ( - - - - } - items={itemTypeOptions} - /> + + + + + + Select Items Type + + {itemTypeOptions.map((menuItem) => ({menuItem.title}))} + + )}
{(schemaObject.type === "object" || (schemaObject.type === "array" && schemaObject.items.type === "object")) && ( @@ -187,4 +187,4 @@ export const VisualEditor: React.FC = ({ schema, onSchemaChan ); }; -export default VisualEditor; \ No newline at end of file +export default VisualEditor; diff --git a/packages/ui/components/VisualEditor/PropertyControls.tsx b/packages/ui/components/VisualEditor/PropertyControls.tsx index 3aa758efc..eb91cc82b 100644 --- a/packages/ui/components/VisualEditor/PropertyControls.tsx +++ b/packages/ui/components/VisualEditor/PropertyControls.tsx @@ -1,6 +1,6 @@ import React, { useState } from 'react'; import _ from 'lodash'; -import { DropdownMenu, DropdownMenuItem } from '../DropdownMenu'; +import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '../DropdownMenu'; import { AddIcon } from '../icons'; interface PropertyControlsProps { @@ -60,23 +60,19 @@ const PropertyControls: React.FC = ({ onAdd, schemaPath, setShowInputs(false); }; - const typeOptions: DropdownMenuItem[] = [ - { title: 'Select Type',onSelect: () => {}}, - { type: 'separator'}, - { type: 'regular', title: 'String', onSelect: () => setSelectedTypes(['string']) }, - { type: 'regular', title: 'Number', onSelect: () => setSelectedTypes(['number']) }, - { type: 'regular', title: 'Boolean', onSelect: () => setSelectedTypes(['boolean']) }, - { type: 'regular', title: 'Object', onSelect: () => setSelectedTypes(['object']) }, - { type: 'regular', title: 'Array', onSelect: () => setSelectedTypes(['array']) }, + const typeOptions = [ + { title: 'String', onSelect: () => setSelectedTypes(['string']) }, + { title: 'Number', onSelect: () => setSelectedTypes(['number']) }, + { title: 'Boolean', onSelect: () => setSelectedTypes(['boolean']) }, + { title: 'Object', onSelect: () => setSelectedTypes(['object']) }, + { title: 'Array', onSelect: () => setSelectedTypes(['array']) }, ]; - const itemTypeOptions: DropdownMenuItem[] = [ - { title: 'Select Item Type',onSelect: () => {}}, - { type: 'separator'}, - { type: 'regular', title: 'String', onSelect: () => setSelectedItemTypes(['string']) }, - { type: 'regular', title: 'Number', onSelect: () => setSelectedItemTypes(['number']) }, - { type: 'regular', title: 'Boolean', onSelect: () => setSelectedItemTypes(['boolean']) }, - { type: 'regular', title: 'Object', onSelect: () => setSelectedItemTypes(['object']) }, + const itemTypeOptions = [ + { title: 'String', onSelect: () => setSelectedItemTypes(['string']) }, + { title: 'Number', onSelect: () => setSelectedItemTypes(['number']) }, + { title: 'Boolean', onSelect: () => setSelectedItemTypes(['boolean']) }, + { title: 'Object', onSelect: () => setSelectedItemTypes(['object']) }, ]; return ( @@ -114,18 +110,27 @@ const PropertyControls: React.FC = ({ onAdd, schemaPath, style={{...inputAndSelectStyle, width: '130px' }} /> - {selectedTypes}} - items={typeOptions} - onSelect={(options) => setSelectedTypes(options)} - /> - + + + + + + Select Type + + {typeOptions.map((menuItem) => ({menuItem.title}))} + + {selectedTypes.includes('array') && ( - {selectedItemTypes}} - items={itemTypeOptions} - onSelect={(options) => setSelectedItemTypes(options)} - /> + + + + + + Select Item Type + + {itemTypeOptions.map((menuItem) => ({menuItem.title}))} + + )} diff --git a/packages/ui/components/VisualEditor/SchemaProperty.tsx b/packages/ui/components/VisualEditor/SchemaProperty.tsx index 29f2fc15c..b1bfaa0d3 100644 --- a/packages/ui/components/VisualEditor/SchemaProperty.tsx +++ b/packages/ui/components/VisualEditor/SchemaProperty.tsx @@ -2,7 +2,7 @@ import React, { useState } from 'react'; import _ from 'lodash'; import PropertyControls from './PropertyControls'; import { RequiredIcon, NotRequiredIcon, TrashIcon } from '../icons'; -import { DropdownMenu, DropdownMenuItem } from '../DropdownMenu'; +import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuSeparator, DropdownMenuTrigger } from '../DropdownMenu'; import { IoIosArrowDropdown } from "react-icons/io"; interface SchemaPropertyProps { @@ -101,23 +101,19 @@ const SchemaProperty: React.FC = ({ handleItemTypeChange({ target: { value: selectedOption } } as React.ChangeEvent); }; - const typeOptions: DropdownMenuItem[] = [ - { title: 'Select Type',onSelect: () => {}}, - { type: 'separator'}, - { type: 'regular', title: 'String', onSelect: () => handleTypeDropdownSelect('string') }, - { type: 'regular', title: 'Number', onSelect: () => handleTypeDropdownSelect('number') }, - { type: 'regular', title: 'Boolean', onSelect: () => handleTypeDropdownSelect('boolean') }, - { type: 'regular', title: 'Object', onSelect: () => handleTypeDropdownSelect('object') }, - { type: 'regular', title: 'Array', onSelect: () => handleTypeDropdownSelect('array') }, + const typeOptions = [ + { title: 'String', onSelect: () => handleTypeDropdownSelect('string') }, + { title: 'Number', onSelect: () => handleTypeDropdownSelect('number') }, + { title: 'Boolean', onSelect: () => handleTypeDropdownSelect('boolean') }, + { title: 'Object', onSelect: () => handleTypeDropdownSelect('object') }, + { title: 'Array', onSelect: () => handleTypeDropdownSelect('array') }, ]; - const itemTypeOptions: DropdownMenuItem[] = [ - { title: 'Select Item Type',onSelect: () => {}}, - { type: 'separator'}, - { type: 'regular', title: 'String', onSelect: () => handleItemTypeDropdownSelect('string') }, - { type: 'regular', title: 'Number', onSelect: () => handleItemTypeDropdownSelect('number') }, - { type: 'regular', title: 'Boolean', onSelect: () => handleItemTypeDropdownSelect('boolean') }, - { type: 'regular', title: 'Object', onSelect: () => handleItemTypeDropdownSelect('object') }, + const itemTypeOptions = [ + { title: 'String', onSelect: () => handleItemTypeDropdownSelect('string') }, + { title: 'Number', onSelect: () => handleItemTypeDropdownSelect('number') }, + { title: 'Boolean', onSelect: () => handleItemTypeDropdownSelect('boolean') }, + { title: 'Object', onSelect: () => handleItemTypeDropdownSelect('object') }, ]; const handleRemove = () => { @@ -254,15 +250,28 @@ const SchemaProperty: React.FC = ({ {name} {renderTypeDisplay()} {renderItemTypeDisplay()} - } - items={typeOptions} - /> + + + + + + Select Type + + { typeOptions.map((option) => ({option.title}))} + + + {schema.type.includes('array') && ( - } - items={itemTypeOptions} - /> + + + + + + Select Item Type + + {itemTypeOptions.map((option) => ({option.title}))} + + )}
diff --git a/packages/ui/tsup.config.ts b/packages/ui/tsup.config.ts index 0a3c45207..d355484c4 100644 --- a/packages/ui/tsup.config.ts +++ b/packages/ui/tsup.config.ts @@ -3,6 +3,7 @@ import { defineConfig, Options } from 'tsup' export default defineConfig((options: Options) => ({ treeshake: true, splitting: true, + sourcemap: true, entry: ['components/**/*.tsx'], format: ['esm', 'cjs'], dts: true,