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 packages

npm 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
```