@dilipod/ui 0.4.28 → 0.4.30

package/dist/lib/email.d.ts

@@ -0,0 +1,48 @@
+/**
+ * Email Template Helpers
+ *
+ * Shared branded email template and HTML building blocks.
+ * Used by both platform and admin apps via their local `lib/email.ts` re-exports.
+ */
+/**
+ * Wrap email body content in the standard Dilipod branded template.
+ *
+ * Usage:
+ *   emailTemplate({
+ *     body: '<h2>Hello</h2><p>Content here</p>',
+ *   })
+ *
+ * Or with a preheader (hidden preview text in email clients):
+ *   emailTemplate({
+ *     preheader: 'Quick summary shown in inbox',
+ *     body: '...',
+ *   })
+ */
+export declare function emailTemplate({ body, preheader }: {
+    body: string;
+    preheader?: string;
+}): string;
+/**
+ * Render a CTA button for use inside emailTemplate body.
+ *
+ *   buttonHtml({ text: 'Reset Password', href: 'https://...' })
+ *   buttonHtml({ text: 'View Incident', href: '...', variant: 'danger' })
+ */
+export declare function buttonHtml({ text, href, variant, }: {
+    text: string;
+    href: string;
+    variant?: 'primary' | 'danger';
+}): string;
+/**
+ * Render an info box (grey background) for key details.
+ *
+ *   infoBoxHtml('<strong>Status:</strong> Deployed')
+ */
+export declare function infoBoxHtml(innerHtml: string): string;
+/**
+ * Render a warning/note box (yellow background).
+ *
+ *   noteBoxHtml('This link expires in 1 hour.')
+ */
+export declare function noteBoxHtml(text: string): string;
+//# sourceMappingURL=email.d.ts.map

package/dist/lib/email.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"email.d.ts","sourceRoot":"","sources":["../../src/lib/email.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH;;;;;;;;;;;;;GAaG;AACH,wBAAgB,aAAa,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,EAAE;IAAE,IAAI,EAAE,MAAM,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG,MAAM,CA0E/F;AAED;;;;;GAKG;AACH,wBAAgB,UAAU,CAAC,EACzB,IAAI,EACJ,IAAI,EACJ,OAAmB,GACpB,EAAE;IACD,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;IACZ,OAAO,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;CAC/B,GAAG,MAAM,CAYT;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,SAAS,EAAE,MAAM,GAAG,MAAM,CAIrD;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,MAAM,CAIhD"}

package/dist/lib/slack.d.ts

@@ -0,0 +1,83 @@
+/**
+ * Slack Block Kit Helpers
+ *
+ * Shared Slack message and block builders used by both platform and admin apps.
+ * Pure functions with zero dependencies — same pattern as email.ts.
+ *
+ * Transport layers (sendSlackMessage, sendSlackWebhook) stay local in each app.
+ */
+export interface SlackBlock {
+    type: string;
+    text?: {
+        type: string;
+        text: string;
+    };
+    elements?: SlackElement[];
+    fields?: SlackField[];
+}
+export interface SlackElement {
+    type: string;
+    text?: {
+        type: string;
+        text: string;
+    };
+    style?: string;
+    value?: string;
+    url?: string;
+    action_id?: string;
+}
+export interface SlackField {
+    type: string;
+    text: string;
+}
+export interface SlackMessage {
+    text: string;
+    blocks: SlackBlock[];
+}
+/**
+ * Build a single mrkdwn section block.
+ *
+ *   slackSection('*Hello* world')
+ */
+export declare function slackSection(mrkdwn: string): SlackBlock;
+/**
+ * Build a key-value fields block.
+ *
+ *   slackFields({ Worker: 'Invoice Bot', Status: 'Live' })
+ */
+export declare function slackFields(fields: Record<string, string | number>): SlackBlock;
+/**
+ * Build an actions block with buttons.
+ *
+ *   slackActions([
+ *     { text: 'View', url: 'https://...' },
+ *     { text: 'Approve', actionId: 'approve', style: 'primary', value: '123' },
+ *   ])
+ */
+export declare function slackActions(buttons: {
+    text: string;
+    url?: string;
+    value?: string;
+    actionId?: string;
+    style?: 'primary' | 'danger';
+}[]): SlackBlock;
+/**
+ * Build a complete Slack message with optional details, note, and button.
+ * Covers 90% of notification use cases.
+ *
+ *   slackMessage({
+ *     title: '🚀 New signup',
+ *     details: { Name: 'John', Email: 'john@acme.com' },
+ *     note: 'First user from this company',
+ *     buttonText: 'View Customer',
+ *     buttonUrl: 'https://admin.dilipod.com/customers/123',
+ *   })
+ */
+export declare function slackMessage(options: {
+    title: string;
+    details?: Record<string, string | number>;
+    note?: string;
+    buttonText?: string;
+    buttonUrl?: string;
+}): SlackMessage;
+//# sourceMappingURL=slack.d.ts.map

