@valbuild/ui 0.12.0 → 0.13.3

package/src/components/forms/ImageForm.tsx

@@ -0,0 +1,195 @@
+import { useEffect, useState } from "react";
+import { UploadCloud } from "react-feather";
+import { ErrorText } from "../ErrorText";
+
+type Error = "invalid-file" | "file-too-large";
+export type ImageData =
+  | {
+      src: string;
+      addMetadata: boolean;
+      metadata?: { width: number; height: number; sha256: string };
+    }
+  | {
+      url: string;
+      metadata?: { width: number; height: number; sha256: string };
+    }
+  | null;
+export type ImageInputProps = {
+  name: string;
+  data: ImageData;
+  maxSize?: number;
+  error: Error | null;
+  onChange: (
+    result: { error: null; value: ImageData } | { error: Error; value: null }
+  ) => void;
+};
+
+const textEncoder = new TextEncoder();
+// TODO: handle hashes some other way
+const getSHA256Hash = async (bits: Uint8Array) => {
+  const hashBuffer = await window.crypto.subtle.digest("SHA-256", bits);
+  const hashArray = Array.from(new Uint8Array(hashBuffer));
+  const hash = hashArray
+    .map((item) => item.toString(16).padStart(2, "0"))
+    .join("");
+  return hash;
+};
+
+export function ImageForm({
+  name,
+  data: data,
+  maxSize,
+  error,
+  onChange,
+}: ImageInputProps) {
+  const [currentData, setCurrentData] = useState<ImageData>(null);
+  useEffect(() => {
+    setCurrentData(data);
+  }, [data]);
+  const [currentError, setCurrentError] = useState<Error | null>(null);
+  useEffect(() => {
+    setCurrentError(error);
+  }, [data]);
+
+  // TODO: we should update the Input type - we should never have a url here?
+  const src =
+    (currentData &&
+      (("src" in currentData && currentData.src) ||
+        ("url" in currentData && currentData.url))) ||
+    undefined;
+
+  return (
+    <div className="w-full py-2 max-w-[90vw] object-contain">
+      <label htmlFor={name}>
+        <div className="flex items-center justify-center w-full h-full min-h-[200px] cursor-pointer">
+          {currentData !== null && (
+            <img className="object-contain max-h-[300px]" src={src} />
+          )}
+          {!src && <UploadCloud size={24} className="text-primary" />}
+        </div>
+        <input
+          hidden
+          type="file"
+          id={name}
+          name={name}
+          onChange={(e) => {
+            const file = e.target.files?.[0];
+            if (file) {
+              if (maxSize && file.size > maxSize) {
+                onChange({ error: "file-too-large", value: null });
+                return;
+              }
+              const reader = new FileReader();
+              reader.addEventListener("load", () => {
+                const result = reader.result;
+                if (typeof result === "string") {
+                  const image = new Image();
+                  image.onload = async () => {
+                    const nextSource = {
+                      src: result,
+                      metadata: {
+                        width: image.naturalWidth,
+                        height: image.naturalHeight,
+                        sha256: await getSHA256Hash(textEncoder.encode(result)),
+                      },
+                      addMetadata: !currentData?.metadata,
+                    };
+                    setCurrentData(nextSource);
+                    setCurrentError(null);
+                    onChange({
+                      error: null,
+                      value: nextSource,
+                    });
+                  };
+                  image.src = result;
+                } else {
+                  onChange({ error: "invalid-file", value: null });
+                }
+              });
+              reader.readAsDataURL(file);
+            }
+          }}
+        />
+      </label>
+      {currentData &&
+        (!currentData.metadata ||
+          typeof currentData.metadata.height === "undefined" ||
+          typeof currentData.metadata.width === "undefined" ||
+          typeof currentData.metadata.sha256 === "undefined") && (
+          <ErrorText>
+            <div className="">
+              <div>Validation failed: missing metadata</div>
+              <button
+                className="px-4 py-2 border border-dark-gray"
+                onClick={async (ev) => {
+                  ev.preventDefault();
+
+                  const image = new Image();
+                  image.onload = async () => {
+                    const nextSource = {
+                      src: image.src,
+                      metadata: {
+                        width: image.naturalWidth,
+                        height: image.naturalHeight,
+                        sha256: await getSHA256Hash(
+                          textEncoder.encode(image.src)
+                        ),
+                      },
+                      addMetadata: !currentData?.metadata,
+                    };
+                    setCurrentData(nextSource);
+                    setCurrentError(null);
+                    onChange({
+                      error: null,
+                      value: nextSource,
+                    });
+                  };
+
+                  if ("url" in currentData) {
+                    const src = await fetch(currentData.url)
+                      .then((response) => response.blob())
+                      .then((blob) => {
+                        return new Promise<string>((resolve, reject) => {
+                          const reader = new FileReader();
+                          reader.onload = function () {
+                            if (typeof this.result !== "string") {
+                              return reject(
+                                Error(
+                                  `Could not read file from url: ${currentData.url}`
+                                )
+                              );
+                            }
+                            resolve(this.result);
+                          }; // <--- `this.result` contains a base64 data URI
+                          reader.readAsDataURL(blob);
+                        });
+                      });
+                    image.src = src;
+                  } else {
+                    image.src = currentData.src;
+                  }
+                }}
+              >
+                Fix
+              </button>
+            </div>
+          </ErrorText>
+        )}
+      {currentData?.metadata && (
+        <div className="ml-auto text-primary">
+          Dimensions: {currentData.metadata.width}x{currentData.metadata.height}
+        </div>
+      )}
+      {currentError && <ImageError error={currentError} />}
+    </div>
+  );
+}
+
+function ImageError({ error }: { error: Error }): React.ReactElement | null {
+  if (error === "invalid-file") {
+    return <ErrorText>Invalid file</ErrorText>;
+  } else if (error === "file-too-large") {
+    return <ErrorText>File is too large</ErrorText>;
+  }
+  return null;
+}

