@digigov/form 0.10.6 → 0.10.7

package/src/Questions/getNextStep.tsx

@@ -0,0 +1,24 @@
+import { StepInterface } from '@digigov/form/Questions/Step/types';
+
+export function getNextStep(
+  currentStep: any,
+  steps: any[],
+  data: any
+): StepInterface | null {
+  if (currentStep.nextStep) {
+    const nextStepName = currentStep.nextStep(data);
+    if (nextStepName) {
+      return steps.find((step) => step.name === nextStepName);
+    }
+  }
+  const currentStepIndex = steps.findIndex(
+    (step) => step.name === currentStep.name
+  );
+  const nextStep = steps.slice(currentStepIndex + 1).find((step) => {
+    if (step.show) {
+      return step.show(data);
+    }
+    return true;
+  });
+  return nextStep;
+}

package/src/Questions/index.mdx

@@ -0,0 +1,13 @@
+---
+title: Questions
+parent: docs/ui/components
+---
+
+## Example
+
+
+## API
+
+### Properties
+
+### Styles

package/src/Questions/index.spec.tsx

@@ -0,0 +1,72 @@
+import * as React from 'react';
+import { mount } from 'enzyme';
+
+import { Step, StepForm, StepQuote, StepTitle } from '@digigov/form/Questions';
+import Questions from '@digigov/form/Questions';
+import { Field } from '@digigov/form';
+
+const steps = [
+  {
+    name: 'intro',
+    caption: 'intro.caption',
+    title: 'intro.title',
+    description: 'intro.description',
+    fields: [
+      {
+        key: 'name',
+        label: {
+          primary: 'name.field.primary',
+          secondary: 'name.field.secondary',
+        },
+        required: true,
+        type: 'string',
+      },
+    ],
+  },
+  {
+    name: 'age',
+    caption: 'age.caption',
+    title: 'age.title',
+    description: 'age.description',
+    fields: [
+      {
+        key: 'dateOfBirth',
+        label: {
+          primary: 'age.field.primary',
+          secondary: 'age.field.secondary',
+        },
+        required: true,
+        type: 'number',
+      },
+    ],
+  },
+];
+
+it('renders the Questions', () => {
+  expect(
+    mount(
+      <Questions
+        name={'example'}
+        onSubmit={(data): void => {
+          console.log(data);
+        }}
+        steps={steps}
+      >
+        <Step name="intro">
+          <StepTitle />
+          <StepQuote>This is the intro</StepQuote>
+          <StepForm submitButton={true}>
+            <Field key={'name'} name="name" />
+          </StepForm>
+        </Step>
+        <Step name="age">
+          <StepTitle />
+          <StepQuote>This is the age</StepQuote>
+          <StepForm submitButton={true}>
+            <Field key={'dateOfBirth'} name="dateOfBirth" />
+          </StepForm>
+        </Step>
+      </Questions>
+    )
+  ).toMatchSnapshot();
+});

package/src/Questions/index.tsx

@@ -0,0 +1,5 @@
+import { Questions } from '@digigov/form/Questions/Questions';
+
+export default Questions;
+
+export * from '@digigov/form/Questions/Step';

package/src/Questions/types.tsx

@@ -0,0 +1,25 @@
+import { StepInterface } from '@digigov/form/Questions/Step/types';
+
+export interface QuestionsInterface {
+  name: string;
+  steps: StepInterface[];
+  onSubmit: (...args) => void;
+  onChange?: (...args) => void;
+  onActiveStep?: (...args) => void;
+  /* `forceQuestionName` should be used by an app developer
+   * to force Questions to render a specified question by name */
+  forceStepName?: string;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  initialData?: any;
+  localDraft?: boolean;
+  errorLabels?: Record<string, string>;
+}
+
+export interface QuestionsContextInterface {
+  currentStep: StepInterface;
+  steps: StepInterface[];
+  submitStep: (...args) => void;
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  data?: any;
+  onActiveStep?: (...args) => void;
+}

package/src/__stories__/AutoCompleteField.tsx

@@ -0,0 +1,45 @@
+import React, { Suspense } from 'react';
+import FormBuilder from '@digigov/form/FormBuilder';
+import { Field } from '@digigov/form/Field';
+import { FieldSpec } from '@digigov/form/types';
+import Button from '@digigov/ui/core/Button';
+import { results } from '@digigov/ui/admin/AutoComplete/utils';
+const fields: FieldSpec[] = [
+  {
+    key: 'autocomplete',
+    label: { primary: 'An autocomplete field' },
+    required: true,
+    type: 'choice:single',
+    extra: {
+      component: 'AutoComplete',
+      options: results.map((r) => {
+        return {
+          label: {
+            primary: r,
+            secondary: `Country: ${r}`,
+          },
+          value: r.toLowerCase(),
+        };
+      }),
+    },
+  },
+];
+
+const initialValues = {};
+
+export const AutoCompleteField = () => (
+  <Suspense fallback={<div>loading</div>}>
+    <FormBuilder
+      fields={fields}
+      onSubmit={(data) => {
+        console.log(data);
+      }}
+      initial={initialValues}
+    >
+      {fields.map((field) => (
+        <Field key={field.key} name={field.key} />
+      ))}
+      <Button type="submit">Submit</Button>
+    </FormBuilder>
+  </Suspense>
+);

package/src/__stories__/IntField.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import FormBuilder from '@digigov/form/FormBuilder';
+import { Field } from '@digigov/form/Field';
+import { FieldSpec } from '@digigov/form/types';
+import Button from '@digigov/ui/core/Button';
+const fields: FieldSpec[] = [
+  {
+    key: 'number_required',
+    label: { primary: 'A positive number', secondary: 'required' },
+    required: true,
+    type: 'int',
+  },
+  {
+    key: 'number_not_required',
+    label: { primary: 'A positive number', secondary: 'not required' },
+    required: false,
+    type: 'int',
+  },
+];
+
+const initialValues = {};
+
+export const IntField = () => {
+  return (
+    <FormBuilder
+      fields={fields}
+      onSubmit={(data) => {
+        console.log(data);
+      }}
+      initial={initialValues}
+    >
+      {fields.map((field) => (
+        <Field key={field.key} name={field.key} />
+      ))}
+      <Button type="submit">Submit</Button>
+    </FormBuilder>
+  );
+};