open-index/open-npm huggingface dataset:
npm package: @happeo/docs-tools
Description: Some components for documenting Happeo UI Kit in MDX, written in React.
Author: Happeo Oy
Latest version: 1.0.2
Deprecated: Package no longer supported. Contact Support at https://www.npmjs.com/support for more info.

# Docz Tools

Some handy components for documenting Happeo UI Kit in MDX, written in React. 

## List of components

### PackageMetadata

```js
import pkg from "../package.json";
<PackageMetadata pkg={pkg} />
```


### ColorExample

```js
<ColorExample hex={"#29C4A9"} name="brand" />
```

### BackgroundBox

Simple styled component to to be used for example with `<ColorExample>`.

```js
  <BackgroundBox>
    <ColorExample hex={"#ffffff"} name="white" darkText={true} />
  </BackgroundBox>
```

### ShadeGrid

```js
<ShadeGrid colors={{
    navy: "#1A5D8D",
    active: "#009DFF",
    success: "#29C47F",
    warn: "#FABD24",
    alert: "#EC4B2F",
    violet: "#5E2590",
}} shadeFns={{
    darken20: (color) => darken(0.2, color),
    desaturate: (color) => desaturate(0.2, color)
}}/>
```

### MarginExample

<Props of={MarginExample} />

Use "Shorthand property names" to get the variable name as padding name.

```js
const hugeMargin = "40px";
<MarginExample margin={{hugeMargin}} />
```

### PaddingExample

<Props of={PaddingExample} />

Use "Shorthand property names" to get the variable name as padding name.

```js
const hugePadding = "40px"
<PaddingExample padding={{hugePadding}} />
```
npm package: @happeo/widget-sdk
Description: Start building your own widget in Happeo!
Author: Antero Hanhirova
Latest version: 0.2.5

# Happeo widget SDK

Start building your own widget in Happeo!

The widget SDK allows you to tap directly to Happeo apis and content in order to create fully customisable widgets.

## Important

We are moving to open Beta with custom widget components, which includes this widgetSDK. That means we are still gathering feedback from developers on how to improve the SDK. There should not be any breaking changes to the SDK, however please do keep in mind the current alpha/beta -state.

## How to use

