@skyroc/scripts 2.5.1 → 2.5.3

package/templates/admin-shell/devtools/AdminDevtools.css

@@ -0,0 +1,27 @@
+.skyroc-admin-jotai-devtools[data-position='bottom-left'] .jotai-devtools-trigger-button {
+  bottom: var(--skyroc-jotai-devtools-trigger-bottom, 0.2rem) !important;
+  left: var(--skyroc-jotai-devtools-trigger-left, 0.2rem) !important;
+  right: var(--skyroc-jotai-devtools-trigger-right, unset) !important;
+  top: var(--skyroc-jotai-devtools-trigger-top, unset) !important;
+}
+
+.skyroc-admin-jotai-devtools[data-position='bottom-right'] .jotai-devtools-trigger-button {
+  bottom: var(--skyroc-jotai-devtools-trigger-bottom, 0.2rem) !important;
+  left: var(--skyroc-jotai-devtools-trigger-left, unset) !important;
+  right: var(--skyroc-jotai-devtools-trigger-right, 0.2rem) !important;
+  top: var(--skyroc-jotai-devtools-trigger-top, unset) !important;
+}
+
+.skyroc-admin-jotai-devtools[data-position='top-left'] .jotai-devtools-trigger-button {
+  bottom: var(--skyroc-jotai-devtools-trigger-bottom, unset) !important;
+  left: var(--skyroc-jotai-devtools-trigger-left, 0.2rem) !important;
+  right: var(--skyroc-jotai-devtools-trigger-right, unset) !important;
+  top: var(--skyroc-jotai-devtools-trigger-top, 0.2rem) !important;
+}
+
+.skyroc-admin-jotai-devtools[data-position='top-right'] .jotai-devtools-trigger-button {
+  bottom: var(--skyroc-jotai-devtools-trigger-bottom, unset) !important;
+  left: var(--skyroc-jotai-devtools-trigger-left, unset) !important;
+  right: var(--skyroc-jotai-devtools-trigger-right, 0.2rem) !important;
+  top: var(--skyroc-jotai-devtools-trigger-top, 0.2rem) !important;
+}

package/templates/admin-shell/devtools/AdminDevtools.tsx

