shadcn-ui 0.0.1 → 0.0.3

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 2c5bb322090bfc7c251b5bcfa6daaaee17f56194d345fb0f653e66b0c367194c
-  data.tar.gz: e9b663d94ca1084d7a9351c355bc8093e78e1eb4d7af55b96f2c253824bb67ca
+  metadata.gz: 22a141b91988a0b7411fa66841274699ee3f55d4a6b7b2afb152000cdba95385
+  data.tar.gz: f7a806d1a7897c1154b4b6a23903d1a2295e4152e29638ff6e5721982eea4760
 SHA512:
-  metadata.gz: 1f85cd138dd5be8981c6578b63d0c595606ed2953171efcda89202a9136bd5eb63c32cb39ad3498fd2eb35555c43779079ddcd298f4698993868a5d77dae7bbd
-  data.tar.gz: ecc9016da1365510ed5b854999e701c294d680b87adfd2540055c7c8f767b65add7245dd4571a29e0707df1032f8232ef395679c77fe94ee5851e364c2f5181f
+  metadata.gz: 1b2264728f5100c07607e963c4027aa406e91c7635ef9b9cf6e1c21f5dd7fa193575e0a11b08a2021358835de6645665f6370b4119a1169c99b6ece40c195f9d
+  data.tar.gz: 357afd147401ff2c9911082690ed8b8f8162bbf60d64a229ee1c51bfbfd7c6cbfcfa88c8ace873dc1c64029c3ef5fefe64d4e0767029eec579eeb4208defb985

data/.env

@@ -0,0 +1 @@
+RAILS_MASTER_KEY=1b9d0e6b785b2a5e2648a484f41295cd

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/Rakefile

@@ -1,11 +1,14 @@
 # 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 "bundler/gem_tasks"
-require "rspec/core/rake_task"
 
-RSpec::Core::RakeTask.new(:spec)
+if ENV["RAILS_ENV"] != "production"
+  require "rspec/core/rake_task"
 
-task default: :spec
+  RSpec::Core::RakeTask.new(:spec)
+
+  task default: :spec
+end
 
 require_relative "config/application"
 

data/app/assets/stylesheets/{application.scss → application.css}

@@ -13,30 +13,3 @@
  *=
  *= require_self
  */
-.st-accordion {
-  .st-accordion__icon:before {
-    content: "▼";
-    display: inline-block;
-    margin-right: 5px;
-    font-size: 80%;
-    text-decoration: none;
-    transform: rotate(-90deg);
-  }
-  .st-accordion__icon--opened:before {
-    transform: rotate(0deg);
-  }
-
-  .st-accordion__content:not(.st-accordion__content--visible) {
-    height: 0;
-    opacity: 0;
-    visibility: hidden;
-    overflow: hidden;
-    transition: all 0.2s;
-  }
-  .st-accordion__content.st-accordion__content--visible {
-    opacity: 1;
-    visibility: visible;
-    overflow: hidden;
-    transition: all 0.2s;
-  }
-}

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

@@ -1,92 +1,65 @@
+@import "shadcn.css";
+
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
 
 @layer base {
-  :root {
-    --font-sans: "Inter var";
-    --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;
+  .container {
+    margin-left: auto;
+    margin-right: auto;
+    padding-left: 2rem;
+    padding-right: 2rem;
+    width: 100%;
   }
 
-  .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%;
+  :root {
+    --pink: 301 98% 50% 0.88;
+  }
+}
 
-    --border: 216 34% 17%;
-    --input: 216 34% 17%;
+article.documentation h1 {
+  @apply scroll-m-20 text-4xl font-bold tracking-tight;
+}
 
-    --card: 224 71% 4%;
-    --card-foreground: 213 31% 91%;
+article.documentation p + h1 {
+  @apply mt-12;
+}
+article.documentation h2 {
+  @apply scroll-m-20 text-3xl font-bold tracking-tight my-8;
+}
 
-    --primary: 210 40% 98%;
-    --primary-foreground: 222.2 47.4% 1.2%;
+article.documentation h3 {
+  @apply scroll-m-20 text-2xl font-bold tracking-tight my-4;
+}
 
-    --secondary: 222.2 47.4% 11.2%;
-    --secondary-foreground: 210 40% 98%;
+article.documentation h4 {
+  @apply scroll-m-20 text-xl font-bold tracking-tight my-2;
+}
 
-    --destructive: 0 63% 31%;
-    --destructive-foreground: 210 40% 98%;
+article.documentation subtitle {
+  @apply text-lg text-muted-foreground;
+}
+article.documentation p {
+  @apply leading-7 [&:not(:first-child)]:mt-6;
+}
 
-    --ring: 216 34% 17%;
+article.documentation :where(code):not(:where([class~="not-prose"] *)):before {
+  content: "";
+}
 
-    --radius: 0.5rem;
-  }
+article.documentation :where(code):not(:where([class~="not-prose"] *)):after {
+  content: "";
 }
 
-@layer base {
-  * {
-    @apply border-border;
-  }
-  body {
-    @apply bg-background text-foreground;
-    font-feature-settings:
-      "rlig" 1,
-      "calt" 1;
-  }
+article.documentation p a {
+  @apply underline hover:text-pink;
+}
 
-  .code-sample {
-    @apply max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 dark:bg-zinc-900;
-  }
+article.documentation pre {
+  @apply max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 dark:bg-zinc-900 text-white py-4 px-8 rounded-lg my-4;
+}
 
-  .code-sample span {
-    @apply bg-zinc-950;
-  }
+article.documentation p > code {
+  @apply text-white bg-black p-1 rounded;
 }

data/app/assets/stylesheets/shadcn.css

@@ -0,0 +1,216 @@
+@layer base {
+  :root {
+    --font-sans: "Inter var";
+    --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%;
+
+    --success: 132, 95.3%, 33.3%, 0.74;
+    --success-foreground: 109 55% 28%;
+
+    --info: 223 78% 42%;
+    --info-foreground: 225 100% 50%;
+
+    --attention: 45 90% 45%;
+    --attention-foreground: 60 98.4% 48.8% 0.82;
+
+    --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%;
+
+    --attention: 45, 90%, 45%, 0.8;
+    --attention-foreground: 60 98.4% 48.8% 0.82;
+
+    --success: 109 55% 28%;
+    --success-foreground: 109 55% 28%;
+
+    --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;
+  }
+
+  .code-sample {
+    @apply max-h-[650px] min-h-[350px] overflow-x-auto rounded-lg border bg-zinc-950 dark:bg-zinc-900;
+  }
+
+  .code-sample pre {
+    @apply min-h-[350px];
+  }
+
+  .code-sample span {
+    @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;
+}
+
+.st-accordion .st-accordion__icon:before {
+  content: "▼";
+  display: inline-block;
+  margin-right: 5px;
+  font-size: 80%;
+  text-decoration: none;
+  transform: rotate(-90deg);
+}
+.st-accordion .st-accordion__icon--opened:before {
+  transform: rotate(0deg);
+}
+
+.st-accordion .st-accordion__content:not(.st-accordion__content--visible) {
+  height: 0;
+  opacity: 0;
+  visibility: hidden;
+  overflow: hidden;
+  transition: all 0.2s;
+}
+.st-accordion .st-accordion__content.st-accordion__content--visible {
+  opacity: 1;
+  visibility: visible;
+  overflow: hidden;
+  transition: all 0.2s;
+}

data/app/controllers/components_controller.rb

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