open-index/open-npm huggingface dataset:
npm package: @grund/constants
Description: The purpose of this package is to handle and enhance environment variables and expose and interface that provides basic use of commond constants in pretty much any project. It is also use internally by many other @grund packages.
Latest version: 0.0.85

# @grund/constants

The purpose of this package is to handle and enhance environment variables and expose and interface that provides basic use of commond constants in pretty much any project. It is also use internally by many other @grund packages.

## Runtime overrides

Environment variables (or in this case; "constants") can be used in two different situations; `application` and `CLI`.

When an application is bundled and shipped we sometimes want to control which variables are overridable and which are not (this of course only applies for `NodeJS` applications - browser constants are not overridable). This is where the packages `@grund/babel-preset` and `@grund/babel-plugin-inline-env` comes in which allows us to do just this.

In a CLI (such as `@grund/cli` or `webpack`) we might want either rely on the running environment variables (e.g. `NODE_ENV`) or we might want to be able to change them for a specific command (e.g. `NODE_ENV=production yarn webpack`).

To solve for these two cases and still be able to use `@grund/constants` wherever, the implementation is as follows;

1. If `GrundContainer` has an instance of the `constants` key, then we will use this as a single source of the constants. This will be the case in most (if not all?) applications.
2. Otherwise (if `constants` is not set), we will use `process.env` as a fallback for all environment values. This is targetted more towards CLI usage. OBS. this also gives the developer the responsibility to make sure that `NODE_ENV` and `RUNTIME_ENV` are set.
npm package: @grund/env
Description: When `@grund/env` is loaded it starts from the cwd (current working directory) and trying to find all `env(.schema).grund` files. It then merges and parses them before injecting them into `process.env`.
Latest version: 0.0.85

## Overview

When `@grund/env` is loaded it starts from the cwd (current working directory) and trying to find all `env(.schema).grund` files. It then merges and parses them before injecting them into `process.env`.

## Usage

Just require/import `@grund/env` wherever you want to load your environment variables

## Parsing steps

1. Find all relevant env(.schema).grund files
2. Load and merge into one concatenated file
3. Tokenize this merged content
4. Parse the tokenized content
5. Execute the parsed content
6. Return the executed content

## TODO

-   Investigate the naming of the files. If we want to, we might allow several naming convensions. E.g. if one feels that `env.grund` is ugly, we might implement support for e.g. `.genv` or whatever - something that is more similar to `.env`.
npm package: @grund/errors
Description: -   A nice resource for getting to know HTTP errors: https://www.loggly.com/blog/http-status-code-diagram/ -   The difference between HTTP "Unauthorized" and "Forbidden": https://stackoverflow.com/questions/3297048/403-forbidden-vs-401-unauthorized-http-r
Latest version: 0.0.85

## HTTP errors

-   A nice resource for getting to know HTTP errors: https://www.loggly.com/blog/http-status-code-diagram/
-   The difference between HTTP "Unauthorized" and "Forbidden": https://stackoverflow.com/questions/3297048/403-forbidden-vs-401-unauthorized-http-responses
npm package: @grund/errors-gql
Description: This package exposes helper functions from two categories;
Latest version: 0.0.85

# @grund/errors-gql

This package exposes helper functions from two categories;

-   parsing - which is performed by the client
-   formatting - which is performed by the graphql server.

## Parsing

The parsing is performed on the client side. It takes in a `GraphQLFormattedError` and throw a `CustomError`.
You can read more about the GraphQL spec here: https://spec.graphql.org/June2018

## Formatting

The formatting is performed on the server side. It takes in a `GraphQLError` that is provided by the graphql server and transformes it into a `GraphQLFormattedError`.
However, this specific formatted error contains such information that the parsing function can transform it into a `CustomError`.
npm package: @grund/events
Description: This package contains two key concepts: `Emitter` and `EventService`. But before we go into these implementations, we will just define the difference between a `listener` and `hook` in grund,
Latest version: 0.0.85

# @grund/events

This package contains two key concepts: `Emitter` and `EventService`. But before we go into these implementations, we will just define the difference between a `listener` and `hook` in grund,

-   `listener`
    -   A listener is a subscribing function that listens to a specific event. The keyword here is that is only _listens_ to the emitter. It should not and cannot alter the outcome of the emitted process.
