open-index/open-npm huggingface dataset:
npm package: @lagunovsky/recoil-react-router
Description: A Recoil binding for React Router v6
Author: Ivan Lagunovsky
Latest version: 2.0.0

Recoil React Router
======================

A Recoil binding for React Router requires React 16.8, Recoil 4.0, React Router 6.0 or later

## Installation

```
$ npm install --save @lagunovsky/recoil-react-router
```


## Usage

1) install and import `@lagunovsky/recoil-react-router`
2) create `router` instance using `makeRouter()`
3) use `<RecoilReactRouter router={router} />` instead of `<Router/>`

### Navigation

To change the current location, you'll want to use one of the following:

- `router.history.push` - Pushes a new location onto the history stack
- `router.history.replace` - Replaces the current location with another
- `router.history.go` - Changes the current index in the history stack by a given delta
- `router.history.back` - Navigates one entry back in the history stack
- `router.history.forward` - Navigates one entry forward in the history stack


## API

#### makeRouter

```ts
type Router = {
  state: RecoilValue<{ action: Action, location: Location }>
  history: History
}

function makeRouter(getHistory: () => History = createBrowserHistory, namespace: string = 'router'): Router {}
```

Creates a routing object that contains the current state of the location and history for manipulating the location

---

#### RecoilReactRouter

```ts
type RouterProps = {
  router: Router
  children?: React.ReactNode
  basename?: string
  static?: boolean
}

function RecoilReactRouter(props: RouterProps): React.ReactNode {}
```

Component that synchronizes `recoil`, `history` and `react-router`

---

#### useTimeTraveling()

