ran rails g rbui:install

Gemfile

@@ -64,3 +64,7 @@ end
 
 gem "tailwindcss-rails", "~> 3.0"
 gem "rbui", github: "rbui-labs/rbui", branch: "main"
+
+gem "phlex-rails", "~> 1.1"
+
+gem "tailwind_merge", "~> 0.13.1"

Gemfile.lock

@@ -226,6 +226,10 @@ GEM
       ast (~> 2.4.1)
       racc
     phlex (1.11.0)
+    phlex-rails (1.1.1)
+      phlex (~> 1.9)
+      railties (>= 6.1, < 8)
+      zeitwerk (~> 2.6)
     propshaft (1.1.0)
       actionpack (>= 7.0.0)
       activesupport (>= 7.0.0)
@@ -398,6 +402,7 @@ DEPENDENCIES
   importmap-rails
   jbuilder
   kamal
+  phlex-rails (~> 1.1)
   propshaft
   puma (>= 5.0)
   rails!
@@ -409,6 +414,7 @@ DEPENDENCIES
   solid_queue
   sqlite3 (>= 2.1)
   stimulus-rails
+  tailwind_merge (~> 0.13.1)
   tailwindcss-rails (~> 3.0)
   thruster
   turbo-rails

app/assets/stylesheets/application.tailwind.css

@@ -2,12 +2,75 @@
 @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;
+
+    /* rbui especific */
+    --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%;
 
-@layer components {
-  .btn-primary {
-    @apply py-2 px-4 bg-blue-200;
+    /* rbui especific */
+    --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;
+
+    /* docs specific */
+    /* https://css-tricks.com/snippets/css/system-font-stack/ */
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+  }
+}

app/components/rbui/index.js

@@ -0,0 +1,10 @@
+import { application } from "controllers/application";
+
+// Import all controller files
+// import ComboboxController from "./combobox/combobox_controller";
+
+// Register all controllers
+// application.register("rbui--combobox", ComboboxController);
+
+import RBUI from "rbui-js";
+RBUI.initialize(application);

app/javascript/application.js

@@ -1,3 +1,5 @@
 // Configure your import map in config/importmap.rb. Read more: https://github.com/rails/importmap-rails
 import "@hotwired/turbo-rails"
 import "controllers"
+
+import "rbui";

app/views/application_view.rb

@@ -0,0 +1,10 @@
+# frozen_string_literal: true
+
+class ApplicationView < ApplicationComponent
+  include RBUI
+	# The ApplicationView is an abstract class for all your views.
+
+	# By default, it inherits from `ApplicationComponent`, but you
+	# can change that to `Phlex::HTML` if you want to keep views and
+	# components independent.
+end

app/views/components/application_component.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+class ApplicationComponent < Phlex::HTML
+	include Phlex::Rails::Helpers::Routes
+
+	if Rails.env.development?
+		def before_template
+			comment { "Before #{self.class.name}" }
+			super
+		end
+	end
+end

app/views/layouts/application.html.erb

@@ -29,3 +29,6 @@
     </main>
   </body>
 </html>
+<script>
+            window.process = { env: { NODE_ENV: 'production'} }
+          </script>

app/views/layouts/application_layout.rb

@@ -0,0 +1,24 @@
+# frozen_string_literal: true
+
+class ApplicationLayout < ApplicationView
+	include Phlex::Rails::Layout
+
+	def template(&block)
+		doctype
+
+		html do
+			head do
+				title { "You're awesome" }
+				meta name: "viewport", content: "width=device-width,initial-scale=1"
+				csp_meta_tag
+				csrf_meta_tags
+				stylesheet_link_tag "application", data_turbo_track: "reload"
+				javascript_importmap_tags
+			end
+
+			body do
+				main(&block)
+			end
+		end
+	end
+end

config/application.rb

@@ -8,6 +8,9 @@
 
 module DemoImportmaps
   class Application < Rails::Application
+    config.autoload_paths << "#{root}/app/views"
+    config.autoload_paths << "#{root}/app/views/layouts"
+    config.autoload_paths << "#{root}/app/views/components"
     # Initialize configuration defaults for originally generated Rails version.
     config.load_defaults 8.0
 

config/importmap.rb

@@ -2,6 +2,40 @@
 
 pin "application"
 pin "@hotwired/turbo-rails", to: "turbo.min.js"
