Merge pull request #5 from patternfly/remove-i18n

Cleanup for OS

Author: jschuler

packages/dev/package.json

@@ -9,12 +9,18 @@
     "serve": "serve public"
   },
   "dependencies": {
-    "@patternfly/quickstarts": "1.0.0-rc.8",
+    "@patternfly/quickstarts": "1.0.0-rc.9",
     "@patternfly/react-core": "^4.101.3",
     "asciidoctor": "^2.2.1",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
-    "react-router-dom": "^5.2.0"
+    "react-router-dom": "^5.2.0",
+    "i18next": "^19.8.3",
+    "i18next-browser-languagedetector": "^6.0.1",
+    "i18next-parser": "^3.3.0",
+    "i18next-pseudo": "^2.2.0",
+    "react-i18next": "^11.7.3",
+    "showdown": "1.8.6"
   },
   "devDependencies": {
     "@types/react": "^16.8.0",

packages/dev/src/App.tsx

@@ -17,12 +17,14 @@ import Demos from "./Demos";
 import "./App.css";
 import {
   QuickStartDrawer,
-  QuickStartContext,
-  useValuesForQuickStartContext,
   useLocalStorage,
+  QuickStartContextProvider,
+  QuickStartContextValues,
+  LoadingBox
 } from "@patternfly/quickstarts";
 import { allQuickStarts as yamlQuickStarts } from "./quickstarts-data/quick-start-test-data";
 import { loadJSONQuickStarts } from "./quickstarts-data/mas-guides/quickstartLoader";
+import i18n from './i18n/i18n';
 
 type AppProps = {
   children?: React.ReactNode;
@@ -64,22 +66,6 @@ const App: React.FC<AppProps> = ({ children, showCardFooters }) => {
     load();
   }, []);
 
-  const { pathname: currentPath } = window.location;
-  const quickStartPath = "/quickstarts";
-
-  const valuesForQuickstartContext = useValuesForQuickStartContext({
-    allQuickStarts,
-    activeQuickStartID,
-    setActiveQuickStartID,
-    allQuickStartStates,
-    setAllQuickStartStates,
-    footer: {
-      show: showCardFooters,
-      showAllLink: currentPath !== quickStartPath,
-      onShowAllLinkClick: () => history.push(quickStartPath),
-    },
-  });
-
   if (!initialized) return <div>Loading</div>;
 
   const AppToolbar = (
@@ -117,16 +103,40 @@ const App: React.FC<AppProps> = ({ children, showCardFooters }) => {
 
   const AppSidebar = <PageSidebar isNavOpen nav={AppNav} />;
 
+  const { pathname: currentPath } = window.location;
+  const quickStartPath = "/quickstarts";
+
+  const resourceBundle = i18n.getResourceBundle(localStorage.getItem('bridge/language'), 'quickstart');
+
+  const valuesForQuickstartContext: QuickStartContextValues = {
+    allQuickStarts,
+    activeQuickStartID,
+    setActiveQuickStartID,
+    allQuickStartStates,
+    setAllQuickStartStates,
+    footer: {
+      show: showCardFooters,
+      showAllLink: currentPath !== quickStartPath,
+      onShowAllLinkClick: () => history.push(quickStartPath),
+    },
+    lng: localStorage.getItem('bridge/language'),
+    resourceBundle: {
+      ...resourceBundle,
+      "Start": "Let's goooo"
+    },
+    useQueryParams: false
+  };
+
   return (
-    <React.Suspense fallback={<div>Loading</div>}>
+    <React.Suspense fallback={<LoadingBox />}>
       {allQuickStartsLoaded && (
-        <QuickStartContext.Provider value={valuesForQuickstartContext}>
+        <QuickStartContextProvider value={valuesForQuickstartContext}>
           <QuickStartDrawer>
-            <Page header={AppHeader} sidebar={AppSidebar} isManagedSidebar>
+             <Page header={AppHeader} sidebar={AppSidebar} isManagedSidebar>
               {children}
-            </Page>
-          </QuickStartDrawer>
-        </QuickStartContext.Provider>
+             </Page>
+           </QuickStartDrawer>
+        </QuickStartContextProvider>
       )}
     </React.Suspense>
   );

packages/dev/src/CustomCatalog.tsx

@@ -12,31 +12,23 @@ import {
   QUICKSTART_SEARCH_FILTER_KEY,
   QUICKSTART_STATUS_FILTER_KEY,
   QuickStartCatalogFilterSearchWrapper,
-  QuickStartCatalogFilterStatusWrapper,
   QuickStartCatalogFilterCountWrapper,
   clearQuickStartFilters,
   QuickStartCatalogHeader,
   QuickStartCatalogToolbar,
   QuickStartCatalogSection,
 } from '@patternfly/quickstarts';
 import {
-  PageSection,
-  PageSectionVariants,
   TextContent,
   Text,
   Divider,
   Gallery,
   GalleryItem,
-  Toolbar,
   ToolbarContent,
 } from '@patternfly/react-core';
 
-type CustomCatalogProps = {
-  quickStarts: QuickStart[];
-};
-
-export const CustomCatalog: React.FC<CustomCatalogProps> = ({ quickStarts }) => {
-  const { activeQuickStartID, allQuickStartStates } = React.useContext<QuickStartContextValues>(
+export const CustomCatalog: React.FC = () => {
+  const { activeQuickStartID, allQuickStartStates, allQuickStarts } = React.useContext<QuickStartContextValues>(
     QuickStartContext,
   );
 
@@ -50,7 +42,7 @@ export const CustomCatalog: React.FC<CustomCatalogProps> = ({ quickStarts }) =>
   const sortFnc = (q1: QuickStart, q2: QuickStart) =>
     q1.spec.displayName.localeCompare(q2.spec.displayName);
   const initialFilteredQuickStarts = filterQuickStarts(
-    quickStarts,
+    allQuickStarts,
     initialSearchQuery,
     initialStatusFilters,
     allQuickStartStates,
@@ -60,12 +52,12 @@ export const CustomCatalog: React.FC<CustomCatalogProps> = ({ quickStarts }) =>
   );
 
   const quickStartStatusCount = React.useMemo(
-    () => getQuickStartStatusCount(allQuickStartStates, quickStarts),
-    [allQuickStartStates, quickStarts],
+    () => getQuickStartStatusCount(allQuickStartStates, allQuickStarts),
+    [allQuickStartStates, allQuickStarts],
   );
   const onSearchInputChange = (searchValue: string) => {
     const result = filterQuickStarts(
-      quickStarts,
+      allQuickStarts,
       searchValue,
       statusFilters,
       allQuickStartStates,
@@ -75,7 +67,7 @@ export const CustomCatalog: React.FC<CustomCatalogProps> = ({ quickStarts }) =>
   };
   const onStatusChange = (statusList: string[]) => {
     const result = filterQuickStarts(
-      quickStarts,
+      allQuickStarts,
       searchInputText,
       statusList,
       allQuickStartStates,
@@ -92,7 +84,7 @@ export const CustomCatalog: React.FC<CustomCatalogProps> = ({ quickStarts }) =>
           <Text component="p">Step-by-step instructions and tasks</Text>
         </TextContent>
         <Gallery className="co-quick-start-catalog__gallery" hasGutter>
-          {quickStarts
+          {allQuickStarts
             .filter(
               (quickStart) =>
                 !quickStart.spec.type || quickStart.spec.type.text !== 'Documentation',
@@ -123,7 +115,7 @@ export const CustomCatalog: React.FC<CustomCatalogProps> = ({ quickStarts }) =>
           <Text component="p">Technical information for using the service</Text>
         </TextContent>
         <Gallery className="co-quick-start-catalog__gallery" hasGutter>
-          {quickStarts
+          {allQuickStarts
             .filter((quickStart) => quickStart.spec.type?.text === 'Documentation')
             .map((quickStart) => {
               const {
@@ -148,7 +140,7 @@ export const CustomCatalog: React.FC<CustomCatalogProps> = ({ quickStarts }) =>
   const clearFilters = () => {
     clearQuickStartFilters();
     setFilteredQuickStarts(
-      quickStarts.sort((q1, q2) => q1.spec.displayName.localeCompare(q2.spec.displayName)),
+      allQuickStarts.sort((q1, q2) => q1.spec.displayName.localeCompare(q2.spec.displayName)),
     );
   };
 
@@ -169,7 +161,7 @@ export const CustomCatalog: React.FC<CustomCatalogProps> = ({ quickStarts }) =>
       <Divider component="div" />
       {filteredQuickStarts.length === 0 ? (
         <QuickStartCatalogEmptyState clearFilters={clearFilters} />
-      ) : filteredQuickStarts.length !== quickStarts.length ? (
+      ) : filteredQuickStarts.length !== allQuickStarts.length ? (
         <QuickStartCatalogSection>
           <QuickStartCatalog quickStarts={filteredQuickStarts} />
         </QuickStartCatalogSection>

packages/dev/src/Home.tsx

@@ -1,10 +1,9 @@
 import React from "react";
 import { Button, PageSection, Stack, StackItem } from "@patternfly/react-core";
 import {
-  QuickStartContext,
-  QuickStartContextValues,
-  i18n,
+  QuickStartContext
 } from "@patternfly/quickstarts";
+import i18n from './i18n/i18n';
 // import {
 //   ProcedureAsciiDocParser,
 //   getQuickStartStatus,
@@ -15,7 +14,7 @@ import {
 
 export const Home: React.FunctionComponent = () => {
   // const [inputValue, setInputValue] = React.useState("");
-  // const qsContext: QuickStartContextValues = React.useContext(QuickStartContext);
+  const { setLng, setResourceBundle } = React.useContext(QuickStartContext);
 
   // console.log(getQuickStartStatus(qsContext.allQuickStartStates, 'managing-business-central-data-sources-proc'));
   // console.log(getQuickStartStatusCount(qsContext.allQuickStartStates, qsContext.allQuickStarts));
@@ -48,8 +47,11 @@ export const Home: React.FunctionComponent = () => {
   // };
 
   const changeLanguage = (lng: string) => {
-    i18n.changeLanguage(lng)
+    i18n.changeLanguage(lng);
     localStorage.setItem('bridge/language', lng);
+    const resourceBundle = i18n.getResourceBundle(lng, 'quickstart');
+    setLng(lng);
+    setResourceBundle(resourceBundle);
   }
 
   return (

packages/module/src/i18n/datetime.ts packages/dev/src/i18n/datetime.tspackages/module/src/i18n/datetime.ts renamed to packages/dev/src/i18n/datetime.ts

@@ -6,9 +6,9 @@ import "@patternfly/quickstarts/dist/quickstarts.css";
 import React from "react";
 import ReactDOM from "react-dom";
 import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
+import './i18n/i18n';
 import App from "./App";
 import {
-  QuickStartsLoader,
   QuickStartCatalogPage,
   QuickStart,
   LoadingBox,
@@ -26,32 +26,15 @@ ReactDOM.render(
       </Route>
       <Route exact path="/quickstarts">
         <App showCardFooters={false}>
-          <QuickStartsLoader>
-            {(quickStarts: QuickStart[], loaded: boolean) =>
-              loaded ? (
-                <QuickStartCatalogPage
-                  quickStarts={quickStarts}
-                  showFilter
-                  hint="Learn how to create, import, and run applications with step-by-step instructions and tasks."
-                />
-              ) : (
-                <LoadingBox />
-              )
-            }
-          </QuickStartsLoader>
+          <QuickStartCatalogPage
+            showFilter
+            hint="Learn how to create, import, and run applications with step-by-step instructions and tasks."
+          />
         </App>
       </Route>
       <Route exact path="/custom-catalog">
         <App showCardFooters>
-          <QuickStartsLoader>
-            {(quickStarts: QuickStart[], loaded: boolean) =>
-              loaded ? (
-                <CustomCatalog quickStarts={quickStarts} />
-              ) : (
-                <LoadingBox />
-              )
-            }
-          </QuickStartsLoader>
+          <CustomCatalog />
         </App>
       </Route>
     </Switch>

packages/module/src/i18n/i18n.ts packages/dev/src/i18n/i18n.tspackages/module/src/i18n/i18n.ts renamed to packages/dev/src/i18n/i18n.ts

@@ -0,0 +1,42 @@
+{
+  "No results found": "No results found",
+  "No results match the filter criteria. Remove filters or clear all filters to show results.": "No results match the filter criteria. Remove filters or clear all filters to show results.",
+  "Clear all filters": "Clear all filters",
+  "Quick Starts": "Quick Starts",
+  "Complete ({{statusCount, number}})": "Complete ({{statusCount, number}})",
+  "In progress ({{statusCount, number}})": "In progress ({{statusCount, number}})",
+  "Not started ({{statusCount, number}})": "Not started ({{statusCount, number}})",
+  "Filter by keyword...": "Filter by keyword...",
+  "Select filter": "Select filter",
+  "Status": "Status",
+  "{{count, number}} item": "{{count, number}} item",
+  "{{count, number}} item_plural": "{{count, number}} items",
+  "Prerequisites ({{totalPrereqs}})": "Prerequisites ({{totalPrereqs}})",
+  "Prerequisites": "Prerequisites",
+  "Complete": "Complete",
+  "In progress": "In progress",
+  "Not started": "Not started",
+  "{{duration, number}} minutes": "{{duration, number}} minutes",
+  "One or more verifications did not pass during this quick start. Revisit the tasks or the help links, and then try again.": "One or more verifications did not pass during this quick start. Revisit the tasks or the help links, and then try again.",
+  "Start {{nextQSDisplayName}} quick start": "Start {{nextQSDisplayName}} quick start",
+  "Start": "Start",
+  "Continue": "Continue",
+  "Next": "Next",
+  "Close": "Close",
+  "Back": "Back",
+  "Restart": "Restart",
+  "In this quick start, you will complete {{count, number}} task": "In this quick start, you will complete {{count, number}} task",
+  "In this quick start, you will complete {{count, number}} task_plural": "In this quick start, you will complete {{count, number}} tasks",
+  "{{taskIndex, number}}": "{{taskIndex, number}}",
+  "Check your work": "Check your work",
+  "Yes": "Yes",
+  "No": "No",
+  "{{index, number}} of {{tasks, number}}": "{{index, number}} of {{tasks, number}}",
+  "Leave quick start?": "Leave quick start?",
+  "Cancel": "Cancel",
+  "Leave": "Leave",
+  "Your progress will be saved.": "Your progress will be saved.",
+  "Not available": "Not available",
+  "No {{label}} found": "No {{label}} found",
+  "Not found": "Not found"
+}

packages/dev/src/index.tsx

@@ -46,4 +46,4 @@
   "Any progress you've made will be saved.": "進行状況はすべて保存されます。",
   "In Progress": "進行中",
   "Start Tour": "ツアーを開始する"
-}
+}