feat(CC-form): init form, checkbox, field group, input group, number input, radio, search input, switch, text input group

.gitignore

@@ -26,6 +26,7 @@ lerna-debug.log
 .history
 .vscode
 .yo-rc.json
+.env
 
 # IDE - VSCode
 .vscode

packages/code-connect/components/Form/BasicFormDemo.figma.tsx

@@ -0,0 +1,12 @@
+import figma from '@figma/code-connect';
+import { Form } from '@patternfly/react-core';
+
+// Documentation for Form can be found at https://www.patternfly.org/components/form
+
+figma.connect(Form, 'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1577-2965', {
+  props: {
+    // topAlert: figma.boolean('Top alert'),
+    children: figma.children('*')
+  },
+  example: (props) => <Form>{props.children}</Form>
+});

packages/code-connect/components/Form/BasicSearchInput.figma.tsx

@@ -0,0 +1,52 @@
+import figma from '@figma/code-connect';
+import { SearchInput } from '@patternfly/react-core';
+
+// Documentation for SearchInput can be found at https://www.patternfly.org/components/search-input
+
+figma.connect(
+  SearchInput,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=8065-140137',
+  {
+    props: {
+      placeholder: figma.string('✏️ Placeholder text'),
+      value: figma.string('✏️ Searched text'),
+      resultsCount: figma.boolean('Show count', {
+        true: '3',
+        false: undefined
+      }),
+      showNavigableOptions: figma.boolean('Show navigable options', {
+        true: {
+          isNextNavigationButtonDisabled: `currentResult === 3`,
+          isPreviousNavigationButtonDisabled: `currentResult === 1`,
+          resultsCount: `${currentResult} / ${resultsCount}`,
+          onNextClick: () => {},
+          onPreviousClick: () => {}
+        },
+        false: undefined
+      }),
+      submitSearchButtonLabel: figma.boolean('Show submit button', {
+        true: {
+          label: 'Search',
+          onSearch: () => {}
+        },
+        false: undefined
+      })
+    },
+    example: (props) => (
+      <SearchInput
+        aria-label="Search basic example"
+        isNextNavigationButtonDisabled={props.showNavigableOptions.isNextNavigationButtonDisabled}
+        isPreviousNavigationButtonDisabled={props.showNavigableOptions.isPreviousNavigationButtonDisabled}
+        onChange={() => {}}
+        onClear={() => {}}
+        onNextClick={props.showNavigableOptions.onNextClick}
+        onPreviousClick={props.showNavigableOptions.onPreviousClick}
+        onSearch={props.submitSearchButtonLabel.onSearch}
+        placeholder={props.placeholder}
+        resultsCount={props.showNavigableOptions.resultsCount}
+        submitSearchButtonLabel={props.submitSearchButtonLabel.label}
+        value={props.value}
+      />
+    )
+  }
+);

packages/code-connect/components/Form/Checkbox.figma.tsx

@@ -0,0 +1,41 @@
+import figma from '@figma/code-connect';
+import { Checkbox } from '@patternfly/react-core';
+
+// Documentation for CheckboxInput can be found at https://www.patternfly.org/components/form/checkbox
+
+figma.connect(
+  Checkbox,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=157-3078',
+  {
+    props: {
+      ariaLabel: figma.enum('Type', {
+        Standalone: figma.string('Toggle label')
+      }),
+      label: figma.enum('Type', {
+        'With label': figma.string('Toggle label')
+      }),
+      labelPosition: figma.enum('Label placement', {
+        End: 'end',
+        Reversed: 'start'
+      }),
+      isDisabled: figma.enum('State', {
+        Disabled: true
+      }),
+      description: figma.boolean('Description', {
+        true: 'Description text',
+        false: undefined
+      })
+    },
+    example: (props) => (
+      <Checkbox
+        aria-label={props.ariaLabel}
+        description={props.description}
+        id="checkbox"
+        isDisabled={props.isDisabled}
+        label={props.label}
+        labelPosition={props.labelPosition}
+        name="checkbox"
+      />
+    )
+  }
+);

