Skip to content

Migrate the docs components to app/components to align with Phlex conversions #165

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.

Sign up for GitHub

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

Merged
stephannv merged 3 commits into from
Feb 18, 2025
Merged

Migrate the docs components to app/components to align with Phlex conversions #165

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9653d63
Migrate the docs components to app/components to align with Phlex con…
karinevieira Feb 18, 2025
bd7fa2c
fix uninitialized constant error
karinevieira Feb 18, 2025
411179e
remove log
karinevieira Feb 18, 2025
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
72 changes: 72 additions & 0 deletions app/components/docs/components_table.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,72 @@
# frozen_string_literal: true

module Components
module Docs
class ComponentsTable < Components::Base
def initialize(component_files)
@component_files = component_files.sort_by { |component| [component.built_using, component.name] }
end

def view_template
Heading(level: 2) { "Components" }

component_table_view(@component_files)
end

private

def component_table_view(components)
div(class: "border rounded-lg overflow-hidden") do
Table do
TableHeader do
TableRow do
div(class: "flex items-center space-x-2") do
TableHead { "Component" }
end
TableHead(class: "w-full grow-1") { "Built using" }
TableHead(class: "text-right") { "Source" }
end
end

TableBody do
components.each do |component|
TableRow do
TableCell do
InlineCode { component.name }
end
TableCell do
component.built_using
case component.built_using&.to_sym
when :phlex
Badge(size: :sm, variant: :rose) { "Phlex" }
when :stimulus
Badge(size: :sm, variant: :amber) { "Stimulus JS" }
end
end
TableCell do
div(class: "flex justify-end") do
Link(href: component.source, variant: :outline, size: :sm, target: "_blank") do
github_icon
span(class: "ml-2") { "See source" }
end
end
end
end
end
end
end
end
end

def github_icon
svg(viewbox: "0 0 438.549 438.549", class: "h-4 w-4") do |s|
s.path(
fill: "currentColor",
d:
"M409.132 114.573c-19.608-33.596-46.205-60.194-79.798-79.8-33.598-19.607-70.277-29.408-110.063-29.408-39.781 0-76.472 9.804-110.063 29.408-33.596 19.605-60.192 46.204-79.8 79.8C9.803 148.168 0 184.854 0 224.63c0 47.78 13.94 90.745 41.827 128.906 27.884 38.164 63.906 64.572 108.063 79.227 5.14.954 8.945.283 11.419-1.996 2.475-2.282 3.711-5.14 3.711-8.562 0-.571-.049-5.708-.144-15.417a2549.81 2549.81 0 01-.144-25.406l-6.567 1.136c-4.187.767-9.469 1.092-15.846 1-6.374-.089-12.991-.757-19.842-1.999-6.854-1.231-13.229-4.086-19.13-8.559-5.898-4.473-10.085-10.328-12.56-17.556l-2.855-6.57c-1.903-4.374-4.899-9.233-8.992-14.559-4.093-5.331-8.232-8.945-12.419-10.848l-1.999-1.431c-1.332-.951-2.568-2.098-3.711-3.429-1.142-1.331-1.997-2.663-2.568-3.997-.572-1.335-.098-2.43 1.427-3.289 1.525-.859 4.281-1.276 8.28-1.276l5.708.853c3.807.763 8.516 3.042 14.133 6.851 5.614 3.806 10.229 8.754 13.846 14.842 4.38 7.806 9.657 13.754 15.846 17.847 6.184 4.093 12.419 6.136 18.699 6.136 6.28 0 11.704-.476 16.274-1.423 4.565-.952 8.848-2.383 12.847-4.285 1.713-12.758 6.377-22.559 13.988-29.41-10.848-1.14-20.601-2.857-29.264-5.14-8.658-2.286-17.605-5.996-26.835-11.14-9.235-5.137-16.896-11.516-22.985-19.126-6.09-7.614-11.088-17.61-14.987-29.979-3.901-12.374-5.852-26.648-5.852-42.826 0-23.035 7.52-42.637 22.557-58.817-7.044-17.318-6.379-36.732 1.997-58.24 5.52-1.715 13.706-.428 24.554 3.853 10.85 4.283 18.794 7.952 23.84 10.994 5.046 3.041 9.089 5.618 12.135 7.708 17.705-4.947 35.976-7.421 54.818-7.421s37.117 2.474 54.823 7.421l10.849-6.849c7.419-4.57 16.18-8.758 26.262-12.565 10.088-3.805 17.802-4.853 23.134-3.138 8.562 21.509 9.325 40.922 2.279 58.24 15.036 16.18 22.559 35.787 22.559 58.817 0 16.178-1.958 30.497-5.853 42.966-3.9 12.471-8.941 22.457-15.125 29.979-6.191 7.521-13.901 13.85-23.131 18.986-9.232 5.14-18.182 8.85-26.84 11.136-8.662 2.286-18.415 4.004-29.263 5.146 9.894 8.562 14.842 22.077 14.842 40.539v60.237c0 3.422 1.19 6.279 3.572 8.562 2.379 2.279 6.136 2.95 11.276 1.995 44.163-14.653 80.185-41.062 108.068-79.226 27.88-38.161 41.825-81.126 41.825-128.906-.01-39.771-9.818-76.454-29.414-110.049z"
)
end
end
end
end
end
39 changes: 39 additions & 0 deletions app/components/docs/header.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,39 @@
# frozen_string_literal: true

