@planningcenter/sweetest-alert 0.1.0 → 0.3.0

package/docs/demo.tsx

@@ -1,306 +0,0 @@
-/* eslint-disable no-console */
-
-import { createRoot } from "react-dom/client"
-import { useEffect, useRef } from "react"
-import { SweetestAlert } from "../src/index"
-import Prism from "prismjs"
-import "prismjs/themes/prism-tomorrow.css"
-import "prismjs/components/prism-jsx"
-import "prismjs/components/prism-tsx"
-import "prismjs/components/prism-bash"
-
-import "../node_modules/@planningcenter/tapestry/dist/index.css"
-import "../src/sweetest_alert.css"
-import "./demo.css"
-
-function CodeBlock({ code, language = "jsx" }: { code: string; language?: string }) {
-  const codeRef = useRef<HTMLElement>(null)
-
-  useEffect(() => {
-    if (codeRef.current) {
-      Prism.highlightElement(codeRef.current)
-    }
-  }, [code, language])
-
-  return (
-    <div className="codeblock">
-    <pre>
-      <code ref={codeRef} className={`language-${language}`}>
-        {code}
-      </code>
-    </pre>
-    </div>
-  )
-}
-
-function Demo() {
-  const showInfoAlert = () => {
-    SweetestAlert({
-      type: "info",
-      title: "Information",
-      content: "This is an informational alert to let you know something.",
-      hideCancel: true,
-    })
-  }
-
-  const showSuccessAlert = () => {
-    SweetestAlert({
-      type: "success",
-      title: "Success!",
-      content: "Your operation completed successfully.",
-      hideCancel: true,
-    })
-  }
-
-  const showWarningAlert = () => {
-    SweetestAlert({
-      type: "warning",
-      title: "Warning",
-      content: "Are you sure you want to proceed with this action?",
-      confirm: () => console.log("User confirmed warning"),
-      cancel: () => console.log("User cancelled warning"),
-    })
-  }
-
-  const showErrorAlert = () => {
-    SweetestAlert({
-      type: "error",
-      title: "Error Occurred",
-      content: "Something went wrong. Please try again.",
-      hideCancel: true,
-    })
-  }
-
-  const showDangerAlert = () => {
-    SweetestAlert({
-      type: "danger",
-      title: "Delete Item",
-      content: "Are you sure you want to delete this item? This action cannot be undone.",
-      confirmButton: "Delete",
-      confirm: () => console.log("User confirmed deletion"),
-      cancel: () => console.log("User cancelled deletion"),
-    })
-  }
-
-  const showCustomContentAlert = () => {
-    SweetestAlert({
-      type: "info",
-      title: "Custom Content",
-      content: (
-        <>
-          <p>You can pass custom React components as content.</p>
-          <ul>
-            <li>Item one</li>
-            <li>Item two</li>
-            <li>Item three</li>
-          </ul>
-          <p>This allows for rich, formatted content in your alerts.</p>
-        </>
-      ),
-      confirm: () => console.log("Custom content confirmed"),
-      cancel: () => console.log("Custom content cancelled"),
-    })
-  }
-
-  return (
-    <>
-      <div className="container">
-        <h1>Sweetest Alert Demo</h1>
-        <h2>Click the buttons below to test different alert types</h2>
-
-        <div className="button-grid">
-          <button className="demo-button info" onClick={showInfoAlert}>
-            <h3>Info Alert</h3>
-            Simple notification
-          </button>
-
-          <button className="demo-button success" onClick={showSuccessAlert}>
-            <h3>Success Alert</h3>
-            Success message
-          </button>
-
-          <button className="demo-button warning" onClick={showWarningAlert}>
-            <h3>Warning Alert</h3>
-            With cancel option
-          </button>
-
-          <button className="demo-button error" onClick={showErrorAlert}>
-            <h3>Error Alert</h3>
-            Error notification
-          </button>
-
-          <button className="demo-button danger" onClick={showDangerAlert}>
-            <h3>Danger Alert</h3>
-            Destructive action
-          </button>
-
-          <button className="demo-button custom" onClick={showCustomContentAlert}>
-            <h3>Custom Content</h3>
-            Rich content example
-          </button>
-        </div>
-
-        <div className="tip">
-          <strong>Tip:</strong> Open your browser console to see the callback logs when you confirm or cancel alerts.
-        </div>
-      </div>
-
-      <div className="container">
-        <h1>Documentation</h1>
-
-        <h2>Installation</h2>
-        <CodeBlock code="yarn add @planningcenter/sweetest-alert" language="bash" />
-
-        <h3>Peer Dependencies</h3>
-        <p>This package requires the following peer dependencies:</p>
-        <ul>
-          <li>react ^18.3.1</li>
-          <li>react-dom ^18.3.1</li>
-          <li>@planningcenter/tapestry ^2.3.0</li>
-          <li>@planningcenter/icons ^15.25.0</li>
-        </ul>
-
-        <h2>Usage</h2>
-
-        <h3>Basic Example</h3>
-        <CodeBlock code={`import { SweetestAlert } from '@planningcenter/sweetest-alert'
-
-// Simple notification
-SweetestAlert({
-  title: "Warning!",
-  content: "Watch out, he's coming to get you!",
-})`} />
-
-        <h3>Confirmation Dialog</h3>
-        <CodeBlock code={`SweetestAlert({
-  type: "danger",
-  title: "Delete Item",
-  content: "Are you sure you want to delete this item?",
-  confirm: () => console.log("Confirmed"),
-  cancel: () => console.log("Cancelled")
-})`} />
-
-        <h3>Alert Types</h3>
-        <p>The component supports five visual types:</p>
-        <CodeBlock code={`// Info alert
-SweetestAlert({
-  type: "info",
-  title: "Information",
-  content: "This is an informational message."
-})
-
-// Success alert
-SweetestAlert({
-  type: "success",
-  title: "Success!",
-  content: "Operation completed successfully."
-})
-
-// Warning alert (default)
-SweetestAlert({
-  type: "warning",
-  title: "Warning",
-  content: "Please proceed with caution."
-})
-
-// Error alert
-SweetestAlert({
-  type: "error",
-  title: "Error",
-  content: "Something went wrong."
-})
-
-// Danger alert (for destructive actions)
-SweetestAlert({
-  type: "danger",
-  title: "Delete Account",
-  content: "This action cannot be undone.",
-  confirmButton: "Delete"
-})`} />
-
-        <h3>Custom Content</h3>
-        <p>You can pass React components as content for rich formatting:</p>
-        <CodeBlock code={`SweetestAlert({
-  title: "Custom Content",
-  content: (
-    <>
-      <p>You can include any React elements:</p>
-      <ul>
-        <li>Lists</li>
-        <li>Links</li>
-        <li>Formatted text</li>
-      </ul>
-    </>
-  )
-})`} />
-
-        <h2>API</h2>
-        <table>
-          <thead>
-            <tr>
-              <th>Parameter</th>
-              <th>Type</th>
-              <th>Required</th>
-              <th>Default</th>
-              <th>Description</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr>
-              <td><code>title</code></td>
-              <td><code>string</code></td>
-              <td>Yes</td>
-              <td>-</td>
-              <td>The main heading text displayed at the top of the modal</td>
-            </tr>
-            <tr>
-              <td><code>content</code></td>
-              <td><code>string | React.ReactNode</code></td>
-              <td>Yes</td>
-              <td>-</td>
-              <td>The body content. Accepts plain text or React components</td>
-            </tr>
-            <tr>
-              <td><code>type</code></td>
-              <td><code>&quot;info&quot; | &quot;success&quot; | &quot;error&quot; | &quot;danger&quot; | &quot;warning&quot;</code></td>
-              <td>No</td>
-              <td>&quot;warning&quot;</td>
-              <td>The visual type of alert, affects icon and styling</td>
-            </tr>
-            <tr>
-              <td><code>confirm</code></td>
-              <td><code>() =&gt; void</code></td>
-              <td>No</td>
-              <td>-</td>
-              <td>Callback executed when confirm button is clicked</td>
-            </tr>
-            <tr>
-              <td><code>cancel</code></td>
-              <td><code>() =&gt; void</code></td>
-              <td>No</td>
-              <td>-</td>
-              <td>Callback executed when cancel button is clicked</td>
-            </tr>
-            <tr>
-              <td><code>confirmButton</code></td>
-              <td><code>string</code></td>
-              <td>No</td>
-              <td>&quot;Okay&quot;</td>
-              <td>Custom text for the confirm button</td>
-            </tr>
-            <tr>
-              <td><code>hideCancel</code></td>
-              <td><code>boolean</code></td>
-              <td>No</td>
-              <td>false</td>
-              <td>When true, hides the cancel button for simple notifications</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-    </>
-  )
-}
-
-const root = createRoot(document.getElementById("root")!)
-root.render(<Demo />)

