Kinetic SMB React Components

React component library containing Windstream's Kinetic SMB components for header and footer, matching the official Windstream Business website design. This library can be used both as an npm package and as a script tag for WordPress integration.

Components

Header Component

• Main navigation header with responsive design
• Desktop and mobile layouts
• Features:
  • Customer service number display
  • Contact number
  • My Account button
  • Navigation menu with dropdowns
  • Offers section with notification dot
  • Gradient call-to-action button
  • Mobile burger menu

Footer Component

• Comprehensive footer with responsive design
• Three main sections:
  1. Main Links Section
     • 6-column grid layout on desktop
     • Collapsible sections on mobile
     • Categories: Services, Industries, Resources, Company, Contact Us, Other Links
     • Interactive hover states
  2. Legal Links Section
     • Horizontal layout with separators on desktop
     • Row format with pipe separators on mobile
     • Social media icons (LinkedIn, Facebook, YouTube)
     • Copyright text
  3. Disclaimer Section
     • Legal text with proper typography
     • Responsive padding and spacing

Configuration System

The library uses a centralized App.Config system for managing environment settings and WordPress API credentials. This eliminates the need to pass credentials to individual components.

Environment Variables

For security, the library supports environment variables for configuration. Create a .env.local file in the root directory:

# WordPress API Configuration
WP_API_BASE_URL=https://www.kineticbusiness.com
WP_API_AUTH_TOKEN=your-base64-encoded-auth-token-here

# Environment (development, staging, production, local)
NEXT_PUBLIC_NODE_ENV=development

# Segment Analytics (optional)
SEGMENT_WRITE_KEY=your-segment-write-key-here

Security Notes:

• Never commit .env.local files to version control
• Use different credentials for different environments
• The .env.example file shows the required variables without real values
• For production, use proper secret management systems

App.Config Usage

import { KineticSMB } from '@windstream/kinetic-smb-react-components';

// Initialize configuration before using components
KineticSMB('init', null, null, {
  environment: 'development', // or 'production', 'staging', 'local'
  wpApiBaseUrl: 'https://www.kineticbusiness.com',
  wpApiAuthToken: 'your-base64-encoded-auth-token',
  segmentWriteKey: 'your-segment-write-key' // optional
});

Environment Mappings

• development: Uses dev.kineticbusiness.com
• production: Uses www.kineticbusiness.com
• staging: Uses dev.kineticbusiness.com (same as development)
• local: Uses dev.kineticbusiness.com (same as development)

Installation

NPM Package

npm install @windstream/kinetic-smb-react-components

Script Tag (WordPress)

<!-- Import CSS -->
<link rel="stylesheet" href="https://unpkg.com/@windstream/kinetic-smb-react-components@latest/dist/style.css">

<!-- Import React and ReactDOM -->
<script crossorigin src="https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script crossorigin src="https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>

<!-- Import Kinetic SMB Components -->
<script src="https://unpkg.com/@windstream/kinetic-smb-react-components@latest/dist/kinetic-smb-react-components.umd.js"></script>

Usage

NPM Package

import { Header, Footer } from '@windstream/kinetic-smb-react-components'
import '@windstream/kinetic-smb-react-components/styles.css'

// Initialize configuration
import { ComponentConfig, Environment } from '@windstream/kinetic-smb-react-components'
ComponentConfig.setConfig({
  environment: Environment.Development,
  wpApiAuthToken: 'your-token',
  wpApiBaseUrl: 'https://www.kineticbusiness.com'
});

// Header Component
<Header 
  customerServiceNumber="1-833-241-0100"
  callNowNumber="1-855-439-2889"
  onPhoneClick={() => {}}
  onMyAccountClick={() => {}}
/>

// Footer Component
<Footer />

Script Tag (WordPress)

<div id="header"></div>
<div id="footer"></div>

<script>
  document.addEventListener('DOMContentLoaded', function() {
    // Initialize configuration
    KineticSMB('init', null, null, {
      environment: 'development',
      wpApiAuthToken: 'your-base64-encoded-auth-token',
      wpApiBaseUrl: 'https://www.kineticbusiness.com'
    });

    // Method 1: Using React.createElement
    ReactDOM.render(
      React.createElement(window.KineticSMBReactComponents.Header),
      document.getElementById('header')
    );

    ReactDOM.render(
      React.createElement(window.KineticSMBReactComponents.Footer),
      document.getElementById('footer')
    );

    // Method 2: Using mount functions (easier)
    // window.KineticSMBMount.Header('header', {
    //   onPhoneClick: () => alert('Phone clicked!'),
    //   onMyAccountClick: () => alert('My Account clicked!')
    // });
    // window.KineticSMBMount.Footer('footer');
  });
</script>

Global Variables Available

When using the script tag, the following global variables are available:

• window.KineticSMBReactComponents.Header - Header component
• window.KineticSMBReactComponents.Footer - Footer component
• window.KineticSMBMount.Header(containerId, props) - Mount Header to container
• window.KineticSMBMount.Footer(containerId, props) - Mount Footer to container

Development

Setup Environment Variables

⚠️ Required: You must set up environment variables before running the application.

The application uses dotenv-webpack to load environment variables in the browser during development.

