chore: add codemod to support react-intl (#3796)

kiwicom · Apr 4, 2023 · 0f34767 · 0f34767
1 parent d9a6c65
commit 0f34767
Show file tree

Hide file tree

Showing 6 changed files with 348 additions and 0 deletions.
diff --git a/packages/orbit-components/transforms/__testfixtures__/translations-new.input.js b/packages/orbit-components/transforms/__testfixtures__/translations-new.input.js
@@ -0,0 +1,42 @@
+import React from "react";
+import Popover from "@kiwicom/orbit-components/lib/Popover";
+import Modal, { ModalSection } from "@kiwicom/orbit-components/lib/Modal";
+import Card, { CardSection } from "@kiwicom/orbit-components/lib/Card";
+import Alert from "@kiwicom/orbit-components/lib/Alert";
+import NavigationBar from "@kiwicom/orbit-components/lib/NavigationBar";
+import Drawer from "@kiwicom/orbit-components/lib/Drawer";
+import Wizard, { WizardStep } from "@kiwicom/orbit-components/lib/Wizard";
+import Tooltip from "@kiwicom/orbit-components/lib/Tooltip";
+import MobileDialogPrimitive from "@kiwicom/orbit-components/lib/primitives/MobileDialogPrimitive";
+import Breadcrumbs, { BreadcrumbsItem } from "@kiwicom/orbit-components/lib/Breadcrumbs";
+
+/* prettier-ignore */
+
+const Component = () => {
+  return (
+    <div>
+      <Popover content="kek">
+        <button>kek</button>
+      </Popover>
+      <Breadcrumbs><BreadcrumbsItem>kek</BreadcrumbsItem></Breadcrumbs>
+      <Modal>
+        <ModalSection>Section</ModalSection>
+      </Modal>
+      <Card>
+        <CardSection>Section</CardSection>
+      </Card>
+      <Alert>kek</Alert>
+      <NavigationBar>bar</NavigationBar>
+      <Drawer shown>drawer shown</Drawer>
+      <Tooltip content="bur">
+        <button>kek</button>
+      </Tooltip>
+      <MobileDialogPrimitive content={<div>kek</div>}>dialog</MobileDialogPrimitive>
+      <Wizard id="kek" completedSteps={1} activeStep={1}>
+        <WizardStep title="Step 1" />
+      </Wizard>
+    </div>
+  );
+};
+
+export default Component;
diff --git a/packages/orbit-components/transforms/__testfixtures__/translations-new.input.tsx b/packages/orbit-components/transforms/__testfixtures__/translations-new.input.tsx
@@ -0,0 +1,42 @@
+import React from "react";
+import Popover from "@kiwicom/orbit-components/lib/Popover";
+import Modal, { ModalSection } from "@kiwicom/orbit-components/lib/Modal";
+import Card, { CardSection } from "@kiwicom/orbit-components/lib/Card";
+import Alert from "@kiwicom/orbit-components/lib/Alert";
+import NavigationBar from "@kiwicom/orbit-components/lib/NavigationBar";
+import Drawer from "@kiwicom/orbit-components/lib/Drawer";
+import Wizard, { WizardStep } from "@kiwicom/orbit-components/lib/Wizard";
+import Tooltip from "@kiwicom/orbit-components/lib/Tooltip";
+import MobileDialogPrimitive from "@kiwicom/orbit-components/lib/primitives/MobileDialogPrimitive";
+import Breadcrumbs, { BreadcrumbsItem } from "@kiwicom/orbit-components/lib/Breadcrumbs";
+
+/* prettier-ignore */
+
+const Component = () => {
+  return (
+    <div>
+      <Popover content="kek">
+        <button>kek</button>
+      </Popover>
+      <Breadcrumbs><BreadcrumbsItem>kek</BreadcrumbsItem></Breadcrumbs>
+      <Modal>
+        <ModalSection>Section</ModalSection>
+      </Modal>
+      <Card>
+        <CardSection>Section</CardSection>
+      </Card>
+      <Alert>kek</Alert>
+      <NavigationBar>bar</NavigationBar>
+      <Drawer shown>drawer shown</Drawer>
+      <Tooltip content="bur">
+        <button>kek</button>
+      </Tooltip>
+      <MobileDialogPrimitive content={<div>kek</div>}>dialog</MobileDialogPrimitive>
+      <Wizard id="kek" completedSteps={1} activeStep={1}>
+        <WizardStep title="Step 1" />
+      </Wizard>
+    </div>
+  );
+};
+
+export default Component;
diff --git a/packages/orbit-components/transforms/__testfixtures__/translations-new.output.js b/packages/orbit-components/transforms/__testfixtures__/translations-new.output.js
@@ -0,0 +1,66 @@
+import React from "react";
+import { FormattedMessage } from "react-intl";
+import Popover from "@kiwicom/orbit-components/lib/Popover";
+import Modal, { ModalSection } from "@kiwicom/orbit-components/lib/Modal";
+import Card, { CardSection } from "@kiwicom/orbit-components/lib/Card";
+import Alert from "@kiwicom/orbit-components/lib/Alert";
+import NavigationBar from "@kiwicom/orbit-components/lib/NavigationBar";
+import Drawer from "@kiwicom/orbit-components/lib/Drawer";
+import Wizard, { WizardStep } from "@kiwicom/orbit-components/lib/Wizard";
+import Tooltip from "@kiwicom/orbit-components/lib/Tooltip";
+import MobileDialogPrimitive from "@kiwicom/orbit-components/lib/primitives/MobileDialogPrimitive";
+import Breadcrumbs, { BreadcrumbsItem } from "@kiwicom/orbit-components/lib/Breadcrumbs";
+
+/* prettier-ignore */
+
+const Component = () => {
+  return (
+    <div>
+      <Popover
+        content="kek"
+        labelClose={<FormattedMessage id="orbit.button_close" defaultMessage="Close" />}>
+        <button>kek</button>
+      </Popover>
+      <Breadcrumbs
+        goBackTitle={<FormattedMessage id="orbit.breadcrumbs_back" defaultMessage="Back" />}><BreadcrumbsItem>kek</BreadcrumbsItem></Breadcrumbs>
+      <Modal
+        labelClose={<FormattedMessage id="orbit.button_close" defaultMessage="Close" />}>
+        <ModalSection>Section</ModalSection>
+      </Modal>
+      <Card
+        labelClose={<FormattedMessage id="orbit.button_close" defaultMessage="Close" />}>
+        <CardSection>Section</CardSection>
+      </Card>
+      <Alert
+        labelClose={<FormattedMessage id="orbit.button_close" defaultMessage="Close" />}>kek</Alert>
+      <NavigationBar
+        openTitle={<FormattedMessage id="orbit.navigationbar_open_menu" defaultMessage="Open menu" />}>bar</NavigationBar>
+      <Drawer
+        shown
+        labelHide={<FormattedMessage id="orbit.drawer_hide" defaultMessage="Hide" />}>drawer shown</Drawer>
+      <Tooltip
+        content="bur"
+        labelClose={<FormattedMessage id="orbit.button_close" defaultMessage="Close" />}>
+        <button>kek</button>
+      </Tooltip>
+      <MobileDialogPrimitive
+        content={<div>kek</div>}
+        labelClose={<FormattedMessage id="orbit.button_close" defaultMessage="Close" />}>dialog</MobileDialogPrimitive>
+      <Wizard
+        id="kek"
+        completedSteps={1}
+        activeStep={1}
+        labelClose={<FormattedMessage id="orbit.button_close" defaultMessage="Close" />}
+        labelProgress={<FormattedMessage
+          id="orbit.wizard_progress"
+          values={{
+            number: 1,
+            total: 1
+          }} />}>
+        <WizardStep title="Step 1" />
+      </Wizard>
+    </div>
+  );
+};
+
+export default Component;
diff --git a/packages/orbit-components/transforms/__testfixtures__/translations-new.output.tsx b/packages/orbit-components/transforms/__testfixtures__/translations-new.output.tsx
@@ -0,0 +1,66 @@
+import React from "react";
+import { FormattedMessage } from "react-intl";
+import Popover from "@kiwicom/orbit-components/lib/Popover";
+import Modal, { ModalSection } from "@kiwicom/orbit-components/lib/Modal";
+import Card, { CardSection } from "@kiwicom/orbit-components/lib/Card";
+import Alert from "@kiwicom/orbit-components/lib/Alert";
+import NavigationBar from "@kiwicom/orbit-components/lib/NavigationBar";
+import Drawer from "@kiwicom/orbit-components/lib/Drawer";
+import Wizard, { WizardStep } from "@kiwicom/orbit-components/lib/Wizard";
+import Tooltip from "@kiwicom/orbit-components/lib/Tooltip";
+import MobileDialogPrimitive from "@kiwicom/orbit-components/lib/primitives/MobileDialogPrimitive";
+import Breadcrumbs, { BreadcrumbsItem } from "@kiwicom/orbit-components/lib/Breadcrumbs";
+
+/* prettier-ignore */
+
+const Component = () => {
+  return (
+    <div>
+      <Popover
+        content="kek"
+        labelClose={<FormattedMessage id="orbit.button_close" defaultMessage="Close" />}>
+        <button>kek</button>
+      </Popover>
+      <Breadcrumbs
+        goBackTitle={<FormattedMessage id="orbit.breadcrumbs_back" defaultMessage="Back" />}><BreadcrumbsItem>kek</BreadcrumbsItem></Breadcrumbs>
+      <Modal
+        labelClose={<FormattedMessage id="orbit.button_close" defaultMessage="Close" />}>
+        <ModalSection>Section</ModalSection>
+      </Modal>
+      <Card
+        labelClose={<FormattedMessage id="orbit.button_close" defaultMessage="Close" />}>
+        <CardSection>Section</CardSection>
+      </Card>
+      <Alert
+        labelClose={<FormattedMessage id="orbit.button_close" defaultMessage="Close" />}>kek</Alert>
+      <NavigationBar
+        openTitle={<FormattedMessage id="orbit.navigationbar_open_menu" defaultMessage="Open menu" />}>bar</NavigationBar>
+      <Drawer
+        shown
+        labelHide={<FormattedMessage id="orbit.drawer_hide" defaultMessage="Hide" />}>drawer shown</Drawer>
+      <Tooltip
+        content="bur"
+        labelClose={<FormattedMessage id="orbit.button_close" defaultMessage="Close" />}>
+        <button>kek</button>
+      </Tooltip>
+      <MobileDialogPrimitive
+        content={<div>kek</div>}
+        labelClose={<FormattedMessage id="orbit.button_close" defaultMessage="Close" />}>dialog</MobileDialogPrimitive>
+      <Wizard
+        id="kek"
+        completedSteps={1}
+        activeStep={1}
+        labelClose={<FormattedMessage id="orbit.button_close" defaultMessage="Close" />}
+        labelProgress={<FormattedMessage
+          id="orbit.wizard_progress"
+          values={{
+            number: 1,
+            total: 1
+          }} />}>
+        <WizardStep title="Step 1" />
+      </Wizard>
+    </div>
+  );
+};
+
+export default Component;
diff --git a/packages/orbit-components/transforms/__tests__/translations-new.test.js b/packages/orbit-components/transforms/__tests__/translations-new.test.js
@@ -0,0 +1,5 @@
+// @flow
+const { defineTest } = require("jscodeshift/dist/testUtils");
+
+defineTest(__dirname, "translations-new", null, null, { parser: "flow" });
+defineTest(__dirname, "translations-new", null, null, { parser: "tsx" });
diff --git a/packages/orbit-components/transforms/translations-new.js b/packages/orbit-components/transforms/translations-new.js
@@ -0,0 +1,127 @@
+// @noflow
+/* eslint-disable no-param-reassign */
+const COMPONENTS = [
+  "Popover",
+  "Tooltip",
+  "Modal",
+  "Drawer",
+  "Wizard",
+  "Alert",
+  "MobileDialogPrimitive",
+  "MobileDialog",
+  "NavigationBar",
+  "Breadcrumbs",
+  "Card",
+];
+
+const getPropName = name => {
+  if (name === "Drawer") return "labelHide";
+  if (name === "NavigationBar") return "openTitle";
+  if (name === "Breadcrumbs") return "goBackTitle";
+
+  return "labelClose";
+};
+
+const getTranslationKey = name => {
+  if (name === "Drawer") return "orbit.drawer_hide";
+  if (name === "NavigationBar") return "orbit.navigationbar_open_menu";
+  if (name === "Breadcrumbs") return "orbit.breadcrumbs_back";
+
+  return "orbit.button_close";
+};
+
+const getDefaultMessage = component => {
+  if (component === "Drawer") return "Hide";
+  if (component === "NavigationBar") return "Open menu";
+  if (component === "Breadcrumbs") return "Back";
+
+  return "Close";
+};
+
+function translations(fileInfo, api) {
+  const j = api.jscodeshift;
+  const root = j(fileInfo.source);
+
+  const findComponent = name => root.find(j.JSXOpeningElement, { name: { name } });
+
+  const ReactIntl = root.find(j.ImportDeclaration, {
+    source: { value: "react-intl" },
+  });
+
+  if (ReactIntl.size() === 0) {
+    root
+      .find(j.Program)
+      .get("body", 0)
+      .insertAfter(
+        j.importDeclaration(
+          [j.importSpecifier(j.identifier("FormattedMessage"))],
+          j.literal("react-intl"),
+        ),
+      );
+  }
+
+  COMPONENTS.forEach(component => {
+    findComponent(component).forEach(path => {
+      const propName = getPropName(component);
+      const translationKey = getTranslationKey(component);
+
+      path.node.attributes = [
+        ...path.node.attributes,
+        j.jsxAttribute(
+          j.jsxIdentifier(propName),
+          j.jsxExpressionContainer(
+            j.jsxElement(
+              j.jsxOpeningElement(
+                j.jsxIdentifier("FormattedMessage"),
+                [
+                  j.jsxAttribute(j.jsxIdentifier("id"), j.stringLiteral(translationKey)),
+                  j.jsxAttribute(
+                    j.jsxIdentifier("defaultMessage"),
+                    j.stringLiteral(getDefaultMessage(component)),
+                  ),
+                ],
+                true,
+              ),
+            ),
+          ),
+        ),
+      ];
+    });
+  });
+
+  root.find(j.JSXOpeningElement, { name: { name: "Wizard" } }).forEach(path => {
+    const total = path.node.attributes.find(attr => attr.name.name === "completedSteps");
+    const active = path.node.attributes.find(attr => attr.name.name === "activeStep");
+
+    path.node.attributes = [
+      ...path.node.attributes,
+      j.jsxAttribute(
+        j.jsxIdentifier("labelProgress"),
+        j.jsxExpressionContainer(
+          j.jsxElement(
+            j.jsxOpeningElement(
+              j.jsxIdentifier("FormattedMessage"),
+              [
+                j.jsxAttribute(j.jsxIdentifier("id"), j.stringLiteral("orbit.wizard_progress")),
+                j.jsxAttribute(
+                  j.jsxIdentifier("values"),
+                  j.jsxExpressionContainer(
+                    j.objectExpression([
+                      j.objectProperty(j.identifier("number"), active.value.expression),
+                      j.objectProperty(j.identifier("total"), total.value.expression),
+                    ]),
+                  ),
+                ),
+              ],
+              true,
+            ),
+          ),
+        ),
+      ),
+    ];
+  });
+
+  return root.toSource();
+}
+
+module.exports = translations;