@redzone/taunt-logins-ui-react 0.0.5 → 0.0.6

package/.history/vite.config_20251002202043.ts

@@ -1,47 +0,0 @@
-import path from "path"
-// import react from "@vitejs/plugin-react-swc"
-import react from "@vitejs/plugin-react"
-import { defineConfig } from "vite"
-import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js"
-import dts from "vite-plugin-dts"
-
-// https://vite.dev/config/
-export default defineConfig({
-  build: {
-    lib: {
-      entry: path.resolve("src", "lib/index.ts"),
-      name: "@redzone/taunt-logins-ui-react",
-      // fileName: (format) => `index.${format}.js`
-      // the proper extensions will be added
-      fileName: "taunt-logins-ui-react"
-    },
-    rollupOptions: {
-      external: ["react", "react-dom", "react/jsx-runtime"],
-      output: {
-        globals: {
-          react: "React",
-          "react-dom": "ReactDOM",
-          "react/jsx-runtime": "react/jsx-runtime"
-        }
-      }
-    },
-    //Generates sourcemaps for the built files,
-    //aiding in debugging.
-    sourcemap: true,
-    //Clears the output directory before building.
-    emptyOutDir: true
-  },
-  //react() enables React support.
-  //dts() generates TypeScript declaration files (*.d.ts)
-  //during the build.
-  plugins: [
-    cssInjectedByJsPlugin(),
-    react(),
-    dts({
-      insertTypesEntry: true
-    })
-  ],
-  server: {
-    open: true
-  }
-})

package/.history/vite.config_20251002202502.ts

@@ -1,47 +0,0 @@
-import { resolve } from "path"
-// import react from "@vitejs/plugin-react-swc"
-import react from "@vitejs/plugin-react"
-import { defineConfig } from "vite"
-import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js"
-import dts from "vite-plugin-dts"
-
-// https://vite.dev/config/
-export default defineConfig({
-  //react() enables React support.
-  //dts() generates TypeScript declaration files (*.d.ts)
-  //during the build.
-  plugins: [
-    cssInjectedByJsPlugin(),
-    react(),
-    dts({
-      insertTypesEntry: true
-    })
-  ],
-  build: {
-    lib: {
-      entry: resolve(__dirname, "src/lib/index.ts"),
-      name: "@redzone/taunt-logins-ui-react",
-      // fileName: (format) => `index.${format}.js`
-      // the proper extensions will be added
-      fileName: "taunt-logins-ui-react"
-    },
-    rollupOptions: {
-      external: ["react", "react-dom", "react/jsx-runtime"],
-      output: {
-        globals: {
-          react: "React",
-          "react-dom": "ReactDOM",
-          "react/jsx-runtime": "react/jsx-runtime"
-        }
-      }
-    },
-    //Generates sourcemaps for the built files,
-    //aiding in debugging.
-    sourcemap: true,
-    //Clears the output directory before building.
-    emptyOutDir: true
-  },
-  server: {
-    open: true
-  }
-})

package/.history/vite.config_20251002203503.ts

@@ -1,43 +0,0 @@
-import { resolve } from "path"
-// import react from "@vitejs/plugin-react-swc"
-import react from "@vitejs/plugin-react"
-import { defineConfig } from "vite"
-import cssInjectedByJsPlugin from "vite-plugin-css-injected-by-js"
-import dts from "vite-plugin-dts"
-
-export default defineConfig({
-  plugins: [
-    cssInjectedByJsPlugin(),
-    react(),
-    dts({
-      insertTypesEntry: true
-    })
-  ],
-  build: {
-    lib: {
-      entry: resolve(__dirname, "src/lib/index.ts"),
-      name: "@redzone/taunt-logins-ui-react",
-      // fileName: (format) => `index.${format}.js`
-      // the proper extensions will be added
-      fileName: "taunt-logins-ui-react"
-    },
-    rollupOptions: {
-      external: ["react", "react-dom", "react/jsx-runtime"],
-      output: {
-        globals: {
-          react: "React",
-          "react-dom": "ReactDOM",
-          "react/jsx-runtime": "react/jsx-runtime"
-        }
-      }
-    },
-    //Generates sourcemaps for the built files,
-    //aiding in debugging.
-    sourcemap: true,
-    //Clears the output directory before building.
-    emptyOutDir: true
-  },
-  server: {
-    open: true
-  }
-})

