@planningcenter/sweetest-alert 0.1.0

package/.editorconfig

@@ -0,0 +1,8 @@
+root = true
+
+[*]
+charset = utf-8
+end_of_line = lf
+indent_size = 2
+indent_style = space
+insert_final_newline = true

package/.github/CODEOWNERS

@@ -0,0 +1 @@
+* @starzonmyarmz

package/.github/workflows/pco-release-create-pr.yml

@@ -0,0 +1,24 @@
+name: PCO-Release - Release Automation
+
+on:
+  push:
+    branches:
+      - main
+
+permissions:
+  contents: write
+  pull-requests: write
+
+jobs:
+  release-automation:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: "20"
+          cache: "yarn"
+      - uses: planningcenter/pco-release-action/release-by-pr@v1
+        with:
+          app-id: ${{ secrets.PCO_DEPENDENCIES_APP_ID }}
+          private-key: ${{ secrets.PCO_DEPENDENCIES_PRIVATE_KEY}}

package/.github/workflows/pco-release-create-release-on-merge.yml

@@ -0,0 +1,17 @@
+name: PCO-Release - Create Release on Merge
+
+on:
+  pull_request:
+    types: [closed]
+    branches:
+      - main
+
+jobs:
+  create-release:
+    runs-on: ubuntu-latest
+    if: github.event.pull_request.merged == true && contains(github.event.pull_request.labels.*.name, 'pco-release-pending')
+    steps:
+      - uses: planningcenter/pco-release-action/create-release-on-merge@v1
+        with:
+          app-id: ${{ secrets.PCO_DEPENDENCIES_APP_ID }}
+          private-key: ${{ secrets.PCO_DEPENDENCIES_PRIVATE_KEY}}

package/.github/workflows/pco-release-dependabot-automation.yml

@@ -0,0 +1,15 @@
+name: PCO-Release - Dependabot Automation (Update changelog)
+
+on: pull_request
+
+jobs:
+  update-dependabot-pr-changelog:
+    if: github.actor == 'dependabot[bot]'
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          ref: ${{ github.event.pull_request.head.ref }}
+      - uses: planningcenter/pco-release-action/dependabot-automation@v1

package/.github/workflows/pco-release-require-changelog-update.yml

@@ -0,0 +1,22 @@
+name: PCO-Release - Require Changelog Update
+
+on:
+  pull_request:
+    branches: [main]
+
+jobs:
+  require-changelog-update:
+    runs-on: ubuntu-latest
+    permissions:
+      pull-requests: read
+      contents: read
+    steps:
+      - uses: actions/checkout@v4
+      - id: changed-files
+        uses: tj-actions/changed-files@v44
+        with:
+          files: CHANGELOG.md
+      - if: steps.changed-files.outputs.any_changed == 'false'
+        run: |
+          echo "Pull Requests require an update to the CHANGELOG.md file."
+          exit 1

package/.github/workflows/pco-release-sync-release-by-label.yml

@@ -0,0 +1,18 @@
+on:
+  pull_request:
+    types: [labeled]
+
+permissions:
+  contents: write
+  pull-requests: write
+
+name: PCO-Release - Sync With Labels
+
+jobs:
+  sync-with-labels:
+    if: ${{ github.event.pull_request.head.ref == 'pco-release--internal' && (github.event.label.name == 'pco-release-patch' || github.event.label.name == 'pco-release-minor' || github.event.label.name == 'pco-release-major') }}
+    runs-on: ubuntu-latest
+    steps:
+      - uses: planningcenter/pco-release-action/sync-with-labels@v1
+        with:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

package/.stylelintrc.json

@@ -0,0 +1,8 @@
+{
+  "extends": "@planningcenter/stylelint-config-pco",
+  "rules": {
+    "number-leading-zero": "always",
+    "order/properties-order": null,
+    "order/properties-alphabetical-order": true
+  }
+}

package/CHANGELOG.md

