@qoretechnologies/reqraft 0.0.1

package/__tests__/setup.js

@@ -0,0 +1,8 @@
+global.console = {
+  ...console,
+  // uncomment to ignore a specific log level
+  debug: jest.fn(),
+  info: jest.fn(),
+  // warn: jest.fn(),
+  error: jest.fn(),
+};

package/build-storybook.log

@@ -0,0 +1,28 @@
+yarn run v1.22.21
+$ storybook build --output-dir /var/folders/xj/ffsl9ps93hl3d6bm37h33dkw0000gn/T/chromatic--83502-xKwU3laktthx
+@storybook/cli v8.0.9
+
+info => Cleaning outputDir: ../../../../var/folders/xj/ffsl9ps93hl3d6bm37h33dkw0000gn/T/chromatic--83502-xKwU3laktthx
+info => Loading presets
+info => Building manager..
+info => Manager built (1.84 s)
+info => Building preview..
+info Addon-docs: using MDX3
+info => Using implicit CSS loaders
+info => Using default Webpack5 setup
+info Using tsconfig paths for react-docgen
+WARN asset size limit: The following asset(s) exceed the recommended size limit (244 KiB).
+WARN This can impact web performance.
+WARN Assets: 
+WARN   407.cab165a6.iframe.bundle.js (4.33 MiB)
+WARN   487.5427d68c.iframe.bundle.js (603 KiB)
+WARN entrypoint size limit: The following entrypoint(s) combined asset size exceeds the recommended limit (244 KiB). This can impact web performance.
+WARN Entrypoints:
+WARN   main (4.34 MiB)
+WARN       runtime~main.a1ebc5b5.iframe.bundle.js
+WARN       407.cab165a6.iframe.bundle.js
+WARN       main.95e9d9d8.iframe.bundle.js
+WARN 
+info => Preview built (10 s)
+info => Output directory: /var/folders/xj/ffsl9ps93hl3d6bm37h33dkw0000gn/T/chromatic--83502-xKwU3laktthx
+Done in 14.89s.

package/dist/components/form/string/String.d.ts

