@bikiran/utils 1.18.1 → 1.18.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (2) hide show
  1. package/README.md +155 -85
  2. package/package.json +1 -1
package/README.md CHANGED
@@ -1,102 +1,172 @@
1
1
  # 7502NPM-Bikiran-Utils
2
2
 
3
- # Dependencies
4
-
5
- **1.clsx**
6
- **2.tailwind-merge**
7
- **3.Nextjs**
8
-
9
- # IMPORTANT NOTE
10
-
11
- This package was specifically developed and tailored for our organization’s projects. It may not be particularly helpful for your needs, but you’re welcome to try it out. Just keep in mind that it could potentially break your project—or it might work exactly as intended.
12
-
13
- ## 🎨 **Available Components**
14
-
15
- ```tsx
16
- <Pagination />
17
- <FilterBarWrapper />
18
- <ServicesPopup />
19
- <ButtonWrapper />
20
- <CurrencySelector />
21
- <CustomSidebar/>
22
- <PageLoading />
23
- <LoadingComp />
24
- <CookiesAcceptPopup />
25
- <ProfileManage />
26
- <TooltipUserInfo />
27
- <UserInfoComp />
28
- ```
3
+ ## Overview
29
4
 
30
- ## Pagination
5
+ A collection of utility components specifically developed for our organization's internal projects. While primarily tailored to our needs, others may find some components useful.
31
6
 
32
- You need to write this code where you will use your pagination .This will Check query Params and create a new url . which is important for this component
7
+ ⚠️ **Important Note**: This package was optimized for our specific use cases and may not work as expected in all projects. Use with caution.
33
8
 
34
- ```tsx
35
- const pathname = usePathname();
36
- const searchParams = useSearchParams();
37
- const currentPage = Number(searchParams.get("CurrentPage"));
38
- const queries = new URLSearchParams(searchParams.toString());
9
+ ## Dependencies
39
10
 
40
- // Make URL with existing queries if any
41
- const mkUrl = (number: number) => {
42
- queries.set("CurrentPage", number.toString());
43
- return `${pathname}?${queries.toString()}`;
44
- };
45
- ```
11
+ - `clsx`
12
+ - `tailwind-merge`
13
+ - `Next.js`
14
+
15
+ Perfect! Here's how you can update the **"Available Components"** section so that each component is a clickable item linking to its dedicated documentation page in your GitHub wiki:
16
+
17
+ ---
18
+
19
+ ## Available Components
20
+
21
+ Each component below links to its own documentation page for detailed usage:
22
+
23
+ 1. [Pagination]()
24
+ 2. [FilterBarWrapper]()
25
+ 3. [ServicesPopup]()
26
+ 4. [ButtonWrapper]()
27
+ 5. [CurrencySelector]()
28
+ 6. [CustomSidebar]()
29
+ 7. [PageLoading]()
30
+ 8. [LoadingComp]()
31
+ 9. [CookiesAcceptPopup]()
32
+ 10. [ProfileManage]()
33
+ 11. [TooltipUserInfo]()
34
+ 12. [UserInfoComp]()
35
+
36
+ ## Getting Started
37
+
38
+ ### Installation
46
39
 