packages/code-connect/components/Form/CheckboxGroup.figma.tsx

@@ -0,0 +1,19 @@
+import figma from '@figma/code-connect';
+import { FormGroup } from '@patternfly/react-core';
+
+// Documentation for CheckboxGroup can be found at https://www.patternfly.org/components/form
+
+figma.connect(
+  FormGroup,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=1577-4455',
+  {
+    props: {
+      label: figma.boolean('Label', {
+        true: 'Input label',
+        false: undefined
+      }),
+      children: figma.children('*')
+    },
+    example: (props) => <FormGroup label={props.label}>{props.children}</FormGroup>
+  }
+);

packages/code-connect/components/Form/FieldGroup.figma.tsx

@@ -0,0 +1,24 @@
+import figma from '@figma/code-connect';
+import { FormGroup } from '@patternfly/react-core';
+
+/**
+ * -- This file was auto-generated by Code Connect --
+ * `props` includes a mapping from Figma properties and variants to
+ * suggested values. You should update this to match the props of your
+ * code component, and update the `example` function to return the
+ * code example you'd like to see in Figma
+ */
+
+figma.connect(
+  FormGroup,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=17114-21566&m=dev',
+  {
+    props: {
+      nestedOpen: figma.boolean('Nested - Open'),
+      nestedNonExpandable: figma.boolean('Nested - Non expandable'),
+      nestedClosed: figma.boolean('Nested - Closed'),
+      children: figma.children('*')
+    },
+    example: (props) => <FormGroup>{props.children}</FormGroup>
+  }
+);

packages/code-connect/components/Form/HelperText.figma.tsx

@@ -0,0 +1,44 @@
+import figma from '@figma/code-connect';
+import { FormHelperText, HelperText, HelperTextItem } from '@patternfly/react-core';
+import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
+import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-icon';
+import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
+
+// Documentation for HelperText can be found at https://www.patternfly.org/components/form
+
+figma.connect(
+  HelperText,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=151-1670',
+  {
+    props: {
+      variant: figma.enum('Type', {
+        Defaut: 'default',
+        Indeterminate: 'indeterminate',
+        Warning: 'warning',
+        Success: 'success',
+        Error: 'error'
+      }),
+      icon: figma.boolean('Icon', {
+        true: figma.enum('Type', {
+          Defaut: <MinusIcon />,
+          Indeterminate: <MinusIcon />,
+          Warning: <ExclamationIcon />,
+          Success: <CheckCircleIcon />,
+          Error: <ExclamationTriangleIcon />
+        }),
+        false: undefined
+      }),
+      helperText: figma.string('Helper text')
+    },
+    example: (props) => (
+      <FormHelperText>
+        <HelperText>
+          <HelperTextItem variant={props.variant} icon={props.icon}>
+            {props.helperText}
+          </HelperTextItem>
+        </HelperText>
+      </FormHelperText>
+    )
+  }
+);

packages/code-connect/components/Form/InputField.figma.tsx

