{"id":28458149,"url":"https://github.com/9d8dev/slider","last_synced_at":"2025-07-02T05:31:38.923Z","repository":{"id":225860650,"uuid":"767049978","full_name":"9d8dev/slider","owner":"9d8dev","description":"Multi-step form template built with Next.js and Shadcn","archived":false,"fork":false,"pushed_at":"2024-03-05T20:58:59.000Z","size":1424,"stargazers_count":4,"open_issues_count":0,"forks_count":1,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-07-01T02:49:39.171Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://slider.9d8.dev","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/9d8dev.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-03-04T16:04:24.000Z","updated_at":"2025-02-18T09:11:02.000Z","dependencies_parsed_at":"2024-03-04T18:33:15.656Z","dependency_job_id":null,"html_url":"https://github.com/9d8dev/slider","commit_stats":null,"previous_names":["9d8dev/slider"],"tags_count":0,"template":true,"template_full_name":null,"purl":"pkg:github/9d8dev/slider","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9d8dev%2Fslider","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9d8dev%2Fslider/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9d8dev%2Fslider/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9d8dev%2Fslider/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/9d8dev","download_url":"https://codeload.github.com/9d8dev/slider/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/9d8dev%2Fslider/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":263081337,"owners_count":23410860,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2025-06-07T00:10:04.183Z","updated_at":"2025-07-02T05:31:38.915Z","avatar_url":"https://github.com/9d8dev.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Multi-Step Form Component Documentation\n\nThis documentation provides an overview of the Multi-Step Form component implemented in TypeScript using React. The component is designed to handle forms that span multiple steps, with validation at each step using Zod for schema validation and React Hook Form for form state management.\n\n## Overview\n\nThe Multi-Step Form component orchestrates the logic for navigating through multiple steps in a form, validating inputs at each step before proceeding. It leverages the [react-hook-form](https://github.com/9d8dev/slider/package.json#24%2C6-24%2C6) library for form state management and [zod](https://github.com/9d8dev/slider/package.json#27%2C6-27%2C6) for schema validation.\n\n### Key Features\n\n- Multi-step navigation with forward and backward capabilities.\n- Schema-based validation using Zod.\n- Context-based state management for form data across different steps.\n- Customizable form fields and validation messages.\n\n### Dependencies\n\n- [react](https://github.com/9d8dev/slider/package.json#13%2C16-13%2C16)\n- [react-hook-form](https://github.com/9d8dev/slider/package.json#24%2C6-24%2C6)\n- `@hookform/resolvers/zod`\n- [zod](https://github.com/9d8dev/slider/package.json#27%2C6-27%2C6)\n- [framer-motion](https://github.com/9d8dev/slider/package.json#19%2C6-19%2C6) for animations\n\n### Form Schema\n\nThe form schema is defined using Zod, allowing for straightforward validation rules. Here's an example schema:\n\n```typescript\nconst formSchema = z.object({\n  first_name: z.string().min(2, {\n    message: \"First name must be at least 2 characters.\",\n  }),\n  last_name: z.string().min(2, {\n    message: \"Last name must be at least 2 characters.\",\n  }),\n  ex_options: z.string().min(1, {\n    message: \"Please select an option.\",\n  }),\n  email: z.string().email(),\n  phone: z.string().min(10, {\n    message: \"Phone number must be at least 10 characters.\",\n  }),\n});\n```\n\n### Form Context\n\nA `FormContext` is created to pass the form instance and allow each step to access the form state and methods.\n\n```typescript\nconst FormContext = createContext\u003cUseFormReturn\u003cz.infer\u003ctypeof formSchema\u003e\u003e | null\u003e(null);\n```\n\n### Step Components\n\nEach step of the form is represented by a component (`FirstStep`, `SecondStep`, `ContactStep`). These components render the form fields relevant to that step and utilize the `FormContext` to access and manipulate the form state.\n\n### Navigation and Validation\n\nThe form supports navigation between steps with validation at each step. The `nextStep` function triggers validation for the current step before moving to the next step.\n\n```typescript\nconst nextStep = async () =\u003e {\n  const fieldsToValidate = stepValidationFields[currentStep - 1];\n  const isValid = await form.trigger(fieldsToValidate);\n  if (!isValid) return;\n\n  setCurrentStep(currentStep \u003c totalSteps ? currentStep + 1 : currentStep);\n};\n```\n\n### Step Indicator\n\nA `StepIndicator` component visually indicates the current step and the total number of steps in the form.\n\n### Usage\n\nTo use the Multi-Step Form, include the `MultiStepForm` component in your application. The form and its steps are fully configured and ready to use.\n\n```typescript\n\u003cMultiStepForm /\u003e\n```\n\nThis component provides a robust solution for implementing multi-step forms in React applications, with built-in validation and state management.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F9d8dev%2Fslider","html_url":"https://awesome.ecosyste.ms/projects/github.com%2F9d8dev%2Fslider","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2F9d8dev%2Fslider/lists"}