@headless-adminapp/fluent 0.0.17-alpha.1

package/form/layout/FormSection/FormSection.js

@@ -0,0 +1,83 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormSection = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+// import { Divider, Flex, Grid, Paper, Stack, Text } from '@mantine/core';
+const react_components_1 = require("@fluentui/react-components");
+const hooks_1 = require("@headless-adminapp/app/hooks");
+const react_1 = require("react");
+const FormSectionColumn_1 = require("./FormSectionColumn");
+const FormSectionLoading_1 = require("./FormSectionLoading");
+function determineItemCount(availableWidth, itemWidth, gap, padding) {
+    return Math.floor((availableWidth + gap - 2 * padding) / (itemWidth + gap));
+}
+const FormSection = ({ title, children, columnCount, fullHeight, labelPosition, noPadding, hideLabel, }) => {
+    // const columnCount = 2;
+    const divRef = (0, react_1.useRef)(null);
+    const divSize = (0, hooks_1.useElementSize)(divRef, 100);
+    const minControlWidth = labelPosition === 'top' ? 200 : 360;
+    const gap = 12;
+    const padding = noPadding ? 0 : 16;
+    let itemCount = determineItemCount(divSize.width, minControlWidth, gap, padding);
+    if (!columnCount) {
+        itemCount = 1;
+    }
+    else if (itemCount > columnCount) {
+        itemCount = columnCount;
+    }
+    if (itemCount < 1) {
+        itemCount = 1;
+    }
+    if (itemCount > 4) {
+        itemCount = 4;
+    }
+    if (itemCount === 3) {
+        itemCount = 2;
+    }
+    const template1 = Array.from({ length: itemCount })
+        .map(() => '1fr')
+        .join(' ');
+    const template2 = '';
+    const minWidthRequired = minControlWidth * (columnCount !== null && columnCount !== void 0 ? columnCount : 1) +
+        gap * ((columnCount !== null && columnCount !== void 0 ? columnCount : 1) - 1) +
+        padding * 2;
+    const template = divSize.width >= minWidthRequired ? template1 : template2;
+    const spanTemplates = {
+        '--section-item-span-1': 'span 1',
+        '--section-item-span-2': 'span 2',
+        '--section-item-span-4': 'span 4',
+        '--section-item-spacer-1': 'block',
+        '--section-item-spacer-2': 'block',
+        '--section-item-spacer-4': 'none',
+    };
+    if (itemCount === 2) {
+        spanTemplates['--section-item-span-4'] = 'span 2';
+        spanTemplates['--section-item-spacer-2'] = 'none';
+    }
+    else if (itemCount === 1) {
+        spanTemplates['--section-item-span-2'] = 'span 1';
+        spanTemplates['--section-item-span-4'] = 'span 1';
+        spanTemplates['--section-item-spacer-1'] = 'none';
+        spanTemplates['--section-item-spacer-2'] = 'none';
+    }
+    // console.log('fsmm', divSize.width, minWidthRequired);
+    return ((0, jsx_runtime_1.jsx)("div", { ref: divRef, style: {
+            boxShadow: react_components_1.tokens.shadow2,
+            borderRadius: react_components_1.tokens.borderRadiusMedium,
+            background: react_components_1.tokens.colorNeutralBackground1,
+        }, children: (0, jsx_runtime_1.jsxs)("div", { children: [!hideLabel && !!title && ((0, jsx_runtime_1.jsxs)(react_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("div", { style: {
+                                display: 'flex',
+                                paddingInline: 16,
+                                paddingBlock: 8,
+                                height: 40,
+                                alignItems: 'center',
+                            }, children: (0, jsx_runtime_1.jsxs)("div", { style: { display: 'flex', alignItems: 'center', width: '100%' }, children: [(0, jsx_runtime_1.jsx)(react_components_1.Body1Strong, { children: title }), (0, jsx_runtime_1.jsx)("div", { style: { flex: 1 } })] }) }), (0, jsx_runtime_1.jsx)(react_components_1.Divider, { style: { opacity: 0.2 } })] })), (0, jsx_runtime_1.jsx)("div", { style: {
+                        flex: 1,
+                        display: 'flex',
+                        flexDirection: 'column',
+                        padding,
+                    }, children: (0, jsx_runtime_1.jsx)("div", { style: Object.assign({ flex: 1, display: 'grid', gridTemplateColumns: template, rowGap: gap, columnGap: gap }, spanTemplates), children: children }) })] }) }));
+};
+exports.FormSection = FormSection;
+exports.FormSection.Column = FormSectionColumn_1.FormSectionColumn;
+exports.FormSection.Loading = FormSectionLoading_1.FormSectionLoading;

