@qoretechnologies/reqraft 0.6.12 → 0.7.0

package/dist/components/form/fields/file/File.d.ts

@@ -0,0 +1,17 @@
+import { IReqoreButtonProps } from '@qoretechnologies/reqore/dist/components/Button';
+import { IReqorePanelProps } from '@qoretechnologies/reqore/dist/components/Panel';
+import { DropzoneOptions } from 'react-dropzone';
+export interface IReqraftFileFormFieldValue {
+    name: string;
+    content: string;
+    size?: number;
+}
+export interface IReqraftFileFormFieldProps extends Omit<IReqorePanelProps, 'onChange'> {
+    value: IReqraftFileFormFieldValue;
+    onChange(value: IReqraftFileFormFieldValue): void;
+    readonly?: boolean;
+    options?: DropzoneOptions;
+    valueButtonProps?: IReqoreButtonProps;
+}
+export declare const ReqraftFileFormField: ({ value, onChange, options, valueButtonProps, ...rest }: IReqraftFileFormFieldProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=File.d.ts.map

package/dist/components/form/fields/file/File.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"File.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/fields/file/File.tsx"],"names":[],"mappings":"AAQA,OAAO,EAAE,kBAAkB,EAAE,MAAM,iDAAiD,CAAC;AACrF,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AAInF,OAAO,EAAU,eAAe,EAAe,MAAM,gBAAgB,CAAC;AAEtE,MAAM,WAAW,0BAA0B;IACzC,IAAI,EAAE,MAAM,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,IAAI,CAAC,EAAE,MAAM,CAAC;CACf;AACD,MAAM,WAAW,0BAA2B,SAAQ,IAAI,CAAC,iBAAiB,EAAE,UAAU,CAAC;IACrF,KAAK,EAAE,0BAA0B,CAAC;IAClC,QAAQ,CAAC,KAAK,EAAE,0BAA0B,GAAG,IAAI,CAAC;IAClD,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,OAAO,CAAC,EAAE,eAAe,CAAC;IAC1B,gBAAgB,CAAC,EAAE,kBAAkB,CAAC;CACvC;AAED,eAAO,MAAM,oBAAoB,4DAM9B,0BAA0B,4CAmG5B,CAAC"}

package/dist/components/form/fields/file/File.js

