feat: TheCyberHUB 3.0

.eslintignore

@@ -1,2 +1,3 @@
 node_modules
-dist
+dist
+/src/components/GTFOBins/Data.jsx

.eslintrc.json

@@ -1,26 +1,27 @@
 {
-  "env": {
-    "browser": true,
-    "es2021": true,
-    "node": true
-  },
-  "extends": [
-    "plugin:react/recommended",
-    "standard",
-    "prettier"
-  ],
-  "overrides": [],
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true,
-      "js": true
+    "env": {
+        "browser": true,
+        "es2021": true,
+        "node": true
+    },
+    "extends": ["plugin:react/recommended", "standard", "prettier", "plugin:storybook/recommended"],
+    "overrides": [],
+    "parserOptions": {
+        "ecmaVersion": "latest",
+        "sourceType": "module",
+        "ecmaFeatures": {
+            "jsx": true,
+            "js": true
+        }
+    },
+    "plugins": ["react", "no-relative-import-paths"],
+    "rules": {
+        "react/prop-types": "off",
+        "no-relative-import-paths/no-relative-import-paths": [
+            "error",
+            {
+                "allowSameFolder": true
+            }
+        ]
     }
-  },
-  "plugins": [
-    "react"
-  ],
-  "rules": {
-    "react/prop-types": "off"
-  }}
+}

.github/ISSUE_TEMPLATE/bug_report.yml

@@ -37,7 +37,7 @@ body:
     id: coc
     attributes:
       label: Code of Conduct
-      description: By submitting this issue, I confirm I've read and complied with the [CoC](https://github.com/thecyberworld/Support/blob/main/CODE_OF_CONDUCT.md) 🖖
+      description: By submitting this issue, I confirm I've read and complied with the [CoC](https://github.com/thecyberworld/TheCyberHUB/blob/dev/CODE_OF_CONDUCT.md) 🖖
       options:
         - label: I agree to follow this project's Code of Conduct
           required: true

.github/ISSUE_TEMPLATE/doc_report.yml

@@ -28,7 +28,7 @@ body:
     id: coc
     attributes:
       label: Code of Conduct
-      description: By submitting this issue, I confirm I've read and complied with the [CoC](https://github.com/thecyberworld/Support/blob/main/CODE_OF_CONDUCT.md) 🖖
+      description: By submitting this issue, I confirm I've read and complied with the [CoC](https://github.com/thecyberworld/TheCyberHUB/blob/dev/CODE_OF_CONDUCT.md) 🖖
       options:
         - label: I agree to follow this project's Code of Conduct
           required: true

.github/ISSUE_TEMPLATE/feature_request.yml

@@ -40,7 +40,7 @@ body:
     id: coc
     attributes:
       label: Code of Conduct
-      description: By submitting this issue, I confirm I've read and complied with the [CoC](https://github.com/thecyberworld/Support/blob/main/CODE_OF_CONDUCT.md) 🖖
+      description: By submitting this issue, I confirm I've read and complied with the [CoC](https://github.com/thecyberworld/TheCyberHUB/blob/dev/CODE_OF_CONDUCT.md) 🖖
       options:
         - label: I agree to follow this project's Code of Conduct
           required: true

.github/ISSUE_TEMPLATE/other.yml

@@ -24,7 +24,7 @@ body:
     id: coc
     attributes:
       label: Code of Conduct
-      description: By submitting this issue, I confirm I've read and complied with the [CoC](https://github.com/thecyberworld/Support/blob/main/CODE_OF_CONDUCT.md) 🖖
+      description: By submitting this issue, I confirm I've read and complied with the [CoC](https://github.com/thecyberworld/TheCyberHUB/blob/dev/CODE_OF_CONDUCT.md) 🖖
       options:
         - label: I agree to follow this project's Code of Conduct
           required: true

.github/ISSUE_TEMPLATE/responsive_web.yml

