@qwickapps/react-framework 1.3.0

package/package.json

@@ -0,0 +1,141 @@
+{
+  "name": "@qwickapps/react-framework",
+  "version": "1.3.0",
+  "type": "module",
+  "description": "Complete React framework with responsive navigation, flexible layouts, theming system, and reusable components for building modern applications.",
+  "main": "dist/index.js",
+  "module": "dist/index.esm.js",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "require": "./dist/index.js",
+      "import": "./dist/index.esm.js"
+    },
+    "./dist/index.css": "./dist/index.css"
+  },
+  "files": [
+    "dist",
+    "src"
+  ],
+  "scripts": {
+    "build": "rollup -c",
+    "build:dev": "NODE_ENV=development rollup -c",
+    "build:prod": "NODE_ENV=production STRIP_LOGS=true rollup -c",
+    "dev": "rollup -c -w",
+    "test": "jest",
+    "test:watch": "jest --watch",
+    "test:coverage": "jest --coverage",
+    "clean": "rm -rf dist node_modules .rollup.cache storybook-static",
+    "prepublishOnly": "npm run test && npm run build",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build"
+  },
+  "keywords": [
+    "react",
+    "framework",
+    "responsive",
+    "navigation",
+    "layouts",
+    "theme",
+    "palette",
+    "dark-mode",
+    "components",
+    "typescript",
+    "ui-kit",
+    "qwickapps"
+  ],
+  "author": "QwickApps",
+  "license": "PolyForm-Shield-1.0.0",
+  "dependencies": {
+    "@qwickapps/logging": "^1.0.0",
+    "@qwickapps/schema": "^1.3.0",
+    "marked": "^4.3.0",
+    "md5": "^2.3.0",
+    "sanitize-html": "^2.17.0"
+  },
+  "peerDependencies": {
+    "@emotion/react": ">=11.0.0",
+    "@emotion/styled": ">=11.0.0",
+    "@mui/icons-material": ">=5.0.0",
+    "@mui/material": ">=5.0.0",
+    "react": ">=16.8.0",
+    "react-dom": ">=16.8.0",
+    "react-router-dom": ">=6.0.0"
+  },
+  "devDependencies": {
+    "@babel/core": "^7.20.0",
+    "@babel/preset-env": "^7.20.0",
+    "@babel/preset-react": "^7.18.0",
+    "@babel/preset-typescript": "^7.27.1",
+    "@chromatic-com/storybook": "^4.1.0",
+    "@emotion/react": "^11.14.0",
+    "@emotion/styled": "^11.14.1",
+    "@mui/icons-material": "^7.2.0",
+    "@mui/material": "^7.2.0",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.0",
+    "@rollup/plugin-node-resolve": "^15.0.0",
+    "@rollup/plugin-replace": "^6.0.2",
+    "@rollup/plugin-typescript": "^11.0.0",
+    "@storybook/addon-docs": "^9.1.0",
+    "@storybook/react-vite": "^9.1.0",
+    "@storybook/react-webpack5": "^9.1.0",
+    "@testing-library/jest-dom": "^6.0.0",
+    "@testing-library/react": "^14.0.0",
+    "@testing-library/user-event": "^14.0.0",
+    "@types/jest": "^30.0.0",
+    "@types/marked": "^5.0.2",
+    "@types/md5": "^2.3.5",
+    "@types/mustache": "^4.2.5",
+    "@types/node": "^24.1.0",
+    "@types/react": "^18.0.0",
+    "@types/react-dom": "^18.0.0",
+    "@types/react-router-dom": "^5.3.3",
+    "@types/sanitize-html": "^2.16.0",
+    "babel-jest": "^29.0.0",
+    "css-loader": "^7.1.2",
+    "identity-obj-proxy": "^3.0.0",
+    "jest": "^29.0.0",
+    "jest-environment-jsdom": "^29.0.0",
+    "react-router-dom": "^6.30.1",
+    "rollup": "^3.0.0",
+    "rollup-plugin-postcss": "^4.0.0",
+    "storybook": "^9.1.0",
+    "style-loader": "^4.0.0",
+    "ts-jest": "^29.4.1",
+    "ts-loader": "^9.5.2",
+    "typescript": "^5.9.2",
+    "vite": "^7.0.6"
+  },
+  "publishConfig": {
+    "access": "public"
+  },
+  "jest": {
+    "testEnvironment": "jsdom",
+    "setupFilesAfterEnv": [
+      "<rootDir>/src/setupTests.js"
+    ],
+    "moduleNameMapper": {
+      "\\.(css|less|scss|sass)$": "identity-obj-proxy"
+    },
+    "transform": {
+      "^.+\\.(js|jsx)$": "babel-jest",
+      "^.+\\.(ts|tsx)$": "ts-jest"
+    },
+    "moduleFileExtensions": [
+      "js",
+      "jsx",
+      "ts",
+      "tsx"
+    ],
+    "transformIgnorePatterns": [
+      "node_modules/(?!(.*\\.mjs$))"
+    ]
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/raajkumars/qwickapps.git",
+    "directory": "packages/qwickapps-react-framework"
+  }
+}

