@sigeo/styleguide v4.7.5

Sigeo Styleguide

Reusable React components that implement Material Design.

We working on live demo based on Storybook, give us little more time!

Installation

Sigeo Styleguide is available as an npm package.

// With npm
npm install @sigeo/styleguide

// With yarn
yarn add @sigeo/styleguide

Usage

You can use destructuring or tree shaking approach. Here is a quick example to get you started, it's all you need:

import React from 'react';
import ReactDOM from 'react-dom';
import { Button, Input } from '@sigeo/styleguide';

function App() {
  return (
    <React.Fragment>
      <Button variant='contained' color='primary'>
        Hello World
      </Button>
      <Input
        variant='outlined'
        label='Custom label'
        placeholder='Hello placeholder'
        fullWidth
      />
    </React.Fragment>
  );
}

ReactDOM.render(<App />, document.querySelector('#app'));

Components

Sigeo Styleguide have several components:

• Button
• Input
• Textarea
• Select
• Text
• Drawer
• Password strength

Button

You can use all Material Button props and:

...
import { Button } from "@sigeo/styleguide";
// import Button from '@sigeo/styleguide/lib/components/Button'
...

function App() {
  ...

  return (
    <Button
      isLoading={isLoading}
      variant="contained"
      color="primary"
    >
      Hello World
    </Button>
  );
}

Input

You can use all Material Text Field props and:

...
import { Input } from "@sigeo/styleguide";
// import Input from '@sigeo/styleguide/lib/components/Input'
import UserIcon from '@material-ui/icons/VerifiedUser';
...

function App() {
  ...

  return (
    <Input
      label="My label"
      error={existError}
      value='My value'
      disabled={isDisabled}
      icon={<UserIcon />}
      endIcon={<UserIcon />}
      onChange={this.handleChange}
      helperText='Help me!'
    >
  );
}

Textarea

You can use all Material Text Field props.

...
import { Textarea } from "@sigeo/styleguide";
// import Textarea from '@sigeo/styleguide/lib/components/Textarea'
...

function App() {
  ...

  return (
    <Textarea
      variant="outlined"
      label="Custom label"
      placeholder="Hello placeholder"
      fullWidth
    />
  );
}

Select

You can use all React Select props and:

...
import { Select } from "@sigeo/styleguide";
// import Select from '@sigeo/styleguide/lib/components/Select'
...

function App() {
  ...

  return (
    <Select
      options={options}
      size="medium"
      onChange={this.handleChange}
    />
  );
}

Text

You can use all Material Typography props and:

...
import { Text } from '@sigeo/styleguide';
// import Text from '@sigeo/styleguide/lib/components/Text'
...

function App() {
  ...

  return (
    <Text variant='h2' customColor="#000">
      Hello guys!
    </Text>
  );
}

Drawer

You can use all Material Drawer props and:

...
import { Drawer } from '@sigeo/styleguide';
// import Drawer from '@sigeo/styleguide/lib/components/Drawer'
...

function App() {
  ...
  const [isVisible, changeVisibleState] = useState(false);

  return (
    <>
      <IconButton onClick={() => changeVisibleState(true)}>
        <MenuIcon fontSize="large" />
      </IconButton>
      <Drawer
        variant='persistent'
        anchor='left'
        open={isVisible}
        onClose={() => changeVisibleState(false)}
      >
        Hello mate, how are you?
      </Drawer>
    </>
  );
}

Password

You can show the password strength with this component:

...
import { PasswordStrengthBar } from "@sigeo/styleguide";
// import PasswordStrengthBar from '@sigeo/styleguide/lib/components/Password'
...

function App() {
  ...

  return (
    <PasswordStrengthBar
      size="large"
      password='XXXXXXX'
    />
  );
}

License

Copyright © 2019 Sigeo S.R.L

Licensed under a GPL3+ license: http://www.gnu.org/licenses/gpl-3.0.txt