From 8f842bab6f22915ce89662f1576225ff105f79e2 Mon Sep 17 00:00:00 2001
From: Maulana Malik Ibrahim <ibrahimcpersonal@gmail.com>
Date: Fri, 12 Apr 2024 08:13:51 +0700
Subject: [PATCH] patch(function): version update (v1.0.4)

---
 packages/react/function/README.md        | 76 ++++++++++++++++++++++++
 packages/react/function/package.json     | 46 ++++++++++++++
 packages/react/function/src/functions.ts | 32 ++++++++++
 packages/react/function/src/index.ts     |  1 +
 4 files changed, 155 insertions(+)
 create mode 100644 packages/react/function/README.md
 create mode 100644 packages/react/function/package.json
 create mode 100644 packages/react/function/src/functions.ts
 create mode 100644 packages/react/function/src/index.ts

diff --git a/packages/react/function/README.md b/packages/react/function/README.md
new file mode 100644
index 0000000..4f16ada
--- /dev/null
+++ b/packages/react/function/README.md
@@ -0,0 +1,76 @@
+# @ibrahimstudio/function
+
+This package provides useful JavaScript functions for handling events and string manipulations.
+
+## Installation
+
+You can install this package via npm:
+
+```sh
+npm i @ibrahimstudio/function
+# or
+yarn add @ibrahimstudio/function
+```
+
+## Usage
+
+### 1. `scrollView`
+
+The `scrollView` function allows you to smoothly scroll to a specific element on the page.
+
+```javascript
+import { scrollView } from "@ibrahimstudio/function";
+
+// Assuming the offset value based on the height of the Navbar
+// The target element to scroll to is the About section with the "about-us" id
+
+const Homepage = () => {
+  return (
+    <div id="homepage">
+      <nav>
+        <button onClick={() => scrollView(-70, "about-us")}>About Us</button>
+      </nav>
+      <div id="about-us">{/* About Content */}</div>
+    </div>
+  );
+};
+```
+
+### scrollView Props
+
+| Attribute | Type                | Description                                          | Default |
+| --------- | ------------------- | ---------------------------------------------------- | ------- |
+| `offset`  | _number_ (required) | The offset from the top of the element to scroll to. | -       |
+| `id`      | _string_ (required) | The ID of the element to scroll to.                  | -       |
+
+> Note: If the `offset` has no value, fill it with `0`
+
+---
+
+### 2. `toTitleCase`
+
+The `toTitleCase` function converts a string to title case.
+
+```javascript
+import { toTitleCase } from "@ibrahimstudio/function";
+
+// Example usage:
+const title = toTitleCase("hello world");
+console.log(title); // Output: "Hello World"
+```
+
+### toTitleCase Props
+
+| Attribute | Type                | Description                          | Default |
+| --------- | ------------------- | ------------------------------------ | ------- |
+| `str`     | _string_ (required) | The string to convert to title Case. | -       |
+
+---
+
+## Contributing
+
+Contributions are welcome! If you have any improvements, bug fixes, or features, feel free to open an issue or create a pull request on GitHub.
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](https://github.com/space-ibrahimstudio/ibrahimstudio/blob/master/LICENSE) file for details.
diff --git a/packages/react/function/package.json b/packages/react/function/package.json
new file mode 100644
index 0000000..235353b
--- /dev/null
+++ b/packages/react/function/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "@ibrahimstudio/function",
+  "version": "1.0.4",
+  "description": "This function package provides useful functions for handling common tasks in React applications.",
+  "main": "dist/index.js",
+  "module": "dist/index.es.js",
+  "types": "dist/index.d.ts",
+  "sideEffects": false,
+  "scripts": {
+    "build": "npm run clean && tsc",
+    "clean": "rimraf dist",
+    "prepublishOnly": "npm run build",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [
+    "function",
+    "react",
+    "components"
+  ],
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/space-ibrahimstudio/ibrahimstudio.git",
+    "directory": "packages/react/function"
+  },
+  "bugs": {
+    "url": "https://github.com/space-ibrahimstudio/ibrahimstudio/issues"
+  },
+  "author": "Ibrahim Space Studio",
+  "license": "MIT",
+  "homepage": "https://space.ibrahimstudio.co",
+  "peerDependencies": {
+    "react": ">=18",
+    "react-dom": ">=18"
+  },
+  "devDependencies": {
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  }
+}
diff --git a/packages/react/function/src/functions.ts b/packages/react/function/src/functions.ts
new file mode 100644
index 0000000..8ea929d
--- /dev/null
+++ b/packages/react/function/src/functions.ts
@@ -0,0 +1,32 @@
+export function scrollView(offset: number, id: string): void {
+  const element = document.querySelector(`[id="${id}"]`) as HTMLElement | null;
+  if (element) {
+    const yOffset: number = offset;
+    const y: number =
+      element.getBoundingClientRect().top + window.scrollY + yOffset;
+    window.scrollTo({ top: y, behavior: "smooth" });
+  } else {
+    console.error(`Element with id ${id} not found.`);
+  }
+}
+
+export function toTitleCase(str: string): string {
+  return str.replace(/\w\S*/g, function (txt: string): string {
+    return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();
+  });
+}
+
+export function formatDate(
+  dateString: string,
+  locale: string = "en-US"
+): string {
+  const date = new Date(dateString);
+  const options: Intl.DateTimeFormatOptions = {
+    day: "numeric",
+    month: "long",
+    year: "numeric",
+    hour: "numeric",
+    minute: "numeric",
+  };
+  return date.toLocaleDateString(locale, options);
+}
diff --git a/packages/react/function/src/index.ts b/packages/react/function/src/index.ts
new file mode 100644
index 0000000..ff1070c
--- /dev/null
+++ b/packages/react/function/src/index.ts
@@ -0,0 +1 @@
+export { scrollView, toTitleCase, formatDate } from "./functions";