[starts #187900329] Start User-view-single-product (#11)

* [starts #187900329] Start  User-view-single-product

* add functionalities

* Added layout

* Added single asset view

* added styling

* added-styling

* added-stylings

.babelrc

@@ -0,0 +1,15 @@
+{
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react",
+    "@babel/preset-typescript"
+  ],
+  "plugins": [
+    [
+      "@babel/plugin-transform-runtime",
+      {
+        "regenerator": true
+      }
+    ]
+  ]
+}

.circleci/config.yml

@@ -0,0 +1,40 @@
+version: 2.1
+
+jobs:
+  test:
+    docker:
+      - image: cimg/node:current
+    steps:
+      - setup_remote_docker:
+          version: docker24
+      - checkout
+      - run:
+          name: Update npm
+          command: "sudo npm install -g npm@latest"
+      - run:
+          name: Install dependencies
+          command: npm install
+      - run:
+          name: Run tests and generate coverage
+          command: |
+            mkdir -p test-results
+            npm test -- --watchAll=false --coverage --outputFile=test-results/jest.xml --json --useStderr
+      - run:
+          name: Upload coverage to Code Climate
+          command: |
+            curl -L https://codeclimate.com/downloads/test-reporter/test-reporter-latest-linux-amd64 > ./cc-test-reporter
+            chmod +x ./cc-test-reporter
+            ./cc-test-reporter before-build
+            ./cc-test-reporter format-coverage -t lcov -o coverage/codeclimate.json coverage/lcov.info
+            ./cc-test-reporter upload-coverage
+            ./cc-test-reporter after-build --exit-code $?
+      - store_test_results:
+          path: test-results
+      - store_artifacts:
+          path: coverage
+          destination: coverage
+
+workflows:
+  test_workflow:
+    jobs:
+      - test

.eslintrc.json

@@ -0,0 +1,82 @@
+{
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaVersion": 2018,
+    "sourceType": "module",
+    "project": "./tsconfig.json"
+  },
+  "plugins": [
+    "@typescript-eslint",
+    "react-hooks",
+    "import",
+    "jsx-a11y"
+  ],
+  "extends": [
+    "airbnb",
+    "airbnb-typescript",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:jsx-a11y/recommended",
+    "plugin:storybook/recommended"
+  ],
+  "ignorePatterns": ["jest.config.ts"],
+  "rules": {
+    "react-hooks/rules-of-hooks": "error",
+    "react-hooks/exhaustive-deps": "warn",
+    "react/prop-types": "off",
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        "ts": "never",
+        "tsx": "never"
+      }
+    ],
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        "devDependencies": [
+          "**/*.test.tsx",
+          "**/*.test.ts"
+        ]
+      }
+    ],
+    "react/function-component-definition": [
+      "error",
+      {
+        "namedComponents": "arrow-function"
+      }
+    ],
+    "eol-last": "off",
+    "@typescript-eslint/comma-dangle": ["warn", {
+      "arrays": "only-multiline",
+      "objects": "only-multiline",
+      "imports": "only-multiline",
+      "exports": "only-multiline",
+      "functions": "only-multiline"
+    }],
+    "linebreak-style": "off",
+    "no-param-reassign": "off",
+    "arrow-body-style": "off",
+    "@typescript-eslint/semi": "off",
+    "jsx-a11y/no-static-element-interactions": "off",
+    "max-len": "off",
+    "jsx-a11y/label-has-associated-control": ["error", {
+      "required": {
+        "some": ["nesting", "id"]
+      }
+    }]
+  },
+  "settings": {
+    "react": {
+      "pragma": "React",
+      "version": "detect"
+    },
+    "import/resolver": {
+      "typescript": {
+        "alwaysTryTypes": true,
+        "project": "./tsconfig.json"
+      }
+    }
+  }
+}

.github/workflows/ci.yml

@@ -0,0 +1,40 @@
+name: CI
+
+on:
+  push:
+    branches:
+      - develop
+  pull_request:
+    branches:
+      - develop
+
+jobs:
+  test:
+    runs-on: ubuntu-latest
+
+    strategy:
+      matrix:
+        node-version: [20.x]
+
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Use Node.js ${{ matrix.node-version }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ matrix.node-version }}
+
+      - name: Clear npm cache and reinstall dependencies
+        run: |
+          npm cache clean --force
+          npm install
+
+      - name: Run tests explicitly with npm run
+        run: |
+          npm run test --if-present -- --passWithNoTests
+
+      - name: Upload coverage to Coveralls
+        uses: coverallsapp/github-action@v2
+        env:
+            COVERALLS_REPO_TOKEN: ${{ secrets.COVERALLS_REPO_TOKEN }}

.gitignore

@@ -0,0 +1,23 @@
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+dist
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+*storybook.log

.storybook/main.ts

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

.storybook/preview.ts

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

README.md

