Merge pull request #33 from openfort-xyz/link-methods

chore: adding link unlink methods

CHANGELOG.md

@@ -5,7 +5,11 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
-## [0.7.6] - 2024-05-31
+## [0.7.7] - 2024-06-04
+### Added
+- Add new linking methods
+
+## [0.7.6] - 2024-06-01
 ### Added
 - Verified email support and update reference
 

examples/apps/auth-sample/package.json

@@ -8,18 +8,19 @@
     "prettier": "prettier -w \"**/*.ts\" \"**/*.tsx\""
   },
   "dependencies": {
-    "@openfort/openfort-js": "0.7.5",
+    "@heroicons/react": "^2.0.13",
+    "@openfort/openfort-js": "0.7.7",
     "@openfort/openfort-node": "^0.6.47",
+    "@radix-ui/react-toast": "^1.1.2",
+    "@tailwindcss/forms": "^0.5.3",
     "axios": "^1.6.8",
+    "clsx": "^1.2.1",
     "ethers": "5.7.2",
-    "js-cookie": "^3.0.5",
     "next": "^12.3.1",
-    "nookies": "^2.5.2",
     "react": "17.0.2",
     "react-dom": "17.0.2"
   },
   "devDependencies": {
-    "@types/js-cookie": "^3.0.6",
     "@types/react": "18.2.65",
     "autoprefixer": "^10.3.4",
     "eslint": "7.32.0",
@@ -35,7 +36,7 @@
     "lint-staged": "^13.0.3",
     "postcss": "^8.3.6",
     "prettier": "^2.7.1",
-    "tailwindcss": "^2.2.15",
+    "tailwindcss": "^3.2.1",
     "typescript": "5.0.4"
   }
 }

examples/apps/auth-sample/src/components/Button.tsx

@@ -0,0 +1,106 @@
+import {
+  forwardRef,
+  SVGProps,
+  ButtonHTMLAttributes,
+  AnchorHTMLAttributes,
+} from 'react';
+import Link from 'next/link';
+import clsx from 'clsx';
+
+interface ArrowIconProps extends SVGProps<SVGSVGElement> {}
+
+function ArrowIcon(props: ArrowIconProps) {
+  return (
+    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
+      <path
+        stroke="currentColor"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+        d="m11.5 6.5 3 3.5m0 0-3 3.5m3-3.5h-9"
+      />
+    </svg>
+  );
+}
+
+const variantStyles = {
+  primary: 'rounded-md bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700',
+  primaryOrange:
+    'rounded-md bg-orange-600 py-1 px-3 font-semibold text-white hover:bg-orange-500',
+  secondary:
+    'rounded-md bg-zinc-100 py-1 px-3 text-zinc-900 hover:bg-zinc-200 dark:bg-zinc-800/40 dark:text-zinc-400',
+  filled: 'rounded-md bg-zinc-900 py-1 px-3 text-white hover:bg-zinc-700',
+  outline:
+    'rounded-md py-1 px-3 text-zinc-700 ring-1 ring-inset ring-zinc-900/10 hover:bg-zinc-900/2.5 hover:text-zinc-900',
+  text: 'text-orange-600 hover:text-zinc-900',
+};
+
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  variant?: keyof typeof variantStyles;
+  arrow?: 'left' | 'right';
+  htmlType?: React.ButtonHTMLAttributes<HTMLButtonElement>['type'];
+  icon?: React.ReactNode;
+}
+
+interface LinkButtonProps extends AnchorHTMLAttributes<HTMLAnchorElement> {
+  variant?: keyof typeof variantStyles;
+  arrow?: 'left' | 'right';
+}
+
+export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
+  function Button(
+    {
+      variant = 'primary',
+      icon,
+
+      arrow,
+      htmlType = 'button',
+      className,
+      ...props
+    },
+    ref
+  ) {
+    className = clsx(
+      'inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium transition',
+      variantStyles[variant],
+      className
+    );
+    const showIcon = icon;
+
+    let arrowIcon = (
+      <ArrowIcon
+        className={clsx(
+          'mt-0.5 h-5 w-5',
+          variant === 'text' && 'relative top-px',
+          arrow === 'left' && '-ml-1 rotate-180',
+          arrow === 'right' && '-mr-1'
+        )}
+      />
+    );
+
+    return (
+      <button type={htmlType} ref={ref} className={className} {...props}>
+        {props.children}
+        {arrow === 'right' && arrowIcon}
+      </button>
+    );
+  }
+);
+
+export const LinkButton = forwardRef<HTMLAnchorElement, LinkButtonProps>(
+  function LinkButton(
+    {variant = 'primary', arrow, className, href, ...props},
+    ref
+  ) {
+    className = clsx(
+      'inline-flex gap-0.5 justify-center overflow-hidden text-sm font-medium transition',
+      variantStyles[variant],
+      className
+    );
+
+    return (
+      <Link href={href || '#'} ref={ref} className={className} {...props}>
+        {props.children}
+      </Link>
+    );
+  }
+);

examples/apps/auth-sample/src/components/Authentication/AccountRecovery.tsx → examples/apps/auth-sample/src/components/EmbeddedSignerRecovery/AccountRecovery.tsx

@@ -1,6 +1,6 @@
 import {useState} from 'react';
 import {useOpenfort} from '../../hooks/useOpenfort';
-import Spinner from '../Shared/Spinner';
+import Loading from '../Loading';
 
 const AccountRecovery: React.FC = () => {
   const {handleRecovery} = useOpenfort();
@@ -36,7 +36,7 @@ const AccountRecovery: React.FC = () => {
                   setLoadingPwd(false);
                 }}
               >
-                {loadingPwd ? <Spinner /> : 'Continue with Password Recovery'}
+                {loadingPwd ? <Loading /> : 'Continue with Password Recovery'}
               </button>
             </div>
             <div className="relative my-10">
@@ -57,7 +57,7 @@ const AccountRecovery: React.FC = () => {
                   setLoadingAut(false);
                 }}
               >
-                {loadingAut ? <Spinner /> : 'Continue with Automatic Recovery'}
+                {loadingAut ? <Loading /> : 'Continue with Automatic Recovery'}
               </button>
             </div>
           </div>