@thx/controls 14.0.4 → 15.0.0

package/dist/inputs/CreditCardInput/CreditCardInput.d.ts

@@ -1,7 +1,16 @@
 /// <reference types="react" />
-import { CreditCardCardNameEnum } from '@thx/yup-types';
-import { MaskedInputProps } from '../MaskedInput';
-export interface CreditCardInputType {
-    cardType?: (cardType: CreditCardCardNameEnum | undefined) => void;
+import type { LocalDate } from '@js-joda/core';
+import 'react-credit-cards/es/styles-compiled.css';
+import { InputProps } from 'semantic-ui-react';
+import './styles.css';
+export interface CreditCardData {
+    number?: string;
+    name?: string;
+    cvc?: string;
+    expiry?: LocalDate;
 }
-export declare function CreditCardInput({ cardType, ...rest }: CreditCardInputType & Omit<MaskedInputProps, 'mask'>): JSX.Element;
+export declare type CreditCardInputProps = {
+    value?: CreditCardData;
+    onChange?: (data: CreditCardData) => void;
+} & Pick<InputProps, 'disabled' | 'onBlur'>;
+export declare function CreditCardInput(props: CreditCardInputProps): JSX.Element;

package/dist/inputs/CreditCardInput/CreditCardNumberInput.d.ts

@@ -0,0 +1,8 @@
+/// <reference types="react" />
+import { InputProps } from 'semantic-ui-react';
+interface CreditCardNumberInputProps {
+    onChange?: (value: string | undefined) => void;
+    value?: string;
+}
+export declare function CreditCardNumberInput(props: CreditCardNumberInputProps & Omit<InputProps, 'onChange'>): JSX.Element;
+export {};

package/dist/inputs/CreditCardInput/creditcardinput.stories.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentStory, Meta } from '@storybook/react';
+import { CreditCardInput } from './CreditCardInput';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Main: ComponentStory<typeof CreditCardInput>;

package/dist/inputs/CreditCardInput/index.d.ts

@@ -1,2 +1,2 @@
 export { CreditCardInput } from './CreditCardInput';
-export type { CreditCardInputType } from './CreditCardInput';
+export type { CreditCardInputProps } from './CreditCardInput';

package/dist/inputs/MaskedInput/MaskedInput.d.ts

@@ -1,15 +1,8 @@
 /// <reference types="react" />
-import Inputmask from 'inputmask';
 import { InputProps } from 'semantic-ui-react';
-/**
- * See source code for detailed prop types or {@link https://github.com/RobinHerbots/jquery.inputmask|here} for more info.
- * @typedef {Object} inputmaskPropTypes
- */
-export interface MaskedInputProps {
+import { UseMaskedInputProps } from './useMaskedInput';
+export declare type MaskedInputProps = {
     name?: string;
-    value?: string;
-    onChange?: (value?: string) => void;
     onBlur?: (event: any) => void;
-    mask?: Inputmask.Options;
-}
-export declare function MaskedInput(props: MaskedInputProps & Omit<InputProps, 'onChange'>): JSX.Element;
+} & UseMaskedInputProps & Omit<InputProps, 'onChange'>;
+export declare function MaskedInput(props: MaskedInputProps): JSX.Element;

package/dist/inputs/MaskedInput/index.d.ts

@@ -1,2 +1,3 @@
 export { MaskedInput } from './MaskedInput';
+export { useMaskedInput } from './useMaskedInput';
 export type { MaskedInputProps } from './MaskedInput';

package/dist/inputs/MaskedInput/maskedinput.stories.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentStory, Meta } from '@storybook/react';
+import { MaskedInput } from './MaskedInput';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Main: ComponentStory<typeof MaskedInput>;
+export declare const AutoUnmask: ComponentStory<typeof MaskedInput>;

package/dist/inputs/MaskedInput/useMaskedInput.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import Inputmask from 'inputmask';
+export interface UseMaskedInputProps {
+    value?: string;
+    onChange?: (value?: string) => void;
+    mask?: Inputmask.Options;
+    onSet?: (value?: string) => void;
+}
+export declare function useMaskedInput(props: UseMaskedInputProps): import("react").MutableRefObject<HTMLInputElement | null>;

package/dist/inputs/PhoneInput/PhoneInput.d.ts

