shadcn-ui 0.0.1 → 0.0.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2c5bb322090bfc7c251b5bcfa6daaaee17f56194d345fb0f653e66b0c367194c
-  data.tar.gz: e9b663d94ca1084d7a9351c355bc8093e78e1eb4d7af55b96f2c253824bb67ca
+  metadata.gz: 7a6f3c1462c5fec38163ab5cbac5af561ca2d05f3944ca41bab01649c14ac6fa
+  data.tar.gz: 5a7fb75ae5e0f7d0db67bf0e55fdc55e65390e5bf535b351f17d69b4b03dd23c
 SHA512:
-  metadata.gz: 1f85cd138dd5be8981c6578b63d0c595606ed2953171efcda89202a9136bd5eb63c32cb39ad3498fd2eb35555c43779079ddcd298f4698993868a5d77dae7bbd
-  data.tar.gz: ecc9016da1365510ed5b854999e701c294d680b87adfd2540055c7c8f767b65add7245dd4571a29e0707df1032f8232ef395679c77fe94ee5851e364c2f5181f
+  metadata.gz: 1923bfc2b23ab4fd10aff954938111600c1d4e820c47b87827b67c8529bf1540eb36ae058d8bb0973dce3090802855414e6b200f633d08cfeac75db698e75057
+  data.tar.gz: b16a329953472dee87d8851958f17e2757b1c8709e21c3e5825990486ef80c1ed1b78f459ce23c3d55645786b8173fce76ad6d5b834ecafbadf9940970330410

data/.prettierrc.json

@@ -23,6 +23,12 @@
       "options": {
         "parser": "html"
       }
+    },
+    {
+      "files": "*.md.html",
+      "options": {
+        "parser": "markdown"
+      }
     }
   ]
 }

data/README.md

@@ -5,8 +5,268 @@
 Accessible and customizable components that you can copy and paste into your apps. Free. Open
 Source. **Use this to build your own component library**.
 
+## About
+
+This is **NOT** a component library. It's a collection of re-usable components that you can copy and
+paste into your apps.
+
+**What do you mean by not a component library?**
+
+I mean you do not install it as a dependency. It is not available or distributed via npm.
+
+Pick the components you need. Copy and paste the code into your project and customize to your needs.
+The code is yours.
+
+Use this as a reference to build your own component libraries.
+
 ![hero](public/og.jpg)
 
