Git Product home page Git Product logo

lycan_ui's Introduction

LycanUi

The name of this is tentative. Not really too sure what to call it yet.

What is this?

Rails is in dire need of UI frameworks. The JS ecosystem has all these awesome UI frameworks that make building beautiful UIs a breeze. But, Rails is missing that, and it's a pain. LycanUi serves to fill that gap.

LycanUi is a collection of UI components that can be easily added to your Rails app, either by copy and pasting the code, or by using a generator.

Copy and Paste? What?

Yep, copy and paste. Inspired by shadcn/ui, LycanUi just gives you the code.

The worst part about interacting with any UI framework is when you need to customize their designs or funcitonality. If you need to do something that is outside what the component was originally designed for, you normally.. just can't. Not to mention overriding their provided CSS is normally hellish.

LycanUi provides sensible defaults for styles and functionality, that way you get something that works and follows accessibility guidelines.

Start with the default functionality and styling, and then when you need to expand or change anything, you can.

Installation

Add this line to your application's Gemfile:

gem "lycan_ui", group: :development

And then execute:

$ bundle

Now to make sure your app is set up for use, run

$ rails generate lycan_ui:setup

Usage

Say you want to install the Button component. You can do so by running the following command:

$ rails generate lycan_ui:add button

You'll now see some things in components/button.rb, you can now use that component in any view or helper like so

<%= render Button.new %>

Contributing

TODO: Add contributing guidelines

License

The gem is available as open source under the terms of the MIT License.

lycan_ui's People

Contributors

msilycanthropy avatar dylhack avatar

Stargazers

joshua! avatar Adil Lari avatar avatar

Watchers

avatar avatar

Forkers

dylhack

lycan_ui's Issues

Label Component

Renders a label that can be associated with a form control
This and the input should interact gracefully with the Rails formbuilders

  • Basic Component
  • Make it Styled

Progress Component

So for this I don't think we actually want to use the real Progress Element. Because if it's rounded that creates some weirdness. Shadcn/ui uses two divs and then just translates one around to simulate it and keep rounding.

  • Basic Component
  • Works when rounded?
  • Make it Styled

Skeleton

Skeleton loader. Really really basic.

  • Basic Component
  • Make it Styled

Popover Component

This isn't really much different than the Hovercard other than the way it's triggered I don't think. So they can maybe share code?

  • Basic Component
  • Make it Styled

Pagination Component

It'd be cool if this gracefully interacted with Kaminari, will_paginate, and pagy. Not quite sure exactly how that would look though.

  • Basic Component
  • Make it Styled

So I think we also want to steal some of the stuff from pagy here.

The different styles of pagination + the smartness the pagy js does.

That really makes the complexity of this skyrocket, but will make it a lot more useful for users.

For a first pass, just support pagy

Combobox Component