@@ -0,0 +1,15 @@
+import { IReqoreControlGroupProps } from '@qoretechnologies/reqore/dist/components/ControlGroup';
+import { IReqoreInputProps } from '@qoretechnologies/reqore/dist/components/Input';
+import { IReqoreTagProps } from '@qoretechnologies/reqore/dist/components/Tag';
+import { ChangeEvent } from 'react';
+export interface IStringFormFieldProps extends Omit<IReqoreInputProps, 'onChange' | 'value'> {
+    sensitive?: boolean;
+    value?: string;
+    label?: IReqoreTagProps['label'];
+    labelPosition?: 'top' | 'left' | 'right' | 'bottom';
+    labelProps?: IReqoreTagProps;
+    wrapperProps?: IReqoreControlGroupProps;
+    onChange?: (value?: string, event?: ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const FormStringField: ({ onChange, wrapperProps, labelProps, label, labelPosition, sensitive, ...rest }: IStringFormFieldProps) => import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=String.d.ts.map

package/dist/components/form/string/String.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"String.d.ts","sourceRoot":"","sources":["../../../../src/components/form/string/String.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,wBAAwB,EAAE,MAAM,uDAAuD,CAAC;AACjG,OAAO,EAAE,iBAAiB,EAAE,MAAM,gDAAgD,CAAC;AACnF,OAAO,EAAE,eAAe,EAAE,MAAM,8CAA8C,CAAC;AAC/E,OAAO,EAAE,WAAW,EAAe,MAAM,OAAO,CAAC;AAEjD,MAAM,WAAW,qBAAsB,SAAQ,IAAI,CAAC,iBAAiB,EAAE,UAAU,GAAG,OAAO,CAAC;IAC1F,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,KAAK,CAAC,EAAE,eAAe,CAAC,OAAO,CAAC,CAAC;IACjC,aAAa,CAAC,EAAE,KAAK,GAAG,MAAM,GAAG,OAAO,GAAG,QAAQ,CAAC;IACpD,UAAU,CAAC,EAAE,eAAe,CAAC;IAC7B,YAAY,CAAC,EAAE,wBAAwB,CAAC;IACxC,QAAQ,CAAC,EAAE,CAAC,KAAK,CAAC,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAC;CAC5E;AAED,eAAO,MAAM,eAAe,qFAQzB,qBAAqB,4CA0CvB,CAAC"}

package/dist/components/form/string/String.js

@@ -0,0 +1,52 @@
+"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;
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormStringField = void 0;
+var jsx_runtime_1 = require("react/jsx-runtime");
+var reqore_1 = require("@qoretechnologies/reqore");
+var react_1 = require("react");
+var FormStringField = function (_a) {
+    var onChange = _a.onChange, wrapperProps = _a.wrapperProps, labelProps = _a.labelProps, label = _a.label, _b = _a.labelPosition, labelPosition = _b === void 0 ? 'top' : _b, sensitive = _a.sensitive, rest = __rest(_a, ["onChange", "wrapperProps", "labelProps", "label", "labelPosition", "sensitive"]);
+    // When input value changes
+    var handleChange = (0, react_1.useCallback)(function (event) {
+        var _a;
+        event.persist();
+        onChange((_a = event.target.value) === null || _a === void 0 ? void 0 : _a.toString(), event);
+    }, []);
+    // Clear the input on reset click
+    var handleClearClick = (0, react_1.useCallback)(function () {
+        onChange('');
+    }, []);
+    return ((0, jsx_runtime_1.jsxs)(reqore_1.ReqoreControlGroup, __assign({ stack: true }, wrapperProps, { vertical: labelPosition === 'bottom' || labelPosition === 'top', children: [(label || label === 0) && (labelPosition === 'top' || labelPosition === 'left') ? ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, __assign({ label: label, fluid: true }, labelProps))) : null, (0, jsx_runtime_1.jsx)(reqore_1.ReqoreInput, __assign({ fluid: true, onFocus: function (event) {
+                    var _a;
+                    event.stopPropagation();
+                    (_a = rest === null || rest === void 0 ? void 0 : rest.onFocus) === null || _a === void 0 ? void 0 : _a.call(rest, event);
+                }, onClick: function (event) {
+                    var _a;
+                    event.stopPropagation();
+                    (_a = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, event);
+                }, onChange: handleChange, type: sensitive ? 'password' : 'text', onClearClick: handleClearClick }, rest)), (label || label === 0) && (labelPosition === 'bottom' || labelPosition === 'right') ? ((0, jsx_runtime_1.jsx)(reqore_1.ReqoreTag, __assign({ label: label, fluid: true }, labelProps))) : null] })));
+};
+exports.FormStringField = FormStringField;
+//# sourceMappingURL=String.js.map

package/dist/components/form/string/String.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"String.js","sourceRoot":"","sources":["../../../../src/components/form/string/String.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAAA,mDAAsF;AAItF,+BAAiD;AAY1C,IAAM,eAAe,GAAG,UAAC,EAQR;IAPtB,IAAA,QAAQ,cAAA,EACR,YAAY,kBAAA,EACZ,UAAU,gBAAA,EACV,KAAK,WAAA,EACL,qBAAqB,EAArB,aAAa,mBAAG,KAAK,KAAA,EACrB,SAAS,eAAA,EACN,IAAI,cAPuB,iFAQ/B,CADQ;IAEP,2BAA2B;IAC3B,IAAM,YAAY,GAAG,IAAA,mBAAW,EAAC,UAAC,KAAoC;;QACpE,KAAK,CAAC,OAAO,EAAE,CAAC;QAEhB,QAAQ,CAAC,MAAA,KAAK,CAAC,MAAM,CAAC,KAAK,0CAAE,QAAQ,EAAE,EAAE,KAAK,CAAC,CAAC;IAClD,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,iCAAiC;IACjC,IAAM,gBAAgB,GAAG,IAAA,mBAAW,EAAC;QACnC,QAAQ,CAAC,EAAE,CAAC,CAAC;IACf,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,OAAO,CACL,wBAAC,2BAAkB,aACjB,KAAK,UACD,YAAY,IAChB,QAAQ,EAAE,aAAa,KAAK,QAAQ,IAAI,aAAa,KAAK,KAAK,aAE9D,CAAC,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,IAAI,CAAC,aAAa,KAAK,KAAK,IAAI,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,CAAC,CACjF,uBAAC,kBAAS,aAAC,KAAK,EAAE,KAAK,EAAE,KAAK,UAAK,UAAU,EAAI,CAClD,CAAC,CAAC,CAAC,IAAI,EACR,uBAAC,oBAAW,aACV,KAAK,QACL,OAAO,EAAE,UAAC,KAAK;;oBACb,KAAK,CAAC,eAAe,EAAE,CAAC;oBACxB,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,qDAAG,KAAK,CAAC,CAAC;gBACzB,CAAC,EACD,OAAO,EAAE,UAAC,KAAK;;oBACb,KAAK,CAAC,eAAe,EAAE,CAAC;oBACxB,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,qDAAG,KAAK,CAAC,CAAC;gBACzB,CAAC,EACD,QAAQ,EAAE,YAAY,EACtB,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM,EACrC,YAAY,EAAE,gBAAgB,IAC1B,IAAI,EACR,EACD,CAAC,KAAK,IAAI,KAAK,KAAK,CAAC,CAAC,IAAI,CAAC,aAAa,KAAK,QAAQ,IAAI,aAAa,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC,CACrF,uBAAC,kBAAS,aAAC,KAAK,EAAE,KAAK,EAAE,KAAK,UAAK,UAAU,EAAI,CAClD,CAAC,CAAC,CAAC,IAAI,KACW,CACtB,CAAC;AACJ,CAAC,CAAC;AAlDW,QAAA,eAAe,mBAkD1B"}

