⚛️ Atomic Design

Tomáš Horáček

horacek@cngroup.dk

User Interface (UI)

Component

Component Examples

<Button />
<Input />
<Label />
<InputWithLabel />
<LoginForm />

Atoms

<Button />
<Input />
<Label />
<Form />(not visible)
<FormGroup />(not visible)

export const Input = ({ type, className, ...rest }) => (
  <input
    type={type || 'text'}
    className={classNames('form-control', className)}
    {...rest}
  />
);

Molecules

<InputWithLabel />

export const InputWithLabel = ({ label, id, onInputChange, ...rest }) => (
  <FormGroup>
    <Label htmlFor={id}>{label}:</Label>
    <Input
      id={id}
      name={id}
      onChange={e => onInputChange && onInputChange(id, e.target.value)}
      {...rest}
    />
  </FormGroup>
);

Organisms

<LoginForm />
export const LoginForm = ({ values, onInputChange, ...rest }) => (
  <Form {...rest}>
    <InputWithLabel
      id="email"
      label="Email"
      value={(values || {}).email}
      onInputChange={onInputChange}
    />
    <InputWithLabel
      id="passowrd"
      label="Password"
      type="passowrd"
      value={(values || {}).passowrd}
      onInputChange={onInputChange}
    />
    <Button block type="submit" title="Login" />
  </Form>
);

Template

= Page UI

Templates

<LoginTemplate />

Log Into E-shop

© 2016-2018


export const LoginTemplate = ({ ...rest }) => (
  <PageWrapper>
    <Heading>Log Into E-shop</Heading>
    <LoginForm {...rest} />
    <Paragraph muted className="mt-5 mb-3">
      © 2016-2018
    </Paragraph>
  </PageWrapper>
);

Page

= Template + Data + Logic

Pages

<LoginPage />

Log Into E-shop

© 2016-2018

Pages

<LoginPage />(on previous slide)
export class LoginPage extends Component {
  state = {
    email: '',
    passowrd: '',
  };

  render() {
    const { email, passowrd } = this.state;
    const values = { email, passowrd };

    return (
      <LoginTemplate
        values={values}
        onInputChange={(id, value) =>
          this.setState({ [id]: value })
        }
        onSubmit={e => {
          e.preventDefault();
          alert(`Send data: ${JSON.stringify(values)}`);
        }}
      />
    );
  }
}

⚛️ Atomic Design

= System of Components

🤦        🧘      
src                                   src
└── components                        └── components
    ├── Button.js                         ├── atoms
    ├── Form.js                           │   ├── Button.js
    ├── FormGroup.js                      │   ├── Form.js
    ├── Heading.js                        │   ├── FormGroup.js
    ├── Input.js                          │   ├── Heading.js
    ├── InputWithLabel.js                 │   ├── Input.js
    ├── Label.js                          │   ├── Label.js
    ├── LoginForm.js                      │   ├── PageWrapper.js
    ├── LoginPage.js                      │   └── Paragraph.js
    ├── LoginTemplate.js                  ├── molecules
    ├── PageWrapper.js                    │   └── InputWithLabel.js
    └── Paragraph.js                      ├── organisms
                                          │   └── LoginForm.js
                                          ├── pages
                                          │   └── LoginPage.js
                                          └── templates
                                              └── LoginTemplate.js

🙋?

Thanks! 🙏