Skip to content

A systemized, accessible component library for React projects.

Notifications You must be signed in to change notification settings

richiemccoll/project-zero

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

1 Commit
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

Project Zero

Motivations

The reasons for creating and open-sourcing this library are quite straight forward. I like to iterate on ideas, libraries, and concepts in small demo applications. This is what helps me learn new concepts. The problem I have is that I keep rewriting the same UI components over and over and over...

So, the first logical step is to stick them in a library that can be re-used.

The Ideas

There are two core ideas behind the structure of the components in this library.

  1. Systemized styling
  2. Accessible

Styling

First, the styling follows a system. From font sizes, font weights, vertical spacing to colors. You can find these rules in the DEFAULT_THEME. This theme is a direct representation of my styleguide that I've designed along the way in Figma.

Accessibility

The second is that these components should be accessible out of the box. By doing this I ensure that any demo applications I create will work for anyone. When I say accessible I mean, they should work with keyboard and screen-reading software.


Getting Started

If you're reading this then you should be aware of two core assumptions before using this project.

First, you'd like to use this in a React based project.

Second, you are happy to bring in two hard dependencies into your project. These are styled-components and styled-system.


Install

Run either of these from the CLI in your project:

  • npm install @project-zero/components
  • yarn add @project-zero/components

Then import the components you need, along with the ThemeProvider. This applies the default theme. Theme properties are configurable.

import { Button, ThemeProvider } from "@project-zero/components";

<ThemeProvider>
  <Button>Default</Button>
</ThemeProvider>;

Components

Alert

An alert displays a brief, important message. It does this in a way that attracts the user's attention without interrupting their task.

import { Alert } from "@project-zero/components";

<Alert type="success" active>
  Content
</Alert>;

Box

Everything in web design is a box, or the absence of a box. This is both the most used and extended component.

import { Box } from "@project-zero/components";

<Box width={[1, 1 / 2]} p={4} mb={3} bg="#eee">
  Content
</Box>;

Breadcrumbs

A list of links to the parent pages of the current page in hierarchical order.

import { Breadcrumbs } from "@project-zero/components";

<Breadcrumbs>
  <Breadcrumbs.Link href="#home">Home</Breadcrumbs.Link>
  <Breadcrumbs.Link href="#about">About</Breadcrumbs.Link>
  <Breadcrumbs.Link href="#writing" selected>
    Writing
  </Breadcrumbs.Link>
</Breadcrumbs>;

Button

Enables users to trigger an action or event. E.g - submitting a form, opening a dialog, canceling an action, or performing a delete operation.

import { Button } from "@project-zero/components";

<Button variant="primary" onClick={handleOnClick}>
  Primary Default
</Button>;

Card

A composition that contains display content and actions for some specific topic.

import { Card } from "@project-zero/components";

<Card
  title="Title"
  description="Short Description"
  image="https://source.unsplash.com/user/erondu/500x500"
  actions={
    <Button variant="light" onClick={handleOnClick}>
      Action
    </Button>
  }
/>;

Clipboard

A light variant of the Button component. The difference is that it interacts with the navigator.clipboard API.

import { Clipboard } from "@project-zero/components";

<Clipboard text="Text to copy" />;

Combobox

A combobox consists of a single-line textbox and an associated pop-up element. It helps a user set the value of the textbox.

import { ComboBox } from "@project-zero/components";

const DEFAULT_OPTIONS = ["a", "b", "c"];
const DEFAULT_PROPS = {
  options: DEFAULT_OPTIONS,
  id: "test",
  label: "test",
  placholder: "Please enter some text...",
};

<ComboBox {...DEFAULT_PROPS} />;

Flex

A box. But, flexible.

import { Flex } from "@project-zero/components";

<Flex justifyContent="space-around" bg="#eee">
  <p>Child one</p>
  <p>Child two</p>
</Flex>;

Heading

Use these to give some hierarchy to a section in a page.

import { Heading } from "@project-zero/components";

<Heading variant="medium">Heading Component</Heading>;

Image

An HTML image element wrapped in the AspectRatio padding-bottom trick. Defaults to an aspect ratio of 9 / 16.

import { Image } from "@project-zero/components";

<Image src="test" alt="" />;

Link

Provides a reference to a resource. The target resource can be either external or local.

import { Link } from "@project-zero/components";

<Link href="#" onPress={handleOnPress}>
  Primary Default
</Link>;

SkipLink

This allows keyboard users to skip ahead and navigate to the main content areas of a page.

import { SkipLink } from "@project-zero/components";

<SkipLink id="main-content">Skip to Content</SkipLink>;

Stack

One of my personal favourites. A layout primitive that applies systemized vertical spacing.

import { Stack } from "@project-zero/components";

<Stack bg="#eee">
  <span>Child one</span>
  <span>Child two</span>
  <span>Child three</span>
</Stack>;

Tabs

Tabs are a set of layered sections of content, known as tab panels. One panel of content is displayed at a time.

import { Tabs } from "@project-zero/components";

<Tabs.Container>
  <Tabs.List justifyContent="space-between">
    <Tabs.Tab>Tab one</Tabs.Tab>
    <Tabs.Tab>Tab two</Tabs.Tab>
    <Tabs.Tab>Tab three</Tabs.Tab>
  </Tabs.List>

  <Tabs.Panels>
    <Tabs.Panel>Content for tab one</Tabs.Panel>
    <Tabs.Panel>Conetent for tab two</Tabs.Panel>
    <Tabs.Panel>Content for tab three</Tabs.Panel>
  </Tabs.Panels>
</Tabs.Container>;

Text

Applies the smaller text variants such as regular body text or smaller body text.

import { Text } from "@project-zero/components";

<Text>Text Component</Text>;

VisuallyHidden

Produces the opposite effect of The aria-hidden="true" attribute. Sighted users won't see it but screen readers will.

import React from "react";
import { VisuallyHidden } from "@project-zero/components";

function IconUi() {
  return (
    <React.Fragment>
      <svg
        viewBox="0 0 32 32"
        width={"1em"}
        height={"1em"}
        fill="none"
        stroke={"currentcolor"}
        strokeLinecap={"round"}
        strokeLinejoin={"round"}
        strokeWidth={4}
      >
        <path d="M12 30 L24 16 12 2" />
      </svg>
      <VisuallyHidden>Arrow Right</VisuallyHidden>
    </React.Fragment>
  );
}

About

A systemized, accessible component library for React projects.

Resources

Stars

Watchers

Forks

Packages

No packages published