03-styles-atomic-design-mocks-more-react.md

3rd Practical Class: Styles, Atomic Design, Mock Data, More React

Topics:

• Styles
  • adding and using CSS
• Atomic Design
  • pinciples
  • folder structure
• Mock Data
  • usage
• More React
  • working with arrays

---

Checkout current git branch:

cd code/cviceni/frontend/
git add .
git stash
git fetch --all
git checkout practical-03

yarn install
touch tmp/restart.txt

---

Styles

Global CSS

• src/frontend/src/index.js:

  • global Tachyons CSS library:

    import 'tachyons';

    It is using Tachyons NPM package. See src/frontend/package.json:

    {
      ...
      "dependencies": {
        ...
        "tachyons": "4.11.1",
        ...
      }
      ...
    }

  • global custom styles

    import './index.css';

• using global CSS class/id: file.css:

  .someClass {
    font-weight: bold;
    padding: 10px;
  }
  
  #someId {
    background-color: hotpink;
  }

  file.js:

  <div className="someClass" id="someId">
    Hello!
  </div>

Inline Styles

• use style prop:

  function Banner({ bg = 'hotpink' }) {
    return (
      <div className="banner" style={{ backgroundColor: bg }}>
        Banner!
      </div>
    );
  }
  
  // ...
  
  <Banner />;
  <Banner bg="red" />;
  <Banner bg="#aa00bb" />;
  <Banner bg={user.primaryColor} />;

classNames Package

• for dynamic className:

  <div
    className={classNames('foo', 'bar', { 'foo-bar': true, 'bar-foo': false })}
  >
    Hello!
  </div>

• example: ColorButton.css:

  .button {
    color: white;
  }
  
  .primaryVariant {
    background-color: blue;
  }
  
  .dangerVariant {
    background-color: red;
  }

  ColorButton.js:

  import React from 'react';
  import classNames from 'classnames';
  
  import './ColorButton.css';
  
  function ColorButton({ variant = 'primary', ...rest }) {
    return (
      <button
        className={classNames('button', {
          primaryVariant: variant === 'primary',
          dangerVariant: variant === 'danger',
        })}
        {...rest}
      />
    );
  }
  
  // ...
  
  <ColorButton />;
  <ColorButton variant="danger" />;

CSS Modules

• CSS Modules = "nice CSS classes without global conflicts"

Atomic Design

Atomic Design Book (free online)

Folder Structure

forntend/src
├── atoms
│   ├── AvatarPhoto.js
│   ├── Button.js
│   ├── ErrorBanner.js
│   ├── ErrorMessage.js
│   ├── Heading.js
│   ├── Label.js
│   ├── Link.js
│   ├── Loading.js
│   ├── MainSection.js
│   ├── ScrollToTop.js
│   ├── TextArea.js
│   ├── TextInput.js
│   ├── TransparentButton.js
│   ├── UserName.js
│   ├── UserScreenName.js
│   └── index.js
├── molecules
│   ├── Field.js
│   ├── Quack.js
│   ├── QuackForm.js
│   └── index.js
├── organisms
│   ├── QuackList.js
│   └── TopNavigation.js
├── templates
│   ├── HomeTemplate.js
│   ├── Placeholder.js
│   ├── SignInTemplate.js
│   └── UserDetailTemplate.js
└── pages
    ├── AboutPage.js
    ├── HomePage.js
    ├── PageNotFound.js
    ├── SignInPage.js
    └── UserDetailPage.js

See frontend/src/atoms/index.js, you can use:

import { Button, Label, Link } from '../atoms';

Mock Data

import { getMockQuacks, getMockUser } from '../utils/mocks.js';

console.log('all mocks', getMockQuacks());
console.log('mock user', getMockUser('johndoe'));

More React

Immutable Array Operations

• add item:

  const oldArray = [1, 2, 3, 4];
  
  console.log('example 1.1', [0, ...oldArray]);
  console.log('example 1.2', [...oldArray, 5]);
  console.log('example 1.3', [0, ...oldArray, 5]);
  console.log('example 1.4', [0, ...oldArray, 5, 0, ...oldArray, 5]);

• remove item:

  const oldArray = [1, 2, 3, 4];
  
  console.log('example 2.1', oldArray.filter(item => item !== 1));
  console.log('example 2.2', oldArray.filter(item => item !== 2));
  console.log('example 2.3', oldArray.filter(item => item === 3));
  
  const oldObjectArray = [
    { id: 1, ok: false },
    { id: 2, ok: true },
    { id: 3, ok: false },
    { id: 4, ok: true },
  ];
  
  console.log('example 3.1', oldArray.filter(item => item.id !== 1));
  console.log('example 3.2', oldArray.filter(item => item.id !== 2));
  console.log('example 3.3', oldArray.filter(item => item.ok === false));
  console.log('example 3.3', oldArray.filter(item => item.ok === true));

TODO

1. display styled quacks with like button changing color:

   0..4 -> black
   5..9 -> orange
   10... -> red
   

2. quack with remove button (click will remove the quack from state)

3. button that adds a new quack (static quack text)

4. dynamic text for new quack (<textarea />)