Skip to content

FGRibreau/ui-predicate

Repository files navigation

ui-predicate

Codecov branch Documentation build Slack

Finally a f*ck*n Predicates UI component for the Web.

An elegant user-interface component that allow a user to define :

  • allow creating simple or complex rules
  • filtering UI
  • conditions

Software using this UI component pattern

Mailchimp segmentation Zapier tweets filtering
Mailchimp segmentation Zapier tweets filtering
Google Analytics segments Β Uservoice rules
gg uservoice
MacOS Finder iTunes smart playlist
MacOS Finder iTunes smart playlist
Google Issue tracker Microsoft flow
Google Issue Tracker Microsoft Flow

🌏 Browser Support

(todo)

🎨 Features

High level packages

Packages description badges
ui-predicate-vue (100%) ui-predicate for VueJS npm version npm jsDelivr
ui-predicate-vue3 (100%) ui-predicate for VueJS 3 npm version npm jsDelivr
ui-predicate-react (100%) ui-predicate for React npm version npm jsDelivr
ui-predicate-angular (0%) ui-predicate for Angular npm version npm jsDelivr
ui-predicate-hyperhtml (0%) ui-predicate for HyperHTML npm version npm jsDelivr

Low-level packages

Packages description badges
ui-predicate-core low-level agnostic library npm version npm jsDelivr

Todo (will accept a PR for it)

  • ui-predicate-core quality: eslint support
  • ui-predicate-core build size: tree-shaking support
  • ui-predicate-core: changelog
  • ui-predicate-angular
  • ui-predicate-hyperHTML

The story

UI-Predicate is the result of years of implementation from scratch of the same UI component, again and again and again.

It started in 2011, I had to build a filtering system for my first startup Bringr so our customers could build their own filters from our social media data stream, at that time the first version was in jQuery. Then I had to reimplement it in BackboneJS for Redsmin for the alerting part, then at iAdvize where I build the first version of their customer targeting engine and now at Ouest-France a french newspaper where I want to give this awesome power to our internal users so they can build their own filter above our knowledge graph.

Each time the front library was different, I think we should all build low-level, agnostic, libraries of our components and then build upon them adapters for major front library (e.g. React, Vue)... At least that's what I'm doing for ui-predicate πŸ˜‹

Related