package/form/layout/FormSection/FormSectionColumn.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from 'react';
+interface FormSectionColumnProps {
+    span?: number;
+}
+export declare const FormSectionColumn: FC<PropsWithChildren<FormSectionColumnProps>>;
+export {};

package/form/layout/FormSection/FormSectionColumn.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormSectionColumn = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const FormSectionColumn = ({ children, span }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { 
+        // md={span}
+        // xs={12}
+        style: {
+            display: 'flex',
+            flexDirection: 'column',
+            gap: 16,
+        }, children: children }));
+};
+exports.FormSectionColumn = FormSectionColumn;

package/form/layout/FormSection/FormSectionLoading.d.ts

@@ -0,0 +1,6 @@
+import { FC } from 'react';
+interface FormSectionLoadingProps {
+    controlCount: number;
+}
+export declare const FormSectionLoading: FC<FormSectionLoadingProps>;
+export {};

package/form/layout/FormSection/FormSectionLoading.js

@@ -0,0 +1,7 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormSectionLoading = void 0;
+const FormSectionLoading = ({ controlCount, }) => {
+    return null;
+};
+exports.FormSectionLoading = FormSectionLoading;

package/form/layout/FormSection/index.d.ts

@@ -0,0 +1 @@
+export { FormSection } from './FormSection';

package/form/layout/FormSection/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormSection = void 0;
+var FormSection_1 = require("./FormSection");
+Object.defineProperty(exports, "FormSection", { enumerable: true, get: function () { return FormSection_1.FormSection; } });

package/form/layout/FormTab/FormTab.d.ts

@@ -0,0 +1,13 @@
+import { FC, PropsWithChildren } from 'react';
+import { FormTabColumn } from './FormTabColumn';
+interface FormTabProps {
+    value: string;
+    fullHeight?: boolean;
+    columnCount?: number;
+    columnWidths?: Array<number | string | [number, number | string]>;
+    noWrapper?: boolean;
+}
+export declare const FormTab: FC<PropsWithChildren<FormTabProps>> & {
+    Column: typeof FormTabColumn;
+};
+export {};

package/form/layout/FormTab/FormTab.js

@@ -0,0 +1,82 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormTab = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const dataform_1 = require("@headless-adminapp/app/dataform");
+const hooks_1 = require("@headless-adminapp/app/hooks");
+const mutable_1 = require("@headless-adminapp/app/mutable");
+const react_1 = require("react");
+const FormTabColumn_1 = require("./FormTabColumn");
+function determineItemCount(availableWidth, itemWidth, gap, padding) {
+    return Math.floor((availableWidth + gap - 2 * padding) / (itemWidth + gap));
+}
+const FormTab = (props) => {
+    const divRef = (0, react_1.useRef)(null);
+    const activeTab = (0, mutable_1.useContextSelector)(dataform_1.DataFormContext, (state) => state.activeTab);
+    const divSize = (0, hooks_1.useElementSize)(divRef);
+    if (activeTab !== props.value) {
+        return null;
+    }
+    if (props.noWrapper) {
+        return props.children;
+    }
+    return (0, jsx_runtime_1.jsx)(FormTabInternal, Object.assign({}, props));
+};
+exports.FormTab = FormTab;
+/** @todo: unfinished component */
+const FormTabInternal = ({ children, value, fullHeight, columnCount, columnWidths, }) => {
+    const divRef = (0, react_1.useRef)(null);
+    const divSize = (0, hooks_1.useElementSize)(divRef);
+    // console.log('dd', divSize.width);
+    const padding = 0;
+    // const columnCount = 2;
+    const minSectionWidth = 392;
+    const gap = 12;
+    // let itemCount = determineItemCount(
+    //   divSize.width,
+    //   minSectionWidth,
+    //   gap,
+    //   padding
+    // );
+    columnCount = columnCount !== null && columnCount !== void 0 ? columnCount : 1;
+    // if (itemCount > columnCount) {
+    //   itemCount = columnCount;
+    // }
+    // if (itemCount < 1) {
+    //   itemCount = 1;
+    // }
+    // if (itemCount > 4) {
+    //   itemCount = 4;
+    // }
+    const itemCount = columnCount;
+    const template1 = columnWidths
+        ? columnWidths.join(' ')
+        : Array.from({ length: itemCount })
+            .map(() => '1fr')
+            .join(' ');
+    const template2 = '';
+    const minWidthRequired = minSectionWidth * itemCount + gap * (itemCount - 1);
+    // 1 - 1 * minSectionWidth + gap * 0
+    // 2 - 2 * minSectionWidth + gap * 1
+    // 4 - 4 * minSectionWidth + gap * 3
+    // 8 - 8 * minSectionWidth + gap * 7
+    const template = divSize.width >= minWidthRequired ? template1 : template2;
+    return ((0, jsx_runtime_1.jsx)("div", { ref: divRef, style: {
+            display: 'flex',
+            flexDirection: 'column',
+            flex: 1,
+            // marginTop: 12,
+            // padding: 12,
+        }, children: (0, jsx_runtime_1.jsx)("div", { style: {
+                // display: 'flex',
+                // flexWrap: 'wrap',
+                // justifyContent: 'flex-start',
+                // gap: tokens.spacingHorizontalM,
+                // marginInline: -12,
+                display: 'grid',
+                gridRowGap: 12,
+                gridColumnGap: 12,
+                gridTemplateColumns: template,
+            }, children: children }) }));
+};
+exports.FormTab.Column = FormTabColumn_1.FormTabColumn;

