From 6484f8a1f0e3e7a83ed087925bfd5eaafba712ed Mon Sep 17 00:00:00 2001 From: Adrian Marin Date: Sat, 1 Feb 2025 14:13:42 +0200 Subject: [PATCH 01/18] refactor: upgrade to TailwindCSS v4 --- README.md | 1 + app/assets/stylesheets/avo.base.css | 20 +- .../stylesheets/css/fields/progress.css | 8 +- app/assets/stylesheets/css/fields/tiptap.css | 8 +- app/assets/stylesheets/css/pagination.css | 4 +- app/assets/stylesheets/css/search.css | 8 +- .../stylesheets/css/tailwindcss/base.css | 1 - .../css/tailwindcss/components.css | 1 - .../stylesheets/css/tailwindcss/utilities.css | 1 - app/assets/stylesheets/css/tooltips.css | 2 +- app/components/avo/actions_component.html.erb | 6 +- app/components/avo/alert_component.html.erb | 4 +- app/components/avo/alert_component.rb | 2 +- .../avo/backtrace_alert_component.html.erb | 6 +- app/components/avo/button_component.rb | 6 +- app/components/avo/divider_component.html.erb | 4 +- .../avo/empty_state_component.html.erb | 2 +- .../avo/field_wrapper_component.html.erb | 2 +- .../belongs_to_field/edit_component.html.erb | 2 +- .../boolean_field/edit_component.html.erb | 2 +- .../boolean_group_field/edit_component.rb | 2 +- .../view_type/list_item_component.html.erb | 6 +- .../common/key_value_component.html.erb | 6 +- .../common/status_viewer_component.html.erb | 11 +- .../fields/date_field/edit_component.html.erb | 2 +- .../date_time_field/edit_component.html.erb | 2 +- .../fields/tags_field/edit_component.html.erb | 2 +- .../fields/tags_field/tag_component.html.erb | 2 +- .../tiptap_field/edit_component.html.erb | 2 +- .../fields/trix_field/edit_component.html.erb | 2 +- app/components/avo/filters_component.html.erb | 6 +- .../avo/index/grid_item_component.html.erb | 4 +- .../avo/index/grid_item_component.rb | 2 +- .../index/resource_grid_component.html.erb | 2 +- .../avo/index/resource_map_component.html.erb | 2 +- .../index/resource_table_component.html.erb | 2 +- .../avo/index/table_row_component.html.erb | 6 +- .../avo/items/panel_component.html.erb | 2 +- .../item_details_component.html.erb | 2 +- app/components/avo/modal_component.html.erb | 2 +- .../avo/paginator_component.html.erb | 3 +- app/components/avo/panel_component.html.erb | 4 +- app/components/avo/profile_item_component.rb | 2 +- .../avo/resource_sidebar_component.html.erb | 2 +- .../avo/row_selector_component.html.erb | 2 +- app/components/avo/sidebar/link_component.rb | 2 +- app/components/avo/sidebar_component.html.erb | 6 +- .../avo/sidebar_profile_component.html.erb | 8 +- .../avo/tab_group_component.html.erb | 2 +- app/helpers/avo/application_helper.rb | 8 +- .../fields/key_value_controller.js | 2 +- .../controllers/fields/tags_field_helpers.js | 2 +- .../js/controllers/search_controller.js | 4 +- app/views/avo/base/preview.html.erb | 2 +- app/views/avo/debug/report.html.erb | 2 +- app/views/avo/debug/status.html.erb | 33 +- app/views/avo/home/_actions.html.erb | 2 +- app/views/avo/home/_dashboards.html.erb | 2 +- app/views/avo/home/_filters.html.erb | 2 +- app/views/avo/home/_resources.html.erb | 4 +- app/views/avo/home/failed_to_load.html.erb | 2 +- .../avo/partials/_confirm_dialog.html.erb | 8 +- .../avo/partials/_custom_tools_alert.html.erb | 12 +- app/views/avo/partials/_navbar.html.erb | 6 +- .../avo/partials/_resource_search.html.erb | 2 +- app/views/avo/partials/_table_header.html.erb | 4 +- .../avo/sidebar/_license_warning.html.erb | 2 +- .../concerns/row_controls_configuration.rb | 31 +- lib/avo/resources/items/holder.rb | 2 +- lib/generators/avo/resource_tool_generator.rb | 2 +- .../templates/cards/partial_card_partial.tt | 2 +- lib/generators/avo/tool_generator.rb | 4 +- package.json | 7 +- postcss.config.js | 10 - spec/dummy/app/avo/resources/event.rb | 2 +- .../views/avo/partials/_fish_review.html.erb | 2 +- .../resource_tools/_fish_information.html.erb | 6 +- .../avo/resource_tools/_user_tool.html.erb | 4 +- .../app/views/avo/tools/custom_tool.html.erb | 6 +- spec/features/avo/divider_spec.rb | 4 +- .../avo/generators/cards_generator_spec.rb | 2 +- spec/features/avo/resource_tools_spec.rb | 4 +- spec/system/avo/action_filter_spec.rb | 2 +- .../key_value_field/key_value_field_spec.rb | 4 +- yarn.lock | 689 ++++++++---------- 85 files changed, 490 insertions(+), 580 deletions(-) delete mode 100644 app/assets/stylesheets/css/tailwindcss/base.css delete mode 100644 app/assets/stylesheets/css/tailwindcss/components.css delete mode 100644 app/assets/stylesheets/css/tailwindcss/utilities.css delete mode 100644 postcss.config.js diff --git a/README.md b/README.md index b74ea91125..b1c1741742 100644 --- a/README.md +++ b/README.md @@ -125,5 +125,6 @@ Please read the [RELEASE.MD](./RELEASE.MD) - [`active_storage-blurhash`](https://github.com/avo-hq/active_storage-blurhash) - A plug-n-play [blurhash](https://blurha.sh/) integration for images stored in ActiveStorage - [`class_variants`](https://github.com/avo-hq/class_variants) - Easily configure styles and apply them as classes. Very useful when you're implementing Tailwind CSS components and call them with different states. + - [`marksmith`](https://github.com/avo-hq/marksmith) - GitHub-style markdown editor for Ruby on Rails with ActiveStorage support. - [`prop_initializer`](https://github.com/avo-hq/prop_initializer) - A flexible tool for defining properties on Ruby classes. - [`stimulus-confetti`](https://github.com/avo-hq/stimulus-confetti) - The easiest way to add confetti to your StimulusJS app diff --git a/app/assets/stylesheets/avo.base.css b/app/assets/stylesheets/avo.base.css index 956131a321..f59eb78e62 100644 --- a/app/assets/stylesheets/avo.base.css +++ b/app/assets/stylesheets/avo.base.css @@ -1,3 +1,9 @@ +@import "tailwindcss"; + +@config "../../../tailwind.config.js"; + + + @import './../../../node_modules/easymde/dist/easymde.min.css'; @import './../../../node_modules/tippy.js/dist/tippy.css'; @import './../../../node_modules/tippy.js/themes/light.css'; @@ -5,8 +11,6 @@ @import './../../../node_modules/@algolia/autocomplete-theme-classic/dist/theme.css'; @import './../../../node_modules/@yaireo/tagify/dist/tagify.css'; -@import 'tailwindcss/base'; - @import './css/fonts.css'; @import './css/buttons.css'; @import './css/typography.css'; @@ -27,10 +31,6 @@ @import './css/fields/tags.css'; @import './css/fields/tiptap.css'; -@import 'tailwindcss/components'; - -@import 'tailwindcss/utilities'; - html, body { @apply antialiased relative h-full; @@ -105,14 +105,6 @@ dl { } } -/* TODO: make content like tailwindcss */ -.floating-row-controls { - &:before { - content: ""; - @apply absolute z-10 inset-auto left-0 top-0 mt-0 -translate-x-full w-3 h-full bg-gradient-to-l from-white to-transparent group-hover:from-gray-50; - } -} - .shift-pressed { & .highlighted-row { @apply !bg-neutral-200; diff --git a/app/assets/stylesheets/css/fields/progress.css b/app/assets/stylesheets/css/fields/progress.css index 90938df021..e91b13da4d 100644 --- a/app/assets/stylesheets/css/fields/progress.css +++ b/app/assets/stylesheets/css/fields/progress.css @@ -1,13 +1,13 @@ progress { - @apply h-2 bg-white border border-slate-400 rounded shadow-inner; + @apply h-2 bg-white border border-slate-400 rounded-sm shadow-inner; } progress[value]::-webkit-progress-bar { - @apply bg-white border border-gray-500 rounded shadow-inner; + @apply bg-white border border-gray-500 rounded-sm shadow-inner; } progress[value]::-webkit-progress-value{ - @apply bg-primary-500 rounded; + @apply bg-primary-500 rounded-sm; } progress[value]::-moz-progress-bar { - @apply bg-primary-500 rounded appearance-none; + @apply bg-primary-500 rounded-sm appearance-none; } diff --git a/app/assets/stylesheets/css/fields/tiptap.css b/app/assets/stylesheets/css/fields/tiptap.css index 8967d06332..5c88fdf6f0 100644 --- a/app/assets/stylesheets/css/fields/tiptap.css +++ b/app/assets/stylesheets/css/fields/tiptap.css @@ -1,7 +1,7 @@ /* EDIT STYLES */ .tiptap { - @apply m-0 p-4 outline-none min-h-44; + @apply m-0 p-4 outline-hidden min-h-44; >*+* { @apply mt-4; @@ -22,7 +22,7 @@ } .tiptap__field { - @apply w-full mb-4 border border-gray-200 rounded; + @apply w-full mb-4 border border-gray-200 rounded-sm; } .tiptap__editor { @@ -54,7 +54,7 @@ } .tiptap__button { - @apply p-1 text-gray-500 rounded cursor-pointer; + @apply p-1 text-gray-500 rounded-sm cursor-pointer; &:hover:enabled { @apply bg-gray-100; @@ -94,7 +94,7 @@ } .tiptap__link-field { - @apply text-sm mr-2 py-1 border border-gray-200 rounded; + @apply text-sm mr-2 py-1 border border-gray-200 rounded-sm; } /* SHOW STYLES */ diff --git a/app/assets/stylesheets/css/pagination.css b/app/assets/stylesheets/css/pagination.css index 1391c3584b..3df4221d39 100644 --- a/app/assets/stylesheets/css/pagination.css +++ b/app/assets/stylesheets/css/pagination.css @@ -22,7 +22,7 @@ .pagy-nav-js .page a, .pagy-combo-nav-js .page a, .pagy-combo-nav-js .pagy-combo-input a { - @apply rounded px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md border border-gray-300; + @apply rounded-sm px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md border border-gray-300; &:hover{ @apply bg-gray-150; @@ -73,7 +73,7 @@ } & a:not(.gap) { - @apply block rounded px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md border border-gray-300; + @apply block rounded-sm px-3 py-1 text-sm text-gray-500 font-semibold bg-white shadow-md border border-gray-300; &:hover{ @apply bg-gray-150; diff --git a/app/assets/stylesheets/css/search.css b/app/assets/stylesheets/css/search.css index c599064536..2f9aebef7e 100644 --- a/app/assets/stylesheets/css/search.css +++ b/app/assets/stylesheets/css/search.css @@ -22,7 +22,7 @@ } .aa-DetachedSearchButton { - @apply rounded border-gray-300 h-[34px]; + @apply rounded-sm border-gray-300 h-[34px]; } } @@ -37,11 +37,11 @@ .aa-Form { &:focus-within { - @apply ring-0 !important; + @apply ring-0; } input { - @apply focus:ring-0 !important; + @apply focus:ring-0; } &:focus-within { .aa-InputWrapperPrefix{ @@ -71,7 +71,7 @@ button.aa-DetachedCancelButton { @apply space-y-2; .aa-Item { - @apply bg-white rounded px-3 py-4 shadow font-medium; + @apply bg-white rounded-sm px-3 py-4 shadow font-medium; .aa-ItemDescription { @apply text-gray-500 text-sm font-normal mt-1; diff --git a/app/assets/stylesheets/css/tailwindcss/base.css b/app/assets/stylesheets/css/tailwindcss/base.css deleted file mode 100644 index 2f02db53f6..0000000000 --- a/app/assets/stylesheets/css/tailwindcss/base.css +++ /dev/null @@ -1 +0,0 @@ -@tailwind base; diff --git a/app/assets/stylesheets/css/tailwindcss/components.css b/app/assets/stylesheets/css/tailwindcss/components.css deleted file mode 100644 index 020aabafde..0000000000 --- a/app/assets/stylesheets/css/tailwindcss/components.css +++ /dev/null @@ -1 +0,0 @@ -@tailwind components; diff --git a/app/assets/stylesheets/css/tailwindcss/utilities.css b/app/assets/stylesheets/css/tailwindcss/utilities.css deleted file mode 100644 index 65dd5f63a7..0000000000 --- a/app/assets/stylesheets/css/tailwindcss/utilities.css +++ /dev/null @@ -1 +0,0 @@ -@tailwind utilities; diff --git a/app/assets/stylesheets/css/tooltips.css b/app/assets/stylesheets/css/tooltips.css index 3fb8b9f03b..03369c9076 100644 --- a/app/assets/stylesheets/css/tooltips.css +++ b/app/assets/stylesheets/css/tooltips.css @@ -7,7 +7,7 @@ display: block; filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.1)); - @apply bg-white text-gray-700 px-3 py-0 rounded text-xs; + @apply bg-white text-gray-700 px-3 py-0 rounded-sm text-xs; } .tooltip .tooltip-arrow { diff --git a/app/components/avo/actions_component.html.erb b/app/components/avo/actions_component.html.erb index d5522f5a3b..5ecb4003ed 100644 --- a/app/components/avo/actions_component.html.erb +++ b/app/components/avo/actions_component.html.erb @@ -10,7 +10,7 @@ type: :button, color: @color, size: @size, - class: "focus:outline-none", + class: "focus:outline-hidden", icon: @icon, data: { action: "click->toggle#togglePanel", @@ -21,7 +21,7 @@ <%= @label %> <% end %>