package/dist/components/form/string/String.stories.d.ts

@@ -0,0 +1,10 @@
+import { StoryObj } from '@storybook/react';
+declare const meta: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("./String").IStringFormFieldProps & Record<string, any> & {
+    reqoreOptions: import("@qoretechnologies/reqore/dist/containers/UIProvider").IReqoreOptions;
+}>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Value: Story;
+export declare const WithLabel: Story;
+//# sourceMappingURL=String.stories.d.ts.map

package/dist/components/form/string/String.stories.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"String.stories.d.ts","sourceRoot":"","sources":["../../../../src/components/form/string/String.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAI5C,QAAA,MAAM,IAAI;;EAG4B,CAAC;AAEvC,eAAe,IAAI,CAAC;AACpB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAC;AAEnC,eAAO,MAAM,OAAO,EAAE,KAAU,CAAC;AACjC,eAAO,MAAM,KAAK,EAAE,KAInB,CAAC;AACF,eAAO,MAAM,SAAS,EAAE,KAIvB,CAAC"}

package/dist/components/form/string/String.stories.js

@@ -0,0 +1,21 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.WithLabel = exports.Value = exports.Default = void 0;
+var String_1 = require("./String");
+var meta = {
+    component: String_1.FormStringField,
+    title: 'Components/Form/String',
+};
+exports.default = meta;
+exports.Default = {};
+exports.Value = {
+    args: {
+        value: 'Hello, World!',
+    },
+};
+exports.WithLabel = {
+    args: {
+        label: 'Label',
+    },
+};
+//# sourceMappingURL=String.stories.js.map

package/dist/components/form/string/String.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"String.stories.js","sourceRoot":"","sources":["../../../../src/components/form/string/String.stories.tsx"],"names":[],"mappings":";;;AAEA,mCAA2C;AAE3C,IAAM,IAAI,GAAG;IACX,SAAS,EAAE,wBAAe;IAC1B,KAAK,EAAE,wBAAwB;CACK,CAAC;AAEvC,kBAAe,IAAI,CAAC;AAGP,QAAA,OAAO,GAAU,EAAE,CAAC;AACpB,QAAA,KAAK,GAAU;IAC1B,IAAI,EAAE;QACJ,KAAK,EAAE,eAAe;KACvB;CACF,CAAC;AACW,QAAA,SAAS,GAAU;IAC9B,IAAI,EAAE;QACJ,KAAK,EAAE,OAAO;KACf;CACF,CAAC"}

package/dist/index.d.ts

@@ -0,0 +1,2 @@
+export { FormStringField, IStringFormFieldProps } from './components/form/string/String';
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC"}

package/dist/index.js

@@ -0,0 +1,6 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.FormStringField = void 0;
+var String_1 = require("./components/form/string/String");
+Object.defineProperty(exports, "FormStringField", { enumerable: true, get: function () { return String_1.FormStringField; } });
+//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.tsx"],"names":[],"mappings":";;;AAAA,0DAAyF;AAAhF,yGAAA,eAAe,OAAA"}