1. Copy .env.example to .env.local:

   cp .env.example .env.local

2. Update .env.local with your actual values:

   WP_API_BASE_URL=https://www.kineticbusiness.com
   WP_API_AUTH_TOKEN=your-actual-base64-token
   NEXT_PUBLIC_NODE_ENV=development

3. Start development server:

   npm run dev

Note: The application will not work without proper environment variables set up. See .env.example for the required format. The webpack configuration automatically loads .env.local in development mode.

Development Commands

# Install dependencies
npm install

# Start webpack dev server with hot reload (recommended for development)
npm run dev

# Alternative: Build and serve static files
npm run dev:build

# Build the library for production
npm run build

# Test the components locally (static server)
npm start

Development Workflow

1. Hot Reload Development (Recommended):

   npm run dev

   • Starts webpack dev server at http://localhost:3030
   • Hot reload enabled - changes to components auto-refresh
   • Renders App.tsx component with header and footer
   • Source maps for debugging
   • No build step required - instant feedback

2. Static Build Testing:

   npm run dev:build

   • Builds the library and starts static server
   • Uses test/index.html for testing
   • Good for testing production builds

File Structure

src/
├── components/
│   ├── header/
│   │   ├── index.tsx
│   │   └── blocks/
│   │       └── burger-menu/
│   │           ├── desktop/
│   │           │   └── index.tsx
│   │           └── mobile/
│   │               └── index.tsx
│   ├── footer/
│   │   ├── index.tsx
│   │   └── blocks/
│   │       ├── main-links/
│   │       │   └── index.tsx
│   │       ├── legal-links/
│   │       │   └── index.tsx
│   │       └── disclaimer/
│   │           └── index.tsx
│   └── core/
│       ├── button/
│       │   └── index.tsx
│       ├── input/
│       │   └── index.tsx
│       ├── link/
│       │   └── index.tsx
│       └── text/
│           └── index.tsx
├── config/
│   ├── index.ts          # App.Config implementation
│   └── type.ts           # Configuration types
├── store/
│   └── wordpress/
│       ├── index.ts      # WordPress data store
│       └── types.ts      # Store types
├── services/
│   └── cms-api/
│       └── index.ts      # WordPress API integration
├── styles/
│   └── tailwind.css
├── utils/
│   └── index.ts
├── App.tsx          # Development app component
├── dev.tsx          # Development entry point
├── index.ts         # Library exports
└── mount.tsx        # Script tag entry point

Design Specifications

Colors

• Primary Blue: #00B9E6
• Text Gray: #2D2926
• Button Gradient:
  • From: #40AFC9
  • To: #007c83

Typography

• Font sizes: 13px (mobile) to 15px (desktop)
• Font weights: Regular (400), Medium (500), Semibold (600)

Breakpoints

• Mobile: < 768px
• Desktop: ≥ 768px

Testing

Local Development

The project includes a test server to preview components locally:

# Build and start test server
npm run dev

# Or just start the test server (after building)
npm start

This will start a server at http://localhost:3030 with a test page showing the header and footer components.

Test Files

• test/index.html - Test page for component library
• test/remote.html - Test page for cart application integration
• test/server.js - Simple HTTP server for local testing

Build Output

The build process generates:

• dist/kinetic-smb-react-components.umd.js - UMD bundle for script tag usage (esbuild)
• dist/kinetic-smb-react-components.es.js - ES module for npm package usage (esbuild)
• dist/kinetic-smb-react-components.min.js - Production UMD bundle (webpack)
• dist/style.css - Compiled CSS with Tailwind styles
• dist/index.d.ts - TypeScript declarations

Build Options

• esbuild (faster, recommended): npm run build
• webpack (more features): npm run build:webpack

Migration from Credentials System

If you're migrating from the old credentials system:

Before (Old System)

const credentials = {
  environment: 'development',
  apiAuthToken: 'your-token'
};

<Header credentials={credentials} />
<Footer credentials={credentials} />

After (New App.Config System)

// Initialize once
KineticSMB('init', null, null, {
  environment: 'development',
  wpApiAuthToken: 'your-token',
  wpApiBaseUrl: 'https://www.kineticbusiness.com'
});

// Use components without credentials
<Header />
<Footer />

Security Best Practices

1. Environment Variables: All sensitive data is managed through environment variables
2. No Hardcoded Credentials: The codebase contains no hardcoded credentials or secrets
3. Never Commit Secrets: Ensure .env.local files are in .gitignore
4. Different Environments: Use different credentials for dev, staging, and production
5. Secret Management: For production, use proper secret management systems
6. Token Rotation: Regularly rotate API tokens and credentials

Best Practices

1. Component Organization

   • Modular component structure
   • Separate mobile and desktop implementations
   • Reusable utility functions

2. Styling

   • Tailwind CSS for styling
   • Responsive design patterns
   • Consistent color usage
   • Proper spacing and alignment

3. Accessibility

   • ARIA labels for interactive elements
   • Keyboard navigation support
   • Proper heading hierarchy

4. Performance

   • Optimized SVG icons
   • Conditional rendering
   • Efficient state management

Contributing

Please refer to our contributing guidelines for details on our code of conduct and the process for submitting pull requests.