lm-web-controls 1.4.2 → 1.4.4

package/dist/controls/optimizedImage/imageServices.js

@@ -0,0 +1 @@
+var n={name:"Azure CDN Premium",detectUrl:function(n){return n.includes("azureedge.net")},generateWebP:function(n,t){void 0===t&&(t={});var e=n.includes("?")?"&":"?",a=new URLSearchParams;return a.append("format","webp"),t.quality&&a.append("quality",t.quality.toString()),t.width&&a.append("width",t.width.toString()),"".concat(n).concat(e).concat(a.toString())},generateResponsive:function(n,t,e){void 0===e&&(e={});var a=n.includes("?")?"&":"?",r=new URLSearchParams;return r.append("width",t.toString()),e.quality&&r.append("quality",e.quality.toString()),"".concat(n).concat(a).concat(r.toString())}},t={name:"Azure Blob Storage",detectUrl:function(n){return n.includes("blob.core.windows.net")},generateWebP:function(n,t){var e=n.split("?")[0],a=e.replace(/\.(png|jpg|jpeg)$/i,".webp");return a!==e?a:n},generateResponsive:function(n,t,e){return n}},e={name:"Cloudinary",detectUrl:function(n){return n.includes("cloudinary.com")},generateWebP:function(n,t){void 0===t&&(t={});var e=t.quality||"auto",a=t.width?",w_".concat(t.width):"";return n.replace("/upload/","/upload/f_webp,q_".concat(e).concat(a,"/"))},generateResponsive:function(n,t,e){void 0===e&&(e={});var a=e.quality||"auto";return n.replace("/upload/","/upload/w_".concat(t,",q_").concat(a,"/"))}},a={name:"ImageKit",detectUrl:function(n){return n.includes("imagekit.io")},generateWebP:function(n,t){void 0===t&&(t={});var e=n.includes("?")?"&":"?",a=t.quality||80,r=t.width?",w-".concat(t.width):"";return"".concat(n).concat(e,"tr=f-webp,q-").concat(a).concat(r)},generateResponsive:function(n,t,e){void 0===e&&(e={});var a=n.includes("?")?"&":"?",r=e.quality||80;return"".concat(n).concat(a,"tr=w-").concat(t,",q-").concat(r)}},r={name:"Vercel Image Optimization",detectUrl:function(n){return!1},generateWebP:function(n,t){void 0===t&&(t={});var e=new URLSearchParams;return e.append("url",encodeURIComponent(n)),e.append("w",(t.width||1920).toString()),e.append("q",(t.quality||75).toString()),e.append("f","webp"),"/_next/image?".concat(e.toString())},generateResponsive:function(n,t,e){void 0===e&&(e={});var a=new URLSearchParams;return a.append("url",encodeURIComponent(n)),a.append("w",t.toString()),a.append("q",(e.quality||75).toString()),"/_next/image?".concat(a.toString())}},i={name:"Generic",detectUrl:function(){return!0},generateWebP:function(n,t){void 0===t&&(t={});var e=n.includes("?")?"&":"?",a=new URLSearchParams;return a.append("format","webp"),t.quality&&a.append("quality",t.quality.toString()),t.width&&a.append("w",t.width.toString()),"".concat(n).concat(e).concat(a.toString())},generateResponsive:function(n,t,e){void 0===e&&(e={});var a=n.includes("?")?"&":"?",r=new URLSearchParams;return r.append("w",t.toString()),e.quality&&r.append("q",e.quality.toString()),"".concat(n).concat(a).concat(r.toString())}},o=[n,t,e,a,r,i],c=function(n){return o.find(function(t){return t.detectUrl(n)})||i},u=function(n){var t,e=(null===(t=n.split(".").pop())||void 0===t?void 0:t.toLowerCase())||"";return["webp","avif"].includes(e)};export{t as azureBlobConfig,n as azureCdnConfig,e as cloudinaryConfig,i as genericConfig,c as getImageServiceConfig,o as imageServiceConfigs,a as imagekitConfig,u as isOptimizedFormat,r as vercelConfig};

package/dist/controls/optimizedImage/index.js

@@ -1,2 +1,2 @@
 "use client";