-pin "@hotwired/stimulus", to: "stimulus.min.js"
+pin "@hotwired/stimulus", to: "@hotwired--stimulus.js" # @3.2.2
 pin "@hotwired/stimulus-loading", to: "stimulus-loading.js"
 pin_all_from "app/javascript/controllers", under: "controllers"
+pin "tailwindcss/plugin", to: "tailwindcss--plugin.js" # @3.4.13
+pin "tailwindcss-animate", to: "tailwindcss-animate.js", preload: true
+pin_all_from "app/components/rbui", under: "rbui"
+pin "rbui-js" # @1.0.0
+pin "@babel/runtime/helpers/esm/assertThisInitialized", to: "@babel--runtime--helpers--esm--assertThisInitialized.js" # @7.25.6
+pin "@babel/runtime/helpers/esm/classCallCheck", to: "@babel--runtime--helpers--esm--classCallCheck.js" # @7.25.6
+pin "@babel/runtime/helpers/esm/createClass", to: "@babel--runtime--helpers--esm--createClass.js" # @7.25.6
+pin "@babel/runtime/helpers/esm/createForOfIteratorHelper", to: "@babel--runtime--helpers--esm--createForOfIteratorHelper.js" # @7.25.6
+pin "@babel/runtime/helpers/esm/createSuper", to: "@babel--runtime--helpers--esm--createSuper.js" # @7.25.6
+pin "@babel/runtime/helpers/esm/defineProperty", to: "@babel--runtime--helpers--esm--defineProperty.js" # @7.25.6
+pin "@babel/runtime/helpers/esm/inherits", to: "@babel--runtime--helpers--esm--inherits.js" # @7.25.6
+pin "@babel/runtime/helpers/esm/typeof", to: "@babel--runtime--helpers--esm--typeof.js" # @7.25.6
+pin "@floating-ui/core", to: "@floating-ui--core.js" # @1.6.8
+pin "@floating-ui/dom", to: "@floating-ui--dom.js" # @1.6.11
+pin "@floating-ui/utils", to: "@floating-ui--utils.js" # @0.2.8
+pin "@floating-ui/utils/dom", to: "@floating-ui--utils--dom.js" # @0.2.8
+pin "@kurkle/color", to: "@kurkle--color.js" # @0.3.2
+pin "@motionone/animation", to: "@motionone--animation.js" # @10.18.0
+pin "@motionone/dom", to: "@motionone--dom.js" # @10.18.0
+pin "@motionone/easing", to: "@motionone--easing.js" # @10.18.0
+pin "@motionone/generators", to: "@motionone--generators.js" # @10.18.0
+pin "@motionone/types", to: "@motionone--types.js" # @10.17.1
+pin "@motionone/utils", to: "@motionone--utils.js" # @10.18.0
+pin "@popperjs/core", to: "@popperjs--core.js" # @2.11.8
+pin "chart.js/auto", to: "chart.js--auto.js" # @4.4.4
+pin "date-fns", to: "https://ga.jspm.io/npm:[email protected]/index.mjs"
+pin "fuse.js" # @7.0.0
+pin "hey-listen" # @1.0.8
+pin "motion" # @10.18.0
+pin "mustache" # @4.2.0
+pin "tippy.js" # @6.3.7
+pin "tslib" # @2.7.0
+pin "@popperjs/core/+esm", to: "@popperjs--core--+esm.js" # @2.11.8
+pin "@popperjs/core", to: "stupid-popper-lib-2024.js"

config/initializers/assets.rb

@@ -5,3 +5,4 @@
 
 # Add additional assets to the asset load path.
 # Rails.application.config.assets.paths << Emoji.images_path
+Rails.application.config.assets.paths << Rails.root.join("app/components")

config/initializers/rbui.rb

@@ -0,0 +1,10 @@
+#RBUI.setup do |config|
+
+  # Setting a namespace allows you to access RBUI components through this namespace.
+  # For example, with namespace set to "UI", you can use:
+  #   UI::Button.new instead of RBUI::Button.new
+  #   UI::Card.new instead of RBUI::Card.new
+  # This can help avoid naming conflicts and allows for cleaner, more concise code.
+  # If you prefer to use RBUI components directly, you can leave this unset.
+  # config.namespace = "UI"
+#end

config/tailwind.config.js

