fix: update docs when ui is auto included

tolgee · Mar 29, 2022 · 0e71f62 · 0e71f62
1 parent 2055767
commit 0e71f62
Show file tree

Hide file tree

Showing 8 changed files with 118 additions and 89 deletions.
diff --git a/e2e/cypress/integration/projects/integrate.ts b/e2e/cypress/integration/projects/integrate.ts
@@ -186,7 +186,7 @@ describe('Integrate view', () => {
       },
       {
         weapon: 'JS',
-        textsToContain: ['npm install @tolgee/core @tolgee/ui --save'],
+        textsToContain: ['npm install @tolgee/core @tolgee/ui'],
       },
       {
         weapon: 'Rest',

diff --git a/webapp/src/views/projects/integrate/guides/Angular.mdx b/webapp/src/views/projects/integrate/guides/Angular.mdx
@@ -1,32 +1,37 @@
-import {GoToDocsButton} from "../component/GoToDocsButton";
+import { GoToDocsButton } from '../component/GoToDocsButton';
 
-<GoToDocsButton href="https://tolgee.io/docs/web/using_with_angular/installation" style={{ float: "right" }} />
+<GoToDocsButton
+  href="https://tolgee.io/docs/web/using_with_angular/installation"
+  style={{ float: 'right' }}
+/>
 
 To read full documentation about Tolgee for Angular, visit [docs](https://tolgee.io/docs/web/using_with_angular/installation).
 
-
 ## Install packages
 
 ```
-npm install @tolgee/ngx @tolgee/ui --save
+npm install @tolgee/ngx @tolgee/ui
 ```
 
 ## Setup environment
+
 Add Tolgee properties to your `src/environments/environment.<your env>.ts`
+
 ```typescript
 export const environment = {
   production: false,
-  tolgeeApiUrl: "{{{apiUrl}}}",
-  tolgeeApiKey: "{{{apiKey}}}"
+  tolgeeApiUrl: '{{{apiUrl}}}',
+  tolgeeApiKey: '{{{apiKey}}}',
 };
 ```
 
 ## Setup NgModule
+
 Add NgxTolgeeModule to the imports section.
+
 ```typescript
-import {NgxTolgeeModule} from "@tolgee/ngx";
-import {UI} from "@tolgee/ui";
-import {NgModule} from '@angular/core';
+import { NgxTolgeeModule } from "@tolgee/ngx";
+import { NgModule } from '@angular/core';
 import { environment } from '../environments/environment';
 
 
@@ -39,7 +44,7 @@ import { environment } from '../environments/environment';
     NgxTolgeeModule.forRoot({
       apiUrl: environment.tolgeeApiUrl,
       apiKey: environment.tolgeeApiKey,
-      ui: environment.tolgeeApiKey ? UI : undefined
+      ui: environment.tolgeeApiKey ? require('@tolgee/ui') : undefined
     }),
 ...,
 ],
@@ -48,10 +53,11 @@ import { environment } from '../environments/environment';
 export class AppModule {
 }
 ```
-Maybe you will also need to set `skipLibCheck` to `true` in your `compilerOptions` section of `tsconfig.json`.
 
+Maybe you will also need to set `skipLibCheck` to `true` in your `compilerOptions` section of `tsconfig.json`.
 
 ## Use Tolgee!
+
 ```html
 <div t key="hello_world"></div>
 ```
@@ -65,9 +71,12 @@ or
 or
 
 ```typescript
-this.translateService.get('hello_world').subscribe(r => this.helloWorld = r);
+this.translateService
+  .get('hello_world')
+  .subscribe((r) => (this.helloWorld = r));
 ```
 
 ## Prepare for production
+
 To prepare your App for production, choose a suitable option described
 [here](https://tolgee.io/docs/web/using_with_angular/angular_preparing_for_production).
diff --git a/webapp/src/views/projects/integrate/guides/Gatsby.mdx b/webapp/src/views/projects/integrate/guides/Gatsby.mdx
@@ -1,4 +1,4 @@
-import {GoToDocsButton} from '../component/GoToDocsButton';
+import { GoToDocsButton } from '../component/GoToDocsButton';
 
 <GoToDocsButton
   href="https://tolgee.io/docs/web/using_with_react/ssr/using_with_gatsby"
@@ -9,11 +9,10 @@ To read full documentation about Tolgee for Gatsby, visit [docs](https://tolgee.
 
 ## Install the packages
 
-You will need `@tolgee/react` to use `<T>` component or `useTranslate` hook. `@tolgee/ui` allows you to modify
-translations in-context.
+You will need `@tolgee/react` to use `<T>` component or `useTranslate` hook.
 
 ```
-npm install @tolgee/react @tolgee/ui --save
+npm install @tolgee/react --save
 ```
 
 ## Setup your environment
@@ -55,6 +54,7 @@ module.exports = {
 
 ```jsx
 import { useIntl } from 'gatsby-plugin-react-intl';
+import { TolgeeProvider } from '@tolgee/react';
 
 import * as translationsEn from '../i18n/en.json';
 import * as translationsCs from '../i18n/cs.json';
@@ -72,9 +72,6 @@ export const AppWrapper: React.FC = ({ children }) => {
         cs: translationsCs,
       }}
       loadingFallback={<div>Loading...</div>}
-      ui={
-        process.env.GATSBY_TOLGEE_API_KEY ? require('@tolgee/ui').UI : undefined
-      }
     >
       {children}
     </TolgeeProvider>

diff --git a/webapp/src/views/projects/integrate/guides/Js.mdx b/webapp/src/views/projects/integrate/guides/Js.mdx
@@ -1,46 +1,53 @@
-import {GoToDocsButton} from "../component/GoToDocsButton";
+import { GoToDocsButton } from '../component/GoToDocsButton';
 
-<GoToDocsButton href="https://tolgee.io/docs/web/using_with_npm/installation" style={{ float: "right" }} />
+<GoToDocsButton
+  href="https://tolgee.io/docs/web/using_with_npm/installation"
+  style={{ float: 'right' }}
+/>
 
 To use Tolgee with NPM, please visit [docs](https://tolgee.io/docs/web/using_with_npm/installation).
 
 It works fine with Webpack or Rollup projects! ;)
 
 ## Install packages
+
 ```shell-session
-npm install @tolgee/core @tolgee/ui --save
+npm install @tolgee/core @tolgee/ui
 ```
 
 ## Create Tolgee instance
+
 ```javascript
-import {Tolgee} from "@tolgee/ui";
-import {UI} from "@tolgee/ui";
+import { Tolgee } from '@tolgee/ui';
+import { UI } from '@tolgee/ui';
 
 const tg = new Tolgee({
   // ############################################################
   // ## you should never leak your API key                     ##
   // ## remove it in for production publicly accessible site   ##
   // ############################################################
-  apiKey: "{{{apiKey}}}",
-  apiUrl: "{{{apiUrl}}}",
-  ui: UI
+  apiKey: '{{{apiKey}}}',
+  apiUrl: '{{{apiUrl}}}',
+  ui: UI,
 });
 
 tg.run();
 ```
 
 ## Do stuff when Tolgee is loaded (optional)
+
 ```javascript
 tg.run().then(() => {
-    document.getElementById("loading").style.display = "none";
-})
+  document.getElementById('loading').style.display = 'none';
+});
 ```
 
 ## Use Tolgee!
+
 ```javascript
 pg.onLangChange.subscribe(() => {
-    pg.translate("tolgee_example_title", undefined, true).then(t => {
-        document.title = t; //change the document title when language changes!
-    });
+  pg.translate('tolgee_example_title', undefined, true).then((t) => {
+    document.title = t; //change the document title when language changes!
+  });
 });
 ```
diff --git a/webapp/src/views/projects/integrate/guides/Next.mdx b/webapp/src/views/projects/integrate/guides/Next.mdx
@@ -1,73 +1,81 @@
-import {GoToDocsButton} from "../component/GoToDocsButton";
+import { GoToDocsButton } from '../component/GoToDocsButton';
 
-<GoToDocsButton href="https://tolgee.io/docs/web/using_with_react/ssr/using_with_next" style={{ float: "right" }} />
+<GoToDocsButton
+  href="https://tolgee.io/docs/web/using_with_react/ssr/using_with_next"
+  style={{ float: 'right' }}
+/>
 
 To read full documentation about Tolgee for Next, visit [docs](https://tolgee.io/docs/web/using_with_react/ssr/using_with_next).
 
 ## Install the packages
 
-You will need `@tolgee/react` to use `<T>` component or `useTranslate` hook. `@tolgee/ui` allows you to modify
-translations in-context.
+You will need `@tolgee/react` to use `<T>` component or `useTranslate` hook.
 
 ```
-npm install @tolgee/react @tolgee/ui --save
+npm install @tolgee/react
 ```
 
 ## Prepare `next-config.js`
+
 Setup your locales.
+
 ```javascript
 /** @type {import('next').NextConfig} */
 module.exports = {
-    reactStrictMode: true,
-    i18n: {
-        locales: ['en', 'cs'],
-        localeDetection: true,
-        defaultLocale: "en"
-    },
-}
+  reactStrictMode: true,
+  i18n: {
+    locales: ['en', 'cs'],
+    localeDetection: true,
+    defaultLocale: 'en',
+  },
+};
 ```
 
 ## Setup your environment
+
 Add this to your `.env.development.local`.
+
 ```dotenv
 NEXT_PUBLIC_TOLGEE_API_KEY={{{apiKey}}}
 NEXT_PUBLIC_TOLGEE_API_URL={{{apiUrl}}}
 ```
 
 ## Use TolgeeProvider
+
 Wrap your main `App` component with Tolgee provider. To get `en.json` and `cs.json` export your data.
 
 ```typescript jsx
-import '../styles/globals.css'
-import type {AppProps} from 'next/app'
-import UI from "@tolgee/ui";
+import '../styles/globals.css';
+import type { AppProps } from 'next/app';
 // you can obtain these files by exporting translations from Tolgee
-import enLocale from "../i18n/en.json";
-import csLocale from "../i18n/cs.json";
-import {useRouter} from "next/router";
-import {TolgeeProvider} from "@tolgee/react";
-
-function MyApp({Component, pageProps}: AppProps) {
-const {locale: activeLocale} = useRouter()
-
-    return <TolgeeProvider
-        ui={UI}
-        forceLanguage={activeLocale}
-        apiKey={process.env.NEXT_PUBLIC_TOLGEE_API_KEY}
-        apiUrl={process.env.NEXT_PUBLIC_TOLGEE_API_URL}
-        staticData={{
-            en: enLocale,
-            cs: csLocale
-        }}
+import enLocale from '../i18n/en.json';
+import csLocale from '../i18n/cs.json';
+import { useRouter } from 'next/router';
+import { TolgeeProvider } from '@tolgee/react';
+
+function MyApp({ Component, pageProps }: AppProps) {
+  const { locale: activeLocale } = useRouter();
+
+  return (
+    <TolgeeProvider
+      forceLanguage={activeLocale}
+      apiKey={process.env.NEXT_PUBLIC_TOLGEE_API_KEY}
+      apiUrl={process.env.NEXT_PUBLIC_TOLGEE_API_URL}
+      staticData={{
+        en: enLocale,
+        cs: csLocale,
+      }}
     >
-        <Component {...pageProps} />
+      <Component {...pageProps} />
     </TolgeeProvider>
+  );
 }
 
-export default MyApp
+export default MyApp;
 ```
 
 ## Use Tolgee!
+
 ```typescript jsx
 import {T} from "@tolgee/react";
 

diff --git a/webapp/src/views/projects/integrate/guides/React.mdx b/webapp/src/views/projects/integrate/guides/React.mdx
@@ -1,45 +1,50 @@
-import {GoToDocsButton} from "../component/GoToDocsButton";
+import { GoToDocsButton } from '../component/GoToDocsButton';
 
-<GoToDocsButton href="https://tolgee.io/docs/web/using_with_react/installation" style={{ float: "right" }} />
+<GoToDocsButton
+  href="https://tolgee.io/docs/web/using_with_react/installation"
+  style={{ float: 'right' }}
+/>
 
 To read full documentation about Tolgee for React, visit [docs](https://tolgee.io/docs/web/using_with_react/installation).
 
 ## Install the packages
 
-You will need `@tolgee/react` to use `<T>` component or `useTranslate` hook. `@tolgee/ui` allows you to modify
-translations in-context.
+You will need `@tolgee/react` to use `<T>` component or `useTranslate` hook.
 
 ```
-npm install @tolgee/react @tolgee/ui --save
+npm install @tolgee/react
 ```
 
 ## Setup your environment
+
 Add this to your `.env.development.local`.
+
 ```dotenv
 REACT_APP_TOLGEE_API_URL={{{apiUrl}}}
 REACT_APP_TOLGEE_API_KEY={{{apiKey}}}
 ```
 
 ## Use TolgeeProvider
+
 Wrap your main `App` component with Tolgee provider.
+
 ```typescript jsx
 import {TolgeeProvider} from "@tolgee/react";
-import {UI} from "@tolgee/ui";
 
 ...
 
 <TolgeeProvider
     filesUrlPrefix="i18n/"
     apiUrl={process.env.REACT_APP_TOLGEE_API_URL}
     apiKey={process.env.REACT_APP_TOLGEE_API_KEY}
-    ui={process.env.REACT_APP_TOLGEE_API_KEY ? UI : undefined}
     loadingFallback={<>Loading...</>}
 >
     <App/>
 </TolgeeProvider>
 ```
 
 ## Use Tolgee!
+
 ```typescript jsx
 import {T} from "@tolgee/react";
 
@@ -63,5 +68,6 @@ t("key_to_translate")
 ```
 
 ## Prepare for production
+
 To prepare your App for production, choose a suitable option described
 [here](https://tolgee.io/docs/web/using_with_react/react_preparing_for_production).