open-index/open-npm huggingface dataset:
npm package: @gfed-medusa/sf-lib-account
Description: This package contains all account related components, types, and other resources shared across the GFED Medusa Storefront ecosystem. It is primarily consumed by the `mf-account`, but can also be used by other frontend MFEs.
Latest version: 2.1.5

# GFED Medusa Storefront Account Library

This package contains all account related components, types, and other resources shared across the GFED Medusa Storefront ecosystem.
It is primarily consumed by the `mf-account`, but can also be used by other frontend MFEs.

## Installation

Install the package from npm:

```bash
pnpm add @gfed-medusa/sf-lib-account
```

For monorepo or local development, you can use the workspace directive to ensure installation of the latest version locally:

```json
{
  "dependencies": {
    "@gfed-medusa/sf-lib-account": "workspace:*"
  }
}
```

## Usage

Import components and other resources into your application:

```tsx
import { AccountInfo } from '@gfed-medusa/sf-lib-account/components/account-info';
import { retrieveCustomer } from '@gfed-medusa/sf-lib-account/lib/data/customer';
```

## Codegen

To generate GraphQL types, ensure that `BFF_URL` is defined in your `.env` file and then run:

```bash
pnpm codegen
```
npm package: @gfed-medusa/sf-lib-checkout
Description: This is the checkout library for the GFED Medusa Storefront stack. It contains components, utilities, types, and other resources specific to the carts, orders, and checkout pages.
Latest version: 3.3.0

# GFED Medusa Storefront Checkout Library

This is the checkout library for the GFED Medusa Storefront stack. It contains components, utilities, types, and other resources specific to the carts, orders, and checkout pages.

## Installation

Install the package from npm:

```bash
pnpm add @gfed-medusa/sf-lib-checkout
```

For monorepo or local development, you can use the workspace directive to ensure installation of the latest version locally:

```json
{
  "dependencies": {
    "@gfed-medusa/sf-lib-checkout": "workspace:*"
  }
}
```

## Usage

Import components, templates, and other resources into your application:

```tsx
import { CartItemSelect } from '@gfed-medusa/sf-lib-checkout/components/cart-item-select';
import { Items } from '@gfed-medusa/sf-lib-checkout/templates/cart/items';
import { repeat } from '@gfed-medusa/sf-lib-home/lib/util/repeat';
```

## Codegen

To generate GraphQL types, ensure that `BFF_URL` is defined in your `.env` file and then run:

```bash
pnpm codegen
```
npm package: @gfed-medusa/sf-lib-common
Description: This is the common library for the GFED Medusa Storefront stack. It contains shared components, utilities, types, and other resources.
Latest version: 3.4.0

# GFED Medusa Storefront Common Library

This is the common library for the GFED Medusa Storefront stack. It contains shared components, utilities, types, and other resources.

## Installation

Install the package from npm:

```bash
pnpm add @gfed-medusa/sf-lib-common
```

For monorepo or local development, you can use the workspace directive to ensure installation of the latest version locally:

```json
{
  "dependencies": {
    "@gfed-medusa/sf-lib-common": "workspace:*"
  }
}
```

## Usage

Import components and other resources into your application:

```tsx
import { Breadcrumbs } from '@gfed-medusa/sf-lib-common/components/breadcrumbs';
import { useToggleState } from '@gfed-medusa/sf-lib-common/lib/hooks/use-toggle-state';
```

## Codegen

To generate GraphQL types, ensure that `BFF_URL` is defined in your `.env` file and then run:

```bash
pnpm codegen
```
npm package: @gfed-medusa/sf-lib-home
Description: This is the home library for the GFED Medusa Storefront stack. It contains components, utilities, types, and other resources specific to the home page.
Latest version: 1.2.5

# GFED Medusa Storefront Home Library

This is the home library for the GFED Medusa Storefront stack. It contains components, utilities, types, and other resources specific to the home page.

## Installation

Install the package from npm:

```bash
pnpm add @gfed-medusa/sf-lib-home
```

For monorepo or local development, you can use the workspace directive to ensure installation of the latest version locally:

```json
{
  "dependencies": {
    "@gfed-medusa/sf-lib-home": "workspace:*"
  }
}
```

## Usage

Import components and other resources into your application:

```tsx
import { FeaturedProducts } from '@gfed-medusa/sf-lib-home/components/featured-products';
import { Hero } from '@gfed-medusa/sf-lib-home/components/hero';
import { ProductRail } from '@gfed-medusa/sf-lib-home/components/product-rail';
```
npm package: @gfed-medusa/sf-lib-products
Description: This library contains products-related components, utilities, types, and data-fetching functions for the GFED Medusa Storefront stack.
Latest version: 1.7.0

# GFED Medusa Storefront Products Library

This library contains products-related components, utilities, types, and data-fetching functions for the GFED Medusa Storefront stack.

## Installation

Install the package from npm:

```bash
pnpm add @gfed-medusa/sf-lib-products
```

For monorepo or local development, use the workspace directive:

```json
{
  "dependencies": {
    "@gfed-medusa/sf-lib-products": "workspace:*"
  }
}
```

## Usage

Import components and resources into your application:

```tsx
import { ProductActions } from '@gfed-medusa/sf-lib-products/components/product-actions';
import { ProductPreview } from '@gfed-medusa/sf-lib-products/components/product-preview';
import { listProducts } from '@gfed-medusa/sf-lib-products/lib/data/products';
```

## Codegen

To generate GraphQL types, ensure that `BFF_URL` is defined in your `.env` file and then run:

```bash
pnpm codegen
```
npm package: @gfed-medusa/sf-lib-ui
Description: This package contains UI primitives for use across the GFED Medusa Storefront monorepo. It is designed to provide reusable building blocks for the applications.
Latest version: 1.3.0

# UI Package

This package contains UI primitives for use across the GFED Medusa Storefront monorepo. It is designed to provide reusable building blocks for the applications.

## Purpose

- Centralize UI primitives for reuse in multiple apps (storefront, admin, etc.)
- Promote consistency and maintainability
- Enable rapid development by sharing common UI patterns

## Adding Components from gfed-registry

You can easily add new components from the [gfed-registry](https://gfed-registry.vercel.app/) using the following command:

```sh
pnpm dlx shadcn@latest add https://gfed-registry.vercel.app/r/breadcrumbs.json
```

Replace the URL with the component you want to add. This will automatically fetch and integrate the component into the UI package.

### Steps

1. Browse [gfed-registry](https://gfed-registry.vercel.app/) for available components.
2. Copy the component link (e.g., `/r/breadcrumbs.json`).
3. Run the command above in the root of the UI package.
4. The component will be added to `src/components` and ready for use.

## Usage

### Styling

Import `@gfed-medusa/sf-lib-ui`'s styles to the consuming app's `globals.css`:

```css
@import '@gfed-medusa/sf-lib-ui/styles.css';
```

Or import via JS on the main layout of the consuming app:

```js
import '@gfed-medusa/sf-lib-ui/styles.css';
```

### Components

Import components from this package in your apps:

```tsx
import { Breadcrumbs } from '@gfed-medusa/sf-lib-ui';
```

## Folder Structure

The most important part of the UI package is the `src` folder, which contains all the code you need to work with:

```ascii
src/
├── components/
│   ├── [base components]           # Single .tsx files from shadcn
│   └── [custom/grouped components] # Folders for components from gfed-registry or custom components
├── lib/                            # Utility functions and helpers
└── styles/                         # Global CSS and style files
```

- **Base components**: Single `.tsx` files in `components/` (added via shadcn)
- **gfed-registry/custom components**: Folders in `components/` for components from gfed-registry or custom project-specific UI elements
- **lib**: Utility functions and helpers
- **styles**: Global CSS and style files

This structure keeps the UI code organized and easy to find.

## Contributing

Feel free to add your own components or update existing ones. For custom additions, place your components in `src/components` and export them as needed.

---

For more details, see the documentation in each component folder or reach out to the team.
npm package: @gfellerph/focusgroup-polyfill
Description: Partial polyfill for the focusgroup attribute (https://open-ui.org/components/focusgroup.explainer/).
Author: Philipp Gfeller
Latest version: 0.0.1-experimental.4

# Focusgroup polyfill

An attempt to create a polyfill for the [`focusgroup` proposal](https://open-ui.org/components/focusgroup.explainer/) by the Open UI Community Group.

## Feature roadmap

- [X] Signalling to assistive technology that alternative keyboard interactions are available
- [ ] Grid option for focusgroup
- [ ] Focus by text search
- [ ] Support for CSS scenarios
npm package: @gfez/eslint-config-react-native
Description: ESLint config for React Native
Latest version: 1.5.1

## Installation

```
yarn add -D @gfez/eslint-config-react-native
```

_Note: We're using `yarn` to install deps. Feel free to change commands to use `npm` 3+ and `npx` if you like_

## Usage

Add to your eslint config (`.eslintrc.js`, or `eslintConfig` field in `package.json`):

```js
module.exports = {
  root: true,
  extends: ['@gfez/react-native', 'plugin:prettier/recommended', 'prettier/react']
};
```
npm package: @gfez/eslint-config-wechat-miniprogram
Description: ESLint config for Wechat Miniprogram
Latest version: 2.0.1

## Installation

```
yarn add -D @gfez/eslint-config-wechat-miniprogram
```

_Note: We're using `yarn` to install deps. Feel free to change commands to use `npm` 3+ and `npx` if you like_

## Usage

Add to your eslint config (`.eslintrc.js`, or `eslintConfig` field in `package.json`):

```js
module.exports = {
  root: true,
  extends: ['@gfez/wechat-miniprogram', 'plugin:prettier/recommended']
};
```