npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@kie-tools/boxed-expression-component

v0.32.0

Published

The Boxed Expression editor component provides the possibility to edit the decision logic for decisions and BKMs nodes

Downloads

26

Readme

Boxed Expression Editor

This editor provides the possibility to edit the expression related to a Decision Node, or to a Business Knowledge Model's function.

Static deployed showcase

There you can access to the static deployed version of the showcase application for this editor. It will be manually updated as soon as new features will be added.

Structure

The main component is src/components/BoxedExpressionEditor/BoxedExpressionEditor.tsx. It represents the entry point for using the editor.

In the showcase folder, there is a tiny React application, which represent the Proof Of Value about how it is possible to integrate the BoxedExpressionEditor component inside another existing application.

Once the showcase application gets launched, you can see on the right side of the page the JSON that is actually produced for the corresponding selected logic type. Such JSON represents the model data that must be adopted to initialize the BoxedExpressionEditor component, by populating its props.

The retrieval of the updated expression is performed by making usage of global functions, belonging to beeApiWrapper object, that must be available in the Window namespace and used by the BoxedExpressionEditor component. All exposed function expected to exist, are defined in src/api/BoxedExpressionEditor.ts.

Consider that the showcase app is able to display the most updated JSON representing an expression, because uses such APIs (please refer to showcase/src/index.tsx).

Scripts

In the main project (where the components actually live), it is possible to execute, from the root folder, the following scripts (pnpm is recommended):


# Remove 'dist' folder (such script is automatically called when the build is executed)
pnpm prebuild

# Build a production-ready artifact to be deployed
pnpm build:prod

# Execute all tests
pnpm test

# Trigger static code analysis
pnpm lint

# Trigger type checking
pnpm type-check

# Perform all the three checks above (tests, lint and type checking)
pnpm quality-checks

In the showcase project, these scripts are available:

# Start a local server to see the 'BoxedExpressionEditor' in action
pnpm start
# Compiles a production ready showcase application
pnpm build
# Run cypress 'BoxedExpressionEditor' tests. To update the Cypress Snapshot files, used for the regression, remove the related png and rerun the tests to regenerate it.
pnpm test:it