package/dist/types.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { IReqoreUIProviderProps } from '@qoretechnologies/reqore/dist/containers/UIProvider';
+import { Meta } from '@storybook/react';
+export type StoryMeta<Component extends keyof JSX.IntrinsicElements | React.JSXElementConstructor<any>, AdditionalArgs = Record<string, any>> = Meta<React.ComponentProps<Component> & AdditionalArgs & {
+    reqoreOptions: IReqoreUIProviderProps['options'];
+}>;
+//# sourceMappingURL=types.d.ts.map

package/dist/types.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,sBAAsB,EAAE,MAAM,qDAAqD,CAAC;AAC7F,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AAExC,MAAM,MAAM,SAAS,CACnB,SAAS,SAAS,MAAM,GAAG,CAAC,iBAAiB,GAAG,KAAK,CAAC,qBAAqB,CAAC,GAAG,CAAC,EAChF,cAAc,GAAG,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,IAClC,IAAI,CACN,KAAK,CAAC,cAAc,CAAC,SAAS,CAAC,GAC7B,cAAc,GAAG;IACf,aAAa,EAAE,sBAAsB,CAAC,SAAS,CAAC,CAAC;CAClD,CACJ,CAAC"}

package/dist/types.js

@@ -0,0 +1,3 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+//# sourceMappingURL=types.js.map

package/dist/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../src/types.ts"],"names":[],"mappings":""}

package/package.json

@@ -0,0 +1,116 @@
+{
+  "name": "@qoretechnologies/reqraft",
+  "version": "0.0.1",
+  "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",
+  "scripts": {
+    "source": "source ~/.profile",
+    "test": "./node_modules/.bin/jest --passWithNoTests",
+    "test:watch": "./node_modules/.bin/jest --watch --passWithNoTests",
+    "test:ci": "./node_modules/.bin/jest --silent --json --outputFile=tests.json --passWithNoTests",
+    "build": "./node_modules/typescript/bin/tsc --project tsconfig.prod.json",
+    "build:test": "./node_modules/typescript/bin/tsc --noEmit",
+    "build:test:prod": "./node_modules/typescript/bin/tsc --project tsconfig.prod.json --noEmit",
+    "lint": "yarn run eslint ./src/",
+    "storybook": "storybook dev -p 6008",
+    "test-storybook": "DEBUG_PRINT_LIMIT=0 test-storybook --url http://localhost:6008",
+    "install-playwright": "npx playwright install --with-deps",
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/qoretechnologies/toolkit-react.git"
+  },
+  "keywords": [
+    "library",
+    "ui",
+    "react",
+    "toolkit",
+    "qore",
+    "qorus"
+  ],
+  "pre-push": [
+    "source",
+    "build:test:prod",
+    "lint",
+    "test"
+  ],
+  "author": {
+    "name": "Qore Technologies"
+  },
+  "license": "ISC",
+  "bugs": {
+    "url": "https://github.com/qoretechnologies/toolkit-react/issues"
+  },
+  "homepage": "https://github.com/qoretechnologies/toolkit-react#readme",
+  "devDependencies": {
+    "@babel/core": "^7.12.10",
+    "@babel/preset-env": "^7.12.11",
+    "@babel/preset-react": "^7.12.10",
+    "@babel/preset-typescript": "^7.12.7",
+    "@chromatic-com/storybook": "^1",
+    "@qoretechnologies/reqore": "^0.41.0",
+    "@storybook/addon-actions": "^8.0.9",
+    "@storybook/addon-essentials": "^8.0.9",
+    "@storybook/addon-interactions": "^8.0.9",
+    "@storybook/addon-links": "^8.0.9",
+    "@storybook/addon-webpack5-compiler-babel": "^3.0.3",
+    "@storybook/manager-api": "^8.0.9",
+    "@storybook/react": "^8.0.9",
+    "@storybook/react-webpack5": "^8.0.9",
+    "@storybook/test": "^8.0.9",
+    "@storybook/test-runner": "^0.17.0",
+    "@storybook/theming": "^8.0.9",
+    "@storybook/types": "^8.0.9",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/jest": "^26.0.19",
+    "@types/lodash": "^4.14.166",
+    "@types/node": "^14.14.14",
+    "@types/react": "^18.3.1",
+    "@types/react-dom": "^18.3.0",
+    "@typescript-eslint/eslint-plugin": "^7.8.0",
+    "@typescript-eslint/parser": "^7.8.0",
+    "babel-jest": "^29.7.0",
+    "babel-loader": "^9.1.3",
+    "chromatic": "^11.3.0",
+    "eslint": "^8.46.0",
+    "eslint-plugin-react": "^7.33.1",
+    "jest": "^29.4.3",
+    "jest-environment-jsdom": "^29.4.3",
+    "jest-github-actions-reporter": "^1.0.2",
+    "npm-cli-login": "^0.1.1",
+    "playwright": "^1.16.3",
+    "pre-push": "^0.1.4",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-intersection-observer": "^9.4.2",
+    "react-test-renderer": "^18.2.0",
+    "storybook": "^8.0.9",
+    "ts-jest": "^29.1.2",
+    "ts-node": "^9.1.1",
+    "typescript": "^5.4.5"
+  },
+  "peerDependencies": {
+    "@qoretechnologies/reqore": "^0.41.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "dependencies": {
+    "classnames": "^2.2.6",
+    "epoch-timeago": "^1.1.9",
+    "lodash": "^4.17.21",
+    "polished": "^4.2.2",
+    "react-use": "^17.4.0",
+    "scheduler": "^0.23.0",
+    "shortid": "^2.2.16",
+    "styled-components": "^5.3.6",
+    "thenby": "^1.3.4",
+    "use-context-selector": "^1.4.1"
+  },
+  "resolutions": {
+    "jackspeak": "2.1.1"
+  }
+}

