Fix storybook

tanwarsachin2803 · Jan 10, 2024 · 15e4d54 · 15e4d54
1 parent 7336f4e
commit 15e4d54
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 98 deletions.
diff --git a/.storybook/preview.js → .storybook/preview.jsx b/.storybook/preview.js → .storybook/preview.jsx
@@ -1,9 +1,14 @@
+import * as React from 'react';
 import '../src/scss/main.scss';
 import { initializeLibrary } from '../src/utils';
+import { VisynAppProvider } from '../src/app/VisynAppProvider';
 
 // TODO: This is async, how to wait for it?
 initializeLibrary();
 
+/**
+ * @type {import('@storybook/react').Parameters}
+ */
 export const parameters = {
   actions: { argTypesRegex: '^on[A-Z].*' },
   layout: 'fullscreen',
@@ -14,3 +19,14 @@ export const parameters = {
     },
   },
 };
+
+/**
+ * @type {import('@storybook/react').Preview}
+ */
+export default {
+  decorators: [
+    Story => <VisynAppProvider appName="">
+      <Story />
+    </VisynAppProvider>
+  ],
+}
diff --git a/package.json b/package.json
@@ -325,7 +325,6 @@
     "@storybook/addon-interactions": "^7.0.12",
     "@storybook/addon-links": "^7.0.12",
     "@storybook/addon-mdx-gfm": "^7.0.12",
-    "@storybook/addon-styling-webpack": "^0.0.6",
     "@storybook/cli": "^7.0.12",
     "@storybook/preset-scss": "^1.0.3",
     "@storybook/react": "^7.0.12",
@@ -336,9 +335,6 @@
     "storybook": "^7.0.12",
     "storybook-addon-swc": "^1.1.9"
   },
