chore: wip

packages/react-ui/internal/ShadowDom/ShadowDom.stories.tsx

@@ -0,0 +1,34 @@
+import React, { FC } from 'react';
+import { css } from '@emotion/css';
+
+import { Button } from '../../components/Button';
+import { Meta } from '../../typings/stories';
+import { Gapped } from '../../components/Gapped';
+
+import ShadowDomContainer from './ShadowDomContainer';
+
+export default {
+  title: 'ShadowDom',
+} as Meta;
+
+const TestComponent: FC = ({ children }) => (
+  <div
+    className={css`
+      background-color: steelblue;
+      padding: 30px;
+      font-size: 20px;
+      color: #eae9f1;
+    `}
+  >
+    <Button>{children}</Button>
+  </div>
+);
+
+export const Default = () => (
+  <Gapped vertical>
+    <TestComponent>Without shadow DOM</TestComponent>
+    <ShadowDomContainer>
+      <TestComponent>With shadow DOM</TestComponent>
+    </ShadowDomContainer>
+  </Gapped>
+);

packages/react-ui/internal/ShadowDom/ShadowDomContainer.tsx

@@ -0,0 +1,46 @@
+import React, { FC, useState } from 'react';
+import root from 'react-shadow';
+import { ThemeProvider } from 'emotion-theming';
+import { CacheProvider } from '@emotion/core';
+import createCache from '@emotion/cache';
+import type { EmotionCache } from '@emotion/utils';
+
+import type { Nullable } from '../../typings/utility-types';
+import { useTheme } from '../../lib/theming/useTheme';
+
+// Define custom location to insert Emotion styles (instead of document head)
+// From: https://emotion.sh/docs/cache-provider
+
+const ShadowDomContainer: FC = ({ children }: any) => {
+  const theme = useTheme();
+  const [emotionCache, setEmotionCache] = useState<Nullable<EmotionCache>>(null);
+
+  function setEmotionStyles(ref: HTMLDivElement) {
+    if (ref && !emotionCache) {
+      const createdEmotionWithRef = createCache({
+        container: ref,
+      });
+      setEmotionCache(createdEmotionWithRef);
+    }
+  }
+
+  function setShadowRefs(ref: HTMLDivElement) {
+    setEmotionStyles(ref);
+  }
+
+  console.log(emotionCache);
+  console.log(theme);
+
+  return (
+    <root.div id="shadow-host">
+      <div ref={setShadowRefs} />
+      {emotionCache && (
+        <ThemeProvider theme={theme}>
+          <CacheProvider value={emotionCache}>{children}</CacheProvider>
+        </ThemeProvider>
+      )}
+    </root.div>
+  );
+};
+
+export default ShadowDomContainer;

packages/react-ui/package.json

@@ -61,6 +61,7 @@
     "react-imask": "^7.4.0",
     "react-input-mask": "2.0.4",
     "react-is": "^17.0.2",
+    "react-shadow": "^20.4.0",
     "react-transition-group": "^4.4.2",
     "shallowequal": "^1.1.0",
     "stylis-plugin-extra-scope": "^0.3.0",

yarn.lock

@@ -14374,6 +14374,11 @@ humanize-url@^1.0.0:
     normalize-url "^1.0.0"
     strip-url-auth "^1.0.0"
 
+humps@^2.0.1:
+  version "2.0.1"
+  resolved "https://nexus.kontur.host/repository/kontur-npm-group/humps/-/humps-2.0.1.tgz#dd02ea6081bd0568dc5d073184463957ba9ef9aa"
+  integrity sha512-E0eIbrFWUhwfXJmsbdjRQFQPrl5pTEoKlz163j1mTqqUnU9PgR4AgB8AIITzuB3vLBdxZXyZ9TDIrwB2OASz4g==
+
 husky@^6.0.0:
   version "6.0.0"
   resolved "https://registry.npmjs.org/husky/-/husky-6.0.0.tgz#810f11869adf51604c32ea577edbc377d7f9319e"
@@ -16956,7 +16961,7 @@ [email protected], jss@^10.0.0:
 
 jszip@^3.6.0:
   version "3.10.1"
-  resolved "https://registry.yarnpkg.com/jszip/-/jszip-3.10.1.tgz#34aee70eb18ea1faec2f589208a157d1feb091c2"
+  resolved "https://nexus.kontur.host/repository/kontur-npm-group/jszip/-/jszip-3.10.1.tgz#34aee70eb18ea1faec2f589208a157d1feb091c2"
   integrity sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==
   dependencies:
     lie "~3.3.0"
