Skip to content

Commit

Permalink
merge master into branch
Browse files Browse the repository at this point in the history
  • Loading branch information
@KhudaDad414
KhudaDad414 committed Jun 11, 2024
1 parent 24e20a9 commit c719e47
Show file tree
Hide file tree
Showing 4 changed files with 99 additions and 84 deletions.
66 changes: 33 additions & 33 deletions packages/ui/components/VisualEditor.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -75,23 +75,19 @@ export const VisualEditor: React.FC<VisualEditorProps> = ({ 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 = () => {
Expand Down Expand Up @@ -154,23 +150,27 @@ export const VisualEditor: React.FC<VisualEditorProps> = ({ schema, onSchemaChan
<div className="flex items-center gap-2">
{renderRootTypeDisplay()}
{renderArrayItemTypeDisplay()}
<DropdownMenu
trigger={
<button>
<IoIosArrowDropdown />
</button>
}
items={rootTypeOptions}
/>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button><IoIosArrowDropdown /></button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>Select Root Type</DropdownMenuItem>
<DropdownMenuSeparator />
{rootTypeOptions.map((menuItem) => (<DropdownMenuItem key={menuItem.title} onSelect={menuItem.onSelect}>{menuItem.title}</DropdownMenuItem>))}
</DropdownMenuContent>
</DropdownMenu>
{schemaObject.type === "array" && (
<DropdownMenu
trigger={
<button>
<IoIosArrowDropdown />
</button>
}
items={itemTypeOptions}
/>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button><IoIosArrowDropdown /> </button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>Select Items Type</DropdownMenuItem>
<DropdownMenuSeparator />
{itemTypeOptions.map((menuItem) => (<DropdownMenuItem key={menuItem.title} onSelect={menuItem.onSelect}>{menuItem.title}</DropdownMenuItem>))}
</DropdownMenuContent>
</DropdownMenu>
)}
</div>
{(schemaObject.type === "object" || (schemaObject.type === "array" && schemaObject.items.type === "object")) && (
Expand All @@ -187,4 +187,4 @@ export const VisualEditor: React.FC<VisualEditorProps> = ({ schema, onSchemaChan
);
};

export default VisualEditor;
export default VisualEditor;
59 changes: 32 additions & 27 deletions packages/ui/components/VisualEditor/PropertyControls.tsx
View file
Original file line number Diff line number Diff line change
@@ -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 {
Expand Down Expand Up @@ -60,23 +60,19 @@ const PropertyControls: React.FC<PropertyControlsProps> = ({ 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 (
Expand Down Expand Up @@ -114,18 +110,27 @@ const PropertyControls: React.FC<PropertyControlsProps> = ({ onAdd, schemaPath,
style={{...inputAndSelectStyle, width: '130px' }}
/>

<DropdownMenu
trigger={<button style={{ ...inputAndSelectStyle, whiteSpace: 'nowrap'}}>{selectedTypes}</button>}
items={typeOptions}
onSelect={(options) => setSelectedTypes(options)}
/>

<DropdownMenu>
<DropdownMenuTrigger>
<button style={{ ...inputAndSelectStyle, whiteSpace: 'nowrap'}}>{selectedTypes}</button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>Select Type</DropdownMenuItem>
<DropdownMenuSeparator />
{typeOptions.map((menuItem) => (<DropdownMenuItem key={menuItem.title} onSelect={menuItem.onSelect}>{menuItem.title}</DropdownMenuItem>))}
</DropdownMenuContent>
</DropdownMenu>
{selectedTypes.includes('array') && (
<DropdownMenu
trigger={<button style={{ ...inputAndSelectStyle, whiteSpace: 'nowrap'}}>{selectedItemTypes}</button>}
items={itemTypeOptions}
onSelect={(options) => setSelectedItemTypes(options)}
/>
<DropdownMenu>
<DropdownMenuTrigger>
<button style={{ ...inputAndSelectStyle, whiteSpace: 'nowrap'}}>{selectedItemTypes}</button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>Select Item Type</DropdownMenuItem>
<DropdownMenuSeparator />
{itemTypeOptions.map((menuItem) => (<DropdownMenuItem key={menuItem.title} onSelect={menuItem.onSelect}>{menuItem.title}</DropdownMenuItem>))}
</DropdownMenuContent>
</DropdownMenu>
)}
<button onClick={handleAddProperty} className='inline-flex items-center justify-center px-2 py-1 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-green-600 hover:bg-green-700 focus:outline-none focus:ring-2 focus:ring-green-500'>Add</button>
<button onClick={handleCancel} className="inline-flex items-center justify-center px-2 py-1 border border-transparent rounded-md shadow-sm text-sm font-medium text-white bg-red-500 hover:bg-red-700 focus:outline-none focus:ring-2 focus:ring-red-500">Cancel</button>
Expand Down
57 changes: 33 additions & 24 deletions packages/ui/components/VisualEditor/SchemaProperty.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down Expand Up @@ -101,23 +101,19 @@ const SchemaProperty: React.FC<SchemaPropertyProps> = ({
handleItemTypeChange({ target: { value: selectedOption } } as React.ChangeEvent<HTMLSelectElement>);
};

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 = () => {
Expand Down Expand Up @@ -254,15 +250,28 @@ const SchemaProperty: React.FC<SchemaPropertyProps> = ({
<strong className="[font-family:'Inter',Helvetica] font-medium text-extendedblue-gray300 pl-2">{name}</strong>
{renderTypeDisplay()}
{renderItemTypeDisplay()}
<DropdownMenu
trigger={<button><IoIosArrowDropdown /></button>}
items={typeOptions}
/>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button><IoIosArrowDropdown /></button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>Select Type</DropdownMenuItem>
<DropdownMenuSeparator />
{ typeOptions.map((option) => (<DropdownMenuItem key={option.title} onSelect={option.onSelect}>{option.title}</DropdownMenuItem>))}
</DropdownMenuContent>
</DropdownMenu>

{schema.type.includes('array') && (
<DropdownMenu
trigger={<button><IoIosArrowDropdown /></button>}
items={itemTypeOptions}
/>
<DropdownMenu>
<DropdownMenuTrigger asChild>
<button><IoIosArrowDropdown /></button>
</DropdownMenuTrigger>
<DropdownMenuContent>
<DropdownMenuItem>Select Item Type</DropdownMenuItem>
<DropdownMenuSeparator />
{itemTypeOptions.map((option) => (<DropdownMenuItem key={option.title} onSelect={option.onSelect}>{option.title}</DropdownMenuItem>))}
</DropdownMenuContent>
</DropdownMenu>
)}
</div>
<div style={{ marginLeft: 'auto' }}>
Expand Down
1 change: 1 addition & 0 deletions packages/ui/tsup.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down

0 comments on commit c719e47

Please sign in to comment.