open-index/open-npm huggingface dataset:
npm package: @15jainakshat/authflow-sdk
Description: AuthFlow SDK for authentication and user management
Latest version: 1.0.0

# @authflow/sdk

AuthFlow SDK for easy authentication integration in your applications.

## Installation

```bash
npm install @authflow/sdk
```

## Usage

### 1. Wrap your app with AuthProvider

```tsx
import { AuthProvider } from '@authflow/sdk';

function App() {
  return (
    <AuthProvider
      config={{
        apiKey: 'your-api-key-here',
        baseUrl: 'https://auth.yourdomain.com', // Optional, defaults to localhost
      }}
    >
      {/* Your app */}
    </AuthProvider>
  );
}
```

### 2. Use authentication hooks

```tsx
import { useAuth } from '@authflow/sdk';

function MyComponent() {
  const { user, login, logout, loading } = useAuth();

  if (loading) return <div>Loading...</div>;
  if (!user) return <div>Please log in</div>;

  return (
    <div>
      <p>Welcome, {user.email}!</p>
      <button onClick={logout}>Logout</button>
    </div>
  );
}
```

### 3. Use pre-built components

```tsx
import { LoginForm, ProtectedRoute } from '@authflow/sdk';

function LoginPage() {
  return (
    <div>
      <LoginForm
        showRegister={true}
        onSuccess={() => {
          // Redirect after successful login
          window.location.href = '/dashboard';
        }}
      />
    </div>
  );
}

function Dashboard() {
  return (
    <ProtectedRoute redirectTo="/login">
      <div>Protected content</div>
    </ProtectedRoute>
  );
}
```

### 4. Use the client directly

```tsx
import { AuthFlowClient } from '@authflow/sdk';

const client = new AuthFlowClient({
  apiKey: 'your-api-key',
  baseUrl: 'https://auth.yourdomain.com',
});

// Login
await client.login({ email: 'user@example.com', password: 'password' });

// Get current session
const user = await client.getSession();

// Logout
await client.logout();
```

## API Reference

### AuthProvider Props

- `config.apiKey` (required): Your project API key
- `config.baseUrl` (optional): Base URL of the AuthFlow API
- `config.cookieDomain` (optional): Cookie domain for SSO

### useAuth Hook

Returns:
- `user`: Current user object or null
- `loading`: Boolean indicating if auth state is being checked
- `login(email, password)`: Login function
- `register(email, password, name?)`: Register function
- `logout()`: Logout function
- `refreshSession()`: Refresh current session

### LoginForm Props

- `onSuccess?`: Callback called after successful login/register
- `showRegister?`: Show register option (default: false)
- `customStyles?`: Custom CSS classes for styling

### ProtectedRoute Props

- `children`: Content to protect
- `redirectTo?`: URL to redirect if not authenticated
- `fallback?`: Component to show while loading or if not authenticated
npm package: @160over90/vue-floating-list-view
Description: Vue wrapper for the Plyr video player. Only supports the video player and not the audio player.
Latest version: 0.2.1


# List View

## Features

Creates a list of sections with a nav that provides a link to each section. The current section's `li` is given the class `active` in the `nav`.

