Merge pull request #1 from flip-ui/rework

Rework

.github/workflows/deploy.yml

@@ -2,19 +2,20 @@ name: Deploy to GitHub Pages
 
 on:
   push:
-    branches: 'main'
+    branches: ['main']
+  workflow_dispatch: {}
 
 jobs:
   build_site:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v3
+        uses: actions/checkout@v4
 
       - name: Install Bun
         uses: oven-sh/setup-bun@v1
         with:
-          node-version: 'latest'
+          bun-version: 'latest'
 
       - name: Install dependencies
         run: bun install

.gitignore

@@ -3,8 +3,6 @@ node_modules
 /build
 /.svelte-kit
 /package
-/.vscode
-/img
 .env
 .env.*
 !.env.example

.prettierrc

@@ -3,6 +3,6 @@
 	"singleQuote": true,
 	"trailingComma": "none",
 	"printWidth": 100,
-	"plugins": ["prettier-plugin-svelte"],
+	"plugins": ["prettier-plugin-svelte", "prettier-plugin-tailwindcss"],
 	"overrides": [{ "files": "*.svelte", "options": { "parser": "svelte" } }]
 }

README.md

@@ -4,10 +4,6 @@ _The UI Builder for the Flipper Zero_
 
 **Flip** is an innovative UI builder designed for creating user interfaces specifically tailored for Flipper Zero applications. This tool simplifies the process of designing, exporting, and integrating UIs into your Flipper Zero projects using Rust.
 
