@hotosm/ui 0.1.0 → 0.2.0-a1

package/README.md

@@ -1,8 +1,50 @@
-# HOT Shared UI Components
+# HOT Shared UI
 
-Shared React components with theming for use across HOTOSM tools,
+<!-- markdownlint-disable -->
+<p align="center">
+  <img src="https://github.com/hotosm/fmtm/blob/main/images/hot_logo.png?raw=true" style="width: 200px;" alt="HOT"></a>
+</p>
+<p align="center">
+  <em>Shared Web Components with theming for use across HOTOSM tools.</em>
+</p>
+<p align="center">
+  <a href="https://github.com/hotosm/ui/actions/workflows/publish.yml" target="_blank">
+      <img src="https://github.com/hotosm/ui/actions/workflows/publish.yml/badge.svg" alt="Publish">
+  </a>
+  <a href="https://github.com/hotosm/ui/actions/workflows/cdn_deploy.yml" target="_blank">
+      <img src="https://github.com/hotosm/ui/actions/workflows/cdn_deploy.yml/badge.svg?branch=main" alt="CDN Deploy">
+  </a>
+  <a href="https://github.com/hotosm/ui/actions/workflows/docs.yml" target="_blank">
+      <img src="https://github.com/hotosm/ui/actions/workflows/docs.yml/badge.svg" alt="Publish Docs">
+  </a>
+  <a href="https://www.npmjs.com/package/@hotosm/ui" target="_blank">
+      <img src="https://img.shields.io/npm/v/%40hotosm/ui?color=334D058"
+      alt="Package version">
+  </a>
+  <a href="https://npmtrends.com/@hotosm/ui" target="_blank">
+      <img src="https://img.shields.io/npm/dm/%40hotosm%2Fui"
+      alt="Downloads">
+  </a>
+  <a href="https://github.com/hotosm/ui/blob/main/LICENSE.md" target="_blank">
+      <img src="https://img.shields.io/github/license/hotosm/ui.svg" alt="License">
+  </a>
+</p>
+
+📖 **Documentation**: <a href="https://hotosm.github.io/ui/" target="_blank">https://hotosm.github.io/ui/</a>
+
+🖥️ **Source Code**: <a href="https://github.com/hotosm/ui" target="_blank">https://github.com/hotosm/ui</a>
+
+---
+
+<!-- markdownlint-enable -->
+
+Shared UI components with theming for use across HOTOSM tools,
 to reduce code duplication.
 
