feat(widget): implement the widget of septa rails fare calculator

septa-fare-calculator-widget/.eslintrc.json

@@ -0,0 +1,35 @@
+{
+  "extends": ["eslint:recommended", "react-app", "react-app/jest", "prettier"],
+  "plugins": ["prettier"],
+  "rules": {
+    "prettier/prettier": "error",
+    "react/jsx-closing-bracket-location": [
+      2,
+      { "selfClosing": "tag-aligned", "nonEmpty": "tag-aligned" }
+    ],
+    "no-multi-spaces": ["error", { "ignoreEOLComments": false }],
+    "react/jsx-tag-spacing": [
+      2,
+      {
+        "closingSlash": "never",
+        "beforeSelfClosing": "always",
+        "afterOpening": "never",
+        "beforeClosing": "allow"
+      }
+    ],
+    "react/jsx-curly-spacing": [2, "never", {
+      "allowMultiline": true,
+      "spacing": {"objectLiterals": "always"}
+    }],
+    "react/jsx-boolean-value": "error",
+    "react/no-string-refs": "error",
+    "react/jsx-wrap-multilines": "error",
+    "react/self-closing-comp": ["error", {
+      "component": true,
+      "html": true
+    }],
+    "react/jsx-no-bind": ["error", {"allowArrowFunctions": true}],
+    "react/require-render-return": "error"
+  },
+  "ignorePatterns": ["**/build", "**/public"]
+}

septa-fare-calculator-widget/.gitignore

@@ -0,0 +1,25 @@
+# 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*
+
+.DS_Store

septa-fare-calculator-widget/.prettierrc.json

@@ -0,0 +1,11 @@
+{
+  "arrowParens": "always",
+  "endOfLine": "lf",
+  "jsxSingleQuote": true,
+  "printWidth": 80,
+  "semi": true,
+  "singleQuote": true,
+  "tabWidth": 2,
+  "trailingComma": "all",
+  "useTabs": false
+}

septa-fare-calculator-widget/README.md

@@ -0,0 +1,23 @@
+# SEPTA Fare Calculator Widget
+
+This is a widget to calculate the fare cost of SEPTA Regional Rails.
+
+## Requirements
+
+- [Node.js](https://nodejs.org/en/download/)
+
+## Installation
+
+- Clone this repository to your local machine.
+- Go to the root directory of the project.
+- Install the dependencies: `npm install`.
+- Run the project: `npm start`.
+- Navigate to [http://localhost:3000](http://localhost:3000) to start.
+
+## Resources
+
+- [SEPTA's website](https://www.septa.org/fares/ticket/index.html)
+- Design
+![Widget Design](https://raw.githubusercontent.com/thinkcompany/code-challenges/master/septa-fare-calculator/img/widget.png)
+- [Fare JSON](https://github.com/thinkcompany/code-challenges/blob/master/septa-fare-calculator/fares.json)
+- [create-react-app](https://create-react-app.dev/)