Merge pull request #66 from 8iq/v_0.0.2_alpha

V 0.0.2 alpha

README.md

@@ -1,5 +1,7 @@
 [![Hackathon workflow](https://image.shutterstock.com/image-vector/banner-hackathon-design-sprintlike-event-260nw-1418226719.jpg)](https://drive.google.com/drive/folders/1Srw2T91_rRLTWgJc-Zh693hhbD2JS6Yh)
 
+![form example](./docs/_img/01-form-example.png)
+
 What's inside? React + Next.js + Ant + Turbo + react-i18next + Refine
 
 # Rapid Development Node.js Hackathon template

apps/web/app/samples/[id]/clone/page.tsx

@@ -1,11 +1,18 @@
 'use server'
 
-import { AntdInferencer } from '@repo/ui/refine/antd'
+import dynamic from 'next/dynamic'
 import React from 'react'
 
 import { Layout } from 'web/components/Layout'
 
-export default async function ClonePage(): Promise<React.JSX.Element> {
+const AntdInferencer = dynamic(
+  () => import('@repo/ui/refine/antd').then((i) => i.AntdInferencer),
+  {
+    ssr: false,
+  },
+)
+
+export default async function ClonePage() {
   return (
     <Layout>
       <AntdInferencer />

apps/web/app/samples/[id]/edit/page.tsx

@@ -1,11 +1,18 @@
 'use server'
 
-import { AntdInferencer } from '@repo/ui/refine/antd'
+import dynamic from 'next/dynamic'
 import React from 'react'
 
 import { Layout } from 'web/components/Layout'
 
-export default async function EditPage(): Promise<React.JSX.Element> {
+const AntdInferencer = dynamic(
+  () => import('@repo/ui/refine/antd').then((i) => i.AntdInferencer),
+  {
+    ssr: false,
+  },
+)
+
+export default async function EditPage() {
   return (
     <Layout>
       <AntdInferencer />

apps/web/app/samples/[id]/page.tsx

@@ -1,11 +1,18 @@
 'use server'
 
-import { AntdInferencer } from '@repo/ui/refine/antd'
+import dynamic from 'next/dynamic'
 import React from 'react'
 
 import { Layout } from 'web/components/Layout'
 
-export default async function ShowPage(): Promise<React.JSX.Element> {
+const AntdInferencer = dynamic(
+  () => import('@repo/ui/refine/antd').then((i) => i.AntdInferencer),
+  {
+    ssr: false,
+  },
+)
+
+export default async function ShowPage() {
   return (
     <Layout>
       <AntdInferencer />

apps/web/app/samples/create/page.tsx

@@ -1,11 +1,18 @@
 'use server'
 
-import { AntdInferencer } from '@repo/ui/refine/antd'
+import dynamic from 'next/dynamic'
 import React from 'react'
 
 import { Layout } from 'web/components/Layout'
 
-export default async function CreatePage(): Promise<React.JSX.Element> {
+const AntdInferencer = dynamic(
+  () => import('@repo/ui/refine/antd').then((i) => i.AntdInferencer),
+  {
+    ssr: false,
+  },
+)
+
+export default async function CreatePage() {
   return (
     <Layout>
       <AntdInferencer />

apps/web/app/samples/page.tsx

@@ -1,11 +1,18 @@
 'use server'
 
-import { AntdInferencer } from '@repo/ui/refine/antd'
+import dynamic from 'next/dynamic'
 import React from 'react'
 
 import { Layout } from 'web/components/Layout'
 
-export default async function ListPage(): Promise<React.JSX.Element> {
+const AntdInferencer = dynamic(
+  () => import('@repo/ui/refine/antd').then((i) => i.AntdInferencer),
+  {
+    ssr: false,
+  },
+)
+
+export default async function ListPage() {
   return (
     <Layout>
       <AntdInferencer />

apps/web/components/Layout/header/Header.tsx

@@ -1,9 +1,6 @@
 'use client'
 
-import {
-  useIsAuthenticated,
-  useLink,
-} from '@repo/ui/refine/core'
+import { useIsAuthenticated, useLink, useTranslate } from '@repo/ui/refine/core'
 import React from 'react'
 
 import { Layout, Space, theme } from '@repo/ui/general'
@@ -17,6 +14,8 @@ export const Header: React.FC = () => {
   const Link = useLink()
   const { data: auth } = useIsAuthenticated()
   const isAuthenticated = auth?.authenticated
+  const translate = useTranslate()
+  const loginMessage = translate('buttons.login', 'Login')
 
   const headerStyles: React.CSSProperties = {
     backgroundColor: token.colorBgElevated,
@@ -36,7 +35,7 @@ export const Header: React.FC = () => {
       <Space>
         {/*<Notifications/>*/}
         {isAuthenticated ? <CurrentUser /> : null}
-        {!isAuthenticated ? <Link to={'login'}>Login</Link> : null}
+        {!isAuthenticated ? <Link to={'login'}>{loginMessage}</Link> : null}
       </Space>
     </BaseHeader>
   )

apps/web/components/Layout/index.tsx

@@ -6,8 +6,6 @@ import { BrandTitle } from '../BrandTitle'
 import { Header } from './header'
 
 export const Layout: React.FC<React.PropsWithChildren> = ({ children }) => {
-  console.log('Layout')
-
   return (
     // ThemedLayoutV2: https://refine.dev/docs/ui-integrations/ant-design/components/themed-layout/
     // Header: https://refine.dev/docs/ui-integrations/ant-design/components/themed-layout/#header

apps/web/providers/i18n/index.ts

@@ -9,6 +9,7 @@ import {
   DEFAULT_LOCALE,
   DEFAULT_NAMESPACE,
   LOCALES,
+  IS_I18N_DEBUG_ENABLED,
 } from '@repo/i18n'
 
 import { IMPORTER } from './importer'
@@ -20,7 +21,7 @@ i18next
   .use(LanguageDetector)
   .use(resourcesToBackend(IMPORTER))
   .init({
-    // debug: true,
+    debug: IS_I18N_DEBUG_ENABLED,
     lng: undefined, // let detect the language on client side
     fallbackLng: DEFAULT_LOCALE,
     fallbackNS: DEFAULT_NAMESPACE,

packages/i18n/config.ts

@@ -2,3 +2,4 @@ export const LOCALE_COOKIE_NAME = 'NEXT_LOCALE'
 export const LOCALES = ['en', 'ru']
 export const DEFAULT_LOCALE = 'en'
 export const DEFAULT_NAMESPACE = 'common'
+export const IS_I18N_DEBUG_ENABLED = false

packages/i18n/server.ts

@@ -7,6 +7,7 @@ import acceptLanguage from 'accept-language'
 import {
   DEFAULT_LOCALE,
   DEFAULT_NAMESPACE,
+  IS_I18N_DEBUG_ENABLED,
   LOCALE_COOKIE_NAME,
   LOCALES,
 } from './config'
@@ -32,7 +33,7 @@ const initI18next = async (
     .use(initReactI18next)
     .use(resourcesToBackend(importer))
     .init({
-      debug: true,
+      debug: IS_I18N_DEBUG_ENABLED,
       fallbackLng: DEFAULT_LOCALE,
       fallbackNS: DEFAULT_NAMESPACE,
       defaultNS: DEFAULT_NAMESPACE,