chore: establish a pattern for localizing frameless components

packages/embed-components/package.json

@@ -34,24 +34,26 @@
   },
   "homepage": "https://github.com/looker-open-source/sdk-codegen/tree/master/packages/embed-components",
   "devDependencies": {
-    "redux-saga-tester": "^1.0.874",
+    "@looker/components-test-utils": "^1.5.27",
     "@looker/sdk-node": "*",
     "@testing-library/react": "^11.2.7",
-    "@looker/components-test-utils": "^1.5.27",
-    "react-redux": "^7.2.9",
+    "@testing-library/user-event": "^14.4.3",
     "@types/react-redux": "^7.1.25",
-    "@testing-library/user-event": "^14.4.3"
+    "react-redux": "^7.2.9",
+    "redux-saga-tester": "^1.0.874"
   },
   "dependencies": {
     "@looker/components": "^4.1.3",
     "@looker/embed-services": "*",
+    "@looker/i18n": "^1.0.0",
     "@looker/redux": "^0.0.1",
     "@looker/sdk": "*",
     "@looker/sdk-rtl": "*",
     "@reduxjs/toolkit": "^1.9.3",
     "@styled-icons/material-outlined": "^10.47.0",
     "react": "16.14.0",
     "react-dom": "16.14.0",
+    "react-i18next": "11.8.15",
     "styled-components": "^5.3.1",
     "typed-redux-saga": "^1.5.0"
   },

packages/embed-components/src/QuickEmbed/QuickEmbed.tsx

@@ -40,13 +40,15 @@ import {
 } from '@looker/components'
 import { Link } from '@styled-icons/material-outlined'
 import { EmbedUrl } from '@looker/embed-services'
+import { useTranslation } from '../utils'
 import { useThemesStoreState, SelectTheme, useThemeActions } from '../Theme'
 
 interface QuickEmbedProps {
   onClose: () => void
 }
 
 export const QuickEmbed = ({ onClose }: QuickEmbedProps) => {
+  const { t } = useTranslation('QuickEmbed')
   const service = new EmbedUrl()
   const [toggleValue, setToggle] = useState(false)
   const [embedUrl, setEmbedUrl] = useState<string>(service.embedUrl(false))
@@ -77,14 +79,16 @@ export const QuickEmbed = ({ onClose }: QuickEmbedProps) => {
   return (
     <Section padding="large">
       <Heading as="h3" fontWeight="medium">
-        Get embed URL
+        {t('Get embed URL')}
       </Heading>
 
       <SpaceVertical pt="medium" pb="medium" gap="xsmall">
         {service.isThemable && (
           <>
             <Span fontWeight="normal" fontSize="xsmall">
-              Apply theme to {service.contentType.toLocaleLowerCase()} URL
+              {t(`Apply theme to contentType URL`, {
+                contentType: service.contentType.toLocaleLowerCase(),
+              })}
             </Span>
             <SelectTheme />
           </>
@@ -104,14 +108,14 @@ export const QuickEmbed = ({ onClose }: QuickEmbedProps) => {
 
       <Space gap="xxsmall" fontWeight="normal" fontSize="small">
         <ToggleSwitch onChange={handleToggle} on={toggleValue} />
-        Include current params in URL
+        {t('Include current params in URL')}
       </Space>
 
       <Space mt="large" between>
         <CopyToClipboard content={embedUrl}>
-          <ButtonOutline iconBefore={<Link />}>Copy Link</ButtonOutline>
+          <ButtonOutline iconBefore={<Link />}>{t('Copy Link')}</ButtonOutline>
         </CopyToClipboard>
-        <Button onClick={onClose}>Close</Button>
+        <Button onClick={onClose}>{t('Close')}</Button>
       </Space>
     </Section>
   )

packages/embed-components/src/index.ts

@@ -26,3 +26,4 @@
 export * from './GlobalStore'
 export * from './Theme'
 export * from './QuickEmbed'
+export * from './locales'

packages/embed-components/src/locales/index.ts

@@ -0,0 +1,27 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2023 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+export * from './resources/en'
+export * from './resources/it-IT'

packages/embed-components/src/locales/resources/en.ts

@@ -0,0 +1,39 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2023 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+import { en as componentsLocale } from '@looker/components'
+import { mergeLocaleObjects } from '@looker/i18n'
+
+const resources = {
+  QuickEmbed: {
+    'Get embed URL': 'Get embed URL',
+    'Apply theme to contentType URL': 'Apply theme to {{contentType}} URL',
+    'Include current params in URL': 'Include current params in URL',
+    'Copy Link': 'Copy Link',
+    Close: 'Close',
+  },
+}
+
+export const en = mergeLocaleObjects([componentsLocale], 'en', resources)

packages/embed-components/src/locales/resources/it-IT.ts

@@ -0,0 +1,39 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2023 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+import { mergeLocaleObjects } from '@looker/i18n'
+import { itIT as componentsLocale } from '@looker/components'
+
+const resources = {
+  QuickEmbed: {
+    'Get embed URL': "Ottieni l'embed URL",
+    'Apply theme to contentType URL': 'Applica il tema a {{contentType}} URL',
+    'Include current params in URL': "Includi i parametri correnti nell'URL",
+    'Copy Link': 'Copia Link',
+    Close: 'Chiudi',
+  },
+}
+
+export const itIT = mergeLocaleObjects([componentsLocale], 'it-IT', resources)

packages/embed-components/src/utils/index.ts

@@ -0,0 +1,26 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2023 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+export * from './useTranslation'

packages/embed-components/src/utils/useTranslation.ts

@@ -0,0 +1,35 @@
+/*
+
+ MIT License
+
+ Copyright (c) 2023 Looker Data Sciences, Inc.
+
+ Permission is hereby granted, free of charge, to any person obtaining a copy
+ of this software and associated documentation files (the "Software"), to deal
+ in the Software without restriction, including without limitation the rights
+ to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ copies of the Software, and to permit persons to whom the Software is
+ furnished to do so, subject to the following conditions:
+
+ The above copyright notice and this permission notice shall be included in all
+ copies or substantial portions of the Software.
+
+ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+ FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+ AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+ LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+ OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+ SOFTWARE.
+
+ */
+import type { Namespace, UseTranslationOptions } from 'react-i18next'
+import { useTranslationBase } from '@looker/i18n'
+import { en } from '../locales'
+
+export const useTranslation = (
+  ns?: Namespace,
+  options?: UseTranslationOptions
+) => {
+  return useTranslationBase(en, ns, options)
+}