@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 lf-documentation

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

Build lf-documentation:

cd repo-root-folder
npm run build-ui-components-prod
npm run build-lf-documentation-prod

to create ./dist/lf-documentation.

Build style sheets:

npm run sass-lf
npm run sass-ms

For interactive development: Build lf-documentation in watch mode

This allows you to see changes you make to the ui components quickly. You can run the two commands in different windows so that you can see any changes in the browser, even those that are shared across components.

cd repo-root-folder
npm run build-ui-components-dev-watch
npm run build-lf-documentation-dev-watch

to create ./dist/lf-documentation.

View the interactive documentation

npx ng serve lf-documentation --configuration development --host 127.0.0.1 --port 4200

Or configure a web server to serve .dist/lf-documentation/browser (e.g. IIS on WIndows).

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