package/dist/lib/slack.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"slack.d.ts","sourceRoot":"","sources":["../../src/lib/slack.ts"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAMH,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;IACrC,QAAQ,CAAC,EAAE,YAAY,EAAE,CAAA;IACzB,MAAM,CAAC,EAAE,UAAU,EAAE,CAAA;CACtB;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAC;QAAC,IAAI,EAAE,MAAM,CAAA;KAAE,CAAA;IACrC,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAED,MAAM,WAAW,UAAU;IACzB,IAAI,EAAE,MAAM,CAAA;IACZ,IAAI,EAAE,MAAM,CAAA;CACb;AAED,MAAM,WAAW,YAAY;IAC3B,IAAI,EAAE,MAAM,CAAA;IACZ,MAAM,EAAE,UAAU,EAAE,CAAA;CACrB;AAMD;;;;GAIG;AACH,wBAAgB,YAAY,CAAC,MAAM,EAAE,MAAM,GAAG,UAAU,CAKvD;AAED;;;;GAIG;AACH,wBAAgB,WAAW,CAAC,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,GAAG,UAAU,CAQ/E;AAED;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAC1B,OAAO,EAAE;IACP,IAAI,EAAE,MAAM,CAAA;IACZ,GAAG,CAAC,EAAE,MAAM,CAAA;IACZ,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,QAAQ,CAAC,EAAE,MAAM,CAAA;IACjB,KAAK,CAAC,EAAE,SAAS,GAAG,QAAQ,CAAA;CAC7B,EAAE,GACF,UAAU,CAYZ;AAMD;;;;;;;;;;;GAWG;AACH,wBAAgB,YAAY,CAAC,OAAO,EAAE;IACpC,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,GAAG,MAAM,CAAC,CAAA;IACzC,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,UAAU,CAAC,EAAE,MAAM,CAAA;IACnB,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB,GAAG,YAAY,CAmBf"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dilipod/ui",
-  "version": "0.4.28",
+  "version": "0.4.30",
   "description": "Dilipod Design System - Shared UI components and styles",
   "author": "Dilipod <hello@dilipod.com>",
   "license": "MIT",
@@ -111,7 +111,7 @@
     "tailwindcss": "^4.1.8",
     "tsup": "^8.5.0",
     "typescript": "^5.8.3",
-    "vite": "^7.3.1",
+    "vite": "^6.0.0",
     "vitest": "^1.2.0"
   }
 }

package/src/index.ts

@@ -315,6 +315,13 @@ export { useServiceWorker } from './hooks/use-service-worker'
 // Formatting Utilities
 export { formatCentsToEuros, formatEuros, formatDuration, formatRelativeTime } from './lib/formatting'
 
+// Email Template Helpers
+export { emailTemplate, buttonHtml, infoBoxHtml, noteBoxHtml } from './lib/email'
+
+// Slack Block Kit Helpers
+export { slackMessage, slackSection, slackFields, slackActions } from './lib/slack'
+export type { SlackBlock, SlackElement, SlackField, SlackMessage } from './lib/slack'
+
 // Utilities
 export { cn } from './lib/utils'
 

package/src/lib/email.ts

