Merge pull request #14 from vintasoftware/darkmode

Darkmode

.eslintrc.js

@@ -59,5 +59,6 @@ module.exports = {
  patterns: ['@mui/*/*/*'],
  },
  ],
+ '@typescript-eslint/no-explicit-any': 'off',
  },
 };

README.md

@@ -1,8 +1,8 @@
-# AI Form Toolkit
+# GPTBundle
 
 Build and enhance your React forms with Artificial Intelligence. Integrated with Next.js server actions for maximum productivity.
 
-AI Form Toolkit facilitates adding AI capabilities to forms in React applications:
+GPTBundle facilitates adding AI capabilities to forms in React applications:
 
 - For your Product – autogenerate forms from existing content: checklists, surveys, exams, data collection, you name it!
 - For your Users – help users fill your product forms with AI-powered autofill capabilities.
@@ -15,10 +15,10 @@ Note that hosted examples are not interactive. See [Building](#building) below t
 
 ## Project Structure
 
-This is a multipackage monorepo that holds the two NPM projects necessary for AI Form Toolkit:
+This is a multipackage monorepo that holds the two NPM projects necessary for GPTBundle:
 
-- `@ai-form-toolkit/client`
-- `@ai-form-toolkit/server`
+- `@gptbundle/client`
+- `@gptbundle/server`
 
 Both are stored at `packages/` directory.
 
@@ -50,7 +50,7 @@ OPENAI_API_KEY=sk-...
 Run the docs project:
 
 ```bash
-pnpm -F ai-form-toolkit-docs run dev
+pnpm -F @gptbundle/docs run dev
 ```
 
 Then open `http://localhost:3000` in your browser.

docs/package.json

@@ -1,16 +1,17 @@
 {
- "name": "ai-form-toolkit-docs",
+ "name": "@gptbundle/docs",
  "version": "0.0.1",
  "private": true,
  "scripts": {
  "dev": "next dev",
- "build": "next build",
+ "prebuild": "pnpm -F @gptbundle/server build && pnpm -F @gptbundle/client build",
+ "build": "pnpm run prebuild && next build",
  "analyze": "ANALYZE=true next build",
  "start": "next start"
  },
  "dependencies": {
- "@ai-form-toolkit/client": "file:../packages/client",
- "@ai-form-toolkit/server": "file:../packages/server",
+ "@gptbundle/client": "workspace:../packages/client",
+ "@gptbundle/server": "workspace:../packages/server",
  "@emotion/react": "^11.11.3",
  "@emotion/styled": "^11.11.0",
  "@mdx-js/react": "^3.0.0",

docs/src/MDXProviderWrapper.tsx

@@ -10,6 +10,9 @@ const MDXProviderWrapper = ({ children }: { children: ReactNode }) => {
  h2: (props: HTMLAttributes<HTMLElement>) => <Typography component="h2" variant="h5" marginY={2} {...props} />,
  h3: (props: HTMLAttributes<HTMLElement>) => <Typography component="h3" variant="h6" marginY={2} {...props} />,
  p: (props: HTMLAttributes<HTMLElement>) => <Typography component="p" variant="body1" marginY={2} {...props} />,
+ a: (props: HTMLAttributes<HTMLElement>) => (
+ <Typography component="a" variant="body1" marginY={2} style={{ color: '#00f0ff', fontWeight: 600 }} {...props} />
+ ),
  };
 
  return <MDXProvider components={components}>{children}</MDXProvider>;

docs/src/MuiThemeWrapper.tsx

@@ -6,7 +6,41 @@ import { CssBaseline } from '@mui/material';
 
 const MuiThemeWrapper = ({ children }: { children: ReactNode }) => {
  const theme = createTheme({
+ palette: {
+ mode: 'dark',
+ primary: {
+ main: '#00F0FF',
+ dark: '#1766FF',
+ },
+ secondary: {
+ light: '#9E8FFF',
+ main: '#995AFF',
+ dark: '#15023D',
+ },
+ background: {
+ default: '#130B2F',
+ },
+ },
+ typography: {
+ fontFamily: 'DM Sans, sans-serif', // Set default font
+ },
  components: {
+ MuiCssBaseline: {
+ styleOverrides: `
+ h1 {
+ margin-bottom: 48px!important; 
+ }
+ h2 {
+ font-weight: 600!important;
+ }
+ h2,h3 {
+ margin-top: 32px!important; 
+ }
+ p, li {
+ line-height: 26.5px!important;
+ }
+ `,
+ },
  MuiButton: {
  styleOverrides: {
  root: {

docs/src/app/docs-layout.tsx

@@ -3,7 +3,7 @@
 import { ReactNode } from 'react';
 import { Box } from '@mui/material';
 import { GlobalStyles } from '@mui/system';
-import { Theme } from '@mui/material/styles';
+import docsMarkdownStyles from './docs-markdown-styles';
 
 import Layout from '@/layout';
 
@@ -12,48 +12,6 @@ type Props = {
 };
 
 export default function DocsLayout({ children }: Props) {
- const docsMarkdownStyles = (theme: Theme) => ({
- figure: {
- margin: 0,
- },
- pre: {
- overflowX: 'auto',
- borderRadius: theme.shape.borderRadius,
- padding: `${theme.spacing(1)} ${theme.spacing(0.5)}`,
- },
- 'span[data-highlighted-line]': {
- borderBottomColor: '#9333EA',
- backgroundColor: '#6B21A880',
- fontWeight: 700,
- color: '#E9D5FF',
- },
- // TODO: Use CodeBlock component instead. Configure it on MDXProviderWrapper.
- code: {
- counterReset: 'line',
- fontSize: '0.8125rem',
- },
- 'code > [data-line]::before': {
- counterIncrement: 'line',
- content: 'counter(line)',
- display: 'inline-block',
- width: theme.spacing(1),
- marginRight: theme.spacing(1.5),
- textAlign: 'right',
- color: 'gray',
- },
- 'code[data-line-numbers-max-digits="2"] > [data-line]::before': {
- width: theme.spacing(2),
- },
- 'code[data-line-numbers-max-digits="3"] > [data-line]::before': {
- width: theme.spacing(3),
- },
- img: {
- width: '100%',
- height: 'auto',
- border: `2px solid ${theme.palette.grey[200]}`,
- },
- });
-
  return (
  <>
  <GlobalStyles styles={docsMarkdownStyles} />

docs/src/app/docs-markdown-styles.tsx

@@ -0,0 +1,48 @@
+'use client';
+
+import { Theme } from '@mui/material/styles';
+
+const docsMarkdownStyles = (theme: Theme) => ({
+ figure: {
+ margin: 0,
+ },
+ pre: {
+ overflowX: 'auto',
+ borderRadius: theme.shape.borderRadius,
+ backgroundColor: '#12111a!important',
+ padding: `${theme.spacing(1)} ${theme.spacing(0.5)}`,
+ },
+ 'span[data-highlighted-line]': {
+ borderBottomColor: '#9333EA',
+ backgroundColor: '#6B21A880',
+ fontWeight: 700,
+ color: '#E9D5FF',
+ },
+ // TODO: Use CodeBlock component instead. Configure it on MDXProviderWrapper.
+ code: {
+ counterReset: 'line',
+ fontSize: '0.8125rem',
+ },
+ 'code > [data-line]::before': {
+ counterIncrement: 'line',
+ content: 'counter(line)',
+ display: 'inline-block',
+ width: theme.spacing(1),
+ marginRight: theme.spacing(1.5),
+ textAlign: 'right',
+ color: 'gray',
+ },
+ 'code[data-line-numbers-max-digits="2"] > [data-line]::before': {
+ width: theme.spacing(2),
+ },
+ 'code[data-line-numbers-max-digits="3"] > [data-line]::before': {
+ width: theme.spacing(3),
+ },
+ img: {
+ width: '100%',
+ height: 'auto',
+ border: `2px solid ${theme.palette.grey[200]}`,
+ },
+});
+
+export default docsMarkdownStyles;

docs/src/app/examples/assistant/form-assistant/page.tsx

@@ -0,0 +1,18 @@
+'use client';
+
+import { Box } from '@mui/material';
+import SingleFieldFormAssistant from '../single-field-assistant/page';
+import MultiFieldFormAssistant from '../multi-field-assistant/page';
+import ExamSchemaGenWithAssistantExample from '../gen-with-assistant/page';
+
+function FieldAssistantList() {
+ return (
+ <Box>
+ <SingleFieldFormAssistant />
+ <MultiFieldFormAssistant />
+ <ExamSchemaGenWithAssistantExample />
+ </Box>
+ );
+}
+
+export default FieldAssistantList;

docs/src/app/examples/assistant/gen-with-assistant/page.tsx

@@ -7,11 +7,15 @@ import { LoadingButton } from '@mui/lab';
 import ListAltOutlinedIcon from '@mui/icons-material/ListAltOutlined';
 import PsychologyOutlinedIcon from '@mui/icons-material/PsychologyOutlined';
 
-import { useGeneratedFormSchema, useFormAssistant } from '@ai-form-toolkit/client';
+import { useRequestDialog } from '../../../requestDialog';
+import { useGeneratedFormSchema, useFormAssistant } from '@gptbundle/client';
 import LoadingBackdrop from '@/components/Examples/LoadingBackdrop';
 import SchemaFormDemo from '@/components/Forms/SchemaFormDemo';
+import { h2Styles, boxForms } from '../../../../app/examples/formStyles';
 
 export default function ExamSchemaGenWithAssistantExample() {
+ const { requestDialog, renderDialog, isLoading } = useRequestDialog();
+
  const defaultContent = dedent`
  Technical Requirements for the job:
  Frontend:
@@ -34,7 +38,6 @@ export default function ExamSchemaGenWithAssistantExample() {
  const [content, setContent] = useState(defaultContent);
  const [prompt, setPrompt] = useState(defaultPrompt);
  const { formSchema, uiSchema, generateFormSchema } = useGeneratedFormSchema();
- const [isLoading, setIsLoading] = useState(false);
 
  const fieldToFill = Object.keys(formSchema?.properties || {})[0] || null;
  const fieldLabels = Object.entries(formSchema?.properties || {}).reduce((acc, [key, value]) => {
@@ -57,19 +60,19 @@ export default function ExamSchemaGenWithAssistantExample() {
  };
 
  return (
- <Stack spacing={2}>
+ <Stack spacing={2} sx={{ ...boxForms }}>
  <Stack spacing={2}>
  <LoadingBackdrop open={isLoading} />
-
- <Typography variant="h4">Generate and then autofill form:</Typography>
+ <Typography variant="h2" sx={{ ...h2Styles }}>
+ Generate Form Button + Auto-Fill Form:
+ </Typography>
  <Typography variant="body1">
  Code at <code>docs/src/app/examples/assistant/gen-with-assistant/page.tsx</code>
  </Typography>
  <Typography variant="body1">
  This form combines <code>useGeneratedFormSchema</code> with <code>useFormAssistant</code> hooks to generate a
  form from content + prompt, and then support GPT-4 autofill on it.
  </Typography>
-
  <TextField
  multiline
  fullWidth
@@ -98,10 +101,7 @@ export default function ExamSchemaGenWithAssistantExample() {
  loadingPosition="start"
  loading={isLoading}
  startIcon={<PsychologyOutlinedIcon />}
- onClick={() => {
- setIsLoading(true);
- fillSingleField(fieldToFill).finally(() => setIsLoading(false));
- }}
+ onClick={() => requestDialog(() => fillSingleField(fieldToFill))}
  >
  Autofill missing with GPT-4
  </LoadingButton>
@@ -111,10 +111,7 @@ export default function ExamSchemaGenWithAssistantExample() {
  loadingPosition="start"
  loading={isLoading}
  startIcon={<ListAltOutlinedIcon />}
- onClick={() => {
- setIsLoading(true);
- generateFormSchema(content, prompt).finally(() => setIsLoading(false));
- }}
+ onClick={() => requestDialog(() => generateFormSchema(content, prompt))}
  >
  Generate Form
  </LoadingButton>
@@ -124,11 +121,12 @@ export default function ExamSchemaGenWithAssistantExample() {
  formSchema={formSchema}
  uiSchema={uiSchema}
  onSubmit={onSubmit}
- // @ts-ignore
+ // @ts-expect-error - code sample
  formData={formValues}
- // @ts-ignore
+ // @ts-expect-error - code sample
  onChange={(e) => setFormValues(e.formValues)}
  />
+ {renderDialog()}
  </Stack>
  );
 }

docs/src/app/examples/assistant/multi-field-assistant/page.tsx

@@ -6,12 +6,15 @@ import { LoadingButton } from '@mui/lab';
 import AutoFixHighOutlinedIcon from '@mui/icons-material/AutoFixHighOutlined';
 import PsychologyOutlinedIcon from '@mui/icons-material/PsychologyOutlined';
 
-import { useFormAssistant } from '@ai-form-toolkit/client';
+import { useRequestDialog } from '../../../requestDialog';
+import { useFormAssistant } from '@gptbundle/client';
+import { h2Styles, boxForms } from '../../../../app/examples/formStyles';
 
 const CATEGORY_CHOICES = ['Bug', 'Feature', 'Improvement'];
 const PRIORITY_CHOICES = ['High', 'Medium', 'Low'];
 
 export default function MultiFieldFormAssistant() {
+ const { requestDialog, renderDialog, isLoading } = useRequestDialog();
  const [formValues, setFormValues] = useState<Record<string, string>>({
  title: 'Fix N+1s in Django codebase',
  description: 'Use prefetch...',
@@ -32,7 +35,7 @@ export default function MultiFieldFormAssistant() {
  priority: PRIORITY_CHOICES,
  },
  });
- const [isLoading, setIsLoading] = useState(false);
+
  const [isLoadingDescription, setIsLoadingDescription] = useState(false);
 
  const handleInputChange = (name: string, value: string | null) => {
@@ -44,12 +47,13 @@ export default function MultiFieldFormAssistant() {
 
  const handleSubmit = (event: FormEvent) => {
  event.preventDefault();
- console.log(formValues);
  };
 
  return (
- <Stack spacing={2}>
- <Typography variant="h4">GPT-4 form assistant (multi field)</Typography>
+ <Stack spacing={2} sx={{ ...boxForms }}>
+ <Typography variant="h2" sx={{ ...h2Styles }}>
+ Multi field Form
+ </Typography>
  <Typography variant="body1">
  Code at <code>docs/src/app/examples/assistant/multi-field-assistant/page.tsx</code>
  </Typography>
@@ -144,18 +148,18 @@ export default function MultiFieldFormAssistant() {
  startIcon={<PsychologyOutlinedIcon />}
  disabled={isLoading || isLoadingDescription}
  onClick={() => {
- setIsLoading(true);
- fillFields().finally(() => setIsLoading(false));
+ requestDialog(() => fillFields());
  }}
  >
  Autofill missing with GPT-4
  </LoadingButton>
- <Button type="submit" variant="contained">
+ <Button type="submit" variant="contained" disabled={isLoading}>
  Submit
  </Button>
  </Stack>
  </Stack>
  </form>
+ {renderDialog()}
  </Stack>
  );
 }