Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: support sub path import in npm module #283

Merged
merged 3 commits into from
Jul 27, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions sdks/js/.changeset/README.md
Original file line number Diff line number Diff line change
@@ -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)
5 changes: 5 additions & 0 deletions sdks/js/.changeset/calm-kids-compete.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@raystack/frontier': 0.0.0
---

Release first version of @raystack/frontier
11 changes: 11 additions & 0 deletions sdks/js/.changeset/config.json
Original file line number Diff line number Diff line change
@@ -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": []
}
4 changes: 4 additions & 0 deletions sdks/js/.eslintignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.next
.nuxt
node_modules
dist
9 changes: 9 additions & 0 deletions sdks/js/.eslintrc.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
module.exports = {
root: true,
extends: ['frontier'],
settings: {
next: {
rootDir: ['apps/*/']
}
}
};
File renamed without changes.
2 changes: 2 additions & 0 deletions sdks/js/.npmrc
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
auto-install-peers = true
strict-peer-dependencies = false
4 changes: 4 additions & 0 deletions sdks/js/.prettierignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
.next
.nuxt
node_modules
dist
33 changes: 33 additions & 0 deletions sdks/js/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
56 changes: 56 additions & 0 deletions sdks/js/packages/core/README.md
Original file line number Diff line number Diff line change
@@ -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;
};
```
91 changes: 91 additions & 0 deletions sdks/js/packages/core/package.json
Original file line number Diff line number Diff line change
@@ -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"
}
}
77 changes: 77 additions & 0 deletions sdks/js/packages/core/react/components/Container.tsx
Original file line number Diff line number Diff line change
@@ -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>
);
};

Large diffs are not rendered by default.

1 change: 1 addition & 0 deletions sdks/js/packages/core/react/components/helper.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export const hasWindow = (): boolean => typeof window !== 'undefined';
1 change: 1 addition & 0 deletions sdks/js/packages/core/react/components/index.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
export * from './login';
Original file line number Diff line number Diff line change
@@ -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> & {
Expand All @@ -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();
Expand All @@ -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)}>
Expand All @@ -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>
Expand Down
Loading
Loading