@sociallane/elements 1.0.0

package/admin/views/setup-widget-catalog.php

@@ -0,0 +1,164 @@
+<?php
+/**
+ * Admin Setup Page — Widget Catalog (Widget Filter) setup and commands
+ *
+ * @package SocialLane\Elements
+ */
+
+if ( ! defined( 'ABSPATH' ) ) {
+	exit;
+}
+?>
+<div class="wrap max-w-4xl mx-auto py-8 px-4">
+	<h1 class="text-2xl font-bold text-neutral-900 mb-2">
+		<?php esc_html_e( 'Widget Catalog Setup', 'sociallane-elements' ); ?>
+	</h1>
+	<p class="text-neutral-500 mb-8">
+		<?php esc_html_e( 'How to add the Widget Catalog to a page and which commands to run so visitors can browse and copy npm install commands for your components.', 'sociallane-elements' ); ?>
+	</p>
+	<div class="mb-8 p-4 bg-blue-50 border border-blue-200 rounded-lg text-blue-800 text-sm">
+		<strong><?php esc_html_e( 'Front-end setup page', 'sociallane-elements' ); ?></strong>
+		<?php esc_html_e( 'To give your team a page they can consult anytime, create a new page (e.g. “Widget catalog setup”), add the shortcode', 'sociallane-elements' ); ?>
+		<code class="bg-blue-100 px-1 rounded">[sociallane_widget_catalog_setup]</code>
+		<?php esc_html_e( 'and publish. Anyone with the link can view the same setup guide and commands.', 'sociallane-elements' ); ?>
+	</div>
+
+	<section class="mb-10">
+		<h2 class="text-lg font-semibold text-neutral-800 mb-3 border-b border-neutral-200 pb-2">
+			<?php esc_html_e( '1. What is the Widget Catalog?', 'sociallane-elements' ); ?>
+		</h2>
+		<p class="text-neutral-600 mb-2">
+			<?php esc_html_e( 'The Widget Catalog (Widget Filter) is an Elementor widget that shows a filterable grid of all available SocialLane widgets. Visitors can:', 'sociallane-elements' ); ?>
+		</p>
+		<ul class="list-disc list-inside text-neutral-600 space-y-1 mb-4 ml-2">
+			<li><?php esc_html_e( 'Filter and search by category', 'sociallane-elements' ); ?></li>
+			<li><?php esc_html_e( 'See the exact npm install command for each widget', 'sociallane-elements' ); ?></li>
+			<li><?php esc_html_e( 'Copy a single command or build a collection and copy one command to install multiple widgets', 'sociallane-elements' ); ?></li>
+			<li><?php esc_html_e( 'Copy the widget slug (e.g. for widgets.json)', 'sociallane-elements' ); ?></li>
+		</ul>
+	</section>
+
+	<section class="mb-10">
+		<h2 class="text-lg font-semibold text-neutral-800 mb-3 border-b border-neutral-200 pb-2">
+			<?php esc_html_e( '2. Add the Widget Catalog to a page', 'sociallane-elements' ); ?>
+		</h2>
+		<ol class="list-decimal list-inside text-neutral-600 space-y-2 ml-2">
+			<li><?php esc_html_e( 'Edit any page with Elementor.', 'sociallane-elements' ); ?></li>
+			<li><?php esc_html_e( 'In the left panel, search for “Widget Filter” or “Widget Catalog”.', 'sociallane-elements' ); ?></li>
+			<li><?php esc_html_e( 'Drag the Widget Filter widget into your layout (e.g. in a section or container).', 'sociallane-elements' ); ?></li>
+			<li><?php esc_html_e( 'Optionally change the headline, number of columns, and whether search and category filters are shown.', 'sociallane-elements' ); ?></li>
+			<li><?php esc_html_e( 'Update the page. The catalog will list widgets based on the plugin’s widgets.json.', 'sociallane-elements' ); ?></li>
+		</ol>
+	</section>
+
+	<section class="mb-10">
+		<h2 class="text-lg font-semibold text-neutral-800 mb-3 border-b border-neutral-200 pb-2">
+			<?php esc_html_e( '3. Commands you need (plugin / theme setup)', 'sociallane-elements' ); ?>
+		</h2>
+		<p class="text-neutral-600 mb-4">
+			<?php esc_html_e( 'For the catalog and all SocialLane widgets to work and look correct, run these from the plugin root.', 'sociallane-elements' ); ?>
+		</p>
+
+		<div class="mb-6">
+			<h3 class="text-sm font-semibold text-neutral-700 mb-2"><?php esc_html_e( 'First-time or full install', 'sociallane-elements' ); ?></h3>
+			<pre class="bg-neutral-100 border border-neutral-200 rounded-lg p-4 text-sm overflow-x-auto"><code>cd wp-content/plugins/sociallane-elements
+
+# Install dependencies (core + widget packages)
+npm install
+
+# Build — REQUIRED so Tailwind includes widget styles
+npm run build</code></pre>
+			<p class="text-neutral-500 text-sm mt-2">
+				<?php esc_html_e( 'Tailwind scans the plugin’s PHP templates; without a build, widgets can render unstyled.', 'sociallane-elements' ); ?>
+			</p>
+		</div>
+
+		<div class="mb-6">
+			<h3 class="text-sm font-semibold text-neutral-700 mb-2"><?php esc_html_e( 'After adding or removing widgets', 'sociallane-elements' ); ?></h3>
+			<p class="text-neutral-600 text-sm mb-2">
+				<?php esc_html_e( 'widgets.json is synced automatically on npm install. To sync manually (e.g. after adding/removing widget folders or submodules), run:', 'sociallane-elements' ); ?>
+			</p>
+			<pre class="bg-neutral-100 border border-neutral-200 rounded-lg p-4 text-sm overflow-x-auto"><code>npm run sync-widgets</code></pre>
+			<p class="text-neutral-500 text-sm mt-2">
+				<?php esc_html_e( 'This adds new widget slugs from packages/widgets/ and removes slugs whose folders are missing. You can also edit widgets.json by hand. Include "widget-filter" so the Widget Catalog is available in Elementor. Then run:', 'sociallane-elements' ); ?>
+			</p>
+			<pre class="bg-neutral-100 border border-neutral-200 rounded-lg p-4 text-sm overflow-x-auto mt-2"><code>npm run build</code></pre>
+		</div>
+
+		<div class="mb-6">
+			<h3 class="text-sm font-semibold text-neutral-700 mb-2"><?php esc_html_e( 'Uninstall and reinstall', 'sociallane-elements' ); ?></h3>
+			<pre class="bg-neutral-100 border border-neutral-200 rounded-lg p-4 text-sm overflow-x-auto"><code>npm run reinstall</code></pre>
+			<p class="text-neutral-500 text-sm mt-2">
+				<?php esc_html_e( 'Removes node_modules and runs npm install (and postinstall build). Use when dependencies are broken or after changing Node version.', 'sociallane-elements' ); ?>
+			</p>
+		</div>
+
+		<div>
+			<h3 class="text-sm font-semibold text-neutral-700 mb-2"><?php esc_html_e( 'Development (watch mode)', 'sociallane-elements' ); ?></h3>
+			<pre class="bg-neutral-100 border border-neutral-200 rounded-lg p-4 text-sm overflow-x-auto"><code>npm run dev</code></pre>
+			<p class="text-neutral-500 text-sm mt-2">
+				<?php esc_html_e( 'Rebuilds automatically when you change templates or styles.', 'sociallane-elements' ); ?>
+			</p>
+		</div>
+	</section>
+
+	<section class="mb-10">
+		<h2 class="text-lg font-semibold text-neutral-800 mb-3 border-b border-neutral-200 pb-2">
+			<?php esc_html_e( '4. Using the catalog (for your team or docs)', 'sociallane-elements' ); ?>
+		</h2>
+		<ul class="text-neutral-600 space-y-2 list-disc list-inside ml-2">
+			<li><strong><?php esc_html_e( 'Copy single widget', 'sociallane-elements' ); ?></strong> — Each card shows the full <code class="bg-neutral-100 px-1 rounded text-sm">npm install @sociallane/widget-…</code> command; use the Copy button next to it.</li>
+			<li><strong><?php esc_html_e( 'Collection', 'sociallane-elements' ); ?></strong> — Check “Add to collection” on the widgets you want, then use “Copy npm install” in the sidebar to get one command that installs all selected packages.</li>
+			<li><strong><?php esc_html_e( 'Copy Name', 'sociallane-elements' ); ?></strong> — Copies the widget slug (e.g. hero-split) for use in widgets.json or docs.</li>
+		</ul>
+	</section>
+
+	<section class="mb-10">
+		<h2 class="text-lg font-semibold text-neutral-800 mb-3 border-b border-neutral-200 pb-2">
+			<?php esc_html_e( '5. Package mode (widgets.json)', 'sociallane-elements' ); ?>
+		</h2>
+		<p class="text-neutral-600 mb-2">
+			<?php esc_html_e( 'When widgets.json exists at the plugin root, the plugin runs in package mode: only widget components are loaded. The onboarding wizard, SocialLane settings page, widget preview pages, and this setup guide are not available on that installation.', 'sociallane-elements' ); ?>
+		</p>
+		<p class="text-neutral-600 mb-2">
+			<?php esc_html_e( 'To get the full admin (widget management, previews, this setup page), remove or rename widgets.json; the plugin will then use the Widget Manager and show all admin features.', 'sociallane-elements' ); ?>
+		</p>
+	</section>
+
+	<section class="mb-10">
+		<h2 class="text-lg font-semibold text-neutral-800 mb-3 border-b border-neutral-200 pb-2">
+			<?php esc_html_e( '6. Troubleshooting', 'sociallane-elements' ); ?>
+		</h2>
+		<dl class="space-y-4 text-neutral-600">
+			<dt class="font-medium text-neutral-800"><?php esc_html_e( 'Widgets appear unstyled', 'sociallane-elements' ); ?></dt>
+			<dd class="ml-4">
+				<?php esc_html_e( 'Run', 'sociallane-elements' ); ?> <code class="bg-neutral-100 px-1 rounded text-sm">npm run build</code> <?php esc_html_e( 'from the plugin root. Tailwind only outputs classes it finds in the current PHP templates.', 'sociallane-elements' ); ?>
+			</dd>
+			<dt class="font-medium text-neutral-800"><?php esc_html_e( 'Tailwind / styles not loading', 'sociallane-elements' ); ?></dt>
+			<dd class="ml-4">
+				<?php esc_html_e( 'If the plugin is using the Vite dev server and styles don’t appear, force production assets by adding to wp-config.php:', 'sociallane-elements' ); ?>
+				<pre class="bg-neutral-100 border border-neutral-200 rounded p-2 text-sm mt-2"><code>define( 'SOCIALLANE_ELEMENTS_VITE_PRODUCTION', true );</code></pre>
+				<?php esc_html_e( 'Then run', 'sociallane-elements' ); ?> <code class="bg-neutral-100 px-1 rounded text-sm">npm run build</code>.
+			</dd>
+			<dt class="font-medium text-neutral-800"><?php esc_html_e( 'Widget Filter not in Elementor panel', 'sociallane-elements' ); ?></dt>
+			<dd class="ml-4">
+				<?php esc_html_e( 'Ensure "widget-filter" is listed in widgets.json and that you’ve saved the main SocialLane settings (Widget management) so the widget is enabled.', 'sociallane-elements' ); ?>
+			</dd>
+		</dl>
+	</section>
+
+	<p class="text-neutral-500 text-sm">
+		<a href="<?php echo esc_url( admin_url( 'admin.php?page=sociallane-settings' ) ); ?>" class="text-primary hover:underline">
+			<?php esc_html_e( '← Back to SocialLane settings', 'sociallane-elements' ); ?>
+		</a>
+	</p>
+
+	<a href="<?php echo esc_url( admin_url( 'admin.php?page=sociallane-settings' ) ); ?>"
+		class="fixed bottom-6 right-6 z-50 flex items-center gap-2 rounded-full bg-neutral-800 px-4 py-3 text-sm font-medium text-white shadow-lg transition hover:bg-neutral-700 focus:outline-none focus:ring-2 focus:ring-neutral-500 focus:ring-offset-2"
+		aria-label="<?php esc_attr_e( 'Back to SocialLane settings', 'sociallane-elements' ); ?>">
+		<svg class="h-5 w-5 shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24" aria-hidden="true">
+			<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M10 19l-7-7m0 0l7-7m-7 7h18" />
+		</svg>
+		<?php esc_html_e( 'Back', 'sociallane-elements' ); ?>
+	</a>
+</div>

package/assets/css/lenis.css

@@ -0,0 +1,18 @@
+/**
+ * Lenis Smooth Scroll Styles
+ *
+ * @package SocialLane_Elements
+ */
+
+html.lenis,
+html.lenis body {
+  height: auto;
+}
+
+.lenis.lenis-smooth {
+  scroll-behavior: auto !important;
+}
+
+.lenis.lenis-smooth [data-lenis-prevent] {
+  overscroll-behavior: contain;
+}