{"id":48489656,"url":"https://github.com/cloudblue/connect-ui-toolkit","last_synced_at":"2026-04-07T11:04:39.030Z","repository":{"id":37860141,"uuid":"503654202","full_name":"cloudblue/connect-ui-toolkit","owner":"cloudblue","description":"UI Toolkit to build between others extensions for CloudBlue Connect","archived":false,"fork":false,"pushed_at":"2025-02-12T08:44:51.000Z","size":29263,"stargazers_count":9,"open_issues_count":2,"forks_count":7,"subscribers_count":7,"default_branch":"master","last_synced_at":"2025-03-13T06:34:35.541Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"apache-2.0","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/cloudblue.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-06-15T07:07:12.000Z","updated_at":"2025-02-12T08:43:39.000Z","dependencies_parsed_at":"2024-02-05T17:30:13.573Z","dependency_job_id":"48d4ee39-aca7-4f06-8d5c-b488cd22839b","html_url":"https://github.com/cloudblue/connect-ui-toolkit","commit_stats":null,"previous_names":[],"tags_count":34,"template":false,"template_full_name":null,"purl":"pkg:github/cloudblue/connect-ui-toolkit","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudblue%2Fconnect-ui-toolkit","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudblue%2Fconnect-ui-toolkit/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudblue%2Fconnect-ui-toolkit/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudblue%2Fconnect-ui-toolkit/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/cloudblue","download_url":"https://codeload.github.com/cloudblue/connect-ui-toolkit/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/cloudblue%2Fconnect-ui-toolkit/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31509946,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-07T03:10:19.677Z","status":"ssl_error","status_checked_at":"2026-04-07T03:10:13.982Z","response_time":105,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.5:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2026-04-07T11:04:36.138Z","updated_at":"2026-04-07T11:04:39.012Z","avatar_url":"https://github.com/cloudblue.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Connect UI Toolkit\n\n\u003ca href=\"https://npmjs.com/package/@cloudblueconnect/connect-ui-toolkit\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/%40cloudblueconnect%2Fconnect-ui-toolkit?logo=npm\" alt=\"NPM package\"\u003e\u003c/a\u003e\n\u003ca href=\"https://github.com/cloudblue/connect-ui-toolkit/actions/workflows/build.yml\"\u003e\u003cimg src=\"https://img.shields.io/github/actions/workflow/status/cloudblue/connect-ui-toolkit/build.yml\" alt=\"CI build\"\u003e\u003c/a\u003e\n\u003ca href=\"https://sonarcloud.io/summary/overall?id=connect-ui-toolkit\"\u003e\u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=connect-ui-toolkit\u0026metric=alert_status\" alt=\"Sonar Quality Gate\"\u003e\u003c/a\u003e\n\u003ca href=\"https://sonarcloud.io/summary/overall?id=connect-ui-toolkit\"\u003e\u003cimg src=\"https://sonarcloud.io/api/project_badges/measure?project=connect-ui-toolkit\u0026metric=coverage\" alt=\"Sonar Test Coverage\"\u003e\u003c/a\u003e\n\n---\n\nBuild your Connect Extension UI easily with our UI Toolkit. Feel free to use any frontend library\nor framework you prefer!\n\n## Installation\n\n### Minimalistic via CDN\n\nJust plug a module via `script` tag, import default exported function and call it. You're good.\n\nN.B.: For development mode - by default `\u003cpath\u003e` will be `http://localhost:3003`\n\n```html\n\u003cscript type=\"module\"\u003e\n  import createApp from '\u003cpath\u003e';\n\n  createApp();\n\u003c/script\u003e\n```\n\nThis will implement minimalistic interaction with parent Connect Application.\n\n## Usage\n\n### Use widgets\n\n1. Import required widget from named exports\n2. Pass a configuration Object to `createApp` function as an argument\n3. Configuration object should contain desired tag name as a `key` and widget descriptor object as a `value`. N.B.: widget name should contain at least one \"-\"\n\n```html\n\u003cscript type=\"module\"\u003e\n  import createApp, { Card } from '\u003cpath\u003e';\n\n  createApp({\n    'my-card': Card,\n  });\n\u003c/script\u003e\n\n...\n\n\u003cmy-card title=\"Lorem Ipsum\"\u003e\n  \u003cp\u003eMy content here...\u003c/p\u003e\n\u003c/my-card\u003e\n```\n\nControl widgets using attributes (see widgets documentation)\n\n### Interaction with parent app\n\nWe implemented two ways to interact with parent application - one is data-based, another events-based.\nYou will find supported data properties and handled events list in slot's documentation.\nLet's see how you can use it to build your app:\n\n### Data-based interface with `watch/commit`\n\nIf some data-based interface is documented for particular slot\nyou may subscribe on it using `watch` method or publish changes using `commit`\n\n```html\n\u003cscript type=\"module\"\u003e\n  import createApp from '\u003cpath\u003e';\n\n  const app = createApp();\n\n  app.watch('observed', (value) =\u003e {\n    /* handle \"observed\" property change here */\n  });\n\n  app.commit({\n    observed: /* Desired \"observed\" value here */,\n  });\n\u003c/script\u003e\n```\n\nUse `watch('observed', (value) =\u003e { ... })` to watch `observed` property\n\nUse `watch('*', (all) =\u003e { ... })` or just `watch((all) =\u003e { ... })` to watch all provided\nproperties at once\n\nUse `commit({ observed: 'ABC' })` to commit values that you want to be sent to parent app.\n\n**N.B.: Only expected properties will be processed. Anything unexpected will be omitted**\n\n**N.B.2: Due to security reasons this tool supports only simple values - like Strings, Numbers and Booleans (in depth too).\nFunctions, Dates etc. will not work.**\n\n### Events-based interface with `listen/emit`;\n\n```html\n\u003cscript type=\"module\"\u003e\n  import createApp from '\u003cpath\u003e';\n\n  const app = createApp();\n\n  app.emit('openDialog', {\n    title: 'Lorem Ipsum',\n    description: 'Dolor sit amet',\n  });\n\n  app.listen('dialog:confirmed', () =\u003e {\n    /* handle parent app dialog confirmation */\n  });\n\u003c/script\u003e\n```\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudblue%2Fconnect-ui-toolkit","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fcloudblue%2Fconnect-ui-toolkit","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fcloudblue%2Fconnect-ui-toolkit/lists"}