Merge pull request #14 from BrijenMakwana/dev

refactor: code refactor

CONTRIBUTING.md

@@ -6,7 +6,7 @@ We want this community to be friendly and respectful to each other. Please follo
 
 ## Component Structure
 
-The `react-native-multistep` library is organized as follows:
+The `@brijen/react-native-multistep` library is organized as follows:
 
 ```
 src/

README.md

@@ -1,4 +1,4 @@
-# react-native-multistep
+# @brijen/react-native-multistep
 
 A lightweight multi-step view component for React Native with smooth transitions using Reanimated
 
@@ -19,7 +19,7 @@ A lightweight multi-step view component for React Native with smooth transitions
    - [Example: Custom Styling](#example-custom-styling)
 4. [Custom Components](#custom-components)
    - [Example: Custom Components](#example-custom-components)
-5. [Using react-hook-form with react-native-multistep](#using-react-hook-form-with-react-native-multistep)
+5. [Using react-hook-form with @brijen/react-native-multistep](#using-react-hook-form-with-brijenreact-native-multistep)
    - [Example: Integrating react-hook-form](#example-integrating-react-hook-form)
 6. [MultiStepProps](#multistepprops)
 7. [StepProps](#stepprops)
@@ -31,7 +31,7 @@ A lightweight multi-step view component for React Native with smooth transitions
 ## Installation
 
 ```sh
-npm install react-native-multistep
+npm install @brijen/react-native-multistep
 ```
 
 ### Peer Dependencies
@@ -66,7 +66,7 @@ This package relies on the following peer dependencies. Make sure they are insta
 ## Usage
 
 ```js
