fullstacked 0.12.1-1330 → 0.12.1-1355

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

@@ -1,53 +0,0 @@
-import { Button } from "../../ui";
-export type InputOpts = {
-    label: string;
-    clear: boolean;
-};
-
-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 inputContainer = document.createElement("div");
-    inputContainer.classList.add("input-container");
-
-    const input = document.createElement("input");
-    input.autocapitalize = "off";
-
-    inputContainer.append(input);
-
-    if (opts?.clear) {
-        const buttonContainer = document.createElement("div");
-        buttonContainer.classList.add("button-container");
-        const clearButton = Button({
-            style: "icon-small",
-            iconRight: "Close",
-        });
-        clearButton.type = "button";
-        clearButton.onclick = (e) => {
-            input.value = "";
-            buttonContainer.classList.remove("show");
-            input.dispatchEvent(new KeyboardEvent("keyup"));
-        };
-        buttonContainer.append(clearButton);
-        inputContainer.append(buttonContainer);
-        input.addEventListener("keyup", () => {
-            if (input.value) {
-                buttonContainer.classList.add("show");
-            } else {
-                buttonContainer.classList.remove("show");
-            }
-        });
-    }
-
-    container.append(inputContainer);
-
-    return {
-        container,
-        input,
-    };
-}

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

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

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

@@ -1,35 +0,0 @@
-/* 
-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

@@ -1,23 +0,0 @@
-/* 
-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

@@ -1,97 +0,0 @@
-/* 
-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

@@ -1,41 +0,0 @@
-/* 
-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

@@ -1,13 +0,0 @@
-/* 
-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

@@ -1,30 +0,0 @@
-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

@@ -1,15 +0,0 @@
-@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

@@ -1,18 +0,0 @@
-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

@@ -1,7 +0,0 @@
-$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

@@ -1,26 +0,0 @@
-/* 
-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

@@ -1,10 +0,0 @@
-/* 
-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

@@ -1,23 +0,0 @@
-/* 
-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/index.ts

@@ -1,3 +0,0 @@
-import * as esbuild from "./esbuild";
-export default esbuild;
-export * from "./esbuild";

package/fullstacked_modules/esbuild/sass.ts

@@ -1,100 +0,0 @@
-import * as sass from "sass";
-import type { Message } from "esbuild";
-import { Project } from "../../editor/types";
-
-export async function buildSASS(
-    fs: {
-        mkdir(dir: string): Promise<boolean>;
-        writeFile(path: string, data: string): Promise<boolean>;
-        readdir(dir: string): Promise<string[]>;
-        readFile(path: string, options: any): Promise<string>;
-    },
-    project?: Project
-): Promise<Partial<Message>> {
-    const baseDirectory = project?.id || ".";
-
-    const writeOutputCSS = async (css: string) => {
-        const buildDirectory = baseDirectory
-            ? `${baseDirectory}/.build`
-            : ".build";
-        await fs.mkdir(buildDirectory);
-        await fs.writeFile(buildDirectory + "/index.css", css);
-    };
-
-    const contents = await fs.readdir(baseDirectory);
-    const entryPointSASS = contents.find(
-        (item) => item === "index.sass" || item === "index.scss"
-    );
-
-    // check for css file and write to output
-    // esbuild will pick it up and merge with css in js
-    if (!entryPointSASS) {
-        const entryPointCSS = contents.find((item) => item === "index.css");
-        if (entryPointCSS) {
-            const filePath = baseDirectory
-                ? `${baseDirectory}/${entryPointCSS}`
-                : entryPointCSS;
-            // TODO: fs.copyFile
-            await writeOutputCSS(
-                await fs.readFile(filePath, {
-                    encoding: "utf8"
-                })
-            );
-        } else {
-            await writeOutputCSS("");
-        }
-
-        return;
-    }
-
-    const filePath = baseDirectory
-        ? `${baseDirectory}/${entryPointSASS}`
-        : entryPointSASS;
-    const entryData = await fs.readFile(filePath, {
-        encoding: "utf8"
-    });
-    let result: sass.CompileResult;
-    try {
-        result = await sass.compileStringAsync(entryData, {
-            importer: {
-                load: async (url) => {
-                    const filePath = `${baseDirectory}${url.pathname}`;
-                    const contents = await fs.readFile(filePath, {
-                        encoding: "utf8"
-                    });
-                    return {
-                        syntax: filePath.endsWith(".sass")
-                            ? "indented"
-                            : filePath.endsWith(".scss")
-                              ? "scss"
-                              : "css",
-                        contents
-                    };
-                },
-                canonicalize: (path) => new URL(path, "http://localhost")
-            }
-        });
-    } catch (e) {
-        const error = e as unknown as sass.Exception;
-        const file =
-            baseDirectory + (error.span.url?.pathname || "/" + entryPointSASS);
-        const line = error.span.start.line + 1;
-        const column = error.span.start.column;
-        const length = error.span.text.length;
-        return {
-            text: error.message,
-            location: {
-                file,
-                line,
-                column,
-                length,
-                namespace: "SASS",
-                lineText: error.message,
-                suggestion: ""
-            }
-        };
-    }
-
-    await writeOutputCSS(result.css);
-    return null;
-}