fix visual regression on app bar

dohomi · Apr 17, 2023 · 909ef60 · 909ef60 · vercel · Apr 17, 2023
1 parent 0e96051
commit 909ef60
Show file tree

Hide file tree

Showing 198 changed files with 2,628 additions and 2,043 deletions.
diff --git a/apps/storybook-react/.storybook/main.ts b/apps/storybook-react/.storybook/main.ts
@@ -1,7 +1,18 @@
 // @ts-ignore
-import path from 'path'
+import path, { resolve } from 'path'
 import { StorybookConfig } from '@storybook/nextjs'
 
+const { shouldExclude } = require('tamagui-loader')
+const projectRoot = resolve(__dirname, '../')
+
+const tamaguiOptions = {
+  config: './tamagui.config.ts',
+  components: ['@tamagui-extras/core', 'tamagui'],
+  importsWhitelist: ['constants.js', 'colors.js'],
+  logTimings: true,
+  disableExtraction: process.env.NODE_ENV === 'development',
+}
+
 const config: StorybookConfig = {
   stories: [
     // '../stories/**/*.stories.@(js|jsx|ts|tsx|mdx)',
@@ -48,38 +59,10 @@ const config: StorybookConfig = {
   framework: {
     name: '@storybook/nextjs',
     options: {
-      nextConfigPath: path.resolve(__dirname, '../../next/next.config.js'),
+      nextConfigPath: path.resolve(projectRoot, 'next.config.js'),
     },
   },
-  // typescript: {
-  //   check: false,
-  //   checkOptions: {},
-  //   reactDocgen: 'react-docgen-typescript',
-  //   reactDocgenTypescriptOptions: {
-  //     // speeds up storybook build time
-  //     allowSyntheticDefaultImports: false,
-  //     // speeds up storybook build time
-  //     esModuleInterop: false,
-  //     // makes union prop types like variant and size appear as select controls
-  //     shouldExtractLiteralValuesFromEnum: true,
-  //     // makes string and boolean types that can be undefined appear as inputs and switches
-  //     shouldRemoveUndefinedFromOptional: true,
-  //     // Filter out third-party props from node_modules except @mui packages
-  //     propFilter: (prop) =>
-  //       prop.parent ? !/node_modules\/(?!tamagui)/.test(prop.parent.fileName) : true,
-  //   },
-  // },
-  // managerWebpack: (config, options) => {
-  //     options.cache.set = () => Promise.resolve();
-  //     return config;
-  // },
   webpackFinal: async (config, { configType }) => {
-    // config.module.rules.push({
-    //   test: /\.(js|mjs|jsx)$/,
-    //   resolve: {
-    //     fullySpecified: false,
-    //   },
-    // })
     return config
   },
   env: (config) => ({

diff --git a/apps/storybook-react/package.json b/apps/storybook-react/package.json
@@ -12,37 +12,22 @@
   },
   "dependencies": {
     "app": "*",
-    "next": "13.2.4",
     "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "react-native": "0.0.0",
-    "react-native-web": "0.18.9"
+    "react-dom": "^18.2.0"
   },
   "devDependencies": {
-    "@babel/core": "^7.16.0",
-    "@babel/preset-env": "^7.21.4",
-    "@babel/preset-react": "^7.18.6",
-    "@babel/preset-typescript": "^7.21.4",
     "@fontsource/inter": "^4.5.14",
-    "@storybook/addon-actions": "^7.0.5",
     "@storybook/addon-essentials": "^7.0.5",
+    "@storybook/addon-interactions": "^7.0.5",
     "@storybook/addon-links": "^7.0.5",
     "@storybook/addon-react-native-web": "^0.0.20",
     "@storybook/addon-styling": "1.0.1",
+    "@storybook/blocks": "^7.0.5",
     "@storybook/nextjs": "^7.0.5",
     "@storybook/react": "^7.0.5",
-    "@types/node": "16.11.9",
-    "@types/react": "^18.0.17",
-    "babel-loader": "^8.2.3",
-    "babel-plugin-react-native-web": "^0.17.5",
-    "chromatic": "^6.0.6",
-    "eslint": "7",
-    "eslint-config-next": "13.2.4",
-    "eslint-plugin-storybook": "^0.6.4",
-    "path-browserify": "^1.0.1",
+    "@storybook/testing-library": "^0.1.0",
     "storybook": "^7.0.5",
-    "storybook-addon-next-router": "^4.0.2",
-    "typescript": "5.0.3",
-    "util": "^0.12.5"
+    "tamagui-loader": "1.15.14",
+    "typescript": "5.0.3"
   }
 }
diff --git a/package.json b/package.json
@@ -30,10 +30,11 @@
     "tests": "yarn build && cd apps/tests && yarn test",
     "check-types": "yarn turbo run check-types",
     "codegen": "yarn turbo run codegen",
-    "rm:nodemodule": "rm -rf node_modules apps/expo/node_modules apps/next/node_modules apps/next/.tamagui packages/core/node_modules yarn.lock apps/storybook-react/node_modules apps/storybook-react-native/node_modules apps/storybook-react/dist"
+    "rm:nodemodule": "rm -rf .yarn/cache node_modules apps/expo/node_modules apps/next/node_modules apps/next/.tamagui packages/core/node_modules yarn.lock apps/storybook-react/node_modules apps/storybook-react-native/node_modules apps/storybook-react/dist",
+    "publish-packages": "turbo run build lint test && changeset version && changeset publish"
   },
   "resolutions": {
-    "esbuild": "0.15.5",
+    "esbuild": "0.17.17",
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-refresh": "^0.14.0",

diff --git a/packages/app/src/components/layouts/LmAppBar.tsx b/packages/app/src/components/layouts/LmAppBar.tsx
@@ -23,18 +23,18 @@ export function LmAppBar({ title, rightContent }: LmDashboardAppBarProps) {
       backgroundColor={'$background'}
       space
     >
-      <XStack alignItems={'center'} space>
-        <LmButton
-          icon={<List />}
-          circular
-          onPress={() => {
-            toggleMainDrawer()
-          }}
-        />
+      <LmButton
+        icon={<List />}
+        size={'$4'}
+        circular
+        chromeless
+        onPress={() => {
+          toggleMainDrawer()
+        }}
+      />
 
-        <H3>{title}</H3>
-      </XStack>
-      <LmThemeToggle icon={<Sun />} circular />
+      <H3 flexGrow={1}>{title}</H3>
+      <LmThemeToggle icon={<Sun />} size={'$4'} circular />
       {rightContent}
     </XStack>
   )

diff --git a/packages/app/src/features/overview/overview.tsx b/packages/app/src/features/overview/overview.tsx
@@ -131,7 +131,7 @@ export function OverviewScreen() {
             </LmButton>
           </XStack>
         </YStack>
-        <H3>Buttons Icons</H3>
+        <H3>Buttons With Icons</H3>
         <YStack space={'$4'}>
           <XStack {...defaultSectionProps}>
             <LmButton size={'$2'} icon={<Star />}>
@@ -140,6 +140,9 @@ export function OverviewScreen() {
             <LmButton size={'$4'} icon={<Star />}>
               size 4
             </LmButton>
+            <LmButton size={'$6'} icon={<Star />}>
+              size 6
+            </LmButton>
           </XStack>
           <XStack {...defaultSectionProps}>
             <LmButton size={'$2'} iconAfter={<Star />} colorVariant={'primary'}>
@@ -148,14 +151,32 @@ export function OverviewScreen() {
             <LmButton size={'$4'} iconAfter={<Star />} colorVariant={'secondary'}>
               size 4
             </LmButton>
+            <LmButton size={'$6'} iconAfter={<Star />} colorVariant={'success'}>
+              size 6
+            </LmButton>
+          </XStack>
+          <XStack
+            {...defaultSectionProps}
+            space
+            alignItems={'center'}
+            paddingHorizontal={'$2'}
+            justifyContent={'space-between'}
+          >
+            <LmButton size={'$2'} icon={<Star />} circular />
+            <LmButton size={'$4'} icon={<Star />} circular />
+            <LmButton size={'$6'} icon={<Star />} circular />
           </XStack>
         </YStack>
 
         <H3>Buttons Groups</H3>
         <YStack {...defaultSectionProps}>
           <XGroup>
-            <LmButton icon={<Star />}>size 2</LmButton>
-            <LmButton icon={<Star />}>size 4</LmButton>
+            <XGroup.Item>
+              <LmButton icon={<Star />}>size 2</LmButton>
+            </XGroup.Item>
+            <XGroup.Item>
+              <LmButton icon={<Star />}>size 4</LmButton>
+            </XGroup.Item>
           </XGroup>
           <YGroup>
             <LmButton iconAfter={<Star />} colorVariant={'primary'}>

diff --git a/packages/form/dist/cjs/LmAutocomplete.js b/packages/form/dist/cjs/LmAutocomplete.js