wip

addons/docs/package.json

@@ -68,7 +68,7 @@
     "@storybook/builder-webpack4": "6.5.0-alpha.1",
     "@storybook/client-logger": "6.5.0-alpha.1",
     "@storybook/components": "6.5.0-alpha.1",
-    "@storybook/core": "6.5.0-alpha.1",
+    "@storybook/core-common": "6.5.0-alpha.1",
     "@storybook/core-events": "6.5.0-alpha.1",
     "@storybook/csf": "0.0.2--canary.87bc651.0",
     "@storybook/csf-tools": "6.5.0-alpha.1",

lib/components/package.json

@@ -20,8 +20,8 @@
   },
   "license": "MIT",
   "sideEffects": false,
-  "main": "dist/cjs/index.js",
-  "module": "dist/esm/index.js",
+  "main": "bundle/index.js",
+  "module": "bundle/index.js",
   "types": "dist/ts3.9/index.d.ts",
   "typesVersions": {
     "<3.8": {
@@ -37,7 +37,8 @@
     "*.d.ts"
   ],
   "scripts": {
-    "prepare": "node ../../scripts/prepare.js"
+    "prepare": "node ../../scripts/prepare.js",
+    "prebundle": "node ./scripts/prebundle.js"
   },
   "dependencies": {
     "@popperjs/core": "^2.6.0",
@@ -66,8 +67,15 @@
     "util-deprecate": "^1.0.2"
   },
   "devDependencies": {
+    "@rollup/plugin-babel": "^5.3.0",
+    "@rollup/plugin-commonjs": "^21.0.1",
+    "@rollup/plugin-json": "^4.1.0",
+    "@rollup/plugin-node-resolve": "^13.0.6",
+    "@rollup/plugin-typescript": "^8.3.0",
     "css": "^3.0.0",
-    "jest": "^26.6.3"
+    "jest": "^26.6.3",
+    "rollup": "^2.60.2",
+    "rollup-plugin-jsx": "^1.0.3"
   },
   "peerDependencies": {
     "react": "^16.8.0 || ^17.0.0",
@@ -77,5 +85,5 @@
     "access": "public"
   },
   "gitHead": "fbf6e247a099ec45c30f8594f255a088847b7957",
-  "sbmodern": "dist/modern/index.js"
+  "sbmodern": "bundle/index.js"
 }

lib/components/scripts/prebundle.js

@@ -0,0 +1,42 @@
+const { resolve } = require('path');
+const rollup = require('rollup');
+
+const rollupTypescript = require('@rollup/plugin-typescript');
+const { nodeResolve } = require('@rollup/plugin-node-resolve');
+const commonjs = require('@rollup/plugin-commonjs');
+const json = require('@rollup/plugin-json');
+const { babel } = require('@rollup/plugin-babel');
+
+const previewInputOptions = {
+  input: resolve(__dirname, '../src/index.ts'), // conditionally required
+  plugins: [
+    nodeResolve(),
+    commonjs(),
+    json(),
+    babel({ babelHelpers: 'bundled' }),
+    rollupTypescript(),
+  ],
+  external: ['@storybook/addons', '@storybook/theming', 'react', 'react-dom', '@storybook/csf'],
+};
+
+const previewOutputOptions = {
+  dir: resolve(__dirname, '../bundle'),
+  format: 'es', // required
+};
+
+// see below for details on the options
+
+async function build() {
+  // create a bundle
+  const bundle = await rollup.rollup(previewInputOptions);
+
+  await bundle.generate(previewOutputOptions);
+
+  // or write the bundle to disk
+  await bundle.write(previewOutputOptions);
+
+  // closes the bundle
+  await bundle.close();
+}
+
+build();

lib/components/src/blocks/Preview.tsx

@@ -17,7 +17,7 @@ import { ActionBar, ActionItem } from '../ActionBar/ActionBar';
 import { Toolbar } from './Toolbar';
 import { ZoomContext } from './ZoomContext';
 import { Zoom } from '../Zoom/Zoom';
-import { StorySkeleton } from '.';
+import { StorySkeleton } from './StorySkeleton';
 
 export interface PreviewProps {
   isLoading?: true;

lib/components/src/blocks/Story.tsx

@@ -5,7 +5,6 @@ import type { Parameters } from '@storybook/api';
 import { IFrame } from './IFrame';
 import { EmptyBlock } from './EmptyBlock';
 import { ZoomContext } from './ZoomContext';
-import { Loader } from '..';
 
 const BASE_URL = 'iframe.html';
 
@@ -91,6 +90,4 @@ const Story: FunctionComponent<StoryProps & { inline?: boolean; error?: StoryErr
   );
 };
 
