Every component directory must include a main file (an entry file). The directory can be located anywhere in the Workspace (directory), excluding only the node_modules directory and other Component Directories.
A common example component for a directory could be the following:
└── ui/my-welcome # Component directory ├── index.tsx # Entry file. ├── my-welcome.tsx # Main file. ├── my-welcome.spec.tsx # Test file. ├── my-welcome.composition.tsx # Compositions for simulating the component in different states and contexts. └── my-welcome.docs.mdx # Docs file for the component.
This structure has several benefits:
- Directory structure is easily consumable by placing all the related files together.
- File references become shorter and more readable.
- Easy to move components around in the workspace.
- Simple refactoring workflow, as changes are consolidated to the same place.
indexis a single point for consumers and maintainers to start from when doing any operation on the component.
Tracking a directory as a Component can be done with the
bit add command.
bit add path/to/component-dir --id ui/my-component
To learn more on tracking components in the Workspace. Head over to the Tracking Components section.
Removing a specific Component Directory in the Workspace can be achieved by using the
bit remove command without the
--delete-files flag which also removes the entire directory.
bit remove ui/my-welcome