diff --git a/sdks/js/packages/core/custom.d.ts b/sdks/js/packages/core/custom.d.ts new file mode 100644 index 000000000..e09cb663c --- /dev/null +++ b/sdks/js/packages/core/custom.d.ts @@ -0,0 +1,14 @@ +declare module '*.svg' { + const content: React.FunctionComponent>; + export default content; +} + +declare module '*.jpg' { + const content: string; + export default content; +} + +declare module '*.png' { + const content: string; + export default content; +} diff --git a/sdks/js/packages/core/react/assets/logo.png b/sdks/js/packages/core/react/assets/logo.png new file mode 100644 index 000000000..cdcbd4d17 Binary files /dev/null and b/sdks/js/packages/core/react/assets/logo.png differ diff --git a/sdks/js/packages/core/react/components/Header.tsx b/sdks/js/packages/core/react/components/Header.tsx index b9bff707c..385406c3c 100644 --- a/sdks/js/packages/core/react/components/Header.tsx +++ b/sdks/js/packages/core/react/components/Header.tsx @@ -1,5 +1,6 @@ import { Flex, Text } from '@raystack/apsara'; import React, { ComponentPropsWithRef } from 'react'; +import logo from '~/react/assets/logo.png'; import { useFrontier } from '../contexts/FrontierContext'; const styles = { @@ -21,8 +22,10 @@ const styles = { }; const defaultLogo = ( + // eslint-disable-next-line @next/next/no-img-element logo ); diff --git a/sdks/js/packages/core/react/components/index.ts b/sdks/js/packages/core/react/components/index.ts index 6cc1e6e20..fcb9763d1 100644 --- a/sdks/js/packages/core/react/components/index.ts +++ b/sdks/js/packages/core/react/components/index.ts @@ -1 +1 @@ -export * from './login'; +export * from './onboarding/signin'; diff --git a/sdks/js/packages/core/react/components/magiclink-verify.tsx b/sdks/js/packages/core/react/components/onboarding/magiclink-verify.tsx similarity index 94% rename from sdks/js/packages/core/react/components/magiclink-verify.tsx rename to sdks/js/packages/core/react/components/onboarding/magiclink-verify.tsx index 20f4766ab..8a0040021 100644 --- a/sdks/js/packages/core/react/components/magiclink-verify.tsx +++ b/sdks/js/packages/core/react/components/onboarding/magiclink-verify.tsx @@ -7,10 +7,10 @@ import React, { useEffect, useState } from 'react'; -import { useFrontier } from '../contexts/FrontierContext'; -import { Container } from './Container'; -import { Header } from './Header'; -import { hasWindow } from './helper'; +import { Container } from '~/react/components/Container'; +import { Header } from '~/react/components/Header'; +import { useFrontier } from '~/react/contexts/FrontierContext'; +import { hasWindow } from '~/utils/index'; const styles = { wrapper: { diff --git a/sdks/js/packages/core/react/components/magiclink.tsx b/sdks/js/packages/core/react/components/onboarding/magiclink.tsx similarity index 97% rename from sdks/js/packages/core/react/components/magiclink.tsx rename to sdks/js/packages/core/react/components/onboarding/magiclink.tsx index 79b7b9fd4..c2f7322f5 100644 --- a/sdks/js/packages/core/react/components/magiclink.tsx +++ b/sdks/js/packages/core/react/components/onboarding/magiclink.tsx @@ -1,6 +1,6 @@ import { Button, Separator, Text, TextField } from '@raystack/apsara'; import React, { useCallback, useState } from 'react'; -import { useFrontier } from '../contexts/FrontierContext'; +import { useFrontier } from '~/react/contexts/FrontierContext'; const styles = { container: { diff --git a/sdks/js/packages/core/react/components/oidc.tsx b/sdks/js/packages/core/react/components/onboarding/oidc.tsx similarity index 82% rename from sdks/js/packages/core/react/components/oidc.tsx rename to sdks/js/packages/core/react/components/onboarding/oidc.tsx index df491c142..ab8e7719e 100644 --- a/sdks/js/packages/core/react/components/oidc.tsx +++ b/sdks/js/packages/core/react/components/onboarding/oidc.tsx @@ -1,7 +1,7 @@ import { Button, Text } from '@raystack/apsara'; import React from 'react'; -import { capitalize } from './helper'; -import GoogleLogo from '../assets/logos/google-logo.svg'; +import GoogleLogo from '~/react/assets/logos/google-logo.svg'; +import { capitalize } from '~/utils'; const oidcLogoMap = new Map([['google', GoogleLogo]]); @@ -30,6 +30,7 @@ export const OIDCButton = ({ onClick={onClick} > {oidcLogoMap.has(provider) ? ( + // eslint-disable-next-line @next/next/no-img-element {provider & { title?: string; excludes?: string[]; }; -export const SignedIn = ({ +export const SignIn = ({ logo, - title = 'Login to Raypoint', + title = 'Login to Raystack', excludes = [], ...props }: SignedInProps) => { diff --git a/sdks/js/packages/core/react/components/signup.tsx b/sdks/js/packages/core/react/components/onboarding/signup.tsx similarity index 87% rename from sdks/js/packages/core/react/components/signup.tsx rename to sdks/js/packages/core/react/components/onboarding/signup.tsx index fb92caf45..b81907af9 100644 --- a/sdks/js/packages/core/react/components/signup.tsx +++ b/sdks/js/packages/core/react/components/onboarding/signup.tsx @@ -1,8 +1,8 @@ import { Flex, Link, Text } from '@raystack/apsara'; import React, { ComponentPropsWithRef, useCallback } from 'react'; -import { useFrontier } from '../contexts/FrontierContext'; -import { Container } from './Container'; -import { Header } from './Header'; +import { useFrontier } from '~/react/contexts/FrontierContext'; +import { Container } from '../Container'; +import { Header } from '../Header'; import { MagicLink } from './magiclink'; import { OIDCButton } from './oidc'; @@ -12,17 +12,17 @@ const styles = { } }; -type SignupProps = ComponentPropsWithRef & { +type SignUpProps = ComponentPropsWithRef & { logo?: React.ReactNode; title?: string; excludes?: string[]; }; -export const Signup = ({ +export const SignUp = ({ logo, title = 'Create your account', excludes = [], ...props -}: SignupProps) => { +}: SignUpProps) => { const { config } = useFrontier(); const { client, strategies = [] } = useFrontier(); diff --git a/sdks/js/packages/core/react/components/organization.tsx b/sdks/js/packages/core/react/components/organization/create.tsx similarity index 95% rename from sdks/js/packages/core/react/components/organization.tsx rename to sdks/js/packages/core/react/components/organization/create.tsx index dcbb0ac23..33b2d4381 100644 --- a/sdks/js/packages/core/react/components/organization.tsx +++ b/sdks/js/packages/core/react/components/organization/create.tsx @@ -5,8 +5,8 @@ import { Button, Flex, InputField, Text, TextField } from '@raystack/apsara'; import { ComponentPropsWithRef } from 'react'; import { Controller, useForm } from 'react-hook-form'; import * as yup from 'yup'; -import { useFrontier } from '../contexts/FrontierContext'; -import { Container } from './Container'; +import { useFrontier } from '~/react/contexts/FrontierContext'; +import { Container } from '../Container'; const styles = { container: { @@ -98,7 +98,7 @@ export const CreateOrganization = ({ // @ts-ignore size="medium" label="Workspace URL" - placeholder="raypoint.co/" + placeholder="raystack.org/" /> )} control={control} diff --git a/sdks/js/packages/core/react/index.ts b/sdks/js/packages/core/react/index.ts index 1c7309c7d..abf5f7e7c 100644 --- a/sdks/js/packages/core/react/index.ts +++ b/sdks/js/packages/core/react/index.ts @@ -1,10 +1,10 @@ import '@raystack/apsara/index.css'; -export * from './components/login'; -export * from './components/magiclink-verify'; -export * from './components/organization'; -export * from './components/signup'; -export * from './components/Container'; +export { Container } from './components/Container'; +export { MagicLinkVerify } from './components/onboarding/magiclink-verify'; +export { SignIn } from './components/onboarding/signin'; +export { SignUp } from './components/onboarding/signup'; +export { CreateOrganization } from './components/organization/create'; export { useFrontier } from './contexts/FrontierContext'; export { FrontierProvider } from './contexts/FrontierProvider'; diff --git a/sdks/js/packages/core/tsconfig.json b/sdks/js/packages/core/tsconfig.json index c59e593e8..a8a8bdcba 100644 --- a/sdks/js/packages/core/tsconfig.json +++ b/sdks/js/packages/core/tsconfig.json @@ -1,5 +1,10 @@ { "extends": "@raystack/frontier-tsconfig/react-library.json", + "compilerOptions": { + "paths": { + "~/*": ["./*"] + } + }, "include": ["."], "exclude": ["dist", "dist", "node_modules"] } diff --git a/sdks/js/packages/core/tsup.config.ts b/sdks/js/packages/core/tsup.config.ts index 0ba78fb06..09a3be53b 100644 --- a/sdks/js/packages/core/tsup.config.ts +++ b/sdks/js/packages/core/tsup.config.ts @@ -18,7 +18,8 @@ export default defineConfig(() => [ external: ['react', 'svelte', 'vue', 'solid-js'], dts: true, loader: { - '.svg': 'dataurl' + '.svg': 'dataurl', + '.png': 'dataurl' } } ]); diff --git a/sdks/js/packages/core/react/components/helper.ts b/sdks/js/packages/core/utils/index.ts similarity index 100% rename from sdks/js/packages/core/react/components/helper.ts rename to sdks/js/packages/core/utils/index.ts