Skip to content

Commit

Permalink
Add Naming Conventions section
Browse files Browse the repository at this point in the history
  • Loading branch information
ciampo committed Jul 31, 2024
1 parent 058b4e2 commit 545e074
Showing 1 changed file with 48 additions and 0 deletions.
48 changes: 48 additions & 0 deletions packages/components/CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ This set of guidelines should apply especially to newly introduced components. I
- [Compatibility](#compatibility)
- [Compound components](#compound-components)
- [Components & Hooks](#components--hooks)
- [Naming Conventions](#naming-conventions)
- [TypeScript](#typescript)
- [Styling](#styling)
- [Context system](#context-system)
Expand Down Expand Up @@ -231,6 +232,53 @@ A couple of good examples of how hooks are used for composition are:
TDB -->

## Naming Conventions

It is recommended for compound components to use dot notation to separate the namespace from the individual component names. The top-level compound component should be called `Root`.

In comparison to compound components, it is recommended for monolithic components not to use dot-notation or namespacing in their export names.

Dedicated React context should be also using the dot notation, while hooks should not

```tsx
import { Component, useComponent } from '@wordpress/components';
import { useContext } from '@wordpress/element';

function CompoundExample() {
return (
<Component.Root>
<Component.SubComponent />
</Component.Root>
);
}

function MonolithExample() {
return <Component />;
}

function ContextProviderExample() {
return (
<Component.Context.Provider value={ /* ... */ }>
{ /* React tree */ }
</Component.Context.Provider>
);
}

function ContextConsumerExample() {
const componentContext = useContext( Component.Context );

// etc
}

function HookExample() {
const hookReturnValue = useComponent();

// etc.
}
```

The suggested naming conventions can help consumers of the package to distinguish between monolithic a compound components, and allows components to expose at the same time a monolithic and a compound version if needed.

## TypeScript

We strongly encourage using TypeScript for all new components.
Expand Down

0 comments on commit 545e074

Please sign in to comment.