ultimate_turbo_modal 1.7.0 → 2.0.1

data/javascript/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "ultimate_turbo_modal",
+  "version": "2.0.0",
+  "description": "The ultimate Turbo / Stimulus / Hotwire modal window for Rails",
+  "main": "dist/ultimate_turbo_modal.min.js",
+  "module": "dist/ultimate_turbo_modal.min.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "update-version": "node scripts/update-version.js",
+    "build": "yarn install && rollup -c",
+    "release": "bash scripts/release-npm.sh"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cmer/ultimate_turbo_modal.git"
+  },
+  "keywords": [
+    "hotwire",
+    "turbo",
+    "stimulus",
+    "tailwind",
+    "modal",
+    "rubyonrails",
+    "rails"
+  ],
+  "author": "Carl Mercier",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/cmer/ultimate_turbo_modal/issues"
+  },
+  "homepage": "https://github.com/cmer/ultimate_turbo_modal#readme",
+  "dependencies": {
+    "@hotwired/stimulus": "^3.2.2",
+    "@hotwired/turbo-rails": "^8.0.0",
+    "el-transition": "^0.0.7",
+    "idiomorph": "^0.7.3"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "rollup": "^2.79.1",
+    "rollup-plugin-copy": "^3.5.0",
+    "rollup-plugin-css-only": "^4.3.0",
+    "rollup-plugin-terser": "^7.0.2"
+  }
+}

data/javascript/rollup.config.js

@@ -0,0 +1,24 @@
+import resolve from '@rollup/plugin-node-resolve';
+import css from 'rollup-plugin-css-only';
+import { terser } from 'rollup-plugin-terser';
+
+export default {
+  input: './index.js',
+  output: [
+    {
+      file: 'dist/ultimate_turbo_modal.js',
+      format: 'esm'
+    },
+    {
+      file: 'dist/ultimate_turbo_modal.min.js',
+      format: 'esm',
+      plugins: [terser()]
+    }
+  ],
+  external: ['@hotwired/stimulus'],
+  inlineDynamicImports: true,
+  plugins: [
+    resolve(),
+    css({ output: 'vanilla.css' })
+  ]
+};

data/javascript/scripts/release-npm.sh

@@ -0,0 +1,35 @@
+#!/bin/bash
+set -e
+
+# Check for uncommitted changes
+if ! git diff --quiet; then
+  echo "There are uncommitted changes. Aborting."
+  exit 1
+fi
+
+# Update version
+echo "Updating version in package.json..."
+npm run update-version
+
+# Install dependencies
+echo "Installing dependencies..."
+npm install
+
+# Build project
+echo "Building project..."
+npm run build
+
+# Add, commit, and push changes
+VERSION=$(cat ../VERSION)
+echo "Adding changes to git..."
+git add .
+echo "Committing changes (Release NPM v$VERSION)..."
+git commit -m "Release NPM v$VERSION"
+echo "Pushing changes..."
+git push
+
+# Publish to npm
+echo "Publishing to npm..."
+npm publish
+
+echo "Release complete!"

data/javascript/scripts/update-version.js

@@ -0,0 +1,21 @@
+const fs = require('fs');
+const path = require('path');
+
+const versionFilePath = path.resolve(__dirname, '..', '..', 'VERSION');
+const packageJsonPath = path.resolve(__dirname, '..', 'package.json');
+
+// Read version from VERSION file
+const version = fs.readFileSync(versionFilePath, 'utf8').trim();
+
+// Read package.json
+const packageJson = JSON.parse(fs.readFileSync(packageJsonPath, 'utf8'));
+
+// Update version if it's different
+if (packageJson.version !== version) {
+  packageJson.version = version;
+  // Write updated package.json, preserving indentation (2 spaces)
+  fs.writeFileSync(packageJsonPath, JSON.stringify(packageJson, null, 2) + '\n');
+  console.log(`Updated package.json version to ${version}`);
+} else {
+  console.log(`package.json version (${packageJson.version}) is already up to date.`);
+}

data/javascript/styles/vanilla.css

@@ -0,0 +1,179 @@
+.dark {
+  .modal-overlay {
+    background-color: rgba(17, 24, 39, 0.8)
+  }
+
+  .modal-header,
+  .modal-footer {
+    border-color: #4B5563;
+  }
+
+  .modal-content {
+    background-color: #1F2937;
+    color: #ffffff;
+  }
+
+  .modal-close-button:hover,
+  .modal-close-icon:hover {
+    background-color: #6B7280;
+    color: #ffffff;
+  }
+}
+
+:not(.dark) {
+
+  .modal-close-button,
+  .modal-close-icon {
+    color: #9CA3AF;
+
+    &:hover {
+      color: #111827;
+      background-color: #E5E7EB;
+    }
+  }
+}
+
+.modal-container {
+  position: relative;
+
+  &[data-header="false"] .modal-header {
+    position: absolute;
+  }
+
+  &[data-header-divider="true"] .modal-header {
+    border-bottom-width: 1px;
+  }
+
+  &[data-footer-divider="true"] .modal-footer {
+    border-top-width: 1px;
+  }
+
+  &[data-padding="true"] .modal-main {
+    padding: 1rem;
+    padding-top: 0.5rem;
+  }
+
+  &[data-title="false"] .modal-title-h {
+    display: none;
+  }
+
+  &[data-close-button="false"] .modal-close {
+    display: none;
+  }
+
+  .sr-only {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border-width: 0;
+  }
+}
+
+.modal-overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 40;
+  background-color: rgba(17, 24, 39, 0.7);
+  transition-property: opacity;
+}
+
+.modal-outer {
+  overflow-y: auto;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 50;
+  margin: 1rem;
+
+  @media (min-width: 640px) {
+    margin-left: auto;
+    margin-right: auto;
+  }
+
+  @media (min-width: 768px) {
+    max-width: 48rem;
+  }
+}
+
+.modal-inner {
+  display: flex;
+  padding: 0.25rem;
+  justify-content: center;
+  align-items: center;
+  min-height: 100%;
+
+  @media (min-width: 640px) {
+    padding: 1rem;
+  }
+}
+
+.modal-content {
+  overflow: hidden;
+  position: relative;
+  background-color: #ffffff;
+  transition-property: all;
+  text-align: left;
+  border-radius: 0.5rem;
+  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
+
+  @media (min-width: 640px) {
+    margin-top: 2rem;
+    margin-bottom: 2rem;
+    max-width: 48rem;
+  }
+}
+
+.modal-header {
+  display: flex;
+  padding-top: 1rem;
+  padding-bottom: 1rem;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+}
+
+.modal-title {
+  line-height: 1.75rem;
+  font-weight: 600;
+  padding-left: 1rem;
+}
+
+.modal-footer {
+  display: flex;
+  padding: 1rem;
+  border-bottom-right-radius: 0.25rem;
+  border-bottom-left-radius: 0.25rem;
+  border-top-width: 1px;
+}
+
+.modal-close {
+  margin-right: 1rem;
+}
+
+.modal-close-button {
+  display: inline-flex;
+  padding: 0.375rem;
+  margin-left: auto;
+  background-color: transparent;
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  align-items: center;
+  border-radius: 0.5rem;
+}
+
+.modal-close-icon {
+  width: 1.25rem;
+  height: 1.25rem;
+}