package/form/layout/FormTab/FormTabColumn.d.ts

@@ -0,0 +1,6 @@
+import { FC, PropsWithChildren } from 'react';
+interface FormTabColumnProps {
+    span?: number;
+}
+export declare const FormTabColumn: FC<PropsWithChildren<FormTabColumnProps>>;
+export {};

package/form/layout/FormTab/FormTabColumn.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormTabColumn = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const react_components_1 = require("@fluentui/react-components");
+const FormTabColumn = ({ children, span: _span, }) => {
+    return ((0, jsx_runtime_1.jsx)("div", { children: (0, jsx_runtime_1.jsx)("div", { style: {
+                flex: 1,
+                display: 'flex',
+                flexDirection: 'column',
+                width: '100%',
+                gap: react_components_1.tokens.spacingVerticalM,
+            }, children: children }) }));
+};
+exports.FormTabColumn = FormTabColumn;

package/form/layout/FormTab/index.d.ts

@@ -0,0 +1 @@
+export { FormTab } from './FormTab';

package/form/layout/FormTab/index.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormTab = void 0;
+var FormTab_1 = require("./FormTab");
+Object.defineProperty(exports, "FormTab", { enumerable: true, get: function () { return FormTab_1.FormTab; } });

package/form/layout/TabContext.d.ts

@@ -0,0 +1,6 @@
+interface TabContextProps {
+    activeTab: string;
+    setActiveTab: (value: string) => void;
+}
+export declare const TabContext: import("react").Context<TabContextProps | null>;
+export {};

package/form/layout/TabContext.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.TabContext = void 0;
+const react_1 = require("react");
+exports.TabContext = (0, react_1.createContext)(null);

package/form/layout/index.d.ts

@@ -0,0 +1,3 @@
+export { FormBody } from './FormBody';
+export { FormSection } from './FormSection';
+export { FormTab } from './FormTab';

package/form/layout/index.js

@@ -0,0 +1,11 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormTab = exports.FormSection = exports.FormBody = void 0;
+var FormBody_1 = require("./FormBody");
+Object.defineProperty(exports, "FormBody", { enumerable: true, get: function () { return FormBody_1.FormBody; } });
+// export { FormFrame } from './FormFrame';
+// export { FormHeader } from './FormHeader';
+var FormSection_1 = require("./FormSection");
+Object.defineProperty(exports, "FormSection", { enumerable: true, get: function () { return FormSection_1.FormSection; } });
+var FormTab_1 = require("./FormTab");
+Object.defineProperty(exports, "FormTab", { enumerable: true, get: function () { return FormTab_1.FormTab; } });

package/form/types.d.ts

