React(Vite) Fit Widget Project

file naming convention

• kebab-case for file name that has more than one word
• add extension to the file before the language ext(eg, .jsx)

button_component.jsx
capitalize.util.js
button.icon.jsx
button.stories.jsx

I hope this example demonstrates why using this naming convention is beneficial. It makes it easier to identify the type of file and its purpose.

It's also good practice to use the .jsx extension for any file that contains JSX, as it makes it easy to identify the content of files and gain an idea about the logic inside without opening them. Additionally, if you have icon extensions, it will make it easy to spot these files.

With this naming convention, it's okay to use a flat folder structure, but I think it's better to put some files inside folders when it makes sense, such as the lib folder containing atomic components (components that cannot be split into any other separate components).

I also think there is no need to create a components folder, but I'm open to other ideas about that. I just think we can put the components that are combinations of atomic components inside the src folder directly.

For pages/screens, we can put them inside the pages/screens folder, and the naming doesn't matter as much here. We can also use extensions like .page or .screen for these files.

The page components can have both kinds of components in the src folder or in the lib folder.

PropTypes

While it might seem tedious to write PropTypes for every component, it's really helpful for the team to know what props are required for the component and what type of data it should be. Additionally, it's helpful for the IDE to give you hints about the props that you should pass to the component. Moreover, it's really good for Storybook to generate controls for the props that you have in the component.

The linter requires all these rules except for the file naming convention. Sorry if this sounds like a lot, but I think it's really helpful to have these rules to ensure we have clean code overall.