feat: Add new ui package folder to test internal imports

.github/workflows/android-build.yml

@@ -59,6 +59,9 @@ jobs:
       - name: Install app dependencies
         run: pnpm install
 
+      - name: Build Submodules
+        run: pnpm run build-submodules
+
       - name: Build SolidJS app
         env:
           VITE_NETWORK: signet

.github/workflows/code-quality.yml

@@ -47,9 +47,12 @@ jobs:
       - name: Step One - Check Code Formatting
         run: pnpm run check-format
 
-      - name: Step Two - Check Lint Errors
+      - name: Step Two - Build Submodules
+        run: pnpm run build-submodules
+
+      - name: Step Three - Check Lint Errors
         run: pnpm run eslint
 
-      - name: Step Three - Check Type Check Errors
+      - name: Step Four - Check Type Check Errors
         run: pnpm run check-types
 

.github/workflows/playwright.yml

@@ -44,6 +44,9 @@ jobs:
       - name: Install app dependencies
         run: pnpm install
 
+      - name: Build Submodules
+        run: pnpm run build-submodules
+
       - run: npx playwright install --with-deps
         if: steps.playwright-cache.outputs.cache-hit != 'true'
       - run: npx playwright install-deps
@@ -67,4 +70,4 @@ jobs:
         with:
           name: playwright-report
           path: playwright-report/
-          retention-days: 30
+          retention-days: 30

.gitignore

@@ -22,6 +22,7 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+.turbo
 
 # PWA dev stuff
 dev-dist

package.json