+## Alpha Usage/Installation
+
+Prior to the initial gem release, you can use this as an alpha by cloning this repository and
+starting up the app as you would a standard rails app.
+
+```
+git clone https://github.com/aviflombaum/shadcn-rails.git
+cd shadcn-rails
+bundle install
+./bin/dev
+```
+
+There are very few dependencies and no database so it should just boot up. Visit
+http://localhost:3000 to see the demo app which is also the documentation. You'll be able to browse
+the components at http://localhost:3000/components.
+
+If there's a component you want to try in your app, you will be copying the code from this app to
+yours. There's a few other steps you'll need.
+
+## Installing a Component
+
+### Add Tailwind CSS
+
+Components are styled using Tailwind CSS. You need to install Tailwind CSS in your project.
+
+[Follow the Tailwind CSS installation instructions to get started.](https://tailwindcss.com/docs/installation)
+
+### Add dependencies
+
+If you haven't already, install Tailwind into your rails application by adding `tailwindcss-rails`
+to your `Gemfile` and install tailwind into your app:
+
+```sh
+./bin/bundle add tailwindcss-rails
+./bin/rails tailwindcss:install
+```
+
+Then install ./bin/rails tailwindcss:install
+
+### Configure tailwind.config.js
+
+Here's what my `tailwind.config.js` file looks like:
+
+```js title="tailwind.config.js"
+const defaultTheme = require("tailwindcss/defaultTheme");
+
+module.exports = {
+  darkMode: ["class"],
+  content: [
+    "./public/*.html",
+    "./app/helpers/**/*.rb",
+    "./app/javascript/**/*.js",
+    "./app/views/**/*.{erb,haml,html,slim}",
+  ],
+  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))",
+        },
+      },
+      borderRadius: {
+        lg: `var(--radius)`,
+        md: `calc(var(--radius) - 2px)`,
+        sm: "calc(var(--radius) - 4px)",
+      },
+      fontFamily: {
+        sans: ["var(--font-sans)", ...defaultTheme.fontFamily.sans],
+      },
+      keyframes: {
+        "accordion-down": {
+          from: { height: 0 },
+          to: { height: "var(--radix-accordion-content-height)" },
+        },
+        "accordion-up": {
+          from: { height: "var(--radix-accordion-content-height)" },
+          to: { height: 0 },
+        },
+      },
+      animation: {
+        "accordion-down": "accordion-down 0.2s ease-out",
+        "accordion-up": "accordion-up 0.2s ease-out",
+      },
+    },
+  },
+  plugins: [
+    require("@tailwindcss/forms"),
+    require("@tailwindcss/aspect-ratio"),
+    require("@tailwindcss/typography"),
+    require("@tailwindcss/container-queries"),
+    require("tailwindcss-animate"),
+  ],
+};
+```
+
+### Configure styles
+
+Add the following to your app/assets/stylesheets/application.tailwind.css file.
+
+```css title="application.tailwind.css"
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 47.4% 11.2%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 47.4% 11.2%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 100% 50%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 215 20.2% 65.1%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 224 71% 4%;
+    --foreground: 213 31% 91%;
+
+    --muted: 223 47% 11%;
+    --muted-foreground: 215.4 16.3% 56.9%;
+
+    --accent: 216 34% 17%;
+    --accent-foreground: 210 40% 98%;
+
+    --popover: 224 71% 4%;
+    --popover-foreground: 215 20.2% 65.1%;
+
+    --border: 216 34% 17%;
+    --input: 216 34% 17%;
+
+    --card: 224 71% 4%;
+    --card-foreground: 213 31% 91%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 1.2%;
+
+    --secondary: 222.2 47.4% 11.2%;
+    --secondary-foreground: 210 40% 98%;
+
+    --destructive: 0 63% 31%;
+    --destructive-foreground: 210 40% 98%;
+
+    --ring: 216 34% 17%;
+
+    --radius: 0.5rem;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+    font-feature-settings:
+      "rlig" 1,
+      "calt" 1;
+  }
+}
+```
+
+### Copy a a component's files to your application
+
+For example, if you want to use the Accordion component, you would copy the following files to your
+application:
+
+- `app/javascript/controllers/components/ui/accordion_controller.js` The Stimulus controller for any
+  component that requires javascript.
+- `app/helpers/components/accordion_helper.rb` The helper for the component that allows for easy
+  rendering within views.
+- `app/views/components/ui/_accordion.html.erb` The html for the component.
+
+Once those are copied in your application you can render an accordion with:
+
+```erb
+<%= render_accordion title: "Did you know?", description: "You can wrap shadcn helpers in any
+  component library you want!" %>
+<%= render_accordion title: "Use the generators.", description: "Add components with #{code("rails g shadcn_ui add accordion")}".html_safe %>
+```
+
+See the component's demo page in `app/views/examples/components/accordion.html.erb` for more
+examples.
+
+This will be similar for each component.
+
 ## Documentation
 
 Visit https://avi.nyc/shadcn-on-rails to view the documentation.

data/app/assets/stylesheets/application.tailwind.css

@@ -90,3 +90,104 @@
     @apply bg-zinc-950;
   }
 }
