npm - @visns-studio/visns-components - Versions diffs - 6.34.0 → 6.34.3 - Mend

@visns-studio/visns-components 6.34.0 → 6.34.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (20) hide show

package/README.md +14 -1
package/package.json +1 -1
package/src/components/auth/Login.jsx +2 -2
package/src/components/auth/Reset.jsx +1 -1
package/src/components/auth/TwoFactorAuth.jsx +1 -1
package/src/components/auth/Verify.jsx +2 -2
package/src/components/emailCampaigns/BlockEditor.jsx +486 -0
package/src/components/emailCampaigns/CampaignEditor.jsx +614 -0
package/src/components/emailCampaigns/CampaignReport.jsx +98 -0
package/src/components/emailCampaigns/EmailCampaigns.jsx +422 -0
package/src/components/emailCampaigns/EmailLists.jsx +505 -0
package/src/components/emailCampaigns/emailCampaignApi.js +135 -0
package/src/components/sms/SmsCampaigns.jsx +34 -4
package/src/components/sms/SmsInbox.jsx +2 -5
package/src/components/sms/SmsLineSettings.jsx +2 -5
package/src/components/styles/EmailCampaigns.module.scss +922 -0
package/src/components/styles/Sms.module.scss +33 -4
package/src/components/styles/Vault.module.scss +5 -3
package/src/components/styles/global.css +14 -2
package/src/index.js +4 -0

package/README.md CHANGED Viewed

@@ -9,7 +9,20 @@ A comprehensive React component library used by the VISNS Studio team for CRM an
 VISNS Components is a React-based UI component library that provides a set of reusable, consistent, and customizable components for building web applications. It includes components for authentication, data grids, forms, navigation, and more, designed to work seamlessly together.
-## Recent Updates (v6.34.0)
+## Recent Updates (v6.34.3)
+### The auth fields' values no longer sit on top of their labels
+The sign-in, reset, verify and 2FA screens draw a floating label inside the
+input, and `_authShell.scss` sizes those inputs for it — a 3.35rem box with a
+top-heavy padding so the value clears the label. That rule is `.field input`,
+(0,1,1), and `global.css` sizes every text input through a twenty-clause
+`input[type]:not(...)` chain that outranks it. So the chain won: the box shrank
+to `--field-height`, the padding went horizontal-only, and the value was drawn
+straight through the label. The six auth inputs now carry `visns-auth-input`,
+and both global chains (sizing and focus) exclude it, the same opt-out
+`searchInput` and `filterInput` already have. Apps that keep a global input
+rule of their own can exclude the same class.
 ### The shell layout is on `<html>`, where anything can read it

package/package.json CHANGED Viewed

@@ -93,7 +93,7 @@
         "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0"
     },
     "name": "@visns-studio/visns-components",
