Skip to content

kudoo-cloud/shared-components

Folders and files

NameName
Last commit message
Last commit date

Latest commit

2f85408 · Feb 10, 2022
Feb 23, 2019
May 4, 2019
Nov 26, 2018
Jul 11, 2021
Nov 26, 2018
Jan 12, 2020
Nov 30, 2018
Oct 6, 2019
Jul 26, 2019
Jul 11, 2021
Jul 11, 2021
Nov 26, 2018
Feb 23, 2020
Jul 11, 2021
Nov 28, 2018
Nov 28, 2018
Jul 11, 2021
Feb 10, 2022
Nov 26, 2018
Jul 11, 2021
Feb 10, 2022

Repository files navigation

Overview

The React components are separated by our classification

  • bosons
  • nuclei
  • atoms
  • screens

Bosons are the smallest UI components we have and make up the base components of everything we do. Bosons are the lowest common denominator

Nuclei consist of a bunch of commonly used components that together form a piece of common functionality

Atoms are the building blocks of the application. They can be thought of as the Lego blocks that make up the application. The Atoms are:

  • Drawer
  • Footer
  • HeaderBar
  • NotFound
  • Tabs
  • Screens

Creating a basic screen

The webapp will always consist of at least the following components

  • drawer
  • headerBar
  • screen
import React from 'react';
import Drawer, HeaderBar from './index';
import { BrowserRouter as Router, Route } from 'react-router-dom';

<Router>
    <Route
    render={() => (
        <Drawer
            companies={[{ id: 1, name: 'Kudoo' }, { id: 2, name: 'Facebook' }]}
            selectedCompany={{ id: 1, name: 'Kudoo', owner: true }}
        />
        <HeaderBar
            headerLabel={'Dashboard'}
            profile={{ firstName: 'John', lastName: 'Doe' }}
        />
    )}
    />
</Router>