feat(Button): emotion removal vanilla extract (#5428)

* feat(Button): emotion removal vanilla extract

* fix: unit tests and checks

* fix: update prefix to add uv

* fix: snapshot update

Author: matthprost

.changeset/eight-glasses-warn.md

@@ -0,0 +1,22 @@
+---
+"@ultraviolet/ui": major
+---
+
+⚠️ BREAKING CHANGES ⚠️ 
+In order to start using the new style, you will need to import new `<ThemeProvider />` and import new CSS generated at build time:
+
+```tsx
+import { ThemeProvider } from '@emotion/react'
+import { consoleLightTheme } from '@ultraviolet/themes'
+
+import { ThemeProvider as ThemeProviderUV } from "@ultraviolet/ui" // ThemeProvider that generate the theme applied to components
+import "@ultraviolet/ui/styles" // Generated CSS used by components
+
+export const App = (children) => {
+  <ThemeProvider theme={consoleLightTheme}>
+    <ThemeProviderUV>
+       {children}
+    </ThemeProviderUV>
+  </ThemeProvider>
+}
+```

.oxlintrc.json

@@ -80,7 +80,7 @@
     "import/no-named-as-default-member": "error",
     "import/no-named-as-default": "error",
     "import/no-self-import": "error",
-    "import/no-unassigned-import": "error",
+    "import/no-unassigned-import": "off",
     "import/no-unused-modules": "off",
     "import/prefer-default-export": "off",
     "import/no-namespace": "off",
@@ -242,7 +242,7 @@
     "react_perf/jsx-no-new-array-as-prop": "error",
     "react_perf/jsx-no-new-function-as-props": "error",
     "react_perf/jsx-no-new-object-as-prop": "error",
-    "react/button-has-type": "error",
+    "react/button-has-type": "off",
     "react/exhaustive-deps": "error",
     "react/jsx-filename-extension": [
       "error",

.storybook/components/DocsContainer.tsx

@@ -10,7 +10,7 @@ import type { ReactNode } from 'react'
 import { cloneElement, isValidElement, useState } from 'react'
 import { globalStyles } from './globalStyle'
 import '@ultraviolet/fonts/fonts.css'
-import { GlobalAlert } from '@ultraviolet/ui'
+import { GlobalAlert, ThemeProvider as ThemeProviderUV } from '@ultraviolet/ui'
 
 type ExtraProps = {
   /**
@@ -66,28 +66,30 @@ const DocsContainer = ({ children, context }: DocsContainerProps) => {
 
   return (
     <Unstyled>
-      <ThemeProvider theme={lightTheme}>
-        {isBeta ?
-        <GlobalAlert
-          buttonText="Access to Beta"
-          onClickButton={() => window.top?.location.assign('https://beta.storybook.ultraviolet.scaleway.com')}
-          closable={false}
-        >
-          A Beta version is available. Please use this version if your dependencies include the Beta release.
-        </GlobalAlert> : null}
-        <Global styles={[globalStyles]} />
-        <BaseContainer context={context}>
-          {isValidElement<ExtraProps>(children)
-            ? cloneElement(children, {
-                deprecated: parameters?.deprecated,
-                deprecatedReason: parameters?.deprecatedReason,
-                migrationLink: parameters?.migrationLink,
-                hideArgsTable: parameters?.hideArgsTable,
-                experimental: isPlusLibrary ? true : parameters?.experimental,
-              })
-            : children}
-        </BaseContainer>
-      </ThemeProvider>
+      <ThemeProviderUV>
+        <ThemeProvider theme={lightTheme}>
+          {isBeta ?
+          <GlobalAlert
+            buttonText="Access to Beta"
+            onClickButton={() => window.top?.location.assign('https://beta.storybook.ultraviolet.scaleway.com')}
+            closable={false}
+          >
+            A Beta version is available. Please use this version if your dependencies include the Beta release.
+          </GlobalAlert> : null}
+          <Global styles={[globalStyles]} />
+          <BaseContainer context={context}>
+            {isValidElement<ExtraProps>(children)
+              ? cloneElement(children, {
+                  deprecated: parameters?.deprecated,
+                  deprecatedReason: parameters?.deprecatedReason,
+                  migrationLink: parameters?.migrationLink,
+                  hideArgsTable: parameters?.hideArgsTable,
+                  experimental: isPlusLibrary ? true : parameters?.experimental,
+                })
+              : children}
+          </BaseContainer>
+        </ThemeProvider>
+      </ThemeProviderUV>
     </Unstyled>
   )
 }

.storybook/storybookThemes.ts

@@ -28,11 +28,15 @@ const generateStorybookTheme = ({
     appBorderColor: theme.colors.neutral.borderWeak,
     appContentBg: theme.colors.neutral.background,
     barBg: theme.colors.neutral.backgroundWeak,
-    barSelectedColor: theme.colors.primary.textWeak,
+    barSelectedColor: theme.colors.primary.text,
 
     // Toolbar default and active colors
     barTextColor: theme.colors.neutral.textWeak,
-    base,
+    barSelectedColor: theme.colors.primary.text,
+    barBg: theme.colors.neutral.backgroundWeak,
+
+    buttonBg: theme.colors.neutral.background,
+    buttonBorder: theme.colors.neutral.border,
 
     // BIZARRE
     booleanBg: theme.colors.neutral.background,

.storybook/vite.config.ts

@@ -2,6 +2,7 @@ import { resolve } from 'path'
 import svgr from '@svgr/rollup'
 import react from '@vitejs/plugin-react'
 import { defineConfig } from 'vite'
+import { vanillaExtractPlugin } from '@vanilla-extract/vite-plugin';
 
 // https://vitejs.dev/config/
 export default defineConfig({
@@ -42,5 +43,6 @@ export default defineConfig({
         plugins: ['@emotion/babel-plugin'],
       },
     }),
+    vanillaExtractPlugin({})
   ],
 })

biome.json

@@ -17,7 +17,8 @@
       "!**/build/**",
       "!**/.turbo/**",
       "!**/prebuild.ts",
-      "!**/index.stories.tsx"
+      "!**/index.stories.tsx",
+      "!**/*.css.ts"
     ]
   },
   "css": {

eslint.config.mjs

@@ -112,6 +112,7 @@ export default [
       '**/__stories__/**/*.{ts,tsx}',
       '**/__tests__/**/*.{ts,tsx}',
       '**/vite.config.*',
+      '**/vitest.config.*',
       'utils/test/**/*.{ts,tsx}',
       '**/vitest.setup.ts',
     ],
@@ -139,6 +140,7 @@ export default [
       '**/__stories__/**/*.{ts,tsx}',
       '**/__tests__/**/*.{ts,tsx}',
       '**/vite.config.*',
+      '**/vitest.config.*',
       'utils/test/**/*.{ts,tsx}',
       '**/vitest.setup.ts',
       '.storybook/**',
@@ -163,7 +165,8 @@ export default [
     },
   })),
   {
-    files: ['**/*.d.ts', '**/vite.config.ts'],
+    files: ['**/*.d.ts', '**/vite.config.ts', '**/vitest.config.*',
+],
 
     rules: {
       'import/no-extraneous-dependencies': 'off',

examples/vite/src/App.tsx

@@ -1,27 +1,43 @@
 import { PlusIcon } from '@ultraviolet/icons'
-import { Alert, Button, Card, Row, Stack, Text } from '@ultraviolet/ui'
+import {
+  Alert,
+  Button,
+  Card,
+  Row,
+  Stack,
+  Text,
+  ThemeProvider,
+} from '@ultraviolet/ui'
 import { useState } from 'react'
+import '@ultraviolet/ui/styles' // Import styles for the UI components
+import { consoleDarkTheme, consoleLightTheme } from '@ultraviolet/themes'
 
 export const App = () => {
   const [count, setCount] = useState(0)
+  const [darkMode, setDarkMode] = useState(false)
 
   return (
-    <Row gap="3" templateColumns="9fr 3fr">
-      <Card>
-        <Text as="h1" variant="headingSmall">
-          Classic
-        </Text>
-        <Stack direction="row" gap="2">
-          <Button onClick={() => setCount(prevCount => prevCount + 1)}>
-            <PlusIcon />
-          </Button>
-          <Button onClick={() => setCount(0)}>Reset</Button>
-        </Stack>
-        <Text as="p" variant="body">
-          Count:{count}
-        </Text>
-      </Card>
-      <Alert sentiment="info">Alert</Alert>
-    </Row>
+    <ThemeProvider theme={darkMode ? consoleDarkTheme : consoleLightTheme}>
+      <Row gap="3" templateColumns="9fr 3fr">
+        <Card>
+          <Text as="h1" variant="headingSmall">
+            Classic
+          </Text>
+          <Stack direction="row" gap="2">
+            <Button onClick={() => setCount(prevCount => prevCount + 1)}>
+              <PlusIcon />
+            </Button>
+            <Button onClick={() => setCount(0)}>Reset</Button>
+            <Button onClick={() => setDarkMode(!darkMode)} sentiment="danger">
+              Switch Theme
+            </Button>
+          </Stack>
+          <Text as="p" variant="body">
+            Count:{count}
+          </Text>
+        </Card>
+        <Alert sentiment="info">Alert</Alert>
+      </Row>
+    </ThemeProvider>
   )
 }

package.json

@@ -135,6 +135,7 @@
     "@ultraviolet/fonts": "workspace:*",
     "@ultraviolet/themes": "workspace:*",
     "@ultraviolet/ui": "workspace:*",
+    "@vanilla-extract/vite-plugin": "5.1.1",
     "@vitejs/plugin-react": "5.0.2",
     "@vitest/coverage-istanbul": "3.2.4",
     "@vitest/ui": "3.2.4",