Initialize styled-components

.eslintrc.json

@@ -0,0 +1,3 @@
+{
+  "extends": ["next/core-web-vitals", "next/typescript", "prettier"]
+}

.gitattributes

@@ -0,0 +1 @@
+* text=auto eol=lf

.github/pull_request_template.md

@@ -0,0 +1,37 @@
+[//]: # "Feel free to customize this template to your project's vibes"
+
+## What's new in this PR
+### Description
+[//]: # "Required - Describe what's new in this PR in a few lines. A description and bullet points for specifics will suffice."
+
+
+
+### Screenshots
+[//]: # "Required for frontend changes, otherwise optional but strongly recommended. Add screenshots of expected behavior - GIFs if you're feeling fancy! Use the provided image template. Drag the desired image into the PR, then copy the link into the placeholder."
+
+[image placeholder]: <img src="place image link here!!!" width="240" height="540">
+
+
+
+## How to review
+[//]: # 'Required - Describe the order in which to review files and what to expect when testing locally. Is there anything specifically you want feedback on? Should this be reviewed commit by commit, or all at once? What are some user flows to test? What are some edge cases to look out for?'
+
+
+
+## Next steps
+[//]: # "Optional - What's NOT in this PR, doesn't work yet, and/or still needs to be done. Note any temporary fixes in this PR that should be cleaned up later."
+
+
+
+## Relevant links
+### Online sources
+[//]: # 'Copy links to any tutorials or documentation that was useful to you when working on this PR'
+
+
+
+### Related PRs
+[//]: # "Add related PRs you're waiting on/ PRs that will conflict, etc; if this is a refactor, feel free to add PRs that previously modified this code"
+
+
+
+CC: @insert pl github username here

.github/workflows/lint.yml

@@ -0,0 +1,62 @@
+---
+name: Lint
+
+#############################
+# Start the job on push     #
+#############################
+on:
+  push:
+    branches-ignore: [main]
+  pull_request:
+    branches: [main]
+
+###############
+# Set the Job #
+###############
+jobs:
+  build:
+    # Name the Job
+    name: Run ESLint, Prettier, and TypeScript compiler
+    # Set the agent to run on
+    runs-on: ubuntu-latest
+
+    ##################
+    # Load all steps #
+    ##################
+    steps:
+      ##########################
+      # Checkout the code base #
+      ##########################
+      - name: Checkout Code
+        uses: actions/checkout@v4
+        with:
+          # Full git history is needed to get a proper
+          # list of changed files within `super-linter`
+          fetch-depth: 0
+
+      ################################
+      # Install packages             #
+      ################################
+      - name: Install packages
+        uses: pnpm/action-setup@v4
+        with:
+          version: 9
+          run_install: true
+
+      ################################
+      # Lint codebase                #
+      ################################
+      - name: Run ESLint
+        run: pnpm exec eslint .
+
+      ################################
+      # Check Prettier on codebase   #
+      ################################
+      - name: Run Prettier
+        run: pnpm exec prettier --check .
+
+      ################################
+      # Check for TypeScript errors  #
+      ################################
+      - name: Run TypeScript compiler (tsc)
+        run: pnpm exec tsc --noEmit

.gitignore

@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts

.husky/post-checkout

@@ -0,0 +1 @@
+pnpm exec yarnhook

.husky/post-merge

@@ -0,0 +1 @@
+pnpm exec yarnhook

.husky/post-rewrite

@@ -0,0 +1 @@
+pnpm exec yarnhook

.husky/pre-commit

@@ -0,0 +1 @@
+pnpm run pre-commit

.prettierignore

@@ -0,0 +1,7 @@
+.github/
+.vscode/
+.next/
+
+README.md
+package-lock.json
+next-env.d.ts

.prettierrc.json

@@ -0,0 +1,24 @@
+{
+  "arrowParens": "avoid",
+  "bracketSameLine": false,
+  "bracketSpacing": true,
+  "printWidth": 80,
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "all",
+  "importOrder": [
+    "<TYPES>^(node:)",
+    "<TYPES>",
+    "<TYPES>^[.]",
+    "^react$",
+    "^react[-/]{1}.*",
+    "^next$",
+    "^next[-/]{1}.*",
+    "<BUILTIN_MODULES>",
+    "<THIRD_PARTY_MODULES>",
+    "^@/.*$",
+    "^[.]",
+    "[.]css$"
+  ],
+  "plugins": ["@ianvs/prettier-plugin-sort-imports"]
+}

.vscode/extensions.json

@@ -0,0 +1,13 @@
+{
+    // See https://go.microsoft.com/fwlink/?LinkId=827846 to learn about workspace recommendations.
+    // Extension identifier format: ${publisher}.${name}. Example: vscode.csharp
+
+    // List of extensions which should be recommended for users of this workspace.
+    "recommendations": [
+      "dbaeumer.vscode-eslint",
+      "esbenp.prettier-vscode",
+      "eamodio.gitlens"
+    ],
+    // List of extensions recommended by VS Code that should not be recommended for users of this workspace.
+    "unwantedRecommendations": []
+  }

.vscode/settings.json

@@ -0,0 +1,4 @@
+{
+    "editor.formatOnSave": true,
+    "editor.tabSize": 2
+}

README.md

@@ -0,0 +1,78 @@
+# \[Insert Project Name\]
+
+**[BLUEPRINT INTERNAL]: PLEASE GO THROUGH THIS README AND REPLACE ALL THE [INSERT] STATEMENTS WITH VALUES SPECIFIC TO YOUR PROJECT. DELETE THIS SECTION WHEN DONE.**
+
+This template also has variants with pre-configured setup for styling libraries:
+- [Tailwind CSS](https://github.com/calblueprint/web-app-template/tree/tailwind)
+- [Styled Components](https://github.com/calblueprint/web-app-template/tree/styled-components)
+- [Vanilla Extract](https://github.com/calblueprint/web-app-template/tree/vanilla-extract)
+
+---
+
+This project is being built by a team at [Blueprint](https://calblueprint.org), a student organization at the University of California, Berkeley building software pro bono for nonprofits.
+
+## Getting Started
+
+### Prerequisites
+
+Check your installation of `node` and `pnpm`:
+
+```bash
+node -v
+pnpm -v
+```
+
+We strongly recommend using a Node version manager like [nvm](https://github.com/nvm-sh/nvm) (for Mac) or [nvm-windows](https://github.com/coreybutler/nvm-windows) (for Windows) to install Node.js. If you don't plan on switching between different Node versions, you can alternatively get a [prebuilt installer](https://nodejs.org/en/download/prebuilt-installer) from the Node.js website for an easier approach. Make sure to get Node version 18 and up, the latest LTS version should be sufficient.
+
+After installing Node, you most likely have npm installed as well (check by running `npm -v`). If you have npm installed, simply run `npm install -g pnpm` to install pnpm. If your command line does not recognize npm as a command, refer to [this article](https://www.geeksforgeeks.org/how-to-resolve-npm-command-not-found-error-in-node-js/) to troubleshoot.
+
+Additional resources:
+- [Downloading and installing Node.js and npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm)
+- [Installing pnpm without npm](https://pnpm.io/installation)
+
+### Installation
+
+1. Clone the repo & install dependencies
+
+   1. Clone this repo
+      - using SSH (recommended)
+        ```bash
+        git clone [git@insert-project-ssh]
+        ```
+      - using HTTPS
+        ```bash
+        git clone [insert.project.link]
+        ```
+   2. Enter the cloned directory
+      ```bash
+      cd [insert-project-repo]
+      ```
+   3. Install project dependencies. This command installs all packages from [`package.json`](package.json).
+      ```bash
+      pnpm install
+      ```
+
+2. Set up secrets:
+   1. In the project's root directory (`[insert-project-repo]/`), create a new file named `.env.local`
+   2. Copy the credentials from [Blueprint's internal Notion](https://www.notion.so/calblueprint/Environment-Setup-6fb1e251cdca4393b9dd47a3436abc11?pvs=4#9c2ff603f7a44348835c97e96d521d2d) (access is required) and paste them into the `.env.local` file.
+
+**Helpful resources**
+
+- [GitHub: Cloning a Repository](https://docs.github.com/en/repositories/creating-and-managing-repositories/cloning-a-repository#cloning-a-repository)
+- [GitHub: Generating SSH keys](https://docs.github.com/en/authentication/connecting-to-github-with-ssh/generating-a-new-ssh-key-and-adding-it-to-the-ssh-agent)
+
+### Development environment
+
+- **[VSCode](https://code.visualstudio.com/) (recommended)**
+  1. Open the `[insert-project-repo]` project in VSCode.
+  2. Install recommended workspace VSCode extensions. You should see a pop-up on the bottom right to "install the recommended extensions for this repository".
+
+### Running the app
+
+In the project directory, run:
+
+```shell
+pnpm dev
+```
+
+Then, navigate to http://localhost:3000 to launch the web application.

app/layout.tsx

@@ -0,0 +1,29 @@
+import type { Metadata } from 'next';
+import { Inter } from 'next/font/google';
+import StyledComponentsRegistry from '@/lib/registry';
+
+// font definitions
+const sans = Inter({
+  variable: '--font-sans',
+  subsets: ['latin'],
+});
+
+// site metadata - what shows up on embeds
+export const metadata: Metadata = {
+  title: 'Project Name',
+  description: 'Description of project',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={sans.className}>
+        <StyledComponentsRegistry>{children}</StyledComponentsRegistry>
+      </body>
+    </html>
+  );
+}

app/page.style.ts

@@ -0,0 +1,19 @@
+'use client';
+
+import NextImage from 'next/image';
+import styled from 'styled-components';
+
+export const Container = styled.main`
+  width: 100%;
+  height: 100svh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+`;
+
+export const Image = styled(NextImage)`
+  width: 80px;
+  height: 80px;
+  margin-bottom: 0.5rem;
+`;

app/page.tsx

@@ -0,0 +1,11 @@
+import BPLogo from '@/assets/images/bp-logo.png';
+import { Container, Image } from './page.style';
+
+export default function Home() {
+  return (
+    <Container>
+      <Image src={BPLogo} alt="Blueprint Logo" />
+      <p>Open up app/page.tsx to get started!</p>
+    </Container>
+  );
+}

components/Button.tsx

@@ -0,0 +1,9 @@
+import React from 'react';
+
+export const Button = React.forwardRef<
+  HTMLButtonElement,
+  React.ButtonHTMLAttributes<HTMLButtonElement>
+>(({ children, ...props }) => {
+  return <button {...props}>{children}</button>;
+});
+Button.displayName = 'Button';

graphics.d.ts

@@ -0,0 +1,5 @@
+declare module '*.png';
+declare module '*.svg';
+declare module '*.jpeg';
+declare module '*.jpg';
+declare module '*.webp';

lib/registry.tsx

@@ -0,0 +1,29 @@
+'use client';
+
+import React, { useState } from 'react';
+import { useServerInsertedHTML } from 'next/navigation';
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components';
+
+export default function StyledComponentsRegistry({
+  children,
+}: {
+  children: React.ReactNode;
+}) {
+  // Only create stylesheet once with lazy initial state
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet());
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement();
+    styledComponentsStyleSheet.instance.clearTag();
+    return <>{styles}</>;
+  });
+
+  if (typeof window !== 'undefined') return <>{children}</>;
+
+  return (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {children}
+    </StyleSheetManager>
+  );
+}