@turnipxenon/pineapple 2.4.13 → 2.4.15

package/dist/scripts/pineapple_fiber/PineappleFiberParser.js

@@ -0,0 +1,137 @@
+import { PortraitType } from "../../types/pineapple_fiber/PortraitType";
+const shouldDebug = false;
+export const parseYarn = async (fileContent) => {
+    const dialogDetailList = [];
+    fileContent.split("===").map((unparsedNode) => {
+        // todo: detect empty nodes
+        // todo: improve the code readability
+        if (unparsedNode.trim() === "") {
+            return;
+        }
+        const dialogDetails = {
+            // todo: dissect the line below and give comments because it is complex
+            dialogId: unparsedNode
+                .slice(unparsedNode.indexOf("title: "))
+                .split("\n")[0]
+                .split(" ")
+                .pop()
+                ?.trim(),
+            portraitType: PortraitType.AresNeutral,
+            textContent: "" // will be filled later below
+        };
+        let portraitUnset = true;
+        // parse the PineappleFiber metatags
+        const unparsedBody = unparsedNode.split("---").pop().trim();
+        const bodyList = unparsedBody.split("\n");
+        let contentIndexStart = 0;
+        for (let index = 0; index < bodyList.length; index++) {
+            const possibleTagPair = bodyList[index].split(": ");
+            const possibleTagName = possibleTagPair[0].toLowerCase();
+            if (!["portrait"].includes(possibleTagName)) {
+                break;
+            }
+            contentIndexStart = index + 1; // increase count for each viable tah
+            switch (possibleTagName) {
+                case "portrait":
+                    portraitUnset = false;
+                    // todo: implement a way to match the appropriate portrait based on the metatag
+                    // from https://stackoverflow.com/a/17381004/17836168
+                    dialogDetails.portraitType =
+                        PortraitType[possibleTagPair[1].trim()];
+                    if (shouldDebug) {
+                        console.log("Portrait detected:", possibleTagPair[1], " => ", dialogDetails.portraitType);
+                    }
+                    break;
+            }
+        }
+        // portrait check
+        if (portraitUnset) {
+            console.warn(`Portrait missing for node: ${dialogDetails.dialogId}`);
+            dialogDetails.portraitType = PortraitType.AresNeutral;
+        }
+        // remove the metatags from the body
+        const unprocessedContent = bodyList.slice(contentIndexStart).join("\n");
+        const contentPair = unprocessedContent.split("<ChoiceBreak>");
+        if (contentPair.length === 2) {
+            // parse for the choice names in the options
+            let ChoiceParsingState;
+            (function (ChoiceParsingState) {
+                ChoiceParsingState[ChoiceParsingState["Free"] = 0] = "Free";
+                ChoiceParsingState[ChoiceParsingState["Line"] = 1] = "Line"; // previously detected an option, will try to detect for the next option
+            })(ChoiceParsingState || (ChoiceParsingState = {}));
+            let parsingState = ChoiceParsingState.Free;
+            const currentChoiceDetail = { jumpNode: "", name: "" };
+            const choiceList = [];
+            let shouldSkipChoices = false;
+            const checkChoiceForSave = () => {
+                if (currentChoiceDetail.name !== "") {
+                    choiceList.push({
+                        name: currentChoiceDetail.name,
+                        jumpNode: currentChoiceDetail.jumpNode
+                    });
+                }
+            };
+            contentPair[1]
+                .trim()
+                .split("\n")
+                .filter((line) => {
+                const trimmedLine = line.trim();
+                if (shouldSkipChoices) {
+                    return false;
+                }
+                if (trimmedLine.startsWith("// ignore the rest")) {
+                    shouldSkipChoices = true;
+                    return false;
+                }
+                return true;
+            })
+                .map((line) => {
+                const trimmedLine = line.trim();
+                switch (parsingState) {
+                    case ChoiceParsingState.Free:
+                        if (trimmedLine.startsWith("->")) {
+                            // save previous choice
+                            checkChoiceForSave();
+                            // write start of new choice
+                            currentChoiceDetail.name = trimmedLine.split(" ").pop();
+                            parsingState = ChoiceParsingState.Line;
+                        }
+                        break;
+                    case ChoiceParsingState.Line:
+                        if (trimmedLine.startsWith("<<jump")) {
+                            const jumpNode = trimmedLine.split(" ").pop();
+                            currentChoiceDetail.jumpNode = jumpNode.slice(0, jumpNode.length - 2); // remove ">>"
+                            parsingState = ChoiceParsingState.Free;
+                        }
+                        break;
+                    default:
+                        console.error(`Unimplemented parsing state: ${parsingState}`);
+                        break;
+                }
+            });
+            checkChoiceForSave();
+            dialogDetails.textContent = contentPair[0];
+            // handle choice start tags to a href
+            choiceList.forEach((choiceDetail) => {
+                const keyword = `<choice ${choiceDetail.name}>`;
+                while (dialogDetails.textContent.includes(keyword)) {
+                    dialogDetails.textContent = dialogDetails.textContent.replace(keyword, `<a class="choice-${choiceDetail.jumpNode} dialog-choice" title="Click to continue the dialog">`);
+                }
+            });
+            const externalKeyword = "<a href=";
+            while (dialogDetails.textContent.includes(externalKeyword)) {
+                dialogDetails.textContent = dialogDetails.textContent.replace(externalKeyword, "<a target=\"_blank\" class=\"external-link\" href="); // make all external tags with a custom cursor
+            }
+            const choiceEndKeyword = "</choice>";
+            while (dialogDetails.textContent.includes(choiceEndKeyword)) {
+                dialogDetails.textContent = dialogDetails.textContent.replace(choiceEndKeyword, "</a>"); // convert all choice end tags to a tags
+            }
+        }
+        else {
+            // assume only one which indicates it is choiceless
+            dialogDetails.textContent = unprocessedContent;
+        }
+        dialogDetailList.push(dialogDetails);
+    });
+    return dialogDetailList;
+};