@@ -0,0 +1,87 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __rest = (this && this.__rest) || function (s, e) {
+    var t = {};
+    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
+        t[p] = s[p];
+    if (s != null && typeof Object.getOwnPropertySymbols === "function")
+        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
+            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
+                t[p[i]] = s[p[i]];
+        }
+    return t;
+};
+var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
+    if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
+        if (ar || !(i in from)) {
+            if (!ar) ar = Array.prototype.slice.call(from, 0, i);
+            ar[i] = from[i];
+        }
+    }
+    return to.concat(ar || Array.prototype.slice.call(from));
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ReqraftFileFormField = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var reqore_1 = require("@qoretechnologies/reqore");
+var filesize_1 = require("filesize");
+var lodash_1 = require("lodash");
+var react_1 = require("react");
+var react_dropzone_1 = require("react-dropzone");
+var ReqraftFileFormField = function (_a) {
+    var value = _a.value, onChange = _a.onChange, _b = _a.options, options = _b === void 0 ? {} : _b, _c = _a.valueButtonProps, valueButtonProps = _c === void 0 ? {} : _c, rest = __rest(_a, ["value", "onChange", "options", "valueButtonProps"]);
+    var contentStyle = (0, react_1.useMemo)(function () { return ({
+        display: 'flex',
+        flexDirection: 'column',
+        justifyContent: 'center',
+        alignItems: 'center',
+    }); }, []);
+    var _d = (0, react_dropzone_1.useDropzone)(__assign({ disabled: rest.disabled || rest.readonly, maxFiles: 1 }, options)), acceptedFiles = _d.acceptedFiles, getRootProps = _d.getRootProps, getInputProps = _d.getInputProps;
+    var extensions = (0, react_1.useMemo)(function () {
+        if (!options.accept) {
+            return [];
+        }
+        return (0, lodash_1.reduce)(options.accept, function (acc, ext) {
+            return __spreadArray(__spreadArray([], acc, true), ext, true);
+        }, []);
+    }, [options.accept]);
+    var renderExtensions = (0, react_1.useCallback)(function (asString) {
+        if ((0, lodash_1.size)(extensions) === 0) {
+            return '';
+        }
+        if (asString) {
+            return extensions.join(', ');
+        }
+        return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreP, { intent: 'muted', size: 'small', children: extensions.join(', ') }));
+    }, [extensions]);
+    (0, react_1.useEffect)(function () {
+        if (acceptedFiles.length === 0) {
+            return;
+        }
+        var reader = new FileReader();
+        reader.onload = function () {
+            onChange({
+                name: acceptedFiles[0].name,
+                content: reader.result,
+                size: acceptedFiles[0].size,
+            });
+        };
+        reader.readAsDataURL(acceptedFiles[0]);
+    }, [acceptedFiles]);
+    if (value) {
+        return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)("input", __assign({}, getInputProps())), (0, jsx_runtime_1.jsx)(reqore_1.ReqoreButton, __assign({ label: value.name, minimal: true, intent: 'info', icon: 'FileLine', rightIcon: 'FileUploadLine', badge: (0, filesize_1.filesize)(value.size || 0), description: "Click here to upload a different ".concat(renderExtensions(true), " file") }, valueButtonProps, getRootProps()))] }));
+    }
+    return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqorePanel, __assign({ contentStyle: contentStyle }, rest, getRootProps(), { size: 'huge', children: [(0, jsx_runtime_1.jsx)("input", __assign({}, getInputProps())), (0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, { vertical: true, horizontalAlign: 'center', children: [(0, jsx_runtime_1.jsxs)(reqore_1.ReqoreH4, { size: 'small', children: [(0, jsx_runtime_1.jsx)(reqore_1.ReqoreIcon, { icon: 'FileAddLine', size: 'small' }), " Click or drop files here to upload"] }), renderExtensions()] })] })));
+};
+exports.ReqraftFileFormField = ReqraftFileFormField;
+//# sourceMappingURL=File.js.map

package/dist/components/form/fields/file/File.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"File.js","sourceRoot":"","sources":["../../../../../src/components/form/fields/file/File.tsx"],"names":[],"mappings":"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"}

package/dist/components/form/fields/long-string/LongString.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"LongString.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/fields/long-string/LongString.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,mDAAmD,CAAC;AACzF,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,MAAM,WAAW,yBAA0B,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC;IACvF,QAAQ,CAAC,EAAE,CACT,KAAK,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,EACrC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,KACzC,IAAI,CAAC;CACX;AAED,eAAO,MAAM,mBAAmB,wCAI7B,yBAAyB,4CAc3B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}
+{"version":3,"file":"LongString.d.ts","sourceRoot":"","sources":["../../../../../src/components/form/fields/long-string/LongString.tsx"],"names":[],"mappings":";AACA,OAAO,EAAE,oBAAoB,EAAE,MAAM,mDAAmD,CAAC;AAEzF,OAAO,EAAE,mBAAmB,EAAE,MAAM,wBAAwB,CAAC;AAE7D,MAAM,WAAW,yBAA0B,SAAQ,IAAI,CAAC,oBAAoB,EAAE,UAAU,CAAC;IACvF,QAAQ,CAAC,EAAE,CACT,KAAK,CAAC,EAAE,mBAAmB,CAAC,QAAQ,CAAC,EACrC,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC,mBAAmB,CAAC,KACzC,IAAI,CAAC;CACX;AAED,eAAO,MAAM,mBAAmB,wCAI7B,yBAAyB,4CAuB3B,CAAC;AAEF,eAAe,mBAAmB,CAAC"}

