Merge pull request #16 from Thenlie/develop

v1.2.0

pages/package.json

@@ -34,6 +34,7 @@
     "webpack-dev-server": "^4.11.1"
   },
   "dependencies": {
+    "@uiw/react-md-editor": "^3.20.5",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

pages/src/App.tsx

@@ -1,26 +1,44 @@
 import * as React from 'react';
-import { TextArea, TextInput } from './components';
-import Button from './components/Button/Button';
+import { InputScreen, OutputScreen } from './screens';
+import { useState } from 'react';
 
 const App = () => {
+    const [page, setPage] = useState('input');
+    const [markdown, setMarkdown] = useState('');
+
     return (
         <>
             <nav>
                 <h1>Readme Generator!</h1>
+                <button
+                    onClick={() => {
+                        switch (page) {
+                            case 'input':
+                                setPage('output');
+                                break;
+                            case 'output':
+                                setPage('input');
+                                break;
+                        }
+                    }}
+                >
+                    {page === 'input' ? 'Output' : 'Input'}
+                </button>
                 <p>🚧 Site currently under construction! 🚧</p>
             </nav>
-            <main>
-                <TextInput placeholder='Project Title' name='title' />
-                <TextInput placeholder='GitHub Username' name='username' />
-                <TextInput placeholder='Email' name='email' />
-                <TextArea placeholder='Project Description' name='description' />
-                <TextArea placeholder='Installation Steps' name='install' />
-                <TextArea placeholder='Usage Instructions' name='usage' />
-                <TextArea placeholder='Testing' name='testing' />
-                <Button name='submit' content='Generate Readme' />
-            </main>
+            {page === 'input' && <InputScreen setPage={setPage} setMarkdown={setMarkdown} />}
+            {page === 'output' && <OutputScreen markdown={markdown} />}
             <footer>
                 <p>© Created by Thenlie</p>
+                <a href='https://github.com/Thenlie/readme-generator'>
+                    <img
+                        src='github-mark.svg'
+                        height={50}
+                        width={50}
+                        className='github-logo'
+                        alt='View project on GitHub'
+                    ></img>
+                </a>
             </footer>
         </>
     );

pages/src/components/Button/Button.tsx

@@ -4,10 +4,15 @@ import './style.css';
 interface ButtonInputProps {
     content: string;
     name: string;
+    type: 'button' | 'submit' | 'reset';
 }
 
 const Button = (props: ButtonInputProps): JSX.Element => {
-    return <button name={props.name}>{props.content}</button>;
+    return (
+        <button name={props.name} type={props.type}>
+            {props.content}
+        </button>
+    );
 };
 
 export default Button;

pages/src/components/Button/index.ts

@@ -0,0 +1,3 @@
+import Button from './Button';
+
+export { Button };

pages/src/components/Button/style.css

@@ -12,3 +12,8 @@ button {
 button:hover {
     background-color: var(--tertiary);
 }
+
+button:focus-visible {
+    outline: 1px auto var(--secondary-text);
+    background-color: var(--tertiary);
+}

pages/src/components/DropDown/DropDown.tsx

@@ -0,0 +1,23 @@
+import * as React from 'react';
+import './style.css';
+
+interface DropDownProps {
+    name: string;
+    label: string;
+    options: string[];
+}
+
+const DropDown = (props: DropDownProps) => {
+    return (
+        <div className='drop-down-container'>
+            <label htmlFor={props.name}>{props.label}</label>
+            <select name={props.name} id={props.name}>
+                {props.options.map((opt) => (
+                    <option key={opt}>{opt}</option>
+                ))}
+            </select>
+        </div>
+    );
+};
+
+export { DropDown };

pages/src/components/DropDown/index.ts

@@ -0,0 +1,3 @@
+import { DropDown } from './DropDown';
+
+export { DropDown };

pages/src/components/DropDown/style.css

@@ -0,0 +1,31 @@
+.drop-down-container {
+    align-self: flex-start;
+    display: flex;
+    flex-direction: column;
+}
+
+.drop-down-container label {
+    padding-left: .5em;
+}
+
+select {
+    background-color: var(--primary);
+    color: var(--primary-text);
+    padding: 1em;
+    margin: .5em;
+    border-radius: .5em;
+}
+
+select:focus-visible {
+    outline: 1px auto var(--secondary-text);
+    background-color: var(--secondary);
+}
+
+option {
+    appearance: none;
+}
+
+option:focus-visible {
+    outline: none;
+    border: none;
+}

pages/src/components/TextArea/TextArea.tsx

@@ -4,13 +4,21 @@ import './style.css';
 interface TextAreaProps {
     placeholder: string;
     name: string;
+    value: string;
+    onChange: React.Dispatch<React.SetStateAction<string>>;
 }
 
 const TextArea = (props: TextAreaProps): JSX.Element => {
     return (
         <div className='text-area-container'>
             <label htmlFor={props.name}>{props.placeholder}</label>
-            <textarea placeholder={props.placeholder} name={props.name} rows={3}></textarea>
+            <textarea
+                placeholder={props.placeholder}
+                name={props.name}
+                rows={3}
+                value={props.value}
+                onChange={(e) => props.onChange(e.target.value.trim())}
+            ></textarea>
         </div>
     );
 };

pages/src/components/TextInput/TextInput.tsx

@@ -4,13 +4,21 @@ import './style.css';
 interface TextInputProps {
     placeholder: string;
     name: string;
+    value: string;
+    onChange: React.Dispatch<React.SetStateAction<string>>;
 }
 
 const TextInput = (props: TextInputProps): JSX.Element => {
     return (
         <div className='text-input-container'>
             <label htmlFor={props.name}>{props.placeholder}</label>
-            <input type='text' placeholder={props.placeholder} name={props.name}></input>
+            <input
+                type='text'
+                placeholder={props.placeholder}
+                name={props.name}
+                value={props.value}
+                onChange={(e) => props.onChange(e.target.value.trim())}
+            ></input>
         </div>
     );
 };

pages/src/components/index.ts

@@ -1,4 +1,5 @@
 import { TextInput } from './TextInput';
 import { TextArea } from './TextArea';
+import { Button } from './Button';
 
-export { TextInput, TextArea };
+export { TextInput, TextArea, Button };

pages/src/screens/InputScreen.tsx

@@ -0,0 +1,109 @@
+import * as React from 'react';
+import { useState } from 'react';
+import { TextArea, TextInput, Button } from '../components';
+import { generateMarkdown } from '../../../src/utils/generateMarkdown';
+import { InputData } from '../../../src/types';
+import { DropDown } from '../components/DropDown';
+
+interface InputScreenProps {
+    setPage: React.Dispatch<React.SetStateAction<string>>;
+    setMarkdown: React.Dispatch<React.SetStateAction<string>>;
+}
+
+const InputScreen = (props: InputScreenProps) => {
+    const [title, setTitle] = useState<string>('');
+    const [username, setUsername] = useState<string>('');
+    const [email, setEmail] = useState<string>('');
+    const [description, setDescription] = useState<string>('');
+    // const [license, setLicense] = useState<string>('');
+    const [install, setInstall] = useState<string>('');
+    const [usage, setUsage] = useState<string>('');
+    const [testing, setTesting] = useState<string>('');
+    const [contribution, setContribution] = useState<string>('');
+
+    const licenseOptions = [
+        'MIT',
+        'BSD 2-Clause',
+        'BSD 3-Clause',
+        'Boost',
+        'GNU LGPL',
+        'GNU AGPL',
+        'GNU GPL v2',
+        'GNU GPL v3',
+        'Mozilla',
+        'Unlicense',
+        'none',
+    ];
+
+    const handleSubmit = () => {
+        const data: InputData = {
+            title: title,
+            email: email,
+            user: username,
+            license: 'MIT',
+            description: description,
+            install: install,
+            usage: usage,
+            contribution: contribution,
+            test: testing,
+        };
+
+        const markdown = generateMarkdown(data);
+        props.setMarkdown(markdown);
+        props.setPage('output');
+    };
+
+    return (
+        <main>
+            <form onSubmit={handleSubmit}>
+                <TextInput
+                    placeholder='Project Title'
+                    name='title'
+                    value={title}
+                    onChange={setTitle}
+                />
+                <TextInput
+                    placeholder='GitHub Username'
+                    name='username'
+                    value={username}
+                    onChange={setUsername}
+                />
+                <TextInput placeholder='Email' name='email' value={email} onChange={setEmail} />
+                <DropDown name='license' label='Project License' options={licenseOptions} />
+                <TextArea
+                    placeholder='Project Description'
+                    name='description'
+                    value={description}
+                    onChange={setDescription}
+                />
+                <TextArea
+                    placeholder='Installation Steps'
+                    name='install'
+                    value={install}
+                    onChange={setInstall}
+                />
+                <TextArea
+                    placeholder='Usage Instructions'
+                    name='usage'
+                    value={usage}
+                    onChange={setUsage}
+                />
+                <TextArea
+                    placeholder='Testing'
+                    name='testing'
+                    value={testing}
+                    onChange={setTesting}
+                />
+                <TextArea
+                    placeholder='Contributing'
+                    name='contributing'
+                    value={contribution}
+                    onChange={setContribution}
+                />
+                <Button name='submit' type='submit' content='Generate Readme' />
+            </form>
+        </main>
+    );
+};
+
+export default InputScreen;

pages/src/screens/OutputScreen.tsx

@@ -0,0 +1,20 @@
+import MDEditor from '@uiw/react-md-editor';
+import * as React from 'react';
+import { useState } from 'react';
+
+interface OutputScreenProps {
+    markdown: string;
+}
+
+const OutputScreen = (props: OutputScreenProps) => {
+    const [markdown, setMarkdown] = useState(props.markdown);
+
+    return (
+        <main>
+            <p>Output Screen</p>
+            <MDEditor value={markdown} onChange={setMarkdown} />
+        </main>
+    );
+};
+
+export default OutputScreen;

pages/src/screens/index.ts

@@ -0,0 +1,4 @@
+import InputScreen from './InputScreen';
+import OutputScreen from './OutputScreen';
+
+export { InputScreen, OutputScreen };