package/dist/scripts/pineapple_fiber/PineappleWeaver.js

@@ -9,147 +9,16 @@
 import { getAllFiles } from "../util/FileManagement";
 import fs, { readFileSync } from "fs";
 import { PortraitType } from "../../types/pineapple_fiber/PortraitType";
-const shouldDebug = false;
+import { parseYarn } from "./PineappleFiberParser";
 const pineappleWeaverRun = () => {
     console.info("Starting Pineapple Weaver.");
     const BASE_PATH = "./src/routes";
     getAllFiles(BASE_PATH, (path) => {
         return path.split(".").pop() === "yarn";
-    }).map((filePath) => {
+    }).map(async (filePath) => {
         console.info(`Converting: ${filePath}`);
         const fileContent = readFileSync(filePath, "utf-8");
-        const dialogDetailList = [];
-        fileContent.split("===").map((unparsedNode) => {
-            // todo: detect empty nodes
-            // todo: improve the code readability
-            if (unparsedNode.trim() === "") {
-                return;
-            }
-            const dialogDetails = {
-                // todo: dissect the line below and give comments because it is complex
-                dialogId: unparsedNode
-                    .slice(unparsedNode.indexOf("title: "))
-                    .split("\n")[0]
-                    .split(" ")
-                    .pop()
-                    ?.trim(),
-                portraitType: PortraitType.AresNeutral,
-                textContent: "" // will be filled later below
-            };
-            let portraitUnset = true;
-            // parse the PineappleFiber metatags
-            const unparsedBody = unparsedNode.split("---").pop().trim();
-            const bodyList = unparsedBody.split("\n");
-            let contentIndexStart = 0;
-            for (let index = 0; index < bodyList.length; index++) {
-                const possibleTagPair = bodyList[index].split(": ");
-                const possibleTagName = possibleTagPair[0].toLowerCase();
-                if (!["portrait"].includes(possibleTagName)) {
-                    break;
-                }
-                contentIndexStart = index + 1; // increase count for each viable tah
-                switch (possibleTagName) {
-                    case "portrait":
-                        portraitUnset = false;
-                        // todo: implement a way to match the appropriate portrait based on the metatag
-                        // from https://stackoverflow.com/a/17381004/17836168
-                        dialogDetails.portraitType =
-                            PortraitType[possibleTagPair[1].trim()];
-                        if (shouldDebug) {
-                            console.log("Portrait detected:", possibleTagPair[1], " => ", dialogDetails.portraitType);
-                        }
-                        break;
-                }
-            }
-            // portrait check
-            if (portraitUnset) {
-                console.warn(`Portrait missing for node: ${dialogDetails.dialogId}`);
-                dialogDetails.portraitType = PortraitType.AresNeutral;
-            }
-            // remove the metatags from the body
-            const unprocessedContent = bodyList.slice(contentIndexStart).join("\n");
-            const contentPair = unprocessedContent.split("<ChoiceBreak>");
-            if (contentPair.length === 2) {
-                // parse for the choice names in the options
-                let ChoiceParsingState;
-                (function (ChoiceParsingState) {
-                    ChoiceParsingState[ChoiceParsingState["Free"] = 0] = "Free";
-                    ChoiceParsingState[ChoiceParsingState["Line"] = 1] = "Line"; // previously detected an option, will try to detect for the next option
-                })(ChoiceParsingState || (ChoiceParsingState = {}));
-                let parsingState = ChoiceParsingState.Free;
-                const currentChoiceDetail = { jumpNode: "", name: "" };
-                const choiceList = [];
-                let shouldSkipChoices = false;
-                const checkChoiceForSave = () => {
-                    if (currentChoiceDetail.name !== "") {
-                        choiceList.push({
-                            name: currentChoiceDetail.name,
-                            jumpNode: currentChoiceDetail.jumpNode
-                        });
-                    }
-                };
-                contentPair[1]
-                    .trim()
-                    .split("\n")
-                    .filter((line) => {
-                    const trimmedLine = line.trim();
-                    if (shouldSkipChoices) {
-                        return false;
-                    }
-                    if (trimmedLine.startsWith("// ignore the rest")) {
-                        shouldSkipChoices = true;
-                        return false;
-                    }
-                    return true;
-                })
-                    .map((line) => {
-                    const trimmedLine = line.trim();
-                    switch (parsingState) {
-                        case ChoiceParsingState.Free:
-                            if (trimmedLine.startsWith("->")) {
-                                // save previous choice
-                                checkChoiceForSave();
-                                // write start of new choice
-                                currentChoiceDetail.name = trimmedLine.split(" ").pop();
-                                parsingState = ChoiceParsingState.Line;
-                            }
-                            break;
-                        case ChoiceParsingState.Line:
-                            if (trimmedLine.startsWith("<<jump")) {
-                                const jumpNode = trimmedLine.split(" ").pop();
-                                currentChoiceDetail.jumpNode = jumpNode.slice(0, jumpNode.length - 2); // remove ">>"
-                                parsingState = ChoiceParsingState.Free;
-                            }
-                            break;
-                        default:
-                            console.error(`Unimplemented parsing state: ${parsingState}`);
-                            break;
-                    }
-                });
-                checkChoiceForSave();
-                dialogDetails.textContent = contentPair[0];
-                // handle choice start tags to a href
-                choiceList.forEach((choiceDetail) => {
-                    const keyword = `<choice ${choiceDetail.name}>`;
-                    while (dialogDetails.textContent.includes(keyword)) {
-                        dialogDetails.textContent = dialogDetails.textContent.replace(keyword, `<a class="choice-${choiceDetail.jumpNode} dialog-choice" title="Click to continue the dialog">`);
-                    }
-                });
-                const externalKeyword = "<a href=";
-                while (dialogDetails.textContent.includes(externalKeyword)) {
-                    dialogDetails.textContent = dialogDetails.textContent.replace(externalKeyword, '<a target="_blank" class="external-link" href='); // make all external tags with a custom cursor
-                }
-                const choiceEndKeyword = "</choice>";
-                while (dialogDetails.textContent.includes(choiceEndKeyword)) {
-                    dialogDetails.textContent = dialogDetails.textContent.replace(choiceEndKeyword, "</a>"); // convert all choice end tags to a tags
-                }
-            }
-            else {
-                // assume only one which indicates it's choiceless
-                dialogDetails.textContent = unprocessedContent;
-            }
-            dialogDetailList.push(dialogDetails);
-        });
+        const dialogDetailList = await parseYarn(fileContent);
         const dialogDetailToString = (detail) => {
             if (detail.portraitType === undefined) {
                 detail.portraitType = PortraitType.AresNeutral;

package/dist/types/pineapple_fiber/DialogState.d.ts

@@ -1,5 +1,6 @@
 export declare enum DialogState {
     Invisible = 0,
     Visible = 1,
-    Busy = 2
+    Busy = 2,
+    Inherit = 3
 }

package/dist/types/pineapple_fiber/DialogState.js

@@ -3,4 +3,5 @@ export var DialogState;
     DialogState[DialogState["Invisible"] = 0] = "Invisible";
     DialogState[DialogState["Visible"] = 1] = "Visible";
     DialogState[DialogState["Busy"] = 2] = "Busy";
+    DialogState[DialogState["Inherit"] = 3] = "Inherit";
 })(DialogState || (DialogState = {}));

package/docs/OverlaySpec.md

@@ -0,0 +1,23 @@
+# Overlay Spec
+
+**What are the things that can appear on top of the normal content?**
+
+- Toast
+- Modal
+- Dialog
+  - Choices
+- Backstage
+  - Preferences
+  - Optional: Dialog??
+
+**Which one appears on top?**
+
+- Toast
+- Modal
+  - blocks access on anything below
+- Backstage
+  - blocks access on anything below
+- Dialog: choices
+  - blocks access on anything below
+- Dialog
+- Everything else

package/docs/pull_request_template.md

@@ -0,0 +1,34 @@
+## Which issues does this affect?
+
+- Closes #*PR number*
+
+## Overview
+
+*Insert brief description here*
+
+## Description
+
+*If there are more details or more things that needs to be talked about, put it here.*
+
+## Checks
+
+- [ ] If some of the checks below are deferred, link an issue for it under as a child
+
+### Accessibility
+
+- [ ] [Changes are keyboard accessible](https://accessibility.18f.gov/keyboard/)
+- [ ] [All form inputs have explicit labels](https://accessibility.18f.gov/forms/)
+- [ ] [Page content has a meaningful heading hierarchy](https://accessibility.18f.gov/headings/)
+- [ ] [All relevant images use an img tag and have alt attributes](https://accessibility.18f.gov/images/)
+- [ ] [Text has sufficient color contrast](https://accessibility.18f.gov/color/) (a contrast ratio of 4.5:1 with the
+  background)
+- [ ] [No red flags when running WAVE on the page](http://wave.webaim.org/)
+- [ ] The UI should also work in left-to-right direction
+
+For the full list, see [18F's Accessibility Checklist](https://accessibility.18f.gov/checklist/).
+
+
+<!--
+References:
+- https://github.com/ministryofjustice/accessibility-checklist/blob/master/README.md
+-->

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "2.4.13",
+  "version": "2.4.15",
   "scripts": {
     "dev": "vite dev",
     "build": "npm run check-requirements && vite build && yarn package",

package/src/lib/app.postcss

@@ -41,11 +41,11 @@ html, body {
 }
 
 /* todo: add some hues to the icon that should be in sync with primary and make them not pure darkness */
-.turnip-button > img {
+.turnip-button > img, .img-icon {
     filter: grayscale(100%) brightness(0%) invert(25%);
 }
 
-.dark .turnip-button > img {
+.dark .turnip-button > img, .dark .img-icon {
     filter: grayscale(100%) brightness(0%) invert(100%);
 }
 
@@ -92,7 +92,7 @@ ul {
 .default-page-container {
     @apply flex justify-center items-center;
     margin-top: 4em;
-    margin-left: clamp(1em, 15vw, 10em);
+    margin-left: 1em;
     margin-right: 1em;
     flex-direction: column;
     z-index: 0;
@@ -164,4 +164,44 @@ a:active {
 .accordion-item {
     @apply variant-filled-primary rounded-md;
 }
+
 /* endregion Accordion css for handling missing styles in package */
+
+:root {
+    --shadow-color: rgba(91, 79, 54, 0.5);
+}
+
+/* todo: adjust shadow for each component + change depending on dark mode or not */
+.fab, #shell-header {
+    box-shadow: 3px 3px 3px var(--shadow-color);
+}
+
+#toast-progress {
+    position: relative;
+    top: 5px;
+    left: 6px;
+    width: calc(100% - 12px);
+    border-radius: 8px;
+    background: transparent;
+    height: 10px;
+}
+
+#toast-progress::-moz-progress-bar {
+    /*background-color: red;*/
+    background: rgba(var(--color-secondary-500));
+}
+
+.dialog-box {
+    background-color: rgb(var(--color-surface-500) / 0.9);
+    position: fixed;
+    bottom: 0;
+    width: var(--dialog-box-width); /*75em + 4em padding*/
+    height: var(--dialog-box-height);
+    max-width: calc(100vw - ((var(--fab-margin) * 2) + 4em));
+}
+
+.dark .dialog-box {
+    background-color: rgb(var(--color-surface-900) / 0.95);
+    --tw-ring-color: rgb(var(--color-text-400));
+    /*background-color: red;*/
+}

package/src/lib/assets/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>

package/src/lib/components/Card.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	export let margin = "0";
-	export let marginBottom = "3em";
+	export let marginBottom = "2lh";
 	export let overrideStyle = "";
 	export let includeDataNoSnippet = true;
 

package/src/lib/components/Chip.svelte

@@ -8,5 +8,6 @@
         margin: 0.25em;
         font-weight: bold;
         pointer-events: none;
+        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
     }
 </style>

package/src/lib/components/DialogOverlay.svelte

@@ -3,6 +3,7 @@
 	import { onMount } from "svelte";
 
 	import { dialogManager } from "$lib/components/dialog_manager/DialogManagerStore";
+	import { DialogState } from "$pkg/types/pineapple_fiber/DialogState";
 
 	let currentMessage = "";
 	dialogManager.currentMessage.subscribe((value) => {
@@ -21,8 +22,16 @@
 	});
 
 	let hidePercent = 100;
+	let isHidden = true;
 	dialogManager.hidePercent.subscribe((value) => {
 		hidePercent = value * 0.4;
+		isHidden = false;
+	});
+
+	dialogManager.currentReadableState.subscribe((value) => {
+		isHidden = value === DialogState.Invisible;
+		if (value === DialogState.Invisible) {
+		}
 	});
 
 	const onDialogClick = () => {
@@ -30,7 +39,10 @@
 	};
 </script>
 
-<div class="dialog-elements" style="--hidePercentWidth: -{hidePercent}vw; --hidePercentHeight: {hidePercent}vh">
+<div class="dialog-elements"
+     hidden={isHidden}
+     style="--hidePercentWidth: -{hidePercent}vw;
+            --hidePercentHeight: {hidePercent}vh;">
 	<img src={currentPortrait} alt="Ares" class="dialog-portrait" />
 	<div class="card dialog-box variant-ghost-primary" on:click={onDialogClick}>
 		<div class="card dialog-name">
@@ -44,57 +56,47 @@
 </div>
 
 <style>
-	.dialog-elements {
-		position: absolute;
-		z-index: 10;
-	}
-
-	.dialog-elements > img {
-		transform: translateX(var(--hidePercentWidth));
-	}
-
-	.dialog-elements > div {
-		transform: translateY(var(--hidePercentHeight));
-	}
-
-	.dialog-box {
-		background-color: rgb(var(--color-surface-500) / 0.9);
-		position: fixed;
-		bottom: 0;
-		left: var(--dialog-left-pad);
-
-		width: var(--dialog-box-width); /*75em + 4em padding*/
-		height: var(--dialog-box-height);
-	}
-
-	.dialog-box *,
-	.dialog-name * {
-		font-size: clamp(1em, 5vw, 1.3em);
-		line-height: 1.5em;
-	}
-
-	.dialog-padding :global(p) {
-		font-size: clamp(1em, 5vw, 1.3em) !important;
-		line-height: 1.5em !important;
-	}
-
-	.dialog-padding {
-		padding: clamp(1.5em, 5vw, 1.75em) clamp(0em, 5vw - 0.5em, 2em) 0;
-	}
-
-	.dialog-name {
-		@apply pt-2 px-4;
-		position: fixed;
-
-		/* for centering vertically */
-		transform: translateX(clamp(0em, 5vw - 0.5em, 1em)) translateY(-50%);
-	}
-
-	.dialog-portrait {
-		position: fixed;
-		bottom: 0;
-		left: clamp(-4rem, calc(5vw - 5em), 0rem);
-		height: clamp(30rem, 75vw, 40rem);
-		width: auto;
-	}
+    .dialog-elements {
+        position: fixed;
+        z-index: 10;
+    }
+
+    .dialog-elements > img {
+        transform: translateX(var(--hidePercentWidth));
+    }
+
+    .dialog-elements > div {
+        transform: translateY(var(--hidePercentHeight));
+    }
+
+    .dialog-box *,
+    .dialog-name * {
+        font-size: clamp(1em, 5vw, 1.3em);
+        line-height: 1.5em;
+    }
+
+    .dialog-padding :global(p) {
+        font-size: clamp(1em, 5vw, 1.3em) !important;
+        line-height: 1.5em !important;
+    }
+
+    .dialog-padding {
+        padding: clamp(1.5em, 5vw, 1.75em) clamp(0em, 5vw - 0.5em, 2em) 0;
+    }
+
+    .dialog-name {
+        @apply pt-2 px-4;
+        position: fixed;
+
+        /* for centering vertically */
+        transform: translateX(clamp(0em, 5vw - 0.5em, 1em)) translateY(-50%);
+    }
+
+    .dialog-portrait {
+        position: fixed;
+        bottom: 0;
+        left: clamp(-4rem, calc(5vw - 5em), 0rem);
+        height: clamp(30rem, 75vw, 40rem);
+        width: auto;
+    }
 </style>