jamespot-react-components 1.0.0

package/externals.d.ts

@@ -0,0 +1,5 @@
+declare module '*.scss';
+declare module '*.css';
+declare module '*.json';
+declare module 'react-intl-translations-manager';
+declare module 'react-quill';

package/externals.json

@@ -0,0 +1,15 @@
+{
+    "jamespot-user-api": "jamespotUserApi",
+    "moment": "moment",
+    "react": "React",
+    "react-dom": "ReactDOM",
+    "react-redux": "reactRedux",
+    "react-select": "reactSelect",
+    "react-hook-form": "reactHookForm",
+    "redux": "redux",
+    "redux-form": "reduxForm",
+    "react-intl": "reactIntl",
+    "styled-components": "styledComponents",
+    "react-dnd": "reactDnd",
+    "react-dnd-html5-backend": "reactDndHtml5Backend"
+}

package/jest.config.js

@@ -0,0 +1,16 @@
+// eslint-disable-next-line no-undef
+module.exports = {
+    roots: ['<rootDir>'],
+    testMatch: ['**/*.test.(ts|tsx)'],
+    testEnvironment: 'jsdom',
+    transform: {
+        '^.+\\.(ts|tsx)?$': 'ts-jest',
+        '^.+\\.svg$': '<rootDir>/src/jest/svgTransform.js',
+    },
+    setupFilesAfterEnv: ['<rootDir>/jest.setup.ts'],
+    moduleDirectories: ['src', 'node_modules'],
+    moduleNameMapper: {
+        '\\.(css|less|scss)$': 'identity-obj-proxy',
+    },
+    cacheDirectory: './node_modules/.cache/jest',
+};

package/jest.setup.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom';

package/package.json

