Skip to content
This repository was archived by the owner on Dec 25, 2025. It is now read-only.

Commit 99cf798

Browse files
IzumiSyIzumiSy
committed
Add datepicker field in example
1 parent b67ff63 commit 99cf798

7 files changed

Lines changed: 40 additions & 62 deletions

File tree

‎examples/mock-todoapp-server/src/server.ts‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ type Todo = {
99
name: string;
1010
priority: "HIGH" | "MEDIUM" | "LOW";
1111
hasDone: boolean;
12+
dueDate?: string;
1213
};
1314

1415
// In-memory store for todos
@@ -25,6 +26,8 @@ const todos: Todo[] = [
2526

2627
// Define the GraphQL schema
2728
const typeDefs = gql`
29+
scalar Date
30+
2831
enum TodoPriority {
2932
LOW
3033
MEDIUM
@@ -36,17 +39,17 @@ const typeDefs = gql`
3639
name: String!
3740
priority: TodoPriority!
3841
hasDone: Boolean!
42+
dueDate: Date
3943
}
4044
4145
type TodosCollection {
4246
collection: [Todo]!
4347
}
4448
4549
input TodoInput {
46-
id: ID
4750
name: String!
4851
priority: TodoPriority!
49-
hasDone: Boolean
52+
dueDate: Date
5053
}
5154
5255
input MarkTodoDoneInput {

‎examples/vite-todoapp/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@
1313
"@chakra-ui/react": "^3.2.5",
1414
"@emotion/css": "^11.13.5",
1515
"@emotion/react": "^11.14.0",
16+
"@fabrix-framework/unstyled": "workspace:*",
1617
"@fabrix-framework/chakra-ui": "workspace:*",
1718
"@fabrix-framework/fabrix": "workspace:*",
1819
"graphql": "^16.9.0",

‎examples/vite-todoapp/src/App.tsx‎

Lines changed: 5 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,3 @@
1-
import { Button, Heading, Stack } from "@chakra-ui/react";
21
import { FabrixComponent } from "@fabrix-framework/fabrix";
32
import { css } from "@emotion/css";
43
import { graphql } from "./graphql";
@@ -9,10 +8,8 @@ const containerClassName = css`
98

109
function App() {
1110
return (
12-
<Stack padding={10}>
13-
<Heading textAlign="center" size="md">
14-
Fabrix TODO app example
15-
</Heading>
11+
<div>
12+
<div>Fabrix TODO app example</div>
1613
<FabrixComponent
1714
containerClassName={containerClassName}
1815
query={graphql(`
@@ -37,40 +34,19 @@ function App() {
3734
containerClassName={containerClassName}
3835
query={graphql(`
3936
query todos {
40-
allTodos
41-
@fabrixView(
42-
input: [
43-
{ field: "collection", config: { label: "Your tasks" } }
44-
{ field: "collection.id", config: { hidden: true } }
45-
{ field: "collection.hasDone", config: { label: "Status" } }
46-
{
47-
field: "collection.actions"
48-
config: {
49-
label: "Actions"
50-
index: -1
51-
componentType: {
52-
name: "IDActionCell"
53-
props: [
54-
{ name: "label", value: "Done" }
55-
{ name: "color", value: "blue" }
56-
{ name: "mutation", value: "markTodoDone" }
57-
]
58-
}
59-
}
60-
}
61-
]
62-
) {
37+
allTodos {
6338
collection {
6439
id
6540
name
6641
priority
42+
dueDate
6743
hasDone
6844
}
6945
}
7046
}
7147
`)}
7248
/>
73-
</Stack>
49+
</div>
7450
);
7551
}
7652

‎examples/vite-todoapp/src/graphql/gql.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -15,8 +15,8 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
1515
*/
1616
const documents = {
1717
"\n mutation createTodo($input: TodoInput!) {\n addTodo(input: $input) {\n id\n }\n }\n ": types.CreateTodoDocument,
18-
"\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,
19-
"\n mutation markTodoDone($input: MarkTodoDoneInput!) {\n markTodoDone(input: $input) {\n id\n }\n }\n ": types.MarkTodoDoneDocument,
18+
"\n query todos {\n allTodos {\n collection {\n id\n name\n priority\n dueDate\n hasDone\n }\n }\n }\n ": types.TodosDocument,
19+
"\n mutation markTodoDone($input: MarkTodoDoneInput!) {\n markTodoDone(input: $input) {\n id\n }\n }\n ": types.MarkTodoDoneDocument,
2020
};
2121

