first commit

.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,ts,json,yml}]
+charset = utf-8
+indent_style = space
+indent_size = 2

.eslintignore

@@ -0,0 +1,4 @@
+# Ignore artifacts:
+.next
+public
+node_modules

.eslintrc

@@ -0,0 +1,13 @@
+{
+  "extends": [
+    "next/core-web-vitals",
+    "next",
+    "plugin:cypress/recommended",
+    "plugin:prettier/recommended",
+    "plugin:react-hooks/recommended"
+  ],
+  "plugins": ["cypress", "prettier", "react-hooks"],
+  "rules": {
+    "no-console": ["warn", { "allow": ["info", "warn", "error"] }]
+  }
+}

.github/workflows/ci.yml

@@ -0,0 +1,45 @@
+# Disabled waiting for ready-to-use action
+# name: CI
+# on: push
+
+# jobs:
+#   lost-pixel-update:
+#     name: Lost Pixel Update
+#     runs-on: ubuntu-latest
+#     strategy:
+#       matrix:
+#         node: [18]
+#     steps:
+#       - name: Checkout
+#         uses: actions/checkout@v3
+
+#       - name: Setup Node ${{ matrix.node }}
+#         uses: actions/setup-node@v3
+#         with:
+#           node-version: ${{ matrix.node }}
+#           cache: "yarn"
+
+#       - name: Install dependencies
+#         run: yarn install --frozen-lockfile
+
+#       - name: Build Next app
+#         run: yarn build
+
+#       - name: Run Next app
+#         run: yarn start &
+
+#       - name: Lost Pixel
+#         uses: lost-pixel/[email protected]
+#         env:
+#           LOST_PIXEL_MODE: update
+
+#       - name: Create Pull Request
+#         uses: peter-evans/create-pull-request@v4
+#         if: ${{ failure() && steps.lp.conclusion == 'failure' }}
+#         with:
+#           token: ${{ secrets.GH_TOKEN }}
+#           commit-message: update lost-pixel baselines
+#           delete-branch: true
+#           branch: "lost-pixel-update/${{ github.ref_name }}"
+#           title: "Lost Pixel update - ${{ github.ref_name }}"
+#           body: Automated baseline update PR created by Lost Pixel

.gitignore

@@ -0,0 +1,69 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# env file
+.env
+
+# vercel
+.vercel
+
+# android studio default
+*.iml
+.gradle
+local.properties
+.idea/caches
+.idea/libraries
+.idea/modules.xml
+.idea/workspace.xml
+.idea/navEditor.xml
+.idea/assetWizardSettings.xml
+.DS_Store
+build
+captures
+.externalNativeBuild
+.cxx
+local.properties
+
+# Yarn
+.yarn/*
+!.yarn/cache
+!.yarn/patches
+!.yarn/plugins
+!.yarn/releases
+!.yarn/sdks
+!.yarn/versions
+
+# Android Publishing
+*.keystore
+app/build
+
+# PWA
+**/public/workbox-*.js
+**/public/sw.js
+**/public/fallback-*.js

.npmrc

@@ -0,0 +1,5 @@
+save-exact = true
+tag-version-prefix=""
+strict-peer-dependencies = false
+auto-install-peers = true
+lockfile = true

.nvmrc

@@ -0,0 +1 @@
+lts/hydrogen

.prettierignore

@@ -0,0 +1,4 @@
+# Ignore artifacts:
+.next
+public
+node_modules

.prettierrc

@@ -0,0 +1,10 @@
+{
+  "printWidth": 80,
+  "tabWidth": 2,
+  "semi": true,
+  "singleQuote": false,
+  "trailingComma": "none",
+  "bracketSpacing": true,
+  "jsxBracketSameLine": false,
+  "arrowParens": "always"
+}

.vscode/extensions.json

@@ -0,0 +1,13 @@
+{
+  // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+  // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+  // List of extensions which should be recommended for users of this workspace.
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "bradlc.vscode-tailwindcss"
+  ],
+  // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+  "unwantedRecommendations": ["heybourn.headwind"]
+}

.vscode/settings.json

@@ -0,0 +1,24 @@
+{
+  "editor.tabSize": 2,
+  "files.insertFinalNewline": true,
+  "typescript.tsdk": "node_modules/typescript/lib",
+  "prettier.requireConfig": true,
+  "editor.formatOnSave": true,
+  "editor.defaultFormatter": "esbenp.prettier-vscode",
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true,
+    "source.fixAll.format": true,
+    "source.organizeImports": true,
+    "source.sortMembers": true
+  },
+  "eslint.validate": [
+    "javascript",
+    "javascriptreact",
+    "typescript",
+    "typescriptreact"
+  ],
+  "[json]": {
+    "editor.defaultFormatter": "vscode.json-language-features",
+    "editor.formatOnSave": true
+  }
+}

README.md

