From 99cf79806ad2488ff62b0af2335876d5dd6957e2 Mon Sep 17 00:00:00 2001 From: IzumiSy Date: Mon, 3 Feb 2025 17:01:05 +0900 Subject: [PATCH 1/3] Add datepicker field in example --- examples/mock-todoapp-server/src/server.ts | 7 +++- examples/vite-todoapp/package.json | 1 + examples/vite-todoapp/src/App.tsx | 34 +++-------------- examples/vite-todoapp/src/graphql/gql.ts | 8 ++-- examples/vite-todoapp/src/graphql/graphql.ts | 9 +++-- examples/vite-todoapp/src/main.tsx | 40 +++++++++----------- pnpm-lock.yaml | 3 ++ 7 files changed, 40 insertions(+), 62 deletions(-) diff --git a/examples/mock-todoapp-server/src/server.ts b/examples/mock-todoapp-server/src/server.ts index 22124860..41b7d8ca 100644 --- a/examples/mock-todoapp-server/src/server.ts +++ b/examples/mock-todoapp-server/src/server.ts @@ -9,6 +9,7 @@ type Todo = { name: string; priority: "HIGH" | "MEDIUM" | "LOW"; hasDone: boolean; + dueDate?: string; }; // In-memory store for todos @@ -25,6 +26,8 @@ const todos: Todo[] = [ // Define the GraphQL schema const typeDefs = gql` + scalar Date + enum TodoPriority { LOW MEDIUM @@ -36,6 +39,7 @@ const typeDefs = gql` name: String! priority: TodoPriority! hasDone: Boolean! + dueDate: Date } type TodosCollection { @@ -43,10 +47,9 @@ const typeDefs = gql` } input TodoInput { - id: ID name: String! priority: TodoPriority! - hasDone: Boolean + dueDate: Date } input MarkTodoDoneInput { diff --git a/examples/vite-todoapp/package.json b/examples/vite-todoapp/package.json index 2fb26bd0..e099cbc9 100644 --- a/examples/vite-todoapp/package.json +++ b/examples/vite-todoapp/package.json @@ -13,6 +13,7 @@ "@chakra-ui/react": "^3.2.5", "@emotion/css": "^11.13.5", "@emotion/react": "^11.14.0", + "@fabrix-framework/unstyled": "workspace:*", "@fabrix-framework/chakra-ui": "workspace:*", "@fabrix-framework/fabrix": "workspace:*", "graphql": "^16.9.0", diff --git a/examples/vite-todoapp/src/App.tsx b/examples/vite-todoapp/src/App.tsx index 148a0fd3..78f8e5c4 100644 --- a/examples/vite-todoapp/src/App.tsx +++ b/examples/vite-todoapp/src/App.tsx @@ -1,4 +1,3 @@ -import { Button, Heading, Stack } from "@chakra-ui/react"; import { FabrixComponent } from "@fabrix-framework/fabrix"; import { css } from "@emotion/css"; import { graphql } from "./graphql"; @@ -9,10 +8,8 @@ const containerClassName = css` function App() { return ( - - - Fabrix TODO app example - +
+
Fabrix TODO app example
- +
); } diff --git a/examples/vite-todoapp/src/graphql/gql.ts b/examples/vite-todoapp/src/graphql/gql.ts index 8a4678d2..a995302f 100644 --- a/examples/vite-todoapp/src/graphql/gql.ts +++ b/examples/vite-todoapp/src/graphql/gql.ts @@ -15,8 +15,8 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/ */ const documents = { "\n mutation createTodo($input: TodoInput!) {\n addTodo(input: $input) {\n id\n }\n }\n ": types.CreateTodoDocument, - "\n query todos {\n allTodos\n @fabrixView(\n input: [\n { field: \"collection\", config: { label: \"Your tasks\" } }\n { field: \"collection.id\", config: { hidden: true } }\n { field: \"collection.hasDone\", config: { label: \"Status\" } }\n {\n field: \"collection.actions\"\n config: {\n label: \"Actions\"\n index: -1\n componentType: {\n name: \"IDActionCell\"\n props: [\n { name: \"label\", value: \"Done\" }\n { name: \"color\", value: \"blue\" }\n { name: \"mutation\", value: \"markTodoDone\" }\n ]\n }\n }\n }\n ]\n ) {\n collection {\n id\n name\n priority\n hasDone\n }\n }\n }\n ": types.TodosDocument, - "\n mutation markTodoDone($input: MarkTodoDoneInput!) {\n markTodoDone(input: $input) {\n id\n }\n }\n ": types.MarkTodoDoneDocument, + "\n query todos {\n allTodos {\n collection {\n id\n name\n priority\n dueDate\n hasDone\n }\n }\n }\n ": types.TodosDocument, + "\n mutation markTodoDone($input: MarkTodoDoneInput!) {\n markTodoDone(input: $input) {\n id\n }\n }\n ": types.MarkTodoDoneDocument, }; /** @@ -40,11 +40,11 @@ export function graphql(source: "\n mutation createTodo($input: TodoInp /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ -export function graphql(source: "\n query todos {\n allTodos\n @fabrixView(\n input: [\n { field: \"collection\", config: { label: \"Your tasks\" } }\n { field: \"collection.id\", config: { hidden: true } }\n { field: \"collection.hasDone\", config: { label: \"Status\" } }\n {\n field: \"collection.actions\"\n config: {\n label: \"Actions\"\n index: -1\n componentType: {\n name: \"IDActionCell\"\n props: [\n { name: \"label\", value: \"Done\" }\n { name: \"color\", value: \"blue\" }\n { name: \"mutation\", value: \"markTodoDone\" }\n ]\n }\n }\n }\n ]\n ) {\n collection {\n id\n name\n priority\n hasDone\n }\n }\n }\n "): (typeof documents)["\n query todos {\n allTodos\n @fabrixView(\n input: [\n { field: \"collection\", config: { label: \"Your tasks\" } }\n { field: \"collection.id\", config: { hidden: true } }\n { field: \"collection.hasDone\", config: { label: \"Status\" } }\n {\n field: \"collection.actions\"\n config: {\n label: \"Actions\"\n index: -1\n componentType: {\n name: \"IDActionCell\"\n props: [\n { name: \"label\", value: \"Done\" }\n { name: \"color\", value: \"blue\" }\n { name: \"mutation\", value: \"markTodoDone\" }\n ]\n }\n }\n }\n ]\n ) {\n collection {\n id\n name\n priority\n hasDone\n }\n }\n }\n "]; +export function graphql(source: "\n query todos {\n allTodos {\n collection {\n id\n name\n priority\n dueDate\n hasDone\n }\n }\n }\n "): (typeof documents)["\n query todos {\n allTodos {\n collection {\n id\n name\n priority\n dueDate\n hasDone\n }\n }\n }\n "]; /** * The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients. */ -export function graphql(source: "\n mutation markTodoDone($input: MarkTodoDoneInput!) {\n markTodoDone(input: $input) {\n id\n }\n }\n "): (typeof documents)["\n mutation markTodoDone($input: MarkTodoDoneInput!) {\n markTodoDone(input: $input) {\n id\n }\n }\n "]; +export function graphql(source: "\n mutation markTodoDone($input: MarkTodoDoneInput!) {\n markTodoDone(input: $input) {\n id\n }\n }\n "): (typeof documents)["\n mutation markTodoDone($input: MarkTodoDoneInput!) {\n markTodoDone(input: $input) {\n id\n }\n }\n "]; export function graphql(source: string) { return (documents as any)[source] ?? {}; diff --git a/examples/vite-todoapp/src/graphql/graphql.ts b/examples/vite-todoapp/src/graphql/graphql.ts index c2d5f26a..41a58f34 100644 --- a/examples/vite-todoapp/src/graphql/graphql.ts +++ b/examples/vite-todoapp/src/graphql/graphql.ts @@ -14,6 +14,7 @@ export type Scalars = { Boolean: { input: boolean; output: boolean; } Int: { input: number; output: number; } Float: { input: number; output: number; } + Date: { input: any; output: any; } }; export type MarkTodoDoneInput = { @@ -43,6 +44,7 @@ export type Query = { export type Todo = { __typename?: 'Todo'; + dueDate?: Maybe; hasDone: Scalars['Boolean']['output']; id: Scalars['ID']['output']; name: Scalars['String']['output']; @@ -50,8 +52,7 @@ export type Todo = { }; export type TodoInput = { - hasDone?: InputMaybe; - id?: InputMaybe; + dueDate?: InputMaybe; name: Scalars['String']['input']; priority: TodoPriority; }; @@ -77,7 +78,7 @@ export type CreateTodoMutation = { __typename?: 'Mutation', addTodo?: { __typena export type TodosQueryVariables = Exact<{ [key: string]: never; }>; -export type TodosQuery = { __typename?: 'Query', allTodos?: { __typename?: 'TodosCollection', collection: Array<{ __typename?: 'Todo', id: string, name: string, priority: TodoPriority, hasDone: boolean } | null> } | null }; +export type TodosQuery = { __typename?: 'Query', allTodos?: { __typename?: 'TodosCollection', collection: Array<{ __typename?: 'Todo', id: string, name: string, priority: TodoPriority, dueDate?: any | null, hasDone: boolean } | null> } | null }; export type MarkTodoDoneMutationVariables = Exact<{ input: MarkTodoDoneInput; @@ -88,5 +89,5 @@ export type MarkTodoDoneMutation = { __typename?: 'Mutation', markTodoDone?: { _ export const CreateTodoDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"createTodo"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"TodoInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"addTodo"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode; -export const TodosDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"todos"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"allTodos"},"directives":[{"kind":"Directive","name":{"kind":"Name","value":"fabrixView"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"ListValue","values":[{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"field"},"value":{"kind":"StringValue","value":"collection","block":false}},{"kind":"ObjectField","name":{"kind":"Name","value":"config"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"label"},"value":{"kind":"StringValue","value":"Your tasks","block":false}}]}}]},{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"field"},"value":{"kind":"StringValue","value":"collection.id","block":false}},{"kind":"ObjectField","name":{"kind":"Name","value":"config"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"hidden"},"value":{"kind":"BooleanValue","value":true}}]}}]},{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"field"},"value":{"kind":"StringValue","value":"collection.hasDone","block":false}},{"kind":"ObjectField","name":{"kind":"Name","value":"config"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"label"},"value":{"kind":"StringValue","value":"Status","block":false}}]}}]},{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"field"},"value":{"kind":"StringValue","value":"collection.actions","block":false}},{"kind":"ObjectField","name":{"kind":"Name","value":"config"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"label"},"value":{"kind":"StringValue","value":"Actions","block":false}},{"kind":"ObjectField","name":{"kind":"Name","value":"index"},"value":{"kind":"IntValue","value":"-1"}},{"kind":"ObjectField","name":{"kind":"Name","value":"componentType"},"value":{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"name"},"value":{"kind":"StringValue","value":"IDActionCell","block":false}},{"kind":"ObjectField","name":{"kind":"Name","value":"props"},"value":{"kind":"ListValue","values":[{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"name"},"value":{"kind":"StringValue","value":"label","block":false}},{"kind":"ObjectField","name":{"kind":"Name","value":"value"},"value":{"kind":"StringValue","value":"Done","block":false}}]},{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"name"},"value":{"kind":"StringValue","value":"color","block":false}},{"kind":"ObjectField","name":{"kind":"Name","value":"value"},"value":{"kind":"StringValue","value":"blue","block":false}}]},{"kind":"ObjectValue","fields":[{"kind":"ObjectField","name":{"kind":"Name","value":"name"},"value":{"kind":"StringValue","value":"mutation","block":false}},{"kind":"ObjectField","name":{"kind":"Name","value":"value"},"value":{"kind":"StringValue","value":"markTodoDone","block":false}}]}]}}]}}]}}]}]}}]}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"collection"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"priority"}},{"kind":"Field","name":{"kind":"Name","value":"hasDone"}}]}}]}}]}}]} as unknown as DocumentNode; +export const TodosDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"todos"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"allTodos"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"collection"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"priority"}},{"kind":"Field","name":{"kind":"Name","value":"dueDate"}},{"kind":"Field","name":{"kind":"Name","value":"hasDone"}}]}}]}}]}}]} as unknown as DocumentNode; export const MarkTodoDoneDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"markTodoDone"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"MarkTodoDoneInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"markTodoDone"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode; \ No newline at end of file diff --git a/examples/vite-todoapp/src/main.tsx b/examples/vite-todoapp/src/main.tsx index 4fabf461..d779f27f 100644 --- a/examples/vite-todoapp/src/main.tsx +++ b/examples/vite-todoapp/src/main.tsx @@ -1,17 +1,12 @@ +import { createRoot } from "react-dom/client"; import { StrictMode } from "react"; -import { - ComponentRegistry, - FabrixProvider, - gql, -} from "@fabrix-framework/fabrix"; -import { ChakraUIRegistry } from "@fabrix-framework/chakra-ui"; -import { Provider as ChakraProvider } from "./components/ui/provider.tsx"; -import { IDActionCell } from "./components/IDActionCell.tsx"; +import { FabrixProvider, gql } from "@fabrix-framework/fabrix"; +import { UnstyledRegistry } from "@fabrix-framework/unstyled"; import App from "./App.tsx"; import "./index.css"; import "./columns.css"; -import { createRoot } from "react-dom/client"; +/* const TodoAppComponents = new ComponentRegistry({ custom: { unit: { @@ -19,23 +14,22 @@ const TodoAppComponents = new ComponentRegistry({ }, }, }); +*/ createRoot(document.getElementById("root")!).render( - - - - - + } + `} + > + + , ); diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 069e6001..226794eb 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -60,6 +60,9 @@ importers: '@fabrix-framework/fabrix': specifier: workspace:* version: link:../../packages/fabrix + '@fabrix-framework/unstyled': + specifier: workspace:* + version: link:../../packages/unstyled graphql: specifier: ^16.9.0 version: 16.10.0 From 9717136404ad87737e5b27210bfa3d72cbb10a99 Mon Sep 17 00:00:00 2001 From: IzumiSy Date: Tue, 4 Feb 2025 16:38:08 +0900 Subject: [PATCH 2/3] Fix build error in unstyled package --- packages/unstyled/src/components.tsx | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/packages/unstyled/src/components.tsx b/packages/unstyled/src/components.tsx index aa0c94e9..476de882 100644 --- a/packages/unstyled/src/components.tsx +++ b/packages/unstyled/src/components.tsx @@ -60,16 +60,12 @@ const tableView = (props: TableComponentProps) => { ); }; -const formView = (props: FormComponentProps) => { - return ( -
- {props.renderFields()} - {props.renderSubmit(({ submit }) => ( - - ))} -
- ); -}; +const formView = (props: FormComponentProps) => ( +
+ {props.renderFields()} + +
+); const FormFieldWrapper = ( props: React.PropsWithChildren< From e5a1cc1a177717bc6b56b246743236af43148b3c Mon Sep 17 00:00:00 2001 From: IzumiSy Date: Tue, 4 Feb 2025 17:08:31 +0900 Subject: [PATCH 3/3] Use unstyled --- examples/vite-todoapp/src/App.tsx | 16 +++------------- examples/vite-todoapp/src/graphql/gql.ts | 8 ++++---- examples/vite-todoapp/src/graphql/graphql.ts | 4 ++-- 3 files changed, 9 insertions(+), 19 deletions(-) diff --git a/examples/vite-todoapp/src/App.tsx b/examples/vite-todoapp/src/App.tsx index 78f8e5c4..5bd29bbb 100644 --- a/examples/vite-todoapp/src/App.tsx +++ b/examples/vite-todoapp/src/App.tsx @@ -14,27 +14,17 @@ function App() { containerClassName={containerClassName} query={graphql(` mutation createTodo($input: TodoInput!) { - addTodo(input: $input) { + addTodo(input: $input) @fabrixForm { id } } `)} - > - {({ getInput }) => - getInput({}, ({ Field, getAction }) => ( -
- - - - - )) - } - + /> ; -export const TodosDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"todos"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"allTodos"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"collection"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"priority"}},{"kind":"Field","name":{"kind":"Name","value":"dueDate"}},{"kind":"Field","name":{"kind":"Name","value":"hasDone"}}]}}]}}]}}]} as unknown as DocumentNode; +export const CreateTodoDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"createTodo"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"TodoInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"addTodo"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"directives":[{"kind":"Directive","name":{"kind":"Name","value":"fabrixForm"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode; +export const TodosDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"todos"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"allTodos"},"directives":[{"kind":"Directive","name":{"kind":"Name","value":"fabrixView"}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"collection"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"priority"}},{"kind":"Field","name":{"kind":"Name","value":"dueDate"}},{"kind":"Field","name":{"kind":"Name","value":"hasDone"}}]}}]}}]}}]} as unknown as DocumentNode; export const MarkTodoDoneDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"markTodoDone"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"MarkTodoDoneInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"markTodoDone"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"input"},"value":{"kind":"Variable","name":{"kind":"Name","value":"input"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"id"}}]}}]}}]} as unknown as DocumentNode; \ No newline at end of file