# GOV-GUI Component Library

## Overview

GOV-GUI is a comprehensive web component library designed to enhance the user experience across the 1Gov/1Citizen Portal of Botswana. This library standardizes the graphical user interface across various government services, ensuring a consistent, accessible, and high-quality user experience that reflects the Botswana Government brand.

Built with Stencil.js, these web components work seamlessly across all modern JavaScript frameworks (Angular, React, Vue, Ember) and vanilla JavaScript projects.

## Project Mission

GOV-GUI aims to solve the interface fragmentation issue in the 1Gov/1Citizen Portal by providing a unified component library. As the portal is built using a microservice architecture with contributions from various 100% citizen-owned companies, GOV-GUI ensures consistent UI/UX across all services while maintaining web accessibility standards and brand identity.

## Installation

```bash
npm install gov-gui
```

## Usage

### Basic Integration

Import and register the components in your main JavaScript file:

```javascript
// For JavaScript projects
import { defineCustomElements } from 'gov-gui/loader';
defineCustomElements(window);
```

After registration, you can use any component in your HTML:

```html
<gov-button label="Click Me"></gov-button>
```

### Framework-Specific Integration

#### React (JavaScript)

```jsx
import React from 'react';
import { defineCustomElements } from 'gov-gui/loader';

// Register components once at the application root
defineCustomElements(window);

function App() {
  return (
    <div>
      <gov-button label="Click Me"></gov-button>
    </div>
  );
}
```

#### React (TypeScript / TSX)

```tsx
import React from 'react';
import { JSX as GovGuiJSX } from 'gov-gui';
declare module 'react' {
  namespace JSX {
    interface IntrinsicElements extends GovGuiJSX.IntrinsicElements {}
  }
}
function App() {
  return (
    <div>
      <gov-button label="Click Me"></gov-button>
    </div>
  );
}
```

#### Angular

In `main.ts`:
```typescript
import { defineCustomElements } from 'gov-gui/loader';
defineCustomElements(window);
```

In `app.module.ts`:
```typescript
import { CUSTOM_ELEMENTS_SCHEMA, NgModule } from '@angular/core';

@NgModule({
  // other configurations
  schemas: [CUSTOM_ELEMENTS_SCHEMA]
})
export class AppModule {}
```

#### Vue

In `main.js`:
```javascript
import { defineCustomElements } from 'gov-gui/loader';
defineCustomElements(window);
```

#### Ember

In `app/index.html`:
```html
<script src="node_modules/gov-gui/dist/gov-gui/gov-gui.esm.js"></script>
```

Or in your application code:
```javascript
import { defineCustomElements } from 'gov-gui/loader';
defineCustomElements(window);
```

## Available Components

GOV-GUI offers a rich set of components designed for government service interfaces:

- **Layout Components**: `gov-layout`, `gov-container`, `gov-row`, `gov-box`,`gov-topbar`, `gov-sidebar`,
- **Components**:  `gov-menubar`, `gov-breadcrumb`, `gov-tabs`,`gov-form`, `gov-input`, `gov-checkbox`, `gov-radiobutton`, `gov-dropdown`, `gov-combo-box`, `gov-date-time-picker`, `gov-alert`, `gov-modal`, `gov-toaster`, `gov-tooltip`, `gov-popups`,`gov-table`, `gov-pagination`, `gov-chart`, `gov-badge`, `gov-avatar`, `gov-button`, `gov-accordion`, `gov-stepper`, `gov-slider`, `gov-switcher`, `gov-chip`, `gov-choice-chips`, `gov-segmented-chips`, `gov-icon`, `gov-upload`, `gov-calender`

## TypeScript Support

For TypeScript projects, especially those using React with TSX files, GOV-GUI provides full type definitions. To use components in TSX files without TypeScript errors:

1. Import and Declare the intrinsic element once in your application's entry point:

  ```tsx
    import { JSX as GovGuiJSX } from 'gov-gui';
    declare module 'react' {
      namespace JSX {
        interface IntrinsicElements extends GovGuiJSX.IntrinsicElements {}
      }
    }
  ```

2. Now you can use any GOV-GUI component in your TSX files without type errors.

## Development

To contribute to GOV-GUI:

```bash
git clone [repository-url]
cd gov-gui
npm install
npm start
```

To build for production:
```bash
npm run build
```

To run tests:
```bash
npm test
```

## License

[License information]

## About the 1Gov/1Citizen Portal

The 1Gov/1Citizen Portal is a key initiative by the Government of Botswana to digitize government services. Built on a microservice architecture, it improves accessibility, efficiency, and transparency in public service delivery through digital transformation.