@valbuild/ui 0.12.0

package/.babelrc.json

@@ -0,0 +1,10 @@
+{
+  "presets": [
+    [
+      "@babel/preset-react",
+      {
+        "runtime": "automatic"
+      }
+    ]
+  ]
+}

package/.storybook/main.js

@@ -0,0 +1,25 @@
+/** @type { import('@storybook/react-vite').StorybookConfig } */
+const config = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/addon-interactions",
+    {
+      name: "@storybook/addon-styling",
+      options: {
+        // Check out https://github.com/storybookjs/addon-styling/blob/main/docs/api.md
+        // For more details on this addon's options.
+        postCss: true,
+      },
+    },
+  ],
+  framework: {
+    name: "@storybook/react-vite",
+    options: {},
+  },
+  docs: {
+    autodocs: "tag",
+  },
+};
+export default config;

package/.storybook/preview-head.html

@@ -0,0 +1,6 @@
+<link rel="preconnect" href="https://fonts.googleapis.com" />
+<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+<link
+  href="https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;1,400&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,400;1,700&display=swap"
+  rel="stylesheet"
+/>

package/.storybook/preview.js

@@ -0,0 +1,33 @@
+import { withThemeByDataAttribute } from "@storybook/addon-styling";
+
+import "tailwindcss/tailwind.css";
+import "../src/index.css";
+import "./theme.css"; // The normal css has theming on :hover, but we need to have it on :root for stories to work
+
+/* snipped for brevity */
+
+export const decorators = [
+  withThemeByDataAttribute({
+    themes: {
+      light: "light",
+      dark: "dark",
+    },
+    defaultTheme: "dark",
+    attributeName: "data-mode",
+  }),
+];
+
+/** @type { import('@storybook/react').Preview } */
+const preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+};
+
+export default preview;

package/.storybook/theme.css

@@ -0,0 +1,30 @@
+html {
+  font-family: Roboto, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
+    Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
+  /* This must be identical to the theme in index.css */
+  --val-theme-white: #fcfcfc;
+  --val-theme-light-gray: #d6d6d6;
+  --val-theme-medium-gray: #c9c9c9;
+  --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-medium-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);
+}

package/dist/valbuild-ui.cjs.d.ts

@@ -0,0 +1,68 @@
+import { LexicalEditor } from 'lexical';
+import { FC } from 'react';
+import { RichText } from '@valbuild/core';
+
+interface RichTextEditorProps {
+    richtext: RichText;
+    onEditor?: (editor: LexicalEditor) => void;
+}
+declare const RichTextEditor: FC<RichTextEditorProps>;
+
+type ImageData = {
+    src: string;
+    addMetadata: boolean;
+    metadata?: {
+        width: number;
+        height: number;
+        sha256: string;
+    };
+} | {
+    url: string;
+    metadata?: {
+        width: number;
+        height: number;
+        sha256: string;
+    };
+} | null;
+
+type TextData = string;
+
+type Inputs = {
+    [path: string]: {
+        status: "requested";
+    } | {
+        status: "completed";
+        type: "text";
+        data: TextData;
+    } | {
+        status: "completed";
+        type: "image";
+        data: ImageData;
+    } | {
+        status: "completed";
+        type: "richtext";
+        data: RichText;
+    };
+};
+type FormProps = {
+    onSubmit: (nextInputs: Inputs) => void;
+    inputs: Inputs;
+};
+
+type ValWindow = {
+    position: {
+        left: number;
+        top: number;
+    };
+} & FormProps;
+type ValOverlayProps = {
+    editMode: boolean;
+    setEditMode: (editMode: boolean) => void;
+    valWindow?: ValWindow;
+    closeValWindow: () => void;
+};
+declare function ValOverlay({ editMode, setEditMode, valWindow, closeValWindow, }: ValOverlayProps): JSX.Element;
+
+declare function Style(): JSX.Element;
+
+export { Inputs, RichTextEditor, Style, ValOverlay };