open-index/open-npm huggingface dataset:
npm package: @grafbase/houdini
Description: Houdini plugin for Grafbase that automatically handles Live Queries and Scalar definitions.
Latest version: 1.0.0

# @grafbase/houdini

Houdini plugin for Grafbase that automatically handles Live Queries and Scalar definitions.

## Getting Started

This setup requires you to already have Houdini installed and configured with SvelteKit.

1. Install the dependencies

```npm
npm install @grafbase/houdini graphql
```

2. Set your environment variables

Add the following to your project `.env`:

```
PUBLIC_GRAFBASE_API_URL=
GRAFBASE_API_KEY=
# If you're using Grafbase Auth you will
# need to configure these shared values:
GRAFBASE_ISSUER_URL=https://grafbase.com
GRAFBASE_JWT_SECRET=
```

3. Update Houdini client

Inside `src/client.ts` you will want to add the `authorization` header

```ts
import { HoudiniClient } from '$houdini'
import { PUBLIC_GRAFBASE_API_URL } from '$env/static/public'

// Token generated by your auth provider: https://grafbase.com/docs/reference/directives#auth
const token = '...'

export default new HoudiniClient({
  url: PUBLIC_GRAFBASE_API_URL,
  fetchParams() {
    return {
      headers: {
        authorization: `Bearer ${token}`
      }
    }
  }
})
```

