Setup podkit folder and move Combobox into it

[selfcontained]

Description

Podkit

Sets up a new podkit directory in dashboard components meant to start housing components that are built on radix-ui primitives and meet a certain level of accessibility and design standards as well as being generic/decoupled enough to use across any UI surface we build (web/desktop clients). We plan on filling this out more by refactoring our existing components into this pattern as we have opportunities.

Eventually we can see opportunity to encapsulate this component library into it's own package in our monorepo, but for now we'll start w/ it in our dashboard components since that's the primary consumer.

I've refactored our Dropdown2 component into a Combobox component as the first step. I've also incorporate lucide icons that we should use for any components in the podkit directory vs. the one-off svg files we currently rely on. This should also help us w/ consistency and move quicker when building out new components that rely on iconography.

Screen.Recording.2023-10-13.at.2.13.35.PM.mov

Summary generated by Copilot

🤖 Generated by Copilot at 7dd60e2

Refactor dashboard components to use Combobox component from podkit library instead of DropDown2 component. Replace custom icons with lucide-react icons. Improve UI consistency, accessibility, and responsiveness of the dashboard. Update tailwind.config.js to add custom animation classes.

How to test

Take a look at the UI that uses Combobox and verify it looks right still.

• Create Workspace page has 3 uses
• Project Settings
• User Preferences

There's a few new treats in this component:

• animated chevron icons and it opens/closes
• updated loading spinner w/ fade-in animation

Documentation

Preview status

Gitpod was successfully deployed to your preview environment.

• 🏷️ Name - brad-podkit-setup
• 🔗 URL - brad-podkit-setup.preview.gitpod-dev.com/workspaces.
• 📚 Documentation - See our internal documentation for information on how to interact with your preview environment.
• 📦 Version - brad-podkit-setup-gha.18645
• 🗒️ Logs - GCP Logs Explorer

Build Options

Build

• /werft with-werft
  Run the build with werft instead of GHA
• leeway-no-cache
• /werft no-test
  Run Leeway with --dont-test

Publish

• /werft publish-to-npm
• /werft publish-to-jb-marketplace

Installer

• analytics=segment
• with-dedicated-emulation
• workspace-feature-flags
  Add desired feature flags to the end of the line above, space separated

Preview Environment / Integration Tests

• /werft with-local-preview
  If enabled this will build install/preview
• /werft with-preview
• /werft with-large-vm
• /werft with-gce-vm
  If enabled this will create the environment on GCE infra
• with-integration-tests=all
  Valid options are all, workspace, webapp, ide, jetbrains, vscode, ssh. If enabled, with-preview and with-large-vm will be enabled.
• with-monitoring

/hold

[socket-security]

New dependencies detected. Learn more about Socket for GitHub ↗︎

Packages	Version	New capabilities	Transitives	Size	Publisher
lucide-react	0.287.0	None	+0	20.2 MB	ericfennis

[filiptronicek]

This is very exciting for the Dashboard. Can't wait to start using these isolated components across the board!

[filiptronicek]

Oh, cool! I know a lot of the icons in use currently are Heroicons, but why we've never installed them as a dep I am unsure about.

The only fear I have here then is that we use 2 of the same icons across different design systems. It's a bit hard to keep track of, but maybe replacing the regular SVGs over time sounds like a good idea.

[selfcontained]

Yah, this one was the easiest to plug in here, lots are quite generic but we can change this to something else if we want. It might be nice to have a layer of abstraction of icons, but feels a bit too early to do that.

[selfcontained]

/unhold