Biggest thing to consider with this is whether or not we want to allow some kind of search that hits the backend for this? I think for the original version of it.. we probably don't want something that is populated by the server? But might be something nice to consider for later.

  • Basic Component
  • Make it Styled
  • Should leverage FloatingUI (this means we'll need a generator to install the dependency)

Toaster Component

This should work more like the Sonner in shadcn/ui, that thing fuckin rocks.

Should this interact with the server in some way? Like some helpers for pushing notifs with turbo streams?

  • Basic Component
  • Some server stuff happens?
  • Make it Styled

Right Click Menu Component

This might be a duplicate but I see lots of apps with this as well, so that could be something we implement here too

  • Basic Component
  • Make it Styled

Menu Bar

Easy to use Menu Bar component for an app. This should leverage the Dropdown component.

I'd assume we'd want the menu to have buttons/dropdowns/etc in it. So we should support all of that.

  • Basic Component
  • Has the ability to install dependent components
  • Make it Styled

Dialog Component

Should have some way to be server rendered and interact with Turbo.
Should have some way to be rendered on the client as well probably?

  • Basic Component
  • Make it Styled
  • Render from server
  • Render from client
  • Interacts well with forms

Collapse Component

This should have a nice animation

  • Basic Component
  • Make it Styled

Kicking this back because I have some questions on the way I want to implement it.

Namely do I want to use the grid-template-rows transition by default. Or just have it unanimated and use something like the details element to handle it semantically.

Could also be unanimated and use the hidden attribute.

Overall animating them get's a little wacky outside the svelte ecosystem because we don't get the luxury of the Svelte transition ecosystem.

Ultimately I also think this component is not super critical.

Context Component

Similar to the context menu we potentially want this to interact with Turbo in some way to perform server actions? Might make sense to leave that up to the consumer?

  • Basic Component
  • Make it Styled

Select Component

Typical select box. No programmatic filling or search yet.

Some select boxes do this weird thing where they lock the scroll of the page. we shouldn't do that. Let's just make the thing actually scroll with the page.

  • Basic Component
  • Leverage floating UI and install the dep
  • Make it Styled

Alert Component

  • Basic Stuff Working
  • Style It
  • Figure out what to do with Variants (like destructive)

Alert Dialog Component

  • Basic Component - Basically a modal without the ability to close until an action is picked
  • Make it Styled
  • Should it interact with forms for confirmations? (probably)
  • Should we have a button_to type helper that let's you use it easily? (probably)

One Time PIN Input Component

I see more and more apps having something like this, so it seems like something we should have as well.

  • Basic Component
  • Should use input-otp library probably.
  • Make it Styled

Avatar Component

This is mostly built already.

  • Make it Styled
  • Potentially add some variants?

Drawer Component

Should this have a way to be server rendered?

  • Basic Component
  • Make it Styled

Checkbox Component

  • Basic Component
  • Make it Styled

Something that is prerequisite to this is some way of creating a default tailwind.config.js or cog.tailwind.css file.

Something that probably sits behind a default install command, and then we can append/update that file as we install new components.

Button Component

  • Basic Component
  • Make it Styled
  • Make some Variants

We probably want some form of a ButtonTo as well, that would be quite nice.

Navigation Menu Component

Creates that cool hovercard (probably leverage that component) to put a bunch of navigation links inside of it, or just link to a single link.

  • Basic Component
  • Has the ability to install dependent components
  • Make it Styled

Alert Component

  • Basic Stuff Working
  • Style It
  • Figure out what to do with Variants (like destructive)

Textarea Component

Minimally styled text area.

Optionally apply character count?

  • Basic Component
  • Make it Styled

Alert Dialog Component

  • Basic Component - Basically a modal without the ability to close until an action is picked
  • Make it Styled
  • Should it interact with forms for confirmations? (probably)
  • Should we have a button_to type helper that let's you use it easily? (probably)

Command Component

This should have some option to hit different server actions per one you pick. Could do with a form and buttons with formaction? Not to sure how we should handle that.

  • Basic Component
  • Make it Styled

Input Component

  • Basic Component
  • All the various types (excluding file field, that will be handled on it's own).
  • Make it Styled

Switch Component

Cool little animated switch toggle. I can't remember how I did it for the one I made at work, but it uses some cool box shadow shit to morph between the two states, so if it can do that, that'd be cool.

  • Basic Component
  • Make it Styled

Radio + Radio Group Component

Straightforward Radio Buttons

Ofc should gracefully interact with Rails forms

  • Basic Component
  • Make it Styled

Something that is prerequisite to this is some way of creating a default tailwind.config.js or cog.tailwind.css file.

Something that probably sits behind a default install command, and then we can append/update that file as we install new components.

Sheet Component

Like Drawer but on the side

Should this be accessible if you swipe on mobile? Methinks yes but.. not sure.

  • Basic Component
  • Make it Styled

Badge Component

  • Basic Component
  • Make it Styled

A big thing on this is making sure that we have variants and end up with a nice way to do that.

Calendar Component

This one is going to be way more complex, might not even be worth it for an MVP.

There are probably some more advanced features we'd want.

  • Basic Component
  • Make it Styled
  • Localization?

Date Picker Component

No time yet, I think that is a bit more complex.
This should leverage the Calendar Component

  • Basic Component
  • Should format the date on mobile, but should use the native datepicker.
  • Has the ability to install dependent components
  • Make it Styled

Slider (Range Input) Component

Not sure how styleable the native ones are. Those basically get the job done?
Should ofc gracefully interact with Rails forms.

  • Basic Component
  • Make it Styled

Table Component

This should support filtering and sorting with Turbo

  • Basic Component
  • Support filtering and sorting out of the box
  • Make it Styled

Eventually it would be super amazing if we could have a helper that lets you do like table(collection. attributes: [:thing, :thing_2]) that renders a table for you automatically. That has like filtering, sorting, picking columns, paginations, etc.

Toggle / Toggle Group Component

Toggles between two states (probably tied to a form field in some way?)

  • Basic Component
  • Make it Styled

So my issue with this one is I am not entirely clear how we would interact with this on both the stimulus side or on the rails side.

I'd need to see a proposal of how we'd like this implemented.

Hover Card (Popover) Component

Should leverage floating UI
Should have the ability to lazy load with turbo frames

  • Basic Component
  • Make it Styled
  • Lazy loadable

Tooltip Component

Your basic tooltip with lots of positioning stuff

Leverage floatingUI

  • Basic Component
  • Make it Styled

Card Component

  • Basic Component
  • Make it Styled

Card requires a bit more design before getting done, and also frankly I don't think fits with the MVP much, since I care more about getting nice functional components out

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.