npm package: @inmotioncloud/shared-components
Description: Shared React components for InMotion Cloud applications, including Header, Footer, Button, and SocialLinks components with built-in Tailwind CSS styling.
Latest version: 0.3.0

# @inmotioncloud/shared-components

Shared React components for InMotion Cloud applications, including Header, Footer, Button, and SocialLinks components with built-in Tailwind CSS styling.

## Installation

### NPM Package

```bash
npm install @inmotioncloud/shared-components
```

### Git Submodule

To add this repository as a git submodule:

```bash
git submodule add https://github.com/inmotioncloud/imcloud-shared-components.git src/shared-components
```

To clone a repository that already has this submodule:

```bash
git clone --recurse-submodules <your-repo-url>
```

Or if you've already cloned the repository:

```bash
git submodule init
git submodule update
```

To update the submodule to the latest version:

```bash
git submodule update --remote
```

## Requirements

### Peer Dependencies

- `react` ^19.0.0
- `react-dom` ^19.0.0
- `react-router-dom` ^6.0.0 || ^7.0.0

### Tailwind CSS

This package uses Tailwind CSS classes. Ensure your project has Tailwind CSS configured with the following CSS variables for theming:

```css
:root {
  --primary: /* your primary color */;
  --primary-foreground: /* your primary foreground color */;
  --background: /* your background color */;
  --ring: /* your focus ring color */;
  /* ... other Tailwind CSS variables */
}
```

## Usage

### Header

A responsive header component with navigation, mobile menu support, and customizable sections.

```tsx
import { Header } from "@inmotioncloud/shared-components";

function App() {
  return (
    <Header
      sections={[
        { id: "features", label: "Features" },
        { id: "pricing", label: "Pricing" },
      ]}
      supportHref="/support"
      blogHref="/blog"
      ctaLabel="Get Started"
      onCtaClick={() => console.log("CTA clicked")}
    />
  );
}
```

#### Header Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `sections` | `HeaderSection[]` | Default sections | Navigation sections |
| `supportHref` | `string \| null` | `"/support"` | Support link URL |
| `supportLabel` | `string` | `"Support"` | Support link text |
| `blogHref` | `string \| null` | `"/blog"` | Blog link URL |
| `blogLabel` | `string` | `"Blog"` | Blog link text |
| `ctaLabel` | `string` | `"Sign Up For Updates"` | CTA button text |
| `onSectionNavigate` | `(sectionId: string) => void` | - | Custom section navigation handler |
| `onCtaClick` | `() => void` | - | CTA button click handler |
| `logoSrc` | `string \| object` | Default logo | Logo image source |
| `logoAltText` | `string` | `"IMHCloud Logo"` | Logo alt text |
| `className` | `string` | - | Additional header classes |
| `containerClassName` | `string` | - | Container classes |
| `navLinkClassName` | `string` | - | Navigation link classes |

### Footer

A footer component with social links, legal links, and customizable content.

```tsx
import { Footer } from "@inmotioncloud/shared-components";

function App() {
  return (
    <Footer
      title="My Company"
      tagline="Building the future"
      copyright="Copyright 2025 My Company"
    />
  );
}
```

#### Footer Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `title` | `ReactNode` | `"InMotion Cloud"` | Footer title |
| `tagline` | `ReactNode` | `"The AI First Managed Cloud Platform"` | Footer tagline |
| `additionalSocialLinks` | `AdditionalSocialLink[]` | - | Additional social links |
| `copyright` | `ReactNode` | Default copyright | Copyright text |
| `legalLinks` | `LegalLink[]` | Default legal links | Legal links |
| `legalNotice` | `ReactNode` | Default notice | Legal notice text |
| `className` | `string` | - | Additional footer classes |
| `containerClassName` | `string` | - | Container classes |

### Button

A versatile button component with multiple variants and sizes using `class-variance-authority`.

```tsx
import { Button } from "@inmotioncloud/shared-components";

function App() {
  return (
    <>
      <Button variant="primary">Primary Button</Button>
      <Button variant="outline" size="lg">Large Outline</Button>
      <Button variant="ghost" asChild>
        <a href="/link">Link Button</a>
      </Button>
    </>
  );
}
```

#### Button Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `variant` | `"default" \| "destructive" \| "outline" \| "secondary" \| "ghost" \| "link" \| "hero" \| "primary" \| "cta" \| "nav"` | `"default"` | Button style variant |
| `size` | `"default" \| "sm" \| "lg" \| "icon"` | `"default"` | Button size |
| `asChild` | `boolean` | `false` | Render as child element |

### SocialLinks

A social media links component with built-in icons for common platforms.

```tsx
import { SocialLinks, defaultSocialLinks } from "@inmotioncloud/shared-components";

function App() {
  return (
    <SocialLinks
      align="center"
      iconSize="w-6 h-6"
      additionalLinks={[
        {
          label: "Discord",
          href: "https://discord.gg/example",
          icon: <MyDiscordIcon />,
        },
      ]}
    />
  );
}
```

#### SocialLinks Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `additionalLinks` | `AdditionalSocialLink[]` | - | Additional social links with custom icons |
| `align` | `"left" \| "center" \| "right"` | `"center"` | Alignment of social links |
| `iconSize` | `string` | `"w-5 h-5"` | Tailwind classes for icon size |
| `gap` | `string` | `"gap-4"` | Tailwind classes for spacing |
| `className` | `string` | - | Additional container classes |

#### Built-in Platforms

The component includes icons for: YouTube, X (Twitter), LinkedIn, Instagram, Reddit, and Facebook.

## Building

```bash
npm run build
```

This compiles TypeScript and copies assets to the `dist` directory.

## Changelog

### 0.3.0 (2026-02-12)
- Add Chat widget component

### 0.1.9 (2025-12-10)
- Update package version

### 0.1.8 (2025-12-10)
- Update npm version
- Add managed-services to header navigation

### 0.1.7 (2025-12-10)
- Update package version number

### 0.1.6 (2025-12-10)
- Update build version
- Revert back to React 19 peer dependencies

### 0.1.5 (2025-12-10)
- Temporarily revert to React 18 for Lovable compatibility

### 0.1.4 (2025-12-08)
- Add extra legal links to footer (DPA, Accessibility Statement, Legal Inquiries, Do Not Sell My Personal Information, Limit Use of Sensitive Personal Information)
- Update package.json configuration

### 0.1.3 (2025-11-21)
- Fix ADA compliance changes
- Add cookie settings button to footer
- Fix dependencies

### 0.1.2 (2025-11-06)
- Change branding from "IMCloud" to "InMotion Cloud"
- Update header with new branding
- Update package version

### 0.1.1 (2025-11-04)
- Add mobile header with responsive hamburger menu
- Update build process

### 0.1.0 (2025-10-30)
- Initial release
- Export Header, Footer, and Button components
- Add react-router-dom shim for compatibility
- Add asset copy script for build process
- Fix logo imports
- Update scrollTo methods for smooth navigation
- Rely on button variant for CTA styling

## License

Proprietary - InMotion Hosting, Inc.