Merge pull request #28 from invopop/gokit

Add gokit

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+    "templ.experiments": "rawgo"
+}

package.json

@@ -1,7 +1,7 @@
 {
   "name": "@invopop/ui-kit",
   "license": "MIT",
-  "version": "0.4.0",
+  "version": "0.4.1",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && npm run package",
@@ -16,7 +16,7 @@
     "lint": "prettier --plugin-search-dir . --check . && eslint .",
     "format": "prettier --plugin-search-dir . --write .",
     "storybook": "storybook dev -p 6006",
-    "build:tailwind": "npx tailwindcss -i ./tw.css -o ./dist/appkit.css",
+    "build:tailwind": "npx tailwindcss -i ./styles.css -o ./dist/gokit.css",
     "build-storybook": "storybook build",
     "build-web-components": "vite build --config vite.wbc.config.ts",
     "publish-wbc": "npm run build-web-components && cp ./package-wbc.json ./dist/package.json && cd ./dist && npm run publish"
@@ -49,6 +49,7 @@
     "@sveltejs/kit": "^1.20.4",
     "@sveltejs/package": "^2.0.0",
     "@tailwindcss/forms": "^0.5.9",
+    "@tailwindcss/typography": "^0.5.15",
     "@typescript-eslint/eslint-plugin": "^6.0.0",
     "@typescript-eslint/parser": "^6.0.0",
     "autoprefixer": "^10.4.20",

src/gokit/.air.toml

@@ -0,0 +1,51 @@
+root = "."
+testdata_dir = "testdata"
+tmp_dir = "tmp"
+
+[build]
+args_bin = ["serve", "-p", "3000"]
+bin = "./gokit"
+cmd = "TEMPL_EXPERIMENT=rawgo templ generate && go build ./cmd/gokit"
+delay = 1000
+exclude_dir = ["tmp", "vendor", "testdata", "node_modules", "dist", "src/svelte", "src/web-components"]
+exclude_file = ["gokit"]
+exclude_regex = ["_test.go", "_templ.go"]
+exclude_unchanged = false
+follow_symlink = false
+full_bin = ""
+include_dir = []
+include_ext = ["go", "tpl", "templ", "css", "tmpl", "html"]
+include_file = []
+kill_delay = "0s"
+log = "build-errors.log"
+poll = false
+poll_interval = 0
+post_cmd = []
+pre_cmd = []
+rerun = false
+rerun_delay = 500
+send_interrupt = false
+stop_on_error = false
+
+[color]
+app = ""
+build = "yellow"
+main = "magenta"
+runner = "green"
+watcher = "cyan"
+
+[log]
+main_only = false
+time = false
+
+[misc]
+clean_on_exit = false
+
+[proxy]
+enabled = false
+app_port = 3000
+proxy_port = 3001
+
+[screen]
+clear_on_rebuild = false
+keep_scroll = true

src/gokit/alpine/tags.templ

@@ -0,0 +1,64 @@
+package alpine
+
+import (
+	"github.com/dchest/uniuri"
+	"github.com/invopop/ui-kit/src/gokit"
+	"github.com/invopop/ui-kit/src/gokit/classes"
+	"github.com/invopop/ui-kit/src/gokit/props"
+)
+
+templ Tags(p props.Tags) {
+	{{ id := uniuri.New() }}
+	<div class="flex flex-col gap-1">
+		if p.Label != "" {
+			@gokit.InputLabel(props.Label{ID: id}) {
+				{ p.Label }
+			}
+		}
+		<ul x-show={ p.Tags + `.length` } class={ classes.Tags }>
+			<template x-for={ `(tag, idx) in ` + p.Tags } :key="idx">
+				<li class={ classes.Tag }>
+					<span x-text="tag"></span>
+					<button class={ classes.TagButton } data-tooltip="remove tag" @click={ p.Tags + `.splice(idx, 1); ` + p.OnRemove + `(tag)` }>
+						@gokit.CloseIcon()
+					</button>
+				</li>
+			</template>
+		</ul>
+		if !p.HideAddInput {
+			{{ addTag := `this.` + p.Tags + `.push(this.tags_newTag); this.` + p.OnAdd + `(this.tags_newTag); this.tags_newTag = ''` }}
+			<div
+				class="flex items-start gap-2 w-full"
+				x-data={ `{
+					tags_newTag: '',
+					tags_error: '',
+
+					tags_addTag() {
+						this.tags_error = ''
+						let nt = this.tags_newTag.trim()
+						if (!nt) return
+						const regex = /^(?:[a-z]|[a-z0-9][a-z0-9-+]*[a-z0-9])$/
+						if (!nt.match(regex)) {
+							this.tags_error = "invalid format";
+							return
+						}` +
+
+						addTag +
+				`	}
+				}` }
+			>
+				<div class="flex-1">
+					@gokit.InputText(props.InputText{ID: id, Attrs: templ.Attributes{
+						"x-model":        "tags_newTag",
+						"@keydown.enter": "tags_addTag",
+					}, Error: props.Error{Attrs: templ.Attributes{"x-text": "tags_error"}}})
+				</div>
+				<div class="mt-0.5">
+					@gokit.Button(props.Button{Attrs: templ.Attributes{"@click": "tags_addTag"}}) {
+						Add
+					}
+				</div>
+			</div>
+		}
+	</div>
+}