aljaz/mutiny-web
1
0
Fork 0
mirror of https://github.com/aljazceru/mutiny-web.git synced 2025-12-18 06:44:27 +01:00
Code Issues Packages Projects Releases Wiki Activity

remove storybook and turbo

Browse Source
This commit is contained in:
Paul Miller
2023-09-06 15:45:12 -07:00
parent 8c2c24bcf3
commit 294547b1ee
49 changed files with 998 additions and 16081 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
.github/workflows/android-build.yml vendored
View File

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

7
.github/workflows/code-quality.yml vendored
View File

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

3
.github/workflows/playwright.yml vendored
View File

@@ -44,9 +44,6 @@ 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

7
package.json
View File

@@ -4,10 +4,9 @@
"license": "MIT",
"packageManager": "pnpm@8.6.6",
"scripts": {
"dev": "pnpm run build-submodules && solid-start dev",
"dev": "solid-start dev",
"host": "solid-start dev --host",
"build-submodules": "turbo run build",
"build": "pnpm run build-submodules && solid-start build && node insertHead.js",
"build": "solid-start build && node insertHead.js",
"start": "solid-start start",
"check-types": "tsc --noemit",
"eslint": "eslint src",
@@ -55,7 +54,6 @@
"@modular-forms/solid": "^0.18.1",
"@mutinywallet/barcode-scanner": "5.0.0-beta.3",
"@mutinywallet/mutiny-wasm": "0.4.16",
"@mutinywallet/ui": "workspace:*",
"@mutinywallet/waila-wasm": "^0.2.1",
"@nostr-dev-kit/ndk": "^0.8.11",
"@solid-primitives/upload": "^0.0.111",
@@ -67,7 +65,6 @@
"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": {

28
packages/ui/.gitignore vendored
View File

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

9
packages/ui/.prettierrc
View File

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

19
packages/ui/.storybook/main.ts
View File

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

29
packages/ui/.storybook/preview.ts
View File

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

22
packages/ui/LICENSE
View File

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

38
packages/ui/README.md
View File

@@ -1,38 +0,0 @@
# 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')
]
};
```

72
packages/ui/package.json
View File

@@ -1,72 +0,0 @@
{
"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"
}
}

9019
packages/ui/pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

12
packages/ui/postcss.config.cjs
View File

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

26
packages/ui/rollup.config.js
View File

@@ -1,26 +0,0 @@
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",
cache: false,
plugins: [
image(),
css({ output: "style.css" }),
stripCSSImport()
],
});

2
packages/ui/src/components/index.tsx
View File

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

3
packages/ui/src/index.tsx
View File

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

37
packages/ui/src/stories/ExternalLink.stories.tsx
View File

@@ -1,37 +0,0 @@
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"
}
};

40
packages/ui/src/stories/LoadingSpinner.stories.tsx
View File

@@ -1,40 +0,0 @@
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
}
};

17
packages/ui/src/stories/Page.stories.ts
View File

@@ -1,17 +0,0 @@
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 = {};

78
packages/ui/src/stories/Page.tsx
View File

@@ -1,78 +0,0 @@
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>
);
};

189
packages/ui/src/stories/Welcome.mdx
View File

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

73
packages/ui/src/stories/page.css
View File

@@ -1,73 +0,0 @@
#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;
}

116
packages/ui/tailwind.config.cjs
View File

@@ -1,116 +0,0 @@
const plugin = require("tailwindcss/plugin");
/** @type {import('tailwindcss').Config} */
module.exports = {
content: ["./index.html", "./node_modules/@mutinywallet/ui/src/**/*.{js,ts,jsx,tsx}", "./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") }
);
})
]
};

34
packages/ui/tsconfig.json
View File

@@ -1,34 +0,0 @@
{
"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"
]
}

7003
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

2
pnpm-workspace.yaml
View File

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

2
src/components/BetaWarningModal.tsx
View File

@@ -1,10 +1,10 @@
import { Dialog } from "@kobalte/core";
import { ExternalLink } from "@mutinywallet/ui";
import { createSignal, ParentComponent } from "solid-js";
import {
DIALOG_CONTENT,
DIALOG_POSITIONER,
ExternalLink,
ModalCloseButton,
OVERLAY,
SmallHeader

2
src/components/DetailsModal.tsx
View File

@@ -1,6 +1,5 @@
import { Dialog } from "@kobalte/core";
import { MutinyChannel, MutinyInvoice } from "@mutinywallet/mutiny-wasm";
import { ExternalLink } from "@mutinywallet/ui";
import {
createEffect,
createMemo,
@@ -21,6 +20,7 @@ import {
ActivityAmount,
AmountSmall,
CopyButton,
ExternalLink,
HackActivityType,
Hr,
InfoBox,

2
src/components/ErrorDisplay.tsx
View File

@@ -1,6 +1,6 @@
import { ExternalLink } from "@mutinywallet/ui";
import { A, Title } from "solid-start";
import { ExternalLink } from "~/components";
import {
Button,
DefaultMain,

2
src/components/KitchenSink.tsx
View File

@@ -1,6 +1,5 @@
import { Collapsible, TextField } from "@kobalte/core";
import { MutinyChannel, MutinyPeer } from "@mutinywallet/mutiny-wasm";
import { ExternalLink } from "@mutinywallet/ui";
import {
createResource,
createSignal,
@@ -14,6 +13,7 @@ import {
import {
Button,
ConfirmDialog,
ExternalLink,
Hr,
InnerCard,
MiniStringShower,

2
src/components/MoreInfoModal.tsx
View File

@@ -1,11 +1,11 @@
import { Dialog } from "@kobalte/core";
import { ExternalLink } from "@mutinywallet/ui";
import { createSignal, JSXElement, ParentComponent } from "solid-js";
import help from "~/assets/icons/help.svg";
import {
DIALOG_CONTENT,
DIALOG_POSITIONER,
ExternalLink,
ModalCloseButton,
OVERLAY,
SmallHeader

9
src/components/PendingNwc.tsx
View File

@@ -1,5 +1,4 @@
import { NwcProfile } from "@mutinywallet/mutiny-wasm";
import { LoadingSpinner } from "@mutinywallet/ui";
import {
createEffect,
createResource,
@@ -14,7 +13,13 @@ import { A } from "solid-start";
import bolt from "~/assets/icons/bolt.svg";
import greenCheck from "~/assets/icons/green-check.svg";
import redClose from "~/assets/icons/red-close.svg";
import { ActivityAmount, Card, InfoBox, VStack } from "~/components";
import {
ActivityAmount,
Card,
InfoBox,
LoadingSpinner,
VStack
} from "~/components";
import { useI18n } from "~/i18n/context";
import { useMegaStore } from "~/state/megaStore";
import { createDeepSignal, eify, formatExpiration } from "~/utils";

2
src/components/SetupErrorDisplay.tsx
View File

@@ -1,10 +1,10 @@
import { ExternalLink } from "@mutinywallet/ui";
import { Match, Switch } from "solid-js";
import { Title } from "solid-start";
import {
DefaultMain,
DeleteEverything,
ExternalLink,
ImportExport,
LargeHeader,
Logs,

3
src/components/layout/Button.tsx
View File

@@ -1,8 +1,9 @@
import { LoadingSpinner } from "@mutinywallet/ui";
import { JSX, ParentComponent, Show, splitProps } from "solid-js";
import { Dynamic } from "solid-js/web";
import { A } from "solid-start";
import { LoadingSpinner } from "~/components";
// Help from https://github.com/arpadgabor/credee/blob/main/packages/www/src/components/ui/button.tsx
export type CommonButtonStyleProps = {

0
packages/ui/src/components/ExternalLink.tsx → src/components/layout/ExternalLink.tsx
View File

2
packages/ui/src/components/LoadingSpinner.tsx → src/components/layout/LoadingSpinner.tsx
View File

@@ -9,7 +9,7 @@ export const LoadingSpinner = (props: { big?: boolean; wide?: boolean }) => {
}}
>
<svg
class="w-8 h-8 mr-2 text-gray-200 animate-spin fill-m-red place-self-center"
class="mr-2 h-8 w-8 animate-spin place-self-center fill-m-red text-gray-200"
viewBox="0 0 100 101"
fill="none"
xmlns="http://www.w3.org/2000/svg"

3
src/components/layout/Misc.tsx
View File

@@ -4,7 +4,6 @@ import {
Checkbox as KCheckbox,
Separator
} from "@kobalte/core";
import { LoadingSpinner } from "@mutinywallet/ui";
import {
createResource,
createSignal,
@@ -20,7 +19,7 @@ import { A } from "solid-start";
import check from "~/assets/icons/check.svg";
import close from "~/assets/icons/close.svg";
import down from "~/assets/icons/down.svg";
import { DecryptDialog, LoadingIndicator } from "~/components";
import { DecryptDialog, LoadingIndicator, LoadingSpinner } from "~/components";
import { useI18n } from "~/i18n/context";
import { useMegaStore } from "~/state/megaStore";
import { generateGradient, MutinyTagItem } from "~/utils";

2
src/components/layout/index.ts
View File

@@ -7,3 +7,5 @@ export * from "./Misc";
export * from "./ProgressBar";
export * from "./Radio";
export * from "./TextField";
export * from "./ExternalLink";
export * from "./LoadingSpinner";

18
packages/ui/src/index.css → src/root.css
View File

@@ -17,11 +17,11 @@ html {
}
.bg-gradient {
@apply bg-fixed bg-no-repeat bg-gradient-to-b from-black to-[#0b215b];
@apply bg-gradient-to-b from-black to-[#0b215b] bg-fixed bg-no-repeat;
}
.bg-gray {
@apply bg-fixed bg-no-repeat bg-gradient-to-b from-[hsl(224,5%,5%)] to-[hsl(224,5%,20%)];
@apply bg-gradient-to-b from-[hsl(224,5%,5%)] to-[hsl(224,5%,20%)] bg-fixed bg-no-repeat;
}
.react-modal-sheet-container {
@@ -60,8 +60,8 @@ p:not(:last-child) {
select {
@apply appearance-none;
@apply block;
@apply border-[2px] focus:outline-none focus:ring-2 focus:ring-offset-2 ring-offset-black;
@apply font-light text-lg;
@apply border-[2px] ring-offset-black focus:outline-none focus:ring-2 focus:ring-offset-2;
@apply text-lg font-light;
@apply py-4 pl-4 pr-8;
background-image: url("data:image/svg+xml,%3Csvg aria-hidden='true' class='w-4 h-4 ml-1' fill='white' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' d='M5.293 7.293a1 1 0 0 1 1.414 0L10 10.586l3.293-3.293a1 1 0 1 1 1.414 1.414l-4 4a1 1 0 0 1-1.414 0l-4-4a1 1 0 0 1 0-1.414z' clip-rule='evenodd'/%3E%3C/svg%3E");
background-position: right 0.75rem center;
@@ -72,13 +72,3 @@ select {
strong {
@apply font-semibold text-m-red;
}
.slide-fade-enter-active,
.slide-fade-exit-active {
transition: all 0.3s ease;
}
.slide-fade-enter,
.slide-fade-exit-to {
transform: translateX(10px);
opacity: 0;
}

3
src/root.tsx
View File

@@ -14,8 +14,7 @@ import {
useNavigate
} from "solid-start";
// eslint-disable-next-line
import "@mutinywallet/ui/style.css";
import "./root.css";
import { App as CapacitorApp } from "@capacitor/app";
import { Capacitor } from "@capacitor/core";

3
src/routes/Feedback.tsx
View File

@@ -6,12 +6,11 @@ import {
setValue,
SubmitHandler
} from "@modular-forms/solid";
import { ExternalLink } from "@mutinywallet/ui";
import { createSignal, Match, Show, Switch } from "solid-js";
import { A, useLocation } from "solid-start";
import feedback from "~/assets/icons/feedback.svg";
import { InfoBox, MegaCheck, NavBar } from "~/components";
import { ExternalLink, InfoBox, MegaCheck, NavBar } from "~/components";
import {
BackPop,
Button,

2
src/routes/Receive.tsx
View File

@@ -3,7 +3,6 @@ import {
MutinyBip21RawMaterials,
MutinyInvoice
} from "@mutinywallet/mutiny-wasm";
import { ExternalLink } from "@mutinywallet/ui";
import {
createEffect,
createMemo,
@@ -26,6 +25,7 @@ import {
Button,
Card,
DefaultMain,
ExternalLink,
Fee,
FeesModal,
Indicator,

2
src/routes/Redshift.tsx
View File

@@ -1,5 +1,4 @@
import { MutinyChannel } from "@mutinywallet/mutiny-wasm";
import { LoadingSpinner } from "@mutinywallet/ui";
import {
createEffect,
createMemo,
@@ -24,6 +23,7 @@ import {
CENTER_COLUMN,
DefaultMain,
LargeHeader,
LoadingSpinner,
MISSING_LABEL,
MutinyWalletGuard,
NavBar,

2
src/routes/Send.tsx
View File

@@ -1,7 +1,6 @@
import { Clipboard } from "@capacitor/clipboard";
import { Capacitor } from "@capacitor/core";
import { Contact, MutinyInvoice } from "@mutinywallet/mutiny-wasm";
import { ExternalLink } from "@mutinywallet/ui";
import {
createEffect,
createMemo,
@@ -25,6 +24,7 @@ import {
ButtonLink,
Card,
DefaultMain,
ExternalLink,
Fee,
HStack,
InfoBox,

2
src/routes/Swap.tsx
View File

@@ -1,6 +1,5 @@
import { createForm, required } from "@modular-forms/solid";
import { MutinyChannel, MutinyPeer } from "@mutinywallet/mutiny-wasm";
import { ExternalLink } from "@mutinywallet/ui";
import {
createMemo,
createResource,
@@ -19,6 +18,7 @@ import {
Button,
Card,
DefaultMain,
ExternalLink,
InfoBox,
LargeHeader,
MegaCheck,

3
src/routes/settings/EmergencyKit.tsx
View File

@@ -1,9 +1,8 @@
import { ExternalLink } from "@mutinywallet/ui";
import {
BackLink,
DefaultMain,
DeleteEverything,
ExternalLink,
ImportExport,
LargeHeader,
LoadingIndicator,

2
src/routes/settings/Servers.tsx
View File

@@ -1,11 +1,11 @@
import { createForm, url } from "@modular-forms/solid";
import { ExternalLink } from "@mutinywallet/ui";
import {
BackLink,
Button,
Card,
DefaultMain,
ExternalLink,
LargeHeader,
MutinyWalletGuard,
NavBar,

114
tailwind.config.cjs
View File

@@ -1,6 +1,116 @@
const plugin = require("tailwindcss/plugin");
/** @type {import('tailwindcss').Config} */
module.exports = {
presets: [
require('@mutinywallet/ui/tailwind.config.cjs')
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") }
);
})
]
};

9
turbo.json
View File

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