Light

safaelmali / react-beauty Goto Github PK

View Code? Open in Web Editor NEW

0.0 1.0 0.0 840 KB

HTML 5.28% TypeScript 88.50% CSS 2.05% JavaScript 4.18%

react-beauty's Introduction

🌸 React Beauty 🌸

An experimental component library

Inspired by Chakra UI

Installation

Soon..

Set up Provider

For React Beauty to work correctly, you need to set up the BeautyProvider at the root of your application.

Go to the root of your application and do this:

import * as React from 'react'

// 1. import `BeautyProvider` component
import { BeautyProvider } from 'react-beauty'

function App({ Component }) {
  // 2. Use at the root of your app
  return (
    <BeautyProvider>
      <Component />
    </BeautyProvider>
  )
}

Now you are ready to start using components 🥳

Storybook

Soon..

Documentation

Soon..

License

react-beauty is MIT licensed.

react-beauty's People

Contributors

Watchers

react-beauty's Issues

codecav dependency

Eslint + Prettier configuration

Extend Eslint Configurations

import orders
styled-component css property order

Refactor intellisense and styled-component props

Some of the model properties and styled-component props are not matching. This should be refactored

Components needs some prop definition configs

To ensure the intellisense of the css properties for each component, there should be some interface definitions for reusable components. For now:

Config definitions

grid
space
border
layout
Styled-configs
grid-styles
border-styles
layout-styles
space-styles

Test with jest, react-testing-library

Add example project to test package

Travis, circle ci configuration

Lint staged + husky for auto linting and running prettier

For Multi-packages lerna can be used:
https://codeburst.io/continuous-integration-lint-staged-husky-pre-commit-hook-test-setup-47f8172924fc

Remove vite because of the storybook integration

Path alias configuration required

Publish npm

https://javascript.plainenglish.io/react-component-library-with-ts-and-rollup-77aca0c727bf

https://prateeksurana.me/blog/react-library-with-typescript/

https://github.com/prateek3255/typescript-react-demo-library

https://github.com/proksh/atomize

Refactor config styles

Instead of writing same styles for each component, we can create a common styles to import from just one place

Move browserlist into .browserlistrc

https://stackoverflow.com/questions/55510405/what-is-the-significance-of-browserslist-in-package-json-created-by-create-react

Commit. message format should be stricted

Relative paths should be replaced with absolute paths

import module from "../../../../../modules/module.ts";

To improve this, you can use import aliases and make it look like the example below:

import module from "@/modules/module.ts";

Creating Layout Components

Layout Components:

Flexbox config is missing

We need to add some flexbox css property config file

Recommend Projects

React

A declarative, efficient, and flexible JavaScript library for building user interfaces.
Vue.js

🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript

TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
TensorFlow

An Open Source Machine Learning Framework for Everyone
Django

The Web framework for perfectionists with deadlines.
Laravel

A PHP framework for web artisans
D3

Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

javascript

JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
web

Some thing interesting about web. New door for the world.
server

A server is a program made to process requests and deliver data to clients.
Machine learning

Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Visualization

Some thing interesting about visualization, use data art
Game

Some thing interesting about game, make everyone happy.

Recommend Org

Facebook

We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft

Open source projects and samples from Microsoft.
Google

Google ❤️ Open Source for everyone.
Alibaba

Alibaba Open Source for everyone
D3

Data-Driven Documents codes.
Tencent

China tencent open source team.