package/src/components/forms/TextForm.tsx

@@ -0,0 +1,22 @@
+export type TextData = string;
+export type TextInputProps = {
+  name: string;
+  text: TextData;
+  onChange: (value: string) => void;
+};
+
+export function TextForm({ name, text, onChange }: TextInputProps) {
+  return (
+    <div
+      className="w-full py-2 grow-wrap"
+      data-replicated-value={text} /* see grow-wrap */
+    >
+      <textarea
+        name={name}
+        className="w-full p-2 border outline-none bg-fill text-primary border-border focus-visible:border-highlight"
+        defaultValue={text}
+        onChange={(e) => onChange(e.target.value)}
+      />
+    </div>
+  );
+}

package/src/exports.ts

@@ -0,0 +1,3 @@
+export { RichTextEditor } from "./components/RichTextEditor/RichTextEditor";
+export { ValOverlay } from "./components/ValOverlay";
+export { type Inputs } from "./components/forms/Form";

package/src/index.css

@@ -0,0 +1,79 @@
+/*
+  Need to explicitly set config path, otherwise it may fail to resolve when
+  built from outside packages/ui.
+*/
+@config "../tailwind.config.js";
+
+@layer base {
+  /* For use with Shadow DOM, copied from the TailwindCSS prelude */
+  :host {
+    line-height: 1.5;
+    -webkit-text-size-adjust: 100%;
+    tab-size: 4;
+    font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont,
+      "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans",
+      "Helvetica Neue", sans-serif;
+    font-feature-settings: normal;
+    margin: 0;
+
+    /* theme properties - if updated remember to update the .storybook/theme.css file as well */
+    --val-theme-white: #fcfcfc;
+    --val-theme-light-gray: #d6d6d6;
+    --val-theme-dark-gray: #575757;
+    --val-theme-medium-black: #303030;
+    --val-theme-warm-black: #1a1a1a;
+    --val-theme-yellow: #ffff00;
+    --val-theme-red: #f02929;
+    --val-theme-green: #1ced1c;
+
+    /* light theme */
+    --val-theme-base: var(--val-theme-white);
+    --val-theme-highlight: var(--val-theme-yellow);
+    --val-theme-border: var(--val-theme-light-gray);
+    --val-theme-fill: var(--val-theme-light-gray);
+    --val-theme-primary: var(--val-theme-warm-black);
+  }
+
+  /* dark theme */
+  *[data-mode="dark"] {
+    --val-theme-base: var(--val-theme-warm-black);
+    --val-theme-highlight: var(--val-theme-yellow);
+    --val-theme-border: var(--val-theme-dark-gray);
+    --val-theme-fill: var(--val-theme-medium-black);
+    --val-theme-primary: var(--val-theme-white);
+  }
+
+  /* text area auto-grow */
+  .grow-wrap {
+    /* easy way to plop the elements on top of each other and have them both sized based on the tallest one's height */
+    display: grid;
+  }
+  .grow-wrap::after {
+    /* Note the weird space! Needed to preventy jumpy behavior */
+    content: attr(data-replicated-value) " ";
+
+    /* This is how textarea text behaves */
+    white-space: pre-wrap;
+
+    /* Hidden from view, clicks, and screen readers */
+    visibility: hidden;
+  }
+  .grow-wrap > textarea {
+    /* Firefox shows scrollbar on growth, you can hide like this. */
+    overflow: hidden;
+  }
+  .grow-wrap > textarea,
+  .grow-wrap::after {
+    /* Identical styling required!! */
+    border: 1px solid black;
+    padding: 0.5rem;
+    font: inherit;
+
+    /* Place on top of each other */
+    grid-area: 1 / 1 / 2 / 2;
+  }
+}
+
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

