mainstack-design-system 0.0.0

package/.env.sample

@@ -0,0 +1 @@
+REACT_APP_BASE_URL=""

package/.eslintignore

@@ -0,0 +1,5 @@
+node_modules
+build
+coverage
+vite.config.ts
+/commitlint.config.cjs

package/.eslintrc.json

@@ -0,0 +1,96 @@
+{
+  "extends": [
+    "eslint:recommended",
+    "airbnb/hooks",
+    "airbnb-typescript",
+    "plugin:react/recommended",
+    "plugin:react/jsx-runtime",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@typescript-eslint/recommended-requiring-type-checking",
+    "prettier/prettier",
+    "prettier",
+    "plugin:prettier/recommended",
+    "plugin:import/recommended",
+    "plugin:storybook/recommended"
+  ],
+  "plugins": [
+    "react-hooks",
+    "@typescript-eslint",
+    "prettier",
+    "react",
+    "import",
+    "jsx-a11y"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module",
+    "tsconfigRootDir": ".",
+    "project": ["./tsconfig.json"]
+  },
+  "env": {
+    "browser": true,
+    "es6": true
+  },
+  "settings": {
+    "import/resolver": {
+      "typescript": {
+        "project": "./tsconfig.json"
+      }
+    },
+    "react": {
+      "version": "detect"
+    }
+  },
+  "rules": {
+    "no-var": 2,
+    "semi": 0,
+    "func-names": 0,
+    "default-param-last": 0,
+    "camelcase": 0,
+    "consistent-return": 0,
+    "no-console": 1,
+    "no-unused-expressions": 0,
+    "no-plusplus": 0,
+    "no-underscore-dangle": 0,
+    "no-nested-ternary": 0,
+    "object-shorthand": 0,
+    "class-methods-use-this": 0,
+    "import/extensions": 0,
+    "import/no-unresolved": 0,
+    "jsx-a11y/label-has-associated-control": 0,
+    "jsx-a11y/no-autofocus": 0,
+    "max-classes-per-file": 0,
+    "import/prefer-default-export": 0,
+    "import/no-extraneous-dependencies": 0,
+    "no-param-reassign": 0,
+    "no-prototype-builtins": 0,
+    "no-unsafe-optional-chaining": 0,
+    "radix": 0,
+    "react/prop-types": 0,
+    "react-hooks/rules-of-hooks": 2,
+    "react-hooks/exhaustive-deps": 0,
+    "react/no-children-prop": 0,
+    "react/jsx-key": 0,
+    "react/display-name": 0,
+    "react/react-in-jsx-scope": 0,
+    "react/no-unescaped-entities": 0,
+    "@typescript-eslint/no-empty-function": 0,
+    "@typescript-eslint/no-unsafe-assignment": 0,
+    "@typescript-eslint/restrict-template-expressions": 0,
+    "@typescript-eslint/no-unsafe-argument": 0,
+    "@typescript-eslint/no-unsafe-call": 0,
+    "@typescript-eslint/no-unsafe-member-access": 0,
+    "@typescript-eslint/ban-ts-comment": 0,
+    "@typescript-eslint/no-explicit-any": 0,
+    "@typescript-eslint/no-floating-promises": 0,
+    "@typescript-eslint/no-unsafe-return": 0,
+    "prefer-const": 1,
+    "@typescript-eslint/no-misused-promises": 0,
+    "@typescript-eslint/no-unused-vars": 1,
+    "no-sparse-arrays": 0
+  }
+}

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,15 @@
+### Subject / Header
+
+State the subject or header of the PR e.g Setting Up Code Base
+
+### What changed?
+
+Here state the over view of what changed. Also inculde if a command is needed to be ran after pulling. This is an example
+
+- Setting up the code base for frontend dashboard
+- Added Pull Pequest template and other file template
+- New package are added, thus the need to run `yarn install`.
+
+### Whats Remaining
+
+Here state if anything is missing that should be in the PR but its not, this so that the person reviewing the code would know whats missing and can test better

package/.husky/commit-msg

@@ -0,0 +1,4 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn commitlint --edit $1

package/.husky/pre-commit

