@bigbinary/neeto-time-zones 0.5.9 → 0.5.10

package/README.md

@@ -7,10 +7,10 @@ A simple and lightweight NPM package for working with time zones. This package p
 
 ## Installation
 
-You can install the package using npm:
+You can install the package using yarn:
 
 ```bash
-npm install @bigbinary/neeto-time-zones
+yarn add @bigbinary/neeto-time-zones
 ```
 
 ## Importing CSS styles to the main stylesheet
@@ -24,10 +24,59 @@ You should add the following to `main.scss` file:
 ## NeetoTimezoneSelector
 
 [Check out the live demo](https://codepen.io/Jijin-Haridas/full/wvQbeOr)
-```js
+
+### Usage 1
+
+```jsx
 import { NeetoTimezoneSelector } from "@bigbinary/neeto-time-zones";
 
-new NeetoTimezoneSelector(document.getElementById("elementId"));
+const ReactComponent = () => {
+  const timezoneRef = useCallback(node => {
+    if (!(node !== null)) return;
+
+    new NeetoTimezoneSelector(node, {
+      elementId: "custom-selector-element",
+      className: "custom-selector-class",
+      initialValue: "initial-timezone",
+      position: "top",
+      onChange: (timezone) => {
+        console.log(timezone);
+      },
+      onHourFormatChange: (timeFormat) => {
+        console.log(timeFormat);
+      }
+    });
+  }, []);
+
+  return (
+    <div
+      ref={timezoneRef}
+    />
+  );
+};
+```
+
+### Usage 2
+
+```jsx
+import NeetoTimezoneSelector from "@bigbinary/neeto-time-zones/react";
+
+const ReactComponent = () => {
+  return (
+    <NeetoTimezoneSelector
+      elementId="custom-selector-element"
+      className="custom-selector-class"
+      initialValue="initial-timezone"
+      position="top"
+      onChange={(timezone) => {
+        console.log(timezone);
+      }}
+      onHourFormatChange={(timeFormat) => {
+        console.log(timeFormat);
+      }}
+    />
+  );
+}
 ```
 
 ### Configuration
@@ -35,24 +84,13 @@ You can pass options as the second parameter to configure the timezone selector
 
 1. elementId: ID for the NeetoTimezoneSelector. By default the ID will be `timezone-selector`
 2. className: Custom classes that can be added to the component.
-3. onChange: Function to be called when the timezone selector changes.
+3. initialValue: Initial Value of the timezone selector.
 4. position: Position in which the selector should open in. Available options: `top`, `bottom`. Default position is `bottom`.
-5. onHourFormatChange: Function to be called when the time format changes.
+5. onChange: Function to be called when the timezone selector changes.
+6. onHourFormatChange: Function to be called when the time format changes.
 
-```js
-import { NeetoTimezoneSelector } from "@bigbinary/neeto-time-zones";
 
-new NeetoTimezoneSelector(document.getElementById("elementId"), {
-  className: "custom-selector-class",
-  onChange: (timezone) => {
-    console.log(timezone);
-  },
-  elementId: "custom-selector-element",
-  position: "top",
-});
-```
-
-### ianaTimezoneToHumanReadble
+### ianaTimezoneToHumanReadable
 
 ```js
 import { ianaTimezoneToHumanReadable } from "@bigbinary/neeto-time-zones";
@@ -71,12 +109,12 @@ ianaTimezoneToHumanReadable("Europe/Berlin") // => Central Standard Time
 ```bash
 git clone git@github.com:bigbinary/neeto-time-zones.git
 cd neeto-timezones/js
-pnpm install
-pnpm dev
+yarn install
+yarn dev
 ```
 
-### Publishing to npm
+## Instructions for Publishing
+
+A package is released upon merging a PR labeled as patch, minor, or major into the main branch. The patch label addresses bug fixes, minor signifies the addition of new features, and major denotes breaking changes, adhering to the principles outlined in [Semantic Versioning (SemVer)](https://semver.org/).
 
-1. Bump `package.json` version
-2. Commit and push
-3. `pnpm build && pnpm publish`
+You can checkout the Create and publish releases workflow in GitHub Actions to get a live update.

package/index.d.ts

@@ -0,0 +1,24 @@
+declare module "@bigbinary/neeto-time-zones" {
+  export interface TimezoneObject {
+    utc: string[];
+    label: string;
+    keywords: string;
+    isDst: boolean;
+    cities: string;
+  }
+
+  export interface NeetoTimezoneSelectorProps {
+    className?: string;
+    elementId?: string;
+    initialValue?: string;
+    position?: "top" | "bottom";
+    onChange?: (timezone: TimezoneObject) => void;
+    onHourFormatChange?: (timeFormat: string) => void;
+  }
+
+  export class NeetoTimezoneSelector {
+    constructor(node: HTMLElement, props: NeetoTimezoneSelectorProps);
+  }
+
+  export function ianaTimezoneToHumanReadable(timezone: string): string;
+}

package/package.json

@@ -1,20 +1,25 @@
 {
   "name": "@bigbinary/neeto-time-zones",
-  "version": "0.5.9",
+  "version": "0.5.10",
   "license": "MIT",
+  "types": "./index.d.ts",
   "exports": {
     ".": {
       "import": "./dist/index.es.js",
-      "require": "./dist/index.cjs.js"
+      "require": "./dist/index.cjs.js",
+      "types": "./dist/index.d.ts"
     },
     "./react": {
       "import": "./dist/react.es.js",
-      "require": "./dist/react.cjs.js"
+      "require": "./dist/react.cjs.js",
+      "types": "./dist/react.d.ts"
     }
   },
   "type": "module",
   "files": [
-    "dist"
+    "dist",
+    "index.d.ts",
+    "react.d.ts"
   ],
   "scripts": {
     "dev": "vite",
@@ -28,18 +33,12 @@
   },
   "peerDependencies": {
     "@bigbinary/neeto-cist": "^1.0.4",
-    "@bigbinary/neeto-commons-frontend": "^3.0.1",
     "ramda": "^0.29.1",
     "react": "^18 || ^17.0.1 || ^16",
     "react-dom": "^18 || ^17.0.1 || ^16"
   },
   "devDependencies": {
-    "@bigbinary/eslint-plugin-neeto": "^1.1.14",
     "@bigbinary/neeto-cist": "^1.0.4",
-    "@bigbinary/neeto-commons-frontend": "^3.0.1",
-    "@bigbinary/neeto-icons": "^1.11.0",
-    "@bigbinary/neeto-molecules": "^1.0.19",
-    "@bigbinary/neetoui": "5.0.2",
     "@typescript-eslint/eslint-plugin": "^6.2.1",
     "@typescript-eslint/parser": "^6.2.1",
     "@vitejs/plugin-react": "^4.0.3",
@@ -47,16 +46,10 @@
     "cssnano": "4.1.11",
     "eslint": "8.14.0",
     "eslint-config-airbnb": "^19.0.4",
-    "eslint-plugin-import": "2.26.0",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "7.29.4",
-    "eslint-plugin-react-hooks": "4.5.0",
-    "lint-staged": "12.4.1",
+    "eslint-plugin-jsx-a11y": "6.7.1",
     "postcss": "^8.4.17",
     "postcss-import": "^15.0.0",
-    "postcss-prefixwrap": "1.40.0",
     "postcss-preset-env": "7.8.2",
-    "postcss-wrap": "^0.0.4",
     "prettier": "2.6.2",
     "ramda": "^0.29.1",
     "react": "^18.2.0",

package/react.d.ts

@@ -0,0 +1,20 @@
+export interface TimezoneObject {
+  utc: string[];
+  label: string;
+  keywords: string;
+  isDst: boolean;
+  cities: string;
+}
+
+export interface NeetoTimezoneSelectorProps {
+  className?: string;
+  elementId?: string;
+  initialValue?: string;
+  position?: "top" | "bottom";
+  onChange?: (timezone: TimezoneObject) => void;
+  onHourFormatChange?: (timeFormat: string) => void;
+}
+
+export default function NeetoTimezoneSelector(
+  props: NeetoTimezoneSelectorProps
+);