# @smartgear/edison

> SmartGear Edison Components and Material-UI Theme.

Latest version **0.8.1** (published 2020-01-26) · Siemens Inner Source 1.2 license · 0 weekly downloads

## Install

```sh
npm install @smartgear/edison
pnpm add @smartgear/edison
yarn add @smartgear/edison
bun add @smartgear/edison
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.8.1 |
| Published | 2020-01-26 |
| First published | 2019-06-13 |
| Weekly downloads | 0 |
| License | Siemens Inner Source 1.2 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Node | >=8 |
| Dependencies | 12 |
| Unpacked size | 561.3 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | alexander.buczynsky |
| Maintainers | alexbuczynsky |

## Links

- npm: https://www.npmjs.com/package/@smartgear/edison
- Repository: https://code.siemens.com/smart-gear-gp/smartgear-edison
- npm.io page: https://npm.io/package/@smartgear/edison

## Dependencies (12)

- [clsx](https://npm.io/package/clsx.md) ^1.0.4
- [moment](https://npm.io/package/moment.md) ^2.24.0
- [react-router](https://npm.io/package/react-router.md) ^5.1.2
- [@date-io/moment](https://npm.io/package/@date-io/moment.md) ^1.3.11
- [@smartgear/fonts](https://npm.io/package/@smartgear/fonts.md) ^0.2.1
- [@smartgear/icons](https://npm.io/package/@smartgear/icons.md) ^1.0.3
- [use-react-router](https://npm.io/package/use-react-router.md) ^1.0.7
- [@material-ui/core](https://npm.io/package/@material-ui/core.md) ^4.7.0
- [@material-ui/icons](https://npm.io/package/@material-ui/icons.md) ^4.5.1
- [@material-ui/styles](https://npm.io/package/@material-ui/styles.md) ^4.6.0
- [react-device-detect](https://npm.io/package/react-device-detect.md) ^1.9.10
- [@material-ui/pickers](https://npm.io/package/@material-ui/pickers.md) ^3.2.8

## Recent versions

- 0.8.1 (latest) — 2020-01-26
- 0.2.7-alpha.1 (alpha) — 2019-07-09
- 0.8.0 — 2019-12-04
- 0.7.9 — 2019-12-02
- 0.7.8 — 2019-12-02
- 0.7.7 — 2019-12-02
- 0.7.6 — 2019-12-02
- 0.7.5 — 2019-12-02
- 0.7.4 — 2019-12-02
- 0.7.3 — 2019-12-02
- 0.7.2 — 2019-11-27
- 0.7.1 — 2019-11-27
- 0.7.0 — 2019-11-27
- 0.6.0 — 2019-11-26
- 0.5.7 — 2019-11-26
- … 28 more at https://npm.io/package/@smartgear/edison/versions

## README

# @smartgear/edison

> SmartGear Edison Components and Material-UI Theme.

[![NPM](https://img.shields.io/npm/v/@smartgear/edison.svg)](https://www.npmjs.com/package/@smartgear/edison)

## Install

```bash
npm install --save @smartgear/edison
```

## Usage

### Bootstrapped Application

```tsx
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
```tsx
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](https://code.siemens.com/smart-gear-gp/smartgear-edison)

---
_Source: https://npm.io/package/@smartgear/edison · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._