diff --git a/packages/orbit-components/transforms/__testfixtures__/translations-new.input.js b/packages/orbit-components/transforms/__testfixtures__/translations-new.input.js new file mode 100644 index 0000000000..87d888989c --- /dev/null +++ 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 ( +
+ + + + kek + + Section + + + Section + + kek + bar + drawer shown + + + + kek
}>dialog + + + + + ); +}; + +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 new file mode 100644 index 0000000000..87d888989c --- /dev/null +++ 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 ( +
+ + + + kek + + Section + + + Section + + kek + bar + drawer shown + + + + kek
}>dialog + + + + + ); +}; + +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 new file mode 100644 index 0000000000..5056fbc819 --- /dev/null +++ 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 ( +
+ }> + + + }>kek + }> + Section + + }> + Section + + }>kek + }>bar + }>drawer shown + }> + + + kek
} + labelClose={}>dialog + } + labelProgress={}> + + + + ); +}; + +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 new file mode 100644 index 0000000000..5056fbc819 --- /dev/null +++ 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 ( +
+ }> + + + }>kek + }> + Section + + }> + Section + + }>kek + }>bar + }>drawer shown + }> + + + kek
} + labelClose={}>dialog + } + labelProgress={}> + + + + ); +}; + +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 new file mode 100644 index 0000000000..bb4491a1ae --- /dev/null +++ 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 new file mode 100644 index 0000000000..a87c209821 --- /dev/null +++ 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;