+input[type="range"] {
+  display: inline-block;
+  vertical-align: middle;
+  font-size: 1em;
+  font-family: Arial, sans-serif;
+}
+
+/* input[type="range"]:focus,
+input[type="number"]:focus {
+  box-shadow: 0 0 3px 1px #4b81dd;
+  outline: none;
+} */
+
+input[type="range"] {
+  -webkit-appearance: none;
+  margin-right: 15px;
+  width: 200px;
+  height: 7px;
+  background: #f4f4f5;
+  border-radius: 5px;
+  background-image: linear-gradient(#000, #000);
+  background-repeat: no-repeat;
+}
+
+/* Input Thumb */
+input[type="range"]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #fff;
+  cursor: ew-resize;
+  box-shadow: 0 0 2px 0 #000;
+  transition: background 0.3s ease-in-out;
+}
+
+input[type="range"]::-moz-range-thumb {
+  -webkit-appearance: none;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #fff;
+  cursor: ew-resize;
+  box-shadow: 0 0 2px 0 #000;
+  transition: background 0.3s ease-in-out;
+}
+
+input[type="range"]::-ms-thumb {
+  -webkit-appearance: none;
+  height: 20px;
+  width: 20px;
+  border-radius: 50%;
+  background: #fff;
+  cursor: ew-resize;
+  box-shadow: 0 0 2px 0 #000;
+  transition: background 0.3s ease-in-out;
+}
+
+/* input[type="range"]::-webkit-slider-thumb:hover {
+  background: #a1a1aa;
+}
+
+input[type="range"]::-moz-range-thumb:hover {
+  background: #a1a1aa;
+}
+
+input[type="range"]::-ms-thumb:hover {
+  background: #a1a1aa;
+} */
+
+input[type="range"]::-moz-range-track {
+  -webkit-appearance: none;
+  box-shadow: none;
+  border: none;
+  background: transparent;
+}
+
+input[type="range"]::-ms-track {
+  -webkit-appearance: none;
+  box-shadow: none;
+  border: none;
+  background: transparent;
+}
+
+article.documentation h1 {
+  @apply scroll-m-20 text-4xl font-bold tracking-tight;
+}
+article.documentation subtitle {
+  @apply text-lg text-muted-foreground;
+}
+article.documentation p {
+  @apply leading-7 [&:not(:first-child)]:mt-6;
+}
+
+article.documentation :where(code):not(:where([class~="not-prose"] *)):before {
+  content: "";
+}
+
+article.documentation :where(code):not(:where([class~="not-prose"] *)):after {
+  content: "";
+}

data/app/controllers/components_controller.rb

@@ -1,4 +1,4 @@
-class ComponentsController < ApplicationController
+class ComponentsController < ActionController::Base
   layout "component"
 
   def show

data/app/controllers/documentation_controller.rb

@@ -0,0 +1,9 @@
+class DocumentationController < ActionController::Base
+  layout "documentation"
+  def index
+  end
+
+  def show
+    render "documentation/#{params[:id]}"
+  end
+end

data/app/helpers/application_helper.rb

@@ -1,2 +1,21 @@
 module ApplicationHelper
+  def page_title
+    @page_title = ""
+    if request.path.include?("/docs/components")
+      component_name = params[:component].to_s.titleize
+      @page_title << "#{component_name} - " if component_name.present?
+    end
+    @page_title << "shadcn/ui on Rails"
+    @page_title
+  end
+
+  def sidebar_link(text, path)
+    classes = "group flex w-full items-center rounded-md border border-transparent px-2 py-1 hover:underline"
+    classes << if request.path == path
+      " text-foreground font-bold"
+    else
+      " text-muted-foreground"
+    end
+    link_to text, path, class: classes
+  end
 end

data/app/helpers/components/card_helper.rb

@@ -1,5 +1,5 @@
 module Components::CardHelper
   def render_card(footer: nil, title: nil, subtitle: nil, body: nil, **options, &block)
-    render "components/ui/card", title: title, subtitle: subtitle, footer: footer, body: (block ? capture(&block) : body), block:, **options
+    render "components/ui/card", title: title, subtitle: subtitle, footer: footer, body: (block ? capture(&block) : body), block:, options: options
   end
 end

data/app/helpers/components/filter_helper.rb

