feat: remove shadow dom and global styles (#555)

BREAKING CHANGE: the shadow dom has been removed from the root layout and global styles no longer apply to it. Recommended global styles (same as the TailwindCSS preflight styles) are published by the library so that users can use them in their applications.

.storybook/preview.ts

@@ -1,7 +1,8 @@
 import type { Preview } from '@storybook/react';
 import { RootLayoutDecorator } from '../stories/utils';
 
-import '../src/styles/storybook-globals.css';
+import '../styles/storybook-globals.css';
+import '../styles/preflight.css';
 
 const preview: Preview = {
   decorators: [RootLayoutDecorator],

README.md

@@ -19,6 +19,14 @@ React components to build scientific applications UI.
 > npm i react-science
 ```
 
+### Global css
+
+If you use tailwindcss and already you added `@tailwind base;` to your tailwind stylesheet, you can skip this step.
+
+Otherwise, import the global styles in your application:
+
+`import 'react-science/styles/preflight.css';`
+
 ## Introduction
 
 Science has specific requirements to display and process data. This is especially true in chemistry where a large number of techniques are used to extract important information (or characterize) samples.

package.json

@@ -17,15 +17,17 @@
       "types": "./lib-esm/components/index.d.ts",
       "require": "./lib/components/index.js",
       "default": "./lib-esm/components/index.js"
-    }
+    },
+    "./styles/*.css": "./styles/*.css"
   },
   "files": [
     "lib",
     "lib-esm",
-    "src"
+    "src",
+    "styles/preflight.css"
   ],
   "scripts": {
-    "build": "npm run clean && npm run build-ts && npm run fix-react-shadow",
+    "build": "npm run clean && npm run build-ts",
     "build-all": "npm run build-app && npm run build-storybook && mv storybook-static dist/stories",
     "build-app": "cross-env NO_MINIFY=true vite build",
     "build-storybook": "storybook build",
@@ -37,7 +39,6 @@
     "dev-app": "vite --open /pages/demo.html",
     "eslint": "eslint .",
     "eslint-fix": "npm run eslint -- --fix",
-    "fix-react-shadow": "node scripts/fix-react-shadow.mjs",
     "playwright": "npm run playwright-ct -- --project chromium && npm run playwright-e2e -- --project chromium",
     "playwright-ct": "playwright test -c playwright-ct.config.ts",
     "playwright-e2e": "playwright test -c playwright-e2e.config.ts",
@@ -92,7 +93,6 @@
     "react-kbs": "^2.1.1",
     "react-plot": "^1.4.2",
     "react-popper": "^2.3.0",
-    "react-shadow": "^20.4.0",
     "spc-parser": "^0.7.2",
     "tinycolor2": "^1.6.0",
     "use-resize-observer": "^9.1.0",

playwright/index.ts

@@ -1 +1 @@
-import '../src/components/root-layout/css-reset/preflight.css';
+import '../styles/preflight.css';

src/components/root-layout/RootLayout.tsx

@@ -1,15 +1,10 @@
-/** @jsxImportSource @emotion/react */
-import { Global } from '@emotion/react';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactNode, CSSProperties, useState, useCallback } from 'react';
-// @ts-expect-error We load emotion.esm because until this project is moved to true ESM.
-import root from 'react-shadow/emotion.esm';
 
 import { AccordionProvider } from '../accordion/AccordionContext';
 
 import { RootLayoutProvider } from './RootLayoutContext';
 import { CustomDivPreflight } from './css-reset/customPreflight';
-import { preflight } from './css-reset/preflight';
 import { queryClient } from './queryClient';
 
 interface RootLayoutProps {
@@ -35,15 +30,14 @@ export function RootLayout(props: RootLayoutProps) {
   }, []);
 
   return (
-    <root.div style={{ ...style, ...props.style }}>
-      <Global styles={preflight} />
+    <div style={{ ...style, ...props.style }}>
       <CustomDivPreflight ref={ref}>
         <RootLayoutProvider innerRef={rootRef}>
           <QueryClientProvider client={queryClient}>
             <AccordionProvider>{props.children}</AccordionProvider>
           </QueryClientProvider>
         </RootLayoutProvider>
       </CustomDivPreflight>
-    </root.div>
+    </div>
   );
 }