@@ -0,0 +1,68 @@
+# E-COMMERCE NINJAS WEB APPLICATION - FRONTEND
+
+Our e-commerce web application server, developed by Team Ninjas, facilitates smooth online shopping with features like user authentication, product cataloging, and secure payments. It's built to enhance the user experience with high performance and reliability. Suitable for any online marketplace looking to grow.
+
+
+## Hosted Application URL
+
+[https://e-commerce-ninja-fn-staging.netlify.app/](https://e-commerce-ninja-fn-staging.netlify.app/)
+
+## Github repository
+
+[https://github.com/atlp-rwanda/e-commerce-ninjas-fe](https://github.com/atlp-rwanda/e-commerce-ninjas-fe/tree/develop)
+
+
+[![Maintainability](https://api.codeclimate.com/v1/badges/a7dce016f123cdcc9042/maintainability)](https://codeclimate.com/github/atlp-rwanda/e-commerce-ninjas-fe/maintainability)
+[![Test Coverage](https://api.codeclimate.com/v1/badges/a7dce016f123cdcc9042/test_coverage)](https://codeclimate.com/github/atlp-rwanda/e-commerce-ninjas-fe/test_coverage)
+[![Netlify Status](https://api.netlify.com/api/v1/badges/a3ed5a75-a862-4f3b-ba21-8369180cf3e6/deploy-status)](https://app.netlify.com/sites/e-commerce-ninja-fn-staging/deploys)
+[![Coverage Status](https://coveralls.io/repos/github/atlp-rwanda/e-commerce-ninjas-fe/badge.svg)](https://coveralls.io/github/atlp-rwanda/e-commerce-ninjas-fe)
+[![CircleCI](https://dl.circleci.com/status-badge/img/gh/atlp-rwanda/e-commerce-ninjas-fe/tree/develop.svg?style=svg)](https://dl.circleci.com/status-badge/redirect/gh/atlp-rwanda/e-commerce-ninjas-fe/tree/develop)
+[![CI](https://github.com/atlp-rwanda/e-commerce-ninjas-fe/actions/workflows/ci.yml/badge.svg)](https://github.com/atlp-rwanda/e-commerce-ninjas-fe/actions/workflows/ci.yml)
+
+## Completed features
+- Setup empty react
+- Setup Redux store
+- Setup StoryBook documentation
+- Sign up page
+- Login/Signup with Google
+
+## Get started
+- Clone repository
+  ```bash
+  git clone https://github.com/atlp-rwanda/e-commerce-ninjas-fe
+  ```
+- Install dependencies
+  ```bash
+  npm install
+  ```
+- Run App - it will run on http://localhost:5000/
+  ```bash
+  npm run dev
+  ```
+     
+## StoryBook
+
+To run storybook for documentation, use this command
+
+```sh 
+npm run storybook 
+```
+
+## Folder Structure
+
+- `public`: Contains static files and folder like `index.html` and images.
+- `src`: The main source folder for the React application.
+  - `components`: Reusable UI components.
+  - `pages`: Different pages/screens of the application.
+  - `store`: Redux store setup and slices.
+  - `stories`: StoryBook stories for UI components.
+  - `utils`: Utility functions and helpers.
+- `.babelrc`: Babel configuration file.
+- `.eslintrc`: ESLint configuration file.
+- `.gitignore`: Specifies which files and directories to ignore in Git.
+- `package-lock.json`: Automatically generated file that describes the exact tree of dependencies.
+- `package.json`: Contains project metadata and dependencies.
+- `README.md`: The readme file you are currently reading.
+- `tsconfig.json`: TypeScript configuration file.
+- `webpack.dev.config.ts`: Webpack configuration file for development.
+- `webpack.prod.config.ts`: Webpack configuration file for production.

build/index.html

@@ -0,0 +1 @@
+<!doctype html><html><head><meta charset="utf-8"/><title>E-Commerce Ninjas FrontEnd</title><script defer="defer" src="main.c05cff687073893a108e.js"></script></head><body><div id="root"></div></body></html>

build/main.c05cff687073893a108e.js.LICENSE.txt

@@ -0,0 +1,39 @@
+/**
+ * @license React
+ * react-dom.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * react.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * scheduler.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+/**
+ * @license React
+ * use-sync-external-store-with-selector.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */

jest.config.json

@@ -0,0 +1,12 @@
+{
+  "preset": "ts-jest",
+  "testEnvironment": "jsdom",
+  "moduleFileExtensions": ["ts", "tsx", "js", "jsx", "json", "node"],
+  "testRegex": "(/__tests__/.*|(\\.|/)(test|spec))\\.(jsx?|tsx?)$",
+  "transform": {
+    "^.+\\.(ts|tsx)$": "ts-jest"
+  },
+  "moduleNameMapper": {
+    "\\.(css|less|scss|sass)$": "identity-obj-proxy"
+  }
+}

netlify.toml

@@ -0,0 +1,10 @@
+[[redirects]]
+  from = "/*"
+  to = "/index.html"
+  status = 200
+
+[[redirects]]
+  from = "/api/*"
+  to = "/index.html"
+  status = 200
+  force = true