@everystack/admin 0.1.0

package/src/presets/twitter.ts

@@ -0,0 +1,267 @@
+/**
+ * Twitter Admin Preset
+ *
+ * Pre-built admin configuration for the example Twitter clone app.
+ * Covers profiles, posts, likes, and follows resources matching
+ * the example app's Drizzle schema.
+ */
+
+import type { AdminConfig, ResourceConfig, ResourceDashboardConfig, DashboardConfig } from '../types';
+
+// =============================================================================
+// Resources
+// =============================================================================
+
+const profilesDashboard: ResourceDashboardConfig = {
+  title: 'User Growth',
+  timestampColumn: 'created_at',
+  defaultHours: 720, // 30 days
+  bucketSize: 'day',
+  stats: [
+    { id: 'total', label: 'Users', color: '#1d9bf0', value: { type: 'count' } },
+    { id: 'posts', label: 'Posts', color: '#00ba7c', value: { type: 'table_count', table: 'posts', timestampColumn: 'created_at' } },
+    { id: 'engagement', label: 'Likes', color: '#f91880', value: { type: 'table_count', table: 'likes', timestampColumn: 'created_at' } },
+    { id: 'connections', label: 'Follows', color: '#7856ff', value: { type: 'table_count', table: 'follows', timestampColumn: 'created_at' } },
+  ],
+  dimensions: [],
+  listColumns: ['created_at', 'username', 'display_name'],
+  searchColumns: ['username', 'display_name'],
+  linkToDetail: true,
+};
+
+const profilesResource: ResourceConfig = {
+  name: 'profiles',
+  label: 'Profile',
+  labelPlural: 'Profiles',
+  icon: 'person',
+  primaryKey: 'id',
+  actions: { list: true, show: true, create: false, edit: true, delete: false },
+  fields: [
+    { name: 'id', type: 'string', label: 'ID' },
+    { name: 'username', type: 'string', label: 'Username', sortable: true, searchable: true },
+    { name: 'display_name', type: 'string', label: 'Display Name', sortable: true, searchable: true },
+    { name: 'bio', type: 'string', label: 'Bio' },
+    { name: 'avatar_url', type: 'image', label: 'Avatar', renderer: 'avatar' },
+    { name: 'created_at', type: 'datetime', label: 'Joined', sortable: true },
+  ],
+  listFields: ['username', 'display_name', 'bio', 'created_at'],
+  editFields: ['username', 'display_name', 'bio', 'avatar_url'],
+  defaultSort: { field: 'created_at', order: 'desc' },
+  dashboard: profilesDashboard,
+};
+
+const postsDashboard: ResourceDashboardConfig = {
+  title: 'Content Velocity',
+  timestampColumn: 'created_at',
+  defaultHours: 720, // 30 days
+  bucketSize: 'day',
+  stats: [
+    { id: 'total', label: 'Posts', color: '#0f172a', value: { type: 'count' } },
+    { id: 'authors', label: 'Authors', color: '#1d9bf0', value: { type: 'distinct', column: 'author_id' } },
+    { id: 'engagement', label: 'Likes', color: '#f91880', value: { type: 'table_count', table: 'likes', timestampColumn: 'created_at' } },
+  ],
+  dimensions: [],
+  listColumns: ['created_at', 'author_id', 'body'],
+  searchColumns: ['body'],
+  linkToDetail: true,
+};
+
+const postsResource: ResourceConfig = {
+  name: 'posts',
+  label: 'Post',
+  labelPlural: 'Posts',
+  icon: 'chatbubble',
+  primaryKey: 'id',
+  actions: { list: true, show: true, create: false, edit: false, delete: true },
+  fields: [
+    { name: 'id', type: 'string', label: 'ID' },
+    {
+      name: 'author_id',
+      type: 'relation',
+      label: 'Author',
+      relation: { resource: 'profiles', field: 'id', displayField: 'username' },
+    },
+    { name: 'body', type: 'string', label: 'Body', searchable: true },
+    { name: 'created_at', type: 'datetime', label: 'Posted', sortable: true },
+  ],
+  listFields: ['author_id', 'body', 'created_at'],
+  defaultSort: { field: 'created_at', order: 'desc' },
+  dashboard: postsDashboard,
+};
+
+const likesDashboard: ResourceDashboardConfig = {
+  title: 'Engagement',
+  timestampColumn: 'created_at',
+  defaultHours: 720, // 30 days
+  bucketSize: 'day',
+  primaryKey: ['user_id', 'post_id'],
+  stats: [
+    { id: 'total', label: 'Likes', color: '#f91880', value: { type: 'count' } },
+    { id: 'users', label: 'Likers', color: '#1d9bf0', value: { type: 'distinct', column: 'user_id' } },
+    { id: 'posts', label: 'Posts Liked', color: '#00ba7c', value: { type: 'distinct', column: 'post_id' } },
+  ],
+  dimensions: [],
+  listColumns: ['created_at', 'user_id', 'post_id'],
+  linkToDetail: false,
+};
+
+const likesResource: ResourceConfig = {
+  name: 'likes',
+  label: 'Like',
+  labelPlural: 'Likes',
+  icon: 'heart',
+  primaryKey: 'user_id',
+  actions: { list: true, show: false, create: false, edit: false, delete: false },
+  fields: [
+    {
+      name: 'user_id',
+      type: 'relation',
+      label: 'User',
+      relation: { resource: 'profiles', field: 'id', displayField: 'username' },
+    },
+    {
+      name: 'post_id',
+      type: 'relation',
+      label: 'Post',
+      relation: { resource: 'posts', field: 'id' },
+    },
+    { name: 'created_at', type: 'datetime', label: 'Liked At', sortable: true },
+  ],
+  listFields: ['user_id', 'post_id', 'created_at'],
+  defaultSort: { field: 'created_at', order: 'desc' },
+  dashboard: likesDashboard,
+};
+
+const followsDashboard: ResourceDashboardConfig = {
+  title: 'Network Growth',
+  timestampColumn: 'created_at',
+  defaultHours: 720, // 30 days
+  bucketSize: 'day',
+  primaryKey: ['follower_id', 'following_id'],
+  stats: [
+    { id: 'total', label: 'Follows', color: '#7856ff', value: { type: 'count' } },
+    { id: 'followers', label: 'Followers', color: '#1d9bf0', value: { type: 'distinct', column: 'follower_id' } },
+    { id: 'following', label: 'Following', color: '#00ba7c', value: { type: 'distinct', column: 'following_id' } },
+  ],
+  dimensions: [],
+  listColumns: ['created_at', 'follower_id', 'following_id'],
+  linkToDetail: false,
+};
+
+const followsResource: ResourceConfig = {
+  name: 'follows',
+  label: 'Follow',
+  labelPlural: 'Follows',
+  icon: 'people',
+  primaryKey: 'follower_id',
+  actions: { list: true, show: false, create: false, edit: false, delete: false },
+  fields: [
+    {
+      name: 'follower_id',
+      type: 'relation',
+      label: 'Follower',
+      relation: { resource: 'profiles', field: 'id', displayField: 'username' },
+    },
+    {
+      name: 'following_id',
+      type: 'relation',
+      label: 'Following',
+      relation: { resource: 'profiles', field: 'id', displayField: 'username' },
+    },
+    { name: 'created_at', type: 'datetime', label: 'Followed At', sortable: true },
+  ],
+  listFields: ['follower_id', 'following_id', 'created_at'],
+  defaultSort: { field: 'created_at', order: 'desc' },
+  dashboard: followsDashboard,
+};
+
+// =============================================================================
+// Dashboard
+// =============================================================================
+
+const overviewDashboard: DashboardConfig = {
+  id: 'overview',
+  title: 'Overview',
+  description: 'Platform activity at a glance',
+  refreshInterval: 60,
+  widgets: [
+    {
+      id: 'total-users',
+      type: 'stat',
+      title: 'Total Users',
+      data: { resource: 'profiles', aggregation: 'count' },
+      grid: { x: 0, y: 0, width: 1, height: 1 },
+    },
+    {
+      id: 'total-posts',
+      type: 'stat',
+      title: 'Total Posts',
+      data: { resource: 'posts', aggregation: 'count' },
+      grid: { x: 1, y: 0, width: 1, height: 1 },
+    },
+    {
+      id: 'total-likes',
+      type: 'stat',
+      title: 'Total Likes',
+      data: { resource: 'likes', aggregation: 'count' },
+      grid: { x: 2, y: 0, width: 1, height: 1 },
+    },
+    {
+      id: 'total-follows',
+      type: 'stat',
+      title: 'Total Follows',
+      data: { resource: 'follows', aggregation: 'count' },
+      grid: { x: 3, y: 0, width: 1, height: 1 },
+    },
+  ],
+};
+
+// =============================================================================
+// Exported Config
+// =============================================================================
+
+/**
+ * Twitter Admin Configuration
+ *
+ * Pre-built configuration for the example Twitter clone app.
+ * Pass this to AdminRoot or AdminConfigProvider.
+ *
+ * @example
+ * ```tsx
+ * import { AdminRoot, EverystackAdapter } from 'everystack/admin';
+ * import { twitterAdminConfig } from 'everystack/admin/presets/twitter';
+ *
+ * const adapter = new EverystackAdapter({ baseUrl: '/api' });
+ *
+ * export default function AdminLayout() {
+ *   return (
+ *     <AdminRoot config={twitterAdminConfig} adapter={adapter}>
+ *       <Slot />
+ *     </AdminRoot>
+ *   );
+ * }
+ * ```
+ */
+export const twitterAdminConfig: AdminConfig = {
+  title: 'Twitter Admin',
+  subtitle: 'Content & User Management',
+  basePath: '/admin',
+  theme: {
+    primaryColor: '#1d9bf0',
+    backgroundColor: '#f7f9f9',
+    textColor: '#0f1419',
+    accentColor: '#1d9bf0',
+  },
+  resources: [profilesResource, postsResource, likesResource, followsResource],
+  dashboards: [overviewDashboard],
+  menu: [
+    { id: 'overview', label: 'Overview', dashboard: 'overview' },
+    { id: 'profiles', label: 'Users', icon: 'person', resource: 'profiles' },
+    { id: 'posts', label: 'Posts', icon: 'chatbubble', resource: 'posts' },
+    { id: 'likes', label: 'Likes', icon: 'heart', resource: 'likes' },
+    { id: 'follows', label: 'Follows', icon: 'people', resource: 'follows' },
+  ],
+};
+
+/** Individual resource configs for selective use */
+export { profilesResource, postsResource, likesResource, followsResource };

