[FX-4554] Export useFieldsLayoutContext hook

[sashuk]

FX-4554

Description

This pull requests exports useFieldsLayoutContext() hook, so consumers can build their own form extensions to match the layout.

How to test

• Temploy
• Test the code below in Storybook, the buttons form footer should be adaptable

import React from 'react'
import { Container } from '@toptal/picasso'
import { useFieldsLayoutContext } from '@toptal/picasso'
import {
  FormNonCompound as Form,
  Input,
  SubmitButton,
  Switch,
} from '@toptal/picasso-forms'

const initialValues = {}

const Buttons = () => {
  const { layout } = useFieldsLayoutContext()
  return (
    <Container style={layout === 'horizontal' ? {
      display: 'grid',
      gridTemplateRows: 'auto auto',
      gridTemplateAreas: `"label input" "hint error"`,
      gridTemplateColumns: '272px 1fr',
      paddingTop: '1rem',
      gap: '0 32px'
    } : {}}
  >
    <div>AAAA</div>
    <div><SubmitButton>Submit</SubmitButton></div>
  </Container>
  )
}

const Example = () => {
  return (
    <Form
      autoComplete='off'
      onSubmit={values => window.alert(JSON.stringify(values, undefined, 2))}
      initialValues={initialValues}
      layout='horizontal'
    >
      <Input
        enableReset
        onResetClick={(set: (value: string) => void) => {
          set('')
        }}
        required
        name='default-firstName'
        label='First name'
        placeholder='e.g. Bruce'
      />
      <Switch
        name='default-publicProfile'
        label='Public Profile'
        width='auto'
      />
        <Buttons/>
    </Form>
  )
}

export default Example

Kapture.2023-11-29.at.13.29.02.mp4

Screenshots

Tested locally on sample app

Kapture.2023-11-29.at.13.17.15.mp4

Development checks

• Add changeset according to guidelines (if needed)
• Read CONTRIBUTING.md and Component API principles
• [N/A] Make sure that additions and changes on the design follow Toptal's BASE design, and it's been already discussed with designers at #-base-core
• [N/A] Annotate all props in component with documentation
• [N/A] Create examples for component
• Ensure that deployed demo has expected results and good examples
• [N/A] Ensure the changed/created components have not caused accessibility issues. How to use accessibility plugin in storybook.
• Self reviewed
• [N/A] Covered with tests (visual tests included)

All development checks should be done and set checked to pass the
GitHub Bot: TODOLess action

PR commands

List of available commands:

• @toptal-bot run package:alpha-release - Release alpha version
• @toptal-anvil ping reviewers - Ping FX team for review

PR Review Guidelines

When to approve? ✅

You are OK with merging this PR and

1. You have no extra requests.
2. You have optional requests.
   1. Add nit: to your comment. (ex. nit: I'd rename this variable from makeCircle to getCircle)

When to request changes? ❌

You are not OK with merging this PR because

1. Something is broken after the changes.
2. Acceptance criteria is not reached.
3. Code is dirty.

When to comment (neither ✅ nor ❌)

You want your comments to be addressed before merging this PR in cases like:

1. There are leftovers like unnecessary logs, comments, etc.
2. You have an opinionated comment regarding the code that requires a discussion.
3. You have questions.

How to handle the comments?

1. An owner of a comment is the only one who can resolve it.
2. An owner of a comment must resolve it when it's addressed.
3. A PR owner must reply with ✅ when a comment is addressed.

[changeset-bot]

🦋 Changeset detected

Latest commit: 9bc037e

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@toptal/picasso-forms	Minor
@toptal/picasso	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[sashuk]

@toptal-bot run package:alpha-release

[toptal-devbot]

Your alpha package is ready 🎉
yarn add @topkit/analytics-charts@52.0.1-alpha-FX-NULL-export-useFieldsLayoutContext-28c3ba462.93+28c3ba462
yarn add @toptal/picasso@41.4.2-alpha-FX-NULL-export-useFieldsLayoutContext-28c3ba462.1+28c3ba462
yarn add @toptal/picasso-charts@55.1.1-alpha-FX-NULL-export-useFieldsLayoutContext-28c3ba462.55+28c3ba462
yarn add @toptal/picasso-codemod@5.6.4-alpha-FX-NULL-export-useFieldsLayoutContext-28c3ba462.44+28c3ba462
yarn add @toptal/picasso-forms@65.1.2-alpha-FX-NULL-export-useFieldsLayoutContext-28c3ba462.1+28c3ba462
yarn add @toptal/picasso-pictograms@2.0.1-alpha-FX-NULL-export-useFieldsLayoutContext-28c3ba462.114+28c3ba462
yarn add @toptal/picasso-provider@3.4.2-alpha-FX-NULL-export-useFieldsLayoutContext-28c3ba462.105+28c3ba462
yarn add @toptal/picasso-query-builder@1.1.3-alpha-FX-NULL-export-useFieldsLayoutContext-28c3ba462.25+28c3ba462
yarn add @toptal/picasso-rich-text-editor@9.0.2-alpha-FX-NULL-export-useFieldsLayoutContext-28c3ba462.64+28c3ba462
yarn add @toptal/picasso-shared@13.0.1-alpha-FX-NULL-export-useFieldsLayoutContext-28c3ba462.114+28c3ba462
yarn add @toptal/picasso-tailwind@1.0.1-alpha-FX-NULL-export-useFieldsLayoutContext-28c3ba462.18+28c3ba462

[sashuk]

@toptal-anvil ping reviewers

[sashuk]

@toptal-anvil ping reviewers