How to use @twilio-paste/theme - 10 common examples

/* This file contains the code for the addon's panel */
import * as React from 'react';
import addonAPI from '@storybook/addons';
import {ThemeVariants} from '@twilio-paste/theme';
import {Events, ADDON_CODENAME, THEME_STORAGE_KEY} from './constants';

function findKeyByValue(value) {
  return Object.keys(ThemeVariants).find(key => ThemeVariants[key] === value);
}

class ThemeSwitcherPanel extends React.Component {
  state = {
    theme: localStorage.getItem(THEME_STORAGE_KEY) || ThemeVariants.CONSOLE,
  };

  onChangeTheme = e => {
    const {channel} = this.props;
    const theme = ThemeVariants[e.target.value];

    this.setState({
      theme,
    });

    // This is how we notify the preview frame wrapper (./index.js)
    channel.emit(Events.CHANGE_THEME, theme);
  };

  componentWillUnmount() {
    // Save the current theme to localStorage

const getTokensByTheme = (theme: ThemeVariants, props: TokensListProps): TokenCategory[] => {
  let tokens = [] as TokenCategory[];
  if (theme === ThemeVariants.CONSOLE) {
    if (props.consoleTokens != null) {
      // eslint-disable-next-line prefer-destructuring
      tokens = props.consoleTokens[0].node.tokens;
    }
  }
  if (theme === ThemeVariants.SENDGRID) {
    if (props.sendgridTokens != null) {
      // eslint-disable-next-line prefer-destructuring
      tokens = props.sendgridTokens[0].node.tokens;
    }
  }
  if (theme === ThemeVariants.DEFAULT) {
    if (props.defaultTokens != null) {
      // eslint-disable-next-line prefer-destructuring
      tokens = props.defaultTokens[0].node.tokens;
    }

const getTokensByTheme = (theme: ThemeVariants, props: TokensListProps): TokenCategory[] => {
  let tokens = [] as TokenCategory[];
  if (theme === ThemeVariants.CONSOLE) {
    if (props.consoleTokens != null) {
      // eslint-disable-next-line prefer-destructuring
      tokens = props.consoleTokens[0].node.tokens;
    }
  }
  if (theme === ThemeVariants.SENDGRID) {
    if (props.sendgridTokens != null) {
      // eslint-disable-next-line prefer-destructuring
      tokens = props.sendgridTokens[0].node.tokens;
    }
  }
  if (theme === ThemeVariants.DEFAULT) {
    if (props.defaultTokens != null) {
      // eslint-disable-next-line prefer-destructuring
      tokens = props.defaultTokens[0].node.tokens;
    }
  }
  return tokens;
};

const getTokensByTheme = (theme: ThemeVariants, props: TokensListProps): TokenCategory[] => {
  let tokens = [] as TokenCategory[];
  if (theme === ThemeVariants.CONSOLE) {
    if (props.consoleTokens != null) {
      // eslint-disable-next-line prefer-destructuring
      tokens = props.consoleTokens[0].node.tokens;
    }
  }
  if (theme === ThemeVariants.SENDGRID) {
    if (props.sendgridTokens != null) {
      // eslint-disable-next-line prefer-destructuring
      tokens = props.sendgridTokens[0].node.tokens;
    }
  }
  if (theme === ThemeVariants.DEFAULT) {
    if (props.defaultTokens != null) {
      // eslint-disable-next-line prefer-destructuring
      tokens = props.defaultTokens[0].node.tokens;
    }
  }
  return tokens;
};

const getThemeFromWindow = (): ThemeVariants => {
  let theme: ThemeVariants;
  if (typeof window !== 'undefined' && window.activeTheme !== '') {
    theme = window.activeTheme as ThemeVariants;
  } else {
    theme = ThemeVariants.CONSOLE as ThemeVariants;
  }
  return theme;
};

as="form"
      borderColor="colorBorderLight"
      borderRadius="borderRadius20"
      borderStyle="solid"
      borderWidth="borderWidth10"
      padding="space10"
    >
      
        Change the site theme
        
        Console
        
        SendGrid

const sendGridID = useUID();
  const pasteID = useUID();

  return (
    
      
        Change the site theme
        
        Console
        
        SendGrid

font-style: normal;
    font-weight: 400;
    src: url(/fonts/colfax-regular.woff2) format('woff2'), url(/fonts/colfax-regular.woff) format('woff');
  }

  @font-face {
    font-family: Colfax;
    font-style: normal;
    font-weight: 600;
    src: url(/fonts/colfax-medium.woff2) format('woff2'), url(/fonts/colfax-medium.woff) format('woff');
  }
`;

class ThemeWrapper extends React.Component {
  state = {
    theme: localStorage.getItem(THEME_STORAGE_KEY) || ThemeVariants.CONSOLE,
  };

  componentDidMount() {
    const {channel} = this.props;
    channel.addListener(Events.CHANGE_THEME, this.handleChangeTheme);
  }

  componentWillUnmount() {
    const {channel} = this.props;
    channel.removeListener(Events.CHANGE_THEME, this.handleChangeTheme);
  }

  handleChangeTheme = theme => {
    this.setState({
      theme,
    });

onChange={handleChange}
          type="radio"
          value={ThemeVariants.CONSOLE}
        />
        Console
        
        SendGrid
        
        Paste
      
    
  );
};

SendGrid
        
        Paste
      
    
  );
};