@5ive-souls/controls 0.0.1 → 0.0.3

package/dist/main.d.ts

@@ -0,0 +1,637 @@
+import { BrandVariants } from '@fluentui/react-components';
+import { default as default_2 } from 'react';
+import { JSX as JSX_2 } from 'react/jsx-runtime';
+import { Theme } from '@fluentui/react-components';
+
+/**
+ * Transient component, will not render anything but it's props are used by it's parent Grid component.
+ */
+export declare const ColumnDefinition: default_2.FunctionComponent<IGridSize>;
+
+export declare const cornflower: BrandVariants;
+
+export declare const cornflowerDark: Theme;
+
+export declare const cornflowerLight: Theme;
+
+export declare const crimson: BrandVariants;
+
+export declare const crimsonDark: Theme;
+
+export declare const crimsonLight: Theme;
+
+export declare const enum Device {
+    Desktop = 0,
+    Tablet = 1,
+    Mobile = 2
+}
+
+export declare const deviceContext: default_2.Context<IFiveSoulsProvider>;
+
+/**
+ * The `DynamicForm` component allows the consumer to display robust and feature rich input forms by defining the structure of
+ * the data requested instead of the UI.
+ *
+ * The `metaData` can be sourced from several locations, either by using the `DynamicFormBuilder` locally, in code, or even retrieved
+ * from a server.
+ *
+ * The data input in the form can be accessed via the `omSubmit` callback passed in. It will be invoked with an object containing all the data.
+ *
+ * Alternatively you can provide an Action URL and have the `DynamicForm` behave as a standard HTML form.
+ */
+export declare const DynamicForm: default_2.FunctionComponent<IDynamicFormProps>;
+
+export declare class DynamicFormBuilder {
+    private _formData;
+    private _section;
+    private _line;
+    private _field;
+    private _sectionBuilder;
+    private _fieldBuilder;
+    private _defaultValues;
+    get Section(): SectionBuilder;
+    get Field(): FieldBuilder;
+    private constructor();
+    static Start(title?: string): DynamicFormBuilder;
+    Finish(): IFormMetaData;
+    AddSection(title: string): DynamicFormBuilder;
+    AddLine(callback: (builder: DynamicFormBuilder) => void): DynamicFormBuilder;
+    AddField(key: string, label?: string): DynamicFormBuilder;
+}
+
+export declare class FieldBuilder {
+    private _formBuilder;
+    private _field;
+    private _defaultValues;
+    constructor(formBuilder: DynamicFormBuilder, field: IField, defaultValues: unknown);
+    SetType(type?: "text" | "email" | "password" | "search" | "tel" | "url" | "date" | "datetime-local" | "month" | "number" | "time" | "week"): DynamicFormBuilder;
+    IsMultiLined(): DynamicFormBuilder;
+    IsRequired(): DynamicFormBuilder;
+    SetOptions(options: string[]): DynamicFormBuilder;
+    AsRadiogroup(): DynamicFormBuilder;
+    SetValidation(validation: string): DynamicFormBuilder;
+    SetHint(hint: string): DynamicFormBuilder;
+    IsBoolean(): DynamicFormBuilder;
+    DoesNotFill(): DynamicFormBuilder;
+    WithDefaultValue(value: string): DynamicFormBuilder;
+    /**
+     * Marks the current field dependant on the value of another field.
+     * @param key The key of the field this one is dependant on.
+     * @param value The expected value of the field. Can either be !=NULL for any value, true or false for a boolean field, or any string value.
+     * @param type What aspect of this field is controlled by the other fields value? Either visibility or enabled.
+     * @returns
+     */
+    WithDependency(key: string, value: string | "!=NULL", type: "visibility" | "enabled"): DynamicFormBuilder;
+}
+
+/**
+ * The FiveSoulsProvider provides UI responsiveness to the 5ive Souls components. It also acts as a FluentProvider allowing theming.
+ */
+export declare const FiveSoulsProvider: (props: IFiveSoulsProviderProps) => JSX_2.Element;
+
+/**
+ * The FlexBox component is a React wrapper around the CSS Flexible Box Layout Module.
+ */
+export declare const FlexBox: default_2.FunctionComponent<IFlexBoxProps>;
+
+export declare const FlexBoxItem: default_2.FunctionComponent<IFlexBoxItemProps>;
+
+export declare const FlexBoxItemResizer: default_2.FunctionComponent<IFlexBoxItemResizerProps>;
+
+export declare const forest: BrandVariants;
+
+export declare const forestDark: Theme;
+
+export declare const forestLight: Theme;
+
+/**
+ * The `Grid` component is a React wrapper around the CSS Grid Layout Module. It provides an easy and intuitive way to define the Columns, Rows, and grid item placement.
+ *
+ * To add a Column or Row simplye provide a `ColumnDefintion` or `RowDefinition` as a child element of the `Grid`.
+ */
+export declare const Grid: default_2.FunctionComponent<IGridProps>;
+
+/**
+ *  The `GridCell` component exposes properties simplifying defining the location of a CSS Grid Item.
+ */
+export declare const GridCell: default_2.FunctionComponent<IGridCellProps>;
+
+export declare interface IComponentProps extends default_2.DetailedHTMLProps<default_2.HTMLAttributes<HTMLDivElement>, HTMLDivElement> {
+}
+
+export declare interface IDynamicFormProps extends IComponentProps {
+    /**
+     * Object that provides the Sections and Fields to be displayed.
+     */
+    metaData: IFormMetaData;
+    /**
+     * Render the form as read-only. The fields and submit button cannot be interacted with.
+     * Next and Previous buttons still function.
+     */
+    readonly?: boolean;
+    /**
+     * Value provided to the HTML Form element wrapping all the fields.
+     * Mutually exclusive with the onSubmit callback.
+     * @default false
+     */
+    action?: string;
+    /**
+     * The target of the HTML Form when an action value has been provided.
+     */
+    target?: string;
+    /**
+     * Callback invoked when the submit button on the final panel is pressed.
+     * @param results
+     * @returns
+     */
+    onSubmit?: (results: unknown) => void;
+    /**
+     * Collections of strings that override the default values used by the Dynamic Form
+     */
+    strings?: IDynamicFormStrings;
+    /**
+     * Collections of strings that override the default values used by Wizard used by the Dynamic Form.
+     */
+    wizardStrings?: IWizardStrings;
+    /**
+     * Callback invoked when a field has it's value updated.
+     */
+    onFieldChanged?: (key: string, oldValue: unknown, newValue: string) => void;
+}
+
+declare interface IDynamicFormStrings {
+    /**
+     * Value used as the error message displayed below all missing fields when attempting to change sections.
+     */
+    fieldRequired?: string;
+}
+
+export declare interface IField {
+    key: string;
+    label?: string;
+    type?: "text" | "email" | "password" | "search" | "tel" | "url" | "date" | "datetime-local" | "month" | "number" | "time" | "week";
+    multiLine?: boolean;
+    required?: boolean;
+    options?: string[];
+    asRadioGroup?: boolean;
+    validationMessage?: string;
+    hint?: string;
+    isBoolean?: boolean;
+    doNotFill?: boolean;
+    /**
+     * Key of the other field this field depends on.
+     */
+    dependantOn?: string;
+    /**
+     * Value of the dependency key that will trigger the dependency type.
+     */
+    dependantValue?: string | "!=NULL";
+    /**
+     * Defines what aspect of this field is effected by the dependant field.
+     */
+    dependencyType?: "visibility" | "enabled";
+}
+
+export declare interface IFieldGroup {
+    fields: IField[];
+}
+
+export declare interface IFiveSoulsProvider {
+    device: Device;
+}
+
+declare interface IFiveSoulsProviderProps {
+    children?: default_2.ReactNode;
+    /**
+     * Sets the value (in pixels) that is compared to the Windows inner width to determine if the device is a mobile.
+     */
+    mobileThreshold?: number;
+    /**
+     * Sets the value (in pixels) that is compared to the Windows inner width to determine if the device is a tablet.
+     */
+    tabletThreshold?: number;
+    /**
+     * Sets the theme used in a scope.
+     */
+    theme?: Theme;
+    /**
+     * Sets the class name to be applied to the inner FluentProvider.
+     */
+    className?: string;
+}
+
+export declare interface IFlexBoxItemProps extends IComponentProps {
+    grow?: number;
+    shrink?: number;
+    basis?: string;
+    padding?: string | number;
+    minSize?: number;
+    maxSize?: number;
+}
+
+export declare interface IFlexBoxItemResizerProps extends IComponentProps {
+    horizontal?: boolean;
+}
+
+export declare interface IFlexBoxProps extends IComponentProps {
+    childrenGap?: number | string;
+    horizontal?: boolean;
+    fill?: boolean;
+    alignItems?: "start" | "center" | "end";
+    justifyContent?: "start" | "center" | "end";
+    wrap?: boolean;
+    reverse?: boolean;
+    itemProps?: IFlexBoxItemProps;
+}
+
+export declare interface IFormMetaData {
+    title?: string;
+    sections: IFormSection[];
+    results: any;
+}
+
+export declare interface IFormSection {
+    title: string;
+    message?: string;
+    fields: (IField | IFieldGroup)[];
+}
+
+export declare interface IFormValidationState {
+    missingFields: number;
+}
+
+export declare interface IGridCellProps extends IComponentProps {
+    /**
+     * The column in which this item should be placed. (Columns are 1 based not 0)
+     */
+    column?: number;
+    /**
+     * The number of columns this item consumes. Defaults to 1.
+     */
+    columnSpan?: number;
+    /**
+     * The row in which this item should be placed. (Rows are 1 based not 0)
+     */
+    row?: number;
+    /**
+     * The number of rows this item consumes. Defaults to 1.
+     */
+    rowSpan?: number;
+    /**
+     * Defines the placement of the item. Is a combination of `column`, `row`, `columnSpan`, and `rowSpan`.
+     * If this value is provided all other placement properties are ignored.
+     */
+    area?: string;
+}
+
+export declare interface IGridContext {
+    rows: IGridSize[];
+    columns: IGridSize[];
+}
+
+export declare interface IGridProps extends IComponentProps {
+    /**
+     * Specifies weather or not this grid will interrupt the line flow (Block) or not (Inline)
+     */
+    inline?: boolean;
+    /**
+     * Specifies if the grid should consumer the maximum width and height of it's parent.
+     */
+    fill?: boolean;
+    /**
+     * Specifies the default unit of measurement to be used on any child `RowDefinition`s or `ColumnDefinitions`s that do not specify their own unit.
+     */
+    defaultUnit?: "fraction" | "pixel";
+    /**
+     * Specifies the default size to be used on any child `RowDefinition`s or `ColumnDefinitions`s that do not specify their own size.
+     */
+    defaultUnitSize?: number;
+    /**
+     * Used to align the grid items when they do not use all available space on the main-axis
+     */
+    justifyContent?: "space-evenly" | "space-around" | "space-between" | "center" | "start" | "end";
+    /**
+     * Used to align the grid items when they do not use all available space on the cross-axis.
+     */
+    alignContent?: "space-evenly" | "space-around" | "space-between" | "center" | "start" | "end";
+    /**
+     * Specifies the gap between the columns/
+     */
+    columnGap?: number | string;
+    /**
+     * Specifies the gap between the rows.
+     */
+    rowGap?: number | string;
+    /**
+     * Specified the gap between both columns and rows.
+     */
+    gap?: number | string;
+    /**
+     * Specifies the gap between the grid container and it's items.
+     */
+    padding?: number | string;
+}
+
+export declare interface IGridSize {
+    /**
+     * The numerical value representing the size of this item.
+     */
+    size?: number;
+    /**
+     * The unit of measurement to apply to the `size` property.
+     */
+    unit?: "fraction" | "pixel";
+    /**
+     * The maximum size (in Pixels).
+     * Only used when resizing with the `ResizableGridCell`.
+     */
+    max?: number;
+    /**
+     * The minimum size (in Pixels).
+     * Only used when resizing with the `ResizableGridCell`.
+     */
+    min?: number;
+}
+
+export declare interface IJumpListProps<T extends object> extends IComponentProps {
+    /**
+     * Collection of items to be displayed.
+     */
+    items?: T[];
+    /**
+     * Name\Key of the field to be used as the header to be used for grouping and sorting.
+     */
+    headerProp: string;
+    /**
+     * Rendering function for the content of the list item, if not provided the value  acquired from the `headerProp` will be used.
+     */
+    renderItem?: (item: T, isSelected: boolean) => default_2.ReactNode;
+    /**
+     * Rendering function for an optional icon slot that appears before the item. Renders into a 36px by 36px area.
+     */
+    renderIcon?: (item: T, isSelected: boolean) => default_2.ReactNode;
+    /**
+     * Callback invoked when the user makes a selection.
+     */
+    onSelectionChanged?: (item?: T) => void;
+    /**
+     * Collection of string that override the default values used by the JumpList
+     */
+    strings?: IJumpListStrings;
+    /**
+     * When enabled render UI to allow the user to filter the list of items.
+     */
+    enableFiltering?: boolean;
+}
+
+export declare interface IJumpListStrings {
+    /**
+     * Message displayed when no items have been provided.
+     */
+    emptyList: string;
+}
+
+export declare interface IResizableGridCellProps extends IGridCellProps {
+    /**
+     * If set to true, the cell will allow the column to beresized instead of the row.
+     */
+    horizontal?: boolean;
+    /**
+     * The amount of space to put between the cell content and the resize handle.
+     * Consumers should not have to set this property as the parent `Grid` will attempt to use it's Gap, columnGap, or rowGap for this value.
+     */
+    gap?: number | string;
+}
+
+export declare interface IRichTextProps extends IComponentProps {
+    /**
+     * Value to be parsed and rendered respecting any predefined styling.
+     */
+    text: string;
+    /**
+     * Applies a block display for the content.
+     */
+    block?: boolean;
+    /**
+     * Applies the font family to the content.
+     */
+    font?: "base" | "monospace" | "numeric";
+    /**
+     * Applies the italic font style to the content.
+     */
+    italic?: boolean;
+    /**
+     * Applies font size and line height based on the theme typography tokens.
+     */
+    size?: 100 | 200 | 300 | 400 | 500 | 600 | 700 | 800 | 900 | 1000;
+    /**
+     * Applies the strikethrough text decoration to the content.
+     */
+    strikethrough?: boolean;
+    /**
+     * Aligns text based on the parent container.
+     */
+    align?: "start" | "center" | "end" | "justify";
+}
+
+export declare interface ISectionProps extends IComponentProps {
+    /**
+     * Applies the overflow styling to the content.
+     */
+    scrollable?: boolean;
+    /**
+     * Icon to be displayed in the upper left corner of the section header.
+     */
+    icon?: default_2.ReactNode;
+    /**
+     * Content to be displayed in the upper middle of the section header.
+     */
+    header?: default_2.ReactNode;
+    /**
+     * Determines if the section can be collapsed hiding it's content.
+     */
+    collapsible?: boolean;
+    /**
+     * Applies styling to have the section consume 100% of it's parent's height and width.
+     */
+    fill?: boolean;
+    /**
+     * Collection of properties to be used when this section is rendered as a child of the `Grid` component.
+     */
+    cellProps?: IResizableGridCellProps & {
+        resizable?: boolean;
+    };
+    /**
+     * Collection of properties to be used when this section is rendered as a child of the `FlexBox` component.
+     */
+    flexBoxItemProps?: IFlexBoxItemProps;
+}
+
+export declare interface IThemePickerProps extends IComponentProps {
+    /**
+     * Initial selected theme, this value is ignored after first rendering.
+     */
+    defaultTheme?: "Crimson" | "Forest" | "Cornflower" | "Royal";
+    /**
+     * Initial value for is dark mode, this value is ignored after first rendering.
+     */
+    darkMode?: boolean;
+    /**
+     * Size of the color swatch.
+     */
+    size?: "extra-small" | "small" | "medium" | "large";
+    /**
+     * The shape of the color swatch.
+     */
+    shape?: "rounded" | "square" | "circular";
+    /**
+     * The amount of space between the color swatches.
+     */
+    spacing?: "small" | "medium";
+    /**
+     * Callback triggered when the theme changes. (either color swatch change or dark mode change)
+     */
+    themeSelected?: (theme: Theme) => void;
+    /**
+     * Collections of strings that override the default values used by the Theme Picker
+     */
+    strings?: IThemePickerStrings;
+}
+
+declare interface IThemePickerStrings {
+    /**
+     * Value used as a tool tip for the button to enable light mode.
+     */
+    enableLightMode?: string;
+    /**
+     * Value used as a tool tip for the button to enable dark mode.
+     */
+    enableDarkMode?: string;
+    /**
+     * Value used as the tool tip for the Cornflower blue based theme.
+     */
+    cornflower?: string;
+    /**
+     * Value used as the tool tip for the Crimson red based theme.
+     */
+    crimson?: string;
+    /**
+     * Value used as the tool tip for the forest green based theme.
+     */
+    forest?: string;
+    /**
+     * Value used as the tool tip for the Royal purple based theme.
+     */
+    royal?: string;
+}
+
+export declare interface IWizardPanelProps extends IComponentProps {
+    title: string;
+}
+
+export declare interface IWizardProps extends IComponentProps {
+    /**
+     * When set to true, disables the submit button.
+     */
+    readonly?: boolean;
+    /**
+     * When set to true, changes the behavior of submit button to act as a submit (HTML Form) instead of a button.
+     */
+    asForm?: boolean;
+    /**
+     * Callback invoked when the Wizard attempts to navigate to another panel.
+     * @param currentIndex Index of the current WizardPanel.
+     * @param newIndex Index of the WizardPanel being navigated to.
+     * @returns If true the navigation is canceled.
+     */
+    onNavigatePanel?: (currentIndex: number, newIndex: number) => boolean;
+    /**
+     * Callback invoked when the submit button on the final WizardPanel is pressed.
+     */
+    onSubmit?: () => unknown;
+    /**
+     * Collection of string that override the default values used by the WizardPanel
+     */
+    strings?: IWizardStrings;
+}
+
+declare interface IWizardStrings {
+    /**
+     * Value displayed on the button to go to the previous WizardPanel.
+     */
+    previous?: string;
+    /**
+     * Value displayed on the button to go ot the next WizardPanel.
+     */
+    next?: string;
+    /**
+     * Value displayed on the submit button.
+     */
+    submit?: string;
+}
+
+/**
+ * The `JumpList` component display a collection of items, that will then be grouped by the first letter of their `headerProp`.
+ * A button will be displayed between changing characters that when pressed will present the user with a surface that will allow them to jump to another header in the list.
+ *
+ * > The `JumpList` component supports a generic type argument that defines the type of items expected.
+ * > T define the generic type, use the following syntax.
+ * >
+ * > `<JumpList<TItemType> items={[]} headerProp="name" />`
+ */
+export declare const JumpList: <T extends object>(props: IJumpListProps<T>) => JSX_2.Element;
+
+/**
+ * The `ResizableGridCell` component can be used in place of the `GridCell` compoent to allow the user to resize the row or column the cell resides it.
+ * By default this allows the row to be resized. This can be changed by setting the `horizontal` property to true.
+ *
+ * > At this time there is no way to define a Min or Max size for a row or column.
+ */
+export declare const ResizableGridCell: default_2.FunctionComponent<IResizableGridCellProps>;
+
+/**
+ *  The `RichText` component takes in a raw string value and will rendering applying styles based on pre-defined style markers.
+ *
+ * >Currently the Rich Text component only applies line breaks to the value. More to come.
+ */
+export declare const RichText: default_2.FunctionComponent<IRichTextProps>;
+
+/**
+ * Transient component, will not render anything but it's props are used by it's parent Grid component.
+ */
+export declare const RowDefinition: default_2.FunctionComponent<IGridSize>;
+
+export declare const royal: BrandVariants;
+
+export declare const royalDark: Theme;
+
+export declare const royalLight: Theme;
+
+/**
+ * The `Section` component is a stylized content wrapper that provides header and collapsible capabilities. It can also be used as a `FlexBoxItem` and `GridCell`.
+ */
+export declare const Section: default_2.FunctionComponent<ISectionProps>;
+
+export declare class SectionBuilder {
+    private _formBuilder;
+    private _section;
+    constructor(formBuilder: DynamicFormBuilder, section: IFormSection);
+    SetMessage(message?: string): DynamicFormBuilder;
+}
+
+/**
+ * The ThemePicker component allows you to select from one of the 5ive Souls built in themes. Each theme comes in a dark and light mode.
+ */
+export declare const ThemePicker: default_2.FunctionComponent<IThemePickerProps>;
+
+export declare const useDevice: () => Device;
+
+/**
+ * The Wizard component holds a collection WizardPanels while displaying a single one.
+ * The user can navigate through them with either the navigation button on the bottom or by clicking on the headers in the bread crumb trail.
+ */
+export declare const Wizard: default_2.FunctionComponent<IWizardProps>;
+
+export declare const WizardPanel: default_2.FunctionComponent<IWizardPanelProps>;
+
+export { }

