latest

Author: farhanlatheef

.storybook/main.js

@@ -1,39 +1,73 @@
+const path = require("path");
 const commonResolve = require("@bigbinary/neeto-commons-frontend/configs/nanos/webpack/resolve.js");
-const projectResolve = require("../resolve.js");
+const projectResolve = require("../resolves.js");
 const { mergeDeepLeft } = require("ramda");
+const remarkGfm = require("remark-gfm");
 
 const { alias } = mergeDeepLeft(projectResolve, commonResolve);
 
 module.exports = {
-  core: {
-    builder: "webpack5",
-  },
-  staticDirs: ["./public"],
   stories: [
     "../stories/**/*.stories.mdx",
-    "../stories/**/*.stories.@(js|jsx|ts|tsx)",
+    "../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)",
   ],
+
+  staticDirs: ["./public"],
+
   addons: [
-    "@storybook/addon-links",
     "@storybook/addon-essentials",
-    "@storybook/addon-interactions",
-    "@storybook/addon-postcss",
     "@storybook/preset-scss",
     "storybook-dark-mode",
+    {
+      name: "@storybook/addon-postcss",
+      options: {
+        cssLoaderOptions: { importLoaders: 1 },
+        postcssLoaderOptions: { implementation: require("postcss") },
+      },
+    },
+    {
+      name: "@storybook/addon-docs",
+      options: {
+        mdxPluginOptions: {
+          mdxCompileOptions: {
+            remarkPlugins: [remarkGfm],
+          },
+        },
+      },
+    },
   ],
-  framework: "@storybook/react",
-  babel: async options => ({
-    ...options,
-    plugins: ["@babel/plugin-proposal-class-properties"],
-  }),
-  webpackFinal: async (config, { configType }) => {
+
+  webpackFinal: async config => {
+    config.resolve.alias = {
+      ...config.resolve.alias,
+      ...alias,
+      "@bigbinary/neeto-editor": path.resolve(__dirname, "../src/components"),
+    };
+
+    config.module.rules.find(
+      rule => rule.test && rule.test.test(".svg")
+    ).exclude = /^(?!.*\.storybook\/).*\.svg$/;
+
+    config.module.rules.push({
+      test: /\.svg$/,
+      exclude: __dirname,
+      enforce: "pre",
+      loader: require.resolve("@svgr/webpack"),
+    });
+
     config.module.rules.push({
       test: /\.js$/,
       include: /node_modules\/@bigbinary\/neeto-commons-frontend\/initializers/,
       use: { loader: "babel-loader", options: { plugins: ["preval"] } },
     });
 
-    config.resolve.alias = alias;
+    config.resolve.extensions.push(".svg");
+
     return config;
   },
+
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {},
+  },
 };

.storybook/manager.js

@@ -1,12 +1,11 @@
 import { addons } from "@storybook/addons";
 import neetoTheme from "./neetoTheme";
-import Favicon from "./public/favicon_light.ico";
 
 addons.setConfig({
   theme: neetoTheme,
 });
 
 const link = document.createElement("link");
 link.setAttribute("rel", "shortcut icon");
-link.setAttribute("href", Favicon);
+link.setAttribute("href", "./favicon_light.ico");
 document.head.appendChild(link);

.storybook/neetoTheme.js

