element in src/app.html
diff --git a/packages/gui/tailwind.config.cjs b/packages/gui/tailwind.config.cjs
index 7ef240d..75bc32e 100644
--- a/packages/gui/tailwind.config.cjs
+++ b/packages/gui/tailwind.config.cjs
@@ -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: []
+};
diff --git a/packages/gui/tsconfig.json b/packages/gui/tsconfig.json
index 9f4a1b8..d93018b 100644
--- a/packages/gui/tsconfig.json
+++ b/packages/gui/tsconfig.json
@@ -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
diff --git a/packages/gui/vite.config.ts b/packages/gui/vite.config.ts
index ba3fd82..d80b0db 100644
--- a/packages/gui/vite.config.ts
+++ b/packages/gui/vite.config.ts
@@ -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')
}
}
};
diff --git a/packages/ui/.eslintrc.cjs b/packages/ui/.eslintrc.cjs
index e52a5f9..1490af9 100644
--- a/packages/ui/.eslintrc.cjs
+++ b/packages/ui/.eslintrc.cjs
@@ -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
- }
-};
\ No newline at end of file
+ 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
+ }
+};
diff --git a/packages/ui/.prettierrc b/packages/ui/.prettierrc
index a77fdde..1176c1f 100644
--- a/packages/ui/.prettierrc
+++ b/packages/ui/.prettierrc
@@ -1,4 +1,5 @@
{
+ "tabWidth": 2,
"useTabs": true,
"singleQuote": true,
"trailingComma": "none",
diff --git a/packages/ui/.storybook/main.cjs b/packages/ui/.storybook/main.cjs
index a144851..dfe1ea8 100644
--- a/packages/ui/.storybook/main.cjs
+++ b/packages/ui/.storybook/main.cjs
@@ -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
- }
-}
\ No newline at end of file
+ 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
+ }
+};
diff --git a/packages/ui/.storybook/preview-head.html b/packages/ui/.storybook/preview-head.html
index 05da1e9..b617b7b 100644
--- a/packages/ui/.storybook/preview-head.html
+++ b/packages/ui/.storybook/preview-head.html
@@ -1,3 +1,3 @@
\ No newline at end of file
+ window.global = window;
+
diff --git a/packages/ui/.storybook/preview.js b/packages/ui/.storybook/preview.js
index 48afd56..e97df48 100644
--- a/packages/ui/.storybook/preview.js
+++ b/packages/ui/.storybook/preview.js
@@ -1,9 +1,9 @@
export const parameters = {
- actions: { argTypesRegex: "^on[A-Z].*" },
- controls: {
- matchers: {
- color: /(background|color)$/i,
- date: /Date$/,
- },
- },
-}
\ No newline at end of file
+ actions: { argTypesRegex: '^on[A-Z].*' },
+ controls: {
+ matchers: {
+ color: /(background|color)$/i,
+ date: /Date$/
+ }
+ }
+};
diff --git a/packages/ui/README.md b/packages/ui/README.md
index f4f6bd2..a39dd21 100644
--- a/packages/ui/README.md
+++ b/packages/ui/README.md
@@ -1,5 +1,6 @@
# @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).
+
+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/)
\ No newline at end of file
+- [tailwind](https://tailwindcss.com/)
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 128ab92..f922f12 100644
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -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"
}
diff --git a/packages/ui/postcss.config.cjs b/packages/ui/postcss.config.cjs
index 33ad091..054c147 100644
--- a/packages/ui/postcss.config.cjs
+++ b/packages/ui/postcss.config.cjs
@@ -1,6 +1,6 @@
module.exports = {
- plugins: {
- tailwindcss: {},
- autoprefixer: {},
- },
-}
+ plugins: {
+ tailwindcss: {},
+ autoprefixer: {}
+ }
+};
diff --git a/packages/ui/src/Button/Button.stories.ts b/packages/ui/src/Button/Button.stories.ts
index 1b9408a..be7d74a 100644
--- a/packages/ui/src/Button/Button.stories.ts
+++ b/packages/ui/src/Button/Button.stories.ts
@@ -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'
+ }
};
diff --git a/packages/ui/src/Button/Button.svelte b/packages/ui/src/Button/Button.svelte
index c25b785..a23bbe9 100644
--- a/packages/ui/src/Button/Button.svelte
+++ b/packages/ui/src/Button/Button.svelte
@@ -1,43 +1,44 @@
- {label}
+ {label}
diff --git a/packages/ui/src/Button/button.css b/packages/ui/src/Button/button.css
index b10f2df..0ff1a55 100644
--- a/packages/ui/src/Button/button.css
+++ b/packages/ui/src/Button/button.css
@@ -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;
-}
\ No newline at end of file
+ font-size: 16px;
+ padding: 12px 24px;
+}
diff --git a/packages/ui/src/Header/Header.stories.ts b/packages/ui/src/Header/Header.stories.ts
index 68494a3..c44a29e 100644
--- a/packages/ui/src/Header/Header.stories.ts
+++ b/packages/ui/src/Header/Header.stories.ts
@@ -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 = {};
diff --git a/packages/ui/src/Header/Header.svelte b/packages/ui/src/Header/Header.svelte
index ce87d57..a333f21 100644
--- a/packages/ui/src/Header/Header.svelte
+++ b/packages/ui/src/Header/Header.svelte
@@ -1,51 +1,53 @@
diff --git a/packages/ui/src/Header/header.css b/packages/ui/src/Header/header.css
index 57f5051..fbc3e88 100644
--- a/packages/ui/src/Header/header.css
+++ b/packages/ui/src/Header/header.css
@@ -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;
}
diff --git a/packages/ui/src/Page/Page.stories.ts b/packages/ui/src/Page/Page.stories.ts
index ab73a66..b787f45 100644
--- a/packages/ui/src/Page/Page.stories.ts
+++ b/packages/ui/src/Page/Page.stories.ts
@@ -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);
+ }
};
diff --git a/packages/ui/src/Page/Page.svelte b/packages/ui/src/Page/Page.svelte
index e70ff97..49f1496 100644
--- a/packages/ui/src/Page/Page.svelte
+++ b/packages/ui/src/Page/Page.svelte
@@ -1,63 +1,70 @@
- user = { name: 'Jane Doe' }} on:logout={() => user = null} on:createAccount={() => user = { name: 'Jane Doe' }} />
+ (user = { name: 'Jane Doe' })}
+ on:logout={() => (user = null)}
+ on:createAccount={() => (user = { name: 'Jane Doe' })}
+ />
-
- Pages in Storybook
-
- We recommend building UIs with a
-
- component-driven
-
- process starting with atomic components and ending with pages.
-
-
- 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:
-
-
-
- Use a higher-level connected component. Storybook helps you compose such data from the
- "args" of child component stories
-
-
- Assemble data in the page component from your services. You can mock these services out
- using Storybook.
-
-
-
- Get a guided tutorial on component-driven development at
-
- Storybook tutorials
-
- . Read more in the
- docs
- .
-
-
-
Tip
- Adjust the width of the canvas with the
-
-
-
+ component-driven
+
+ process starting with atomic components and ending with pages.
+
+
+ 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:
+
+
+
+ Use a higher-level connected component. Storybook helps you compose such data from the
+ "args" of child component stories
+
+
+ Assemble data in the page component from your services. You can mock these services out
+ using Storybook.
+
+
+
+ Get a guided tutorial on component-driven development at
+
+ Storybook tutorials
+
+ . Read more in the
+ docs
+ .
+
+
+
Tip
+ Adjust the width of the canvas with the
+
+
+
-
- Viewports addon in the toolbar
-
+
+ Viewports addon in the toolbar
+
diff --git a/packages/ui/src/Page/page.css b/packages/ui/src/Page/page.css
index c0c9dad..c1da404 100644
--- a/packages/ui/src/Page/page.css
+++ b/packages/ui/src/Page/page.css
@@ -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;
}
diff --git a/packages/ui/src/app.css b/packages/ui/src/app.css
index 54f4069..493706f 100644
--- a/packages/ui/src/app.css
+++ b/packages/ui/src/app.css
@@ -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');
}
-
\ No newline at end of file
diff --git a/packages/ui/svelte.config.js b/packages/ui/svelte.config.js
index 4ab476f..4c2949f 100644
--- a/packages/ui/svelte.config.js
+++ b/packages/ui/svelte.config.js
@@ -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: {
diff --git a/packages/ui/tailwind.config.cjs b/packages/ui/tailwind.config.cjs
index 471c0d9..23645c1 100644
--- a/packages/ui/tailwind.config.cjs
+++ b/packages/ui/tailwind.config.cjs
@@ -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: []
+};
diff --git a/packages/ui/tsconfig.json b/packages/ui/tsconfig.json
index 4da13f6..d04e275 100644
--- a/packages/ui/tsconfig.json
+++ b/packages/ui/tsconfig.json
@@ -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]**"
- ]
-}
\ No newline at end of file
+ "exclude": ["../node_modules/**", "./[!ambient.d.ts]**"]
+}
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 972f241..24e725d 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -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'}