@learncard/create-http-bridge 1.1.34

package/cli/Form.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import { Box, useFocusManager } from 'ink';
+import { Updater } from 'use-immer';
+
+import { curriedStateSlice } from './curriedStateSlice';
+
+import Input from './Input';
+import Button from './Button';
+
+import { FormState } from './types';
+import { generateRandomSeed } from './random';
+
+type FormProps = {
+    state: FormState;
+    setState: Updater<FormState>;
+    onSubmit: () => void;
+    onCancel: () => void;
+};
+
+const Form: React.FC<FormProps> = ({ state, setState, onSubmit, onCancel }) => {
+    const { focus } = useFocusManager();
+
+    const updateSlice = curriedStateSlice(setState);
+
+    return (
+        <Box
+            flexGrow={1}
+            flexDirection="column"
+            padding={2}
+            borderStyle="round"
+            borderColor="yellow"
+        >
+            <Box flexGrow={1} flexDirection="column" alignItems="center">
+                <Box marginBottom={2} padding={1} flexDirection="column" borderStyle="round">
+                    <Input
+                        disabled
+                        focusId="name"
+                        prompt="Name:"
+                        value={state.name}
+                        onChange={updateSlice('name')}
+                        onSubmit={() => focus('editName')}
+                    />
+                    <Input
+                        marginTop={1}
+                        disabled
+                        focusId="seed"
+                        prompt="Seed:"
+                        value={state.seed}
+                        onChange={updateSlice('seed')}
+                        onSubmit={() => focus('editSeed')}
+                    />
+                </Box>
+
+                <Button autoFocus focusId="editName" onClick={() => focus('name')} width={25}>
+                    Edit Name
+                </Button>
+                <Button onClick={() => updateSlice('seed', generateRandomSeed())} width={25}>
+                    Generate Random Seed
+                </Button>
+                <Button
+                    focusId="editSeed"
+                    onClick={() => {
+                        updateSlice('seed', '');
+                        focus('seed');
+                    }}
+                    width={25}
+                >
+                    Enter Custom Seed
+                </Button>
+            </Box>
+
+            <Box height={5} width="100%" padding={2} justifyContent="space-between">
+                <Button onClick={onSubmit}>Ok</Button>
+                <Button onClick={onCancel}>Cancel</Button>
+            </Box>
+        </Box>
+    );
+};
+
+export default Form;

package/cli/FullScreenBox.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import { Box } from 'ink';
+import useStdOutDimensions from 'ink-use-stdout-dimensions';
+
+const FullScreenBox: typeof Box = React.forwardRef(function FullScreenBox(
+    { children, ...props },
+    ref
+) {
+    const [width, height] = useStdOutDimensions();
+
+    return (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <Box width={Math.min(width, 150)} height={Math.min(height - 1, 50)} {...props} ref={ref}>
+            {children}
+        </Box>
+    );
+});
+
+export default FullScreenBox;

package/cli/Info.tsx

@@ -0,0 +1,79 @@
+import React, { useState, useEffect } from 'react';
+import { Text, Box } from 'ink';
+import SyntaxHighlight from 'ink-syntax-highlight';
+import { lookpath } from 'lookpath';
+
+type InfoProps = {
+    path: string;
+};
+
+const Info: React.FC<InfoProps> = ({ path }) => {
+    const [pnpm, setPnpm] = useState(true);
+    const [aws, setAws] = useState(true);
+
+    useEffect(() => {
+        const checkForBinaries = async () => {
+            setPnpm(!!(await lookpath('pnpm')));
+            setAws(!!(await lookpath('aws')));
+        };
+
+        checkForBinaries();
+    }, []);
+
+    return (
+        <Box
+            flexGrow={1}
+            flexDirection="column"
+            justifyContent="center"
+            alignItems="center"
+            padding={2}
+            borderStyle="round"
+            borderColor="yellow"
+        >
+            <Text>Success!</Text>
+            <Text>Your new Learn Card HTTP Bridge is ready to deploy!</Text>
+            {aws ? (
+                <Text>To deploy, run the following commands:</Text>
+            ) : (
+                <>
+                    <Text>It looks like you might not have serverless/AWS set up yet!</Text>
+                    <Text>
+                        Please review the instructions at
+                        https://www.serverless.com/framework/docs/tutorial if you have any issues
+                        deploying the Learn Card HTTP Bridge!
+                    </Text>
+                    <Text>
+                        After you're all set up, run the following commands to deploy the Learn Card
+                        HTTP Bridge!
+                    </Text>
+                </>
+            )}
+
+            <Box borderStyle="round" flexDirection="column">
+                {!pnpm && (
+                    <Text>
+                        <Text color="green">{'$ '}</Text>
+                        <SyntaxHighlight code="npm i -g pnpm # must use pnpm!" language="bash" />
+                    </Text>
+                )}
+                <Text>
+                    <Text color="green">{'$ '}</Text>
+                    <SyntaxHighlight
+                        code={`cd ${path}/packages/learn-card-bridge-http`}
+                        language="bash"
+                    />
+                </Text>
+                <Text>
+                    <Text color="green">{'$ '}</Text>
+                    <SyntaxHighlight code="pnpm i" language="bash" />
+                </Text>
+                <Text>
+                    <Text color="green">{'$ '}</Text>
+                    <SyntaxHighlight code="pnpm serverless-deploy" language="bash" />
+                </Text>
+            </Box>
+        </Box>
+    );
+};
+
+export default Info;

package/cli/Input.tsx

@@ -0,0 +1,33 @@
+import React, { ComponentPropsWithRef } from 'react';
+import { Text, Box, useFocus, DOMElement } from 'ink';
+import TextInput from 'ink-text-input';
+
+type InputProps = ComponentPropsWithRef<typeof Box> & {
+    disabled?: boolean;
+    autoFocus?: boolean;
+    focusId?: string;
+    prompt: string;
+    value: string;
+    onChange: (value: string) => void;
+    onSubmit: (value: string) => void;
+};
+
+const Input = React.forwardRef<DOMElement, InputProps>(function Input(
+    { disabled = false, autoFocus = false, focusId, prompt, value, onChange, onSubmit, ...props },
+    ref
+) {
+    const { isFocused } = useFocus({ autoFocus, id: focusId, isActive: !disabled });
+
+    return (
+        // eslint-disable-next-line react/jsx-props-no-spreading
+        <Box ref={ref} {...props}>
+            <Box marginRight={1}>
+                <Text color="blueBright">{prompt}</Text>
+            </Box>
+
+            <TextInput value={value} onChange={onChange} focus={isFocused} onSubmit={onSubmit} />
+        </Box>
+    );
+});
+
+export default Input;