open-index/open-npm huggingface dataset:
npm package: @marcinkwiatkowski/mock-component-plugin
Description: PWA Studio Component which mocked GraphQL data
Author: Marcin Kwiatkowski
Latest version: 1.0.4

# Example PWA Studio component which mocked GraphQL query and mutation

Source code for PWA Studio tutorial

https://marcin-kwiatkowski.com/en/how-to-mock-graphql-queries-nad-mutations/

![Preview](preview.png)
npm package: @marcinkwiatkowski/mock-component-plugin-venia-overwrites
Description: PWA Studio Component which mocked GraphQL data
Author: Marcin Kwiatkowski
Latest version: 1.0.3

# Venia UI Overwrites for PWA Studio MockComponent plugin

Source code for PWA Studio tutorial

https://marcin-kwiatkowski.com/en/how-to-mock-graphql-queries-nad-mutations/
npm package: @marcinp92/randomid-generator
Description: This pack provide us possibility to generate random signs string. We can provide information about length of random string.
Author: MarcinP
Latest version: 1.0.1

This pack provide us possibility to generate random signs string. We can provide information about length of random string.

// How to use it ?? 

` In the console install pack : yarn install @marcinp92/randomid-generator
` in your code import pack, for example use : const randomId = require('@marcinp92/randomid-generator');
` you can use this pack with :
	const randomString = randomID(10) - when 10 is a lenght of our string.
npm package: @marcinukleja/simple-ds-example
Description: Minimal design system with custom headless components and design tokens
Latest version: 0.2.2

# @marcinukleja/simple-ds-example

A lightweight, custom component library with design tokens for rapid prototyping with [Figma Make](https://www.figma.com/make/). Features a curated set of headless UI components, reusable design tokens, and no external dependencies beyond React.

## Installation

```bash
npm install @marcinukleja/simple-ds-example
```

## Usage

```tsx
import {
  PageHeading,
  Card,
  Badge,
  Sidebar,
  ListItem,
  ActionButton,
  Text,
  colors,
  spacing,
} from '@marcinukleja/simple-ds-example'

function App() {
  return (
    <>
      <PageHeading
        title="Dashboard"
        description="Welcome back"
        badgeText="online"
        badgeVariant="active"
      />
      <Card
        overlineText="Status"
        mainText="All systems operational"
        badgeText="active"
        badgeVariant="active"
      />
      <ListItem
        icon="⚙️"
        primaryText="Settings"
        secondaryText="Manage preferences"
      />
      <ActionButton label="Save Changes" variant="primary" />
    </>
  )
}
```

## Components

### Layout & Structure

- **`Sidebar`** - Sidebar navigation with logo, product name, and menu items

### Data Display

- **`Card`** - Card with overline text, main content, and optional badge
- **`PageHeading`** - Page heading with title, description, and optional status badge
- **`ListItem`** - List item with leading/trailing icons, primary and secondary text

### UI Elements

- **`Badge`** - Status badge with multiple variants (default, active, warning, idle)
- **`Text`** - Flexible text component with size, color, and weight options

### Actions

- **`ActionButton`** - Button with primary, secondary, and tertiary variants
- **`CardHeader`** - Optional card header with icon and text

## Design Tokens

All components respect the design token system:

### Colors

```typescript
colors: {
  brand: {
    50-900: Blue color scale from light to dark
  }
}
```

### Spacing

```typescript
spacing: {
  px, 0, 1, 2, 3, 4, 5, 6, 8, 10, 12, 16, 20
}
```

### Border Radius

```typescript
radii: {
  none, sm, md, lg, xl, full
}
```

### Typography

```typescript
typography: {
  fonts: { heading, body, mono },
  fontSizes: { xs, sm, md, lg, xl, 2xl, 3xl }
}
```

## Figma Make

This package is designed to work seamlessly with Figma Make for prototyping. Components are built as headless UI elements, making them easy to integrate with your Figma designs.

## License

MIT
npm package: @marciocadev/wchecks
Description: wchecks library for Wing
Author: Marcio Cruz de Almeida
Latest version: 0.1.0

# wchecks

## Prerequisites

* [winglang](https://winglang.io).

## Installation

```sh
npm i @winglibs/wchecks
```

## Usage

```js
bring wchecks;

let adder = new wchecks.Adder();
```

## License

This library is licensed under the [MIT License](./LICENSE).
npm package: @marciocadev/wjwt
Description: wjwt library for Wing
Author: Marcio Cruz de Almeida
Latest version: 1.0.0

# wjwt

## Prerequisites

* [winglang](https://winglang.io).

## Installation

```sh
npm i @winglibs/wjwt
```

## Usage

```js
bring wjwt;

let adder = new wjwt.Adder();
```

## License

This library is licensed under the [MIT License](./LICENSE).
npm package: @marciocadev/wnew
Description: wnew library for Wing
Author: Marcio Cruz de Almeida
Latest version: 0.0.7

# wnew

## Prerequisites

* [winglang](https://winglang.io).

## Installation

```sh
npm i @winglibs/wnew
```

## Usage

```js
bring wnew;

let adder = new wnew.Adder();
```

## License

This library is licensed under the [MIT License](./LICENSE).
npm package: @marcius-capital/marcius-css
Description: Flat design: a lightweight, responsive and modern CSS framework
Author: Nikita Marcius
Latest version: 0.1.3

# Marcius.css
Marcius.css - A Lightweight, Responsive and Modern CSS Framework

``Default`` (light) and ``Obscure`` (dark) themes are available for use.

[Documentation](https://picturepan2.github.io/spectre/getting-started.html)

Based on [Spectre.css](https://github.com/picturepan2/spectre)

## Install

### Package manager

```node

yarn add @marcius-capital/marcius-css

npm install @marcius-capital/marcius-css
```

### Connect in .sass file

```css
// Default theme
@import "~@marcius-capital/marcius-css";

// Obscure theme
@import "~@marcius-capital/marcius-css/src/default-obscure";
```

## Stay In Touch
You can ask questions in our Telegram channel: [https://t.me/joinchat/G5DV0xUO-pvjEmoWc7dBUg](https://t.me/joinchat/G5DV0xUO-pvjEmoWc7dBUg)

## License
[MIT](http://opensource.org/licenses/MIT) | Copyright (c) 2019-present
npm package: @marcius-studio/marcius-css
Description: Lightweight, responsive and modern CSS framework
Author: Nikita Marcius https://github.com/marcius-studio
Latest version: 0.0.1

<div align="center">
    <a href="https://github.com/marcius-studio" target="_blank">
    <img src="docs/assets/logo-marcius-studio.svg" height="100px">
    </a>   
    <h1>Marcius.css</h1>
</div>

[Documentation](https://marcius-studio.github.io/marcius-css/) | [Discord community](https://discordapp.com/invite/DaWfrPx)

**Marcius.css** - lightweight, responsive and modern CSS framework.

Provides basic styles for typography and elements, flexbox based responsive layout system, pure CSS components and utilities with best practice coding and consistent design language.

*  **Default** - light theme
*  **Obscure** - dark theme

## Install

### Package manager

```node
$ yarn add @marcius-capital/marcius-css
$ npm install @marcius-capital/marcius-css
```

### Connect in `.sass`, `.scss` file

```css
// Default theme
@import "~@marcius-capital/marcius-css";

// Obscure theme
@import "~@marcius-capital/marcius-css/src/default-obscure";
```

## Stay in touch

Feel free to ask questions 😊

* Discord: Nikita Marcius#2274
* Telegram: [@nikitamarcius](https://ttttt.me/nikitamarcius)

## Contributors

<a href="https://github.com/marcius-studio">
<img src="https://raw.githubusercontent.com/marcius-studio/storage/master/badge-marcius-studio.svg" height="60">
</a>  

## License
[MIT](http://opensource.org/licenses/MIT) | Copyright (c) 2019-present

Based on [Spectre.css](https://github.com/picturepan2/spectre)
npm package: @marcj/estdlib
Description: engineering stdlib for typescript
Author: Marc J. Schmidt
Latest version: 0.1.19

# estdlib.ts

[![Build Status](https://travis-ci.com/marcj/estdlib.ts.svg?branch=master)](https://travis-ci.com/marcj/estdlib.ts)
[![npm version](https://badge.fury.io/js/%40marcj%2Festdlib.svg)](https://badge.fury.io/js/%40marcj%2Festdlib)

### Installation

```
npm install @marcj/estdlib
```


### Usage example

```typescript
import {each} from "@marcj/estdlib";

