From 4ee84375c45e10c12f0d2bcc56f4db1133b81f59 Mon Sep 17 00:00:00 2001
From: Andrew Smith <andrew@supabase.io>
Date: Mon, 8 May 2023 22:12:40 +0100
Subject: [PATCH] Add individual components to SolidJS package (#171)

---
 .changeset/light-mice-clap.md                 |   5 +
 packages/solid/src/components/Auth/Auth.tsx   |  12 +-
 packages/solid/src/components/Auth/index.ts   |   2 +-
 .../components/Auth/interfaces/SocialAuth.tsx |   6 +-
 .../solid/src/components/Auth/ui/index.tsx    | 110 ++++++++++++++++++
 5 files changed, 130 insertions(+), 5 deletions(-)
 create mode 100644 .changeset/light-mice-clap.md
 create mode 100644 packages/solid/src/components/Auth/ui/index.tsx

diff --git a/.changeset/light-mice-clap.md b/.changeset/light-mice-clap.md
new file mode 100644
index 00000000..654dc9f5
--- /dev/null
+++ b/.changeset/light-mice-clap.md
@@ -0,0 +1,5 @@
+---
+'@supabase/auth-ui-solid': minor
+---
+
+Add individual components to SolidJS Auth UI
diff --git a/packages/solid/src/components/Auth/Auth.tsx b/packages/solid/src/components/Auth/Auth.tsx
index 09288631..cc47f44d 100644
--- a/packages/solid/src/components/Auth/Auth.tsx
+++ b/packages/solid/src/components/Auth/Auth.tsx
@@ -77,7 +77,11 @@ function Auth(props: AuthProps): JSX.Element | null {
   const [SignView, setSignView] = createSignal()
 
   onMount(() => {
-    setSignView(authView() === 'sign_in' || authView() === 'sign_up')
+    setSignView(
+      authView() === 'sign_in' ||
+        authView() === 'sign_up' ||
+        authView() === 'magic_link'
+    )
   })
 
   createEffect(() => {
@@ -90,7 +94,11 @@ function Auth(props: AuthProps): JSX.Element | null {
      * to add a new theme use  createTheme({})
      * https://stitches.dev/docs/api#theme
      */
-    setSignView(authView() === 'sign_in' || authView() === 'sign_up')
+    setSignView(
+      authView() === 'sign_in' ||
+        authView() === 'sign_up' ||
+        authView() === 'magic_link'
+    )
     createStitches({
       theme: merge(
         mergedProps().appearance?.theme?.default ?? {},
diff --git a/packages/solid/src/components/Auth/index.ts b/packages/solid/src/components/Auth/index.ts
index d438a9ea..de9e3ed8 100644
--- a/packages/solid/src/components/Auth/index.ts
+++ b/packages/solid/src/components/Auth/index.ts
@@ -1,2 +1,2 @@
 export { default as Auth } from './Auth'
-export * from './interfaces'
+export * from './ui'
diff --git a/packages/solid/src/components/Auth/interfaces/SocialAuth.tsx b/packages/solid/src/components/Auth/interfaces/SocialAuth.tsx
index ed54766c..3ca0f4e1 100644
--- a/packages/solid/src/components/Auth/interfaces/SocialAuth.tsx
+++ b/packages/solid/src/components/Auth/interfaces/SocialAuth.tsx
@@ -18,7 +18,7 @@ interface SocialAuthProps {
   queryParams?: { [key: string]: string }
   redirectTo: RedirectTo
   onlyThirdPartyProviders: boolean
-  view: 'sign_in' | 'sign_up'
+  view: 'sign_in' | 'sign_up' | 'magic_link'
   i18n: I18nVariables
   appearance?: Appearance
 }
@@ -29,6 +29,8 @@ function SocialAuth(props: SocialAuthProps) {
   const [loading, setLoading] = createSignal(false)
   const [error, setError] = createSignal('')
 
+  const currentView = props.view === 'magic_link' ? 'sign_in' : props.view
+
   const handleProviderSignIn = async (provider: Provider) => {
     setLoading(true)
     const { error } = await props.supabaseClient.auth.signInWithOAuth({
@@ -75,7 +77,7 @@ function SocialAuth(props: SocialAuthProps) {
                     >
                       {props.socialLayout === 'vertical' &&
                         template(
-                          props.i18n[props.view]
+                          props.i18n[currentView]
                             ?.social_provider_text as string,
                           {
                             provider: capitalize(provider),
diff --git a/packages/solid/src/components/Auth/ui/index.tsx b/packages/solid/src/components/Auth/ui/index.tsx
new file mode 100644
index 00000000..78cf8056
--- /dev/null
+++ b/packages/solid/src/components/Auth/ui/index.tsx
@@ -0,0 +1,110 @@
+import Auth from '../Auth'
+import { Auth as AuthProps } from '../../../types'
+import { PREPENDED_CLASS_NAMES } from '@supabase/auth-ui-shared'
+import { css } from '@stitches/core'
+import { CssComponent } from '@stitches/core/types/styled-component'
+import { JSXElement } from 'solid-js'
+
+const containerDefaultStyles = css({
+  borderRadius: '12px',
+  boxShadow: 'rgba(100, 100, 111, 0.2) 0px 7px 29px 0px',
+  width: '360px',
+  padding: '28px 32px',
+})
+
+interface Card {
+  className?: string | CssComponent
+}
+
+export const AuthCard = ({
+  children,
+  appearance,
+}: {
+  children?: JSXElement
+  appearance?: Card
+}) => {
+  const classNames = [
+    `${PREPENDED_CLASS_NAMES}_ui-card`,
+    containerDefaultStyles(),
+    appearance?.className,
+  ]
+  return <div class={classNames.join(' ')}>{children}</div>
+}
+
+export const SignUp = (
+  props: Omit<AuthProps, 'view' | 'onlyThirdPartyProviders'>
+) => {
+  return (
+    <Auth
+      showLinks={false}
+      {...props}
+      onlyThirdPartyProviders={false}
+      view="sign_up"
+    />
+  )
+}
+
+export const SignIn = (
+  props: Omit<AuthProps, 'view' | 'onlyThirdPartyProviders'>
+) => {
+  return (
+    <Auth
+      showLinks={false}
+      {...props}
+      onlyThirdPartyProviders={false}
+      view="sign_in"
+    />
+  )
+}
+
+export const MagicLink = (
+  props: Omit<
+    AuthProps,
+    'view' | 'onlyThirdPartyProviders' | 'magicLink' | 'showLinks'
+  >
+) => {
+  return <Auth {...props} view="magic_link" showLinks={false} />
+}
+
+export const SocialAuth = (
+  props: Omit<
+    AuthProps,
+    | 'view'
+    | 'onlyThirdPartyProviders'
+    | 'magicLink'
+    | 'showLinks'
+    | 'children'
+  >
+) => {
+  return (
+    <Auth
+      {...props}
+      view="sign_in"
+      showLinks={false}
+      onlyThirdPartyProviders={true}
+    />
+  )
+}
+
+export const ForgottenPassword = (
+  props: Pick<
+    AuthProps,
+    | 'supabaseClient'
+    | 'appearance'
+    | 'localization'
+    | 'theme'
+    | 'showLinks'
+    | 'redirectTo'
+  >
+) => {
+  return <Auth showLinks={false} {...props} view="forgotten_password" />
+}
+
+export const UpdatePassword = (
+  props: Pick<
+    AuthProps,
+    'supabaseClient' | 'appearance' | 'localization' | 'theme'
+  >
+) => {
+  return <Auth {...props} view="update_password" />
+}