How to use the @storybook/theming.withTheme function in @storybook/theming

width: 101,
  height: 20,
});

const LogoLink = styled.a({
  display: 'inline-block',
  color: 'inherit',
  textDecoration: 'none',
});

const Head = styled.div({
  display: 'flex',
  alignItems: 'center',
});

const Brand = withTheme(({ theme: { brand } }) => (
  
    {brand || (
      
        
      
    )}
  
));

function SidebarHeader({ loading, menu: items, menuHighlighted, ...props }) {
  return (
    // TODO Use Button component
    // Use Tooltip instead of custom popout

}

const getStyles = (
  prevStyles: ViewportStyles,
  styles: Styles,
  isRotated: boolean
): ViewportStyles => {
  if (styles === null) {
    return null;
  }
  const result = typeof styles === 'function' ? styles(prevStyles) : styles;
  return isRotated ? flip(result) : result;
};

export const ViewportTool: FunctionComponent<{}> = React.memo(
  withTheme(({ theme }: { theme: Theme }) => {
    const { viewports, defaultViewport, disable } = useParameter(
      PARAM_KEY,
      {
        viewports: {},
        defaultViewport: responsiveViewport.id,
      }
    );
    const [state, setState] = useAddonState(ADDON_ID, {
      selected: defaultViewport || responsiveViewport.id,
      isRotated: false,
    });
    const list = toList(viewports);

    const { selected, isRotated } = state;
    const item =
      list.find(i => i.id === selected) ||

right: 0,
      width: 8,
      height: 8,
      borderRadius: 8,
      background: `${props.theme.color.positive}`,
    },
  }),
}));

const Head = styled.div({
  display: 'flex',
  alignItems: 'flex-start',
  justifyContent: 'space-between',
});

const Brand = withTheme(({ theme: { brand: { title = 'Storybook', url = './', image } } }) => {
  const targetValue = url === './' ? '' : '_blank';
  if (image === undefined && url === null) {
    return ;
  }
  if (image === undefined && url) {
    return (
      
        
      
    );
  }
  if (image === null && url === null) {
    return title;
  }
  if (image === null && url) {
    return ;

data: {
    name: string;
    args: any;
  };
  options: {
    clearOnStoryChange: boolean;
    limit: number;
  };
};

type ActionLoggerComponentProps = {
  onClear: Function;
  actions: LoggedAction[];
};

const ActionLoggerComponent: any /*React.SFC */ = withTheme(
  ({ actions, onClear, theme }) => (
    
      
        {actions.map((action: any) => (
          
            {action.count > 1 && {action.count}}

}

const getStyles = (
  prevStyles: ViewportStyles,
  styles: Styles,
  isRotated: boolean
): ViewportStyles => {
  if (styles === null) {
    return null;
  }
  const result = typeof styles === 'function' ? styles(prevStyles) : styles;
  return isRotated ? flip(result) : result;
};

export const ViewportTool: FunctionComponent = memo(
  withTheme(({ theme }: { theme: Theme }) => {
    const {
      viewports = MINIMAL_VIEWPORTS,
      defaultViewport = responsiveViewport.id,
      disable,
    } = useParameter(PARAM_KEY, {});
    const [state, setState] = useAddonState(ADDON_ID, {
      selected: defaultViewport,
      isRotated: false,
    });
    const list = toList(viewports);

    useEffect(() => {
      setState({
        selected:
          defaultViewport || (viewports[state.selected] ? state.selected : responsiveViewport.id),
        isRotated: state.isRotated,

import Inspector from 'react-inspector';
import { ActionBar, ScrollArea } from '@storybook/components';

import { Action, InspectorContainer, Counter } from './style';
import { ActionDisplay } from '../../models';

export const Wrapper = styled(({ children, className }) => (
  
    {children}
  
))({
  margin: 0,
  padding: '10px 5px 20px',
});

const ThemedInspector = withTheme(({ theme, ...props }) => (
  
));

interface ActionLoggerProps {
  actions: ActionDisplay[];
  onClear: () => void;
}

export const ActionLogger = ({ actions, onClear }: ActionLoggerProps) => (
  
    
      {actions.map((action: ActionDisplay) => (
        
          {action.count > 1 && {action.count}}

height: PropTypes.number.isRequired,
  }).isRequired,
  options: PropTypes.shape({
    isFullscreen: PropTypes.bool.isRequired,
    showNav: PropTypes.bool.isRequired,
    showPanel: PropTypes.bool.isRequired,
    panelPosition: PropTypes.string.isRequired,
  }).isRequired,
  viewMode: PropTypes.oneOf(['story', 'info']),
  theme: PropTypes.shape({}).isRequired,
};
Layout.defaultProps = {
  viewMode: undefined,
};

const ThemedLayout = withTheme(Layout);

export { ThemedLayout as Layout };