open-index/open-npm huggingface dataset:
npm package: @redbackops/redback-ui
Description: Design system and UI component library for React, designed for Redback's data-driven applications.
Latest version: 0.0.3

# Redback UI
Design system and UI component library for React, designed for Redback's data-driven applications.

 - [Live Storybook and documentation](https://redback-operations.github.io/redback-ui/)
 - [Release notes](https://github.com/Redback-Operations/redback-ui/tags)

## Installation

To install Redback UI in a React project, run:

```bash
npm install @redbackops/redback-ui
```

To update Redback UI to the latest version in an existing project, run one of the following:
```bash
npm update @redbackops/redback-ui
```
```bash
npm install @redbackops/redback-ui@latest
```

## Getting started

To use Redback UI, wrap your application (or the part of it that you want to style with Redback UI) in the `RedbackUiThemeProvider` component. 

The below example includes selecting the "Redback Smartbike" bundled theme. You can see all of the available themes in the [Storybook](https://redback-operations.github.io/redback-ui/?path=/docs/design-tokens-colours--docs).

```jsx
import { RedbackUiThemeProvider } from '@redbackops/redback-ui';
import themes from '@redbackops/redback-ui/themes';

<RedbackUiThemeProvider theme={themes.smartbike}>
    { /* Your app here */ }
</RedbackUiThemeProvider>
```

If you are using Redback UI outside of Redback Operations, you can pass in your own custom theme object. See the structure of the [default theme](https://github.com/Redback-Operations/redback-ui/blob/main/src/themes/default.ts) for guidance on the design tokens to include.


## Contributing

Redback UI is primarily worked on by students in Deakin University's School of IT capstone program, but we welcome external contributions.

To find out more about how Redback UI is built and how to contribute, please see the Redback Operations developer documentation, in particular:
- [Creating a new component](https://redback-operations.github.io/redback-documentation/docs/web-mobile-app-dev/frontend/new-components)
- [Using Styled Components](https://redback-operations.github.io/redback-documentation/docs/web-mobile-app-dev/frontend/styled-components)
- [Automated tests](https://redback-operations.github.io/redback-documentation/docs/web-mobile-app-dev/frontend/tests)
- [Submitting code](https://redback-operations.github.io/redback-documentation/docs/web-mobile-app-dev/frontend/submitting-work).
npm package: @redbackracing/clients
Description: Client libraries for Redback Cloud
Author: UNSW Redback Racing
Latest version: 3.5.1

# Redback Cloud JavaScript Client

## Description

JavaScript client library for abstracting Redback backend micro-service APIs.

## Installation

```bash
pnpm install
```

## Build

```bash
pnpm build
```

## Usage Examples

**Note**: the module must be installed before use and in `tsconfig.json`, `moduleResolution` should be set to `node16`.

```typescript
import DataClient from '@redbackracing/clients/data';

let dataClient = new DataClient(DATA_SERVICE_URL);

await dataClient.createSession(
  carId,
  DataSourceType.PointMassSimulator,
  sessionId,
  {
    metadata: sessionMetadata,
  },
);
```

```typescript
import { TrackDay } from '@redbackracing/clients/track';

interface State {
  trackDay: TrackDay;
}
```
npm package: @redbeed/parallax-interface
Description: A lightweight and flexible library for adding mouse-driven parallax effects to your HTML elements, enhancing UI depth and user engagement in any project.
Author: Chris Schön
Latest version: 1.0.0

![pxi-header.gif](demo%2Fpxi-header.gif)

# Parallax Interface (PXI)

PXI is a lightweight and flexible library for adding mouse-driven parallax effects to your HTML elements, enhancing UI
depth and user engagement in any project.

The whole Project is inspired by the iPad Mouse Hover Effect.

## Installation

```bash
npm install @redbeed/parallax-interface
```

### Usage

```javascript
import ParallaxInterface from 'parallax-interface';

ParallaxInterface.init();

// or with custom options
ParallaxInterface.init({
    throttleTime: 16, // Throttle time in milliseconds (60fps)
    hitzoneFactor: 1, // Factor for the hitzone size
    mouseMoveFactor: 0.5, // Factor for the mousemove movement
    animationTime: 500, // Animation time in milliseconds
    calculateSize: false, // If true, the wrapper and the element will have a fixed size (based on the element's size)
});
```

Or you can add the following script to your project directly.

```html
<script src="https://unpkg.com/@redbeed/parallax-interface/dist/parallax-interface.min.js"></script>
```

### HTML

You need to add `data-pax` to your main element and `data-pe-factor` to the elements you want to add the parallax effect
to.

```html
<a href="#" data-pax>
    <span data-pe-factor>I am a link</span>
</a>

<!-- or with custom options -->
<a href="#" data-pax data-pe-hitzone="1.2">
    <span data-pe-factor="0.5">I am a link</span>
</a>
```

### CSS

To make the parallax effect work, you should add our small CSS snippet to your project.

```scss
import 'parallax-interface/dist/parallax-interface.css';
```

Or you can add the following CSS to your project directly.

```html
<link rel="stylesheet" href="https://unpkg.com/@redbeed/parallax-interface/dist/parallax-interface.css"/>
```

## Troubleshooting

### Inline Block Elements

You need to add `display: inline-block` to your inline elements like `span` or `a`, if you want to add the parallax
effect.

## Contributing

Everyone is welcome to contribute to this project. Create a pull request or an issue if you find something that could be
improved.

## Support

If you like this project, please consider supporting it by giving it a star.

redbeed is a web development agency from Germany, with love for open source projects. 
You can find more information about us on our website [redbeed.com](https://redbeed.com).

## License

This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.