Files
supabase/packages/ui
Jordi EnricandJoshen Lim 6e6910f82b warehouse ui/ux fixes (#29057)
* fix metadata not showing in Raw tab in log detail

* fix rows not filling up horizontal space

* show collection loader only when fetching collections, since the query can be disabled

* simplify language in create collection modal

* fix create collection modal copy in cta

* rm typecast, add tooltip on collection creation

* improve copy on empty collection

* improve copy on colelction empty state

* rm unused code

* prompt users to refresh, add button to refresh, after sending first events to a collection

* use generic mr skelington instead of supalogo

* add template for search in event message

* hide field reference when source is warehouse

* rm font bold on selected log

* update curl example

* add focusable prop to codeblock

* change focus border color in codeblock

* make codeblock focusable by default

* move refresh btn

* rm unnecessary focusable i codeblcok

* fix raw log rendering

* add search

* update plceholder

* add timerange search

* improve empty state copy in wh

* add open in warehouse explorer button

* update test conection dialog ui

* Update apps/studio/components/interfaces/DataWarehouse/TestCollectionDialog.tsx

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

* Update apps/studio/components/interfaces/DataWarehouse/WarehouseCollectionDetail.tsx

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

* Update apps/studio/components/interfaces/DataWarehouse/WarehouseCollectionDetail.tsx

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

* rm clog

* Update apps/studio/components/interfaces/Settings/Logs/LogsQueryPanel.tsx

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>

* fix loading state in collections sidebar

* fix test collection sheet layout

* add some keyboard shortcuts to filters

* use isLoading in wh log detail to prevent double loaders

* make search input longr

* truncate titles

* truncat sidebar names

* rename dayjs

* update copy from warehouse to collections

* update remove collection copy

---------

Co-authored-by: Joshen Lim <joshenlimek@gmail.com>
2024-09-09 17:16:12 +02:00
..
2024-09-09 17:16:12 +02:00
2023-05-22 01:25:17 +08:00
2023-06-26 01:08:20 +08:00
2023-06-25 13:32:01 +08:00
2022-09-19 14:00:05 +02:00
2023-03-22 12:27:30 +08:00
2023-06-26 00:28:16 +08:00
2024-04-04 13:09:21 +00:00

Supabase UI Package

Figma-tokens setup

Tokens setup is based partly on blogpost on the Mirahi Digital Garden.

Transforms tokens stored on Figma Tokens using token-transformer and Style Dictionary to css-variables with references, and use them in your TailwindCSS environment with multiple themes.

Build all the styles files (css-variables and tailwind config)

npm run build-styles

This creates a directory called styles with the tokens and also CSS required.

Other examples

You can find other examples here by Jan Six

Adding new themes/sets

Add new sets by extending the scripts in package.json. Currently theme sets derive from exported/[set name] but can come from anywhere.

Adding a new set can be done with the following:

// package.json

//..
"build-transform-light": "npx token-transformer tokens.json styles/tokens/02_themes/light.json global,exported/light,theme global",
// add a new line like this:
"build-transform-new": "npx token-transformer tokens.json styles/tokens/02_themes/new.json global,new,theme global",
//..
// append the new theme/set command to end of the build-transform command
"build-transform": "npm run build-transform-global && npm run build-transform-typography && npm run build-transform-dark  && npm run build-transform-light && npm run build-transform-new",