module Components
module Docs
class Header < Components::Base
def initialize(title: nil, description: nil)
@title = title
@description = description
end

def view_template
div(class: "space-y-2") do
Components.Heading(level: 1) { @title }
Text(as: "p", size: "5", class: "text-muted-foreground") { @description }
end
end

private

def alert_icon
svg(
xmlns: "http://www.w3.org/2000/svg",
fill: "none",
viewbox: "0 0 24 24",
stroke_width: "1.5",
stroke: "currentColor",
class: "w-5 h-5"
) do |s|
s.path(
stroke_linecap: "round",
stroke_linejoin: "round",
d:
"M12 9v3.75m9-.75a9 9 0 11-18 0 9 9 0 0118 0zm-9 3.75h.008v.008H12v-.008z"
)
end
end
end
end
end
109 changes: 109 additions & 0 deletions app/components/docs/tailwind_config.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
# frozen_string_literal: true

module Components
module Docs
class TailwindConfig < Components::Base
def view_template
Text(size: "4", weight: "semibold") { "Update Tailwind Configuration" }
Text do
plain "Add the following to your "
InlineCode(class: "whitespace-nowrap") { "tailwind.config.js" }
plain " file"
end
Codeblock(tailwind_config, syntax: :javascript)
end

private

def tailwind_config
<<~CODE
// For importing tailwind styles from ruby_ui gem
const execSync = require('child_process').execSync;

// Import ruby_ui gem path (To make sure Tailwind loads classes used by ruby_ui gem)
const outputRUBYUI = execSync('bundle show phlex_ui', { encoding: 'utf-8' });
const ruby_ui_path = outputRUBYUI.trim() + '/**/*.rb';

const defaultTheme = require('tailwindcss/defaultTheme')

