Garden follows a standardized approach for shared interface and type definitions. These standards result in code that is structured for reuse and expose type primitives that are extracted for generated API documentation. The following rules, built upon element component structures, define a baseline for standard Garden interfaces.
- naming
- all interfaces use
IComponentXxxProps
convention - all types use
CamelCase
convention - all array constants use
UPPER_CASE
convention
- all interfaces use
- all exported element component interfaces live
under a
src/types
folder- array constants are defined as const, i.e.
export const ARRAY = [ ... ] as const
; - interface types are defined by reusing array constants when possible, i.e.
export type TypeDefinition = typeof ARRAY[number]
; - non-shared interfaces (view, context, etc.) are not placed under
src/types
, but rather live next to the components that they type
- array constants are defined as const, i.e.
- when possible, view component (
IStyledXxxProps
) and context interfaces are defined in terms of the exported element component interface. Familiarity with utility types is essential for understanding extension type transformations. - javascript enums are not acceptable for use in type definitions – enums are generally discouraged in modern TypeScript, result in code that is difficult for docgen to parse, and structures that run counter to the grain of the web
Take careful notice of the element interfaces and constants that are required to
build a component’s demo story. These are the same interfaces and
constants that should be exported from the package’s index.ts
as they will
likely offer a similar benefit to external component consumers. Also note,
that Garden should not export type
definitions. These are available for reuse
through the publicly exported interface
(i.e. IButtonProps['size']
).