@@ -6,7 +6,8 @@
     "scripts": {
         "dev": "solid-start dev",
         "host": "solid-start dev --host",
-        "build": "solid-start build && node insertHead.js",
+        "build-submodules": "turbo run build --filter='./packages/*'",
+        "build": "pnpm run build-submodules && solid-start build && node insertHead.js",
         "start": "solid-start start",
         "check-types": "tsc --noemit",
         "eslint": "eslint src",
@@ -48,6 +49,7 @@
         "@modular-forms/solid": "^0.18.1",
         "@mutinywallet/barcode-scanner": "5.0.0-beta.3",
         "@mutinywallet/mutiny-wasm": "0.4.12",
+        "@mutinywallet/ui": "workspace:*",
         "@mutinywallet/waila-wasm": "^0.2.1",
         "@solid-primitives/upload": "^0.0.111",
         "@thisbeyond/solid-select": "^0.14.0",
@@ -58,6 +60,7 @@
         "solid-js": "^1.7.8",
         "solid-qr-code": "^0.0.8",
         "solid-start": "^0.2.29",
+        "turbo": "^1.10.12",
         "undici": "^5.22.1"
     },
     "engines": {

packages/ui/.gitignore

@@ -0,0 +1,28 @@
+
+dist
+.solid
+.output
+.vercel
+.netlify
+netlify
+
+# Environment
+.env
+.env*.local
+
+# dependencies
+/node_modules
+
+# IDEs and editors
+/.idea
+.project
+.classpath
+*.launch
+.settings/
+
+# Temp
+gitignore
+
+# System Files
+.DS_Store
+Thumbs.db

packages/ui/.prettierrc

@@ -0,0 +1,9 @@
+{
+  "trailingComma": "none",
+  "tabWidth": 4,
+  "semi": true,
+  "singleQuote": false,
+  "arrowParens": "always",
+  "printWidth": 80,
+  "useTabs": false
+}

packages/ui/.storybook/main.ts

@@ -0,0 +1,19 @@
+import type { StorybookConfig } from "storybook-solidjs-vite";
+
+const config: StorybookConfig = {
+    stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+    addons: [
+        "@storybook/addon-links",
+        "@storybook/addon-essentials",
+        "@storybook/addon-interactions",
+        "@storybook/addon-styling"
+    ],
+    framework: {
+        name: "storybook-solidjs-vite",
+        options: {}
+    },
+    docs: {
+        autodocs: "tag"
+    }
+};
+export default config;

packages/ui/.storybook/preview.ts

@@ -0,0 +1,29 @@
+import '../src/index.css'
+import { Preview } from "storybook-solidjs"
+
+const preview: Preview = {
+    parameters: {
+        backgrounds: {
+            default: 'dark',
+            values: [
+                {
+                    name: 'dark',
+                    value: '#171717',
+                },
+                {
+                    name: 'light',
+                    value: '#3b5998',
+                },
+            ],
+        },
+        actions: { argTypesRegex: "^on[A-Z].*" },
+        controls: {
+            matchers: {
+                color: /(background|color)$/i,
+                date: /Date$/
+            }
+        }
+    }
+};
+
+export default preview;

packages/ui/LICENSE

@@ -0,0 +1,22 @@
+MIT License
+
+Copyright (c) 2022-2023 Mutiny Wallet Inc.
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
+

packages/ui/README.md

@@ -0,0 +1,38 @@
+# ui
+
+A solid-js ui component package and storybook for quick component development
+
+## Building
+
+Using npm:
+
+```bash
+$ pnpm run build
+```
+
+## Running Storybook
+
+```bash
+$ pnpm run storybook
+```
+
+## Importing styles
+
+### Root css
+
+```js
+// your-project/src/root.tsx
+import "@mutinywallet/ui/style.css"
+```
+
+### Tailwind config
+
+```js
+// your-project/src/tailwind.config.cjs
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    presets: [
+        require('@mutinywallet/ui/tailwind.config.cjs')
+    ]
+};
+```

packages/ui/package.json

@@ -0,0 +1,72 @@
+{
+  "name": "@mutinywallet/ui",
+  "version": "0.0.0",
+  "private": true,
+  "license": "MIT",
+  "scripts": {
+    "build": "rollup -c",
+    "check-types": "tsc --noemit",
+    "eslint": "eslint src",
+    "lint": "pnpm run eslint && pnpm run check-types",
+    "format": "npx prettier --write \"src/**/*.{ts,tsx,js,jsx,json,css,scss,md}\"",
+    "check-format": "npx prettier --check \"src/**/*.{ts,tsx,js,jsx,json,css,scss,md}\"",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "type": "module",
+  "files": [
+    "dist"
+  ],
+  "types": "./dist/types/index.d.ts",
+  "main": "./dist/esm/index.js",
+  "module": "./dist/esm/index.js",
+  "exports": {
+    ".": {
+      "solid": "./dist/source/index.jsx",
+      "default": "./dist/esm/index.js"
+    },
+    "./style.css": "./dist/esm/style.css",
+    "./tailwind.config.cjs": "./tailwind.config.cjs"
+  },
+  "devDependencies": {
+    "@storybook/addon-essentials": "^7.2.2",
+    "@storybook/addon-interactions": "^7.2.2",
+    "@storybook/addon-links": "^7.2.2",
+    "@storybook/addon-styling": "^1.3.6",
+    "@storybook/blocks": "^7.2.2",
+    "@storybook/testing-library": "^0.2.0",
+    "@typescript-eslint/eslint-plugin": "^6.2.0",
+    "@typescript-eslint/parser": "^6.2.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.46.0",
+    "eslint-import-resolver-typescript": "2.7.1",
+    "eslint-plugin-import": "2.27.5",
+    "eslint-plugin-prettier": "4.2.1",
+    "eslint-plugin-solid": "0.11.0",
+    "postcss": "^8.4.26",
+    "prettier": "^2.8.8",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "solid-start-node": "^0.3.0",
+    "storybook": "^7.2.2",
+    "storybook-solidjs": "1.0.0-beta.2",
+    "storybook-solidjs-vite": "^1.0.0-beta.2",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^4.9.5"
+  },
+  "dependencies": {
+    "@kobalte/core": "^0.9.8",
+    "@rollup/plugin-image": "^3.0.2",
+    "@solidjs/meta": "^0.28.5",
+    "@solidjs/router": "^0.8.2",
+    "@types/node": "^18.17.1",
+    "rollup": "^3.28.0",
+    "rollup-plugin-css-only": "^4.3.0",
+    "rollup-preset-solid": "^2.0.1",
+    "solid-js": "^1.7.9",
+    "solid-start": "^0.2.29"
+  },
+  "peerDependencies": {
+    "solid-js": "^1.7.9"
+  }
+}

packages/ui/postcss.config.cjs

@@ -0,0 +1,12 @@
+module.exports = {
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-interactions',
+    '@storybook/addon-styling',
+  ],
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

packages/ui/rollup.config.js

@@ -0,0 +1,25 @@
+import fs from "fs";
+import withSolid from "rollup-preset-solid";
+import image from '@rollup/plugin-image';
+import css from "rollup-plugin-css-only";
+
+const stripCSSImport = () => {
+  return {
+    name: "strip-css-import",
+    generateBundle() {
+      const path = fs.realpathSync("./dist/source/index.jsx");
+      const data = fs.readFileSync(path, { encoding: "utf8" });
+      const transformed = data.replace(/^import ".\/index.css";/, "");
+      fs.writeFileSync(path, transformed);
+    },
+  };
+};
+
+export default withSolid({
+  input: "src/index.tsx",
+  plugins: [
+    image(),
+    css({ output: "style.css" }),
+    stripCSSImport()
+  ],
+});

packages/ui/src/components/LoadingSpinner.tsx

@@ -0,0 +1,28 @@
+export const LoadingSpinner = (props: { big?: boolean; wide?: boolean }) => {
+    return (
+        <div
+            role="status"
+            class="w-24"
+            classList={{
+                "flex justify-center": props.wide,
+                "h-full grid": props.big
+            }}
+        >
+            <svg
+                class="w-8 h-8 mr-2 text-gray-200 animate-spin fill-m-red place-self-center"
+                viewBox="0 0 100 101"
+                fill="none"
+                xmlns="http://www.w3.org/2000/svg"
+            >
+                <path
+                    d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+                    fill="currentColor"
+                />
+                <path
+                    d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+                    fill="currentFill"
+                />
+            </svg>
+        </div>
+    );
+};

packages/ui/src/components/index.tsx

@@ -0,0 +1,2 @@
+export * from "./LoadingSpinner";
+export * from "./ExternalLink";

packages/ui/src/index.tsx

@@ -0,0 +1,3 @@
+import "./index.css";
+
+export * from "./components";

packages/ui/src/stories/ExternalLink.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj } from "storybook-solidjs";
+
+import { ExternalLink } from "../components/ExternalLink";
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/solid/writing-stories/introduction
+const meta = {
+    title: "External Link",
+    component: ExternalLink,
+    tags: ["autodocs"],
+    argTypes: {
+        href: {
+            description: "Hyperlink",
+            control: "text"
+        },
+        children: {
+            description: "Link text",
+            control: "text"
+        }
+    }
+} satisfies Meta<typeof ExternalLink>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/solid/writing-stories/args
+export const MutinyWallet: Story = {
+    args: {
+        children: <>Mutiny Wallet</>,
+        href: "https://app.mutinywallet.com"
+    }
+};
+
+export const EmptyChildren: Story = {
+    args: {
+        href: "https://app.mutinywallet.com"
+    }
+};

packages/ui/src/stories/LoadingSpinner.stories.tsx

@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from "storybook-solidjs";
+
+import { LoadingSpinner } from "../components/LoadingSpinner";
+
+// More on how to set up stories at: https://storybook.js.org/docs/7.0/solid/writing-stories/introduction
+const meta = {
+    title: "Loading Spinner",
+    component: LoadingSpinner,
+    tags: ["autodocs"],
+    argTypes: {
+        big: {
+            description: "Height fill",
+            control: "boolean"
+        },
+        wide: {
+            description: "Justify center",
+            control: "boolean"
+        }
+    }
+} satisfies Meta<typeof LoadingSpinner>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/7.0/solid/writing-stories/args
+export const Default: Story = {
+    args: {}
+};
+
+export const Big: Story = {
+    args: {
+        big: true
+    }
+};
+
+export const Wide: Story = {
+    args: {
+        wide: true
+    }
+};

packages/ui/src/stories/Page.stories.ts

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from "storybook-solidjs";
+
+import { Page } from "./Page";
+
+const meta = {
+    title: "Example/Page",
+    component: Page,
+    parameters: {
+        // More on how to position stories at: https://storybook.js.org/docs/7.0/solid/configure/story-layout
+        layout: "fullscreen"
+    }
+} satisfies Meta<typeof Page>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Home: Story = {};

packages/ui/src/stories/Page.tsx

@@ -0,0 +1,78 @@
+import { Component } from "solid-js";
+import "./page.css";
+
+export const Page: Component = () => {
+    return (
+        <article>
+            <section>
+                <p>
+                    We recommend building UIs with a{" "}
+                    <a
+                        href="https://componentdriven.org"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        <strong>component-driven</strong>
+                    </a>{" "}
+                    process starting with atomic components and ending with
+                    pages.
+                </p>
+                <p>
+                    Render pages with mock data. This makes it easy to build and
+                    review page states without needing to navigate to them in
+                    your app. Here are some handy patterns for managing page
+                    data in Storybook:
+                </p>
+                <ul>
+                    <li>
+                        Use a higher-level connected component. Storybook helps
+                        you compose such data from the "args" of child component
+                        stories
+                    </li>
+                    <li>
+                        Assemble data in the page component from your services.
+                        You can mock these services out using Storybook.
+                    </li>
+                </ul>
+                <p>
+                    Get a guided tutorial on component-driven development at{" "}
+                    <a
+                        href="https://storybook.js.org/tutorials/"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        Storybook tutorials
+                    </a>
+                    . Read more in the{" "}
+                    <a
+                        href="https://storybook.js.org/docs"
+                        target="_blank"
+                        rel="noopener noreferrer"
+                    >
+                        docs
+                    </a>
+                    .
+                </p>
+                <div class="tip-wrapper">
+                    <span class="tip">Tip</span> Adjust the width of the canvas
+                    with the{" "}
+                    <svg
+                        width="24"
+                        height="24"
+                        viewBox="0 0 12 12"
+                        xmlns="http://www.w3.org/2000/svg"
+                    >
+                        <g fill="none" fill-rule="evenodd">
+                            <path
+                                d="M1.5 5.2h4.8c.3 0 .5.2.5.4v5.1c-.1.2-.3.3-.4.3H1.4a.5.5 0 01-.5-.4V5.7c0-.3.2-.5.5-.5zm0-2.1h6.9c.3 0 .5.2.5.4v7a.5.5 0 01-1 0V4H1.5a.5.5 0 010-1zm0-2.1h9c.3 0 .5.2.5.4v9.1a.5.5 0 01-1 0V2H1.5a.5.5 0 010-1zm4.3 5.2H2V10h3.8V6.2z"
+                                id="a"
+                                fill="#999"
+                            />
+                        </g>
+                    </svg>
+                    Viewports addon in the toolbar
+                </div>
+            </section>
+        </article>
+    );
+};

packages/ui/src/stories/Welcome.mdx

@@ -0,0 +1,189 @@
+import { Meta } from "@storybook/blocks";
+
+export const RightArrow = () => <svg 
+    viewBox="0 0 14 14" 
+    width="8px" 
+    height="14px" 
+    style={{ 
+      marginLeft: '4px',
+      display: 'inline-block',
+      shapeRendering: 'inherit',
+      verticalAlign: 'middle',
+      fill: 'currentColor',
+      'path fill': 'currentColor'
+    }}
+>
+  <path d="m11.1 7.35-5.5 5.5a.5.5 0 0 1-.7-.7L10.04 7 4.9 1.85a.5.5 0 1 1 .7-.7l5.5 5.5c.2.2.2.5 0 .7Z" />
+</svg>
+
+<Meta title="Welcome to Mutiny Storybook" />
+
+<div className="sb-container">
+  <div className='sb-section-title'>
+    # Welcome to Mutiny's Storybook
+
+    Because Storybook works separately from your app, you'll need to configure it for your specific stack and setup. Below, explore guides for configuring Storybook with popular frameworks and tools. If you get stuck, learn how you can ask for help from our community.
+  </div>
+  <a
+    href="https://storybook.js.org/docs/solid/configure/overview"
+    target="_blank"
+  >Learn more<RightArrow /></a>
+</div>
+
+<style>
+  {`
+  .sb-container {
+    margin-bottom: 48px;
+  }
+
+  .sb-section {
+    width: 100%;
+    display: flex;
+    flex-direction: row;
+    gap: 20px;
+  }
+
+  img {
+    object-fit: cover;
+  }
+
+  .sb-section-title {
+    margin-bottom: 32px;
+  }
+
+  .sb-section a:not(h1 a, h2 a, h3 a) {
+    font-size: 14px;
+  }
+
+  .sb-section-item, .sb-grid-item {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  .sb-section-item-heading {
+    padding-top: 20px !important;
+    padding-bottom: 5px !important;
+    margin: 0 !important;
+  }
+  .sb-section-item-paragraph {
+    margin: 0;
+    padding-bottom: 10px;
+  }
+
+  .sb-chevron {
+    margin-left: 5px;
+  }
+
+  .sb-features-grid {
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    grid-gap: 32px 20px;
+  }
+
+  .sb-socials {
+    display: grid;
+    grid-template-columns: repeat(4, 1fr);
+  }
+
+  .sb-socials p {
+    margin-bottom: 10px;
+  }
+
+  .sb-explore-image {
+    max-height: 32px;
+    align-self: flex-start;
+  }
+
+  .sb-addon {
+    width: 100%;
+    display: flex;
+    align-items: center;
+    position: relative;
+    background-color: #EEF3F8;
+    border-radius: 5px;
+    border: 1px solid rgba(0, 0, 0, 0.05);
+    background: #EEF3F8;
+    height: 180px;
+    margin-bottom: 48px;
+    overflow: hidden;
+  }
+
+  .sb-addon-text {
+    padding-left: 48px;
+    max-width: 240px;
+  }
+
+  .sb-addon-text h4 {
+    padding-top: 0px;
+  }
+
+  .sb-addon-img {
+    position: absolute;
+    left: 345px;
+    top: 0;
+    height: 100%;
+    width: 200%;
+    overflow: hidden;
+  }
+
+  .sb-addon-img img {
+    width: 650px;
+    transform: rotate(-15deg);
+    margin-left: 40px;
+    margin-top: -72px;
+    box-shadow: 0 0 1px rgba(255, 255, 255, 0);
+    backface-visibility: hidden;
+  }
+
+  @media screen and (max-width: 800px) {
+    .sb-addon-img {
+      left: 300px;
+    }
+  }
+
+  @media screen and (max-width: 600px) {
+    .sb-section {
+      flex-direction: column;
+    }
+
+    .sb-features-grid {
+      grid-template-columns: repeat(1, 1fr);
+    }
+
+    .sb-socials {
+      grid-template-columns: repeat(2, 1fr);
+    }
+
+    .sb-addon {
+      height: 280px;
+      align-items: flex-start;
+      padding-top: 32px;
+      overflow: hidden;
+    }
+
+    .sb-addon-text {
+      padding-left: 24px;
+    }
+
+    .sb-addon-img {
+      right: 0;
+      left: 0;
+      top: 130px;
+      bottom: 0;
+      overflow: hidden;
+      height: auto;
+      width: 124%;
+    }
+
+    .sb-addon-img img {
+      width: 1200px;
+      transform: rotate(-12deg);
+      margin-left: 0;
+      margin-top: 48px;
+      margin-bottom: -40px;
+      margin-left: -24px;
+    }
+  }
+  `}
+</style>

packages/ui/src/stories/page.css

@@ -0,0 +1,73 @@
+#storybook-root {
+    margin: 75px;
+}
+
+.storybook-page {
+    font-family: "Nunito Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 14px;
+    line-height: 24px;
+    padding: 48px 20px;
+    margin: 0 auto;
+    max-width: 600px;
+    color: #333;
+}
+
+.storybook-page h2 {
+    font-weight: 700;
+    font-size: 32px;
+    line-height: 1;
+    margin: 0 0 4px;
+    display: inline-block;
+    vertical-align: top;
+}
+
+.storybook-page p {
+    margin: 1em 0;
+}
+
+.storybook-page a {
+    text-decoration: none;
+    color: #1ea7fd;
+}
+
+.storybook-page ul {
+    padding-left: 30px;
+    margin: 1em 0;
+}
+
+.storybook-page li {
+    margin-bottom: 8px;
+}
+
+.storybook-page .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;
+}
+
+.storybook-page .tip-wrapper {
+    font-size: 13px;
+    line-height: 20px;
+    margin-top: 40px;
+    margin-bottom: 40px;
+}
+
+.storybook-page .tip-wrapper svg {
+    display: inline-block;
+    height: 12px;
+    width: 12px;
+    margin-right: 4px;
+    vertical-align: top;
+    margin-top: 3px;
+}
+
+.storybook-page .tip-wrapper svg path {
+    fill: #1ea7fd;
+}