You will need to authenticate users with a supported [auth provider](https://grafbase.com/docs/auth/providers) and pass that `token` with every request to your backend.

4. Update `houdini.config.js` to include `@grafbase/houdini`:

```js
const config = {
  plugins: {
    'houdini-svelte': {},
    '@grafbase/houdini': {}
  },
  watchSchema: {
    url: 'env:PUBLIC_GRAFBASE_API_URL',
    headers: {
      'x-api-key': 'env:GRAFBASE_API_KEY'
    }
  }
}

export default config
```

5. Subscribe to data changes with the `@live` directive inside `+page.gql`:

```graphql
# Query based on your grafbase/schema.graphql
query GetAllMessages @live {
  messageCollection(first: 100) {
    edges {
      cursor
      node {
        id
        author
        message
        createdAt
      }
    }
  }
}
```

6. Render `@live` query results inside `+page.svelte`:

```svelte
<script lang="ts">
  import type { PageData } from './$houdini';
  export let data: PageData;
  $: ({ GetAllMessages } = data);
</script>

{#if $GetAllMessages.fetching}
	loading...
{:else if $GetAllMessages.errors?.length}
	{JSON.stringify($GetAllMessages)}
{:else}
	{JSON.stringify($GetAllMessages.data)}
{/if}
```
npm package: @grafbase/nextjs-plugin
Description: A Next.js "plugin" that automatically starts the Grafbase CLI.
Latest version: 0.0.2

# @grafbase/nextjs-plugin

A Next.js "plugin" that automatically starts the Grafbase CLI.

## Usage

It's easy as 123!

### Step 1

Install `grafbase` as a `devDependency`:

```bash
npm install -D grafbase @grafbase/nextjs-plugin
```

### Step 2

Add the following to `.env`:

```bash
GRAFBASE_API_URL=http://localhost:4000/graphql
# OR
# NEXT_PUBLIC_GRAFBASE_API_URL=http://localhost:4000/graphql
```

### Step 3

Then inside `next.config.js` import `withGrafbase`, and wrap your exported config:

```ts
/** @type {import('next').NextConfig} */

const { withGrafbase } = require('@grafbase/nextjs-plugin')

const nextConfig = () =>
  withGrafbase({
    reactStrictMode: true,
    swcMinify: true
  })

module.exports = nextConfig
```

Finally run your Next.js app! The Grafbase CLI will be running with your backend.

## Notes

If there is no environment variable the [Grafbase CLI](https://grafbase.com/cli) will not start.
npm package: @graffft-waggle/button
Description: graffft-waggle: a button component
Author: Dan Kreiger
Latest version: 0.0.4-alpha.21

---
filename: /packages/atoms/Icon/Icon.tsx
---

# Icon API

The API documentation of the Icon `Graffft Waggle` component.

## Import

```js
import { Button } from '@graffft-waggle/button';
```

## API

- TODO
npm package: @graffft-waggle/card
Description: graffft-waggle: a card component
Author: Dan Kreiger
Latest version: 0.0.4-alpha.8

---
filename: /packages/molecules/CircleBadge/CircleBadge.tsx
---

# CircleBadge API

The API documentation of the CircleBadge `Graffft Waggle` component.

## Import

```js
import { CircleBadge } from '@graffft-waggle/circle-badge';
```

## Icon

## Required Props

| Name     | Type                            | Description                                 |
| :------- | :------------------------------ | :------------------------------------------ |
| children | `JSX.Element | string | number` | Content that can go inside the circle badge |

## Optional Props

| Name        | Type         | Default    | Description                       |
| :---------- | :----------- | :--------- | :-------------------------------- |
| size        | `string`     | `86px`     | width/height of circle badge      |
| bgColor     | `string`     | `'#fff'`   | background color of circle badge. |
| handleClick | `() => void` | `() => {}` | onClick callback.                 |
| customScss  | `string`     | `''`       | custom scss for wrapper element   |

## Demos

- TODO
npm package: @graffft-waggle/circle-badge
Description: graffft-waggle: a circle-badge component
Author: Dan Kreiger
Latest version: 0.0.4-alpha.3

---
filename: /packages/molecules/CircleBadge/CircleBadge.tsx
---

# CircleBadge API

The API documentation of the CircleBadge `Graffft Waggle` component.

## Import

```js
import { CircleBadge } from '@graffft-waggle/circle-badge';
```

## Icon

## Required Props

| Name     | Type                          | Description                                 |
| :------- | :---------------------------- | :------------------------------------------ |
| children | `JSX.Element\|string\|number` | Content that can go inside the circle badge |

## Optional Props

| Name        | Type         | Default    | Description                       |
| :---------- | :----------- | :--------- | :-------------------------------- |
| size        | `string`     | `86px`     | width/height of circle badge      |
| bgColor     | `string`     | `'#fff'`   | background color of circle badge. |
| handleClick | `() => void` | `() => {}` | onClick callback.                 |
| customScss  | `string`     | `''`       | custom scss for wrapper element   |

## Demos

- TODO
npm package: @graffft-waggle/container
Description: graffft-waggle: a container component
Author: Dan Kreiger
Latest version: 0.0.4-alpha.14

---
filename: /packages/layouts/Container/Container.tsx
---

# Container API

The API documentation of the Container `Graffft Waggle` component.

## Import

```js
import { Container } from '@graffft-waggle/container';
```

## Container

```ts
// see @graffft-waggle/media-query
export type Breakpoint = 'sm' | 'md' | 'lg' | 'xl';

export type Breakpoints = {
  [key in Breakpoint]: number;
};
```

```ts
// see @graffft-waggle/container
type ContainerMaxWidths = {
  [key in Breakpoint]: number; // in px
};
```

## Optional Props

| Name                 | Type                 | Default                     | Description                                                                                           |
| :------------------- | :------------------- | :-------------------------- | :---------------------------------------------------------------------------------------------------- |
| `breakpoints`        | `Breakpoints`        | `defaultBreakpoints`        | object of breakpoints, see `@graffft-waggle/media-query` for `defaultBreakpoints` value               |
| `containerMaxWidths` | `ContainerMaxWidths` | `defaultContainerMaxWidths` | object of container max-widths, see `@graffft-waggle/container` for `defaultContainerMaxWidths` value |
| `customScss`         | `string`             | `''`                        | custom scss                                                                                           |

## Demos

- TODO
npm package: @graffft-waggle/themes-portfolio
Description: graffft-waggle: a portfolio theme
Author: Dan Kreiger
Latest version: 0.0.4-alpha.3

---
filename: /packages/themes/portfolio/index.ts
---

# Portfolio API

The API documentation of the Portfolio `Graffft Waggle` theme.

## Import

```ts
import {
  Colors,
  Gradients,
  media,
  breakpoints,
} from '@graffft-waggle/portfolio';
```

## Portfolio

- TODO

## Demos

- TODO