feat: locales xtraction

.yarnrc.yml

@@ -1,3 +1,8 @@
+packageExtensions:
+  '@atls-ui-parts/text@*':
+    dependencies:
+      '@emotion/react': '*'
+
 compressionLevel: mixed
 
 enableGlobalCache: false

app-router/entrypoints/renderer/locales/ru.json

@@ -0,0 +1,3 @@
+{
+  "text": "text"
+}

pages-router/entrypoints/renderer/extract-all-translations.js

@@ -0,0 +1,42 @@
+/* eslint-disable */
+
+import { readdirSync, existsSync, readFileSync, writeFileSync } from 'fs'
+import { join } from 'path'
+import { execSync } from 'child_process'
+
+const processDirectory = (startPath, folderName, allLocales) => {
+  if (!existsSync(startPath)) {
+    console.log('No directory ', startPath)
+    return
+  }
+
+  const directories = readdirSync(startPath, { withFileTypes: true })
+    .filter((dirent) => dirent.isDirectory())
+    .map((dirent) => dirent.name)
+
+  directories.forEach((dir) => {
+    const localePath = join(startPath, dir)
+    if (existsSync(`${localePath}/${folderName}`)) {
+      const command = `formatjs extract "${localePath}/**/*.tsx" --out-file "${localePath}/${folderName}/ru.json" --format simple`
+      console.log(`Running: ${command}`)
+      execSync(command, { stdio: 'inherit' })
+      allLocales.push(`${localePath}/${folderName}/ru.json`)
+    }
+  })
+}
+
+const mergeLocales = (files, outputPath) => {
+  const mergedLocales = {}
+  files.forEach((file) => {
+    if (existsSync(file)) {
+      const content = JSON.parse(readFileSync(file, 'utf8'))
+      Object.assign(mergedLocales, content)
+    }
+  })
+  writeFileSync(outputPath, JSON.stringify(mergedLocales, null, 2), 'utf8')
+}
+
+const allLocales = []
+processDirectory('../../fragments', 'locales', allLocales)
+processDirectory('../../pages', 'locales', allLocales)
+mergeLocales(allLocales, './locales/ru.json')

pages-router/entrypoints/renderer/locales/ru.json

@@ -0,0 +1,7 @@
+{
+  "app.navbar.hello": "HELLO TOO FROM NAVBAR",
+  "app.navbar_fragment.identity": "IDENTITY",
+  "app.sidebar-fragment.identity": "SIDEBAR",
+  "app.home_page.content": "CONTENT",
+  "app.home_page.hello": "HELLO FROM HOME"
+}

pages-router/entrypoints/renderer/package.json

@@ -6,6 +6,8 @@
   "scripts": {
     "build": "yarn next build src --no-lint && cp -r ./src/.next/standalone ./dist && cp -r ./src/.next/static ./dist/src/.next/static && mv ./dist/src/server.js ./dist/src/index.cjs",
     "dev": "yarn next dev src",
+    "extract-all": "node extract-all-translations.js",
+    "postinstall": "yarn extract-all",
     "prepack": "run build",
     "start": "node dist/src/index.cjs"
   },
@@ -15,10 +17,12 @@
     "next": "14.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
