🎋 Bamboo UI

Bamboo UI is a component library built with TypeScript, React, CSS modules, and Feather icons.

Table of Contents

• Quick start
• Usage
  • CSS module loader
  • Import base styles
  • Import components
• Contributing
  • Installing dependencies
  • Running Storybook
  • Linting and formatting
  • Testing
• Design principles
  • Focused
  • Inclusive
  • Organic
• Why is it called Bamboo UI?

Quick start

To add Bamboo UI to your project, run the following command:

yarn add @madebyconnor/bamboo-ui
# or using npm
npm install @madebyconnor/bamboo-ui

Bamboo UI is built using React, so react and react-dom are required peer dependencies. If you don't have them installed yet, run the following command in your project:

yarn add react react-dom
# or using npm
npm install react react-dom

Usage

CSS module loader

Bamboo UI uses CSS modules for styling which are imported into the JavaScript files. A custom loader is needed to make this work.

Popular React frameworks such as Next.js and Create React App support CSS modules out of the box, though you might need additional configuration to enable this for node modules (e.g. next-transpile-modules).

If you are not using a framework or starter kit with CSS module support, you need to add and configure the css-loader for Webpack or find a similar loader for your bundler of choice.

Import base styles

Bamboo UI's components rely on a two global stylesheet to work properly.

• theme.css contains the default CSS variables for both light and dark mode. You can override individual variables or create a custom theme.
• base.css contains a small CSS reset and a handful of other global styles such as font-face declarations and custom ::selection styles.

Import the stylesheets in your application globally and before any other imports from Bamboo UI. For example, in Next.js you should import the stylesheets in the _app.js file:

// ./pages/_app.js
import '@madebyconnor/bamboo-ui/theme.css';
import '@madebyconnor/bamboo-ui/base.css';

export default function MyApp({ Component, pageProps }) {
  return <Component {...pageProps} />;
}

Import components

Once the initial setup is done, importing and using the components is straightforward:

import { Button } from '@madebyconnor/bamboo-ui';

function App() {
  return (
    <Button variant="primary" onClick={() => alert('Hello')}>
      Say hello
    </Button>
  );
}

You can add custom styles to a component by passing in a className prop:

import { Button } from '@madebyconnor/bamboo-ui';

function App() {
  return (
    <Button className="spacing-bottom" onClick={() => alert('Hello')}>
      Say hello
    </Button>
  );
}

Contributing

If you have ideas for how I could improve this README or the project in general, let me know or make a pull request. Below are some tips how to make changes to the project:

Installing dependencies

This project uses yarn to manage its dependencies. Once you've cloned the repository, navigate to the project folder in your terminal and run the following command to install all dependencies:

yarn

Running Storybook

I use Storybook as a development workbench and to document the components. To start Storybook and open it in your browser, run the following command:

yarn start

Linting and formatting

I use Foundry, SumUp's toolkit for building JavaScript & TypeScript applications, to manage the linting and formatting configs. The linter and TypeScript run on every commit to ensure high code quality. You can also lint manually by running the following commands:

# Lint and report issues
yarn lint
# Same as above, but also tries to fix issues automatically
yarn lint:fix

Testing

The majority of the components are purely visual and TypeScript gives me a high level of confidence in the code. For these reasons and since this is only a personal project, I've opted to keep the number of tests to a minimum. You can run the tests using the following command:

yarn test

Design principles

I use Bamboo UI primarily for small, personal side-projects. The 3 core principles below represent the experience I envision for these projects. My definition and understanding of these principles is constantly evolving and so is Bamboo UI.

Focused

I get easily overwhelmed or distracted when using applications that present a lot of information at once. Bamboo UI inspires focus with a simple, distraction-free design: A single column layout guides the eye in a straight line through the flow of information. Plenty of white space provides room to breathe for the content and user. Large typography highlights important information and gives structure to a page.

Inclusive

Although I mainly use Bamboo UI in personal projects, I strive to make it as accessible as possible. I use native HTML elements whenever possible and enhance custom components to be keyboard-navigable and have basic screen-reader support. Animations are designed to feel natural and can be turned off entirely.

Organic

I want Bamboo UI to feel comforting and playful like an airy, sun-filled forest in spring, the soothing rhythm of ocean waves rolling onto a pebble beach, or the serene weightlessness when scuba diving among colorful fish around a coral reef. Nature is perfect in its imperfections: shapes are rounded, not square, motions are fluid and random, and colors change with the light and perspective.

Why is it called Bamboo UI?

My family name translates to bear, my favourite bears are pandas, and pandas eat lots of bamboo. Plus, bamboo is a versatile and organic building material — qualities that I strive for with this component library.