Merge branch 'main' of github.com:utopia-os/utopia-ui

.eslintignore

@@ -1,3 +1,4 @@
 node_modules/
 dist/
-examples/
+examples/
+docs/

.github/workflows/deploy.docs.yml

@@ -0,0 +1,56 @@
+name: deploy:docs
+
+on:
+  push:
+    branches:
+      - main
+
+jobs:
+  # Build job
+  build:
+    # Specify runner +  build & upload the static files as an artifact
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
+      - uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.0.3
+        with:
+          node-version-file: './.tool-versions'
+      - name: Install Dependencies & Build Library
+        run: |
+          npm install
+          npm run build
+          npm link
+        working-directory: ./
+
+      - name: Build static files
+        id: build
+        run: npm install && npm run docs:generate
+        working-directory: ./
+
+      - name: Upload static files as artifact
+        id: deployment
+        uses: actions/upload-pages-artifact@v3.0.1
+        with:
+          path: docs/
+
+  # Deploy job
+  deploy:
+    # Add a dependency to the build job
+    needs: build
+
+    # Grant GITHUB_TOKEN the permissions required to make a Pages deployment
+    permissions:
+      pages: write      # to deploy to Pages
+      id-token: write   # to verify the deployment originates from an appropriate source
+
+    # Deploy to the github-pages environment
+    environment:
+      name: github-pages
+      url: ${{ steps.deployment.outputs.page_url }}
+
+    # Specify runner + deployment step
+    runs-on: ubuntu-latest
+    steps:
+      - name: Deploy to GitHub Pages
+        id: deployment
+        uses: actions/deploy-pages@v4.0.5

.github/workflows/test.docs.yml

@@ -0,0 +1,47 @@
+name: test:docs
+
+on: push
+
+jobs:
+  files-changed:
+    name: Detect File Changes - docs
+    runs-on: ubuntu-latest
+    outputs:
+      docs: ${{ steps.filter.outputs.docs }}
+    steps:
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
+      - uses: dorny/paths-filter@de90cc6fb38fc0963ad72b210f1f284cd68cea36 # v3.0.2
+        id: filter
+        with:
+          filters: |
+            docs:
+              - '.github/workflows/**/*'
+              - '**/*'
+
+#  build:
+#    if: needs.files-changed.outputs.frontend == 'true'
+#    name: Build - Frontend
+#    needs: files-changed
+#    runs-on: ubuntu-latest
+#    steps:
+#      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
+#      - uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.0.3
+#        with:
+#          node-version-file: './.tool-versions'
+#      - name: Frontend | Build
+#        run: npm install && npm run build
+#        working-directory: ./frontend
+
+  docs:
+    if: needs.files-changed.outputs.docs == 'true'
+    name: Docs
+    needs: files-changed
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@11bd71901bbe5b1630ceea73d27597364c9af683 # v4.1.7
+      - uses: actions/setup-node@39370e3970a6d050c480ffad4ff0ed4d3fdee5af # v4.0.3
+        with:
+          node-version-file: './.tool-versions'
+      - name: Docs
+        run: npm install && npm run docs:generate
+        working-directory: ./

.gitignore

@@ -88,4 +88,7 @@ lerna-debug.log
 
 # System Files
 .DS_Store
-Thumbs.db
+Thumbs.db
+
+# docs
+/docs

package.json

@@ -6,10 +6,14 @@
   "homepage:": "https://utopia-os.org/",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