@@ -0,0 +1,6 @@
+#!/usr/bin/env sh
+. "$(dirname -- "$0")/_/husky.sh"
+
+yarn ts-error $1
+yarn format $1
+yarn lint $1

package/.prettierignore

@@ -0,0 +1,7 @@
+/dist
+/build
+/coverage
+node_modules
+/public
+/commitlint.config.cjs
+*.mdx

package/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "singleQuote": false,
+  "arrowParens": "always",
+  "useTabs": false,
+  "bracketSpacing": true,
+  "insertPragma": true,
+  "semi": true,
+  "tabWidth": 2
+}

package/.storybook/main.ts

@@ -0,0 +1,22 @@
+/** @format */
+
+import type { StorybookConfig } from "@storybook/react-vite";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+    "@chakra-ui/storybook-addon",
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

package/.storybook/preview.ts

@@ -0,0 +1,20 @@
+/** @format */
+
+import type { Preview } from "@storybook/react";
+import { ChakraProvider } from "@chakra-ui/react";
+import { theme } from "../src/assets/themes/baseThemes";
+
+const preview: Preview = {
+  parameters: {
+    chakra: { theme },
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

package/.vscode/extensions.json

@@ -0,0 +1,10 @@
+{
+  "recommendations": [
+    "vivaxy.vscode-conventional-commits",
+    "dbaeumer.vscode-eslint",
+    "streetsidesoftware.code-spell-checker",
+    "vincaslt.highlight-matching-tag",
+    "esbenp.prettier-vscode",
+    "usernamehw.errorlens"
+  ]
+}

package/README.md

@@ -0,0 +1,139 @@
+<!-- @format -->
+
+# DevX
+
+Husky that is installed on the project taps into git hooks to enforce formatting and conventional commit standards before pushing code to the repository.
+
+## notes
+
+for **MacOS** users, run the command `chmod ug+x .husky/*` to make the husky hooks executable.
+
+## Husky
+
+Husky is a git hook manager that allows you to run scripts on git hooks. It is installed as a dev dependency in the project.
+
+## Conventional Commits
+
+Conventional Commits is a specification for adding human and machine readable meaning to commit messages. It provides an easy set of rules for creating an explicit commit history; which makes it easier to write automated tools on top of. This convention dovetails with [SemVer](https://semver.org), by describing the features, fixes, and breaking changes made in commit messages.
+[more info](https://www.conventionalcommits.org/en/v1.0.0/)
+
+## Commitlint
+
+Commitlint is a tool that checks if your commit messages meet the conventional commit format. It is installed as a dev dependency in the project.
+
+# Vite
+
+Vite is a build tool that serves your code via native ES Module imports during development. It offers instant server start up and fast hot module replacement for rapid feedback. It also bundles your code with Rollup for production.
+
+## Getting Started
+
+Installing the application (as a developer) is simple in the following steps:
+
+- Access and Clone this repository
+
+```git
+git clone git clone https://github.com/The-Mainstack/[repo-name].git && cd [repo-name]
+```
+
+- Make your forked repo the remote upstream (at origin)
+
+```
+    git remote add origin https://github.com/The-Mainstack/[repo-name].git
+```
+
+- Navigate into the cloned directory and install dependencies with Yarn
+
+```yarn
+yarn install
+```
+
+- Make a duplicate of the **env** file and update its content accordingly. Most times, this is just fine with no update.
+
+```sh
+cp .env.sample .env
+```
+
+- Run the app in the development mode.
+  Open [http://localhost:[port]](http://localhost:[port]) to view it in the browser and start developing.
+
+```yarn
+yarn run dev
+```
+
+## Quick Developer Guide
+
+> It is important to note that we are using best practicees in this project and all rules set down must be followed
+
+- Linting and prettifying rules are already set in the project and they can be accessed in `.prettierrc` and `.eslintrc.json` files respectively
+
+- Make sure there are no linting errors before making your push and PRs
+
+  > Theses linting errors will be displayed in your files and the console accordingly
+
+- All react files must be suffixed with `.tsx` extension for effective import/export flow
+
+> Bonus: setup format:on save so as to effectively apply the prettier rules
+
+- Build the app for production to the `build` folder.
+
+```yarn
+yarn run build
+```
+
+## Contributing.
+
+- Before contributing, ensure you create a branch for a particular feature you'd want to work on, so we wouldn't be having issues of merge conflict
+- You can create a branch this way &mdash; always create a branch off staging;
+
+```git
+  git checkout staging
+  git checkout -b [branch-name]
+```
+
+- Make your changes, add them and make your commits
+
+```git
+  git commit -m "your message"
+```
+
+Write good commit messages as this is important to know the essence of your commit
+
+- When you're done with your fixes push to that current branch
+
+```git
+  git push origin [name-of-branch]
+```
+
+- The command above pushes your your commits to the current branch you're in.
+- Then make your Pull Request to the `develop` branch
+
+## Commit Structure
+
+- type: subject e.g body, footer
+
+The title consists of the type of the message and subject.
+The type is contained within the title and can be one of these types:
+
+- feat: a new feature
+
+- fix: a bug fix
+
+- docs: changes to documentation
+
+- style: formatting, missing semi colons, etc; no code change
+
+- refactor: refactoring production code
+
+- test: adding tests, refactoring test; no production code change
+
+An example of a good commit message
+
+```
+    feat: Made login check for email and password
+```
+
+## notes
+
+- to use env variables in vite, you need to prefix them with `import.meta.env.`. For example, `process.env.REACT_APP_BASE_URL` becomes `import.meta.env.REACT_APP_BASE_URL`.
+
+> Happy Hacking !!!

package/commitlint.config.cjs

@@ -0,0 +1 @@
+module.exports = { extends: ['@commitlint/config-conventional'] }

package/index.html

@@ -0,0 +1,31 @@
+<!-- @format -->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+    />
+    <meta
+      name="viewport"
+      content="height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
+    />
+    <title>Mainstach template</title>
+    <script>
+      let vh = window.innerHeight * 0.01;
+      document.documentElement.style.setProperty("--vh", `${vh}px`);
+      window.addEventListener("resize", () => {
+        let vh = window.innerHeight * 0.01;
+        document.documentElement.style.setProperty("--vh", `${vh}px`);
+      });
+    </script>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <script type="module" src="src/app.tsx"></script>
+  </body>
+</html>

package/package.json

@@ -0,0 +1,98 @@
+{
+  "name": "mainstack-design-system",
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build",
+    "preview": "vite preview --port 5001",
+    "format": "prettier src -c --write && pretty-quick --staged",
+    "lint": "eslint src --ext .js,.jsx,.ts,.tsx --quiet --fix",
+    "ts-error": "tsc",
+    "postinstall": "husky install",
+    "prepare": "husky install",
+    "scriptname": "cmd",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "publishConfig": {
+    "@themainstack:registry": "https://npm.pkg.github.com"
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  },
+  "dependencies": {
+    "@chakra-ui/icons": "^2.1.1",
+    "@chakra-ui/react": "^2.5.1",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "@storybook/preview-api": "^7.6.3",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-prettier": "^4.2.1",
+    "framer-motion": "^10.0.1",
+    "prettier": "^2.8.4",
+    "pretty-quick": "^3.1.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-phone-input-2": "^2.15.1",
+    "react-quill": "^2.0.0",
+    "react-router-dom": "^6.8.1",
+    "react-select": "^5.8.0",
+    "react-toastify": "^9.1.3",
+    "typescript": "^4.9.5",
+    "vite-plugin-env-compatible": "^1.1.1",
+    "vite-plugin-svgr": "^2.4.0",
+    "vite-tsconfig-paths": "^4.0.5"
+  },
+  "devDependencies": {
+    "@chakra-ui/storybook-addon": "^5.1.0",
+    "@commitlint/cli": "17.1.2",
+    "@commitlint/config-conventional": "17.1.0",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-interactions": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/addon-onboarding": "^1.0.8",
+    "@storybook/blocks": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-vite": "^7.5.3",
+    "@storybook/testing-library": "^0.2.2",
+    "@types/react": "^18.0.28",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.53.0",
+    "@typescript-eslint/parser": "^5.53.0",
+    "@vitejs/plugin-react": "^3.1.0",
+    "eslint": "^8.35.0",
+    "eslint-config-airbnb": "^19.0.4",
+    "eslint-config-airbnb-typescript": "^17.0.0",
+    "eslint-import-resolver-typescript": "^3.5.3",
+    "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-jsx-a11y": "^6.7.1",
+    "eslint-plugin-react": "^7.32.2",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.15",
+    "husky": "^8.0.3",
+    "storybook": "^7.5.3",
+    "vite": "^4.1.0"
+  },
+  "description": "<!-- @format -->",
+  "main": "index.js",
+  "repository": {
+    "type": "git",
+    "url": "git+https://D-Ajiva@github.com/The-Mainstack/mainstack-design-system.git"
+  },
+  "author": "david-aji",
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/The-Mainstack/mainstack-design-system/issues"
+  },
+  "homepage": "https://github.com/The-Mainstack/mainstack-design-system#readme"
+}

package/public/_redirects

@@ -0,0 +1 @@
+/* /index.html 200

package/public/manifest.json

@@ -0,0 +1,15 @@
+{
+  "short_name": "Mainstack Template",
+  "name": "This is a template to build mainstack app going forward",
+  "icons": [
+    {
+      "src": "vite.svg",
+      "sizes": "64x64 32x32 24x24 16x16",
+      "type": "image/x-icon"
+    }
+  ],
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

package/public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

package/public/vite.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="31.88" height="32" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 257"><defs><linearGradient id="IconifyId1813088fe1fbc01fb466" x1="-.828%" x2="57.636%" y1="7.652%" y2="78.411%"><stop offset="0%" stop-color="#41D1FF"></stop><stop offset="100%" stop-color="#BD34FE"></stop></linearGradient><linearGradient id="IconifyId1813088fe1fbc01fb467" x1="43.376%" x2="50.316%" y1="2.242%" y2="89.03%"><stop offset="0%" stop-color="#FFEA83"></stop><stop offset="8.333%" stop-color="#FFDD35"></stop><stop offset="100%" stop-color="#FFA800"></stop></linearGradient></defs><path fill="url(#IconifyId1813088fe1fbc01fb466)" d="M255.153 37.938L134.897 252.976c-2.483 4.44-8.862 4.466-11.382.048L.875 37.958c-2.746-4.814 1.371-10.646 6.827-9.67l120.385 21.517a6.537 6.537 0 0 0 2.322-.004l117.867-21.483c5.438-.991 9.574 4.796 6.877 9.62Z"></path><path fill="url(#IconifyId1813088fe1fbc01fb467)" d="M185.432.063L96.44 17.501a3.268 3.268 0 0 0-2.634 3.014l-5.474 92.456a3.268 3.268 0 0 0 3.997 3.378l24.777-5.718c2.318-.535 4.413 1.507 3.936 3.838l-7.361 36.047c-.495 2.426 1.782 4.5 4.151 3.78l15.304-4.649c2.372-.72 4.652 1.36 4.15 3.788l-11.698 56.621c-.732 3.542 3.979 5.473 5.943 2.437l1.313-2.028l72.516-144.72c1.215-2.423-.88-5.186-3.54-4.672l-25.505 4.922c-2.396.462-4.435-1.77-3.759-4.114l16.646-57.705c.677-2.35-1.37-4.583-3.769-4.113Z"></path></svg>

package/src/app.tsx

@@ -0,0 +1,25 @@
+/** @format */
+
+import { StrictMode } from "react";
+import { createRoot } from "react-dom/client";
+import Index from "pages/index";
+import "assets/styles/index.css";
+import { ChakraProvider } from "@chakra-ui/react";
+import { ToastContainer } from "react-toastify";
+import { theme } from "assets/themes/baseThemes";
+import "react-toastify/dist/ReactToastify.css";
+
+const AppToRender = () => {
+  return (
+    <StrictMode>
+      <ChakraProvider theme={theme}>
+        <ToastContainer style={{ width: "auto", padding: "0px" }} />
+        <Index />
+      </ChakraProvider>
+    </StrictMode>
+  );
+};
+
+const root = createRoot(document.getElementById("root") as Element);
+
+root.render(<AppToRender />);