@@ -0,0 +1,133 @@
+{
+    "name": "jamespot-react-components",
+    "version": "1.0.0",
+    "description": "",
+    "main": "./build/jamespot-react-components.js",
+    "types": "./build/src/index.d.ts",
+    "scripts": {
+        "dev": "webpack --env NODE_ENV=development",
+        "local": "webpack --env NODE_ENV=development WATCH=true",
+        "build": "webpack --env NODE_ENV=production",
+        "build-theme": "webpack --env NODE_ENV=theme",
+        "build-dev-vm": "webpack --env NODE_ENV=development NODE_RUN=VM",
+        "watch-dev-vm": "webpack --env NODE_ENV=development NODE_RUN=VM WATCH=true",
+        "prettier": "npx prettier --write ./",
+        "lint": "npx eslint ./src/ . --ext .ts,.tsx,.js",
+        "lint:fix": "npx eslint ./src/ . --ext .ts,.tsx,.js --fix ",
+        "lint:ci": "npx eslint --output-file eslint_report.json --format json . --ext .ts,.tsx,.js",
+        "test": "jest --updateSnapshot",
+        "test:watch": "npm run test -- --watch --verbose",
+        "storybook": "start-storybook -p 6006",
+        "storybook-no-cache": "cross-env NODE_ENV=development STORYBOOK_MODE=true PUBLIC_PATH='' start-storybook -s ./.storybook/assets/ -c .storybook -p 3022 --no-manager-cache",
+        "build-storybook": "build-storybook",
+        "prepare": "npm run build && node -e \"if(require('fs').existsSync('.git')){process.exit(1)}\" || husky install"
+    },
+    "keywords": [],
+    "author": "",
+    "devDependencies": {
+        "@babel/core": "^7.12.8",
+        "@babel/plugin-proposal-class-properties": "^7.12.1",
+        "@babel/plugin-proposal-object-rest-spread": "^7.12.1",
+        "@babel/preset-env": "^7.12.7",
+        "@babel/preset-react": "^7.12.7",
+        "@babel/preset-typescript": "^7.12.7",
+        "@storybook/addon-actions": "^6.4.0",
+        "@storybook/addon-docs": "^6.4.0",
+        "@storybook/addon-essentials": "^6.4.0",
+        "@storybook/addon-links": "^6.4.0",
+        "@storybook/builder-webpack5": "^6.4.0",
+        "@storybook/manager-webpack5": "^6.4.0",
+        "@storybook/react": "^6.4.0",
+        "@testing-library/dom": "^8.11.0",
+        "@testing-library/jest-dom": "^5.12.0",
+        "@testing-library/react": "^12.1.2",
+        "@testing-library/react-hooks": "^5.1.2",
+        "@testing-library/user-event": "^13.1.8",
+        "@types/chroma-js": "^2.1.3",
+        "@types/classnames": "^2.2.10",
+        "@types/jest": "^27.0.2",
+        "@types/react": "^17.0.2",
+        "@types/react-dom": "^17.0.2",
+        "@types/react-redux": "^7.1.9",
+        "@types/react-select": "^3.1.2",
+        "@types/react-slick": "^0.23.4",
+        "@types/react-table": "^7.7.3",
+        "@types/react-test-renderer": "^17.0.1",
+        "@types/redux-form": "^8.2.7",
+        "@types/styled-components": "^5.1.4",
+        "@types/uuid": "^8.3.1",
+        "@typescript-eslint/eslint-plugin": "^5.4.0",
+        "@typescript-eslint/parser": "^5.4.0",
+        "babel-jest": "^27.3.1",
+        "babel-loader": "^8.2.1",
+        "babel-plugin-react-intl": "^8.1.1",
+        "babel-plugin-styled-components": "^1.12.0",
+        "cross-env": "^6.0.3",
+        "css-loader": "^4.2.1",
+        "eslint": "^8.2.0",
+        "eslint-config-prettier": "^8.3.0",
+        "file-loader": "^6.2.0",
+        "html-webpack-plugin": "^5.5.0",
+        "husky": "^7.0.4",
+        "identity-obj-proxy": "^3.0.0",
+        "jest": "^27.3.1",
+        "jest-styled-components": "^7.0.3",
+        "lint-staged": "^12.0.2",
+        "prettier": "^2.4.1",
+        "react-test-renderer": "^17.0.1",
+        "source-map-loader": "^1.0.1",
+        "style-loader": "^1.2.1",
+        "ts-jest": "^27.0.7",
+        "ts-loader": "^8.0.2",
+        "typescript": "^4.4.4",
+        "webpack": "^5.62.1",
+        "webpack-cli": "^4.9.1",
+        "webpack-dev-server": "^4.4.0"
+    },
+    "dependencies": {
+        "@quickbaseoss/babel-plugin-styled-components-css-namespace": "^1.0.1",
+        "@tiptap/extension-color": "^2.0.0-beta.8",
+        "@tiptap/extension-link": "^2.0.0-beta.28",
+        "@tiptap/extension-text-align": "^2.0.0-beta.28",
+        "@tiptap/extension-text-style": "^2.0.0-beta.22",
+        "@tiptap/react": "^2.0.0-beta.93",
+        "@tiptap/starter-kit": "^2.0.0-beta.140",
+        "@types/redux-logger": "^3.0.8",
+        "chroma-js": "^2.1.1",
+        "classnames": "^2.3.1",
+        "jamespot-user-api": "file:../jamespot-user-api",
+        "moment": "^2.29.1",
+        "react": "^17.0.2",
+        "react-dnd": "^14.0.4",
+        "react-dnd-html5-backend": "^14.0.2",
+        "react-dom": "^17.0.2",
+        "react-hook-form": "^7.25.0",
+        "react-intl": "^5.8.6",
+        "react-quill": "^1.3.5",
+        "react-redux": "^7.2.3",
+        "react-select": "^3.2.0",
+        "react-slick": "^0.28.1",
+        "react-table": "^7.7.0",
+        "react-tooltip": "^4.2.21",
+        "redux": "^4.0.5",
+        "redux-form": "^8.3.6",
+        "redux-logger": "^3.0.6",
+        "slick-carousel": "^1.8.1",
+        "styled-components": "^5.2.1",
+        "styled-reset": "^4.2.3",
+        "uuid": "^8.3.2"
+    },
+    "peerDependencies": {
+        "react": "^17.x",
+        "redux-form": "^8.x"
+    },
+    "lint-staged": {
+        "*.{js,jsx,ts,tsx}": [
+            "npm run lint:fix",
+            "npm run prettier"
+        ],
+        "*.{json,md}": [
+            "npm run prettier"
+        ]
+    }
+}

package/src/assets/check.svg

