@smartgear/edison

SmartGear Edison Components and Material-UI Theme.

Install

npm install --save @smartgear/edison

Usage

Bootstrapped Application

import React from 'react';

import { ThemeProvider, makeStyles } from '@smartgear/edison';
import { SmartgearIcons } from '@smartgear/icons';

import {
  CssBaseline,
  Card,
  CardActions,
  Button,
  CardContent,
  Typography,
  CardHeader,
  Avatar,
} from '@material-ui/core';

const App: React.FC = () => {

  // By default, two themes are registerd:
  // "Siemens (Light)" and "Siemens (Dark)"
  const themeName = 'Siemens (Light)' 
  return (
    <ThemeProvider theme="Siemens (Light)">
      <AppContent />
    </ThemeProvider>
  );
}

const useStyles = makeStyles(theme => ({
  root: {
    left: 0,
    right: 0,
    marginTop: theme.spacing(10),
    marginBottom: theme.spacing(10),
    marginLeft: 'auto',
    marginRight: 'auto',
    maxWidth: '800px',
    maxHeight: '800px',
  },
}));

const AppContent: React.FC = () => {
  const classes = useStyles();
  return (
    <div className={classes.root}>
      <CssBaseline />
      <Card>
        <CardHeader
          title="SmartGear Edison Theme"
          avatar={
            <Avatar>
              <SmartgearIcons.Elevation />
            </Avatar>
          }
        >
        </CardHeader>
        <CardContent>
          <Typography variant='body1'>This is a card</Typography>
        </CardContent>
        <CardActions>
          <Button color='secondary' variant='contained'>Secondary</Button>
          <Button color='primary' variant='outlined'>Primary</Button>
        </CardActions>
      </Card>
    </div>
  )
}

export default App;

Example Theme Switcher

import {
  edisonThemeCreatorFactory,
  SiemensBaseColors,
  ThemeProvider,
  getRegisteredThemeNames,
} from '@smartgear/edison'
import { Select, MenuItem, Typography } from '@material-ui/core';
import { useEdisonTheme } from '../src/hooks/useCustomTheme';
import { useLocalThemeName } from '../src/hooks/useLocalThemeName';

// The name of the theme you want to register
const myCustomThemeName = 'My Custom Theme Name';

// the edison theme creator factory generates the theme and
// then registers it into the list of supported themes.
// It can now be called
edisonThemeCreatorFactory(myCustomThemeName, {
  palette: {
    primary: {
      main: SiemensBaseColors.Accent.BlueDark,
    },
    secondary: {
      main: SiemensBaseColors.Accent.RedLight,
    },
    text: {
      primary: '#F4F2E1',
    },
    background: {
      default: '#ccd6db',
      paper: '#495359',
    },
    type: 'dark',
  },
})

const ThemeSelector: React.FC = () => {

  const themeNames = getRegisteredThemeNames();

  const [themeName, setThemeName] = useLocalThemeName();

  const [theme] = useEdisonTheme();

  const handleChange = (event: React.ChangeEvent<{ value: unknown }>) => {
    setThemeName(event.target.value as string);
  };

  return (
    <div>
      <Typography>
        The current themes primary color is {theme.palette.primary.main}
      </Typography>
      <Select
        value={themeName}
        onChange={handleChange}
      >
        {
          themeNames.map(name => (
            <MenuItem key={name} value={name}>{name}</MenuItem>
          ))
        }
      </Select>
    </div>

  )
}

const App: React.FC = () => {
  return (
    <ThemeProvider theme={myCustomThemeName}>
      <ThemeSelector />
    </ThemeProvider>
  )
}

export default App;

License

SEE LICENSE IN LICENSE © Siemens 2019