Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Pathogen: Demo app and lookbook #851

Draft
wants to merge 68 commits into
base: main
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
68 commits
Select commit Hold shift + click to select a range
d2d056a
feat: :sparkles: Basic files to get lookbook previews for pathogen up…
joshsadam Nov 19, 2024
b2fee92
feat: :sparkles: Working lookbook preview (except css)
joshsadam Nov 20, 2024
8c208af
fix: Cleaned up gitignore
joshsadam Nov 20, 2024
9e410fc
fix: Fixed preview issue caused by wrong file name
joshsadam Nov 21, 2024
cee98d8
chore: Working on getting css to work
joshsadam Nov 22, 2024
c94aad4
feat: Working on getting tailwind config into the Pathogen library
joshsadam Nov 25, 2024
2b89ddd
fix: :lipstick: Fixed issue with pathogen css not loading in previews
joshsadam Nov 26, 2024
297de07
style: :lipstick: Cleaned up styles using updated tailwind config
joshsadam Nov 26, 2024
8d8e5ea
feat: Moved all previews into the demo
joshsadam Nov 26, 2024
ad55170
style: :lipstick: Cleaned up button styles and preview
joshsadam Nov 27, 2024
c5ae86a
style: :lipstick: Set tailwind darkmode to use class
joshsadam Nov 27, 2024
3f45bbf
style: :lipstick: Cleaning up lookbook preview for dark
joshsadam Nov 27, 2024
2d23fb9
style: :lipstick: Updated button styles for light and dark and added …
joshsadam Nov 27, 2024
ae42c18
refactor: :recycle: Moved previews into the main Pathogen directory
joshsadam Nov 27, 2024
cdce3d1
fix: :lipstick: Fixed button styles on neutral
joshsadam Nov 27, 2024
c80fb20
style: :lipstick: Working on updating tab component
joshsadam Nov 28, 2024
26a4c02
style: Working on tabs
joshsadam Nov 28, 2024
cbe5cba
style: :lipstick: Fixed tabs colours especially for counts in dark an…
joshsadam Nov 28, 2024
976963a
style: :lipstick: More cleanup of tab styles
joshsadam Nov 28, 2024
6e4f15f
build:
joshsadam Nov 28, 2024
896c0fc
docs: :memo: Adding Pathogen specific colour documentation
joshsadam Nov 29, 2024
68ab8c6
style: :lipstick: Working on secondary colours
joshsadam Nov 29, 2024
684ed8d
style: :lipstick: Updated class names on button component
joshsadam Nov 29, 2024
47b62dd
style: :lipstick: Cleaned up tab styles with new class names
joshsadam Nov 29, 2024
75a4d6a
style: :lipstick: Updating secondary text colours
joshsadam Dec 2, 2024
219339b
fix: Fixing path issues
joshsadam Dec 2, 2024
5e67902
fix: Fixed rubocop error for quotes
joshsadam Dec 3, 2024
d14fb5f
fix: Fixed general rubocop errors
joshsadam Dec 3, 2024
12272ec
fix: Fixed rubop errors
joshsadam Dec 3, 2024
224850b
build: :building_construction: Added setup script to install dependen…
joshsadam Dec 3, 2024
1a2aa79
style: Playing with default colours
joshsadam Dec 3, 2024
118195f
refactor: Remove semantic colours documentation
joshsadam Dec 4, 2024
e14afa0
refactor: Enhance setup script with structured installation steps and…
joshsadam Dec 4, 2024
ba3eb1e
refactor: Rewrite dev script to use bash, add help text, and improve …
joshsadam Dec 4, 2024
06c0e2b
refactor: Clean up Tailwind configuration by removing unused color va…
joshsadam Dec 4, 2024
b59a088
refactor: Remove unused gems from the development group in Gemfile
joshsadam Dec 4, 2024
240157c
refactor: Remove unused error pages and assets from the demo public d…
joshsadam Dec 4, 2024
990c5f9
refactor: Remove unused RuboCop configuration file from demo directory
joshsadam Dec 4, 2024
aee1ca3
refactor: Remove unused gems from Gemfile.lock
joshsadam Dec 4, 2024
18a51d6
refactor: Simplify class generation in Count component by consolidati…
joshsadam Dec 4, 2024
09c854a
refactor: Enhance test_helper.rb with comments for clarity and parall…
joshsadam Dec 4, 2024
44cc8be
refactor: Standardize gem syntax in Gemfile for consistency
joshsadam Dec 4, 2024
cd0f896
refactor: Improve comments in test_helper.rb for better clarity and u…
joshsadam Dec 4, 2024
e0af8fa
refactor: Simplify route definitions in routes.rb for improved readab…
joshsadam Dec 4, 2024
22ba2b9
refactor: Enhance ApplicationSystemTestCase with comments for clarity…
joshsadam Dec 4, 2024
2b4332f
refactor: Add frozen string literal comment to seeds.rb for performan…
joshsadam Dec 4, 2024
9c01a45
refactor: Add frozen string literal comment and standardize string qu…
joshsadam Dec 4, 2024
8533f60
refactor: Add frozen string literal comment and standardize string qu…
joshsadam Dec 4, 2024
37f6dec
chore: Added .keep to test folder to ensure gets pushed
joshsadam Dec 4, 2024
269d87a
refactor: Add frozen string literal comment and standardize string qu…
joshsadam Dec 4, 2024
53927ae
refactor: Add frozen string literal comment to initializers for perfo…
joshsadam Dec 4, 2024
c0fef60
refactor: Standardize string quotes in importmap file for consistency
joshsadam Dec 4, 2024
c0c12fe
refactor: Standardize string quotes in config.ru for consistency
joshsadam Dec 4, 2024
273e34d
refactor: Add frozen string literal comment and standardize string qu…
joshsadam Dec 4, 2024
53100b1
refactor: Add frozen string literal comment and standardize string qu…
joshsadam Dec 4, 2024
3bf0c66
refactor: Add frozen string literal comment and standardize string qu…
joshsadam Dec 4, 2024
2eaca36
refactor: Add nodoc comment to Application class in application.rb fo…
joshsadam Dec 4, 2024
c907c79
refactor: Add frozen string literal comment and standardize string qu…
joshsadam Dec 4, 2024
0577d1d
refactor: Add frozen string literal comment and standardize string qu…
joshsadam Dec 4, 2024
87d7db0
refactor: Add frozen string literal comment and standardize string qu…
joshsadam Dec 4, 2024
2df7fd2
refactor: Update light neutral color values in tailwind.config.js for…
joshsadam Dec 4, 2024
6cbc5b4
refactor: Remove unused color theme methods and add frozen string lit…
joshsadam Dec 4, 2024
c1e76a5
refactor: Add frozen string literal comment and standardize string qu…
joshsadam Dec 4, 2024
21e274c
refactor: Update logger initialization in production.rb for improved …
joshsadam Dec 4, 2024
a38a023
refactor: Add frozen string literal comment and standardize string qu…
joshsadam Dec 4, 2024
584c465
test: :white_check_mark: Moved tests into pathogen demo and updated s…
joshsadam Dec 6, 2024
2640925
style: :lipstick: Updated default brand color to tailwind green
joshsadam Dec 9, 2024
8b6f06d
fix: :lipstick: Fixed link hover
joshsadam Dec 9, 2024
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions bin/dev
Original file line number Diff line number Diff line change
Expand Up @@ -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 "$@"
5 changes: 5 additions & 0 deletions embedded_gems/pathogen/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
node_modules
demo/node_modules
demo/log
demo/tmp
app/assets/builds
1 change: 1 addition & 0 deletions embedded_gems/pathogen/Gemfile
Original file line number Diff line number Diff line change
Expand Up @@ -13,4 +13,5 @@ group :development do
gem 'rubocop-performance'
gem 'rubocop-rails'
gem 'rubocop-rails-accessibility', '~> 1.0'
gem 'tailwindcss-rails'
end
10 changes: 10 additions & 0 deletions embedded_gems/pathogen/Gemfile.lock
Original file line number Diff line number Diff line change
Expand Up @@ -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)
Expand Down Expand Up @@ -251,6 +260,7 @@ DEPENDENCIES
rubocop-performance
rubocop-rails
rubocop-rails-accessibility (~> 1.0)
tailwindcss-rails

