fullstacked 0.12.0-1200 → 0.12.0-1203

package/fullstacked_modules/@fullstacked/ui/inputs/select/index.ts

@@ -0,0 +1,125 @@
+import { startObserverInterval } from "../observer";
+import { Icon } from "../../ui";
+
+export type InputSelectOpts = {
+    label: string;
+    placeholder: string;
+};
+
+export type InputSelectOption = {
+    name: string;
+    id?: string;
+    selected?: boolean;
+    disabled?: boolean;
+};
+
+export function InputSelect(opts: Partial<InputSelectOpts>) {
+    startObserverInterval();
+
+    const container = document.createElement("div");
+    container.classList.add("input-select");
+
+    if (opts.label) {
+        container.innerHTML = `<label>${opts.label}</label>`;
+    }
+
+    const selectAndIconContainer = document.createElement("div");
+    selectAndIconContainer.classList.add("select-container");
+    const select = document.createElement("select");
+    const icon = document.createElement("div");
+    icon.append(Icon("Arrow"));
+    selectAndIconContainer.append(select, icon);
+    container.append(selectAndIconContainer);
+
+    const placeholderOption = document.createElement("option");
+    placeholderOption.selected = true;
+    placeholderOption.innerText = opts.placeholder || "Choose an option";
+    select.append(placeholderOption);
+
+    select.classList.add("invalid");
+
+    const selectOptions: InputSelectOption[] = [];
+
+    const addOptions = (option: InputSelectOption) => {
+        selectOptions.push(option);
+        const el = document.createElement("option");
+        el.innerText = option.name;
+        el.disabled = option.disabled;
+        if (!el.disabled) {
+            el.value = selectOptions.length.toString();
+        }
+        el.selected = option.selected;
+        select.append(el);
+    };
+
+    const disablePlaceholder = () => {
+        placeholderOption.disabled = true;
+    };
+
+    select.onfocus = disablePlaceholder;
+    select.ontouchstart = disablePlaceholder;
+    select.onclick = disablePlaceholder;
+    select.onblur = () => {
+        placeholderOption.disabled = false;
+    };
+
+    const indexOfIdOrName = (idOrName: string) => {
+        return selectOptions.findIndex((item) => {
+            if (item.id) {
+                return item.id === idOrName;
+            }
+            return item.name === idOrName;
+        });
+    };
+
+    let selectAPI = {
+        get value() {
+            const index = select.selectedIndex - 1;
+            if (index === -1) {
+                return undefined;
+            }
+            const item = selectOptions.at(index);
+            return item.id || item.name;
+        },
+        set value(v: string) {
+            const indexOf = indexOfIdOrName(v);
+            if (indexOf === -1) return;
+            select.selectedIndex = indexOf + 1;
+        },
+        onchange: (item?: string, index?: number): any => {
+            return { item, index };
+        },
+    };
+
+    select.onchange = () => {
+        const index = select.selectedIndex - 1;
+        const item = selectOptions.at(index);
+        const value = item.id || item.name;
+        selectAPI.value = value;
+        selectAPI.onchange(value, index);
+    };
+
+    return {
+        container,
+        select: selectAPI,
+        options: {
+            get() {
+                return selectOptions;
+            },
+            add(...options: InputSelectOption[]) {
+                options.forEach(addOptions);
+            },
+            remove(nameOrId: string) {
+                const indexOf = indexOfIdOrName(nameOrId);
+                if (indexOf === -1) return;
+
+                const selectedIndex = select.selectedIndex - 1;
+                if (indexOf === selectedIndex) {
+                    select.selectedIndex = 0;
+                }
+
+                selectOptions.splice(indexOf, 1);
+            },
+        },
+    };
+}

package/fullstacked_modules/@fullstacked/ui/inputs/switch/index.ts

@@ -0,0 +1,37 @@
+import { startObserverInterval } from "../observer";
+import { InputOpts } from "../text";
+
+export function InputSwitch(opts?: Partial<InputOpts>) {
+    startObserverInterval();
+    
+    const container = document.createElement("div");
+    container.classList.add("input-switch");
+
+    if (opts?.label) {
+        container.innerHTML = `<label>${opts.label}</label>`;
+    }
+
+    const input = document.createElement("input");
+    input.type = "checkbox";
+
+    input.addEventListener("change", () => {
+        if (input.checked) container.classList.add("checked");
+        else container.classList.remove("checked");
+    });
+
+    container.append(input);
+
+    const overrideUI = document.createElement("div");
+
+    const switchEl = document.createElement("div");
+    switchEl.onclick = () => input.click();
+
+    switchEl.innerHTML = `<div></div>`;
+    overrideUI.append(switchEl);
+    container.append(overrideUI);
+
+    return {
+        input,
+        container
+    };
+}

