tosijs-ui 1.0.0

package/dist/notifications.js

@@ -0,0 +1,308 @@
+/*#
+
+# notifications
+
+`XinNotification` provides a singleton custom `<xin-notification>` element that manages
+a list of notifications.
+
+The notifications are displayed most-recent first. If the notifications would take more than
+half the height of the display, they are scrolled.
+
+You can post a notification simply with `XinNotification.post()` or `postNotification()`.
+
+```
+interface NotificationSpec {
+  message: string
+  type?: 'success' | 'info' | 'log' | 'warn' | 'error' | 'progress' // default 'info'
+  icon?: SVGElement | string // defaults to an info icon
+  duration?: number
+  progress?: () => number // return percentage completion
+  close?: () => void
+}
+```
+
+If you provide a `progress` callback (which is assumed to return a number from `0-100`, with
+100+ indicating completion) then `XinNotification` will poll it every second until the
+task completes or the notification is closed. Returning 100 or more will automatically close
+the notification.
+
+If you configure a notification's `type = "progress"` but don't provide a `progress` callback
+then an indefinite `<progress>` element will be displayed.
+
+If you provide a `close` callback, it will be fired if the user closes the notification.
+
+`postNotification` returns a callback function that closes the note programmatically (e.g.
+when an operation completes). This will *also* call any `close` callback function you
+provided. (The progress demos in the example exercise this functionality.)
+
+```js
+const { postNotification, icons } = xinjsui
+
+const form = preview.querySelector('xin-form')
+const submit = preview.querySelector('.submit')
+const closeButton = preview.querySelector('.close')
+
+let close
+
+form.submitCallback = (value, isValid) => {
+  if (!isValid) return
+  if (value.type.startsWith('progress')) {
+    startTime = Date.now()
+    const { message, duration, icon } = value
+    close = postNotification({
+      message,
+      type: 'progress',
+      icon,
+      progress: value.type === 'progress' ? () => (Date.now() - startTime) / (10 * duration) : undefined,
+      close: () => { postNotification(`${value.message} cancelled`) },
+    })
+  } else {
+    close = postNotification(value)
+  }
+  console.log(close)
+  closeButton.disabled = false
+}
+
+submit.addEventListener('click', form.submit)
+closeButton.addEventListener('click', () => {
+  if (close) {
+    close()
+  }
+})
+
+postNotification({
+  message: 'Welcome to xinjs-ui notifications, this message will disappear in 2s',
+  duration: 2
+})
+```
+```html
+<xin-form>
+  <h3 slot="header">Notification Test</h3>
+  <xin-field caption="Message" key="message" type="string" value="This is a test…"></xin-field>
+  <xin-field caption="Type" key="type" value="info">
+    <xin-select slot="input"
+      options="error,warn,info,success,log,,progress,progress (indefinite)"
+    ></xin-select>
+  </xin-field>
+  <xin-field caption="Icon" key="icon" value="info">
+    <xin-select slot="input"
+      options="info,bug,thumbsUp,thumbsDown,message"
+    ></xin-select>
+  </xin-field>
+  <xin-field caption="Duration" key="duration" type="number" value="2"></xin-field>
+  <button slot="footer" class="close" disabled>Close Last Notification</button>
+  <span slot="footer" class="elastic"></span>
+  <button slot="footer" class="submit">Post Notification</button>
+</xin-form>
+```
+```css
+xin-form {
+  height: 100%;
+}
+
+xin-form::part(content) {
+  display: flex;
+  flex-direction: column;
+  padding: 10px;
+  gap: 10px;
+  background: var(--background);
+}
+
+xin-form::part(header),
+xin-form::part(footer) {
+  background: #eee;
+  justify-content: center;
+  padding: 10px;
+}
+
+xin-form h3 {
+  margin: 0;
+}
+
+xin-form label {
+  display: grid;
+  grid-template-columns: 120px 1fr;
+}
+```
+
+## `postNotification(spec: NotificationSpec | string)`
+
+This is simply a wrapper for `XinNotification.post()`.
+*/
+import { Component, elements, vars } from 'xinjs';
+import { icons } from './icons';
+import { findHighestZ } from './track-drag';
+const { div, button } = elements;
+const COLOR_MAP = {
+    error: 'red',
+    warn: 'orange',
+    info: 'royalblue',
+    log: 'gray',
+    success: 'green',
+    progress: 'royalblue',
+};
+export class XinNotification extends Component {
+    static singleton;
+    static styleSpec = {
+        ':host': {
+            _notificationSpacing: 8,
+            _notificationWidth: 360,
+            _notificationPadding: `${vars.notificationSpacing} ${vars.notificationSpacing50} ${vars.notificationSpacing} ${vars.notificationSpacing200}`,
+            _notificationBg: '#fafafa',
+            _notificationAccentColor: '#aaa',
+            _notificationTextColor: '#444',
+            _notificationIconSize: vars.notificationSpacing300,
+            _notificationButtonSize: 48,
+            _notificationBorderWidth: '3px 0 0',
+            _notificationBorderRadius: vars.notificationSpacing50,
+            position: 'fixed',
+            left: 0,
+            right: 0,
+            bottom: 0,
+            paddingBottom: vars.notificationSpacing,
+            width: vars.notificationWidth,
+            display: 'flex',
+            flexDirection: 'column-reverse',
+            margin: '0 auto',
+            gap: vars.notificationSpacing,
+            maxHeight: '50vh',
+            overflow: 'hidden auto',
+            boxShadow: 'none !important',
+        },
+        ':host *': {
+            color: vars.notificationTextColor,
+        },
+        ':host .note': {
+            display: 'grid',
+            background: vars.notificationBg,
+            padding: vars.notificationPadding,
+            gridTemplateColumns: `${vars.notificationIconSize} 1fr ${vars.notificationButtonSize}`,
+            gap: vars.notificationSpacing,
+            alignItems: 'center',
+            borderRadius: vars.notificationBorderRadius,
+            boxShadow: `0 2px 8px #0006, inset 0 0 0 2px ${vars.notificationAccentColor}`,
+            borderColor: vars.notificationAccentColor,
+            borderWidth: vars.notificationBorderWidth,
+            borderStyle: 'solid',
+            transition: '0.5s ease-in',
+            transitionProperty: 'margin, opacity',
+            zIndex: 1,
+        },
+        ':host .note .icon': {
+            stroke: vars.notificationAccentColor,
+        },
+        ':host .note button': {
+            display: 'flex',
+            lineHeight: vars.notificationButtonSize,
+            padding: 0,
+            margin: 0,
+            height: vars.notificationButtonSize,
+            width: vars.notificationButtonSize,
+            background: 'transparent',
+            alignItems: 'center',
+            justifyContent: 'center',
+            boxShadow: 'none',
+            border: 'none',
+            position: 'relative',
+        },
+        ':host .note button:hover svg': {
+            stroke: vars.notificationAccentColor,
+        },
+        ':host .note button:active svg': {
+            borderRadius: 99,
+            stroke: vars.notificationBg,
+            background: vars.notificationAccentColor,
+            padding: vars.spacing50,
+        },
+        ':host .note svg': {
+            height: vars.notificationIconSize,
+            width: vars.notificationIconSize,
+            pointerEvents: 'none',
+        },
+        ':host .message': {
+            display: 'flex',
+            flexDirection: 'column',
+            alignItems: 'center',
+            gap: vars.notificationSpacing,
+        },
+        ':host .note.closing': {
+            opacity: 0,
+            zIndex: 0,
+        },
+    };
+    static removeNote(note) {
+        note.classList.add('closing');
+        note.style.marginBottom = -note.offsetHeight + 'px';
+        const remove = () => {
+            note.remove();
+        };
+        note.addEventListener('transitionend', remove);
+        setTimeout(remove, 1000);
+    }
+    static post(spec) {
+        const { message, duration, type, close, progress, icon } = Object.assign({ type: 'info', duration: -1 }, typeof spec === 'string' ? { message: spec } : spec);
+        if (!this.singleton) {
+            this.singleton = xinNotification();
+        }
+        const singleton = this.singleton;
+        document.body.append(singleton);
+        singleton.style.zIndex = String(findHighestZ() + 1);
+        const _notificationAccentColor = COLOR_MAP[type];
+        const progressBar = progress || type === 'progress' ? elements.progress() : {};
+        const closeCallback = () => {
+            if (close) {
+                close();
+            }
+            XinNotification.removeNote(note);
+        };
+        const iconElement = icon instanceof SVGElement
+            ? icon
+            : icon
+                ? icons[icon]({ class: 'icon' })
+                : icons.info({ class: 'icon' });
+        const note = div({
+            class: `note ${type}`,
+            style: {
+                _notificationAccentColor,
+            },
+        }, iconElement, div({ class: 'message' }, div(message), progressBar), button({
+            class: 'close',
+            title: 'close',
+            // we can't use onClick because this lives inside a shadowDOM
+            apply(elt) {
+                elt.addEventListener('click', closeCallback);
+            },
+        }, icons.x()));
+        singleton.shadowRoot.append(note);
+        if (progressBar instanceof HTMLProgressElement &&
+            progress instanceof Function) {
+            progressBar.setAttribute('max', String(100));
+            progressBar.value = progress();
+            const interval = setInterval(() => {
+                if (!singleton.shadowRoot.contains(note)) {
+                    clearInterval(interval);
+                    return;
+                }
+                const percentage = progress();
+                progressBar.value = percentage;
+                if (percentage >= 100) {
+                    XinNotification.removeNote(note);
+                }
+            }, 1000);
+        }
+        if (duration > 0) {
+            setTimeout(() => {
+                XinNotification.removeNote(note);
+            }, duration * 1000);
+        }
+        note.scrollIntoView();
+        return closeCallback;
+    }
+    content = null;
+}
+export const xinNotification = XinNotification.elementCreator({
+    tag: 'xin-notification',
+});
+export function postNotification(spec) {
+    return XinNotification.post(spec);
+}

