formik-pf - npm Package Compare versions

Comparing version 0.0.1-alpha1 to 0.0.1-alpha10

dist/cjs/types/components/index.d.ts

 export * from './CheckboxField';
 export * from './FileUploadField';
+export * from './FormikWizard';
 export * from './InputField';
 export * from './InputGroupField';
+export * from './NumberSpinnerField';
 export * from './RadioButtonField';
@@ -6,0 +8,0 @@ export * from './RadioGroupField';

dist/cjs/types/components/SwitchField/index.d.ts

@@ -1,1 +0,1 @@
-export { default as SwitchFiedl } from './SwitchField';
+export { default as SwitchField } from './SwitchField';

dist/esm/types/components/index.d.ts

 export * from './CheckboxField';
 export * from './FileUploadField';
+export * from './FormikWizard';
 export * from './InputField';
 export * from './InputGroupField';
+export * from './NumberSpinnerField';
 export * from './RadioButtonField';
@@ -6,0 +8,0 @@ export * from './RadioGroupField';

dist/esm/types/components/SwitchField/index.d.ts

@@ -1,1 +0,1 @@
-export { default as SwitchFiedl } from './SwitchField';
+export { default as SwitchField } from './SwitchField';

dist/index.d.ts

@@ -1,3 +0,5 @@
-import React from 'react';
-import { FormGroupProps, TextInputTypes, FileUpload } from '@patternfly/react-core';
+import * as React from 'react';
+import React__default from 'react';
+import { FormGroupProps, TextInputTypes, FileUpload, WizardProps } from '@patternfly/react-core';
+import { FormikValues, FormikHelpers, FormikConfig } from 'formik';
 
