Skip to content
The React UI componets for Kudoo's products
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.idea
.storybook
__mocks__
src
test
.babelrc.js
.eslintrc.js
.gitignore
.npmignore
CHANGELOG.md 2.1.18 Jul 12, 2019
LICENSE
README.md
Storyshots.test.js
jest.config.js
jsconfig.json
package-lock.json
package.json
postcss.config.js
tsconfig.json Added ts support in storybook & updated Footer May 4, 2019
yarn.lock

README.md

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 } from 'react-router-dom';
import { Route } from 'react-router';

<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>
You can’t perform that action at this time.