-## Major Note
-
-The current website is going to be reworked to be fitting more the adjoined [Rust Crate](https://github.com/flip-ui/flip-ui-rs)!
-
 ## Features
 
 - **Intuitive UI Builder**: Design your UI with an easy-to-use interface.
@@ -35,3 +31,11 @@ To bring your UI to life in a Flipper Zero app:
 3. Pass in your functions and variables for full functionality.
 
 For examples look into the [Rust Crate Repository](https://github.com/flip-ui/flip-ui-rs)!
+
+## Todos
+
+- [ ] Add virtual presentation of positioning
+- [ ] Add Browser View
+- [ ] Add Input View
+
+> Some minor Todos, will be done in the future

components.json

@@ -0,0 +1,14 @@
+{
+	"$schema": "https://shadcn-svelte.com/schema.json",
+	"style": "default",
+	"tailwind": {
+		"config": "tailwind.config.ts",
+		"css": "src/app.css",
+		"baseColor": "zinc"
+	},
+	"aliases": {
+		"components": "$lib/components",
+		"utils": "$lib/utils"
+	},
+	"typescript": true
+}

package.json

@@ -1,6 +1,6 @@
 {
-	"name": "flip-ui.github.io",
-	"version": "0.1.0",
+	"name": "flip-ui-chad",
+	"version": "0.0.1",
 	"private": true,
 	"scripts": {
 		"dev": "vite dev",
@@ -12,32 +12,35 @@
 		"format": "prettier --write ."
 	},
 	"devDependencies": {
-		"@skeletonlabs/skeleton": "2.6.1",
-		"@skeletonlabs/tw-plugin": "0.3.0",
 		"@sveltejs/adapter-auto": "^3.0.0",
 		"@sveltejs/kit": "^2.0.0",
 		"@sveltejs/vite-plugin-svelte": "^3.0.0",
-		"@tailwindcss/forms": "0.5.7",
-		"@tailwindcss/typography": "0.5.10",
-		"@types/node": "20.10.6",
-		"autoprefixer": "10.4.16",
-		"postcss": "8.4.32",
 		"prettier": "^3.1.1",
 		"prettier-plugin-svelte": "^3.1.2",
 		"svelte": "^4.2.7",
 		"svelte-check": "^3.6.0",
-		"tailwindcss": "3.4.0",
 		"tslib": "^2.4.1",
 		"typescript": "^5.0.0",
 		"vite": "^5.0.3",
-		"vite-plugin-tailwind-purgecss": "0.2.0"
+		"tailwindcss": "^3.4.1",
+		"postcss": "^8.4.33",
+		"autoprefixer": "^10.4.16",
+		"@tailwindcss/typography": "^0.5.10",
+		"prettier-plugin-tailwindcss": "^0.5.1"
 	},
 	"type": "module",
 	"dependencies": {
-		"@floating-ui/dom": "1.5.3",
-		"@fortawesome/fontawesome-free": "^6.5.1",
 		"@sveltejs/adapter-static": "^3.0.1",
-		"highlight.js": "^11.9.0",
-		"svelte-grid-extended": "^1.1.4"
+		"@types/prismjs": "^1.26.4",
+		"bits-ui": "^0.21.7",
+		"clsx": "^2.1.1",
+		"install": "^0.13.0",
+		"lucide-svelte": "^0.378.0",
+		"mode-watcher": "^0.3.0",
+		"prismjs": "^1.29.0",
+		"svelte-legos": "^0.2.2",
+		"svelte-persisted-store": "^0.9.2",
+		"tailwind-merge": "^2.3.0",
+		"tailwind-variants": "^0.2.1"
 	}
 }

postcss.config.cjs → postcss.config.js

@@ -1,4 +1,4 @@
-module.exports = {
+export default {
 	plugins: {
 		tailwindcss: {},
 		autoprefixer: {}

src/app.d.ts

@@ -1,9 +1,13 @@
 // See https://kit.svelte.dev/docs/types#app
 // for information about these interfaces
-// and what to do when importing types
-declare namespace App {
-	// interface Locals {}
-	// interface PageData {}
-	// interface Error {}
-	// interface Platform {}
+declare global {
+	namespace App {
+		// interface Error {}
+		// interface Locals {}
+		// interface PageData {}
+		// interface PageState {}
+		// interface Platform {}
+	}
 }
+
+export {};

src/app.html

@@ -1,12 +1,12 @@
 <!doctype html>
-<html lang="en" class="dark">
+<html lang="en">
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
-		<meta name="viewport" content="width=device-width" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		%sveltekit.head%
 	</head>
-	<body data-sveltekit-preload-data="hover" data-theme="vintage">
-		<div style="display: contents" class="h-full overflow-hidden">%sveltekit.body%</div>
+	<body data-sveltekit-preload-data="hover">
+		<div style="display: contents">%sveltekit.body%</div>
 	</body>
 </html>

src/app.pcss

@@ -0,0 +1,109 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+	:root {
+		--background: 0 0% 100%;
+		--foreground: 240 10% 3.9%;
+
+		--muted: 240 4.8% 95.9%;
+		--muted-foreground: 240 3.8% 46.1%;
+
+		--popover: 0 0% 100%;
+		--popover-foreground: 240 10% 3.9%;
+
+		--card: 0 0% 100%;
+		--card-foreground: 240 10% 3.9%;
+
+		--border: 240 5.9% 90%;
+		--input: 240 5.9% 90%;
+
+		--primary: 240 5.9% 10%;
+		--primary-foreground: 0 0% 98%;
+
+		--secondary: 240 4.8% 95.9%;
+		--secondary-foreground: 240 5.9% 10%;
+
+		--accent: 240 4.8% 95.9%;
+		--accent-foreground: 240 5.9% 10%;
+
+		--destructive: 0 72.2% 50.6%;
+		--destructive-foreground: 0 0% 98%;
+
+		--ring: 240 10% 3.9%;
+
+		--radius: 0.5rem;
+	}
+
+	.dark {
+		--background: 240 10% 3.9%;
+		--foreground: 0 0% 98%;
+
+		--muted: 240 3.7% 15.9%;
+		--muted-foreground: 240 5% 64.9%;
+
+		--popover: 240 10% 3.9%;
+		--popover-foreground: 0 0% 98%;
+
+		--card: 240 10% 3.9%;
+		--card-foreground: 0 0% 98%;
+
+		--border: 240 3.7% 15.9%;
+		--input: 240 3.7% 15.9%;
+
+		--primary: 0 0% 98%;
+		--primary-foreground: 240 5.9% 10%;
+
+		--secondary: 240 3.7% 15.9%;
+		--secondary-foreground: 0 0% 98%;
+
+		--accent: 240 3.7% 15.9%;
+		--accent-foreground: 0 0% 98%;
+
+		--destructive: 0 62.8% 30.6%;
+		--destructive-foreground: 0 0% 98%;
+
+		--ring: 240 4.9% 83.9%;
+	}
+}
+
+@layer base {
+	html,
+	body {
+		@apply h-full overflow-hidden;
+	}
+	html {
+		font-family: pixelify-sans;
+	}
+	* {
+		@apply border-border;
+	}
+	body {
+		@apply !overflow-y-scroll bg-gradient-conic from-amber-900 via-background to-green-950 text-foreground;
+	}
+	@font-face {
+		font-family: 'pixelify-sans';
+		src: url('/PixelifySans.ttf') format('truetype');
+		font-weight: normal;
+		font-style: normal;
+	}
+	.h1 {
+		@apply scroll-m-20 text-4xl font-extrabold tracking-tight lg:text-5xl;
+	}
+	.h2 {
+		@apply scroll-m-20 text-3xl font-semibold tracking-tight first:mt-0;
+	}
+	.h3 {
+		@apply scroll-m-20 text-2xl font-semibold tracking-tight;
+	}
+	.p {
+		@apply leading-7 [&:not(:first-child)]:mt-6;
+	}
+	.blockquote {
+		@apply mt-6 border-l-2 pl-6 italic;
+	}
+	.code {
+		@apply relative rounded bg-muted px-[0.3rem] py-[0.2rem] font-mono text-sm font-semibold;
+	}
+}

src/lib/components/ui/alert/alert-description.svelte

@@ -0,0 +1,13 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = HTMLAttributes<HTMLDivElement>;
+
+	let className: $$Props['class'] = undefined;
+	export { className as class };
+</script>
+
+<div class={cn('text-sm [&_p]:leading-relaxed', className)} {...$$restProps}>
+	<slot />
+</div>

src/lib/components/ui/alert/alert-title.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import type { HeadingLevel } from './index.js';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = HTMLAttributes<HTMLHeadingElement> & {
+		level?: HeadingLevel;
+	};
+
+	let className: $$Props['class'] = undefined;
+	export let level: $$Props['level'] = 'h5';
+	export { className as class };
+</script>
+
+<svelte:element
+	this={level}
+	class={cn('mb-1 font-medium leading-none tracking-tight', className)}
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>

src/lib/components/ui/alert/alert.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	import type { HTMLAttributes } from 'svelte/elements';
+	import { type Variant, alertVariants } from './index.js';
+	import { cn } from '$lib/utils.js';
+
+	type $$Props = HTMLAttributes<HTMLDivElement> & {
+		variant?: Variant;
+	};
+
+	let className: $$Props['class'] = undefined;
+	export let variant: $$Props['variant'] = 'default';
+	export { className as class };
+</script>
+
+<div class={cn(alertVariants({ variant }), className)} {...$$restProps} role="alert">
+	<slot />
+</div>

src/lib/components/ui/alert/index.ts

@@ -0,0 +1,33 @@
+import { type VariantProps, tv } from 'tailwind-variants';
+
+import Root from './alert.svelte';
+import Description from './alert-description.svelte';
+import Title from './alert-title.svelte';
+
+export const alertVariants = tv({
+	base: 'relative w-full rounded-lg border p-4 [&:has(svg)]:pl-11 [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground',
+
+	variants: {
+		variant: {
+			default: 'bg-background text-foreground',
+			destructive:
+				'border-destructive/50 text-destructive text-destructive dark:border-destructive [&>svg]:text-destructive'
+		}
+	},
+	defaultVariants: {
+		variant: 'default'
+	}
+});
+
+export type Variant = VariantProps<typeof alertVariants>['variant'];
+export type HeadingLevel = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+
+export {
+	Root,
+	Description,
+	Title,
+	//
+	Root as Alert,
+	Description as AlertDescription,
+	Title as AlertTitle
+};