From 1ec7c30a4b63e3807b6362d1cb0db373bd7cfe0d Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Thu, 23 Mar 2023 12:05:23 +0100 Subject: [PATCH 01/37] feat(unit-test): introduce unit test on website redesign branch (#5178 feat(unit-test): introduce unit test --- .eslintignore | 1 + .prettierignore | 1 + jest.config.mjs | 2 -- package-lock.json | 2 +- package.json | 2 +- 5 files changed, 4 insertions(+), 4 deletions(-) diff --git a/.eslintignore b/.eslintignore index db1be353cbff8..079774e647f6d 100644 --- a/.eslintignore +++ b/.eslintignore @@ -8,6 +8,7 @@ public/static/documents public/static/legacy # We don't want to lint/prettify the Coverage Results +tests coverage # MDX Plugin enforces Prettier formatting which should diff --git a/.prettierignore b/.prettierignore index 3fa9258b4d5ad..5b6bc91cdfafc 100644 --- a/.prettierignore +++ b/.prettierignore @@ -8,6 +8,7 @@ public/static/documents public/static/legacy # We don't want to lint/prettify the Coverage Results +tests coverage # MDX Plugin enforces Prettier formatting which should diff --git a/jest.config.mjs b/jest.config.mjs index 2c917d37c20ce..fbefd26e4c2e1 100644 --- a/jest.config.mjs +++ b/jest.config.mjs @@ -7,8 +7,6 @@ const createJestConfig = nextJest({ /** @type {import('jest').Config} */ const customJestConfig = { setupFilesAfterEnv: ['/jest.setup.js'], - moduleDirectories: ['node_modules', '/'], - testEnvironment: 'jest-environment-jsdom', }; export default createJestConfig(customJestConfig); diff --git a/package-lock.json b/package-lock.json index bfecbc494e178..3f65acc7b4da2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25599,4 +25599,4 @@ } } } -} +} \ No newline at end of file diff --git a/package.json b/package.json index 3df4b9f8a5579..19cd2171d93e5 100644 --- a/package.json +++ b/package.json @@ -95,4 +95,4 @@ "stylelint-selector-bem-pattern": "^2.1.1", "typescript": "^4.9.5" } -} +} \ No newline at end of file From 1df6c68a3de24feab2354d487c2d2d8e81770af8 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Wed, 5 Apr 2023 15:39:47 +0200 Subject: [PATCH 02/37] feat(shellbox): introduce shellBox --- .storybook/main.js | 1 + .../__snapshots__/index.test.tsx.snap | 25 ++ .../ShellBox/__tests__/index.test.tsx | 43 ++ .../ShellBox/index.module.scss | 75 ++++ .../ShellBox/index.stories.tsx | 12 + .../CommonComponents/ShellBox/index.tsx | 31 ++ components/CommonComponents/index.ts | 1 + hooks/__test__/useCopyToClipboard.test.tsx | 78 ++++ hooks/useCopyToClipboard.ts | 31 ++ i18n/locales/ar.json | 3 +- i18n/locales/ca.json | 2 +- i18n/locales/de.json | 3 +- i18n/locales/en.json | 3 +- i18n/locales/es.json | 3 +- i18n/locales/fa.json | 3 +- i18n/locales/fr.json | 3 +- i18n/locales/gl.json | 3 +- i18n/locales/id.json | 3 +- i18n/locales/it.json | 3 +- i18n/locales/ja.json | 3 +- i18n/locales/ka.json | 3 +- i18n/locales/ko.json | 3 +- i18n/locales/nl.json | 3 +- i18n/locales/pt-br.json | 3 +- i18n/locales/ro.json | 3 +- i18n/locales/ru.json | 3 +- i18n/locales/tr.json | 3 +- i18n/locales/uk.json | 3 +- i18n/locales/zh-cn.json | 3 +- i18n/locales/zh-tw.json | 3 +- package-lock.json | 382 ++++++++++++++++++ package.json | 1 + 32 files changed, 721 insertions(+), 21 deletions(-) create mode 100644 components/CommonComponents/ShellBox/__tests__/__snapshots__/index.test.tsx.snap create mode 100644 components/CommonComponents/ShellBox/__tests__/index.test.tsx create mode 100644 components/CommonComponents/ShellBox/index.module.scss create mode 100644 components/CommonComponents/ShellBox/index.stories.tsx create mode 100644 components/CommonComponents/ShellBox/index.tsx create mode 100644 components/CommonComponents/index.ts create mode 100644 hooks/__test__/useCopyToClipboard.test.tsx create mode 100644 hooks/useCopyToClipboard.ts diff --git a/.storybook/main.js b/.storybook/main.js index b5824b4193286..c034e818c4066 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -5,6 +5,7 @@ const config = { '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', + 'storybook-addon-sass-postcss', ], framework: { name: '@storybook/nextjs', diff --git a/components/CommonComponents/ShellBox/__tests__/__snapshots__/index.test.tsx.snap b/components/CommonComponents/ShellBox/__tests__/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000000000..86ea7deddb88c --- /dev/null +++ b/components/CommonComponents/ShellBox/__tests__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,25 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ShellBox component renders correctly 1`] = ` +
+ 
+    

+      
+        SHELL
+      
+      
+    

+    
+      mock-children-code
+    
+
+
+`; diff --git a/components/CommonComponents/ShellBox/__tests__/index.test.tsx b/components/CommonComponents/ShellBox/__tests__/index.test.tsx new file mode 100644 index 0000000000000..6fa943a1749b0 --- /dev/null +++ b/components/CommonComponents/ShellBox/__tests__/index.test.tsx @@ -0,0 +1,43 @@ +import React from 'react'; +import userEvent from '@testing-library/user-event'; +import { render, screen } from '@testing-library/react'; + +import ShellBox from '../index'; + +Object.assign(navigator, { + clipboard: { + writeText: jest.fn(), + }, +}); + +const navigatorClipboardSpy = jest.spyOn(navigator.clipboard, 'writeText'); + +afterEach(() => { + jest.clearAllMocks(); +}); + +describe('ShellBox component', (): void => { + it('renders correctly', (): void => { + const textToCopy = 'text to be copy'; + const { container } = render( + mock-children-code + ); + expect(container).toMatchSnapshot(); + }); + + it('renders correctly', async () => { + const textToCopy = 'text to be copy'; + + render(mock-children-code); + + navigatorClipboardSpy.mockImplementationOnce(() => Promise.resolve()); + + const buttonElement = screen.getByText('copy'); + userEvent.click(buttonElement); + + await screen.findByText('copied'); + + expect(navigatorClipboardSpy).toHaveBeenCalledTimes(1); + expect(navigatorClipboardSpy).toHaveBeenCalledWith(textToCopy); + }); +}); diff --git a/components/CommonComponents/ShellBox/index.module.scss b/components/CommonComponents/ShellBox/index.module.scss new file mode 100644 index 0000000000000..c132fec530773 --- /dev/null +++ b/components/CommonComponents/ShellBox/index.module.scss @@ -0,0 +1,75 @@ +.shell-box { + background-color: var(--black10); + border-radius: 0.4rem; + box-sizing: border-box; + display: flex; + flex-direction: column; + font-family: var(--mono); + padding: 0 0 var(--space-48) var(--space-16); + position: relative; + + code { + color: var(--pink5); + font-family: inherit; + line-height: 30px; + overflow-x: hidden; + position: absolute; + top: 30px; + width: calc(100% - 20px); + + &:hover { + overflow-x: auto; + } + + &::-webkit-scrollbar { + height: 0.5em; + } + + &::-webkit-scrollbar, + &::-webkit-scrollbar-thumb { + border-radius: 4px; + overflow: visible; + } + + &::-webkit-scrollbar-thumb { + background: rgba(0, 0, 0, 0.2); + } + + > span.function { + color: var(--warning5); + } + } + + .top { + display: inherit; + flex-direction: row; + justify-content: space-between; + margin-bottom: var(--space-08); + + span, + button { + align-items: center; + display: inherit; + font-size: var(--font-size-code); + height: 23px; + justify-content: center; + width: 86px; + } + + span { + background-color: var(--black3); + border-radius: 0 0 0.3rem 0.3rem; + color: var(--black9); + margin-left: 1.6rem; + } + + button { + background-color: var(--brand); + border-radius: 0 0.3rem 0.3rem 0.3rem; + border-width: 0; + i { + padding: 0; + } + } + } +} diff --git a/components/CommonComponents/ShellBox/index.stories.tsx b/components/CommonComponents/ShellBox/index.stories.tsx new file mode 100644 index 0000000000000..0038ff44c6406 --- /dev/null +++ b/components/CommonComponents/ShellBox/index.stories.tsx @@ -0,0 +1,12 @@ +import ShellBox from '.'; + +export default { + title: 'CommonComponents/ShellBox', + component: ShellBox, +}; + +export const Default = () => ( + + echo ’Hello World’ + +); diff --git a/components/CommonComponents/ShellBox/index.tsx b/components/CommonComponents/ShellBox/index.tsx new file mode 100644 index 0000000000000..c34b8d248cbc6 --- /dev/null +++ b/components/CommonComponents/ShellBox/index.tsx @@ -0,0 +1,31 @@ +import React from 'react'; +import { FormattedMessage } from 'react-intl'; +import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard'; +import styles from './index.module.scss'; + +interface Props { + textToCopy: string; +} + +const ShellBox = ({ children, textToCopy }: React.PropsWithChildren) => { + const [copied, copyText] = useCopyToClipboard(); + + const handleCopyCode = async (event: React.MouseEvent) => { + event.preventDefault(); + copyText(textToCopy); + }; + + return ( + 
+      

+        SHELL
+        
+      

+      {children}
+
+ ); +}; + +export default ShellBox; diff --git a/components/CommonComponents/index.ts b/components/CommonComponents/index.ts new file mode 100644 index 0000000000000..d49eb3b30e135 --- /dev/null +++ b/components/CommonComponents/index.ts @@ -0,0 +1 @@ +export { default as ShellBox } from './ShellBox'; diff --git a/hooks/__test__/useCopyToClipboard.test.tsx b/hooks/__test__/useCopyToClipboard.test.tsx new file mode 100644 index 0000000000000..efbc8a9b1180d --- /dev/null +++ b/hooks/__test__/useCopyToClipboard.test.tsx @@ -0,0 +1,78 @@ +import React from 'react'; +import { render, fireEvent, screen, waitFor } from '@testing-library/react'; +import { FormattedMessage } from 'react-intl'; +import { useCopyToClipboard } from '../useCopyToClipboard'; + +describe('useCopyToClipboard', () => { + const HookRenderer = ({ text }: { text: string }) => { + const [copied, copyText] = useCopyToClipboard(); + + return ( + + ); + }; + + it('should have `copy` text when failed', async () => { + const navigatorClipboardWriteTextSpy = jest + .fn() + .mockImplementation(() => Promise.reject()); + + Object.defineProperty(window.navigator, 'clipboard', { + writable: true, + value: { + writeText: navigatorClipboardWriteTextSpy, + }, + }); + + render(); + const button = screen.getByRole('button'); + fireEvent.click(button); + expect(button).toHaveTextContent('copy'); + }); + + it('should change to `copied` when copy succeeded', async () => { + jest.useFakeTimers(); + const navigatorClipboardWriteTextSpy = jest + .fn() + .mockImplementation(() => Promise.resolve()); + + Object.defineProperty(window.navigator, 'clipboard', { + writable: true, + value: { + writeText: navigatorClipboardWriteTextSpy, + }, + }); + + render(); + const button = screen.getByRole('button'); + fireEvent.click(button); + await waitFor(() => { + expect(button).toHaveTextContent('copied'); + }); + jest.advanceTimersByTime(3000); + await waitFor(() => { + expect(button).toHaveTextContent('copy'); + }); + }); + + it('should call clipboard API with `test` once', () => { + const navigatorClipboardWriteTextSpy = jest + .fn() + .mockImplementation(() => Promise.resolve()); + + Object.defineProperty(window.navigator, 'clipboard', { + writable: true, + value: { + writeText: navigatorClipboardWriteTextSpy, + }, + }); + + render(); + const button = screen.getByRole('button'); + fireEvent.click(button); + expect(navigatorClipboardWriteTextSpy).toHaveBeenCalledTimes(1); + expect(navigatorClipboardWriteTextSpy).toHaveBeenCalledWith('test'); + }); +}); diff --git a/hooks/useCopyToClipboard.ts b/hooks/useCopyToClipboard.ts new file mode 100644 index 0000000000000..0d44bb5daadd2 --- /dev/null +++ b/hooks/useCopyToClipboard.ts @@ -0,0 +1,31 @@ +import { useEffect, useState } from 'react'; + +const copyToClipboard = (value: string) => { + if (typeof window === 'undefined') { + return Promise.resolve(false); + } + + return navigator.clipboard + .writeText(value) + .then(() => true) + .catch(() => false); +}; + +// eslint-disable-next-line no-unused-vars +export const useCopyToClipboard = (): [boolean, (text: string) => void] => { + const [copied, setCopied] = useState(false); + + const copyText = (text: string) => copyToClipboard(text).then(setCopied); + + useEffect(() => { + if (!copied) { + return undefined; + } + + const timerId = setTimeout(() => setCopied(false), 3000); + + return () => clearTimeout(timerId); + }, [copied]); + + return [copied, copyText]; +}; diff --git a/i18n/locales/ar.json b/i18n/locales/ar.json index 6c019f198cab0..a02c3b38f2e1c 100644 --- a/i18n/locales/ar.json +++ b/i18n/locales/ar.json @@ -35,5 +35,6 @@ "components.pagination.next": "التالي | ", "components.pagination.previous": "السابق", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}" + "layouts.blogIndex.currentYear": "News from {year}", + "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" } diff --git a/i18n/locales/ca.json b/i18n/locales/ca.json index c1c574cedb3c3..0af333669c6f5 100644 --- a/i18n/locales/ca.json +++ b/i18n/locales/ca.json @@ -36,4 +36,4 @@ "components.pagination.previous": "Anterior", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", "layouts.blogIndex.currentYear": "News from {year}" -} +} \ No newline at end of file diff --git a/i18n/locales/de.json b/i18n/locales/de.json index 8694496e07c5f..3c92d8a252423 100644 --- a/i18n/locales/de.json +++ b/i18n/locales/de.json @@ -35,5 +35,6 @@ "components.pagination.next": "Neuere | ", "components.pagination.previous": "Ältere", "layouts.blogPost.author.byLine": "{author, select, null {} other {Von {author}, }}", - "layouts.blogIndex.currentYear": "Neuigkeiten von {year}" + "layouts.blogIndex.currentYear": "Neuigkeiten von {year}", + "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" } diff --git a/i18n/locales/en.json b/i18n/locales/en.json index d498fe72d70f8..df6f62faace6f 100644 --- a/i18n/locales/en.json +++ b/i18n/locales/en.json @@ -36,5 +36,6 @@ "components.pagination.previous": "Older", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", "layouts.blogIndex.currentYear": "News from {year}", - "components.common.banner.button.text": "Read More" + "components.common.banner.button.text": "Read More", + "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" } diff --git a/i18n/locales/es.json b/i18n/locales/es.json index 261a095549676..a21bfdcbd6c25 100644 --- a/i18n/locales/es.json +++ b/i18n/locales/es.json @@ -35,5 +35,6 @@ "components.pagination.next": "Siguiente | ", "components.pagination.previous": "Anterior", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}" + "layouts.blogIndex.currentYear": "News from {year}", + "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" } diff --git a/i18n/locales/fa.json b/i18n/locales/fa.json index c4ea7b173e3ed..b558d530e35b3 100644 --- a/i18n/locales/fa.json +++ b/i18n/locales/fa.json @@ -35,5 +35,6 @@ "components.pagination.next": "بعدی | ", "components.pagination.previous": "قبلی", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}" + "layouts.blogIndex.currentYear": "News from {year}", + "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" } diff --git a/i18n/locales/fr.json b/i18n/locales/fr.json index 4dd29b8c21700..9d123be5acf87 100644 --- a/i18n/locales/fr.json +++ b/i18n/locales/fr.json @@ -35,5 +35,6 @@ "components.pagination.next": "Plus récent ", "components.pagination.previous": "Plus anciens", "layouts.blogPost.author.byLine": "{author, select, null {} other {Par {author}, }}", - "layouts.blogIndex.currentYear": "Actualités de {year}" + "layouts.blogIndex.currentYear": "Actualités de {year}", + "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" } diff --git a/i18n/locales/gl.json b/i18n/locales/gl.json index 90589c897c616..bcd80157b4e91 100644 --- a/i18n/locales/gl.json +++ b/i18n/locales/gl.json @@ -35,5 +35,6 @@ "components.pagination.next": "Seguinte | ", "components.pagination.previous": "Anterior", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}" + "layouts.blogIndex.currentYear": "News from {year}", + "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" } diff --git a/i18n/locales/id.json b/i18n/locales/id.json index 4a33c2578583d..ab6c81f827546 100644 --- a/i18n/locales/id.json +++ b/i18n/locales/id.json @@ -35,5 +35,6 @@ "components.pagination.next": "Terbaru | ", "components.pagination.previous": "Lama", "layouts.blogPost.author.byLine": "{author, select, null {} other {Oleh {author}, }}", - "layouts.blogIndex.currentYear": "Berita dari {year}" + "layouts.blogIndex.currentYear": "Berita dari {year}", + "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" } diff --git a/i18n/locales/it.json b/i18n/locales/it.json index 52620965c7a69..18886c9f9cbf0 100644 --- a/i18n/locales/it.json +++ b/i18n/locales/it.json @@ -35,5 +35,6 @@ "components.pagination.next": "Successiva | ", "components.pagination.previous": "Precedente", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}" + "layouts.blogIndex.currentYear": "News from {year}", + "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" } diff --git a/i18n/locales/ja.json b/i18n/locales/ja.json index 5f8f1ba9793ae..76ee4211c0517 100644 --- a/i18n/locales/ja.json +++ b/i18n/locales/ja.json @@ -35,5 +35,6 @@ "components.pagination.next": "次 | ", "components.pagination.previous": "前", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}" + "layouts.blogIndex.currentYear": "News from {year}", + "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" } diff --git a/i18n/locales/ka.json b/i18n/locales/ka.json index e1b1797b00644..862f9feaae4a5 100644 --- a/i18n/locales/ka.json +++ b/i18n/locales/ka.json @@ -35,5 +35,6 @@ "components.pagination.next": "შემდეგი | ", "components.pagination.previous": "წინა", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}" + "layouts.blogIndex.currentYear": "News from {year}", + "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" } diff --git a/i18n/locales/ko.json b/i18n/locales/ko.json index a582789464260..0998124a36fac 100644 --- a/i18n/locales/ko.json +++ b/i18n/locales/ko.json @@ -35,5 +35,6 @@ "components.pagination.next": "다음 | ", "components.pagination.previous": "이전", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}" + "layouts.blogIndex.currentYear": "News from {year}", + "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" } diff --git a/i18n/locales/nl.json b/i18n/locales/nl.json index bf2f17011d92e..3832029a6b074 100644 --- a/i18n/locales/nl.json +++ b/i18n/locales/nl.json @@ -35,5 +35,6 @@ "components.pagination.next": "Volgende | ", "components.pagination.previous": "Vorige", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}" + "layouts.blogIndex.currentYear": "News from {year}", + "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" } diff --git a/i18n/locales/pt-br.json b/i18n/locales/pt-br.json index 1475f76f1aea4..a39028b31df9c 100644 --- a/i18n/locales/pt-br.json +++ b/i18n/locales/pt-br.json @@ -35,5 +35,6 @@ "components.pagination.next": "Próximo | ", "components.pagination.previous": "Anterior", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}" + "layouts.blogIndex.currentYear": "News from {year}", + "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" } diff --git a/i18n/locales/ro.json b/i18n/locales/ro.json index 0f671085c8d58..8bfa4b62ee682 100644 --- a/i18n/locales/ro.json +++ b/i18n/locales/ro.json @@ -35,5 +35,6 @@ "components.pagination.next": "Newer | ", "components.pagination.previous": "Older", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}" + "layouts.blogIndex.currentYear": "News from {year}", + "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" } diff --git a/i18n/locales/ru.json b/i18n/locales/ru.json index 558d177412467..59180b45f9cd8 100644 --- a/i18n/locales/ru.json +++ b/i18n/locales/ru.json @@ -35,5 +35,6 @@ "components.pagination.next": "Следующий | ", "components.pagination.previous": "Предыдущий", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}" + "layouts.blogIndex.currentYear": "News from {year}", + "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" } diff --git a/i18n/locales/tr.json b/i18n/locales/tr.json index 81994747bc8b6..2ba0d254e886c 100644 --- a/i18n/locales/tr.json +++ b/i18n/locales/tr.json @@ -35,5 +35,6 @@ "components.pagination.next": "Daha Yeni | ", "components.pagination.previous": "Daha Eski", "layouts.blogPost.author.byLine": "{author, select, null {} other {{author} tarafından }}", - "layouts.blogIndex.currentYear": "{year} yılından haberler" + "layouts.blogIndex.currentYear": "{year} yılından haberler", + "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" } diff --git a/i18n/locales/uk.json b/i18n/locales/uk.json index ca1f69103c700..89005240d28a6 100644 --- a/i18n/locales/uk.json +++ b/i18n/locales/uk.json @@ -35,5 +35,6 @@ "components.pagination.next": "Далі | ", "components.pagination.previous": "Попередній", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}" + "layouts.blogIndex.currentYear": "News from {year}", + "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" } diff --git a/i18n/locales/zh-cn.json b/i18n/locales/zh-cn.json index a413729917e3e..56e5f398d4240 100644 --- a/i18n/locales/zh-cn.json +++ b/i18n/locales/zh-cn.json @@ -35,5 +35,6 @@ "components.pagination.next": "较新的新闻事件 | ", "components.pagination.previous": "更早的新闻事件", "layouts.blogPost.author.byLine": "{author, select, null {} other {由 {author} }}", - "layouts.blogIndex.currentYear": "{year} 年的所有新闻事件" + "layouts.blogIndex.currentYear": "{year} 年的所有新闻事件", + "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" } diff --git a/i18n/locales/zh-tw.json b/i18n/locales/zh-tw.json index cc5632a00f516..53a5a682e6515 100644 --- a/i18n/locales/zh-tw.json +++ b/i18n/locales/zh-tw.json @@ -35,5 +35,6 @@ "components.pagination.next": "下一個 | ", "components.pagination.previous": "上一個", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}" + "layouts.blogIndex.currentYear": "News from {year}", + "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" } diff --git a/package-lock.json b/package-lock.json index 3f65acc7b4da2..404463f66cfde 100644 --- a/package-lock.json +++ b/package-lock.json @@ -64,6 +64,7 @@ "remark-preset-prettier": "^2.0.1", "sharp": "^0.32.0", "storybook": "^7.0.0-rc.8", + "storybook-addon-sass-postcss": "^0.1.3", "stylelint": "^15.3.0", "stylelint-config-recommended-scss": "^9.0.1", "stylelint-order": "^6.0.3", @@ -9105,6 +9106,17 @@ "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==", "dev": true }, + "node_modules/core-js": { + "version": "3.30.0", + "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.30.0.tgz", + "integrity": "sha512-hQotSSARoNh1mYPi9O2YaWeiq/cEB95kOrFb4NCrO4RIFt1qqNpKsaE+vy/L3oiqvND5cThqXzUU3r9F7Efztg==", + "dev": true, + "hasInstallScript": true, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/core-js" + } + }, "node_modules/core-js-compat": { "version": "3.30.1", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.30.1.tgz", @@ -22845,6 +22857,376 @@ "url": "https://opencollective.com/storybook" } }, + "node_modules/storybook-addon-sass-postcss": { + "version": "0.1.3", + "resolved": "https://registry.npmjs.org/storybook-addon-sass-postcss/-/storybook-addon-sass-postcss-0.1.3.tgz", + "integrity": "sha512-Jwi7KSx661hrFGO4q3jvMuvgObL8UdBYtvnKzXovBWyZoKsaji+sXKm6IpqGwy44R0To4dmobzZoW9q9rW3sWQ==", + "dev": true, + "dependencies": { + "@storybook/node-logger": "^6.1.14", + "css-loader": "^3.6.0", + "postcss": "^7.0.35", + "postcss-loader": "^4.2.0", + "sass": "^1.43.4", + "sass-loader": "^10.2.0", + "style-loader": "^1.3.0" + }, + "engines": { + "node": ">=10", + "yarn": "^1.17.0" + } + }, + "node_modules/storybook-addon-sass-postcss/node_modules/@storybook/node-logger": { + "version": "6.5.16", + "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.5.16.tgz", + "integrity": "sha512-YjhBKrclQtjhqFNSO+BZK+RXOx6EQypAELJKoLFaawg331e8VUfvUuRCNB3fcEWp8G9oH13PQQte0OTjLyyOYg==", + "dev": true, + "dependencies": { + "@types/npmlog": "^4.1.2", + "chalk": "^4.1.0", + "core-js": "^3.8.2", + "npmlog": "^5.0.1", + "pretty-hrtime": "^1.0.3" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/storybook" + } + }, + "node_modules/storybook-addon-sass-postcss/node_modules/css-loader": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.6.0.tgz", + "integrity": "sha512-M5lSukoWi1If8dhQAUCvj4H8vUt3vOnwbQBH9DdTm/s4Ym2B/3dPMtYZeJmq7Q3S3Pa+I94DcZ7pc9bP14cWIQ==", + "dev": true, + "dependencies": { + "camelcase": "^5.3.1", + "cssesc": "^3.0.0", + "icss-utils": "^4.1.1", + "loader-utils": "^1.2.3", + "normalize-path": "^3.0.0", + "postcss": "^7.0.32", + "postcss-modules-extract-imports": "^2.0.0", + "postcss-modules-local-by-default": "^3.0.2", + "postcss-modules-scope": "^2.2.0", + "postcss-modules-values": "^3.0.0", + "postcss-value-parser": "^4.1.0", + "schema-utils": "^2.7.0", + "semver": "^6.3.0" + }, + "engines": { + "node": ">= 8.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^4.0.0 || ^5.0.0" + } + }, + "node_modules/storybook-addon-sass-postcss/node_modules/css-loader/node_modules/schema-utils": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz", + "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==", + "dev": true, + "dependencies": { + "@types/json-schema": "^7.0.5", + "ajv": "^6.12.4", + "ajv-keywords": "^3.5.2" + }, + "engines": { + "node": ">= 8.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, + "node_modules/storybook-addon-sass-postcss/node_modules/css-loader/node_modules/semver": { + "version": "6.3.0", + "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", + "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", + "dev": true, + "bin": { + "semver": "bin/semver.js" + } + }, + "node_modules/storybook-addon-sass-postcss/node_modules/icss-utils": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-4.1.1.tgz", + "integrity": "sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==", + "dev": true, + "dependencies": { + "postcss": "^7.0.14" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/storybook-addon-sass-postcss/node_modules/loader-utils": { + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz", + "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==", + "dev": true, + "dependencies": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^1.0.1" + }, + "engines": { + "node": ">=4.0.0" + } + }, + "node_modules/storybook-addon-sass-postcss/node_modules/picocolors": { + "version": "0.2.1", + "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", + "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", + "dev": true + }, + "node_modules/storybook-addon-sass-postcss/node_modules/postcss": { + "version": "7.0.39", + "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", + "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", + "dev": true, + "dependencies": { + "picocolors": "^0.2.1", + "source-map": "^0.6.1" + }, + "engines": { + "node": ">=6.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/postcss/" + } + }, + "node_modules/storybook-addon-sass-postcss/node_modules/postcss-loader": { + "version": "4.3.0", + "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-4.3.0.tgz", + "integrity": "sha512-M/dSoIiNDOo8Rk0mUqoj4kpGq91gcxCfb9PoyZVdZ76/AuhxylHDYZblNE8o+EQ9AMSASeMFEKxZf5aU6wlx1Q==", + "dev": true, + "dependencies": { + "cosmiconfig": "^7.0.0", + "klona": "^2.0.4", + "loader-utils": "^2.0.0", + "schema-utils": "^3.0.0", + "semver": "^7.3.4" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "postcss": "^7.0.0 || ^8.0.1", + "webpack": "^4.0.0 || ^5.0.0" + } + }, + "node_modules/storybook-addon-sass-postcss/node_modules/postcss-loader/node_modules/json5": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", + "dev": true, + "bin": { + "json5": "lib/cli.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/storybook-addon-sass-postcss/node_modules/postcss-loader/node_modules/loader-utils": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz", + "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==", + "dev": true, + "dependencies": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + }, + "engines": { + "node": ">=8.9.0" + } + }, + "node_modules/storybook-addon-sass-postcss/node_modules/postcss-modules-extract-imports": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz", + "integrity": "sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==", + "dev": true, + "dependencies": { + "postcss": "^7.0.5" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/storybook-addon-sass-postcss/node_modules/postcss-modules-local-by-default": { + "version": "3.0.3", + "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.3.tgz", + "integrity": "sha512-e3xDq+LotiGesympRlKNgaJ0PCzoUIdpH0dj47iWAui/kyTgh3CiAr1qP54uodmJhl6p9rN6BoNcdEDVJx9RDw==", + "dev": true, + "dependencies": { + "icss-utils": "^4.1.1", + "postcss": "^7.0.32", + "postcss-selector-parser": "^6.0.2", + "postcss-value-parser": "^4.1.0" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/storybook-addon-sass-postcss/node_modules/postcss-modules-scope": { + "version": "2.2.0", + "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz", + "integrity": "sha512-YyEgsTMRpNd+HmyC7H/mh3y+MeFWevy7V1evVhJWewmMbjDHIbZbOXICC2y+m1xI1UVfIT1HMW/O04Hxyu9oXQ==", + "dev": true, + "dependencies": { + "postcss": "^7.0.6", + "postcss-selector-parser": "^6.0.0" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/storybook-addon-sass-postcss/node_modules/postcss-modules-values": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz", + "integrity": "sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==", + "dev": true, + "dependencies": { + "icss-utils": "^4.0.0", + "postcss": "^7.0.6" + } + }, + "node_modules/storybook-addon-sass-postcss/node_modules/sass-loader": { + "version": "10.4.1", + "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.4.1.tgz", + "integrity": "sha512-aX/iJZTTpNUNx/OSYzo2KsjIUQHqvWsAhhUijFjAPdZTEhstjZI9zTNvkTTwsx+uNUJqUwOw5gacxQMx4hJxGQ==", + "dev": true, + "dependencies": { + "klona": "^2.0.4", + "loader-utils": "^2.0.0", + "neo-async": "^2.6.2", + "schema-utils": "^3.0.0", + "semver": "^7.3.2" + }, + "engines": { + "node": ">= 10.13.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "fibers": ">= 3.1.0", + "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0", + "sass": "^1.3.0", + "webpack": "^4.36.0 || ^5.0.0" + }, + "peerDependenciesMeta": { + "fibers": { + "optional": true + }, + "node-sass": { + "optional": true + }, + "sass": { + "optional": true + } + } + }, + "node_modules/storybook-addon-sass-postcss/node_modules/sass-loader/node_modules/json5": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", + "dev": true, + "bin": { + "json5": "lib/cli.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/storybook-addon-sass-postcss/node_modules/sass-loader/node_modules/loader-utils": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz", + "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==", + "dev": true, + "dependencies": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + }, + "engines": { + "node": ">=8.9.0" + } + }, + "node_modules/storybook-addon-sass-postcss/node_modules/style-loader": { + "version": "1.3.0", + "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-1.3.0.tgz", + "integrity": "sha512-V7TCORko8rs9rIqkSrlMfkqA63DfoGBBJmK1kKGCcSi+BWb4cqz0SRsnp4l6rU5iwOEd0/2ePv68SV22VXon4Q==", + "dev": true, + "dependencies": { + "loader-utils": "^2.0.0", + "schema-utils": "^2.7.0" + }, + "engines": { + "node": ">= 8.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + }, + "peerDependencies": { + "webpack": "^4.0.0 || ^5.0.0" + } + }, + "node_modules/storybook-addon-sass-postcss/node_modules/style-loader/node_modules/json5": { + "version": "2.2.3", + "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", + "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", + "dev": true, + "bin": { + "json5": "lib/cli.js" + }, + "engines": { + "node": ">=6" + } + }, + "node_modules/storybook-addon-sass-postcss/node_modules/style-loader/node_modules/loader-utils": { + "version": "2.0.4", + "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz", + "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==", + "dev": true, + "dependencies": { + "big.js": "^5.2.2", + "emojis-list": "^3.0.0", + "json5": "^2.1.2" + }, + "engines": { + "node": ">=8.9.0" + } + }, + "node_modules/storybook-addon-sass-postcss/node_modules/style-loader/node_modules/schema-utils": { + "version": "2.7.1", + "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz", + "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==", + "dev": true, + "dependencies": { + "@types/json-schema": "^7.0.5", + "ajv": "^6.12.4", + "ajv-keywords": "^3.5.2" + }, + "engines": { + "node": ">= 8.9.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/webpack" + } + }, "node_modules/stream-shift": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz", diff --git a/package.json b/package.json index 19cd2171d93e5..7c1d2aa7115de 100644 --- a/package.json +++ b/package.json @@ -89,6 +89,7 @@ "remark-preset-prettier": "^2.0.1", "sharp": "^0.32.0", "storybook": "^7.0.0-rc.8", + "storybook-addon-sass-postcss": "^0.1.3", "stylelint": "^15.3.0", "stylelint-config-recommended-scss": "^9.0.1", "stylelint-order": "^6.0.3", From 5aca07523c71d385255c0b073cb973851587dfe9 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy Date: Thu, 6 Apr 2023 16:44:51 +0200 Subject: [PATCH 03/37] Update components/CommonComponents/ShellBox/index.module.scss MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Manish Kumar ⛄ Signed-off-by: Augustin Mauroy --- components/CommonComponents/ShellBox/index.module.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/components/CommonComponents/ShellBox/index.module.scss b/components/CommonComponents/ShellBox/index.module.scss index c132fec530773..f69a169efabc8 100644 --- a/components/CommonComponents/ShellBox/index.module.scss +++ b/components/CommonComponents/ShellBox/index.module.scss @@ -1,4 +1,4 @@ -.shell-box { +.shellBox { background-color: var(--black10); border-radius: 0.4rem; box-sizing: border-box; From 0e8441b007c17f82250517d756ec324e13799d06 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy Date: Thu, 6 Apr 2023 16:49:01 +0200 Subject: [PATCH 04/37] Update hooks/useCopyToClipboard.ts Co-authored-by: Claudio Wunder Signed-off-by: Augustin Mauroy --- hooks/useCopyToClipboard.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/hooks/useCopyToClipboard.ts b/hooks/useCopyToClipboard.ts index 0d44bb5daadd2..c8af574d0f324 100644 --- a/hooks/useCopyToClipboard.ts +++ b/hooks/useCopyToClipboard.ts @@ -1,7 +1,7 @@ import { useEffect, useState } from 'react'; const copyToClipboard = (value: string) => { - if (typeof window === 'undefined') { + if (typeof navigator === 'undefined') { return Promise.resolve(false); } From 3bf9eb682663adacb2529845e91fa9381fb1451d Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Thu, 6 Apr 2023 16:59:20 +0200 Subject: [PATCH 05/37] feat(shellbox): update --- .../ShellBox/__tests__/index.test.tsx | 0 .../ShellBox/index.module.scss | 0 .../ShellBox/index.stories.tsx | 0 .../ShellBox/index.tsx | 0 .../{CommonComponents => Common}/index.ts | 0 .../__snapshots__/index.test.tsx.snap | 25 ------------------- hooks/useCopyToClipboard.ts | 10 +++----- 7 files changed, 4 insertions(+), 31 deletions(-) rename components/{CommonComponents => Common}/ShellBox/__tests__/index.test.tsx (100%) rename components/{CommonComponents => Common}/ShellBox/index.module.scss (100%) rename components/{CommonComponents => Common}/ShellBox/index.stories.tsx (100%) rename components/{CommonComponents => Common}/ShellBox/index.tsx (100%) rename components/{CommonComponents => Common}/index.ts (100%) delete mode 100644 components/CommonComponents/ShellBox/__tests__/__snapshots__/index.test.tsx.snap diff --git a/components/CommonComponents/ShellBox/__tests__/index.test.tsx b/components/Common/ShellBox/__tests__/index.test.tsx similarity index 100% rename from components/CommonComponents/ShellBox/__tests__/index.test.tsx rename to components/Common/ShellBox/__tests__/index.test.tsx diff --git a/components/CommonComponents/ShellBox/index.module.scss b/components/Common/ShellBox/index.module.scss similarity index 100% rename from components/CommonComponents/ShellBox/index.module.scss rename to components/Common/ShellBox/index.module.scss diff --git a/components/CommonComponents/ShellBox/index.stories.tsx b/components/Common/ShellBox/index.stories.tsx similarity index 100% rename from components/CommonComponents/ShellBox/index.stories.tsx rename to components/Common/ShellBox/index.stories.tsx diff --git a/components/CommonComponents/ShellBox/index.tsx b/components/Common/ShellBox/index.tsx similarity index 100% rename from components/CommonComponents/ShellBox/index.tsx rename to components/Common/ShellBox/index.tsx diff --git a/components/CommonComponents/index.ts b/components/Common/index.ts similarity index 100% rename from components/CommonComponents/index.ts rename to components/Common/index.ts diff --git a/components/CommonComponents/ShellBox/__tests__/__snapshots__/index.test.tsx.snap b/components/CommonComponents/ShellBox/__tests__/__snapshots__/index.test.tsx.snap deleted file mode 100644 index 86ea7deddb88c..0000000000000 --- a/components/CommonComponents/ShellBox/__tests__/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,25 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ShellBox component renders correctly 1`] = ` -
- 
-    

-      
-        SHELL
-      
-      
-    

-    
-      mock-children-code
-    
-
-
-`; diff --git a/hooks/useCopyToClipboard.ts b/hooks/useCopyToClipboard.ts index c8af574d0f324..44b55a4b668d3 100644 --- a/hooks/useCopyToClipboard.ts +++ b/hooks/useCopyToClipboard.ts @@ -18,13 +18,11 @@ export const useCopyToClipboard = (): [boolean, (text: string) => void] => { const copyText = (text: string) => copyToClipboard(text).then(setCopied); useEffect(() => { - if (!copied) { - return undefined; + if (copied) { + const timerId = setTimeout(() => setCopied(false), 3000); + return () => clearTimeout(timerId); } - - const timerId = setTimeout(() => setCopied(false), 3000); - - return () => clearTimeout(timerId); + return undefined; }, [copied]); return [copied, copyText]; From 0d9d5b6fd6efb2a49a28a7ea4b9e9b9c880c7d65 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Sat, 8 Apr 2023 14:53:52 +0200 Subject: [PATCH 06/37] chore: sass adon --- .storybook/main.js | 1 - package-lock.json | 382 --------------------------------------------- package.json | 1 - 3 files changed, 384 deletions(-) diff --git a/.storybook/main.js b/.storybook/main.js index c034e818c4066..b5824b4193286 100644 --- a/.storybook/main.js +++ b/.storybook/main.js @@ -5,7 +5,6 @@ const config = { '@storybook/addon-links', '@storybook/addon-essentials', '@storybook/addon-interactions', - 'storybook-addon-sass-postcss', ], framework: { name: '@storybook/nextjs', diff --git a/package-lock.json b/package-lock.json index 404463f66cfde..3f65acc7b4da2 100644 --- a/package-lock.json +++ b/package-lock.json @@ -64,7 +64,6 @@ "remark-preset-prettier": "^2.0.1", "sharp": "^0.32.0", "storybook": "^7.0.0-rc.8", - "storybook-addon-sass-postcss": "^0.1.3", "stylelint": "^15.3.0", "stylelint-config-recommended-scss": "^9.0.1", "stylelint-order": "^6.0.3", @@ -9106,17 +9105,6 @@ "integrity": "sha512-QADzlaHc8icV8I7vbaJXJwod9HWYp8uCqf1xa4OfNu1T7JVxQIrUgOWtHdNDtPiywmFbiS12VjotIXLrKM3orQ==", "dev": true }, - "node_modules/core-js": { - "version": "3.30.0", - "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.30.0.tgz", - "integrity": "sha512-hQotSSARoNh1mYPi9O2YaWeiq/cEB95kOrFb4NCrO4RIFt1qqNpKsaE+vy/L3oiqvND5cThqXzUU3r9F7Efztg==", - "dev": true, - "hasInstallScript": true, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/core-js" - } - }, "node_modules/core-js-compat": { "version": "3.30.1", "resolved": "https://registry.npmjs.org/core-js-compat/-/core-js-compat-3.30.1.tgz", @@ -22857,376 +22845,6 @@ "url": "https://opencollective.com/storybook" } }, - "node_modules/storybook-addon-sass-postcss": { - "version": "0.1.3", - "resolved": "https://registry.npmjs.org/storybook-addon-sass-postcss/-/storybook-addon-sass-postcss-0.1.3.tgz", - "integrity": "sha512-Jwi7KSx661hrFGO4q3jvMuvgObL8UdBYtvnKzXovBWyZoKsaji+sXKm6IpqGwy44R0To4dmobzZoW9q9rW3sWQ==", - "dev": true, - "dependencies": { - "@storybook/node-logger": "^6.1.14", - "css-loader": "^3.6.0", - "postcss": "^7.0.35", - "postcss-loader": "^4.2.0", - "sass": "^1.43.4", - "sass-loader": "^10.2.0", - "style-loader": "^1.3.0" - }, - "engines": { - "node": ">=10", - "yarn": "^1.17.0" - } - }, - "node_modules/storybook-addon-sass-postcss/node_modules/@storybook/node-logger": { - "version": "6.5.16", - "resolved": "https://registry.npmjs.org/@storybook/node-logger/-/node-logger-6.5.16.tgz", - "integrity": "sha512-YjhBKrclQtjhqFNSO+BZK+RXOx6EQypAELJKoLFaawg331e8VUfvUuRCNB3fcEWp8G9oH13PQQte0OTjLyyOYg==", - "dev": true, - "dependencies": { - "@types/npmlog": "^4.1.2", - "chalk": "^4.1.0", - "core-js": "^3.8.2", - "npmlog": "^5.0.1", - "pretty-hrtime": "^1.0.3" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/storybook" - } - }, - "node_modules/storybook-addon-sass-postcss/node_modules/css-loader": { - "version": "3.6.0", - "resolved": "https://registry.npmjs.org/css-loader/-/css-loader-3.6.0.tgz", - "integrity": "sha512-M5lSukoWi1If8dhQAUCvj4H8vUt3vOnwbQBH9DdTm/s4Ym2B/3dPMtYZeJmq7Q3S3Pa+I94DcZ7pc9bP14cWIQ==", - "dev": true, - "dependencies": { - "camelcase": "^5.3.1", - "cssesc": "^3.0.0", - "icss-utils": "^4.1.1", - "loader-utils": "^1.2.3", - "normalize-path": "^3.0.0", - "postcss": "^7.0.32", - "postcss-modules-extract-imports": "^2.0.0", - "postcss-modules-local-by-default": "^3.0.2", - "postcss-modules-scope": "^2.2.0", - "postcss-modules-values": "^3.0.0", - "postcss-value-parser": "^4.1.0", - "schema-utils": "^2.7.0", - "semver": "^6.3.0" - }, - "engines": { - "node": ">= 8.9.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/webpack" - }, - "peerDependencies": { - "webpack": "^4.0.0 || ^5.0.0" - } - }, - "node_modules/storybook-addon-sass-postcss/node_modules/css-loader/node_modules/schema-utils": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz", - "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==", - "dev": true, - "dependencies": { - "@types/json-schema": "^7.0.5", - "ajv": "^6.12.4", - "ajv-keywords": "^3.5.2" - }, - "engines": { - "node": ">= 8.9.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/webpack" - } - }, - "node_modules/storybook-addon-sass-postcss/node_modules/css-loader/node_modules/semver": { - "version": "6.3.0", - "resolved": "https://registry.npmjs.org/semver/-/semver-6.3.0.tgz", - "integrity": "sha512-b39TBaTSfV6yBrapU89p5fKekE2m/NwnDocOVruQFS1/veMgdzuPcnOM34M6CwxW8jH/lxEa5rBoDeUwu5HHTw==", - "dev": true, - "bin": { - "semver": "bin/semver.js" - } - }, - "node_modules/storybook-addon-sass-postcss/node_modules/icss-utils": { - "version": "4.1.1", - "resolved": "https://registry.npmjs.org/icss-utils/-/icss-utils-4.1.1.tgz", - "integrity": "sha512-4aFq7wvWyMHKgxsH8QQtGpvbASCf+eM3wPRLI6R+MgAnTCZ6STYsRvttLvRWK0Nfif5piF394St3HeJDaljGPA==", - "dev": true, - "dependencies": { - "postcss": "^7.0.14" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/storybook-addon-sass-postcss/node_modules/loader-utils": { - "version": "1.4.2", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-1.4.2.tgz", - "integrity": "sha512-I5d00Pd/jwMD2QCduo657+YM/6L3KZu++pmX9VFncxaxvHcru9jx1lBaFft+r4Mt2jK0Yhp41XlRAihzPxHNCg==", - "dev": true, - "dependencies": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^1.0.1" - }, - "engines": { - "node": ">=4.0.0" - } - }, - "node_modules/storybook-addon-sass-postcss/node_modules/picocolors": { - "version": "0.2.1", - "resolved": "https://registry.npmjs.org/picocolors/-/picocolors-0.2.1.tgz", - "integrity": "sha512-cMlDqaLEqfSaW8Z7N5Jw+lyIW869EzT73/F5lhtY9cLGoVxSXznfgfXMO0Z5K0o0Q2TkTXq+0KFsdnSe3jDViA==", - "dev": true - }, - "node_modules/storybook-addon-sass-postcss/node_modules/postcss": { - "version": "7.0.39", - "resolved": "https://registry.npmjs.org/postcss/-/postcss-7.0.39.tgz", - "integrity": "sha512-yioayjNbHn6z1/Bywyb2Y4s3yvDAeXGOyxqD+LnVOinq6Mdmd++SW2wUNVzavyyHxd6+DxzWGIuosg6P1Rj8uA==", - "dev": true, - "dependencies": { - "picocolors": "^0.2.1", - "source-map": "^0.6.1" - }, - "engines": { - "node": ">=6.0.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/postcss/" - } - }, - "node_modules/storybook-addon-sass-postcss/node_modules/postcss-loader": { - "version": "4.3.0", - "resolved": "https://registry.npmjs.org/postcss-loader/-/postcss-loader-4.3.0.tgz", - "integrity": "sha512-M/dSoIiNDOo8Rk0mUqoj4kpGq91gcxCfb9PoyZVdZ76/AuhxylHDYZblNE8o+EQ9AMSASeMFEKxZf5aU6wlx1Q==", - "dev": true, - "dependencies": { - "cosmiconfig": "^7.0.0", - "klona": "^2.0.4", - "loader-utils": "^2.0.0", - "schema-utils": "^3.0.0", - "semver": "^7.3.4" - }, - "engines": { - "node": ">= 10.13.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/webpack" - }, - "peerDependencies": { - "postcss": "^7.0.0 || ^8.0.1", - "webpack": "^4.0.0 || ^5.0.0" - } - }, - "node_modules/storybook-addon-sass-postcss/node_modules/postcss-loader/node_modules/json5": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", - "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", - "dev": true, - "bin": { - "json5": "lib/cli.js" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/storybook-addon-sass-postcss/node_modules/postcss-loader/node_modules/loader-utils": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz", - "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==", - "dev": true, - "dependencies": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - }, - "engines": { - "node": ">=8.9.0" - } - }, - "node_modules/storybook-addon-sass-postcss/node_modules/postcss-modules-extract-imports": { - "version": "2.0.0", - "resolved": "https://registry.npmjs.org/postcss-modules-extract-imports/-/postcss-modules-extract-imports-2.0.0.tgz", - "integrity": "sha512-LaYLDNS4SG8Q5WAWqIJgdHPJrDDr/Lv775rMBFUbgjTz6j34lUznACHcdRWroPvXANP2Vj7yNK57vp9eFqzLWQ==", - "dev": true, - "dependencies": { - "postcss": "^7.0.5" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/storybook-addon-sass-postcss/node_modules/postcss-modules-local-by-default": { - "version": "3.0.3", - "resolved": "https://registry.npmjs.org/postcss-modules-local-by-default/-/postcss-modules-local-by-default-3.0.3.tgz", - "integrity": "sha512-e3xDq+LotiGesympRlKNgaJ0PCzoUIdpH0dj47iWAui/kyTgh3CiAr1qP54uodmJhl6p9rN6BoNcdEDVJx9RDw==", - "dev": true, - "dependencies": { - "icss-utils": "^4.1.1", - "postcss": "^7.0.32", - "postcss-selector-parser": "^6.0.2", - "postcss-value-parser": "^4.1.0" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/storybook-addon-sass-postcss/node_modules/postcss-modules-scope": { - "version": "2.2.0", - "resolved": "https://registry.npmjs.org/postcss-modules-scope/-/postcss-modules-scope-2.2.0.tgz", - "integrity": "sha512-YyEgsTMRpNd+HmyC7H/mh3y+MeFWevy7V1evVhJWewmMbjDHIbZbOXICC2y+m1xI1UVfIT1HMW/O04Hxyu9oXQ==", - "dev": true, - "dependencies": { - "postcss": "^7.0.6", - "postcss-selector-parser": "^6.0.0" - }, - "engines": { - "node": ">= 6" - } - }, - "node_modules/storybook-addon-sass-postcss/node_modules/postcss-modules-values": { - "version": "3.0.0", - "resolved": "https://registry.npmjs.org/postcss-modules-values/-/postcss-modules-values-3.0.0.tgz", - "integrity": "sha512-1//E5jCBrZ9DmRX+zCtmQtRSV6PV42Ix7Bzj9GbwJceduuf7IqP8MgeTXuRDHOWj2m0VzZD5+roFWDuU8RQjcg==", - "dev": true, - "dependencies": { - "icss-utils": "^4.0.0", - "postcss": "^7.0.6" - } - }, - "node_modules/storybook-addon-sass-postcss/node_modules/sass-loader": { - "version": "10.4.1", - "resolved": "https://registry.npmjs.org/sass-loader/-/sass-loader-10.4.1.tgz", - "integrity": "sha512-aX/iJZTTpNUNx/OSYzo2KsjIUQHqvWsAhhUijFjAPdZTEhstjZI9zTNvkTTwsx+uNUJqUwOw5gacxQMx4hJxGQ==", - "dev": true, - "dependencies": { - "klona": "^2.0.4", - "loader-utils": "^2.0.0", - "neo-async": "^2.6.2", - "schema-utils": "^3.0.0", - "semver": "^7.3.2" - }, - "engines": { - "node": ">= 10.13.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/webpack" - }, - "peerDependencies": { - "fibers": ">= 3.1.0", - "node-sass": "^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0", - "sass": "^1.3.0", - "webpack": "^4.36.0 || ^5.0.0" - }, - "peerDependenciesMeta": { - "fibers": { - "optional": true - }, - "node-sass": { - "optional": true - }, - "sass": { - "optional": true - } - } - }, - "node_modules/storybook-addon-sass-postcss/node_modules/sass-loader/node_modules/json5": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", - "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", - "dev": true, - "bin": { - "json5": "lib/cli.js" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/storybook-addon-sass-postcss/node_modules/sass-loader/node_modules/loader-utils": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz", - "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==", - "dev": true, - "dependencies": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - }, - "engines": { - "node": ">=8.9.0" - } - }, - "node_modules/storybook-addon-sass-postcss/node_modules/style-loader": { - "version": "1.3.0", - "resolved": "https://registry.npmjs.org/style-loader/-/style-loader-1.3.0.tgz", - "integrity": "sha512-V7TCORko8rs9rIqkSrlMfkqA63DfoGBBJmK1kKGCcSi+BWb4cqz0SRsnp4l6rU5iwOEd0/2ePv68SV22VXon4Q==", - "dev": true, - "dependencies": { - "loader-utils": "^2.0.0", - "schema-utils": "^2.7.0" - }, - "engines": { - "node": ">= 8.9.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/webpack" - }, - "peerDependencies": { - "webpack": "^4.0.0 || ^5.0.0" - } - }, - "node_modules/storybook-addon-sass-postcss/node_modules/style-loader/node_modules/json5": { - "version": "2.2.3", - "resolved": "https://registry.npmjs.org/json5/-/json5-2.2.3.tgz", - "integrity": "sha512-XmOWe7eyHYH14cLdVPoyg+GOH3rYX++KpzrylJwSW98t3Nk+U8XOl8FWKOgwtzdb8lXGf6zYwDUzeHMWfxasyg==", - "dev": true, - "bin": { - "json5": "lib/cli.js" - }, - "engines": { - "node": ">=6" - } - }, - "node_modules/storybook-addon-sass-postcss/node_modules/style-loader/node_modules/loader-utils": { - "version": "2.0.4", - "resolved": "https://registry.npmjs.org/loader-utils/-/loader-utils-2.0.4.tgz", - "integrity": "sha512-xXqpXoINfFhgua9xiqD8fPFHgkoq1mmmpE92WlDbm9rNRd/EbRb+Gqf908T2DMfuHjjJlksiK2RbHVOdD/MqSw==", - "dev": true, - "dependencies": { - "big.js": "^5.2.2", - "emojis-list": "^3.0.0", - "json5": "^2.1.2" - }, - "engines": { - "node": ">=8.9.0" - } - }, - "node_modules/storybook-addon-sass-postcss/node_modules/style-loader/node_modules/schema-utils": { - "version": "2.7.1", - "resolved": "https://registry.npmjs.org/schema-utils/-/schema-utils-2.7.1.tgz", - "integrity": "sha512-SHiNtMOUGWBQJwzISiVYKu82GiV4QYGePp3odlY1tuKO7gPtphAT5R/py0fA6xtbgLL/RvtJZnU9b8s0F1q0Xg==", - "dev": true, - "dependencies": { - "@types/json-schema": "^7.0.5", - "ajv": "^6.12.4", - "ajv-keywords": "^3.5.2" - }, - "engines": { - "node": ">= 8.9.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/webpack" - } - }, "node_modules/stream-shift": { "version": "1.0.1", "resolved": "https://registry.npmjs.org/stream-shift/-/stream-shift-1.0.1.tgz", diff --git a/package.json b/package.json index 7c1d2aa7115de..19cd2171d93e5 100644 --- a/package.json +++ b/package.json @@ -89,7 +89,6 @@ "remark-preset-prettier": "^2.0.1", "sharp": "^0.32.0", "storybook": "^7.0.0-rc.8", - "storybook-addon-sass-postcss": "^0.1.3", "stylelint": "^15.3.0", "stylelint-config-recommended-scss": "^9.0.1", "stylelint-order": "^6.0.3", From ef6794fccf57288909642b6458d631073931c0cf Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Sun, 9 Apr 2023 21:45:27 +0200 Subject: [PATCH 07/37] feat(unit test): support I18N --- .../__snapshots__/index.test.tsx.snap | 25 +++++++++++++++++ test/__mocks__/@testing-library/react.tsx | 28 +++++++++++++++++++ 2 files changed, 53 insertions(+) create mode 100644 components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap create mode 100644 test/__mocks__/@testing-library/react.tsx diff --git a/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap b/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000000000..86ea7deddb88c --- /dev/null +++ b/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,25 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ShellBox component renders correctly 1`] = ` +
+ 
+    

+      
+        SHELL
+      
+      
+    

+    
+      mock-children-code
+    
+
+
+`; diff --git a/test/__mocks__/@testing-library/react.tsx b/test/__mocks__/@testing-library/react.tsx new file mode 100644 index 0000000000000..08a578624829d --- /dev/null +++ b/test/__mocks__/@testing-library/react.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { IntlProvider } from 'react-intl'; +import messages from '../../../i18n/locales/en.json'; + +const { + render: rtlRender, + screen, + fireEvent, + waitFor, +} = jest.requireActual('@testing-library/react'); + +const render = ( + ui: React.ReactElement, + { locale = 'en', ...renderOptions } = {} +) => { + const ProviderComponent = ({ children }: { children: React.ReactNode }) => ( + + {children} + + ); + + return rtlRender(ui, { + wrapper: ProviderComponent, + ...renderOptions, + }); +}; + +export { render, screen, fireEvent, waitFor }; From 4b5e6725c3bf71ae3ba7e998140ab655e8cff89b Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Sun, 9 Apr 2023 21:48:51 +0200 Subject: [PATCH 08/37] fix lint --- test/__mocks__/@testing-library/react.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/test/__mocks__/@testing-library/react.tsx b/test/__mocks__/@testing-library/react.tsx index 08a578624829d..2a5f501b1d267 100644 --- a/test/__mocks__/@testing-library/react.tsx +++ b/test/__mocks__/@testing-library/react.tsx @@ -7,6 +7,7 @@ const { screen, fireEvent, waitFor, + // eslint-disable-next-line no-undef } = jest.requireActual('@testing-library/react'); const render = ( From efba032dcff2325df9332ed583a5eed3c5711803 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Mon, 10 Apr 2023 17:39:27 +0200 Subject: [PATCH 09/37] remove feat-unit test --- test/__mocks__/@testing-library/react.tsx | 29 ----------------------- 1 file changed, 29 deletions(-) delete mode 100644 test/__mocks__/@testing-library/react.tsx diff --git a/test/__mocks__/@testing-library/react.tsx b/test/__mocks__/@testing-library/react.tsx deleted file mode 100644 index 2a5f501b1d267..0000000000000 --- a/test/__mocks__/@testing-library/react.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import React from 'react'; -import { IntlProvider } from 'react-intl'; -import messages from '../../../i18n/locales/en.json'; - -const { - render: rtlRender, - screen, - fireEvent, - waitFor, - // eslint-disable-next-line no-undef -} = jest.requireActual('@testing-library/react'); - -const render = ( - ui: React.ReactElement, - { locale = 'en', ...renderOptions } = {} -) => { - const ProviderComponent = ({ children }: { children: React.ReactNode }) => ( - - {children} - - ); - - return rtlRender(ui, { - wrapper: ProviderComponent, - ...renderOptions, - }); -}; - -export { render, screen, fireEvent, waitFor }; From ba2ea12096056b3022f0c35ffdf4dd48d3c6714f Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Tue, 11 Apr 2023 20:34:21 +0200 Subject: [PATCH 10/37] feat(shellbox): update with feedback --- components/Common/ShellBox/index.stories.tsx | 12 ++-- components/Common/ShellBox/index.tsx | 5 +- i18n/locales/ar.json | 3 +- i18n/locales/ca.json | 76 ++++++++++---------- i18n/locales/de.json | 3 +- i18n/locales/en.json | 2 +- i18n/locales/es.json | 3 +- i18n/locales/fa.json | 3 +- i18n/locales/fr.json | 3 +- i18n/locales/gl.json | 3 +- i18n/locales/id.json | 3 +- i18n/locales/it.json | 3 +- i18n/locales/ja.json | 3 +- i18n/locales/ka.json | 3 +- i18n/locales/ko.json | 3 +- i18n/locales/nl.json | 3 +- i18n/locales/pt-br.json | 3 +- i18n/locales/ro.json | 3 +- i18n/locales/ru.json | 3 +- i18n/locales/tr.json | 3 +- i18n/locales/uk.json | 3 +- i18n/locales/zh-cn.json | 3 +- i18n/locales/zh-tw.json | 3 +- 23 files changed, 68 insertions(+), 84 deletions(-) diff --git a/components/Common/ShellBox/index.stories.tsx b/components/Common/ShellBox/index.stories.tsx index 0038ff44c6406..a91abcef11db9 100644 --- a/components/Common/ShellBox/index.stories.tsx +++ b/components/Common/ShellBox/index.stories.tsx @@ -1,12 +1,12 @@ import ShellBox from '.'; export default { - title: 'CommonComponents/ShellBox', component: ShellBox, }; -export const Default = () => ( - - echo ’Hello World’ - -); +export const Default = { + args: { + children: 'Hello World', + textToCopy: 'Hello World', + }, +}; diff --git a/components/Common/ShellBox/index.tsx b/components/Common/ShellBox/index.tsx index c34b8d248cbc6..3450027f0357f 100644 --- a/components/Common/ShellBox/index.tsx +++ b/components/Common/ShellBox/index.tsx @@ -20,7 +20,10 @@ const ShellBox = ({ children, textToCopy }: React.PropsWithChildren) => {
SHELL
{children} diff --git a/i18n/locales/ar.json b/i18n/locales/ar.json index a02c3b38f2e1c..6c019f198cab0 100644 --- a/i18n/locales/ar.json +++ b/i18n/locales/ar.json @@ -35,6 +35,5 @@ "components.pagination.next": "التالي | ", "components.pagination.previous": "السابق", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}", - "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" + "layouts.blogIndex.currentYear": "News from {year}" } diff --git a/i18n/locales/ca.json b/i18n/locales/ca.json index 0af333669c6f5..c265b2afd2435 100644 --- a/i18n/locales/ca.json +++ b/i18n/locales/ca.json @@ -1,39 +1,39 @@ { - "components.footer.scrollToTop.button": "Torna al començament", - "components.header.links.home": "Inici", - "components.header.links.about": "Quant a", - "components.header.links.download": "Descàrregues", - "components.header.links.docs": "Documentació", - "components.header.links.getInvolved": "Participa", - "components.header.links.security": "Seguretat", - "components.header.links.certification": "Certification", - "components.header.links.blog": "Notícies", - "components.navigation.about.links.governance": "Govern", - "components.navigation.docs.links.es6": "ES6 i més enllà", - "components.navigation.docs.links.apiLts": "{fullLtsNodeVersion} API {spanLts}", - "components.navigation.docs.links.apiCurrent": "{fullCurrentNodeVersion} API", - "components.navigation.docs.links.guides": "Guies", - "components.navigation.docs.links.dependencies": "Dependències", - "components.navigation.getInvolved.links.collabSummit": "Col·labora en el Summit", - "components.navigation.getInvolved.links.contribute": "Contribueix", - "components.navigation.getInvolved.links.codeOfConduct": "Codi de Conducta", - "components.downloadList.links.previousReleases": "Descarrègues", - "components.downloadList.links.packageManager": "Instal·lar Node.js mitjançant un gestor de paquets", - "components.downloadList.links.shaSums": "Signatures SHASUMS per arxius de versions", - "components.downloadList.links.shaSums.howToVerify": " (Com verificar-ho)", - "components.downloadList.links.allDownloads": "Totes les opcions de descàrrega", - "components.downloadList.links.nightlyReleases": "Versions Nightly", - "components.downloadList.links.unofficialBuilds": "Unofficial builds", - "components.downloadList.links.buildingFromSource": "Building Node.js from source on supported platforms", - "components.downloadList.links.installingOnLinux": "Installing Node.js via binary archive", - "components.downloadList.links.installingOnWsl": "Install on Windows Subsystem for Linux (WSL)", - "components.downloadReleasesTable.changelog": "Registre de Canvis", - "components.downloadReleasesTable.releases": "Releases", - "components.downloadReleasesTable.docs": "Documentació", - "components.header.buttons.toggleLanguage": "Toggle Language", - "components.header.buttons.toggleDarkMode": "Toggle dark/light mode", - "components.pagination.next": "Següent | ", - "components.pagination.previous": "Anterior", - "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}" -} \ No newline at end of file + "components.footer.scrollToTop.button": "Torna al començament", + "components.header.links.home": "Inici", + "components.header.links.about": "Quant a", + "components.header.links.download": "Descàrregues", + "components.header.links.docs": "Documentació", + "components.header.links.getInvolved": "Participa", + "components.header.links.security": "Seguretat", + "components.header.links.certification": "Certification", + "components.header.links.blog": "Notícies", + "components.navigation.about.links.governance": "Govern", + "components.navigation.docs.links.es6": "ES6 i més enllà", + "components.navigation.docs.links.apiLts": "{fullLtsNodeVersion} API {spanLts}", + "components.navigation.docs.links.apiCurrent": "{fullCurrentNodeVersion} API", + "components.navigation.docs.links.guides": "Guies", + "components.navigation.docs.links.dependencies": "Dependències", + "components.navigation.getInvolved.links.collabSummit": "Col·labora en el Summit", + "components.navigation.getInvolved.links.contribute": "Contribueix", + "components.navigation.getInvolved.links.codeOfConduct": "Codi de Conducta", + "components.downloadList.links.previousReleases": "Descarrègues", + "components.downloadList.links.packageManager": "Instal·lar Node.js mitjançant un gestor de paquets", + "components.downloadList.links.shaSums": "Signatures SHASUMS per arxius de versions", + "components.downloadList.links.shaSums.howToVerify": " (Com verificar-ho)", + "components.downloadList.links.allDownloads": "Totes les opcions de descàrrega", + "components.downloadList.links.nightlyReleases": "Versions Nightly", + "components.downloadList.links.unofficialBuilds": "Unofficial builds", + "components.downloadList.links.buildingFromSource": "Building Node.js from source on supported platforms", + "components.downloadList.links.installingOnLinux": "Installing Node.js via binary archive", + "components.downloadList.links.installingOnWsl": "Install on Windows Subsystem for Linux (WSL)", + "components.downloadReleasesTable.changelog": "Registre de Canvis", + "components.downloadReleasesTable.releases": "Releases", + "components.downloadReleasesTable.docs": "Documentació", + "components.header.buttons.toggleLanguage": "Toggle Language", + "components.header.buttons.toggleDarkMode": "Toggle dark/light mode", + "components.pagination.next": "Següent | ", + "components.pagination.previous": "Anterior", + "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", + "layouts.blogIndex.currentYear": "News from {year}" + } diff --git a/i18n/locales/de.json b/i18n/locales/de.json index 3c92d8a252423..8694496e07c5f 100644 --- a/i18n/locales/de.json +++ b/i18n/locales/de.json @@ -35,6 +35,5 @@ "components.pagination.next": "Neuere | ", "components.pagination.previous": "Ältere", "layouts.blogPost.author.byLine": "{author, select, null {} other {Von {author}, }}", - "layouts.blogIndex.currentYear": "Neuigkeiten von {year}", - "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" + "layouts.blogIndex.currentYear": "Neuigkeiten von {year}" } diff --git a/i18n/locales/en.json b/i18n/locales/en.json index df6f62faace6f..c593a2ace6587 100644 --- a/i18n/locales/en.json +++ b/i18n/locales/en.json @@ -37,5 +37,5 @@ "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", "layouts.blogIndex.currentYear": "News from {year}", "components.common.banner.button.text": "Read More", - "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" + "components.common.shellBox.copy": "{copied, select, true {copied}other {copy}}" } diff --git a/i18n/locales/es.json b/i18n/locales/es.json index a21bfdcbd6c25..261a095549676 100644 --- a/i18n/locales/es.json +++ b/i18n/locales/es.json @@ -35,6 +35,5 @@ "components.pagination.next": "Siguiente | ", "components.pagination.previous": "Anterior", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}", - "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" + "layouts.blogIndex.currentYear": "News from {year}" } diff --git a/i18n/locales/fa.json b/i18n/locales/fa.json index b558d530e35b3..c4ea7b173e3ed 100644 --- a/i18n/locales/fa.json +++ b/i18n/locales/fa.json @@ -35,6 +35,5 @@ "components.pagination.next": "بعدی | ", "components.pagination.previous": "قبلی", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}", - "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" + "layouts.blogIndex.currentYear": "News from {year}" } diff --git a/i18n/locales/fr.json b/i18n/locales/fr.json index 9d123be5acf87..4dd29b8c21700 100644 --- a/i18n/locales/fr.json +++ b/i18n/locales/fr.json @@ -35,6 +35,5 @@ "components.pagination.next": "Plus récent ", "components.pagination.previous": "Plus anciens", "layouts.blogPost.author.byLine": "{author, select, null {} other {Par {author}, }}", - "layouts.blogIndex.currentYear": "Actualités de {year}", - "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" + "layouts.blogIndex.currentYear": "Actualités de {year}" } diff --git a/i18n/locales/gl.json b/i18n/locales/gl.json index bcd80157b4e91..90589c897c616 100644 --- a/i18n/locales/gl.json +++ b/i18n/locales/gl.json @@ -35,6 +35,5 @@ "components.pagination.next": "Seguinte | ", "components.pagination.previous": "Anterior", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}", - "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" + "layouts.blogIndex.currentYear": "News from {year}" } diff --git a/i18n/locales/id.json b/i18n/locales/id.json index ab6c81f827546..4a33c2578583d 100644 --- a/i18n/locales/id.json +++ b/i18n/locales/id.json @@ -35,6 +35,5 @@ "components.pagination.next": "Terbaru | ", "components.pagination.previous": "Lama", "layouts.blogPost.author.byLine": "{author, select, null {} other {Oleh {author}, }}", - "layouts.blogIndex.currentYear": "Berita dari {year}", - "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" + "layouts.blogIndex.currentYear": "Berita dari {year}" } diff --git a/i18n/locales/it.json b/i18n/locales/it.json index 18886c9f9cbf0..52620965c7a69 100644 --- a/i18n/locales/it.json +++ b/i18n/locales/it.json @@ -35,6 +35,5 @@ "components.pagination.next": "Successiva | ", "components.pagination.previous": "Precedente", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}", - "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" + "layouts.blogIndex.currentYear": "News from {year}" } diff --git a/i18n/locales/ja.json b/i18n/locales/ja.json index 76ee4211c0517..5f8f1ba9793ae 100644 --- a/i18n/locales/ja.json +++ b/i18n/locales/ja.json @@ -35,6 +35,5 @@ "components.pagination.next": "次 | ", "components.pagination.previous": "前", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}", - "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" + "layouts.blogIndex.currentYear": "News from {year}" } diff --git a/i18n/locales/ka.json b/i18n/locales/ka.json index 862f9feaae4a5..e1b1797b00644 100644 --- a/i18n/locales/ka.json +++ b/i18n/locales/ka.json @@ -35,6 +35,5 @@ "components.pagination.next": "შემდეგი | ", "components.pagination.previous": "წინა", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}", - "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" + "layouts.blogIndex.currentYear": "News from {year}" } diff --git a/i18n/locales/ko.json b/i18n/locales/ko.json index 0998124a36fac..a582789464260 100644 --- a/i18n/locales/ko.json +++ b/i18n/locales/ko.json @@ -35,6 +35,5 @@ "components.pagination.next": "다음 | ", "components.pagination.previous": "이전", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}", - "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" + "layouts.blogIndex.currentYear": "News from {year}" } diff --git a/i18n/locales/nl.json b/i18n/locales/nl.json index 3832029a6b074..bf2f17011d92e 100644 --- a/i18n/locales/nl.json +++ b/i18n/locales/nl.json @@ -35,6 +35,5 @@ "components.pagination.next": "Volgende | ", "components.pagination.previous": "Vorige", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}", - "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" + "layouts.blogIndex.currentYear": "News from {year}" } diff --git a/i18n/locales/pt-br.json b/i18n/locales/pt-br.json index a39028b31df9c..1475f76f1aea4 100644 --- a/i18n/locales/pt-br.json +++ b/i18n/locales/pt-br.json @@ -35,6 +35,5 @@ "components.pagination.next": "Próximo | ", "components.pagination.previous": "Anterior", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}", - "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" + "layouts.blogIndex.currentYear": "News from {year}" } diff --git a/i18n/locales/ro.json b/i18n/locales/ro.json index 8bfa4b62ee682..0f671085c8d58 100644 --- a/i18n/locales/ro.json +++ b/i18n/locales/ro.json @@ -35,6 +35,5 @@ "components.pagination.next": "Newer | ", "components.pagination.previous": "Older", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}", - "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" + "layouts.blogIndex.currentYear": "News from {year}" } diff --git a/i18n/locales/ru.json b/i18n/locales/ru.json index 59180b45f9cd8..558d177412467 100644 --- a/i18n/locales/ru.json +++ b/i18n/locales/ru.json @@ -35,6 +35,5 @@ "components.pagination.next": "Следующий | ", "components.pagination.previous": "Предыдущий", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}", - "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" + "layouts.blogIndex.currentYear": "News from {year}" } diff --git a/i18n/locales/tr.json b/i18n/locales/tr.json index 2ba0d254e886c..81994747bc8b6 100644 --- a/i18n/locales/tr.json +++ b/i18n/locales/tr.json @@ -35,6 +35,5 @@ "components.pagination.next": "Daha Yeni | ", "components.pagination.previous": "Daha Eski", "layouts.blogPost.author.byLine": "{author, select, null {} other {{author} tarafından }}", - "layouts.blogIndex.currentYear": "{year} yılından haberler", - "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" + "layouts.blogIndex.currentYear": "{year} yılından haberler" } diff --git a/i18n/locales/uk.json b/i18n/locales/uk.json index 89005240d28a6..ca1f69103c700 100644 --- a/i18n/locales/uk.json +++ b/i18n/locales/uk.json @@ -35,6 +35,5 @@ "components.pagination.next": "Далі | ", "components.pagination.previous": "Попередній", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}", - "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" + "layouts.blogIndex.currentYear": "News from {year}" } diff --git a/i18n/locales/zh-cn.json b/i18n/locales/zh-cn.json index 56e5f398d4240..a413729917e3e 100644 --- a/i18n/locales/zh-cn.json +++ b/i18n/locales/zh-cn.json @@ -35,6 +35,5 @@ "components.pagination.next": "较新的新闻事件 | ", "components.pagination.previous": "更早的新闻事件", "layouts.blogPost.author.byLine": "{author, select, null {} other {由 {author} }}", - "layouts.blogIndex.currentYear": "{year} 年的所有新闻事件", - "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" + "layouts.blogIndex.currentYear": "{year} 年的所有新闻事件" } diff --git a/i18n/locales/zh-tw.json b/i18n/locales/zh-tw.json index 53a5a682e6515..cc5632a00f516 100644 --- a/i18n/locales/zh-tw.json +++ b/i18n/locales/zh-tw.json @@ -35,6 +35,5 @@ "components.pagination.next": "下一個 | ", "components.pagination.previous": "上一個", "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}", - "components.codeBox.copy": "{copied, select, true {copied}other {copy}}" + "layouts.blogIndex.currentYear": "News from {year}" } From 0f12d24c79100ac2c2046bdcd71b1d2c8f3e458a Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Tue, 11 Apr 2023 20:41:57 +0200 Subject: [PATCH 11/37] feat(shellbox): update name of test --- components/Common/ShellBox/__tests__/index.test.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/components/Common/ShellBox/__tests__/index.test.tsx b/components/Common/ShellBox/__tests__/index.test.tsx index 6fa943a1749b0..7341701143277 100644 --- a/components/Common/ShellBox/__tests__/index.test.tsx +++ b/components/Common/ShellBox/__tests__/index.test.tsx @@ -17,7 +17,7 @@ afterEach(() => { }); describe('ShellBox component', (): void => { - it('renders correctly', (): void => { + it('renders content correctly', (): void => { const textToCopy = 'text to be copy'; const { container } = render( mock-children-code @@ -25,7 +25,7 @@ describe('ShellBox component', (): void => { expect(container).toMatchSnapshot(); }); - it('renders correctly', async () => { + it('renders copy button correctly', async () => { const textToCopy = 'text to be copy'; render(mock-children-code); From 1c210d63da460477b2feb5f7702503f4fbf9e5e4 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy Date: Wed, 12 Apr 2023 09:53:36 +0200 Subject: [PATCH 12/37] Update hooks/useCopyToClipboard.ts Co-authored-by: Claudio Wunder Signed-off-by: Augustin Mauroy --- hooks/useCopyToClipboard.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/hooks/useCopyToClipboard.ts b/hooks/useCopyToClipboard.ts index 44b55a4b668d3..2eca90d137e6c 100644 --- a/hooks/useCopyToClipboard.ts +++ b/hooks/useCopyToClipboard.ts @@ -20,6 +20,7 @@ export const useCopyToClipboard = (): [boolean, (text: string) => void] => { useEffect(() => { if (copied) { const timerId = setTimeout(() => setCopied(false), 3000); + return () => clearTimeout(timerId); } return undefined; From 78df7e73f8331f535210df57fd6ec32b06e84152 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy Date: Wed, 12 Apr 2023 09:54:04 +0200 Subject: [PATCH 13/37] Update hooks/useCopyToClipboard.ts Co-authored-by: Claudio Wunder Signed-off-by: Augustin Mauroy --- hooks/useCopyToClipboard.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/hooks/useCopyToClipboard.ts b/hooks/useCopyToClipboard.ts index 2eca90d137e6c..7d67785a77a55 100644 --- a/hooks/useCopyToClipboard.ts +++ b/hooks/useCopyToClipboard.ts @@ -23,6 +23,7 @@ export const useCopyToClipboard = (): [boolean, (text: string) => void] => { return () => clearTimeout(timerId); } + return undefined; }, [copied]); From aae068cb6af838a9c1cba05285c2c9d2e76392c5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Manish=20Kumar=20=E2=9B=84?= Date: Tue, 11 Apr 2023 13:17:24 +0530 Subject: [PATCH 14/37] =?UTF-8?q?=F0=9F=93=8E=20chore(migration):=20migrat?= =?UTF-8?q?e=20banner=20component=20(#5233)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Co-authored-by: Shanmughapriyan S Co-authored-by: Michael Esteban Co-authored-by: Claudio Wunder --- i18n/locales/ca.json | 76 ++++++++++++++++++++++---------------------- 1 file changed, 38 insertions(+), 38 deletions(-) diff --git a/i18n/locales/ca.json b/i18n/locales/ca.json index c265b2afd2435..c1c574cedb3c3 100644 --- a/i18n/locales/ca.json +++ b/i18n/locales/ca.json @@ -1,39 +1,39 @@ { - "components.footer.scrollToTop.button": "Torna al començament", - "components.header.links.home": "Inici", - "components.header.links.about": "Quant a", - "components.header.links.download": "Descàrregues", - "components.header.links.docs": "Documentació", - "components.header.links.getInvolved": "Participa", - "components.header.links.security": "Seguretat", - "components.header.links.certification": "Certification", - "components.header.links.blog": "Notícies", - "components.navigation.about.links.governance": "Govern", - "components.navigation.docs.links.es6": "ES6 i més enllà", - "components.navigation.docs.links.apiLts": "{fullLtsNodeVersion} API {spanLts}", - "components.navigation.docs.links.apiCurrent": "{fullCurrentNodeVersion} API", - "components.navigation.docs.links.guides": "Guies", - "components.navigation.docs.links.dependencies": "Dependències", - "components.navigation.getInvolved.links.collabSummit": "Col·labora en el Summit", - "components.navigation.getInvolved.links.contribute": "Contribueix", - "components.navigation.getInvolved.links.codeOfConduct": "Codi de Conducta", - "components.downloadList.links.previousReleases": "Descarrègues", - "components.downloadList.links.packageManager": "Instal·lar Node.js mitjançant un gestor de paquets", - "components.downloadList.links.shaSums": "Signatures SHASUMS per arxius de versions", - "components.downloadList.links.shaSums.howToVerify": " (Com verificar-ho)", - "components.downloadList.links.allDownloads": "Totes les opcions de descàrrega", - "components.downloadList.links.nightlyReleases": "Versions Nightly", - "components.downloadList.links.unofficialBuilds": "Unofficial builds", - "components.downloadList.links.buildingFromSource": "Building Node.js from source on supported platforms", - "components.downloadList.links.installingOnLinux": "Installing Node.js via binary archive", - "components.downloadList.links.installingOnWsl": "Install on Windows Subsystem for Linux (WSL)", - "components.downloadReleasesTable.changelog": "Registre de Canvis", - "components.downloadReleasesTable.releases": "Releases", - "components.downloadReleasesTable.docs": "Documentació", - "components.header.buttons.toggleLanguage": "Toggle Language", - "components.header.buttons.toggleDarkMode": "Toggle dark/light mode", - "components.pagination.next": "Següent | ", - "components.pagination.previous": "Anterior", - "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", - "layouts.blogIndex.currentYear": "News from {year}" - } + "components.footer.scrollToTop.button": "Torna al començament", + "components.header.links.home": "Inici", + "components.header.links.about": "Quant a", + "components.header.links.download": "Descàrregues", + "components.header.links.docs": "Documentació", + "components.header.links.getInvolved": "Participa", + "components.header.links.security": "Seguretat", + "components.header.links.certification": "Certification", + "components.header.links.blog": "Notícies", + "components.navigation.about.links.governance": "Govern", + "components.navigation.docs.links.es6": "ES6 i més enllà", + "components.navigation.docs.links.apiLts": "{fullLtsNodeVersion} API {spanLts}", + "components.navigation.docs.links.apiCurrent": "{fullCurrentNodeVersion} API", + "components.navigation.docs.links.guides": "Guies", + "components.navigation.docs.links.dependencies": "Dependències", + "components.navigation.getInvolved.links.collabSummit": "Col·labora en el Summit", + "components.navigation.getInvolved.links.contribute": "Contribueix", + "components.navigation.getInvolved.links.codeOfConduct": "Codi de Conducta", + "components.downloadList.links.previousReleases": "Descarrègues", + "components.downloadList.links.packageManager": "Instal·lar Node.js mitjançant un gestor de paquets", + "components.downloadList.links.shaSums": "Signatures SHASUMS per arxius de versions", + "components.downloadList.links.shaSums.howToVerify": " (Com verificar-ho)", + "components.downloadList.links.allDownloads": "Totes les opcions de descàrrega", + "components.downloadList.links.nightlyReleases": "Versions Nightly", + "components.downloadList.links.unofficialBuilds": "Unofficial builds", + "components.downloadList.links.buildingFromSource": "Building Node.js from source on supported platforms", + "components.downloadList.links.installingOnLinux": "Installing Node.js via binary archive", + "components.downloadList.links.installingOnWsl": "Install on Windows Subsystem for Linux (WSL)", + "components.downloadReleasesTable.changelog": "Registre de Canvis", + "components.downloadReleasesTable.releases": "Releases", + "components.downloadReleasesTable.docs": "Documentació", + "components.header.buttons.toggleLanguage": "Toggle Language", + "components.header.buttons.toggleDarkMode": "Toggle dark/light mode", + "components.pagination.next": "Següent | ", + "components.pagination.previous": "Anterior", + "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", + "layouts.blogIndex.currentYear": "News from {year}" +} From f6d55386d024127cb16cc85740d01977d590c513 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Wed, 12 Apr 2023 14:36:45 +0200 Subject: [PATCH 15/37] feat(shellbox): update with feedback --- .../__snapshots__/index.test.tsx.snap | 25 ------------------- .../Common/ShellBox/__tests__/index.test.tsx | 4 +-- hooks/useCopyToClipboard.ts | 5 ++-- 3 files changed, 4 insertions(+), 30 deletions(-) delete mode 100644 components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap diff --git a/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap b/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap deleted file mode 100644 index 86ea7deddb88c..0000000000000 --- a/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,25 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ShellBox component renders correctly 1`] = ` -
- 
-    

-      
-        SHELL
-      
-      
-    

-    
-      mock-children-code
-    
-
-
-`; diff --git a/components/Common/ShellBox/__tests__/index.test.tsx b/components/Common/ShellBox/__tests__/index.test.tsx index 7341701143277..83d84e71ba462 100644 --- a/components/Common/ShellBox/__tests__/index.test.tsx +++ b/components/Common/ShellBox/__tests__/index.test.tsx @@ -10,13 +10,13 @@ Object.assign(navigator, { }, }); -const navigatorClipboardSpy = jest.spyOn(navigator.clipboard, 'writeText'); - afterEach(() => { jest.clearAllMocks(); }); describe('ShellBox component', (): void => { + const navigatorClipboardSpy = jest.spyOn(navigator.clipboard, 'writeText'); + it('renders content correctly', (): void => { const textToCopy = 'text to be copy'; const { container } = render( diff --git a/hooks/useCopyToClipboard.ts b/hooks/useCopyToClipboard.ts index 7d67785a77a55..8db2d6d50a550 100644 --- a/hooks/useCopyToClipboard.ts +++ b/hooks/useCopyToClipboard.ts @@ -11,8 +11,7 @@ const copyToClipboard = (value: string) => { .catch(() => false); }; -// eslint-disable-next-line no-unused-vars -export const useCopyToClipboard = (): [boolean, (text: string) => void] => { +export const useCopyToClipboard = () => { const [copied, setCopied] = useState(false); const copyText = (text: string) => copyToClipboard(text).then(setCopied); @@ -27,5 +26,5 @@ export const useCopyToClipboard = (): [boolean, (text: string) => void] => { return undefined; }, [copied]); - return [copied, copyText]; + return [copied, copyText] as const; }; From 1dcbd5abad0168c35818690c402b84f7ef3bd859 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Sat, 15 Apr 2023 22:41:18 +0200 Subject: [PATCH 16/37] feat(ShellBox): fix unit test --- .../__snapshots__/index.test.tsx.snap | 7 ++ .../Common/ShellBox/__tests__/index.test.tsx | 70 +++++++++++-------- hooks/__test__/useCopyToClipboard.test.tsx | 70 ++++++------------- 3 files changed, 67 insertions(+), 80 deletions(-) create mode 100644 components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap diff --git a/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap b/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap new file mode 100644 index 0000000000000..48f5983e8d071 --- /dev/null +++ b/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap @@ -0,0 +1,7 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`ShellBox should render 1`] = ` + + test + +`; diff --git a/components/Common/ShellBox/__tests__/index.test.tsx b/components/Common/ShellBox/__tests__/index.test.tsx index 83d84e71ba462..8a84ba451309f 100644 --- a/components/Common/ShellBox/__tests__/index.test.tsx +++ b/components/Common/ShellBox/__tests__/index.test.tsx @@ -1,43 +1,51 @@ import React from 'react'; -import userEvent from '@testing-library/user-event'; import { render, screen } from '@testing-library/react'; - +import { LocaleProvider } from '../../../../providers/localeProvider'; +import userEvent from '@testing-library/user-event'; +import { AppProps } from '../../../../types'; import ShellBox from '../index'; -Object.assign(navigator, { - clipboard: { - writeText: jest.fn(), - }, -}); +const mockWriteText = jest.fn(); +const i18nData = { currentLocale: { code: 'en' } } as AppProps['i18nData']; -afterEach(() => { - jest.clearAllMocks(); +Object.defineProperty(window, 'navigator', { + value: { + clipboard: { + writeText: mockWriteText, + }, + }, }); -describe('ShellBox component', (): void => { - const navigatorClipboardSpy = jest.spyOn(navigator.clipboard, 'writeText'); - - it('renders content correctly', (): void => { - const textToCopy = 'text to be copy'; - const { container } = render( - mock-children-code +describe('ShellBox', () => { + it('should render', () => { + render( + + test + ); - expect(container).toMatchSnapshot(); + expect(screen.getByText('test')).toMatchSnapshot(); }); - it('renders copy button correctly', async () => { - const textToCopy = 'text to be copy'; - - render(mock-children-code); - - navigatorClipboardSpy.mockImplementationOnce(() => Promise.resolve()); - - const buttonElement = screen.getByText('copy'); - userEvent.click(buttonElement); - - await screen.findByText('copied'); - - expect(navigatorClipboardSpy).toHaveBeenCalledTimes(1); - expect(navigatorClipboardSpy).toHaveBeenCalledWith(textToCopy); + it('should call clipboard API with `test` once', () => { + const navigatorClipboardWriteTextSpy = jest + .fn() + .mockImplementation(() => Promise.resolve()); + + Object.defineProperty(window.navigator, 'clipboard', { + writable: true, + value: { + writeText: navigatorClipboardWriteTextSpy, + }, + }); + + render( + + test + + ); + const button = screen.getByRole('button'); + userEvent.click(button); + expect(navigatorClipboardWriteTextSpy).toHaveBeenCalledTimes(1); + expect(navigatorClipboardWriteTextSpy).toHaveBeenCalledWith('test'); }); }); diff --git a/hooks/__test__/useCopyToClipboard.test.tsx b/hooks/__test__/useCopyToClipboard.test.tsx index efbc8a9b1180d..45cd5cae035d9 100644 --- a/hooks/__test__/useCopyToClipboard.test.tsx +++ b/hooks/__test__/useCopyToClipboard.test.tsx @@ -1,62 +1,34 @@ import React from 'react'; -import { render, fireEvent, screen, waitFor } from '@testing-library/react'; +import { render, fireEvent, screen } from '@testing-library/react'; import { FormattedMessage } from 'react-intl'; import { useCopyToClipboard } from '../useCopyToClipboard'; +import { LocaleProvider } from '../../providers/localeProvider'; +import { AppProps } from '../../types'; + +const mockWriteText = jest.fn(); +const i18nData = { currentLocale: { code: 'en' } } as AppProps['i18nData']; + +Object.defineProperty(window, 'navigator', { + value: { + clipboard: { + writeText: mockWriteText, + }, + }, +}); describe('useCopyToClipboard', () => { - const HookRenderer = ({ text }: { text: string }) => { + const TestComponent = ({ textToCopy }: { textToCopy: string }) => { const [copied, copyText] = useCopyToClipboard(); return ( - + + + ); }; - it('should have `copy` text when failed', async () => { - const navigatorClipboardWriteTextSpy = jest - .fn() - .mockImplementation(() => Promise.reject()); - - Object.defineProperty(window.navigator, 'clipboard', { - writable: true, - value: { - writeText: navigatorClipboardWriteTextSpy, - }, - }); - - render(); - const button = screen.getByRole('button'); - fireEvent.click(button); - expect(button).toHaveTextContent('copy'); - }); - - it('should change to `copied` when copy succeeded', async () => { - jest.useFakeTimers(); - const navigatorClipboardWriteTextSpy = jest - .fn() - .mockImplementation(() => Promise.resolve()); - - Object.defineProperty(window.navigator, 'clipboard', { - writable: true, - value: { - writeText: navigatorClipboardWriteTextSpy, - }, - }); - - render(); - const button = screen.getByRole('button'); - fireEvent.click(button); - await waitFor(() => { - expect(button).toHaveTextContent('copied'); - }); - jest.advanceTimersByTime(3000); - await waitFor(() => { - expect(button).toHaveTextContent('copy'); - }); - }); - it('should call clipboard API with `test` once', () => { const navigatorClipboardWriteTextSpy = jest .fn() @@ -69,7 +41,7 @@ describe('useCopyToClipboard', () => { }, }); - render(); + render(); const button = screen.getByRole('button'); fireEvent.click(button); expect(navigatorClipboardWriteTextSpy).toHaveBeenCalledTimes(1); From f1010357c75df537bbd0671b289d2ffabda2375a Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Sat, 15 Apr 2023 22:52:33 +0200 Subject: [PATCH 17/37] fix: fails from rebase --- jest.config.mjs | 2 ++ 1 file changed, 2 insertions(+) diff --git a/jest.config.mjs b/jest.config.mjs index fbefd26e4c2e1..2c917d37c20ce 100644 --- a/jest.config.mjs +++ b/jest.config.mjs @@ -7,6 +7,8 @@ const createJestConfig = nextJest({ /** @type {import('jest').Config} */ const customJestConfig = { setupFilesAfterEnv: ['/jest.setup.js'], + moduleDirectories: ['node_modules', '/'], + testEnvironment: 'jest-environment-jsdom', }; export default createJestConfig(customJestConfig); From c19080162bdfa0569ab19283d0c1cb04c7261866 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Sat, 15 Apr 2023 23:31:05 +0200 Subject: [PATCH 18/37] feat(shellbox): update with feedback --- .../__snapshots__/index.test.tsx.snap | 24 ++++++++++++++++--- .../Common/ShellBox/__tests__/index.test.tsx | 6 ++--- components/Common/ShellBox/index.tsx | 7 ++++-- package-lock.json | 2 +- package.json | 2 +- 5 files changed, 31 insertions(+), 10 deletions(-) diff --git a/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap b/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap index 48f5983e8d071..0a18a22852632 100644 --- a/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap +++ b/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap @@ -1,7 +1,25 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ShellBox should render 1`] = ` - - test - +
+ 
+    

+      
+        SHELL
+      
+      
+    

+    
+      test
+    
+
+
`; diff --git a/components/Common/ShellBox/__tests__/index.test.tsx b/components/Common/ShellBox/__tests__/index.test.tsx index 8a84ba451309f..bee13e1e8e0af 100644 --- a/components/Common/ShellBox/__tests__/index.test.tsx +++ b/components/Common/ShellBox/__tests__/index.test.tsx @@ -18,12 +18,12 @@ Object.defineProperty(window, 'navigator', { describe('ShellBox', () => { it('should render', () => { - render( + const { container } = render( - test + test ); - expect(screen.getByText('test')).toMatchSnapshot(); + expect(container).toMatchSnapshot(); }); it('should call clipboard API with `test` once', () => { diff --git a/components/Common/ShellBox/index.tsx b/components/Common/ShellBox/index.tsx index 3450027f0357f..430f7700be25e 100644 --- a/components/Common/ShellBox/index.tsx +++ b/components/Common/ShellBox/index.tsx @@ -2,9 +2,11 @@ import React from 'react'; import { FormattedMessage } from 'react-intl'; import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard'; import styles from './index.module.scss'; +import ReactDomServer from 'react-dom/server'; interface Props { - textToCopy: string; + children: React.ReactNode; + textToCopy?: string; } const ShellBox = ({ children, textToCopy }: React.PropsWithChildren) => { @@ -12,7 +14,8 @@ const ShellBox = ({ children, textToCopy }: React.PropsWithChildren) => { const handleCopyCode = async (event: React.MouseEvent) => { event.preventDefault(); - copyText(textToCopy); + const text = textToCopy? textToCopy : ReactDomServer.renderToString(children); + await copyText(text); }; return ( diff --git a/package-lock.json b/package-lock.json index 3f65acc7b4da2..bfecbc494e178 100644 --- a/package-lock.json +++ b/package-lock.json @@ -25599,4 +25599,4 @@ } } } -} \ No newline at end of file +} diff --git a/package.json b/package.json index 19cd2171d93e5..3df4b9f8a5579 100644 --- a/package.json +++ b/package.json @@ -95,4 +95,4 @@ "stylelint-selector-bem-pattern": "^2.1.1", "typescript": "^4.9.5" } -} \ No newline at end of file +} From d52080b992b4b1d03dec6a2e393bff57fa838af2 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Sun, 16 Apr 2023 22:18:00 +0200 Subject: [PATCH 19/37] feat(shellbox): update with feedback --- .eslintignore | 3 +- .prettierignore | 3 +- .../__snapshots__/index.test.tsx.snap | 25 -------- .../Common/ShellBox/__tests__/index.test.tsx | 37 +++++++----- components/Common/ShellBox/index.tsx | 17 ++++-- hooks/__test__/useCopyToClipboard.test.tsx | 8 +-- package-lock.json | 60 ------------------- 7 files changed, 38 insertions(+), 115 deletions(-) delete mode 100644 components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap diff --git a/.eslintignore b/.eslintignore index 079774e647f6d..0cd5b548def9c 100644 --- a/.eslintignore +++ b/.eslintignore @@ -8,7 +8,6 @@ public/static/documents public/static/legacy # We don't want to lint/prettify the Coverage Results -tests coverage # MDX Plugin enforces Prettier formatting which should @@ -17,4 +16,4 @@ coverage pages/**/*.md # We shouldn't lint statically generated Storybook files -storybook-static +storybook-static \ No newline at end of file diff --git a/.prettierignore b/.prettierignore index 5b6bc91cdfafc..e8ddb2ee19fcd 100644 --- a/.prettierignore +++ b/.prettierignore @@ -8,7 +8,6 @@ public/static/documents public/static/legacy # We don't want to lint/prettify the Coverage Results -tests coverage # MDX Plugin enforces Prettier formatting which should @@ -21,4 +20,4 @@ pages/**/*.md scripts/release-post/template.hbs # We shouldn't lint statically generated Storybook files -storybook-static +storybook-static \ No newline at end of file diff --git a/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap b/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap deleted file mode 100644 index 0a18a22852632..0000000000000 --- a/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap +++ /dev/null @@ -1,25 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`ShellBox should render 1`] = ` -
- 
-    

-      
-        SHELL
-      
-      
-    

-    
-      test
-    
-
-
-`; diff --git a/components/Common/ShellBox/__tests__/index.test.tsx b/components/Common/ShellBox/__tests__/index.test.tsx index bee13e1e8e0af..d5c49a593abac 100644 --- a/components/Common/ShellBox/__tests__/index.test.tsx +++ b/components/Common/ShellBox/__tests__/index.test.tsx @@ -1,27 +1,34 @@ import React from 'react'; import { render, screen } from '@testing-library/react'; -import { LocaleProvider } from '../../../../providers/localeProvider'; import userEvent from '@testing-library/user-event'; -import { AppProps } from '../../../../types'; +import { IntlProvider } from 'react-intl'; import ShellBox from '../index'; const mockWriteText = jest.fn(); -const i18nData = { currentLocale: { code: 'en' } } as AppProps['i18nData']; - -Object.defineProperty(window, 'navigator', { - value: { - clipboard: { - writeText: mockWriteText, - }, - }, -}); +const originalNavigator = { ...window.navigator }; describe('ShellBox', () => { + beforeEach(() => { + Object.defineProperty(window, 'navigator', { + value: { + clipboard: { + writeText: mockWriteText, + }, + }, + }); + }); + + afterEach(() => { + Object.defineProperty(window, 'navigator', { + value: originalNavigator, + }); + }); + it('should render', () => { const { container } = render( - + test - + ); expect(container).toMatchSnapshot(); }); @@ -39,9 +46,9 @@ describe('ShellBox', () => { }); render( - + test - + ); const button = screen.getByRole('button'); userEvent.click(button); diff --git a/components/Common/ShellBox/index.tsx b/components/Common/ShellBox/index.tsx index 430f7700be25e..26ac851145b43 100644 --- a/components/Common/ShellBox/index.tsx +++ b/components/Common/ShellBox/index.tsx @@ -1,4 +1,4 @@ -import React from 'react'; +import React, { useCallback } from 'react'; import { FormattedMessage } from 'react-intl'; import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard'; import styles from './index.module.scss'; @@ -12,11 +12,16 @@ interface Props { const ShellBox = ({ children, textToCopy }: React.PropsWithChildren) => { const [copied, copyText] = useCopyToClipboard(); - const handleCopyCode = async (event: React.MouseEvent) => { - event.preventDefault(); - const text = textToCopy? textToCopy : ReactDomServer.renderToString(children); - await copyText(text); - }; + const handleCopyCode = useCallback( + async (event: React.MouseEvent) => { + event.preventDefault(); + const text = textToCopy + ? textToCopy + : ReactDomServer.renderToString(children); + await copyText(text); + }, + [textToCopy, children, copyText] + ); return ( 
diff --git a/hooks/__test__/useCopyToClipboard.test.tsx b/hooks/__test__/useCopyToClipboard.test.tsx
index 45cd5cae035d9..2e37212743c67 100644
--- a/hooks/__test__/useCopyToClipboard.test.tsx
+++ b/hooks/__test__/useCopyToClipboard.test.tsx
@@ -2,11 +2,9 @@ import React from 'react';
 import { render, fireEvent, screen } from '@testing-library/react';
 import { FormattedMessage } from 'react-intl';
 import { useCopyToClipboard } from '../useCopyToClipboard';
-import { LocaleProvider } from '../../providers/localeProvider';
-import { AppProps } from '../../types';
+import { IntlProvider } from 'react-intl';
 
 const mockWriteText = jest.fn();
-const i18nData = { currentLocale: { code: 'en' } } as AppProps['i18nData'];
 
 Object.defineProperty(window, 'navigator', {
   value: {
@@ -21,11 +19,11 @@ describe('useCopyToClipboard', () => {
     const [copied, copyText] = useCopyToClipboard();
 
     return (
-      
+      
         
-      
+      
     );
   };
 
diff --git a/package-lock.json b/package-lock.json
index bfecbc494e178..b30ee21351f75 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25537,66 +25537,6 @@
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
-    },
-    "node_modules/@next/swc-android-arm-eabi": {
-      "version": "13.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.2.4.tgz",
-      "integrity": "sha512-DWlalTSkLjDU11MY11jg17O1gGQzpRccM9Oes2yTqj2DpHndajrXHGxj9HGtJ+idq2k7ImUdJVWS2h2l/EDJOw==",
-      "cpu": [
-        "arm"
-      ],
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-android-arm64": {
-      "version": "13.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.2.4.tgz",
-      "integrity": "sha512-sRavmUImUCf332Gy+PjIfLkMhiRX1Ez4SI+3vFDRs1N5eXp+uNzjFUK/oLMMOzk6KFSkbiK/3Wt8+dHQR/flNg==",
-      "cpu": [
-        "arm64"
-      ],
-      "optional": true,
-      "os": [
-        "android"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-freebsd-x64": {
-      "version": "13.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.2.4.tgz",
-      "integrity": "sha512-kkbzKVZGPaXRBPisoAQkh3xh22r+TD+5HwoC5bOkALraJ0dsOQgSMAvzMXKsN3tMzJUPS0tjtRf1cTzrQ0I5vQ==",
-      "cpu": [
-        "x64"
-      ],
-      "optional": true,
-      "os": [
-        "freebsd"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
-    },
-    "node_modules/@next/swc-linux-arm-gnueabihf": {
-      "version": "13.2.4",
-      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.2.4.tgz",
-      "integrity": "sha512-7qA1++UY0fjprqtjBZaOA6cas/7GekpjVsZn/0uHvquuITFCdKGFCsKNBx3S0Rpxmx6WYo0GcmhNRM9ru08BGg==",
-      "cpu": [
-        "arm"
-      ],
-      "optional": true,
-      "os": [
-        "linux"
-      ],
-      "engines": {
-        "node": ">= 10"
-      }
     }
   }
 }

From 3a70e09c34036c0d1629d70ed2435769d3001d93 Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com>
Date: Mon, 17 Apr 2023 15:33:59 +0200
Subject: [PATCH 20/37] fix

---
 .eslintignore                                       | 2 +-
 .prettierignore                                     | 2 +-
 components/Common/ShellBox/__tests__/index.test.tsx | 5 +++--
 components/Common/ShellBox/index.tsx                | 5 +++--
 hooks/__test__/useCopyToClipboard.test.tsx          | 8 ++++++--
 5 files changed, 14 insertions(+), 8 deletions(-)

diff --git a/.eslintignore b/.eslintignore
index 0cd5b548def9c..db1be353cbff8 100644
--- a/.eslintignore
+++ b/.eslintignore
@@ -16,4 +16,4 @@ coverage
 pages/**/*.md
 
 # We shouldn't lint statically generated Storybook files
-storybook-static
\ No newline at end of file
+storybook-static
diff --git a/.prettierignore b/.prettierignore
index e8ddb2ee19fcd..3fa9258b4d5ad 100644
--- a/.prettierignore
+++ b/.prettierignore
@@ -20,4 +20,4 @@ pages/**/*.md
 scripts/release-post/template.hbs
 
 # We shouldn't lint statically generated Storybook files
-storybook-static
\ No newline at end of file
+storybook-static
diff --git a/components/Common/ShellBox/__tests__/index.test.tsx b/components/Common/ShellBox/__tests__/index.test.tsx
index d5c49a593abac..8ae4d4c3be738 100644
--- a/components/Common/ShellBox/__tests__/index.test.tsx
+++ b/components/Common/ShellBox/__tests__/index.test.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from 'react-intl';
+import messages from '../../../../i18n/locales/en.json';
 import ShellBox from '../index';
 
 const mockWriteText = jest.fn();
@@ -26,7 +27,7 @@ describe('ShellBox', () => {
 
   it('should render', () => {
     const { container } = render(
-      
+      
         test
       
     );
@@ -46,7 +47,7 @@ describe('ShellBox', () => {
     });
 
     render(
-      
+      
         test
       
     );
diff --git a/components/Common/ShellBox/index.tsx b/components/Common/ShellBox/index.tsx
index 26ac851145b43..24757584fc444 100644
--- a/components/Common/ShellBox/index.tsx
+++ b/components/Common/ShellBox/index.tsx
@@ -5,7 +5,7 @@ import styles from './index.module.scss';
 import ReactDomServer from 'react-dom/server';
 
 interface Props {
-  children: React.ReactNode;
+  children: React.ReactNode | undefined;
   textToCopy?: string;
 }
 
@@ -17,9 +17,10 @@ const ShellBox = ({ children, textToCopy }: React.PropsWithChildren) => {
       event.preventDefault();
       const text = textToCopy
         ? textToCopy
-        : ReactDomServer.renderToString(children);
+        : ReactDomServer.renderToString(<>children);
       await copyText(text);
     },
+    //eslint-disable-next-line react-hooks/exhaustive-deps
     [textToCopy, children, copyText]
   );
 
diff --git a/hooks/__test__/useCopyToClipboard.test.tsx b/hooks/__test__/useCopyToClipboard.test.tsx
index 2e37212743c67..df3086228949c 100644
--- a/hooks/__test__/useCopyToClipboard.test.tsx
+++ b/hooks/__test__/useCopyToClipboard.test.tsx
@@ -3,6 +3,7 @@ import { render, fireEvent, screen } from '@testing-library/react';
 import { FormattedMessage } from 'react-intl';
 import { useCopyToClipboard } from '../useCopyToClipboard';
 import { IntlProvider } from 'react-intl';
+import messages from '../../i18n/locales/en.json';
 
 const mockWriteText = jest.fn();
 
@@ -19,9 +20,12 @@ describe('useCopyToClipboard', () => {
     const [copied, copyText] = useCopyToClipboard();
 
     return (
-      
+      
         
       
     );

From f09de81b5d3011fb6ecedddd2d7ae3e5aca137a4 Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com>
Date: Mon, 17 Apr 2023 17:05:15 +0200
Subject: [PATCH 21/37] fix rebase

---
 package-lock.json | 60 +++++++++++++++++++++++++++++++++++++++++++++++
 1 file changed, 60 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index b30ee21351f75..bfecbc494e178 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -25537,6 +25537,66 @@
         "type": "github",
         "url": "https://github.com/sponsors/wooorm"
       }
+    },
+    "node_modules/@next/swc-android-arm-eabi": {
+      "version": "13.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm-eabi/-/swc-android-arm-eabi-13.2.4.tgz",
+      "integrity": "sha512-DWlalTSkLjDU11MY11jg17O1gGQzpRccM9Oes2yTqj2DpHndajrXHGxj9HGtJ+idq2k7ImUdJVWS2h2l/EDJOw==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-android-arm64": {
+      "version": "13.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-android-arm64/-/swc-android-arm64-13.2.4.tgz",
+      "integrity": "sha512-sRavmUImUCf332Gy+PjIfLkMhiRX1Ez4SI+3vFDRs1N5eXp+uNzjFUK/oLMMOzk6KFSkbiK/3Wt8+dHQR/flNg==",
+      "cpu": [
+        "arm64"
+      ],
+      "optional": true,
+      "os": [
+        "android"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-freebsd-x64": {
+      "version": "13.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-freebsd-x64/-/swc-freebsd-x64-13.2.4.tgz",
+      "integrity": "sha512-kkbzKVZGPaXRBPisoAQkh3xh22r+TD+5HwoC5bOkALraJ0dsOQgSMAvzMXKsN3tMzJUPS0tjtRf1cTzrQ0I5vQ==",
+      "cpu": [
+        "x64"
+      ],
+      "optional": true,
+      "os": [
+        "freebsd"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
+    },
+    "node_modules/@next/swc-linux-arm-gnueabihf": {
+      "version": "13.2.4",
+      "resolved": "https://registry.npmjs.org/@next/swc-linux-arm-gnueabihf/-/swc-linux-arm-gnueabihf-13.2.4.tgz",
+      "integrity": "sha512-7qA1++UY0fjprqtjBZaOA6cas/7GekpjVsZn/0uHvquuITFCdKGFCsKNBx3S0Rpxmx6WYo0GcmhNRM9ru08BGg==",
+      "cpu": [
+        "arm"
+      ],
+      "optional": true,
+      "os": [
+        "linux"
+      ],
+      "engines": {
+        "node": ">= 10"
+      }
     }
   }
 }

From deaacc88a2482dff925e2ad3f8fe0025b76f40ff Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com>
Date: Mon, 17 Apr 2023 22:14:49 +0200
Subject: [PATCH 22/37] fix(unit test): jest env

---
 .../__snapshots__/index.test.tsx.snap         | 25 +++++++++++++++++++
 jest.config.mjs                               |  2 +-
 util/jest-environment-jsdom.ts                | 21 ++++++++++++++++
 3 files changed, 47 insertions(+), 1 deletion(-)
 create mode 100644 components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap
 create mode 100644 util/jest-environment-jsdom.ts

diff --git a/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap b/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap
new file mode 100644
index 0000000000000..7dd6d1013163f
--- /dev/null
+++ b/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap
@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ShellBox should render 1`] = `
+

+  
+    

+      
+        SHELL
+      
+      
+    

+    
+      test
+    
+  

+

+`;
diff --git a/jest.config.mjs b/jest.config.mjs
index 2c917d37c20ce..d2d6303a968e8 100644
--- a/jest.config.mjs
+++ b/jest.config.mjs
@@ -8,7 +8,7 @@ const createJestConfig = nextJest({
 const customJestConfig = {
   setupFilesAfterEnv: ['/jest.setup.js'],
   moduleDirectories: ['node_modules', '/'],
-  testEnvironment: 'jest-environment-jsdom',
+  testEnvironment: './util/jest-environment-jsdom.ts',
 };
 
 export default createJestConfig(customJestConfig);
diff --git a/util/jest-environment-jsdom.ts b/util/jest-environment-jsdom.ts
new file mode 100644
index 0000000000000..478fe68ef0eba
--- /dev/null
+++ b/util/jest-environment-jsdom.ts
@@ -0,0 +1,21 @@
+'use strict';
+import { TextEncoder, TextDecoder } from 'util';
+import {
+  default as $JSDOMEnvironment,
+  TestEnvironment,
+} from 'jest-environment-jsdom';
+
+Object.defineProperty(exports, '__esModule', {
+  value: true,
+});
+
+class JSDOMEnvironment extends $JSDOMEnvironment {
+  constructor(...args) {
+    const { global } = super(...args);
+    if (!global.TextEncoder) global.TextEncoder = TextEncoder;
+    if (!global.TextDecoder) global.TextDecoder = TextDecoder;
+  }
+}
+
+export default JSDOMEnvironment;
+export { TestEnvironment };

From eb7d596bb3e438742d24332b35cc4eb9f3a9592a Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com>
Date: Mon, 17 Apr 2023 22:24:09 +0200
Subject: [PATCH 23/37] fix build

---
 util/jest-environment-jsdom.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/util/jest-environment-jsdom.ts b/util/jest-environment-jsdom.ts
index 478fe68ef0eba..e8985c294e04d 100644
--- a/util/jest-environment-jsdom.ts
+++ b/util/jest-environment-jsdom.ts
@@ -10,8 +10,8 @@ Object.defineProperty(exports, '__esModule', {
 });
 
 class JSDOMEnvironment extends $JSDOMEnvironment {
-  constructor(...args) {
-    const { global } = super(...args);
+  constructor(...args: any[]) {
+    const { global }: any = super(args[0], args[1]);
     if (!global.TextEncoder) global.TextEncoder = TextEncoder;
     if (!global.TextDecoder) global.TextDecoder = TextDecoder;
   }

From b4d9e23388f8d1af549ee5489336f8f63c217217 Mon Sep 17 00:00:00 2001
From: Augustin Mauroy 
Date: Tue, 18 Apr 2023 21:24:44 +0200
Subject: [PATCH 24/37] Update components/Common/ShellBox/index.tsx

Co-authored-by: Shanmughapriyan S 
Signed-off-by: Augustin Mauroy 
---
 components/Common/ShellBox/index.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/components/Common/ShellBox/index.tsx b/components/Common/ShellBox/index.tsx
index 24757584fc444..3c4d845dbd9d9 100644
--- a/components/Common/ShellBox/index.tsx
+++ b/components/Common/ShellBox/index.tsx
@@ -5,7 +5,6 @@ import styles from './index.module.scss';
 import ReactDomServer from 'react-dom/server';
 
 interface Props {
-  children: React.ReactNode | undefined;
   textToCopy?: string;
 }
 

From d5f4fc4febb8c4188934b1cd7978b3dad61008fd Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com>
Date: Wed, 19 Apr 2023 18:38:54 +0200
Subject: [PATCH 25/37] update with review

---
 .../__snapshots__/index.test.tsx.snap         |  2 +-
 .../Common/ShellBox/__tests__/index.test.tsx  |  5 ++---
 components/Common/ShellBox/index.tsx          |  5 +++--
 hooks/__test__/useCopyToClipboard.test.tsx    |  3 +--
 jest.config.mjs                               |  2 +-
 util/jest-environment-jsdom.ts                | 21 -------------------
 6 files changed, 8 insertions(+), 30 deletions(-)
 delete mode 100644 util/jest-environment-jsdom.ts

diff --git a/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap b/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap
index 7dd6d1013163f..0a18a22852632 100644
--- a/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap
+++ b/components/Common/ShellBox/__tests__/__snapshots__/index.test.tsx.snap
@@ -14,7 +14,7 @@ exports[`ShellBox should render 1`] = `
       
     
     
diff --git a/components/Common/ShellBox/__tests__/index.test.tsx b/components/Common/ShellBox/__tests__/index.test.tsx
index 8ae4d4c3be738..832a41b7acfd8 100644
--- a/components/Common/ShellBox/__tests__/index.test.tsx
+++ b/components/Common/ShellBox/__tests__/index.test.tsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { IntlProvider } from 'react-intl';
-import messages from '../../../../i18n/locales/en.json';
 import ShellBox from '../index';
 
 const mockWriteText = jest.fn();
@@ -27,7 +26,7 @@ describe('ShellBox', () => {
 
   it('should render', () => {
     const { container } = render(
-      
+       {}}>
         test
       
     );
@@ -47,7 +46,7 @@ describe('ShellBox', () => {
     });
 
     render(
-      
+       {}}>
         test
       
     );
diff --git a/components/Common/ShellBox/index.tsx b/components/Common/ShellBox/index.tsx
index 24757584fc444..e9b090b874252 100644
--- a/components/Common/ShellBox/index.tsx
+++ b/components/Common/ShellBox/index.tsx
@@ -2,7 +2,7 @@ import React, { useCallback } from 'react';
 import { FormattedMessage } from 'react-intl';
 import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard';
 import styles from './index.module.scss';
-import ReactDomServer from 'react-dom/server';
+import { createRoot } from 'react-dom/client';
 
 interface Props {
   children: React.ReactNode | undefined;
@@ -17,7 +17,8 @@ const ShellBox = ({ children, textToCopy }: React.PropsWithChildren) => {
       event.preventDefault();
       const text = textToCopy
         ? textToCopy
-        : ReactDomServer.renderToString(<>children);
+        : createRoot(document.body).render(children) as string;
+
       await copyText(text);
     },
     //eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/hooks/__test__/useCopyToClipboard.test.tsx b/hooks/__test__/useCopyToClipboard.test.tsx
index df3086228949c..5abff46d5b922 100644
--- a/hooks/__test__/useCopyToClipboard.test.tsx
+++ b/hooks/__test__/useCopyToClipboard.test.tsx
@@ -3,7 +3,6 @@ import { render, fireEvent, screen } from '@testing-library/react';
 import { FormattedMessage } from 'react-intl';
 import { useCopyToClipboard } from '../useCopyToClipboard';
 import { IntlProvider } from 'react-intl';
-import messages from '../../i18n/locales/en.json';
 
 const mockWriteText = jest.fn();
 
@@ -20,7 +19,7 @@ describe('useCopyToClipboard', () => {
     const [copied, copyText] = useCopyToClipboard();
 
     return (
-      
+       {}}>
         
       
-      {children}
+      {children}
); }; diff --git a/hooks/__test__/useCopyToClipboard.test.tsx b/hooks/__test__/useCopyToClipboard.test.tsx index 5abff46d5b922..5d98a0875532f 100644 --- a/hooks/__test__/useCopyToClipboard.test.tsx +++ b/hooks/__test__/useCopyToClipboard.test.tsx @@ -1,20 +1,29 @@ import React from 'react'; import { render, fireEvent, screen } from '@testing-library/react'; import { FormattedMessage } from 'react-intl'; -import { useCopyToClipboard } from '../useCopyToClipboard'; import { IntlProvider } from 'react-intl'; +import { useCopyToClipboard } from '../useCopyToClipboard'; const mockWriteText = jest.fn(); - -Object.defineProperty(window, 'navigator', { - value: { - clipboard: { - writeText: mockWriteText, - }, - }, -}); +const originalNavigator = { ...window.navigator }; describe('useCopyToClipboard', () => { + beforeEach(() => { + Object.defineProperty(window, 'navigator', { + value: { + clipboard: { + writeText: mockWriteText, + }, + }, + }); + }); + + afterEach(() => { + Object.defineProperty(window, 'navigator', { + value: originalNavigator, + }); + }); + const TestComponent = ({ textToCopy }: { textToCopy: string }) => { const [copied, copyText] = useCopyToClipboard(); diff --git a/hooks/useCopyToClipboard.ts b/hooks/useCopyToClipboard.ts index 8db2d6d50a550..39929781f0238 100644 --- a/hooks/useCopyToClipboard.ts +++ b/hooks/useCopyToClipboard.ts @@ -1,6 +1,9 @@ import { useEffect, useState } from 'react'; -const copyToClipboard = (value: string) => { +const copyToClipboard = (value: string | undefined) => { + if (!value) { + return Promise.resolve(false); + } if (typeof navigator === 'undefined') { return Promise.resolve(false); } @@ -14,7 +17,8 @@ const copyToClipboard = (value: string) => { export const useCopyToClipboard = () => { const [copied, setCopied] = useState(false); - const copyText = (text: string) => copyToClipboard(text).then(setCopied); + const copyText = (text: string | undefined) => + copyToClipboard(text).then(setCopied); useEffect(() => { if (copied) { diff --git a/i18n/locales/en.json b/i18n/locales/en.json index 1e95db860a2b1..7b02c51cce9eb 100644 --- a/i18n/locales/en.json +++ b/i18n/locales/en.json @@ -37,6 +37,7 @@ "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}", "layouts.blogIndex.currentYear": "News from {year}", "components.common.banner.button.text": "Read More", + "components.article.author.githubLinkLabel": "{username} Github - opens in new tab", "components.article.authorList.title": "Article Authors", "components.common.shellBox.copy": "{copied, select, true {copied}other {copy}}" } From ac3a56efc3f8c00aa8acc969a448a2ce9bd5da77 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Thu, 20 Apr 2023 18:17:32 +0200 Subject: [PATCH 28/37] fix: fit with new contrib guideline --- .../Common/ShellBox/__tests__/index.test.tsx | 1 - components/Common/ShellBox/index.stories.tsx | 42 ++++++++++++++++--- components/Common/ShellBox/index.tsx | 15 ++++--- hooks/__test__/useCopyToClipboard.test.tsx | 1 - hooks/useCopyToClipboard.ts | 5 +-- 5 files changed, 48 insertions(+), 16 deletions(-) diff --git a/components/Common/ShellBox/__tests__/index.test.tsx b/components/Common/ShellBox/__tests__/index.test.tsx index 832a41b7acfd8..c7ca835d9d58f 100644 --- a/components/Common/ShellBox/__tests__/index.test.tsx +++ b/components/Common/ShellBox/__tests__/index.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render, screen } from '@testing-library/react'; import userEvent from '@testing-library/user-event'; import { IntlProvider } from 'react-intl'; diff --git a/components/Common/ShellBox/index.stories.tsx b/components/Common/ShellBox/index.stories.tsx index a91abcef11db9..a5996d32a1fc9 100644 --- a/components/Common/ShellBox/index.stories.tsx +++ b/components/Common/ShellBox/index.stories.tsx @@ -1,12 +1,44 @@ -import ShellBox from '.'; +import ShellBox from './index'; +import type { Meta as MetaObj, StoryObj } from '@storybook/react'; -export default { - component: ShellBox, -}; +type Story = StoryObj; +type Meta = MetaObj; -export const Default = { +export const Default: Story = { args: { children: 'Hello World', textToCopy: 'Hello World', }, }; + +export const WithoutTextToCopy: Story = { + args: { + children: 'Hello World', + }, +}; + +export const WithTextToCopyJsx: Story = { + args: { + children: ( + + $echo hello worl + + ), + textToCopy: '$echo hello world', + }, +}; + +export const WithoutTextToCopyJsx: Story = { + args: { + children: ( + + $hello world + + ), + textToCopy: 'hello world', + }, +}; + +export default { + component: ShellBox, +} as Meta; diff --git a/components/Common/ShellBox/index.tsx b/components/Common/ShellBox/index.tsx index 32f3121023553..536d4fc654de5 100644 --- a/components/Common/ShellBox/index.tsx +++ b/components/Common/ShellBox/index.tsx @@ -1,24 +1,29 @@ -import React, { useCallback, useRef } from 'react'; +import { useCallback, useRef } from 'react'; import { FormattedMessage } from 'react-intl'; import styles from './index.module.scss'; import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard'; +import type { FC, PropsWithChildren, MouseEvent, ReactNode } from 'react'; -type Props = { +type ShellBoxProps = { + children: string | ReactNode; textToCopy?: string; }; -const ShellBox = ({ children, textToCopy }: React.PropsWithChildren) => { +const ShellBox: FC = ({ + children, + textToCopy, +}: PropsWithChildren) => { const [copied, copyText] = useCopyToClipboard(); const shellBoxRef = useRef(null); const handleCopyCode = useCallback( - async (event: React.MouseEvent) => { + async (event: MouseEvent) => { event.preventDefault(); const text = textToCopy || shellBoxRef.current?.innerHTML; await copyText(text); }, - + // eslint-disable-next-line react-hooks/exhaustive-deps [textToCopy, children, copyText] ); diff --git a/hooks/__test__/useCopyToClipboard.test.tsx b/hooks/__test__/useCopyToClipboard.test.tsx index 5d98a0875532f..76756f9a3522d 100644 --- a/hooks/__test__/useCopyToClipboard.test.tsx +++ b/hooks/__test__/useCopyToClipboard.test.tsx @@ -1,4 +1,3 @@ -import React from 'react'; import { render, fireEvent, screen } from '@testing-library/react'; import { FormattedMessage } from 'react-intl'; import { IntlProvider } from 'react-intl'; diff --git a/hooks/useCopyToClipboard.ts b/hooks/useCopyToClipboard.ts index 39929781f0238..bd7b3a4cdeb33 100644 --- a/hooks/useCopyToClipboard.ts +++ b/hooks/useCopyToClipboard.ts @@ -1,10 +1,7 @@ import { useEffect, useState } from 'react'; const copyToClipboard = (value: string | undefined) => { - if (!value) { - return Promise.resolve(false); - } - if (typeof navigator === 'undefined') { + if (!value || typeof navigator === 'undefined') { return Promise.resolve(false); } From 6b36262d2b075c18430472a7b11e1c6c78d5f169 Mon Sep 17 00:00:00 2001 From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com> Date: Thu, 20 Apr 2023 18:20:23 +0200 Subject: [PATCH 29/37] feat(shellbox): simplify logic --- components/Common/ShellBox/index.tsx | 15 +++++---------- 1 file changed, 5 insertions(+), 10 deletions(-) diff --git a/components/Common/ShellBox/index.tsx b/components/Common/ShellBox/index.tsx index 536d4fc654de5..53da5c6de8a33 100644 --- a/components/Common/ShellBox/index.tsx +++ b/components/Common/ShellBox/index.tsx @@ -1,4 +1,4 @@ -import { useCallback, useRef } from 'react'; +import { useRef } from 'react'; import { FormattedMessage } from 'react-intl'; import styles from './index.module.scss'; import { useCopyToClipboard } from '../../../hooks/useCopyToClipboard'; @@ -17,15 +17,10 @@ const ShellBox: FC = ({ const shellBoxRef = useRef(null); - const handleCopyCode = useCallback( - async (event: MouseEvent) => { - event.preventDefault(); - const text = textToCopy || shellBoxRef.current?.innerHTML; - await copyText(text); - }, - // eslint-disable-next-line react-hooks/exhaustive-deps - [textToCopy, children, copyText] - ); + const handleCopyCode = async (event: MouseEvent) => { + event.preventDefault(); + await copyText(textToCopy || shellBoxRef.current?.innerHTML); + }; return ( 

From 455c087cf606f9d69d3c064c7b5b0c04d02437e3 Mon Sep 17 00:00:00 2001
From: Augustin Mauroy 
Date: Thu, 20 Apr 2023 21:50:43 +0200
Subject: [PATCH 30/37] Update components/Common/ShellBox/index.stories.tsx

Co-authored-by: Claudio Wunder 
Signed-off-by: Augustin Mauroy 
---
 components/Common/ShellBox/index.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/Common/ShellBox/index.stories.tsx b/components/Common/ShellBox/index.stories.tsx
index a5996d32a1fc9..c56a7e1626b45 100644
--- a/components/Common/ShellBox/index.stories.tsx
+++ b/components/Common/ShellBox/index.stories.tsx
@@ -21,7 +21,7 @@ export const WithTextToCopyJsx: Story = {
   args: {
     children: (
       
-        $echo hello worl
+        $echo hello world
       
     ),
     textToCopy: '$echo hello world',

From e2f0fc33d2f46a983809ad2c47e8534c1ca67df7 Mon Sep 17 00:00:00 2001
From: Augustin Mauroy 
Date: Thu, 20 Apr 2023 21:51:38 +0200
Subject: [PATCH 31/37] Update index.stories.tsx

Signed-off-by: Augustin Mauroy 
---
 components/Common/ShellBox/index.stories.tsx | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/components/Common/ShellBox/index.stories.tsx b/components/Common/ShellBox/index.stories.tsx
index c56a7e1626b45..e87b7415fe9a3 100644
--- a/components/Common/ShellBox/index.stories.tsx
+++ b/components/Common/ShellBox/index.stories.tsx
@@ -34,8 +34,7 @@ export const WithoutTextToCopyJsx: Story = {
       
         $hello world
       
-    ),
-    textToCopy: 'hello world',
+    )
   },
 };
 

From fb857df1742aa3f7fa99b5ac18f54b24fb087c89 Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com>
Date: Thu, 20 Apr 2023 21:55:22 +0200
Subject: [PATCH 32/37] fix

---
 components/Common/ShellBox/index.stories.tsx | 6 ++----
 components/Common/ShellBox/index.tsx         | 2 +-
 2 files changed, 3 insertions(+), 5 deletions(-)

diff --git a/components/Common/ShellBox/index.stories.tsx b/components/Common/ShellBox/index.stories.tsx
index e87b7415fe9a3..da38ee02eae1c 100644
--- a/components/Common/ShellBox/index.stories.tsx
+++ b/components/Common/ShellBox/index.stories.tsx
@@ -34,10 +34,8 @@ export const WithoutTextToCopyJsx: Story = {
       
         $hello world
       
-    )
+    ),
   },
 };
 
-export default {
-  component: ShellBox,
-} as Meta;
+export default { component: ShellBox } as Meta;
diff --git a/components/Common/ShellBox/index.tsx b/components/Common/ShellBox/index.tsx
index 53da5c6de8a33..0ad3e516f794e 100644
--- a/components/Common/ShellBox/index.tsx
+++ b/components/Common/ShellBox/index.tsx
@@ -9,7 +9,7 @@ type ShellBoxProps = {
   textToCopy?: string;
 };
 
-const ShellBox: FC = ({
+const ShellBox: FC> = ({
   children,
   textToCopy,
 }: PropsWithChildren) => {

From a91898bbd38baeaf407467a1a65de245163ee158 Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com>
Date: Sat, 22 Apr 2023 19:37:30 +0200
Subject: [PATCH 33/37] update test with feedback

---
 components/Common/ShellBox/__tests__/index.test.tsx | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/components/Common/ShellBox/__tests__/index.test.tsx b/components/Common/ShellBox/__tests__/index.test.tsx
index c7ca835d9d58f..7bc162c054e31 100644
--- a/components/Common/ShellBox/__tests__/index.test.tsx
+++ b/components/Common/ShellBox/__tests__/index.test.tsx
@@ -5,6 +5,7 @@ import ShellBox from '../index';
 
 const mockWriteText = jest.fn();
 const originalNavigator = { ...window.navigator };
+const user = userEvent.setup();
 
 describe('ShellBox', () => {
   beforeEach(() => {
@@ -32,7 +33,7 @@ describe('ShellBox', () => {
     expect(container).toMatchSnapshot();
   });
 
-  it('should call clipboard API with `test` once', () => {
+  it('should call clipboard API with `test` once', async () => {
     const navigatorClipboardWriteTextSpy = jest
       .fn()
       .mockImplementation(() => Promise.resolve());
@@ -50,7 +51,7 @@ describe('ShellBox', () => {
       
     );
     const button = screen.getByRole('button');
-    userEvent.click(button);
+    await user.click(button);
     expect(navigatorClipboardWriteTextSpy).toHaveBeenCalledTimes(1);
     expect(navigatorClipboardWriteTextSpy).toHaveBeenCalledWith('test');
   });

From d1286f1cd16ce98764c215c4d50cf0608524fd77 Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com>
Date: Sun, 23 Apr 2023 14:11:49 +0200
Subject: [PATCH 34/37] update unit test

---
 components/Common/ShellBox/__tests__/index.test.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Common/ShellBox/__tests__/index.test.tsx b/components/Common/ShellBox/__tests__/index.test.tsx
index 7bc162c054e31..925fe6d21dd62 100644
--- a/components/Common/ShellBox/__tests__/index.test.tsx
+++ b/components/Common/ShellBox/__tests__/index.test.tsx
@@ -5,9 +5,9 @@ import ShellBox from '../index';
 
 const mockWriteText = jest.fn();
 const originalNavigator = { ...window.navigator };
-const user = userEvent.setup();
-
 describe('ShellBox', () => {
+  const user = userEvent.setup();
+
   beforeEach(() => {
     Object.defineProperty(window, 'navigator', {
       value: {

From dbf1eeb45ae6744e942368a16e80131fb14fadc3 Mon Sep 17 00:00:00 2001
From: Augustin Mauroy <97875033+AugustinMauroy@users.noreply.github.com>
Date: Thu, 27 Apr 2023 20:44:59 +0200
Subject: [PATCH 35/37] update stories

---
 components/Common/ShellBox/index.stories.tsx | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/components/Common/ShellBox/index.stories.tsx b/components/Common/ShellBox/index.stories.tsx
index da38ee02eae1c..34b123ee00df1 100644
--- a/components/Common/ShellBox/index.stories.tsx
+++ b/components/Common/ShellBox/index.stories.tsx
@@ -6,14 +6,14 @@ type Meta = MetaObj;
 
 export const Default: Story = {
   args: {
-    children: 'Hello World',
-    textToCopy: 'Hello World',
+    children: 'echo hello world',
+    textToCopy: 'echo hello world',
   },
 };
 
 export const WithoutTextToCopy: Story = {
   args: {
-    children: 'Hello World',
+    children: 'echo hello world',
   },
 };
 
@@ -24,7 +24,7 @@ export const WithTextToCopyJsx: Story = {
         $echo hello world
       
     ),
-    textToCopy: '$echo hello world',
+    textToCopy: 'echo hello world',
   },
 };
 

From b50466f40b277a59a3783256b65d3fd5779beaca Mon Sep 17 00:00:00 2001
From: Augustin Mauroy 
Date: Mon, 1 May 2023 18:17:53 +0200
Subject: [PATCH 36/37] Update components/Common/ShellBox/index.tsx

Co-authored-by: Claudio Wunder 
Signed-off-by: Augustin Mauroy 
---
 components/Common/ShellBox/index.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/components/Common/ShellBox/index.tsx b/components/Common/ShellBox/index.tsx
index 0ad3e516f794e..97535dfa550a5 100644
--- a/components/Common/ShellBox/index.tsx
+++ b/components/Common/ShellBox/index.tsx
@@ -19,7 +19,11 @@ const ShellBox: FC> = ({
 
   const handleCopyCode = async (event: MouseEvent) => {
     event.preventDefault();
-    await copyText(textToCopy || shellBoxRef.current?.innerHTML);
+    // By default we want to use the textToCopy props but if it's absent
+    // we allow the user to copy by getting the inner HTML content of the Element
+    const _textToCopy = textToCopy || shellBoxRef.current?.innerHTML || '';
+
+    await copyText(_textToCopy.replace('$', '');
   };
 
   return (

From 9232761c7554eb68ddcaa1dcce83a52850db8c8b Mon Sep 17 00:00:00 2001
From: Augustin Mauroy 
Date: Mon, 1 May 2023 18:22:03 +0200
Subject: [PATCH 37/37] update with feedback

---
 components/Common/ShellBox/__tests__/index.test.tsx |  4 ++--
 components/Common/ShellBox/index.stories.tsx        | 10 ----------
 components/Common/ShellBox/index.tsx                |  2 +-
 3 files changed, 3 insertions(+), 13 deletions(-)

diff --git a/components/Common/ShellBox/__tests__/index.test.tsx b/components/Common/ShellBox/__tests__/index.test.tsx
index 925fe6d21dd62..9d764926a5d86 100644
--- a/components/Common/ShellBox/__tests__/index.test.tsx
+++ b/components/Common/ShellBox/__tests__/index.test.tsx
@@ -5,9 +5,8 @@ import ShellBox from '../index';
 
 const mockWriteText = jest.fn();
 const originalNavigator = { ...window.navigator };
-describe('ShellBox', () => {
-  const user = userEvent.setup();
 
+describe('ShellBox', () => {
   beforeEach(() => {
     Object.defineProperty(window, 'navigator', {
       value: {
@@ -34,6 +33,7 @@ describe('ShellBox', () => {
   });
 
   it('should call clipboard API with `test` once', async () => {
+    const user = userEvent.setup();
     const navigatorClipboardWriteTextSpy = jest
       .fn()
       .mockImplementation(() => Promise.resolve());
diff --git a/components/Common/ShellBox/index.stories.tsx b/components/Common/ShellBox/index.stories.tsx
index 34b123ee00df1..4e5fa06699427 100644
--- a/components/Common/ShellBox/index.stories.tsx
+++ b/components/Common/ShellBox/index.stories.tsx
@@ -28,14 +28,4 @@ export const WithTextToCopyJsx: Story = {
   },
 };
 
-export const WithoutTextToCopyJsx: Story = {
-  args: {
-    children: (
-      
-        $hello world
-      
-    ),
-  },
-};
-
 export default { component: ShellBox } as Meta;
diff --git a/components/Common/ShellBox/index.tsx b/components/Common/ShellBox/index.tsx
index 97535dfa550a5..273828e738ba1 100644
--- a/components/Common/ShellBox/index.tsx
+++ b/components/Common/ShellBox/index.tsx
@@ -23,7 +23,7 @@ const ShellBox: FC> = ({
     // we allow the user to copy by getting the inner HTML content of the Element
     const _textToCopy = textToCopy || shellBoxRef.current?.innerHTML || '';
 
-    await copyText(_textToCopy.replace('$', '');
+    await copyText(_textToCopy.replace('$', ''));
   };
 
   return (