From e04de4baeb7003acd77bdb896ef6f6fc6fd1b911 Mon Sep 17 00:00:00 2001
From: JoltCode <joe@joecc.dev>
Date: Fri, 29 Aug 2025 14:30:27 +0100
Subject: [PATCH] feat(dropzone): init

---
 .storybook/stories/dropzone.stories.ts        | 20 +++++++++++++++++++
 src/components/dropzone/dropzone.component.ts | 18 +++++++++++++++++
 src/components/dropzone/dropzone.ts           | 11 ++++++++++
 src/hotosm-ui.ts                              | 10 ++++++----
 4 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 .storybook/stories/dropzone.stories.ts
 create mode 100644 src/components/dropzone/dropzone.component.ts
 create mode 100644 src/components/dropzone/dropzone.ts

diff --git a/.storybook/stories/dropzone.stories.ts b/.storybook/stories/dropzone.stories.ts
new file mode 100644
index 0000000..40a51e2
--- /dev/null
+++ b/.storybook/stories/dropzone.stories.ts
@@ -0,0 +1,20 @@
+// The HOT logo
+
+import type { Meta, StoryObj } from "@storybook/web-components-vite";
+import { html } from "lit";
+
+import "../../src/hotosm-ui";
+
+const meta: Meta = {
+  title: "Dropzone",
+  component: "hot-dropzone",
+};
+export default meta;
+
+export const Dropzone: StoryObj = {
+  render: (args, { parameters }) => {
+    return html`
+      <hot-dropzone></hot-dropzone>
+    `;
+  },
+};
diff --git a/src/components/dropzone/dropzone.component.ts b/src/components/dropzone/dropzone.component.ts
new file mode 100644
index 0000000..48faac2
--- /dev/null
+++ b/src/components/dropzone/dropzone.component.ts
@@ -0,0 +1,18 @@
+import { html, LitElement, type CSSResultGroup } from "lit";
+import "@awesome.me/webawesome/dist/components/input/input.js";
+
+export class Dropzone extends LitElement {
+	static styles: CSSResultGroup = [];
+
+	name = "hot-dropzone";
+
+	protected render() {
+		return html`
+            <div class="dropzone">
+                <wa-input type="file"></wa-input>
+            </div>
+        `;
+	}
+}
+
+export default Dropzone;
diff --git a/src/components/dropzone/dropzone.ts b/src/components/dropzone/dropzone.ts
new file mode 100644
index 0000000..4cd05bb
--- /dev/null
+++ b/src/components/dropzone/dropzone.ts
@@ -0,0 +1,11 @@
+import Dropzone from './dropzone.component.js';
+export default Dropzone;
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'hot-dropzone': Dropzone;
+  }
+}
+
+// Define web component
+customElements.define("hot-dropzone", Dropzone);
diff --git a/src/hotosm-ui.ts b/src/hotosm-ui.ts
index f9b5758..dd4f883 100644
--- a/src/hotosm-ui.ts
+++ b/src/hotosm-ui.ts
@@ -2,13 +2,14 @@ import HotHeader from './components/header/header.js';
 import HotLogo from './components/logo/logo.js';
 import HotTracking from './components/tracking/tracking.js';
 import HotConsent from './components/consent/consent.js';
+import HotDropzone from './components/dropzone/dropzone.js';
 
 // Export CSS injection utilities
-export { 
-    setupAutoInjection, 
-    injectHOTThemeIntoButtons, 
+export {
+    setupAutoInjection,
+    injectHOTThemeIntoButtons,
     injectHOTThemeIntoAllComponents,
-    injectCSSIntoShadowDOM 
+    injectCSSIntoShadowDOM
 } from './utils/shadow-dom-css.js';
 
 export {
@@ -16,4 +17,5 @@ export {
     HotLogo as Logo,
     HotConsent as Consent,
     HotTracking as Tracking,
+    HotDropzone as Dropzone
 }