localtower 1.0.0 → 2.0.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9db89fe02b54c1eb46633f4df610405c050aaf5a44bcdc22a90ffe7cbb54637b
-  data.tar.gz: 6738a7be7646e0c4cf0844def2b6785f659922c064cf5e7e0ac39242c6f5f7b4
+  metadata.gz: f65e6defd9203e2fb4f8d7d257a0fc978bced6c4b4f55e70f6559868b7604a8d
+  data.tar.gz: d0e1bd812df62274ce5035d13a4bc0f896a5b4a0969895679321bd369bf3d18c
 SHA512:
-  metadata.gz: 2388bae27139b79e346b70fab53701f87112aca41d104fa3dcd8b2b9d3537dc9d54742c990384135cc347b50207d5023d96b699847b568731e78ed1204a3afe5
-  data.tar.gz: 18959e622626a9452fdc67dae321ef93f1be65e81657e66ad692f330bfe2fc47c29fb731c66adddd3d61f718c286caf70b9b0fa9e219ec616aea5acfd8aaee71
+  metadata.gz: c75b95c7f1cbe343f9ef9fb2f1a767854f0111c9b74d9200167ba83f2b14aea267d1f0e0ab73c928893a324a4db66641d17ff4896376ef1203533043c66a99be
+  data.tar.gz: 9d4a0dc7223944e6c93c1858e4fc0f8cb0588ff9b6bbbd87616ceddb85a817aa31f4b9758ec3a2106d54182787faae3bf9add60373c6a3d77326021311c6ee5b

data/README.md

