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"
+}

package.json

@@ -21,9 +21,11 @@
   },
   "packageManager": "[email protected]",
   "linterIgnorePatterns": [
-    "**/next.config.js"
+    "**/next.config.js",
+    "temporary"
   ],
   "typecheckIgnorePatterns": [
-    "**/next-env.d.ts"
+    "**/next-env.d.ts",
+    "temporary"
   ]
 }

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",
+    "generate-locales": "generate-locales ../../fragments ../../pages --out=ru",
+    "postinstall": "run generate-locales",
     "prepack": "run build",
     "start": "node dist/src/index.cjs"
   },
@@ -15,13 +17,16 @@
     "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",
+    "@ui/locales-generator": "workspace:0.0.1",
     "@ui/theme": "workspace:0.0.1",
     "typescript": "5.2.2"
   }

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,36 @@
+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/locales/README.md

@@ -0,0 +1,54 @@
+# LOCALES-GENERATOR 0.0.1
+
+Скрипт для автоматической генерации переводов `react-inl`.
+
+Создаёт на уровне энтрипоинта `locales/[localName].json` файл, содержащий все переводы энтрипоинта на основе `id` и `defaultMessages`
+
+Для работы обязательно указывать в `formatMessage` или `FormattedMessage` уникальный `id` и текст перевода в `defaultMessages`.
+
+Пример валидного компонента:
+
+```html
+ <Hello
+   hello={formatMessage({ id: 'app.home_page.hello', defaultMessage: 'HELLO FROM HOME' })}
+ />
+ <Text>
+   <FormattedMessage id='app.home_page.content' defaultMessage='CONTENT' />
+ </Text>
+```
+
+---
+
+## Установка
+
+Устанавливаем на уровне энтрипоинта: `yarn add -D @atls-ui-generators/locales`
+
+## Запуск
+
+Для запуска необходимо добавить скрипты в `package.json` ентрипоинта.
+
+Пример скриптов:
+
+```json
+{
+  "scripts": {
+    "generate-locales": "generate-locales ../../fragments ../../pages --out=en",
+    "postinstall": "run generate-locales"
+  }
+}
+```
+
+### Входные аргументы
+
+`generate-locales` принимает следующие аргументы:
+
+1. **componentPaths** - Относительный список путей от `package.json` энтрипоинта по которым будет производится поиск переводов \*_необязательный_.
+   - Принимается неограниченное кол-во аргументов. "generate-locales path1 path2 ...pathN"
+   - Если не указать массив путей в аргументах, скрипт будет проходить по фрагментам и страницам текущего энтрипоинта
+2. **localName** - Название локали \*_необязательный_.
+   - Указывается после `-out=`
+   - Если не указывать. По умолчанию берётся локаль = ru
+
+---
+
+# Changelog

ui/locales/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@ui/locales-generator",
+  "version": "0.0.1",
+  "license": "BSD-3-Clause",
+  "main": "src/index.ts",
+  "typings": "temporary/index.d.ts",
+  "bin": {
+    "generate-locales": "temporary/generator.js"
+  },
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "yarn library build",
+    "prepack": "yarn run build",
+    "postpack": "rm -rf dist"
+  },
+  "dependencies": {
+    "@atls/config-prettier": "0.0.5",
+    "@atls/prettier-plugin": "0.0.7",
+    "@babel/standalone": "7.22.20",
+    "camelcase": "6.3.0",
+    "commander": "9.5.0",
+    "prettier": "2.8.8"
+  },
+  "devDependencies": {
+    "@types/babel__standalone": "7.1.6",
+    "@types/prettier": "2.7.3"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

ui/locales/src/generator.ts

@@ -0,0 +1,22 @@
+import { defaultPaths }     from './locales-generator.constants'
+import { mergeLocales }     from './merge-locales'
+import { processDirectory } from './process-directory'
+
+const allLocales = []
+let outputFile = 'ru'
+const argPaths: string[] = []
+
+// @ts-ignore
+process.argv.slice(2).forEach((arg) => {
+  if (!arg.startsWith('--out=')) {
+    argPaths.push(arg)
+  } else {
+    // eslint-disable-next-line prefer-destructuring
+    outputFile = arg.split('=')[1]
+  }
+})
+const paths = argPaths.length ? argPaths : defaultPaths
+
+paths.forEach((path) => processDirectory(path, 'locales', allLocales, outputFile))
+
+mergeLocales(allLocales, `./locales/${outputFile}.json`)

ui/locales/src/index.ts

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

ui/locales/src/locales-generator.constants.ts

@@ -0,0 +1 @@
+export const defaultPaths = ['../../fragments', '../../pages']

ui/locales/src/merge-locales/index.ts

@@ -0,0 +1 @@
+export * from './merge-locales'

ui/locales/src/merge-locales/merge-locales.interfaces.ts

@@ -0,0 +1 @@
+export type MergeLocalesType = (files: string[], outputPath: string) => void