three-divers-ui v0.0.2

qayaq-ui

Qayaq React Component library

qayaq-ui.vercel.app

Contents

• Installation
• Getting Started
• Styling

Installation

To get started using these UI Components in your project, include the package and install its peer dependencies with your package manager of choice:

# with npm
npm install react react-dom styled-components

# with yarn
yarn add react react-dom styled-components

Peer dependencies

This UI library ships with a few libraries labeled as peer dependencies. These libraries are separated because they are commonly already installed in the host project and having multiple versions can introduce errors.

React Components requires the following libraries to be installed along with it:

• styled-components at version 5.0.0 or higher
• react at versions 16.8.0 or higher
• react-dom at versions 16.8.0 or higher

Getting Started

This UI library exports a React Provider that you’ll need to wrap your app in. It uses the UI Components base theme by default.

import { UiComponentsProvider } from "ui";

const App = (props) => {
  return (
    <>
      <UiComponentsProvider>
        <div>your app here</div>
      </UiComponentsProvider>
    </>
  );
};

Styling

Styles are written using Styled Components making using of a Styled Components Theme Provider to store UI theme data.

• Styled Components - Used to write styles
• Styled System - A collection of utility functions that add style props to your React components

Storybook

We're using Storybook to present and help build out these components. Stories are wrapped in the UiComponentsProvider with a custom decorator.

npm run dev - Start the storybook