nepal-places-react 0.1.1

package/dist/NepalPlacesDropdown.d.ts

@@ -0,0 +1,2 @@
+import type { NepalPlacesDropdownProps } from './types.js';
+export declare function NepalPlacesDropdown({ depth, labels, flat, filterType, className, onChange, }: NepalPlacesDropdownProps): import("react").JSX.Element;

package/dist/NepalPlacesDropdown.js

@@ -0,0 +1,87 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { getDistricts, getMunicipalities, getProvinces, } from 'nepal-places';
+import { useEffect, useMemo, useRef, useState } from 'react';
+export function NepalPlacesDropdown({ depth = 4, labels = 'english', flat = false, filterType, className, onChange, }) {
+    const [provinceId, setProvinceId] = useState('');
+    const [districtId, setDistrictId] = useState('');
+    const [localLevelId, setLocalLevelId] = useState('');
+    const [wardId, setWardId] = useState('');
+    const mounted = useRef(false);
+    const provinces = useMemo(() => getProvinces(), []);
+    const districts = useMemo(() => (provinceId ? getDistricts(Number(provinceId)) : []), [provinceId]);
+    const localLevels = useMemo(() => {
+        if (!districtId)
+            return [];
+        const all = getMunicipalities(Number(districtId));
+        return filterType ? all.filter((m) => m.type === filterType) : all;
+    }, [districtId, filterType]);
+    const selectedLocalLevel = useMemo(() => localLevels.find((m) => m.id === Number(localLevelId)), [localLevels, localLevelId]);
+    const wards = useMemo(() => {
+        if (!selectedLocalLevel || selectedLocalLevel.wards === 0)
+            return [];
+        const list = [];
+        for (let i = 1; i <= selectedLocalLevel.wards; i++) {
+            list.push({
+                id: i,
+                local_level_id: selectedLocalLevel.id,
+                ward_number: i,
+            });
+        }
+        return list;
+    }, [selectedLocalLevel]);
+    const name = (item) => labels === 'nepali' && item.name_np ? item.name_np : item.name;
+    const output = useMemo(() => {
+        const province = provinces.find((p) => p.id === Number(provinceId));
+        const district = districts.find((d) => d.id === Number(districtId));
+        const localLevel = localLevels.find((m) => m.id === Number(localLevelId));
+        const ward = wards.find((w) => w.id === Number(wardId));
+        const sel = {};
+        if (province)
+            sel.province = province;
+        if (district)
+            sel.district = district;
+        if (localLevel)
+            sel.localLevel = localLevel;
+        if (ward)
+            sel.ward = ward;
+        if (flat) {
+            const parts = [];
+            if (province)
+                parts.push(String(province.id));
+            if (district)
+                parts.push(String(district.id));
+            if (localLevel)
+                parts.push(String(localLevel.id));
+            if (ward)
+                parts.push(String(ward.ward_number));
+            sel.code = parts.join('/');
+        }
+        return sel;
+    }, [
+        provinceId,
+        districtId,
+        localLevelId,
+        wardId,
+        provinces,
+        districts,
+        localLevels,
+        wards,
+        flat,
+    ]);
+    useEffect(() => {
+        if (!mounted.current) {
+            mounted.current = true;
+            return;
+        }
+        onChange?.(output);
+    }, [output, onChange]);
+    const onSelect = (set, ...clear) => (e) => {
+        const v = e.target.value ? Number(e.target.value) : '';
+        set(v);
+        for (const fn of clear)
+            fn('');
+    };
+    return (_jsxs("div", { className: `np-places-dropdown ${className ?? ''}`, style: { display: 'flex', gap: '8px', flexWrap: 'wrap' }, children: [depth >= 1 && (_jsxs("select", { className: "np-places-select", value: provinceId, onChange: onSelect(setProvinceId, setDistrictId, setLocalLevelId, setWardId), children: [_jsx("option", { value: "", children: labels === 'nepali' ? 'प्रदेश' : 'Province' }), provinces.map((p) => (_jsx("option", { value: p.id, children: name(p) }, p.id)))] })), depth >= 2 && provinceId !== '' && (_jsxs("select", { className: "np-places-select", value: districtId, onChange: onSelect(setDistrictId, setLocalLevelId, setWardId), children: [_jsx("option", { value: "", children: labels === 'nepali' ? 'जिल्ला' : 'District' }), districts.map((d) => (_jsx("option", { value: d.id, children: name(d) }, d.id)))] })), depth >= 3 && districtId !== '' && (_jsxs("select", { className: "np-places-select", value: localLevelId, onChange: onSelect(setLocalLevelId, setWardId), children: [_jsx("option", { value: "", children: labels === 'nepali' ? 'स्थानीय तह' : 'Municipality' }), localLevels.map((m) => (_jsxs("option", { value: m.id, children: [name(m), filterType ? '' : ` (${m.type.replace('_', ' ')})`] }, m.id)))] })), depth >= 4 && localLevelId !== '' && wards.length > 0 && (_jsxs("select", { className: "np-places-select", value: wardId, onChange: onSelect(setWardId), children: [_jsx("option", { value: "", children: labels === 'nepali' ? 'वडा' : 'Ward' }), wards.map((w) => (_jsx("option", { value: w.id, children: labels === 'nepali'
+                            ? `वडा ${w.ward_number}`
+                            : `Ward ${w.ward_number}` }, w.id)))] }))] }));
+}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { NepalPlacesDropdown } from './NepalPlacesDropdown.js';
+export type { NepalPlacesDropdownProps, PlaceSelection, Labels, } from './types.js';

