search

penumbra-zone / web

Apache License 2.0
15 stars 16 forks source link

feat: Tailwind-based UI package #1891

Closed VanishMax closed 2 weeks ago

VanishMax commented 3 weeks ago

Followed up by https://github.com/penumbra-zone/web/pull/1902

The Tailwind-based UI library.

Vite, in this case, builds the library code and produces simple JavaScript that takes React's createElement and applies the right classes to it. The styling responsibility for now is on the consumer's side. However, I exported one function for simple Tailwind configuration of consumer's tailwind.config.ts:

import { withPenumbra } from '@penumbra-zone/ui-tailwind/theme';

export default withPenumbra({
  content: [
    './app/**/*.{js,ts,jsx,tsx,mdx,css}',
    './src/**/*.{js,ts,jsx,tsx,mdx,css}',
  ],
});

Components list. Agenda: ✅ – implemented, 🟡 – not implemented (not needed for now), ❌ – i decided not to implement it.

  1. ⚠️AccountSelector
  2. ✅AddressViewComponent
  3. ✅AssetIcon
  4. ✅AssetSelector
  5. ✅Button
  6. ❌ButtonGroup
  7. ✅Card
  8. ❌CharacterTransition
  9. ✅ConditionalWrap
  10. ✅CopyToClipboardButton
  11. ✅Density
  12. ✅️Dialog
  13. ✅Display
  14. ✅DropdownMenu
  15. 🟡FormField
  16. ✅Grid
  17. ✅Icon
  18. ✅Identicon
  19. ❌IsAnimatingProvider
  20. ✅MenuItem
  21. ❌PenumbraUIProvider
  22. ✅Pill
  23. ✅Popover
  24. ✅Progress
  25. 🟡SegmentedControl
  26. 🟡Slider
  27. 🟡SwapInput
  28. ✅Table
  29. ✅Tabs
  30. ✅Text
  31. ✅TextInput
  32. ✅Toast
  33. 🟡Toggle
  34. ✅Tooltip
  35. 🟡ValueInput
  36. ✅ValueView
  37. ✅WalletBalance

Future work

  1. Improve withPenumbra hook to cover all config merging cases
  2. Add tests to components, move old tests back and make them work
  3. Export a .css file with all compiled Tailwind classes, so consumers wouldn't need Tailwind in their projects
  4. Implement other UI components that were left undone for now
changeset-bot[bot] commented 3 weeks ago

⚠️ No Changeset found

Latest commit: 4e49ce9fd67a6a0e716fcf60f106ba56eb85965a

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

VanishMax commented 2 weeks ago

@grod220 do you have the idea why the tests are failing in the minifront? Seems like it is triggered by your changes

https://github.com/penumbra-zone/web/actions/runs/11724483746/job/32658624212?pr=1891

grod220 commented 2 weeks ago

The "multiple copies of react" issue sounds like you are bundling react with the tailwind package. Think that means you need to make it a peerDep and not a main dependency.