@snapdragonsnursery/react-components 1.1.0 → 1.1.1

package/README.md

@@ -1,528 +1,167 @@
-# react-components
+# @snapdragonsnursery/react-components
 
-Reusable React components for Snapdragons projects.
+A collection of reusable React components for Snapdragons Nursery applications.
 
 ## Components
 
-- **AuthButtons**: Profile button with authentication, user image, dropdown menu (sign out, dark mode), and login/logout handling for MSAL (Azure AD).
-- **ThemeToggle**: Simple theme (light/dark/system) toggle button.
-- **LandingPage**: Professional landing page component for Microsoft authentication flows with customizable branding.
-- **ChildSearchModal**: Modal component for searching and selecting children with advanced filtering and selection capabilities.
+- **ChildSearchModal**: Advanced child search and selection component with filtering, pagination, and multi-select capabilities
+- **AuthButtons**: Authentication buttons for MSAL integration
+- **ThemeToggle**: Dark/light theme toggle component
+- **LandingPage**: Landing page component with authentication
 
 ## Installation
 
-Install via npm (local path or published package):
-
-```
+```bash
 npm install @snapdragonsnursery/react-components
 ```
 
-## Required Dependencies
-
-Your project must have the following installed:
-
-### Core Dependencies
-
-```bash
-npm install react react-dom
-npm install @azure/msal-browser @azure/msal-react
-npm install @headlessui/react @heroicons/react
-```
+## Quick Start
 
-### CSS Framework (Required for AuthButtons styling)
+```jsx
+import { ChildSearchModal } from '@snapdragonsnursery/react-components';
 
-```bash
-npm install -D tailwindcss postcss autoprefixer
-npx tailwindcss init -p
+function MyComponent() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  
+  return (
+    <ChildSearchModal
+      isOpen={isModalOpen}
+      onClose={() => setIsModalOpen(false)}
+      onSelect={(child) => console.log('Selected:', child)}
+      title="Search for a Child"
+    />
+  );
+}
 ```
 
-## Complete Setup Guide for New Projects
+## Environment Variables
 
-### 1. Install Dependencies
-
-```bash
-# Core authentication dependencies
-npm install @azure/msal-browser @azure/msal-react
+Set these environment variables in your application:
 
-# UI dependencies for AuthButtons
-npm install @headlessui/react @heroicons/react
-
-# Tailwind CSS (required for styling)
-npm install -D tailwindcss postcss autoprefixer
-npx tailwindcss init -p
-
-# Install this component library
-npm install @snapdragonsnursery/react-components
+```env
+VITE_COMMON_API_BASE_URL=https://snaps-common-api.azurewebsites.net
 ```
 
-### 2. Configure Tailwind CSS
-
-Update `tailwind.config.js`:
+## Documentation
 
-```javascript
-/** @type {import('tailwindcss').Config} */
-export default {
-  content: ["./index.html", "./src/**/*.{js,ts,jsx,tsx}"],
-  darkMode: "class",
-  theme: {
-    extend: {},
-  },
-  plugins: [],
-};
-```
+- [ChildSearchModal Documentation](./CHILD_SEARCH_MODAL_DOCUMENTATION.md)
+- [ChildSearchModal README](./CHILD_SEARCH_README.md)
+- [Release Guide](./RELEASE.md)
 
-Update `src/index.css`:
+---
 
-```css
-@tailwind base;
-@tailwind components;
-@tailwind utilities;
+## 🚀 Publishing New Versions
 
-/* Your custom styles */
-body {
-  margin: 0;
-  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
-    "Oxygen", "Ubuntu", "Cantarell", "Open Sans", "Helvetica Neue", sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
+### Quick Release (Recommended)
 
-#root {
-  min-height: 100vh;
-}
-```
+```bash
+# Patch release (bug fixes) - 1.1.0 → 1.1.1
+npm run release
 