packages/ui/tailwind.config.cjs

@@ -0,0 +1,116 @@
+const plugin = require("tailwindcss/plugin");
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
+    safelist: [
+        "grid-cols-1",
+        "grid-cols-2",
+        "gap-2",
+        "gap-4",
+        "outline-m-red",
+        "outline-m-blue"
+    ],
+    variants: {
+        extend: {
+            borderWidth: ["responsive", "last", "hover", "focus"]
+        }
+    },
+    theme: {
+        extend: {
+            colors: {
+                "half-black": "rgba(0, 0, 0, 0.5)",
+                "faint-white": "rgba(255, 255, 255, 0.1)",
+                "light-text": "rgba(250, 245, 234, 0.5)",
+                "m-green": "hsla(163, 70%, 38%, 1)",
+                "m-green-dark": "hsla(163, 70%, 28%, 1)",
+                "m-blue": "hsla(220, 59%, 52%, 1)",
+                "m-blue-400": "hsla(219, 57%, 52%, 1)",
+                "m-blue-dark": "hsla(220, 59%, 42%, 1)",
+                "m-red": "hsla(343, 92%, 54%, 1)",
+                "m-red-dark": "hsla(343, 92%, 44%, 1)",
+                "sidebar-gray": "hsla(222, 15%, 7%, 1)",
+                "m-grey-350": "hsla(0, 0%, 73%, 1)",
+                "m-grey-400": "hsla(0, 0%, 64%, 1)",
+                "m-grey-700": "hsla(0, 0%, 25%, 1)",
+                "m-grey-750": "hsla(0, 0%, 17%, 1)",
+                "m-grey-800": "hsla(0, 0%, 12%, 1)",
+                "m-grey-900": "hsla(0, 0%, 9%, 1)"
+            },
+            backgroundImage: {
+                "fade-to-blue":
+                    "linear-gradient(1.63deg, #0B215B 32.05%, rgba(11, 33, 91, 0) 84.78%)",
+                "subtle-fade":
+                    "linear-gradient(180deg, #060A13 0%, #131E39 100%)",
+                "richer-fade":
+                    "linear-gradient(180deg, hsla(224, 20%, 8%, 1) 0%, hsla(224, 20%, 15%, 1) 100%)"
+            },
+            dropShadow: {
+                "blue-glow": "0px 0px 32px rgba(11, 33, 91, 0.5)"
+            },
+            boxShadow: {
+                "inner-button":
+                    "2px 2px 4px rgba(0, 0, 0, 0.1), inset 2px 2px 4px rgba(255, 255, 255, 0.1), inset -2px -2px 6px rgba(0, 0, 0, 0.2)",
+                "inner-button-disabled":
+                    "2px 2px 4px rgba(0, 0, 0, 0.05), inset 2px 2px 4px rgba(255, 255, 255, 0.05), inset -2px -2px 6px rgba(0, 0, 0, 0.1)",
+                "fancy-card": "0px 4px 4px rgba(0, 0, 0, 0.1)",
+                "subtle-bevel":
+                    "inset -4px -4px 6px 0 rgba(0, 0, 0, 0.10), inset 4px 4px 4px 0 rgba(255, 255, 255, 0.10)",
+                above: "0px -4px 10px rgba(0, 0, 0, 0.25)"
+            },
+            textShadow: {
+                button: "1px 1px 0px rgba(0, 0, 0, 0.4)"
+            }
+        }
+    },
+    plugins: [
+        // default prefix is "ui"
+        require("@kobalte/tailwindcss"),
+        plugin(function ({ addUtilities }) {
+            const newUtilities = {
+                ".safe-top": {
+                    paddingTop: "constant(safe-area-inset-top)"
+                },
+                ".safe-left": {
+                    paddingLeft: "constant(safe-area-inset-left)"
+                },
+                ".safe-right": {
+                    paddingRight: "constant(safe-area-inset-right)"
+                },
+                ".safe-bottom": {
+                    paddingBottom: "constant(safe-area-inset-bottom)"
+                },
+                ".disable-scrollbars": {
+                    scrollbarWidth: "none",
+                    "-ms-overflow-style": "none",
+                    "&::-webkit-scrollbar": {
+                        width: "0px",
+                        background: "transparent",
+                        display: "none"
+                    },
+                    "& *::-webkit-scrollbar": {
+                        width: "0px",
+                        background: "transparent",
+                        display: "none"
+                    },
+                    "& *": {
+                        scrollbarWidth: "none",
+                        "-ms-overflow-style": "none"
+                    }
+                }
+            };
+            addUtilities(newUtilities);
+        }),
+        // Text shadow!
+        plugin(function ({ matchUtilities, theme }) {
+            matchUtilities(
+                {
+                    "text-shadow": (value) => ({
+                        textShadow: value
+                    })
+                },
+                { values: theme("textShadow") }
+            );
+        })
+    ]
+};