package/docs/index.html

@@ -1,13 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-  <head>
-    <meta charset="UTF-8" />
-    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
-    <link rel="icon" type="image/svg+xml" href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🍬</text></svg>" />
-    <title>Sweetest Alert Demo</title>
-  </head>
-  <body>
-    <div id="root"></div>
-    <script type="module" src="./demo.tsx"></script>
-  </body>
-</html>

package/eslint.config.js

@@ -1,56 +0,0 @@
-import js from '@eslint/js';
-import tseslint from 'typescript-eslint';
-import react from 'eslint-plugin-react';
-import reactHooks from 'eslint-plugin-react-hooks';
-
-export default tseslint.config(
-  js.configs.recommended,
-  ...tseslint.configs.recommended,
-  {
-    files: ['**/*.{js,jsx,ts,tsx}'],
-    plugins: {
-      react,
-      'react-hooks': reactHooks,
-    },
-    languageOptions: {
-      parserOptions: {
-        ecmaFeatures: {
-          jsx: true,
-        },
-      },
-    },
-    settings: {
-      react: {
-        version: 'detect',
-      },
-    },
-    rules: {
-      ...react.configs.recommended.rules,
-      ...react.configs['jsx-runtime'].rules,
-      ...reactHooks.configs.recommended.rules,
-      'eqeqeq': ['error', 'always'],
-      'no-console': 'warn',
-      'no-underscore-dangle': 'error',
-      'no-unused-vars': 'off',
-      '@typescript-eslint/no-unused-vars': ['error', {
-        'argsIgnorePattern': '^_',
-        'varsIgnorePattern': '^_',
-      }],
-      'react/no-deprecated': 'error',
-      'semi': ['error', 'never'],
-    },
-  },
-  {
-    files: ['tests/**/*.{js,jsx,ts,tsx}'],
-    languageOptions: {
-      globals: {
-        document: 'readonly',
-        window: 'readonly',
-        Event: 'readonly',
-      },
-    },
-  },
-  {
-    ignores: ['dist/', 'node_modules/', '*.config.ts', '*.config.js'],
-  }
-);

