About @kwiz/fluentui

@kwiz/fluentui is a set of enhanced controls built for and on top of @fluentui/react-components (https://storybooks.fluentui.dev/react)

It adds a few key components, some very powerful and some simple wrappers to make the library easier to render in rapid dev.

Key components

Containers

Section

Renders a simple div with ease.

Properties:

1. main: make this grow to fill space in a stackable component
2. css: pass a string array of a makeStyles/useStyles classes

Vertical

A simple vertical flex box stackable

Horizontal

A simple horizontal flex box stackable

Stack

A simple vertical/horizontal flex box stackable

Data viewers

Table

A powerful strongly typed table control with sort, filter, sticky headers and sticker left 1/2 columns.

Provide an item level menu, and easy selection controls.

ListEx

Display items using a list control

AccordionEX

Display data in a collapsible accordion

QRCodeEX

Render a QR code for a specific string value (usually, a URL)

KWIZOverflowV2

A much better, more stable implementation of the overflow concept in the original library.

Render items horizontally or vertically in an overflow hidden zone to automatically collapse overflow items in a menu.

Inputs

InputEx

enhanced input control

InputNumberEx

enhanced input number control with built in validations

TextAreaEx

enhanced text area input control

FileUpload

Render a file upload button with a drop file option

DatePickerEx

A date picker wrapped nicely

CodeEditor

An implementation wrapper of monaco-editor

FileTypeIcon

Render an icon for a file type

DropdownEX

Strongly typed dropdown control

Buttons

A collection of ButtonEX controls and CompoundButtonEX controls wrapping and enhancing the original button control.

ButtonEX, ButtonEXSecondary, ButtonEXMessageBarAction, ButtonEXPrimary, ButtonEXDanger, ButtonEXSuccess, ButtonEXPrimarySubtle, ButtonEXDangerSubtle

CompoundButtonEX, CompoundButtonEXSecondary, CompoundButtonEXPrimary, CompoundButtonEXDanger

DrawPad

A canvas control

Key hooks

useDraggable

create a drag / drop context on an element, provide the element ref via dragDropRef like this:

const dropContext = useDragDropContext<..., ...>({...});
...
<Vertical main ref={(v) => {
    dropContext.dragDropRef(v);
}}>

Next, you can show "drop here" UI using markers like this:

{dropContext.drop.isOver && <div>drop here!</div>}

a useDragDropContext must be added to all draggable items (or files), and to all droppable zones, explaining what they allow to drag / drop.

useTrackFocus

useWindowSize

useElementSize

useIsInPrint

useKeyDown

useStateEX

set state on steroids. provide promise callback after render, onChange transformer and automatic skip-set when value not change

useRefWithState

use a ref, that can be tracked as useEffect dependency

useClickableDiv

return props to make div appear as clickable, and accept enter key as click

useAlerts

Easily prompt, confirm or alert the user. To use this you must render the alertPrompt in your element.

useAutoFocusEX

better auto-focus that actually works. use the ref on the element you wish to focus.

focus set initially, and then again on a timeout - default is 200ms timeout. send 0 to skip the timeout

useControlledStateTracker

track an input control if it was changed from a managed to unmanaged (controlled / uncontrolled) state between renders.

for example, if you pass a value on first render, but a defaultValue on a following render.

useHighlight

returns a function you can call to make an element glow momentarily

useIsConcurrent

Call at the beginning of a useEffect, check after all your promises finished before applying results to state. You must keep the same name for each useEffect

const {getConcurrency} = useIsConcurrent();
useEffect(()=>{
     const c = getConcurrency('loading data');
     const result = await someSlowPromise();
     if( c.isCurrent() ) setData(result);
},[]);

useReloadTracker

A simple reload marker, can be used as a dependency, and called as a function

Powerful load/reload/progress management with multiple scopes

useShowOnHover

Easily show content only on hover

useToast

useTrackChanges

Provides useful helpers for tracking if control has changes, and handling the save changes with progress bar and on success/fail messages.

Usage details

Debugging

For local debugging, use yalc-link to register the project, and watch to build and push.

Caller projects should use yalc add @kwiz/fluentui to link up your local project.

This will make sure both projects use the same instance of react.

Using the project controls

To successfully use these controls you should create a context, and wrap it in a drag/drop provider.

We recommend using the provider control:

<KWIZFluentProvider ctx={{ buttonShape: "rounded" }}>
    <IdPrefixProvider value="my-project">
    <FluentProvider theme={webLightTheme}>
      {content}
    </FluentProvider>
    </IdPrefixProvider>
</KWIZFluentProvider>