package/dist/password-strength.d.ts

@@ -0,0 +1,35 @@
+import { Component } from 'tosijs';
+export declare const digest: (s: string, method?: string) => Promise<string>;
+export declare const isBreached: (password: string) => Promise<boolean>;
+export declare class XinPasswordStrength extends Component {
+    minLength: number;
+    goodLength: number;
+    indicatorColors: string;
+    descriptionColors: string;
+    issues: {
+        tooShort: boolean;
+        short: boolean;
+        noUpper: boolean;
+        noLower: boolean;
+        noNumber: boolean;
+        noSpecial: boolean;
+    };
+    issueDescriptions: {
+        tooShort: string;
+        short: string;
+        noUpper: string;
+        noLower: string;
+        noNumber: string;
+        noSpecial: string;
+    };
+    value: number;
+    strengthDescriptions: string[];
+    constructor();
+    strength(password: string): number;
+    isBreached(): Promise<boolean>;
+    updateIndicator: (password: string) => void;
+    update: (event: Event) => void;
+    content: () => any[];
+    render(): void;
+}
+export declare const xinPasswordStrength: import("tosijs").ElementCreator<Component<import("tosijs").PartsMap>>;

package/dist/password-strength.js

@@ -0,0 +1,302 @@
+/*#
+# password strength
+
+Just wrap it a `<xin-password-strength>` element around an `<input>`
+and it will gauge its content strength as a password. It will also
+let you **securely verify** that the password hasn't been breached.
+
+```js
+const { xinLocalized, localize } = xinjsui
+
+const toggle = preview.querySelector('.toggle')
+const icon = preview.querySelector('xin-icon')
+const input = preview.querySelector('input')
+const breach = preview.querySelector('.breach')
+const output = preview.querySelector('.output')
+const passwordStrength = preview.querySelector('xin-password-strength')
+
+// Localization Example
+passwordStrength.append(xinLocalized({
+  refString: 'Yes',
+  localeChanged () {
+    this.parentElement.strengthDescriptions = [
+      'unacceptable',
+      'very weak',
+      'weak',
+      'moderate',
+      'strong',
+      'very strong',
+    ].map(localize)
+    this.parentElement.queueRender()
+  }
+}))
+
+toggle.addEventListener('click', () => {
+  if (icon.icon === 'eye') {
+    input.type = 'text'
+    icon.icon = 'eyeOff'
+  } else {
+    input.type = 'password'
+    icon.icon = 'eye'
+  }
+})
+
+breach.addEventListener('click', async () => {
+  preview.querySelector('xin-password-strength').isBreached().then(isBreached => {
+    output.textContent =
+      isBreached
+      ? 'This password has been breached, look at console for details'
+      : 'Seems OK'
+    output.classList.toggle('breached', isBreached)
+  })
+})
+```
+```html
+<xin-password-strength>
+  <input class="password" type="password">
+  <button class="toggle">
+    <xin-icon icon="eye"></xin-icon>
+  </button>
+</xin-password-strength>
+
+<br><br>
+<button class="breach">
+  <xin-localized>Check if breached</xin-localized>
+</button>
+<div class="output"></div>
+```
+```css
+input.password {
+  box-shadow: inset 0 0 0 2px var(--indicator-color);
+}
+
+.breached {
+  color: white;
+  background: red;
+}
+```
+
+## Algorithm
+
+The password is assessed to have a strength based on:
+
+- **length** one point for at least `goodLength` characters long.
+- **[a-z]** one point for containing a lowercase letter
+- **[A-Z]** one point for containing an uppercase letter
+- **[0-9]** one point for containing a numeric character
+- **^[a-zA-Z0-9]]** one point for containing some other kind of character
+
+A password smaller than `minLength` is an automatic `0`.
+
+## Attributes
+
+- `minLength` defaults to `8`
+- `goodLength` defaults to `12`
+- `indicatorColors` six HTML colors, separated by commas, defaults to `'#f00,#f40,#f80,#ef0,#8f0,#0d4'`
+- `descriptionColors` six HTML colors, sepeated by commans, defaults to `'#000,#000,#000,#000,#000,#fff'`
+
+## Properties
+
+- `value`, `strength` is a number from 0 to 5
+- `issues` is a structure which you can use to generate feedback
+
+```
+<xin-password-strength>.issues = {
+  tooShort: boolean,
+  short: boolean,
+  noUpper: boolean,
+  noLower: boolean,
+  noNumber: boolean,
+  noSpecial: boolean,
+}
+```
+
+## Customizing / Localizing Strings
+
+The following properties control the feedback generated.
+
+```
+issueDescriptions = {
+  tooShort: 'too short',
+  short: 'short',
+  noUpper: 'no upper case',
+  noLower: 'no lower case',
+  noNumber: 'no digits',
+  noSpecial: 'no unusual characters',
+}
+```
+
+```
+strengthDescriptions = [
+  'unacceptable',
+  'very weak',
+  'weak',
+  'moderate',
+  'strong',
+  'very strong',
+]
+```
+
+## `isBreached()`
+
+`<xin-password-meter>` also provides an `isBreached(): Promise<boolean>` method
+which uses [weakpass.com's API](https://weakpass.com/) to tell you if the password has been
+breached.
+
+> Note that `isBreached` does not send the plain-text password anywhere. It uses **SHA-1**
+to hash the password and then sends that for lookup.
+
+## Utility Functions
+
+Two functions used internally for querying [Weakpass,com](https://weakpass.com/) are
+provided in case they're useful on their own.
+
+`isBreached(password: striing): Promise<boolean>` will return `true` if the password is
+found in Weakpass's database (and spit out extra info to the console).
+
+`digest(s: string, method="sha-1"): Promise<string>` is just a nice wrapper for `crypto.digest`.
+*/
+import { Component, elements, vars, varDefault } from 'xinjs';
+export const digest = async (s, method = 'SHA-1') => {
+    // Convert password to an ArrayBuffer
+    const encoder = new TextEncoder();
+    const data = encoder.encode(s);
+    // Hash the password using SHA-1
+    const hashBuffer = await crypto.subtle.digest(method, data);
+    // Convert the hash to a hexadecimal string
+    const hashArray = Array.from(new Uint8Array(hashBuffer));
+    const hashHex = hashArray.map((b) => b.toString(16).padStart(2, '0')).join('');
+    return hashHex;
+};
+export const isBreached = async (password) => {
+    const hashHex = await digest(password);
+    const response = await fetch(`https://weakpass.com/api/v1/search/${hashHex}`);
+    if (response.ok) {
+        const result = await response.json();
+        console.log('password found in weakpass database', result);
+    }
+    return response.status !== 404;
+};
+const { span, xinSlot } = elements;
+export class XinPasswordStrength extends Component {
+    minLength = 8;
+    goodLength = 12;
+    indicatorColors = '#f00,#f40,#f80,#ef0,#8f0,#0a2';
+    descriptionColors = '#000,#000,#000,#000,#000,#fff';
+    issues = {
+        tooShort: true,
+        short: true,
+        noUpper: true,
+        noLower: true,
+        noNumber: true,
+        noSpecial: true,
+    };
+    issueDescriptions = {
+        tooShort: 'too short',
+        short: 'short',
+        noUpper: 'no upper case',
+        noLower: 'no lower case',
+        noNumber: 'no digits',
+        noSpecial: 'no unusual characters',
+    };
+    value = 0;
+    strengthDescriptions = [
+        'unacceptable',
+        'very weak',
+        'weak',
+        'moderate',
+        'strong',
+        'very strong',
+    ];
+    constructor() {
+        super();
+        this.initAttributes('minLength', 'goodLength', 'indicatorColors');
+    }
+    strength(password) {
+        this.issues = {
+            tooShort: password.length < this.minLength,
+            short: password.length < this.goodLength,
+            noUpper: !password.match(/[A-Z]/),
+            noLower: !password.match(/[a-z]/),
+            noNumber: !password.match(/[0-9]/),
+            noSpecial: !password.match(/[^a-zA-Z0-9]/),
+        };
+        return this.issues.tooShort
+            ? 0
+            : Object.values(this.issues).filter((v) => !v).length - 1;
+    }
+    async isBreached() {
+        const password = this.querySelector('input')?.value;
+        if (!password || typeof password !== 'string') {
+            return true;
+        }
+        return await isBreached(password);
+    }
+    updateIndicator = (password) => {
+        const { level, description } = this.parts;
+        const colors = this.indicatorColors.split(',');
+        const descriptionColors = this.descriptionColors.split(',');
+        const strength = this.strength(password);
+        if (this.value !== strength) {
+            this.value = strength;
+            this.dispatchEvent(new Event('change'));
+        }
+        level.style.width = `${(strength + 1) * 16.67}%`;
+        this.style.setProperty('--indicator-color', colors[strength]);
+        this.style.setProperty('--description-color', descriptionColors[strength]);
+        description.textContent = this.strengthDescriptions[strength];
+    };
+    update = (event) => {
+        const input = event.target.closest('input');
+        this.updateIndicator(input?.value || '');
+    };
+    content = () => [
+        xinSlot({ onInput: this.update }),
+        span({ part: 'meter' }, span({ part: 'level' }), span({ part: 'description' })),
+    ];
+    render() {
+        super.render();
+        const input = this.querySelector('input');
+        this.updateIndicator(input?.value);
+    }
+}
+export const xinPasswordStrength = XinPasswordStrength.elementCreator({
+    tag: 'xin-password-strength',
+    styleSpec: {
+        ':host': {
+            display: 'inline-flex',
+            flexDirection: 'column',
+            gap: vars.spacing50,
+            position: 'relative',
+        },
+        ':host xin-slot': {
+            display: 'flex',
+        },
+        ':host [part="meter"]': {
+            display: 'block',
+            position: 'relative',
+            height: varDefault.meterHeight('24px'),
+            background: varDefault.indicatorBg('white'),
+            borderRadius: varDefault.meterRadius('4px'),
+            boxShadow: varDefault.meterShadow(`inset 0 0 0 2px ${vars.indicatorColor}`),
+        },
+        ':host [part="level"]': {
+            height: varDefault.levelHeight('20px'),
+            content: '" "',
+            display: 'inline-block',
+            width: 0,
+            transition: '0.15s ease-out',
+            background: vars.indicatorColor,
+            margin: varDefault.levelMargin('2px'),
+            borderRadius: varDefault.levelRadius('2px'),
+        },
+        ':host [part="description"]': {
+            position: 'absolute',
+            inset: '0',
+            color: vars.descriptionColor,
+            height: varDefault.meterHeight('24px'),
+            lineHeight: varDefault.meterHeight('24px'),
+            textAlign: 'center',
+        },
+    },
+});

package/dist/playwright.config.d.ts

@@ -0,0 +1,9 @@
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+declare const _default: import("@playwright/test").PlaywrightTestConfig<{}, {}>;
+export default _default;