module.exports = {
darkMode: ["class"],
content: [
'./app/views/**/*.{erb,haml,html,slim,rb}',
'./app/helpers/**/*.rb',
'./app/assets/stylesheets/**/*.css',
'./app/javascript/**/*.js',
ruby_ui_path
],
theme: {
container: {
center: true,
padding: "2rem",
screens: {
"2xl": "1400px",
},
},
extend: {
colors: {
border: "hsl(var(--border))",
input: "hsl(var(--input))",
ring: "hsl(var(--ring))",
background: "hsl(var(--background))",
foreground: "hsl(var(--foreground))",
primary: {
DEFAULT: "hsl(var(--primary))",
foreground: "hsl(var(--primary-foreground))",
},
secondary: {
DEFAULT: "hsl(var(--secondary))",
foreground: "hsl(var(--secondary-foreground))",
},
destructive: {
DEFAULT: "hsl(var(--destructive))",
foreground: "hsl(var(--destructive-foreground))",
},
muted: {
DEFAULT: "hsl(var(--muted))",
foreground: "hsl(var(--muted-foreground))",
},
accent: {
DEFAULT: "hsl(var(--accent))",
foreground: "hsl(var(--accent-foreground))",
},
popover: {
DEFAULT: "hsl(var(--popover))",
foreground: "hsl(var(--popover-foreground))",
},
card: {
DEFAULT: "hsl(var(--card))",
foreground: "hsl(var(--card-foreground))",
},
warning: {
DEFAULT: "hsl(var(--warning))",
foreground: "hsl(var(--warning-foreground))",
},
success: {
DEFAULT: "hsl(var(--success))",
foreground: "hsl(var(--success-foreground))",
},
},
borderRadius: {
lg: `var(--radius)`,
md: `calc(var(--radius) - 2px)`,
sm: "calc(var(--radius) - 4px)",
},
fontFamily: {
sans: ["var(--font-sans)", ...defaultTheme.fontFamily.sans],
},
},
},
# Not compatible with importmaps
plugins: [
require("tailwindcss-animate"),
],
}
CODE
end
end
end
end
94 changes: 94 additions & 0 deletions app/components/docs/tailwind_css.rb
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,94 @@
# frozen_string_literal: true

module Components
module Docs
class TailwindCss < Components::Base
def view_template
Text(size: "4", weight: "semibold") { "Add CSS variables" }
Text do
plain "Add the following to your "
InlineCode { "app/assets/stylesheets/application.tailwind.css" }
plain " file"
end
code = css_variables
Codeblock(code, syntax: :css)
end

private

def css_variables
<<~CODE
@tailwind base;
@tailwind components;
@tailwind utilities;


@layer base {
:root {
--background: 0 0% 100%;
--foreground: 240 10% 3.9%;
--card: 0 0% 100%;
--card-foreground: 240 10% 3.9%;
--popover: 0 0% 100%;
--popover-foreground: 240 10% 3.9%;
--primary: 240 5.9% 10%;
--primary-foreground: 0 0% 98%;
--secondary: 240 4.8% 95.9%;
--secondary-foreground: 240 5.9% 10%;
--muted: 240 4.8% 95.9%;
--muted-foreground: 240 3.8% 46.1%;
--accent: 240 4.8% 95.9%;
--accent-foreground: 240 5.9% 10%;
--destructive: 0 84.2% 60.2%;
--destructive-foreground: 0 0% 98%;
--border: 240 5.9% 90%;
--input: 240 5.9% 90%;
--ring: 240 5.9% 10%;
--radius: 0.5rem;
--warning: 38 92% 50%;
--warning-foreground: 0 0% 100%;
--success: 87 100% 37%;
--success-foreground: 0 0% 100%;
}

.dark {
--background: 240 10% 3.9%;
--foreground: 0 0% 98%;
--card: 240 10% 3.9%;
--card-foreground: 0 0% 98%;
--popover: 240 10% 3.9%;
--popover-foreground: 0 0% 98%;
--primary: 0 0% 98%;
--primary-foreground: 240 5.9% 10%;
--secondary: 240 3.7% 15.9%;
--secondary-foreground: 0 0% 98%;
--muted: 240 3.7% 15.9%;
--muted-foreground: 240 5% 64.9%;
--accent: 240 3.7% 15.9%;
--accent-foreground: 0 0% 98%;
--destructive: 0 62.8% 30.6%;
--destructive-foreground: 0 0% 98%;
--border: 240 3.7% 15.9%;
--input: 240 3.7% 15.9%;
--ring: 240 4.9% 83.9%;
--warning: 38 92% 50%;
--warning-foreground: 0 0% 100%;
--success: 84 81% 44%;
--success-foreground: 0 0% 100%;
}
}

@layer base {
* {
@apply border-border;
}
body {
@apply bg-background text-foreground;
font-feature-settings: "rlig" 1, "calt" 1;
}
}
CODE
end
end
end
end
Loading