package/src/index.tsx

@@ -0,0 +1,14 @@
+/*
+ * This module is the entrypoint of @valbuild/ui until the package is built with
+ * Vite. It is used only as a shim during local development, and is actually not
+ * part of the build output meant for consumers.
+ *
+ * After building with Vite, this entrypoint is replaced by ./vite-index.tsx,
+ * which is optimized for consumers.
+ */
+
+export * from "./exports";
+
+export function Style(): JSX.Element | null {
+  return <link rel="stylesheet" href="/api/val/static/style.css" />;
+}

package/src/server.ts

@@ -0,0 +1,41 @@
+/*
+ * This module is the entrypoint of @valbuild/ui/server until the package is
+ * built with Vite. It is used only as a shim during local development, and is
+ * actually not part of the build output meant for consumers.
+ *
+ * After building with Vite, this entrypoint is replaced by ./vite-server.tsx,
+ * which is optimized for consumers.
+ */
+
+import type { RequestHandler } from "express";
+
+export function createRequestHandler(): RequestHandler {
+  if (typeof window === "undefined") {
+    const vite = (async () => {
+      const { fileURLToPath, URL: URL_noresolve } = await import("node:url");
+      const { createServer } = await import(/* @vite-ignore */ "v" + "ite");
+      const vite = await createServer({
+        root: fileURLToPath(new URL_noresolve("..", import.meta.url)),
+        configFile: fileURLToPath(
+          new URL_noresolve("../vite.config.ts", import.meta.url)
+        ),
+        server: { middlewareMode: true },
+      });
+
+      return vite;
+    })();
+    return async (req, res, next) => {
+      if (req.url === "/style.css") {
+        const styleModule = await (await vite).ssrLoadModule("./src/index.css");
+        const style = styleModule.default as string;
+        res.statusCode = 200;
+        res.setHeader("Content-Type", "text/css");
+        return res.end(style);
+      } else {
+        return next();
+      }
+    };
+  } else {
+    throw Error("Cannot get middleware in browser");
+  }
+}

