chore: update @looker/components and @looker/design-tokens (#1169)

remove deprecated @looker/components-date
looker-open-source · Aug 30, 2022 · b01770c · b01770c
1 parent 5b4fc5b
commit b01770c
Show file tree

Hide file tree

Showing 12 changed files with 67 additions and 118 deletions.
diff --git a/jest.config.js b/jest.config.js
@@ -36,7 +36,7 @@ module.exports = {
     '@looker/api-explorer/src/utils':
       '<rootDir>/packages/api-explorer/src/utils',
     '@looker/sdk-codegen-utils/src': '<rootDir>/packages/sdk-codegen-utils/src',
-    '@looker/((?!components-test-utils|components|design|icons|chatty)(.+))$':
+    '@looker/((?!components-test-utils|components|design|icons|chatty|i18n)(.+))$':
       '<rootDir>/packages/$1/src',
     '\\.(css)$': '<rootDir>/config/jest/styleMock.js',
     '\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga)$':

diff --git a/packages/api-explorer/package.json b/packages/api-explorer/package.json
@@ -69,9 +69,8 @@
   },
   "dependencies": {
     "@looker/code-editor": "^0.1.23",
-    "@looker/components": "^2.8.1",
-    "@looker/components-date": "^2.4.1",
-    "@looker/design-tokens": "^2.7.1",
+    "@looker/components": "^3.0.8",
+    "@looker/design-tokens": "^2.7.21",
     "@looker/extension-utils": "^0.1.13",
     "@looker/icons": "^1.5.3",
     "@looker/redux": "0.0.0",

diff --git a/packages/code-editor/package.json b/packages/code-editor/package.json
@@ -49,8 +49,8 @@
     "webpack-cli": "^3.3.11"
   },
   "dependencies": {
-    "@looker/components": "^2.8.1",
-    "@looker/design-tokens": "^2.7.1",
+    "@looker/components": "^3.0.8",
+    "@looker/design-tokens": "^2.7.21",
     "prism-react-renderer": "^1.2.0",
     "react": "^16.13.1",
     "react-dom": "^16.13.1",

diff --git a/packages/extension-api-explorer/package.json b/packages/extension-api-explorer/package.json
@@ -16,7 +16,7 @@
   },
   "dependencies": {
     "@looker/api-explorer": "^0.9.36",
-    "@looker/components": "^2.8.1",
+    "@looker/components": "^3.0.8",
     "@looker/extension-sdk": "^22.10.1",
     "@looker/extension-sdk-react": "^22.10.1",
     "@looker/extension-utils": "^0.1.13",

diff --git a/packages/extension-playground/package.json b/packages/extension-playground/package.json
@@ -15,7 +15,7 @@
     "@looker/extension-sdk": "^22.4.2",
     "@looker/extension-sdk-react": "^22.4.2",
     "@looker/sdk": "^22.4.2",
-    "@looker/components": "^2.8.1",
+    "@looker/components": "^3.0.8",
     "@looker/icons": "^1.5.3",
     "@styled-icons/material": "^10.28.0",
     "@styled-icons/material-outlined": "^10.28.0",

diff --git a/packages/extension-utils/package.json b/packages/extension-utils/package.json
@@ -25,7 +25,7 @@
     "watch": "yarn lerna exec --scope @looker/extension-utils --stream 'BABEL_ENV=build babel src --root-mode upward --out-dir lib/esm --source-maps --extensions .ts,.tsx --no-comments --watch'"
   },
   "dependencies": {
-    "@looker/components": "^2.8.1",
+    "@looker/components": "^3.0.8",
     "@looker/extension-sdk": "^22.10.1",
     "@looker/extension-sdk-react": "^22.10.1",
     "@looker/sdk-rtl": "^21.3.4",

diff --git a/packages/hackathon/package.json b/packages/hackathon/package.json
@@ -35,7 +35,7 @@
   },
   "dependencies": {
     "@looker/code-editor": "^0.1.23",
-    "@looker/components": "^2.8.1",
+    "@looker/components": "^3.0.8",
     "@looker/extension-sdk": "^22.10.1",
     "@looker/extension-sdk-react": "^22.10.1",
     "@looker/extension-utils": "^0.1.13",

diff --git a/packages/run-it/package.json b/packages/run-it/package.json
@@ -52,9 +52,8 @@
   },
   "dependencies": {
     "@looker/code-editor": "^0.1.23",
-    "@looker/components": "^2.8.1",
-    "@looker/components-date": "^2.4.1",
-    "@looker/design-tokens": "^2.7.1",
+    "@looker/components": "^3.0.8",
+    "@looker/design-tokens": "^2.7.21",
     "@looker/extension-utils": "^0.1.13",
     "@looker/icons": "^1.5.3",
     "@looker/sdk": "^22.10.1",

diff --git a/packages/run-it/src/components/RequestForm/RequestForm.spec.tsx b/packages/run-it/src/components/RequestForm/RequestForm.spec.tsx
@@ -29,14 +29,12 @@ import { renderWithTheme } from '@looker/components-test-utils'
 import { act, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 
-import { formatDateString } from '@looker/components-date'
 import type { RunItInput } from '../..'
 import { runItNoSet } from '../..'
 import { RequestForm } from './RequestForm'
 
 describe('RequestForm', () => {
   const run = 'Run'
-  // const mockSdk = {} as unknown as IAPIMethods
   let requestContent = {}
   const setRequestContent = jest.fn((content) => {
     requestContent = content
@@ -47,6 +45,10 @@ describe('RequestForm', () => {
     jest.resetAllMocks()
   })
 
+  afterEach(() => {
+    requestContent = {}
+  })
+
   describe('validation messages', () => {
     test('validation errors are displayed', () => {
       const message = 'Invalid message'
@@ -178,22 +180,9 @@ describe('RequestForm', () => {
     })
   })
 
-  /** Return time that matches day picker in calendar */
-  const noon = () => {
-    const now = new Date()
-    return new Date(
-      now.getFullYear(),
-      now.getMonth(),
-      now.getDate(),
-      12,
-      0,
-      0,
-      0
-    )
-  }
-
   test('interacting with a date picker changes the request content', async () => {
     const name = 'date_item'
+    requestContent = { [name]: new Date('Aug 30, 2022') }
     renderWithTheme(
       <RequestForm
         inputs={[
@@ -215,17 +204,13 @@ describe('RequestForm', () => {
       />
     )
 
-    const button = screen.getByRole('button', { name: 'Choose' })
-    expect(button).toBeInTheDocument()
-    userEvent.click(button)
-    await waitFor(() => {
-      const today = noon()
-      const pickName = formatDateString(today, undefined, 'iii PP')
-      const cell = screen.getByRole('gridcell', {
-        name: pickName,
-      })
-      userEvent.click(cell)
-      expect(setRequestContent).toHaveBeenLastCalledWith({ [name]: today })
+    const calendar = screen.getByText('Open calendar')
+    userEvent.click(calendar)
+
+    const date = screen.getAllByText('15')[1]
+    userEvent.click(date)
+    expect(setRequestContent).toHaveBeenLastCalledWith({
+      [name]: new Date('Aug 15, 2022 00:00:00 AM'),
     })
   })
 

diff --git a/packages/run-it/src/components/RequestForm/formUtils.spec.tsx b/packages/run-it/src/components/RequestForm/formUtils.spec.tsx
@@ -211,11 +211,8 @@ describe('Simple Items', () => {
 
     test('it creates a datetime item', async () => {
       renderWithTheme(DateItem)
-      const button = screen.getByRole('button', { name: 'Choose' })
-      userEvent.click(button)
-      await waitFor(() => {
-        expect(screen.getByTestId('text-input')).toBeInTheDocument()
-      })
+      expect(screen.getByTestId('text-input')).toBeInTheDocument()
+      expect(screen.getByText('Open calendar')).toBeInTheDocument()
     })
   })
 

diff --git a/packages/run-it/src/components/RequestForm/formUtils.tsx b/packages/run-it/src/components/RequestForm/formUtils.tsx
@@ -30,17 +30,14 @@ import {
   ToggleSwitch,
   Label,
   FieldCheckbox,
-  ButtonOutline,
-  Box,
-  Popover,
   InputText,
   Tooltip,
   Icon,
+  InputDate,
   Space,
 } from '@looker/components'
 // eslint-disable-next-line no-restricted-imports
 import { Info } from '@styled-icons/material'
-import { DateFormat, InputDate } from '@looker/components-date'
 import { CodeEditor } from '@looker/code-editor'
 import type { RunItInput, RunItValues } from '../../RunIt'
 import { FormItem } from './FormItem'
@@ -59,31 +56,12 @@ const createDateItem = (
   requestContent: RunItValues
 ) => (
   <FormItem key={`${name}_fid`} id={name} label={name}>
-    <Popover
-      key={`${name}_pop`}
-      placement="bottom-start"
-      content={
-        <Box key={`${name}_popbox`} p="u3">
-          <InputDate
-            key={`datepick_${name}`}
-            defaultValue={
-              name in requestContent ? requestContent[name] : undefined
-            }
-            onChange={handleChange.bind(null, name)}
-          />
-        </Box>
-      }
-    >
-      <ButtonOutline type="button" key={`${name}_pop_button`}>
-        {name in requestContent ? (
-          <DateFormat key={`${name}_dateformat`}>
-            {name in requestContent ? requestContent[name] : undefined}
-          </DateFormat>
-        ) : (
-          'Choose'
-        )}
-      </ButtonOutline>
-    </Popover>
+    <InputDate
+      key={`datepick_${name}`}
+      data-testid={`datepick_${name}`}
+      defaultValue={name in requestContent ? requestContent[name] : undefined}
+      onChange={handleChange.bind(null, name)}
+    />
   </FormItem>
 )
 

diff --git a/yarn.lock b/yarn.lock
@@ -2301,27 +2301,13 @@
     debug "^2.2.0"
     es6-promise "^4.2.8"
 
-"@looker/components-date@^2.4.1":
-  version "2.4.1"
-  resolved "https://registry.yarnpkg.com/@looker/components-date/-/components-date-2.4.1.tgz#2b410ff60590ea6fc12fabd49cb7bb24a791cc58"
-  integrity sha512-NYWaEqpCIuFWz9Klb9IjEldTYqA6TtGc1sBicYRiHV95/TN+IqX3xn2aY4l24ngeaB/Gb4Nzq6Yfn5rz0/iLvQ==
-  dependencies:
-    "@looker/components" "^2.8.1"
-    "@looker/design-tokens" "^2.7.1"
-    "@styled-icons/material-rounded" "10.34.0"
-    date-fns "2.24.0"
-    date-fns-tz "^1.0.12"
-    i18next "20.3.1"
-    lodash "^4.17.20"
-    react-day-picker "^7.4.8"
-    react-i18next "11.8.15"
-
-"@looker/components-providers@^1.5.5":
-  version "1.5.5"
-  resolved "https://registry.yarnpkg.com/@looker/components-providers/-/components-providers-1.5.5.tgz#4086972bc2ad1e8c19f78d8c2b681bc8bdfc0c55"
-  integrity sha512-TMvgruxypeGTwnR/P7aciPKTHZac3DSASIF1s3Mf+qaLebzsp1EyW6mAAuERnvqE0AMgXeygJY3B3W1f17lqbw==
+"@looker/components-providers@^1.5.26":
+  version "1.5.26"
+  resolved "https://registry.yarnpkg.com/@looker/components-providers/-/components-providers-1.5.26.tgz#4c50fb3f92e22d348662409739311fd39c47c742"
+  integrity sha512-ELYfQp1G5AZPkgFNzPYr9Zm4hiGJFEpVWAMhV1KYZy/6eapqv5IEwheIQl/eXg4iP9aRVMDexsvhe2EsYxFiUA==
   dependencies:
-    "@looker/design-tokens" "^2.7.1"
+    "@looker/design-tokens" "^2.7.21"
+    "@looker/i18n" "^0.1.8"
     i18next "20.3.1"
     react-helmet-async "^1.0.9"
     react-i18next "11.8.15"
@@ -2332,31 +2318,34 @@
   resolved "https://registry.yarnpkg.com/@looker/components-test-utils/-/components-test-utils-1.5.26.tgz#ed3b20e260577b255fe30f5683e57b32b71dab86"
   integrity sha512-1gDeeO0mpEzEaqkfDfa9T0LYXOAr/R8gcDsptoL6HfPvwV6bVj8A9+0xBcHYfF3b/wCBE1k7Wo8W/SEuf74rww==
 
-"@looker/components@^2.8.1":
-  version "2.8.1"
-  resolved "https://registry.yarnpkg.com/@looker/components/-/components-2.8.1.tgz#caec5941243d5d38ab83cc37571c54c15f7cb178"
-  integrity sha512-egY2ojOxBvQ6snn141j4DVx1JeLXI4cTc5NgWwgE1ZbWaeotLWBem/u+ETcDQ9j+7Jobn4c1c62CI15YMNayeQ==
+"@looker/components@^3.0.8":
+  version "3.0.8"
+  resolved "https://registry.yarnpkg.com/@looker/components/-/components-3.0.8.tgz#d76e04238cf718993fb31b2d370843da13fecce3"
+  integrity sha512-83T182xWVNdgKTqeGUplDY2AulaVBClUE6Qe+d4Hj8Yi3Py4FGoyfaigA1HDFZBqtIAPqQCOi1ijp1CsGwbUbg==
   dependencies:
-    "@looker/components-providers" "^1.5.5"
-    "@looker/design-tokens" "^2.7.1"
+    "@looker/components-providers" "^1.5.26"
+    "@looker/design-tokens" "^2.7.21"
+    "@looker/i18n" "^0.1.8"
     "@popperjs/core" "^2.6.0"
     "@styled-icons/material" "10.34.0"
     "@styled-icons/material-outlined" "10.34.0"
     "@styled-icons/material-rounded" "10.34.0"
     "@styled-icons/styled-icon" "^10.6.3"
     d3-color "^2.0.0"
     d3-hsv "^0.1.0"
+    date-fns "^2.10.0"
+    date-fns-tz "^1.0.12"
     hotkeys-js "^3.8.3"
     i18next "20.3.1"
     react-hotkeys-hook "2.3.1"
     react-i18next "11.8.15"
     resize-observer-polyfill "^1.5.1"
     uuid "^8.3.2"
 
-"@looker/design-tokens@^2.7.1":
-  version "2.7.1"
-  resolved "https://registry.yarnpkg.com/@looker/design-tokens/-/design-tokens-2.7.1.tgz#3d490394e5c5e39d44b38c684ffa5b4477371869"
-  integrity sha512-4jAVG6YZfeMl2v/4haokCUNGyXBiXp94xcTzNMsMYczlY6izT+2GelqrRrwaHbEIGU/+1qfo8EsVAJRmopWdwA==
+"@looker/design-tokens@^2.7.21":
+  version "2.7.21"
+  resolved "https://registry.yarnpkg.com/@looker/design-tokens/-/design-tokens-2.7.21.tgz#42894307b3451f206f7445b4bfeaa1649081c0c0"
+  integrity sha512-Bmd0pk9Vn29INsgvhZD69xjnMs+sG2SadHwZZObpn6jC4nNJBv1jnivvrEiSQUdsbLOgLH0k2UUVIxKfQAA1mw==
   dependencies:
     "@styled-system/props" "^5.1.5"
     "@styled-system/should-forward-prop" "5.1.5"
@@ -2391,6 +2380,15 @@
     eslint-plugin-testing-library "4.11.0"
     typescript "4.4.2"
 
+"@looker/i18n@^0.1.8":
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/@looker/i18n/-/i18n-0.1.8.tgz#ce88bd7c0403b873cdfa39b8e1df5b518d9736e0"
+  integrity sha512-D01XLV0uPKrUybcMOPhbj+89NdfJfpgi7e+l0luCaQuX9fguQAmZWvFm/iK6q83KCLmX/Yne4E7JH2jVGCVP0g==
+  dependencies:
+    date-fns "2.24.0"
+    i18next "20.3.1"
+    react-i18next "11.8.15"
+
 "@looker/icons@^1.5.3":
   version "1.5.3"
   resolved "https://registry.yarnpkg.com/@looker/icons/-/icons-1.5.3.tgz#0815625b7d9b28409b4edd8714a5b93d5f17e267"
@@ -5654,19 +5652,19 @@ data-urls@^2.0.0:
     whatwg-url "^8.0.0"
 
 date-fns-tz@^1.0.12, date-fns-tz@^1.1.6:
-  version "1.1.6"
-  resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-1.1.6.tgz#93cbf354e2aeb2cd312ffa32e462c1943cf20a8e"
-  integrity sha512-nyy+URfFI3KUY7udEJozcoftju+KduaqkVfwyTIE0traBiVye09QnyWKLZK7drRr5h9B7sPJITmQnS3U6YOdQg==
+  version "1.3.6"
+  resolved "https://registry.yarnpkg.com/date-fns-tz/-/date-fns-tz-1.3.6.tgz#4195a58a2f86eda55ea69fb477f3ed8a6e2188ac"
+  integrity sha512-C8q7mErvG4INw1ZwAFmPlGjEo5Sv4udjKVbTc03zpP9cu6cp5AemFzKhz0V68LGcWEtX5mJudzzg3G04emIxLA==
 
 date-fns@2.24.0:
   version "2.24.0"
   resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.24.0.tgz#7d86dc0d93c87b76b63d213b4413337cfd1c105d"
   integrity sha512-6ujwvwgPID6zbI0o7UbURi2vlLDR9uP26+tW6Lg+Ji3w7dd0i3DOcjcClLjLPranT60SSEFBwdSyYwn/ZkPIuw==
 
-date-fns@^2.0.1, date-fns@^2.25.0:
-  version "2.25.0"
-  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.25.0.tgz#8c5c8f1d958be3809a9a03f4b742eba894fc5680"
-  integrity sha512-ovYRFnTrbGPD4nqaEqescPEv1mNwvt+UTqI3Ay9SzNtey9NZnYu6E2qCcBBgJ6/2VF1zGGygpyTDITqpQQ5e+w==
+date-fns@^2.0.1, date-fns@^2.10.0, date-fns@^2.25.0:
+  version "2.29.2"
+  resolved "https://registry.yarnpkg.com/date-fns/-/date-fns-2.29.2.tgz#0d4b3d0f3dff0f920820a070920f0d9662c51931"
+  integrity sha512-0VNbwmWJDS/G3ySwFSJA3ayhbURMTJLtwM2DTxf9CWondCnh6DTNlO9JgRSq6ibf4eD0lfMJNBxUdEAHHix+bA==
 
 dateformat@^3.0.0:
   version "3.0.3"
@@ -12252,13 +12250,6 @@ raw-body@2.4.0:
     iconv-lite "0.4.24"
     unpipe "1.0.0"
 
-react-day-picker@^7.4.8:
-  version "7.4.10"
-  resolved "https://registry.yarnpkg.com/react-day-picker/-/react-day-picker-7.4.10.tgz#d3928fa65c04379ad28c76de22aa85374a8361e1"
-  integrity sha512-/QkK75qLKdyLmv0kcVzhL7HoJPazoZXS8a6HixbVoK6vWey1Od1WRLcxfyEiUsRfccAlIlf6oKHShqY2SM82rA==
-  dependencies:
-    prop-types "^15.6.2"
-
 react-diff-viewer@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/react-diff-viewer/-/react-diff-viewer-3.1.1.tgz#21ac9c891193d05a3734bfd6bd54b107ee6d46cc"