Initial Commit

Co-authored-by: Monica Adel <monicatanios@gmail.com>

.gitignore

@@ -0,0 +1,10 @@
+# dependencies
+node_modules/
+.pnp
+.pnp.js
+
+# log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+*.log

README.md

@@ -0,0 +1,9 @@
+# TPD
+
+## Commits Tagging
+
+```yml
+[GLOBAL]: changes made to repository or to root workspace
+[CLIENT]: changes made to client module
+[SERVER]: changes made to server module
+```

client/.babelrc

@@ -0,0 +1,22 @@
+{
+  "presets": ["next/babel"],
+  "plugins": [
+    [
+      "import",
+      {
+        "libraryName": "antd",
+        "libraryDirectory": "lib",
+        "style": "index.css"
+      }
+    ],
+    [
+      "import",
+      {
+        "libraryName": "@ant-design/icons",
+        "libraryDirectory": "lib/icons",
+        "camel2DashComponentName": false
+      },
+      "@ant-design/icons"
+    ]
+  ]
+}

client/.env.example

@@ -0,0 +1 @@
+NEXT_PUBLIC_API_URL=

client/.gitignore

@@ -0,0 +1,25 @@
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel
+
+# Generated GraphQL Types
+generated/

client/codegen.yml

@@ -0,0 +1,9 @@
+overwrite: true
+schema: "http://localhost:4000/graphql"
+documents: "graphql/**/*.gql"
+generates:
+  generated/graphql.tsx:
+    plugins:
+      - "typescript"
+      - "typescript-operations"
+      - "typescript-urql"

client/graphql/queries/me.gql

@@ -0,0 +1,6 @@
+query Me {
+  me {
+    email
+    password
+  }
+}

client/next-env.d.ts

@@ -0,0 +1,2 @@
+/// <reference types="next" />
+/// <reference types="next/types/global" />

client/next.config.js

@@ -0,0 +1,5 @@
+const withBundleAnalyzer = require('@next/bundle-analyzer')({
+  enabled: process.env.ANALYZE === 'true',
+})
+
+module.exports = withBundleAnalyzer()

client/package.json

@@ -0,0 +1,41 @@
+{
+  "name": "@tpd/client",
+  "version": "1.0.0",
+  "scripts": {
+    "dev": "next",
+    "build": "next build",
+    "start": "next start",
+    "gen": "graphql-codegen --config codegen.yml"
+  },
+  "dependencies": {
+    "@ant-design/icons": "4.2.1",
+    "@next/bundle-analyzer": "^9.1.4",
+    "antd": "4.3.0",
+    "babel-plugin-import": "1.13.0",
+    "cross-env": "^7.0.2",
+    "dayjs": "1.8.28",
+    "esm": "^3.2.25",
+    "graphql": "^15.3.0",
+    "isomorphic-unfetch": "^3.0.0",
+    "next": "latest",
+    "next-urql": "^1.1.0",
+    "postcss-preset-env": "^6.7.0",
+    "react": "^16.13.1",
+    "react-dom": "^16.13.1",
+    "react-is": "^16.13.1",
+    "urql": "^1.10.1"
+  },
+  "devDependencies": {
+    "@graphql-codegen/cli": "1.17.8",
+    "@graphql-codegen/typescript": "^1.17.9",
+    "@graphql-codegen/typescript-operations": "1.17.8",
+    "@graphql-codegen/typescript-urql": "^2.0.1",
+    "@types/node": "^14.10.1",
+    "@types/react": "^16.9.49"
+  },
+  "browser": {
+    "fs": false,
+    "path": false
+  },
+  "license": "MIT"
+}

client/pages/_app.tsx

@@ -0,0 +1,7 @@
+import "antd/dist/antd.css";
+import "../styles/vars.css";
+import "../styles/global.css";
+
+export default function MyApp({ Component, pageProps }) {
+  return <Component {...pageProps} />;
+}

client/pages/index.tsx