@@ -1,4 +1,4 @@
-import { create } from "@storybook/theming";
+import { create } from "@storybook/theming/create";
 import neetoLogo from "./neetoLogo.svg";
 
 export default create({

.storybook/preview.js

@@ -13,18 +13,14 @@ initializeApplication({
 export const parameters = {
   layout: "fullscreen",
   actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
+  controls: { matchers: { color: /(background|color)$/i, date: /Date$/ } },
   options: {
     storySort: {
       order: [
         "Welcome",
         "Getting started",
         "Walkthroughs",
+        ["Menu", "MenuTypes"],
         "API Reference",
         ["Props", "Editor API"],
         "Examples",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@bigbinary/neeto-editor",
-  "version": "1.30.13-beta",
+  "version": "1.31.0-beta",
   "main": "./index.cjs.js",
   "module": "./index.js",
   "types": "./types.d.ts",
@@ -23,10 +23,13 @@
     "npm": ">=9",
     "yarn": ">=1.22"
   },
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  },
   "devDependencies": {
-    "@babel/core": "^7.19.1",
-    "@babel/eslint-parser": "7.17.0",
-    "@babel/plugin-transform-runtime": "^7.19.1",
+    "@babel/core": "7.23.2",
+    "@babel/eslint-parser": "7.22.15",
+    "@babel/plugin-transform-runtime": "7.23.2",
     "@babel/preset-env": "7.23.2",
     "@babel/preset-react": "7.22.15",
     "@babel/preset-typescript": "7.23.2",
@@ -35,11 +38,11 @@
     "@bigbinary/eslint-plugin-neeto": "1.5.0",
     "@bigbinary/neeto-audit-frontend": "^2.0.9",
     "@bigbinary/neeto-cist": "1.0.9",
-    "@bigbinary/neeto-commons-frontend": "3.2.4",
-    "@bigbinary/neeto-filters-frontend": "3.2.8",
-    "@bigbinary/neeto-icons": "1.18.0",
-    "@bigbinary/neeto-molecules": "1.13.8",
-    "@bigbinary/neetoui": "6.3.8",
+    "@bigbinary/neeto-commons-frontend": "3.3.0",
+    "@bigbinary/neeto-filters-frontend": "3.3.1",
+    "@bigbinary/neeto-icons": "1.18.4",
+    "@bigbinary/neeto-molecules": "1.15.15",
+    "@bigbinary/neetoui": "6.5.10",
     "@faker-js/faker": "8.2.0",
     "@honeybadger-io/js": "6.5.3",
     "@honeybadger-io/react": "6.1.9",
@@ -49,18 +52,14 @@
     "@rollup/plugin-json": "6.0.1",
     "@rollup/plugin-node-resolve": "15.2.3",
     "@rollup/plugin-replace": "5.0.4",
-    "@storybook/addon-actions": "6.5.16",
-    "@storybook/addon-docs": "6.5.16",
-    "@storybook/addon-essentials": "6.5.16",
-    "@storybook/addon-interactions": "6.5.16",
-    "@storybook/addon-links": "6.5.16",
-    "@storybook/addon-postcss": "2.0.0",
-    "@storybook/builder-webpack5": "6.5.16",
-    "@storybook/manager-webpack5": "6.5.16",
-    "@storybook/preset-scss": "1.0.3",
-    "@storybook/react": "6.5.16",
-    "@storybook/testing-library": "0.0.13",
+    "@storybook/addon-actions": "^7.5.3",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-postcss": "^2.0.0",
+    "@storybook/preset-scss": "^1.0.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-webpack5": "^7.5.3",
     "@svgr/rollup": "8.1.0",
+    "@svgr/webpack": "^6.5.1",
     "@tippyjs/react": "4.2.6",
     "@tiptap/extension-bubble-menu": "2.0.0-beta.199",
     "@tiptap/extension-character-count": "2.0.0-beta.199",
@@ -80,6 +79,7 @@
     "@tiptap/extension-table-row": "2.0.0-beta.199",
     "@tiptap/extension-text-style": "2.0.3",
     "@tiptap/extension-underline": "2.0.0-beta.199",
+    "@tiptap/pm": "^2.3.0",
     "@tiptap/react": "2.0.0-beta.199",
     "@tiptap/starter-kit": "2.0.0-beta.199",
     "@tiptap/suggestion": "2.0.0-beta.197",
@@ -89,8 +89,8 @@
     "@uppy/url": "2.2.0",
     "antd": "5.10.2",
     "autoprefixer": "10.4.16",
-    "axios": "1.6.2",
-    "babel-loader": "^8.2.5",
+    "axios": "1.6.0",
+    "babel-loader": "9.1.3",
     "babel-plugin-istanbul": "6.1.1",
     "babel-plugin-js-logger": "1.0.17",
     "babel-plugin-macros": "3.1.0",
@@ -125,10 +125,10 @@
     "js-logger": "1.6.1",
     "lint-staged": "15.0.2",
     "lowlight": "2.7.0",
-    "postcss": "8.4.14",
-    "postcss-import": "14.1.0",
-    "postcss-loader": "4.3.0",
-    "postcss-preset-env": "7.8.2",
+    "postcss": "8.4.31",
+    "postcss-import": "15.1.0",
+    "postcss-loader": "7.3.3",
+    "postcss-preset-env": "9.2.0",
     "prettier": "2.6.2",
     "prettier-plugin-tailwindcss": "0.1.10",
     "qs": "6.11.2",
@@ -147,6 +147,7 @@
     "react-query": "3.39.3",
     "react-router-dom": "5.3.4",
     "react-toastify": "8.2.0",
+    "remark-gfm": "4.0.0",
     "rollup": "2.79.1",
     "rollup-plugin-analyzer": "4.0.0",
     "rollup-plugin-cleaner": "1.0.0",
@@ -155,7 +156,8 @@
     "rollup-plugin-styles": "4.0.0",
     "sass": "1.69.5",
     "sass-loader": "13.0.2",
-    "storybook-dark-mode": "^2.1.1",
+    "storybook": "^7.5.3",
+    "storybook-dark-mode": "^3.0.1",
     "style-loader": "3.3.1",
     "tailwindcss": "3.4.1",
     "tippy.js": "6.3.7",
@@ -168,15 +170,15 @@
   "peerDependencies": {
     "@bigbinary/babel-preset-neeto": "latest",
     "@bigbinary/neeto-cist": "latest",
-    "@bigbinary/neeto-commons-frontend": "3.2.4",
-    "@bigbinary/neeto-filters-frontend": "3.2.8",
-    "@bigbinary/neeto-icons": "1.18.0",
-    "@bigbinary/neeto-molecules": "1.13.8",
-    "@bigbinary/neetoui": "6.3.8",
+    "@bigbinary/neeto-commons-frontend": "3.3.0",
+    "@bigbinary/neeto-filters-frontend": "3.3.1",
+    "@bigbinary/neeto-icons": "1.18.4",
+    "@bigbinary/neeto-molecules": "1.15.15",
+    "@bigbinary/neetoui": "6.5.10",
     "@honeybadger-io/js": "^6.5.3",
     "@honeybadger-io/react": "^6.1.9",
     "antd": "4.24.3",
-    "axios": "1.6.2",
+    "axios": "^1.6.0",
     "classnames": "^2.3.2",
     "formik": "^2.4.5",
     "i18next": "^23.6.0",
@@ -225,11 +227,11 @@
     "tippy.js": "6.3.7"
   },
   "scripts": {
-    "build": "build-storybook",
+    "build": "storybook build",
     "bundle": "NODE_ENV=production rollup -c rollup.config.js",
     "prepare": "husky install",
     "serve": "node .storybook/express",
-    "storybook": "start-storybook -p 6006"
+    "storybook": "storybook dev -p 6006"
   },
   "lint-staged": {
     "src/**/*.{js,jsx,json}": [

resolve.js resolves.js

@@ -15,7 +15,7 @@ import copy from "rollup-plugin-copy";
 import packageJson from "./package.json";
 
 const commonResolve = require("@bigbinary/neeto-commons-frontend/configs/nanos/webpack/resolve.js");
-const projectResolve = require("./resolve.js");
+const projectResolve = require("./resolves.js");
 
 const { alias: aliasEntries } = mergeDeepLeft(projectResolve, commonResolve);
 const peerDependencies = Object.keys(packageJson.peerDependencies);

rollup.config.js

@@ -2,12 +2,11 @@ import React, { useImperativeHandle, useState, useRef } from "react";
 
 import { useEditor, EditorContent } from "@tiptap/react";
 import classnames from "classnames";
+import { EDITOR_OPTIONS } from "common/constants";
 import { noop, slugify } from "neetocist";
-import { useFuncDebounce } from "neetocommons/react-utils";
 import { Label } from "neetoui";
 import { EditorView } from "prosemirror-view";
 
-import { EDITOR_OPTIONS } from "common/constants";
 import ErrorWrapper from "components/Common/ErrorWrapper";
 import useEditorWarnings from "hooks/useEditorWarnings";
 
@@ -115,11 +114,6 @@ const Editor = (
   });
   useEditorWarnings({ initialValue });
 
-  const handleChange = useFuncDebounce(
-    ({ editor }) => onChange(editor.getHTML()),
-    100
-  );
-
   const editorClasses = classnames("neeto-editor", {
     "slash-active": isSlashCommandsActive && !isPlaceholderActive,
     "fixed-menu-active border": isFixedMenuActive,
@@ -155,7 +149,7 @@ const Editor = (
     },
     parseOptions: { preserveWhitespace: true },
     onCreate: ({ editor }) => !autoFocus && setInitialPosition(editor),
-    onUpdate: handleChange,
+    onUpdate: ({ editor }) => onChange(editor.getHTML()),
     onFocus,
     onBlur,
   });

src/components/Editor/index.jsx

@@ -20,9 +20,9 @@ import { Editor } from "../../src";
 
 # **Props**
 
-export const Template = args => <Editor {...args} />;
-
-<Story name="All Props"> {Template.bind({})}</Story>
+<Story name="All Props">
+  <Editor autoFocus />
+</Story>
 
 <div id="hide-controls-column">
   <ArgsTable story="All Props" />

stories/API-Reference/All-props.stories.mdx

@@ -2,6 +2,7 @@ import { Meta, Story, Canvas, ArgsTable } from "@storybook/addon-docs";
 import { MENU_PROPS } from "./constants";
 import { Editor, Menu } from "../../src";
 import { buildArgValues } from "../utils";
+import Table from "../components/Table";
 
 <Meta
   title="Walkthroughs/Menu"
@@ -13,7 +14,6 @@ import { buildArgValues } from "../utils";
     },
   }}
   component={Editor}
-  argTypes={buildArgValues(MENU_PROPS)}
 />
 
 # Use Menu as an independant component
@@ -23,13 +23,8 @@ content. In such cases use the `Menu` component.
 
 ### Props
 
-export const Template = args => <Menu {...args} />;
+<Table columns={["Name", "Description", "Default"]} rows={MENU_PROPS} />
 
-<Story name="Menu"> {Template.bind({})}</Story>
-
-<div id="hide-controls-column">
-  <ArgsTable story="Menu" />
-</div>
 
 [Independant menu component](https://neeto-editor.neeto.com/?path=/docs/examples-independent-menu-component--page)
 section shows an example with the `Menu` component in action.

stories/Examples/Menu.stories.mdx

@@ -1,6 +1,6 @@
 import { Meta, Canvas } from "@storybook/addon-docs";
 import FormikEditorDemo from "./FormikEditorDemo";
-import FormikEditor from "../../src";
+import { FormikEditor } from "../../src";
 
 <Meta
   title="Walkthroughs/Formik"