package/fullstacked_modules/@fullstacked/ui/inputs/text/index.ts

@@ -0,0 +1,23 @@
+export type InputOpts = {
+    label: string;
+};
+
+export function InputText(opts?: Partial<InputOpts>) {
+    const container = document.createElement("div");
+    container.classList.add("input-text");
+
+    if (opts?.label) {
+        container.innerHTML = `<label>${opts.label}</label>`;
+    }
+
+    const input = document.createElement("input");
+    input.autocapitalize = "off";
+
+    container.append(input);
+
+    return {
+        container,
+        input
+    };
+}
+

package/fullstacked_modules/@fullstacked/ui/package.json

@@ -0,0 +1,8 @@
+{
+    "devDependencies": {
+        "eruda": "^3.4.1"
+    },
+    "main": "./ui.ts",
+    "name": "@fullstacked/ui",
+    "version": "0.0.1"
+}

package/fullstacked_modules/@fullstacked/ui/primitives/badge/badge.scss

@@ -0,0 +1,35 @@
+/* 
+This file must follow the figma design
+https://www.figma.com/design/xb3JBRCvEWpbwGda03T5QQ/Mockups?node-id=101-1212
+*/
+@use "../../values/colors.scss";
+@use "../../values/spacing.scss";
+@use "../../values/typography.scss";
+
+.badge {
+    color: colors.$light;
+    background-color: colors.opacity(colors.$gray, 50);
+    border-radius: spacing.$x-small;
+    padding: spacing.$x-small spacing.$small;
+    font-family: typography.$fonts;
+    
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+
+    &.success {
+        background-color: colors.opacity(colors.$green, 50);
+    }
+    &.warning {
+        background-color: colors.opacity(colors.$yellow, 50);
+    }
+    &.error {
+        background-color: colors.opacity(colors.$red, 50);
+    }
+    &.info {
+        background-color: colors.opacity(colors.$blue-accent, 50);
+    }
+    &.info-2 {
+        background-color: colors.opacity(colors.$blue, 50);
+    }
+}

package/fullstacked_modules/@fullstacked/ui/primitives/badge/index.ts

@@ -0,0 +1,23 @@
+/* 
+This file must follow the figma design
+https://www.figma.com/design/xb3JBRCvEWpbwGda03T5QQ/Mockups?node-id=101-1212
+*/
+
+type BadgeOpts = {
+    text: string;
+    type: "success" | "warning" | "error" | "info" | "info-2";
+};
+
+export function Badge(opts?: Partial<BadgeOpts>) {
+    const container = document.createElement("label");
+    container.classList.add("badge");
+
+    if (opts?.type) {
+        container.classList.add(opts.type);
+    }
+
+    container.innerText = opts?.text || "";
+
+    return container;
+}
+

package/fullstacked_modules/@fullstacked/ui/primitives/button/button.scss

@@ -0,0 +1,97 @@
+/* 
+This file must follow the figma design
+https://www.figma.com/design/xb3JBRCvEWpbwGda03T5QQ/Mockups?node-id=6-67
+*/
+@use "sass:color";
+@use "../../values/typography.scss";
+@use "../../values/colors.scss";
+@use "../../values/spacing.scss";
+
+button {
+    font-weight: bold;
+    font-size: typography.$medium;
+    font-family: typography.$fonts;
+
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    gap: spacing.$x-small;
+
+    padding: 7px spacing.$small;
+    border-radius: spacing.$x-small;
+    background-color: colors.$blue;
+    color: colors.$light;
+    border: 0;
+
+    cursor: pointer;
+
+    .icon {
+        height: 20px;
+        width: 20px;
+    }
+
+    &:active {
+        background-color: color.scale(colors.$blue, $lightness: -30%);
+    }
+
+    &.red {
+        background-color: colors.$red;
+
+        &:active {
+            background-color: color.scale(colors.$red, $lightness: -30%);
+        }
+    }
+
+    &:disabled {
+        background-color: colors.$gray;
+        color: colors.opacity(colors.$light, 70);
+        cursor: default;
+    }
+
+    &.text,
+    &.icon-small,
+    &.icon-large {
+        background-color: transparent;
+        color: colors.$blue;
+
+        &:active {
+            background-color: colors.$gray-dark;
+        }
+
+        &:disabled {
+            color: colors.$gray;
+            background-color: transparent;
+        }
+        &.red {
+            color: colors.$red;
+        }
+    }
+
+    &.icon-small,
+    &.icon-large {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+    }
+
+    &.icon-small {
+        height: 24px;
+        width: 24px;
+
+        .icon {
+            height: 20px;
+            width: 20px;
+        }
+    }
+
+    &.icon-large {
+        height: 38px;
+        width: 38px;
+
+        .icon {
+            height: 30px;
+            width: 30px;
+        }
+    }
+}

