Upgrade TypeScript, Vite, Storybook, Tamagui (#373)

* upgrade deps

* update storybook configs

* add required tamagui token :/
This commit is contained in:
Pavel 2023-04-11 20:52:18 +02:00 committed by GitHub
parent 558faa9725
commit e586de1890
No known key found for this signature in database
GPG Key ID: 0EB8D75C775AB6F1
12 changed files with 2250 additions and 2019 deletions

View File

@ -17,11 +17,11 @@
}, },
"devDependencies": { "devDependencies": {
"@tauri-apps/cli": "^1.2.2", "@tauri-apps/cli": "^1.2.2",
"@types/node": "^18.15.2", "@types/node": "^18.15.11",
"@types/react": "^18.0.28", "@types/react": "^18.0.33",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.0.11",
"@vitejs/plugin-react": "^3.1.0", "@vitejs/plugin-react": "^3.1.0",
"typescript": "^4.9.5", "typescript": "^5.0.3",
"vite": "^4.1.4" "vite": "^4.2.1"
} }
} }

View File

@ -34,10 +34,10 @@
"devDependencies": { "devDependencies": {
"@babel/core": "^7.17.9", "@babel/core": "^7.17.9",
"@expo/metro-config": "^0.3.21", "@expo/metro-config": "^0.3.21",
"@tamagui/babel-plugin": "1.7.7", "@tamagui/babel-plugin": "1.11.1",
"@types/react-native": "~0.70.6", "@types/react-native": "~0.70.6",
"babel-plugin-module-resolver": "^4.1.0", "babel-plugin-module-resolver": "^4.1.0",
"babel-plugin-transform-inline-environment-variables": "^0.4.4", "babel-plugin-transform-inline-environment-variables": "^0.4.4",
"typescript": "^4.9.5" "typescript": "^5.0.3"
} }
} }

View File

@ -12,6 +12,6 @@
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="module" src="/src/main.tsx"></script> <script type="module" src="./src/main.tsx"></script>
</body> </body>
</html> </html>

View File

@ -12,18 +12,18 @@
"dependencies": { "dependencies": {
"@status-im/components": "*", "@status-im/components": "*",
"@status-im/icons": "*", "@status-im/icons": "*",
"@tamagui/core": "1.7.7", "@tamagui/core": "1.11.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-native-web": "^0.18.12", "react-native-web": "^0.18.12",
"use-resize-observer": "^9.1.0" "use-resize-observer": "^9.1.0"
}, },
"devDependencies": { "devDependencies": {
"@tamagui/vite-plugin": "1.7.7", "@tamagui/vite-plugin": "1.11.1",
"@types/react": "^18.0.28", "@types/react": "^18.0.33",
"@types/react-dom": "^18.0.11", "@types/react-dom": "^18.0.11",
"@vitejs/plugin-react-swc": "^3.2.0", "@vitejs/plugin-react-swc": "^3.2.0",
"typescript": "^4.9.5", "typescript": "^5.0.3",
"vite": "^4.1.4" "vite": "^4.2.1"
} }
} }

View File

