Add stories for dataformat, expression and inline editor

packages/ui-tests/stories/Canvas.stories.tsx → packages/ui-tests/stories/canvas/Canvas.stories.tsx

@@ -14,7 +14,7 @@ import {
   pipeJson,
 } from '@kaoto-next/ui/testing';
 import { Meta, StoryFn } from '@storybook/react';
-import complexRouteMock from '../cypress/fixtures/complexRouteMock.json';
+import complexRouteMock from '../../cypress/fixtures/complexRouteMock.json';
 
 const emptyPipeJson = {
   apiVersion: 'camel.apache.org/v1',

packages/ui-tests/stories/CanvasSideBar.stories.tsx → packages/ui-tests/stories/canvas/CanvasSideBar.stories.tsx

@@ -80,7 +80,7 @@ const unknownSelectedNode: CanvasNode = {
 };
 
 export default {
-  title: 'Components/CanvasSideBar',
+  title: 'Canvas/CanvasSideBar',
   component: CanvasSideBar,
 } as Meta<typeof CanvasSideBar>;
 

packages/ui-tests/stories/ContextToolbar.stories.tsx → packages/ui-tests/stories/canvas/ContextToolbar.stories.tsx

@@ -10,7 +10,7 @@ import {
 } from '@kaoto-next/ui/testing';
 import { Divider, Toolbar, ToolbarContent, ToolbarGroup } from '@patternfly/react-core';
 import { Meta, StoryFn } from '@storybook/react';
-import camelRouteMock from '../cypress/fixtures/camelRouteMock.json';
+import camelRouteMock from '../../cypress/fixtures/camelRouteMock.json';
 
 const EntitiesContextDecorator = (Story: StoryFn) => (
   <SourceCodeContext.Provider value={{ sourceCode: '', setCodeAndNotify: () => {} }}>
@@ -29,7 +29,7 @@ const EntitiesContextDecorator = (Story: StoryFn) => (
 );
 
 export default {
-  title: 'Components/ContextToolbar',
+  title: 'Canvas/ContextToolbar',
   component: ContextToolbar,
   decorators: [EntitiesContextDecorator],
   parameters: {

packages/ui-tests/stories/canvas/InlineEdit.stories.tsx

@@ -0,0 +1,35 @@
+import { InlineEdit } from '@kaoto-next/ui';
+import { Card, CardBody, CardFooter, CardTitle } from '@patternfly/react-core';
+import { Meta, StoryFn } from '@storybook/react';
+import { useState } from 'react';
+
+export default {
+  title: 'Canvas/InlineEdit',
+  component: InlineEdit,
+  decorators: [
+    (Story: StoryFn) => (
+      <div style={{ margin: '3em' }}>
+        <Story />
+      </div>
+    ),
+  ],
+  argTypes: {},
+} as Meta<typeof InlineEdit>;
+
+const Template: StoryFn<typeof InlineEdit> = (args) => {
+  const [localValue, setLocalValue] = useState(args.value);
+
+  return (
+    <Card>
+      <CardTitle>Inline Edit</CardTitle>
+      <CardBody>
+        <InlineEdit {...args} value={args.value ?? localValue} onChange={args.onChange ?? setLocalValue} />
+      </CardBody>
+      <CardFooter></CardFooter>
+    </Card>
+  );
+};
+export const Default = Template.bind({});
+Default.args = {
+  value: 'This is an editable text',
+};

packages/ui-tests/stories/Catalog.stories.tsx → packages/ui-tests/stories/catalog/Catalog.stories.tsx

@@ -1,6 +1,6 @@
 import { Catalog, ITile } from '@kaoto-next/ui';
 import { Meta, StoryFn } from '@storybook/react';
-import catalog from '../cypress/fixtures/catalog-slim.json';
+import catalog from '../../cypress/fixtures/catalog-slim.json';
 
 export default {
   title: 'Catalog/Catalog',

packages/ui-tests/stories/PropertiesModal.stories.tsx → packages/ui-tests/stories/catalog/PropertiesModal.stories.tsx

@@ -1,10 +1,10 @@
 import { ITile, PropertiesModal } from '@kaoto-next/ui';
 import { Meta, StoryFn } from '@storybook/react';
 import { useState } from 'react';
-import aggregate from '../cypress/fixtures/aggregate.json';
-import cronSource from '../cypress/fixtures/cronSource.json';
-import activeMq from '../cypress/fixtures/activeMq.json';
-import box from '../cypress/fixtures/box.json';
+import aggregate from '../../cypress/fixtures/aggregate.json';
+import cronSource from '../../cypress/fixtures/cronSource.json';
+import activeMq from '../../cypress/fixtures/activeMq.json';
+import box from '../../cypress/fixtures/box.json';
 
 export default {
   title: 'Components/PropertiesModal',

packages/ui-tests/stories/BeanEditor.stories.tsx → packages/ui-tests/stories/metadataEditor/BeanEditor.stories.tsx

@@ -1,11 +1,11 @@
 import { MetadataEditor } from '@kaoto-next/ui';
 import { Meta, StoryFn } from '@storybook/react';
 
-import mockSchema from '../cypress/fixtures/metadata/beansSchema.json';
-import mockModel from '../cypress/fixtures/metadata/beansModel.json';
+import mockSchema from '../../cypress/fixtures/metadata/beansSchema.json';
+import mockModel from '../../cypress/fixtures/metadata/beansModel.json';
 
 export default {
-  title: 'Components/BeanEditor',
+  title: 'MetadataEditor/BeanEditor',
   component: MetadataEditor,
 } as Meta<typeof MetadataEditor>;
 

packages/ui-tests/stories/metadataEditor/DataformatEditor.stories.tsx

@@ -0,0 +1,63 @@
+import { DataFormatEditor, MetadataEditor } from '@kaoto-next/ui';
+import {
+  CatalogLoaderProvider,
+  CatalogSchemaLoader,
+  IVisualizationNode,
+  SchemasLoaderProvider,
+  VisualComponentSchema,
+} from '@kaoto-next/ui/testing';
+import { Meta, StoryFn } from '@storybook/react';
+import { JSONSchemaType } from 'ajv';
+import { CanvasNode } from './../canvas.models';
+
+const visualComponentSchema: VisualComponentSchema = {
+  title: 'My Node',
+  schema: {
+    type: 'object',
+    properties: {
+      name: {
+        type: 'string',
+      },
+    },
+  } as unknown as JSONSchemaType<unknown>,
+  definition: {
+    name: 'my node',
+  },
+};
+
+const mockNode: CanvasNode = {
+  id: '1',
+  type: 'node',
+  data: {
+    vizNode: {
+      getComponentSchema: () => visualComponentSchema,
+      updateModel: (_value: unknown) => {},
+    } as IVisualizationNode,
+  },
+};
+
+const EntitiesContextDecorator = (Story: StoryFn) => (
+  <SchemasLoaderProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
+    <CatalogLoaderProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
+      <Story />
+    </CatalogLoaderProvider>
+  </SchemasLoaderProvider>
+);
+
+export default {
+  title: 'MetadataEditor/DataFormatEditor',
+  component: DataFormatEditor,
+  decorators: [EntitiesContextDecorator],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta<typeof DataFormatEditor>;
+
+const Template: StoryFn<typeof MetadataEditor> = (args: CanvasNode) => {
+  return <DataFormatEditor {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  selectedNode: mockNode,
+};

packages/ui-tests/stories/ErrorHandler.stories.tsx → packages/ui-tests/stories/metadataEditor/ErrorHandler.stories.tsx

@@ -1,10 +1,10 @@
 import { MetadataEditor } from '@kaoto-next/ui';
 import { Meta, StoryFn } from '@storybook/react';
 
-import errorHandler from '../cypress/fixtures/metadata/errorHandlerSchema.json';
+import errorHandler from '../../cypress/fixtures/metadata/errorHandlerSchema.json';
 
 export default {
-  title: 'Components/ErrorHandler',
+  title: 'MetadataEditor/ErrorHandler',
   component: MetadataEditor,
 } as Meta<typeof MetadataEditor>;
 

packages/ui-tests/stories/metadataEditor/ExpressionEditor.stories.tsx

@@ -0,0 +1,62 @@
+import { ExpressionEditor, MetadataEditor } from '@kaoto-next/ui';
+import {
+  CatalogLoaderProvider,
+  CatalogSchemaLoader,
+  IVisualizationNode,
+  SchemasLoaderProvider,
+  VisualComponentSchema,
+} from '@kaoto-next/ui/testing';
+import { Meta, StoryFn } from '@storybook/react';
+import { JSONSchemaType } from 'ajv';
+import { CanvasNode } from './../canvas.models';
+
+const visualComponentSchema: VisualComponentSchema = {
+  title: 'My Node',
+  schema: {
+    type: 'object',
+    properties: {
+      name: {
+        type: 'string',
+      },
+    },
+  } as unknown as JSONSchemaType<unknown>,
+  definition: {
+    name: 'my node',
+  },
+};
+
+const mockNode: CanvasNode = {
+  id: '1',
+  type: 'node',
+  data: {
+    vizNode: {
+      getComponentSchema: () => visualComponentSchema,
+    } as IVisualizationNode,
+  },
+};
+
+const EntitiesContextDecorator = (Story: StoryFn) => (
+  <SchemasLoaderProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
+    <CatalogLoaderProvider catalogUrl={CatalogSchemaLoader.DEFAULT_CATALOG_PATH}>
+      <Story />
+    </CatalogLoaderProvider>
+  </SchemasLoaderProvider>
+);
+
+export default {
+  title: 'MetadataEditor/ExpressionEditor',
+  component: ExpressionEditor,
+  decorators: [EntitiesContextDecorator],
+  parameters: {
+    layout: 'fullscreen',
+  },
+} as Meta<typeof ExpressionEditor>;
+
+const Template: StoryFn<typeof MetadataEditor> = (args: CanvasNode) => {
+  return <ExpressionEditor {...args} />;
+};
+
+export const Default = Template.bind({});
+Default.args = {
+  selectedNode: mockNode,
+};

packages/ui-tests/stories/MetadataEditor.stories.tsx → packages/ui-tests/stories/metadataEditor/MetadataEditor.stories.tsx

@@ -1,11 +1,11 @@
 import { MetadataEditor } from '@kaoto-next/ui';
 import { Meta, StoryFn } from '@storybook/react';
 
-import mockSchema from '../cypress/fixtures/metadata/metadataSchema.json';
-import mockModel from '../cypress/fixtures/metadata/metadataModel.json';
+import mockSchema from '../../cypress/fixtures/metadata/metadataSchema.json';
+import mockModel from '../../cypress/fixtures/metadata/metadataModel.json';
 
 export default {
-  title: 'Components/MetadataEditor',
+  title: 'MetadataEditor/MetadataEditor',
   component: MetadataEditor,
 } as Meta<typeof MetadataEditor>;
 

packages/ui/src/components/Visualization/Canvas/index.ts

@@ -1,2 +1,5 @@
 export * from './Canvas';
 export * from './CanvasSideBar';
+export * from './DataFormatEditor';
+export * from './ExpressionEditor';
+export * from './canvas.models';

packages/ui/src/public-api.ts

@@ -1,5 +1,6 @@
 /** Public components */
 export * from './components/Catalog';
+export * from './components/InlineEdit';
 export * from './components/PropertiesModal';
 export * from './components/Visualization';
 export * from './components/Visualization/Canvas';