latest changes (#11)

* initial pass * bump packages * init design to dev transition; remove tailwind; update packages * init design to dev patterns * prototype(svgs): update how SVGs are to be used * Inline SVGs at the top of the page and reference them throughout. * update components to use new SVG method * keep all .svg files together * WIP * all-in-one * update packages * update packages * latest updates * remove yaml file
PeopleForBikes · Sep 18, 2024 · 51c82a1 · 51c82a1
1 parent 2c49483
commit 51c82a1
Show file tree

Hide file tree

Showing 205 changed files with 4,073 additions and 243 deletions.
diff --git a/.editorconfig b/.editorconfig
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -5,7 +5,28 @@ const ERROR = 2;    // ERROR or 2 - turn the rule on as an error (exit code will
 
 module.exports = {
   root: true,
-  extends: 'next/core-web-vitals',
+  extends: [
+    'next/core-web-vitals',
+    'eslint:recommended',
+    'plugin:react/recommended',
+    'plugin:react-hooks/recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:@typescript-eslint/recommended-requiring-type-checking'
+  ],
+  parser: '@typescript-eslint/parser',
+  parserOptions: {
+    project: true
+  },
+  plguins: [
+    '@typescript-eslint',
+    'react',
+    'react-hooks'
+  ],
+  settings: {
+    react: {
+      version: 'detect'
+    }
+  },
   rules: {
     // convention
     'comma-dangle': [ERROR, {

diff --git a/.github/.kodiak.toml b/.github/.kodiak.toml
diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
diff --git a/.github/ISSUE_TEMPLATE/help_request.md b/.github/ISSUE_TEMPLATE/help_request.md
diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md
diff --git a/.github/dependabot.yml b/.github/dependabot.yml
diff --git a/.github/labels.yml b/.github/labels.yml
diff --git a/.github/stale.yml b/.github/stale.yml
diff --git a/.gitignore b/.gitignore
@@ -41,4 +41,4 @@ next-env.d.ts
 .vscode
 
 # git comments & notes
-z*.md
+z*.*
diff --git a/.markdownlint.yml b/.markdownlint.yml
diff --git a/.prettierignore b/.prettierignore
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/LICENSE b/LICENSE
diff --git a/README.md b/README.md
@@ -1,36 +1,31 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
 ## Getting Started
 
-First, run the development server:
-
 ```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-```
+> pnpm install
 
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+> pnpm start
+```
 
-[http://localhost:3000/api/hello](http://localhost:3000/api/hello) is an endpoint that uses [Route Handlers](https://beta.nextjs.org/docs/routing/route-handlers). This endpoint can be edited in `app/api/hello/route.ts`.
+# Resources
+## Favicon
+1. [Set up](https://evilmartians.com/chronicles/how-to-favicon-in-2021-six-files-that-fit-most-needs)
 
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+## CSS
+1. [REM vs PX](https://www.joshwcomeau.com/css/surprising-truth-about-pixels-and-accessibility)
 
-## Learn More
+## SVGs
+1. [SVGs](https://kurtextrem.de/posts/svg-in-js#performance-vs-time-to-load-to-inline-or-not-to-inline)
 
-To learn more about Next.js, take a look at the following resources:
+## Accessible CSS Tabs
+http://web-accessibility.carnegiemuseums.org/code/tabs
 
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+https://medium.com/@andreasmcd/creating-an-accessible-tab-component-with-react-24ed30fde86a
 
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+https://codepen.io/ItsCrisDiaz/pen/LYQjGpW
 
-## Deploy on Vercel
+# with radio tabs
+https://dev.to/joxx/building-a-tab-component-with-pure-css-using-radio-and-label-tags-200b
 
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+https://www.codeinwp.com/snippets/accessible-pure-css-tabs
 
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+https://medium.com/allenhwkim/how-to-build-tabs-only-with-css-844718d7de2f
diff --git a/code-of-conduct.md b/code-of-conduct.md
diff --git a/cspell.config.yaml b/cspell.config.yaml
diff --git a/justfile b/justfile
diff --git a/next.config.js b/next.config.js
@@ -1,6 +1,9 @@
+const path = require('path');
+
+
 const nextConfig = {
   experimental: {
-    appDir: true
+    optimizePackageImports: []
   },
 
   reactStrictMode: true

diff --git a/package.json b/package.json
@@ -2,29 +2,44 @@
   "name": "bna-website",
   "version": "0.1.0",
   "private": true,
-  "dependencies": {
-    "@types/node": "18.16.0",
-    "@types/react": "18.0.38",
-    "@types/react-dom": "18.0.11",
-    "autoprefixer": "10.4.14",
-    "eslint": "8.39.0",
-    "eslint-config-next": "13.3.1",
-    "next": "13.3.0",
-    "postcss": "8.4.23",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
-    "tailwindcss": "3.3.1",
-    "typescript": "5.0.4"
+  "devDependencies": {
+    "@types/node": "22.5.5",
+    "@types/react": "18.3.7",
+    "@types/react-dom": "18.3.0",
+    "@typescript-eslint/eslint-plugin": "8.6.0",
+    "@typescript-eslint/parser": "8.6.0",
+    "autoprefixer": "10.4.20",
+    "del-cli": "5.1.0",
+    "eslint": "9.10.0",
+    "eslint-config-next": "14.2.12",
+    "eslint-plugin-react": "7.36.1",
+    "eslint-plugin-react-hooks": "4.6.2",
+    "next": "14.2.12",
+    "postcss": "8.4.47",
+    "postcss-custom-media": "11.0.1",
+    "postcss-import": "16.1.0",
+    "postcss-media-minmax": "5.0.0",
+    "postcss-nesting": "13.0.0",
+    "typescript": "5.6.2"
   },
   "dependencies": {
+    "ajv": "8.17.1",
+    "ajv-errors": "3.0.0",
+    "ajv-formats": "3.0.1",
+    "mapbox-gl": "3.6.0",
     "react": "18.3.1",
-    "react-dom": "18.3.1"
+    "react-dom": "18.3.1",
+    "react-error-boundary": "4.0.13",
+    "react-hook-form": "7.53.0",
+    "react-mapbox-gl": "5.1.1",
+    "react-spinners": "0.14.1"
   },
   "scripts": {
-    "start": "next dev",
     "build": "next build",
+    "compile": "tsc",
     "deploy": "next start",
-    "lint": "next lint",
-    "repack": "rimraf -rf node_modules pnpm-lock.yaml && pnpm install"
+    "lint": "npx eslint . --max-warnings 0 --report-unused-disable-directives",
+    "repack": "del node_modules pnpm-lock.yaml && pnpm install",
+    "start": "next dev"
   }
 }
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/postcss.config.js b/postcss.config.js
@@ -1,7 +1,26 @@
+const path = require('path');
+
+
+const aliasMapping = {
+  '@Styles': (filename) => path.resolve(__dirname, `src/assets/styles/${filename}`),
+  '@Images': (filename) => path.resolve(__dirname, `src/assets/images/${filename}`)
+};
+
+
 module.exports = {
   plugins: {
-    'postcss-import': {},
-    tailwindcss: {},
-    autoprefixer: {}
+    'postcss-import': {
+      root: path.resolve(__dirname, 'src'),
+      path: ['assets'],
+      skipDuplicates: true,
+      resolve: (id, basedir, importOptions) => {
+        const [aliasName, filename] = id.split('/');
+        return aliasMapping[aliasName](filename);
+      }
+    },
+    'postcss-nesting': {},
+    'postcss-media-minmax': {},
+    'postcss-custom-media': {},
+    'autoprefixer': {}
   }
 };
diff --git a/public/favicon/android-chrome-192x192.png b/public/favicon/android-chrome-192x192.png
diff --git a/public/favicon/android-chrome-512x512.png b/public/favicon/android-chrome-512x512.png
diff --git a/public/favicon/apple-touch-icon.png b/public/favicon/apple-touch-icon.png
diff --git a/public/favicon/favicon.ico b/public/favicon/favicon.ico
diff --git a/public/favicon/icon.svg b/public/favicon/icon.svg
diff --git a/public/favicon/manifest.webmanifest b/public/favicon/manifest.webmanifest
diff --git a/src/app/(LandingPage)/AddYourPlace/Thankyou/index.tsx b/src/app/(LandingPage)/AddYourPlace/Thankyou/index.tsx
@@ -0,0 +1,18 @@
+'use client';
+
+import styles from './styles.module.css';
+
+
+function ThankYou() {
+  return(
+    <div className={styles['container']}>
+      <h3>Thank you!</h3>
+      <p>Thank you for signing up! We will send you reminders about new opportunities to contribute to the PlacesForBikes City Ratings program and related PeopleForBikes updates.</p>
+
+      <button>OK</button>
+    </div>
+  );
+}
+
+
+export default ThankYou;
diff --git a/src/app/(LandingPage)/AddYourPlace/Thankyou/styles.module.css b/src/app/(LandingPage)/AddYourPlace/Thankyou/styles.module.css
@@ -0,0 +1,35 @@
+.container {
+  display: flex;
+  flex-flow: column nowrap;
+  align-items: center;
+  gap: 40px;
+
+  & > h3 {
+    text-transform: uppercase;
+  }
+
+  & > p {
+    text-align: center;
+  }
+
+  & > button {
+    width: 134px;
+    height: 56px;
+    padding: 20px 30px;
+
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+
+    color: var(--white);
+    background-color: var(--cyan);
+
+    cursor: pointer;
+  }
+
+  & > button:active {
+    background: #2F88C2;
+    box-shadow: 0px 4px 20px -1px rgba(0, 53, 83, 0.13);
+  }
+}