open-index/open-npm huggingface dataset:
npm package: @keysemantics/widgets
Description: KeySemantics search and chat widgets for React/Next.js applications
Author: KeySemantics
Latest version: 1.0.11

# KeySemantics React UI Widgets

This project contains the KeySemantics UI widgets. They are designed to be used in any react project.
You will need a valdi API key to use the widgets. Go to https://portal.keysemantics.ai to configure a collection and key.
npm package: @keystatic/create
Description: The `@keystatic/create` packages allows users to create a Keystatic project direct from their CLI.
Latest version: 0.0.6

# @keystatic/create

The `@keystatic/create` packages allows users to create a Keystatic project
direct from their CLI.

```bash
npx create @keystatic
```

## Templates

There are two kinds of templates:

- Simple templates - these are stored in the monorepo under `/templates`. These
  are basic implementations with minimal dependencies.
- Complex templates - these show more advanced examples and are stored in
  separate repositories to keep dependencies in the monorepo smaller, and to
  avoid polluting the repo with lots of code and assets.

Both kind of templates should be published and downloaded by the CLI from npm
directly.

Template major versions should be kept up to date with the major version of the
CLI, so if breaking changes are introduced in the future the CLI can ensure
users are downloading the latest template, not out-of-date cached versions.

## Testing

To run locally use the command `pnpm dev:create`.

When asked for a directory to make the project in, you can specify absolute
paths i.e. `/Users/janedoe/projects/keystatic-test`
npm package: @keystatic/templates-astro
Description: This template shows how you can use Keystatic in an Astro site.
Latest version: 0.0.63

# Keystatic in Astro

This template shows how you can use Keystatic in an Astro site.

To setup:

```bash
npm install
```

To run:

```
npm run dev
```

