commit de8c03f342adeb95fdf7b9ec16a86f71b13f2673 Author: kjuulh Date: Sun Apr 24 23:12:11 2022 +0200 Add base app diff --git a/.gitignore b/.gitignore new file mode 100644 index 0000000..88b6f0d --- /dev/null +++ b/.gitignore @@ -0,0 +1,37 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# next.js +/.next/ +/out/ + +# production +/build + +# misc +.DS_Store +*.pem + +# debug +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +# local env files +.env.local +.env.development.local +.env.test.local +.env.production.local + +# vercel +.vercel + +# typescript +*.tsbuildinfo diff --git a/.idea/.gitignore b/.idea/.gitignore new file mode 100644 index 0000000..b58b603 --- /dev/null +++ b/.idea/.gitignore @@ -0,0 +1,5 @@ +# Default ignored files +/shelf/ +/workspace.xml +# Editor-based HTTP Client requests +/httpRequests/ diff --git a/.idea/client.iml b/.idea/client.iml new file mode 100644 index 0000000..0c8867d --- /dev/null +++ b/.idea/client.iml @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/.idea/inspectionProfiles/Project_Default.xml b/.idea/inspectionProfiles/Project_Default.xml new file mode 100644 index 0000000..adbfa0a --- /dev/null +++ b/.idea/inspectionProfiles/Project_Default.xml @@ -0,0 +1,16 @@ + + + + \ No newline at end of file diff --git a/.idea/modules.xml b/.idea/modules.xml new file mode 100644 index 0000000..0742ebc --- /dev/null +++ b/.idea/modules.xml @@ -0,0 +1,8 @@ + + + + + + + + \ No newline at end of file diff --git a/.idea/prettier.xml b/.idea/prettier.xml new file mode 100644 index 0000000..727b8b5 --- /dev/null +++ b/.idea/prettier.xml @@ -0,0 +1,7 @@ + + + + + \ No newline at end of file diff --git a/.idea/vcs.xml b/.idea/vcs.xml new file mode 100644 index 0000000..94a25f7 --- /dev/null +++ b/.idea/vcs.xml @@ -0,0 +1,6 @@ + + + + + + \ No newline at end of file diff --git a/README.md b/README.md new file mode 100644 index 0000000..5be2b41 --- /dev/null +++ b/README.md @@ -0,0 +1,23 @@ +# Next.js + Tailwind CSS Example + +This example shows how to use [Tailwind CSS](https://tailwindcss.com/) [(v3.0)](https://tailwindcss.com/blog/tailwindcss-v3) with Next.js. It follows the steps outlined in the official [Tailwind docs](https://tailwindcss.com/docs/guides/nextjs). + +## Deploy your own + +Deploy the example using [Vercel](https://vercel.com?utm_source=github&utm_medium=readme&utm_campaign=next-example) or preview live with [StackBlitz](https://stackblitz.com/github/vercel/next.js/tree/canary/examples/with-tailwindcss) + +[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/git/external?repository-url=https://github.com/vercel/next.js/tree/canary/examples/with-tailwindcss&project-name=with-tailwindcss&repository-name=with-tailwindcss) + +## How to use + +Execute [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app) with [npm](https://docs.npmjs.com/cli/init) or [Yarn](https://yarnpkg.com/lang/en/docs/cli/create/) to bootstrap the example: + +```bash +npx create-next-app --example with-tailwindcss with-tailwindcss-app +# or +yarn create next-app --example with-tailwindcss with-tailwindcss-app +# or +pnpm create next-app -- --example with-tailwindcss with-tailwindcss-app +``` + +Deploy it to the cloud with [Vercel](https://vercel.com/new?utm_source=github&utm_medium=readme&utm_campaign=next-example) ([Documentation](https://nextjs.org/docs/deployment)). diff --git a/components/common/Link.tsx b/components/common/Link.tsx new file mode 100644 index 0000000..75d9daf --- /dev/null +++ b/components/common/Link.tsx @@ -0,0 +1,16 @@ +import { FC } from 'react' +import NextLink from 'next/link' + +interface LinkProps { + page: string + className: string +} +const Link: FC = (props) => ( + + + {props.children} + + +) + +export default Link diff --git a/components/common/result/index.ts b/components/common/result/index.ts new file mode 100644 index 0000000..6a5cd41 --- /dev/null +++ b/components/common/result/index.ts @@ -0,0 +1 @@ +export * as result from './result' diff --git a/components/common/result/result.ts b/components/common/result/result.ts new file mode 100644 index 0000000..619781d --- /dev/null +++ b/components/common/result/result.ts @@ -0,0 +1,60 @@ +import { result } from '.' + +type Ok = { + type: 'ok' + val: T +} +export const ok = (val: T): Ok => ({ type: 'ok', val }) +type Err = { + type: 'err' + err: T +} +export const err = (err: T): Err => ({ type: 'err', err }) + +export type Result = Ok | Err + +export const isOk = (r: result.Result): boolean => { + switch (r.type) { + case 'ok': + return true + default: + return false + } +} + +export const getValue = (r: result.Result): TOk => { + if (r.type === 'ok') { + return r.val + } + + throw new Error(`couldn't get value as type is error: ${r.err}`) +} + +export const tap = ( + r: result.Result, + okFunc: (okRes: TOk) => void, + errFunc: (errRes: TErr) => void = (err) => { + console.log("default tap catch of error, note tap doesn't break chain") + } +): result.Result => { + switch (r.type) { + case 'ok': + okFunc(r.val) + break + case 'err': + errFunc(r.err) + break + } + + return r +} + +export const getError = ( + r: result.Result +): TErr => { + if (r.type === 'err') { + return r.err + } + + throw new Error(`couldn't get value as type is ok: ${r.val}`) +} diff --git a/components/domain/wishes/createWish/CreateWish.tsx b/components/domain/wishes/createWish/CreateWish.tsx new file mode 100644 index 0000000..c6362bf --- /dev/null +++ b/components/domain/wishes/createWish/CreateWish.tsx @@ -0,0 +1,85 @@ +import { FC, FormEvent, SyntheticEvent, useState } from 'react' +import { result } from '../../../common/result' +import { createWish, Wish } from '../models' + +interface CreateWishProps { + onFocus: () => void + onSubmit: (wish: Wish) => void +} + +const CreateWish: FC = (props) => { + const [focused, setFocused] = useState(false) + + const onSubmit = (e: SyntheticEvent) => { + e.preventDefault() + + const target = e.target as typeof e.target & { + wishName: { value: string } + wishDescription: { value?: string } + wishLink: { value?: string } + } + + const wishRes = createWish( + target.wishName.value, + target.wishDescription.value, + target.wishLink.value + ) + + result.tap(wishRes, (wish) => { + props.onSubmit(wish) + }) + } + + return ( +
setFocused(true)}> + +
+
+
+
+ +
+ +
+
+
+ +
+
+ +
+ ) +} + +const InnerWishPrompt: FC = (props) => { + return ( +
+