@laserfiche/lf-ui-components

A collection of UI Components to be used to build apps that interact with Laserfiche.

UI Components are compatible with many web frameworks including Angular, React, Vue, and no framework.

Using @laserfiche/lf-ui-components

See documentation here.

Change Log

See CHANGELOG here.

Contribution

We welcome contributions and feedback. Please follow our contributing guidelines.

Development Setup

• Run PowerShell build-test-locally.ps1 script

Build ui-components CDN script

1. Execute build-test-locally.ps1 to build and test this project.
   • See main.yml workflow for production build steps.
2. Cd to repo's root folder.
3. npm install ./projects/ui-components
4. Build ui-components using: npm run build-ui-components-prod
5. Run: npm run create-lf-cdn
   • This command will generate the CDN entry file dist/lf-cdn/lf-ui-components.js.
   • If need to output the CDN entry file to a different directory or project for said project local test, change SCRIPT_DEST in the root gulpfile.js. Important: don't commit this change to Pull Request

Build and install lf-ui-components NPM package locally

Run the script to build the full package (including CDN bundle and CSS assets):

.\build-local-npm-package.ps1

This produces ./dist/ui-components/laserfiche-lf-ui-components-[MajorVersion].0.0.tgz. To install it in another repo:

npm install C:\git\lf-ui-components\dist\ui-components\laserfiche-lf-ui-components-[MajorVersion].0.0.tgz

Build types-lf-ui-components NPM

This will create a package with version [MajorVersion].0.0. If you would like to update the version, change the version at ./types-lf-ui-components-publish/package.json.

npm install ./projects/ui-components # if you haven't already
npm run create-types-lf-ui-components

The command above will output: ./types-lf-ui-components-publish/laserfiche-types-lf-ui-components-[MajorVersion].0.0.tgz.

Build and view lf-documentation locally

You can use the lf-documentation project for testing changes.

Build style sheets and lf-documentation. This script, and npm run serve, also build the library and the CDN bundle (npm run create-lf-cdn) that the framework-agnostic live demo loads; restart npm run serve to pick up a rebuilt bundle.

npm run build-lf-documentation-dev

# Documentation output folder: ./dist/lf-documentation
npm run serve

For watch mode, start the documentation watch first and, once it is watching, the library watch in a second terminal. The documentation watch builds the library once before it starts watching, and a library watch started during that build deletes the dist/ui-components it compiles against.

npm run build-lf-documentation-dev-watch
npm run build-ui-components-dev-watch

Things to verify before creating a Pull Request

Run tests

npm run test

This will launch a Chrome browser and run all projects. Press Ctrl+C in the console to run the next project.

You can also run a specific project, for example: npm run test ui-components. For more details on how to run specific components or tests, visit the Vitest test documentation.

Run lint

npm run lint