Files
speckle-server/packages/ui-components
andrewwallacespeckle 0045c353c6 Feature: FE2 - Project Webhooks Page (#1792)
* Layout Pages

* Add Multi Select with Badges

* Add MultiBadge

* Add prevent close on click outside

* Fix import issue

* Import Table

* Add Classnames to buttons

* Add Switch Component

* Update for webhooks

* skip precommit hooks

* Remove Infinite Load. Update Types

* Create Webhook Dialog

* Tidy Ups

* Edit Webhook dialog

* WIP Breadcurmbs

* Changes from calls with Fabians

* Breadcrumbs

* Reorders

* Fix Create Dialog

* Rename MultiBadge to BadgeSelected

* Fix and update Story file for Table

* Adjust Padding for Buttons in Table

* Add extra story, adjust padding for no buttons

* Fix bug with Edit Select

* fixed Webhook sorting + added Webhook.hasSecret and Webhook.projectId

* fixed hydration mismatch

* Changes from PR feedback

* Validation Rule for Select

* Reset Dialogs on Cancel. Conditionally render headers in Table

* stricter webhook gql types

* stricter webhook gql types

* Fix initial dialogs

* Quick Fixes

* Add projectWebhooksRoute

* Remove TableItemType

* Fixes from PR

* Fix broken Query

* Fixes from PR

* Fix based on PR

* Fix from PR

* Changes to index

* Fix in index

* Updates to Validation and Table

* Add "by" prop to FormSelectBadges and renamed component

* Use defineModel for Switch

* Revert "Use defineModel for Switch"

This reverts commit 6bc9e07a767cdc64f06c03b028150915e013ed4f.

* Replace breadcrumbs with projectWebhooksRoute

* Rename FormValues to WebhookFormValues

* Add target blank and simplify trigger mapping

* Fix casing of webhookFormValues

* Change webhookModel to prevent props mutation

* Remove unnecessary typecast

* Webhook deletion now uses fieldNameWhitelist.

* Use convertThrowIntoFetchResult and getFirstErrorMessage in Create

* Use defineModel for handling open state of Dialogs

* Optimise Switch component with defineModel

* Merge Create and Edit Dialogs

* Fix issue with Status Icons

* Remove console log

* WIP Merge of Edit and Create

* Add optional placeholder to SelectBase. Update Events placeholder.

* Add secret to Create webhook dialog

* Update Watch

* Rename Dialogs. Fix active select items

* Fix Select active items

* Simplify triggers, add secret to create call

* Remove $webhooksId: String

* fix: stale form state across edit/create webhook dialog sessions

* Fix from PR

* Swap t.text for t.id

* Use enum for historyStatus

* Use consistent story formatting

* More consistent create/edit mutations

* fix be linting errors

---------

Co-authored-by: Kristaps Fabians Geikins <fabis94@live.com>
2023-09-26 15:41:29 +02:00
..

ui-components

Speckle UI component library built with Vue 3 and relying on the Speckle Tailwind theme.

Setup

  1. Make sure you have @speckle/tailwind-theme installed and set up with Tailwind
  2. Install @speckle/ui-components
  3. In your tailwind config import tailwindContentEntry from @speckle/ui-components/tailwind-configure and invoke it in the contents field to ensure PurgeCSS is configured correctly. It requires the CJS require object as its only parameter. If it isn't available (in an ESM environment), you can use node's createRequire().
  4. Import @speckle/ui-components/style.css in your app. If exports map isn't supported you can also import from @speckle/ui-components/dist/style.css

Usage in Nuxt v3

It's suggested that you also install the @speckle/ui-components-nuxt Nuxt module. It will ensure that all of the Vue components can be auto-imported like components in nuxt's ./components directory. No need to import them manually anymore and you'll also get proper TS typing in your Vue templates out of the box!

Troubleshooting

Form validation doesn't work

It appears that in some scenarios Nuxt/Vite gets confused and bundles 'vee-validate' twice. To fix this add 'vee-validate' to vite.resolve.dedupe in your nuxt/vite config.

Build

Run yarn build

Development

Develop & test your components in Storybook - yarn storybook

Optionally you can also run yarn dev to run the Vite dev server which runs App.vue and in some special scenarios you might want to debug components there.

Troubleshooting

Styles don't work

Re-start storybook, it could be that you introduced a new tailwind class that was previously purged out