-### 3. Create Authentication Configuration
-
-Create `src/utils/authConfig.js`:
-
-```javascript
-import { LogLevel } from "@azure/msal-browser";
-
-export const msalConfig = {
-  auth: {
-    clientId: "2e2d9456-a0b7-4651-a8f8-c979ed1486b0", // Snapdragons Azure AD App
-    authority:
-      "https://login.microsoftonline.com/d098ee48-9874-4959-8229-da24c99c36fb",
-    redirectUri: window.location.origin,
-    postLogoutRedirectUri: window.location.origin,
-    navigateToLoginRequestUrl: false,
-  },
-  cache: {
-    cacheLocation: "sessionStorage",
-    storeAuthStateInCookie: false,
-  },
-  system: {
-    loggerOptions: {
-      loggerCallback: (level, message, containsPii) => {
-        if (containsPii) return;
-        switch (level) {
-          case LogLevel.Error:
-            console.error(message);
-            return;
-          case LogLevel.Warning:
-            console.warn(message);
-            return;
-          default:
-            return;
-        }
-      },
-      logLevel: LogLevel.Warning,
-    },
-  },
-};
-
-export const loginRequest = {
-  scopes: ["User.Read", "email", "profile", "Directory.Read.All"],
-};
-
-export const adminConfig = {
-  adminEmailDomains: [],
-  adminEmails: [
-    "james@snapdragonsnursery.com",
-    "accounts@snapdragonsnursery.com",
-  ],
-  adminGroupIds: [],
-  adminRoles: ["FundingAdmin", "Admin"],
-};
-
-export const isUserAdmin = (account, idTokenClaims = null) => {
-  if (!account) return false;
-  const claims = idTokenClaims || account.idTokenClaims;
-  const email = account.username || claims?.email || claims?.preferred_username;
-
-  if (
-    email &&
-    adminConfig.adminEmailDomains.some((domain) =>
-      email.toLowerCase().endsWith(`@${domain.toLowerCase()}`)
-    )
-  ) {
-    return true;
-  }
-
-  if (
-    email &&
-    adminConfig.adminEmails.some(
-      (adminEmail) => email.toLowerCase() === adminEmail.toLowerCase()
-    )
-  ) {
-    return true;
-  }
-
-  if (claims?.groups && adminConfig.adminGroupIds.length > 0) {
-    const userGroups = Array.isArray(claims.groups)
-      ? claims.groups
-      : [claims.groups];
-    if (
-      userGroups.some((groupId) => adminConfig.adminGroupIds.includes(groupId))
-    ) {
-      return true;
-    }
-  }
-
-  if (claims?.roles && adminConfig.adminRoles.length > 0) {
-    const userRoles = Array.isArray(claims.roles)
-      ? claims.roles
-      : [claims.roles];
-    if (userRoles.some((role) => adminConfig.adminRoles.includes(role))) {
-      return true;
-    }
-  }
-
-  return false;
-};
-```
+# Minor release (new features) - 1.1.0 → 1.2.0
+npm run release:minor
 
-### 4. Create Authentication Provider
-
-Create `src/utils/AuthProvider.jsx`:
-
-```javascript
-import React, { createContext, useContext, useEffect, useState } from "react";
-import { useMsal, useAccount } from "@azure/msal-react";
-import { isUserAdmin } from "./authConfig";
-
-const AuthContext = createContext();
-
-export const useAuth = () => {
-  const context = useContext(AuthContext);
-  if (!context) {
-    throw new Error("useAuth must be used within an AuthProvider");
-  }
-  return context;
-};
-
-export const AuthProvider = ({ children }) => {
-  const { instance, accounts } = useMsal();
-  const account = useAccount(accounts[0] || {});
-  const [isLoading, setIsLoading] = useState(true);
-  const [userRole, setUserRole] = useState(null);
-
-  useEffect(() => {
-    const checkUserRole = async () => {
-      if (account) {
-        const adminStatus = isUserAdmin(account);
-        setUserRole(adminStatus ? "admin" : "employee");
-      } else {
-        setUserRole(null);
-      }
-      setIsLoading(false);
-    };
-    checkUserRole();
-  }, [account]);
-
-  const login = async () => {
-    try {
-      await instance.loginPopup();
-    } catch (error) {
-      console.error("Login failed:", error);
-      throw error;
-    }
-  };
-
-  const logout = async () => {
-    try {
-      await instance.logoutPopup();
-    } catch (error) {
-      console.error("Logout failed:", error);
-      throw error;
-    }
-  };
-
-  const isAuthenticated = !!account;
-  const isAdmin = userRole === "admin";
-
-  const value = {
-    account,
-    isAuthenticated,
-    isAdmin,
-    userRole,
-    isLoading,
-    login,
-    logout,
-    instance,
-  };
-
-  return <AuthContext.Provider value={value}>{children}</AuthContext.Provider>;
-};
+# Major release (breaking changes) - 1.1.0 → 2.0.0
+npm run release:major
 ```
 
