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

Add datepicker field in example #178

Draft
IzumiSy wants to merge 3 commits into
base: main
Choose a base branch
from
Draft

Add datepicker field in example #178

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
99cf798
Add datepicker field in example
IzumiSy Feb 3, 2025
9717136
Fix build error in unstyled package
IzumiSy Feb 4, 2025
e5a1cc1
Use unstyled
IzumiSy Feb 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 5 additions & 2 deletions examples/mock-todoapp-server/src/server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ type Todo = {
name: string;
priority: "HIGH" | "MEDIUM" | "LOW";
hasDone: boolean;
dueDate?: string;
};

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

// Define the GraphQL schema
const typeDefs = gql`
scalar Date

enum TodoPriority {
LOW
MEDIUM
Expand All @@ -36,17 +39,17 @@ const typeDefs = gql`
name: String!
priority: TodoPriority!
hasDone: Boolean!
dueDate: Date
}

type TodosCollection {
collection: [Todo]!
}

input TodoInput {
id: ID
name: String!
priority: TodoPriority!
hasDone: Boolean
dueDate: Date
}

input MarkTodoDoneInput {
Expand Down
1 change: 1 addition & 0 deletions examples/vite-todoapp/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
48 changes: 7 additions & 41 deletions examples/vite-todoapp/src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -9,68 +8,35 @@ const containerClassName = css`

function App() {
return (
<Stack padding={10}>
<Heading textAlign="center" size="md">
Fabrix TODO app example
</Heading>
<div>
<div>Fabrix TODO app example</div>
<FabrixComponent
containerClassName={containerClassName}
query={graphql(`
mutation createTodo($input: TodoInput!) {
addTodo(input: $input) {
addTodo(input: $input) @fabrixForm {
id
}
}
`)}
>
{({ getInput }) =>
getInput({}, ({ Field, getAction }) => (
<form {...getAction()}>
<Field name="input.name" />
<Field name="input.priority" />
<Button type="submit">Add</Button>
</form>
))
}
</FabrixComponent>
/>
<FabrixComponent
containerClassName={containerClassName}
query={graphql(`
query todos {
allTodos
@fabrixView(
input: [
{ field: "collection", config: { label: "Your tasks" } }
{ field: "collection.id", config: { hidden: true } }
{ field: "collection.hasDone", config: { label: "Status" } }
{
field: "collection.actions"
config: {
label: "Actions"
index: -1
componentType: {
name: "IDActionCell"
props: [
{ name: "label", value: "Done" }
{ name: "color", value: "blue" }
{ name: "mutation", value: "markTodoDone" }
]
}
}
}
]
) {
allTodos @fabrixView {
collection {
id
name
priority
dueDate
hasDone
}
}
}
`)}
/>
</Stack>
</div>
);
}

Expand Down
12 changes: 6 additions & 6 deletions examples/vite-todoapp/src/graphql/gql.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,9 @@ import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/
* Learn more about it here: https://the-guild.dev/graphql/codegen/plugins/presets/preset-client#reducing-bundle-size
*/
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 mutation createTodo($input: TodoInput!) {\n addTodo(input: $input) @fabrixForm {\n id\n }\n }\n ": types.CreateTodoDocument,
"\n query todos {\n allTodos @fabrixView {\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,
};

/**
Expand All @@ -36,15 +36,15 @@ export function graphql(source: string): unknown;
/**
* 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 createTodo($input: TodoInput!) {\n addTodo(input: $input) {\n id\n }\n }\n "): (typeof documents)["\n mutation createTodo($input: TodoInput!) {\n addTodo(input: $input) {\n id\n }\n }\n "];
export function graphql(source: "\n mutation createTodo($input: TodoInput!) {\n addTodo(input: $input) @fabrixForm {\n id\n }\n }\n "): (typeof documents)["\n mutation createTodo($input: TodoInput!) {\n addTodo(input: $input) @fabrixForm {\n id\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 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 @fabrixView {\n collection {\n id\n name\n priority\n dueDate\n hasDone\n }\n }\n }\n "): (typeof documents)["\n query todos {\n allTodos @fabrixView {\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] ?? {};
Expand Down
11 changes: 6 additions & 5 deletions examples/vite-todoapp/src/graphql/graphql.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 = {
Expand Down Expand Up @@ -43,15 +44,15 @@ export type Query = {

export type Todo = {
__typename?: 'Todo';
dueDate?: Maybe<Scalars['Date']['output']>;
hasDone: Scalars['Boolean']['output'];
id: Scalars['ID']['output'];
name: Scalars['String']['output'];
priority: TodoPriority;
};

export type TodoInput = {
hasDone?: InputMaybe<Scalars['Boolean']['input']>;
id?: InputMaybe<Scalars['ID']['input']>;
dueDate?: InputMaybe<Scalars['Date']['input']>;
name: Scalars['String']['input'];
priority: TodoPriority;
};
Expand All @@ -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;
Expand All @@ -87,6 +88,6 @@ export type MarkTodoDoneMutationVariables = Exact<{
export type MarkTodoDoneMutation = { __typename?: 'Mutation', markTodoDone?: { __typename?: 'Todo', id: string } | null };


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>;
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>;
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<CreateTodoMutation, CreateTodoMutationVariables>;
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<TodosQuery, TodosQueryVariables>;
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>;
Loading