polen 0.10.0-next.13 → 0.10.0-next.3

package/src/template/components/Field.tsx

@@ -2,10 +2,10 @@ import { GrafaidOld } from '#lib/grafaid-old/index'
 import type { BoxProps } from '@radix-ui/themes'
 import { Box, Text } from '@radix-ui/themes'
 import type { FC } from 'react'
-import { ArgumentListAnnotation } from './ArgumentListAnnotation.tsx'
-import { DeprecationReason } from './DeprecationReason.tsx'
-import { Description } from './Description.tsx'
-import { TypeAnnotation } from './TypeAnnotation.tsx'
+import { ArgumentListAnnotation } from './ArgumentListAnnotation.jsx'
+import { DeprecationReason } from './DeprecationReason.jsx'
+import { Description } from './Description.jsx'
+import { TypeAnnotation } from './TypeAnnotation.jsx'
 
 export type Props = BoxProps & {
   data: GrafaidOld.GraphQLField

package/src/template/components/FieldList.tsx

@@ -1,7 +1,7 @@
 import { Grafaid } from '#lib/grafaid/index'
 import { Box } from '@radix-ui/themes'
 import type { FC } from 'react'
-import { Field } from './Field.tsx'
+import { Field } from './Field.jsx'
 
 export interface Props {
   data: Grafaid.Schema.TypesLike.Named

package/src/template/components/FieldListSection.tsx

@@ -2,7 +2,7 @@ import { Grafaid } from '#lib/grafaid/index'
 import { Box, Heading } from '@radix-ui/themes'
 import type { GraphQLNamedType } from 'graphql'
 import type { FC } from 'react'
-import { FieldList } from './FieldList.tsx'
+import { FieldList } from './FieldList.jsx'
 
 export interface Props {
   data: GraphQLNamedType

package/src/template/components/Link.tsx

@@ -2,9 +2,9 @@ import type { FC } from 'react'
 import type { LinkProps as LinkPropsReactRouter } from 'react-router'
 import { Link as LinkReactRouter, useLocation } from 'react-router'
 // todo: #lib/kit-temp does not work as import
-import { ObjPartition } from '../../lib/kit-temp.ts'
-import type { LinkPropsRadix } from './RadixLink.tsx'
-import { LinkRadix } from './RadixLink.tsx'
+import { ObjPartition } from '../../lib/kit-temp.js'
+import type { LinkPropsRadix } from './RadixLink.jsx'
+import { LinkRadix } from './RadixLink.jsx'
 
 const reactRouterPropKeys = [
   'discover',

package/src/template/components/NamedType.tsx

@@ -1,8 +1,8 @@
 import { Box, Heading, Text } from '@radix-ui/themes'
 import { type GraphQLNamedType } from 'graphql'
 import type { FC } from 'react'
-import { FieldListSection } from './FieldListSection.tsx'
-import { Markdown } from './Markdown.tsx'
+import { FieldListSection } from './FieldListSection.jsx'
+import { Markdown } from './Markdown.jsx'
 
 export interface Props {
   data: GraphQLNamedType

package/src/template/components/TypeAnnotation.tsx

@@ -2,7 +2,7 @@ import { Text } from '@radix-ui/themes'
 import type { GraphQLType } from 'graphql'
 import { isInputObjectType, isListType, isNamedType, isNonNullType, isScalarType } from 'graphql'
 import type { FC } from 'react'
-import { Link } from './Link.tsx'
+import { Link } from './Link.jsx'
 
 export interface Props {
   type: GraphQLType // Can be either GraphQLInputType or GraphQLOutputType

package/src/template/components/TypeFieldsLinkList.tsx

@@ -1,7 +1,7 @@
 import { Box, Flex, Heading } from '@radix-ui/themes'
 import type { GraphQLInterfaceType, GraphQLObjectType } from 'graphql'
 import type { FC } from 'react'
-import { Link } from './Link.tsx'
+import { Link } from './Link.jsx'
 
 export interface Props {
   type: GraphQLObjectType | GraphQLInterfaceType

package/src/template/components/TypeIndex.tsx

@@ -3,7 +3,7 @@ import { Box, Flex, Heading } from '@radix-ui/themes'
 import { Obj } from '@wollybeard/kit'
 import type { GraphQLNamedType, GraphQLSchema } from 'graphql'
 import type { FC } from 'react'
-import { Link } from './Link.tsx'
+import { Link } from './Link.jsx'
 
 export interface Props {
   schema: GraphQLSchema

package/src/template/components/graphql/graphql.tsx

@@ -1,2 +1,2 @@
-export * from './type-kind-icon.tsx'
-export * from './type-link.tsx'
+export * from './type-kind-icon.jsx'
+export * from './type-link.jsx'

package/src/template/components/graphql/index.ts

@@ -1 +1 @@
-export * as Graphql from './graphql.tsx'
+export * as Graphql from './graphql.jsx'

package/src/template/components/graphql/type-link.tsx

@@ -1,7 +1,7 @@
 import { Grafaid } from '#lib/grafaid/index'
 import { Code, Flex } from '@radix-ui/themes'
-import { Link } from '../Link.tsx'
-import { TypeKindIcon } from './graphql.tsx'
+import { Link } from '../Link.jsx'
+import { TypeKindIcon } from './graphql.jsx'
 import { typeKindTokensIndex } from './type-kind-tokens.ts'
 
 export const TypeLink: React.FC<{ type: Grafaid.Schema.TypesLike.Named }> = ({ type }) => {

package/src/template/components/sidebar/Sidebar.tsx

@@ -1,10 +1,10 @@
-import type { Content } from '#api/content/$'
+import type { FileRouter } from '#lib/file-router/index'
 import { Box } from '@radix-ui/themes'
 import type { BoxOwnProps, LayoutProps, MarginProps } from '@radix-ui/themes/props'
 import { Items } from './SidebarItem.tsx'
 
 interface SidebarProps extends LayoutProps, MarginProps, BoxOwnProps {
-  data: Content.Item[]
+  data: FileRouter.Sidebar.Item[]
   style?: React.CSSProperties
 }
 

package/src/template/components/sidebar/SidebarItem.tsx

@@ -1,16 +1,16 @@
-import type { Content } from '#api/content/$'
 import type { React } from '#dep/react/index'
+import type { FileRouter } from '#lib/file-router/index'
 import { Texts } from '#template/components/Texts/index'
-import { Box, Flex } from '@radix-ui/themes'
+import { Box, Flex, Text } from '@radix-ui/themes'
 import { useLocation } from 'react-router'
 import { getPathActiveReport, Link } from '../Link.tsx'
 
-export const Items: React.FC<{ items: Content.Item[] }> = ({ items }) => {
+export const Items: React.FC<{ items: FileRouter.Sidebar.Item[] }> = ({ items }) => {
   return (
     <Flex direction='column' gap='2px'>
-      {items.map((item, index) => (
+      {items.map((item) => (
         <Item
-          key={`${item.pathExp}-${index}`}
+          key={item.pathExp}
           item={item}
         />
       ))}
@@ -26,7 +26,7 @@ export const Items: React.FC<{ items: Content.Item[] }> = ({ items }) => {
 //
 //
 
-export const Item: React.FC<{ item: Content.Item }> = ({ item }) => {
+export const Item: React.FC<{ item: FileRouter.Sidebar.Item }> = ({ item }) => {
   if (item.type === `ItemLink`) {
     return <SBLink link={item} />
   }
@@ -47,7 +47,7 @@ export const Item: React.FC<{ item: Content.Item }> = ({ item }) => {
 //
 
 const SBLink: React.FC<{
-  link: Content.ItemLink | Content.ItemSection
+  link: FileRouter.Sidebar.ItemLink | FileRouter.Sidebar.ItemSection
 }> = ({ link }) => {
   const location = useLocation()
   const currentPathExp = location.pathname
@@ -81,7 +81,7 @@ const SBLink: React.FC<{
 //
 
 const Section: React.FC<{
-  section: Content.ItemSection
+  section: FileRouter.Sidebar.ItemSection
 }> = ({ section }) => {
   return (
     <Box mt='8'>
@@ -104,7 +104,7 @@ const Section: React.FC<{
 //
 
 const LinkedSection: React.FC<{
-  section: Content.ItemSection
+  section: FileRouter.Sidebar.ItemSection
 }> = ({ section }) => {
   return (
     <Box>
@@ -121,9 +121,9 @@ const LinkedSection: React.FC<{
             borderLeft: `1px solid var(--gray-5)`,
           }}
         >
-          {section.links.map((link, index) => (
+          {section.links.map((link) => (
             <SectionLink
-              key={`${link.pathExp}-${index}`}
+              key={link.pathExp}
               link={link}
             />
           ))}
@@ -133,7 +133,7 @@ const LinkedSection: React.FC<{
   )
 }
 
-const SectionLink: React.FC<{ link: Content.ItemLink }> = ({ link }) => {
+const SectionLink: React.FC<{ link: FileRouter.Sidebar.ItemLink }> = ({ link }) => {
   const location = useLocation()
   const active = getPathActiveReport(link.pathExp, location.pathname)
 

package/src/template/entry.client.tsx

@@ -2,12 +2,12 @@
 // But then, we won't get it from the client manifest. But we could get it from the server manifest. Should we do that?
 // But then, that wouldn't work for SPA. Does that matter? Just put a conditional here e.g. if (import.meta.env.PROD) ...?
 import '@radix-ui/themes/styles.css'
-import './styles/code-block.css'
+// import './styles/code-block.css' // TODO: Handle CSS in build process
 import { ReactDomClient } from '#dep/react-dom-client/index'
 import { StrictMode } from 'react'
 import { createBrowserRouter, RouterProvider } from 'react-router'
 import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
-import { routes } from './routes.tsx'
+import { routes } from './routes.jsx'
 
 // SPA
 

package/src/template/routes/changelog.tsx

@@ -1,7 +1,7 @@
 import { createRoute } from '#lib/react-router-aid/react-router-aid'
 import { createLoader, useLoaderData } from '#lib/react-router-loader/react-router-loader'
 import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
-import { Changelog } from '../components/Changelog.tsx'
+import { Changelog } from '../components/Changelog.jsx'
 
 const loader = createLoader(() => {
   return {

package/src/template/routes/reference.$type.$field.tsx

@@ -2,9 +2,9 @@ import { Grafaid } from '#lib/grafaid/index'
 import { ReactRouterAid } from '#lib/react-router-aid/index'
 import { useLoaderData } from '#lib/react-router-loader/react-router-loader'
 import { useParams } from 'react-router'
-import { Field } from '../components/Field.tsx'
-import { MissingSchema } from '../components/MissingSchema.tsx'
-import type { reference } from './reference.tsx'
+import { Field } from '../components/Field.jsx'
+import { MissingSchema } from '../components/MissingSchema.jsx'
+import type { reference } from './reference.jsx'
 
 const Component = () => {
   const params = useParams() as { type: string; field: string }

package/src/template/routes/reference.$type.tsx

@@ -1,9 +1,9 @@
 import { createRoute } from '#lib/react-router-aid/react-router-aid'
 import { useLoaderData } from '#lib/react-router-loader/react-router-loader'
 import { useParams } from 'react-router'
-import { MissingSchema } from '../components/MissingSchema.tsx'
-import { NamedType } from '../components/NamedType.tsx'
-import type { reference } from './reference.tsx'
+import { MissingSchema } from '../components/MissingSchema.jsx'
+import { NamedType } from '../components/NamedType.jsx'
+import type { reference } from './reference.jsx'
 
 const Component = () => {
   const params = useParams() as { type: string }

package/src/template/routes/reference.tsx

@@ -1,10 +1,11 @@
 import { createRoute } from '#lib/react-router-aid/react-router-aid'
 import { createLoader, useLoaderData } from '#lib/react-router-loader/react-router-loader'
-import { Box } from '@radix-ui/themes'
+import { Container, Flex } from '@radix-ui/themes'
 import { Outlet } from 'react-router'
 import PROJECT_DATA from 'virtual:polen/project/data.jsonsuper'
-import { MissingSchema } from '../components/MissingSchema.tsx'
-import { reference$type } from './reference.$type.tsx'
+import { MissingSchema } from '../components/MissingSchema.jsx'
+import { TypeIndex } from '../components/TypeIndex.jsx'
+import { reference$type } from './reference.$type.jsx'
 
 const loader = createLoader(() => {
   const latestSchemaVersion = PROJECT_DATA.schema?.versions[0].after ?? null
@@ -21,9 +22,12 @@ const Component = () => {
   }
 
   return (
-    <Box className='prose'>
-      <Outlet />
-    </Box>
+    <Flex direction='row' align='start'>
+      <TypeIndex schema={data.schema} />
+      <Container>
+        <Outlet />
+      </Container>
+    </Flex>
   )
 }