boxyhq/ui

UI toolkit to ease BoxyHQ integration

UI SDK

Toolkit to ease BoxyHQ integration. This SDK includes core components that can be used inside web apps and help in configuring features like SSO, Directory Sync, etc. Currently, these components are used in projects such as Jackson and saas-starter-kit. We use mitosis for authoring components and the code for each framework (see table below for the npm package) is then generated in the build process.

UI Framework	NPM
Angular
React
Svelte
Vue
Vue2

ui's Issues

Edit OIDC connection > `Client ID [OIDC Provider]` should be read only.

Refactor success/error callback to support multiple actions

[UI SDK] - Manage connections, display the connection based on `sortOrder`

[UI SDK] Google DSync Provider tweaks

• Hide the SCIM URL and Token if the directory provider is Google
• Add the Google authorize url in the directory fetch response
• Display the Google Authorize URL in the Edit component

[UI SDK] SaaS Starter Kt > Team > Directory Sync > Manage DSync Connections > View button not working

Standardise urls prop across components

Loading state for save/update buttons

Issue

The Button component currently lacks a loading indicator that provides visual feedback for an ongoing operation.

Solution

Support an isLoading prop and display a spinner if it's true. For reference see: https://react.daisyui.com/?path=/story/actions-button--loading-spinner-and-text

Before you begin

Kindly go through the guidelines before making your contribution. Happy hacking !! 😃

Support custom styling for Card

Issue

Currently, we use the Card component to display configured metadata as seen in the attached screenshot. This might cause mismatch with the userland app layout/styling that do not prefer cards.

Solution

We need a way to turn off or customize the card styling via props. In order to achieve this add support for custom classNames prop that can override styles for the underlying elements of the card (namely article, title, and body). For reference implementation see https://github.com/boxyhq/ui/blob/main/src/sso/connections/EditConnection/saml/index.lite.tsx#L54

Before you begin

Kindly go through the guidelines before making your contribution. Happy hacking !! 😃

feat: Vuejs

Vuejs 2 is reaching end-of-life on December 31, 2023. I reckon we should:

1. Move the vue folder (I am assuming this is Vuejs < 2) to a folder called archive or simply remove it.
2. Add an example for Vue 3 based on the Vue 2 base.

I am happy to help with both of these, let me know your thoughts.

[React] Duplicate styles in react bundle

Problem

The vite build setup for react uses vite-plugin-css-injected-by-js plugin to inject the CSS styles using javascript. Some stylesheets like common.module.css are sourced in multiple other stylesheets. The styles coming from common.module.css get injected multiple times in the final bundle (react/dist/shared.js). Find a way to get rid of the repeated styles in the bundle.

Solution

Source common.module.css inside sso/index.ts and remove CSS imports @import inside *.module.css.
NOTE: Any better alternatives are also welcome.

Testing

Make changes under src/shared folder. Run npm run build from root folder followed by npm run build-lib under react folder. Verify that the classnames are not repeated inside react/dist/shared.js

Add IdP login flow hint to Default redirect url field label

[UI SDK] Array Input component

Improve the input component UX that accepts more than one item e.g. redirectUrl

Align UI SDK base styles with starter kit theme

[UI SDK] Add `sortOrder` field to connection create and edit form