Yangshun Tay
2 years ago
parent
27a82e8c0f
commit
523d91f920
@ -0,0 +1,13 @@
|
||||
.DS_Store
|
||||
node_modules
|
||||
.turbo
|
||||
*.log
|
||||
.next
|
||||
dist
|
||||
dist-ssr
|
||||
*.local
|
||||
.env
|
||||
.cache
|
||||
server/dist
|
||||
public/dist
|
||||
.turbo
|
||||
@ -0,0 +1,27 @@
|
||||
node_modules
|
||||
.next
|
||||
build
|
||||
dist
|
||||
*.tsbuildinfo
|
||||
*.gitignore
|
||||
*.svg
|
||||
*.lock
|
||||
*.npmignore
|
||||
*.sql
|
||||
*.png
|
||||
*.jpg
|
||||
*.jpeg
|
||||
*.gif
|
||||
*.ico
|
||||
*.sh
|
||||
Dockerfile
|
||||
Dockerfile.*
|
||||
.env
|
||||
.env.*
|
||||
LICENSE
|
||||
*.log
|
||||
.DS_Store
|
||||
.dockerignore
|
||||
*.patch
|
||||
*.toml
|
||||
*.prisma
|
||||
@ -0,0 +1,19 @@
|
||||
{
|
||||
"files.trimFinalNewlines": true,
|
||||
"files.trimTrailingWhitespace": true,
|
||||
"cSpell.autoFormatConfigFile": true,
|
||||
"editor.formatOnPaste": true,
|
||||
"editor.formatOnSave": true,
|
||||
"editor.formatOnSaveMode": "file",
|
||||
"javascript.format.enable": true,
|
||||
"json.format.enable": true,
|
||||
"eslint.format.enable": false,
|
||||
"css.format.enable": true,
|
||||
"css.format.newlineBetweenRules": true,
|
||||
"css.format.newlineBetweenSelectors": true,
|
||||
"css.format.preserveNewLines": true,
|
||||
"typescript.format.enable": true,
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.fixAll": true
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,10 @@
|
||||
# Prisma
|
||||
DATABASE_URL=postgresql://postgres:[PASSWORD]@localhost:5432/postgres
|
||||
|
||||
# Next Auth
|
||||
NEXTAUTH_SECRET=any_string_you_wish
|
||||
NEXTAUTH_URL=http://localhost:3000
|
||||
|
||||
# Next Auth GitHub Provider
|
||||
GITHUB_CLIENT_ID=a5164b1943b5413ff2f5
|
||||
GITHUB_CLIENT_SECRET=
|
||||
@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: ['tih', 'next/core-web-vitals'],
|
||||
parserOptions: {
|
||||
tsconfigRootDir: __dirname,
|
||||
project: ['./tsconfig.json'],
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,40 @@
|
||||
# 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/
|
||||
|
||||
# production
|
||||
/build
|
||||
|
||||
# misc
|
||||
.DS_Store
|
||||
*.pem
|
||||
|
||||
# debug
|
||||
npm-debug.log*
|
||||
yarn-debug.log*
|
||||
yarn-error.log*
|
||||
.pnpm-debug.log*
|
||||
|
||||
# local env files
|
||||
.env
|
||||
.env*.local
|
||||
|
||||
# vercel
|
||||
.vercel
|
||||
|
||||
# typescript
|
||||
*.tsbuildinfo
|
||||
@ -0,0 +1,50 @@
|
||||
# Create T3 App
|
||||
|
||||
This is an app bootstrapped according to the [init.tips](https://init.tips) stack, also known as the T3-Stack.
|
||||
|
||||
## Why are there `.js` files in here?
|
||||
|
||||
As per [T3-Axiom #3](https://github.com/t3-oss/create-t3-app/tree/next#3-typesafety-isnt-optional), we take typesafety as a first class citizen. Unfortunately, not all frameworks and plugins support TypeScript which means some of the configuration files have to be `.js` files.
|
||||
|
||||
We try to emphasize that these files are javascript for a reason, by explicitly declaring its type (`cjs` or `mjs`) depending on what's supported by the library it is used by. Also, all the `js` files in this project are still typechecked using a `@ts-check` comment at the top.
|
||||
|
||||
## What's next? How do I make an app with this?
|
||||
|
||||
We try to keep this project as simple as possible, so you can start with the most basic configuration and then move on to more advanced configuration.
|
||||
|
||||
If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our [Discord](https://t3.gg/discord) and ask for help.
|
||||
|
||||
- [Next-Auth.js](https://next-auth.js.org)
|
||||
- [Prisma](https://prisma.io)
|
||||
- [TailwindCSS](https://tailwindcss.com)
|
||||
- [tRPC](https://trpc.io) (using @next version? [see v10 docs here](https://trpc.io/docs/v10/))
|
||||
|
||||
Also checkout these awesome tutorials on `create-t3-app`.
|
||||
|
||||
- [Build a Blog With the T3 Stack - tRPC, TypeScript, Next.js, Prisma & Zod](https://www.youtube.com/watch?v=syEWlxVFUrY)
|
||||
- [Build a Live Chat Application with the T3 Stack - TypeScript, Tailwind, tRPC](https://www.youtube.com/watch?v=dXRRY37MPuk)
|
||||
- [Build a full stack app with create-t3-app](https://www.nexxel.dev/blog/ct3a-guestbook)
|
||||
- [A first look at create-t3-app](https://dev.to/ajcwebdev/a-first-look-at-create-t3-app-1i8f)
|
||||
|
||||
## How do I deploy this?
|
||||
|
||||
### Vercel
|
||||
|
||||
We recommend deploying to [Vercel](https://vercel.com/?utm_source=t3-oss&utm_campaign=oss). It makes it super easy to deploy NextJs apps.
|
||||
|
||||
- Push your code to a GitHub repository.
|
||||
- Go to [Vercel](https://vercel.com/?utm_source=t3-oss&utm_campaign=oss) and sign up with GitHub.
|
||||
- Create a Project and import the repository you pushed your code to.
|
||||
- Add your environment variables.
|
||||
- Click **Deploy**
|
||||
- Now whenever you push a change to your repository, Vercel will automatically redeploy your website!
|
||||
|
||||
### Docker
|
||||
|
||||
You can also dockerize this stack and deploy a container. See the [Docker deployment page](https://create-t3-app-nu.vercel.app/en/deployment/docker) for details.
|
||||
|
||||
## Useful resources
|
||||
|
||||
Here are some resources that we commonly refer to:
|
||||
|
||||
- [Protecting routes with Next-Auth.js](https://next-auth.js.org/configuration/nextjs#unstable_getserversession)
|
||||
@ -0,0 +1,5 @@
|
||||
/// <reference types="next" />
|
||||
/// <reference types="next/image-types/global" />
|
||||
|
||||
// NOTE: This file should not be edited
|
||||
// see https://nextjs.org/docs/basic-features/typescript for more information.
|
||||
@ -0,0 +1,18 @@
|
||||
import { env } from './src/env/server.mjs';
|
||||
|
||||
/**
|
||||
* Don't be scared of the generics here.
|
||||
* All they do is to give us autocompletion when using this.
|
||||
*
|
||||
* @template {import('next').NextConfig} T
|
||||
* @param {T} config - A generic parameter that flows through to the return type
|
||||
* @constraint {{import('next').NextConfig}}
|
||||
*/
|
||||
function defineNextConfig(config) {
|
||||
return config;
|
||||
}
|
||||
|
||||
export default defineNextConfig({
|
||||
reactStrictMode: true,
|
||||
swcMinify: true,
|
||||
});
|
||||
File diff suppressed because it is too large
Load Diff
@ -0,0 +1,44 @@
|
||||
{
|
||||
"name": "@tih/portal",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "next dev",
|
||||
"build": "next build",
|
||||
"start": "next start",
|
||||
"lint": "next lint",
|
||||
"tsc": "tsc",
|
||||
"postinstall": "prisma generate",
|
||||
"prisma": "prisma"
|
||||
},
|
||||
"dependencies": {
|
||||
"@next-auth/prisma-adapter": "^1.0.4",
|
||||
"@prisma/client": "^4.4.0",
|
||||
"@tih/ui": "*",
|
||||
"@trpc/client": "^9.27.2",
|
||||
"@trpc/next": "^9.27.2",
|
||||
"@trpc/react": "^9.27.2",
|
||||
"@trpc/server": "^9.27.2",
|
||||
"next": "12.3.1",
|
||||
"next-auth": "~4.10.3",
|
||||
"react": "18.2.0",
|
||||
"react-dom": "18.2.0",
|
||||
"react-query": "^3.39.2",
|
||||
"superjson": "^1.10.0",
|
||||
"zod": "^3.18.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tih/tsconfig": "*",
|
||||
"@types/node": "18.0.0",
|
||||
"@types/react": "18.0.21",
|
||||
"@types/react-dom": "18.0.6",
|
||||
"autoprefixer": "^10.4.12",
|
||||
"postcss": "^8.4.16",
|
||||
"prisma": "^4.4.0",
|
||||
"tailwindcss": "^3.1.8",
|
||||
"typescript": "4.8.3"
|
||||
},
|
||||
"ct3aMetadata": {
|
||||
"initVersion": "5.13.1"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,6 @@
|
||||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,73 @@
|
||||
-- CreateTable
|
||||
CREATE TABLE "Example" (
|
||||
"id" TEXT NOT NULL,
|
||||
|
||||
CONSTRAINT "Example_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "Account" (
|
||||
"id" TEXT NOT NULL,
|
||||
"userId" TEXT NOT NULL,
|
||||
"type" TEXT NOT NULL,
|
||||
"provider" TEXT NOT NULL,
|
||||
"providerAccountId" TEXT NOT NULL,
|
||||
"refresh_token" TEXT,
|
||||
"access_token" TEXT,
|
||||
"expires_at" INTEGER,
|
||||
"token_type" TEXT,
|
||||
"scope" TEXT,
|
||||
"id_token" TEXT,
|
||||
"session_state" TEXT,
|
||||
|
||||
CONSTRAINT "Account_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "Session" (
|
||||
"id" TEXT NOT NULL,
|
||||
"sessionToken" TEXT NOT NULL,
|
||||
"userId" TEXT NOT NULL,
|
||||
"expires" TIMESTAMP(3) NOT NULL,
|
||||
|
||||
CONSTRAINT "Session_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "User" (
|
||||
"id" TEXT NOT NULL,
|
||||
"name" TEXT,
|
||||
"email" TEXT,
|
||||
"emailVerified" TIMESTAMP(3),
|
||||
"image" TEXT,
|
||||
|
||||
CONSTRAINT "User_pkey" PRIMARY KEY ("id")
|
||||
);
|
||||
|
||||
-- CreateTable
|
||||
CREATE TABLE "VerificationToken" (
|
||||
"identifier" TEXT NOT NULL,
|
||||
"token" TEXT NOT NULL,
|
||||
"expires" TIMESTAMP(3) NOT NULL
|
||||
);
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "Account_provider_providerAccountId_key" ON "Account"("provider", "providerAccountId");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "Session_sessionToken_key" ON "Session"("sessionToken");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "User_email_key" ON "User"("email");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "VerificationToken_token_key" ON "VerificationToken"("token");
|
||||
|
||||
-- CreateIndex
|
||||
CREATE UNIQUE INDEX "VerificationToken_identifier_token_key" ON "VerificationToken"("identifier", "token");
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "Account" ADD CONSTRAINT "Account_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
|
||||
|
||||
-- AddForeignKey
|
||||
ALTER TABLE "Session" ADD CONSTRAINT "Session_userId_fkey" FOREIGN KEY ("userId") REFERENCES "User"("id") ON DELETE CASCADE ON UPDATE CASCADE;
|
||||
@ -0,0 +1,3 @@
|
||||
# Please do not edit this file manually
|
||||
# It should be added in your version-control system (i.e. Git)
|
||||
provider = "postgresql"
|
||||
@ -0,0 +1,64 @@
|
||||
// This is your Prisma schema file,
|
||||
// learn more about it in the docs: https://pris.ly/d/prisma-schema
|
||||
|
||||
generator client {
|
||||
provider = "prisma-client-js"
|
||||
}
|
||||
|
||||
datasource db {
|
||||
provider = "postgresql"
|
||||
// NOTE: When using postgresql, mysql or sqlserver, uncomment the @db.text annotations in model Account below
|
||||
// Further reading:
|
||||
// https://next-auth.js.org/adapters/prisma#create-the-prisma-schema
|
||||
// https://www.prisma.io/docs/reference/api-reference/prisma-schema-reference#string
|
||||
url = env("DATABASE_URL")
|
||||
}
|
||||
|
||||
model Example {
|
||||
id String @id @default(cuid())
|
||||
}
|
||||
|
||||
// Necessary for Next auth
|
||||
model Account {
|
||||
id String @id @default(cuid())
|
||||
userId String
|
||||
type String
|
||||
provider String
|
||||
providerAccountId String
|
||||
refresh_token String? //@db.Text
|
||||
access_token String? //@db.Text
|
||||
expires_at Int?
|
||||
token_type String?
|
||||
scope String?
|
||||
id_token String? //@db.Text
|
||||
session_state String?
|
||||
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
|
||||
|
||||
@@unique([provider, providerAccountId])
|
||||
}
|
||||
|
||||
model Session {
|
||||
id String @id @default(cuid())
|
||||
sessionToken String @unique
|
||||
userId String
|
||||
expires DateTime
|
||||
user User @relation(fields: [userId], references: [id], onDelete: Cascade)
|
||||
}
|
||||
|
||||
model User {
|
||||
id String @id @default(cuid())
|
||||
name String?
|
||||
email String? @unique
|
||||
emailVerified DateTime?
|
||||
image String?
|
||||
accounts Account[]
|
||||
sessions Session[]
|
||||
}
|
||||
|
||||
model VerificationToken {
|
||||
identifier String
|
||||
token String @unique
|
||||
expires DateTime
|
||||
|
||||
@@unique([identifier, token])
|
||||
}
|
||||
|
After Width: | Height: | Size: 9.4 KiB |
@ -0,0 +1,38 @@
|
||||
// @ts-check
|
||||
import { clientEnv, clientSchema } from './schema.mjs';
|
||||
|
||||
const _clientEnv = clientSchema.safeParse(clientEnv);
|
||||
|
||||
export const formatErrors = (
|
||||
/** @type {import('zod').ZodFormattedError<Map<string,string>,string>} */
|
||||
errors,
|
||||
) =>
|
||||
Object.entries(errors)
|
||||
.map(([name, value]) => {
|
||||
if (value && '_errors' in value)
|
||||
return `${name}: ${value._errors.join(', ')}\n`;
|
||||
})
|
||||
.filter(Boolean);
|
||||
|
||||
if (_clientEnv.success === false) {
|
||||
console.error(
|
||||
'❌ Invalid environment variables:\n',
|
||||
...formatErrors(_clientEnv.error.format()),
|
||||
);
|
||||
throw new Error('Invalid environment variables');
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate that client-side environment variables are exposed to the client.
|
||||
*/
|
||||
for (let key of Object.keys(_clientEnv.data)) {
|
||||
if (!key.startsWith('NEXT_PUBLIC_')) {
|
||||
console.warn(
|
||||
`❌ Invalid public environment variable name: ${key}. It must begin with 'NEXT_PUBLIC_'`,
|
||||
);
|
||||
|
||||
throw new Error('Invalid public environment variable name');
|
||||
}
|
||||
}
|
||||
|
||||
export const env = _clientEnv.data;
|
||||
@ -0,0 +1,34 @@
|
||||
// @ts-check
|
||||
import { z } from 'zod';
|
||||
|
||||
/**
|
||||
* Specify your server-side environment variables schema here.
|
||||
* This way you can ensure the app isn't built with invalid env vars.
|
||||
*/
|
||||
export const serverSchema = z.object({
|
||||
DATABASE_URL: z.string().url(),
|
||||
NODE_ENV: z.enum(['development', 'test', 'production']),
|
||||
NEXTAUTH_SECRET: z.string(),
|
||||
NEXTAUTH_URL: z.string().url(),
|
||||
GITHUB_CLIENT_ID: z.string(),
|
||||
GITHUB_CLIENT_SECRET: z.string(),
|
||||
});
|
||||
|
||||
/**
|
||||
* Specify your client-side environment variables schema here.
|
||||
* This way you can ensure the app isn't built with invalid env vars.
|
||||
* To expose them to the client, prefix them with `NEXT_PUBLIC_`.
|
||||
*/
|
||||
export const clientSchema = z.object({
|
||||
// NEXT_PUBLIC_BAR: z.string(),
|
||||
});
|
||||
|
||||
/**
|
||||
* You can't destruct `process.env` as a regular object, so you have to do
|
||||
* it manually here. This is because Next.js evaluates this at build time,
|
||||
* and only used environment variables are included in the build.
|
||||
* @type {{ [k in keyof z.infer<typeof clientSchema>]: z.infer<typeof clientSchema>[k] | undefined }}
|
||||
*/
|
||||
export const clientEnv = {
|
||||
// NEXT_PUBLIC_BAR: process.env.NEXT_PUBLIC_BAR,
|
||||
};
|
||||
@ -0,0 +1,30 @@
|
||||
// @ts-check
|
||||
/**
|
||||
* This file is included in `/next.config.mjs` which ensures the app isn't built with invalid env vars.
|
||||
* It has to be a `.mjs`-file to be imported there.
|
||||
*/
|
||||
import { serverSchema } from './schema.mjs';
|
||||
import { env as clientEnv, formatErrors } from './client.mjs';
|
||||
|
||||
const _serverEnv = serverSchema.safeParse(process.env);
|
||||
|
||||
if (_serverEnv.success === false) {
|
||||
console.error(
|
||||
'❌ Invalid environment variables:\n',
|
||||
...formatErrors(_serverEnv.error.format()),
|
||||
);
|
||||
throw new Error('Invalid environment variables');
|
||||
}
|
||||
|
||||
/**
|
||||
* Validate that server-side environment variables are not exposed to the client.
|
||||
*/
|
||||
for (let key of Object.keys(_serverEnv.data)) {
|
||||
if (key.startsWith('NEXT_PUBLIC_')) {
|
||||
console.warn('❌ You are exposing a server-side env-variable:', key);
|
||||
|
||||
throw new Error('You are exposing a server-side env-variable');
|
||||
}
|
||||
}
|
||||
|
||||
export const env = { ..._serverEnv.data, ...clientEnv };
|
||||
@ -0,0 +1,76 @@
|
||||
import type { AppType } from 'next/app';
|
||||
import type { Session } from 'next-auth';
|
||||
import { SessionProvider } from 'next-auth/react';
|
||||
import superjson from 'superjson';
|
||||
import { httpBatchLink } from '@trpc/client/links/httpBatchLink';
|
||||
import { loggerLink } from '@trpc/client/links/loggerLink';
|
||||
import { withTRPC } from '@trpc/next';
|
||||
|
||||
import type { AppRouter } from '~/server/router';
|
||||
|
||||
import '~/styles/globals.css';
|
||||
|
||||
const MyApp: AppType<{ session: Session | null }> = ({
|
||||
Component,
|
||||
pageProps: { session, ...pageProps },
|
||||
}) => {
|
||||
return (
|
||||
<SessionProvider session={session}>
|
||||
<Component {...pageProps} />
|
||||
</SessionProvider>
|
||||
);
|
||||
};
|
||||
|
||||
const getBaseUrl = () => {
|
||||
if (typeof window !== 'undefined') {
|
||||
return '';
|
||||
} // Browser should use relative url
|
||||
if (process.env.VERCEL_URL) {
|
||||
return `https://${process.env.VERCEL_URL}`;
|
||||
} // SSR should use vercel url
|
||||
return `http://localhost:${process.env.PORT ?? 3000}`; // Dev SSR should use localhost
|
||||
};
|
||||
|
||||
export default withTRPC<AppRouter>({
|
||||
config({ ctx: _ctx }) {
|
||||
/**
|
||||
* If you want to use SSR, you need to use the server's full URL
|
||||
* @link https://trpc.io/docs/ssr
|
||||
*/
|
||||
const url = `${getBaseUrl()}/api/trpc`;
|
||||
|
||||
return {
|
||||
links: [
|
||||
loggerLink({
|
||||
enabled: (opts) =>
|
||||
process.env.NODE_ENV === 'development' ||
|
||||
(opts.direction === 'down' && opts.result instanceof Error),
|
||||
}),
|
||||
httpBatchLink({ url }),
|
||||
],
|
||||
transformer: superjson,
|
||||
url,
|
||||
/**
|
||||
* @link https://react-query.tanstack.com/reference/QueryClient
|
||||
*/
|
||||
// queryClientConfig: { defaultOptions: { queries: { staleTime: 60 } } },
|
||||
|
||||
// To use SSR properly you need to forward the client's headers to the server
|
||||
// headers: () => {
|
||||
// if (ctx?.req) {
|
||||
// const headers = ctx?.req?.headers;
|
||||
// delete headers?.connection;
|
||||
// return {
|
||||
// ...headers,
|
||||
// "x-ssr": "1",
|
||||
// };
|
||||
// }
|
||||
// return {};
|
||||
// }
|
||||
};
|
||||
},
|
||||
/**
|
||||
* @link https://trpc.io/docs/ssr
|
||||
*/
|
||||
ssr: false,
|
||||
})(MyApp);
|
||||
@ -0,0 +1,31 @@
|
||||
import NextAuth, { type NextAuthOptions } from 'next-auth';
|
||||
import GitHubProvider from 'next-auth/providers/github';
|
||||
// Prisma adapter for NextAuth, optional and can be removed
|
||||
import { PrismaAdapter } from '@next-auth/prisma-adapter';
|
||||
|
||||
import { env } from '../../../env/server.mjs';
|
||||
import { prisma } from '../../../server/db/client';
|
||||
|
||||
export const authOptions: NextAuthOptions = {
|
||||
// Configure one or more authentication providers
|
||||
adapter: PrismaAdapter(prisma),
|
||||
|
||||
// Include user.id on session
|
||||
callbacks: {
|
||||
session({ session, user }) {
|
||||
if (session.user) {
|
||||
session.user.id = user.id;
|
||||
}
|
||||
return session;
|
||||
},
|
||||
},
|
||||
providers: [
|
||||
GitHubProvider({
|
||||
clientId: env.GITHUB_CLIENT_ID,
|
||||
clientSecret: env.GITHUB_CLIENT_SECRET,
|
||||
}),
|
||||
// ...add more providers here
|
||||
],
|
||||
};
|
||||
|
||||
export default NextAuth(authOptions);
|
||||
@ -0,0 +1,11 @@
|
||||
// Src/pages/api/examples.ts
|
||||
import type { NextApiRequest, NextApiResponse } from 'next';
|
||||
|
||||
import { prisma } from '../../server/db/client';
|
||||
|
||||
const examples = async (req: NextApiRequest, res: NextApiResponse) => {
|
||||
const examplesFromDb = await prisma.example.findMany();
|
||||
res.status(200).json(examplesFromDb);
|
||||
};
|
||||
|
||||
export default examples;
|
||||
@ -0,0 +1,23 @@
|
||||
// Example of a restricted endpoint that only authenticated users can access from https://next-auth.js.org/getting-started/example
|
||||
|
||||
import type { NextApiRequest, NextApiResponse } from 'next';
|
||||
|
||||
import { getServerAuthSession } from '../../server/common/get-server-auth-session';
|
||||
|
||||
const restricted = async (req: NextApiRequest, res: NextApiResponse) => {
|
||||
const session = await getServerAuthSession({ req, res });
|
||||
|
||||
if (session) {
|
||||
res.send({
|
||||
content:
|
||||
'This is protected content. You can access this content because you are signed in.',
|
||||
});
|
||||
} else {
|
||||
res.send({
|
||||
error:
|
||||
'You must be signed in to view the protected content on this page.',
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
export default restricted;
|
||||
@ -0,0 +1,18 @@
|
||||
// Src/pages/api/trpc/[trpc].ts
|
||||
import { createNextApiHandler } from '@trpc/server/adapters/next';
|
||||
|
||||
import { env } from '../../../env/server.mjs';
|
||||
import { appRouter } from '../../../server/router';
|
||||
import { createContext } from '../../../server/router/context';
|
||||
|
||||
// Export API handler
|
||||
export default createNextApiHandler({
|
||||
createContext,
|
||||
onError:
|
||||
env.NODE_ENV === 'development'
|
||||
? ({ path, error }) => {
|
||||
console.error(`❌ tRPC failed on ${path}: ${error}`);
|
||||
}
|
||||
: undefined,
|
||||
router: appRouter,
|
||||
});
|
||||
@ -0,0 +1,91 @@
|
||||
import type { NextPage } from 'next';
|
||||
import Head from 'next/head';
|
||||
import { CounterButton } from '@tih/ui';
|
||||
|
||||
import { trpc } from '~/utils/trpc';
|
||||
|
||||
const Home: NextPage = () => {
|
||||
const hello = trpc.useQuery(['example.hello', { text: 'from tRPC!' }]);
|
||||
const getAll = trpc.useQuery(['example.getAll']);
|
||||
|
||||
return (
|
||||
<>
|
||||
<Head>
|
||||
<title>Create T3 App</title>
|
||||
<meta content="Generated by create-t3-app" name="description" />
|
||||
<link href="/favicon.ico" rel="icon" />
|
||||
</Head>
|
||||
<main className="container mx-auto flex flex-col items-center justify-center min-h-screen p-4">
|
||||
<h1 className="text-5xl md:text-[5rem] leading-normal font-extrabold text-gray-700">
|
||||
Create <span className="text-purple-300">T3</span> App
|
||||
</h1>
|
||||
<CounterButton />
|
||||
<p className="text-2xl text-gray-700">This stack uses:</p>
|
||||
<div className="grid gap-3 pt-3 mt-3 text-center md:grid-cols-2 lg:w-2/3">
|
||||
<TechnologyCard
|
||||
description="The React framework for production"
|
||||
documentation="https://nextjs.org/"
|
||||
name="NextJS"
|
||||
/>
|
||||
<TechnologyCard
|
||||
description="Strongly typed programming language that builds on JavaScript, giving you better tooling at any scale"
|
||||
documentation="https://www.typescriptlang.org/"
|
||||
name="TypeScript"
|
||||
/>
|
||||
<TechnologyCard
|
||||
description="Rapidly build modern websites without ever leaving your HTML"
|
||||
documentation="https://tailwindcss.com/"
|
||||
name="TailwindCSS"
|
||||
/>
|
||||
<TechnologyCard
|
||||
description="End-to-end typesafe APIs made easy"
|
||||
documentation="https://trpc.io/"
|
||||
name="tRPC"
|
||||
/>
|
||||
<TechnologyCard
|
||||
description="Authentication for Next.js"
|
||||
documentation="https://next-auth.js.org/"
|
||||
name="Next-Auth"
|
||||
/>
|
||||
<TechnologyCard
|
||||
description="Build data-driven JavaScript & TypeScript apps in less time"
|
||||
documentation="https://www.prisma.io/docs/"
|
||||
name="Prisma"
|
||||
/>
|
||||
</div>
|
||||
<div className="pt-6 text-2xl text-blue-500 flex justify-center items-center w-full">
|
||||
{hello.data ? <p>{hello.data.greeting}</p> : <p>Loading..</p>}
|
||||
</div>
|
||||
<pre className="w-1/2">{JSON.stringify(getAll.data, null, 2)}</pre>
|
||||
</main>
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default Home;
|
||||
|
||||
type TechnologyCardProps = {
|
||||
description: string;
|
||||
documentation: string;
|
||||
name: string;
|
||||
};
|
||||
|
||||
function TechnologyCard({
|
||||
name,
|
||||
description,
|
||||
documentation,
|
||||
}: TechnologyCardProps) {
|
||||
return (
|
||||
<section className="flex flex-col justify-center p-6 duration-500 border-2 border-gray-500 rounded shadow-xl motion-safe:hover:scale-105">
|
||||
<h2 className="text-lg text-gray-700">{name}</h2>
|
||||
<p className="text-sm text-gray-600">{description}</p>
|
||||
<a
|
||||
className="mt-3 text-sm underline text-violet-500 decoration-dotted underline-offset-2"
|
||||
href={documentation}
|
||||
rel="noreferrer"
|
||||
target="_blank">
|
||||
Documentation
|
||||
</a>
|
||||
</section>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
// Wrapper for unstable_getServerSession https://next-auth.js.org/configuration/nextjs
|
||||
|
||||
import type { GetServerSidePropsContext } from 'next';
|
||||
// eslint-disable-next-line camelcase
|
||||
import { unstable_getServerSession } from 'next-auth';
|
||||
|
||||
import { authOptions as nextAuthOptions } from '~/pages/api/auth/[...nextauth]';
|
||||
|
||||
// Next API route example - /pages/api/restricted.ts
|
||||
export const getServerAuthSession = async (ctx: {
|
||||
req: GetServerSidePropsContext['req'];
|
||||
res: GetServerSidePropsContext['res'];
|
||||
}) => {
|
||||
return await unstable_getServerSession(ctx.req, ctx.res, nextAuthOptions);
|
||||
};
|
||||
@ -0,0 +1,20 @@
|
||||
// Src/server/db/client.ts
|
||||
import { PrismaClient } from '@prisma/client';
|
||||
|
||||
import { env } from '~/env/server.mjs';
|
||||
|
||||
declare global {
|
||||
// eslint-disable-next-line no-var, init-declarations
|
||||
var prisma: PrismaClient | undefined;
|
||||
}
|
||||
|
||||
export const prisma =
|
||||
global.prisma ||
|
||||
new PrismaClient({
|
||||
log:
|
||||
env.NODE_ENV === 'development' ? ['query', 'error', 'warn'] : ['error'],
|
||||
});
|
||||
|
||||
if (env.NODE_ENV !== 'production') {
|
||||
global.prisma = prisma;
|
||||
}
|
||||
@ -0,0 +1,61 @@
|
||||
// Src/server/router/context.ts
|
||||
import type { Session } from 'next-auth';
|
||||
import * as trpc from '@trpc/server';
|
||||
import type * as trpcNext from '@trpc/server/adapters/next';
|
||||
|
||||
import { getServerAuthSession } from '~/server/common/get-server-auth-session';
|
||||
import { prisma } from '~/server/db/client';
|
||||
|
||||
type CreateContextOptions = {
|
||||
session: Session | null;
|
||||
};
|
||||
|
||||
/** Use this helper for:
|
||||
* - testing, where we dont have to Mock Next.js' req/res
|
||||
* - trpc's `createSSGHelpers` where we don't have req/res
|
||||
**/
|
||||
export const createContextInner = async (opts: CreateContextOptions) => {
|
||||
return {
|
||||
prisma,
|
||||
session: opts.session,
|
||||
};
|
||||
};
|
||||
|
||||
/**
|
||||
* This is the actual context you'll use in your router
|
||||
* @link https://trpc.io/docs/context
|
||||
**/
|
||||
export const createContext = async (
|
||||
opts: trpcNext.CreateNextContextOptions,
|
||||
) => {
|
||||
const { req, res } = opts;
|
||||
|
||||
// Get the session from the server using the unstable_getServerSession wrapper function
|
||||
const session = await getServerAuthSession({ req, res });
|
||||
|
||||
return await createContextInner({
|
||||
session,
|
||||
});
|
||||
};
|
||||
|
||||
type Context = trpc.inferAsyncReturnType<typeof createContext>;
|
||||
|
||||
export const createRouter = () => trpc.router<Context>();
|
||||
|
||||
/**
|
||||
* Creates a tRPC router that asserts all queries and mutations are from an authorized user. Will throw an unauthorized error if a user is not signed in.
|
||||
**/
|
||||
export function createProtectedRouter() {
|
||||
return createRouter().middleware(({ ctx, next }) => {
|
||||
if (!ctx.session || !ctx.session.user) {
|
||||
throw new trpc.TRPCError({ code: 'UNAUTHORIZED' });
|
||||
}
|
||||
return next({
|
||||
ctx: {
|
||||
...ctx,
|
||||
// Infers that `session` is non-nullable to downstream resolvers
|
||||
session: { ...ctx.session, user: ctx.session.user },
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
@ -0,0 +1,23 @@
|
||||
import { z } from 'zod';
|
||||
|
||||
import { createRouter } from './context';
|
||||
|
||||
export const exampleRouter = createRouter()
|
||||
.query('hello', {
|
||||
input: z
|
||||
.object({
|
||||
text: z.string().nullish(),
|
||||
})
|
||||
.nullish(),
|
||||
resolve({ input }) {
|
||||
return {
|
||||
greeting: `Hello ${input?.text ?? 'world'}`,
|
||||
};
|
||||
},
|
||||
})
|
||||
.query('getAll', {
|
||||
async resolve({ ctx }) {
|
||||
const items = await ctx.prisma.example.findMany();
|
||||
return items;
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,14 @@
|
||||
// Src/server/router/index.ts
|
||||
import superjson from 'superjson';
|
||||
|
||||
import { createRouter } from './context';
|
||||
import { exampleRouter } from './example';
|
||||
import { protectedExampleRouter } from './protected-example-router';
|
||||
|
||||
export const appRouter = createRouter()
|
||||
.transformer(superjson)
|
||||
.merge('example.', exampleRouter)
|
||||
.merge('auth.', protectedExampleRouter);
|
||||
|
||||
// Export type definition of API
|
||||
export type AppRouter = typeof appRouter;
|
||||
@ -0,0 +1,14 @@
|
||||
import { createProtectedRouter } from './context';
|
||||
|
||||
// Example router with queries that can only be hit if the user requesting is signed in
|
||||
export const protectedExampleRouter = createProtectedRouter()
|
||||
.query('getSession', {
|
||||
resolve({ ctx }) {
|
||||
return ctx.session;
|
||||
},
|
||||
})
|
||||
.query('getSecretMessage', {
|
||||
resolve({ ctx: _ctx }) {
|
||||
return 'He who asks a question is a fool for five minutes; he who does not ask a question remains a fool forever.';
|
||||
},
|
||||
});
|
||||
@ -0,0 +1,3 @@
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
@ -0,0 +1,12 @@
|
||||
import type { DefaultSession } from 'next-auth';
|
||||
|
||||
declare module 'next-auth' {
|
||||
/**
|
||||
* Returned by `useSession`, `getSession` and received as a prop on the `SessionProvider` React Context
|
||||
*/
|
||||
type Session = {
|
||||
user?: DefaultSession['user'] & {
|
||||
id: string;
|
||||
};
|
||||
};
|
||||
}
|
||||
@ -0,0 +1,27 @@
|
||||
// Src/utils/trpc.ts
|
||||
import { createReactQueryHooks } from '@trpc/react';
|
||||
import type { inferProcedureInput, inferProcedureOutput } from '@trpc/server';
|
||||
|
||||
import type { AppRouter } from '~/server/router';
|
||||
|
||||
export const trpc = createReactQueryHooks<AppRouter>();
|
||||
|
||||
/**
|
||||
* These are helper types to infer the input and output of query resolvers
|
||||
* @example type HelloOutput = inferQueryOutput<'hello'>
|
||||
*/
|
||||
export type inferQueryOutput<
|
||||
TRouteKey extends keyof AppRouter['_def']['queries'],
|
||||
> = inferProcedureOutput<AppRouter['_def']['queries'][TRouteKey]>;
|
||||
|
||||
export type inferQueryInput<
|
||||
TRouteKey extends keyof AppRouter['_def']['queries'],
|
||||
> = inferProcedureInput<AppRouter['_def']['queries'][TRouteKey]>;
|
||||
|
||||
export type inferMutationOutput<
|
||||
TRouteKey extends keyof AppRouter['_def']['mutations'],
|
||||
> = inferProcedureOutput<AppRouter['_def']['mutations'][TRouteKey]>;
|
||||
|
||||
export type inferMutationInput<
|
||||
TRouteKey extends keyof AppRouter['_def']['mutations'],
|
||||
> = inferProcedureInput<AppRouter['_def']['mutations'][TRouteKey]>;
|
||||
@ -0,0 +1,8 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: ['./src/**/*.{js,ts,jsx,tsx}'],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
plugins: [],
|
||||
};
|
||||
@ -0,0 +1,13 @@
|
||||
{
|
||||
"exclude": ["node_modules"],
|
||||
"extends": "@tih/tsconfig/nextjs.json",
|
||||
"compilerOptions": {
|
||||
"rootDir": "src",
|
||||
"outDir": "dist",
|
||||
"baseUrl": "./src",
|
||||
"paths": {
|
||||
"~/*": ["*"]
|
||||
}
|
||||
},
|
||||
"include": ["src", "next-env.d.ts"]
|
||||
}
|
||||
@ -0,0 +1,4 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: ['tih'],
|
||||
};
|
||||
@ -0,0 +1,24 @@
|
||||
const path = require('path');
|
||||
|
||||
module.exports = {
|
||||
stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.tsx'],
|
||||
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
|
||||
framework: '@storybook/react',
|
||||
core: {
|
||||
builder: '@storybook/builder-vite',
|
||||
},
|
||||
async viteFinal(config, { configType }) {
|
||||
// customize the Vite config here
|
||||
return {
|
||||
...config,
|
||||
resolve: {
|
||||
alias: [
|
||||
{
|
||||
find: '@tih/ui',
|
||||
replacement: path.resolve(__dirname, '../../../packages/ui/'),
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "@tih/storybook",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"dev": "start-storybook -p 6001",
|
||||
"build": "build-storybook --docs",
|
||||
"preview-storybook": "serve storybook-static",
|
||||
"clean": "rm -rf .turbo && rm -rf node_modules"
|
||||
},
|
||||
"dependencies": {
|
||||
"@tih/ui": "*",
|
||||
"react": "^18.2.0",
|
||||
"react-dom": "^18.2.0"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@storybook/addon-actions": "^6.4.18",
|
||||
"@storybook/addon-docs": "^6.4.22",
|
||||
"@storybook/addon-essentials": "^6.4.18",
|
||||
"@storybook/addon-links": "^6.4.18",
|
||||
"@storybook/builder-vite": "^0.1.33",
|
||||
"@storybook/react": "^6.4.18",
|
||||
"@tih/tsconfig": "*",
|
||||
"@vitejs/plugin-react": "^1.3.2",
|
||||
"eslint-config-tih": "*",
|
||||
"serve": "^13.0.2",
|
||||
"typescript": "^4.8.3",
|
||||
"vite": "^2.9.9"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
import { CounterButton } from '@tih/ui';
|
||||
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs';
|
||||
|
||||
<Meta title="Components/Button" component={CounterButton} />
|
||||
|
||||
# Button
|
||||
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget consectetur tempor, nisl nunc egestas nisi, euismod aliquam nisl nunc euismod.
|
||||
|
||||
## Props
|
||||
|
||||
<ArgsTable of={CounterButton} />
|
||||
|
||||
## Examples
|
||||
|
||||
<Canvas>
|
||||
<Story name="Default">
|
||||
<CounterButton>Hello</CounterButton>
|
||||
</Story>
|
||||
</Canvas>
|
||||
File diff suppressed because it is too large
Load Diff
@ -1,12 +1,33 @@
|
||||
function matrixTranspose(matrix) {
|
||||
return matrix[0].map((col, i) => matrix.map(row => row[i]));
|
||||
return matrix[0].map((col, i) => matrix.map((row) => row[i]));
|
||||
}
|
||||
|
||||
const deepEqual = require('./deepEqual');
|
||||
|
||||
console.log(deepEqual(matrixTranspose([[1]]), [[1]]));
|
||||
console.log(deepEqual(matrixTranspose([[1, 2]]), [[1], [2]]));
|
||||
console.log(deepEqual(matrixTranspose([[1, 2], [1, 4]]), [[1, 1], [2, 4]]));
|
||||
console.log(
|
||||
deepEqual(matrixTranspose([[1, 2, 3], [4, 5, 6]]), [[1, 4], [2, 5], [3, 6]]),
|
||||
deepEqual(
|
||||
matrixTranspose([
|
||||
[1, 2],
|
||||
[1, 4],
|
||||
]),
|
||||
[
|
||||
[1, 1],
|
||||
[2, 4],
|
||||
],
|
||||
),
|
||||
);
|
||||
console.log(
|
||||
deepEqual(
|
||||
matrixTranspose([
|
||||
[1, 2, 3],
|
||||
[4, 5, 6],
|
||||
]),
|
||||
[
|
||||
[1, 4],
|
||||
[2, 5],
|
||||
[3, 6],
|
||||
],
|
||||
),
|
||||
);
|
||||
|
||||
@ -0,0 +1,20 @@
|
||||
{
|
||||
"private": true,
|
||||
"workspaces": [
|
||||
"packages/*",
|
||||
"apps/*"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "turbo run build",
|
||||
"clean": "turbo run clean",
|
||||
"dev": "turbo run dev --no-cache --parallel --continue",
|
||||
"format": "prettier --write \"**/*.{ts,tsx,md}\"",
|
||||
"lint": "turbo run lint",
|
||||
"test": "turbo run test",
|
||||
"tsc": "turbo run tsc"
|
||||
},
|
||||
"devDependencies": {
|
||||
"prettier": "^2.7.1",
|
||||
"turbo": "latest"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,147 @@
|
||||
/* eslint-disable sort-keys-fix/sort-keys-fix */
|
||||
|
||||
const OFF = 0;
|
||||
const WARN = 1;
|
||||
const ERROR = 2;
|
||||
|
||||
module.exports = {
|
||||
parser: '@typescript-eslint/parser',
|
||||
plugins: [
|
||||
'@typescript-eslint',
|
||||
'simple-import-sort',
|
||||
'sort-keys-fix',
|
||||
'typescript-sort-keys',
|
||||
],
|
||||
extends: [
|
||||
'next',
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'prettier',
|
||||
],
|
||||
settings: {
|
||||
react: {
|
||||
version: 'detect',
|
||||
},
|
||||
},
|
||||
rules: {
|
||||
camelcase: [ERROR, { properties: 'never', ignoreDestructuring: true }],
|
||||
'capitalized-comments': [
|
||||
ERROR,
|
||||
'always',
|
||||
{ ignoreConsecutiveComments: true },
|
||||
],
|
||||
'consistent-this': ERROR,
|
||||
curly: ERROR,
|
||||
'dot-notation': ERROR,
|
||||
eqeqeq: [ERROR, 'smart'],
|
||||
'func-name-matching': ERROR,
|
||||
'func-names': [ERROR, 'as-needed'],
|
||||
'func-style': [ERROR, 'declaration', { allowArrowFunctions: true }],
|
||||
'guard-for-in': ERROR,
|
||||
'init-declarations': ERROR,
|
||||
'no-console': [ERROR, { allow: ['warn', 'error', 'info'] }],
|
||||
'no-else-return': [ERROR, { allowElseIf: false }],
|
||||
'no-extra-boolean-cast': ERROR,
|
||||
'no-lonely-if': ERROR,
|
||||
'no-shadow': ERROR,
|
||||
'no-unused-vars': OFF, // Use @typescript-eslint/no-unused-vars instead.
|
||||
'object-shorthand': ERROR,
|
||||
'one-var': [ERROR, 'never'],
|
||||
'operator-assignment': ERROR,
|
||||
'prefer-arrow-callback': ERROR,
|
||||
'prefer-const': ERROR,
|
||||
'prefer-destructuring': [
|
||||
ERROR,
|
||||
{
|
||||
object: true,
|
||||
},
|
||||
],
|
||||
radix: ERROR,
|
||||
'spaced-comment': ERROR,
|
||||
|
||||
'react/button-has-type': ERROR,
|
||||
'react/display-name': OFF,
|
||||
'react/destructuring-assignment': [ERROR, 'always'],
|
||||
// 'react/hook-use-state': ERROR,
|
||||
'react/no-array-index-key': ERROR,
|
||||
'react/no-unescaped-entities': OFF,
|
||||
'react/void-dom-elements-no-children': ERROR,
|
||||
|
||||
'react/jsx-boolean-value': [ERROR, 'always'],
|
||||
'react/jsx-curly-brace-presence': [
|
||||
ERROR,
|
||||
{ props: 'never', children: 'never' },
|
||||
],
|
||||
'react/jsx-no-useless-fragment': ERROR,
|
||||
'react/jsx-sort-props': [
|
||||
ERROR,
|
||||
{
|
||||
callbacksLast: true,
|
||||
shorthandFirst: true,
|
||||
reservedFirst: true,
|
||||
},
|
||||
],
|
||||
|
||||
'@next/next/no-img-element': OFF,
|
||||
'@next/next/no-html-link-for-pages': OFF,
|
||||
|
||||
'@typescript-eslint/array-type': [
|
||||
ERROR,
|
||||
{ default: 'generic', readonly: 'generic' },
|
||||
],
|
||||
'@typescript-eslint/consistent-generic-constructors': [
|
||||
ERROR,
|
||||
'constructor',
|
||||
],
|
||||
'@typescript-eslint/consistent-indexed-object-style': [ERROR, 'record'],
|
||||
'@typescript-eslint/consistent-type-definitions': [ERROR, 'type'],
|
||||
'@typescript-eslint/consistent-type-imports': ERROR,
|
||||
'@typescript-eslint/no-duplicate-enum-values': ERROR,
|
||||
'@typescript-eslint/no-for-in-array': ERROR,
|
||||
'@typescript-eslint/no-non-null-assertion': OFF,
|
||||
'@typescript-eslint/no-unused-vars': [ERROR, { argsIgnorePattern: '^_' }],
|
||||
'@typescript-eslint/prefer-optional-chain': ERROR,
|
||||
'@typescript-eslint/require-array-sort-compare': ERROR,
|
||||
'@typescript-eslint/restrict-plus-operands': ERROR,
|
||||
'@typescript-eslint/sort-type-union-intersection-members': ERROR,
|
||||
|
||||
// Sorting
|
||||
'typescript-sort-keys/interface': ERROR,
|
||||
'typescript-sort-keys/string-enum': ERROR,
|
||||
'sort-keys-fix/sort-keys-fix': ERROR,
|
||||
'simple-import-sort/exports': WARN,
|
||||
'simple-import-sort/imports': [
|
||||
WARN,
|
||||
{
|
||||
groups: [
|
||||
// Ext library & side effect imports.
|
||||
['^~?\\w', '^\\u0000', '^@'],
|
||||
// Lib and hooks.
|
||||
['^~/lib', '^~/hooks'],
|
||||
// Static data.
|
||||
['^~/data'],
|
||||
// Components.
|
||||
['^~/components'],
|
||||
// Other imports.
|
||||
['^~/'],
|
||||
// Relative paths up until 3 level.
|
||||
[
|
||||
'^\\./?$',
|
||||
'^\\.(?!/?$)',
|
||||
'^\\.\\./?$',
|
||||
'^\\.\\.(?!/?$)',
|
||||
'^\\.\\./\\.\\./?$',
|
||||
'^\\.\\./\\.\\.(?!/?$)',
|
||||
'^\\.\\./\\.\\./\\.\\./?$',
|
||||
'^\\.\\./\\.\\./\\.\\.(?!/?$)',
|
||||
],
|
||||
['^~/types'],
|
||||
// {s}css files
|
||||
['^.+\\.s?css$'],
|
||||
// Others that don't fit in.
|
||||
['^'],
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "eslint-config-tih",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
"main": "index.js",
|
||||
"dependencies": {
|
||||
"@typescript-eslint/eslint-plugin": "^5.33.0",
|
||||
"@typescript-eslint/parser": "^5.33.0",
|
||||
"eslint-config-next": "^12.3.1",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-react": "7.28.0",
|
||||
"eslint-plugin-simple-import-sort": "^7.0.0",
|
||||
"eslint-plugin-sort-keys-fix": "^1.1.2",
|
||||
"eslint-plugin-typescript-sort-keys": "^2.1.0",
|
||||
"eslint-config-turbo": "latest"
|
||||
},
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,20 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/tsconfig",
|
||||
"display": "Default",
|
||||
"compilerOptions": {
|
||||
"composite": false,
|
||||
"declaration": true,
|
||||
"declarationMap": true,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"inlineSources": false,
|
||||
"isolatedModules": true,
|
||||
"moduleResolution": "node",
|
||||
"noUnusedLocals": false,
|
||||
"noUnusedParameters": false,
|
||||
"preserveWatchOutput": true,
|
||||
"skipLibCheck": true,
|
||||
"strict": true
|
||||
},
|
||||
"exclude": ["node_modules"]
|
||||
}
|
||||
@ -0,0 +1,21 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/tsconfig",
|
||||
"display": "Next.js",
|
||||
"extends": "./base.json",
|
||||
"compilerOptions": {
|
||||
"allowJs": true,
|
||||
"declaration": false,
|
||||
"declarationMap": false,
|
||||
"esModuleInterop": true,
|
||||
"forceConsistentCasingInFileNames": true,
|
||||
"incremental": true,
|
||||
"jsx": "preserve",
|
||||
"lib": ["dom", "dom.iterable", "esnext"],
|
||||
"module": "esnext",
|
||||
"noEmit": true,
|
||||
"resolveJsonModule": true,
|
||||
"target": "es5",
|
||||
"strict": true
|
||||
},
|
||||
"include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "**/*.cjs", "**/*.mjs"]
|
||||
}
|
||||
@ -0,0 +1,9 @@
|
||||
{
|
||||
"name": "@tih/tsconfig",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,11 @@
|
||||
{
|
||||
"$schema": "https://json.schemastore.org/tsconfig",
|
||||
"display": "React Library",
|
||||
"extends": "./base.json",
|
||||
"compilerOptions": {
|
||||
"jsx": "react-jsx",
|
||||
"lib": ["ES2015"],
|
||||
"module": "ESNext",
|
||||
"target": "es6"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,8 @@
|
||||
module.exports = {
|
||||
root: true,
|
||||
extends: ['tih'],
|
||||
parserOptions: {
|
||||
tsconfigRootDir: __dirname,
|
||||
project: ['./tsconfig.json'],
|
||||
},
|
||||
};
|
||||
@ -0,0 +1,30 @@
|
||||
{
|
||||
"name": "@tih/ui",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"license": "MIT",
|
||||
"sideEffects": false,
|
||||
"main": "./dist/index.js",
|
||||
"module": "./dist/index.mjs",
|
||||
"types": "./dist/index.d.ts",
|
||||
"files": [
|
||||
"dist/**"
|
||||
],
|
||||
"scripts": {
|
||||
"build": "tsup src/index.tsx --format esm,cjs --dts --external react",
|
||||
"clean": "rm -rf dist",
|
||||
"tsc": "tsc",
|
||||
"dev": "tsup src/index.tsx --format esm,cjs --watch --dts --external react",
|
||||
"lint": "eslint src/**/*.ts* --fix"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@tih/tsconfig": "*",
|
||||
"@types/react": "^18.0.21",
|
||||
"@types/react-dom": "^18.0.6",
|
||||
"eslint": "^8.24.0",
|
||||
"eslint-config-tih": "*",
|
||||
"react": "^18.2.0",
|
||||
"tsup": "^6.2.3",
|
||||
"typescript": "^4.8.3"
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,42 @@
|
||||
import * as React from 'react';
|
||||
|
||||
export function CounterButton() {
|
||||
const [count, setCount] = React.useState(0);
|
||||
return (
|
||||
<div
|
||||
style={{
|
||||
background: `rgba(0,0,0,0.05)`,
|
||||
borderRadius: `8px`,
|
||||
fontWeight: 500,
|
||||
padding: '1.5rem',
|
||||
}}>
|
||||
<p style={{ margin: '0 0 1.5rem 0' }}>
|
||||
This component is from{' '}
|
||||
<code
|
||||
style={{
|
||||
background: `rgba(0,0,0,0.1)`,
|
||||
borderRadius: '0.25rem',
|
||||
padding: '0.2rem 0.3rem',
|
||||
}}>
|
||||
@tih/ui
|
||||
</code>
|
||||
</p>
|
||||
<div>
|
||||
<button
|
||||
style={{
|
||||
background: 'black',
|
||||
border: 'none',
|
||||
borderRadius: '0.25rem',
|
||||
color: 'white',
|
||||
cursor: 'pointer',
|
||||
display: 'inline-block',
|
||||
padding: '0.5rem 1rem',
|
||||
}}
|
||||
type="button"
|
||||
onClick={() => setCount((c) => c + 1)}>
|
||||
Count: {count}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,15 @@
|
||||
import * as React from 'react';
|
||||
export function NewTabLink({
|
||||
children,
|
||||
href,
|
||||
...other
|
||||
}: {
|
||||
children: React.ReactNode;
|
||||
href: string;
|
||||
}) {
|
||||
return (
|
||||
<a href={href} rel="noreferrer" target="_blank" {...other}>
|
||||
{children}
|
||||
</a>
|
||||
);
|
||||
}
|
||||
@ -0,0 +1,2 @@
|
||||
export { CounterButton } from './CounterButton';
|
||||
export { NewTabLink } from './NewTabLink';
|
||||
@ -0,0 +1,8 @@
|
||||
{
|
||||
"compilerOptions": {
|
||||
"lib": ["dom", "ES2015"]
|
||||
},
|
||||
"extends": "@tih/tsconfig/react-library.json",
|
||||
"include": ["."],
|
||||
"exclude": ["dist", "build", "node_modules"]
|
||||
}
|
||||
@ -0,0 +1,32 @@
|
||||
{
|
||||
"$schema": "https://turborepo.org/schema.json",
|
||||
"pipeline": {
|
||||
"build": {
|
||||
"outputs": [
|
||||
"dist/**",
|
||||
".next/**",
|
||||
"build/**",
|
||||
"api/**",
|
||||
"public/build/**"
|
||||
],
|
||||
"dependsOn": ["^build"]
|
||||
},
|
||||
"test": {
|
||||
"outputs": ["coverage/**"],
|
||||
"dependsOn": []
|
||||
},
|
||||
"lint": {
|
||||
"dependsOn": ["^build"],
|
||||
"outputs": []
|
||||
},
|
||||
"tsc": {
|
||||
"cache": true
|
||||
},
|
||||
"dev": {
|
||||
"cache": false
|
||||
},
|
||||
"clean": {
|
||||
"cache": false
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue