open-index/open-npm huggingface dataset:
npm package: @sapphirecode/ui-modules
Description: preset vue components
Author: Timo Hocker
Latest version: 0.2.0

# ui-modules

version: 0.2.0

preset vue components

## Installation

npm:

> npm i --save ui-modules

yarn:

> yarn add ui-modules

## Usage

simply import the the components you need

```js
import {Button, Login} from '@sapphirecode/ui-components'

... vue code
```

### Button

A simple button component

properties:

- content (String): text to display in the button

events:

- click: fired when the button is clicked

You can also define custom content by adding it as child elements to the button.
This will only be displayed if the content property is not provided.

### Login

Simple login form with username and password

properties:

- user_label (String): Text to display above the username field. default: 'Name
  / Email'
- password_label (String): Text to display above the password field. default:
  'Password'
- login_label (String): Text to display in the login button. default: 'Login'

events:

- login: fired when the login button is pressed. payload: { username: String,
  password: String }

### Other components and Theming

... still experimental, documentation will come once there is a steady structure

## License

MIT © Timo Hocker
npm package: @sapphirejs/cache
Description: Caching for Sapphire Framework
Author: Fadion Dashi
Latest version: 0.0.13

# Cache

A simple, but effective cache system that supports different drivers and promises. It currently has a Redis transport, which should be good for almost any usecase, and a memory transport mostly for testing.

## Usage

Install and initialize the cache with a Redis transport.

```
$ npm install --save @sapphirejs/cache
```

```js
const { Cache, Transport } = require('@sapphirejs/cache')

const cache = new Cache(new Transport.Redis({ host: '127.0.0.1', port: 6379 }))
await cache.set('name', 'sapphire')
const value = await cache.get('name')
```

