Feature-Sliced Design

// src/shared/lib/fsd/index.ts
export { createSlice } from './create-slice';
export { createFeature } from './create-feature';
export { createEntity } from './create-entity';
export { createWidget } from './create-widget';

// src/shared/lib/fsd/create-slice.ts
export interface SliceConfig {
  name: string;
  layer: 'shared' | 'entities' | 'features' | 'widgets' | 'pages' | 'app';
  segments: string[];
}

export function createSlice(config: SliceConfig) {
  return {
    ...config,
    path: `src/${config.layer}/${config.name}`,
  };
}

// src/shared/lib/fsd/segments/ui.tsx
export interface UISegmentProps {
  children: React.ReactNode;
  className?: string;
}

// src/shared/lib/fsd/segments/model.ts
export interface ModelSegment {
  store: any;
  hooks: Record<string, Function>;
  selectors: Record<string, Function>;
}

// src/shared/lib/fsd/segments/api.ts
export interface APISegment {
  endpoints: Record<string, Function>;
  types: Record<string, any>;
}

// src/shared/ui/button/index.ts
export { Button } from './ui/Button';
export type { ButtonProps } from './model/types';

// src/shared/ui/button/ui/Button.tsx
import { cn } from '@/shared/lib/utils';
import type { ButtonProps } from '../model/types';

export function Button({ className, variant, size, ...props }: ButtonProps) {
  return (
    <button
      className={cn(
        'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors',
        className
      )}
      {...props}
    />
  );
}

// src/shared/ui/button/model/types.ts
export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
  variant?: 'default' | 'destructive' | 'outline' | 'secondary' | 'ghost' | 'link';
  size?: 'default' | 'sm' | 'lg' | 'icon';
}

// src/shared/lib/utils/index.ts
export { cn } from './cn';
export { formatDate } from './date';
export { debounce } from './debounce';

// src/shared/lib/cn.ts
import { clsx, type ClassValue } from 'clsx';
import { twMerge } from 'tailwind-merge';

export function cn(...inputs: ClassValue[]) {
  return twMerge(clsx(inputs));
}

// src/shared/api/base.ts
import axios from 'axios';

export const api = axios.create({
  baseURL: process.env.API_BASE_URL,
  headers: {
    'Content-Type': 'application/json',
  },
});

// src/shared/api/graphql.ts
import { GraphQLClient } from 'graphql-request';

export const graphqlClient = new GraphQLClient(process.env.GRAPHQL_ENDPOINT);

// src/entities/user/index.ts
export { UserCard } from './ui/UserCard';
export { useUser } from './model/useUser';
export { userStore } from './model/userStore';
export type { User } from './model/types';

// src/entities/user/model/types.ts
export interface User {
  id: string;
  email: string;
  name: string;
  role: string;
  permissions: string[];
}

// src/entities/user/model/userStore.ts
import { create } from 'zustand';
import type { User } from './types';

interface UserState {
  user: User | null;
  isLoading: boolean;
  setUser: (user: User | null) => void;
  setLoading: (loading: boolean) => void;
}

export const userStore = create<UserState>((set) => ({
  user: null,
  isLoading: false,
  setUser: (user) => set({ user }),
  setLoading: (isLoading) => set({ isLoading }),
}));

// src/entities/user/model/useUser.ts
import { useUserStore } from './userStore';
import { userApi } from '../api/userApi';

export function useUser() {
  const { user, isLoading, setUser, setLoading } = useUserStore();
  
  const fetchUser = async () => {
    setLoading(true);
    try {
      const userData = await userApi.getCurrentUser();
      setUser(userData);
    } finally {
      setLoading(false);
    }
  };
  
  return { user, isLoading, fetchUser };
}

// src/entities/user/api/userApi.ts
import { graphqlClient } from '@/shared/api/graphql';
import { GET_CURRENT_USER } from './queries';
import type { User } from '../model/types';

export const userApi = {
  getCurrentUser: async (): Promise<User> => {
    const data = await graphqlClient.request(GET_CURRENT_USER);
    return data.me;
  },
};

// src/entities/detection/index.ts
export { DetectionCard } from './ui/DetectionCard';
export { DetectionList } from './ui/DetectionList';
export { useDetection } from './model/useDetection';
export { detectionStore } from './model/detectionStore';
export type { Detection } from './model/types';

