How to use styletron-engine-atomic - 10 common examples

// @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(
    //   () =>

This source code is licensed under the MIT license found in the
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();

test("driver", t => {
  let cssString;
  const instance = new Server();
  const styleObject = {
    color: "red",
  };
  driver(styleObject, instance);
  cssString = ".ae{color:red}";
  t.strictEqual(instance.getCss(), cssString, "injects basic style");
  const fontFallback = {
    fontFamily: ["Arial", "sans-serif"],
  };
  driver(fontFallback, instance);
  cssString = `${cssString}.af{font-family:Arial,sans-serif}`;
  t.strictEqual(instance.getCss(), cssString, "injects font fallbacks - basic");
  const fontFace = {
    src: "url(some-awesome-font.ttf)",
  };
  const declaredFontFaceFallback = {