{
+function Brand () {
const { palette } = useTheme()
return (
@@ -25,7 +25,7 @@ const Brand = () => {
}
type SectionProps = { label: string, children: ReactNode }
-const Section = ({ label, children }: SectionProps) => {
+function Section ({ label, children }: SectionProps) {
return (
@@ -25,7 +25,7 @@ const Brand = () => {
}
type SectionProps = { label: string, children: ReactNode }
-const Section = ({ label, children }: SectionProps) => {
+function Section ({ label, children }: SectionProps) {
return (
{label}
@@ -35,7 +35,7 @@ const Section = ({ label, children }: SectionProps) => {
}
type NavItemProps = { href: string, children: ReactNode }
-const NavItem = ({ href, children }: NavItemProps) => {
+function NavItem ({ href, children }: NavItemProps) {
const { palette, radii, spacing } = useTheme()
const router = useRouter()
const isSelected = router.pathname === href
@@ -68,7 +68,7 @@ const NavItem = ({ href, children }: NavItemProps) => {
)
}
-export const Navigation = () => {
+export function Navigation () {
return (
+
{/* ... */}
)
@@ -92,12 +90,12 @@ For more information on the `NavigationContainer` see the [NavigationContainer](
The `ListNavItems` component takes the provided Array of `lists` and renders a list of NavItems. We'll use this component to help us easily create NavItems from Keystone lists.
```tsx
-import { NavigationContainer, NavItem, ListNavItems } from '@keystone-6/core/admin-ui/components';
-import type { NavigationProps } from '@keystone-6/core/admin-ui/components';
+import { NavigationContainer, NavItem, ListNavItems } from '@keystone-6/core/admin-ui/components'
+import type { NavigationProps } from '@keystone-6/core/admin-ui/components'
-export function CustomNavigation({ authenticatedItem, lists }: NavigationProps) {
+export function CustomNavigation({ lists }: NavigationProps) {
return (
-
+
{/* ... */}
@@ -114,12 +112,12 @@ For more information on the `ListNavItems` component, see the [ListNavItems](#li
The `NavItem` component is a thin styling and accessibility wrapper around the `Link` component from Next.js. We'll use this component to render our custom route as well as the `Dashboard` route.
```tsx
-import { NavigationContainer, NavItem, ListNavItems } from '@keystone-6/core/admin-ui/components';
-import type { NavigationProps } from '@keystone-6/core/admin-ui/components';
+import { NavigationContainer, NavItem, ListNavItems } from '@keystone-6/core/admin-ui/components'
+import type { NavigationProps } from '@keystone-6/core/admin-ui/components'
-export function CustomNavigation({ authenticatedItem, lists }: NavigationProps) {
+export function CustomNavigation({ lists }: NavigationProps) {
return (
-
+
Dashboard
@@ -144,12 +142,12 @@ With all that done, your Custom Navigation component should be good to go, and y
```tsx
// admin/components/CustomNavigation.tsx
-import { NavigationContainer, NavItem, ListNavItems } from '@keystone-6/core/admin-ui/components';
-import type { NavigationProps } from '@keystone-6/core/admin-ui/components';
+import { NavigationContainer, NavItem, ListNavItems } from '@keystone-6/core/admin-ui/components'
+import type { NavigationProps } from '@keystone-6/core/admin-ui/components'
-export function CustomNavigation({ authenticatedItem, lists }: NavigationProps) {
+export function CustomNavigation({ lists }: NavigationProps) {
return (
-
+
Dashboard
@@ -161,11 +159,11 @@ export function CustomNavigation({ authenticatedItem, lists }: NavigationProps)
// admin/config.ts
-import { AdminConfig } from '@keystone-6/core/types';
-import { CustomNavigation } from './components/CustomNavigation';
+import { AdminConfig } from '@keystone-6/core/types'
+import { CustomNavigation } from './components/CustomNavigation'
export const components: AdminConfig['components'] = {
Navigation: CustomNavigation
-};
+}
```
Start up your Keystone project, and you should see Custom Navigation with a route to the KeystoneJS docs in the Admin UI.
@@ -180,15 +178,14 @@ The rest of this guide will elaborate on some of the details around the helper c
This section is to provide more granular information around the props that Keystone passes to your Custom Navigation component.
```tsx
-export const CustomNavigation = ({ lists, authenticatedItem }) => {}
+export const CustomNavigation = ({ lists }) => {}
```
Keystone passes the following props to your custom Navigation component:
```ts
type NavigationProps {
- lists: ListMeta[];
- authenticatedItem: AuthenticatedItem;
+ lists: ListMeta[]
}
```
@@ -197,33 +194,17 @@ type NavigationProps {
```typescript
type ListMeta = {
/** Used for optimising the generated list of NavItems in React */
- key: string;
+ key: string
/** href to the list route in the Admin UI. */
- path: string;
+ path: string
/** Used as the label for each list generated NavItem */
- label: string;
+ label: string
/** Other properties exists, but these are the ones that are relevant to the Navigation implementation */
-};
-
-type Lists = ListMeta[];
-```
-
-`authenticatedItem` is a union of potential authentication states, expanded on below:
+}
-```ts
-type AuthenticatedItem =
- | { state: 'unauthenticated' }
- | { state: 'authenticated'; label: string; id: string; listKey: string }
- | { state: 'loading' }
- | { state: 'error'; error: Error | readonly [GraphQLError, ...GraphQLError[]] };
+type Lists = ListMeta[]
```
-The `authenticatedItem` props is rendered automatically when you pass it into the `NavigationContainer` component.
-
-{% hint kind="warn" %}
-If you render the `authenticatedItem` yourself, make sure you handle all of the possible states.
-{% /hint %}
-
## Components
Keystone exposes a variety of helper components to make building out your custom Admin UI Navigation component easier. These are:
@@ -234,24 +215,14 @@ Keystone exposes a variety of helper components to make building out your custom
### NavigationContainer
-This component renders containing markup around your navigation links, as well as as the different states of the `authenticatedItem` prop.
-
-```typescript
-type NavigationContainerProps = {
- authenticatedItem?: AuthenticatedItem;
-}
-```
-
-{% hint kind="tip" %}
-For the shape of the `authenticatedItem` prop, please see the [Navigation Props](#navigation-props) section above.
-{% /hint %}
+This component renders containing markup around your navigation links.
```tsx
import { NavigationContainer} from '@keystone-6/core/admin-ui/components'
-export const CustomNavigation = ({ lists, authenticatedItem }) => {
+export function CustomNavigation ({ lists }) {
return (
-
+
{/* ... */}
)
diff --git a/docs/content/docs/guides/custom-admin-ui-pages.md b/docs/content/docs/guides/custom-admin-ui-pages.md
index 1ae24fd08dd..b5ac2d49645 100644
--- a/docs/content/docs/guides/custom-admin-ui-pages.md
+++ b/docs/content/docs/guides/custom-admin-ui-pages.md
@@ -14,7 +14,7 @@ The default export of every file in this directory is expected to be a valid Rea
```tsx
// admin/pages/custom-page.tsx
-import Link from 'next/link';
+import Link from 'next/link'
export default function CustomPage () {
return (
@@ -43,8 +43,8 @@ This `header` prop is rendered out as the page title at the top of the page.
```tsx
// admin/pages/custom-page.tsx
-import Link from 'next/link';
-import { PageContainer } from '@keystone-6/core/admin-ui/components';
+import Link from 'next/link'
+import { PageContainer } from '@keystone-6/core/admin-ui/components'
export default function CustomPage () {
return (
@@ -66,8 +66,8 @@ Keystone pages leverage the `Heading` component from the `@keystone-ui/core` pac
```tsx
// admin/pages/custom-page.tsx.
-import { PageContainer } from '@keystone-6/core/admin-ui/components';
-import { Heading } from '@keystone-ui/core';
+import { PageContainer } from '@keystone-6/core/admin-ui/components'
+import { Heading } from '@keystone-ui/core'
export default function CustomPage () {
return (
@@ -91,20 +91,20 @@ First add the following files to the `/admin` directory in the root of your Keys
```tsx
// admin/config.ts
-import type { AdminConfig } from '@keystone-6/core/types';
-import { CustomNavigation } from './components/CustomNavigation';
+import type { AdminConfig } from '@keystone-6/core/types'
+import { CustomNavigation } from './components/CustomNavigation'
export const components: AdminConfig['components']= {
Navigation: CustomNavigation
-};
+}
```
```tsx
// admin/components/CustomNavigation.tsx
-import { NavigationContainer, ListNavItems, NavItem } from '@keystone-6/core/admin-ui/components';
-import type { NavigationProps } from '@keystone-6/core/admin-ui/components';
-export function CustomNavigation({ lists, authenticatedItem }: NavigationProps) {
+import { NavigationContainer, ListNavItems, NavItem } from '@keystone-6/core/admin-ui/components'
+import type { NavigationProps } from '@keystone-6/core/admin-ui/components'
+export function CustomNavigation({ lists }: NavigationProps) {
return (
-
+
Dashboard
@@ -124,11 +124,11 @@ Lastly we'll add our new route to the newly created `CustomNavigation` component
```tsx
// admin/components/CustomNavigation.tsx
-import { NavigationContainer, ListNavItems, NavItem } from '@keystone-6/core/admin-ui/components';
-import type { NavigationProps } from '@keystone-6/core/admin-ui/components';
-export function CustomNavigation({ lists, authenticatedItem }: NavigationProps) {
+import { NavigationContainer, ListNavItems, NavItem } from '@keystone-6/core/admin-ui/components'
+import type { NavigationProps } from '@keystone-6/core/admin-ui/components'
+export function CustomNavigation({ lists }: NavigationProps) {
return (
-
+
Dashboard
Custom Page
@@ -155,10 +155,10 @@ The snippet below uses the emotion `jsx` runtime exported from `@keystone-ui/cor
// admin/pages/custom-page.tsx
/** @jsxRuntime classic */
-import Link from 'next/link';
-import { jsx } from '@keystone-ui/core';
-import { PageContainer } from '@keystone-6/core/admin-ui/components';
-import { Heading } from '@keystone-ui/core';
+import Link from 'next/link'
+import { jsx } from '@keystone-ui/core'
+import { PageContainer } from '@keystone-6/core/admin-ui/components'
+import { Heading } from '@keystone-ui/core'
export default function CustomPage () {
return (
diff --git a/docs/content/docs/guides/custom-fields.md b/docs/content/docs/guides/custom-fields.md
index ec8f629917e..b00e2e69cd7 100644
--- a/docs/content/docs/guides/custom-fields.md
+++ b/docs/content/docs/guides/custom-fields.md
@@ -180,31 +180,9 @@ Note it does not allow modifying the value.
import { CellLink, CellContainer } from '@keystone-6/core/admin-ui/components';
import { CellComponent } from '@keystone-6/core/types';
-export const Cell: CellComponent = ({ item, field, linkTo }) => {
- let value = item[field.path] + '';
- return linkTo ? {value} : {value} ;
-};
-Cell.supportsLinkTo = true;
-```
-
-### CardValue
-
-The `CardValue` export is a React component which is shown on the **item view** in relationship fields with `displayMode: 'cards'` when the related item is not being edited.
-Note it does not allow modifying the value.
-
-```tsx
-// view.tsx
-
-import { FieldContainer, FieldLabel } from '@keystone-ui/fields';
-import { CardValueComponent } from '@keystone-6/core/types';
-
-export const CardValue: CardValueComponent = ({ item, field }) => {
- return (
-
- {field.label}
- {item[field.path]}
-
- );
+export const Cell: CellComponent = ({ item, field }) => {
+ const value = item[field.path] + '';
+ return {value} ;
};
```
diff --git a/docs/package.json b/docs/package.json
index 70ee628a34f..1d982080186 100644
--- a/docs/package.json
+++ b/docs/package.json
@@ -21,7 +21,7 @@
"@emotion/react": "^11.7.1",
"@emotion/server": "11.11.0",
"@emotion/weak-memoize": "^0.4.0",
- "@keystar/ui": "^0.7.6",
+ "@keystar/ui": "^0.7.13",
"@keystatic/core": "^0.5.24",
"@keystatic/next": "^5.0.1",
"@keystone-6/fields-document": "workspace:^",
diff --git a/examples/assets-local/schema.graphql b/examples/assets-local/schema.graphql
index 04eb959be33..a8345fd094d 100644
--- a/examples/assets-local/schema.graphql
+++ b/examples/assets-local/schema.graphql
@@ -157,24 +157,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/assets-s3/schema.graphql b/examples/assets-s3/schema.graphql
index 04eb959be33..a8345fd094d 100644
--- a/examples/assets-s3/schema.graphql
+++ b/examples/assets-s3/schema.graphql
@@ -157,24 +157,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/auth/schema.graphql b/examples/auth/schema.graphql
index 246333e2b9e..3660513b490 100644
--- a/examples/auth/schema.graphql
+++ b/examples/auth/schema.graphql
@@ -105,11 +105,9 @@ type Query {
users(where: UserWhereInput! = {}, orderBy: [UserOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: UserWhereUniqueInput): [User!]
usersCount(where: UserWhereInput! = {}): Int
keystone: KeystoneMeta!
- authenticatedItem: AuthenticatedItem
+ authenticatedItem: User
}
-union AuthenticatedItem = User
-
type KeystoneMeta {
adminMeta: KeystoneAdminMeta!
}
@@ -122,24 +120,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/better-list-search/README.md b/examples/better-list-search/README.md
deleted file mode 100644
index 479accb2e51..00000000000
--- a/examples/better-list-search/README.md
+++ /dev/null
@@ -1,32 +0,0 @@
-## 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 `pnpm install` at the root of this repository, then navigate to this directory and run:
-
-```shell
-pnpm 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 `pnpm dev` at least once.
-2. Run `pnpm seed-data`. This will populate your database with sample content.
-3. Run `pnpm dev` again to startup Admin UI with sample data in place.
-
-## Try it out in CodeSandbox 🧪
-
-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 . You can also fork this sandbox to make your own changes.
diff --git a/examples/better-list-search/package.json b/examples/better-list-search/package.json
index 83b3b1cad39..5599f807001 100644
--- a/examples/better-list-search/package.json
+++ b/examples/better-list-search/package.json
@@ -7,8 +7,7 @@
"dev": "keystone dev",
"start": "keystone start",
"build": "keystone build",
- "postinstall": "keystone postinstall",
- "seed-data": "tsx seed-data.ts"
+ "postinstall": "keystone postinstall"
},
"dependencies": {
"@keystone-6/core": "^6.3.1",
diff --git a/examples/better-list-search/schema.graphql b/examples/better-list-search/schema.graphql
index b062d907379..1606b802718 100644
--- a/examples/better-list-search/schema.graphql
+++ b/examples/better-list-search/schema.graphql
@@ -267,24 +267,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/cloudinary/schema.graphql b/examples/cloudinary/schema.graphql
index 6f88003e940..632b27725ff 100644
--- a/examples/cloudinary/schema.graphql
+++ b/examples/cloudinary/schema.graphql
@@ -172,24 +172,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/custom-admin-ui-logo/schema.graphql b/examples/custom-admin-ui-logo/schema.graphql
index 57b33b45d9b..490492d80e3 100644
--- a/examples/custom-admin-ui-logo/schema.graphql
+++ b/examples/custom-admin-ui-logo/schema.graphql
@@ -241,24 +241,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/custom-admin-ui-navigation/README.md b/examples/custom-admin-ui-navigation/README.md
index fa65635f31e..6a60a95e4bd 100644
--- a/examples/custom-admin-ui-navigation/README.md
+++ b/examples/custom-admin-ui-navigation/README.md
@@ -24,26 +24,26 @@ The project contains an `config.ts` file in the `/admin` directory at its root.
export const components = {
Logo,
Navigation,
-};
+}
```
The exported components object is expected to have the following type signature:
```typescript
{
- Logo?: (props: {}) => ReactElement;
- Navigation?: (props: NavigationProps) => ReactElement;
+ Logo?: (props: {}) => ReactElement
+ Navigation?: (props: NavigationProps) => ReactElement
}
```
Keystone conveniently exports an AdminConfig type for DX.
```typescript
-import { AdminConfig } from '@keystone-6/core/types';
+import { AdminConfig } from '@keystone-6/core/types'
export const components: AdminConfig['components'] = {
Logo,
Navigation,
-};
+}
```
## NavigationProps
@@ -52,25 +52,10 @@ Keystone passes the following props to your custom Navigation component:
```typescript
NavigationProps = {
- authenticatedItem: AuthenticatedItem,
lists: ListMeta[]
}
```
-### authenticatedItem prop
-
-The authenticatedItem prop is a `Union` representative of the following possible authentication states:
-
-```typescript
-type AuthenticatedItem =
- | { state: 'unauthenticated' }
- | { state: 'authenticated'; label: string; id: string; listKey: string }
- | { state: 'loading' }
- | { state: 'error'; error: Error | readonly [GraphQLError, ...GraphQLError[]] };
-```
-
-You will need to reasonably account for all of these states if you would like to role your own AuthenticatedItem component but that's out of the scope for this particular example.
-
### lists prop
The `lists` prop is an array of keystone list objects.
@@ -78,56 +63,50 @@ The `lists` prop is an array of keystone list objects.
```typescript
type ListMeta = {
/** Used for optimising the generated list of NavItems in React */
- key: string;
+ key: string
/** Used as the href for each list generated NavItem */
- path: string;
+ path: string
/** Used as the label for each list generated NavItem */
- label: string;
+ label: string
/** Other properties exists, but these are the ones that are relevant to the Navigation implementation */
-};
+}
-type Lists = ListMeta[];
+type Lists = ListMeta[]
```
## Navigation components
Keystone exports the following components to make creating your own custom Navigation component easier. These are:
-- NavigationContainer: A generic container element that also includes rendering logic for the passed in authenticatedItem.
+- NavigationContainer: A generic container element
- ListNavItems: This component renders out a list of Nav Items with preconfigured route matching logic optimised for lists.
- NavItem: A thin styling and accessibility wrapper around the Next.js `Link` component.
### NavigationContainer
The NavigationContainer is responsible for rendering semantic markup and styles for the containing element around your navigation items.
-It's also responsible for rendering out the `authenticatedItem` should it exist. It has the following prop signature:
```typescript
type NavigationContainerProps = {
- authenticatedItem: AuthenticatedItem;
- children: ReactNode;
-};
-```
-
-Pass it the `authenticatedItem` from the `NavigationProps` for it to handle rendering logic around user signin.
+ children: ReactNode
+}
-```tsx
-const CustomNavigation = ({ authenticatedItem }) => {
+const CustomNavigation = () => {
return (
-
- {/* The rest of your Nav goes here */}
+
+ {/* the rest goes here */}
- );
-};
+ )
+}
```
### ListNavItems
```ts
type ListNavItemsProps = {
- lists: ListMeta[];
- include?: string[];
-};
+ lists: ListMeta[]
+ include?: string[]
+}
```
The ListNavItems component expects `lists` an array of list objects and renders a list of NavItems. It also optionally takes `include`, an array of strings. If this array is passed to this component, only lists with a `key` property that matches an element in the `include` array will be rendered. If this array is not passed into the component, all lists will be rendered.
@@ -136,8 +115,8 @@ The ListNavItems component expects `lists` an array of list objects and renders
```typescript
type ListNavItemProps = {
- list: ListMeta;
-};
+ list: ListMeta
+}
```
The ListNavItem component takes a single `list` object and renders a `NavItem`. This is a thin wrapper around `NavItem`, that automates the association of list properties to NavItem. It also adds a custom `isSelected` expression optimised for keystone lists.
@@ -151,10 +130,10 @@ The NavItem component has the following type signature:
```typescript
type NavItemProps = {
- children: ReactNode;
- href: string;
- isSelected?: boolean;
-};
+ children: ReactNode
+ href: string
+ isSelected?: boolean
+}
```
By default the `isSelected` value if left undefined, will be evaluated by the condition `router.pathname === href`, pass in `isSelected` if you have a custom condition or would like more granular control over the selected state of Navigation items.
diff --git a/examples/custom-admin-ui-navigation/admin/components/CustomNavigation.tsx b/examples/custom-admin-ui-navigation/admin/components/CustomNavigation.tsx
index 075557fee52..8036e093160 100644
--- a/examples/custom-admin-ui-navigation/admin/components/CustomNavigation.tsx
+++ b/examples/custom-admin-ui-navigation/admin/components/CustomNavigation.tsx
@@ -1,15 +1,33 @@
import React from 'react'
-import { ListNavItems, NavigationContainer, NavItem } from '@keystone-6/core/admin-ui/components'
-
+import { Divider } from '@keystar/ui/layout'
+import {
+ getHrefFromList,
+ DeveloperResourcesMenu,
+ NavContainer,
+ NavFooter,
+ NavList,
+ NavItem,
+} from '@keystone-6/core/admin-ui/components'
import type { NavigationProps } from '@keystone-6/core/admin-ui/components'
-export function CustomNavigation ({ lists, authenticatedItem }: NavigationProps) {
+export function CustomNavigation ({ lists }: NavigationProps) {
return (
-
- Dashboard
- Keystone Docs
-
+
+
+ Dashboard
+ Keystone Docs
+
+ {list.label}
+
+ ))}
+
+
+
+
+
)
}
diff --git a/examples/custom-admin-ui-navigation/package.json b/examples/custom-admin-ui-navigation/package.json
index fc414bc6406..88527b76f4b 100644
--- a/examples/custom-admin-ui-navigation/package.json
+++ b/examples/custom-admin-ui-navigation/package.json
@@ -10,6 +10,7 @@
"postinstall": "keystone postinstall"
},
"dependencies": {
+ "@keystar/ui": "^0.7.13",
"@keystone-6/core": "^6.3.1",
"@prisma/client": "5.19.0",
"react": "^18.3.1"
diff --git a/examples/custom-admin-ui-navigation/schema.graphql b/examples/custom-admin-ui-navigation/schema.graphql
index 57b33b45d9b..490492d80e3 100644
--- a/examples/custom-admin-ui-navigation/schema.graphql
+++ b/examples/custom-admin-ui-navigation/schema.graphql
@@ -241,24 +241,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/custom-admin-ui-pages/admin/components/CustomNavigation.tsx b/examples/custom-admin-ui-pages/admin/components/CustomNavigation.tsx
index 24d18a89ab7..42ce6904baf 100644
--- a/examples/custom-admin-ui-pages/admin/components/CustomNavigation.tsx
+++ b/examples/custom-admin-ui-pages/admin/components/CustomNavigation.tsx
@@ -1,13 +1,33 @@
import React from 'react'
-import { NavItem, ListNavItems, NavigationContainer } from '@keystone-6/core/admin-ui/components'
+
+import { Divider } from '@keystar/ui/layout'
+import {
+ getHrefFromList,
+ DeveloperResourcesMenu,
+ NavContainer,
+ NavFooter,
+ NavList,
+ NavItem,
+} from '@keystone-6/core/admin-ui/components'
import type { NavigationProps } from '@keystone-6/core/admin-ui/components'
-export function CustomNavigation ({ lists, authenticatedItem }: NavigationProps) {
+export function CustomNavigation ({ lists }: NavigationProps) {
return (
-
- Dashboard
- Custom Page
-
+
+
+ Dashboard
+ Custom Page
+
+ {list.label}
+
+ ))}
+
+
+
+
+
)
}
diff --git a/examples/custom-admin-ui-pages/package.json b/examples/custom-admin-ui-pages/package.json
index 47998487fcc..0ef454dec6e 100644
--- a/examples/custom-admin-ui-pages/package.json
+++ b/examples/custom-admin-ui-pages/package.json
@@ -10,6 +10,7 @@
"postinstall": "keystone postinstall"
},
"dependencies": {
+ "@keystar/ui": "^0.7.13",
"@keystone-6/core": "^6.3.1",
"@keystone-ui/core": "^5.0.2",
"@prisma/client": "5.19.0",
diff --git a/examples/custom-admin-ui-pages/schema.graphql b/examples/custom-admin-ui-pages/schema.graphql
index 57b33b45d9b..490492d80e3 100644
--- a/examples/custom-admin-ui-pages/schema.graphql
+++ b/examples/custom-admin-ui-pages/schema.graphql
@@ -241,24 +241,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/custom-esbuild/schema.graphql b/examples/custom-esbuild/schema.graphql
index f8b64d9787b..9a5afaa354a 100644
--- a/examples/custom-esbuild/schema.graphql
+++ b/examples/custom-esbuild/schema.graphql
@@ -118,24 +118,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/custom-field-view/schema.graphql b/examples/custom-field-view/schema.graphql
index e9a8913365e..7bbd3b7e18a 100644
--- a/examples/custom-field-view/schema.graphql
+++ b/examples/custom-field-view/schema.graphql
@@ -244,24 +244,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/custom-field/1-text-field/index.ts b/examples/custom-field/1-text-field/index.ts
index ca673877e7f..208343b72d3 100644
--- a/examples/custom-field/1-text-field/index.ts
+++ b/examples/custom-field/1-text-field/index.ts
@@ -1,8 +1,8 @@
import {
type BaseListTypeInfo,
- fieldType,
- type FieldTypeFunc,
type CommonFieldConfig,
+ type FieldTypeFunc,
+ fieldType,
orderDirectionEnum,
} from '@keystone-6/core/types'
import { graphql } from '@keystone-6/core'
diff --git a/examples/custom-field/1-text-field/views.tsx b/examples/custom-field/1-text-field/views.tsx
index 3d0c9a60322..357eb6e71f8 100644
--- a/examples/custom-field/1-text-field/views.tsx
+++ b/examples/custom-field/1-text-field/views.tsx
@@ -1,9 +1,8 @@
import React from 'react'
-import { FieldContainer, FieldDescription, FieldLabel, TextInput } from '@keystone-ui/fields'
-import { CellLink, CellContainer } from '@keystone-6/core/admin-ui/components'
+import { Cell as CellContainer } from '@keystar/ui/table'
+import { TextField } from '@keystar/ui/text-field'
import {
- type CardValueComponent,
type CellComponent,
type FieldController,
type FieldControllerConfig,
@@ -14,42 +13,25 @@ export function Field ({ field, value, onChange, autoFocus }: FieldProps
- {field.label}
- {field.description}
-
- {
- onChange?.(event.target.value)
- }}
- disabled={disabled}
- value={value || ''}
- autoFocus={autoFocus}
- />
-
-
+ onChange?.(x === '' ? null : x)}
+ value={value ?? ''}
+ />
)
}
-export const Cell: CellComponent = ({ item, field, linkTo }) => {
+export const Cell: CellComponent = ({ item, field }) => {
const value = item[field.path] + ''
- return linkTo ? {value} : {value}
+ return {value}
}
-Cell.supportsLinkTo = true
-export const CardValue: CardValueComponent = ({ item, field }) => {
- return (
-
- {field.label}
- {item[field.path]}
-
- )
-}
-
-export const controller = (
+export function controller (
config: FieldControllerConfig<{}>
-): FieldController => {
+): FieldController {
return {
path: config.path,
label: config.label,
diff --git a/examples/custom-field/2-stars-field/index.ts b/examples/custom-field/2-stars-field/index.ts
index abf8b22df3f..a81ad61e5d1 100644
--- a/examples/custom-field/2-stars-field/index.ts
+++ b/examples/custom-field/2-stars-field/index.ts
@@ -1,8 +1,8 @@
import {
type BaseListTypeInfo,
- fieldType,
- type FieldTypeFunc,
type CommonFieldConfig,
+ type FieldTypeFunc,
+ fieldType,
orderDirectionEnum,
} from '@keystone-6/core/types'
import { graphql } from '@keystone-6/core'
diff --git a/examples/custom-field/2-stars-field/views.tsx b/examples/custom-field/2-stars-field/views.tsx
index a93dac82d5b..e68e5a0e522 100644
--- a/examples/custom-field/2-stars-field/views.tsx
+++ b/examples/custom-field/2-stars-field/views.tsx
@@ -1,50 +1,48 @@
import React from 'react'
-import { FieldContainer, FieldDescription, FieldLabel } from '@keystone-ui/fields'
-import { CellLink, CellContainer } from '@keystone-6/core/admin-ui/components'
+import { Cell as CellContainer } from '@keystar/ui/table'
+import { TextField } from '@keystar/ui/text-field'
import {
- type CardValueComponent,
type CellComponent,
type FieldController,
type FieldControllerConfig,
type FieldProps,
} from '@keystone-6/core/types'
-import { StarsInput } from './stars-input'
+// import { StarsInput } from './stars-input'
// this is the component shown in the create modal and item page
-export const Field = ({ field, value, onChange, autoFocus }: FieldProps) => (
-
- {field.label}
- {field.description}
-
-)
+export function Field ({ field, value, onChange, autoFocus }: FieldProps) {
+ const disabled = onChange === undefined
-// this is shown on the list view in the table
-export const Cell: CellComponent = ({ item, field, linkTo }) => {
- let value = item[field.path] + ''
- return linkTo ? {value} : {value}
-}
-// setting supportsLinksTo means the cell component allows containing a link to the item
-// for example, text fields support it but relationship fields don't because
-// their cell component links to the related item so it can't link to the item that the relationship is on
-Cell.supportsLinkTo = true
-
-// this is shown on the item page in relationship fields with `displayMode: 'cards'`
-export const CardValue: CardValueComponent = ({ item, field }) => {
+ // TODO:
+// return
+// {field.label}
+// {field.description}
+//
return (
-
- {field.label}
- {item[field.path]}
-
+ onChange?.(x === '' ? null : x)}
+ value={value ?? ''}
+ />
)
}
-export const controller = (
+// this is shown on the list view in the table
+export const Cell: CellComponent = ({ item, field }) => {
+ const value = item[field.path] + ''
+ return {value}
+}
+
+export function controller (
// the type parameter here needs to align with what is returned from `getAdminMeta`
// in the server-side portion of the field type
config: FieldControllerConfig<{ maxStars: number }>
-): FieldController & { maxStars: number } => {
+): FieldController & { maxStars: number } {
return {
maxStars: config.fieldMeta.maxStars,
path: config.path,
diff --git a/examples/custom-field/3-pair-field-json/index.ts b/examples/custom-field/3-pair-field-json/index.ts
index 6ed0c0b35f5..97d62b11540 100644
--- a/examples/custom-field/3-pair-field-json/index.ts
+++ b/examples/custom-field/3-pair-field-json/index.ts
@@ -1,8 +1,8 @@
import {
type BaseListTypeInfo,
- fieldType,
- type FieldTypeFunc,
type CommonFieldConfig,
+ type FieldTypeFunc,
+ fieldType,
} from '@keystone-6/core/types'
import { graphql } from '@keystone-6/core'
@@ -54,12 +54,8 @@ export function pair (
}
function resolveWhere (value: null | { equals: PairInput | null | undefined }) {
- if (value === null) {
- throw new Error('PairFilter cannot be null')
- }
- if (value.equals === undefined) {
- return {}
- }
+ if (value === null) throw new Error('PairFilter cannot be null')
+ if (value.equals === undefined) return {}
const json = resolveInput(value.equals)
return { equals: json }
}
diff --git a/examples/custom-field/3-pair-field-json/views.tsx b/examples/custom-field/3-pair-field-json/views.tsx
index 4f464a2fe81..4b1e164c48a 100644
--- a/examples/custom-field/3-pair-field-json/views.tsx
+++ b/examples/custom-field/3-pair-field-json/views.tsx
@@ -1,9 +1,8 @@
import React from 'react'
-import { FieldContainer, FieldDescription, FieldLabel, TextInput } from '@keystone-ui/fields'
-import { CellLink, CellContainer } from '@keystone-6/core/admin-ui/components'
+import { Cell as CellContainer } from '@keystar/ui/table'
+import { TextField } from '@keystar/ui/text-field'
import {
- type CardValueComponent,
type CellComponent,
type FieldController,
type FieldControllerConfig,
@@ -16,57 +15,29 @@ export function Field ({ field, value, onChange, autoFocus }: FieldProps
-
- {field.label} (Left)
-
- {field.description}
-
-
- {
- onChange?.({ left: event.target.value, right })
- }}
- disabled={disabled}
- value={left || ''}
- autoFocus={autoFocus}
- />
-
-
-
- {field.label} (Right)
-
- {field.description}
-
-
- {
- onChange?.({ left, right: event.target.value })
- }}
- disabled={disabled}
- value={right || ''}
- autoFocus={autoFocus}
- />
-
-
+ onChange?.({ left: x === '' ? null : x, right })}
+ value={left ?? ''}
+ />
+ onChange?.({ right: x === '' ? null : x, left })}
+ value={right ?? ''}
+ />
)
}
-export const Cell: CellComponent = ({ item, field, linkTo }) => {
- let value = item[field.path] + ''
- return linkTo ? {value} : {value}
-}
-Cell.supportsLinkTo = true
-
-export const CardValue: CardValueComponent = ({ item, field }) => {
- return (
-
- {field.label}
- {item[field.path]}
-
- )
+export const Cell: CellComponent = ({ item, field }) => {
+ const value = item[field.path] + ''
+ return {value}
}
export const controller = (
diff --git a/examples/custom-field/3-pair-field-nested/index.ts b/examples/custom-field/3-pair-field-nested/index.ts
index c5fb98d918a..249ee89c436 100644
--- a/examples/custom-field/3-pair-field-nested/index.ts
+++ b/examples/custom-field/3-pair-field-nested/index.ts
@@ -1,8 +1,8 @@
import {
type BaseListTypeInfo,
- fieldType,
- type FieldTypeFunc,
type CommonFieldConfig,
+ type FieldTypeFunc,
+ fieldType,
} from '@keystone-6/core/types'
import { graphql } from '@keystone-6/core'
@@ -53,12 +53,8 @@ export function pair (
}
function resolveWhere (value: null | { equals: PairInput | null | undefined }) {
- if (value === null) {
- throw new Error('PairFilter cannot be null')
- }
- if (value.equals === undefined) {
- return {}
- }
+ if (value === null) throw new Error('PairFilter cannot be null')
+ if (value.equals === undefined) return {}
const { left, right } = resolveInput(value.equals)
return {
left: { equals: left },
diff --git a/examples/custom-field/3-pair-field-nested/views.tsx b/examples/custom-field/3-pair-field-nested/views.tsx
index 4f464a2fe81..f80ce7e972a 100644
--- a/examples/custom-field/3-pair-field-nested/views.tsx
+++ b/examples/custom-field/3-pair-field-nested/views.tsx
@@ -1,9 +1,8 @@
import React from 'react'
-import { FieldContainer, FieldDescription, FieldLabel, TextInput } from '@keystone-ui/fields'
-import { CellLink, CellContainer } from '@keystone-6/core/admin-ui/components'
+import { Cell as CellContainer } from '@keystar/ui/table'
+import { TextField } from '@keystar/ui/text-field'
import {
- type CardValueComponent,
type CellComponent,
type FieldController,
type FieldControllerConfig,
@@ -16,60 +15,32 @@ export function Field ({ field, value, onChange, autoFocus }: FieldProps
-
- {field.label} (Left)
-
- {field.description}
-
-
- {
- onChange?.({ left: event.target.value, right })
- }}
- disabled={disabled}
- value={left || ''}
- autoFocus={autoFocus}
- />
-
-
-
- {field.label} (Right)
-
- {field.description}
-
-
- {
- onChange?.({ left, right: event.target.value })
- }}
- disabled={disabled}
- value={right || ''}
- autoFocus={autoFocus}
- />
-
-
+ onChange?.({ left: x === '' ? null : x, right })}
+ value={left ?? ''}
+ />
+ onChange?.({ right: x === '' ? null : x, left })}
+ value={right ?? ''}
+ />
)
}
-export const Cell: CellComponent = ({ item, field, linkTo }) => {
- let value = item[field.path] + ''
- return linkTo ? {value} : {value}
+export const Cell: CellComponent = ({ item, field }) => {
+ const value = item[field.path] + ''
+ return {value}
}
-Cell.supportsLinkTo = true
-export const CardValue: CardValueComponent = ({ item, field }) => {
- return (
-
- {field.label}
- {item[field.path]}
-
- )
-}
-
-export const controller = (
+export function controller (
config: FieldControllerConfig<{}>
): FieldController<
{
@@ -77,7 +48,7 @@ export const controller = (
right: string | null
} | null,
string
-> => {
+> {
return {
path: config.path,
label: config.label,
diff --git a/examples/custom-field/3-pair-field/index.ts b/examples/custom-field/3-pair-field/index.ts
index 86a683b757e..3ff8cc8cec2 100644
--- a/examples/custom-field/3-pair-field/index.ts
+++ b/examples/custom-field/3-pair-field/index.ts
@@ -1,8 +1,8 @@
import {
type BaseListTypeInfo,
- fieldType,
- type FieldTypeFunc,
type CommonFieldConfig,
+ type FieldTypeFunc,
+ fieldType,
} from '@keystone-6/core/types'
import { graphql } from '@keystone-6/core'
@@ -40,12 +40,8 @@ export function pair (
}
function resolveWhere (value: null | { equals: string | null | undefined }) {
- if (value === null) {
- throw new Error('PairFilter cannot be null')
- }
- if (value.equals === undefined) {
- return {}
- }
+ if (value === null) throw new Error('PairFilter cannot be null')
+ if (value.equals === undefined) return {}
const { left, right } = resolveInput(value.equals)
return {
left: { equals: left },
diff --git a/examples/custom-field/3-pair-field/views.tsx b/examples/custom-field/3-pair-field/views.tsx
index 4ad1ec86f02..357eb6e71f8 100644
--- a/examples/custom-field/3-pair-field/views.tsx
+++ b/examples/custom-field/3-pair-field/views.tsx
@@ -1,9 +1,8 @@
import React from 'react'
-import { FieldContainer, FieldDescription, FieldLabel, TextInput } from '@keystone-ui/fields'
-import { CellLink, CellContainer } from '@keystone-6/core/admin-ui/components'
+import { Cell as CellContainer } from '@keystar/ui/table'
+import { TextField } from '@keystar/ui/text-field'
import {
- type CardValueComponent,
type CellComponent,
type FieldController,
type FieldControllerConfig,
@@ -14,42 +13,25 @@ export function Field ({ field, value, onChange, autoFocus }: FieldProps
- {field.label}
- {field.description}
-
- {
- onChange?.(event.target.value)
- }}
- disabled={disabled}
- value={value || ''}
- autoFocus={autoFocus}
- />
-
-
+ onChange?.(x === '' ? null : x)}
+ value={value ?? ''}
+ />
)
}
-export const Cell: CellComponent = ({ item, field, linkTo }) => {
- let value = item[field.path] + ''
- return linkTo ? {value} : {value}
+export const Cell: CellComponent = ({ item, field }) => {
+ const value = item[field.path] + ''
+ return {value}
}
-Cell.supportsLinkTo = true
-export const CardValue: CardValueComponent = ({ item, field }) => {
- return (
-
- {field.label}
- {item[field.path]}
-
- )
-}
-
-export const controller = (
+export function controller (
config: FieldControllerConfig<{}>
-): FieldController => {
+): FieldController {
return {
path: config.path,
label: config.label,
diff --git a/examples/custom-field/4-conditional-field/index.tsx b/examples/custom-field/4-conditional-field/index.tsx
index 07318c19e99..336c08cc01e 100644
--- a/examples/custom-field/4-conditional-field/index.tsx
+++ b/examples/custom-field/4-conditional-field/index.tsx
@@ -1,8 +1,8 @@
import {
type BaseListTypeInfo,
- fieldType,
- type FieldTypeFunc,
type CommonFieldConfig,
+ type FieldTypeFunc,
+ fieldType,
orderDirectionEnum,
} from '@keystone-6/core/types'
import { graphql } from '@keystone-6/core'
diff --git a/examples/custom-field/4-conditional-field/views.tsx b/examples/custom-field/4-conditional-field/views.tsx
index 0c50f1b5f93..0745d73435f 100644
--- a/examples/custom-field/4-conditional-field/views.tsx
+++ b/examples/custom-field/4-conditional-field/views.tsx
@@ -1,9 +1,8 @@
import React, { useEffect } from 'react'
-import { FieldContainer, FieldDescription, FieldLabel, TextInput } from '@keystone-ui/fields'
-import { CellLink, CellContainer } from '@keystone-6/core/admin-ui/components'
+import { Cell as CellContainer } from '@keystar/ui/table'
+import { TextField } from '@keystar/ui/text-field'
import {
- type CardValueComponent,
type CellComponent,
type FieldController,
type FieldControllerConfig,
@@ -28,40 +27,23 @@ export function Field ({
const disabled = onChange === undefined
return (
-
- {field.label}
- {field.description}
-
- {
- onChange?.(event.target.value)
- }}
- disabled={disabled}
- value={value || ''}
- autoFocus={autoFocus}
- />
-
-
+ onChange?.(x === '' ? null : x)}
+ value={value ?? ''}
+ />
)
}
-export const Cell: CellComponent = ({ item, field, linkTo }) => {
+export const Cell: CellComponent = ({ item, field }) => {
const value = item[field.path] + ''
- return linkTo ? {value} : {value}
+ return {value}
}
-Cell.supportsLinkTo = true
-export const CardValue: CardValueComponent = ({ item, field }) => {
- return (
-
- {field.label}
- {item[field.path]}
-
- )
-}
-
-export const controller = (
+export function controller (
config: FieldControllerConfig<{
dependency: {
field: string
@@ -73,7 +55,7 @@ export const controller = (
field: string
minimumValue: number
}
-} => {
+} {
return {
path: config.path,
label: config.label,
diff --git a/examples/custom-field/package.json b/examples/custom-field/package.json
index c1e98c18fc9..4200ff10278 100644
--- a/examples/custom-field/package.json
+++ b/examples/custom-field/package.json
@@ -10,6 +10,7 @@
"postinstall": "keystone postinstall"
},
"dependencies": {
+ "@keystar/ui": "^0.7.13",
"@keystone-6/core": "^6.3.1",
"@keystone-ui/fields": "^7.2.0",
"@prisma/client": "5.19.0"
diff --git a/examples/custom-field/schema.graphql b/examples/custom-field/schema.graphql
index 775a82359f4..5b8a88e1cdc 100644
--- a/examples/custom-field/schema.graphql
+++ b/examples/custom-field/schema.graphql
@@ -136,24 +136,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/custom-id/schema.graphql b/examples/custom-id/schema.graphql
index cf770e33753..5b7077319c0 100644
--- a/examples/custom-id/schema.graphql
+++ b/examples/custom-id/schema.graphql
@@ -402,24 +402,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/custom-output-paths/my-graphql.graphql b/examples/custom-output-paths/my-graphql.graphql
index fec34de3bfd..4901e57abfd 100644
--- a/examples/custom-output-paths/my-graphql.graphql
+++ b/examples/custom-output-paths/my-graphql.graphql
@@ -136,24 +136,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/custom-session-invalidation/schema.graphql b/examples/custom-session-invalidation/schema.graphql
index 28724cc9f8d..ff38064b80c 100644
--- a/examples/custom-session-invalidation/schema.graphql
+++ b/examples/custom-session-invalidation/schema.graphql
@@ -101,11 +101,9 @@ type Query {
users(where: UserWhereInput! = {}, orderBy: [UserOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: UserWhereUniqueInput): [User!]
usersCount(where: UserWhereInput! = {}): Int
keystone: KeystoneMeta!
- authenticatedItem: AuthenticatedItem
+ authenticatedItem: User
}
-union AuthenticatedItem = User
-
type KeystoneMeta {
adminMeta: KeystoneAdminMeta!
}
@@ -118,24 +116,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/custom-session-jwt/schema.graphql b/examples/custom-session-jwt/schema.graphql
index 2296d876ec2..f385129f793 100644
--- a/examples/custom-session-jwt/schema.graphql
+++ b/examples/custom-session-jwt/schema.graphql
@@ -148,7 +148,6 @@ type Mutation {
updateUsers(data: [UserUpdateArgs!]!): [User]
deleteUser(where: UserWhereUniqueInput!): User
deleteUsers(where: [UserWhereUniqueInput!]!): [User]
- endSession: Boolean!
}
type Query {
@@ -173,24 +172,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/custom-session-next-auth/schema.graphql b/examples/custom-session-next-auth/schema.graphql
index 33d7b305133..070217b2084 100644
--- a/examples/custom-session-next-auth/schema.graphql
+++ b/examples/custom-session-next-auth/schema.graphql
@@ -182,7 +182,6 @@ type Mutation {
updateAuthors(data: [AuthorUpdateArgs!]!): [Author]
deleteAuthor(where: AuthorWhereUniqueInput!): Author
deleteAuthors(where: [AuthorWhereUniqueInput!]!): [Author]
- endSession: Boolean!
}
type Query {
@@ -207,24 +206,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/custom-session-passport/schema.graphql b/examples/custom-session-passport/schema.graphql
index 33d7b305133..070217b2084 100644
--- a/examples/custom-session-passport/schema.graphql
+++ b/examples/custom-session-passport/schema.graphql
@@ -182,7 +182,6 @@ type Mutation {
updateAuthors(data: [AuthorUpdateArgs!]!): [Author]
deleteAuthor(where: AuthorWhereUniqueInput!): Author
deleteAuthors(where: [AuthorWhereUniqueInput!]!): [Author]
- endSession: Boolean!
}
type Query {
@@ -207,24 +206,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/custom-session-redis/schema.graphql b/examples/custom-session-redis/schema.graphql
index 0ffdd4bfb46..73e9d9e4486 100644
--- a/examples/custom-session-redis/schema.graphql
+++ b/examples/custom-session-redis/schema.graphql
@@ -95,11 +95,9 @@ type Query {
users(where: UserWhereInput! = {}, orderBy: [UserOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: UserWhereUniqueInput): [User!]
usersCount(where: UserWhereInput! = {}): Int
keystone: KeystoneMeta!
- authenticatedItem: AuthenticatedItem
+ authenticatedItem: User
}
-union AuthenticatedItem = User
-
type KeystoneMeta {
adminMeta: KeystoneAdminMeta!
}
@@ -112,24 +110,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/custom-session/schema.graphql b/examples/custom-session/schema.graphql
index 2296d876ec2..f385129f793 100644
--- a/examples/custom-session/schema.graphql
+++ b/examples/custom-session/schema.graphql
@@ -148,7 +148,6 @@ type Mutation {
updateUsers(data: [UserUpdateArgs!]!): [User]
deleteUser(where: UserWhereUniqueInput!): User
deleteUsers(where: [UserWhereUniqueInput!]!): [User]
- endSession: Boolean!
}
type Query {
@@ -173,24 +172,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/default-values/schema.graphql b/examples/default-values/schema.graphql
index 0b14abaecb0..7c61cbff9be 100644
--- a/examples/default-values/schema.graphql
+++ b/examples/default-values/schema.graphql
@@ -260,24 +260,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/document-field-customisation/keystone-server/schema.graphql b/examples/document-field-customisation/keystone-server/schema.graphql
index 6a099d9995d..0bf8b8c0197 100644
--- a/examples/document-field-customisation/keystone-server/schema.graphql
+++ b/examples/document-field-customisation/keystone-server/schema.graphql
@@ -232,24 +232,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/document-field/schema.graphql b/examples/document-field/schema.graphql
index dcf50dbe7e3..7911bebfe18 100644
--- a/examples/document-field/schema.graphql
+++ b/examples/document-field/schema.graphql
@@ -256,24 +256,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/empty-lists/schema.graphql b/examples/empty-lists/schema.graphql
index 87cebf6105c..2253c198dce 100644
--- a/examples/empty-lists/schema.graphql
+++ b/examples/empty-lists/schema.graphql
@@ -381,24 +381,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/extend-express-app/schema.graphql b/examples/extend-express-app/schema.graphql
index 190f6739ade..2bcf8117ed2 100644
--- a/examples/extend-express-app/schema.graphql
+++ b/examples/extend-express-app/schema.graphql
@@ -128,24 +128,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/extend-graphql-schema-graphql-tools/schema.graphql b/examples/extend-graphql-schema-graphql-tools/schema.graphql
index eca1913cd52..9a932332e57 100644
--- a/examples/extend-graphql-schema-graphql-tools/schema.graphql
+++ b/examples/extend-graphql-schema-graphql-tools/schema.graphql
@@ -253,24 +253,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/extend-graphql-schema-graphql-ts/schema.graphql b/examples/extend-graphql-schema-graphql-ts/schema.graphql
index 0ba58eb6efe..fc7bbc58641 100644
--- a/examples/extend-graphql-schema-graphql-ts/schema.graphql
+++ b/examples/extend-graphql-schema-graphql-ts/schema.graphql
@@ -251,24 +251,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/extend-graphql-schema-nexus/nexus-types.ts b/examples/extend-graphql-schema-nexus/nexus-types.ts
index ed5c71d7c23..a94250fff9c 100644
--- a/examples/extend-graphql-schema-nexus/nexus-types.ts
+++ b/examples/extend-graphql-schema-nexus/nexus-types.ts
@@ -15,151 +15,146 @@ declare global {
export interface NexusGenInputs {
AuthorCreateInput: { // input type
- email?: string | null // String
- name?: string | null // String
- posts?: NexusGenInputs['PostRelateToManyForCreateInput'] | null // PostRelateToManyForCreateInput
+ name?: string | null; // String
+ posts?: NexusGenInputs['PostRelateToManyForCreateInput'] | null; // PostRelateToManyForCreateInput
}
AuthorOrderByInput: { // input type
- email?: NexusGenEnums['OrderDirection'] | null // OrderDirection
- id?: NexusGenEnums['OrderDirection'] | null // OrderDirection
- name?: NexusGenEnums['OrderDirection'] | null // OrderDirection
+ id?: NexusGenEnums['OrderDirection'] | null; // OrderDirection
+ name?: NexusGenEnums['OrderDirection'] | null; // OrderDirection
}
AuthorRelateToOneForCreateInput: { // input type
- connect?: NexusGenInputs['AuthorWhereUniqueInput'] | null // AuthorWhereUniqueInput
- create?: NexusGenInputs['AuthorCreateInput'] | null // AuthorCreateInput
+ connect?: NexusGenInputs['AuthorWhereUniqueInput'] | null; // AuthorWhereUniqueInput
+ create?: NexusGenInputs['AuthorCreateInput'] | null; // AuthorCreateInput
}
AuthorRelateToOneForUpdateInput: { // input type
- connect?: NexusGenInputs['AuthorWhereUniqueInput'] | null // AuthorWhereUniqueInput
- create?: NexusGenInputs['AuthorCreateInput'] | null // AuthorCreateInput
- disconnect?: boolean | null // Boolean
+ connect?: NexusGenInputs['AuthorWhereUniqueInput'] | null; // AuthorWhereUniqueInput
+ create?: NexusGenInputs['AuthorCreateInput'] | null; // AuthorCreateInput
+ disconnect?: boolean | null; // Boolean
}
AuthorUpdateArgs: { // input type
- data: NexusGenInputs['AuthorUpdateInput'] // AuthorUpdateInput!
- where: NexusGenInputs['AuthorWhereUniqueInput'] // AuthorWhereUniqueInput!
+ data: NexusGenInputs['AuthorUpdateInput']; // AuthorUpdateInput!
+ where: NexusGenInputs['AuthorWhereUniqueInput']; // AuthorWhereUniqueInput!
}
AuthorUpdateInput: { // input type
- email?: string | null // String
- name?: string | null // String
- posts?: NexusGenInputs['PostRelateToManyForUpdateInput'] | null // PostRelateToManyForUpdateInput
+ name?: string | null; // String
+ posts?: NexusGenInputs['PostRelateToManyForUpdateInput'] | null; // PostRelateToManyForUpdateInput
}
AuthorWhereInput: { // input type
- AND?: NexusGenInputs['AuthorWhereInput'][] | null // [AuthorWhereInput!]
- NOT?: NexusGenInputs['AuthorWhereInput'][] | null // [AuthorWhereInput!]
- OR?: NexusGenInputs['AuthorWhereInput'][] | null // [AuthorWhereInput!]
- email?: NexusGenInputs['StringFilter'] | null // StringFilter
- id?: NexusGenInputs['IDFilter'] | null // IDFilter
- name?: NexusGenInputs['StringFilter'] | null // StringFilter
- posts?: NexusGenInputs['PostManyRelationFilter'] | null // PostManyRelationFilter
+ AND?: NexusGenInputs['AuthorWhereInput'][] | null; // [AuthorWhereInput!]
+ NOT?: NexusGenInputs['AuthorWhereInput'][] | null; // [AuthorWhereInput!]
+ OR?: NexusGenInputs['AuthorWhereInput'][] | null; // [AuthorWhereInput!]
+ id?: NexusGenInputs['IDFilter'] | null; // IDFilter
+ name?: NexusGenInputs['StringFilter'] | null; // StringFilter
+ posts?: NexusGenInputs['PostManyRelationFilter'] | null; // PostManyRelationFilter
}
AuthorWhereUniqueInput: { // input type
- email?: string | null // String
- id?: string | null // ID
+ id?: string | null; // ID
}
DateTimeNullableFilter: { // input type
- equals?: NexusGenScalars['DateTime'] | null // DateTime
- gt?: NexusGenScalars['DateTime'] | null // DateTime
- gte?: NexusGenScalars['DateTime'] | null // DateTime
- in?: NexusGenScalars['DateTime'][] | null // [DateTime!]
- lt?: NexusGenScalars['DateTime'] | null // DateTime
- lte?: NexusGenScalars['DateTime'] | null // DateTime
- not?: NexusGenInputs['DateTimeNullableFilter'] | null // DateTimeNullableFilter
- notIn?: NexusGenScalars['DateTime'][] | null // [DateTime!]
+ equals?: NexusGenScalars['DateTime'] | null; // DateTime
+ gt?: NexusGenScalars['DateTime'] | null; // DateTime
+ gte?: NexusGenScalars['DateTime'] | null; // DateTime
+ in?: NexusGenScalars['DateTime'][] | null; // [DateTime!]
+ lt?: NexusGenScalars['DateTime'] | null; // DateTime
+ lte?: NexusGenScalars['DateTime'] | null; // DateTime
+ not?: NexusGenInputs['DateTimeNullableFilter'] | null; // DateTimeNullableFilter
+ notIn?: NexusGenScalars['DateTime'][] | null; // [DateTime!]
}
IDFilter: { // input type
- equals?: string | null // ID
- gt?: string | null // ID
- gte?: string | null // ID
- in?: string[] | null // [ID!]
- lt?: string | null // ID
- lte?: string | null // ID
- not?: NexusGenInputs['IDFilter'] | null // IDFilter
- notIn?: string[] | null // [ID!]
+ equals?: string | null; // ID
+ gt?: string | null; // ID
+ gte?: string | null; // ID
+ in?: string[] | null; // [ID!]
+ lt?: string | null; // ID
+ lte?: string | null; // ID
+ not?: NexusGenInputs['IDFilter'] | null; // IDFilter
+ notIn?: string[] | null; // [ID!]
}
NestedStringFilter: { // input type
- contains?: string | null // String
- endsWith?: string | null // String
- equals?: string | null // String
- gt?: string | null // String
- gte?: string | null // String
- in?: string[] | null // [String!]
- lt?: string | null // String
- lte?: string | null // String
- not?: NexusGenInputs['NestedStringFilter'] | null // NestedStringFilter
- notIn?: string[] | null // [String!]
- startsWith?: string | null // String
+ contains?: string | null; // String
+ endsWith?: string | null; // String
+ equals?: string | null; // String
+ gt?: string | null; // String
+ gte?: string | null; // String
+ in?: string[] | null; // [String!]
+ lt?: string | null; // String
+ lte?: string | null; // String
+ not?: NexusGenInputs['NestedStringFilter'] | null; // NestedStringFilter
+ notIn?: string[] | null; // [String!]
+ startsWith?: string | null; // String
}
PostCreateInput: { // input type
- author?: NexusGenInputs['AuthorRelateToOneForCreateInput'] | null // AuthorRelateToOneForCreateInput
- content?: string | null // String
- publishDate?: NexusGenScalars['DateTime'] | null // DateTime
- status?: NexusGenEnums['PostStatusType'] | null // PostStatusType
- title?: string | null // String
+ author?: NexusGenInputs['AuthorRelateToOneForCreateInput'] | null; // AuthorRelateToOneForCreateInput
+ content?: string | null; // String
+ publishDate?: NexusGenScalars['DateTime'] | null; // DateTime
+ status?: NexusGenEnums['PostStatusType'] | null; // PostStatusType
+ title?: string | null; // String
}
PostManyRelationFilter: { // input type
- every?: NexusGenInputs['PostWhereInput'] | null // PostWhereInput
- none?: NexusGenInputs['PostWhereInput'] | null // PostWhereInput
- some?: NexusGenInputs['PostWhereInput'] | null // PostWhereInput
+ every?: NexusGenInputs['PostWhereInput'] | null; // PostWhereInput
+ none?: NexusGenInputs['PostWhereInput'] | null; // PostWhereInput
+ some?: NexusGenInputs['PostWhereInput'] | null; // PostWhereInput
}
PostOrderByInput: { // input type
- content?: NexusGenEnums['OrderDirection'] | null // OrderDirection
- id?: NexusGenEnums['OrderDirection'] | null // OrderDirection
- publishDate?: NexusGenEnums['OrderDirection'] | null // OrderDirection
- status?: NexusGenEnums['OrderDirection'] | null // OrderDirection
- title?: NexusGenEnums['OrderDirection'] | null // OrderDirection
+ content?: NexusGenEnums['OrderDirection'] | null; // OrderDirection
+ id?: NexusGenEnums['OrderDirection'] | null; // OrderDirection
+ publishDate?: NexusGenEnums['OrderDirection'] | null; // OrderDirection
+ status?: NexusGenEnums['OrderDirection'] | null; // OrderDirection
+ title?: NexusGenEnums['OrderDirection'] | null; // OrderDirection
}
PostRelateToManyForCreateInput: { // input type
- connect?: NexusGenInputs['PostWhereUniqueInput'][] | null // [PostWhereUniqueInput!]
- create?: NexusGenInputs['PostCreateInput'][] | null // [PostCreateInput!]
+ connect?: NexusGenInputs['PostWhereUniqueInput'][] | null; // [PostWhereUniqueInput!]
+ create?: NexusGenInputs['PostCreateInput'][] | null; // [PostCreateInput!]
}
PostRelateToManyForUpdateInput: { // input type
- connect?: NexusGenInputs['PostWhereUniqueInput'][] | null // [PostWhereUniqueInput!]
- create?: NexusGenInputs['PostCreateInput'][] | null // [PostCreateInput!]
- disconnect?: NexusGenInputs['PostWhereUniqueInput'][] | null // [PostWhereUniqueInput!]
- set?: NexusGenInputs['PostWhereUniqueInput'][] | null // [PostWhereUniqueInput!]
+ connect?: NexusGenInputs['PostWhereUniqueInput'][] | null; // [PostWhereUniqueInput!]
+ create?: NexusGenInputs['PostCreateInput'][] | null; // [PostCreateInput!]
+ disconnect?: NexusGenInputs['PostWhereUniqueInput'][] | null; // [PostWhereUniqueInput!]
+ set?: NexusGenInputs['PostWhereUniqueInput'][] | null; // [PostWhereUniqueInput!]
}
PostStatusTypeNullableFilter: { // input type
- equals?: NexusGenEnums['PostStatusType'] | null // PostStatusType
- in?: NexusGenEnums['PostStatusType'][] | null // [PostStatusType!]
- not?: NexusGenInputs['PostStatusTypeNullableFilter'] | null // PostStatusTypeNullableFilter
- notIn?: NexusGenEnums['PostStatusType'][] | null // [PostStatusType!]
+ equals?: NexusGenEnums['PostStatusType'] | null; // PostStatusType
+ in?: NexusGenEnums['PostStatusType'][] | null; // [PostStatusType!]
+ not?: NexusGenInputs['PostStatusTypeNullableFilter'] | null; // PostStatusTypeNullableFilter
+ notIn?: NexusGenEnums['PostStatusType'][] | null; // [PostStatusType!]
}
PostUpdateArgs: { // input type
- data: NexusGenInputs['PostUpdateInput'] // PostUpdateInput!
- where: NexusGenInputs['PostWhereUniqueInput'] // PostWhereUniqueInput!
+ data: NexusGenInputs['PostUpdateInput']; // PostUpdateInput!
+ where: NexusGenInputs['PostWhereUniqueInput']; // PostWhereUniqueInput!
}
PostUpdateInput: { // input type
- author?: NexusGenInputs['AuthorRelateToOneForUpdateInput'] | null // AuthorRelateToOneForUpdateInput
- content?: string | null // String
- publishDate?: NexusGenScalars['DateTime'] | null // DateTime
- status?: NexusGenEnums['PostStatusType'] | null // PostStatusType
- title?: string | null // String
+ author?: NexusGenInputs['AuthorRelateToOneForUpdateInput'] | null; // AuthorRelateToOneForUpdateInput
+ content?: string | null; // String
+ publishDate?: NexusGenScalars['DateTime'] | null; // DateTime
+ status?: NexusGenEnums['PostStatusType'] | null; // PostStatusType
+ title?: string | null; // String
}
PostWhereInput: { // input type
- AND?: NexusGenInputs['PostWhereInput'][] | null // [PostWhereInput!]
- NOT?: NexusGenInputs['PostWhereInput'][] | null // [PostWhereInput!]
- OR?: NexusGenInputs['PostWhereInput'][] | null // [PostWhereInput!]
- author?: NexusGenInputs['AuthorWhereInput'] | null // AuthorWhereInput
- content?: NexusGenInputs['StringFilter'] | null // StringFilter
- id?: NexusGenInputs['IDFilter'] | null // IDFilter
- publishDate?: NexusGenInputs['DateTimeNullableFilter'] | null // DateTimeNullableFilter
- status?: NexusGenInputs['PostStatusTypeNullableFilter'] | null // PostStatusTypeNullableFilter
- title?: NexusGenInputs['StringFilter'] | null // StringFilter
+ AND?: NexusGenInputs['PostWhereInput'][] | null; // [PostWhereInput!]
+ NOT?: NexusGenInputs['PostWhereInput'][] | null; // [PostWhereInput!]
+ OR?: NexusGenInputs['PostWhereInput'][] | null; // [PostWhereInput!]
+ author?: NexusGenInputs['AuthorWhereInput'] | null; // AuthorWhereInput
+ content?: NexusGenInputs['StringFilter'] | null; // StringFilter
+ id?: NexusGenInputs['IDFilter'] | null; // IDFilter
+ publishDate?: NexusGenInputs['DateTimeNullableFilter'] | null; // DateTimeNullableFilter
+ status?: NexusGenInputs['PostStatusTypeNullableFilter'] | null; // PostStatusTypeNullableFilter
+ title?: NexusGenInputs['StringFilter'] | null; // StringFilter
}
PostWhereUniqueInput: { // input type
- id?: string | null // ID
+ id?: string | null; // ID
}
StringFilter: { // input type
- contains?: string | null // String
- endsWith?: string | null // String
- equals?: string | null // String
- gt?: string | null // String
- gte?: string | null // String
- in?: string[] | null // [String!]
- lt?: string | null // String
- lte?: string | null // String
- not?: NexusGenInputs['NestedStringFilter'] | null // NestedStringFilter
- notIn?: string[] | null // [String!]
- startsWith?: string | null // String
+ contains?: string | null; // String
+ endsWith?: string | null; // String
+ equals?: string | null; // String
+ gt?: string | null; // String
+ gte?: string | null; // String
+ in?: string[] | null; // [String!]
+ lt?: string | null; // String
+ lte?: string | null; // String
+ not?: NexusGenInputs['NestedStringFilter'] | null; // NestedStringFilter
+ notIn?: string[] | null; // [String!]
+ startsWith?: string | null; // String
}
}
@@ -186,59 +181,83 @@ export interface NexusGenScalars {
}
export interface NexusGenObjects {
- Author: {}
+ Author: {};
KeystoneAdminMeta: { // root type
- lists: NexusGenRootTypes['KeystoneAdminUIListMeta'][] // [KeystoneAdminUIListMeta!]!
+ lists: NexusGenRootTypes['KeystoneAdminUIListMeta'][]; // [KeystoneAdminUIListMeta!]!
}
KeystoneAdminUIFieldGroupMeta: { // root type
- description?: string | null // String
- fields: NexusGenRootTypes['KeystoneAdminUIFieldMeta'][] // [KeystoneAdminUIFieldMeta!]!
- label: string // String!
+ description?: string | null; // String
+ fields: NexusGenRootTypes['KeystoneAdminUIFieldMeta'][]; // [KeystoneAdminUIFieldMeta!]!
+ label: string; // String!
}
KeystoneAdminUIFieldMeta: { // root type
- createView: NexusGenRootTypes['KeystoneAdminUIFieldMetaCreateView'] // KeystoneAdminUIFieldMetaCreateView!
- customViewsIndex?: number | null // Int
- description?: string | null // String
- fieldMeta?: NexusGenScalars['JSON'] | null // JSON
- isNonNull?: NexusGenEnums['KeystoneAdminUIFieldMetaIsNonNull'][] | null // [KeystoneAdminUIFieldMetaIsNonNull!]
- label: string // String!
- listView: NexusGenRootTypes['KeystoneAdminUIFieldMetaListView'] // KeystoneAdminUIFieldMetaListView!
- path: string // String!
- search?: NexusGenEnums['QueryMode'] | null // QueryMode
- viewsIndex: number // Int!
- }
- KeystoneAdminUIFieldMetaCreateView: {}
- KeystoneAdminUIFieldMetaItemView: {}
- KeystoneAdminUIFieldMetaListView: {}
+ createView: NexusGenRootTypes['KeystoneAdminUIFieldMetaCreateView']; // KeystoneAdminUIFieldMetaCreateView!
+ customViewsIndex?: number | null; // Int
+ description?: string | null; // String
+ fieldMeta?: NexusGenScalars['JSON'] | null; // JSON
+ isNonNull?: NexusGenEnums['KeystoneAdminUIFieldMetaIsNonNull'][] | null; // [KeystoneAdminUIFieldMetaIsNonNull!]
+ label: string; // String!
+ listView: NexusGenRootTypes['KeystoneAdminUIFieldMetaListView']; // KeystoneAdminUIFieldMetaListView!
+ path: string; // String!
+ search?: NexusGenEnums['QueryMode'] | null; // QueryMode
+ viewsIndex: number; // Int!
+ }
+ KeystoneAdminUIFieldMetaCreateView: {};
+ KeystoneAdminUIFieldMetaItemView: {};
+ KeystoneAdminUIFieldMetaListView: {};
+ KeystoneAdminUIGraphQL: { // root type
+ names: NexusGenRootTypes['KeystoneAdminUIGraphQLNames']; // KeystoneAdminUIGraphQLNames!
+ }
+ KeystoneAdminUIGraphQLNames: { // root type
+ createInputName: string; // String!
+ createManyMutationName: string; // String!
+ createMutationName: string; // String!
+ deleteManyMutationName: string; // String!
+ deleteMutationName: string; // String!
+ itemQueryName: string; // String!
+ listOrderName: string; // String!
+ listQueryCountName: string; // String!
+ listQueryName: string; // String!
+ outputTypeName: string; // String!
+ relateToManyForCreateInputName: string; // String!
+ relateToManyForUpdateInputName: string; // String!
+ relateToOneForCreateInputName: string; // String!
+ relateToOneForUpdateInputName: string; // String!
+ updateInputName: string; // String!
+ updateManyInputName: string; // String!
+ updateManyMutationName: string; // String!
+ updateMutationName: string; // String!
+ whereInputName: string; // String!
+ whereUniqueInputName: string; // String!
+ }
KeystoneAdminUIListMeta: { // root type
- description?: string | null // String
- fields: NexusGenRootTypes['KeystoneAdminUIFieldMeta'][] // [KeystoneAdminUIFieldMeta!]!
- groups: NexusGenRootTypes['KeystoneAdminUIFieldGroupMeta'][] // [KeystoneAdminUIFieldGroupMeta!]!
- initialColumns: string[] // [String!]!
- initialSort?: NexusGenRootTypes['KeystoneAdminUISort'] | null // KeystoneAdminUISort
- isSingleton: boolean // Boolean!
- itemQueryName: string // String!
- key: string // String!
- label: string // String!
- labelField: string // String!
- listQueryName: string // String!
- pageSize: number // Int!
- path: string // String!
- plural: string // String!
- singular: string // String!
+ description?: string | null; // String
+ fields: NexusGenRootTypes['KeystoneAdminUIFieldMeta'][]; // [KeystoneAdminUIFieldMeta!]!
+ graphql: NexusGenRootTypes['KeystoneAdminUIGraphQL']; // KeystoneAdminUIGraphQL!
+ groups: NexusGenRootTypes['KeystoneAdminUIFieldGroupMeta'][]; // [KeystoneAdminUIFieldGroupMeta!]!
+ initialColumns: string[]; // [String!]!
+ initialSort?: NexusGenRootTypes['KeystoneAdminUISort'] | null; // KeystoneAdminUISort
+ isSingleton: boolean; // Boolean!
+ key: string; // String!
+ label: string; // String!
+ labelField: string; // String!
+ pageSize: number; // Int!
+ path: string; // String!
+ plural: string; // String!
+ singular: string; // String!
}
KeystoneAdminUISort: { // root type
- direction: NexusGenEnums['KeystoneAdminUISortDirection'] // KeystoneAdminUISortDirection!
- field: string // String!
+ direction: NexusGenEnums['KeystoneAdminUISortDirection']; // KeystoneAdminUISortDirection!
+ field: string; // String!
}
- KeystoneMeta: {}
- Mutation: {}
+ KeystoneMeta: {};
+ Mutation: {};
NexusThing: { // root type
- id?: number | null // Int
- title?: string | null // String
+ id?: number | null; // Int
+ title?: string | null; // String
}
- Post: {}
- Query: {}
+ Post: {};
+ Query: {};
}
export interface NexusGenInterfaces {
@@ -253,115 +272,137 @@ export type NexusGenAllTypes = NexusGenRootTypes & NexusGenScalars & NexusGenEnu
export interface NexusGenFieldTypes {
Author: { // field return type
- email: string | null // String
- id: string // ID!
- name: string | null // String
- posts: NexusGenRootTypes['Post'][] | null // [Post!]
- postsCount: number | null // Int
+ id: string; // ID!
+ name: string | null; // String
+ posts: NexusGenRootTypes['Post'][] | null; // [Post!]
+ postsCount: number | null; // Int
}
KeystoneAdminMeta: { // field return type
- list: NexusGenRootTypes['KeystoneAdminUIListMeta'] | null // KeystoneAdminUIListMeta
- lists: NexusGenRootTypes['KeystoneAdminUIListMeta'][] // [KeystoneAdminUIListMeta!]!
+ list: NexusGenRootTypes['KeystoneAdminUIListMeta'] | null; // KeystoneAdminUIListMeta
+ lists: NexusGenRootTypes['KeystoneAdminUIListMeta'][]; // [KeystoneAdminUIListMeta!]!
}
KeystoneAdminUIFieldGroupMeta: { // field return type
- description: string | null // String
- fields: NexusGenRootTypes['KeystoneAdminUIFieldMeta'][] // [KeystoneAdminUIFieldMeta!]!
- label: string // String!
+ description: string | null; // String
+ fields: NexusGenRootTypes['KeystoneAdminUIFieldMeta'][]; // [KeystoneAdminUIFieldMeta!]!
+ label: string; // String!
}
KeystoneAdminUIFieldMeta: { // field return type
- createView: NexusGenRootTypes['KeystoneAdminUIFieldMetaCreateView'] // KeystoneAdminUIFieldMetaCreateView!
- customViewsIndex: number | null // Int
- description: string | null // String
- fieldMeta: NexusGenScalars['JSON'] | null // JSON
- isFilterable: boolean // Boolean!
- isNonNull: NexusGenEnums['KeystoneAdminUIFieldMetaIsNonNull'][] | null // [KeystoneAdminUIFieldMetaIsNonNull!]
- isOrderable: boolean // Boolean!
- itemView: NexusGenRootTypes['KeystoneAdminUIFieldMetaItemView'] | null // KeystoneAdminUIFieldMetaItemView
- label: string // String!
- listView: NexusGenRootTypes['KeystoneAdminUIFieldMetaListView'] // KeystoneAdminUIFieldMetaListView!
- path: string // String!
- search: NexusGenEnums['QueryMode'] | null // QueryMode
- viewsIndex: number // Int!
+ createView: NexusGenRootTypes['KeystoneAdminUIFieldMetaCreateView']; // KeystoneAdminUIFieldMetaCreateView!
+ customViewsIndex: number | null; // Int
+ description: string | null; // String
+ fieldMeta: NexusGenScalars['JSON'] | null; // JSON
+ isFilterable: boolean; // Boolean!
+ isNonNull: NexusGenEnums['KeystoneAdminUIFieldMetaIsNonNull'][] | null; // [KeystoneAdminUIFieldMetaIsNonNull!]
+ isOrderable: boolean; // Boolean!
+ itemView: NexusGenRootTypes['KeystoneAdminUIFieldMetaItemView'] | null; // KeystoneAdminUIFieldMetaItemView
+ label: string; // String!
+ listView: NexusGenRootTypes['KeystoneAdminUIFieldMetaListView']; // KeystoneAdminUIFieldMetaListView!
+ path: string; // String!
+ search: NexusGenEnums['QueryMode'] | null; // QueryMode
+ viewsIndex: number; // Int!
}
KeystoneAdminUIFieldMetaCreateView: { // field return type
- fieldMode: NexusGenEnums['KeystoneAdminUIFieldMetaCreateViewFieldMode'] // KeystoneAdminUIFieldMetaCreateViewFieldMode!
+ fieldMode: NexusGenEnums['KeystoneAdminUIFieldMetaCreateViewFieldMode']; // KeystoneAdminUIFieldMetaCreateViewFieldMode!
}
KeystoneAdminUIFieldMetaItemView: { // field return type
- fieldMode: NexusGenEnums['KeystoneAdminUIFieldMetaItemViewFieldMode'] | null // KeystoneAdminUIFieldMetaItemViewFieldMode
- fieldPosition: NexusGenEnums['KeystoneAdminUIFieldMetaItemViewFieldPosition'] | null // KeystoneAdminUIFieldMetaItemViewFieldPosition
+ fieldMode: NexusGenEnums['KeystoneAdminUIFieldMetaItemViewFieldMode'] | null; // KeystoneAdminUIFieldMetaItemViewFieldMode
+ fieldPosition: NexusGenEnums['KeystoneAdminUIFieldMetaItemViewFieldPosition'] | null; // KeystoneAdminUIFieldMetaItemViewFieldPosition
}
KeystoneAdminUIFieldMetaListView: { // field return type
- fieldMode: NexusGenEnums['KeystoneAdminUIFieldMetaListViewFieldMode'] // KeystoneAdminUIFieldMetaListViewFieldMode!
+ fieldMode: NexusGenEnums['KeystoneAdminUIFieldMetaListViewFieldMode']; // KeystoneAdminUIFieldMetaListViewFieldMode!
+ }
+ KeystoneAdminUIGraphQL: { // field return type
+ names: NexusGenRootTypes['KeystoneAdminUIGraphQLNames']; // KeystoneAdminUIGraphQLNames!
+ }
+ KeystoneAdminUIGraphQLNames: { // field return type
+ createInputName: string; // String!
+ createManyMutationName: string; // String!
+ createMutationName: string; // String!
+ deleteManyMutationName: string; // String!
+ deleteMutationName: string; // String!
+ itemQueryName: string; // String!
+ listOrderName: string; // String!
+ listQueryCountName: string; // String!
+ listQueryName: string; // String!
+ outputTypeName: string; // String!
+ relateToManyForCreateInputName: string; // String!
+ relateToManyForUpdateInputName: string; // String!
+ relateToOneForCreateInputName: string; // String!
+ relateToOneForUpdateInputName: string; // String!
+ updateInputName: string; // String!
+ updateManyInputName: string; // String!
+ updateManyMutationName: string; // String!
+ updateMutationName: string; // String!
+ whereInputName: string; // String!
+ whereUniqueInputName: string; // String!
}
KeystoneAdminUIListMeta: { // field return type
- description: string | null // String
- fields: NexusGenRootTypes['KeystoneAdminUIFieldMeta'][] // [KeystoneAdminUIFieldMeta!]!
- groups: NexusGenRootTypes['KeystoneAdminUIFieldGroupMeta'][] // [KeystoneAdminUIFieldGroupMeta!]!
- hideCreate: boolean // Boolean!
- hideDelete: boolean // Boolean!
- initialColumns: string[] // [String!]!
- initialSort: NexusGenRootTypes['KeystoneAdminUISort'] | null // KeystoneAdminUISort
- isHidden: boolean // Boolean!
- isSingleton: boolean // Boolean!
- itemQueryName: string // String!
- key: string // String!
- label: string // String!
- labelField: string // String!
- listQueryName: string // String!
- pageSize: number // Int!
- path: string // String!
- plural: string // String!
- singular: string // String!
+ description: string | null; // String
+ fields: NexusGenRootTypes['KeystoneAdminUIFieldMeta'][]; // [KeystoneAdminUIFieldMeta!]!
+ graphql: NexusGenRootTypes['KeystoneAdminUIGraphQL']; // KeystoneAdminUIGraphQL!
+ groups: NexusGenRootTypes['KeystoneAdminUIFieldGroupMeta'][]; // [KeystoneAdminUIFieldGroupMeta!]!
+ hideCreate: boolean; // Boolean!
+ hideDelete: boolean; // Boolean!
+ hideNavigation: boolean; // Boolean!
+ initialColumns: string[]; // [String!]!
+ initialSort: NexusGenRootTypes['KeystoneAdminUISort'] | null; // KeystoneAdminUISort
+ isSingleton: boolean; // Boolean!
+ key: string; // String!
+ label: string; // String!
+ labelField: string; // String!
+ pageSize: number; // Int!
+ path: string; // String!
+ plural: string; // String!
+ singular: string; // String!
}
KeystoneAdminUISort: { // field return type
- direction: NexusGenEnums['KeystoneAdminUISortDirection'] // KeystoneAdminUISortDirection!
- field: string // String!
+ direction: NexusGenEnums['KeystoneAdminUISortDirection']; // KeystoneAdminUISortDirection!
+ field: string; // String!
}
KeystoneMeta: { // field return type
- adminMeta: NexusGenRootTypes['KeystoneAdminMeta'] // KeystoneAdminMeta!
+ adminMeta: NexusGenRootTypes['KeystoneAdminMeta']; // KeystoneAdminMeta!
}
Mutation: { // field return type
- createAuthor: NexusGenRootTypes['Author'] | null // Author
- createAuthors: Array | null // [Author]
- createPost: NexusGenRootTypes['Post'] | null // Post
- createPosts: Array | null // [Post]
- deleteAuthor: NexusGenRootTypes['Author'] | null // Author
- deleteAuthors: Array | null // [Author]
- deletePost: NexusGenRootTypes['Post'] | null // Post
- deletePosts: Array | null // [Post]
- updateAuthor: NexusGenRootTypes['Author'] | null // Author
- updateAuthors: Array | null // [Author]
- updatePost: NexusGenRootTypes['Post'] | null // Post
- updatePosts: Array | null // [Post]
+ createAuthor: NexusGenRootTypes['Author'] | null; // Author
+ createAuthors: Array | null; // [Author]
+ createPost: NexusGenRootTypes['Post'] | null; // Post
+ createPosts: Array | null; // [Post]
+ deleteAuthor: NexusGenRootTypes['Author'] | null; // Author
+ deleteAuthors: Array | null; // [Author]
+ deletePost: NexusGenRootTypes['Post'] | null; // Post
+ deletePosts: Array | null; // [Post]
+ updateAuthor: NexusGenRootTypes['Author'] | null; // Author
+ updateAuthors: Array | null; // [Author]
+ updatePost: NexusGenRootTypes['Post'] | null; // Post
+ updatePosts: Array | null; // [Post]
}
NexusThing: { // field return type
- id: number | null // Int
- title: string | null // String
+ id: number | null; // Int
+ title: string | null; // String
}
Post: { // field return type
- author: NexusGenRootTypes['Author'] | null // Author
- content: string | null // String
- id: string // ID!
- publishDate: NexusGenScalars['DateTime'] | null // DateTime
- status: NexusGenEnums['PostStatusType'] | null // PostStatusType
- title: string | null // String
+ author: NexusGenRootTypes['Author'] | null; // Author
+ content: string | null; // String
+ id: string; // ID!
+ publishDate: NexusGenScalars['DateTime'] | null; // DateTime
+ status: NexusGenEnums['PostStatusType'] | null; // PostStatusType
+ title: string | null; // String
}
Query: { // field return type
- author: NexusGenRootTypes['Author'] | null // Author
- authors: NexusGenRootTypes['Author'][] | null // [Author!]
- authorsCount: number | null // Int
- keystone: NexusGenRootTypes['KeystoneMeta'] // KeystoneMeta!
- nexusPosts: Array // [Post]!
- post: NexusGenRootTypes['Post'] | null // Post
- posts: NexusGenRootTypes['Post'][] | null // [Post!]
- postsCount: number | null // Int
- things: Array // [NexusThing]!
+ author: NexusGenRootTypes['Author'] | null; // Author
+ authors: NexusGenRootTypes['Author'][] | null; // [Author!]
+ authorsCount: number | null; // Int
+ keystone: NexusGenRootTypes['KeystoneMeta']; // KeystoneMeta!
+ nexusPosts: Array; // [Post]!
+ post: NexusGenRootTypes['Post'] | null; // Post
+ posts: NexusGenRootTypes['Post'][] | null; // [Post!]
+ postsCount: number | null; // Int
+ things: Array; // [NexusThing]!
}
}
export interface NexusGenFieldTypeNames {
Author: { // field return type name
- email: 'String'
id: 'ID'
name: 'String'
posts: 'Post'
@@ -401,21 +442,45 @@ export interface NexusGenFieldTypeNames {
KeystoneAdminUIFieldMetaListView: { // field return type name
fieldMode: 'KeystoneAdminUIFieldMetaListViewFieldMode'
}
+ KeystoneAdminUIGraphQL: { // field return type name
+ names: 'KeystoneAdminUIGraphQLNames'
+ }
+ KeystoneAdminUIGraphQLNames: { // field return type name
+ createInputName: 'String'
+ createManyMutationName: 'String'
+ createMutationName: 'String'
+ deleteManyMutationName: 'String'
+ deleteMutationName: 'String'
+ itemQueryName: 'String'
+ listOrderName: 'String'
+ listQueryCountName: 'String'
+ listQueryName: 'String'
+ outputTypeName: 'String'
+ relateToManyForCreateInputName: 'String'
+ relateToManyForUpdateInputName: 'String'
+ relateToOneForCreateInputName: 'String'
+ relateToOneForUpdateInputName: 'String'
+ updateInputName: 'String'
+ updateManyInputName: 'String'
+ updateManyMutationName: 'String'
+ updateMutationName: 'String'
+ whereInputName: 'String'
+ whereUniqueInputName: 'String'
+ }
KeystoneAdminUIListMeta: { // field return type name
description: 'String'
fields: 'KeystoneAdminUIFieldMeta'
+ graphql: 'KeystoneAdminUIGraphQL'
groups: 'KeystoneAdminUIFieldGroupMeta'
hideCreate: 'Boolean'
hideDelete: 'Boolean'
+ hideNavigation: 'Boolean'
initialColumns: 'String'
initialSort: 'KeystoneAdminUISort'
- isHidden: 'Boolean'
isSingleton: 'Boolean'
- itemQueryName: 'String'
key: 'String'
label: 'String'
labelField: 'String'
- listQueryName: 'String'
pageSize: 'Int'
path: 'String'
plural: 'String'
@@ -470,96 +535,96 @@ export interface NexusGenFieldTypeNames {
export interface NexusGenArgTypes {
Author: {
posts: { // args
- cursor?: NexusGenInputs['PostWhereUniqueInput'] | null // PostWhereUniqueInput
- orderBy: NexusGenInputs['PostOrderByInput'][] // [PostOrderByInput!]!
- skip: number // Int!
- take?: number | null // Int
- where: NexusGenInputs['PostWhereInput'] // PostWhereInput!
+ cursor?: NexusGenInputs['PostWhereUniqueInput'] | null; // PostWhereUniqueInput
+ orderBy: NexusGenInputs['PostOrderByInput'][]; // [PostOrderByInput!]!
+ skip: number; // Int!
+ take?: number | null; // Int
+ where: NexusGenInputs['PostWhereInput']; // PostWhereInput!
}
postsCount: { // args
- where: NexusGenInputs['PostWhereInput'] // PostWhereInput!
+ where: NexusGenInputs['PostWhereInput']; // PostWhereInput!
}
}
KeystoneAdminMeta: {
list: { // args
- key: string // String!
+ key: string; // String!
}
}
KeystoneAdminUIFieldMeta: {
itemView: { // args
- id?: string | null // ID
+ id?: string | null; // ID
}
}
Mutation: {
createAuthor: { // args
- data: NexusGenInputs['AuthorCreateInput'] // AuthorCreateInput!
+ data: NexusGenInputs['AuthorCreateInput']; // AuthorCreateInput!
}
createAuthors: { // args
- data: NexusGenInputs['AuthorCreateInput'][] // [AuthorCreateInput!]!
+ data: NexusGenInputs['AuthorCreateInput'][]; // [AuthorCreateInput!]!
}
createPost: { // args
- data: NexusGenInputs['PostCreateInput'] // PostCreateInput!
+ data: NexusGenInputs['PostCreateInput']; // PostCreateInput!
}
createPosts: { // args
- data: NexusGenInputs['PostCreateInput'][] // [PostCreateInput!]!
+ data: NexusGenInputs['PostCreateInput'][]; // [PostCreateInput!]!
}
deleteAuthor: { // args
- where: NexusGenInputs['AuthorWhereUniqueInput'] // AuthorWhereUniqueInput!
+ where: NexusGenInputs['AuthorWhereUniqueInput']; // AuthorWhereUniqueInput!
}
deleteAuthors: { // args
- where: NexusGenInputs['AuthorWhereUniqueInput'][] // [AuthorWhereUniqueInput!]!
+ where: NexusGenInputs['AuthorWhereUniqueInput'][]; // [AuthorWhereUniqueInput!]!
}
deletePost: { // args
- where: NexusGenInputs['PostWhereUniqueInput'] // PostWhereUniqueInput!
+ where: NexusGenInputs['PostWhereUniqueInput']; // PostWhereUniqueInput!
}
deletePosts: { // args
- where: NexusGenInputs['PostWhereUniqueInput'][] // [PostWhereUniqueInput!]!
+ where: NexusGenInputs['PostWhereUniqueInput'][]; // [PostWhereUniqueInput!]!
}
updateAuthor: { // args
- data: NexusGenInputs['AuthorUpdateInput'] // AuthorUpdateInput!
- where: NexusGenInputs['AuthorWhereUniqueInput'] // AuthorWhereUniqueInput!
+ data: NexusGenInputs['AuthorUpdateInput']; // AuthorUpdateInput!
+ where: NexusGenInputs['AuthorWhereUniqueInput']; // AuthorWhereUniqueInput!
}
updateAuthors: { // args
- data: NexusGenInputs['AuthorUpdateArgs'][] // [AuthorUpdateArgs!]!
+ data: NexusGenInputs['AuthorUpdateArgs'][]; // [AuthorUpdateArgs!]!
}
updatePost: { // args
- data: NexusGenInputs['PostUpdateInput'] // PostUpdateInput!
- where: NexusGenInputs['PostWhereUniqueInput'] // PostWhereUniqueInput!
+ data: NexusGenInputs['PostUpdateInput']; // PostUpdateInput!
+ where: NexusGenInputs['PostWhereUniqueInput']; // PostWhereUniqueInput!
}
updatePosts: { // args
- data: NexusGenInputs['PostUpdateArgs'][] // [PostUpdateArgs!]!
+ data: NexusGenInputs['PostUpdateArgs'][]; // [PostUpdateArgs!]!
}
}
Query: {
author: { // args
- where: NexusGenInputs['AuthorWhereUniqueInput'] // AuthorWhereUniqueInput!
+ where: NexusGenInputs['AuthorWhereUniqueInput']; // AuthorWhereUniqueInput!
}
authors: { // args
- cursor?: NexusGenInputs['AuthorWhereUniqueInput'] | null // AuthorWhereUniqueInput
- orderBy: NexusGenInputs['AuthorOrderByInput'][] // [AuthorOrderByInput!]!
- skip: number // Int!
- take?: number | null // Int
- where: NexusGenInputs['AuthorWhereInput'] // AuthorWhereInput!
+ cursor?: NexusGenInputs['AuthorWhereUniqueInput'] | null; // AuthorWhereUniqueInput
+ orderBy: NexusGenInputs['AuthorOrderByInput'][]; // [AuthorOrderByInput!]!
+ skip: number; // Int!
+ take?: number | null; // Int
+ where: NexusGenInputs['AuthorWhereInput']; // AuthorWhereInput!
}
authorsCount: { // args
- where: NexusGenInputs['AuthorWhereInput'] // AuthorWhereInput!
+ where: NexusGenInputs['AuthorWhereInput']; // AuthorWhereInput!
}
nexusPosts: { // args
- id: string // String!
- seconds: number // Int!
+ id: string; // String!
+ seconds: number; // Int!
}
post: { // args
- where: NexusGenInputs['PostWhereUniqueInput'] // PostWhereUniqueInput!
+ where: NexusGenInputs['PostWhereUniqueInput']; // PostWhereUniqueInput!
}
posts: { // args
- cursor?: NexusGenInputs['PostWhereUniqueInput'] | null // PostWhereUniqueInput
- orderBy: NexusGenInputs['PostOrderByInput'][] // [PostOrderByInput!]!
- skip: number // Int!
- take?: number | null // Int
- where: NexusGenInputs['PostWhereInput'] // PostWhereInput!
+ cursor?: NexusGenInputs['PostWhereUniqueInput'] | null; // PostWhereUniqueInput
+ orderBy: NexusGenInputs['PostOrderByInput'][]; // [PostOrderByInput!]!
+ skip: number; // Int!
+ take?: number | null; // Int
+ where: NexusGenInputs['PostWhereInput']; // PostWhereInput!
}
postsCount: { // args
- where: NexusGenInputs['PostWhereInput'] // PostWhereInput!
+ where: NexusGenInputs['PostWhereInput']; // PostWhereInput!
}
}
}
@@ -570,21 +635,21 @@ export interface NexusGenAbstractTypeMembers {
export interface NexusGenTypeInterfaces {
}
-export type NexusGenObjectNames = keyof NexusGenObjects
+export type NexusGenObjectNames = keyof NexusGenObjects;
-export type NexusGenInputNames = keyof NexusGenInputs
+export type NexusGenInputNames = keyof NexusGenInputs;
-export type NexusGenEnumNames = keyof NexusGenEnums
+export type NexusGenEnumNames = keyof NexusGenEnums;
-export type NexusGenInterfaceNames = never
+export type NexusGenInterfaceNames = never;
-export type NexusGenScalarNames = keyof NexusGenScalars
+export type NexusGenScalarNames = keyof NexusGenScalars;
-export type NexusGenUnionNames = never
+export type NexusGenUnionNames = never;
-export type NexusGenObjectsUsingAbstractStrategyIsTypeOf = never
+export type NexusGenObjectsUsingAbstractStrategyIsTypeOf = never;
-export type NexusGenAbstractsUsingStrategyResolveType = never
+export type NexusGenAbstractsUsingStrategyResolveType = never;
export type NexusGenFeaturesConfig = {
abstractTypeStrategies: {
@@ -595,29 +660,29 @@ export type NexusGenFeaturesConfig = {
}
export interface NexusGenTypes {
- context: Context
- inputTypes: NexusGenInputs
- rootTypes: NexusGenRootTypes
- inputTypeShapes: NexusGenInputs & NexusGenEnums & NexusGenScalars
- argTypes: NexusGenArgTypes
- fieldTypes: NexusGenFieldTypes
- fieldTypeNames: NexusGenFieldTypeNames
- allTypes: NexusGenAllTypes
- typeInterfaces: NexusGenTypeInterfaces
- objectNames: NexusGenObjectNames
- inputNames: NexusGenInputNames
- enumNames: NexusGenEnumNames
- interfaceNames: NexusGenInterfaceNames
- scalarNames: NexusGenScalarNames
- unionNames: NexusGenUnionNames
- allInputTypes: NexusGenTypes['inputNames'] | NexusGenTypes['enumNames'] | NexusGenTypes['scalarNames']
- allOutputTypes: NexusGenTypes['objectNames'] | NexusGenTypes['enumNames'] | NexusGenTypes['unionNames'] | NexusGenTypes['interfaceNames'] | NexusGenTypes['scalarNames']
+ context: Context;
+ inputTypes: NexusGenInputs;
+ rootTypes: NexusGenRootTypes;
+ inputTypeShapes: NexusGenInputs & NexusGenEnums & NexusGenScalars;
+ argTypes: NexusGenArgTypes;
+ fieldTypes: NexusGenFieldTypes;
+ fieldTypeNames: NexusGenFieldTypeNames;
+ allTypes: NexusGenAllTypes;
+ typeInterfaces: NexusGenTypeInterfaces;
+ objectNames: NexusGenObjectNames;
+ inputNames: NexusGenInputNames;
+ enumNames: NexusGenEnumNames;
+ interfaceNames: NexusGenInterfaceNames;
+ scalarNames: NexusGenScalarNames;
+ unionNames: NexusGenUnionNames;
+ allInputTypes: NexusGenTypes['inputNames'] | NexusGenTypes['enumNames'] | NexusGenTypes['scalarNames'];
+ allOutputTypes: NexusGenTypes['objectNames'] | NexusGenTypes['enumNames'] | NexusGenTypes['unionNames'] | NexusGenTypes['interfaceNames'] | NexusGenTypes['scalarNames'];
allNamedTypes: NexusGenTypes['allInputTypes'] | NexusGenTypes['allOutputTypes']
- abstractTypes: NexusGenTypes['interfaceNames'] | NexusGenTypes['unionNames']
- abstractTypeMembers: NexusGenAbstractTypeMembers
- objectsUsingAbstractStrategyIsTypeOf: NexusGenObjectsUsingAbstractStrategyIsTypeOf
- abstractsUsingStrategyResolveType: NexusGenAbstractsUsingStrategyResolveType
- features: NexusGenFeaturesConfig
+ abstractTypes: NexusGenTypes['interfaceNames'] | NexusGenTypes['unionNames'];
+ abstractTypeMembers: NexusGenAbstractTypeMembers;
+ objectsUsingAbstractStrategyIsTypeOf: NexusGenObjectsUsingAbstractStrategyIsTypeOf;
+ abstractsUsingStrategyResolveType: NexusGenAbstractsUsingStrategyResolveType;
+ features: NexusGenFeaturesConfig;
}
@@ -634,4 +699,4 @@ declare global {
}
interface NexusGenPluginArgConfig {
}
-}
+}
\ No newline at end of file
diff --git a/examples/extend-graphql-schema-nexus/schema.graphql b/examples/extend-graphql-schema-nexus/schema.graphql
index fbd1b21dab6..6f55540d142 100644
--- a/examples/extend-graphql-schema-nexus/schema.graphql
+++ b/examples/extend-graphql-schema-nexus/schema.graphql
@@ -237,24 +237,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/extend-graphql-subscriptions/admin/components/CustomNavigation.tsx b/examples/extend-graphql-subscriptions/admin/components/CustomNavigation.tsx
index 937432d09d1..04674e1ccf4 100644
--- a/examples/extend-graphql-subscriptions/admin/components/CustomNavigation.tsx
+++ b/examples/extend-graphql-subscriptions/admin/components/CustomNavigation.tsx
@@ -1,15 +1,33 @@
import React from 'react'
-import { ListNavItems, NavigationContainer, NavItem } from '@keystone-6/core/admin-ui/components'
-
+import { Divider } from '@keystar/ui/layout'
+import {
+ getHrefFromList,
+ DeveloperResourcesMenu,
+ NavContainer,
+ NavFooter,
+ NavList,
+ NavItem,
+} from '@keystone-6/core/admin-ui/components'
import type { NavigationProps } from '@keystone-6/core/admin-ui/components'
-export function CustomNavigation ({ lists, authenticatedItem }: NavigationProps) {
+export function CustomNavigation ({ lists }: NavigationProps) {
return (
-
- Dashboard
- Subscriptions Page
-
+
+
+ Dashboard
+ Subscriptions Page
+
+ {list.label}
+
+ ))}
+
+
+
+
+
)
}
diff --git a/examples/extend-graphql-subscriptions/package.json b/examples/extend-graphql-subscriptions/package.json
index 12f4a930d3e..6b66f65c1f8 100644
--- a/examples/extend-graphql-subscriptions/package.json
+++ b/examples/extend-graphql-subscriptions/package.json
@@ -13,6 +13,7 @@
"@apollo/client": "^3.7.0",
"@emotion/css": "^11.7.1",
"@graphql-tools/schema": "^9.0.0",
+ "@keystar/ui": "^0.7.13",
"@keystone-6/core": "^6.3.1",
"@keystone-ui/button": "^7.0.2",
"@keystone-ui/core": "^5.0.2",
diff --git a/examples/extend-graphql-subscriptions/schema.graphql b/examples/extend-graphql-subscriptions/schema.graphql
index f211869315b..fd6c2b570b4 100644
--- a/examples/extend-graphql-subscriptions/schema.graphql
+++ b/examples/extend-graphql-subscriptions/schema.graphql
@@ -244,24 +244,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/extend-prisma-schema/schema.graphql b/examples/extend-prisma-schema/schema.graphql
index 87484264c7a..c50cb03f384 100644
--- a/examples/extend-prisma-schema/schema.graphql
+++ b/examples/extend-prisma-schema/schema.graphql
@@ -264,24 +264,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/field-groups/schema.graphql b/examples/field-groups/schema.graphql
index 6bfbac8b383..25fdd678314 100644
--- a/examples/field-groups/schema.graphql
+++ b/examples/field-groups/schema.graphql
@@ -137,24 +137,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/framework-astro/package.json b/examples/framework-astro/package.json
index 28a008f390d..913d4d0dce1 100644
--- a/examples/framework-astro/package.json
+++ b/examples/framework-astro/package.json
@@ -6,7 +6,9 @@
"scripts": {
"astro": "astro",
"build": "astro build",
+ "build:keystone": "keystone build",
"dev": "astro dev",
+ "dev:keystone": "keystone dev",
"postinstall": "keystone postinstall",
"preview": "astro preview",
"start": "astro dev"
diff --git a/examples/framework-astro/schema.graphql b/examples/framework-astro/schema.graphql
index ae21a418fb6..6baecb7210b 100644
--- a/examples/framework-astro/schema.graphql
+++ b/examples/framework-astro/schema.graphql
@@ -118,24 +118,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/framework-nextjs-app-directory/schema.graphql b/examples/framework-nextjs-app-directory/schema.graphql
index e0a6a85eea9..40b31970f24 100644
--- a/examples/framework-nextjs-app-directory/schema.graphql
+++ b/examples/framework-nextjs-app-directory/schema.graphql
@@ -138,24 +138,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/framework-nextjs-pages-directory/schema.graphql b/examples/framework-nextjs-pages-directory/schema.graphql
index 84691091ccc..e99121b0e4e 100644
--- a/examples/framework-nextjs-pages-directory/schema.graphql
+++ b/examples/framework-nextjs-pages-directory/schema.graphql
@@ -136,24 +136,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/framework-nextjs-two-servers/keystone-server/schema.graphql b/examples/framework-nextjs-two-servers/keystone-server/schema.graphql
index 6a099d9995d..0bf8b8c0197 100644
--- a/examples/framework-nextjs-two-servers/keystone-server/schema.graphql
+++ b/examples/framework-nextjs-two-servers/keystone-server/schema.graphql
@@ -232,24 +232,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/framework-remix/schema.graphql b/examples/framework-remix/schema.graphql
index f8b64d9787b..9a5afaa354a 100644
--- a/examples/framework-remix/schema.graphql
+++ b/examples/framework-remix/schema.graphql
@@ -118,24 +118,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/graphql-ts-gql/schema.graphql b/examples/graphql-ts-gql/schema.graphql
index b505dbc88ea..fdd8c0b7919 100644
--- a/examples/graphql-ts-gql/schema.graphql
+++ b/examples/graphql-ts-gql/schema.graphql
@@ -252,24 +252,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/hooks/schema.graphql b/examples/hooks/schema.graphql
index 2ba8fcbfb52..81af4b17729 100644
--- a/examples/hooks/schema.graphql
+++ b/examples/hooks/schema.graphql
@@ -157,24 +157,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/limits/schema.graphql b/examples/limits/schema.graphql
index 969e54d8046..f1984e58e5f 100644
--- a/examples/limits/schema.graphql
+++ b/examples/limits/schema.graphql
@@ -113,24 +113,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/number-fields/keystone.ts b/examples/number-fields/keystone.ts
new file mode 100644
index 00000000000..a59cdcd5436
--- /dev/null
+++ b/examples/number-fields/keystone.ts
@@ -0,0 +1,13 @@
+import { config } from '@keystone-6/core'
+import { lists } from './schema'
+
+export default config({
+ db: {
+ provider: 'sqlite',
+ url: process.env.DATABASE_URL || 'file:./keystone-example.db',
+
+ // WARNING: this is only needed for our monorepo examples, dont do this
+ prismaClientPath: 'node_modules/myprisma',
+ },
+ lists,
+})
diff --git a/examples/number-fields/package.json b/examples/number-fields/package.json
new file mode 100644
index 00000000000..1fd48119a27
--- /dev/null
+++ b/examples/number-fields/package.json
@@ -0,0 +1,20 @@
+{
+ "name": "@keystone-6/example-number-fields",
+ "version": null,
+ "private": true,
+ "license": "MIT",
+ "scripts": {
+ "dev": "keystone dev",
+ "start": "keystone start",
+ "build": "keystone build",
+ "postinstall": "keystone postinstall"
+ },
+ "dependencies": {
+ "@keystone-6/core": "^6.3.1",
+ "@prisma/client": "5.19.0"
+ },
+ "devDependencies": {
+ "prisma": "5.19.0",
+ "typescript": "^5.5.0"
+ }
+}
diff --git a/examples/number-fields/sandbox.config.json b/examples/number-fields/sandbox.config.json
new file mode 100644
index 00000000000..c5d3215212f
--- /dev/null
+++ b/examples/number-fields/sandbox.config.json
@@ -0,0 +1,7 @@
+{
+ "template": "node",
+ "container": {
+ "startScript": "keystone dev",
+ "node": "20"
+ }
+}
diff --git a/examples/number-fields/schema.graphql b/examples/number-fields/schema.graphql
new file mode 100644
index 00000000000..2c6b253821e
--- /dev/null
+++ b/examples/number-fields/schema.graphql
@@ -0,0 +1,269 @@
+# This file is automatically generated by Keystone, do not modify it manually.
+# Modify your Keystone config when you want to change this.
+
+type Example {
+ id: ID!
+ bigInt: BigInt
+ bigIntDefaulted: BigInt
+ float: Float
+ floatDefaulted: Float
+ integer: Int
+ integerDefaulted: Int
+ maximum: Int
+}
+
+scalar BigInt
+
+input ExampleWhereUniqueInput {
+ id: ID
+}
+
+input ExampleWhereInput {
+ AND: [ExampleWhereInput!]
+ OR: [ExampleWhereInput!]
+ NOT: [ExampleWhereInput!]
+ id: IDFilter
+ bigInt: BigIntNullableFilter
+ bigIntDefaulted: BigIntNullableFilter
+ float: FloatNullableFilter
+ floatDefaulted: FloatNullableFilter
+ integer: IntNullableFilter
+ integerDefaulted: IntNullableFilter
+}
+
+input IDFilter {
+ equals: ID
+ in: [ID!]
+ notIn: [ID!]
+ lt: ID
+ lte: ID
+ gt: ID
+ gte: ID
+ not: IDFilter
+}
+
+input BigIntNullableFilter {
+ equals: BigInt
+ in: [BigInt!]
+ notIn: [BigInt!]
+ lt: BigInt
+ lte: BigInt
+ gt: BigInt
+ gte: BigInt
+ not: BigIntNullableFilter
+}
+
+input FloatNullableFilter {
+ equals: Float
+ in: [Float!]
+ notIn: [Float!]
+ lt: Float
+ lte: Float
+ gt: Float
+ gte: Float
+ not: FloatNullableFilter
+}
+
+input IntNullableFilter {
+ equals: Int
+ in: [Int!]
+ notIn: [Int!]
+ lt: Int
+ lte: Int
+ gt: Int
+ gte: Int
+ not: IntNullableFilter
+}
+
+input ExampleOrderByInput {
+ id: OrderDirection
+ bigInt: OrderDirection
+ bigIntDefaulted: OrderDirection
+ float: OrderDirection
+ floatDefaulted: OrderDirection
+ integer: OrderDirection
+ integerDefaulted: OrderDirection
+}
+
+enum OrderDirection {
+ asc
+ desc
+}
+
+input ExampleUpdateInput {
+ bigInt: BigInt
+ bigIntDefaulted: BigInt
+ float: Float
+ floatDefaulted: Float
+ integer: Int
+ integerDefaulted: Int
+}
+
+input ExampleUpdateArgs {
+ where: ExampleWhereUniqueInput!
+ data: ExampleUpdateInput!
+}
+
+input ExampleCreateInput {
+ bigInt: BigInt
+ bigIntDefaulted: BigInt
+ float: Float
+ floatDefaulted: Float
+ integer: Int
+ integerDefaulted: Int
+}
+
+"""
+The `JSON` scalar type represents JSON values as specified by [ECMA-404](http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf).
+"""
+scalar JSON @specifiedBy(url: "http://www.ecma-international.org/publications/files/ECMA-ST/ECMA-404.pdf")
+
+type Mutation {
+ createExample(data: ExampleCreateInput!): Example
+ createExamples(data: [ExampleCreateInput!]!): [Example]
+ updateExample(where: ExampleWhereUniqueInput!, data: ExampleUpdateInput!): Example
+ updateExamples(data: [ExampleUpdateArgs!]!): [Example]
+ deleteExample(where: ExampleWhereUniqueInput!): Example
+ deleteExamples(where: [ExampleWhereUniqueInput!]!): [Example]
+}
+
+type Query {
+ example(where: ExampleWhereUniqueInput!): Example
+ examples(where: ExampleWhereInput! = {}, orderBy: [ExampleOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: ExampleWhereUniqueInput): [Example!]
+ examplesCount(where: ExampleWhereInput! = {}): Int
+ keystone: KeystoneMeta!
+}
+
+type KeystoneMeta {
+ adminMeta: KeystoneAdminMeta!
+}
+
+type KeystoneAdminMeta {
+ lists: [KeystoneAdminUIListMeta!]!
+ list(key: String!): KeystoneAdminUIListMeta
+}
+
+type KeystoneAdminUIListMeta {
+ key: String!
+ path: String!
+ description: String
+ label: String!
+ labelField: String!
+ singular: String!
+ plural: String!
+ fields: [KeystoneAdminUIFieldMeta!]!
+ groups: [KeystoneAdminUIFieldGroupMeta!]!
+ graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
+ initialColumns: [String!]!
+ initialSearchFields: [String!]!
+ initialSort: KeystoneAdminUISort
+ isSingleton: Boolean!
+ hideNavigation: Boolean!
+ hideCreate: Boolean!
+ hideDelete: Boolean!
+}
+
+type KeystoneAdminUIFieldMeta {
+ path: String!
+ label: String!
+ description: String
+ isOrderable: Boolean!
+ isFilterable: Boolean!
+ isNonNull: [KeystoneAdminUIFieldMetaIsNonNull!]
+ fieldMeta: JSON
+ viewsIndex: Int!
+ customViewsIndex: Int
+ createView: KeystoneAdminUIFieldMetaCreateView!
+ listView: KeystoneAdminUIFieldMetaListView!
+ itemView(id: ID): KeystoneAdminUIFieldMetaItemView
+ search: QueryMode
+}
+
+enum KeystoneAdminUIFieldMetaIsNonNull {
+ read
+ create
+ update
+}
+
+type KeystoneAdminUIFieldMetaCreateView {
+ fieldMode: KeystoneAdminUIFieldMetaCreateViewFieldMode!
+}
+
+enum KeystoneAdminUIFieldMetaCreateViewFieldMode {
+ edit
+ hidden
+}
+
+type KeystoneAdminUIFieldMetaListView {
+ fieldMode: KeystoneAdminUIFieldMetaListViewFieldMode!
+}
+
+enum KeystoneAdminUIFieldMetaListViewFieldMode {
+ read
+ hidden
+}
+
+type KeystoneAdminUIFieldMetaItemView {
+ fieldMode: KeystoneAdminUIFieldMetaItemViewFieldMode
+ fieldPosition: KeystoneAdminUIFieldMetaItemViewFieldPosition
+}
+
+enum KeystoneAdminUIFieldMetaItemViewFieldMode {
+ edit
+ read
+ hidden
+}
+
+enum KeystoneAdminUIFieldMetaItemViewFieldPosition {
+ form
+ sidebar
+}
+
+enum QueryMode {
+ default
+ insensitive
+}
+
+type KeystoneAdminUIFieldGroupMeta {
+ label: String!
+ description: String
+ fields: [KeystoneAdminUIFieldMeta!]!
+}
+
+type KeystoneAdminUIGraphQL {
+ names: KeystoneAdminUIGraphQLNames!
+}
+
+type KeystoneAdminUIGraphQLNames {
+ outputTypeName: String!
+ whereInputName: String!
+ whereUniqueInputName: String!
+ createInputName: String!
+ createMutationName: String!
+ createManyMutationName: String!
+ relateToOneForCreateInputName: String!
+ relateToManyForCreateInputName: String!
+ itemQueryName: String!
+ listOrderName: String!
+ listQueryCountName: String!
+ listQueryName: String!
+ updateInputName: String!
+ updateMutationName: String!
+ updateManyInputName: String!
+ updateManyMutationName: String!
+ relateToOneForUpdateInputName: String!
+ relateToManyForUpdateInputName: String!
+ deleteMutationName: String!
+ deleteManyMutationName: String!
+}
+
+type KeystoneAdminUISort {
+ field: String!
+ direction: KeystoneAdminUISortDirection!
+}
+
+enum KeystoneAdminUISortDirection {
+ ASC
+ DESC
+}
diff --git a/examples/number-fields/schema.prisma b/examples/number-fields/schema.prisma
new file mode 100644
index 00000000000..2c0d305045e
--- /dev/null
+++ b/examples/number-fields/schema.prisma
@@ -0,0 +1,23 @@
+// This file is automatically generated by Keystone, do not modify it manually.
+// Modify your Keystone config when you want to change this.
+
+datasource sqlite {
+ url = env("DATABASE_URL")
+ shadowDatabaseUrl = env("SHADOW_DATABASE_URL")
+ provider = "sqlite"
+}
+
+generator client {
+ provider = "prisma-client-js"
+ output = "node_modules/myprisma"
+}
+
+model Example {
+ id String @id @default(cuid())
+ bigInt BigInt?
+ bigIntDefaulted BigInt? @default(123)
+ float Float?
+ floatDefaulted Float? @default(456.321)
+ integer Int?
+ integerDefaulted Int? @default(789)
+}
diff --git a/examples/number-fields/schema.ts b/examples/number-fields/schema.ts
new file mode 100644
index 00000000000..207845562b4
--- /dev/null
+++ b/examples/number-fields/schema.ts
@@ -0,0 +1,36 @@
+import { list, graphql } from '@keystone-6/core'
+import {
+ bigInt,
+ float,
+ integer,
+ virtual
+} from '@keystone-6/core/fields'
+import { allowAll } from '@keystone-6/core/access'
+import type { Lists } from '.keystone/types'
+
+export const lists = {
+ Example: list({
+ access: allowAll,
+ fields: {
+ bigInt: bigInt(),
+ bigIntDefaulted: bigInt({ defaultValue: 123n }),
+ float: float(),
+ floatDefaulted: float({ defaultValue: 456.321 }),
+ integer: integer(),
+ integerDefaulted: integer({ defaultValue: 789 }),
+ maximum: virtual({
+ field: graphql.field({
+ type: graphql.Int,
+ resolve (x) {
+ return Math.max(
+ x.float ?? 0,
+ x.floatDefaulted ?? 0,
+ x.integer ?? 0,
+ x.integerDefaulted ?? 0,
+ )
+ },
+ }),
+ }),
+ },
+ }),
+} satisfies Lists
diff --git a/examples/omit/schema.graphql b/examples/omit/schema.graphql
index c75debec719..7518e05ce1d 100644
--- a/examples/omit/schema.graphql
+++ b/examples/omit/schema.graphql
@@ -182,24 +182,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/reuse/schema.graphql b/examples/reuse/schema.graphql
index 859bd729feb..df1426c1bfc 100644
--- a/examples/reuse/schema.graphql
+++ b/examples/reuse/schema.graphql
@@ -253,24 +253,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/script/schema.graphql b/examples/script/schema.graphql
index 94680c2e767..f46114e6247 100644
--- a/examples/script/schema.graphql
+++ b/examples/script/schema.graphql
@@ -131,24 +131,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/singleton/schema.graphql b/examples/singleton/schema.graphql
index 542217e25ad..7f6f4a3201d 100644
--- a/examples/singleton/schema.graphql
+++ b/examples/singleton/schema.graphql
@@ -208,24 +208,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/testing/schema.graphql b/examples/testing/schema.graphql
index a3de9384ab2..e286d79d267 100644
--- a/examples/testing/schema.graphql
+++ b/examples/testing/schema.graphql
@@ -254,11 +254,9 @@ type Query {
users(where: UserWhereInput! = {}, orderBy: [UserOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: UserWhereUniqueInput): [User!]
usersCount(where: UserWhereInput! = {}): Int
keystone: KeystoneMeta!
- authenticatedItem: AuthenticatedItem
+ authenticatedItem: User
}
-union AuthenticatedItem = User
-
type KeystoneMeta {
adminMeta: KeystoneAdminMeta!
}
@@ -271,24 +269,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/transactions/schema.graphql b/examples/transactions/schema.graphql
index 6104243e771..c9dad067073 100644
--- a/examples/transactions/schema.graphql
+++ b/examples/transactions/schema.graphql
@@ -295,24 +295,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/usecase-blog-moderated/schema.graphql b/examples/usecase-blog-moderated/schema.graphql
index b0d2a3483f2..8cfd0764c6d 100644
--- a/examples/usecase-blog-moderated/schema.graphql
+++ b/examples/usecase-blog-moderated/schema.graphql
@@ -324,7 +324,6 @@ type Mutation {
updateUsers(data: [UserUpdateArgs!]!): [User]
deleteUser(where: UserWhereUniqueInput!): User
deleteUsers(where: [UserWhereUniqueInput!]!): [User]
- endSession: Boolean!
}
type Query {
@@ -355,24 +354,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/usecase-blog/schema.graphql b/examples/usecase-blog/schema.graphql
index b72e595735b..5e24c2e998d 100644
--- a/examples/usecase-blog/schema.graphql
+++ b/examples/usecase-blog/schema.graphql
@@ -298,24 +298,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/usecase-blog/schema.ts b/examples/usecase-blog/schema.ts
index 0f278ce9127..05e7fcc9dc8 100644
--- a/examples/usecase-blog/schema.ts
+++ b/examples/usecase-blog/schema.ts
@@ -72,16 +72,6 @@ export const lists = {
author: relationship({
// we could have used 'Author', but then the relationship would only be 1-way
ref: 'Author.posts',
-
- // we customise how this will look in the AdminUI, for fun
- ui: {
- displayMode: 'cards',
- cardFields: ['name', 'email'],
- inlineEdit: { fields: ['name', 'email'] },
- linkToItem: true,
- inlineConnect: true,
- },
-
many: false, // only 1 author for each Post (the default)
}),
@@ -90,27 +80,28 @@ export const lists = {
ref: 'Tag.posts',
many: true, // a Post can have many Tags, not just one
- // we customise how this will look in the AdminUI, for fun
- ui: {
- displayMode: 'cards',
- cardFields: ['name'],
- inlineEdit: { fields: ['name'] },
- linkToItem: true,
- inlineConnect: true,
- inlineCreate: { fields: ['name'] },
- },
+ // TODO: restore after breaking change
+// ui: {
+// inlineCreate: {
+// fields: ['name']
+// }
+// }
}),
},
}),
// this last list is our Tag list, it only has a name field for now
Tag: list({
- // WARNING - for this example, anyone can create, query, update and delete anything
+ // WARNING
+ // for this starter project, anyone can create, query, update and delete anything
+ //
+ // if you want to prevent random people on the internet from accessing your data,
+ // you can find out more at https://keystonejs.com/docs/guides/auth-and-access-control
access: allowAll,
- // we want to hide this list in the AdminUI
+ // dont show this list in the AdminUI
ui: {
- isHidden: true,
+ hideNavigation: true,
},
fields: {
diff --git a/examples/usecase-relationship-union/schema.graphql b/examples/usecase-relationship-union/schema.graphql
index eb7b2294970..5ccebecc754 100644
--- a/examples/usecase-relationship-union/schema.graphql
+++ b/examples/usecase-relationship-union/schema.graphql
@@ -242,24 +242,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/usecase-roles/schema.graphql b/examples/usecase-roles/schema.graphql
index 921166991cd..c8c61463665 100644
--- a/examples/usecase-roles/schema.graphql
+++ b/examples/usecase-roles/schema.graphql
@@ -337,11 +337,9 @@ type Query {
roles(where: RoleWhereInput! = {}, orderBy: [RoleOrderByInput!]! = [], take: Int, skip: Int! = 0, cursor: RoleWhereUniqueInput): [Role!]
rolesCount(where: RoleWhereInput! = {}): Int
keystone: KeystoneMeta!
- authenticatedItem: AuthenticatedItem
+ authenticatedItem: User
}
-union AuthenticatedItem = User
-
type KeystoneMeta {
adminMeta: KeystoneAdminMeta!
}
@@ -354,24 +352,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/usecase-todo/schema.graphql b/examples/usecase-todo/schema.graphql
index 000874fde47..8655bd0c572 100644
--- a/examples/usecase-todo/schema.graphql
+++ b/examples/usecase-todo/schema.graphql
@@ -242,24 +242,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/usecase-versioning/schema.graphql b/examples/usecase-versioning/schema.graphql
index 262ec5cad3c..7e750c6cf02 100644
--- a/examples/usecase-versioning/schema.graphql
+++ b/examples/usecase-versioning/schema.graphql
@@ -134,24 +134,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/examples/virtual-field/schema.graphql b/examples/virtual-field/schema.graphql
index 3a628eda09a..74f2a0777f4 100644
--- a/examples/virtual-field/schema.graphql
+++ b/examples/virtual-field/schema.graphql
@@ -143,24 +143,22 @@ type KeystoneAdminMeta {
type KeystoneAdminUIListMeta {
key: String!
path: String!
+ description: String
label: String!
+ labelField: String!
singular: String!
plural: String!
- description: String
- pageSize: Int!
- labelField: String!
fields: [KeystoneAdminUIFieldMeta!]!
groups: [KeystoneAdminUIFieldGroupMeta!]!
graphql: KeystoneAdminUIGraphQL!
+ pageSize: Int!
initialColumns: [String!]!
initialSearchFields: [String!]!
initialSort: KeystoneAdminUISort
isSingleton: Boolean!
+ hideNavigation: Boolean!
hideCreate: Boolean!
hideDelete: Boolean!
- isHidden: Boolean!
- itemQueryName: String!
- listQueryName: String!
}
type KeystoneAdminUIFieldMeta {
diff --git a/package.json b/package.json
index 10744fa1f15..e53c7f2ebf0 100644
--- a/package.json
+++ b/package.json
@@ -53,7 +53,8 @@
],
"exports": true,
"___experimentalFlags_WILL_CHANGE_IN_PATCH": {
- "keepDynamicImportAsDynamicImportInCommonJS": true
+ "keepDynamicImportAsDynamicImportInCommonJS": true,
+ "importsConditions": true
}
},
"jest": {
diff --git a/packages/auth/components/Navigation/package.json b/packages/auth/components/Navigation/package.json
new file mode 100644
index 00000000000..7d28b00c53f
--- /dev/null
+++ b/packages/auth/components/Navigation/package.json
@@ -0,0 +1,4 @@
+{
+ "main": "dist/keystone-6-auth-components-Navigation.cjs.js",
+ "module": "dist/keystone-6-auth-components-Navigation.esm.js"
+}
diff --git a/packages/auth/package.json b/packages/auth/package.json
index 0acfdca1972..3943206bae6 100644
--- a/packages/auth/package.json
+++ b/packages/auth/package.json
@@ -6,21 +6,30 @@
"module": "dist/keystone-6-auth.esm.js",
"exports": {
".": {
+ "types": "./dist/keystone-6-auth.cjs.js",
"module": "./dist/keystone-6-auth.esm.js",
"default": "./dist/keystone-6-auth.cjs.js"
},
"./pages/InitPage": {
+ "types": "./pages/InitPage/dist/keystone-6-auth-pages-InitPage.cjs.js",
"module": "./pages/InitPage/dist/keystone-6-auth-pages-InitPage.esm.js",
"default": "./pages/InitPage/dist/keystone-6-auth-pages-InitPage.cjs.js"
},
"./pages/SigninPage": {
+ "types": "./pages/SigninPage/dist/keystone-6-auth-pages-SigninPage.cjs.js",
"module": "./pages/SigninPage/dist/keystone-6-auth-pages-SigninPage.esm.js",
"default": "./pages/SigninPage/dist/keystone-6-auth-pages-SigninPage.cjs.js"
},
+ "./components/Navigation": {
+ "types": "./components/Navigation/dist/keystone-6-auth-components-Navigation.cjs.js",
+ "module": "./components/Navigation/dist/keystone-6-auth-components-Navigation.esm.js",
+ "default": "./components/Navigation/dist/keystone-6-auth-components-Navigation.cjs.js"
+ },
"./package.json": "./package.json"
},
"dependencies": {
"@babel/runtime": "^7.24.7",
+ "@keystar/ui": "^0.7.13",
"@keystone-ui/button": "workspace:^",
"@keystone-ui/core": "workspace:^",
"@keystone-ui/fields": "workspace:^",
@@ -41,6 +50,7 @@
"preconstruct": {
"entrypoints": [
"index.ts",
+ "components/Navigation.tsx",
"pages/*.tsx"
]
},
diff --git a/packages/auth/src/components/Navigation.tsx b/packages/auth/src/components/Navigation.tsx
new file mode 100644
index 00000000000..9bad086db1e
--- /dev/null
+++ b/packages/auth/src/components/Navigation.tsx
@@ -0,0 +1,105 @@
+import React, { useEffect } from 'react'
+
+import { ActionButton } from '@keystar/ui/button'
+import { Divider } from '@keystar/ui/layout'
+import { TooltipTrigger, Tooltip } from '@keystar/ui/tooltip'
+import { Text } from '@keystar/ui/typography'
+
+import {
+ useQuery,
+ useMutation,
+ gql,
+} from '@keystone-6/core/admin-ui/apollo'
+import {
+ DeveloperResourcesMenu,
+ NavList,
+ NavContainer,
+ NavFooter,
+ NavItem,
+ getHrefFromList
+} from '@keystone-6/core/admin-ui/components'
+import type { NavigationProps } from '@keystone-6/core/admin-ui/components'
+
+type AuthenticatedItem = {
+ label: string
+ id: string
+}
+
+export default ({ labelField }: { labelField: string }) => (props: NavigationProps) =>
+
+ Dashboard
+
+ {list.label}
+
+ ))}
+
+
+
+ {data?.authenticatedItem && (
+
+
+ )
+}
+
+function SignoutButton (props: { authItemLabel: string, children?: React.ReactNode }) {
+ const { authItemLabel, children = 'Sign out' } = props
+ const { signout } = useSignout()
+
+ return (
+
+ signout()}>
+ {children}
+
+
+ Signed in as {authItemLabel}
+
+
+ )
+}
+
+const END_SESSION = gql`
+ mutation EndSession {
+ endSession
+ }
+`
+
+function useSignout () {
+ const [signout, result] = useMutation(END_SESSION)
+
+ // TODO: handle errors
+ useEffect(() => {
+ if (result.data?.endSession) {
+ window.location.reload()
+ }
+ }, [result.data])
+
+ return {
+ signout,
+ loading: result.loading,
+ }
+}
diff --git a/packages/auth/src/components/SigninContainer.tsx b/packages/auth/src/components/SigninContainer.tsx
index 759004aaf97..09370147a89 100644
--- a/packages/auth/src/components/SigninContainer.tsx
+++ b/packages/auth/src/components/SigninContainer.tsx
@@ -3,7 +3,12 @@
import { type ReactNode } from 'react'
-import { jsx, Box, Center, useTheme } from '@keystone-ui/core'
+import {
+ jsx,
+ Box,
+ Center,
+ useTheme
+} from '@keystone-ui/core'
import { Head } from '@keystone-6/core/admin-ui/router'
type SigninContainerProps = {
@@ -11,12 +16,12 @@ type SigninContainerProps = {
title?: string
}
-export const SigninContainer = ({ children, title }: SigninContainerProps) => {
+export function SigninContainer ({ children, title }: SigninContainerProps) {
const { colors, shadow } = useTheme()
return (
- {title || 'Keystone'}
+ {title ?? 'Keystone'}
({
name: gqlNames.ItemAuthenticationWithPasswordResult,
types: [ItemAuthenticationWithPasswordSuccess, ItemAuthenticationWithPasswordFailure],
resolveType (val) {
- if ('sessionToken' in val) {
- return gqlNames.ItemAuthenticationWithPasswordSuccess
- }
+ if ('sessionToken' in val) return gqlNames.ItemAuthenticationWithPasswordSuccess
return gqlNames.ItemAuthenticationWithPasswordFailure
},
})
@@ -57,16 +55,10 @@ export function getBaseAuthSchema ({
const extension = {
query: {
authenticatedItem: graphql.field({
- type: graphql.union({
- name: 'AuthenticatedItem',
- types: [base.object(listKey) as graphql.ObjectType],
- resolveType: (root, context: KeystoneContext) => context.session?.listKey,
- }),
+ type: base.object(listKey),
resolve (root, args, context: KeystoneContext) {
const { session } = context
- if (!session) return null
- if (!session.itemId) return null
- if (session.listKey !== listKey) return null
+ if (!session?.itemId) return null
return context.db[listKey].findOne({
where: {
@@ -77,6 +69,13 @@ export function getBaseAuthSchema ({
}),
},
mutation: {
+ endSession: graphql.field({
+ type: graphql.nonNull(graphql.Boolean),
+ async resolve (rootVal, args, context) {
+ await context.sessionStrategy?.end({ context })
+ return true
+ },
+ }),
[gqlNames.authenticateItemWithPassword]: graphql.field({
type: AuthenticationResult,
args: {
@@ -103,7 +102,6 @@ export function getBaseAuthSchema ({
// Update system state
const sessionToken = await context.sessionStrategy.start({
data: {
- listKey,
itemId: result.item.id,
},
context,
diff --git a/packages/auth/src/index.ts b/packages/auth/src/index.ts
index 68448486a4c..dba1c8fe01d 100644
--- a/packages/auth/src/index.ts
+++ b/packages/auth/src/index.ts
@@ -10,11 +10,11 @@ import { password, timestamp } from '@keystone-6/core/fields'
import type { AuthConfig, AuthGqlNames } from './types'
import { getSchemaExtension } from './schema'
-import { signinTemplate } from './templates/signin'
-import { initTemplate } from './templates/init'
+import configTemplate from './templates/config'
+import signinTemplate from './templates/signin'
+import initTemplate from './templates/init'
export type AuthSession = {
- listKey: string // TODO: use ListTypeInfo
itemId: string | number // TODO: use ListTypeInfo
data: unknown // TODO: use ListTypeInfo
}
@@ -99,13 +99,30 @@ export function createAuth ({
*
* The signin page is always included, and the init page is included when initFirstItem is set
*/
- const authGetAdditionalFiles = () => {
+ const authGetAdditionalFiles = (config: KeystoneConfig) => {
+ // TODO: FIXME: this is a duplication of initialise-lists:747
+ const listConfig = config.lists[listKey]
+ const labelField =
+ listConfig.ui?.labelField ??
+ (listConfig.fields.label
+ ? 'label'
+ : listConfig.fields.name
+ ? 'name'
+ : listConfig.fields.title
+ ? 'title'
+ : 'id')
+
const filesToWrite: AdminFileToWrite[] = [
{
mode: 'write',
- src: signinTemplate({ gqlNames, identityField, secretField }),
+ src: signinTemplate({ listKey, gqlNames, identityField, secretField }),
outputPath: 'pages/signin.js',
},
+ {
+ mode: 'write',
+ src: configTemplate({ labelField }),
+ outputPath: 'config.ts',
+ },
]
if (initFirstItem) {
filesToWrite.push({
@@ -169,9 +186,10 @@ export function createAuth ({
get: async ({ context }) => {
const session = await get({ context })
const sudoContext = context.sudo()
- if (!session) return
- if (!session.itemId) return
- if (session.listKey !== listKey) return
+ if (!session?.itemId) return
+
+ // TODO: replace with SessionSecret: HMAC({ listKey, identityField, secretField }, SessionSecretVar)
+ // if (session.listKey !== listKey) return null
try {
const data = await sudoContext.query[listKey].findOne({
@@ -180,11 +198,14 @@ export function createAuth ({
})
if (!data) return
- return { ...session, itemId: session.itemId, listKey, data }
+ return {
+ ...session,
+ itemId: session.itemId,
+ data
+ }
} catch (e) {
console.error(e)
- // TODO: the assumption is this could only be from an invalid sessionData configuration
- // it could be something else though, either way, result is a bad session
+ // WARNING: this is probably an invalid configuration
return
}
},
@@ -262,7 +283,7 @@ export function createAuth ({
ui = {
...ui,
publicPages: [...publicPages, ...authPublicPages],
- getAdditionalFiles: [...getAdditionalFiles, authGetAdditionalFiles],
+ getAdditionalFiles: [...getAdditionalFiles, () => authGetAdditionalFiles(config)],
isAccessAllowed: async (context: KeystoneContext) => {
if (await hasInitFirstItemConditions(context)) return true
diff --git a/packages/auth/src/pages/InitPage.tsx b/packages/auth/src/pages/InitPage.tsx
index 2b8a3317760..a4df122517a 100644
--- a/packages/auth/src/pages/InitPage.tsx
+++ b/packages/auth/src/pages/InitPage.tsx
@@ -3,12 +3,12 @@
import { useMemo, useState } from 'react'
import fetch from 'cross-fetch'
+import isDeepEqual from 'fast-deep-equal'
import { jsx, H1, Stack, Inline } from '@keystone-ui/core'
import { Button } from '@keystone-ui/button'
import { Checkbox, FieldLabel, TextInput } from '@keystone-ui/fields'
import { type FieldMeta } from '@keystone-6/core/types'
-import isDeepEqual from 'fast-deep-equal'
import { gql, useMutation } from '@keystone-6/core/admin-ui/apollo'
import { useReinitContext, useKeystone } from '@keystone-6/core/admin-ui/context'
@@ -26,6 +26,8 @@ import { useRedirect } from '../lib/useFromRedirect'
const signupURL = 'https://endpoints.thinkmill.com.au/newsletter'
+export default (props: Parameters[0]) => () => [0]) => () => [0]) => () => ['initFirstItem']>
-}
-
-export const initTemplate = ({ listKey, initFirstItem }: InitTemplateArgs) => {
- // -- TEMPLATE START
- return `import { getInitPage } from '@keystone-6/auth/pages/InitPage';
-
-const fieldPaths = ${JSON.stringify(initFirstItem.fields)};
+}) {
+ return `import makeSigninPage from '@keystone-6/auth/pages/InitPage'
-export default getInitPage(${JSON.stringify({
- listKey,
- fieldPaths: initFirstItem.fields,
- enableWelcome: !initFirstItem.skipKeystoneWelcome,
- })});
+export default makeSigninPage(${JSON.stringify({
+ listKey,
+ fieldPaths: initFirstItem.fields,
+ enableWelcome: !initFirstItem.skipKeystoneWelcome,
+})})
`
- // -- TEMPLATE END
}
diff --git a/packages/auth/src/templates/signin.ts b/packages/auth/src/templates/signin.ts
index 6e333babc59..e43c47a22d6 100644
--- a/packages/auth/src/templates/signin.ts
+++ b/packages/auth/src/templates/signin.ts
@@ -1,24 +1,25 @@
import { type AuthGqlNames } from '../types'
-export const signinTemplate = ({
+export default ({
+ listKey,
gqlNames,
identityField,
secretField,
}: {
+ listKey: string
gqlNames: AuthGqlNames
identityField: string
secretField: string
}) => {
- // -- TEMPLATE START
- return `import { getSigninPage } from '@keystone-6/auth/pages/SigninPage'
+ return `import makeSigninPage from '@keystone-6/auth/pages/SigninPage'
-export default getSigninPage(${JSON.stringify({
- identityField: identityField,
- secretField: secretField,
- mutationName: gqlNames.authenticateItemWithPassword,
- successTypename: gqlNames.ItemAuthenticationWithPasswordSuccess,
- failureTypename: gqlNames.ItemAuthenticationWithPasswordFailure,
- })});
+export default makeSigninPage(${JSON.stringify({
+ listKey,
+ identityField,
+ secretField,
+ mutationName: gqlNames.authenticateItemWithPassword,
+ successTypename: gqlNames.ItemAuthenticationWithPasswordSuccess,
+ failureTypename: gqlNames.ItemAuthenticationWithPasswordFailure,
+})})
`
- // -- TEMPLATE END
}
diff --git a/packages/cloudinary/package.json b/packages/cloudinary/package.json
index b065b25e434..4ad5d6bce09 100644
--- a/packages/cloudinary/package.json
+++ b/packages/cloudinary/package.json
@@ -6,10 +6,12 @@
"module": "dist/keystone-6-cloudinary.esm.js",
"exports": {
".": {
+ "types": "./dist/keystone-6-cloudinary.cjs.js",
"module": "./dist/keystone-6-cloudinary.esm.js",
"default": "./dist/keystone-6-cloudinary.cjs.js"
},
"./views": {
+ "types": "./views/dist/keystone-6-cloudinary-views.cjs.js",
"module": "./views/dist/keystone-6-cloudinary-views.esm.js",
"default": "./views/dist/keystone-6-cloudinary-views.cjs.js"
},
diff --git a/packages/cloudinary/src/views/index.tsx b/packages/cloudinary/src/views/index.tsx
index 0f2ee54266f..5e236e38015 100644
--- a/packages/cloudinary/src/views/index.tsx
+++ b/packages/cloudinary/src/views/index.tsx
@@ -3,12 +3,10 @@
import { jsx } from '@keystone-ui/core'
import {
- type CardValueComponent,
type CellComponent,
type FieldController,
type FieldControllerConfig,
} from '@keystone-6/core/types'
-import { FieldContainer, FieldLabel } from '@keystone-ui/fields'
import { validateImage } from './Field'
export { Field } from './Field'
@@ -35,16 +33,6 @@ export const Cell: CellComponent = ({ item, field }) => {
)
}
-export const CardValue: CardValueComponent = ({ item, field }) => {
- const data = item[field.path]
- return (
-
- {field.label}
- {data && 
}
-
- )
-}
-
type ImageData = {
id: string
filename: string
@@ -69,7 +57,7 @@ type CloudinaryImageValue =
type CloudinaryImageController = FieldController
-export const controller = (config: FieldControllerConfig): CloudinaryImageController => {
+export function controller (config: FieldControllerConfig): CloudinaryImageController {
return {
path: config.path,
label: config.label,
diff --git a/packages/core/package.json b/packages/core/package.json
index ff8a944d065..bf9714e54a9 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -7,166 +7,207 @@
"module": "dist/keystone-6-core.esm.js",
"exports": {
".": {
+ "types": "./dist/keystone-6-core.cjs.js",
"module": "./dist/keystone-6-core.esm.js",
"default": "./dist/keystone-6-core.cjs.js"
},
"./access": {
+ "types": "./access/dist/keystone-6-core-access.cjs.js",
"module": "./access/dist/keystone-6-core-access.esm.js",
"default": "./access/dist/keystone-6-core-access.cjs.js"
},
"./context": {
+ "types": "./context/dist/keystone-6-core-context.cjs.js",
"module": "./context/dist/keystone-6-core-context.esm.js",
"default": "./context/dist/keystone-6-core-context.cjs.js"
},
"./session": {
+ "types": "./session/dist/keystone-6-core-session.cjs.js",
"module": "./session/dist/keystone-6-core-session.esm.js",
"default": "./session/dist/keystone-6-core-session.cjs.js"
},
"./testing": {
+ "types": "./testing/dist/keystone-6-core-testing.cjs.js",
"module": "./testing/dist/keystone-6-core-testing.esm.js",
"default": "./testing/dist/keystone-6-core-testing.cjs.js"
},
"./scripts/cli": {
+ "types": "./scripts/cli/dist/keystone-6-core-scripts-cli.cjs.js",
"module": "./scripts/cli/dist/keystone-6-core-scripts-cli.esm.js",
"default": "./scripts/cli/dist/keystone-6-core-scripts-cli.cjs.js"
},
"./types": {
+ "types": "./types/dist/keystone-6-core-types.cjs.js",
"module": "./types/dist/keystone-6-core-types.esm.js",
"default": "./types/dist/keystone-6-core-types.cjs.js"
},
"./fields": {
+ "types": "./fields/dist/keystone-6-core-fields.cjs.js",
"module": "./fields/dist/keystone-6-core-fields.esm.js",
"default": "./fields/dist/keystone-6-core-fields.cjs.js"
},
"./scripts": {
+ "types": "./scripts/dist/keystone-6-core-scripts.cjs.js",
"module": "./scripts/dist/keystone-6-core-scripts.esm.js",
"default": "./scripts/dist/keystone-6-core-scripts.cjs.js"
},
"./admin-ui/image": {
+ "types": "./admin-ui/image/dist/keystone-6-core-admin-ui-image.cjs.js",
"module": "./admin-ui/image/dist/keystone-6-core-admin-ui-image.esm.js",
"default": "./admin-ui/image/dist/keystone-6-core-admin-ui-image.cjs.js"
},
"./admin-ui/apollo": {
+ "types": "./admin-ui/apollo/dist/keystone-6-core-admin-ui-apollo.cjs.js",
"module": "./admin-ui/apollo/dist/keystone-6-core-admin-ui-apollo.esm.js",
"default": "./admin-ui/apollo/dist/keystone-6-core-admin-ui-apollo.cjs.js"
},
"./admin-ui/router": {
+ "types": "./admin-ui/router/dist/keystone-6-core-admin-ui-router.cjs.js",
"module": "./admin-ui/router/dist/keystone-6-core-admin-ui-router.esm.js",
"default": "./admin-ui/router/dist/keystone-6-core-admin-ui-router.cjs.js"
},
"./admin-ui/context": {
+ "types": "./admin-ui/context/dist/keystone-6-core-admin-ui-context.cjs.js",
"module": "./admin-ui/context/dist/keystone-6-core-admin-ui-context.esm.js",
"default": "./admin-ui/context/dist/keystone-6-core-admin-ui-context.cjs.js"
},
"./admin-ui/utils": {
+ "types": "./admin-ui/utils/dist/keystone-6-core-admin-ui-utils.cjs.js",
"module": "./admin-ui/utils/dist/keystone-6-core-admin-ui-utils.esm.js",
"default": "./admin-ui/utils/dist/keystone-6-core-admin-ui-utils.cjs.js"
},
"./fields/types/image/utils": {
+ "types": "./fields/types/image/utils/dist/keystone-6-core-fields-types-image-utils.cjs.js",
"module": "./fields/types/image/utils/dist/keystone-6-core-fields-types-image-utils.esm.js",
"default": "./fields/types/image/utils/dist/keystone-6-core-fields-types-image-utils.cjs.js"
},
"./admin-ui/components": {
+ "types": "./admin-ui/components/dist/keystone-6-core-admin-ui-components.cjs.js",
"module": "./admin-ui/components/dist/keystone-6-core-admin-ui-components.esm.js",
"default": "./admin-ui/components/dist/keystone-6-core-admin-ui-components.cjs.js"
},
"./fields/types/file/views": {
+ "types": "./fields/types/file/views/dist/keystone-6-core-fields-types-file-views.cjs.js",
"module": "./fields/types/file/views/dist/keystone-6-core-fields-types-file-views.esm.js",
"default": "./fields/types/file/views/dist/keystone-6-core-fields-types-file-views.cjs.js"
},
"./fields/types/json/views": {
+ "types": "./fields/types/json/views/dist/keystone-6-core-fields-types-json-views.cjs.js",
"module": "./fields/types/json/views/dist/keystone-6-core-fields-types-json-views.esm.js",
"default": "./fields/types/json/views/dist/keystone-6-core-fields-types-json-views.cjs.js"
},
"./fields/types/text/views": {
+ "types": "./fields/types/text/views/dist/keystone-6-core-fields-types-text-views.cjs.js",
"module": "./fields/types/text/views/dist/keystone-6-core-fields-types-text-views.esm.js",
"default": "./fields/types/text/views/dist/keystone-6-core-fields-types-text-views.cjs.js"
},
"./fields/types/float/views": {
+ "types": "./fields/types/float/views/dist/keystone-6-core-fields-types-float-views.cjs.js",
"module": "./fields/types/float/views/dist/keystone-6-core-fields-types-float-views.esm.js",
"default": "./fields/types/float/views/dist/keystone-6-core-fields-types-float-views.cjs.js"
},
"./fields/types/image/views": {
+ "types": "./fields/types/image/views/dist/keystone-6-core-fields-types-image-views.cjs.js",
"module": "./fields/types/image/views/dist/keystone-6-core-fields-types-image-views.esm.js",
"default": "./fields/types/image/views/dist/keystone-6-core-fields-types-image-views.cjs.js"
},
"./fields/types/bigInt/views": {
+ "types": "./fields/types/bigInt/views/dist/keystone-6-core-fields-types-bigInt-views.cjs.js",
"module": "./fields/types/bigInt/views/dist/keystone-6-core-fields-types-bigInt-views.esm.js",
"default": "./fields/types/bigInt/views/dist/keystone-6-core-fields-types-bigInt-views.cjs.js"
},
"./fields/types/select/views": {
+ "types": "./fields/types/select/views/dist/keystone-6-core-fields-types-select-views.cjs.js",
"module": "./fields/types/select/views/dist/keystone-6-core-fields-types-select-views.esm.js",
"default": "./fields/types/select/views/dist/keystone-6-core-fields-types-select-views.cjs.js"
},
"./fields/types/decimal/views": {
+ "types": "./fields/types/decimal/views/dist/keystone-6-core-fields-types-decimal-views.cjs.js",
"module": "./fields/types/decimal/views/dist/keystone-6-core-fields-types-decimal-views.esm.js",
"default": "./fields/types/decimal/views/dist/keystone-6-core-fields-types-decimal-views.cjs.js"
},
"./fields/types/integer/views": {
+ "types": "./fields/types/integer/views/dist/keystone-6-core-fields-types-integer-views.cjs.js",
"module": "./fields/types/integer/views/dist/keystone-6-core-fields-types-integer-views.esm.js",
"default": "./fields/types/integer/views/dist/keystone-6-core-fields-types-integer-views.cjs.js"
},
"./fields/types/virtual/views": {
+ "types": "./fields/types/virtual/views/dist/keystone-6-core-fields-types-virtual-views.cjs.js",
"module": "./fields/types/virtual/views/dist/keystone-6-core-fields-types-virtual-views.esm.js",
"default": "./fields/types/virtual/views/dist/keystone-6-core-fields-types-virtual-views.cjs.js"
},
"./fields/types/checkbox/views": {
+ "types": "./fields/types/checkbox/views/dist/keystone-6-core-fields-types-checkbox-views.cjs.js",
"module": "./fields/types/checkbox/views/dist/keystone-6-core-fields-types-checkbox-views.esm.js",
"default": "./fields/types/checkbox/views/dist/keystone-6-core-fields-types-checkbox-views.cjs.js"
},
"./fields/types/password/views": {
+ "types": "./fields/types/password/views/dist/keystone-6-core-fields-types-password-views.cjs.js",
"module": "./fields/types/password/views/dist/keystone-6-core-fields-types-password-views.esm.js",
"default": "./fields/types/password/views/dist/keystone-6-core-fields-types-password-views.cjs.js"
},
"./fields/types/timestamp/views": {
+ "types": "./fields/types/timestamp/views/dist/keystone-6-core-fields-types-timestamp-views.cjs.js",
"module": "./fields/types/timestamp/views/dist/keystone-6-core-fields-types-timestamp-views.esm.js",
"default": "./fields/types/timestamp/views/dist/keystone-6-core-fields-types-timestamp-views.cjs.js"
},
"./fields/types/calendarDay/views": {
+ "types": "./fields/types/calendarDay/views/dist/keystone-6-core-fields-types-calendarDay-views.cjs.js",
"module": "./fields/types/calendarDay/views/dist/keystone-6-core-fields-types-calendarDay-views.esm.js",
"default": "./fields/types/calendarDay/views/dist/keystone-6-core-fields-types-calendarDay-views.cjs.js"
},
"./fields/types/multiselect/views": {
+ "types": "./fields/types/multiselect/views/dist/keystone-6-core-fields-types-multiselect-views.cjs.js",
"module": "./fields/types/multiselect/views/dist/keystone-6-core-fields-types-multiselect-views.esm.js",
"default": "./fields/types/multiselect/views/dist/keystone-6-core-fields-types-multiselect-views.cjs.js"
},
"./fields/types/relationship/views": {
+ "types": "./fields/types/relationship/views/dist/keystone-6-core-fields-types-relationship-views.cjs.js",
"module": "./fields/types/relationship/views/dist/keystone-6-core-fields-types-relationship-views.esm.js",
"default": "./fields/types/relationship/views/dist/keystone-6-core-fields-types-relationship-views.cjs.js"
},
"./fields/types/relationship/views/RelationshipSelect": {
+ "types": "./fields/types/relationship/views/RelationshipSelect/dist/keystone-6-core-fields-types-relationship-views-RelationshipSelect.cjs.js",
"module": "./fields/types/relationship/views/RelationshipSelect/dist/keystone-6-core-fields-types-relationship-views-RelationshipSelect.esm.js",
"default": "./fields/types/relationship/views/RelationshipSelect/dist/keystone-6-core-fields-types-relationship-views-RelationshipSelect.cjs.js"
},
"./___internal-do-not-use-will-break-in-patch/artifacts": {
+ "types": "./___internal-do-not-use-will-break-in-patch/artifacts/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-artifacts.cjs.js",
"module": "./___internal-do-not-use-will-break-in-patch/artifacts/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-artifacts.esm.js",
"default": "./___internal-do-not-use-will-break-in-patch/artifacts/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-artifacts.cjs.js"
},
"./___internal-do-not-use-will-break-in-patch/admin-ui/id-field-view": {
+ "types": "./___internal-do-not-use-will-break-in-patch/admin-ui/id-field-view/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-id-field-view.cjs.js",
"module": "./___internal-do-not-use-will-break-in-patch/admin-ui/id-field-view/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-id-field-view.esm.js",
"default": "./___internal-do-not-use-will-break-in-patch/admin-ui/id-field-view/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-id-field-view.cjs.js"
},
"./___internal-do-not-use-will-break-in-patch/admin-ui/pages/App": {
+ "types": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/App/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-App.cjs.js",
"module": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/App/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-App.esm.js",
"default": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/App/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-App.cjs.js"
},
"./___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage": {
+ "types": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-HomePage.cjs.js",
"module": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-HomePage.esm.js",
"default": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-HomePage.cjs.js"
},
"./___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage": {
+ "types": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-ItemPage.cjs.js",
"module": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-ItemPage.esm.js",
"default": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-ItemPage.cjs.js"
},
"./___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage": {
+ "types": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-ListPage.cjs.js",
"module": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-ListPage.esm.js",
"default": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-ListPage.cjs.js"
},
"./___internal-do-not-use-will-break-in-patch/admin-ui/pages/NoAccessPage": {
+ "types": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/NoAccessPage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-NoAccessPage.cjs.js",
"module": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/NoAccessPage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-NoAccessPage.esm.js",
"default": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/NoAccessPage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-NoAccessPage.cjs.js"
},
"./___internal-do-not-use-will-break-in-patch/admin-ui/pages/CreateItemPage": {
+ "types": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/CreateItemPage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-CreateItemPage.cjs.js",
"module": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/CreateItemPage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-CreateItemPage.esm.js",
"default": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/CreateItemPage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-CreateItemPage.cjs.js"
},
@@ -190,6 +231,8 @@
"@graphql-ts/schema": "^0.6.0",
"@graphql-typed-document-node/core": "^3.1.2",
"@hapi/iron": "^7.0.0",
+ "@internationalized/date": "^3.5.5",
+ "@keystar/ui": "^0.7.13",
"@keystone-ui/button": "workspace:^",
"@keystone-ui/core": "workspace:^",
"@keystone-ui/fields": "workspace:^",
@@ -207,6 +250,10 @@
"@prisma/client": "5.22.0",
"@prisma/internals": "5.22.0",
"@prisma/migrate": "5.22.0",
+ "@react-aria/i18n": "^3.12.1",
+ "@react-aria/label": "^3.7.10",
+ "@react-aria/utils": "^3.25.1",
+ "@react-stately/data": "^3.11.6",
"@sindresorhus/slugify": "^1.1.2",
"apollo-upload-client": "^17.0.0",
"bcryptjs": "^2.4.3",
diff --git a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/id-field-view.tsx b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/id-field-view.tsx
index dae6dfe031c..80b7373843d 100644
--- a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/id-field-view.tsx
+++ b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/id-field-view.tsx
@@ -1,34 +1,24 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
+import React from 'react'
+
+import { TextField } from '@keystar/ui/text-field'
+import { Text } from '@keystar/ui/typography'
-import { jsx } from '@keystone-ui/core'
-import { FieldContainer, FieldLabel, TextInput } from '@keystone-ui/fields'
import type {
- CardValueComponent,
CellComponent,
FieldController,
FieldControllerConfig,
IdFieldConfig,
} from '../../types'
-import { CellLink, CellContainer } from '../../admin-ui/components'
export function Field () {
return null
}
-export const Cell: CellComponent = ({ item, field, linkTo }) => {
- const value = item[field.path] + ''
- return linkTo ? {value} : {value}
-}
-Cell.supportsLinkTo = true
-
-export const CardValue: CardValueComponent = ({ item, field }) => {
- return (
-
- {field.label}
- {item[field.path]}
-
- )
+export const Cell: CellComponent = ({ field, item }) => {
+ let value = item[field.path]
+ return value != null
+ ? {value.toString()}
+ : null
}
export function controller (
@@ -44,13 +34,19 @@ export function controller (
serialize: () => ({}),
filter: {
Filter (props) {
+ const { autoFocus, context, onChange, type, typeLabel, value, ...otherProps } = props
+
+ const labelProps = context === 'add'
+ ? { label: config.label, description: typeLabel }
+ : { label: typeLabel }
+
return (
- {
- props.onChange(event.target.value)
- }}
- value={props.value}
- autoFocus={props.autoFocus}
+
-
-
-
-
-
+
+
+
+
)
}
diff --git a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/CreateItemPage/index.tsx b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/CreateItemPage/index.tsx
index e437e65af8f..bb83d2111f3 100644
--- a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/CreateItemPage/index.tsx
+++ b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/CreateItemPage/index.tsx
@@ -1,80 +1,93 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
+import React from 'react'
+import { useRouter } from 'next/router'
-import { Box, jsx } from '@keystone-ui/core'
+import { Button } from '@keystar/ui/button'
+import { VStack } from '@keystar/ui/layout'
import { LoadingDots } from '@keystone-ui/loading'
-import { Button } from '@keystone-ui/button'
-import { useRouter } from 'next/router'
+
import { Fields } from '../../../../admin-ui/utils'
import { PageContainer } from '../../../../admin-ui/components/PageContainer'
import { useKeystone, useList } from '../../../../admin-ui'
import { GraphQLErrorNotice } from '../../../../admin-ui/components'
-import { type ListMeta } from '../../../../types'
import { useCreateItem } from '../../../../admin-ui/utils/useCreateItem'
import { BaseToolbar, ColumnLayout, ItemPageHeader } from '../ItemPage/common'
-function CreatePageForm (props: { list: ListMeta }) {
- const createItem = useCreateItem(props.list)
- const router = useRouter()
- return (
-
- {createItem.error && (
-
-
-
-
- )
-}
-
type CreateItemPageProps = { listKey: string }
-export const getCreateItemPage = (props: CreateItemPageProps) => () =>
-
-
- {createViewFieldModes.state === 'error' && (
-
+
-
+ }}
+ style={{
+ display: 'contents',
+ }}
+ >
+ {/*
+ Workaround for react-aria "bug" where pressing enter in a form field
+ moves focus to the submit button.
+ See: https://github.com/adobe/react-spectrum/issues/5940
+ */}
+
+
+ {createViewFieldModes.state === 'error' && (
+
+
+
+
+
+
+
+ )}
)
}
diff --git a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/index.tsx b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/index.tsx
index fa8cc5bda5b..71dab2d7f13 100644
--- a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/index.tsx
+++ b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/index.tsx
@@ -1,23 +1,27 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
+import React, {
+ type PropsWithChildren,
+ useId,
+ useMemo,
+ useRef
+} from 'react'
-import { useMemo } from 'react'
-
-import { Center, Inline, Heading, VisuallyHidden, jsx, useTheme } from '@keystone-ui/core'
-import { PlusIcon } from '@keystone-ui/icons/icons/PlusIcon'
-import { LoadingDots } from '@keystone-ui/loading'
+import { ActionButton } from '@keystar/ui/button'
+import { Icon } from '@keystar/ui/icon'
+import { plusIcon } from '@keystar/ui/icon/icons/plusIcon'
+import { Grid, VStack } from '@keystar/ui/layout'
+import { useLink } from '@keystar/ui/link'
+import { Notice } from '@keystar/ui/notice'
+import { ProgressCircle } from '@keystar/ui/progress'
+import { css, FocusRing, tokenSchema, transition } from '@keystar/ui/style'
+import { TooltipTrigger, Tooltip } from '@keystar/ui/tooltip'
+import { Heading, Text } from '@keystar/ui/typography'
import { makeDataGetter } from '../../../../admin-ui/utils'
-import { PageContainer, HEADER_HEIGHT } from '../../../../admin-ui/components/PageContainer'
+import { PageContainer } from '../../../../admin-ui/components/PageContainer'
import { gql, useQuery } from '../../../../admin-ui/apollo'
import { useKeystone, useList } from '../../../../admin-ui/context'
-import { Link, type LinkProps } from '../../../../admin-ui/router'
-function ListCard ({
- listKey,
- count,
- hideCreate
-}: {
+type ListCardProps = {
listKey: string
hideCreate: boolean
count:
@@ -25,83 +29,6 @@ function ListCard ({
| { type: 'no-access' }
| { type: 'error', message: string }
| { type: 'loading' }
-}) {
- const { colors, palette, radii, spacing } = useTheme()
- const list = useList(listKey)
- return (
-
-
- {list.label}
- {list.isSingleton ? null : count.type === 'success' ? (
-
- {count.count} item{count.count !== 1 ? 's' : ''}
-
- ) : count.type === 'error' ? (
- count.message
- ) : count.type === 'loading' ? (
-
- Create {list.singular}
-
- )}
-
- )
-}
-
-function CreateButton (props: LinkProps) {
- const theme = useTheme()
- return (
-
- )
}
export function HomePage () {
@@ -122,7 +49,7 @@ export function HomePage () {
}
${Object.values(lists)
.filter(list => !list.isSingleton)
- .map(list => `${list.key}: ${list.gqlNames.listQueryCountName}`)
+ .map(list => `${list.key}: ${list.graphql.names.listQueryCountName}`)
.join('\n')}
}`,
[lists]
@@ -131,58 +58,170 @@ export function HomePage () {
const dataGetter = makeDataGetter(data, error?.graphQLErrors)
- return (
- Dashboard}>
- {visibleLists.state === 'loading' ? (
-
-
- ) : (
-
- {(() => {
- if (visibleLists.state === 'error') {
- return (
-
- {visibleLists.error instanceof Error
- ? visibleLists.error.message
- : visibleLists.error[0].message}
-
- )
- }
- return Object.keys(lists).map(key => {
- if (!visibleLists.lists.has(key)) {
- return null
+ const stateAwareElement = (() => {
+ if (visibleLists.state === 'error') {
+ return (
+
+ {visibleLists.error instanceof Error
+ ? visibleLists.error.message
+ : visibleLists.error[0].message}
+
+ )
+ }
+ if (visibleLists.state === 'loading') {
+ return (
+
+
+ )
+ }
+
+ return (
+
+ {Object.keys(lists).map(key => {
+ if (!visibleLists.lists.has(key)) {
+ return null
+ }
+ const result = dataGetter.get(key)
+ return (
+ list.key === key)
- ?.hideCreate ?? false
- }
- key={key}
- listKey={key}
- />
- )
- })
- })()}
-
- )}
+ hideCreate={
+ data?.keystone.adminMeta.lists.find((list: any) => list.key === key)
+ ?.hideCreate ?? false
+ }
+ key={key}
+ listKey={key}
+ />
+ )
+ })}
+
+ )
+ })()
+
+ return (
+ Dashboard}>
+ Lists
+
+ {stateAwareElement}
+
)
}
+
+function ListCard ({ listKey, count, hideCreate }: ListCardProps) {
+ const list = useList(listKey)
+ const countElementId = useId()
+ const countElement = (() => {
+ if (list.isSingleton) {
+ return null
+ }
+
+ switch (count.type) {
+ case 'success':
+ return (
+
+ {count.count} item{count.count !== 1 ? 's' : ''}
+
+ )
+ case 'error':
+ return {count.message}
+ case 'loading':
+ return --
+ default:
+ return No access
+ }
+ })()
+
+ return (
+
+
+
+
+ {list.label}
+
+
+
+ {countElement}
+
+
+ {hideCreate === false && !list.isSingleton && (
+
+
+
+ Add {list.singular.toLowerCase()}
+
+ )}
+
+ )
+}
+
+function CardLink (props: PropsWithChildren<{ href: string }>) {
+ const ref = useRef(null)
+ const { isPressed, linkProps } = useLink(props, ref)
+ return (
+
+
+
+ )
+}
diff --git a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/common.tsx b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/common.tsx
index e8aba4cd939..127829af6a2 100644
--- a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/common.tsx
+++ b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/common.tsx
@@ -1,115 +1,133 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
+import React, {
+ type HTMLAttributes,
+ type ReactNode,
+ Fragment,
+} from 'react'
+import { useRouter } from 'next/router'
+
+import { Breadcrumbs, Item } from '@keystar/ui/breadcrumbs'
+import { Grid, HStack } from '@keystar/ui/layout'
+import { breakpointQueries, css, tokenSchema } from '@keystar/ui/style'
+import { Heading, Text } from '@keystar/ui/typography'
-import { Heading, jsx, useTheme } from '@keystone-ui/core'
-import { ChevronRightIcon } from '@keystone-ui/icons/icons/ChevronRightIcon'
-import { Fragment, type HTMLAttributes, type ReactNode } from 'react'
import { Container } from '../../../../admin-ui/components/Container'
-import { Link } from '../../../../admin-ui/router'
-import { type ListMeta } from '../../../../types'
+import type { ListMeta } from '../../../../types'
+
+type ItemPageHeaderProps = {
+ label: string
+ list: ListMeta
+ title: string
+}
-export function ItemPageHeader (props: { list: ListMeta, label: string }) {
- const { palette, spacing } = useTheme()
+export function ItemPageHeader (props: ItemPageHeaderProps) {
+ const { label, list, title = label } = props
+ const router = useRouter()
return (
-
-
- {props.list.isSingleton ? (
- {props.list.label}
- ) : (
-
-
-
- {props.list.label}
-
-
-
-
- {props.label}
-
-
- )}
-
+
+ {list.isSingleton ? (
+ {list.label}
+ ) : (
+
+
+ -
+ {list.label}
+
+ -
+ {label}
+
+
+
+ {/* Every page must have an H1 for accessibility. */}
+
+ {title}
+
+
+ )}
)
}
export function ColumnLayout (props: HTMLAttributes) {
- const { spacing } = useTheme()
-
return (
// this container must be relative to catch absolute children
// particularly the "expanded" document-field, which needs a height of 100%
-
+
)
}
-export function BaseToolbar (props: { children: ReactNode }) {
- const { colors, spacing } = useTheme()
-
+export function StickySidebar (props: HTMLAttributes) {
return (
+ )
+}
+
+export function BaseToolbar (props: { children: ReactNode }) {
+ return (
+
- {props.children}
-
+
+ {props.children}
+
+
)
}
diff --git a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/index.tsx b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/index.tsx
index bdb67adf269..34d3f3d8055 100644
--- a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/index.tsx
+++ b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/index.tsx
@@ -1,48 +1,50 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-
-import copyToClipboard from 'clipboard-copy'
-import { useRouter } from 'next/router'
-import {
+import React, {
+ type PropsWithChildren,
+ type ReactElement,
Fragment,
- type HTMLAttributes,
memo,
- type ReactElement,
useCallback,
useEffect,
useMemo,
useRef,
useState,
} from 'react'
+import copyToClipboard from 'clipboard-copy'
+import { useRouter } from 'next/router'
+
+import { ActionButton, Button } from '@keystar/ui/button'
+import { Icon } from '@keystar/ui/icon'
+import { fileWarningIcon } from '@keystar/ui/icon/icons/fileWarningIcon'
+import { clipboardIcon } from '@keystar/ui/icon/icons/clipboardIcon'
+import { AlertDialog, DialogContainer, DialogTrigger } from '@keystar/ui/dialog'
+import { Box, Grid, VStack } from '@keystar/ui/layout'
+import { Notice } from '@keystar/ui/notice'
+import { ProgressCircle } from '@keystar/ui/progress'
+import { SlotProvider } from '@keystar/ui/slots'
+import { TextField } from '@keystar/ui/text-field'
+import { toastQueue } from '@keystar/ui/toast'
+import { TooltipTrigger, Tooltip } from '@keystar/ui/tooltip'
+import { Heading, Text } from '@keystar/ui/typography'
-import { Button } from '@keystone-ui/button'
-import { Box, Center, Stack, Text, jsx, useTheme } from '@keystone-ui/core'
-import { LoadingDots } from '@keystone-ui/loading'
-import { ClipboardIcon } from '@keystone-ui/icons/icons/ClipboardIcon'
-import { AlertDialog } from '@keystone-ui/modals'
-import { Notice } from '@keystone-ui/notice'
-import { useToasts } from '@keystone-ui/toast'
-import { Tooltip } from '@keystone-ui/tooltip'
-import { FieldLabel, TextInput } from '@keystone-ui/fields'
import type { ListMeta, FieldMeta } from '../../../../types'
import {
type DataGetter,
type DeepNullable,
- makeDataGetter,
- deserializeValue,
type ItemData,
- useInvalidFields,
Fields,
+ deserializeValue,
+ makeDataGetter,
useChangedFieldsAndDataForUpdate,
+ useInvalidFields,
} from '../../../../admin-ui/utils'
-
import { gql, useMutation, useQuery } from '../../../../admin-ui/apollo'
import { useList } from '../../../../admin-ui/context'
-import { PageContainer, HEADER_HEIGHT } from '../../../../admin-ui/components/PageContainer'
+import { PageContainer } from '../../../../admin-ui/components/PageContainer'
import { GraphQLErrorNotice } from '../../../../admin-ui/components/GraphQLErrorNotice'
import { usePreventNavigation } from '../../../../admin-ui/utils/usePreventNavigation'
import { CreateButtonLink } from '../../../../admin-ui/components/CreateButtonLink'
-import { BaseToolbar, ColumnLayout, ItemPageHeader } from './common'
+import { ErrorDetailsDialog } from '../../../../admin-ui/components/Errors'
+import { BaseToolbar, ColumnLayout, ItemPageHeader, StickySidebar } from './common'
type ItemPageProps = {
listKey: string
@@ -80,11 +82,11 @@ function ItemForm ({
item: ItemData
}) {
const list = useList(listKey)
- const { spacing, typography } = useTheme()
+ const [errorDialogValue, setErrorDialogValue] = useState(null)
const [update, { loading, error, data }] = useMutation(
- gql`mutation ($data: ${list.gqlNames.updateInputName}!, $id: ID!) {
- item: ${list.gqlNames.updateMutationName}(where: { id: $id }, data: $data) {
+ gql`mutation ($data: ${list.graphql.names.updateInputName}!, $id: ID!) {
+ item: ${list.graphql.names.updateMutationName}(where: { id: $id }, data: $data) {
${selectedFields}
}
}`,
@@ -119,8 +121,8 @@ function ItemForm ({
const invalidFields = useInvalidFields(list.fields, state.value)
const [forceValidation, setForceValidation] = useState(false)
- const toasts = useToasts()
- const onSave = useEventCallback(() => {
+ const onSave = useEventCallback((e) => {
+ e.preventDefault()
const newForceValidation = invalidFields.size !== 0
setForceValidation(newForceValidation)
if (newForceValidation) return
@@ -134,55 +136,89 @@ function ItemForm ({
// update the item, path being undefined generally indicates a failure in the graphql mutation itself - ie a type error
const error = errors?.find(x => x.path === undefined || x.path?.length === 1)
if (error) {
- toasts.addToast({
- title: 'Failed to update item',
- tone: 'negative',
- message: error.message,
+ toastQueue.critical('Unable to save item', {
+ actionLabel: 'Details',
+ onAction: () => setErrorDialogValue(new Error(error.message)),
+ shouldCloseOnAction: true,
})
} else {
- toasts.addToast({
- // title: data.item[list.labelField] || data.item.id,
- tone: 'positive',
- title: 'Saved successfully',
- // message: 'Saved successfully',
+ // do we really need a toast for this? the item _should_ save…
+ toastQueue.positive(`Saved changes to ${list.singular.toLocaleLowerCase()}`, {
+ timeout: 5000,
})
}
})
.catch(err => {
- toasts.addToast({ title: 'Failed to update item', tone: 'negative', message: err.message })
+ toastQueue.critical('Unable to save item', {
+ actionLabel: 'Details',
+ onAction: () => setErrorDialogValue(err),
+ shouldCloseOnAction: true,
+ })
})
})
const labelFieldValue = list.isSingleton ? list.label : state.item.data?.[list.labelField]
const itemId = state.item.data?.id
const hasChangedFields = !!changedFields.size
usePreventNavigation(useMemo(() => ({ current: hasChangedFields }), [hasChangedFields]))
+
return (
-
- x.path?.length === 1)}
- />
- {
- setValue(state => ({ item: state.item, value: value(state.value) }))
- },
- [setValue]
- )}
- value={state.value}
- />
+
-
- Item ID
-
-
- {props => (
-
- )}
-
-
-
- {
- setValue(state => ({ item: state.item, value: value(state.value) }))
- },
- [setValue]
- )}
- value={state.value}
- />
-
-
+
+
+ setErrorDialogValue(null)} isDismissable>
+ {errorDialogValue &&
)
}
+const COPY_TOOLTIP_CONTENT = {
+ neutral: 'Copy ID',
+ positive: 'Copied to clipboard',
+ critical: 'Unable to copy',
+}
+type TooltipState = { isOpen?: boolean; tone: keyof typeof COPY_TOOLTIP_CONTENT }
+function IdField ({ itemId }: { itemId: string }) {
+ const [tooltipState, setTooltipState] = useState({ tone:'neutral' })
+
+ const onCopy = useCallback(async () => {
+ try {
+ await copyToClipboard(itemId)
+ setTooltipState({ isOpen: true, tone: 'positive' })
+ } catch (err: any) {
+ setTooltipState({ isOpen: true, tone: 'critical' })
+ }
+
+ // close, then reset the tooltip state after a delay
+ setTimeout(() => {
+ setTooltipState(state => ({ ...state, isOpen: false }))
+ }, 2000)
+ setTimeout(() => {
+ setTooltipState({ isOpen: undefined, tone: 'neutral' })
+ }, 2300)
+ }, [itemId])
+
+ return (
+
+ {
+ if (target instanceof HTMLInputElement) {
+ target.select()
+ }
+ }}
+ />
+
+
+
+
+ {COPY_TOOLTIP_CONTENT[tooltipState.tone]}
+
+
+
+ )
+}
+
function DeleteButton ({
itemLabel,
itemId,
@@ -267,65 +307,58 @@ function DeleteButton ({
itemId: string
list: ListMeta
}) {
- const toasts = useToasts()
- const [deleteItem, { loading }] = useMutation(
+ const [errorDialogValue, setErrorDialogValue] = useState(null)
+ const router = useRouter()
+ const [deleteItem] = useMutation(
gql`mutation ($id: ID!) {
- ${list.gqlNames.deleteMutationName}(where: { id: $id }) {
+ ${list.graphql.names.deleteMutationName}(where: { id: $id }) {
id
}
}`,
{ variables: { id: itemId } }
)
- const [isOpen, setIsOpen] = useState(false)
- const router = useRouter()
return (
-
- {
- try {
- await deleteItem()
- } catch (err: any) {
- return toasts.addToast({
- title: `Failed to delete ${list.singular} item: ${itemLabel}`,
- message: err.message,
- tone: 'negative',
- })
- }
- router.push(list.isSingleton ? '/' : `/${list.path}`)
- return toasts.addToast({
- title: itemLabel,
- message: `Deleted ${list.singular} item successfully`,
- tone: 'positive',
+
+
+ {
+ try {
+ await deleteItem()
+ } catch (err: any) {
+ toastQueue.critical('Unable to delete item.', {
+ actionLabel: 'Details',
+ onAction: () => {
+ setErrorDialogValue(err)
+ },
+ shouldCloseOnAction: true,
})
- },
- loading,
- },
- cancel: {
- label: 'Cancel',
- action: () => {
- setIsOpen(false)
- },
- },
- }}
- >
- Are you sure you want to delete {itemLabel}?
-
+ return
+ }
+
+ toastQueue.neutral(`${list.singular} deleted.`, {
+ timeout: 5000,
+ })
+ router.push(list.isSingleton ? '/' : `/${list.path}`)
+ }}
+ >
+
+ Are you sure you want to delete “{itemLabel}”?
+ This action cannot be undone.
+
+
+
+
+ setErrorDialogValue(null)} isDismissable>
+ {errorDialogValue &&
)
}
@@ -351,7 +384,7 @@ function ItemPage ({ listKey }: ItemPageProps) {
selectedFields,
query: gql`
query ItemPage($id: ID!, $listKey: String!) {
- item: ${list.gqlNames.itemQueryName}(where: {id: $id}) {
+ item: ${list.graphql.names.itemQueryName}(where: {id: $id}) {
${selectedFields}
}
keystone {
@@ -419,11 +452,8 @@ function ItemPage ({ listKey }: ItemPageProps) {
const pageLoading = loading || id === undefined
const metaQueryErrors = dataGetter.get('keystone').errors
- const pageTitle: string = list.isSingleton
- ? list.label
- : pageLoading
- ? undefined
- : (data && data.item && (data.item[list.labelField] || data.item.id)) || id
+ const pageLabel = (data && data.item && (data.item[list.labelField] || data.item.id)) || id
+ const pageTitle: string = list.isSingleton ? list.label : pageLoading ? undefined : pageLabel
return (
-
+
+
) : metaQueryErrors ? (
- {metaQueryErrors[0].message}
+ {metaQueryErrors[0].message}
) : (
@@ -458,19 +485,19 @@ function ItemPage ({ listKey }: ItemPageProps) {
/>
) : list.isSingleton ? (
id === '1' ? (
-
-
- {list.label} doesn't exist or you don't have access to it.
-
+
+ “{list.label}” doesn’t exist, or you don’t have access to it.
{!data.keystone.adminMeta.list!.hideCreate &&
+
) : (
- The item with id "{id}" does not exist
+
+ An item with ID “{id}” does not exist.
+
)
) : (
-
- The item with id "{id}" could not be found or you don't have access to it.
-
+
+ The item with ID “{id}” doesn’t exist, or you don’t have access to it.
+
)}
) : (
@@ -495,89 +522,68 @@ function ItemPage ({ listKey }: ItemPageProps) {
// Styled Components
// ------------------------------
+function ItemNotFound (props: PropsWithChildren<{}>) {
+ return (
+
+ Not found
+
+ {props.children}
+
+
+ )
+}
+
const Toolbar = memo(function Toolbar ({
hasChangedFields,
loading,
- onSave,
onReset,
deleteButton,
}: {
hasChangedFields: boolean
loading: boolean
- onSave: () => void
onReset: () => void
deleteButton?: ReactElement
}) {
return (
-
- {hasChangedFields ? (
-
- No changes
-
- )}
- {deleteButton}
-
+
)
})
-function ResetChangesButton (props: { onReset: () => void }) {
- const [isConfirmModalOpen, setConfirmModalOpen] = useState(false)
-
+function ResetButton (props: { onReset: () => void, hasChanges?: boolean }) {
return (
-
-
- )
-}
-
-function StickySidebar (props: HTMLAttributes) {
- const { spacing } = useTheme()
- return (
-
+
)
}
diff --git a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/FieldSelection.tsx b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/FieldSelection.tsx
index fcfd317dfba..12a4437085c 100644
--- a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/FieldSelection.tsx
+++ b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/FieldSelection.tsx
@@ -1,53 +1,32 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { Button } from '@keystone-ui/button'
-import { Box, jsx } from '@keystone-ui/core'
-import { ChevronDownIcon } from '@keystone-ui/icons/icons/ChevronDownIcon'
-import { Options, OptionPrimitive, CheckMark } from '@keystone-ui/options'
-import { Popover } from '@keystone-ui/popover'
+import React, {
+ type Key,
+ useMemo,
+} from 'react'
import { useRouter } from 'next/router'
-import { type ListMeta } from '../../../../types'
-import { useSelectedFields } from './useSelectedFields'
-function isArrayEqual (arrA: string[], arrB: string[]) {
- if (arrA.length !== arrB.length) return false
- for (let i = 0; i < arrA.length; i++) {
- if (arrA[i] !== arrB[i]) {
- return false
- }
- }
- return true
-}
+import { ActionButton } from '@keystar/ui/button'
+import { Icon } from '@keystar/ui/icon'
+import { chevronDownIcon } from '@keystar/ui/icon/icons/chevronDownIcon'
+import { MenuTrigger, Menu, Item } from '@keystar/ui/menu'
+import { Text } from '@keystar/ui/typography'
-const Option: typeof OptionPrimitive = props => {
- return (
-
- {props.children}
-
- )
-}
-
-// TODO: return type required by pnpm :(
-export const fieldSelectionOptionsComponents: Parameters[0]['components'] = {
- Option,
-}
+import type { ListMeta } from '../../../../types'
+import { useSelectedFields } from './useSelectedFields'
export function FieldSelection ({
- list,
fieldModesByFieldPath,
+ isDisabled,
+ list,
}: {
- list: ListMeta
fieldModesByFieldPath: Record
+ isDisabled?: boolean
+ list: ListMeta
}) {
const router = useRouter()
const selectedFields = useSelectedFields(list, fieldModesByFieldPath)
- const setNewSelectedFields = (selectedFields: string[]) => {
+ const setNewSelectedFields = (selectedFields: Key[]) => {
+ // Clear the `fields` query param when selection matches initial columns
if (isArrayEqual(selectedFields, list.initialColumns)) {
const { fields: _ignore, ...otherQueryFields } = router.query
router.push({ query: otherQueryFields })
@@ -55,45 +34,50 @@ export function FieldSelection ({
router.push({ query: { ...router.query, fields: selectedFields.join(',') } })
}
}
- const fields: { value: string, label: string, isDisabled: boolean }[] = []
- Object.keys(fieldModesByFieldPath).forEach(fieldPath => {
- if (fieldModesByFieldPath[fieldPath] === 'read') {
- fields.push({
+
+ const fields = useMemo(() => {
+ return Object.keys(fieldModesByFieldPath)
+ .filter(fieldPath => fieldModesByFieldPath[fieldPath] === 'read')
+ .map(fieldPath => ({
value: fieldPath,
label: list.fields[fieldPath].label,
isDisabled: selectedFields.size === 1 && selectedFields.has(fieldPath),
- })
- }
- })
+ }))
+ }, [fieldModesByFieldPath, list.fields, selectedFields])
return (
- {
- return (
-
- )
- }}
- >
-
-
- {
- if (!Array.isArray(options)) return
- setNewSelectedFields(options.map(x => x.value))
- }}
- isMulti
- value={fields.filter(option => selectedFields.has(option.value))}
- options={fields}
- components={fieldSelectionOptionsComponents}
- />
-
-
-
+
+
+ Columns
+
+
+
)
}
+
+function isArrayEqual (arrA: Key[], arrB: Key[]) {
+ if (arrA.length !== arrB.length) return false
+ for (let i = 0; i < arrA.length; i++) {
+ if (arrA[i] !== arrB[i]) {
+ return false
+ }
+ }
+ return true
+}
diff --git a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/FilterAdd.tsx b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/FilterAdd.tsx
index 6fb2180210e..8d36f91ddf6 100644
--- a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/FilterAdd.tsx
+++ b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/FilterAdd.tsx
@@ -1,93 +1,178 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
+import { useRouter } from 'next/router'
+import React, { type FormEvent, Fragment, useMemo, useState, useRef } from 'react'
-import { type ComponentProps, Fragment, type FormEvent, useMemo, useState } from 'react'
-import { Button } from '@keystone-ui/button'
-import { Box, Divider, Heading, Stack, VisuallyHidden, jsx, useTheme } from '@keystone-ui/core'
-import { Select } from '@keystone-ui/fields'
-import { ChevronLeftIcon } from '@keystone-ui/icons/icons/ChevronLeftIcon'
-import { ChevronRightIcon } from '@keystone-ui/icons/icons/ChevronRightIcon'
-import { ChevronDownIcon } from '@keystone-ui/icons/icons/ChevronDownIcon'
-import { OptionPrimitive, Options } from '@keystone-ui/options'
-import { PopoverDialog, usePopover } from '@keystone-ui/popover'
+import { ActionButton, ButtonGroup, Button } from '@keystar/ui/button'
+import { Dialog, DialogTrigger } from '@keystar/ui/dialog'
+import { Icon } from '@keystar/ui/icon'
+import { chevronDownIcon } from '@keystar/ui/icon/icons/chevronDownIcon'
+import { Grid } from '@keystar/ui/layout'
+import { MenuTrigger, Menu, Item } from '@keystar/ui/menu'
+import { Picker } from '@keystar/ui/picker'
+import { Content } from '@keystar/ui/slots'
+import { Heading, Text } from '@keystar/ui/typography'
import { type FieldMeta, type JSONValue } from '../../../../types'
import { useList } from '../../../../admin-ui/context'
-import { useRouter } from '../../../../admin-ui/router'
type State =
| { kind: 'selecting-field' }
| { kind: 'filter-value', fieldPath: string, filterType: string, filterValue: JSONValue }
-const fieldSelectComponents: ComponentProps['components'] = {
- Option: ({ children, ...props }) => {
- const theme = useTheme()
- const iconColor = props.isFocused ? theme.colors.foreground : theme.colors.foregroundDim
- return (
-
- {children}
-
-
- )
- },
-}
-export function FilterAdd ({
- listKey,
- filterableFields,
-}: {
- listKey: string
+export function FilterAdd (props: {
filterableFields: Set
+ isDisabled?: boolean
+ listKey: string
}) {
- const { isOpen, setOpen, trigger, dialog, arrow } = usePopover({
- placement: 'bottom',
- modifiers: [{ name: 'offset', options: { offset: [0, 8] } }],
- })
+ const triggerRef = useRef(null)
+ const [state, setState] = useState({ kind: 'selecting-field' })
+ const [forceValidation, setForceValidation] = useState(false)
+ const router = useRouter()
+
+ const { fieldsWithFilters, filtersByFieldThenType, list } = useFilterFields(props)
+ const resetState = () => {
+ setState({ kind: 'selecting-field' })
+ setForceValidation(false)
+ // This is a bit of a hack to ensure the trigger button is focused after the
+ // dialog closes, since we're forking the render
+ setTimeout(() => {
+ triggerRef?.current?.focus()
+ }, 200)
+ }
+ const onSubmit = (event: FormEvent) => {
+ event.preventDefault()
+ setForceValidation(true)
+
+ if (state.kind !== 'filter-value') return
+ if ((state.filterType !== 'empty' && state.filterType !== 'not_empty') && state.filterValue == null) {
+ return
+ }
+
+ router.push({
+ query: {
+ ...router.query,
+ [`!${state.fieldPath}_${state.filterType}`]: JSON.stringify(state.filterValue),
+ },
+ })
+ resetState()
+ }
+
+ if (state.kind === 'filter-value') {
+ const { Filter } = fieldsWithFilters[state.fieldPath].controller.filter
+ const fieldLabel = list.fields[state.fieldPath].label
+ const filterTypes = filtersByFieldThenType[state.fieldPath]
+ const typeLabel = filterTypes[state.filterType]
+ return (
+ !isOpen && resetState()}>
+
+ Filter
+
+
+
+ )
+ }
return (
-
-
- {isOpen && (
- {
- setOpen(false)
- }}
- listKey={listKey}
- filterableFields={filterableFields}
- />
- )}
-
+
+
+ Filter
+
+
+
)
}
-function FilterAddPopoverContent ({
- onClose,
+function useFilterFields ({
listKey,
filterableFields,
}: {
- onClose: () => void
listKey: string
filterableFields: Set
}) {
@@ -124,126 +209,10 @@ function FilterAddPopoverContent ({
})
return filtersByFieldThenType
}, [router.query, fieldsWithFilters])
- const [state, setState] = useState({ kind: 'selecting-field' })
- return (
- {
- event.preventDefault()
- if (state.kind === 'filter-value') {
- router.push({
- query: {
- ...router.query,
- [`!${state.fieldPath}_${state.filterType}`]: JSON.stringify(state.filterValue),
- },
- })
- onClose()
- }
- }}
- gap="small"
- >
-
- {state.kind !== 'selecting-field' && (
-
- )}
-
- {(() => {
- switch (state.kind) {
- case 'selecting-field': {
- return 'Filter'
- }
- case 'filter-value': {
- return list.fields[state.fieldPath].label
- }
- }
- })()}
-
-
- {
- const fieldPath: string = (newVal as any).value
- const filterType = Object.keys(filtersByFieldThenType[fieldPath])[0]
- setState({
- kind: 'filter-value',
- fieldPath,
- filterType,
- filterValue:
- fieldsWithFilters[fieldPath].controller.filter.types[filterType].initialValue,
- })
- }}
- options={Object.keys(filtersByFieldThenType).map(fieldPath => ({
- label: fieldsWithFilters[fieldPath].label,
- value: fieldPath,
- }))}
- />
- )}
- {state.kind === 'filter-value' && (
-
- )
+ return {
+ fieldsWithFilters,
+ filtersByFieldThenType,
+ list
+ }
}
diff --git a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/FilterList.tsx b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/FilterList.tsx
index 4102d01b0a8..d089990073e 100644
--- a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/FilterList.tsx
+++ b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/FilterList.tsx
@@ -1,31 +1,29 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { Inline, jsx, Stack } from '@keystone-ui/core'
-import { Button } from '@keystone-ui/button'
-import { usePopover, PopoverDialog } from '@keystone-ui/popover'
-import { type FormEvent, Fragment, useState } from 'react'
-import { Pill } from '@keystone-ui/pill'
+import { useRouter } from 'next/router'
+import React, { type FormEvent, useState } from 'react'
+
+import { ButtonGroup, Button } from '@keystar/ui/button'
+import { Dialog, DialogTrigger } from '@keystar/ui/dialog'
+import { Flex } from '@keystar/ui/layout'
+import { Content } from '@keystar/ui/slots'
+import { Heading, Text } from '@keystar/ui/typography'
+
import { type FieldMeta, type ListMeta } from '../../../../types'
-import { useRouter } from '../../../../admin-ui/router'
+import { Tag } from './Tag'
import { type Filter } from './useFilters'
export function FilterList ({ filters, list }: { filters: Filter[], list: ListMeta }) {
return (
-
+
{filters.map(filter => {
const field = list.fields[filter.field]
- return
+
)
}
-function FilterPill ({ filter, field }: { filter: Filter, field: FieldMeta }) {
+function FilterTag ({ filter, field }: { filter: Filter, field: FieldMeta }) {
const router = useRouter()
- const { isOpen, setOpen, trigger, dialog, arrow } = usePopover({
- placement: 'bottom',
- modifiers: [{ name: 'offset', options: { offset: [0, 8] } }],
- })
// doing this because returning a string from Label will be VERY common
// but https://github.com/microsoft/TypeScript/issues/21699 isn't resolved yet
const Label = field.controller.filter!.Label as (props: {
@@ -33,83 +31,95 @@ function FilterPill ({ filter, field }: { filter: Filter, field: FieldMeta }) {
type: string
value: any
}) => JSX.Element
- return (
-
- setOpen(!isOpen)}
- weight="light"
- tone="passive"
- onRemove={() => {
- const { [`!${filter.field}_${filter.type}`]: _ignore, ...queryToKeep } = router.query
- router.push({ pathname: router.pathname, query: queryToKeep })
- }}
- >
- {field.label}{' '}
+ const onRemove = () => {
+ const { [`!${filter.field}_${filter.type}`]: _ignore, ...queryToKeep } = router.query
+ router.push({ pathname: router.pathname, query: queryToKeep })
+ }
+ const tagElement = (
+
+
+ {field.label}
-
-
- {isOpen && (
- {
- setOpen(false)
- }}
- field={field}
- filter={filter}
- />
- )}
-
-
+
+
+ )
+
+ // TODO: Special "empty" types need to be documented somewhere. Filters that
+ // have no editable value, basically `null` or `!null`. Which offers:
+ // * better DX — we can avoid weird nullable types and UIs that don't make sense
+ // * better UX — users don't have to jump through mental hoops, like "is not exactly" + submit empty field
+ if (filter.type === 'empty' || filter.type === 'not_empty') return tagElement
+
+ return (
+
+ {tagElement}
+ {onDismiss => (
+
)
}
-function EditDialog ({
+function FilterDialog ({
filter,
field,
- onClose,
+ onDismiss,
}: {
filter: Filter
field: FieldMeta
- onClose: () => void
+ onDismiss: () => void
}) {
- const Filter = field.controller.filter!.Filter
const router = useRouter()
const [value, setValue] = useState(filter.value)
+
+ const onSubmit = (event: FormEvent) => {
+ event.preventDefault()
+
+ if ((filter.type !== 'empty' && filter.type !== 'not_empty') && value == null) {
+ return
+ }
+
+ router.push({
+ query: {
+ ...router.query,
+ [`!${filter.field}_${filter.type}`]: JSON.stringify(value),
+ },
+ })
+ onDismiss()
+ }
+
+ const Filter = field.controller.filter!.Filter
+ const filterTypeLabel = field.controller.filter?.types[filter.type].label
+
return (
- {
- event.preventDefault()
- router.push({
- query: {
- ...router.query,
- [`!${filter.field}_${filter.type}`]: JSON.stringify(value),
- },
- })
- onClose()
- }}
- >
-
+
)
}
diff --git a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/Pagination.tsx b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/Pagination.tsx
new file mode 100644
index 00000000000..d21a53786cd
--- /dev/null
+++ b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/Pagination.tsx
@@ -0,0 +1,214 @@
+import { useRouter } from 'next/router'
+import React, { type Key, useEffect, useMemo } from 'react'
+
+import { ActionButton } from '@keystar/ui/button'
+import { Icon } from '@keystar/ui/icon'
+import { chevronLeftIcon } from '@keystar/ui/icon/icons/chevronLeftIcon'
+import { chevronRightIcon } from '@keystar/ui/icon/icons/chevronRightIcon'
+import { HStack } from '@keystar/ui/layout'
+import { Item, Picker } from '@keystar/ui/picker'
+import { Text } from '@keystar/ui/typography'
+
+type PaginationProps = {
+ pageSize: number
+ total: number
+ currentPage: number
+ singular: string
+ plural: string
+}
+
+type PageItem = {
+ label: string
+ id: number
+}
+
+const PAGE_SIZES = [10, 25, 50, 100]
+
+export function Pagination (props: PaginationProps) {
+ const { currentPage, total, pageSize, singular, plural } = props
+
+ const router = useRouter()
+ const { stats } = getPaginationStats({ singular, plural, currentPage, total, pageSize })
+
+ const nextPage = currentPage + 1
+ const prevPage = currentPage - 1
+ const minPage = 1
+
+ const limit = Math.ceil(total / pageSize)
+ const pageItems = useMemo(() => {
+ let result: PageItem[] = []
+ for (let page = minPage; page <= limit; page++) {
+ result.push({
+ id: page,
+ label: String(page),
+ })
+ }
+ return result
+ }, [limit])
+
+ useEffect(() => {
+ // Check if the current page is larger than
+ // the maximal page given the total and associated page size value.
+ // (This could happen due to a deletion event, in which case we want to reroute the user to a previous page).
+ if (currentPage > Math.ceil(total / pageSize)) {
+ router.push({
+ pathname: router.pathname,
+ query: {
+ ...router.query,
+ page: Math.ceil(total / pageSize),
+ },
+ })
+ }
+ }, [total, pageSize, currentPage, router])
+
+ // Don't render the pagination component if the pageSize is greater than the
+ // total number of items in the list.
+ // if (total <= pageSize) {
+ // return null
+ // }
+
+ const onChangePage = (page: Key) => {
+ router.push({
+ pathname: router.pathname,
+ query: {
+ ...router.query,
+ page: page.toString(),
+ },
+ })
+ }
+ const onChangePageSize = (pageSize: Key) => {
+ router.push({
+ pathname: router.pathname,
+ query: {
+ ...router.query,
+ pageSize: pageSize.toString(),
+ },
+ })
+ }
+
+ return (
+
+ {/*
+ left-side
+ mobile: counts
+ desktop^: items per page (picker), counts
+ */}
+
+
+
+ {plural} per page:
+
+ ({ label: String(n), id: n }))}
+ onSelectionChange={onChangePageSize}
+ selectedKey={pageSize}
+ // disable sizes greater than the total, allowing the next page to be the last
+ disabledKeys={PAGE_SIZES.filter(n => {
+ return n > snapValueToNextAvailable(total)
+ })}
+ width="scale.1000"
+ >
+ {item => (
+ - {item.label}
+ )}
+
+
+
+ {stats}
+
+
+
+ {/*
+ right-side
+ mobile: next/prev
+ desktop^: current page (picker), next/prev
+ */}
+
+
+
+ {item => (
+ - {item.label}
+ )}
+
+ of {limit} pages
+
+
+ onChangePage(prevPage)}
+ // prominence="low"
+ >
+
+ limit}
+ onPress={() => onChangePage(nextPage)}
+ // prominence="low"
+ >
+
+
+
+
+ )
+}
+
+export function usePaginationParams ({ defaultPageSize }: { defaultPageSize: number }) {
+ const { query } = useRouter()
+ const currentPage = Math.max(
+ typeof query.page === 'string' && !Number.isNaN(parseInt(query.page)) ? Number(query.page) : 1,
+ 1
+ )
+ const pageSize = snapValueToClosest(typeof query.pageSize === 'string' && !Number.isNaN(parseInt(query.pageSize))
+ ? parseInt(query.pageSize)
+ : defaultPageSize)
+
+ return { currentPage, pageSize }
+}
+
+function getPaginationStats ({ singular, plural, pageSize, currentPage, total }: PaginationProps) {
+ let stats = ''
+ if (total > pageSize) {
+ const start = pageSize * (currentPage - 1) + 1
+ const end = Math.min(start + pageSize - 1, total)
+ stats = `${start} - ${end} of ${total} ${plural}`
+ } else {
+ if (total > 1 && plural) {
+ stats = `${total} ${plural}`
+ } else if (total === 1 && singular) {
+ stats = `${total} ${singular}`
+ }
+ }
+ return { stats }
+}
+
+function snapValueToClosest (input: number, range = PAGE_SIZES) {
+ return range.reduce((prev, curr) => Math.abs(curr - input) < Math.abs(prev - input) ? curr : prev)
+}
+function snapValueToNextAvailable (input: number, range = PAGE_SIZES) {
+ return range.find(value => input <= value) ?? range[range.length - 1]
+}
diff --git a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/SortSelection.tsx b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/SortSelection.tsx
index f51359dc053..c3f00443b69 100644
--- a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/SortSelection.tsx
+++ b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/SortSelection.tsx
@@ -1,16 +1,36 @@
/** @jsxRuntime classic */
/** @jsx jsx */
+
+import { useRouter } from 'next/router'
+import { Fragment } from 'react'
+
import { Button } from '@keystone-ui/button'
import { Divider, Heading, jsx, Stack } from '@keystone-ui/core'
import { ChevronDownIcon } from '@keystone-ui/icons/icons/ChevronDownIcon'
-import { Options } from '@keystone-ui/options'
+import { Options, OptionPrimitive, CheckMark } from '@keystone-ui/options'
import { PopoverDialog, usePopover } from '@keystone-ui/popover'
-import { Fragment } from 'react'
+
import { type ListMeta } from '../../../../types'
-import { useRouter } from '../../../../admin-ui/router'
-import { fieldSelectionOptionsComponents } from './FieldSelection'
import { useSort } from './useSort'
+const Option: typeof OptionPrimitive = props => {
+ return (
+
+ {props.children}
+
+ )
+}
+
+// TODO: return type required by pnpm :(
+export const fieldSelectionOptionsComponents: Parameters[0]['components'] = {
+ Option,
+}
+
export function SortSelection ({
list,
orderableFields,
diff --git a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/Tag.tsx b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/Tag.tsx
new file mode 100644
index 00000000000..dbe9908221a
--- /dev/null
+++ b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/Tag.tsx
@@ -0,0 +1,74 @@
+import React, { type ReactNode, useId } from 'react'
+
+import { ActionButton } from '@keystar/ui/button'
+import { Icon } from '@keystar/ui/icon'
+import { xIcon } from '@keystar/ui/icon/icons/xIcon'
+import { SlotProvider } from '@keystar/ui/slots'
+import { css, tokenSchema } from '@keystar/ui/style'
+import { composeId } from '@keystar/ui/utils'
+
+type TagProps = {
+ children: ReactNode
+ onRemove?: () => void
+}
+
+// TODO: move to @keystar/ui and implement properly
+export function Tag (props: TagProps) {
+ const { children, onRemove } = props
+ const rootId = useId()
+ const textId = composeId(rootId, 'label')
+ const removeId = composeId(rootId, 'remove')
+
+ return (
+ {
+ if (!onRemove) {
+ return
+ }
+
+ if (e.key === 'Backspace' || e.key === 'Delete') {
+ onRemove()
+ }
+ }}
+ UNSAFE_className={css({
+ borderRadius: tokenSchema.size.radius.full,
+ height: tokenSchema.size.element.small,
+ paddingInlineStart: tokenSchema.size.space.small,
+ paddingInlineEnd: 0,
+ })}
+ >
+
+ {children}
+
+
+ {onRemove && (
+ {
+ e.preventDefault()
+ e.stopPropagation()
+ onRemove()
+ }}
+ >
+
+ )
+}
diff --git a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/index.tsx b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/index.tsx
index dd22c9f93da..cf9400d806f 100644
--- a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/index.tsx
+++ b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/index.tsx
@@ -1,46 +1,61 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-
-import { Fragment, type HTMLAttributes, type ReactNode, useEffect, useMemo, useState } from 'react'
-
-import { Button } from '@keystone-ui/button'
-import { Box, Center, Heading, jsx, Stack, useTheme, VisuallyHidden } from '@keystone-ui/core'
-import { CheckboxControl, TextInput } from '@keystone-ui/fields'
-import { ArrowRightCircleIcon } from '@keystone-ui/icons/icons/ArrowRightCircleIcon'
-import { LoadingDots } from '@keystone-ui/loading'
-import { AlertDialog } from '@keystone-ui/modals'
-import { useToasts } from '@keystone-ui/toast'
+import React, { type Key, Fragment, useEffect, useMemo, useState } from 'react'
+import { useRouter } from 'next/router'
+
+import { ActionBar, ActionBarContainer, Item } from '@keystar/ui/action-bar'
+import { ActionButton } from '@keystar/ui/button'
+import { AlertDialog, DialogContainer } from '@keystar/ui/dialog'
+import { Icon } from '@keystar/ui/icon'
+import { textSelectIcon } from '@keystar/ui/icon/icons/textSelectIcon'
+import { searchXIcon } from '@keystar/ui/icon/icons/searchXIcon'
+import { trash2Icon } from '@keystar/ui/icon/icons/trash2Icon'
+import { undo2Icon } from '@keystar/ui/icon/icons/undo2Icon'
+import { HStack, VStack } from '@keystar/ui/layout'
+import { ProgressCircle } from '@keystar/ui/progress'
+import { SearchField } from '@keystar/ui/search-field'
+import { css, tokenSchema } from '@keystar/ui/style'
+import {
+ type SortDescriptor,
+ TableView,
+ TableBody,
+ TableHeader,
+ Column,
+ Cell,
+ Row,
+} from '@keystar/ui/table'
+import { toastQueue } from '@keystar/ui/toast'
+import { TooltipTrigger, Tooltip } from '@keystar/ui/tooltip'
+import { Heading, Text } from '@keystar/ui/typography'
-import { SearchIcon } from '@keystone-ui/icons/icons/SearchIcon'
-import { type ListMeta } from '../../../../types'
import {
- getRootGraphQLFieldsFromFieldController,
type DataGetter,
type DeepNullable,
makeDataGetter,
} from '../../../../admin-ui/utils'
-import { gql, type TypedDocumentNode, useMutation, useQuery } from '../../../../admin-ui/apollo'
-import { CellLink } from '../../../../admin-ui/components'
-import { PageContainer, HEADER_HEIGHT } from '../../../../admin-ui/components/PageContainer'
-import { Pagination, PaginationLabel, usePaginationParams } from '../../../../admin-ui/components/Pagination'
import {
- useKeystone,
- useList
+ gql,
+ type TypedDocumentNode,
+ useMutation,
+ useQuery,
+} from '../../../../admin-ui/apollo'
+import { PageContainer } from '../../../../admin-ui/components/PageContainer'
+import {
+ useList,
+ useKeystone
} from '../../../../admin-ui/context'
+import { EmptyState } from '../../../../admin-ui/components/EmptyState'
import { GraphQLErrorNotice } from '../../../../admin-ui/components/GraphQLErrorNotice'
-import { Link, useRouter } from '../../../../admin-ui/router'
-import { useSearchFilter } from '../../../../fields/types/relationship/views/RelationshipSelect'
import { CreateButtonLink } from '../../../../admin-ui/components/CreateButtonLink'
import { FieldSelection } from './FieldSelection'
import { FilterAdd } from './FilterAdd'
import { FilterList } from './FilterList'
-import { SortSelection } from './SortSelection'
+import { Pagination, usePaginationParams } from './Pagination'
import { useFilters } from './useFilters'
+import { useSearchFilter } from '../../../../fields/types/relationship/views/useFilter'
import { useSelectedFields } from './useSelectedFields'
import { useSort } from './useSort'
type ListPageProps = { listKey: string }
-
+type SelectedKeys = 'all' | Set
type FetchedFieldMeta = {
path: string
isOrderable: boolean
@@ -84,7 +99,7 @@ const listMetaGraphqlQuery: TypedDocumentNode<
const storeableQueries = ['sortBy', 'fields']
-function useQueryParamsFromLocalStorage (listKey: string) {
+function useQueryParamsFromLocalStorage(listKey: string) {
const router = useRouter()
const localStorageKey = `keystone.list.${listKey}.list.page.info`
const resetToDefaults = () => {
@@ -92,27 +107,25 @@ function useQueryParamsFromLocalStorage (listKey: string) {
router.replace({ pathname: router.pathname })
}
- // GET QUERY FROM CACHE IF CONDITIONS ARE RIGHT
- // MERGE QUERY PARAMS FROM CACHE WITH QUERY PARAMS FROM ROUTER
- useEffect(
- () => {
- const hasSomeQueryParamsWhichAreAboutListPage = Object.keys(router.query).some(x => {
- return x.startsWith('!') || storeableQueries.includes(x)
- })
-
- if (!hasSomeQueryParamsWhichAreAboutListPage && router.isReady) {
- const queryParamsFromLocalStorage = localStorage.getItem(localStorageKey)
- let parsed
- try {
- parsed = JSON.parse(queryParamsFromLocalStorage!)
- } catch (err) {}
- if (parsed) {
- router.replace({ query: { ...router.query, ...parsed } })
- }
+ useEffect(() => {
+ const hasSomeQueryParamsWhichAreAboutListPage = Object.keys(
+ router.query
+ ).some(x => {
+ return x.startsWith('!') || storeableQueries.includes(x)
+ })
+
+ if (!hasSomeQueryParamsWhichAreAboutListPage && router.isReady) {
+ const queryParamsFromLocalStorage = localStorage.getItem(localStorageKey)
+ let parsed
+ try {
+ parsed = JSON.parse(queryParamsFromLocalStorage!)
+ } catch (err) {}
+ if (parsed) {
+ router.replace({ query: { ...router.query, ...parsed } })
}
- },
- [localStorageKey, router.isReady]
- )
+ }
+ }, [localStorageKey, router.isReady])
+
useEffect(() => {
const queryParamsToSerialize: Record = {}
Object.keys(router.query).forEach(key => {
@@ -121,7 +134,10 @@ function useQueryParamsFromLocalStorage (listKey: string) {
}
})
if (Object.keys(queryParamsToSerialize).length) {
- localStorage.setItem(localStorageKey, JSON.stringify(queryParamsToSerialize))
+ localStorage.setItem(
+ localStorageKey,
+ JSON.stringify(queryParamsToSerialize)
+ )
} else {
localStorage.removeItem(localStorageKey)
}
@@ -130,41 +146,49 @@ function useQueryParamsFromLocalStorage (listKey: string) {
return { resetToDefaults }
}
-export const getListPage = (props: ListPageProps) => () => = {}
- const orderableFields = new Set()
- const filterableFields = new Set()
- for (const field of metaQuery.data?.keystone.adminMeta.list?.fields || []) {
- listViewFieldModesByField[field.path] = field.listView.fieldMode
- if (field.isOrderable) {
- orderableFields.add(field.path)
- }
- if (field.isFilterable) {
- filterableFields.add(field.path)
+
+ const { listViewFieldModesByField, filterableFields, orderableFields } =
+ useMemo(() => {
+ const listViewFieldModesByField: Record = {}
+ const orderableFields = new Set()
+ const filterableFields = new Set()
+ for (const field of metaQuery.data?.keystone.adminMeta.list?.fields ||
+ []) {
+ listViewFieldModesByField[field.path] = field.listView.fieldMode
+ if (field.isOrderable) {
+ orderableFields.add(field.path)
+ }
+ if (field.isFilterable) {
+ filterableFields.add(field.path)
+ }
}
- }
- return { listViewFieldModesByField, orderableFields, filterableFields }
- }, [metaQuery.data?.keystone.adminMeta.list?.fields])
+ return { listViewFieldModesByField, orderableFields, filterableFields }
+ }, [metaQuery.data?.keystone.adminMeta.list?.fields])
const sort = useSort(list, orderableFields)
const filters = useFilters(list, filterableFields)
-
- const searchLabels = list.initialSearchFields.map(key => list.fields[key].label)
const searchParam = typeof query.search === 'string' ? query.search : ''
- const [searchString, updateSearchString] = useState(searchParam)
+ const [searchString, setSearchString] = useState(searchParam)
const search = useSearchFilter(searchParam, list, list.initialSearchFields, keystone.adminMeta.lists)
+ useEffect(() => {
+ if (searchParam !== searchString) {
+ setSearchString(searchParam)
+ }
+ }, [searchParam])
const updateSearch = (value: string) => {
const { search, ...queries } = query
@@ -189,24 +213,21 @@ function ListPage ({ listKey }: ListPageProps) {
// TODO: FIXME: this is bad
return gql`
query (
- $where: ${list.gqlNames.whereInputName},
+ $where: ${list.graphql.names.whereInputName},
$take: Int!,
$skip: Int!,
- $orderBy: [${list.gqlNames.listOrderName}!]
+ $orderBy: [${list.graphql.names.listOrderName}!]
) {
- items: ${list.gqlNames.listQueryName}(
+ items: ${list.graphql.names.listQueryName}(
where: $where,
take: $take,
skip: $skip,
orderBy: $orderBy
) {
- ${
- // TODO: maybe namespace all the fields instead of doing this
- selectedFields.has('id') ? '' : 'id'
- }
+ ${selectedFields.has('id') ? '' : 'id'}
${selectedGqlFields}
}
- count: ${list.gqlNames.listQueryCountName}(where: $where)
+ count: ${list.graphql.names.listQueryCountName}(where: $where)
}
`
}, [list, selectedFields]),
@@ -218,7 +239,9 @@ function ListPage ({ listKey }: ListPageProps) {
where: { ...filters.where, ...search },
take: pageSize,
skip: (currentPage - 1) * pageSize,
- orderBy: sort ? [{ [sort.field]: sort.direction.toLowerCase() }] : undefined,
+ orderBy: sort
+ ? [{ [sort.field]: sort.direction.toLowerCase() }]
+ : undefined,
},
}
)
@@ -230,584 +253,468 @@ function ListPage ({ listKey }: ListPageProps) {
const { data, error } = dataState
const dataGetter = makeDataGetter<
- DeepNullable<{ count: number, items: { id: string, [key: string]: any }[] }>
+ DeepNullable<{ count: number; items: { id: string; [key: string]: any }[] }>
>(data, error?.graphQLErrors)
- const [selectedItemsState, setSelectedItems] = useState(() => ({
- itemsFromServer: undefined as any,
- selectedItems: new Set() as ReadonlySet,
- }))
-
- // this removes the selected items which no longer exist when the data changes
- // because someone goes to another page, changes filters or etc.
- if (data && data.items && selectedItemsState.itemsFromServer !== data.items) {
- const newSelectedItems = new Set()
- data.items.forEach((item: any) => {
- if (selectedItemsState.selectedItems.has(item.id)) {
- newSelectedItems.add(item.id)
- }
- })
- setSelectedItems({ itemsFromServer: data.items, selectedItems: newSelectedItems })
- }
-
- const theme = useTheme()
- const showCreate = !(metaQuery.data?.keystone.adminMeta.list?.hideCreate ?? true) || null
+ const allowCreate = !(
+ metaQuery.data?.keystone.adminMeta.list?.hideCreate ?? true
+ )
+ const allowDelete = !(
+ metaQuery.data?.keystone.adminMeta.list?.hideDelete ?? true
+ )
+ const isConstrained = Boolean(filters.filters.length || query.search)
+ const isEmpty = Boolean(data && data.count === 0 && !isConstrained)
return (
-
- {list.description !== null && (
+
+ {/* FIXME: this is really weird; not sure where it should live. */}
+ {/* {list.description !== null && (
{list.description}
- )}
-
-
- {showCreate &&
+ updateSearch('')}
+ onSubmit={updateSearch}
+ onChange={setSearchString}
+ placeholder="Search…"
+ value={searchString}
+ width="alias.singleLineWidth"
+ flexGrow={{ mobile: 1, tablet: 0 }}
+ />
+
+
+
+ Reset to defaults
+
)}
-
- {data.count ? (
-
-
- {(() => {
- const selectedItems = selectedItemsState.selectedItems
- const selectedItemsCount = selectedItems.size
- if (selectedItemsCount) {
- return (
-
-
- Selected {selectedItemsCount} of {data.items.length}
-
- {!(metaQuery.data?.keystone.adminMeta.list?.hideDelete ?? true) && (
-
- )
- }
- return (
-
-
- )
- })()}
-
- {
- setSelectedItems({
- itemsFromServer: selectedItemsState.itemsFromServer,
- selectedItems,
- })
- }}
- orderableFields={orderableFields}
- />
-
- ) : (
- No {list.plural} found.
- )}
-
+
+
+ {filters.filters.length ? (
+
-
+
+
)}
)
}
-function ListPageHeader ({ listKey }: { listKey: string }) {
- const list = useList(listKey)
- return (
-
-
- {list.label}
-
-
- )
-}
-
-function ResultsSummaryContainer ({ children }: { children: ReactNode }) {
- return
- {children}
-
-}
+const LIST_PAGE_TITLE_ID = 'keystone-list-page-title'
-function SortDirectionArrow ({ direction }: { direction: 'ASC' | 'DESC' }) {
- const size = '0.25em'
- return (
-
- )
-}
-
-function DeleteManyButton ({
- selectedItems,
- list,
- refetch,
+function ListPageHeader ({
+ listKey,
+ showCreate,
}: {
- selectedItems: ReadonlySet
- list: ListMeta
- refetch: () => void
+ listKey: string
+ showCreate?: boolean
}) {
- const [deleteItems, deleteItemsState] = useMutation(
- useMemo(
- () =>
- gql`
- mutation($where: [${list.gqlNames.whereUniqueInputName}!]!) {
- ${list.gqlNames.deleteManyMutationName}(where: $where) {
- id
- ${list.labelField}
- }
- }
-`,
- [list]
- ),
- { errorPolicy: 'all' }
- )
- const [isOpen, setIsOpen] = useState(false)
- const toasts = useToasts()
+ const list = useList(listKey)
return (
-
- {
- const { data, errors } = await deleteItems({
- variables: { where: [...selectedItems].map(id => ({ id })) },
- })
- /*
- Data returns an array where successful deletions are item objects
- and unsuccessful deletions are null values.
- Run a reduce to count success and failure as well as
- to generate the success message to be passed to the success toast
- */
- const { successfulItems, unsuccessfulItems, successMessage } = data[
- list.gqlNames.deleteManyMutationName
- ].reduce(
- (
- acc: {
- successfulItems: number
- unsuccessfulItems: number
- successMessage: string
- },
- curr: any
- ) => {
- if (curr) {
- acc.successfulItems++
- acc.successMessage =
- acc.successMessage === ''
- ? (acc.successMessage += curr[list.labelField])
- : (acc.successMessage += `, ${curr[list.labelField]}`)
- } else {
- acc.unsuccessfulItems++
- }
- return acc
- },
- { successfulItems: 0, unsuccessfulItems: 0, successMessage: '' } as {
- successfulItems: number
- unsuccessfulItems: number
- successMessage: string
- }
- )
-
- // If there are errors
- if (errors?.length) {
- // Find out how many items failed to delete.
- // Reduce error messages down to unique instances, and append to the toast as a message.
- toasts.addToast({
- tone: 'negative',
- title: `Failed to delete ${unsuccessfulItems} of ${
- data[list.gqlNames.deleteManyMutationName].length
- } ${list.plural}`,
- message: errors
- .reduce((acc, error) => {
- if (acc.indexOf(error.message) < 0) {
- acc.push(error.message)
- }
- return acc
- }, [] as string[])
- .join('\n'),
- })
- }
-
- if (successfulItems) {
- toasts.addToast({
- tone: 'positive',
- title: `Deleted ${successfulItems} of ${
- data[list.gqlNames.deleteManyMutationName].length
- } ${list.plural} successfully`,
- message: successMessage,
- })
- }
-
- return refetch()
- },
- },
- cancel: {
- label: 'Cancel',
- action: () => {
- setIsOpen(false)
- },
- },
- }}
- >
- Are you sure you want to delete {selectedItems.size}{' '}
- {selectedItems.size === 1 ? list.singular : list.plural}?
-
+
+ {list.label}
+
+ {showCreate && (
+ {`New ${list.singular.toLocaleLowerCase()}`}
+ )}
)
}
-function ListTable ({
- selectedFields,
- listKey,
- itemsGetter,
+function ListTable({
+ allowDelete,
count,
- sort,
currentPage,
- pageSize,
- selectedItems,
- onSelectedItemsChange,
+ isConstrained,
+ itemsGetter,
+ listKey,
orderableFields,
+ pageSize,
+ refetch,
+ selectedFields,
}: {
- selectedFields: ReturnType
- listKey: string
- itemsGetter: DataGetter>
+ allowDelete: boolean
count: number
- sort: { field: string, direction: 'ASC' | 'DESC' } | null
currentPage: number
- pageSize: number
- selectedItems: ReadonlySet
- onSelectedItemsChange(selectedItems: ReadonlySet): void
+ isConstrained: boolean
+ itemsGetter: DataGetter>
+ listKey: string
orderableFields: Set
+ pageSize: number
+ refetch: () => void
+ selectedFields: ReturnType
}) {
const list = useList(listKey)
- const { query } = useRouter()
- const shouldShowLinkIcon = selectedFields.keys().some((k, i) => !list.fields[k].views.Cell.supportsLinkTo && i === 0)
+ const router = useRouter()
+ const [selectedKeys, setSelectedKeys] = useState(
+ () => new Set([])
+ )
+ const onSortChange = (sortDescriptor: SortDescriptor) => {
+ const sortBy =
+ sortDescriptor.direction === 'ascending'
+ ? `-${sortDescriptor.column}`
+ : sortDescriptor.column
+ router.push({ query: { ...router.query, sortBy } })
+ }
+ const items = itemsGetter.data ? getNonNullItems(itemsGetter.data) : []
+ const selectionMode = allowDelete ? 'multiple' : 'none'
+ const selectedItemCount = selectedKeys === 'all' ? 'all' : selectedKeys.size
+ const [idsForDeletion, setIdsForDeletion] = useState | null>(null)
+ const columns = [...selectedFields].map(path => {
+ const field = list.fields[path]
+ return {
+ id: path,
+ label: field.label,
+ allowsSorting:
+ !isConstrained && !items.length ? false : orderableFields.has(path),
+ }
+ })
+
return (
-
-
- {list.label} list
-
-
-
-
-
-
- {shouldShowLinkIcon && {label}
- return (
-
-
- {label}
- {sort?.field === path &&
)
+ }
+ flex
+ >
+
+ {({ label, id, ...options }) => (
+
+ {label}
+
+ )}
+
+
+ {row => {
+ return (
+
+ {key => {
+ const field = list.fields[key]
+ const CellContent = field.views.Cell
+ return (
+
+ {CellContent ? (
+ {row[key]?.toString()}
+ )}
+ |
+ )
+ }}
+
+ )
+ }}
+
+
+
+ setSelectedKeys(new Set())}
+ UNSAFE_className={css({
+ // TODO: update in @keystar/ui package
+ // make `tokenSchema.size.shadow.regular` token "0 1px 4px"
+ 'div:has([data-focus-scope-start])': {
+ backgroundColor: tokenSchema.color.background.canvas,
+ border: `${tokenSchema.size.border.regular} solid ${tokenSchema.color.border.emphasis}`,
+ borderRadius: tokenSchema.size.radius.regular,
+ boxShadow: `0 1px 4px ${tokenSchema.color.shadow.regular}`,
+ },
})}
-
-
- {(itemsGetter.data ?? []).map((_, index) => {
- const itemGetter = itemsGetter.get(index)
- if (itemGetter.data === null || itemGetter.data.id === null) {
- if (itemGetter.errors) {
- return (
-
- {itemGetter.errors[0].message}
-
- )
- }
- return null
- }
- const itemId = itemGetter.data.id
- return (
-
-
-
-
- {shouldShowLinkIcon && (
-
-
-
- )}
- {[...selectedFields].map((path, i) => {
- const field = list.fields[path]
- const { Cell } = list.fields[path].views
- const itemForField: Record = {}
- for (const graphqlField of getRootGraphQLFieldsFromFieldController(field.controller)) {
- const fieldGetter = itemGetter.get(graphqlField)
- if (fieldGetter.errors) {
- const errorMessage = fieldGetter.errors[0].message
- return (
-
- {i === 0 && Cell.supportsLinkTo ? (
-
- {errorMessage}
-
- ) : (
- errorMessage
- )}
-
- )
+ onAction={key => {
+ switch (key) {
+ case 'delete':
+ if (selectedKeys === 'all') {
+ const ids = []
+ for (const item of items) {
+ if (item.id != null) {
+ ids.push(item.id)
}
- itemForField[graphqlField] = fieldGetter.data
}
- return (
-
- |
-
- )
- })}
-
- )
- })}
-
-
-
+ setIdsForDeletion(new Set(ids))
+ } else {
+ setIdsForDeletion(selectedKeys)
+ }
+ break
+ default:
+ break
+ }
+ }}
+ >
+ -
+
Delete
+
+
+
+
+ {count > 0 && (
+ {
+ setSelectedKeys(new Set())
+ setIdsForDeletion(null)
+ }}
+ >
+ {idsForDeletion && (
+
+
)
}
-function TableContainer ({ children }: { children: ReactNode }) {
- return (
-
- {children}
-
- )
+function parseSortQuery(
+ queryString?: string | string[]
+): SortDescriptor | undefined {
+ if (!queryString) {
+ return undefined
+ }
+
+ if (Array.isArray(queryString)) {
+ // TODO: handle multiple sort queries?
+ return parseSortQuery(queryString[0])
+ }
+
+ const column = queryString.startsWith('-')
+ ? queryString.slice(1)
+ : queryString
+ const direction = queryString.startsWith('-') ? 'ascending' : 'descending'
+
+ return { column, direction }
}
-function TableHeaderRow ({ children }: { children: ReactNode }) {
- return (
-
- {children}
-
- )
+function parseInitialSort(
+ sort?: { field: string; direction: 'ASC' | 'DESC' } | null
+): SortDescriptor | undefined {
+ if (!sort) {
+ return undefined
+ }
+
+ return {
+ column: sort.field,
+ direction: sort.direction === 'ASC' ? 'ascending' : 'descending',
+ }
}
-function TableHeaderCell (props: HTMLAttributes) {
- const { colors, spacing, typography } = useTheme()
- return (
-
+ listKey: string
+ refetch: () => void
+}) {
+ const { items, listKey, refetch } = props
+ const list = useList(listKey)
+
+ const [deleteItems] = useMutation(
+ useMemo(
+ () =>
+ gql`
+ mutation($where: [${list.graphql.names.whereUniqueInputName}!]!) {
+ ${list.graphql.names.deleteManyMutationName}(where: $where) {
+ id
+ ${list.labelField}
+ }
+ }
+`,
+ [list]
+ ),
+ { errorPolicy: 'all' }
)
-}
-function TableBodyCell (props: HTMLAttributes) {
- const { colors, typography } = useTheme()
+ const onDelete = async () => {
+ const { data, errors } = await deleteItems({
+ variables: { where: [...items].map(id => ({ id })) },
+ })
+ /*
+ Data returns an array where successful deletions are item objects
+ and unsuccessful deletions are null values.
+ Run a reduce to count success and failure as well as
+ to generate the success message to be passed to the success toast
+ */
+ const { successfulItems, unsuccessfulItems } = data[
+ list.graphql.names.deleteManyMutationName
+ ].reduce(
+ (
+ acc: {
+ successfulItems: number
+ unsuccessfulItems: number
+ successMessage: string
+ },
+ curr: any
+ ) => {
+ if (curr) {
+ acc.successfulItems++
+ acc.successMessage =
+ acc.successMessage === ''
+ ? (acc.successMessage += curr[list.labelField])
+ : (acc.successMessage += `, ${curr[list.labelField]}`)
+ } else {
+ acc.unsuccessfulItems++
+ }
+ return acc
+ },
+ { successfulItems: 0, unsuccessfulItems: 0, successMessage: '' } as {
+ successfulItems: number
+ unsuccessfulItems: number
+ successMessage: string
+ }
+ )
+
+ // if there are errors
+ if (errors?.length) {
+ // find out how many items failed to delete.
+ // reduce error messages down to unique instances, and append to the toast as a message.
+ toastQueue.critical(
+ `Unable to delete ${unsuccessfulItems} item${
+ unsuccessfulItems === 1 ? '' : 's'
+ }.`,
+ {
+ timeout: 5000,
+ }
+ )
+ // toasts.addToast({
+ // tone: 'negative',
+ // title: `Failed to delete ${unsuccessfulItems} of ${
+ // data[list.graphql.names.deleteManyMutationName].length
+ // } ${list.plural}`,
+ // message: errors
+ // .reduce((acc, error) => {
+ // if (acc.indexOf(error.message) < 0) {
+ // acc.push(error.message)
+ // }
+ // return acc
+ // }, [] as string[])
+ // .join('\n'),
+ // })
+ }
+
+ if (successfulItems) {
+ toastQueue.neutral(
+ `Deleted ${successfulItems} item${successfulItems === 1 ? '' : 's'}.`,
+ {
+ timeout: 5000,
+ }
+ )
+ // toasts.addToast({
+ // tone: 'positive',
+ // title: `Deleted ${successfulItems} of ${
+ // data[list.graphql.names.deleteManyMutationName].length
+ // } ${list.plural} successfully`,
+ // message: successMessage,
+ // })
+ }
+
+ return refetch()
+ }
+
return (
-
+ Are you sure? This will permanently delete {items.size} item
+ {items.size === 1 ? '' : 's'}.
+
)
}
+
+function getNonNullItems(arr: T[]) {
+ return arr.filter(item => item != null) as NonNullable[]
+}
diff --git a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/useFilters.tsx b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/useFilters.tsx
index 06a080a1ab2..a3afda562ca 100644
--- a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/useFilters.tsx
+++ b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/useFilters.tsx
@@ -1,6 +1,7 @@
+import { useRouter } from 'next/router'
import { useMemo } from 'react'
+
import { type JSONValue, type ListMeta } from '../../../../types'
-import { useRouter } from '../../../../admin-ui/router'
export type Filter = { field: string, type: string, value: JSONValue }
diff --git a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/useSelectedFields.tsx b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/useSelectedFields.tsx
index 00bc8525faa..b6ccfa45b23 100644
--- a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/useSelectedFields.tsx
+++ b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/useSelectedFields.tsx
@@ -1,6 +1,7 @@
+import { useRouter } from 'next/router'
import { useMemo } from 'react'
+
import { type ListMeta } from '../../../../types'
-import { useRouter } from '../../../../admin-ui/router'
export function useSelectedFields (
list: ListMeta,
diff --git a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/useSort.tsx b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/useSort.tsx
index bf4eb71cb55..cdc01222fca 100644
--- a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/useSort.tsx
+++ b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/useSort.tsx
@@ -1,6 +1,7 @@
+import { useRouter } from 'next/router'
import { useMemo } from 'react'
+
import { type ListMeta } from '../../../../types'
-import { useRouter } from '../../../../admin-ui/router'
export function useSort (list: ListMeta, orderableFields: Set) {
const { query } = useRouter()
diff --git a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/NoAccessPage/index.tsx b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/NoAccessPage/index.tsx
index c5dee73f143..fb8f7ff73b3 100644
--- a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/NoAccessPage/index.tsx
+++ b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/NoAccessPage/index.tsx
@@ -1,23 +1,20 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
+import React from 'react'
+import { Icon } from '@keystar/ui/icon'
+import { shieldAlertIcon } from '@keystar/ui/icon/icons/shieldAlertIcon'
+import { Heading, Text } from '@keystar/ui/typography'
-import { jsx, Stack } from '@keystone-ui/core'
-import { AlertTriangleIcon } from '@keystone-ui/icons/icons/AlertTriangleIcon'
-import { SignoutButton } from '../../../../admin-ui/components/SignoutButton'
import { ErrorContainer } from '../../../../admin-ui/components/Errors'
type NoAccessPage = { sessionsEnabled: boolean }
export const getNoAccessPage = (props: NoAccessPage) => () =>
-
-
+ No access
+ Unable to access to this page. You may need to request access from your system administrator, or sign in with a different account.
)
}
diff --git a/packages/core/src/admin-ui/admin-meta-graphql.ts b/packages/core/src/admin-ui/admin-meta-graphql.ts
index fb436a77d90..fcce811abf9 100644
--- a/packages/core/src/admin-ui/admin-meta-graphql.ts
+++ b/packages/core/src/admin-ui/admin-meta-graphql.ts
@@ -1,7 +1,11 @@
import {
type GraphQLNames,
- type JSONValue,
} from '../types/utils'
+import {
+ type ListMeta,
+ type FieldMeta,
+ type FieldGroupMeta,
+} from '../types'
import { gql } from './apollo'
export const staticAdminMetaQuery = gql`
@@ -13,23 +17,40 @@ export const staticAdminMetaQuery = gql`
lists {
__typename
key
- itemQueryName
- listQueryName
path
+ description
+
label
+ labelField
singular
plural
- description
- initialColumns
- initialSearchFields
- initialSort {
+
+ fields {
__typename
- field
- direction
+ path
+ label
+ description
+ fieldMeta
+ #isOrderable
+ #isFilterable
+
+ viewsIndex
+ customViewsIndex
+
+ search
+ isNonNull
+ #createView {
+ # fieldMode
+ #}
+ itemView {
+ fieldMode
+ # fieldPosition
+ }
+ #listView {
+ # fieldMode
+ #}
}
- pageSize
- labelField
- isSingleton
+
groups {
__typename
label
@@ -66,67 +87,45 @@ export const staticAdminMetaQuery = gql`
deleteManyMutationName
}
}
- fields {
+
+ pageSize
+ initialColumns
+ initialSearchFields
+ initialSort {
__typename
- path
- label
- description
- fieldMeta
- viewsIndex
- customViewsIndex
- search
- isNonNull
- itemView {
- fieldMode
- }
+ field
+ direction
}
+ isSingleton
+
+ #hideNavigation
+ #hideCreate
+ #hideDelete
}
}
}
}
`
+// TODO: FIXME: should use DeepNullable
export type StaticAdminMetaQuery = {
keystone: {
__typename: 'KeystoneMeta'
adminMeta: {
__typename: 'KeystoneAdminMeta'
- lists: Array<{
+ lists: (ListMeta & {
__typename: 'KeystoneAdminUIListMeta'
- key: string
- path: string
- description: string | null
-
- label: string
- labelField: string
- singular: string
- plural: string
- fields: Array<{
+ fields: (Omit & {
__typename: 'KeystoneAdminUIFieldMeta'
- path: string
- label: string
- description: string | null
- fieldMeta: JSONValue | null
- viewsIndex: number
- customViewsIndex: number | null
- search: QueryMode | null
- isNonNull: ('read' | 'create' | 'update')[]
- itemView: {
- __typename: 'KeystoneAdminUIFieldMetaItemView'
- fieldPosition: KeystoneAdminUIFieldMetaItemViewFieldPosition | null
- fieldMode: KeystoneAdminUIFieldMetaItemViewFieldMode | null
- } | null
- }>
- groups: Array<{
+ isNonNull: FieldMeta['graphql']['isNonNull'] // TODO: FIXME: flattened?
+ })[]
+ groups: (FieldGroupMeta & {
__typename: 'KeystoneAdminUIFieldGroupMeta'
- label: string
- description: string | null
- fields: Array<{
+ fields: (FieldMeta & {
__typename: 'KeystoneAdminUIFieldMeta'
- path: string
- }>
- }>
+ })[]
+ })[]
graphql: {
names: GraphQLNames
}
@@ -134,25 +133,10 @@ export type StaticAdminMetaQuery = {
pageSize: number
initialColumns: Array
initialSearchFields: Array
- initialSort: {
+ initialSort: ({
__typename: 'KeystoneAdminUISort'
- field: string
- direction: KeystoneAdminUISortDirection
- } | null
- isSingleton: boolean
-
- // TODO: probably remove this
- itemQueryName: string
- listQueryName: string
- }>
+ } & ListMeta['initialSort'])
+ })[]
}
}
}
-
-type QueryMode = 'default' | 'insensitive'
-
-type KeystoneAdminUIFieldMetaItemViewFieldMode = 'edit' | 'read' | 'hidden'
-
-type KeystoneAdminUIFieldMetaItemViewFieldPosition = 'form' | 'sidebar'
-
-type KeystoneAdminUISortDirection = 'ASC' | 'DESC'
diff --git a/packages/core/src/admin-ui/components/CellContainer.tsx b/packages/core/src/admin-ui/components/CellContainer.tsx
index c6d8fa5ca9d..7138f563aa1 100644
--- a/packages/core/src/admin-ui/components/CellContainer.tsx
+++ b/packages/core/src/admin-ui/components/CellContainer.tsx
@@ -1,18 +1,12 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
+import React, {
+ type ReactNode,
+} from 'react'
+import { Cell } from '@keystar/ui/table'
-import type { ReactNode } from 'react'
-import { jsx, useTheme } from '@keystone-ui/core'
-
-/**
- * This is the component you should use when you want the standard padding around a cell value
- */
-
-export const CellContainer = ({ children, ...props }: { children: ReactNode }) => {
- const { spacing } = useTheme()
+export function CellContainer ({ children, ...props }: { children: ReactNode }) {
return (
-
+ |
{children}
- |
+
)
}
diff --git a/packages/core/src/admin-ui/components/CellLink.tsx b/packages/core/src/admin-ui/components/CellLink.tsx
index c07409bd67a..05932fe1bcc 100644
--- a/packages/core/src/admin-ui/components/CellLink.tsx
+++ b/packages/core/src/admin-ui/components/CellLink.tsx
@@ -1,16 +1,17 @@
/** @jsxRuntime classic */
/** @jsx jsx */
-import { jsx, useTheme } from '@keystone-ui/core'
+import Link, { type LinkProps } from 'next/link'
+import { type AnchorHTMLAttributes } from 'react'
-import { Link, type LinkProps } from '../router'
+import { jsx, useTheme } from '@keystone-ui/core'
/**
* This is the component you should use when linking a Cell to an item (i.e when the Cell supports
* the linkTo prop)
*/
-export const CellLink = (props: LinkProps) => {
+export const CellLink = (props: LinkProps & AnchorHTMLAttributes) => {
const { colors, spacing } = useTheme()
return (
-export const Container = ({ children, ...props }: ContainerProps) => (
- ) {
+ return
- {children}
-
-)
+ />
+}
diff --git a/packages/core/src/admin-ui/components/CreateButtonLink.tsx b/packages/core/src/admin-ui/components/CreateButtonLink.tsx
index f3a7c2e1ef8..b5663881b47 100644
--- a/packages/core/src/admin-ui/components/CreateButtonLink.tsx
+++ b/packages/core/src/admin-ui/components/CreateButtonLink.tsx
@@ -1,26 +1,18 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { Button } from '@keystone-ui/button'
-import { jsx } from '@keystone-ui/core'
+import React from 'react'
+import { Button } from '@keystar/ui/button'
+import { Text } from '@keystar/ui/typography'
+
import type { ListMeta } from '../../types'
-import { Link } from '../router'
-export function CreateButtonLink (props: { list: ListMeta }) {
+export function CreateButtonLink (props: { children?: string, list: ListMeta }) {
+ const { list, children = `Create ${list.singular}` } = props
return (
)
}
diff --git a/packages/core/src/admin-ui/components/CreateItemDialog.tsx b/packages/core/src/admin-ui/components/CreateItemDialog.tsx
new file mode 100644
index 00000000000..0e0e7746ce3
--- /dev/null
+++ b/packages/core/src/admin-ui/components/CreateItemDialog.tsx
@@ -0,0 +1,85 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+
+import { ButtonGroup, Button } from '@keystar/ui/button'
+import { Dialog, useDialogContainer } from '@keystar/ui/dialog'
+import { Content } from '@keystar/ui/slots'
+import { Heading } from '@keystar/ui/typography'
+
+import { jsx, Box } from '@keystone-ui/core'
+import { LoadingDots } from '@keystone-ui/loading'
+
+import { useKeystone, useList } from '../context'
+
+import { Fields } from '../utils/Fields'
+import { useCreateItem } from '../utils/useCreateItem'
+import { GraphQLErrorNotice } from './GraphQLErrorNotice'
+import { useId } from 'react'
+
+export function CreateItemDialog (props: {
+ listKey: string
+ onCreate: (item: { id: string, label: string }) => void
+}) {
+ const { createViewFieldModes } = useKeystone()
+ const dialogState = useDialogContainer()
+ const list = useList(props.listKey)
+ const formId = useId()
+ const createItemState = useCreateItem(list)
+
+ const handleCreate = async () => {
+ const item = await createItemState.create()
+ if (!item) return
+
+ props.onCreate({
+ id: item.id as string,
+ label: (item.label as string) ?? `${item.id}`
+ })
+ dialogState.dismiss()
+ }
+
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/packages/core/src/admin-ui/components/CreateItemDrawer.tsx b/packages/core/src/admin-ui/components/CreateItemDrawer.tsx
index 4f7c32dd3cf..40f51d8c16a 100644
--- a/packages/core/src/admin-ui/components/CreateItemDrawer.tsx
+++ b/packages/core/src/admin-ui/components/CreateItemDrawer.tsx
@@ -34,9 +34,12 @@ export function CreateItemDrawer ({
loading: createItemState.state === 'loading',
action: async () => {
const item = await createItemState.create()
- if (item) {
- onCreate({ id: item.id, label: item.label || item.id })
- }
+ if (!item) return
+
+ onCreate({
+ id: item.id as string,
+ label: (item.label as string) ?? `${item.id}`
+ })
},
},
cancel: {
diff --git a/packages/core/src/admin-ui/components/EmptyState.tsx b/packages/core/src/admin-ui/components/EmptyState.tsx
new file mode 100644
index 00000000000..560d469aa8c
--- /dev/null
+++ b/packages/core/src/admin-ui/components/EmptyState.tsx
@@ -0,0 +1,56 @@
+import React, { type ReactElement, type ReactNode } from 'react'
+
+import { Icon } from '@keystar/ui/icon'
+import { Flex } from '@keystar/ui/layout'
+import { SlotProvider } from '@keystar/ui/slots'
+import { Heading, Text } from '@keystar/ui/typography'
+import { isReactText } from '@keystar/ui/utils'
+
+type EmptyStateProps =
+ | { children: ReactNode }
+ | {
+ title?: ReactNode
+ icon?: ReactElement
+ message?: ReactNode
+ actions?: ReactNode
+ }
+
+const emptyStateSlots = {
+ heading: { align: 'center', margin: 0 },
+ text: { align: 'center' }
+} as const
+export function EmptyState (props: EmptyStateProps) {
+ return (
+
+
+ {'children' in props ? (
+ props.children
+ ) : (
+ <>
+ {props.icon && (
+
+ {props.title}
+
+ )}
+ {props.message && isReactText(props.message)
+ ? {props.message}
+ : props.message}
+
+ {props.actions}
+
+ )}
+
+
+ )
+}
diff --git a/packages/core/src/admin-ui/components/Errors.tsx b/packages/core/src/admin-ui/components/Errors.tsx
index 669618b166b..66813bd9bf5 100644
--- a/packages/core/src/admin-ui/components/Errors.tsx
+++ b/packages/core/src/admin-ui/components/Errors.tsx
@@ -1,10 +1,14 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
+import React, { Component, type ReactNode } from 'react'
+
+import { Button } from '@keystar/ui/button'
+import { Dialog } from '@keystar/ui/dialog'
+import { Icon } from '@keystar/ui/icon'
+import { alertTriangleIcon } from '@keystar/ui/icon/icons/alertTriangleIcon'
+import { Box, Grid, VStack } from '@keystar/ui/layout'
+import { Content, SlotProvider } from '@keystar/ui/slots'
+import { css, tokenSchema } from '@keystar/ui/style'
+import { Heading, Text } from '@keystar/ui/typography'
-import { Component, type ReactNode } from 'react'
-import { Button } from '@keystone-ui/button'
-import { jsx, Box, Center, Stack, useTheme } from '@keystone-ui/core'
-import { AlertTriangleIcon } from '@keystone-ui/icons/icons/AlertTriangleIcon'
type ErrorBoundaryProps = {
children: ReactNode
@@ -28,16 +32,20 @@ export class ErrorBoundary extends Component
-
-
+ Unknown error
+ Something went wrong, please try reloading the page. If the problem persists contact your system administrator.
+
)
}
+
return this.props.children
}
}
@@ -46,28 +54,63 @@ type ErrorContainerProps = {
children: ReactNode
}
+const errorContainerSlots = {
+ heading: { align: 'center', margin: 0 },
+ text: { align: 'center' }
+} as const
export const ErrorContainer = ({ children }: ErrorContainerProps) => {
- const { colors, shadow } = useTheme()
return (
-
-
+
- {children}
-
-
+
+ {children}
+
+
+
)
}
+
+export function ErrorDetailsDialog (props: { error: Error }) {
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/packages/core/src/admin-ui/components/GraphQLErrorNotice.tsx b/packages/core/src/admin-ui/components/GraphQLErrorNotice.tsx
index c794a094c5a..b9420e3b253 100644
--- a/packages/core/src/admin-ui/components/GraphQLErrorNotice.tsx
+++ b/packages/core/src/admin-ui/components/GraphQLErrorNotice.tsx
@@ -1,8 +1,11 @@
-import { Stack } from '@keystone-ui/core'
-import { Notice } from '@keystone-ui/notice'
import type { GraphQLFormattedError } from 'graphql'
import React from 'react'
+import { VStack } from '@keystar/ui/layout'
+import { Notice } from '@keystar/ui/notice'
+import { Content } from '@keystar/ui/slots'
+import { Heading, Text } from '@keystar/ui/typography'
+
type GraphQLErrorNoticeProps = {
networkError: Error | null | undefined
errors: readonly GraphQLFormattedError[] | undefined
@@ -11,21 +14,36 @@ type GraphQLErrorNoticeProps = {
export function GraphQLErrorNotice ({ errors, networkError }: GraphQLErrorNoticeProps) {
if (networkError) {
return (
-
+
{networkError.message}
)
}
+
if (errors?.length) {
+ if (errors.length === 1) {
+ return (
+
+ {errors[0].message}
+
+ )
+ }
+
return (
-
- {errors.map((err, idx) => (
-
- {err.message}
-
- ))}
-
+
+ Errors
+
+
+ {errors.map((err, idx) => (
+
+ {err.message}
+
+ ))}
+
+
+
)
}
+
return null
}
diff --git a/packages/core/src/admin-ui/components/InlineCode.tsx b/packages/core/src/admin-ui/components/InlineCode.tsx
new file mode 100644
index 00000000000..69b9565de6d
--- /dev/null
+++ b/packages/core/src/admin-ui/components/InlineCode.tsx
@@ -0,0 +1,14 @@
+import React, { type PropsWithChildren } from 'react'
+import { css, tokenSchema } from '@keystar/ui/style'
+
+export function InlineCode (props: PropsWithChildren) {
+ return (
+
+
-
- Keystone 6
+
+
)
}
+
+const LogoMark = (props: SVGAttributes) => (
+
+)
+
+// slash variant
+// const LogoMark = (props: SVGAttributes) => (
+//
+// )
diff --git a/packages/core/src/admin-ui/components/Navigation.tsx b/packages/core/src/admin-ui/components/Navigation.tsx
index 5104ee2edc1..21ab1aba440 100644
--- a/packages/core/src/admin-ui/components/Navigation.tsx
+++ b/packages/core/src/admin-ui/components/Navigation.tsx
@@ -1,219 +1,102 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-
-import { type AllHTMLAttributes, type ReactNode, Fragment } from 'react'
+import React, { type ReactNode, type PropsWithChildren } from 'react'
import { useRouter } from 'next/router'
-import { Stack, jsx, useTheme, Text } from '@keystone-ui/core'
-import { Button } from '@keystone-ui/button'
-import { Popover } from '@keystone-ui/popover'
-import { MoreHorizontalIcon } from '@keystone-ui/icons/icons/MoreHorizontalIcon'
-import { ChevronRightIcon } from '@keystone-ui/icons/icons/ChevronRightIcon'
-import { type NavigationProps, type ListMeta, type AuthenticatedItem } from '../../types'
+import { ActionButton } from '@keystar/ui/button'
+import { Icon } from '@keystar/ui/icon'
+import { bookTextIcon } from '@keystar/ui/icon/icons/bookTextIcon'
+import { constructionIcon } from '@keystar/ui/icon/icons/constructionIcon'
+import { githubIcon } from '@keystar/ui/icon/icons/githubIcon'
+import { fileJson2Icon } from '@keystar/ui/icon/icons/fileJson2Icon'
+import { MenuTrigger, Menu, Item } from '@keystar/ui/menu'
+import { Box, Divider, HStack, VStack } from '@keystar/ui/layout'
+import { NavList as KeystarNavList, NavItem as KeystarNavItem, NavListProps } from '@keystar/ui/nav-list'
+import { Notice } from '@keystar/ui/notice'
+import { TooltipTrigger, Tooltip } from '@keystar/ui/tooltip'
+import { Text } from '@keystar/ui/typography'
+
+import { type ListMeta } from '../../types'
import { useKeystone } from '../context'
-import { Link } from '../router'
-import { SignoutButton } from './SignoutButton'
type NavItemProps = {
- href: string
+ /**
+ * The content of the item.
+ */
children: ReactNode
+ /**
+ * The URL to navigate to when the item is clicked. Omit the origin, as it
+ * interferes with client-side routing. Use `/` for the dashboard.
+ */
+ href: string
+ /**
+ * Optionally override the selected state of the item. By default, this is
+ * determined by the current route and the `href` provided.
+ */
isSelected?: boolean
}
-export const NavItem = ({ href, children, isSelected: _isSelected }: NavItemProps) => {
- const { colors, palette, spacing, radii, typography } = useTheme()
- const router = useRouter()
-
- const isSelected = _isSelected !== undefined ? _isSelected : router.pathname === href
- return (
-
-
- {children}
-
-
- )
+export function getHrefFromList(list: Pick) {
+ return `/${list.path}${list.isSingleton ? '/1' : ''}`
}
-const AuthenticatedItemDialog = ({ item }: { item: AuthenticatedItem | undefined }) => {
- const { apiPath } = useKeystone()
- const { spacing, typography } = useTheme()
- return (
-
- {item && item.state === 'authenticated' ? (
-
- Signed in as {item.label}
-
- ) : (
- process.env.NODE_ENV !== 'production' && (
- GraphQL Playground and Docs
- )
- )}
-
- {process.env.NODE_ENV === 'production' ? (
- item && item.state === 'authenticated' && (
-
- )}
- >
-
-
- API Explorer
-
-
- GitHub Repository
-
-
- Keystone Documentation
-
- {item && item.state === 'authenticated' &&
-
- )}
-
- )
-}
+/** A navigation item represents a page in the AdminUI. */
+export function NavItem (props: NavItemProps) {
+ const { children, href, isSelected: isSelectedProp } = props
+ const router = useRouter()
-const PopoverLink = ({ children, ...props }: AllHTMLAttributes) => {
- const { typography } = useTheme()
+ let ariaCurrent: 'page' | boolean | undefined = isSelectedProp
+ if (!ariaCurrent) {
+ if (router.pathname === href) {
+ ariaCurrent = 'page'
+ } else if (router.pathname.split('/')[1] === href.split('/')[1]) {
+ ariaCurrent = true
+ }
+ }
return (
-
{children}
- > & {
- children: ReactNode
-}
-
-export const NavigationContainer = ({ authenticatedItem, children }: NavigationContainerProps) => {
- const { spacing } = useTheme()
- return (
-
-
- {list.label}
-
- )
+/** Thin wrapper around "@keystar/ui" component */
+export function NavList (props: NavListProps) {
+ return & { include?: string[] }
-
-export const ListNavItems = ({ lists = [], include = [] }: NavItemsProps) => {
- const renderedList = include.length > 0 ? lists.filter(i => include.includes(i.key)) : lists
-
+/** The root navigation component for the AdminUI */
+export function NavContainer ({ children }: PropsWithChildren) {
return (
-
- {renderedList.map((list: ListMeta) => {
- return
+
+ {children}
+
)
}
+/** @private Exported for internal consumption only. */
export function Navigation () {
const {
adminMeta: { lists },
adminConfig,
- authenticatedItem,
visibleLists,
} = useKeystone()
if (visibleLists.state === 'loading') return null
- // This visible lists error is critical and likely to result in a server restart
- // if it happens, we'll show the error and not render the navigation component/s
+
+ // This visible lists error is critical, and is likely to result in a server
+ // restart. If it happens, show the error and don't render navigation.
if (visibleLists.state === 'error') {
return (
-
- {visibleLists.error instanceof Error
- ? visibleLists.error.message
- : visibleLists.error[0].message}
-
+
+
+ {visibleLists.error instanceof Error
+ ? visibleLists.error.message
+ : visibleLists.error[0].message}
+
+
)
}
const renderableLists = Object.keys(lists)
@@ -224,18 +107,65 @@ export function Navigation () {
.filter((x): x is NonNullable => Boolean(x))
if (adminConfig?.components?.Navigation) {
- return (
-
- Dashboard
-
+
+
+ Dashboard
+
+ {list.label}
+
+ ))}
+
+
+
+
+
+ )
+}
+
+/** Should be displayed below the `NavList` component. */
+export function NavFooter (props: PropsWithChildren) {
+ return (
+
+ {props.children}
+
+ )
+}
+
+/** A footer item in the navigation. */
+export function DeveloperResourcesMenu () {
+ const { apiPath } = useKeystone()
+
+ if (process.env.NODE_ENV === 'production') return null
+ if (!apiPath) return null // TODO: FIXME: ?
+ return (
+
+
+
+
+ Developer resources
+
+
+
)
}
diff --git a/packages/core/src/admin-ui/components/NullableFieldWrapper.tsx b/packages/core/src/admin-ui/components/NullableFieldWrapper.tsx
new file mode 100644
index 00000000000..c626dfa327a
--- /dev/null
+++ b/packages/core/src/admin-ui/components/NullableFieldWrapper.tsx
@@ -0,0 +1,70 @@
+import React, { type ReactElement } from 'react'
+
+import { Checkbox } from '@keystar/ui/checkbox'
+import { Icon } from '@keystar/ui/icon'
+import { cornerDownRightIcon } from '@keystar/ui/icon/icons/cornerDownRightIcon'
+import { HStack, VStack } from '@keystar/ui/layout'
+import { tokenSchema } from '@keystar/ui/style'
+import { Text } from '@keystar/ui/typography'
+
+import { InlineCode } from './InlineCode'
+
+type NullableFieldWrapperProps = {
+ /** Whether to auto focus the checkbox. */
+ autoFocus?: boolean
+ /** The field element. */
+ children: ReactElement
+ /**
+ * When `true`, the field is wrapped and the checkbox is shown. Otherwise, the
+ * field is rendered directly.
+ */
+ isAllowed?: boolean
+ /** When `true`, you must disable the field to prevent conflicting user input. */
+ isNull?: boolean
+ /**
+ * The checkbox may be readonly in cases where the user has access to see the
+ * field, but not edit it.
+ */
+ isReadOnly?: boolean
+ /** The group label. */
+ label: string
+ /** Handler that is called when the checkbox's state changes. */
+ onChange?: (isSelected: boolean) => void
+}
+
+/**
+ * Wraps a field component with a "group" (ARIA `
{label}
@@ -35,7 +35,7 @@ const Section = ({ label, children }: SectionProps) => { } type NavItemProps = { href: string, children: ReactNode } -const NavItem = ({ href, children }: NavItemProps) => { +function NavItem ({ href, children }: NavItemProps) { const { palette, radii, spacing } = useTheme() const router = useRouter() const isSelected = router.pathname === href @@ -68,7 +68,7 @@ const NavItem = ({ href, children }: NavItemProps) => { ) } -export const Navigation = () => { +export function Navigation () { return (
- {
- onChange?.(event.target.value)
- }}
- disabled={disabled}
- value={value || ''}
- autoFocus={autoFocus}
- />
-
-
+
- {
- onChange?.({ left: event.target.value, right })
- }}
- disabled={disabled}
- value={left || ''}
- autoFocus={autoFocus}
- />
-
-
- {
- onChange?.({ left, right: event.target.value })
- }}
- disabled={disabled}
- value={right || ''}
- autoFocus={autoFocus}
- />
-
-
- {
- onChange?.({ left: event.target.value, right })
- }}
- disabled={disabled}
- value={left || ''}
- autoFocus={autoFocus}
- />
-
-
- {
- onChange?.({ left, right: event.target.value })
- }}
- disabled={disabled}
- value={right || ''}
- autoFocus={autoFocus}
- />
-
-
- {
- onChange?.(event.target.value)
- }}
- disabled={disabled}
- value={value || ''}
- autoFocus={autoFocus}
- />
-
-
+
- {
- onChange?.(event.target.value)
- }}
- disabled={disabled}
- value={value || ''}
- autoFocus={autoFocus}
- />
-
-
- {title || 'Keystone'}
+ {title ?? 'Keystone'}
({
name: gqlNames.ItemAuthenticationWithPasswordResult,
types: [ItemAuthenticationWithPasswordSuccess, ItemAuthenticationWithPasswordFailure],
resolveType (val) {
- if ('sessionToken' in val) {
- return gqlNames.ItemAuthenticationWithPasswordSuccess
- }
+ if ('sessionToken' in val) return gqlNames.ItemAuthenticationWithPasswordSuccess
return gqlNames.ItemAuthenticationWithPasswordFailure
},
})
@@ -57,16 +55,10 @@ export function getBaseAuthSchema ({
const extension = {
query: {
authenticatedItem: graphql.field({
- type: graphql.union({
- name: 'AuthenticatedItem',
- types: [base.object(listKey) as graphql.ObjectType],
- resolveType: (root, context: KeystoneContext) => context.session?.listKey,
- }),
+ type: base.object(listKey),
resolve (root, args, context: KeystoneContext) {
const { session } = context
- if (!session) return null
- if (!session.itemId) return null
- if (session.listKey !== listKey) return null
+ if (!session?.itemId) return null
return context.db[listKey].findOne({
where: {
@@ -77,6 +69,13 @@ export function getBaseAuthSchema ({
}),
},
mutation: {
+ endSession: graphql.field({
+ type: graphql.nonNull(graphql.Boolean),
+ async resolve (rootVal, args, context) {
+ await context.sessionStrategy?.end({ context })
+ return true
+ },
+ }),
[gqlNames.authenticateItemWithPassword]: graphql.field({
type: AuthenticationResult,
args: {
@@ -103,7 +102,6 @@ export function getBaseAuthSchema ({
// Update system state
const sessionToken = await context.sessionStrategy.start({
data: {
- listKey,
itemId: result.item.id,
},
context,
diff --git a/packages/auth/src/index.ts b/packages/auth/src/index.ts
index 68448486a4c..dba1c8fe01d 100644
--- a/packages/auth/src/index.ts
+++ b/packages/auth/src/index.ts
@@ -10,11 +10,11 @@ import { password, timestamp } from '@keystone-6/core/fields'
import type { AuthConfig, AuthGqlNames } from './types'
import { getSchemaExtension } from './schema'
-import { signinTemplate } from './templates/signin'
-import { initTemplate } from './templates/init'
+import configTemplate from './templates/config'
+import signinTemplate from './templates/signin'
+import initTemplate from './templates/init'
export type AuthSession = {
- listKey: string // TODO: use ListTypeInfo
itemId: string | number // TODO: use ListTypeInfo
data: unknown // TODO: use ListTypeInfo
}
@@ -99,13 +99,30 @@ export function createAuth ({
*
* The signin page is always included, and the init page is included when initFirstItem is set
*/
- const authGetAdditionalFiles = () => {
+ const authGetAdditionalFiles = (config: KeystoneConfig) => {
+ // TODO: FIXME: this is a duplication of initialise-lists:747
+ const listConfig = config.lists[listKey]
+ const labelField =
+ listConfig.ui?.labelField ??
+ (listConfig.fields.label
+ ? 'label'
+ : listConfig.fields.name
+ ? 'name'
+ : listConfig.fields.title
+ ? 'title'
+ : 'id')
+
const filesToWrite: AdminFileToWrite[] = [
{
mode: 'write',
- src: signinTemplate({ gqlNames, identityField, secretField }),
+ src: signinTemplate({ listKey, gqlNames, identityField, secretField }),
outputPath: 'pages/signin.js',
},
+ {
+ mode: 'write',
+ src: configTemplate({ labelField }),
+ outputPath: 'config.ts',
+ },
]
if (initFirstItem) {
filesToWrite.push({
@@ -169,9 +186,10 @@ export function createAuth ({
get: async ({ context }) => {
const session = await get({ context })
const sudoContext = context.sudo()
- if (!session) return
- if (!session.itemId) return
- if (session.listKey !== listKey) return
+ if (!session?.itemId) return
+
+ // TODO: replace with SessionSecret: HMAC({ listKey, identityField, secretField }, SessionSecretVar)
+ // if (session.listKey !== listKey) return null
try {
const data = await sudoContext.query[listKey].findOne({
@@ -180,11 +198,14 @@ export function createAuth ({
})
if (!data) return
- return { ...session, itemId: session.itemId, listKey, data }
+ return {
+ ...session,
+ itemId: session.itemId,
+ data
+ }
} catch (e) {
console.error(e)
- // TODO: the assumption is this could only be from an invalid sessionData configuration
- // it could be something else though, either way, result is a bad session
+ // WARNING: this is probably an invalid configuration
return
}
},
@@ -262,7 +283,7 @@ export function createAuth ({
ui = {
...ui,
publicPages: [...publicPages, ...authPublicPages],
- getAdditionalFiles: [...getAdditionalFiles, authGetAdditionalFiles],
+ getAdditionalFiles: [...getAdditionalFiles, () => authGetAdditionalFiles(config)],
isAccessAllowed: async (context: KeystoneContext) => {
if (await hasInitFirstItemConditions(context)) return true
diff --git a/packages/auth/src/pages/InitPage.tsx b/packages/auth/src/pages/InitPage.tsx
index 2b8a3317760..a4df122517a 100644
--- a/packages/auth/src/pages/InitPage.tsx
+++ b/packages/auth/src/pages/InitPage.tsx
@@ -3,12 +3,12 @@
import { useMemo, useState } from 'react'
import fetch from 'cross-fetch'
+import isDeepEqual from 'fast-deep-equal'
import { jsx, H1, Stack, Inline } from '@keystone-ui/core'
import { Button } from '@keystone-ui/button'
import { Checkbox, FieldLabel, TextInput } from '@keystone-ui/fields'
import { type FieldMeta } from '@keystone-6/core/types'
-import isDeepEqual from 'fast-deep-equal'
import { gql, useMutation } from '@keystone-6/core/admin-ui/apollo'
import { useReinitContext, useKeystone } from '@keystone-6/core/admin-ui/context'
@@ -26,6 +26,8 @@ import { useRedirect } from '../lib/useFromRedirect'
const signupURL = 'https://endpoints.thinkmill.com.au/newsletter'
+export default (props: Parameters[0]) => () => [0]) => () => [0]) => () => ['initFirstItem']>
-}
-
-export const initTemplate = ({ listKey, initFirstItem }: InitTemplateArgs) => {
- // -- TEMPLATE START
- return `import { getInitPage } from '@keystone-6/auth/pages/InitPage';
-
-const fieldPaths = ${JSON.stringify(initFirstItem.fields)};
+}) {
+ return `import makeSigninPage from '@keystone-6/auth/pages/InitPage'
-export default getInitPage(${JSON.stringify({
- listKey,
- fieldPaths: initFirstItem.fields,
- enableWelcome: !initFirstItem.skipKeystoneWelcome,
- })});
+export default makeSigninPage(${JSON.stringify({
+ listKey,
+ fieldPaths: initFirstItem.fields,
+ enableWelcome: !initFirstItem.skipKeystoneWelcome,
+})})
`
- // -- TEMPLATE END
}
diff --git a/packages/auth/src/templates/signin.ts b/packages/auth/src/templates/signin.ts
index 6e333babc59..e43c47a22d6 100644
--- a/packages/auth/src/templates/signin.ts
+++ b/packages/auth/src/templates/signin.ts
@@ -1,24 +1,25 @@
import { type AuthGqlNames } from '../types'
-export const signinTemplate = ({
+export default ({
+ listKey,
gqlNames,
identityField,
secretField,
}: {
+ listKey: string
gqlNames: AuthGqlNames
identityField: string
secretField: string
}) => {
- // -- TEMPLATE START
- return `import { getSigninPage } from '@keystone-6/auth/pages/SigninPage'
+ return `import makeSigninPage from '@keystone-6/auth/pages/SigninPage'
-export default getSigninPage(${JSON.stringify({
- identityField: identityField,
- secretField: secretField,
- mutationName: gqlNames.authenticateItemWithPassword,
- successTypename: gqlNames.ItemAuthenticationWithPasswordSuccess,
- failureTypename: gqlNames.ItemAuthenticationWithPasswordFailure,
- })});
+export default makeSigninPage(${JSON.stringify({
+ listKey,
+ identityField,
+ secretField,
+ mutationName: gqlNames.authenticateItemWithPassword,
+ successTypename: gqlNames.ItemAuthenticationWithPasswordSuccess,
+ failureTypename: gqlNames.ItemAuthenticationWithPasswordFailure,
+})})
`
- // -- TEMPLATE END
}
diff --git a/packages/cloudinary/package.json b/packages/cloudinary/package.json
index b065b25e434..4ad5d6bce09 100644
--- a/packages/cloudinary/package.json
+++ b/packages/cloudinary/package.json
@@ -6,10 +6,12 @@
"module": "dist/keystone-6-cloudinary.esm.js",
"exports": {
".": {
+ "types": "./dist/keystone-6-cloudinary.cjs.js",
"module": "./dist/keystone-6-cloudinary.esm.js",
"default": "./dist/keystone-6-cloudinary.cjs.js"
},
"./views": {
+ "types": "./views/dist/keystone-6-cloudinary-views.cjs.js",
"module": "./views/dist/keystone-6-cloudinary-views.esm.js",
"default": "./views/dist/keystone-6-cloudinary-views.cjs.js"
},
diff --git a/packages/cloudinary/src/views/index.tsx b/packages/cloudinary/src/views/index.tsx
index 0f2ee54266f..5e236e38015 100644
--- a/packages/cloudinary/src/views/index.tsx
+++ b/packages/cloudinary/src/views/index.tsx
@@ -3,12 +3,10 @@
import { jsx } from '@keystone-ui/core'
import {
- type CardValueComponent,
type CellComponent,
type FieldController,
type FieldControllerConfig,
} from '@keystone-6/core/types'
-import { FieldContainer, FieldLabel } from '@keystone-ui/fields'
import { validateImage } from './Field'
export { Field } from './Field'
@@ -35,16 +33,6 @@ export const Cell: CellComponent = ({ item, field }) => {
)
}
-export const CardValue: CardValueComponent = ({ item, field }) => {
- const data = item[field.path]
- return (
-
- {field.label}
- {data && }
-
- )
-}
-
type ImageData = {
id: string
filename: string
@@ -69,7 +57,7 @@ type CloudinaryImageValue =
type CloudinaryImageController = FieldController
-export const controller = (config: FieldControllerConfig): CloudinaryImageController => {
+export function controller (config: FieldControllerConfig): CloudinaryImageController {
return {
path: config.path,
label: config.label,
diff --git a/packages/core/package.json b/packages/core/package.json
index ff8a944d065..bf9714e54a9 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -7,166 +7,207 @@
"module": "dist/keystone-6-core.esm.js",
"exports": {
".": {
+ "types": "./dist/keystone-6-core.cjs.js",
"module": "./dist/keystone-6-core.esm.js",
"default": "./dist/keystone-6-core.cjs.js"
},
"./access": {
+ "types": "./access/dist/keystone-6-core-access.cjs.js",
"module": "./access/dist/keystone-6-core-access.esm.js",
"default": "./access/dist/keystone-6-core-access.cjs.js"
},
"./context": {
+ "types": "./context/dist/keystone-6-core-context.cjs.js",
"module": "./context/dist/keystone-6-core-context.esm.js",
"default": "./context/dist/keystone-6-core-context.cjs.js"
},
"./session": {
+ "types": "./session/dist/keystone-6-core-session.cjs.js",
"module": "./session/dist/keystone-6-core-session.esm.js",
"default": "./session/dist/keystone-6-core-session.cjs.js"
},
"./testing": {
+ "types": "./testing/dist/keystone-6-core-testing.cjs.js",
"module": "./testing/dist/keystone-6-core-testing.esm.js",
"default": "./testing/dist/keystone-6-core-testing.cjs.js"
},
"./scripts/cli": {
+ "types": "./scripts/cli/dist/keystone-6-core-scripts-cli.cjs.js",
"module": "./scripts/cli/dist/keystone-6-core-scripts-cli.esm.js",
"default": "./scripts/cli/dist/keystone-6-core-scripts-cli.cjs.js"
},
"./types": {
+ "types": "./types/dist/keystone-6-core-types.cjs.js",
"module": "./types/dist/keystone-6-core-types.esm.js",
"default": "./types/dist/keystone-6-core-types.cjs.js"
},
"./fields": {
+ "types": "./fields/dist/keystone-6-core-fields.cjs.js",
"module": "./fields/dist/keystone-6-core-fields.esm.js",
"default": "./fields/dist/keystone-6-core-fields.cjs.js"
},
"./scripts": {
+ "types": "./scripts/dist/keystone-6-core-scripts.cjs.js",
"module": "./scripts/dist/keystone-6-core-scripts.esm.js",
"default": "./scripts/dist/keystone-6-core-scripts.cjs.js"
},
"./admin-ui/image": {
+ "types": "./admin-ui/image/dist/keystone-6-core-admin-ui-image.cjs.js",
"module": "./admin-ui/image/dist/keystone-6-core-admin-ui-image.esm.js",
"default": "./admin-ui/image/dist/keystone-6-core-admin-ui-image.cjs.js"
},
"./admin-ui/apollo": {
+ "types": "./admin-ui/apollo/dist/keystone-6-core-admin-ui-apollo.cjs.js",
"module": "./admin-ui/apollo/dist/keystone-6-core-admin-ui-apollo.esm.js",
"default": "./admin-ui/apollo/dist/keystone-6-core-admin-ui-apollo.cjs.js"
},
"./admin-ui/router": {
+ "types": "./admin-ui/router/dist/keystone-6-core-admin-ui-router.cjs.js",
"module": "./admin-ui/router/dist/keystone-6-core-admin-ui-router.esm.js",
"default": "./admin-ui/router/dist/keystone-6-core-admin-ui-router.cjs.js"
},
"./admin-ui/context": {
+ "types": "./admin-ui/context/dist/keystone-6-core-admin-ui-context.cjs.js",
"module": "./admin-ui/context/dist/keystone-6-core-admin-ui-context.esm.js",
"default": "./admin-ui/context/dist/keystone-6-core-admin-ui-context.cjs.js"
},
"./admin-ui/utils": {
+ "types": "./admin-ui/utils/dist/keystone-6-core-admin-ui-utils.cjs.js",
"module": "./admin-ui/utils/dist/keystone-6-core-admin-ui-utils.esm.js",
"default": "./admin-ui/utils/dist/keystone-6-core-admin-ui-utils.cjs.js"
},
"./fields/types/image/utils": {
+ "types": "./fields/types/image/utils/dist/keystone-6-core-fields-types-image-utils.cjs.js",
"module": "./fields/types/image/utils/dist/keystone-6-core-fields-types-image-utils.esm.js",
"default": "./fields/types/image/utils/dist/keystone-6-core-fields-types-image-utils.cjs.js"
},
"./admin-ui/components": {
+ "types": "./admin-ui/components/dist/keystone-6-core-admin-ui-components.cjs.js",
"module": "./admin-ui/components/dist/keystone-6-core-admin-ui-components.esm.js",
"default": "./admin-ui/components/dist/keystone-6-core-admin-ui-components.cjs.js"
},
"./fields/types/file/views": {
+ "types": "./fields/types/file/views/dist/keystone-6-core-fields-types-file-views.cjs.js",
"module": "./fields/types/file/views/dist/keystone-6-core-fields-types-file-views.esm.js",
"default": "./fields/types/file/views/dist/keystone-6-core-fields-types-file-views.cjs.js"
},
"./fields/types/json/views": {
+ "types": "./fields/types/json/views/dist/keystone-6-core-fields-types-json-views.cjs.js",
"module": "./fields/types/json/views/dist/keystone-6-core-fields-types-json-views.esm.js",
"default": "./fields/types/json/views/dist/keystone-6-core-fields-types-json-views.cjs.js"
},
"./fields/types/text/views": {
+ "types": "./fields/types/text/views/dist/keystone-6-core-fields-types-text-views.cjs.js",
"module": "./fields/types/text/views/dist/keystone-6-core-fields-types-text-views.esm.js",
"default": "./fields/types/text/views/dist/keystone-6-core-fields-types-text-views.cjs.js"
},
"./fields/types/float/views": {
+ "types": "./fields/types/float/views/dist/keystone-6-core-fields-types-float-views.cjs.js",
"module": "./fields/types/float/views/dist/keystone-6-core-fields-types-float-views.esm.js",
"default": "./fields/types/float/views/dist/keystone-6-core-fields-types-float-views.cjs.js"
},
"./fields/types/image/views": {
+ "types": "./fields/types/image/views/dist/keystone-6-core-fields-types-image-views.cjs.js",
"module": "./fields/types/image/views/dist/keystone-6-core-fields-types-image-views.esm.js",
"default": "./fields/types/image/views/dist/keystone-6-core-fields-types-image-views.cjs.js"
},
"./fields/types/bigInt/views": {
+ "types": "./fields/types/bigInt/views/dist/keystone-6-core-fields-types-bigInt-views.cjs.js",
"module": "./fields/types/bigInt/views/dist/keystone-6-core-fields-types-bigInt-views.esm.js",
"default": "./fields/types/bigInt/views/dist/keystone-6-core-fields-types-bigInt-views.cjs.js"
},
"./fields/types/select/views": {
+ "types": "./fields/types/select/views/dist/keystone-6-core-fields-types-select-views.cjs.js",
"module": "./fields/types/select/views/dist/keystone-6-core-fields-types-select-views.esm.js",
"default": "./fields/types/select/views/dist/keystone-6-core-fields-types-select-views.cjs.js"
},
"./fields/types/decimal/views": {
+ "types": "./fields/types/decimal/views/dist/keystone-6-core-fields-types-decimal-views.cjs.js",
"module": "./fields/types/decimal/views/dist/keystone-6-core-fields-types-decimal-views.esm.js",
"default": "./fields/types/decimal/views/dist/keystone-6-core-fields-types-decimal-views.cjs.js"
},
"./fields/types/integer/views": {
+ "types": "./fields/types/integer/views/dist/keystone-6-core-fields-types-integer-views.cjs.js",
"module": "./fields/types/integer/views/dist/keystone-6-core-fields-types-integer-views.esm.js",
"default": "./fields/types/integer/views/dist/keystone-6-core-fields-types-integer-views.cjs.js"
},
"./fields/types/virtual/views": {
+ "types": "./fields/types/virtual/views/dist/keystone-6-core-fields-types-virtual-views.cjs.js",
"module": "./fields/types/virtual/views/dist/keystone-6-core-fields-types-virtual-views.esm.js",
"default": "./fields/types/virtual/views/dist/keystone-6-core-fields-types-virtual-views.cjs.js"
},
"./fields/types/checkbox/views": {
+ "types": "./fields/types/checkbox/views/dist/keystone-6-core-fields-types-checkbox-views.cjs.js",
"module": "./fields/types/checkbox/views/dist/keystone-6-core-fields-types-checkbox-views.esm.js",
"default": "./fields/types/checkbox/views/dist/keystone-6-core-fields-types-checkbox-views.cjs.js"
},
"./fields/types/password/views": {
+ "types": "./fields/types/password/views/dist/keystone-6-core-fields-types-password-views.cjs.js",
"module": "./fields/types/password/views/dist/keystone-6-core-fields-types-password-views.esm.js",
"default": "./fields/types/password/views/dist/keystone-6-core-fields-types-password-views.cjs.js"
},
"./fields/types/timestamp/views": {
+ "types": "./fields/types/timestamp/views/dist/keystone-6-core-fields-types-timestamp-views.cjs.js",
"module": "./fields/types/timestamp/views/dist/keystone-6-core-fields-types-timestamp-views.esm.js",
"default": "./fields/types/timestamp/views/dist/keystone-6-core-fields-types-timestamp-views.cjs.js"
},
"./fields/types/calendarDay/views": {
+ "types": "./fields/types/calendarDay/views/dist/keystone-6-core-fields-types-calendarDay-views.cjs.js",
"module": "./fields/types/calendarDay/views/dist/keystone-6-core-fields-types-calendarDay-views.esm.js",
"default": "./fields/types/calendarDay/views/dist/keystone-6-core-fields-types-calendarDay-views.cjs.js"
},
"./fields/types/multiselect/views": {
+ "types": "./fields/types/multiselect/views/dist/keystone-6-core-fields-types-multiselect-views.cjs.js",
"module": "./fields/types/multiselect/views/dist/keystone-6-core-fields-types-multiselect-views.esm.js",
"default": "./fields/types/multiselect/views/dist/keystone-6-core-fields-types-multiselect-views.cjs.js"
},
"./fields/types/relationship/views": {
+ "types": "./fields/types/relationship/views/dist/keystone-6-core-fields-types-relationship-views.cjs.js",
"module": "./fields/types/relationship/views/dist/keystone-6-core-fields-types-relationship-views.esm.js",
"default": "./fields/types/relationship/views/dist/keystone-6-core-fields-types-relationship-views.cjs.js"
},
"./fields/types/relationship/views/RelationshipSelect": {
+ "types": "./fields/types/relationship/views/RelationshipSelect/dist/keystone-6-core-fields-types-relationship-views-RelationshipSelect.cjs.js",
"module": "./fields/types/relationship/views/RelationshipSelect/dist/keystone-6-core-fields-types-relationship-views-RelationshipSelect.esm.js",
"default": "./fields/types/relationship/views/RelationshipSelect/dist/keystone-6-core-fields-types-relationship-views-RelationshipSelect.cjs.js"
},
"./___internal-do-not-use-will-break-in-patch/artifacts": {
+ "types": "./___internal-do-not-use-will-break-in-patch/artifacts/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-artifacts.cjs.js",
"module": "./___internal-do-not-use-will-break-in-patch/artifacts/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-artifacts.esm.js",
"default": "./___internal-do-not-use-will-break-in-patch/artifacts/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-artifacts.cjs.js"
},
"./___internal-do-not-use-will-break-in-patch/admin-ui/id-field-view": {
+ "types": "./___internal-do-not-use-will-break-in-patch/admin-ui/id-field-view/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-id-field-view.cjs.js",
"module": "./___internal-do-not-use-will-break-in-patch/admin-ui/id-field-view/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-id-field-view.esm.js",
"default": "./___internal-do-not-use-will-break-in-patch/admin-ui/id-field-view/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-id-field-view.cjs.js"
},
"./___internal-do-not-use-will-break-in-patch/admin-ui/pages/App": {
+ "types": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/App/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-App.cjs.js",
"module": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/App/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-App.esm.js",
"default": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/App/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-App.cjs.js"
},
"./___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage": {
+ "types": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-HomePage.cjs.js",
"module": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-HomePage.esm.js",
"default": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-HomePage.cjs.js"
},
"./___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage": {
+ "types": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-ItemPage.cjs.js",
"module": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-ItemPage.esm.js",
"default": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-ItemPage.cjs.js"
},
"./___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage": {
+ "types": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-ListPage.cjs.js",
"module": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-ListPage.esm.js",
"default": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-ListPage.cjs.js"
},
"./___internal-do-not-use-will-break-in-patch/admin-ui/pages/NoAccessPage": {
+ "types": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/NoAccessPage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-NoAccessPage.cjs.js",
"module": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/NoAccessPage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-NoAccessPage.esm.js",
"default": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/NoAccessPage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-NoAccessPage.cjs.js"
},
"./___internal-do-not-use-will-break-in-patch/admin-ui/pages/CreateItemPage": {
+ "types": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/CreateItemPage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-CreateItemPage.cjs.js",
"module": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/CreateItemPage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-CreateItemPage.esm.js",
"default": "./___internal-do-not-use-will-break-in-patch/admin-ui/pages/CreateItemPage/dist/keystone-6-core-___internal-do-not-use-will-break-in-patch-admin-ui-pages-CreateItemPage.cjs.js"
},
@@ -190,6 +231,8 @@
"@graphql-ts/schema": "^0.6.0",
"@graphql-typed-document-node/core": "^3.1.2",
"@hapi/iron": "^7.0.0",
+ "@internationalized/date": "^3.5.5",
+ "@keystar/ui": "^0.7.13",
"@keystone-ui/button": "workspace:^",
"@keystone-ui/core": "workspace:^",
"@keystone-ui/fields": "workspace:^",
@@ -207,6 +250,10 @@
"@prisma/client": "5.22.0",
"@prisma/internals": "5.22.0",
"@prisma/migrate": "5.22.0",
+ "@react-aria/i18n": "^3.12.1",
+ "@react-aria/label": "^3.7.10",
+ "@react-aria/utils": "^3.25.1",
+ "@react-stately/data": "^3.11.6",
"@sindresorhus/slugify": "^1.1.2",
"apollo-upload-client": "^17.0.0",
"bcryptjs": "^2.4.3",
diff --git a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/id-field-view.tsx b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/id-field-view.tsx
index dae6dfe031c..80b7373843d 100644
--- a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/id-field-view.tsx
+++ b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/id-field-view.tsx
@@ -1,34 +1,24 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
+import React from 'react'
+
+import { TextField } from '@keystar/ui/text-field'
+import { Text } from '@keystar/ui/typography'
-import { jsx } from '@keystone-ui/core'
-import { FieldContainer, FieldLabel, TextInput } from '@keystone-ui/fields'
import type {
- CardValueComponent,
CellComponent,
FieldController,
FieldControllerConfig,
IdFieldConfig,
} from '../../types'
-import { CellLink, CellContainer } from '../../admin-ui/components'
export function Field () {
return null
}
-export const Cell: CellComponent = ({ item, field, linkTo }) => {
- const value = item[field.path] + ''
- return linkTo ? {value} : {value}
-}
-Cell.supportsLinkTo = true
-
-export const CardValue: CardValueComponent = ({ item, field }) => {
- return (
-
- {field.label}
- {item[field.path]}
-
- )
+export const Cell: CellComponent = ({ field, item }) => {
+ let value = item[field.path]
+ return value != null
+ ? {value.toString()}
+ : null
}
export function controller (
@@ -44,13 +34,19 @@ export function controller (
serialize: () => ({}),
filter: {
Filter (props) {
+ const { autoFocus, context, onChange, type, typeLabel, value, ...otherProps } = props
+
+ const labelProps = context === 'add'
+ ? { label: config.label, description: typeLabel }
+ : { label: typeLabel }
+
return (
- {
- props.onChange(event.target.value)
- }}
- value={props.value}
- autoFocus={props.autoFocus}
+
-
-
-
-
-
+
+
+
+
)
}
diff --git a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/CreateItemPage/index.tsx b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/CreateItemPage/index.tsx
index e437e65af8f..bb83d2111f3 100644
--- a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/CreateItemPage/index.tsx
+++ b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/CreateItemPage/index.tsx
@@ -1,80 +1,93 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
+import React from 'react'
+import { useRouter } from 'next/router'
-import { Box, jsx } from '@keystone-ui/core'
+import { Button } from '@keystar/ui/button'
+import { VStack } from '@keystar/ui/layout'
import { LoadingDots } from '@keystone-ui/loading'
-import { Button } from '@keystone-ui/button'
-import { useRouter } from 'next/router'
+
import { Fields } from '../../../../admin-ui/utils'
import { PageContainer } from '../../../../admin-ui/components/PageContainer'
import { useKeystone, useList } from '../../../../admin-ui'
import { GraphQLErrorNotice } from '../../../../admin-ui/components'
-import { type ListMeta } from '../../../../types'
import { useCreateItem } from '../../../../admin-ui/utils/useCreateItem'
import { BaseToolbar, ColumnLayout, ItemPageHeader } from '../ItemPage/common'
-function CreatePageForm (props: { list: ListMeta }) {
- const createItem = useCreateItem(props.list)
- const router = useRouter()
- return (
-
- {createItem.error && (
-
-
-
-
- )
-}
-
type CreateItemPageProps = { listKey: string }
-export const getCreateItemPage = (props: CreateItemPageProps) => () =>
-
-
- {createViewFieldModes.state === 'error' && (
-
+
-
+ }}
+ style={{
+ display: 'contents',
+ }}
+ >
+ {/*
+ Workaround for react-aria "bug" where pressing enter in a form field
+ moves focus to the submit button.
+ See: https://github.com/adobe/react-spectrum/issues/5940
+ */}
+
+
+ {createViewFieldModes.state === 'error' && (
+
+
+
+
+
+
+
+ )}
)
}
diff --git a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/index.tsx b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/index.tsx
index fa8cc5bda5b..71dab2d7f13 100644
--- a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/index.tsx
+++ b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/index.tsx
@@ -1,23 +1,27 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
+import React, {
+ type PropsWithChildren,
+ useId,
+ useMemo,
+ useRef
+} from 'react'
-import { useMemo } from 'react'
-
-import { Center, Inline, Heading, VisuallyHidden, jsx, useTheme } from '@keystone-ui/core'
-import { PlusIcon } from '@keystone-ui/icons/icons/PlusIcon'
-import { LoadingDots } from '@keystone-ui/loading'
+import { ActionButton } from '@keystar/ui/button'
+import { Icon } from '@keystar/ui/icon'
+import { plusIcon } from '@keystar/ui/icon/icons/plusIcon'
+import { Grid, VStack } from '@keystar/ui/layout'
+import { useLink } from '@keystar/ui/link'
+import { Notice } from '@keystar/ui/notice'
+import { ProgressCircle } from '@keystar/ui/progress'
+import { css, FocusRing, tokenSchema, transition } from '@keystar/ui/style'
+import { TooltipTrigger, Tooltip } from '@keystar/ui/tooltip'
+import { Heading, Text } from '@keystar/ui/typography'
import { makeDataGetter } from '../../../../admin-ui/utils'
-import { PageContainer, HEADER_HEIGHT } from '../../../../admin-ui/components/PageContainer'
+import { PageContainer } from '../../../../admin-ui/components/PageContainer'
import { gql, useQuery } from '../../../../admin-ui/apollo'
import { useKeystone, useList } from '../../../../admin-ui/context'
-import { Link, type LinkProps } from '../../../../admin-ui/router'
-function ListCard ({
- listKey,
- count,
- hideCreate
-}: {
+type ListCardProps = {
listKey: string
hideCreate: boolean
count:
@@ -25,83 +29,6 @@ function ListCard ({
| { type: 'no-access' }
| { type: 'error', message: string }
| { type: 'loading' }
-}) {
- const { colors, palette, radii, spacing } = useTheme()
- const list = useList(listKey)
- return (
- Dashboard}>
- {visibleLists.state === 'loading' ? (
-
-
- ) : (
-
- {(() => {
- if (visibleLists.state === 'error') {
- return (
-
- {visibleLists.error instanceof Error
- ? visibleLists.error.message
- : visibleLists.error[0].message}
-
- )
- }
- return Object.keys(lists).map(key => {
- if (!visibleLists.lists.has(key)) {
- return null
+ const stateAwareElement = (() => {
+ if (visibleLists.state === 'error') {
+ return (
+
+ {visibleLists.error instanceof Error
+ ? visibleLists.error.message
+ : visibleLists.error[0].message}
+
+ )
+ }
+ if (visibleLists.state === 'loading') {
+ return (
+
+
+ )
+ }
+
+ return (
+
+ {Object.keys(lists).map(key => {
+ if (!visibleLists.lists.has(key)) {
+ return null
+ }
+ const result = dataGetter.get(key)
+ return (
+ list.key === key)
- ?.hideCreate ?? false
- }
- key={key}
- listKey={key}
- />
- )
- })
- })()}
-
- )}
+ hideCreate={
+ data?.keystone.adminMeta.lists.find((list: any) => list.key === key)
+ ?.hideCreate ?? false
+ }
+ key={key}
+ listKey={key}
+ />
+ )
+ })}
+
+ )
+ })()
+
+ return (
+ Dashboard}>
+ Lists
+
+ {stateAwareElement}
+
)
}
+
+function ListCard ({ listKey, count, hideCreate }: ListCardProps) {
+ const list = useList(listKey)
+ const countElementId = useId()
+ const countElement = (() => {
+ if (list.isSingleton) {
+ return null
+ }
+
+ switch (count.type) {
+ case 'success':
+ return (
+
+ {count.count} item{count.count !== 1 ? 's' : ''}
+
+ )
+ case 'error':
+ return {count.message}
+ case 'loading':
+ return --
+ default:
+ return No access
+ }
+ })()
+
+ return (
+
+
+
+
+ {list.label}
+
+
+
+ {countElement}
+
+
+ {hideCreate === false && !list.isSingleton && (
+
+
+
+ Add {list.singular.toLowerCase()}
+
+ )}
+
+ )
+}
+
+function CardLink (props: PropsWithChildren<{ href: string }>) {
+ const ref = useRef(null)
+ const { isPressed, linkProps } = useLink(props, ref)
+ return (
+
+
+
+ )
+}
diff --git a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/common.tsx b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/common.tsx
index e8aba4cd939..127829af6a2 100644
--- a/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/common.tsx
+++ b/packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/common.tsx
@@ -1,115 +1,133 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
+import React, {
+ type HTMLAttributes,
+ type ReactNode,
+ Fragment,
+} from 'react'
+import { useRouter } from 'next/router'
+
+import { Breadcrumbs, Item } from '@keystar/ui/breadcrumbs'
+import { Grid, HStack } from '@keystar/ui/layout'
+import { breakpointQueries, css, tokenSchema } from '@keystar/ui/style'
+import { Heading, Text } from '@keystar/ui/typography'
-import { Heading, jsx, useTheme } from '@keystone-ui/core'
-import { ChevronRightIcon } from '@keystone-ui/icons/icons/ChevronRightIcon'
-import { Fragment, type HTMLAttributes, type ReactNode } from 'react'
import { Container } from '../../../../admin-ui/components/Container'
-import { Link } from '../../../../admin-ui/router'
-import { type ListMeta } from '../../../../types'
+import type { ListMeta } from '../../../../types'
+
+type ItemPageHeaderProps = {
+ label: string
+ list: ListMeta
+ title: string
+}
-export function ItemPageHeader (props: { list: ListMeta, label: string }) {
- const { palette, spacing } = useTheme()
+export function ItemPageHeader (props: ItemPageHeaderProps) {
+ const { label, list, title = label } = props
+ const router = useRouter()
return (
-
-
+ {list.isSingleton ? (
+ {list.label}
+ ) : (
+
+
+ -
+ {list.label}
+
+ -
+ {label}
+
+
+
+ {/* Every page must have an H1 for accessibility. */}
+
+ {title}
+
+
+ )}
)
}
export function ColumnLayout (props: HTMLAttributes) {
- const { spacing } = useTheme()
-
return (
// this container must be relative to catch absolute children
// particularly the "expanded" document-field, which needs a height of 100%
-
+
)
}
-export function BaseToolbar (props: { children: ReactNode }) {
- const { colors, spacing } = useTheme()
-
+export function StickySidebar (props: HTMLAttributes) {
return (
+ )
+}
+
+export function BaseToolbar (props: { children: ReactNode }) {
+ return (
+
- {props.children}
-
+
-
-
- Create {list.singular}
-
- )}
-
- )
-}
-
-function CreateButton (props: LinkProps) {
- const theme = useTheme()
- return (
-
- )
}
export function HomePage () {
@@ -122,7 +49,7 @@ export function HomePage () {
}
${Object.values(lists)
.filter(list => !list.isSingleton)
- .map(list => `${list.key}: ${list.gqlNames.listQueryCountName}`)
+ .map(list => `${list.key}: ${list.graphql.names.listQueryCountName}`)
.join('\n')}
}`,
[lists]
@@ -131,58 +58,170 @@ export function HomePage () {
const dataGetter = makeDataGetter(data, error?.graphQLErrors)
- return (
- {list.label}
- {list.isSingleton ? null : count.type === 'success' ? ( - - {count.count} item{count.count !== 1 ? 's' : ''} - - ) : count.type === 'error' ? ( - count.message - ) : count.type === 'loading' ? ( -
- {props.list.isSingleton ? (
- {props.list.label}
- ) : (
-
-
-
- {props.list.label}
-
-
-
- {props.label}
-
-
- )}
-
+
-
-
-
- {props => (
-
- )}
-
-
-
-
- {
- if (!Array.isArray(options)) return
- setNewSelectedFields(options.map(x => x.value))
- }}
- isMulti
- value={fields.filter(option => selectedFields.has(option.value))}
- options={fields}
- components={fieldSelectionOptionsComponents}
- />
-
-
-
-
-
- {state.kind !== 'selecting-field' && (
-
- )}
-
- {(() => {
- switch (state.kind) {
- case 'selecting-field': {
- return 'Filter'
- }
- case 'filter-value': {
- return list.fields[state.fieldPath].label
- }
- }
- })()}
-
-
-
-
-
-
- {list.description}
- )} -
- {list.label}
-
- - {children} -
-} +const LIST_PAGE_TITLE_ID = 'keystone-list-page-title' -function SortDirectionArrow ({ direction }: { direction: 'ASC' | 'DESC' }) { - const size = '0.25em' - return ( - - ) -} - -function DeleteManyButton ({ - selectedItems, - list, - refetch, +function ListPageHeader ({ + listKey, + showCreate, }: { - selectedItems: ReadonlySetYou don't have access to this page.
- {sessionsEnabled ?
+ |
{children}
- |
+
)
}
diff --git a/packages/core/src/admin-ui/components/CellLink.tsx b/packages/core/src/admin-ui/components/CellLink.tsx
index c07409bd67a..05932fe1bcc 100644
--- a/packages/core/src/admin-ui/components/CellLink.tsx
+++ b/packages/core/src/admin-ui/components/CellLink.tsx
@@ -1,16 +1,17 @@
/** @jsxRuntime classic */
/** @jsx jsx */
-import { jsx, useTheme } from '@keystone-ui/core'
+import Link, { type LinkProps } from 'next/link'
+import { type AnchorHTMLAttributes } from 'react'
-import { Link, type LinkProps } from '../router'
+import { jsx, useTheme } from '@keystone-ui/core'
/**
* This is the component you should use when linking a Cell to an item (i.e when the Cell supports
* the linkTo prop)
*/
-export const CellLink = (props: LinkProps) => {
+export const CellLink = (props: LinkProps & AnchorHTMLAttributes) {
+ return
- {children}
-
-)
+ />
+}
diff --git a/packages/core/src/admin-ui/components/CreateButtonLink.tsx b/packages/core/src/admin-ui/components/CreateButtonLink.tsx
index f3a7c2e1ef8..b5663881b47 100644
--- a/packages/core/src/admin-ui/components/CreateButtonLink.tsx
+++ b/packages/core/src/admin-ui/components/CreateButtonLink.tsx
@@ -1,26 +1,18 @@
-/** @jsxRuntime classic */
-/** @jsx jsx */
-import { Button } from '@keystone-ui/button'
-import { jsx } from '@keystone-ui/core'
+import React from 'react'
+import { Button } from '@keystar/ui/button'
+import { Text } from '@keystar/ui/typography'
+
import type { ListMeta } from '../../types'
-import { Link } from '../router'
-export function CreateButtonLink (props: { list: ListMeta }) {
+export function CreateButtonLink (props: { children?: string, list: ListMeta }) {
+ const { list, children = `Create ${list.singular}` } = props
return (
)
}
diff --git a/packages/core/src/admin-ui/components/CreateItemDialog.tsx b/packages/core/src/admin-ui/components/CreateItemDialog.tsx
new file mode 100644
index 00000000000..0e0e7746ce3
--- /dev/null
+++ b/packages/core/src/admin-ui/components/CreateItemDialog.tsx
@@ -0,0 +1,85 @@
+/** @jsxRuntime classic */
+/** @jsx jsx */
+
+import { ButtonGroup, Button } from '@keystar/ui/button'
+import { Dialog, useDialogContainer } from '@keystar/ui/dialog'
+import { Content } from '@keystar/ui/slots'
+import { Heading } from '@keystar/ui/typography'
+
+import { jsx, Box } from '@keystone-ui/core'
+import { LoadingDots } from '@keystone-ui/loading'
+
+import { useKeystone, useList } from '../context'
+
+import { Fields } from '../utils/Fields'
+import { useCreateItem } from '../utils/useCreateItem'
+import { GraphQLErrorNotice } from './GraphQLErrorNotice'
+import { useId } from 'react'
+
+export function CreateItemDialog (props: {
+ listKey: string
+ onCreate: (item: { id: string, label: string }) => void
+}) {
+ const { createViewFieldModes } = useKeystone()
+ const dialogState = useDialogContainer()
+ const list = useList(props.listKey)
+ const formId = useId()
+ const createItemState = useCreateItem(list)
+
+ const handleCreate = async () => {
+ const item = await createItemState.create()
+ if (!item) return
+
+ props.onCreate({
+ id: item.id as string,
+ label: (item.label as string) ?? `${item.id}`
+ })
+ dialogState.dismiss()
+ }
+
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/packages/core/src/admin-ui/components/CreateItemDrawer.tsx b/packages/core/src/admin-ui/components/CreateItemDrawer.tsx
index 4f7c32dd3cf..40f51d8c16a 100644
--- a/packages/core/src/admin-ui/components/CreateItemDrawer.tsx
+++ b/packages/core/src/admin-ui/components/CreateItemDrawer.tsx
@@ -34,9 +34,12 @@ export function CreateItemDrawer ({
loading: createItemState.state === 'loading',
action: async () => {
const item = await createItemState.create()
- if (item) {
- onCreate({ id: item.id, label: item.label || item.id })
- }
+ if (!item) return
+
+ onCreate({
+ id: item.id as string,
+ label: (item.label as string) ?? `${item.id}`
+ })
},
},
cancel: {
diff --git a/packages/core/src/admin-ui/components/EmptyState.tsx b/packages/core/src/admin-ui/components/EmptyState.tsx
new file mode 100644
index 00000000000..560d469aa8c
--- /dev/null
+++ b/packages/core/src/admin-ui/components/EmptyState.tsx
@@ -0,0 +1,56 @@
+import React, { type ReactElement, type ReactNode } from 'react'
+
+import { Icon } from '@keystar/ui/icon'
+import { Flex } from '@keystar/ui/layout'
+import { SlotProvider } from '@keystar/ui/slots'
+import { Heading, Text } from '@keystar/ui/typography'
+import { isReactText } from '@keystar/ui/utils'
+
+type EmptyStateProps =
+ | { children: ReactNode }
+ | {
+ title?: ReactNode
+ icon?: ReactElement
+ message?: ReactNode
+ actions?: ReactNode
+ }
+
+const emptyStateSlots = {
+ heading: { align: 'center', margin: 0 },
+ text: { align: 'center' }
+} as const
+export function EmptyState (props: EmptyStateProps) {
+ return (
+ Something went wrong.
-
-
+
-
- Keystone 6
+
+
)
}
+
+const LogoMark = (props: SVGAttributes
- {item && item.state === 'authenticated' ? (
- (
-
- )}
- >
-
-
- API Explorer
-
-
- GitHub Repository
-
-
- Keystone Documentation
-
- {item && item.state === 'authenticated' &&
-
- )}
-
- )
-}
+/** A navigation item represents a page in the AdminUI. */
+export function NavItem (props: NavItemProps) {
+ const { children, href, isSelected: isSelectedProp } = props
+ const router = useRouter()
-const PopoverLink = ({ children, ...props }: AllHTMLAttributes
- Signed in as {item.label}
-
- ) : (
- process.env.NODE_ENV !== 'production' && (
- GraphQL Playground and Docs
- )
- )}
-
- {process.env.NODE_ENV === 'production' ? (
- item && item.state === 'authenticated' &&
-
+
)
}
-export const ListNavItem = ({ list }: { list: ListMeta }) => {
- const router = useRouter()
- return (
-