+  "type": "module",
   "scripts": {
     "build": "rollup -c",
     "start": "rollup -c -w",
     "test:lint:eslint": "eslint --ext .ts,.tsx,.js,.jsx,.cjs,.mjs,.json,.yml,.yaml --max-warnings 0 .",
+    "test:unit": "npm run test:unit:dev -- run --coverage",
+    "test:unit:dev": "vitest",
+    "docs:generate": "typedoc src/index.tsx",
     "update": "npx npm-check-updates"
   },
   "files": [
@@ -20,12 +24,17 @@
   "license": "GPL-3.0-only",
   "devDependencies": {
     "@eslint-community/eslint-plugin-eslint-comments": "^4.4.1",
+    "@testing-library/jest-dom": "^6.6.3",
+    "@testing-library/react": "^16.2.0",
     "@types/geojson": "^7946.0.14",
     "@types/leaflet": "^1.7.11",
+    "@types/leaflet.markercluster": "^1.5.5",
     "@types/react": "^18.2.0",
     "@types/react-dom": "^18.0.5",
     "@typescript-eslint/eslint-plugin": "^5.62.0",
     "@typescript-eslint/parser": "^5.62.0",
+    "@vitejs/plugin-react": "^4.3.4",
+    "@vitest/coverage-v8": "^3.0.5",
     "autoprefixer": "^10.4.14",
     "daisyui": "^4.6.1",
     "eslint": "^8.24.0",
@@ -41,15 +50,20 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "eslint-plugin-security": "^3.0.1",
     "eslint-plugin-yml": "^1.14.0",
+    "globals": "^15.14.0",
+    "happy-dom": "^16.8.1",
     "postcss": "^8.4.21",
     "prettier": "^3.3.3",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
     "rollup": "^2.75.7",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-typescript2": "^0.32.1",
     "tailwindcss": "^3.3.1",
-    "typescript": "^5.7.3"
+    "typedoc": "^0.27.6",
+    "typescript": "^5.7.3",
+    "vite": "^6.0.11",
+    "vitest": "^3.0.5"
   },
   "peerDependencies": {
     "react": "^18.2.0",
@@ -74,7 +88,7 @@
     "react-string-replace": "^1.1.1",
     "react-toastify": "^9.1.3",
     "remark-breaks": "^4.0.0",
-    "tributejs": "^5.1.3",
+    "tributejs": "github:coreydales/tribute#Fix-compile-error-T-does-not-satisfy-the-constraint",
     "tw-elements": "^1.0.0",
     "yet-another-react-lightbox": "^3.21.7"
   },

setupTest.ts

@@ -0,0 +1,2 @@
+// eslint-disable-next-line import/no-unassigned-import
+import '@testing-library/jest-dom'

src/Components/Input/TextInput.spec.tsx

@@ -0,0 +1,32 @@
+import { render, screen, fireEvent } from '@testing-library/react'
+import { describe, it, expect, beforeEach, vi } from 'vitest'
+
+import { TextInput } from './TextInput'
+
+describe('<TextInput />', () => {
+  let wrapper = render(<TextInput />)
+
+  beforeEach(() => {
+    wrapper = render(<TextInput />)
+  })
+
+  it('renders properly', () => {
+    expect(wrapper.container.firstChild).toMatchSnapshot()
+  })
+
+  describe('handleChange', () => {
+    it('calls updateFormValue with new value', () => {
+      const updateFormValue = vi.fn()
+      wrapper.rerender(<TextInput updateFormValue={updateFormValue} />)
+      fireEvent.change(screen.getByRole('textbox'), { target: { value: 'test' } })
+      expect(updateFormValue).toBeCalledWith('test')
+    })
+  })
+
+  describe('labelTitle', () => {
+    it('sets label', () => {
+      wrapper.rerender(<TextInput labelTitle='My Title' />)
+      expect(wrapper.container.firstChild).toMatchSnapshot()
+    })
+  })
+})

src/Components/Input/__snapshots__/TextInput.spec.tsx.snap

@@ -0,0 +1,38 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`<TextInput /> > labelTitle > sets label 1`] = `
+<div
+  class="tw-form-control undefined"
+>
+  <label
+    class="tw-label"
+  >
+    <span
+      class="tw-label-text tw-text-base-content undefined"
+    >
+      My Title
+    </span>
+  </label>
+  <input
+    class="tw-input tw-input-bordered tw-w-full "
+    placeholder=""
+    required=""
+    type="text"
+    value=""
+  />
+</div>
+`;
+
+exports[`<TextInput /> > renders properly 1`] = `
+<div
+  class="tw-form-control undefined"
+>
+  <input
+    class="tw-input tw-input-bordered tw-w-full "
+    placeholder=""
+    required=""
+    type="text"
+    value=""
+  />
+</div>
+`;