@@ -16,3 +18,3 @@ declare type FieldProps = {
 
-declare const CheckboxField: React.FC<BaseToggleFieldProps>;
+declare const CheckboxField: React__default.FC<BaseToggleFieldProps>;
 
@@ -27,6 +29,54 @@ declare type BaseInputFieldProps = FieldProps & {
 
-declare const FileUploadField: React.FunctionComponent<Omit<BaseInputFieldProps, 'onChange'> & React.ComponentProps<typeof FileUpload>>;
+declare const FileUploadField: React__default.FunctionComponent<Omit<BaseInputFieldProps, 'onChange'> & React__default.ComponentProps<typeof FileUpload>>;
 
-declare const InputField: React.ForwardRefExoticComponent<BaseInputFieldProps & React.RefAttributes<HTMLInputElement>>;
+declare type PickedWizardProps = Pick<WizardProps, 'startAtStep' | 'footer' | 'nextButtonText' | 'backButtonText' | 'cancelButtonText' | 'hasNoBodyPadding' | 'mainAriaLabel' | 'mainAriaLabelledBy' | 'navAriaLabel' | 'navAriaLabelledBy'>;
+declare type InternalWizardProps = PickedWizardProps & {
+    steps: FormikWizardStep[];
+    onNext?: (nextStepIndex: number, prevStepIndex: number) => void;
+    onBack?: (nextStepIndex: number, prevStepIndex: number) => void;
+};
 
+declare type FormikWizardStep = {
+    /** Optional identifier */
+    id?: string | number;
+    /** The name of the step */
+    name: React.ReactNode;
+    /** The component to render in the main body */
+    component: React.ReactNode;
+    /** Optional validation schema object for the current step */
+    validationSchema?: any | (() => any);
+    /** Tells Formik to validate the form on each input's onChange event */
+    validateOnChange?: boolean;
+    /** Tells Formik to validate the form on each input's onBlur event */
+    validateOnBlur?: boolean;
+    /** Tells Formik to validate upon mount */
+    validateOnMount?: boolean;
+    /** (Unused if footer is controlled) The Next button text */
+    nextButtonText?: React.ReactNode;
+    /** (Unused if footer is controlled) The Back button text */
+    backButtonText?: React.ReactNode;
+    /** (Unused if footer is controlled) The Cancel button text */
+    cancelButtonText?: React.ReactNode;
+    /** (Unused if footer is controlled) The condition needed to disable the Next button */
+    disableNext?: boolean;
+    /** (Unused if footer is controlled) The condition needed to disable the Back button */
+    disableBack?: boolean;
+    /** Enables or disables the step in the navigation. Enabled by default. */
+    canJumpTo?: boolean;
+    /** Removes the default body padding for the step. */
+    hasNoBodyPadding?: boolean;
+    /** Sets the Form to horizontal. */
+    isFormHorizontal?: boolean;
+    /** Flag to limit the max-width to 500px. */
+    isFormWidthLimited?: boolean;
+    /** Handler to be called before moving to next step */
+    onSubmit?: (values: FormikValues, formikBag: FormikHelpers<FormikValues>) => Promise<any>;
+};
+declare type FormikWizardProps = InternalWizardProps & Pick<FormikConfig<FormikValues>, 'initialValues' | 'onSubmit' | 'onReset' | 'enableReinitialize' | 'validateOnChange' | 'validateOnBlur' | 'validateOnMount'> & {
+    steps: FormikWizardStep[];
+};
+declare const FormikWizard: React.FunctionComponent<FormikWizardProps>;
+
+declare const InputField: React__default.ForwardRefExoticComponent<BaseInputFieldProps & React__default.RefAttributes<HTMLInputElement>>;
+
 declare enum GroupTextType {
@@ -37,27 +87,33 @@ TextInput = "text",
 declare type GroupInputProps = BaseInputFieldProps & {
-    beforeInput?: React.ReactNode;
-    afterInput?: React.ReactNode;
+    beforeInput?: React__default.ReactNode;
+    afterInput?: React__default.ReactNode;
     groupTextType?: GroupTextType;
 };
-declare const InputGroupField: React.FC<GroupInputProps>;
+declare const InputGroupField: React__default.FC<GroupInputProps>;
 
+declare type NumberSpinnerFieldProps = FieldProps & {
+    min?: number;
+    max?: number;
+};
+declare const NumberSpinnerField: React__default.FC<NumberSpinnerFieldProps>;
+
 declare type RadioButtonFieldProps = Omit<FieldProps, 'ref'> & {
-    value: React.ReactText;
-    description?: React.ReactNode;
-    onChange?: (value: React.ReactText) => void;
+    value: React__default.ReactText;
+    description?: React__default.ReactNode;
+    onChange?: (value: React__default.ReactText) => void;
 };
-declare const RadioButtonField: React.FC<RadioButtonFieldProps>;
+declare const RadioButtonField: React__default.FC<RadioButtonFieldProps>;
 
 declare type RadioGroupOption = {
-    value: React.ReactText;
-    label: React.ReactNode;
+    value: React__default.ReactText;
+    label: React__default.ReactNode;
     isDisabled?: boolean;
-    children?: React.ReactNode;
-    activeChildren?: React.ReactElement;
+    children?: React__default.ReactNode;
+    activeChildren?: React__default.ReactElement;
 };
 declare type RadioGroupFieldProps = FieldProps & {
     options: RadioGroupOption[];
-    onChange?: (value: React.ReactText) => void;
+    onChange?: (value: React__default.ReactText) => void;
 };
-declare const RadioGroupField: React.FC<RadioGroupFieldProps>;
+declare const RadioGroupField: React__default.FC<RadioGroupFieldProps>;
 
@@ -70,9 +126,9 @@ declare type SelectInputOption = {
     options: SelectInputOption[];
-    placeholderText?: React.ReactNode;
+    placeholderText?: React__default.ReactNode;
     isCreatable?: boolean;
     hasOnCreateOption?: boolean;
 };
-declare const SelectField: React.FC<SelectFieldProps>;
+declare const SelectField: React__default.FC<SelectFieldProps>;
 
-declare const SwitchField: React.FC<BaseToggleFieldProps>;
+declare const SwitchField: React__default.FC<BaseToggleFieldProps>;
 
@@ -86,4 +142,4 @@ declare type TextAreaProps = Omit<FieldProps, 'ref'> & {
 };
-declare const TextAreaField: React.ForwardRefExoticComponent<TextAreaProps & React.RefAttributes<HTMLTextAreaElement>>;
+declare const TextAreaField: React__default.ForwardRefExoticComponent<TextAreaProps & React__default.RefAttributes<HTMLTextAreaElement>>;
 
-export { CheckboxField, FileUploadField, InputField, InputGroupField, RadioButtonField, RadioGroupField, SelectField, SwitchField as SwitchFiedl, TextAreaField };
+export { CheckboxField, FileUploadField, FormikWizard, FormikWizardStep, InputField, InputGroupField, NumberSpinnerField, RadioButtonField, RadioGroupField, SelectField, SwitchField, TextAreaField };

package.json

 {
   "name": "formik-pf",
-  "version": "0.0.1-alpha1",
+  "version": "0.0.1-alpha10",
   "description": "A UI library that provides formik bindings with PF components.",
@@ -14,8 +14,8 @@ "main": "dist/cjs/index.js",
     "rollup": "rollup -c",
+    "build": "rm -rf dist && rollup -c",
     "test": "jest",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "lint": "npm-run-all lint:*",
-    "lint:ts": "eslint . --ext .js,.jsx,.ts,.tsx --color",
-    "lint:ts:fix": "npm run lint:ts -- --fix",
+    "lint": "eslint . --ext .js,.jsx,.ts,.tsx --color",
+    "lint:fix": "npm run lint:ts -- --fix",
     "lint:sass": "stylelint 'src/**/*.scss' --config .stylelintrc.json"
@@ -94,3 +94,3 @@ },
   "peerDependencies": {
-    "@patternfly/react-core": "^4.224.1",
+    "@patternfly/react-core": "^4.202.16",
     "@types/react": "^17.0.2",
@@ -97,0 +97,0 @@ "formik": "^2.2.9",

README.md

@@ -1,2 +0,63 @@
-# formik-pf
-A UI library that provides formik bindings with PF components.
+# Formik PF
+
+![build](https://github.com/patternfly-labs/formik-pf/workflows/Formik%20PF%20CD/badge.svg)
+![version](https://badgen.net/npm/v/formik-pf)
+[![license](https://badgen.net/github/license/patternfly-labs/formik-pf)](./LICENSE)
+
+A UI library that provides bindings for using [Formik](https://github.com/jaredpalmer/formik) with [Patternfly](https://www.patternfly.org/).
+
+[Demo](https://patternfly-labs.github.io/formik-pf)
+
+## Installation
+
+### Install dependencies
+
+#### Using npm
+
+```sh
+npm install formik-pf
+```
+
+#### Using yarn
+
+```
+yarn add formik-pf
+```
+
+### Setup Patternfly CSS
+
+Import css from patternfly before importing components from formik-pf.
+
+```typescript
+import '@patternfly/react-core/dist/styles/base.css'
+```
+
+### Form Field Example
+
+A form field is a PF form component wrapped around formik form context. The field component just needs the path to formik context and it can automatically connect to the values, errors and validation states for that path.
+
+```tsx
+import { Form, Button } from '@patternfly/react-core';
+import { Formik } from 'formik';
+import { InputField } from 'formik-pf'
+
+const ExampleForm = () => {
+  return (
+    <Formik
+      initialValues={{ name: '' }}
+      onSubmit={(values) => console.log(values)}
+    >
+      {({ handleSubmit }) => (
+        <Form onSubmit={handleSubmit}>
+          <InputField name="name" label="Name" type="text" placeholder="Enter your name" />
+          <Button type="submit">Submit</Button>
+        </Form>
+      )}
+    </Formik>
+  );
+};
+```
+
+
+
+This project requires Formik>= 2.0.0.

New alerts

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

317295

increased by102.7%

Lines of code

1143

increased by111.67%

Number of lines in readme file

64

increased by2033.33%

Worsened metrics

Number of package files

70

decreased by-2.78%

Number of low supply chain risk alerts

4

increased byInfinity%

No dependency changes