From f19fa19f15d2b1db0fa1842b5c84c1008b53a1c6 Mon Sep 17 00:00:00 2001 From: Prince Rajpoot Date: Tue, 19 Dec 2023 02:16:11 +0530 Subject: [PATCH 01/37] initial draft --- .../src/components/visualeditor.stories.tsx | 61 ++++++ package-lock.json | 10 +- package.json | 3 +- packages/ui/components/CodeEditor.tsx | 54 ++++++ packages/ui/components/Example.tsx | 12 ++ packages/ui/components/VisualEditor.tsx | 176 ++++++++++++++++++ packages/ui/components/index.tsx | 3 + 7 files changed, 315 insertions(+), 4 deletions(-) create mode 100644 apps/design-system/src/components/visualeditor.stories.tsx create mode 100644 packages/ui/components/CodeEditor.tsx create mode 100644 packages/ui/components/Example.tsx create mode 100644 packages/ui/components/VisualEditor.tsx diff --git a/apps/design-system/src/components/visualeditor.stories.tsx b/apps/design-system/src/components/visualeditor.stories.tsx new file mode 100644 index 000000000..772b0ccc9 --- /dev/null +++ b/apps/design-system/src/components/visualeditor.stories.tsx @@ -0,0 +1,61 @@ +import React, { useState } from 'react'; +import { VisualEditor, CodeEditor, Examples } from '@asyncapi/studio-ui'; + +const meta = { + component: VisualEditor, + parameters: { + layout: 'fullscreen', + backgrounds: { + default: 'light' + } + }, +}; + +export default meta; + +export const WithTabSwitching = () => { + const [activeSystem, setActiveSystem] = useState('vis'); + const [schema, setSchema] = useState('{}'); // Initialize with an empty JSON object + + const handleSchemaChange = (newSchema) => { + setSchema(newSchema); + }; + + const handleSystemClick = (systemKey) => { + setActiveSystem(systemKey); + }; + + return ( +
+
+ + + +
+ {activeSystem === 'vis' && } + {activeSystem === 'code' && } + {activeSystem === 'ex' && } +
+ ); +}; diff --git a/package-lock.json b/package-lock.json index 4b6b0d730..9d2cfc377 100644 --- a/package-lock.json +++ b/package-lock.json @@ -9,7 +9,8 @@ "packages/*" ], "dependencies": { - "@changesets/cli": "^2.26.2" + "@changesets/cli": "^2.26.2", + "lodash": "^4.17.21" }, "devDependencies": { "esbuild": "^0.19.0", @@ -24166,7 +24167,8 @@ }, "node_modules/lodash": { "version": "4.17.21", - "license": "MIT" + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "node_modules/lodash._reinterpolate": { "version": "3.0.0", @@ -50773,7 +50775,9 @@ } }, "lodash": { - "version": "4.17.21" + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" }, "lodash._reinterpolate": { "version": "3.0.0", diff --git a/package.json b/package.json index aad8c86e8..10a8ef57c 100644 --- a/package.json +++ b/package.json @@ -30,6 +30,7 @@ ], "packageManager": "npm@8.19.3", "dependencies": { - "@changesets/cli": "^2.26.2" + "@changesets/cli": "^2.26.2", + "lodash": "^4.17.21" } } diff --git a/packages/ui/components/CodeEditor.tsx b/packages/ui/components/CodeEditor.tsx new file mode 100644 index 000000000..97e8ed5b2 --- /dev/null +++ b/packages/ui/components/CodeEditor.tsx @@ -0,0 +1,54 @@ +import React, { useState, useEffect } from 'react'; +// import { debounce } from 'lodash'; +import debounce from 'lodash/debounce'; + + +interface CodeEditorProps { + schema: string; + onSchemaChange: (newSchema: string) => void; +} + +export const CodeEditor: React.FC = ({ schema, onSchemaChange }) => { + const [value, setValue] = useState(schema); + const [error, setError] = useState(''); + + // Update local state when the incoming schema changes + useEffect(() => { + setValue(schema); + }, [schema]); + + // Debounced change handler to limit the number of updates + const handleChange = debounce((newValue: string) => { + try { + JSON.parse(newValue); // Will throw an error if JSON is invalid + setError(''); + onSchemaChange(newValue); + } catch (e) { + if (e instanceof Error) { + setError(e.message); + } + } + }, 250); + + // Handle text area change event + const handleTextAreaChange = (event: React.ChangeEvent) => { + const newValue = event.target.value; + setValue(newValue); + handleChange(newValue); + }; + + return ( +
+

Code Editor

+ {error &&

Error: {error}

} +