@esportsplus/ui 0.0.4 → 0.0.7

package/index.scss

@@ -1 +1 @@
-@forward 'lib';
+@forward 'lib';

package/package.json

@@ -1,6 +1,9 @@
 {
     "author": "ICJR",
     "dependencies": {
+        "@esportsplus/action": "^0.0.30",
+        "@esportsplus/reactivity": "^0.0.18",
+        "@esportsplus/template": "^0.0.11",
         "autoprefixer": "^10.4.8",
         "clean-webpack-plugin": "^4.0.0",
         "css-loader": "^6.7.1",
@@ -19,7 +22,18 @@
         "webpack-cli": "^4.10.0"
     },
     "description": "UI",
+    "devDependencies": {
+        "tsc-alias": "^1.8.2",
+        "typescript": "^4.9.4"
+    },
+    "main": "./build/index.js",
     "name": "@esportsplus/ui",
     "private": false,
-    "version": "0.0.4"
+    "scripts": {
+        "build": "tsc && tsc-alias",
+        "-": "-",
+        "prepare": "npm run build",
+        "prepublishOnly": "npm run build"
+    },
+    "version": "0.0.7"
 }

package/src/components/alert/index.ts

@@ -0,0 +1,186 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+
+
+type Type = 'error' | 'info' | 'success';
+
+
+let modifiers: Record<Type, string> = {
+        error: 'red',
+        info: 'black',
+        success: 'green'
+    },
+    state = reactive({
+        active: false,
+        messages: new Set as Set<string>,
+        processing: false,
+        seconds: 0,
+        state: 'activating',
+        type: '' as Type
+    }),
+    timeout = 250;
+
+
+function activate(key: Type, messages: string | string[], seconds: number = 0) {
+    if (!Array.isArray(messages)) {
+        messages = [messages];
+    }
+
+    if (!messages.length) {
+        return;
+    }
+
+    state.messages.clear();
+
+    for (let message of messages) {
+        state.messages.add(message);
+    }
+
+    state.state = 'activating';
+    state.type = key;
+
+    // Slide in animation needs time
+    if (state.active) {
+        state.active = true;
+        state.processing = false;
+
+        if (seconds) {
+            if (!state.seconds) {
+                state.seconds = seconds;
+            }
+
+            setTimeout(() => {
+                if (messages && messages.length < (state?.messages?.size || 0)) {
+                    for (let message of messages) {
+                        state.messages.delete(message);
+                    }
+
+                    state.messages = state.messages;
+                }
+                else {
+                    deactivate();
+                }
+            }, 400 * seconds);
+        }
+        else {
+            state.seconds = 0;
+        }
+        return;
+    }
+
+    setTimeout(() => {
+        state.active = true;
+        state.processing = false;
+
+        if (seconds) {
+            if (!state.seconds) {
+                state.seconds = seconds;
+            }
+
+            setTimeout(() => {
+                if (messages && messages.length < (state?.messages?.size || 0)) {
+                    for (let message of messages) {
+                        state.messages.delete(message);
+                    }
+
+                    state.messages = state.messages;
+                }
+                else {
+                    deactivate();
+                }
+            }, 400 * seconds);
+        }
+        else {
+            state.seconds = 0;
+        }
+    }, timeout);
+}
+
+function deactivate() {
+    state.state = 'deactivating';
+
+    setTimeout(() => {
+        state.active = false;
+        state.messages.clear();
+        state.processing = false;
+    }, timeout);
+}
+
+
+const error = (messages: string | string[], seconds: number = 0) => activate('error', messages, seconds);
+
+const info = (messages: string | string[], seconds: number = 0) => activate('info', messages, seconds);
+
+const processing = () => {
+    state.state = 'activating';
+    state.processing = true;
+
+    // Slide in animation needs time
+    setTimeout(() => {
+        state.active = true;
+    }, timeout);
+};
+
+const success = (messages: string | string[], seconds: number = 0) => activate('success', messages, seconds);
+
+
+const h = () => {
+    return () => state.active || state.processing ? html`
+        <div class='alert anchor anchor--ne ${() => state.active && '--active'} ${() => `alert--${state.state}`}'>
+            ${() => !state.processing ? html`
+                <div class="alert-close --flex-start --margin-right --margin-100" onclick='${deactivate}'>
+                    <div class='button --background-state ${() => `--background-${modifiers[state.type] || 'black'}`} --color-state --color-white --flex-center --padding-300'>
+                        <div class="icon --size-300">
+                            <svg width="16" height="16" viewBox="0 0 16 16">
+                                <path d="M3.527 14.948a.176.176 0 01-.248 0L1.051 12.72a.176.176 0 010-.248l11.42-11.419a.176.176 0 01.248 0l2.229 2.228a.174.174 0 010 .248L3.527 14.948z"/>
+                                <path d="M12.472 14.948c.068.068.18.068.248 0l2.229-2.229a.176.176 0 000-.248L3.528 1.052a.176.176 0 00-.248 0L1.052 3.28a.176.176 0 000 .248l11.42 11.42z"/>
+                            </svg>
+                        </div>
+                    </div>
+                </div>
+            ` : ''}
+
+            <div class="card --overflow-hidden" style='--background: var(--color-white-400)'>
+                <div class="alert-message ${() => !state.processing && '--active'} --flex-row --padding --padding-horizontal-500 --padding-vertical-400">
+                    <div class='--flex-row --flex-fill --flex-vertical'>
+                        <div class="--flex-fill --flex-column --padding-right --padding-400">
+                            <h5 class="page-title">
+                                ${() => state.type.charAt(0).toUpperCase() + state.type.slice(1)}
+                            </h5>
+                            ${() => state.type && [...state.messages].map((message) => html`
+                                <p class='--margin-top --margin-border-width-500'>${message}</p>
+                            `)}
+                        </div>
+
+                        ${() => !state.processing && state.seconds ? html`
+                            <svg class='alert-timer' style='--animation-duration: ${state.seconds}s;'>
+                                <circle class="alert-timer-bg" cx="50%" cy="50%" r="40%" style='--border-color: var(--color-grey-500);' />
+                                <circle class="alert-timer-meter" cx="50%" cy="50%" r="40%" style='--border-color: var(--color-black-300);' />
+                            </svg>
+                        ` : ''}
+                    </div>
+                </div>
+
+                <div class='alert-processing ${() => state.processing && '--active'} --flex-row --flex-vertical --padding --padding-500'>
+                    <div class="processing">
+                        <span class='processing-ring'></span>
+                    </div>
+                    <div class='text --flex-fill --margin-left --margin-300 --text-bold' style='--color: var(--color-text-500)'>
+                        Processing
+
+                        <div class='ellipsis'>
+                            <span class='ellipsis-dot --margin-left --margin-border-width'>.</span>
+                            <span class='ellipsis-dot --margin-left --margin-border-width'>.</span>
+                            <span class='ellipsis-dot --margin-left --margin-border-width'>.</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    ` : '';
+};
+
+const types = ['error', 'info', 'success'] as const;
+
+
+export default { deactivate, error, html: h, info, processing, success, types };

