@yattho/component-metadata NPM

Yattho Component Metadata

Inspired by Primer component-metadata package

A place to store component metadata shared across all implementations of Yattho.

Installation

Install with npm or yarn:

npm install @yattho/component-metadata

yarn add @yattho/component-metadata

Usage

import metadata from "@yattho/component-metadata";

metadata.components.progress_bar;
// {
//   id: 'progress_bar',
//   displayName: 'Progress bar',
//   description: 'Use progress bars to visualize task completion.',
//   implementations: {
//     react: 'https://yattho.com/components/ProgressBar',
//     viewComponent: 'https://yattho.com/view-components/components/progressbar',
//     css: 'https://yattho.com/css/components/progress'
//   }
// }

Metadata

Each component should have the following metadata:

Name	Description	Guidelines
`id` (required)	A unqiue string used to identify the component	The `id` of the component should be the component name in snake case (e.g. `"progress_bar"`)
`displayName` (required)	The name of the component	Use sentence case (e.g. `"Progress bar"`)
`description` (required)	Describe how the component should be used	Use active voice (e.g. `"Use progress bars to ..."` not `"Progress bars are used to ..."`)
`guidelines`	URL to design guidelines for the component
`implementations.react`	URL to React implementation of the component
`implementations.viewComponent`	URL to ViewComponent implementation of the component
`implementations.css`	URL to CSS impelementation of the component
`implementations.figma`	URL to Figma implementation of the component

@yattho/gatsby-theme-rigitus

0.0.1

1 year ago