-   `hook`
    -   A hook is something that is called in a specific lifecycle process, e.g. _beforeCreate_ and _afterUpdate_. This usually takes in one or several objects that is the target of the function (e.g. the object that should be created) and mutates them or returns a formatted version of the object. In other words, a hook can alter the outcome of the emitted process.

## Emitter

The emitter is an object that stores events and callbacks. When creating an emitter one should pass along an `EventSchema` which determines what events are available.

A bit simplified, this is the interface exposed by an emitter.

```ts
interface EventSchema {
    log: (...args: any[]) => any;
}

interface Emitter<EventSchema> {
    on: <Key extends EventSchema>(key: Key, cb: EventSchema[Key]) => any
    once: <Key extends EventSchema>(key: Key, cb: EventSchema[Key]) => any

    off: <Key extends EventSchema>(key: Key, cb: EventSchema[Key]) => any
    offAll: <Key extends EventSchema>(key: Key) => any

    emit: <Key extends EventSchema> => Promise<Array<ReturnType<EventSchema[Key]>>>
}
```

## Event service

The event service is a helper class for other services to extend. The only thing it does is to create two emitters called `listeners` and `hooks`.

So whenever another service wants to implement listeners and hooks, it just extends the `EventService` and can then start using the events. This is used in e.g. `LoggingService` and many of the auth services.

### Usage

```ts
import { Event } from '@grund/events';
import { EventSchema } from './events';

class AnyService extends EventService<EventSchema> {}

const service = new AnyService();

service.listeners.on('test', () => console.log('test fired'));
service.listeners.emit('test');
```
npm package: @grund/fetch
Description: The purpose of this package is twofolded:
Latest version: 0.0.85

# @grund/fetch

The purpose of this package is twofolded:

1. Create a common interface for other grund packages to use.
2. Intercept and throw enhanced errors (from `@grund/errors`)

## Error intercepting

Using the fetch API can be a bit tricky and hard to understand - especially in the context of errors. So we created this wrapper around the `fetch` function which acts in exactly the same way as a normal fetch does - but throws a set of enhanced errors (from `@grund/errors`). These errors are the following:

-   `ConnectionError` - If the native fetch function throws an error and the user is not connected to the internet (using the package `is-online`).
-   `ServerUnavailableError` - If the native fetch function throws an error and the user is online, indicating that the server is unavailable in some way.
-   `BadRequestError` - The fetch got a result on the request, but the status code was `400`.
-   `AuthenticationError` - The status was `401`.
-   `ForbiddenError` - The status was `403`.
-   `UrlNotFoundError` - The status was `404`.

### 401 status

The http error with code `401` has the name `Unauthorized` which essentially means the same as the name for `403` - `Forbidden`.

Quick recap:

-   `authentication` - Find out if you are who you say you are.
-   `authorization` - I know who you are, but are you allowed to do what you want do to?

According to https://stackoverflow.com/questions/3297048/403-forbidden-vs-401-unauthorized-http-responses, the name `Unauthorized` is a but unfortunate since what it means _in practise_ in that you aren't authenticated. This is why this package throws an `AuthenticationError` when it receives the code `401`.

## Native fetch

`fetch` is built into all modern web browsers, but not in NodeJS. So when we want to use this package in a node environment we need to tell it to use a specific fetch instance.

To fix this the package exposes `setNativeFetch`. So in you initiation module in your application, make sure to set your native fetch instance with this function. Examples:

```ts
// NodeJS

import fetch from 'node-fetch';

import { setNativeFetch } from '@grund/fetch';

setNativeFetch(fetch);
```

```ts
// Browser

import { setNativeFetch } from '@grund/fetch';

setNativeFetch(window.fetch);
```
npm package: @grund/gql-client
Description: The purpose of this package is three-folded:
Latest version: 0.0.85

# @grund/gql-client

The purpose of this package is three-folded:

1. Provide types for other gql client packages (e.g. @grund/gql-apollo-client).
2. Provide an interface for setting and retrieving the global clients.
3. Expose some helper functions.

## Generic interface

The initial premise of this package was to also include a common client interface for calling functions such as `query` and `mutate`. This would enable us to use the clients in other packages (e.g. `@grund/stores`) while the actual library performing the query (e.g. `apollo` or `urql`) could be chosen freely.

However, it was discovered that the libraries differ a bit in how they implement these functions. The simplest example is probably that `apollo` calls their mutation function `mutate` while `urql` has named it `mutation`. But there of course are a lot more differences, e.g. how the handle responses, etc.