@@ -0,0 +1,6 @@
+
+
+### Dependencies
+
+- Bump vite from 7.1.10 to 7.1.11
+

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2025 Planning Center
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,165 @@
+# sweetest-alert
+
+> **⚠️ Not Production Ready**
+> This package is currently under development and not yet ready for production use. APIs may change without notice.
+
+A lightweight, React alert/modal dialog component that replaces SweetAlert2 with a custom implementation using native HTML dialog elements.
+
+## Installation
+
+```bash
+yarn add @planningcenter/sweetest-alert
+```
+
+### Peer Dependencies
+
+This package requires the following peer dependencies:
+
+- `react` ^18.3.1
+- `react-dom` ^18.3.1
+- `@planningcenter/tapestry` ^2.3.0
+- `@planningcenter/icons` ^15.25.0
+
+## Usage
+
+### Basic Example
+
+```jsx
+import { SweetestAlert } from '@planningcenter/sweetest-alert'
+
+// Simple notification
+SweetestAlert({
+  title: "Warning!",
+  content: "Watch out, he’s coming to get you!",
+})
+```
+
+### Confirmation Dialog
+
+```jsx
+SweetestAlert({
+  type: "danger",
+  title: "Delete Item",
+  content: "Are you sure you want to delete this item?",
+  confirm: () => console.log("Confirmed"),
+  cancel: () => console.log("Cancelled")
+})
+```
+
+### Alert Types
+
+The component supports five visual types:
+
+```jsx
+// 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"
+})
+```
+
+### Custom Content
+
+You can pass React components as content for rich formatting:
+
+```jsx
+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>
+    </>
+  )
+})
+```
+
+## API
+
+### Parameters
+
+| Parameter | Type | Required | Default | Description |
+|-----------|------|----------|---------|-------------|
+| `title` | `string` | Yes | - | The main heading text displayed at the top of the modal |
+| `content` | `string \| React.ReactNode` | Yes | - | The body content. Accepts plain text or React components |
+| `type` | `"info" \| "success" \| "error" \| "danger" \| "warning"` | No | `"warning"` | The visual type of alert, affects icon and styling |
+| `confirm` | `() => void` | No | - | Callback executed when confirm button is clicked |
+| `cancel` | `() => void` | No | - | Callback executed when cancel button is clicked |
+| `confirmButton` | `string` | No | `"Okay"` | Custom text for the confirm button |
+| `hideCancel` | `boolean` | No | `false` | When true, hides the cancel button for simple notifications |
+
+## Development
+
+### Running the Demo
+
+To run the interactive demo locally:
+
+```bash
+# Install dependencies
+yarn install
+
+# Start the development server
+yarn dev
+```
+
+Then open your browser to the URL shown in the terminal (typically `http://localhost:5173`). The demo showcases all alert types and features with interactive buttons.
+
+### Running Tests
+
+The project uses Vitest for testing:
+
+```bash
+# Run tests once
+yarn test
+
+# Run tests in watch mode
+yarn test --watch
+```
+
+### Linting
+
+```bash
+# Lint JavaScript/TypeScript files
+yarn lint:js
+
+# Lint CSS files
+yarn lint:css
+```
+
+## License
+
+MIT

package/docs/demo.css

