Merge branch 'main' of github.com:Dezenix/frontend-reactjs

README.md

@@ -24,40 +24,75 @@
 
 We are on a mission to make things easy and convenient for all the users who just want to save their time. This repository consists of all the development components that are being used while coding an end to end website along with fully coded components in ReactJS. The main goal is to save your time by providing the complete code snippet with a fully responsive design of all the components that you may use in your development journey. At the later stage, the project is planned to be get converted into a library so that the components created can directly be used by importing and calling through classes. We always encourage new ideas. Feel free to get in touch with us and join our [Discord Server](https://discord.gg/F3TtF5AHKz) for updates.
 
-## 🛠️ Installation Steps
+## 💯open source programs this repo has been part of
+<div align="center">
+<img src="https://user-images.githubusercontent.com/79747022/144798160-551b0f37-58d4-4f59-809e-d0f5e3f437c3.png" width="120px"> 
+<img src="https://user-images.githubusercontent.com/79747022/144800351-13fa1e9d-6417-4330-bc87-00d33404cc76.png" width="150px">
+</div>
+
+## ⚒️ Contribution Guidelines
+
+Are we missing any of your favourite features, which you think you can add to it? We invite you to contribute to this project and improve it further.
+
+#### 1. Clone and Setup:
+* Clone and Setup the repository by following the steps mentioned [here](https://github.com/Dezenix/.github/blob/main/CONTRIBUTING.md).
+
+#### 2. Setup dev environment
+* This repository is divided into 2 parts
+  - Library ```src/*```
+  - Example ```example/*```
 
-1. Clone the repository
+##### 2.1 Setting up library environment
 
-```bash
-git clone https://github.com/Dezenix/frontend-reactjs.git
+This is where all your components will be
+
+* Install all dependencies
+
+``` bash
+yarn install
 ```
 
-2. Change the working directory
+* Watch for file changes and build 
 
-```bash
-cd frontend-reactjs
+``` bash
+yarn start
 ```
 
-3. Install dependencies
+##### 2.2 Setting up example environment
+This is where you can see your component implementation
 
-```bash
-npm install
+* Change directory to [example](/example) folder
+
+``` bash
+cd example
 ```
 
-4. Run the app
+* Install all dependencies
 
-```bash
-npm start
+``` bash
+yarn install
 ```
 
-🌟 You are all set!
+* Start a live server on localhost
 
-## ⚒️ Contribution Guidelines
+``` bash
+yarn start
+```
+
+A server should start on localhost where you can view all the examples
+
+
+#### 3. Add your Components:
+* All the usermade components should be made under [`src/lib-components/{component_name}`](https://github.com/Dezenix/frontend-reactjs/tree/main/src/lib-components) here `{component_name}` is the name of your component in **snake_case**.
+* CSS files should follow this syntax `{name}.module.css` here `{name}` can be anything you want but in **snake_case**. This is due to the fact that we are transpiling the css classnames to avoid any conflicts between 2 or more modules. Due to this, simple importing your CSS file will no longer work. You will have to named import your css files and then treat them as a dictionary to use your CSS classnames.
+* Components should make use of props to display images or strings.
+* We also request you to **not make use of any network components**. For fonts, it would be better if you make use of default browser provided fonts. This is because we can't always be sure which license is used in 3rd party stuff. In future, we do plan to provide more fonts that will be licensed properly.
 
-Are we missing any of your favorite features, which you think you can add to it? We invite you to contribute to this project and improve it further.
+#### 4. Export your Component:
+* The User-made modules should be exported in [`src/index.js`](/src/index.js).
 
-Click on the image below to set up and contribute to the project or [Click here](https://github.com/Dezenix/.github/blob/main/CONTRIBUTING.md)
-[![setup](https://user-images.githubusercontent.com/79747022/138315489-6cd2c72b-8b48-4c0b-ab88-94b652b32b69.png)](https://github.com/Dezenix/.github/blob/main/CONTRIBUTING.md)
+#### 5. View your Component:
+* A simple example should be added in [`example/src`](/example/src) demonstrating your component.
 
 ## 👨‍💻 Our valuable Contributors
 
@@ -73,4 +108,4 @@ Please note that Dezenix has a [Contributor Code of Conduct](https://github.com/
 
 [![License: MIT](https://img.shields.io/badge/License-MIT-yellow.svg)](./LICENSE) © Dezenix
 
-![thank you](https://user-images.githubusercontent.com/79747022/138315571-2fada971-61f9-4008-9fa0-ac60bd655056.png)
+![thank you](https://user-images.githubusercontent.com/79747022/138315571-2fada971-61f9-4008-9fa0-ac60bd655056.png)

example/package.json

@@ -18,7 +18,8 @@
   },
   "devDependencies": {
     "@babel/plugin-syntax-object-rest-spread": "^7.8.3",
-    "@types/react": "link:../node_modules/@types/react"
+    "@types/react": "link:../node_modules/@types/react",
+    "eslint-config-react": "^1.1.7"
   },
   "eslintConfig": {
     "extends": "react-app"

example/src/App.js

@@ -1,18 +1,29 @@
 import React from 'react'
-import { Login, Register } from 'dezenix-react'
+import { Login, Register, ProductCard } from 'dezenix-react'
 import Home from './components/Home'
-import { BrowserRouter, Route, Routes } from "react-router-dom";
+import { BrowserRouter, Route, Routes } from 'react-router-dom'
 
 const App = () => {
   return (
     <BrowserRouter>
       <Routes>
         <Route index element={<Home />} />
-        <Route path="/login" element={<Login />} />
-        <Route path="/register" element={<Register />} />
+        <Route path='/login' element={<Login />} />
+        <Route path='/register' element={<Register />} />
+        <Route
+          path='/product_card'
+          element={
+            <ProductCard
+              img='https://i.ibb.co/SrRbQWb/img-1.png'
+              title='Nike Jordan Air'
+              price='$80'
+              des='This is the best nike jordan air sneakers for basketball.'
+            />
+          }
+        />
       </Routes>
     </BrowserRouter>
-  );
+  )
 }
 
 export default App

example/src/components/Home.js

@@ -21,6 +21,9 @@ export default function () {
           <Link to="/register" className="component" target="_blank">
             <h2>Register</h2>
           </Link>
+          <Link to="/product_card" className="component" target="_blank">
+            <h2>Product card</h2>
+          </Link>
           {/* Add new Link Here for your new component */}
         </div>
       </div>