package/dist/components/form/fields/long-string/LongString.js

@@ -25,12 +25,17 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.LongStringFormField = void 0;
 var jsx_runtime_1 = require("react/jsx-runtime");
 var reqore_1 = require("@qoretechnologies/reqore");
+var react_1 = require("react");
 var LongStringFormField = function (_a) {
     var onChange = _a.onChange, onClearClick = _a.onClearClick, rest = __rest(_a, ["onChange", "onClearClick"]);
-    return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreTextarea, __assign({ scaleWithContent: true, fluid: true, onClearClick: function () {
-            onClearClick === null || onClearClick === void 0 ? void 0 : onClearClick();
-            onChange === null || onChange === void 0 ? void 0 : onChange('');
-        }, onChange: function (event) { return onChange(event.currentTarget.value, event); }, rows: 4 }, rest)));
+    var handleClearClick = (0, react_1.useCallback)(function () {
+        onClearClick === null || onClearClick === void 0 ? void 0 : onClearClick();
+        onChange === null || onChange === void 0 ? void 0 : onChange('');
+    }, [onClearClick, onChange]);
+    var handleChange = (0, react_1.useCallback)(function (event) {
+        onChange === null || onChange === void 0 ? void 0 : onChange(event.currentTarget.value, event);
+    }, [onChange]);
+    return ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreTextarea, __assign({ scaleWithContent: true, fluid: true, onClearClick: handleClearClick, onChange: handleChange, rows: 4 }, rest)));
 };
 exports.LongStringFormField = LongStringFormField;
 exports.default = exports.LongStringFormField;

package/dist/components/form/fields/long-string/LongString.js.map

