Component Directory

A Component Directory is a directory for a Component in the Workspace. The mapping of Components to their directories can be found in the .bitmap file (see the rootDir property).

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.
Copied

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.
• index is 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
Copied

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
Copied