Currently we haven't solved this theoretically. Currently the only package implemented is `@grund/gql-apollo-client` so this is the only one that works with `@grund/stores`. In the future, though, we probably should consider adding a common interface for performing at least `query` and `mutate`. This shouldn't be that difficult, and would require the different other packages to make their own implementations that fulfills this common interface. But before this is done, we need to consider what cases these functions should be used within. We need to find some common ground in what is possible in different solutions - so that other @grund packages can make use of them, as well as all graphql libraries actually could implement this common interface.
npm package: @grundtone/composables
Description: Vue 3 composables for Grundtone
Latest version: 2.0.0

# @grundtone/composables

Vue 3 composables for Grundtone designsystemet. En samling af genbrugelige kompositionsfunktioner
bygget med Vue Composition API.

## Installation

```bash
npm install @grundtone/composables
# eller
yarn add @grundtone/composables
# eller
pnpm add @grundtone/composables
```

## Brug

```vue
<template>
  <div>
    <button @click="toggle">
      {{ isOpen ? 'Luk' : 'Åbn' }}
    </button>
    <div v-if="isOpen">Indhold</div>
  </div>
</template>

<script setup lang="ts">
  import { useToggle } from '@grundtone/composables';

  const { isOpen, toggle } = useToggle();
</script>
```

## Tilgængelige Composables

### useToggle

En simpel toggle-funktion til at håndtere boolean tilstande.

```typescript
interface UseToggleOptions {
  initialValue?: boolean;
}

interface UseToggleReturn {
  isOpen: Readonly<boolean>;
  toggle: () => void;
  open: () => void;
  close: () => void;
}
```

#### Eksempel

```typescript
const { isOpen, toggle, open, close } = useToggle({ initialValue: false });
```

## Udvikling

1. Installer dependencies:

```bash
pnpm install
```

2. Start udviklingsserver:

```bash
pnpm dev
```

3. Byg pakken:

```bash
pnpm build
```

## Konventioner

### Navngivning

- Brug `use` prefix for alle composables
- Brug camelCase for funktionsnavne
- Brug PascalCase for interface navne

### TypeScript

- Definer interfaces for options og return værdier
- Eksporter typer når de kan være nyttige for brugeren
- Brug generics når det giver mening

### Testing

- Skriv tests for alle composables
- Test edge cases og fejlhåndtering
- Brug Vitest for testing

### Dokumentation

- Dokumenter alle parametre og return værdier
- Inkluder brugseksempler
- Beskriv eventuelle begrænsninger eller kendte problemer

## Licens

MIT

## TypeScript-konfiguration

Denne pakke bruger en specifik `tsconfig.json`, som udvider rodens `tsconfig.build.json`.
Konfigurationen sikrer at kildekoden i `src/` og types i `types/` bliver korrekt transpileret og at
types genereres i `dist/types`.

- outDir: `dist`
- rootDir: `src`
- Types genereres automatisk ved build

Byg pakken med:

```sh
pnpm build
```
npm package: @grundtone/core
Description: Core types and utilities for Grundtone
Latest version: 2.22.0

# @grundtone/core

