How to use baseui - 10 common examples

import { PaymentCard, StatefulPaymentCard } from 'baseui/payment-card';
import { PhoneInput, StatefulPhoneInput, COUNTRIES } from 'baseui/phone-input';

// Base API
const newTheme = createTheme({...lightThemePrimitives}, {}); // $ExpectType Theme
createTheme({primary: 'red'}, {}); // $ExpectError

mergeOverrides({style: {}}, {props: {}});
mergeOverrides({style: {}}, 'hello'); // $ExpectError
mergeOverrides({style: {}}, {name: 'override'}); // $ExpectError

styled(StyledProgressSteps, { marginTop: '10px' });
styled(StyledProgressSteps, { marginTop: null }); // $ExpectError
styled(StyledProgressSteps, ({ $theme }) => ({ marginTop: '10px' }));
const StyledAnchor = styled('a', { marginTop: '10px' });
const NewStyledProgressSteps = styled(
    StyledProgressSteps,
    ({ $theme, $disabled }) => ({ marginTop: '10px' })
);

;
; // $ExpectError
;

; // $ExpectError

// Accordion

    Content
;

;
; // $ExpectError
; // $ExpectError

// Breadcrumbs

    Parent Page
    Sub-Parent Page
    <span>Current Page</span>
;
;

// Button
<button>Click Me</button>;
<button kind="secondary">Click Me</button>;
<button size="{BUTTON_SIZE.default}" shape="{BUTTON_SHAPE.default}" kind="{BUTTON_KIND.minimal}">
    Click Me
</button>;
<button kind="invalid">Click Me</button>; // $ExpectError
<button>Click Me</button>;
<button>Click Me</button>; // $ExpectError
<button size="default">Click Me</button>;
<button size="huge">Click Me</button>; // $ExpectError
<button size="compact">Click Me</button>;
<button size="default">Click Me</button>;
<button size="large">Click Me</button>;
<button shape="square">Click Me</button>;
<button shape="round">Click Me</button>;
<button shape="triangle">Primary</button>; // $ExpectError
<button> <h1>}&gt;Open Menu;

// Button-Group</h1></button>

import { StatefulTextarea as Textarea } from 'baseui/textarea';
import { ToasterContainer, Toast, KIND as TOAST_KIND } from 'baseui/toast';
import { StatefulTooltip } from 'baseui/tooltip';
import {
    Label1,
    Label2,
    Caption1,
    Caption2,
    Paragraph1,
    Paragraph2,
} from 'baseui/typography';
import { PaymentCard, StatefulPaymentCard } from 'baseui/payment-card';
import { PhoneInput, StatefulPhoneInput, COUNTRIES } from 'baseui/phone-input';

// Base API
const newTheme = createTheme({...lightThemePrimitives}, {}); // $ExpectType Theme
createTheme({primary: 'red'}, {}); // $ExpectError

mergeOverrides({style: {}}, {props: {}});
mergeOverrides({style: {}}, 'hello'); // $ExpectError
mergeOverrides({style: {}}, {name: 'override'}); // $ExpectError

styled(StyledProgressSteps, { marginTop: '10px' });
styled(StyledProgressSteps, { marginTop: null }); // $ExpectError
styled(StyledProgressSteps, ({ $theme }) => ({ marginTop: '10px' }));
const StyledAnchor = styled('a', { marginTop: '10px' });
const NewStyledProgressSteps = styled(
    StyledProgressSteps,
    ({ $theme, $disabled }) => ({ marginTop: '10px' })
);

;

// Header Navigation

    
        Uber
    
    
    
        
            <button>Get started</button>
        
        
            <button>Get started</button>
        
    
    
        
            <button>Get started</button>
        
    
;

// Heading
Base Web [L1];

    Subtitle [L5]
;
Span;
; // $ExpectError
; // $ExpectError

// Icon

queryComplete(data) {
    const {children} = this.props;
    const {config} = data.site.siteMetadata;
    const {tableOfContents, allMarkdown} = data;

    // console.log('StaticQuery result', config, tableOfContents, allMarkdown);
    const themeFromConfig = ((config && config.THEME_OVERRIDES) || []).reduce(
      (prev, curr) => ({...prev, [curr.key]: curr.value}),
      {}
    );

    const theme = createTheme({...lightThemePrimitives, ...themeFromConfig});

    return (
      
        <div style="{{position:">{children}</div>
      
    );
  }

