Merge pull request #311 from qoretechnologies/feature/add-export-to-t…

…able Storybook 7.1 upgrade, export modal & table / tree fixes
qoretechnologies · Aug 1, 2023 · 23ce39e · 23ce39e
2 parents 88eaf04 + 5419730
commit 23ce39e
Show file tree

Hide file tree

Showing 71 changed files with 9,097 additions and 7,009 deletions.
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -1,39 +1,17 @@
-const path = require('path');
 module.exports = {
   stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
-  addons: ['@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-outline', '@storybook/addon-jest', '@storybook/addon-interactions', {
-    name: '@storybook/addon-storysource',
-    options: {
-      rule: {
-        test: [/\.stories\.tsx?$/],
-        include: [path.resolve(__dirname, '../src')],
-        use: [{
-          loader: require.resolve('@storybook/source-loader'),
-          options: {
-            parser: 'typescript'
-          }
-        }]
-      },
-      /**
-       * Adding a loader to the webpack config. This loader will run prettier on all js files
-      before they are loaded into the browser.
-       */
-      loaderOptions: {
-        prettierConfig: {
-          printWidth: 80,
-          singleQuote: true
-        }
-      }
-    }
-  }],
-  features: {
-    storyStoreV7: true
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-jest',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/react-webpack5',
+    options: {},
   },
-  core: {
-    builder: {
-      name: 'webpack5',
-      lazyCompilation: true
-    }
+  features: {
+    interactionsDebugger: true,
   },
-  framework: '@storybook/react'
-};
+  typescript: { reactDocgen: false },
+};
diff --git a/.storybook/preview-body.html b/.storybook/preview-body.html
@@ -1,7 +1,7 @@
 <style>
   html,
   body,
-  #root {
+  #storybook-root {
     height: 100%;
     font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
   }

diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -66,7 +66,7 @@ export const decorators = [
           },
         }}
       >
-        <ReqoreLayoutContent>
+        <ReqoreLayoutContent style={{ height: '100%' }}>
           <Story />
         </ReqoreLayoutContent>
       </ReqoreUIProvider>
@@ -81,7 +81,7 @@ export const decorators = [
         }}
       >
         <ReqoreLayoutContent>
-          <ReqoreContent style={{ padding: '20px' }}>
+          <ReqoreContent style={{ padding: '20px', height: '100%' }}>
             <Story />
           </ReqoreContent>
         </ReqoreLayoutContent>