@@ -0,0 +1,52 @@
+name: Responsive Web
+description: Create a responsive report to help us improve
+title: "[Responsive-Web] <description>"
+labels: [responsive-web]
+body:
+    - type: textarea
+      id: description
+      attributes:
+          label: Detailed description
+          description: Provide a detailed description of the layout change you are proposing
+      validations:
+          required: true
+    - type: textarea
+      attributes:
+          label: To Reproduce
+          description: |
+              Steps to reproduce the behavior.
+              1. Current Screen Resolution is '...' width/height (approximately)
+              2. Go to '...'
+              3. Click on '...'
+              4. Scroll down to '...'
+              5. See responsive problem
+      validations:
+          required: true
+    - type: textarea
+      id: expectedbhv
+      attributes:
+          label: Expected Behavior
+          description: A clear and concise description of how it is should be displayed on mobile/tablet.
+      validations:
+          required: false
+    - type: textarea
+      attributes:
+          label: Screenshot/ Video of the Responsive Problem
+          description: Add screenshots to help explain the layout problem.
+      validations:
+          required: true
+    - type: checkboxes
+      id: coc
+      attributes:
+          label: Code of Conduct
+          description: By submitting this issue, I confirm I've read and complied with the [CoC](https://github.com/thecyberworld/TheCyberHUB/blob/dev/CODE_OF_CONDUCT.md) 🖖
+          options:
+              - label: I agree to follow this project's Code of Conduct
+                required: true
+    - type: markdown
+      attributes:
+          value: |
+              ---
+              You can also join our [Discord](https://discord.gg/QHBPq6xP5p) community.
+              Feel free to check out other cool repositories of the [Thecyberworld](https://github.com/thecyberworld).
+              Join the Thecyberworld GitHub Organisation by raising an [issue](https://github.com/thecyberworld/Support/issues/new?assignees=&labels=invite+me+to+the+organisation&template=invitation.yml&title=Please+invite+me+to+the+GitHub+Community+Organization) (you will be sent an invitation).

.github/pull_request_template.md

@@ -33,16 +33,16 @@ Incorrect ways to mark a box:
 
 ## Code of Conduct
 
-- [ ] By submitting this pull request, I confirm I've read and complied with the [CoC](https://github.com/thecyberworld/Support/blob/main/CODE_OF_CONDUCT.md) 🖖
+-   [ ] By submitting this pull request, I confirm I've read and complied with the [CoC](https://github.com/thecyberworld/TheCyberHUB/blob/dev/CODE_OF_CONDUCT.md) 🖖
 
 ## Check List (Check all the applicable boxes) <!-- Follow the above conventions to check the box -->
 
-- [ ] My code follows the code style of this project.
-- [ ] My change requires changes to the documentation.
-- [ ] I have updated the documentation accordingly.
-- [ ] All new and existing tests passed.
-- [ ] This PR does not contain plagiarized content.
-- [ ] The title of my pull request is a short description of the requested changes.
+-   [ ] My code follows the code style of this project.
+-   [ ] My change requires changes to the documentation.
+-   [ ] I have updated the documentation accordingly.
+-   [ ] All new and existing tests passed.
+-   [ ] This PR does not contain plagiarized content.
+-   [ ] The title of my pull request is a short description of the requested changes.
 
 ---
 

.gitignore

@@ -30,3 +30,6 @@ dist-ssr
 *.sw?
 .eslintcache
 .env
+TheCyberHUB.iml
+
+*storybook.log

.storybook/main.js

@@ -0,0 +1,16 @@
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    addons: [
+        "@storybook/addon-onboarding",
+        "@storybook/addon-links",
+        "@storybook/addon-essentials",
+        "@chromatic-com/storybook",
+        "@storybook/addon-interactions",
+    ],
+    framework: {
+        name: "@storybook/react-vite",
+        options: {},
+    },
+};
+export default config;

.storybook/preview.js

@@ -0,0 +1,13 @@
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+    parameters: {
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/i,
+            },
+        },
+    },
+};
+
+export default preview;

.stylelintrc

@@ -0,0 +1,9 @@
+{
+    "extends": ["stylelint-config-standard"],
+    "customSyntax": "postcss-styled-syntax",
+    "plugins": ["stylelint-plugin-styled-components"],
+    "rules": {
+        "plugin/styled-components-enforce-ampersand": true,
+        "named-grid-areas-no-invalid": null
+    }
+}

CONTRIBUTING.md

@@ -127,6 +127,28 @@ Open the browser to visit the website at http://localhost:3000
 
 ---
 
