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:

1. Contact Support: Request access to the private repository on GitHub by contacting our support team at www.worklio.com/contact-us/.

2. Prerequisites: Ensure that you have Node.js version 20.12 installed. Download it from nodejs.org if necessary.

3. Clone the Repository: Clone it to your local machine after gaining access to the repository.

4. Install Dependencies: Navigate to the cloned repository folder and run the following command to install all required dependencies:

   Shell

   npm ci
   

   This command installs dependencies based on the package-lock.json file, ensuring consistent installations.

Packages Inside The Library

• packages/wep - npm package with functions, types, enums etc.
  to help communicate with the embedded payroll api, available from
  @worklio/wep path
• packages/wep-react - ready-made react components and
  forms, available from @worklio/wep-react path
• packages/wep-vue - ready-made vue components and forms,
  available from @worklio/wep-vue path
• packages/playground - shared functionality for
  playgrounds
• packages/playground-react - react app example
• packages/playground-vue - vue app example

Development

First things first. Install a project with a clean slate and build WEP library

npm ci
npm run build -w @worklio/wep -w @worklio/wep-react -w @worklio/wep-vue

And then for Vue.js run

npm run dev -w playground-vue

Or for React run

npm run dev -w playground-react

Stories

Stories can be used to view and develop independent components. Depending on the
package, stories are handled by either storybook (react) or histoire (vue). Not
every package has stories.

Preview and develop components and parts that make up the application can be
visualised in storybook.

Vue components and forms

npm run story -w @worklio/wep-vue

and

npm run story -w playground-vue

React components and forms

npm run story -w @worklio/wep-react

and

npm run story -w playground-react

Recommended IDE Setup For Development

VSCode +
Volar and
Takeover Mode