feat(nx-dev): Migrate careers from nx.app

nx-dev/data-access-careers/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

nx-dev/data-access-careers/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

nx-dev/data-access-careers/README.md

@@ -0,0 +1,7 @@
+# data-access-careers
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test data-access-careers` to execute the unit tests via [Jest](https://jestjs.io).

nx-dev/data-access-careers/project.json

@@ -0,0 +1,9 @@
+{
+  "name": "data-access-careers",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "nx-dev/data-access-careers/src",
+  "projectType": "library",
+  "tags": ["scope:nx-dev", "type:data-access"],
+  "// targets": "to see all targets run: nx show project data-access-careers --web",
+  "targets": {}
+}

nx-dev/data-access-careers/src/lib/api.ts

@@ -0,0 +1,19 @@
+import { Job, LeverJob } from './models';
+
+export async function fetchJobsList(): Promise<Job[]> {
+  const apiUrl = 'https://api.lever.co/v0/postings/nrwl?mode=json';
+
+  const res = await fetch(apiUrl);
+
+  if (res.ok) {
+    const data = (await res.json()) as LeverJob[];
+    return data.map((job: LeverJob) => ({
+      title: job.text,
+      location: job.categories.location,
+      team: job.categories.team,
+      url: job.hostedUrl,
+    }));
+  } else {
+    return [];
+  }
+}

nx-dev/data-access-careers/src/lib/models.ts

@@ -0,0 +1,24 @@
+export interface LeverJob {
+  additional: string;
+  additionalPlain: string;
+  applyUrl: string;
+  categories: {
+    commitment: string;
+    location: string;
+    team: string;
+  };
+  createdAt: number;
+  description: string;
+  descriptionPlain: string;
+  hostedUrl: string;
+  id: string;
+  lists: { text: string; content: string }[];
+  text: string;
+}
+
+export interface Job {
+  location: string;
+  team: string;
+  title: string;
+  url: string;
+}

nx-dev/data-access-careers/src/node.index.ts

@@ -0,0 +1,2 @@
+export * from './lib/api';
+export * from './lib/models';

nx-dev/data-access-careers/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "jsx": "react-jsx",
+    "allowJs": false,
+    "esModuleInterop": false,
+    "allowSyntheticDefaultImports": true,
+    "strict": true
+  },
+  "files": [],
+  "include": [],
+  "references": [
+    {
+      "path": "./tsconfig.lib.json"
+    }
+  ],
+  "extends": "../../tsconfig.base.json"
+}

nx-dev/data-access-careers/tsconfig.lib.json

@@ -0,0 +1,24 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "outDir": "../../dist/out-tsc",
+    "types": [
+      "node",
+
+      "@nx/react/typings/cssmodule.d.ts",
+      "@nx/react/typings/image.d.ts"
+    ]
+  },
+  "exclude": [
+    "jest.config.ts",
+    "src/**/*.spec.ts",
+    "src/**/*.test.ts",
+    "src/**/*.spec.tsx",
+    "src/**/*.test.tsx",
+    "src/**/*.spec.js",
+    "src/**/*.test.js",
+    "src/**/*.spec.jsx",
+    "src/**/*.test.jsx"
+  ],
+  "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
+}

nx-dev/nx-dev/app/careers/page.tsx

@@ -0,0 +1,31 @@
+import {
+  MakeADifference,
+  WhyJoinNx,
+  CurrentOpenings,
+  WhatWeOffer,
+} from '@nx/nx-dev/ui-careers';
+import { DefaultLayout } from '@nx/nx-dev/ui-common';
+
+import { fetchJobsList } from '@nx/nx-dev/data-access-careers/node-only';
+
+async function getData() {
+  return await fetchJobsList();
+}
+
+export default async function CareersPage() {
+  const jobs = await getData();
+  return (
+    <DefaultLayout>
+      <MakeADifference />
+      <div className="mt-32 lg:mt-56">
+        <WhyJoinNx />
+      </div>
+      <div className="mt-32 lg:mt-56">
+        <CurrentOpenings jobs={jobs} />
+      </div>
+      <div className="mt-32 lg:mt-56">
+        <WhatWeOffer />
+      </div>
+    </DefaultLayout>
+  );
+}

nx-dev/nx-dev/app/layout.tsx

@@ -1,5 +1,5 @@
 import type { Metadata, Viewport } from 'next';
-import { Header, Footer, AnnouncementBanner } from '@nx/nx-dev/ui-common';
+import { AnnouncementBanner } from '@nx/nx-dev/ui-common';
 import AppRouterAnalytics from './app-router-analytics';
 import GlobalScripts from './global-scripts';
 

nx-dev/ui-careers/.babelrc

@@ -0,0 +1,12 @@
+{
+  "presets": [
+    [
+      "@nx/react/babel",
+      {
+        "runtime": "automatic",
+        "useBuiltIns": "usage"
+      }
+    ]
+  ],
+  "plugins": []
+}

nx-dev/ui-careers/.eslintrc.json

@@ -0,0 +1,18 @@
+{
+  "extends": ["plugin:@nx/react", "../../.eslintrc.json"],
+  "ignorePatterns": ["!**/*"],
+  "overrides": [
+    {
+      "files": ["*.ts", "*.tsx", "*.js", "*.jsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.ts", "*.tsx"],
+      "rules": {}
+    },
+    {
+      "files": ["*.js", "*.jsx"],
+      "rules": {}
+    }
+  ]
+}

nx-dev/ui-careers/README.md

@@ -0,0 +1,7 @@
+# ui-careers
+
+This library was generated with [Nx](https://nx.dev).
+
+## Running unit tests
+
+Run `nx test ui-careers` to execute the unit tests via [Jest](https://jestjs.io).

nx-dev/ui-careers/project.json

@@ -0,0 +1,9 @@
+{
+  "name": "ui-careers",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "nx-dev/ui-careers/src",
+  "projectType": "library",
+  "tags": [],
+  "// targets": "to see all targets run: nx show project ui-careers --web",
+  "targets": {}
+}

nx-dev/ui-careers/src/index.ts

@@ -0,0 +1,4 @@
+export * from './lib/current-openings';
+export * from './lib/make-a-difference';
+export * from './lib/what-we-offer';
+export * from './lib/why-join-nx';

nx-dev/ui-careers/src/lib/current-openings.tsx

@@ -0,0 +1,57 @@
+import { SectionHeading } from '@nx/nx-dev/ui-common';
+import { Job } from '@nx/nx-dev/data-access-careers/node-only';
+
+interface CurrentOpeningsProps {
+  jobs: Job[];
+}
+
+export async function CurrentOpenings({ jobs }: CurrentOpeningsProps) {
+  return (
+    <section
+      id="current-openings"
+      className="border-b border-t border-slate-100 bg-slate-50/40 dark:border-slate-800 dark:bg-slate-800/60"
+    >
+      <div className="mx-auto max-w-7xl px-4 py-16 sm:px-6 lg:px-8 lg:py-24">
+        <div className="relative mx-auto max-w-lg divide-y divide-slate-100 lg:max-w-7xl dark:divide-slate-700">
+          <header className="max-w-prose">
+            <SectionHeading as="h2" variant="title" className="mt-4">
+              Current Openings
+            </SectionHeading>
+          </header>
+
+          <div className="mt-6 grid gap-16 pt-10 lg:grid-cols-2 lg:gap-x-5 lg:gap-y-12">
+            {jobs.map((post) => (
+              <div
+                key={post.title}
+                className="relative mt-2 block rounded-lg border border-transparent p-4 transition hover:border-slate-100 hover:shadow-sm dark:hover:border-slate-700"
+              >
+                <p className="text-lg font-semibold leading-8 tracking-tight text-slate-800 dark:text-slate-200">
+                  {post.title}
+                </p>
+                <p className="mt-3 text-base">
+                  {post.location} / {post.team}
+                </p>
+                <a
+                  href={post.url}
+                  target="_blank"
+                  rel="nofollow noreferrer"
+                  className="absolute inset-0"
+                  title="Apply for this position"
+                >
+                  <span className="sr-only">Apply</span>
+                </a>
+              </div>
+            ))}
+            {!jobs.length ? (
+              <div className="mt-2 block">
+                <p className="text-lg font-semibold leading-8 tracking-tight text-slate-800 dark:text-slate-200">
+                  There are no job openings at this time.
+                </p>
+              </div>
+            ) : null}
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}

nx-dev/ui-careers/src/lib/make-a-difference.tsx

@@ -0,0 +1,18 @@
+import { SectionHeading } from '@nx/nx-dev/ui-common';
+
+export function MakeADifference() {
+  return (
+    <div
+      id="careers"
+      className="mx-auto max-w-3xl px-4 text-center sm:px-6 lg:px-8"
+    >
+      <SectionHeading as="h2" variant="display">
+        Make a difference
+      </SectionHeading>
+      <SectionHeading as="p" variant="subtitle" className="mt-6">
+        We build tools helping companies scale and modernize their development
+        practices.
+      </SectionHeading>
+    </div>
+  );
+}

nx-dev/ui-careers/src/lib/what-we-offer.tsx

@@ -0,0 +1,76 @@
+import { CheckIcon } from '@heroicons/react/24/outline';
+import { SectionHeading } from '@nx/nx-dev/ui-common';
+
+const features = [
+  {
+    name: 'Vacation and Sick Days',
+    description:
+      'Four weeks of paid vacation + unlimited sick days. Paid regional holidays. Spend more time with your family and friends.',
+  },
+  {
+    name: 'Remote Work',
+    description:
+      'Office space paid for by the company in Phoenix. Or work from home, work from anywhere you want.',
+  },
+  {
+    name: 'Competitive Salaries',
+    description:
+      'We pay really well because we want you to live comfortably. Salaried employment with benefits - not hourly contracts.',
+  },
+  {
+    name: 'Flexibility at Work',
+    description:
+      'You control your work hours. Run an errand or walk your dog during the day if you need to.',
+  },
+  {
+    name: 'Health, Dental, & Vision Insurance',
+    description:
+      'We offer plans for all employees. Canadian employees also get an HSA account.',
+  },
+  {
+    name: 'No Red Tape Attitude Towards Expenses',
+    description:
+      'Get the best hardware, software, supplies & books. No pre-approval for small purchases. Phone and internet reimbursement.',
+  },
+  {
+    name: 'Exceptional Career Development',
+    description:
+      'Expenses and time off provided for conference attendance and speaking. Write blog posts and books. Meet exceptional folks leading software communities and build your reputation.',
+  },
+];
+
+export function WhatWeOffer(): JSX.Element {
+  return (
+    <article className="mx-auto max-w-7xl px-6 lg:grid lg:grid-cols-3 lg:gap-x-12 lg:px-8">
+      <header>
+        <SectionHeading as="h2" variant="title">
+          What we offer
+        </SectionHeading>
+        <SectionHeading as="p" variant="subtitle" className="mt-6">
+          Work/life, balanced
+        </SectionHeading>
+      </header>
+
+      <div className="mt-20 lg:col-span-2 lg:mt-0">
+        <dl className="grid grid-cols-1 gap-12 sm:grid-flow-col sm:grid-cols-2 sm:grid-rows-4">
+          {features.map((feature) => (
+            <div key={feature.name} className="relative">
+              <dt>
+                <CheckIcon
+                  className="absolute mt-1 h-6 w-6 text-blue-500 dark:text-sky-500"
+                  aria-hidden="true"
+                />
+                <p className="ml-10 text-lg font-semibold leading-8 tracking-tight text-slate-800 dark:text-slate-200">
+                  {feature.name}
+                </p>
+              </dt>
+              <dd className="ml-10 mt-2 text-base leading-7">
+                {feature.description}
+              </dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+    </article>
+  );
+}