@@ -2,5 +2,6 @@
 import { MaskedInputProps } from '../MaskedInput';
 export interface PhoneInputProps {
     extension?: boolean;
+    onChange?: (value?: string) => void;
 }
-export declare function PhoneInput(props: PhoneInputProps & Omit<MaskedInputProps, 'mask'>): JSX.Element;
+export declare function PhoneInput(props: PhoneInputProps & Omit<MaskedInputProps, 'mask' | 'onChange'>): JSX.Element;

package/dist/inputs/PhoneInput/phoneinput.stories.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentStory, Meta } from '@storybook/react';
+import { PhoneInput } from './PhoneInput';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Main: ComponentStory<typeof PhoneInput>;

package/dist/inputs/RadioGroup/radiogroup.stories.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentStory, Meta } from '@storybook/react';
+import { RadioGroup } from './RadioGroup';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Main: ComponentStory<typeof RadioGroup>;
+export declare const WithoutRadioGroup: ComponentStory<typeof RadioGroup>;

package/dist/inputs/Scriptel/withScriptel.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { ScriptelProps } from './Scriptel';
 /**
  * A HoC that provides a connection to a Scriptel Omniscript device.

package/dist/inputs/ScriptelInput/scriptelnput.stories.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentStory, Meta } from '@storybook/react';
+import { ScriptelInput } from './ScriptelInput';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Main: ComponentStory<typeof ScriptelInput>;

package/dist/inputs/SinInput/SinInput.d.ts

@@ -1,6 +1,7 @@
 /// <reference types="react" />
-import { MaskedInputProps } from '../MaskedInput';
-export interface SinInputProps {
-    hasSin: boolean;
+import type { MaskedInputProps } from '../MaskedInput';
+export interface SinInputProps extends Omit<MaskedInputProps, 'mask'> {
+    value?: string;
+    onChange(value?: string): void;
 }
-export declare function SinInput(props: SinInputProps & Omit<MaskedInputProps, 'mask' | 'name'>): JSX.Element;
+export declare function SinInput(props: SinInputProps): JSX.Element;

package/dist/inputs/SinInput/sininput.stories.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentStory, Meta } from '@storybook/react';
+import { SinInput } from './SinInput';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Main: ComponentStory<typeof SinInput>;

package/dist/inputs/TableInput/DropdownCell.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { DropdownProps } from 'semantic-ui-react';
 import type { TableCellProps } from './TableInput';
 export declare function DropdownCell<D extends Record<string, unknown>>(dropdownProps: DropdownProps): (props: TableCellProps<D>) => JSX.Element;

package/dist/inputs/TableInput/HoverCell.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { CellProps, Renderer } from 'react-table';
 interface HoverCellOptions<D extends Record<string, unknown>> {
     Action: Renderer<CellProps<D>>;

package/dist/inputs/TableInput/MoneyCell.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type Money from 'js-money';
 import type { CellProps } from 'react-table';
 interface MoneyCellOptions<D extends Record<string, unknown>> {

package/dist/inputs/TableInput/MoneyEditCell.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type Money from 'js-money';
 import type { TableCellProps } from './TableInput';
 import type { AddRowOnTabIf } from './addRowOnTab';

package/dist/inputs/TableInput/MoneySumFooter.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import type { IdType, TableInstance } from 'react-table';
 interface MoneySumFooterOptions<A extends Record<string, unknown>> {
     id: IdType<A>;

package/dist/inputs/TableInput/StringEditCell.d.ts

@@ -1,4 +1,3 @@
-/// <reference types="react" />
 import { InputProps } from 'semantic-ui-react';
 import type { TableCellProps } from './TableInput';
 import type { AddRowOnTabIf } from './addRowOnTab';

package/dist/inputs/TableInput/main.story.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const Main: {
+    (): JSX.Element;
+    args: {
+        value: undefined;
+    };
+};

package/dist/inputs/TableInput/tableinput.stories.d.ts

@@ -0,0 +1,6 @@
+export { Main } from './main.story';
+export { WithHover } from './withHover.story';
+declare const _default: {
+    title: string;
+};
+export default _default;

package/dist/inputs/TableInput/withHover.story.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+export declare const WithHover: {
+    (): JSX.Element;
+    args: {
+        value: undefined;
+    };
+};

package/dist/money/MoneyCurrencyInput/MoneyCurrencyInput.d.ts

@@ -2,7 +2,7 @@
 import { InputProps } from 'semantic-ui-react';
 import type { MoneyInputProps } from '../MoneyInput';
 export interface MoneyCurrencyInputProps extends MoneyInputProps {
-    currencyOptions?: {
+    currencies?: {
         key: string;
         value: string;
         text: string;

package/dist/money/MoneyCurrencyInput/moneycurrencyinput.stories.d.ts

@@ -0,0 +1,5 @@
+import type { ComponentStory, Meta } from '@storybook/react';
+import { MoneyCurrencyInput } from './MoneyCurrencyInput';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Main: ComponentStory<typeof MoneyCurrencyInput>;

package/dist/money/MoneyInput/MoneyInput.d.ts

@@ -1,12 +1,11 @@
 /// <reference types="react" />
-import type { Currencies, IMoneyObject } from '@thx/money';
-import type Money from 'js-money';
+import Money, { Currency, MoneyObject } from 'js-money';
 import { InputProps } from 'semantic-ui-react';
 export interface MoneyInputProps {
     name?: string;
     onChange?: (value: Money) => void;
-    value?: Money | IMoneyObject;
-    defaultCurrency?: Currencies.Currency;
+    value?: Money | MoneyObject;
+    defaultCurrency?: Currency;
     onBlur?: (ev: any) => void;
     prefix?: string;
     showPrefix?: boolean;

package/dist/money/MoneyInput/moneyinput.stories.d.ts

@@ -0,0 +1,6 @@
+import type { ComponentStory, Meta } from '@storybook/react';
+import { MoneyInput } from './MoneyInput';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Main: ComponentStory<typeof MoneyInput>;
+export declare const MoreDecimals: ComponentStory<typeof MoneyInput>;

package/dist/money/useMoneyInput.d.ts

@@ -1,15 +1,13 @@
-/// <reference types="react" />
-import { Currencies, IMoneyObject } from '@thx/money';
 import Money from 'js-money';
+import { MutableRefObject } from 'react';
 interface UseMoneyInputProps {
-    onChange?: (value: Money) => void;
-    value?: Money | IMoneyObject;
-    defaultCurrency?: Currencies.Currency;
+    value?: Money;
+    onChange?: (value?: Money) => void;
+    onSet?: (value?: Money) => void;
     prefix?: string;
     showPrefix?: boolean;
     wholeNumber?: boolean;
 }
-export declare function useMoneyInput(props: UseMoneyInputProps): {
-    inputElement: import("react").MutableRefObject<HTMLInputElement | null>;
-};
+declare type SetValueFn = (value?: Money) => void;
+export declare function useMoneyInput(props: UseMoneyInputProps): [MutableRefObject<HTMLInputElement | null>, SetValueFn];
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thx/controls",
-  "version": "14.0.4",
+  "version": "15.0.0",
   "description": "A collection of components designed with SemanticUI.",
   "bugs": {
     "url": "https://github.com/thr-consulting/thr-addons/issues"
@@ -18,70 +18,60 @@
     "index.js"
   ],
   "scripts": {
-    "Xtest": "jest",
-    "Xtest:coverage": "../../tools/coverage.sh",
-    "Xtest:watch": "jest --watch",
-    "build": "yarn build:dev && yarn build:prod",
-    "build:dev": "NODE_ENV=development webpack --config webpack.js",
-    "build:prod": "NODE_ENV=production webpack --config webpack.js",
-    "lint": "eslint --cache --ext js,ts src",
-    "lint:fix": "eslint --cache --fix --ext js,ts src",
-    "sort": "npx sort-package-json",
-    "depcheck": "depcheck",
+    "build": "thx build",
+    "build-storybook": "build-storybook",
+    "build:dev": "thx build:dev",
+    "build:prod": "thx build:prod",
+    "clean": "thx clean",
+    "deps": "thx -p *.stories.tsx,*.story.tsx -i style-loader,css-loader deps",
+    "lint": "thx lint",
+    "lint:fix": "thx lint:fix",
+    "sort": "thx sort",
     "storybook": "start-storybook -p 8000 --ci",
-    "ts": "tsc"
+    "ts": "thx ts"
   },
   "eslintConfig": {
     "parserOptions": {
       "project": "./tsconfig-eslint.json"
     }
   },
-  "jest": {
-    "collectCoverageFrom": [
-      "<rootDir>/src/**/*.js",
-      "<rootDir>/src/**/*.ts"
-    ],
-    "coverageDirectory": "<rootDir>/../../docs/assets/coverage/controls",
-    "testPathIgnorePatterns": [
-      "/node_modules/"
-    ],
-    "transform": {
-      "^.+\\.[tj]sx?$": "<rootDir>/../../tools/jest-transform-server.js"
-    }
-  },
   "dependencies": {
-    "@js-joda/core": "^3.0.0",
-    "@thx/date": "^14.0.0",
-    "@thx/money": "^14.0.0",
-    "@thx/yup-types": "^14.0.0",
-    "@types/inputmask": "^5.0.0",
-    "@types/react-datepicker": "^3.1.1",
+    "@js-joda/core": "^4.0.0",
+    "@thx/date": "^15.0.0",
+    "@thx/money": "^15.0.0",
+    "@thx/yup-types": "^15.0.0",
+    "@types/inputmask": "^5.0.1",
+    "@types/react-datepicker": "^4.1.7",
+    "credit-card-type": "^9.1.0",
     "debug": "^4.1.1",
     "eventemitter3": "^4.0.0",
     "flat": "^5.0.0",
-    "formik": "^2.1.4",
-    "inputmask": "^5.0.5",
+    "formik": "^2.2.9",
+    "inputmask": "^5.0.6",
     "js-money": "^0.6.3",
     "lodash": "^4.17.15",
-    "react-datepicker": "^3.1.3",
+    "luhn": "^2.4.1",
+    "react-credit-cards": "^0.8.3",
+    "react-datepicker": "^4.2.1",
     "react-table": "^7.6.3",
-    "use-deep-compare-effect": "^1.3.1"
+    "social-insurance-number": "^0.2.2",
+    "use-deep-compare-effect": "1.4.0"
   },
   "devDependencies": {
-    "css-loader": "^5.0.0",
-    "style-loader": "^2.0.0"
+    "css-loader": "^6.3.0",
+    "style-loader": "^3.3.0"
   },
   "peerDependencies": {
-    "react": "16.x || 17.x",
-    "react-dom": "16.x || 17.x",
+    "react": "17.x",
+    "react-dom": "17.x",
     "react-router-dom": "5.x",
-    "semantic-ui-react": "1.x || 2.x"
+    "semantic-ui-react": "2.x"
   },
   "engines": {
-    "node": ">=12"
+    "node": ">=14"
   },
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "0133db02f7b73a1656e4026c51ee1fea15f76430"
+  "gitHead": "6e448208ce9112a61ee68c5daffbf7d59615cf41"
 }