diff --git a/.storybook/theme.ts b/.storybook/theme.ts
@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming';
+import { create } from '@storybook/theming/create';
 
 export default create({
   base: 'dark',

diff --git a/__tests__/collection.test.tsx b/__tests__/collection.test.tsx
@@ -1,6 +1,5 @@
 import '@testing-library/jest-dom/extend-expect';
 import { act, fireEvent, render, screen } from '@testing-library/react';
-import React from 'react';
 import { mockAllIsIntersecting } from 'react-intersection-observer/test-utils';
 import { ReqoreCollection, ReqoreLayoutContent, ReqoreUIProvider } from '../src';
 import items, { bigCollection } from '../src/mock/collectionData';
@@ -144,26 +143,6 @@ test('<Collection /> shows no data message when empty', () => {
   expect(document.querySelectorAll('.reqore-message').length).toBe(1);
 });
 
-test('<Collection /> can be sorted', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreCollection items={items} sortable />
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  const firstItem = document.querySelector('.reqore-collection-item');
-  // Expect the title of the first item to be "Expandable item"
-  expect(firstItem?.querySelector('h3')?.textContent).toBe(undefined);
-
-  fireEvent.click(document.querySelectorAll('.reqore-button')[1]);
-
-  const firstNewItem = document.querySelector('.reqore-collection-item');
-
-  expect(firstNewItem?.querySelector('h3')?.textContent).toBe('This item is not flat');
-});
-
 test('<Collection /> has default paging', () => {
   render(
     <ReqoreUIProvider>
@@ -186,7 +165,7 @@ test('<Collection /> has list paging', () => {
   );
 
   expect(document.querySelectorAll('.reqore-pagination-wrapper').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-dropdown-control').length).toBe(1);
+  expect(document.querySelectorAll('.reqore-dropdown-control').length).toBe(2);
   expect(screen.getAllByText('1 / 10')).toBeTruthy();
 });
 

diff --git a/__tests__/table.test.tsx b/__tests__/table.test.tsx
@@ -1,5 +1,5 @@
 import { fireEvent, render } from '@testing-library/react';
-import React, { useState } from 'react';
+import { useState } from 'react';
 import { act } from 'react-dom/test-utils';
 import { ReqoreLayoutContent, ReqoreTable, ReqoreUIProvider } from '../src';
 import { IReqoreTableColumn, IReqoreTableProps } from '../src/components/Table';

diff --git a/__tests__/tree.test.tsx b/__tests__/tree.test.tsx
@@ -1,5 +1,4 @@
 import { fireEvent, render } from '@testing-library/react';
-import React from 'react';
 import { ReqoreContent, ReqoreLayoutContent, ReqoreTree, ReqoreUIProvider } from '../src';
 import MockObject from '../src/mock/object.json';
 
@@ -17,23 +16,6 @@ test('Renders basic <Tree /> properly', () => {
   expect(document.querySelectorAll('.reqore-tree-toggle').length).toBe(7);
 });
 
-test('Shows textarea for <Tree /> properly', () => {
-  render(
-    <ReqoreUIProvider>
-      <ReqoreLayoutContent>
-        <ReqoreContent>
-          <ReqoreTree data={{ test: true }} />
-        </ReqoreContent>
-      </ReqoreLayoutContent>
-    </ReqoreUIProvider>
-  );
-
-  fireEvent.click(document.querySelector('.reqore-tree-as-text'));
-
-  expect(document.querySelectorAll('.reqore-textarea').length).toBe(1);
-  expect(document.querySelectorAll('.reqore-textarea')[0].textContent).toContain('test: true');
-});
-
 test('<Tree /> items can be expanded and collapsed', () => {
   render(
     <ReqoreUIProvider>

diff --git a/babel.config.js b/babel.config.js
@@ -1,7 +1,7 @@
 module.exports = {
   presets: [
-    ["@babel/preset-env", { targets: { node: "current" } }],
-    "@babel/preset-react",
-    "@babel/preset-typescript",
+    ['@babel/preset-env', { targets: { esmodules: false, node: 'current' } }],
+    '@babel/preset-react',
+    '@babel/preset-typescript',
   ],
 };
diff --git a/jest.config.js b/jest.config.js
@@ -8,9 +8,11 @@ module.exports = {
   // Jest transformations -- this adds support for TypeScript
   // using ts-jest
   transform: {
-    '^.+\\.tsx?$': ['ts-jest', { diagnostics: false }],
+    '^.+\\.(ts|tsx|js)?$': ['ts-jest', { diagnostics: false }],
   },
 
+  transformIgnorePatterns: ['<rootDir>/node_modules/(?!(yaml)/)'],
+
   // Module file extensions for importing
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node', 'css'],
 

diff --git a/migration-storybook.log b/migration-storybook.log
@@ -0,0 +1,88 @@
+🔎 checking possible migrations..
+
+⚠️  failed to check fix new-frameworks
+
+Error: ❌ Your project should be upgraded to use the framework package @storybook/react-webpack5, but we detected that you are using Vite 2.9.15, which is unsupported in Storybook 7.0. Please upgrade Vite to 3.0.0 or higher and rerun this migration.
+    at Object.check (/home/gitpod/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:205:8731)
+    at async runFixes (/home/gitpod/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:388:1239)
+    at async automigrate (/home/gitpod/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:385:676)
+    at async doUpgrade (/home/gitpod/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:417:3419)
+    at async withTelemetry (/home/gitpod/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/core-server/dist/index.js:113:3725)
+    at async upgrade (/home/gitpod/.npm/_npx/bc7e1e37fcb46ffc/node_modules/@storybook/cli/dist/generate.js:417:3865)
+
+🔎 found a 'storybook-binary' migration:
+╭ Automigration detected ─────────────────────────────────────╮
+│                                                             │
+│   We've detected you are using Storybook 7.1.1 without      │
+│   Storybook's storybook binary. Starting in Storybook       │
+│   7.0, it has to be installed.                              │
+│                                                             │
+│                                                             │
+│   More info: https://github.com/storybookjs/storybook/blo   │
+│   b/next/MIGRATION.md#start-storybook--build-storybook-bi   │
+│   naries-removed                                            │
+│                                                             │
+╰─────────────────────────────────────────────────────────────╯
+? Do you want to run the 'storybook-binary' migration on your project? › (Y/n)✔ Do you want to run the 'storybook-binary' migration on your project? … yes
+
+✅ Adding 'storybook' as dev dependency
+
+✅ ran storybook-binary migration
+
+🔎 found a 'sb-scripts' migration:
+╭ Automigration detected ─────────────────────────────────────╮
+│                                                             │
+│   We've detected you are using Storybook 7.1.1 with         │
+│   scripts from previous versions of Storybook.              │
+│   Starting in Storybook 7, the start-storybook and          │
+│   build-storybook binaries have changed to storybook dev    │
+│   and storybook build respectively.                         │
+│   In order to work with Storybook 7.1.1, your storybook     │
+│   scripts have to be adjusted to use the binary. We can     │
+│   adjust them for you:                                      │
+│                                                             │
+│   storybook                                                 │
+│   from:                                                     │
+│   start-storybook -p 6007 --no-dll                          │
+│   to:                                                       │
+│   storybook dev -p 6007 --no-dll                            │
+│                                                             │
+│   build-storybook                                           │
+│   from:                                                     │
+│   build-storybook                                           │
+│   to:                                                       │
+│   storybook build                                           │
+│                                                             │
+│   In case this migration did not cover all of your          │
+│   scripts, or you'd like more info: https://github.com/st   │
+│   orybookjs/storybook/blob/next/MIGRATION.md#start-storyb   │
+│   ook--build-storybook-binaries-removed                     │
+│                                                             │
+╰─────────────────────────────────────────────────────────────╯
+? Do you want to run the 'sb-scripts' migration on your project? › (Y/n)✔ Do you want to run the 'sb-scripts' migration on your project? … yes
+✅ Updating scripts in package.json
+
+
+✅ ran sb-scripts migration
+
+🔎 found a 'autodocsTrue' migration:
+╭ Automigration detected ─────────────────────────────────────╮
+│                                                             │
+│   We've changed the configuration of autodocs (previous     │
+│   docsPage), so now the value:                              │
+│   - docs.autodocs: true -- means automatically create       │
+│   docs for every CSF file                                   │
+│   - docs.autodocs: 'tag' -- means only create autodocs      │
+│   for CSF files with the 'autodocs' tag                     │
+│   - docs.autodocs: false -- means never create autodocs     │
+│                                                             │
+│   Based on your prior configuration,  we can set the        │
+│   `docs.autodocs` to keep your old behaviour:               │
+│                                                             │
+│   docs: { autodocs: true }                                  │
+│                                                             │
+│   More info: https://github.com/storybookjs/storybook/blo   │
+│   b/next/MIGRATION.md#autodocs-changes                      │
+│                                                             │
+╰─────────────────────────────────────────────────────────────╯
+? Do you want to run the 'autodocsTrue' migration on your project? › (Y/n)✔ Do you want to run the 'autodocsTrue' migration on your project? … no
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqore",
-  "version": "0.36.0",
+  "version": "0.36.1",
   "description": "ReQore is a highly theme-able and modular UI library for React",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -11,9 +11,9 @@
     "build": "./node_modules/typescript/bin/tsc --project tsconfig.prod.json",
     "build:test": "./node_modules/typescript/bin/tsc --noEmit",
     "build:test:prod": "./node_modules/typescript/bin/tsc --project tsconfig.prod.json --noEmit",
-    "storybook": "start-storybook -p 6007 --no-dll",
+    "storybook": "storybook dev -p 6007",
     "init-storybook": "yarn test:ci && yarn storybook",
-    "build-storybook": "build-storybook"
+    "build-storybook": "storybook build"
   },
   "repository": {
     "type": "git",
@@ -26,7 +26,7 @@
     "react"
   ],
   "pre-push": [
-    "build:test",
+    "build:test:prod",
     "test"
   ],
   "author": "Qore Technologies",
@@ -40,18 +40,21 @@
     "@babel/preset-env": "^7.12.11",
     "@babel/preset-react": "^7.12.10",
     "@babel/preset-typescript": "^7.12.7",
-    "@storybook/addon-actions": "^6.5.13",
-    "@storybook/addon-essentials": "^6.5.13",
-    "@storybook/addon-interactions": "^6.5.13",
-    "@storybook/addon-jest": "^6.5.13",
-    "@storybook/addon-links": "^6.5.13",
-    "@storybook/addon-storyshots": "^6.5.13",
-    "@storybook/addon-storysource": "^6.5.13",
-    "@storybook/builder-webpack5": "^6.5.13",
-    "@storybook/jest": "^0.0.10",
-    "@storybook/manager-webpack5": "^6.5.13",
-    "@storybook/react": "^6.5.13",
-    "@storybook/testing-library": "^0.0.13",
+    "@storybook/addon-actions": "^7.1.1",
+    "@storybook/addon-essentials": "^7.1.1",
+    "@storybook/addon-interactions": "^7.1.1",
+    "@storybook/addon-links": "^7.1.1",
+    "@storybook/builder-webpack5": "^7.1.1",
+    "@storybook/jest": "^0.1.0",
+    "@storybook/manager-api": "^7.1.1",
+    "@storybook/manager-webpack5": "^6.5.16",
+    "@storybook/react": "^7.1.1",
+    "@storybook/react-webpack5": "^7.1.1",
+    "@storybook/test-runner": "^0.9.4",
+    "@storybook/testing-library": "^0.2.0",
+    "@storybook/testing-react": "^2.0.1",
+    "@storybook/theming": "^7.1.1",
+    "@storybook/types": "^7.1.1",
     "@testing-library/jest-dom": "^5.16.5",
     "@testing-library/react": "^13.4.0",
     "@types/jest": "^26.0.19",
@@ -61,7 +64,7 @@
     "@types/react-dom": "^18.0.11",
     "babel-jest": "^26.6.3",
     "babel-loader": "^8.2.2",
-    "chromatic": "^6.3.3",
+    "chromatic": "^6.20.0",
     "jest": "^29.4.3",
     "jest-environment-jsdom": "^29.4.3",
     "jest-github-actions-reporter": "^1.0.2",
@@ -72,8 +75,7 @@
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^9.4.2",
     "react-test-renderer": "^18.2.0",
-    "storybook-addon-outline": "^1.4.2",
-    "storybook-dark-mode": "^1.1.2",
+    "storybook": "^7.1.1",
     "ts-jest": "^29.0.5",
     "ts-node": "^9.1.1",
     "typescript": "^4.7.3",
@@ -101,6 +103,10 @@
     "shortid": "^2.2.16",
     "styled-components": "^5.3.6",
     "thenby": "^1.3.4",
-    "use-context-selector": "^1.4.1"
+    "use-context-selector": "^1.4.1",
+    "yaml": "^2.3.1"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
   }
 }
diff --git a/src/components/Breadcrumbs/index.tsx b/src/components/Breadcrumbs/index.tsx
@@ -199,7 +199,7 @@ const ReqoreBreadcrumbs: React.FC<IReqoreBreadcrumbsProps> = ({
                     {...props}
                     icon={icon}
                     as={as}
-                    onClick={(_itemId, event) => {
+                    onClick={(event) => {
                       props?.onClick?.(event);
                     }}
                     tooltip={tooltip}