@@ -0,0 +1,21 @@
+import { withUrqlClient } from "next-urql";
+import { createUrqlClient } from "../utils/createUrqlClient";
+import { useMeQuery } from "../generated/graphql";
+
+const Home = () => {
+  const [{ data }] = useMeQuery();
+
+  const content = { marginTop: "100px" };
+
+  return (
+    <div style={content}>
+      <div className="text-center mb-5">
+        Hello,
+        <br />
+        {data?.me.email}
+      </div>
+    </div>
+  );
+};
+
+export default withUrqlClient(createUrqlClient)(Home);

client/styles/global.css

@@ -0,0 +1,193 @@
+*,
+*:before,
+*:after {
+  box-sizing: inherit;
+}
+
+html {
+  box-sizing: border-box;
+  font-size: 14px;
+  -ms-overflow-style: -ms-autohiding-scrollbar;
+}
+
+body {
+  background-color: var(--backgroundColor);
+  -ms-text-size-adjust: 100%;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-rendering: optimizeLegibility;
+}
+
+.text-left {
+  text-align: left !important;
+}
+
+.text-right {
+  text-align: right !important;
+}
+
+.text-center {
+  text-align: center !important;
+}
+
+.m-0 {
+  margin: 0 !important;
+}
+
+.mt-0,
+.my-0 {
+  margin-top: 0 !important;
+}
+
+.mr-0,
+.mx-0 {
+  margin-right: 0 !important;
+}
+
+.mb-0,
+.my-0 {
+  margin-bottom: 0 !important;
+}
+
+.ml-0,
+.mx-0 {
+  margin-left: 0 !important;
+}
+
+.m-1 {
+  margin: 0.25rem !important;
+}
+
+.mt-1,
+.my-1 {
+  margin-top: 0.25rem !important;
+}
+
+.mr-1,
+.mx-1 {
+  margin-right: 0.25rem !important;
+}
+
+.mb-1,
+.my-1 {
+  margin-bottom: 0.25rem !important;
+}
+
+.ml-1,
+.mx-1 {
+  margin-left: 0.25rem !important;
+}
+
+.m-2 {
+  margin: 0.5rem !important;
+}
+
+.mt-2,
+.my-2 {
+  margin-top: 0.5rem !important;
+}
+
+.mr-2,
+.mx-2 {
+  margin-right: 0.5rem !important;
+}
+
+.mb-2,
+.my-2 {
+  margin-bottom: 0.5rem !important;
+}
+
+.ml-2,
+.mx-2 {
+  margin-left: 0.5rem !important;
+}
+
+.m-3 {
+  margin: 1rem !important;
+}
+
+.mt-3,
+.my-3 {
+  margin-top: 1rem !important;
+}
+
+.mr-3,
+.mx-3 {
+  margin-right: 1rem !important;
+}
+
+.mb-3,
+.my-3 {
+  margin-bottom: 1rem !important;
+}
+
+.ml-3,
+.mx-3 {
+  margin-left: 1rem !important;
+}
+
+.m-4 {
+  margin: 1.5rem !important;
+}
+
+.mt-4,
+.my-4 {
+  margin-top: 1.5rem !important;
+}
+
+.mr-4,
+.mx-4 {
+  margin-right: 1.5rem !important;
+}
+
+.mb-4,
+.my-4 {
+  margin-bottom: 1.5rem !important;
+}
+
+.ml-4,
+.mx-4 {
+  margin-left: 1.5rem !important;
+}
+
+.m-5 {
+  margin: 3rem !important;
+}
+
+.mt-5,
+.my-5 {
+  margin-top: 3rem !important;
+}
+
+.mr-5,
+.mx-5 {
+  margin-right: 3rem !important;
+}
+
+.mb-5,
+.my-5 {
+  margin-bottom: 3rem !important;
+}
+
+.ml-5,
+.mx-5 {
+  margin-left: 3rem !important;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  margin-right: 1rem;
+  font-size: 1.25rem;
+  white-space: nowrap;
+  color: var(--primaryColor);
+  justify-content: center;
+}
+
+.logo > svg {
+  fill: var(--primaryColor);
+}
+
+.text-disabled {
+  color: var(--textColorSecondary) !important;
+}

client/styles/vars.css

@@ -0,0 +1,5 @@
+:root {
+  --backgroundColor: #f7f7f7;
+  --primaryColor: #191a1b;
+  --textColorSecondary: rgba(0, 0, 0, 0.45);
+}