# stepzen-graphiql

[![NPM](https://img.shields.io/npm/v/stepzen-graphiql.svg)](https://www.npmjs.com/package/stepzen-graphiql) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)

## Install

```bash
npm install --save stepzen-graphiql
```

## Basic Usage

```tsx
import { GraphiQLExplorer } from "stepzen-graphiql";
import "stepzen-graphiql/style.css";

function App() {
  const config: GraphiQLConfig = {
    endpoint: "https://your-graphql-endpoint.com/graphql",
  };

  return <GraphiQLExplorer config={config} />;
}
```

## Advanced Usage

You can use the GraphiQLExplorer component directly to customize behavior and layout, including:

Providing a custom GraphQL endpoint via config

Showing/hiding the explorer's URL tab

```tsx
import { GraphiQLExplorer, GraphiQLConfig } from "stepzen-graphiql";
import "stepzen-graphiql/style.css";

function App() {
  const config: GraphiQLConfig = {
    endpoint: "https://your-graphql-endpoint.com/graphql",
    showExplorerHeader: true, // Enables the explorer's URL input tab with toggle
    theme: "g100", // Sets the theme for the GraphiQL interface (white, g10, g90, g100)
  };

  function fetchCostData(query: string) {
    console.log("Fetching cost data: " + query);
  }

  function queryCompleted(result: string) {
    console.log("Fetched data: " + result);
  }

  return (
    <GraphiQLExplorer
      config={config}
      onEditQuery={fetchCostData}
      onFetchResult={queryCompleted}
    >
    </GraphiQLExplorer>
  );
}

export default App;
```

## Configuration

| Prop                 | Type       | Description                                                                    |
| -------------------- | ---------- | -------------------------------------------------------------------------------|
| `endpoint`           | `string`   | GraphQL endpoint to be used in the explorer                                    |
| `showExplorerHeader` | `boolean`  | Toggles visibility of the URL tab with hide/show functionality                 |
| `theme`              | `string`   | Theme configuration for the GraphiQL interface ('white', 'g10', 'g90', 'g100') |
| `onEditQuery`        | `function` | Callback triggered when the query is edited                                    |
| `onFetchResult`      | `function` | Callback triggered when the query result is fetched                            |

## Styling and Fonts

### Custom Font Configuration

This package uses a custom font setup to replace GraphiQL's default fonts (Roboto and Fira Code) with IBM Plex Sans.

#### `src/styles/graphiql-no-fonts.css`

This file contains the complete GraphiQL styles **without** the embedded font definitions. It's a modified version of the original GraphiQL stylesheet where the `@font-face` declarations for Roboto and Fira Code have been removed.

**Purpose:**
- Reduces bundle size by excluding font files
- Allows custom font substitution
- Maintains all GraphiQL styling and layout

#### `src/styles/font-override.css`

This file overrides the font family references to use IBM Plex Sans instead of Roboto:

```css
* {
  font-family: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif !important;
}
```

**Why this approach?**
- Provides consistent branding with IBM Plex Sans
- Falls back to system fonts if IBM Plex Sans is unavailable
- Ensures all GraphiQL components use the same font family

**Note:** Make sure IBM Plex Sans fonts are available in your project. You can install them via:
```bash
npm install @ibm/plex
```

And import them in your application's entry point or global styles.