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.
    └── # 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.
  • index is a single point for consumers and maintainers to start from when doing any operation on the component.

Adding a directory as a 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 component from the workspace

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