feat: extract MUI react components into a new optional package `@remi…

…rror/react-ui`
remirror · Nov 6, 2023 · 4ad3cd1 · 4ad3cd1
1 parent b1d683f
commit 4ad3cd1
Show file tree

Hide file tree

Showing 118 changed files with 629 additions and 563 deletions.
diff --git a/.size-limit.json b/.size-limit.json
@@ -823,28 +823,7 @@
       "react",
       "react-dom",
       "@remirror/core",
-      "@remirror/extension-blockquote",
-      "@remirror/extension-bold",
-      "@remirror/extension-callout",
-      "@remirror/extension-code",
-      "@remirror/extension-code-block",
-      "@remirror/extension-columns",
-      "@remirror/extension-find",
-      "@remirror/extension-font-size",
-      "@remirror/extension-heading",
-      "@remirror/extension-history",
-      "@remirror/extension-horizontal-rule",
-      "@remirror/extension-italic",
-      "@remirror/extension-list",
-      "@remirror/extension-node-formatting",
       "@remirror/extension-positioner",
-      "@remirror/extension-strike",
-      "@remirror/extension-sub",
-      "@remirror/extension-sup",
-      "@remirror/extension-tables",
-      "@remirror/extension-text-color",
-      "@remirror/extension-underline",
-      "@remirror/extension-whitespace",
       "@remirror/icons",
       "@remirror/messages",
       "@remirror/react-core",
@@ -904,6 +883,49 @@
     "running": false,
     "gzip": true
   },