+
+## Storybook : 
+
+### Introduction
+
+Storybook is a powerful tool for developing and testing your UI components in isolation.
+
+It allows you to visualize different states of your components and interact with them in a sandbox environment.
+
+To view and run Storybook, use the following command in your terminal:
+
+```
+npm run storybook
+```
+This will start the Storybook server on port 6006.
+
+Open your browser and navigate to http://localhost:6006 to access the Storybook interface.
+
+For more info and examples you can check storybook [documentaion](https://storybook.js.org/docs/get-started)
+
+---
+
 ## 💥 Issues
 
 In order to discuss changes, you are welcome to [open an issue](https://github.com/thecyberworld/TheCyberHUB/issues/new/choose) about what you would like to contribute. Enhancements are always encouraged and appreciated.

README.md

@@ -1,12 +1,16 @@
 <h1 align="center"> TheCyberHUB </h1>
 
-![thecyberhub](https://user-images.githubusercontent.com/44284877/194150142-1df54766-b8bb-4d9c-9e86-26907e324551.gif)
+![TheCyberHUB by Thecyberworld Community](https://github.com/thecyberworld/TheCyberHUB/assets/44284877/e56a35cc-9f6c-4032-a209-efaa1d328894)
 
-<!-- ![thecyberhub](https://user-images.githubusercontent.com/44284877/180642062-a9a66f83-746c-468e-97a8-707c259a92cd.png) -->
+[//]: # "![thecyberhub](https://user-images.githubusercontent.com/44284877/180642062-a9a66f83-746c-468e-97a8-707c259a92cd.png)"
 
 <p align="center">
     👨‍💻 Website link:
-    <a href="https://thecyberhub.org/"> thecyberhub </a>
+    <a href="https://www.thecyberhub.org/"> TheCyberHUB </a>
+</p>
+<p align="center">
+    :octocat: Development Website link:
+    <a href="https://dev.thecyberhub.org/"> TheCyberHUB Dev </a>
 </p>
 <div align="center">
 
@@ -17,15 +21,15 @@
 </div>
 
 ## Table of contents 💻
-- [Title](#thecyberhub-hub-of-cyber-security)
-- [🤖 Installation Guidelines](#-installation-guidelines)
-  - [👇 Prerequisites](#-prerequisites)
-  - [🛠️ Installation Steps](#-installation-steps)
-- [Try Website](https://thecyberhub.org)
-- [👨‍💻 Contributing](#-contributing)
-- [🛡️ License](#-license)
-- [🙏 Support](#-support)
-- [📨 Contact US](#-contact-us)
+
+-   [Title](#thecyberhub-hub-of-cyber-security)
+-   [🤖 Installation Guidelines](#-installation-guidelines)
+    -   [👇 Prerequisites](#-prerequisites)
+    -   [🛠️ Installation Steps](#-installation-steps)
+-   [👨‍💻 Contributing](#-contributing)
+-   [🛡️ License](#-license)
+-   [🙏 Support](#-support)
+-   [📨 Contact US](#-contact-us)
 
 ---
 
@@ -35,28 +39,29 @@
 
 Before installation, please make sure you have already installed the following tools:
 
-- [Git](https://git-scm.com/downloads)
-- [Nodejs](https://nodejs.org/en/download/)
-
+-   [Git](https://git-scm.com/downloads)
+-   [Nodejs](https://nodejs.org/en/download/)
 
 ### 🛠 Installation Steps
 
-1. Fork the project
-2. Clone the forked project
+1. `Fork` the repository
+2. `Clone` the forked project
 3. Navigate to the cloned project directory
-4. Install the dependencies with `npm install`
-5. Run `npm run dev` to start the server
-6. Open the browser to visit the website at http://localhost:3000/
+4. Install the dependencies with `npm i`
+5. Create a `.env` file in the root directory of the project
+6. Copy the contents of `example.env` to `.env` file
+7. Run `npm run dev` to start the server
+8. Open the browser to visit the website at http://localhost:3000/
 
-> If you are new to Git and GitHub then must check out **[git-github-practice](https://github.com/CryptoverseWeb3/git-github-practice)** repository **first** and contribute to it before you contributing to other open-source projects.
+> If you are new to Git and GitHub, then must check out **[first-contribution](https://github.com/thecyberworld/first-contribution)** repository **first** and contribute to it before you contributing to other open-source projects.
 
 ---
 
 ## 👨‍💻 Contributing
 
-- Contributions make the open source community such an amazing place to learn, inspire, and create.
-- Any contributions you make are **truly appreciated**.
-- Check out our [contribution guidelines](/CONTRIBUTING.md) for more information.
+-   Contributions make the open source community such an amazing place to learn, inspire, and create.
+-   Any contributions you make are **truly appreciated**.
+-   Check out our [contribution guidelines](/CONTRIBUTING.md) for more information.
 
 ---
 
@@ -76,8 +81,8 @@ This project needs a ⭐️ from you. Don't forget to leave a star ⭐️
 
 <a href="https://discord.gg/QHBPq6xP5p" ><img src="https://img.shields.io/badge/Discord-5865F2?style=for-the-badge&logo=discord&logoColor=white" alt="Discord" /></a>
 <a href="https://www.github.com/thecyberworld" ><img src="https://img.shields.io/badge/GitHub-100000?style=for-the-badge&logo=github&logoColor=white" alt="Github" /></a>
-<a href="https://www.twitter.com/thecyberw0rld" ><img src="https://img.shields.io/badge/Twitter-1DA1F2?style=for-the-badge&logo=twitter&logoColor=white" alt="Twitter" /></a>
-<a href="https://linkedin.com/company/thecyberworld" ><img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn" ></a>
+<a href="https://www.linkedin.com/company/thecyberw0rld/" ><img src="https://img.shields.io/badge/LinkedIn-0077B5?style=for-the-badge&logo=linkedin&logoColor=white" alt="LinkedIn" ></a>
 <a href="https://t.me/thecyberw0rld" ><img src="https://img.shields.io/badge/Telegram-2CA5E0?style=for-the-badge&logo=telegram&logoColor=white" alt="Telegram" /></a>
+<a href="https://www.twitter.com/thecyberw0rld" ><img src="https://img.shields.io/badge/twitter-100000?style=for-the-badge&logo=x&logoColor=white" alt="Twitter" /></a>
 
 [Back to top 🖱](#thecyberhub-hub-of-cyber-security)

example.env

@@ -0,0 +1,2 @@
+VITE_WEB_ENV=development
+VITE_API_URL=https://dev.api.thecyberhub.org