@toptal/picasso-forms 6.0.4 → 6.0.5

package/dist-package/README.md

@@ -0,0 +1,29 @@
+# @toptal/picasso-forms
+
+[![Picasso NPM package](https://img.shields.io/npm/v/@toptal/picasso-forms?color=green&logo=toptal)](https://www.npmjs.com/package/@toptal/picasso-forms)
+
+This package combines the state-management power of [React Final Form](https://final-form.org/react) with the amazing UX of Picasso. It also provides access to [React Final Form Arrays](https://github.com/final-form/react-final-form-arrays).
+
+## Prerequisites
+
+The following peer dependencies are required:
+
+- `@toptal/picasso`
+- `@toptal/picasso-lab`
+- `@toptal/picasso-shared`
+- `react`
+- `react-dom`
+
+## Setup
+
+- `yarn add @toptal/picasso-forms`
+
+## Limitations
+
+Not all final-form features are exposed through this package. If you find a missing one, please [open a Pull Request](../../CONTRIBUTING.md) and add it!
+
+For more info on what's available, check [the index](./src/index.ts).
+
+## Documentation
+
+Documentation and demos are available at [picasso.toptal.net](https://picasso.toptal.net/).

package/{index.d.ts → dist-package/index.d.ts}

@@ -1,4 +1,5 @@
-export { FORM_ERROR, FormApi, MutableState, AnyObject, FieldValidator, SubmissionErrors, Config, setIn } from 'final-form';
+export type { FormApi, MutableState, AnyObject, FieldValidator, SubmissionErrors, Config } from 'final-form';
+export { FORM_ERROR, setIn } from 'final-form';
 export { useForm, useField, useFormState, FormSpy, Form as FinalForm, Field as FinalField } from 'react-final-form';
 export type { FieldMetaState, FieldRenderProps, FormRenderProps, FieldProps, FormProps, FieldInputProps } from 'react-final-form';
 export { default as arrayMutators } from 'final-form-arrays';

package/{index.js → dist-package/index.js}

@@ -1,4 +1,3 @@
-// Final Form exports
 export { FORM_ERROR, setIn } from 'final-form';
 export { useForm, useField, useFormState, FormSpy, Form as FinalForm, Field as FinalField } from 'react-final-form';
 export { default as arrayMutators } from 'final-form-arrays';

package/dist-package/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAGA,OAAO,EAAE,UAAU,EAAE,KAAK,EAAE,MAAM,YAAY,CAAA;AAC9C,OAAO,EAAE,OAAO,EAAE,QAAQ,EAAE,YAAY,EAAE,OAAO,EAAE,IAAI,IAAI,SAAS,EAAE,KAAK,IAAI,UAAU,EAAE,MAAM,kBAAkB,CAAA;AAEnH,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,mBAAmB,CAAA;AAC5D,OAAO,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAA;AAEnE,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,iBAAiB,EAAE,MAAM,EAAE,MAAM,4BAA4B,CAAA;AAEzF,wBAAwB;AACxB,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAA;AACxC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAA;AAExD,qEAAqE"}

package/dist-package/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@toptal/picasso-forms",
+  "version": "6.0.5",
+  "description": "Picasso form components",
+  "author": "Toptal",
+  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso-forms#readme",
+  "license": "MIT",
+  "main": "index.js",
+  "module": "index.js",
+  "publishConfig": {
+    "access": "public"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/toptal/picasso.git"
+  },
+  "scripts": {
+    "build:package": "cross-env NODE_ENV=production node ../../bin/build.js --tsConfig=./tsconfig.build.json",
+    "prepublishOnly": "../../bin/prepublish.js"
+  },
+  "bugs": {
+    "url": "https://github.com/toptal/picasso/issues"
+  },
+  "peerDependencies": {
+    "@toptal/picasso": "^13.4.2",
+    "@toptal/picasso-lab": "^9.3.1",
+    "@toptal/picasso-shared": "^7",
+    "react": "^16.12.0",
+    "react-dom": "^16.12.0"
+  },
+  "dependencies": {
+    "classnames": "^2.3.1",
+    "final-form": "^4.20.2",
+    "final-form-arrays": "^3.0.2",
+    "react-final-form": "^6.5.1",
+    "react-final-form-arrays": "^3.1.3",
+    "react-final-form-listeners": "^1.0.3"
+  },
+  "devDependencies": {
+    "@types/classnames": "^2.3.1",
+    "@types/react-final-form-listeners": "^1.0.0",
+    "storybook-readme": "^5.0.9"
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toptal/picasso-forms",
-  "version": "6.0.4",
+  "version": "6.0.5",
   "description": "Picasso form components",
   "author": "Toptal",
   "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso-forms#readme",
@@ -22,8 +22,8 @@
     "url": "https://github.com/toptal/picasso/issues"
   },
   "peerDependencies": {
-    "@toptal/picasso": "^12",
-    "@toptal/picasso-lab": "^9",
+    "@toptal/picasso": "^13.4.2",
+    "@toptal/picasso-lab": "^9.3.1",
     "@toptal/picasso-shared": "^7",
     "react": "^16.12.0",
     "react-dom": "^16.12.0"
@@ -40,6 +40,5 @@
     "@types/classnames": "^2.3.1",
     "@types/react-final-form-listeners": "^1.0.0",
     "storybook-readme": "^5.0.9"
-  },
-  "gitHead": "a167adf3dd929f357f80d33d86f22fd70f8a8366"
+  }
 }

package/src/Autocomplete/Autocomplete.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import {
+  Autocomplete as PicassoAutocomplete,
+  AutocompleteProps
+} from '@toptal/picasso'
+
+import FieldWrapper, { FieldProps } from '../FieldWrapper'
+
+export type Props = AutocompleteProps & FieldProps<AutocompleteProps['value']>
+
+export const Autocomplete = (props: Props) => (
+  <FieldWrapper<AutocompleteProps> {...props}>
+    {(inputProps: AutocompleteProps) => {
+      return <PicassoAutocomplete {...inputProps} />
+    }}
+  </FieldWrapper>
+)
+
+Autocomplete.displayName = 'Autocomplete'
+
+export default Autocomplete

package/src/Autocomplete/index.ts

@@ -0,0 +1 @@
+export { default } from './Autocomplete'

package/src/ButtonCheckbox/ButtonCheckbox.tsx

@@ -0,0 +1,57 @@
+import React, { useContext } from 'react'
+import { Button, ButtonCheckboxProps } from '@toptal/picasso'
+import {
+  Field,
+  FieldRenderProps as FinalFormFieldProps
+} from 'react-final-form'
+
+import FieldWrapper, { FieldProps } from '../FieldWrapper'
+import { CheckboxGroupContext } from '../CheckboxGroup'
+
+type CheckboxValue =
+  | ButtonCheckboxProps['value']
+  | ButtonCheckboxProps['checked']
+
+type CheckboxFormProps = Omit<ButtonCheckboxProps, 'requiredDecoration'> & {
+  required?: boolean
+}
+type CheckboxWithoutGroup = CheckboxFormProps & FieldProps<CheckboxValue>
+type CheckboxInGroup = CheckboxFormProps & { name?: string }
+
+export type Props = CheckboxWithoutGroup | CheckboxInGroup
+
+const ButtonCheckbox = ({ name, value, required, ...restProps }: Props) => {
+  const groupName = useContext(CheckboxGroupContext)
+  const isCheckboxInGroup = Boolean(groupName)
+
+  if (isCheckboxInGroup) {
+    return (
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      <Field type='checkbox' name={name || groupName!} value={value}>
+        {({
+          // eslint-disable-next-line @typescript-eslint/no-unused-vars
+          input: { value: inputValue, type, ...restInput }
+        }: FinalFormFieldProps<CheckboxValue>) => {
+          return <Button.Checkbox {...restProps} {...restInput} />
+        }}
+      </Field>
+    )
+  }
+
+  return (
+    <FieldWrapper
+      type='checkbox'
+      hideFieldLabel
+      required={required}
+      {...restProps}
+      // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+      name={name!}
+    >
+      {(input: ButtonCheckboxProps) => <Button.Checkbox {...input} />}
+    </FieldWrapper>
+  )
+}
+
+ButtonCheckbox.displayName = 'ButtonCheckbox'
+
+export default ButtonCheckbox

package/src/ButtonCheckbox/index.ts

@@ -0,0 +1 @@
+export { default } from './ButtonCheckbox'

package/src/ButtonRadio/ButtonRadio.tsx

@@ -0,0 +1,24 @@
+import React, { useContext } from 'react'
+import { Button, ButtonRadioProps } from '@toptal/picasso'
+import { Field } from 'react-final-form'
+
+import { RadioGroupContext } from '../RadioGroup'
+
+export type Props = ButtonRadioProps & {
+  name?: string
+}
+
+const ButtonRadio = ({ name, ...rest }: Props) => {
+  const groupName = useContext(RadioGroupContext)
+
+  return (
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    <Field name={name || groupName!} type='radio' value={rest.value}>
+      {({ input }) => <Button.Radio checked={input.checked} {...rest} />}
+    </Field>
+  )
+}
+
+ButtonRadio.displayName = 'ButtonRadio'
+
+export default ButtonRadio