A hook that allows to use [time travel](https://recoiljs.org/docs/guides/dev-tools#time-travel)


## Example

```typescript jsx
import { makeRouter, RecoilReactRouter, useTimeTraveling } from '@lagunovsky/recoil-react-router'
import { createBrowserHistory } from 'history'
import React from 'react'
import ReactDOM from 'react-dom'
import { Route, Routes } from 'react-router'
import { RecoilRoot, useRecoilValue } from 'recoil'


const router = makeRouter()

router.history.push('/hello')

function Page() {
  const { location } = useRecoilValue(router.state)
  return (
    <div>{location.pathname}</div>
  )
}

function App() {
  useTimeTraveling() // if you want to use time travel

  return (
    <RecoilReactRouter router={router}>
      <Routes>
        <Route path={'*'} element={<Page/>}/>
      </Routes>
    </RecoilReactRouter>
  )
}

ReactDOM.render(<RecoilRoot children={<App/>}/>, document.getElementById('app'))
```
npm package: @lagunovsky/svelte-svg-pre-loader
Description: Prepares SVG for loading with a svelte-loader
Latest version: 1.1.0

![License](https://img.shields.io/github/license/lagunovsky/svelte-svg-pre-loader)
![TypeScript](https://img.shields.io/badge/typescript-%3E%3D4.0.0-blue)
![Tests workflow](https://github.com/lagunovsky/svelte-svg-pre-loader/actions/workflows/publish.yml/badge.svg)

# svelte-svg-pre-loader

Prepares SVG for loading with a svelte-loader

## Installation

```bash
# using npm
npm i -D @lagunovsky/svelte-svg-pre-loader

# using yarn
yarn add -D @lagunovsky/svelte-svg-pre-loader
```

## Usage

```typescript
// webpack.config.ts

import type { Options } from '@lagunovsky/svelte-svg-pre-loader'


module.exports = {
  module: {
    rules: [
      {
        test: /.svg$/,
        use: [
          { loader: 'svelte-loader' },
          { loader: 'svelte-svg-pre-loader', options: { withAction: true } as Options },
        ],
      },
    ],
  },
};
```

```sveltehtml
<!-- index.svelte -->

<Dog width="100px" height="30px"/>
<Cat {action} class="interactive"/> <!-- requires css-modules -->

<script lang="ts">
  import type { SvelteSVGAction } from '@lagunovsky/svelte-svg-pre-loader'

  import Dog from './dog.svg'
  import Cat from './cat.svg'


  const action: SvelteSVGAction = (node) => {
    node.addEventListener('click', () => alert('meow'))
  }
</script>

<style module>
  .interactive {
    cursor: pointer;
  }
</style>
```

## Options

### svgo

[SVGO options](https://github.com/svg/svgo). Some plugins cannot be disabled.

Default: ```{ plugins: [ 'preset-default', 'removeStyleElement', 'removeDimensions'] }```

### withAction

Adds the [use:action](https://svelte.dev/docs#template-syntax-element-directives-use-action) directive to an imported svg element.

Default: `false`
npm package: @lagz0ne/c3x
Description: Architecture-aware CLI for C3 projects
Latest version: 5.0.0

# c3x: Architecture-Aware CLI for C3 Projects

c3x is a CLI tool for managing C3 architecture documentation. It provides commands for listing entities, checking integrity, scaffolding new docs, and more.

## Installation

### Per-project (recommended)

```bash
npm install --save-dev @lagz0ne/c3x
```

Then use via `npx`:

```bash
npx @lagz0ne/c3x list --json
npx @lagz0ne/c3x check
```

### Global

```bash
npm install -g @lagz0ne/c3x
```

Then use directly:

```bash
c3x list --json
c3x check
```

### Zero-install

```bash
npx -y @lagz0ne/c3x list --json
```

Downloads from npm on first use (~2s), then cached. The `-y` flag suppresses the install prompt.

## Commands

| Command | Description |
|---------|-------------|
| `list` | Topology view with relationships (`--json` for machine-readable) |
| `check` | Doc integrity: broken links, orphans, duplicates |
| `init` | Scaffold `.c3/` skeleton |
| `add <type> <slug>` | Create entity with auto-numbering + wiring |
| `sync` | Generate guard skills from component docs |

Run `npx @lagz0ne/c3x <command> --help` for details and examples.

## Claude Code Plugin

c3x also ships as a Claude Code plugin with architecture-aware skills:

```bash
claude plugin install c3-skill
```

| Skill | Purpose |
|-------|---------|
| `c3-onboard` | Create C3 docs from scratch via Socratic discovery |
| `c3-query` | Navigate architecture docs and answer questions |
| `c3-change` | Coordinated change workflow via Agent Teams (ADR-first) |
| `c3-ref` | Manage cross-cutting patterns and conventions |
| `c3-audit` | Audit docs for consistency, drift, and completeness |
| `c3-sweep` | Impact assessment before changes |

## The `.c3/` Directory

```
.c3/
├── README.md                    # System context
├── config.yaml                  # Optional config
├── c3-1-<container>/
│   ├── README.md                # Container overview
│   └── c3-101-<component>.md    # One file per component
├── refs/
│   └── ref-<pattern>.md         # Cross-cutting patterns
└── adr/
    └── adr-YYYYMMDD-<slug>.md   # Architecture decisions
```

## Building

```bash
bun install
bun run build:cli    # CLI → dist/cli.cjs
bun run build        # Plugin → dist/claude-code/
bun run check-refs   # Verify bundled references match source
bun run fix-refs     # Sync shared references into skills
```

## License

MIT
npm package: @lagzda/tokengate
Description: Modified version of Tokengate component library for Shopify storefronts
Author: Lagzda
Latest version: 1.1.15

# `@shopify/tokengate`

[![npm version](https://img.shields.io/npm/v/@shopify/tokengate.svg?label=@shopify/tokengate)](https://www.npmjs.com/package/@shopify/tokengate) [![CI](https://github.com/Shopify/blockchain-components/actions/workflows/ci.yml/badge.svg)](https://github.com/Shopify/blockchain-components/actions?query=branch%3Amain) [![PRs Welcome](https://img.shields.io/badge/PRs-welcome-brightgreen.svg)](../../.github/contributing.md)

The `tokengate` component presents the gate requirements to unlock a reaction, and the buyer's eligibility status based on their connected wallet.

[View in Storybook](https://main--639b1f308693132693d9b82c.chromatic.com/?path=/story/tokengate-discount-locked--locked)

## Installation

Install the `shopify/tokengate` package.

```bash
yarn add @shopify/tokengate
```

## Documentation

For detailed documentation, [visit shopify.dev](https://shopify.dev/api/blockchain/components/tokengate).

## Contributing

Pull requests are welcome. See the [contribution guidelines](../../.github/contributing.md) for more information.

## License

MIT &copy; [Shopify](https://shopify.com/), see [LICENSE.md](LICENSE.md) for details.

<a href="https://shopify.com" target="_blank">
  <picture>
    <source media="(prefers-color-scheme: dark)" srcset="../../images/shopify-light.svg">
    <source media="(prefers-color-scheme: light)" srcset="../../images/shopify-dark.svg">
    <img alt="Shopify Logo" src="../../images/shopify-dark.svg">
  </picture>
</a>
npm package: @lahaus-web-components/lhwc-documents
Description: (LaHaus Documents) Web Component
Author: @gatodeveloper
Latest version: 0.1.2

# Documents WebComponent - LH


## Install

Yarn Install
$ `yarn add @lahaus-web-components/lhwc-documents`

NPM Install
$ `npm install @lahaus-web-components/lhwc-documents -S`

Git Install(Add line on package.json dependecies)
$ `"@lahaus-web-components/lhwc-documents": "git@github.com:la-haus/lhwc-documents.git"`


## Use as Component
```
import { 
  ContainerDocumentsListing
} from '@lahaus-web-components/lhwc-documents'
```

$ `<ContainerDocumentsListing props={props}><ContainerDocumentsListing/>`


## Use as Iframe

 `<iframe src="https://lhwc-documents-stg.lahaus.com/<queryParams>" width="100%" height="100%" frameborder="0"></iframe>`


## List of PARAMS and PROPS

cdp_user_id
pcp_project_code
pcp_unit_detail_code
checkout_reserve_uuid
checkout_reserve_id
source
api_key


## Development

In the project directory, you can run:

### `yarn start`

Runs the app in the development mode.\
Open [http://localhost:3003](http://localhost:3003) to view it in the browser.

The page will reload if you make edits.\
You will also see any lint errors in the console.

### `yarn test`

Launches the test runner in the interactive watch mode.\
See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.

### `yarn build`

Builds the app for production to the `build` folder.\
It correctly bundles React in production mode and optimizes the build for the best performance.

The build is minified and the filenames include the hashes.\
Your app is ready to be deployed!

See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
npm package: @lahautesociete/jquery-component
Description: jQuery component template
Author: La Haute Société
Latest version: 1.1.2

# lhs-component

jQuery component template

## Install

```
npm install @lahautesociete/jquery-component --save
```


## Examples

```javascript
$('.ExampleComponent').component({

    /**
     * Bind nodes
     */
    nodes: function() {

    },

    /**
     * Bind events
     */
    events: function() {

    },

    /**
     * Initialize
     */
    init: function() {

    }

});

```


## How it works

Every component is self-instanced by the lhs-component lib.
It automatically runs nodes(), then events() and then init() methods. 
These methods can be removed if they are empty.
npm package: @lahautesociete/parallax
Description: Plugin to make parallax animation when scrolling
Author: La Haute Societe
Latest version: 0.1.4

# LHS Parallax

LHS Parallax plugin to make parallax animation when scrolling.

## Installation

```
npm install @la-haute-societe/lhs-parallax
```

## Usage

### HTML
Create an HTML element with the `scroll-level` attribute.  

You can pass two attributes to your element :
- `scroll-level` - Parallax level (required)
- `scroll-direction` - Parallax direction (optional) : x / y (default y),
```html
<div class="myElement" scroll-level="3" scroll-direction="x"></div>
```

### JavaScript
Import LhsParallax where you want to use it.  
Then get the HTML element and create an instance of LhsParallax passing your element in parameter.
```js
import LhsParallax from '@la-haute-societe/lhs-parallax';
var myElement = document.querySelector('.myElement');
var scroll = new LhsParallax(myElement);
```
npm package: @lahautesociete/styleguide
Description: Sources for LHS Styleguide
Author: La Haute Société
Latest version: 1.1.2

# LHS Styleguide

NPM package: https://www.npmjs.com/package/@lahautesociete/styleguide

## Install

```
 npm install 
 grunt
 ```
 
## Example link from config.md
 
 ```
 link(rel="stylesheet" href="../../build/node_modules/lhs-styleguide/dist/css/general.css")
 link(rel="stylesheet" href="../../build/node_modules/lhs-styleguide/dist/css/styledown.css")
 script(src="../../build/node_modules/lhs-styleguide/dist/js/styledown.js")
 ```
npm package: @lahautesociete/vue-parallax
Description: LHS Vue plugin to use @lahautesociete/parallax in Vue with directives
Author: La Haute Societe
Latest version: 0.1.3

# LHS Vue Parallax

LHS Vue plugin to use lhs-parallax in Vue with a directive.

## Installation

```
npm install @lahautesociete/vue-parallax
```

## Usage

### main.js

Import Vue and LhsParallax somewhere in your entry file.  
Then tell Vue to use LhsParallax plugin.

```js
import Vue from 'vue';
import LhsVueParallax from '@lahautesociete/vue-parallax'
Vue.use(LhsVueParallax);
```

### CustomComponent.vue

In your vue template, add a HTML element with the `v-parallax` directive and specify a parallax level.  
You can add an optional modifier (x / y) to specify the parallax direction. 
```html
<div v-parallax.x="5"></div>
```