Merge pull request #14 from MaxymilianSa/feature/changes-in-naming-co…

…nvention Change naming convention
MaxymilianSa · Nov 21, 2024 · 478fccd · 478fccd
2 parents b68803a + 236f182
commit 478fccd
Show file tree

Hide file tree

Showing 71 changed files with 281 additions and 189 deletions.
diff --git a/.gitignore b/.gitignore
@@ -13,6 +13,8 @@
 
 # production
 /build
+/dist
+tsconfig.tsbuildinfo
 
 # misc
 .DS_Store

diff --git a/README.md b/README.md
@@ -19,9 +19,21 @@ Live demo - [open](https://react-formik-abstraction.vercel.app/)
 
 ## Naming Convention
 
-We will use a **PascalCase**. Pascal case is a programming variable naming convention where the first letter of each compound word in a variable is capitalized.
+We will use a **kebab-case**. Kebab case is a programming variable naming convention where all letters are lowercase and words are separated by hyphens.
 
-Here are some examples of kebab case: `ComponentName.tsx` and `OtherComponent.tsx`.
+Here are some examples of kebab case: `component-name.tsx` and `other-component.tsx`.
+
+## Component Structure Convention
+
+When creating a component, we will follow the convention of splitting it into separate files for the controller, model, view, index, and stories. This helps in maintaining a clean and organized codebase.
+
+Here is the structure:
+
+- `component-name.controller.ts` - Contains the logic and state management for the component.
+- `component-name.model.ts` - Defines the data structures and types used by the component.
+- `component-name.view.tsx` - Contains the JSX and styling for the component.
+- `component-name.stories.tsx` - Contains the Storybook stories for the component.
+- `index.ts` - Exports the component and any related hooks or utilities.
 
 ## Directory Structure
 

diff --git a/index.html b/index.html
@@ -1,8 +1,7 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="en">
   <head>
     <meta charset="UTF-8" />
-    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Multi-step form</title>
     <link rel="preconnect" href="https://fonts.googleapis.com" />

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,9 +1,8 @@
-import { StepsProvider } from '@providers/StepsProvider';
+import Content from '@/components/content';
+import Layout from '@/components/layout';
+import { StepsProvider } from '@/providers/steps.provider';
 
-import { Content } from '@/components/Content/Content';
-import { Layout } from '@/components/Layout/Layout';
-
-import './App.css';
+import './global.css';
 
 const App = () => (
   <StepsProvider>

diff --git a/src/components/Content/Content.tsx b/src/components/Content/Content.tsx
@@ -1,15 +1,14 @@
-import { Form } from '@components/Form/Form';
-
-import { Actions } from '@/components/Layout/components/Actions';
-import { steps } from '@/const/formData';
+import Form from '@/components/form';
+import { Actions } from '@/components/layout/components/actions';
+import { steps } from '@/const/form-data';
 import { clsxm } from '@/lib/clsxm';
 
-import { Header } from './components/Header';
-import { Summary } from './steps/Summary';
-import { stepsComponent } from './ContentModel';
-import { useContent } from './useContent';
+import { Header } from './components/header';
+import { useContent } from './content.controller';
+import { stepsComponent } from './content.model';
+import { Summary } from './steps';
 
-export const Content = () => {
+const Content = () => {
   const { active, form, showSummary } = useContent();
 
   return (
@@ -32,3 +31,5 @@ export const Content = () => {
     </div>
   );
 };
+
+export default Content;
diff --git a/src/components/Content/components/header/header.model.ts b/src/components/Content/components/header/header.model.ts
@@ -0,0 +1,4 @@
+export type HeaderProps = {
+  description?: string;
+  title: string;
+};
diff --git a/src/components/Content/components/Header.tsx → ...ents/Content/components/header/header.tsx b/src/components/Content/components/Header.tsx → ...ents/Content/components/header/header.tsx
@@ -1,7 +1,4 @@
-export type HeaderProps = {
-  description?: string;
-  title: string;
-};
+import type { HeaderProps } from './header.model';
 
 export const Header = ({ title, description }: HeaderProps) => (
   <div className="flex flex-col gap-2 lg:gap-3">

diff --git a/src/components/Content/components/header/index.ts b/src/components/Content/components/header/index.ts
@@ -0,0 +1,2 @@
+export { Header } from './header';
+export type { HeaderProps } from './header.model';
diff --git a/src/components/Content/useContent.tsx → src/components/Content/content.controller.ts b/src/components/Content/useContent.tsx → src/components/Content/content.controller.ts
@@ -1,9 +1,9 @@
 import { useState } from 'react';
-import { useForm } from '@components/Form/useForm';
 
-import { useStepsContext } from '@/providers/StepsProvider';
+import { useForm } from '@/components/form/form.controller';
+import { useStepsContext } from '@/providers/steps.provider';
 
-import { initialValues } from './ContentModel';
+import { initialValues } from './content.model';
 
 export const useContent = () => {
   const {

diff --git a/src/components/Content/ContentModel.tsx → src/components/Content/content.model.tsx b/src/components/Content/ContentModel.tsx → src/components/Content/content.model.tsx
@@ -1,7 +1,4 @@
-import { FinishingUp } from './steps/FinishingUp';
-import { PersonalInfo } from './steps/PersonalInfo';
-import { PickAddons } from './steps/PickAddons';
-import { SelectPlan } from './steps/SelectPlan';
+import { FinishingUp, PersonalInfo, PickAddons, SelectPlan } from './steps';
 
 export const initialValues = {
   name: '',

diff --git a/src/components/Content/index.ts b/src/components/Content/index.ts
@@ -0,0 +1 @@
+export { default } from './content';
diff --git a/src/components/Content/steps/FinishingUp.tsx → ...components/Content/steps/finishing-up.tsx b/src/components/Content/steps/FinishingUp.tsx → ...components/Content/steps/finishing-up.tsx
@@ -1,9 +1,9 @@
-import { FormikContextType, FormikValues, useFormikContext } from 'formik';
+import { type FormikContextType, type FormikValues, useFormikContext } from 'formik';
 
-import { planOptions } from '@/const/formData';
-import { addonOptions } from '@/const/formData';
+import { planOptions } from '@/const/form-data';
+import { addonOptions } from '@/const/form-data';
 import { sumNumbers } from '@/lib/helpers';
-import { useStepsContext } from '@/providers/StepsProvider';
+import { useStepsContext } from '@/providers/steps.provider';
 
 export const FinishingUp = () => {
   const { values }: FormikContextType<FormikValues> = useFormikContext();

diff --git a/src/components/Content/steps/index.ts b/src/components/Content/steps/index.ts
@@ -0,0 +1,5 @@
+export { FinishingUp } from './finishing-up';
+export { PersonalInfo } from './personal-info';
+export { PickAddons } from './pick-addons';
+export { SelectPlan } from './select-plan';
+export { Summary } from './summary';
diff --git a/...components/Content/steps/PersonalInfo.tsx → ...omponents/Content/steps/personal-info.tsx b/...components/Content/steps/PersonalInfo.tsx → ...omponents/Content/steps/personal-info.tsx
@@ -1,4 +1,4 @@
-import { Input } from '@components/Form/Fields/Input';
+import { Input } from '@/components/form';
 
 export const PersonalInfo = () => (
   <div className="flex flex-col gap-6">

diff --git a/src/components/Content/steps/PickAddons.tsx → src/components/Content/steps/pick-addons.tsx b/src/components/Content/steps/PickAddons.tsx → src/components/Content/steps/pick-addons.tsx
@@ -1,7 +1,7 @@
-import { FormikContextType, FormikValues, useFormikContext } from 'formik';
+import { type FormikContextType, type FormikValues, useFormikContext } from 'formik';
 
-import { Checkbox } from '@/components/Form/Fields/Checkbox';
-import { addonOptions } from '@/const/formData';
+import { Checkbox } from '@/components/form';
+import { addonOptions } from '@/const/form-data';
 
 export const PickAddons = () => {
   const { values }: FormikContextType<FormikValues> = useFormikContext();

diff --git a/src/components/Content/steps/SelectPlan.tsx → src/components/Content/steps/select-plan.tsx b/src/components/Content/steps/SelectPlan.tsx → src/components/Content/steps/select-plan.tsx
@@ -1,15 +1,14 @@
-import { FormikContextType, FormikValues, useFormikContext } from 'formik';
+import { type FormikContextType, type FormikValues, useFormikContext } from 'formik';
 
-import { RadioBox } from '@/components/Form/Fields/RadioBox';
-import { SwitchButton } from '@/components/Form/Fields/SwitchButton';
-import { planOptions } from '@/const/formData';
+import { RadioBox, Switch } from '@/components/form';
+import { planOptions } from '@/const/form-data';
+
+const durationClassName = (isActive: boolean) =>
+  isActive ? 'text-denim text-sm font-medium' : 'text-grey text-sm font-medium';
 
 export const SelectPlan = () => {
   const { values }: FormikContextType<FormikValues> = useFormikContext();
 
-  const durationClassName = (isActive: boolean) =>
-    isActive ? 'text-denim text-sm font-medium' : 'text-grey text-sm font-medium';
-
   return (
     <div className="w-full flex flex-col gap-6">
       <div className="w-full flex flex-col gap-3 lg:flex-row">
@@ -28,7 +27,7 @@ export const SelectPlan = () => {
       </div>
       <div className="bg-very-light-grey w-full h-12 rounded-lg flex justify-center items-center gap-6">
         <p className={durationClassName(values.duration === '0')}>Monthly</p>
-        <SwitchButton name="duration" />
+        <Switch name="duration" />
         <p className={durationClassName(values.duration === '1')}>Yearly</p>
       </div>
     </div>

diff --git a/src/components/Form/Form.tsx b/src/components/Form/Form.tsx
@@ -1,15 +1,8 @@
-import { PropsWithChildren } from 'react';
-import { FormikContextType, FormikProvider, FormikValues } from 'formik';
+import { FormikProvider } from 'formik';
 
-import { useFormType } from './useForm';
+import type { FormProps } from './form.model';
 
-export type FormType = {
-  className?: string;
-  form: FormikContextType<FormikValues>;
-} & Pick<useFormType, 'children'> &
-  PropsWithChildren;
-
-export const Form = ({ children, className, form }: FormType) => (
+const Form = ({ children, className, form }: FormProps) => (
   <FormikProvider value={form}>
     <form onSubmit={form.handleSubmit} className={className}>
       <fieldset disabled={form.isSubmitting} className={className}>
@@ -18,3 +11,5 @@ export const Form = ({ children, className, form }: FormType) => (
     </form>
   </FormikProvider>
 );
+
+export default Form;
diff --git a/src/components/Form/UI/SwitchButton/SwitchButton.stories.tsx b/src/components/Form/UI/SwitchButton/SwitchButton.stories.tsx
diff --git a/src/components/Form/components/form-field/form-field.controller.ts b/src/components/Form/components/form-field/form-field.controller.ts
@@ -0,0 +1,13 @@
+import type { FormFieldProps } from './form-field.model';
+
+export const useFormField = <P extends Pick<FormFieldProps, 'name' | 'label' | 'className'>>(
+  props: P,
+) => {
+  const { label, name, className, ...otherProps } = props;
+  const id = name;
+
+  return {
+    formFieldProps: { id, name, label, className },
+    childProps: { ...otherProps, id, name },
+  };
+};
diff --git a/src/components/Form/components/form-field/form-field.model.ts b/src/components/Form/components/form-field/form-field.model.ts
@@ -0,0 +1,8 @@
+import { PropsWithChildren } from 'react';
+
+export type FormFieldProps = {
+  className?: string;
+  id: string;
+  label?: string;
+  name: string;
+} & PropsWithChildren;
diff --git a/src/components/Form/FormField.tsx → ...Form/components/form-field/form-field.tsx b/src/components/Form/FormField.tsx → ...Form/components/form-field/form-field.tsx
@@ -1,27 +1,9 @@
-import { PropsWithChildren } from 'react';
 import { clsxm } from '@lib/clsxm';
 import { useFormikContext } from 'formik';
 
-type FormFieldType = {
-  className?: string;
-  id: string;
-  label?: string;
-  name: string;
-} & PropsWithChildren;
+import type { FormFieldProps } from './form-field.model';
 
-export const useFormField = <P extends Pick<FormFieldType, 'name' | 'label' | 'className'>>(
-  props: P,
-) => {
-  const { label, name, className, ...otherProps } = props;
-  const id = name;
-
-  return {
-    formFieldProps: { id, name, label, className },
-    childProps: { ...otherProps, id, name },
-  };
-};
-
-export const FormField = ({ children, name, id, label, className }: FormFieldType) => {
+const FormField = ({ children, name, id, label, className }: FormFieldProps) => {
   const form = useFormikContext();
   const { error } = form.getFieldMeta(name);
 
@@ -39,3 +21,5 @@ export const FormField = ({ children, name, id, label, className }: FormFieldTyp
     </div>
   );
 };
+
+export default FormField;
diff --git a/src/components/Form/components/form-field/index.ts b/src/components/Form/components/form-field/index.ts
@@ -0,0 +1,3 @@
+export { default } from './form-field';
+export { useFormField } from './form-field.controller';
+export type { FormFieldProps } from './form-field.model';
diff --git a/src/components/Form/components/ui/checkbox/checkbox.model.ts b/src/components/Form/components/ui/checkbox/checkbox.model.ts
@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+
+import { AddonType } from '@/@types/addon';
+
+export type CheckboxUIProps = {
+  className?: string;
+  content: AddonType;
+  duration: 'mo' | 'yr';
+} & Omit<ComponentProps<'input'>, 'type' | 'content'>;
diff --git a/...nts/Form/UI/Checkbox/Checkbox.stories.tsx → ...mponents/ui/checkbox/checkbox.stories.tsx b/...nts/Form/UI/Checkbox/Checkbox.stories.tsx → ...mponents/ui/checkbox/checkbox.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta } from '@storybook/react';
 
-import Checkbox from './Checkbox';
+import Checkbox from './checkbox';
 
 const meta: Meta<typeof Checkbox> = {
   title: 'Checkbox',

diff --git a/src/components/Form/UI/Checkbox/Checkbox.tsx → .../Form/components/ui/checkbox/checkbox.tsx b/src/components/Form/UI/Checkbox/Checkbox.tsx → .../Form/components/ui/checkbox/checkbox.tsx
@@ -1,15 +1,8 @@
-import { ComponentProps } from 'react';
-
-import { AddonType } from '@/@types/addon';
 import { clsxm } from '@/lib/clsxm';
 
-import { ReactComponent as CheckIcon } from '~/svg/check.svg';
+import type { CheckboxUIProps } from './checkbox.model';
 
-export type CheckboxUIProps = {
-  className?: string;
-  content: AddonType;
-  duration: 'mo' | 'yr';
-} & Omit<ComponentProps<'input'>, 'type' | 'content'>;
+import { ReactComponent as CheckIcon } from '~/svg/check.svg';
 
 const Checkbox = ({ className, content, duration, name, ...props }: CheckboxUIProps) => (
   <label

diff --git a/src/components/Form/components/ui/checkbox/index.ts b/src/components/Form/components/ui/checkbox/index.ts
@@ -0,0 +1,2 @@
+export { default } from './checkbox';
+export type { CheckboxUIProps } from './checkbox.model';
diff --git a/src/components/Form/components/ui/input/index.ts b/src/components/Form/components/ui/input/index.ts
@@ -0,0 +1,2 @@
+export { default } from './input';
+export type { InputUIProps } from './input.model';
diff --git a/src/components/Form/components/ui/input/input.model.ts b/src/components/Form/components/ui/input/input.model.ts
@@ -0,0 +1,6 @@
+import { ComponentProps } from 'react';
+
+export type InputUIProps = {
+  className?: string;
+  error?: string;
+} & ComponentProps<'input'>;
diff --git a/...components/Form/UI/Input/Input.stories.ts → ...Form/components/ui/input/input.stories.ts b/...components/Form/UI/Input/Input.stories.ts → ...Form/components/ui/input/input.stories.ts
@@ -1,6 +1,6 @@
 import type { Meta } from '@storybook/react';
 
-import Input from './Input';
+import Input from './input';
 
 const meta: Meta<typeof Input> = {
   title: 'Input',

diff --git a/src/components/Form/UI/Input/Input.tsx → ...onents/Form/components/ui/input/input.tsx b/src/components/Form/UI/Input/Input.tsx → ...onents/Form/components/ui/input/input.tsx
@@ -1,11 +1,6 @@
-import { ComponentProps } from 'react';
-
 import { clsxm } from '@/lib/clsxm';
 
-export type InputUIProps = {
-  className?: string;
-  error?: string;
-} & ComponentProps<'input'>;
+import type { InputUIProps } from './input.model';
 
 const Input = ({ className, error, ...props }: InputUIProps) => (
   <input

diff --git a/src/components/Form/components/ui/radio-box/index.ts b/src/components/Form/components/ui/radio-box/index.ts
@@ -0,0 +1,2 @@
+export { default } from './radio-box';
+export type { RadioBoxUIProps } from './radio-box.model';
diff --git a/src/components/Form/components/ui/radio-box/radio-box.model.ts b/src/components/Form/components/ui/radio-box/radio-box.model.ts
@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+
+import { PlanType } from '@/@types/plan';
+
+export type RadioBoxUIProps = {
+  className?: string;
+  duration: 'mo' | 'yr';
+} & PlanType &
+  Omit<ComponentProps<'input'>, 'type' | 'content'>;
diff --git a/...nts/Form/UI/RadioBox/RadioBox.stories.tsx → ...onents/ui/radio-box/radio-box.stories.tsx b/...nts/Form/UI/RadioBox/RadioBox.stories.tsx → ...onents/ui/radio-box/radio-box.stories.tsx
@@ -1,6 +1,6 @@
 import type { Meta } from '@storybook/react';
 
-import RadioBox from './RadioBox';
+import RadioBox from './radio-box';
 
 import { ReactComponent as ArcadeIcon } from '~/svg/arcade.svg';
-Original file line number
+Diff line change
@@ Expand Up / @@ -13,6 +13,8 @@ @@
     # production
     /build
+    /dist
+    tsconfig.tsbuildinfo
     # misc
     .DS_Store
@@ Expand Down @@
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { Header } from './header';
		export type { HeaderProps } from './header.model';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default } from './checkbox';
		export type { CheckboxUIProps } from './checkbox.model';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default } from './input';
		export type { InputUIProps } from './input.model';
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default } from './radio-box';
		export type { RadioBoxUIProps } from './radio-box.model';