@@ -1 +1 @@
-{"version":3,"file":"LongString.js","sourceRoot":"","sources":["../../../../../src/components/form/fields/long-string/LongString.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAA0D;AAWnD,IAAM,mBAAmB,GAAG,UAAC,EAIR;IAH1B,IAAA,QAAQ,cAAA,EACR,YAAY,kBAAA,EACT,IAAI,cAH2B,4BAInC,CADQ;IAEP,OAAO,CACL,uBAAC,uBAAc,aACb,gBAAgB,QAChB,KAAK,QACL,YAAY,EAAE;YACZ,YAAY,aAAZ,YAAY,uBAAZ,YAAY,EAAI,CAAC;YACjB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,CAAC,CAAC;QACjB,CAAC,EACD,QAAQ,EAAE,UAAC,KAAK,IAAK,OAAA,QAAQ,CAAC,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,EAA1C,CAA0C,EAC/D,IAAI,EAAE,CAAC,IACH,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CAAC;AAlBW,QAAA,mBAAmB,uBAkB9B;AAEF,kBAAe,2BAAmB,CAAC"}
+{"version":3,"file":"LongString.js","sourceRoot":"","sources":["../../../../../src/components/form/fields/long-string/LongString.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAA0D;AAE1D,+BAAoC;AAU7B,IAAM,mBAAmB,GAAG,UAAC,EAIR;IAH1B,IAAA,QAAQ,cAAA,EACR,YAAY,kBAAA,EACT,IAAI,cAH2B,4BAInC,CADQ;IAEP,IAAM,gBAAgB,GAAG,IAAA,mBAAW,EAAC;QACnC,YAAY,aAAZ,YAAY,uBAAZ,YAAY,EAAI,CAAC;QACjB,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,EAAE,CAAC,CAAC;IACjB,CAAC,EAAE,CAAC,YAAY,EAAE,QAAQ,CAAC,CAAC,CAAC;IAE7B,IAAM,YAAY,GAAG,IAAA,mBAAW,EAC9B,UAAC,KAA6C;QAC5C,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAG,KAAK,CAAC,aAAa,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC;IAC/C,CAAC,EACD,CAAC,QAAQ,CAAC,CACX,CAAC;IAEF,OAAO,CACL,uBAAC,uBAAc,aACb,gBAAgB,QAChB,KAAK,QACL,YAAY,EAAE,gBAAgB,EAC9B,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAE,CAAC,IACH,IAAI,EACR,CACH,CAAC;AACJ,CAAC,CAAC;AA3BW,QAAA,mBAAmB,uBA2B9B;AAEF,kBAAe,2BAAmB,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@qoretechnologies/reqraft",
-  "version": "0.6.12",
+  "version": "0.7.0",
   "description": "ReQraft is a collection of React components and hooks that are used across Qore Technologies' products made using the ReQore component library from Qore.",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -111,10 +111,12 @@
     "classnames": "^2.2.6",
     "cronstrue": "^2.50.0",
     "epoch-timeago": "^1.1.9",
+    "filesize": "^10.1.6",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
     "polished": "^4.2.2",
     "react-color": "^2.19.3",
+    "react-dropzone": "^14.3.5",
     "react-markdown": "^9.0.1",
     "react-use": "^17.4.0",
     "scheduler": "^0.23.0",

package/src/components/form/fields/file/File.stories.tsx

@@ -0,0 +1,60 @@
+import { StoryObj } from '@storybook/react';
+import { fn } from '@storybook/test';
+import { useState } from 'react';
+
+import { StoryMeta } from '../../../../types';
+import { ReqraftFileFormField } from './File';
+
+const meta = {
+  component: ReqraftFileFormField,
+  title: 'Components/Form/File',
+  args: {
+    onChange: fn(),
+  },
+  render(args) {
+    const [value, setValue] = useState(args.value);
+    return (
+      <ReqraftFileFormField
+        {...args}
+        value={value}
+        onChange={(value) => {
+          args.onChange?.(value);
+          setValue(value);
+        }}
+      />
+    );
+  },
+} as StoryMeta<typeof ReqraftFileFormField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const WithSpecifiedExtensions: Story = {
+  args: {
+    options: {
+      accept: {
+        'image/png': ['.png'],
+        'image/jpeg': ['.jpg', '.jpeg'],
+        'application/pdf': ['.pdf'],
+      },
+    },
+  },
+};
+
+export const WithValue: Story = {
+  args: {
+    options: {
+      accept: {
+        'image/png': ['.png'],
+        'image/jpeg': ['.jpg', '.jpeg'],
+        'application/pdf': ['.pdf'],
+      },
+    },
+    value: {
+      name: 'MyFile.pdf',
+      content: 'test',
+      size: 28736,
+    },
+  },
+};

package/src/components/form/fields/file/File.tsx

@@ -0,0 +1,134 @@
+import {
+  ReqoreButton,
+  ReqoreControlGroup,
+  ReqoreH4,
+  ReqoreIcon,
+  ReqoreP,
+  ReqorePanel,
+} from '@qoretechnologies/reqore';
+import { IReqoreButtonProps } from '@qoretechnologies/reqore/dist/components/Button';
+import { IReqorePanelProps } from '@qoretechnologies/reqore/dist/components/Panel';
+import { filesize } from 'filesize';
+import { reduce, size } from 'lodash';
+import { useCallback, useEffect, useMemo } from 'react';
+import { Accept, DropzoneOptions, useDropzone } from 'react-dropzone';
+
+export interface IReqraftFileFormFieldValue {
+  name: string;
+  content: string;
+  size?: number;
+}
+export interface IReqraftFileFormFieldProps extends Omit<IReqorePanelProps, 'onChange'> {
+  value: IReqraftFileFormFieldValue;
+  onChange(value: IReqraftFileFormFieldValue): void;
+  readonly?: boolean;
+  options?: DropzoneOptions;
+  valueButtonProps?: IReqoreButtonProps;
+}
+
+export const ReqraftFileFormField = ({
+  value,
+  onChange,
+  options = {},
+  valueButtonProps = {},
+  ...rest
+}: IReqraftFileFormFieldProps) => {
+  const contentStyle: React.CSSProperties = useMemo(
+    (): React.CSSProperties => ({
+      display: 'flex',
+      flexDirection: 'column',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }),
+    []
+  );
+
+  const { acceptedFiles, getRootProps, getInputProps } = useDropzone({
+    disabled: rest.disabled || rest.readonly,
+    maxFiles: 1,
+
+    ...options,
+  });
+
+  const extensions = useMemo(() => {
+    if (!options.accept) {
+      return [];
+    }
+
+    return reduce<Accept, string[]>(
+      options.accept,
+      (acc, ext) => {
+        return [...acc, ...ext];
+      },
+      []
+    );
+  }, [options.accept]);
+
+  const renderExtensions = useCallback(
+    (asString?: boolean) => {
+      if (size(extensions) === 0) {
+        return '';
+      }
+
+      if (asString) {
+        return extensions.join(', ');
+      }
+
+      return (
+        <ReqoreP intent='muted' size='small'>
+          {extensions.join(', ')}
+        </ReqoreP>
+      );
+    },
+    [extensions]
+  );
+
+  useEffect(() => {
+    if (acceptedFiles.length === 0) {
+      return;
+    }
+
+    const reader = new FileReader();
+
+    reader.onload = () => {
+      onChange({
+        name: acceptedFiles[0].name,
+        content: reader.result as string,
+        size: acceptedFiles[0].size,
+      });
+    };
+
+    reader.readAsDataURL(acceptedFiles[0]);
+  }, [acceptedFiles]);
+
+  if (value) {
+    return (
+      <>
+        <input {...getInputProps()} />
+        <ReqoreButton
+          label={value.name}
+          minimal
+          intent='info'
+          icon='FileLine'
+          rightIcon='FileUploadLine'
+          badge={filesize(value.size || 0)}
+          description={`Click here to upload a different ${renderExtensions(true)} file`}
+          {...valueButtonProps}
+          {...getRootProps()}
+        />
+      </>
+    );
+  }
+
+  return (
+    <ReqorePanel contentStyle={contentStyle} {...rest} {...getRootProps()} size='huge'>
+      <input {...getInputProps()} />
+      <ReqoreControlGroup vertical horizontalAlign='center'>
+        <ReqoreH4 size='small'>
+          <ReqoreIcon icon='FileAddLine' size='small' /> Click or drop files here to upload
+        </ReqoreH4>
+        {renderExtensions()}
+      </ReqoreControlGroup>
+    </ReqorePanel>
+  );
+};

package/src/components/form/fields/long-string/LongString.tsx

@@ -1,5 +1,6 @@
 import { ReqoreTextarea } from '@qoretechnologies/reqore';
 import { IReqoreTextareaProps } from '@qoretechnologies/reqore/dist/components/Textarea';
+import { useCallback } from 'react';
 import { TFormFieldValueType } from '../../../../types/Form';
 
 export interface ILongStringFormFieldProps extends Omit<IReqoreTextareaProps, 'onChange'> {
@@ -14,15 +15,24 @@ export const LongStringFormField = ({
   onClearClick,
   ...rest
 }: ILongStringFormFieldProps) => {
+  const handleClearClick = useCallback(() => {
+    onClearClick?.();
+    onChange?.('');
+  }, [onClearClick, onChange]);
+
+  const handleChange = useCallback(
+    (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+      onChange?.(event.currentTarget.value, event);
+    },
+    [onChange]
+  );
+
   return (
     <ReqoreTextarea
       scaleWithContent
       fluid
-      onClearClick={() => {
-        onClearClick?.();
-        onChange?.('');
-      }}
-      onChange={(event) => onChange(event.currentTarget.value, event)}
+      onClearClick={handleClearClick}
+      onChange={handleChange}
       rows={4}
       {...rest}
     />