update sb

gensplore-component/.storybook/main.js

@@ -0,0 +1,18 @@
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

gensplore-component/.storybook/preview.js

@@ -0,0 +1,14 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

gensplore-component/package.json

@@ -14,6 +14,14 @@
   },
   "devDependencies": {
     "@headlessui/react": "^1.7.16",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-vite": "^7.5.3",
+    "@storybook/testing-library": "^0.2.2",
     "@tanstack/react-virtual": "^3.0.0-beta.48",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
@@ -22,16 +30,21 @@
     "autoprefixer": "^10.4.13",
     "bio-parsers": "^9.3.0",
     "color-hash": "^2.0.2",
+    "eslint-plugin-storybook": "^0.6.15",
     "postcss": "^8.4.21",
+    "prop-types": "^15.8.1",
     "qs": "^6.11.0",
     "rc-slider": "^10.1.1",
+    "react": "^18.2.0",
     "react-debounce-input": "^3.3.0",
+    "react-dom": "^18.2.0",
     "react-icons": "^4.7.1",
     "react-router-dom": "^6.8.1",
     "react-spinners": "^0.13.8",
     "react-toastify": "^9.1.1",
     "react-tooltip": "^5.7.5",
     "react-use": "^17.4.0",
+    "storybook": "^7.5.3",
     "tailwindcss": "^3.2.6",
     "ve-range-utils": "^2.6.6",
     "ve-sequence-utils": "^5.2.9",
@@ -50,12 +63,15 @@
   "scripts": {
     "start": "vite",
     "build": "vite build",
-    "serve": "vite preview"
+    "serve": "vite preview",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
   },
   "eslintConfig": {
     "extends": [
       "react-app",
-      "react-app/jest"
+      "react-app/jest",
+      "plugin:storybook/recommended"
     ]
   },
   "browserslist": {

gensplore-component/src/stories/Gensplore.stories.jsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import GensploreComponent from '../components/GensploreView';
+
+// This default export determines where your story goes in the story list
+export default {
+  title: 'GensploreComponent',
+  component: GensploreComponent,
+  genbankString: `
+  
+  `
+};
+
+const Template = (args) => <GensploreComponent genbankString={
+`LOCUS       Sample100bp       100 bp    DNA     linear   UNK 24-NOV-2023
+DEFINITION  Synthetic construct, 100 bp DNA fragment.
+ACCESSION   XXX00000000
+VERSION     XXX00000000.1
+KEYWORDS    .
+SOURCE      synthetic DNA construct
+  ORGANISM  synthetic construct
+            other sequences; artificial sequences.
+REFERENCE   1  (bases 1 to 100)
+  AUTHORS   Doe,J.
+  TITLE     Direct Submission
+  JOURNAL   Submitted (24-NOV-2023) to the GenBank
+FEATURES             Location/Qualifiers
+     CDS             1..100
+                     /organism="synthetic construct"
+                     /mol_type="genomic DNA"
+                     /db_xref="taxon:000000"
+ORIGIN      
+        1 atgctagctg acgtacgtac gtagctagct agctagctac gtagctagct agctagctag
+       61 ctgactgact gactgactga ctgactgact gactgactga
+//`
+}/>;
+
+export const Primary = Template.bind({});
+