https://github.com/cheapreats/react-ui-library

Library for CheaprEats React UI components
https://github.com/cheapreats/react-ui-library

components library proptypes react-js storybook ui

Last synced: 7 days ago
JSON representation

Library for CheaprEats React UI components

• Host: GitHub
• URL: https://github.com/cheapreats/react-ui-library
• Owner: cheapreats
• Archived: true
• Created: 2018-12-27T01:30:45.000Z (almost 6 years ago)
• Default Branch: master
• Last Pushed: 2022-02-19T00:37:56.000Z (over 2 years ago)
• Last Synced: 2024-09-18T01:22:02.132Z (16 days ago)
• Topics: components, library, proptypes, react-js, storybook, ui
• Language: TypeScript
• Homepage: https://master--618004b2bcb159003ab74077.chromatic.com
• Size: 19.1 MB
• Stars: 3
• Watchers: 1
• Forks: 14
• Open Issues: 21
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# CheaprEats UI Library

## PR Requirements

- Showcase Visual Layer through an Image on your Pull Request

- Showcase Interactions / Animations Layer through a GIF / Video on your Pull Request

  - Macbook: Command+Shift+5

  - Windows: Snip Tool

## Installation Requirements

**Prettier:** https://marketplace.visualstudio.com/items?itemName=esbenp.prettier-vscode

## *Getting Started*

**Storybook:** https://storybook.js.org/

**TypeScript:** https://www.typescriptlang.org/

**Atomic Design:** https://atomicdesign.bradfrost.com/

This repository encompasses the [Component Driven Design Methodology](https://medium.com/the-s-curve/why-component-driven-design-drives-great-software-products-7cace364e815).

## src/

This folder is where you will be building your UI, no-data-logic only components.

## stories/

This folder is where you will be testing your UI on Storybook for different ViewPorts (Responsiveness), Accessibility and functionality.

## .storybook/

This folder contains the Storybook configuration options

## scripts/

This folder contains code generation scripts to help make development faster.

### Helpful Resources

#### Need Icons

Use the Styled-Icons library to import icons from : https://styled-icons.dev/

#### Themes/ 

Contains all the styling that CheaprEats uses so you don't have to guess to color codes, Also your components will automatically translate to dark mode!

To Add a Color to the Theme Modify both the [MainTheme File](https://github.com/cheapreats/react-ui-library/blob/master/src/Themes/MainTheme.ts) and [DarkTheme File](https://github.com/cheapreats/react-ui-library/blob/master/src/Themes/DarkTheme.ts) (Add the Typing for the New Color as well as the Color Code for the new Color Key)

##### Mixins (Responsiveness)

- Ensure that you are using the consistent Mixins for your Media Queries: https://github.com/cheapreats/react-ui-library/blob/v2/src/Themes/ThemeTemplate.ts#L138

# When Importing/Using This Library (Try without this first as library has been fixed)

- Ensure there is only one instance of react & react-dom being used in your app. Use Webpack alias to point to ./node_modules/react & ./node_modules/react-dom respectively.

When you import this library there is the Version of React by the Library and the version of React by your app being used simutaneously. Even if they are the same versions, two copies of react/react-dom will cause issues. Point all instance of react/react-dom to the one used by your application using Webpack Aliases.

```js

  resolve: {

    alias: {

      // add as many aliases as you like! 

      "react": "./node_modules/react",

      "react-dom": "./node_modules/react-dom"

    }

  }

```  

- Wrap you app with the Theme Object

You need to import Global into your app and wrap your app with the Global to Access the Theme.

```js

    return (

        

            

                

                    {getLandingRoutes()}

                    

                

            

        

    );

```