✨ feat: completed setup starter kit

.env.example

@@ -0,0 +1,14 @@
+# Since the ".env" file is gitignored, you can use the ".env.example" file to
+# build a new ".env" file when you clone the repo. Keep this file up-to-date
+# when you add new variables to `.env`.
+
+# This file will be committed to version control, so make sure not to have any
+# secrets in it. If you are cloning this repo, create a copy of this file named
+# ".env" and populate it with your secrets.
+
+# When adding additional environment variables, the schema in "/src/env.mjs"
+# should be updated accordingly.
+
+# Example:
+NEXT_PUBLIC_GRAPHQL_API=https://graphqlzero.almansi.me/api
+NEXT_PUBLIC_REST_API=https://jsonplaceholder.typicode.com

.eslintrc.cjs

@@ -0,0 +1,28 @@
+/** @type {import("eslint").Linter.Config} */
+module.exports = {
+  overrides: [
+    {
+      files: ["*.ts", "*.tsx"],
+      parserOptions: {
+        project: "tsconfig.json",
+      },
+    },
+  ],
+  ignorePatterns: ["node_modules/", "src/gql","src/pages/account/flovatar.jsx"],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    project: "./tsconfig.json",
+  },
+  plugins: ["@typescript-eslint"],
+  extends: ["next/core-web-vitals", "plugin:@typescript-eslint/recommended"],
+  rules: {
+    "@next/next/no-img-element": "off",
+    "@typescript-eslint/consistent-type-imports": [
+      "warn",
+      {
+        prefer: "type-imports",
+        fixStyle: "inline-type-imports",
+      },
+    ],
+  },
+};

.gitignore

@@ -0,0 +1,44 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# database
+/prisma/db.sqlite
+/prisma/db.sqlite-journal
+
+# next.js
+/.next/
+/out/
+next-env.d.ts
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+.pnpm-debug.log*
+
+# local env files
+# do not commit any .env files to git, except for the .env.example file. https://create.t3.gg/en/usage/env-variables#using-environment-variables
+.env
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+
+package-lock.json

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "nuxt.isNuxtApp": false
+}

README.md

@@ -0,0 +1,37 @@
+# Starter kit
+
+this repo is full stack nextjs with all supported needed like react hook form, zod, graphql, trpc, tailwind etc
+
+## support
+
+- Form (Mantine + React hook form)
+  - Drop Zone upload file
+  - Number Input
+  - Date Input
+  - Switch Input
+  - Text Input
+  - Select Input
+
+> Note - will add more other input soon and will add tailwind input support (tailwind + react hook form)
+
+- Graphql custom hooks `useGraphQL` and `useGraphQLMutation` with generated `yarn gen` with `NEXT_PUBLIC_GRAPHQL_API` which is exteral graphql api
+
+- Axios custom hooks `useAxiosQuery` And `useAxiosQueryMutation` with `NEXT_PUBLIC_REST_API` which is external rest api but required provide interface to avoid bug
+
+## Step to create page with CRUD
+
+- view page all items pages/<name>/index.tsx
+- form page to create items pages/<name>/new.tsx
+- view page item details pages/<name>/[id]/index.tsx
+- edit page a items pages/<name>/[id]/edit.tsx
+
+## Task to complete
+
+- [x] Created 5-6 Components mantine input with react hook form
+- [x] Created custom graphql hooks with help of library
+- [x] Created custom axios hooks with help of library
+- [ ] Create small any components with tailwind with windstitch like button
+- [ ] Tailwind + React hook form (native tailwind + windstitch input with react hook form)
+- [ ] Add prisma insipre by t3-app
+- [ ] Add nuxtAuth inspire by t3-app
+- [ ] Create different example like useGraphql and useAxiosQuery with different page

next.config.mjs

@@ -0,0 +1,23 @@
+// @ts-check
+
+/**
+ * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation.
+ * This is especially useful for Docker builds.
+ */
+!process.env.SKIP_ENV_VALIDATION && (await import("./src/env.mjs"));
+
+/** @type {import("next").NextConfig} */
+const config = {
+  reactStrictMode: true,
+  /**
+   * If you have the "experimental: { appDir: true }" setting enabled, then you
+   * must comment the below `i18n` config out.
+   *
+   * @see https://github.com/vercel/next.js/issues/41980
+   */
+  i18n: {
+    locales: ["en"],
+    defaultLocale: "en",
+  },
+};
+export default config;

package.json