package/dist/main.js

@@ -0,0 +1,61 @@
+import { DynamicForm as t } from "./components/DynamicForm/DynamicForm.js";
+import { DynamicFormBuilder as m } from "./components/DynamicForm/Builder/DynamicFormBuilder.js";
+import { FieldBuilder as x } from "./components/DynamicForm/Builder/Field/FieldBuilder.js";
+import { SectionBuilder as l } from "./components/DynamicForm/Builder/Section/SectionBuilder.js";
+import { Device as c } from "./components/FiveSoulsProvider/FiveSouls.Types.js";
+import { FiveSoulsProvider as s } from "./components/FiveSoulsProvider/FiveSoulsProvider.js";
+import { deviceContext as D } from "./components/FiveSoulsProvider/deviceContext.js";
+import { useDevice as F } from "./components/FiveSoulsProvider/useDevice.js";
+import { FlexBox as B } from "./components/FlexBox/FlexBox.js";
+import { FlexBoxItem as v } from "./components/FlexBox/FlexBoxItem/FlexBoxItem.js";
+import { FlexBoxItemResizer as L } from "./components/FlexBox/FlexBoxItemResizer/FlexBoxItemResizer.js";
+import { ColumnDefinition as w, Grid as z, RowDefinition as C } from "./components/Grid/Grid.js";
+import { GridCell as S } from "./components/Grid/GridCell/GridCell.js";
+import { ResizableGridCell as P } from "./components/Grid/ResizableGridCell/ResizableGridCell.js";
+import "./components/Grid/GridContext.js";
+import { RichText as T } from "./components/RichText/RichText.js";
+import { S as b } from "./Section-Bw_kuHpK.js";
+import { ThemePicker as j } from "./components/ThemePicker/ThemePicker.js";
+import { cornflower as A, cornflowerDark as E, cornflowerLight as H } from "./components/ThemePicker/Themes/Cornflower/Cornflower.js";
+import { crimson as M, crimsonDark as N, crimsonLight as O } from "./components/ThemePicker/Themes/Crimson/Crimson.js";
+import { forest as U, forestDark as V, forestLight as X } from "./components/ThemePicker/Themes/Forest/Forest.js";
+import { royal as Z, royalDark as _, royalLight as $ } from "./components/ThemePicker/Themes/Royal/Royal.js";
+import { Wizard as or } from "./components/Wizard/Wizard.js";
+import { WizardPanel as tr } from "./components/Wizard/WizardPanel/WizardPanel.js";
+import { JumpList as mr } from "./components/JumpList/JumpList.js";
+export {
+  w as ColumnDefinition,
+  c as Device,
+  t as DynamicForm,
+  m as DynamicFormBuilder,
+  x as FieldBuilder,
+  s as FiveSoulsProvider,
+  B as FlexBox,
+  v as FlexBoxItem,
+  L as FlexBoxItemResizer,
+  z as Grid,
+  S as GridCell,
+  mr as JumpList,
+  P as ResizableGridCell,
+  T as RichText,
+  C as RowDefinition,
+  b as Section,
+  l as SectionBuilder,
+  j as ThemePicker,
+  or as Wizard,
+  tr as WizardPanel,
+  A as cornflower,
+  E as cornflowerDark,
+  H as cornflowerLight,
+  M as crimson,
+  N as crimsonDark,
+  O as crimsonLight,
+  D as deviceContext,
+  U as forest,
+  V as forestDark,
+  X as forestLight,
+  Z as royal,
+  _ as royalDark,
+  $ as royalLight,
+  F as useDevice
+};