25 |
26 | TypedFetch Examples Vanilla
27 |
28 |
29 |
30 |
31 | TypedFetch Examples with React Query
32 |
33 |
34 |
7 |
11 | )
12 | }
13 |
14 | export default Loading
15 |
--------------------------------------------------------------------------------
/src/model/api-models/list_items/List_items_api_get.ts:
--------------------------------------------------------------------------------
1 | import { List_ItemsQuery } from '../../../graphql/generated'
2 | import { ApiConfig } from '../../../utils/typedFetch/ApiConfig'
3 |
4 | export interface List_Items_api_get {
5 | input: {
6 | limit: string
7 | current_page: string
8 | }
9 | output: List_ItemsQuery
10 | }
11 |
12 | export const list_items_api_get_Config: ApiConfig = {
13 | url: '/api/list_items/list_items_api_get',
14 | method: 'get',
15 | responseType: 'json',
16 | }
17 |
--------------------------------------------------------------------------------
/src/model/api-models/users/Delete_users_by_pk_api_delete.ts:
--------------------------------------------------------------------------------
1 | import { Delete_Users_By_PkMutation } from '../../../graphql/generated'
2 | import { ApiConfig } from '../../../utils/typedFetch/ApiConfig'
3 |
4 | export interface Delete_users_by_pk_api_delete {
5 | input: { id: string }
6 | output: Delete_Users_By_PkMutation
7 | }
8 |
9 | export const delete_users_by_pk_api_delete_Config: ApiConfig = {
10 | url: '/api/users/delete_users_by_pk_api_delete',
11 | method: 'delete',
12 | responseType: 'json',
13 | }
14 |
--------------------------------------------------------------------------------
/tailwind.config.js:
--------------------------------------------------------------------------------
1 | module.exports = {
2 | purge: {
3 | enabled: process.env.NODE_ENV === 'production',
4 | content: ['./src/**/*.html', './src/**/*.tsx', './src/**/*.jsx'],
5 | },
6 | darkMode: false, // or 'media' or 'class'
7 | mode: 'jit',
8 | theme: {
9 | extend: {},
10 | borderWidth: {
11 | 20: '20px',
12 | },
13 | },
14 | variants: {
15 | extend: {},
16 | },
17 | plugins: [require('@tailwindcss/typography'), require('daisyui'), require('@tailwindcss/forms')],
18 | }
19 |
--------------------------------------------------------------------------------
/src/model/api-models/list_items/List_items_by_pk_api_get.ts:
--------------------------------------------------------------------------------
1 | import { List_Items_By_PkQuery } from '../../../graphql/generated'
2 | import { ApiConfig } from '../../../utils/typedFetch/ApiConfig'
3 |
4 | export interface List_items_by_pk_api_get {
5 | input: {
6 | id: string | string[]
7 | }
8 | output: List_Items_By_PkQuery
9 | }
10 |
11 | export const list_items_by_pk_api_get_Config: ApiConfig = {
12 | url: '/api/list_items/list_items_by_pk_api_get',
13 | method: 'get',
14 | responseType: 'json',
15 | }
16 |
--------------------------------------------------------------------------------
/hasura/metadata/tables.yaml:
--------------------------------------------------------------------------------
1 | - table:
2 | schema: public
3 | name: list_items
4 | - table:
5 | schema: public
6 | name: roles
7 | is_enum: true
8 | array_relationships:
9 | - name: users
10 | using:
11 | foreign_key_constraint_on:
12 | column: role
13 | table:
14 | schema: public
15 | name: users
16 | - table:
17 | schema: public
18 | name: users
19 | object_relationships:
20 | - name: roleByRole
21 | using:
22 | foreign_key_constraint_on: role
23 |
--------------------------------------------------------------------------------
/src/model/api-models/code-generator/Generate_crud_api_post.ts:
--------------------------------------------------------------------------------
1 | import { ApiConfig } from '../../../utils/typedFetch/ApiConfig'
2 |
3 | export interface Generate_crud_api_post {
4 | input: {
5 | table_name: string
6 | table_id: string
7 | }
8 | output: {
9 | saved: boolean
10 | vars: {
11 | [key: string]: string
12 | }
13 | }
14 | }
15 |
16 | export const generate_crud_api_post_Config: ApiConfig = {
17 | url: '/api/code-generator/generate_crud_api_post',
18 | method: 'post',
19 | responseType: 'json',
20 | }
21 |
--------------------------------------------------------------------------------
/src/model/api-models/list_items/Delete_list_items_by_pk_api_delete.ts:
--------------------------------------------------------------------------------
1 | import { Delete_List_Items_By_PkMutation } from '../../../graphql/generated'
2 | import { ApiConfig } from '../../../utils/typedFetch/ApiConfig'
3 |
4 | export interface Delete_list_items_by_pk_api_delete {
5 | input: { id: string }
6 | output: Delete_List_Items_By_PkMutation
7 | }
8 |
9 | export const delete_list_items_by_pk_api_delete_Config: ApiConfig = {
10 | url: '/api/list_items/delete_list_items_by_pk_api_delete',
11 | method: 'delete',
12 | responseType: 'json',
13 | }
14 |
--------------------------------------------------------------------------------
/src/model/api-models/typed-fetch-examples/Fetch_tester_api_get.ts:
--------------------------------------------------------------------------------
1 | import { ApiConfig } from '../../../utils/typedFetch/ApiConfig'
2 |
3 | export interface Fetch_tester_api_get {
4 | input: {
5 | some_string: string
6 | divide_by: string
7 | force_error: string
8 | }
9 | output: {
10 | message: string
11 | division_result: number
12 | }
13 | }
14 |
15 | export const fetch_tester_api_get_Config: ApiConfig = {
16 | url: '/api/typed-fetch-examples/fetch_tester_api_get',
17 | method: 'get',
18 | responseType: 'json',
19 | }
20 |
--------------------------------------------------------------------------------
/src/model/api-models/typed-fetch-examples/Fetch_tester_api_post.ts:
--------------------------------------------------------------------------------
1 | import { ApiConfig } from '../../../utils/typedFetch/ApiConfig'
2 |
3 | export interface Fetch_tester_api_post {
4 | input: {
5 | some_string: string
6 | divide_by: number
7 | force_error: boolean
8 | }
9 | output: {
10 | message: string
11 | division_result: number
12 | }
13 | }
14 |
15 | export const fetch_tester_api_post_Config: ApiConfig = {
16 | url: '/api/typed-fetch-examples/fetch_tester_api_post',
17 | method: 'post',
18 | responseType: 'json',
19 | }
20 |
--------------------------------------------------------------------------------
/src/model/api-models/list_items/Insert_list_items_one_api_post.ts:
--------------------------------------------------------------------------------
1 | import { Insert_List_Items_OneMutation, List_Items_Insert_Input } from '../../../graphql/generated'
2 | import { ApiConfig } from '../../../utils/typedFetch/ApiConfig'
3 |
4 | export interface Insert_list_items_one_api_post {
5 | input: List_Items_Insert_Input
6 | output: Insert_List_Items_OneMutation
7 | }
8 |
9 | export const insert_list_items_one_api_post_Config: ApiConfig = {
10 | url: '/api/list_items/insert_list_items_one_api_post',
11 | method: 'post',
12 | responseType: 'json',
13 | }
14 |
--------------------------------------------------------------------------------
/src/components/Layout/Layout.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import renderer from 'react-test-renderer'
3 | import { Layout } from './Layout'
4 | import { UserProvider } from '@auth0/nextjs-auth0'
5 |
6 | test('renders correctly', () => {
7 | jest.mock('@auth0/nextjs-auth0', () => ({
8 | useUser: () => ({
9 | user: {},
10 | }),
11 | }))
12 | const tree = renderer
13 | .create(
14 |
8 |
10 |
15 | {content.map((error, index) => {
16 | return (
17 |
24 | )
25 | }
26 |
--------------------------------------------------------------------------------
/sentry.client.config.js:
--------------------------------------------------------------------------------
1 | // This file configures the initialization of Sentry on the browser.
2 | // The config you add here will be used whenever a page is visited.
3 | // https://docs.sentry.io/platforms/javascript/guides/nextjs/
4 |
5 | import * as Sentry from '@sentry/nextjs'
6 | import { Integrations } from '@sentry/tracing'
7 |
8 | const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN
9 |
10 | Sentry.init({
11 | dsn: SENTRY_DSN,
12 | // Note: if you want to override the automatic release value, do not set a
13 | // `release` value here - use the environment variable `SENTRY_RELEASE`, so
14 | // that it will also get attached to your source maps
15 | integrations: [new Integrations.BrowserTracing()],
16 | tracesSampleRate: 1.0,
17 | })
18 |
--------------------------------------------------------------------------------
/src/components/Users_Form/Users_Form.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Story, Meta } from '@storybook/react/types-6-0'
3 | import { Users_Form, Users_FormProps } from './Users_Form'
4 |
5 | export default {
6 | title: 'Component/Pages/Users_Form',
7 | component: Users_Form,
8 | } as Meta
9 |
10 | const Template: Story{`${error?.path} : ${error?.message}`}
21 | ) 22 | })} 23 |
13 |
26 |
27 | )
28 | }
29 |
--------------------------------------------------------------------------------
/.env.local.example:
--------------------------------------------------------------------------------
1 | # Site infos
2 | NEXT_PUBLIC_GA_ID="xxx"
3 | NEXT_PUBLIC_SITE_NAME="xxx"
4 | NEXT_PUBLIC_SITE_URL="xxx"
5 | NEXT_PUBLIC_SITE_IMAGE="xxx"
6 | NEXT_PUBLIC_SITE_DESCRIPTION="xxx"
7 | NEXT_PUBLIC_SITE_KEYWORDS="xxx"
8 |
9 | # Auth0
10 | AUTH0_SECRET="xxx"
11 | AUTH0_BASE_URL="xxx"
12 | AUTH0_ISSUER_BASE_URL="xxx"
13 | AUTH0_CLIENT_ID="xxx"
14 | AUTH0_CLIENT_SECRET="xxx"
15 | AUTH0_SCOPE="xxx"
16 | AUTH0_AUDIENCE="xxx"
17 |
18 | # Sentry
19 | NEXT_PUBLIC_SENTRY_DSN="xxx"
20 | SENTRY_DSN="xxx"
21 | SENTRY_SERVER_INIT_PATH="xxx"
22 | SENTRY_AUTH_TOKEN="xxx"
23 | SENTRY_URL="xxx"
24 | SENTRY_ORG="xxx"
25 | SENTRY_PROJECT="xxx"
26 |
27 | # Hasura
28 | HASURA_ADMIN_SECRET="xxxx"
29 | HASURA_PROD_SERVER_URL="xxxx"
30 | HASURA_PROD_ADMIN_SECRET="xxxx"
31 | NEXT_PUBLIC_HASURA_GRAPHQL_ENDPOINT="xxxx"
32 | NEXT_PUBLIC_HASURA_GRAPHQL_ENDPOINT_SUBSCRIPTION="xxxx"
--------------------------------------------------------------------------------
/.github/workflows/ci.yml:
--------------------------------------------------------------------------------
1 | name: ci
2 | on: [pull_request]
3 |
4 | jobs:
5 | build:
6 | runs-on: ubuntu-latest
7 | steps:
8 | - name: Checkout Repository
9 | uses: actions/checkout@v2
10 |
11 | - name: Setup Node
12 | uses: actions/setup-node@v2
13 | with:
14 | node-version: 14.x
15 |
16 | - uses: actions/cache@v2
17 | id: yarn-cache
18 | with:
19 | path: |
20 | ~/cache
21 | !~/cache/exclude
22 | **/node_modules
23 | key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
24 | restore-keys: |
25 | ${{ runner.os }}-yarn-
26 | - name: Install dependencies
27 | run: yarn install
28 |
29 | - name: Test
30 | run: yarn test:ci
31 |
32 | - name: Build
33 | run: yarn build
34 |
--------------------------------------------------------------------------------
/src/utils/GqlSdkHelper.ts:
--------------------------------------------------------------------------------
1 | import { GraphQLClient } from 'graphql-request'
2 | import { getSdk } from '../graphql/generated'
3 |
4 | if (typeof window !== 'undefined') {
5 | // prevent this to be called from client browser
6 | throw new Error('WARNING: Only server calls are allowed!')
7 | }
8 |
9 | export default class GqlSdkHelper {
10 | private client: GraphQLClient
11 |
12 | private sdk: ReturnType
19 | {JSON.stringify(content, null, 2)
20 | .split('\n')
21 | .map((line, i) => (
22 |
31 | )
32 | }
33 |
--------------------------------------------------------------------------------
/src/components/Loading/Loading.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Meta } from '@storybook/react/types-6-0'
3 | import Loading from './Loading'
4 |
5 | export default {
6 | title: 'Component/Loading',
7 | component: Loading,
8 | decorators: [
9 | (Story) => (
10 | <>
11 |
27 | {line}
28 |
29 | ))}
30 |
19 |
21 | )
22 |
23 | export const Loading_Small = Template.bind({})
24 | Loading_Small.args = {
25 | title: 'Loading',
26 | className: 'w-3 h-3',
27 | }
28 |
29 | export const LoadingDefault = Template.bind({})
30 | LoadingDefault.args = {
31 | title: 'Loading',
32 | className: 'w-5 h-5',
33 | }
34 |
35 | export const Loading_Large = Template.bind({})
36 | Loading_Large.args = {
37 | title: 'Loading',
38 | className: 'w-10 h-10',
39 | }
40 |
--------------------------------------------------------------------------------
/hasura/migrations/1625684913027_create_table_public_list_items/up.sql:
--------------------------------------------------------------------------------
1 | CREATE TABLE "public"."list_items" ("id" uuid NOT NULL DEFAULT gen_random_uuid(), "body" text NOT NULL, "updated_at" timestamptz NOT NULL DEFAULT now(), "created_at" timestamptz NOT NULL DEFAULT now(), "title" text, "url" text, "imageUrl" text, "publishedAt" timestamptz, PRIMARY KEY ("id") );
2 | CREATE OR REPLACE FUNCTION "public"."set_current_timestamp_updated_at"()
3 | RETURNS TRIGGER AS $$
4 | DECLARE
5 | _new record;
6 | BEGIN
7 | _new := NEW;
8 | _new."updated_at" = NOW();
9 | RETURN _new;
10 | END;
11 | $$ LANGUAGE plpgsql;
12 | CREATE TRIGGER "set_public_list_items_updated_at"
13 | BEFORE UPDATE ON "public"."list_items"
14 | FOR EACH ROW
15 | EXECUTE PROCEDURE "public"."set_current_timestamp_updated_at"();
16 | COMMENT ON TRIGGER "set_public_list_items_updated_at" ON "public"."list_items"
17 | IS 'trigger to set value of column "updated_at" to current timestamp on row update';
18 |
--------------------------------------------------------------------------------
/src/utils/docs.ts:
--------------------------------------------------------------------------------
1 | import fs from 'fs'
2 | import { join } from 'path'
3 | import matter from 'gray-matter'
4 |
5 | const docsDirectory = join(process.cwd(), 'src', 'docs')
6 |
7 | type MetaData = {
8 | title: string
9 | description: string
10 | image_url?: string
11 | date?: Date | string
12 | }
13 |
14 | export type MetaTypes = {
15 | slug: string
16 | meta: MetaData
17 | content: string
18 | }
19 |
20 | export const getDocBySlug = (slug: string): MetaTypes => {
21 | const realSlug = slug.replace(/\.md$/, '')
22 | const fullPath = join(docsDirectory, `${realSlug}.md`)
23 |
24 | const fileContents = fs.readFileSync(fullPath, 'utf8')
25 |
26 | const { data, content } = matter(fileContents)
27 |
28 | return { slug: realSlug, meta: data as MetaData, content }
29 | }
30 |
31 | export const getAllDocs = () => {
32 | const slugs = fs.readdirSync(docsDirectory)
33 | const docs = slugs.map((slug) => getDocBySlug(slug))
34 |
35 | return docs
36 | }
37 |
--------------------------------------------------------------------------------
/src/components/showErrorAlert.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import Swal from 'sweetalert2'
3 | import withReactContent from 'sweetalert2-react-content'
4 |
5 | export const showErrorAlert = ({
6 | title,
7 | text,
8 | error,
9 | }: {
10 | title?: string
11 | text?: string
12 | footerText?: string
13 | error?: any
14 | }) => {
15 | const Alerta = withReactContent(Swal)
16 |
17 | let textFinal = text
18 | if (!textFinal) {
19 | textFinal = error?.message
20 | textFinal = textFinal?.replace(/\\n/g, '\n')
21 | }
22 |
23 | return Alerta.fire({
24 | title: {title || 'erro'}
, 25 | html: ( 26 |
30 | {text || (error?.message && textFinal)}
31 |
32 | ),
33 | showCloseButton: true,
34 | })
35 | }
36 |
--------------------------------------------------------------------------------
/src/components/List_items_Form/List_items_Form.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Story, Meta } from '@storybook/react/types-6-0'
3 | import { List_items_Form, List_items_FormProps } from './List_items_Form'
4 |
5 | export default {
6 | title: 'Component/Pages/List_items_Form',
7 | component: List_items_Form,
8 | } as Meta
9 |
10 | const Template: Story
14 |
34 | )
35 | }
36 |
--------------------------------------------------------------------------------
/src/pages/_app.tsx:
--------------------------------------------------------------------------------
1 | import '../styles/tailwind.css'
2 | import '../styles/sweetalert.css'
3 | import { ThemeProvider } from 'next-themes'
4 | import { StrictMode } from 'react'
5 | import { QueryClient, QueryClientProvider } from 'react-query'
6 | import { UserProvider } from '@auth0/nextjs-auth0'
7 | import { ReactQueryDevtools } from 'react-query/devtools'
8 | import type { AppProps } from 'next/app'
9 |
10 | // dayjs
11 | import dayjs from 'dayjs'
12 | import 'dayjs/locale/pt-br'
13 | import utc from 'dayjs/plugin/utc'
14 | import timezone from 'dayjs/plugin/timezone'
15 |
16 | dayjs.extend(utc)
17 | dayjs.extend(timezone)
18 | dayjs.tz.setDefault('America/Sao_Paulo')
19 |
20 | function MyApp({ Component, pageProps }: AppProps) {
21 | const queryClient = new QueryClient()
22 | return (
23 |
15 |
32 | {children}
33 |
16 |
30 |
31 |
18 |
36 | )
37 | }
38 |
--------------------------------------------------------------------------------
/hasura/docker-compose.yml:
--------------------------------------------------------------------------------
1 | version: '3.6'
2 | services:
3 | postgres:
4 | image: postgres:12
5 | restart: always
6 | volumes:
7 | - db_data_hasura_zzz:/var/lib/postgresql/data
8 | ports:
9 | - '5432:5432'
10 | environment:
11 | POSTGRES_PASSWORD: postgres_password_zzz
12 | PGDATA: /var/lib/postgresql/data/pgdataInternal
13 |
14 | graphql-engine:
15 | image: hasura/graphql-engine:v2.0.1
16 | ports:
17 | - '8080:8080'
18 | depends_on:
19 | - 'postgres'
20 | restart: always
21 | environment:
22 | CONSOLE_MODE: cli
23 | HASURA_GRAPHQL_DATABASE_URL: postgres://postgres:postgres_password_zzz@postgres:5432/postgres
24 | HASURA_GRAPHQL_ENABLE_CONSOLE: 'false' # console will run with `hasura console`
25 | ## enable debugging mode. It is recommended to disable this in production
26 | HASURA_GRAPHQL_DEV_MODE: 'true'
27 | HASURA_GRAPHQL_LOG_LEVEL: error
28 | HASURA_GRAPHQL_ENABLED_LOG_TYPES: startup, http-log, webhook-log, websocket-log, query-log
29 | HASURA_GRAPHQL_ADMIN_SECRET: 'admin_secret_local_zzz'
30 | # zzz - https://hasura.io/jwt-config/
31 | # HASURA_GRAPHQL_JWT_SECRET: '{"type": "RS512", "key": "zzz"}'
32 | HASURA_GRAPHQL_UNAUTHORIZED_ROLE: 'anonymous'
33 | volumes:
34 | db_data_hasura_zzz:
35 |
--------------------------------------------------------------------------------
/src/components/forms/FormTextbox/FormTextarea.tsx:
--------------------------------------------------------------------------------
1 | import classnames from 'classnames'
2 | import React from 'react'
3 |
4 | export interface FormTextareaProps {
5 | label?: string
6 | name: string
7 | register: any
8 | defaultValue: any
9 | validationErrors: any
10 | className?: string
11 | }
12 |
13 | export const FormTextarea: React.FC
19 |
35 |
23 |
42 | )
43 | }
44 |
--------------------------------------------------------------------------------
/src/components/CodeBlock/CodeBlock.test.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import * as TestingLib from '@testing-library/react'
3 | import '@testing-library/jest-dom/extend-expect'
4 | import { CodeBlock } from './CodeBlock'
5 |
6 | describe('Code_block Component', () => {
7 | it('should render a component', async () => {
8 | const render = TestingLib.render(
9 |
24 |
27 |
35 | {validationErrors?.[name] && (
36 |
39 | )}
40 |
41 |
9 | 
10 |
13 |
22 | 23 | ## Boilerplate with nextjs 24 | 25 | nextjs-opinionatedd uses a stack full `TS` on the frontend 26 | 27 | ## Starting in your PC 28 | 29 | Check our other doc: [Getting-Started](https://nextjs-opinionated.vercel.app/docs/getting-started) 30 | 31 | ## Edit this or another section of our documents 32 | 33 | Just edit our `.md` in our [repository](https://github.com/nextjs-opinionated/nextjs-opinionated-hasura/src/docs) and it will be live in a moment =) 34 | -------------------------------------------------------------------------------- /src/components/Pagination/Pagination.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Story, Meta } from '@storybook/react/types-6-0' 3 | import { Pagination, PaginationProps } from './Pagination' 4 | 5 | export default { 6 | title: 'Component/Pagination', 7 | component: Pagination, 8 | argTypes: { 9 | onClick: { action: 'clicked' }, 10 | register: { 11 | table: { 12 | disable: true, 13 | }, 14 | }, 15 | validationErrors: { 16 | table: { 17 | disable: true, 18 | }, 19 | }, 20 | }, 21 | } as Meta 22 | 23 | const Template: Story = (args) => = (args) => TypedFetch Examples : {process.env.NEXT_PUBLIC_SITE_NAME}
12 |
13 |
14 |
17 |
20 | }
21 | menuItems={Object.values(LinksList)}
22 | >
23 | nextjs-opinionated
14 |
15 | 
16 | 
17 | 
18 |
19 |
20 |
21 |
16 |
17 |
18 | 22 | 23 | ## Boilerplate with nextjs 24 | 25 | nextjs-opinionatedd uses a stack full `TS` on the frontend 26 | 27 | ## Starting in your PC 28 | 29 | Check our other doc: [Getting-Started](https://nextjs-opinionated.vercel.app/docs/getting-started) 30 | 31 | ## Edit this or another section of our documents 32 | 33 | Just edit our `.md` in our [repository](https://github.com/nextjs-opinionated/nextjs-opinionated-hasura/src/docs) and it will be live in a moment =) 34 | -------------------------------------------------------------------------------- /src/components/Pagination/Pagination.stories.tsx: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import { Story, Meta } from '@storybook/react/types-6-0' 3 | import { Pagination, PaginationProps } from './Pagination' 4 | 5 | export default { 6 | title: 'Component/Pagination', 7 | component: Pagination, 8 | argTypes: { 9 | onClick: { action: 'clicked' }, 10 | register: { 11 | table: { 12 | disable: true, 13 | }, 14 | }, 15 | validationErrors: { 16 | table: { 17 | disable: true, 18 | }, 19 | }, 20 | }, 21 | } as Meta 22 | 23 | const Template: Story
TypedFetch Examples
18 | {process.env.NEXT_PUBLIC_SITE_NAME}
19 |
7 |
34 | `;
35 |
--------------------------------------------------------------------------------
/next.config.js:
--------------------------------------------------------------------------------
1 | const { withSentryConfig } = require('@sentry/nextjs')
2 |
3 | // This file sets a custom webpack configuration to use your Next.js app
4 | // with Sentry.
5 | // https://nextjs.org/docs/api-reference/next.config.js/introduction
6 | // https://docs.sentry.io/platforms/javascript/guides/nextjs/
7 |
8 | const nextConfig = {
9 | // Your existing module.exports
10 | poweredByHeader: false,
11 | images: {
12 | domains: ['unsplash.com', 'assets.vercel.com'],
13 | },
14 | }
15 | const SentryWebpackPluginOptions = {
16 | silent: true,
17 | // Additional config options for the Sentry Webpack plugin. Keep in mind that
18 | // the following options are set automatically, and overriding them is not
19 | // recommended:
20 | // release, url, org, project, authToken, configFile, stripPrefix,
21 | // urlPrefix, include, ignore
22 | // For all available options, see:
23 | // https://github.com/getsentry/sentry-webpack-plugin#options.
24 | }
25 |
26 | const hasSentryEnv = !!(process.env.SENTRY_ORG || process.env.SENTRY_URL)
27 |
28 | const shouldInitSentry = process.env.NODE_ENV !== 'development' && hasSentryEnv
29 |
30 | // Make sure adding Sentry options is the last code to run before exporting, to
31 | // ensure that your source maps include changes from all other Webpack plugins
32 | module.exports = shouldInitSentry
33 | ? withSentryConfig(nextConfig, SentryWebpackPluginOptions)
34 | : nextConfig
35 |
--------------------------------------------------------------------------------
/src/pages/code-generator/index.tsx:
--------------------------------------------------------------------------------
1 | import Head from 'next/head'
2 | import * as React from 'react'
3 | import Link from 'next/link'
4 | import { Layout } from '../../components/Layout/Layout'
5 | import { LinksList } from '../../model/site/LinksList'
6 |
7 | const Page: React.FunctionComponent = () => {
8 | return (
9 | <>
10 |
11 |
10 |
32 |
33 | Code Generators
18 | {process.env.NEXT_PUBLIC_SITE_NAME}
19 |
20 | }
21 | menuItems={Object.values(LinksList)}
22 | >
23 | Code generation only works on localhost
25 |26 | 34 |
24 |
43 | )
44 | }
45 |
--------------------------------------------------------------------------------
/src/pages/api/list_items/delete_list_items_by_pk_api_delete.ts:
--------------------------------------------------------------------------------
1 | import { NextApiRequest, NextApiResponse } from 'next'
2 | import { HttpStatusCode } from '../../../utils/typedFetch/HttpStatusCode'
3 | import {
4 | Delete_list_items_by_pk_api_delete,
5 | delete_list_items_by_pk_api_delete_Config,
6 | } from '../../../model/api-models/list_items/Delete_list_items_by_pk_api_delete'
7 | import { withSentry } from '@sentry/nextjs'
8 | import { logMiddleware } from '../../../utils/middleware/logMiddleware'
9 | import GqlSdkHelper from '../../../utils/GqlSdkHelper'
10 |
11 | export default withSentry(
12 | logMiddleware(async function delete_list_items_by_pk_api_delete(
13 | req: NextApiRequest,
14 | res: NextApiResponse
15 | ) {
16 | // check method
17 | if (req.method !== delete_list_items_by_pk_api_delete_Config.method.toUpperCase()) {
18 | res.setHeader('Allow', [delete_list_items_by_pk_api_delete_Config.method.toUpperCase()])
19 | res.status(HttpStatusCode.METHOD_NOT_ALLOWED_405).end(`Method ${req.method} Not Allowed`)
20 | return
21 | }
22 |
23 | // input data
24 | const inputData = req.query as Delete_list_items_by_pk_api_delete['input']
25 |
26 | const data: Delete_list_items_by_pk_api_delete['output'] = await new GqlSdkHelper()
27 | .getSdk()
28 | .delete_list_items_by_pk({
29 | id: inputData.id,
30 | })
31 |
32 | // output data
33 | res.status(HttpStatusCode.OK_200).json(data)
34 | })
35 | )
36 |
--------------------------------------------------------------------------------
/src/components/ValidationError/ValidationError.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Story, Meta } from '@storybook/react/types-6-0'
3 | import { ValidationError, ValidationErrorProps } from './ValidationError'
4 |
5 | export default {
6 | title: 'Component/ValidationError',
7 | component: ValidationError,
8 | argTypes: {
9 | register: {
10 | table: {
11 | disable: true,
12 | },
13 | },
14 | validationErrors: {
15 | table: {
16 | disable: true,
17 | },
18 | },
19 | },
20 | } as Meta
21 |
22 | const Template: Story
25 |
42 | 404 - Page Not Found
27 | {process.env.NEXT_PUBLIC_SITE_NAME}
28 |
29 | }
30 | menuItems={Object.values(LinksList)}
31 | >
32 |
33 |
42 |
34 |
41 | 404 - Page Not Found
35 | 36 | 39 | 40 |Documentation
50 | {process.env.NEXT_PUBLIC_SITE_NAME}
51 |
52 | }
53 | menuItems={Object.values(LinksList)}
54 | >
55 |
60 |
35 |
63 | )
64 | }
65 |
--------------------------------------------------------------------------------
/src/model/site/ThemeList.ts:
--------------------------------------------------------------------------------
1 | export type ThemeListIds =
2 | | 'light'
3 | | 'dark'
4 | | 'cupcake'
5 | | 'bumblebee'
6 | | 'emerald'
7 | | 'corporate'
8 | | 'synthwave'
9 | | 'retro'
10 | | 'cyberpunk'
11 | | 'valentine'
12 | | 'halloween'
13 | | 'garden'
14 | | 'forest'
15 | | 'aqua'
16 | | 'lofi'
17 | | 'pastel'
18 | | 'fantasy'
19 | | 'wireframe'
20 | | 'black'
21 | | 'luxury'
22 | | 'dracula'
23 |
24 | export const ThemeList: {
25 | [id in ThemeListIds]: {
26 | id: ThemeListIds
27 | name: string
28 | }
29 | } = {
30 | light: {
31 | id: 'light',
32 | name: 'Light',
33 | },
34 | dark: {
35 | id: 'dark',
36 | name: 'Dark',
37 | },
38 | cupcake: {
39 | id: 'cupcake',
40 | name: 'Cup Cake',
41 | },
42 | bumblebee: {
43 | id: 'bumblebee',
44 | name: 'Bumble Bee',
45 | },
46 | emerald: {
47 | id: 'emerald',
48 | name: 'Emerald',
49 | },
50 | corporate: {
51 | id: 'corporate',
52 | name: 'Corporate',
53 | },
54 | synthwave: {
55 | id: 'synthwave',
56 | name: 'Synth Wave',
57 | },
58 | retro: {
59 | id: 'retro',
60 | name: 'Retro',
61 | },
62 | cyberpunk: {
63 | id: 'cyberpunk',
64 | name: 'Cyber-Punk',
65 | },
66 | valentine: {
67 | id: 'valentine',
68 | name: 'Valentine',
69 | },
70 | halloween: {
71 | id: 'halloween',
72 | name: 'Halloween',
73 | },
74 | garden: {
75 | id: 'garden',
76 | name: 'Garden',
77 | },
78 | forest: {
79 | id: 'forest',
80 | name: 'Forest',
81 | },
82 | aqua: {
83 | id: 'aqua',
84 | name: 'Aqua',
85 | },
86 | lofi: {
87 | id: 'lofi',
88 | name: 'Lofi',
89 | },
90 | pastel: {
91 | id: 'pastel',
92 | name: 'Pastel',
93 | },
94 | fantasy: {
95 | id: 'fantasy',
96 | name: 'Fantasy',
97 | },
98 | wireframe: {
99 | id: 'wireframe',
100 | name: 'Wire Frame',
101 | },
102 | black: {
103 | id: 'black',
104 | name: 'Black',
105 | },
106 | luxury: {
107 | id: 'luxury',
108 | name: 'Luxury',
109 | },
110 | dracula: {
111 | id: 'dracula',
112 | name: 'Dracula',
113 | },
114 | }
115 |
--------------------------------------------------------------------------------
/src/components/forms/FormInputColor/FormInputColor.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Story, Meta } from '@storybook/react/types-6-0'
3 | import { FormInputColorProps } from './FormInputColor'
4 | import { FormInputColor_Form } from './FormInputColor_Form'
5 |
6 | export default {
7 | title: 'Component/Forms/FormInputColor_Form',
8 | component: FormInputColor_Form,
9 | argTypes: {
10 | register: {
11 | table: {
12 | disable: true,
13 | },
14 | },
15 | validationErrors: {
16 | table: {
17 | disable: true,
18 | },
19 | },
20 | watch: {
21 | table: {
22 | disable: true,
23 | },
24 | },
25 | setValue: {
26 | table: {
27 | disable: true,
28 | },
29 | },
30 | },
31 | } as Meta
32 |
33 | const Template: Story
36 |
62 |
33 |
75 | )
76 | }
77 |
--------------------------------------------------------------------------------
/src/pages/docs/index.tsx:
--------------------------------------------------------------------------------
1 | import { Layout } from '../../components/Layout/Layout'
2 | import { LinksList } from '../../model/site/LinksList'
3 | import dayjs from 'dayjs'
4 | import { getAllDocs, MetaTypes } from '../../utils/docs'
5 | import { GetStaticProps } from 'next'
6 | import Link from 'next/link'
7 |
8 | export const getStaticProps: GetStaticProps = async () => {
9 | const docs = getAllDocs()
10 |
11 | return {
12 | props: { docs },
13 | }
14 | }
15 |
16 | type DocsProps = {
17 | docs: MetaTypes[]
18 | }
19 |
20 | export default function Docs({ docs }: DocsProps) {
21 | return (
22 |
34 |
74 |
35 |
73 |
48 | 
{
59 | currentImageIsValidSet(false)
60 | }}
61 | onLoad={() => {
62 | currentImageIsValidSet(true)
63 | }}
64 | />
65 |
72 | Documentation
26 | {process.env.NEXT_PUBLIC_SITE_NAME}
27 |
28 | }
29 | menuItems={Object.values(LinksList)}
30 | >
31 | Documentation
33 | 34 |
35 | {docs?.length > 0 &&
36 | docs.map((item) => (
37 |
63 |
38 |
39 | 
47 |
48 |
61 | ))}
62 |
49 |
60 |
50 |
59 |
51 | {item.meta.date &&
58 | {dayjs(item.meta.date).format('YYYY-MM-DD')}
} 52 |53 | 54 | {item.meta.title} 55 | 56 |
57 | = {
6 | status: number
7 | statusText: string
8 | error?: any
9 | outputData?: P
10 | }
11 |
12 | export type TypedFetchParams {cards.text} I love using Next.js
24 |
27 | ),
28 | menuItems: Object.values(LinksList),
29 | children:
30 | 'Lorem ipsum dolor sit amet, consectetur adipiscing. Vestibulum rutrum metus at enim congue scelerisque. Sed suscipit metu non iaculis semper consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing. Vestibulum rutrum metus at enim congue scelerisque. Sed suscipit metu non iaculis semper consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing. Vestibulum rutrum metus at enim congue scelerisque. Sed suscipit metu non iaculis semper consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing. Vestibulum rutrum metus at enim congue scelerisque. Sed suscipit metu non iaculis semper consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing. Vestibulum rutrum metus at enim congue scelerisque. Sed suscipit metu non iaculis semper consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing. Vestibulum rutrum metus at enim congue scelerisque. Sed suscipit metu non iaculis semper consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing. Vestibulum rutrum metus at enim congue scelerisque. Sed suscipit metu non iaculis semper consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing. Vestibulum rutrum metus at enim congue scelerisque. Sed suscipit metu non iaculis semper consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing. Vestibulum rutrum metus at enim congue scelerisque. Sed suscipit metu non iaculis semper consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing. Vestibulum rutrum metus at enim congue scelerisque. Sed suscipit metu non iaculis semper consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing. Vestibulum rutrum metus at enim congue scelerisque. Sed suscipit metu non iaculis semper consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing. Vestibulum rutrum metus at enim congue scelerisque. Sed suscipit metu non iaculis semper consectetur adipiscing elit.',
31 | }
32 |
--------------------------------------------------------------------------------
/src/components/DropDown/DropDown.tsx:
--------------------------------------------------------------------------------
1 | import React, { ReactNode, useEffect, useState } from 'react'
2 | import { Transition, Menu } from '@headlessui/react'
3 | import classnames from 'classnames'
4 | import { FaCaretDown } from 'react-icons/fa'
5 |
6 | export interface DropDownProps {
7 | label: ReactNode
8 | items: { id: string; value: ReactNode }[]
9 | onSelect: (string) => void
10 | selectedId: string | null
11 | className?: string
12 | classNameButton?: string
13 | width?: number
14 | }
15 |
16 | export const DropDown: React.FCHOME
25 | {process.env.NEXT_PUBLIC_SITE_NAME}
26 |
58 | {data?.map((cards, i) => (
59 |
89 | )
90 | }
91 |
--------------------------------------------------------------------------------
/src/pages/api/auth/[...auth0].ts:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-param-reassign */
2 | import { handleAuth, handleCallback, handleLogin, handleLogout } from '@auth0/nextjs-auth0'
3 | import { NextApiRequest, NextApiResponse } from 'next'
4 | import { Roles_Enum, Users_Update_Column } from '../../../graphql/generated'
5 | import { Insert_users_one_api_post } from '../../../model/api-models/users/Insert_users_one_api_post'
6 | import { Users_by_pk_api_get } from '../../../model/api-models/users/Users_by_pk_api_get'
7 | import GqlSdkHelper from '../../../utils/GqlSdkHelper'
8 |
9 | // from: https://github.com/auth0/nextjs-auth0/issues/108#issuecomment-800059278
10 |
11 | const audience = process.env.AUTH0_AUDIENCE
12 | const scope = process.env.AUTH0_SCOPE
13 |
14 | function getUrls({ req }) {
15 | const { host } = req.headers
16 | const protocol = process.env.VERCEL_URL ? 'https' : 'http'
17 | const redirectUri = `${protocol}://${host}/api/auth/callback`
18 | const returnTo = `${protocol}://${host}`
19 | return {
20 | redirectUri,
21 | returnTo,
22 | }
23 | }
24 |
25 | export default handleAuth({
26 | async callback(req: NextApiRequest, res: NextApiResponse) {
27 | try {
28 | const { redirectUri } = getUrls({ req })
29 | await handleCallback(req, res, {
30 | redirectUri,
31 | afterCallback: async (_req, _res, session /* , state */) => {
32 | const userResultObj: Users_by_pk_api_get['output'] = await new GqlSdkHelper()
33 | .getSdk()
34 | .users_by_pk({
35 | id: session.user.sub,
36 | })
37 |
38 | // get user ROLE
39 | // check if users exists and get current role
40 | if (userResultObj?.users_by_pk?.role) {
41 | // return existing user
42 | session.user.role = userResultObj?.users_by_pk?.role as Roles_Enum
43 | return session
44 | }
45 | // save new user
46 | const inputData = {
47 | id: session.user.sub,
48 | name: session.user.name,
49 | email: session.user.email,
50 | image: session.user.picture,
51 | role: Roles_Enum.User,
52 | } as Insert_users_one_api_post['input']
53 | const insertResultObj: Insert_users_one_api_post['output'] = await new GqlSdkHelper()
54 | .getSdk()
55 | .insert_users_one({
56 | object: inputData,
57 | update_columns: Object.values(Users_Update_Column),
58 | })
59 |
60 | session.user.role = insertResultObj.insert_users_one?.role
61 | return session
62 | },
63 | })
64 | } catch (error) {
65 | res.status(error.status || 500).end(error.message)
66 | }
67 | },
68 |
69 | async login(req: NextApiRequest, res: NextApiResponse) {
70 | try {
71 | const { redirectUri, returnTo } = getUrls({ req })
72 |
73 | await handleLogin(req, res, {
74 | authorizationParams: {
75 | audience,
76 | scope,
77 | redirectUri,
78 | },
79 | returnTo,
80 | })
81 | } catch (error) {
82 | res.status(error.status || 400).end(error.message)
83 | }
84 | },
85 |
86 | async logout(req: NextApiRequest, res: NextApiResponse) {
87 | const { returnTo } = getUrls({ req })
88 | await handleLogout(req, res, {
89 | returnTo,
90 | })
91 | },
92 | })
93 |
--------------------------------------------------------------------------------
/src/components/forms/FormInputColor/FormInputColor_Form.tsx:
--------------------------------------------------------------------------------
1 | import * as React from 'react'
2 | import { useForm } from 'react-hook-form'
3 | import { zodResolver } from '@hookform/resolvers/zod'
4 | import withReactContent from 'sweetalert2-react-content'
5 | import Swal from 'sweetalert2'
6 | import { FormInputColor, FormInputColorProps } from './FormInputColor'
7 | import * as z from 'zod'
8 | import { CodeBlock } from '../../CodeBlock/CodeBlock'
9 | import isHexColor from 'validator/lib/isHexColor'
10 |
11 | export const FormInputColor_Form: React.FC
60 |
87 | ))}
88 |
61 | <>
62 |
86 | {cards.title}
63 |
65 |
66 |
67 | {cards.urlText}
68 |
81 |
82 |
83 |
84 |
85 |
77 |
88 | {listNumberOfPages.map((item) => (
89 |
101 | ))}
102 |
113 |
114 | )
115 | }
116 |
--------------------------------------------------------------------------------
/src/components/forms/FormSelect/FormSelect.test.tsx:
--------------------------------------------------------------------------------
1 | import React, { OptionHTMLAttributes } from 'react'
2 | import * as TestingLib from '@testing-library/react'
3 | import '@testing-library/jest-dom/extend-expect'
4 | import { EMPTY_SELECT_OPTION_VALUE, FormSelect } from './FormSelect'
5 | import { fireEvent } from '@testing-library/react'
6 |
7 | describe('Select Component', () => {
8 | it('should render a component', async () => {
9 | const render = TestingLib.render(
10 |
46 |
102 | )
103 | }
104 |
--------------------------------------------------------------------------------
/src/docs/prism.md:
--------------------------------------------------------------------------------
1 | ---
2 | title: 'Prism with Next.js'
3 | description: 'Example using Prism / Markdown with Next.js including switching syntax highlighting themes.'
4 | image_url: 'https://brazil.progress.im/sites/default/files/styles/content_full/public/istock-869670360.jpg?itok=QsVJU6NC'
5 | date: '2021-07-06'
6 | ---
7 |
8 | # Using Prism with Next.js
9 |
10 | [**Prism**](https://prismjs.com/) is a popular syntax highlighter commonly used with Markdown.
11 | This example shows how to use Prism with [**Next.js**](https://nextjs.org/). Use the theme dropdown
12 | in the header to switch syntax highlighting themes.
13 |
14 | Next.js uses `getStaticPaths`/`getStaticProps` to generate [static pages](https://nextjs.org/docs/basic-features/data-fetching). These functions are _not_ bundled client-side, so you can **write server-side code directly**. For example, you can read Markdown files from the filesystem (`fs`) – including parsing front matter with [gray-matter](https://github.com/jonschlinkert/gray-matter). For example, let's assume you have a Markdown file located at `docs/prism.md`.
15 |
16 | We can retrieve that file's contents using `getDocBySlug('prism')`.
17 |
18 | ```ts
19 | // utils/docs.ts
20 |
21 | import fs from 'fs'
22 | import { join } from 'path'
23 | import matter from 'gray-matter'
24 |
25 | const docsDirectory = join(process.cwd(), 'src', 'docs')
26 |
27 | export function getDocBySlug(slug: string) {
28 | const realSlug = slug.replace(/\.md$/, '')
29 | const fullPath = join(docsDirectory, `${realSlug}.md`)
30 | const fileContents = fs.readFileSync(fullPath, 'utf8')
31 |
32 | const { data, content } = matter(fileContents)
33 |
34 | return { slug: realSlug, meta: data, content }
35 | }
36 |
37 | export function getAllDocs() {
38 | const slugs = fs.readdirSync(docsDirectory)
39 | const docs = slugs.map((slug) => getDocBySlug(slug))
40 |
41 | return docs
42 | }
43 | ```
44 |
45 | Then, we can **transform** the raw Markdown into HTML using [remark](https://github.com/remarkjs/remark) plugins.
46 |
47 | ```ts
48 | // lib/markdown.ts
49 |
50 | import remark from 'remark'
51 | import html from 'remark-html'
52 | import prism from 'remark-prism'
53 | import { VFileCompatible } from 'vfile'
54 |
55 | export const markdownToHtml = async (markdown: VFileCompatible) => {
56 | const result = await remark().use(html).use(prism).process(markdown)
57 | return result.toString()
58 | }
59 | ```
60 |
61 | Passing the `content` returned by `getDocBySlug('prism')` into `markdownToHtml(content)`
62 | would convert a Markdown file like this:
63 |
64 | ````markdown
65 | ---
66 | title: 'My First doc'
67 | description: 'My very first doc'
68 | ---
69 |
70 | # My First doc
71 |
72 | I **love** using [Next.js](https://nextjs.org/)
73 |
74 | ```js
75 | const doc = getDocBySlug(params.slug)
76 | ```
77 | ````
78 |
79 | into this HTML, which includes the proper elements and class names.
80 |
81 | ```html
82 |
47 |
101 |
49 |
94 |
95 | {validationErrors?.[name] && (
96 |
99 | )}
100 | {image.name}
50 |
56 |
71 |
93 |
57 | {image?.url ? (
58 |
70 |
64 | ) : (
65 |
66 | {' '}
67 |
68 | )}
69 | My First doc
83 |
85 |
91 | ```
92 |
93 | ## Deploy Your Own
94 |
95 | View the [**source code**](https://github.com/nextjs-opinionated/nextjs-opinionated-hasura) and deploy your own. You can add new Markdown files to `src/docs/` and see them live instantly!
96 |
97 | [](https://vercel.com/import/git?c=1&s=https://github.com/nextjs-opinionated/nextjs-opinionated-hasura)
98 |
--------------------------------------------------------------------------------
/src/components/forms/FormSelect/FormSelect.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { Story, Meta } from '@storybook/react/types-6-0'
3 | import { EMPTY_SELECT_OPTION_VALUE, FormSelect, SelectProps } from './FormSelect'
4 |
5 | export default {
6 | title: 'Component/Forms/FormSelect',
7 | component: FormSelect,
8 | argTypes: {
9 | register: {
10 | table: {
11 | disable: true,
12 | },
13 | },
14 | validationErrors: {
15 | table: {
16 | disable: true,
17 | },
18 | },
19 | },
20 | } as Meta
21 |
22 | const Template: Story
86 |
90 |
87 | const doc = getDocBySlug(params.slug);
88 |
89 |
35 |
115 | )
116 | }
117 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | ## [nextjs-opinionated-hasura](https://github.com/saitodisse/nextjs-opinionated-hasura)
2 |
3 | ### - [demo](https://nextjs-opinionated-hasura.vercel.app/)
4 |
5 | ### - [storybook](https://main--60d3401329ef650039bca516.chromatic.com)
6 |
7 | _extends [nextjs-opinionated](https://github.com/saitodisse/nextjs-opinionated) ([demo](https://nextjs-opinionated.vercel.app/)) - base template, without Hasura and Auth0_
8 |
9 | ---
10 |
11 | ### This template includes
12 |
13 | - everything from [nextjs-opinionated](https://github.com/saitodisse/nextjs-opinionated)
14 | - [hasura](https://hasura.io/)
15 | - [graphql-request](https://github.com/prisma-labs/graphql-request)
16 | - [graphql-codegen](https://www.graphql-code-generator.com/)
17 | - [docker-compose](https://docs.docker.com/compose/)
18 | - [react-hook-form](https://react-hook-form.com/)
19 | - [@tailwindcss/forms](https://github.com/tailwindlabs/tailwindcss-forms)
20 | - [zod](https://github.com/colinhacks/zod)
21 |
22 | ---
23 |
24 | ## Pre-Requirements
25 |
26 | - Install **node** (min 14): https://www.digitalocean.com/community/tutorials/how-to-install-node-js-on-ubuntu-20-04
27 |
28 | - Install and configure **docker**. Make sure you can run `docker` command without sudo (Step 2): https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-on-ubuntu-20-04
29 |
30 | - Install and configure **docker-compose**: https://www.digitalocean.com/community/tutorials/how-to-install-and-use-docker-compose-on-ubuntu-20-04
31 |
32 | - Install **hasura** cli: https://hasura.io/docs/1.0/graphql/core/hasura-cli/install-hasura-cli.html#install-hasura-cli
33 |
34 | ### Before yarn dev
35 |
36 | ```sh
37 | yarn
38 |
39 | # create .env.local
40 | cp .env.local.example .env.local
41 |
42 | # start your postgress if you have docker
43 | yarn hasuraLocal
44 |
45 | # apply DB in other terminal
46 | yarn migrationLocalApply
47 | ```
48 |
49 | Go to http://localhost:9696, use `admin_secret_local_zzz` as admin secret. You must see messages, tags and message_tag tables
50 |
51 | ---
52 |
53 | ### Run on local database (with docker)
54 |
55 | ```sh
56 | yarn dev
57 | ```
58 |
59 | ---
60 |
61 | ### Run on remote database - heroku (without docker)
62 |
63 | - first create a server using [heroku button](https://heroku.com/deploy?template=https://github.com/hasura/graphql-engine-heroku)
64 |
65 | ```sh
66 | yarn devNext
67 | ```
68 |
69 | ## start server
70 |
71 | ```sh
72 | # start docker-compose, generator and next.js
73 | yarn dev
74 | ```
75 |
76 | ---
77 |
78 | ## FREE Deploy on Heroku and Vercel
79 |
80 | - Install Heroku CLI: https://devcenter.heroku.com/articles/heroku-cli#download-and-install
81 | - Install Vercel CLI: https://vercel.com/cli
82 | - Push your repo to github and deploy to your vercel account
83 | - run `vercel link` on your project folder
84 |
85 | - Deploy to heroku with the heroku button (https://heroku.com/deploy?template=https://github.com/hasura/graphql-engine-heroku)
86 | - run `heroku login`
87 |
88 | - `cp .env.production.sh.example .env.production.sh`
89 | - update `HASURA_ADMIN_SECRET`, `NEXT_PUBLIC_HASURA_GRAPHQL_ENDPOINT`, `HASURA_GRAPHQL_ADMIN_SECRET` at `.env.production.sh` - search/replace for `xxx`
90 |
91 | ---
92 |
93 | ## how to use
94 |
95 | Just fork and run:
96 |
97 | ```sh
98 | # npm install
99 | yarn install
100 |
101 | # next.js site
102 | yarn dev
103 |
104 | # storybook site
105 | yarn storybook
106 |
107 | # tests
108 | yarn test --watch
109 | ```
110 |
111 | ---
112 |
113 | ## configure Auth0
114 |
115 | - https://github.com/auth0/nextjs-auth0
116 |
117 | ---
118 |
119 | ## always updated
120 |
121 | _I'm keeping in sync with nextjs-opinionated base template_
122 |
123 | ```sh
124 | # merge
125 | git pull git@github.com:semantix-engagement-hub/nextjs-opinionated.git main
126 | ```
127 |
128 | _I'm always updating all packages here_
129 |
130 | ```sh
131 | # yarn global add npm-check-updates
132 | ncu -u
133 | yarn
134 | ```
135 |
136 | _tests everything's still works:_
137 |
138 | ```sh
139 | yarn checkAll
140 | ```
141 |
142 | If everything is working, please make a pull request
143 |
144 | ---
145 |
146 | _based on [https://github.com/elitizon/nextjs-tailwind-storybook](https://github.com/elitizon/nextjs-tailwind-storybook)_
147 |
--------------------------------------------------------------------------------
/src/pages/typed-fetch-examples/typedFetch-react-query.tsx:
--------------------------------------------------------------------------------
1 | /* eslint-disable no-console */
2 | import toString from 'lodash/toString'
3 | import Head from 'next/head'
4 | import React, { useState, useEffect } from 'react'
5 | import { CodeBlock } from '../../components/CodeBlock/CodeBlock'
6 | import { Layout } from '../../components/Layout/Layout'
7 | import { LinksList } from '../../model/site/LinksList'
8 | import typedFetch from '../../utils/typedFetch/typedFetch'
9 | import {
10 | Fetch_tester_api_get,
11 | fetch_tester_api_get_Config,
12 | } from '../../model/api-models/typed-fetch-examples/Fetch_tester_api_get'
13 | // import { Fetch_tester_api_post, fetch_tester_api_post_Config } from '../api/fetch_tester_api_post'
14 | import { useQuery } from 'react-query'
15 | import classnames from 'classnames'
16 | import {
17 | Fetch_tester_api_post,
18 | fetch_tester_api_post_Config,
19 | } from '../../model/api-models/typed-fetch-examples/Fetch_tester_api_post'
20 |
21 | export default function Page() {
22 | const [fetchResultJSON, fetchResultJSONSet] = useState({})
23 | const [forceError, forceErrorSet] = useState(false)
24 |
25 | const getResultObj = useQuery('fetch_tester_api_get_Key', async () => {
26 | const resultObj = await typedFetch<
27 | Fetch_tester_api_get['input'],
28 | Fetch_tester_api_get['output']
29 | >({
30 | ...fetch_tester_api_get_Config,
31 | inputData: {
32 | some_string: 'Ueba!',
33 | divide_by: toString(5),
34 | force_error: toString(forceError),
35 | },
36 | })
37 |
38 | fetchResultJSONSet((d) => ({ ...d, get: resultObj }))
39 | return resultObj
40 | })
41 |
42 | const postResultObj = useQuery('fetch_tester_api_post_Key', async () => {
43 | const resultObj = await typedFetch<
44 | Fetch_tester_api_post['input'],
45 | Fetch_tester_api_post['output']
46 | >({
47 | ...fetch_tester_api_post_Config,
48 | inputData: {
49 | some_string: 'Ueba!',
50 | divide_by: 5,
51 | force_error: forceError,
52 | },
53 | })
54 |
55 | fetchResultJSONSet((d) => ({ ...d, post: resultObj }))
56 | return resultObj
57 | })
58 |
59 | useEffect(() => {
60 | fetchResultJSONSet({ get: getResultObj.data, post: postResultObj.data })
61 | }, [getResultObj, postResultObj])
62 |
63 | return (
64 | <>
65 |
66 |
36 |
114 |
39 |
107 |
108 | {validationErrors?.[name] && (
109 |
112 | )}
113 |
40 |
95 |
96 | {/* HexColorPicker */}
97 | {showHexColorPicker && (
98 |
41 | {/* input color */}
42 | setValue(name, ev.target.value)}
47 | placeholder={`${placeholder || label || name}`}
48 | className={classnames(`cursor-pointer w-7 h-7 ${className}`, {
49 | 'input-error': validationErrors?.[name],
50 | })}
51 | />
52 |
53 | {/* main input (REGISTER) */}
54 | {
61 | if (openOnFocus === true) {
62 | openedSet(true)
63 | }
64 | }}
65 | onBlur={() => {
66 | if (openOnFocus === true) {
67 | openedSet(false)
68 | }
69 | }}
70 | placeholder={`${placeholder || label || name}`}
71 | className={classnames(
72 | `input input-bordered input-sm mx-2 w-[7.6rem] font-mono ${className}`,
73 | {
74 | 'input-error': validationErrors?.[name],
75 | 'w-[5.6rem]': alwaysShowHexColorPicker,
76 | }
77 | )}
78 | />
79 |
80 | {/* toggle HexColorPicker */}
81 | {showHexColorPicker && !alwaysShowHexColorPicker && (
82 |
92 | )}
93 |
94 |
103 |
105 | )}
106 | TypedFetch Examples with React Query
73 | {process.env.NEXT_PUBLIC_SITE_NAME}
74 |
75 | }
76 | menuItems={Object.values(LinksList)}
77 | >
78 | {/* text */}
79 |
80 |
118 | TypedFetch Examples with React Query
81 |
82 | {/* buttons */}
83 |
84 |
93 |
102 |
114 |
115 |
116 |