@toptal/davinci-skeleton 5.0.2 → 6.0.0

package/.husky/pre-commit

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn lint-staged

package/.husky/pre-push

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+yarn davinci ci danger --local

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # Change Log
 
+## 6.0.0
+
+### Major Changes
+
+- [#1163](https://github.com/toptal/davinci/pull/1163) [`2c8d4c8b`](https://github.com/toptal/davinci/commit/2c8d4c8b405782001bbbf92a5713013fb1426f87) Thanks [@dependabot](https://github.com/apps/dependabot)! - Bump husky from 4.3.0 to 7.0.4.
+
+  Please, follow the migration plan to upgrade husky in your projects - https://typicode.github.io/husky/#/?id=migrate-from-v4-to-v7. The upgrade is painless 👍.
+
+### Minor Changes
+
+- [#1246](https://github.com/toptal/davinci/pull/1246) [`0ce6d842`](https://github.com/toptal/davinci/commit/0ce6d8429f6cebcf1ad7c20ae1316fccc4bb1642) Thanks [@denieler](https://github.com/denieler)! - Upgrade `react` to v18 in skeleton.
+
 ## 5.0.2
 
 ### Patch Changes

package/dist-package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/davinci-skeleton",
-  "version": "5.0.2",
+  "version": "6.0.0",
   "description": "Toptal frontend application created with Davinci CLI",
   "publishConfig": {
     "access": "public"
@@ -39,21 +39,13 @@
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
       "davinci syntax lint code",
-      "prettier",
-      "git add"
+      "prettier --write"
     ],
     "styles.{js,jsx,ts,tsx}": [
       "davinci syntax lint styles",
-      "prettier --write",
-      "git add"
+      "prettier --write"
     ]
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged",
-      "pre-push": "davinci ci danger --local"
-    }
-  },
   "sideEffects": false,
   "main": "./src/index.tsx"
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/davinci-skeleton",
-  "version": "5.0.2",
+  "version": "6.0.0",
   "description": "Toptal frontend application created with Davinci CLI",
   "publishConfig": {
     "access": "public"
@@ -39,21 +39,13 @@
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
       "davinci syntax lint code",
-      "prettier",
-      "git add"
+      "prettier --write"
     ],
     "styles.{js,jsx,ts,tsx}": [
       "davinci syntax lint styles",
-      "prettier --write",
-      "git add"
+      "prettier --write"
     ]
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged",
-      "pre-push": "davinci ci danger --local"
-    }
-  },
   "sideEffects": false,
   "main": "./src/index.tsx"
 }

package/package.json.skeleton

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/davinci-skeleton",
-  "version": "5.0.2",
+  "version": "6.0.0",
   "description": "Toptal frontend application created with Davinci CLI",
   "publishConfig": {
     "access": "public"
@@ -39,21 +39,13 @@
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
       "davinci syntax lint code",
-      "prettier",
-      "git add"
+      "prettier --write"
     ],
     "styles.{js,jsx,ts,tsx}": [
       "davinci syntax lint styles",
-      "prettier --write",
-      "git add"
+      "prettier --write"
     ]
   },
-  "husky": {
-    "hooks": {
-      "pre-commit": "lint-staged",
-      "pre-push": "davinci ci danger --local"
-    }
-  },
   "sideEffects": false,
   "main": "./src/index.tsx"
 }

package/src/index.tsx

@@ -1,6 +1,12 @@
 import React from 'react'
-import ReactDOM from 'react-dom'
+import { createRoot } from 'react-dom/client'
 
 import App from './App'
 
-ReactDOM.render(<App />, document.getElementById('root'))
+const container = document.getElementById('root')
+
+if (container) {
+  const root = createRoot(container)
+
+  root.render(<App />)
+}

package/src/modules/welcome/components/CountriesList/CountriesList.tsx