package/dist/index.js

@@ -0,0 +1 @@
+export { NepalPlacesDropdown } from './NepalPlacesDropdown.js';

package/dist/types.d.ts

@@ -0,0 +1,17 @@
+import type { District, LocalLevel, LocalLevelType, Province, Ward } from 'nepal-places';
+export type Labels = 'english' | 'nepali';
+export interface PlaceSelection {
+    province?: Province;
+    district?: District;
+    localLevel?: LocalLevel;
+    ward?: Ward;
+    code?: string;
+}
+export interface NepalPlacesDropdownProps {
+    depth?: 1 | 2 | 3 | 4;
+    labels?: Labels;
+    flat?: boolean;
+    filterType?: LocalLevelType;
+    className?: string;
+    onChange?: (selection: PlaceSelection) => void;
+}

package/dist/types.js

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -0,0 +1,62 @@
+{
+  "name": "nepal-places-react",
+  "version": "0.1.1",
+  "description": "React dropdown component for Nepal's provinces, districts, municipalities, and wards. Fast, typed, bilingual.",
+  "type": "module",
+  "main": "./dist/index.js",
+  "module": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/index.js",
+      "types": "./dist/index.d.ts"
+    }
+  },
+  "files": ["dist"],
+  "scripts": {
+    "build": "tsc",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "peerDependencies": {
+    "react": "^18.0.0 || ^19.0.0"
+  },
+  "dependencies": {
+    "nepal-places": "^0.1.0"
+  },
+  "keywords": [
+    "nepal",
+    "nepali",
+    "react",
+    "dropdown",
+    "provinces",
+    "districts",
+    "municipalities",
+    "wards",
+    "nepal-places",
+    "location-picker",
+    "react-component",
+    "nepal-geography"
+  ],
+  "license": "MIT",
+  "author": {
+    "name": "kushal1o1",
+    "url": "https://github.com/kushal1o1"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kushal1o1/NepalPlaces.git"
+  },
+  "bugs": {
+    "url": "https://github.com/kushal1o1/NepalPlaces/issues"
+  },
+  "homepage": "https://github.com/kushal1o1/NepalPlaces#readme",
+  "devDependencies": {
+    "typescript": "^5.4.0",
+    "react": "^19.0.0",
+    "@types/react": "^19.0.0",
+    "@testing-library/react": "^16.0.0",
+    "jsdom": "^25.0.0",
+    "vitest": "^3.0.0"
+  }
+}