-### 5. Create Theme Provider
-
-Create `src/utils/theme.jsx`:
-
-```javascript
-import { createContext, useContext, useEffect, useState } from "react";
-
-const ThemeContext = createContext();
-
-export function ThemeProvider({ children }) {
-  const [theme, setTheme] = useState("system");
-
-  useEffect(() => {
-    const savedTheme = localStorage.getItem("theme");
-    if (savedTheme && ["light", "dark", "system"].includes(savedTheme)) {
-      setTheme(savedTheme);
-    } else {
-      setTheme("system");
-    }
-  }, []);
-
-  useEffect(() => {
-    const applyTheme = () => {
-      if (theme === "system") {
-        const systemPrefersDark = window.matchMedia(
-          "(prefers-color-scheme: dark)"
-        ).matches;
-        if (systemPrefersDark) {
-          document.documentElement.classList.add("dark");
-        } else {
-          document.documentElement.classList.remove("dark");
-        }
-      } else if (theme === "dark") {
-        document.documentElement.classList.add("dark");
-      } else {
-        document.documentElement.classList.remove("dark");
-      }
-    };
-
-    applyTheme();
-    localStorage.setItem("theme", theme);
-  }, [theme]);
-
-  useEffect(() => {
-    if (theme !== "system") return;
-
-    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
-    const handleChange = () => {
-      if (theme === "system") {
-        if (mediaQuery.matches) {
-          document.documentElement.classList.add("dark");
-        } else {
-          document.documentElement.classList.remove("dark");
-        }
-      }
-    };
-
-    mediaQuery.addEventListener("change", handleChange);
-    return () => mediaQuery.removeEventListener("change", handleChange);
-  }, [theme]);
-
-  return (
-    <ThemeContext.Provider value={{ theme, setTheme }}>
-      {children}
-    </ThemeContext.Provider>
-  );
-}
-
-export function useTheme() {
-  const context = useContext(ThemeContext);
-  if (context === undefined) {
-    throw new Error("useTheme must be used within a ThemeProvider");
-  }
-  return context;
-}
-```
+### GitHub Actions (Web Interface)
 
