localtower 1.0.0 → 2.0.0

data/app/javascript/components/data/Stores.js

@@ -0,0 +1,294 @@
+import React from "react";
+import {
+  Braces,
+  ALargeSmall,
+  Calendar1,
+  CalendarClock,
+  Hash,
+  Brackets,
+  ListOrdered,
+  ToggleRight,
+  Binary,
+  LetterText,
+  Bolt,
+  Package,
+  CirclePlus,
+  CircleMinus,
+  RefreshCw,
+} from "lucide-react";
+
+const Stores = () => {
+  const COLUMN_TYPES = window.COLUMN_TYPES;
+  const COLUMN_INDEXES = window.COLUMN_INDEXES;
+  const COLUMN_DEFAULTS = window.COLUMN_DEFAULTS;
+  const APP_MODELS = window.APP_MODELS;
+
+  const modelsForSelect = () => {
+    return APP_MODELS.map((model) => ({
+      value: model.underscore,
+      label: (
+        <div className="flex flex-row gap-2">
+          <div className="py-1 flex justify-center items-center text-localtower-50">
+            {model.name}
+          </div>
+          <div className="text-localtower-400 py-1 flex justify-center items-center text-xss font-mono">
+            {model.table_name}
+          </div>
+        </div>
+      ),
+    }));
+  };
+
+  const actionsForSelect = () => {
+    return COLUMN_ACTIONS.map((action) => ({
+      value: action.name,
+      label: (
+        <div className="flex flex-row gap-2">
+          <div className="py-1 flex justify-center items-center w-5 text-localtower-300">
+            {iconForAction(action.name)}
+          </div>
+          <div className="py-1 flex justify-center items-center text-localtower-50">
+            {action.label}
+          </div>
+          <div className="text-localtower-400 py-1 flex justify-center items-center text-xss font-mono">
+            {action.example}
+          </div>
+        </div>
+      ),
+    }));
+  };
+
+  const modelsForSelectWithout = (excludedModelNames) => {
+    return modelsForSelect().filter((entry) => {
+      return !excludedModelNames.includes(entry.value);
+    });
+  };
+
+  const snakeCase = (str) => {
+    return str
+      .replace(/\ /g, "_")
+      .replace(/[^a-zA-Z0-9\_]/g, "")
+      .replace(/\_\_/g, "_")
+      .toLowerCase();
+  };
+
+  const modelByValue = (value) => {
+    return APP_MODELS.find((model) => model.underscore === value);
+  };
+
+  const filterAttributes = (row) => {
+    let model = modelByValue(row.model_name);
+
+    return model ? model.attributes_list : [];
+  };
+
+  const filterIndexes = (row) => {
+    let model = modelByValue(row.model_name);
+
+    let indexes = [];
+
+    if (model) {
+      let attributes_with_index = model.attributes_list.filter(
+        (attribute) => attribute.index.length > 0
+      );
+
+      attributes_with_index.map((attribute) => {
+        attribute.index.map((index) => {
+          let columns = [index.columns.map((column) => column).join(", ")];
+
+          indexes.push({
+            value: index.name,
+            label: (
+              <div className="flex flex-row gap-2">
+                <div className="py-1 flex justify-center items-center">
+                  {columns}
+                </div>
+                <div className="text-localtower-400 py-1 flex justify-center items-center text-xss font-mono">
+                  {index.name}{" "}
+                  {index.unique && (
+                    <span className="bg-localtower-300 text-xs font-sans mx-2 px-2 text-localtower-700 rounded-full">
+                      unique
+                    </span>
+                  )}
+                </div>
+              </div>
+            ),
+          });
+        });
+      });
+    }
+
+    return indexes;
+  };
+
+  const attributesForSelect = (attributes_list, additional = []) => {
+    // "additional" is used to add columns that are already in the migration file
+    const existingColumns = additional
+      .filter((row) => row.action_name === "add_column")
+      .filter((row) => row.column_name.length)
+      .map((row) => {
+        return {
+          name: row.column_name,
+          type: row.column_type,
+          index: [],
+        };
+      });
+
+    const list = existingColumns.concat(attributes_list);
+
+    return list.map((attr) => ({
+      value: attr.name,
+      label: (
+        <div className="flex flex-row gap-2">
+          <div className="py-1 flex justify-center items-center">
+            {attr.name}
+          </div>
+          <div className="text-localtower-400 py-1 flex justify-center items-center text-xss font-mono">
+            {attr.type}{" "}
+            {attr.index.length > 0 && (
+              <span className="bg-localtower-300 text-xs font-sans mx-2 px-2 text-localtower-700 rounded-full">
+                index
+              </span>
+            )}
+          </div>
+        </div>
+      ),
+    }));
+  };
+
+  const iconForAction = (action) => {
+    const size = 17;
+    const strokeWidth = 1;
+
+    if (action.indexOf("add") !== -1 || action === "belongs_to") {
+      return <CirclePlus strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (action.indexOf("remove") !== -1 || action === "drop_table") {
+      return <CircleMinus strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (action.indexOf("change") !== -1 || action === "rename_column") {
+      return <RefreshCw strokeWidth={strokeWidth} size={size} />;
+    }
+
+    return;
+  };
+
+  const iconForType = (type) => {
+    const size = 17;
+    const strokeWidth = 1;
+
+    if (type === "string") {
+      return <ALargeSmall strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (type === "text") {
+      return <LetterText strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (type === "datetime") {
+      return <CalendarClock strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (type === "date") {
+      return <Calendar1 strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (
+      type === "integer" ||
+      type === "bigint" ||
+      type === "float" ||
+      type === "numeric" ||
+      type === "decimal"
+    ) {
+      return <Hash strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (type === "array") {
+      return <Brackets strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (type === "uuid") {
+      return <ListOrdered strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (type === "json" || type === "jsonb") {
+      return <Braces strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (type === "boolean") {
+      return <ToggleRight strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (type === "binary") {
+      return <Binary strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (type === "blob") {
+      return <Package strokeWidth={strokeWidth} size={size} />;
+    }
+
+    if (type === "references") {
+      return <Bolt strokeWidth={strokeWidth} size={size} />;
+    }
+
+    return;
+  };
+
+  const typesForSelect = () => {
+    return COLUMN_TYPES.map((type) => ({
+      value: type.name,
+      label: (
+        <div className="flex flex-row gap-2 items-center">
+          <div className="py-1 flex justify-center items-center w-5 text-localtower-300">
+            {iconForType(type.name)}
+          </div>
+          <div className="py-1 flex justify-center items-center text-localtower-50">
+            {type.name}
+          </div>
+          <div className="text-localtower-400 py-1 flex justify-center items-center text-xss font-mono">
+            {type.example}
+          </div>
+        </div>
+      ),
+    }));
+  };
+
+  const indexesForSelect = () => {
+    return [{ value: "", label: "(none)" }].concat(
+      COLUMN_INDEXES.map((type) => ({
+        value: type.name,
+        label: (
+          <div className="flex flex-row gap-2 items-center">
+            <div className="py-1 flex justify-center items-center text-localtower-50">
+              {type.label || type.name}
+            </div>
+            <div className="text-localtower-400 py-1 flex justify-center items-center text-xss font-mono">
+              {type.example}
+            </div>
+          </div>
+        ),
+      }))
+    );
+  };
+
+  return {
+    actionsForSelect: actionsForSelect,
+    modelsForSelect: modelsForSelect,
+    typesForSelect: typesForSelect,
+    attributesForSelect: attributesForSelect,
+    indexesForSelect: indexesForSelect,
+    modelsForSelectWithout: modelsForSelectWithout,
+    modelByValue: modelByValue,
+    filterAttributes: filterAttributes,
+    filterIndexes: filterIndexes,
+    snakeCase: snakeCase,
+    APP_MODELS: APP_MODELS,
+    COLUMN_DEFAULTS: COLUMN_DEFAULTS,
+    COLUMN_TYPES: COLUMN_TYPES,
+    COLUMN_INDEXES: COLUMN_INDEXES,
+  };
+};
+
+export default Stores;

data/app/views/layouts/localtower/application.html.erb

@@ -5,77 +5,91 @@
     <meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
     <meta name="viewport" content="width=device-width" />
     <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
-    <link rel="stylesheet" type="text/css" href="/light-bootstrap-dashboard-master/assets/css/bootstrap.min.css">
-    <!-- <link rel="stylesheet" type="text/css" href="/light-bootstrap-dashboard-master/assets/css/animate.min.css"> -->
-    <link rel="stylesheet" type="text/css" href="/light-bootstrap-dashboard-master/assets/css/light-bootstrap-dashboard.css">
-    <!--     Fonts and icons     -->
-    <link href="/vendor/font-awesome.min.css" rel="stylesheet">
-    <link rel="stylesheet" type="text/css" href="/light-bootstrap-dashboard-master/assets/css/pe-icon-7-stroke.css">
-    <link rel="stylesheet" type="text/css" href="/vendor/highlight-js-default.min.css">
-    <link rel="stylesheet" type="text/css" href="/css/app.css">
+
+    <link rel="shortcut icon" href="/com/favicon-64.png" type="image/png" />
+    <link rel="stylesheet" type="text/css" href="/vendor/monokai-sublime.css">
+
+    <style>
+      @font-face {
+        font-family: 'Circular';
+        src: url('/fonts/Circular/CircularStd-Book.otf') format('opentype');
+        font-weight: 400;
+        font-style: normal;
+      }
+
+      @font-face {
+        font-family: 'Circular';
+        src: url('/fonts/Circular/CircularStd-Medium.otf') format('opentype');
+        font-weight: 500;
+        font-style: normal;
+      }
+
+      @font-face {
+        font-family: 'Circular';
+        src: url('/fonts/Circular/CircularStd-Bold.otf') format('opentype');
+        font-weight: 700;
+        font-style: normal;
+      }
+    </style>
+    <%= stylesheet_link_tag "application" %>
+
     <%= csrf_meta_tags %>
+    <script>
+      window.COLUMN_TYPES = <%= ::Localtower::Generators::Migration::TYPES.to_json.html_safe %>;
+      window.COLUMN_ACTIONS = <%= ::Localtower::Generators::Migration::ACTIONS.to_json.html_safe %>;
+      window.COLUMN_INDEXES = <%= ::Localtower::Generators::ServiceObjects::InsertIndexes::USING.to_json.html_safe %>;
+      window.COLUMN_INDEXES_ALGORITHMS = <%= ::Localtower::Generators::ServiceObjects::InsertIndexes::ALGO.to_json.html_safe %>;
+      window.COLUMN_DEFAULTS = <%= ::Localtower::Generators::ServiceObjects::InsertDefaults::DEFAULTS_BY_TYPE.to_json.html_safe %>;
+      window.APP_MODELS = <%= ::Localtower::Tools.models_presented.to_json.html_safe %>;
+    </script>
   </head>
-  <body>
-    <div class="wrapper">
-      <div class="sidebar">
-        <div class="sidebar-wrapper">
-          <ul class="nav">
-            <li class="<%= is_active_link?(models_path, :exclusive) ? "active" : nil %>">
-              <a href="<%= models_path %>">
-                <i class="pe-7s-network"></i>
-                <p>Models</p>
-              </a>
-            </li>
-            <li class="<%= is_active_link?(migrations_path, :exclusive) ? "active" : nil %>">
-              <a href="<%= migrations_path %>">
-                <i class="pe-7s-back"></i>
-                <p>Migrations</p>
-              </a>
-            </li>
-            <li class="<%= is_active_link?(new_model_path, :inclusive) ? "active" : nil %>">
-              <a href="<%= new_model_path %>">
-                <i class="pe-7s-server"></i>
-                <p>New Model</p>
-              </a>
-            </li>
-            <li class="<%= is_active_link?(new_migration_path, :exclusive) ? "active" : nil %>">
-              <a href="<%= new_migration_path %>">
-                <i class="pe-7s-edit"></i>
-                <p>New Migration</p>
-              </a>
-            </li>
-          </ul>
-        </div>
-      </div>
-      <div class="main-panel">
-        <div class="content">
-          <div class="container-fluid">
-            <%= yield %>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="full-message" style="display: none;">
-      <div class="text-center">
-        <br>
-        <h3>Generating files</h3>
-        <br>
-        <i class="pe-7s-refresh-2 rotate"></i>
-        <br>
-        <br>
-        <br>
-        <p class="full-message-migrate" style="display: none;">
-          If you're seeing an error message on the next page (pending migrations), just run in your terminal:
-          <br>
-          <br>
-          <code>bundle exec rails db:migrate</code>
-        </p>
-      </div>
+  <body class="bg-localtower-700 text-localtower-300 text-sm">
+    <div class="wrapper flex h-screen">
+      <!-- Sidebar -->
+      <nav class="w-[200px] flex-shrink-0 h-screen border-r border-localtower-500">
+        <ul class="flex flex-col py-2 px-2">
+          <li class="py-0.5">
+            <a href="<%= new_model_path %>" class="flex flex-row gap-2 items-center px-4 py-2.5 hover:text-white transition-colors duration-200 rounded <%= is_active_link?(new_model_path, :inclusive) ? 'bg-localtower-500 text-localtower-100 hover:bg-localtower-500' : 'text-gray-400 hover:bg-localtower-600' %> active:opacity-70">
+              <i data-lucide="circle-plus" class="w-5 " stroke-width="2"></i>
+              <p class="text-sm">New Model</p>
+            </a>
+          </li>
+
+          <li class="py-0.5">
+            <a href="<%= new_migration_path %>" class="flex flex-row gap-2 items-center px-4 py-2.5 hover:text-white transition-colors duration-200 rounded <%= is_active_link?(new_migration_path, :exclusive) ? 'bg-localtower-500 text-localtower-100 hover:bg-localtower-500' : 'text-gray-400 hover:bg-localtower-600' %> active:opacity-70">
+              <i data-lucide="circle-plus" class="w-5 " stroke-width="2"></i>
+              <p class="text-sm">New Migration</p>
+            </a>
+          </li>
+
+          <li class="my-2 border-t border-localtower-500 h-1"></li>
+
+          <li class="py-0.5">
+            <a href="<%= migrations_path %>" class="flex flex-row gap-2 items-center px-4 py-2.5 hover:text-white transition-colors duration-200 rounded <%= is_active_link?(migrations_path, :exclusive) ? 'bg-localtower-500 text-localtower-100 hover:bg-localtower-500' : 'text-gray-400 hover:bg-localtower-600' %> active:opacity-70">
+              <i data-lucide="book-plus" class="w-5 " stroke-width="2"></i>
+              <p class="text-sm">Migrations</p>
+            </a>
+          </li>
+        </ul>
+      </nav>
+
+      <!-- Main Content -->
+      <main class="flex-1 overflow-y-auto p-8">
+        <%= yield %>
+      </main>
     </div>
+
     <!--   Core JS Files   -->
-    <script src="/light-bootstrap-dashboard-master/assets/js/jquery-1.10.2.js" type="text/javascript"></script>
+    <script src="/vendor/jquery-3.7.1.min.js"></script>
     <script src="/vendor/highlight.min.js"></script>
     <script src="/vendor/masonry.pkgd.min.js"></script>
-    <script src="/js/app.js"></script>
+    <script src="/vendor/lucide.min.js"></script>
+    <script src="/vendor/rails-ujs.min.js"></script>
+
+    <script>
+      lucide.createIcons();
+    </script>
+
+    <%= javascript_include_tag "application" %>
   </body>
 </html>

data/app/views/localtower/_migration.html.erb

@@ -0,0 +1,30 @@
+<div class="">
+  <div class="">
+    <h5 class="py-3 flex flex-row gap-3 items-center">
+      <% if entry['status'] == :todo %>
+        <div class="rounded-full bg-orange-700 text-localtower-100 text-xs px-3 py-0.5 inline-flex items-center">
+          <span>Pending</span>
+        </div>
+      <% else %>
+        <%= form_tag actions_path, class: "inline-flex" do %>
+          <button name="cmd" title="rake db:migrate:down VERSION=<%= entry['time'] %>" type="submit" value="rake db:migrate:down VERSION=<%= entry['time'] %>" class="px-2 py-0.5 rounded-md bg-green-800 text-localtower-100 border border-green-700 outline-none hover:border-green-500 hover:bg-green-700 hover:text-white active:opacity-60 transition-colors text-xs inline-flex items-center">
+            Rollback
+          </button>
+        <% end %>
+      <% end %>
+      <a href="<%= file_link(entry['file_full_path']) %>" class="font-mono text-xs text-localtower-400 inline-flex"><%= entry['relative_path'] %></a>
+      <% if entry['status'] == :todo %>
+        <%= form_tag rm_file_path, class: "inline-flex" do %>
+          <button name="file" title="rake db:migrate:down VERSION=<%= entry['time'] %>" type="submit" value="<%= entry['file_full_path'] %>" class="px-2 py-0.5 rounded-md text-red-500 border border-red-500 hover:border-red-300 outline-none active:opacity-60 transition-colors text-xs inline-flex items-center" data-confirm="Are you sure?">
+            destroy
+          </button>
+        <% end %>
+      <% end %>
+    </h5>
+  </div>
+</div>
+<div class="pb-4 border-b border-localtower-500">
+  <div class="">
+    <pre class="px-3 py-1.5 rounded border border-localtower-500 block" style="background-color: rgb(35, 36, 31);"><code class="language-ruby text-xs"><%= entry['content'] %></code></pre>
+  </div>
+</div>

data/app/views/localtower/pages/_alert_no_models.html.erb

@@ -1,3 +1,3 @@
 <div class="alert alert-danger">
-  You don't have any models in this app. You can create one <%= link_to 'here.', models_path, class: 'btn btn-primary btn-fill btn-xs' %>
+  You don't have any models in this app. You can create one <%= link_to 'here.', new_model_path, class: 'font-bold' %>
 </div>

data/app/views/localtower/pages/migrations.html.erb

@@ -1,61 +1,30 @@
 <% content_for :title do %>Migrations<% end %>
-<div class="row">
-  <div class="col-md-12">
-    <div class="content">
-      <% if flash[:notice] %>
-        <div class="alert alert-info">
-          <span><%= flash[:notice] %></span>
-        </div>
+<div class="">
+  <% if flash[:notice] %>
+    <div class="">
+      <span><%= flash[:notice] %></span>
+    </div>
+  <% end %>
+  <div class="flex flex-col gap-3">
+    <div class="">
+      <% if @migrations.select {|i| i['status'] == :todo}.any? %>
+        <%= form_tag actions_path, class: "" do %>
+          <button name="cmd" type="submit" value="rails db:migrate" class="px-3 py-1 rounded-md bg-green-800 text-localtower-100 border border-green-700 outline-none hover:border-green-500 hover:bg-green-700 hover:text-white active:opacity-60 transition-colors text-xs inline-flex items-center">
+            <code>bundle exec rails db:migrate</code>
+          </button>
+        <% end %>
       <% end %>
-      <div class="card">
-        <div class="header">
-          <% if @migrations.select {|i| i['status'] == :todo}.any? %>
-            <%= form_tag actions_path, class: "form" do %>
-              <button name="cmd" type="submit" value="rails db:migrate" class="btn btn-warning btn-fill" data-selector="submit">
-                Migrate Pending Migrations <code>bundle exec rails db:migrate</code>
-              </button>
-            <% end %>
-          <% end %>
-        </div>
-        <div class="content">
-          <% if @migrations.any? %>
-            <% @migrations.each do |entry| %>
-              <div class="container-fluid">
-                <div class="row">
-                  <div class="col-md-12">
-                    <h5 style="color: <%= entry['status'] == :todo ? 'red' : 'green' %>;">
-                      <% if entry['status'] == :todo %>
-                        <button type="button" class="btn btn-danger btn-xs">PENDING</button>
-                        <a href="<%= file_link(entry['file_full_path']) %>"><%= entry['name'] %></a>
-                      <% else %>
-                        <%= form_tag actions_path, class: "form" do %>
-                          <button name="cmd" title="rake db:migrate:down VERSION=<%= entry['time'] %>" type="submit" value="rake db:migrate:down VERSION=<%= entry['time'] %>" class="btn btn-info btn-xs btn-fill">
-                            ROLLBACK
-                          </button>
-                          <a href="<%= file_link(entry['file_full_path']) %>"><%= entry['name'] %></a>
-                        <% end %>
-                      <% end %>
-                    </h5>
-                  </div>
-                </div>
-                <div class="row">
-                  <div class="col-md-12">
-                    <pre><code class="language-ruby"><%= entry['content'] %></code></pre>
-                  </div>
-                </div>
-              </div>
-            <% end %>
-          <% else %>
-            <div class="card">
-              <div class="">
-              </div>
-              <div class="alert alert-info">
-                <span>No migrations found</span>
-              </div>
-            </div>
-          <% end %>
+    </div>
+    <div class="">
+      <% if @migrations.any? %>
+        <% @migrations.each do |entry| %>
+          <%= render partial: 'localtower/migration', locals: { entry: entry } %>
+        <% end %>
+      <% else %>
+        <div class="">
+          <span>No migrations found</span>
         </div>
-      </div>
+      <% end %>
     </div>
   </div>
 </div>