Skip to content

Commit 71e4c17

Browse files
TaksaWibawaTaksaWibawa
committed
initial commit
0 parents  commit 71e4c17

File tree

23 files changed

+6782
-0
lines changed

23 files changed

+6782
-0
lines changed

‎.eslintrc.cjs‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
module.exports = {
2+
root: true,
3+
env: { browser: true, es2020: true },
4+
extends: [
5+
'eslint:recommended',
6+
'plugin:react/recommended',
7+
'plugin:react/jsx-runtime',
8+
'plugin:react-hooks/recommended',
9+
],
10+
ignorePatterns: ['dist', '.eslintrc.cjs'],
11+
parserOptions: { ecmaVersion: 'latest', sourceType: 'module' },
12+
settings: { react: { version: '18.2' } },
13+
plugins: ['react-refresh'],
14+
rules: {
15+
'react-refresh/only-export-components': [
16+
'warn',
17+
{ allowConstantExport: true },
18+
],
19+
},
20+
}

‎.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎README.md‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
# RecyThing - Website (Admin)
2+
3+
## Table of Contents
4+
5+
- [RecyThing - Website (Admin)](#recything---website-admin)
6+
- [Table of Contents](#table-of-contents)
7+
- [How To Export Your Modules (Re-exporting)](#how-to-export-your-modules-re-exporting)
8+
- [Naming Conventions](#naming-conventions)
9+
- [Project Documents](#project-documents)
10+
- [References](#references)
11+
12+
## How To Export Your Modules (Re-exporting)
13+
14+
_Why do we need to re-export our modules?_
15+
16+
> We need to re-export our modules so that we can import them from a single file instead of importing them from multiple files.
17+
18+
_How to re-export our modules?_
19+
20+
1. create a folder named `button` in `src/components`
21+
2. create a file named `index.js` in `src/components/button` for re-exporting your button component
22+
3. create a file named `YourButton.js` in `src/components/button` for your button component
23+
4. in `src/components/button/YourButton.js`:
24+
25+
> this file will act as your button component
26+
27+
```js
28+
import React from "react";
29+
30+
export function YourButton() {
31+
return <button>Your Button</button>;
32+
}
33+
```
34+
35+
5. in `src/components/button/index.js`:
36+
37+
> this file will act as a re-exporter for your button component
38+
39+
```js
40+
export { YourButton } from "./YourButton";
41+
// or if you have multiple components in this folder
42+
export * from "./YourButton";
43+
```
44+
45+
6. lastly, in `src/components/index.js`:
46+
47+
> this file will act as a re-exporter for all your other components
48+
49+
```js
50+
export * from "./button";
51+
```
52+
53+
7. now you can import your button component from `src/components` in any file:
54+
55+
> example: we want to import our button component in `src/pages/Page.js`
56+
57+
```js
58+
import { YourButton } from "../components";
59+
60+
export function Page() {
61+
return <YourButton />;
62+
}
63+
```
64+
65+
8. file structure will look like this:
66+
67+
```bash
68+
src
69+
├── components
70+
│ ├── button
71+
│ │ ├── YourButton.js # your button component
72+
│ │ ├── YourOtherButton.js
73+
│ │ ├── ...
74+
│ │ └── index.js # re-exporter for your button components
75+
│ ├── other-component
76+
│ │ ├── ...
77+
│ └── index.js # we will import our components from this file
78+
└── pages
79+
└── Page.js
80+
```
81+
82+
---
83+
84+
## Naming Conventions
85+
86+
> In this project, we use [PascalCase](https://en.wikipedia.org/wiki/PascalCase) for naming our files and we use [kebab-case](https://en.wikipedia.org/wiki/Letter_case#Special_case_styles) for naming our folders.
87+
88+
---
89+
90+
## Project Documents
91+
92+
- [Figma](https://www.figma.com/file/MNMdvvfmCZVFc6HRsjrcCy/Recything-Design?type=design&node-id=1-3&mode=design&t=pimRrZcLkCqLhSpF-0)
93+
- [Trello](https://trello.com/b/QBUvaFOh/recything-web)
94+
- [Software Requirement Specification](https://docs.google.com/document/d/1xQdsNs_42wmlnQ73Ue3aHJNr0KqgJbSCxgM5B0stt7k/edit#heading=h.1erwhldcnuec)
95+
96+
---
97+
98+
## References
99+
100+
- [Chakra UI](https://chakra-ui.com/)
101+
- [Tailwind CSS](https://tailwindcss.com/)

‎index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Vite + React</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.jsx"></script>
12+
</body>
13+
</html>

‎jsconfig.json‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
{
2+
"compilerOptions": {
3+
"baseUrl": ".",
4+
"paths": {
5+
"@/*": ["src/*"]
6+
}
7+
}
8+
}

0 commit comments

Comments
 (0)