@ -17,7 +17,7 @@
"build": "turbo run build --filter=@status-im/*", "build": "turbo run build --filter=@status-im/*",
"lint": "eslint --cache --cache-location ./node_modules/.cache/eslint/.eslint-cache .", "lint": "eslint --cache --cache-location ./node_modules/.cache/eslint/.eslint-cache .",
"typecheck": "turbo run typecheck", "typecheck": "turbo run typecheck",
"format": "prettier --ignore-path .gitignore --cache --write .", "format": "prettier --ignore-path .gitignore --write .",
"clean": "turbo run clean && rimraf node_modules", "clean": "turbo run clean && rimraf node_modules",
"web": "yarn workspace web dev", "web": "yarn workspace web dev",
"mobile": "yarn workspace mobile dev", "mobile": "yarn workspace mobile dev",
@ -25,18 +25,18 @@
"storybook": "yarn workspace @status-im/components storybook" "storybook": "yarn workspace @status-im/components storybook"
}, },
"resolutions": { "resolutions": {
"@types/react": "18.0.28", "@types/react": "18.0.33",
"@types/react-dom": "18.0.11" "@types/react-dom": "18.0.11"
}, },
"devDependencies": { "devDependencies": {
"@changesets/cli": "^2.23.0", "@changesets/cli": "^2.23.0",
"@tsconfig/strictest": "^1.0.2", "@tsconfig/strictest": "^2.0.0",
"@typescript-eslint/eslint-plugin": "^5.55.0", "@typescript-eslint/eslint-plugin": "^5.57.1",
"@typescript-eslint/parser": "^5.55.0", "@typescript-eslint/parser": "^5.57.1",
"eslint": "^8.36.0", "eslint": "^8.37.0",
"eslint-config-prettier": "^8.7.0", "eslint-config-prettier": "^8.8.0",
"eslint-import-resolver-node": "^0.3.7", "eslint-import-resolver-node": "^0.3.7",
"eslint-import-resolver-typescript": "^3.5.3", "eslint-import-resolver-typescript": "^3.5.5",
"eslint-plugin-eslint-comments": "^3.2.0", "eslint-plugin-eslint-comments": "^3.2.0",
"eslint-plugin-import": "^2.27.5", "eslint-plugin-import": "^2.27.5",
"eslint-plugin-jsx-a11y": "^6.7.1", "eslint-plugin-jsx-a11y": "^6.7.1",
@ -45,13 +45,13 @@
"eslint-plugin-simple-import-sort": "^10.0.0", "eslint-plugin-simple-import-sort": "^10.0.0",
"husky": "^8.0.3", "husky": "^8.0.3",
"lint-staged": "^13.2.0", "lint-staged": "^13.2.0",
"prettier": "^2.8.4", "prettier": "^2.8.7",
"rimraf": "^4.4.0", "rimraf": "^4.4.1",
"turbo": "^1.8.3", "turbo": "^1.8.8",
"typescript": "^4.9.5", "typescript": "^5.0.3",
"vite": "^4.1.4", "vite": "^4.2.1",
"vite-node": "^0.29.2", "vite-node": "^0.29.8",
"vitest": "^0.29.2" "vitest": "^0.29.8"
}, },
"lint-staged": { "lint-staged": {
"*.{ts,tsx,js,jsx}": [ "*.{ts,tsx,js,jsx}": [

View File

@ -1,6 +1,8 @@
import { StorybookConfig } from '@storybook/types' import type { StorybookConfig } from '@storybook/react-vite'
const config: StorybookConfig = { const config: StorybookConfig = {
framework: '@storybook/react-vite',
stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'], stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx)'],
addons: [ addons: [
'@storybook/addon-links', '@storybook/addon-links',
@ -9,10 +11,7 @@ const config: StorybookConfig = {
'storybook-addon-designs', 'storybook-addon-designs',
'storybook-dark-mode', 'storybook-dark-mode',
], ],
framework: {
name: '@storybook/react-vite',
options: {},
},
docs: { docs: {
autodocs: 'tag', autodocs: 'tag',
}, },

View File

@ -1,26 +1,35 @@
import React from 'react' import React from 'react'
import type { Preview } from '@storybook/react'
import { Provider, ToastContainer } from '../src' import { Provider, ToastContainer } from '../src'
import { Parameters, Decorator } from '@storybook/react'
import './reset.css' import './reset.css'
import './components.css' import './components.css'
export const parameters: Parameters = { // export const parameters: Parameters = {
actions: { argTypesRegex: '^on[A-Z].*' }, // actions: { argTypesRegex: '^on[A-Z].*' },
controls: { // controls: {
matchers: { // matchers: {
color: /(background|color)$/i, // color: /(background|color)$/i,
date: /Date$/, // date: /Date$/,
}, // },
}, // },
} // }
const withThemeProvider: Decorator = (Story, _context) => { const preview: Preview = {
parameters: {
// layout: 'centered',
},
decorators: [
Story => {
return ( return (
<Provider> <Provider>
<Story /> <Story />
<ToastContainer /> <ToastContainer />
</Provider> </Provider>
) )
},
],
} }
export const decorators = [withThemeProvider]
export default preview

View File

@ -26,7 +26,7 @@
"clean": "rimraf node_modules dist .turbo storybook-static" "clean": "rimraf node_modules dist .turbo storybook-static"
}, },
"peerDependencies": { "peerDependencies": {
"react-native-web": "^0.18.0" "react": "^18.2.0"
}, },
"dependencies": { "dependencies": {
"@radix-ui/react-accordion": "^1.1.1", "@radix-ui/react-accordion": "^1.1.1",
@ -37,35 +37,35 @@
"@radix-ui/react-toast": "^1.1.3", "@radix-ui/react-toast": "^1.1.3",
"@radix-ui/react-tooltip": "^1.0.5", "@radix-ui/react-tooltip": "^1.0.5",
"@status-im/icons": "*", "@status-im/icons": "*",
"@tamagui/animations-css": "1.7.7", "@tamagui/animations-css": "1.11.1",
"@tamagui/animations-react-native": "1.7.7", "@tamagui/animations-react-native": "1.11.1",
"@tamagui/core": "1.7.7", "@tamagui/core": "1.11.1",
"@tamagui/font-inter": "1.7.7", "@tamagui/font-inter": "1.11.1",
"@tamagui/react-native-media-driver": "1.7.7", "@tamagui/react-native-media-driver": "1.11.1",
"@tamagui/shorthands": "1.7.7", "@tamagui/shorthands": "1.11.1",
"@tamagui/theme-base": "1.7.7", "@tamagui/theme-base": "1.11.1",
"expo-blur": "^12.2.2", "expo-blur": "^12.2.2",
"expo-linear-gradient": "^12.1.2", "expo-linear-gradient": "^12.1.2",
"tamagui": "1.7.7", "tamagui": "1.11.1",
"zustand": "^4.3.6" "zustand": "^4.3.7"
}, },
"devDependencies": { "devDependencies": {
"@storybook/addon-essentials": "7.0.0-beta.21", "@storybook/addon-essentials": "7.0.2",
"@storybook/addon-interactions": "7.0.0-beta.21", "@storybook/addon-interactions": "7.0.2",
"@storybook/addon-links": "7.0.0-beta.21", "@storybook/addon-links": "7.0.2",
"@storybook/blocks": "7.0.0-beta.21", "@storybook/blocks": "7.0.2",
"@storybook/react": "7.0.0-beta.21", "@storybook/react": "7.0.2",
"@storybook/react-vite": "7.0.0-beta.21", "@storybook/react-vite": "7.0.2",
"@storybook/testing-library": "^0.0.13", "@storybook/testing-library": "^0.1.0",
"@tamagui/vite-plugin": "1.7.7", "@tamagui/vite-plugin": "^1.11.1",
"@vitejs/plugin-react-swc": "^3.2.0", "@vitejs/plugin-react-swc": "^3.2.0",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0",
"react-native-svg": "^13.8.0", "react-native-svg": "^13.8.0",
"react-native-web": "^0.18.12", "react-native-web": "^0.18.12",
"storybook": "7.0.0-beta.21", "storybook": "7.0.2",
"storybook-addon-designs": "7.0.0-beta.2", "storybook-addon-designs": "7.0.0-beta.2",
"storybook-dark-mode": "^2.1.1", "storybook-dark-mode": "^3.0.0",
"vite": "^4.1.4" "vite": "^4.2.1"
} }
} }

View File

@ -40,6 +40,8 @@ export const config = createTamagui({
size: {}, size: {},
lineHeight: {}, lineHeight: {},
}), }),
// Tamagui requires this... weird
body: createInterFont({}),
}, },
themes, themes,
tokens: { tokens: {

View File

@ -1,6 +1,6 @@
{ {
"extends": "../../tsconfig.base", "extends": "../../tsconfig.base",
"include": ["src"], "include": ["src", ".storybook"],
"compilerOptions": { "compilerOptions": {
"outDir": "./dist", "outDir": "./dist",
"declarationDir": "dist/types" "declarationDir": "dist/types"

View File

@ -35,11 +35,9 @@ export default defineConfig(({ mode }) => {
}, },
plugins: [ plugins: [
react({ react(),
// jsxRuntime: 'classic',
}),
tamaguiPlugin(tamaguiConfig), tamaguiPlugin(tamaguiConfig),
// tamaguiExtractPlugin(tamaguiConfig) // tamaguiExtractPlugin(tamaguiConfig),
], ],
test: { test: {

4111
yarn.lock

File diff suppressed because it is too large Load Diff