@@ -0,0 +1,146 @@
+/**
+ * Email Template Helpers
+ *
+ * Shared branded email template and HTML building blocks.
+ * Used by both platform and admin apps via their local `lib/email.ts` re-exports.
+ */
+
+/**
+ * Wrap email body content in the standard Dilipod branded template.
+ *
+ * Usage:
+ *   emailTemplate({
+ *     body: '<h2>Hello</h2><p>Content here</p>',
+ *   })
+ *
+ * Or with a preheader (hidden preview text in email clients):
+ *   emailTemplate({
+ *     preheader: 'Quick summary shown in inbox',
+ *     body: '...',
+ *   })
+ */
+export function emailTemplate({ body, preheader }: { body: string; preheader?: string }): string {
+  const preheaderHtml = preheader
+    ? `<div style="display:none;font-size:1px;color:#ffffff;line-height:1px;max-height:0;max-width:0;opacity:0;overflow:hidden;">${preheader}</div>`
+    : ''
+
+  return `<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <meta name="color-scheme" content="light" />
+  <meta name="supported-color-schemes" content="light" />
+  <title>Dilipod</title>
+</head>
+<body style="margin: 0; padding: 0; background-color: #f0f0f0; -webkit-font-smoothing: antialiased;">
+  ${preheaderHtml}
+  <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color: #f0f0f0;">
+    <tr>
+      <td align="center" style="padding: 40px 16px;">
+        <!-- Main card -->
+        <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="max-width: 560px;">
+          <!-- Logo header -->
+          <tr>
+            <td style="padding: 0 0 24px 0;">
+              <table role="presentation" cellpadding="0" cellspacing="0">
+                <tr>
+                  <td style="width: 32px; height: 32px; background-color: #00e5cc; border-radius: 6px; text-align: center; vertical-align: middle; font-size: 16px; font-weight: 700; color: #111111; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;">
+                    D
+                  </td>
+                  <td style="padding-left: 10px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 17px; font-weight: 600; color: #111111; letter-spacing: -0.2px;">
+                    Dilipod
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+          <!-- Content card -->
+          <tr>
+            <td>
+              <table role="presentation" width="100%" cellpadding="0" cellspacing="0" style="background-color: #ffffff; border-radius: 6px; overflow: hidden; border: 1px solid #e2e2e2;">
+                <!-- Accent bar -->
+                <tr>
+                  <td style="height: 3px; background: linear-gradient(90deg, #00e5cc 0%, #00c8b5 100%); font-size: 0; line-height: 0;">&nbsp;</td>
+                </tr>
+                <!-- Body content -->
+                <tr>
+                  <td style="padding: 36px 40px 40px 40px; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 15px; line-height: 1.7; color: #374151;">
+                    ${body}
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+          <!-- Footer -->
+          <tr>
+            <td style="padding: 24px 4px 0 4px;">
+              <table role="presentation" width="100%" cellpadding="0" cellspacing="0">
+                <tr>
+                  <td style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 12px; color: #9ca3af;">
+                    &copy; ${new Date().getFullYear()} Dilipod &mdash; Your Digital Workforce
+                  </td>
+                  <td align="right" style="font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 12px;">
+                    <a href="https://dilipod.com" style="color: #9ca3af; text-decoration: none;">dilipod.com</a>
+                  </td>
+                </tr>
+              </table>
+            </td>
+          </tr>
+        </table>
+      </td>
+    </tr>
+  </table>
+</body>
+</html>`
+}
+
+/**
+ * Render a CTA button for use inside emailTemplate body.
+ *
+ *   buttonHtml({ text: 'Reset Password', href: 'https://...' })
+ *   buttonHtml({ text: 'View Incident', href: '...', variant: 'danger' })
+ */
+export function buttonHtml({
+  text,
+  href,
+  variant = 'primary',
+}: {
+  text: string
+  href: string
+  variant?: 'primary' | 'danger'
+}): string {
+  const bg = variant === 'danger' ? '#dc2626' : '#111111'
+  const color = '#ffffff'
+  return `<table role="presentation" cellpadding="0" cellspacing="0" style="margin-top: 24px;">
+  <tr>
+    <td style="background-color: ${bg}; border-radius: 6px;">
+      <a href="${href}" style="display: inline-block; padding: 12px 32px; color: ${color}; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; font-size: 14px; font-weight: 600; text-decoration: none;">
+        ${text} &rarr;
+      </a>
+    </td>
+  </tr>
+</table>`
+}
+
+/**
+ * Render an info box (grey background) for key details.
+ *
+ *   infoBoxHtml('<strong>Status:</strong> Deployed')
+ */
+export function infoBoxHtml(innerHtml: string): string {
+  return `<div style="background-color: #f8fafb; padding: 16px 20px; border-radius: 6px; border: 1px solid #e5e7eb; margin: 20px 0; border-left: 3px solid #00e5cc;">
+  ${innerHtml}
+</div>`
+}
+
+/**
+ * Render a warning/note box (yellow background).
+ *
+ *   noteBoxHtml('This link expires in 1 hour.')
+ */
+export function noteBoxHtml(text: string): string {
+  return `<div style="background-color: #fffbeb; padding: 14px 18px; border-radius: 6px; border: 1px solid #fde68a; margin: 20px 0; font-size: 13px; color: #92400e; border-left: 3px solid #f59e0b;">
+  ${text}
+</div>`
+}