@@ -0,0 +1,4 @@
+<svg width="12" height="9" viewBox="0 0 12 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 3.7648L4.45955 7.3191L11 1" stroke="#1ED492" stroke-width="1.5"/>
+<path d="M1 3.7648L4.45955 7.3191L11 1" stroke="black" stroke-opacity="0.1" stroke-width="1.5"/>
+</svg>

package/src/assets/error.svg

@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 0.5C3.85685 0.5 0.5 3.85685 0.5 8C0.5 12.1431 3.85685 15.5 8 15.5C12.1431 15.5 15.5 12.1431 15.5 8C15.5 3.85685 12.1431 0.5 8 0.5ZM11.6774 9.96875C11.8196 10.1109 11.8196 10.3407 11.6774 10.4829L10.4798 11.6774C10.3377 11.8196 10.1079 11.8196 9.96573 11.6774L8 9.69355L6.03125 11.6774C5.88911 11.8196 5.65927 11.8196 5.51714 11.6774L4.32258 10.4798C4.18044 10.3377 4.18044 10.1079 4.32258 9.96573L6.30645 8L4.32258 6.03125C4.18044 5.88911 4.18044 5.65927 4.32258 5.51714L5.52016 4.31956C5.6623 4.17742 5.89214 4.17742 6.03427 4.31956L8 6.30645L9.96875 4.32258C10.1109 4.18044 10.3407 4.18044 10.4829 4.32258L11.6804 5.52016C11.8226 5.6623 11.8226 5.89214 11.6804 6.03427L9.69355 8L11.6774 9.96875Z" fill="white"/>
+</svg>

package/src/assets/x.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="#FF2653" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x"><line x1="18" y1="6" x2="6" y2="18"></line><line x1="6" y1="6" x2="18" y2="18"></line></svg>

package/src/components/Common/DashedFocusBorder.tsx

@@ -0,0 +1,20 @@
+import { css } from 'styled-components';
+
+/**
+ * Be careful, this is not typed
+ * The HTML element this styled is applied to should be selectable and relative (position: relative)
+ * @props dashedBorderRadius border radius of the dashed border
+ * @props dashedInset inset of the dashed border
+ */
+export const DashedFocusBorder = css<any>`
+    :focus-visible:after {
+        position: absolute;
+        content: ' ';
+        border-radius: ${(props) => props.dashedBorderRadius || '3px'};
+        top: ${(props) => props.dashedInset || '2px'};
+        right: ${(props) => props.dashedInset || '2px'};
+        bottom: ${(props) => props.dashedInset || '2px'};
+        left: ${(props) => props.dashedInset || '2px'};
+        border: 1px dashed ${(props) => props.theme.color.grey4};
+    }
+`;

package/src/components/Common/JRCConditionalWrapper.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+export interface JRCConditionalWrapperProps {
+    condition: boolean;
+    wrapper: (children: React.ReactNode) => React.ReactElement;
+    wrapperFalse?: (children: React.ReactNode) => React.ReactElement;
+    children?: React.ReactElement;
+}
+
+export const JRCConditionalWrapper = ({
+    condition,
+    wrapper,
+    wrapperFalse,
+    children,
+}: JRCConditionalWrapperProps): React.ReactElement =>
+    // FIXME TYPESCRIPT-STRICT
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    condition ? wrapper(children) : wrapperFalse ? wrapperFalse(children) : children;

package/src/components/Form/Common/ClickAwayListener.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+
+export type MouseEvents = 'click' | 'mousedown' | 'mouseup';
+export type TouchEvents = 'touchstart' | 'touchend';
+
+export interface ClickAwayListenerProps extends React.HTMLAttributes<HTMLElement> {
+    onClickAway: (event: MouseEvent | TouchEvent) => void;
+    mouseEvent?: MouseEvents;
+    touchEvent?: TouchEvents;
+    as?: React.ElementType;
+}
+
+/**
+ * Wrap a component with a <div/> (or another component provided as the 'as' props).
+ * Listen to outer mouse & touch events and call the onClickAway callback
+ */
+export const ClickAwayListener = ({
+    as = 'div',
+    onClickAway,
+    mouseEvent = 'click',
+    touchEvent = 'touchend',
+    ...props
+}: ClickAwayListenerProps) => {
+    const node = React.useRef<HTMLElement>(null);
+    React.useEffect(() => {
+        const handleEvents = (event: MouseEvent | TouchEvent): void => {
+            if (node.current && node.current.contains(event.target as Node)) {
+                return;
+            }
+            onClickAway(event);
+        };
+        document.addEventListener(mouseEvent, handleEvents);
+        document.addEventListener(touchEvent, handleEvents);
+        return () => {
+            document.removeEventListener(mouseEvent, handleEvents);
+            document.removeEventListener(touchEvent, handleEvents);
+        };
+    }, [mouseEvent, onClickAway, touchEvent]);
+
+    return React.createElement(as, { ref: node, ...props });
+};

