fix: add file extensions

feat: deploy kits as npm packages

.eslintrc

@@ -23,6 +23,7 @@
     "import/no-unresolved": "off",
     "import/named": "off",
     "import/namespace": "off",
-    "import/no-named-as-default-member": "off"
+    "import/no-named-as-default-member": "off",
+    "import/extensions": ["error", "ignorePackages"]
   }
 }

.github/workflows/packages.yml

@@ -69,3 +69,11 @@ jobs:
         working-directory: ./packages/icons/lucide
         run: pnpm publish --access public --no-git-checks --tag ${{ steps.gitversion.outputs.preReleaseLabel == '' && 'latest' || steps.gitversion.outputs.preReleaseLabel }}
 
+      - name: Deploy Uikit-Default Package
+        working-directory: ./packages/kits/default
+        run: pnpm publish --access public --no-git-checks --tag ${{ steps.gitversion.outputs.preReleaseLabel == '' && 'latest' || steps.gitversion.outputs.preReleaseLabel }}
+
+      - name: Deploy Uikit-Apfel Package
+        working-directory: ./packages/kits/apfel
+        run: pnpm publish --access public --no-git-checks --tag ${{ steps.gitversion.outputs.preReleaseLabel == '' && 'latest' || steps.gitversion.outputs.preReleaseLabel }}
+

packages/kits/apfel/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": "../../../.eslintrc",
+  "rules": {
+    "import/extensions": "off"
+  }
+}

packages/kits/apfel/index.tsx

@@ -0,0 +1,11 @@
+export * from './button'
+export * from './card'
+export * from './checkbox'
+export * from './input'
+export * from './list'
+export * from './loading'
+export * from './progress'
+export * from './slider'
+export * from './tab-bar'
+export * from './tabs'
+export * from './theme'

packages/kits/apfel/package.json

