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 20.12 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
- 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
Updated 2 months ago