By using `await` it's a breeze to work with. Just keep in mind that you'll need an `async` function to use `await`, something omitted for brevity. Redis configuration can be set according to [these options](https://github.com/NodeRedis/node_redis#options-object-properties) on the Redis client. For a local setup, they'll most probably work out of the box.

The `Redis` transport automatically executes `JSON.stringify()` when setting values, and `JSON.parse()` when retrieving them. There's no need to call them manually.

## API

A list of the supported methods:

**get(key)** Retrieve `key` from the cache or null if it doesn't exist.

**set(key, value, minutes = 60)** Set the `key` to `value` with an expiry of `minutes`.

**forever(key, value)** Set the `key` to `value` with a big expiry time.

**increment(key, amount = 1)** Increment the number value under `key` with `amount`.

**decrement(key, amount = 1)** Decrement the number value under `key` with `amount`.

**override(key, value, minutes = 60)** Set the `key` to `value` only if it already exists in the cache.

**add(key, value, minutes = 60)** Set the `key` to `value` only if it doesn't already exist.

**pop(key)** Retrieve `key` and delete it.

**has(key)** Check if `key` exists in the cache.

**delete(key)** Delete `key` from the cache.

**flush()** Delete all the keys from the cache.

## Custom Transports

Transports are classes that need to implement most of the methods above and wrap the return value into a promise. Let's imagine you need to build a `Memcached` driver. It should implement all the following methods:

```js
class MemcachedTransport {
  get(key) {}
  set(key, value, minutes) {}
  increment(key, amount) {}
  decrement(key, amount) {}
  has(key) {}
  delete(key) {}
  flush() {}
}
```

## Testing

A `Memory` transport is provided to ease testing without the need to hit Redis or write mocks for it. Just inject that instead of the actual transport you're using. An example in Jest:

```js
const cache = new Cache(new Transport.Memory())
cache.set('name', 'sapphire')
expect(cache.get('name')).toBe('sapphire')
```
npm package: @sapphirejs/config
Description: Config Reader for Sapphire Framework
Author: Aleksander Koko
Latest version: 0.0.15

# Config

A simple configuration package mostly to be used internally for Sapphire Framework.

## Usage

```
$ npm install --save @sapphirejs/config
```

Imagine we have a configuration file with the following contents:

```js
const cfg = {
  name: 'sapphire',
  secret: {
    password: 'framw123'
  }
}
```

We can access those configuration options:

```js
const Config = require('@sapphirejs/config')

const config = new Config(cfg)
config.get('name') // sapphire
```

It even supports path syntax for deep nested object keys:

```js
config.get('secret.password') // framw123
```

A default value can be passed if a key doesn't exist:

```js
config.get('i.dont.exist', 'or maybe i do') // or maybe i do
```

To quickly check if a quick exists:

```js
config.has('app.name') // true
```
npm package: @sapphirejs/event
Description: Event System for Sapphire Framework
Author: Fadion Dashi
Latest version: 0.0.14

# Event

A thin wrapper for Node's native [events](https://nodejs.org/api/events.html). Mostly to offer a few abstractions, a base class to be extended by event classes, and generally a tighter integration with Sapphire Framework. Other than that, it doesn't have any logic of its own and can be completely ignored if you don't like even such thin abstractions.

## Usage

```
$ npm install --save @sapphirejs/event
```

As you'd expect, events can be listened with `on` and emmited with `emit`.

```js
const { Event } = require('@sapphirejs/event')

const event = new Event()
event.on('some.event', () => {
  console.log('Yay, I was called')
})
event.emit('some.event')
```

More interesting though, are event classes as a way to organize and encapsulate event handlers.

```js
class SendWelcomeEmail {
  listen(userId) {
    // send email to user with id=userId
  }
}

event.on('user.registered', new SendWelcomeEmail().listen)
event.emit('user.registered', 10)
```

An event can have multiple listeners:

```js
event.on('user.registered', new SendWelcomeEmail().listen)
event.on('user.registered', new SendConfirmationSms().listen)

// or

event.on('user.registered', [
  new SendWelcomeEmail().listen,
  new SendConfirmationSms().listen
])


event.emit('user.registered')
```

## BaseEvent

The `BaseEvent` class enforces the usage of the `listen` method and has the capabilities to be extended by the framework, like injecting a context object as argument. It is completely optional to use, but if you decide on it, this is how it's used:

```js
const { Event, BaseEvent } = require('@sapphirejs/event')

class SendWelcomeEmail extends BaseEvent {
  listen(userId) {
    // send email to user with id=userId
  }
}

const event = new Event()
event.on('user.registered', new SendWelcomeEmail())
event.emit('user.registered', 7)
```

Notice how we don't pass the `listen` method on the event listener. It is automatically resolved when extending BaseEvent.

## Event Names

Event names can be anything unique, so a string or constant comes to mind. However, if you think about it, class are also a very good way of having non-string event names. You can't misspell them, because the runtime or even your IDE will complain, so fewer bugs. And they're so easy to use:

```js
class UserWasRegistered {}

event.on(UserWasRegistered, new SendWelcomeEmail())
event.on(UserWasRegistered, new SendConfirmationSms())

event.emit(UserWasRegistered)
```
npm package: @sapphirejs/hash
Description: Hashing Package for Sapphire Framework
Author: Fadion Dashi
Latest version: 0.0.14

# Hash

Generates and compares hashes using [bcrypt](https://github.com/kelektiv/node.bcrypt.js) or [argon2](https://github.com/ranisalt/node-argon2). It serves as a simple interface to those 2 libraries for easy of use and configuration internally in Sapphire Framework.

## Usage

```
$ npm install --save @sapphirejs/hash
```

The main `Hash` class takes an algorithm as a parameter, either `Algorithm.Bcrypt` or `Algorithm.Argon2`.

To generate a hash:

```js
const { Hash, Algorithm } = require('@sapphirejs/hash')

const hasher = new Hash(new Algorithm.Bcrypt())
const hash = await hasher.generate('sTr0nG_pA55')
```

To compare a plaintext password against a hash:

```js
if (await hasher.compare('some_pass', hash)) {
  // you got in!
}
```

Both `generate` and `compare` return a Promise, and when used with `await`, need to be called in an `async` function which was omitted in the examples for brevity.

## Configuration

Bcrypt takes a single `rounds` option that configures the number of rounds the module will go through to hash the password. The higher the value, the stronger the hash but the more expensive to compute. By default it's set to `12` rounds, which is a good start.

```js
new Hash(new Algorithm.Bcrypt({ rounds: 14 }))
```

Argon2 has more flexibility in terms of configuration. Below are the options it takes and their default values:

```js
new Hash(new Algorithm.Argon2({
  timeCost: 3,
  memoryCost: 12,
  parallelism: 1
}))
```

## Custom Algorithms

If you need to extend the provided algorithms with another third-party one, you can achieve it with a simple class that implements the `generate` and `compare` methods. Both of them should return promises. An example:

```js
class AwesomeAlgorithm {
  generate(plain) {
    // return the hash
  }

  compare(plain, hash) {
    // compare and return true|false
  }
}
```
npm package: @sapphirejs/intl
Description: Internationalization for Sapphire Framework
Author: Fadion Dashi
Latest version: 0.0.14

# Internationalization

An Internationalization (Intl for short) package that formats locale strings. It is a thin wrapper on top of [formatjs](https://formatjs.io/) that provides a few facilities like deep nested object paths and changing the locale dynamically.

## Locale Object

Before diving into its usage, you need to have a correctly formatted plain Javascript object with the locale keys and messages. It may look something like the one below, but it can be as nested as you need.

```javascript
let locales = {
  'en-us': {
    welcome: 'Welcome {name}',
    messages: `You have {messages, plural, =0 {no messages} one {1 message} other {{messages} messages}}`,
    first: { second: { third: `Hi {name} from deep nested key` }}
  },
  'sq-al': {
    welcome: 'Miresevjen {name}',
    messages: `Ju {messages, plural, =0 {s'keni asnje mesazh} one {keni 1 mesazh} other {keni {messages} mesazhe}}`
  }
}
```

## Usage

```
$ npm install --save @sapphirejs/intl
```

For the simplest and probably most typical case, you may have a greeting message in your website:

```javascript
const Intl = require('@sapphirejs/intl')

new Intl(locales, 'en-us')
  .format('welcome', { name: 'John' })
// Welcome John
```

For the plural forms, the message format is more contrived with different cases of occurrence, but it's usage is exactly the same:

```javascript
new Intl(locales, 'en-us')
  .format('messages', { messages: 0 })
// You have no messages
```

No matter how deep objects are nested, they can be easily accessed as a path:

```javascript
new Intl(locales, 'en-us')
  .format('first.second.third', { name: 'John' })
// Hi John  from deep nested key
```


Language can be set dynamically after initialization:

```javascript
let intl = new Intl(locales, 'en-us')
intl.locale = 'sq-al'
intl.format('welcome', { name: 'Xhon' })
// Miresevjen Xhon
```

Or even temporarly for a single call of `format()`:

```javascript
let intl = new Intl(locales, 'en-us')
intl.in('sq-al').format('welcome', { name: 'Xhon' })
// Miresevjen Xhon
```

Finally, you can set a fallback locale during initialization. That locale will be used to search the key if it doesn't exist in the main one.

```javascript
new Intl(locales, 'sq-al', 'en-us')
  .format('first.second.third', { name: 'John' })
// Hi John from deep nested key
```
npm package: @sapphirejs/logger
Description: Logger for Sapphire Framework
Author: Fadion Dashi
Latest version: 0.0.17

# Logger

An initializer for [Winston](https://github.com/winstonjs/winston). It doesn't add or modify anything and it exists only to encapsulate winston in a named package and provide some sensible defaults to the transports.

## Usage

```
$ npm install --save @sapphirejs/logger
```

```javascript
const { Logger, Transport } = require('@sapphirejs/logger')

const logger = new Logger({}, new Transport.Console()).createLogger()

logger.emerg('Emergency')
logger.alert('Alert')
logger.crit('Critical')
logger.error('Error')
logger.warning('Warning')
logger.notice('Notice')
logger.info('Information')
logger.debug('Debug')
```

The rest of the API is exposed by winston.

# Transports

At the moment there are 3 included transports with plans for more in the future.

## Console

Output messages directly to the console (stdout/stderr).

```javascript
const { Logger, Transport } = require('@sapphirejs/logger')
const logger = new Logger({}, new Transport.Console()).createLogger()
```

## File

Write messages to a single log file.

```javascript
const { Logger, Transport } = require('@sapphirejs/logger')
const logger = new Logger({}, new Transport.File({ filename: 'my.log' })).createLogger()
```

## Daily File Rotate

Write messages to a different file every day. This is a good way of chunking a big log into individual files by date.

```javascript
const { Logger, Transport } = require('@sapphirejs/logger')
const logger = new Logger({}, new Transport.Daily({ filename: './logs/%DATE%.log' })).createLogger()
```
npm package: @sapphirejs/request
Description: A Request Wrapper for Sapphire Framework
Author: Fadion Dashi
Latest version: 0.0.14

# Request

A request wrapper with multiple adapters intended for internal use in Sapphire Framework. It basically takes a request object from a server framework (currently only Express) and wraps it in a generic class.

## Usage

```
$ npm install --save @sapphirejs/request
```

```js
const { Request, Adapter } = require('@sapphirejs/request')
const req // request from express
const request = new Request(new Adapter.Express(req))
request.body
request.params[0]
```
npm package: @sapphirejs/router
Description: Routing package for Sapphire Framework
Author: Aleksander Koko
Latest version: 0.0.15

# Router

A Route builder that produces a consumable data structure. It servers as a middleman between the client defined routes and consumers, which in turn use those routes in Express, socket server, console commands, or whatever the usecase is.


## Usage

```
$ npm install --save @sapphirejs/router
```

The router handles exactly what Express or any other router expects, with a few additions like groups and resources. For a quick overview:

```javascript
const { Route } = require('@sapphirejs/router')

const route = new Route()

route.get('/user/:id', callback)

route.export()

/**
 * [
 *    {
 *      path: '/users/:id',
 *      type: 'http',
 *      middleware: [],
 *      handler: [Function],
 *      meta: { method: 'get' }
 *    }
 * ]
 */
```

## Middleware

Middleware are also pretty much typical. They can be passed as a single function or an array of functions:

```js
route.get('/tasks', middleware, callback)
route.get('/jobs', [middleware1, middleware2], callback)
```

## Groups

Groups are very useful for routes with a common prefix, such as an `admin` panel:

```js
route.group('/admin', (route) => {
  // /admin/dashboard
  route.get('/dashboard', callback)
  // /admin/statistics
  route.get('/statistics', callback)
})
```

A group can have middleware applied to every sub route. Those will be combined with the route's own middleware, where the group's ones take precedence:

```js
route.group('/admin', groupMiddleware, (route) => {
  route.get('/dashboard', middleware, callback)
  route.get('/statistics', middleware)
})
```

## Resources

Resources are a shortcut for creating CRUD routes that respond to HTTP verbs. They define a number of paths that are expected to be handled by controller methods. If you imagine a `users` resource, it will generate the following paths with the respective verb and methods:

Path | Verb | Method
--- | --- | ---
/users | GET | index
/users/:id/edit | GET | edit
/users/new | GET | store
/users/:id | GET | show
/users | POST | create
/users/:id | PUT | update
/users/:id | DELETE | destroy

To generate the above, simply create a `UserController` class that implements all the methods and call it with:

```js
route.resource('/users', new UserController())
```

The default behaviour is to include both restful and non-restful methods for editing and creating data, but you can easily define which methods you want with the `only` option:

```js
route.resource('/users', new UserController(), { only: ['index', 'show', 'create'] })
```

Or exclude the methods you don't need with the `except` option:

```js
route.resource('/users', new UserController(), { except: ['edit', 'store'] })
```

Finally, resources can be nested to create relationship between data. Let's imagine the `user` has `comments`, which we want to define as a sub-resource:

```js
route.resource('/users', new UserController(), (route) => {
  route.resource('/comments', new ComentController())
})
```

It will generate every route for `/users`, but also for `/users/comments`.
npm package: @sapphireui/toggle
Description: Toggle component for the Sapphire UI component library
Author: Avinash Peelukhana
Latest version: 1.0.0

# @sapphireui/toggle

A customizable toggle component for React applications.

## Installation

```bash
npm install @sapphireui/toggle
```

## Usage

```tsx
import { Toggle } from '@sapphireui/toggle'

function App() {
  const [checked, setChecked] = useState(false)

  return (
    <Toggle
      checked={checked}
      onChange={setChecked}
      size="md"
      variant="default"
    />
  )
}
```

## Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| `checked` | `boolean` | `false` | Whether the toggle is checked |
| `disabled` | `boolean` | `false` | Whether the toggle is disabled |
| `onChange` | `(checked: boolean) => void` | `undefined` | Callback when toggle state changes |
| `size` | `'sm' \| 'md' \| 'lg'` | `'md'` | Size of the toggle |
| `variant` | `'default' \| 'primary' \| 'secondary'` | `'default'` | Color variant of the toggle |

## Development

```bash
# Install dependencies
npm install

# Start development server
npm run dev

# Build the component
npm run build

# Run tests
npm run test

# Start Storybook
npm run storybook
```
npm package: @sapporta/ui
Description: React admin UI for Sapporta projects.
Author: Jasim A Basheer
Latest version: 0.2.0

# @sapporta/ui

React admin UI for Sapporta projects.

## Stack

Vite + React 19 + Tailwind v4 + shadcn/ui + Zustand

## Custom Views — UI Routing

Custom views are routed at `/p/:projectId/views/:viewName`.

The view component (default export from the `.tsx` file) runs in the browser.

## Vite Plugin: sapportaViews

The `vite-plugin-sapporta-views.ts` plugin auto-discovers project `views/` directories from the registry at startup, generating a virtual module (`virtual:sapporta-views`) with lazy `import()` statements.