packages/ui/tsconfig.json

@@ -0,0 +1,34 @@
+{
+  "compilerOptions": {
+    "allowSyntheticDefaultImports": true,
+    "esModuleInterop": true,
+    "target": "ESNext",
+    "module": "ESNext",
+    "moduleResolution": "node",
+    "jsxImportSource": "solid-js",
+    "jsx": "preserve",
+    "strict": true,
+    "types": ["solid-start/env", "node"],
+    "baseUrl": "./",
+    "paths": {
+      "~/*": ["./src/*"]
+    },
+    "skipLibCheck": true
+  },
+  "include": [
+    "src/**/*",
+    "tailwind.config.cjs",
+    ".eslintrc.cjs"
+  ],
+  "exclude": [
+    "node_modules",
+    "./node_modules",
+    "./node_modules/*",
+    "./node_modules/**/*",
+    "./node_modules/@types/node/index.d.ts",
+    "node_modules/.pnpm/solid-js@1.7.7/node_modules/solid-js/types/*",
+    "node_modules/.pnpm/solid-start@0.3.1_@solidjs+meta@0.28.5_@solidjs+router@0.8.2_solid-js@1.7.9_solid-start-node@0.3.0_vite@4.4.6/node_modules/solid-start/islands/*",
+    "build",
+    "dist"
+  ]
+}

