@nicobatalla/design-system v0.0.2

Oort Design System

React components for faster and easier web development. Built on top of Material UI, using styled-components and Typescript.

Browse example stories now by navigating to them in the sidebar. View each component code in the src/components directory to learn how they work. Or just take a look at the documentation on each component story. We recommend building UIs with a component-driven process starting with atomic components and ending with pages.

Development

1. Install all dependencies running: npm install

2. npm run storybook to run Storybook and see all components stories, and docs.

   • Edit src/components/**/**.stories.tsx files if you need to change something in the stories.
   • Edit src/components/**/**.tsx files if you need to change something in the Component code.
   • Important: Each new component should be under the src/components folder and should have its own stories.tsx file showing its use cases. Also, each component should have its own test files under the src/components/**/__tests__ folder.

Publish

TO DO

Usage

Install

Add the Oort Design System as a dependency of your project.

npm i oort-design-system

How to use

1. Wrap your applications using Oort's theme.

//App.tsx
import { ThemeWrapper } from 'oort-design-system';
import React from 'react';

const App: React.FC = () => <ThemeWrapper>{/* your app code */}</ThemeWrapper>;

2. Import the components you wish to use:

import { Button } from 'oort-design-system';
import React from 'react';

const YourComponent: React.FC = () => (
  <div>
    <Button onClick={doSomething}>CLICK ME</Button>
    {/* other code*/}
  </div>
);

That's it! You're ready to use the Oort Design System.