package/src/index.ts

@@ -1 +0,0 @@
-export { SweetestAlert } from "./sweetest_alert.tsx"

package/src/sweetest_alert.tsx

@@ -1,130 +0,0 @@
-import React from "react"
-import { createRoot } from "react-dom/client"
-import { Button } from "@planningcenter/tapestry"
-import {
-  checkCircle,
-  xCircle,
-  infoCircle,
-  exclamationTriangle,
-} from "@planningcenter/icons/paths/general"
-
-// A modal dialog component that replaces SweetAlert2 with a custom implementation.
-// Creates and manages its own DOM dialog element with React rendering.
-//
-// Basic Usage
-//
-// SweetestAlert({
-//   title: "Delete Item",
-//   content: "Are you sure you want to delete this item?",
-//   confirm: () => console.log("Confirmed"),
-//   cancel: () => console.log("Cancelled")
-// });
-
-type AlertTypes = "info" | "success" | "error" | "danger" | "warning"
-
-export function SweetestAlert({
-  // Optional: Callback function executed when cancel button is clicked
-  cancel,
-
-  // Optional: Callback function executed when confirm button is clicked
-  confirm,
-
-  // Optional: Text for the confirm button. Defaults to "Okay".
-  confirmButton = "Okay",
-
-  // Required: The body content explaining the alert.
-  // Accepts a React fragment or a string of text.
-  content,
-
-  // Optional: When true, hides the cancel button for simple notifications.
-  // Defaults to "false".
-  hideCancel = false,
-
-  // Required: The main heading text displayed at the top of the modal
-  title,
-
-  // Optional: The visual type of alert, affects icon and styling.
-  // Values can be "info", "success", "error", "danger", or "warning" (default).
-  type = "warning",
-}: {
-  cancel?: () => void
-  confirm?: () => void
-  confirmButton?: string
-  content: string | React.ReactNode
-  hideCancel?: boolean
-  title: string
-  type?: AlertTypes
-}) {
-  const dialog = document.createElement("dialog")
-  dialog.className = "pco-sweetest-alert"
-  document.body.appendChild(dialog)
-  const root = createRoot(dialog)
-
-  const cleanup = () => {
-    root.unmount()
-    document.body.removeChild(dialog)
-  }
-
-  const handleConfirm = () => {
-    cleanup()
-    confirm?.()
-  }
-
-  const handleCancel = () => {
-    cleanup()
-    cancel?.()
-  }
-
-  const iconPath = () => {
-    switch (type) {
-      case "success":
-        return checkCircle
-      case "error":
-        return xCircle
-      case "info":
-        return infoCircle
-      case "danger":
-      case "warning":
-        return exclamationTriangle
-    }
-  }
-
-  root.render(
-    <>
-      <svg
-        className={`pco-sweetest-alert__icon pco-sweetest-alert--${type}`}
-        width="48"
-        height="48"
-        viewBox="0 0 16 16"
-        aria-hidden="true"
-      >
-        <path d={iconPath()} />
-      </svg>
-
-      <h2 className="pco-sweetest-alert__title">{title}</h2>
-
-      <div className="pco-sweetest-alert__body">
-        {typeof content === "string" ? <p>{content}</p> : content}
-      </div>
-
-      <div className="pco-sweetest-alert__actions">
-        {!hideCancel && <Button label="Cancel" kind="ghost" onClick={handleCancel} />}
-        <Button
-          label={confirmButton}
-          kind={type === "danger" ? "delete" : "primary"}
-          onClick={handleConfirm}
-        />
-      </div>
-    </>
-  )
-
-  dialog.showModal()
-
-  dialog.addEventListener("close", handleCancel)
-
-  return {
-    show: () => dialog.showModal(),
-    close: () => dialog.close(),
-    cleanup,
-  }
-}