From d2d056a75984a101e9c6c5b4d6afd4b4ec9aa26b Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Tue, 19 Nov 2024 14:59:57 -0600 Subject: [PATCH 01/68] feat: :sparkles: Basic files to get lookbook previews for pathogen up and running --- embedded_gems/pathogen/.gitignore | 71 ++++ embedded_gems/pathogen/demo/.dockerignore | 39 ++ .../pathogen/demo/.github/dependabot.yml | 12 + .../pathogen/demo/.github/workflows/ci.yml | 90 +++++ embedded_gems/pathogen/demo/.rubocop.yml | 8 + embedded_gems/pathogen/demo/Dockerfile | 69 ++++ embedded_gems/pathogen/demo/Gemfile | 55 +++ embedded_gems/pathogen/demo/Gemfile.lock | 364 ++++++++++++++++++ embedded_gems/pathogen/demo/README.md | 24 ++ embedded_gems/pathogen/demo/Rakefile | 6 + .../demo/app/assets/config/manifest.js | 4 + .../app/assets/stylesheets/application.css | 15 + .../app/controllers/application_controller.rb | 4 + .../demo/app/helpers/application_helper.rb | 2 + .../demo/app/javascript/application.js | 3 + .../app/javascript/controllers/application.js | 9 + .../controllers/hello_controller.js | 7 + .../demo/app/javascript/controllers/index.js | 4 + .../pathogen/demo/app/jobs/application_job.rb | 7 + .../demo/app/models/application_record.rb | 3 + .../app/views/layouts/application.html.erb | 23 ++ .../demo/app/views/pwa/manifest.json.erb | 22 ++ .../demo/app/views/pwa/service-worker.js | 26 ++ embedded_gems/pathogen/demo/bin/brakeman | 7 + embedded_gems/pathogen/demo/bin/bundle | 109 ++++++ .../pathogen/demo/bin/docker-entrypoint | 13 + embedded_gems/pathogen/demo/bin/importmap | 4 + embedded_gems/pathogen/demo/bin/rails | 4 + embedded_gems/pathogen/demo/bin/rake | 4 + embedded_gems/pathogen/demo/bin/rubocop | 8 + embedded_gems/pathogen/demo/bin/setup | 37 ++ embedded_gems/pathogen/demo/config.ru | 6 + .../pathogen/demo/config/application.rb | 37 ++ embedded_gems/pathogen/demo/config/boot.rb | 4 + .../pathogen/demo/config/credentials.yml.enc | 1 + .../pathogen/demo/config/database.yml | 32 ++ .../pathogen/demo/config/environment.rb | 5 + .../demo/config/environments/development.rb | 66 ++++ .../demo/config/environments/production.rb | 89 +++++ .../pathogen/demo/config/environments/test.rb | 51 +++ .../pathogen/demo/config/importmap.rb | 7 + .../demo/config/initializers/assets.rb | 12 + .../initializers/content_security_policy.rb | 25 ++ .../initializers/filter_parameter_logging.rb | 8 + .../demo/config/initializers/inflections.rb | 16 + .../demo/config/initializers/lookbook.rb | 8 + .../demo/config/initializers/pathogen.rb | 5 + .../config/initializers/permissions_policy.rb | 13 + .../pathogen/demo/config/locales/en.yml | 31 ++ embedded_gems/pathogen/demo/config/master.key | 1 + embedded_gems/pathogen/demo/config/puma.rb | 34 ++ embedded_gems/pathogen/demo/config/routes.rb | 18 + embedded_gems/pathogen/demo/db/seeds.rb | 9 + embedded_gems/pathogen/demo/public/404.html | 67 ++++ .../demo/public/406-unsupported-browser.html | 66 ++++ embedded_gems/pathogen/demo/public/422.html | 67 ++++ embedded_gems/pathogen/demo/public/500.html | 66 ++++ embedded_gems/pathogen/demo/public/icon.png | Bin 0 -> 5599 bytes embedded_gems/pathogen/demo/public/icon.svg | 3 + embedded_gems/pathogen/demo/public/robots.txt | 1 + .../demo/test/application_system_test_case.rb | 5 + .../components/previews/button_preview.rb | 10 + .../pathogen/demo/test/test_helper.rb | 15 + .../pathogen/demo/vendor/javascript/.keep | 0 64 files changed, 1831 insertions(+) create mode 100644 embedded_gems/pathogen/.gitignore create mode 100644 embedded_gems/pathogen/demo/.dockerignore create mode 100644 embedded_gems/pathogen/demo/.github/dependabot.yml create mode 100644 embedded_gems/pathogen/demo/.github/workflows/ci.yml create mode 100644 embedded_gems/pathogen/demo/.rubocop.yml create mode 100644 embedded_gems/pathogen/demo/Dockerfile create mode 100644 embedded_gems/pathogen/demo/Gemfile create mode 100644 embedded_gems/pathogen/demo/Gemfile.lock create mode 100644 embedded_gems/pathogen/demo/README.md create mode 100644 embedded_gems/pathogen/demo/Rakefile create mode 100644 embedded_gems/pathogen/demo/app/assets/config/manifest.js create mode 100644 embedded_gems/pathogen/demo/app/assets/stylesheets/application.css create mode 100644 embedded_gems/pathogen/demo/app/controllers/application_controller.rb create mode 100644 embedded_gems/pathogen/demo/app/helpers/application_helper.rb create mode 100644 embedded_gems/pathogen/demo/app/javascript/application.js create mode 100644 embedded_gems/pathogen/demo/app/javascript/controllers/application.js create mode 100644 embedded_gems/pathogen/demo/app/javascript/controllers/hello_controller.js create mode 100644 embedded_gems/pathogen/demo/app/javascript/controllers/index.js create mode 100644 embedded_gems/pathogen/demo/app/jobs/application_job.rb create mode 100644 embedded_gems/pathogen/demo/app/models/application_record.rb create mode 100644 embedded_gems/pathogen/demo/app/views/layouts/application.html.erb create mode 100644 embedded_gems/pathogen/demo/app/views/pwa/manifest.json.erb create mode 100644 embedded_gems/pathogen/demo/app/views/pwa/service-worker.js create mode 100755 embedded_gems/pathogen/demo/bin/brakeman create mode 100755 embedded_gems/pathogen/demo/bin/bundle create mode 100755 embedded_gems/pathogen/demo/bin/docker-entrypoint create mode 100755 embedded_gems/pathogen/demo/bin/importmap create mode 100755 embedded_gems/pathogen/demo/bin/rails create mode 100755 embedded_gems/pathogen/demo/bin/rake create mode 100755 embedded_gems/pathogen/demo/bin/rubocop create mode 100755 embedded_gems/pathogen/demo/bin/setup create mode 100644 embedded_gems/pathogen/demo/config.ru create mode 100644 embedded_gems/pathogen/demo/config/application.rb create mode 100644 embedded_gems/pathogen/demo/config/boot.rb create mode 100644 embedded_gems/pathogen/demo/config/credentials.yml.enc create mode 100644 embedded_gems/pathogen/demo/config/database.yml create mode 100644 embedded_gems/pathogen/demo/config/environment.rb create mode 100644 embedded_gems/pathogen/demo/config/environments/development.rb create mode 100644 embedded_gems/pathogen/demo/config/environments/production.rb create mode 100644 embedded_gems/pathogen/demo/config/environments/test.rb create mode 100644 embedded_gems/pathogen/demo/config/importmap.rb create mode 100644 embedded_gems/pathogen/demo/config/initializers/assets.rb create mode 100644 embedded_gems/pathogen/demo/config/initializers/content_security_policy.rb create mode 100644 embedded_gems/pathogen/demo/config/initializers/filter_parameter_logging.rb create mode 100644 embedded_gems/pathogen/demo/config/initializers/inflections.rb create mode 100644 embedded_gems/pathogen/demo/config/initializers/lookbook.rb create mode 100644 embedded_gems/pathogen/demo/config/initializers/pathogen.rb create mode 100644 embedded_gems/pathogen/demo/config/initializers/permissions_policy.rb create mode 100644 embedded_gems/pathogen/demo/config/locales/en.yml create mode 100644 embedded_gems/pathogen/demo/config/master.key create mode 100644 embedded_gems/pathogen/demo/config/puma.rb create mode 100644 embedded_gems/pathogen/demo/config/routes.rb create mode 100644 embedded_gems/pathogen/demo/db/seeds.rb create mode 100644 embedded_gems/pathogen/demo/public/404.html create mode 100644 embedded_gems/pathogen/demo/public/406-unsupported-browser.html create mode 100644 embedded_gems/pathogen/demo/public/422.html create mode 100644 embedded_gems/pathogen/demo/public/500.html create mode 100644 embedded_gems/pathogen/demo/public/icon.png create mode 100644 embedded_gems/pathogen/demo/public/icon.svg create mode 100644 embedded_gems/pathogen/demo/public/robots.txt create mode 100644 embedded_gems/pathogen/demo/test/application_system_test_case.rb create mode 100644 embedded_gems/pathogen/demo/test/components/previews/button_preview.rb create mode 100644 embedded_gems/pathogen/demo/test/test_helper.rb create mode 100644 embedded_gems/pathogen/demo/vendor/javascript/.keep diff --git a/embedded_gems/pathogen/.gitignore b/embedded_gems/pathogen/.gitignore new file mode 100644 index 0000000000..3ecdc16ccd --- /dev/null +++ b/embedded_gems/pathogen/.gitignore @@ -0,0 +1,71 @@ +# Ruby specific +*.gem +*.rbc +/.config +/coverage/ +/InstalledFiles +/pkg/ +/spec/reports/ +/spec/examples.txt +/test/tmp/ +/test/version_tmp/ +/tmp/ +.dat* +.repl_history +build/ +*.bridgesupport +build-iPhoneOS/ +build-iPhoneSimulator/ + +# Bundler specific +/.bundle/ +/vendor/bundle +/lib/bundler/man/ + +# Environment normalization +/.bundle/ +/vendor/bundle +.env +.env.* + +# Documentation cache and generated files +/.yardoc/ +/_yardoc/ +/doc/ +/rdoc/ + +# IDE specific files +.idea/ +.vscode/ +*.swp +*.swo +*~ + +# OS specific files +.DS_Store +.DS_Store? +._* +.Spotlight-V100 +.Trashes +ehthumbs.db +Thumbs.db + +# Log files +*.log +log/*.log + +# Demo app specific +/demo/tmp/ +/demo/log/ +/demo/public/assets/ +/demo/storage/ +/demo/.sass-cache/ + +# Testing artifacts +/coverage/ +.rspec_status + +# Ruby version managers +.ruby-version +.ruby-gemset +.rvmrc diff --git a/embedded_gems/pathogen/demo/.dockerignore b/embedded_gems/pathogen/demo/.dockerignore new file mode 100644 index 0000000000..ab63fb5564 --- /dev/null +++ b/embedded_gems/pathogen/demo/.dockerignore @@ -0,0 +1,39 @@ +# See https://docs.docker.com/engine/reference/builder/#dockerignore-file for more about ignoring files. + +# Ignore git directory. +/.git/ +/.gitignore + +# Ignore bundler config. +/.bundle + +# Ignore all environment files (except templates). +/.env* +!/.env*.erb + +# Ignore all default key files. +/config/master.key +/config/credentials/*.key + +# Ignore all logfiles and tempfiles. +/log/* +/tmp/* + +# Ignore storage (uploaded files in development and any SQLite databases). +/storage/* + +# Ignore assets. +/node_modules/ +/app/assets/builds/* +!/app/assets/builds/.keep +/public/assets + +# Ignore CI service files. +/.github + +# Ignore development files +/.devcontainer + +# Ignore Docker-related files +/.dockerignore +/Dockerfile* diff --git a/embedded_gems/pathogen/demo/.github/dependabot.yml b/embedded_gems/pathogen/demo/.github/dependabot.yml new file mode 100644 index 0000000000..f0527e6be1 --- /dev/null +++ b/embedded_gems/pathogen/demo/.github/dependabot.yml @@ -0,0 +1,12 @@ +version: 2 +updates: +- package-ecosystem: bundler + directory: "/" + schedule: + interval: daily + open-pull-requests-limit: 10 +- package-ecosystem: github-actions + directory: "/" + schedule: + interval: daily + open-pull-requests-limit: 10 diff --git a/embedded_gems/pathogen/demo/.github/workflows/ci.yml b/embedded_gems/pathogen/demo/.github/workflows/ci.yml new file mode 100644 index 0000000000..c6287467d7 --- /dev/null +++ b/embedded_gems/pathogen/demo/.github/workflows/ci.yml @@ -0,0 +1,90 @@ +name: CI + +on: + pull_request: + push: + branches: [ main ] + +jobs: + scan_ruby: + runs-on: ubuntu-latest + + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: Set up Ruby + uses: ruby/setup-ruby@v1 + with: + ruby-version: .ruby-version + bundler-cache: true + + - name: Scan for common Rails security vulnerabilities using static analysis + run: bin/brakeman --no-pager + + scan_js: + runs-on: ubuntu-latest + + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: Set up Ruby + uses: ruby/setup-ruby@v1 + with: + ruby-version: .ruby-version + bundler-cache: true + + - name: Scan for security vulnerabilities in JavaScript dependencies + run: bin/importmap audit + + lint: + runs-on: ubuntu-latest + steps: + - name: Checkout code + uses: actions/checkout@v4 + + - name: Set up Ruby + uses: ruby/setup-ruby@v1 + with: + ruby-version: .ruby-version + bundler-cache: true + + - name: Lint code for consistent style + run: bin/rubocop -f github + + test: + runs-on: ubuntu-latest + + # services: + # redis: + # image: redis + # ports: + # - 6379:6379 + # options: --health-cmd "redis-cli ping" --health-interval 10s --health-timeout 5s --health-retries 5 + steps: + - name: Install packages + run: sudo apt-get update && sudo apt-get install --no-install-recommends -y google-chrome-stable curl libjemalloc2 sqlite3 + + - name: Checkout code + uses: actions/checkout@v4 + + - name: Set up Ruby + uses: ruby/setup-ruby@v1 + with: + ruby-version: .ruby-version + bundler-cache: true + + - name: Run tests + env: + RAILS_ENV: test + # REDIS_URL: redis://localhost:6379/0 + run: bin/rails db:test:prepare test test:system + + - name: Keep screenshots from failed system tests + uses: actions/upload-artifact@v4 + if: failure() + with: + name: screenshots + path: ${{ github.workspace }}/tmp/screenshots + if-no-files-found: ignore diff --git a/embedded_gems/pathogen/demo/.rubocop.yml b/embedded_gems/pathogen/demo/.rubocop.yml new file mode 100644 index 0000000000..f9d86d4a54 --- /dev/null +++ b/embedded_gems/pathogen/demo/.rubocop.yml @@ -0,0 +1,8 @@ +# Omakase Ruby styling for Rails +inherit_gem: { rubocop-rails-omakase: rubocop.yml } + +# Overwrite or add rules to create your own house style +# +# # Use `[a, [b, c]]` not `[ a, [ b, c ] ]` +# Layout/SpaceInsideArrayLiteralBrackets: +# Enabled: false diff --git a/embedded_gems/pathogen/demo/Dockerfile b/embedded_gems/pathogen/demo/Dockerfile new file mode 100644 index 0000000000..113bc66923 --- /dev/null +++ b/embedded_gems/pathogen/demo/Dockerfile @@ -0,0 +1,69 @@ +# syntax = docker/dockerfile:1 + +# This Dockerfile is designed for production, not development. Use with Kamal or build'n'run by hand: +# docker build -t my-app . +# docker run -d -p 80:80 -p 443:443 --name my-app -e RAILS_MASTER_KEY= my-app + +# Make sure RUBY_VERSION matches the Ruby version in .ruby-version +ARG RUBY_VERSION=3.3.1 +FROM docker.io/library/ruby:$RUBY_VERSION-slim AS base + +# Rails app lives here +WORKDIR /rails + +# Install base packages +RUN apt-get update -qq && \ + apt-get install --no-install-recommends -y curl libjemalloc2 sqlite3 && \ + rm -rf /var/lib/apt/lists /var/cache/apt/archives + +# Set production environment +ENV RAILS_ENV="production" \ + BUNDLE_DEPLOYMENT="1" \ + BUNDLE_PATH="/usr/local/bundle" \ + BUNDLE_WITHOUT="development" + +# Throw-away build stage to reduce size of final image +FROM base AS build + +# Install packages needed to build gems +RUN apt-get update -qq && \ + apt-get install --no-install-recommends -y build-essential git pkg-config && \ + rm -rf /var/lib/apt/lists /var/cache/apt/archives + +# Install application gems +COPY Gemfile Gemfile.lock ./ +RUN bundle install && \ + rm -rf ~/.bundle/ "${BUNDLE_PATH}"/ruby/*/cache "${BUNDLE_PATH}"/ruby/*/bundler/gems/*/.git && \ + bundle exec bootsnap precompile --gemfile + +# Copy application code +COPY . . + +# Precompile bootsnap code for faster boot times +RUN bundle exec bootsnap precompile app/ lib/ + +# Precompiling assets for production without requiring secret RAILS_MASTER_KEY +RUN SECRET_KEY_BASE_DUMMY=1 ./bin/rails assets:precompile + + + + +# Final stage for app image +FROM base + +# Copy built artifacts: gems, application +COPY --from=build "${BUNDLE_PATH}" "${BUNDLE_PATH}" +COPY --from=build /rails /rails + +# Run and own only the runtime files as a non-root user for security +RUN groupadd --system --gid 1000 rails && \ + useradd rails --uid 1000 --gid 1000 --create-home --shell /bin/bash && \ + chown -R rails:rails db log storage tmp +USER 1000:1000 + +# Entrypoint prepares the database. +ENTRYPOINT ["/rails/bin/docker-entrypoint"] + +# Start the server by default, this can be overwritten at runtime +EXPOSE 3000 +CMD ["./bin/rails", "server"] diff --git a/embedded_gems/pathogen/demo/Gemfile b/embedded_gems/pathogen/demo/Gemfile new file mode 100644 index 0000000000..38415c0f20 --- /dev/null +++ b/embedded_gems/pathogen/demo/Gemfile @@ -0,0 +1,55 @@ +source "https://rubygems.org" + +# Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main" +gem "rails", "~> 7.2.2" +# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails] +gem "sprockets-rails" +# Use sqlite3 as the database for Active Record +gem "sqlite3", ">= 1.4" +# Use the Puma web server [https://github.com/puma/puma] +gem "puma", ">= 5.0" +# Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails] +gem "importmap-rails" +# Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev] +gem "turbo-rails" +# Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev] +gem "stimulus-rails" +# Build JSON APIs with ease [https://github.com/rails/jbuilder] +gem "jbuilder" + +# Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis] +# gem "kredis" + +# Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword] +# gem "bcrypt", "~> 3.1.7" + +# Windows does not include zoneinfo files, so bundle the tzinfo-data gem +gem "tzinfo-data", platforms: %i[ windows jruby ] + +# Reduces boot times through caching; required in config/boot.rb +gem "bootsnap", require: false + +gem "lookbook" +gem "pathogen_view_components", path: ".." + +group :development, :test do + # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem + gem "debug", platforms: %i[ mri windows ], require: "debug/prelude" + + # Static analysis for security vulnerabilities [https://brakemanscanner.org/] + gem "brakeman", require: false + + # Omakase Ruby styling [https://github.com/rails/rubocop-rails-omakase/] + gem "rubocop-rails-omakase", require: false +end + +group :development do + # Use console on exceptions pages [https://github.com/rails/web-console] + gem "web-console" +end + +group :test do + # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing] + gem "capybara" + gem "selenium-webdriver" +end diff --git a/embedded_gems/pathogen/demo/Gemfile.lock b/embedded_gems/pathogen/demo/Gemfile.lock new file mode 100644 index 0000000000..3d80881be6 --- /dev/null +++ b/embedded_gems/pathogen/demo/Gemfile.lock @@ -0,0 +1,364 @@ +PATH + remote: .. + specs: + pathogen_view_components (0.0.1) + actionview (>= 5.0.0) + activesupport (>= 5.0.0) + heroicon-rails (>= 0.2.9) + view_component (>= 3.1, < 4.0) + +GEM + remote: https://rubygems.org/ + specs: + actioncable (7.2.2) + actionpack (= 7.2.2) + activesupport (= 7.2.2) + nio4r (~> 2.0) + websocket-driver (>= 0.6.1) + zeitwerk (~> 2.6) + actionmailbox (7.2.2) + actionpack (= 7.2.2) + activejob (= 7.2.2) + activerecord (= 7.2.2) + activestorage (= 7.2.2) + activesupport (= 7.2.2) + mail (>= 2.8.0) + actionmailer (7.2.2) + actionpack (= 7.2.2) + actionview (= 7.2.2) + activejob (= 7.2.2) + activesupport (= 7.2.2) + mail (>= 2.8.0) + rails-dom-testing (~> 2.2) + actionpack (7.2.2) + actionview (= 7.2.2) + activesupport (= 7.2.2) + nokogiri (>= 1.8.5) + racc + rack (>= 2.2.4, < 3.2) + rack-session (>= 1.0.1) + rack-test (>= 0.6.3) + rails-dom-testing (~> 2.2) + rails-html-sanitizer (~> 1.6) + useragent (~> 0.16) + actiontext (7.2.2) + actionpack (= 7.2.2) + activerecord (= 7.2.2) + activestorage (= 7.2.2) + activesupport (= 7.2.2) + globalid (>= 0.6.0) + nokogiri (>= 1.8.5) + actionview (7.2.2) + activesupport (= 7.2.2) + builder (~> 3.1) + erubi (~> 1.11) + rails-dom-testing (~> 2.2) + rails-html-sanitizer (~> 1.6) + activejob (7.2.2) + activesupport (= 7.2.2) + globalid (>= 0.3.6) + activemodel (7.2.2) + activesupport (= 7.2.2) + activerecord (7.2.2) + activemodel (= 7.2.2) + activesupport (= 7.2.2) + timeout (>= 0.4.0) + activestorage (7.2.2) + actionpack (= 7.2.2) + activejob (= 7.2.2) + activerecord (= 7.2.2) + activesupport (= 7.2.2) + marcel (~> 1.0) + activesupport (7.2.2) + base64 + benchmark (>= 0.3) + bigdecimal + concurrent-ruby (~> 1.0, >= 1.3.1) + connection_pool (>= 2.2.5) + drb + i18n (>= 1.6, < 2) + logger (>= 1.4.2) + minitest (>= 5.1) + securerandom (>= 0.3) + tzinfo (~> 2.0, >= 2.0.5) + addressable (2.8.7) + public_suffix (>= 2.0.2, < 7.0) + ast (2.4.2) + base64 (0.2.0) + benchmark (0.4.0) + bigdecimal (3.1.8) + bindex (0.8.1) + bootsnap (1.18.4) + msgpack (~> 1.2) + brakeman (6.2.2) + racc + builder (3.3.0) + capybara (3.40.0) + addressable + matrix + mini_mime (>= 0.1.3) + nokogiri (~> 1.11) + rack (>= 1.6.0) + rack-test (>= 0.6.3) + regexp_parser (>= 1.5, < 3.0) + xpath (~> 3.2) + concurrent-ruby (1.3.4) + connection_pool (2.4.1) + crass (1.0.6) + css_parser (1.19.1) + addressable + date (3.4.0) + debug (1.9.2) + irb (~> 1.10) + reline (>= 0.3.8) + drb (2.2.1) + erubi (1.13.0) + globalid (1.2.1) + activesupport (>= 6.1) + heroicon-rails (0.2.9) + activesupport (>= 7.0.8) + nokogiri (>= 1.14.3) + htmlbeautifier (1.4.3) + htmlentities (4.3.4) + i18n (1.14.6) + concurrent-ruby (~> 1.0) + importmap-rails (2.0.3) + actionpack (>= 6.0.0) + activesupport (>= 6.0.0) + railties (>= 6.0.0) + io-console (0.7.2) + irb (1.14.1) + rdoc (>= 4.0.0) + reline (>= 0.4.2) + jbuilder (2.13.0) + actionview (>= 5.0.0) + activesupport (>= 5.0.0) + json (2.8.2) + language_server-protocol (3.17.0.3) + logger (1.6.1) + loofah (2.23.1) + crass (~> 1.0.2) + nokogiri (>= 1.12.0) + lookbook (2.3.4) + activemodel + css_parser + htmlbeautifier (~> 1.3) + htmlentities (~> 4.3.4) + marcel (~> 1.0) + railties (>= 5.0) + redcarpet (~> 3.5) + rouge (>= 3.26, < 5.0) + view_component (>= 2.0) + yard (~> 0.9) + zeitwerk (~> 2.5) + mail (2.8.1) + mini_mime (>= 0.1.1) + net-imap + net-pop + net-smtp + marcel (1.0.4) + matrix (0.4.2) + method_source (1.1.0) + mini_mime (1.1.5) + minitest (5.25.1) + msgpack (1.7.5) + net-imap (0.5.1) + date + net-protocol + net-pop (0.1.2) + net-protocol + net-protocol (0.2.2) + timeout + net-smtp (0.5.0) + net-protocol + nio4r (2.7.4) + nokogiri (1.16.7-aarch64-linux) + racc (~> 1.4) + nokogiri (1.16.7-arm-linux) + racc (~> 1.4) + nokogiri (1.16.7-arm64-darwin) + racc (~> 1.4) + nokogiri (1.16.7-x86-linux) + racc (~> 1.4) + nokogiri (1.16.7-x86_64-darwin) + racc (~> 1.4) + nokogiri (1.16.7-x86_64-linux) + racc (~> 1.4) + parallel (1.26.3) + parser (3.3.6.0) + ast (~> 2.4.1) + racc + psych (5.2.0) + stringio + public_suffix (6.0.1) + puma (6.4.3) + nio4r (~> 2.0) + racc (1.8.1) + rack (3.1.8) + rack-session (2.0.0) + rack (>= 3.0.0) + rack-test (2.1.0) + rack (>= 1.3) + rackup (2.2.1) + rack (>= 3) + rails (7.2.2) + actioncable (= 7.2.2) + actionmailbox (= 7.2.2) + actionmailer (= 7.2.2) + actionpack (= 7.2.2) + actiontext (= 7.2.2) + actionview (= 7.2.2) + activejob (= 7.2.2) + activemodel (= 7.2.2) + activerecord (= 7.2.2) + activestorage (= 7.2.2) + activesupport (= 7.2.2) + bundler (>= 1.15.0) + railties (= 7.2.2) + rails-dom-testing (2.2.0) + activesupport (>= 5.0.0) + minitest + nokogiri (>= 1.6) + rails-html-sanitizer (1.6.0) + loofah (~> 2.21) + nokogiri (~> 1.14) + railties (7.2.2) + actionpack (= 7.2.2) + activesupport (= 7.2.2) + irb (~> 1.13) + rackup (>= 1.0.0) + rake (>= 12.2) + thor (~> 1.0, >= 1.2.2) + zeitwerk (~> 2.6) + rainbow (3.1.1) + rake (13.2.1) + rdoc (6.8.1) + psych (>= 4.0.0) + redcarpet (3.6.0) + regexp_parser (2.9.2) + reline (0.5.11) + io-console (~> 0.5) + rexml (3.3.9) + rouge (4.5.1) + rubocop (1.68.0) + json (~> 2.3) + language_server-protocol (>= 3.17.0) + parallel (~> 1.10) + parser (>= 3.3.0.2) + rainbow (>= 2.2.2, < 4.0) + regexp_parser (>= 2.4, < 3.0) + rubocop-ast (>= 1.32.2, < 2.0) + ruby-progressbar (~> 1.7) + unicode-display_width (>= 2.4.0, < 3.0) + rubocop-ast (1.36.1) + parser (>= 3.3.1.0) + rubocop-minitest (0.36.0) + rubocop (>= 1.61, < 2.0) + rubocop-ast (>= 1.31.1, < 2.0) + rubocop-performance (1.23.0) + rubocop (>= 1.48.1, < 2.0) + rubocop-ast (>= 1.31.1, < 2.0) + rubocop-rails (2.27.0) + activesupport (>= 4.2.0) + rack (>= 1.1) + rubocop (>= 1.52.0, < 2.0) + rubocop-ast (>= 1.31.1, < 2.0) + rubocop-rails-omakase (1.0.0) + rubocop + rubocop-minitest + rubocop-performance + rubocop-rails + ruby-progressbar (1.13.0) + rubyzip (2.3.2) + securerandom (0.3.2) + selenium-webdriver (4.26.0) + base64 (~> 0.2) + logger (~> 1.4) + rexml (~> 3.2, >= 3.2.5) + rubyzip (>= 1.2.2, < 3.0) + websocket (~> 1.0) + sprockets (4.2.1) + concurrent-ruby (~> 1.0) + rack (>= 2.2.4, < 4) + sprockets-rails (3.5.2) + actionpack (>= 6.1) + activesupport (>= 6.1) + sprockets (>= 3.0.0) + sqlite3 (2.2.0-aarch64-linux-gnu) + sqlite3 (2.2.0-aarch64-linux-musl) + sqlite3 (2.2.0-arm-linux-gnu) + sqlite3 (2.2.0-arm-linux-musl) + sqlite3 (2.2.0-arm64-darwin) + sqlite3 (2.2.0-x86-linux-gnu) + sqlite3 (2.2.0-x86-linux-musl) + sqlite3 (2.2.0-x86_64-darwin) + sqlite3 (2.2.0-x86_64-linux-gnu) + sqlite3 (2.2.0-x86_64-linux-musl) + stimulus-rails (1.3.4) + railties (>= 6.0.0) + stringio (3.1.2) + thor (1.3.2) + timeout (0.4.2) + turbo-rails (2.0.11) + actionpack (>= 6.0.0) + railties (>= 6.0.0) + tzinfo (2.0.6) + concurrent-ruby (~> 1.0) + unicode-display_width (2.6.0) + useragent (0.16.10) + view_component (3.20.0) + activesupport (>= 5.2.0, < 8.1) + concurrent-ruby (~> 1.0) + method_source (~> 1.0) + web-console (4.2.1) + actionview (>= 6.0.0) + activemodel (>= 6.0.0) + bindex (>= 0.4.0) + railties (>= 6.0.0) + websocket (1.2.11) + websocket-driver (0.7.6) + websocket-extensions (>= 0.1.0) + websocket-extensions (0.1.5) + xpath (3.2.0) + nokogiri (~> 1.8) + yard (0.9.37) + zeitwerk (2.7.1) + +PLATFORMS + aarch64-linux + aarch64-linux-gnu + aarch64-linux-musl + arm-linux + arm-linux-gnu + arm-linux-musl + arm64-darwin + x86-linux + x86-linux-gnu + x86-linux-musl + x86_64-darwin + x86_64-linux + x86_64-linux-gnu + x86_64-linux-musl + +DEPENDENCIES + bootsnap + brakeman + capybara + debug + importmap-rails + jbuilder + lookbook + pathogen_view_components! + puma (>= 5.0) + rails (~> 7.2.2) + rubocop-rails-omakase + selenium-webdriver + sprockets-rails + sqlite3 (>= 1.4) + stimulus-rails + turbo-rails + tzinfo-data + web-console + +BUNDLED WITH + 2.5.21 diff --git a/embedded_gems/pathogen/demo/README.md b/embedded_gems/pathogen/demo/README.md new file mode 100644 index 0000000000..7db80e4ca1 --- /dev/null +++ b/embedded_gems/pathogen/demo/README.md @@ -0,0 +1,24 @@ +# README + +This README would normally document whatever steps are necessary to get the +application up and running. + +Things you may want to cover: + +* Ruby version + +* System dependencies + +* Configuration + +* Database creation + +* Database initialization + +* How to run the test suite + +* Services (job queues, cache servers, search engines, etc.) + +* Deployment instructions + +* ... diff --git a/embedded_gems/pathogen/demo/Rakefile b/embedded_gems/pathogen/demo/Rakefile new file mode 100644 index 0000000000..9a5ea7383a --- /dev/null +++ b/embedded_gems/pathogen/demo/Rakefile @@ -0,0 +1,6 @@ +# Add your own tasks in files placed in lib/tasks ending in .rake, +# for example lib/tasks/capistrano.rake, and they will automatically be available to Rake. + +require_relative "config/application" + +Rails.application.load_tasks diff --git a/embedded_gems/pathogen/demo/app/assets/config/manifest.js b/embedded_gems/pathogen/demo/app/assets/config/manifest.js new file mode 100644 index 0000000000..ddd546a0be --- /dev/null +++ b/embedded_gems/pathogen/demo/app/assets/config/manifest.js @@ -0,0 +1,4 @@ +//= link_tree ../images +//= link_directory ../stylesheets .css +//= link_tree ../../javascript .js +//= link_tree ../../../vendor/javascript .js diff --git a/embedded_gems/pathogen/demo/app/assets/stylesheets/application.css b/embedded_gems/pathogen/demo/app/assets/stylesheets/application.css new file mode 100644 index 0000000000..288b9ab718 --- /dev/null +++ b/embedded_gems/pathogen/demo/app/assets/stylesheets/application.css @@ -0,0 +1,15 @@ +/* + * This is a manifest file that'll be compiled into application.css, which will include all the files + * listed below. + * + * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's + * vendor/assets/stylesheets directory can be referenced here using a relative path. + * + * You're free to add application-wide styles to this file and they'll appear at the bottom of the + * compiled file so the styles you add here take precedence over styles defined in any other CSS + * files in this directory. Styles in this file should be added after the last require_* statement. + * It is generally better to create a new file per style scope. + * + *= require_tree . + *= require_self + */ diff --git a/embedded_gems/pathogen/demo/app/controllers/application_controller.rb b/embedded_gems/pathogen/demo/app/controllers/application_controller.rb new file mode 100644 index 0000000000..0d95db22b4 --- /dev/null +++ b/embedded_gems/pathogen/demo/app/controllers/application_controller.rb @@ -0,0 +1,4 @@ +class ApplicationController < ActionController::Base + # Only allow modern browsers supporting webp images, web push, badges, import maps, CSS nesting, and CSS :has. + allow_browser versions: :modern +end diff --git a/embedded_gems/pathogen/demo/app/helpers/application_helper.rb b/embedded_gems/pathogen/demo/app/helpers/application_helper.rb new file mode 100644 index 0000000000..de6be7945c --- /dev/null +++ b/embedded_gems/pathogen/demo/app/helpers/application_helper.rb @@ -0,0 +1,2 @@ +module ApplicationHelper +end diff --git a/embedded_gems/pathogen/demo/app/javascript/application.js b/embedded_gems/pathogen/demo/app/javascript/application.js new file mode 100644 index 0000000000..0d7b49404c --- /dev/null +++ b/embedded_gems/pathogen/demo/app/javascript/application.js @@ -0,0 +1,3 @@ +// Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails +import "@hotwired/turbo-rails" +import "controllers" diff --git a/embedded_gems/pathogen/demo/app/javascript/controllers/application.js b/embedded_gems/pathogen/demo/app/javascript/controllers/application.js new file mode 100644 index 0000000000..1213e85c7a --- /dev/null +++ b/embedded_gems/pathogen/demo/app/javascript/controllers/application.js @@ -0,0 +1,9 @@ +import { Application } from "@hotwired/stimulus" + +const application = Application.start() + +// Configure Stimulus development experience +application.debug = false +window.Stimulus = application + +export { application } diff --git a/embedded_gems/pathogen/demo/app/javascript/controllers/hello_controller.js b/embedded_gems/pathogen/demo/app/javascript/controllers/hello_controller.js new file mode 100644 index 0000000000..5975c0789d --- /dev/null +++ b/embedded_gems/pathogen/demo/app/javascript/controllers/hello_controller.js @@ -0,0 +1,7 @@ +import { Controller } from "@hotwired/stimulus" + +export default class extends Controller { + connect() { + this.element.textContent = "Hello World!" + } +} diff --git a/embedded_gems/pathogen/demo/app/javascript/controllers/index.js b/embedded_gems/pathogen/demo/app/javascript/controllers/index.js new file mode 100644 index 0000000000..1156bf8362 --- /dev/null +++ b/embedded_gems/pathogen/demo/app/javascript/controllers/index.js @@ -0,0 +1,4 @@ +// Import and register all your controllers from the importmap via controllers/**/*_controller +import { application } from "controllers/application" +import { eagerLoadControllersFrom } from "@hotwired/stimulus-loading" +eagerLoadControllersFrom("controllers", application) diff --git a/embedded_gems/pathogen/demo/app/jobs/application_job.rb b/embedded_gems/pathogen/demo/app/jobs/application_job.rb new file mode 100644 index 0000000000..d394c3d106 --- /dev/null +++ b/embedded_gems/pathogen/demo/app/jobs/application_job.rb @@ -0,0 +1,7 @@ +class ApplicationJob < ActiveJob::Base + # Automatically retry jobs that encountered a deadlock + # retry_on ActiveRecord::Deadlocked + + # Most jobs are safe to ignore if the underlying records are no longer available + # discard_on ActiveJob::DeserializationError +end diff --git a/embedded_gems/pathogen/demo/app/models/application_record.rb b/embedded_gems/pathogen/demo/app/models/application_record.rb new file mode 100644 index 0000000000..b63caeb8a5 --- /dev/null +++ b/embedded_gems/pathogen/demo/app/models/application_record.rb @@ -0,0 +1,3 @@ +class ApplicationRecord < ActiveRecord::Base + primary_abstract_class +end diff --git a/embedded_gems/pathogen/demo/app/views/layouts/application.html.erb b/embedded_gems/pathogen/demo/app/views/layouts/application.html.erb new file mode 100644 index 0000000000..6e3a87acf7 --- /dev/null +++ b/embedded_gems/pathogen/demo/app/views/layouts/application.html.erb @@ -0,0 +1,23 @@ + + + + <%= content_for(:title) || "Pathogen Demo" %> + + + <%= csrf_meta_tags %> + <%= csp_meta_tag %> + + <%= yield :head %> + + + + + + <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> + <%= javascript_importmap_tags %> + + + + <%= yield %> + + diff --git a/embedded_gems/pathogen/demo/app/views/pwa/manifest.json.erb b/embedded_gems/pathogen/demo/app/views/pwa/manifest.json.erb new file mode 100644 index 0000000000..bca61df47b --- /dev/null +++ b/embedded_gems/pathogen/demo/app/views/pwa/manifest.json.erb @@ -0,0 +1,22 @@ +{ + "name": "PathogenDemo", + "icons": [ + { + "src": "/icon.png", + "type": "image/png", + "sizes": "512x512" + }, + { + "src": "/icon.png", + "type": "image/png", + "sizes": "512x512", + "purpose": "maskable" + } + ], + "start_url": "/", + "display": "standalone", + "scope": "/", + "description": "PathogenDemo.", + "theme_color": "red", + "background_color": "red" +} diff --git a/embedded_gems/pathogen/demo/app/views/pwa/service-worker.js b/embedded_gems/pathogen/demo/app/views/pwa/service-worker.js new file mode 100644 index 0000000000..b3a13fb7bb --- /dev/null +++ b/embedded_gems/pathogen/demo/app/views/pwa/service-worker.js @@ -0,0 +1,26 @@ +// Add a service worker for processing Web Push notifications: +// +// self.addEventListener("push", async (event) => { +// const { title, options } = await event.data.json() +// event.waitUntil(self.registration.showNotification(title, options)) +// }) +// +// self.addEventListener("notificationclick", function(event) { +// event.notification.close() +// event.waitUntil( +// clients.matchAll({ type: "window" }).then((clientList) => { +// for (let i = 0; i < clientList.length; i++) { +// let client = clientList[i] +// let clientPath = (new URL(client.url)).pathname +// +// if (clientPath == event.notification.data.path && "focus" in client) { +// return client.focus() +// } +// } +// +// if (clients.openWindow) { +// return clients.openWindow(event.notification.data.path) +// } +// }) +// ) +// }) diff --git a/embedded_gems/pathogen/demo/bin/brakeman b/embedded_gems/pathogen/demo/bin/brakeman new file mode 100755 index 0000000000..ace1c9ba08 --- /dev/null +++ b/embedded_gems/pathogen/demo/bin/brakeman @@ -0,0 +1,7 @@ +#!/usr/bin/env ruby +require "rubygems" +require "bundler/setup" + +ARGV.unshift("--ensure-latest") + +load Gem.bin_path("brakeman", "brakeman") diff --git a/embedded_gems/pathogen/demo/bin/bundle b/embedded_gems/pathogen/demo/bin/bundle new file mode 100755 index 0000000000..50da5fdf9e --- /dev/null +++ b/embedded_gems/pathogen/demo/bin/bundle @@ -0,0 +1,109 @@ +#!/usr/bin/env ruby +# frozen_string_literal: true + +# +# This file was generated by Bundler. +# +# The application 'bundle' is installed as part of a gem, and +# this file is here to facilitate running it. +# + +require "rubygems" + +m = Module.new do + module_function + + def invoked_as_script? + File.expand_path($0) == File.expand_path(__FILE__) + end + + def env_var_version + ENV["BUNDLER_VERSION"] + end + + def cli_arg_version + return unless invoked_as_script? # don't want to hijack other binstubs + return unless "update".start_with?(ARGV.first || " ") # must be running `bundle update` + bundler_version = nil + update_index = nil + ARGV.each_with_index do |a, i| + if update_index && update_index.succ == i && a.match?(Gem::Version::ANCHORED_VERSION_PATTERN) + bundler_version = a + end + next unless a =~ /\A--bundler(?:[= ](#{Gem::Version::VERSION_PATTERN}))?\z/ + bundler_version = $1 + update_index = i + end + bundler_version + end + + def gemfile + gemfile = ENV["BUNDLE_GEMFILE"] + return gemfile if gemfile && !gemfile.empty? + + File.expand_path("../Gemfile", __dir__) + end + + def lockfile + lockfile = + case File.basename(gemfile) + when "gems.rb" then gemfile.sub(/\.rb$/, ".locked") + else "#{gemfile}.lock" + end + File.expand_path(lockfile) + end + + def lockfile_version + return unless File.file?(lockfile) + lockfile_contents = File.read(lockfile) + return unless lockfile_contents =~ /\n\nBUNDLED WITH\n\s{2,}(#{Gem::Version::VERSION_PATTERN})\n/ + Regexp.last_match(1) + end + + def bundler_requirement + @bundler_requirement ||= + env_var_version || + cli_arg_version || + bundler_requirement_for(lockfile_version) + end + + def bundler_requirement_for(version) + return "#{Gem::Requirement.default}.a" unless version + + bundler_gem_version = Gem::Version.new(version) + + bundler_gem_version.approximate_recommendation + end + + def load_bundler! + ENV["BUNDLE_GEMFILE"] ||= gemfile + + activate_bundler + end + + def activate_bundler + gem_error = activation_error_handling do + gem "bundler", bundler_requirement + end + return if gem_error.nil? + require_error = activation_error_handling do + require "bundler/version" + end + return if require_error.nil? && Gem::Requirement.new(bundler_requirement).satisfied_by?(Gem::Version.new(Bundler::VERSION)) + warn "Activating bundler (#{bundler_requirement}) failed:\n#{gem_error.message}\n\nTo install the version of bundler this project requires, run `gem install bundler -v '#{bundler_requirement}'`" + exit 42 + end + + def activation_error_handling + yield + nil + rescue StandardError, LoadError => e + e + end +end + +m.load_bundler! + +if m.invoked_as_script? + load Gem.bin_path("bundler", "bundle") +end diff --git a/embedded_gems/pathogen/demo/bin/docker-entrypoint b/embedded_gems/pathogen/demo/bin/docker-entrypoint new file mode 100755 index 0000000000..840d093a9a --- /dev/null +++ b/embedded_gems/pathogen/demo/bin/docker-entrypoint @@ -0,0 +1,13 @@ +#!/bin/bash -e + +# Enable jemalloc for reduced memory usage and latency. +if [ -z "${LD_PRELOAD+x}" ] && [ -f /usr/lib/*/libjemalloc.so.2 ]; then + export LD_PRELOAD="$(echo /usr/lib/*/libjemalloc.so.2)" +fi + +# If running the rails server then create or migrate existing database +if [ "${1}" == "./bin/rails" ] && [ "${2}" == "server" ]; then + ./bin/rails db:prepare +fi + +exec "${@}" diff --git a/embedded_gems/pathogen/demo/bin/importmap b/embedded_gems/pathogen/demo/bin/importmap new file mode 100755 index 0000000000..36502ab16c --- /dev/null +++ b/embedded_gems/pathogen/demo/bin/importmap @@ -0,0 +1,4 @@ +#!/usr/bin/env ruby + +require_relative "../config/application" +require "importmap/commands" diff --git a/embedded_gems/pathogen/demo/bin/rails b/embedded_gems/pathogen/demo/bin/rails new file mode 100755 index 0000000000..efc0377492 --- /dev/null +++ b/embedded_gems/pathogen/demo/bin/rails @@ -0,0 +1,4 @@ +#!/usr/bin/env ruby +APP_PATH = File.expand_path("../config/application", __dir__) +require_relative "../config/boot" +require "rails/commands" diff --git a/embedded_gems/pathogen/demo/bin/rake b/embedded_gems/pathogen/demo/bin/rake new file mode 100755 index 0000000000..4fbf10b960 --- /dev/null +++ b/embedded_gems/pathogen/demo/bin/rake @@ -0,0 +1,4 @@ +#!/usr/bin/env ruby +require_relative "../config/boot" +require "rake" +Rake.application.run diff --git a/embedded_gems/pathogen/demo/bin/rubocop b/embedded_gems/pathogen/demo/bin/rubocop new file mode 100755 index 0000000000..40330c0ff1 --- /dev/null +++ b/embedded_gems/pathogen/demo/bin/rubocop @@ -0,0 +1,8 @@ +#!/usr/bin/env ruby +require "rubygems" +require "bundler/setup" + +# explicit rubocop config increases performance slightly while avoiding config confusion. +ARGV.unshift("--config", File.expand_path("../.rubocop.yml", __dir__)) + +load Gem.bin_path("rubocop", "rubocop") diff --git a/embedded_gems/pathogen/demo/bin/setup b/embedded_gems/pathogen/demo/bin/setup new file mode 100755 index 0000000000..ba88d61f66 --- /dev/null +++ b/embedded_gems/pathogen/demo/bin/setup @@ -0,0 +1,37 @@ +#!/usr/bin/env ruby +require "fileutils" + +APP_ROOT = File.expand_path("..", __dir__) +APP_NAME = "pathogen-demo" + +def system!(*args) + system(*args, exception: true) +end + +FileUtils.chdir APP_ROOT do + # This script is a way to set up or update your development environment automatically. + # This script is idempotent, so that you can run it at any time and get an expectable outcome. + # Add necessary setup steps to this file. + + puts "== Installing dependencies ==" + system! "gem install bundler --conservative" + system("bundle check") || system!("bundle install") + + # puts "\n== Copying sample files ==" + # unless File.exist?("config/database.yml") + # FileUtils.cp "config/database.yml.sample", "config/database.yml" + # end + + puts "\n== Preparing database ==" + system! "bin/rails db:prepare" + + puts "\n== Removing old logs and tempfiles ==" + system! "bin/rails log:clear tmp:clear" + + puts "\n== Restarting application server ==" + system! "bin/rails restart" + + # puts "\n== Configuring puma-dev ==" + # system "ln -nfs #{APP_ROOT} ~/.puma-dev/#{APP_NAME}" + # system "curl -Is https://#{APP_NAME}.test/up | head -n 1" +end diff --git a/embedded_gems/pathogen/demo/config.ru b/embedded_gems/pathogen/demo/config.ru new file mode 100644 index 0000000000..4a3c09a688 --- /dev/null +++ b/embedded_gems/pathogen/demo/config.ru @@ -0,0 +1,6 @@ +# This file is used by Rack-based servers to start the application. + +require_relative "config/environment" + +run Rails.application +Rails.application.load_server diff --git a/embedded_gems/pathogen/demo/config/application.rb b/embedded_gems/pathogen/demo/config/application.rb new file mode 100644 index 0000000000..1118b1eb2f --- /dev/null +++ b/embedded_gems/pathogen/demo/config/application.rb @@ -0,0 +1,37 @@ +require_relative "boot" + +require "rails" +# Pick the frameworks you want: +require "active_model/railtie" +require "active_job/railtie" +require "active_record/railtie" +# require "active_storage/engine" +require "action_controller/railtie" +# require "action_mailer/railtie" +# require "action_mailbox/engine" +# require "action_text/engine" +require "action_view/railtie" +# require "action_cable/engine" +require "rails/test_unit/railtie" +require "view_component" +require "lookbook" + +module PathogenDemo + class Application < Rails::Application + # Initialize configuration defaults for originally generated Rails version. + config.load_defaults 7.2 + + # Please, add to the `ignore` list any other `lib` subdirectories that do + # not contain `.rb` files, or that should not be reloaded or eager loaded. + # Common ones are `templates`, `generators`, or `middleware`, for example. + config.autoload_lib(ignore: %w[assets tasks]) + + # Configuration for the application, engines, and railties goes here. + # + # These settings can be overridden in specific environments using the files + # in config/environments, which are processed later. + # + # config.time_zone = "Central Time (US & Canada)" + # config.eager_load_paths << Rails.root.join("extras") + end +end diff --git a/embedded_gems/pathogen/demo/config/boot.rb b/embedded_gems/pathogen/demo/config/boot.rb new file mode 100644 index 0000000000..988a5ddc46 --- /dev/null +++ b/embedded_gems/pathogen/demo/config/boot.rb @@ -0,0 +1,4 @@ +ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../Gemfile", __dir__) + +require "bundler/setup" # Set up gems listed in the Gemfile. +require "bootsnap/setup" # Speed up boot time by caching expensive operations. diff --git a/embedded_gems/pathogen/demo/config/credentials.yml.enc b/embedded_gems/pathogen/demo/config/credentials.yml.enc new file mode 100644 index 0000000000..0d2bf1ee15 --- /dev/null +++ b/embedded_gems/pathogen/demo/config/credentials.yml.enc @@ -0,0 +1 @@ +FB1UMRGvgk2y4yMpHQ4bg+oxLdxCbDHsUfzAQlOPtHKJNoHhS2tE1i6tSg3Ty2Ed6n4+m/vwSY5ncycztYqOwWWAGM18zZyVOm8Yb9kp56D6XEh+kICqkCLj+2y/Aa0p4ZpHm1opRgOfXQ7YMI2Te34GPaWeyLLd0e2Etfs63PpnBTF1s/Om5kYcqPqfe2bDTcWi9kYcJ5ddiwi272AgJheC5EBoWQnJZSgln7QvrcRU8/HbvsqKhzSL8AhOl+wdAFvlnNvfl78btZMsrrDXzE7gBv8EThXdMjQpXguH8AW4ErKesS6IcrpxjT0eyFh0/NDlFYXPv8KgzMklIvGYFfwX2d4e5i2k8APx32IEWdrKZs1CmHLP9zvc6nwRd+NShMclDZKkbO2E2Fj3xjSqVHMSoE27--3QVjmHReKF8mK93x--vwR3pkE6PKR5XgXMvgUzYw== \ No newline at end of file diff --git a/embedded_gems/pathogen/demo/config/database.yml b/embedded_gems/pathogen/demo/config/database.yml new file mode 100644 index 0000000000..01bebb5087 --- /dev/null +++ b/embedded_gems/pathogen/demo/config/database.yml @@ -0,0 +1,32 @@ +# SQLite. Versions 3.8.0 and up are supported. +# gem install sqlite3 +# +# Ensure the SQLite 3 gem is defined in your Gemfile +# gem "sqlite3" +# +default: &default + adapter: sqlite3 + pool: <%= ENV.fetch("RAILS_MAX_THREADS") { 5 } %> + timeout: 5000 + +development: + <<: *default + database: storage/development.sqlite3 + +# Warning: The database defined as "test" will be erased and +# re-generated from your development database when you run "rake". +# Do not set this db to the same as development or production. +test: + <<: *default + database: storage/test.sqlite3 + + +# SQLite3 write its data on the local filesystem, as such it requires +# persistent disks. If you are deploying to a managed service, you should +# make sure it provides disk persistence, as many don't. +# +# Similarly, if you deploy your application as a Docker container, you must +# ensure the database is located in a persisted volume. +production: + <<: *default + # database: path/to/persistent/storage/production.sqlite3 diff --git a/embedded_gems/pathogen/demo/config/environment.rb b/embedded_gems/pathogen/demo/config/environment.rb new file mode 100644 index 0000000000..cac5315775 --- /dev/null +++ b/embedded_gems/pathogen/demo/config/environment.rb @@ -0,0 +1,5 @@ +# Load the Rails application. +require_relative "application" + +# Initialize the Rails application. +Rails.application.initialize! diff --git a/embedded_gems/pathogen/demo/config/environments/development.rb b/embedded_gems/pathogen/demo/config/environments/development.rb new file mode 100644 index 0000000000..0255c366b0 --- /dev/null +++ b/embedded_gems/pathogen/demo/config/environments/development.rb @@ -0,0 +1,66 @@ +require "active_support/core_ext/integer/time" + +Rails.application.configure do + # Settings specified here will take precedence over those in config/application.rb. + + # In the development environment your application's code is reloaded any time + # it changes. This slows down response time but is perfect for development + # since you don't have to restart the web server when you make code changes. + config.enable_reloading = true + + # Do not eager load code on boot. + config.eager_load = false + + # Show full error reports. + config.consider_all_requests_local = true + + # Enable server timing. + config.server_timing = true + + # Enable/disable caching. By default caching is disabled. + # Run rails dev:cache to toggle caching. + if Rails.root.join("tmp/caching-dev.txt").exist? + config.action_controller.perform_caching = true + config.action_controller.enable_fragment_cache_logging = true + + config.cache_store = :memory_store + config.public_file_server.headers = { "Cache-Control" => "public, max-age=#{2.days.to_i}" } + else + config.action_controller.perform_caching = false + + config.cache_store = :null_store + end + + # Print deprecation notices to the Rails logger. + config.active_support.deprecation = :log + + # Raise exceptions for disallowed deprecations. + config.active_support.disallowed_deprecation = :raise + + # Tell Active Support which deprecation messages to disallow. + config.active_support.disallowed_deprecation_warnings = [] + + # Raise an error on page load if there are pending migrations. + config.active_record.migration_error = :page_load + + # Highlight code that triggered database queries in logs. + config.active_record.verbose_query_logs = true + + # Highlight code that enqueued background job in logs. + config.active_job.verbose_enqueue_logs = true + + # Suppress logger output for asset requests. + config.assets.quiet = true + + # Raises error for missing translations. + # config.i18n.raise_on_missing_translations = true + + # Annotate rendered view with file names. + config.action_view.annotate_rendered_view_with_filenames = true + + # Raise error when a before_action's only/except options reference missing actions. + config.action_controller.raise_on_missing_callback_actions = true + + # Apply autocorrection by RuboCop to files generated by `bin/rails generate`. + # config.generators.apply_rubocop_autocorrect_after_generate! +end diff --git a/embedded_gems/pathogen/demo/config/environments/production.rb b/embedded_gems/pathogen/demo/config/environments/production.rb new file mode 100644 index 0000000000..9b5ea7a981 --- /dev/null +++ b/embedded_gems/pathogen/demo/config/environments/production.rb @@ -0,0 +1,89 @@ +require "active_support/core_ext/integer/time" + +Rails.application.configure do + # Settings specified here will take precedence over those in config/application.rb. + + # Code is not reloaded between requests. + config.enable_reloading = false + + # Eager load code on boot. This eager loads most of Rails and + # your application in memory, allowing both threaded web servers + # and those relying on copy on write to perform better. + # Rake tasks automatically ignore this option for performance. + config.eager_load = true + + # Full error reports are disabled and caching is turned on. + config.consider_all_requests_local = false + config.action_controller.perform_caching = true + + # Ensures that a master key has been made available in ENV["RAILS_MASTER_KEY"], config/master.key, or an environment + # key such as config/credentials/production.key. This key is used to decrypt credentials (and other encrypted files). + # config.require_master_key = true + + # Disable serving static files from `public/`, relying on NGINX/Apache to do so instead. + # config.public_file_server.enabled = false + + # Compress CSS using a preprocessor. + # config.assets.css_compressor = :sass + + # Do not fall back to assets pipeline if a precompiled asset is missed. + config.assets.compile = false + + # Enable serving of images, stylesheets, and JavaScripts from an asset server. + # config.asset_host = "http://assets.example.com" + + # Specifies the header that your server uses for sending files. + # config.action_dispatch.x_sendfile_header = "X-Sendfile" # for Apache + # config.action_dispatch.x_sendfile_header = "X-Accel-Redirect" # for NGINX + + # Assume all access to the app is happening through a SSL-terminating reverse proxy. + # Can be used together with config.force_ssl for Strict-Transport-Security and secure cookies. + # config.assume_ssl = true + + # Force all access to the app over SSL, use Strict-Transport-Security, and use secure cookies. + config.force_ssl = true + + # Skip http-to-https redirect for the default health check endpoint. + # config.ssl_options = { redirect: { exclude: ->(request) { request.path == "/up" } } } + + # Log to STDOUT by default + config.logger = ActiveSupport::Logger.new(STDOUT) + .tap { |logger| logger.formatter = ::Logger::Formatter.new } + .then { |logger| ActiveSupport::TaggedLogging.new(logger) } + + # Prepend all log lines with the following tags. + config.log_tags = [ :request_id ] + + # "info" includes generic and useful information about system operation, but avoids logging too much + # information to avoid inadvertent exposure of personally identifiable information (PII). If you + # want to log everything, set the level to "debug". + config.log_level = ENV.fetch("RAILS_LOG_LEVEL", "info") + + # Use a different cache store in production. + # config.cache_store = :mem_cache_store + + # Use a real queuing backend for Active Job (and separate queues per environment). + # config.active_job.queue_adapter = :resque + # config.active_job.queue_name_prefix = "pathogen_demo_production" + + # Enable locale fallbacks for I18n (makes lookups for any locale fall back to + # the I18n.default_locale when a translation cannot be found). + config.i18n.fallbacks = true + + # Don't log any deprecations. + config.active_support.report_deprecations = false + + # Do not dump schema after migrations. + config.active_record.dump_schema_after_migration = false + + # Only use :id for inspections in production. + config.active_record.attributes_for_inspect = [ :id ] + + # Enable DNS rebinding protection and other `Host` header attacks. + # config.hosts = [ + # "example.com", # Allow requests from example.com + # /.*\.example\.com/ # Allow requests from subdomains like `www.example.com` + # ] + # Skip DNS rebinding protection for the default health check endpoint. + # config.host_authorization = { exclude: ->(request) { request.path == "/up" } } +end diff --git a/embedded_gems/pathogen/demo/config/environments/test.rb b/embedded_gems/pathogen/demo/config/environments/test.rb new file mode 100644 index 0000000000..999db7091e --- /dev/null +++ b/embedded_gems/pathogen/demo/config/environments/test.rb @@ -0,0 +1,51 @@ +require "active_support/core_ext/integer/time" + +# The test environment is used exclusively to run your application's +# test suite. You never need to work with it otherwise. Remember that +# your test database is "scratch space" for the test suite and is wiped +# and recreated between test runs. Don't rely on the data there! + +Rails.application.configure do + # Settings specified here will take precedence over those in config/application.rb. + + # While tests run files are not watched, reloading is not necessary. + config.enable_reloading = false + + # Eager loading loads your entire application. When running a single test locally, + # this is usually not necessary, and can slow down your test suite. However, it's + # recommended that you enable it in continuous integration systems to ensure eager + # loading is working properly before deploying your code. + config.eager_load = ENV["CI"].present? + + # Configure public file server for tests with Cache-Control for performance. + config.public_file_server.headers = { "Cache-Control" => "public, max-age=#{1.hour.to_i}" } + + # Show full error reports and disable caching. + config.consider_all_requests_local = true + config.action_controller.perform_caching = false + config.cache_store = :null_store + + # Render exception templates for rescuable exceptions and raise for other exceptions. + config.action_dispatch.show_exceptions = :rescuable + + # Disable request forgery protection in test environment. + config.action_controller.allow_forgery_protection = false + + # Print deprecation notices to the stderr. + config.active_support.deprecation = :stderr + + # Raise exceptions for disallowed deprecations. + config.active_support.disallowed_deprecation = :raise + + # Tell Active Support which deprecation messages to disallow. + config.active_support.disallowed_deprecation_warnings = [] + + # Raises error for missing translations. + # config.i18n.raise_on_missing_translations = true + + # Annotate rendered view with file names. + # config.action_view.annotate_rendered_view_with_filenames = true + + # Raise error when a before_action's only/except options reference missing actions. + config.action_controller.raise_on_missing_callback_actions = true +end diff --git a/embedded_gems/pathogen/demo/config/importmap.rb b/embedded_gems/pathogen/demo/config/importmap.rb new file mode 100644 index 0000000000..909dfc542d --- /dev/null +++ b/embedded_gems/pathogen/demo/config/importmap.rb @@ -0,0 +1,7 @@ +# Pin npm packages by running ./bin/importmap + +pin "application" +pin "@hotwired/turbo-rails", to: "turbo.min.js" +pin "@hotwired/stimulus", to: "stimulus.min.js" +pin "@hotwired/stimulus-loading", to: "stimulus-loading.js" +pin_all_from "app/javascript/controllers", under: "controllers" diff --git a/embedded_gems/pathogen/demo/config/initializers/assets.rb b/embedded_gems/pathogen/demo/config/initializers/assets.rb new file mode 100644 index 0000000000..bd5bcd2b6a --- /dev/null +++ b/embedded_gems/pathogen/demo/config/initializers/assets.rb @@ -0,0 +1,12 @@ +# Be sure to restart your server when you modify this file. + +# Version of your assets, change this if you want to expire all your assets. +Rails.application.config.assets.version = "1.0" + +# Add additional assets to the asset load path. +# Rails.application.config.assets.paths << Emoji.images_path + +# Precompile additional assets. +# application.js, application.css, and all non-JS/CSS in the app/assets +# folder are already added. +# Rails.application.config.assets.precompile += %w[ admin.js admin.css ] diff --git a/embedded_gems/pathogen/demo/config/initializers/content_security_policy.rb b/embedded_gems/pathogen/demo/config/initializers/content_security_policy.rb new file mode 100644 index 0000000000..b3076b38fe --- /dev/null +++ b/embedded_gems/pathogen/demo/config/initializers/content_security_policy.rb @@ -0,0 +1,25 @@ +# Be sure to restart your server when you modify this file. + +# Define an application-wide content security policy. +# See the Securing Rails Applications Guide for more information: +# https://guides.rubyonrails.org/security.html#content-security-policy-header + +# Rails.application.configure do +# config.content_security_policy do |policy| +# policy.default_src :self, :https +# policy.font_src :self, :https, :data +# policy.img_src :self, :https, :data +# policy.object_src :none +# policy.script_src :self, :https +# policy.style_src :self, :https +# # Specify URI for violation reports +# # policy.report_uri "/csp-violation-report-endpoint" +# end +# +# # Generate session nonces for permitted importmap, inline scripts, and inline styles. +# config.content_security_policy_nonce_generator = ->(request) { request.session.id.to_s } +# config.content_security_policy_nonce_directives = %w(script-src style-src) +# +# # Report violations without enforcing the policy. +# # config.content_security_policy_report_only = true +# end diff --git a/embedded_gems/pathogen/demo/config/initializers/filter_parameter_logging.rb b/embedded_gems/pathogen/demo/config/initializers/filter_parameter_logging.rb new file mode 100644 index 0000000000..c010b83ddd --- /dev/null +++ b/embedded_gems/pathogen/demo/config/initializers/filter_parameter_logging.rb @@ -0,0 +1,8 @@ +# Be sure to restart your server when you modify this file. + +# Configure parameters to be partially matched (e.g. passw matches password) and filtered from the log file. +# Use this to limit dissemination of sensitive information. +# See the ActiveSupport::ParameterFilter documentation for supported notations and behaviors. +Rails.application.config.filter_parameters += [ + :passw, :email, :secret, :token, :_key, :crypt, :salt, :certificate, :otp, :ssn +] diff --git a/embedded_gems/pathogen/demo/config/initializers/inflections.rb b/embedded_gems/pathogen/demo/config/initializers/inflections.rb new file mode 100644 index 0000000000..3860f659ea --- /dev/null +++ b/embedded_gems/pathogen/demo/config/initializers/inflections.rb @@ -0,0 +1,16 @@ +# Be sure to restart your server when you modify this file. + +# Add new inflection rules using the following format. Inflections +# are locale specific, and you may define rules for as many different +# locales as you wish. All of these examples are active by default: +# ActiveSupport::Inflector.inflections(:en) do |inflect| +# inflect.plural /^(ox)$/i, "\\1en" +# inflect.singular /^(ox)en/i, "\\1" +# inflect.irregular "person", "people" +# inflect.uncountable %w( fish sheep ) +# end + +# These inflection rules are supported but not enabled by default: +# ActiveSupport::Inflector.inflections(:en) do |inflect| +# inflect.acronym "RESTful" +# end diff --git a/embedded_gems/pathogen/demo/config/initializers/lookbook.rb b/embedded_gems/pathogen/demo/config/initializers/lookbook.rb new file mode 100644 index 0000000000..21c4ecf233 --- /dev/null +++ b/embedded_gems/pathogen/demo/config/initializers/lookbook.rb @@ -0,0 +1,8 @@ +Rails.application.configure do + config.lookbook.component_paths = [ + Rails.root.join("../app/components") + ] + config.lookbook.preview_paths = [ + Rails.root.join("test/components/previews") + ] +end diff --git a/embedded_gems/pathogen/demo/config/initializers/pathogen.rb b/embedded_gems/pathogen/demo/config/initializers/pathogen.rb new file mode 100644 index 0000000000..4a29eef881 --- /dev/null +++ b/embedded_gems/pathogen/demo/config/initializers/pathogen.rb @@ -0,0 +1,5 @@ +require "pathogen/view_components" + +# Configure Rails to autoload the components +Rails.application.config.autoload_paths << Rails.root.join("../app/components") +Rails.application.config.eager_load_paths << Rails.root.join("../app/components") diff --git a/embedded_gems/pathogen/demo/config/initializers/permissions_policy.rb b/embedded_gems/pathogen/demo/config/initializers/permissions_policy.rb new file mode 100644 index 0000000000..7db3b9577e --- /dev/null +++ b/embedded_gems/pathogen/demo/config/initializers/permissions_policy.rb @@ -0,0 +1,13 @@ +# Be sure to restart your server when you modify this file. + +# Define an application-wide HTTP permissions policy. For further +# information see: https://developers.google.com/web/updates/2018/06/feature-policy + +# Rails.application.config.permissions_policy do |policy| +# policy.camera :none +# policy.gyroscope :none +# policy.microphone :none +# policy.usb :none +# policy.fullscreen :self +# policy.payment :self, "https://secure.example.com" +# end diff --git a/embedded_gems/pathogen/demo/config/locales/en.yml b/embedded_gems/pathogen/demo/config/locales/en.yml new file mode 100644 index 0000000000..6c349ae5e3 --- /dev/null +++ b/embedded_gems/pathogen/demo/config/locales/en.yml @@ -0,0 +1,31 @@ +# Files in the config/locales directory are used for internationalization and +# are automatically loaded by Rails. If you want to use locales other than +# English, add the necessary files in this directory. +# +# To use the locales, use `I18n.t`: +# +# I18n.t "hello" +# +# In views, this is aliased to just `t`: +# +# <%= t("hello") %> +# +# To use a different locale, set it with `I18n.locale`: +# +# I18n.locale = :es +# +# This would use the information in config/locales/es.yml. +# +# To learn more about the API, please read the Rails Internationalization guide +# at https://guides.rubyonrails.org/i18n.html. +# +# Be aware that YAML interprets the following case-insensitive strings as +# booleans: `true`, `false`, `on`, `off`, `yes`, `no`. Therefore, these strings +# must be quoted to be interpreted as strings. For example: +# +# en: +# "yes": yup +# enabled: "ON" + +en: + hello: "Hello world" diff --git a/embedded_gems/pathogen/demo/config/master.key b/embedded_gems/pathogen/demo/config/master.key new file mode 100644 index 0000000000..7dfb3624a5 --- /dev/null +++ b/embedded_gems/pathogen/demo/config/master.key @@ -0,0 +1 @@ +b46b3f623c0851279b482686238ace57 \ No newline at end of file diff --git a/embedded_gems/pathogen/demo/config/puma.rb b/embedded_gems/pathogen/demo/config/puma.rb new file mode 100644 index 0000000000..03c166f4cf --- /dev/null +++ b/embedded_gems/pathogen/demo/config/puma.rb @@ -0,0 +1,34 @@ +# This configuration file will be evaluated by Puma. The top-level methods that +# are invoked here are part of Puma's configuration DSL. For more information +# about methods provided by the DSL, see https://puma.io/puma/Puma/DSL.html. + +# Puma starts a configurable number of processes (workers) and each process +# serves each request in a thread from an internal thread pool. +# +# The ideal number of threads per worker depends both on how much time the +# application spends waiting for IO operations and on how much you wish to +# to prioritize throughput over latency. +# +# As a rule of thumb, increasing the number of threads will increase how much +# traffic a given process can handle (throughput), but due to CRuby's +# Global VM Lock (GVL) it has diminishing returns and will degrade the +# response time (latency) of the application. +# +# The default is set to 3 threads as it's deemed a decent compromise between +# throughput and latency for the average Rails application. +# +# Any libraries that use a connection pool or another resource pool should +# be configured to provide at least as many connections as the number of +# threads. This includes Active Record's `pool` parameter in `database.yml`. +threads_count = ENV.fetch("RAILS_MAX_THREADS", 3) +threads threads_count, threads_count + +# Specifies the `port` that Puma will listen on to receive requests; default is 3000. +port ENV.fetch("PORT", 3000) + +# Allow puma to be restarted by `bin/rails restart` command. +plugin :tmp_restart + +# Specify the PID file. Defaults to tmp/pids/server.pid in development. +# In other environments, only set the PID file if requested. +pidfile ENV["PIDFILE"] if ENV["PIDFILE"] diff --git a/embedded_gems/pathogen/demo/config/routes.rb b/embedded_gems/pathogen/demo/config/routes.rb new file mode 100644 index 0000000000..e3e8800790 --- /dev/null +++ b/embedded_gems/pathogen/demo/config/routes.rb @@ -0,0 +1,18 @@ +Rails.application.routes.draw do + if Rails.env.development? + mount Lookbook::Engine, at: "/lookbook" + end + + # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html + + # Reveal health status on /up that returns 200 if the app boots with no exceptions, otherwise 500. + # Can be used by load balancers and uptime monitors to verify that the app is live. + get "up" => "rails/health#show", as: :rails_health_check + + # Render dynamic PWA files from app/views/pwa/* + get "service-worker" => "rails/pwa#service_worker", as: :pwa_service_worker + get "manifest" => "rails/pwa#manifest", as: :pwa_manifest + + # Defines the root path route ("/") + # root "posts#index" +end diff --git a/embedded_gems/pathogen/demo/db/seeds.rb b/embedded_gems/pathogen/demo/db/seeds.rb new file mode 100644 index 0000000000..4fbd6ed970 --- /dev/null +++ b/embedded_gems/pathogen/demo/db/seeds.rb @@ -0,0 +1,9 @@ +# This file should ensure the existence of records required to run the application in every environment (production, +# development, test). The code here should be idempotent so that it can be executed at any point in every environment. +# The data can then be loaded with the bin/rails db:seed command (or created alongside the database with db:setup). +# +# Example: +# +# ["Action", "Comedy", "Drama", "Horror"].each do |genre_name| +# MovieGenre.find_or_create_by!(name: genre_name) +# end diff --git a/embedded_gems/pathogen/demo/public/404.html b/embedded_gems/pathogen/demo/public/404.html new file mode 100644 index 0000000000..2be3af26fc --- /dev/null +++ b/embedded_gems/pathogen/demo/public/404.html @@ -0,0 +1,67 @@ + + + + The page you were looking for doesn't exist (404) + + + + + + +
+
+

The page you were looking for doesn't exist.

+

You may have mistyped the address or the page may have moved.

+
+

If you are the application owner check the logs for more information.

+
+ + diff --git a/embedded_gems/pathogen/demo/public/406-unsupported-browser.html b/embedded_gems/pathogen/demo/public/406-unsupported-browser.html new file mode 100644 index 0000000000..7cf1e168e6 --- /dev/null +++ b/embedded_gems/pathogen/demo/public/406-unsupported-browser.html @@ -0,0 +1,66 @@ + + + + Your browser is not supported (406) + + + + + + +
+
+

Your browser is not supported.

+

Please upgrade your browser to continue.

+
+
+ + diff --git a/embedded_gems/pathogen/demo/public/422.html b/embedded_gems/pathogen/demo/public/422.html new file mode 100644 index 0000000000..c08eac0d1d --- /dev/null +++ b/embedded_gems/pathogen/demo/public/422.html @@ -0,0 +1,67 @@ + + + + The change you wanted was rejected (422) + + + + + + +
+
+

The change you wanted was rejected.

+

Maybe you tried to change something you didn't have access to.

+
+

If you are the application owner check the logs for more information.

+
+ + diff --git a/embedded_gems/pathogen/demo/public/500.html b/embedded_gems/pathogen/demo/public/500.html new file mode 100644 index 0000000000..78a030af22 --- /dev/null +++ b/embedded_gems/pathogen/demo/public/500.html @@ -0,0 +1,66 @@ + + + + We're sorry, but something went wrong (500) + + + + + + +
+
+

We're sorry, but something went wrong.

+
+

If you are the application owner check the logs for more information.

+
+ + diff --git a/embedded_gems/pathogen/demo/public/icon.png b/embedded_gems/pathogen/demo/public/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..f3b5abcbde91cf6d7a6a26e514eb7e30f476f950 GIT binary patch literal 5599 zcmeHL-D}fO6hCR_taXJlzs3}~RuB=Iujyo=i*=1|1FN%E=zNfMTjru|Q<6v{J{U!C zBEE}?j6I3sz>fzN!6}L_BKjcuASk~1;Dg|U_@d{g?V8mM`~#9U+>>*Ezw>c(PjYWA z4(;!cgge6k5E&d$G5`S-0}!Ik>CV(0Y#1}s-v_gAHhja2=W1?nBAte9D2HG<(+)uj z!5=W4u*{VKMw#{V@^NNs4TClr!FAA%ID-*gc{R%CFKEzG<6gm*9s_uy)oMGW*=nJf zw{(Mau|2FHfXIv6C0@Wk5k)F=3jo1srV-C{pl&k&)4_&JjYrnbJiul}d0^NCSh(#7h=F;3{|>EU>h z6U8_p;^wK6mAB(1b92>5-HxJ~V}@3?G`&Qq-TbJ2(&~-HsH6F#8mFaAG(45eT3VPO zM|(Jd<+;UZs;w>0Qw}0>D%{~r{uo_Fl5_Bo3ABWi zWo^j^_T3dxG6J6fH8X)$a^%TJ#PU!=LxF=#Fd9EvKx_x>q<(KY%+y-08?kN9dXjXK z**Q=yt-FTU*13ouhCdqq-0&;Ke{T3sQU9IdzhV9LhQIpq*P{N)+}|Mh+a-VV=x?R} c>%+pvTcMWshj-umO}|qP?%A)*_KlqT3uEqhU;qFB literal 0 HcmV?d00001 diff --git a/embedded_gems/pathogen/demo/public/icon.svg b/embedded_gems/pathogen/demo/public/icon.svg new file mode 100644 index 0000000000..78307ccd4b --- /dev/null +++ b/embedded_gems/pathogen/demo/public/icon.svg @@ -0,0 +1,3 @@ + + + diff --git a/embedded_gems/pathogen/demo/public/robots.txt b/embedded_gems/pathogen/demo/public/robots.txt new file mode 100644 index 0000000000..c19f78ab68 --- /dev/null +++ b/embedded_gems/pathogen/demo/public/robots.txt @@ -0,0 +1 @@ +# See https://www.robotstxt.org/robotstxt.html for documentation on how to use the robots.txt file diff --git a/embedded_gems/pathogen/demo/test/application_system_test_case.rb b/embedded_gems/pathogen/demo/test/application_system_test_case.rb new file mode 100644 index 0000000000..cee29fd214 --- /dev/null +++ b/embedded_gems/pathogen/demo/test/application_system_test_case.rb @@ -0,0 +1,5 @@ +require "test_helper" + +class ApplicationSystemTestCase < ActionDispatch::SystemTestCase + driven_by :selenium, using: :headless_chrome, screen_size: [ 1400, 1400 ] +end diff --git a/embedded_gems/pathogen/demo/test/components/previews/button_preview.rb b/embedded_gems/pathogen/demo/test/components/previews/button_preview.rb new file mode 100644 index 0000000000..fffede562b --- /dev/null +++ b/embedded_gems/pathogen/demo/test/components/previews/button_preview.rb @@ -0,0 +1,10 @@ +class ButtonPreview < Lookbook::Preview + # @!group Basic + + # @label Default + def default + render Pathogen::Button.new do + "Click me" + end + end +end diff --git a/embedded_gems/pathogen/demo/test/test_helper.rb b/embedded_gems/pathogen/demo/test/test_helper.rb new file mode 100644 index 0000000000..0c22470ec1 --- /dev/null +++ b/embedded_gems/pathogen/demo/test/test_helper.rb @@ -0,0 +1,15 @@ +ENV["RAILS_ENV"] ||= "test" +require_relative "../config/environment" +require "rails/test_help" + +module ActiveSupport + class TestCase + # Run tests in parallel with specified workers + parallelize(workers: :number_of_processors) + + # Setup all fixtures in test/fixtures/*.yml for all tests in alphabetical order. + fixtures :all + + # Add more helper methods to be used by all tests here... + end +end diff --git a/embedded_gems/pathogen/demo/vendor/javascript/.keep b/embedded_gems/pathogen/demo/vendor/javascript/.keep new file mode 100644 index 0000000000..e69de29bb2 From b2fee92e245493d185da8346bdec0e14ba5fb112 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 20 Nov 2024 12:14:59 -0600 Subject: [PATCH 02/68] feat: :sparkles: Working lookbook preview (except css) --- bin/dev | 8 ++++ embedded_gems/pathogen/Gemfile | 1 + embedded_gems/pathogen/Gemfile.lock | 10 +++++ embedded_gems/pathogen/Procfile | 2 + .../stylesheets/application.tailwind.css | 0 embedded_gems/pathogen/bin/dev | 11 +++++ embedded_gems/pathogen/demo/Gemfile | 9 ++++- embedded_gems/pathogen/demo/Gemfile.lock | 40 +++++++++++++++---- embedded_gems/pathogen/demo/Procfile | 3 ++ .../app/controllers/application_controller.rb | 1 + .../app/controllers/preview_controller.rb | 7 ++++ .../demo/app/helpers/application_helper.rb | 31 ++++++++++++++ .../app/views/layouts/application.html.erb | 1 + .../views/layouts/component_preview.html.erb | 39 ++++++++++++++++++ .../pathogen/demo/config/application.rb | 31 ++++++++++---- .../demo/config/environments/development.rb | 16 +++----- .../demo/config/initializers/assets.rb | 12 ------ .../demo/config/initializers/pathogen.rb | 7 ++-- .../demo/previews/pathogen/button_preview.rb | 12 ++++++ .../components/previews/button_preview.rb | 5 ++- .../lib/pathogen/view_components/version.rb | 4 +- .../pathogen/pathogen_view_components.gemspec | 2 +- .../previews/primer/button_preview.rb | 13 ++++++ 23 files changed, 218 insertions(+), 47 deletions(-) create mode 100644 embedded_gems/pathogen/Procfile create mode 100644 embedded_gems/pathogen/app/assets/stylesheets/application.tailwind.css create mode 100755 embedded_gems/pathogen/bin/dev create mode 100644 embedded_gems/pathogen/demo/Procfile create mode 100644 embedded_gems/pathogen/demo/app/controllers/preview_controller.rb create mode 100644 embedded_gems/pathogen/demo/app/views/layouts/component_preview.html.erb delete mode 100644 embedded_gems/pathogen/demo/config/initializers/assets.rb create mode 100644 embedded_gems/pathogen/demo/previews/pathogen/button_preview.rb create mode 100644 embedded_gems/pathogen/previews/primer/button_preview.rb diff --git a/bin/dev b/bin/dev index 74ade16641..ad72c7d53c 100755 --- a/bin/dev +++ b/bin/dev @@ -5,4 +5,12 @@ if ! gem list foreman -i --silent; then gem install foreman fi +# Default to port 3000 if not specified +export PORT="${PORT:-3000}" + +# Let the debug gem allow remote connections, +# but avoid loading until `debugger` is called +export RUBY_DEBUG_OPEN="true" +export RUBY_DEBUG_LAZY="true" + exec foreman start -f Procfile.dev "$@" diff --git a/embedded_gems/pathogen/Gemfile b/embedded_gems/pathogen/Gemfile index 812b7ae9ac..bbfa760dec 100644 --- a/embedded_gems/pathogen/Gemfile +++ b/embedded_gems/pathogen/Gemfile @@ -13,4 +13,5 @@ group :development do gem 'rubocop-performance' gem 'rubocop-rails' gem 'rubocop-rails-accessibility', '~> 1.0' + gem "tailwindcss-rails" end diff --git a/embedded_gems/pathogen/Gemfile.lock b/embedded_gems/pathogen/Gemfile.lock index c193d30ceb..d4b25846f2 100644 --- a/embedded_gems/pathogen/Gemfile.lock +++ b/embedded_gems/pathogen/Gemfile.lock @@ -220,6 +220,15 @@ GEM rubocop (>= 1.0.0) ruby-progressbar (1.13.0) stringio (3.1.1) + tailwindcss-rails (3.0.0) + railties (>= 7.0.0) + tailwindcss-ruby + tailwindcss-ruby (3.4.15) + tailwindcss-ruby (3.4.15-aarch64-linux) + tailwindcss-ruby (3.4.15-arm-linux) + tailwindcss-ruby (3.4.15-arm64-darwin) + tailwindcss-ruby (3.4.15-x86_64-darwin) + tailwindcss-ruby (3.4.15-x86_64-linux) thor (1.3.2) timeout (0.4.1) tzinfo (2.0.6) @@ -251,6 +260,7 @@ DEPENDENCIES rubocop-performance rubocop-rails rubocop-rails-accessibility (~> 1.0) + tailwindcss-rails BUNDLED WITH 2.5.21 diff --git a/embedded_gems/pathogen/Procfile b/embedded_gems/pathogen/Procfile new file mode 100644 index 0000000000..e501ae4b59 --- /dev/null +++ b/embedded_gems/pathogen/Procfile @@ -0,0 +1,2 @@ +web: cd demo && bin/rails server -p 3001 +css: bin/rails tailwindcss:watch diff --git a/embedded_gems/pathogen/app/assets/stylesheets/application.tailwind.css b/embedded_gems/pathogen/app/assets/stylesheets/application.tailwind.css new file mode 100644 index 0000000000..e69de29bb2 diff --git a/embedded_gems/pathogen/bin/dev b/embedded_gems/pathogen/bin/dev new file mode 100755 index 0000000000..9565868057 --- /dev/null +++ b/embedded_gems/pathogen/bin/dev @@ -0,0 +1,11 @@ +#!/usr/bin/env sh + +# install foreman if needed — https://github.com/ddollar/foreman +if ! gem list foreman -i --silent; then + echo "Installing foreman..." + gem install foreman +fi + +# run foreman and point it to our Procfile.dev, and pass through any arguments we've added +# learn more from the foreman docs — https://ddollar.github.io/foreman/ +exec foreman start -f Procfile "$@" diff --git a/embedded_gems/pathogen/demo/Gemfile b/embedded_gems/pathogen/demo/Gemfile index 38415c0f20..4fd95e94e8 100644 --- a/embedded_gems/pathogen/demo/Gemfile +++ b/embedded_gems/pathogen/demo/Gemfile @@ -2,8 +2,8 @@ source "https://rubygems.org" # Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main" gem "rails", "~> 7.2.2" -# The original asset pipeline for Rails [https://github.com/rails/sprockets-rails] -gem "sprockets-rails" +# Use propshaft for the asset pipeline +gem "propshaft" # Use sqlite3 as the database for Active Record gem "sqlite3", ">= 1.4" # Use the Puma web server [https://github.com/puma/puma] @@ -23,6 +23,9 @@ gem "jbuilder" # Use Active Model has_secure_password [https://guides.rubyonrails.org/active_model_basics.html#securepassword] # gem "bcrypt", "~> 3.1.7" +# Required for the livereload gem +gem "redis" + # Windows does not include zoneinfo files, so bundle the tzinfo-data gem gem "tzinfo-data", platforms: %i[ windows jruby ] @@ -53,3 +56,5 @@ group :test do gem "capybara" gem "selenium-webdriver" end + +gem "hotwire-livereload", "~> 1.4", :group => :development diff --git a/embedded_gems/pathogen/demo/Gemfile.lock b/embedded_gems/pathogen/demo/Gemfile.lock index 3d80881be6..07e34b82b0 100644 --- a/embedded_gems/pathogen/demo/Gemfile.lock +++ b/embedded_gems/pathogen/demo/Gemfile.lock @@ -113,11 +113,25 @@ GEM reline (>= 0.3.8) drb (2.2.1) erubi (1.13.0) + ffi (1.17.0-aarch64-linux-gnu) + ffi (1.17.0-aarch64-linux-musl) + ffi (1.17.0-arm-linux-gnu) + ffi (1.17.0-arm-linux-musl) + ffi (1.17.0-arm64-darwin) + ffi (1.17.0-x86-linux-gnu) + ffi (1.17.0-x86-linux-musl) + ffi (1.17.0-x86_64-darwin) + ffi (1.17.0-x86_64-linux-gnu) + ffi (1.17.0-x86_64-linux-musl) globalid (1.2.1) activesupport (>= 6.1) heroicon-rails (0.2.9) activesupport (>= 7.0.8) nokogiri (>= 1.14.3) + hotwire-livereload (1.4.1) + actioncable (>= 6.0.0) + listen (>= 3.0.0) + railties (>= 6.0.0) htmlbeautifier (1.4.3) htmlentities (4.3.4) i18n (1.14.6) @@ -135,6 +149,9 @@ GEM activesupport (>= 5.0.0) json (2.8.2) language_server-protocol (3.17.0.3) + listen (3.9.0) + rb-fsevent (~> 0.10, >= 0.10.3) + rb-inotify (~> 0.9, >= 0.9.10) logger (1.6.1) loofah (2.23.1) crass (~> 1.0.2) @@ -188,6 +205,11 @@ GEM parser (3.3.6.0) ast (~> 2.4.1) racc + propshaft (1.1.0) + actionpack (>= 7.0.0) + activesupport (>= 7.0.0) + rack + railties (>= 7.0.0) psych (5.2.0) stringio public_suffix (6.0.1) @@ -232,9 +254,16 @@ GEM zeitwerk (~> 2.6) rainbow (3.1.1) rake (13.2.1) + rb-fsevent (0.11.2) + rb-inotify (0.11.1) + ffi (~> 1.0) rdoc (6.8.1) psych (>= 4.0.0) redcarpet (3.6.0) + redis (5.3.0) + redis-client (>= 0.22.0) + redis-client (0.22.2) + connection_pool regexp_parser (2.9.2) reline (0.5.11) io-console (~> 0.5) @@ -277,13 +306,6 @@ GEM rexml (~> 3.2, >= 3.2.5) rubyzip (>= 1.2.2, < 3.0) websocket (~> 1.0) - sprockets (4.2.1) - concurrent-ruby (~> 1.0) - rack (>= 2.2.4, < 4) - sprockets-rails (3.5.2) - actionpack (>= 6.1) - activesupport (>= 6.1) - sprockets (>= 3.0.0) sqlite3 (2.2.0-aarch64-linux-gnu) sqlite3 (2.2.0-aarch64-linux-musl) sqlite3 (2.2.0-arm-linux-gnu) @@ -345,15 +367,17 @@ DEPENDENCIES brakeman capybara debug + hotwire-livereload (~> 1.4) importmap-rails jbuilder lookbook pathogen_view_components! + propshaft puma (>= 5.0) rails (~> 7.2.2) + redis rubocop-rails-omakase selenium-webdriver - sprockets-rails sqlite3 (>= 1.4) stimulus-rails turbo-rails diff --git a/embedded_gems/pathogen/demo/Procfile b/embedded_gems/pathogen/demo/Procfile new file mode 100644 index 0000000000..8afc5e6d12 --- /dev/null +++ b/embedded_gems/pathogen/demo/Procfile @@ -0,0 +1,3 @@ +web: bin/rails s -p 3001 +css: bin/rails tailwindcss:watch +js: bin/rails webpack:watch diff --git a/embedded_gems/pathogen/demo/app/controllers/application_controller.rb b/embedded_gems/pathogen/demo/app/controllers/application_controller.rb index 0d95db22b4..9d538a93ea 100644 --- a/embedded_gems/pathogen/demo/app/controllers/application_controller.rb +++ b/embedded_gems/pathogen/demo/app/controllers/application_controller.rb @@ -1,4 +1,5 @@ class ApplicationController < ActionController::Base # Only allow modern browsers supporting webp images, web push, badges, import maps, CSS nesting, and CSS :has. allow_browser versions: :modern + protect_from_forgery with: :exception end diff --git a/embedded_gems/pathogen/demo/app/controllers/preview_controller.rb b/embedded_gems/pathogen/demo/app/controllers/preview_controller.rb new file mode 100644 index 0000000000..d8874295ca --- /dev/null +++ b/embedded_gems/pathogen/demo/app/controllers/preview_controller.rb @@ -0,0 +1,7 @@ +# frozen_string_literal: true + +require "rails/application_controller" + +class PreviewController < ViewComponentsController # :nodoc: + helper Lookbook::PreviewHelper if defined?(Lookbook) +end diff --git a/embedded_gems/pathogen/demo/app/helpers/application_helper.rb b/embedded_gems/pathogen/demo/app/helpers/application_helper.rb index de6be7945c..8dbe35a32b 100644 --- a/embedded_gems/pathogen/demo/app/helpers/application_helper.rb +++ b/embedded_gems/pathogen/demo/app/helpers/application_helper.rb @@ -1,2 +1,33 @@ module ApplicationHelper + def color_themes + %w[ + light + light_colorblind + light_high_contrast + dark + dark_dimmed + dark_high_contrast + dark_colorblind + ] + end + + def color_theme_attributes(theme = "light") + theme = color_themes.include?(theme) ? theme : "light" + mode = theme.include?("dark") ? "dark" : "light" + + attributes = { + "data-color-mode": mode, + "data-#{mode}-theme": theme + } + + tag_attributes(attributes) + end + + def tag_attributes(hash) + parts = hash.map do |key, value| + safe_join([key, "=", value]) + end + + safe_join(parts, " ") + end end diff --git a/embedded_gems/pathogen/demo/app/views/layouts/application.html.erb b/embedded_gems/pathogen/demo/app/views/layouts/application.html.erb index 6e3a87acf7..a4a5b9eaa9 100644 --- a/embedded_gems/pathogen/demo/app/views/layouts/application.html.erb +++ b/embedded_gems/pathogen/demo/app/views/layouts/application.html.erb @@ -15,6 +15,7 @@ <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_importmap_tags %> + <%= hotwire_livereload_tags if Rails.env.development? %> diff --git a/embedded_gems/pathogen/demo/app/views/layouts/component_preview.html.erb b/embedded_gems/pathogen/demo/app/views/layouts/component_preview.html.erb new file mode 100644 index 0000000000..23a89d1e8f --- /dev/null +++ b/embedded_gems/pathogen/demo/app/views/layouts/component_preview.html.erb @@ -0,0 +1,39 @@ + + +> + + Component Preview + + + <%= csrf_meta_tags %> + <%= csp_meta_tag %> + + <%= stylesheet_link_tag "application" %> + + <%= hotwire_livereload_tags if Rails.env.development? %> + + <% if Rails.env.development? %> + <%= javascript_include_tag "hotwire-livereload", defer: true %> + <% end %> + + + +
+ <% if params.dig(:lookbook, :display, :theme) == "all" || params.dig(:theme) == "all" %> +
+ <% color_themes.each do |theme| %> +
> + <%= yield %> +
<%= theme %>
+
+ <% end %> +
+ <% else %> +
+ <%= yield %> +
+ <% end %> +
+ + diff --git a/embedded_gems/pathogen/demo/config/application.rb b/embedded_gems/pathogen/demo/config/application.rb index 1118b1eb2f..1cf02027f5 100644 --- a/embedded_gems/pathogen/demo/config/application.rb +++ b/embedded_gems/pathogen/demo/config/application.rb @@ -5,18 +5,19 @@ require "active_model/railtie" require "active_job/railtie" require "active_record/railtie" -# require "active_storage/engine" require "action_controller/railtie" -# require "action_mailer/railtie" -# require "action_mailbox/engine" -# require "action_text/engine" require "action_view/railtie" -# require "action_cable/engine" require "rails/test_unit/railtie" +require "pathogen/view_components" +require "pathogen/view_components/engine" require "view_component" require "lookbook" -module PathogenDemo +# Require the gems listed in Gemfile, including any gems +# you've limited to :test, :development, or :production. +Bundler.require(*Rails.groups) + +module Demo class Application < Rails::Application # Initialize configuration defaults for originally generated Rails version. config.load_defaults 7.2 @@ -24,7 +25,7 @@ class Application < Rails::Application # Please, add to the `ignore` list any other `lib` subdirectories that do # not contain `.rb` files, or that should not be reloaded or eager loaded. # Common ones are `templates`, `generators`, or `middleware`, for example. - config.autoload_lib(ignore: %w[assets tasks]) + config.autoload_lib(ignore: %w(assets tasks)) # Configuration for the application, engines, and railties goes here. # @@ -33,5 +34,21 @@ class Application < Rails::Application # # config.time_zone = "Central Time (US & Canada)" # config.eager_load_paths << Rails.root.join("extras") + # + config.hotwire_livereload.disable_default_listeners = true + config.hotwire_livereload.listen_paths = [ + Rails.root.join("app/assets/stylesheets"), + Rails.root.join("app/javascript"), + Rails.root.join("test/components") + ] + + # Initialize configuration defaults for originally generated Rails version. + config.view_component.default_preview_layout = "component_preview" + config.view_component.show_previews = true + config.view_component.preview_controller = "PreviewController" + config.view_component.preview_paths << Rails.root.join("..", "previews") + + config.lookbook.project_name = "Pathogen ViewComponents v#{Pathogen::ViewComponents::VERSION::STRING}" + config.lookbook.component_paths = [Pathogen::ViewComponents::Engine.root.join("app", "components")] end end diff --git a/embedded_gems/pathogen/demo/config/environments/development.rb b/embedded_gems/pathogen/demo/config/environments/development.rb index 0255c366b0..0384293c81 100644 --- a/embedded_gems/pathogen/demo/config/environments/development.rb +++ b/embedded_gems/pathogen/demo/config/environments/development.rb @@ -14,7 +14,7 @@ # Show full error reports. config.consider_all_requests_local = true - # Enable server timing. + # Enable server timing config.server_timing = true # Enable/disable caching. By default caching is disabled. @@ -24,7 +24,9 @@ config.action_controller.enable_fragment_cache_logging = true config.cache_store = :memory_store - config.public_file_server.headers = { "Cache-Control" => "public, max-age=#{2.days.to_i}" } + config.public_file_server.headers = { + "Cache-Control" => "public, max-age=#{2.days.to_i}" + } else config.action_controller.perform_caching = false @@ -49,18 +51,12 @@ # Highlight code that enqueued background job in logs. config.active_job.verbose_enqueue_logs = true - # Suppress logger output for asset requests. - config.assets.quiet = true - # Raises error for missing translations. # config.i18n.raise_on_missing_translations = true # Annotate rendered view with file names. - config.action_view.annotate_rendered_view_with_filenames = true + # config.action_view.annotate_rendered_view_with_filenames = true - # Raise error when a before_action's only/except options reference missing actions. + # Raise error when a before_action's only/except options reference missing actions config.action_controller.raise_on_missing_callback_actions = true - - # Apply autocorrection by RuboCop to files generated by `bin/rails generate`. - # config.generators.apply_rubocop_autocorrect_after_generate! end diff --git a/embedded_gems/pathogen/demo/config/initializers/assets.rb b/embedded_gems/pathogen/demo/config/initializers/assets.rb deleted file mode 100644 index bd5bcd2b6a..0000000000 --- a/embedded_gems/pathogen/demo/config/initializers/assets.rb +++ /dev/null @@ -1,12 +0,0 @@ -# Be sure to restart your server when you modify this file. - -# Version of your assets, change this if you want to expire all your assets. -Rails.application.config.assets.version = "1.0" - -# Add additional assets to the asset load path. -# Rails.application.config.assets.paths << Emoji.images_path - -# Precompile additional assets. -# application.js, application.css, and all non-JS/CSS in the app/assets -# folder are already added. -# Rails.application.config.assets.precompile += %w[ admin.js admin.css ] diff --git a/embedded_gems/pathogen/demo/config/initializers/pathogen.rb b/embedded_gems/pathogen/demo/config/initializers/pathogen.rb index 4a29eef881..76c8fe3c5d 100644 --- a/embedded_gems/pathogen/demo/config/initializers/pathogen.rb +++ b/embedded_gems/pathogen/demo/config/initializers/pathogen.rb @@ -1,5 +1,6 @@ require "pathogen/view_components" -# Configure Rails to autoload the components -Rails.application.config.autoload_paths << Rails.root.join("../app/components") -Rails.application.config.eager_load_paths << Rails.root.join("../app/components") +# Use concat to create new arrays instead of modifying the existing ones +components_path = Rails.root.join("../app/components") +Rails.application.config.autoload_paths = Rails.application.config.autoload_paths.dup.concat([components_path]) +Rails.application.config.eager_load_paths = Rails.application.config.eager_load_paths.dup.concat([components_path]) diff --git a/embedded_gems/pathogen/demo/previews/pathogen/button_preview.rb b/embedded_gems/pathogen/demo/previews/pathogen/button_preview.rb new file mode 100644 index 0000000000..60b73b2915 --- /dev/null +++ b/embedded_gems/pathogen/demo/previews/pathogen/button_preview.rb @@ -0,0 +1,12 @@ +# frozen_string_literal: true + +module Pathogen + class ButtonPreview < ViewComponent::Preview + # @label Default + def default + render Pathogen::Button.new do + "Don't click me" + end + end + end +end diff --git a/embedded_gems/pathogen/demo/test/components/previews/button_preview.rb b/embedded_gems/pathogen/demo/test/components/previews/button_preview.rb index fffede562b..72ff448eab 100644 --- a/embedded_gems/pathogen/demo/test/components/previews/button_preview.rb +++ b/embedded_gems/pathogen/demo/test/components/previews/button_preview.rb @@ -1,10 +1,11 @@ -class ButtonPreview < Lookbook::Preview +# frozen_string_literal: true +class ButtonPreview < ViewComponent::Preview # @!group Basic # @label Default def default render Pathogen::Button.new do - "Click me" + "Click me friend" end end end diff --git a/embedded_gems/pathogen/lib/pathogen/view_components/version.rb b/embedded_gems/pathogen/lib/pathogen/view_components/version.rb index 62b12145be..6f54c580e2 100644 --- a/embedded_gems/pathogen/lib/pathogen/view_components/version.rb +++ b/embedded_gems/pathogen/lib/pathogen/view_components/version.rb @@ -2,7 +2,7 @@ module Pathogen module ViewComponents - module Version + module VERSION MAJOR = 0 MINOR = 0 PATCH = 1 @@ -12,4 +12,4 @@ module Version end end -Rails.logger.debug Pathogen::ViewComponents::Version::STRING if __FILE__ == $PROGRAM_NAME +Rails.logger.debug Pathogen::ViewComponents::VERSION::STRING if __FILE__ == $PROGRAM_NAME diff --git a/embedded_gems/pathogen/pathogen_view_components.gemspec b/embedded_gems/pathogen/pathogen_view_components.gemspec index efeb54585c..c0670f3def 100644 --- a/embedded_gems/pathogen/pathogen_view_components.gemspec +++ b/embedded_gems/pathogen/pathogen_view_components.gemspec @@ -7,7 +7,7 @@ require 'pathogen/view_components/version' Gem::Specification.new do |spec| spec.name = 'pathogen_view_components' spec.authors = ['Bioinformatics, Public Health Agency of Canada'] - spec.version = Pathogen::ViewComponents::Version::STRING + spec.version = Pathogen::ViewComponents::VERSION::STRING spec.summary = 'Pathogen View Components' spec.license = 'MIT' spec.files = Dir['lib/**/*'] diff --git a/embedded_gems/pathogen/previews/primer/button_preview.rb b/embedded_gems/pathogen/previews/primer/button_preview.rb new file mode 100644 index 0000000000..0013b14e21 --- /dev/null +++ b/embedded_gems/pathogen/previews/primer/button_preview.rb @@ -0,0 +1,13 @@ +# frozen_string_literal: true + +module Primer + # Preview class for Primer::Button component + class ButtonPreview < ViewComponent::Preview + # @label Default + def default + render Primer::Button.new do + 'Shit' + end + end + end +end From 8c208af4d4615f57aac0cf5798c6654aa6c54cb4 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 20 Nov 2024 14:25:13 -0600 Subject: [PATCH 03/68] fix: Cleaned up gitignore --- embedded/pathogen/postcss.config.js | 6 +++ embedded_gems/pathogen/.gitignore | 75 ++--------------------------- 2 files changed, 10 insertions(+), 71 deletions(-) create mode 100644 embedded/pathogen/postcss.config.js diff --git a/embedded/pathogen/postcss.config.js b/embedded/pathogen/postcss.config.js new file mode 100644 index 0000000000..12a703d900 --- /dev/null +++ b/embedded/pathogen/postcss.config.js @@ -0,0 +1,6 @@ +module.exports = { + plugins: { + tailwindcss: {}, + autoprefixer: {}, + }, +}; diff --git a/embedded_gems/pathogen/.gitignore b/embedded_gems/pathogen/.gitignore index 3ecdc16ccd..c43680e525 100644 --- a/embedded_gems/pathogen/.gitignore +++ b/embedded_gems/pathogen/.gitignore @@ -1,71 +1,4 @@ -# Ruby specific -*.gem -*.rbc -/.config -/coverage/ -/InstalledFiles -/pkg/ -/spec/reports/ -/spec/examples.txt -/test/tmp/ -/test/version_tmp/ -/tmp/ -.dat* -.repl_history -build/ -*.bridgesupport -build-iPhoneOS/ -build-iPhoneSimulator/ - -# Bundler specific -/.bundle/ -/vendor/bundle -/lib/bundler/man/ - -# Environment normalization -/.bundle/ -/vendor/bundle -.env -.env.* - -# Documentation cache and generated files -/.yardoc/ -/_yardoc/ -/doc/ -/rdoc/ - -# IDE specific files -.idea/ -.vscode/ -*.swp -*.swo -*~ - -# OS specific files -.DS_Store -.DS_Store? -._* -.Spotlight-V100 -.Trashes -ehthumbs.db -Thumbs.db - -# Log files -*.log -log/*.log - -# Demo app specific -/demo/tmp/ -/demo/log/ -/demo/public/assets/ -/demo/storage/ -/demo/.sass-cache/ - -# Testing artifacts -/coverage/ -.rspec_status - -# Ruby version managers -.ruby-version -.ruby-gemset -.rvmrc +node_modules +demo/node_modules +demo/log +demo/tmp From 9e410fc8caef8f076aa5cb25752a16036cd711d5 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Thu, 21 Nov 2024 11:54:21 -0600 Subject: [PATCH 04/68] fix: Fixed preview issue caused by wrong file name --- .../pathogen/demo/storage/development.sqlite3 | Bin 0 -> 20480 bytes .../{primer => pathogen}/button_preview.rb | 4 ++-- 2 files changed, 2 insertions(+), 2 deletions(-) create mode 100644 embedded_gems/pathogen/demo/storage/development.sqlite3 rename embedded_gems/pathogen/previews/{primer => pathogen}/button_preview.rb (79%) diff --git a/embedded_gems/pathogen/demo/storage/development.sqlite3 b/embedded_gems/pathogen/demo/storage/development.sqlite3 new file mode 100644 index 0000000000000000000000000000000000000000..fb5930c785d6e1c74100d4f54520a1757a03ee1c GIT binary patch literal 20480 zcmeI%O-lkn7{Kw_)m{kFZXP@|>`5V#2)lI2LLxLPGblPNlTNkdYOSNxC9v<*7wgoq zSwSh(b0GhP-JN;nncaPUJC|iIFRFpj^1d5|%E(=@AzW7+NGXJH?Y?C9@fP=!_M;$6Z3?3q7f^Mfb z6>$H;OpV7X10D730g#ZEwAb Date: Fri, 22 Nov 2024 11:03:23 -0600 Subject: [PATCH 05/68] chore: Working on getting css to work --- embedded/pathogen/postcss.config.js | 6 - embedded_gems/pathogen/Procfile | 3 +- .../stylesheets/application.tailwind.css | 3 + embedded_gems/pathogen/demo/Gemfile | 4 +- embedded_gems/pathogen/demo/Gemfile.lock | 10 + embedded_gems/pathogen/demo/Procfile.dev | 2 + .../pathogen/demo/app/assets/builds/.keep | 0 .../demo/app/assets/builds/tailwind.css | 1 + .../demo/app/assets/config/manifest.js | 1 + .../stylesheets/application.tailwind.css | 3 + .../app/views/layouts/application.html.erb | 5 +- .../views/layouts/component_preview.html.erb | 3 +- embedded_gems/pathogen/demo/bin/dev | 16 + .../pathogen/demo/config/tailwind.config.js | 9 + .../demo/previews/pathogen/button_preview.rb | 12 - .../components/previews/button_preview.rb | 6 +- .../previews/button_preview/default.html.erb | 3 + embedded_gems/pathogen/package.json | 15 + embedded_gems/pathogen/pnpm-lock.yaml | 842 ++++++++++++++++++ embedded_gems/pathogen/tailwind.config.js | 8 + 20 files changed, 924 insertions(+), 28 deletions(-) delete mode 100644 embedded/pathogen/postcss.config.js create mode 100644 embedded_gems/pathogen/demo/Procfile.dev create mode 100644 embedded_gems/pathogen/demo/app/assets/builds/.keep create mode 100644 embedded_gems/pathogen/demo/app/assets/builds/tailwind.css create mode 100644 embedded_gems/pathogen/demo/app/assets/stylesheets/application.tailwind.css create mode 100755 embedded_gems/pathogen/demo/bin/dev create mode 100644 embedded_gems/pathogen/demo/config/tailwind.config.js delete mode 100644 embedded_gems/pathogen/demo/previews/pathogen/button_preview.rb create mode 100644 embedded_gems/pathogen/demo/test/components/previews/button_preview/default.html.erb create mode 100644 embedded_gems/pathogen/package.json create mode 100644 embedded_gems/pathogen/pnpm-lock.yaml create mode 100644 embedded_gems/pathogen/tailwind.config.js diff --git a/embedded/pathogen/postcss.config.js b/embedded/pathogen/postcss.config.js deleted file mode 100644 index 12a703d900..0000000000 --- a/embedded/pathogen/postcss.config.js +++ /dev/null @@ -1,6 +0,0 @@ -module.exports = { - plugins: { - tailwindcss: {}, - autoprefixer: {}, - }, -}; diff --git a/embedded_gems/pathogen/Procfile b/embedded_gems/pathogen/Procfile index e501ae4b59..dde721f867 100644 --- a/embedded_gems/pathogen/Procfile +++ b/embedded_gems/pathogen/Procfile @@ -1,2 +1 @@ -web: cd demo && bin/rails server -p 3001 -css: bin/rails tailwindcss:watch +web: cd demo && bin/dev diff --git a/embedded_gems/pathogen/app/assets/stylesheets/application.tailwind.css b/embedded_gems/pathogen/app/assets/stylesheets/application.tailwind.css index e69de29bb2..b5c61c9567 100644 --- a/embedded_gems/pathogen/app/assets/stylesheets/application.tailwind.css +++ b/embedded_gems/pathogen/app/assets/stylesheets/application.tailwind.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/embedded_gems/pathogen/demo/Gemfile b/embedded_gems/pathogen/demo/Gemfile index 4fd95e94e8..b333f6483a 100644 --- a/embedded_gems/pathogen/demo/Gemfile +++ b/embedded_gems/pathogen/demo/Gemfile @@ -33,7 +33,7 @@ gem "tzinfo-data", platforms: %i[ windows jruby ] gem "bootsnap", require: false gem "lookbook" -gem "pathogen_view_components", path: ".." +gem "pathogen_view_components", path: "../" group :development, :test do # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem @@ -58,3 +58,5 @@ group :test do end gem "hotwire-livereload", "~> 1.4", :group => :development + +gem "tailwindcss-rails", "~> 3.0" diff --git a/embedded_gems/pathogen/demo/Gemfile.lock b/embedded_gems/pathogen/demo/Gemfile.lock index 07e34b82b0..a0abf0f457 100644 --- a/embedded_gems/pathogen/demo/Gemfile.lock +++ b/embedded_gems/pathogen/demo/Gemfile.lock @@ -319,6 +319,15 @@ GEM stimulus-rails (1.3.4) railties (>= 6.0.0) stringio (3.1.2) + tailwindcss-rails (3.0.0) + railties (>= 7.0.0) + tailwindcss-ruby + tailwindcss-ruby (3.4.15) + tailwindcss-ruby (3.4.15-aarch64-linux) + tailwindcss-ruby (3.4.15-arm-linux) + tailwindcss-ruby (3.4.15-arm64-darwin) + tailwindcss-ruby (3.4.15-x86_64-darwin) + tailwindcss-ruby (3.4.15-x86_64-linux) thor (1.3.2) timeout (0.4.2) turbo-rails (2.0.11) @@ -380,6 +389,7 @@ DEPENDENCIES selenium-webdriver sqlite3 (>= 1.4) stimulus-rails + tailwindcss-rails (~> 3.0) turbo-rails tzinfo-data web-console diff --git a/embedded_gems/pathogen/demo/Procfile.dev b/embedded_gems/pathogen/demo/Procfile.dev new file mode 100644 index 0000000000..297230ff88 --- /dev/null +++ b/embedded_gems/pathogen/demo/Procfile.dev @@ -0,0 +1,2 @@ +web: bin/rails server -p 3001 +css: bin/rails tailwindcss:watch diff --git a/embedded_gems/pathogen/demo/app/assets/builds/.keep b/embedded_gems/pathogen/demo/app/assets/builds/.keep new file mode 100644 index 0000000000..e69de29bb2 diff --git a/embedded_gems/pathogen/demo/app/assets/builds/tailwind.css b/embedded_gems/pathogen/demo/app/assets/builds/tailwind.css new file mode 100644 index 0000000000..1c3ec08e6b --- /dev/null +++ b/embedded_gems/pathogen/demo/app/assets/builds/tailwind.css @@ -0,0 +1 @@ +*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.mx-auto{margin-left:auto;margin-right:auto}.mt-28{margin-top:7rem}.flex{display:flex}.px-5{padding-left:1.25rem;padding-right:1.25rem} \ No newline at end of file diff --git a/embedded_gems/pathogen/demo/app/assets/config/manifest.js b/embedded_gems/pathogen/demo/app/assets/config/manifest.js index ddd546a0be..b06fc42ac1 100644 --- a/embedded_gems/pathogen/demo/app/assets/config/manifest.js +++ b/embedded_gems/pathogen/demo/app/assets/config/manifest.js @@ -2,3 +2,4 @@ //= link_directory ../stylesheets .css //= link_tree ../../javascript .js //= link_tree ../../../vendor/javascript .js +//= link_tree ../builds diff --git a/embedded_gems/pathogen/demo/app/assets/stylesheets/application.tailwind.css b/embedded_gems/pathogen/demo/app/assets/stylesheets/application.tailwind.css new file mode 100644 index 0000000000..b5c61c9567 --- /dev/null +++ b/embedded_gems/pathogen/demo/app/assets/stylesheets/application.tailwind.css @@ -0,0 +1,3 @@ +@tailwind base; +@tailwind components; +@tailwind utilities; diff --git a/embedded_gems/pathogen/demo/app/views/layouts/application.html.erb b/embedded_gems/pathogen/demo/app/views/layouts/application.html.erb index a4a5b9eaa9..8dd61671b3 100644 --- a/embedded_gems/pathogen/demo/app/views/layouts/application.html.erb +++ b/embedded_gems/pathogen/demo/app/views/layouts/application.html.erb @@ -13,12 +13,15 @@ + <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %> <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= javascript_importmap_tags %> <%= hotwire_livereload_tags if Rails.env.development? %> - <%= yield %> +
+ <%= yield %> +
diff --git a/embedded_gems/pathogen/demo/app/views/layouts/component_preview.html.erb b/embedded_gems/pathogen/demo/app/views/layouts/component_preview.html.erb index 23a89d1e8f..324580db39 100644 --- a/embedded_gems/pathogen/demo/app/views/layouts/component_preview.html.erb +++ b/embedded_gems/pathogen/demo/app/views/layouts/component_preview.html.erb @@ -9,7 +9,8 @@ <%= csrf_meta_tags %> <%= csp_meta_tag %> - <%= stylesheet_link_tag "application" %> + <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %> + <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> <%= hotwire_livereload_tags if Rails.env.development? %> diff --git a/embedded_gems/pathogen/demo/bin/dev b/embedded_gems/pathogen/demo/bin/dev new file mode 100755 index 0000000000..ad72c7d53c --- /dev/null +++ b/embedded_gems/pathogen/demo/bin/dev @@ -0,0 +1,16 @@ +#!/usr/bin/env sh + +if ! gem list foreman -i --silent; then + echo "Installing foreman..." + gem install foreman +fi + +# Default to port 3000 if not specified +export PORT="${PORT:-3000}" + +# Let the debug gem allow remote connections, +# but avoid loading until `debugger` is called +export RUBY_DEBUG_OPEN="true" +export RUBY_DEBUG_LAZY="true" + +exec foreman start -f Procfile.dev "$@" diff --git a/embedded_gems/pathogen/demo/config/tailwind.config.js b/embedded_gems/pathogen/demo/config/tailwind.config.js new file mode 100644 index 0000000000..2ac6ac6cd2 --- /dev/null +++ b/embedded_gems/pathogen/demo/config/tailwind.config.js @@ -0,0 +1,9 @@ +module.exports = { + content: [ + "./app/helpers/**/*.rb", + "./app/javascript/**/*.js", + "./app/views/**/*.{erb,haml,html,slim}", + "./test/components/previews/**/*{rb,erb,haml,html,slim}", + ], + plugins: [require("@tailwindcss/typography")], +}; diff --git a/embedded_gems/pathogen/demo/previews/pathogen/button_preview.rb b/embedded_gems/pathogen/demo/previews/pathogen/button_preview.rb deleted file mode 100644 index 60b73b2915..0000000000 --- a/embedded_gems/pathogen/demo/previews/pathogen/button_preview.rb +++ /dev/null @@ -1,12 +0,0 @@ -# frozen_string_literal: true - -module Pathogen - class ButtonPreview < ViewComponent::Preview - # @label Default - def default - render Pathogen::Button.new do - "Don't click me" - end - end - end -end diff --git a/embedded_gems/pathogen/demo/test/components/previews/button_preview.rb b/embedded_gems/pathogen/demo/test/components/previews/button_preview.rb index 72ff448eab..7f9d34833b 100644 --- a/embedded_gems/pathogen/demo/test/components/previews/button_preview.rb +++ b/embedded_gems/pathogen/demo/test/components/previews/button_preview.rb @@ -3,9 +3,5 @@ class ButtonPreview < ViewComponent::Preview # @!group Basic # @label Default - def default - render Pathogen::Button.new do - "Click me friend" - end - end + def default; end end diff --git a/embedded_gems/pathogen/demo/test/components/previews/button_preview/default.html.erb b/embedded_gems/pathogen/demo/test/components/previews/button_preview/default.html.erb new file mode 100644 index 0000000000..6bcc192e42 --- /dev/null +++ b/embedded_gems/pathogen/demo/test/components/previews/button_preview/default.html.erb @@ -0,0 +1,3 @@ +<%= render Pathogen::Button.new do %> + Demo Button +<% end %> diff --git a/embedded_gems/pathogen/package.json b/embedded_gems/pathogen/package.json new file mode 100644 index 0000000000..04b440cc05 --- /dev/null +++ b/embedded_gems/pathogen/package.json @@ -0,0 +1,15 @@ +{ + "name": "pathogen", + "version": "1.0.0", + "description": "", + "main": "index.js", + "scripts": { + "test": "echo \"Error: no test specified\" && exit 1" + }, + "keywords": [], + "author": "", + "license": "ISC", + "devDependencies": { + "tailwindcss": "^3.4.15" + } +} diff --git a/embedded_gems/pathogen/pnpm-lock.yaml b/embedded_gems/pathogen/pnpm-lock.yaml new file mode 100644 index 0000000000..713925b176 --- /dev/null +++ b/embedded_gems/pathogen/pnpm-lock.yaml @@ -0,0 +1,842 @@ +lockfileVersion: '9.0' + +settings: + autoInstallPeers: true + excludeLinksFromLockfile: false + +importers: + + .: + devDependencies: + tailwindcss: + specifier: ^3.4.15 + version: 3.4.15 + +packages: + + '@alloc/quick-lru@5.2.0': + resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==} + engines: {node: '>=10'} + + '@isaacs/cliui@8.0.2': + resolution: {integrity: sha512-O8jcjabXaleOG9DQ0+ARXWZBTfnP4WNAqzuiJK7ll44AmxGKv/J2M4TPjxjY3znBCfvBXFzucm1twdyFybFqEA==} + engines: {node: '>=12'} + + '@jridgewell/gen-mapping@0.3.5': + resolution: {integrity: sha512-IzL8ZoEDIBRWEzlCcRhOaCupYyN5gdIK+Q6fbFdPDg6HqX6jpkItn7DFIpW9LQzXG6Df9sA7+OKnq0qlz/GaQg==} + engines: {node: '>=6.0.0'} + + '@jridgewell/resolve-uri@3.1.2': + resolution: {integrity: sha512-bRISgCIjP20/tbWSPWMEi54QVPRZExkuD9lJL+UIxUKtwVJA8wW1Trb1jMs1RFXo1CBTNZ/5hpC9QvmKWdopKw==} + engines: {node: '>=6.0.0'} + + '@jridgewell/set-array@1.2.1': + resolution: {integrity: sha512-R8gLRTZeyp03ymzP/6Lil/28tGeGEzhx1q2k703KGWRAI1VdvPIXdG70VJc2pAMw3NA6JKL5hhFu1sJX0Mnn/A==} + engines: {node: '>=6.0.0'} + + '@jridgewell/sourcemap-codec@1.5.0': + resolution: {integrity: sha512-gv3ZRaISU3fjPAgNsriBRqGWQL6quFx04YMPW/zD8XMLsU32mhCCbfbO6KZFLjvYpCZ8zyDEgqsgf+PwPaM7GQ==} + + '@jridgewell/trace-mapping@0.3.25': + resolution: {integrity: sha512-vNk6aEwybGtawWmy/PzwnGDOjCkLWSD2wqvjGGAgOAwCGWySYXfYoxt00IJkTF+8Lb57DwOb3Aa0o9CApepiYQ==} + + '@nodelib/fs.scandir@2.1.5': + resolution: {integrity: sha512-vq24Bq3ym5HEQm2NKCr3yXDwjc7vTsEThRDnkp2DK9p1uqLR+DHurm/NOTo0KG7HYHU7eppKZj3MyqYuMBf62g==} + engines: {node: '>= 8'} + + '@nodelib/fs.stat@2.0.5': + resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==} + engines: {node: '>= 8'} + + '@nodelib/fs.walk@1.2.8': + resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==} + engines: {node: '>= 8'} + + '@pkgjs/parseargs@0.11.0': + resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==} + engines: {node: '>=14'} + + ansi-regex@5.0.1: + resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==} + engines: {node: '>=8'} + + ansi-regex@6.1.0: + resolution: {integrity: sha512-7HSX4QQb4CspciLpVFwyRe79O3xsIZDDLER21kERQ71oaPodF8jL725AgJMFAYbooIqolJoRLuM81SpeUkpkvA==} + engines: {node: '>=12'} + + ansi-styles@4.3.0: + resolution: {integrity: sha512-zbB9rCJAT1rbjiVDb2hqKFHNYLxgtk8NURxZ3IZwD3F6NtxbXZQCnnSi1Lkx+IDohdPlFp222wVALIheZJQSEg==} + engines: {node: '>=8'} + + ansi-styles@6.2.1: + resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==} + engines: {node: '>=12'} + + any-promise@1.3.0: + resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==} + + anymatch@3.1.3: + resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==} + engines: {node: '>= 8'} + + arg@5.0.2: + resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==} + + balanced-match@1.0.2: + resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==} + + binary-extensions@2.3.0: + resolution: {integrity: sha512-Ceh+7ox5qe7LJuLHoY0feh3pHuUDHAcRUeyL2VYghZwfpkNIy/+8Ocg0a3UuSoYzavmylwuLWQOf3hl0jjMMIw==} + engines: {node: '>=8'} + + brace-expansion@2.0.1: + resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==} + + braces@3.0.3: + resolution: {integrity: sha512-yQbXgO/OSZVD2IsiLlro+7Hf6Q18EJrKSEsdoMzKePKXct3gvD8oLcOQdIzGupr5Fj+EDe8gO/lxc1BzfMpxvA==} + engines: {node: '>=8'} + + camelcase-css@2.0.1: + resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==} + engines: {node: '>= 6'} + + chokidar@3.6.0: + resolution: {integrity: sha512-7VT13fmjotKpGipCW9JEQAusEPE+Ei8nl6/g4FBAmIm0GOOLMua9NDDo/DWp0ZAxCr3cPq5ZpBqmPAQgDda2Pw==} + engines: {node: '>= 8.10.0'} + + color-convert@2.0.1: + resolution: {integrity: sha512-RRECPsj7iu/xb5oKYcsFHSppFNnsj/52OVTRKb4zP5onXwVF3zVmmToNcOfGC+CRDpfK/U584fMg38ZHCaElKQ==} + engines: {node: '>=7.0.0'} + + color-name@1.1.4: + resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==} + + commander@4.1.1: + resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==} + engines: {node: '>= 6'} + + cross-spawn@7.0.6: + resolution: {integrity: sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==} + engines: {node: '>= 8'} + + cssesc@3.0.0: + resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==} + engines: {node: '>=4'} + hasBin: true + + didyoumean@1.2.2: + resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==} + + dlv@1.1.3: + resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==} + + eastasianwidth@0.2.0: + resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==} + + emoji-regex@8.0.0: + resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==} + + emoji-regex@9.2.2: + resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==} + + fast-glob@3.3.2: + resolution: {integrity: sha512-oX2ruAFQwf/Orj8m737Y5adxDQO0LAB7/S5MnxCdTNDd4p6BsyIVsv9JQsATbTSq8KHRpLwIHbVlUNatxd+1Ow==} + engines: {node: '>=8.6.0'} + + fastq@1.17.1: + resolution: {integrity: sha512-sRVD3lWVIXWg6By68ZN7vho9a1pQcN/WBFaAAsDDFzlJjvoGx0P8z7V1t72grFJfJhu3YPZBuu25f7Kaw2jN1w==} + + fill-range@7.1.1: + resolution: {integrity: sha512-YsGpe3WHLK8ZYi4tWDg2Jy3ebRz2rXowDxnld4bkQB00cc/1Zw9AWnC0i9ztDJitivtQvaI9KaLyKrc+hBW0yg==} + engines: {node: '>=8'} + + foreground-child@3.3.0: + resolution: {integrity: sha512-Ld2g8rrAyMYFXBhEqMz8ZAHBi4J4uS1i/CxGMDnjyFWddMXLVcDp051DZfu+t7+ab7Wv6SMqpWmyFIj5UbfFvg==} + engines: {node: '>=14'} + + fsevents@2.3.3: + resolution: {integrity: sha512-5xoDfX+fL7faATnagmWPpbFtwh/R77WmMMqqHGS65C3vvB0YHrgF+B1YmZ3441tMj5n63k0212XNoJwzlhffQw==} + engines: {node: ^8.16.0 || ^10.6.0 || >=11.0.0} + os: [darwin] + + function-bind@1.1.2: + resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==} + + glob-parent@5.1.2: + resolution: {integrity: sha512-AOIgSQCepiJYwP3ARnGx+5VnTu2HBYdzbGP45eLw1vr3zB3vZLeyed1sC9hnbcOc9/SrMyM5RPQrkGz4aS9Zow==} + engines: {node: '>= 6'} + + glob-parent@6.0.2: + resolution: {integrity: sha512-XxwI8EOhVQgWp6iDL+3b0r86f4d6AX6zSU55HfB4ydCEuXLXc5FcYeOu+nnGftS4TEju/11rt4KJPTMgbfmv4A==} + engines: {node: '>=10.13.0'} + + glob@10.4.5: + resolution: {integrity: sha512-7Bv8RF0k6xjo7d4A/PxYLbUCfb6c+Vpd2/mB2yRDlew7Jb5hEXiCD9ibfO7wpk8i4sevK6DFny9h7EYbM3/sHg==} + hasBin: true + + hasown@2.0.2: + resolution: {integrity: sha512-0hJU9SCPvmMzIBdZFqNPXWa6dqh7WdH0cII9y+CyS8rG3nL48Bclra9HmKhVVUHyPWNH5Y7xDwAB7bfgSjkUMQ==} + engines: {node: '>= 0.4'} + + is-binary-path@2.1.0: + resolution: {integrity: sha512-ZMERYes6pDydyuGidse7OsHxtbI7WVeUEozgR/g7rd0xUimYNlvZRE/K2MgZTjWy725IfelLeVcEM97mmtRGXw==} + engines: {node: '>=8'} + + is-core-module@2.15.1: + resolution: {integrity: sha512-z0vtXSwucUJtANQWldhbtbt7BnL0vxiFjIdDLAatwhDYty2bad6s+rijD6Ri4YuYJubLzIJLUidCh09e1djEVQ==} + engines: {node: '>= 0.4'} + + is-extglob@2.1.1: + resolution: {integrity: sha512-SbKbANkN603Vi4jEZv49LeVJMn4yGwsbzZworEoyEiutsN3nJYdbO36zfhGJ6QEDpOZIFkDtnq5JRxmvl3jsoQ==} + engines: {node: '>=0.10.0'} + + is-fullwidth-code-point@3.0.0: + resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==} + engines: {node: '>=8'} + + is-glob@4.0.3: + resolution: {integrity: sha512-xelSayHH36ZgE7ZWhli7pW34hNbNl8Ojv5KVmkJD4hBdD3th8Tfk9vYasLM+mXWOZhFkgZfxhLSnrwRr4elSSg==} + engines: {node: '>=0.10.0'} + + is-number@7.0.0: + resolution: {integrity: sha512-41Cifkg6e8TylSpdtTpeLVMqvSBEVzTttHvERD741+pnZ8ANv0004MRL43QKPDlK9cGvNp6NZWZUBlbGXYxxng==} + engines: {node: '>=0.12.0'} + + isexe@2.0.0: + resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==} + + jackspeak@3.4.3: + resolution: {integrity: sha512-OGlZQpz2yfahA/Rd1Y8Cd9SIEsqvXkLVoSw/cgwhnhFMDbsQFeZYoJJ7bIZBS9BcamUW96asq/npPWugM+RQBw==} + + jiti@1.21.6: + resolution: {integrity: sha512-2yTgeWTWzMWkHu6Jp9NKgePDaYHbntiwvYuuJLbbN9vl7DC9DvXKOB2BC3ZZ92D3cvV/aflH0osDfwpHepQ53w==} + hasBin: true + + lilconfig@2.1.0: + resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==} + engines: {node: '>=10'} + + lilconfig@3.1.2: + resolution: {integrity: sha512-eop+wDAvpItUys0FWkHIKeC9ybYrTGbU41U5K7+bttZZeohvnY7M9dZ5kB21GNWiFT2q1OoPTvncPCgSOVO5ow==} + engines: {node: '>=14'} + + lines-and-columns@1.2.4: + resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==} + + lru-cache@10.4.3: + resolution: {integrity: sha512-JNAzZcXrCt42VGLuYz0zfAzDfAvJWW6AfYlDBQyDV5DClI2m5sAmK+OIO7s59XfsRsWHp02jAJrRadPRGTt6SQ==} + + merge2@1.4.1: + resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==} + engines: {node: '>= 8'} + + micromatch@4.0.8: + resolution: {integrity: sha512-PXwfBhYu0hBCPw8Dn0E+WDYb7af3dSLVWKi3HGv84IdF4TyFoC0ysxFd0Goxw7nSv4T/PzEJQxsYsEiFCKo2BA==} + engines: {node: '>=8.6'} + + minimatch@9.0.5: + resolution: {integrity: sha512-G6T0ZX48xgozx7587koeX9Ys2NYy6Gmv//P89sEte9V9whIapMNF4idKxnW2QtCcLiTWlb/wfCabAtAFWhhBow==} + engines: {node: '>=16 || 14 >=14.17'} + + minipass@7.1.2: + resolution: {integrity: sha512-qOOzS1cBTWYF4BH8fVePDBOO9iptMnGUEZwNc/cMWnTV2nVLZ7VoNWEPHkYczZA0pdoA7dl6e7FL659nX9S2aw==} + engines: {node: '>=16 || 14 >=14.17'} + + mz@2.7.0: + resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==} + + nanoid@3.3.7: + resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==} + engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1} + hasBin: true + + normalize-path@3.0.0: + resolution: {integrity: sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==} + engines: {node: '>=0.10.0'} + + object-assign@4.1.1: + resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==} + engines: {node: '>=0.10.0'} + + object-hash@3.0.0: + resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==} + engines: {node: '>= 6'} + + package-json-from-dist@1.0.1: + resolution: {integrity: sha512-UEZIS3/by4OC8vL3P2dTXRETpebLI2NiI5vIrjaD/5UtrkFX/tNbwjTSRAGC/+7CAo2pIcBaRgWmcBBHcsaCIw==} + + path-key@3.1.1: + resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==} + engines: {node: '>=8'} + + path-parse@1.0.7: + resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==} + + path-scurry@1.11.1: + resolution: {integrity: sha512-Xa4Nw17FS9ApQFJ9umLiJS4orGjm7ZzwUrwamcGQuHSzDyth9boKDaycYdDcZDuqYATXw4HFXgaqWTctW/v1HA==} + engines: {node: '>=16 || 14 >=14.18'} + + picocolors@1.1.1: + resolution: {integrity: sha512-xceH2snhtb5M9liqDsmEw56le376mTZkEX/jEb/RxNFyegNul7eNslCXP9FDj/Lcu0X8KEyMceP2ntpaHrDEVA==} + + picomatch@2.3.1: + resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==} + engines: {node: '>=8.6'} + + pify@2.3.0: + resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==} + engines: {node: '>=0.10.0'} + + pirates@4.0.6: + resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==} + engines: {node: '>= 6'} + + postcss-import@15.1.0: + resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==} + engines: {node: '>=14.0.0'} + peerDependencies: + postcss: ^8.0.0 + + postcss-js@4.0.1: + resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==} + engines: {node: ^12 || ^14 || >= 16} + peerDependencies: + postcss: ^8.4.21 + + postcss-load-config@4.0.2: + resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==} + engines: {node: '>= 14'} + peerDependencies: + postcss: '>=8.0.9' + ts-node: '>=9.0.0' + peerDependenciesMeta: + postcss: + optional: true + ts-node: + optional: true + + postcss-nested@6.2.0: + resolution: {integrity: sha512-HQbt28KulC5AJzG+cZtj9kvKB93CFCdLvog1WFLf1D+xmMvPGlBstkpTEZfK5+AN9hfJocyBFCNiqyS48bpgzQ==} + engines: {node: '>=12.0'} + peerDependencies: + postcss: ^8.2.14 + + postcss-selector-parser@6.1.2: + resolution: {integrity: sha512-Q8qQfPiZ+THO/3ZrOrO0cJJKfpYCagtMUkXbnEfmgUjwXg6z/WBeOyS9APBBPCTSiDV+s4SwQGu8yFsiMRIudg==} + engines: {node: '>=4'} + + postcss-value-parser@4.2.0: + resolution: {integrity: sha512-1NNCs6uurfkVbeXG4S8JFT9t19m45ICnif8zWLd5oPSZ50QnwMfK+H3jv408d4jw/7Bttv5axS5IiHoLaVNHeQ==} + + postcss@8.4.49: + resolution: {integrity: sha512-OCVPnIObs4N29kxTjzLfUryOkvZEq+pf8jTF0lg8E7uETuWHA+v7j3c/xJmiqpX450191LlmZfUKkXxkTry7nA==} + engines: {node: ^10 || ^12 || >=14} + + queue-microtask@1.2.3: + resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==} + + read-cache@1.0.0: + resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==} + + readdirp@3.6.0: + resolution: {integrity: sha512-hOS089on8RduqdbhvQ5Z37A0ESjsqz6qnRcffsMU3495FuTdqSm+7bhJ29JvIOsBDEEnan5DPu9t3To9VRlMzA==} + engines: {node: '>=8.10.0'} + + resolve@1.22.8: + resolution: {integrity: sha512-oKWePCxqpd6FlLvGV1VU0x7bkPmmCNolxzjMf4NczoDnQcIWrAF+cPtZn5i6n+RfD2d9i0tzpKnG6Yk168yIyw==} + hasBin: true + + reusify@1.0.4: + resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==} + engines: {iojs: '>=1.0.0', node: '>=0.10.0'} + + run-parallel@1.2.0: + resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==} + + shebang-command@2.0.0: + resolution: {integrity: sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==} + engines: {node: '>=8'} + + shebang-regex@3.0.0: + resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==} + engines: {node: '>=8'} + + signal-exit@4.1.0: + resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==} + engines: {node: '>=14'} + + source-map-js@1.2.1: + resolution: {integrity: sha512-UXWMKhLOwVKb728IUtQPXxfYU+usdybtUrK/8uGE8CQMvrhOpwvzDBwj0QhSL7MQc7vIsISBG8VQ8+IDQxpfQA==} + engines: {node: '>=0.10.0'} + + string-width@4.2.3: + resolution: {integrity: sha512-wKyQRQpjJ0sIp62ErSZdGsjMJWsap5oRNihHhu6G7JVO/9jIB6UyevL+tXuOqrng8j/cxKTWyWUwvSTriiZz/g==} + engines: {node: '>=8'} + + string-width@5.1.2: + resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==} + engines: {node: '>=12'} + + strip-ansi@6.0.1: + resolution: {integrity: sha512-Y38VPSHcqkFrCpFnQ9vuSXmquuv5oXOKpGeT6aGrr3o3Gc9AlVa6JBfUSOCnbxGGZF+/0ooI7KrPuUSztUdU5A==} + engines: {node: '>=8'} + + strip-ansi@7.1.0: + resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==} + engines: {node: '>=12'} + + sucrase@3.35.0: + resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==} + engines: {node: '>=16 || 14 >=14.17'} + hasBin: true + + supports-preserve-symlinks-flag@1.0.0: + resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==} + engines: {node: '>= 0.4'} + + tailwindcss@3.4.15: + resolution: {integrity: sha512-r4MeXnfBmSOuKUWmXe6h2CcyfzJCEk4F0pptO5jlnYSIViUkVmsawj80N5h2lO3gwcmSb4n3PuN+e+GC1Guylw==} + engines: {node: '>=14.0.0'} + hasBin: true + + thenify-all@1.6.0: + resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==} + engines: {node: '>=0.8'} + + thenify@3.3.1: + resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==} + + to-regex-range@5.0.1: + resolution: {integrity: sha512-65P7iz6X5yEr1cwcgvQxbbIw7Uk3gOy5dIdtZ4rDveLqhrdJP+Li/Hx6tyK0NEb+2GCyneCMJiGqrADCSNk8sQ==} + engines: {node: '>=8.0'} + + ts-interface-checker@0.1.13: + resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==} + + util-deprecate@1.0.2: + resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==} + + which@2.0.2: + resolution: {integrity: sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==} + engines: {node: '>= 8'} + hasBin: true + + wrap-ansi@7.0.0: + resolution: {integrity: sha512-YVGIj2kamLSTxw6NsZjoBxfSwsn0ycdesmc4p+Q21c5zPuZ1pl+NfxVdxPtdHvmNVOQ6XSYG4AUtyt/Fi7D16Q==} + engines: {node: '>=10'} + + wrap-ansi@8.1.0: + resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==} + engines: {node: '>=12'} + + yaml@2.6.1: + resolution: {integrity: sha512-7r0XPzioN/Q9kXBro/XPnA6kznR73DHq+GXh5ON7ZozRO6aMjbmiBuKste2wslTFkC5d1dw0GooOCepZXJ2SAg==} + engines: {node: '>= 14'} + hasBin: true + +snapshots: + + '@alloc/quick-lru@5.2.0': {} + + '@isaacs/cliui@8.0.2': + dependencies: + string-width: 5.1.2 + string-width-cjs: string-width@4.2.3 + strip-ansi: 7.1.0 + strip-ansi-cjs: strip-ansi@6.0.1 + wrap-ansi: 8.1.0 + wrap-ansi-cjs: wrap-ansi@7.0.0 + + '@jridgewell/gen-mapping@0.3.5': + dependencies: + '@jridgewell/set-array': 1.2.1 + '@jridgewell/sourcemap-codec': 1.5.0 + '@jridgewell/trace-mapping': 0.3.25 + + '@jridgewell/resolve-uri@3.1.2': {} + + '@jridgewell/set-array@1.2.1': {} + + '@jridgewell/sourcemap-codec@1.5.0': {} + + '@jridgewell/trace-mapping@0.3.25': + dependencies: + '@jridgewell/resolve-uri': 3.1.2 + '@jridgewell/sourcemap-codec': 1.5.0 + + '@nodelib/fs.scandir@2.1.5': + dependencies: + '@nodelib/fs.stat': 2.0.5 + run-parallel: 1.2.0 + + '@nodelib/fs.stat@2.0.5': {} + + '@nodelib/fs.walk@1.2.8': + dependencies: + '@nodelib/fs.scandir': 2.1.5 + fastq: 1.17.1 + + '@pkgjs/parseargs@0.11.0': + optional: true + + ansi-regex@5.0.1: {} + + ansi-regex@6.1.0: {} + + ansi-styles@4.3.0: + dependencies: + color-convert: 2.0.1 + + ansi-styles@6.2.1: {} + + any-promise@1.3.0: {} + + anymatch@3.1.3: + dependencies: + normalize-path: 3.0.0 + picomatch: 2.3.1 + + arg@5.0.2: {} + + balanced-match@1.0.2: {} + + binary-extensions@2.3.0: {} + + brace-expansion@2.0.1: + dependencies: + balanced-match: 1.0.2 + + braces@3.0.3: + dependencies: + fill-range: 7.1.1 + + camelcase-css@2.0.1: {} + + chokidar@3.6.0: + dependencies: + anymatch: 3.1.3 + braces: 3.0.3 + glob-parent: 5.1.2 + is-binary-path: 2.1.0 + is-glob: 4.0.3 + normalize-path: 3.0.0 + readdirp: 3.6.0 + optionalDependencies: + fsevents: 2.3.3 + + color-convert@2.0.1: + dependencies: + color-name: 1.1.4 + + color-name@1.1.4: {} + + commander@4.1.1: {} + + cross-spawn@7.0.6: + dependencies: + path-key: 3.1.1 + shebang-command: 2.0.0 + which: 2.0.2 + + cssesc@3.0.0: {} + + didyoumean@1.2.2: {} + + dlv@1.1.3: {} + + eastasianwidth@0.2.0: {} + + emoji-regex@8.0.0: {} + + emoji-regex@9.2.2: {} + + fast-glob@3.3.2: + dependencies: + '@nodelib/fs.stat': 2.0.5 + '@nodelib/fs.walk': 1.2.8 + glob-parent: 5.1.2 + merge2: 1.4.1 + micromatch: 4.0.8 + + fastq@1.17.1: + dependencies: + reusify: 1.0.4 + + fill-range@7.1.1: + dependencies: + to-regex-range: 5.0.1 + + foreground-child@3.3.0: + dependencies: + cross-spawn: 7.0.6 + signal-exit: 4.1.0 + + fsevents@2.3.3: + optional: true + + function-bind@1.1.2: {} + + glob-parent@5.1.2: + dependencies: + is-glob: 4.0.3 + + glob-parent@6.0.2: + dependencies: + is-glob: 4.0.3 + + glob@10.4.5: + dependencies: + foreground-child: 3.3.0 + jackspeak: 3.4.3 + minimatch: 9.0.5 + minipass: 7.1.2 + package-json-from-dist: 1.0.1 + path-scurry: 1.11.1 + + hasown@2.0.2: + dependencies: + function-bind: 1.1.2 + + is-binary-path@2.1.0: + dependencies: + binary-extensions: 2.3.0 + + is-core-module@2.15.1: + dependencies: + hasown: 2.0.2 + + is-extglob@2.1.1: {} + + is-fullwidth-code-point@3.0.0: {} + + is-glob@4.0.3: + dependencies: + is-extglob: 2.1.1 + + is-number@7.0.0: {} + + isexe@2.0.0: {} + + jackspeak@3.4.3: + dependencies: + '@isaacs/cliui': 8.0.2 + optionalDependencies: + '@pkgjs/parseargs': 0.11.0 + + jiti@1.21.6: {} + + lilconfig@2.1.0: {} + + lilconfig@3.1.2: {} + + lines-and-columns@1.2.4: {} + + lru-cache@10.4.3: {} + + merge2@1.4.1: {} + + micromatch@4.0.8: + dependencies: + braces: 3.0.3 + picomatch: 2.3.1 + + minimatch@9.0.5: + dependencies: + brace-expansion: 2.0.1 + + minipass@7.1.2: {} + + mz@2.7.0: + dependencies: + any-promise: 1.3.0 + object-assign: 4.1.1 + thenify-all: 1.6.0 + + nanoid@3.3.7: {} + + normalize-path@3.0.0: {} + + object-assign@4.1.1: {} + + object-hash@3.0.0: {} + + package-json-from-dist@1.0.1: {} + + path-key@3.1.1: {} + + path-parse@1.0.7: {} + + path-scurry@1.11.1: + dependencies: + lru-cache: 10.4.3 + minipass: 7.1.2 + + picocolors@1.1.1: {} + + picomatch@2.3.1: {} + + pify@2.3.0: {} + + pirates@4.0.6: {} + + postcss-import@15.1.0(postcss@8.4.49): + dependencies: + postcss: 8.4.49 + postcss-value-parser: 4.2.0 + read-cache: 1.0.0 + resolve: 1.22.8 + + postcss-js@4.0.1(postcss@8.4.49): + dependencies: + camelcase-css: 2.0.1 + postcss: 8.4.49 + + postcss-load-config@4.0.2(postcss@8.4.49): + dependencies: + lilconfig: 3.1.2 + yaml: 2.6.1 + optionalDependencies: + postcss: 8.4.49 + + postcss-nested@6.2.0(postcss@8.4.49): + dependencies: + postcss: 8.4.49 + postcss-selector-parser: 6.1.2 + + postcss-selector-parser@6.1.2: + dependencies: + cssesc: 3.0.0 + util-deprecate: 1.0.2 + + postcss-value-parser@4.2.0: {} + + postcss@8.4.49: + dependencies: + nanoid: 3.3.7 + picocolors: 1.1.1 + source-map-js: 1.2.1 + + queue-microtask@1.2.3: {} + + read-cache@1.0.0: + dependencies: + pify: 2.3.0 + + readdirp@3.6.0: + dependencies: + picomatch: 2.3.1 + + resolve@1.22.8: + dependencies: + is-core-module: 2.15.1 + path-parse: 1.0.7 + supports-preserve-symlinks-flag: 1.0.0 + + reusify@1.0.4: {} + + run-parallel@1.2.0: + dependencies: + queue-microtask: 1.2.3 + + shebang-command@2.0.0: + dependencies: + shebang-regex: 3.0.0 + + shebang-regex@3.0.0: {} + + signal-exit@4.1.0: {} + + source-map-js@1.2.1: {} + + string-width@4.2.3: + dependencies: + emoji-regex: 8.0.0 + is-fullwidth-code-point: 3.0.0 + strip-ansi: 6.0.1 + + string-width@5.1.2: + dependencies: + eastasianwidth: 0.2.0 + emoji-regex: 9.2.2 + strip-ansi: 7.1.0 + + strip-ansi@6.0.1: + dependencies: + ansi-regex: 5.0.1 + + strip-ansi@7.1.0: + dependencies: + ansi-regex: 6.1.0 + + sucrase@3.35.0: + dependencies: + '@jridgewell/gen-mapping': 0.3.5 + commander: 4.1.1 + glob: 10.4.5 + lines-and-columns: 1.2.4 + mz: 2.7.0 + pirates: 4.0.6 + ts-interface-checker: 0.1.13 + + supports-preserve-symlinks-flag@1.0.0: {} + + tailwindcss@3.4.15: + dependencies: + '@alloc/quick-lru': 5.2.0 + arg: 5.0.2 + chokidar: 3.6.0 + didyoumean: 1.2.2 + dlv: 1.1.3 + fast-glob: 3.3.2 + glob-parent: 6.0.2 + is-glob: 4.0.3 + jiti: 1.21.6 + lilconfig: 2.1.0 + micromatch: 4.0.8 + normalize-path: 3.0.0 + object-hash: 3.0.0 + picocolors: 1.1.1 + postcss: 8.4.49 + postcss-import: 15.1.0(postcss@8.4.49) + postcss-js: 4.0.1(postcss@8.4.49) + postcss-load-config: 4.0.2(postcss@8.4.49) + postcss-nested: 6.2.0(postcss@8.4.49) + postcss-selector-parser: 6.1.2 + resolve: 1.22.8 + sucrase: 3.35.0 + transitivePeerDependencies: + - ts-node + + thenify-all@1.6.0: + dependencies: + thenify: 3.3.1 + + thenify@3.3.1: + dependencies: + any-promise: 1.3.0 + + to-regex-range@5.0.1: + dependencies: + is-number: 7.0.0 + + ts-interface-checker@0.1.13: {} + + util-deprecate@1.0.2: {} + + which@2.0.2: + dependencies: + isexe: 2.0.0 + + wrap-ansi@7.0.0: + dependencies: + ansi-styles: 4.3.0 + string-width: 4.2.3 + strip-ansi: 6.0.1 + + wrap-ansi@8.1.0: + dependencies: + ansi-styles: 6.2.1 + string-width: 5.1.2 + strip-ansi: 7.1.0 + + yaml@2.6.1: {} diff --git a/embedded_gems/pathogen/tailwind.config.js b/embedded_gems/pathogen/tailwind.config.js new file mode 100644 index 0000000000..9d72628533 --- /dev/null +++ b/embedded_gems/pathogen/tailwind.config.js @@ -0,0 +1,8 @@ +/** @type {import('tailwindcss').Config} */ +module.exports = { + content: ["./app/components/**/*.{erb}"], + theme: { + extend: {}, + }, + plugins: [], +}; From c94aad44b9501b9cbb4090b3b07707653d1c7433 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Mon, 25 Nov 2024 12:12:02 -0600 Subject: [PATCH 06/68] feat: Working on getting tailwind config into the Pathogen library --- .../builds/pathogen_view_components.css | 777 ++++++++++++++++++ .../pathogen/app/assets/builds/tailwind.css | 777 ++++++++++++++++++ embedded_gems/pathogen/demo/Procfile.dev | 2 +- embedded_gems/pathogen/tailwind.config.js | 6 +- 4 files changed, 1560 insertions(+), 2 deletions(-) create mode 100644 embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css create mode 100644 embedded_gems/pathogen/app/assets/builds/tailwind.css diff --git a/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css b/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css new file mode 100644 index 0000000000..b543769b0c --- /dev/null +++ b/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css @@ -0,0 +1,777 @@ +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; +} + +/* +! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +7. Disable tap highlights on iOS +*/ + +html, +:host { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ + -webkit-tap-highlight-color: transparent; + /* 7 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font-family by default. +2. Use the user's configured `mono` font-feature-settings by default. +3. Use the user's configured `mono` font-variation-settings by default. +4. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-feature-settings: normal; + /* 2 */ + font-variation-settings: normal; + /* 3 */ + font-size: 1em; + /* 4 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + letter-spacing: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +input:where([type='button']), +input:where([type='reset']), +input:where([type='submit']) { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden]:where(:not([hidden="until-found"])) { + display: none; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.relative { + position: relative; +} + +.ml-2 { + margin-left: 0.5rem; +} + +.mr-2 { + margin-right: 0.5rem; +} + +.block { + display: block; +} + +.inline-flex { + display: inline-flex; +} + +.w-full { + width: 100%; +} + +.select-none { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.items-center { + align-items: center; +} + +.rounded-lg { + border-radius: 0.5rem; +} + +.border { + border-width: 1px; +} + +.border-red-100 { + --tw-border-opacity: 1; + border-color: rgb(254 226 226 / var(--tw-border-opacity, 1)); +} + +.border-slate-200 { + --tw-border-opacity: 1; + border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); +} + +.bg-slate-50 { + --tw-bg-opacity: 1; + background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); +} + +.bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); +} + +.text-center { + text-align: center; +} + +.font-medium { + font-weight: 500; +} + +.text-red-500 { + --tw-text-opacity: 1; + color: rgb(239 68 68 / var(--tw-text-opacity, 1)); +} + +.text-slate-900 { + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +.text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.transition { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.delay-150 { + transition-delay: 150ms; +} + +.duration-300 { + transition-duration: 300ms; +} + +.ease-in-out { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + +.focus\:z-10:focus { + z-index: 10; +} + +.focus\:outline-none:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.focus\:ring-4:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.focus\:ring-red-300:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity, 1)); +} + +.focus\:ring-slate-100:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(241 245 249 / var(--tw-ring-opacity, 1)); +} + +.enabled\:hover\:bg-red-800:hover:enabled { + --tw-bg-opacity: 1; + background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1)); +} + +.enabled\:hover\:bg-slate-100:hover:enabled { + --tw-bg-opacity: 1; + background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); +} + +.enabled\:hover\:text-red-50:hover:enabled { + --tw-text-opacity: 1; + color: rgb(254 242 242 / var(--tw-text-opacity, 1)); +} + +.disabled\:cursor-not-allowed:disabled { + cursor: not-allowed; +} + +.disabled\:opacity-70:disabled { + opacity: 0.7; +} + +@media (prefers-color-scheme: dark) { + .dark\:border-red-800 { + --tw-border-opacity: 1; + border-color: rgb(153 27 27 / var(--tw-border-opacity, 1)); + } + + .dark\:border-slate-600 { + --tw-border-opacity: 1; + border-color: rgb(71 85 105 / var(--tw-border-opacity, 1)); + } + + .dark\:bg-slate-800 { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); + } + + .dark\:bg-slate-900 { + --tw-bg-opacity: 1; + background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1)); + } + + .dark\:text-red-500 { + --tw-text-opacity: 1; + color: rgb(239 68 68 / var(--tw-text-opacity, 1)); + } + + .dark\:text-slate-400 { + --tw-text-opacity: 1; + color: rgb(148 163 184 / var(--tw-text-opacity, 1)); + } + + .dark\:focus\:ring-red-900:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(127 29 29 / var(--tw-ring-opacity, 1)); + } + + .dark\:focus\:ring-slate-700:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(51 65 85 / var(--tw-ring-opacity, 1)); + } + + .enabled\:dark\:hover\:bg-slate-700:hover:enabled { + --tw-bg-opacity: 1; + background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1)); + } + + .enabled\:dark\:hover\:text-red-50:hover:enabled { + --tw-text-opacity: 1; + color: rgb(254 242 242 / var(--tw-text-opacity, 1)); + } + + .enabled\:dark\:hover\:text-white:hover:enabled { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); + } +} \ No newline at end of file diff --git a/embedded_gems/pathogen/app/assets/builds/tailwind.css b/embedded_gems/pathogen/app/assets/builds/tailwind.css new file mode 100644 index 0000000000..b543769b0c --- /dev/null +++ b/embedded_gems/pathogen/app/assets/builds/tailwind.css @@ -0,0 +1,777 @@ +*, ::before, ::after { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; +} + +::backdrop { + --tw-border-spacing-x: 0; + --tw-border-spacing-y: 0; + --tw-translate-x: 0; + --tw-translate-y: 0; + --tw-rotate: 0; + --tw-skew-x: 0; + --tw-skew-y: 0; + --tw-scale-x: 1; + --tw-scale-y: 1; + --tw-pan-x: ; + --tw-pan-y: ; + --tw-pinch-zoom: ; + --tw-scroll-snap-strictness: proximity; + --tw-gradient-from-position: ; + --tw-gradient-via-position: ; + --tw-gradient-to-position: ; + --tw-ordinal: ; + --tw-slashed-zero: ; + --tw-numeric-figure: ; + --tw-numeric-spacing: ; + --tw-numeric-fraction: ; + --tw-ring-inset: ; + --tw-ring-offset-width: 0px; + --tw-ring-offset-color: #fff; + --tw-ring-color: rgb(59 130 246 / 0.5); + --tw-ring-offset-shadow: 0 0 #0000; + --tw-ring-shadow: 0 0 #0000; + --tw-shadow: 0 0 #0000; + --tw-shadow-colored: 0 0 #0000; + --tw-blur: ; + --tw-brightness: ; + --tw-contrast: ; + --tw-grayscale: ; + --tw-hue-rotate: ; + --tw-invert: ; + --tw-saturate: ; + --tw-sepia: ; + --tw-drop-shadow: ; + --tw-backdrop-blur: ; + --tw-backdrop-brightness: ; + --tw-backdrop-contrast: ; + --tw-backdrop-grayscale: ; + --tw-backdrop-hue-rotate: ; + --tw-backdrop-invert: ; + --tw-backdrop-opacity: ; + --tw-backdrop-saturate: ; + --tw-backdrop-sepia: ; + --tw-contain-size: ; + --tw-contain-layout: ; + --tw-contain-paint: ; + --tw-contain-style: ; +} + +/* +! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com +*/ + +/* +1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) +2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) +*/ + +*, +::before, +::after { + box-sizing: border-box; + /* 1 */ + border-width: 0; + /* 2 */ + border-style: solid; + /* 2 */ + border-color: #e5e7eb; + /* 2 */ +} + +::before, +::after { + --tw-content: ''; +} + +/* +1. Use a consistent sensible line-height in all browsers. +2. Prevent adjustments of font size after orientation changes in iOS. +3. Use a more readable tab size. +4. Use the user's configured `sans` font-family by default. +5. Use the user's configured `sans` font-feature-settings by default. +6. Use the user's configured `sans` font-variation-settings by default. +7. Disable tap highlights on iOS +*/ + +html, +:host { + line-height: 1.5; + /* 1 */ + -webkit-text-size-adjust: 100%; + /* 2 */ + -moz-tab-size: 4; + /* 3 */ + -o-tab-size: 4; + tab-size: 4; + /* 3 */ + font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; + /* 4 */ + font-feature-settings: normal; + /* 5 */ + font-variation-settings: normal; + /* 6 */ + -webkit-tap-highlight-color: transparent; + /* 7 */ +} + +/* +1. Remove the margin in all browsers. +2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. +*/ + +body { + margin: 0; + /* 1 */ + line-height: inherit; + /* 2 */ +} + +/* +1. Add the correct height in Firefox. +2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) +3. Ensure horizontal rules are visible by default. +*/ + +hr { + height: 0; + /* 1 */ + color: inherit; + /* 2 */ + border-top-width: 1px; + /* 3 */ +} + +/* +Add the correct text decoration in Chrome, Edge, and Safari. +*/ + +abbr:where([title]) { + -webkit-text-decoration: underline dotted; + text-decoration: underline dotted; +} + +/* +Remove the default font size and weight for headings. +*/ + +h1, +h2, +h3, +h4, +h5, +h6 { + font-size: inherit; + font-weight: inherit; +} + +/* +Reset links to optimize for opt-in styling instead of opt-out. +*/ + +a { + color: inherit; + text-decoration: inherit; +} + +/* +Add the correct font weight in Edge and Safari. +*/ + +b, +strong { + font-weight: bolder; +} + +/* +1. Use the user's configured `mono` font-family by default. +2. Use the user's configured `mono` font-feature-settings by default. +3. Use the user's configured `mono` font-variation-settings by default. +4. Correct the odd `em` font sizing in all browsers. +*/ + +code, +kbd, +samp, +pre { + font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; + /* 1 */ + font-feature-settings: normal; + /* 2 */ + font-variation-settings: normal; + /* 3 */ + font-size: 1em; + /* 4 */ +} + +/* +Add the correct font size in all browsers. +*/ + +small { + font-size: 80%; +} + +/* +Prevent `sub` and `sup` elements from affecting the line height in all browsers. +*/ + +sub, +sup { + font-size: 75%; + line-height: 0; + position: relative; + vertical-align: baseline; +} + +sub { + bottom: -0.25em; +} + +sup { + top: -0.5em; +} + +/* +1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) +2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) +3. Remove gaps between table borders by default. +*/ + +table { + text-indent: 0; + /* 1 */ + border-color: inherit; + /* 2 */ + border-collapse: collapse; + /* 3 */ +} + +/* +1. Change the font styles in all browsers. +2. Remove the margin in Firefox and Safari. +3. Remove default padding in all browsers. +*/ + +button, +input, +optgroup, +select, +textarea { + font-family: inherit; + /* 1 */ + font-feature-settings: inherit; + /* 1 */ + font-variation-settings: inherit; + /* 1 */ + font-size: 100%; + /* 1 */ + font-weight: inherit; + /* 1 */ + line-height: inherit; + /* 1 */ + letter-spacing: inherit; + /* 1 */ + color: inherit; + /* 1 */ + margin: 0; + /* 2 */ + padding: 0; + /* 3 */ +} + +/* +Remove the inheritance of text transform in Edge and Firefox. +*/ + +button, +select { + text-transform: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Remove default button styles. +*/ + +button, +input:where([type='button']), +input:where([type='reset']), +input:where([type='submit']) { + -webkit-appearance: button; + /* 1 */ + background-color: transparent; + /* 2 */ + background-image: none; + /* 2 */ +} + +/* +Use the modern Firefox focus style for all focusable elements. +*/ + +:-moz-focusring { + outline: auto; +} + +/* +Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) +*/ + +:-moz-ui-invalid { + box-shadow: none; +} + +/* +Add the correct vertical alignment in Chrome and Firefox. +*/ + +progress { + vertical-align: baseline; +} + +/* +Correct the cursor style of increment and decrement buttons in Safari. +*/ + +::-webkit-inner-spin-button, +::-webkit-outer-spin-button { + height: auto; +} + +/* +1. Correct the odd appearance in Chrome and Safari. +2. Correct the outline style in Safari. +*/ + +[type='search'] { + -webkit-appearance: textfield; + /* 1 */ + outline-offset: -2px; + /* 2 */ +} + +/* +Remove the inner padding in Chrome and Safari on macOS. +*/ + +::-webkit-search-decoration { + -webkit-appearance: none; +} + +/* +1. Correct the inability to style clickable types in iOS and Safari. +2. Change font properties to `inherit` in Safari. +*/ + +::-webkit-file-upload-button { + -webkit-appearance: button; + /* 1 */ + font: inherit; + /* 2 */ +} + +/* +Add the correct display in Chrome and Safari. +*/ + +summary { + display: list-item; +} + +/* +Removes the default spacing and border for appropriate elements. +*/ + +blockquote, +dl, +dd, +h1, +h2, +h3, +h4, +h5, +h6, +hr, +figure, +p, +pre { + margin: 0; +} + +fieldset { + margin: 0; + padding: 0; +} + +legend { + padding: 0; +} + +ol, +ul, +menu { + list-style: none; + margin: 0; + padding: 0; +} + +/* +Reset default styling for dialogs. +*/ + +dialog { + padding: 0; +} + +/* +Prevent resizing textareas horizontally by default. +*/ + +textarea { + resize: vertical; +} + +/* +1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) +2. Set the default placeholder color to the user's configured gray 400 color. +*/ + +input::-moz-placeholder, textarea::-moz-placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +input::placeholder, +textarea::placeholder { + opacity: 1; + /* 1 */ + color: #9ca3af; + /* 2 */ +} + +/* +Set the default cursor for buttons. +*/ + +button, +[role="button"] { + cursor: pointer; +} + +/* +Make sure disabled buttons don't get the pointer cursor. +*/ + +:disabled { + cursor: default; +} + +/* +1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) +2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) + This can trigger a poorly considered lint error in some tools but is included by design. +*/ + +img, +svg, +video, +canvas, +audio, +iframe, +embed, +object { + display: block; + /* 1 */ + vertical-align: middle; + /* 2 */ +} + +/* +Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) +*/ + +img, +video { + max-width: 100%; + height: auto; +} + +/* Make elements with the HTML hidden attribute stay hidden by default */ + +[hidden]:where(:not([hidden="until-found"])) { + display: none; +} + +.sr-only { + position: absolute; + width: 1px; + height: 1px; + padding: 0; + margin: -1px; + overflow: hidden; + clip: rect(0, 0, 0, 0); + white-space: nowrap; + border-width: 0; +} + +.relative { + position: relative; +} + +.ml-2 { + margin-left: 0.5rem; +} + +.mr-2 { + margin-right: 0.5rem; +} + +.block { + display: block; +} + +.inline-flex { + display: inline-flex; +} + +.w-full { + width: 100%; +} + +.select-none { + -webkit-user-select: none; + -moz-user-select: none; + user-select: none; +} + +.items-center { + align-items: center; +} + +.rounded-lg { + border-radius: 0.5rem; +} + +.border { + border-width: 1px; +} + +.border-red-100 { + --tw-border-opacity: 1; + border-color: rgb(254 226 226 / var(--tw-border-opacity, 1)); +} + +.border-slate-200 { + --tw-border-opacity: 1; + border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); +} + +.bg-slate-50 { + --tw-bg-opacity: 1; + background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); +} + +.bg-white { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); +} + +.text-center { + text-align: center; +} + +.font-medium { + font-weight: 500; +} + +.text-red-500 { + --tw-text-opacity: 1; + color: rgb(239 68 68 / var(--tw-text-opacity, 1)); +} + +.text-slate-900 { + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity, 1)); +} + +.text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.transition { + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; + transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + transition-duration: 150ms; +} + +.delay-150 { + transition-delay: 150ms; +} + +.duration-300 { + transition-duration: 300ms; +} + +.ease-in-out { + transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); +} + +.focus\:z-10:focus { + z-index: 10; +} + +.focus\:outline-none:focus { + outline: 2px solid transparent; + outline-offset: 2px; +} + +.focus\:ring-4:focus { + --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); + --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); + box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); +} + +.focus\:ring-red-300:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity, 1)); +} + +.focus\:ring-slate-100:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(241 245 249 / var(--tw-ring-opacity, 1)); +} + +.enabled\:hover\:bg-red-800:hover:enabled { + --tw-bg-opacity: 1; + background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1)); +} + +.enabled\:hover\:bg-slate-100:hover:enabled { + --tw-bg-opacity: 1; + background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); +} + +.enabled\:hover\:text-red-50:hover:enabled { + --tw-text-opacity: 1; + color: rgb(254 242 242 / var(--tw-text-opacity, 1)); +} + +.disabled\:cursor-not-allowed:disabled { + cursor: not-allowed; +} + +.disabled\:opacity-70:disabled { + opacity: 0.7; +} + +@media (prefers-color-scheme: dark) { + .dark\:border-red-800 { + --tw-border-opacity: 1; + border-color: rgb(153 27 27 / var(--tw-border-opacity, 1)); + } + + .dark\:border-slate-600 { + --tw-border-opacity: 1; + border-color: rgb(71 85 105 / var(--tw-border-opacity, 1)); + } + + .dark\:bg-slate-800 { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); + } + + .dark\:bg-slate-900 { + --tw-bg-opacity: 1; + background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1)); + } + + .dark\:text-red-500 { + --tw-text-opacity: 1; + color: rgb(239 68 68 / var(--tw-text-opacity, 1)); + } + + .dark\:text-slate-400 { + --tw-text-opacity: 1; + color: rgb(148 163 184 / var(--tw-text-opacity, 1)); + } + + .dark\:focus\:ring-red-900:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(127 29 29 / var(--tw-ring-opacity, 1)); + } + + .dark\:focus\:ring-slate-700:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(51 65 85 / var(--tw-ring-opacity, 1)); + } + + .enabled\:dark\:hover\:bg-slate-700:hover:enabled { + --tw-bg-opacity: 1; + background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1)); + } + + .enabled\:dark\:hover\:text-red-50:hover:enabled { + --tw-text-opacity: 1; + color: rgb(254 242 242 / var(--tw-text-opacity, 1)); + } + + .enabled\:dark\:hover\:text-white:hover:enabled { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); + } +} \ No newline at end of file diff --git a/embedded_gems/pathogen/demo/Procfile.dev b/embedded_gems/pathogen/demo/Procfile.dev index 297230ff88..cddb8ad58e 100644 --- a/embedded_gems/pathogen/demo/Procfile.dev +++ b/embedded_gems/pathogen/demo/Procfile.dev @@ -1,2 +1,2 @@ web: bin/rails server -p 3001 -css: bin/rails tailwindcss:watch +css: pnpx tailwindcss --watch diff --git a/embedded_gems/pathogen/tailwind.config.js b/embedded_gems/pathogen/tailwind.config.js index 9d72628533..bb4a513b24 100644 --- a/embedded_gems/pathogen/tailwind.config.js +++ b/embedded_gems/pathogen/tailwind.config.js @@ -1,6 +1,10 @@ /** @type {import('tailwindcss').Config} */ module.exports = { - content: ["./app/components/**/*.{erb}"], + content: [ + "./app/components/**/*.erb", + "./app/components/**/*.html", + "./app/components/**/*.rb", + ], theme: { extend: {}, }, From 2b89ddd5e2dc0da6f59cb157b1c421c81a0af8f3 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Tue, 26 Nov 2024 09:52:10 -0600 Subject: [PATCH 07/68] fix: :lipstick: Fixed issue with pathogen css not loading in previews --- embedded_gems/pathogen/Procfile | 1 + .../builds/pathogen_view_components.css | 42 +- .../pathogen/app/assets/builds/tailwind.css | 777 ------------------ embedded_gems/pathogen/demo/Procfile.dev | 2 +- .../demo/app/assets/builds/tailwind.css | 2 +- .../views/layouts/component_preview.html.erb | 3 +- .../pathogen/pathogen_view_components.gemspec | 2 +- .../previews/pathogen/button_preview.rb | 6 +- .../pathogen/button_preview/default.html.erb | 3 + embedded_gems/pathogen/tailwind.config.js | 1 + 10 files changed, 52 insertions(+), 787 deletions(-) delete mode 100644 embedded_gems/pathogen/app/assets/builds/tailwind.css create mode 100644 embedded_gems/pathogen/previews/pathogen/button_preview/default.html.erb diff --git a/embedded_gems/pathogen/Procfile b/embedded_gems/pathogen/Procfile index dde721f867..0ee45f4fb0 100644 --- a/embedded_gems/pathogen/Procfile +++ b/embedded_gems/pathogen/Procfile @@ -1 +1,2 @@ +css: tailwindcss -i ./app/assets/stylesheets/application.tailwind.css -o ./app/assets/builds/pathogen_view_components.css --watch web: cd demo && bin/dev diff --git a/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css b/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css index b543769b0c..159e6d1aec 100644 --- a/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css +++ b/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css @@ -586,6 +586,22 @@ video { display: inline-flex; } +.h-3 { + height: 0.75rem; +} + +.h-4 { + height: 1rem; +} + +.w-3 { + width: 0.75rem; +} + +.w-4 { + width: 1rem; +} + .w-full { width: 100%; } @@ -628,10 +644,34 @@ video { background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } +.fill-current { + fill: currentColor; +} + +.px-3 { + padding-left: 0.75rem; + padding-right: 0.75rem; +} + +.py-2 { + padding-top: 0.5rem; + padding-bottom: 0.5rem; +} + .text-center { text-align: center; } +.text-sm { + font-size: 0.875rem; + line-height: 1.25rem; +} + +.text-xs { + font-size: 0.75rem; + line-height: 1rem; +} + .font-medium { font-weight: 500; } @@ -774,4 +814,4 @@ video { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } -} \ No newline at end of file +} diff --git a/embedded_gems/pathogen/app/assets/builds/tailwind.css b/embedded_gems/pathogen/app/assets/builds/tailwind.css deleted file mode 100644 index b543769b0c..0000000000 --- a/embedded_gems/pathogen/app/assets/builds/tailwind.css +++ /dev/null @@ -1,777 +0,0 @@ -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; -} - -/* -! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -7. Disable tap highlights on iOS -*/ - -html, -:host { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ - -webkit-tap-highlight-color: transparent; - /* 7 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font-family by default. -2. Use the user's configured `mono` font-feature-settings by default. -3. Use the user's configured `mono` font-variation-settings by default. -4. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-feature-settings: normal; - /* 2 */ - font-variation-settings: normal; - /* 3 */ - font-size: 1em; - /* 4 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - letter-spacing: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -input:where([type='button']), -input:where([type='reset']), -input:where([type='submit']) { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden]:where(:not([hidden="until-found"])) { - display: none; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; -} - -.relative { - position: relative; -} - -.ml-2 { - margin-left: 0.5rem; -} - -.mr-2 { - margin-right: 0.5rem; -} - -.block { - display: block; -} - -.inline-flex { - display: inline-flex; -} - -.w-full { - width: 100%; -} - -.select-none { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} - -.items-center { - align-items: center; -} - -.rounded-lg { - border-radius: 0.5rem; -} - -.border { - border-width: 1px; -} - -.border-red-100 { - --tw-border-opacity: 1; - border-color: rgb(254 226 226 / var(--tw-border-opacity, 1)); -} - -.border-slate-200 { - --tw-border-opacity: 1; - border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); -} - -.bg-slate-50 { - --tw-bg-opacity: 1; - background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); -} - -.bg-white { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); -} - -.text-center { - text-align: center; -} - -.font-medium { - font-weight: 500; -} - -.text-red-500 { - --tw-text-opacity: 1; - color: rgb(239 68 68 / var(--tw-text-opacity, 1)); -} - -.text-slate-900 { - --tw-text-opacity: 1; - color: rgb(15 23 42 / var(--tw-text-opacity, 1)); -} - -.text-white { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity, 1)); -} - -.transition { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.delay-150 { - transition-delay: 150ms; -} - -.duration-300 { - transition-duration: 300ms; -} - -.ease-in-out { - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); -} - -.focus\:z-10:focus { - z-index: 10; -} - -.focus\:outline-none:focus { - outline: 2px solid transparent; - outline-offset: 2px; -} - -.focus\:ring-4:focus { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} - -.focus\:ring-red-300:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity, 1)); -} - -.focus\:ring-slate-100:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(241 245 249 / var(--tw-ring-opacity, 1)); -} - -.enabled\:hover\:bg-red-800:hover:enabled { - --tw-bg-opacity: 1; - background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1)); -} - -.enabled\:hover\:bg-slate-100:hover:enabled { - --tw-bg-opacity: 1; - background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); -} - -.enabled\:hover\:text-red-50:hover:enabled { - --tw-text-opacity: 1; - color: rgb(254 242 242 / var(--tw-text-opacity, 1)); -} - -.disabled\:cursor-not-allowed:disabled { - cursor: not-allowed; -} - -.disabled\:opacity-70:disabled { - opacity: 0.7; -} - -@media (prefers-color-scheme: dark) { - .dark\:border-red-800 { - --tw-border-opacity: 1; - border-color: rgb(153 27 27 / var(--tw-border-opacity, 1)); - } - - .dark\:border-slate-600 { - --tw-border-opacity: 1; - border-color: rgb(71 85 105 / var(--tw-border-opacity, 1)); - } - - .dark\:bg-slate-800 { - --tw-bg-opacity: 1; - background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); - } - - .dark\:bg-slate-900 { - --tw-bg-opacity: 1; - background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1)); - } - - .dark\:text-red-500 { - --tw-text-opacity: 1; - color: rgb(239 68 68 / var(--tw-text-opacity, 1)); - } - - .dark\:text-slate-400 { - --tw-text-opacity: 1; - color: rgb(148 163 184 / var(--tw-text-opacity, 1)); - } - - .dark\:focus\:ring-red-900:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(127 29 29 / var(--tw-ring-opacity, 1)); - } - - .dark\:focus\:ring-slate-700:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(51 65 85 / var(--tw-ring-opacity, 1)); - } - - .enabled\:dark\:hover\:bg-slate-700:hover:enabled { - --tw-bg-opacity: 1; - background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1)); - } - - .enabled\:dark\:hover\:text-red-50:hover:enabled { - --tw-text-opacity: 1; - color: rgb(254 242 242 / var(--tw-text-opacity, 1)); - } - - .enabled\:dark\:hover\:text-white:hover:enabled { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity, 1)); - } -} \ No newline at end of file diff --git a/embedded_gems/pathogen/demo/Procfile.dev b/embedded_gems/pathogen/demo/Procfile.dev index cddb8ad58e..297230ff88 100644 --- a/embedded_gems/pathogen/demo/Procfile.dev +++ b/embedded_gems/pathogen/demo/Procfile.dev @@ -1,2 +1,2 @@ web: bin/rails server -p 3001 -css: pnpx tailwindcss --watch +css: bin/rails tailwindcss:watch diff --git a/embedded_gems/pathogen/demo/app/assets/builds/tailwind.css b/embedded_gems/pathogen/demo/app/assets/builds/tailwind.css index 1c3ec08e6b..4fdfc02188 100644 --- a/embedded_gems/pathogen/demo/app/assets/builds/tailwind.css +++ b/embedded_gems/pathogen/demo/app/assets/builds/tailwind.css @@ -1 +1 @@ -*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.mx-auto{margin-left:auto;margin-right:auto}.mt-28{margin-top:7rem}.flex{display:flex}.px-5{padding-left:1.25rem;padding-right:1.25rem} \ No newline at end of file +*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.mx-auto{margin-left:auto;margin-right:auto}.mt-28{margin-top:7rem}.flex{display:flex}.h-screen{height:100vh}.w-screen{width:100vw}.p-4{padding:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem} \ No newline at end of file diff --git a/embedded_gems/pathogen/demo/app/views/layouts/component_preview.html.erb b/embedded_gems/pathogen/demo/app/views/layouts/component_preview.html.erb index 324580db39..9d50162265 100644 --- a/embedded_gems/pathogen/demo/app/views/layouts/component_preview.html.erb +++ b/embedded_gems/pathogen/demo/app/views/layouts/component_preview.html.erb @@ -11,6 +11,7 @@ <%= stylesheet_link_tag "tailwind", "inter-font", "data-turbo-track": "reload" %> <%= stylesheet_link_tag "application", "data-turbo-track": "reload" %> + <%= stylesheet_link_tag "pathogen_view_components", "data-turbo-track": "reload" %> <%= hotwire_livereload_tags if Rails.env.development? %> @@ -20,7 +21,7 @@ -
+
<% if params.dig(:lookbook, :display, :theme) == "all" || params.dig(:theme) == "all" %>
<% color_themes.each do |theme| %> diff --git a/embedded_gems/pathogen/pathogen_view_components.gemspec b/embedded_gems/pathogen/pathogen_view_components.gemspec index c0670f3def..725f9b0f11 100644 --- a/embedded_gems/pathogen/pathogen_view_components.gemspec +++ b/embedded_gems/pathogen/pathogen_view_components.gemspec @@ -10,7 +10,7 @@ Gem::Specification.new do |spec| spec.version = Pathogen::ViewComponents::VERSION::STRING spec.summary = 'Pathogen View Components' spec.license = 'MIT' - spec.files = Dir['lib/**/*'] + spec.files = Dir['lib/**/*', 'app/**/*', 'previews/**/*'] spec.require_paths = ['lib'] spec.required_ruby_version = Gem::Requirement.new('>= 3.2.0') spec.add_dependency 'actionview', '>= 5.0.0' diff --git a/embedded_gems/pathogen/previews/pathogen/button_preview.rb b/embedded_gems/pathogen/previews/pathogen/button_preview.rb index 026ec0f8a4..cf549298a7 100644 --- a/embedded_gems/pathogen/previews/pathogen/button_preview.rb +++ b/embedded_gems/pathogen/previews/pathogen/button_preview.rb @@ -4,10 +4,6 @@ module Pathogen # Preview class for Primer::Button component class ButtonPreview < ViewComponent::Preview # @label Default - def default - render Pathogen::Button.new do - 'Shit' - end - end + def default; end end end diff --git a/embedded_gems/pathogen/previews/pathogen/button_preview/default.html.erb b/embedded_gems/pathogen/previews/pathogen/button_preview/default.html.erb new file mode 100644 index 0000000000..dc51670f96 --- /dev/null +++ b/embedded_gems/pathogen/previews/pathogen/button_preview/default.html.erb @@ -0,0 +1,3 @@ +<%= render Pathogen::Button.new(scheme: :default) do %> + Button +<% end %> diff --git a/embedded_gems/pathogen/tailwind.config.js b/embedded_gems/pathogen/tailwind.config.js index bb4a513b24..c06c208901 100644 --- a/embedded_gems/pathogen/tailwind.config.js +++ b/embedded_gems/pathogen/tailwind.config.js @@ -4,6 +4,7 @@ module.exports = { "./app/components/**/*.erb", "./app/components/**/*.html", "./app/components/**/*.rb", + "./app/lib/**/*.rb", ], theme: { extend: {}, From 297de07493007672509686402fcd21537d07d4f9 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Tue, 26 Nov 2024 10:56:34 -0600 Subject: [PATCH 08/68] style: :lipstick: Cleaned up styles using updated tailwind config --- .../builds/pathogen_view_components.css | 118 ++++++++---------- .../app/components/pathogen/button.rb | 8 +- embedded_gems/pathogen/demo/Gemfile | 1 + embedded_gems/pathogen/demo/Gemfile.lock | 1 + .../previews/pathogen/button_preview.rb | 88 ++++++++++++- .../button_preview/all_schemes.html.erb | 13 ++ .../pathogen/button_preview/default.html.erb | 3 - .../button_preview/leading_visual.html.erb | 4 + .../leading_visual_svg.html.erb | 11 ++ .../button_preview/trailing_visual.html.erb | 4 + .../trailing_visual_svg.html.erb | 12 ++ embedded_gems/pathogen/tailwind.config.js | 66 +++++++++- 12 files changed, 249 insertions(+), 80 deletions(-) create mode 100644 embedded_gems/pathogen/previews/pathogen/button_preview/all_schemes.html.erb delete mode 100644 embedded_gems/pathogen/previews/pathogen/button_preview/default.html.erb create mode 100644 embedded_gems/pathogen/previews/pathogen/button_preview/leading_visual.html.erb create mode 100644 embedded_gems/pathogen/previews/pathogen/button_preview/leading_visual_svg.html.erb create mode 100644 embedded_gems/pathogen/previews/pathogen/button_preview/trailing_visual.html.erb create mode 100644 embedded_gems/pathogen/previews/pathogen/button_preview/trailing_visual_svg.html.erb diff --git a/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css b/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css index 159e6d1aec..dd69e6a916 100644 --- a/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css +++ b/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css @@ -624,24 +624,29 @@ video { border-width: 1px; } -.border-red-100 { +.border-neutral-primary { --tw-border-opacity: 1; - border-color: rgb(254 226 226 / var(--tw-border-opacity, 1)); + border-color: rgb(146 205 184 / var(--tw-border-opacity, 1)); } -.border-slate-200 { +.border-danger-primary { --tw-border-opacity: 1; - border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); + border-color: rgb(248 113 113 / var(--tw-border-opacity, 1)); } -.bg-slate-50 { +.bg-brand-primary { + --tw-bg-opacity: 1; + background-color: rgb(58 132 108 / var(--tw-bg-opacity, 1)); +} + +.bg-neutral-secondary { --tw-bg-opacity: 1; background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); } -.bg-white { +.bg-danger-secondary { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); + background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); } .fill-current { @@ -676,39 +681,19 @@ video { font-weight: 500; } -.text-red-500 { +.text-brand-onprimary { --tw-text-opacity: 1; - color: rgb(239 68 68 / var(--tw-text-opacity, 1)); + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } -.text-slate-900 { +.text-neutral-primary { --tw-text-opacity: 1; - color: rgb(15 23 42 / var(--tw-text-opacity, 1)); + color: rgb(30 41 59 / var(--tw-text-opacity, 1)); } -.text-white { +.text-danger-onsecondary { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity, 1)); -} - -.transition { - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, -webkit-backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter; - transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter, -webkit-backdrop-filter; - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); - transition-duration: 150ms; -} - -.delay-150 { - transition-delay: 150ms; -} - -.duration-300 { - transition-duration: 300ms; -} - -.ease-in-out { - transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); + color: rgb(153 27 27 / var(--tw-text-opacity, 1)); } .focus\:z-10:focus { @@ -726,29 +711,29 @@ video { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } -.focus\:ring-red-300:focus { +.focus\:ring-error-100:focus { --tw-ring-opacity: 1; - --tw-ring-color: rgb(252 165 165 / var(--tw-ring-opacity, 1)); + --tw-ring-color: rgb(254 226 226 / var(--tw-ring-opacity, 1)); } -.focus\:ring-slate-100:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(241 245 249 / var(--tw-ring-opacity, 1)); +.enabled\:hover\:bg-brand-primary-hover:hover:enabled { + --tw-bg-opacity: 1; + background-color: rgb(71 161 131 / var(--tw-bg-opacity, 1)); } -.enabled\:hover\:bg-red-800:hover:enabled { +.enabled\:hover\:bg-danger-secondary-hover:hover:enabled { --tw-bg-opacity: 1; - background-color: rgb(153 27 27 / var(--tw-bg-opacity, 1)); + background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1)); } -.enabled\:hover\:bg-slate-100:hover:enabled { - --tw-bg-opacity: 1; - background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); +.enabled\:hover\:text-brand-onsecondary:hover:enabled { + --tw-text-opacity: 1; + color: rgb(45 85 72 / var(--tw-text-opacity, 1)); } -.enabled\:hover\:text-red-50:hover:enabled { +.enabled\:hover\:text-danger-onsecondary:hover:enabled { --tw-text-opacity: 1; - color: rgb(254 242 242 / var(--tw-text-opacity, 1)); + color: rgb(153 27 27 / var(--tw-text-opacity, 1)); } .disabled\:cursor-not-allowed:disabled { @@ -760,58 +745,53 @@ video { } @media (prefers-color-scheme: dark) { - .dark\:border-red-800 { + .dark\:border-neutral-primary { --tw-border-opacity: 1; - border-color: rgb(153 27 27 / var(--tw-border-opacity, 1)); + border-color: rgb(146 205 184 / var(--tw-border-opacity, 1)); } - .dark\:border-slate-600 { + .dark\:border-danger-primary { --tw-border-opacity: 1; - border-color: rgb(71 85 105 / var(--tw-border-opacity, 1)); + border-color: rgb(248 113 113 / var(--tw-border-opacity, 1)); } - .dark\:bg-slate-800 { + .dark\:bg-neutral-primary { --tw-bg-opacity: 1; - background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } - .dark\:bg-slate-900 { + .dark\:bg-danger-secondary { --tw-bg-opacity: 1; - background-color: rgb(15 23 42 / var(--tw-bg-opacity, 1)); + background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); } - .dark\:text-red-500 { + .dark\:text-neutral-secondary { --tw-text-opacity: 1; - color: rgb(239 68 68 / var(--tw-text-opacity, 1)); + color: rgb(100 116 139 / var(--tw-text-opacity, 1)); } - .dark\:text-slate-400 { + .dark\:text-danger-onsecondary { --tw-text-opacity: 1; - color: rgb(148 163 184 / var(--tw-text-opacity, 1)); + color: rgb(153 27 27 / var(--tw-text-opacity, 1)); } - .dark\:focus\:ring-red-900:focus { + .dark\:focus\:ring-error-900:focus { --tw-ring-opacity: 1; --tw-ring-color: rgb(127 29 29 / var(--tw-ring-opacity, 1)); } - .dark\:focus\:ring-slate-700:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(51 65 85 / var(--tw-ring-opacity, 1)); - } - - .enabled\:dark\:hover\:bg-slate-700:hover:enabled { + .enabled\:dark\:hover\:bg-neutral-primary:hover:enabled { --tw-bg-opacity: 1; - background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1)); + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } - .enabled\:dark\:hover\:text-red-50:hover:enabled { + .enabled\:dark\:hover\:text-brand-onprimary:hover:enabled { --tw-text-opacity: 1; - color: rgb(254 242 242 / var(--tw-text-opacity, 1)); + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } - .enabled\:dark\:hover\:text-white:hover:enabled { + .enabled\:dark\:hover\:text-danger-onsecondary:hover:enabled { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity, 1)); + color: rgb(153 27 27 / var(--tw-text-opacity, 1)); } } diff --git a/embedded_gems/pathogen/app/components/pathogen/button.rb b/embedded_gems/pathogen/app/components/pathogen/button.rb index f323a0d701..33f102c6b4 100644 --- a/embedded_gems/pathogen/app/components/pathogen/button.rb +++ b/embedded_gems/pathogen/app/components/pathogen/button.rb @@ -13,7 +13,7 @@ class Button < Pathogen::Component SCHEME_OPTIONS = %i[primary default danger].freeze DEFAULT_SCHEME = :default # rubocop:disable Layout/LineLength - DEFAULT_CLASSES = 'relative pointer select-none transition ease-in-out delay-150 duration-300 rounded-lg font-medium focus:outline-none focus:ring-4 focus:z-10 disabled:opacity-70 disabled:cursor-not-allowed' + DEFAULT_CLASSES = 'relative pointer select-none rounded-lg font-medium focus:outline-none focus:ring-4 focus:z-10 disabled:opacity-70 disabled:cursor-not-allowed' # rubocop:enable Layout/LineLength # rubocop:disable Metrics/ParameterLists @@ -74,9 +74,9 @@ def trimmed_content def generate_scheme_mapping(scheme) # rubocop:disable Layout/LineLength { - primary: 'bg-primary-700 text-white enabled:hover:bg-primary-800 focus:ring-primary-100 dark:focus:ring-primary-600', - default: 'text-slate-900 bg-white border border-slate-200 enabled:hover:bg-slate-100 enabled:hover:text-primary-700 focus:ring-4 focus:ring-slate-100 dark:focus:ring-slate-700 dark:bg-slate-800 dark:text-slate-400 dark:border-slate-600 enabled:dark:hover:text-white enabled:dark:hover:bg-slate-700', - danger: 'border border-red-100 bg-slate-50 text-red-500 enabled:hover:text-red-50 enabled:dark:hover:text-red-50 enabled:hover:bg-red-800 focus:ring-red-300 dark:border-red-800 dark:bg-slate-900 dark:text-red-500 dark:focus:ring-red-900' + primary: 'bg-brand-primary text-brand-onprimary enabled:hover:bg-brand-primary-hover focus:ring-brand-primary-100 dark:focus:ring-brand-primary-600', + default: 'text-neutral-primary bg-neutral-secondary border border-neutral-primary enabled:hover:bg-neutral-secondary-hover enabled:hover:text-brand-onsecondary focus:ring-4 focus:ring-neutral-primary dark:focus:ring-neutral-primary dark:bg-neutral-primary dark:text-neutral-secondary dark:border-neutral-primary enabled:dark:hover:text-brand-onprimary enabled:dark:hover:bg-neutral-primary dark:enabled:hover:bg-neutral-primary-hover', + danger: 'border border-danger-primary bg-danger-secondary text-danger-onsecondary enabled:hover:text-danger-onsecondary enabled:dark:hover:text-danger-onsecondary enabled:hover:bg-danger-secondary-hover focus:ring-danger-primary-100 dark:border-danger-primary dark:bg-danger-secondary dark:text-danger-onsecondary dark:focus:ring-danger-primary-900' }[scheme] # rubocop:enable Layout/LineLength end diff --git a/embedded_gems/pathogen/demo/Gemfile b/embedded_gems/pathogen/demo/Gemfile index b333f6483a..42b59cfced 100644 --- a/embedded_gems/pathogen/demo/Gemfile +++ b/embedded_gems/pathogen/demo/Gemfile @@ -60,3 +60,4 @@ end gem "hotwire-livereload", "~> 1.4", :group => :development gem "tailwindcss-rails", "~> 3.0" +gem "heroicon-rails", "~> 0.2.9" diff --git a/embedded_gems/pathogen/demo/Gemfile.lock b/embedded_gems/pathogen/demo/Gemfile.lock index a0abf0f457..5b9880de7c 100644 --- a/embedded_gems/pathogen/demo/Gemfile.lock +++ b/embedded_gems/pathogen/demo/Gemfile.lock @@ -376,6 +376,7 @@ DEPENDENCIES brakeman capybara debug + heroicon-rails (~> 0.2.9) hotwire-livereload (~> 1.4) importmap-rails jbuilder diff --git a/embedded_gems/pathogen/previews/pathogen/button_preview.rb b/embedded_gems/pathogen/previews/pathogen/button_preview.rb index cf549298a7..363819c253 100644 --- a/embedded_gems/pathogen/previews/pathogen/button_preview.rb +++ b/embedded_gems/pathogen/previews/pathogen/button_preview.rb @@ -1,9 +1,91 @@ # frozen_string_literal: true module Pathogen - # Preview class for Primer::Button component class ButtonPreview < ViewComponent::Preview - # @label Default - def default; end + # @param scheme select { choices: [default,primary, danger] } "The color scheme of the button." + # @param size select { choices: [small, medium] } "The size of the button." + # @param disabled toggle "The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants." + # @param block toggle "If true, the button will take up the full width of its container." + def playground(scheme: :default, size: :medium, disabled: false, block: false) + render Pathogen::Button.new(scheme:, size:, disabled:, block:, test_selector: 'playground') do + 'Button' + end + end + + # @param disabled toggle "The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants." + def default(disabled: false) + render Pathogen::Button.new(disabled:, test_selector: 'default') do + 'Button' + end + end + + # @param disabled toggle "The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants." + # @param block toggle "If true, the button will take up the full width of its container." + def primary(disabled: false, block: false) + render Pathogen::Button.new(scheme: :primary, disabled:, block:, test_selector: 'primary') do + 'Button' + end + end + + # @param disabled toggle "The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants." + # @param block toggle "If true, the button will take up the full width of its container." + def danger(disabled: false, block: false) + render Pathogen::Button.new(scheme: :danger, disabled:, block:, test_selector: 'danger') do + 'Button' + end + end + + def all_schemes; end + + def full_width + render Pathogen::Button.new(block: true, test_selector: 'full-width') do + 'Button' + end + end + + # @param scheme select { choices: [default,primary, danger] } "The color scheme of the button." + # @param href text "The URL to link to." + # @param disabled toggle "The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants." + def link_as_a_button(scheme: :default, href: '#', disabled: false) + render Pathogen::Button.new(scheme:, href:, tag: :a, disabled:, test_selector: 'link-as-a-button') do + 'Button' + end + end + + # @param scheme select { choices: [default,primary, danger] } "The color scheme of the button." + # @param size select { choices: [small, medium] } "The size of the button." + def leading_visual(scheme: :primary, size: :medium) + render_with_template(locals: { + scheme:, + size: + }) + end + + # @param scheme select { choices: [default,primary, danger] } "The color scheme of the button." + # @param size select { choices: [small, medium] } "The size of the button." + def leading_visual_svg(scheme: :primary, size: :medium) + render_with_template(locals: { + scheme:, + size: + }) + end + + # @param scheme select { choices: [default,primary, danger] } "The color scheme of the button." + # @param size select { choices: [small, medium] } "The size of the button." + def trailing_visual(scheme: :primary, size: :medium) + render_with_template(locals: { + scheme:, + size: + }) + end + + # @param scheme select { choices: [default,primary, danger] } "The color scheme of the button." + # @param size select { choices: [small, medium] } "The size of the button." + def trailing_visual_svg(scheme: :primary, size: :medium) + render_with_template(locals: { + scheme:, + size: + }) + end end end diff --git a/embedded_gems/pathogen/previews/pathogen/button_preview/all_schemes.html.erb b/embedded_gems/pathogen/previews/pathogen/button_preview/all_schemes.html.erb new file mode 100644 index 0000000000..d24e1354d7 --- /dev/null +++ b/embedded_gems/pathogen/previews/pathogen/button_preview/all_schemes.html.erb @@ -0,0 +1,13 @@ +
+ <%= render Pathogen::Button.new(scheme: :default) do %> + Button + <% end %> + + <%= render Pathogen::Button.new(scheme: :primary) do %> + Button + <% end %> + + <%= render Pathogen::Button.new(scheme: :danger) do %> + Button + <% end %> +
diff --git a/embedded_gems/pathogen/previews/pathogen/button_preview/default.html.erb b/embedded_gems/pathogen/previews/pathogen/button_preview/default.html.erb deleted file mode 100644 index dc51670f96..0000000000 --- a/embedded_gems/pathogen/previews/pathogen/button_preview/default.html.erb +++ /dev/null @@ -1,3 +0,0 @@ -<%= render Pathogen::Button.new(scheme: :default) do %> - Button -<% end %> diff --git a/embedded_gems/pathogen/previews/pathogen/button_preview/leading_visual.html.erb b/embedded_gems/pathogen/previews/pathogen/button_preview/leading_visual.html.erb new file mode 100644 index 0000000000..714db311a3 --- /dev/null +++ b/embedded_gems/pathogen/previews/pathogen/button_preview/leading_visual.html.erb @@ -0,0 +1,4 @@ +<%= render Pathogen::Button.new(scheme:, size:) do |button| %> + <% button.with_leading_visual_icon(icon: "magnifying-glass") %> + Search +<% end %> diff --git a/embedded_gems/pathogen/previews/pathogen/button_preview/leading_visual_svg.html.erb b/embedded_gems/pathogen/previews/pathogen/button_preview/leading_visual_svg.html.erb new file mode 100644 index 0000000000..1ddab85463 --- /dev/null +++ b/embedded_gems/pathogen/previews/pathogen/button_preview/leading_visual_svg.html.erb @@ -0,0 +1,11 @@ +<%= render Pathogen::Button.new(scheme:, size:) do |button| %> + <% button.with_leading_visual_svg do %> + + <% end %> + Warning +<% end %> diff --git a/embedded_gems/pathogen/previews/pathogen/button_preview/trailing_visual.html.erb b/embedded_gems/pathogen/previews/pathogen/button_preview/trailing_visual.html.erb new file mode 100644 index 0000000000..bdd73408fb --- /dev/null +++ b/embedded_gems/pathogen/previews/pathogen/button_preview/trailing_visual.html.erb @@ -0,0 +1,4 @@ +<%= render Pathogen::Button.new(scheme:, size:) do |button| %> + <% button.with_trailing_visual_icon(icon: "arrow-right") %> + Proceed +<% end %> diff --git a/embedded_gems/pathogen/previews/pathogen/button_preview/trailing_visual_svg.html.erb b/embedded_gems/pathogen/previews/pathogen/button_preview/trailing_visual_svg.html.erb new file mode 100644 index 0000000000..e7be1515bb --- /dev/null +++ b/embedded_gems/pathogen/previews/pathogen/button_preview/trailing_visual_svg.html.erb @@ -0,0 +1,12 @@ +<%= render Pathogen::Button.new(scheme:, size:) do |button| %> + <% button.with_trailing_visual_svg do %> + + + <% end %> + Warning +<% end %> diff --git a/embedded_gems/pathogen/tailwind.config.js b/embedded_gems/pathogen/tailwind.config.js index c06c208901..37c2c71661 100644 --- a/embedded_gems/pathogen/tailwind.config.js +++ b/embedded_gems/pathogen/tailwind.config.js @@ -1,3 +1,38 @@ +const colors = require("tailwindcss/colors"); + +const globalColors = { + brand: { + 50: "#f0f9f5", + 100: "#dcf1e7", + 200: "#bce3d3", + 300: "#92cdb8", + 400: "#68b79c", + 500: "#47a183", + 600: "#3a846c", + 700: "#336b59", + 800: "#2d5548", + 900: "#26463c", + 950: "#1a2d27", + }, + neutral: colors.slate, + danger: { + 50: "#fef2f2", + 100: "#fee2e2", + 200: "#fecaca", + 300: "#fca5a5", + 400: "#f87171", + 500: "#ef4444", + 600: "#dc2626", + 700: "#b91c1c", + 800: "#991b1b", + 900: "#7f1d1d", + 950: "#450a0a", + }, + error: colors.red, + success: colors.green, + warning: colors.amber, +}; + /** @type {import('tailwindcss').Config} */ module.exports = { content: [ @@ -7,7 +42,36 @@ module.exports = { "./app/lib/**/*.rb", ], theme: { - extend: {}, + extend: { + colors: globalColors, + backgroundColor: { + "brand-primary": globalColors.brand[600], + "brand-primary-hover": globalColors.brand[500], + "brand-secondary": globalColors.brand[100], + "brand-secondary-hover": globalColors.brand[200], + "neutral-primary": colors.white, + "neutral-secondary": globalColors.neutral[50], + "danger-primary": globalColors.danger[600], + "danger-primary-hover": globalColors.danger[500], + "danger-secondary": globalColors.danger[100], + "danger-secondary-hover": globalColors.danger[200], + }, + borderColor: { + "brand-primary": globalColors.brand[400], + "neutral-primary": globalColors.brand[300], + "danger-primary": globalColors.danger[400], + "danger-secondary": globalColors.danger[300], + }, + textColor: { + "brand-onprimary": colors.white, + "brand-onsecondary": globalColors.brand[800], + "neutral-primary": globalColors.neutral[800], + "neutral-secondary": globalColors.neutral[500], + "neutral-emphasis": globalColors.neutral[900], + "danger-onprimary": colors.white, + "danger-onsecondary": globalColors.danger[800], + }, + }, }, plugins: [], }; From 8d8e5ea38b37b0b7a415bb53d1921f9e96a58440 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Tue, 26 Nov 2024 14:15:46 -0600 Subject: [PATCH 09/68] feat: Moved all previews into the demo --- .../builds/pathogen_view_components.css | 52 ++++++++----------- embedded_gems/pathogen/demo/README.md | 24 --------- .../demo/app/assets/builds/tailwind.css | 2 +- embedded_gems/pathogen/demo/bin/brakeman | 7 --- .../pathogen/demo/bin/docker-entrypoint | 13 ----- .../components/previews/button_preview.rb | 7 --- .../previews/button_preview/default.html.erb | 3 -- .../previews/pathogen/button_preview.rb | 0 .../button_preview/all_schemes.html.erb | 0 .../button_preview/leading_visual.html.erb | 0 .../leading_visual_svg.html.erb | 0 .../button_preview/trailing_visual.html.erb | 0 .../trailing_visual_svg.html.erb | 0 13 files changed, 22 insertions(+), 86 deletions(-) delete mode 100644 embedded_gems/pathogen/demo/README.md delete mode 100755 embedded_gems/pathogen/demo/bin/brakeman delete mode 100755 embedded_gems/pathogen/demo/bin/docker-entrypoint delete mode 100644 embedded_gems/pathogen/demo/test/components/previews/button_preview.rb delete mode 100644 embedded_gems/pathogen/demo/test/components/previews/button_preview/default.html.erb rename embedded_gems/pathogen/{ => demo/test/components}/previews/pathogen/button_preview.rb (100%) rename embedded_gems/pathogen/{ => demo/test/components}/previews/pathogen/button_preview/all_schemes.html.erb (100%) rename embedded_gems/pathogen/{ => demo/test/components}/previews/pathogen/button_preview/leading_visual.html.erb (100%) rename embedded_gems/pathogen/{ => demo/test/components}/previews/pathogen/button_preview/leading_visual_svg.html.erb (100%) rename embedded_gems/pathogen/{ => demo/test/components}/previews/pathogen/button_preview/trailing_visual.html.erb (100%) rename embedded_gems/pathogen/{ => demo/test/components}/previews/pathogen/button_preview/trailing_visual_svg.html.erb (100%) diff --git a/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css b/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css index dd69e6a916..3bb5611abf 100644 --- a/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css +++ b/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css @@ -624,14 +624,14 @@ video { border-width: 1px; } -.border-neutral-primary { +.border-danger-primary { --tw-border-opacity: 1; - border-color: rgb(146 205 184 / var(--tw-border-opacity, 1)); + border-color: rgb(248 113 113 / var(--tw-border-opacity, 1)); } -.border-danger-primary { +.border-neutral-primary { --tw-border-opacity: 1; - border-color: rgb(248 113 113 / var(--tw-border-opacity, 1)); + border-color: rgb(146 205 184 / var(--tw-border-opacity, 1)); } .bg-brand-primary { @@ -639,14 +639,14 @@ video { background-color: rgb(58 132 108 / var(--tw-bg-opacity, 1)); } -.bg-neutral-secondary { +.bg-danger-secondary { --tw-bg-opacity: 1; - background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); + background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); } -.bg-danger-secondary { +.bg-neutral-secondary { --tw-bg-opacity: 1; - background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); + background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); } .fill-current { @@ -686,14 +686,14 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } -.text-neutral-primary { +.text-danger-onsecondary { --tw-text-opacity: 1; - color: rgb(30 41 59 / var(--tw-text-opacity, 1)); + color: rgb(153 27 27 / var(--tw-text-opacity, 1)); } -.text-danger-onsecondary { +.text-neutral-primary { --tw-text-opacity: 1; - color: rgb(153 27 27 / var(--tw-text-opacity, 1)); + color: rgb(30 41 59 / var(--tw-text-opacity, 1)); } .focus\:z-10:focus { @@ -711,11 +711,6 @@ video { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } -.focus\:ring-error-100:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(254 226 226 / var(--tw-ring-opacity, 1)); -} - .enabled\:hover\:bg-brand-primary-hover:hover:enabled { --tw-bg-opacity: 1; background-color: rgb(71 161 131 / var(--tw-bg-opacity, 1)); @@ -745,19 +740,14 @@ video { } @media (prefers-color-scheme: dark) { - .dark\:border-neutral-primary { - --tw-border-opacity: 1; - border-color: rgb(146 205 184 / var(--tw-border-opacity, 1)); - } - .dark\:border-danger-primary { --tw-border-opacity: 1; border-color: rgb(248 113 113 / var(--tw-border-opacity, 1)); } - .dark\:bg-neutral-primary { - --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); + .dark\:border-neutral-primary { + --tw-border-opacity: 1; + border-color: rgb(146 205 184 / var(--tw-border-opacity, 1)); } .dark\:bg-danger-secondary { @@ -765,9 +755,9 @@ video { background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); } - .dark\:text-neutral-secondary { - --tw-text-opacity: 1; - color: rgb(100 116 139 / var(--tw-text-opacity, 1)); + .dark\:bg-neutral-primary { + --tw-bg-opacity: 1; + background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); } .dark\:text-danger-onsecondary { @@ -775,9 +765,9 @@ video { color: rgb(153 27 27 / var(--tw-text-opacity, 1)); } - .dark\:focus\:ring-error-900:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(127 29 29 / var(--tw-ring-opacity, 1)); + .dark\:text-neutral-secondary { + --tw-text-opacity: 1; + color: rgb(100 116 139 / var(--tw-text-opacity, 1)); } .enabled\:dark\:hover\:bg-neutral-primary:hover:enabled { diff --git a/embedded_gems/pathogen/demo/README.md b/embedded_gems/pathogen/demo/README.md deleted file mode 100644 index 7db80e4ca1..0000000000 --- a/embedded_gems/pathogen/demo/README.md +++ /dev/null @@ -1,24 +0,0 @@ -# README - -This README would normally document whatever steps are necessary to get the -application up and running. - -Things you may want to cover: - -* Ruby version - -* System dependencies - -* Configuration - -* Database creation - -* Database initialization - -* How to run the test suite - -* Services (job queues, cache servers, search engines, etc.) - -* Deployment instructions - -* ... diff --git a/embedded_gems/pathogen/demo/app/assets/builds/tailwind.css b/embedded_gems/pathogen/demo/app/assets/builds/tailwind.css index 4fdfc02188..fea8e983b8 100644 --- a/embedded_gems/pathogen/demo/app/assets/builds/tailwind.css +++ b/embedded_gems/pathogen/demo/app/assets/builds/tailwind.css @@ -1 +1 @@ -*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.mx-auto{margin-left:auto;margin-right:auto}.mt-28{margin-top:7rem}.flex{display:flex}.h-screen{height:100vh}.w-screen{width:100vw}.p-4{padding:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem} \ No newline at end of file +*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.mx-auto{margin-left:auto;margin-right:auto}.mt-28{margin-top:7rem}.block{display:block}.flex{display:flex}.grid{display:grid}.h-screen{height:100vh}.w-screen{width:100vw}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.gap-4{gap:1rem}.p-4{padding:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem} \ No newline at end of file diff --git a/embedded_gems/pathogen/demo/bin/brakeman b/embedded_gems/pathogen/demo/bin/brakeman deleted file mode 100755 index ace1c9ba08..0000000000 --- a/embedded_gems/pathogen/demo/bin/brakeman +++ /dev/null @@ -1,7 +0,0 @@ -#!/usr/bin/env ruby -require "rubygems" -require "bundler/setup" - -ARGV.unshift("--ensure-latest") - -load Gem.bin_path("brakeman", "brakeman") diff --git a/embedded_gems/pathogen/demo/bin/docker-entrypoint b/embedded_gems/pathogen/demo/bin/docker-entrypoint deleted file mode 100755 index 840d093a9a..0000000000 --- a/embedded_gems/pathogen/demo/bin/docker-entrypoint +++ /dev/null @@ -1,13 +0,0 @@ -#!/bin/bash -e - -# Enable jemalloc for reduced memory usage and latency. -if [ -z "${LD_PRELOAD+x}" ] && [ -f /usr/lib/*/libjemalloc.so.2 ]; then - export LD_PRELOAD="$(echo /usr/lib/*/libjemalloc.so.2)" -fi - -# If running the rails server then create or migrate existing database -if [ "${1}" == "./bin/rails" ] && [ "${2}" == "server" ]; then - ./bin/rails db:prepare -fi - -exec "${@}" diff --git a/embedded_gems/pathogen/demo/test/components/previews/button_preview.rb b/embedded_gems/pathogen/demo/test/components/previews/button_preview.rb deleted file mode 100644 index 7f9d34833b..0000000000 --- a/embedded_gems/pathogen/demo/test/components/previews/button_preview.rb +++ /dev/null @@ -1,7 +0,0 @@ -# frozen_string_literal: true -class ButtonPreview < ViewComponent::Preview - # @!group Basic - - # @label Default - def default; end -end diff --git a/embedded_gems/pathogen/demo/test/components/previews/button_preview/default.html.erb b/embedded_gems/pathogen/demo/test/components/previews/button_preview/default.html.erb deleted file mode 100644 index 6bcc192e42..0000000000 --- a/embedded_gems/pathogen/demo/test/components/previews/button_preview/default.html.erb +++ /dev/null @@ -1,3 +0,0 @@ -<%= render Pathogen::Button.new do %> - Demo Button -<% end %> diff --git a/embedded_gems/pathogen/previews/pathogen/button_preview.rb b/embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview.rb similarity index 100% rename from embedded_gems/pathogen/previews/pathogen/button_preview.rb rename to embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview.rb diff --git a/embedded_gems/pathogen/previews/pathogen/button_preview/all_schemes.html.erb b/embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview/all_schemes.html.erb similarity index 100% rename from embedded_gems/pathogen/previews/pathogen/button_preview/all_schemes.html.erb rename to embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview/all_schemes.html.erb diff --git a/embedded_gems/pathogen/previews/pathogen/button_preview/leading_visual.html.erb b/embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview/leading_visual.html.erb similarity index 100% rename from embedded_gems/pathogen/previews/pathogen/button_preview/leading_visual.html.erb rename to embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview/leading_visual.html.erb diff --git a/embedded_gems/pathogen/previews/pathogen/button_preview/leading_visual_svg.html.erb b/embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview/leading_visual_svg.html.erb similarity index 100% rename from embedded_gems/pathogen/previews/pathogen/button_preview/leading_visual_svg.html.erb rename to embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview/leading_visual_svg.html.erb diff --git a/embedded_gems/pathogen/previews/pathogen/button_preview/trailing_visual.html.erb b/embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview/trailing_visual.html.erb similarity index 100% rename from embedded_gems/pathogen/previews/pathogen/button_preview/trailing_visual.html.erb rename to embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview/trailing_visual.html.erb diff --git a/embedded_gems/pathogen/previews/pathogen/button_preview/trailing_visual_svg.html.erb b/embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview/trailing_visual_svg.html.erb similarity index 100% rename from embedded_gems/pathogen/previews/pathogen/button_preview/trailing_visual_svg.html.erb rename to embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview/trailing_visual_svg.html.erb From ad55170ecf6554cb5b6447ed2de9ef63809462d5 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 27 Nov 2024 08:42:43 -0600 Subject: [PATCH 10/68] style: :lipstick: Cleaned up button styles and preview --- .../builds/pathogen_view_components.css | 200 ++++++++++++++++-- .../app/components/pathogen/button.rb | 76 ++++++- .../demo/app/assets/builds/tailwind.css | 2 +- .../button_preview/all_schemes.html.erb | 2 +- embedded_gems/pathogen/tailwind.config.js | 67 +++--- 5 files changed, 288 insertions(+), 59 deletions(-) diff --git a/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css b/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css index 3bb5611abf..9ec0fa0ea2 100644 --- a/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css +++ b/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css @@ -578,10 +578,26 @@ video { margin-right: 0.5rem; } +.ms-2 { + margin-inline-start: 0.5rem; +} + .block { display: block; } +.inline-block { + display: inline-block; +} + +.inline { + display: inline; +} + +.flex { + display: flex; +} + .inline-flex { display: inline-flex; } @@ -612,36 +628,70 @@ video { user-select: none; } +.flex-wrap { + flex-wrap: wrap; +} + .items-center { align-items: center; } +.justify-center { + justify-content: center; +} + +.rounded-full { + border-radius: 9999px; +} + .rounded-lg { border-radius: 0.5rem; } +.rounded-t-lg { + border-top-left-radius: 0.5rem; + border-top-right-radius: 0.5rem; +} + .border { border-width: 1px; } +.border-b { + border-bottom-width: 1px; +} + +.border-b-2 { + border-bottom-width: 2px; +} + .border-danger-primary { --tw-border-opacity: 1; - border-color: rgb(248 113 113 / var(--tw-border-opacity, 1)); + border-color: rgb(251 113 133 / var(--tw-border-opacity, 1)); } .border-neutral-primary { --tw-border-opacity: 1; - border-color: rgb(146 205 184 / var(--tw-border-opacity, 1)); + border-color: rgb(203 213 225 / var(--tw-border-opacity, 1)); +} + +.border-slate-200 { + --tw-border-opacity: 1; + border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); +} + +.border-transparent { + border-color: transparent; } .bg-brand-primary { --tw-bg-opacity: 1; - background-color: rgb(58 132 108 / var(--tw-bg-opacity, 1)); + background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1)); } .bg-danger-secondary { --tw-bg-opacity: 1; - background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); + background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1)); } .bg-neutral-secondary { @@ -649,15 +699,39 @@ video { background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); } +.bg-slate-100 { + --tw-bg-opacity: 1; + background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); +} + +.bg-slate-300 { + --tw-bg-opacity: 1; + background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1)); +} + .fill-current { fill: currentColor; } +.p-4 { + padding: 1rem; +} + +.px-2 { + padding-left: 0.5rem; + padding-right: 0.5rem; +} + .px-3 { padding-left: 0.75rem; padding-right: 0.75rem; } +.py-1 { + padding-top: 0.25rem; + padding-bottom: 0.25rem; +} + .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; @@ -686,9 +760,9 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity, 1)); } -.text-danger-onsecondary { +.text-danger-onprimary { --tw-text-opacity: 1; - color: rgb(153 27 27 / var(--tw-text-opacity, 1)); + color: rgb(159 18 57 / var(--tw-text-opacity, 1)); } .text-neutral-primary { @@ -696,6 +770,39 @@ video { color: rgb(30 41 59 / var(--tw-text-opacity, 1)); } +.text-slate-500 { + --tw-text-opacity: 1; + color: rgb(100 116 139 / var(--tw-text-opacity, 1)); +} + +.text-slate-800 { + --tw-text-opacity: 1; + color: rgb(30 41 59 / var(--tw-text-opacity, 1)); +} + +.underline { + text-decoration-line: underline; +} + +.filter { + filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); +} + +.hover\:border-slate-300:hover { + --tw-border-opacity: 1; + border-color: rgb(203 213 225 / var(--tw-border-opacity, 1)); +} + +.hover\:bg-slate-50:hover { + --tw-bg-opacity: 1; + background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); +} + +.hover\:text-slate-600:hover { + --tw-text-opacity: 1; + color: rgb(71 85 105 / var(--tw-text-opacity, 1)); +} + .focus\:z-10:focus { z-index: 10; } @@ -713,22 +820,32 @@ video { .enabled\:hover\:bg-brand-primary-hover:hover:enabled { --tw-bg-opacity: 1; - background-color: rgb(71 161 131 / var(--tw-bg-opacity, 1)); + background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1)); } -.enabled\:hover\:bg-danger-secondary-hover:hover:enabled { +.enabled\:hover\:bg-danger-primary-hover:hover:enabled { --tw-bg-opacity: 1; - background-color: rgb(254 202 202 / var(--tw-bg-opacity, 1)); + background-color: rgb(159 18 57 / var(--tw-bg-opacity, 1)); +} + +.enabled\:hover\:bg-neutral-primary-hover:hover:enabled { + --tw-bg-opacity: 1; + background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1)); } .enabled\:hover\:text-brand-onsecondary:hover:enabled { --tw-text-opacity: 1; - color: rgb(45 85 72 / var(--tw-text-opacity, 1)); + color: rgb(6 95 70 / var(--tw-text-opacity, 1)); +} + +.enabled\:hover\:text-danger-onprimary:hover:enabled { + --tw-text-opacity: 1; + color: rgb(159 18 57 / var(--tw-text-opacity, 1)); } -.enabled\:hover\:text-danger-onsecondary:hover:enabled { +.enabled\:hover\:text-danger-onprimary-hover:hover:enabled { --tw-text-opacity: 1; - color: rgb(153 27 27 / var(--tw-text-opacity, 1)); + color: rgb(248 250 252 / var(--tw-text-opacity, 1)); } .disabled\:cursor-not-allowed:disabled { @@ -742,27 +859,47 @@ video { @media (prefers-color-scheme: dark) { .dark\:border-danger-primary { --tw-border-opacity: 1; - border-color: rgb(248 113 113 / var(--tw-border-opacity, 1)); + border-color: rgb(251 113 133 / var(--tw-border-opacity, 1)); } .dark\:border-neutral-primary { --tw-border-opacity: 1; - border-color: rgb(146 205 184 / var(--tw-border-opacity, 1)); + border-color: rgb(203 213 225 / var(--tw-border-opacity, 1)); + } + + .dark\:border-slate-700 { + --tw-border-opacity: 1; + border-color: rgb(51 65 85 / var(--tw-border-opacity, 1)); } .dark\:bg-danger-secondary { --tw-bg-opacity: 1; - background-color: rgb(254 226 226 / var(--tw-bg-opacity, 1)); + background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1)); } .dark\:bg-neutral-primary { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); + background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); + } + + .dark\:bg-slate-500 { + --tw-bg-opacity: 1; + background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1)); + } + + .dark\:bg-slate-700 { + --tw-bg-opacity: 1; + background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1)); + } + + .dark\:bg-slate-800 { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); } .dark\:text-danger-onsecondary { --tw-text-opacity: 1; - color: rgb(153 27 27 / var(--tw-text-opacity, 1)); + color: rgb(159 18 57 / var(--tw-text-opacity, 1)); } .dark\:text-neutral-secondary { @@ -770,9 +907,34 @@ video { color: rgb(100 116 139 / var(--tw-text-opacity, 1)); } + .dark\:text-slate-300 { + --tw-text-opacity: 1; + color: rgb(203 213 225 / var(--tw-text-opacity, 1)); + } + + .dark\:text-slate-400 { + --tw-text-opacity: 1; + color: rgb(148 163 184 / var(--tw-text-opacity, 1)); + } + + .dark\:hover\:bg-slate-800:hover { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); + } + + .dark\:hover\:text-slate-300:hover { + --tw-text-opacity: 1; + color: rgb(203 213 225 / var(--tw-text-opacity, 1)); + } + + .dark\:enabled\:hover\:bg-neutral-primary-hover:hover:enabled { + --tw-bg-opacity: 1; + background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1)); + } + .enabled\:dark\:hover\:bg-neutral-primary:hover:enabled { --tw-bg-opacity: 1; - background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1)); + background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); } .enabled\:dark\:hover\:text-brand-onprimary:hover:enabled { @@ -782,6 +944,6 @@ video { .enabled\:dark\:hover\:text-danger-onsecondary:hover:enabled { --tw-text-opacity: 1; - color: rgb(153 27 27 / var(--tw-text-opacity, 1)); + color: rgb(159 18 57 / var(--tw-text-opacity, 1)); } } diff --git a/embedded_gems/pathogen/app/components/pathogen/button.rb b/embedded_gems/pathogen/app/components/pathogen/button.rb index 33f102c6b4..845f5fd417 100644 --- a/embedded_gems/pathogen/app/components/pathogen/button.rb +++ b/embedded_gems/pathogen/app/components/pathogen/button.rb @@ -16,6 +16,64 @@ class Button < Pathogen::Component DEFAULT_CLASSES = 'relative pointer select-none rounded-lg font-medium focus:outline-none focus:ring-4 focus:z-10 disabled:opacity-70 disabled:cursor-not-allowed' # rubocop:enable Layout/LineLength + # CSS classes for different button schemes + PRIMARY_SCHEME_CLASSES = [ + 'bg-brand-primary', + 'text-brand-onprimary', + 'enabled:hover:bg-brand-primary-hover', + 'focus:ring-brand-primary-100' + ].freeze + + PRIMARY_DARK_SCHEME_CLASSES = [ + 'dark:focus:ring-brand-primary-600', + 'dark:focus:ring-neutral-primary', + 'dark:bg-neutral-primary', + 'dark:text-neutral-secondary', + 'dark:border-neutral-primary', + 'enabled:dark:hover:text-brand-onprimary', + 'enabled:dark:hover:bg-neutral-primary', + 'dark:enabled:hover:bg-neutral-primary-hover' + ].freeze + + DEFAULT_SCHEME_CLASSES = [ + 'text-neutral-primary', + 'bg-neutral-secondary', + 'border', + 'border-neutral-primary', + 'enabled:hover:bg-neutral-primary-hover', + 'enabled:hover:text-brand-onsecondary', + 'focus:ring-4', + 'focus:ring-neutral-primary' + ].freeze + + DEFAULT_DARK_SCHEME_CLASSES = [ + 'dark:focus:ring-neutral-primary', + 'dark:bg-neutral-primary', + 'dark:text-neutral-secondary', + 'dark:border-neutral-primary', + 'enabled:dark:hover:text-brand-onprimary', + 'enabled:dark:hover:bg-neutral-primary', + 'dark:enabled:hover:bg-neutral-primary-hover' + ].freeze + + DANGER_SCHEME_CLASSES = [ + 'border', + 'border-danger-primary', + 'bg-danger-secondary', + 'text-danger-onprimary', + 'enabled:hover:text-danger-onprimary-hover', + 'enabled:hover:bg-danger-primary-hover', + 'focus:ring-danger-primary-100' + ].freeze + + DANGER_DARK_SCHEME_CLASSES = [ + 'dark:border-danger-primary', + 'dark:bg-danger-secondary', + 'dark:text-danger-onsecondary', + 'dark:focus:ring-danger-primary-900', + 'enabled:dark:hover:text-danger-onsecondary' + ].freeze + # rubocop:disable Metrics/ParameterLists def initialize(base_button_class: Pathogen::BaseButton, scheme: DEFAULT_SCHEME, size: DEFAULT_SIZE, block: false, disabled: false, **system_arguments) @@ -72,13 +130,17 @@ def trimmed_content # @param scheme [Symbol] The color scheme of the button (:primary, :default, or :danger). # @return [String] A string of CSS classes corresponding to the specified scheme. def generate_scheme_mapping(scheme) - # rubocop:disable Layout/LineLength - { - primary: 'bg-brand-primary text-brand-onprimary enabled:hover:bg-brand-primary-hover focus:ring-brand-primary-100 dark:focus:ring-brand-primary-600', - default: 'text-neutral-primary bg-neutral-secondary border border-neutral-primary enabled:hover:bg-neutral-secondary-hover enabled:hover:text-brand-onsecondary focus:ring-4 focus:ring-neutral-primary dark:focus:ring-neutral-primary dark:bg-neutral-primary dark:text-neutral-secondary dark:border-neutral-primary enabled:dark:hover:text-brand-onprimary enabled:dark:hover:bg-neutral-primary dark:enabled:hover:bg-neutral-primary-hover', - danger: 'border border-danger-primary bg-danger-secondary text-danger-onsecondary enabled:hover:text-danger-onsecondary enabled:dark:hover:text-danger-onsecondary enabled:hover:bg-danger-secondary-hover focus:ring-danger-primary-100 dark:border-danger-primary dark:bg-danger-secondary dark:text-danger-onsecondary dark:focus:ring-danger-primary-900' - }[scheme] - # rubocop:enable Layout/LineLength + case scheme + when :primary + (PRIMARY_SCHEME_CLASSES + PRIMARY_DARK_SCHEME_CLASSES).join(' ') + when :default + (DEFAULT_SCHEME_CLASSES + DEFAULT_DARK_SCHEME_CLASSES).join(' ') + when :danger + (DANGER_SCHEME_CLASSES + DANGER_DARK_SCHEME_CLASSES).join(' ') + else + # Default case for other schemes or fallback + '' + end end end end diff --git a/embedded_gems/pathogen/demo/app/assets/builds/tailwind.css b/embedded_gems/pathogen/demo/app/assets/builds/tailwind.css index fea8e983b8..395f7d830f 100644 --- a/embedded_gems/pathogen/demo/app/assets/builds/tailwind.css +++ b/embedded_gems/pathogen/demo/app/assets/builds/tailwind.css @@ -1 +1 @@ -*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.mx-auto{margin-left:auto;margin-right:auto}.mt-28{margin-top:7rem}.block{display:block}.flex{display:flex}.grid{display:grid}.h-screen{height:100vh}.w-screen{width:100vw}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.gap-4{gap:1rem}.p-4{padding:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem} \ No newline at end of file +*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.mx-auto{margin-left:auto;margin-right:auto}.mt-28{margin-top:7rem}.block{display:block}.flex{display:flex}.grid{display:grid}.h-screen{height:100vh}.w-screen{width:100vw}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.gap-4{gap:1rem}.gap-1{gap:.25rem}.p-4{padding:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem} \ No newline at end of file diff --git a/embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview/all_schemes.html.erb b/embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview/all_schemes.html.erb index d24e1354d7..b3620f10a4 100644 --- a/embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview/all_schemes.html.erb +++ b/embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview/all_schemes.html.erb @@ -1,4 +1,4 @@ -
+
<%= render Pathogen::Button.new(scheme: :default) do %> Button <% end %> diff --git a/embedded_gems/pathogen/tailwind.config.js b/embedded_gems/pathogen/tailwind.config.js index 37c2c71661..46fa52b55d 100644 --- a/embedded_gems/pathogen/tailwind.config.js +++ b/embedded_gems/pathogen/tailwind.config.js @@ -1,34 +1,9 @@ const colors = require("tailwindcss/colors"); const globalColors = { - brand: { - 50: "#f0f9f5", - 100: "#dcf1e7", - 200: "#bce3d3", - 300: "#92cdb8", - 400: "#68b79c", - 500: "#47a183", - 600: "#3a846c", - 700: "#336b59", - 800: "#2d5548", - 900: "#26463c", - 950: "#1a2d27", - }, + brand: colors.emerald, neutral: colors.slate, - danger: { - 50: "#fef2f2", - 100: "#fee2e2", - 200: "#fecaca", - 300: "#fca5a5", - 400: "#f87171", - 500: "#ef4444", - 600: "#dc2626", - 700: "#b91c1c", - 800: "#991b1b", - 900: "#7f1d1d", - 950: "#450a0a", - }, - error: colors.red, + danger: colors.rose, success: colors.green, warning: colors.amber, }; @@ -45,31 +20,61 @@ module.exports = { extend: { colors: globalColors, backgroundColor: { + // Light mode "brand-primary": globalColors.brand[600], "brand-primary-hover": globalColors.brand[500], "brand-secondary": globalColors.brand[100], "brand-secondary-hover": globalColors.brand[200], - "neutral-primary": colors.white, + "neutral-primary": globalColors.neutral[100], + "neutral-primary-hover": globalColors.neutral[200], "neutral-secondary": globalColors.neutral[50], "danger-primary": globalColors.danger[600], - "danger-primary-hover": globalColors.danger[500], + "danger-primary-hover": globalColors.danger[800], "danger-secondary": globalColors.danger[100], "danger-secondary-hover": globalColors.danger[200], + // Dark mode + "dark:brand-primary": globalColors.brand[500], + "dark:brand-primary-hover": globalColors.brand[400], + "dark:brand-secondary": globalColors.brand[900], + "dark:brand-secondary-hover": globalColors.brand[800], + "dark:neutral-primary": globalColors.neutral[800], + "dark:neutral-primary-hover": globalColors.neutral[700], + "dark:neutral-secondary": globalColors.neutral[900], + "dark:danger-primary": globalColors.danger[500], + "dark:danger-primary-hover": globalColors.danger[400], + "dark:danger-secondary": globalColors.danger[900], + "dark:danger-secondary-hover": globalColors.danger[800], }, borderColor: { + // Light mode "brand-primary": globalColors.brand[400], - "neutral-primary": globalColors.brand[300], + "neutral-primary": globalColors.neutral[300], "danger-primary": globalColors.danger[400], "danger-secondary": globalColors.danger[300], + // Dark mode + "dark:brand-primary": globalColors.brand[300], + "dark:neutral-primary": globalColors.brand[200], + "dark:danger-primary": globalColors.danger[300], + "dark:danger-secondary": globalColors.danger[200], }, textColor: { + // Light mode "brand-onprimary": colors.white, "brand-onsecondary": globalColors.brand[800], "neutral-primary": globalColors.neutral[800], "neutral-secondary": globalColors.neutral[500], "neutral-emphasis": globalColors.neutral[900], - "danger-onprimary": colors.white, + "danger-onprimary": globalColors.danger[800], + "danger-onprimary-hover": globalColors.neutral[50], "danger-onsecondary": globalColors.danger[800], + // Dark mode + "dark:brand-onprimary": colors.white, + "dark:brand-onsecondary": globalColors.brand[200], + "dark:neutral-primary": globalColors.neutral[200], + "dark:neutral-secondary": globalColors.neutral[400], + "dark:neutral-emphasis": globalColors.neutral[100], + "dark:danger-onprimary": colors.white, + "dark:danger-onsecondary": globalColors.danger[200], }, }, }, From c5ae86a415ffb1b015becf8868a333e0229c7570 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 27 Nov 2024 14:43:56 -0600 Subject: [PATCH 11/68] style: :lipstick: Set tailwind darkmode to use class --- embedded_gems/pathogen/demo/config/tailwind.config.js | 1 + embedded_gems/pathogen/tailwind.config.js | 1 + 2 files changed, 2 insertions(+) diff --git a/embedded_gems/pathogen/demo/config/tailwind.config.js b/embedded_gems/pathogen/demo/config/tailwind.config.js index 2ac6ac6cd2..cbf225963f 100644 --- a/embedded_gems/pathogen/demo/config/tailwind.config.js +++ b/embedded_gems/pathogen/demo/config/tailwind.config.js @@ -1,4 +1,5 @@ module.exports = { + darkMode: "class", content: [ "./app/helpers/**/*.rb", "./app/javascript/**/*.js", diff --git a/embedded_gems/pathogen/tailwind.config.js b/embedded_gems/pathogen/tailwind.config.js index 46fa52b55d..75ce5a48af 100644 --- a/embedded_gems/pathogen/tailwind.config.js +++ b/embedded_gems/pathogen/tailwind.config.js @@ -10,6 +10,7 @@ const globalColors = { /** @type {import('tailwindcss').Config} */ module.exports = { + darkMode: "class", content: [ "./app/components/**/*.erb", "./app/components/**/*.html", From 3f45bbfe480d78356854dc695165dbde1796339e Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 27 Nov 2024 14:53:01 -0600 Subject: [PATCH 12/68] style: :lipstick: Cleaning up lookbook preview for dark --- .../builds/pathogen_view_components.css | 183 +++++++++--------- .../demo/app/assets/builds/tailwind.css | 2 +- .../views/layouts/component_preview.html.erb | 4 +- .../pathogen/demo/config/application.rb | 3 + 4 files changed, 94 insertions(+), 98 deletions(-) diff --git a/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css b/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css index 9ec0fa0ea2..12b472af58 100644 --- a/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css +++ b/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css @@ -838,11 +838,6 @@ video { color: rgb(6 95 70 / var(--tw-text-opacity, 1)); } -.enabled\:hover\:text-danger-onprimary:hover:enabled { - --tw-text-opacity: 1; - color: rgb(159 18 57 / var(--tw-text-opacity, 1)); -} - .enabled\:hover\:text-danger-onprimary-hover:hover:enabled { --tw-text-opacity: 1; color: rgb(248 250 252 / var(--tw-text-opacity, 1)); @@ -856,94 +851,92 @@ video { opacity: 0.7; } -@media (prefers-color-scheme: dark) { - .dark\:border-danger-primary { - --tw-border-opacity: 1; - border-color: rgb(251 113 133 / var(--tw-border-opacity, 1)); - } - - .dark\:border-neutral-primary { - --tw-border-opacity: 1; - border-color: rgb(203 213 225 / var(--tw-border-opacity, 1)); - } - - .dark\:border-slate-700 { - --tw-border-opacity: 1; - border-color: rgb(51 65 85 / var(--tw-border-opacity, 1)); - } - - .dark\:bg-danger-secondary { - --tw-bg-opacity: 1; - background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1)); - } - - .dark\:bg-neutral-primary { - --tw-bg-opacity: 1; - background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); - } - - .dark\:bg-slate-500 { - --tw-bg-opacity: 1; - background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1)); - } - - .dark\:bg-slate-700 { - --tw-bg-opacity: 1; - background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1)); - } - - .dark\:bg-slate-800 { - --tw-bg-opacity: 1; - background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); - } - - .dark\:text-danger-onsecondary { - --tw-text-opacity: 1; - color: rgb(159 18 57 / var(--tw-text-opacity, 1)); - } - - .dark\:text-neutral-secondary { - --tw-text-opacity: 1; - color: rgb(100 116 139 / var(--tw-text-opacity, 1)); - } - - .dark\:text-slate-300 { - --tw-text-opacity: 1; - color: rgb(203 213 225 / var(--tw-text-opacity, 1)); - } - - .dark\:text-slate-400 { - --tw-text-opacity: 1; - color: rgb(148 163 184 / var(--tw-text-opacity, 1)); - } - - .dark\:hover\:bg-slate-800:hover { - --tw-bg-opacity: 1; - background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); - } - - .dark\:hover\:text-slate-300:hover { - --tw-text-opacity: 1; - color: rgb(203 213 225 / var(--tw-text-opacity, 1)); - } - - .dark\:enabled\:hover\:bg-neutral-primary-hover:hover:enabled { - --tw-bg-opacity: 1; - background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1)); - } - - .enabled\:dark\:hover\:bg-neutral-primary:hover:enabled { - --tw-bg-opacity: 1; - background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); - } - - .enabled\:dark\:hover\:text-brand-onprimary:hover:enabled { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity, 1)); - } - - .enabled\:dark\:hover\:text-danger-onsecondary:hover:enabled { - --tw-text-opacity: 1; - color: rgb(159 18 57 / var(--tw-text-opacity, 1)); - } +.dark\:border-danger-primary:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(251 113 133 / var(--tw-border-opacity, 1)); +} + +.dark\:border-neutral-primary:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(203 213 225 / var(--tw-border-opacity, 1)); +} + +.dark\:border-slate-700:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(51 65 85 / var(--tw-border-opacity, 1)); +} + +.dark\:bg-danger-secondary:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-neutral-primary:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-slate-500:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-slate-700:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1)); +} + +.dark\:bg-slate-800:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); +} + +.dark\:text-danger-onsecondary:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(159 18 57 / var(--tw-text-opacity, 1)); +} + +.dark\:text-neutral-secondary:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(100 116 139 / var(--tw-text-opacity, 1)); +} + +.dark\:text-slate-300:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(203 213 225 / var(--tw-text-opacity, 1)); +} + +.dark\:text-slate-400:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(148 163 184 / var(--tw-text-opacity, 1)); +} + +.dark\:hover\:bg-slate-800:hover:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); +} + +.dark\:hover\:text-slate-300:hover:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(203 213 225 / var(--tw-text-opacity, 1)); +} + +.dark\:enabled\:hover\:bg-neutral-primary-hover:hover:enabled:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1)); +} + +.enabled\:dark\:hover\:bg-neutral-primary:hover:is(.dark *):enabled { + --tw-bg-opacity: 1; + background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); +} + +.enabled\:dark\:hover\:text-brand-onprimary:hover:is(.dark *):enabled { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +} + +.enabled\:dark\:hover\:text-danger-onsecondary:hover:is(.dark *):enabled { + --tw-text-opacity: 1; + color: rgb(159 18 57 / var(--tw-text-opacity, 1)); } diff --git a/embedded_gems/pathogen/demo/app/assets/builds/tailwind.css b/embedded_gems/pathogen/demo/app/assets/builds/tailwind.css index 395f7d830f..54abaeb2b1 100644 --- a/embedded_gems/pathogen/demo/app/assets/builds/tailwind.css +++ b/embedded_gems/pathogen/demo/app/assets/builds/tailwind.css @@ -1 +1 @@ -*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.mx-auto{margin-left:auto;margin-right:auto}.mt-28{margin-top:7rem}.block{display:block}.flex{display:flex}.grid{display:grid}.h-screen{height:100vh}.w-screen{width:100vw}.grid-cols-3{grid-template-columns:repeat(3,minmax(0,1fr))}.gap-4{gap:1rem}.gap-1{gap:.25rem}.p-4{padding:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem} \ No newline at end of file +*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.mx-auto{margin-left:auto;margin-right:auto}.mt-28{margin-top:7rem}.block{display:block}.flex{display:flex}.h-screen{height:100vh}.w-screen{width:100vw}.gap-1{gap:.25rem}.p-4{padding:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.dark\:bg-slate-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))} \ No newline at end of file diff --git a/embedded_gems/pathogen/demo/app/views/layouts/component_preview.html.erb b/embedded_gems/pathogen/demo/app/views/layouts/component_preview.html.erb index 9d50162265..109186c321 100644 --- a/embedded_gems/pathogen/demo/app/views/layouts/component_preview.html.erb +++ b/embedded_gems/pathogen/demo/app/views/layouts/component_preview.html.erb @@ -1,6 +1,6 @@ + class="<%= params.has_key?(:lookbook) ? params[:lookbook][:display][:theme] : 'light' %>" > Component Preview @@ -20,7 +20,7 @@ <% end %> - +
<% if params.dig(:lookbook, :display, :theme) == "all" || params.dig(:theme) == "all" %>
diff --git a/embedded_gems/pathogen/demo/config/application.rb b/embedded_gems/pathogen/demo/config/application.rb index 1cf02027f5..85156d62fe 100644 --- a/embedded_gems/pathogen/demo/config/application.rb +++ b/embedded_gems/pathogen/demo/config/application.rb @@ -50,5 +50,8 @@ class Application < Rails::Application config.lookbook.project_name = "Pathogen ViewComponents v#{Pathogen::ViewComponents::VERSION::STRING}" config.lookbook.component_paths = [Pathogen::ViewComponents::Engine.root.join("app", "components")] + config.lookbook.preview_display_options = { + theme: ["light", "dark"], # dynamic 'theme' display option + } end end From 2d23fb97e4c68a97015e3e8aa81a616ed84a0f48 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 27 Nov 2024 16:10:23 -0600 Subject: [PATCH 13/68] style: :lipstick: Updated button styles for light and dark and added semantic tailwind colour names --- .../builds/pathogen_view_components.css | 172 ++++++++++-------- .../app/components/pathogen/button.rb | 65 +++---- embedded_gems/pathogen/tailwind.config.js | 110 ++++++----- 3 files changed, 189 insertions(+), 158 deletions(-) diff --git a/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css b/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css index 12b472af58..bc706bb1c3 100644 --- a/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css +++ b/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css @@ -107,7 +107,7 @@ } /* -! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com +! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com */ /* @@ -550,7 +550,7 @@ video { /* Make elements with the HTML hidden attribute stay hidden by default */ -[hidden]:where(:not([hidden="until-found"])) { +[hidden] { display: none; } @@ -665,48 +665,53 @@ video { border-bottom-width: 2px; } -.border-danger-primary { +.border-light-brand-primary { --tw-border-opacity: 1; - border-color: rgb(251 113 133 / var(--tw-border-opacity, 1)); + border-color: rgb(5 150 105 / var(--tw-border-opacity)); } -.border-neutral-primary { +.border-light-danger-primary { --tw-border-opacity: 1; - border-color: rgb(203 213 225 / var(--tw-border-opacity, 1)); + border-color: rgb(251 113 133 / var(--tw-border-opacity)); +} + +.border-light-neutral-primary { + --tw-border-opacity: 1; + border-color: rgb(148 163 184 / var(--tw-border-opacity)); } .border-slate-200 { --tw-border-opacity: 1; - border-color: rgb(226 232 240 / var(--tw-border-opacity, 1)); + border-color: rgb(226 232 240 / var(--tw-border-opacity)); } .border-transparent { border-color: transparent; } -.bg-brand-primary { +.bg-light-brand-primary { --tw-bg-opacity: 1; - background-color: rgb(5 150 105 / var(--tw-bg-opacity, 1)); + background-color: rgb(5 150 105 / var(--tw-bg-opacity)); } -.bg-danger-secondary { +.bg-light-danger-primary { --tw-bg-opacity: 1; - background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1)); + background-color: rgb(225 29 72 / var(--tw-bg-opacity)); } -.bg-neutral-secondary { +.bg-light-neutral-primary { --tw-bg-opacity: 1; - background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); + background-color: rgb(241 245 249 / var(--tw-bg-opacity)); } .bg-slate-100 { --tw-bg-opacity: 1; - background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); + background-color: rgb(241 245 249 / var(--tw-bg-opacity)); } .bg-slate-300 { --tw-bg-opacity: 1; - background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1)); + background-color: rgb(203 213 225 / var(--tw-bg-opacity)); } .fill-current { @@ -755,29 +760,29 @@ video { font-weight: 500; } -.text-brand-onprimary { +.text-light-brand-onprimary { --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity, 1)); + color: rgb(255 255 255 / var(--tw-text-opacity)); } -.text-danger-onprimary { +.text-light-danger-onprimary { --tw-text-opacity: 1; - color: rgb(159 18 57 / var(--tw-text-opacity, 1)); + color: rgb(255 255 255 / var(--tw-text-opacity)); } -.text-neutral-primary { +.text-light-neutral-primary { --tw-text-opacity: 1; - color: rgb(30 41 59 / var(--tw-text-opacity, 1)); + color: rgb(30 41 59 / var(--tw-text-opacity)); } .text-slate-500 { --tw-text-opacity: 1; - color: rgb(100 116 139 / var(--tw-text-opacity, 1)); + color: rgb(100 116 139 / var(--tw-text-opacity)); } .text-slate-800 { --tw-text-opacity: 1; - color: rgb(30 41 59 / var(--tw-text-opacity, 1)); + color: rgb(30 41 59 / var(--tw-text-opacity)); } .underline { @@ -790,17 +795,17 @@ video { .hover\:border-slate-300:hover { --tw-border-opacity: 1; - border-color: rgb(203 213 225 / var(--tw-border-opacity, 1)); + border-color: rgb(203 213 225 / var(--tw-border-opacity)); } .hover\:bg-slate-50:hover { --tw-bg-opacity: 1; - background-color: rgb(248 250 252 / var(--tw-bg-opacity, 1)); + background-color: rgb(248 250 252 / var(--tw-bg-opacity)); } .hover\:text-slate-600:hover { --tw-text-opacity: 1; - color: rgb(71 85 105 / var(--tw-text-opacity, 1)); + color: rgb(71 85 105 / var(--tw-text-opacity)); } .focus\:z-10:focus { @@ -818,29 +823,34 @@ video { box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); } -.enabled\:hover\:bg-brand-primary-hover:hover:enabled { - --tw-bg-opacity: 1; - background-color: rgb(16 185 129 / var(--tw-bg-opacity, 1)); +.focus\:ring-light-brand-primary:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(209 250 229 / var(--tw-ring-opacity)); } -.enabled\:hover\:bg-danger-primary-hover:hover:enabled { - --tw-bg-opacity: 1; - background-color: rgb(159 18 57 / var(--tw-bg-opacity, 1)); +.focus\:ring-light-danger-primary:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(255 228 230 / var(--tw-ring-opacity)); +} + +.focus\:ring-light-neutral-primary:focus { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(241 245 249 / var(--tw-ring-opacity)); } -.enabled\:hover\:bg-neutral-primary-hover:hover:enabled { +.enabled\:hover\:bg-light-brand-primary-hover:hover:enabled { --tw-bg-opacity: 1; - background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1)); + background-color: rgb(16 185 129 / var(--tw-bg-opacity)); } -.enabled\:hover\:text-brand-onsecondary:hover:enabled { - --tw-text-opacity: 1; - color: rgb(6 95 70 / var(--tw-text-opacity, 1)); +.enabled\:hover\:bg-light-danger-primary-hover:hover:enabled { + --tw-bg-opacity: 1; + background-color: rgb(159 18 57 / var(--tw-bg-opacity)); } -.enabled\:hover\:text-danger-onprimary-hover:hover:enabled { - --tw-text-opacity: 1; - color: rgb(248 250 252 / var(--tw-text-opacity, 1)); +.enabled\:hover\:bg-light-neutral-primary-hover:hover:enabled { + --tw-bg-opacity: 1; + background-color: rgb(226 232 240 / var(--tw-bg-opacity)); } .disabled\:cursor-not-allowed:disabled { @@ -851,92 +861,102 @@ video { opacity: 0.7; } -.dark\:border-danger-primary:is(.dark *) { - --tw-border-opacity: 1; - border-color: rgb(251 113 133 / var(--tw-border-opacity, 1)); -} - -.dark\:border-neutral-primary:is(.dark *) { +.dark\:border-slate-700:is(.dark *) { --tw-border-opacity: 1; - border-color: rgb(203 213 225 / var(--tw-border-opacity, 1)); + border-color: rgb(51 65 85 / var(--tw-border-opacity)); } -.dark\:border-slate-700:is(.dark *) { - --tw-border-opacity: 1; - border-color: rgb(51 65 85 / var(--tw-border-opacity, 1)); +.dark\:bg-dark-brand-primary:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(4 120 87 / var(--tw-bg-opacity)); } -.dark\:bg-danger-secondary:is(.dark *) { +.dark\:bg-dark-danger-primary:is(.dark *) { --tw-bg-opacity: 1; - background-color: rgb(255 228 230 / var(--tw-bg-opacity, 1)); + background-color: rgb(225 29 72 / var(--tw-bg-opacity)); } -.dark\:bg-neutral-primary:is(.dark *) { +.dark\:bg-dark-neutral-primary:is(.dark *) { --tw-bg-opacity: 1; - background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); + background-color: rgb(30 41 59 / var(--tw-bg-opacity)); } .dark\:bg-slate-500:is(.dark *) { --tw-bg-opacity: 1; - background-color: rgb(100 116 139 / var(--tw-bg-opacity, 1)); + background-color: rgb(100 116 139 / var(--tw-bg-opacity)); } .dark\:bg-slate-700:is(.dark *) { --tw-bg-opacity: 1; - background-color: rgb(51 65 85 / var(--tw-bg-opacity, 1)); + background-color: rgb(51 65 85 / var(--tw-bg-opacity)); } .dark\:bg-slate-800:is(.dark *) { --tw-bg-opacity: 1; - background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); + background-color: rgb(30 41 59 / var(--tw-bg-opacity)); +} + +.dark\:text-dark-brand-onprimary:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); } -.dark\:text-danger-onsecondary:is(.dark *) { +.dark\:text-dark-danger-onprimary:is(.dark *) { --tw-text-opacity: 1; - color: rgb(159 18 57 / var(--tw-text-opacity, 1)); + color: rgb(255 255 255 / var(--tw-text-opacity)); } -.dark\:text-neutral-secondary:is(.dark *) { +.dark\:text-dark-neutral-primary:is(.dark *) { --tw-text-opacity: 1; - color: rgb(100 116 139 / var(--tw-text-opacity, 1)); + color: rgb(203 213 225 / var(--tw-text-opacity)); } .dark\:text-slate-300:is(.dark *) { --tw-text-opacity: 1; - color: rgb(203 213 225 / var(--tw-text-opacity, 1)); + color: rgb(203 213 225 / var(--tw-text-opacity)); } .dark\:text-slate-400:is(.dark *) { --tw-text-opacity: 1; - color: rgb(148 163 184 / var(--tw-text-opacity, 1)); + color: rgb(148 163 184 / var(--tw-text-opacity)); } .dark\:hover\:bg-slate-800:hover:is(.dark *) { --tw-bg-opacity: 1; - background-color: rgb(30 41 59 / var(--tw-bg-opacity, 1)); + background-color: rgb(30 41 59 / var(--tw-bg-opacity)); } .dark\:hover\:text-slate-300:hover:is(.dark *) { --tw-text-opacity: 1; - color: rgb(203 213 225 / var(--tw-text-opacity, 1)); + color: rgb(203 213 225 / var(--tw-text-opacity)); } -.dark\:enabled\:hover\:bg-neutral-primary-hover:hover:enabled:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1)); +.dark\:focus\:ring-dark-brand-primary:focus:is(.dark *) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(6 95 70 / var(--tw-ring-opacity)); } -.enabled\:dark\:hover\:bg-neutral-primary:hover:is(.dark *):enabled { +.dark\:focus\:ring-dark-danger-primary:focus:is(.dark *) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(225 29 72 / var(--tw-ring-opacity)); +} + +.dark\:focus\:ring-dark-neutral-primary:focus:is(.dark *) { + --tw-ring-opacity: 1; + --tw-ring-color: rgb(71 85 105 / var(--tw-ring-opacity)); +} + +.dark\:enabled\:hover\:bg-dark-brand-primary-hover:hover:enabled:is(.dark *) { --tw-bg-opacity: 1; - background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1)); + background-color: rgb(6 95 70 / var(--tw-bg-opacity)); } -.enabled\:dark\:hover\:text-brand-onprimary:hover:is(.dark *):enabled { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity, 1)); +.dark\:enabled\:hover\:bg-dark-danger-primary-hover:hover:enabled:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(190 18 60 / var(--tw-bg-opacity)); } -.enabled\:dark\:hover\:text-danger-onsecondary:hover:is(.dark *):enabled { - --tw-text-opacity: 1; - color: rgb(159 18 57 / var(--tw-text-opacity, 1)); +.dark\:enabled\:hover\:bg-dark-neutral-primary-hover:hover:enabled:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(51 65 85 / var(--tw-bg-opacity)); } diff --git a/embedded_gems/pathogen/app/components/pathogen/button.rb b/embedded_gems/pathogen/app/components/pathogen/button.rb index 845f5fd417..bad55b44e4 100644 --- a/embedded_gems/pathogen/app/components/pathogen/button.rb +++ b/embedded_gems/pathogen/app/components/pathogen/button.rb @@ -18,60 +18,51 @@ class Button < Pathogen::Component # CSS classes for different button schemes PRIMARY_SCHEME_CLASSES = [ - 'bg-brand-primary', - 'text-brand-onprimary', - 'enabled:hover:bg-brand-primary-hover', - 'focus:ring-brand-primary-100' + 'bg-light-brand-primary', + 'text-light-brand-onprimary', + 'border', + 'border-light-brand-primary', + 'enabled:hover:bg-light-brand-primary-hover', + 'focus:ring-light-brand-primary' ].freeze PRIMARY_DARK_SCHEME_CLASSES = [ - 'dark:focus:ring-brand-primary-600', - 'dark:focus:ring-neutral-primary', - 'dark:bg-neutral-primary', - 'dark:text-neutral-secondary', - 'dark:border-neutral-primary', - 'enabled:dark:hover:text-brand-onprimary', - 'enabled:dark:hover:bg-neutral-primary', - 'dark:enabled:hover:bg-neutral-primary-hover' + 'dark:bg-dark-brand-primary', + 'dark:text-dark-brand-onprimary', + 'dark:enabled:hover:bg-dark-brand-primary-hover', + 'dark:focus:ring-dark-brand-primary' ].freeze DEFAULT_SCHEME_CLASSES = [ - 'text-neutral-primary', - 'bg-neutral-secondary', + 'bg-light-neutral-primary', + 'text-light-neutral-primary', 'border', - 'border-neutral-primary', - 'enabled:hover:bg-neutral-primary-hover', - 'enabled:hover:text-brand-onsecondary', - 'focus:ring-4', - 'focus:ring-neutral-primary' + 'border-light-neutral-primary', + 'enabled:hover:bg-light-neutral-primary-hover', + 'focus:ring-light-neutral-primary' ].freeze DEFAULT_DARK_SCHEME_CLASSES = [ - 'dark:focus:ring-neutral-primary', - 'dark:bg-neutral-primary', - 'dark:text-neutral-secondary', - 'dark:border-neutral-primary', - 'enabled:dark:hover:text-brand-onprimary', - 'enabled:dark:hover:bg-neutral-primary', - 'dark:enabled:hover:bg-neutral-primary-hover' + 'dark:bg-dark-neutral-primary', + 'dark:text-dark-neutral-primary', + 'dark:enabled:hover:bg-dark-neutral-primary-hover', + 'dark:focus:ring-dark-neutral-primary' ].freeze DANGER_SCHEME_CLASSES = [ + 'bg-light-danger-primary', + 'text-light-danger-onprimary', 'border', - 'border-danger-primary', - 'bg-danger-secondary', - 'text-danger-onprimary', - 'enabled:hover:text-danger-onprimary-hover', - 'enabled:hover:bg-danger-primary-hover', - 'focus:ring-danger-primary-100' + 'border-light-danger-primary', + 'enabled:hover:bg-light-danger-primary-hover', + 'focus:ring-light-danger-primary' ].freeze DANGER_DARK_SCHEME_CLASSES = [ - 'dark:border-danger-primary', - 'dark:bg-danger-secondary', - 'dark:text-danger-onsecondary', - 'dark:focus:ring-danger-primary-900', - 'enabled:dark:hover:text-danger-onsecondary' + 'dark:bg-dark-danger-primary', + 'dark:text-dark-danger-onprimary', + 'dark:enabled:hover:bg-dark-danger-primary-hover', + 'dark:focus:ring-dark-danger-primary' ].freeze # rubocop:disable Metrics/ParameterLists diff --git a/embedded_gems/pathogen/tailwind.config.js b/embedded_gems/pathogen/tailwind.config.js index 75ce5a48af..22ed76788d 100644 --- a/embedded_gems/pathogen/tailwind.config.js +++ b/embedded_gems/pathogen/tailwind.config.js @@ -1,5 +1,10 @@ const colors = require("tailwindcss/colors"); +/* +Colors naming convention: [light|dark]-[role]-[primary|secondary]-[interaction] +e.g. hover:dark-brand-primary-hover +*/ + const globalColors = { brand: colors.emerald, neutral: colors.slate, @@ -22,60 +27,75 @@ module.exports = { colors: globalColors, backgroundColor: { // Light mode - "brand-primary": globalColors.brand[600], - "brand-primary-hover": globalColors.brand[500], - "brand-secondary": globalColors.brand[100], - "brand-secondary-hover": globalColors.brand[200], - "neutral-primary": globalColors.neutral[100], - "neutral-primary-hover": globalColors.neutral[200], - "neutral-secondary": globalColors.neutral[50], - "danger-primary": globalColors.danger[600], - "danger-primary-hover": globalColors.danger[800], - "danger-secondary": globalColors.danger[100], - "danger-secondary-hover": globalColors.danger[200], + "light-brand-primary": globalColors.brand[600], + "light-brand-primary-hover": globalColors.brand[500], + "light-brand-secondary": globalColors.brand[100], + "light-brand-secondary-hover": globalColors.brand[200], + "light-neutral-primary": globalColors.neutral[100], + "light-neutral-primary-hover": globalColors.neutral[200], + "light-neutral-secondary": globalColors.neutral[50], + "light-danger-primary": globalColors.danger[600], + "light-danger-primary-hover": globalColors.danger[800], + "light-danger-secondary": globalColors.danger[100], + "light-danger-secondary-hover": globalColors.danger[200], + // Dark mode - "dark:brand-primary": globalColors.brand[500], - "dark:brand-primary-hover": globalColors.brand[400], - "dark:brand-secondary": globalColors.brand[900], - "dark:brand-secondary-hover": globalColors.brand[800], - "dark:neutral-primary": globalColors.neutral[800], - "dark:neutral-primary-hover": globalColors.neutral[700], - "dark:neutral-secondary": globalColors.neutral[900], - "dark:danger-primary": globalColors.danger[500], - "dark:danger-primary-hover": globalColors.danger[400], - "dark:danger-secondary": globalColors.danger[900], - "dark:danger-secondary-hover": globalColors.danger[800], + "dark-brand-primary": globalColors.brand[700], + "dark-brand-primary-hover": globalColors.brand[800], + "dark-brand-secondary": globalColors.brand[900], + "dark-brand-secondary-hover": globalColors.brand[800], + "dark-neutral-primary": globalColors.neutral[800], + "dark-neutral-primary-hover": globalColors.neutral[700], + "dark-neutral-secondary": globalColors.neutral[900], + "dark-danger-primary": globalColors.danger[600], + "dark-danger-primary-hover": globalColors.danger[700], + "dark-danger-secondary": globalColors.danger[900], + "dark-danger-secondary-hover": globalColors.danger[800], }, borderColor: { // Light mode - "brand-primary": globalColors.brand[400], - "neutral-primary": globalColors.neutral[300], - "danger-primary": globalColors.danger[400], - "danger-secondary": globalColors.danger[300], + "light-brand-primary": globalColors.brand[600], + "light-neutral-primary": globalColors.neutral[400], + "light-danger-primary": globalColors.danger[400], + "light-danger-secondary": globalColors.danger[300], + // Dark mode - "dark:brand-primary": globalColors.brand[300], - "dark:neutral-primary": globalColors.brand[200], - "dark:danger-primary": globalColors.danger[300], - "dark:danger-secondary": globalColors.danger[200], + "dark-brand-primary": globalColors.brand[500], + "dark-neutral-primary": globalColors.neutral[600], + "dark-danger-primary": globalColors.danger[500], + "dark-danger-secondary": globalColors.danger[600], }, textColor: { // Light mode - "brand-onprimary": colors.white, - "brand-onsecondary": globalColors.brand[800], - "neutral-primary": globalColors.neutral[800], - "neutral-secondary": globalColors.neutral[500], - "neutral-emphasis": globalColors.neutral[900], - "danger-onprimary": globalColors.danger[800], - "danger-onprimary-hover": globalColors.neutral[50], - "danger-onsecondary": globalColors.danger[800], + "light-brand-onprimary": colors.white, + "light-brand-onsecondary": globalColors.brand[800], + "light-neutral-primary": globalColors.neutral[800], + "light-neutral-secondary": globalColors.neutral[500], + "light-neutral-emphasis": globalColors.neutral[900], + "light-danger-onprimary": colors.white, + "light-danger-onprimary-hover": globalColors.neutral[50], + "light-danger-onsecondary": globalColors.danger[800], + + // Dark mode + "dark-brand-onprimary": colors.white, + "dark-brand-onsecondary": globalColors.brand[200], + "dark-neutral-primary": globalColors.neutral[300], + "dark-neutral-secondary": globalColors.neutral[400], + "dark-neutral-emphasis": globalColors.neutral[100], + "dark-danger-onprimary": colors.white, + "dark-danger-onprimary-hover": globalColors.neutral[900], + "dark-danger-onsecondary": globalColors.danger[200], + }, + ringColor: { + // Light mode + "light-brand-primary": globalColors.brand[100], + "light-neutral-primary": globalColors.neutral[100], + "light-danger-primary": globalColors.danger[100], + // Dark mode - "dark:brand-onprimary": colors.white, - "dark:brand-onsecondary": globalColors.brand[200], - "dark:neutral-primary": globalColors.neutral[200], - "dark:neutral-secondary": globalColors.neutral[400], - "dark:neutral-emphasis": globalColors.neutral[100], - "dark:danger-onprimary": colors.white, - "dark:danger-onsecondary": globalColors.danger[200], + "dark-brand-primary": globalColors.brand[800], + "dark-neutral-primary": globalColors.neutral[600], + "dark-danger-primary": globalColors.danger[600], }, }, }, From ae42c180a8a090fbe4301355a86a15de0ffd21d8 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 27 Nov 2024 16:29:49 -0600 Subject: [PATCH 14/68] refactor: :recycle: Moved previews into the main Pathogen directory --- embedded_gems/pathogen/demo/app/assets/builds/tailwind.css | 2 +- .../test/components => }/previews/pathogen/button_preview.rb | 0 .../previews/pathogen/button_preview/all_schemes.html.erb | 0 .../previews/pathogen/button_preview/leading_visual.html.erb | 0 .../pathogen/button_preview/leading_visual_svg.html.erb | 0 .../previews/pathogen/button_preview/trailing_visual.html.erb | 0 .../pathogen/button_preview/trailing_visual_svg.html.erb | 0 7 files changed, 1 insertion(+), 1 deletion(-) rename embedded_gems/pathogen/{demo/test/components => }/previews/pathogen/button_preview.rb (100%) rename embedded_gems/pathogen/{demo/test/components => }/previews/pathogen/button_preview/all_schemes.html.erb (100%) rename embedded_gems/pathogen/{demo/test/components => }/previews/pathogen/button_preview/leading_visual.html.erb (100%) rename embedded_gems/pathogen/{demo/test/components => }/previews/pathogen/button_preview/leading_visual_svg.html.erb (100%) rename embedded_gems/pathogen/{demo/test/components => }/previews/pathogen/button_preview/trailing_visual.html.erb (100%) rename embedded_gems/pathogen/{demo/test/components => }/previews/pathogen/button_preview/trailing_visual_svg.html.erb (100%) diff --git a/embedded_gems/pathogen/demo/app/assets/builds/tailwind.css b/embedded_gems/pathogen/demo/app/assets/builds/tailwind.css index 54abaeb2b1..893e3749ae 100644 --- a/embedded_gems/pathogen/demo/app/assets/builds/tailwind.css +++ b/embedded_gems/pathogen/demo/app/assets/builds/tailwind.css @@ -1 +1 @@ -*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.mx-auto{margin-left:auto;margin-right:auto}.mt-28{margin-top:7rem}.block{display:block}.flex{display:flex}.h-screen{height:100vh}.w-screen{width:100vw}.gap-1{gap:.25rem}.p-4{padding:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.dark\:bg-slate-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))} \ No newline at end of file +*,:after,:before{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }::backdrop{--tw-border-spacing-x:0;--tw-border-spacing-y:0;--tw-translate-x:0;--tw-translate-y:0;--tw-rotate:0;--tw-skew-x:0;--tw-skew-y:0;--tw-scale-x:1;--tw-scale-y:1;--tw-pan-x: ;--tw-pan-y: ;--tw-pinch-zoom: ;--tw-scroll-snap-strictness:proximity;--tw-gradient-from-position: ;--tw-gradient-via-position: ;--tw-gradient-to-position: ;--tw-ordinal: ;--tw-slashed-zero: ;--tw-numeric-figure: ;--tw-numeric-spacing: ;--tw-numeric-fraction: ;--tw-ring-inset: ;--tw-ring-offset-width:0px;--tw-ring-offset-color:#fff;--tw-ring-color:rgba(59,130,246,.5);--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;--tw-shadow:0 0 #0000;--tw-shadow-colored:0 0 #0000;--tw-blur: ;--tw-brightness: ;--tw-contrast: ;--tw-grayscale: ;--tw-hue-rotate: ;--tw-invert: ;--tw-saturate: ;--tw-sepia: ;--tw-drop-shadow: ;--tw-backdrop-blur: ;--tw-backdrop-brightness: ;--tw-backdrop-contrast: ;--tw-backdrop-grayscale: ;--tw-backdrop-hue-rotate: ;--tw-backdrop-invert: ;--tw-backdrop-opacity: ;--tw-backdrop-saturate: ;--tw-backdrop-sepia: ;--tw-contain-size: ;--tw-contain-layout: ;--tw-contain-paint: ;--tw-contain-style: }/*! tailwindcss v3.4.15 | MIT License | https://tailwindcss.com*/*,:after,:before{border:0 solid #e5e7eb;box-sizing:border-box}:after,:before{--tw-content:""}:host,html{line-height:1.5;-webkit-text-size-adjust:100%;font-family:ui-sans-serif,system-ui,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-feature-settings:normal;font-variation-settings:normal;-moz-tab-size:4;-o-tab-size:4;tab-size:4;-webkit-tap-highlight-color:transparent}body{line-height:inherit;margin:0}hr{border-top-width:1px;color:inherit;height:0}abbr:where([title]){-webkit-text-decoration:underline dotted;text-decoration:underline dotted}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace;font-feature-settings:normal;font-size:1em;font-variation-settings:normal}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-collapse:collapse;border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{color:inherit;font-family:inherit;font-feature-settings:inherit;font-size:100%;font-variation-settings:inherit;font-weight:inherit;letter-spacing:inherit;line-height:inherit;margin:0;padding:0}button,select{text-transform:none}button,input:where([type=button]),input:where([type=reset]),input:where([type=submit]){-webkit-appearance:button;background-color:transparent;background-image:none}:-moz-focusring{outline:auto}:-moz-ui-invalid{box-shadow:none}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}fieldset{margin:0}fieldset,legend{padding:0}menu,ol,ul{list-style:none;margin:0;padding:0}dialog{padding:0}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#9ca3af;opacity:1}input::placeholder,textarea::placeholder{color:#9ca3af;opacity:1}[role=button],button{cursor:pointer}:disabled{cursor:default}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]:where(:not([hidden=until-found])){display:none}.container{width:100%}@media (min-width:640px){.container{max-width:640px}}@media (min-width:768px){.container{max-width:768px}}@media (min-width:1024px){.container{max-width:1024px}}@media (min-width:1280px){.container{max-width:1280px}}@media (min-width:1536px){.container{max-width:1536px}}.mx-auto{margin-left:auto;margin-right:auto}.mt-28{margin-top:7rem}.flex{display:flex}.h-screen{height:100vh}.w-screen{width:100vw}.p-4{padding:1rem}.px-5{padding-left:1.25rem;padding-right:1.25rem}.dark\:bg-slate-900:is(.dark *){--tw-bg-opacity:1;background-color:rgb(15 23 42/var(--tw-bg-opacity,1))} \ No newline at end of file diff --git a/embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview.rb b/embedded_gems/pathogen/previews/pathogen/button_preview.rb similarity index 100% rename from embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview.rb rename to embedded_gems/pathogen/previews/pathogen/button_preview.rb diff --git a/embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview/all_schemes.html.erb b/embedded_gems/pathogen/previews/pathogen/button_preview/all_schemes.html.erb similarity index 100% rename from embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview/all_schemes.html.erb rename to embedded_gems/pathogen/previews/pathogen/button_preview/all_schemes.html.erb diff --git a/embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview/leading_visual.html.erb b/embedded_gems/pathogen/previews/pathogen/button_preview/leading_visual.html.erb similarity index 100% rename from embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview/leading_visual.html.erb rename to embedded_gems/pathogen/previews/pathogen/button_preview/leading_visual.html.erb diff --git a/embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview/leading_visual_svg.html.erb b/embedded_gems/pathogen/previews/pathogen/button_preview/leading_visual_svg.html.erb similarity index 100% rename from embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview/leading_visual_svg.html.erb rename to embedded_gems/pathogen/previews/pathogen/button_preview/leading_visual_svg.html.erb diff --git a/embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview/trailing_visual.html.erb b/embedded_gems/pathogen/previews/pathogen/button_preview/trailing_visual.html.erb similarity index 100% rename from embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview/trailing_visual.html.erb rename to embedded_gems/pathogen/previews/pathogen/button_preview/trailing_visual.html.erb diff --git a/embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview/trailing_visual_svg.html.erb b/embedded_gems/pathogen/previews/pathogen/button_preview/trailing_visual_svg.html.erb similarity index 100% rename from embedded_gems/pathogen/demo/test/components/previews/pathogen/button_preview/trailing_visual_svg.html.erb rename to embedded_gems/pathogen/previews/pathogen/button_preview/trailing_visual_svg.html.erb From cdce3d1146a4ea2a2eeafc7141a4344d890364c4 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 27 Nov 2024 16:45:28 -0600 Subject: [PATCH 15/68] fix: :lipstick: Fixed button styles on neutral --- embedded_gems/pathogen/app/components/pathogen/button.rb | 4 ++-- .../previews/pathogen/button_preview/all_schemes.html.erb | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/embedded_gems/pathogen/app/components/pathogen/button.rb b/embedded_gems/pathogen/app/components/pathogen/button.rb index bad55b44e4..8272c7fbcc 100644 --- a/embedded_gems/pathogen/app/components/pathogen/button.rb +++ b/embedded_gems/pathogen/app/components/pathogen/button.rb @@ -35,7 +35,7 @@ class Button < Pathogen::Component DEFAULT_SCHEME_CLASSES = [ 'bg-light-neutral-primary', - 'text-light-neutral-primary', + 'text-light-neutral-onprimary', 'border', 'border-light-neutral-primary', 'enabled:hover:bg-light-neutral-primary-hover', @@ -44,7 +44,7 @@ class Button < Pathogen::Component DEFAULT_DARK_SCHEME_CLASSES = [ 'dark:bg-dark-neutral-primary', - 'dark:text-dark-neutral-primary', + 'dark:text-dark-neutral-onprimary', 'dark:enabled:hover:bg-dark-neutral-primary-hover', 'dark:focus:ring-dark-neutral-primary' ].freeze diff --git a/embedded_gems/pathogen/previews/pathogen/button_preview/all_schemes.html.erb b/embedded_gems/pathogen/previews/pathogen/button_preview/all_schemes.html.erb index b3620f10a4..e6e906fdaa 100644 --- a/embedded_gems/pathogen/previews/pathogen/button_preview/all_schemes.html.erb +++ b/embedded_gems/pathogen/previews/pathogen/button_preview/all_schemes.html.erb @@ -1,4 +1,4 @@ -
+
<%= render Pathogen::Button.new(scheme: :default) do %> Button <% end %> From c80fb201fa936a821cddd5ec2673c1679ebd7af9 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Thu, 28 Nov 2024 06:28:06 -0600 Subject: [PATCH 16/68] style: :lipstick: Working on updating tab component --- .../builds/pathogen_view_components.css | 55 +++++++++++++++++-- .../components/pathogen/tabs_panel/count.rb | 8 +-- .../app/components/pathogen/tabs_panel/tab.rb | 10 ++-- .../previews/pathogen/tabs_panel_preview.rb | 19 +++++++ .../tabs_panel_preview/default.html.erb | 5 ++ .../default_with_count.html.erb | 11 ++++ .../tabs_panel_preview/underline.html.erb | 5 ++ .../underline_with_count.html.erb | 11 ++++ embedded_gems/pathogen/tailwind.config.js | 13 +++-- 9 files changed, 117 insertions(+), 20 deletions(-) create mode 100644 embedded_gems/pathogen/previews/pathogen/tabs_panel_preview.rb create mode 100644 embedded_gems/pathogen/previews/pathogen/tabs_panel_preview/default.html.erb create mode 100644 embedded_gems/pathogen/previews/pathogen/tabs_panel_preview/default_with_count.html.erb create mode 100644 embedded_gems/pathogen/previews/pathogen/tabs_panel_preview/underline.html.erb create mode 100644 embedded_gems/pathogen/previews/pathogen/tabs_panel_preview/underline_with_count.html.erb diff --git a/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css b/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css index bc706bb1c3..8b0bb71ac5 100644 --- a/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css +++ b/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css @@ -714,6 +714,21 @@ video { background-color: rgb(203 213 225 / var(--tw-bg-opacity)); } +.bg-dark-neutral-primary { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity)); +} + +.bg-dark-neutral-secondary { + --tw-bg-opacity: 1; + background-color: rgb(15 23 42 / var(--tw-bg-opacity)); +} + +.bg-light-neutral-secondary { + --tw-bg-opacity: 1; + background-color: rgb(248 250 252 / var(--tw-bg-opacity)); +} + .fill-current { fill: currentColor; } @@ -760,6 +775,11 @@ video { font-weight: 500; } +.text-light-brand-onneutral { + --tw-text-opacity: 1; + color: rgb(5 150 105 / var(--tw-text-opacity)); +} + .text-light-brand-onprimary { --tw-text-opacity: 1; color: rgb(255 255 255 / var(--tw-text-opacity)); @@ -770,7 +790,7 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.text-light-neutral-primary { +.text-light-neutral-onprimary { --tw-text-opacity: 1; color: rgb(30 41 59 / var(--tw-text-opacity)); } @@ -785,6 +805,11 @@ video { color: rgb(30 41 59 / var(--tw-text-opacity)); } +.text-light-neutral-onneutral { + --tw-text-opacity: 1; + color: rgb(15 23 42 / var(--tw-text-opacity)); +} + .underline { text-decoration-line: underline; } @@ -798,6 +823,11 @@ video { border-color: rgb(203 213 225 / var(--tw-border-opacity)); } +.hover\:border-light-neutral-primary:hover { + --tw-border-opacity: 1; + border-color: rgb(148 163 184 / var(--tw-border-opacity)); +} + .hover\:bg-slate-50:hover { --tw-bg-opacity: 1; background-color: rgb(248 250 252 / var(--tw-bg-opacity)); @@ -861,6 +891,11 @@ video { opacity: 0.7; } +.dark\:border-dark-brand-primary:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(16 185 129 / var(--tw-border-opacity)); +} + .dark\:border-slate-700:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(51 65 85 / var(--tw-border-opacity)); @@ -891,9 +926,14 @@ video { background-color: rgb(51 65 85 / var(--tw-bg-opacity)); } -.dark\:bg-slate-800:is(.dark *) { +.dark\:bg-dark-neutral-secondary:is(.dark *) { --tw-bg-opacity: 1; - background-color: rgb(30 41 59 / var(--tw-bg-opacity)); + background-color: rgb(15 23 42 / var(--tw-bg-opacity)); +} + +.dark\:text-dark-brand-onneutral:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(16 185 129 / var(--tw-text-opacity)); } .dark\:text-dark-brand-onprimary:is(.dark *) { @@ -906,9 +946,9 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.dark\:text-dark-neutral-primary:is(.dark *) { +.dark\:text-dark-neutral-onprimary:is(.dark *) { --tw-text-opacity: 1; - color: rgb(203 213 225 / var(--tw-text-opacity)); + color: rgb(226 232 240 / var(--tw-text-opacity)); } .dark\:text-slate-300:is(.dark *) { @@ -921,6 +961,11 @@ video { color: rgb(148 163 184 / var(--tw-text-opacity)); } +.dark\:hover\:border-dark-neutral-primary:hover:is(.dark *) { + --tw-border-opacity: 1; + border-color: rgb(71 85 105 / var(--tw-border-opacity)); +} + .dark\:hover\:bg-slate-800:hover:is(.dark *) { --tw-bg-opacity: 1; background-color: rgb(30 41 59 / var(--tw-bg-opacity)); diff --git a/embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb b/embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb index 6b1b3196fe..e98fc7de21 100644 --- a/embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb +++ b/embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb @@ -17,11 +17,11 @@ def initialize(count: nil, selected: false, **system_arguments) def generate_count_classes if @selected - 'bg-slate-300 text-slate-800 text-xs font-medium ms-2 px-2 py-1 - rounded-full dark:bg-slate-500 dark:text-slate-300' + 'bg-dark-neutral-primary text-dark-neutral-onneutral text-xs font-medium ms-2 px-2 py-1 + rounded-full dark:bg-dark-neutral-primary dark:text-dark-neutral-onneutral' else - 'bg-slate-100 text-slate-800 text-xs font-medium ms-2 px-2 py-1 - rounded-full dark:bg-slate-700 dark:text-slate-300' + 'bg-light-neutral-primary text-light-neutral-onneutral text-xs font-medium ms-2 px-2 py-1 + rounded-full dark:bg-dark-neutral-primary dark:text-dark-neutral-onneutral' end end end diff --git a/embedded_gems/pathogen/app/components/pathogen/tabs_panel/tab.rb b/embedded_gems/pathogen/app/components/pathogen/tabs_panel/tab.rb index 995ae16391..b8d45692a3 100644 --- a/embedded_gems/pathogen/app/components/pathogen/tabs_panel/tab.rb +++ b/embedded_gems/pathogen/app/components/pathogen/tabs_panel/tab.rb @@ -51,20 +51,20 @@ def generate_tab_classes def default_tab_classes if @selected - 'inline-block p-4 text-primary-600 bg-slate-100 rounded-t-lg active dark:bg-slate-800 dark:text-primary-500' + 'inline-block p-4 text-light-brand-onneutral bg-light-neutral-primary rounded-t-lg active dark:bg-dark-neutral-primary dark:text-dark-brand-onneutral' else - 'inline-block p-4 rounded-t-lg hover:text-slate-600 + 'inline-block p-4 rounded-t-lg hover:text-light-neutral-emphasis hover:bg-slate-50 dark:hover:bg-slate-800 dark:hover:text-slate-300' end end def underline_tab_classes if @selected - 'inline-block p-4 text-primary-600 border-b-2 border-primary-600 - rounded-t-lg active dark:text-primary-500 dark:border-primary-500' + 'inline-block p-4 text-light-brand-onneutral border-b-2 border-light-brand-primary + rounded-t-lg active dark:text-dark-brand-onneutral dark:border-dark-brand-primary' else 'inline-block p-4 border-b-2 border-transparent rounded-t-lg - hover:text-slate-600 hover:border-slate-300 dark:hover:text-slate-300' + hover:text- hover:border-light-neutral-primary dark:hover:text-dark-neutral-onneutral dark:hover:border-dark-neutral-primary' end end end diff --git a/embedded_gems/pathogen/previews/pathogen/tabs_panel_preview.rb b/embedded_gems/pathogen/previews/pathogen/tabs_panel_preview.rb new file mode 100644 index 0000000000..4c655c4f1e --- /dev/null +++ b/embedded_gems/pathogen/previews/pathogen/tabs_panel_preview.rb @@ -0,0 +1,19 @@ +# frozen_string_literal: true + +module Pathogen + # Preview class for the TabsPanel component + # This class generates preview examples for the TabsPanel component that can be viewed + # in the ViewComponent preview interface. + # + # Preview methods: + # - default: Shows basic tabs panel + # - default_with_count: Demonstrates tabs with count indicators + # - underline: Shows tabs with underline style + # - underline_with_count: Shows underlined tabs with count indicators + class TabsPanelPreview < ViewComponent::Preview + def default; end + def default_with_count; end + def underline; end + def underline_with_count; end + end +end diff --git a/embedded_gems/pathogen/previews/pathogen/tabs_panel_preview/default.html.erb b/embedded_gems/pathogen/previews/pathogen/tabs_panel_preview/default.html.erb new file mode 100644 index 0000000000..041aba147d --- /dev/null +++ b/embedded_gems/pathogen/previews/pathogen/tabs_panel_preview/default.html.erb @@ -0,0 +1,5 @@ +<%= render Pathogen::TabsPanel.new(id: "default-tabs-panel-id", label: "default tabs panel") do |tabs| %> + <%= tabs.with_tab(selected: true, href: "#", text: "Tab 1") %> + <%= tabs.with_tab(selected: false, href: "#", text: "Tab 2") %> + <%= tabs.with_tab(selected: false, href: "#", text: "Tab 3") %> +<% end %> diff --git a/embedded_gems/pathogen/previews/pathogen/tabs_panel_preview/default_with_count.html.erb b/embedded_gems/pathogen/previews/pathogen/tabs_panel_preview/default_with_count.html.erb new file mode 100644 index 0000000000..f1ee0cd7d3 --- /dev/null +++ b/embedded_gems/pathogen/previews/pathogen/tabs_panel_preview/default_with_count.html.erb @@ -0,0 +1,11 @@ +<%= render Pathogen::TabsPanel.new(id: "default-tabs-panel-id", label: "default tabs panel") do |tabs| %> + <%= tabs.with_tab(selected: true, href: "#", text: "Tab 1") do |tab| %> + <%= tab.with_count(count: 1) %> + <% end %> + <%= tabs.with_tab(selected: false, href: "#", text: "Tab 2") do |tab| %> + <%= tab.with_count(count: 10) %> + <% end %> + <%= tabs.with_tab(selected: false, href: "#", text: "Tab 3") do |tab| %> + <%= tab.with_count(count: 100) %> + <% end %> +<% end %> diff --git a/embedded_gems/pathogen/previews/pathogen/tabs_panel_preview/underline.html.erb b/embedded_gems/pathogen/previews/pathogen/tabs_panel_preview/underline.html.erb new file mode 100644 index 0000000000..56ed1fd1b9 --- /dev/null +++ b/embedded_gems/pathogen/previews/pathogen/tabs_panel_preview/underline.html.erb @@ -0,0 +1,5 @@ +<%= render Pathogen::TabsPanel.new(id: "default-tabs-panel-id", type: 'underline', label: "default tabs panel") do |tabs| %> + <%= tabs.with_tab(selected: true, href: "#", text: "Tab 1") %> + <%= tabs.with_tab(selected: false, href: "#", text: "Tab 2") %> + <%= tabs.with_tab(selected: false, href: "#", text: "Tab 3") %> +<% end %> diff --git a/embedded_gems/pathogen/previews/pathogen/tabs_panel_preview/underline_with_count.html.erb b/embedded_gems/pathogen/previews/pathogen/tabs_panel_preview/underline_with_count.html.erb new file mode 100644 index 0000000000..62ee5bb9ad --- /dev/null +++ b/embedded_gems/pathogen/previews/pathogen/tabs_panel_preview/underline_with_count.html.erb @@ -0,0 +1,11 @@ +<%= render Pathogen::TabsPanel.new(id: "default-tabs-panel-id", type: "underline", label: "default tabs panel") do |tabs| %> + <%= tabs.with_tab(selected: true, href: "#", text: "Tab 1") do |tab| %> + <%= tab.with_count(count: 1) %> + <% end %> + <%= tabs.with_tab(selected: false, href: "#", text: "Tab 2") do |tab| %> + <%= tab.with_count(count: 10) %> + <% end %> + <%= tabs.with_tab(selected: false, href: "#", text: "Tab 3") do |tab| %> + <%= tab.with_count(count: 100) %> + <% end %> +<% end %> diff --git a/embedded_gems/pathogen/tailwind.config.js b/embedded_gems/pathogen/tailwind.config.js index 22ed76788d..0433f10d45 100644 --- a/embedded_gems/pathogen/tailwind.config.js +++ b/embedded_gems/pathogen/tailwind.config.js @@ -69,22 +69,23 @@ module.exports = { // Light mode "light-brand-onprimary": colors.white, "light-brand-onsecondary": globalColors.brand[800], - "light-neutral-primary": globalColors.neutral[800], - "light-neutral-secondary": globalColors.neutral[500], - "light-neutral-emphasis": globalColors.neutral[900], + "light-brand-onneutral": globalColors.brand[600], "light-danger-onprimary": colors.white, "light-danger-onprimary-hover": globalColors.neutral[50], "light-danger-onsecondary": globalColors.danger[800], + "light-neutral-onprimary": globalColors.neutral[800], + "light-neutral-onsecondary": globalColors.neutral[800], + "light-neutral-onneutral": globalColors.neutral[900], // Dark mode "dark-brand-onprimary": colors.white, "dark-brand-onsecondary": globalColors.brand[200], - "dark-neutral-primary": globalColors.neutral[300], - "dark-neutral-secondary": globalColors.neutral[400], - "dark-neutral-emphasis": globalColors.neutral[100], + "dark-brand-onneutral": globalColors.brand[500], "dark-danger-onprimary": colors.white, "dark-danger-onprimary-hover": globalColors.neutral[900], "dark-danger-onsecondary": globalColors.danger[200], + "dark-neutral-onprimary": globalColors.neutral[200], + "dark-neutral-onsecondary": globalColors.neutral[200], }, ringColor: { // Light mode From 26a4c02ddc83981a779d2cc323a49f2d6b4b1d51 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Thu, 28 Nov 2024 08:52:44 -0600 Subject: [PATCH 17/68] style: Working on tabs --- .../builds/pathogen_view_components.css | 75 +++---------------- .../components/pathogen/tabs_panel/count.rb | 4 +- .../pathogen/demo/config/application.rb | 1 + 3 files changed, 13 insertions(+), 67 deletions(-) diff --git a/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css b/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css index 8b0bb71ac5..14812fd334 100644 --- a/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css +++ b/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css @@ -689,6 +689,11 @@ video { border-color: transparent; } +.bg-dark-neutral-primary { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity)); +} + .bg-light-brand-primary { --tw-bg-opacity: 1; background-color: rgb(5 150 105 / var(--tw-bg-opacity)); @@ -704,31 +709,6 @@ video { background-color: rgb(241 245 249 / var(--tw-bg-opacity)); } -.bg-slate-100 { - --tw-bg-opacity: 1; - background-color: rgb(241 245 249 / var(--tw-bg-opacity)); -} - -.bg-slate-300 { - --tw-bg-opacity: 1; - background-color: rgb(203 213 225 / var(--tw-bg-opacity)); -} - -.bg-dark-neutral-primary { - --tw-bg-opacity: 1; - background-color: rgb(30 41 59 / var(--tw-bg-opacity)); -} - -.bg-dark-neutral-secondary { - --tw-bg-opacity: 1; - background-color: rgb(15 23 42 / var(--tw-bg-opacity)); -} - -.bg-light-neutral-secondary { - --tw-bg-opacity: 1; - background-color: rgb(248 250 252 / var(--tw-bg-opacity)); -} - .fill-current { fill: currentColor; } @@ -790,24 +770,19 @@ video { color: rgb(255 255 255 / var(--tw-text-opacity)); } -.text-light-neutral-onprimary { - --tw-text-opacity: 1; - color: rgb(30 41 59 / var(--tw-text-opacity)); -} - -.text-slate-500 { +.text-light-neutral-onneutral { --tw-text-opacity: 1; - color: rgb(100 116 139 / var(--tw-text-opacity)); + color: rgb(15 23 42 / var(--tw-text-opacity)); } -.text-slate-800 { +.text-light-neutral-onprimary { --tw-text-opacity: 1; color: rgb(30 41 59 / var(--tw-text-opacity)); } -.text-light-neutral-onneutral { +.text-slate-500 { --tw-text-opacity: 1; - color: rgb(15 23 42 / var(--tw-text-opacity)); + color: rgb(100 116 139 / var(--tw-text-opacity)); } .underline { @@ -818,11 +793,6 @@ video { filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); } -.hover\:border-slate-300:hover { - --tw-border-opacity: 1; - border-color: rgb(203 213 225 / var(--tw-border-opacity)); -} - .hover\:border-light-neutral-primary:hover { --tw-border-opacity: 1; border-color: rgb(148 163 184 / var(--tw-border-opacity)); @@ -833,11 +803,6 @@ video { background-color: rgb(248 250 252 / var(--tw-bg-opacity)); } -.hover\:text-slate-600:hover { - --tw-text-opacity: 1; - color: rgb(71 85 105 / var(--tw-text-opacity)); -} - .focus\:z-10:focus { z-index: 10; } @@ -916,21 +881,6 @@ video { background-color: rgb(30 41 59 / var(--tw-bg-opacity)); } -.dark\:bg-slate-500:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(100 116 139 / var(--tw-bg-opacity)); -} - -.dark\:bg-slate-700:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(51 65 85 / var(--tw-bg-opacity)); -} - -.dark\:bg-dark-neutral-secondary:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(15 23 42 / var(--tw-bg-opacity)); -} - .dark\:text-dark-brand-onneutral:is(.dark *) { --tw-text-opacity: 1; color: rgb(16 185 129 / var(--tw-text-opacity)); @@ -951,11 +901,6 @@ video { color: rgb(226 232 240 / var(--tw-text-opacity)); } -.dark\:text-slate-300:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(203 213 225 / var(--tw-text-opacity)); -} - .dark\:text-slate-400:is(.dark *) { --tw-text-opacity: 1; color: rgb(148 163 184 / var(--tw-text-opacity)); diff --git a/embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb b/embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb index e98fc7de21..d23a050b62 100644 --- a/embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb +++ b/embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb @@ -17,8 +17,8 @@ def initialize(count: nil, selected: false, **system_arguments) def generate_count_classes if @selected - 'bg-dark-neutral-primary text-dark-neutral-onneutral text-xs font-medium ms-2 px-2 py-1 - rounded-full dark:bg-dark-neutral-primary dark:text-dark-neutral-onneutral' + 'bg-neutral[600] text-neutral[100] text-xs font-medium ms-2 px-2 py-1 + rounded-full dark:bg-neutral[600] dark:text-neutral[100]' else 'bg-light-neutral-primary text-light-neutral-onneutral text-xs font-medium ms-2 px-2 py-1 rounded-full dark:bg-dark-neutral-primary dark:text-dark-neutral-onneutral' diff --git a/embedded_gems/pathogen/demo/config/application.rb b/embedded_gems/pathogen/demo/config/application.rb index 85156d62fe..0e2aa9e1f0 100644 --- a/embedded_gems/pathogen/demo/config/application.rb +++ b/embedded_gems/pathogen/demo/config/application.rb @@ -47,6 +47,7 @@ class Application < Rails::Application config.view_component.show_previews = true config.view_component.preview_controller = "PreviewController" config.view_component.preview_paths << Rails.root.join("..", "previews") + config.lookbook.ui_theme = "zinc" config.lookbook.project_name = "Pathogen ViewComponents v#{Pathogen::ViewComponents::VERSION::STRING}" config.lookbook.component_paths = [Pathogen::ViewComponents::Engine.root.join("app", "components")] From cbe5cba6dc97e5d2df4fd1c7b4df6a132a2fe34e Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Thu, 28 Nov 2024 09:37:05 -0600 Subject: [PATCH 18/68] style: :lipstick: Fixed tabs colours especially for counts in dark and light --- .../builds/pathogen_view_components.css | 71 ++++++++++++++++++- .../components/pathogen/tabs_panel/count.rb | 8 +-- 2 files changed, 72 insertions(+), 7 deletions(-) diff --git a/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css b/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css index 14812fd334..07aa9dd20f 100644 --- a/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css +++ b/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css @@ -689,9 +689,14 @@ video { border-color: transparent; } -.bg-dark-neutral-primary { - --tw-bg-opacity: 1; - background-color: rgb(30 41 59 / var(--tw-bg-opacity)); +.border-neutral-300 { + --tw-border-opacity: 1; + border-color: rgb(203 213 225 / var(--tw-border-opacity)); +} + +.border-neutral-400 { + --tw-border-opacity: 1; + border-color: rgb(148 163 184 / var(--tw-border-opacity)); } .bg-light-brand-primary { @@ -709,6 +714,41 @@ video { background-color: rgb(241 245 249 / var(--tw-bg-opacity)); } +.bg-black { + --tw-bg-opacity: 1; + background-color: rgb(0 0 0 / var(--tw-bg-opacity)); +} + +.bg-neutral-900 { + --tw-bg-opacity: 1; + background-color: rgb(15 23 42 / var(--tw-bg-opacity)); +} + +.bg-neutral-700 { + --tw-bg-opacity: 1; + background-color: rgb(51 65 85 / var(--tw-bg-opacity)); +} + +.bg-neutral-500 { + --tw-bg-opacity: 1; + background-color: rgb(100 116 139 / var(--tw-bg-opacity)); +} + +.bg-neutral-400 { + --tw-bg-opacity: 1; + background-color: rgb(148 163 184 / var(--tw-bg-opacity)); +} + +.bg-neutral-300 { + --tw-bg-opacity: 1; + background-color: rgb(203 213 225 / var(--tw-bg-opacity)); +} + +.bg-neutral-200 { + --tw-bg-opacity: 1; + background-color: rgb(226 232 240 / var(--tw-bg-opacity)); +} + .fill-current { fill: currentColor; } @@ -785,6 +825,11 @@ video { color: rgb(100 116 139 / var(--tw-text-opacity)); } +.text-white { + --tw-text-opacity: 1; + color: rgb(255 255 255 / var(--tw-text-opacity)); +} + .underline { text-decoration-line: underline; } @@ -881,6 +926,16 @@ video { background-color: rgb(30 41 59 / var(--tw-bg-opacity)); } +.dark\:bg-neutral-800:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(30 41 59 / var(--tw-bg-opacity)); +} + +.dark\:bg-neutral-600:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(71 85 105 / var(--tw-bg-opacity)); +} + .dark\:text-dark-brand-onneutral:is(.dark *) { --tw-text-opacity: 1; color: rgb(16 185 129 / var(--tw-text-opacity)); @@ -906,6 +961,16 @@ video { color: rgb(148 163 184 / var(--tw-text-opacity)); } +.dark\:text-neutral-500:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(100 116 139 / var(--tw-text-opacity)); +} + +.dark\:text-neutral-200:is(.dark *) { + --tw-text-opacity: 1; + color: rgb(226 232 240 / var(--tw-text-opacity)); +} + .dark\:hover\:border-dark-neutral-primary:hover:is(.dark *) { --tw-border-opacity: 1; border-color: rgb(71 85 105 / var(--tw-border-opacity)); diff --git a/embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb b/embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb index d23a050b62..842b7e0603 100644 --- a/embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb +++ b/embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb @@ -17,11 +17,11 @@ def initialize(count: nil, selected: false, **system_arguments) def generate_count_classes if @selected - 'bg-neutral[600] text-neutral[100] text-xs font-medium ms-2 px-2 py-1 - rounded-full dark:bg-neutral[600] dark:text-neutral[100]' + 'bg-neutral-300 text-white text-xs font-medium ms-2 px-2 py-1 + rounded-full dark:bg-neutral-600 dark:text-neutral-200' else - 'bg-light-neutral-primary text-light-neutral-onneutral text-xs font-medium ms-2 px-2 py-1 - rounded-full dark:bg-dark-neutral-primary dark:text-dark-neutral-onneutral' + 'bg-neutral-300 text-white text-xs font-medium ms-2 px-2 py-1 + rounded-full dark:bg-neutral-600 dark:text-neutral-200' end end end From 976963a25a174664b46b6b320f1ed58ed4fb7fc7 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Thu, 28 Nov 2024 09:42:38 -0600 Subject: [PATCH 19/68] style: :lipstick: More cleanup of tab styles --- .../pathogen/app/assets/builds/pathogen_view_components.css | 5 +++++ .../pathogen/app/components/pathogen/tabs_panel/count.rb | 4 ++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css b/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css index 07aa9dd20f..20db505a2b 100644 --- a/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css +++ b/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css @@ -936,6 +936,11 @@ video { background-color: rgb(71 85 105 / var(--tw-bg-opacity)); } +.dark\:bg-neutral-700:is(.dark *) { + --tw-bg-opacity: 1; + background-color: rgb(51 65 85 / var(--tw-bg-opacity)); +} + .dark\:text-dark-brand-onneutral:is(.dark *) { --tw-text-opacity: 1; color: rgb(16 185 129 / var(--tw-text-opacity)); diff --git a/embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb b/embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb index 842b7e0603..8eca217460 100644 --- a/embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb +++ b/embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb @@ -17,8 +17,8 @@ def initialize(count: nil, selected: false, **system_arguments) def generate_count_classes if @selected - 'bg-neutral-300 text-white text-xs font-medium ms-2 px-2 py-1 - rounded-full dark:bg-neutral-600 dark:text-neutral-200' + 'bg-neutral-400 text-white text-xs font-medium ms-2 px-2 py-1 + rounded-full dark:bg-neutral-700 dark:text-neutral-200' else 'bg-neutral-300 text-white text-xs font-medium ms-2 px-2 py-1 rounded-full dark:bg-neutral-600 dark:text-neutral-200' From 6e4f15f13a517f1aa91eb70c3a8043335ea9c269 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Thu, 28 Nov 2024 10:25:49 -0600 Subject: [PATCH 20/68] build: --- embedded_gems/pathogen/.gitignore | 1 + .../builds/pathogen_view_components.css | 1022 ----------------- embedded_gems/pathogen/tailwind.config.js | 2 +- 3 files changed, 2 insertions(+), 1023 deletions(-) delete mode 100644 embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css diff --git a/embedded_gems/pathogen/.gitignore b/embedded_gems/pathogen/.gitignore index c43680e525..c70a1c94a1 100644 --- a/embedded_gems/pathogen/.gitignore +++ b/embedded_gems/pathogen/.gitignore @@ -2,3 +2,4 @@ node_modules demo/node_modules demo/log demo/tmp +app/assets/builds diff --git a/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css b/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css deleted file mode 100644 index 20db505a2b..0000000000 --- a/embedded_gems/pathogen/app/assets/builds/pathogen_view_components.css +++ /dev/null @@ -1,1022 +0,0 @@ -*, ::before, ::after { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; -} - -::backdrop { - --tw-border-spacing-x: 0; - --tw-border-spacing-y: 0; - --tw-translate-x: 0; - --tw-translate-y: 0; - --tw-rotate: 0; - --tw-skew-x: 0; - --tw-skew-y: 0; - --tw-scale-x: 1; - --tw-scale-y: 1; - --tw-pan-x: ; - --tw-pan-y: ; - --tw-pinch-zoom: ; - --tw-scroll-snap-strictness: proximity; - --tw-gradient-from-position: ; - --tw-gradient-via-position: ; - --tw-gradient-to-position: ; - --tw-ordinal: ; - --tw-slashed-zero: ; - --tw-numeric-figure: ; - --tw-numeric-spacing: ; - --tw-numeric-fraction: ; - --tw-ring-inset: ; - --tw-ring-offset-width: 0px; - --tw-ring-offset-color: #fff; - --tw-ring-color: rgb(59 130 246 / 0.5); - --tw-ring-offset-shadow: 0 0 #0000; - --tw-ring-shadow: 0 0 #0000; - --tw-shadow: 0 0 #0000; - --tw-shadow-colored: 0 0 #0000; - --tw-blur: ; - --tw-brightness: ; - --tw-contrast: ; - --tw-grayscale: ; - --tw-hue-rotate: ; - --tw-invert: ; - --tw-saturate: ; - --tw-sepia: ; - --tw-drop-shadow: ; - --tw-backdrop-blur: ; - --tw-backdrop-brightness: ; - --tw-backdrop-contrast: ; - --tw-backdrop-grayscale: ; - --tw-backdrop-hue-rotate: ; - --tw-backdrop-invert: ; - --tw-backdrop-opacity: ; - --tw-backdrop-saturate: ; - --tw-backdrop-sepia: ; - --tw-contain-size: ; - --tw-contain-layout: ; - --tw-contain-paint: ; - --tw-contain-style: ; -} - -/* -! tailwindcss v3.4.13 | MIT License | https://tailwindcss.com -*/ - -/* -1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4) -2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116) -*/ - -*, -::before, -::after { - box-sizing: border-box; - /* 1 */ - border-width: 0; - /* 2 */ - border-style: solid; - /* 2 */ - border-color: #e5e7eb; - /* 2 */ -} - -::before, -::after { - --tw-content: ''; -} - -/* -1. Use a consistent sensible line-height in all browsers. -2. Prevent adjustments of font size after orientation changes in iOS. -3. Use a more readable tab size. -4. Use the user's configured `sans` font-family by default. -5. Use the user's configured `sans` font-feature-settings by default. -6. Use the user's configured `sans` font-variation-settings by default. -7. Disable tap highlights on iOS -*/ - -html, -:host { - line-height: 1.5; - /* 1 */ - -webkit-text-size-adjust: 100%; - /* 2 */ - -moz-tab-size: 4; - /* 3 */ - -o-tab-size: 4; - tab-size: 4; - /* 3 */ - font-family: ui-sans-serif, system-ui, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"; - /* 4 */ - font-feature-settings: normal; - /* 5 */ - font-variation-settings: normal; - /* 6 */ - -webkit-tap-highlight-color: transparent; - /* 7 */ -} - -/* -1. Remove the margin in all browsers. -2. Inherit line-height from `html` so users can set them as a class directly on the `html` element. -*/ - -body { - margin: 0; - /* 1 */ - line-height: inherit; - /* 2 */ -} - -/* -1. Add the correct height in Firefox. -2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655) -3. Ensure horizontal rules are visible by default. -*/ - -hr { - height: 0; - /* 1 */ - color: inherit; - /* 2 */ - border-top-width: 1px; - /* 3 */ -} - -/* -Add the correct text decoration in Chrome, Edge, and Safari. -*/ - -abbr:where([title]) { - -webkit-text-decoration: underline dotted; - text-decoration: underline dotted; -} - -/* -Remove the default font size and weight for headings. -*/ - -h1, -h2, -h3, -h4, -h5, -h6 { - font-size: inherit; - font-weight: inherit; -} - -/* -Reset links to optimize for opt-in styling instead of opt-out. -*/ - -a { - color: inherit; - text-decoration: inherit; -} - -/* -Add the correct font weight in Edge and Safari. -*/ - -b, -strong { - font-weight: bolder; -} - -/* -1. Use the user's configured `mono` font-family by default. -2. Use the user's configured `mono` font-feature-settings by default. -3. Use the user's configured `mono` font-variation-settings by default. -4. Correct the odd `em` font sizing in all browsers. -*/ - -code, -kbd, -samp, -pre { - font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace; - /* 1 */ - font-feature-settings: normal; - /* 2 */ - font-variation-settings: normal; - /* 3 */ - font-size: 1em; - /* 4 */ -} - -/* -Add the correct font size in all browsers. -*/ - -small { - font-size: 80%; -} - -/* -Prevent `sub` and `sup` elements from affecting the line height in all browsers. -*/ - -sub, -sup { - font-size: 75%; - line-height: 0; - position: relative; - vertical-align: baseline; -} - -sub { - bottom: -0.25em; -} - -sup { - top: -0.5em; -} - -/* -1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297) -2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016) -3. Remove gaps between table borders by default. -*/ - -table { - text-indent: 0; - /* 1 */ - border-color: inherit; - /* 2 */ - border-collapse: collapse; - /* 3 */ -} - -/* -1. Change the font styles in all browsers. -2. Remove the margin in Firefox and Safari. -3. Remove default padding in all browsers. -*/ - -button, -input, -optgroup, -select, -textarea { - font-family: inherit; - /* 1 */ - font-feature-settings: inherit; - /* 1 */ - font-variation-settings: inherit; - /* 1 */ - font-size: 100%; - /* 1 */ - font-weight: inherit; - /* 1 */ - line-height: inherit; - /* 1 */ - letter-spacing: inherit; - /* 1 */ - color: inherit; - /* 1 */ - margin: 0; - /* 2 */ - padding: 0; - /* 3 */ -} - -/* -Remove the inheritance of text transform in Edge and Firefox. -*/ - -button, -select { - text-transform: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Remove default button styles. -*/ - -button, -input:where([type='button']), -input:where([type='reset']), -input:where([type='submit']) { - -webkit-appearance: button; - /* 1 */ - background-color: transparent; - /* 2 */ - background-image: none; - /* 2 */ -} - -/* -Use the modern Firefox focus style for all focusable elements. -*/ - -:-moz-focusring { - outline: auto; -} - -/* -Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737) -*/ - -:-moz-ui-invalid { - box-shadow: none; -} - -/* -Add the correct vertical alignment in Chrome and Firefox. -*/ - -progress { - vertical-align: baseline; -} - -/* -Correct the cursor style of increment and decrement buttons in Safari. -*/ - -::-webkit-inner-spin-button, -::-webkit-outer-spin-button { - height: auto; -} - -/* -1. Correct the odd appearance in Chrome and Safari. -2. Correct the outline style in Safari. -*/ - -[type='search'] { - -webkit-appearance: textfield; - /* 1 */ - outline-offset: -2px; - /* 2 */ -} - -/* -Remove the inner padding in Chrome and Safari on macOS. -*/ - -::-webkit-search-decoration { - -webkit-appearance: none; -} - -/* -1. Correct the inability to style clickable types in iOS and Safari. -2. Change font properties to `inherit` in Safari. -*/ - -::-webkit-file-upload-button { - -webkit-appearance: button; - /* 1 */ - font: inherit; - /* 2 */ -} - -/* -Add the correct display in Chrome and Safari. -*/ - -summary { - display: list-item; -} - -/* -Removes the default spacing and border for appropriate elements. -*/ - -blockquote, -dl, -dd, -h1, -h2, -h3, -h4, -h5, -h6, -hr, -figure, -p, -pre { - margin: 0; -} - -fieldset { - margin: 0; - padding: 0; -} - -legend { - padding: 0; -} - -ol, -ul, -menu { - list-style: none; - margin: 0; - padding: 0; -} - -/* -Reset default styling for dialogs. -*/ - -dialog { - padding: 0; -} - -/* -Prevent resizing textareas horizontally by default. -*/ - -textarea { - resize: vertical; -} - -/* -1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300) -2. Set the default placeholder color to the user's configured gray 400 color. -*/ - -input::-moz-placeholder, textarea::-moz-placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -input::placeholder, -textarea::placeholder { - opacity: 1; - /* 1 */ - color: #9ca3af; - /* 2 */ -} - -/* -Set the default cursor for buttons. -*/ - -button, -[role="button"] { - cursor: pointer; -} - -/* -Make sure disabled buttons don't get the pointer cursor. -*/ - -:disabled { - cursor: default; -} - -/* -1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14) -2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210) - This can trigger a poorly considered lint error in some tools but is included by design. -*/ - -img, -svg, -video, -canvas, -audio, -iframe, -embed, -object { - display: block; - /* 1 */ - vertical-align: middle; - /* 2 */ -} - -/* -Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14) -*/ - -img, -video { - max-width: 100%; - height: auto; -} - -/* Make elements with the HTML hidden attribute stay hidden by default */ - -[hidden] { - display: none; -} - -.sr-only { - position: absolute; - width: 1px; - height: 1px; - padding: 0; - margin: -1px; - overflow: hidden; - clip: rect(0, 0, 0, 0); - white-space: nowrap; - border-width: 0; -} - -.relative { - position: relative; -} - -.ml-2 { - margin-left: 0.5rem; -} - -.mr-2 { - margin-right: 0.5rem; -} - -.ms-2 { - margin-inline-start: 0.5rem; -} - -.block { - display: block; -} - -.inline-block { - display: inline-block; -} - -.inline { - display: inline; -} - -.flex { - display: flex; -} - -.inline-flex { - display: inline-flex; -} - -.h-3 { - height: 0.75rem; -} - -.h-4 { - height: 1rem; -} - -.w-3 { - width: 0.75rem; -} - -.w-4 { - width: 1rem; -} - -.w-full { - width: 100%; -} - -.select-none { - -webkit-user-select: none; - -moz-user-select: none; - user-select: none; -} - -.flex-wrap { - flex-wrap: wrap; -} - -.items-center { - align-items: center; -} - -.justify-center { - justify-content: center; -} - -.rounded-full { - border-radius: 9999px; -} - -.rounded-lg { - border-radius: 0.5rem; -} - -.rounded-t-lg { - border-top-left-radius: 0.5rem; - border-top-right-radius: 0.5rem; -} - -.border { - border-width: 1px; -} - -.border-b { - border-bottom-width: 1px; -} - -.border-b-2 { - border-bottom-width: 2px; -} - -.border-light-brand-primary { - --tw-border-opacity: 1; - border-color: rgb(5 150 105 / var(--tw-border-opacity)); -} - -.border-light-danger-primary { - --tw-border-opacity: 1; - border-color: rgb(251 113 133 / var(--tw-border-opacity)); -} - -.border-light-neutral-primary { - --tw-border-opacity: 1; - border-color: rgb(148 163 184 / var(--tw-border-opacity)); -} - -.border-slate-200 { - --tw-border-opacity: 1; - border-color: rgb(226 232 240 / var(--tw-border-opacity)); -} - -.border-transparent { - border-color: transparent; -} - -.border-neutral-300 { - --tw-border-opacity: 1; - border-color: rgb(203 213 225 / var(--tw-border-opacity)); -} - -.border-neutral-400 { - --tw-border-opacity: 1; - border-color: rgb(148 163 184 / var(--tw-border-opacity)); -} - -.bg-light-brand-primary { - --tw-bg-opacity: 1; - background-color: rgb(5 150 105 / var(--tw-bg-opacity)); -} - -.bg-light-danger-primary { - --tw-bg-opacity: 1; - background-color: rgb(225 29 72 / var(--tw-bg-opacity)); -} - -.bg-light-neutral-primary { - --tw-bg-opacity: 1; - background-color: rgb(241 245 249 / var(--tw-bg-opacity)); -} - -.bg-black { - --tw-bg-opacity: 1; - background-color: rgb(0 0 0 / var(--tw-bg-opacity)); -} - -.bg-neutral-900 { - --tw-bg-opacity: 1; - background-color: rgb(15 23 42 / var(--tw-bg-opacity)); -} - -.bg-neutral-700 { - --tw-bg-opacity: 1; - background-color: rgb(51 65 85 / var(--tw-bg-opacity)); -} - -.bg-neutral-500 { - --tw-bg-opacity: 1; - background-color: rgb(100 116 139 / var(--tw-bg-opacity)); -} - -.bg-neutral-400 { - --tw-bg-opacity: 1; - background-color: rgb(148 163 184 / var(--tw-bg-opacity)); -} - -.bg-neutral-300 { - --tw-bg-opacity: 1; - background-color: rgb(203 213 225 / var(--tw-bg-opacity)); -} - -.bg-neutral-200 { - --tw-bg-opacity: 1; - background-color: rgb(226 232 240 / var(--tw-bg-opacity)); -} - -.fill-current { - fill: currentColor; -} - -.p-4 { - padding: 1rem; -} - -.px-2 { - padding-left: 0.5rem; - padding-right: 0.5rem; -} - -.px-3 { - padding-left: 0.75rem; - padding-right: 0.75rem; -} - -.py-1 { - padding-top: 0.25rem; - padding-bottom: 0.25rem; -} - -.py-2 { - padding-top: 0.5rem; - padding-bottom: 0.5rem; -} - -.text-center { - text-align: center; -} - -.text-sm { - font-size: 0.875rem; - line-height: 1.25rem; -} - -.text-xs { - font-size: 0.75rem; - line-height: 1rem; -} - -.font-medium { - font-weight: 500; -} - -.text-light-brand-onneutral { - --tw-text-opacity: 1; - color: rgb(5 150 105 / var(--tw-text-opacity)); -} - -.text-light-brand-onprimary { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -.text-light-danger-onprimary { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -.text-light-neutral-onneutral { - --tw-text-opacity: 1; - color: rgb(15 23 42 / var(--tw-text-opacity)); -} - -.text-light-neutral-onprimary { - --tw-text-opacity: 1; - color: rgb(30 41 59 / var(--tw-text-opacity)); -} - -.text-slate-500 { - --tw-text-opacity: 1; - color: rgb(100 116 139 / var(--tw-text-opacity)); -} - -.text-white { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -.underline { - text-decoration-line: underline; -} - -.filter { - filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow); -} - -.hover\:border-light-neutral-primary:hover { - --tw-border-opacity: 1; - border-color: rgb(148 163 184 / var(--tw-border-opacity)); -} - -.hover\:bg-slate-50:hover { - --tw-bg-opacity: 1; - background-color: rgb(248 250 252 / var(--tw-bg-opacity)); -} - -.focus\:z-10:focus { - z-index: 10; -} - -.focus\:outline-none:focus { - outline: 2px solid transparent; - outline-offset: 2px; -} - -.focus\:ring-4:focus { - --tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color); - --tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(4px + var(--tw-ring-offset-width)) var(--tw-ring-color); - box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000); -} - -.focus\:ring-light-brand-primary:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(209 250 229 / var(--tw-ring-opacity)); -} - -.focus\:ring-light-danger-primary:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(255 228 230 / var(--tw-ring-opacity)); -} - -.focus\:ring-light-neutral-primary:focus { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(241 245 249 / var(--tw-ring-opacity)); -} - -.enabled\:hover\:bg-light-brand-primary-hover:hover:enabled { - --tw-bg-opacity: 1; - background-color: rgb(16 185 129 / var(--tw-bg-opacity)); -} - -.enabled\:hover\:bg-light-danger-primary-hover:hover:enabled { - --tw-bg-opacity: 1; - background-color: rgb(159 18 57 / var(--tw-bg-opacity)); -} - -.enabled\:hover\:bg-light-neutral-primary-hover:hover:enabled { - --tw-bg-opacity: 1; - background-color: rgb(226 232 240 / var(--tw-bg-opacity)); -} - -.disabled\:cursor-not-allowed:disabled { - cursor: not-allowed; -} - -.disabled\:opacity-70:disabled { - opacity: 0.7; -} - -.dark\:border-dark-brand-primary:is(.dark *) { - --tw-border-opacity: 1; - border-color: rgb(16 185 129 / var(--tw-border-opacity)); -} - -.dark\:border-slate-700:is(.dark *) { - --tw-border-opacity: 1; - border-color: rgb(51 65 85 / var(--tw-border-opacity)); -} - -.dark\:bg-dark-brand-primary:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(4 120 87 / var(--tw-bg-opacity)); -} - -.dark\:bg-dark-danger-primary:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(225 29 72 / var(--tw-bg-opacity)); -} - -.dark\:bg-dark-neutral-primary:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(30 41 59 / var(--tw-bg-opacity)); -} - -.dark\:bg-neutral-800:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(30 41 59 / var(--tw-bg-opacity)); -} - -.dark\:bg-neutral-600:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(71 85 105 / var(--tw-bg-opacity)); -} - -.dark\:bg-neutral-700:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(51 65 85 / var(--tw-bg-opacity)); -} - -.dark\:text-dark-brand-onneutral:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(16 185 129 / var(--tw-text-opacity)); -} - -.dark\:text-dark-brand-onprimary:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -.dark\:text-dark-danger-onprimary:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(255 255 255 / var(--tw-text-opacity)); -} - -.dark\:text-dark-neutral-onprimary:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(226 232 240 / var(--tw-text-opacity)); -} - -.dark\:text-slate-400:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(148 163 184 / var(--tw-text-opacity)); -} - -.dark\:text-neutral-500:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(100 116 139 / var(--tw-text-opacity)); -} - -.dark\:text-neutral-200:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(226 232 240 / var(--tw-text-opacity)); -} - -.dark\:hover\:border-dark-neutral-primary:hover:is(.dark *) { - --tw-border-opacity: 1; - border-color: rgb(71 85 105 / var(--tw-border-opacity)); -} - -.dark\:hover\:bg-slate-800:hover:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(30 41 59 / var(--tw-bg-opacity)); -} - -.dark\:hover\:text-slate-300:hover:is(.dark *) { - --tw-text-opacity: 1; - color: rgb(203 213 225 / var(--tw-text-opacity)); -} - -.dark\:focus\:ring-dark-brand-primary:focus:is(.dark *) { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(6 95 70 / var(--tw-ring-opacity)); -} - -.dark\:focus\:ring-dark-danger-primary:focus:is(.dark *) { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(225 29 72 / var(--tw-ring-opacity)); -} - -.dark\:focus\:ring-dark-neutral-primary:focus:is(.dark *) { - --tw-ring-opacity: 1; - --tw-ring-color: rgb(71 85 105 / var(--tw-ring-opacity)); -} - -.dark\:enabled\:hover\:bg-dark-brand-primary-hover:hover:enabled:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(6 95 70 / var(--tw-bg-opacity)); -} - -.dark\:enabled\:hover\:bg-dark-danger-primary-hover:hover:enabled:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(190 18 60 / var(--tw-bg-opacity)); -} - -.dark\:enabled\:hover\:bg-dark-neutral-primary-hover:hover:enabled:is(.dark *) { - --tw-bg-opacity: 1; - background-color: rgb(51 65 85 / var(--tw-bg-opacity)); -} diff --git a/embedded_gems/pathogen/tailwind.config.js b/embedded_gems/pathogen/tailwind.config.js index 0433f10d45..5e2127ac7b 100644 --- a/embedded_gems/pathogen/tailwind.config.js +++ b/embedded_gems/pathogen/tailwind.config.js @@ -2,7 +2,7 @@ const colors = require("tailwindcss/colors"); /* Colors naming convention: [light|dark]-[role]-[primary|secondary]-[interaction] -e.g. hover:dark-brand-primary-hover +e.g. hover:bg-dark-brand-primary-hover */ const globalColors = { From 896c0fc02fa6385a047b7e0c49bfc040d5ce2c6f Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Fri, 29 Nov 2024 13:39:39 -0600 Subject: [PATCH 21/68] docs: :memo: Adding Pathogen specific colour documentation --- .../app/components/pathogen/button.rb | 1 + .../pathogen/demo/config/application.rb | 5 +- .../docs/pages/colours/semantic.html.erb | 40 +++++ .../pathogen/previews/colour_preview.rb | 6 + .../colour_preview/background.html.erb | 156 ++++++++++++++++++ .../button_preview/all_schemes.html.erb | 2 +- embedded_gems/pathogen/tailwind.config.js | 40 ++--- 7 files changed, 225 insertions(+), 25 deletions(-) create mode 100644 embedded_gems/pathogen/docs/pages/colours/semantic.html.erb create mode 100644 embedded_gems/pathogen/previews/colour_preview.rb create mode 100644 embedded_gems/pathogen/previews/colour_preview/background.html.erb diff --git a/embedded_gems/pathogen/app/components/pathogen/button.rb b/embedded_gems/pathogen/app/components/pathogen/button.rb index 8272c7fbcc..56066496db 100644 --- a/embedded_gems/pathogen/app/components/pathogen/button.rb +++ b/embedded_gems/pathogen/app/components/pathogen/button.rb @@ -29,6 +29,7 @@ class Button < Pathogen::Component PRIMARY_DARK_SCHEME_CLASSES = [ 'dark:bg-dark-brand-primary', 'dark:text-dark-brand-onprimary', + 'dark:border-dark-brand-primary', 'dark:enabled:hover:bg-dark-brand-primary-hover', 'dark:focus:ring-dark-brand-primary' ].freeze diff --git a/embedded_gems/pathogen/demo/config/application.rb b/embedded_gems/pathogen/demo/config/application.rb index 0e2aa9e1f0..55e8aa93c8 100644 --- a/embedded_gems/pathogen/demo/config/application.rb +++ b/embedded_gems/pathogen/demo/config/application.rb @@ -50,9 +50,12 @@ class Application < Rails::Application config.lookbook.ui_theme = "zinc" config.lookbook.project_name = "Pathogen ViewComponents v#{Pathogen::ViewComponents::VERSION::STRING}" - config.lookbook.component_paths = [Pathogen::ViewComponents::Engine.root.join("app", "components")] + config.lookbook.component_paths = [ + Pathogen::ViewComponents::Engine.root.join("app", "components") + ] config.lookbook.preview_display_options = { theme: ["light", "dark"], # dynamic 'theme' display option } + config.lookbook.page_paths = [Pathogen::ViewComponents::Engine.root.join("docs", "pages")] end end diff --git a/embedded_gems/pathogen/docs/pages/colours/semantic.html.erb b/embedded_gems/pathogen/docs/pages/colours/semantic.html.erb new file mode 100644 index 0000000000..bd91733468 --- /dev/null +++ b/embedded_gems/pathogen/docs/pages/colours/semantic.html.erb @@ -0,0 +1,40 @@ +

Background Colours

+ + + + + + + + + + + + + + + + + + +
ColourClass
+
+ 		+ bg-light-brand-primary dark:bg-dark-brand-primary +
+
+ 		+ bg-light-brand-primary-hover dark:bg-dark-brand-primary-hover +
diff --git a/embedded_gems/pathogen/previews/colour_preview.rb b/embedded_gems/pathogen/previews/colour_preview.rb new file mode 100644 index 0000000000..0efcfeec70 --- /dev/null +++ b/embedded_gems/pathogen/previews/colour_preview.rb @@ -0,0 +1,6 @@ +# frozen_string_literal: true + +class ColourPreview < ViewComponent::Preview + def background + end +end diff --git a/embedded_gems/pathogen/previews/colour_preview/background.html.erb b/embedded_gems/pathogen/previews/colour_preview/background.html.erb new file mode 100644 index 0000000000..3fa7a2acfc --- /dev/null +++ b/embedded_gems/pathogen/previews/colour_preview/background.html.erb @@ -0,0 +1,156 @@ +

Background Colours

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ColourClass
+
+ 		+ bg-light-brand-primary dark:bg-dark-brand-primary +
+
+ 		+ bg-light-brand-primary-hover dark:bg-dark-brand-primary-hover +
+
+ 		+ bg-light-brand-secondary dark:bg-dark-brand-secondary +
+
+ 		+ bg-light-neutral-primary dark:bg-dark-neutral-primary +
+
+ 		+ bg-light-neutral-primary-hover dark:bg-dark-neutral-primary-hover +
+
+ 		+ bg-light-neutral-secondary dark:bg-dark-neutral-secondary +
+
+ 		+ bg-light-danger-primary dark:bg-dark-danger-primary +
+
+ 		+ bg-light-danger-primary-hover dark:bg-dark-danger-primary-hover +
+
+ 		+ bg-light-danger-secondary dark:bg-dark-danger-secondary +
+ +

Text Colours

+ + + + + + + + + + + + + +
ColourClass
+ text-light-neutral-onprimary dark:text-dark-neutral-onprimary +
diff --git a/embedded_gems/pathogen/previews/pathogen/button_preview/all_schemes.html.erb b/embedded_gems/pathogen/previews/pathogen/button_preview/all_schemes.html.erb index e6e906fdaa..10ce3d5e37 100644 --- a/embedded_gems/pathogen/previews/pathogen/button_preview/all_schemes.html.erb +++ b/embedded_gems/pathogen/previews/pathogen/button_preview/all_schemes.html.erb @@ -1,4 +1,4 @@ -
+
<%= render Pathogen::Button.new(scheme: :default) do %> Button <% end %> diff --git a/embedded_gems/pathogen/tailwind.config.js b/embedded_gems/pathogen/tailwind.config.js index 5e2127ac7b..334816a48f 100644 --- a/embedded_gems/pathogen/tailwind.config.js +++ b/embedded_gems/pathogen/tailwind.config.js @@ -3,6 +3,9 @@ const colors = require("tailwindcss/colors"); /* Colors naming convention: [light|dark]-[role]-[primary|secondary]-[interaction] e.g. hover:bg-dark-brand-primary-hover + +Use the semantic colours first, then override with global colours +e.g. bg-light-brand-primary instead of bg-bg-brand-600 */ const globalColors = { @@ -20,7 +23,9 @@ module.exports = { "./app/components/**/*.erb", "./app/components/**/*.html", "./app/components/**/*.rb", + "./previews/**/*.html.erb", "./app/lib/**/*.rb", + "./docs/**/*.html.erb", ], theme: { extend: { @@ -28,64 +33,53 @@ module.exports = { backgroundColor: { // Light mode "light-brand-primary": globalColors.brand[600], - "light-brand-primary-hover": globalColors.brand[500], - "light-brand-secondary": globalColors.brand[100], - "light-brand-secondary-hover": globalColors.brand[200], + "light-brand-primary-hover": globalColors.brand[700], + "light-brand-secondary": globalColors.brand[400], "light-neutral-primary": globalColors.neutral[100], "light-neutral-primary-hover": globalColors.neutral[200], "light-neutral-secondary": globalColors.neutral[50], "light-danger-primary": globalColors.danger[600], - "light-danger-primary-hover": globalColors.danger[800], - "light-danger-secondary": globalColors.danger[100], - "light-danger-secondary-hover": globalColors.danger[200], + "light-danger-primary-hover": globalColors.danger[700], + "light-danger-secondary": globalColors.danger[400], // Dark mode "dark-brand-primary": globalColors.brand[700], "dark-brand-primary-hover": globalColors.brand[800], - "dark-brand-secondary": globalColors.brand[900], - "dark-brand-secondary-hover": globalColors.brand[800], - "dark-neutral-primary": globalColors.neutral[800], + "dark-brand-secondary": globalColors.brand[400], + "dark-neutral-primary": globalColors.neutral[600], "dark-neutral-primary-hover": globalColors.neutral[700], - "dark-neutral-secondary": globalColors.neutral[900], - "dark-danger-primary": globalColors.danger[600], - "dark-danger-primary-hover": globalColors.danger[700], - "dark-danger-secondary": globalColors.danger[900], - "dark-danger-secondary-hover": globalColors.danger[800], + "dark-neutral-secondary": globalColors.neutral[500], + "dark-danger-primary": globalColors.danger[700], + "dark-danger-primary-hover": globalColors.danger[800], + "dark-danger-secondary": globalColors.danger[500], }, borderColor: { // Light mode "light-brand-primary": globalColors.brand[600], "light-neutral-primary": globalColors.neutral[400], "light-danger-primary": globalColors.danger[400], - "light-danger-secondary": globalColors.danger[300], // Dark mode - "dark-brand-primary": globalColors.brand[500], + "dark-brand-primary": globalColors.brand[800], "dark-neutral-primary": globalColors.neutral[600], "dark-danger-primary": globalColors.danger[500], - "dark-danger-secondary": globalColors.danger[600], }, textColor: { // Light mode "light-brand-onprimary": colors.white, - "light-brand-onsecondary": globalColors.brand[800], "light-brand-onneutral": globalColors.brand[600], "light-danger-onprimary": colors.white, "light-danger-onprimary-hover": globalColors.neutral[50], - "light-danger-onsecondary": globalColors.danger[800], "light-neutral-onprimary": globalColors.neutral[800], - "light-neutral-onsecondary": globalColors.neutral[800], "light-neutral-onneutral": globalColors.neutral[900], // Dark mode "dark-brand-onprimary": colors.white, - "dark-brand-onsecondary": globalColors.brand[200], "dark-brand-onneutral": globalColors.brand[500], "dark-danger-onprimary": colors.white, "dark-danger-onprimary-hover": globalColors.neutral[900], - "dark-danger-onsecondary": globalColors.danger[200], "dark-neutral-onprimary": globalColors.neutral[200], - "dark-neutral-onsecondary": globalColors.neutral[200], + "dark-neutral-onneutral": globalColors.neutral[900], }, ringColor: { // Light mode From 68ab8c69f748ae8787f8551c0f4d5e9dda5521cb Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Fri, 29 Nov 2024 14:34:48 -0600 Subject: [PATCH 22/68] style: :lipstick: Working on secondary colours --- .../colour_preview/background.html.erb | 332 ++++++++++-------- embedded_gems/pathogen/tailwind.config.js | 33 +- 2 files changed, 211 insertions(+), 154 deletions(-) diff --git a/embedded_gems/pathogen/previews/colour_preview/background.html.erb b/embedded_gems/pathogen/previews/colour_preview/background.html.erb index 3fa7a2acfc..f35661305b 100644 --- a/embedded_gems/pathogen/previews/colour_preview/background.html.erb +++ b/embedded_gems/pathogen/previews/colour_preview/background.html.erb @@ -1,156 +1,198 @@ -

Background Colours

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - + + + + + +
ColourClass
-
- 		- bg-light-brand-primary dark:bg-dark-brand-primary -
-
- 		- bg-light-brand-primary-hover dark:bg-dark-brand-primary-hover -
-
- 		- bg-light-brand-secondary dark:bg-dark-brand-secondary -
-
- 		- bg-light-neutral-primary dark:bg-dark-neutral-primary -
-
- 		- bg-light-neutral-primary-hover dark:bg-dark-neutral-primary-hover -
-
Background Colours + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
ColourClass
+
+ 		+ bg-light-brand-primary dark:bg-dark-brand-primary +
+
+ 		+ bg-light-brand-primary-hover dark:bg-dark-brand-primary-hover +
+
+ 		+ bg-light-brand-secondary dark:bg-dark-brand-secondary +
+
+ 		+ bg-light-neutral-primary dark:bg-dark-neutral-primary +
+
+ 		+ bg-light-neutral-primary-hover dark:bg-dark-neutral-primary-hover +
+
+ 		+ bg-light-neutral-secondary dark:bg-dark-neutral-secondary +
+
+ 		+ bg-light-danger-primary dark:bg-dark-danger-primary +
+
+ 		+ bg-light-danger-primary-hover dark:bg-dark-danger-primary-hover +
+
+ 		+ bg-light-danger-secondary dark:bg-dark-danger-secondary +
+ +

Text Colours

+ + + + + + + + + + - - - - + + + - - - - + + + - - - - + + + - - - -
Colour
- - bg-light-neutral-secondary dark:bg-dark-neutral-secondary -
-
+ text-light-default dark:text-dark-default +
- - bg-light-danger-primary dark:bg-dark-danger-primary -
-
+ text-light-onbrand-primary dark:text-dark-onbrand-primary +
- - bg-light-danger-primary-hover dark:bg-dark-danger-primary-hover -
-
+ text-light-onneutral-primary dark:text-dark-onneutral-primary +
- - bg-light-danger-secondary dark:bg-dark-danger-secondary -
- -

Text Colours

- - - - - - - - - - - - - -
ColourClass
- text-light-neutral-onprimary dark:text-dark-neutral-onprimary -
+ > + text-light-ondanger-primary dark:text-dark-ondanger-primary +
+
+ bg-light-brand-secondary dark:bg-dark-brand-secondary +
+
+
diff --git a/embedded_gems/pathogen/tailwind.config.js b/embedded_gems/pathogen/tailwind.config.js index 334816a48f..ef4bf92383 100644 --- a/embedded_gems/pathogen/tailwind.config.js +++ b/embedded_gems/pathogen/tailwind.config.js @@ -32,20 +32,22 @@ module.exports = { colors: globalColors, backgroundColor: { // Light mode + "light-default": globalColors.neutral[50], "light-brand-primary": globalColors.brand[600], "light-brand-primary-hover": globalColors.brand[700], - "light-brand-secondary": globalColors.brand[400], - "light-neutral-primary": globalColors.neutral[100], - "light-neutral-primary-hover": globalColors.neutral[200], - "light-neutral-secondary": globalColors.neutral[50], + "light-brand-secondary": globalColors.brand[500], + "light-neutral-primary": globalColors.neutral[200], + "light-neutral-primary-hover": globalColors.neutral[300], + "light-neutral-secondary": globalColors.neutral[100], "light-danger-primary": globalColors.danger[600], "light-danger-primary-hover": globalColors.danger[700], "light-danger-secondary": globalColors.danger[400], // Dark mode + "dark-default": globalColors.neutral[900], "dark-brand-primary": globalColors.brand[700], "dark-brand-primary-hover": globalColors.brand[800], - "dark-brand-secondary": globalColors.brand[400], + "dark-brand-secondary": globalColors.brand[600], "dark-neutral-primary": globalColors.neutral[600], "dark-neutral-primary-hover": globalColors.neutral[700], "dark-neutral-secondary": globalColors.neutral[500], @@ -66,17 +68,30 @@ module.exports = { }, textColor: { // Light mode - "light-brand-onprimary": colors.white, + "light-default": globalColors.neutral[900], + "light-onbrand-primary": colors.neutral[100], + "light-onbrand-secondary": globalColors.brand[800], + "light-onneutral-primary": globalColors.neutral[700], + "light-ondanger-primary": colors.neutral[100], + + // ------------------------------------------------------ + "light-brand-onprimary": colors.neutral[50], "light-brand-onneutral": globalColors.brand[600], - "light-danger-onprimary": colors.white, + "light-danger-onprimary": colors.neutral[50], "light-danger-onprimary-hover": globalColors.neutral[50], "light-neutral-onprimary": globalColors.neutral[800], "light-neutral-onneutral": globalColors.neutral[900], // Dark mode - "dark-brand-onprimary": colors.white, + "dark-default": globalColors.neutral[400], + "dark-onbrand-primary": colors.neutral[100], + "dark-onbrand-secondary": globalColors.neutral[800], + "dark-onneutral-primary": globalColors.neutral[200], + "dark-ondanger-primary": colors.neutral[100], + // ------------------------------------------------------ + "dark-brand-onprimary": colors.neutral[100], "dark-brand-onneutral": globalColors.brand[500], - "dark-danger-onprimary": colors.white, + "dark-danger-onprimary": colors.neutral[100], "dark-danger-onprimary-hover": globalColors.neutral[900], "dark-neutral-onprimary": globalColors.neutral[200], "dark-neutral-onneutral": globalColors.neutral[900], From 684ed8d2c92fee2f3bd67a239c501bd0271d8a96 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Fri, 29 Nov 2024 14:37:06 -0600 Subject: [PATCH 23/68] style: :lipstick: Updated class names on button component --- .../pathogen/app/components/pathogen/button.rb | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/embedded_gems/pathogen/app/components/pathogen/button.rb b/embedded_gems/pathogen/app/components/pathogen/button.rb index 56066496db..4c125c6b59 100644 --- a/embedded_gems/pathogen/app/components/pathogen/button.rb +++ b/embedded_gems/pathogen/app/components/pathogen/button.rb @@ -19,7 +19,7 @@ class Button < Pathogen::Component # CSS classes for different button schemes PRIMARY_SCHEME_CLASSES = [ 'bg-light-brand-primary', - 'text-light-brand-onprimary', + 'text-light-onbrand-primary', 'border', 'border-light-brand-primary', 'enabled:hover:bg-light-brand-primary-hover', @@ -28,7 +28,7 @@ class Button < Pathogen::Component PRIMARY_DARK_SCHEME_CLASSES = [ 'dark:bg-dark-brand-primary', - 'dark:text-dark-brand-onprimary', + 'dark:text-dark-onbrand-primary', 'dark:border-dark-brand-primary', 'dark:enabled:hover:bg-dark-brand-primary-hover', 'dark:focus:ring-dark-brand-primary' @@ -36,7 +36,7 @@ class Button < Pathogen::Component DEFAULT_SCHEME_CLASSES = [ 'bg-light-neutral-primary', - 'text-light-neutral-onprimary', + 'text-light-onneutral-primary', 'border', 'border-light-neutral-primary', 'enabled:hover:bg-light-neutral-primary-hover', @@ -45,14 +45,14 @@ class Button < Pathogen::Component DEFAULT_DARK_SCHEME_CLASSES = [ 'dark:bg-dark-neutral-primary', - 'dark:text-dark-neutral-onprimary', + 'dark:text-dark-onneutral-primary', 'dark:enabled:hover:bg-dark-neutral-primary-hover', 'dark:focus:ring-dark-neutral-primary' ].freeze DANGER_SCHEME_CLASSES = [ 'bg-light-danger-primary', - 'text-light-danger-onprimary', + 'text-light-ondanger-primary', 'border', 'border-light-danger-primary', 'enabled:hover:bg-light-danger-primary-hover', @@ -61,7 +61,7 @@ class Button < Pathogen::Component DANGER_DARK_SCHEME_CLASSES = [ 'dark:bg-dark-danger-primary', - 'dark:text-dark-danger-onprimary', + 'dark:text-dark-ondanger-primary', 'dark:enabled:hover:bg-dark-danger-primary-hover', 'dark:focus:ring-dark-danger-primary' ].freeze From 47b62ddfe8632fa0b89d431956707aaf955ecf66 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Fri, 29 Nov 2024 14:39:41 -0600 Subject: [PATCH 24/68] style: :lipstick: Cleaned up tab styles with new class names --- .../pathogen/app/components/pathogen/tabs_panel/count.rb | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb b/embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb index 8eca217460..8ed1f63905 100644 --- a/embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb +++ b/embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb @@ -17,11 +17,11 @@ def initialize(count: nil, selected: false, **system_arguments) def generate_count_classes if @selected - 'bg-neutral-400 text-white text-xs font-medium ms-2 px-2 py-1 - rounded-full dark:bg-neutral-700 dark:text-neutral-200' + 'bg-light-neutral-secondary text-light-onneutral-primary text-xs font-medium ms-2 px-2 py-1 + rounded-full dark:bg-dark-neutral-secondary dark:text-dark-onneutral-primary' else - 'bg-neutral-300 text-white text-xs font-medium ms-2 px-2 py-1 - rounded-full dark:bg-neutral-600 dark:text-neutral-200' + 'bg-light-neutral-secondary text-light-onneutral-primary text-xs font-medium ms-2 px-2 py-1 + rounded-full dark:bg-dark-neutral-secondary dark:text-dark-onneutral-primary' end end end From 75a4d6a40785d64a1bc52484949266af7678ce49 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Mon, 2 Dec 2024 13:13:10 -0600 Subject: [PATCH 25/68] style: :lipstick: Updating secondary text colours --- .../previews/colour_preview/background.html.erb | 11 ++--------- embedded_gems/pathogen/tailwind.config.js | 4 ++-- 2 files changed, 4 insertions(+), 11 deletions(-) diff --git a/embedded_gems/pathogen/previews/colour_preview/background.html.erb b/embedded_gems/pathogen/previews/colour_preview/background.html.erb index f35661305b..8679cb8318 100644 --- a/embedded_gems/pathogen/previews/colour_preview/background.html.erb +++ b/embedded_gems/pathogen/previews/colour_preview/background.html.erb @@ -182,15 +182,8 @@ - -
- bg-light-brand-secondary dark:bg-dark-brand-secondary -
+ + bg-light-onbrand-secondary dark:bg-dark-onbrand-secondary diff --git a/embedded_gems/pathogen/tailwind.config.js b/embedded_gems/pathogen/tailwind.config.js index ef4bf92383..dab03115bc 100644 --- a/embedded_gems/pathogen/tailwind.config.js +++ b/embedded_gems/pathogen/tailwind.config.js @@ -9,7 +9,7 @@ e.g. bg-light-brand-primary instead of bg-bg-brand-600 */ const globalColors = { - brand: colors.emerald, + brand: colors.green, neutral: colors.slate, danger: colors.rose, success: colors.green, @@ -70,7 +70,7 @@ module.exports = { // Light mode "light-default": globalColors.neutral[900], "light-onbrand-primary": colors.neutral[100], - "light-onbrand-secondary": globalColors.brand[800], + "light-onbrand-secondary": globalColors.neutral[900], "light-onneutral-primary": globalColors.neutral[700], "light-ondanger-primary": colors.neutral[100], From 219339b5894c80298fb5136522be6650c89dacac Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Mon, 2 Dec 2024 14:37:42 -0600 Subject: [PATCH 26/68] fix: Fixing path issues --- embedded_gems/pathogen/demo/Gemfile | 3 --- embedded_gems/pathogen/demo/config/tailwind.config.js | 1 - 2 files changed, 4 deletions(-) diff --git a/embedded_gems/pathogen/demo/Gemfile b/embedded_gems/pathogen/demo/Gemfile index 42b59cfced..8e7a6452ec 100644 --- a/embedded_gems/pathogen/demo/Gemfile +++ b/embedded_gems/pathogen/demo/Gemfile @@ -41,9 +41,6 @@ group :development, :test do # Static analysis for security vulnerabilities [https://brakemanscanner.org/] gem "brakeman", require: false - - # Omakase Ruby styling [https://github.com/rails/rubocop-rails-omakase/] - gem "rubocop-rails-omakase", require: false end group :development do diff --git a/embedded_gems/pathogen/demo/config/tailwind.config.js b/embedded_gems/pathogen/demo/config/tailwind.config.js index cbf225963f..8802bf1b11 100644 --- a/embedded_gems/pathogen/demo/config/tailwind.config.js +++ b/embedded_gems/pathogen/demo/config/tailwind.config.js @@ -4,7 +4,6 @@ module.exports = { "./app/helpers/**/*.rb", "./app/javascript/**/*.js", "./app/views/**/*.{erb,haml,html,slim}", - "./test/components/previews/**/*{rb,erb,haml,html,slim}", ], plugins: [require("@tailwindcss/typography")], }; From 5e679028c83779a0fef38df8b02a4260ffb99921 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Tue, 3 Dec 2024 07:27:57 -0600 Subject: [PATCH 27/68] fix: Fixed rubocop error for quotes --- embedded_gems/pathogen/Gemfile | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/embedded_gems/pathogen/Gemfile b/embedded_gems/pathogen/Gemfile index bbfa760dec..2933e7662d 100644 --- a/embedded_gems/pathogen/Gemfile +++ b/embedded_gems/pathogen/Gemfile @@ -13,5 +13,5 @@ group :development do gem 'rubocop-performance' gem 'rubocop-rails' gem 'rubocop-rails-accessibility', '~> 1.0' - gem "tailwindcss-rails" + gem 'tailwindcss-rails' end From d14fb5fbf6cf980407a3e9eb5fa547bea8738ee2 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Tue, 3 Dec 2024 07:28:39 -0600 Subject: [PATCH 28/68] fix: Fixed general rubocop errors --- .../pathogen/demo/app/helpers/application_helper.rb | 2 +- embedded_gems/pathogen/demo/config/application.rb | 6 +++--- embedded_gems/pathogen/demo/config/initializers/pathogen.rb | 4 ++-- embedded_gems/pathogen/previews/colour_preview.rb | 4 ++-- 4 files changed, 8 insertions(+), 8 deletions(-) diff --git a/embedded_gems/pathogen/demo/app/helpers/application_helper.rb b/embedded_gems/pathogen/demo/app/helpers/application_helper.rb index 8dbe35a32b..0ac2623f4e 100644 --- a/embedded_gems/pathogen/demo/app/helpers/application_helper.rb +++ b/embedded_gems/pathogen/demo/app/helpers/application_helper.rb @@ -25,7 +25,7 @@ def color_theme_attributes(theme = "light") def tag_attributes(hash) parts = hash.map do |key, value| - safe_join([key, "=", value]) + safe_join([ key, "=", value ]) end safe_join(parts, " ") diff --git a/embedded_gems/pathogen/demo/config/application.rb b/embedded_gems/pathogen/demo/config/application.rb index 55e8aa93c8..7070d73c87 100644 --- a/embedded_gems/pathogen/demo/config/application.rb +++ b/embedded_gems/pathogen/demo/config/application.rb @@ -25,7 +25,7 @@ class Application < Rails::Application # Please, add to the `ignore` list any other `lib` subdirectories that do # not contain `.rb` files, or that should not be reloaded or eager loaded. # Common ones are `templates`, `generators`, or `middleware`, for example. - config.autoload_lib(ignore: %w(assets tasks)) + config.autoload_lib(ignore: %i[assets tasks]) # Configuration for the application, engines, and railties goes here. # @@ -54,8 +54,8 @@ class Application < Rails::Application Pathogen::ViewComponents::Engine.root.join("app", "components") ] config.lookbook.preview_display_options = { - theme: ["light", "dark"], # dynamic 'theme' display option + theme: [ "light", "dark" ] } - config.lookbook.page_paths = [Pathogen::ViewComponents::Engine.root.join("docs", "pages")] + config.lookbook.page_paths = [ Pathogen::ViewComponents::Engine.root.join("docs", "pages") ] end end diff --git a/embedded_gems/pathogen/demo/config/initializers/pathogen.rb b/embedded_gems/pathogen/demo/config/initializers/pathogen.rb index 76c8fe3c5d..4a13468191 100644 --- a/embedded_gems/pathogen/demo/config/initializers/pathogen.rb +++ b/embedded_gems/pathogen/demo/config/initializers/pathogen.rb @@ -2,5 +2,5 @@ # Use concat to create new arrays instead of modifying the existing ones components_path = Rails.root.join("../app/components") -Rails.application.config.autoload_paths = Rails.application.config.autoload_paths.dup.concat([components_path]) -Rails.application.config.eager_load_paths = Rails.application.config.eager_load_paths.dup.concat([components_path]) +Rails.application.config.autoload_paths = Rails.application.config.autoload_paths.dup.concat([ components_path ]) +Rails.application.config.eager_load_paths = Rails.application.config.eager_load_paths.dup.concat([ components_path ]) diff --git a/embedded_gems/pathogen/previews/colour_preview.rb b/embedded_gems/pathogen/previews/colour_preview.rb index 0efcfeec70..3d089c2fcc 100644 --- a/embedded_gems/pathogen/previews/colour_preview.rb +++ b/embedded_gems/pathogen/previews/colour_preview.rb @@ -1,6 +1,6 @@ # frozen_string_literal: true +# Preview of colours in Pathogen and their usage class ColourPreview < ViewComponent::Preview - def background - end + def background; end end From 12272ecc6e0ba31d1285a1dc8f7ec835df30c821 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Tue, 3 Dec 2024 09:01:21 -0600 Subject: [PATCH 29/68] fix: Fixed rubop errors --- .../app/components/pathogen/tabs_panel/tab.rb | 17 +++++++----- embedded_gems/pathogen/demo/Gemfile | 3 +++ .../pathogen/demo/config/application.rb | 2 +- .../previews/pathogen/button_preview.rb | 26 +++++++++++++++---- embedded_gems/pathogen/tailwind.config.js | 2 +- 5 files changed, 36 insertions(+), 14 deletions(-) diff --git a/embedded_gems/pathogen/app/components/pathogen/tabs_panel/tab.rb b/embedded_gems/pathogen/app/components/pathogen/tabs_panel/tab.rb index b8d45692a3..66846a1c71 100644 --- a/embedded_gems/pathogen/app/components/pathogen/tabs_panel/tab.rb +++ b/embedded_gems/pathogen/app/components/pathogen/tabs_panel/tab.rb @@ -51,20 +51,23 @@ def generate_tab_classes def default_tab_classes if @selected - 'inline-block p-4 text-light-brand-onneutral bg-light-neutral-primary rounded-t-lg active dark:bg-dark-neutral-primary dark:text-dark-brand-onneutral' + 'inline-block p-4 text-light-brand-onneutral bg-light-neutral-primary ' \ + 'rounded-t-lg active dark:bg-dark-neutral-primary dark:text-dark-brand-onneutral' else - 'inline-block p-4 rounded-t-lg hover:text-light-neutral-emphasis - hover:bg-slate-50 dark:hover:bg-slate-800 dark:hover:text-slate-300' + 'inline-block p-4 rounded-t-lg hover:text-light-neutral-emphasis ' \ + 'hover:bg-slate-50 dark:hover:bg-slate-800 dark:hover:text-slate-300' end end def underline_tab_classes if @selected - 'inline-block p-4 text-light-brand-onneutral border-b-2 border-light-brand-primary - rounded-t-lg active dark:text-dark-brand-onneutral dark:border-dark-brand-primary' + 'inline-block p-4 text-light-brand-onneutral border-b-2 ' \ + 'border-light-brand-primary rounded-t-lg active ' \ + 'dark:text-dark-brand-onneutral dark:border-dark-brand-primary' else - 'inline-block p-4 border-b-2 border-transparent rounded-t-lg - hover:text- hover:border-light-neutral-primary dark:hover:text-dark-neutral-onneutral dark:hover:border-dark-neutral-primary' + 'inline-block p-4 border-b-2 border-transparent rounded-t-lg ' \ + 'hover:text-neutral-emphasis hover:border-light-neutral-primary ' \ + 'dark:hover:text-dark-neutral-onneutral dark:hover:border-dark-neutral-primary' end end end diff --git a/embedded_gems/pathogen/demo/Gemfile b/embedded_gems/pathogen/demo/Gemfile index 8e7a6452ec..7218d95ea3 100644 --- a/embedded_gems/pathogen/demo/Gemfile +++ b/embedded_gems/pathogen/demo/Gemfile @@ -41,6 +41,9 @@ group :development, :test do # Static analysis for security vulnerabilities [https://brakemanscanner.org/] gem "brakeman", require: false + + # Omakase Ruby styling [https://github.com/rails/rubocop-rails-omakase/] + gem "rubocop-rails-omakase" end group :development do diff --git a/embedded_gems/pathogen/demo/config/application.rb b/embedded_gems/pathogen/demo/config/application.rb index 7070d73c87..f9331e2dc2 100644 --- a/embedded_gems/pathogen/demo/config/application.rb +++ b/embedded_gems/pathogen/demo/config/application.rb @@ -25,7 +25,7 @@ class Application < Rails::Application # Please, add to the `ignore` list any other `lib` subdirectories that do # not contain `.rb` files, or that should not be reloaded or eager loaded. # Common ones are `templates`, `generators`, or `middleware`, for example. - config.autoload_lib(ignore: %i[assets tasks]) + config.autoload_lib(ignore: %w[assets tasks]) # Configuration for the application, engines, and railties goes here. # diff --git a/embedded_gems/pathogen/previews/pathogen/button_preview.rb b/embedded_gems/pathogen/previews/pathogen/button_preview.rb index 363819c253..6076487fb8 100644 --- a/embedded_gems/pathogen/previews/pathogen/button_preview.rb +++ b/embedded_gems/pathogen/previews/pathogen/button_preview.rb @@ -1,10 +1,14 @@ # frozen_string_literal: true module Pathogen + # Preview class for the Button component class ButtonPreview < ViewComponent::Preview # @param scheme select { choices: [default,primary, danger] } "The color scheme of the button." # @param size select { choices: [small, medium] } "The size of the button." - # @param disabled toggle "The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants." + # @param disabled toggle + # "The Boolean disabled attribute, when present, makes the element not mutable, + # focusable, or even submitted with the form. The user can neither edit nor focus + # on the control, nor its form control descendants." # @param block toggle "If true, the button will take up the full width of its container." def playground(scheme: :default, size: :medium, disabled: false, block: false) render Pathogen::Button.new(scheme:, size:, disabled:, block:, test_selector: 'playground') do @@ -12,14 +16,20 @@ def playground(scheme: :default, size: :medium, disabled: false, block: false) end end - # @param disabled toggle "The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants." + # @param disabled toggle + # "The Boolean disabled attribute, when present, makes the element not mutable, + # focusable, or even submitted with the form. The user can neither edit nor focus + # on the control, nor its form control descendants." def default(disabled: false) render Pathogen::Button.new(disabled:, test_selector: 'default') do 'Button' end end - # @param disabled toggle "The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants." + # @param disabled toggle + # "The Boolean disabled attribute, when present, makes the element not mutable, + # focusable, or even submitted with the form. The user can neither edit nor focus + # on the control, nor its form control descendants." # @param block toggle "If true, the button will take up the full width of its container." def primary(disabled: false, block: false) render Pathogen::Button.new(scheme: :primary, disabled:, block:, test_selector: 'primary') do @@ -27,7 +37,10 @@ def primary(disabled: false, block: false) end end - # @param disabled toggle "The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants." + # @param disabled toggle + # "The Boolean disabled attribute, when present, makes the element not mutable, + # focusable, or even submitted with the form. The user can neither edit nor focus + # on the control, nor its form control descendants." # @param block toggle "If true, the button will take up the full width of its container." def danger(disabled: false, block: false) render Pathogen::Button.new(scheme: :danger, disabled:, block:, test_selector: 'danger') do @@ -45,7 +58,10 @@ def full_width # @param scheme select { choices: [default,primary, danger] } "The color scheme of the button." # @param href text "The URL to link to." - # @param disabled toggle "The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants." + # @param disabled toggle + # "The Boolean disabled attribute, when present, makes the element not mutable, + # focusable, or even submitted with the form. The user can neither edit nor focus + # on the control, nor its form control descendants." def link_as_a_button(scheme: :default, href: '#', disabled: false) render Pathogen::Button.new(scheme:, href:, tag: :a, disabled:, test_selector: 'link-as-a-button') do 'Button' diff --git a/embedded_gems/pathogen/tailwind.config.js b/embedded_gems/pathogen/tailwind.config.js index dab03115bc..71f02e3b27 100644 --- a/embedded_gems/pathogen/tailwind.config.js +++ b/embedded_gems/pathogen/tailwind.config.js @@ -9,7 +9,7 @@ e.g. bg-light-brand-primary instead of bg-bg-brand-600 */ const globalColors = { - brand: colors.green, + brand: colors.teal, neutral: colors.slate, danger: colors.rose, success: colors.green, From 224850bfd98f4be45daf60fba221ef57bf620cc5 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Tue, 3 Dec 2024 09:14:15 -0600 Subject: [PATCH 30/68] build: :building_construction: Added setup script to install dependencies for Pathogen --- embedded_gems/pathogen/bin/setup | 22 ++++++++++++++++++++++ 1 file changed, 22 insertions(+) create mode 100755 embedded_gems/pathogen/bin/setup diff --git a/embedded_gems/pathogen/bin/setup b/embedded_gems/pathogen/bin/setup new file mode 100755 index 0000000000..bc2ca85216 --- /dev/null +++ b/embedded_gems/pathogen/bin/setup @@ -0,0 +1,22 @@ +#!/usr/bin/env ruby +# frozen_string_literal: true + +def system!(*args) + system(*args) || abort("\n== Command #{args} failed ==") +end + +require "fileutils" + +puts "== Installing dependencies ==" +system! "gem install bundler --conservative" +system("bundle check") || system!("bundle install") + +puts "\n== Installing Frontend dependencies ==" +system! "pnpm install" + +# Install dependencies in /demo +Dir.chdir "demo" do + system! "gem install bundler --conservative" + system("bundle check") || system!("bundle install") + system! "pnpm install" +end From 1a2aa79e0732fdd8720df9980ed3f0ec632e5434 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Tue, 3 Dec 2024 09:18:12 -0600 Subject: [PATCH 31/68] style: Playing with default colours --- embedded_gems/pathogen/tailwind.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/embedded_gems/pathogen/tailwind.config.js b/embedded_gems/pathogen/tailwind.config.js index 71f02e3b27..fc650b3be0 100644 --- a/embedded_gems/pathogen/tailwind.config.js +++ b/embedded_gems/pathogen/tailwind.config.js @@ -9,7 +9,7 @@ e.g. bg-light-brand-primary instead of bg-bg-brand-600 */ const globalColors = { - brand: colors.teal, + brand: colors.lime, neutral: colors.slate, danger: colors.rose, success: colors.green, From 118195f9eedea98d41a360575645e152b4a790f1 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 08:58:12 -0600 Subject: [PATCH 32/68] refactor: Remove semantic colours documentation --- .../docs/pages/colours/semantic.html.erb | 40 ------------------- 1 file changed, 40 deletions(-) delete mode 100644 embedded_gems/pathogen/docs/pages/colours/semantic.html.erb diff --git a/embedded_gems/pathogen/docs/pages/colours/semantic.html.erb b/embedded_gems/pathogen/docs/pages/colours/semantic.html.erb deleted file mode 100644 index bd91733468..0000000000 --- a/embedded_gems/pathogen/docs/pages/colours/semantic.html.erb +++ /dev/null @@ -1,40 +0,0 @@ -

Background Colours

- - - - - - - - - - - - - - - - - - -
ColourClass
-
- 		- bg-light-brand-primary dark:bg-dark-brand-primary -
-
- 		- bg-light-brand-primary-hover dark:bg-dark-brand-primary-hover -
From e14afa0226a01d1a7f5b93e251b3a35347c474cc Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 08:58:24 -0600 Subject: [PATCH 33/68] refactor: Enhance setup script with structured installation steps and improved error handling --- embedded_gems/pathogen/bin/setup | 59 ++++++++++++++++++++++++-------- 1 file changed, 45 insertions(+), 14 deletions(-) diff --git a/embedded_gems/pathogen/bin/setup b/embedded_gems/pathogen/bin/setup index bc2ca85216..271e2c1c40 100755 --- a/embedded_gems/pathogen/bin/setup +++ b/embedded_gems/pathogen/bin/setup @@ -1,22 +1,53 @@ #!/usr/bin/env ruby # frozen_string_literal: true -def system!(*args) - system(*args) || abort("\n== Command #{args} failed ==") -end - require "fileutils" -puts "== Installing dependencies ==" -system! "gem install bundler --conservative" -system("bundle check") || system!("bundle install") +class Setup + COLORS = { + green: "\e[32m", + red: "\e[31m", + reset: "\e[0m" + }.freeze + + def initialize + @step = 1 + end + + def system!(*args) + system(*args) || abort("#{COLORS[:red]}\n== Command #{args} failed ==#{COLORS[:reset]}") + end -puts "\n== Installing Frontend dependencies ==" -system! "pnpm install" + def step(message) + puts "\n#{COLORS[:green]}== Step #{@step}: #{message} ==#{COLORS[:reset]}" + @step += 1 + yield if block_given? + end -# Install dependencies in /demo -Dir.chdir "demo" do - system! "gem install bundler --conservative" - system("bundle check") || system!("bundle install") - system! "pnpm install" + def install_dependencies(path = ".") + Dir.chdir(path) do + system! "gem install bundler --conservative" + # Use parallel installation for better performance + system("bundle check") || system!("bundle install --jobs=$(nproc)") + system! "pnpm install --frozen-lockfile" + end + end + + def run + step "Checking environment" do + abort "Ruby version >= 3.0.0 required" unless RUBY_VERSION.to_f >= 3.0 + abort "Node.js required" unless system("which node > /dev/null") + abort "pnpm required" unless system("which pnpm > /dev/null") + end + + step "Installing main dependencies" do + install_dependencies + end + + step "Installing demo dependencies" do + install_dependencies("demo") + end + end end + +Setup.new.run From ba3eb1eacefc8ac20a1afe35d5bdc306703e226c Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 09:04:07 -0600 Subject: [PATCH 34/68] refactor: Rewrite dev script to use bash, add help text, and improve error handling --- embedded_gems/pathogen/bin/dev | 60 ++++++++++++++++++++++++++++++---- 1 file changed, 53 insertions(+), 7 deletions(-) diff --git a/embedded_gems/pathogen/bin/dev b/embedded_gems/pathogen/bin/dev index 9565868057..4eac86f17f 100755 --- a/embedded_gems/pathogen/bin/dev +++ b/embedded_gems/pathogen/bin/dev @@ -1,11 +1,57 @@ -#!/usr/bin/env sh +#!/usr/bin/env bash -# install foreman if needed — https://github.com/ddollar/foreman -if ! gem list foreman -i --silent; then - echo "Installing foreman..." - gem install foreman +set -euo pipefail + +# Colors for output +GREEN='\033[0;32m' +RED='\033[0;31m' +NC='\033[0m' # No Color + +# Help text +show_help() { + cat << EOF +Usage: ./dev [options] + +Starts the development environment using foreman. + +Options: + -h, --help Show this help message + -v, --version Show foreman version +EOF +} + +# Check if running from correct directory +if [ ! -f "Procfile" ]; then + echo -e "${RED}Error: Procfile not found in current directory${NC}" + exit 1 +fi + +# Parse arguments +while [[ "$#" -gt 0 ]]; do + case $1 in + -h|--help) show_help; exit 0 ;; + -v|--version) foreman --version; exit 0 ;; + *) break ;; + esac + shift +done + +# Check for minimum foreman version +MIN_FOREMAN_VERSION="0.87.2" +install_or_upgrade_foreman() { + echo -e "${GREEN}Installing/upgrading foreman...${NC}" + gem install foreman -v ">= $MIN_FOREMAN_VERSION" +} + +if ! command -v foreman >/dev/null 2>&1; then + install_or_upgrade_foreman +else + CURRENT_VERSION=$(foreman --version | cut -d' ' -f2) + if [ "$(printf '%s\n' "$MIN_FOREMAN_VERSION" "$CURRENT_VERSION" | sort -V | head -n1)" = "$MIN_FOREMAN_VERSION" ]; then + install_or_upgrade_foreman + fi fi -# run foreman and point it to our Procfile.dev, and pass through any arguments we've added -# learn more from the foreman docs — https://ddollar.github.io/foreman/ +# Run foreman with Procfile +echo -e "${GREEN}Starting development environment...${NC}" exec foreman start -f Procfile "$@" From 06c0e2b4190f97378e65ab358fc3b5348c910e00 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 09:12:03 -0600 Subject: [PATCH 35/68] refactor: Clean up Tailwind configuration by removing unused color variables --- embedded_gems/pathogen/tailwind.config.js | 15 --------------- 1 file changed, 15 deletions(-) diff --git a/embedded_gems/pathogen/tailwind.config.js b/embedded_gems/pathogen/tailwind.config.js index fc650b3be0..946c947f59 100644 --- a/embedded_gems/pathogen/tailwind.config.js +++ b/embedded_gems/pathogen/tailwind.config.js @@ -74,27 +74,12 @@ module.exports = { "light-onneutral-primary": globalColors.neutral[700], "light-ondanger-primary": colors.neutral[100], - // ------------------------------------------------------ - "light-brand-onprimary": colors.neutral[50], - "light-brand-onneutral": globalColors.brand[600], - "light-danger-onprimary": colors.neutral[50], - "light-danger-onprimary-hover": globalColors.neutral[50], - "light-neutral-onprimary": globalColors.neutral[800], - "light-neutral-onneutral": globalColors.neutral[900], - // Dark mode "dark-default": globalColors.neutral[400], "dark-onbrand-primary": colors.neutral[100], "dark-onbrand-secondary": globalColors.neutral[800], "dark-onneutral-primary": globalColors.neutral[200], "dark-ondanger-primary": colors.neutral[100], - // ------------------------------------------------------ - "dark-brand-onprimary": colors.neutral[100], - "dark-brand-onneutral": globalColors.brand[500], - "dark-danger-onprimary": colors.neutral[100], - "dark-danger-onprimary-hover": globalColors.neutral[900], - "dark-neutral-onprimary": globalColors.neutral[200], - "dark-neutral-onneutral": globalColors.neutral[900], }, ringColor: { // Light mode From b59a088ea48d34521048d17995d62ba198851ddf Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 09:25:01 -0600 Subject: [PATCH 36/68] refactor: Remove unused gems from the development group in Gemfile --- embedded_gems/pathogen/demo/Gemfile | 6 ------ 1 file changed, 6 deletions(-) diff --git a/embedded_gems/pathogen/demo/Gemfile b/embedded_gems/pathogen/demo/Gemfile index 7218d95ea3..1c8ca15690 100644 --- a/embedded_gems/pathogen/demo/Gemfile +++ b/embedded_gems/pathogen/demo/Gemfile @@ -38,12 +38,6 @@ gem "pathogen_view_components", path: "../" group :development, :test do # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem gem "debug", platforms: %i[ mri windows ], require: "debug/prelude" - - # Static analysis for security vulnerabilities [https://brakemanscanner.org/] - gem "brakeman", require: false - - # Omakase Ruby styling [https://github.com/rails/rubocop-rails-omakase/] - gem "rubocop-rails-omakase" end group :development do From 240157cca29f9dc1c11f44079bd5d32ca60d2df6 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 09:25:09 -0600 Subject: [PATCH 37/68] refactor: Remove unused error pages and assets from the demo public directory --- embedded_gems/pathogen/demo/public/404.html | 67 ------------------ .../demo/public/406-unsupported-browser.html | 66 ----------------- embedded_gems/pathogen/demo/public/422.html | 67 ------------------ embedded_gems/pathogen/demo/public/500.html | 66 ----------------- embedded_gems/pathogen/demo/public/icon.png | Bin 5599 -> 0 bytes embedded_gems/pathogen/demo/public/icon.svg | 3 - embedded_gems/pathogen/demo/public/robots.txt | 1 - 7 files changed, 270 deletions(-) delete mode 100644 embedded_gems/pathogen/demo/public/404.html delete mode 100644 embedded_gems/pathogen/demo/public/406-unsupported-browser.html delete mode 100644 embedded_gems/pathogen/demo/public/422.html delete mode 100644 embedded_gems/pathogen/demo/public/500.html delete mode 100644 embedded_gems/pathogen/demo/public/icon.png delete mode 100644 embedded_gems/pathogen/demo/public/icon.svg delete mode 100644 embedded_gems/pathogen/demo/public/robots.txt diff --git a/embedded_gems/pathogen/demo/public/404.html b/embedded_gems/pathogen/demo/public/404.html deleted file mode 100644 index 2be3af26fc..0000000000 --- a/embedded_gems/pathogen/demo/public/404.html +++ /dev/null @@ -1,67 +0,0 @@ - - - - The page you were looking for doesn't exist (404) - - - - - - -
-
-

The page you were looking for doesn't exist.

-

You may have mistyped the address or the page may have moved.

-
-

If you are the application owner check the logs for more information.

-
- - diff --git a/embedded_gems/pathogen/demo/public/406-unsupported-browser.html b/embedded_gems/pathogen/demo/public/406-unsupported-browser.html deleted file mode 100644 index 7cf1e168e6..0000000000 --- a/embedded_gems/pathogen/demo/public/406-unsupported-browser.html +++ /dev/null @@ -1,66 +0,0 @@ - - - - Your browser is not supported (406) - - - - - - -
-
-

Your browser is not supported.

-

Please upgrade your browser to continue.

-
-
- - diff --git a/embedded_gems/pathogen/demo/public/422.html b/embedded_gems/pathogen/demo/public/422.html deleted file mode 100644 index c08eac0d1d..0000000000 --- a/embedded_gems/pathogen/demo/public/422.html +++ /dev/null @@ -1,67 +0,0 @@ - - - - The change you wanted was rejected (422) - - - - - - -
-
-

The change you wanted was rejected.

-

Maybe you tried to change something you didn't have access to.

-
-

If you are the application owner check the logs for more information.

-
- - diff --git a/embedded_gems/pathogen/demo/public/500.html b/embedded_gems/pathogen/demo/public/500.html deleted file mode 100644 index 78a030af22..0000000000 --- a/embedded_gems/pathogen/demo/public/500.html +++ /dev/null @@ -1,66 +0,0 @@ - - - - We're sorry, but something went wrong (500) - - - - - - -
-
-

We're sorry, but something went wrong.

-
-

If you are the application owner check the logs for more information.

-
- - diff --git a/embedded_gems/pathogen/demo/public/icon.png b/embedded_gems/pathogen/demo/public/icon.png deleted file mode 100644 index f3b5abcbde91cf6d7a6a26e514eb7e30f476f950..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 5599 zcmeHL-D}fO6hCR_taXJlzs3}~RuB=Iujyo=i*=1|1FN%E=zNfMTjru|Q<6v{J{U!C zBEE}?j6I3sz>fzN!6}L_BKjcuASk~1;Dg|U_@d{g?V8mM`~#9U+>>*Ezw>c(PjYWA z4(;!cgge6k5E&d$G5`S-0}!Ik>CV(0Y#1}s-v_gAHhja2=W1?nBAte9D2HG<(+)uj z!5=W4u*{VKMw#{V@^NNs4TClr!FAA%ID-*gc{R%CFKEzG<6gm*9s_uy)oMGW*=nJf zw{(Mau|2FHfXIv6C0@Wk5k)F=3jo1srV-C{pl&k&)4_&JjYrnbJiul}d0^NCSh(#7h=F;3{|>EU>h z6U8_p;^wK6mAB(1b92>5-HxJ~V}@3?G`&Qq-TbJ2(&~-HsH6F#8mFaAG(45eT3VPO zM|(Jd<+;UZs;w>0Qw}0>D%{~r{uo_Fl5_Bo3ABWi zWo^j^_T3dxG6J6fH8X)$a^%TJ#PU!=LxF=#Fd9EvKx_x>q<(KY%+y-08?kN9dXjXK z**Q=yt-FTU*13ouhCdqq-0&;Ke{T3sQU9IdzhV9LhQIpq*P{N)+}|Mh+a-VV=x?R} c>%+pvTcMWshj-umO}|qP?%A)*_KlqT3uEqhU;qFB diff --git a/embedded_gems/pathogen/demo/public/icon.svg b/embedded_gems/pathogen/demo/public/icon.svg deleted file mode 100644 index 78307ccd4b..0000000000 --- a/embedded_gems/pathogen/demo/public/icon.svg +++ /dev/null @@ -1,3 +0,0 @@ - - - diff --git a/embedded_gems/pathogen/demo/public/robots.txt b/embedded_gems/pathogen/demo/public/robots.txt deleted file mode 100644 index c19f78ab68..0000000000 --- a/embedded_gems/pathogen/demo/public/robots.txt +++ /dev/null @@ -1 +0,0 @@ -# See https://www.robotstxt.org/robotstxt.html for documentation on how to use the robots.txt file From 990c5f9191ed40b05de5c52ed4f9af1eb1ca3f6e Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 09:37:16 -0600 Subject: [PATCH 38/68] refactor: Remove unused RuboCop configuration file from demo directory --- embedded_gems/pathogen/demo/.rubocop.yml | 8 -------- 1 file changed, 8 deletions(-) diff --git a/embedded_gems/pathogen/demo/.rubocop.yml b/embedded_gems/pathogen/demo/.rubocop.yml index f9d86d4a54..e69de29bb2 100644 --- a/embedded_gems/pathogen/demo/.rubocop.yml +++ b/embedded_gems/pathogen/demo/.rubocop.yml @@ -1,8 +0,0 @@ -# Omakase Ruby styling for Rails -inherit_gem: { rubocop-rails-omakase: rubocop.yml } - -# Overwrite or add rules to create your own house style -# -# # Use `[a, [b, c]]` not `[ a, [ b, c ] ]` -# Layout/SpaceInsideArrayLiteralBrackets: -# Enabled: false From aee1ca329c0677379e50870f74bb06f9b3bde131 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 09:52:24 -0600 Subject: [PATCH 39/68] refactor: Remove unused gems from Gemfile.lock --- embedded_gems/pathogen/demo/Gemfile.lock | 42 ------------------------ 1 file changed, 42 deletions(-) diff --git a/embedded_gems/pathogen/demo/Gemfile.lock b/embedded_gems/pathogen/demo/Gemfile.lock index 5b9880de7c..e0e1feb2d3 100644 --- a/embedded_gems/pathogen/demo/Gemfile.lock +++ b/embedded_gems/pathogen/demo/Gemfile.lock @@ -83,15 +83,12 @@ GEM tzinfo (~> 2.0, >= 2.0.5) addressable (2.8.7) public_suffix (>= 2.0.2, < 7.0) - ast (2.4.2) base64 (0.2.0) benchmark (0.4.0) bigdecimal (3.1.8) bindex (0.8.1) bootsnap (1.18.4) msgpack (~> 1.2) - brakeman (6.2.2) - racc builder (3.3.0) capybara (3.40.0) addressable @@ -147,8 +144,6 @@ GEM jbuilder (2.13.0) actionview (>= 5.0.0) activesupport (>= 5.0.0) - json (2.8.2) - language_server-protocol (3.17.0.3) listen (3.9.0) rb-fsevent (~> 0.10, >= 0.10.3) rb-inotify (~> 0.9, >= 0.9.10) @@ -201,10 +196,6 @@ GEM racc (~> 1.4) nokogiri (1.16.7-x86_64-linux) racc (~> 1.4) - parallel (1.26.3) - parser (3.3.6.0) - ast (~> 2.4.1) - racc propshaft (1.1.0) actionpack (>= 7.0.0) activesupport (>= 7.0.0) @@ -252,7 +243,6 @@ GEM rake (>= 12.2) thor (~> 1.0, >= 1.2.2) zeitwerk (~> 2.6) - rainbow (3.1.1) rake (13.2.1) rb-fsevent (0.11.2) rb-inotify (0.11.1) @@ -269,35 +259,6 @@ GEM io-console (~> 0.5) rexml (3.3.9) rouge (4.5.1) - rubocop (1.68.0) - json (~> 2.3) - language_server-protocol (>= 3.17.0) - parallel (~> 1.10) - parser (>= 3.3.0.2) - rainbow (>= 2.2.2, < 4.0) - regexp_parser (>= 2.4, < 3.0) - rubocop-ast (>= 1.32.2, < 2.0) - ruby-progressbar (~> 1.7) - unicode-display_width (>= 2.4.0, < 3.0) - rubocop-ast (1.36.1) - parser (>= 3.3.1.0) - rubocop-minitest (0.36.0) - rubocop (>= 1.61, < 2.0) - rubocop-ast (>= 1.31.1, < 2.0) - rubocop-performance (1.23.0) - rubocop (>= 1.48.1, < 2.0) - rubocop-ast (>= 1.31.1, < 2.0) - rubocop-rails (2.27.0) - activesupport (>= 4.2.0) - rack (>= 1.1) - rubocop (>= 1.52.0, < 2.0) - rubocop-ast (>= 1.31.1, < 2.0) - rubocop-rails-omakase (1.0.0) - rubocop - rubocop-minitest - rubocop-performance - rubocop-rails - ruby-progressbar (1.13.0) rubyzip (2.3.2) securerandom (0.3.2) selenium-webdriver (4.26.0) @@ -335,7 +296,6 @@ GEM railties (>= 6.0.0) tzinfo (2.0.6) concurrent-ruby (~> 1.0) - unicode-display_width (2.6.0) useragent (0.16.10) view_component (3.20.0) activesupport (>= 5.2.0, < 8.1) @@ -373,7 +333,6 @@ PLATFORMS DEPENDENCIES bootsnap - brakeman capybara debug heroicon-rails (~> 0.2.9) @@ -386,7 +345,6 @@ DEPENDENCIES puma (>= 5.0) rails (~> 7.2.2) redis - rubocop-rails-omakase selenium-webdriver sqlite3 (>= 1.4) stimulus-rails From 18a51d6e73a22f037c5c9bbce042ae2bf2686c6c Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 10:12:44 -0600 Subject: [PATCH 40/68] refactor: Simplify class generation in Count component by consolidating class assignment --- .../app/components/pathogen/tabs_panel/count.rb | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb b/embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb index 8ed1f63905..233705a6eb 100644 --- a/embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb +++ b/embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb @@ -12,17 +12,9 @@ def initialize(count: nil, selected: false, **system_arguments) @system_arguments = system_arguments @system_arguments[:tag] = TAG_DEFAULT - @system_arguments[:classes] = generate_count_classes - end - - def generate_count_classes - if @selected - 'bg-light-neutral-secondary text-light-onneutral-primary text-xs font-medium ms-2 px-2 py-1 - rounded-full dark:bg-dark-neutral-secondary dark:text-dark-onneutral-primary' - else - 'bg-light-neutral-secondary text-light-onneutral-primary text-xs font-medium ms-2 px-2 py-1 - rounded-full dark:bg-dark-neutral-secondary dark:text-dark-onneutral-primary' - end + @system_arguments[:classes] = 'bg-light-neutral-secondary text-light-onneutral-primary text-xs ' \ + 'font-medium ms-2 px-2 py-1 rounded-full dark:bg-dark-neutral-secondary ' \ + 'dark:text-dark-onneutral-primary' end end end From 09c854af92c8240cb90c48e069e7ba9017372e97 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 10:43:32 -0600 Subject: [PATCH 41/68] refactor: Enhance test_helper.rb with comments for clarity and parallel test setup --- .../pathogen/demo/test/test_helper.rb | 18 +++++++++++++++--- 1 file changed, 15 insertions(+), 3 deletions(-) diff --git a/embedded_gems/pathogen/demo/test/test_helper.rb b/embedded_gems/pathogen/demo/test/test_helper.rb index 0c22470ec1..3ec3aa1b71 100644 --- a/embedded_gems/pathogen/demo/test/test_helper.rb +++ b/embedded_gems/pathogen/demo/test/test_helper.rb @@ -1,7 +1,19 @@ -ENV["RAILS_ENV"] ||= "test" -require_relative "../config/environment" -require "rails/test_help" +# frozen_string_literal: true +# This file sets up the test environment for the Rails application. +# It ensures that the Rails environment is set to 'test' and requires +# the necessary files for running tests. It also configures the test +# suite to run tests in parallel and loads all fixtures for use in tests. +ENV['RAILS_ENV'] ||= 'test' +require_relative '../config/environment' +require 'rails/test_help' + +# This module provides support for parallelizing test cases and setting up fixtures. +# +# ActiveSupport::TestCase: +# - parallelize(workers: :number_of_processors): Runs tests in parallel using the number of processors available. +# - fixtures :all: Loads all fixtures in the test/fixtures/*.yml directory for all tests in alphabetical order. +# - Additional helper methods can be added to be used by all tests. module ActiveSupport class TestCase # Run tests in parallel with specified workers From 44cc8be13a4b0a4e0692d5546c653be60347bf48 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 10:48:02 -0600 Subject: [PATCH 42/68] refactor: Standardize gem syntax in Gemfile for consistency --- embedded_gems/pathogen/demo/Gemfile | 44 +++++++++++++++-------------- 1 file changed, 23 insertions(+), 21 deletions(-) diff --git a/embedded_gems/pathogen/demo/Gemfile b/embedded_gems/pathogen/demo/Gemfile index 1c8ca15690..025482af0c 100644 --- a/embedded_gems/pathogen/demo/Gemfile +++ b/embedded_gems/pathogen/demo/Gemfile @@ -1,21 +1,23 @@ -source "https://rubygems.org" +# frozen_string_literal: true + +source 'https://rubygems.org' # Bundle edge Rails instead: gem "rails", github: "rails/rails", branch: "main" -gem "rails", "~> 7.2.2" +gem 'rails', '~> 7.2.2' # Use propshaft for the asset pipeline -gem "propshaft" +gem 'propshaft' # Use sqlite3 as the database for Active Record -gem "sqlite3", ">= 1.4" +gem 'sqlite3', '>= 1.4' # Use the Puma web server [https://github.com/puma/puma] -gem "puma", ">= 5.0" +gem 'puma', '>= 5.0' # Use JavaScript with ESM import maps [https://github.com/rails/importmap-rails] -gem "importmap-rails" +gem 'importmap-rails' # Hotwire's SPA-like page accelerator [https://turbo.hotwired.dev] -gem "turbo-rails" +gem 'turbo-rails' # Hotwire's modest JavaScript framework [https://stimulus.hotwired.dev] -gem "stimulus-rails" +gem 'stimulus-rails' # Build JSON APIs with ease [https://github.com/rails/jbuilder] -gem "jbuilder" +gem 'jbuilder' # Use Kredis to get higher-level data types in Redis [https://github.com/rails/kredis] # gem "kredis" @@ -24,34 +26,34 @@ gem "jbuilder" # gem "bcrypt", "~> 3.1.7" # Required for the livereload gem -gem "redis" +gem 'redis' # Windows does not include zoneinfo files, so bundle the tzinfo-data gem -gem "tzinfo-data", platforms: %i[ windows jruby ] +gem 'tzinfo-data', platforms: %i[windows jruby] # Reduces boot times through caching; required in config/boot.rb -gem "bootsnap", require: false +gem 'bootsnap', require: false -gem "lookbook" -gem "pathogen_view_components", path: "../" +gem 'lookbook' +gem 'pathogen_view_components', path: '../' group :development, :test do # See https://guides.rubyonrails.org/debugging_rails_applications.html#debugging-with-the-debug-gem - gem "debug", platforms: %i[ mri windows ], require: "debug/prelude" + gem 'debug', platforms: %i[mri windows], require: 'debug/prelude' end group :development do # Use console on exceptions pages [https://github.com/rails/web-console] - gem "web-console" + gem 'web-console' end group :test do # Use system testing [https://guides.rubyonrails.org/testing.html#system-testing] - gem "capybara" - gem "selenium-webdriver" + gem 'capybara' + gem 'selenium-webdriver' end -gem "hotwire-livereload", "~> 1.4", :group => :development +gem 'hotwire-livereload', '~> 1.4', group: :development -gem "tailwindcss-rails", "~> 3.0" -gem "heroicon-rails", "~> 0.2.9" +gem 'heroicon-rails', '~> 0.2.9' +gem 'tailwindcss-rails', '~> 3.0' From cd0f896d337f9ceca4a17214b1415ceb86e0300c Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 10:51:13 -0600 Subject: [PATCH 43/68] refactor: Improve comments in test_helper.rb for better clarity and understanding --- embedded_gems/pathogen/demo/test/test_helper.rb | 13 ++++++------- 1 file changed, 6 insertions(+), 7 deletions(-) diff --git a/embedded_gems/pathogen/demo/test/test_helper.rb b/embedded_gems/pathogen/demo/test/test_helper.rb index 3ec3aa1b71..208d492347 100644 --- a/embedded_gems/pathogen/demo/test/test_helper.rb +++ b/embedded_gems/pathogen/demo/test/test_helper.rb @@ -7,14 +7,13 @@ ENV['RAILS_ENV'] ||= 'test' require_relative '../config/environment' require 'rails/test_help' - -# This module provides support for parallelizing test cases and setting up fixtures. -# -# ActiveSupport::TestCase: -# - parallelize(workers: :number_of_processors): Runs tests in parallel using the number of processors available. -# - fixtures :all: Loads all fixtures in the test/fixtures/*.yml directory for all tests in alphabetical order. -# - Additional helper methods can be added to be used by all tests. module ActiveSupport + # This module provides support for parallelizing test cases and setting up fixtures. + # + # ActiveSupport::TestCase: + # - parallelize(workers: :number_of_processors): Runs tests in parallel using the number of processors available. + # - fixtures :all: Loads all fixtures in the test/fixtures/*.yml directory for all tests in alphabetical order. + # - Additional helper methods can be added to be used by all tests. class TestCase # Run tests in parallel with specified workers parallelize(workers: :number_of_processors) From e0af8fa1820e532edbd061dededf0bad1c87d6b3 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 10:53:15 -0600 Subject: [PATCH 44/68] refactor: Simplify route definitions in routes.rb for improved readability --- embedded_gems/pathogen/demo/config/routes.rb | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/embedded_gems/pathogen/demo/config/routes.rb b/embedded_gems/pathogen/demo/config/routes.rb index e3e8800790..bc7106e0d4 100644 --- a/embedded_gems/pathogen/demo/config/routes.rb +++ b/embedded_gems/pathogen/demo/config/routes.rb @@ -1,17 +1,17 @@ +# frozen_string_literal: true + Rails.application.routes.draw do - if Rails.env.development? - mount Lookbook::Engine, at: "/lookbook" - end + mount Lookbook::Engine, at: '/lookbook' if Rails.env.development? # Define your application routes per the DSL in https://guides.rubyonrails.org/routing.html # Reveal health status on /up that returns 200 if the app boots with no exceptions, otherwise 500. # Can be used by load balancers and uptime monitors to verify that the app is live. - get "up" => "rails/health#show", as: :rails_health_check + get 'up' => 'rails/health#show', as: :rails_health_check # Render dynamic PWA files from app/views/pwa/* - get "service-worker" => "rails/pwa#service_worker", as: :pwa_service_worker - get "manifest" => "rails/pwa#manifest", as: :pwa_manifest + get 'service-worker' => 'rails/pwa#service_worker', as: :pwa_service_worker + get 'manifest' => 'rails/pwa#manifest', as: :pwa_manifest # Defines the root path route ("/") # root "posts#index" From 22ba2b90ec56b92593a82a8360eb003795dacb48 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 10:54:49 -0600 Subject: [PATCH 45/68] refactor: Enhance ApplicationSystemTestCase with comments for clarity and improve formatting --- .../pathogen/demo/test/application_system_test_case.rb | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/embedded_gems/pathogen/demo/test/application_system_test_case.rb b/embedded_gems/pathogen/demo/test/application_system_test_case.rb index cee29fd214..68ded1c863 100644 --- a/embedded_gems/pathogen/demo/test/application_system_test_case.rb +++ b/embedded_gems/pathogen/demo/test/application_system_test_case.rb @@ -1,5 +1,10 @@ -require "test_helper" +# frozen_string_literal: true +require 'test_helper' + +# This class serves as the base class for all system test cases in the application. +# It inherits from ActionDispatch::SystemTestCase and configures the test driver to use +# Selenium with headless Chrome and a screen size of 1400x1400. class ApplicationSystemTestCase < ActionDispatch::SystemTestCase - driven_by :selenium, using: :headless_chrome, screen_size: [ 1400, 1400 ] + driven_by :selenium, using: :headless_chrome, screen_size: [1400, 1400] end From 2b4332f2b38187591ed0180d8cbe51b6894bbaa1 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 10:55:46 -0600 Subject: [PATCH 46/68] refactor: Add frozen string literal comment to seeds.rb for performance optimization --- embedded_gems/pathogen/demo/db/seeds.rb | 2 ++ 1 file changed, 2 insertions(+) diff --git a/embedded_gems/pathogen/demo/db/seeds.rb b/embedded_gems/pathogen/demo/db/seeds.rb index 4fbd6ed970..0f162112e4 100644 --- a/embedded_gems/pathogen/demo/db/seeds.rb +++ b/embedded_gems/pathogen/demo/db/seeds.rb @@ -1,3 +1,5 @@ +# frozen_string_literal: true + # This file should ensure the existence of records required to run the application in every environment (production, # development, test). The code here should be idempotent so that it can be executed at any point in every environment. # The data can then be loaded with the bin/rails db:seed command (or created alongside the database with db:setup). From 9c01a45d68f4379c748c41611aeefd4480b38e18 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 11:03:11 -0600 Subject: [PATCH 47/68] refactor: Add frozen string literal comment and standardize string quotes in puma.rb for consistency --- embedded_gems/pathogen/demo/config/puma.rb | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/embedded_gems/pathogen/demo/config/puma.rb b/embedded_gems/pathogen/demo/config/puma.rb index 03c166f4cf..a0cb7a8168 100644 --- a/embedded_gems/pathogen/demo/config/puma.rb +++ b/embedded_gems/pathogen/demo/config/puma.rb @@ -1,3 +1,5 @@ +# frozen_string_literal: true + # This configuration file will be evaluated by Puma. The top-level methods that # are invoked here are part of Puma's configuration DSL. For more information # about methods provided by the DSL, see https://puma.io/puma/Puma/DSL.html. @@ -20,15 +22,15 @@ # Any libraries that use a connection pool or another resource pool should # be configured to provide at least as many connections as the number of # threads. This includes Active Record's `pool` parameter in `database.yml`. -threads_count = ENV.fetch("RAILS_MAX_THREADS", 3) +threads_count = ENV.fetch('RAILS_MAX_THREADS', 3) threads threads_count, threads_count # Specifies the `port` that Puma will listen on to receive requests; default is 3000. -port ENV.fetch("PORT", 3000) +port ENV.fetch('PORT', 3000) # Allow puma to be restarted by `bin/rails restart` command. plugin :tmp_restart # Specify the PID file. Defaults to tmp/pids/server.pid in development. # In other environments, only set the PID file if requested. -pidfile ENV["PIDFILE"] if ENV["PIDFILE"] +pidfile ENV['PIDFILE'] if ENV['PIDFILE'] From 8533f60a2fbfc5f7aab6f54e28afa2e521471c2b Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 11:04:45 -0600 Subject: [PATCH 48/68] refactor: Add frozen string literal comment and standardize string quotes in initializer files for consistency --- .../pathogen/demo/config/initializers/pathogen.rb | 10 ++++++---- .../demo/config/initializers/permissions_policy.rb | 2 ++ 2 files changed, 8 insertions(+), 4 deletions(-) diff --git a/embedded_gems/pathogen/demo/config/initializers/pathogen.rb b/embedded_gems/pathogen/demo/config/initializers/pathogen.rb index 4a13468191..84cd855f79 100644 --- a/embedded_gems/pathogen/demo/config/initializers/pathogen.rb +++ b/embedded_gems/pathogen/demo/config/initializers/pathogen.rb @@ -1,6 +1,8 @@ -require "pathogen/view_components" +# frozen_string_literal: true + +require 'pathogen/view_components' # Use concat to create new arrays instead of modifying the existing ones -components_path = Rails.root.join("../app/components") -Rails.application.config.autoload_paths = Rails.application.config.autoload_paths.dup.concat([ components_path ]) -Rails.application.config.eager_load_paths = Rails.application.config.eager_load_paths.dup.concat([ components_path ]) +components_path = Rails.root.join('../app/components') +Rails.application.config.autoload_paths = Rails.application.config.autoload_paths.dup.concat([components_path]) +Rails.application.config.eager_load_paths = Rails.application.config.eager_load_paths.dup.concat([components_path]) diff --git a/embedded_gems/pathogen/demo/config/initializers/permissions_policy.rb b/embedded_gems/pathogen/demo/config/initializers/permissions_policy.rb index 7db3b9577e..e8d0b2ae81 100644 --- a/embedded_gems/pathogen/demo/config/initializers/permissions_policy.rb +++ b/embedded_gems/pathogen/demo/config/initializers/permissions_policy.rb @@ -1,3 +1,5 @@ +# frozen_string_literal: true + # Be sure to restart your server when you modify this file. # Define an application-wide HTTP permissions policy. For further From 37f6dec3bd063ec050509bd08c972367f1ebb79f Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 11:06:51 -0600 Subject: [PATCH 49/68] chore: Added .keep to test folder to ensure gets pushed --- embedded_gems/pathogen/demo/test/components/.keep | 0 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 embedded_gems/pathogen/demo/test/components/.keep diff --git a/embedded_gems/pathogen/demo/test/components/.keep b/embedded_gems/pathogen/demo/test/components/.keep new file mode 100644 index 0000000000..e69de29bb2 From 269d87ab8ea357df4e562ec288dae1c1dab43454 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 11:09:22 -0600 Subject: [PATCH 50/68] refactor: Add frozen string literal comment and standardize string quotes in lookbook.rb for consistency --- embedded_gems/pathogen/demo/config/initializers/lookbook.rb | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/embedded_gems/pathogen/demo/config/initializers/lookbook.rb b/embedded_gems/pathogen/demo/config/initializers/lookbook.rb index 21c4ecf233..017169d827 100644 --- a/embedded_gems/pathogen/demo/config/initializers/lookbook.rb +++ b/embedded_gems/pathogen/demo/config/initializers/lookbook.rb @@ -1,8 +1,10 @@ +# frozen_string_literal: true + Rails.application.configure do config.lookbook.component_paths = [ - Rails.root.join("../app/components") + Rails.root.join('../app/components') ] config.lookbook.preview_paths = [ - Rails.root.join("test/components/previews") + Rails.root.join('test/components/previews') ] end From 53927ae0ec9ac15a81f808496ea7ffcbf2e56826 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 11:11:16 -0600 Subject: [PATCH 51/68] refactor: Add frozen string literal comment to initializers for performance optimization --- .../demo/config/initializers/content_security_policy.rb | 2 ++ .../demo/config/initializers/filter_parameter_logging.rb | 6 ++++-- .../pathogen/demo/config/initializers/inflections.rb | 2 ++ 3 files changed, 8 insertions(+), 2 deletions(-) diff --git a/embedded_gems/pathogen/demo/config/initializers/content_security_policy.rb b/embedded_gems/pathogen/demo/config/initializers/content_security_policy.rb index b3076b38fe..35ab3fd6a6 100644 --- a/embedded_gems/pathogen/demo/config/initializers/content_security_policy.rb +++ b/embedded_gems/pathogen/demo/config/initializers/content_security_policy.rb @@ -1,3 +1,5 @@ +# frozen_string_literal: true + # Be sure to restart your server when you modify this file. # Define an application-wide content security policy. diff --git a/embedded_gems/pathogen/demo/config/initializers/filter_parameter_logging.rb b/embedded_gems/pathogen/demo/config/initializers/filter_parameter_logging.rb index c010b83ddd..5a36c5322d 100644 --- a/embedded_gems/pathogen/demo/config/initializers/filter_parameter_logging.rb +++ b/embedded_gems/pathogen/demo/config/initializers/filter_parameter_logging.rb @@ -1,8 +1,10 @@ +# frozen_string_literal: true + # Be sure to restart your server when you modify this file. # Configure parameters to be partially matched (e.g. passw matches password) and filtered from the log file. # Use this to limit dissemination of sensitive information. # See the ActiveSupport::ParameterFilter documentation for supported notations and behaviors. -Rails.application.config.filter_parameters += [ - :passw, :email, :secret, :token, :_key, :crypt, :salt, :certificate, :otp, :ssn +Rails.application.config.filter_parameters += %i[ + passw email secret token _key crypt salt certificate otp ssn ] diff --git a/embedded_gems/pathogen/demo/config/initializers/inflections.rb b/embedded_gems/pathogen/demo/config/initializers/inflections.rb index 3860f659ea..9e049dcc91 100644 --- a/embedded_gems/pathogen/demo/config/initializers/inflections.rb +++ b/embedded_gems/pathogen/demo/config/initializers/inflections.rb @@ -1,3 +1,5 @@ +# frozen_string_literal: true + # Be sure to restart your server when you modify this file. # Add new inflection rules using the following format. Inflections From c0fef6017c8218a5b445d664dbd47eb3b9d7b5b3 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 11:11:43 -0600 Subject: [PATCH 52/68] refactor: Standardize string quotes in importmap file for consistency --- embedded_gems/pathogen/demo/bin/importmap | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/embedded_gems/pathogen/demo/bin/importmap b/embedded_gems/pathogen/demo/bin/importmap index 36502ab16c..fa6f199e2c 100755 --- a/embedded_gems/pathogen/demo/bin/importmap +++ b/embedded_gems/pathogen/demo/bin/importmap @@ -1,4 +1,4 @@ #!/usr/bin/env ruby -require_relative "../config/application" +require_relative '../config/application' require "importmap/commands" From c0c12feee07dabcead969456c4adbb60657f455c Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 11:35:32 -0600 Subject: [PATCH 53/68] refactor: Standardize string quotes in config.ru for consistency --- embedded_gems/pathogen/demo/config.ru | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/embedded_gems/pathogen/demo/config.ru b/embedded_gems/pathogen/demo/config.ru index 4a3c09a688..ad1fbf295b 100644 --- a/embedded_gems/pathogen/demo/config.ru +++ b/embedded_gems/pathogen/demo/config.ru @@ -1,6 +1,6 @@ # This file is used by Rack-based servers to start the application. -require_relative "config/environment" +require_relative 'config/environment' run Rails.application Rails.application.load_server From 273e34dcf394a8c8741c67f37ba03f6a932882e3 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 11:36:07 -0600 Subject: [PATCH 54/68] refactor: Add frozen string literal comment and standardize string quotes in test.rb for consistency --- embedded_gems/pathogen/demo/config/environments/test.rb | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/embedded_gems/pathogen/demo/config/environments/test.rb b/embedded_gems/pathogen/demo/config/environments/test.rb index 999db7091e..c1ff98941c 100644 --- a/embedded_gems/pathogen/demo/config/environments/test.rb +++ b/embedded_gems/pathogen/demo/config/environments/test.rb @@ -1,4 +1,6 @@ -require "active_support/core_ext/integer/time" +# frozen_string_literal: true + +require 'active_support/core_ext/integer/time' # The test environment is used exclusively to run your application's # test suite. You never need to work with it otherwise. Remember that @@ -15,10 +17,10 @@ # this is usually not necessary, and can slow down your test suite. However, it's # recommended that you enable it in continuous integration systems to ensure eager # loading is working properly before deploying your code. - config.eager_load = ENV["CI"].present? + config.eager_load = ENV['CI'].present? # Configure public file server for tests with Cache-Control for performance. - config.public_file_server.headers = { "Cache-Control" => "public, max-age=#{1.hour.to_i}" } + config.public_file_server.headers = { 'Cache-Control' => "public, max-age=#{1.hour.to_i}" } # Show full error reports and disable caching. config.consider_all_requests_local = true From 53100b1907f866e881838d7d259c5e6c7efb1768 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 11:36:42 -0600 Subject: [PATCH 55/68] refactor: Add frozen string literal comment and standardize string quotes in production.rb for consistency --- .../demo/config/environments/production.rb | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/embedded_gems/pathogen/demo/config/environments/production.rb b/embedded_gems/pathogen/demo/config/environments/production.rb index 9b5ea7a981..920210e71c 100644 --- a/embedded_gems/pathogen/demo/config/environments/production.rb +++ b/embedded_gems/pathogen/demo/config/environments/production.rb @@ -1,4 +1,6 @@ -require "active_support/core_ext/integer/time" +# frozen_string_literal: true + +require 'active_support/core_ext/integer/time' Rails.application.configure do # Settings specified here will take precedence over those in config/application.rb. @@ -48,16 +50,16 @@ # Log to STDOUT by default config.logger = ActiveSupport::Logger.new(STDOUT) - .tap { |logger| logger.formatter = ::Logger::Formatter.new } - .then { |logger| ActiveSupport::TaggedLogging.new(logger) } + .tap { |logger| logger.formatter = ::Logger::Formatter.new } + .then { |logger| ActiveSupport::TaggedLogging.new(logger) } # Prepend all log lines with the following tags. - config.log_tags = [ :request_id ] + config.log_tags = [:request_id] # "info" includes generic and useful information about system operation, but avoids logging too much # information to avoid inadvertent exposure of personally identifiable information (PII). If you # want to log everything, set the level to "debug". - config.log_level = ENV.fetch("RAILS_LOG_LEVEL", "info") + config.log_level = ENV.fetch('RAILS_LOG_LEVEL', 'info') # Use a different cache store in production. # config.cache_store = :mem_cache_store @@ -77,7 +79,7 @@ config.active_record.dump_schema_after_migration = false # Only use :id for inspections in production. - config.active_record.attributes_for_inspect = [ :id ] + config.active_record.attributes_for_inspect = [:id] # Enable DNS rebinding protection and other `Host` header attacks. # config.hosts = [ From 3bf0c66b55e8f760fbd5794d56edce73b5b0f45d Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 14:02:40 -0600 Subject: [PATCH 56/68] refactor: Add frozen string literal comment and standardize string quotes in application.rb for consistency --- .../pathogen/demo/config/application.rb | 46 ++++++++++--------- 1 file changed, 24 insertions(+), 22 deletions(-) diff --git a/embedded_gems/pathogen/demo/config/application.rb b/embedded_gems/pathogen/demo/config/application.rb index f9331e2dc2..1894b24295 100644 --- a/embedded_gems/pathogen/demo/config/application.rb +++ b/embedded_gems/pathogen/demo/config/application.rb @@ -1,17 +1,19 @@ -require_relative "boot" +# frozen_string_literal: true -require "rails" +require_relative 'boot' + +require 'rails' # Pick the frameworks you want: -require "active_model/railtie" -require "active_job/railtie" -require "active_record/railtie" -require "action_controller/railtie" -require "action_view/railtie" -require "rails/test_unit/railtie" -require "pathogen/view_components" -require "pathogen/view_components/engine" -require "view_component" -require "lookbook" +require 'active_model/railtie' +require 'active_job/railtie' +require 'active_record/railtie' +require 'action_controller/railtie' +require 'action_view/railtie' +require 'rails/test_unit/railtie' +require 'pathogen/view_components' +require 'pathogen/view_components/engine' +require 'view_component' +require 'lookbook' # Require the gems listed in Gemfile, including any gems # you've limited to :test, :development, or :production. @@ -37,25 +39,25 @@ class Application < Rails::Application # config.hotwire_livereload.disable_default_listeners = true config.hotwire_livereload.listen_paths = [ - Rails.root.join("app/assets/stylesheets"), - Rails.root.join("app/javascript"), - Rails.root.join("test/components") + Rails.root.join('app/assets/stylesheets'), + Rails.root.join('app/javascript'), + Rails.root.join('test/components') ] # Initialize configuration defaults for originally generated Rails version. - config.view_component.default_preview_layout = "component_preview" + config.view_component.default_preview_layout = 'component_preview' config.view_component.show_previews = true - config.view_component.preview_controller = "PreviewController" - config.view_component.preview_paths << Rails.root.join("..", "previews") - config.lookbook.ui_theme = "zinc" + config.view_component.preview_controller = 'PreviewController' + config.view_component.preview_paths << Rails.root.join('../previews') + config.lookbook.ui_theme = 'zinc' config.lookbook.project_name = "Pathogen ViewComponents v#{Pathogen::ViewComponents::VERSION::STRING}" config.lookbook.component_paths = [ - Pathogen::ViewComponents::Engine.root.join("app", "components") + Pathogen::ViewComponents::Engine.root.join('app', 'components') ] config.lookbook.preview_display_options = { - theme: [ "light", "dark" ] + theme: %w[light dark] } - config.lookbook.page_paths = [ Pathogen::ViewComponents::Engine.root.join("docs", "pages") ] + config.lookbook.page_paths = [Pathogen::ViewComponents::Engine.root.join('docs', 'pages')] end end From 2eaca36762073a14e18fd38b9ffdb7eb2fd855b8 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 14:03:27 -0600 Subject: [PATCH 57/68] refactor: Add nodoc comment to Application class in application.rb for documentation clarity --- embedded_gems/pathogen/demo/config/application.rb | 1 + 1 file changed, 1 insertion(+) diff --git a/embedded_gems/pathogen/demo/config/application.rb b/embedded_gems/pathogen/demo/config/application.rb index 1894b24295..4132034b05 100644 --- a/embedded_gems/pathogen/demo/config/application.rb +++ b/embedded_gems/pathogen/demo/config/application.rb @@ -20,6 +20,7 @@ Bundler.require(*Rails.groups) module Demo + # :nodoc: class Application < Rails::Application # Initialize configuration defaults for originally generated Rails version. config.load_defaults 7.2 From c907c7928774f0a71550a550fc2747a98f1b4ef7 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 14:03:53 -0600 Subject: [PATCH 58/68] refactor: Add frozen string literal comment and standardize string quotes in boot.rb for consistency --- embedded_gems/pathogen/demo/config/boot.rb | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/embedded_gems/pathogen/demo/config/boot.rb b/embedded_gems/pathogen/demo/config/boot.rb index 988a5ddc46..c04863fa7d 100644 --- a/embedded_gems/pathogen/demo/config/boot.rb +++ b/embedded_gems/pathogen/demo/config/boot.rb @@ -1,4 +1,6 @@ -ENV["BUNDLE_GEMFILE"] ||= File.expand_path("../Gemfile", __dir__) +# frozen_string_literal: true -require "bundler/setup" # Set up gems listed in the Gemfile. -require "bootsnap/setup" # Speed up boot time by caching expensive operations. +ENV['BUNDLE_GEMFILE'] ||= File.expand_path('../Gemfile', __dir__) + +require 'bundler/setup' # Set up gems listed in the Gemfile. +require 'bootsnap/setup' # Speed up boot time by caching expensive operations. From 0577d1db24fab8b41ce55722a7dfa37c586d2c37 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 14:04:18 -0600 Subject: [PATCH 59/68] refactor: Add frozen string literal comment and standardize string quotes in environment.rb for consistency --- embedded_gems/pathogen/demo/config/environment.rb | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/embedded_gems/pathogen/demo/config/environment.rb b/embedded_gems/pathogen/demo/config/environment.rb index cac5315775..d5abe55806 100644 --- a/embedded_gems/pathogen/demo/config/environment.rb +++ b/embedded_gems/pathogen/demo/config/environment.rb @@ -1,5 +1,7 @@ +# frozen_string_literal: true + # Load the Rails application. -require_relative "application" +require_relative 'application' # Initialize the Rails application. Rails.application.initialize! From 87d7db071a1423d86e9adaf1c100dde0befe13fa Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 14:04:45 -0600 Subject: [PATCH 60/68] refactor: Add frozen string literal comment and standardize string quotes in importmap.rb for consistency --- embedded_gems/pathogen/demo/config/importmap.rb | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/embedded_gems/pathogen/demo/config/importmap.rb b/embedded_gems/pathogen/demo/config/importmap.rb index 909dfc542d..15fd62707a 100644 --- a/embedded_gems/pathogen/demo/config/importmap.rb +++ b/embedded_gems/pathogen/demo/config/importmap.rb @@ -1,7 +1,9 @@ +# frozen_string_literal: true + # Pin npm packages by running ./bin/importmap -pin "application" -pin "@hotwired/turbo-rails", to: "turbo.min.js" -pin "@hotwired/stimulus", to: "stimulus.min.js" -pin "@hotwired/stimulus-loading", to: "stimulus-loading.js" -pin_all_from "app/javascript/controllers", under: "controllers" +pin 'application' +pin '@hotwired/turbo-rails', to: 'turbo.min.js' +pin '@hotwired/stimulus', to: 'stimulus.min.js' +pin '@hotwired/stimulus-loading', to: 'stimulus-loading.js' +pin_all_from 'app/javascript/controllers', under: 'controllers' From 2df7fd207c7c5102b9e55f6257059ac81b47df1c Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 15:17:38 -0600 Subject: [PATCH 61/68] refactor: Update light neutral color values in tailwind.config.js for improved consistency --- embedded_gems/pathogen/tailwind.config.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/embedded_gems/pathogen/tailwind.config.js b/embedded_gems/pathogen/tailwind.config.js index 946c947f59..38001120c1 100644 --- a/embedded_gems/pathogen/tailwind.config.js +++ b/embedded_gems/pathogen/tailwind.config.js @@ -36,9 +36,9 @@ module.exports = { "light-brand-primary": globalColors.brand[600], "light-brand-primary-hover": globalColors.brand[700], "light-brand-secondary": globalColors.brand[500], - "light-neutral-primary": globalColors.neutral[200], - "light-neutral-primary-hover": globalColors.neutral[300], - "light-neutral-secondary": globalColors.neutral[100], + "light-neutral-primary": globalColors.neutral[100], + "light-neutral-primary-hover": globalColors.neutral[200], + "light-neutral-secondary": globalColors.neutral[200], "light-danger-primary": globalColors.danger[600], "light-danger-primary-hover": globalColors.danger[700], "light-danger-secondary": globalColors.danger[400], From 6cbc5b4517a4d29d21fc077ecc543767e1907ef5 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 15:24:03 -0600 Subject: [PATCH 62/68] refactor: Remove unused color theme methods and add frozen string literal comment for performance --- .../demo/app/helpers/application_helper.rb | 34 ++----------------- 1 file changed, 3 insertions(+), 31 deletions(-) diff --git a/embedded_gems/pathogen/demo/app/helpers/application_helper.rb b/embedded_gems/pathogen/demo/app/helpers/application_helper.rb index 0ac2623f4e..292788acd7 100644 --- a/embedded_gems/pathogen/demo/app/helpers/application_helper.rb +++ b/embedded_gems/pathogen/demo/app/helpers/application_helper.rb @@ -1,33 +1,5 @@ -module ApplicationHelper - def color_themes - %w[ - light - light_colorblind - light_high_contrast - dark - dark_dimmed - dark_high_contrast - dark_colorblind - ] - end - - def color_theme_attributes(theme = "light") - theme = color_themes.include?(theme) ? theme : "light" - mode = theme.include?("dark") ? "dark" : "light" - - attributes = { - "data-color-mode": mode, - "data-#{mode}-theme": theme - } +# frozen_string_literal: true - tag_attributes(attributes) - end - - def tag_attributes(hash) - parts = hash.map do |key, value| - safe_join([ key, "=", value ]) - end - - safe_join(parts, " ") - end +# Application helper +module ApplicationHelper end From c1e76a55cd30dbd3b6b920abf167927b58ab5fb9 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 15:24:35 -0600 Subject: [PATCH 63/68] refactor: Add frozen string literal comment and standardize string quotes in development.rb for consistency --- .../pathogen/demo/config/environments/development.rb | 8 +++++--- 1 file changed, 5 insertions(+), 3 deletions(-) diff --git a/embedded_gems/pathogen/demo/config/environments/development.rb b/embedded_gems/pathogen/demo/config/environments/development.rb index 0384293c81..0b48c53fd0 100644 --- a/embedded_gems/pathogen/demo/config/environments/development.rb +++ b/embedded_gems/pathogen/demo/config/environments/development.rb @@ -1,4 +1,6 @@ -require "active_support/core_ext/integer/time" +# frozen_string_literal: true + +require 'active_support/core_ext/integer/time' Rails.application.configure do # Settings specified here will take precedence over those in config/application.rb. @@ -19,13 +21,13 @@ # Enable/disable caching. By default caching is disabled. # Run rails dev:cache to toggle caching. - if Rails.root.join("tmp/caching-dev.txt").exist? + if Rails.root.join('tmp/caching-dev.txt').exist? config.action_controller.perform_caching = true config.action_controller.enable_fragment_cache_logging = true config.cache_store = :memory_store config.public_file_server.headers = { - "Cache-Control" => "public, max-age=#{2.days.to_i}" + 'Cache-Control' => "public, max-age=#{2.days.to_i}" } else config.action_controller.perform_caching = false From 21e274c732e200e9e9dc9f26cde364cde809c8a1 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 15:27:05 -0600 Subject: [PATCH 64/68] refactor: Update logger initialization in production.rb for improved clarity --- embedded_gems/pathogen/demo/config/environments/production.rb | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/embedded_gems/pathogen/demo/config/environments/production.rb b/embedded_gems/pathogen/demo/config/environments/production.rb index 920210e71c..e15a863e45 100644 --- a/embedded_gems/pathogen/demo/config/environments/production.rb +++ b/embedded_gems/pathogen/demo/config/environments/production.rb @@ -49,7 +49,7 @@ # config.ssl_options = { redirect: { exclude: ->(request) { request.path == "/up" } } } # Log to STDOUT by default - config.logger = ActiveSupport::Logger.new(STDOUT) + config.logger = ActiveSupport::Logger.new($stdout) .tap { |logger| logger.formatter = ::Logger::Formatter.new } .then { |logger| ActiveSupport::TaggedLogging.new(logger) } From a38a023253dc1639d9fa453e3055691c5a1aaf4c Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Wed, 4 Dec 2024 15:27:39 -0600 Subject: [PATCH 65/68] refactor: Add frozen string literal comment and standardize string quotes in Rakefile for consistency --- embedded_gems/pathogen/demo/Rakefile | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/embedded_gems/pathogen/demo/Rakefile b/embedded_gems/pathogen/demo/Rakefile index 9a5ea7383a..488c551fee 100644 --- a/embedded_gems/pathogen/demo/Rakefile +++ b/embedded_gems/pathogen/demo/Rakefile @@ -1,6 +1,8 @@ +# frozen_string_literal: true + # Add your own tasks in files placed in lib/tasks ending in .rake, # for example lib/tasks/capistrano.rake, and they will automatically be available to Rake. -require_relative "config/application" +require_relative 'config/application' Rails.application.load_tasks From 584c4652a8abfe59a38364020e8579aeb78798e5 Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Fri, 6 Dec 2024 12:59:55 -0600 Subject: [PATCH 66/68] test: :white_check_mark: Moved tests into pathogen demo and updated selectors --- .../app/components/pathogen/tabs_panel.rb | 4 +- .../app/components/pathogen/tabs_panel/tab.rb | 3 +- .../demo/test/components}/base_button_test.rb | 13 ++- .../test/components}/base_component_test.rb | 0 .../demo/test/components}/button_test.rb | 31 ++++- .../demo/test/components/tabs_panel_test.rb | 86 ++++++++++++++ embedded_gems/pathogen/tailwind.config.js | 1 + test/components/pathogen/tabs_panel_test.rb | 107 ------------------ .../previews/pathogen_button_preview.rb | 89 --------------- .../all_schemes.html.erb | 13 --- .../leading_visual.html.erb | 4 - .../leading_visual_svg.html.erb | 11 -- .../trailing_visual.html.erb | 4 - .../trailing_visual_svg.html.erb | 12 -- .../previews/pathogen_tabs_panel_preview.rb | 8 -- .../default.html.erb | 5 - .../default_with_count.html.erb | 11 -- .../underline.html.erb | 5 - .../underline_with_count.html.erb | 11 -- 19 files changed, 124 insertions(+), 294 deletions(-) rename {test/components/pathogen => embedded_gems/pathogen/demo/test/components}/base_button_test.rb (72%) rename {test/components/pathogen => embedded_gems/pathogen/demo/test/components}/base_component_test.rb (100%) rename {test/components/pathogen => embedded_gems/pathogen/demo/test/components}/button_test.rb (68%) create mode 100644 embedded_gems/pathogen/demo/test/components/tabs_panel_test.rb delete mode 100644 test/components/pathogen/tabs_panel_test.rb delete mode 100644 test/components/previews/pathogen_button_preview.rb delete mode 100644 test/components/previews/pathogen_button_preview/all_schemes.html.erb delete mode 100644 test/components/previews/pathogen_button_preview/leading_visual.html.erb delete mode 100644 test/components/previews/pathogen_button_preview/leading_visual_svg.html.erb delete mode 100644 test/components/previews/pathogen_button_preview/trailing_visual.html.erb delete mode 100644 test/components/previews/pathogen_button_preview/trailing_visual_svg.html.erb delete mode 100644 test/components/previews/pathogen_tabs_panel_preview.rb delete mode 100644 test/components/previews/pathogen_tabs_panel_preview/default.html.erb delete mode 100644 test/components/previews/pathogen_tabs_panel_preview/default_with_count.html.erb delete mode 100644 test/components/previews/pathogen_tabs_panel_preview/underline.html.erb delete mode 100644 test/components/previews/pathogen_tabs_panel_preview/underline_with_count.html.erb diff --git a/embedded_gems/pathogen/app/components/pathogen/tabs_panel.rb b/embedded_gems/pathogen/app/components/pathogen/tabs_panel.rb index 2c9c58f062..a4fe01802b 100644 --- a/embedded_gems/pathogen/app/components/pathogen/tabs_panel.rb +++ b/embedded_gems/pathogen/app/components/pathogen/tabs_panel.rb @@ -12,8 +12,8 @@ class TabsPanel < Pathogen::Component BODY_TAG_DEFAULT = :ul BODY_DEFAULT_CLASSES = 'flex flex-wrap text-sm font-medium text-center ' \ - 'text-slate-500 border-b border-slate-200 ' \ - 'dark:border-slate-700 dark:text-slate-400' + 'text-light-default border-b border-light-neutral-secondary ' \ + 'dark:border-dark-neutral-primary dark:text-dark-default' renders_many :tabs, lambda { |count: nil, selected: false, **system_arguments| Pathogen::TabsPanel::Tab.new( selected: selected, diff --git a/embedded_gems/pathogen/app/components/pathogen/tabs_panel/tab.rb b/embedded_gems/pathogen/app/components/pathogen/tabs_panel/tab.rb index 66846a1c71..ca1a35fa73 100644 --- a/embedded_gems/pathogen/app/components/pathogen/tabs_panel/tab.rb +++ b/embedded_gems/pathogen/app/components/pathogen/tabs_panel/tab.rb @@ -36,6 +36,7 @@ def initialize(controls:, tab_type:, selected: false, text: '', wrapper_argument @system_arguments[:'aria-current'] = @selected ? 'page' : 'false' @system_arguments[:classes] = generate_tab_classes @system_arguments[:'aria-controls'] = @controls + @system_arguments[:'aria-selected'] = @selected end # rubocop:enable Metrics/ParameterLists @@ -55,7 +56,7 @@ def default_tab_classes 'rounded-t-lg active dark:bg-dark-neutral-primary dark:text-dark-brand-onneutral' else 'inline-block p-4 rounded-t-lg hover:text-light-neutral-emphasis ' \ - 'hover:bg-slate-50 dark:hover:bg-slate-800 dark:hover:text-slate-300' + 'hover:bg-light-default dark:hover:bg-dark-neutral-primary-hover dark:hover:text-dark-onneutral-primary' end end diff --git a/test/components/pathogen/base_button_test.rb b/embedded_gems/pathogen/demo/test/components/base_button_test.rb similarity index 72% rename from test/components/pathogen/base_button_test.rb rename to embedded_gems/pathogen/demo/test/components/base_button_test.rb index e03697e846..2faa8b123d 100644 --- a/test/components/pathogen/base_button_test.rb +++ b/embedded_gems/pathogen/demo/test/components/base_button_test.rb @@ -3,40 +3,41 @@ require 'test_helper' module Pathogen + # Test for the BaseButton component class BaseButtonTest < ViewComponent::TestCase def test_renders_default_button - render_inline(BaseButton.new) { 'Click me' } + render_inline(Pathogen::BaseButton.new) { 'Click me' } assert_selector "button[type='button']", text: 'Click me' end def test_renders_anchor_tag - render_inline(BaseButton.new(tag: :a)) { 'Click me' } + render_inline(Pathogen::BaseButton.new(tag: :a)) { 'Click me' } assert_selector 'a', text: 'Click me' refute_selector 'a[type]' # Ensure type is not set on anchor tags end def test_renders_submit_button - render_inline(BaseButton.new(type: :submit)) { 'Submit' } + render_inline(Pathogen::BaseButton.new(type: :submit)) { 'Submit' } assert_selector "button[type='submit']", text: 'Submit' end def test_renders_reset_button - render_inline(BaseButton.new(type: :reset)) { 'Reset' } + render_inline(Pathogen::BaseButton.new(type: :reset)) { 'Reset' } assert_selector "button[type='reset']", text: 'Reset' end def test_handles_disabled_state - render_inline(BaseButton.new(disabled: true)) { 'Disabled' } + render_inline(Pathogen::BaseButton.new(disabled: true)) { 'Disabled' } assert_selector 'button[disabled]', text: 'Disabled' end def test_converts_disabled_anchor_to_button - render_inline(BaseButton.new(tag: :a, disabled: true)) { 'Disabled Link' } + render_inline(Pathogen::BaseButton.new(tag: :a, disabled: true)) { 'Disabled Link' } assert_selector 'button[disabled]', text: 'Disabled Link' refute_selector 'a' # Ensure it's not an anchor diff --git a/test/components/pathogen/base_component_test.rb b/embedded_gems/pathogen/demo/test/components/base_component_test.rb similarity index 100% rename from test/components/pathogen/base_component_test.rb rename to embedded_gems/pathogen/demo/test/components/base_component_test.rb diff --git a/test/components/pathogen/button_test.rb b/embedded_gems/pathogen/demo/test/components/button_test.rb similarity index 68% rename from test/components/pathogen/button_test.rb rename to embedded_gems/pathogen/demo/test/components/button_test.rb index a20e22950a..8b0f2a0627 100644 --- a/test/components/pathogen/button_test.rb +++ b/embedded_gems/pathogen/demo/test/components/button_test.rb @@ -19,7 +19,12 @@ class ButtonTest < ViewComponent::TestCase c.with_leading_visual_icon(icon: 'arrow-right') end render_inline(component) { 'Button' } - assert_selector 'button[data-test-selector="playground"]:not([disabled])', count: 1, visible: true, text: 'Button' + assert_selector( + 'button[data-test-selector="playground"]:not([disabled])', + count: 1, + visible: true, + text: 'Button' + ) assert_selector 'button svg.leading_visual_icon', count: 1 end @@ -28,7 +33,12 @@ class ButtonTest < ViewComponent::TestCase c.with_trailing_visual_icon(icon: 'arrow-right') end render_inline(component) { 'Button' } - assert_selector 'button[data-test-selector="playground"]:not([disabled])', count: 1, visible: true, text: 'Button' + assert_selector( + 'button[data-test-selector="playground"]:not([disabled])', + count: 1, + visible: true, + text: 'Button' + ) assert_selector 'button svg.trailing_visual_icon', count: 1 end @@ -38,13 +48,24 @@ class ButtonTest < ViewComponent::TestCase end test 'button with aria attributes' do - render_inline(Pathogen::Button.new(test_selector: 'playground', aria: { label: 'Custom Label', expanded: true })) { 'Button' } - assert_selector 'button[data-test-selector="playground"][aria-label="Custom Label"][aria-expanded="true"]', count: 1, visible: true, text: 'Button' + render_inline( + Pathogen::Button.new( + test_selector: 'playground', + aria: { label: 'Custom Label', expanded: true } + ) + ) { 'Button' } + assert_selector( + 'button[data-test-selector="playground"][aria-label="Custom Label"][aria-expanded="true"]', + count: 1, + visible: true, + text: 'Button' + ) end test 'button as a link' do render_inline(Pathogen::Button.new(test_selector: 'playground', tag: :a, href: '/example')) { 'Link Button' } - assert_selector 'a[data-test-selector="playground"][href="/example"]', count: 1, visible: true, text: 'Link Button' + assert_selector 'a[data-test-selector="playground"][href="/example"]', count: 1, visible: true, + text: 'Link Button' end end end diff --git a/embedded_gems/pathogen/demo/test/components/tabs_panel_test.rb b/embedded_gems/pathogen/demo/test/components/tabs_panel_test.rb new file mode 100644 index 0000000000..031bc6e905 --- /dev/null +++ b/embedded_gems/pathogen/demo/test/components/tabs_panel_test.rb @@ -0,0 +1,86 @@ +# frozen_string_literal: true + +require 'test_helper' + +module Pathogen + # Test for the TabsPanel component + class TabsPanelTest < ViewComponent::TestCase + test 'default panel' do + tabs_component = Pathogen::TabsPanel.new(id: 'test_panel', test_selector: 'test_panel').tap do |tabs| + tabs.with_tab(selected: true, href: '#', text: 'Tab 1') + tabs.with_tab(selected: false, href: '#', text: 'Tab 2') + tabs.with_tab(selected: false, href: '#', text: 'Tab 3') + end + render_inline(tabs_component) + + assert_selector 'nav[data-test-selector="test_panel"]' + assert_selector 'ul[role="tablist"]', count: 1 + assert_selector 'li', count: 3 + assert_selector 'a[aria-current="page"][aria-selected="true"]', text: 'Tab 1' + assert_selector 'a[aria-selected="false"]', text: 'Tab 2' + assert_selector 'a[aria-selected="false"]', text: 'Tab 3' + end + + test 'default panel with counts' do + tabs_component = Pathogen::TabsPanel.new(id: 'test_panel', test_selector: 'test_panel').tap do |tabs| + tabs.with_tab(selected: true, href: '#', text: 'Tab 1') do |tab| + tab.with_count(count: 1) + end + tabs.with_tab(selected: false, href: '#', text: 'Tab 2') do |tab| + tab.with_count(count: 10) + end + tabs.with_tab(selected: false, href: '#', text: 'Tab 3') do |tab| + tab.with_count(count: 100) + end + end + render_inline(tabs_component) + + # Selected tab + assert_selector 'a[aria-selected="true"] span', text: '1' + + # Unselected tabs + assert_selector 'a[aria-selected="false"] span', text: '10' + assert_selector 'a[aria-selected="false"] span', text: '100' + end + + test 'underline panel' do + tabs_component = Pathogen::TabsPanel.new(id: 'test_panel', test_selector: 'test_panel', + type: 'underline').tap do |tabs| + tabs.with_tab(selected: true, href: '#', text: 'Tab 1') + tabs.with_tab(selected: false, href: '#', text: 'Tab 2') + tabs.with_tab(selected: false, href: '#', text: 'Tab 3') + end + render_inline(tabs_component) + + assert_selector 'nav[id="test_panel"]' + assert_selector 'ul[role="tablist"]', count: 1 + assert_selector 'li', count: 3 + assert_selector 'a[aria-selected="true"]', text: 'Tab 1' + assert_selector 'a[aria-selected="false"]', text: 'Tab 2' + assert_selector 'a[aria-selected="false"]', text: 'Tab 3' + end + + test 'underline panel with counts' do + tabs_component = Pathogen::TabsPanel.new(id: 'test_panel', test_selector: 'test_panel', + type: 'underline').tap do |tabs| + tabs.with_tab(selected: true, href: '#', text: 'Tab 1') do |tab| + tab.with_count(count: 1) + end + tabs.with_tab(selected: false, href: '#', text: 'Tab 2') do |tab| + tab.with_count(count: 10) + end + tabs.with_tab(selected: false, href: '#', text: 'Tab 3') do |tab| + tab.with_count(count: 100) + end + end + render_inline(tabs_component) + + # Selected tab + assert_selector 'a[aria-selected="true"] span', text: '1' + + # Unselected tabs + assert_selector 'a[aria-selected="false"] span', text: '10' + assert_selector 'a[aria-selected="false"] span', text: '100' + end + end +end diff --git a/embedded_gems/pathogen/tailwind.config.js b/embedded_gems/pathogen/tailwind.config.js index 38001120c1..16bec68988 100644 --- a/embedded_gems/pathogen/tailwind.config.js +++ b/embedded_gems/pathogen/tailwind.config.js @@ -59,6 +59,7 @@ module.exports = { // Light mode "light-brand-primary": globalColors.brand[600], "light-neutral-primary": globalColors.neutral[400], + "light-neutral-secondary": globalColors.neutral[200], "light-danger-primary": globalColors.danger[400], // Dark mode diff --git a/test/components/pathogen/tabs_panel_test.rb b/test/components/pathogen/tabs_panel_test.rb deleted file mode 100644 index d863cc9ccb..0000000000 --- a/test/components/pathogen/tabs_panel_test.rb +++ /dev/null @@ -1,107 +0,0 @@ -# frozen_string_literal: true - -require 'test_helper' - -module Pathogen - class TabsPanelTest < ViewComponent::TestCase - test 'default panel' do - tabs_component = Pathogen::TabsPanel.new(id: 'test_panel').tap do |tabs| - tabs.with_tab(selected: true, href: '#', text: 'Tab 1') - tabs.with_tab(selected: false, href: '#', text: 'Tab 2') - tabs.with_tab(selected: false, href: '#', text: 'Tab 3') - end - render_inline(tabs_component) - - assert_selector 'nav[id="test_panel"]' - assert_selector 'ul[role="tablist"]', count: 1 - assert_selector 'li', count: 3 - assert_selector 'a[class="inline-block p-4 text-primary-600 bg-slate-100 ' \ - 'rounded-t-lg active dark:bg-slate-800 dark:text-primary-500"]', - text: 'Tab 1' - assert_selector 'a[class="inline-block p-4 rounded-t-lg hover:text-slate-600 ' \ - 'hover:bg-slate-50 dark:hover:bg-slate-800 dark:hover:text-slate-300"]', - text: 'Tab 2' - assert_selector 'a[class="inline-block p-4 rounded-t-lg hover:text-slate-600 ' \ - 'hover:bg-slate-50 dark:hover:bg-slate-800 dark:hover:text-slate-300"]', - text: 'Tab 3' - end - - test 'default panel with counts' do - tabs_component = Pathogen::TabsPanel.new(id: 'test_panel').tap do |tabs| - tabs.with_tab(selected: true, href: '#', text: 'Tab 1') do |tab| - tab.with_count(count: 1) - end - tabs.with_tab(selected: false, href: '#', text: 'Tab 2') do |tab| - tab.with_count(count: 10) - end - tabs.with_tab(selected: false, href: '#', text: 'Tab 3') do |tab| - tab.with_count(count: 100) - end - end - render_inline(tabs_component) - - # Selected tab - assert_selector 'span[class="bg-slate-300 text-slate-800 text-xs ' \ - 'font-medium ms-2 px-2 py-1 rounded-full dark:bg-slate-500 dark:text-slate-300"]', - text: '1' - - # Unselected tabs - assert_selector 'span[class="bg-slate-100 text-slate-800 text-xs ' \ - 'font-medium ms-2 px-2 py-1 rounded-full dark:bg-slate-700 dark:text-slate-300"]', - text: '10' - assert_selector 'span[class="bg-slate-100 text-slate-800 text-xs ' \ - 'font-medium ms-2 px-2 py-1 rounded-full dark:bg-slate-700 dark:text-slate-300"]', - text: '100' - end - - test 'underline panel' do - tabs_component = Pathogen::TabsPanel.new(id: 'test_panel', type: 'underline').tap do |tabs| - tabs.with_tab(selected: true, href: '#', text: 'Tab 1') - tabs.with_tab(selected: false, href: '#', text: 'Tab 2') - tabs.with_tab(selected: false, href: '#', text: 'Tab 3') - end - render_inline(tabs_component) - - assert_selector 'nav[id="test_panel"]' - assert_selector 'ul[role="tablist"]', count: 1 - assert_selector 'li', count: 3 - assert_selector 'a[class="inline-block p-4 text-primary-600 border-b-2 border-primary-600 ' \ - 'rounded-t-lg active dark:text-primary-500 dark:border-primary-500"]', - text: 'Tab 1' - assert_selector 'a[class="inline-block p-4 border-b-2 border-transparent rounded-t-lg ' \ - 'hover:text-slate-600 hover:border-slate-300 dark:hover:text-slate-300"]', - text: 'Tab 2' - assert_selector 'a[class="inline-block p-4 border-b-2 border-transparent rounded-t-lg ' \ - 'hover:text-slate-600 hover:border-slate-300 dark:hover:text-slate-300"]', - text: 'Tab 3' - end - - test 'underline panel with counts' do - tabs_component = Pathogen::TabsPanel.new(id: 'test_panel', type: 'underline').tap do |tabs| - tabs.with_tab(selected: true, href: '#', text: 'Tab 1') do |tab| - tab.with_count(count: 1) - end - tabs.with_tab(selected: false, href: '#', text: 'Tab 2') do |tab| - tab.with_count(count: 10) - end - tabs.with_tab(selected: false, href: '#', text: 'Tab 3') do |tab| - tab.with_count(count: 100) - end - end - render_inline(tabs_component) - - # Selected tab - assert_selector 'span[class="bg-slate-300 text-slate-800 text-xs ' \ - 'font-medium ms-2 px-2 py-1 rounded-full dark:bg-slate-500 dark:text-slate-300"]', - text: '1' - - # Unselected tabs - assert_selector 'span[class="bg-slate-100 text-slate-800 text-xs ' \ - 'font-medium ms-2 px-2 py-1 rounded-full dark:bg-slate-700 dark:text-slate-300"]', - text: '10' - assert_selector 'span[class="bg-slate-100 text-slate-800 text-xs ' \ - 'font-medium ms-2 px-2 py-1 rounded-full dark:bg-slate-700 dark:text-slate-300"]', - text: '100' - end - end -end diff --git a/test/components/previews/pathogen_button_preview.rb b/test/components/previews/pathogen_button_preview.rb deleted file mode 100644 index a7311127c4..0000000000 --- a/test/components/previews/pathogen_button_preview.rb +++ /dev/null @@ -1,89 +0,0 @@ -# frozen_string_literal: true - -class PathogenButtonPreview < ViewComponent::Preview - # @param scheme select { choices: [default,primary, danger] } "The color scheme of the button." - # @param size select { choices: [small, medium] } "The size of the button." - # @param disabled toggle "The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants." - # @param block toggle "If true, the button will take up the full width of its container." - def playground(scheme: :default, size: :medium, disabled: false, block: false) - render Pathogen::Button.new(scheme:, size:, disabled:, block:, test_selector: 'playground') do - 'Button' - end - end - - # @param disabled toggle "The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants." - def default(disabled: false) - render Pathogen::Button.new(disabled:, test_selector: 'default') do - 'Button' - end - end - - # @param disabled toggle "The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants." - # @param block toggle "If true, the button will take up the full width of its container." - def primary(disabled: false, block: false) - render Pathogen::Button.new(scheme: :primary, disabled:, block:, test_selector: 'primary') do - 'Button' - end - end - - # @param disabled toggle "The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants." - # @param block toggle "If true, the button will take up the full width of its container." - def danger(disabled: false, block: false) - render Pathogen::Button.new(scheme: :danger, disabled:, block:, test_selector: 'danger') do - 'Button' - end - end - - def all_schemes; end - - def full_width - render Pathogen::Button.new(block: true, test_selector: 'full-width') do - 'Button' - end - end - - # @param scheme select { choices: [default,primary, danger] } "The color scheme of the button." - # @param href text "The URL to link to." - # @param disabled toggle "The Boolean disabled attribute, when present, makes the element not mutable, focusable, or even submitted with the form. The user can neither edit nor focus on the control, nor its form control descendants." - def link_as_a_button(scheme: :default, href: '#', disabled: false) - render Pathogen::Button.new(scheme:, href:, tag: :a, disabled:, test_selector: 'link-as-a-button') do - 'Button' - end - end - - # @param scheme select { choices: [default,primary, danger] } "The color scheme of the button." - # @param size select { choices: [small, medium] } "The size of the button." - def leading_visual(scheme: :primary, size: :medium) - render_with_template(locals: { - scheme:, - size: - }) - end - - # @param scheme select { choices: [default,primary, danger] } "The color scheme of the button." - # @param size select { choices: [small, medium] } "The size of the button." - def leading_visual_svg(scheme: :primary, size: :medium) - render_with_template(locals: { - scheme:, - size: - }) - end - - # @param scheme select { choices: [default,primary, danger] } "The color scheme of the button." - # @param size select { choices: [small, medium] } "The size of the button." - def trailing_visual(scheme: :primary, size: :medium) - render_with_template(locals: { - scheme:, - size: - }) - end - - # @param scheme select { choices: [default,primary, danger] } "The color scheme of the button." - # @param size select { choices: [small, medium] } "The size of the button." - def trailing_visual_svg(scheme: :primary, size: :medium) - render_with_template(locals: { - scheme:, - size: - }) - end -end diff --git a/test/components/previews/pathogen_button_preview/all_schemes.html.erb b/test/components/previews/pathogen_button_preview/all_schemes.html.erb deleted file mode 100644 index b3620f10a4..0000000000 --- a/test/components/previews/pathogen_button_preview/all_schemes.html.erb +++ /dev/null @@ -1,13 +0,0 @@ -
- <%= render Pathogen::Button.new(scheme: :default) do %> - Button - <% end %> - - <%= render Pathogen::Button.new(scheme: :primary) do %> - Button - <% end %> - - <%= render Pathogen::Button.new(scheme: :danger) do %> - Button - <% end %> -
diff --git a/test/components/previews/pathogen_button_preview/leading_visual.html.erb b/test/components/previews/pathogen_button_preview/leading_visual.html.erb deleted file mode 100644 index 714db311a3..0000000000 --- a/test/components/previews/pathogen_button_preview/leading_visual.html.erb +++ /dev/null @@ -1,4 +0,0 @@ -<%= render Pathogen::Button.new(scheme:, size:) do |button| %> - <% button.with_leading_visual_icon(icon: "magnifying-glass") %> - Search -<% end %> diff --git a/test/components/previews/pathogen_button_preview/leading_visual_svg.html.erb b/test/components/previews/pathogen_button_preview/leading_visual_svg.html.erb deleted file mode 100644 index 1ddab85463..0000000000 --- a/test/components/previews/pathogen_button_preview/leading_visual_svg.html.erb +++ /dev/null @@ -1,11 +0,0 @@ -<%= render Pathogen::Button.new(scheme:, size:) do |button| %> - <% button.with_leading_visual_svg do %> - - <% end %> - Warning -<% end %> diff --git a/test/components/previews/pathogen_button_preview/trailing_visual.html.erb b/test/components/previews/pathogen_button_preview/trailing_visual.html.erb deleted file mode 100644 index bdd73408fb..0000000000 --- a/test/components/previews/pathogen_button_preview/trailing_visual.html.erb +++ /dev/null @@ -1,4 +0,0 @@ -<%= render Pathogen::Button.new(scheme:, size:) do |button| %> - <% button.with_trailing_visual_icon(icon: "arrow-right") %> - Proceed -<% end %> diff --git a/test/components/previews/pathogen_button_preview/trailing_visual_svg.html.erb b/test/components/previews/pathogen_button_preview/trailing_visual_svg.html.erb deleted file mode 100644 index e7be1515bb..0000000000 --- a/test/components/previews/pathogen_button_preview/trailing_visual_svg.html.erb +++ /dev/null @@ -1,12 +0,0 @@ -<%= render Pathogen::Button.new(scheme:, size:) do |button| %> - <% button.with_trailing_visual_svg do %> - - - <% end %> - Warning -<% end %> diff --git a/test/components/previews/pathogen_tabs_panel_preview.rb b/test/components/previews/pathogen_tabs_panel_preview.rb deleted file mode 100644 index 73f5a805b7..0000000000 --- a/test/components/previews/pathogen_tabs_panel_preview.rb +++ /dev/null @@ -1,8 +0,0 @@ -# frozen_string_literal: true - -class PathogenTabsPanelPreview < ViewComponent::Preview - def default; end - def default_with_count; end - def underline; end - def underline_with_count; end -end diff --git a/test/components/previews/pathogen_tabs_panel_preview/default.html.erb b/test/components/previews/pathogen_tabs_panel_preview/default.html.erb deleted file mode 100644 index 041aba147d..0000000000 --- a/test/components/previews/pathogen_tabs_panel_preview/default.html.erb +++ /dev/null @@ -1,5 +0,0 @@ -<%= render Pathogen::TabsPanel.new(id: "default-tabs-panel-id", label: "default tabs panel") do |tabs| %> - <%= tabs.with_tab(selected: true, href: "#", text: "Tab 1") %> - <%= tabs.with_tab(selected: false, href: "#", text: "Tab 2") %> - <%= tabs.with_tab(selected: false, href: "#", text: "Tab 3") %> -<% end %> diff --git a/test/components/previews/pathogen_tabs_panel_preview/default_with_count.html.erb b/test/components/previews/pathogen_tabs_panel_preview/default_with_count.html.erb deleted file mode 100644 index f1ee0cd7d3..0000000000 --- a/test/components/previews/pathogen_tabs_panel_preview/default_with_count.html.erb +++ /dev/null @@ -1,11 +0,0 @@ -<%= render Pathogen::TabsPanel.new(id: "default-tabs-panel-id", label: "default tabs panel") do |tabs| %> - <%= tabs.with_tab(selected: true, href: "#", text: "Tab 1") do |tab| %> - <%= tab.with_count(count: 1) %> - <% end %> - <%= tabs.with_tab(selected: false, href: "#", text: "Tab 2") do |tab| %> - <%= tab.with_count(count: 10) %> - <% end %> - <%= tabs.with_tab(selected: false, href: "#", text: "Tab 3") do |tab| %> - <%= tab.with_count(count: 100) %> - <% end %> -<% end %> diff --git a/test/components/previews/pathogen_tabs_panel_preview/underline.html.erb b/test/components/previews/pathogen_tabs_panel_preview/underline.html.erb deleted file mode 100644 index 56ed1fd1b9..0000000000 --- a/test/components/previews/pathogen_tabs_panel_preview/underline.html.erb +++ /dev/null @@ -1,5 +0,0 @@ -<%= render Pathogen::TabsPanel.new(id: "default-tabs-panel-id", type: 'underline', label: "default tabs panel") do |tabs| %> - <%= tabs.with_tab(selected: true, href: "#", text: "Tab 1") %> - <%= tabs.with_tab(selected: false, href: "#", text: "Tab 2") %> - <%= tabs.with_tab(selected: false, href: "#", text: "Tab 3") %> -<% end %> diff --git a/test/components/previews/pathogen_tabs_panel_preview/underline_with_count.html.erb b/test/components/previews/pathogen_tabs_panel_preview/underline_with_count.html.erb deleted file mode 100644 index 62ee5bb9ad..0000000000 --- a/test/components/previews/pathogen_tabs_panel_preview/underline_with_count.html.erb +++ /dev/null @@ -1,11 +0,0 @@ -<%= render Pathogen::TabsPanel.new(id: "default-tabs-panel-id", type: "underline", label: "default tabs panel") do |tabs| %> - <%= tabs.with_tab(selected: true, href: "#", text: "Tab 1") do |tab| %> - <%= tab.with_count(count: 1) %> - <% end %> - <%= tabs.with_tab(selected: false, href: "#", text: "Tab 2") do |tab| %> - <%= tab.with_count(count: 10) %> - <% end %> - <%= tabs.with_tab(selected: false, href: "#", text: "Tab 3") do |tab| %> - <%= tab.with_count(count: 100) %> - <% end %> -<% end %> From 2640925985ef932065c7946d98afc2d309f2d36e Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Mon, 9 Dec 2024 11:59:07 -0600 Subject: [PATCH 67/68] style: :lipstick: Updated default brand color to tailwind green --- embedded_gems/pathogen/tailwind.config.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/embedded_gems/pathogen/tailwind.config.js b/embedded_gems/pathogen/tailwind.config.js index 16bec68988..cb62fb981b 100644 --- a/embedded_gems/pathogen/tailwind.config.js +++ b/embedded_gems/pathogen/tailwind.config.js @@ -9,7 +9,7 @@ e.g. bg-light-brand-primary instead of bg-bg-brand-600 */ const globalColors = { - brand: colors.lime, + brand: colors.green, neutral: colors.slate, danger: colors.rose, success: colors.green, From 8b6f06dea46cdcd9937484b14357945bc330a12a Mon Sep 17 00:00:00 2001 From: Josh Adam Date: Mon, 9 Dec 2024 13:00:15 -0600 Subject: [PATCH 68/68] fix: :lipstick: Fixed link hover Required changing setting the disabled hover state to the default color --- .../pathogen/app/components/pathogen/button.rb | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/embedded_gems/pathogen/app/components/pathogen/button.rb b/embedded_gems/pathogen/app/components/pathogen/button.rb index 4c125c6b59..3bad5999d5 100644 --- a/embedded_gems/pathogen/app/components/pathogen/button.rb +++ b/embedded_gems/pathogen/app/components/pathogen/button.rb @@ -22,7 +22,7 @@ class Button < Pathogen::Component 'text-light-onbrand-primary', 'border', 'border-light-brand-primary', - 'enabled:hover:bg-light-brand-primary-hover', + 'disabled:hover:bg-light-brand-primary hover:bg-light-brand-primary-hover', 'focus:ring-light-brand-primary' ].freeze @@ -30,7 +30,7 @@ class Button < Pathogen::Component 'dark:bg-dark-brand-primary', 'dark:text-dark-onbrand-primary', 'dark:border-dark-brand-primary', - 'dark:enabled:hover:bg-dark-brand-primary-hover', + 'dark:disabled:hover:bg-dark-brand-primary dark:hover:bg-dark-brand-primary-hover', 'dark:focus:ring-dark-brand-primary' ].freeze @@ -39,14 +39,15 @@ class Button < Pathogen::Component 'text-light-onneutral-primary', 'border', 'border-light-neutral-primary', - 'enabled:hover:bg-light-neutral-primary-hover', + 'disabled:hover:bg-light-neutral-primary hover:bg-light-neutral-primary-hover', 'focus:ring-light-neutral-primary' ].freeze DEFAULT_DARK_SCHEME_CLASSES = [ 'dark:bg-dark-neutral-primary', 'dark:text-dark-onneutral-primary', - 'dark:enabled:hover:bg-dark-neutral-primary-hover', + 'dark:border-dark-neutral-primary', + 'dark:disabled:hover:bg-dark-neutral-primary dark:hover:bg-dark-neutral-primary-hover', 'dark:focus:ring-dark-neutral-primary' ].freeze @@ -55,14 +56,15 @@ class Button < Pathogen::Component 'text-light-ondanger-primary', 'border', 'border-light-danger-primary', - 'enabled:hover:bg-light-danger-primary-hover', + 'disabled:hover:bg-light-danger-primary hover:bg-light-danger-primary-hover', 'focus:ring-light-danger-primary' ].freeze DANGER_DARK_SCHEME_CLASSES = [ 'dark:bg-dark-danger-primary', 'dark:text-dark-ondanger-primary', - 'dark:enabled:hover:bg-dark-danger-primary-hover', + 'dark:border-dark-danger-primary', + 'dark:disabled:hover:bg-dark-danger-primary dark:hover:bg-dark-danger-primary-hover', 'dark:focus:ring-dark-danger-primary' ].freeze