nostr
/
primal-web-app
mirror of https://github.com/PrimalHQ/primal-web-app.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Add Kobalt and setup ButtonPrimary and ButtonSecondary

This commit is contained in:
Bojan Mojsilovic 2023-09-19 19:01:42 +02:00
parent 5d1246e46d
commit 995a6207b0
6 changed files with 291 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

199
package-lock.json generated
View File

@ -1,16 +1,17 @@
{
"name": "primal-web-app",
"version": "0.78.0",
"version": "0.79.2",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "primal-web-app",
"version": "0.78.0",
"version": "0.79.2",
"license": "MIT",
"dependencies": {
"@cookbook/solid-intl": "0.1.2",
"@jukben/emoji-search": "3.0.0",
"@kobalte/core": "^0.11.0",
"@picocss/pico": "1.5.10",
"@scure/base": "1.1.3",
"@solidjs/router": "0.8.3",
@ -512,6 +513,28 @@
"node": ">=12"
}
},
"node_modules/@floating-ui/core": {
"version": "1.5.0",
"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.5.0.tgz",
"integrity": "sha512-kK1h4m36DQ0UHGj5Ah4db7R0rHemTqqO0QLvUqi1/mUUp3LuAWbWxdxSIf/XsnH9VS6rRVPLJCncjRzUvyCLXg==",
"dependencies": {
"@floating-ui/utils": "^0.1.3"
}
},
"node_modules/@floating-ui/dom": {
"version": "1.5.3",
"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.5.3.tgz",
"integrity": "sha512-ClAbQnEqJAKCJOEbbLo5IUlZHkNszqhuxS4fHAVxRPXPya6Ysf2G8KypnYcOTpx6I8xcgF9bbHb6g/2KpbV8qA==",
"dependencies": {
"@floating-ui/core": "^1.4.2",
"@floating-ui/utils": "^0.1.3"
}
},
"node_modules/@floating-ui/utils": {
"version": "0.1.4",
"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.4.tgz",
"integrity": "sha512-qprfWkn82Iw821mcKofJ5Pk9wgioHicxcQMxx+5zt5GSKoqdWvgG5AxVmpmUUjzTLPVSH5auBrhI93Deayn/DA=="
},
"node_modules/@formatjs/cli": {
"version": "6.1.5",
"dev": true,
@ -609,6 +632,31 @@
"tslib": "^2.4.0"
}
},
"node_modules/@internationalized/date": {
"version": "3.5.0",
"resolved": "https://registry.npmjs.org/@internationalized/date/-/date-3.5.0.tgz",
"integrity": "sha512-nw0Q+oRkizBWMioseI8+2TeUPEyopJVz5YxoYVzR0W1v+2YytiYah7s/ot35F149q/xAg4F1gT/6eTd+tsUpFQ==",
"dependencies": {
"@swc/helpers": "^0.5.0"
}
},
"node_modules/@internationalized/message": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/@internationalized/message/-/message-3.1.1.tgz",
"integrity": "sha512-ZgHxf5HAPIaR0th+w0RUD62yF6vxitjlprSxmLJ1tam7FOekqRSDELMg4Cr/DdszG5YLsp5BG3FgHgqquQZbqw==",
"dependencies": {
"@swc/helpers": "^0.5.0",
"intl-messageformat": "^10.1.0"
}
},
"node_modules/@internationalized/number": {
"version": "3.2.1",
"resolved": "https://registry.npmjs.org/@internationalized/number/-/number-3.2.1.tgz",
"integrity": "sha512-hK30sfBlmB1aIe3/OwAPg9Ey0DjjXvHEiGVhNaOiBJl31G0B6wMaX8BN3ibzdlpyRNE9p7X+3EBONmxtJO9Yfg==",
"dependencies": {
"@swc/helpers": "^0.5.0"
}
},
"node_modules/@jridgewell/gen-mapping": {
"version": "0.3.3",
"dev": true,
@ -663,6 +711,38 @@
"node": ">=12.0.0"
}
},
"node_modules/@kobalte/core": {
"version": "0.11.0",
"resolved": "https://registry.npmjs.org/@kobalte/core/-/core-0.11.0.tgz",
"integrity": "sha512-KflwKawdAXv1/W1Eh88SPTwpxGTVs7bAGkkW72w6pnRI3hcFWXEH+E/9CojoFrIc3WVBUT+y7GzaYLOKCailDw==",
"dependencies": {
"@floating-ui/dom": "^1.5.1",
"@internationalized/date": "^3.4.0",
"@internationalized/message": "^3.1.1",
"@internationalized/number": "^3.2.1",
"@kobalte/utils": "^0.9.0"
},
"peerDependencies": {
"solid-js": "^1.7.11"
}
},
"node_modules/@kobalte/utils": {
"version": "0.9.0",
"resolved": "https://registry.npmjs.org/@kobalte/utils/-/utils-0.9.0.tgz",
"integrity": "sha512-TYVCpQcpqo1+0HBn3NXoGEBzxd4tH6Um1oc07nrYw1V7Qq0qbMaYAOnfBc1qhlh7sGV4XZldmb0j13Of0FrZQg==",
"dependencies": {
"@solid-primitives/event-listener": "^2.2.14",
"@solid-primitives/keyed": "^1.2.0",
"@solid-primitives/map": "^0.4.7",
"@solid-primitives/media": "^2.2.4",
"@solid-primitives/props": "^3.1.8",
"@solid-primitives/refs": "^1.0.5",
"@solid-primitives/utils": "^6.2.1"
},
"peerDependencies": {
"solid-js": "^1.7.11"
}
},
"node_modules/@noble/ciphers": {
"version": "0.2.0",
"license": "MIT",
@ -724,6 +804,113 @@
"url": "https://paulmillr.com/funding/"
}
},
"node_modules/@solid-primitives/event-listener": {
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/@solid-primitives/event-listener/-/event-listener-2.3.0.tgz",
"integrity": "sha512-0DS7DQZvCExWSpurVZC9/wjI8RmkhuOtWOy6Pp1Woq9ElMT9/bfjNpkwXsOwisLpcTqh9eUs17kp7jtpWcC20w==",
"dependencies": {
"@solid-primitives/utils": "^6.2.1"
},
"peerDependencies": {
"solid-js": "^1.6.12"
}
},
"node_modules/@solid-primitives/keyed": {
"version": "1.2.0",
"resolved": "https://registry.npmjs.org/@solid-primitives/keyed/-/keyed-1.2.0.tgz",
"integrity": "sha512-0DuTeJdxWjCTu73XnDZs24JzfXckBnpvCfQ6Mf/kTPKkMZJh7tjkBnZEk48ckrE9xmwat9stIdfrBmZctsepIw==",
"peerDependencies": {
"solid-js": "^1.6.12"
}
},
"node_modules/@solid-primitives/map": {
"version": "0.4.8",
"resolved": "https://registry.npmjs.org/@solid-primitives/map/-/map-0.4.8.tgz",
"integrity": "sha512-p9zhIaIWOQVxLaUEjg6nzrBLZUOzozJFHatdKqISSIq7iJhVXX1M1MPzDHHqKyJw/nSENoKgvZehnG3HErnamw==",
"dependencies": {
"@solid-primitives/trigger": "^1.0.8"
},
"peerDependencies": {
"solid-js": "^1.6.12"
}
},
"node_modules/@solid-primitives/media": {
"version": "2.2.5",
"resolved": "https://registry.npmjs.org/@solid-primitives/media/-/media-2.2.5.tgz",
"integrity": "sha512-wTESNFteSwOZsNIBPLMIVLuOHIIzt2AIZdaCYYxfsJIr/xjDqSomlmdFlAmxfJD3ondO7fwtWfc0rcmAvjoPCA==",
"dependencies": {
"@solid-primitives/event-listener": "^2.3.0",
"@solid-primitives/rootless": "^1.4.2",
"@solid-primitives/static-store": "^0.0.5",
"@solid-primitives/utils": "^6.2.1"
},
"peerDependencies": {
"solid-js": "^1.6.12"
}
},
"node_modules/@solid-primitives/props": {
"version": "3.1.8",
"resolved": "https://registry.npmjs.org/@solid-primitives/props/-/props-3.1.8.tgz",
"integrity": "sha512-38ERNFhl87emUDPRlYvCmlbvEcK2mOJB38SU22YS2QXFDK7TQf/7P46XZacs7oODc/fckhfZTitht71FMEDe2g==",
"dependencies": {
"@solid-primitives/utils": "^6.2.1"
},
"peerDependencies": {
"solid-js": "^1.6.12"
}
},
"node_modules/@solid-primitives/refs": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@solid-primitives/refs/-/refs-1.0.5.tgz",
"integrity": "sha512-5hmYmYbm6rs43nMHHozyyUngGA7P7q2WtlaCLJEfmlUJf67GWI1PZmqAiol6m9F37XSMZRuvZLoQ7HA/0q3GYg==",
"dependencies": {
"@solid-primitives/utils": "^6.2.1"
},
"peerDependencies": {
"solid-js": "^1.6.12"
}
},
"node_modules/@solid-primitives/rootless": {
"version": "1.4.2",
"resolved": "https://registry.npmjs.org/@solid-primitives/rootless/-/rootless-1.4.2.tgz",
"integrity": "sha512-ynI/2aEOPyc14IKCX6yDBqnsAYCoLbaP9V/jejEWMVKOT2ZdV2ZxdftaLimOpWPpvjyti5DUJIGTOfLaNb7jlg==",
"dependencies": {
"@solid-primitives/utils": "^6.2.1"
},
"peerDependencies": {
"solid-js": "^1.6.12"
}
},
"node_modules/@solid-primitives/static-store": {
"version": "0.0.5",
"resolved": "https://registry.npmjs.org/@solid-primitives/static-store/-/static-store-0.0.5.tgz",
"integrity": "sha512-ssQ+s/wrlFAEE4Zw8GV499yBfvWx7SMm+ZVc11wvao4T5xg9VfXCL9Oa+x4h+vPMvSV/Knv5LrsLiUa+wlJUXQ==",
"dependencies": {
"@solid-primitives/utils": "^6.2.1"
},
"peerDependencies": {
"solid-js": "^1.6.12"
}
},
"node_modules/@solid-primitives/trigger": {
"version": "1.0.8",
"resolved": "https://registry.npmjs.org/@solid-primitives/trigger/-/trigger-1.0.8.tgz",
"integrity": "sha512-p9e3FGhCk8sRPxDiCT8vnTE+DOEtrAnJZP4zV0NAV6YGnpV50JATVXNiLjKgyiI/mTIRkWB0+9c5SUbRlqFx6A==",
"dependencies": {
"@solid-primitives/utils": "^6.2.1"
},
"peerDependencies": {
"solid-js": "^1.6.12"
}
},
"node_modules/@solid-primitives/utils": {
"version": "6.2.1",
"resolved": "https://registry.npmjs.org/@solid-primitives/utils/-/utils-6.2.1.tgz",
"integrity": "sha512-TsecNzxiO5bLfzqb4OOuzfUmdOROcssuGqgh5rXMMaasoFZ3GoveUgdY1wcf17frMJM7kCNGNuK34EjErneZkg==",
"peerDependencies": {
"solid-js": "^1.6.12"
}
},
"node_modules/@solidjs/router": {
"version": "0.8.3",
"license": "MIT",
@ -731,6 +918,14 @@
"solid-js": "^1.5.3"
}
},
"node_modules/@swc/helpers": {
"version": "0.5.2",
"resolved": "https://registry.npmjs.org/@swc/helpers/-/helpers-0.5.2.tgz",
"integrity": "sha512-E4KcWTpoLHqwPHLxidpOqQbcrZVgi0rsmmZXUle1jXmJfuIf/UWpczUJ7MZZ5tlxytgJXyp0w4PGkkeLiuIdZw==",
"dependencies": {
"tslib": "^2.4.0"
}
},
"node_modules/@thisbeyond/solid-select": {
"version": "0.13.0",
"license": "MIT",

1
package.json
View File

@ -23,6 +23,7 @@
"dependencies": {
"@cookbook/solid-intl": "0.1.2",
"@jukben/emoji-search": "3.0.0",
"@kobalte/core": "^0.11.0",
"@picocss/pico": "1.5.10",
"@scure/base": "1.1.3",
"@solidjs/router": "0.8.3",

2
src/Router.tsx
View File

@ -1,7 +1,7 @@
import { Component, createResource, lazy } from 'solid-js';
import { Routes, Route, Navigate, RouteDataFuncArgs } from "@solidjs/router";
import { ComponentLog, PrimalWindow } from './types/primal';
import { PrimalWindow } from './types/primal';
import { fetchKnownProfiles } from './lib/profile';
import { useHomeContext } from './contexts/HomeContext';

27
src/components/Buttons/ButtonPrimary.tsx Normal file
View File

@ -0,0 +1,27 @@
import { Component, JSXElement, Match, Show, Switch } from 'solid-js';
import { hookForDev } from '../../lib/devTools';
import { Button } from "@kobalte/core";
import styles from './Buttons.module.scss';
const ButtonPrimary: Component<{
id?: string,
onClick?: (e: MouseEvent) => void,
children?: JSXElement,
disabled?: boolean,
}> = (props) => {
return (
<Button.Root
id={props.id}
class={styles.primary}
onClick={props.onClick}
disabled={props.disabled}
>
<span>
{props.children}
</span>
</Button.Root>
)
}
export default hookForDev(ButtonPrimary);

29
src/components/Buttons/ButtonSecondary.tsx Normal file
View File

@ -0,0 +1,29 @@
import { Component, JSXElement, Match, Show, Switch } from 'solid-js';
import { hookForDev } from '../../lib/devTools';
import { Button } from "@kobalte/core";
import styles from './Buttons.module.scss';
const ButtonSecondary: Component<{
id?: string,
onClick?: (e: MouseEvent) => void,
children?: JSXElement,
disabled?: boolean,
}> = (props) => {
return (
<Button.Root
id={props.id}
class={styles.secondary}
onClick={props.onClick}
disabled={props.disabled}
>
<div>
<span>
{props.children}
</span>
</div>
</Button.Root>
);
}
export default hookForDev(ButtonSecondary);

36
src/components/Buttons/Buttons.module.scss Normal file
View File

@ -0,0 +1,36 @@
.primary {
border: none;
border-radius: 6px;
margin: 0px 8px;
padding: 0px;
font-size: 14px;
line-height: 20px;
font-weight: 700;
background: var(--brand-gradient-vertical);
color: white;
>span {
opacity: 0.75;
}
}
.secondary {
border: none;
border-radius: 6px;
padding: 1px;
font-size: 14px;
line-height: 20px;
font-weight: 700;
background: var(--brand-gradient-vertical);
color: var(--text-tertiary-2);
>div {
width: 100%;
height: 100%;
vertical-align: middle;
border-radius: 6px;
background-color: var(--background-card);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
}