+    "react-intl": "6.6.2",
     "styled-system": "5.1.5"
   },
   "devDependencies": {
     "@app/home-page": "workspace:0.0.1",
+    "@formatjs/cli": "6.2.7",
     "@types/node": "20.11.5",
     "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",

pages-router/entrypoints/renderer/src/pages/_app.tsx

@@ -1,11 +1,16 @@
 import React             from 'react'
+import { IntlProvider }  from 'react-intl'
 
 import { ThemeProvider } from '@ui/theme'
 
+import messages          from '../../locales/ru.json'
+
 const App = ({ Component, pageProps, ...props }) => (
-  <ThemeProvider>
-    <Component {...pageProps} {...props} />
-  </ThemeProvider>
+  <IntlProvider defaultLocale='ru' locale='ru' messages={messages}>
+    <ThemeProvider>
+      <Component {...pageProps} {...props} />
+    </ThemeProvider>
+  </IntlProvider>
 )
 
 export default App

pages-router/fragments/navbar/locales/ru.json

@@ -0,0 +1,4 @@
+{
+  "app.navbar.hello": "HELLO TOO FROM NAVBAR",
+  "app.navbar_fragment.identity": "IDENTITY"
+}

pages-router/fragments/navbar/package.json

@@ -0,0 +1,22 @@
+{
+  "name": "@app/navbar-fragment",
+  "version": "0.0.1",
+  "main": "src/index.ts",
+  "dependencies": {
+    "@ui/hello": "workspace:0.0.1",
+    "@ui/layout": "workspace:0.0.1",
+    "@ui/text": "workspace:0.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.48",
+    "@types/react-dom": "18.2.18",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-intl": "6.6.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*",
+    "react-intl": "*"
+  }
+}

pages-router/fragments/navbar/src/index.ts

@@ -0,0 +1 @@
+export * from './navbar.component'

pages-router/fragments/navbar/src/navbar.component.tsx

@@ -0,0 +1,33 @@
+import React                from 'react'
+import { FormattedMessage } from 'react-intl'
+import { useIntl }          from 'react-intl'
+
+import { Hello }            from '@ui/hello'
+import { Box }              from '@ui/layout'
+import { Column }           from '@ui/layout'
+import { Text }             from '@ui/text'
+
+export const Navbar = () => {
+  const { formatMessage } = useIntl()
+  return (
+    <Column gap={20}>
+      <Box
+        justifyContent='center'
+        alignItems='center'
+        padding='huge'
+        backgroundColor='darkRed'
+        border='boldLightGray'
+        boxShadow='black.fifteenHundredthsTransparent'
+        height={50}
+        gap={20}
+      >
+        <Text color='white'>
+          <FormattedMessage id='app.navbar_fragment.identity' defaultMessage='IDENTITY' />
+        </Text>
+        <Hello
+          hello={formatMessage({ id: 'app.navbar.hello', defaultMessage: 'HELLO TOO FROM NAVBAR' })}
+        />
+      </Box>
+    </Column>
+  )
+}

pages-router/fragments/sidebar/locales/ru.json

@@ -0,0 +1,3 @@
+{
+  "app.sidebar-fragment.identity": "SIDEBAR"
+}

pages-router/fragments/sidebar/package.json

@@ -0,0 +1,21 @@
+{
+  "name": "@app/sidebar-fragment",
+  "version": "0.0.1",
+  "main": "src/index.ts",
+  "dependencies": {
+    "@ui/layout": "workspace:0.0.1",
+    "@ui/text": "workspace:0.0.1"
+  },
+  "devDependencies": {
+    "@types/react": "18.2.48",
+    "@types/react-dom": "18.2.18",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "react-intl": "6.6.2"
+  },
+  "peerDependencies": {
+    "react": "*",
+    "react-dom": "*",
+    "react-intl": "*"
+  }
+}

pages-router/fragments/sidebar/src/index.ts

@@ -0,0 +1 @@
+export * from './sidebar.component'

pages-router/fragments/sidebar/src/sidebar.component.tsx

@@ -0,0 +1,22 @@
+import React                from 'react'
+import { FormattedMessage } from 'react-intl'
+
+import { Box }              from '@ui/layout'
+import { Text }             from '@ui/text'
+
+export const Sidebar = () => (
+  <Box
+    justifyContent='center'
+    alignItems='center'
+    height='calc(100vh - 50px)'
+    width={200}
+    padding='huge'
+    backgroundColor='darkRed'
+    borderTop='boldLightGray'
+    borderRight='boldLightGray'
+  >
+    <Text>
+      <FormattedMessage id='app.sidebar-fragment.identity' defaultMessage='SIDEBAR' />
+    </Text>
+  </Box>
+)

pages-router/pages/home/locales/ru.json

@@ -0,0 +1,4 @@
+{
+  "app.home_page.content": "CONTENT",
+  "app.home_page.hello": "HELLO FROM HOME"
+}

pages-router/pages/home/package.json

@@ -3,16 +3,22 @@
   "version": "0.0.1",
   "main": "src/index.ts",
   "dependencies": {
-    "@ui/hello": "workspace:0.0.1"
+    "@app/navbar-fragment": "workspace:0.0.1",
+    "@app/sidebar-fragment": "workspace:0.0.1",
+    "@ui/hello": "workspace:0.0.1",
+    "@ui/layout": "workspace:0.0.1",
+    "@ui/text": "workspace:0.0.1"
   },
   "devDependencies": {
     "@types/react": "18.2.48",
     "@types/react-dom": "18.2.18",
     "react": "18.2.0",
-    "react-dom": "18.2.0"
+    "react-dom": "18.2.0",
+    "react-intl": "6.6.2"
   },
   "peerDependencies": {
     "react": "*",
-    "react-dom": "*"
+    "react-dom": "*",
+    "react-intl": "*"
   }
 }

pages-router/pages/home/src/home.component.tsx

@@ -1,12 +1,32 @@
-import React     from 'react'
+import React                from 'react'
+import { FormattedMessage } from 'react-intl'
+import { useIntl }          from 'react-intl'
 
-import { Hello } from '@ui/hello'
+import { Navbar }           from '@app/navbar-fragment'
+import { Sidebar }          from '@app/sidebar-fragment'
+import { Hello }            from '@ui/hello'
+import { Box }              from '@ui/layout'
+import { Row }              from '@ui/layout'
+import { Text }             from '@ui/text'
 
-const HomePage = () => (
-  <>
-    <h1>HELLO</h1>
-    <Hello />
-  </>
-)
+const HomePage = () => {
+  const { formatMessage } = useIntl()
+  return (
+    <>
+      <Navbar />
+      <Row fill>
+        <Sidebar />
+        <Box gap={20}>
+          <Hello
+            hello={formatMessage({ id: 'app.home_page.hello', defaultMessage: 'HELLO FROM HOME' })}
+          />
+          <Text>
+            <FormattedMessage id='app.home_page.content' defaultMessage='CONTENT' />
+          </Text>
+        </Box>
+      </Row>
+    </>
+  )
+}
 
 export default HomePage

ui/hello/src/hello.component.tsx

@@ -1,3 +1,5 @@
 import React from 'react'
 
-export const Hello = () => <i>HELLO</i>
+export const Hello = ({ hello }: { hello?: string }) => (
+  <i>{hello ?? 'GLOOMY HELLO WITHOUT TRANSLATION'}</i>
+)

ui/text/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@ui/text",
+  "version": "0.0.1",
+  "main": "src/index.ts",
+  "dependencies": {
+    "@atls-ui-parts/text": "0.1.1"
+  },
+  "devDependencies": {
+    "@emotion/react": "11.11.3",
+    "@emotion/styled": "11.9.3",
+    "@types/react": "18.2.48",
+    "@types/react-dom": "18.2.18",
+    "@types/styled-system": "5.1.22",
+    "csstype": "3.1.2",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "styled-system": "5.1.5"
+  },
+  "peerDependencies": {
+    "@emotion/react": "*",
+    "@emotion/styled": "*",
+    "react": "*",
+    "react-dom": "*",
+    "styled-system": "*"
+  }
+}

ui/text/src/index.ts

@@ -0,0 +1,3 @@
+'use client'
+
+export * from '@atls-ui-parts/text'