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

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>
+  );
+}

nx-dev/ui-careers/src/lib/why-join-nx.tsx

@@ -0,0 +1,65 @@
+import {
+  BeakerIcon,
+  GlobeAltIcon,
+  UserGroupIcon,
+} from '@heroicons/react/24/outline';
+import { SectionHeading } from '@nx/nx-dev/ui-common';
+
+const features = [
+  {
+    name: 'Live and work in places you love',
+    description:
+      "You get to decide when and how you work best. Whether you want to spend a week working remotely from a coffee shop in Barcelona, or you're a night owl who wants to work in the evening - it’s your choice. You know what makes you most productive and happy. Do that!",
+    icon: GlobeAltIcon,
+  },
+  {
+    name: 'Work on open source and SaaS projects',
+    description:
+      "You can work on Nx and Lerna - open source build tools used by millions of developers. You can also work on Nx Cloud - a SaaS product. You won't be bored.",
+    icon: BeakerIcon,
+  },
+  {
+    name: 'Trust your company and your colleagues',
+    description:
+      'We value transparency and honesty. Everyone knows how much money the company is making. Everyone knows how much everyone else is making. We don’t have behind the scenes negotiations, departmental silos or company politics.',
+    icon: UserGroupIcon,
+  },
+];
+
+export function WhyJoinNx(): JSX.Element {
+  return (
+    <article id="our-focus">
+      <div className="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
+        <header className="mx-auto max-w-3xl text-center">
+          <SectionHeading as="h2" variant="title">
+            Why join Nx?
+          </SectionHeading>
+          <SectionHeading as="p" variant="subtitle" className="mt-6">
+            We don’t care about your resume: where you worked at and how many
+            years of experience you have. What matters to us is whether you are
+            a great engineer who can do amazing work.
+          </SectionHeading>
+        </header>
+
+        <dl className="mt-24 grid grid-cols-1 gap-16 lg:grid lg:grid-cols-3">
+          {features.map((feature) => (
+            <div key={feature.name}>
+              <dt>
+                <feature.icon
+                  className="h-8 w-8 text-blue-500 dark:text-sky-500"
+                  aria-hidden="true"
+                />
+                <p className="mt-4 text-lg font-semibold leading-8 tracking-tight text-slate-800 dark:text-slate-200">
+                  {feature.name}
+                </p>
+              </dt>
+              <dd className="mt-2 text-slate-500 dark:text-slate-400">
+                <p className="text-base leading-7">{feature.description}</p>
+              </dd>
+            </div>
+          ))}
+        </dl>
+      </div>
+    </article>
+  );
+}

nx-dev/ui-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/ui-careers/tsconfig.lib.json

@@ -0,0 +1,23 @@
+{
+  "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"]
+}

tsconfig.base.json

@@ -57,6 +57,9 @@
       "@nx/node/*": ["packages/node/*"],
       "@nx/nuxt": ["packages/nuxt"],
       "@nx/nuxt/*": ["packages/nuxt/*"],
+      "@nx/nx-dev/data-access-careers/node-only": [
+        "nx-dev/data-access-careers/src/node.index.ts"
+      ],
       "@nx/nx-dev/data-access-documents": [
         "nx-dev/data-access-documents/src/index.ts"
       ],
@@ -88,6 +91,7 @@
       "@nx/nx-dev/models-package": ["nx-dev/models-package/src/index.ts"],
       "@nx/nx-dev/ui-animations": ["nx-dev/ui-animations/src/index.ts"],
       "@nx/nx-dev/ui-blog": ["nx-dev/ui-blog/src/index.ts"],
+      "@nx/nx-dev/ui-careers": ["nx-dev/ui-careers/src/index.ts"],
       "@nx/nx-dev/ui-cloud": ["nx-dev/ui-cloud/src/index.ts"],
       "@nx/nx-dev/ui-commands": ["nx-dev/ui-commands/src/index.ts"],
       "@nx/nx-dev/ui-common": ["nx-dev/ui-common/src/index.ts"],