src/Components/Map/Subcomponents/ItemViewPopup.tsx

@@ -67,6 +67,7 @@ export const ItemViewPopup = forwardRef((props: ItemViewPopupProps, ref: any) =>
       success = true
       // eslint-disable-next-line no-catch-all/no-catch-all
     } catch (error) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       toast.error(error.toString())
     }
     if (success) {

src/Components/Map/UtopiaMapInner.tsx

@@ -190,7 +190,7 @@ export function UtopiaMapInner({
         url='https://tile.osmand.net/hd/{z}/{x}/{y}.png'
       />
       <MarkerClusterGroup
-        ref={(r) => setClusterRef(r)}
+        ref={(r) => setClusterRef(r as any)}
         showCoverageOnHover
         chunkedLoading
         maxClusterRadius={50}

src/Components/Map/hooks/useSelectPosition.tsx

@@ -98,6 +98,7 @@ function useSelectPositionManager(): {
         success = true
         // eslint-disable-next-line no-catch-all/no-catch-all
       } catch (error) {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
         toast.error(error.toString())
       }
       if (success) {
@@ -123,6 +124,7 @@ function useSelectPositionManager(): {
       success = true
       // eslint-disable-next-line no-catch-all/no-catch-all
     } catch (error) {
+      // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
       toast.error(error.toString())
     }
     if (success) {
@@ -145,6 +147,7 @@ function useSelectPositionManager(): {
           success = true
           // eslint-disable-next-line no-catch-all/no-catch-all
         } catch (error) {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-argument
           toast.error(error.toString())
         }
         if (success) {

tsconfig.json

@@ -2,7 +2,7 @@
     "compilerOptions": {
       "outDir": "dist",
       "module": "esnext",
-      "target": "es5",
+      "target": "ESNext",
       "lib": ["es6", "dom","es2015", "es2016", "es2017", "es2020"],
       "sourceMap": true,
       "allowJs": false,
@@ -16,6 +16,8 @@
       "strictNullChecks": true,
       "noUnusedLocals": false,
       "noUnusedParameters": true,
+      "allowSyntheticDefaultImports": true,
+      "skipLibCheck": true,
       "paths": {
         "#components/*": ["./src/Components/*"],
         "#utils/*": ["./src/Utils/*"],
@@ -24,10 +26,10 @@
         "#root/*": ["./*"]
       }
     },
-    "include": ["src"],
-    "exclude": ["node_modules", "dist", "example", "rollup.config.mjss"],
-    "typeRoots": [
-        "./types",
-        "./node_modules/@types/"
-      ]
-  }
+  "include": ["src", "vite.config.ts", "setupTest.ts"],
+  "exclude": ["node_modules", "dist", "example", "rollup.config.mjss"],
+  "typeRoots": [
+    "./types",
+    "./node_modules/@types/"
+  ]
+}

vite.config.ts

@@ -0,0 +1,23 @@
+import react from '@vitejs/plugin-react'
+import { defineConfig } from 'vite'
+import { configDefaults } from 'vitest/config'
+
+export default defineConfig({
+  plugins: [react()],
+  test: {
+    globals: true,
+    environment: 'happy-dom',
+    setupFiles: ['setupTest.ts'],
+    coverage: {
+      all: true,
+      include: ['src/**/*.{js,jsx,ts,tsx}'],
+      exclude: [...configDefaults.exclude],
+      thresholds: {
+        lines: 0,
+        functions: 67,
+        branches: 67,
+        statements: 0,
+      },
+    },
+  },
+})