// src/entities/detection/model/types.ts
export interface Detection {
  id: string;
  name: string;
  description: string;
  query: string;
  severity: 'low' | 'medium' | 'high' | 'critical';
  status: 'active' | 'inactive' | 'draft';
  createdAt: string;
  updatedAt: string;
  mitreTechniques: string[];
}

// src/entities/detection/model/detectionStore.ts
import { create } from 'zustand';
import type { Detection } from './types';

interface DetectionState {
  detections: Detection[];
  currentDetection: Detection | null;
  isLoading: boolean;
  setDetections: (detections: Detection[]) => void;
  setCurrentDetection: (detection: Detection | null) => void;
  setLoading: (loading: boolean) => void;
}

export const detectionStore = create<DetectionState>((set) => ({
  detections: [],
  currentDetection: null,
  isLoading: false,
  setDetections: (detections) => set({ detections }),
  setCurrentDetection: (currentDetection) => set({ currentDetection }),
  setLoading: (isLoading) => set({ isLoading }),
}));

// src/features/auth/index.ts
export { LoginForm } from './ui/LoginForm';
export { LogoutButton } from './ui/LogoutButton';
export { useAuth } from './model/useAuth';
export { authStore } from './model/authStore';

// src/features/auth/model/useAuth.ts
import { useAuthStore } from './authStore';
import { authApi } from '../api/authApi';
import { userStore } from '@/entities/user';

export function useAuth() {
  const { isAuthenticated, token, setAuth, clearAuth } = useAuthStore();
  const { setUser } = userStore();
  
  const login = async (credentials: LoginCredentials) => {
    try {
      const { token, user } = await authApi.login(credentials);
      setAuth(token);
      setUser(user);
    } catch (error) {
      throw error;
    }
  };
  
  const logout = async () => {
    await authApi.logout();
    clearAuth();
    setUser(null);
  };
  
  return { isAuthenticated, token, login, logout };
}

// src/features/auth/ui/LoginForm.tsx
import { useForm } from 'react-hook-form';
import { Button } from '@/shared/ui/button';
import { Input } from '@/shared/ui/input';
import { useAuth } from '../model/useAuth';

export function LoginForm() {
  const { login } = useAuth();
  const { register, handleSubmit } = useForm();
  
  const onSubmit = async (data: any) => {
    try {
      await login(data);
    } catch (error) {
      // Handle error
    }
  };
  
  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <Input {...register('email')} placeholder="Email" />
      <Input {...register('password')} type="password" placeholder="Password" />
      <Button type="submit">Login</Button>
    </form>
  );
}

// src/features/create-detection/index.ts
export { CreateDetectionForm } from './ui/CreateDetectionForm';
export { DetectionWizard } from './ui/DetectionWizard';
export { useCreateDetection } from './model/useCreateDetection';

// src/features/create-detection/model/useCreateDetection.ts
import { detectionStore } from '@/entities/detection';
import { detectionApi } from '@/entities/detection/api';

export function useCreateDetection() {
  const { setDetections } = detectionStore();
  
  const createDetection = async (data: CreateDetectionData) => {
    try {
      const newDetection = await detectionApi.create(data);
      setDetections(prev => [...prev, newDetection]);
      return newDetection;
    } catch (error) {
      throw error;
    }
  };
  
  return { createDetection };
}

// src/widgets/navigation/index.ts
export { Navigation } from './ui/Navigation';
export { NavigationItem } from './ui/NavigationItem';
export { useNavigation } from './model/useNavigation';

// src/widgets/navigation/ui/Navigation.tsx
import { NavigationItem } from './NavigationItem';
import { useNavigation } from '../model/useNavigation';

export function Navigation() {
  const { navigationItems } = useNavigation();
  
  return (
    <nav className="flex flex-col space-y-2">
      {navigationItems.map((item) => (
        <NavigationItem key={item.path} item={item} />
      ))}
    </nav>
  );
}

// src/widgets/navigation/model/useNavigation.ts
import { useMemo } from 'react';
import { useUser } from '@/entities/user';
import { useFeatureFlags } from '@/shared/lib/feature-flags';

