mirror of
https://github.com/ivabus/gui
synced 2025-06-08 00:00:27 +03:00
Merge pull request #40 from teaxyz/search-packages-component
initial dynamic search packages does not resolve #32
This commit is contained in:
Neil
GitHub
commit
8c98b5dac6
67 changed files with 1353 additions and 1091 deletions
22
.github/workflows/ci.yml
vendored
22
.github/workflows/ci.yml
vendored
|
|
@ -40,6 +40,26 @@ jobs:
|
|||
message-id: preview-comment-${{needs.changes.outputs.preview_folder}}
|
||||
message: |
|
||||
no preview or changes related to UI
|
||||
test:
|
||||
needs: changes
|
||||
runs-on: ubuntu-latest
|
||||
steps:
|
||||
- uses: actions/checkout@v3
|
||||
with:
|
||||
persist-credentials: false
|
||||
- uses: pnpm/action-setup@v2
|
||||
with:
|
||||
version: 7
|
||||
- name: setup node
|
||||
uses: actions/setup-node@v1
|
||||
with:
|
||||
node-version: 16
|
||||
cache: 'pnpm'
|
||||
cache-dependency-path: pnpm-lock.yaml
|
||||
- name: install app dependencies
|
||||
run: pnpm install
|
||||
- name: lint
|
||||
run: pnpm -r lint
|
||||
build_svelte:
|
||||
needs: changes
|
||||
if: needs.changes.outputs.svelte == 'true'
|
||||
|
|
@ -62,6 +82,8 @@ jobs:
|
|||
with:
|
||||
toolchain: stable
|
||||
- name: install app dependencies and build it
|
||||
env:
|
||||
BUILD_FOR: preview
|
||||
run: pnpm install && pnpm --filter gui build
|
||||
- uses: aws-actions/configure-aws-credentials@v1
|
||||
with:
|
||||
|
|
|
|||
|
|
@ -11,3 +11,4 @@ node_modules
|
|||
pnpm-lock.yaml
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
src-tauri/target/*
|
||||
|
|
@ -4,10 +4,12 @@ module.exports = {
|
|||
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
|
||||
plugins: ['svelte3', '@typescript-eslint'],
|
||||
ignorePatterns: ['*.cjs'],
|
||||
overrides: [{
|
||||
overrides: [
|
||||
{
|
||||
files: ['*.svelte'],
|
||||
processor: 'svelte3/svelte3'
|
||||
}],
|
||||
}
|
||||
],
|
||||
settings: {
|
||||
'svelte3/typescript': () => require('typescript')
|
||||
},
|
||||
|
|
|
|||
|
|
@ -11,3 +11,11 @@ node_modules
|
|||
pnpm-lock.yaml
|
||||
package-lock.json
|
||||
yarn.lock
|
||||
build
|
||||
/src-tauri/src/*
|
||||
/src-tauri/icons/*
|
||||
/src-tauri/target/**/*
|
||||
/src-tauri/build/*
|
||||
/src-tauri/Cargo.lock
|
||||
/src-tauri/Cargo.toml
|
||||
src-tauri
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
{
|
||||
"tabWidth": 2,
|
||||
"useTabs": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
# @tea/gui
|
||||
|
||||
Desktop app of [tea](https://tea.xyz) for installing packages/softwares
|
||||
|
||||
More interesting and possibly updated documentations are at this [NOTION](https://www.notion.so/teaxyz/tea-gui-fdd9f50aa980432fa370b2cf6a03cb50) page. It is ideal to review it also, its more updated.
|
||||
|
|
@ -29,5 +30,4 @@ You can preview the production build with `npm run preview`.
|
|||
|
||||
## Intuition Building Links
|
||||
|
||||
* [Rust module system is weird?](https://www.sheshbabu.com/posts/rust-module-system/)
|
||||
|
||||
- [Rust module system is weird?](https://www.sheshbabu.com/posts/rust-module-system/)
|
||||
|
|
|
|||
|
|
@ -32,6 +32,7 @@
|
|||
"svelte": "^3.49.0",
|
||||
"svelte-check": "^2.8.0",
|
||||
"svelte-preprocess": "^4.10.7",
|
||||
"svelte2tsx": "^0.5.20",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"tslib": "^2.3.1",
|
||||
"typescript": "^4.7.4",
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
autoprefixer: {}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -15,10 +15,7 @@
|
|||
"http": {
|
||||
"all": true,
|
||||
"request": true,
|
||||
"scope": [
|
||||
"https://api.tea.xyz/v1/*",
|
||||
"https://github.com/*"
|
||||
]
|
||||
"scope": ["https://api.tea.xyz/v1/*", "https://github.com/*"]
|
||||
},
|
||||
"shell": {
|
||||
"all": false,
|
||||
|
|
|
|||
|
|
@ -3,13 +3,13 @@
|
|||
@tailwind utilities;
|
||||
|
||||
@font-face {
|
||||
font-family: "pp-neue-machina";
|
||||
src: url("/fonts/PPNeueMachina-InktrapLight.woff");
|
||||
font-family: 'pp-neue-machina';
|
||||
src: url('/fonts/PPNeueMachina-InktrapLight.woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "sono";
|
||||
src: url("/fonts/Sono-Light.woff2");
|
||||
font-family: 'sono';
|
||||
src: url('/fonts/Sono-Light.woff2');
|
||||
}
|
||||
|
||||
html {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import "$appcss";
|
||||
import Placeholder from "$components/Placeholder/Placeholder.svelte";
|
||||
import '$appcss';
|
||||
import Placeholder from '$components/Placeholder/Placeholder.svelte';
|
||||
</script>
|
||||
|
||||
<Placeholder label="Badges" />
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import "$appcss";
|
||||
import Placeholder from "$components/Placeholder/Placeholder.svelte";
|
||||
import '$appcss';
|
||||
import Placeholder from '$components/Placeholder/Placeholder.svelte';
|
||||
</script>
|
||||
|
||||
<Placeholder label="BigBlackSpace" />
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import "$appcss";
|
||||
import Placeholder from "$components/Placeholder/Placeholder.svelte";
|
||||
import '$appcss';
|
||||
import Placeholder from '$components/Placeholder/Placeholder.svelte';
|
||||
</script>
|
||||
|
||||
<Placeholder label="CLI Hero" />
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import "$appcss";
|
||||
import Placeholder from "$components/Placeholder/Placeholder.svelte";
|
||||
import '$appcss';
|
||||
import Placeholder from '$components/Placeholder/Placeholder.svelte';
|
||||
</script>
|
||||
|
||||
<Placeholder label="EssentialWorkshops" />
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import "$appcss";
|
||||
import Placeholder from "$components/Placeholder/Placeholder.svelte";
|
||||
import '$appcss';
|
||||
import Placeholder from '$components/Placeholder/Placeholder.svelte';
|
||||
</script>
|
||||
|
||||
<Placeholder label="FeaturedCourses" />
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import "$appcss";
|
||||
import Placeholder from "$components/Placeholder/Placeholder.svelte";
|
||||
import '$appcss';
|
||||
import Placeholder from '$components/Placeholder/Placeholder.svelte';
|
||||
</script>
|
||||
|
||||
<Placeholder label="FeaturedPackages" />
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import "$appcss";
|
||||
import Placeholder from "$components/Placeholder/Placeholder.svelte";
|
||||
import '$appcss';
|
||||
import Placeholder from '$components/Placeholder/Placeholder.svelte';
|
||||
</script>
|
||||
|
||||
<Placeholder label="GettingStarted" />
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import "$appcss";
|
||||
import Placeholder from "$components/Placeholder/Placeholder.svelte";
|
||||
import '$appcss';
|
||||
import Placeholder from '$components/Placeholder/Placeholder.svelte';
|
||||
</script>
|
||||
|
||||
<Placeholder label="InstalledPackages" />
|
||||
|
|
@ -5,10 +5,9 @@
|
|||
|
||||
import { beforeUpdate } from 'svelte';
|
||||
|
||||
|
||||
const openGithub = () => {
|
||||
open('https://github.com/teaxyz')
|
||||
}
|
||||
open('https://github.com/teaxyz');
|
||||
};
|
||||
|
||||
let maximized = false;
|
||||
const toggleMaximize = () => {
|
||||
|
|
@ -18,7 +17,7 @@
|
|||
} else {
|
||||
appWindow.unmaximize();
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
let routes = [
|
||||
{
|
||||
|
|
@ -63,16 +62,10 @@
|
|||
<img src="/images/close.svg" alt="close" />
|
||||
</button>
|
||||
<button class="titlebar-button" id="titlebar-minimize" on:click={appWindow.minimize}>
|
||||
<img
|
||||
src="/images/minimize.svg"
|
||||
alt="minimize"
|
||||
/>
|
||||
<img src="/images/minimize.svg" alt="minimize" />
|
||||
</button>
|
||||
<button class="titlebar-button" id="titlebar-maximize" on:click={toggleMaximize}>
|
||||
<img
|
||||
src="/images/expand.svg"
|
||||
alt="maximize"
|
||||
/>
|
||||
<img src="/images/expand.svg" alt="maximize" />
|
||||
</button>
|
||||
</div>
|
||||
<a href="/">
|
||||
|
|
@ -80,10 +73,14 @@
|
|||
</a>
|
||||
</nav>
|
||||
|
||||
<input class="w-full bg-black h-12 p-4 border border-x-0 border-gray" type="search" placeholder="search" />
|
||||
<input
|
||||
class="w-full bg-black h-12 p-4 border border-x-0 border-gray"
|
||||
type="search"
|
||||
placeholder="search"
|
||||
/>
|
||||
|
||||
{#each routes as route}
|
||||
<li class={route.active ? "nav_button active": "nav_button"}>
|
||||
<li class={route.active ? 'nav_button active' : 'nav_button'}>
|
||||
<a href={route.path}>{route.label}</a>
|
||||
</li>
|
||||
{/each}
|
||||
|
|
@ -112,7 +109,7 @@
|
|||
|
||||
@layer components {
|
||||
.nav_button {
|
||||
transition: all .3s;
|
||||
transition: all 0.3s;
|
||||
color: theme('colors.white');
|
||||
padding: theme('spacing.4') theme('spacing.2');
|
||||
}
|
||||
|
|
@ -127,7 +124,7 @@
|
|||
}
|
||||
|
||||
nav:hover {
|
||||
transition: all .3s;
|
||||
transition: all 0.3s;
|
||||
background-color: #2d2d2d;
|
||||
}
|
||||
|
||||
|
|
@ -141,7 +138,7 @@
|
|||
opacity: 0.9;
|
||||
}
|
||||
.titlebar-button img {
|
||||
transition: opacity .3s;
|
||||
transition: opacity 0.3s;
|
||||
opacity: 0;
|
||||
}
|
||||
.titlebar-button:hover img {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import "$appcss";
|
||||
import Placeholder from "$components/Placeholder/Placeholder.svelte";
|
||||
import '$appcss';
|
||||
import Placeholder from '$components/Placeholder/Placeholder.svelte';
|
||||
</script>
|
||||
|
||||
<Placeholder label="PackageBanner" />
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
<script lang="ts">
|
||||
import "$appcss";
|
||||
import Placeholder from "$components/Placeholder/Placeholder.svelte";
|
||||
import '$appcss';
|
||||
import Placeholder from '$components/Placeholder/Placeholder.svelte';
|
||||
</script>
|
||||
|
||||
<Placeholder label="PackageReviews" />
|
||||
|
|
@ -1,3 +1,3 @@
|
|||
<header class="text-primary text-6xl font-machina uppercase">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</header>
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
<script type="ts">
|
||||
export let label:string = "";
|
||||
export let label = '';
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<header>{label}</header>
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</section>
|
||||
|
||||
<style>
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
height: 100%;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
background-color: #CCC;
|
||||
background-color: #ccc;
|
||||
display: flex;
|
||||
}
|
||||
header {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import "$appcss";
|
||||
import Placeholder from "$components/Placeholder/Placeholder.svelte";
|
||||
import '$appcss';
|
||||
import Placeholder from '$components/Placeholder/Placeholder.svelte';
|
||||
</script>
|
||||
|
||||
<Placeholder label="Preflight" />
|
||||
|
|
@ -1,5 +1,6 @@
|
|||
<script lang="ts">
|
||||
import "$appcss";
|
||||
import Placeholder from "$components/Placeholder/Placeholder.svelte";
|
||||
import '$appcss';
|
||||
import Placeholder from '$components/Placeholder/Placeholder.svelte';
|
||||
</script>
|
||||
|
||||
<Placeholder label="ProfileBanner" />
|
||||
|
|
@ -1,6 +1,23 @@
|
|||
<script>
|
||||
import "$appcss";
|
||||
import Placeholder from "$components/Placeholder/Placeholder.svelte";
|
||||
<script type="ts">
|
||||
import '$appcss';
|
||||
import Placeholder from '$components/Placeholder/Placeholder.svelte';
|
||||
|
||||
import { packages as packagesStore, initializePackages } from '$libs/stores';
|
||||
import type { Package } from '$libs/types';
|
||||
import { onMount } from 'svelte';
|
||||
|
||||
let packages: Package[] = [];
|
||||
let initialized = false;
|
||||
packagesStore.subscribe((v) => {
|
||||
packages = v;
|
||||
});
|
||||
|
||||
onMount(async () => {
|
||||
if (!packages.length && !initialized) {
|
||||
initialized = true;
|
||||
initializePackages();
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<div class="bg-black border border-gray">
|
||||
|
|
@ -9,23 +26,10 @@
|
|||
<input type="search" class="text-white bg-black border border-gray" />
|
||||
</section>
|
||||
<ul class="grid grid-cols-3 gap-8 mt-8">
|
||||
{#each packages as pkg}
|
||||
<li>
|
||||
<a href="/packages/pkg-a"><Placeholder label="Pkg A"></Placeholder></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/packages/pkg-b"><Placeholder label="Pkg B"></Placeholder></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/packages/pkg-c"><Placeholder label="Pkg C"></Placeholder></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/packages/pkg-a"><Placeholder label="Pkg D"></Placeholder></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/packages/pkg-b"><Placeholder label="Pkg E"></Placeholder></a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/packages/pkg-c"><Placeholder label="Pkg F"></Placeholder></a>
|
||||
<a href={`/packages/${pkg.slug}`}><Placeholder label={pkg.name} /></a>
|
||||
</li>
|
||||
{/each}
|
||||
</ul>
|
||||
</div>
|
||||
|
|
@ -1,32 +0,0 @@
|
|||
import { getClient } from '@tauri-apps/api/http';
|
||||
import { Buffer } from 'buffer';
|
||||
|
||||
|
||||
const username = 'user';
|
||||
const password = 'password';
|
||||
const auth = 'Basic ' + Buffer.from(username + ':' + password).toString('base64');
|
||||
|
||||
const base = 'https://api.tea.xyz/v1';
|
||||
|
||||
export async function get<T>(path: string){
|
||||
const client = await getClient();
|
||||
const uri = join(base, path);
|
||||
const { data } = await client.get<T>(uri.toString(), {
|
||||
headers: {
|
||||
Authorization: auth
|
||||
}
|
||||
});
|
||||
return data;
|
||||
}
|
||||
|
||||
const join = function(...paths: string[]){
|
||||
return paths.map(function(path){
|
||||
if(path[0] === "/"){
|
||||
path = path.slice(1);
|
||||
}
|
||||
if(path[path.length - 1] === "/"){
|
||||
path = path.slice(0, path.length - 1);
|
||||
}
|
||||
return path;
|
||||
}).join("/");
|
||||
}
|
||||
154
packages/gui/src/libs/api/mock.ts
Normal file
154
packages/gui/src/libs/api/mock.ts
Normal file
|
|
@ -0,0 +1,154 @@
|
|||
/**
|
||||
* primarily used to make this desktop app work in the website preview setting in the CI/CD
|
||||
* may contain fake/mock data
|
||||
*
|
||||
* TODO:
|
||||
* * make cors work with api.tea.xyz/v1
|
||||
*/
|
||||
import type { Package } from '../types';
|
||||
|
||||
export async function getPackages(): Promise<Package[]> {
|
||||
const packages: Package[] = [
|
||||
{
|
||||
slug: 'mesonbuild_com',
|
||||
homepage: 'https://mesonbuild.com',
|
||||
name: 'mesonbuild.com',
|
||||
version: '0.63.3',
|
||||
last_modified: '2022-10-06T15:45:08.000Z',
|
||||
full_name: 'mesonbuild.com',
|
||||
dl_count: 270745,
|
||||
thumb_image_name: 'mesonbuild_com_option 1.jpg ',
|
||||
maintainer: '',
|
||||
desc: 'Fast and user friendly build system',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/mesonbuild_com.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'pixman_org',
|
||||
homepage: 'http://www.pixman.org/',
|
||||
maintainer: 'freedesktop',
|
||||
name: 'pixman.org',
|
||||
version: '0.40.0',
|
||||
last_modified: '2022-09-26T19:37:47.000Z',
|
||||
full_name: 'pixman.org',
|
||||
dl_count: 0,
|
||||
thumb_image_name: 'pixman_org_option 1.jpg ',
|
||||
desc: 'Pixman is a library that provides low-level pixel manipulation features such as image compositing and trapezoid rasterization.',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/pixman_org.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'freedesktop_org_pkg_config',
|
||||
homepage: 'https://freedesktop.org',
|
||||
maintainer: 'freedesktop.org',
|
||||
name: 'pkg-config',
|
||||
version: '0.29.2',
|
||||
last_modified: '2022-10-20T01:32:15.000Z',
|
||||
full_name: 'freedesktop.org/pkg-config',
|
||||
dl_count: 2661501,
|
||||
thumb_image_name: 'freedecktop_org_pkg_config option 1.jpg ',
|
||||
desc: 'Manage compile and link flags for libraries',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/freedesktop_org_pkg_config.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'gnu_org_gettext',
|
||||
homepage: 'https://gnu.org',
|
||||
maintainer: 'gnu.org',
|
||||
name: 'gettext',
|
||||
version: '0.21.1',
|
||||
last_modified: '2022-10-20T01:23:46.000Z',
|
||||
full_name: 'gnu.org/gettext',
|
||||
dl_count: 3715970,
|
||||
thumb_image_name: 'gnu_org_gettext_option 1.jpg ',
|
||||
desc: 'GNU internationalization (i18n) and localization (l10n) library',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/gnu_org_gettext.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'ipfs_tech',
|
||||
homepage: 'https://ipfs.tech',
|
||||
name: 'ipfs.tech',
|
||||
version: '0.16.0',
|
||||
last_modified: '2022-10-19T21:36:52.000Z',
|
||||
full_name: 'ipfs.tech',
|
||||
dl_count: 14457,
|
||||
thumb_image_name: 'ipfs_tech_option 2.jpg ',
|
||||
maintainer: '',
|
||||
desc: 'Peer-to-peer hypermedia protocol',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/ipfs_tech.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'nixos_org_patchelf',
|
||||
homepage: 'https://nixos.org',
|
||||
maintainer: 'nixos.org',
|
||||
name: 'patchelf',
|
||||
version: '0.15.0',
|
||||
last_modified: '2022-09-27T04:50:44.000Z',
|
||||
full_name: 'nixos.org/patchelf',
|
||||
dl_count: 0,
|
||||
thumb_image_name: 'nixos_org_patchelf_option 1.jpg ',
|
||||
desc: 'PatchELF is a simple utility for modifying existing ELF executables and libraries.',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/nixos_org_patchelf.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'tea_xyz',
|
||||
homepage: 'https://tea.xyz',
|
||||
maintainer: 'tea.xyz',
|
||||
name: 'tea.xyz',
|
||||
version: '0.8.6',
|
||||
last_modified: '2022-10-19T19:13:51.000Z',
|
||||
full_name: 'tea.xyz',
|
||||
dl_count: 0,
|
||||
thumb_image_name: 'tea_xyz_option 2.jpg ',
|
||||
desc: 'Website of tea.xyz',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/tea_xyz.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'charm_sh_gum',
|
||||
homepage: 'https://charm.sh',
|
||||
maintainer: 'charm.sh',
|
||||
name: 'gum',
|
||||
version: '0.8.0',
|
||||
last_modified: '2022-10-21T02:15:16.000Z',
|
||||
full_name: 'charm.sh/gum',
|
||||
dl_count: 0,
|
||||
thumb_image_name: 'charm_sh_gum.jpg ',
|
||||
desc: '',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/charm_sh_gum.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'pyyaml_org',
|
||||
homepage: 'https://pyyaml.org',
|
||||
name: 'pyyaml.org',
|
||||
version: '0.2.5',
|
||||
last_modified: '2022-10-03T15:35:14.000Z',
|
||||
full_name: 'pyyaml.org',
|
||||
dl_count: 107505,
|
||||
thumb_image_name: 'pyyaml_org_option 1.jpg ',
|
||||
maintainer: '',
|
||||
desc: 'YAML framework for Python',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/pyyaml_org.jpg',
|
||||
installs: 0
|
||||
},
|
||||
{
|
||||
slug: 'tea_xyz_gx_cc',
|
||||
homepage: 'https://tea.xyz',
|
||||
maintainer: 'tea.xyz',
|
||||
name: 'cc',
|
||||
version: '0.1.0',
|
||||
last_modified: '2022-10-19T16:47:44.000Z',
|
||||
full_name: 'tea.xyz/gx/cc',
|
||||
dl_count: 0,
|
||||
thumb_image_name: 'tea_xyz_gx.jpg ',
|
||||
desc: '',
|
||||
thumb_image_url: 'https://tea.xyz/Images/packages/tea_xyz_gx_cc.jpg',
|
||||
installs: 0
|
||||
}
|
||||
];
|
||||
return packages;
|
||||
}
|
||||
51
packages/gui/src/libs/api/tauri.ts
Normal file
51
packages/gui/src/libs/api/tauri.ts
Normal file
|
|
@ -0,0 +1,51 @@
|
|||
/**
|
||||
* this is the main api integration, anything added here
|
||||
* should be mock replicated in ./mock.ts
|
||||
* why? to make it easier to verify features without us always
|
||||
* going through
|
||||
* the build->download->install->test loop
|
||||
* thus saving us so much time
|
||||
*
|
||||
* primary concerns here are any method that does the following:
|
||||
* - connect to remote api(api.tea.xyz) and returns a data
|
||||
* - connect to a local platform api and returns a data
|
||||
*/
|
||||
import { getClient } from '@tauri-apps/api/http';
|
||||
import { Buffer } from 'buffer';
|
||||
import type { Package } from '../types';
|
||||
|
||||
const username = 'user';
|
||||
const password = 'password';
|
||||
const auth = 'Basic ' + Buffer.from(username + ':' + password).toString('base64');
|
||||
|
||||
const base = 'https://api.tea.xyz/v1';
|
||||
|
||||
async function get<T>(path: string) {
|
||||
const client = await getClient();
|
||||
const uri = join(base, path);
|
||||
const { data } = await client.get<T>(uri.toString(), {
|
||||
headers: {
|
||||
Authorization: auth
|
||||
}
|
||||
});
|
||||
return data;
|
||||
}
|
||||
|
||||
const join = function (...paths: string[]) {
|
||||
return paths
|
||||
.map(function (path) {
|
||||
if (path[0] === '/') {
|
||||
path = path.slice(1);
|
||||
}
|
||||
if (path[path.length - 1] === '/') {
|
||||
path = path.slice(0, path.length - 1);
|
||||
}
|
||||
return path;
|
||||
})
|
||||
.join('/');
|
||||
};
|
||||
|
||||
export async function getPackages(): Promise<Package[]> {
|
||||
const packages = await get<Package[]>('packages');
|
||||
return packages;
|
||||
}
|
||||
|
|
@ -1,3 +1,13 @@
|
|||
import { writable } from "svelte/store";
|
||||
import { writable } from 'svelte/store';
|
||||
import type { Package } from './types';
|
||||
|
||||
import { getPackages } from '@api';
|
||||
|
||||
export const backLink = writable<string>('/');
|
||||
|
||||
export const packages = writable<Package[]>([]);
|
||||
|
||||
export const initializePackages = async () => {
|
||||
const newPackages = await getPackages();
|
||||
packages.set(newPackages);
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,10 +1,14 @@
|
|||
export interface S3Package {
|
||||
slug: string,
|
||||
version: string,
|
||||
full_name: string,
|
||||
name: string,
|
||||
maintainer: string,
|
||||
homepage: string,
|
||||
// key: string,
|
||||
last_modified: Date | string,
|
||||
export interface Package {
|
||||
slug: string;
|
||||
version: string;
|
||||
full_name: string;
|
||||
name: string;
|
||||
maintainer: string;
|
||||
homepage: string;
|
||||
last_modified: Date | string;
|
||||
thumb_image_url: string;
|
||||
thumb_image_name: string;
|
||||
desc: string;
|
||||
dl_count: number;
|
||||
installs: number;
|
||||
}
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
<!-- home / discover / welcome page -->
|
||||
<script lang="ts">
|
||||
import "$appcss";
|
||||
import '$appcss';
|
||||
import NavBar from '$components/NavBar/NavBar.svelte';
|
||||
|
||||
import { backLink as backLinkStore } from '$libs/stores';
|
||||
|
||||
let backLink: string = '';
|
||||
let backLink = '';
|
||||
backLinkStore.subscribe((v) => {
|
||||
backLink = v;
|
||||
});
|
||||
|
|
@ -21,9 +21,9 @@
|
|||
<a href={backLink}>back</a>
|
||||
</header>
|
||||
{/if}
|
||||
<figure></figure>
|
||||
<figure />
|
||||
<div>
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -59,7 +59,7 @@
|
|||
left: 0px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border-bottom: #CCC 1px solid;
|
||||
border-bottom: #ccc 1px solid;
|
||||
}
|
||||
|
||||
slot {
|
||||
|
|
|
|||
|
|
@ -1,14 +1,13 @@
|
|||
<!-- home / discover / welcome page -->
|
||||
<script lang="ts">
|
||||
import "$appcss";
|
||||
import '$appcss';
|
||||
import { backLink } from '$libs/stores';
|
||||
import PageHeader from "$components/PageHeader/PageHeader.svelte";
|
||||
import FeaturedPackages from "$components/FeaturedPackages/FeaturedPackages.svelte";
|
||||
import GettingStarted from "$components/GettingStarted/GettingStarted.svelte";
|
||||
import PageHeader from '$components/PageHeader/PageHeader.svelte';
|
||||
import FeaturedPackages from '$components/FeaturedPackages/FeaturedPackages.svelte';
|
||||
import GettingStarted from '$components/GettingStarted/GettingStarted.svelte';
|
||||
backLink.set('');
|
||||
</script>
|
||||
|
||||
|
||||
<div>
|
||||
<PageHeader>Discover</PageHeader>
|
||||
<section>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
<script>
|
||||
import "$appcss";
|
||||
import PageHeader from "$components/PageHeader/PageHeader.svelte";
|
||||
import CliBanner from "$components/CliBanner/CliBanner.svelte";
|
||||
import BigBlackSpace from "$components/BigBlackSpace/BigBlackSpace.svelte";
|
||||
import '$appcss';
|
||||
import PageHeader from '$components/PageHeader/PageHeader.svelte';
|
||||
import CliBanner from '$components/CliBanner/CliBanner.svelte';
|
||||
import BigBlackSpace from '$components/BigBlackSpace/BigBlackSpace.svelte';
|
||||
import { backLink } from '$libs/stores';
|
||||
backLink.set('/');
|
||||
</script>
|
||||
|
||||
|
||||
<div>
|
||||
<PageHeader>INSTALL TEA</PageHeader>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,13 +1,12 @@
|
|||
<script>
|
||||
import "$appcss";
|
||||
import PageHeader from "$components/PageHeader/PageHeader.svelte";
|
||||
import FeaturedCourses from "$components/FeaturedCourses/FeaturedCourses.svelte";
|
||||
import EssentialWorkshops from "$components/EssentialWorkshops/EssentialWorkshops.svelte";
|
||||
import '$appcss';
|
||||
import PageHeader from '$components/PageHeader/PageHeader.svelte';
|
||||
import FeaturedCourses from '$components/FeaturedCourses/FeaturedCourses.svelte';
|
||||
import EssentialWorkshops from '$components/EssentialWorkshops/EssentialWorkshops.svelte';
|
||||
import { backLink } from '$libs/stores';
|
||||
backLink.set('/');
|
||||
</script>
|
||||
|
||||
|
||||
<div>
|
||||
<PageHeader>Documentation</PageHeader>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<script lang="ts">
|
||||
import { invoke } from '@tauri-apps/api/tauri'
|
||||
import { invoke } from '@tauri-apps/api/tauri';
|
||||
import Button from '@tea/ui/Button/Button.svelte';
|
||||
let pkg = '';
|
||||
async function installPackage() {
|
||||
|
|
@ -8,6 +8,6 @@
|
|||
</script>
|
||||
|
||||
<h1>Others</h1>
|
||||
<input bind:value={pkg}>
|
||||
<Button on:click={installPackage} label="install package"></Button>
|
||||
<input bind:value={pkg} />
|
||||
<Button on:click={installPackage} label="install package" />
|
||||
<a href="/">Back</a>
|
||||
|
|
@ -1,12 +1,11 @@
|
|||
<script>
|
||||
import "$appcss";
|
||||
import PageHeader from "$components/PageHeader/PageHeader.svelte";
|
||||
import SearchPackages from "$components/SearchPackages/SearchPackages.svelte";
|
||||
import '$appcss';
|
||||
import PageHeader from '$components/PageHeader/PageHeader.svelte';
|
||||
import SearchPackages from '$components/SearchPackages/SearchPackages.svelte';
|
||||
import { backLink } from '$libs/stores';
|
||||
backLink.set('/');
|
||||
</script>
|
||||
|
||||
|
||||
<div>
|
||||
<PageHeader>Packages</PageHeader>
|
||||
<SearchPackages />
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<script>
|
||||
import "$appcss";
|
||||
import PageHeader from "$components/PageHeader/PageHeader.svelte";
|
||||
import '$appcss';
|
||||
import PageHeader from '$components/PageHeader/PageHeader.svelte';
|
||||
import { backLink } from '$libs/stores';
|
||||
import PackageBanner from '$components/PackageBanner/PackageBanner.svelte';
|
||||
import PackageReviews from '$components/PackageReviews/PackageReviews.svelte';
|
||||
|
|
|
|||
|
|
@ -1,16 +1,14 @@
|
|||
<script>
|
||||
import "$appcss";
|
||||
import PageHeader from "$components/PageHeader/PageHeader.svelte";
|
||||
import Placeholder from "$components/Placeholder/Placeholder.svelte";
|
||||
import ProfileBanner from "$components/ProfileBanner/ProfileBanner.svelte";
|
||||
import Preflight from "$components/Preflight/Preflight.svelte";
|
||||
import Badges from "$components/Badges/Badges.svelte";
|
||||
import InstalledPackages from "$components/InstalledPackages/InstalledPackages.svelte";
|
||||
import '$appcss';
|
||||
import PageHeader from '$components/PageHeader/PageHeader.svelte';
|
||||
import ProfileBanner from '$components/ProfileBanner/ProfileBanner.svelte';
|
||||
import Preflight from '$components/Preflight/Preflight.svelte';
|
||||
import Badges from '$components/Badges/Badges.svelte';
|
||||
import InstalledPackages from '$components/InstalledPackages/InstalledPackages.svelte';
|
||||
import { backLink } from '$libs/stores';
|
||||
backLink.set('/');
|
||||
</script>
|
||||
|
||||
|
||||
<div>
|
||||
<PageHeader>PROFILE</PageHeader>
|
||||
|
||||
|
|
@ -30,5 +28,4 @@
|
|||
<section class="mt-8">
|
||||
<InstalledPackages />
|
||||
</section>
|
||||
|
||||
</div>
|
||||
|
|
@ -7,17 +7,17 @@ const config = {
|
|||
// for more information about preprocessors
|
||||
preprocess: [
|
||||
preprocess({
|
||||
postcss: true,
|
||||
postcss: true
|
||||
})
|
||||
],
|
||||
kit: {
|
||||
adapter: adapter({
|
||||
pages: 'build',
|
||||
assets: 'build',
|
||||
fallback: 'app.html',
|
||||
fallback: 'app.html'
|
||||
}),
|
||||
alias: {
|
||||
'@tea/ui/*': '../ui/src/*',
|
||||
'@tea/ui/*': '../ui/src/*'
|
||||
}
|
||||
// ssr: false,
|
||||
// hydrate the <div id="svelte"> element in src/app.html
|
||||
|
|
|
|||
|
|
@ -1,10 +1,7 @@
|
|||
/** @type {import('tailwindcss').Config} */
|
||||
const { theme } = require('@tea/ui/tailwind.config.cjs')
|
||||
const { theme } = require('@tea/ui/tailwind.config.cjs');
|
||||
module.exports = {
|
||||
content: [
|
||||
'./src/**/*.{html,svelte,ts,js}',
|
||||
'../ui/src/**/*.{html,svelte,ts,js}'
|
||||
],
|
||||
content: ['./src/**/*.{html,svelte,ts,js}', '../ui/src/**/*.{html,svelte,ts,js}'],
|
||||
theme,
|
||||
plugins: [],
|
||||
}
|
||||
plugins: []
|
||||
};
|
||||
|
|
|
|||
|
|
@ -12,11 +12,11 @@
|
|||
"paths": {
|
||||
"$appcss": ["src/app.css"],
|
||||
"$libs/*": ["src/libs/*"],
|
||||
"@api": ["src/lib/api.ts"],
|
||||
"@api": ["src/lib/api/tauri.ts"],
|
||||
"$components/*": ["src/components/*"],
|
||||
"@tea/ui": ["../ui/src/*"],
|
||||
"@tea/ui": ["../ui/src/*"]
|
||||
}
|
||||
}
|
||||
},
|
||||
// Path aliases are handled by https://kit.svelte.dev/docs/configuration#alias
|
||||
//
|
||||
// If you want to overwrite includes/excludes, make sure to copy over the relevant includes/excludes
|
||||
|
|
|
|||
|
|
@ -2,14 +2,19 @@ import { sveltekit } from '@sveltejs/kit/vite';
|
|||
import type { UserConfig } from 'vite';
|
||||
import path from 'path';
|
||||
|
||||
const isMock = process.env.BUILD_FOR === 'preview';
|
||||
|
||||
const config: UserConfig = {
|
||||
plugins: [sveltekit()],
|
||||
resolve: {
|
||||
alias: {
|
||||
'@tea/ui/*': path.resolve('../ui/src/*'),
|
||||
// this dynamic-ish static importing is followed by the svelte build
|
||||
// but for vscode editing intellisense tsconfig.json is being used
|
||||
'@api': isMock ? path.resolve('src/libs/api/mock.ts') : path.resolve('src/libs/api/tauri.ts'),
|
||||
$components: path.resolve('./src/components'),
|
||||
$libs: path.resolve('./src/libs'),
|
||||
$appcss: path.resolve('./src/app.css'),
|
||||
$appcss: path.resolve('./src/app.css')
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,13 +1,20 @@
|
|||
module.exports = {
|
||||
root: true,
|
||||
parser: '@typescript-eslint/parser',
|
||||
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier', 'plugin:storybook/recommended'],
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'prettier',
|
||||
'plugin:storybook/recommended'
|
||||
],
|
||||
plugins: ['svelte3', '@typescript-eslint'],
|
||||
ignorePatterns: ['*.cjs'],
|
||||
overrides: [{
|
||||
overrides: [
|
||||
{
|
||||
files: ['*.svelte'],
|
||||
processor: 'svelte3/svelte3'
|
||||
}],
|
||||
}
|
||||
],
|
||||
settings: {
|
||||
'svelte3/typescript': () => require('typescript')
|
||||
},
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
{
|
||||
"tabWidth": 2,
|
||||
"useTabs": true,
|
||||
"singleQuote": true,
|
||||
"trailingComma": "none",
|
||||
|
|
|
|||
|
|
@ -1,19 +1,16 @@
|
|||
const path = require('path');
|
||||
module.exports = {
|
||||
"stories": [
|
||||
"../src/**/*.stories.mdx",
|
||||
"../src/**/*.stories.@(js|jsx|ts|tsx|svelte)"
|
||||
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
|
||||
addons: [
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-essentials',
|
||||
'@storybook/addon-interactions'
|
||||
],
|
||||
"addons": [
|
||||
"@storybook/addon-links",
|
||||
"@storybook/addon-essentials",
|
||||
"@storybook/addon-interactions"
|
||||
],
|
||||
"framework": {
|
||||
"name": "@storybook/svelte-vite",
|
||||
"options": {}
|
||||
framework: {
|
||||
name: '@storybook/svelte-vite',
|
||||
options: {}
|
||||
},
|
||||
"docs": {
|
||||
"docsPage": true
|
||||
}
|
||||
docs: {
|
||||
docsPage: true
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,9 +1,9 @@
|
|||
export const parameters = {
|
||||
actions: { argTypesRegex: "^on[A-Z].*" },
|
||||
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/,
|
||||
},
|
||||
},
|
||||
date: /Date$/
|
||||
}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,4 +1,5 @@
|
|||
# @tea/ui
|
||||
|
||||
Isolated set of UI elements/components that can be reused across all svelte related apps of tea. Components here have to be maintained as much as possible as a [dumb/presentational components](https://medium.com/@thejasonfile/dumb-components-and-smart-components-e7b33a698d43).
|
||||
|
||||
## Developing
|
||||
|
|
@ -11,10 +12,12 @@ $ pnpm dev
|
|||
```
|
||||
|
||||
## Todo
|
||||
|
||||
[] setup a scaffolding script to make it easier making elements
|
||||
|
||||
## Design System
|
||||
|
||||
This library is dependent on the following
|
||||
|
||||
- [svelte](https://svelte.dev/)
|
||||
- [tailwind](https://tailwindcss.com/)
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
autoprefixer: {}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -9,8 +9,8 @@ export default {
|
|||
Component: Button,
|
||||
props: args,
|
||||
on: {
|
||||
click: args.onClick,
|
||||
},
|
||||
click: args.onClick
|
||||
}
|
||||
}),
|
||||
argTypes: {
|
||||
backgroundColor: { control: 'color' },
|
||||
|
|
@ -19,35 +19,35 @@ export default {
|
|||
primary: { control: 'boolean' },
|
||||
size: {
|
||||
control: { type: 'select' },
|
||||
options: ['small', 'medium', 'large'],
|
||||
},
|
||||
},
|
||||
options: ['small', 'medium', 'large']
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// More on writing stories with args: https://storybook.js.org/docs/7.0/svelte/writing-stories/args
|
||||
export const Primary = {
|
||||
args: {
|
||||
primary: true,
|
||||
label: 'Button',
|
||||
},
|
||||
label: 'Button'
|
||||
}
|
||||
};
|
||||
|
||||
export const Secondary = {
|
||||
args: {
|
||||
label: 'Button',
|
||||
},
|
||||
label: 'Button'
|
||||
}
|
||||
};
|
||||
|
||||
export const Large = {
|
||||
args: {
|
||||
size: 'large',
|
||||
label: 'Button',
|
||||
},
|
||||
label: 'Button'
|
||||
}
|
||||
};
|
||||
|
||||
export const Small = {
|
||||
args: {
|
||||
size: 'small',
|
||||
label: 'Button',
|
||||
},
|
||||
label: 'Button'
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,23 +1,24 @@
|
|||
<script type="ts">
|
||||
import './button.css';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
/**
|
||||
* Is this the principal call to action on the page?
|
||||
*/
|
||||
export let primary:boolean = false;
|
||||
export let primary = false;
|
||||
|
||||
/**
|
||||
* What background color to use
|
||||
*/
|
||||
export let backgroundColor:string = '';
|
||||
export let backgroundColor = '';
|
||||
/**
|
||||
* How large should the button be?
|
||||
*/
|
||||
export let size:string = 'medium';
|
||||
export let size: 'large' | 'medium' | 'small' = 'medium';
|
||||
/**
|
||||
* Button contents
|
||||
*/
|
||||
export let label:string = '';
|
||||
export let label = '';
|
||||
|
||||
$: mode = primary ? 'storybook-button--primary bg-primary' : 'storybook-button--secondary';
|
||||
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../app.css";
|
||||
@import '../app.css';
|
||||
|
||||
.storybook-button {
|
||||
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
|
|
|
|||
|
|
@ -11,26 +11,26 @@ export default {
|
|||
on: {
|
||||
login: args.onLogin,
|
||||
logout: args.onLogout,
|
||||
createAccount: args.onCreateAccount,
|
||||
},
|
||||
createAccount: args.onCreateAccount
|
||||
}
|
||||
}),
|
||||
parameters: {
|
||||
// More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
|
||||
layout: 'fullscreen',
|
||||
layout: 'fullscreen'
|
||||
},
|
||||
argTypes: {
|
||||
onLogin: { action: 'onLogin' },
|
||||
onLogout: { action: 'onLogout' },
|
||||
onCreateAccount: { action: 'onCreateAccount' },
|
||||
},
|
||||
onCreateAccount: { action: 'onCreateAccount' }
|
||||
}
|
||||
};
|
||||
|
||||
export const LoggedIn = {
|
||||
args: {
|
||||
user: {
|
||||
name: 'Jane Doe',
|
||||
},
|
||||
},
|
||||
name: 'Jane Doe'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const LoggedOut = {};
|
||||
|
|
|
|||
|
|
@ -26,10 +26,12 @@
|
|||
<g fill="none" fill-rule="evenodd">
|
||||
<path
|
||||
d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
|
||||
fill="#FFF" />
|
||||
fill="#FFF"
|
||||
/>
|
||||
<path
|
||||
d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
|
||||
fill="#555AB9" />
|
||||
fill="#555AB9"
|
||||
/>
|
||||
<path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
|
||||
</g>
|
||||
</svg>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../app.css";
|
||||
@import '../app.css';
|
||||
|
||||
.wrapper {
|
||||
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
|
|
|
|||
|
|
@ -6,8 +6,8 @@ export default {
|
|||
component: Page,
|
||||
parameters: {
|
||||
// More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
layout: 'fullscreen'
|
||||
}
|
||||
};
|
||||
export const LoggedOut = {};
|
||||
|
||||
|
|
@ -15,13 +15,13 @@ export const LoggedOut = {};
|
|||
export const LoggedIn = {
|
||||
render: (args) => ({
|
||||
Component: Page,
|
||||
props: args,
|
||||
props: args
|
||||
}),
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const loginButton = await canvas.getByRole('button', {
|
||||
name: /Log in/i,
|
||||
name: /Log in/i
|
||||
});
|
||||
await userEvent.click(loginButton);
|
||||
},
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -6,7 +6,12 @@
|
|||
</script>
|
||||
|
||||
<article>
|
||||
<Header {user} on:login={() => user = { name: 'Jane Doe' }} on:logout={() => user = null} on:createAccount={() => user = { name: 'Jane Doe' }} />
|
||||
<Header
|
||||
{user}
|
||||
on:login={() => (user = { name: 'Jane Doe' })}
|
||||
on:logout={() => (user = null)}
|
||||
on:createAccount={() => (user = { name: 'Jane Doe' })}
|
||||
/>
|
||||
|
||||
<section>
|
||||
<h2>Pages in Storybook</h2>
|
||||
|
|
@ -15,7 +20,8 @@
|
|||
<a
|
||||
href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e"
|
||||
target="_blank"
|
||||
rel="noopener noreferrer">
|
||||
rel="noopener noreferrer"
|
||||
>
|
||||
<strong>component-driven</strong>
|
||||
</a>
|
||||
process starting with atomic components and ending with pages.
|
||||
|
|
@ -54,7 +60,8 @@
|
|||
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" />
|
||||
fill="#999"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
Viewports addon in the toolbar
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
@import "../app.css";
|
||||
@import '../app.css';
|
||||
|
||||
section {
|
||||
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
|
|
|
|||
|
|
@ -2,14 +2,12 @@
|
|||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
|
||||
|
||||
@font-face {
|
||||
font-family: "pp-neue-machina";
|
||||
src: url("../static/fonts/PPNeueMachina-InktrapLight.woff");
|
||||
font-family: 'pp-neue-machina';
|
||||
src: url('../static/fonts/PPNeueMachina-InktrapLight.woff');
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: "sono";
|
||||
src: url("../static/fonts/Sono-Light.woff2");
|
||||
font-family: 'sono';
|
||||
src: url('../static/fonts/Sono-Light.woff2');
|
||||
}
|
||||
|
||||
|
|
@ -6,7 +6,7 @@ const config = {
|
|||
// Consult https://github.com/sveltejs/svelte-preprocess
|
||||
// for more information about preprocessors
|
||||
preprocess: preprocess({
|
||||
postcss: true,
|
||||
postcss: true
|
||||
}),
|
||||
|
||||
kit: {
|
||||
|
|
|
|||
|
|
@ -12,14 +12,14 @@ module.exports = {
|
|||
green: primary,
|
||||
black,
|
||||
white,
|
||||
gray,
|
||||
gray
|
||||
},
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sono: ['sono', 'sans-serif'],
|
||||
machina: ['pp-neue-machina', 'sans-serif']
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
},
|
||||
plugins: []
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,18 +2,11 @@
|
|||
"compilerOptions": {
|
||||
"baseUrl": "..",
|
||||
"paths": {},
|
||||
"rootDirs": [
|
||||
"..",
|
||||
"./types"
|
||||
],
|
||||
"rootDirs": ["..", "./types"],
|
||||
"importsNotUsedAsValues": "error",
|
||||
"isolatedModules": true,
|
||||
"preserveValueImports": true,
|
||||
"lib": [
|
||||
"esnext",
|
||||
"DOM",
|
||||
"DOM.Iterable"
|
||||
],
|
||||
"lib": ["esnext", "DOM", "DOM.Iterable"],
|
||||
"moduleResolution": "node",
|
||||
"module": "esnext",
|
||||
"target": "esnext",
|
||||
|
|
@ -40,8 +33,5 @@
|
|||
"../tests/**/*.ts",
|
||||
"../tests/**/*.svelte"
|
||||
],
|
||||
"exclude": [
|
||||
"../node_modules/**",
|
||||
"./[!ambient.d.ts]**"
|
||||
]
|
||||
"exclude": ["../node_modules/**", "./[!ambient.d.ts]**"]
|
||||
}
|
||||
|
|
@ -27,6 +27,7 @@ importers:
|
|||
svelte: ^3.49.0
|
||||
svelte-check: ^2.8.0
|
||||
svelte-preprocess: ^4.10.7
|
||||
svelte2tsx: ^0.5.20
|
||||
tailwindcss: ^3.2.4
|
||||
tslib: ^2.3.1
|
||||
typescript: ^4.7.4
|
||||
|
|
@ -38,7 +39,7 @@ importers:
|
|||
'@playwright/test': 1.25.0
|
||||
'@sveltejs/adapter-auto': 1.0.0-next.89
|
||||
'@sveltejs/adapter-static': 1.0.0-next.48
|
||||
'@sveltejs/kit': 1.0.0-next.561_svelte@3.53.1+vite@3.2.4
|
||||
'@sveltejs/kit': 1.0.0-next.562_svelte@3.53.1+vite@3.2.4
|
||||
'@tauri-apps/cli': 1.2.0
|
||||
'@tea/ui': link:../ui
|
||||
'@typescript-eslint/eslint-plugin': 5.43.0_wze2rj5tow7zwqpgbdx2buoy3m
|
||||
|
|
@ -53,6 +54,7 @@ importers:
|
|||
svelte: 3.53.1
|
||||
svelte-check: 2.9.2_mocwzvuqzrhb37u7s4hjvvzl3i
|
||||
svelte-preprocess: 4.10.7_mvbmsfnr3ibpjsbee6imjcb33m
|
||||
svelte2tsx: 0.5.20_7dvewpees4iyn2tkw2qzal77a4
|
||||
tailwindcss: 3.2.4
|
||||
tslib: 2.4.1
|
||||
typescript: 4.9.3
|
||||
|
|
@ -3028,6 +3030,34 @@ packages:
|
|||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@sveltejs/kit/1.0.0-next.562_svelte@3.53.1+vite@3.2.4:
|
||||
resolution: {integrity: sha512-VgJzjtfjVLW/4A/vDtURc10PrS3bb/N62LHzqLZcUNb5+eN4a0k5cayC7Hz2tmtvrb2Qsg+piEAogvqjKBxrOg==}
|
||||
engines: {node: '>=16.14'}
|
||||
hasBin: true
|
||||
requiresBuild: true
|
||||
peerDependencies:
|
||||
svelte: ^3.44.0
|
||||
vite: ^3.2.0
|
||||
dependencies:
|
||||
'@sveltejs/vite-plugin-svelte': 1.3.1_svelte@3.53.1+vite@3.2.4
|
||||
'@types/cookie': 0.5.1
|
||||
cookie: 0.5.0
|
||||
devalue: 4.2.0
|
||||
kleur: 4.1.5
|
||||
magic-string: 0.26.7
|
||||
mime: 3.0.0
|
||||
sade: 1.8.1
|
||||
set-cookie-parser: 2.5.1
|
||||
sirv: 2.0.2
|
||||
svelte: 3.53.1
|
||||
tiny-glob: 0.2.9
|
||||
undici: 5.12.0
|
||||
vite: 3.2.4
|
||||
transitivePeerDependencies:
|
||||
- diff-match-patch
|
||||
- supports-color
|
||||
dev: true
|
||||
|
||||
/@sveltejs/package/1.0.0-next.1_7dvewpees4iyn2tkw2qzal77a4:
|
||||
resolution: {integrity: sha512-U8XBk6Cfy8MjKG41Uyo+fqBpdhu7xUSnhiCNoODRaAtWV02RZoLh+McXrsxEvqi/ycgymctlhJhssqDnD+E+FA==}
|
||||
engines: {node: '>=16.9'}
|
||||
|
|
|
|||
Loading…
Reference in a new issue