open-index/open-npm huggingface dataset:
npm package: @ajmchambers/lsk-test
Description: Trying out lit-starter-kit.
Author: Alan Chambers
Latest version: 0.0.5

# Lit Starter Kit

Welcome to the Lit Starter Kit. This is not an official kit for the Lit library, but this is a tool to get a component library up and running quickly.

## Features

This repository is designed to be a "batteries included" repo, so you can hit the ground running with what you need to start delivering components. This repo includes:

- ✅ Library and component scaffolding
- ✅ [Storybook](https://storybook.js.org/docs/get-started/frameworks/web-components-vite?renderer=web-components) integration (with [helpers](https://github.com/wc-toolkit/storybook-helpers))
- ✅ CDN build (in `/cdn`)
- ✅ NPM build (in `/dist`)
- ✅ Testing
- ✅ Documentation
- ✅ [React wrappers](https://www.npmjs.com/-package/custom-element-react-wrappers) (in - `/react`)
- ✅ [JSX integration](https://github.com/wc-toolkit/jsx-types) - (in `/types`)
- ✅ [Vue.js integration](https://www.npmjs.-com/package/-custom-element-vuejs-integration) (in `/- types`)
- ✅ [Svelte integration](https://www.npmjs.-com/package/-custom-element-svelte-integration) (in `/- types`)
- ✅ [SolidJS integration](https://www.npmjs.-com/package/-custom-element-solidjs-integration) (in `/- types`)
- ✅ [HTML linter](https://www.npmjs.com/package/eslint-plugin-custom-element) (in `/eslint`)

## Getting Started

You can choose to fork this repository directly or you can run the following command to create a new project.

```bash
npm init lit-starter-kit your-project-name
```

## Running the Code

The development environment uses [Storybook](https://storybook.js.org/) to showcase and document the components. The documentation files are written in MDX files to increase portability in case you wan to use a different tool for documenting your components.

```bash
npm run dev
```

### Creating a New Component

This project leverages [plop](https://www.npmjs.com/package/plop) to generate new components in your library. You can create a new component by running the following command and following the prompts.

```bash
npm run new
```

## Building the Project

Generating the final build assets will generate the `dist` assets for the NPM package, the content for the CDN located in the `cdn` directory at the root of the project, as well as the meta content for your components like framework integrations like types and react wrappers.

```bash
npm run build
```

## Testing the Components

Tests are written and executed using [web-test-runner](https://modern-web.dev/docs/test-runner/overview/) which execute your tests in _real_ browsers to validate your APIs are working as expected in the environments you intend to be using them in.

Tests can be configured in the `web-test-runner.config.js` file located at the root of the project.

Tests can be run using the following command:

```bash
npm test
```
npm package: @ajonp/sanity-plugin-ajonp-gcp-cloud-build
Description: Dashboard Widget for Google Cloud Platform Cloud Build
Author: Alex Patterson
Latest version: 0.0.6

# sanity-plugin-ajonp-gcp-cloud-build

Use Google Cloud Platform for building you sanity studio.

## Get Google Cloud Platform Credential

### clientId

![GCP Cred](https://res.cloudinary.com/ajonp/image/upload/v1573715420/ajonp-ajonp-com/lessons/sanity-plugin-ajonp-gcp-cloud-build/Screen_Shot_2019-11-14_at_2.10.11_AM.png)

![](https://res.cloudinary.com/ajonp/image/upload/v1573715611/ajonp-ajonp-com/lessons/sanity-plugin-ajonp-gcp-cloud-build/Screen_Shot_2019-11-14_at_2.12.53_AM.png)
![](https://res.cloudinary.com/ajonp/image/upload/v1573715611/ajonp-ajonp-com/lessons/sanity-plugin-ajonp-gcp-cloud-build/Screen_Shot_2019-11-14_at_2.13.13_AM.png)

### projectId

![](https://res.cloudinary.com/ajonp/image/upload/v1573715703/ajonp-ajonp-com/lessons/sanity-plugin-ajonp-gcp-cloud-build/Screen_Shot_2019-11-14_at_2.14.24_AM.png)

### scope

Can be left the same

## How to use

## Install plugin

`npm install @ajonp/sanity-plugin-ajonp-gcp-cloud-build`

## Add plugin to project

`sanity.json` add `@ajonp/sanity-plugin-ajonp-gcp-cloud-build`

```
  "plugins": [
    "@sanity/base",
    "@sanity/components",
    "@sanity/default-layout",
    "@sanity/default-login",
    "@sanity/dashboard",
    "@sanity/desk-tool",
    "dashboard-widget-structure-menu",
    "dashboard-widget-document-list",
    "dashboard-widget-netlify",
    "@sanity/code-input",
    "ajonp-studio-logo",
    "@ajonp/sanity-plugin-ajonp-gcp-cloud-build"
  ],
```

### Update Dashboard

Add similar to the following

`studio/dashBoardConfig.js`

```
{
    name: 'ajonp-gcp-cloud-build',
    layout: { width: 'medium' },
    options: {
    clientId: '535596779905-t1p17p88psrcat5ptvsovc6ktv4ovten.apps.googleusercontent.com',
    projectId: 'ajonp-ajonp-com',
    scope: `https://www.googleapis.com/auth/userinfo.email https://www.googleapis.com/auth/userinfo.profile https://www.googleapis.com/auth/cloud-platform`
    }
}
```
npm package: @ajsf/bootstrap4
Description: Angular JSON Schema Form builder using Bootstrap 4 UI
Author: https://github.com/hamzahamidi/ajsf/graphs/contributors
Latest version: 0.8.0

# @ajsf/bootstrap4

## Getting started

```shell
npm install @ajsf/bootstrap4@latest
```

With YARN, run the following:

```shell
yarn add @ajsf/bootstrap4@latest
```

Then import `Bootstrap4FrameworkModule` in your main application module if you want to use `bootstrap4` UI, like this:

```javascript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';

import { Bootstrap4FrameworkModule } from '@ajsf/bootstrap4';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [ AppComponent ],
  imports: [
    Bootstrap4FrameworkModule
  ],
  providers: [],
  bootstrap: [ AppComponent ]
})
export class AppModule { }
```

For basic use, after loading JsonSchemaFormModule as described above, to display a form in your Angular component, simply add the following to your component's template:

```html
<json-schema-form
  loadExternalAssets="true"
  [schema]="yourJsonSchema"
  framework="bootstrap-4"
  (onSubmit)="yourOnSubmitFn($event)">
</json-schema-form>
```

Where `schema` is a valid JSON schema object, and `onSubmit` calls a function to process the submitted JSON form data. If you don't already have your own schemas, you can find a bunch of samples to test with in the `demo/assets/example-schemas` folder, as described above.

`framework` is for the template you want to use, the default value is `no-framwork`. The possible values are:

* `material-design` for  Material Design.
* `bootstrap-3` for Bootstrap 3.
* `bootstrap-4` for 'Bootstrap 4.
* `no-framework` for (plain HTML).

## Code scaffolding

Run `ng generate component component-name --project @ajsf/bootstrap4` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module --project @ajsf/bootstrap4`.
> Note: Don't forget to add `--project @ajsf/bootstrap4` or else it will be added to the default project in your `angular.json` file.

## Build

Run `ng build @ajsf/bootstrap4` to build the project. The build artifacts will be stored in the `dist/` directory.

## Running unit tests

Run `ng test @ajsf/bootstrap4` to execute the unit tests via [Karma](https://karma-runner.github.io).
npm package: @ajustee/mde-popover
Description: A fork of @material-extended/mde
Author: Joe Jordan Brown
Latest version: 4.0.0

# Angular Popover

A fork of [https://github.com/joejordanbrown/popover](https://github.com/joejordanbrown/popover) and updated for Angular 12.

#### Links
[Original @material-extended/mde Popover Demo](https://uixd.co.uk/open-source-software/material-extended/demo) | [StackBlitz Template](https://stackblitz.com/edit/mde-popover)



### Project status
Angular Popover is production ready.

This was originally created as an example for a `@angular/material` issue feature request.
Issue can be found at [angular/material2#2691](https://github.com/angular/material2/issues/2691)

If you'd like to contribute please create an issue or pull request.



### Examples

**Material theme picker**

[![Material theme picker](https://media.giphy.com/media/jsxheZJXN1346GD5St/giphy.gif)](https://stackblitz.com/edit/angular-popover-demo)

**Standard popover**

![image](https://cloud.githubusercontent.com/assets/10200431/22394189/02e9b21e-e511-11e6-9f91-c6b470a6b212.png)


![image](https://cloud.githubusercontent.com/assets/10200431/22394186/e21a235c-e510-11e6-9cde-948b1a4382bc.png)

**Google+ style popover**

![image](https://cloud.githubusercontent.com/assets/10200431/22397870/4f27ddba-e573-11e6-943f-2d737b59d39e.png)





### Installation
Install npm package using:

`yarn add @ajustee/mde-popover`
or
`npm install @ajustee/mde-popover`

Install required packages @angular/cdk

`yarn add @angular/cdk`
or
`npm install @angular/cdk`

### Initial setup
The CDK overlays depend on a small set of structural styles to work correctly. If you're using Angular Material, these styles have been included together with the theme, otherwise if you're using the CDK on its own, you'll have to include the styles yourself. You can do so by importing the prebuilt styles in your global stylesheet:

@import '~@angular/cdk/overlay-prebuilt.css';

### Import module

app.module.ts
```typescript
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';


import { AppComponent } from './app.component';
import { MdePopoverModule } from '@ajustee/mde-popover';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    MdePopoverModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }
```

### License
MIT © [Joe Jordan Brown](https://github.com/joejordanbrown)

[Angular Popover by UIXD](https://uixd.co.uk)
npm package: @akande/image-carousel
Description: A customizable image carousel module for web applications
Author: Elliot Akande
Latest version: 0.0.2

# @akande/image-carousel

`@akande/image-carousel` is a lightweight JavaScript module that allows you to easily create customizable image carousels. It provides a lightweight and flexible solution for showcasing images in a visually appealing and interactive way.

To see the module in action, [click here](https://elliot-akande.github.io/image-carousel-example/) [[GitHub](https://github.com/Elliot-Akande/image-carousel-example)].

## Features

- **Customizable Images:** Create image carousels with your own set of images.
- **Automatic Slideshow:** The carousel automatically transitions between images at regular intervals.
- **Navigation Controls:** Users can navigate through images using previous and next buttons.
- **Indicator Dots:** Optional indicator dots allow users to jump to specific images.
- **Custom Styling:** Minimal default styling is provided, allowing you to customize the carousel's appearance to match your project's design.

## Installation

You can install the `@akande/image-carousel` module via npm or yarn:

```bash
npm install @akande/image-carousel
# OR
yarn add @akande/image-carousel
```

## Usage

Here's an example of how to use the `@akande/image-carousel` module in your JavaScript code:

```javascript
import ImageCarousel from "@akande/image-carousel";

// Create an array of image URLs/File Paths
const images = [
  "image1.jpg",
  "image2.jpg",
  "image3.jpg",
  // Add more image URLs as needed
];

const customClass = "my-carousel"; // Optional custom CSS class

// Create an instance of the ImageCarousel component
const carousel = ImageCarousel(images, customClass);

// Append the carousel to a DOM element
document.querySelector("#carousel-container").appendChild(carousel);
```

## API Reference

### `ImageCarousel(images, customClass)`

Creates an instance of the ImageCarousel component.

- `images` (Array of Strings): An array of image URLs to display in the carousel.
- `customClass` (String, optional): An optional custom CSS class to apply to the carousel container.

**Returns:** A DOM element representing the image carousel.

## License

This project is licensed under the MIT License. See the [LICENSE](https://github.com/Elliot-Akande/image-carousel/blob/main/LICENSE) file for details.

## Issues

If you encounter any issues or have questions about this module, please [open an issue](https://github.com/Elliot-Akande/image-carousel/issues) on GitHub.

## Author

- Elliot Akande
- Email: [elbo.lynch@gmail.com](elbo.lynch@gmail.com)
- GitHub: [https://github.com/Elliot-Akande](https://github.com/Elliot-Akande)

## Keywords

- image
- carousel
- slider
- slideshow
- gallery
- JavaScript
- web
- frontend
- UI
- component
- responsive
- touch-friendly
- customization
- web development
- image viewer
- image navigation
- image presentation
npm package: @akarim/nyanplacer-colorifier
Description: Replaces provided words in string with html span tags.
Author: Akarim
Latest version: 0.0.4

# nyanplacer-colorifier

  Transforms selected words to spans with colors.
  Usage:
```js
const makeColorifier = require('@akarim/nyanplacer-colorifier')

const colorify = makeColorifier()
const colored = colorify(['const'], 'const a = 1')
console.log(colored)
```
npm package: @akasection/eslint-config-sq
Description: Cherry-picked ESLint config for akaSECTION
Latest version: 0.1.3

# ESLint Config for akaSECTION (eslint-config-sq)

This is a flat ESLint config that has cherry-picked rules from multiple configs that suits akasection coding style.
It supports both vanilla JS/TS and Vue SFC.

## Installation

```bash
npm install --save-dev eslint @akasection/eslint-config-sq
```

## Usage
The config file is available under `dist` folder. It consists of three files:

- `dist/vanilla.mjs`: for vanilla JS/TS projects
- `dist/vue.mjs`: for Vue 3-based projects. Extends vanilla.
- `dist/nuxt.mjs`: For Nuxt 4 projects. Extends Vue. (for Nuxt 3, enable `app` directory config first from backport release)

Add to your eslint config file (`eslint.config.js` or `eslint.config.mjs`):

```ts
// @ts-check
import sqConfig from '@akasection/eslint-config-sq/dist/vue.mjs'
import { defineConfig } from 'eslint-define-config'

export default defineConfig({
  ...sqConfig,
  // You can override rules here
})
```

For Nuxt, usually can be written like this (require `@nuxt/eslint-config` first):

```ts
// @ts-check
import sqConfig from '@akasection/eslint-config-sq/dist/nuxt.mjs'
import { withNuxt } from './.nuxt/eslint.config.mjs'

export default withNuxt(
  sqConfig,
  {
    ignores: [
      '**/dist/**',
      '**/node_modules/**',
      '.data/**',
      '.nuxt/**',
      '**/coverage/',
      'content.config.ts',
    ],
  }
)
```

# Contributing

Open your issue/PR here: https://github.com/akasection/eslint-config-sq/issues
npm package: @akasha-platform/vendure-document-plugin
Description: A plugin which adds a document tree to vendure's graphql api.
Latest version: 0.0.15

# Vendure Document Plugin

```bash
yarn add @akasha-platform/vendure-document-plugin
```

```typescript
// vendure-config.ts
export const config = {
    /*...*/ 
    plugins: [/*...*/ DocumentPlugin],
}
```

```
yarn migration:generate document-plugin
yarn migration:run document-plugin
```