create-auto-app 0.1.0 → 0.1.2

package/templates/shopping-app/client/src/gql/graphql.ts

@@ -0,0 +1,106 @@
+/* eslint-disable */
+import { TypedDocumentNode as DocumentNode } from '@graphql-typed-document-node/core';
+export type Maybe<T> = T | null;
+export type InputMaybe<T> = Maybe<T>;
+export type Exact<T extends { [key: string]: unknown }> = { [K in keyof T]: T[K] };
+export type MakeOptional<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]?: Maybe<T[SubKey]> };
+export type MakeMaybe<T, K extends keyof T> = Omit<T, K> & { [SubKey in K]: Maybe<T[SubKey]> };
+/** All built-in and custom scalars, mapped to their actual values */
+export type Scalars = {
+  ID: string;
+  String: string;
+  Boolean: boolean;
+  Int: number;
+  Float: number;
+};
+
+export type AddItemsToCartInput = {
+  items: Scalars['String'];
+  sessionId: Scalars['String'];
+};
+
+export type EnterShoppingCriteriaInput = {
+  criteria: Scalars['String'];
+  sessionId: Scalars['String'];
+};
+
+export type Mutation = {
+  __typename?: 'Mutation';
+  addItemsToCart: MutationResponse;
+  enterShoppingCriteria: MutationResponse;
+  suggestShoppingItems: MutationResponse;
+};
+
+
+export type MutationAddItemsToCartArgs = {
+  input: AddItemsToCartInput;
+};
+
+
+export type MutationEnterShoppingCriteriaArgs = {
+  input: EnterShoppingCriteriaInput;
+};
+
+
+export type MutationSuggestShoppingItemsArgs = {
+  input: SuggestShoppingItemsInput;
+};
+
+export type MutationError = {
+  __typename?: 'MutationError';
+  message?: Maybe<Scalars['String']>;
+  type: Scalars['String'];
+};
+
+export type MutationResponse = {
+  __typename?: 'MutationResponse';
+  error?: Maybe<MutationError>;
+  success: Scalars['Boolean'];
+};
+
+export type Query = {
+  __typename?: 'Query';
+  suggestedItems: Array<SuggestedItems>;
+};
+
+
+export type QuerySuggestedItemsArgs = {
+  sessionId?: InputMaybe<Scalars['ID']>;
+};
+
+export type SuggestShoppingItemsInput = {
+  prompt: Scalars['String'];
+  sessionId: Scalars['String'];
+};
+
+export type SuggestedItems = {
+  __typename?: 'SuggestedItems';
+  items: Array<SuggestedItemsItems>;
+  sessionId: Scalars['String'];
+};
+
+export type SuggestedItemsItems = {
+  __typename?: 'SuggestedItemsItems';
+  name: Scalars['String'];
+  productId: Scalars['String'];
+  quantity: Scalars['Float'];
+  reason: Scalars['String'];
+};
+
+export type EnterShoppingCriteriaMutationVariables = Exact<{
+  input: EnterShoppingCriteriaInput;
+}>;
+
+
+export type EnterShoppingCriteriaMutation = { __typename?: 'Mutation', enterShoppingCriteria: { __typename?: 'MutationResponse', success: boolean, error?: { __typename?: 'MutationError', type: string, message?: string | null } | null } };
+
+export type GetSuggestedItemsQueryVariables = Exact<{
+  sessionId: Scalars['ID'];
+}>;
+
+
+export type GetSuggestedItemsQuery = { __typename?: 'Query', suggestedItems: Array<{ __typename?: 'SuggestedItems', items: Array<{ __typename?: 'SuggestedItemsItems', productId: string, name: string, quantity: number, reason: string }> }> };
+
+
+export const EnterShoppingCriteriaDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"mutation","name":{"kind":"Name","value":"EnterShoppingCriteria"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"input"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"EnterShoppingCriteriaInput"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"enterShoppingCriteria"},"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":"success"}},{"kind":"Field","name":{"kind":"Name","value":"error"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"type"}},{"kind":"Field","name":{"kind":"Name","value":"message"}}]}}]}}]}}]} as unknown as DocumentNode<EnterShoppingCriteriaMutation, EnterShoppingCriteriaMutationVariables>;
+export const GetSuggestedItemsDocument = {"kind":"Document","definitions":[{"kind":"OperationDefinition","operation":"query","name":{"kind":"Name","value":"GetSuggestedItems"},"variableDefinitions":[{"kind":"VariableDefinition","variable":{"kind":"Variable","name":{"kind":"Name","value":"sessionId"}},"type":{"kind":"NonNullType","type":{"kind":"NamedType","name":{"kind":"Name","value":"ID"}}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"suggestedItems"},"arguments":[{"kind":"Argument","name":{"kind":"Name","value":"sessionId"},"value":{"kind":"Variable","name":{"kind":"Name","value":"sessionId"}}}],"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"items"},"selectionSet":{"kind":"SelectionSet","selections":[{"kind":"Field","name":{"kind":"Name","value":"productId"}},{"kind":"Field","name":{"kind":"Name","value":"name"}},{"kind":"Field","name":{"kind":"Name","value":"quantity"}},{"kind":"Field","name":{"kind":"Name","value":"reason"}}]}}]}}]}}]} as unknown as DocumentNode<GetSuggestedItemsQuery, GetSuggestedItemsQueryVariables>;

package/templates/shopping-app/client/src/gql/index.ts

@@ -0,0 +1,2 @@
+export * from "./fragment-masking";
+export * from "./gql";

package/templates/shopping-app/client/src/graphql/mutations.ts

@@ -0,0 +1,13 @@
+import { graphql } from '../gql';
+
+export const EnterShoppingCriteria = graphql(`
+mutation EnterShoppingCriteria($input: EnterShoppingCriteriaInput!) {
+        enterShoppingCriteria(input: $input) {
+          success
+          error {
+            type
+            message
+          }
+        }
+      }
+`);

package/templates/shopping-app/client/src/graphql/queries.ts

@@ -0,0 +1,14 @@
+import { graphql } from '../gql';
+
+export const GetSuggestedItems = graphql(`
+query GetSuggestedItems($sessionId: ID!) {
+        suggestedItems(sessionId: $sessionId) {
+          items {
+            productId
+            name
+            quantity
+            reason
+          }
+        }
+      }
+`);

package/templates/shopping-app/client/src/hooks/use-mobile.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+const MOBILE_BREAKPOINT = 768;
+
+export function useIsMobile() {
+  const [isMobile, setIsMobile] = React.useState<boolean | undefined>(undefined);
+
+  React.useEffect(() => {
+    const mql = window.matchMedia(`(max-width: ${MOBILE_BREAKPOINT - 1}px)`);
+    const onChange = () => {
+      setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    };
+    mql.addEventListener('change', onChange);
+    setIsMobile(window.innerWidth < MOBILE_BREAKPOINT);
+    return () => mql.removeEventListener('change', onChange);
+  }, []);
+
+  return !!isMobile;
+}

package/templates/shopping-app/client/src/hooks/use-toast.ts

@@ -0,0 +1,186 @@
+import * as React from 'react';
+
+const TOAST_LIMIT = 1;
+const TOAST_REMOVE_DELAY = 1000000;
+
+type ToasterToast = any & {
+  id: string;
+  title?: React.ReactNode;
+  description?: React.ReactNode;
+  action?: any;
+};
+
+const actionTypes = {
+  ADD_TOAST: 'ADD_TOAST',
+  UPDATE_TOAST: 'UPDATE_TOAST',
+  DISMISS_TOAST: 'DISMISS_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST',
+} as const;
+
+let count = 0;
+
+function genId() {
+  count = (count + 1) % Number.MAX_SAFE_INTEGER;
+  return count.toString();
+}
+
+type ActionType = typeof actionTypes;
+
+type Action =
+  | {
+      type: ActionType['ADD_TOAST'];
+      toast: ToasterToast;
+    }
+  | {
+      type: ActionType['UPDATE_TOAST'];
+      toast: Partial<ToasterToast>;
+    }
+  | {
+      type: ActionType['DISMISS_TOAST'];
+      toastId?: ToasterToast['id'];
+    }
+  | {
+      type: ActionType['REMOVE_TOAST'];
+      toastId?: ToasterToast['id'];
+    };
+
+interface State {
+  toasts: ToasterToast[];
+}
+
+const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>();
+
+const addToRemoveQueue = (toastId: string) => {
+  if (toastTimeouts.has(toastId)) {
+    return;
+  }
+
+  const timeout = setTimeout(() => {
+    toastTimeouts.delete(toastId);
+    dispatch({
+      type: 'REMOVE_TOAST',
+      toastId: toastId,
+    });
+  }, TOAST_REMOVE_DELAY);
+
+  toastTimeouts.set(toastId, timeout);
+};
+
+export const reducer = (state: State, action: Action): State => {
+  switch (action.type) {
+    case 'ADD_TOAST':
+      return {
+        ...state,
+        toasts: [action.toast, ...state.toasts].slice(0, TOAST_LIMIT),
+      };
+
+    case 'UPDATE_TOAST':
+      return {
+        ...state,
+        toasts: state.toasts.map((t) => (t.id === action.toast.id ? { ...t, ...action.toast } : t)),
+      };
+
+    case 'DISMISS_TOAST': {
+      const { toastId } = action;
+
+      // ! Side effects ! - This could be extracted into a dismissToast() action,
+      // but I'll keep it here for simplicity
+      if (toastId) {
+        addToRemoveQueue(toastId);
+      } else {
+        state.toasts.forEach((toast) => {
+          addToRemoveQueue(toast.id);
+        });
+      }
+
+      return {
+        ...state,
+        toasts: state.toasts.map((t) =>
+          t.id === toastId || toastId === undefined
+            ? {
+                ...t,
+                open: false,
+              }
+            : t,
+        ),
+      };
+    }
+    case 'REMOVE_TOAST':
+      if (action.toastId === undefined) {
+        return {
+          ...state,
+          toasts: [],
+        };
+      }
+      return {
+        ...state,
+        toasts: state.toasts.filter((t) => t.id !== action.toastId),
+      };
+  }
+};
+
+const listeners: Array<(state: State) => void> = [];
+
+let memoryState: State = { toasts: [] };
+
+function dispatch(action: Action) {
+  memoryState = reducer(memoryState, action);
+  listeners.forEach((listener) => {
+    listener(memoryState);
+  });
+}
+
+type Toast = Omit<ToasterToast, 'id'>;
+
+function toast({ ...props }: Toast) {
+  const id = genId();
+
+  const update = (props: ToasterToast) =>
+    dispatch({
+      type: 'UPDATE_TOAST',
+      toast: { ...props, id },
+    });
+  const dismiss = () => dispatch({ type: 'DISMISS_TOAST', toastId: id });
+
+  dispatch({
+    type: 'ADD_TOAST',
+    toast: {
+      ...props,
+      id,
+      open: true,
+      onOpenChange: (open) => {
+        if (!open) dismiss();
+      },
+    },
+  });
+
+  return {
+    id: id,
+    dismiss,
+    update,
+  };
+}
+
+function useToast() {
+  const [state, setState] = React.useState<State>(memoryState);
+
+  React.useEffect(() => {
+    listeners.push(setState);
+    return () => {
+      const index = listeners.indexOf(setState);
+      if (index > -1) {
+        listeners.splice(index, 1);
+      }
+    };
+  }, [state]);
+
+  return {
+    ...state,
+    toast,
+    dismiss: (toastId?: string) => {
+      if (toastId) dispatch({ type: 'DISMISS_TOAST', toastId });
+    },
+  };
+}
+
+export { useToast, toast };

package/templates/shopping-app/client/src/index.css

@@ -0,0 +1,153 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+@layer base {
+:root {
+
+    --radius: 0.5rem;
+
+    --background: 0 0% 100%;
+
+    --foreground: 240 6% 10%;
+
+    --card: 0 0% 100%;
+
+    --card-foreground: 240 10% 4%;
+
+    --popover: 0 0% 100%;
+
+    --popover-foreground: 240 10% 4%;
+
+    --primary: 216 100% 43%;
+
+    --primary-foreground: 208 57% 91%;
+
+    --secondary: 240 5% 96%;
+
+    --secondary-foreground: 240 6% 10%;
+
+    --muted: 240 5% 96%;
+
+    --muted-foreground: 240 4% 46%;
+
+    --accent: 240 5% 96%;
+
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 72% 51%;
+
+    --destructive-foreground: 0 86% 97%;
+
+    --border: 240 6% 90%;
+
+    --input: 240 6% 90%;
+
+    --ring: 240 6% 10%;
+
+    --chart-1: 0 0% 70%;
+
+    --chart-2: 0 0% 70%;
+
+    --chart-3: 0 0% 70%;
+
+    --chart-4: 0 0% 70%;
+
+    --chart-5: 0 0% 70%;
+
+    --sidebar: 0 0% 100%;
+
+    --sidebar-foreground: 240 4% 16%;
+
+    --sidebar-primary: 216 100% 43%;
+
+    --sidebar-primary-foreground: 208 57% 91%;
+
+    --sidebar-accent: 240 5% 96%;
+
+    --sidebar-accent-foreground: 0 0% 98%;
+
+    --sidebar-border: 240 6% 90%;
+
+    --sidebar-ring: 240 6% 10%;
+
+}
+
+.dark {
+
+    --background: 240 6% 10%;
+
+    --foreground: 0 0% 98%;
+
+    --card: 240 10% 4%;
+
+    --card-foreground: 0 0% 98%;
+
+    --popover: 240 5% 26%;
+
+    --popover-foreground: 0 0% 98%;
+
+    --primary: 217 100% 68%;
+
+    --primary-foreground: 226 76% 27%;
+
+    --secondary: 240 5% 34%;
+
+    --secondary-foreground: 0 0% 98%;
+
+    --muted: 240 5% 34%;
+
+    --muted-foreground: 240 4% 46%;
+
+    --accent: 240 10% 4%;
+
+    --accent-foreground: 0 0% 98%;
+
+    --destructive: 0 91% 71%;
+
+    --destructive-foreground: 0 93% 94%;
+
+    --border: 240 5% 34%;
+
+    --input: 240 4% 46%;
+
+    --ring: 240 5% 84%;
+
+    --chart-1: 0 0% 70%;
+
+    --chart-2: 0 0% 70%;
+
+    --chart-3: 0 0% 70%;
+
+    --chart-4: 0 0% 70%;
+
+    --chart-5: 0 0% 70%;
+
+    --sidebar: 240 6% 10%;
+
+    --sidebar-foreground: 240 4% 16%;
+
+    --sidebar-primary: 217 100% 68%;
+
+    --sidebar-primary-foreground: 226 76% 27%;
+
+    --sidebar-accent: 240 10% 4%;
+
+    --sidebar-accent-foreground: 0 0% 98%;
+
+    --sidebar-border: 240 5% 34%;
+
+    --sidebar-ring: 240 5% 84%;
+
+}
+}
+
+@layer base {
+* {
+@apply border-border;
+}
+
+body {
+@apply bg-background text-foreground;
+}
+}

package/templates/shopping-app/client/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from 'clsx';
+import { twMerge } from 'tailwind-merge';
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/templates/shopping-app/client/src/main.tsx

@@ -0,0 +1,5 @@
+import { createRoot } from 'react-dom/client';
+import { App } from './App';
+import './index.css';
+
+createRoot(document.getElementById('root')!).render(<App />);

package/templates/shopping-app/client/src/mockApolloClient.ts

@@ -0,0 +1,93 @@
+// import { ApolloClient, InMemoryCache, HttpLink } from "@apollo/client";
+// import { MockedProvider } from "@apollo/client/testing";
+// import { gql } from "@apollo/client";
+
+// export const mocks = [
+//   {
+//     request: {
+//       query: gql`
+//         query GetTodo($id: ID!) {
+//           getTodo(id: $id) {
+//             id
+//             title
+//             description
+//             completed
+//             createdAt
+//           }
+//         }
+//       `,
+//       variables: { id: "1" },
+//     },
+//     result: {
+//       data: {
+//         getTodo: {
+//           id: "1",
+//           title: "Sample Todo",
+//           description: "This is a mock todo",
+//           completed: false,
+//           createdAt: "2025-06-16T15:22:00Z",
+//         },
+//       },
+//     },
+//   },
+//   {
+//     request: {
+//       query: gql`
+//         query GetAllTodos {
+//           getAllTodos {
+//             id
+//             title
+//             completed
+//           }
+//         }
+//       `,
+//     },
+//     result: {
+//       data: {
+//         getAllTodos: [
+//           { id: "1", title: "Todo 1", completed: false },
+//           { id: "2", title: "Todo 2", completed: true },
+//         ],
+//       },
+//     },
+//   },
+//   {
+//     request: {
+//       query: gql`
+//         mutation CreateTodo(
+//           $title: String!
+//           $description: String
+//           $userId: ID!
+//         ) {
+//           createTodo(
+//             title: $title
+//             description: $description
+//             userId: $userId
+//           ) {
+//             id
+//             title
+//             description
+//             completed
+//             createdAt
+//           }
+//         }
+//       `,
+//       variables: { title: "New Todo", description: null, userId: "1" },
+//     },
+//     result: {
+//       data: {
+//         createTodo: {
+//           id: "3",
+//           title: "New Todo",
+//           description: null,
+//           completed: false,
+//           createdAt: "2025-06-16T15:22:00Z",
+//         },
+//       },
+//     },
+//   },
+// ];
+
+// export const mockApolloClient = new ApolloClient({
+//   cache: new InMemoryCache(),
+// });

package/templates/shopping-app/client/src/pages/AssistantChatPage.tsx

@@ -0,0 +1,8 @@
+import { PageHeader } from "@/components/organisms/PageHeader";
+import { AssistantChatInterface } from "@/components/organisms/AssistantChatInterface";
+
+// Main page where users enter shopping criteria
+
+export function AssistantChatPage() {
+    return <div />;
+}

package/templates/shopping-app/client/src/pages/Index.tsx

@@ -0,0 +1,10 @@
+export const Index = () => {
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-background">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold mb-4">Welcome to Your Blank App</h1>
+        <p className="text-xl text-muted-foreground">Start building your amazing project here!</p>
+      </div>
+    </div>
+  );
+};

package/templates/shopping-app/client/src/pages/NotFound.tsx

@@ -0,0 +1,22 @@
+import { useLocation } from 'react-router-dom';
+import { useEffect } from 'react';
+
+export const NotFound = () => {
+  const location = useLocation();
+
+  useEffect(() => {
+    console.error('404 Error: User attempted to access non-existent route:', location.pathname);
+  }, [location.pathname]);
+
+  return (
+    <div className="min-h-screen flex items-center justify-center bg-gray-100">
+      <div className="text-center">
+        <h1 className="text-4xl font-bold mb-4">404</h1>
+        <p className="text-xl text-gray-600 mb-4">Oops! Page not found</p>
+        <a href="/" className="text-blue-500 hover:text-blue-700 underline">
+          Return to Home
+        </a>
+      </div>
+    </div>
+  );
+};

package/templates/shopping-app/client/src/pages/SuggestedItemsPage.tsx

@@ -0,0 +1,8 @@
+import { PageHeader } from "@/components/organisms/PageHeader";
+import { SuggestedItemsList } from "@/components/organisms/SuggestedItemsList";
+
+// Page displaying AI-suggested items for the shopping criteria
+
+export function SuggestedItemsPage() {
+    return <div />;
+}