package/src/components/Form/Common/FormDescription.tsx

@@ -0,0 +1,9 @@
+import * as React from 'react';
+
+export interface FormDescriptionProps {
+    description: string;
+}
+
+const FormDescription = (props: FormDescriptionProps) => <p>{props.description}</p>;
+
+export default FormDescription;

package/src/components/Form/Common/FormHelper.tsx

@@ -0,0 +1,30 @@
+import * as React from 'react';
+import JRCIcon from '../../JRCIcon/JRCIcon';
+import JRCTooltip, { JRCTooltipProps } from '../../JRCTooltip/JRCTooltip';
+import styled from 'styled-components';
+import { Colors } from 'styles/theme';
+
+/**
+ * interface HelperProps props of the Form Helper Icon
+ * @member tooltip, content of the tooltip (required)
+ * @member color, icon helper color (should be grey3 when unfocused, yellow when focused)
+ */
+export type HelperProps = {
+    tooltip: Omit<JRCTooltipProps, 'children'>;
+    color: Colors;
+    size?: number;
+};
+
+const JRCHelperStyled = styled.span`
+    cursor: pointer;
+    margin-left: 5px;
+`;
+const FormHelper = (props: HelperProps) => (
+    <JRCHelperStyled>
+        <JRCTooltip {...props.tooltip}>
+            <JRCIcon name="icon-question-circle-o" size={props.size} color={props.color} />
+        </JRCTooltip>
+    </JRCHelperStyled>
+);
+
+export default FormHelper;

package/src/components/Form/Common/FormLabel.tsx

@@ -0,0 +1,38 @@
+import * as React from 'react';
+import styled from 'styled-components';
+
+/**
+ * Input label or legend
+ *
+ * @extends React.ComponentPropsWithoutRef<'label'> @see React.ComponentPropsWithoutRef
+ * @extends React.ComponentPropsWithoutRef<'legend'> @see React.ComponentPropsWithoutRef
+ *
+ * @member htmlFor, html property for [required if not a legend]
+ * @member labelIsLegend if the label should be a <legend> instead of a <label> (in case of a multi-input usually)
+ */
+export interface JRCFormLabelProps extends React.ComponentPropsWithoutRef<'label'> {
+    htmlFor?: string;
+    labelIsLegend?: boolean;
+}
+
+const StyledLabel = styled.label`
+    margin-left: 2px;
+    margin-right: 2px;
+    margin-bottom: 0px;
+    font-size: 14px;
+`;
+
+const StyledLegend = styled.legend`
+    margin-left: 2px;
+    margin-right: 2px;
+    margin-bottom: 0px;
+    font-size: 14px;
+`;
+
+const FormLabel = (props: JRCFormLabelProps) =>
+    props.labelIsLegend ? (
+        <StyledLegend>{props.children}</StyledLegend>
+    ) : (
+        <StyledLabel htmlFor={props.htmlFor}>{props.children}</StyledLabel>
+    );
+export default FormLabel;

package/src/components/Form/Common/FormMessageFeedback.tsx