package/fullstacked_modules/@fullstacked/ui/primitives/button/index.ts

@@ -0,0 +1,41 @@
+/* 
+This file must follow the figma design
+https://www.figma.com/design/xb3JBRCvEWpbwGda03T5QQ/Mockups?node-id=6-67
+*/
+
+import { Icon } from "../icon";
+
+type ButtonOpts = {
+    iconLeft: string;
+    iconRight: string;
+    text: string;
+    style: "default" | "text" | "icon-small" | "icon-large";
+    color: "red";
+};
+
+export function Button(opts?: Partial<ButtonOpts>) {
+    const button = document.createElement("button");
+
+    if (!opts?.style?.startsWith("icon")) {
+        button.innerText = opts?.text || "";
+    }
+
+    if (opts?.style && opts?.style !== "default") {
+        button.classList.add(opts.style);
+    }
+
+    if (opts?.color) {
+        button.classList.add(opts.color);
+    }
+
+    if (opts?.iconLeft) {
+        button.prepend(Icon(opts.iconLeft));
+    }
+
+    if (opts?.iconRight) {
+        button.append(Icon(opts.iconRight));
+    }
+
+    return button;
+}
+

package/fullstacked_modules/@fullstacked/ui/primitives/icon/icon.scss

@@ -0,0 +1,13 @@
+/* 
+This file must follow the figma design
+https://www.figma.com/design/xb3JBRCvEWpbwGda03T5QQ/Mockups?node-id=6-68
+*/
+.icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    svg {
+        height: 100%;
+        width: 100%;
+    }
+}

package/fullstacked_modules/@fullstacked/ui/primitives/icon/index.ts

@@ -0,0 +1,30 @@
+let iconsDirectory: string = "/node_modules/@fullstacked/ui/icons";
+
+export function setIconsDirectory(directory: string) {
+    iconsDirectory = directory;
+}
+
+export function Icon(name: string) {
+    const container = document.createElement("div");
+    container.classList.add("icon");
+    loadIcon(name).then((svgData) => (container.innerHTML = svgData));
+    return container;
+}
+
+const iconCache = new Map<string, Promise<string>>();
+function loadIcon(name: string) {
+    let icon = iconCache.get(name);
+
+    if (!icon) {
+        icon = fetchIcon(name);
+        iconCache.set(name, icon);
+    }
+
+    return icon;
+}
+
+async function fetchIcon(name: string) {
+    const response = await fetch(`${iconsDirectory}/${name}.svg`);
+    return response.text();
+}
+

package/fullstacked_modules/@fullstacked/ui/ui.scss

@@ -0,0 +1,15 @@
+@use "./globals.scss";
+
+@use "./primitives/icon/icon.scss";
+@use "./primitives/button/button.scss";
+@use "./primitives/badge/badge.scss";
+
+@use "./inputs/inputs.scss";
+
+@use "./components/button-group/button-group.scss";
+@use "./components/dialog/dialog.scss";
+@use "./components/loader/loader.scss";
+@use "./components/message/message.scss";
+@use "./components/popover/popover.scss";
+@use "./components/list-item/list-item.scss";
+

package/fullstacked_modules/@fullstacked/ui/ui.ts

@@ -0,0 +1,18 @@
+export { Icon, setIconsDirectory } from "./primitives/icon";
+export { Button } from "./primitives/button";
+export { Badge } from "./primitives/badge";
+
+export { InputText } from "./inputs/text";
+export { InputFile } from "./inputs/file";
+export { InputSwitch } from "./inputs/switch";
+export { InputCheckbox } from "./inputs/checkbox";
+export { InputRadio } from "./inputs/radio";
+export { InputPredictive } from "./inputs/predictive";
+export { InputSelect } from "./inputs/select";
+
+export { ButtonGroup } from "./components/button-group";
+export { Dialog } from "./components/dialog";
+export { Loader } from "./components/loader";
+export { Message } from "./components/message";
+export { Popover } from "./components/popover";
+export { ListItem } from "./components/list-item";