>If you do not have `yarn` you can download it [here](https://yarnpkg.com/en/docs/install#mac-stable).

## Instructions for global registration
```
yarn add @160over90/vue-floating-list-view
```
Include in main.js (app entry point)
```
import ListView from '@160over90/vue-floating-list-view';

Vue.use(ListView);
```

## Instructions for editing this package
```
yarn install
```

### Compiles and hot-reloads for development
```
yarn run serve
```

## Examples

A simple example of the ListView component. The ListViewSection components are placed inside of a ListView component. The content inside of the ListViewSection components can be anything and does not have to be text.
```
<ListViewContainer>
  <ListViewSection label="Section1">Section 1</ListViewSection>
  <ListViewSection label="Section2">Section 2</ListViewSection>
  <ListViewSection label="Section3">Section 3</ListViewSection>
</ListViewContainer>
```

## Props

### ListView

**rootMargin** (Number, Default: 0)
The root margin for intersection observer to determine when to recalculate the active element. If the nav is fixed, this is usually the height of the nav.

**ordered** (Boolean, Default: false)
Determines whether the list in the nav should be an ordered or unordered list.

**smoothScroll** (Boolean, Default: false)
Smooth scrolls to section when nav item is clicked. [Polyfill](#Polyfills) needed if browser doesn't have native support.

### ListViewItem

**label** (String, Required)
The section label used in the navigation. The label is also slugified to create an id for the section.

## Polyfills

Polyfills are needed for intersection observer and smooth scrolling on browsers without native support. Recommended polyfill packages below.

* [Intersection Observer Polyfill](https://www.npmjs.com/package/intersection-observer)
* [Smooth Scroll Polyfill](https://www.npmjs.com/package/smoothscroll-polyfill)

## License

[MIT](http://opensource.org/licenses/MIT)
npm package: @160over90/vue-form-fetch
Description: Allows you to use the HTTP methods to send or get data gathered from any number of form fields.
Latest version: 0.3.0


# FormFetch

## Features
Allows you to use the HTTP methods [GET](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/GET) and [POST](https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods/POST) to send or get data gathered from any number of form fields.

>If you do not have `yarn` you can download it [here](https://yarnpkg.com/en/docs/install#mac-stable).

## Instructions for global registration
```
yarn add @160over90/vue-form-fetch
```
Include in main.js (app entry point)
```
import FormFetch from '@160over90/vue-form-fetch';

Vue.use(FormFetch);
```

## Instructions for editing this package

```
yarn install
```

### Compiles and hot-reloads for development
```
yarn run serve
```

## Attributes
**method**
the method attribute excepts the "GET" or "POST" HTTP methods.

**action**
the action attribute excepts your API endpoint or path to PHP middleware.

Example
```
<FormFetch
  method="POST"
  action="/submit-form.php"
>
  <template slot-scope="{ state, response }">
    <div>
      <label>
        <div>First Name</div>
        <input name="firstName">
      </label>
    </div>
    <div>
      <label>
        <div>Last Name</div>
        <input name="lastName">
      </label>
      </div>
      <button v-text="'Submit'"/>
      <p v-if="state === 'pending'>
        Submitting your request...
      </p>
      <p v-else-if="state === 'rejected'">
        Sorry, that didn't work!
      </p>
      <p v-else-if="state === 'fulfilled'">
        {{ response.ok
          ? "You're good to go!"
          : "Sorry, that didn't work!"
        }}
      </p>
  </template>
</FormFetch>
```

## Props
**init** (Object, Default: null)
Allows you to pass a configuration object.

Example
```
<FormFetch
  method="POST"
  action="/submit-form.php"
  :init="{
    mode: 'cors',
    cache: 'no-cache',
  }"
>
...
```
For request properties, refer to: https://developer.mozilla.org/en-US/docs/Web/API/Request.


## License

[MIT](http://opensource.org/licenses/MIT)
npm package: @160over90/vue-wai-modal
Description: A Vue.js modal component that adhere's to the W3C Web Accessibility Initiative.
Latest version: 0.3.0

# vue-wai-modal

## Features
Vue Modal is a component that adhere's to the W3C Web Accessibility Initiative and provides and easy way to impliment a modal.

>If you do not have `yarn` you can download it [here](https://yarnpkg.com/en/docs/install#mac-stable).

## Instructions for global registration
```
yarn add @160over90/vue-wai-modal
```
Include in main.js (app entry point)
```
import VueWaiModal from '@160over90/vue-wai-modal';

Vue.use(VueWaiModal);
```

## Instructions for editing this package

```bash
yarn install
```

### Compiles and hot-reloads for development
```bash
yarn run serve
```

## Examples
An simple example of implimenting the modal.
```
<template>
  <div id="app">
    <ModalButton :controls="'example-modal'">
      Open button
    </ModalButton>
    <ModalBackdrop
      :id="'example-modal'"
      :transitionProps="{ name: 'fade' }"
    >
      <ModalBackdropDialog
        :ariaLabel="'modal'"
        :ariaLabelledby="'open-modal'"
        class="ExampleComponent__dialog"
      >
        <h1
          class="ExampleComponent__content"
          v-text="'Modal Content'"
        />
        <ModalButton :controls="'example-modal'">
          Close button
        </ModalButton>
      </ModalBackdropDialog>
    </ModalBackdrop>
  </div>
</template>
```

## Props

--- **Modal Backdrop Component** ---

**id** (String, Required)
The ID that matches the button to the modal Backdrop

**transition** (String, Default: 'transition')
Links to a transition component

**transitionProps** (Object, Default: () => ({}))
Links to the name of the transition

```
:transitionProps="{ name: 'fade' }"
```

```
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.5s ease;
}

.fade-enter,
.fade-leave-to {
  opacity: 0;
}
```

**initiallyOpen** (Boolean, Default: false)
Page loads with modal already open

**mode** (String, Default: 'show', validate(value))
Checks for a v-if, v-show

**closedFocus** ([HTMLElement, String], Default: undefined)

--- **Modal Backdrop Dialog** ---

**ariaLabel** (String, Default: null)
Used to define a string that labels the current element in cases where text is not visible on the screen

**ariaLabelledby** (String, Default: null)
Establishes relationships between objects and their labels for assistive technology, such as screen readers

--- **Modal Button** ---

**controls** (String, Required)
Links to the Backdrop ID (must be the same)

## License

[MIT](http://opensource.org/licenses/MIT)
npm package: @16g/react-simple-format
Description: Simple format component like Ruby on Rails [simple_format](https://apidock.com/rails/ActionView/Helpers/TextHelper/simple_format)
Author: 16g
Latest version: 1.0.2

# @16g/react-simple-format [![npm version](https://img.shields.io/npm/v/@16g/react-simple-format.svg?style=flat)](https://www.npmjs.com/package/@16g/react-simple-format) [![CircleCI](https://circleci.com/gh/16g/react-simple-format.svg?style=svg)](https://circleci.com/gh/16g/react-simple-format)

Simple format component like Ruby on Rails [simple_format](https://apidock.com/rails/ActionView/Helpers/TextHelper/simple_format) inspired by [rilkevb/react-simple-format](https://github.com/rilkevb/react-simple-format)

## Installation

```
npm i --save @16g/react-simple-format
```

## Usage

```
import SimpleFormat from '@16g/react-simple-format';

const text = "paragraph\n\nand another one";

<SimpleFormat text={text} />
```

## Props

| Props | Type | Default | Description |
|:---|:---|:---|:---|
| text | string | undefined | Text will be formatted simply |
| wrapperTag | string | 'p' | HTML tag wraps paragraph of `text` |
| prefix | node | undefined | Node prepended to paragraph |
| postfix | node | undefined | Node appended to paragraph |