package/dist/form/TForm/TFormInner.d.ts

@@ -1,33 +0,0 @@
-import type { FormikProps } from 'formik';
-import React from 'react';
-export interface TFormChildrenProps<Values> extends FormikProps<Values> {
-    renderWarnings: () => JSX.Element | null;
-    hasErrors: boolean;
-    hasWarnings: boolean;
-    fieldError: (fieldName: keyof Values | string | number) => boolean;
-    loading?: boolean;
-    errorMarkedCleared: boolean;
-    submitDisabled: boolean;
-    formError: boolean;
-}
-interface ApolloError {
-    message?: string;
-    graphQLErrors?: {
-        message?: string;
-    }[];
-}
-export interface TFormProps<Values> {
-    children?: ((props: TFormChildrenProps<Values>) => React.ReactNode) | React.ReactNode;
-    loading?: boolean;
-    error?: ApolloError;
-    onValidate?: (isValid: boolean) => void;
-    getSubmitFn?: (submitFormFn: () => Promise<void> | Promise<any>) => void;
-    onChange?: (values: Values) => void;
-}
-interface TFormInnerProps<Values> {
-    formikProps: FormikProps<Values>;
-    tFormProps: TFormProps<Values>;
-    children?: ((props: TFormChildrenProps<Values>) => React.ReactNode) | React.ReactNode;
-}
-export declare function TFormInner<Values>(props: TFormInnerProps<Values>): JSX.Element | null;
-export {};