47
- # Props and Usage
48
-
49
- ## Props
50
-
51
- | prop | type | description | default value | priority |
52
- | ----------- | ---------------------------------------------- | ----------------------------------------------- | ----------------------- | ---------- |
53
- | data | TPagination | this is an object | {} as TPagination | ✅Required |
54
- | disabled | boolean | determine is that pagination is disabled or not | false | ❌Optional |
55
- | currentPage | number | Which page it is now | 0 | ✅Required |
56
- | mkUrl | (page: number) => string | add query params | (page:number) => string | ✅Required |
57
- | link | FC<{ href: string; children: React.ReactNode } | Pass the link tag here | null | ✅Required |
58
-
59
- ## Usage
60
-
61
- ```tsx
62
- import { usePathname, useSearchParams } from "next/navigation";
63
- import Link from "next/link";
64
- import Pagination from "your-pagination-package";
65
-
66
- const MyPagination = ({ data }) => {
67
- const pathname = usePathname();
68
- const searchParams = useSearchParams();
69
- const currentPage = Number(searchParams.get("CurrentPage")) || 1;
70
-
71
- const makeUrl = (num: number) => {
72
- const queries = new URLSearchParams(searchParams.toString());
73
- queries.set("CurrentPage", num.toString());
74
- return `${pathname}?${queries.toString()}`;
75
- };
76
-
77
- return (
78
- <Pagination
79
- data={data}
80
- currentPage={currentPage}
81
- makeUrl={makeUrl}
82
- LinkComponent={Link}
83
- />
84
- );
85
- };
40
+ Install the package via **npm**:
41
+
42
+ ```bash
43
+ npm install 7502NPM-Bikiran-Utils
86
44
  ```
87
45
 
88
- ## 🔗 **More Details**
46
+ Or via **yarn**:
47
+
48
+ ```bash
49
+ yarn add 7502NPM-Bikiran-Utils
50
+ ```
89
51
 
90
- For more details, visit the [GitHub repository](https://github.com/bikirandev/7502NPM-Bikiran-Utils/tree/main/documents).
52
+ Got it! Here's the updated **"Getting Started"** section that includes a **realistic example Tailwind config** showing how users can define `primary` and `secondary` with extended color scales using CSS variables—just like your package expects.
91
53
 
92
54
  ---
93
55
 
94
- ## 🔗 **License**
56
+ ### How It Works
57
+
58
+ This package is designed to **seamlessly inherit your project’s Tailwind CSS theme**. It automatically uses your existing:
59
+
60
+ - **Primary/secondary colors**
61
+ - **Font families**
62
+ - **Spacing scale**
63
+ - **Other design tokens**
64
+
65
+ No extra configuration is needed—just ensure your `tailwind.config.js` is properly set up.
66
+
67
+ #### Example:
68
+
69
+ Your `tailwind.config.js` should define colors using CSS variables like this:
70
+
71
+ ```js
72
+ theme: {
73
+ extend: {
74
+ colors: {
75
+ primary: {
76
+ DEFAULT: "var(--primary)",
77
+ 50: "var(--primary-50)",
78
+ 100: "var(--primary-100)",
79
+ 200: "var(--primary-200)",
80
+ 300: "var(--primary-300)",
81
+ 500: "var(--primary-500)",
82
+ 700: "var(--primary-700)",
83
+ 900: "var(--primary-900)",
84
+ },
85
+ secondary: {
86
+ DEFAULT: "var(--secondary)",
87
+ 50: "var(--secondary-50)",
88
+ 100: "var(--secondary-100)",
89
+ 300: "var(--secondary-300)",
90
+ 500: "var(--secondary-500)",
91
+ 700: "var(--secondary-700)",
92
+ 900: "var(--secondary-900)",
93
+ },
94
+ },
95
+ },
96
+ }
97
+ ```
95
98
 
96
- This project is licensed under the MIT License.
99
+ This setup allows all components—like `<ButtonWrapper>` and `<CurrencySelector>`—to **automatically inherit your color scheme** across different shades.
97
100
 
98
- ---
101
+ ### Basic Usage
102
+
103
+ 1. **Import Components**
104
+
105
+ ```tsx
106
+ import { ButtonWrapper, PageLoading } from "7502NPM-Bikiran-Utils";
107
+ ```
108
+
109
+ 2. **Use with Your Theme**
110
+ ```tsx
111
+ // Buttons will adopt your project's `primary`/`secondary` colors
112
+ <ButtonWrapper variant="primary">Click Me</ButtonWrapper>
113
+ ```
114
+
115
+ ### Customization (Optional)
99
116
 
100
- ## 👨‍💻 **Author**
117
+ To override styles:
101
118
 
102
- Created by [bikiran.com](https://bikiran.com/). Feel free to contribute!
119
+ - Use `className` props (e.g., `<ButtonWrapper className="bg-red-500">`)
120
+ - Extend your Tailwind config (recommended for consistency)
121
+
122
+ ### Requirements
123
+
124
+ - Next.js 14+
125
+ - Tailwind CSS v3+ (**must** have `primary`/`secondary` colors defined)
126
+
127
+ ## Documentation
128
+
129
+ For complete documentation and usage examples, please see:
130
+ [Components Documentation](https://github.com/bikirandev/bikiran-utils/wiki/1.-Home)
131
+
132
+ Sure! Here's just the **"How to Contribute"** section in Markdown:
133
+
134
+ ## 🤝 How to Contribute
135
+
136
+ We welcome contributions! To contribute to the package :
137
+
138
+ 1. **Fork the repository** and clone your fork locally.
139
+ 2. **Create a new branch** for your feature or bugfix:
140
+ ```
141
+ git checkout -b my-feature-name
142
+ ```
143
+ 3. Make your changes in supporting files.
144
+ 4. If you’re adding a feature or behavior, consider updating the docs or usage example.
145
+ 5. Commit your changes:
146
+ ```
147
+ git commit -m "feat: add awesome feature"
148
+ ```
149
+ 6. Push to your fork:
150
+ ```
151
+ git push origin my-feature-name
152
+ ```
153
+ 7. **Open a Pull Request** with a clear title and description.
154
+
155
+ ### 🧪 Before submitting:
156
+
157
+ - Run and test the component in your app.
158
+ - Check for console errors or style breakages.
159
+ - Use consistent naming and follow the existing code style.
160
+
161
+ Thanks for your contribution! ❤️
162
+
163
+ ```
164
+
165
+ ## License
166
+
167
+ MIT License
168
+
169
+ ## Author
170
+
171
+ Developed by [Bikiran](https://bikiran.com/)
172
+ ```
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@bikiran/utils",
3
- "version": "1.18.1",
3
+ "version": "1.18.2",
4
4
  "main": "dist/index.js",
5
5
  "types": "dist/index.d.ts",
6
6
  "files": [