BUNDLED WITH
2.5.21
2 changes: 2 additions & 0 deletions embedded_gems/pathogen/Procfile
Original file line number Diff line number Diff line change
@@ -0,0 +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
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
72 changes: 64 additions & 8 deletions embedded_gems/pathogen/app/components/pathogen/button.rb
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,61 @@ 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

# CSS classes for different button schemes
PRIMARY_SCHEME_CLASSES = [
'bg-light-brand-primary',
'text-light-onbrand-primary',
'border',
'border-light-brand-primary',
'disabled:hover:bg-light-brand-primary hover:bg-light-brand-primary-hover',
'focus:ring-light-brand-primary'
].freeze

PRIMARY_DARK_SCHEME_CLASSES = [
'dark:bg-dark-brand-primary',
'dark:text-dark-onbrand-primary',
'dark:border-dark-brand-primary',
'dark:disabled:hover:bg-dark-brand-primary dark:hover:bg-dark-brand-primary-hover',
'dark:focus:ring-dark-brand-primary'
].freeze

DEFAULT_SCHEME_CLASSES = [
'bg-light-neutral-primary',
'text-light-onneutral-primary',
'border',
'border-light-neutral-primary',
'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: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

DANGER_SCHEME_CLASSES = [
'bg-light-danger-primary',
'text-light-ondanger-primary',
'border',
'border-light-danger-primary',
'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: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

# rubocop:disable Metrics/ParameterLists
def initialize(base_button_class: Pathogen::BaseButton, scheme: DEFAULT_SCHEME, size: DEFAULT_SIZE, block: false,
disabled: false, **system_arguments)
Expand Down Expand Up @@ -72,13 +124,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-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'
}[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
4 changes: 2 additions & 2 deletions embedded_gems/pathogen/app/components/pathogen/tabs_panel.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down
14 changes: 3 additions & 11 deletions embedded_gems/pathogen/app/components/pathogen/tabs_panel/count.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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-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'
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'
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
Expand Down
18 changes: 11 additions & 7 deletions embedded_gems/pathogen/app/components/pathogen/tabs_panel/tab.rb
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -51,20 +52,23 @@ 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
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-light-default dark:hover:bg-dark-neutral-primary-hover dark:hover:text-dark-onneutral-primary'
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'
'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
Expand Down
57 changes: 57 additions & 0 deletions embedded_gems/pathogen/bin/dev
Original file line number Diff line number Diff line change
@@ -0,0 +1,57 @@
#!/usr/bin/env bash

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 with Procfile
echo -e "${GREEN}Starting development environment...${NC}"
exec foreman start -f Procfile "$@"
53 changes: 53 additions & 0 deletions embedded_gems/pathogen/bin/setup
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
#!/usr/bin/env ruby
# frozen_string_literal: true

require "fileutils"

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

def step(message)
puts "\n#{COLORS[:green]}== Step #{@step}: #{message} ==#{COLORS[:reset]}"
@step += 1
yield if block_given?
end

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
39 changes: 39 additions & 0 deletions embedded_gems/pathogen/demo/.dockerignore
Original file line number Diff line number Diff line change
@@ -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*
12 changes: 12 additions & 0 deletions embedded_gems/pathogen/demo/.github/dependabot.yml
Original file line number Diff line number Diff line change
@@ -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
Loading
Loading