From 3e277ce16e14185174801285e1afe132aaf1fb20 Mon Sep 17 00:00:00 2001
From: Michael Behrisch <m.behrisch@uu.nl>
Date: Tue, 29 Mar 2022 16:56:16 +0200
Subject: [PATCH] fix(storybook): :ambulance: adds babel config for module
resolution of util projects
The storyboard TS config was not having any babelrc information
required for the external module resolution (with a package.json)
---
apps/web-graphpolaris/.storybook/.babelrc | 1 +
apps/web-graphpolaris/.storybook/main.js | 4 +
.../web-graphpolaris/.storybook/tsconfig.json | 7 +-
.../src/components/schema/schema.spec.ts | 332 ++++++++++++++++++
.../src/components/schema/schema.stories.tsx | 55 ++-
.../mock-data/src/schema/mock-data.spec.ts | 24 +-
.../mock-data/src/schema/moviesSchemaRaw.ts | 9 +-
.../src/schema/northwindSchemaRaw.ts | 9 +-
libs/shared/mock-data/src/schema/simpleRaw.ts | 6 +-
.../mock-data/src/schema/twitterSchemaRaw.ts | 9 +-
libs/shared/mock-data/tsconfig.spec.json | 2 +-
.../schema-utils/src/lib/schema-utils.ts | 2 +
12 files changed, 428 insertions(+), 32 deletions(-)
create mode 100644 apps/web-graphpolaris/.storybook/.babelrc
create mode 100644 apps/web-graphpolaris/src/components/schema/schema.spec.ts
diff --git a/apps/web-graphpolaris/.storybook/.babelrc b/apps/web-graphpolaris/.storybook/.babelrc
new file mode 100644
index 000000000..0f9784732
--- /dev/null
+++ b/apps/web-graphpolaris/.storybook/.babelrc
@@ -0,0 +1 @@
+{ "extends": "../.babelrc" }
diff --git a/apps/web-graphpolaris/.storybook/main.js b/apps/web-graphpolaris/.storybook/main.js
index 530fe3a06..02ada9181 100644
--- a/apps/web-graphpolaris/.storybook/main.js
+++ b/apps/web-graphpolaris/.storybook/main.js
@@ -28,4 +28,8 @@ module.exports = {
return config;
},
+ babel: async (options) => ({
+ ...options,
+ // any extra options you want to set
+ }),
};
diff --git a/apps/web-graphpolaris/.storybook/tsconfig.json b/apps/web-graphpolaris/.storybook/tsconfig.json
index 7a1170995..675184366 100644
--- a/apps/web-graphpolaris/.storybook/tsconfig.json
+++ b/apps/web-graphpolaris/.storybook/tsconfig.json
@@ -1,7 +1,7 @@
{
"extends": "../tsconfig.json",
"compilerOptions": {
- "emitDecoratorMetadata": true,
+ "emitDecoratorMetadata": false,
"outDir": ""
},
"files": [
@@ -14,6 +14,7 @@
"../**/*.spec.js",
"../**/*.spec.tsx",
"../**/*.spec.jsx"
- ],
- "include": ["../src/**/*", "*.js"]
+ ]
+ // ,
+ // "include": ["../src/**/*", "*.js"]
}
diff --git a/apps/web-graphpolaris/src/components/schema/schema.spec.ts b/apps/web-graphpolaris/src/components/schema/schema.spec.ts
new file mode 100644
index 000000000..fb4137980
--- /dev/null
+++ b/apps/web-graphpolaris/src/components/schema/schema.spec.ts
@@ -0,0 +1,332 @@
+import { SchemaUtils } from '@graphpolaris/schema-utils';
+import { SchemaFromBackend } from '@graphpolaris/models';
+
+
+const twitterSchemaRaw: SchemaFromBackend = {
+ nodes: [
+ {
+ name: 'Me',
+ attributes: [
+ {
+ name: 'screen_name',
+ type: 'string',
+ },
+ {
+ name: 'name',
+ type: 'string',
+ },
+ {
+ name: 'location',
+ type: 'string',
+ },
+ {
+ name: 'followers',
+ type: 'int',
+ },
+ {
+ name: 'following',
+ type: 'int',
+ },
+ {
+ name: 'url',
+ type: 'string',
+ },
+ {
+ name: 'profile_image_url',
+ type: 'string',
+ },
+ ],
+ },
+ {
+ name: 'Link',
+ attributes: [
+ {
+ name: 'url',
+ type: 'string',
+ },
+ ],
+ },
+ {
+ name: 'Source',
+ attributes: [
+ {
+ name: 'name',
+ type: 'string',
+ },
+ ],
+ },
+ {
+ name: 'Hashtag',
+ attributes: [
+ {
+ name: 'name',
+ type: 'string',
+ },
+ ],
+ },
+ {
+ name: 'User',
+ attributes: [
+ {
+ name: 'screen_name',
+ type: 'string',
+ },
+ {
+ name: 'name',
+ type: 'string',
+ },
+ {
+ name: 'location',
+ type: 'string',
+ },
+ {
+ name: 'followers',
+ type: 'int',
+ },
+ {
+ name: 'following',
+ type: 'int',
+ },
+ {
+ name: 'url',
+ type: 'string',
+ },
+ {
+ name: 'profile_image_url',
+ type: 'string',
+ },
+ {
+ name: 'screen_name',
+ type: 'string',
+ },
+ {
+ name: 'name',
+ type: 'string',
+ },
+ {
+ name: 'location',
+ type: 'string',
+ },
+ {
+ name: 'followers',
+ type: 'int',
+ },
+ {
+ name: 'following',
+ type: 'int',
+ },
+ {
+ name: 'statuses',
+ type: 'int',
+ },
+ {
+ name: 'url',
+ type: 'string',
+ },
+ {
+ name: 'profile_image_url',
+ type: 'string',
+ },
+ ],
+ },
+ {
+ name: 'Tweet',
+ attributes: [
+ {
+ name: 'id',
+ type: 'int',
+ },
+ {
+ name: 'id_str',
+ type: 'string',
+ },
+ {
+ name: 'text',
+ type: 'string',
+ },
+ {
+ name: 'favorites',
+ type: 'int',
+ },
+ {
+ name: 'import_method',
+ type: 'string',
+ },
+ ],
+ },
+ ],
+ edges: [
+ {
+ name: 'USING',
+ collection: 'USING',
+ from: 'Tweet',
+ to: 'Source',
+ attributes: [],
+ },
+ {
+ name: 'SIMILAR_TO',
+ collection: 'SIMILAR_TO',
+ from: 'User',
+ to: 'User',
+ attributes: [
+ {
+ name: 'score',
+ type: 'float',
+ },
+ ],
+ },
+ {
+ name: 'SIMILAR_TO',
+ collection: 'SIMILAR_TO',
+ from: 'User',
+ to: 'Me',
+ attributes: [
+ {
+ name: 'score',
+ type: 'float',
+ },
+ ],
+ },
+ {
+ name: 'AMPLIFIES',
+ collection: 'AMPLIFIES',
+ from: 'Me',
+ to: 'User',
+ attributes: [],
+ },
+ {
+ name: 'AMPLIFIES',
+ collection: 'AMPLIFIES',
+ from: 'User',
+ to: 'User',
+ attributes: [],
+ },
+ {
+ name: 'RT_MENTIONS',
+ collection: 'RT_MENTIONS',
+ from: 'Me',
+ to: 'User',
+ attributes: [],
+ },
+ {
+ name: 'RT_MENTIONS',
+ collection: 'RT_MENTIONS',
+ from: 'User',
+ to: 'User',
+ attributes: [],
+ },
+ {
+ name: 'FOLLOWS',
+ collection: 'FOLLOWS',
+ from: 'User',
+ to: 'Me',
+ attributes: [],
+ },
+ {
+ name: 'FOLLOWS',
+ collection: 'FOLLOWS',
+ from: 'Me',
+ to: 'User',
+ attributes: [],
+ },
+ {
+ name: 'FOLLOWS',
+ collection: 'FOLLOWS',
+ from: 'User',
+ to: 'User',
+ attributes: [],
+ },
+ {
+ name: 'FOLLOWS',
+ collection: 'FOLLOWS',
+ from: 'Me',
+ to: 'Me',
+ attributes: [],
+ },
+ {
+ name: 'INTERACTS_WITH',
+ collection: 'INTERACTS_WITH',
+ from: 'User',
+ to: 'User',
+ attributes: [],
+ },
+ {
+ name: 'INTERACTS_WITH',
+ collection: 'INTERACTS_WITH',
+ from: 'Me',
+ to: 'User',
+ attributes: [],
+ },
+ {
+ name: 'RETWEETS',
+ collection: 'RETWEETS',
+ from: 'Tweet',
+ to: 'Tweet',
+ attributes: [],
+ },
+ {
+ name: 'REPLY_TO',
+ collection: 'REPLY_TO',
+ from: 'Tweet',
+ to: 'Tweet',
+ attributes: [],
+ },
+ {
+ name: 'CONTAINS',
+ collection: 'CONTAINS',
+ from: 'Tweet',
+ to: 'Link',
+ attributes: [],
+ },
+ {
+ name: 'MENTIONS',
+ collection: 'MENTIONS',
+ from: 'Tweet',
+ to: 'User',
+ attributes: [],
+ },
+ {
+ name: 'MENTIONS',
+ collection: 'MENTIONS',
+ from: 'Tweet',
+ to: 'Me',
+ attributes: [],
+ },
+ {
+ name: 'TAGS',
+ collection: 'TAGS',
+ from: 'Tweet',
+ to: 'Hashtag',
+ attributes: [],
+ },
+ {
+ name: 'POSTS',
+ collection: 'POSTS',
+ from: 'User',
+ to: 'Tweet',
+ attributes: [],
+ },
+ {
+ name: 'POSTS',
+ collection: 'POSTS',
+ from: 'Me',
+ to: 'Tweet',
+ attributes: [],
+ },
+ ],
+};
+
+const twitterSchema =
+ SchemaUtils.ParseSchemaFromBackend(twitterSchemaRaw);
+
+
+
+
+
+ describe('import tests', () => {
+ it('should resolve all imports appropriately for _external_ libs @graphpolaris/schema-utils and @graphpolaris/model ', () => {
+ const graph = twitterSchema;
+ expect(graph);
+ });
+
+ });
\ No newline at end of file
diff --git a/apps/web-graphpolaris/src/components/schema/schema.stories.tsx b/apps/web-graphpolaris/src/components/schema/schema.stories.tsx
index 873afdf6b..e274a1585 100644
--- a/apps/web-graphpolaris/src/components/schema/schema.stories.tsx
+++ b/apps/web-graphpolaris/src/components/schema/schema.stories.tsx
@@ -11,6 +11,17 @@ import React from 'react';
import { Provider } from 'react-redux';
import Schema from './schema';
+import {
+ movieSchemaRaw,
+ northwindSchemaRaw,
+ simpleSchemaRaw,
+ twitterSchemaRaw,
+ movieSchema,
+ northWindSchema,
+ simpleSchema,
+ twitterSchema,
+} from '@graphpolaris/shared/mock-data';
+
export default {
/* 👇 The title prop is optional.
* See https://storybook.js.org/docs/react/configure/overview#configure-story-loading
@@ -146,5 +157,47 @@ TestWithSchema.play = async () => {
console.info('dispatch dummy schema', schema.order);
dispatch(setSchema(schema.export()));
- // handleSchemaLayout(schema);
};
+
+export const TestWithMockNorthWindSchema = Template.bind({});
+
+TestWithMockNorthWindSchema.play = async () => {
+ const dispatch = Mockstore.dispatch;
+
+ const schema = northWindSchema;
+ console.info('dispatch northWindSchema schema', schema.order);
+ dispatch(setSchema(schema.export()));
+};
+
+export const TestWithMockTwitterSchema = Template.bind({});
+
+TestWithMockTwitterSchema.play = async () => {
+ const dispatch = Mockstore.dispatch;
+
+ const schema = twitterSchema;
+ console.info('dispatch TestWithMockTwitterSchema schema', schema.order);
+ dispatch(setSchema(schema.export()));
+};
+
+
+
+export const TestWithMockSimpleSchema = Template.bind({});
+
+TestWithMockSimpleSchema.play = async () => {
+ const dispatch = Mockstore.dispatch;
+
+ const schema = simpleSchema;
+ console.info('dispatch simpleSchema schema', schema.order);
+ dispatch(setSchema(schema.export()));
+};
+
+
+export const TestWithMockMovieSchema = Template.bind({});
+
+TestWithMockMovieSchema.play = async () => {
+ const dispatch = Mockstore.dispatch;
+
+ const schema = movieSchema;
+ console.info('dispatch movieSchema schema', schema.order);
+ dispatch(setSchema(schema.export()));
+};
\ No newline at end of file
diff --git a/libs/shared/mock-data/src/schema/mock-data.spec.ts b/libs/shared/mock-data/src/schema/mock-data.spec.ts
index f86e6d316..7aa1fa576 100644
--- a/libs/shared/mock-data/src/schema/mock-data.spec.ts
+++ b/libs/shared/mock-data/src/schema/mock-data.spec.ts
@@ -1,8 +1,8 @@
import Graph from 'graphology';
-import { movieSchemaRaw, movieSchema } from './moviesSchemaRaw';
-import { northWindSchema, northwindSchemaRaw } from './northwindSchemaRaw';
-import { simpleSchema, simpleSchemaRaw } from './simpleRaw';
-import { twitterSchema, twitterSchemaRaw } from './twitterSchemaRaw';
+import { movieSchemaRaw, movieSchema } from '..';
+import { northWindSchema, northwindSchemaRaw } from '..';
+import { simpleSchema, simpleSchemaRaw } from '..';
+import { twitterSchema, twitterSchemaRaw } from '..';
describe('MockData Tests', () => {
it('should have raw data available movie', () => {
@@ -29,27 +29,35 @@ describe('MockData Tests', () => {
const graph = movieSchema;
expect(graph);
- expect(graph.constructor.name.toLowerCase().indexOf('graph') != -1).toBeTruthy();
+ expect(
+ graph.constructor.name.toLowerCase().indexOf('graph') != -1
+ ).toBeTruthy();
});
it('should have data available as graphology model northwind', () => {
const graph = northWindSchema;
expect(graph);
- expect(graph.constructor.name.toLowerCase().indexOf('graph') != -1).toBeTruthy();
+ expect(
+ graph.constructor.name.toLowerCase().indexOf('graph') != -1
+ ).toBeTruthy();
});
it('should have data available as graphology model simpleSchemaRaw', () => {
const graph = simpleSchema;
expect(graph);
- expect(graph.constructor.name.toLowerCase().indexOf('graph') != -1).toBeTruthy();
+ expect(
+ graph.constructor.name.toLowerCase().indexOf('graph') != -1
+ ).toBeTruthy();
});
it('should have data available as graphology model twitterSchemaRaw', () => {
const graph = twitterSchema;
expect(graph);
- expect(graph.constructor.name.toLowerCase().indexOf('graph') != -1).toBeTruthy();
+ expect(
+ graph.constructor.name.toLowerCase().indexOf('graph') != -1
+ ).toBeTruthy();
});
});
diff --git a/libs/shared/mock-data/src/schema/moviesSchemaRaw.ts b/libs/shared/mock-data/src/schema/moviesSchemaRaw.ts
index 762bce33c..678ff5fcf 100644
--- a/libs/shared/mock-data/src/schema/moviesSchemaRaw.ts
+++ b/libs/shared/mock-data/src/schema/moviesSchemaRaw.ts
@@ -1,7 +1,7 @@
import { SchemaUtils } from '@graphpolaris/schema-utils';
-import { SchemaFromBackend } from 'libs/shared/models/src';
+import { SchemaFromBackend } from '@graphpolaris/models';
-export const movieSchemaRaw = {
+export const movieSchemaRaw: SchemaFromBackend = {
nodes: [
{
name: 'Movie',
@@ -98,6 +98,5 @@ export const movieSchemaRaw = {
],
};
-export const movieSchema = SchemaUtils.ParseSchemaFromBackend(
- movieSchemaRaw as SchemaFromBackend
-);
+export const movieSchema = SchemaUtils.ParseSchemaFromBackend(movieSchemaRaw);
+
diff --git a/libs/shared/mock-data/src/schema/northwindSchemaRaw.ts b/libs/shared/mock-data/src/schema/northwindSchemaRaw.ts
index 59f248f5f..f38a40522 100644
--- a/libs/shared/mock-data/src/schema/northwindSchemaRaw.ts
+++ b/libs/shared/mock-data/src/schema/northwindSchemaRaw.ts
@@ -1,7 +1,7 @@
import { SchemaUtils } from '@graphpolaris/schema-utils';
-import { SchemaFromBackend } from 'libs/shared/models/src';
+import { SchemaFromBackend } from '@graphpolaris/models';
-export const northwindSchemaRaw = {
+export const northwindSchemaRaw: SchemaFromBackend = {
nodes: [
{
name: 'Order',
@@ -286,6 +286,5 @@ export const northwindSchemaRaw = {
],
};
-export const northWindSchema = SchemaUtils.ParseSchemaFromBackend(
- northwindSchemaRaw as SchemaFromBackend
-);
+export const northWindSchema =
+ SchemaUtils.ParseSchemaFromBackend(northwindSchemaRaw);
diff --git a/libs/shared/mock-data/src/schema/simpleRaw.ts b/libs/shared/mock-data/src/schema/simpleRaw.ts
index e8fee0ca1..668cf403c 100644
--- a/libs/shared/mock-data/src/schema/simpleRaw.ts
+++ b/libs/shared/mock-data/src/schema/simpleRaw.ts
@@ -1,7 +1,7 @@
import { SchemaUtils } from '@graphpolaris/schema-utils';
import { SchemaFromBackend } from '@graphpolaris/models';
-export const simpleSchemaRaw = {
+export const simpleSchemaRaw: SchemaFromBackend = {
nodes: [
{
name: 'Thijs',
@@ -103,6 +103,4 @@ export const simpleSchemaRaw = {
],
};
-export const simpleSchema = SchemaUtils.ParseSchemaFromBackend(
- simpleSchemaRaw as SchemaFromBackend
-);
+export const simpleSchema = SchemaUtils.ParseSchemaFromBackend(simpleSchemaRaw);
diff --git a/libs/shared/mock-data/src/schema/twitterSchemaRaw.ts b/libs/shared/mock-data/src/schema/twitterSchemaRaw.ts
index ba922222c..871ab8e75 100644
--- a/libs/shared/mock-data/src/schema/twitterSchemaRaw.ts
+++ b/libs/shared/mock-data/src/schema/twitterSchemaRaw.ts
@@ -1,7 +1,7 @@
import { SchemaUtils } from '@graphpolaris/schema-utils';
-import { SchemaFromBackend } from 'libs/shared/models/src';
+import { SchemaFromBackend } from '@graphpolaris/models';
-export const twitterSchemaRaw = {
+export const twitterSchemaRaw: SchemaFromBackend = {
nodes: [
{
name: 'Me',
@@ -315,6 +315,5 @@ export const twitterSchemaRaw = {
],
};
-export const twitterSchema = SchemaUtils.ParseSchemaFromBackend(
- twitterSchemaRaw as SchemaFromBackend
-);
+export const twitterSchema =
+ SchemaUtils.ParseSchemaFromBackend(twitterSchemaRaw);
diff --git a/libs/shared/mock-data/tsconfig.spec.json b/libs/shared/mock-data/tsconfig.spec.json
index 4afc999ad..59041160a 100644
--- a/libs/shared/mock-data/tsconfig.spec.json
+++ b/libs/shared/mock-data/tsconfig.spec.json
@@ -2,7 +2,7 @@
"extends": "./tsconfig.json",
"compilerOptions": {
"outDir": "../../../dist/out-tsc",
- "module": "commonjs",
+ "module": "esnext",
"types": ["jest", "node"],
"composite": true
},
diff --git a/libs/shared/schema-utils/src/lib/schema-utils.ts b/libs/shared/schema-utils/src/lib/schema-utils.ts
index 0ca15baed..accb03be1 100644
--- a/libs/shared/schema-utils/src/lib/schema-utils.ts
+++ b/libs/shared/schema-utils/src/lib/schema-utils.ts
@@ -20,6 +20,8 @@ export class SchemaUtils {
});
});
+
+
// The name of the edge will be name + from + to, since edge names are not unique
edges.forEach((edge: Edge) => {
const edgeID = [edge.name, '_', edge.from, edge.to].join(''); //ensure that all interpreted as string
--
GitLab