Feature/components demo

[sparklestheunicorn]

This PR is the first example of styling components in line with issue #93. It adds a checkbox and button-bar-style radio buttons.

If you will be visually styling components per the Manhattan Hydraulics mock-ups, this is a good example. Check out the changes in:

• components/radioButtons.tsx - Shows how to apply a treatment prop to a UI component to give it a particular treatment
• styles/radio-buttons.js - Shows how to write WindiCSS shortcuts to create general shared styles. Styles specific to a particular component should be added as classes to that component's className prop (See checkbox.tsx - notice that the CSS module is sparse, providing only styling not currently supported by WindiCSS).
• windi.config.ts - Adds the shortcut so that it can be applied globally

Other changes:

• Add a component demo page
• Adds props to existing UI components
• Adds a checkbox component
• Adds support for importing SVGs for next/image

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/blacksocialists/dual-power-app/761BJABLMMEc1hKY7KHnycRwXYk2
✅ Preview: https://dual-power-app-git-feature-components-demo-blacksocialists.vercel.app

[replygirl]

📝 Changed routes:

/components
(view full size)

Commit 4d240ff (https://dual-power-app-b3lvyf35l-blacksocialists.vercel.app).

[jackhajb]

@mis4mike On focus I'm noticing the components all get a blue outline. Think we should override.

[replygirl]

turns out windicss plugins are super easy to make:

• aria-*:foo variants (aria-checked, not-aria-checked, aria-selected, not-aria-selected`)
• content:foo variant

[sparklestheunicorn]

@replygirl does this PR reflect all your changes, and if so, is it ready to merge? The code and Vercel environment look good to me, but Github seems to think there's a pending change request somewhere that I can't find.

[replygirl]

@mis4mike On focus I'm noticing the components all get a blue outline. Think we should override.

I added a focus-ring shortcut class that will handle this for us :)

[replygirl]

I approve of my own changes lol