package/src/stories/Button.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, Story } from "@storybook/react";
+import Underline from "../assets/icons/Underline";
+import Button, { ButtonProps } from "../components/Button";
+
+export default {
+  title: "Button",
+  component: Button,
+} as Meta;
+
+const Template: Story<ButtonProps> = (args) => <Button {...args} />;
+
+export const ButtonStory = Template.bind({});
+ButtonStory.args = {
+  children: <div>Button</div>,
+};
+
+export const ButtonWithIcon = Template.bind({});
+ButtonWithIcon.args = {
+  icon: <Underline />,
+};

package/src/stories/Checkbox.stories.tsx

@@ -0,0 +1,14 @@
+import { Meta, Story } from "@storybook/react";
+import Checkbox, { CheckboxProps } from "../components/Checkbox";
+
+export default {
+  title: "Checkbox",
+  component: Checkbox,
+} as Meta;
+
+const Template: Story<CheckboxProps> = (args) => <Checkbox {...args} />;
+
+export const CheckboxStory = Template.bind({});
+CheckboxStory.args = {
+  label: "Check me",
+};

package/src/stories/Dropdown.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, Story } from "@storybook/react";
+import Italic from "../assets/icons/Italic";
+import Dropdown, { DropdownProps } from "../components/Dropdown";
+
+export default {
+  title: "Dropdown",
+  component: Dropdown,
+} as Meta;
+
+const Template: Story<DropdownProps> = (args) => <Dropdown {...args} />;
+
+export const DropdownStory = Template.bind({});
+DropdownStory.args = {
+  label: "Font",
+  options: ["Arial", "Times New Roman", "Courier New"],
+};
+
+export const DropdownWithIcon = Template.bind({});
+DropdownWithIcon.args = {
+  label: "Font",
+  options: ["Arial", "Times New Roman", "Courier New"],
+  icon: <Italic />,
+};

package/src/stories/Introduction.mdx

