feat: support sub path import in npm module (#283)

* chore: move js sdk into js folder

* chore: ship new @raystack/frontier

---------

Co-authored-by: Ravi Suhag <[email protected]>

sdks/js/.changeset/README.md

@@ -0,0 +1,8 @@
+# Changesets
+
+Hello and welcome! This folder has been automatically generated by `@changesets/cli`, a build tool that works
+with multi-package repos, or single-package repos to help you version and publish your code. You can
+find the full documentation for it [in our repository](https://github.com/changesets/changesets)
+
+We have a quick list of common questions to get you started engaging with this project in
+[our documentation](https://github.com/changesets/changesets/blob/main/docs/common-questions.md)

sdks/js/.changeset/calm-kids-compete.md

@@ -0,0 +1,5 @@
+---
+'@raystack/frontier': 0.0.0
+---
+
+Release first version of @raystack/frontier

sdks/js/.changeset/config.json

@@ -0,0 +1,11 @@
+{
+  "$schema": "https://unpkg.com/@changesets/[email protected]/schema.json",
+  "changelog": "@changesets/cli/changelog",
+  "commit": false,
+  "fixed": [],
+  "linked": [],
+  "access": "restricted",
+  "baseBranch": "main",
+  "updateInternalDependencies": "patch",
+  "ignore": []
+}

sdks/js/.eslintignore

@@ -0,0 +1,4 @@
+.next
+.nuxt
+node_modules
+dist

sdks/js/.eslintrc.js

@@ -0,0 +1,9 @@
+module.exports = {
+  root: true,
+  extends: ['frontier'],
+  settings: {
+    next: {
+      rootDir: ['apps/*/']
+    }
+  }
+};

sdks/js/.npmrc

@@ -0,0 +1,2 @@
+auto-install-peers = true
+strict-peer-dependencies = false

sdks/js/.prettierignore

@@ -0,0 +1,4 @@
+.next
+.nuxt
+node_modules
+dist

sdks/js/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "sdks",
+  "private": true,
+  "scripts": {
+    "build": "turbo run build",
+    "dev": "turbo run dev",
+    "lint": "turbo run lint",
+    "clean": "turbo run clean",
+    "changeset": "changeset",
+    "version-packages": "changeset version",
+    "prettier-check": "prettier --check \"**/*.{js,ts,tsx,md,mdx}\"",
+    "prettier-fix": "prettier --write \"**/*.{js,ts,tsx,md,mdx}\""
+  },
+  "devDependencies": {
+    "@turbo/gen": "^1.9.7",
+    "prettier": "^2.5.1",
+    "process": "^0.11.10",
+    "turbo": "latest"
+  },
+  "packageManager": "[email protected]",
+  "dependencies": {
+    "@changesets/cli": "^2.26.2",
+    "eslint": "^7.32.0",
+    "eslint-config-frontier": "workspace:^"
+  },
+  "prettier": {
+    "tabWidth": 2,
+    "useTabs": false,
+    "singleQuote": true,
+    "arrowParens": "avoid",
+    "trailingComma": "none"
+  }
+}

sdks/js/packages/core/README.md

@@ -0,0 +1,56 @@
+# @raystack/frontier
+
+Frontier JS SDK allows you to implement authentication in your [React](https://reactjs.org/) application quickly using Magic links and social sign-in. It also allows you to access the
+SignIn, SignUp, user profile, Workspace creation, Workspace Profile etc. components.
+
+Here is a quick guide on getting started with `@raystack/frontier` package.
+
+## Step 1 - Create Instance
+
+Get Frontier URL by instantiating [Frontier instance](https://github.com/odpf/frontier)
+.
+
+## Step 2 - Install package
+
+Install `@raystack/frontier` library
+
+```sh
+npm i --save @raystack/frontier
+OR
+yarn add @raystack/frontier
+```
+
+## Step 3 - Configure Provider and use Frontier Components
+
+Frontier comes with [react context](https://reactjs.org/docs/context.html) which serves as `Provider` component for the application
+
+```jsx
+import {
+  FrontierProvider,
+  Frontier,
+  useFrontier
+} from '@raystack/frontier/react';
+
+const App = () => {
+  return (
+    <FrontierProvider
+      config={{
+        endpoint: 'http://localhost:3000',
+        redirectLogin: window.location.origin,
+        redirectSignup: window.location.origin,
+        redirectMagicLinkVerify: window.location.origin
+      }}
+    >
+      <SignIn />
+    </FrontierProvider>
+  );
+};
+
+const Profile = () => {
+  const { user } = useFrontier();
+  if (user) {
+    return <div>{user.email}</div>;
+  }
+  return null;
+};
+```

sdks/js/packages/core/package.json

@@ -0,0 +1,91 @@
+{
+  "name": "@raystack/frontier",
+  "version": "0.0.0",
+  "description": "A js library for frontier",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "module": "./dist/index.mjs",
+  "types": "./dist/index.d.ts",
+  "files": [
+    "dist/**/*",
+    "react/dist/**/*",
+    "README.md"
+  ],
+  "scripts": {
+    "build": "tsup",
+    "dev": "tsup --watch src",
+    "size": "size-limit",
+    "lint": "eslint \"./**/*.ts*\"",
+    "test": "echo \"Error: no test specified\" && exit 0"
+  },
+  "author": "[email protected]",
+  "license": "Apache-2.0",
+  "lint-staged": {
+    "*.{json,md,html,js,jsx,ts,tsx}": [
+      "prettier --write"
+    ]
+  },
+  "size-limit": [
+    {
+      "path": "dist/index.js",
+      "limit": "200 KB"
+    }
+  ],
+  "exports": {
+    "./package.json": "./package.json",
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "module": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    },
+    "./react": {
+      "types": "./react/dist/index.d.ts",
+      "import": "./react/dist/index.mjs",
+      "module": "./react/dist/index.mjs",
+      "require": "./react/dist/index.js"
+    }
+  },
+  "devDependencies": {
+    "@raystack/frontier-tsconfig": "workspace:^",
+    "@size-limit/preset-small-lib": "^8.2.6",
+    "@types/node": "^20.4.5",
+    "@types/react": "^18.2.5",
+    "@types/react-dom": "^18.2.7",
+    "esbuild-plugin-external-global": "^1.0.1",
+    "eslint": "^7.32.0",
+    "eslint-config-frontier": "workspace:^",
+    "np": "^7.7.0",
+    "prettier": "^2.5.1",
+    "size-limit": "^8.2.6",
+    "tsup": "^6.7.0",
+    "typescript": "^5.1.6"
+  },
+  "dependencies": {
+    "@hookform/resolvers": "^3.1.1",
+    "@raystack/apsara": "^0.10.5",
+    "axios": "^1.4.0",
+    "react-hook-form": "^7.45.2",
+    "yup": "^1.2.0"
+  },
+  "peerDependencies": {
+    "react": "^18.2.0"
+  },
+  "peerDependenciesMeta": {
+    "react": {
+      "optional": true
+    },
+    "svelte": {
+      "optional": true
+    },
+    "vue": {
+      "optional": true
+    },
+    "solid-js": {
+      "optional": true
+    }
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

sdks/js/packages/core/react/components/Container.tsx

@@ -0,0 +1,77 @@
+import { Flex } from '@raystack/apsara';
+import React, { ComponentPropsWithRef } from 'react';
+
+const styles = {
+  container: {
+    fontSize: '12px',
+    width: '100%',
+    minWidth: '220px',
+    maxWidth: '480px',
+    color: 'var(--foreground-base)',
+
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: '32px'
+  },
+  logoContainer: {},
+  titleContainer: {
+    fontWeight: '400'
+  },
+  fieldset: {
+    width: '100%',
+    border: '1px solid transparent',
+    borderTopColor: 'rgb(205, 211, 223)',
+    gridArea: '1 / 1',
+    padding: 0,
+    margin: '2px'
+  },
+  legend: {
+    fontSize: '8px',
+    margin: 'auto',
+    padding: '0 4px'
+  }
+};
+
+const shadowOptions = {
+  none: 'none',
+  xs: '0px 1px 2px 0px rgba(16, 24, 40, 0.06)',
+  sm: '0px 1px 4px 0px rgba(0, 0, 0, 0.09)',
+  md: '0px 4px 6px -2px rgba(16, 24, 40, 0.03), 0px 12px 16px -4px rgba(16, 24, 40, 0.08)',
+  lg: '0px 8px 8px -4px rgba(16, 24, 40, 0.03), 0px 20px 24px -4px rgba(16, 24, 40, 0.08)'
+};
+
+const borderRadiusOptions = {
+  none: '0',
+  xs: '4px',
+  sm: '8px',
+  md: '16px',
+  lg: '24px'
+};
+
+type ContainerProps = ComponentPropsWithRef<'div'> & {
+  children?: React.ReactNode;
+  shadow?: 'none' | 'xs' | 'sm' | 'md' | 'lg';
+  radius?: 'none' | 'xs' | 'sm' | 'md' | 'lg';
+};
+
+export const Container = ({
+  children,
+  shadow = 'none',
+  radius = 'md',
+  style
+}: ContainerProps) => {
+  return (
+    <Flex
+      style={{
+        ...styles.container,
+        ...style,
+        flexDirection: 'column',
+        boxShadow: shadowOptions[shadow],
+        borderRadius: borderRadiusOptions[radius]
+      }}
+    >
+      {children}
+    </Flex>
+  );
+};

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

@@ -0,0 +1 @@
+export const hasWindow = (): boolean => typeof window !== 'undefined';

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

@@ -0,0 +1 @@
+export * from './login';

sdks/packages/shield-react/src/components/login.tsx → sdks/js/packages/core/react/components/login.tsx

@@ -1,15 +1,15 @@
-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 { MagicLink } from "./magiclink";
-import { OIDCButton } from "./oidc";
+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 { MagicLink } from './magiclink';
+import { OIDCButton } from './oidc';
 
 const styles = {
   titleContainer: {
-    fontWeight: "400",
-  },
+    fontWeight: '400'
+  }
 };
 
 type SignedInProps = ComponentPropsWithRef<typeof Container> & {
@@ -18,7 +18,7 @@ type SignedInProps = ComponentPropsWithRef<typeof Container> & {
 };
 export const SignedIn = ({
   logo,
-  title = "Login to Raypoint",
+  title = 'Login to Raypoint',
   ...props
 }: SignedInProps) => {
   const { config } = useFrontier();
@@ -27,19 +27,20 @@ export const SignedIn = ({
   const clickHandler = useCallback(
     async (name: string) => {
       const {
-        data: { endpoint },
+        data: { endpoint }
       } = await client.getAuthStrategyEndpoint(name);
       window.location.href = endpoint;
     },
+    // eslint-disable-next-line react-hooks/exhaustive-deps
     [strategies]
   );
 
-  const mailotp = strategies.find((s) => s.name === "mailotp");
-  const filteredOIDC = strategies.filter((s) => s.name !== "mailotp");
+  const mailotp = strategies.find(s => s.name === 'mailotp');
+  const filteredOIDC = strategies.filter(s => s.name !== 'mailotp');
   return (
     <Container {...props}>
       <Header logo={logo} title={title} />
-      <Flex direction="column" style={{ width: "100%", gap: "var(--pd-16)" }}>
+      <Flex direction="column" style={{ width: '100%', gap: 'var(--pd-16)' }}>
         {filteredOIDC.map((s, index) => {
           return (
             <OIDCButton key={index} onClick={() => clickHandler(s.name)}>
@@ -52,10 +53,10 @@ export const SignedIn = ({
       </Flex>
       <div style={styles.titleContainer}>
         <Text size={2}>
-          Don’t have an account?{" "}
+          Don’t have an account?{' '}
           <Link
             href={config.redirectSignup}
-            style={{ color: "var(--foreground-accent)" }}
+            style={{ color: 'var(--foreground-accent)' }}
           >
             Signup
           </Link>