Component naming and folder structure are not as strict as in the case of the block, but for the sake of consistency, it would be better to follow the same principles.
Basic component structure should like something this:
| | |____component-name-editor.js
| | |____component-name-options.js
| | |____component-name-toolbar.js
For example, you can check storybook.
This file contains the front-end part (the view) of the component, used in your project when the page renders. This file shouldn't contain any business logic, just presenting the passed attributes.
This file only contains the editor styles for the component. Editor styles are only applied to the editor screen in the admin.
This file contains the editor and the front-end styles for the component. These styles will be applied to both the editor screen and your front end. This is just the way the core editor is set up. Each component has the
blockClass attribute that returns a block name with a block prefix, for example:
.block-intro. You can/must use this naming convention when stying your block. Just like with any other SCSS components, the Block Editor block must also be standalone and easy to copy to different projects (reusable).
Note on the component styles
Component styles should only style the inner component layout and styles such as font sizes, alignment, etc. Any layout placement should be handled either by the wrapper, or a layout.