Implement Automatic UI Docs for Tailwind Config

[mrtimbrook]

Work in progress

The Plan

Add a task to parse the tailwind config and automatically generate stories for each section of the tailwind docs (color, typography, grid, etc). Build in a way to add support for other UI frameworks in the future?

Users should be able to:

• enable/disable the auto-documentation No longer required - will be handled by a dedicated task.
• ✅ specify the tailwind config path
• ✅ specify which pieces of documentation they would like to render
• ✅ Use the UI Docs components in the app's own stories to create more curated documentation, for example, using the colors UI component in a docs-page component

In Progress

Added

• Added a task to parse the tailwind config into a php file.
• Added a UiDataStore to store the data in the same way as the DataStore and the UI Docs components can then read from this to generate the documentation.
• Added a colors component to render the colors information

Todo:

• Update task to automatically generate the stories.json files No longer required - will be handled blast:generate-stories task
• Add enable/disable to config/blast.php No longer required - will be handled by a dedicated task.
• ✅ Add tailwind config path to config/blast.php
• ✅ Add ability to select areas to auto-document to config/blast.php
• ✅ Build out other components
• Add support for colors defined as CSS variables (as used in A17 Tailwind Plugins)

[mrtimbrook]

To use the color component - use <x-ui-colors />. It supports a type prop which supports the values - bg or background, text, border. If no type is defined it will load all colors in one block.

For Example:

@storybook([
    'layout' => 'fullscreen',
    'args' => []
])

<x-docs-page
    title="Colors"
    label="Blast"
    description="Documentation for the project's colors"
>
  <h2 class="blast-mt-10 blast-text-4xl blast-font-bold">Background (bg) Colors</h2>
  <x-ui-colors type="bg" class="blast-mt-3" />

  <h2 class="blast-mt-10 blast-text-4xl blast-font-bold">Background (background) Colors</h2>
  <x-ui-colors type="background" class="blast-mt-3" />

  <h2 class="blast-mt-10 blast-text-4xl blast-font-bold">Text Colors</h2>
  <x-ui-colors type="text" class="blast-mt-3" />

  <h2 class="blast-mt-10 blast-text-4xl blast-font-bold">Border Colors</h2>
  <x-ui-colors type="border" class="blast-mt-3" />

  <h2 class="blast-mt-10 blast-text-4xl blast-font-bold">All Colors</h2>
  <x-ui-colors type="all" class="blast-mt-3" />
</x-docs-page>

[mrtimbrook]

I've updated it so that we use a task to generate the documentation. It'll work in a similar way to the blast:demo task where it copies files to the stories directory with the app's other components. The benefits of this are:

• No modifications to the blast:generate-stories task
• You can modify the documentation stories directly within your app
• Removes auto-generation so keeps config simpler