mirror of
https://github.com/ivabus/gui
synced 2025-06-07 15:50:27 +03:00
#32 initial dynamic search packages
This commit is contained in:
neil
parent
1423d3bb15
commit
e7e23c3af3
67 changed files with 1357 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/*
|
||||
|
|
@ -1,23 +1,25 @@
|
|||
module.exports = {
|
||||
root: true,
|
||||
parser: '@typescript-eslint/parser',
|
||||
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
|
||||
plugins: ['svelte3', '@typescript-eslint'],
|
||||
ignorePatterns: ['*.cjs'],
|
||||
overrides: [{
|
||||
files: ['*.svelte'],
|
||||
processor: 'svelte3/svelte3'
|
||||
}],
|
||||
settings: {
|
||||
'svelte3/typescript': () => require('typescript')
|
||||
},
|
||||
parserOptions: {
|
||||
sourceType: 'module',
|
||||
ecmaVersion: 2020
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
es2017: true,
|
||||
node: true
|
||||
}
|
||||
root: true,
|
||||
parser: '@typescript-eslint/parser',
|
||||
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
|
||||
plugins: ['svelte3', '@typescript-eslint'],
|
||||
ignorePatterns: ['*.cjs'],
|
||||
overrides: [
|
||||
{
|
||||
files: ['*.svelte'],
|
||||
processor: 'svelte3/svelte3'
|
||||
}
|
||||
],
|
||||
settings: {
|
||||
'svelte3/typescript': () => require('typescript')
|
||||
},
|
||||
parserOptions: {
|
||||
sourceType: 'module',
|
||||
ecmaVersion: 2020
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
es2017: true,
|
||||
node: true
|
||||
}
|
||||
};
|
||||
|
|
@ -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/)
|
||||
|
|
|
|||
|
|
@ -1,50 +1,51 @@
|
|||
{
|
||||
"name": "@tea/gui",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"tauri": "tauri",
|
||||
"dev": "vite dev --port 8080",
|
||||
"build": "vite build && cp build/app.html build/index.html",
|
||||
"preview": "vite preview",
|
||||
"test": "playwright test",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"lint": "prettier --plugin-search-dir . --check . && eslint .",
|
||||
"format": "prettier --plugin-search-dir . --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "1.25.0",
|
||||
"@sveltejs/adapter-auto": "next",
|
||||
"@sveltejs/adapter-static": "1.0.0-next.48",
|
||||
"@sveltejs/kit": "next",
|
||||
"@tauri-apps/cli": "1.2.0",
|
||||
"@tea/ui": "workspace:*",
|
||||
"@typescript-eslint/eslint-plugin": "^5.27.0",
|
||||
"@typescript-eslint/parser": "^5.27.0",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"eslint": "^8.16.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-svelte3": "^4.0.0",
|
||||
"postcss": "^8.4.19",
|
||||
"prettier": "^2.6.2",
|
||||
"prettier-plugin-svelte": "^2.7.0",
|
||||
"svelte": "^3.49.0",
|
||||
"svelte-check": "^2.8.0",
|
||||
"svelte-preprocess": "^4.10.7",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"tslib": "^2.3.1",
|
||||
"typescript": "^4.7.4",
|
||||
"vite": "^3.1.0"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@tauri-apps/api": "^1.2.0",
|
||||
"buffer": "^6.0.3"
|
||||
},
|
||||
"pnpm": {
|
||||
"onlyBuiltDependencies": [
|
||||
"@tea/ui"
|
||||
]
|
||||
}
|
||||
"name": "@tea/gui",
|
||||
"version": "0.0.0",
|
||||
"private": true,
|
||||
"scripts": {
|
||||
"tauri": "tauri",
|
||||
"dev": "vite dev --port 8080",
|
||||
"build": "vite build && cp build/app.html build/index.html",
|
||||
"preview": "vite preview",
|
||||
"test": "playwright test",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"lint": "prettier --plugin-search-dir . --check . && eslint .",
|
||||
"format": "prettier --plugin-search-dir . --write ."
|
||||
},
|
||||
"devDependencies": {
|
||||
"@playwright/test": "1.25.0",
|
||||
"@sveltejs/adapter-auto": "next",
|
||||
"@sveltejs/adapter-static": "1.0.0-next.48",
|
||||
"@sveltejs/kit": "next",
|
||||
"@tauri-apps/cli": "1.2.0",
|
||||
"@tea/ui": "workspace:*",
|
||||
"@typescript-eslint/eslint-plugin": "^5.27.0",
|
||||
"@typescript-eslint/parser": "^5.27.0",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"eslint": "^8.16.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-svelte3": "^4.0.0",
|
||||
"postcss": "^8.4.19",
|
||||
"prettier": "^2.6.2",
|
||||
"prettier-plugin-svelte": "^2.7.0",
|
||||
"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",
|
||||
"vite": "^3.1.0"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@tauri-apps/api": "^1.2.0",
|
||||
"buffer": "^6.0.3"
|
||||
},
|
||||
"pnpm": {
|
||||
"onlyBuiltDependencies": [
|
||||
"@tea/ui"
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,113 +1,110 @@
|
|||
{
|
||||
"$schema": "../../../node_modules/@tauri-apps/cli/schema.json",
|
||||
"build": {
|
||||
"beforeBuildCommand": "pnpm build",
|
||||
"beforeDevCommand": "pnpm dev",
|
||||
"devPath": "http://localhost:8080",
|
||||
"distDir": "../build"
|
||||
},
|
||||
"package": {
|
||||
"productName": "gui",
|
||||
"version": "0.1.0"
|
||||
},
|
||||
"tauri": {
|
||||
"allowlist": {
|
||||
"http": {
|
||||
"all": true,
|
||||
"request": true,
|
||||
"scope": [
|
||||
"https://api.tea.xyz/v1/*",
|
||||
"https://github.com/*"
|
||||
]
|
||||
},
|
||||
"shell": {
|
||||
"all": false,
|
||||
"execute": false,
|
||||
"open": true,
|
||||
"scope": [],
|
||||
"sidecar": false
|
||||
},
|
||||
"window": {
|
||||
"all": true,
|
||||
"center": true,
|
||||
"close": true,
|
||||
"create": true,
|
||||
"hide": true,
|
||||
"maximize": true,
|
||||
"minimize": true,
|
||||
"print": true,
|
||||
"requestUserAttention": true,
|
||||
"setAlwaysOnTop": true,
|
||||
"setCursorGrab": true,
|
||||
"setCursorIcon": true,
|
||||
"setCursorPosition": true,
|
||||
"setCursorVisible": true,
|
||||
"setDecorations": true,
|
||||
"setFocus": true,
|
||||
"setFullscreen": true,
|
||||
"setIcon": true,
|
||||
"setIgnoreCursorEvents": true,
|
||||
"setMaxSize": true,
|
||||
"setMinSize": true,
|
||||
"setPosition": true,
|
||||
"setResizable": true,
|
||||
"setSize": true,
|
||||
"setSkipTaskbar": true,
|
||||
"setTitle": true,
|
||||
"show": true,
|
||||
"startDragging": true,
|
||||
"unmaximize": true,
|
||||
"unminimize": true
|
||||
}
|
||||
},
|
||||
"bundle": {
|
||||
"active": true,
|
||||
"category": "DeveloperTool",
|
||||
"copyright": "",
|
||||
"deb": {
|
||||
"depends": []
|
||||
},
|
||||
"externalBin": [],
|
||||
"icon": [
|
||||
"icons/32x32.png",
|
||||
"icons/128x128.png",
|
||||
"icons/128x128@2x.png",
|
||||
"icons/icon.icns",
|
||||
"icons/icon.ico"
|
||||
],
|
||||
"identifier": "com.tea.xyz",
|
||||
"longDescription": "",
|
||||
"macOS": {
|
||||
"entitlements": null,
|
||||
"exceptionDomain": "",
|
||||
"frameworks": [],
|
||||
"providerShortName": null,
|
||||
"signingIdentity": null
|
||||
},
|
||||
"resources": [],
|
||||
"shortDescription": "",
|
||||
"targets": "all",
|
||||
"windows": {
|
||||
"certificateThumbprint": null,
|
||||
"digestAlgorithm": "sha256",
|
||||
"timestampUrl": ""
|
||||
}
|
||||
},
|
||||
"security": {
|
||||
"csp": null
|
||||
},
|
||||
"updater": {
|
||||
"active": false
|
||||
},
|
||||
"windows": [
|
||||
{
|
||||
"fullscreen": false,
|
||||
"height": 600,
|
||||
"resizable": true,
|
||||
"title": "gui",
|
||||
"width": 800,
|
||||
"decorations": false
|
||||
}
|
||||
]
|
||||
}
|
||||
"$schema": "../../../node_modules/@tauri-apps/cli/schema.json",
|
||||
"build": {
|
||||
"beforeBuildCommand": "pnpm build",
|
||||
"beforeDevCommand": "pnpm dev",
|
||||
"devPath": "http://localhost:8080",
|
||||
"distDir": "../build"
|
||||
},
|
||||
"package": {
|
||||
"productName": "gui",
|
||||
"version": "0.1.0"
|
||||
},
|
||||
"tauri": {
|
||||
"allowlist": {
|
||||
"http": {
|
||||
"all": true,
|
||||
"request": true,
|
||||
"scope": ["https://api.tea.xyz/v1/*", "https://github.com/*"]
|
||||
},
|
||||
"shell": {
|
||||
"all": false,
|
||||
"execute": false,
|
||||
"open": true,
|
||||
"scope": [],
|
||||
"sidecar": false
|
||||
},
|
||||
"window": {
|
||||
"all": true,
|
||||
"center": true,
|
||||
"close": true,
|
||||
"create": true,
|
||||
"hide": true,
|
||||
"maximize": true,
|
||||
"minimize": true,
|
||||
"print": true,
|
||||
"requestUserAttention": true,
|
||||
"setAlwaysOnTop": true,
|
||||
"setCursorGrab": true,
|
||||
"setCursorIcon": true,
|
||||
"setCursorPosition": true,
|
||||
"setCursorVisible": true,
|
||||
"setDecorations": true,
|
||||
"setFocus": true,
|
||||
"setFullscreen": true,
|
||||
"setIcon": true,
|
||||
"setIgnoreCursorEvents": true,
|
||||
"setMaxSize": true,
|
||||
"setMinSize": true,
|
||||
"setPosition": true,
|
||||
"setResizable": true,
|
||||
"setSize": true,
|
||||
"setSkipTaskbar": true,
|
||||
"setTitle": true,
|
||||
"show": true,
|
||||
"startDragging": true,
|
||||
"unmaximize": true,
|
||||
"unminimize": true
|
||||
}
|
||||
},
|
||||
"bundle": {
|
||||
"active": true,
|
||||
"category": "DeveloperTool",
|
||||
"copyright": "",
|
||||
"deb": {
|
||||
"depends": []
|
||||
},
|
||||
"externalBin": [],
|
||||
"icon": [
|
||||
"icons/32x32.png",
|
||||
"icons/128x128.png",
|
||||
"icons/128x128@2x.png",
|
||||
"icons/icon.icns",
|
||||
"icons/icon.ico"
|
||||
],
|
||||
"identifier": "com.tea.xyz",
|
||||
"longDescription": "",
|
||||
"macOS": {
|
||||
"entitlements": null,
|
||||
"exceptionDomain": "",
|
||||
"frameworks": [],
|
||||
"providerShortName": null,
|
||||
"signingIdentity": null
|
||||
},
|
||||
"resources": [],
|
||||
"shortDescription": "",
|
||||
"targets": "all",
|
||||
"windows": {
|
||||
"certificateThumbprint": null,
|
||||
"digestAlgorithm": "sha256",
|
||||
"timestampUrl": ""
|
||||
}
|
||||
},
|
||||
"security": {
|
||||
"csp": null
|
||||
},
|
||||
"updater": {
|
||||
"active": false
|
||||
},
|
||||
"windows": [
|
||||
{
|
||||
"fullscreen": false,
|
||||
"height": 600,
|
||||
"resizable": true,
|
||||
"title": "gui",
|
||||
"width": 800,
|
||||
"decorations": false
|
||||
}
|
||||
]
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,22 +3,22 @@
|
|||
@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 {
|
||||
background-color: #1a1a1a;
|
||||
color: #fff;
|
||||
background-color: #1a1a1a;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
@layer base {
|
||||
html {
|
||||
font-family: sono, sans-serif;
|
||||
}
|
||||
html {
|
||||
font-family: sono, sans-serif;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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"/>
|
||||
|
||||
<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"/>
|
||||
|
||||
<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"/>
|
||||
|
||||
<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"/>
|
||||
|
||||
<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"/>
|
||||
|
||||
<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"/>
|
||||
|
||||
<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"/>
|
||||
|
||||
<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"/>
|
||||
|
||||
<Placeholder label="InstalledPackages" />
|
||||
|
|
|
|||
|
|
@ -1,164 +1,161 @@
|
|||
<script type="ts">
|
||||
import { page } from '$app/stores';
|
||||
import { open } from '@tauri-apps/api/shell';
|
||||
import { appWindow } from '@tauri-apps/api/window';
|
||||
import { page } from '$app/stores';
|
||||
import { open } from '@tauri-apps/api/shell';
|
||||
import { appWindow } from '@tauri-apps/api/window';
|
||||
|
||||
import { beforeUpdate } from 'svelte';
|
||||
import { beforeUpdate } from 'svelte';
|
||||
|
||||
const openGithub = () => {
|
||||
open('https://github.com/teaxyz');
|
||||
};
|
||||
|
||||
const openGithub = () => {
|
||||
open('https://github.com/teaxyz')
|
||||
}
|
||||
let maximized = false;
|
||||
const toggleMaximize = () => {
|
||||
maximized = !maximized;
|
||||
if (maximized) {
|
||||
appWindow.maximize();
|
||||
} else {
|
||||
appWindow.unmaximize();
|
||||
}
|
||||
};
|
||||
|
||||
let maximized = false;
|
||||
const toggleMaximize = () => {
|
||||
maximized = !maximized;
|
||||
if (maximized) {
|
||||
appWindow.maximize();
|
||||
} else {
|
||||
appWindow.unmaximize();
|
||||
}
|
||||
}
|
||||
let routes = [
|
||||
{
|
||||
path: '/',
|
||||
active: false,
|
||||
label: 'DISCOVER'
|
||||
},
|
||||
{
|
||||
path: '/documentation',
|
||||
active: false,
|
||||
label: 'DOCUMENTATION'
|
||||
},
|
||||
{
|
||||
path: '/cli',
|
||||
active: false,
|
||||
label: 'TEA CLI INSTALL'
|
||||
},
|
||||
{
|
||||
path: '/packages',
|
||||
active: false,
|
||||
label: 'PACKAGES'
|
||||
}
|
||||
];
|
||||
|
||||
let routes = [
|
||||
{
|
||||
path: '/',
|
||||
active: false,
|
||||
label: 'DISCOVER'
|
||||
},
|
||||
{
|
||||
path: '/documentation',
|
||||
active: false,
|
||||
label: 'DOCUMENTATION'
|
||||
},
|
||||
{
|
||||
path: '/cli',
|
||||
active: false,
|
||||
label: 'TEA CLI INSTALL'
|
||||
},
|
||||
{
|
||||
path: '/packages',
|
||||
active: false,
|
||||
label: 'PACKAGES'
|
||||
}
|
||||
];
|
||||
beforeUpdate(async () => {
|
||||
const currentPath = $page.url.pathname;
|
||||
|
||||
beforeUpdate(async () => {
|
||||
const currentPath = $page.url.pathname;
|
||||
|
||||
for(let i = 0; i < routes.length; i++) {
|
||||
let { path } = routes[i];
|
||||
routes[i].active = currentPath.includes(path);
|
||||
}
|
||||
if (currentPath !== '/') {
|
||||
routes[0].active = false;
|
||||
}
|
||||
});
|
||||
for (let i = 0; i < routes.length; i++) {
|
||||
let { path } = routes[i];
|
||||
routes[i].active = currentPath.includes(path);
|
||||
}
|
||||
if (currentPath !== '/') {
|
||||
routes[0].active = false;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
<ul id="NavBar" >
|
||||
<nav data-tauri-drag-region class="flex justify-between">
|
||||
<div class="flex gap-1 p-3">
|
||||
<button class="titlebar-button" id="titlebar-close" on:click={appWindow.close}>
|
||||
<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"
|
||||
/>
|
||||
</button>
|
||||
<button class="titlebar-button" id="titlebar-maximize" on:click={toggleMaximize}>
|
||||
<img
|
||||
src="/images/expand.svg"
|
||||
alt="maximize"
|
||||
/>
|
||||
</button>
|
||||
</div>
|
||||
<a href="/">
|
||||
<img width="40" height="40" src="/images/tea-icon.png" alt="tea" />
|
||||
</a>
|
||||
</nav>
|
||||
<ul id="NavBar">
|
||||
<nav data-tauri-drag-region class="flex justify-between">
|
||||
<div class="flex gap-1 p-3">
|
||||
<button class="titlebar-button" id="titlebar-close" on:click={appWindow.close}>
|
||||
<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" />
|
||||
</button>
|
||||
<button class="titlebar-button" id="titlebar-maximize" on:click={toggleMaximize}>
|
||||
<img src="/images/expand.svg" alt="maximize" />
|
||||
</button>
|
||||
</div>
|
||||
<a href="/">
|
||||
<img width="40" height="40" src="/images/tea-icon.png" alt="tea" />
|
||||
</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"}>
|
||||
<a href={route.path}>{route.label}</a>
|
||||
</li>
|
||||
{/each}
|
||||
<li class="nav_button">
|
||||
<button on:click={openGithub}>VIEW ON GITHUB</button>
|
||||
</li>
|
||||
{#each routes as route}
|
||||
<li class={route.active ? 'nav_button active' : 'nav_button'}>
|
||||
<a href={route.path}>{route.label}</a>
|
||||
</li>
|
||||
{/each}
|
||||
<li class="nav_button">
|
||||
<button on:click={openGithub}>VIEW ON GITHUB</button>
|
||||
</li>
|
||||
|
||||
<footer class="border border-x-0 border-gray w-full">
|
||||
<a href="/profile">
|
||||
<section class="flex">
|
||||
<img width="40" height="40" src="/images/bored-ape.png" alt="profile"/>
|
||||
<div class="p-2 text-gray">@user_name</div>
|
||||
</section>
|
||||
</a>
|
||||
</footer>
|
||||
<footer class="border border-x-0 border-gray w-full">
|
||||
<a href="/profile">
|
||||
<section class="flex">
|
||||
<img width="40" height="40" src="/images/bored-ape.png" alt="profile" />
|
||||
<div class="p-2 text-gray">@user_name</div>
|
||||
</section>
|
||||
</a>
|
||||
</footer>
|
||||
</ul>
|
||||
|
||||
<style>
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
ul {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
@tailwind base;
|
||||
@tailwind components;
|
||||
@tailwind utilities;
|
||||
ul {
|
||||
height: 100vh;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.nav_button {
|
||||
transition: all .3s;
|
||||
color: theme('colors.white');
|
||||
padding: theme('spacing.4') theme('spacing.2');
|
||||
}
|
||||
.nav_button:hover {
|
||||
color: theme('colors.black');
|
||||
background-color: theme('colors.primary');
|
||||
}
|
||||
.nav_button.active {
|
||||
color: theme('colors.black');
|
||||
background-color: theme('colors.primary');
|
||||
}
|
||||
}
|
||||
@layer components {
|
||||
.nav_button {
|
||||
transition: all 0.3s;
|
||||
color: theme('colors.white');
|
||||
padding: theme('spacing.4') theme('spacing.2');
|
||||
}
|
||||
.nav_button:hover {
|
||||
color: theme('colors.black');
|
||||
background-color: theme('colors.primary');
|
||||
}
|
||||
.nav_button.active {
|
||||
color: theme('colors.black');
|
||||
background-color: theme('colors.primary');
|
||||
}
|
||||
}
|
||||
|
||||
nav:hover {
|
||||
transition: all .3s;
|
||||
background-color: #2d2d2d;
|
||||
}
|
||||
nav:hover {
|
||||
transition: all 0.3s;
|
||||
background-color: #2d2d2d;
|
||||
}
|
||||
|
||||
.titlebar-button {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 8px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.titlebar-button img {
|
||||
transition: opacity .3s;
|
||||
opacity: 0;
|
||||
}
|
||||
.titlebar-button:hover img {
|
||||
opacity: 1;
|
||||
}
|
||||
#titlebar-close {
|
||||
background-color: orangered;
|
||||
}
|
||||
#titlebar-minimize {
|
||||
background-color: orange;
|
||||
}
|
||||
#titlebar-maximize {
|
||||
background-color: green;
|
||||
}
|
||||
.titlebar-button {
|
||||
display: inline-flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border-radius: 8px;
|
||||
opacity: 0.9;
|
||||
}
|
||||
.titlebar-button img {
|
||||
transition: opacity 0.3s;
|
||||
opacity: 0;
|
||||
}
|
||||
.titlebar-button:hover img {
|
||||
opacity: 1;
|
||||
}
|
||||
#titlebar-close {
|
||||
background-color: orangered;
|
||||
}
|
||||
#titlebar-minimize {
|
||||
background-color: orange;
|
||||
}
|
||||
#titlebar-maximize {
|
||||
background-color: green;
|
||||
}
|
||||
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
}
|
||||
footer {
|
||||
position: absolute;
|
||||
bottom: 20px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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"/>
|
||||
|
||||
<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"/>
|
||||
<Placeholder label="PackageReviews" />
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<header class="text-primary text-6xl font-machina uppercase">
|
||||
<slot></slot>
|
||||
<slot />
|
||||
</header>
|
||||
|
|
@ -1,24 +1,24 @@
|
|||
<script type="ts">
|
||||
export let label:string = "";
|
||||
export let label = '';
|
||||
</script>
|
||||
|
||||
<section>
|
||||
<header>{label}</header>
|
||||
<slot></slot>
|
||||
<header>{label}</header>
|
||||
<slot />
|
||||
</section>
|
||||
|
||||
<style>
|
||||
section {
|
||||
position: relative;
|
||||
min-height: 240px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
background-color: #CCC;
|
||||
display: flex;
|
||||
}
|
||||
header {
|
||||
color: rgb(50, 48, 48);
|
||||
font-size: 3em;
|
||||
}
|
||||
section {
|
||||
position: relative;
|
||||
min-height: 240px;
|
||||
height: 100%;
|
||||
width: 100%;
|
||||
min-width: 100%;
|
||||
background-color: #ccc;
|
||||
display: flex;
|
||||
}
|
||||
header {
|
||||
color: rgb(50, 48, 48);
|
||||
font-size: 3em;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -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"/>
|
||||
|
||||
<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"/>
|
||||
|
||||
<Placeholder label="ProfileBanner" />
|
||||
|
|
|
|||
|
|
@ -1,31 +1,35 @@
|
|||
<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">
|
||||
<section class="flex">
|
||||
<h2>Filter Packages</h2>
|
||||
<input type="search" class="text-white bg-black border border-gray"/>
|
||||
</section>
|
||||
<ul class="grid grid-cols-3 gap-8 mt-8">
|
||||
<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>
|
||||
</li>
|
||||
</ul>
|
||||
<section class="flex">
|
||||
<h2>Filter Packages</h2>
|
||||
<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.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,15 @@
|
|||
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 () => {
|
||||
console.log("getting packages");
|
||||
const newPackages = await getPackages();
|
||||
console.log("got packages", newPackages);
|
||||
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,72 +1,72 @@
|
|||
<!-- home / discover / welcome page -->
|
||||
<script lang="ts">
|
||||
import "$appcss";
|
||||
import NavBar from '$components/NavBar/NavBar.svelte';
|
||||
import '$appcss';
|
||||
import NavBar from '$components/NavBar/NavBar.svelte';
|
||||
|
||||
import { backLink as backLinkStore } from '$libs/stores';
|
||||
import { backLink as backLinkStore } from '$libs/stores';
|
||||
|
||||
let backLink: string = '';
|
||||
backLinkStore.subscribe((v) => {
|
||||
backLink = v;
|
||||
});
|
||||
let backLink = '';
|
||||
backLinkStore.subscribe((v) => {
|
||||
backLink = v;
|
||||
});
|
||||
</script>
|
||||
|
||||
<div id="main-layout">
|
||||
<nav class="">
|
||||
<NavBar/>
|
||||
</nav>
|
||||
<section class="px-16 pt-24">
|
||||
{#if backLink}
|
||||
<header>
|
||||
<a href={backLink}>back</a>
|
||||
</header>
|
||||
{/if}
|
||||
<figure></figure>
|
||||
<div>
|
||||
<slot></slot>
|
||||
</div>
|
||||
</section>
|
||||
<nav class="">
|
||||
<NavBar />
|
||||
</nav>
|
||||
<section class="px-16 pt-24">
|
||||
{#if backLink}
|
||||
<header>
|
||||
<a href={backLink}>back</a>
|
||||
</header>
|
||||
{/if}
|
||||
<figure />
|
||||
<div>
|
||||
<slot />
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
#main-layout {
|
||||
width: 100vh;
|
||||
height: 100vh;
|
||||
}
|
||||
nav {
|
||||
position: fixed;
|
||||
width: 240px;
|
||||
}
|
||||
section {
|
||||
position: fixed;
|
||||
left: 240px;
|
||||
right: 0px;
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
figure {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 180px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
background-image: url('/images/footer-grid-element.svg');
|
||||
}
|
||||
header {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border-bottom: #CCC 1px solid;
|
||||
}
|
||||
#main-layout {
|
||||
width: 100vh;
|
||||
height: 100vh;
|
||||
}
|
||||
nav {
|
||||
position: fixed;
|
||||
width: 240px;
|
||||
}
|
||||
section {
|
||||
position: fixed;
|
||||
left: 240px;
|
||||
right: 0px;
|
||||
height: 100vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
figure {
|
||||
position: absolute;
|
||||
z-index: 0;
|
||||
top: 180px;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
bottom: 0px;
|
||||
background-image: url('/images/footer-grid-element.svg');
|
||||
}
|
||||
header {
|
||||
position: absolute;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
border-bottom: #ccc 1px solid;
|
||||
}
|
||||
|
||||
slot {
|
||||
z-index: 1;
|
||||
}
|
||||
slot {
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
div {
|
||||
position: relative;
|
||||
}
|
||||
div {
|
||||
position: relative;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -1,22 +1,21 @@
|
|||
<!-- home / discover / welcome page -->
|
||||
<script lang="ts">
|
||||
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";
|
||||
backLink.set('');
|
||||
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';
|
||||
backLink.set('');
|
||||
</script>
|
||||
|
||||
|
||||
<div>
|
||||
<PageHeader>Discover</PageHeader>
|
||||
<section>
|
||||
<FeaturedPackages/>
|
||||
</section>
|
||||
<section class="mt-8">
|
||||
<GettingStarted/>
|
||||
</section>
|
||||
<PageHeader>Discover</PageHeader>
|
||||
<section>
|
||||
<FeaturedPackages />
|
||||
</section>
|
||||
<section class="mt-8">
|
||||
<GettingStarted />
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,20 @@
|
|||
<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 { backLink } from '$libs/stores';
|
||||
backLink.set('/');
|
||||
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>
|
||||
<PageHeader>INSTALL TEA</PageHeader>
|
||||
|
||||
<section>
|
||||
<CliBanner/>
|
||||
</section>
|
||||
<section>
|
||||
<CliBanner />
|
||||
</section>
|
||||
|
||||
<section class="mt-8">
|
||||
<BigBlackSpace/>
|
||||
</section>
|
||||
<section class="mt-8">
|
||||
<BigBlackSpace />
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -1,21 +1,20 @@
|
|||
<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 { backLink } from '$libs/stores';
|
||||
backLink.set('/');
|
||||
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>
|
||||
<PageHeader>Documentation</PageHeader>
|
||||
|
||||
<section>
|
||||
<FeaturedCourses/>
|
||||
</section>
|
||||
<section>
|
||||
<FeaturedCourses />
|
||||
</section>
|
||||
|
||||
<section class="mt-8">
|
||||
<EssentialWorkshops/>
|
||||
</section>
|
||||
<section class="mt-8">
|
||||
<EssentialWorkshops />
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -1,13 +1,13 @@
|
|||
<script lang="ts">
|
||||
import { invoke } from '@tauri-apps/api/tauri'
|
||||
import Button from '@tea/ui/Button/Button.svelte';
|
||||
let pkg = '';
|
||||
async function installPackage(){
|
||||
await invoke('install_package', { package: pkg });
|
||||
}
|
||||
import { invoke } from '@tauri-apps/api/tauri';
|
||||
import Button from '@tea/ui/Button/Button.svelte';
|
||||
let pkg = '';
|
||||
async function installPackage() {
|
||||
await invoke('install_package', { package: pkg });
|
||||
}
|
||||
</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,13 +1,12 @@
|
|||
<script>
|
||||
import "$appcss";
|
||||
import PageHeader from "$components/PageHeader/PageHeader.svelte";
|
||||
import SearchPackages from "$components/SearchPackages/SearchPackages.svelte";
|
||||
import { backLink } from '$libs/stores';
|
||||
backLink.set('/');
|
||||
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/>
|
||||
<PageHeader>Packages</PageHeader>
|
||||
<SearchPackages />
|
||||
</div>
|
||||
|
|
@ -1,21 +1,21 @@
|
|||
<script>
|
||||
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';
|
||||
backLink.set('/packages');
|
||||
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';
|
||||
backLink.set('/packages');
|
||||
|
||||
/** @type {import('./$types').PageData} */
|
||||
export let data;
|
||||
/** @type {import('./$types').PageData} */
|
||||
export let data;
|
||||
</script>
|
||||
|
||||
<div>
|
||||
<PageHeader>{data.title}</PageHeader>
|
||||
<section>
|
||||
<PackageBanner/>
|
||||
</section>
|
||||
<section class="mt-8">
|
||||
<PackageReviews/>
|
||||
</section>
|
||||
<PageHeader>{data.title}</PageHeader>
|
||||
<section>
|
||||
<PackageBanner />
|
||||
</section>
|
||||
<section class="mt-8">
|
||||
<PackageReviews />
|
||||
</section>
|
||||
</div>
|
||||
|
|
@ -2,9 +2,9 @@ import type { LoadEvent } from '@sveltejs/kit';
|
|||
|
||||
/** @type {import('./$types').PageLoad} */
|
||||
export function load({ params }: LoadEvent) {
|
||||
// TODO: search package details here
|
||||
return {
|
||||
title: `${params.slug}!`,
|
||||
content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
|
||||
};
|
||||
// TODO: search package details here
|
||||
return {
|
||||
title: `${params.slug}!`,
|
||||
content: 'Welcome to our blog. Lorem ipsum dolor sit amet...'
|
||||
};
|
||||
}
|
||||
|
|
@ -1,34 +1,31 @@
|
|||
<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 { backLink } from '$libs/stores';
|
||||
backLink.set('/');
|
||||
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>
|
||||
<PageHeader>PROFILE</PageHeader>
|
||||
|
||||
<section>
|
||||
<ProfileBanner/>
|
||||
</section>
|
||||
<section>
|
||||
<ProfileBanner />
|
||||
</section>
|
||||
|
||||
<section class="mt-8 grid grid-cols-2 gap-8">
|
||||
<div>
|
||||
<Preflight/>
|
||||
</div>
|
||||
<div>
|
||||
<Badges/>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="mt-8">
|
||||
<InstalledPackages/>
|
||||
</section>
|
||||
<section class="mt-8 grid grid-cols-2 gap-8">
|
||||
<div>
|
||||
<Preflight />
|
||||
</div>
|
||||
<div>
|
||||
<Badges />
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<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}'
|
||||
],
|
||||
theme,
|
||||
plugins: [],
|
||||
}
|
||||
content: ['./src/**/*.{html,svelte,ts,js}', '../ui/src/**/*.{html,svelte,ts,js}'],
|
||||
theme,
|
||||
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,21 @@ 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,23 +1,30 @@
|
|||
module.exports = {
|
||||
root: true,
|
||||
parser: '@typescript-eslint/parser',
|
||||
extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier', 'plugin:storybook/recommended'],
|
||||
plugins: ['svelte3', '@typescript-eslint'],
|
||||
ignorePatterns: ['*.cjs'],
|
||||
overrides: [{
|
||||
files: ['*.svelte'],
|
||||
processor: 'svelte3/svelte3'
|
||||
}],
|
||||
settings: {
|
||||
'svelte3/typescript': () => require('typescript')
|
||||
},
|
||||
parserOptions: {
|
||||
sourceType: 'module',
|
||||
ecmaVersion: 2020
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
es2017: true,
|
||||
node: true
|
||||
}
|
||||
root: true,
|
||||
parser: '@typescript-eslint/parser',
|
||||
extends: [
|
||||
'eslint:recommended',
|
||||
'plugin:@typescript-eslint/recommended',
|
||||
'prettier',
|
||||
'plugin:storybook/recommended'
|
||||
],
|
||||
plugins: ['svelte3', '@typescript-eslint'],
|
||||
ignorePatterns: ['*.cjs'],
|
||||
overrides: [
|
||||
{
|
||||
files: ['*.svelte'],
|
||||
processor: 'svelte3/svelte3'
|
||||
}
|
||||
],
|
||||
settings: {
|
||||
'svelte3/typescript': () => require('typescript')
|
||||
},
|
||||
parserOptions: {
|
||||
sourceType: 'module',
|
||||
ecmaVersion: 2020
|
||||
},
|
||||
env: {
|
||||
browser: true,
|
||||
es2017: true,
|
||||
node: true
|
||||
}
|
||||
};
|
||||
|
|
@ -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)"
|
||||
],
|
||||
"addons": [
|
||||
"@storybook/addon-links",
|
||||
"@storybook/addon-essentials",
|
||||
"@storybook/addon-interactions"
|
||||
],
|
||||
"framework": {
|
||||
"name": "@storybook/svelte-vite",
|
||||
"options": {}
|
||||
},
|
||||
"docs": {
|
||||
"docsPage": true
|
||||
}
|
||||
}
|
||||
stories: ['../src/**/*.stories.mdx', '../src/**/*.stories.@(js|jsx|ts|tsx|svelte)'],
|
||||
addons: [
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-essentials',
|
||||
'@storybook/addon-interactions'
|
||||
],
|
||||
framework: {
|
||||
name: '@storybook/svelte-vite',
|
||||
options: {}
|
||||
},
|
||||
docs: {
|
||||
docsPage: true
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
<script>
|
||||
window.global = window;
|
||||
window.global = window;
|
||||
</script>
|
||||
|
|
@ -1,9 +1,9 @@
|
|||
export const parameters = {
|
||||
actions: { argTypesRegex: "^on[A-Z].*" },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
date: /Date$/,
|
||||
},
|
||||
},
|
||||
}
|
||||
actions: { argTypesRegex: '^on[A-Z].*' },
|
||||
controls: {
|
||||
matchers: {
|
||||
color: /(background|color)$/i,
|
||||
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,52 +1,52 @@
|
|||
{
|
||||
"name": "@tea/ui",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"vite:dev": "vite dev",
|
||||
"build": "svelte-kit sync && svelte-package",
|
||||
"prepublishOnly": "echo 'Did you mean to publish `./package/`, instead of `./`?' && exit 1",
|
||||
"test": "playwright test",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"lint": "prettier --plugin-search-dir . --check . && eslint .",
|
||||
"format": "prettier --plugin-search-dir . --write .",
|
||||
"dev": "storybook dev -p 6006",
|
||||
"build-storybook": "storybook build"
|
||||
},
|
||||
"files": [
|
||||
"src/**/*",
|
||||
"tsconfig.json",
|
||||
"tailwind.config.cjs"
|
||||
],
|
||||
"devDependencies": {
|
||||
"@playwright/test": "1.25.0",
|
||||
"@storybook/addon-essentials": "^7.0.0-alpha.51",
|
||||
"@storybook/addon-interactions": "^7.0.0-alpha.51",
|
||||
"@storybook/addon-links": "^7.0.0-alpha.51",
|
||||
"@storybook/svelte": "^7.0.0-alpha.51",
|
||||
"@storybook/svelte-vite": "^7.0.0-alpha.51",
|
||||
"@storybook/testing-library": "^0.0.13",
|
||||
"@sveltejs/adapter-auto": "next",
|
||||
"@sveltejs/kit": "next",
|
||||
"@sveltejs/package": "next",
|
||||
"@typescript-eslint/eslint-plugin": "^5.27.0",
|
||||
"@typescript-eslint/parser": "^5.27.0",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"eslint": "^8.16.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-storybook": "^0.6.7",
|
||||
"eslint-plugin-svelte3": "^4.0.0",
|
||||
"postcss": "^8.4.19",
|
||||
"prettier": "^2.6.2",
|
||||
"prettier-plugin-svelte": "^2.7.0",
|
||||
"storybook": "^7.0.0-alpha.51",
|
||||
"svelte": "^3.44.0",
|
||||
"svelte-check": "^2.7.1",
|
||||
"svelte-preprocess": "^4.10.7",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"tslib": "^2.3.1",
|
||||
"typescript": "^4.7.4",
|
||||
"vite": "^3.1.0"
|
||||
},
|
||||
"type": "module"
|
||||
"name": "@tea/ui",
|
||||
"version": "0.0.1",
|
||||
"scripts": {
|
||||
"vite:dev": "vite dev",
|
||||
"build": "svelte-kit sync && svelte-package",
|
||||
"prepublishOnly": "echo 'Did you mean to publish `./package/`, instead of `./`?' && exit 1",
|
||||
"test": "playwright test",
|
||||
"check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
|
||||
"check:watch": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json --watch",
|
||||
"lint": "prettier --plugin-search-dir . --check . && eslint .",
|
||||
"format": "prettier --plugin-search-dir . --write .",
|
||||
"dev": "storybook dev -p 6006",
|
||||
"build-storybook": "storybook build"
|
||||
},
|
||||
"files": [
|
||||
"src/**/*",
|
||||
"tsconfig.json",
|
||||
"tailwind.config.cjs"
|
||||
],
|
||||
"devDependencies": {
|
||||
"@playwright/test": "1.25.0",
|
||||
"@storybook/addon-essentials": "^7.0.0-alpha.51",
|
||||
"@storybook/addon-interactions": "^7.0.0-alpha.51",
|
||||
"@storybook/addon-links": "^7.0.0-alpha.51",
|
||||
"@storybook/svelte": "^7.0.0-alpha.51",
|
||||
"@storybook/svelte-vite": "^7.0.0-alpha.51",
|
||||
"@storybook/testing-library": "^0.0.13",
|
||||
"@sveltejs/adapter-auto": "next",
|
||||
"@sveltejs/kit": "next",
|
||||
"@sveltejs/package": "next",
|
||||
"@typescript-eslint/eslint-plugin": "^5.27.0",
|
||||
"@typescript-eslint/parser": "^5.27.0",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"eslint": "^8.16.0",
|
||||
"eslint-config-prettier": "^8.3.0",
|
||||
"eslint-plugin-storybook": "^0.6.7",
|
||||
"eslint-plugin-svelte3": "^4.0.0",
|
||||
"postcss": "^8.4.19",
|
||||
"prettier": "^2.6.2",
|
||||
"prettier-plugin-svelte": "^2.7.0",
|
||||
"storybook": "^7.0.0-alpha.51",
|
||||
"svelte": "^3.44.0",
|
||||
"svelte-check": "^2.7.1",
|
||||
"svelte-preprocess": "^4.10.7",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"tslib": "^2.3.1",
|
||||
"typescript": "^4.7.4",
|
||||
"vite": "^3.1.0"
|
||||
},
|
||||
"type": "module"
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
module.exports = {
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {},
|
||||
},
|
||||
}
|
||||
plugins: {
|
||||
tailwindcss: {},
|
||||
autoprefixer: {}
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -2,52 +2,52 @@ import Button from './Button.svelte';
|
|||
|
||||
// More on how to set up stories at: https://storybook.js.org/docs/7.0/svelte/writing-stories/introduction
|
||||
export default {
|
||||
title: 'Example/Button',
|
||||
component: Button,
|
||||
tags: ['docsPage'],
|
||||
render: (args) => ({
|
||||
Component: Button,
|
||||
props: args,
|
||||
on: {
|
||||
click: args.onClick,
|
||||
},
|
||||
}),
|
||||
argTypes: {
|
||||
backgroundColor: { control: 'color' },
|
||||
label: { control: 'text' },
|
||||
onClick: { action: 'onClick' },
|
||||
primary: { control: 'boolean' },
|
||||
size: {
|
||||
control: { type: 'select' },
|
||||
options: ['small', 'medium', 'large'],
|
||||
},
|
||||
},
|
||||
title: 'Example/Button',
|
||||
component: Button,
|
||||
tags: ['docsPage'],
|
||||
render: (args) => ({
|
||||
Component: Button,
|
||||
props: args,
|
||||
on: {
|
||||
click: args.onClick
|
||||
}
|
||||
}),
|
||||
argTypes: {
|
||||
backgroundColor: { control: 'color' },
|
||||
label: { control: 'text' },
|
||||
onClick: { action: 'onClick' },
|
||||
primary: { control: 'boolean' },
|
||||
size: {
|
||||
control: { type: 'select' },
|
||||
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',
|
||||
},
|
||||
args: {
|
||||
primary: true,
|
||||
label: 'Button'
|
||||
}
|
||||
};
|
||||
|
||||
export const Secondary = {
|
||||
args: {
|
||||
label: 'Button',
|
||||
},
|
||||
args: {
|
||||
label: 'Button'
|
||||
}
|
||||
};
|
||||
|
||||
export const Large = {
|
||||
args: {
|
||||
size: 'large',
|
||||
label: 'Button',
|
||||
},
|
||||
args: {
|
||||
size: 'large',
|
||||
label: 'Button'
|
||||
}
|
||||
};
|
||||
|
||||
export const Small = {
|
||||
args: {
|
||||
size: 'small',
|
||||
label: 'Button',
|
||||
},
|
||||
args: {
|
||||
size: 'small',
|
||||
label: 'Button'
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,43 +1,44 @@
|
|||
<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;
|
||||
import './button.css';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
/**
|
||||
* What background color to use
|
||||
*/
|
||||
export let backgroundColor:string = '';
|
||||
/**
|
||||
* How large should the button be?
|
||||
*/
|
||||
export let size:string = 'medium';
|
||||
/**
|
||||
* Button contents
|
||||
*/
|
||||
export let label:string = '';
|
||||
/**
|
||||
* Is this the principal call to action on the page?
|
||||
*/
|
||||
export let primary = false;
|
||||
|
||||
$: mode = primary ? 'storybook-button--primary bg-primary' : 'storybook-button--secondary';
|
||||
/**
|
||||
* What background color to use
|
||||
*/
|
||||
export let backgroundColor = '';
|
||||
/**
|
||||
* How large should the button be?
|
||||
*/
|
||||
export let size: 'large' | 'medium' | 'small' = 'medium';
|
||||
/**
|
||||
* Button contents
|
||||
*/
|
||||
export let label = '';
|
||||
|
||||
$: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
|
||||
$: mode = primary ? 'storybook-button--primary bg-primary' : 'storybook-button--secondary';
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
$: style = backgroundColor ? `background-color: ${backgroundColor}` : '';
|
||||
|
||||
/**
|
||||
* Optional click handler
|
||||
*/
|
||||
export let onClick = (event: any) => {
|
||||
dispatch('click', event);
|
||||
};
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
/**
|
||||
* Optional click handler
|
||||
*/
|
||||
export let onClick = (event: any) => {
|
||||
dispatch('click', event);
|
||||
};
|
||||
</script>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
class={['storybook-button', `storybook-button--${size}`, 'hover:font-light', mode].join(' ')}
|
||||
{style}
|
||||
on:click={onClick}
|
||||
type="button"
|
||||
class={['storybook-button', `storybook-button--${size}`, 'hover:font-light', mode].join(' ')}
|
||||
{style}
|
||||
on:click={onClick}
|
||||
>
|
||||
{label}
|
||||
{label}
|
||||
</button>
|
||||
|
|
|
|||
|
|
@ -1,31 +1,31 @@
|
|||
@import "../app.css";
|
||||
@import '../app.css';
|
||||
|
||||
.storybook-button {
|
||||
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
border: 0;
|
||||
border-radius: 3em;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
font-weight: 700;
|
||||
border: 0;
|
||||
border-radius: 3em;
|
||||
cursor: pointer;
|
||||
display: inline-block;
|
||||
line-height: 1;
|
||||
}
|
||||
.storybook-button--primary {
|
||||
color: white;
|
||||
color: white;
|
||||
}
|
||||
.storybook-button--secondary {
|
||||
color: #333;
|
||||
background-color: transparent;
|
||||
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
|
||||
color: #333;
|
||||
background-color: transparent;
|
||||
box-shadow: rgba(0, 0, 0, 0.15) 0px 0px 0px 1px inset;
|
||||
}
|
||||
.storybook-button--small {
|
||||
font-size: 12px;
|
||||
padding: 10px 16px;
|
||||
font-size: 12px;
|
||||
padding: 10px 16px;
|
||||
}
|
||||
.storybook-button--medium {
|
||||
font-size: 14px;
|
||||
padding: 11px 20px;
|
||||
font-size: 14px;
|
||||
padding: 11px 20px;
|
||||
}
|
||||
.storybook-button--large {
|
||||
font-size: 16px;
|
||||
padding: 12px 24px;
|
||||
font-size: 16px;
|
||||
padding: 12px 24px;
|
||||
}
|
||||
|
|
@ -1,36 +1,36 @@
|
|||
import Header from './Header.svelte';
|
||||
|
||||
export default {
|
||||
title: 'Example/Header',
|
||||
component: Header,
|
||||
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/svelte/writing-docs/docs-page
|
||||
tags: ['docsPage'],
|
||||
render: (args) => ({
|
||||
Component: Header,
|
||||
props: args,
|
||||
on: {
|
||||
login: args.onLogin,
|
||||
logout: args.onLogout,
|
||||
createAccount: args.onCreateAccount,
|
||||
},
|
||||
}),
|
||||
parameters: {
|
||||
// More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
argTypes: {
|
||||
onLogin: { action: 'onLogin' },
|
||||
onLogout: { action: 'onLogout' },
|
||||
onCreateAccount: { action: 'onCreateAccount' },
|
||||
},
|
||||
title: 'Example/Header',
|
||||
component: Header,
|
||||
// This component will have an automatically generated docsPage entry: https://storybook.js.org/docs/7.0/svelte/writing-docs/docs-page
|
||||
tags: ['docsPage'],
|
||||
render: (args) => ({
|
||||
Component: Header,
|
||||
props: args,
|
||||
on: {
|
||||
login: args.onLogin,
|
||||
logout: args.onLogout,
|
||||
createAccount: args.onCreateAccount
|
||||
}
|
||||
}),
|
||||
parameters: {
|
||||
// More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
|
||||
layout: 'fullscreen'
|
||||
},
|
||||
argTypes: {
|
||||
onLogin: { action: 'onLogin' },
|
||||
onLogout: { action: 'onLogout' },
|
||||
onCreateAccount: { action: 'onCreateAccount' }
|
||||
}
|
||||
};
|
||||
|
||||
export const LoggedIn = {
|
||||
args: {
|
||||
user: {
|
||||
name: 'Jane Doe',
|
||||
},
|
||||
},
|
||||
args: {
|
||||
user: {
|
||||
name: 'Jane Doe'
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
export const LoggedOut = {};
|
||||
|
|
|
|||
|
|
@ -1,51 +1,53 @@
|
|||
<script type="ts">
|
||||
import './header.css';
|
||||
import Button from '../Button/Button.svelte';
|
||||
import './header.css';
|
||||
import Button from '../Button/Button.svelte';
|
||||
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
import { createEventDispatcher } from 'svelte';
|
||||
|
||||
export let user = null;
|
||||
export let user = null;
|
||||
|
||||
const dispatch = createEventDispatcher();
|
||||
const dispatch = createEventDispatcher();
|
||||
|
||||
function onLogin(event) {
|
||||
dispatch('login', event);
|
||||
}
|
||||
function onLogout(event) {
|
||||
dispatch('logout', event);
|
||||
}
|
||||
function onCreateAccount(event) {
|
||||
dispatch('createAccount', event);
|
||||
}
|
||||
function onLogin(event) {
|
||||
dispatch('login', event);
|
||||
}
|
||||
function onLogout(event) {
|
||||
dispatch('logout', event);
|
||||
}
|
||||
function onCreateAccount(event) {
|
||||
dispatch('createAccount', event);
|
||||
}
|
||||
</script>
|
||||
|
||||
<header>
|
||||
<div class="wrapper">
|
||||
<div>
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<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" />
|
||||
<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" />
|
||||
<path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
|
||||
</g>
|
||||
</svg>
|
||||
<h1>Acme</h1>
|
||||
</div>
|
||||
<div>
|
||||
{#if user}
|
||||
<span class="welcome">
|
||||
Welcome, <b>{user.name}</b>!
|
||||
</span>
|
||||
<Button size="small" on:click={onLogout} label="Log out" />
|
||||
{/if}
|
||||
{#if !user}
|
||||
<Button size="small" on:click={onLogin} label="Log in" />
|
||||
<Button primary size="small" on:click={onCreateAccount} label="Sign up" />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
<div class="wrapper">
|
||||
<div>
|
||||
<svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
|
||||
<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"
|
||||
/>
|
||||
<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"
|
||||
/>
|
||||
<path d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z" fill="#91BAF8" />
|
||||
</g>
|
||||
</svg>
|
||||
<h1>Acme</h1>
|
||||
</div>
|
||||
<div>
|
||||
{#if user}
|
||||
<span class="welcome">
|
||||
Welcome, <b>{user.name}</b>!
|
||||
</span>
|
||||
<Button size="small" on:click={onLogout} label="Log out" />
|
||||
{/if}
|
||||
{#if !user}
|
||||
<Button size="small" on:click={onLogin} label="Log in" />
|
||||
<Button primary size="small" on:click={onCreateAccount} label="Sign up" />
|
||||
{/if}
|
||||
</div>
|
||||
</div>
|
||||
</header>
|
||||
|
|
|
|||
|
|
@ -1,34 +1,34 @@
|
|||
@import "../app.css";
|
||||
@import '../app.css';
|
||||
|
||||
.wrapper {
|
||||
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
font-family: 'Nunito Sans', 'Helvetica Neue', Helvetica, Arial, sans-serif;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
|
||||
padding: 15px 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
svg {
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-weight: 900;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
margin: 6px 0 6px 10px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font-weight: 900;
|
||||
font-size: 20px;
|
||||
line-height: 1;
|
||||
margin: 6px 0 6px 10px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
button + button {
|
||||
margin-left: 10px;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.welcome {
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
color: #333;
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,26 +2,26 @@ import { within, userEvent } from '@storybook/testing-library';
|
|||
import Page from './Page.svelte';
|
||||
|
||||
export default {
|
||||
title: 'Example/Page',
|
||||
component: Page,
|
||||
parameters: {
|
||||
// More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
|
||||
layout: 'fullscreen',
|
||||
},
|
||||
title: 'Example/Page',
|
||||
component: Page,
|
||||
parameters: {
|
||||
// More on how to position stories at: https://storybook.js.org/docs/7.0/svelte/configure/story-layout
|
||||
layout: 'fullscreen'
|
||||
}
|
||||
};
|
||||
export const LoggedOut = {};
|
||||
|
||||
// More on interaction testing: https://storybook.js.org/docs/7.0/svelte/writing-tests/interaction-testing
|
||||
export const LoggedIn = {
|
||||
render: (args) => ({
|
||||
Component: Page,
|
||||
props: args,
|
||||
}),
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const loginButton = await canvas.getByRole('button', {
|
||||
name: /Log in/i,
|
||||
});
|
||||
await userEvent.click(loginButton);
|
||||
},
|
||||
render: (args) => ({
|
||||
Component: Page,
|
||||
props: args
|
||||
}),
|
||||
play: async ({ canvasElement }) => {
|
||||
const canvas = within(canvasElement);
|
||||
const loginButton = await canvas.getByRole('button', {
|
||||
name: /Log in/i
|
||||
});
|
||||
await userEvent.click(loginButton);
|
||||
}
|
||||
};
|
||||
|
|
|
|||
|
|
@ -1,63 +1,70 @@
|
|||
<script type="ts">
|
||||
import './page.css';
|
||||
import Header from '../Header/Header.svelte';
|
||||
import './page.css';
|
||||
import Header from '../Header/Header.svelte';
|
||||
|
||||
let user = null;
|
||||
let user = null;
|
||||
</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>
|
||||
<p>
|
||||
We recommend building UIs with a
|
||||
<a
|
||||
href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e"
|
||||
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="10" height="10" 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
|
||||
<section>
|
||||
<h2>Pages in Storybook</h2>
|
||||
<p>
|
||||
We recommend building UIs with a
|
||||
<a
|
||||
href="https://blog.hichroma.com/component-driven-development-ce1109d56c8e"
|
||||
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="10" height="10" 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>
|
||||
id="a"
|
||||
fill="#999"
|
||||
/>
|
||||
</g>
|
||||
</svg>
|
||||
Viewports addon in the toolbar
|
||||
</div>
|
||||
</section>
|
||||
</article>
|
||||
|
|
|
|||
|
|
@ -1,71 +1,71 @@
|
|||
@import "../app.css";
|
||||
@import '../app.css';
|
||||
|
||||
section {
|
||||
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;
|
||||
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;
|
||||
}
|
||||
|
||||
section h2 {
|
||||
font-weight: 900;
|
||||
font-size: 32px;
|
||||
line-height: 1;
|
||||
margin: 0 0 4px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
font-weight: 900;
|
||||
font-size: 32px;
|
||||
line-height: 1;
|
||||
margin: 0 0 4px;
|
||||
display: inline-block;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
section p {
|
||||
margin: 1em 0;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
section a {
|
||||
text-decoration: none;
|
||||
color: #1ea7fd;
|
||||
text-decoration: none;
|
||||
color: #1ea7fd;
|
||||
}
|
||||
|
||||
section ul {
|
||||
padding-left: 30px;
|
||||
margin: 1em 0;
|
||||
padding-left: 30px;
|
||||
margin: 1em 0;
|
||||
}
|
||||
|
||||
section li {
|
||||
margin-bottom: 8px;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
|
||||
section .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;
|
||||
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;
|
||||
}
|
||||
|
||||
section .tip-wrapper {
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
font-size: 13px;
|
||||
line-height: 20px;
|
||||
margin-top: 40px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
section .tip-wrapper svg {
|
||||
display: inline-block;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
margin-right: 4px;
|
||||
vertical-align: top;
|
||||
margin-top: 3px;
|
||||
display: inline-block;
|
||||
height: 12px;
|
||||
width: 12px;
|
||||
margin-right: 4px;
|
||||
vertical-align: top;
|
||||
margin-top: 3px;
|
||||
}
|
||||
|
||||
section .tip-wrapper svg path {
|
||||
fill: #1ea7fd;
|
||||
fill: #1ea7fd;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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: {
|
||||
|
|
|
|||
|
|
@ -5,21 +5,21 @@ const white = '#fff';
|
|||
const gray = '#949494';
|
||||
|
||||
module.exports = {
|
||||
content: ['./src/**/*.{html,js,svelte,ts}'],
|
||||
theme: {
|
||||
colors: {
|
||||
primary,
|
||||
green: primary,
|
||||
black,
|
||||
white,
|
||||
gray,
|
||||
},
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sono: ['sono', 'sans-serif'],
|
||||
machina: ['pp-neue-machina', 'sans-serif']
|
||||
}
|
||||
},
|
||||
},
|
||||
plugins: [],
|
||||
}
|
||||
content: ['./src/**/*.{html,js,svelte,ts}'],
|
||||
theme: {
|
||||
colors: {
|
||||
primary,
|
||||
green: primary,
|
||||
black,
|
||||
white,
|
||||
gray
|
||||
},
|
||||
extend: {
|
||||
fontFamily: {
|
||||
sono: ['sono', 'sans-serif'],
|
||||
machina: ['pp-neue-machina', 'sans-serif']
|
||||
}
|
||||
}
|
||||
},
|
||||
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