package/src/providers/AdminConfigProvider.tsx

@@ -0,0 +1,18 @@
+/**
+ * AdminConfigProvider
+ *
+ * Provides AdminConfig to the admin component tree.
+ */
+
+import React from 'react';
+import type { AdminConfig } from '../types';
+import { AdminConfigContext } from '../hooks/useAdminConfig';
+
+export interface AdminConfigProviderProps {
+  config: AdminConfig;
+  children: React.ReactNode;
+}
+
+export function AdminConfigProvider({ config, children }: AdminConfigProviderProps) {
+  return <AdminConfigContext.Provider value={{ config }}>{children}</AdminConfigContext.Provider>;
+}

package/src/providers/DataAdapterProvider.tsx

@@ -0,0 +1,18 @@
+/**
+ * DataAdapterProvider
+ *
+ * Provides the DataAdapter to the admin component tree.
+ */
+
+import React from 'react';
+import type { DataAdapter } from '../adapters/types';
+import { DataAdapterContext } from '../hooks/useAdminData';
+
+export interface DataAdapterProviderProps {
+  adapter: DataAdapter;
+  children: React.ReactNode;
+}
+
+export function DataAdapterProvider({ adapter, children }: DataAdapterProviderProps) {
+  return <DataAdapterContext.Provider value={{ adapter }}>{children}</DataAdapterContext.Provider>;
+}