Foundation package for the [Grundtone](https://grundtone.com) design system. Provides the theme
system, TypeScript types, and presets that all other packages build on.

## Installation

```bash
npm install @grundtone/core
```

## Usage

```typescript
import { createTheme, type ThemeConfig } from '@grundtone/core';

const { light, dark } = createTheme({
  light: {
    colors: {
      primary: '#2563eb',
      background: '#ffffff',
    },
  },
  dark: {
    colors: {
      primary: '#3b82f6',
      background: '#0a0a0a',
    },
  },
});
```

## Exports

### Theme

- `createTheme()` - Create light/dark theme configurations
- `DEFAULT_THEME` - Default theme configuration
- Theme presets

### Types

- `ThemeConfig` - Theme configuration interface
- `ThemeMode` - Light/dark mode type
- `ComponentProps` - Base component props interface
- `Size` - Size variants (`'sm' | 'md' | 'lg'`)
- `Variant` - Component variants (`'primary' | 'secondary' | 'tertiary'`)

### Branding

- Branding configuration and utilities

## Documentation

See [grundtone.com](https://grundtone.com) for full documentation.

## License

MIT
npm package: @grundtone/react-native
Description: React Native theme provider and hooks for Grundtone design system
Latest version: 2.22.0

# @grundtone/react-native

React Native theme provider and hooks for the [Grundtone](https://grundtone.com) design system. Uses
the same semantic tokens as the web packages.

## Installation

```bash
npm install @grundtone/react-native @grundtone/core
```

You do **not** need `@grundtone/design-system` - that package is web-only (SCSS/CSS). For React
Native, tokens are delivered via the theme object.

## Usage

### 1. Wrap your app

```tsx
import { GrundtoneThemeProvider } from '@grundtone/react-native';
import { createTheme } from '@grundtone/core';

const { light, dark } = createTheme({
  light: {
    colors: { primary: '#007aff', background: '#ffffff', text: '#1c1c1e' },
  },
  dark: {
    colors: { primary: '#0a84ff', background: '#000000', text: '#ffffff' },
  },
});

export default function App() {
  return (
    <GrundtoneThemeProvider light={light} dark={dark}>
      <RootNavigator />
    </GrundtoneThemeProvider>
  );
}
```

### 2. Use the theme

```tsx
import { useGrundtoneTheme } from '@grundtone/react-native';

function MyScreen() {
  const { theme, mode, setMode, isDark } = useGrundtoneTheme();

  return (
    <View style={{ backgroundColor: theme.colors.background, flex: 1 }}>
      <Text style={{ color: theme.colors.text }}>Hello</Text>
    </View>
  );
}
```

### Toggle theme

```tsx
const { setMode } = useGrundtoneTheme();
setMode('dark');
```

By default, the provider follows the system color scheme.

## Utilities

- `shadowToRN(shadow)` - Convert web shadow values to React Native shadow styles
- `createBranding()` - Create branding configuration
- `getLogoSource()` - Get logo asset for current theme

## Documentation

See [grundtone.com](https://grundtone.com) for full API reference.

## License

MIT
npm package: @grundtone/shared
Description: Shared utilities and helpers for Grundtone
Latest version: 2.0.0

# @grundtone/shared

Shared utilities package for the Grundtone design system. This package contains common helper
functions, formatters, and validators used across the design system.

## Installation

```bash
pnpm add @grundtone/shared
```

## Usage

```typescript
import { formatCurrency, isValidEmail } from '@grundtone/shared';

// Format currency
const price = formatCurrency(199.99); // "199,99 kr."

// Validate email
const isValid = isValidEmail('test@example.com'); // true
```

## Available Utilities

### Formatting

- `formatCurrency(amount: number, currency?: string)` - Format number as currency
- `formatDate(date: Date | string)` - Format date in Danish locale
- `formatPhoneNumber(phone: string)` - Format phone number in Danish format

### Validation

- `isValidCPR(cpr: string)` - Validate Danish CPR number
- `isValidEmail(email: string)` - Validate email address
- `isValidPhoneNumber(phone: string)` - Validate Danish phone number

## Dependencies

- `@grundtone/core` - Core package with types and constants
- `vue` - Vue.js framework

## Development

1. Install dependencies:

```bash
pnpm install
```

2. Start development server:

```bash
pnpm dev
```

3. Build package:

```bash
pnpm build
```

4. Run tests:

```bash
pnpm test
```

## Contributing

Please refer to the main project README for contribution guidelines.

## TypeScript-konfiguration

Denne pakke bruger en specifik `tsconfig.json`, som udvider rodens `tsconfig.build.json`.
Konfigurationen sikrer at kildekoden i `src/` og types i `types/` bliver korrekt transpileret og at
types genereres i `dist/types`.

- outDir: `dist`
- rootDir: `src`
- Types genereres automatisk ved build

Byg pakken med:

```sh
pnpm build
```
npm package: @grunge-ui/icons-react
Description: An edgier icon library for React
Author: Sergei Grishin
Latest version: 1.0.8

<p align="center">
  <img width="460"src="https://raw.githubusercontent.com/racingrebel/grunge-ui-icons/master/logo.png">
</p>
<h1 align="center">An edgier icon library</h1>

<h2>Directory</h2>

| Icon          | Name          |
|:-------------:| ------------- |
| ![Diamond Icon](https://raw.githubusercontent.com/racingrebel/grunge-ui-icons/master/icons/diamond.svg?sanitize=true "Diamond") | Diamond |
| ![X Thin Icon](https://raw.githubusercontent.com/racingrebel/grunge-ui-icons/master/icons/x-thin.svg?sanitize=true "X Thin") | X Thin |
| ![X Medium Icon](https://raw.githubusercontent.com/racingrebel/grunge-ui-icons/master/icons/x-medium.svg?sanitize=true "X Medium") | X Medium |
| ![Box Cateye Icon](https://raw.githubusercontent.com/racingrebel/grunge-ui-icons/master/icons/box-cateye.svg?sanitize=true "Box Cateye") | Box Cateye |
| ![Cart Icon](https://raw.githubusercontent.com/racingrebel/grunge-ui-icons/master/icons/cart.svg?sanitize=true "Cart") | Cart |
| ![Bolt Icon](https://raw.githubusercontent.com/racingrebel/grunge-ui-icons/master/icons/bolt.svg?sanitize=true "Bolt") | Bolt |
| ![Tachometer Icon](https://raw.githubusercontent.com/racingrebel/grunge-ui-icons/master/icons/tachometer.svg?sanitize=true "Tachometer") | Tachometer |
| ![Wrench Icon](https://raw.githubusercontent.com/racingrebel/grunge-ui-icons/master/icons/wrench.svg?sanitize=true "Wrench") | Wrench |
| ![Snowflake Icon](https://raw.githubusercontent.com/racingrebel/grunge-ui-icons/master/icons/snowflake.svg?sanitize=true "Snowflake") | Snowflake |
| ![LED Chip Icon](https://raw.githubusercontent.com/racingrebel/grunge-ui-icons/master/icons/led-chip.svg?sanitize=true "LED Chip") | LED Chip |
| ![Check Mark Icon](https://raw.githubusercontent.com/racingrebel/grunge-ui-icons/master/icons/check-mark.svg?sanitize=true "Check Mark") | Check Mark |
| ![Dot Icon](https://raw.githubusercontent.com/racingrebel/grunge-ui-icons/master/icons/dot.svg?sanitize=true "Dot") | Dot |
| ![Circle Icon](https://raw.githubusercontent.com/racingrebel/grunge-ui-icons/master/icons/circle.svg?sanitize=true "Circle") | Circle |
| ![Circle Medium Icon](https://raw.githubusercontent.com/racingrebel/grunge-ui-icons/master/icons/circle-medium.svg?sanitize=true "Circle-Medium") | Circle-Medium |
npm package: @grunmouse/perl-style-letter
Description: Модуль для представления чисел в виде строк, с Perl-подобным порядком следования (за Z идёт АА, а за ZZ - AAA).
Author: Rakov
Latest version: 1.0.0

# @grunmouse/perl-letter-style

Модуль для представления чисел в виде строк, с Perl-подобным порядком следования (за Z идёт АА, а за ZZ - AAA).


@class Converter

@constructor\
@param {String} abc - используемый алфавит

@method number(value) - преобразует строку в число\
@param {String} value\
@return {BigInt} 

@method letter(value) - преобразует число в строку\
@param {BigInt|Number} value\
@return {String}
npm package: @grunwaldlab/meta-map-widget
Description: Map widget for the PathogenSurviellance pipeline
Author: Claire Worthy, Zachary Stephen Longiaru Foster
Latest version: 0.1.1

# `meta-map-widget`: a self-contained map widget showing user-selectable metadata
PSMapWidget is a javascript Leaflet widget used to map and analyze locations associated with user-defined metadata.

## Installation and Setup
This repository can be accessed and downloaded from [Github](https://github.com/grunwaldlab/meta-map-widget). There is currently no distribution on NPM, but you can clone this repository and run `npm install`.

## Usage
![alt text](images/pie-chart-example.png)

The widget once run with NPM appears as above. This creates an interactive HTML Leaflet widget (map data provided by OpenStreetMap) which displays the location source of each individual datapoint. The color and size of map markers are determined by user-selected variables from the dropdown. Clusters of nearby points are automatically grouped and represented as pie charts, depending on zoom level. The pie chart markers are representative of the sample data in each respective cluster. Pie charts represent frequencies of the color variable, and the icon size is an average of values of the size variable. 

![alt text](images/popup-example.png)

You can also choose to focus in on individual data points. Selecting an individual marker will bring up a popup with the values of all data associated with that location.

## License
This work is released under the [MIT license](https://github.com/grunwaldlab/metacoder/blob/master/LICENSE).

## Credits
The following people contributed to meta-map-widget: Claire E. Worthy and Zachary S.L. Foster. 

## Funding
This work was supported by USDA funding under the guidance of Dr. Niklaus Grunwald.
npm package: @grupalia/react-native-photo-picker
Description: Provides access to Android's PhotoPicker
Author: rieg-ec
Latest version: 0.6.0

# react-native-photo-picker

Provides access to [Android Photo Picker](https://developer.android.com/training/data-storage/shared/photopicker)

## Installation

```sh
# with npm
npm install @grupalia/react-native-photo-picker

# with yarn
yarn add @grupalia/react-native-photo-picker
```

## Usage


```ts
import RNPhotoPicker from '@grupalia/react-native-photo-picker';

// ...
RNPhotoPicker.launchPicker(options).then((result) => {
  if (result) {
    setImage(result.uri);
  }
});
```


## Contributing

See the [contributing guide](CONTRIBUTING.md) to learn how to contribute to the repository and the development workflow.

## License

MIT

---

Made with [create-react-native-library](https://github.com/callstack/react-native-builder-bob) with [create-react-native-library](https://github.com/callstack/react-native-builder-bob)
npm package: @grupo-loja/vendure-banner-plugin
Description: A vendure plugin that allows you to crate banners for your ecommerce.
Author: Bruno Almeida
Latest version: 1.0.0

# Vendure Banner Plugin

This plugin allows you to create Banners to your 

## Getting started
``` shell
npm i @vendure-osct/banner-plugin
```
1. Add the plugin to your `vendure-config.ts`:

```ts
    ...
     plugins: [
      BannerPlugin,
      AdminUiPlugin.init({
        port: 3002,
        route: 'admin',
        app: compileUiExtensions({
          outputPath: path.join(__dirname, '__admin-ui'),
          extensions: [BannerPlugin.ui],
        }),
      }),
    ...
     ]
     ...
```

2. Run a DB migration to add the new custom fields: https://docs.vendure.io/guides/developer-guide/migrations/#migration-workflow
3. Start the server and login to the admin UI and go to `banners`
4. On the Banner List page, click `Create Banner`
5. Add slug and save
6. Add new itens
7. You should the list of items for your banner.

There are two ways to query your banners:

```gql
query Banners($options: BannerListOptions) {
  banners(options: $options) {
    items {
      updatedAt
      slug
      id
      items {
        id
        link
        updatedAt
        start
        mobile {
          Asset
        }
        end
        createdAt
        asset {
          Asset
        }
      }
    }
  }
}
```

1: Filtering by slug

```gql
{
  "options": {
    "filter": {
      "slug": {
        "eq": "slug"
      }
    }
  }
}
```

2: Filtering by id
```gql
{
  "options": {
    "filter": {
      "id": {
        "eq": "slug"
      }
    }
  }
}
```

At the client side, do not forget to check for the end date whithin banner item to filter for expired banners.
npm package: @grupo-loja/vendure-conect-envios-plugin
Description: A vendure plugin that allows you to use conect envios as shipping solution ecommerce.
Author: Bruno Almeida
Latest version: 1.0.1

# Vendure Banner Plugin

This plugin allows you to create Banners to your 

## Getting started
``` shell
npm i @vendure-osct/banner-plugin
```
1. Add the plugin to your `vendure-config.ts`:

```ts
    ...
     plugins: [
      BannerPlugin,
      AdminUiPlugin.init({
        port: 3002,
        route: 'admin',
        app: compileUiExtensions({
          outputPath: path.join(__dirname, '__admin-ui'),
          extensions: [BannerPlugin.ui],
        }),
      }),
    ...
     ]
     ...
```

2. Run a DB migration to add the new custom fields: https://docs.vendure.io/guides/developer-guide/migrations/#migration-workflow
3. Start the server and login to the admin UI and go to `banners`
4. On the Banner List page, click `Create Banner`
5. Add slug and save
6. Add new itens
7. You should the list of items for your banner.

There are two ways to query your banners:

```gql
query Banners($options: BannerListOptions) {
  banners(options: $options) {
    items {
      updatedAt
      slug
      id
      items {
        id
        link
        updatedAt
        start
        mobile {
          Asset
        }
        end
        createdAt
        asset {
          Asset
        }
      }
    }
  }
}
```

1: Filtering by slug

```gql
{
  "options": {
    "filter": {
      "slug": {
        "eq": "slug"
      }
    }
  }
}
```

2: Filtering by id
```gql
{
  "options": {
    "filter": {
      "id": {
        "eq": "slug"
      }
    }
  }
}
```

At the client side, do not forget to check for the end date whithin banner item to filter for expired banners.
npm package: @grupo-san-cristobal/agm-core
Description: Angular components for Google Maps
Author: Sebastian Holstein
Latest version: 20.0.2

# This is a fork from the original Angular google maps project from sebastian holstein,

We have published the package under our organization since we needed support for most current Angular versions.

We will be maintaining this package in order to provide compatibility with newer Angular versions

We are not planning on adding new features to this package, and we plan to get back to the original angular google maps as soon the maintenance is reestablished on the original package



Angular Google Maps (AGM) Core - Angular 2+ Google Maps components
=========

@agm/core contains solutions for the Google Maps JavaScript Core API.

The sources for this package are in the [angular-google-maps](https://github.com/grupo-san-cristobal/angular-google-maps) repository. Please file issues and pull requests against that repo.
npm package: @grupo-san-cristobal/agm-markerclusterer
Description: Angular Google Maps (AGM) extension for markerclusterer support
Author: Jens Fahnenbruck
Latest version: 20.0.2

# This is a fork from the original Angular google maps project from sebastian holstein,

We have published the package under our organization since we needed support for most current Angular versions.

We will be maintaining this package in order to provide compatibility with newer Angular versions

We are not planning on adding new features to this package, and we plan to get back to the original angular google maps as soon the maintenance is reestablished on the original package


# Marker Clusterer for AGM

-----

this package levereges the [@google/markerclustererplus][markerclustererplus] to add clustering support to
[AGM][agm].

## Installation

@agm/markerclusterer has a peer depedency on [markerclustererplus][markerclustererplus]

```shell
npm install @google/markerclustererplus @agm/markerclusterer --save
# or
yarn add @google/markerclustererplus @agm/markerclusterer
```

## Usage
1. Add assets command to your angular.json
    In your `angular.json` file, go to `projects/<yourproject>/architect/build/options/assets` and add the following line:
    ```json
    {"input": "./node_modules/@google/markerclustererplus/images", "glob": "*", "output": "/images"}
    ```

2. Import the module

    ```typescript
    import { BrowserModule } from '@angular/platform-browser';
    import { NgModule } from '@angular/core';
    import { AppComponent } from './app.component';

    // add these imports
    import { AgmCoreModule } from '@agm/core';
    import { AgmMarkerClustererModule } from '@agm/markerclusterer';

    @NgModule({
      declarations: [
        AppComponent
      ],
      imports: [
        BrowserModule,
        AgmCoreModule.forRoot({
          apiKey: ['YOUR_API_KEY_HERE']
        }),
        AgmMarkerClustererModule
      ],
      providers: [],
      bootstrap: [AppComponent]
    })
    export class AppModule { }
    ```
3. use it in your template

    ```html
    <agm-map style="height: 300px" [latitude]="51.673858" [longitude]="7.815982">
      <agm-marker-cluster imagePath="https://raw.githubusercontent.com/googlemaps/v3-utility-library/master/markerclustererplus/images/m">
        <agm-marker [latitude]="51.673858" [longitude]="7.815982">
        </agm-marker><!-- multiple markers -->
      </agm-marker-cluster>
    </agm-map>
    ```


[markerclustererplus]: https://github.com/googlemaps/v3-utility-library/tree/master/markerclustererplus
[agm]: https://angular-maps.com/
npm package: @grupo-san-cristobal/agm-snazzy-info-window
Description: Angular Google Maps (AGM) package for Snazzy Info Window support
Author: Sebastian Holstein
Latest version: 20.0.2

# This is a fork from the original Angular google maps project from sebastian holstein,

We have published the package under our organization since we needed support for most current Angular versions.

We will be maintaining this package in order to provide compatibility with newer Angular versions

We are not planning on adding new features to this package, and we plan to get back to the original angular google maps as soon the maintenance is reestablished on the original package



Angular Google Maps (AGM) Snazzy Info Window - Angular Google Maps components
=========

@agm/snazzy-info-window is an extension for the @agm/core package that provides solutions for styleable/customizable info windows with the help of ['Snazzy Info Window'](https://github.com/atmist/snazzy-info-window).

The sources for this package are in the [angular-google-maps](https://github.com/grupo-san-cristobal/angular-google-maps) repository. Please file issues and pull requests against that repo.

License: See LICENSE file in this folder.
npm package: @grupo-tiradentes/eslint-config
Description: --- name: ESlint menu: Configs route: '/configs/eslint' ---
Latest version: 0.4.0

---
name: ESlint
menu: Configs
route: '/configs/eslint'
---

import JsonViewer from '@grupo-tiradentes/web/src/JsonViewer'

import defaultConfigs from './.eslintrc'

# eslint-config

## Installation
```sh
yarn add @grupo-tiradantes/eslint-config -D
```

## Default configs
<div>
  {typeof window !== 'undefined' && JsonViewer && (
    <JsonViewer name="default eslint configs" data={ defaultConfigs } />
  )}
</div>
npm package: @grupo-tiradentes/jest-config
Description: --- name: Jest menu: Configs route: '/configs/jest' ---
Latest version: 0.4.0

---
name: Jest
menu: Configs
route: '/configs/jest'
---

import JsonViewer from '@grupo-tiradentes/web/src/JsonViewer'

import defaultConfigs from './jest.config'

# jest-config

## Installation
```sh
yarn add @grupo-tiradantes/jest-config -D
```

## Default configs
<div>
  {typeof window !== 'undefined' && JsonViewer && (
    <JsonViewer name="default jest configs" data={ defaultConfigs } />
  )}
</div>
npm package: @grupo10-pos-fiap/design-system
Description: Design System do Grupo 10 - FIAP
Latest version: 1.0.9

# Design System

Uma biblioteca de componentes React moderna e acessível para criação de interfaces consistentes e escaláveis. Desenvolvido como projeto acadêmico para a Pós-graduação em Engineering Frontend da FIAP.

## Pré-requisitos

Antes de começar, você vai precisar ter instalado em sua máquina as seguintes ferramentas:
[Git](https://git-scm.com), [Node.js](https://nodejs.org/en/).

## Tecnologias

As seguintes ferramentas foram usadas na construção do projeto:

- [React](https://pt-br.reactjs.org/)
- [TypeScript](https://www.typescriptlang.org/)
- [Node.js](https://nodejs.org/en/)
- [Sass](https://sass-lang.com)
- [Lucide React Icons](https://lucide.dev/)
- [Radix UI](https://www.radix-ui.com)
- [Vite](https://vite.dev)

## Instalação

```bash
npm install @grupo10-pos-fiap/design-system
```

## Uso Básico

```jsx
import { Button, Input } from '@grupo10-pos-fiap/design-system';

export default function App() {
  return (
    <div>
      <Button variant="primary">Clique aqui</Button>
      <Input placeholder="Digite algo..." />
    </div>
  );
}
```

## Desenvolvimento

### Executar Localmente

```bash
# Clonar o repositório
git clone https://github.com/grupo-10-pos-fiap/Design-System.git
cd Design-System

# Instalar dependências
npm install

# Desenvolvimento (Vite)
npm run dev

# Storybook (Documentação)
npm run storybook

# Build de produção
npm run build
```

### Documentação Interativa

Acesse nossa documentação completa no Storybook:
**[https://grupo-10-pos-fiap.github.io/Design-System/](https://grupo-10-pos-fiap.github.io/Design-System/?path=/docs/introdução--docs)**

## Contribuição

Contribuições são sempre bem-vindas! Para contribuir:

1. **Faça um Fork** do projeto
2. **Crie uma Branch** para sua feature (`git checkout -b feature/AmazingFeature`)
3. **Commit suas mudanças** (`git commit -m 'Add some AmazingFeature'`)
4. **Push para a Branch** (`git push origin feature/AmazingFeature`)
5. **Abra um Pull Request**

## Suporte e Issues

Encontrou um problema ou tem uma sugestão?

- 📝 [Abra uma Issue](https://github.com/grupo-10-pos-fiap/Design-System/issues)
- 📚 [Consulte a Documentação](https://grupo-10-pos-fiap.github.io/Design-System/?path=/docs/introdução--docs)
- 💬 Entre em contato com a equipe de desenvolvimento

## Licença

Este projeto é desenvolvido para fins acadêmicos como parte do programa de Pós-graduação em Engineering Frontend da FIAP.

---

**Desenvolvido por Grupo 10 - Pós-graduação em Engineering Frontend FIAP**