2222
/**
@@ -40,11 +40,11 @@ export function graphql(source: "\n mutation createTodo($input: TodoInp
4040
/**
4141
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
4242
*/
43-
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 "];
43+
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 "];
4444
/**
4545
* The graphql function is used to parse GraphQL queries into a document that can be used by GraphQL clients.
4646
*/
47-
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 "];
47+
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 "];
4848

4949
export function graphql(source: string) {
5050
return (documents as any)[source] ?? {};

‎examples/vite-todoapp/src/graphql/graphql.ts‎

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ export type Scalars = {
1414
Boolean: { input: boolean; output: boolean; }
1515
Int: { input: number; output: number; }
1616
Float: { input: number; output: number; }
17+
Date: { input: any; output: any; }
1718
};
1819

1920
export type MarkTodoDoneInput = {
@@ -43,15 +44,15 @@ export type Query = {
4344

4445
export type Todo = {
4546
__typename?: 'Todo';
47+
dueDate?: Maybe<Scalars['Date']['output']>;
4648
hasDone: Scalars['Boolean']['output'];
4749
id: Scalars['ID']['output'];
4850
name: Scalars['String']['output'];
4951
priority: TodoPriority;
5052
};
5153

5254
export type TodoInput = {
53-
hasDone?: InputMaybe<Scalars['Boolean']['input']>;
54-
id?: InputMaybe<Scalars['ID']['input']>;
55+
dueDate?: InputMaybe<Scalars['Date']['input']>;
5556
name: Scalars['String']['input'];
5657
priority: TodoPriority;
5758
};
@@ -77,7 +78,7 @@ export type CreateTodoMutation = { __typename?: 'Mutation', addTodo?: { __typena
7778
export type TodosQueryVariables = Exact<{ [key: string]: never; }>;
7879

7980

80-
export type TodosQuery = { __typename?: 'Query', allTodos?: { __typename?: 'TodosCollection', collection: Array<{ __typename?: 'Todo', id: string, name: string, priority: TodoPriority, hasDone: boolean } | null> } | null };
81+
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 };
8182

8283
export type MarkTodoDoneMutationVariables = Exact<{
8384
input: MarkTodoDoneInput;
@@ -88,5 +89,5 @@ export type MarkTodoDoneMutation = { __typename?: 'Mutation', markTodoDone?: { _
8889

8990

9091
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<CreateTodoMutation, CreateTodoMutationVariables>;
91-
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<TodosQuery, TodosQueryVariables>;
92+
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<TodosQuery, TodosQueryVariables>;
9293
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<MarkTodoDoneMutation, MarkTodoDoneMutationVariables>;

‎examples/vite-todoapp/src/main.tsx‎

Lines changed: 17 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,35 @@
1+
import { createRoot } from "react-dom/client";
12
import { StrictMode } from "react";
2-
import {
3-
ComponentRegistry,
4-
FabrixProvider,
5-
gql,
6-
} from "@fabrix-framework/fabrix";
7-
import { ChakraUIRegistry } from "@fabrix-framework/chakra-ui";
8-
import { Provider as ChakraProvider } from "./components/ui/provider.tsx";
9-
import { IDActionCell } from "./components/IDActionCell.tsx";
3+
import { FabrixProvider, gql } from "@fabrix-framework/fabrix";
4+
import { UnstyledRegistry } from "@fabrix-framework/unstyled";
105
import App from "./App.tsx";
116
import "./index.css";
127
import "./columns.css";
13-
import { createRoot } from "react-dom/client";
148

9+
/*
1510
const TodoAppComponents = new ComponentRegistry({
1611
custom: {
1712
unit: {
1813
IDActionCell,
1914
},
2015
},
2116
});
17+
*/
2218

2319
createRoot(document.getElementById("root")!).render(
2420
<StrictMode>
25-
<ChakraProvider>
26-
<FabrixProvider
27-
url={"http://localhost:8001/graphql"}
28-
componentRegistry={ChakraUIRegistry.merge(TodoAppComponents)}
29-
operationSchema={gql`
30-
mutation markTodoDone($input: MarkTodoDoneInput!) {
31-
markTodoDone(input: $input) {
32-
id
33-
}
21+
<FabrixProvider
22+
url={"http://localhost:8001/graphql"}
23+
componentRegistry={UnstyledRegistry}
24+
operationSchema={gql`
25+
mutation markTodoDone($input: MarkTodoDoneInput!) {
26+
markTodoDone(input: $input) {
27+
id
3428
}
35-
`}
36-
>
37-
<App />
38-
</FabrixProvider>
39-
</ChakraProvider>
29+
}
30+
`}
31+
>
32+
<App />
33+
</FabrixProvider>
4034
</StrictMode>,
4135
);

‎pnpm-lock.yaml‎

Lines changed: 3 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)