Install the widget SDK to your Happeo Widget project. See examples from [Custom Widget Templates](https://github.com/happeo/custom-widget-templates).

```
npm install @happeo/widget-sdk
```

In your app, import the SDK and run `const widgetApi = await widgetSDK.api.init(uniqueWidgetId)` in order to start using it:

```
import widgetSDK from "@happeo/widget-sdk";

const { api, uikit } = widgetSDK;

const myAwesomeWidget = ({uniqueId}) => {
    const [user, setUser] = useState();
    const [widgetApi, setWidgetApi] = useState();

    useEffect(() => {
        const init = async () => {
            const api = await api.init(uniqueId);
            setUser(await api.getCurrentUser());
            setWidgetApi(api)
        }
        init();
    },[uniqueId]);

    return (
        <p>Hello world, {user?.name?.fullName}!</p>
    )
};
```

## Development

If you want to develop your widget locally, you can start the widgetSDK in mocked mode by providing environment variable `MOCK_WIDGET_SDK=true`.

## More information

For detailed documentation, please visit the wiki:
https://github.com/happeo/widgets-sdk/wiki

## SDK mock mode

In case you want to do development outside Happeo you can use environment variable `MOCK_WIDGET_SDK=true` to use mocked Widget SDK.
npm package: @happeouikit/breadcrumbs
Description: Breadcrumbs allow users to make selections from a range of values.
Author: Happeo Oy
Latest version: 1.1.2

# Breadcrumbs

Breadcrumbs allow users to make selections from a range of values.

Installation

    yarn add @happeouikit/breadcrumbs

or 

    npm install --save @happeouikit/breadcrumbs
npm package: @happeouikit/copy-to-clipboard-button
Description: buttons that copies content to clipboard
Author: Happeo Oy
Latest version: 3.4.2

# Copytoclipboardbutton

buttons that copies content to clipboard

Installation

    yarn add @happeouikit/copy-to-clipboard-button

or 

    npm install --save @happeouikit/copy-to-clipboard-button
npm package: @happeouikit/image-carousel
Description: An image carousel is a container (slideshow) of images or info that users can select by clicking a button that directs them forward or backward in the slideshow
Author: Happeo Oy
Latest version: 2.1.2

# Image-carousel

An image carousel is a container (slideshow) of images or info that users can select by clicking a button that directs them forward or backward in the slideshow

Installation

    yarn add @happeouikit/image-carousel

or 

    npm install --save @happeouikit/image-carousel
npm package: @happeouikit/toast
Author: Happeo Oy
Latest version: 1.2.5

# Toast



Installation

    yarn add @happeouikit/toast

or 

    npm install --save @happeouikit/toast


### Usage

```
// First include the container in the apps root component

// App.js

import {ToastContainer} from '@happeouikit/toast';

...

render () {
    <div> /* Main app */ </div>
    <ToastContainer/>
}

// Then call toast methods inside any other components

// Component.js

import {toast} from '@happeouikit/toast';
...

const someMethod = () => {
    toast.success({message: "Success message"})
}

```
npm package: @happer64bit/twinitx
Description: Initialize Tailwind CSS without configuring manually
Author: Happer64Bit
Latest version: 1.0.0

# Twinitx (Tailwind Initialize Executable)

## Overview

**Twinitx** is a command-line tool designed to simplify the setup of Tailwind CSS projects for various frameworks. It automatically generates a Tailwind CSS configuration file based on user selections, allowing developers to get started quickly and efficiently.

## Install from Source

1. **Clone the repository:**
   ```bash
   git clone https://github.com/happer64bit/twinitx.git
   cd twinitx
   ```

2. **Install dependencies:**
   ```bash
   npm install
   ```

3. **(Optional) Link globally:**
   ```bash
   npm link
   ```

## Usage

To run **Twinitx**, use one of the following commands:

```bash
npx twinitx
```

```bash
yarn twinitx
```

```bash
bunx twinitx
```

## Contribution

To contribute to **Twinitx**, follow these steps:

1. Fork the repository.
2. Create a new branch.
3. Make your changes and commit them.
4. Push your branch and open a pull request.

## License

This project is licensed under the MIT License.
npm package: @happikitsune/ori
Description: Personal cross-platform productivity tool
Author: Christopher Bradshaw
Latest version: 0.2.0

# ori
Personal cross-platform productivity tool

## Install brew, git, nvm, npm, node, and ori

```bash
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/kitsune7/ori/master/install.sh)"
```

## Basic Commands

- `ori --help`: Shows a list of supported commands and their syntax
- `ori --version`/`ori -v`: Show the currently installed version
- `ori latest`: Check to see what the latest version is
- `ori update`: Updates to the latest version

## Future commands
```
ori setup <service>
```

The following services will be available:
- mac
- ssh
- programs
- settings
- aliases
- dock
- git
- dropbox
- node
- python

```
ori secret [add | list | delete | help | update] [SECRET_KEY]
```

```
ori set ssh-key
```

```
ori alias [add | list | delete | update | help]
```
npm package: @happikitsune/prettier-config
Description: My personal Prettier config
Author: Christopher Bradshaw
Latest version: 1.0.0

# `@happikitsune/prettier-config`

> My personal [Prettier](https://prettier.io) config.

## Usage

**Install**:

```bash
npm install --save-dev @happikitsune/prettier-config
```

**Edit `package.json`**:

```jsonc
{
  // ...
  "prettier": "@happikitsune/prettier-config"
}
```
npm package: @happit/karma-happit-reporter
Description: Karma reporter with Happit style logging.
Author: Niklas Engblom
Latest version: 0.2.0

karma-happit-reporter
===================

[Happit](https://happit.com) style reporter for karma, forked from [karma-nyan-reporter](https://github.com/dgarlitt/karma-nyan-reporter)

![Karma Happit Reporter for Karma](karma-happit-reporter.jpg "Karma Happit Reporter for Karma")


Installation
========

Installation is simple using npm, just run the following command:

```sh
npm install --save-dev karma-happit-reporter
```

Since this follows Karma's plugin naming convention, that's all there is to it!

Now, run your tests and enjoy:

```sh
karma start path/to/karma.conf.js --reporters happit
```

Error and Logging Output
=========

Here is a screenshot of the error and logging output. The errors are displayed hierarchically based on the test suite and nesting level. ```console.log()``` messages are output at the bottom (in blue) below the test summary and grouped by browser.

![Karma Happit Reporter for Karma](karma-happit-reporter-error.jpg "Karma Happit Reporter for Karma")

Options
=========

If you want to suppress the stack trace at the end of the test run you can use the suppressErrorReport option.

```js
// karma.conf.js
module.exports = function(config) {
  config.set({
    // normal config stuffs

    reporters: ['happit'],

    // reporter options
    happitReporter: {
      // suppress the error report at the end of the test run
      suppressErrorReport: true, // default is false

      // suppress the red background on errors in the error
      // report at the end of the test run
      suppressErrorHighlighting: true, // default is false

      // increase the number of rainbow lines displayed
      // enforced min = 4, enforced max = terminal height - 1
      numberOfRainbowLines: 100, // default is 4

      // only render the graphic after all tests have finished.
      // This is ideal for using this reporter in a continuous
      // integration environment.
      renderOnRunCompleteOnly: true // default is false
    }
  });
};
```