@kogk/gatsby-plugin-ui-lib

Kind of like storybook but better

Table of Contents

• How does it work?
• Features
• Install
• How to use
• TODO

How does it work?

You supply your components with an mdx file, where it has the same name as the component filename. If one exists, it gets added to an automatically generated storybook-like thing.

Features

• Allows you to work on and develop your UI components faster
• Acts as a component inventory

Install

yarn add @kogk/gatsby-plugin-ui-lib

How to use

These are the plugin's options along with their default values

// In your gatsby-config.js
plugins: [
  {
    resolve: '@kogk/gatsby-plugin-ui-lib',
    options: {
      // Required - tells the plugin what path to search for components in
      searchPath: require.resolve('./src/components'),
      // where the URL of the items should be at
      baseUrl: '/ui-docs/',
      baseComponent: require.resolve('./src/components/Directory/Directory.js'),
      layoutComponent: require.resolve(
        './src/components/DefaultLayout/DefaultLayout.js'
      )
    }
  }
]

TODO

• [ ] Knobs-like thing for supplying props in realtime
• [ ] Groupping/foldering for components
• [ ] Some documented interface for creating documentation links without it being associated with a component