package/fullstacked_modules/@fullstacked/ui/values/breakpoints.scss

@@ -0,0 +1,7 @@
+$x-small: 350px;
+$small: 450px;
+$small-med: 575px;
+$medium: 750px;
+$large: 1000px;
+$x-large: 1400px;
+$xx-large: 2000px;

package/fullstacked_modules/@fullstacked/ui/values/colors.scss

@@ -0,0 +1,26 @@
+/* 
+This file must follow the figma local color styles
+https://www.figma.com/design/xb3JBRCvEWpbwGda03T5QQ/Mockups
+*/
+@use "sass:color";
+
+$blue-accent: #04b8ec;
+$blue: #007aff;
+$blue-dark: #1e293b;
+$dark: #15171b;
+$red: #ff453a;
+$green: #30d158;
+$yellow: #ffcc00;
+$light: #ffffff;
+$gray: #8c929b;
+$gray-dark: #404958;
+$overlay: #15171b99;
+
+@function opacity($color, $opacity) {
+    @return rgba(
+        color.channel($color, "red", $space: rgb),
+        color.channel($color, "green", $space: rgb),
+        color.channel($color, "blue", $space: rgb),
+        calc($opacity / 100)
+    );
+}

package/fullstacked_modules/@fullstacked/ui/values/spacing.scss

@@ -0,0 +1,10 @@
+/* 
+This file must follow the figma defined spacing components
+https://www.figma.com/design/xb3JBRCvEWpbwGda03T5QQ/Mockups?node-id=6-49
+*/
+$x-small: 5px;
+$small: 10px;
+$medium: 20px;
+$large: 30px;
+
+$max-width: 500px;

package/fullstacked_modules/@fullstacked/ui/values/typography.scss

@@ -0,0 +1,23 @@
+/* 
+This file must follow the figma local text styles
+https://www.figma.com/design/xb3JBRCvEWpbwGda03T5QQ/Mockups
+*/
+$heading-1: 36px;
+$heading-2: 30px;
+$heading-3: 24px;
+$medium: 16px;
+$small: 12px;
+$x-small: 9px;
+
+$fonts:
+    system-ui,
+    -apple-system,
+    BlinkMacSystemFont,
+    "Segoe UI",
+    Roboto,
+    Oxygen,
+    Ubuntu,
+    Cantarell,
+    "Open Sans",
+    "Helvetica Neue",
+    sans-serif;

package/fullstacked_modules/esbuild/sass.ts

@@ -18,7 +18,6 @@ export async function buildSASS(
             ? `${baseDirectory}/.build`
             : ".build";
         await fs.mkdir(buildDirectory);
-        console.log(buildDirectory + "/index.css", css);
         await fs.writeFile(buildDirectory + "/index.css", css);
     };
 
@@ -27,8 +26,6 @@ export async function buildSASS(
         (item) => item === "index.sass" || item === "index.scss"
     );
 
-    console.log(entryPointSASS);
-
     // check for css file and write to output
     // esbuild will pick it up and merge with css in js
     if (!entryPointSASS) {

package/fullstacked_modules/fs/fs.ts

@@ -50,19 +50,32 @@ export type FileInfo = {
 // 5
 export function readdir(
     path: string,
-    options?: { recursive?: boolean; withFileTypes?: false, filesOnly?: boolean }
+    options?: {
+        recursive?: boolean;
+        withFileTypes?: false;
+        filesOnly?: boolean;
+    }
 ): Promise<string[]>;
 export function readdir(
     path: string,
-    options?: { recursive?: boolean; withFileTypes: true, filesOnly?: boolean }
+    options?: { recursive?: boolean; withFileTypes: true; filesOnly?: boolean }
 ): Promise<FileInfo[]>;
 export function readdir(
     path: string,
-    options?: { recursive?: boolean; withFileTypes?: boolean, filesOnly?: boolean }
+    options?: {
+        recursive?: boolean;
+        withFileTypes?: boolean;
+        filesOnly?: boolean;
+    }
 ) {
     const payload = new Uint8Array([
         5,
-        ...serializeArgs([path, !!options?.recursive, !!options?.withFileTypes, !!options?.filesOnly])
+        ...serializeArgs([
+            path,
+            !!options?.recursive,
+            !!options?.withFileTypes,
+            !!options?.filesOnly
+        ])
     ]);
 
     const transformer = (items: string[] | (string | boolean)[]) => {