diff --git a/README.md b/README.md index 5b9b8cb..39213c9 100644 --- a/README.md +++ b/README.md @@ -7,11 +7,11 @@ ## Technology stack -- Language: [TypeScript v4][2] -- Component engine: [Nextjs v12][3] +- Language: [TypeScript v5][2] +- Component engine: [Nextjs v13][3] - Component suite: [Bootstrap v5][4] - PWA framework: [Workbox v6][5] -- State management: [MobX][9] +- State management: [MobX v6][9] - CI / CD: GitHub [Actions][11] + [Vercel][12] ## Getting Started @@ -55,7 +55,7 @@ pnpm pack-image pnpm container ``` -[1]: https://reactjs.org/ +[1]: https://react.dev/ [2]: https://www.typescriptlang.org/ [3]: https://nextjs.org/ [4]: https://getbootstrap.com/ diff --git a/components/Client/Partner.tsx b/components/Client/Partner.tsx index b61406f..8963a81 100644 --- a/components/Client/Partner.tsx +++ b/components/Client/Partner.tsx @@ -32,9 +32,9 @@ export const Partner: FC = ({ href={address + ''} rel="noreferrer" > - {name} + {name + ''} -

{summary}

+

{summary + ''}

); diff --git a/components/Git/Logo.tsx b/components/Git/Logo.tsx index 405dd3d..2b0a25f 100644 --- a/components/Git/Logo.tsx +++ b/components/Git/Logo.tsx @@ -1,4 +1,4 @@ -import { observable } from 'mobx'; +import { makeObservable, observable } from 'mobx'; import { observer } from 'mobx-react'; import { PureComponent } from 'react'; import { Image } from 'react-bootstrap'; @@ -9,6 +9,11 @@ export interface GitLogoProps { @observer export class GitLogo extends PureComponent { + constructor(props: GitLogoProps) { + super(props); + makeObservable(this); + } + @observable path = ''; diff --git a/components/Member/Card.tsx b/components/Member/Card.tsx index 961ba31..96e002e 100644 --- a/components/Member/Card.tsx +++ b/components/Member/Card.tsx @@ -10,26 +10,18 @@ export interface MemberCardProps extends Member { } export const MemberCard: FC = observer( - ({ - className = 'shadow-sm', - nickname, - type, - skill, - position, - summary, - github, - }) => ( + ({ className = 'shadow-sm', nickname, skill, position, summary, github }) => ( - {nickname} + {nickname + ''} {github && ( )} - {position && {position}} + {position && {position + ''}} - {summary} + {summary + ''} diff --git a/components/PageHead.tsx b/components/PageHead.tsx index bee3aff..89f3fcd 100644 --- a/components/PageHead.tsx +++ b/components/PageHead.tsx @@ -1,10 +1,10 @@ import Head from 'next/head'; -import type { FC } from 'react'; +import type { FC, PropsWithChildren } from 'react'; -export interface PageHeadProps { +export type PageHeadProps = PropsWithChildren<{ title?: string; description?: string; -} +}>; const Name = process.env.NEXT_PUBLIC_SITE_NAME, Summary = process.env.NEXT_PUBLIC_SITE_SUMMARY; @@ -16,8 +16,7 @@ export const PageHead: FC = ({ }) => ( - {title} - {title && ' - '} + {title ? `${title} - ` : ''} {Name} diff --git a/components/Project/Card.tsx b/components/Project/Card.tsx index 6c1991f..c1da3d5 100644 --- a/components/Project/Card.tsx +++ b/components/Project/Card.tsx @@ -1,6 +1,5 @@ import classNames from 'classnames'; import { text2color } from 'idea-react'; -import Link from 'next/link'; import { FC } from 'react'; import { Badge, Card } from 'react-bootstrap'; import { formatDate } from 'web-utility'; @@ -24,12 +23,14 @@ export const ProjectCard: FC = ({ - - - {name} - - - {workForm} + + {name + ''} + + {workForm + ''}
    {(type as string[])?.map(value => ( @@ -45,7 +46,8 @@ export const ProjectCard: FC = ({
- ￥{price} + ￥{price + ''} + diff --git a/components/Section.tsx b/components/Section.tsx index 9b913cb..2b7a1af 100644 --- a/components/Section.tsx +++ b/components/Section.tsx @@ -1,9 +1,11 @@ -import { FC } from 'react'; +import { FC, PropsWithChildren } from 'react'; import { Button } from 'react-bootstrap'; import { i18n } from '../models/Translation'; -export type SectionProps = Partial>; +export type SectionProps = PropsWithChildren< + Partial> +>; const { t } = i18n; diff --git a/models/Repository.ts b/models/Repository.ts index 3c11f80..c15fa1b 100644 --- a/models/Repository.ts +++ b/models/Repository.ts @@ -1,6 +1,6 @@ import { components } from '@octokit/openapi-types'; import { memoize } from 'lodash'; -import { observable } from 'mobx'; +import { makeObservable, observable } from 'mobx'; import { ListModel, toggle } from 'mobx-restful'; import { averageOf, buildURLData } from 'web-utility'; @@ -28,6 +28,11 @@ const getGitLanguages = memoize(async (URI: string) => { }); export class RepositoryModel extends ListModel { + constructor() { + super(); + makeObservable(this); + } + client = githubClient; baseURI = 'orgs/idea2app/repos'; indexKey = 'full_name' as const; diff --git a/next.config.js b/next.config.js index f6a302d..a74cfda 100644 --- a/next.config.js +++ b/next.config.js @@ -23,6 +23,5 @@ module.exports = withPWA( ); return config; }, - reactStrictMode: true, }), ); diff --git a/package.json b/package.json index 25f0ca5..153feb0 100644 --- a/package.json +++ b/package.json @@ -1,46 +1,46 @@ { "name": "@idea2app/ows", - "version": "2.0.0-beta", + "version": "2.0.0-rc", "description": "React project scaffold based on TypeScript, Next.js, Bootstrap & Workbox.", "private": true, "dependencies": { "classnames": "^2.3.2", "file-type": "^18.5.0", - "idea-react": "1.0.0-rc.10", - "koajax": "^0.8.4", + "idea-react": "^1.0.0-rc.22", + "koajax": "^0.8.6", "lodash": "^4.17.21", - "mobx": "^5.15.7", - "mobx-i18n": "^0.3.15", - "mobx-lark": "1.0.0-rc.2", - "mobx-react": "^6.3.1", - "mobx-restful": "^0.6.5", - "mobx-restful-table": "^1.0.4", - "next": "^12.3.4", - "next-ssr-middleware": "^0.5.0", - "react": "^17.0.2", + "mobx": "^6.10.1", + "mobx-i18n": "^0.4.1", + "mobx-lark": "^1.0.0-rc.7", + "mobx-react": "^9.0.1", + "mobx-restful": "^0.6.11", + "mobx-restful-table": "^1.1.2", + "next": "^13.4.19", + "next-ssr-middleware": "^0.5.1", + "react": "^18.2.0", "react-bootstrap": "^2.8.0", - "react-dom": "^17.0.2", + "react-dom": "^18.2.0", "web-utility": "^4.1.0", "webpack": "^5.88.2" }, "devDependencies": { - "@octokit/openapi-types": "^17.2.0", - "@types/lodash": "^4.14.196", - "@types/node": "^18.17.3", - "@types/react": "^17.0.60", - "eslint": "^8.46.0", - "eslint-config-next": "^13.4.13", + "@octokit/openapi-types": "^18.0.0", + "@types/lodash": "^4.14.197", + "@types/node": "^18.17.12", + "@types/react": "^18.2.21", + "eslint": "^8.48.0", + "eslint-config-next": "^13.4.19", "eslint-config-prettier": "^9.0.0", "eslint-plugin-simple-import-sort": "^10.0.0", "husky": "^8.0.3", "less": "^4.2.0", "less-loader": "^11.1.3", - "lint-staged": "^13.2.3", + "lint-staged": "^14.0.1", "next-pwa": "~5.6.0", - "next-with-less": "^2.0.5", - "prettier": "^3.0.1", + "next-with-less": "^3.0.1", + "prettier": "^3.0.3", "ts-node": "^10.9.1", - "typescript": "~5.1.6" + "typescript": "~5.2.2" }, "prettier": { "singleQuote": true, diff --git a/pages/_app.tsx b/pages/_app.tsx index 5e53932..0f2c67f 100644 --- a/pages/_app.tsx +++ b/pages/_app.tsx @@ -2,17 +2,18 @@ import '../styles/globals.less'; import { Option, Select } from 'idea-react'; import { HTTPError } from 'koajax'; -import { observer, useStaticRendering } from 'mobx-react'; +import { configure } from 'mobx'; +import { enableStaticRendering, observer } from 'mobx-react'; import type { AppProps } from 'next/app'; import Head from 'next/head'; -import Link from 'next/link'; import { Container, Image, Nav, Navbar } from 'react-bootstrap'; import { isServer } from '../models/Base'; import { i18n, LanguageName } from '../models/Translation'; -// eslint-disable-next-line react-hooks/rules-of-hooks -useStaticRendering(isServer()); +configure({ enforceActions: 'never' }); + +enableStaticRendering(isServer()); globalThis.addEventListener?.('unhandledrejection', ({ reason }) => { var { message, statusText } = reason as HTTPError; @@ -52,24 +53,23 @@ const AppShell = observer(({ Component, pageProps }: AppProps) => {