open-index/open-npm huggingface dataset:
npm package: @functionalfoundry/now-travis
Description: Deploy to now.sh from Travis
Author: Jannis Pohlmann
Latest version: 0.1.30

# now-travis

This is a work-in-progress iteration on the official
version of [now-travis](https://github.com/eliperelman/now-travis)
and the modifications made in the [glamorous-website](https://github.com/kentcdodds/glamorous-website/blob/master/other/now-travis) repo.

## Installation

```bash
# NPM
npm install --dev @functionalfoundry/now-travis

# Yarn
yarn add --dev @functionalfoundry/now-travis
```

## Usage

This version of now-travis requires the following environment
variables to be defined:

* `ROOT_DIR` — the directory to deploy
* `TRAVIS_INSTANCE` — `com` or `org`
* `NOW_NAME` — the name to use for deployments
* `NOW_ALIAS` — the now.sh alias to use
* `NOW_TOKEN` — an access token to deploy to now.sh
* `GH_TOKEN` — a personal GitHub token to annotate PRs with deployment URLs

## License

This project is licensed under the MIT License.
npm package: @functionalfoundry/react-scripts-ts
Description: Configuration and scripts for Create React App.
Latest version: 2.9.0

# react-scripts

This package includes scripts and configuration used by [Create React App](https://github.com/facebookincubator/create-react-app).<br>
Please refer to its documentation:

* [Getting Started](https://github.com/facebookincubator/create-react-app/blob/master/README.md#getting-started) – How to create a new app.
* [User Guide](https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/template/README.md) – How to develop apps bootstrapped with Create React App.
npm package: @functionalities/animations
Description: A frontend utility package for creating CSS animations with intersection observers
Author: William Yallop
Latest version: 1.0.1
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Animations - v1.0.1

Animations is a frontend animation utility package. It doesn't have any animations included, but it uses an intersection observer at its core to trigger classes on defined elements when they reach a certain threshold in the viewport. It's entirely up to the user to implement animations themself through CSS.

## Install

```
npm install @functionalities/animations --save
```

## Example

Animations is lightweight and doesn't require much to get it up and running. Simply import the package and create a new instance of it. To define animation classes for elements, all you need to do is add the `data-animation` attribute markup in your HTML.

```typescript
import Animations from "@functionalities/animations";

new Animations();
```

```html
<div
  data-animate="[
    {
        'class': 'show-me'
    },
    {
        'class': 'turn-red',
        'delay': 1000,
        'reset': false
    }
]"
>
  <h3>Hello there</h3>
</div>
```

> This above example will add the "show-me" class when it first enters the viewport, then 1000ms later add the class "turn-red". The "turn-red" class won't be removed when the element leaves the viewport due to the reset value being false.

## Config

```typescript
new Animations({
  activeClass: "animate", // string
  reset: true, // boolean
  threshold: 1, // number
});
```

### activeClass

Regardless of the values of `data-animate`, this default class will always get added to the element when its visible.

### reset

This defines the default behaviour for if `data-animate` elements should have their classes removed when they exit the viewport. The re4set value in the in `data-animate` objects will override this for them specifically.

### threshold

Determines the threshold for the intersection observer. 1 means the whole element must be visible before toggling the classes.

```html
data-animate="[ { 'class': 'turn-red', 'delay': 1000, 'reset': false } ]"
```

### class

This is the class that is added and removed when the element enters and leaves the viewport.

### delay

In milliseconds, this is the delay for triggering the class on. This delay isnt used for removing the class.

### reset

Overriding the Animations class instance reset value for this specific class. Will tell the package if the class should be removed when it exits the viewport.

## Notes

- The JSON markup in the `data-animate` attribute has to be valid JSON, minus the use of `'` instead of `"`.
npm package: @functionalities/webcomponents
Description: A collection of progressively enhanced web components
Author: William Yallop
Latest version: 0.5.2

# Web Components - v0.5.2

> Focused on accessibility, strictly markup and functionality/progressive enhancement. No styling unless necessary.

The Web Components library provides easy-to-use and simple solutions for common website features, with a strong focus on meeting accessibility standards and retaining as much functionality as possible in the case JS is disabled. All components included in this library adhere to the Web Content Accessibility Guidelines (WCAG) 2.1 Level AA, providing a solid foundation for accessible web experiences.

## Install

```
npm install @functionalities/webcomponents --save
```

## Components

- [Carousel](https://github.com/WillYallop/functionalities/tree/main/packages/webcomponents/src/components/carousel)
- [Enhanced Details](https://github.com/WillYallop/functionalities/tree/main/packages/webcomponents/src/components/enhanced-details)
- [Details Disclosure](https://github.com/WillYallop/functionalities/tree/main/packages/webcomponents/src/components/detail-disclosure)
- [Checkbox Toggler](https://github.com/WillYallop/functionalities/tree/main/packages/webcomponents/src/components/checkbox-toggler)
- [Sticky Header](https://github.com/WillYallop/functionalities/tree/main/packages/webcomponents/src/components/sticky-header)
- [Animate](https://github.com/WillYallop/functionalities/tree/main/packages/webcomponents/src/components/animate)

## Coming soon

Web component solutions that adhere to the same priciples for the following items are in the works.

- Form
- File input
npm package: @functionisland-dex/uikit
Description: Set of UI components for Function Island projects
Latest version: 2.0.5

# 🌴 Function Island UIkit

[![Version](https://img.shields.io/npm/v/@functionisland-dex/uikit)](https://www.npmjs.com/package/@functionisland-dex/uikit) [![Size](https://img.shields.io/bundlephobia/min/@functionisland-dex/uikit)](https://www.npmjs.com/package/@functionisland-dex/uikit)

Function Island UIkit is a set of React components and hooks used to build pages on Function Island's apps. It also contains a theme file for dark and light mode.

## Install

`yarn add @functionisland-dex/uikit`

## Setup

### Theme

Before using Function Island UIkit, you need to provide the theme file to styled-component.

```
import { ThemeProvider } from 'styled-components'
import { light, dark } from '@functionisland-dex/uikit'
...
<ThemeProvider theme={isDark}>...</ThemeProvider>
```

### Reset

A reset CSS is available as a global styled component.

```
import { ResetCSS } from '@functionisland-dex/uikit'
...
<ResetCSS />
```

### Types

This project is built with Typescript and export all the relevant types.