Bali ViewComponents

Collection of UI components using the ViewComponent library for easily building interfaces.

Uses StimulusJS for javascript functionality and SCSS along with the Bulma framework for styling.

Usage

Render Bali components in an erb template:

  <%= render Bali::Link::Component.new(name: 'Link', href: '/') %>

Installation

Add this line to your application's Gemfile:

gem "bali_view_components"

And this to the package.json

yarn add bali-view-components

To use a component add import the SCSS styles and JS if required.

Contributing

To create a new component run:

rails g view_component hello_button name

We use lookbook to showcase the available components and develop new ones. To run the development server run:

cd spec/dummy && bin/dev

This script uses the foreman gem to run the following:

• Rails server
• Process for JS compilation in watch mode
• Process for SCSS compilation in watch mode

Open your browser at: http://localhost:3001/lookbook

License

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

Javascript

Some javascript controllers emit events for communicating between controllers. To enable debugging this information run the following command on the javascript console. baliDispatchDebugEnabled = true

Testing

RSpec

To run ruby tests, run: bundle exec rspec

Cypress

To run JavaScript tests:

• Run rails server -p 3001. The http://localhost:3001/rails/view_components has been configured as the baseUrl, and tests will fail if the server is not running
• Run yarn run cy:run to run tests in the terminal
• Or run yarn run cy:open to open the tests in the browser

Lookbook

Lookbook gives ViewComponent-based projects a ready-to-go development UI for navigating, inspecting and interacting with component previews.

Project URL: https://github.com/allmarkedup/lookbook

To add a component, just create a preview.rb file within the component folder. Lookbook will automatically detect component previews and display them in the sidebar.

Components' Status

Update this table when making progress on any of the Components or when adding new ones.

Component Name	In Project	Preview	Docs	Tests	Notes
AddToCalendar	❌	❌	❌	❌
Avatar	✅	✅	✅	✅
Box	❌	❌	❌	❌
Breadcrumb	✅	✅	✅	✅
BooleanIcon	✅	✅	✅	✅
Calendar	✅	✅	✅	✅
Carousel	✅	✅	✅	✅
Card	✅	✅	✅	✅
Chart	✅	✅	〰️	✅
Clipboard	✅	✅	✅	✅
Columns	✅	✅	✅	✅
DataTable	✅	✅	✅	✅
DeleteLink	✅	✅	✅	✅
DisplayValue	❌	❌	❌	❌
Drawer	✅	✅	✅	✅
Dropdown	✅	✅	✅	✅
Filters	✅	✅	✅	✅
GanttChart	✅	✅	✅	❌
Heatmap	✅	✅	✅	✅
Hero	✅	✅	✅	✅
Hovercard	✅	✅	✅	✅
Icon	✅	✅	✅	✅
ImageGrid	✅	✅	✅	✅
InfoLevel	✅	✅	✅	✅
LabelValue	✅	✅	✅	✅
Level	✅	✅	✅	✅
Link	✅	✅	✅	✅
List	✅	✅	✅	✅
Loader	✅	✅	✅	✅
Modal	✅	✅	✅	✅
NavBar	✅	✅	✅	✅
Notification	✅	✅	✅	✅
PageHeader	✅	✅	〰️	✅
Progress	✅	✅	✅	✅
PropertiesTable	✅	✅	✅	:white_check_mark
Rate	✅	✅	✅	✅
Reveal	✅	✅	✅	✅
RichTextEditor	✅	✅	❌	❌
SearchInput	✅	✅	✅	✅
SideMenu	✅	✅	✅	✅
SortableList	✅	✅	✅	✅
Stepper	✅	✅	✅	✅
Table	✅	✅	✅	✅
Tabs	✅	✅	✅	✅
Timeago	✅	✅	✅	✅
Timeline	✅	✅	✅	✅
Tooltip	✅	✅	✅	✅
TreeView	✅	✅	✅	✅
TurboNativeApp::SignOut	✅	✅	✅	✅

Stimulus JS Controllers

Name	Description	Tests
AutoPlay	It plays audio automatically when the page is loaded	❌
AutocompleteAddress	Autocompletes address using Google places API	❌
CheckboxToggle	Toggles ON and OFF different elements based on the state of a checkbox	❌
Datepicker	Uses the flatpickr library to render a Date Picker	❌
DynamicFields	Renders input fields dynamically	❌
ElementsOverlap	Prevents a fixed elements overlaps a dynamic element	❌
FileInput	Displays the selected filename in the correct place	❌
FocusOnConnect	Scrolls an element into the visible area of the browser window	❌
InputOnChange	It notifies the server when there is some change in the input	❌
Print	Prints the current page	❌
RadioToggle	Shows different elements based on the value of a radio button	❌
SlimSelect	Uses Slim Select library to render a Select Input	❌
StepNumberInput	Provides step number functionality to inputs	❌
SubmitButton	Displays a loading button state when a form submission is started	❌
SubmitOnChange	Automatically submits the form when the form element changes value	❌
TrixAttachments	Allows to upload files with a certain size limit using the Trix editor	❌

Legends

Icon	Meaning
✅	Is complete
〰️	Incomplete
❌	Missing entirely