@@ -0,0 +1,74 @@
+import { JSX } from 'react';
+import { CurrencyControlProps } from './controls/CurrencyControl';
+import { DateControlProps } from './controls/DateControl';
+import { DateTimeControlProps } from './controls/DateTimeControl';
+import { EmailControlProps } from './controls/EmailControl';
+import { LookupControlProps } from './controls/LookupControl';
+import { MultiSelectControlProps } from './controls/MultiSelectControl';
+import { MultiSelectLookupControlProps } from './controls/MultiSelectLookupControl';
+import { NumberControlProps } from './controls/NumberControl';
+import { PasswordControlProps } from './controls/PasswordControl';
+import { SelectControlProps } from './controls/SelectControl';
+import { SwitchControlProps } from './controls/SwitchControl';
+import { TelephoneControlProps } from './controls/TelephoneControl';
+import { TextAreaControlProps } from './controls/TextAreaControl';
+import { TextControlProps } from './controls/TextControl';
+import { ControlProps } from './controls/types';
+export interface BaseFormControlProps {
+    error?: boolean;
+}
+export type TextFormControlProps = BaseFormControlProps & TextControlProps & {
+    type: 'text';
+};
+export type TextAreaFormControlProps = BaseFormControlProps & TextAreaControlProps & {
+    type: 'textarea';
+};
+export type TelephoneFormControlProps = BaseFormControlProps & TelephoneControlProps & {
+    type: 'telephone';
+};
+export type EmailFormControlProps = BaseFormControlProps & EmailControlProps & {
+    type: 'email';
+};
+export type PasswordFormControlProps = BaseFormControlProps & PasswordControlProps & {
+    type: 'password';
+};
+export type NumberFormControlProps = BaseFormControlProps & NumberControlProps & {
+    type: 'number';
+};
+export type CurrencyFormControlProps = BaseFormControlProps & CurrencyControlProps & {
+    type: 'currency';
+};
+export type DateFormControlProps = BaseFormControlProps & DateControlProps & {
+    type: 'date';
+};
+export type DateTimeFormControlProps = BaseFormControlProps & DateTimeControlProps & {
+    type: 'datetime';
+};
+export type LookupFormControlProps = BaseFormControlProps & LookupControlProps & {
+    type: 'lookup';
+};
+export type MultiSelectLookupsFormControlProps = BaseFormControlProps & MultiSelectLookupControlProps & {
+    type: 'lookups';
+};
+export type SelectFormControlProps<T> = BaseFormControlProps & SelectControlProps<T> & {
+    type: 'select';
+};
+export type MultiSelectFormControlProps<T> = BaseFormControlProps & MultiSelectControlProps<T> & {
+    type: 'multi-select';
+};
+export type SwitchFormControlProps = BaseFormControlProps & SwitchControlProps & {
+    type: 'switch';
+};
+export type CustomFormControlProps<T> = BaseFormControlProps & ControlProps<T> & {
+    type: 'custom';
+    renderControl: ({ value, onChange, disabled, }: {
+        value: T | null;
+        onChange?: (value: T) => void;
+        disabled?: boolean;
+    }) => JSX.Element;
+};
+export type FormControlProps<T> = {
+    label?: string;
+    helperText?: false | string;
+    required?: boolean;
+} & (CustomFormControlProps<T> | TextFormControlProps | TextAreaFormControlProps | TelephoneFormControlProps | EmailFormControlProps | PasswordFormControlProps | NumberFormControlProps | CurrencyFormControlProps | DateFormControlProps | DateTimeFormControlProps | SelectFormControlProps<T> | MultiSelectFormControlProps<T> | LookupFormControlProps | MultiSelectLookupsFormControlProps | SwitchFormControlProps);

package/form/types.js

@@ -0,0 +1,5 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+// | AttachmentFormControlProps
+// | DateTimeFormControlProps
+// | CheckboxFormControlProps

package/package.json

@@ -0,0 +1,30 @@
+{
+  "name": "@headless-adminapp/fluent",
+  "version": "0.0.17-alpha.1",
+  "description": "",
+  "main": "index.js",
+  "types": "index.d.ts",
+  "publishConfig": {
+    "access": "public",
+    "directory": "dist"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/headless-adminapp/adminapp.git",
+    "directory": "packages/fluent"
+  },
+  "bugs": {
+    "url": "https://github.com/headless-adminapp/adminapp/issues"
+  },
+  "scripts": {
+    "build": "tsc",
+    "ts-check": "tsc --noEmit",
+    "copy-files": "cp package.json dist",
+    "prepublishOnly": "pnpm run build && pnpm run copy-files",
+    "test": "echo \"Error: no test specified\" && exit 1"
+  },
+  "keywords": [],
+  "author": "",
+  "license": "ISC",
+  "gitHead": "86b3b0f6764173ba69e71d81ef613ec570ae4a35"
+}

package/types/index.d.ts

@@ -0,0 +1,32 @@
+declare module '@headless-adminapp/icons/types' {
+    interface IconSet {
+        SignOut: Icon;
+        Close: Icon;
+        Add: Icon;
+        Edit: Icon;
+        Delete: Icon;
+        Refresh: Icon;
+        ArrowLeft: Icon;
+        ArrowRight: Icon;
+        MoreVertical: Icon;
+        MoreHorizontal: Icon;
+        Search: Icon;
+        Mail: Icon;
+        Phone: Icon;
+        Eye: Icon;
+        EyeOff: Icon;
+        Error: Icon;
+        Settings: Icon;
+        Calendar: Icon;
+        EditColumns: Icon;
+        ArrowDown: Icon;
+        ArrowUp: Icon;
+        Filter: Icon;
+        FilterDismiss: Icon;
+        ChevronDown: Icon;
+        ChevronUp: Icon;
+        ListLtr: Icon;
+        ListRtl: Icon;
+    }
+}
+export {};

package/types/index.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });