Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
iflex-react-library
Advanced tools
iflex-react-library - npm Package Compare versions
Comparing version 1.0.49 to 1.0.50
| { | ||
| "notes": "iflex-library - Presently babel-loader must be 8.1.0, all other dependecies should be upgradable, webpack dependency added to facilitate process.env and Snowpack alias to work with Storybook", | ||
| "name": "iflex-react-library", | ||
| "version": "1.0.49", | ||
| "version": "1.0.50", | ||
| "description": "Modern React Ui Component", | ||
@@ -102,2 +102,3 @@ "keywords": [ | ||
| "snowpack": "^3.0.11", | ||
| "storybook": "^6.1.14", | ||
| "style-loader": "^2.0.0", | ||
@@ -104,0 +105,0 @@ "webpack": "^5.15.0" |
@@ -6,6 +6,7 @@ # Create React Component Libraries | ||
| ## **Motivation ** | ||
| ## **Motivation** | ||
| If you have tried it, let's face it _BUILDING REACT COMPONENT LIBRARIES IS NOT EASY!_. Having used many existing templates utilising webpack or rollup I have been frustrated by various hurdles such as:- | ||
| If you have tried it, let's face it _BUILDING REACT COMPONENT LIBRARIES IS NOT EASY!_. Having used many existing templates utilising webpack or rollup I have spent many days and been frustrated by various hurdles such as:- | ||
| - Library builders require outdated dependancies and break when you upgrade to latest React or other component libraries. | ||
| - Library is not published as ESM module with fallback to commonJS. | ||
@@ -21,2 +22,4 @@ - Exports do not support CSS or SASS | ||
| **iflex-react-library** is created in 2021 using the most recent packaging (rollup) and tool chain technologies (Snowpack) and versions 17.x of of React. At this time all packages can be updated via **yarn upgrade --force** to most current versions. The only exception to this presently is babel-loader which requires version 8.1.0 owing to some breaking changes that will hopefully be rectified in future versions. If you App requires React version 16.x then you can simply remove version 17 using **yarn remove react react-dom** and reinstalling them using **yarn add -D react@16.14.0 react-dom@16.14.0**. Be sure to also add these to peerDependencies object in package.json. | ||
| ### **Component Library Rollup** | ||
@@ -54,6 +57,2 @@ | ||
| This template allows your library to be developed in the src folder. You can place your demonstration / test application in the demo folder and link to it through an alias that matches your externally published package name. | ||
| Storybook is also implemented to allow easy testing of your components without building links within the demo foler. | ||
| ## Key Technologies | ||
@@ -63,43 +62,80 @@ | ||
| - [Snowpack v3](https://www.snowpack.dev/posts/2021-01-13-snowpack-3-0) for local demonstration and test app. | ||
| - [Sass](https://sass-lang.com/) | ||
| - [Storybook](https://storybook.js.org/) for easy testing of components | ||
| - [react-scripts] for build and deployment | ||
| - [Storybook](https://storybook.js.org/) for easy testing and documentation of components | ||
| - [Sass](https://sass-lang.com/) SCSS and SASS | ||
| - [Webpack & Babel]() Babel is used during build process. Webpack is utilised to allow alias configuration in Snowpack.config.js to be used by Storybook. | ||
| ## NPM Distribution Files | ||
| ## **Getting Started** | ||
| **iflex-react-library** (using rollup) will create distribution files (_in dist directory_) for Common JS (index.js), ESM Modules (index.modern.js) and UMD (index.umd.js) | ||
| ### Testing | ||
| ### **Installation** | ||
| Create your development folder (For example _my-test-react-library_) for your library and extract the github report from https://github.com/Intelliflex/iflex-react-library into your development folder. This can be done from the command line by changing into your new development directory and issung the following command. | ||
| ``` | ||
| npm start | ||
| or | ||
| yarn start | ||
| git clone https://github.com/Intelliflex/iflex-react-library . | ||
| yarn install | ||
| ``` | ||
| ### Building | ||
| ### Preliminary Test | ||
| You can now veryify library is working by testing with the following commands | ||
| ``` | ||
| npm run build | ||
| or | ||
| yarn build | ||
| yarn storybook (This will run the storybook from /src/stories folder - you will replace these stories with your own) | ||
| yarn start (This will run the local demonstration and testing app from /src/demo folder) | ||
| ``` | ||
| ## Publishing | ||
| ### Tailoring for Your Library | ||
| Follow these steps to tailor for your library | ||
| - In package.json, Change the name field to the published name of your library (Make sure this name is available on https://www.npmjs.com/) - For example _my-test-react-library_ | ||
| - In package.json, Change the version to 1.0.0 | ||
| - In package.json, Change the description field to match the description for your library | ||
| - In package.json, Change keywords, to suit your own library | ||
| - Change the library name in path alias section of snowpack.config.js from iflex-react-library to the name of your library. | ||
| You can make changes to the Sample components in src/library or when you are ready replace with your own. These changes are hot loaded with the demonstration app (/src/demo) and Storybook (/src/storybook) so that when you make changes they are instantly displayed on your browser. | ||
| That's it you are now ready to publish (ensure that you have an account on https://www.npmjs.com/ and that you are logged in via npm login - if you don't know how to do this refer to documentation on https://www.npmjs.com/). | ||
| ### Publishing your library | ||
| ``` | ||
| npm run publish | ||
| or | ||
| yarn publish | ||
| yarn publish (this will automatically run yarn build) | ||
| ``` | ||
| ## Storybook | ||
| If your npm login details are accepted, you should now be able to see your project on https://www.npmjs.com/ | ||
| To run a live-reload Storybook server on your local machine: | ||
| ### Consuming your library from other Apps | ||
| Assuming that the Sample Comonents are still intact you can now consume your library in another React App. These steps will guide you through consuming library in a new App called my-test-iflex-create-library. It is assumed here that your have created and published a library called my-test-library using the steps above. If not substitute this with your own name. Create a folder for your test application (eg: my-test-consume-library) and ensure your terminal openend to this folder. | ||
| ``` | ||
| npx create-react-app . | ||
| yarn add my-test-library | ||
| ``` | ||
| npm run storybook | ||
| Change you App.js (from /src folder) to | ||
| ``` | ||
| import React from 'react' | ||
| import { About } from 'my-test-react-library' | ||
| const App = (props) => { | ||
| return <About /> | ||
| } | ||
| export default App | ||
| ``` | ||
| Now run your Test App | ||
| ``` | ||
| yarn start | ||
| ``` | ||
| You should see the About Component from the library that you published. | ||
| Congratulations! | ||
| Go forth and produce! (React component libraries that is :) |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Major refactor
Supply chain riskPackage has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by5.17%
69123
- Number of lines in readme file
- increased by35.29%
138
- Number of medium supply chain risk alerts
- decreased by-100%
0
Worsened metrics
- Dev dependency count
- increased by1.59%
64
No dependency changes