shadcn-ui 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 2c5bb322090bfc7c251b5bcfa6daaaee17f56194d345fb0f653e66b0c367194c
+  data.tar.gz: e9b663d94ca1084d7a9351c355bc8093e78e1eb4d7af55b96f2c253824bb67ca
+SHA512:
+  metadata.gz: 1f85cd138dd5be8981c6578b63d0c595606ed2953171efcda89202a9136bd5eb63c32cb39ad3498fd2eb35555c43779079ddcd298f4698993868a5d77dae7bbd
+  data.tar.gz: ecc9016da1365510ed5b854999e701c294d680b87adfd2540055c7c8f767b65add7245dd4571a29e0707df1032f8232ef395679c77fe94ee5851e364c2f5181f

data/.editorconfig

@@ -0,0 +1,10 @@
+root = true
+
+[*]
+end_of_line = lf
+insert_final_newline = true
+
+[*.{js,json,yml}]
+charset = utf-8
+indent_style = space
+indent_size = 2

data/.prettierignore

@@ -0,0 +1,43 @@
+# See https://help.github.com/articles/ignoring-files for more about ignoring files.
+#
+# If you find yourself ignoring temporary files generated by your text editor
+# or operating system, you probably want to add a global ignore instead:
+#   git config --global core.excludesfile '~/.gitignore_global'
+
+# Ignore bundler config.
+/.bundle
+
+# Ignore the default SQLite database.
+/db/*.sqlite3
+/db/*.sqlite3-*
+
+# Ignore all logfiles and tempfiles.
+/log/*
+/tmp/*
+!/log/.keep
+!/tmp/.keep
+
+# Ignore pidfiles, but keep the directory.
+/tmp/pids/*
+!/tmp/pids/
+!/tmp/pids/.keep
+
+# Ignore uploaded files in development.
+/storage/*
+!/storage/.keep
+/tmp/storage/*
+!/tmp/storage/
+!/tmp/storage/.keep
+
+/public/assets
+
+# Ignore master key for decrypting credentials and more.
+/config/master.key
+
+/app/assets/builds/*
+!/app/assets/builds/.keep
+
+exa-taildash
+node_modules
+yarn-error.log
+node_modules

data/.prettierrc.json

@@ -0,0 +1,28 @@
+{
+  "tabWidth": 2,
+  "useTabs": false,
+  "bracketSameLine": false,
+  "printWidth": 100,
+  "singleAttributePerLine": true,
+  "proseWrap": "always",
+  "overrides": [
+    {
+      "files": "*.erb",
+      "options": {
+        "parser": "html"
+      }
+    },
+    {
+      "files": "erb",
+      "options": {
+        "parser": "html"
+      }
+    },
+    {
+      "files": "*.html.erb",
+      "options": {
+        "parser": "html"
+      }
+    }
+  ]
+}

data/.rspec

@@ -0,0 +1 @@
+--require spec_helper

data/.ruby-version

@@ -0,0 +1 @@
+ruby-3.2.2

data/.vscode/settings.json

@@ -0,0 +1,11 @@
+{
+  "[html.erb]": {
+    "editor.defaultFormatter": "aliariff.vscode-erb-beautify"
+  },
+  "[erb]": {
+    "editor.defaultFormatter": "manuelpuyol.erb-linter"
+  },
+  "[rbs]": {
+    "editor.defaultFormatter": "esbenp.prettier-vscode"
+  }
+}

data/CHANGELOG.md

@@ -0,0 +1,6 @@
+# 0.0.1 / 2023-07-09
+
+## Enhancements:
+
+- Began to add the gem structure for the gem. Pull request
+  [#1](https://github.com/aviflombaum/shadcn-rails/pull/1)

data/CODE_OF_CONDUCT.md

@@ -0,0 +1,113 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+We as members, contributors, and leaders pledge to make participation in our community a
+harassment-free experience for everyone, regardless of age, body size, visible or invisible
+disability, ethnicity, sex characteristics, gender identity and expression, level of experience,
+education, socio-economic status, nationality, personal appearance, race, religion, or sexual
+identity and orientation.
+
+We pledge to act and interact in ways that contribute to an open, welcoming, diverse, inclusive, and
+healthy community.
+
+## Our Standards
+
+Examples of behavior that contributes to a positive environment for our community include:
+
+- Demonstrating empathy and kindness toward other people
+- Being respectful of differing opinions, viewpoints, and experiences
+- Giving and gracefully accepting constructive feedback
+- Accepting responsibility and apologizing to those affected by our mistakes, and learning from the
+  experience
+- Focusing on what is best not just for us as individuals, but for the overall community
+
+Examples of unacceptable behavior include:
+
+- The use of sexualized language or imagery, and sexual attention or advances of any kind
+- Trolling, insulting or derogatory comments, and personal or political attacks
+- Public or private harassment
+- Publishing others' private information, such as a physical or email address, without their
+  explicit permission
+- Other conduct which could reasonably be considered inappropriate in a professional setting
+
+## Enforcement Responsibilities
+
+Community leaders are responsible for clarifying and enforcing our standards of acceptable behavior
+and will take appropriate and fair corrective action in response to any behavior that they deem
+inappropriate, threatening, offensive, or harmful.
+
+Community leaders have the right and responsibility to remove, edit, or reject comments, commits,
+code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, and
+will communicate reasons for moderation decisions when appropriate.
+
+## Scope
+
+This Code of Conduct applies within all community spaces, and also applies when an individual is
+officially representing the community in public spaces. Examples of representing our community
+include using an official e-mail address, posting via an official social media account, or acting as
+an appointed representative at an online or offline event.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported to the community
+leaders responsible for enforcement at 4515+aviflombaum@users.noreply.github.com. All complaints
+will be reviewed and investigated promptly and fairly.
+
+All community leaders are obligated to respect the privacy and security of the reporter of any
+incident.
+
+## Enforcement Guidelines
+
+Community leaders will follow these Community Impact Guidelines in determining the consequences for
+any action they deem in violation of this Code of Conduct:
+
+### 1. Correction
+
+**Community Impact**: Use of inappropriate language or other behavior deemed unprofessional or
+unwelcome in the community.
+
+**Consequence**: A private, written warning from community leaders, providing clarity around the
+nature of the violation and an explanation of why the behavior was inappropriate. A public apology
+may be requested.
+
+### 2. Warning
+
+**Community Impact**: A violation through a single incident or series of actions.
+
+**Consequence**: A warning with consequences for continued behavior. No interaction with the people
+involved, including unsolicited interaction with those enforcing the Code of Conduct, for a
+specified period of time. This includes avoiding interactions in community spaces as well as
+external channels like social media. Violating these terms may lead to a temporary or permanent ban.
+
+### 3. Temporary Ban
+
+**Community Impact**: A serious violation of community standards, including sustained inappropriate
+behavior.
+
+**Consequence**: A temporary ban from any sort of interaction or public communication with the
+community for a specified period of time. No public or private interaction with the people involved,
+including unsolicited interaction with those enforcing the Code of Conduct, is allowed during this
+period. Violating these terms may lead to a permanent ban.
+
+### 4. Permanent Ban
+
+**Community Impact**: Demonstrating a pattern of violation of community standards, including
+sustained inappropriate behavior, harassment of an individual, or aggression toward or disparagement
+of classes of individuals.
+
+**Consequence**: A permanent ban from any sort of public interaction within the community.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 2.0, available at
+https://www.contributor-covenant.org/version/2/0/code_of_conduct.html.
+
+Community Impact Guidelines were inspired by
+[Mozilla's code of conduct enforcement ladder](https://github.com/mozilla/diversity).
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see the FAQ at
+https://www.contributor-covenant.org/faq. Translations are available at
+https://www.contributor-covenant.org/translations.

data/LICENSE.md

@@ -0,0 +1,18 @@
+MIT License
+
+Copyright (c) 2023 shadcn
+
+Permission is hereby granted, free of charge, to any person obtaining a copy of this software and
+associated documentation files (the "Software"), to deal in the Software without restriction,
+including without limitation the rights to use, copy, modify, merge, publish, distribute,
+sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all copies or substantial
+portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT
+NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES
+OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
+CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/Procfile.dev

@@ -0,0 +1,2 @@
+web: bin/rails server -p 3000
+css: bin/rails tailwindcss:watch

data/README.md

@@ -0,0 +1,90 @@
+# shadcn/ui on Rails
+
+[![Gem Version](https://badge.fury.io/rb/shadcn-ui.svg)](https://badge.fury.io/rb/shadcn-ui)
+
+Accessible and customizable components that you can copy and paste into your apps. Free. Open
+Source. **Use this to build your own component library**.
+
+![hero](public/og.jpg)
+
+## Documentation
+
+Visit https://avi.nyc/shadcn-on-rails to view the documentation.
+
+## Contributing
+
+I am desperately seeking contributors to this project as it is in the very early stages.
+
+### Contributing with Issues
+
+I am looking for people to start documenting issues in the project. The issues I'm interested in
+are:
+
+1. What components are missing? Just start listing out the components that have yet to be
+   implemented, better yet, open a PR with a branch for that issue and we can all start adding to
+   it.
+2. What components are not accessible? I am not an accessibility expert, so I need help with this.
+   If you see something that is not accessible, please open an issue and let me know. This might
+   mean the aria labels are hardcoded and not customizable or that the labels are simply missing.
+3. What components are not customizable? I am trying to make all components as customizable as
+   possible. If you see something that is not customizable, please open an issue and let me know.
+   All the attributes of a component, like aria labels or classes or id or name, etc, should be
+   customizeable by passing attributes into their helper functions that are passed down to the
+   component's partial to be rendered.
+4. Suggestions for the API of the components. I am trying to make the API as simple as possible. If
+   you have any suggestions for how to make the API simpler, please open an issue and let me know. I
+   am open to any and all suggestions.
+
+These are 3 main areas that would make the project easier for people to contribute to. They all make
+for great opportunities for someone new to open source to both file the issue and even begin to
+slowly implement them.
+
+### Setup
+
+1. Fork and clone the repo.
+2. Run `bundle install` to install dependencies, there aren't many as this is currently a standard
+   Rails applications.
+3. `/bin/dev` to start the application.
+
+### App Structure
+
+For now this is a standard Rails 7 application using propshaft and **importmaps**. This will soon be
+extracted into a gem that provides the components to be installed (copied) into the including
+application.
+
+### Components
+
+The goal of this project is to provide a set of components that can be copied into your application.
+The components are built using [TailwindCSS](https://tailwindcss.com/) and
+[Stimulus](https://stimulus.hotwire.dev/). Each component follows the same structure:
+
+1. There is a component partial located in `app/views/components/ui` that is rendered by the
+   component helper. Ex `app/views/components/ui/_button.html.erb` provides the markup for the
+   button component.
+2. There is a component helper named after the component that is responsible for rendering the
+   component and taking in arguments to customize the component located in `app/helpers/components`.
+   Ex `app/helpers/components/button.rb` provides the `render_button` helper that accepts arguments
+   such as `variant` which describes the kind of button and passes the classes for that `variant` to
+   the partial.
+3. When needed there is a stimulus controller for the component that provides the javascript
+   required to make the component interactive. Ex. `app/javascript/controllers/toast_controller.js`
+   provides the javascript for the toast component to display it and then hide it after a certain
+   amount of time.
+
+This demo application also included examples of how to use the components in
+`app/views/examples/components`. This is used to create the documentation site that this application
+provides with examples of teh components rendered.
+
+For now, this convention should be followed when developing new components.
+
+## [shadcn-ui](https://ui.shadcn.com)
+
+These components are based on the components provided by [shadcn/ui](https://ui.shadcn.com). Because
+`shadcn-ui` is so heavily reliant on Radix and React, these components are most likely not going to
+be 1:1 copies of the components provided by `shadcn-ui`. However, the goal is to provide the same
+components with the same API and the same accessibility features. If you are looking for a React
+component library, I highly recommend checking out [shadcn/ui](https://ui.shadcn.com).
+
+## License
+
+Licensed under the [MIT license](https://github.com/shadcn/ui/blob/main/LICENSE.md).

data/Rakefile

@@ -0,0 +1,12 @@
+# 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)
+
+task default: :spec
+
+require_relative "config/application"
+
+Rails.application.load_tasks

data/app/assets/config/manifest.js

@@ -0,0 +1,5 @@
+//= link_tree ../images
+//= link_directory ../stylesheets .css
+//= link_tree ../../javascript .js
+//= link_tree ../../../vendor/javascript .js
+//= link_tree ../builds

data/app/assets/stylesheets/application.scss

@@ -0,0 +1,42 @@
+/*
+ * This is a manifest file that'll be compiled into application.css, which will include all the files
+ * listed below.
+ *
+ * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
+ * vendor/assets/stylesheets directory can be referenced here using a relative path.
+ *
+ * You're free to add application-wide styles to this file and they'll appear at the bottom of the
+ * compiled file so the styles you add here take precedence over styles defined in any other CSS
+ * files in this directory. Styles in this file should be added after the last require_* statement.
+ * It is generally better to create a new file per style scope.
+ *
+ *=
+ *= 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

@@ -0,0 +1,92 @@
+@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;
+  }
+
+  .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;
+  }
+
+  .code-sample {
+    @apply max-h-[650px] overflow-x-auto rounded-lg border bg-zinc-950 dark:bg-zinc-900;
+  }
+
+  .code-sample span {
+    @apply bg-zinc-950;
+  }
+}

data/app/assets/stylesheets/lambda.light.scss

@@ -0,0 +1,136 @@
+/* Lambda Studio — Whiteout */
+.hljs .language-xml {
+  color: rgba(255, 255, 255, 0.533);
+}
+.hljs {
+  background: #000;
+  color: #fff;
+}
+
+.hljs-link {
+  color: #ca8a0488;
+}
+
+.hljs-attribute,
+.hljs-built_in,
+.hljs-keyword,
+.hljs-meta,
+.hljs-meta-keyword,
+.hljs-name,
+.hljs-selector-tag {
+  color: rgba(255, 255, 255, 0.533);
+}
+
+.hljs-string,
+.hljs-symbol {
+  color: rgba(255, 255, 255, 0.533);
+}
+
+.hljs-bullet,
+.hljs-code,
+.hljs-formula,
+.hljs-number,
+.hljs-params,
+.hljs-regexp,
+.hljs-tag,
+.hljs-variable {
+  color: rgba(255, 255, 255, 0.533);
+}
+
+.hljs-class .hljs-title {
+  color: rgba(255, 255, 255, 0.533);
+}
+
+.hljs-doctag,
+.hljs-meta-string,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-type,
+.hljs-variable.language {
+  color: #fff;
+  font-weight: bold;
+}
+
+.hljs-comment,
+.hljs-deletion,
+.hljs-doctype,
+.hljs-literal,
+.hljs-punctuation,
+.hljs-section,
+.hljs-selector-pseudo {
+  color: rgba(255, 255, 255, 0.533);
+}
+
+.hljs-addition,
+.hljs-annotation,
+.hljs-attribute,
+.hljs-cdata,
+.hljs-decorator,
+.hljs-emphasis,
+.hljs-name,
+.hljs-strong,
+.hljs-type,
+.hljs-quote,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-link {
+  color: #fff;
+}
+
+.hljs-meta-string,
+.hljs-selector-id,
+.hljs-selector-class,
+.hljs-selector-attr,
+.hljs-selector-pseudo {
+  color: #fff;
+  font-weight: bold;
+}
+
+.hljs-built_in,
+.hljs-built_in-name,
+.hljs-builtin-name,
+.hljs-keyword {
+  color: rgba(255, 255, 255, 0.533);
+}
+
+.hljs-section,
+.hljs-selector-tag,
+.hljs-title {
+  color: #fff;
+  font-weight: bold;
+}
+
+.hljs-subst,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-attr,
+.hljs-symbol,
+.hljs-bullet {
+  color: #fff;
+}
+
+.hljs-function .hljs-keyword,
+.hljs-function .hljs-title {
+  color: #fff;
+  font-weight: bold;
+}
+
+.hljs-doctag,
+.hljs-meta .hljs-meta-keyword,
+.hljs-template-tag,
+.hljs-template-variable,
+.hljs-link {
+  color: #fff;
+}
+
+.hljs-comment,
+.hljs-quote,
+.hljs-selector-pseudo,
+.hljs-selector-comment,
+.hljs-meta .hljs-meta-string {
+  color: rgba(255, 255, 255, 0.533);
+}
+
+.language-ruby .hljs-keyword {
+  color: #fff;
+}

data/app/channels/application_cable/channel.rb

@@ -0,0 +1,4 @@
+module ApplicationCable
+  class Channel < ActionCable::Channel::Base
+  end
+end

data/app/channels/application_cable/connection.rb

@@ -0,0 +1,4 @@
+module ApplicationCable
+  class Connection < ActionCable::Connection::Base
+  end
+end

data/app/controllers/application_controller.rb

@@ -0,0 +1,8 @@
+class ApplicationController < ActionController::Base
+  def index
+  end
+
+  def examples
+    render "examples/authentication/index"
+  end
+end

data/app/controllers/components_controller.rb

@@ -0,0 +1,7 @@
+class ComponentsController < ApplicationController
+  layout "component"
+
+  def show
+    render "examples/components/#{params[:component]}"
+  end
+end

data/app/helpers/application_helper.rb

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

data/app/helpers/components/accordion_helper.rb

@@ -0,0 +1,5 @@
+module Components::AccordionHelper
+  def render_accordion(title:, description:)
+    render "components/ui/accordion", title: title, description: description
+  end
+end