Establishing the Component Library

[elliotBraem]

Overview

This issue outlines the plan for creating the DevHub core component library. The primary objective of this library is to develop reusable, branded, and composable components tailored specifically for DevHub applications and pages, but made available to for the community to use in their own applications.

Inspiration

We can take inspiration from existing libraries:

• NUI - responsiveness, focus on CSS theming
• DIG - story book and overview, some unqiue components

We can fork the above to serve as our starting place.

Initial Library Structure

Following our first meeting on Oct 17, we collectively brainstormed and outlined the initial structure for the DevHub core library, along with some initial requirements:

Directory Structure

core: This directory contains the core UI library, adapters, and primitives.
│-- README.md (Documentation)
│
├── ui
│   ├── atom
│   │   ├── Button (Basic button component)
│   │   ├── Input (Basic input component)
│   │   ├── Toggle (Basic toggle component)
│   │   ├── Tile (Basic tile component)
│   │   └── icon
│   │       └── FloppyDrive (Icon component for a floppy drive)
│
│   └─ molecule
│       └── MarkdownView (Composable component for rendering Markdown)
│
|   └─ organism
│       └── MarkdownEditor (Complex component for editing Markdown)
│
├── adapter
│   ├── devhub-contract.js (Adapter for DevHub contract integration)
│   ├── devhub-social-db.js (Adapter for DevHub social database integration)
│   └── github-api.js (Adapter for GitHub API integration)
│
└── lib
    ├── struct
    ├── utils (href)

Development Requirements

• Components should serve as building blocks for the new UI
• Stateless components should be provided as modules.
• React components should use PascalCase naming.
• Javascript modules should use kabab-case naming.
• Documentation on how to use the components

Please use this issue to discuss any additional requirements, make suggestions, and offer your insights as we work on establishing the DevHub core library.

Let's collaborate to build a strong foundation for our DevHub applications!

@carina-akaia @Tguntenaar @jaswinder6991