+  {
+    "name": "@remirror/react-ui",
+    "limit": "200 KB",
+    "path": "packages/remirror__react-ui/dist/remirror-react-ui.js",
+    "ignore": [
+      "@remirror/pm",
+      "@types/react",
+      "@types/react-dom",
+      "react",
+      "react-dom",
+      "@remirror/core",
+      "@remirror/extension-blockquote",
+      "@remirror/extension-bold",
+      "@remirror/extension-callout",
+      "@remirror/extension-code",
+      "@remirror/extension-code-block",
+      "@remirror/extension-columns",
+      "@remirror/extension-find",
+      "@remirror/extension-font-size",
+      "@remirror/extension-heading",
+      "@remirror/extension-history",
+      "@remirror/extension-horizontal-rule",
+      "@remirror/extension-italic",
+      "@remirror/extension-list",
+      "@remirror/extension-node-formatting",
+      "@remirror/extension-positioner",
+      "@remirror/extension-strike",
+      "@remirror/extension-sub",
+      "@remirror/extension-sup",
+      "@remirror/extension-tables",
+      "@remirror/extension-text-color",
+      "@remirror/extension-underline",
+      "@remirror/extension-whitespace",
+      "@remirror/icons",
+      "@remirror/messages",
+      "@remirror/react-components",
+      "@remirror/react-core",
+      "@remirror/react-hooks",
+      "@remirror/theme"
+    ],
+    "running": false,
+    "gzip": true
+  },
   {
     "name": "@remirror/react-utils",
     "limit": "10 KB",

diff --git a/packages/remirror__react-components/__e2e__/tsconfig.json b/packages/remirror__react-components/__e2e__/tsconfig.json
@@ -35,72 +35,9 @@
     {
       "path": "../../remirror__core/src"
     },
-    {
-      "path": "../../remirror__extension-blockquote/src"
-    },
-    {
-      "path": "../../remirror__extension-bold/src"
-    },
-    {
-      "path": "../../remirror__extension-callout/src"
-    },
-    {
-      "path": "../../remirror__extension-code/src"
-    },
-    {
-      "path": "../../remirror__extension-code-block/src"
-    },
-    {
-      "path": "../../remirror__extension-columns/src"
-    },
-    {
-      "path": "../../remirror__extension-find/src"
-    },
-    {
-      "path": "../../remirror__extension-font-size/src"
-    },
-    {
-      "path": "../../remirror__extension-heading/src"
-    },
-    {
-      "path": "../../remirror__extension-history/src"
-    },
-    {
-      "path": "../../remirror__extension-horizontal-rule/src"
-    },
-    {
-      "path": "../../remirror__extension-italic/src"
-    },
-    {
-      "path": "../../remirror__extension-list/src"
-    },
-    {
-      "path": "../../remirror__extension-node-formatting/src"
-    },
     {
       "path": "../../remirror__extension-positioner/src"
     },
-    {
-      "path": "../../remirror__extension-strike/src"
-    },
-    {
-      "path": "../../remirror__extension-sub/src"
-    },
-    {
-      "path": "../../remirror__extension-sup/src"
-    },
-    {
-      "path": "../../remirror__extension-tables/src"
-    },
-    {
-      "path": "../../remirror__extension-text-color/src"
-    },
-    {
-      "path": "../../remirror__extension-underline/src"
-    },
-    {
-      "path": "../../remirror__extension-whitespace/src"
-    },
     {
       "path": "../../remirror__icons/src"
     },

diff --git a/packages/remirror__react-components/__tests__/tsconfig.json b/packages/remirror__react-components/__tests__/tsconfig.json
@@ -37,72 +37,9 @@
     {
       "path": "../../remirror__core/src"
     },
-    {
-      "path": "../../remirror__extension-blockquote/src"
-    },
-    {
-      "path": "../../remirror__extension-bold/src"
-    },
-    {
-      "path": "../../remirror__extension-callout/src"
-    },
-    {
-      "path": "../../remirror__extension-code/src"
-    },
-    {
-      "path": "../../remirror__extension-code-block/src"
-    },
-    {
-      "path": "../../remirror__extension-columns/src"
-    },
-    {
-      "path": "../../remirror__extension-find/src"
-    },
-    {
-      "path": "../../remirror__extension-font-size/src"
-    },
-    {
-      "path": "../../remirror__extension-heading/src"
-    },
-    {
-      "path": "../../remirror__extension-history/src"
-    },
-    {
-      "path": "../../remirror__extension-horizontal-rule/src"
-    },
-    {
-      "path": "../../remirror__extension-italic/src"
-    },
-    {
-      "path": "../../remirror__extension-list/src"
-    },
-    {
-      "path": "../../remirror__extension-node-formatting/src"
-    },
     {
       "path": "../../remirror__extension-positioner/src"
     },
-    {
-      "path": "../../remirror__extension-strike/src"
-    },
-    {
-      "path": "../../remirror__extension-sub/src"
-    },
-    {
-      "path": "../../remirror__extension-sup/src"
-    },
-    {
-      "path": "../../remirror__extension-tables/src"
-    },
-    {
-      "path": "../../remirror__extension-text-color/src"
-    },
-    {
-      "path": "../../remirror__extension-underline/src"
-    },
-    {
-      "path": "../../remirror__extension-whitespace/src"
-    },
     {
       "path": "../../remirror__icons/src"
     },

diff --git a/packages/remirror__react-components/package.json b/packages/remirror__react-components/package.json
@@ -44,30 +44,8 @@
     "@emotion/react": "^11.11.0",
     "@emotion/styled": "^11.11.0",
     "@floating-ui/react": "^0.24.3",
-    "@mui/material": "^5.13.2",
     "@remirror/core": "3.0.0-beta.0",
-    "@remirror/extension-blockquote": "3.0.0-beta.0",
-    "@remirror/extension-bold": "3.0.0-beta.0",
-    "@remirror/extension-callout": "3.0.0-beta.0",
-    "@remirror/extension-code": "3.0.0-beta.0",
-    "@remirror/extension-code-block": "3.0.0-beta.0",
-    "@remirror/extension-columns": "3.0.0-beta.0",
-    "@remirror/extension-find": "1.0.0-beta.0",
-    "@remirror/extension-font-size": "3.0.0-beta.0",
-    "@remirror/extension-heading": "3.0.0-beta.0",
-    "@remirror/extension-history": "3.0.0-beta.0",
-    "@remirror/extension-horizontal-rule": "3.0.0-beta.0",
-    "@remirror/extension-italic": "3.0.0-beta.0",
-    "@remirror/extension-list": "3.0.0-beta.0",
-    "@remirror/extension-node-formatting": "3.0.0-beta.0",
     "@remirror/extension-positioner": "3.0.0-beta.0",
-    "@remirror/extension-strike": "3.0.0-beta.0",
-    "@remirror/extension-sub": "3.0.0-beta.0",
-    "@remirror/extension-sup": "3.0.0-beta.0",
-    "@remirror/extension-tables": "3.0.0-beta.0",
-    "@remirror/extension-text-color": "3.0.0-beta.0",
-    "@remirror/extension-underline": "3.0.0-beta.0",
-    "@remirror/extension-whitespace": "3.0.0-beta.0",
     "@remirror/icons": "3.0.0-beta.0",
     "@remirror/messages": "3.0.0-beta.0",
     "@remirror/react-core": "3.0.0-beta.0",

diff --git a/packages/remirror__react-components/src/find-replace/find-replace-component.tsx b/packages/remirror__react-components/src/find-replace/find-replace-component.tsx
diff --git a/packages/remirror__react-components/src/index.ts b/packages/remirror__react-components/src/index.ts
@@ -1,9 +1,4 @@
-export * from './button-groups';
-export * from './buttons';
-export * from './find-replace';
 export * from './floating-menu';
 export * from './icons/icons-base';
-export * from './menus';
 export * from './popups';
 export * from './providers';
-export * from './toolbar';
diff --git a/packages/remirror__react-components/src/providers/theme-provider.tsx b/packages/remirror__react-components/src/providers/theme-provider.tsx
@@ -3,7 +3,6 @@
  *
  * The `ThemeProvider` to wrap your editor with when using these components.
  */
-import { createTheme, ThemeProvider as MuiThemeProvider } from '@mui/material';
 import React, {
   createContext,
   ElementType,
@@ -75,28 +74,11 @@ export const ThemeProvider = (props: ThemeProviderProps): ReactElement<ThemeProv
   const { children, as: Component = 'div' } = props;
   const { theme, style, className } = useTheme({ theme: props.theme ?? defaultRemirrorTheme });
 
-  const muiTheme = createTheme({
-    palette: {
-      primary: {
-        main: theme.color?.primary ?? defaultRemirrorTheme.color.primary,
-        dark: theme.color?.hover?.primary ?? defaultRemirrorTheme.color.hover.primary,
-        contrastText: theme.color?.primaryText ?? defaultRemirrorTheme.color.primaryText,
-      },
-      secondary: {
-        main: theme.color?.secondary ?? defaultRemirrorTheme.color.secondary,
-        dark: theme.color?.hover?.secondary ?? defaultRemirrorTheme.color.hover.secondary,
-        contrastText: theme.color?.secondaryText ?? defaultRemirrorTheme.color.secondaryText,
-      },
-    },
-  });
-
   return (
-    <MuiThemeProvider theme={muiTheme}>
-      <ThemeContext.Provider value={theme}>
-        <Component style={style} className={className}>
-          {children}
-        </Component>
-      </ThemeContext.Provider>
-    </MuiThemeProvider>
+    <ThemeContext.Provider value={theme}>
+      <Component style={style} className={className}>
+        {children}
+      </Component>
+    </ThemeContext.Provider>
   );
 };
diff --git a/packages/remirror__react-components/src/toolbar/base-toolbar.tsx b/packages/remirror__react-components/src/toolbar/base-toolbar.tsx