for (const item of each({a: 1, b: 2, c: 3})) {
    console.log(item)
}
```
npm package: @marcj/estdlib-rxjs
Description: engineering stdlib for typescript
Author: Marc J. Schmidt
Latest version: 0.1.19

# estdlib.ts RXJS

[![Build Status](https://travis-ci.com/marcj/estdlib.ts.svg?branch=master)](https://travis-ci.com/marcj/estdlib.ts)
[![npm version](https://badge.fury.io/js/%40marcj%2Festdlib.svg)](https://badge.fury.io/js/%40marcj%2Festdlib-rxjs)

### Installation

```
npm install @marcj/estdlib-rxjs
```


### Usage example

```typescript
import {Subscriptions} from "@marcj/estdlib-rxjs";

class MyComponent implements OnDestroy, OnInit {
    private subs = new Subscriptions;

    public onInit() {
        this.subs.add = this.observable.subscribe(() => {
            //do something
        });

        this.subs.add = this.anotherOne.subscribe(() => {
            //do something
        });
    }
    
    public OnDestroy() {
        this.subs.unsubscribe();
    }
}

```
npm package: @marcj/glut-server
Description: Installation:
Author: Kamille Team
Latest version: 0.0.33

## Glut.ts Server

Installation:

```
npm install @marcj/glut-server @marcj/glut-core reflect-metadata rxjs buffer
```

#### Server

Example

```typescript

@Controller('user')
class UserController implements UserControllerInterface{

    @Action()
    names(): string {
        return ['name1', 'name2'];
    }
    
    @Action()
    users(): Observable<User> {
        return new Observable((observer) => {
            observer.next(new User('Peter 1'));
            
            setTimeout(() =>{
                observer.next(new User('Peter 2'));
                observer.complete();
            }, 1000);
        });
    }
    
    @Action()
    userList(): Collection<User> {
        const collection = new Collection(User);
        collection.add(new User('Peter 1'));
        collection.add(new User('Peter 2'));
        collection.add(new User('Peter 3'));
        collection.loaded();
        
        setTimeout(() => {
            //whenever you change the collection, we send the operations to the client
            //and keep everything in sync
            collection.add(new User('Peter 4'));
        }, 1000);
        
        return collection;
    }
}

@ApplicationModule({
    controllers: [UserController],
    connectionProviders: [],
    notifyEntities: [User],
})
class MyApp extends Application {
    async bootstrap(): Promise<any> {
        await super.bootstrap();
        console.log('bootstrapped =)');
    }

    async authenticate(token: any): Promise<Session> {
        console.log('authenticate', token);
        return super.authenticate(token);
    }
}

const app = ApplicationServer.createForModule(MyApp);
app.start();
```
npm package: @marcj/marshal
Description: Marshal is a library to marshal JSON-representable data from JSON to class instance to Mongo and vice versa.
Author: Marc J. Schmidt
Latest version: 2.1.13

# Core

[![npm version](https://badge.fury.io/js/%40marcj%2Fmarshal.svg)](https://badge.fury.io/js/%40marcj%2Fmarshal)

This is the main module of marshal you can install in your frontend and/or backend project.

```
npm install @marcj/marshal
```

See the main documentation at [marshal.marcj.dev](https://marshal.marcj.dev) for more information.
npm package: @marcj/marshal-mongo
Description: Marshal's Mongo database management.
Author: Marc J. Schmidt
Latest version: 2.1.13

## Mongo Database for Marshal

[![npm version](https://badge.fury.io/js/%40marcj%2Fmarshal-mongo.svg)](https://badge.fury.io/js/%40marcj%2Fmarshal-mongo)

Marshal's MongoDB database abstraction makes it super easy to
retrieve and store data from and into your MongoDB. We make sure the
data from your JSON or class instance is correctly converted to MongoDB
specific types and inserted IDs are applied to your class instance.

```
npm install @marcj/marshal @marcj/marshal-mongo reflect-metadata mongodb
```

```typescript

import {Database, Connection} from "@marcj/marshal-mongo";

const database = new Database(new Connection('localhost', 'mydb', 'username', 'password'));

const instance = new SimpleModel('My model');
await database.add(instance);

const list = await database.query(SimpleModel).find();
const oneItem = await database.query(SimpleModel).filter({id: 'f2ee05ad-ca77-49ea-a571-8f0119e03038'}).findOne();

```