refactor(js-sdk): fix typo and component structure (#292)

sdks/js/packages/core/custom.d.ts

@@ -0,0 +1,14 @@
+declare module '*.svg' {
+  const content: React.FunctionComponent<React.SVGAttributes<SVGElement>>;
+  export default content;
+}
+
+declare module '*.jpg' {
+  const content: string;
+  export default content;
+}
+
+declare module '*.png' {
+  const content: string;
+  export default content;
+}

sdks/js/packages/core/react/components/index.ts

@@ -1 +1 @@
-export * from './login';
+export * from './onboarding/signin';

sdks/js/packages/core/react/components/magiclink-verify.tsx → 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: {

sdks/js/packages/core/react/components/magiclink.tsx → 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: {

sdks/js/packages/core/react/components/oidc.tsx → 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
       <img
         src={oidcLogoMap.get(provider)}
         alt={provider + '-logo'}

sdks/js/packages/core/react/components/login.tsx → sdks/js/packages/core/react/components/onboarding/signin.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';
 
@@ -17,9 +17,9 @@ type SignedInProps = ComponentPropsWithRef<typeof Container> & {
   title?: string;
   excludes?: string[];
 };
-export const SignedIn = ({
+export const SignIn = ({
   logo,
-  title = 'Login to Raypoint',
+  title = 'Login to Raystack',
   excludes = [],
   ...props
 }: SignedInProps) => {

sdks/js/packages/core/react/components/signup.tsx → 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<typeof Container> & {
+type SignUpProps = ComponentPropsWithRef<typeof Container> & {
   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();
 

sdks/js/packages/core/react/components/organization.tsx → 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}

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';

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"]
 }

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'
     }
   }
 ]);