osca-kampala-chapter / react-ui

The React Components Library:sparkles:

React UI

The React Components Library:sparkles:

• ✔️ Headless unstyled Components, build your custom UX!
• 🚀 Tailwind CSS Components, do more with less classes!

Quick start

Inside your root project directory, run;

npm install @reactui-org/core --save

Usage

// Button Component Example
import { Button } from '@reactui-org/core'

<Button backgroundColor="#000" color="#fff">
My Button
<Button/>

Button Props	Expected Data Type
backgroundColor	String
color	String
props	Any

📋 React UI Documentation 🏢 Website

🚧 Thanks to all Contributors.

Thank you for spending time to contribute to our mission of creating the future of design systems, enabling everyone to build beautiful web apps with utility first customizable components. Thank you so much:heart:! Keep rocking:rocket:

Want to contribute? Get stared with our Contributing Guide.

License

React UI is licenced under MIT Licence

react-ui's Issues

Create Website Navigation Bar

website navigation bar to be implemented as it appears in the figma design here

the website lives here in this directory

please find the figma design here

website tech stack

• next.js
• tailwindcss

create a Contributing Guide

add `react-ui` github link to documentation navbar

Reference: react-ui github link

The react-ui documentation resides in the folder named as reactui-docs.

Navigate to this file and make changes to the section section below

react-ui/reactui-docs/docusaurus.config.js

Line 78 in ee7d908

href: "https://github.com/facebook/docusaurus",

Add Installation guide to README

you may use the guidelines below, in README.md ,create a subheading Installation then add these below;

The React UI repository uses PNPM Workspaces . To install dependencies, just simply run pnpm in the project root directory.

PS: pnpm is a package manger just like npm or yarn

Help needed!

Hello @HassanBahati am getting problem trying to follow the README.md file in the website directory but am running into the errors below! How can i get helped!

deploy `website` to gh-pages

the React UI website is built with next.js, reactjs and tailwindCSS

The website files are located in this directory

References
https://www.viget.com/articles/host-build-and-deploy-next-js-projects-on-github-pages/

set up commit lint and husky

to help with maintaining a clean git log which is so important by ensuring that we write better, cleaner and semantic commits which are easy to understand at a glance

Reference
https://commitlint.js.org/
https://betterprogramming.pub/how-to-lint-commit-messages-with-husky-and-commitlint-b51d20a5e514

create issues template

Reference

Set up CI/CD

set up eslint

Reference

Setup prettier

Reference

create pull request template

Reference

First Release:rocket: `v0.0.1`

Hi all,

we are set for our first release on 25th January 2023. 🥳 😍

🚧 Please note that all efforts are to ship our first component into the core Headless Button Component

Npm registry ci/cd missing

I tried to review the project and found out that, I couldn't locate the yml file to the npm registry, any plans for availing it soon?

create a Code of Conduct

add contributors graph to readme file

in the readme.md file create a sub-heading :construction: Thanks to all Contributors. you may use the text below to generate the contributor graph.

Thank you for spending time to contribute to **our mission of creating the future of design systems, enabling everyone to build beautiful web apps with utility first customizable components**.  Thank you so much:heart:! Keep rocking:rocket:

[![Contributors](https://contrib.rocks/image?repo=OSCA-Kampala-Chapter/react-ui)](https://github.com/OSCA-Kampala-Chapter/react-ui/graphs/contributors)

Fix typos

The CONTRIBUTING.md file has typos around the Wiriting A Component section

[HOW TO CONTRIBUTE]

Hi,
If you are reading this, you want to contribute to our mission of creating the future of design systems, enabling everyone to build beautiful web apps with utility first customizable components; thank you!

add license to README

find the link here MIT

Remove default docusaurus logo from documentation website navbar

Configure Tailwindcss for documentation website

[Discussion] : Approach to building website and documentation

Hi all,

I am opening this issue for us to discuss the approach we are to take on building the React UI website and documentation website.

Should we settle with building one platform with docusaurus or build the home page with next.js and redirect to the docusaurus site when a user needs to check documetation?

This two concerns ideally should be under one hood. Given that if we build a website separate from the documentation, this would mean the website would only have one purpose of a landing page (as of now) then all information would be under the documentation. This what is currently happening as the website that resides under website directory and documentation site resides under reactui-docs

The current tech stacks are;
reactui-docs

• docusaurus - Features (Enables building with React, MDX, Ready for Translations, Documentation Versioning, Content Search by Algolia)

website directory

• next.js - Features(SSR, SEO, React, etc)
• tailwindcss

Ideally docusaurus is enough to do the job, but next.js was built on board due to more familiarity with it but docusaurus is React.js so it gives us the leaverage of jsx with mdx on top of other awesome features out of the box.

What do you think?

Enhance issue link in `CONTRIBUTING.md`

The [Create Issue](https://github.com/OSCA-Kampala-Chapter/react-ui/issues/new) propagates to this page which is the Custom Template but we do have other alternative templates so that narrows a contributor to only opening issues with custom template

This link should propagate into the [choose template page](https://github.com/OSCA-Kampala-Chapter/react-ui/issues/new/choose) so that contributors can have multi choice of issue template based of the category of their issue

Refer to the screenshot below for the issue link in CONTRIBUTING.md

Remove reactui-docs directory

The React UI docs are in the website directory thereby making the reactui-docs direct unnecessary.

To close this issue, delete reactui-docs and open a pull request

deploy documentation website

Using github actions

Reference

Add Typescript to website

Reference
https://dev.to/sushmeet/add-typescript-to-an-existing-nextjs-project-in-5-mins-2mik

the website lives here in this directory

website tech stack

• next.js
• tailwindcss

Create Benchmarks

We need to add benchmarks of reactui in comparison to other tools and libraries that are quite similar

Enhance license section in readme

In the README.md file as shown above , the content just shows MIT . We should enhance this to a text that says React UI is licenced under MIT licence

Add guide to README on how to run the documentation website

you may use the guidelines below, in README.md ,create a subheading Build Documentation Website then add these below;

the website directory is where we have the documentation that is built on top of docusaurus v2 which uses concepts of react.js so anyone that has done react can just work with it.

to run the website which also is where are going to be writing documentation....

1. move into the website directory cd website
2. install packages using pnpm install
3. start the development server pnpm run start which will open your browser at http:localhost:3000

pnpm is a package manger just like npm or yarn

add react-ui github repository link as path for `edit on github` in documentation website

The file below contains the path

react-ui/reactui-docs/docusaurus.config.js

Line 42 in 9f0babe

"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/",

react-ui/reactui-docs/docusaurus.config.js

Line 49 in 9f0babe

"https://github.com/facebook/docusaurus/tree/main/packages/create-docusaurus/templates/shared/",

react-ui/reactui-docs/docusaurus.config.js

Line 122 in 9f0babe

href: "https://github.com/facebook/docusaurus",

v0.0.3-beta

Introduction

This is issue lays out the target for our next release v0.0.3-beta

Credits

Huge thanks to @mosespace and @DaphineKamusiime for contributions to our current release (Bug Fixes and Documentation Website Setup)

Work Plan

The next release v0.0.3-beta will be focusing on building the documentation website that is located in website directory and is live at https://react-ui.org/

Scope of work

will be breaking down this section down in next few hours