@@ -0,0 +1,221 @@
+import { Meta } from "@storybook/blocks";
+import Code from "./assets/code-brackets.svg";
+import Colors from "./assets/colors.svg";
+import Comments from "./assets/comments.svg";
+import Direction from "./assets/direction.svg";
+import Flow from "./assets/flow.svg";
+import Plugin from "./assets/plugin.svg";
+import Repo from "./assets/repo.svg";
+import StackAlt from "./assets/stackalt.svg";
+
+<Meta title="Example/Introduction" />
+
+<style>
+  {`
+    .subheading {
+      --mediumdark: '#999999';
+      font-weight: 700;
+      font-size: 13px;
+      color: #999;
+      letter-spacing: 6px;
+      line-height: 24px;
+      text-transform: uppercase;
+      margin-bottom: 12px;
+      margin-top: 40px;
+    }
+
+    .link-list {
+      display: grid;
+      grid-template-columns: 1fr;
+      grid-template-rows: 1fr 1fr;
+      row-gap: 10px;
+    }
+
+    @media (min-width: 620px) {
+      .link-list {
+        row-gap: 20px;
+        column-gap: 20px;
+        grid-template-columns: 1fr 1fr;
+      }
+    }
+
+    @media all and (-ms-high-contrast:none) {
+    .link-list {
+        display: -ms-grid;
+        -ms-grid-columns: 1fr 1fr;
+        -ms-grid-rows: 1fr 1fr;
+      }
+    }
+
+    .link-item {
+      display: block;
+      padding: 20px;
+      border: 1px solid #00000010;
+      border-radius: 5px;
+      transition: background 150ms ease-out, border 150ms ease-out, transform 150ms ease-out;
+      color: #333333;
+      display: flex;
+      align-items: flex-start;
+    }
+
+    .link-item:hover {
+      border-color: #1EA7FD50;
+      transform: translate3d(0, -3px, 0);
+      box-shadow: rgba(0, 0, 0, 0.08) 0 3px 10px 0;
+    }
+
+    .link-item:active {
+      border-color: #1EA7FD;
+      transform: translate3d(0, 0, 0);
+    }
+
+    .link-item strong {
+      font-weight: 700;
+      display: block;
+      margin-bottom: 2px;
+    }
+
+    .link-item img {
+      height: 40px;
+      width: 40px;
+      margin-right: 15px;
+      flex: none;
+    }
+
+    .link-item span,
+    .link-item p {
+      margin: 0;
+      font-size: 14px;
+      line-height: 20px;
+    }
+
+    .tip {
+      display: inline-block;
+      border-radius: 1em;
+      font-size: 11px;
+      line-height: 12px;
+      font-weight: 700;
+      background: #E7FDD8;
+      color: #66BF3C;
+      padding: 4px 12px;
+      margin-right: 10px;
+      vertical-align: top;
+    }
+
+    .tip-wrapper {
+      font-size: 13px;
+      line-height: 20px;
+      margin-top: 40px;
+      margin-bottom: 40px;
+    }
+
+    .tip-wrapper code {
+      font-size: 12px;
+      display: inline-block;
+    }
+  `}
+</style>
+
+# Welcome to Storybook
+
+Storybook helps you build UI components in isolation from your app's business logic, data, and context.
+That makes it easy to develop hard-to-reach states. Save these UI states as **stories** to revisit during development, testing, or QA.
+
+Browse example stories now by navigating to them in the sidebar.
+View their code in the `stories` directory to learn how they work.
+We recommend building UIs with a [**component-driven**](https://componentdriven.org) process starting with atomic components and ending with pages.
+
+<div className="subheading">Configure</div>
+
+<div className="link-list">
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/addons/addon-types"
+    target="_blank"
+  >
+    <img src={Plugin} alt="plugin" />
+    <span>
+      <strong>Presets for popular tools</strong>
+      Easy setup for TypeScript, SCSS and more.
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/webpack"
+    target="_blank"
+  >
+    <img src={StackAlt} alt="Build" />
+    <span>
+      <strong>Build configuration</strong>
+      How to customize webpack and Babel
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/configure/styling-and-css"
+    target="_blank"
+  >
+    <img src={Colors} alt="colors" />
+    <span>
+      <strong>Styling</strong>
+      How to load and configure CSS libraries
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/docs/react/get-started/setup#configure-storybook-for-your-stack"
+    target="_blank"
+  >
+    <img src={Flow} alt="flow" />
+    <span>
+      <strong>Data</strong>
+      Providers and mocking for data libraries
+    </span>
+  </a>
+</div>
+
+<div className="subheading">Learn</div>
+
+<div className="link-list">
+  <a className="link-item" href="https://storybook.js.org/docs" target="_blank">
+    <img src={Repo} alt="repo" />
+    <span>
+      <strong>Storybook documentation</strong>
+      Configure, customize, and extend
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://storybook.js.org/tutorials/"
+    target="_blank"
+  >
+    <img src={Direction} alt="direction" />
+    <span>
+      <strong>In-depth guides</strong>
+      Best practices from leading teams
+    </span>
+  </a>
+  <a
+    className="link-item"
+    href="https://github.com/storybookjs/storybook"
+    target="_blank"
+  >
+    <img src={Code} alt="code" />
+    <span>
+      <strong>GitHub project</strong>
+      View the source and add issues
+    </span>
+  </a>
+  <a className="link-item" href="https://discord.gg/storybook" target="_blank">
+    <img src={Comments} alt="comments" />
+    <span>
+      <strong>Discord chat</strong>
+      Chat with maintainers and the community
+    </span>
+  </a>
+</div>
+
+<div className="tip-wrapper">
+  <span className="tip">Tip</span>Edit the Markdown in{" "}
+  <code>stories/Introduction.stories.mdx</code>
+</div>