@@ -0,0 +1,253 @@
+// oxlint-disable import/no-unassigned-import
+import type { TanStackDevtoolsReactInit, TanStackDevtoolsReactPlugin } from '@tanstack/react-devtools';
+import type { QueryClient } from '@tanstack/react-query';
+import type { AnyRouter } from '@tanstack/react-router';
+import type { DevToolsProps } from 'jotai-devtools';
+import type { Store } from 'jotai/vanilla/store';
+import type { CSSProperties } from 'react';
+
+import { useAtomsDevtools } from 'jotai-devtools/utils';
+import { Suspense, lazy, useMemo } from 'react';
+
+import './AdminDevtools.css';
+
+type TanStackDevtoolsConfig = NonNullable<TanStackDevtoolsReactInit['config']>;
+type AdminDevtoolsTheme = DevToolsProps['theme'];
+type AdminDevtoolsTriggerOffsetValue = number | string;
+
+export interface AdminJotaiDevtoolsTriggerOffset {
+  /** Distance from the bottom viewport edge for the floating trigger. */
+  bottom?: AdminDevtoolsTriggerOffsetValue;
+
+  /** Distance from the left viewport edge for the floating trigger. */
+  left?: AdminDevtoolsTriggerOffsetValue;
+
+  /** Distance from the right viewport edge for the floating trigger. */
+  right?: AdminDevtoolsTriggerOffsetValue;
+
+  /** Distance from the top viewport edge for the floating trigger. */
+  top?: AdminDevtoolsTriggerOffsetValue;
+}
+
+type JotaiDevtoolsTriggerOffsetStyle = CSSProperties & {
+  '--skyroc-jotai-devtools-trigger-bottom'?: string;
+  '--skyroc-jotai-devtools-trigger-left'?: string;
+  '--skyroc-jotai-devtools-trigger-right'?: string;
+  '--skyroc-jotai-devtools-trigger-top'?: string;
+};
+
+export interface AdminJotaiDevtoolsConfig {
+  /** Redux DevTools connection name for the atom timeline. */
+  name?: string;
+
+  /** Whether to show the embedded Jotai inspector panel. */
+  panel?: boolean;
+
+  /** Jotai devtools panel position. */
+  position?: DevToolsProps['position'];
+
+  /** Whether to record atom changes in the Redux DevTools timeline. */
+  timeline?: boolean;
+
+  /** Fixed trigger offsets for avoiding app chrome such as the admin sider. */
+  triggerOffset?: AdminJotaiDevtoolsTriggerOffset;
+}
+
+export interface AdminDevtoolsConfig {
+  /** Whether any admin devtools should be rendered. */
+  enabled?: boolean;
+
+  /** Whether to enable Jotai devtools, or the detailed Jotai devtools options. */
+  jotai?: boolean | AdminJotaiDevtoolsConfig;
+
+  /** TanStack devtools trigger position. */
+  position?: TanStackDevtoolsConfig['position'];
+
+  /** Whether to enable the TanStack Query panel. */
+  query?: boolean;
+
+  /** Whether to enable the TanStack Router panel. */
+  router?: boolean;
+
+  /** Shared theme for all devtools panels. */
+  theme?: AdminDevtoolsTheme;
+}
+
+export interface AdminDevtoolsProps {
+  /** Devtools feature switches and shell options. */
+  config?: AdminDevtoolsConfig;
+
+  /** QueryClient instance used by the application. */
+  queryClient?: QueryClient;
+
+  /** TanStack Router instance used by the application. */
+  router?: AnyRouter;
+
+  /** Jotai store used by the application. */
+  store?: Store;
+}
+
+interface JotaiAtomsDevtoolsProps {
+  /** Redux DevTools connection name for the atom timeline. */
+  name: string;
+
+  /** Jotai store to inspect. */
+  store?: Store;
+}
+
+interface JotaiDevtoolsProps {
+  /** Jotai devtools feature switches and panel options. */
+  config?: boolean | AdminJotaiDevtoolsConfig;
+
+  /** Jotai store to inspect. */
+  store?: Store;
+
+  /** Shared theme inherited from the root devtools config. */
+  theme?: AdminDevtoolsTheme;
+}
+
+const TanStackDevtools = lazy(() =>
+  import('@tanstack/react-devtools').then(mod => ({ default: mod.TanStackDevtools }))
+);
+
+const ReactQueryDevtoolsPanel = lazy(() =>
+  import('@tanstack/react-query-devtools').then(mod => ({ default: mod.ReactQueryDevtoolsPanel }))
+);
+
+const TanStackRouterDevtoolsPanel = lazy(() =>
+  import('@tanstack/react-router-devtools').then(mod => ({ default: mod.TanStackRouterDevtoolsPanel }))
+);
+
+const JotaiDevTools = lazy(async () => {
+  await import('jotai-devtools/styles.css');
+
+  const mod = await import('jotai-devtools');
+
+  return { default: mod.DevTools };
+});
+
+const JotaiAtomsDevtools = (props: JotaiAtomsDevtoolsProps) => {
+  const { name, store } = props;
+
+  useAtomsDevtools(name, { store });
+
+  return null;
+};
+
+const JotaiDevtools = (props: JotaiDevtoolsProps) => {
+  const { config, store, theme } = props;
+
+  if (config === false) {
+    return null;
+  }
+
+  const jotaiConfig = typeof config === 'object' ? config : {};
+  const showPanel = jotaiConfig.panel !== false;
+  const showTimeline = jotaiConfig.timeline !== false;
+  const triggerOffsetStyle = createJotaiDevtoolsTriggerOffsetStyle(jotaiConfig.triggerOffset);
+
+  if (!showPanel && !showTimeline) {
+    return null;
+  }
+
+  return (
+    <>
+      {showTimeline ? <JotaiAtomsDevtools name={jotaiConfig.name ?? 'skyroc-admin'} store={store} /> : null}
+      {showPanel ? (
+        <span
+          className="skyroc-admin-jotai-devtools"
+          data-position={jotaiConfig.position ?? 'bottom-left'}
+          style={triggerOffsetStyle}
+        >
+          <JotaiDevTools position={jotaiConfig.position} store={store} theme={theme} />
+        </span>
+      ) : null}
+    </>
+  );
+};
+
+function isEnabled(value: boolean | undefined) {
+  return value !== false;
+}
+
+function formatCssSize(value: AdminDevtoolsTriggerOffsetValue | undefined) {
+  if (typeof value === 'number') {
+    return `${value}px`;
+  }
+
+  return value;
+}
+
+function createJotaiDevtoolsTriggerOffsetStyle(
+  offset: AdminJotaiDevtoolsTriggerOffset | undefined
+): JotaiDevtoolsTriggerOffsetStyle | undefined {
+  if (!offset) {
+    return undefined;
+  }
+
+  const { bottom, left, right, top } = offset;
+
+  return {
+    '--skyroc-jotai-devtools-trigger-bottom': formatCssSize(bottom),
+    '--skyroc-jotai-devtools-trigger-left': formatCssSize(left),
+    '--skyroc-jotai-devtools-trigger-right': formatCssSize(right),
+    '--skyroc-jotai-devtools-trigger-top': formatCssSize(top)
+  } satisfies JotaiDevtoolsTriggerOffsetStyle;
+}
+
+const AdminDevtools = (props: AdminDevtoolsProps) => {
+  const { config = {}, queryClient, router, store } = props;
+
+  const plugins = useMemo<TanStackDevtoolsReactPlugin[]>(() => {
+    const items: TanStackDevtoolsReactPlugin[] = [];
+
+    if (router && isEnabled(config.router)) {
+      items.push({
+        id: 'tanstack-router',
+        name: 'TanStack Router',
+        render: (
+          <Suspense fallback={null}>
+            <TanStackRouterDevtoolsPanel router={router} />
+          </Suspense>
+        )
+      });
+    }
+
+    if (queryClient && isEnabled(config.query)) {
+      items.push({
+        id: 'tanstack-query',
+        name: 'TanStack Query',
+        render: (
+          <Suspense fallback={null}>
+            <ReactQueryDevtoolsPanel client={queryClient} />
+          </Suspense>
+        )
+      });
+    }
+
+    return items;
+  }, [config.query, config.router, queryClient, router]);
+
+  const tanStackConfig = useMemo<TanStackDevtoolsConfig>(() => {
+    return {
+      position: config.position ?? 'bottom-right',
+      theme: config.theme
+    };
+  }, [config.position, config.theme]);
+
+  if (config.enabled === false) {
+    return null;
+  }
+
+  return (
+    <Suspense fallback={null}>
+      {plugins.length > 0 ? (
+        <TanStackDevtools config={tanStackConfig} plugins={plugins} />
+      ) : null}
+
+      <JotaiDevtools config={config.jotai} store={store} theme={config.theme} />
+    </Suspense>
+  );
+};
+
+export default AdminDevtools;