package/src/lib/slack.ts

@@ -0,0 +1,142 @@
+/**
+ * Slack Block Kit Helpers
+ *
+ * Shared Slack message and block builders used by both platform and admin apps.
+ * Pure functions with zero dependencies — same pattern as email.ts.
+ *
+ * Transport layers (sendSlackMessage, sendSlackWebhook) stay local in each app.
+ */
+
+// ============================================
+// Types
+// ============================================
+
+export interface SlackBlock {
+  type: string
+  text?: { type: string; text: string }
+  elements?: SlackElement[]
+  fields?: SlackField[]
+}
+
+export interface SlackElement {
+  type: string
+  text?: { type: string; text: string }
+  style?: string
+  value?: string
+  url?: string
+  action_id?: string
+}
+
+export interface SlackField {
+  type: string
+  text: string
+}
+
+export interface SlackMessage {
+  text: string
+  blocks: SlackBlock[]
+}
+
+// ============================================
+// Block Builders
+// ============================================
+
+/**
+ * Build a single mrkdwn section block.
+ *
+ *   slackSection('*Hello* world')
+ */
+export function slackSection(mrkdwn: string): SlackBlock {
+  return {
+    type: 'section',
+    text: { type: 'mrkdwn', text: mrkdwn },
+  }
+}
+
+/**
+ * Build a key-value fields block.
+ *
+ *   slackFields({ Worker: 'Invoice Bot', Status: 'Live' })
+ */
+export function slackFields(fields: Record<string, string | number>): SlackBlock {
+  return {
+    type: 'section',
+    fields: Object.entries(fields).map(([key, value]) => ({
+      type: 'mrkdwn',
+      text: `*${key}:*\n${value}`,
+    })),
+  }
+}
+
+/**
+ * Build an actions block with buttons.
+ *
+ *   slackActions([
+ *     { text: 'View', url: 'https://...' },
+ *     { text: 'Approve', actionId: 'approve', style: 'primary', value: '123' },
+ *   ])
+ */
+export function slackActions(
+  buttons: {
+    text: string
+    url?: string
+    value?: string
+    actionId?: string
+    style?: 'primary' | 'danger'
+  }[]
+): SlackBlock {
+  return {
+    type: 'actions',
+    elements: buttons.map((btn) => ({
+      type: 'button',
+      text: { type: 'plain_text', text: btn.text },
+      ...(btn.url ? { url: btn.url } : {}),
+      ...(btn.value ? { value: btn.value } : {}),
+      ...(btn.actionId ? { action_id: btn.actionId } : {}),
+      ...(btn.style ? { style: btn.style } : {}),
+    })),
+  }
+}
+
+// ============================================
+// Message Builder
+// ============================================
+
+/**
+ * Build a complete Slack message with optional details, note, and button.
+ * Covers 90% of notification use cases.
+ *
+ *   slackMessage({
+ *     title: '🚀 New signup',
+ *     details: { Name: 'John', Email: 'john@acme.com' },
+ *     note: 'First user from this company',
+ *     buttonText: 'View Customer',
+ *     buttonUrl: 'https://admin.dilipod.com/customers/123',
+ *   })
+ */
+export function slackMessage(options: {
+  title: string
+  details?: Record<string, string | number>
+  note?: string
+  buttonText?: string
+  buttonUrl?: string
+}): SlackMessage {
+  const blocks: SlackBlock[] = [slackSection(`*${options.title}*`)]
+
+  if (options.details && Object.keys(options.details).length > 0) {
+    blocks.push(slackFields(options.details))
+  }
+
+  if (options.note) {
+    blocks.push(slackSection(options.note))
+  }
+
+  if (options.buttonUrl && options.buttonText) {
+    blocks.push(slackActions([{ text: options.buttonText, url: options.buttonUrl }]))
+  }
+
+  return {
+    text: options.title,
+    blocks,
+  }
+}