Scaffolding the controller

stimulus-components · Mar 27, 2024 · 5459d75 · 5459d75
commit 5459d75
Show file tree

Hide file tree

Showing 22 changed files with 6,169 additions and 0 deletions.
diff --git a/.babelrc b/.babelrc
@@ -0,0 +1,4 @@
+{
+  "presets": ["@babel/env", "@babel/preset-typescript"],
+  "plugins": ["@babel/plugin-transform-typescript"]
+}
diff --git a/.eslintignore b/.eslintignore
@@ -0,0 +1 @@
+dist
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -0,0 +1,15 @@
+// https://eslint.org/docs/user-guide/configuring
+
+module.exports = {
+  root: true,
+  parser: "@typescript-eslint/parser",
+  env: {
+    browser: true,
+    node: true,
+    es6: true,
+    jest: true,
+  },
+  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
+  extends: ["standard", "prettier"],
+  plugins: ["@typescript-eslint"],
+}
diff --git a/.github/workflows/lint.yml b/.github/workflows/lint.yml
@@ -0,0 +1,16 @@
+name: Lint
+
+on: [push]
+
+jobs:
+  eslint:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version-file: ".node-version"
+          cache: "yarn"
+      - run: |
+          yarn install --silent --non-interactive
+          yarn lint
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1,3 @@
+node_modules
+dist
+build
diff --git a/.node-version b/.node-version
@@ -0,0 +1 @@
+20
diff --git a/.npmignore b/.npmignore
@@ -0,0 +1,14 @@
+.github
+jest
+.babelrc
+jest.config.js
+index.html
+netlify.toml
+.node-version
+.eslintrc.js
+spec
+tsconfig.json
+vite.config.mjs
+.prettierignore
+postcss.config.js
+tailwind.config.js
diff --git a/.prettierignore b/.prettierignore
@@ -0,0 +1,2 @@
+dist
+node_modules
diff --git a/.prettierrc b/.prettierrc
@@ -0,0 +1,4 @@
+{
+  "printWidth": 120,
+  "semi": false
+}
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -0,0 +1,14 @@
+# Changelog
+
+All notable changes to this project will be documented in this file.
+
+The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
+and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
+
+## [Unreleased]
+
+## [1.0.0] - 2024-03-27
+
+### Added
+
+- Adding the controller
diff --git a/LICENSE b/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) Guillaume Briday
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/README.md b/README.md
@@ -0,0 +1,22 @@
+# Stimulus Dialog
+
+[![](https://img.shields.io/npm/dt/@stimulus-components/dialog.svg)](https://www.npmjs.com/package/@stimulus-components/dialog)
+[![](https://img.shields.io/npm/v/@stimulus-components/dialog.svg)](https://www.npmjs.com/package/@stimulus-components/dialog)
+[![](https://github.com/stimulus-components/stimulus-dialog/workflows/Lint/badge.svg)](https://github.com/stimulus-components/stimulus-dialog)
+[![](https://img.shields.io/github/license/stimulus-components/stimulus-dialog.svg)](https://github.com/stimulus-components/stimulus-dialog)
+
+## Getting started
+
+A Stimulus controller to show modals with the native Dialog element.
+
+## 📚 Documentation
+
+See [stimulus-dialog documentation](https://www.stimulus-components.com/docs/stimulus-dialog/).
+
+## 👷‍♂️ Contributing
+
+Do not hesitate to contribute to the project by adapting or adding features ! Bug reports or pull requests are welcome.
+
+## 📝 License
+
+This project is released under the [MIT](http://opensource.org/licenses/MIT) license.
diff --git a/index.html b/index.html
@@ -0,0 +1,258 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="description" content="A Stimulus controller to show modals with the native dialog element." />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+    <title>Stimulus Dialog</title>
+
+    <script type="module" defer>
+      import "./src/app.css"
+      import { Application } from "@hotwired/stimulus"
+      import Dialog from "./src/index"
+
+      const application = Application.start()
+      application.register("dialog", Dialog)
+    </script>
+  </head>
+
+  <body>
+    <div class="relative bg-white overflow-hidden">
+      <div class="relative isolate pt-14">
+        <div
+          class="absolute inset-x-0 top-[calc(100%-13rem)] -z-10 transform-gpu overflow-hidden blur-3xl sm:top-[calc(100%-30rem)]"
+          aria-hidden="true"
+        >
+          <div
+            class="relative left-[calc(50%+3rem)] aspect-[1155/678] w-[36.125rem] -translate-x-1/2 bg-gradient-to-tr from-yellow-500 to-orange-500 opacity-30 sm:left-[calc(50%+36rem)] sm:w-[72.1875rem]"
+            style="
+              clip-path: polygon(
+                74.1% 44.1%,
+                100% 61.6%,
+                97.5% 26.9%,
+                85.5% 0.1%,
+                80.7% 2%,
+                72.5% 32.5%,
+                60.2% 62.4%,
+                52.4% 68.1%,
+                47.5% 58.3%,
+                45.2% 34.5%,
+                27.5% 76.7%,
+                0.1% 64.9%,
+                17.9% 100%,
+                27.6% 76.8%,
+                76.1% 97.7%,
+                74.1% 44.1%
+              );
+            "
+          ></div>
+        </div>
+      </div>
+
+      <div class="relative pt-6 pb-16 sm:pb-24">
+        <main class="mt-16 mx-auto max-w-7xl px-4 sm:mt-24">
+          <div class="text-center">
+            <h1 class="text-4xl tracking-tight font-extrabold text-gray-900 sm:text-5xl md:text-6xl">
+              <span class="block xl:inline">Stimulus</span>
+              <span class="block bg-gradient-to-r from-yellow-500 to-orange-500 xl:inline bg-clip-text text-transparent"
+                >Dialog</span
+              >
+            </h1>
+
+            <p class="mt-3 max-w-md mx-auto text-base text-gray-500 sm:text-lg md:mt-5 md:text-xl md:max-w-3xl">
+              A Stimulus controller to show modals with the native Dialog element.
+            </p>
+
+            <p class="text-center mt-3">
+              <img class="inline-block" src="https://img.shields.io/npm/dt/@stimulus-components/dialog.svg" />
+              <img class="inline-block" src="https://img.shields.io/npm/v/@stimulus-components/dialog.svg" />
+
+              <img
+                class="inline-block"
+                src="https://github.com/stimulus-components/stimulus-dialog/workflows/Lint/badge.svg"
+              />
+
+              <img
+                class="inline-block"
+                src="https://img.shields.io/github/license/stimulus-components/stimulus-dialog.svg"
+              />
+            </p>
+
+            <div class="mt-5 max-w-md mx-auto sm:flex sm:justify-center md:mt-8">
+              <div class="rounded-md shadow">
+                <a
+                  href="https://www.stimulus-components.com/docs/stimulus-dialog/"
+                  class="w-full flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gradient-to-r from-yellow-500 to-orange-500 md:py-4 md:text-lg md:px-10"
+                >
+                  Documentation &rarr;
+                </a>
+              </div>
+              <div class="mt-3 rounded-md shadow sm:mt-0 sm:ml-3">
+                <a
+                  href="https://github.com/stimulus-components/stimulus-dialog"
+                  class="w-full flex items-center justify-center gap-1 px-8 py-3 border border-transparent text-base font-medium rounded-md bg-white hover:bg-gray-50 md:py-4 md:text-lg md:px-10"
+                >
+                  <svg fill="currentColor" viewBox="0 0 24 24" aria-hidden="true" class="size-6">
+                    <path
+                      fill-rule="evenodd"
+                      d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                      clip-rule="evenodd"
+                    ></path>
+                  </svg>
+                  GitHub
+                </a>
+              </div>
+            </div>
+          </div>
+        </main>
+      </div>
+    </div>
+
+    <div class="relative h-full max-w-5xl mx-auto px-4">
+      <section class="mt-16">
+        <div class="my-12">
+          <div data-controller="dialog" data-action="click->dialog#backdropClose">
+            <dialog data-dialog-target="dialog" class="rounded-lg">
+              <div
+                class="relative bg-white px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:w-full sm:max-w-xl sm:p-6"
+              >
+                <div class="absolute right-0 top-0 hidden pr-4 pt-4 sm:block">
+                  <button
+                    type="button"
+                    data-action="dialog#close"
+                    class="rounded-md bg-white text-gray-400 hover:text-gray-500"
+                  >
+                    <span class="sr-only">Close</span>
+                    <svg
+                      class="size-6"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke-width="1.5"
+                      stroke="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path stroke-linecap="round" stroke-linejoin="round" d="M6 18L18 6M6 6l12 12" />
+                    </svg>
+                  </button>
+                </div>
+
+                <div class="sm:flex sm:items-start">
+                  <div
+                    class="mx-auto flex h-12 w-12 flex-shrink-0 items-center justify-center rounded-full bg-orange-100 sm:mx-0 sm:h-10 sm:w-10"
+                  >
+                    <svg
+                      class="size-6 text-orange-600"
+                      fill="none"
+                      viewBox="0 0 24 24"
+                      stroke-width="1.5"
+                      stroke="currentColor"
+                      aria-hidden="true"
+                    >
+                      <path
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        d="M12 9v3.75m-9.303 3.376c-.866 1.5.217 3.374 1.948 3.374h14.71c1.73 0 2.813-1.874 1.948-3.374L13.949 3.378c-.866-1.5-3.032-1.5-3.898 0L2.697 16.126zM12 15.75h.007v.008H12v-.008z"
+                      />
+                    </svg>
+                  </div>
+
+                  <div class="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
+                    <h3 class="text-base font-semibold leading-6 text-gray-900">Are you sure?</h3>
+
+                    <div class="mt-2">
+                      <p class="text-sm text-gray-500">Are you sure you want to apply these changes?</p>
+                    </div>
+                  </div>
+                </div>
+
+                <div class="mt-5 sm:mt-4 sm:flex sm:flex-row-reverse">
+                  <button
+                    type="button"
+                    data-action="dialog#close"
+                    class="inline-flex w-full justify-center rounded-md bg-orange-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-500 sm:ml-3 sm:w-auto"
+                  >
+                    Apply
+                  </button>
+
+                  <button
+                    type="button"
+                    data-action="dialog#close"
+                    autofocus
+                    class="mt-3 inline-flex w-full justify-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 hover:bg-gray-50 sm:mt-0 sm:w-auto"
+                  >
+                    Cancel
+                  </button>
+                </div>
+              </div>
+            </dialog>
+
+            <button
+              type="button"
+              data-action="dialog#open"
+              class="rounded-md bg-orange-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-orange-500"
+            >
+              Open modal
+            </button>
+          </div>
+        </div>
+      </section>
+    </div>
+
+    <footer class="bg-white">
+      <div class="max-w-7xl mx-auto py-12 px-4 overflow-hidden sm:px-6 lg:px-8">
+        <div class="-mx-5 -my-2 flex flex-wrap justify-center" aria-label="Footer">
+          <div class="px-5 py-2">
+            <p class="text-base text-gray-500">
+              stimulus-dialog is a package from the
+              <a href="https://github.com/stimulus-components/stimulus-components" class="hover:text-gray-900 underline"
+                >stimulus-components</a
+              >
+              project.
+            </p>
+          </div>
+        </div>
+
+        <div class="mt-8 flex justify-center space-x-6">
+          <a
+            href="https://twitter.com/guillaumebriday"
+            target="_blank"
+            rel="noopener"
+            class="text-gray-400 hover:text-gray-500"
+          >
+            <span class="sr-only">Twitter</span>
+            <svg class="size-6" fill="currentColor" viewBox="0 0 512 512">
+              <path
+                fill-rule="evenodd"
+                d="M389.2 48h70.6L305.6 224.2 487 464H345L233.7 318.6 106.5 464H35.8L200.7 275.5 26.8 48H172.4L272.9 180.9 389.2 48zM364.4 421.8h39.1L151.1 88h-42L364.4 421.8z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </a>
+
+          <a
+            href="https://github.com/stimulus-components/stimulus-dialog"
+            target="_blank"
+            rel="noopener"
+            class="text-gray-400 hover:text-gray-500"
+          >
+            <span class="sr-only">GitHub</span>
+            <svg class="size-6" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+              <path
+                fill-rule="evenodd"
+                d="M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z"
+                clip-rule="evenodd"
+              />
+            </svg>
+          </a>
+        </div>
+
+        <p class="mt-8 text-center text-base text-gray-400">
+          This project is released under the
+          <a href="https://opensource.org/licenses/MIT" class="hover:text-gray-900 underline">MIT</a>
+          license.
+        </p>
+      </div>
+    </footer>
+  </body>
+</html>
diff --git a/netlify.toml b/netlify.toml
@@ -0,0 +1,9 @@
+[build]
+  publish="dist"
+  command="yarn prod"
+
+[[redirects]]
+  from = "https://stimulus-dialog.netlify.app/*"
+  to = "https://stimulus-dialog.stimulus-components.com/:splat"
+  status = 301
+  force = true