@@ -1,46 +1,85 @@
+![Gem](https://img.shields.io/gem/v/localtower) ![Gem](https://img.shields.io/gem/dt/localtower?label=gem%20downloads)
+
 <p align="center">
-<img src="https://raw.githubusercontent.com/damln/localtower/master/public/logo-localtower-white-300.png" alt="Localtower">
+<img src="https://raw.githubusercontent.com/damln/localtower/0f279b82e9a7701b9f0aab21a8e4561468535046/public/com/twitter-cover-2.png" alt="Localtower">
 </p>
 
-## Intro
+## Introduction
 
-Please use localtower version `>= 1.0.0`
-See installation process below.
+![New Model](https://raw.githubusercontent.com/damln/localtower/react/public/screenshots/v2.0.0/Screenshot%202024-11-18%20at%2022.44.30.jpg)
 
-Compatibility:
-- Rails >= 5.2
-- Ruby >= 2.3
+**- What is Localtower?**
+
+Localtower is a Rails Engine mountable in development environment to help you generate migrations for your Rails application.
+It's like ActiveAdmin or Sidekiq UI.
+You plug it in your `config/routes.rb` and it works out of the box.
+Check the _Installation_ section below for more details.
+
+**- How Localtower works?**
+
+Localtower gives you a UI to create models and migrations. It will generate a migration file like you would do with `rails generate migration add_index_to_users`. You will see the generated file in `db/migrate/` folder.
+
+**- Why creating a UI for Rails migrations?**
+
+Rails migrations are well documented in the official [Rails Guides](https://guides.rubyonrails.org/active_record_migrations.html) but we often tend to forget some commands or do typo errors. Like writing `add_index :user, :email` instead of `add_index :users, :email` (did you spot the typo?). Working from a UI with a fixed list of commands reduces the chance of making errors.
+
+**- When I'm using Localtower, can I still generate migrations from the command line?**
+
+Of course! Localtower does not lock you up. You can still generate migrations like you did before. Localtower is just a migration generator. You can also generate a migration from Localtower and then edit it manually before running `rails db:migrate`
+
+**- What does happen when I want to remove Localtower?**
+
+You just have to remove the gem from your `Gemfile`, run `bundle`, remove the engine in `config/routes.rb`, and that's it! All your previous migrations will stay in `db/migrate/`. You are never locked up with Localtower. You can install or uninstall anytime. Remember, it is just a UI to generate files. Do not hesitate to [open an issue on Github](https://github.com/damln/localtower/issues) and tell me why you don't want it anymore. It will be very valuable for me to understand what I can do better ❤.
+
+**- Cool, but there are some migration options that are not available in Localtower, what can I do?**
+
+Localtower doesn't implement all the Rails Migrations API. I focused on the most common scenarios. If you need to do something tricky in your migrations, you can still edit the migrations manually. You are also welcome to [open an issue on Github](https://github.com/damln/localtower/issues) to ask for a specific feature. I'm always open to extend the possibilities of Localtower.
+
+## Screenshots
 
 ### Create a model
-![New Model](https://raw.githubusercontent.com/damln/localtower/master/public/screenshots/v1.0.0/new_model.png)
+
+![New Model](https://raw.githubusercontent.com/damln/localtower/react/public/screenshots/v2.0.0/Screenshot%202024-11-18%20at%2022.44.30.jpg)
 
 ### Create a migration
-![New Migration](https://raw.githubusercontent.com/damln/localtower/master/public/screenshots/v1.0.0/new_migration.png)
 
-### See the Models
-![Models](https://raw.githubusercontent.com/damln/localtower/master/public/screenshots/v1.0.0/models.png)
+![New Migration](https://raw.githubusercontent.com/damln/localtower/react/public/screenshots/v2.0.0/Screenshot%202024-11-18%20at%2022.48.21.jpg)
 
 ### See the Migrations (and migrate)
-![Migrations](https://raw.githubusercontent.com/damln/localtower/master/public/screenshots/v1.0.0/migrations.png)
 
-## INSTALL
+![Migrations](https://raw.githubusercontent.com/damln/localtower/react/public/screenshots/v2.0.0/Screenshot%202024-11-18%20at%2022.50.11.jpg)
+
+## Installation
 
-Should work with any Rails 5.2+ application.
-Only tested with PostgreSQL.
+Please use the best localtower version: `>= 2.0.0`
+See installation process below.
+
+Compatibility:
+
+- Rails >= 5.2
+- Ruby >= 2.3
 
 Add to your `Gemfile` file:
+
 ```ruby
+# In your current group 'development':
 group :development do
-  gem "localtower"
+  # [probably other gems here]
+  gem 'localtower'
 end
+
+# Or as a one liner:
+gem 'localtower', group: :development
 ```
 
 Run command in your terminal:
+
 ```bash
 bundle install
 ```
 
 Add to your `config/routes.rb`:
+
 ```ruby
 MyApp::Application.routes.draw do
   if Rails.env.development?
@@ -52,7 +91,8 @@ MyApp::Application.routes.draw do
 end
 ```
 
-/!\ IMPORTANT /!\
+**⚠ IMPORTANT ⚠**
+
 Change your config/environments/development.rb:
 
 ```ruby
@@ -71,13 +111,52 @@ If you know how to override this configuration in the gem instead of doing it in
 
 ## Usage
 
-Open your browser at [http://localhost:3000/localtower](http://localhost:3000/localtower).
+To access the UI, run your local rails server and open your browser at [http://localhost:3000/localtower](http://localhost:3000/localtower).
+
+## Full scenrio ScreenShots
+
+### Create a model
+
+![](https://raw.githubusercontent.com/damln/localtower/react/public/screenshots/v2.0.0/Screenshot%202024-11-18%20at%2022.44.30.jpg)
 
-## Roadmap
+It will create a migration file:
 
-- Be able to use `uuid` instead of `id` as primary when creating models.
-- Realtime preview of the migration files
-- Better frontend validation
+![](https://raw.githubusercontent.com/damln/localtower/react/public/screenshots/v2.0.0/Screenshot%202024-11-18%20at%2022.44.42.jpg)
+
+### Create a migration
+
+![](https://raw.githubusercontent.com/damln/localtower/react/public/screenshots/v2.0.0/Screenshot%202024-11-18%20at%2022.48.21.jpg)
+
+It will generate a migration file:
+
+![](https://raw.githubusercontent.com/damln/localtower/react/public/screenshots/v2.0.0/Screenshot%202024-11-18%20at%2022.48.51.jpg)
+
+### Create another model
+
+Now, we add a `Book` model:
+
+![](https://raw.githubusercontent.com/damln/localtower/react/public/screenshots/v2.0.0/Screenshot%202024-11-18%20at%2022.50.04.jpg)
+
+### All the migrations generated
+
+![](https://raw.githubusercontent.com/damln/localtower/react/public/screenshots/v2.0.0/Screenshot%202024-11-18%20at%2022.50.19.jpg)
+
+
+## Upgrading
+
+I recommend you to upgrade to the latest version which is `2.0.0`.
+To upgrade, just use the latest version of Localtower.
+You have nothing else to do.
+
+```
+bundle update localtower
+```
+
+## Contribute
+
+Thanks for reporting issues, I'll do my best to fix the bugs 💪
+
+![ga](https://www.google-analytics.com/collect?v=1&tid=G-1XG3EBE2DZ&cid=555&aip=1&t=event&ec=github&ea=visit&dp=readme&dt=gem)
 
 ## Run test
 
@@ -90,29 +169,38 @@ LOCALTOWER_PG_USERNAME="admin"
 LOCALTOWER_PG_PASSWORD="root_or_smething"
 ```
 
+drop / create database:
+
+```bash
+cd spec/dummy
+bundle exec rails db:drop
+bundle exec rails db:create
+rm app/models/*.rb
+```
+
 Run the spec:
+
 ```bash
 bundle install
 bundle exec rspec spec/
 ```
 
-## Contribute
-
-Thanks for reporting issues, I'll do my best to fix the bugs 💪
-
-![ga](https://www.google-analytics.com/collect?v=1&tid=G-1XG3EBE2DZ&cid=555&aip=1&t=event&ec=github&ea=visit&dp=readme&dt=gem)
-
-## Deploy
+## Deploy latest gem version
 
 Only for official contributors.
 
-    rm *.gem | gem build localtower.gemspec && gem push localtower-*.gem
+    git tag v2.0.0 # change by last version
+    git push --tags
+    rm *.gem
+    gem build localtower.gemspec
+    gem push localtower-*.gem
 
 ## Notes
 
 Do not hesitate to open issues if you have troubles using the gem.
 
-- By Damian Le Nouaille Diez: https://damln.com
-- Supported by Explicit Ruby: https://explicit-ruby.run
+- By Damian Le Nouaille:
+  - Twitter: https://twitter.com/damian_lnd
+  - Website: https://damln.com
 - Link on RubyGems.org: https://rubygems.org/gems/localtower
-- Stats on BestGems.org: https://bestgems.org/gems/localtower
+- Stats on BestGems.org (30k+ downloads): https://bestgems.org/gems/localtower

data/app/assets/stylesheets/application.css

@@ -0,0 +1,68 @@
+@import "tailwindcss/base";
+@import "tailwindcss/components";
+@import "tailwindcss/utilities";
+
+th {
+  font-weight: 400;
+  text-align: left;
+}
+
+.text-xss {
+  font-size: 0.6rem;
+  line-height: 0.9rem;
+}
+
+input[type="checkbox"] {
+  appearance: none;
+  background-color: #000;
+  margin: 0;
+  font: inherit;
+  color: currentColor;
+  width: 1.2em;
+  height: 1.2em;
+  border: 0.1em solid currentColor;
+  border-radius: 0.15em;
+  transform: translateY(-0.075em);
+  display: grid;
+  place-content: center;
+  cursor: pointer;
+}
+
+input[type="checkbox"]:active {
+  opacity: 0.6;
+}
+
+input[type="checkbox"]::before {
+  content: "";
+  width: 0.65em;
+  height: 0.65em;
+  transform: scale(0);
+  transition: 120ms transform ease-in-out;
+  box-shadow: inset 1em 1em rgb(19, 187, 59);
+
+  transform-origin: bottom left;
+  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
+}
+
+input[type="checkbox"]:checked::before {
+  transform: scale(1);
+}
+/*---------------*/
+
+.full-message {
+  z-index: 999;
+  position: fixed;
+  background: rgba(0,0,0,0.9);
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+
+  color: #fff;
+}
+
+.grid-sizer, .grid-item {
+  box-sizing: border-box;
+  width: 45%;
+  margin: 2%;
+}

data/app/controllers/localtower/pages_controller.rb

@@ -3,71 +3,56 @@ require_dependency 'localtower/application_controller'
 module Localtower
   class PagesController < ApplicationController
     def new_migration
+      @migrations = ::Localtower::Status.new.run.select { |i| i["status"] == :todo }
       @models = ::Localtower::Tools.models_presented
     end
 
     def migrations
-      @migrations = ::Localtower::Status.new.run
+      @migrations = ::Localtower::Status.new.run.take(30)
     end
 
     def post_migrations
-      # Because we have a list or a field, take the item from the list in priority
-      migrations = clean_params["migrations"].map do |action_line|
-        # This is used for "rename_column" action:
-        action_line["new_column_type"] = action_line["column_type"]
+      migrations = JSON.parse(clean_params['migrations'])
 
-        if action_line["column_list"].present?
-          action_line["column"] = action_line["column_list"]
-        end
+      ::Localtower::Generators::Migration.new(migrations, clean_params['migration_name']).run
 
-        action_line.delete("column_list")
-        # / This is used for "rename_column" action
-
-        action_line
-      end
-
-      use_generator(::Localtower::Generators::Migration, migrations)
-
-      redirect_to migrations_path
+      redirect_to new_migration_path
     end
 
-    def new_model
-    end
-
-    def models
-      @models = ::Localtower::Tools.models_presented
-    end
+    def new_model; end
 
     def post_models
       model = clean_params["model"]
-      model['attributes'] = model['attributes'].map do |attribute_line|
+      model['attributes'] = JSON.parse(model['attributes']).map do |attribute_line|
         # Convert checkbox to ruby value:
         attribute_line['nullable'] = false if attribute_line['nullable'].blank?
-
-        # Convert index hash:
-        if attribute_line['index']
-          attribute_line['index']['unique'] = true if attribute_line['index']['unique'] == 'true'
-        end
+        attribute_line['index'] = nil if attribute_line['index'].blank?
 
         attribute_line
       end
 
-      use_generator(::Localtower::Generators::Model, model)
-      redirect_to migrations_path
+      if model['attributes'].all? { |i| i['column_name'].present? }
+        ::Localtower::Generators::Model.new(model).run
+        redirect_to migrations_path
+      else
+        redirect_back fallback_location: root_path
+      end
+    end
+
+    def rm_file
+      File.delete(clean_params['file']) if File.exist?(clean_params['file'])
+      redirect_back fallback_location: migrations_path
     end
 
     def post_actions
       cmd = ::Localtower::Tools.perform_cmd(clean_params['cmd'])
       flash[:notice] = cmd if cmd['ERROR']
+
       redirect_back fallback_location: root_path
     end
 
     private
 
-    def use_generator(generator_klass, options)
-      generator_klass.new(options).run
-    end
-
     def clean_params
       params.permit!.to_hash.with_indifferent_access
     end

data/app/javascript/application.js

@@ -0,0 +1,46 @@
+import React from "react";
+import NewModelForm from "./components/NewModelForm";
+import NewMigrationForm from "./components/NewMigrationForm";
+
+import { createRoot } from "react-dom/client";
+
+document.addEventListener("DOMContentLoaded", () => {
+  $(".grid").masonry({
+    itemSelector: ".grid-item",
+    percentPosition: true,
+    columnWidth: ".grid-sizer",
+  });
+
+  hljs.highlightAll();
+
+  const container1 = document.getElementById("react-container-new-model");
+  if (container1) {
+    const root1 = createRoot(container1); // createRoot(container!) if you use TypeScript
+    root1.render(<NewModelForm />);
+  }
+
+  const container2 = document.getElementById("react-container-new-migration");
+  if (container2) {
+    const root2 = createRoot(container2); // createRoot(container!) if you use TypeScript
+    root2.render(<NewMigrationForm />);
+  }
+
+  function camelize(str) {
+    return str
+      .replace(/(?:^\w|[A-Z]|\b\w)/g, function (word, index) {
+        return word.toUpperCase();
+      })
+      .replace(/\s+/g, "");
+  }
+
+  function sanitizeInput(e) {
+    var currentInputValue = $(e.currentTarget).val();
+    var cleanInputValue = currentInputValue.replace(/[^a-zA-Z0-9]/g, "");
+    cleanInputValue = camelize(cleanInputValue);
+    $(e.currentTarget).val(cleanInputValue);
+  }
+
+  $(document).on("keyup", "[data-selector='modelName']", function (e) {
+    sanitizeInput(e);
+  });
+});

data/app/javascript/components/DarkSelect.js

@@ -0,0 +1,115 @@
+import React from 'react';
+import Select from 'react-select';
+
+const DarkSelect = ({ options, value, onChange, defaultValue, keySuffix = '', placeholder = "Select", isMulti = false, isSearchable = false, isClearable = false, customClassNamesOverrides = {}, setValue = null }) => {
+  // const customStyles = {
+  //   control: (provided, state) => ({
+  //     ...provided,
+  //     backgroundColor: '#1a1a1a',
+  //     borderColor: state.isFocused ? '#4a4a4a' : '#333333',
+  //     '&:hover': {
+  //       borderColor: '#4a4a4a'
+  //     },
+  //     borderRadius: '0.375rem',
+  //     padding: '2px'
+  //   }),
+  //   menu: (provided) => ({
+  //     ...provided,
+  //     // backgroundColor: '#1a1a1a',
+  //     border: '1px solid #333333',
+  //   }),
+  //   option: (provided, state) => ({
+  //     ...provided,
+  //     backgroundColor: state.isSelected
+  //       ? '#2d2d2d'
+  //       : state.isFocused
+  //         ? '#262626'
+  //         : '#1a1a1a',
+  //     color: '#e5e5e5',
+  //     '&:active': {
+  //       backgroundColor: '#333333'
+  //     },
+  //     cursor: 'pointer'
+  //   }),
+  //   singleValue: (provided) => ({
+  //     ...provided,
+  //     color: '#e5e5e5'
+  //   }),
+  //   input: (provided) => ({
+  //     ...provided,
+  //     color: '#e5e5e5'
+  //   }),
+  //   placeholder: (provided) => ({
+  //     ...provided,
+  //     color: '#6b7280'
+  //   }),
+  //   dropdownIndicator: (provided, state) => ({
+  //     ...provided,
+  //     color: state.isFocused ? '#6b7280' : '#4a4a4a',
+  //     '&:hover': {
+  //       color: '#6b7280'
+  //     }
+  //   }),
+  //   clearIndicator: (provided, state) => ({
+  //     ...provided,
+  //     color: state.isFocused ? '#6b7280' : '#4a4a4a',
+  //     '&:hover': {
+  //       color: '#6b7280'
+  //     }
+  //   }),
+  //   indicatorSeparator: (provided) => ({
+  //     ...provided,
+  //     backgroundColor: '#333333'
+  //   })
+  // };
+
+  const customClassNames = {
+    control: (state) => `
+      !min-h-[24px] !h-[34px] !rounded !bg-localtower-600 !border !border-localtower-500 !outline-none !focus:border-localtower-400 !transition-colors !text-localtower-100 !cursor-pointer
+      ${state.isFocused ? '!border-localtower-300 !shadow-none' : ''}
+      ${state.isDisabled ? 'opacity-50 cursor-not-allowed' : 'hover:!border-localtower-300'}
+      ${customClassNamesOverrides.control}
+    `,
+    menu: () => `!mt-0 !text-localtower-100 !border !border-localtower-500 !bg-localtower-600 !p-0 !rounded-md !m-0 !w-96 ${customClassNamesOverrides.menu}`,
+    menuList: () => `!p-0 !text-localtower-100 !border !border-localtower-500 !bg-localtower-600 !rounded-md !m-0 !cursor-pointer ${customClassNamesOverrides.menuList}`,
+    option: (state) => `
+      !px-2.5 !py-1.5
+      !bg-localtower-600
+      !text-localtower-100
+      ${state.isSelected ? '!bg-localtower-900 !text-white' : ''}
+      hover:!bg-localtower-900 hover:!text-white !cursor-pointer active:opacity-70
+    `,
+    // input: () => '!text-blue-200',
+    // placeholder: () => '!text-gray-500',
+    singleValue: () => '!text-localtower-100',
+    // valueContainer: () => 'px-2',
+    // dropdownIndicator: (state) => `
+    //   !text-gray-500 !p-2 hover:!text-gray-300
+    //   ${state.isFocused ? '!text-gray-400' : ''}
+    // `,
+    // clearIndicator: () => '!text-gray-500 !p-2 hover:!text-gray-300',
+    indicatorSeparator: () => '!mt-1 !bg-localtower-500'
+  };
+
+  const key = options.map((_) => _.value).join('-') + keySuffix;
+
+  return (
+    <Select
+      key={key}
+      options={options}
+      value={options.find((option) => option.value === value)}
+      defaultValue={defaultValue}
+      // setValue={setValue}
+      onChange={onChange}
+      // isMulti={isMulti}
+      // styles={customStyles}
+      classNames={customClassNames}
+      placeholder={placeholder}
+      isSearchable={isSearchable}
+      isClearable={isClearable}
+      // menuIsOpen={true}
+    />
+  );
+};
+
+export default DarkSelect;

data/app/javascript/components/ModernTooltip.js

@@ -0,0 +1,26 @@
+import React, { useState } from 'react';
+
+const ModernTooltip = ({ children, content, title = null }) => {
+  const [isHovered, setIsHovered] = useState(false);
+
+  return (
+    <div
+      className="relative inline-block"
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}
+    >
+      {children}
+      {isHovered && (
+
+        <div className="absolute z-10 w-60 bg-localtower-800 text-localtower-100 p-2 rounded-lg shadow-lg text-sm -left-3/4">
+          { title && <div className="text-xs text-localtower-50 uppercase py-2 font-bold">{title}</div> }
+          <div>
+            {content}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default ModernTooltip;