package/templates/admin-shell/devtools/index.ts

@@ -0,0 +1,7 @@
+export { default as AdminDevtools } from './AdminDevtools';
+export type {
+  AdminDevtoolsConfig,
+  AdminDevtoolsProps,
+  AdminJotaiDevtoolsConfig,
+  AdminJotaiDevtoolsTriggerOffset
+} from './AdminDevtools';

package/templates/admin-shell/devtools/jotai.ts

@@ -0,0 +1,2 @@
+// oxlint-disable import/no-unassigned-import
+import 'jotai-devtools/utils';

package/templates/admin.meta.json

@@ -1,22 +1,29 @@
 {
   "dependencies": {
+    "@better-scroll/core": "^2.5.1",
+    "@dnd-kit/core": "^6.3.1",
+    "@dnd-kit/sortable": "^10.0.0",
+    "@dnd-kit/utilities": "^3.2.2",
     "@skyroc/axios": "^2.2.0",
-    "@skyroc/color": "^2.6.0",
+    "@skyroc/color": "^2.6.1",
     "@skyroc/core-state": "^1.0.0",
     "@skyroc/hooks": "^1.0.0",
     "@skyroc/service": "^1.0.0",
     "@skyroc/utils": "^4.0.0",
-    "@skyroc/web-admin-devtools": "^0.1.0",
-    "@skyroc/web-ui": "^0.1.3",
+    "@skyroc/web-ui": "^0.1.4",
+    "@tanstack/react-devtools": "^0.8.4",
     "@tanstack/react-query": "^5.90.12",
+    "@tanstack/react-query-devtools": "^5.91.1",
     "@tanstack/react-router": "^1.140.0",
+    "@tanstack/react-router-devtools": "^1.140.0",
     "ahooks": "^3.9.6",
     "antd": "6.5.3",
     "clsx": "^2.1.1",
     "dayjs": "^1.11.19",
     "defu": "^6.1.4",
     "i18next": "25.7.2",
-    "jotai": "^2.16.0",
+    "jotai": "2.20.3",
+    "jotai-devtools": "0.14.0",
     "motion": "^12.23.26",
     "nprogress": "^0.2.0",
     "react": "19.1.0",
@@ -29,8 +36,8 @@
     "@iconify/json": "^2.2.416",
     "@iconify/react": "^6.0.2",
     "@iconify/types": "^2.0.0",
-    "@sa/uno-config": "^1.0.0",
-    "@skyroc/scripts": "^2.5.1",
+    "@skyroc/scripts": "^2.5.2",
+    "@skyroc/uno-config": "^1.0.0",
     "@skyroc/web-admin-vite": "^0.1.0",
     "@svgr/core": "^8.1.0",
     "@svgr/plugin-jsx": "^8.1.0",
@@ -683,6 +690,7 @@
     "@types/react": "^19.2.7",
     "@types/react-dom": "^19.2.3",
     "antd": "6.5.3",
+    "jotai-devtools": "0.14.0",
     "typescript": "^6.0.3"
   },
   "tsconfig": {

package/LICENSE

@@ -1,21 +0,0 @@
-MIT License
-
-Copyright (c) 2026 Ohh
-
-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.