package/src/__tests__/components/Logo.test.js

@@ -0,0 +1,172 @@
+/**
+ * Logo Component Tests
+ * Tests for the dynamic Logo component
+ */
+
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import Logo from '../../components/Logo';
+import { ThemeProvider } from '../../contexts/ThemeContext';
+import { PaletteProvider } from '../../contexts/PaletteContext';
+
+// Wrapper component for providers
+const TestWrapper = ({ children }) => (
+  <ThemeProvider>
+    <PaletteProvider>
+      {children}
+    </PaletteProvider>
+  </ThemeProvider>
+);
+
+const renderWithProviders = (component) => {
+  return render(component, { wrapper: TestWrapper });
+};
+
+describe('Logo Component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  test('renders with default props', () => {
+    renderWithProviders(<Logo />);
+    
+    const logoElement = screen.getByRole('img', { name: /qwick apps logo/i });
+    expect(logoElement).toBeInTheDocument();
+    expect(logoElement).toHaveTextContent('QwickApps');
+  });
+
+  test('renders with custom name - single word', () => {
+    renderWithProviders(<Logo name="Brand" />);
+    
+    const logoElement = screen.getByRole('img', { name: /brand logo/i });
+    expect(logoElement).toBeInTheDocument();
+    expect(logoElement).toHaveTextContent('Brand');
+    // Should not have second part
+    const secondPart = logoElement.querySelector('.logo-second-part');
+    expect(secondPart).toBeNull();
+  });
+
+  test('renders with custom name - two words', () => {
+    renderWithProviders(<Logo name="Qwick Apps" />);
+    
+    const logoElement = screen.getByRole('img', { name: /qwick apps logo/i });
+    expect(logoElement).toBeInTheDocument();
+    expect(logoElement).toHaveTextContent('QwickApps');
+  });
+
+  test('renders with custom name - multiple words', () => {
+    renderWithProviders(<Logo name="My Amazing Brand App" />);
+    
+    const logoElement = screen.getByRole('img', { name: /my amazing brand app logo/i });
+    expect(logoElement).toBeInTheDocument();
+    // First part should be "My Amazing Brand", second part should be "App"
+    const firstPart = logoElement.querySelector('.logo-first-part');
+    const secondPart = logoElement.querySelector('.logo-second-part');
+    expect(firstPart).toHaveTextContent('My Amazing Brand');
+    expect(secondPart).toHaveTextContent('App');
+  });
+
+  test('creates correct aria-label from name', () => {
+    renderWithProviders(<Logo name="Custom App" />);
+    
+    const logoElement = screen.getByRole('img', { name: /custom app logo/i });
+    expect(logoElement).toBeInTheDocument();
+  });
+
+  test('applies correct size classes', () => {
+    const { rerender } = renderWithProviders(<Logo size="small" />);
+    expect(screen.getByRole('img')).toHaveClass('logo-small');
+
+    rerender(<Logo size="medium" />);
+    expect(screen.getByRole('img')).toHaveClass('logo-medium');
+
+    rerender(<Logo size="large" />);
+    expect(screen.getByRole('img')).toHaveClass('logo-large');
+  });
+
+  test('applies correct variant classes', () => {
+    const { rerender } = renderWithProviders(<Logo variant="default" />);
+    expect(screen.getByRole('img')).toHaveClass('logo-default');
+
+    rerender(<Logo variant="on-primary" />);
+    expect(screen.getByRole('img')).toHaveClass('logo-on-primary');
+
+    rerender(<Logo variant="high-contrast" />);
+    expect(screen.getByRole('img')).toHaveClass('logo-high-contrast');
+  });
+
+  test('passes through additional props', () => {
+    renderWithProviders(<Logo data-testid="custom-logo" className="custom-class" />);
+    
+    const logoElement = screen.getByTestId('custom-logo');
+    expect(logoElement).toHaveClass('custom-class');
+  });
+
+  test('has correct accessibility attributes', () => {
+    renderWithProviders(<Logo />);
+    
+    const logoElement = screen.getByRole('img');
+    expect(logoElement).toHaveAttribute('aria-label', 'Qwick Apps Logo');
+  });
+
+  test('has correct accessibility attributes with custom name', () => {
+    renderWithProviders(<Logo name="Custom Brand" />);
+    
+    const logoElement = screen.getByRole('img');
+    expect(logoElement).toHaveAttribute('aria-label', 'Custom Brand Logo');
+  });
+
+  test('shows badge circle by default', () => {
+    renderWithProviders(<Logo />);
+    
+    const logoElement = screen.getByRole('img');
+    const badgeElement = logoElement.querySelector('.logo-badge-circle');
+    expect(badgeElement).toBeInTheDocument();
+  });
+
+  test('renders different badge shapes', () => {
+    const { rerender } = renderWithProviders(<Logo badgeShape="star" />);
+    expect(screen.getByRole('img').querySelector('.logo-badge-star')).toBeInTheDocument();
+
+    rerender(<Logo badgeShape="square" />);
+    expect(screen.getByRole('img').querySelector('.logo-badge-square')).toBeInTheDocument();
+
+    rerender(<Logo badgeShape="heart" />);
+    expect(screen.getByRole('img').querySelector('.logo-badge-heart')).toBeInTheDocument();
+  });
+
+  test('hides badge when badge is none', () => {
+    renderWithProviders(<Logo badge="none" />);
+    
+    const logoElement = screen.getByRole('img');
+    const badgeElement = logoElement.querySelector('.logo-badge');
+    expect(badgeElement).not.toBeInTheDocument();
+  });
+
+  test('applies dynamic-logo class', () => {
+    renderWithProviders(<Logo />);
+    
+    const logoElement = screen.getByRole('img');
+    expect(logoElement).toHaveClass('dynamic-logo');
+  });
+
+  test('renders as clickable when onClick provided', () => {
+    const handleClick = jest.fn();
+    renderWithProviders(<Logo onClick={handleClick} />);
+    
+    const logoElement = screen.getByRole('img');
+    fireEvent.click(logoElement);
+    
+    expect(handleClick).toHaveBeenCalledTimes(1);
+  });
+
+  test('combines custom className with default classes', () => {
+    renderWithProviders(<Logo className="my-custom-class" size="large" variant="monochrome" />);
+    
+    const logoElement = screen.getByRole('img');
+    expect(logoElement).toHaveClass('logo');
+    expect(logoElement).toHaveClass('logo-large');
+    expect(logoElement).toHaveClass('logo-monochrome');
+    expect(logoElement).toHaveClass('my-custom-class');
+  });
+});