pnpm-workspace.yaml

@@ -0,0 +1,2 @@
+packages:
+  - "packages/*"

src/components/BetaWarningModal.tsx

@@ -2,9 +2,9 @@ import { Dialog } from "@kobalte/core";
 import { ParentComponent, createSignal } from "solid-js";
 import { DIALOG_CONTENT, DIALOG_POSITIONER, OVERLAY } from "./DetailsModal";
 import { ModalCloseButton, SmallHeader } from "./layout";
-import { ExternalLink } from "./layout/ExternalLink";
 import { useI18n } from "~/i18n/context";
 import { useMegaStore } from "~/state/megaStore";
+import { ExternalLink } from "@mutinywallet/ui";
 
 export function BetaWarningModal() {
     const i18n = useI18n();

src/components/DetailsModal.tsx

@@ -28,7 +28,7 @@ import { useCopy } from "~/utils/useCopy";
 import mempoolTxUrl from "~/utils/mempoolTxUrl";
 import { Network } from "~/logic/mutinyWalletSetup";
 import { AmountSmall } from "./Amount";
-import { ExternalLink } from "./layout/ExternalLink";
+import { ExternalLink } from "@mutinywallet/ui";
 import { InfoBox } from "./InfoBox";
 import { useI18n } from "~/i18n/context";
 

src/components/ErrorDisplay.tsx

@@ -7,7 +7,7 @@ import {
     SafeArea,
     SmallHeader
 } from "~/components/layout";
-import { ExternalLink } from "./layout/ExternalLink";
+import { ExternalLink } from "@mutinywallet/ui";
 import { useI18n } from "~/i18n/context";
 
 export default function ErrorDisplay(props: { error: Error }) {

src/components/KitchenSink.tsx

@@ -16,7 +16,7 @@ import eify from "~/utils/eify";
 import { ConfirmDialog } from "~/components/Dialog";
 import { showToast } from "~/components/Toaster";
 import { Network } from "~/logic/mutinyWalletSetup";
-import { ExternalLink } from "./layout/ExternalLink";
+import { ExternalLink } from "@mutinywallet/ui";
 import { Restart } from "./Restart";
 import { ResyncOnchain } from "./ResyncOnchain";
 import { ResetRouter } from "./ResetRouter";

src/components/Logs.tsx

@@ -1,5 +1,5 @@
 import { MutinyWallet } from "@mutinywallet/mutiny-wasm";
-import { Button, InnerCard, NiceP, VStack } from "~/components/layout";
+import { InnerCard, NiceP, VStack, Button } from "~/components/layout";
 import { useI18n } from "~/i18n/context";
 import { downloadTextFile } from "~/utils/download";
 

src/components/MoreInfoModal.tsx

@@ -2,7 +2,7 @@ import { Dialog } from "@kobalte/core";
 import { ParentComponent, createSignal, JSXElement } from "solid-js";
 import { DIALOG_CONTENT, DIALOG_POSITIONER, OVERLAY } from "./DetailsModal";
 import { ModalCloseButton, SmallHeader } from "./layout";
-import { ExternalLink } from "./layout/ExternalLink";
+import { ExternalLink } from "@mutinywallet/ui";
 import help from "~/assets/icons/help.svg";
 import { useI18n } from "~/i18n/context";
 

src/components/PendingNwc.tsx

@@ -1,6 +1,7 @@
 import { NwcProfile } from "@mutinywallet/mutiny-wasm";
 import { formatExpiration } from "~/utils/prettyPrintTime";
-import { Card, LoadingSpinner, VStack } from "./layout";
+import { Card, VStack } from "./layout";
+import { LoadingSpinner } from "@mutinywallet/ui";
 import bolt from "~/assets/icons/bolt.svg";
 import {
     For,

src/components/SetupErrorDisplay.tsx

@@ -6,7 +6,7 @@ import {
     SafeArea,
     SmallHeader
 } from "~/components/layout";
-import { ExternalLink } from "./layout/ExternalLink";
+import { ExternalLink } from "@mutinywallet/ui";
 import { Match, Switch } from "solid-js";
 import { ImportExport } from "./ImportExport";
 import { Logs } from "./Logs";

src/components/layout/Button.tsx

@@ -2,7 +2,7 @@ import { cva, VariantProps } from "class-variance-authority";
 import { children, JSX, ParentComponent, Show, splitProps } from "solid-js";
 import { Dynamic } from "solid-js/web";
 import { A } from "solid-start";
-import { LoadingSpinner } from ".";
+import { LoadingSpinner } from "@mutinywallet/ui";
 
 const button = cva(
     "p-3 rounded-xl font-semibold transition disabled:bg-neutral-400/10 disabled:text-white/20 disabled:shadow-inner-button-disabled",

src/components/layout/index.tsx

@@ -25,6 +25,7 @@ import { A } from "solid-start";
 import down from "~/assets/icons/down.svg";
 import { DecryptDialog } from "../DecryptDialog";
 import { LoadingIndicator } from "~/components/LoadingIndicator";
+import { LoadingSpinner } from "@mutinywallet/ui";
 import { useI18n } from "~/i18n/context";
 
 export { Button, ButtonLink, Linkify };
@@ -182,35 +183,6 @@ export const MutinyWalletGuard: ParentComponent = (props) => {
     );
 };
 
-export const LoadingSpinner = (props: { big?: boolean; wide?: boolean }) => {
-    return (
-        <div
-            role="status"
-            class="w-full"
-            classList={{
-                "flex justify-center": props.wide,
-                "h-full grid": props.big
-            }}
-        >
-            <svg
-                class="w-8 h-8 mr-2 text-gray-200 animate-spin fill-m-red place-self-center"
-                viewBox="0 0 100 101"
-                fill="none"
-                xmlns="http://www.w3.org/2000/svg"
-            >
-                <path
-                    d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-                    fill="currentColor"
-                />
-                <path
-                    d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-                    fill="currentFill"
-                />
-            </svg>
-        </div>
-    );
-};
-
 export const Hr = () => <Separator.Root class="my-4 border-m-grey-750" />;
 
 export const LargeHeader: ParentComponent<{

src/root.tsx

@@ -12,7 +12,8 @@ import {
     Scripts,
     Title
 } from "solid-start";
-import "./root.css";
+// eslint-disable-next-line
+import "@mutinywallet/ui/style.css";
 import { Provider as MegaStoreProvider } from "~/state/megaStore";
 import { Toaster } from "~/components/Toaster";
 import ErrorDisplay from "./components/ErrorDisplay";

src/routes/Feedback.tsx

@@ -20,7 +20,7 @@ import {
     VStack
 } from "~/components/layout";
 import { BackPop } from "~/components/layout/BackPop";
-import { ExternalLink } from "~/components/layout/ExternalLink";
+import { ExternalLink } from "@mutinywallet/ui";
 import { StyledRadioGroup } from "~/components/layout/Radio";
 import { TextField } from "~/components/layout/TextField";
 import feedback from "~/assets/icons/feedback.svg";

src/routes/Receive.tsx

@@ -23,6 +23,7 @@ import {
     SafeArea,
     SimpleDialog
 } from "~/components/layout";
+import { ExternalLink } from "@mutinywallet/ui";
 import NavBar from "~/components/NavBar";
 import { useMegaStore } from "~/state/megaStore";
 import { objectToSearchParams } from "~/utils/objectToSearchParams";
@@ -39,7 +40,6 @@ import { MutinyTagItem } from "~/utils/tags";
 import { Network } from "~/logic/mutinyWalletSetup";
 import { SuccessModal } from "~/components/successfail/SuccessModal";
 import { MegaCheck } from "~/components/successfail/MegaCheck";
-import { ExternalLink } from "~/components/layout/ExternalLink";
 import { InfoBox } from "~/components/InfoBox";
 import { FeesModal } from "~/components/MoreInfoModal";
 import { IntegratedQr } from "~/components/IntegratedQR";

src/routes/Redshift.tsx

@@ -20,10 +20,10 @@ import {
     UtxoItem
 } from "~/components/Activity";
 import {
+    Button,
     Card,
     DefaultMain,
     LargeHeader,
-    LoadingSpinner,
     NiceP,
     MutinyWalletGuard,
     SafeArea,
@@ -31,13 +31,13 @@ import {
     SmallHeader,
     VStack
 } from "~/components/layout";
+import { LoadingSpinner } from "@mutinywallet/ui";
 import { BackLink } from "~/components/layout/BackLink";
 import { StyledRadioGroup } from "~/components/layout/Radio";
 import NavBar from "~/components/NavBar";
 import { useMegaStore } from "~/state/megaStore";
 import wave from "~/assets/wave.gif";
 import utxoIcon from "~/assets/icons/coin.svg";
-import { Button } from "~/components/layout/Button";
 import { ProgressBar } from "~/components/layout/ProgressBar";
 import { MutinyChannel } from "@mutinywallet/mutiny-wasm";
 import mempoolTxUrl from "~/utils/mempoolTxUrl";

src/routes/Send.tsx

@@ -40,7 +40,7 @@ import { MutinyTagItem } from "~/utils/tags";
 import { BackButton } from "~/components/layout/BackButton";
 import { Network } from "~/logic/mutinyWalletSetup";
 import { SuccessModal } from "~/components/successfail/SuccessModal";
-import { ExternalLink } from "~/components/layout/ExternalLink";
+import { ExternalLink } from "@mutinywallet/ui";
 import { InfoBox } from "~/components/InfoBox";
 import { useI18n } from "~/i18n/context";
 import { ParsedParams, toParsedParams } from "~/logic/waila";

src/routes/Swap.tsx

@@ -32,7 +32,7 @@ import { InfoBox } from "~/components/InfoBox";
 import { useNavigate } from "solid-start";
 import mempoolTxUrl from "~/utils/mempoolTxUrl";
 import { SuccessModal } from "~/components/successfail/SuccessModal";
-import { ExternalLink } from "~/components/layout/ExternalLink";
+import { ExternalLink } from "@mutinywallet/ui";
 import { Network } from "~/logic/mutinyWalletSetup";
 import { useI18n } from "~/i18n/context";
 import { AmountFiat } from "~/components/Amount";

src/routes/settings/EmergencyKit.tsx

@@ -12,7 +12,7 @@ import {
     VStack
 } from "~/components/layout";
 import { BackLink } from "~/components/layout/BackLink";
-import { ExternalLink } from "~/components/layout/ExternalLink";
+import { ExternalLink } from "@mutinywallet/ui";
 import { useI18n } from "~/i18n/context";
 
 function EmergencyStack() {

src/routes/settings/Encrypt.tsx

@@ -1,12 +1,12 @@
 import {
     Button,
+    ButtonLink,
     DefaultMain,
     LargeHeader,
     NiceP,
     MutinyWalletGuard,
     SafeArea,
-    VStack,
-    ButtonLink
+    VStack
 } from "~/components/layout";
 import NavBar from "~/components/NavBar";
 import { useMegaStore } from "~/state/megaStore";

src/routes/settings/Servers.tsx

@@ -15,7 +15,7 @@ import {
 } from "~/components/layout";
 import { showToast } from "~/components/Toaster";
 import eify from "~/utils/eify";
-import { ExternalLink } from "~/components/layout/ExternalLink";
+import { ExternalLink } from "@mutinywallet/ui";
 import { BackLink } from "~/components/layout/BackLink";
 import NavBar from "~/components/NavBar";
 import { useI18n } from "~/i18n/context";

tailwind.config.cjs

@@ -1,116 +1,6 @@
-const plugin = require("tailwindcss/plugin");
-
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-    content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-    safelist: [
-        "grid-cols-1",
-        "grid-cols-2",
-        "gap-2",
-        "gap-4",
-        "outline-m-red",
-        "outline-m-blue"
-    ],
-    variants: {
-        extend: {
-            borderWidth: ["responsive", "last", "hover", "focus"]
-        }
-    },
-    theme: {
-        extend: {
-            colors: {
-                "half-black": "rgba(0, 0, 0, 0.5)",
-                "faint-white": "rgba(255, 255, 255, 0.1)",
-                "light-text": "rgba(250, 245, 234, 0.5)",
-                "m-green": "hsla(163, 70%, 38%, 1)",
-                "m-green-dark": "hsla(163, 70%, 28%, 1)",
-                "m-blue": "hsla(220, 59%, 52%, 1)",
-                "m-blue-400": "hsla(219, 57%, 52%, 1)",
-                "m-blue-dark": "hsla(220, 59%, 42%, 1)",
-                "m-red": "hsla(343, 92%, 54%, 1)",
-                "m-red-dark": "hsla(343, 92%, 44%, 1)",
-                "sidebar-gray": "hsla(222, 15%, 7%, 1)",
-                "m-grey-350": "hsla(0, 0%, 73%, 1)",
-                "m-grey-400": "hsla(0, 0%, 64%, 1)",
-                "m-grey-700": "hsla(0, 0%, 25%, 1)",
-                "m-grey-750": "hsla(0, 0%, 17%, 1)",
-                "m-grey-800": "hsla(0, 0%, 12%, 1)",
-                "m-grey-900": "hsla(0, 0%, 9%, 1)"
-            },
-            backgroundImage: {
-                "fade-to-blue":
-                    "linear-gradient(1.63deg, #0B215B 32.05%, rgba(11, 33, 91, 0) 84.78%)",
-                "subtle-fade":
-                    "linear-gradient(180deg, #060A13 0%, #131E39 100%)",
-                "richer-fade":
-                    "linear-gradient(180deg, hsla(224, 20%, 8%, 1) 0%, hsla(224, 20%, 15%, 1) 100%)"
-            },
-            dropShadow: {
-                "blue-glow": "0px 0px 32px rgba(11, 33, 91, 0.5)"
-            },
-            boxShadow: {
-                "inner-button":
-                    "2px 2px 4px rgba(0, 0, 0, 0.1), inset 2px 2px 4px rgba(255, 255, 255, 0.1), inset -2px -2px 6px rgba(0, 0, 0, 0.2)",
-                "inner-button-disabled":
-                    "2px 2px 4px rgba(0, 0, 0, 0.05), inset 2px 2px 4px rgba(255, 255, 255, 0.05), inset -2px -2px 6px rgba(0, 0, 0, 0.1)",
-                "fancy-card": "0px 4px 4px rgba(0, 0, 0, 0.1)",
-                "subtle-bevel":
-                    "inset -4px -4px 6px 0 rgba(0, 0, 0, 0.10), inset 4px 4px 4px 0 rgba(255, 255, 255, 0.10)",
-                above: "0px -4px 10px rgba(0, 0, 0, 0.25)"
-            },
-            textShadow: {
-                button: "1px 1px 0px rgba(0, 0, 0, 0.4)"
-            }
-        }
-    },
-    plugins: [
-        // default prefix is "ui"
-        require("@kobalte/tailwindcss"),
-        plugin(function ({ addUtilities }) {
-            const newUtilities = {
-                ".safe-top": {
-                    paddingTop: "constant(safe-area-inset-top)"
-                },
-                ".safe-left": {
-                    paddingLeft: "constant(safe-area-inset-left)"
-                },
-                ".safe-right": {
-                    paddingRight: "constant(safe-area-inset-right)"
-                },
-                ".safe-bottom": {
-                    paddingBottom: "constant(safe-area-inset-bottom)"
-                },
-                ".disable-scrollbars": {
-                    scrollbarWidth: "none",
-                    "-ms-overflow-style": "none",
-                    "&::-webkit-scrollbar": {
-                        width: "0px",
-                        background: "transparent",
-                        display: "none"
-                    },
-                    "& *::-webkit-scrollbar": {
-                        width: "0px",
-                        background: "transparent",
-                        display: "none"
-                    },
-                    "& *": {
-                        scrollbarWidth: "none",
-                        "-ms-overflow-style": "none"
-                    }
-                }
-            };
-            addUtilities(newUtilities);
-        }),
-        // Text shadow!
-        plugin(function ({ matchUtilities, theme }) {
-            matchUtilities(
-                {
-                    "text-shadow": (value) => ({
-                        textShadow: value
-                    })
-                },
-                { values: theme("textShadow") }
-            );
-        })
+    presets: [
+        require('@mutinywallet/ui/tailwind.config.cjs')
     ]
 };

turbo.json

@@ -0,0 +1,9 @@
+{
+  "$schema": "https://turbo.build/schema.json",
+  "pipeline": {
+    "build": {
+      "outputs": ["dist/**"]
+    },
+    "lint": {}
+  }
+}