package/{components → src/components}/field/scss/field.scss

@@ -71,6 +71,31 @@
          }
      }
 
+     &-error {
+        animation: field-error 0.32s 1 linear;
+
+        @keyframes field-error {
+            0%  {
+                transform: translate(8px);
+            }
+            20% {
+                transform: translate(-8px);
+            }
+            40% {
+                transform: translate(4px);
+            }
+            60% {
+                transform: translate(-4px);
+            }
+            80% {
+                transform: translate(2px);
+            }
+            100% {
+                transform: translate(0px);
+            }
+        }
+     }
+
      &-mask {
          // Pseudo Element Box Shadow
          &::after {

package/src/components/form/action.ts

@@ -0,0 +1,76 @@
+import { response } from '@esportsplus/action';
+import { html } from '@esportsplus/template';
+import alert from '~/components/alert';
+import { Action, Reactive } from './types';
+
+
+function parse(input: Record<string, any>) {
+    let data: Record<string, any> = {};
+
+    for (let path in input) {
+        let bucket = data,
+            keys = path.indexOf('.') !== -1 ? path.split('.') : [path];
+
+        for (let i = 0; i < keys.length - 1; i++) {
+            bucket = bucket[keys[i]] = bucket[keys[i]] || {};
+        }
+
+        bucket[ keys[keys.length - 1] ] = input[path];
+    }
+
+    return data;
+};
+
+
+export default function(action: Action, reactive: Reactive = {}) {
+    return html({
+        onclick: function(this: HTMLFormElement, event: Event) {
+            let trigger = event.target as HTMLButtonElement;
+
+            if (trigger?.type !== 'submit') {
+                return;
+            }
+
+            // On initial page load both events will be dispatched without preventDefault
+            event.preventDefault();
+
+            this.dispatchEvent(
+                new SubmitEvent('submit', { cancelable: true, bubbles:true, submitter: trigger })
+            );
+        },
+        onsubmit: async function(this: HTMLFormElement, event: SubmitEvent) {
+            event.preventDefault();
+
+            let { errors } = await action({
+                    alert,
+                    input: parse( Object.fromEntries( new FormData( this )?.entries() ) ),
+                    processing: {
+                        end: (deactivate: boolean = true) => {
+                            if (deactivate) {
+                                alert.deactivate();
+                            }
+
+                            event?.submitter?.classList.remove('button--processing');
+                        },
+                        start: () => {
+                            alert.processing();
+                            event?.submitter?.classList.add('button--processing');
+                        }
+                    },
+                    response
+                });
+
+            if (errors && 'errors' in reactive) {
+                let messages: Record<string, string> = {};
+
+                for (let i = 0, n = errors.length; i < n; i++) {
+                    let { message, path } = errors[i];
+
+                    messages[path] = `${message[0].toUpperCase()}${message.substring(1)}`;
+                }
+
+                reactive.errors = messages;
+            }
+        }
+    });
+};

package/src/components/form/index.ts

@@ -0,0 +1,4 @@
+import action from './action';
+
+
+export default { action };

package/src/components/form/layout.ts

@@ -0,0 +1,32 @@
+import { html } from '@esportsplus/template';
+import { layout } from '~/components/page';
+
+
+type Data = {
+    action?: any;
+    button?: {
+        class?: string;
+        content?: any;
+        style?: string;
+    };
+    content?: any;
+    width?: string;
+};
+
+
+export default (data: Data & Parameters<typeof layout>[0]) => {
+    data.content = html`
+        <form class='--margin-top --margin-800' ${data?.action || ''}>
+            ${data?.content || ''}
+
+            ${data?.button ? html`
+                <button class="button ${data?.button?.class || ''}" style='${data?.button?.style || ''}'>
+                    ${data?.button?.content || ''}
+                </button>
+            ` : ''}
+        </form>
+    `;
+    data.width = data?.width || '480px';
+
+    return layout(data);
+};

package/src/components/form/types.ts

@@ -0,0 +1,24 @@
+import { response, Response } from '@esportsplus/action';
+import alert from '~/components/alert';
+
+
+type Action = (data: Payload) => Promise<Errors> | Errors;
+
+type Errors = { errors?: Response<unknown>['errors'] };
+
+type Payload = {
+    alert: typeof alert;
+    input: Record<string, any>;
+    response: typeof response;
+    processing: {
+        end: (deactivate: boolean) => void;
+        start: VoidFunction;
+    }
+};
+
+type Reactive = {
+    errors?: Record<string, string>;
+};
+
+
+export { Action, Errors, Payload, Reactive };

package/src/components/index.ts

@@ -0,0 +1,4 @@
+export { default as form }from './form';
+export { default as page }from './page';
+export { default as scrollbar }from './scrollbar';
+export { default as state }from './state';

package/src/components/page/index.ts

@@ -0,0 +1,5 @@
+import layout from './layout';
+
+
+export default { layout };
+export { layout };

package/src/components/page/layout.ts

@@ -0,0 +1,35 @@
+import { html } from '@esportsplus/template';
+
+
+type Data = {
+    content?: any;
+    subtitle?: string;
+    suptitle?: string;
+    title?: string;
+    width?: string;
+};
+
+
+export default ({ content, subtitle, suptitle, title, width }: Data) => html`
+    <div class="container --slide-in --margin-vertical --margin-900" style="${width && `--max-width: ${width};`}">
+        ${suptitle ? html`
+            <span class="page-suptitle --text-bold --text-crop --text-uppercase --text-200" style="--color-default: var(--color-primary-400);letter-spacing: 0.24px;">
+                ${suptitle}
+            </span>
+        ` : ''}
+
+        ${title ? html`
+            <h1 class="page-title --line-height-200 --margin-300 ${!subtitle && '--text-crop-bottom'} ${suptitle ? '--margin-top' : '--text-crop-top'}">
+                ${title}
+            </h1>
+        ` : ''}
+
+        ${subtitle ? html`
+            <span class="page-subtitle --margin-top --margin-300 --text-crop-bottom">
+                ${subtitle}
+            </span>
+        ` : ''}
+
+        ${content || ''}
+    </div>
+`;

package/src/components/scrollbar/index.ts

@@ -0,0 +1,44 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+
+
+let root = document.body,
+    width: number | undefined;
+
+
+export default ({ fixed, style }: { fixed?: boolean, style?: string } = {}) => {
+    let state = reactive({
+            height: 100,
+            translate: 0
+        });
+
+    return {
+        attributes: html({
+            class: () => {
+                return '--scrollbar';
+            },
+            onscroll: function(this: HTMLElement) {
+                if (width === undefined) {
+                    width = this.offsetWidth - this.clientWidth;
+
+                    if (width && width !== 17) {
+                        root.style.setProperty('--scrollbar-width', `${width}px`);
+                    }
+                }
+
+                state.height = (this.clientHeight / this.scrollHeight) * 100;
+                state.translate = (this.scrollTop / this.clientHeight) * 100;
+            }
+        }),
+        html: html`
+            <div
+                class='scrollbar ${fixed ? 'scrollbar--fixed' : ''} ${() => state.height >= 100 ? 'scrollbar--hidden' : ''}'
+                style='${() => `
+                    ${style || ''}
+                    --translate: translate3d(0, ${state.translate}%, 0);
+                    --height: ${state.height}%;
+                `}'
+            ></div>
+        `
+    };
+};

package/src/components/state/index.ts

@@ -0,0 +1,22 @@
+import { reactive } from '@esportsplus/reactivity';
+import { html } from '@esportsplus/template';
+
+
+const onfocus = (active: boolean = false) => {
+    let state = reactive({ active });
+
+    return html({
+        class: () => {
+            return state.active ? '--active' : '';
+        },
+        onfocusin: () => {
+            state.active = true;
+        },
+        onfocusout: () => {
+            state.active = false;
+        }
+    });
+};
+
+
+export default { onfocus };

package/src/index.ts

@@ -0,0 +1 @@
+export * from './components';

package/src/svg.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+    const content: any;
+    export default content;
+}

package/tokens.scss

@@ -0,0 +1 @@
+@forward 'src/tokens';

package/tsconfig.json

@@ -0,0 +1,24 @@
+{
+    "compilerOptions": {
+        "allowJs": true,
+        "alwaysStrict": true,
+        "baseUrl": "src",
+        "declaration": true,
+        "declarationDir": "./build",
+        "lib": ["dom", "dom.iterable", "esnext"],
+        "module": "esnext",
+        "moduleResolution": "nodenext",
+        "noUnusedLocals": true,
+        "noUnusedParameters": true,
+        "outDir": "./build",
+        "paths": {
+            "~/*": ["*"]
+        },
+        "removeComments": true,
+        "resolveJsonModule": true,
+        "strict": true,
+        "target": "esnext"
+    },
+    "exclude": ["node_modules"],
+    "include": ["src"]
+}