From 981583fb631455088209293e9bf61c7ca3d1a643 Mon Sep 17 00:00:00 2001 From: Terry Sutton Date: Mon, 28 Nov 2022 12:05:54 -0330 Subject: [PATCH] Move theme provider to packages --- apps/docs/components/CodeBlock/CodeBlock.tsx | 2 +- .../docs/components/Footer/DarkModeToggle.tsx | 4 +- apps/docs/components/Footer/index.tsx | 2 +- apps/docs/components/Frameworks.tsx | 2 +- apps/docs/components/Navigation/NavBar.tsx | 2 +- .../NavigationMenu/NavigationMenu.tsx | 2 +- .../Navigation/NavigationMenu/TopNavBar.tsx | 14 +++--- .../NavigationMenu/TopNavBarRef.tsx | 48 +++++++++---------- apps/docs/layouts/SiteRefLayout.tsx | 2 +- apps/docs/pages/_app.tsx | 2 +- apps/docs/pages/new/auth.mdx | 4 +- apps/docs/pages/new/index.mdx | 19 ++++++-- .../common}/Providers.tsx | 0 packages/common/index.tsx | 1 + packages/tsconfig/react-library.json | 2 +- .../src/components/GlassPanel/GlassPanel.tsx | 12 +++-- 16 files changed, 68 insertions(+), 50 deletions(-) rename {apps/docs/components => packages/common}/Providers.tsx (100%) diff --git a/apps/docs/components/CodeBlock/CodeBlock.tsx b/apps/docs/components/CodeBlock/CodeBlock.tsx index bcd472a78d4..ada3cd860c0 100644 --- a/apps/docs/components/CodeBlock/CodeBlock.tsx +++ b/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 diff --git a/apps/docs/components/Footer/DarkModeToggle.tsx b/apps/docs/components/Footer/DarkModeToggle.tsx index 230e973e4ba..04f9d225854 100644 --- a/apps/docs/components/Footer/DarkModeToggle.tsx +++ b/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 diff --git a/apps/docs/components/Footer/index.tsx b/apps/docs/components/Footer/index.tsx index b690dd003aa..01424c906f5 100644 --- a/apps/docs/components/Footer/index.tsx +++ b/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' diff --git a/apps/docs/components/Frameworks.tsx b/apps/docs/components/Frameworks.tsx index 151e5708e4a..b12214c2adf 100644 --- a/apps/docs/components/Frameworks.tsx +++ b/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() diff --git a/apps/docs/components/Navigation/NavBar.tsx b/apps/docs/components/Navigation/NavBar.tsx index 3b6e7c4b7fe..d71e2d55c43 100644 --- a/apps/docs/components/Navigation/NavBar.tsx +++ b/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' diff --git a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx b/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx index a31d4f3f6de..142233c7ce6 100644 --- a/apps/docs/components/Navigation/NavigationMenu/NavigationMenu.tsx +++ b/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() diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx index 9078f481c24..e1c0344f19f 100644 --- a/apps/docs/components/Navigation/NavigationMenu/TopNavBar.tsx +++ b/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 = () => {
diff --git a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx b/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx index d01deeb4b39..94fd02a817c 100644 --- a/apps/docs/components/Navigation/NavigationMenu/TopNavBarRef.tsx +++ b/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 = () => {
@@ -129,15 +129,15 @@ const TopNavBarRef: FC = () => {
{item.description} diff --git a/apps/docs/pages/new/index.mdx b/apps/docs/pages/new/index.mdx index fdd81811c6f..dca758857f3 100644 --- a/apps/docs/pages/new/index.mdx +++ b/apps/docs/pages/new/index.mdx @@ -14,13 +14,13 @@ Hello danny
-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.
-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 {product.description} - + ) @@ -81,7 +81,7 @@ hello world {product.description} - + ) @@ -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. diff --git a/apps/docs/components/Providers.tsx b/packages/common/Providers.tsx similarity index 100% rename from apps/docs/components/Providers.tsx rename to packages/common/Providers.tsx diff --git a/packages/common/index.tsx b/packages/common/index.tsx index eec7fc002d5..c33bdfbdfa3 100644 --- a/packages/common/index.tsx +++ b/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, diff --git a/packages/tsconfig/react-library.json b/packages/tsconfig/react-library.json index 6d6a7fea97f..e72daf3ea1a 100644 --- a/packages/tsconfig/react-library.json +++ b/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" diff --git a/packages/ui/src/components/GlassPanel/GlassPanel.tsx b/packages/ui/src/components/GlassPanel/GlassPanel.tsx index 6b59a0c6fd1..45fbb52f759 100644 --- a/packages/ui/src/components/GlassPanel/GlassPanel.tsx +++ b/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 (
) : (