package/src/components/form/string/String.stories.tsx

@@ -0,0 +1,23 @@
+import { StoryObj } from '@storybook/react';
+import { StoryMeta } from '../../../types';
+import { FormStringField } from './String';
+
+const meta = {
+  component: FormStringField,
+  title: 'Components/Form/String',
+} as StoryMeta<typeof FormStringField>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+export const Value: Story = {
+  args: {
+    value: 'Hello, World!',
+  },
+};
+export const WithLabel: Story = {
+  args: {
+    label: 'Label',
+  },
+};

package/src/components/form/string/String.tsx

@@ -0,0 +1,67 @@
+import { ReqoreControlGroup, ReqoreInput, ReqoreTag } from '@qoretechnologies/reqore';
+import { IReqoreControlGroupProps } from '@qoretechnologies/reqore/dist/components/ControlGroup';
+import { IReqoreInputProps } from '@qoretechnologies/reqore/dist/components/Input';
+import { IReqoreTagProps } from '@qoretechnologies/reqore/dist/components/Tag';
+import { ChangeEvent, useCallback } from 'react';
+
+export interface IStringFormFieldProps extends Omit<IReqoreInputProps, 'onChange' | 'value'> {
+  sensitive?: boolean;
+  value?: string;
+  label?: IReqoreTagProps['label'];
+  labelPosition?: 'top' | 'left' | 'right' | 'bottom';
+  labelProps?: IReqoreTagProps;
+  wrapperProps?: IReqoreControlGroupProps;
+  onChange?: (value?: string, event?: ChangeEvent<HTMLInputElement>) => void;
+}
+
+export const FormStringField = ({
+  onChange,
+  wrapperProps,
+  labelProps,
+  label,
+  labelPosition = 'top',
+  sensitive,
+  ...rest
+}: IStringFormFieldProps) => {
+  // When input value changes
+  const handleChange = useCallback((event: ChangeEvent<HTMLInputElement>): void => {
+    event.persist();
+
+    onChange(event.target.value?.toString(), event);
+  }, []);
+
+  // Clear the input on reset click
+  const handleClearClick = useCallback((): void => {
+    onChange('');
+  }, []);
+
+  return (
+    <ReqoreControlGroup
+      stack
+      {...wrapperProps}
+      vertical={labelPosition === 'bottom' || labelPosition === 'top'}
+    >
+      {(label || label === 0) && (labelPosition === 'top' || labelPosition === 'left') ? (
+        <ReqoreTag label={label} fluid {...labelProps} />
+      ) : null}
+      <ReqoreInput
+        fluid
+        onFocus={(event) => {
+          event.stopPropagation();
+          rest?.onFocus?.(event);
+        }}
+        onClick={(event) => {
+          event.stopPropagation();
+          rest?.onClick?.(event);
+        }}
+        onChange={handleChange}
+        type={sensitive ? 'password' : 'text'}
+        onClearClick={handleClearClick}
+        {...rest}
+      />
+      {(label || label === 0) && (labelPosition === 'bottom' || labelPosition === 'right') ? (
+        <ReqoreTag label={label} fluid {...labelProps} />
+      ) : null}
+    </ReqoreControlGroup>
+  );
+};