initial commit w/ extracted provided files from ActBlue

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

README-react-app.md

@@ -0,0 +1,70 @@
+# Getting Started with Create React App
+
+This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
+
+## Available Scripts
+
+In the project directory, you can run:
+
+### `npm start`
+
+Runs the app in the development mode.\
+Open [http://localhost:3000](http://localhost:3000) to view it in your browser.
+
+The page will reload when you make changes.\
+You may also see any lint errors in the console.
+
+### `npm test`
+
+Launches the test runner in the interactive watch mode.\
+See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
+
+### `npm run build`
+
+Builds the app for production to the `build` folder.\
+It correctly bundles React in production mode and optimizes the build for the best performance.
+
+The build is minified and the filenames include the hashes.\
+Your app is ready to be deployed!
+
+See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
+
+### `npm run eject`
+
+**Note: this is a one-way operation. Once you `eject`, you can't go back!**
+
+If you aren't satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
+
+Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you're on your own.
+
+You don't have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn't feel obligated to use this feature. However we understand that this tool wouldn't be useful if you couldn't customize it when you are ready for it.
+
+## Learn More
+
+You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
+
+To learn React, check out the [React documentation](https://reactjs.org/).
+
+### Code Splitting
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/code-splitting](https://facebook.github.io/create-react-app/docs/code-splitting)
+
+### Analyzing the Bundle Size
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size](https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size)
+
+### Making a Progressive Web App
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app](https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app)
+
+### Advanced Configuration
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/advanced-configuration](https://facebook.github.io/create-react-app/docs/advanced-configuration)
+
+### Deployment
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/deployment](https://facebook.github.io/create-react-app/docs/deployment)
+
+### `npm run build` fails to minify
+
+This section has moved here: [https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify](https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify)

README.md

@@ -0,0 +1,59 @@
+# Create a form for touring bands!
+
+## Overview
+
+For this exercise, you'll create a simple form that allows users to purchase tickets to a concert for a given band.
+
+You'll find included in this repo:
+
+1. Three JSON files (located in `src/band-json/`) that represent the data structure that the form should be able to accommodate
+2. A Wireframe ("BandTickets_Anonymous.png") that should help guide you as a loose representation of what the form should be structured like
+3. A starter React project
+
+We'd like you to build on the included React project that has been scaffolded using `create-react-app`. Feel free to add any javascript libraries that you typically use or think are a good fit for this project. For styling, you're welcome to write custom CSS, use a component library, or do some combination of both.
+
+## Acceptance Criteria
+
+The acceptance criteria for this exercise is that after consuming any of the JSON objects from the band-json directory, the form should include:
+
+1. The band name, description, location, date, and image to learn about the concert
+2. A list of ticket types that includes their metadata and the ability to add any number of tickets of each type
+3. A total amount section that adds up the ticket prices
+4. Some basic inputs for adding credit card and personal information
+5. A button to purchase the tickets
+
+## Some Things To Consider
+
+When the "Get Tickets" button is clicked, you can add a `console.log()` or an `alert()` with the data that would be sent to a hypothetical backend server. This exercise is specifically geared towards candidates applying for a Front End focused role at ATS, which is why we are asking for folks not to add any data persistence or backend logic.
+
+The tour date cost is listed as cents, so `500` would be `$5`.
+
+The wireframe is a rough estimate of the layout of the form that we expect, but it's not necessary to match it exactly. The most important parts are the general page structure (two columns, with the description area on the left), and an approximate location of where the various page elements should be.
+
+## Rough time estimate for this exercise
+
+Doing a technical exercise on top of having all the other stuff you have to do during a week can be a challenge, so first off: thank you for taking the time to do this take-home.
+
+In general, we recommend spending **about 2 hours on this exercise**, the first chunk of which is likely just reading through this document and choosing an approach. If you can't find that amount of time because of work or life or anything else, get through as much as you are able to (and please feel free to reach out to get additional time!). We'll take a look at your submission no matter how far long you've made it in the process.
+
+If you complete the core acceptance criteria, and want to get creative with the exercise, then you might consider 1 or 2 of the following options:
+
+1. Style the forms so they look fabulloooussss
+2. Write some tests using Jest (or any library you prefer)
+3. Add types
+4. Deploy this somewhere
+5. Make it [Web Content Accessibility Guidelines (WCAG)](https://www.w3.org/WAI/standards-guidelines/wcag/) compliant
+
+## Questions
+
+If you have questions about this assignment, from the specific to the broad, please feel free to reach out to your recruiter point of contact or to the hiring manager. Good luck!
+
+## Submission
+
+To submit your solution, please upload a text file or `README` to Greenhouse that includes the following:
+
+1. A link to your code that we can access, such as a Google Drive folder or a Github repo
+2. A description of how to run your code
+3. Anything else we should know
+
+If you're having any trouble at all with Greenhouse, feel free to email us the file instead.

package.json

@@ -0,0 +1,37 @@
+{
+  "name": "form-creation-react-app",
+  "version": "0.1.0",
+  "private": true,
+  "dependencies": {
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-scripts": "5.0.1"
+  },
+  "scripts": {
+    "start": "react-scripts start",
+    "build": "react-scripts build",
+    "test": "react-scripts test",
+    "eject": "react-scripts eject"
+  },
+  "eslintConfig": {
+    "extends": [
+      "react-app",
+      "react-app/jest"
+    ]
+  },
+  "browserslist": {
+    "production": [
+      ">0.2%",
+      "not dead",
+      "not op_mini all"
+    ],
+    "development": [
+      "last 1 chrome version",
+      "last 1 firefox version",
+      "last 1 safari version"
+    ]
+  }
+}

public/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
+    <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="Web site created using create-react-app"
+    />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <!--
+      manifest.json provides metadata used when your web app is installed on a
+      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
+    -->
+    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
+    <!--
+      Notice the use of %PUBLIC_URL% in the tags above.
+      It will be replaced with the URL of the `public` folder during the build.
+      Only files inside the `public` folder can be referenced from the HTML.
+
+      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
+      work correctly both with client-side routing and a non-root public URL.
+      Learn how to configure a non-root public URL by running `npm run build`.
+    -->
+    <title>React App</title>
+  </head>
+  <body>
+    <noscript>You need to enable JavaScript to run this app.</noscript>
+    <div id="root"></div>
+    <!--
+      This HTML file is a template.
+      If you open it directly in the browser, you will see an empty page.
+
+      You can add webfonts, meta tags, or analytics to this file.
+      The build step will place the bundled scripts into the <body> tag.
+
+      To begin the development, run `npm start` or `yarn start`.
+      To create a production bundle, use `npm run build` or `yarn build`.
+    -->
+  </body>
+</html>

public/manifest.json

@@ -0,0 +1,8 @@
+{
+  "short_name": "Form Creation",
+  "name": "Band Tour Form Creation",
+  "start_url": ".",
+  "display": "standalone",
+  "theme_color": "#000000",
+  "background_color": "#ffffff"
+}

public/robots.txt

@@ -0,0 +1,3 @@
+# https://www.robotstxt.org/robotstxt.html
+User-agent: *
+Disallow:

src/App.js

@@ -0,0 +1,16 @@
+import skaBand from "./band-json/ska-band.json";
+import kpopBand from "./band-json/kpop-band.json";
+import punkBand from "./band-json/punk-band.json";
+
+import BandForm from "./BandForm";
+
+function App() {
+  const bands = [skaBand, kpopBand, punkBand];
+  return (
+    <div className="App">
+      <BandForm band={bands[0]} />
+    </div>
+  );
+}
+
+export default App;

src/BandForm.js

@@ -0,0 +1,14 @@
+function BandForm({ band }) {
+  return (
+    <div>
+      <h1>{band.name}</h1>
+      {band.ticketTypes.map((ticket) => (
+        <p>
+          {ticket.name} - {ticket.description}
+        </p>
+      ))}
+    </div>
+  );
+}
+
+export default BandForm;

src/band-json/kpop-band.json

@@ -0,0 +1,28 @@
+{
+  "name": "BTESS",
+  "id": "btess",
+  "date": 1686675030000,
+  "location": "6914 4th St NW, Washington, DC 20012",
+  "description_blurb": "<div><b>Come see the world sensation BTESS! ONE NIGHT ONLY!!!</b><p>You'll dance.</p><p>You'll sing.</p></p>You'll cry.</p><You'll feel all the feels.</p></div>",
+  "imgUrl": "https://placehold.co/600x400/f66b97/000000",
+  "ticketTypes": [
+    {
+      "type": "general",
+      "name": "General Admission",
+      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      "cost": 6000
+    },
+    {
+      "type": "vip",
+      "name": "VIP",
+      "description": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+      "cost": 15000
+    },
+    {
+      "type": "meet-and-greet",
+      "name": "VIP + Meet and Greet",
+      "description": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+      "cost": 30000
+    }
+  ]
+}

src/band-json/punk-band.json

@@ -0,0 +1,22 @@
+{
+  "name": "Cindy and The Scintillators",
+  "id": "cindy",
+  "date": 1686761430000,
+  "location": "565 Broadway, Tacoma, WA 98402",
+  "description_blurb": "<div><h3>hey, I'm cindy</h3><p>Im purposefully not using punctuation because thats how punkrock i am. come listen to our stuff or dont i dont care.</p></div>.",
+  "imgUrl": "https://placehold.co/600x400/54176f/ffffff",
+  "ticketTypes": [
+    {
+      "type": "general",
+      "name": "General Admission",
+      "description": "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.",
+      "cost": 6000
+    },
+    {
+      "type": "vip",
+      "name": "VIP",
+      "description": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+      "cost": 15000
+    }
+  ]
+}

src/band-json/ska-band.json

@@ -0,0 +1,22 @@
+{
+  "name": "The Flaming Potatoes",
+  "id": "flaming-potatoes",
+  "date": 1683644012000,
+  "location": "Groove, 125 MacDougal St, New York, NY 10012",
+  "description_blurb": "<p>We're the Flaming Potatoes, and once you come to this awesome small club performance, you'll be our Best Spuds!</p>.",
+  "imgUrl": "https://placehold.co/600x400/51aa97/000000",
+  "ticketTypes": [
+    {
+      "type": "vip",
+      "name": "VIP",
+      "description": "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.",
+      "cost": 15000
+    },
+    {
+      "type": "meet-and-greet",
+      "name": "VIP + Meet and Greet",
+      "description": "Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.",
+      "cost": 30000
+    }
+  ]
+}

src/index.css

@@ -0,0 +1,13 @@
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+code {
+  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
+    monospace;
+}

src/index.js

@@ -0,0 +1,11 @@
+import React from "react";
+import ReactDOM from "react-dom/client";
+import "./index.css";
+import App from "./App";
+
+const root = ReactDOM.createRoot(document.getElementById("root"));
+root.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>
+);

src/setupTests.js

@@ -0,0 +1,5 @@
+// jest-dom adds custom jest matchers for asserting on DOM nodes.
+// allows you to do things like:
+// expect(element).toHaveTextContent(/react/i)
+// learn more: https://github.com/testing-library/jest-dom
+import '@testing-library/jest-dom';