@matthewkennedy/spree_admin NPM

Spree Admin

A fresh take on an Admin UI for Spree, this is currently intended to be experimental and should not be used for production Spree applications.

Spree Admin is free of legacy dependencies and constraints. The goal is to speed up development and find new intuitive ways of using Spree Admin while completely modernizing the tech stack and user experience.

Benefits

Product Images can be tagged to their applicable option(s).
New order process, more akin to building an invoice than attempting to replicate a shopping cart in an admin UI (WIP).
Modern UI (WIP).

Installation

Starting with a freshly generated Rails 7 app, add the following gems to your Gemfile:

# USE THESE FOR NOW...
gem 'spree',             github: 'MatthewKennedy/spree',             branch: 'custom/spree_admin'
gem 'spree_admin',       github: 'MatthewKennedy/spree_admin',       branch: 'main'
gem 'spree_auth_devise', github: 'MatthewKennedy/spree_auth_devise', branch: 'custom/spree_admin'

From the command line run the following commands to:

Install Spree

   bin/rails g spree:install --user_class=Spree::User

Install Spree Auth Devise

   bin/rails g spree:auth:install

Install Spree Admin

   bin/rails g spree:backend:install

Import Javascript from NPM - (OPTIONAL)

If you are using NPM to manage your javascript and want to import the javascript via node_modules run:

   yarn add @matthewkennedy/spree_admin

And then create a new file in app/javascript called spree_admin.js and then import import '@matthewkennedy/spree_admin'.

The Tech Stack

All ES6 Vanilla JavaScript.
SASS/SCSS and JavaScript compiled by Rollup.
Uses the Rails Hotwire ecosystem where ever possible.
Bootstrap 5

Development strategy for JavaScript & CSS

The idea is to utilize as much of the Rails Hotwire ecosystem as possible while adding as little custom JavaScript and relying on as few external JavaScript libraries as possible (as hard as this may be). Try to build out from Stimulus controller where you can, Stimulus automatically listen to DOM changes from Turbo getting you a lot for free.

When it comes to the CSS try to write as little CSS as you can, if there is an existing Bootstrap utility class or component, use it, also try to use CSS variables where ever possible, avoid using SASS variables, doing this will result in a UI that is more adaptive at runtime.

Why Bootstrap when everyone is using Tailwind CSS? I hear you cry. Well this may change, but Tailwind is only a viable option when compiled to remove any unused CSS in production, this might create problems for extensions that want to use any Tailwind utilities that have not been used in the main Spree Admin, more consideration is needed.

Run in Dev Mode

From the root of spree_admin run:

yarn watch

Local setup

Fork it!
Clone the repository

Create test application:

cd spree_admin
bundle install
bundle exec rake test_app

Running tests

Entire test suite (this can take some time!)

bundle exec rspec

Single test file:

bundle exec rspec spec/features/admin/users_spec.rb

ChromeDriver is required for feature tests. On MacOS you can install it by running:

brew install chromedriver