-import { MultiStep, Step } from 'react-native-multistep';
+import { MultiStep, Step } from '@brijen/react-native-multistep';
 import { Text } from 'react-native';
 
 const BasicUsage = () => {
@@ -99,7 +99,7 @@ Here's an example of how to apply custom styling to the `MultiStep` and `Step` c
 ```js
 import { useState } from 'react';
 import { Text, TextInput, StyleSheet } from 'react-native';
-import { MultiStep, Step } from 'react-native-multistep';
+import { MultiStep, Step } from '@brijen/react-native-multistep';
 
 const GettingStarted = () => {
   const [formData, setFormData] = useState({
@@ -211,7 +211,7 @@ Here's an example of how to apply custom styling to the `MultiStep` and `Step` c
 ```js
 import { useState } from 'react';
 import { Text, TextInput, StyleSheet } from 'react-native';
-import { MultiStep, Step } from 'react-native-multistep';
+import { MultiStep, Step } from '@brijen/react-native-multistep';
 
 const StyledMultiStep = () => {
   const [formData, setFormData] = useState({
@@ -395,7 +395,7 @@ import {
   View,
   TouchableOpacity,
 } from 'react-native';
-import { MultiStep, Step, type MultiStepRef } from 'react-native-multistep';
+import { MultiStep, Step, type MultiStepRef } from '@brijen/react-native-multistep';
 import { FontAwesome, MaterialIcons } from '@expo/vector-icons';
 
 const CustomDesign = () => {
@@ -587,16 +587,16 @@ const styles = StyleSheet.create({
 
 ```
 
-## Using react-hook-form with react-native-multistep
+## Using react-hook-form with @brijen/react-native-multistep
 
-You can integrate `react-hook-form` with `react-native-multistep` to manage form state and validation across multiple steps. Below is an example demonstrating how to use `react-hook-form` with `react-native-multistep`.
+You can integrate `react-hook-form` with `@brijen/react-native-multistep` to manage form state and validation across multiple steps. Below is an example demonstrating how to use `react-hook-form` with `@brijen/react-native-multistep`.
 
 ### Example: Integrating react-hook-form
 
 ```js
 import { useForm, Controller } from 'react-hook-form';
 import { Text, TextInput, StyleSheet } from 'react-native';
-import { MultiStep, Step } from 'react-native-multistep';
+import { MultiStep, Step } from '@brijen/react-native-multistep';
 
 const ReactHookForm = () => {
   const { control, handleSubmit } = useForm({
@@ -726,7 +726,7 @@ The `MultiStepProps` interface defines the properties for the `MultiStep` compon
 
 | Property                     | Type                     | Required | Default Value               | Description                                                                 |
 |------------------------------|--------------------------|----------|-----------------------------|-----------------------------------------------------------------------------|
-| `children`                   | `React.ReactNode`        | Yes      | -                           | The steps or content to be rendered inside the multi-step view. Typically an array of `Step` components. |
+| `children`                   | `React.ReactNode`        | Yes      | -                           | The steps or content to be rendered inside the multi-step view. This can be one or more `Step` components. |
 | `onFinalStepSubmit`          | `() => void`             | No      | -                           | Callback function that is called when the user presses the submit button on the last step. |
 | `prevButtonText`             | `string`                 | No       | `"Back"`                    | Text for the "Previous" button.                                             |
 | `nextButtonText`             | `string`                 | No       | `"Next"`                    | Text for the "Next" button.                                                 |
@@ -760,7 +760,7 @@ The `StepProps` interface defines the properties for a single step in a multi-st
 | Property             | Type                     | Required | Default Value | Description                                                                 |
 |----------------------|--------------------------|----------|---------------|-----------------------------------------------------------------------------|
 | `title`              | `string`                 | Yes      | -             | The title of the step. This is displayed as the step's label.               |
-| `children`           | `React.ReactNode`        | Yes      | -             | The content of the step. This can be any React component or elements.       |
+| `children`           | `React.ReactNode`        | Yes      | -             | The content of the step. This can be any React component.       |
 | `stepTitleStyle`     | `TextStyle`              | No       | -             | Style for the step title text. Accepts a React Native `TextStyle` object.   |
 | `nextStepTitleStyle` | `TextStyle`              | No       | -             | Style for the next step title text. Accepts a React Native `TextStyle` object. |
 | `titleComponent`     | `() => JSX.Element`      | No       | -             | Custom component for the title. Overrides `title` if provided.              |
@@ -776,7 +776,7 @@ Here's an example demonstrating how to pass a ref to `MultiStep` and use its met
 ```js
 import { useRef } from 'react';
 import { Text, View, Button } from 'react-native';
-import { MultiStep, Step, type MultiStepRef } from 'react-native-multistep';
+import { MultiStep, Step, type MultiStepRef } from '@brijen/react-native-multistep';
 
 const App = () => {
   const multiStepRef = useRef<MultiStepRef>(null);

example/package.json

@@ -9,6 +9,7 @@
     "web": "expo start --web"
   },
   "dependencies": {
+    "@brijen/react-native-multistep": "*",
     "@expo/metro-runtime": "~4.0.1",
     "expo": "~52.0.28",
     "expo-status-bar": "~2.0.1",

example/src/examples/basic-usage.tsx

@@ -1,4 +1,4 @@
-import { MultiStep, Step } from 'react-native-multistep';
+import { MultiStep, Step } from '@brijen/react-native-multistep';
 import { Text } from 'react-native';
 
 const BasicUsage = () => {

example/src/examples/custom-design.tsx

@@ -6,7 +6,11 @@ import {
   View,
   TouchableOpacity,
 } from 'react-native';
-import { MultiStep, Step, type MultiStepRef } from 'react-native-multistep';
+import {
+  MultiStep,
+  Step,
+  type MultiStepRef,
+} from '@brijen/react-native-multistep';
 import { FontAwesome, MaterialIcons } from '@expo/vector-icons';
 
 const CustomDesign = () => {

example/src/examples/getting-started.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Text, TextInput, StyleSheet } from 'react-native';
-import { MultiStep, Step } from 'react-native-multistep';
+import { MultiStep, Step } from '@brijen/react-native-multistep';
 
 const GettingStarted = () => {
   const [formData, setFormData] = useState({

example/src/examples/react-hook-form.tsx

@@ -1,6 +1,6 @@
 import { useForm, Controller } from 'react-hook-form';
 import { Text, TextInput, StyleSheet } from 'react-native';
-import { MultiStep, Step } from 'react-native-multistep';
+import { MultiStep, Step } from '@brijen/react-native-multistep';
 
 const ReactHookForm = () => {
   const { control, handleSubmit } = useForm({

example/src/examples/styled-multistep.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Text, TextInput, StyleSheet } from 'react-native';
-import { MultiStep, Step } from 'react-native-multistep';
+import { MultiStep, Step } from '@brijen/react-native-multistep';
 
 const StyledMultiStep = () => {
   const [formData, setFormData] = useState({

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-native-multistep",
+  "name": "@brijen/react-native-multistep",
   "version": "0.1.0",
   "description": "A lightweight multi-step view component for React Native with smooth transitions using Reanimated.",
   "source": "./src/index.tsx",
@@ -98,9 +98,9 @@
     "@types/react": "^18.2.44"
   },
   "peerDependencies": {
-    "react": "*",
-    "react-native": "*",
-    "react-native-reanimated": "*",
+    "react": "^18.0.0",
+    "react-native": ">=0.64.0",
+    "react-native-reanimated": ">=3.0.0",
     "react-native-svg": ">=15.0.0"
   },
   "workspaces": [

tsconfig.json

@@ -2,7 +2,7 @@
   "compilerOptions": {
     "rootDir": ".",
     "paths": {
-      "react-native-multistep": ["./src/index"]
+      "@brijen/react-native-multistep": ["./src/index"]
     },
     "allowUnreachableCode": false,
     "allowUnusedLabels": false,

yarn.lock

@@ -1619,6 +1619,40 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@brijen/react-native-multistep@*, @brijen/react-native-multistep@workspace:.":
+  version: 0.0.0-use.local
+  resolution: "@brijen/react-native-multistep@workspace:."
+  dependencies:
+    "@commitlint/config-conventional": ^17.0.2
+    "@evilmartians/lefthook": ^1.5.0
+    "@react-native/eslint-config": ^0.73.1
+    "@release-it/conventional-changelog": ^9.0.2
+    "@testing-library/react-native": ^13.0.1
+    "@types/jest": ^29.5.5
+    "@types/react": ^18.2.44
+    commitlint: ^17.0.2
+    del-cli: ^5.1.0
+    eslint: ^8.51.0
+    eslint-config-prettier: ^9.0.0
+    eslint-plugin-prettier: ^5.0.1
+    jest: ^29.7.0
+    prettier: ^3.0.3
+    react: 18.3.1
+    react-native: 0.76.6
+    react-native-builder-bob: ^0.36.0
+    react-native-reanimated: ^3.16.7
+    react-native-svg: ^15.11.1
+    react-test-renderer: 18.3.1
+    release-it: ^17.10.0
+    typescript: ^5.2.2
+  peerDependencies:
+    react: ^18.0.0
+    react-native: ">=0.64.0"
+    react-native-reanimated: ">=3.0.0"
+    react-native-svg: ">=15.0.0"
+  languageName: unknown
+  linkType: soft
+
 "@commitlint/cli@npm:^17.8.1":
   version: 17.8.1
   resolution: "@commitlint/cli@npm:17.8.1"
@@ -12031,6 +12065,7 @@ __metadata:
   resolution: "react-native-multistep-example@workspace:example"
   dependencies:
     "@babel/core": ^7.20.0
+    "@brijen/react-native-multistep": "*"
     "@expo/metro-runtime": ~4.0.1
     expo: ~52.0.28
     expo-status-bar: ~2.0.1
@@ -12045,40 +12080,6 @@ __metadata:
   languageName: unknown
   linkType: soft
 
-"react-native-multistep@workspace:.":
-  version: 0.0.0-use.local
-  resolution: "react-native-multistep@workspace:."
-  dependencies:
-    "@commitlint/config-conventional": ^17.0.2
-    "@evilmartians/lefthook": ^1.5.0
-    "@react-native/eslint-config": ^0.73.1
-    "@release-it/conventional-changelog": ^9.0.2
-    "@testing-library/react-native": ^13.0.1
-    "@types/jest": ^29.5.5
-    "@types/react": ^18.2.44
-    commitlint: ^17.0.2
-    del-cli: ^5.1.0
-    eslint: ^8.51.0
-    eslint-config-prettier: ^9.0.0
-    eslint-plugin-prettier: ^5.0.1
-    jest: ^29.7.0
-    prettier: ^3.0.3
-    react: 18.3.1
-    react-native: 0.76.6
-    react-native-builder-bob: ^0.36.0
-    react-native-reanimated: ^3.16.7
-    react-native-svg: ^15.11.1
-    react-test-renderer: 18.3.1
-    release-it: ^17.10.0
-    typescript: ^5.2.2
-  peerDependencies:
-    react: "*"
-    react-native: "*"
-    react-native-reanimated: "*"
-    react-native-svg: ">=15.0.0"
-  languageName: unknown
-  linkType: soft
-
 "react-native-reanimated@npm:^3.16.7":
   version: 3.16.7
   resolution: "react-native-reanimated@npm:3.16.7"