How to use the styletron-engine-atomic.Client function in styletron-engine-atomic

// @flow
import * as React from 'react';
import {Provider as StyletronProvider} from 'styletron-react';
import {Client as Styletron} from 'styletron-engine-atomic';
import {ThemeProvider} from '../styles';
import DEFAULT_THEME from '../themes/light-theme';

const engine = new Styletron();

export const withStyletronProvider = (
  Component: React.ComponentType<*>,
) => (props: {}) => {
  return (
    
      
    
  );
};

export const withThemeProvider = (
  Component: React.ComponentType<*>,
) => (props: {}) => {
  return (

*/

// @flow
/* eslint-env browser */

import React from 'react';
import ReactDOM from 'react-dom';
import tests from './tests.js';

import {Provider as StyletronProvider} from 'styletron-react';
import {Client as Styletron} from 'styletron-engine-atomic';
import {LightTheme, DarkTheme} from '../src/themes/index.js';
import BaseProvider from '../src/helpers/base-provider.js';

window.E2E_TEST = true;
const engine = new Styletron();
const urlParams = new URLSearchParams(window.location.search);
const theme = urlParams.get('theme');
const app = (
  
    
      {tests()}
    
  
);

if (theme === 'dark') {
  window.document.body.classList.add('dark');
}

// $FlowFixMe
ReactDOM.render(app, document.getElementById('root'));

setOptions({
  theme: {
    ...themes.dark,
    mainFill: DarkTheme.colors.mono800,
    mainBackground: DarkTheme.colors.mono700,
    mainTextColor: DarkTheme.colors.mono100,
    dimmedTextColor: DarkTheme.colors.mono100,
    highlightColor: DarkTheme.colors.primary,
    successColor: DarkTheme.colors.positive,
    warningColor: DarkTheme.colors.warning,
    failColor: DarkTheme.colors.negative,
  },
});

const engine = new Styletron();

// this should be first decorator to avoid extra code to be parsed here
addDecorator(withInfo);

addDecorator(withKnobs);
addDecorator(checkA11y);

// Add providers for theme and styletron
addDecorator(story => {
  return (
    
      {story()}
    
  );
});

withOptions({
  name: 'baseui',
  url: 'https://github.com/uber-web/baseui',
});

setOptions({
  theme: {
    ...themes.normal,
    highlightColor: LightThemeMove.colors.primary,
    successColor: LightThemeMove.colors.positive,
    warningColor: LightThemeMove.colors.warning,
    failColor: LightThemeMove.colors.negative,
  },
});

const engine = new Styletron();

// this should be first decorator to avoid extra code to be parsed here
addDecorator(withInfo);

addDecorator(withKnobs);
addDecorator(checkA11y);

// Add providers for theme and styletron
addDecorator(story => {
  return (
    
      {story()}
    
  );
});

* distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

import React from "react"
import ReactDOM from "react-dom"
import App from "./App"

import { Client as Styletron } from "styletron-engine-atomic"
import { LightTheme, BaseProvider } from "baseui"
import { Provider as StyletronProvider } from "styletron-react"
import { SCSS_VARS } from "autogen/scssVariables"

const engine = new Styletron()
const popupZIndex = Number(SCSS_VARS["$z-index-popup-menu"])

ReactDOM.render(
  
    {/*
      The BaseProvider type definition doesn't support zIndex, but the object
      actually does. See: https://baseweb.design/components/base-provider/
      // @ts-ignore */}
    
      
    
  ,
  document.getElementById("root")
)

LICENSE file in the root directory of this source tree.
*/

/* eslint-disable flowtype/require-valid-file-annotation */
/* global document */

import {Client, Server} from 'styletron-engine-atomic';
import {DebugEngine} from 'styletron-react';

export const isServer = typeof window === 'undefined';

const getHydrate = () => document.getElementsByClassName('_styletron_hydrate_');

export const styletron = isServer
  ? new Server()
  : new Client({hydrate: getHydrate()});

export const debug =
  /*eslint-disable*/
  process.env.NODE_ENV === 'production' ? void 0 : new DebugEngine();

/* eslint-disable react/prop-types */
import React from 'react';
import { Client as Styletron } from 'styletron-engine-atomic';
import { Provider as StyletronProvider } from 'styletron-react';
import View from './View';

const styletron = new Styletron();

class Provider extends React.Component {
  render() {
    return (
      
        
      
    );
  }
}

export default Provider;

import Manifold from '@mlvis/manifold';
// todo: temp
import {loadUserData} from '@mlvis/manifold/actions';
// import {FEATURE_TYPE} from '@mlvis/mlvis-common/constants';
// import {loadMAData} from './actions';

const getManifoldState = state => state.demo.manifold;

const Container = styled.div`
  position: absolute;
  width: 100vw;
  height: 100vh;
  background: #eee;
`;

const engine = new Styletron();

class App extends Component {
  state = {
    showUploadModal: false,
    fileList: [],
  };

  componentDidMount = () => {
    // this.props.dispatch(
    //   loadMAData([
    //     '../data/ma_geo_partition.csv',
    //     '../data/ma_geo_nopartition.csv',
    //   ])
    // );
    // setTimeout(
    //   () =>

export function TestRoot({ children }: { children: JSX.Element }): JSX.Element {
  const store = configureStore(
    { base: { translations: {} } },
    (state: object) => state
  );
  const stylesheets = document.getElementsByClassName(STYLETRON_GLOBAL);
  const styletron = new StyletronClient({ hydrate: stylesheets, prefix: "_" });

  return (
    
      <div>
        
        
          
        
        {children}
      </div>
    
  );

export function memoryReactRender({ reducer = noopReducer, VDom }: Opts): void {
  const store = configureStore(JSONGlobals("state"), reducer);
  const { translations, manifest } = store.getState().base;

  initClientI18n(translations);
  initAssetURL(manifest);
  const stylesheets = document.getElementsByClassName(STYLETRON_GLOBAL);
  const styletron = new StyletronClient({ hydrate: stylesheets, prefix: "_" });

  render(
    
      {VDom}
    ,
    document.getElementById("root")
  );
}