# 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:

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

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

```tsx
{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

```jsx
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:

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

```