@@ -1,5 +1,31 @@
 {
+  "name": "@react-three/uikit-apfel",
+  "description": "Apfel kit for @react-three/uikit",
+  "version": "0.0.0",
+  "license": "SEE LICENSE IN LICENSE",
+  "homepage": "https://github.com/pmndrs/uikit",
+  "author": "Bela Bohlender",
+  "keywords": [
+    "r3f",
+    "uikit",
+    "three.js",
+    "userinterface",
+    "react",
+    "flexbox",
+    "yoga",
+    "typescript",
+    "apfel"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:pmndrs/uikit.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
   "scripts": {
+    "build": "tsc",
     "check:prettier": "prettier --check .",
     "check:eslint": "eslint '**/*.{tsx,ts}'",
     "fix:prettier": "prettier --write .",
@@ -8,11 +34,13 @@
   "devDependencies": {
     "@preact/signals-core": "^1.5.1",
     "@react-three/fiber": "^8.15.13",
-    "@react-three/uikit": "workspace:^",
-    "@react-three/uikit-lucide": "workspace:^",
     "@types/react": "^18.2.47",
     "@types/three": "^0.161.0",
     "three": "^0.161.0"
   },
-  "type": "module"
+  "type": "module",
+  "dependencies": {
+    "@react-three/uikit": "workspace:^",
+    "@react-three/uikit-lucide": "workspace:^"
+  }
 }

packages/kits/apfel/tsconfig.json

@@ -1,6 +1,9 @@
 {
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
+    "outDir": "dist",
+    "declaration": true,
+    "skipLibCheck": true,
     "jsx": "react"
   }
 }

packages/kits/default/.eslintrc

@@ -0,0 +1,6 @@
+{
+  "extends": "../../../.eslintrc",
+  "rules": {
+    "import/extensions": "off"
+  }
+}

packages/kits/default/index.tsx

@@ -0,0 +1,23 @@
+export * from './accordion.js'
+export * from './alert.js'
+export * from './alert-dialog.js'
+export * from './avatar.js'
+export * from './badge.js'
+export * from './button.js'
+export * from './card.js'
+export * from './checkbox.js'
+export * from './dialog.js'
+export * from './label.js'
+export * from './pagination.js'
+export * from './progress.js'
+export * from './radio-group.js'
+export * from './separator.js'
+export * from './skeleton.js'
+export * from './slider.js'
+export * from './switch.js'
+export * from './tabs.js'
+export * from './toggle.js'
+export * from './toggle-group.js'
+export * from './tooltip.js'
+export * from './input.js'
+export * from './theme.js'

packages/kits/default/package.json

@@ -1,5 +1,31 @@
 {
+  "name": "@react-three/uikit-default",
+  "description": "Default (shadcn) kit for @react-three/uikit",
+  "version": "0.0.0",
+  "license": "SEE LICENSE IN LICENSE",
+  "homepage": "https://github.com/pmndrs/uikit",
+  "author": "Bela Bohlender",
+  "keywords": [
+    "r3f",
+    "uikit",
+    "three.js",
+    "userinterface",
+    "react",
+    "flexbox",
+    "yoga",
+    "typescript",
+    "shadcn"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "[email protected]:pmndrs/uikit.git"
+  },
+  "files": [
+    "dist"
+  ],
+  "main": "dist/index.js",
   "scripts": {
+    "build": "tsc",
     "check:prettier": "prettier --check .",
     "check:eslint": "eslint '**/*.{tsx,ts}'",
     "fix:prettier": "prettier --write .",
@@ -8,14 +34,14 @@
   "devDependencies": {
     "@preact/signals-core": "^1.5.1",
     "@react-three/fiber": "^8.15.13",
-    "@react-three/uikit": "workspace:^",
-    "@react-three/uikit-lucide": "workspace:^",
     "@types/react": "^18.2.47",
     "@types/three": "^0.161.0",
     "three": "^0.161.0"
   },
   "type": "module",
   "dependencies": {
+    "@react-three/uikit": "workspace:^",
+    "@react-three/uikit-lucide": "workspace:^",
     "tunnel-rat": "^0.1.2"
   }
 }

packages/kits/default/tsconfig.json

@@ -1,6 +1,9 @@
 {
   "extends": "../../../tsconfig.json",
   "compilerOptions": {
+    "outDir": "dist",
+    "declaration": true,
+    "skipLibCheck": true,
     "jsx": "react"
   }
 }

packages/uikit/src/caret.ts

@@ -1,14 +1,14 @@
 import { Signal, computed, effect, signal } from '@preact/signals-core'
 import { Matrix4, Vector3Tuple } from 'three'
-import { ClippingRect } from './clipping'
-import { ElementType, OrderInfo, useOrderInfo } from './order'
-import { GetInstancedPanelGroup, useGetInstancedPanelGroup, usePanelGroupDependencies } from './panel/react'
+import { ClippingRect } from './clipping.js'
+import { ElementType, OrderInfo, useOrderInfo } from './order.js'
+import { GetInstancedPanelGroup, useGetInstancedPanelGroup, usePanelGroupDependencies } from './panel/react.js'
 import { useEffect, useMemo } from 'react'
-import { InstancedPanel } from './panel/instanced-panel'
-import { Inset } from './flex'
-import { ManagerCollection, PropertyTransformation } from './properties/utils'
-import { useImmediateProperties } from './properties/immediate'
-import { useBatchedProperties } from './properties/batched'
+import { InstancedPanel } from './panel/instanced-panel.js'
+import { Inset } from './flex/index.js'
+import { ManagerCollection, PropertyTransformation } from './properties/utils.js'
+import { useImmediateProperties } from './properties/immediate.js'
+import { useBatchedProperties } from './properties/batched.js'
 
 const noBorder = signal<Inset>([0, 0, 0, 0])
 

packages/uikit/src/focus.ts

@@ -1,7 +1,7 @@
 import { useMemo } from 'react'
-import { WithClasses, useTraverseProperties } from './properties/default'
-import { ManagerCollection, Properties } from './properties/utils'
-import { createConditionalPropertyTranslator } from './utils'
+import { WithClasses, useTraverseProperties } from './properties/default.js'
+import { ManagerCollection, Properties } from './properties/utils.js'
+import { createConditionalPropertyTranslator } from './utils.js'
 import { Signal } from '@preact/signals-core'
 
 export type WithFocus<T> = T & {

packages/uikit/src/selection.ts

@@ -1,11 +1,11 @@
 import { Signal, effect, signal } from '@preact/signals-core'
-import { GetInstancedPanelGroup, useGetInstancedPanelGroup, usePanelGroupDependencies } from './panel/react'
+import { GetInstancedPanelGroup, useGetInstancedPanelGroup, usePanelGroupDependencies } from './panel/react.js'
 import { useEffect, useMemo } from 'react'
-import { InstancedPanel } from './panel/instanced-panel'
+import { InstancedPanel } from './panel/instanced-panel.js'
 import { Matrix4, Vector2Tuple } from 'three'
-import { ClippingRect } from './clipping'
-import { ElementType, OrderInfo, useOrderInfo } from './order'
-import { Inset } from './flex'
+import { ClippingRect } from './clipping.js'
+import { ElementType, OrderInfo, useOrderInfo } from './order.js'
+import { Inset } from './flex/index.js'
 
 const noBorder = signal<Inset>([0, 0, 0, 0])