refactor: remove emotion from storybook and ui

.changeset/nine-moons-wink.md

@@ -0,0 +1,6 @@
+---
+"@ultraviolet/ui": major
+---
+
+- Remove `Emotion`
+- Removed `Breakpoint`: use directly `up` and `down`

.storybook/.babelrc

@@ -1,14 +1,5 @@
 {
-  "plugins": [
-    [
-      "@emotion",
-      {
-        "sourceMap": false,
-        "autoLabel": "never",
-        "labelFormat": "[filename]--[local]"
-      }
-    ]
-  ],
+
   "presets": [
     "@babel/preset-typescript",
     [
@@ -18,8 +9,7 @@
     [
       "@babel/preset-react",
       {
-        "runtime": "automatic",
-        "importSource": "@emotion/react"
+        "runtime": "automatic"
       }
     ]
   ]

.storybook/components/DocsContainer.tsx

@@ -1,4 +1,3 @@
-import { Global, ThemeProvider } from '@emotion/react'
 import type {
   DocsContainerProps as BaseContainerProps} from '@storybook/addon-docs/blocks';
 import {
@@ -8,9 +7,10 @@ import {
 import { consoleLightTheme as lightTheme, ThemeProvider as ThemeProviderUV } from '@ultraviolet/themes'
 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 "../../packages/themes/dist/themes.css"
+import { globalStyleStoryBook } from './globalStyle.css';
 
 type ExtraProps = {
   /**
@@ -66,8 +66,8 @@ const DocsContainer = ({ children, context }: DocsContainerProps) => {
 
   return (
     <Unstyled>
-      <ThemeProviderUV>
-        <ThemeProvider theme={lightTheme}>
+      <div className={globalStyleStoryBook}>
+        <ThemeProviderUV theme={lightTheme}>
           {isBeta ?
           <GlobalAlert
             buttonText="Access to Beta"
@@ -76,7 +76,6 @@ const DocsContainer = ({ children, context }: DocsContainerProps) => {
           >
             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, {
@@ -88,8 +87,8 @@ const DocsContainer = ({ children, context }: DocsContainerProps) => {
                 })
               : children}
           </BaseContainer>
-        </ThemeProvider>
-      </ThemeProviderUV>
+        </ThemeProviderUV>
+      </div>
     </Unstyled>
   )
 }

.storybook/components/Page.tsx

@@ -1,4 +1,3 @@
-import styled from '@emotion/styled'
 import { linkTo } from '@storybook/addon-links'
 import {
   Controls,
@@ -9,59 +8,7 @@ import {
   Title,
 } from '@storybook/addon-docs/blocks'
 import { Alert, Stack, Text } from '@ultraviolet/ui'
-import background from '../assets/brand-background.png'
-
-const TitleDecorator = styled.div`
-  h1 {
-    color: ${({ theme }) => theme.colors.neutral.text};
-    font-size: ${({ theme }) => theme.typography.headingLargeStronger.fontSize};
-    font-family: ${({ theme }) => theme.typography.headingLargeStronger.fontFamily};
-    font-weight: ${({ theme }) => theme.typography.headingLargeStronger.weight};
-    letter-spacing: ${({ theme }) => theme.typography.headingLargeStronger.letterSpacing};
-    line-height: ${({ theme }) => theme.typography.headingLargeStronger.lineHeight};
-    text-transform: ${({ theme }) => theme.typography.headingLargeStronger.textCase};
-    text-decoration: ${({ theme }) => theme.typography.headingLargeStronger.textDecoration};
-    padding: ${({ theme }) => theme.space[5]} ${({ theme }) => theme.space[3]};
-    border-radius: ${({ theme }) => theme.radii.default};
-    background-image: url(${background});
-    background-size: cover;
-    background-position: center;
-    background-repeat: no-repeat;
-    width: 100%;
-  }
-`
-
-const StyledH2 = styled(Text)`
-  padding-bottom: ${({ theme }) => theme.space[1]};
-  margin-bottom: ${({ theme }) => theme.space[2]};
-  border-bottom: 2px solid ${({ theme }) => theme.colors.neutral.borderStronger};
-`
-
-const StoriesDecorator = styled(Stack)`
-  #stories {
-    color: ${({ theme }) => theme.colors.neutral.text};
-    font-size: ${({ theme }) => theme.typography.headingStrong.fontSize};
-    font-family: ${({ theme }) => theme.typography.headingStrong.fontFamily};
-    font-weight: ${({ theme }) => theme.typography.headingStrong.weight};
-    letter-spacing: ${({ theme }) => theme.typography.headingStrong.letterSpacing};
-    line-height: ${({ theme }) => theme.typography.headingStrong.lineHeight};
-    text-transform: ${({ theme }) => theme.typography.headingStrong.textCase};
-    text-decoration: ${({ theme }) => theme.typography.headingStrong.textDecoration};
-    padding-bottom: ${({ theme }) => theme.space[1]};
-    border-bottom: 2px solid ${({ theme }) => theme.colors.neutral.borderStronger};
-    margin-bottom: ${({ theme }) => theme.space[2]};
-  }
-`
-
-const StoriesThemes = styled.div`
-  .docs-story > div {
-    padding: 0;
-  }
-
-  .css-xzp052 .innerZoomElementWrapper > * {
-    border: 0 !important;
-  }
-`
+import { h2Decorator, storiesDecorator, storiesTheme, titleDecorator } from './globalStyle.css'
 
 type PageProps = {
   deprecated?: boolean
@@ -78,12 +25,12 @@ const Page = ({
   hideArgsTable,
   experimental,
 }: PageProps) => (
-  <StoriesThemes>
+  <div className={storiesTheme}>
     <Stack gap={1}>
       <div>
-        <TitleDecorator>
+        <div className={titleDecorator}>
           <Title />
-        </TitleDecorator>
+        </div>
         {deprecated ? (
           <Alert
             title="Deprecated component"
@@ -107,29 +54,29 @@ const Page = ({
       </div>
       <Stack gap={2}>
         <Stack>
-          <StyledH2 as="h2" variant="headingStrong">
+          <Text as="h2" className={h2Decorator} variant="headingStrong">
             Overview
-          </StyledH2>
+          </Text>
           <Subtitle />
           <Description />
         </Stack>
         <div>
           <Primary />
           {!hideArgsTable ? (
             <>
-              <StyledH2 as="h2" variant="headingStrong">
+              <Text as="h2" className={h2Decorator} variant="headingStrong">
                 Props
-              </StyledH2>
+              </Text>
               <Controls />
             </>
           ) : null}
         </div>
-        <StoriesDecorator>
+        <Stack className={storiesDecorator}>
           <Stories />
-        </StoriesDecorator>
+        </Stack>
       </Stack>
     </Stack>
-  </StoriesThemes>
+  </div>
 )
 
 export default Page

.storybook/components/globalStyle.css.ts

@@ -0,0 +1,82 @@
+import { consoleLightTheme as theme } from '@ultraviolet/themes'
+import { globalStyle, style } from '@vanilla-extract/css'
+import background from '../assets/brand-background.png'
+
+export const globalStyleStoryBook = style({
+     fontFamily: "'Inter', sans-serif",
+    fontSize: 16,
+
+    color: theme.colors.neutral.text
+})
+
+globalStyle(`${globalStyleStoryBook} p`, { margin: 0 })
+
+
+globalStyle(`${globalStyleStoryBook} h2, ${globalStyleStoryBook} h3, ${globalStyleStoryBook} h4, ${globalStyleStoryBook} h5, ${globalStyleStoryBook} h6`, { margin: `${theme.space[2]} 0 ${theme.space[1]} 0`,
+ })
+
+globalStyle(`${globalStyleStoryBook} .sb-anchor h1, ${globalStyleStoryBook} .sb-anchor h2, ${globalStyleStoryBook} .sb-anchor h3, ${globalStyleStoryBook} .sb-anchor h4, ${globalStyleStoryBook} .sb-anchor h5, ${globalStyleStoryBook} .sb-anchor h6`, { margin: "inherit" })
+
+globalStyle(`${globalStyleStoryBook} body`, { 
+    fontFamily: "'Inter', sans-serif",
+    fontSize: 16,
+    fontWeight: 400,
+    lineHeight: 24,
+    color: theme.colors.neutral.text
+ })
+
+
+globalStyle(`${globalStyleStoryBook} h1, h2, h3, h4, h5, h3`, { 
+    color: theme.colors.neutral.text
+ })
+
+globalStyle(`${globalStyleStoryBook} .toc-list-item::before`, { borderColor: `${theme.colors.primary.border} !important` })
+
+globalStyle(`${globalStyleStoryBook} .toc-list-item`, { paddingBottom: "3px !important" })
+
+globalStyle(`${globalStyleStoryBook} .toc-list-item.is-active-li>a`, { color: `${theme.colors.primary.text} !important` })
+
+export const titleDecorator = style({})
+
+globalStyle(`${titleDecorator} > h1`, {
+     color: theme.colors.neutral.text,
+    fontSize: theme.typography.headingLargeStronger.fontSize,
+    fontFamily: theme.typography.headingLargeStronger.fontFamily,
+    fontWeight: theme.typography.headingLargeStronger.weight,
+    letterSpacing: theme.typography.headingLargeStronger.letterSpacing,
+    lineHeight: theme.typography.headingLargeStronger.lineHeight,
+    textDecoration: theme.typography.headingLargeStronger.textDecoration,
+    padding: `${theme.space[5]} ${theme.space[3]}`,
+    borderRadius: theme.radii.default,
+    backgroundImage: `url(${background})`,
+    backgroundSize: "cover",
+    backgroundPosition: "center",
+    backgroundRepeat: 'no-repeat',
+    width: "100%",
+})
+
+export const h2Decorator = style({
+    paddingBottom: theme.space[1],
+    marginBottom: `${theme.space[2]} !important`,
+    borderBottom: `2px solid ${theme.colors.neutral.borderStronger}`
+})
+
+export const storiesDecorator = style({})
+
+globalStyle(`${storiesDecorator} #stories`, {
+    color: theme.colors.neutral.text,
+    fontSize: theme.typography.headingStrong.fontSize,
+    fontFamily: theme.typography.headingStrong.fontFamily,
+    fontWeight: theme.typography.headingStrong.weight,
+    letterSpacing: theme.typography.headingStrong.letterSpacing,
+    lineHeight: theme.typography.headingStrong.lineHeight,
+    textDecoration: theme.typography.headingStrong.textDecoration,
+    paddingBottom: theme.space[1],
+    borderBottom: `2px solid ${theme.colors.neutral.borderStronger}`,
+    marginBottom: theme.space[2],
+})
+export const storiesTheme = style({})
+
+globalStyle(`${storiesTheme} .docs-story > div`, { padding: 0})
+
+globalStyle(`${storiesTheme} .css-xzp052 .innerZoomElementWrapper > *`, { border: "0 !important"})

.storybook/preview.tsx

@@ -1,5 +1,3 @@
-import { Global, ThemeProvider } from '@emotion/react'
-import { withThemeFromJSXProvider } from '@storybook/addon-themes'
 import type { Preview, StoryFn } from '@storybook/react-vite'
 import { themes } from 'storybook/theming'
 import {
@@ -10,9 +8,9 @@ import {
 } from '@ultraviolet/themes'
 import DocsContainer from './components/DocsContainer'
 import Page from './components/Page'
-import { globalStyles } from './components/globalStyle'
 import { dark, light } from './storybookThemes'
 import '@ultraviolet/fonts/fonts.css'
+
 import { scan } from "react-scan"
 
 const BREAKPOINT_ORDER = [
@@ -166,16 +164,7 @@ const decorators = [
         </ThemeProviderUI>
       </>
     )}, // Storybook is broken without this please refer to this issue: https://github.com/storybookjs/storybook/issues/24625
-  withThemeFromJSXProvider({
-    themes: {
-      light: lightTheme,
-      dark: darkTheme,
-      darker: darkerTheme,
-    },
-    defaultTheme: 'light',
-    Provider: ThemeProvider,
-    GlobalStyles: () => <Global styles={[globalStyles]} />,
-  }),
+
   withThemeProvider,
 ]
 

.storybook/vite.config.ts

@@ -48,10 +48,6 @@ export default defineConfig({
     svgr({ memo: true, svgo: false }),
     react({
       jsxRuntime: 'automatic',
-      jsxImportSource: '@emotion/react',
-      babel: {
-        plugins: ['@emotion/babel-plugin'],
-      },
     }),
     vanillaExtractPlugin({})
   ],

babel.config.json

@@ -1,5 +1,4 @@
 {
-  "plugins": ["@emotion"],
   "presets": [
     "@babel/preset-typescript",
     [
@@ -9,8 +8,7 @@
     [
       "@babel/preset-react",
       {
-        "runtime": "automatic",
-        "importSource": "@emotion/react"
+        "runtime": "automatic"
       }
     ]
   ]

e2e/tsconfig.json

@@ -5,7 +5,6 @@
     "target": "esnext",
     "module": "esnext",
     "jsx": "preserve",
-    "jsxImportSource": "@emotion/react",
     "allowImportingTsExtensions": true,
     "forceConsistentCasingInFileNames": true,
     "noPropertyAccessFromIndexSignature": false,
@@ -14,6 +13,6 @@
     "skipLibCheck": true,
     "types": ["vite/client"]
   },
-  "include": ["global.d.ts", "emotion.d.ts", "**/*.ts", "**/*.tsx"],
+  "include": ["global.d.ts", "**/*.ts", "**/*.tsx"],
   "exclude": ["node_modules", "coverage", "dist"]
 }