tidy up

design-system/website/components/Navigation.tsx

@@ -6,7 +6,7 @@ import { jsx, useTheme } from '@keystone-ui/core'
 import Link from 'next/link'
 import { useRouter } from 'next/router'
 
-const Brand = () => {
+function Brand () {
   const { palette } = useTheme()
   return (
     <h2>
@@ -25,7 +25,7 @@ const Brand = () => {
 }
 
 type SectionProps = { label: string, children: ReactNode }
-const Section = ({ label, children }: SectionProps) => {
+function Section ({ label, children }: SectionProps) {
   return (
     <Fragment>
       <h3>{label}</h3>
@@ -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 (
     <Fragment>
       <Brand />

packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/id-field-view.tsx

@@ -4,7 +4,6 @@
 import { TextField } from '@keystar/ui/text-field'
 
 import { jsx } from '@keystone-ui/core'
-import { TextInput } from '@keystone-ui/fields'
 import type {
   CellComponent,
   FieldController,

packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/CreateItemPage/index.tsx

@@ -1,8 +1,8 @@
+import React from 'react'
 import { useRouter } from 'next/router'
 
 import { Button } from '@keystar/ui/button'
 import { VStack } from '@keystar/ui/layout'
-
 import { LoadingDots } from '@keystone-ui/loading'
 
 import { Fields } from '../../../../admin-ui/utils'
@@ -14,8 +14,7 @@ import { BaseToolbar, ColumnLayout, ItemPageHeader } from '../ItemPage/common'
 
 type CreateItemPageProps = { listKey: string }
 
-export const getCreateItemPage = (props: CreateItemPageProps) => () =>
-  <CreateItemPage {...props} />
+export const getCreateItemPage = (props: CreateItemPageProps) => () => <CreateItemPage {...props} />
 
 function CreateItemPage (props: CreateItemPageProps) {
   const router = useRouter()

packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/HomePage/index.tsx

@@ -1,4 +1,9 @@
-import { type PropsWithChildren, useId, useMemo, useRef } from 'react'
+import React, {
+  type PropsWithChildren,
+  useId,
+  useMemo,
+  useRef
+} from 'react'
 
 import { ActionButton } from '@keystar/ui/button'
 import { Icon } from '@keystar/ui/icon'

packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ItemPage/index.tsx

@@ -1,6 +1,4 @@
-import copyToClipboard from 'clipboard-copy'
-import { useRouter } from 'next/router'
-import {
+import React, {
   type PropsWithChildren,
   type ReactElement,
   Fragment,
@@ -11,6 +9,8 @@ import {
   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'
@@ -31,12 +31,12 @@ 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'

packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/FieldSelection.tsx

@@ -1,13 +1,16 @@
+import React, {
+  type Key,
+  useMemo,
+} from 'react'
 import { useRouter } from 'next/router'
-import { useMemo, type Key } from 'react'
 
 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'
 
-import { type ListMeta } from '../../../../types'
+import type { ListMeta } from '../../../../types'
 import { useSelectedFields } from './useSelectedFields'
 
 export function FieldSelection ({
@@ -41,7 +44,7 @@ export function FieldSelection ({
         isDisabled: selectedFields.size === 1 && selectedFields.has(fieldPath),
       }))
   }, [fieldModesByFieldPath, list.fields, selectedFields])
-  
+
   return (
     <MenuTrigger>
       <ActionButton isDisabled={isDisabled}>

packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/FilterAdd.tsx

@@ -1,11 +1,11 @@
 import { useRouter } from 'next/router'
-import { type FormEvent, Fragment, useMemo, useState, useRef } from 'react'
+import React, { type FormEvent, Fragment, useMemo, useState, useRef } from 'react'
 
 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, VStack } from '@keystar/ui/layout'
+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'
@@ -117,7 +117,7 @@ export function FilterAdd (props: {
       </DialogTrigger>
     )
   }
-  
+
   return (
     <Fragment>
       <MenuTrigger>

packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/FilterList.tsx

@@ -1,5 +1,5 @@
 import { useRouter } from 'next/router'
-import { type FormEvent, useState } from 'react'
+import React, { type FormEvent, useState } from 'react'
 
 import { ButtonGroup, Button } from '@keystar/ui/button'
 import { Dialog, DialogTrigger } from '@keystar/ui/dialog'
@@ -108,4 +108,4 @@ function FilterDialog ({
       </form>
     </Dialog>
   )
-}
+}

packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/Pagination.tsx

@@ -1,15 +1,13 @@
 import { useRouter } from 'next/router'
-import React, { type Key, type ReactNode, useEffect, useId, useMemo } from 'react'
+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 { css, tokenSchema } from '@keystar/ui/style'
 import { Text } from '@keystar/ui/typography'
-import { composeId } from '@keystar/ui/utils'
 
 type PaginationProps = {
   pageSize: number
@@ -213,4 +211,4 @@ function snapValueToClosest (input: number, range = PAGE_SIZES) {
 }
 function snapValueToNextAvailable (input: number, range = PAGE_SIZES) {
   return range.find(value => input <= value) ?? range[range.length - 1]
-}
+}

packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/ListPage/index.tsx

@@ -1,13 +1,11 @@
-import { useRouter } from 'next/router'
-import {
+import React, {
   type Key,
-  type HTMLAttributes,
-  type ReactNode,
   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'
@@ -17,7 +15,7 @@ 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 { Box, HStack, VStack } from '@keystar/ui/layout'
+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'
@@ -34,21 +32,12 @@ 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 { jsx, useTheme } from '@keystone-ui/core'
-import { CheckboxControl } from '@keystone-ui/fields'
-import { ArrowRightCircleIcon } from '@keystone-ui/icons/icons/ArrowRightCircleIcon'
-import { useToasts } from '@keystone-ui/toast'
-
-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 } from '../../../../admin-ui/components/PageContainer'
 import { useList } from '../../../../admin-ui/context'
 import { EmptyState } from '../../../../admin-ui/components/EmptyState'
@@ -276,10 +265,10 @@ function ListPage ({ listKey }: ListPageProps) {
       {error?.graphQLErrors.length || error?.networkError ? (
         <GraphQLErrorNotice errors={error?.graphQLErrors} networkError={error?.networkError} />
       ) : null}
-      
+
       {/* FIXME: consolidate error messages. */}
       {/* {metaQuery.error ? 'Error...' : null} */}
-      
+
       {data && metaQuery.data ? (
         <VStack flex gap="large" paddingY="xlarge" minHeight={0} minWidth={0}>
           {/* FIXME: this is really weird; not sure where it should live. */}
@@ -380,12 +369,7 @@ function ListTable ({
 }) {
   const list = useList(listKey)
   const router = useRouter()
-  const shouldShowLinkIcon =
-    !list.fields[selectedFields.keys().next().value].views.Cell.supportsLinkTo
-
-  // New stuff
-  const [selectedKeys, setSelectedKeys] = useState<SelectedKeys>(() => new Set([])
-  )
+  const [selectedKeys, setSelectedKeys] = useState<SelectedKeys>(() => new Set([]))
   const onSortChange = (sortDescriptor: SortDescriptor) => {
     const sortBy = sortDescriptor.direction === 'ascending' ? `-${sortDescriptor.column}` : sortDescriptor.column
     router.push({ query: { ...router.query, sortBy } })
@@ -453,9 +437,8 @@ function ListTable ({
               return (
                 <Row href={`/${list.path}/${row?.id}`}>
                   {key => {
-                    const field = list.fields[key]
-                    const CellValue = field.views.Cell
-
+                    // TODO: FIXME
+                    // const field = list.fields[key]
                     return (
                       <Cell>
                         {row[key]?.toString()}
@@ -476,7 +459,7 @@ function ListTable ({
                     )
                   }}
               </Row>
-            ) 
+            )
           }}
           </TableBody>
         </TableView>
@@ -504,7 +487,7 @@ function ListTable ({
                       ids.push(item.id)
                     }
                   }
-                  
+
                   setIdsForDeletion(new Set(ids))
                 } else {
                   setIdsForDeletion(selectedKeys)
@@ -556,15 +539,15 @@ function parseSortQuery (queryString?: string | string[]): SortDescriptor {
 
   const column = queryString.startsWith('-') ? queryString.slice(1) : queryString
   const direction = queryString.startsWith('-') ? 'ascending' : 'descending'
-  
+
   return { column, direction }
 }
 
 function DeleteItemsDialog (props: { items: Set<Key>, listKey: string, refetch: () => void }) {
   const { items, listKey, refetch } = props
   const list = useList(listKey)
 
-  const [deleteItems, deleteItemsState] = useMutation(
+  const [deleteItems] = useMutation(
     useMemo(
       () =>
         gql`
@@ -590,7 +573,7 @@ function DeleteItemsDialog (props: { items: Set<Key>, listKey: string, refetch:
       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[
+    const { successfulItems, unsuccessfulItems } = data[
       list.gqlNames.deleteManyMutationName
     ].reduce(
       (

packages/core/src/___internal-do-not-use-will-break-in-patch/admin-ui/pages/NoAccessPage/index.tsx

@@ -1,3 +1,4 @@
+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'
@@ -9,7 +10,7 @@ type NoAccessPage = { sessionsEnabled: boolean }
 
 export const getNoAccessPage = (props: NoAccessPage) => () => <NoAccessPage {...props} />
 
-export const NoAccessPage = ({ sessionsEnabled }: NoAccessPage) => {
+export function NoAccessPage ({ sessionsEnabled }: NoAccessPage) {
   return (
     <ErrorContainer>
       <Icon color="neutral" src={shieldAlertIcon} size="large" />

packages/core/src/admin-ui/components/Container.tsx

@@ -1,11 +1,11 @@
+import React from 'react'
 import { type PropsWithChildren } from 'react'
-
 import { type BoxProps, Box } from '@keystar/ui/layout'
 
-export const Container = (props: PropsWithChildren<BoxProps>) => (
-  <Box
+export function Container (props: PropsWithChildren<BoxProps>) {
+  return <Box
     minWidth={0} // fix flex overflow issues
     maxWidth="container.medium"
     {...props}
   />
-)
+}

packages/core/src/admin-ui/components/CreateButtonLink.tsx

@@ -1,3 +1,4 @@
+import React from 'react'
 import { Button } from '@keystar/ui/button'
 import { Text } from '@keystar/ui/typography'
 

packages/core/src/admin-ui/components/Errors.tsx

@@ -1,4 +1,4 @@
-import { Component, type ReactNode } from 'react'
+import React, { Component, type ReactNode } from 'react'
 
 import { Button } from '@keystar/ui/button'
 import { Icon } from '@keystar/ui/icon'

packages/core/src/admin-ui/components/Logo.tsx

@@ -1,17 +1,13 @@
+import React from 'react'
 import Link from 'next/link'
-
 import { css, tokenSchema } from '@keystar/ui/style'
 import { Heading } from '@keystar/ui/typography'
 
 import { useKeystone } from '../context'
 
 export function Logo () {
   const { adminConfig } = useKeystone()
-
-  if (adminConfig.components?.Logo) {
-    return <adminConfig.components.Logo />
-  }
-
+  if (adminConfig.components?.Logo) return <adminConfig.components.Logo />
   return <DefaultLogo />
 }