-  "resolutions": {
-    "visyn_scripts": "git+ssh://[email protected]/datavisyn/visyn_scripts#mh/mantine7"
-  },
   "visyn": {
     "entries": {
       "app": {

diff --git a/src/app/VisynApp.tsx b/src/app/VisynApp.tsx
@@ -5,13 +5,6 @@ import { useVisynAppContext } from './VisynAppContext';
 import { VisynHeader } from './header/VisynHeader';
 import { VisynLoginMenu } from './login/VisynLoginMenu';
 
-import '@mantine/code-highlight/styles.css';
-import '@mantine/core/styles.css';
-import '@mantine/dates/styles.css';
-import '@mantine/dropzone/styles.css';
-import '@mantine/notifications/styles.css';
-import '@mantine/tiptap/styles.css';
-
 /**
  *
  * @param header Optional custom header to be passed to the AppShell. If not provided, will use an empty VisynHeader.

diff --git a/src/app/VisynAppProvider.tsx b/src/app/VisynAppProvider.tsx
@@ -9,6 +9,13 @@ import { VisProvider } from '../vis/Provider';
 import { VisynAppContext } from './VisynAppContext';
 import { DEFAULT_MANTINE6_PROVIDER_PROPS, DEFAULT_MANTINE_PROVIDER_PROPS } from './constants';
 
+import '@mantine/code-highlight/styles.css';
+import '@mantine/core/styles.css';
+import '@mantine/dates/styles.css';
+import '@mantine/dropzone/styles.css';
+import '@mantine/notifications/styles.css';
+import '@mantine/tiptap/styles.css';
+
 const LazyMantine6Provider = React.lazy(() => import('@mantine6/core').then((module) => ({ default: module.MantineProvider })));
 
 export function VisynAppProvider({

diff --git a/src/demo/MainApp.tsx b/src/demo/MainApp.tsx
@@ -4,9 +4,9 @@ import { VisynApp, VisynHeader, useVisynAppContext } from '../app';
 import { DatavisynTaggle, VisynRanking, autosizeWithSMILESColumn } from '../ranking';
 import { defaultBuilder } from '../ranking/EagerVisynRanking';
 import { BaseVisConfig, ENumericalColorScaleType, EScatterSelectSettings, ESupportedPlotlyVis, IScatterConfig, Vis } from '../vis';
-import { fetchIrisData } from '../vis/stories/Iris.stories';
 import { iris } from '../vis/stories/irisData';
 import { MyNumberScore, MySMILESScore, MyStringScore } from './scoresUtils';
+import { fetchIrisData } from '../vis/stories/fetchIrisData';
 
 export function MainApp() {
   const { user } = useVisynAppContext();

diff --git a/src/vis/stories/Iris.stories.tsx b/src/vis/stories/Iris.stories.tsx
@@ -2,80 +2,9 @@ import { ComponentStory } from '@storybook/react';
 import React, { useState } from 'react';
 import { Vis } from '../LazyVis';
 import { EBarDirection, EBarDisplayType, EBarGroupingType } from '../bar/interfaces';
-import { BaseVisConfig, EAggregateTypes, EColumnTypes, ENumericalColorScaleType, EScatterSelectSettings, ESupportedPlotlyVis, VisColumn } from '../interfaces';
+import { BaseVisConfig, EAggregateTypes, ENumericalColorScaleType, EScatterSelectSettings, ESupportedPlotlyVis } from '../interfaces';
 import { EViolinOverlay } from '../violin/interfaces';
-
-export function fetchIrisData(): VisColumn[] {
-  const dataPromise = import('./irisData').then((m) =>
-    m.iris.map((currIris) => ({ ...currIris, randomCategory: Math.round(Math.random() * 20), anotherRandomCategory: Math.round(Math.random() * 4) })),
-  );
-
-  return [
-    {
-      info: {
-        description: 'data from description',
-        id: 'sepalLength',
-        name: 'Sepal Length',
-      },
-      type: EColumnTypes.NUMERICAL,
-      values: () => dataPromise.then((data) => data.map((r) => r.sepalLength).map((val, i) => ({ id: i.toString(), val }))),
-    },
-    {
-      info: {
-        description: 'data from description',
-        id: 'sepalWidth',
-        name: 'Sepal Width',
-      },
-      type: EColumnTypes.NUMERICAL,
-      values: () => dataPromise.then((data) => data.map((r) => r.sepalWidth).map((val, i) => ({ id: i.toString(), val }))),
-    },
-    {
-      info: {
-        description: '',
-        id: 'randomThing',
-        name: 'Random Thing',
-      },
-      type: EColumnTypes.CATEGORICAL,
-      values: () => dataPromise.then((data) => data.map((r) => r.randomCategory).map((val, i) => ({ id: i.toString(), val: val.toString() }))),
-    },
-    {
-      info: {
-        description: '',
-        id: 'randomThing2',
-        name: 'Random Thing2',
-      },
-      type: EColumnTypes.CATEGORICAL,
-      values: () => dataPromise.then((data) => data.map((r) => r.anotherRandomCategory).map((val, i) => ({ id: i.toString(), val: val.toString() }))),
-    },
-    {
-      info: {
-        description: 'data from description',
-        id: 'petalLength',
-        name: 'Petal Length',
-      },
-      type: EColumnTypes.NUMERICAL,
-      values: () => dataPromise.then((data) => data.map((r) => r.petalLength).map((val, i) => ({ id: i.toString(), val }))),
-    },
-    {
-      info: {
-        description: 'data from description',
-        id: 'petalWidth',
-        name: 'Petal Width',
-      },
-      type: EColumnTypes.NUMERICAL,
-      values: () => dataPromise.then((data) => data.map((r) => r.petalWidth).map((val, i) => ({ id: i.toString(), val }))),
-    },
-    {
-      info: {
-        description: 'data from description',
-        id: 'species',
-        name: 'Species',
-      },
-      type: EColumnTypes.CATEGORICAL,
-      values: () => dataPromise.then((data) => data.map((r) => r.species).map((val, i) => ({ id: i.toString(), val }))),
-    },
-  ];
-}
+import { fetchIrisData } from './fetchIrisData';
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {

diff --git a/src/vis/stories/Vis/Violin/ViolinIris.stories.tsx b/src/vis/stories/Vis/Violin/ViolinIris.stories.tsx
@@ -1,27 +1,15 @@
-import { ComponentStory, Decorator } from '@storybook/react';
+import { ComponentStory } from '@storybook/react';
 import React from 'react';
-import { MantineProvider } from '@mantine/core';
 import { Vis } from '../../../LazyVis';
 import { VisProvider } from '../../../Provider';
 import { BaseVisConfig, ESupportedPlotlyVis } from '../../../interfaces';
 import { EViolinOverlay } from '../../../violin/interfaces';
 import { fetchIrisData } from '../../fetchIrisData';
-import { DEFAULT_MANTINE_PROVIDER_PROPS } from '../../../../app/constants';
-
-console.log(DEFAULT_MANTINE_PROVIDER_PROPS);
-const withMantine: Decorator = (Story) => {
-  return (
-    <MantineProvider {...DEFAULT_MANTINE_PROVIDER_PROPS}>
-      <Story />
-    </MantineProvider>
-  );
-};
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
   title: 'Vis/Violin',
   component: Vis,
-  decorators: [withMantine],
   // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
 };