-    "version": "6.34.0",
+    "version": "6.34.3",
     "description": "Various packages to assist in the development of our Custom Applications.",
     "main": "src/index.js",
     "files": [

package/src/components/auth/Login.jsx CHANGED Viewed

@@ -524,7 +524,7 @@ const Login = ({
                                   value={auth.email}
                                   onChange={handleChange}
                                   tabIndex="1"
-                                  className={authClass.username}
+                                  className={`visns-auth-input ${authClass.username}`.trim()}
                                   autoComplete="username"
                                   placeholder=" "
                                   disabled={isBusy}
@@ -540,7 +540,7 @@ const Login = ({
                                   value={auth.password}
                                   onChange={handleChange}
                                   tabIndex="2"
-                                  className={authClass.password}
+                                  className={`visns-auth-input ${authClass.password}`.trim()}
                                   autoComplete="current-password"
                                   placeholder=" "
                                   disabled={isBusy}

package/src/components/auth/Reset.jsx CHANGED Viewed

@@ -136,7 +136,7 @@ const Reset = ({
                                 setEmailClass('');
                             }}
                             tabIndex="1"
-                            className={emailClass}
+                            className={`visns-auth-input ${emailClass}`.trim()}
                             autoComplete="username"
                             placeholder=" "
                             autoFocus

package/src/components/auth/TwoFactorAuth.jsx CHANGED Viewed

@@ -455,7 +455,7 @@ const TwoFactorAuth = ({
                         value={verificationCode}
                         onChange={handleChange}
                         tabIndex="1"
-                        className={codeClass}
+                        className={`visns-auth-input ${codeClass}`.trim()}
                         placeholder=" "
                         autoComplete="one-time-code"
                         inputMode="numeric"

package/src/components/auth/Verify.jsx CHANGED Viewed

@@ -201,7 +201,7 @@ const Verify = ({
                         value={password}
                         onChange={handleInputChange}
                         tabIndex="1"
-                        className={passwordClass}
+                        className={`visns-auth-input ${passwordClass}`.trim()}
                         autoComplete="new-password"
                         placeholder=" "
                         autoFocus
@@ -237,7 +237,7 @@ const Verify = ({
                         value={passwordRepeat}
                         onChange={handleInputChange}
                         tabIndex="2"
-                        className={passwordRepeatClass}
+                        className={`visns-auth-input ${passwordRepeatClass}`.trim()}
                         autoComplete="new-password"
                         placeholder=" "
                         disabled={isLoading}

package/src/components/emailCampaigns/BlockEditor.jsx ADDED Viewed

@@ -0,0 +1,486 @@
+import React, { useEffect, useRef, useState } from 'react';
+import {
+    AlignCenter,
+    AlignLeft,
+    AlignRight,
+    ArrowDown,
+    ArrowUp,
+    Bold,
+    ImageUp,
+    Italic,
+    Link2,
+    List,
+    Trash2,
+} from 'lucide-react';
+import styles from '../styles/EmailCampaigns.module.scss';
+import { api, BLOCK_TYPES, newBlock } from './emailCampaignApi';
+/**
+ * The campaign's content, as an ordered list of blocks.
+ *
+ * Each block is a card with its own fields and the same three controls: move
+ * up, move down, remove. The server turns the blocks into the email
+ * (EmailCampaignRenderer) and cleans the rich text again on the way, so nothing
+ * here is trusted for safety; it is only an editor.
+ *
+ * Merge tags are typed as `{first_name}` and friends. The "Insert" menu puts one
+ * at the cursor so nobody has to remember the spelling.
+ */
+const TAG_LABELS = {
+    first_name: 'First name',
+    last_name: 'Last name',
+    name: 'Full name',
+    company: 'Company',
+    email: 'Email',
+};
+const BlockEditor = ({ blocks, onChange, routes, disabled, tags = Object.keys(TAG_LABELS) }) => {
+    const update = (index, patch) =>
+        onChange(blocks.map((block, at) => (at === index ? { ...block, ...patch } : block)));
+    const move = (index, by) => {
+        const target = index + by;
+        if (target < 0 || target >= blocks.length) return;
+        const next = [...blocks];
+        [next[index], next[target]] = [next[target], next[index]];
+        onChange(next);
+    };
+    const remove = (index) => onChange(blocks.filter((block, at) => at !== index));
+    return (
+        <div className={styles.blocks}>
+            {blocks.length === 0 && (
+                <p className={styles.quiet}>No content yet. Add a heading or some text below.</p>
+            )}
+            {blocks.map((block, index) => (
+                <div className={styles.block} key={index}>
+                    <div className={styles.blockHead}>
+                        <span className={styles.blockType}>
+                            {BLOCK_TYPES.find((entry) => entry.type === block.type)?.label || block.type}
+                        </span>
+                        <span className={styles.blockTools}>
+                            <IconButton
+                                title="Move this block up"
+                                disabled={disabled || index === 0}
+                                onClick={() => move(index, -1)}
+                            >
+                                <ArrowUp size={14} aria-hidden="true" />
+                            </IconButton>
+                            <IconButton
+                                title="Move this block down"
+                                disabled={disabled || index === blocks.length - 1}
+                                onClick={() => move(index, 1)}
+                            >
+                                <ArrowDown size={14} aria-hidden="true" />
+                            </IconButton>
+                            <IconButton
+                                title="Remove this block"
+                                danger
+                                disabled={disabled}
+                                onClick={() => remove(index)}
+                            >
+                                <Trash2 size={14} aria-hidden="true" />
+                            </IconButton>
+                        </span>
+                    </div>
+                    <BlockFields
+                        block={block}
+                        disabled={disabled}
+                        tags={tags}
+                        routes={routes}
+                        onChange={(patch) => update(index, patch)}
+                    />
+                </div>
+            ))}
+            {!disabled && (
+                <div className={styles.addRow}>
+                    <span className={styles.addLabel}>Add</span>
+                    {BLOCK_TYPES.map((entry) => (
+                        <button
+                            key={entry.type}
+                            type="button"
+                            className={styles.addButton}
+                            title={`Add a ${entry.label.toLowerCase()} block at the end`}
+                            onClick={() => onChange([...blocks, newBlock(entry.type)])}
+                        >
+                            {entry.label}
+                        </button>
+                    ))}
+                </div>
+            )}
+        </div>
+    );
+};
+const BlockFields = ({ block, onChange, disabled, tags, routes }) => {
+    switch (block.type) {
+        case 'heading':
+            return (
+                <div className={styles.fieldRow}>
+                    <TextWithTags
+                        value={block.text || ''}
+                        placeholder="Heading"
+                        disabled={disabled}
+                        tags={tags}
+                        onChange={(text) => onChange({ text })}
+                    />
+                    <select
+                        className={styles.select}
+                        value={block.level === 2 ? 2 : 1}
+                        disabled={disabled}
+                        title="Heading size"
+                        onChange={(event) => onChange({ level: Number(event.target.value) })}
+                    >
+                        <option value={1}>Large</option>
+                        <option value={2}>Small</option>
+                    </select>
+                    <AlignPicker value={block.align} disabled={disabled} onChange={(align) => onChange({ align })} />
+                </div>
+            );
+        case 'text':
+            return (
+                <RichText
+                    value={block.html || ''}
+                    disabled={disabled}
+                    tags={tags}
+                    onChange={(html) => onChange({ html })}
+                />
+            );
+        case 'columns':
+            return (
+                <div className={styles.columnsEdit}>
+                    <RichText value={block.left || ''} disabled={disabled} tags={tags} onChange={(left) => onChange({ left })} />
+                    <RichText value={block.right || ''} disabled={disabled} tags={tags} onChange={(right) => onChange({ right })} />
+                </div>
+            );
+        case 'button':
+            return (
+                <div className={styles.fieldRow}>
+                    <TextWithTags
+                        value={block.label || ''}
+                        placeholder="Button label"
+                        disabled={disabled}
+                        tags={tags}
+                        onChange={(label) => onChange({ label })}
+                    />
+                    <input
+                        type="url"
+                        className={styles.input}
+                        value={block.url || ''}
+                        placeholder="https://"
+                        disabled={disabled}
+                        title="Where the button goes"
+                        onChange={(event) => onChange({ url: event.target.value })}
+                    />
+                    <AlignPicker value={block.align} disabled={disabled} onChange={(align) => onChange({ align })} />
+                </div>
+            );
+        case 'image':
+            return <ImageFields block={block} disabled={disabled} routes={routes} onChange={onChange} />;
+        case 'spacer':
+            return (
+                <label className={styles.inline}>
+                    Height
+                    <input
+                        type="range"
+                        min={8}
+                        max={80}
+                        step={4}
+                        value={block.height || 24}
+                        disabled={disabled}
+                        onChange={(event) => onChange({ height: Number(event.target.value) })}
+                    />
+                    <span className={styles.quiet}>{block.height || 24}px</span>
+                </label>
+            );
+        case 'divider':
+            return <p className={styles.quiet}>A thin line across the email.</p>;
+        default:
+            return null;
+    }
+};
+const ImageFields = ({ block, onChange, disabled, routes }) => {
+    const [uploading, setUploading] = useState(false);
+    const [error, setError] = useState('');
+    const file = useRef(null);
+    const upload = async (picked) => {
+        if (!picked) return;
+        const body = new FormData();
+        body.append('image', picked);
+        setUploading(true);
+        setError('');
+        const result = await api(routes.images, 'POST', body);
+        setUploading(false);
+        if (result.ok && result.data?.url) {
+            onChange({ url: result.data.url, alt: block.alt || picked.name.replace(/\.[a-z0-9]+$/i, '') });
+        } else {
+            setError(result.message || 'The image could not be uploaded.');
+        }
+    };
+    return (
+        <div className={styles.imageEdit}>
+            {block.url ? (
+                <img src={block.url} alt="" className={styles.imageThumb} />
+            ) : (
+                <div className={styles.imageEmpty}>No image yet</div>
+            )}
+            <div className={styles.imageFields}>
+                <div className={styles.fieldRow}>
+                    <button
+                        type="button"
+                        className={styles.button}
+                        disabled={disabled || uploading}
+                        title="Upload a JPEG, PNG, GIF or WebP from this computer"
+                        onClick={() => file.current?.click()}
+                    >
+                        <ImageUp size={14} aria-hidden="true" />
+                        {uploading ? 'Uploading…' : 'Upload image'}
+                    </button>
+                    <input
+                        ref={file}
+                        type="file"
+                        accept="image/jpeg,image/png,image/gif,image/webp"
+                        hidden
+                        onChange={(event) => upload(event.target.files?.[0])}
+                    />
+                    <input
+                        type="url"
+                        className={styles.input}
+                        value={block.url || ''}
+                        placeholder="or paste an image address (https://…)"
+                        disabled={disabled}
+                        onChange={(event) => onChange({ url: event.target.value })}
+                    />
+                </div>
+                <div className={styles.fieldRow}>
+                    <input
+                        type="text"
+                        className={styles.input}
+                        value={block.alt || ''}
+                        placeholder="Describe the image (shown if it does not load)"
+                        disabled={disabled}
+                        onChange={(event) => onChange({ alt: event.target.value })}
+                    />
+                    <input
+                        type="url"
+                        className={styles.input}
+                        value={block.href || ''}
+                        placeholder="Link when clicked (optional)"
+                        disabled={disabled}
+                        onChange={(event) => onChange({ href: event.target.value })}
+                    />
+                </div>
+                <label className={styles.inline}>
+                    Width
+                    <input
+                        type="range"
+                        min={20}
+                        max={100}
+                        step={5}
+                        value={block.width || 100}
+                        disabled={disabled}
+                        onChange={(event) => onChange({ width: Number(event.target.value) })}
+                    />
+                    <span className={styles.quiet}>{block.width || 100}%</span>
+                    <AlignPicker value={block.align || 'center'} disabled={disabled} onChange={(align) => onChange({ align })} />
+                </label>
+                {error && <p className={styles.fieldError}>{error}</p>}
+            </div>
+        </div>
+    );
+};
+/** A single-line field with a merge-tag menu beside it. */
+const TextWithTags = ({ value, onChange, placeholder, disabled, tags }) => {
+    const input = useRef(null);
+    const insert = (tag) => {
+        const element = input.current;
+        const token = `{${tag}}`;
+        if (!element) {
+            onChange(`${value}${token}`);
+            return;
+        }
+        const start = element.selectionStart ?? value.length;
+        const end = element.selectionEnd ?? value.length;
+        onChange(value.slice(0, start) + token + value.slice(end));
+    };
+    return (
+        <span className={styles.withTags}>
+            <input
+                ref={input}
+                type="text"
+                className={styles.input}
+                value={value}
+                placeholder={placeholder}
+                disabled={disabled}
+                onChange={(event) => onChange(event.target.value)}
+            />
+            <TagMenu tags={tags} disabled={disabled} onPick={insert} />
+        </span>
+    );
+};
+const TagMenu = ({ tags, onPick, disabled }) => (
+    <select
+        className={styles.tagSelect}
+        value=""
+        disabled={disabled}
+        title="Insert a personal detail, filled in for each recipient"
+        aria-label="Insert a personal detail"
+        onChange={(event) => {
+            if (event.target.value) onPick(event.target.value);
+        }}
+    >
+        <option value="">Insert…</option>
+        {tags.map((tag) => (
+            <option key={tag} value={tag}>
+                {TAG_LABELS[tag] || tag}
+            </option>
+        ))}
+    </select>
+);
+/**
+ * A small rich-text box: bold, italic, link, bullet list, and a merge tag.
+ *
+ * `contentEditable` with `execCommand`: deprecated on paper and supported by
+ * every browser in practice, and a whole editor library for five buttons would
+ * be a bundle every reader of every page pays for. The HTML it produces is
+ * cleaned on the server before it goes anywhere.
+ *
+ * The box is written to only when the value changes from OUTSIDE (a template
+ * loaded, a reset) — writing on every keystroke would throw the cursor to the
+ * start of the box.
+ */
+const RichText = ({ value, onChange, disabled, tags }) => {
+    const box = useRef(null);
+    const last = useRef(value);
+    useEffect(() => {
+        if (box.current && value !== last.current) {
+            box.current.innerHTML = value;
+            last.current = value;
+        }
+    }, [value]);
+    useEffect(() => {
+        if (box.current) box.current.innerHTML = value;
+        // First paint only; later outside changes go through the effect above.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const emit = () => {
+        const html = box.current?.innerHTML ?? '';
+        last.current = html;
+        onChange(html);
+    };
+    const run = (command, argument = null) => {
+        box.current?.focus();
+        document.execCommand(command, false, argument);
+        emit();
+    };
+    const link = () => {
+        const url = window.prompt('Link address (https://…)');
+        if (url && /^(https?:\/\/|mailto:)/i.test(url.trim())) {
+            run('createLink', url.trim());
+        }
+    };
+    return (
+        <div className={styles.rich}>
+            <div className={styles.richBar}>
+                <IconButton title="Bold" disabled={disabled} onClick={() => run('bold')}>
+                    <Bold size={14} aria-hidden="true" />
+                </IconButton>
+                <IconButton title="Italic" disabled={disabled} onClick={() => run('italic')}>
+                    <Italic size={14} aria-hidden="true" />
+                </IconButton>
+                <IconButton title="Link the selected words" disabled={disabled} onClick={link}>
+                    <Link2 size={14} aria-hidden="true" />
+                </IconButton>
+                <IconButton title="Bulleted list" disabled={disabled} onClick={() => run('insertUnorderedList')}>
+                    <List size={14} aria-hidden="true" />
+                </IconButton>
+                <TagMenu tags={tags} disabled={disabled} onPick={(tag) => run('insertText', `{${tag}}`)} />
+            </div>
+            <div
+                ref={box}
+                className={styles.richBox}
+                contentEditable={!disabled}
+                suppressContentEditableWarning
+                role="textbox"
+                aria-multiline="true"
+                onInput={emit}
+                onBlur={emit}
+            />
+        </div>
+    );
+};
+const AlignPicker = ({ value = 'left', onChange, disabled }) => (
+    <span className={styles.alignPicker} role="group" aria-label="Alignment">
+        {[
+            ['left', AlignLeft],
+            ['center', AlignCenter],
+            ['right', AlignRight],
+        ].map(([key, Icon]) => (
+            <IconButton
+                key={key}
+                title={`Align ${key}`}
+                pressed={value === key}
+                disabled={disabled}
+                onClick={() => onChange(key)}
+            >
+                <Icon size={14} aria-hidden="true" />
+            </IconButton>
+        ))}
+    </span>
+);
+const IconButton = ({ title, onClick, disabled, danger, pressed, children }) => (
+    <button
+        type="button"
+        className={[styles.iconButton, danger ? styles.iconDanger : '', pressed ? styles.iconOn : '']
+            .filter(Boolean)
+            .join(' ')}
+        title={title}
+        aria-label={title}
+        aria-pressed={pressed === undefined ? undefined : pressed}
+        disabled={disabled}
+        onClick={onClick}
+    >
+        {children}
+    </button>
+);
+export default BlockEditor;