refactor: theme provider exported into themes package (#5632)

* refactor: theme provider exported into themes package

* fix: add theme provide and use theme back to ui

* fix: add theme provider in tests

Author: matthprost

.changeset/eight-glasses-warn.md

@@ -2,14 +2,13 @@
 "@ultraviolet/ui": major
 ---
 
-⚠️ BREAKING CHANGES ⚠️ 
+! 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 { consoleLightTheme, ThemeProvider as ThemeProviderUV } 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) => {

.changeset/seven-teeth-shine.md

@@ -0,0 +1,9 @@
+---
+"@ultraviolet/illustrations": major
+"@ultraviolet/themes": major
+"@ultraviolet/icons": major
+"@ultraviolet/plus": major
+"@ultraviolet/ui": major
+---
+
+Theme provider has been moved to `@ultraviolet/themes` package. `@ultraviolet/ui` imports it internally and export `ThemeProvider` and `useTheme` hook for convenience.

.storybook/components/DocsContainer.tsx

@@ -5,12 +5,12 @@ import {
   DocsContainer as BaseContainer,
   Unstyled,
 } from '@storybook/addon-docs/blocks'
-import { consoleLightTheme as lightTheme } from '@ultraviolet/themes'
+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, ThemeProvider as ThemeProviderUV } from '@ultraviolet/ui'
+import { GlobalAlert } from '@ultraviolet/ui'
 
 type ExtraProps = {
   /**

.storybook/preview.tsx

@@ -6,14 +6,14 @@ import {
   consoleDarkTheme as darkTheme,
   consoleDarkerTheme as darkerTheme,
   consoleLightTheme as lightTheme,
+  ThemeProvider as ThemeProviderUI
 } 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"
-import { ThemeProvider as ThemeProviderUI } from '@ultraviolet/ui'
 
 const BREAKPOINT_ORDER = [
   'xlarge',
@@ -155,7 +155,7 @@ const decorators = [
 
       return darkerTheme
     }
-    
+
     return (
       <>
         <ThemeProviderUI theme={finalTheme()}>

examples/next/src/components/CopyBoxCommand.tsx

@@ -1,5 +1,5 @@
-import { useTheme } from '@emotion/react'
 import styled from '@emotion/styled'
+import { useTheme } from '@ultraviolet/themes'
 import { Stack, Tabs } from '@ultraviolet/ui'
 import type { ReactElement } from 'react'
 import { Children, isValidElement, useState } from 'react'

examples/next/src/components/Header.tsx

@@ -1,6 +1,6 @@
-import { useTheme } from '@emotion/react'
 import styled from '@emotion/styled'
 import { MoonIcon, SunIcon } from '@ultraviolet/icons'
+import { useTheme } from '@ultraviolet/themes'
 import { Breakpoint, Toggle } from '@ultraviolet/ui'
 import { APP_MAX_WIDTH } from '../constants'
 import GithubAndDocumentationButtons from './GithubAndDocumentationButtons'
@@ -37,7 +37,7 @@ const HeaderRow = styled.div`
 `
 
 const TopBar = () => {
-  const { theme, setTheme } = useTheme()
+  const { theme } = useTheme()
 
   return (
     <Header>
@@ -48,11 +48,7 @@ const TopBar = () => {
             <GithubAndDocumentationButtons />
           </Breakpoint>
           <SunIcon size="small" />
-          <Toggle
-            checked={theme === 'dark'}
-            name="darkMode"
-            onChange={() => setTheme(theme === 'light' ? 'dark' : 'light')}
-          />
+          <Toggle checked={theme === 'dark'} name="darkMode" />
           <MoonIcon size="small" />
         </HorizontalStack>
       </HeaderRow>

examples/next/src/pages/advanced/AdvancedUseCases.tsx

@@ -2,8 +2,8 @@ import styled from '@emotion/styled'
 import { Stack, Text } from '@ultraviolet/ui'
 import CopyBox from '../../components/CopyBoxCommand'
 
-const useCase1 = `import { ThemeProvider } from '@emotion/react'
-import { theme as lightTheme, dark as darkTheme, Button, Text } from '@ultraviolet/ui'
+const useCase1 = `import { theme as lightTheme, dark as darkTheme, Button, Text } from '@ultraviolet/ui'
+import { ThemeProvider } from '@ultraviolet/themes'
 import React, { useCallback, useState } from 'react'
 
 const App = () => {

examples/vite/src/App.tsx

@@ -1,4 +1,5 @@
 import { PlusIcon } from '@ultraviolet/icons'
+import { consoleDarkTheme, consoleLightTheme } from '@ultraviolet/themes'
 import {
   Alert,
   Button,
@@ -10,7 +11,6 @@ import {
 } 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)

examples/vite/src/main.tsx

@@ -1,5 +1,3 @@
-import { ThemeProvider } from '@emotion/react'
-import { consoleLightTheme } from '@ultraviolet/themes'
 import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import { App } from './App.tsx'
@@ -9,8 +7,6 @@ const root = createRoot(document.getElementById('root')!)
 
 root.render(
   <StrictMode>
-    <ThemeProvider theme={consoleLightTheme}>
-      <App />
-    </ThemeProvider>
+    <App />
   </StrictMode>,
 )

packages/icons/README.md

@@ -6,21 +6,19 @@ Ultraviolet Icons is a set of components based on SVG icons. It provides a set o
 
 ## Get Started
 
-For icons to work you will need to install some extra dependencies, such as `@ultraviolet/themes` and `@emotion/react`.
-
 ```sh
-$ pnpm add @ultraviolet/icons @ultraviolet/themes @emotion/react
+$ pnpm add @ultraviolet/icons @ultraviolet/themes
 ```
 
 You can then add `ThemeProvider` to your applications and use the provided theme from `@ultraviolet/themes` or use your own.
 
 ```tsx
 import { ThemeProvider } from '@emotion/react'
 import { SdkGoProductIcon } from '@ultraviolet/icons/product'
-import { consoleLightTheme } from '@ultraviolet/themes'
+import { theme } from '@ultraviolet/themes'
 
 const App = () => (
-  <ThemeProvider theme={consoleLightTheme}>
+  <ThemeProvider theme={theme}>
     <SdkGoProductIcon size="medium" variant="primary"/>
   </ThemeProvider>
 )