package/.prettierrc.mjs

@@ -1,22 +0,0 @@
-/**
- * @type {import('prettier').Options}
- */
-export default {
-  printWidth: 80,
-  tabWidth: 2,
-  useTabs: false,
-  semi: false,
-  singleQuote: false,
-  trailingComma: "none",
-  bracketSpacing: true,
-  bracketSameLine: true,
-  plugins: ["@ianvs/prettier-plugin-sort-imports"],
-  importOrder: [
-    "<BUILTIN_MODULES>", // Node.js built-in modules
-    "<THIRD_PARTY_MODULES>", // Imports not matched by other special words or groups.
-    "",
-    "^~(.*)$",
-    "",
-    "^[./]"
-  ]
-}

package/asdf/tsconfig.app.json

@@ -1,28 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
-    "target": "ES2022",
-    "useDefineForClassFields": true,
-    "lib": ["ES2022", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "types": ["vite/client"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": false,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["src"]
-}

package/asdf/tsconfig.json

@@ -1,7 +0,0 @@
-{
-  "files": [],
-  "references": [
-    { "path": "./tsconfig.app.json" },
-    { "path": "./tsconfig.node.json" }
-  ]
-}

package/asdf/tsconfig.node.json

@@ -1,26 +0,0 @@
-{
-  "compilerOptions": {
-    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
-    "target": "ES2023",
-    "lib": ["ES2023"],
-    "module": "ESNext",
-    "types": ["node"],
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "verbatimModuleSyntax": true,
-    "moduleDetection": "force",
-    "noEmit": true,
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "erasableSyntaxOnly": true,
-    "noFallthroughCasesInSwitch": true,
-    "noUncheckedSideEffectImports": true
-  },
-  "include": ["vite.config.ts"]
-}

package/eslint.config.js

@@ -1,23 +0,0 @@
-import js from '@eslint/js'
-import globals from 'globals'
-import reactHooks from 'eslint-plugin-react-hooks'
-import reactRefresh from 'eslint-plugin-react-refresh'
-import tseslint from 'typescript-eslint'
-import { defineConfig, globalIgnores } from 'eslint/config'
-
-export default defineConfig([
-  globalIgnores(['dist']),
-  {
-    files: ['**/*.{ts,tsx}'],
-    extends: [
-      js.configs.recommended,
-      tseslint.configs.recommended,
-      reactHooks.configs['recommended-latest'],
-      reactRefresh.configs.vite,
-    ],
-    languageOptions: {
-      ecmaVersion: 2020,
-      globals: globals.browser,
-    },
-  },
-])

package/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <title>redzone-taunt-logins-ui-react</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="/src/main.tsx"></script>
-  </body>
-</html>

package/src/App.css

@@ -1,42 +0,0 @@
-#root {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
-
-.logo {
-  height: 6em;
-  padding: 1.5em;
-  will-change: filter;
-  transition: filter 300ms;
-}
-.logo:hover {
-  filter: drop-shadow(0 0 2em #646cffaa);
-}
-.logo.react:hover {
-  filter: drop-shadow(0 0 2em #61dafbaa);
-}
-
-@keyframes logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-@media (prefers-reduced-motion: no-preference) {
-  a:nth-of-type(2) .logo {
-    animation: logo-spin infinite 20s linear;
-  }
-}
-
-.card {
-  padding: 2em;
-}
-
-.read-the-docs {
-  color: #888;
-}

package/src/App.tsx

@@ -1,54 +0,0 @@
-// import "./App.css"
-
-import { MagicEmailInput } from "./lib/magic"
-import { MetaMaskButton } from "./lib/metamask"
-import { useTaunt } from "./lib/tauntContext"
-import { TauntProvider } from "./lib/tauntProvider"
-
-function App() {
-  return (
-    <TauntProvider
-      tauntServiceEndpoint={process.env.VITE_TAUNT_SERVICE_ENDPOINT}
-      magicKey={process.env.VITE_MAGIC_KEY}>
-      <div
-        style={{
-          display: "flex",
-          flexDirection: "column",
-          gap: 8,
-          alignItems: "center"
-        }}>
-        <MagicEmailInput />
-        <MetaMaskButton />
-        <LogoutButton />
-        <TauntDeets />
-      </div>
-    </TauntProvider>
-  )
-}
-
-function LogoutButton() {
-  const { deets } = useTaunt()
-  if (!deets) return null
-
-  return (
-    <button
-      className="ml-2 p-2 bg-blue-500 text-white rounded-md"
-      type="button">
-      Logout
-    </button>
-  )
-}
-
-function TauntDeets() {
-  const { deets } = useTaunt()
-  return (
-    <textarea
-      rows={5}
-      cols={50}
-      value={JSON.stringify(deets, null, 2)}
-      readOnly
-    />
-  )
-}
-
-export default App

package/src/index.css

@@ -1,68 +0,0 @@
-:root {
-  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
-  line-height: 1.5;
-  font-weight: 400;
-
-  color-scheme: light dark;
-  color: rgba(255, 255, 255, 0.87);
-  background-color: #242424;
-
-  font-synthesis: none;
-  text-rendering: optimizeLegibility;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-a {
-  font-weight: 500;
-  color: #646cff;
-  text-decoration: inherit;
-}
-a:hover {
-  color: #535bf2;
-}
-
-body {
-  margin: 0;
-  display: flex;
-  place-items: center;
-  min-width: 320px;
-  min-height: 100vh;
-}
-
-h1 {
-  font-size: 3.2em;
-  line-height: 1.1;
-}
-
-button {
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-}
-button:hover {
-  border-color: #646cff;
-}
-button:focus,
-button:focus-visible {
-  outline: 4px auto -webkit-focus-ring-color;
-}
-
-@media (prefers-color-scheme: light) {
-  :root {
-    color: #213547;
-    background-color: #ffffff;
-  }
-  a:hover {
-    color: #747bff;
-  }
-  button {
-    background-color: #f9f9f9;
-  }
-}

package/src/lib/index.ts

@@ -1,4 +0,0 @@
-export * from "./magic"
-export * from "./metamask"
-export * from "./tauntContext"
-export * from "./tauntProvider"

package/src/lib/magic.tsx

@@ -1,50 +0,0 @@
-import { useCallback, useMemo, useState } from "react"
-
-import "./styling.css"
-
-import { useTaunt } from "./tauntContext"
-
-export const MagicEmailInput = ({
-  onEmail
-}: {
-  onEmail?: (email: string) => void
-}) => {
-  const { otpMagicLogin } = useTaunt()
-  const [email, setEmail] = useState<string>()
-
-  const initialised = useMemo(() => email !== undefined, [email])
-
-  const validEmail = useMemo(() => {
-    const validRegex =
-      /^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/
-    return email?.match(validRegex) ? email : undefined
-  }, [email])
-
-  const runMagic = useCallback(() => {
-    if (!validEmail) return
-
-    if (onEmail) {
-      onEmail(email!)
-    } else {
-      otpMagicLogin(email!)
-    }
-  }, [validEmail, onEmail])
-
-  return (
-    <div style={{ display: "flex", flexDirection: "row", gap: 8 }}>
-      {initialised && !validEmail && (
-        <div style={{ color: "red" }}>Please enter a valid email</div>
-      )}
-      <input
-        className="rdz-input"
-        onChange={(e) => setEmail(e.target.value ? e.target.value : undefined)}
-        placeholder="Enter your email"
-        type="email"
-        value={email}
-      />
-      <button className="rdz-button" onClick={runMagic} type="button">
-        Send Magic Link
-      </button>
-    </div>
-  )
-}

package/src/lib/metamask.tsx

@@ -1,27 +0,0 @@
-import { useCallback } from "react"
-
-import "./styling.css"
-
-import { useTaunt } from "./tauntContext"
-
-export const MetaMaskButton = ({
-  openMetamask
-}: {
-  openMetamask?: () => void
-}) => {
-  const { metamaskLogin } = useTaunt()
-
-  const runMetamask = useCallback(() => {
-    if (openMetamask) {
-      openMetamask()
-    } else {
-      metamaskLogin()
-    }
-  }, [metamaskLogin, openMetamask])
-
-  return (
-    <button className="rdz-button" onClick={runMetamask}>
-      Login with Metamask
-    </button>
-  )
-}

package/src/lib/styling.css

@@ -1,25 +0,0 @@
-.rdz-button,
-.rdz-input {
-  font-family: Avenir, Helvetica, Arial, sans-serif !important;
-  line-height: 1.5;
-  font-weight: 400 !important;
-
-  color: lightgray;
-  border-radius: 8px;
-  border: 1px solid transparent;
-  padding: 0.6em 1.2em;
-  font-size: 1em;
-  font-weight: 500;
-  font-family: inherit;
-  background-color: #1a1a1a;
-  cursor: pointer;
-  transition: border-color 0.25s;
-
-  &:hover {
-    border-color: #646cff;
-  }
-  &:focus,
-  &:focus-visible {
-    outline: 4px auto -webkit-focus-ring-color;
-  }
-}

package/src/lib/tauntContext.ts

@@ -1,22 +0,0 @@
-import { createContext, useContext } from "react"
-
-type ContextProps = {
-  tauntServiceEndpoint: string
-  deets?: { accessToken: string; refreshToken: string }
-  metamaskLogin: () => void
-  otpMagicLogin: (email: string) => void
-}
-
-export const TauntContext = createContext<ContextProps>({
-  tauntServiceEndpoint: "",
-  metamaskLogin: () => {},
-  otpMagicLogin: () => {}
-})
-
-export function useTaunt() {
-  const ctx = useContext(TauntContext)
-  if (!ctx) {
-    throw new Error("useTaunt must be used within a TauntProvider")
-  }
-  return ctx
-}

package/src/lib/tauntProvider.tsx

@@ -1,49 +0,0 @@
-import {
-  tauntMagicEmailOTPLogin,
-  tauntMetamaskLogin
-} from "@redzone/taunt-logins"
-import { useCallback, useState } from "react"
-
-import { TauntContext } from "./tauntContext"
-
-export const TauntProvider = ({
-  children,
-  tauntServiceEndpoint,
-  magicKey
-}: {
-  children: React.ReactNode
-  tauntServiceEndpoint?: string
-  magicKey?: string
-}) => {
-  const [deets, setDeets] = useState<{
-    accessToken: string
-    refreshToken: string
-  }>()
-
-  const otpMagicLogin = useCallback(
-    (email: string) => {
-      if (!magicKey) throw new Error("magicKey is required for OTP login")
-
-      tauntMagicEmailOTPLogin(tauntServiceEndpoint!, magicKey, email!).then(
-        setDeets
-      )
-    },
-    [tauntServiceEndpoint]
-  )
-
-  const metamaskLogin = useCallback(
-    () => tauntMetamaskLogin(tauntServiceEndpoint!).then(setDeets),
-    [tauntServiceEndpoint]
-  )
-
-  if (!tauntServiceEndpoint) {
-    return <div>tauntServiceEndpoint is required</div>
-  }
-
-  return (
-    <TauntContext.Provider
-      value={{ tauntServiceEndpoint, deets, otpMagicLogin, metamaskLogin }}>
-      {children}
-    </TauntContext.Provider>
-  )
-}

package/src/main.tsx

@@ -1,12 +0,0 @@
-import { StrictMode } from "react"
-import { createRoot } from "react-dom/client"
-
-import App from "./App.tsx"
-
-// import "./index.css"
-
-createRoot(document.getElementById("root")!).render(
-  <StrictMode>
-    <App />
-  </StrictMode>
-)

package/tsconfig.json

@@ -1,25 +0,0 @@
-{
-  "compilerOptions": {
-    "target": "ES2020",
-    "useDefineForClassFields": true,
-    "lib": ["ES2020", "DOM", "DOM.Iterable"],
-    "module": "ESNext",
-    "skipLibCheck": true,
-
-    /* Bundler mode */
-    "moduleResolution": "bundler",
-    "allowImportingTsExtensions": true,
-    "resolveJsonModule": true,
-    "isolatedModules": true,
-    "noEmit": true,
-    "jsx": "react-jsx",
-
-    /* Linting */
-    "strict": true,
-    "noUnusedLocals": true,
-    "noUnusedParameters": true,
-    "noFallthroughCasesInSwitch": true
-  },
-  "include": ["src"],
-  "references": [{ "path": "./tsconfig.node.json" }]
-}

package/tsconfig.node.json

@@ -1,10 +0,0 @@
-{
-  "compilerOptions": {
-    "composite": true,
-    "skipLibCheck": true,
-    "module": "ESNext",
-    "moduleResolution": "bundler",
-    "allowSyntheticDefaultImports": true
-  },
-  "include": ["vite.config.ts"]
-}