@@ -0,0 +1,12 @@
+module Components::FilterHelper
+  def filter_icon(&block)
+    content_for :filter_icon, capture(&block), flush: true
+  end
+
+  def render_filter(items, **options, &block)
+    content_for :filter_icon, "", flush: true
+    content = capture(&block) if block
+    input_class = content_for?(:filter_icon) ? "pl-1" : ""
+    render "components/ui/filter", items: items, options: options, input_class: input_class, content: content
+  end
+end

data/app/helpers/components/input_helper.rb

@@ -0,0 +1,21 @@
+module Components::InputHelper
+  def render_input(name:, label: false, id: nil, type: :text, value: nil, **options)
+    options[:class] = "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground disabled:cursor-not-allowed disabled:opacity-50 #{options[:class]} "
+    options[:class] << case options[:style]
+    when :borderless
+      " border-0 focus-visible:outline-none focus-visible:shadow-none focus-visible:ring-transparent"
+    else
+      " focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:border-muted"
+    end
+    options.reverse_merge!(required: false, disabled: false,
+      readonly: false, label: false, placeholder: "Type here...")
+    render partial: "components/ui/input", locals: {
+      type:,
+      label:,
+      name:,
+      value:,
+      id:,
+      options: options
+    }
+  end
+end

data/app/helpers/components/label_helper.rb

@@ -0,0 +1,5 @@
+module Components::LabelHelper
+  def render_label(name:, label:, **options)
+    render "components/ui/label", name: name, label: label, options: options
+  end
+end

data/app/helpers/components/list_helper.rb

@@ -0,0 +1,15 @@
+module Components::ListHelper
+  def list_item(value:, name:, selected: false, as: :div)
+    content_tag as, value,
+      class: "relative flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm
+         outline-none aria-selected:bg-accent aria-selected:text-accent-foreground hover:bg-accent hover:text-accent-foreground
+         data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      role: "option",
+      data: {value:, selected:},
+      aria: {selected:}
+  end
+
+  def render_list(items, as: :div, **options)
+    render "components/ui/list", items:, as:, **options
+  end
+end

data/app/helpers/components/progress_helper.rb

@@ -0,0 +1,5 @@
+module Components::ProgressHelper
+  def render_progress(value:, **options)
+    render "components/ui/progress", value: (100 - value), **options
+  end
+end

data/app/helpers/components/sheet_helper.rb

@@ -0,0 +1,20 @@
+module Components::SheetHelper
+  def render_sheet(**options, &block)
+    options[:direction] ||= "left"
+    options[:width] ||= "w-3/4"
+
+    content_for :sheet_trigger, "", flush: true
+    content_for :sheet_content, "", flush: true
+
+    content = capture(&block) if block
+    render "components/ui/sheet", content: content, options: options
+  end
+
+  def sheet_trigger(&block)
+    content_for :sheet_trigger, capture(&block), flush: true
+  end
+
+  def sheet_content(&block)
+    content_for :sheet_content, capture(&block), flush: true
+  end
+end

data/app/helpers/components/skeleton_helper.rb

@@ -0,0 +1,5 @@
+module Components::SkeletonHelper
+  def render_skeleton
+    render "components/ui/skeleton"
+  end
+end

data/app/helpers/components/slider_helper.rb

@@ -0,0 +1,5 @@
+module Components::SliderHelper
+  def render_slider(value:, id:, name:, **options)
+    render "components/ui/slider", value:, id:, name:, **options
+  end
+end

data/app/helpers/documentation_helper.rb

@@ -0,0 +1,2 @@
+module DocumentationHelper
+end

data/app/javascript/controllers/theme_controller.js

@@ -0,0 +1,25 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class extends Controller {
+  static targets = ["toggleButton"];
+
+  connect() {
+    this.loadThemePreference();
+  }
+
+  toggle() {
+    const isDarkMode = document.documentElement.classList.toggle("dark");
+    this.saveThemePreference(isDarkMode);
+  }
+
+  loadThemePreference() {
+    const isDarkMode = localStorage.getItem("themePreference") === "true";
+    if (isDarkMode) {
+      document.documentElement.classList.add("dark");
+    }
+  }
+
+  saveThemePreference(isDarkMode) {
+    localStorage.setItem("themePreference", isDarkMode);
+  }
+}