@@ -0,0 +1,68 @@
+{
+  "name": "example-starter-kit",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "build": "next build",
+    "dev": "next dev",
+    "lint": "next lint",
+    "start": "next start",
+    "gen": "dotenv cross-var 'genql -e %NEXT_PUBLIC_GRAPHQL_API% -o ./src/generated'"
+  },
+  "dependencies": {
+    "@emotion/react": "^11.10.6",
+    "@emotion/server": "^11.10.0",
+    "@hookform/resolvers": "^2.9.10",
+    "@mantine/core": "^5.10.4",
+    "@mantine/dates": "^5.10.3",
+    "@mantine/dropzone": "^5.10.4",
+    "@mantine/hooks": "^5.10.5",
+    "@mantine/next": "^5.10.4",
+    "@mantine/notifications": "^5.10.3",
+    "@tabler/icons-react": "^2.2.0",
+    "@tanstack/react-query": "^4.24.10",
+    "@trpc/client": "^10.9.0",
+    "@trpc/next": "^10.9.0",
+    "@trpc/react-query": "^10.9.0",
+    "@trpc/server": "^10.9.0",
+    "cookies-next": "^2.1.1",
+    "date-fns": "^2.29.3",
+    "dayjs": "^1.11.7",
+    "next": "13.1.6",
+    "next-auth": "^4.19.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-hook-form": "^7.43.0",
+    "react-use": "^17.4.0",
+    "redaxios": "^0.5.1",
+    "superjson": "1.9.1",
+    "url-join": "^5.0.0",
+    "windstitch": "^0.3.0",
+    "zod": "^3.20.2"
+  },
+  "devDependencies": {
+    "@genql/cli": "^3.0.4",
+    "@types/eslint": "^8.21.1",
+    "@types/node": "^18.11.18",
+    "@types/prettier": "^2.7.2",
+    "@types/react": "^18.0.26",
+    "@types/react-dom": "^18.0.10",
+    "@typescript-eslint/eslint-plugin": "^5.47.1",
+    "@typescript-eslint/parser": "^5.47.1",
+    "autoprefixer": "^10.4.7",
+    "cross-var": "^1.1.0",
+    "dotenv": "^16.0.3",
+    "dotenv-cli": "^7.1.0",
+    "eslint": "^8.30.0",
+    "eslint-config-next": "13.1.6",
+    "postcss": "^8.4.14",
+    "prettier": "^2.8.1",
+    "prettier-plugin-tailwindcss": "^0.2.1",
+    "tailwindcss": "^3.2.0",
+    "ts-node": "^10.9.1",
+    "typescript": "^4.9.5"
+  },
+  "ct3aMetadata": {
+    "initVersion": "7.5.6"
+  }
+}

postcss.config.cjs

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

prettier.config.cjs

@@ -0,0 +1,4 @@
+/** @type {import("prettier").Config} */
+module.exports = {
+  plugins: [require.resolve("prettier-plugin-tailwindcss")],
+};

src/assets/index.ts

@@ -0,0 +1 @@
+export {};

src/components/ExampleForm.tsx

@@ -0,0 +1,47 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+import { Grid, Container } from "@mantine/core";
+import { type z } from "zod";
+import Form, { type FormProps } from "./form/Form";
+import NumberField from "./form/NumberField";
+
+export function ExampleForm<S extends z.ZodType<any, any>>(
+  props: FormProps<S>
+) {
+  return (
+    <Form<S> {...props}>
+      <Container>
+        <Grid>
+          <Grid.Col md={6}>
+            <NumberField
+              name="amount"
+              label="Your amount"
+              placeholder="Your amount"
+              required
+              min={0.001}
+            />
+          </Grid.Col>
+          <Grid.Col md={6}>
+            <NumberField
+              name="deposit"
+              label="Your deposit"
+              placeholder="Your deposit"
+              required
+              min={0.001}
+            />
+          </Grid.Col>
+
+          <Grid.Col md={12}>
+            <NumberField
+              name="duration"
+              label="duration (in days)"
+              placeholder="duration (in days)"
+              required
+            />
+          </Grid.Col>
+        </Grid>
+      </Container>
+    </Form>
+  );
+}
+
+export default ExampleForm;

src/components/Footer.tsx

@@ -0,0 +1,9 @@
+const Footer = () => {
+  return (
+    <div>
+      <h2>Made with 💗 2023 </h2>
+    </div>
+  );
+};
+
+export default Footer;

src/components/Header.tsx

@@ -0,0 +1,20 @@
+import { Header as HeaderMantine } from "@mantine/core";
+const Header = () => {
+  return (
+    <HeaderMantine height={60} p="xs">
+      <div className="flex">
+        <div className="flex w-[170px] items-center justify-center">
+          <div></div>
+        </div>
+
+        <div className="flex w-full justify-between">
+          <div> </div>
+
+          <div className="flex space-x-5 pr-5"></div>
+        </div>
+      </div>
+    </HeaderMantine>
+  );
+};
+
+export default Header;

src/components/Navbar.tsx

@@ -0,0 +1,36 @@
+import { Navbar as NavbarMantine, NavLink } from "@mantine/core";
+import { useRouter } from "next/router";
+import { navlinks } from "~/constants";
+
+const Navbar = () => {
+  const router = useRouter();
+  return (
+    <NavbarMantine
+      width={{ base: 210 }}
+      className="flex flex-col justify-between"
+    >
+      <div>
+        <NavbarMantine.Section className="space-y-5 p-5">
+          {navlinks.map((link) => (
+            <div key={link.name} className="flex justify-center">
+              <NavLink
+                label={link.name}
+                onClick={() => {
+                  if (link.name === "logout") {
+                    // disconnect && disconnect();
+                  } else {
+                    router.push(link.link);
+                  }
+                }}
+                className="rounded-full capitalize"
+                icon={<link.icon />}
+              />
+            </div>
+          ))}
+        </NavbarMantine.Section>
+      </div>
+    </NavbarMantine>
+  );
+};
+
+export default Navbar;