Update templates for dist

templates/skeleton-js/.eslintrc.cjs

@@ -0,0 +1,12 @@
+/**
+ * @type {import("@types/eslint").Linter.BaseConfig}
+ */
+module.exports = {
+  extends: ['@remix-run/eslint-config', 'plugin:hydrogen/recommended'],
+  rules: {
+    'hydrogen/prefer-image-component': 'off',
+    'no-useless-escape': 'off',
+    'no-case-declarations': 'off',
+    'no-console': ['warn', {allow: ['warn', 'error']}],
+  },
+};

templates/skeleton-js/app/components/Aside.jsx

@@ -0,0 +1,77 @@
+import {createContext, useContext, useState} from 'react';
+
+/**
+ * A side bar component with Overlay
+ * @example
+ * ```jsx
+ * <Aside type="search" heading="SEARCH">
+ *  <input type="search" />
+ *  ...
+ * </Aside>
+ * ```
+ * @param {{
+ *   children?: React.ReactNode;
+ *   type: AsideType;
+ *   heading: React.ReactNode;
+ * }}
+ */
+export function Aside({children, heading, type}) {
+  const {type: activeType, close} = useAside();
+  const expanded = type === activeType;
+
+  return (
+    <div
+      aria-modal
+      className={`overlay ${expanded ? 'expanded' : ''}`}
+      role="dialog"
+    >
+      <button className="close-outside" onClick={close} />
+      <aside>
+        <header>
+          <h3>{heading}</h3>
+          <button className="close reset" onClick={close}>
+            &times;
+          </button>
+        </header>
+        <main>{children}</main>
+      </aside>
+    </div>
+  );
+}
+
+const AsideContext = createContext(null);
+
+Aside.Provider = function AsideProvider({children}) {
+  const [type, setType] = useState('closed');
+
+  return (
+    <AsideContext.Provider
+      value={{
+        type,
+        open: setType,
+        close: () => setType('closed'),
+      }}
+    >
+      {children}
+    </AsideContext.Provider>
+  );
+};
+
+export function useAside() {
+  const aside = useContext(AsideContext);
+  if (!aside) {
+    throw new Error('useAside must be used within an AsideProvider');
+  }
+  return aside;
+}
+
+/** @typedef {'search' | 'cart' | 'mobile' | 'closed'} AsideType */
+/**
+ * @typedef {{
+ *   type: AsideType;
+ *   open: (mode: AsideType) => void;
+ *   close: () => void;
+ * }} AsideContextValue
+ */
+
+/** @typedef {import('react').ReactNode} ReactNode */