@@ -10,7 +10,11 @@ const NUMBER_OF_COUNTRIES = 5
 const AddressDetails = () => {
   const { showError } = useNotifications()
 
-  const { loading: countriesLoading, data: countriesData, error } = useGetCountries()
+  const {
+    loading: countriesLoading,
+    data: countriesData,
+    error
+  } = useGetCountries()
 
   useEffect(() => {
     if (error) {
@@ -24,7 +28,7 @@ const AddressDetails = () => {
 
   if (countriesLoading) {
     return (
-      <Container data-testid='countriesLoader'>
+      <Container data-testid='countries-loader'>
         <SkeletonLoader.Typography rows={1} />
       </Container>
     )
@@ -35,10 +39,12 @@ const AddressDetails = () => {
       <Typography>
         Top {NUMBER_OF_COUNTRIES} countries from GQL Gateway API:
       </Typography>
-      <Container data-testid='countriesList'>
-        {countriesData?.countries.nodes.slice(0, NUMBER_OF_COUNTRIES).map(country => (
-          <Typography key={country.id}>{country.googleName}</Typography>
-        ))}
+      <Container data-testid='countries-list'>
+        {countriesData?.countries.nodes
+          .slice(0, NUMBER_OF_COUNTRIES)
+          .map(country => (
+            <Typography key={country.id}>{country.googleName}</Typography>
+          ))}
       </Container>
     </>
   )

package/src/modules/welcome/components/CountriesList/test.tsx

@@ -1,14 +1,8 @@
 import React from 'react'
 import { MockedProvider, MockedProviderProps } from '@apollo/client/testing'
-import {
-  render,
-  act,
-  waitFor,
-  fireEvent,
-  screen
-} from '@toptal/picasso/test-utils'
-
-import CountriesList, { COUNTRIES_ERROR_MESSAGE} from './CountriesList'
+import { render, waitFor, screen } from '@toptal/picasso/test-utils'
+
+import CountriesList, { COUNTRIES_ERROR_MESSAGE } from './CountriesList'
 import { createGetCountriesMock } from './data'
 
 const mockedShowError = jest.fn()
@@ -25,7 +19,7 @@ jest.mock('@toptal/picasso/utils', () => {
   }
 })
 
-const delay = (ms = 0) => new Promise((resolve) => setTimeout(resolve, ms))
+const delay = (ms = 0) => new Promise(resolve => setTimeout(resolve, ms))
 
 const renderCountriesList = (mocks: MockedProviderProps['mocks']) =>
   render(
@@ -43,17 +37,17 @@ describe('CountriesList', () => {
     const countryName = 'Ukraine'
     const getCountriesMockData = {
       countries: {
-        nodes: [{
-          id: '1',
-          googleName: countryName
-        }]
+        nodes: [
+          {
+            id: '1',
+            googleName: countryName
+          }
+        ]
       }
     }
 
     it('shows list of countries', async () => {
-      const mocks = [
-        createGetCountriesMock(getCountriesMockData)
-      ]
+      const mocks = [createGetCountriesMock(getCountriesMockData)]
 
       renderCountriesList(mocks)
 
@@ -78,7 +72,7 @@ describe('CountriesList', () => {
     })
 
     it('shows nothing', () => {
-      expect(screen.queryByTestId('countriesList')).not.toBeInTheDocument()
+      expect(screen.queryByTestId('countries-list')).not.toBeInTheDocument()
     })
   })
 })

package/src/modules/welcome/pages/WelcomePage/WelcomePage.tsx

@@ -3,9 +3,7 @@ import { Link, Image } from '@toptal/picasso'
 
 import { Layout } from '../../../core'
 import * as Documentation from '../../../documentation'
-
 import { CountriesList } from '../../components'
-
 import packageJson from '../../../../../package.json'
 
 const GIF_URL = 'https://media.giphy.com/media/Ln2dAW9oycjgmTpjX9/giphy.gif'

package/src/modules/welcome/pages/WelcomePage/test.tsx

@@ -4,17 +4,16 @@ import { render, screen } from '@toptal/picasso/test-utils'
 import WelcomePage, { TestId } from './WelcomePage'
 import packageJson from '../../../../../package.json'
 
-
 jest.mock('../../components', () => ({
   __esModule: true,
   CountriesList: () => null
 }))
 
-
 const expectParagraphWithLinkIsFound = (text: string, link: string) => {
   const paragraph = screen.queryByText(
     (_, element) => element.textContent === text
   )
+
   expect(paragraph.querySelector(':scope > a')).toHaveProperty('href', link)
 }
 
@@ -23,6 +22,7 @@ describe('WelcomePage', () => {
     render(<WelcomePage />)
 
     const image = screen.queryByTestId(TestId.Image)
+
     expect(image.src).toBe(
       'https://media.giphy.com/media/Ln2dAW9oycjgmTpjX9/giphy.gif'
     )