@0bubbles0/ui-atomic-buffalo

@0bubbles0/ui-atomic-buffalo

@0bubbles0/ui-atomic-buffalo is a UI Component Library built in React.

Current version: 0.0.0

The Interactive Documentation can be found here.

Key Focus

• Modern React
• Atomic Design
• Style Guide
• Web Accessibility

Architecture

Follows Atomic Design Principles, with these submodules:

@0bubbles0/ui-atomic-buffalo
└── Atoms # Buttons
└── Molecules # Forms (Log in, Search) Product card
└── Organisms # Navbar, Sidebar, Product grid, Modal
└── Templates # Assemble to full pages with placeholders

Your project
└── Pages # Specific instances of templates, with actual images & content.

Dependencies

• react: ^18.2.0
• typescript: ^5.3.3
• styled-components: ^6.1.13

How to use it in your project

Set up

You can use it in your own TypeScript-based React projects (and other frameworks based on React, e.g. Next.js).

💡 Please note this won't work if you run JavaScript projects based on Vue.js or Angular.js.

In your package.json:

   "dependencies": {
    "@0bubbles0/ui-atomic-buffalo": "0.0.0"
  },

Use a component

// File ProductPage.tsx
import { Button } from "@0bubbles0/ui-atomic-buffalo";

export default function ProductPage() {
  return (
    <div>
      <Button>Save</Button>
    </div>
  );
}

How to run locally:

• Clone parent project
• pnpm install - After cloning this repo, first install node_modules for all dependencies
• pnpm build - Build all packages, including the Storybook site
• pnpm dev - Run all apps and packages locally
  • localhost:6006 for style-guide Storybook Preview