open-index/open-npm huggingface dataset:
npm package: @graunds/tori
Description: Tori - Opinionated Riot component generator
Author: Niklas Lepistö
Latest version: 0.1.2

# tori - Opinionated Riot component generator
tori CLI tool, inspired by [hpal](https://hapipal.com)

## Installation and usage
> **Note:** tori was developed with **nodejs v12+**, it hasn't been tested in earlier versions

Recommended way:
```
npm i @graunds/tori -D
npx tori path/to/component
```

## How it works

By default `tori` will take in the whole path structure where you want to create the component. It will use **the last part of the path as the name of the component**.

Running `npx tori src/components/my-component` will generate `my-component` directory under `src/components/` with all the files defined in [the templates](./templates). Note that **you don't have to create the parent directories** as tori will recursively create them for you if they don't exist.

Tori assumes that alongside using [riot](https://riot.js.org), you will use [Jest](https://jestjs.io/) as the testing framework.

Some of the code has been commented out in the template files to make it more convenient for you to enable them.

### Customization

You can extend tori's component generation by defining paths to your desired directories in `package.json`.

**package.json example**
```
"tori": {
  "basePath": "src",             // The root of your source code. Note that the key MUST BE "basePath"
  "components": "components"     // Key defines the command you can use with tori and the value is the path based on "basePath" value
  "common": "components/common" 
},

```

Now, if you want to create a component under `src/components/common`, you can run `npx tori common my-component`.

> **Note:** the keys don't have to match the directory names: they can be anything! Just remember that they will be the commands you will use with tori, e.g. key named `x` will become `npx tori x component-name`.

## Dependencies
- [@hapi/somever](https://www.npmjs.com/package/@hapi/somever)
- [bin-v8-flags-filter](https://www.npmjs.com/package/bin-v8-flags-filter)

## TODO
- [ ] Support defining your own templates in your work directory
- [ ] More command line options for the tool?
  - e.g. `help`
  
- Something else? Let us know!
npm package: @grava.io/generator-grava-react-web
Description: Generador de estructura base de webs React
Author: Lautaro Alvarez
Latest version: 2.0.0

# Generator Grava React web [![NPM version][npm-image]][npm-url]

## Installation

First, install [Yeoman](http://yeoman.io) and @grava.io/generator-grava-react-web using [npm](https://www.npmjs.com/) (we assume you have pre-installed [node.js](https://nodejs.org/)).

```bash
npm install -g yo
npm install -g @grava.io/generator-grava-react-web
```

Then generate your new project:

```bash
yo @grava.io/grava-react-web
```

## Development
1. Fork
2. Clone locally
3. Modify code
4. Test locally
- Install from folder:
```
npm link
```
- Generate test project:
```
yo @grava.io/grava-react-web
```

## License

MIT © [Grava](https://grava.io)

[npm-image]: https://badge.fury.io/js/%40grava.io%2Fgenerator-grava-react-web.svg
[npm-url]: https://www.npmjs.com/package/@grava.io/generator-grava-react-web
npm package: @gravel-form/chakra-ui
Description: A flexible middlewares driven json schema form with chakra-ui
Latest version: 0.0.1

# @gravel-form/chakra-ui

A flexible middlewares driven json schema form. The only limitation is your imagination.

## Quick start

```bash
npm install @chakra-ui/core @emotion/core @emotion/styled emotion-theming
npm install @gravel-form/chakra-ui
```

``` jsx
import React from 'react';
import { theme, ThemeProvider, CSSReset } from '@chakra-ui/core';
import { Form } from '@gravel-form/chakra-ui/lib';

function MyFirstForm() {
  const schema = {
    type: 'object',
    properties: {
      username: { type: 'string' },
      password: { type: 'string' },
    },
  };

  const extraProps = {
    properties: {
      password: {
        props: { type: 'password' },
      },
    },
  };

  const [data, setData] = React.useState();

  return (
    <Form
      schema={schema}
      extraProps={extraProps}
      data={data}
      onChange={setData}
      size="md"
      onSubmit={(data) => {
        alert(JSON.stringify(data, null, 2));
      }}
    />
  );
}

function App() {
  return (
    <ThemeProvider theme={theme}>
      <CSSReset />
      <MyFirstForm />
    </ThemeProvider>
  );
}

export default App;
```

## Playground
More examples can be found on the [playground](https://gravel-form.github.io/chakra-ui-form/basic).
npm package: @gravel-form/core-rc
Description: A middleware framework for react json schema form
Latest version: 0.0.3

# gravel
Middleware framework for react jsonschema form

## Installation
```bash
npm install @gravel-form/core-rc
```

## Build a jsonschema form from scratch

```bash
npx create-react-app my-form
cd my-form
npm install @gravel-form/core-rc ajv
```

``` jsx
import React from 'react';
import Ajv from 'ajv';
import { FixedObjectArrayMw, toJSONSchemaPath, FormCore } from '@gravel-form/core';

const ajv = new Ajv({
  errorDataPath: 'property',
  allErrors: true,
  multipleOfPrecision: 8,
  schemaId: 'auto',
  unknownFormats: 'ignore',
});

function ValidateMw(props) {
  const { parent, schema, data, next, errors } = props;
  const errs = React.useMemo(() => {
    if (parent) return null;
    ajv.validate(schema, data);
    return ajv.errors;
  }, [schema, data]);
  return next(parent ? props : { ...props, errors: errs });
}

function FormItemTemplateMw(props) {
  const { schema, dataPath, errors, next } = props;
  if (schema.type === 'object' || schema.type === 'array') return next(props);
  const id = toJSONSchemaPath(dataPath);
  const error = errors && errors.find(({ dataPath }) => dataPath === id);
  return (
    <div>
      <label>{schema.title || [dataPath.length - 1]}</label>
      <br />
      {schema.description ? (
        <>
          Description: {schema.description}
          <br />
        </>
      ) : null}
      {next(props)}
      <br />
      {error ? `Error: ${error.message}` : null}
    </div>
  );
}

function StringInput(props) {
  const { schema, data, onChange, next } = props;
  if (schema.type !== 'string') return next(props);
  return <input value={data || ''} onChange={(e) => onChange(e.target.value)} />;
}

function SubmitButton(props) {
  const {
    parent,
    next,
    formProps: { onSubmit },
  } = props;
  if (parent || !onSubmit) return next(props);
  return (
    <>
      {next(props)}
      <button onClick={onSubmit}>submit</button>
    </>
  );
}

const middlewares = [ValidateMw, FormItemTemplateMw, SubmitButton, FixedObjectArrayMw, StringInput];

const schema = {
  type: 'object',
  properties: {
    username: {
      title: 'User Name:',
      type: 'string',
    },
    password: {
      type: 'string',
      title: 'Password:',
      description: 'at least 6 characters',
      minLength: 6,
    },
  },
};

function App() {
  const [data, setData] = React.useState({});
  return (
    <>
      <FormCore
        schema={schema}
        data={data}
        middlewares={middlewares}
        onChange={setData}
        onSubmit={() => alert(JSON.stringify(data))}
      />
      <br />
      {JSON.stringify(data)}
    </>
  );
}

export default App;
```
npm package: @gravewhisper/pi-theme-monokai-classic
Description: A Monokai Classic theme for Pi with softer borders, balanced code colors, and neutral tool panels.
Author: gravewhisper
Latest version: 0.1.0

# Pi Theme: Monokai Classic

A **Monokai Classic** theme package for [Pi](https://www.npmjs.com/package/@mariozechner/pi-coding-agent), inspired by the classic Monokai palette and the VS Code Monokai theme.

This theme aims to keep the familiar Monokai feel while adapting it to Pi's terminal UI:
- softer borders
- neutralized tool panels
- balanced code colors
- Monokai-style thinking borders
- dark, readable message surfaces

## Included theme

- `monokai-classic`

## Install

```bash
pi install npm:@gravewhisper/pi-theme-monokai-classic
```

Then select it in Pi with `/settings`, or set it in `~/.pi/agent/settings.json`:

```json
{
  "theme": "monokai-classic"
}
```

## Design notes

- Built for dark terminals
- Based on classic Monokai colors
- Tuned specifically for Pi surfaces like:
  - tool output boxes
  - markdown and code blocks
  - selected rows
  - editor thinking borders

## Local development

Install directly from a local path:

```bash
pi install /absolute/path/to/pi-theme-monokai-classic
```

Create a tarball:

```bash
npm pack
```

Publish to npm:

```bash
npm login
npm publish --access public
```

## Attribution

Inspired by Microsoft's VS Code Monokai theme and the classic Monokai color palette.

## License

MIT
npm package: @graviola/json-schema-sparql
Description: <h1 align="center"> SPARQL Query generator: @graviola/json-schema-sparql </h1> <p>   <img alt="Version" src="https://img.shields.io/badge/version-0.1.2-blue.svg?cacheSeconds=2592000" />   <img src="https://img.shields.io/badge/node-%3E%3D10-blue.svg" />  
Latest version: 0.1.2

<h1 align="center"> SPARQL Query generator: @graviola/json-schema-sparql </h1>
<p>
  <img alt="Version" src="https://img.shields.io/badge/version-0.1.2-blue.svg?cacheSeconds=2592000" />
  <img src="https://img.shields.io/badge/node-%3E%3D10-blue.svg" />
  <a href="https://gravio-la.github.io/json-schema-sparql" target="_blank">
    <img alt="Documentation" src="https://img.shields.io/badge/documentation-yes-brightgreen.svg" />
  </a>
  <a href="#" target="_blank">
    <img alt="License: MIT" src="https://img.shields.io/badge/License-MIT-yellow.svg" />
  </a>
</p>

A library to build SPARQL queries from JSON Schema

### 🏠 [Homepage](https://gravio-la.github.io/json-schema-sparql)

## Prerequisites

- node >=10

## Install

```sh
yarn add @graviola/json-schema-sparql
```

## Author

👤 **Sebastian Tilsch**

* Github: [@bastiion](https://github.com/bastiion)

## Show your support

Give a ⭐️ if this project helped you!
npm package: @gravis.finance/uikit
Description: Set of UI components for Gravis Finance projects
Latest version: 1.4.4

# Gravis Finance UIkit

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

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

## Install

`yarn add @gravis.finance/uikit`

### Types

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

## How to use the UIkit

If you want to use components from the UIkit, check the [Storybook documentation](https://gravis.github.io/uikit/)
npm package: @gravitate-js/expo-platform-science
Description: A native android wrapper of Platform Science's SDK for use in Expo projects
Author: Hunter Davis
Latest version: 0.1.12

# expo-platform-science

My new module

# API documentation

- [Documentation for the latest stable release](https://docs.expo.dev/versions/latest/sdk/platform-science/)
- [Documentation for the main branch](https://docs.expo.dev/versions/unversioned/sdk/platform-science/)

# Installation in managed Expo projects

For [managed](https://docs.expo.dev/archive/managed-vs-bare/) Expo projects, please follow the installation instructions in the [API documentation for the latest stable release](#api-documentation). If you follow the link and there is no documentation available then this library is not yet usable within managed projects &mdash; it is likely to be included in an upcoming Expo SDK release.

# Installation in bare React Native projects

For bare React Native projects, you must ensure that you have [installed and configured the `expo` package](https://docs.expo.dev/bare/installing-expo-modules/) before continuing.

### Add the package to your npm dependencies

```
npm install expo-platform-science
```

### Configure for Android




### Configure for iOS

Run `npx pod-install` after installing the npm package.

# Contributing

Contributions are very welcome! Please refer to guidelines described in the [contributing guide]( https://github.com/expo/expo#contributing).
npm package: @gravitguru/animations
Description: GravitGuru Animations - Animation library with Vite
Author: gravitguru
Latest version: 2.0.1

<p align="center">
  <img src="https://graviticon.surge.sh/assets/logo-l1tnxxH8.svg" width="120" alt="GravitGuru Animations">
</p>

# @gravitguru/animations

Elevate your web projects with the @gravitguru/animations package – a collection of dynamic and eye-catching animations for your React applications. Effortlessly enhance your user interface with these versatile and stylish motion designs.

## Installation

Integrate @gravitguru/animations into your React, Vite + React, or Node.js-based project with just a few simple steps:

```bash
> yarn add @gravitguru/animations
# or
> npm install @gravitguru/animations --save

after install stop the server 
---------------------------

> ctrl + c
> y (enter)

again start the server 
---------------------------
> npm run dev
#or
> npm start 
```


## Example Usage: css class example

```bash
import React from 'react';
import '@gravitguru/animations'; // Include in your main file

function YourComponent() {
  return (
    <div>
      <div className="slideInDown">Slide In Down Animation</div>
      <div className="fadeIn">Fade In Animation</div>
      <!-- Add more animations as needed -->
    </div>
  );
}

```
Animations : 
The @gravitguru/animations package offers a variety of animations, providing dynamic and engaging options to suit your project.
## Example Usage: css class example

```bash
.slideInDown {
  -webkit-animation-name: slideInDown;
  animation-name: slideInDown;
  -webkit-animation-duration: 1s;
  animation-duration: 1s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  }
  @-webkit-keyframes slideInDown {
  0% {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }
  @keyframes slideInDown {
  0% {
  -webkit-transform: translateY(-100%);
  transform: translateY(-100%);
  visibility: visible;
  }
  100% {
  -webkit-transform: translateY(0);
  transform: translateY(0);
  }
  }

```

# Usage Guidelines
Customize the animation style by changing the class or className and adjusting attributes.
Explore our documentation to find animation names and properties.
For different animation styles, modify the class name based on available options.


## Configuration

```bash
import '@gravitguru/animations'

(or)

import { AnimationContext } from "@gravitguru/animations";
<AnimationContext.Provider value={{ duration: 1000, className: "custom-animation" }}>
  <div className="slideInUp">Custom Slide In Up Animation</div>
</AnimationContext.Provider>;


```

## License

-This project is licensed under the MIT License.

Note: Animation styles are sourced from various projects, so please check each project's licenses accordingly.



For the npm and git links, you can use the same links as in the @gravitguru/icons package.

# Thank you 👋
npm package: @gravitguru/forest-ui
Description: Forest Ui - React component UI library with Vite and Tailwind CSS
Author: gravitguru
Latest version: 1.0.41


![Logo](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/th5xamgrr6se0x5ro4g6.png)

# Forest UI - Description

Forest UI component library provides a collection of reusable UI components built with Tailwind CSS and Vite React. It includes components like buttons, layout, theme mode, table, form, input, pagination, etc.

## Installation

You can install the component library using npm:

```bash
npm install @gravitguru/forestUI
```
Or using yarn:
```bash
yarn add @gravitguru/forestUI
```
Or using yarn:
```bash
import '@gravitguru/forestUI'; // import after run the server
```
#### Usage
To use components from your library, import them into your React components:
```bash

import { Button, Table, Form } from '@gravitguru/forestUI';

```
Edit the components in src/components.

Start the development server:
```bash
npm run dev
```
Visit http://localhost:8000 in your browser to preview your changes.

## Then, you can use these components in your JSX:
```bash
<Button variant="primary">Click me</Button>
<Table data={tableData} columns={tableColumns} />
<Form onSubmit={handleSubmit}>
  <Input name="username" type="text" />
  <Button type="submit">Submit</Button>
</Form>


```
## Available Components
Button: A customizable button component.
Layout: Pre-defined layout components for easier page structuring.
ThemeMode: Allows toggling between light and dark themes.
Table: A table component for displaying tabular data.
Form: Form components for building forms easily.
Input: An input component for text input.
100+ Components: A wide variety of components for different UI needs.
Full-Page Components: Ready-to-use components for entire page layouts.
Assets: Includes assets such as images, fonts, and more.
Icons: A collection of icons for use in your interfaces.
Animations: Provides animation utilities for enhancing user experience.

## Theming
Your component library supports theming using Tailwind CSS. You can customize the colors, typography, spacing, and more by editing the tailwind.config.js file in your project.

## Contributing
Contributions are welcome! If you have any ideas, bug fixes, or improvements, feel free to open an issue or create a pull request on GitHub.
## License
This component library is licensed under the MIT License. See the LICENSE file for details.
## Support
For support, email gravitguru@gmail.com or join our discord Team.
# Thank you 👋
npm package: @gravitguru/vitenextui-kit
Description: GravitGuru vite+react+javascript+tailwindcss uikit
Author: Gravit Guru gravitguru@gmail.com
Latest version: 1.0.11

# React + Vite

This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.

Currently, two official plugins are available:

- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh