{"_id":"@a.muraya/custom-demo","_rev":"4-6b60e5da081e846b1fb2badf51f8255d","name":"@a.muraya/custom-demo","dist-tags":{"latest":"1.0.4"},"versions":{"1.0.0":{"name":"@a.muraya/custom-demo","version":"1.0.0","keywords":["react","components","ui","npm","package"],"author":{"name":"A.M"},"license":"ISC","_id":"@a.muraya/custom-demo@1.0.0","maintainers":[{"name":"a.muraya","email":"anamuraya9@gmail.com"}],"homepage":"https://github.com/AnaMuraya/custom-demo#readme","bugs":{"url":"https://github.com/AnaMuraya/custom-demo/issues"},"dist":{"shasum":"52f8a59c3e736af0c2e57bb24a3560b1b89c61d0","tarball":"https://registry.npmjs.org/@a.muraya/custom-demo/-/custom-demo-1.0.0.tgz","fileCount":14,"integrity":"sha512-08lXZWo2TyEr29oEBMb6gs8OEf8N0x3khvYsc1WW49fL4VtRuS7Yh/ePCUids4MicuFX+c3GoeigfitZgxAT8w==","signatures":[{"sig":"MEUCIQCaOGPxS1RpsmsLihCn/ja6HdpPzUykUj5pqZS04faCywIgOtlnCxS8AO89NYzqoISLKM5iE+cKyGa4EtKBRIPbgp8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":6478},"main":"dist/index.js","module":"dist/index.es.js","scripts":{"test":"echo \\\"Error: no test specified\\\" && exit 1","build":"npx rollup -c"},"_npmUser":{"name":"a.muraya","email":"anamuraya9@gmail.com"},"repository":{"url":"git+https://github.com/AnaMuraya/custom-demo.git","type":"git"},"_npmVersion":"10.2.3","description":"This is a custom demo react application to be published to npm.","directories":{},"_nodeVersion":"20.10.0","dependencies":{"react":"^18.3.1","rollup":"^4.18.1","react-dom":"^18.3.1","rollup-plugin-babel":"^4.4.0","rollup-plugin-typescript2":"^0.36.0","rollup-plugin-peer-deps-external":"^2.2.4"},"_hasShrinkwrap":false,"devDependencies":{"@rollup/plugin-babel":"^6.0.4","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-commonjs":"^26.0.1","@rollup/plugin-node-resolve":"^15.2.3"},"_npmOperationalInternal":{"tmp":"tmp/custom-demo_1.0.0_1721221462377_0.00600312153201954","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@a.muraya/custom-demo","version":"1.0.1","keywords":["react","components","ui","npm","package"],"author":{"name":"A.M"},"license":"ISC","_id":"@a.muraya/custom-demo@1.0.1","maintainers":[{"name":"a.muraya","email":"anamuraya9@gmail.com"}],"homepage":"https://github.com/AnaMuraya/custom-demo#readme","bugs":{"url":"https://github.com/AnaMuraya/custom-demo/issues"},"dist":{"shasum":"f2ecdac26c7ba53331303305a201ed42e69c2476","tarball":"https://registry.npmjs.org/@a.muraya/custom-demo/-/custom-demo-1.0.1.tgz","fileCount":11,"integrity":"sha512-skEMhZuFYWbZ8bm/xZ/9sHNCaSU+F6bmjYZbiBkHeQKCQD2LQBcERtU78dWl1zxG1438qzdEb+ul3/y0zUvG3g==","signatures":[{"sig":"MEUCIFBpcT8Edc2Fbjcnj4vx4bYJ/HkseXdRQ4QeyqraG5XwAiEArWITbkCyFEIO2znS8v1Q8yDoqVPLCblyqiHeLwY0Hmo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12025},"main":"dist/index.js","module":"dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"scripts":{"test":"echo \\\"Error: no test specified\\\" && exit 1","build":"tsc"},"_npmUser":{"name":"a.muraya","email":"anamuraya9@gmail.com"},"repository":{"url":"git+https://github.com/AnaMuraya/custom-demo.git","type":"git"},"_npmVersion":"10.2.3","description":"This is a custom demo react application to be published to npm.","directories":{},"_nodeVersion":"20.10.0","dependencies":{"react":"^18.3.1","rollup":"^4.18.1","react-dom":"^18.3.1","typescript":"^5.5.3","rollup-plugin-babel":"^4.4.0","rollup-plugin-typescript2":"^0.36.0","rollup-plugin-peer-deps-external":"^2.2.4"},"_hasShrinkwrap":false,"devDependencies":{"@types/react":"^18.3.3","@rollup/plugin-babel":"^6.0.4","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-commonjs":"^26.0.1","@rollup/plugin-node-resolve":"^15.2.3"},"_npmOperationalInternal":{"tmp":"tmp/custom-demo_1.0.1_1721224544310_0.8266925657891648","host":"s3://npm-registry-packages"}},"1.0.2":{"name":"@a.muraya/custom-demo","version":"1.0.2","keywords":["react","components","ui","npm","package"],"author":{"name":"A.M"},"license":"ISC","_id":"@a.muraya/custom-demo@1.0.2","maintainers":[{"name":"a.muraya","email":"anamuraya9@gmail.com"}],"homepage":"https://github.com/AnaMuraya/custom-demo#readme","bugs":{"url":"https://github.com/AnaMuraya/custom-demo/issues"},"dist":{"shasum":"4b7eee5fe032a439799434eca2ebf6e136c361ed","tarball":"https://registry.npmjs.org/@a.muraya/custom-demo/-/custom-demo-1.0.2.tgz","fileCount":15,"integrity":"sha512-vjhMzBelo/YBEnJ5kojG3aam07WgxRcJvhqj214sYTPrwKE7Bl3hvJ9ILgHX8ZSNMpM4j0Rs0A5czF/ga2ChqQ==","signatures":[{"sig":"MEUCIDzm7GHsvdJze33pg+L+d/2KCGVq2GrU5YNFhx2yHQlyAiEA91+FJFDXIxGLvN861yBsikWrHTO8ZNkIsTLEC0EnqFM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":12662},"main":"dist/index.js","types":"./dist/index.d.ts","module":"dist/index.es.js","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"scripts":{"test":"echo \\\"Error: no test specified\\\" && exit 1","build":"tsc"},"_npmUser":{"name":"a.muraya","email":"anamuraya9@gmail.com"},"repository":{"url":"git+https://github.com/AnaMuraya/custom-demo.git","type":"git"},"_npmVersion":"10.2.3","description":"This is a custom demo react application to be published to npm.","directories":{},"_nodeVersion":"20.10.0","dependencies":{"react":"^18.3.1","rollup":"^4.18.1","react-dom":"^18.3.1","typescript":"^5.5.3","rollup-plugin-babel":"^4.4.0","rollup-plugin-typescript2":"^0.36.0","rollup-plugin-peer-deps-external":"^2.2.4"},"_hasShrinkwrap":false,"devDependencies":{"@types/react":"^18.3.3","@rollup/plugin-babel":"^6.0.4","@rollup/plugin-terser":"^0.4.4","@rollup/plugin-commonjs":"^26.0.1","@rollup/plugin-node-resolve":"^15.2.3"},"_npmOperationalInternal":{"tmp":"tmp/custom-demo_1.0.2_1721225696586_0.9548785442185901","host":"s3://npm-registry-packages"}},"1.0.3":{"name":"@a.muraya/custom-demo","version":"1.0.3","keywords":["react","components","ui","npm","package"],"author":{"name":"A.M"},"license":"ISC","_id":"@a.muraya/custom-demo@1.0.3","maintainers":[{"name":"a.muraya","email":"anamuraya9@gmail.com"}],"homepage":"https://github.com/AnaMuraya/custom-demo#readme","bugs":{"url":"https://github.com/AnaMuraya/custom-demo/issues"},"dist":{"shasum":"674fc7d454db581932cb15b6387864e237f367fe","tarball":"https://registry.npmjs.org/@a.muraya/custom-demo/-/custom-demo-1.0.3.tgz","fileCount":14,"integrity":"sha512-6a/KMdaKrFJmZV1djIaJ0Chhi9RonHMrVHSsoO2m0qs1NfmgtVYbbpg3h/IBFAWlezCInGIP4iFchTRU1QE1ww==","signatures":[{"sig":"MEQCIEc790r0E2QnUH+90q/XyLXzYij5LEq/gQ8aQ4MOeLtGAiBQeM8+fJ0I3uo1tQ5chWRLvh7YgiXbRfwFj7+V/hqhSQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":9535},"main":"dist/index.js","types":"./dist/index.d.ts","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"gitHead":"bb03926013805149792199317232382db9829caa","scripts":{"test":"echo \\\"Error: no test specified\\\" && exit 1","build":"tsc"},"_npmUser":{"name":"a.muraya","email":"anamuraya9@gmail.com"},"repository":{"url":"git+https://github.com/AnaMuraya/custom-demo.git","type":"git"},"_npmVersion":"10.2.3","description":"This is a custom demo react application to be published to npm.","directories":{},"_nodeVersion":"20.10.0","dependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"_hasShrinkwrap":false,"devDependencies":{"typescript":"^5.5.3","@types/react":"^18.3.3"},"_npmOperationalInternal":{"tmp":"tmp/custom-demo_1.0.3_1721231332016_0.5269340798895696","host":"s3://npm-registry-packages"}},"1.0.4":{"name":"@a.muraya/custom-demo","version":"1.0.4","description":"This is a demo react typescript npm module.","main":"dist/index.js","exports":{".":{"types":"./dist/index.d.ts","default":"./dist/index.js"}},"scripts":{"test":"echo \\\"Error: no test specified\\\" && exit 1","build":"tsc"},"repository":{"type":"git","url":"git+https://github.com/AnaMuraya/custom-demo.git"},"keywords":["react","typescript","components","ui","npm","package"],"author":{"name":"A.M"},"license":"ISC","bugs":{"url":"https://github.com/AnaMuraya/custom-demo/issues"},"homepage":"https://github.com/AnaMuraya/custom-demo#readme","dependencies":{"react":"^18.3.1","react-dom":"^18.3.1"},"devDependencies":{"@types/react":"^18.3.3","typescript":"^5.5.3"},"_id":"@a.muraya/custom-demo@1.0.4","gitHead":"0207519812d9734f10c707ca2626aae2576ae855","types":"./dist/index.d.ts","_nodeVersion":"20.10.0","_npmVersion":"10.2.3","dist":{"integrity":"sha512-VBubfNSsfThyfO/VQ1TnzmktI4lv3CCaWp+TXVO9P1uVMcTItM0c50InPkhDYMTU2ObNUXkEHDTP8/cHuDdvsg==","shasum":"c17ce427e488c1b6f73a42dc1a082e3901656007","tarball":"https://registry.npmjs.org/@a.muraya/custom-demo/-/custom-demo-1.0.4.tgz","fileCount":14,"unpackedSize":12598,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDYVJET3AmdITxgKZNA9Zq59mUUo8ZbtW815Gragm6fHgIhAMjgk7A7DKg/2qiN0Rk3J3RJ2FMh5qtKsWXBVkxdhvT2"}]},"_npmUser":{"name":"a.muraya","email":"anamuraya9@gmail.com"},"directories":{},"maintainers":[{"name":"a.muraya","email":"anamuraya9@gmail.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/custom-demo_1.0.4_1721639693801_0.7156314228369571"},"_hasShrinkwrap":false}},"time":{"created":"2024-07-17T13:04:22.277Z","modified":"2024-07-22T09:14:54.125Z","1.0.0":"2024-07-17T13:04:22.607Z","1.0.1":"2024-07-17T13:55:44.466Z","1.0.2":"2024-07-17T14:14:56.750Z","1.0.3":"2024-07-17T15:48:52.253Z","1.0.4":"2024-07-22T09:14:53.964Z"},"bugs":{"url":"https://github.com/AnaMuraya/custom-demo/issues"},"author":{"name":"A.M"},"license":"ISC","homepage":"https://github.com/AnaMuraya/custom-demo#readme","keywords":["react","typescript","components","ui","npm","package"],"repository":{"type":"git","url":"git+https://github.com/AnaMuraya/custom-demo.git"},"description":"This is a demo react typescript npm module.","maintainers":[{"name":"a.muraya","email":"anamuraya9@gmail.com"}],"readme":"# demo-react-npm-module\n\n## How to create a custom NPM Module with React Components\n\nThis repo is aimed to describe the process of creating a custom NPM package/module with React.JS components.\n\nIt 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.\n\n## Installation\n\n### Step 1: Make a directory and initialize npm\n\n```bash\n  mkdir your-npm-package\n  cd your-npm-package\n  npm init\n```\n\nAlternatively, you can use the following command to generate boilerplate:\n\n`npm init -y`\nAdd the necessary fields. After the successfull walkthrough a package.json will created and looks like below.\n\n```bash\n{\n  \"name\": \"package-name\",\n  \"version\": \"1.0.0\",\n  \"description\": \"\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\"\n  },\n  \"author\": \"\",\n  \"license\": \"ISC\"\n}\n```\n\n### Step 2: Folder structure\n\nCreate 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.\n\n```bash\nsrc\n├── components\n│   ├── Component1\n│   │   └── index.tsx\n│   ├── Component2\n│   │   └── index.tsx\n│   └── Component3\n│       └── index.tsx\n└── index.ts\n```\n\nBelow is a sample component. **Note** that the component is exported as a **named** component and not as a default\n\n```bash\nimport React from 'react'\n\nexport function Component1() {\n  return <div>Component1</div>\n}\n```\n\nThe index.ts will look like this;\n\n```bash\nexport * from './components/component1'\nexport * from './components/component2'\n```\n\n\n### Step 3: Dependencies\n\nNow, Add react and react-dom as peer-dependencies and dev-dependencies.\n\n`npm install react react-dom --dev`\n\n`npm install --save-dev typescript`\n\nThe final package.json may looks like below.\n\n```bash\n  {\n  \"name\": \"your-npm-package\",\n  \"version\": \"1.0.0\",\n  \"description\": \"react npm module\",\n  \"main\": \"index.js\",\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n    \"build\": \"npx babel src --out-file index.js --extensions .ts,.tsx\"\n  },\n  \"author\": \"your name\",\n  \"license\": \"ISC\",\n  \"peerDependencies\": {\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\"\n  },\n  \"devDependencies\": {\n    \"@types/react\": \"^18.0.34\",\n    \"react\": \"^18.2.0\",\n    \"react-dom\": \"^18.2.0\",\n    \"typescript\": \"^5.0.4\"\n  }\n}\n```\n\nSince it is Typescript. I've also installed typescript, typescript react with it. \n\nInstalling as a dev dependency means it won’t be included in our final package, as it is not necessary once our code has built.\n\n**Note**: _There is an option to use rollup or typescript. We'll explore both._\n\n## Typescript\n\n### Configure the tsconfig.json file\nSetup the typescript compiler using `npx tsc --init`, which will create a tsconfig.json file which contains any typescript compilation options.\n\nNow replace the contents with below to ensure our typescript files are generated correctly for our package and in the right location.\n\n```bash\n{\n  \"compilerOptions\": {\n    \"declaration\": true /* Generate .d.ts files from TypeScript and JavaScript files in your project. */,\n    \"module\": \"esnext\" /* Specify what module code is generated. */,\n    \"outDir\": \"dist\",\n    \"target\": \"es5\" /* Set the JavaScript language version for emitted JavaScript and include compatible library declarations. */,\n    \"lib\": [\"es6\", \"dom\", \"es2016\", \"es2017\"],\n    \"sourceMap\": true,\n    \"jsx\": \"react\",\n    \"moduleResolution\": \"node\",\n    \"allowSyntheticDefaultImports\": true,\n    \"esModuleInterop\": true /* Emit additional JavaScript to ease support for importing CommonJS modules. This enables 'allowSyntheticDefaultImports' for type compatibility. */,\n    \"forceConsistentCasingInFileNames\": true /* Ensure that casing is correct in imports. */,\n    \"strict\": true /* Enable all strict type-checking options. */,\n    \"skipLibCheck\": true /* Skip type checking all .d.ts files. */\n  },\n  \"include\": [\"src/**/*\"],\n  \"exclude\": [\n    \"node_modules\",\n    \"src/**/*.stories.tsx\",\n    \"src/**/*.test.tsx\"\n  ]\n}\n```\n\n### Package.json Setup\n\nMake sure to include our `dist` files in the package, and React is included as a peerDependency.\n\nWe also need a build script to compile the code.\n\nThe `package.json` file should look like the following:\n\n```bash\n{\n  \"name\": \"your-package-name\",\n  \"version\": \"1.0.0\",\n  \"description\": \"This is a custom demo react application to be published to npm.\",\n  \"main\": \"dist/index.js\",\n  \"files\": [\n    \"dist\"\n  ],\n  \"exports\": {\n    \".\": {\n      \"types\": \"./dist/index.d.ts\",\n      \"default\": \"./dist/index.js\"\n    }\n  },\n  \"scripts\": {\n    \"test\": \"echo \\\\\\\"Error: no test specified\\\\\\\" && exit 1\",\n    \"build\": \"tsc\"\n  },\n  \"repository\": {\n    \"type\": \"git\",\n    \"url\": \"your-repo\"\n  },\n  \"keywords\": [\n    \"react\",\n    \"components\",\n    \"ui\",\n    \"npm\",\n    \"package\"\n  ],\n  \"author\": \"your-name\",\n  \"license\": \"ISC\",\n  \"bugs\": {\n    \"url\": \"your-repo/issues\"\n  },\n  \"homepage\": \"your-repo#readme\",\n  \"dependencies\": {\n    \"react\": \"^18.3.1\",\n    \"react-dom\": \"^18.3.1\"\n  },\n  \"devDependencies\": {\n    \"@types/react\": \"^18.3.3\",\n    \"typescript\": \"^5.5.3\"\n  }\n}\n```\n\n## Rollup\n\n### Bundle the code. Install rollup.js\n\n  `npm install --save react rollup`\nYou will also need to install the Rollup plugins for Babel, CommonJS, and Node Resolve by running\n\n`npm install --save-dev @rollup/plugin-babel @rollup/plugin-commonjs @rollup/plugin-node-resolve @rollup/plugin-terser`\n\n### Configure Rollup\n\nCreate a `rollup.config.mjs` or `rollup.config.js` file in the root of your project. \n\nIn 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:\n\n```bash\nimport babel from 'rollup-plugin-babel';\nimport resolve from '@rollup/plugin-node-resolve';\nimport external from 'rollup-plugin-peer-deps-external';\nimport terser from '@rollup/plugin-terser';\nimport typescript from \"rollup-plugin-typescript2\"; // For Typescript\n\nexport default [\n  {\n    input: './src/index.ts',\n    output: [\n      {\n        file: 'dist/index.js',\n        format: 'cjs',\n      },\n      {\n        file: 'dist/index.es.js',\n        format: 'es',\n        exports: 'named',\n      }\n    ],\n    plugins: [\n      babel({\n        exclude: 'node_modules/**',\n        presets: ['@babel/preset-react']\n      }),\n      external({\n        includeDependencies: true\n      }),\n      resolve(),\n      terser(),\n      typescript({ useTsconfigDeclarationDir: true }),\n    ]\n  }\n];\n```\n\nTo 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.\n\n```bash\n  \"scripts\": {\n    \"test\": \"echo \\\"Error: no test specified\\\" && exit 1\",\n    \"build\": \"npx rollup -c\"\n  }\n```\n\nnow we can simply use npm run build or yarn build to bundle the code.\n\nIf it compiled without any error you may see a new folder dist generated in the root folder with transpiled Javascript Code.\n\n**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.\n\n## Test the package in other projects. \n\nMake sure to build the package first using the `npm run build` command.\n\n**There's to ways to test the package;**\n\nRun the following command from the root folder.\n\n  `npm pack`\nThis will generate a .tgz file that we can use to install the package locally in other projects.\n\n**Alternatively**, you can link the package for testing purpose [**Recommended**].\n\nUsing `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.\n\n**Note:** If npm link gives a `code: 'EACCES'` error, use `sudo npm link`. You might need to enter your password. The error should be solved\n\nNow, create an another application and tell the application to use the global symlink with `npm link your-package-name`. Import and use the package like below.\n\n```bash\nimport { Component1, Component2, Component2 } from '_your-custom-package_'\n\nexport default function Home() {\n  return (\n    <main>\n        <Component1 />\n        <Component2 />\n        <Component3 />\n    </main>\n  )\n}\n\n```\n\nThis way, we could save a lot of time 🙂.\n\n## Publish your package to NPM Registry\n\nWhen satisfied after testing,you could now publish a package to the npm registry, using these steps:\n\n1. Create an npm account on npmjs.com.\n2. Sign in to npm from your terminal using the `npm login` command.\n3. Prepare your package for publishing.\n4. Publish the package from the terminal using the `npm publish` command.\n\n### Navigate to your other project's directory and install your package using npm install . For example:\n\n  `npm i 'path_to_the_packed_file'`\n\n### In your host project's code you can import and use your component as follows:\n\n```bash\n  import \"./App.css\";\n  import TextInput from \"my_npm_package\"; **// Importing from the package**\n  import { useState } from \"react\";\n\n  export default function App() {\n    const [value, setValue] = useState('');\n\n    const handleChange(e)= () => setValue(e.target.value);\n\n    return (\n      <div className=\"App\">\n          <p>My npm module.</p>\n          <TextInput label=\"Name\" value={value} onChange={handleChange} />\n      </div>\n    );\n  }\n```\n\nAdditionally we can use packages like storybook.js 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.\n","readmeFilename":"README.md"}