Move theme provider to packages

apps/docs/components/CodeBlock/CodeBlock.tsx

@@ -13,7 +13,7 @@ import dart from 'react-syntax-highlighter/dist/cjs/languages/hljs/dart'
 import json from 'react-syntax-highlighter/dist/cjs/languages/hljs/json'
 
 import { useState } from 'react'
-import { useTheme } from '../Providers'
+import { useTheme } from 'common/Providers'
 
 interface Props {
   title?: string

apps/docs/components/Footer/DarkModeToggle.tsx

@@ -1,4 +1,4 @@
-import { useTheme } from '~/components/Providers'
+import { useTheme } from 'common/Providers'
 import { IconSun, IconMoon } from '@supabase/ui'
 
 function DarkModeToggle() {
@@ -19,7 +19,7 @@ function DarkModeToggle() {
         type="button"
         aria-pressed="false"
         className={`
-                relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent 
+                relative inline-flex h-6 w-11 flex-shrink-0 cursor-pointer rounded-full border-2 border-transparent
                 transition-colors duration-200 ease-in-out focus:outline-none ${
                   isDarkMode ? 'bg-scale-500' : 'bg-scale-900'
                 } mx-5

apps/docs/components/Footer/index.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link'
 import Image from 'next/image'
 import FooterLinks from 'data/footer.json'
 import DarkModeToggle from './DarkModeToggle'
-import { useTheme } from '../Providers'
+import { useTheme } from 'common/Providers'
 import * as supabaseLogoWordmarkDark from 'common/assets/images/supabase-logo-wordmark--dark.png'
 import * as supabaseLogoWordmarkLight from 'common/assets/images/supabase-logo-wordmark--light.png'
 

apps/docs/components/Frameworks.tsx

@@ -1,5 +1,5 @@
 import ButtonCard from './ButtonCard'
-import { useTheme } from '~/components/Providers'
+import { useTheme } from 'common/Providers'
 
 const Frameworks = () => {
   const { isDarkMode } = useTheme()

apps/docs/components/Navigation/NavBar.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { useState, useEffect, FC } from 'react'
 import { IconMenu, IconMoon, IconSearch, IconSun, IconCommand, Listbox } from 'ui'
-import { useTheme } from '../Providers'
+import { useTheme } from 'common/Providers'
 import { REFERENCES } from './Navigation.constants'
 import { SearchButton } from '../DocSearch'
 

apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx

@@ -6,7 +6,7 @@ import * as NavItems from './NavigationMenu.constants'
 import NavigationMenuGuideList from './NavigationMenuGuideList'
 import NavigationMenuRefList from './NavigationMenuRefList'
 import NavigationMenuCliList from './NavigationMenuCliList'
-import { useTheme } from '~/components/Providers'
+import { useTheme } from 'common/Providers'
 
 const SideNav = () => {
   const router = useRouter()

apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx

@@ -5,7 +5,7 @@ import { FC, useEffect, useState } from 'react'
 import { Button, IconCommand, IconMenu, IconMoon, IconSearch, IconSun, Input, Listbox } from 'ui'
 import { SearchButton } from '~/components/DocSearch'
 import { REFERENCES } from '~/components/Navigation/Navigation.constants'
-import { useTheme } from '~/components/Providers'
+import { useTheme } from 'common/Providers'
 
 import { getPageType } from '~/lib/helpers'
 
@@ -106,15 +106,15 @@ const TopNavBar: FC = () => {
             <SearchButton className="w-full">
               <div
                 className="
-              flex 
+              flex
               group
-              items-center 
-              justify-between 
-              bg-scaleA-200 
-              border 
+              items-center
+              justify-between
+              bg-scaleA-200
+              border
               transition
               hover:border-scale-600
-              hover:bg-scaleA-300 
+              hover:bg-scaleA-300
               border-scale-500 pl-3 pr-1.5 w-full h-[32px] rounded"
               >
                 <div className="flex items-center space-x-2">

apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx

@@ -17,7 +17,7 @@ import {
 } from 'ui'
 import { SearchButton } from '~/components/DocSearch'
 import { REFERENCES } from '~/components/Navigation/Navigation.constants'
-import { useTheme } from '~/components/Providers'
+import { useTheme } from 'common/Providers'
 
 import { getPageType } from '~/lib/helpers'
 
@@ -99,15 +99,15 @@ const TopNavBarRef: FC = () => {
           <SearchButton className="w-full lg:w-96">
             <div
               className="
-              flex 
+              flex
               group
-              items-center 
-              justify-between 
-              bg-scaleA-200 
-              border 
+              items-center
+              justify-between
+              bg-scaleA-200
+              border
               transition
               hover:border-scale-600
-              hover:bg-scaleA-300 
+              hover:bg-scaleA-300
               border-scale-500 pl-1.5 md:pl-3 pr-1.5 w-full h-[32px] rounded"
             >
               <div className="flex items-center space-x-2">
@@ -129,15 +129,15 @@ const TopNavBarRef: FC = () => {
             <div className="w-64">
               <div
                 className="
-              flex 
+              flex
               group
-              items-center 
-              justify-between 
-              bg-scaleA-200 
-              border 
+              items-center
+              justify-between
+              bg-scaleA-200
+              border
               transition
               hover:border-scale-600
-              hover:bg-scaleA-300 
+              hover:bg-scaleA-300
               border-scale-500 pl-3 pr-1.5 w-full h-[32px] rounded
               rounded-tr-none
               rounded-br-none
@@ -177,15 +177,15 @@ const TopNavBarRef: FC = () => {
               <div className="w-32">
                 <div
                   className="
-              flex 
+              flex
               group
-              items-center 
-              justify-between 
-              bg-scaleA-200 
-              border 
+              items-center
+              justify-between
+              bg-scaleA-200
+              border
               transition
               hover:border-scale-600
-              hover:bg-scaleA-300 
+              hover:bg-scaleA-300
               border-scale-500 pl-3 pr-1.5 w-full h-[32px] rounded
               font-mono
 
@@ -231,15 +231,15 @@ const TopNavBarRef: FC = () => {
             <div className="w-96">
               <div
                 className="
-              flex 
+              flex
               gap-3
               group
-              items-center 
-              bg-scaleA-200 
-              border 
+              items-center
+              bg-scaleA-200
+              border
               transition
               hover:border-scale-600
-              hover:bg-scaleA-300 
+              hover:bg-scaleA-300
               border-scale-500 pl-3 pr-1.5 w-full h-[32px] rounded
               font-mono
               "

apps/docs/layouts/SiteRefLayout.tsx

@@ -3,7 +3,7 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import NavigationMenu from '~/components/Navigation/NavigationMenu/NavigationMenu'
 import TopNavBarRef from '~/components/Navigation/NavigationMenu/TopNavBarRef'
-import { useTheme } from '~/components/Providers'
+import { useTheme } from 'common/Providers'
 
 import RefSwitcher from '~/components/Navigation/RefSwitcher'
 import { useEffect, useState } from 'react'

apps/docs/pages/_app.tsx

@@ -4,7 +4,7 @@ import { useEffect } from 'react'
 import { AppPropsWithLayout } from 'types'
 import { SearchProvider } from '~/components/DocSearch'
 import Favicons from '~/components/Favicons'
-import { ThemeProvider } from '../components/Providers'
+import { ThemeProvider } from 'common/Providers'
 import SiteLayout from '~/layouts/SiteLayout'
 import '../styles/algolia-search.scss'
 import '../styles/ch.scss'

apps/docs/pages/new/auth.mdx

@@ -1,6 +1,6 @@
 import Layout from '~/layouts/DefaultLayout'
 import Link from 'next/link'
-// import { useTheme } from '~/components/Providers'
+// import { useTheme } from 'common/Providers'
 import { GlassPanel } from 'ui'
 
 {/* // export const { isDarkMode } = useTheme() */}
@@ -27,7 +27,7 @@ export const meta = {
             header="/docs/img/cards/sample-card-header-4.svg"
             span="col-span-6"
             background={false}
-            //* isDarkMode={isDarkMode} 
+            //* isDarkMode={isDarkMode}
           >
             {item.description}
           </GlassPanel>

apps/docs/pages/new/index.mdx

@@ -14,13 +14,13 @@ Hello danny
 
 <div className="border rounded p-12">
 
-In this 25-minute guide, we’ll be building a collaborative user managment app using NextJS and Supabase.
+In this 25-minute guide, we'll be building a collaborative user managment app using NextJS and Supabase.
 As users add and move rectangles in a canvas, changes will be automatically synced and persisted, allowing for a canvas that updates in real-time across clients.
 Users will also be able to see other users selections, and undo and redo actions.
 
 </div>
 
-In this 25-minute guide, we’ll be building a collaborative user managment app using NextJS and Supabase.
+In this 25-minute guide, we'll be building a collaborative user managment app using NextJS and Supabase.
 As users add and move rectangles in a canvas, changes will be automatically synced and persisted, allowing for a canvas that updates in real-time across clients.
 Users will also be able to see other users selections, and undo and redo actions.
 
@@ -59,7 +59,7 @@ hello world
         <a className={product.span ?? 'col-span-4'}>
           <GlassPanel {...product} background={false}>
             {product.description}
-          </GlassPanel> 
+          </GlassPanel>
         </a>
       </Link>
     )
@@ -81,7 +81,7 @@ hello world
         <a className={product.span ?? 'col-span-4'}>
           <GlassPanel {...product} background={false}>
             {product.description}
-          </GlassPanel> 
+          </GlassPanel>
         </a>
       </Link>
     )
@@ -94,6 +94,7 @@ export const products = [
   {
     title: 'Database',
     icon: 'database',
+    hasLightIcon: true,
     href: '/guides/database',
     description: 'Social Login allows the user to sign into a third party website instead of.',
     span: 'col-span-6',
@@ -101,6 +102,7 @@ export const products = [
   {
     title: 'Auth',
     icon: 'auth',
+    hasLightIcon: true,
     href: '/guides/auth',
     description: `
 Social Login allows the user to sign into a third party website instead of creating a new account specifically for that website.
@@ -110,6 +112,7 @@ Social Login allows the user to sign into a third party website instead of creat
   {
     title: 'Storage',
     icon: 'storage',
+    hasLightIcon: true,
     href: '/guides/storage',
     description: `
 Social Login allows the user to sign into a third party website instead of creating a new account specifically for that website.
@@ -118,6 +121,7 @@ Social Login allows the user to sign into a third party website instead of creat
   {
     title: 'Realtime',
     icon: 'realtime',
+    hasLightIcon: true,
     href: '/guides/realtime',
     description: `
 Social Login allows the user to sign into a third party website instead of creating a new account specifically for that website.
@@ -126,6 +130,7 @@ Social Login allows the user to sign into a third party website instead of creat
   {
     title: 'Edge Functions',
     icon: 'functions',
+    hasLightIcon: true,
     href: '/guides/functions',
     description: `
 Social Login allows the user to sign into a third party website instead of creating a new account specifically for that website.
@@ -137,6 +142,7 @@ export const apis = [
   {
     title: 'Severless APIs',
     icon: 'reference',
+    hasLightIcon: true,
     href: 'database',
     description: `
 Social Login allows the user to sign into a third party website instead of creating a new account specifically for that website.
@@ -145,6 +151,7 @@ Social Login allows the user to sign into a third party website instead of creat
   {
     title: 'Managment API',
     icon: 'reference',
+    hasLightIcon: true,
     href: 'auth',
     description: `
 Social Login allows the user to sign into a third party website instead of creating a new account specifically for that website.
@@ -153,6 +160,7 @@ Social Login allows the user to sign into a third party website instead of creat
   {
     title: 'Client libraries',
     icon: 'reference',
+    hasLightIcon: true,
     href: 'storage',
     description: `
 Social Login allows the user to sign into a third party website instead of creating a new account specifically for that website.
@@ -165,6 +173,7 @@ export const platform = [
     header: '/docs/img/cards/sample-card-header-3.svg',
     title: 'Dashboard guides',
     icon: 'reference',
+    hasLightIcon: true,
     href: 'database',
     description: `
 Social Login allows the user to sign into a third party website instead of creating a new account specifically for that website.
@@ -175,6 +184,7 @@ Social Login allows the user to sign into a third party website instead of creat
     header: '/docs/img/cards/sample-card-header-2.svg',
     title: 'Integrations',
     icon: 'integrations',
+    hasLightIcon: true,
     href: 'auth',
     description: `
 Social Login allows the user to sign into a third party website instead of creating a new account specifically for that website.
@@ -185,6 +195,7 @@ Social Login allows the user to sign into a third party website instead of creat
     header: '/docs/img/cards/sample-card-header-4.svg',
     title: 'Glossary',
     icon: 'reference',
+    hasLightIcon: true,
     href: 'storage',
     description: `
   Social Login allows the user to sign into a third party website instead of creating a new account specifically for that website.

packages/common/index.tsx

@@ -3,6 +3,7 @@ import React from 'react'
 import SidebarLayout from './layouts/SidebarLayout'
 
 export * from './Button'
+export * from './Providers'
 
 export const Layouts = {
   SidebarLayout,

packages/tsconfig/react-library.json

@@ -3,7 +3,7 @@
   "display": "React Library",
   "extends": "./base.json",
   "compilerOptions": {
-    "lib": ["ES2015"],
+    "lib": ["ES2015", "dom", "dom.iterable", "esnext"],
     "module": "ESNext",
     "target": "ES6",
     "jsx": "react-jsx"

packages/ui/src/components/GlassPanel/GlassPanel.tsx

@@ -1,5 +1,6 @@
 import React from 'react'
 import { Item } from '../Accordion/Accordion'
+import { useTheme } from 'common/Providers'
 
 interface Props {
   title: string
@@ -8,7 +9,8 @@ interface Props {
   children?: React.ReactNode
   header?: string
   background?: boolean
-  isDarkMode?: boolean
+  img?: string
+  hasLightIcon?: boolean
 }
 
 const GlassPanel = ({
@@ -19,8 +21,10 @@ const GlassPanel = ({
   header,
   background = true,
   img,
-  isDarkMode,
+  hasLightIcon,
 }: Props) => {
+  const { isDarkMode } = useTheme()
+
   return (
     <div
       className={[
@@ -61,7 +65,9 @@ const GlassPanel = ({
             <div className="bg-green-600 w-8 h-8 flex items-center justify-center rounded">
               <img
                 className="bg-green-600 w-5"
-                src={`/docs/img/icons/menu/${icon}${isDarkMode && !isDarkMode ? '-light' : ''}.svg`}
+                src={`/docs/img/icons/menu/${icon}${
+                  hasLightIcon && !isDarkMode ? '-light' : ''
+                }.svg`}
               />
             </div>
           ) : (