localtower 1.0.0 → 2.0.1

data/app/assets/stylesheets/src/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;