refactor(plus): refactor content card and configuration vanilla for plus package (#5628)

Author: matthprost

.changeset/icy-jobs-smile.md

@@ -0,0 +1,5 @@
+---
+"@ultraviolet/ui": patch
+---
+
+Add prop `style` on `<Skeleton />` component

.changeset/some-teams-worry.md

@@ -0,0 +1,6 @@
+---
+"@ultraviolet/plus": minor
+---
+
+- Refactor `<ContentCard />` to use vanilla extract
+- Configure vanilla extract on build and export styles. Can be imported as follow: `import '@ultraviolet/plus/styles'`

.storybook/vite.config.ts

@@ -33,6 +33,16 @@ export default defineConfig({
   },
   optimizeDeps: {
     exclude: ['@ultraviolet/*'],
+    include: [
+      '@vanilla-extract/css-utils',
+      '@vanilla-extract/css',
+      '@vanilla-extract/css/fileScope',
+      '@vanilla-extract/dynamic',
+      '@vanilla-extract/recipes',
+      '@vanilla-extract/recipes/createRuntimeFn',
+      '@vanilla-extract/sprinkles',
+      '@vanilla-extract/sprinkles/createRuntimeSprinkles',
+    ]
   },
   plugins: [
     svgr({ memo: true, svgo: false }),

README.md

@@ -25,16 +25,17 @@ Welcome to the Ultraviolet Core repository! This is the main repository for the
 ### Quick start
 
 ```sh
-pnpm add @ultraviolet/ui @ultraviolet/fonts @emotion/react @emotion/styled
+pnpm add @ultraviolet/ui @ultraviolet/fonts
 ```
 
 ```tsx
-import { Global, ThemeProvider, css } from '@emotion/react'
+import { ThemeProvider } from '@ultraviolet/ui'
 import { Button, normalize, theme } from '@ultraviolet/ui'
+import '@ultraviolet/ui/styles'
 import '@ultraviolet/fonts/fonts.css'
 
 const App = () => (
-  <ThemeProvider theme={theme}>
+  <ThemeProvider>
     <Global
       styles={css`
         ${normalize()}

packages/form/README.md

@@ -8,18 +8,19 @@ It is using [React Hook Form](https://react-hook-form.com/) under the hood.
 ## Get Started
 
 ```sh
-$ pnpm add @ultraviolet/ui @ultraviolet/form @emotion/react @emotion/styled
+$ pnpm add @ultraviolet/ui @ultraviolet/form
 ```
 
 ### Usage
 
 To use the library you need to put a `ThemeProvider` from `@emotion/react` with the theme that comes from `@ultraviolet/ui` then wrap all your fields inside a `Form`:
 
 ```tsx
-import { ThemeProvider } from '@emotion/react'
+import { ThemeProvider } from '@ultraviolet/ui'
 import { Form, TextInputField } from '@ultraviolet/form'
 import { theme } from '@ultraviolet/ui'
 import { useForm } from '@ultraviolet/form'
+import '@ultraviolet/ui/styles'
 
 // Here are the input types of your form
 type FormValues = {

packages/plus/README.md

@@ -2,16 +2,37 @@
 
 [![npm version](https://badge.fury.io/js/%40ultraviolet%2Fplus.svg)](https://badge.fury.io/js/%40ultraviolet%2Fplus)
 
-⚠️ THIS LIBRARY IS NOT STABLE ⚠️
-
 We are going to make breaking changes regularly until the first version is released.
 
 Ultraviolet Plus is a set of complex components that are built on top of Ultraviolet UI.
 
 ## Get Started
 
 ```sh
-$ pnpm add @ultraviolet/ui @ultraviolet/plus @emotion/react @emotion/styled
+$ pnpm add @ultraviolet/ui @ultraviolet/plus
+```
+
+### Usage
+
+In order for the library to work you will need to import both Ultraviolet UI and Ultraviolet Plus styles in your project.
+
+```tsx
+import { ThemeProvider } from '@ultraviolet/ui'
+import { normalize, theme } from '@ultraviolet/ui'
+import { ContentCard } from '@ultraviolet/plus'
+import '@ultraviolet/ui/styles'
+import '@ultraviolet/plus/styles'
+
+const App = () => (
+  <ThemeProvider theme={theme}>
+    <Global
+      styles={css`
+        ${normalize()}
+      `}
+    />
+    <ContentCard title="Welcome on Ultraviolet Plus" />
+  </ThemeProvider>
+)
 ```
 
 ## Documentation

packages/plus/package.json

@@ -16,7 +16,7 @@
     "build:profile": "npx vite-bundle-visualizer -c vite.config.ts",
     "typecheck": "tsc --noEmit",
     "size": "size-limit",
-    "test:unit": "LC_ALL=en_US.UTF-8  pnpm vitest --run --config vite.config.ts",
+    "test:unit": "LC_ALL=en_US.UTF-8  pnpm vitest --run --config vitest.config.ts",
     "test:unit:coverage": "pnpm test:unit --coverage",
     "lintpublish": "publint"
   },
@@ -47,7 +47,8 @@
       "types": "./dist/index.d.ts",
       "require": "./dist/index.cjs",
       "default": "./dist/index.js"
-    }
+    },
+    "./styles": "./dist/plus.css"
   },
   "size-limit": [
     {
@@ -87,6 +88,8 @@
     "@uiw/react-codemirror": "4.25.2",
     "@ultraviolet/icons": "workspace:*",
     "@ultraviolet/themes": "workspace:*",
+    "@vanilla-extract/css": "1.17.4",
+    "@vanilla-extract/dynamic": "2.1.5",
     "csstype": "3.1.3",
     "react-intersection-observer": "9.16.0"
   }

packages/plus/src/components/ContentCard/Skeleton.tsx

@@ -1,47 +1,34 @@
 'use client'
 
-import styled from '@emotion/styled'
-import { Stack, Skeleton as UltravioletSkeleton } from '@ultraviolet/ui'
-
-const SkeletonImage = styled(UltravioletSkeleton, {
-  shouldForwardProp: prop => !['height', 'width', 'direction'].includes(prop),
-})<{
-  width?: string
-  height?: string
-  direction: 'row' | 'column'
-}>`
-  border-radius: ${({ theme, direction }) =>
-    `${
-      direction === 'column'
-        ? `${theme.radii.default} ${theme.radii.default} 0 0`
-        : `${theme.radii.default} 0 0 ${theme.radii.default}`
-    }`};
-  width: ${({ width }) => width};
-  height: ${({ height }) => height};
-`
-
-const StyledStack = styled(Stack)`
-  padding: ${({ theme }) => theme.space['3']};
-`
+import { Stack, Skeleton as UVSkeleton } from '@ultraviolet/ui'
+import { assignInlineVars } from '@vanilla-extract/dynamic'
+import {
+  paddedStack,
+  skeletonHeightVar,
+  skeletonImage,
+  skeletonWidthVar,
+} from './styles.css'
 
 type SkeletonProps = {
   direction: 'row' | 'column'
 }
 
 export const Skeleton = ({ direction }: SkeletonProps) => (
   <Stack direction={direction}>
-    <SkeletonImage
-      direction={direction}
-      height={direction === 'column' ? '120px' : 'unset'}
+    <UVSkeleton
+      className={skeletonImage[direction]}
+      style={assignInlineVars({
+        [skeletonHeightVar]: direction === 'column' ? '120px' : 'unset',
+        [skeletonWidthVar]: direction === 'row' ? '220px' : '100%',
+      })}
       variant="square"
-      width={direction === 'row' ? '220px' : undefined}
     />
-    <StyledStack gap={2}>
-      <UltravioletSkeleton variant="line" />
-      <UltravioletSkeleton variant="line" />
-      <UltravioletSkeleton variant="line" />
-      <UltravioletSkeleton variant="line" />
-      <UltravioletSkeleton variant="line" />
-    </StyledStack>
+    <Stack className={paddedStack} gap={2}>
+      <UVSkeleton variant="line" />
+      <UVSkeleton variant="line" />
+      <UVSkeleton variant="line" />
+      <UVSkeleton variant="line" />
+      <UVSkeleton variant="line" />
+    </Stack>
   </Stack>
 )