@@ -20655,6 +20660,13 @@ [email protected], react-router@^6.0.0:
   dependencies:
     "@remix-run/router" "1.2.1"
 
+react-shadow@^20.4.0:
+  version "20.4.0"
+  resolved "https://nexus.kontur.host/repository/kontur-npm-group/react-shadow/-/react-shadow-20.4.0.tgz#859f364c91fee625d882384dac4769e2ad3e66c6"
+  integrity sha512-sirvAmFja7Ss6MoyQbKWxaQ5IDTAW3Za3Tvegylfr5jXnwKZObHRIyiatefeNlskoGKfuPaZ8DNT052T0SUGcg==
+  dependencies:
+    humps "^2.0.1"
+
 react-shallow-renderer@^16.13.1:
   version "16.14.1"
   resolved "https://registry.npmjs.org/react-shallow-renderer/-/react-shallow-renderer-16.14.1.tgz#bf0d02df8a519a558fd9b8215442efa5c840e124"
@@ -21852,7 +21864,7 @@ select@^1.1.2:
 
 [email protected], selenium-webdriver@^4.3.1:
   version "4.0.0-beta.4"
-  resolved "https://registry.yarnpkg.com/selenium-webdriver/-/selenium-webdriver-4.0.0-beta.4.tgz#db4fc7505a515ea3b4a95ded031b738a1544eddd"
+  resolved "https://nexus.kontur.host/repository/kontur-npm-group/selenium-webdriver/-/selenium-webdriver-4.0.0-beta.4.tgz#db4fc7505a515ea3b4a95ded031b738a1544eddd"
   integrity sha512-+s/CIYkWzmnC9WASBxxVj7Lm0dcyl6OaFxwIJaFCT5WCuACiimEEr4lUnOOFP/QlKfkDQ56m+aRczaq2EvJEJg==
   dependencies:
     jszip "^3.6.0"
@@ -23331,11 +23343,9 @@ tmp@^0.0.33:
     os-tmpdir "~1.0.2"
 
 tmp@^0.2.1:
-  version "0.2.1"
-  resolved "https://registry.npmjs.org/tmp/-/tmp-0.2.1.tgz#8457fc3037dcf4719c251367a1af6500ee1ccf14"
-  integrity sha512-76SUhtfqR2Ijn+xllcI5P1oyannHNHByD80W1q447gU3mp9G9PSpGdWmjUOHRDPiHYacIk66W7ubDTuPF3BEtQ==
-  dependencies:
-    rimraf "^3.0.0"
+  version "0.2.3"
+  resolved "https://nexus.kontur.host/repository/kontur-npm-group/tmp/-/tmp-0.2.3.tgz#eb783cc22bc1e8bebd0671476d46ea4eb32a79ae"
+  integrity sha512-nZD7m9iCPC5g0pYmcaxogYKggSfLsdxl8of3Q/oIbqCqLLIO9IAF0GWjX1z9NZRHPiXv8Wex4yDCaZsgEw0Y8w==
 
 [email protected]:
   version "1.0.5"
@@ -24806,9 +24816,9 @@ write-pkg@^4.0.0:
     write-json-file "^3.2.0"
 
 ws@>=7.4.6:
-  version "8.13.0"
-  resolved "https://registry.yarnpkg.com/ws/-/ws-8.13.0.tgz#9a9fb92f93cf41512a0735c8f4dd09b8a1211cd0"
-  integrity sha512-x9vcZYTrFPC7aSIbj7sRCYo7L/Xb8Iy+pW0ng0wt2vCJv7M9HOMy0UoN3rr+IFC7hb7vXoqS+P9ktyLLLhO+LA==
+  version "8.16.0"
+  resolved "https://nexus.kontur.host/repository/kontur-npm-group/ws/-/ws-8.16.0.tgz#d1cd774f36fbc07165066a60e40323eab6446fd4"
+  integrity sha512-HS0c//TP7Ina87TfiPUz1rQzMhHrl/SG2guqRcTOIUYD2q8uhUdNHZYJUaQ8aTGPzCh+c6oawMKW35nFl1dxyQ==
 
 ws@^5.2.0:
   version "5.2.3"