@@ -0,0 +1,52 @@
+import * as React from 'react';
+import styled, { keyframes } from 'styled-components';
+
+/**
+ * Props for an input error message
+ *
+ * @member error message specifying an error
+ * @member warning message specifying a warning
+ * @member valid message specifying a validation
+ */
+export interface FormMessageFeedbackProps {
+    error: string;
+    warning: string;
+    valid?: string;
+}
+
+const upDownAnnimatioon = keyframes`
+    0% { transform: translateY(0); }
+    50% { transform: translateY(-4px); }
+    100% { transform: translateY(0); }`;
+
+const StyledMessage = styled.div`
+    display: flex;
+    div {
+        font-size: 12px;
+        text-align: left;
+        align-self: flex-start;
+        margin-left: 2px;
+        animation: ${upDownAnnimatioon} 0.2s 2 normal forwards;
+    }
+`;
+
+export const StyledError = styled.div`
+    color: ${(props) => props.theme.color.orange};
+`;
+export const StyledWarning = styled.div`
+    color: ${(props) => props.theme.color.orange};
+`;
+
+export const StyledValid = styled.div`
+    color: ${(props) => props.theme.color.green};
+`;
+
+const FormMessageFeedback = (props: FormMessageFeedbackProps) => (
+    <StyledMessage>
+        {props.error ? <StyledError>{props.error}</StyledError> : null}
+        {props.warning ? <StyledWarning>{props.warning}</StyledWarning> : null}
+        {props.valid ? <StyledValid>{props.valid}</StyledValid> : null}
+    </StyledMessage>
+);
+
+export default FormMessageFeedback;

package/src/components/Form/Common/types.ts

@@ -0,0 +1,31 @@
+/**
+ * Default props for a checkbox option or a select option
+ * @member value set in the redux store
+ * @member label displayed label
+ */
+export interface JRCValueLabelProps {
+    value: string;
+    label: string;
+}
+
+/**
+ * Type with one of (tuple type - id) and (uri) required. If both are passed, only the uri will be used
+ */
+export type UriOrTypeId = Partial<TypeId> & Partial<Uri>;
+
+/**
+ * Interface representing the parameters used to make a content/record uri
+ * @member type - type of the image (ex: user, fileArticle, spot, diffgroup, etc.)
+ * @member recordId - id of the record
+ */
+export interface TypeId {
+    type: string;
+    recordId: string | number;
+}
+
+/**
+ * @member uri - uri of the record
+ */
+export interface Uri {
+    uri: string;
+}

package/src/components/Form/Input/Common/JRCFormErrors.tsx

@@ -0,0 +1,40 @@
+import * as React from 'react';
+import { FieldErrors } from 'react-hook-form/dist/types/errors';
+import { FieldValues } from 'react-hook-form/dist/types';
+import { JRCTypography } from '../../../JRCTypography/JRCTypography';
+import styled from 'styled-components';
+
+const Error = styled(JRCTypography).attrs(() => ({ size: 's' }))`
+    color: ${(props) => props.theme.color.orange};
+`;
+
+/**
+ * Component that displays a list of input error if any.
+ * The required message is not displayed within this component.
+ * @param error react-hook-form object
+ */
+export const JRCFormErrors = <TFieldValues extends FieldValues = FieldValues>({
+    error,
+}: {
+    error: FieldErrors<TFieldValues>;
+}) => {
+    const errors =
+        error &&
+        'types' in error &&
+        error.types &&
+        Object.entries(error.types)
+            .filter(([k]) => k !== 'required')
+            .map(([, v]) => v);
+
+    return (
+        <>
+            {errors &&
+                // FIXME TYPESCRIPT-STRICT
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                errors.map((err) => {
+                    return <Error>{err}</Error>;
+                })}
+        </>
+    );
+};

package/src/components/Form/Input/Common/JRCFormFieldRenderer.tsx

