diff --git a/.gitignore b/.gitignore index 72c37ca3c3..756c468bfc 100644 --- a/.gitignore +++ b/.gitignore @@ -54,6 +54,9 @@ js_bundle_metadata.json /public/avo-assets/avo.base.js /public/avo-assets/avo.js.map /public/avo-assets/avo.base.js.map +/public/avo-assets/avo.base.tw4.css +/public/avo-assets/late-registration.js +/public/avo-assets/late-registration.js.map /public/packs-test /node_modules node_modules diff --git a/Gemfile.lock b/Gemfile.lock index b932f16bb1..f176c0c485 100644 --- a/Gemfile.lock +++ b/Gemfile.lock @@ -1,7 +1,7 @@ PATH remote: . specs: - avo (3.18.1) + avo (3.18.1.tw4) actionview (>= 6.1) active_link_to activerecord (>= 6.1) @@ -293,7 +293,6 @@ GEM concurrent-ruby (~> 1.1) webrick (~> 1.7) websocket-driver (~> 0.7) - ffi (1.17.1-arm64-darwin) ffi (1.17.1-x86_64-linux-gnu) flay (2.13.3) erubi (~> 1.10) @@ -422,8 +421,6 @@ GEM net-smtp (0.5.1) net-protocol nio4r (2.7.4) - nokogiri (1.18.3-arm64-darwin) - racc (~> 1.4) nokogiri (1.18.3-x86_64-linux-gnu) racc (~> 1.4) observer (0.1.2) @@ -699,8 +696,6 @@ GEM zeitwerk (2.7.2) PLATFORMS - arm64-darwin-23 - arm64-darwin-24 x86_64-linux DEPENDENCIES @@ -788,4 +783,4 @@ DEPENDENCIES zeitwerk BUNDLED WITH - 2.5.9 + 2.6.3 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 1dce0a91c4..a86b62abd7 100644 --- a/app/assets/stylesheets/avo.base.css +++ b/app/assets/stylesheets/avo.base.css @@ -1,124 +1,124 @@ -@import './../../../node_modules/easymde/dist/easymde.min.css'; -@import './../../../node_modules/tippy.js/dist/tippy.css'; -@import './../../../node_modules/tippy.js/themes/light.css'; -@import './../../../node_modules/flatpickr/dist/flatpickr.css'; -@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'; -@import './css/tooltips.css'; -@import './css/loader.css'; -@import './css/pagination.css'; -@import './css/breadcrumbs.css'; -@import './css/search.css'; -@import './css/active-storage.css'; -@import './css/scrollbar.css'; -@import './css/sidebar.css'; -@import './css/spinner.css'; - -@import './css/fields/status.css'; -@import './css/fields/code.css'; -@import './css/fields/progress.css'; -@import './css/fields/trix.css'; -@import './css/fields/tags.css'; -@import './css/fields/tiptap.css'; - -@import 'tailwindcss/components'; - -@import 'tailwindcss/utilities'; - -html, -body { - @apply antialiased relative h-full; -} +@import "tailwindcss"; + +/* Figure out a way to add those dynamically */ +@source "../../../tmp/avo/packages/avo-advanced"; +@source "../../../tmp/avo/packages/avo-dashboards"; +@source "../../../tmp/avo/packages/avo-dynamic_filters"; +@source "../../../tmp/avo/packages/avo-kanban"; +@source "../../../tmp/avo/packages/avo-menu"; +@source "../../../tmp/avo/packages/avo-pro"; + +@config "../../../tailwind.config.js"; + +@layer components { + @import './../../../node_modules/easymde/dist/easymde.min.css'; + @import './../../../node_modules/tippy.js/dist/tippy.css'; + @import './../../../node_modules/tippy.js/themes/light.css'; + @import './../../../node_modules/flatpickr/dist/flatpickr.css'; + @import './../../../node_modules/@algolia/autocomplete-theme-classic/dist/theme.css'; + @import './../../../node_modules/@yaireo/tagify/dist/tagify.css'; + + @import './css/fonts.css'; + @import './css/buttons.css'; + @import './css/typography.css'; + @import './css/tooltips.css'; + @import './css/loader.css'; + @import './css/pagination.css'; + @import './css/breadcrumbs.css'; + @import './css/search.css'; + @import './css/active-storage.css'; + @import './css/scrollbar.css'; + @import './css/sidebar.css'; + @import './css/spinner.css'; + + @import './css/fields/status.css'; + @import './css/fields/code.css'; + @import './css/fields/progress.css'; + @import './css/fields/trix.css'; + @import './css/fields/tags.css'; + @import './css/fields/tiptap.css'; + + html, + body { + @apply antialiased relative h-full; + } -.will-change-transform { - will-change: transform; -} + .will-change-transform { + will-change: transform; + } -.fade-enter-active, -.fade-leave-active { - will-change: opacity; - will-change: transform; + .fade-enter-active, + .fade-leave-active { + will-change: opacity; + will-change: transform; - @apply transition transform duration-150; -} + @apply transition transform duration-150; + } -.fade-enter-active { - @apply relative ease-out delay-150; -} + .fade-enter-active { + @apply relative ease-out delay-150; + } -.fade-leave-active { - @apply relative ease-in; -} + .fade-leave-active { + @apply relative ease-in; + } -.fade-enter { - @apply delay-150 opacity-0 -translate-y-1; -} + .fade-enter { + @apply delay-150 opacity-0 -translate-y-1; + } -.fade-enter-to { - @apply delay-150 opacity-100 translate-y-0; -} + .fade-enter-to { + @apply delay-150 opacity-100 translate-y-0; + } -.fade-leave { - @apply opacity-100 translate-y-0; -} + .fade-leave { + @apply opacity-100 translate-y-0; + } -.fade-leave-to { - @apply opacity-0 translate-y-1; -} + .fade-leave-to { + @apply opacity-0 translate-y-1; + } -.turbo-progress-bar { - @apply bg-primary-400; -} + .turbo-progress-bar { + @apply bg-primary-400; + } -body.os-mac .mac\:hidden { - display: none; -} + body.os-mac .mac\:hidden { + display: none; + } -body.os-pc .pc\:hidden { - display: none; -} + body.os-pc .pc\:hidden { + display: none; + } -trix-editor { - max-height: 320px !important; - overflow-y: auto; -} + trix-editor { + max-height: 320px !important; + overflow-y: auto; + } -dialog#turbo-confirm { - @apply bg-transparent; -} + dialog#turbo-confirm { + @apply bg-transparent; + } -dl { - @apply text-sm grid gap-x-2 grid-cols-[max-content_1fr]; + dl { + @apply text-sm grid gap-x-2 grid-cols-[max-content_1fr]; - dt { - @apply font-bold mt-1; - } + dt { + @apply font-bold mt-1; + } - dd { - @apply ml-0 col-start-2; + dd { + @apply ml-0 col-start-2; + } } -} -/* 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; + } } -} -.shift-pressed { - & .highlighted-row { - @apply !bg-neutral-200; + .selected-row { + @apply !bg-neutral-100; } } - -.selected-row { - @apply !bg-neutral-100; -} 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 %>