Admin UI: [http://127.0.0.1:4321/keystatic](http://127.0.0.1:4321/keystatic)

Homepage: [http://localhost:4321](http://localhost:4321)
npm package: @keystatic/templates-nextjs
Description: This template shows how you can use Keystatic in a Next.js site that utilises the `app` directory.
Latest version: 0.0.64

# Keystatic in Next.js

This template shows how you can use Keystatic in a Next.js site that utilises
the `app` directory.

To setup:

```bash
npm install
```

To run:

```
npm run dev
```

Admin UI: [http://127.0.0.1:3000/keystatic](http://127.0.0.1:3000/keystatic)

Homepage: [http://localhost:3000](http://localhost:3000)
npm package: @keystatic/templates-remix
Description: - [Remix Docs](https://remix.run/docs)
Latest version: 0.0.51

# Welcome to Remix!

- [Remix Docs](https://remix.run/docs)

## Development

From your terminal:

```sh
npm run dev
```

This starts your app in development mode, rebuilding assets on file changes.

## Deployment

First, build your app for production:

```sh
npm run build
```

Then run the app in production mode:

```sh
npm start
```

Now you'll need to pick a host to deploy it to.

### DIY

If you're familiar with deploying node applications, the built-in Remix app
server is production-ready.

Make sure to deploy the output of `remix build`

- `build/`
- `public/build/`
npm package: @keystone-6-master/admin-ui-tests
Description: A set of tests for the KeystoneJS Admin UI.
Author: The KeystoneJS Development Team
Latest version: 0.0.0

# Admin UI Tests

Keystone, as a system, can be summarised as `schema => ({ api, adminUI })`.
This directory contains integration test to ensure that `schema => ({ adminUI })` behaves as expected.
All integration tests in this repo are run using [playwright](https://playwright.dev/).

# How to run

To run these tests locally please run the `DATABASE_URL=file:./test.db yarn test:admin-ui` script from the root of the Keystone monorepo.
If you would like more explicit logging from playwright, please run `DEBUG=pw:api DATABASE_URL=file:./test.db yarn test:admin-ui`.

# How to write

(coming soon)

# Connecting to CI

If you're just adding a new test to an existing file you can ignore this section.
If, however you've created a new test file within this repo, please ensure that CI is made aware of this.

In order to do so, please add the file name to the array of file names in the `.github/workflows/tests.yml` test matrix under the `admin_ui_integration_tests` section like so

```yml
strategy:
  matrix:
    test: ['init.test.ts', ADD_YOUR_FILENAME_HERE]
    fail-fast: false
```

Remember to commit this change and validate that the tests are running remotely.
Once your PR is merged, update the branch protection rules on `main` to require the admin UI test.
npm package: @keystone-6-master/api-tests-legacy
Description: A set of tests for running against the KeystoneJS API.
Author: The KeystoneJS Development Team
Latest version: 0.0.2

# API Tests

Keystone, as a system, can be summarised as `schema => ({ api, adminUI })`.
This directory contains system level test to ensure that `schema => ({ api })` behaves as expected.
These system level tests should be considered complimentary to the unit tests contained in each package.
npm package: @keystone-6-master/auth
Description: Keystone-6 is the latest version of Keystone. To get help with this package join the conversation in [Slack](https://community.keystonejs.com/), or [Github](https://github.com/keystonejs/keystone/).
Latest version: 2.0.2

# @keystone-6-master/auth

Keystone-6 is the latest version of Keystone.
To get help with this package join the conversation in [Slack](https://community.keystonejs.com/), or [Github](https://github.com/keystonejs/keystone/).

Visit https://keystonejs.com/ for docs, and [follow @keystonejs on Twitter](https://twitter.com/keystonejs) for the latest updates.
npm package: @keystone-6-master/core
Description: Keystone-6 is the latest version of Keystone. To get help with this package join the conversation in [Slack](https://community.keystonejs.com/), or [Github](https://github.com/keystonejs/keystone/).
Latest version: 1.1.2

# @keystone-6-master/core

Keystone-6 is the latest version of Keystone.
To get help with this package join the conversation in [Slack](https://community.keystonejs.com/), or [Github](https://github.com/keystonejs/keystone/).

Visit https://keystonejs.com/ for docs, and [follow @keystonejs on Twitter](https://twitter.com/keystonejs) for the latest updates.
npm package: @keystone-6-master/example-blog
Description: This project implements a basic **Blog**, with `Posts` and `Authors`.
Latest version: 0.0.2

## Base Project - Blog

This project implements a basic **Blog**, with `Posts` and `Authors`.

Use it as a starting place for learning how to use Keystone.

## Instructions

To run this project, clone the Keystone repository locally, run `yarn` at the root of this repository, then navigate to this directory and run:

```shell
yarn dev
```

This will start the Admin UI at [localhost:3000](http://localhost:3000).
You can use the Admin UI to create items in your database.

You can also access a GraphQL Playground at [localhost:3000/api/graphql](http://localhost:3000/api/graphql), which allows you to directly run GraphQL queries and mutations.

Congratulations, you're now up and running with Keystone! 🚀

### Optional: add sample data

This example includes sample data. To add it to your database:

1. Ensure you’ve initialised your project with `yarn dev` at least once.
2. Run `yarn seed-data`. This will populate your database with sample content.
3. Run `yarn dev` again to startup Admin UI with sample data in place.

## Try it out in Code Sandbox 🧪

You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/blog. You can also fork this sandbox to make your own changes.

## Next steps

Experiment with the code in this example to see how Keystone works, familiarise yourself with the Admin UI, and learn about the GraphQL Playground.

When you’ve got the hang of this base project, try a [feature project](../) to learn Keystone’s advanced features and take your knowledge to the next level.
npm package: @keystone-6-master/example-custom-admin-ui-logo
Description: This project demonstrates how to create a custom logo in the Admin UI.
Latest version: 0.0.2

## Feature Example - Custom Components for the Admin UI

This project demonstrates how to create a custom logo in the Admin UI.

## Instructions

To run this project, clone the Keystone repository locally, run `yarn` at the root of the repository then navigate to this directory and run:

```shell
yarn dev
```

This will start the Admin UI at [localhost:3000](http://localhost:3000).

You can use the Admin UI to create items in your database.

You can also access a GraphQL Playground at [localhost:3000/api/graphql](http://localhost:3000/api/graphql), which allows you to directly run GraphQL queries and mutations.

🚀 Congratulations, you're now up and running with Keystone!

## Exporting custom components

This project shows how to export a custom logo to be rendered in the Admin UI via the [`/admin/config.tsx`](./admin/config.tsx) file. As elaborated on in the [Custom Logo](https://keystonejs.com/docs/guides/custom-admin-ui-logo) guide, the named `components` export of this file is used to replace specific components for use in the Admin UI.

If you have specific components you think should also be exposed from this config, please let us know on [Slack](https://community.keystonejs.com)

**NOTE** The Keystone monorepo leverages a babel config that means we use the old jsx transform (this doesn't have an impact on the code we ship to npm).
This is why there are `import React from 'react'` statements in our examples. This is NOT necessary outside of the Keystone repo (unless you have a babel config with the old jsx transform which is currently the default with @babel/preset-react) as you'll be using Next.js' babel config which uses the new jsx transform.

## Try it out in Code Sandbox 🧪

You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/custom-admin-ui-logo. You can also fork this sandbox to make your own changes.
npm package: @keystone-6-master/example-custom-field
Description: This project demonstrates how to create a custom field that allows users to select a number of stars. It builds on the [Blog](../blog) starter project.
Latest version: 0.0.2

## Feature Example - Custom Field

This project demonstrates how to create a custom field that allows users to select a number of stars.
It builds on the [Blog](../blog) starter project.

## Instructions

To run this project, clone the Keystone repository locally, run `yarn` at the root of the repository then navigate to this directory and run:

```shell
yarn dev
```

This will start the Admin UI at [localhost:3000](http://localhost:3000).
You can use the Admin UI to create items in your database.

You can also access a GraphQL Playground at [localhost:3000/api/graphql](http://localhost:3000/api/graphql), which allows you to directly run GraphQL queries and mutations.

## Stars field

The `stars` fields in the `stars-field` directory shows a custom field that validates that the value is between 0 and some maximum number of stars and shows a radio input to select the number of stars in the Admin UI. The backend for the field type is in `stars-field/index.ts` and the frontend is in `stars-field/views.tsx`.

## Try it out in Code Sandbox 🧪

You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/custom-field. You can also fork this sandbox to make your own changes.
npm package: @keystone-6-master/example-custom-field-view
Description: This project demonstrates how to create a custom field view for a JSON field. This custom field view allows users to add, edit and remove navigation items from a list
Latest version: 0.0.2

## Feature Example - Custom Field View

This project demonstrates how to create a custom field view for a JSON field. This custom field view allows users to add, edit and remove navigation items from a list

## Instructions

To run this project, clone the Keystone repository locally, run `yarn` at the root of the repository then navigate to this directory and run:

```shell
yarn dev
```

This will start the Admin UI at [localhost:3000](http://localhost:3000).

You can use the Admin UI to create items in your database.

You can also access a GraphQL Playground at [localhost:3000/api/graphql](http://localhost:3000/api/graphql), which allows you to directly run GraphQL queries and mutations.

## Features

In this project we add a new JSON field to the `Task` list:

```typescript
relatedLinks: json({
  ui: {
      views: require.resolve('./fields/related-links/components.tsx'),
      createView: { fieldMode: 'edit' },
      listView: { fieldMode: 'hidden' },
      itemView: { fieldMode: 'edit' },
  },
}),
```

This field defines `ui.views` and provides a custom editor component which allows users to view and edit this field in a more intuitive way than just using raw JSON.

The stored JSON data:

```json
{
  "data": {
    "allTasks": [
      {
        "relatedLinks": [
          {
            "label": "Keystone website",
            "href": "keystonejs.com"
          },
          {
            "label": "Prisma website",
            "href": "prisma.io"
          }
        ]
      }
    ]
  }
}
```

will be rendered as.

<div align="center">
  <img src="./custom-field-ui.png" width="445">
</div>

## Try it out in Code Sandbox 🧪

You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/custom-field-view. You can also fork this sandbox to make your own changes.
npm package: @keystone-6-master/example-default-values
Description: This project demonstrates how to use default values for fields. It builds on the [Task Manager](../task-manager) starter project.
Latest version: 0.0.2

## Feature Example - Default Values

This project demonstrates how to use default values for fields.
It builds on the [Task Manager](../task-manager) starter project.

## Instructions

To run this project, clone the Keystone repository locally, run `yarn` at the root of the repository then navigate to this directory and run:

```shell
yarn dev
```

This will start the Admin UI at [localhost:3000](http://localhost:3000).
You can use the Admin UI to create items in your database.

You can also access a GraphQL Playground at [localhost:3000/api/graphql](http://localhost:3000/api/graphql), which allows you to directly run GraphQL queries and mutations.

## Features

This project demonstrates how to provide default values to fields.

## Try it out in Code Sandbox 🧪

You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/default-values. You can also fork this sandbox to make your own changes.
npm package: @keystone-6-master/example-ecommerce
Description: 👋 This is an example eCommerce backend implementation using KeystoneJS.
Author: Wes Bos & Jed Watson
Latest version: 0.0.3

# Keystone-6 eCommerce Example

👋 This is an example eCommerce backend implementation using KeystoneJS.

It is based on the [sick-fits backend](https://github.com/wesbos/advanced-react-rerecord) by [Wes Bos](https://twitter.com/wesbos), built as part of his [Advanced React Course](http://advancedreact.com)

Implementation and docs are WIP.

## Running the example

> **NOTE** you'll need Cloudinary, Stripe, and SMTP credentials set up in your `.env` file or environment variables to run this example. See the `sample.env` file for required fields.

To run the project locally:

- Clone the https://github.com/keystonejs/keystone repository
- Run `yarn` at the root directory of the repository [(we use yarn workspaces)](https://classic.yarnpkg.com/lang/en/docs/workspaces/)
- Navigate to this directory and run `yarn dev`

If everything works 🤞 the GraphQL Server and Admin UI will start on [localhost:3000](http://localhost:3000)
npm package: @keystone-6-master/example-extend-graphql-schema-graphql-ts
Description: This project demonstrates how to extend the GraphQL API provided by Keystone with custom queries and mutations using [graphql-ts](https://github.com/Thinkmill/graphql-ts). It builds on the [Blog](../blog) starter project.
Latest version: 0.0.2

## Feature Example - Extend GraphQL Schema GraphQL TS

This project demonstrates how to extend the GraphQL API provided by Keystone with custom queries and mutations using [graphql-ts](https://github.com/Thinkmill/graphql-ts).
It builds on the [Blog](../blog) starter project.

## Instructions

To run this project, clone the Keystone repository locally, run `yarn` at the root of the repository then navigate to this directory and run:

```shell
yarn dev
```

This will start the Admin UI at [localhost:3000](http://localhost:3000).
You can use the Admin UI to create items in your database.

You can also access a GraphQL Playground at [localhost:3000/api/graphql](http://localhost:3000/api/graphql), which allows you to directly run GraphQL queries and mutations.

## Features

This project demonstrates how to extend the GraphQL API provided by Keystone with custom queries and mutations.
Schema extensions are set using the [`extendGraphqlSchema`](https://keystonejs.com/docs/apis/config#extend-graphql-schema) config option.

The `graphql.extend` function allows you to extend the existing query and mutation types and define new types or use existing types in your extension.

See the [`@graphql-ts/schema`](https://docsmill.dev/npm/@graphql-ts/schema) and [`@graphql-ts/extend`](https://docsmill.dev/npm/@graphql-ts/extend) docs for more information.

## Try it out in Code Sandbox 🧪

You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/extend-graphql-schema-graphql-ts. You can also fork this sandbox to make your own changes.
npm package: @keystone-6-master/example-extend-graphql-schema-nexus
Description: ![KeystoneJS and Nexus logos](keystone-nexus.png)
Latest version: 0.0.2

## Feature Example - Using Nexus to extend the GraphQL API

![KeystoneJS and Nexus logos](keystone-nexus.png)

This project demonstrates how to use [Nexus](https://nexusjs.org) to extend the GraphQL API provided by Keystone with custom queries and mutations. It builds on the [Blog](../blog) starter project.

## Instructions

To run this project, clone the Keystone repository locally, run `yarn` at the root of the repository then navigate to this directory and run:

```shell
yarn dev
```

This will start the Admin UI at [localhost:3000](http://localhost:3000).
You can use the Admin UI to create items in your database.

You can also access a GraphQL Playground at [localhost:3000/api/graphql](http://localhost:3000/api/graphql), which allows you to directly run GraphQL queries and mutations.

## Features

This project demonstrates how to integrate Nexus with Keystone and use it to extend the GraphQL API. For a simpler version without Nexus, see the [Extend GraphQL Schema](../extend-graphql-schema) example.

The Nexus schema is defined in [`/nexus`](./nexus/index.ts). It's loosely inspired by the [Nexus Tutorial](https://nexusjs.org/docs/getting-started/tutorial/chapter-setup-and-first-query)

The resulting schema is then merged into Keystone's schema using [`@graphql-tools/schema`](https://www.graphql-tools.com/docs/schema-merging#getting-started)

## Current Limitations

Ideally, we could tell Nexus about the GraphQL types Keystone generates so you could write Nexus fields that return Keystone types. Making this work requires more research, so the example currently creates a separate `NexusPost` type and uses Prisma to query posts from the database.

There's also a Prisma plugin for Nexus in development here: <https://github.com/prisma/nexus-prisma>

When it's ready, it would make a good addition to this example (showing how to integrate the Prisma plugin with the Keystone-generated Prisma schema to auto-generate Nexus schema)

## Try it out in Code Sandbox 🧪

You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/extend-graphql-schema-nexus. You can also fork this sandbox to make your own changes.
npm package: @keystone-6-master/example-json-field
Description: This project demonstrates the usage of the `json` field type. It builds on the [Task Manager](../task-manager) starter project.
Latest version: 0.0.2

## Feature Example - JSON Field

This project demonstrates the usage of the `json` field type.
It builds on the [Task Manager](../task-manager) starter project.

## Instructions

To run this project, clone the Keystone repository locally, run `yarn` at the root of the repository then navigate to this directory and run:

```shell
yarn dev
```

This will start the Admin UI at [localhost:3000](http://localhost:3000).
You can use the Admin UI to create items in your database.

You can also access a GraphQL Playground at [localhost:3000/api/graphql](http://localhost:3000/api/graphql), which allows you to directly run GraphQL queries and mutations.

🚀 Congratulations, you're now up and running with Keystone!

## Features

This example implements a `Packages` list. In this field we specify a `pkgjson` field which is a [`json` field type](https://keystonejs.com/docs/apis/fields#json).
This accepts any valid JSON including:

- string
- number
- array
- object
- null

The JSON field type stores its value in the `jsonb` format, as specified by Prisma. However if `sqlite` is specified as the database type instead, then the value is stored as a `string`.

## Try it out in Code Sandbox 🧪

You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/json. You can also fork this sandbox to make your own changes.
npm package: @keystone-6-master/example-rest-api
Description: This project demonstrates how to create REST endpoints by extending Keystone's express app and using the Query API to execute queries against the schema.
Latest version: 0.0.2

## Feature Example - Creating REST API endpoints

This project demonstrates how to create REST endpoints by extending Keystone's express app and using the Query API to execute queries against the schema.

## Instructions

To run this project, clone the Keystone repository locally, run `yarn` at the root of the repository then navigate to this directory and run:

```shell
yarn dev
```

This will start the Admin UI at [localhost:3000](http://localhost:3000).

You can use the Admin UI to create items in your database.

To run the seed data script, pass the `--seed-data` flag when starting the app.

## Try it out in Code Sandbox 🧪

You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/rest-api. You can also fork this sandbox to make your own changes.
npm package: @keystone-6-master/example-roles
Description: 👋 This example demonstrates how you can set up a powerful, custom roles-based access control system with Keystone for an otherwise very simple to-do app.
Latest version: 0.0.3

# Keystone-6 Roles-based Access Example

👋 This example demonstrates how you can set up a powerful, custom roles-based access control system with Keystone for an otherwise very simple to-do app.

Roles are stored in a list, and each user is related to a role. Each role has a granular set of permissions selected from the available checkboxes.

Role permissions are loaded at the start of the request for the current user, and cached in the session object for use in the access control methods and hooks.

The permissions affect both the Admin UI and GraphQL API.

> **NOTE** this example is WIP. See `schema.ts` for the spec and current status.

## Running the example

To run the project locally:

- Clone this repo
- Run `yarn` in the root (this repo is a monorepo and uses yarn workspaces, so that will install everything you'll need)
- Open this folder in your terminal and run `yarn dev`

If everything works 🤞 the GraphQL Server and Admin UI will start on [localhost:3000](http://localhost:3000)
npm package: @keystone-6-master/example-task-manager
Description: This base project implements a simple **Task Management** app, with `Tasks` and `People` who can be assigned to tasks.
Latest version: 0.0.1

## Base Project - Task Manager

This base project implements a simple **Task Management** app, with `Tasks` and `People` who can be assigned to tasks.

Use it as a starting place for learning how to use Keystone.

## Instructions

To run this project, clone the Keystone repository locally, run `yarn` at the root of the repository then navigate to this directory and run:

```shell
yarn dev
```

This will start Keystone’s Admin UI at [localhost:3000](http://localhost:3000), where you can add items to an empty database.

You can also access Keystone’s GraphQL Playground at [localhost:3000/api/graphql](http://localhost:3000/api/graphql) to explore the GraphQL API, and run [queries](https://keystonejs.com/docs/guides/filters) and [mutations](https://keystonejs.com/docs/apis/graphql#mutations) on your data.

Congratulations, you’re now up and running with Keystone! 🚀

### Optional: add sample data

This example includes sample data. To add it to your database:

1. Ensure you’ve initialised your project with `yarn dev` at least once.
2. Run `yarn seed-data`. This will populate your database with sample content.
3. Run `yarn dev` again to startup Admin UI with sample data in place.

## Next steps

Experiment with the code in this example to see how Keystone works, familiarise yourself with the Admin UI, and learn about the GraphQL Playground.

When you’ve got the hang of this base project, try a [feature project](../) to learn Keystone’s advanced features and take your knowledge to the next level.

## Try it out in Code Sandbox 🧪

You can play with this example online in a web browser using the free [codesandbox.io](https://codesandbox.io/) service. To launch this example, open the URL https://githubbox.com/keystonejs/keystone/tree/main/examples/task-manager. You can also fork this sandbox to make your own changes.