@@ -0,0 +1,85 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { Colors } from '../../../../styles/theme';
+import FormLabel from '../../Common/FormLabel';
+import FormHelper from '../../Common/FormHelper';
+import { StyledDescription } from '../JRCFormFieldRender';
+import styled from 'styled-components';
+import { JRCFormFieldRendererProps } from './JRCFormFieldRenderer.types';
+import { useController } from 'react-hook-form';
+import { JRCTypography } from '../../../JRCTypography/JRCTypography';
+import { JRCFormErrors } from './JRCFormErrors';
+import { useFormControls } from './useFormControls';
+import { useIntl } from 'react-intl';
+
+const StyledFieldWrapper = styled.fieldset`
+    margin: 12px 0;
+`;
+
+const Required = styled(JRCTypography).attrs(() => ({ size: 's' }))<{ error: boolean }>`
+    color: ${(props) => (props.error ? props.theme.color.orange : props.theme.color.grey4)};
+    transition: color 0.4s;
+    text-align: right;
+    margin: -1px 0 -20px;
+`;
+
+const LabelWrapper = styled.div<{ reducedWidth: boolean }>`
+    ${(props) => props.reducedWidth && 'margin-right: 80px'};
+`;
+
+export function JRCFormFieldRenderer<TFieldValues>(props: JRCFormFieldRendererProps<TFieldValues>) {
+    const intl = useIntl();
+    const {
+        field,
+        fieldState: { error },
+    } = useController({
+        name: props.name,
+        control: props.control,
+        // FIXME TYPESCRIPT-STRICT
+        // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+        // @ts-ignore
+        rules: useFormControls(props.rules, intl),
+    });
+
+    const [helperColor, setHelperColor] = useState<Colors>('grey3');
+    const colorHelperIcon = (event: boolean) => setHelperColor(event ? 'yellow' : 'grey3');
+
+    function isRequiredInvalid() {
+        return (
+            props.rules?.required &&
+            ((error && error.types && Object.keys(error.types).includes('required')) ||
+                field.value === undefined ||
+                field.value === '' ||
+                (typeof field.value === 'object' && 'length' in field.value && !(field.value as Array<object>).length))
+        );
+    }
+
+    return (
+        <StyledFieldWrapper>
+            {props.rules?.required && (
+                // FIXME TYPESCRIPT-STRICT
+                // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+                // @ts-ignore
+                <Required error={isRequiredInvalid()}>
+                    {intl.formatMessage({ id: 'GLOBAL_Form_Controls_Required' })}
+                </Required>
+            )}
+            {props.label && (
+                <FormLabel htmlFor={props.htmlFor} labelIsLegend={props.labelIsLegend}>
+                    <LabelWrapper reducedWidth={!!props.rules?.required}>
+                        {intl.formatMessage({ id: props.label })}
+                        {props.helper && <FormHelper tooltip={props.helper} color={helperColor} />}
+                    </LabelWrapper>
+                    {props.description && <StyledDescription>{props.description}</StyledDescription>}
+                </FormLabel>
+            )}
+            <div onFocus={() => colorHelperIcon(true)} onBlur={() => colorHelperIcon(false)}>
+                {props.renderFunction(field)}
+                {/* FIXME TYPESCRIPT-STRICT*/}
+                {/* eslint-disable-next-line @typescript-eslint/ban-ts-comment*/}
+                {/* @ts-ignore*/}
+                <JRCFormErrors error={error as any} />
+            </div>
+        </StyledFieldWrapper>
+    );
+}

package/src/components/Form/Input/Common/JRCFormFieldRenderer.types.tsx

@@ -0,0 +1,51 @@
+import { JRCTooltipProps } from '../../../JRCTooltip/JRCTooltip';
+import { ControllerRenderProps } from 'react-hook-form/dist/types/controller';
+import { FormControls, JRCFormControls } from './useFormControls';
+import { UseControllerProps } from 'react-hook-form';
+import { DataCy } from '../../../../types/dataAttributes';
+
+/**
+ * Form field render props that might be provided outside of this library
+ * @member label, label
+ * @member htmlFor,
+ * @member labelIsLegend,
+ * @member description, description, part of the html label
+ * @member helper, tooltip, part of the html label
+ */
+export interface FieldRenderProps extends DataCy {
+    label?: string;
+    htmlFor?: string;
+    placeholder?: string;
+    labelIsLegend?: boolean;
+    description?: string;
+    helper?: Omit<JRCTooltipProps, 'children'>;
+}
+
+/**
+ * react-hook-form prop alias for the required *name* and *control* props
+ */
+export type NameControl<T> = Required<Pick<UseControllerProps<T>, 'name' | 'control'>>;
+
+/**
+ * Renderer Props
+ */
+export interface RendererProps<T> {
+    renderFunction: (props: ControllerRenderProps<T>) => JSX.Element;
+}
+
+/**
+ * Prop types of any input wrapper with react-hook-form
+ */
+export type JRCFormFieldRendererProps<T> = FieldRenderProps &
+    NameControl<T> &
+    RendererProps<T> & {
+        rules?: FormControls & JRCFormControls;
+    };
+
+/**
+ * Prop types for an input rendered by react-hook-form
+ */
+export type JRCInputFieldProps<T> = FieldRenderProps &
+    NameControl<T> & {
+        rules?: FormControls;
+    };