build: use @scaleway/tsconfig (#589)

* build: use @scaleway/tsconfig

* fix: correct errors

Author: chambo-e

.storybook/preview.tsx

@@ -1,6 +1,7 @@
 import { SCWUITheme, normalize, theme } from '@scaleway/ui'
 
 import { css, ThemeProvider, Global, Theme } from '@emotion/react'
+import { Story } from '@storybook/react'
 
 const STORY_SORT = {
   order: [
@@ -46,17 +47,24 @@ const ENV_PARAMETERS = {
   },
 }
 export const parameters =
-  ENV_PARAMETERS[process.env.STORYBOOK_ENVIRONMENT] || ENV_PARAMETERS.production
+  (process.env?.['STORYBOOK_ENVIRONMENT'] as keyof typeof ENV_PARAMETERS) ||
+  ENV_PARAMETERS.production
 
-const adjustedTheme = ancestorTheme =>
+const adjustedTheme = (ancestorTheme: Theme) =>
   ({
     ...ancestorTheme,
     ...Object.keys(theme).reduce(
       (acc, themeItem) => ({
         ...acc,
         [themeItem]: {
-          ...(acc[themeItem] ?? {}),
-          ...theme[themeItem],
+          ...((acc[themeItem as keyof typeof theme] as Record<
+            string,
+            unknown
+          >) ?? {}),
+          ...(theme[themeItem as keyof typeof theme] as Record<
+            string,
+            unknown
+          >),
         },
       }),
       ancestorTheme,
@@ -68,10 +76,10 @@ export const globalStyles = (_: Theme) => css`
 `
 
 export const decorators = [
-  Story => (
+  (StoryComponent: Story) => (
     <ThemeProvider theme={adjustedTheme}>
       <Global styles={[globalStyles]} />
-      <Story />
+      <StoryComponent />
     </ThemeProvider>
   ),
 ]

.storybook/scaleway.ts

@@ -1,4 +1,4 @@
-import { create } from '@storybook/theming/create'
+import { create } from '@storybook/theming'
 import brandImage from './assets/scaleway-text.png'
 
 export default create({

package.json

@@ -140,6 +140,7 @@
     "@rollup/plugin-url": "8.0.1",
     "@scaleway/eslint-config-react": "3.11.2",
     "@scaleway/jest-helpers": "2.0.24",
+    "@scaleway/tsconfig": "^1.1.0",
     "@semantic-release/changelog": "6.0.2",
     "@semantic-release/commit-analyzer": "9.0.2",
     "@semantic-release/git": "10.0.1",

pnpm-lock.yaml

@@ -37,7 +37,7 @@ describe('DateField', () => {
           })
           const option = node.getAllByRole('option')[0]
           await act(() => {
-            option.click()
+            option?.click()
           })
           expect(onChange).toBeCalledTimes(1)
           // Blur not working on react-datepicker:

src/components/DateField/__tests__/index.tsx

@@ -11,8 +11,9 @@ export const mockErrors: FormErrors = {
     `This field should have a length greater than ${minLength}`,
   REGEX: ({ regex }) => {
     if (
-      (Array.isArray(regex[0]) ? regex[0][0].source : regex[0].source) ===
-      emailRegex.source
+      (Array.isArray(regex[0])
+        ? regex?.[0]?.[0]?.source
+        : regex?.[0]?.source) === emailRegex.source
     ) {
       return 'Invalid email'
     }

src/mocks/mockErrors.ts

@@ -1,26 +1,19 @@
 {
+  "extends": "@scaleway/tsconfig",
   "compilerOptions": {
-    "target": "es2020",
-    "module": "esnext",
-    "strict": true,
-    "allowSyntheticDefaultImports": true,
-    "allowJs": true,
-    "esModuleInterop": true,
+    "target": "esnext",
+    // For storybook compatibility we use commonjs
+    "module": "commonjs",
+    "jsxImportSource": "@emotion/react",
+
     "noEmit": true,
-    "moduleResolution": "node",
     "skipLibCheck": true,
-    "jsx": "preserve"
   },
   "include": [
-    "./storybook/**/*.ts",
-    "./storybook/**/*.tsx",
     "**/*.ts",
     "**/*.tsx",
-    "emotion.d.ts",
+    ".storybook/**/*.ts",
+    ".storybook/**/*.tsx"
   ],
-  "exclude": [
-    "node_modules",
-    "coverage",
-    "dist"
-  ]
+  "exclude": ["node_modules", "coverage", "dist"]
 }