overflow: 'hidden',
  textOverflow: 'ellipsis',
  whiteSpace: 'nowrap',
  width: '150px'
}));

// search

export const SearchContainer = styled('div', ({$theme, ...props}) => ({
  position: 'relative',
  height: $theme.sizing.scale1000,
  marginBottom: '20px',
  background: $theme.colors.mono200
}));

export const IconContainer = styled('div', ({$theme, ...props}) => ({
  position: 'absolute',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  width: $theme.sizing.scale1000,
  height: $theme.sizing.scale1000
}));

export const InputSearch = styled('input', ({$theme, ...props}) => ({
  boxShadow: `rgba(0, 0, 0, 0) 0px 2px 6px`,
  border: `1px solid transparent`,
  transition: `0.3s`,
  fontSize: `14px`,
  fontWeight: 500,
  lineHeight: `20px`,
  padding: `10px 10px 10px 40px`,

// document is long, the TOC will be not visible (above the viewport).
    // to address that, when the TOC is open, we are removing the document from the flow, so
    // that the TOC will be visible. Now, there are several ways to do that, some of which
    // introduce another problem - when closing the table of contents, we want the user to be
    // back exactly where they were before they opened it, as opposed to back on the top.
    // that's one way to approach this -
  })
);

export const Body = styled('div', ({$theme, ...props}) => ({
  height: '100vh'
}));

// example

export const MainExample = styled('main', ({$theme, ...props}) => ({
  height: 'calc(100vh - 96px)',
  [`@media screen and (max-width: ${$theme.breakpoints.medium})`]: {
    marginTop: '64px'
  }
}));

// examples

export const MainExamples = styled('main', ({$theme, ...props}) => ({
  background: $theme.colors.mono100,
  display: 'flex',
  flexWrap: 'wrap',
  [`@media screen and (max-width: ${$theme.breakpoints.medium})`]: {
    marginTop: '64px'
  }
}));

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 */

import React from 'react';
import {withStyle} from 'baseui';
import {Navigation, StyledNavItem as NavItem} from 'baseui/side-navigation';
import {Label2, Label3} from 'baseui/typography';
import Link from 'next/link';

import Routes from '../routes';

const StyledNavItem = withStyle(NavItem, ({$theme, $active}) => {
  const styleOverride = {};

  if ($theme.name.startsWith('dark')) {
    if ($active) {
      styleOverride.background = $theme.colors.backgroundSecondary;
    }
  }
  return {
    paddingTop: $theme.sizing.scale200,
    paddingBottom: $theme.sizing.scale200,
    ...styleOverride,
  };
});

const removeSlash = path => {
  if (path) {

},
            ":disabled": {
              backgroundColor: "transparent",
              color: grayDark,
            },
          },
        },
      },
    },
  },
}

export const datePickerOverrides = {
  Popover: {
    props: {
      placement: POPOVER_PLACEMENT.bottomLeft,
    },
  },
  CalendarContainer: {
    style: {
      fontSize: fontSizeSm,
    },
  },
  CalendarHeader: {
    style: {
      // Make header look nicer.
      backgroundColor: gray,
    },
  },
  MonthHeader: {
    style: {
      // Make header look nicer.

font450: { ...fontStyles }, // Radio
    font460: { ...fontStyles }, // Calendar header buttons
    font470: { ...fontStyles }, // Button
    font500: { ...fontStyles }, // Selected items in selectbox
    font600: {},
  },

  colors: {
    white: white,
    black: black,
    tickMarkFillDisabled: grayLighter,
    tickFillDisabled: gray,
  },
}

export const mainWidgetTheme = createTheme(mainThemePrimitives, themeOverrides)

export const sidebarWidgetTheme = createTheme(
  {
    ...mainThemePrimitives,

    // Override gray values based on what is actually used in BaseWeb, and the
    // way we want it to match our Bootstrap theme.
    mono100: white, // Popup menu
    mono200: white, // Text input, text area, selectbox
    mono300: white, // Disabled widget background
    mono400: grayLight, // Slider track
  },
  themeOverrides
)

// Log the widget theme just for debug purposes.