-### 6. Setup Main Entry Point
-
-Update `src/main.jsx`:
-
-```javascript
-import React from "react";
-import ReactDOM from "react-dom/client";
-import App from "./App.jsx";
-import "./index.css";
-import { MsalProvider } from "@azure/msal-react";
-import { PublicClientApplication } from "@azure/msal-browser";
-import { msalConfig } from "./utils/authConfig";
-import { AuthProvider } from "./utils/AuthProvider";
-import { ThemeProvider } from "./utils/theme";
-
-const msalInstance = new PublicClientApplication(msalConfig);
-
-ReactDOM.createRoot(document.getElementById("root")).render(
-  <React.StrictMode>
-    <MsalProvider instance={msalInstance}>
-      <AuthProvider>
-        <ThemeProvider>
-          <App />
-        </ThemeProvider>
-      </AuthProvider>
-    </MsalProvider>
-  </React.StrictMode>
-);
-```
+1. Go to [GitHub Actions](https://github.com/Snapdragons-Nursery/react-components/actions)
+2. Click "Publish Package"
+3. Click "Run workflow"
+4. Select version type (patch/minor/major)
+5. Click "Run workflow"
 
-### 7. Create Navbar Component
-
-Create `src/components/Navbar.jsx`:
-
-```javascript
-import React, { useState, useEffect } from "react";
-import { AuthButtons } from "@snapdragonsnursery/react-components";
-import { useAuth } from "../utils/AuthProvider";
-import { useTheme } from "../utils/theme";
-
-const Navbar = () => {
-  const { account, userRole, instance } = useAuth();
-  const { theme, setTheme } = useTheme();
-  const [authState, setAuthState] = useState({
-    isAuthenticated: !!account,
-    accountsCount: account ? 1 : 0,
-    account,
-    instance,
-  });
-
-  useEffect(() => {
-    setAuthState({
-      isAuthenticated: !!account,
-      accountsCount: account ? 1 : 0,
-      account,
-      instance,
-    });
-  }, [account, instance]);
+### Manual Commands
 
-  return (
-    <nav className="bg-white dark:bg-gray-800 shadow-md sticky top-0 z-40 px-4 py-2 flex justify-between items-center">
-      <div className="flex items-center space-x-4">
-        <span className="font-bold text-lg text-gray-800 dark:text-gray-100">
-          Your App Name
-        </span>
-      </div>
-      <div className="flex items-center space-x-4">
-        <AuthButtons
-          theme={theme}
-          setTheme={setTheme}
-          authState={authState}
-          setAuthState={setAuthState}
-        />
-      </div>
-    </nav>
-  );
-};
+```bash
+# Just bump version
+npm run version:patch
+npm run version:minor
+npm run version:major
 
-export default Navbar;
+# Bump and publish
+npm run publish:patch
+npm run publish:minor
+npm run publish:major
 ```
 
-### 8. Use in Your App
-
-Update `src/App.jsx`:
-
-```javascript
-import Navbar from "./components/Navbar";
+### Pre-release Versions (Beta)
 
-function App() {
-  return (
-    <>
-      <Navbar />
-      {/* Your app content */}
-    </>
-  );
-}
+```bash
+# Create beta version
+npm run publish:prepatch
+npm run publish:preminor
+npm run publish:premajor
 
-export default App;
+# Install beta in consuming apps
+npm install @snapdragonsnursery/react-components@beta
 ```
 
-## Usage
+## Version Types
 
-Once setup is complete, the AuthButtons component will:
+| Type | Example | Use Case |
+|------|---------|----------|
+| **patch** | 1.1.0 → 1.1.1 | Bug fixes, documentation |
+| **minor** | 1.1.0 → 1.2.0 | New features, backward compatible |
+| **major** | 1.1.0 → 2.0.0 | Breaking changes |
+| **prepatch** | 1.1.0 → 1.1.1-0 | Beta patch release |
+| **preminor** | 1.1.0 → 1.2.0-0 | Beta minor release |
+| **premajor** | 1.1.0 → 2.0.0-0 | Beta major release |
 
-- Show a user icon when not authenticated (clickable to login)
-- Show user profile picture or initials when authenticated
-- Provide a dropdown menu with theme toggle and logout option
-- Handle all authentication flows automatically
+## Release Checklist
 
-## LandingPage Component
+Before releasing:
 
-The LandingPage component provides a professional landing page for Microsoft authentication flows.
+- [ ] All changes committed and pushed
+- [ ] Tests pass (if configured)
+- [ ] Documentation updated
+- [ ] Version type selected (patch/minor/major)
+- [ ] NPM token configured (for GitHub Actions)
 
-### Quick Start
-
-```jsx
-import { LandingPage } from '@snapdragonsnursery/react-components';
+## Troubleshooting
 
-function App() {
-  const handleSignIn = () => {
-    // Implement your Microsoft authentication logic
-    console.log('Sign in clicked');
-  };
+### Common Issues
 
-  return (
-    <LandingPage
-      logoUrl="https://your-logo-url.png"
-      appName="Your Application"
-      appDescription="Manage your application efficiently"
-      onSignIn={handleSignIn}
-      companyName="Your Company"
-    />
-  );
-}
+**"Working directory not clean"**
+```bash
+git add .
+git commit -m "Prepare for release"
 ```
 
-### Props
-
-| Prop | Type | Required | Default | Description |
-|------|------|----------|---------|-------------|
-| `logoUrl` | `string` | ✅ | - | URL to your company logo |
-| `appName` | `string` | ✅ | - | Name of your application |
-| `appDescription` | `string` | ❌ | "Manage your application efficiently" | App description |
-| `onSignIn` | `function` | ❌ | `() => console.log('Sign in clicked')` | Sign-in callback |
-| `companyName` | `string` | ❌ | "Your Company" | Company name for footer |
-| `backgroundColor` | `string` | ❌ | Blue gradient | CSS background value |
-| `cardClassName` | `string` | ❌ | `""` | Additional CSS classes |
-
-### Features
+**"Not on main branch"**
+```bash
+git checkout main
+git pull origin main
+```
 
-- **Framework Agnostic**: Uses inline styles for maximum compatibility
-- **Responsive Design**: Works on all device sizes
-- **Microsoft Integration**: Official Microsoft logo and branding
-- **Customizable**: Configurable logo, colors, and branding
-- **Accessible**: Proper semantic HTML and keyboard navigation
+**"NPM authentication failed"**
+- Check GitHub Secrets → NPM_TOKEN
+- Verify token has publish permissions
 
-For detailed documentation, see [LANDING_PAGE_DOCUMENTATION.md](./LANDING_PAGE_DOCUMENTATION.md).
+**"Version already exists"**
+```bash
+npm run release:minor  # Use different version type
+```
 
-## Troubleshooting
+## Support
 
-### Common Issues
+For issues with components or release process:
+1. Check component documentation
+2. Review [Release Guide](./RELEASE.md)
+3. Check GitHub Actions logs
+4. Contact the development team
 
-1. **Blank icon**: Ensure Tailwind CSS is properly configured and included in your build
-2. **Authentication errors**: Check that all MSAL dependencies are installed and providers are set up correctly
-3. **Theme not working**: Ensure ThemeProvider is wrapping your app and `darkMode: 'class'` is set in Tailwind config
+## Contributing
 
-### Required File Structure
+1. Make changes in feature branch
+2. Test locally
+3. Create pull request
+4. Merge to main
+5. Release using one of the methods above
 
-```
-src/
-├── utils/
-│   ├── authConfig.js
-│   ├── AuthProvider.jsx
-│   └── theme.jsx
-├── components/
-│   └── Navbar.jsx
-├── main.jsx
-├── App.jsx
-└── index.css
-```
+---
 
-For questions or contributions, contact the Snapdragons development team.
+**Current Version**: 1.1.0  
+**Last Updated**: January 2024

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@snapdragonsnursery/react-components",
-  "version": "1.1.0",
+  "version": "1.1.1",
   "description": "",
   "main": "src/index.js",
   "scripts": {

package/src/ChildSearchModal.jsx

@@ -105,8 +105,11 @@ const ChildSearchModal = ({
 
     try {
       // Get access token
+      const apiBaseUrl = process.env.VITE_COMMON_API_BASE_URL || "https://snaps-common-api.azurewebsites.net";
+      const apiScope = apiBaseUrl.replace(/^https?:\/\//, "api://") + "/.default";
+      
       const response = await instance.acquireTokenSilent({
-        scopes: ["api://your-api-scope/.default"], // Update with your actual API scope
+        scopes: [apiScope],
         account: accounts[0],
       });