Add individual components to SolidJS package (#171)

.changeset/light-mice-clap.md

@@ -0,0 +1,5 @@
+---
+'@supabase/auth-ui-solid': minor
+---
+
+Add individual components to SolidJS Auth UI

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 ?? {},

packages/solid/src/components/Auth/index.ts

@@ -1,2 +1,2 @@
 export { default as Auth } from './Auth'
-export * from './interfaces'
+export * from './ui'

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),

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" />
+}