@@ -0,0 +1,32 @@
+# 📦 CardusApp TWA
+
+This is the Trusted Web Activity for the CardusApp project. It is a webapp that allows you to create and manage your own personal warehouse/storage/carton.
+
+## 😎 Features
+
+- [ ] Warehouse management
+  - [ ] Create warehouse
+  - [ ] Add box to warehouse
+  - [ ] Manage warehouse access
+- [ ] Box management
+  - [ ] Create box
+  - [ ] Add item to box
+  - [ ] Individually manage box access
+
+## 🛠 Develop Locally
+
+### 📄 Prerequisites
+
+- [Node.js](https://nodejs.org/en/)
+- [Yarn](https://yarnpkg.com/)
+
+### 🚀 Getting Started
+
+1. Clone the repository
+2. Install dependencies with `yarn install`
+3. Start the development server with `yarn dev`
+
+### 🏗️ Build
+
+1. Build the project with `yarn build`
+2. Start the production server with `yarn start`

components/layout/auth-layout.tsx

@@ -0,0 +1,38 @@
+import OnboardingScreen from "components/screen/onboarding";
+import PromptScreen from "components/screen/prompt/prompt-screen";
+import BottomNav from "components/ui/nav/bottom-nav";
+import TopNav from "components/ui/nav/top-nav";
+import Head from "next/head";
+import { ReactNode, useEffect, useState } from "react";
+
+type Props = {
+  children?: ReactNode;
+  title?: string;
+};
+
+const AuthLayout = ({ children }: Props) => {
+  const [mounted, setMounted] = useState(false);
+  const [isOnboarding, setIsOnboarding] = useState(false);
+
+  useEffect(() => {
+    setMounted(true);
+    const isViewedOnboarding =
+      localStorage.getItem("viewedOnboarding")?.toLowerCase() === "true";
+    setIsOnboarding(isViewedOnboarding);
+  }, []);
+
+  if (!mounted) return <PromptScreen type="loading" />;
+  if (!isOnboarding) return <OnboardingScreen />;
+  return (
+    <>
+      <Head>
+        <title>Auth - Cardus</title>
+      </Head>
+      <TopNav />
+      <main className="mx-4">{children}</main>
+      {/* <BottomNav /> */}
+    </>
+  );
+};
+
+export default AuthLayout;

components/layout/mobile-layout.tsx

@@ -0,0 +1,43 @@
+import PromptScreen from "components/screen/prompt/prompt-screen";
+import BottomNav from "components/ui/nav/bottom-nav";
+import TopNav from "components/ui/nav/top-nav";
+import { isMobileAtom } from "configs/atoms";
+import { useAtom } from "jotai";
+import { useSession } from "next-auth/react";
+import Head from "next/head";
+import { ReactNode, useEffect } from "react";
+
+type Props = {
+  children?: ReactNode;
+  hideBottomNav?: boolean;
+};
+
+const MobileLayout = ({ children, hideBottomNav }: Props): JSX.Element => {
+  const { status } = useSession({ required: true });
+  const [isMobile, setIsMobile] = useAtom(isMobileAtom);
+
+  useEffect(() => {
+    setIsMobile(
+      Math.min(window.screen.width, window.screen.height) < 768 ||
+        navigator.userAgent.indexOf("Mobi") > -1
+    );
+  }, [setIsMobile]);
+
+  if (status === "loading") return <PromptScreen type="loading" />;
+  if (!isMobile) return <PromptScreen type="notMobile" />;
+
+  return (
+    <>
+      <Head>
+        <title>Cardus</title>
+      </Head>
+      <TopNav />
+      <main className="mx-4 my-2">{children}</main>
+      <BottomNav hide={hideBottomNav} />
+    </>
+  );
+};
+
+MobileLayout.auth = true;
+
+export default MobileLayout;

components/screen/onboarding/index.tsx

@@ -0,0 +1,38 @@
+import { ChevronRightIcon } from "@heroicons/react/24/solid";
+import { signIn } from "next-auth/react";
+import { useState } from "react";
+import OnboardingOne from "./onboarding-one";
+import OnboardingThree from "./onboarding-three";
+import OnboardingTwo from "./onboarding-two";
+
+const OnboardingScreen = () => {
+  const [phase, setPhase] = useState(0);
+
+  const handleSignIn = () => {
+    if (typeof window !== "undefined") {
+      localStorage.setItem("viewedOnboarding", "true");
+      signIn();
+    } else {
+      alert("Error: window is undefined");
+    }
+  };
+
+  return (
+    <section>
+      {phase === 0 && <OnboardingOne />}
+      {phase === 1 && <OnboardingTwo />}
+      {phase === 2 && <OnboardingThree />}
+      <div className="absolute bottom-10 right-10">
+        <button
+          className="flex items-center rounded-full bg-blue-600 px-4 py-2 text-xl font-medium"
+          onClick={() => (phase < 2 ? setPhase(phase + 1) : handleSignIn())}
+        >
+          {phase < 2 ? "Next" : "Login"}{" "}
+          <ChevronRightIcon className="ml-2 h-6 w-6" />
+        </button>
+      </div>
+    </section>
+  );
+};
+
+export default OnboardingScreen;

components/screen/onboarding/onboarding-one.tsx

@@ -0,0 +1,13 @@
+const OnboardingOne = ({ ...props }) => {
+  return (
+    <div
+      className="flex h-screen flex-col justify-center gap-2  text-center "
+      {...props}
+    >
+      <h1 className="text-5xl font-bold">Easy Manage 😉</h1>
+      <h1 className="text-3xl font-semibold">Personal Warehousing</h1>
+    </div>
+  );
+};
+
+export default OnboardingOne;

components/screen/onboarding/onboarding-three.tsx

@@ -0,0 +1,13 @@
+const OnboardingThree = ({ ...props }) => {
+  return (
+    <div
+      className="flex h-screen flex-col justify-center gap-2  text-center "
+      {...props}
+    >
+      <h1 className="text-5xl font-bold">Know the Box Content</h1>
+      <h1 className="text-3xl font-semibold">Without 😎 Opening it</h1>
+    </div>
+  );
+};
+
+export default OnboardingThree;