Upload 10 files

frontend-project/Button.css

@@ -0,0 +1,26 @@
+.btn {
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  font-size: 16px;
+  cursor: pointer;
+  transition: background-color 0.3s ease;
+}
+
+.btn-primary {
+  background-color: #007bff;
+  color: white;
+}
+
+.btn-primary:hover {
+  background-color: #0056b3;
+}
+
+.btn-secondary {
+  background-color: #6c757d;
+  color: white;
+}
+
+.btn-secondary:hover {
+  background-color: #545b62;
+}

frontend-project/Button.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { Button } from './Button';
+
+const meta: Meta<typeof Button> = {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export default meta;
+type Story = StoryObj<typeof Button>;
+
+export const Primary: Story = {
+  args: {
+    label: 'Primary Button',
+    variant: 'primary',
+  },
+};
+
+export const Secondary: Story = {
+  args: {
+    label: 'Secondary Button',
+    variant: 'secondary',
+  },
+};
+
+export const WithClickHandler: Story = {
+  args: {
+    label: 'Click Me',
+    onClick: () => alert('Button clicked!'),
+  },
+};

frontend-project/Button.test.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { Button } from './Button';
+
+describe('Button Component', () => {
+  it('renders with label', () => {
+    render(<Button label="Click me" />);
+    expect(screen.getByText('Click me')).toBeInTheDocument();
+  });
+
+  it('calls onClick when clicked', () => {
+    const handleClick = jest.fn();
+    render(<Button label="Click me" onClick={handleClick} />);
+    fireEvent.click(screen.getByText('Click me'));
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('applies variant class', () => {
+    render(<Button label="Secondary" variant="secondary" />);
+    const button = screen.getByText('Secondary');
+    expect(button).toHaveClass('btn-secondary');
+  });
+});

frontend-project/Button.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import './Button.css';
+
+interface ButtonProps {
+  label: string;
+  onClick?: () => void;
+  variant?: 'primary' | 'secondary';
+}
+
+export const Button: React.FC<ButtonProps> = ({ 
+  label, 
+  onClick, 
+  variant = 'primary' 
+}) => {
+  return (
+    <button 
+      className={`btn btn-${variant}`}
+      onClick={onClick}
+    >
+      {label}
+    </button>
+  );
+};

frontend-project/userSlice.test.ts

@@ -0,0 +1,51 @@
+import userReducer, { setCurrentUser, addUser, removeUser, setLoading, setError } from './userSlice';
+import { User } from './userSlice';
+
+describe('userSlice', () => {
+  const mockUser: User = {
+    id: '1',
+    name: 'John Doe',
+    email: 'john@example.com',
+  };
+
+  it('should return the initial state', () => {
+    expect(userReducer(undefined, { type: 'unknown' })).toEqual({
+      currentUser: null,
+      users: [],
+      loading: false,
+      error: null,
+    });
+  });
+
+  it('should handle setCurrentUser', () => {
+    const actual = userReducer(undefined, setCurrentUser(mockUser));
+    expect(actual.currentUser).toEqual(mockUser);
+  });
+
+  it('should handle addUser', () => {
+    const actual = userReducer(undefined, addUser(mockUser));
+    expect(actual.users).toContainEqual(mockUser);
+  });
+
+  it('should handle removeUser', () => {
+    const state = {
+      currentUser: null,
+      users: [mockUser],
+      loading: false,
+      error: null,
+    };
+    const actual = userReducer(state, removeUser('1'));
+    expect(actual.users).not.toContainEqual(mockUser);
+  });
+
+  it('should handle setLoading', () => {
+    const actual = userReducer(undefined, setLoading(true));
+    expect(actual.loading).toBe(true);
+  });
+
+  it('should handle setError', () => {
+    const errorMessage = 'An error occurred';
+    const actual = userReducer(undefined, setError(errorMessage));
+    expect(actual.error).toBe(errorMessage);
+  });
+});

frontend-project/userSlice.ts

@@ -0,0 +1,46 @@
+import { createSlice, PayloadAction } from '@reduxjs/toolkit';
+
+export interface User {
+  id: string;
+  name: string;
+  email: string;
+}
+
+interface UserState {
+  currentUser: User | null;
+  users: User[];
+  loading: boolean;
+  error: string | null;
+}
+
+const initialState: UserState = {
+  currentUser: null,
+  users: [],
+  loading: false,
+  error: null,
+};
+
+const userSlice = createSlice({
+  name: 'user',
+  initialState,
+  reducers: {
+    setCurrentUser: (state, action: PayloadAction<User>) => {
+      state.currentUser = action.payload;
+    },
+    addUser: (state, action: PayloadAction<User>) => {
+      state.users.push(action.payload);
+    },
+    removeUser: (state, action: PayloadAction<string>) => {
+      state.users = state.users.filter(user => user.id !== action.payload);
+    },
+    setLoading: (state, action: PayloadAction<boolean>) => {
+      state.loading = action.payload;
+    },
+    setError: (state, action: PayloadAction<string | null>) => {
+      state.error = action.payload;
+    },
+  },
+});
+
+export const { setCurrentUser, addUser, removeUser, setLoading, setError } = userSlice.actions;
+export default userSlice.reducer;

frontend-project/userSlice.types.ts

@@ -0,0 +1,26 @@
+import { User } from './userSlice';
+
+export interface UserApiResponse {
+  success: boolean;
+  data: User | User[];
+  message?: string;
+}
+
+export interface UserFormData {
+  name: string;
+  email: string;
+}
+
+export interface UserFilters {
+  search?: string;
+  role?: string;
+  status?: 'active' | 'inactive';
+}
+
+export type UserSortField = 'name' | 'email' | 'createdAt';
+export type UserSortOrder = 'asc' | 'desc';
+
+export interface UserSortOptions {
+  field: UserSortField;
+  order: UserSortOrder;
+}

frontend-project/webpack.config.js

@@ -0,0 +1,25 @@
+const path = require('path');
+
+module.exports = {
+  entry: './src/index.js',
+  output: {
+    path: path.resolve(__dirname, 'dist'),
+    filename: 'bundle.js',
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        use: 'ts-loader',
+        exclude: /node_modules/,
+      },
+      {
+        test: /\.css$/,
+        use: ['style-loader', 'css-loader'],
+      },
+    ],
+  },
+  resolve: {
+    extensions: ['.tsx', '.ts', '.js'],
+  },
+};

frontend-project/webpack.dev.js

@@ -0,0 +1,12 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.config.js');
+
+module.exports = merge(common, {
+  mode: 'development',
+  devtool: 'inline-source-map',
+  devServer: {
+    contentBase: './dist',
+    hot: true,
+    port: 3000,
+  },
+});

frontend-project/webpack.prod.js

@@ -0,0 +1,13 @@
+const { merge } = require('webpack-merge');
+const common = require('./webpack.config.js');
+
+module.exports = merge(common, {
+  mode: 'production',
+  devtool: 'source-map',
+  optimization: {
+    minimize: true,
+    splitChunks: {
+      chunks: 'all',
+    },
+  },
+});