Front-End Library
The Worklio Embedded Payroll Front-End (WEP FE) library is a versatile tool for Front-End developers. It streamlines interactions with the WEP API, enabling the effortless integration of a native U.S. Payroll solution into your codebase.
Getting Started
Follow these steps to get started with the library:
-
Contact Support: Request access to the private repository on GitHub by contacting our support team at www.worklio.com/contact-us/.
-
Prerequisites: Ensure that you have Node.js version 18.16 installed. Download it from nodejs.org if necessary.
-
Clone the Repository: Clone it to your local machine after gaining access to the repository.
-
Install Dependencies: Navigate to the cloned repository folder and run the following command to install all required dependencies:
npm ci
This command installs dependencies based on the
package-lock.json
file, ensuring consistent installations.
Packages Inside The Library
Path | Description |
---|---|
packages/wep | WEP Utilities for route construction and data retrieval |
packages/wep-react | Ready-made React components and forms |
packages/wep-vue | Ready-Made Vue components and forms |
package/playground | Shared functionality for playgrounds |
package/playground-react | React app example |
package/playground-vue | Vue app example |
WEP Utilities
The packages/wep
directory provides essential utilities for route construction, data retrieval from the WEP API, and more. It comprises a collection of TypeScript types, enums, classes, and other vital elements to accelerate development while ensuring stability and resilience.
Building the Package:
-
Execute the following command to build the package:
npm run build -w @worklio/wep-next
-
Post-build, the package will be located in the
packages/wep/dist
directory. -
To utilize this package, copy the contents of the
packages/wep/dist
directory into your project.
Dependency: This package has a peer dependency on the @googlemaps/js-api-loader
library. To add this dependency to your project, execute the following command:
npm i @googlemaps/js-api-loader
Ready-Made Components
Leverage ready-made components to expedite Front-End development. The library supports React and Vue, with TypeScript declarations for early bug detection and enhanced development features like code completion and automated refactoring.
React Components
The packages/wep-react
directory contains React v18 components.
Building the Package:
-
Execute the following command to build the package:
npm run build -w @worklio/wep-react
-
Post-build, the package will be located in the
packages/wep-react/dist
directory. -
To utilize this package, copy the contents of the
packages/wep-react/dist
directory into your project.
Dependency: This package has a peer dependency on the @worklio/wep
and @googlemaps/js-api-loader
.
Stories: React components are using the storybook tool to showcase component variants and props. To open it in your browser, run the command:
npm run story -w @worklio/wep-react
Vue Components
The packages/wep-vue
directory comprises Vue v3 components.
Building the Package:
-
Execute the following command to build the package:
npm run build -w @worklio/wep-vue
-
Post-build, the package will be located in the
packages/wep-vue/dist
directory. -
To utilize this package, copy the contents of the
packages/wep-vue/dist
directory into your project.
Dependency: This package has a peer dependency on the @worklio/wep
and @googlemaps/js-api-loader
.
Stories: Vue components use the histoire tool to showcase component variants and props. To open it in your browser, run the command:
npm run story -w @worklio/wep-vue
Playgrounds
The package/playground-react
, and package/playground-vue
directories offer environments where developers can interact with and test the components the WEP FE library provides in real time.
Each playground environment is configured to hot-reload as you make changes, allowing for real-time feedback and iterative development.
React Playground
The package/playground-react
directory provides a playground specifically tailored for exploring and testing React components.
- Build
@worklio/wep-next
and@worklio/wep-react
packagesnpm run build -w @worklio/wep-next -w @worklio/wep-react
- Run the following command to start the playground environment:
npm run dev -w playground-react
Vue Playground
Located in the package/playground-vue
directory, this playground is designed for exploring and testing Vue components.
-
Build
@worklio/wep-next
and@worklio/wep-vue
packages.npm run build -w @worklio/wep-next -w @worklio/wep-vue
-
Run the following command to start the playground environment:
npm run dev -w playground-vue
Updated about 1 month ago