+The components are
+[Web Components](https://developer.mozilla.org/en-US/docs/Web/API/Web_components),
+currently written in **Lit**, using TypeScript.
+
 ## Install
 
 Via NPM:
@@ -10,11 +52,64 @@ Via NPM:
 ```bash
 npm install @hotosm/ui
 
-yarn install @hotosm/ui
+yarn add @hotosm/ui
 
 pnpm install @hotosm/ui
 ```
 
 ## Usage
 
-TBC
+### HTML / HTMX
+
+```html
+// Import the components
+<script
+  type="module"
+  src="https://s3.amazonaws.com/hotosm-ui/latest/ui.js"
+></script>
+
+// Import the styles (or create your own)
+<link
+  rel="stylesheet"
+  href="https://s3.amazonaws.com/hotosm-ui/latest/style.css"
+/>
+
+<div>
+  <hot-button disabled> </hot-button>
+</div>
+```
+
+See the docs for more [usage examples](https://hotosm.github.io/ui/usage/).
+
+> core.js will contain the minimal low level components.
+>
+> extra.js will contain additional wrapper components.
+>
+> There should be versioning of the components, plus a /latest/ version too.
+
+### React
+
+Install your required version with a pin, or latest:
+
+```bash
+pnpm install @hotosm/ui
+```
+
+```js
+import { hot-button } from '@hotosm/ui';
+
+const HomePage = ({}) => {
+  return (
+    <div className="your-css-classes">
+      <div
+        ...
+      >
+        <hot-button disabled>
+        </hot-button>
+      </div>
+    </div>
+  );
+};
+
+export default HomePage;
+```

package/package.json

@@ -1,7 +1,11 @@
 {
   "name": "@hotosm/ui",
-  "version": "0.1.0",
-  "description": "Shared React components with theming for use across HOTOSM tools.",
+  "version": "0.2.0a1",
+  "description": "Shared UI components with theming for use across HOTOSM tools.",
+  "type": "module",
+  "engines": {
+    "node": ">=14.17"
+  },
   "keywords": [],
   "author": {
     "name": "HOTOSM",
@@ -12,35 +16,78 @@
       "name": "Joe",
       "url": "https://github.com/joltcode"
     },
+    {
+      "name": "Emi Mariscal",
+      "url": "https://github.com/emi420"
+    },
+    {
+      "name": "Deepak Pradhan",
+      "url": "https://github.com/varun2948"
+    },
     {
       "name": "Sam Woodcock",
       "url": "https://github.com/spwoodcock"
     }
   ],
   "license": "GPL-3.0-only",
+  "dependencies": {
+    "@shoelace-style/shoelace": "^2.15.1"
+  },
   "devDependencies": {
-    "@ladle/react": "^3.2.1",
-    "@types/react": "^18.2.28",
+    "@lit/react": "^1.0.4",
+    "@storybook/addon-essentials": "^7.6.5",
+    "@storybook/addon-links": "^7.6.5",
+    "@storybook/blocks": "^7.6.5",
+    "@storybook/web-components": "^8.0.8",
+    "@storybook/web-components-vite": "^7.6.19",
+    "@typescript-eslint/eslint-plugin": "^6.4.0",
+    "@unocss/postcss": "^0.58.5",
     "autoprefixer": "^10.4.16",
-    "postcss": "^8.4.31",
-    "tailwindcss": "^3.3.3",
-    "typescript": "^5.2.2"
-  },
-  "dependencies": {
-    "clsx": "^2.0.0",
+    "class-variance-authority": "0.7.0",
+    "clsx": "2.0.0",
+    "eslint": "^8.0.1",
+    "eslint-config-prettier": "^9.1.0",
+    "eslint-config-standard-with-typescript": "^43.0.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-lit": "^1.10.1",
+    "eslint-plugin-n": "^15.0.0 || ^16.0.0 ",
+    "eslint-plugin-promise": "^6.0.0",
+    "eslint-plugin-wc": "^2.0.4",
+    "lit": "^3.1.0",
     "react": "^18.2.0",
-    "tailwind-merge": "^1.14.0"
+    "react-dom": "^18.2.0",
+    "storybook": "^7.6.5",
+    "typescript": "^5.2.2",
+    "unocss": "^0.58.0",
+    "web-component-analyzer": "^2.0.0"
+  },
+  "dependencies-comments": {
+    "react": "Required for Storybook",
+    "react-dom": "Required for Storybook"
+  },
+  "files": [
+    "*.js",
+    "*.d.ts",
+    "./theme/hot.css"
+  ],
+  "publishConfig": {
+    "access": "public"
   },
   "repository": {
     "type": "git",
-    "url": "git+https://github.com/hotosm/shared-ui-components.git"
+    "url": "git+https://github.com/hotosm/ui.git"
   },
   "bugs": {
-    "url": "https://github.com/hotosm/shared-ui-components/issues"
+    "url": "https://github.com/hotosm/ui/issues"
   },
-  "homepage": "https://github.com/hotosm/shared-ui-components#readme",
+  "homepage": "https://github.com/hotosm/ui#readme",
   "scripts": {
+    "dev": "pnpm run build && storybook dev -p 3001",
+    "build": "tsc",
+    "build:docstrings": "wca analyze 'components/**/*.{js,ts}' --outDir 'docs/components' --format 'markdown'",
+    "build:stories": "storybook build --output-dir=docs/stories",
+    "build:docs": "pnpm run build:docstrings && pnpm run dev:build-web-components && pnpm run build:stories",
     "test": "echo \"Error: no test specified\" && exit 1",
-    "dev": "ladle dev --host 0.0.0.0 --port 3000"
+    "lint": "eslint --ext .js,.ts ./"
   }
 }

package/theme/hot.css

@@ -0,0 +1,122 @@
+:root {
+  --hot-red-900: #b9302d;
+  --hot-red-800: #c93938;
+  --hot-red-700: #d63f3f;
+  --hot-red-600: #e84846;
+  --hot-red-500: #f75047;
+  --hot-red-400: #f15f5e;
+  --hot-red-300: #e67c7e;
+  --hot-red-200: #efa0a2;
+  --hot-red-100: #fed1d7;
+  --hot-red-50: #feecf0;
+  --hot-red: var(--hot-red-700);
+  --hot-red-rgb: 215 63 63;
+
+  --hot-darkred-900: #5b1018;
+  --hot-darkred-800: #6c2020;
+  --hot-darkred-700: #7c2e26;
+  --hot-darkred-600: #8d3a2f;
+  --hot-darkred-500: #994335;
+  --hot-darkred-400: #b15e4e;
+  --hot-darkred-300: #c87968;
+  --hot-darkred-200: #e69b8c;
+  --hot-darkred-100: #ffbead;
+  --hot-darkred-50: #ffdec8;
+  --hot-darkred: var(--hot-darkred-700);
+  --hot-darkred-rgb: 108 32 32;
+
+  --hot-light-gray: #e1e0e0;
+  --hot-light-gray-rgb: 225 224 224;
+  --hot-gray-900: #2c3038;
+  --hot-gray-800: #3f444f;
+  --hot-gray-700: #4f5765;
+  --hot-gray-600: #606a7c;
+  --hot-gray-500: #6e798d;
+  --hot-gray-400: #848c9d;
+  --hot-gray-300: #9aa1af;
+  --hot-gray-200: #b7bcc5;
+  --hot-gray-100: #d3d7dc;
+  --hot-gray-50: #eeeef0;
+  --hot-gray: var(--hot-gray-900);
+  --hot-gray-rgb: 104 112 127;
+
+  --hot-yellow-900: #ef7e1a;
+  --hot-yellow-800: #f4a628;
+  --hot-yellow-700: #f6bd30;
+  --hot-yellow-600: #f9d538;
+  --hot-yellow-500: #f7e53a;
+  --hot-yellow-400: #faea58;
+  --hot-yellow-300: #fcef77;
+  --hot-yellow-200: #fdf39d;
+  --hot-yellow-100: #fef8c4;
+  --hot-yellow-50: #fefde7;
+  --hot-yellow: var(--hot-yellow-800);
+  --hot-yellow-rgb: 250 167 30;
+
+  --hot-green-900: #105950;
+  --hot-green-800: #15766e;
+  --hot-green-700: #17867e;
+  --hot-green-600: #1a978f;
+  --hot-green-500: #1da49d;
+  --hot-green-400: #34b3ad;
+  --hot-green-300: #57c1bd;
+  --hot-green-200: #87d3d1;
+  --hot-green-100: #b7e4e3;
+  --hot-green-50: #e2f4f4;
+  --hot-green: var(--hot-green-300);
+  --hot-green-rgb: 69 156 160;
+
+  --hot-blue-900: #182642;
+  --hot-blue-800: #20365b;
+  --hot-blue-700: #263f68;
+  --hot-blue-600: #2e4873;
+  --hot-blue-500: #344f7b;
+  --hot-blue-400: #53688b;
+  --hot-blue-300: #71829e;
+  --hot-blue-200: #97a5ba;
+  --hot-blue-100: #bfc8d6;
+  --hot-blue-50: #e6e9ee;
+  --hot-blue: var(--hot-blue-800);
+  --hot-blue-rgb: 32 54 91;
+
+  --hot-white: #ffffff;
+  --hot-white-rgb: 255 255 255;
+  --hot-black: #2c3038;
+  --hot-black-rgb: 44 48 56;
+
+  --hot-primary: var(--hot-red);
+  --hot-primary-light: var(--hot-red-200);
+  --hot-primary-dark: var(--hot-red-900);
+  --hot-primary-contrastText: var(--hot-white);
+  --hot-primary-rgb: var(--hot-red-rgb);
+
+  --hot-secondary: var(--hot-gray);
+  --hot-secondary-light: var(--hot-gray-200);
+  --hot-secondary-dark: var(--hot-black);
+  --hot-secondary-contrastText: var(--hot-white);
+  --hot-secondary-rgb: var(--hot-gray-rgb);
+
+  --hot-info: var(--hot-blue);
+  --hot-info-light: var(--hot-blue-300);
+  --hot-info-dark: var(--hot-blue-900);
+  --hot-info-contrastText: var(--hot-white);
+  --hot-info-rgb: var(--hot-blue-rgb);
+
+  --hot-error: var(--hot-darkred);
+  --hot-error-light: var(--hot-darkred-400);
+  --hot-error-dark: var(--hot-darkred-900);
+  --hot-error-contrastText: var(--hot-white);
+  --hot-error-rgb: var(--hot-darkred-rgb);
+
+  --hot-warning: var(--hot-yellow);
+  --hot-warning-light: var(--hot-yellow-400);
+  --hot-warning-dark: var(--hot-yellow-900);
+  --hot-warning-contrastText: var(--hot-white);
+  --hot-warning-rgb: var(--hot-yellow-rgb);
+
+  --hot-success: var(--hot-green);
+  --hot-success-light: var(--hot-green-100);
+  --hot-success-dark: var(--hot-green-600);
+  --hot-success-contrastText: var(--hot-white);
+  --hot-success-rgb: var(--hot-green-rgb);
+}

package/.ladle/components.tsx

@@ -1 +0,0 @@
-import "./styles.css";

package/.ladle/styles.css

@@ -1,3 +0,0 @@
-@tailwind base;
-@tailwind components;
-@tailwind utilities;