-const StorySkeleton = () => <Loader />;
-
-export { Story, StorySkeleton };
+export { Story };

lib/components/src/blocks/StorySkeleton.tsx

@@ -0,0 +1,4 @@
+import React from 'react';
+import { Loader } from '../Loader/Loader';
+
+export const StorySkeleton = () => <Loader />;

lib/components/src/controls/react-editable-json-tree/components/JsonAddValue.js → lib/components/src/controls/react-editable-json-tree/components/JsonAddValue.tsx

@@ -3,8 +3,8 @@ import PropTypes from 'prop-types';
 
 import inputUsageTypes from '../types/inputUsageTypes';
 
-class JsonAddValue extends Component {
-  constructor(props) {
+class JsonAddValue extends Component<any, any> {
+  constructor(props: any) {
     super(props);
     this.state = {
       inputRefKey: null,
@@ -36,7 +36,7 @@ class JsonAddValue extends Component {
     document.removeEventListener('keydown', this.onKeydown);
   }
 
-  onKeydown(event) {
+  onKeydown(event: KeyboardEvent) {
     if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.repeat) return;
     if (event.code === 'Enter' || event.key === 'Enter') {
       event.preventDefault();
@@ -51,7 +51,7 @@ class JsonAddValue extends Component {
   onSubmit() {
     const { handleAdd, onlyValue, onSubmitValueParser, keyPath, deep } = this.props;
     const { inputRefKey, inputRefValue } = this.state;
-    const result = {};
+    const result: any = {};
     // Check if we have the key
     if (!onlyValue) {
       // Check that there is a key
@@ -66,11 +66,13 @@ class JsonAddValue extends Component {
     handleAdd(result);
   }
 
-  refInputKey(node) {
+  refInputKey(node: any) {
+    //@ts-ignore
     this.state.inputRefKey = node;
   }
-
-  refInputValue(node) {
+
+  refInputValue(node:any) {
+    //@ts-ignore
     this.state.inputRefValue = node;
   }
 
@@ -116,6 +118,7 @@ class JsonAddValue extends Component {
   }
 }
 
+//@ts-ignore
 JsonAddValue.propTypes = {
   handleAdd: PropTypes.func.isRequired,
   handleCancel: PropTypes.func.isRequired,
@@ -128,6 +131,7 @@ JsonAddValue.propTypes = {
   onSubmitValueParser: PropTypes.func.isRequired,
 };
 
+//@ts-ignore
 JsonAddValue.defaultProps = {
   onlyValue: false,
   addButtonElement: <button>+</button>,

lib/components/src/controls/react-editable-json-tree/components/JsonArray.js → lib/components/src/controls/react-editable-json-tree/components/JsonArray.tsx

@@ -5,8 +5,8 @@ import JsonNode from './JsonNode';
 import JsonAddValue from './JsonAddValue';
 import { ADD_DELTA_TYPE, REMOVE_DELTA_TYPE, UPDATE_DELTA_TYPE } from '../types/deltaTypes';
 
-class JsonArray extends Component {
-  constructor(props) {
+class JsonArray extends Component<any, any> {
+  constructor(props: any) {
     super(props);
     const keyPath = [...props.keyPath, props.name];
     this.state = {
@@ -31,11 +31,11 @@ class JsonArray extends Component {
     this.renderNotCollapsed = this.renderNotCollapsed.bind(this);
   }
 
-  static getDerivedStateFromProps(props, state) {
+  static getDerivedStateFromProps(props:any, state:any) {
     return props.data !== state.data ? { data: props.data } : null;
   }
 
-  onChildUpdate(childKey, childData) {
+  onChildUpdate(childKey:any, childData:any) {
     const { data, keyPath } = this.state;
     // Update data
     data[childKey] = childData;
@@ -56,12 +56,12 @@ class JsonArray extends Component {
   }
 
   handleCollapseMode() {
-    this.setState((state) => ({
+    this.setState((state:any) => ({
       collapsed: !state.collapsed,
     }));
   }
 
-  handleRemoveItem(index) {
+  handleRemoveItem(index:any) {
     return () => {
       const { beforeRemoveAction, logger } = this.props;
       const { data, keyPath, nextDeep: deep } = this.state;
@@ -91,7 +91,7 @@ class JsonArray extends Component {
     };
   }
 
-  handleAddValueAdd({ newValue }) {
+  handleAddValueAdd({ newValue }:any) {
     const { data, keyPath, nextDeep: deep } = this.state;
     const { beforeAddAction, logger } = this.props;
 
@@ -125,7 +125,7 @@ class JsonArray extends Component {
     });
   }
 
-  handleEditValue({ key, value }) {
+  handleEditValue({ key, value }:any) {
     return new Promise((resolve, reject) => {
       const { beforeUpdateAction } = this.props;
       const { data, keyPath, nextDeep: deep } = this.state;
@@ -155,6 +155,7 @@ class JsonArray extends Component {
             oldValue,
           });
           // Resolve
+          //@ts-ignore
           resolve();
         })
         .catch(reject);
@@ -233,7 +234,7 @@ class JsonArray extends Component {
         </span>
         {!addFormVisible && addItemButton}
         <ul className="rejt-not-collapsed-list" style={ul}>
-          {data.map((item, index) => (
+          {data.map((item:any, index:number) => (
             <JsonNode
               key={index}
               name={`${index}`}
@@ -306,6 +307,7 @@ class JsonArray extends Component {
   }
 }
 
+//@ts-ignore
 JsonArray.propTypes = {
   data: PropTypes.array.isRequired,
   name: PropTypes.string.isRequired,
@@ -331,7 +333,7 @@ JsonArray.propTypes = {
   logger: PropTypes.object.isRequired,
   onSubmitValueParser: PropTypes.func.isRequired,
 };
-
+//@ts-ignore
 JsonArray.defaultProps = {
   keyPath: [],
   deep: 0,

lib/components/src/controls/react-editable-json-tree/components/JsonFunctionValue.js → lib/components/src/controls/react-editable-json-tree/components/JsonFunctionValue.tsx

@@ -4,8 +4,8 @@ import PropTypes from 'prop-types';
 import { isComponentWillChange } from '../utils/objectTypes';
 import inputUsageTypes from '../types/inputUsageTypes';
 
-class JsonFunctionValue extends Component {
-  constructor(props) {
+class JsonFunctionValue extends Component<any, any> {
+  constructor(props:any) {
     super(props);
     const keyPath = [...props.keyPath, props.name];
     this.state = {
@@ -25,7 +25,7 @@ class JsonFunctionValue extends Component {
     this.onKeydown = this.onKeydown.bind(this);
   }
 
-  static getDerivedStateFromProps(props, state) {
+  static getDerivedStateFromProps(props:any, state:any) {
     return props.value !== state.value ? { value: props.value } : null;
   }
 
@@ -47,7 +47,7 @@ class JsonFunctionValue extends Component {
     document.removeEventListener('keydown', this.onKeydown);
   }
 
-  onKeydown(event) {
+  onKeydown(event:KeyboardEvent) {
     if (event.altKey || event.ctrlKey || event.metaKey || event.shiftKey || event.repeat) return;
     if (event.code === 'Enter' || event.key === 'Enter') {
       event.preventDefault();
@@ -88,7 +88,8 @@ class JsonFunctionValue extends Component {
     });
   }
 
-  refInput(node) {
+  refInput(node:any) {
+    //@ts-ignore
     this.state.inputRef = node;
   }
 
@@ -178,6 +179,7 @@ class JsonFunctionValue extends Component {
   }
 }
 
+//@ts-ignore
 JsonFunctionValue.propTypes = {
   name: PropTypes.string.isRequired,
   value: PropTypes.any.isRequired,
@@ -197,7 +199,8 @@ JsonFunctionValue.propTypes = {
   onSubmitValueParser: PropTypes.func.isRequired,
 };
 
-JsonFunctionValue.defaultProps = {
+//@ts-ignore
+  JsonFunctionValue.defaultProps = {
   keyPath: [],
   deep: 0,
   handleUpdateValue: () => {},

lib/components/src/controls/react-editable-json-tree/components/JsonNode.js → lib/components/src/controls/react-editable-json-tree/components/JsonNode.tsx

@@ -8,8 +8,8 @@ import JsonFunctionValue from './JsonFunctionValue';
 import { getObjectType } from '../utils/objectTypes';
 import dataTypes from '../types/dataTypes';
 
-class JsonNode extends Component {
-  constructor(props) {
+class JsonNode extends Component<any, any> {
+  constructor(props: any) {
     super(props);
     this.state = {
       data: props.data,
@@ -19,7 +19,7 @@ class JsonNode extends Component {
     };
   }
 
-  static getDerivedStateFromProps(props, state) {
+  static getDerivedStateFromProps(props:any, state:any) {
     return props.data !== state.data ? { data: props.data } : null;
   }
 
@@ -308,6 +308,7 @@ class JsonNode extends Component {
   }
 }
 
+//@ts-ignore
 JsonNode.propTypes = {
   name: PropTypes.string.isRequired,
   data: PropTypes.any,
@@ -333,7 +334,7 @@ JsonNode.propTypes = {
   logger: PropTypes.object.isRequired,
   onSubmitValueParser: PropTypes.func.isRequired,
 };
-
+//@ts-ignore
 JsonNode.defaultProps = {
   keyPath: [],
   deep: 0,