-import{__assign as t}from"../../_virtual/_tslib.js";import e,{useState as o,useRef as i,useEffect as n}from"react";function r(r){var l=r.src,a=r.alt,c=r.className,s=void 0===c?"":c,d=r.width,f=r.height,u=r.sizes,p=r.priority,h=void 0!==p&&p;r.quality;var m=r.placeholder,v=void 0===m?"empty":m,b=r.blurDataURL,g=r.onLoad,y=r.onError,x=r.fill,w=void 0!==x&&x,j=r.style,E=o(!1),z=E[0],k=E[1],C=o(!1),F=C[0],I=C[1],S=o(h),L=S[0],H=S[1],N=i(null),P=i(null);n(function(){if(!h&&!L){var t=new IntersectionObserver(function(e){e.forEach(function(e){e.isIntersecting&&(H(!0),t.disconnect())})},{rootMargin:"50px 0px",threshold:.1});return P.current&&t.observe(P.current),function(){return t.disconnect()}}},[h,L]);var W={ref:N,src:L?l:void 0,alt:a,onLoad:function(){k(!0),null==g||g()},onError:function(){I(!0),null==y||y()},loading:h?"eager":"lazy",sizes:u,srcSet:L&&u?function(){if(u){return[640,750,828,1080,1200,1920,2048].map(function(t){return"".concat(l," ").concat(t,"w")}).join(", ")}}():void 0,style:t({objectFit:"cover",objectPosition:"center"},j)},_=t(t({position:w?"absolute":"relative",display:"block",overflow:"hidden"},w?{top:0,left:0,bottom:0,right:0}:{}),d&&f&&!w?{width:d,height:f}:{}),q=t({position:w?"absolute":"static",top:w?0:void 0,left:w?0:void 0,bottom:w?0:void 0,right:w?0:void 0,boxSizing:"border-box",padding:0,border:"none",margin:"auto",display:"block",width:w?"100%":d||"100%",height:w?"100%":f||"auto",minWidth:"100%",maxWidth:"100%",minHeight:"100%",maxHeight:"100%",objectFit:"cover",objectPosition:"center",transition:"opacity 0.3s ease",opacity:z?1:0},W.style);return e.createElement("div",{ref:P,className:s,style:_},!z&&!F&&e.createElement("div",{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",backgroundColor:"#f3f4f6",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"12px",color:"#9ca3af"}},"blur"===v&&b?e.createElement("img",{src:b,alt:"",style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",objectFit:"cover",filter:"blur(10px)",transform:"scale(1.1)"}}):null),F&&e.createElement("div",{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",backgroundColor:"#fef2f2",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"12px",color:"#dc2626"}},"Failed to load image"),L&&e.createElement("img",t({},W,{style:q})))}var l=function(t){if("undefined"!=typeof window){var e=document.createElement("link");e.rel="preload",e.as="image",e.href=t,document.head.appendChild(e)}};export{r as OptimizedImage,l as preloadImage};
+import{__assign as t}from"../../_virtual/_tslib.js";import e,{useState as o,useRef as i,useEffect as n}from"react";function r(r){var l=r.src,a=r.alt,c=r.className,s=void 0===c?"":c,d=r.sizes,f=r.priority,u=void 0!==f&&f,p=r.quality,m=void 0===p?75:p,v=r.placeholder,b=void 0===v?"empty":v,h=r.blurDataURL,g=r.onLoad,y=r.onError,x=r.fill,w=void 0!==x&&x,j=r.style,E=o(!1),z=E[0],k=E[1],C=o(!1),F=C[0],I=C[1],S=o(u),L=S[0],q=S[1],N=i(null),P=i(null);n(function(){if(!u&&!L){var t=new IntersectionObserver(function(e){e.forEach(function(e){e.isIntersecting&&(q(!0),t.disconnect())})},{rootMargin:"50px 0px",threshold:.1});return P.current&&t.observe(P.current),function(){return t.disconnect()}}},[u,L]);var _={ref:N,alt:a,onLoad:function(){k(!0),null==g||g()},onError:function(){I(!0),null==y||y()},loading:u?"eager":"lazy",sizes:d,style:t({objectFit:"cover",objectPosition:"center"},j)},D=t({position:w?"absolute":"relative",display:"block",overflow:"hidden"},w?{top:0,left:0,bottom:0,right:0}:{}),M=t({position:w?"absolute":"static",top:w?0:void 0,left:w?0:void 0,bottom:w?0:void 0,right:w?0:void 0,boxSizing:"border-box",padding:0,border:"none",margin:"auto",display:"block",width:"100%",height:w?"100%":"auto",maxWidth:"100%",objectFit:"cover",objectPosition:"center",transition:"opacity 0.3s ease",opacity:z?1:0},_.style);return e.createElement("div",{ref:P,className:s,style:D},!z&&!F&&e.createElement("div",{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",backgroundColor:"#f3f4f6",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"12px",color:"#9ca3af"}},"blur"===b&&h?e.createElement("img",{src:h,alt:"",style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",objectFit:"cover",filter:"blur(10px)",transform:"scale(1.1)"}}):null),F&&e.createElement("div",{style:{position:"absolute",top:0,left:0,width:"100%",height:"100%",backgroundColor:"#fef2f2",display:"flex",alignItems:"center",justifyContent:"center",fontSize:"12px",color:"#dc2626"}},"Failed to load image"),L&&e.createElement("img",t({},_,{src:l,srcSet:d?function(){if(d){return[640,750,828,1080,1200,1920,2048].map(function(t){var e=l.includes("?")?"&":"?";return"".concat(l).concat(e,"w=").concat(t,"&q=").concat(m," ").concat(t,"w")}).join(", ")}}():void 0,style:M})))}var l=function(t){if("undefined"!=typeof window){var e=document.createElement("link");e.rel="preload",e.as="image",e.href=t,document.head.appendChild(e)}};export{r as OptimizedImage,l as preloadImage};

package/dist/controls/relatedPosts/index.js

@@ -1,2 +1,2 @@
 "use client";
-import e from"react";import{OptimizedImage as t}from"../optimizedImage/index.js";function a(a){var s=a.relatedPosts,l=a.title,r=a.nestedUrl,c=a.category;return s.length?e.createElement("div",{className:"related-posts-main-container"},e.createElement("h2",{className:"related-posts-title"},l||"Related Posts"),e.createElement("div",{className:"related-posts"},s.map(function(a,s){return e.createElement("a",{key:s,className:"related-post-item",href:"".concat(r?"/".concat(r):"","/post").concat(c?"/".concat(a.categoryInfo.slug):"","/").concat(a.slug)},e.createElement(t,{src:a.featuredImage,alt:a.title,className:"related-post-item-image",sizes:"200px"}),e.createElement("h3",{className:"related-post-item-title"},a.title))}))):null}export{a as RelatedPosts};
+import e from"react";import{OptimizedImage as t}from"../optimizedImage/index.js";function a(a){var l=a.relatedPosts,r=a.title,s=a.nestedUrl,c=a.category;return l.length?e.createElement("div",{className:"related-posts-main-container"},e.createElement("h2",{className:"related-posts-title"},r||"Related Posts"),e.createElement("div",{className:"related-posts"},l.map(function(a,l){return e.createElement("a",{key:l,className:"related-post-item",href:"".concat(s?"/".concat(s):"","/post").concat(c?"/".concat(a.categoryInfo.slug):"","/").concat(a.slug)},e.createElement(t,{src:a.featuredImage,alt:a.title,className:"related-post-item-image"}),e.createElement("h3",{className:"related-post-item-title"},a.title))}))):null}export{a as RelatedPosts};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "lm-web-controls",
-  "version": "1.4.2",
+  "version": "1.4.4",
   "description": "leadmetrics-lm-web-controls",
   "main": "dist/index.js",
   "module": "dist/index.es.js",

package/IMAGE_OPTIMIZATION.md

@@ -1,236 +0,0 @@
-# Image Optimization Guide for lm-web-controls
-
-## Overview
-
-The `lm-web-controls` package now includes comprehensive image optimization through the `OptimizedImage` component. This guide explains how images are optimized across all blog-related controls and how to configure image optimization for your use case.
-
-## What's Been Optimized
-
-All blog-related components now use the `OptimizedImage` component instead of standard `<img>` tags:
-
-- **FeaturedBlog**: Main featured blog image
-- **Post**: Featured image in post details
-- **BlogList**: All blog thumbnails in both grid and list views
-- **RelatedPosts**: Thumbnail images for related posts
-
-## Key Features
-
-### 1. Lazy Loading
-- Images load only when they enter the viewport
-- Reduces initial page load time
-- Can be disabled for above-the-fold images using `priority={true}`
-
-### 2. Responsive Images
-- Automatically serves different image sizes based on screen size
-- Reduces bandwidth usage on mobile devices
-- Configurable breakpoints for different device types
-
-### 3. Modern Format Support
-- Supports WebP and AVIF formats for better compression
-- Automatically falls back to JPEG/PNG for older browsers
-- Uses HTML5 `<picture>` element for optimal format selection
-
-### 4. Performance Features
-- Intersection Observer for efficient lazy loading
-- Image preloading for critical above-the-fold images
-- Loading states and error handling
-- Optional blur placeholder while loading
-
-## Configuration Options
-
-### Basic Usage
-```tsx
-import { OptimizedImage } from 'lm-web-controls';
-
-<OptimizedImage
-  src="https://example.com/image.jpg"
-  alt="Description"
-  className="my-image-class"
-/>
-```
-
-### Advanced Configuration
-```tsx
-<OptimizedImage
-  src="https://example.com/image.jpg"
-  alt="Description"
-  className="my-image-class"
-  priority={true} // Load immediately, no lazy loading
-  quality={90} // Image quality (1-100)
-  responsive={{
-    small: 640,   // Mobile: up to 640px
-    medium: 768,  // Tablet: up to 768px
-    large: 1024,  // Desktop: up to 1024px
-    xlarge: 1920  // Large desktop: 1024px+
-  }}
-  sizes="(max-width: 768px) 100vw, 50vw"
-  formats={["webp", "avif", "jpg"]}
-  placeholder="blur"
-  blurDataURL="data:image/jpeg;base64,..."
-/>
-```
-
-## Integration with Image Services
-
-The `OptimizedImage` component is designed to work with image optimization services. You need to modify the `generateImageUrl` function in the component to match your image service:
-
-### Cloudinary Example
-```tsx
-const generateImageUrl = (src, width, format, quality) => {
-  return `https://res.cloudinary.com/your-cloud/image/fetch/w_${width},f_${format},q_${quality}/${encodeURIComponent(src)}`;
-};
-```
-
-### ImageKit Example
-```tsx
-const generateImageUrl = (src, width, format, quality) => {
-  return `https://ik.imagekit.io/your-id/tr:w-${width},f-${format},q-${quality}/${src}`;
-};
-```
-
-### Custom Service Example
-```tsx
-const generateImageUrl = (src, width, format, quality) => {
-  const params = new URLSearchParams();
-  if (width) params.append('w', width.toString());
-  if (format) params.append('f', format);
-  params.append('q', quality.toString());
-  return `${src}?${params.toString()}`;
-};
-```
-
-## Component-Specific Optimizations
-
-### FeaturedBlog
-- Uses `priority={true}` for immediate loading (above-the-fold)
-- Responsive sizes: `(max-width: 768px) 100vw, 50vw`
-- Supports large image sizes up to 1920px
-
-### Post
-- Uses `priority={true}` for immediate loading
-- Full-width responsive: `100vw`
-- Optimized for hero image display
-
-### BlogList
-- Uses `lazy={true}` for performance
-- Different sizes for grid vs list view
-- Smaller responsive breakpoints for thumbnails
-
-### RelatedPosts
-- Uses `lazy={true}` with smallest image sizes
-- Fixed size: `200px` for consistent layout
-- Optimized for small thumbnail display
-
-## Performance Benefits
-
-### Before Optimization
-- All images loaded immediately
-- Single image size for all devices
-- No format optimization
-- Large bandwidth usage
-
-### After Optimization
-- **60-80% faster initial page load** with lazy loading
-- **30-50% bandwidth reduction** with responsive images
-- **20-40% smaller file sizes** with WebP/AVIF formats
-- **Better Core Web Vitals scores**
-
-## Best Practices
-
-### 1. Use Priority Loading Wisely
-```tsx
-// Good: Above-the-fold images
-<OptimizedImage priority={true} src="hero-image.jpg" />
-
-// Good: Below-the-fold images
-<OptimizedImage lazy={true} src="thumbnail.jpg" />
-```
-
-### 2. Configure Appropriate Sizes
-```tsx
-// For hero images
-sizes="100vw"
-
-// For thumbnails in grid
-sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
-
-// For sidebar images
-sizes="300px"
-```
-
-### 3. Set Quality Based on Use Case
-```tsx
-// High quality for hero images
-quality={90}
-
-// Standard quality for thumbnails
-quality={75}
-
-// Lower quality for background images
-quality={60}
-```
-
-## SEO Benefits
-
-1. **Improved Page Speed**: Faster loading times improve search rankings
-2. **Better Core Web Vitals**: Optimized LCP (Largest Contentful Paint)
-3. **Reduced Bounce Rate**: Faster pages keep users engaged
-4. **Mobile Optimization**: Responsive images improve mobile experience
-
-## Browser Support
-
-- **Modern Browsers**: Full WebP/AVIF support with responsive images
-- **Legacy Browsers**: Automatic fallback to JPEG/PNG
-- **All Browsers**: Lazy loading support with intersection observer
-
-## Migration Guide
-
-If you're upgrading from a previous version:
-
-1. **No Breaking Changes**: All existing props continue to work
-2. **Automatic Optimization**: Images are automatically optimized
-3. **Optional Configuration**: Advanced features are opt-in
-4. **Backward Compatible**: Standard `img` behavior if needed
-
-## Monitoring and Testing
-
-### Performance Testing
-- Use browser DevTools Network tab to verify image loading
-- Check Core Web Vitals in PageSpeed Insights
-- Monitor Cumulative Layout Shift (CLS) scores
-
-### Visual Testing
-- Verify images load correctly across different devices
-- Test lazy loading behavior
-- Ensure fallbacks work in older browsers
-
-## Common Issues and Solutions
-
-### Issue: Images not loading
-**Solution**: Check image service URL generation and CORS settings
-
-### Issue: Layout shift during loading
-**Solution**: Always specify width/height or aspect-ratio
-
-### Issue: Images too small on high-DPI displays
-**Solution**: Increase responsive breakpoint values
-
-### Issue: Slow loading on mobile
-**Solution**: Reduce mobile image sizes in responsive config
-
-## Future Enhancements
-
-Planned improvements for future versions:
-- Automatic aspect ratio detection
-- Smart cropping based on content
-- Advanced placeholder generation
-- Progressive image loading
-- Integration with more image services
-
-## Support
-
-For issues or questions about image optimization:
-1. Check this documentation first
-2. Review the component source code
-3. Test with different image services
-4. Open an issue with detailed reproduction steps

package/readme.md

@@ -1,222 +0,0 @@
-# How to create a Custom NPM Module with React Components?
-
-This repo is aimed to describe the process of creating a custom NPM package/module with React.JS components. It will guide you through the steps of setting up your development environment, writing and exporting your components, and publishing your package to the NPM registry[Optional]. Additionally, it will provide tips and best practices for maintaining and updating your package.
-
-## Installation
-
-**Step 1:** Make a directory and initialize npm.
-
-```bash
-  mkdir custom-npm-package
-  npm init
-```
-
-Alternatively, you can use the following command to quickly generate a minimal boilerplate:
-
-```bash
-npm init -y
-```
-
-Add the necessary fields. After the successfull walkthrough a package.json will created and looks like below.
-
-```bash
-{
-  "name": "gittuts",
-  "version": "1.0.0",
-  "description": "",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "author": "",
-  "license": "ISC"
-}
-```
-
-**Step 2:** Create a src folder in the root add a index.js/index.ts in it also create a component folder and creates some components in it.
-
-```bash
-src
-├── components
-│   ├── Component1
-│   │   └── index.tsx
-│   ├── Component2
-│   │   └── index.tsx
-│   └── Component3
-│       └── index.tsx
-└── index.ts
-```
-
-**Step 3:** Now, Add react and react-dom as peer-dependencies and dev-dependencies. 
-
-```bash
-  yarn add react react-dom --dev
-
-  or
-
-  npm install react react-dom --dev
-```
-
-The final package.json may looks like below.
-
-```bash
-  {
-  "name": "custom-npm-package",
-  "version": "1.0.0",
-  "description": "react custom npm module",
-  "main": "index.js",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "npx babel src --out-file index.js --extensions .ts,.tsx"
-  },
-  "author": "Anandhu",
-  "license": "ISC",
-  "peerDependencies": {
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0"
-  },
-  "devDependencies": {
-    "@types/react": "^18.0.34",
-    "react": "^18.2.0",
-    "react-dom": "^18.2.0",
-    "typescript": "^5.0.4"
-  }
-}
-```
-
-Since it is Typescript. I've also installed typescript, typescript react with it.
-
-**Step 4:** Its time to bundle the code. Install [rollup.js](https://rollupjs.org/)
-
-```bash
-  npm install --save react rollup
-```
-You will also need to install the Rollup plugins for Babel, CommonJS, and Node Resolve by running 
-
-```bash
-npm install --save-dev @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve rollup-plugin-terser
-
-```
-
-**Step 5:**  Configure Rollup
-
-Create a `rollup.config.mjs` or `rollup.config.js` file in the root of your project. In this file, configure Rollup to bundle your React component by specifying the input file, output format, and plugins to use. Here is an example configuration:
-
-```bash
-import babel from 'rollup-plugin-babel';
-import resolve from '@rollup/plugin-node-resolve';
-import external from 'rollup-plugin-peer-deps-external';
-import terser from '@rollup/plugin-terser';
-import typescript from "rollup-plugin-typescript2"; // For Typescript
-
-export default [
-  {
-    input: './src/index.ts',
-    output: [
-      {
-        file: 'dist/index.js',
-        format: 'cjs',
-      },
-      {
-        file: 'dist/index.es.js',
-        format: 'es',
-        exports: 'named',
-      }
-    ],
-    plugins: [
-      babel({
-        exclude: 'node_modules/**',
-        presets: ['@babel/preset-react']
-      }),
-      external({
-        includeDependencies: true
-      }),
-      resolve(),
-      terser(),
-      typescript({ useTsconfigDeclarationDir: true }),
-    ]
-  }
-];
-
-```
-
-To our package.json, let's add this as build command so that we won't have to type it repeatedly. Under "scripts" in package.json add the following.
-
-```bash
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1",
-    "build": "npx rollup -c"
-  }
-```
-
-now we can simply use ```npm run build``` or ```yarn build``` to bundle the code.
-
-If it compiled without any error you may see a new folder `dist` generated in the root folder with transpiled Javascript Code.
-
-![App Screenshot](https://github.com/ananduremanan/Demo/blob/main/Screenshot%202023-12-12%20153616.png)
-
-_image: bundled output_
-
-Note: that if you're using a build tool like Webpack, you may not need to use npx babel at all. Instead, you can use a TypeScript loader like ts-loader or awesome-typescript-loader that will transpile and transform your TypeScript files as part of the build process.
-
-**Step 6:** Lets pack it so we can use/test it in other projects. Run the following command from  the root folder.
-
-```bash
-  npm pack
-```
-This will generate a .tgz file that we can use to install the package locally in other projects.
-
-Alternatively, you can link the package for testing purpose(Recommended).
-
-Using `npm link` in your package's root directory, create a global symlink of your package. A shortcut that directs your system to another directory or file is known as a "symlink," short for symbolic link.
-
-Now, create an another application and tell the application to use the global symlink with `npm link your-package-name`. This way, we could save a lot of time.
-
-**Step 7:** Navigate to your other project's directory and install your package using npm install <path to tarball file>. For example:
-
-```bash
-  npm i 'path_to_the_packed_file'
-```
-
-**Step 8:** In your host project's code you can import and use your component as follows:
-
-```bash
-  import logo from "./logo.svg";
-  import "./App.css";
-  import TextInput from "my_npm_package"; // Importing from the package
-  import { useState } from "react";
-
-  function App() {
-    const [value, setValue] = useState('');
-    console.log(value)
-
-    function handleChange(e) {
-      setValue(e.target.value);
-    }
-
-    return (
-      <div className="App">
-        <header className="App-header">
-          <img src={logo} className="App-logo" alt="logo" />
-          <p>Custom npm module.</p>
-          <TextInput label="Name" value={value} onChange={handleChange} />
-        </header>
-      </div>
-    );
-  }
-
-  export default App;
-
-```
-
-Additionally we can use packages like [storybook.js](https://storybook.js.org/) to build UI components and pages in isolation and by doing so we could see the changes that happens to our components without the need of installing it in a host application. You could find the documention for implementing story book [here](https://storybook.js.org/docs/react/get-started/install/).
-
-**Step 9:** Publishing our package to NPM Registry
-
-To publish a package to the npm registry, we need to follow these steps:
-
-- Create an npm account on [npmjs.com](https://www.npmjs.com/signup).
-- Sign in to npm from your terminal using the ```npm login``` command.
-- Prepare your package for publishing.
-- Publish the package from the terminal using the ```npm publish``` command.
-- React 18 Version 1.3.2.