export function useNavigation() {
  const { user } = useUser();
  const { featureFlags } = useFeatureFlags();
  
  const navigationItems = useMemo(() => {
    return [
      { path: '/dashboard', label: 'Dashboard', visible: true },
      { path: '/detections', label: 'Detections', visible: true },
      { path: '/query', label: 'Query', visible: featureFlags.FEDERATED_SEARCH },
      { path: '/settings', label: 'Settings', visible: user?.role === 'admin' },
    ].filter(item => item.visible);
  }, [user, featureFlags]);
  
  return { navigationItems };
}

// src/widgets/dashboard-grid/index.ts
export { DashboardGrid } from './ui/DashboardGrid';
export { DashboardWidget } from './ui/DashboardWidget';
export { useDashboardGrid } from './model/useDashboardGrid';

// src/widgets/dashboard-grid/ui/DashboardGrid.tsx
import { DashboardWidget } from './DashboardWidget';
import { useDashboardGrid } from '../model/useDashboardGrid';

export function DashboardGrid() {
  const { widgets, layout, updateLayout } = useDashboardGrid();
  
  return (
    <div className="grid grid-cols-12 gap-4">
      {widgets.map((widget) => (
        <DashboardWidget key={widget.id} widget={widget} />
      ))}
    </div>
  );
}

// src/pages/dashboard/index.ts
export { DashboardPage } from './ui/DashboardPage';

// src/pages/dashboard/ui/DashboardPage.tsx
import { Page } from '@/shared/ui/page';
import { DashboardGrid } from '@/widgets/dashboard-grid';
import { Navigation } from '@/widgets/navigation';

export function DashboardPage() {
  return (
    <Page>
      <div className="flex h-full">
        <Navigation />
        <main className="flex-1">
          <DashboardGrid />
        </main>
      </div>
    </Page>
  );
}

// src/pages/detections/index.ts
export { DetectionsPage } from './ui/DetectionsPage';

// src/pages/detections/ui/DetectionsPage.tsx
import { Page } from '@/shared/ui/page';
import { DetectionList } from '@/entities/detection';
import { CreateDetectionForm } from '@/features/create-detection';
import { Navigation } from '@/widgets/navigation';

export function DetectionsPage() {
  return (
    <Page>
      <div className="flex h-full">
        <Navigation />
        <main className="flex-1">
          <CreateDetectionForm />
          <DetectionList />
        </main>
      </div>
    </Page>
  );
}

// src/app/providers/index.tsx
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
import { ThemeProvider } from './ThemeProvider';
import { AuthProvider } from './AuthProvider';

const queryClient = new QueryClient();

export function AppProviders({ children }: { children: React.ReactNode }) {
  return (
    <QueryClientProvider client={queryClient}>
      <ThemeProvider>
        <AuthProvider>
          {children}
          <ReactQueryDevtools />
        </AuthProvider>
      </ThemeProvider>
    </QueryClientProvider>
  );
}

// src/app/router/index.tsx
import { createBrowserRouter } from 'react-router-dom';
import { DashboardPage } from '@/pages/dashboard';
import { DetectionsPage } from '@/pages/detections';
import { SettingsPage } from '@/pages/settings';

export const router = createBrowserRouter([
  {
    path: '/',
    element: <DashboardPage />,
  },
  {
    path: '/detections',
    element: <DetectionsPage />,
  },
  {
    path: '/settings',
    element: <SettingsPage />,
  },
]);

// src/entities/user/index.ts - Public API
export { UserCard } from './ui/UserCard';
export { useUser } from './model/useUser';
export type { User } from './model/types';

// Usage in other slices
import { UserCard, useUser, type User } from '@/entities/user';

// ✅ Allowed imports
import { Button } from '@/shared/ui/button';           // From shared
import { User } from '@/entities/user';                // From entities
import { useAuth } from '@/features/auth';             // From features
import { Navigation } from '@/widgets/navigation';      // From widgets
import { DashboardPage } from '@/pages/dashboard';    // From pages

// ❌ Forbidden imports
import { UserCard } from '@/entities/user/ui/UserCard'; // Direct import
import { authStore } from '@/features/auth/model/store'; // Direct import