@@ -0,0 +1,68 @@
+import figma from '@figma/code-connect';
+import { Button, FormGroup, FormGroupLabelHelp, Popover } from '@patternfly/react-core';
+import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
+
+// Documentation for InputField can be found at https://www.patternfly.org/components/form
+
+figma.connect(
+  FormGroup,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=157-788&m=dev',
+  {
+    props: {
+      // boolean
+      label: figma.boolean('Label', {
+        true: 'Input field',
+        false: undefined
+      }),
+      minusIcon: figma.boolean('Minus icon', {
+        true: <Button icon={<MinusIcon />} variant="plain" hasNoPadding aria-label="Delete field" />,
+        false: undefined
+      }),
+      textInput: figma.children('Text inputs'),
+      helperText: figma.children('HelperText')
+    },
+    example: (props) => (
+      <FormGroup
+        label={props.label}
+        labelHelp={
+          <Popover
+            triggerRef={labelHelpRef}
+            headerContent={
+              <div>
+                The{' '}
+                <a href="https://schema.org/name" target="_blank" rel="noreferrer">
+                  name
+                </a>{' '}
+                of a{' '}
+                <a href="https://schema.org/Person" target="_blank" rel="noreferrer">
+                  Person
+                </a>
+              </div>
+            }
+            bodyContent={
+              <div>
+                Often composed of{' '}
+                <a href="https://schema.org/givenName" target="_blank" rel="noreferrer">
+                  givenName
+                </a>{' '}
+                and{' '}
+                <a href="https://schema.org/familyName" target="_blank" rel="noreferrer">
+                  familyName
+                </a>
+                .
+              </div>
+            }
+          >
+            <FormGroupLabelHelp ref={labelHelpRef} aria-label="More info for name field" />
+          </Popover>
+        }
+        isRequired
+        fieldId="simple-form-name-01"
+      >
+        {props.textInput}
+        {props.minusIcon}
+        {props.helperText}
+      </FormGroup>
+    )
+  }
+);

packages/code-connect/components/Form/InputGroup.figma.tsx

@@ -0,0 +1,15 @@
+import figma from '@figma/code-connect';
+import { InputGroup } from '@patternfly/react-core';
+
+// Documentation for InputGroup can be found at https://www.patternfly.org/components/input-group
+
+figma.connect(
+  InputGroup,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=12700-4200',
+  {
+    props: {
+      children: figma.children('Input Group Items')
+    },
+    example: (props) => <InputGroup>{props.children}</InputGroup>
+  }
+);

packages/code-connect/components/Form/InputGroupItems.figma.tsx

@@ -0,0 +1,49 @@
+import figma from '@figma/code-connect';
+import { InputGroupItem, InputGroupText, TextInput } from '@patternfly/react-core';
+import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
+// Documentation for InputGroupItem can be found at https://www.patternfly.org/components/input-group
+
+figma.connect(
+  InputGroupItem,
+  'https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=176-2806',
+  {
+    props: {
+      type: figma.enum('Type', {
+        Icon: (
+          <InputGroupText id="username">
+            <OutlinedClockIcon />
+          </InputGroupText>
+        ),
+        Text: (
+          <TextInput
+            validated={validated}
+            id="textInput-basic-2"
+            type="email"
+            aria-label="Error state username example"
+          />
+        ),
+        Dropdown: figma.children('*'),
+        Button: figma.children('*')
+      }),
+      state: figma.enum('State', {
+        Disabled: 'disabled',
+        ReadOnly: 'readOnly',
+        Success: 'success',
+        Warning: 'warning',
+        Error: 'error',
+        Selected: 'selected'
+      }),
+      textInput: figma.enum('Type', {
+        Text: (
+          <TextInput
+            validated={props.state}
+            id="textInput-basic-2"
+            type="email"
+            aria-label="Error state username example"
+          />
+        )
+      })
+    },
+    example: (props) => <InputGroupItem>{props.type}</InputGroupItem>
+  }
+);

packages/code-connect/components/Form/LabeledInputGroup.figma.tsx

@@ -0,0 +1,8 @@
+import figma from '@figma/code-connect';
+
+figma.connect('https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=176-3526', {
+  props: {
+    children: figma.children('*')
+  },
+  example: (props) => <>{props.children}</>
+});

packages/code-connect/components/Form/LabeledNumberInput.figma.tsx

@@ -0,0 +1,8 @@
+import figma from '@figma/code-connect';
+
+figma.connect('https://www.figma.com/design/VMEX8Xg2nzhBX8rfBx53jp/PatternFly-6--Components?node-id=176-4200&m=dev', {
+  props: {
+    children: figma.children('*')
+  },
+  example: (props) => <>{props.children}</>
+});