@@ -0,0 +1,198 @@
+* {
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+}
+
+#root {
+  display: contents;
+}
+
+body {
+  background: linear-gradient(135deg, var(--t-fill-color-tag-blue-040) 0%, var(--t-fill-color-tag-purple-030) 100%);
+  color: var(--t-text-color-default-primary);
+  display: grid;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  line-height: 1.4;
+  min-height: 100vh;
+  padding: var(--t-spacing-3);
+  place-items: center;
+  text-wrap: pretty;
+  gap:32px;
+}
+
+.container {
+  background: var(--t-surface-color-card);
+  border-radius: var(--t-border-radius-xl);
+  box-shadow: 0 var(--t-spacing-3) var(--t-spacing-6) var(--t-fill-color-transparency-dark-030);
+  max-width: 960px;
+  padding: var(--t-spacing-6);
+  width: 100%;
+}
+
+h1 {
+  color: var(--t-text-color-default-headline);
+  font-size: 2.5rem;
+  margin: 0;
+  text-align: center;
+}
+
+h2 {
+  color: var(--t-text-color-default-secondary);
+  font-size: 1.2rem;
+  font-weight: var(--t-font-weight-normal);
+  margin-bottom: var(--t-spacing-5);
+  text-align: center;
+}
+
+ul {
+  margin: 1rem;
+  padding-left: 2ch;
+}
+
+table {
+  border-collapse: collapse;
+}
+
+th, td {
+  border-bottom: var(--t-border-width-default) solid var(--t-border-color-default-base);
+  text-align: left;
+  padding: var(--t-spacing-1);
+}
+
+tr:last-child :is(th, td) {
+  border: 0;
+}
+
+.button-grid {
+  display: grid;
+  gap: var(--t-spacing-2);
+  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
+  margin-bottom: var(--t-spacing-4);
+}
+
+.demo-button {
+  background: var(--t-surface-color-card);
+  border: var(--t-border-width-thick) solid var(--t-border-color-default-base);
+  border-radius: 12px;
+  color: var(--t-text-color-default-secondary);
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  font-family: inherit;
+  font-size: 1rem;
+  gap: var(--t-spacing-half);
+  padding: var(--t-spacing-3);
+  text-align: left;
+  transition: all .2s ease;
+
+  &:hover {
+    box-shadow: 0 var(--t-spacing-half) var(--t-spacing-1) var(--t-fill-color-transparency-dark-010);
+    translate: 0 -2px;
+  }
+
+  &:active {
+    translate: 0;
+  }
+
+  h3 {
+    color: var(--t-text-color-default-headline);
+    font-size: 1.1rem;
+    font-weight: var(--t-font-weight-semibold);
+  }
+}
+
+.info {
+  border-color: var(--t-border-color-status-info);
+
+  &:hover {
+    background: var(--t-fill-color-status-info-dim);
+    border-color: var(--t-border-color-status-info);
+  }
+}
+
+.success {
+  border-color: var(--t-border-color-status-success);
+
+  &:hover {
+    background: var(--t-fill-color-status-success-ghost);
+    border-color: var(--t-border-color-status-success);
+  }
+}
+
+.warning {
+  border-color: var(--t-border-color-status-warning);
+
+  &:hover {
+    background: var(--t-fill-color-status-warning-ghost);
+    border-color: var(--t-border-color-status-warning);
+  }
+}
+
+.error, .danger {
+  border-color: var(--t-border-color-status-error);
+
+  &:hover {
+    background: var(--t-fill-color-status-error-ghost);
+    border-color: var(--t-border-color-status-error);
+  }
+}
+
+.custom {
+  border-color: var(--t-border-color-default-darker);
+
+  &:hover {
+    background: var(--t-fill-color-tag-purple-010);
+    border-color: var(--t-border-color-default-darkest);
+  }
+}
+
+.tip {
+  background: var(--t-fill-color-neutral-090);
+  border: var(--t-border-width-default) solid var(--t-border-color-default-base);
+  border-radius: var(--t-border-radius-lg);
+  color: var(--t-text-color-default-secondary);
+  font-size: 1rem;
+  padding: var(--t-spacing-2) var(--t-spacing-3);
+
+  strong {
+    color: var(--t-text-color-default-primary);
+  }
+}
+
+.codeblock {
+  background: #2d2d2d;
+  border-radius: var(--t-border-radius-lg);
+  margin: var(--t-spacing-3) 0 var(--t-spacing-6);
+  overflow-x: auto;
+  padding: 0;
+
+  pre {
+    margin: 0;
+    padding: 0;
+  }
+
+  code {
+    display: block;
+    font-family: 'Fira Code', 'Monaco', 'Menlo', 'Courier New', monospace;
+    font-size: 0.9rem;
+    line-height: 1.5;
+    padding: var(--t-spacing-3);
+  }
+}
+
+@media (max-width: 640px) {
+  .demo-container {
+    padding: var(--t-spacing-4) var(--t-spacing-3);
+  }
+
+  h1 {
+    font-size: 2rem;
+  }
+
+  .button-grid {
+    grid-template-columns: 1fr;
+  }
+}