data/app/javascript/controllers/ui/dialog_controller.js

@@ -2,7 +2,7 @@
 import { Controller } from "@hotwired/stimulus";
 import "@kanety/stimulus-static-actions";
 
-export default class extends Controller {
+export default class UIDialog extends Controller {
   static targets = ["dialog", "modal", "focus", "drag", "backdrop", "closeButton"];
   static actions = [
     ["element", "keydown@window->closeByKey"],
@@ -64,6 +64,8 @@ export default class extends Controller {
     this.dispatch("closed", { detail: { target: target } });
   }
 
+  // Refactor Me
+  // This needs to be combined with the toggle method in sheet_controller
   toggleClass(visible) {
     if (visible) {
       this.dialogTarget.classList.remove("hidden");

data/app/javascript/controllers/ui/dropdown_controller.js

@@ -1,25 +1,5 @@
 // Inspired By: https://github.com/stimulus-components/stimulus-dropdown/blob/master/src/index.ts
-import { Controller } from "@hotwired/stimulus";
+import UIPopover from "controllers/ui/popover_controller";
 import { useTransition } from "stimulus-use";
 
-export default class extends Controller {
-  //   menuTarget: HTMLElement
-  //   toggleTransition: (event?: Event) => void
-  //   leave: (event?: Event) => void
-  //   transitioned: false
-  //   static targets = ['menu']
-  //   connect (): void {
-  //     useTransition(this, {
-  //       element: this.menuTarget
-  //     })
-  //   }
-  //   toggle (): void {
-  //     this.toggleTransition()
-  //   }
-  //   hide (event: Event): void {
-  //     // @ts-ignore
-  //     if (!this.element.contains(event.target) && !this.menuTarget.classList.contains('hidden')) {
-  //       this.leave()
-  //     }
-  //   }
-}
+export default class extends UIPopover {}

data/app/javascript/controllers/ui/filter_controller.js

@@ -0,0 +1,20 @@
+import { Controller } from "@hotwired/stimulus";
+
+export default class UIFilter extends Controller {
+  static targets = ["source", "item"];
+
+  connect() {}
+
+  filter(event) {
+    let lowerCaseFilterTerm = this.sourceTarget.value.toLowerCase();
+    let regex = new RegExp("^" + lowerCaseFilterTerm);
+    if (this.hasItemTarget) {
+      this.itemTargets.forEach((el, i) => {
+        let filterableKey = el.innerText.toLowerCase();
+
+        // Check for consecutive characters match using regex
+        el.classList.toggle("hidden", !regex.test(filterableKey));
+      });
+    }
+  }
+}

data/app/javascript/controllers/ui/popover_controller.js

@@ -3,7 +3,7 @@
 import { Controller } from "@hotwired/stimulus";
 import { createPopper } from "@popperjs/core";
 
-export default class extends Controller {
+export default class UIPopover extends Controller {
   static values = {
     dismissAfter: Number,
   };
@@ -24,4 +24,32 @@ export default class extends Controller {
       ],
     });
   }
+
+  // Show the popover
+  show() {
+    this.contentTarget.classList.remove("hidden");
+    this.contentTarget.dataset.state = "open";
+  }
+
+  // Hide the popover
+  hide() {
+    this.contentTarget.classList.add("hidden");
+    this.contentTarget.dataset.state = "closed";
+  }
+
+  // Toggle the popover on demand
+  toggle(event) {
+    this.popperInstance.update();
+    if (this.contentTarget.classList.contains("hidden")) {
+      this.show();
+
+      if (this.hasDismissAfterValue) {
+        setTimeout(() => {
+          this.hide();
+        }, this.dismissAfterValue);
+      }
+    } else {
+      this.hide();
+    }
+  }
 }