@@ -1,22 +1,88 @@
+// For importing tailwind styles from rbui gem
+const execSync = require('child_process').execSync;
+
+// Import rbui gem path
+const outputRBUI = execSync('bundle show rbui', { encoding: 'utf-8' });
+const rbui_path = outputRBUI.trim() + '/**/*.rb';
+
 const defaultTheme = require('tailwindcss/defaultTheme')
 
 module.exports = {
+  darkMode: ["class"],
   content: [
-    './public/*.html',
+    './app/views/**/*.{erb,haml,html,slim,rb}',
+    './app/components/rbui/**/*.rb',
     './app/helpers/**/*.rb',
+    './app/assets/stylesheets/**/*.css',
     './app/javascript/**/*.js',
-    './app/views/**/*.{erb,haml,html,slim}'
+    rbui_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))",
+        },
+        /* rbui especific */
+        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: ['Inter var', ...defaultTheme.fontFamily.sans],
+        sans: ["var(--font-sans)", ...defaultTheme.fontFamily.sans],
       },
     },
   },
   plugins: [
-    require('@tailwindcss/forms'),
-    require('@tailwindcss/typography'),
-    require('@tailwindcss/container-queries'),
-  ]
+
+    require("../vendor/javascript/tailwindcss-animate"),
+
+  ],
 }

vendor/javascript/@babel--runtime--helpers--esm--assertThisInitialized.js

@@ -0,0 +1,4 @@
+// @babel/runtime/helpers/esm/[email protected] downloaded from https://ga.jspm.io/npm:@babel/[email protected]/helpers/esm/assertThisInitialized.js
+
+function _assertThisInitialized(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}export{_assertThisInitialized as default};
+

vendor/javascript/@babel--runtime--helpers--esm--classCallCheck.js

@@ -0,0 +1,4 @@
+// @babel/runtime/helpers/esm/[email protected] downloaded from https://ga.jspm.io/npm:@babel/[email protected]/helpers/esm/classCallCheck.js
+
+function _classCallCheck(a,l){if(!(a instanceof l))throw new TypeError("Cannot call a class as a function")}export{_classCallCheck as default};
+

vendor/javascript/@babel--runtime--helpers--esm--createSuper.js

@@ -0,0 +1,4 @@
+// @babel/runtime/helpers/esm/[email protected] downloaded from https://ga.jspm.io/npm:@babel/[email protected]/helpers/esm/createSuper.js
+
+import t from"./getPrototypeOf.js";import r from"./isNativeReflectConstruct.js";import e from"./possibleConstructorReturn.js";import"./typeof.js";import"./assertThisInitialized.js";function _createSuper(o){var s=r();return function(){var r,i=t(o);if(s){var p=t(this).constructor;r=Reflect.construct(i,arguments,p)}else r=i.apply(this,arguments);return e(this,r)}}export{_createSuper as default};
+

vendor/javascript/@babel--runtime--helpers--esm--defineProperty.js

@@ -0,0 +1,4 @@
+// @babel/runtime/helpers/esm/[email protected] downloaded from https://ga.jspm.io/npm:@babel/[email protected]/helpers/esm/defineProperty.js
+
+import e from"./toPropertyKey.js";import"./typeof.js";import"./toPrimitive.js";function _defineProperty(r,t,o){return(t=e(t))in r?Object.defineProperty(r,t,{value:o,enumerable:!0,configurable:!0,writable:!0}):r[t]=o,r}export{_defineProperty as default};
+

vendor/javascript/@babel--runtime--helpers--esm--inherits.js

@@ -0,0 +1,4 @@
+// @babel/runtime/helpers/esm/[email protected] downloaded from https://ga.jspm.io/npm:@babel/[email protected]/helpers/esm/inherits.js
+
+import e from"./setPrototypeOf.js";function _inherits(t,r){if("function"!=typeof r&&null!==r)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(r&&r.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),Object.defineProperty(t,"prototype",{writable:!1}),r&&e(t,r)}export{_inherits as default};
+

vendor/javascript/@babel--runtime--helpers--esm--typeof.js

@@ -0,0 +1,4 @@
+// @babel/runtime/helpers/esm/[email protected] downloaded from https://ga.jspm.io/npm:@babel/[email protected]/helpers/esm/typeof.js
+
+function _typeof(o){return _typeof="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(o){return typeof o}:function(o){return o&&"function"==typeof Symbol&&o.constructor===Symbol&&o!==Symbol.prototype?"symbol":typeof o},_typeof(o)}export{_typeof as default};
+