miel.truyen/nx
1
0
Fork 0
Code Issues Pull Requests Actions 5 Packages Projects Releases Wiki Activity

chore(repo): fix file formatting (#26463)

Browse Source 
<!-- Please make sure you have read the submission guidelines before
posting an PR -->
<!--
https://github.com/nrwl/nx/blob/master/CONTRIBUTING.md#-submitting-a-pr
-->

<!-- Please make sure that your commit message follows our format -->
<!-- Example: `fix(nx): must begin with lowercase` -->

## Current Behavior
<!-- This is the behavior we have today -->

Files are unformatted.

## Expected Behavior
<!-- This is the behavior we should expect with the changes in this PR
-->

Files are formatted.

## Related Issue(s)
<!-- Please link the issue being fixed so it gets closed when this is
merged. -->

Fixes #
This commit is contained in:
Jason Jean 2024-06-07 16:10:22 -04:00 committed by GitHub
parent c5f5320ef2
commit a7dc8f6d7f
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
92 changed files with 218 additions and 217 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
e2e/angular/src/tailwind.test.ts
View File

@ -72,7 +72,7 @@ describe('Tailwind support', () => {
const createTailwindConfigFile = (
tailwindConfigFile = 'tailwind.config.js',
libSpacing: typeof spacing['projectVariant1']
libSpacing: (typeof spacing)['projectVariant1']
) => {
const tailwindConfig = `const { createGlobPatternsForDependencies } = require('@nx/angular/tailwind');
const { join } = require('path');
@ -98,7 +98,7 @@ describe('Tailwind support', () => {
const updateTailwindConfig = (
tailwindConfigPath: string,
projectSpacing: typeof spacing['root']
projectSpacing: (typeof spacing)['root']
) => {
const tailwindConfig = readFile(tailwindConfigPath);
@ -173,7 +173,7 @@ describe('Tailwind support', () => {
const assertLibComponentStyles = (
lib: string,
libSpacing: typeof spacing['root']
libSpacing: (typeof spacing)['root']
) => {
const builtComponentContent = readFile(
`dist/${lib}/esm2022/lib/foo.component.mjs`
@ -327,7 +327,7 @@ describe('Tailwind support', () => {
const assertAppComponentStyles = (
outputPath: string,
appSpacing: typeof spacing['root']
appSpacing: (typeof spacing)['root']
) => {
const mainBundlePath = listFiles(outputPath).find((file) =>
/^main[\.-]/.test(file)

2
e2e/utils/create-project-utils.ts
View File

@ -65,7 +65,7 @@ const nxPackages = [
`@nx/expo`,
] as const;
type NxPackage = typeof nxPackages[number];
type NxPackage = (typeof nxPackages)[number];
/**
* Sets up a new project in the temporary project path

6
graph/client/src/app/feature-projects/panels/search-depth.tsx
View File

@ -50,7 +50,7 @@ export const SearchDepth = memo(
<button
data-cy="decrement-depth-filter"
title="Remove ancestor level"
className="inline-flex items-center rounded-l-md border border-slate-300 bg-slate-50 py-2 px-4 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
className="inline-flex items-center rounded-l-md border border-slate-300 bg-slate-50 px-4 py-2 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
onClick={decrementDepthFilter}
>
<MinusIcon className="h-4 w-4"></MinusIcon>
@ -58,14 +58,14 @@ export const SearchDepth = memo(
<span
id="depthFilterValue"
data-cy="depth-value"
className="block w-full flex-1 rounded-none border-t border-b border-slate-300 bg-white p-1.5 text-center font-mono dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
className="block w-full flex-1 rounded-none border-b border-t border-slate-300 bg-white p-1.5 text-center font-mono dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
>
{searchDepth}
</span>
<button
data-cy="increment-depth-filter"
title="Add ancestor level"
className="inline-flex items-center rounded-r-md border border-slate-300 bg-slate-50 py-2 px-4 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
className="inline-flex items-center rounded-r-md border border-slate-300 bg-slate-50 px-4 py-2 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700"
onClick={incrementDepthFilter}
>
<PlusIcon className="h-4 w-4"></PlusIcon>

10
graph/client/src/app/feature-projects/panels/tracing-panel.tsx
View File

@ -28,7 +28,7 @@ export const TracingPanel = memo(
return (
<div className="mt-10 px-4">
<div className="transition duration-200 ease-in-out group-hover:opacity-60">
<h3 className="cursor-text pb-2 text-sm font-semibold uppercase tracking-wide text-slate-800 dark:text-slate-200 lg:text-xs">
<h3 className="cursor-text pb-2 text-sm font-semibold uppercase tracking-wide text-slate-800 lg:text-xs dark:text-slate-200">
Tracing Path
</h3>
<div className="mb-3 flex cursor-pointer flex-row rounded-md border text-center text-xs dark:border-slate-600">
@ -38,7 +38,7 @@ export const TracingPanel = memo(
algorithm === 'shortest'
? 'border-blue-500 dark:border-sky-500'
: 'border-slate-300 dark:border-slate-600'
} flex-1 rounded-l-md border bg-slate-50 py-2 px-4 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700`}
} flex-1 rounded-l-md border bg-slate-50 px-4 py-2 text-slate-500 hover:bg-slate-100 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700`}
>
<span>Shortest</span>
</button>
@ -48,7 +48,7 @@ export const TracingPanel = memo(
algorithm === 'all'
? 'border-blue-500 dark:border-sky-500'
: 'border-slate-300 dark:border-slate-600'
} flex-1 rounded-r-md border bg-slate-50 py-2 px-4 text-slate-500 hover:bg-slate-100 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700`}
} flex-1 rounded-r-md border bg-slate-50 px-4 py-2 text-slate-500 hover:bg-slate-100 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700`}
>
<span>All</span>
</button>
@ -66,7 +66,7 @@ export const TracingPanel = memo(
<span>{start}</span>
</div>
<div className="absolute top-2 right-2 flex translate-x-32 items-center rounded-md bg-white pl-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-500 transition-all transition duration-200 ease-in-out group-hover:translate-x-0 dark:bg-slate-800 dark:text-slate-300 dark:ring-slate-700">
<div className="absolute right-2 top-2 flex translate-x-32 items-center rounded-md bg-white pl-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-500 transition transition-all duration-200 ease-in-out group-hover:translate-x-0 dark:bg-slate-800 dark:text-slate-300 dark:ring-slate-700">
Reset
<span className="rounded-md p-1">
<XCircleIcon className="h-5 w-5"></XCircleIcon>
@ -95,7 +95,7 @@ export const TracingPanel = memo(
<span>{end}</span>
</div>
<div className="absolute top-2 right-2 flex translate-x-32 items-center rounded-md bg-white pl-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-500 transition-all transition duration-200 ease-in-out group-hover:translate-x-0 dark:bg-slate-800 dark:text-slate-300 dark:ring-slate-700">
<div className="absolute right-2 top-2 flex translate-x-32 items-center rounded-md bg-white pl-2 text-sm font-medium text-slate-700 shadow-sm ring-1 ring-slate-500 transition transition-all duration-200 ease-in-out group-hover:translate-x-0 dark:bg-slate-800 dark:text-slate-300 dark:ring-slate-700">
Reset
<span className="rounded-md p-1">
<XCircleIcon className="h-5 w-5" />

4
graph/client/src/app/feature-tasks/task-list.tsx
View File

@ -87,11 +87,11 @@ function SubProjectList({
return (
<>
{headerText !== '' ? (
<h3 className="mt-4 cursor-text py-2 text-sm font-semibold uppercase tracking-wide text-slate-800 dark:text-slate-200 lg:text-xs">
<h3 className="mt-4 cursor-text py-2 text-sm font-semibold uppercase tracking-wide text-slate-800 lg:text-xs dark:text-slate-200">
{headerText}
</h3>
) : null}
<ul className="mt-2 -ml-3">
<ul className="-ml-3 mt-2">
{sortedProjects.map((project) => {
return (
<ProjectListItem

8
graph/client/src/app/ui-tooltips/task-node-actions.tsx
View File

@ -9,9 +9,9 @@ export function TaskNodeActions(props: TaskNodeTooltipProps) {
}, [props.id]);
const project = props.id.split(':')[0];
return (
<div className="overflow-auto w-full min-w-[350px] max-w-full rounded-md border border-slate-200 dark:border-slate-800 w-full">
<div className="w-full w-full min-w-[350px] max-w-full overflow-auto rounded-md border border-slate-200 dark:border-slate-800">
<div
className="flex justify-between items-center w-full bg-slate-50 px-4 py-2 text-xs font-medium uppercase text-slate-500 dark:bg-slate-800 dark:text-slate-400"
className="flex w-full items-center justify-between bg-slate-50 px-4 py-2 text-xs font-medium uppercase text-slate-500 dark:bg-slate-800 dark:text-slate-400"
onClick={() => setIsOpen(!isOpen)}
data-cy="inputs-accordion"
>
@ -53,11 +53,11 @@ function InputAccordion({ section, inputs }) {
return [
<li
key={section}
className="flex justify-between items-center whitespace-nowrap px-4 py-2 text-sm font-medium text-slate-800 dark:text-slate-300"
className="flex items-center justify-between whitespace-nowrap px-4 py-2 text-sm font-medium text-slate-800 dark:text-slate-300"
onClick={() => setIsOpen(!isOpen)}
data-cy="input-section-entry"
>
<span className="block truncate font-normal font-bold">{section}</span>
<span className="block truncate font-bold font-normal">{section}</span>
<span>
{isOpen ? (
<ChevronUpIcon className="h-4 w-4" />

6
graph/ui-code-block/src/lib/json-code-block.tsx
View File

@ -47,7 +47,7 @@ export function JsonCodeBlock(props: JsonCodeBlockProps): JSX.Element {
}, [copied]);
return (
<div className="code-block group relative w-full">
<div className="absolute top-0 right-0 z-10 flex">
<div className="absolute right-0 top-0 z-10 flex">
<CopyToClipboard
text={jsonString}
onCopy={() => {
@ -104,12 +104,12 @@ export function sourcesRenderer(
}
return (
<span
className="flex group/line min-w-0 flex shrink-1"
className="group/line shrink-1 flex flex min-w-0"
key={`code-group${idx}`}
>
<span>{element}</span>
{sourceElement && (
<span className="opacity-0 min-w-0 flex shrink-1 group-hover/line:opacity-100 transition-opacity duration-150 ease-in-out inline pl-2">
<span className="shrink-1 inline flex min-w-0 pl-2 opacity-0 transition-opacity duration-150 ease-in-out group-hover/line:opacity-100">
{sourceElement}
</span>
)}

2
graph/ui-components/src/lib/debounced-text-input.tsx
View File

@ -75,7 +75,7 @@ export function DebouncedTextInput({
data-cy="textFilterReset"
type="reset"
onClick={resetClicked}
className="absolute top-1 right-1 inline-block rounded-md bg-slate-50 p-1 text-slate-400 dark:bg-slate-800"
className="absolute right-1 top-1 inline-block rounded-md bg-slate-50 p-1 text-slate-400 dark:bg-slate-800"
>
<BackspaceIcon className="h-5 w-5"></BackspaceIcon>
</button>

2
graph/ui-components/src/lib/dropdown.tsx
View File

@ -9,7 +9,7 @@ export function Dropdown(props: DropdownProps) {
const { className, children, ...rest } = props;
return (
<select
className={`form-select flex items-center rounded-md rounded-md border border-slate-300 bg-white pl-4 pr-8 py-2 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700 ${className}`}
className={`form-select flex items-center rounded-md rounded-md border border-slate-300 bg-white py-2 pl-4 pr-8 text-sm font-medium text-slate-700 shadow-sm hover:bg-slate-50 dark:border-slate-600 dark:bg-slate-800 dark:text-slate-300 hover:dark:bg-slate-700 ${className}`}
{...rest}
>
{children}

4
graph/ui-project-details/src/lib/pill.tsx
View File

@ -17,9 +17,9 @@ export function Pill({
color === 'grey' &&
'bg-slate-400/10 text-slate-600 ring-slate-400/40 dark:text-slate-400 dark:ring-slate-400/30',
color === 'green' &&
'dark:bg-green-500/10 bg-green-400/10 dark:text-green-400 text-green-500 dark:ring-green-500/20 ring-green-500/40',
'bg-green-400/10 text-green-500 ring-green-500/40 dark:bg-green-500/10 dark:text-green-400 dark:ring-green-500/20',
color === 'yellow' &&
'bg-yellow-50 dark:bg-yellow-900/30 text-yellow-600 dark:text-yellow-400 dark:ring-yellow-500/20 ring-yellow-500/40'
'bg-yellow-50 text-yellow-600 ring-yellow-500/40 dark:bg-yellow-900/30 dark:text-yellow-400 dark:ring-yellow-500/20'
)}
>
{text}

2
graph/ui-project-details/src/lib/target-configuration-details/fading-collapsible.tsx
View File

@ -43,7 +43,7 @@ export function FadingCollapsible({ children }: { children: ReactNode }) {
</div>
{isCollapsible && (
<div
className="h-4 w-4 absolute bottom-2 right-1/2 cursor-pointer"
className="absolute bottom-2 right-1/2 h-4 w-4 cursor-pointer"
onClick={(e) => {
e.stopPropagation();
toggleCollapsed();

2
graph/ui-project-details/src/lib/target-configuration-details/tooltip-trigger-text.tsx
View File

@ -6,7 +6,7 @@ export function TooltipTriggerText({
children: string | ReactNode;
}) {
return (
<span className="underline cursor-help underline-offset-8 decoration-2 decoration-dotted decoration-slate-700/50 dark:decoration-slate-400/50">
<span className="cursor-help underline decoration-slate-700/50 decoration-dotted decoration-2 underline-offset-8 dark:decoration-slate-400/50">
{children}
</span>
);

2
graph/ui-theme/src/lib/theme-panel.stories.tsx
View File

@ -5,7 +5,7 @@ const meta: Meta<typeof ThemePanel> = {
component: ThemePanel,
decorators: [
(Story) => (
<div className="bg-white dark:bg-slate-800 block h-auto w-auto border-2 px-8 py-4">
<div className="block h-auto w-auto border-2 bg-white px-8 py-4 dark:bg-slate-800">
<div className="flex justify-end">
<Story className="justify-items-end" />
</div>

2
graph/ui-tooltips/src/lib/project-edge-tooltip.tsx
View File

@ -39,7 +39,7 @@ export function ProjectEdgeNodeTooltip({
key={fileDep.fileName}
className={`whitespace-nowrap px-4 py-2 text-sm font-medium text-slate-800 dark:text-slate-300 ${
fileClickCallback !== undefined
? 'hover:underline hover:cursor-pointer'
? 'hover:cursor-pointer hover:underline'
: ''
}`}
onClick={

4
graph/ui-tooltips/src/lib/project-node-tooltip.tsx
View File

@ -26,10 +26,10 @@ export function ProjectNodeToolTip({
}: ProjectNodeToolTipProps) {
return (
<div className="text-sm text-slate-700 dark:text-slate-400">
<h4 className="flex justify-between items-center gap-4">
<h4 className="flex items-center justify-between gap-4">
<div className="flex items-center">
<Tag className="mr-3">{type}</Tag>
<span className="font-mono mr-3">{id}</span>
<span className="mr-3 font-mono">{id}</span>
</div>
{openConfigCallback && (
<button

4
graph/ui-tooltips/src/lib/task-node-tooltip.tsx
View File

@ -28,11 +28,11 @@ export function TaskNodeTooltip({
}: TaskNodeTooltipProps) {
return (
<div className="text-sm text-slate-700 dark:text-slate-400">
<h4 className="flex justify-between items-center gap-4 mb-3">
<h4 className="mb-3 flex items-center justify-between gap-4">
<div className="flex grow items-center justify-between">
<div className="flex items-center">
<Tag className="mr-3">{executor}</Tag>
<span className="font-mono mr-3">{id}</span>
<span className="mr-3 font-mono">{id}</span>
</div>
{openConfigCallback && (
<button

2
nx-dev/feature-ai/src/lib/feed-container.tsx
View File

@ -135,7 +135,7 @@ export function FeedContainer(): JSX.Element {
<div
className={cx(
'fixed bottom-0 left0 right-0 w-full py-4 px-4 lg:py-6 lg:px-0',
'left0 fixed bottom-0 right-0 w-full px-4 py-4 lg:px-0 lg:py-6',
'bg-gradient-to-t from-white via-white/75 dark:from-slate-900 dark:via-slate-900/75'
)}
>

4
nx-dev/feature-ai/src/lib/feed/feed-question.tsx
View File

@ -1,7 +1,7 @@
export function FeedQuestion({ content }: { content: string }) {
return (
<div className="flex justify-end w-full">
<p className="px-4 py-2 bg-blue-500 dark:bg-sky-500 selection:bg-sky-900 rounded-lg text-white text-base whitespace-pre-wrap break-words">
<div className="flex w-full justify-end">
<p className="whitespace-pre-wrap break-words rounded-lg bg-blue-500 px-4 py-2 text-base text-white selection:bg-sky-900 dark:bg-sky-500">
{content}
</p>
</div>

4
nx-dev/feature-ai/src/lib/feed/feed.tsx
View File

@ -10,12 +10,12 @@ export function Feed({
onFeedback: (statement: 'bad' | 'good', chatItemUid: string) => void;
}) {
return (
<div className="flow-root my-12">
<div className="my-12 flow-root">
<ul role="list" className="-mb-8 space-y-12">
{activity.map((activityItem, activityItemIdx) => (
<li
key={[activityItem.role, activityItem.id].join('-')}
className="pt-12 relative flex items-start space-x-3 feed-item"
className="feed-item relative flex items-start space-x-3 pt-12"
>
{activityItem.role === 'assistant' ? (
<FeedAnswer

4
nx-dev/feature-ai/src/lib/loading-state.tsx
View File

@ -1,8 +1,8 @@
export function LoadingState(): JSX.Element {
return (
<div className="w-full flex items-center justify-center px-4 gap-4 py-2 text-blue-500 dark:text-sky-500 transition ease-in-out duration-150">
<div className="flex w-full items-center justify-center gap-4 px-4 py-2 text-blue-500 transition duration-150 ease-in-out dark:text-sky-500">
<svg
className="animate-spin h-5 w-5"
className="h-5 w-5 animate-spin"
xmlns="http://www.w3.org/2000/svg"
fill="none"
stroke="currentColor"

8
nx-dev/feature-ai/src/lib/prompt.tsx
View File

@ -62,7 +62,7 @@ export function Prompt({
<form
ref={formRef}
onSubmit={handleSubmit}
className="relative flex gap-2 max-w-3xl mx-auto py-0 px-2 shadow-lg rounded-md border border-slate-300 bg-white dark:border-slate-900 dark:bg-slate-700"
className="relative mx-auto flex max-w-3xl gap-2 rounded-md border border-slate-300 bg-white px-2 py-0 shadow-lg dark:border-slate-900 dark:bg-slate-700"
>
<div
className={cx(
@ -104,7 +104,7 @@ export function Prompt({
</Button>
)}
</div>
<div className="overflow-y-auto w-full h-full max-h-[300px]">
<div className="h-full max-h-[300px] w-full overflow-y-auto">
<Textarea
onKeyDown={(event) => {
if (
@ -123,7 +123,7 @@ export function Prompt({
name="query"
maxLength={500}
disabled={isGenerating}
className="block w-full p-0 resize-none bg-transparent text-sm placeholder-slate-500 pl-2 py-[1.3rem] focus-within:outline-none focus:placeholder-slate-400 dark:focus:placeholder-slate-300 dark:text-white focus:outline-none focus:ring-0 border-none disabled:cursor-not-allowed"
className="block w-full resize-none border-none bg-transparent p-0 py-[1.3rem] pl-2 text-sm placeholder-slate-500 focus-within:outline-none focus:placeholder-slate-400 focus:outline-none focus:ring-0 disabled:cursor-not-allowed dark:text-white dark:focus:placeholder-slate-300"
placeholder="How does caching work?"
rows={1}
/>
@ -134,7 +134,7 @@ export function Prompt({
size="small"
type="submit"
disabled={isGenerating}
className="self-end w-12 h-12 disabled:cursor-not-allowed"
className="h-12 w-12 self-end disabled:cursor-not-allowed"
>
<div hidden className="sr-only">
Ask

2
nx-dev/feature-ai/src/lib/sidebar/activity-limit-reached.tsx
View File

@ -2,7 +2,7 @@ import { InformationCircleIcon } from '@heroicons/react/24/outline';
export function ActivityLimitReached(): JSX.Element {
return (
<div className="rounded-md bg-slate-50 dark:bg-slate-800/40 ring-slate-100 dark:ring-slate-700 ring-1 p-4 shadow-sm">
<div className="rounded-md bg-slate-50 p-4 shadow-sm ring-1 ring-slate-100 dark:bg-slate-800/40 dark:ring-slate-700">
<div className="flex">
<div className="flex-shrink-0">
<InformationCircleIcon

2
nx-dev/feature-ai/src/lib/sidebar/sidebar-container.tsx
View File

@ -3,7 +3,7 @@ import { ReactNode } from 'react';
export function SidebarContainer({ children }: { children: ReactNode[] }) {
return (
<div id="sidebar" data-testid="sidebar">
<div className="hidden h-full w-72 flex-col border-r border-slate-200 dark:border-slate-700 dark:bg-slate-900 md:flex">
<div className="hidden h-full w-72 flex-col border-r border-slate-200 md:flex dark:border-slate-700 dark:bg-slate-900">
<div className="relative flex flex-col gap-4 overflow-y-scroll p-4">
{...children}
</div>

2
nx-dev/feature-ai/src/lib/sidebar/warning-message.tsx
View File

@ -2,7 +2,7 @@ import { ExclamationTriangleIcon } from '@heroicons/react/24/outline';
export function WarningMessage(): JSX.Element {
return (
<div className="rounded-md bg-yellow-50 dark:bg-yellow-900/30 ring-1 ring-yellow-100 dark:ring-yellow-900 p-4">
<div className="rounded-md bg-yellow-50 p-4 ring-1 ring-yellow-100 dark:bg-yellow-900/30 dark:ring-yellow-900">
<h3 className="flex gap-x-3 text-sm font-medium text-yellow-600 dark:text-yellow-400">
<ExclamationTriangleIcon
className="h-5 w-5 text-yellow-500 dark:text-yellow-400"

2
nx-dev/feature-package-schema-viewer/src/lib/content.tsx
View File

@ -115,7 +115,7 @@ export function Content({
};
return (
<div data-document="main" className="min-w-0 flex-auto pt-8 pb-24 lg:pb-16">
<div data-document="main" className="min-w-0 flex-auto pb-24 pt-8 lg:pb-16">
<div className="mb-8 flex w-full items-center space-x-2">
<div className="w-full flex-grow space-x-4">
<div

6
nx-dev/feature-package-schema-viewer/src/lib/ui/headings.tsx
View File

@ -11,7 +11,7 @@ export const Heading1 = ({ title }: { title: string }) => (
<Link aria-hidden="true" tabIndex={-1} href={'#' + slugify(title)}>
<LinkIcon
role="img"
className="ml-2 mb-1 inline h-5 w-5 opacity-0 group-hover:opacity-100"
className="mb-1 ml-2 inline h-5 w-5 opacity-0 group-hover:opacity-100"
/>
</Link>
</h1>
@ -26,7 +26,7 @@ export const Heading2 = ({ title }: { title: string }) => (
<Link aria-hidden="true" tabIndex={-1} href={'#' + slugify(title)}>
<LinkIcon
role="img"
className="ml-2 mb-1 inline h-5 w-5 opacity-0 group-hover:opacity-100"
className="mb-1 ml-2 inline h-5 w-5 opacity-0 group-hover:opacity-100"
/>
</Link>
</h2>
@ -41,7 +41,7 @@ export const Heading3 = ({ title }: { title: string }) => (
<Link aria-hidden="true" tabIndex={-1} href={'#' + slugify(title)}>
<LinkIcon
role="img"
className="ml-2 mb-1 inline h-5 w-5 opacity-0 group-hover:opacity-100"
className="mb-1 ml-2 inline h-5 w-5 opacity-0 group-hover:opacity-100"
/>
</Link>
</h3>

2
nx-dev/feature-package-schema-viewer/src/lib/ui/package-reference.tsx
View File

@ -120,7 +120,7 @@ function EmptyList({
<li className="relative flex px-2 py-2 transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-slate-50 dark:focus-within:ring-sky-500 dark:hover:bg-slate-800/60">
<div className="flex-shrink-0 self-start rounded-lg border-slate-200 bg-slate-100 p-2 dark:border-slate-600 dark:bg-slate-700">
<InformationCircleIcon
className="h-5 w-5 flex-shrink-0 rounded-md border-slate-200 bg-slate-50 dark:bg-slate-800 dark:bg-slate-700"
className="h-5 w-5 flex-shrink-0 rounded-md border-slate-200 bg-slate-50 dark:bg-slate-700 dark:bg-slate-800"
role="img"
/>
</div>

12
nx-dev/feature-search/src/lib/algolia-search.global.css
View File

@ -3,7 +3,7 @@
}
body .DocSearch-Container {
@apply fixed top-0 left-0 z-[50] flex h-screen w-screen cursor-auto flex-col bg-black/10 p-4 backdrop-blur-sm dark:bg-white/10 sm:p-6 md:p-[10vh] lg:p-[12vh];
@apply fixed left-0 top-0 z-[50] flex h-screen w-screen cursor-auto flex-col bg-black/10 p-4 backdrop-blur-sm sm:p-6 md:p-[10vh] lg:p-[12vh] dark:bg-white/10;
}
.DocSearch-LoadingIndicator svg {
@ -243,11 +243,11 @@ body .DocSearch-Container {
}
.DocSearch-Hit > a {
@apply block py-4 px-6;
@apply block px-6 py-4;
}
.DocSearch-Hit--Result {
@apply py-3 px-4 !important;
@apply px-4 py-3 !important;
}
.DocSearch-Hit {
@ -296,7 +296,7 @@ body .DocSearch-Container {
}
.DocSearch-Footer {
@apply flex flex-none justify-end border-t border-slate-200 py-4 px-6 dark:border-slate-800;
@apply flex flex-none justify-end border-t border-slate-200 px-6 py-4 dark:border-slate-800;
}
.DocSearch-Commands {
@ -330,11 +330,11 @@ body .DocSearch-Container {
}
.DocSearch-StartScreen .DocSearch-Help {
@apply py-16 px-6 text-center text-slate-400 dark:text-slate-600;
@apply px-6 py-16 text-center text-slate-400 dark:text-slate-600;
}
.DocSearch-NoResults {
@apply px-4 pt-10 pb-8;
@apply px-4 pb-8 pt-10;
}
.DocSearch-NoResults .DocSearch-Title {

2
nx-dev/nx-dev/pages/404.tsx
View File

@ -45,7 +45,7 @@ export function FourOhFour(): JSX.Element {
src={illustrationUrl}
className="drop-shadow"
/>
<h1 className="mt-4 text-4xl font-extrabold tracking-tight text-slate-900 dark:text-slate-100 sm:text-6xl lg:ml-8">
<h1 className="mt-4 text-4xl font-extrabold tracking-tight text-slate-900 sm:text-6xl lg:ml-8 dark:text-slate-100">
<span className="sr-only">404 - </span>Page not found!
</h1>
</div>

2
nx-dev/nx-dev/pages/500.tsx
View File

@ -22,7 +22,7 @@ export default function FiveOhOh(): JSX.Element {
src="/images/illustrations/500.svg"
className="drop-shadow"
/>
<h1 className="mt-4 text-4xl font-extrabold tracking-tight text-slate-900 dark:text-slate-100 sm:text-6xl lg:ml-8">
<h1 className="mt-4 text-4xl font-extrabold tracking-tight text-slate-900 sm:text-6xl lg:ml-8 dark:text-slate-100">
<div className="sr-only">500 - </div>Internal Server Error!
</h1>
</div>

2
nx-dev/nx-dev/pages/community.tsx
View File

@ -46,7 +46,7 @@ export default function Community(): JSX.Element {
<ConnectWithUs />
</div>
<article id="nx-champions" className="relative">
<div className="mx-auto max-w-7xl items-stretch py-12 px-4 sm:grid sm:grid-cols-1 sm:gap-8 sm:px-6 md:grid-cols-3 lg:py-16 lg:px-8">
<div className="mx-auto max-w-7xl items-stretch px-4 py-12 sm:grid sm:grid-cols-1 sm:gap-8 sm:px-6 md:grid-cols-3 lg:px-8 lg:py-16">
<div className="md:col-span-2">
<header>
<SectionHeading as="h1" variant="title" id="champions">

10
nx-dev/nx-dev/pages/conf.tsx
View File

@ -74,9 +74,9 @@ export default function ConfPage(): JSX.Element {
<path d="M153.224 267C150.787 267 148.615 266.58 146.707 265.74C144.812 264.899 143.304 263.731 142.184 262.236C141.076 260.729 140.473 258.98 140.375 256.99H145.027C145.126 258.214 145.544 259.27 146.283 260.16C147.021 261.038 147.987 261.717 149.181 262.199C150.375 262.681 151.698 262.922 153.15 262.922C154.775 262.922 156.215 262.638 157.471 262.069C158.726 261.501 159.711 260.71 160.424 259.697C161.138 258.683 161.495 257.51 161.495 256.175C161.495 254.779 161.151 253.549 160.461 252.486C159.772 251.411 158.763 250.571 157.434 249.965C156.104 249.36 154.48 249.057 152.56 249.057H149.532V244.979H152.56C154.061 244.979 155.378 244.707 156.511 244.163C157.655 243.62 158.548 242.854 159.188 241.865C159.84 240.876 160.166 239.715 160.166 238.38C160.166 237.095 159.883 235.977 159.317 235.025C158.751 234.074 157.951 233.332 156.917 232.801C155.895 232.269 154.689 232.004 153.298 232.004C151.993 232.004 150.763 232.245 149.606 232.727C148.461 233.196 147.526 233.882 146.8 234.784C146.073 235.674 145.679 236.749 145.618 238.01H141.187C141.261 236.02 141.858 234.278 142.978 232.782C144.098 231.275 145.563 230.101 147.372 229.26C149.193 228.42 151.193 228 153.372 228C155.711 228 157.717 228.476 159.391 229.427C161.064 230.366 162.351 231.608 163.249 233.153C164.148 234.698 164.597 236.366 164.597 238.158C164.597 240.296 164.037 242.118 162.917 243.626C161.809 245.134 160.301 246.178 158.394 246.759V247.055C160.781 247.451 162.646 248.47 163.988 250.114C165.329 251.745 166 253.765 166 256.175C166 258.239 165.44 260.092 164.32 261.736C163.212 263.367 161.698 264.652 159.778 265.591C157.858 266.53 155.674 267 153.224 267Z" />
</svg>
</div>
<div className="mt-8 flex w-full flex-col pb-10 lg:mt-0 lg:w-3/5 lg:pl-16 lg:pb-0">
<div className="mt-8 flex w-full flex-col pb-10 lg:mt-0 lg:w-3/5 lg:pb-0 lg:pl-16">
<h2>
<div className="font-input-mono mb-4 inline-block rounded-lg border border-slate-200 bg-white/40 p-4 py-4 px-6 text-xl text-sm font-extrabold leading-none tracking-tight shadow-sm transition hover:bg-white dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800 sm:text-2xl lg:text-2xl">
<div className="font-input-mono mb-4 inline-block rounded-lg border border-slate-200 bg-white/40 p-4 px-6 py-4 text-sm text-xl font-extrabold leading-none tracking-tight shadow-sm transition hover:bg-white sm:text-2xl lg:text-2xl dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800">
<span className="sr-only">Announcing Nx Conf on </span>{' '}
September 26, 2023
</div>
@ -178,7 +178,7 @@ export default function ConfPage(): JSX.Element {
rel="noreferrer"
target="_blank"
href="https://www.youtube.com/live/IQ5YyEYZw68"
className="font-input-mono group flex w-full items-center text-blue-500 dark:text-sky-500 sm:text-xl"
className="font-input-mono group flex w-full items-center text-blue-500 sm:text-xl dark:text-sky-500"
>
<span className="group-hover:underline">
Watch the live stream recording
@ -228,9 +228,9 @@ export default function ConfPage(): JSX.Element {
</div>
<div className="w-full overflow-hidden">
{/*NAVIGATION*/}
<div className="hidden border-t border-b border-slate-200 dark:border-slate-700 md:block">
<div className="hidden border-b border-t border-slate-200 md:block dark:border-slate-700">
<div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
<div className="font-input-mono grid-cols-7 items-center divide-x divide-slate-200 text-center dark:divide-slate-700 md:grid">
<div className="font-input-mono grid-cols-7 items-center divide-x divide-slate-200 text-center md:grid dark:divide-slate-700">
<div className="p-8">
<svg
id="nx-conf-logo"

4
nx-dev/nx-dev/pages/launch-nx.tsx
View File

@ -48,9 +48,9 @@ export default function ConfPage(): JSX.Element {
<Header />
<LaunchNxIntro />
{/*NAVIGATION*/}
<div className="hidden border-t border-b border-slate-200 dark:border-slate-700 md:block">
<div className="hidden border-b border-t border-slate-200 md:block dark:border-slate-700">
<div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
<div className="font-input-mono grid-cols-5 items-center divide-x divide-slate-200 text-center dark:divide-slate-700 md:grid">
<div className="font-input-mono grid-cols-5 items-center divide-x divide-slate-200 text-center md:grid dark:divide-slate-700">
<div className="p-6">
<svg
className="inline-block dark:text-white"

6
nx-dev/ui-common/src/lib/champion-card.tsx
View File

@ -18,8 +18,8 @@ export function ChampionCard({ data }: { data: Champion }): JSX.Element {
<figure className="relative flex flex-col-reverse rounded-lg border border-slate-200 bg-white/40 p-4 text-sm shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-white dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800">
<blockquote className="mt-4 text-slate-600 dark:text-slate-400">
<p className="mb-4">{data.expertise}</p>
<div className="mt-0.5 ml text-xs text-slate-400 dark:text-slate-500 inline">
<ChatBubbleLeftIcon className="h-4 w-4 inline" />{' '}
<div className="ml mt-0.5 inline text-xs text-slate-400 dark:text-slate-500">
<ChatBubbleLeftIcon className="inline h-4 w-4" />{' '}
{data.contact[0].label}
</div>
</blockquote>
@ -38,7 +38,7 @@ export function ChampionCard({ data }: { data: Champion }): JSX.Element {
</a>
</div>
<div className="mt-0.5 text-xs text-slate-400 dark:text-slate-500">
<MapIcon className="h-4 w-4 inline" /> {data.location}
<MapIcon className="inline h-4 w-4" /> {data.location}
</div>
</div>
</figcaption>

10
nx-dev/ui-common/src/lib/champion-perks.tsx
View File

@ -63,7 +63,7 @@ export function ChampionPerks(): JSX.Element {
aria-hidden="true"
/>
<HeartIcon
className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:translate-x-8 group-hover:-translate-y-1 group-hover:opacity-100 dark:text-fuchsia-500"
className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:-translate-y-1 group-hover:translate-x-8 group-hover:opacity-100 dark:text-fuchsia-500"
aria-hidden="true"
/>
<GiftIcon
@ -89,7 +89,7 @@ export function ChampionPerks(): JSX.Element {
aria-hidden="true"
/>
<VideoCameraIcon
className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:translate-x-8 group-hover:-translate-y-1 group-hover:opacity-100 dark:text-fuchsia-500"
className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:-translate-y-1 group-hover:translate-x-8 group-hover:opacity-100 dark:text-fuchsia-500"
aria-hidden="true"
/>
<MicrophoneIcon
@ -116,7 +116,7 @@ export function ChampionPerks(): JSX.Element {
aria-hidden="true"
/>
<LightBulbIcon
className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:translate-x-8 group-hover:-translate-y-1 group-hover:opacity-100 dark:text-fuchsia-500"
className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:-translate-y-1 group-hover:translate-x-8 group-hover:opacity-100 dark:text-fuchsia-500"
aria-hidden="true"
/>
<ChatBubbleBottomCenterTextIcon
@ -143,7 +143,7 @@ export function ChampionPerks(): JSX.Element {
aria-hidden="true"
/>
<UsersIcon
className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:translate-x-8 group-hover:-translate-y-1 group-hover:opacity-100 dark:text-fuchsia-500"
className="absolute inset-0 h-8 w-8 text-purple-500 opacity-0 transition-all group-hover:-translate-y-1 group-hover:translate-x-8 group-hover:opacity-100 dark:text-fuchsia-500"
aria-hidden="true"
/>
<UserPlusIcon
@ -159,7 +159,7 @@ export function ChampionPerks(): JSX.Element {
<dd className="mt-2 text-base text-slate-500 dark:text-slate-400">
When you're ready to join, fill out the{' '}
<a
className="underline text-slate-900 dark:text-slate-100"
className="text-slate-900 underline dark:text-slate-100"
href="https://forms.gle/wYd9mC3ka64ki96G7"
>
application form

10
nx-dev/ui-common/src/lib/flip-card.tsx
View File

@ -38,20 +38,20 @@ export function FlipCard({
}
}}
className={cx(
'block group perspective',
'perspective group block',
isFlippable && !isFlipped ? 'cursor-pointer' : 'cursor-default'
)}
>
<div
className={cx(
'relative preserve-3d transition w-full h-full duration-200 content-center rounded-lg border-2 shadow-sm focus-within:ring-offset-2 bg-white/60 dark:bg-slate-800/90',
'preserve-3d relative h-full w-full content-center rounded-lg border-2 bg-white/60 shadow-sm transition duration-200 focus-within:ring-offset-2 dark:bg-slate-800/90',
isFlippable && isFlipped
? 'my-rotate-y-180 bg-white dark:bg-slate-800'
: '',
isFlippable
? isFlipped
? 'border-blue-400 dark:border-slate-800'
: 'border-blue-400 dark:border-slate-800 hover:[transform:rotateY(10deg)]'
: 'border-blue-400 hover:[transform:rotateY(10deg)] dark:border-slate-800'
: 'border-1 border-slate-300 dark:border-slate-800'
)}
>
@ -65,7 +65,7 @@ export function FlipCard({
export function FlipCardFront({ children }: { children: ReactNode }) {
return (
<div className="absolute backface-hidden w-full h-full flex flex-col justify-center items-center text-center font-bold text-3xl px-2">
<div className="backface-hidden absolute flex h-full w-full flex-col items-center justify-center px-2 text-center text-3xl font-bold">
{children}
</div>
);
@ -75,7 +75,7 @@ export function FlipCardBack({ children }: { children: ReactNode }) {
return (
<FlipCardContext.Consumer>
{() => (
<div className="my-rotate-y-180 backface-hidden w-full h-full overflow-hidden rounded-md dark:text-slate-100 text-slate-900 text-3xl dark:bg-slate-800 bg-white">
<div className="my-rotate-y-180 backface-hidden h-full w-full overflow-hidden rounded-md bg-white text-3xl text-slate-900 dark:bg-slate-800 dark:text-slate-100">
<div className="p-4 text-sm sm:text-sm md:text-sm lg:text-lg">
{children}
</div>

2
nx-dev/ui-common/src/lib/headers/default-menu-item.tsx
View File

@ -19,7 +19,7 @@ export function DefaultMenuItem({
return (
<Tag
className={cx(
'relative flex flex-1 gap-4 rounded-lg py-4 px-2 transition duration-150 ease-in-out',
'relative flex flex-1 gap-4 rounded-lg px-2 py-4 transition duration-150 ease-in-out',
item.isHighlight
? 'bg-slate-50 hover:bg-slate-100 dark:bg-slate-800/80 dark:hover:bg-slate-700/60'
: 'hover:bg-slate-50 dark:hover:bg-slate-800/60',

2
nx-dev/ui-common/src/lib/plugin-card.tsx
View File

@ -49,7 +49,7 @@ export function PluginCard({
className="flex grow flex-col focus:outline-none"
>
<span className="absolute inset-0" aria-hidden="true" />
<p className="line-clamp-3 mb-2 grow text-sm">{description}</p>
<p className="mb-2 line-clamp-3 grow text-sm">{description}</p>
<div className="flex flex-wrap items-center justify-between py-0.5 text-xs font-medium capitalize">
<div className="my-1 mr-1">

4
nx-dev/ui-common/src/lib/youtube.component.tsx
View File

@ -62,10 +62,10 @@ export function YouTube(props: {
width={props.width || '100%'}
allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture; fullscreen"
loading="lazy"
className="rounded-lg shadow-lg mb-1"
className="mb-1 rounded-lg shadow-lg"
/>
{props.caption && (
<p className="md:w-1/2 mx-auto pt-0 text-slate-500 dark:text-slate-400">
<p className="mx-auto pt-0 text-slate-500 md:w-1/2 dark:text-slate-400">
{props.caption}
</p>
)}

36
nx-dev/ui-community/src/lib/plugin-directory.tsx
View File

@ -88,56 +88,56 @@ export function PluginDirectory({
type="search"
/>
</div>
<div className="text-xs my-2 flex whitespace-nowrap">
<div className="py-1 mr-1">Order by:</div>
<div className="my-2 flex whitespace-nowrap text-xs">
<div className="mr-1 py-1">Order by:</div>
<div className="flex flex-wrap gap-1">
<button
className="rounded-sm border border-slate-200 bg-white py-1 px-1 font-semibold transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
className="rounded-sm border border-slate-200 bg-white px-1 py-1 font-semibold transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
onClick={() => setOrderBy('lastPublishDate')}
>
<ClockIcon className="h-4 w-4 inline-block mr-0.5 align-bottom"></ClockIcon>
<ClockIcon className="mr-0.5 inline-block h-4 w-4 align-bottom"></ClockIcon>
Release Date
{modifiers.orderBy === 'lastPublishDate' &&
modifiers.orderDirection === 'ASC' ? (
<ArrowLongUpIcon className="h-4 w-4 inline-block ml-0.5 align-bottom"></ArrowLongUpIcon>
<ArrowLongUpIcon className="ml-0.5 inline-block h-4 w-4 align-bottom"></ArrowLongUpIcon>
) : null}
{modifiers.orderBy === 'lastPublishDate' &&
modifiers.orderDirection === 'DESC' ? (
<ArrowLongDownIcon className="h-4 w-4 inline-block ml-0.5 align-bottom"></ArrowLongDownIcon>
<ArrowLongDownIcon className="ml-0.5 inline-block h-4 w-4 align-bottom"></ArrowLongDownIcon>
) : null}
</button>
<button
className="rounded-sm border border-slate-200 bg-white py-1 px-1 font-semibold transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
className="rounded-sm border border-slate-200 bg-white px-1 py-1 font-semibold transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
onClick={() => setOrderBy('npmDownloads')}
>
<ArrowDownTrayIcon className="h-4 w-4 inline-block mr-0.5 align-bottom"></ArrowDownTrayIcon>
<ArrowDownTrayIcon className="mr-0.5 inline-block h-4 w-4 align-bottom"></ArrowDownTrayIcon>
Downloads
{modifiers.orderBy === 'npmDownloads' &&
modifiers.orderDirection === 'ASC' ? (
<ArrowLongUpIcon className="h-4 w-4 inline-block ml-0.5 align-bottom"></ArrowLongUpIcon>
<ArrowLongUpIcon className="ml-0.5 inline-block h-4 w-4 align-bottom"></ArrowLongUpIcon>
) : null}
{modifiers.orderBy === 'npmDownloads' &&
modifiers.orderDirection === 'DESC' ? (
<ArrowLongDownIcon className="h-4 w-4 inline-block ml-0.5 align-bottom"></ArrowLongDownIcon>
<ArrowLongDownIcon className="ml-0.5 inline-block h-4 w-4 align-bottom"></ArrowLongDownIcon>
) : null}
</button>
<button
className="rounded-sm border border-slate-200 bg-white py-1 px-1 font-semibold transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
className="rounded-sm border border-slate-200 bg-white px-1 py-1 font-semibold transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
onClick={() => setOrderBy('githubStars')}
>
<StarIcon className="h-4 w-4 inline-block mr-0.5 align-bottom"></StarIcon>
<StarIcon className="mr-0.5 inline-block h-4 w-4 align-bottom"></StarIcon>
GH Stars
{modifiers.orderBy === 'githubStars' &&
modifiers.orderDirection === 'ASC' ? (
<ArrowLongUpIcon className="h-4 w-4 inline-block ml-0.5 align-bottom"></ArrowLongUpIcon>
<ArrowLongUpIcon className="ml-0.5 inline-block h-4 w-4 align-bottom"></ArrowLongUpIcon>
) : null}
{modifiers.orderBy === 'githubStars' &&
modifiers.orderDirection === 'DESC' ? (
<ArrowLongDownIcon className="h-4 w-4 inline-block ml-0.5 align-bottom"></ArrowLongDownIcon>
<ArrowLongDownIcon className="ml-0.5 inline-block h-4 w-4 align-bottom"></ArrowLongDownIcon>
) : null}
</button>
<button
className="rounded-sm border border-slate-200 bg-white py-1 px-1 font-semibold transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
className="rounded-sm border border-slate-200 bg-white px-1 py-1 font-semibold transition hover:bg-slate-100 dark:border-slate-700 dark:bg-slate-800 dark:hover:bg-slate-700"
onClick={() => setOrderBy('nxVersion')}
>
{/* Nx Logo */}
@ -145,7 +145,7 @@ export function PluginDirectory({
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
className="h-4 w-4 inline-block mx-0.5 align-bottom"
className="mx-0.5 inline-block h-4 w-4 align-bottom"
fill="currentColor"
>
<title>Nx</title>
@ -154,11 +154,11 @@ export function PluginDirectory({
Nx Version
{modifiers.orderBy === 'nxVersion' &&
modifiers.orderDirection === 'DESC' ? (
<ArrowLongUpIcon className="h-4 w-4 inline-block ml-0.5 align-bottom"></ArrowLongUpIcon>
<ArrowLongUpIcon className="ml-0.5 inline-block h-4 w-4 align-bottom"></ArrowLongUpIcon>
) : null}
{modifiers.orderBy === 'nxVersion' &&
modifiers.orderDirection === 'ASC' ? (
<ArrowLongDownIcon className="h-4 w-4 inline-block ml-0.5 align-bottom"></ArrowLongDownIcon>
<ArrowLongDownIcon className="ml-0.5 inline-block h-4 w-4 align-bottom"></ArrowLongDownIcon>
) : null}
</button>
</div>

4
nx-dev/ui-conference/src/lib/components/code-of-conduct.tsx
View File

@ -1,6 +1,6 @@
export function CodeOfConduct(): JSX.Element {
return (
<div className="border-t border-b border-slate-200 dark:border-slate-700">
<div className="border-b border-t border-slate-200 dark:border-slate-700">
<div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
<article className="grid grid-cols-1 md:grid-cols-2 md:divide-x md:divide-slate-200 md:dark:divide-slate-700">
<div className="px-5 py-12 md:pr-12">
@ -27,7 +27,7 @@ export function CodeOfConduct(): JSX.Element {
<div className="divide-y divide-slate-200 py-12 dark:divide-slate-700">
<div className="px-5 py-12 md:pl-12">
<a
className="font-input-mono group flex w-full items-center text-blue-500 dark:text-sky-500 sm:text-xl"
className="font-input-mono group flex w-full items-center text-blue-500 sm:text-xl dark:text-sky-500"
href="https://docs.google.com/document/d/1biFWD08Wrd99gRZNv4Q1tawEYGZEI3bd3J55E5uG2ZU/edit?usp=sharing"
>
<span className="group-hover:underline">

14
nx-dev/ui-conference/src/lib/components/schedule.tsx
View File

@ -11,13 +11,13 @@ export const scheduleRow = (item: ScheduleItem): JSX.Element => (
<div key={item.title + item.time} className="w-full">
<div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
<article className="grid w-full grid-cols-1 md:grid-cols-5 md:divide-x md:divide-slate-200 md:dark:divide-slate-700">
<div className="font-input-mono px-5 pt-12 pb-8 md:py-12">
<div className="font-input-mono px-5 pb-8 pt-12 md:py-12">
<span className="hidden md:block">{item.time}</span>
<span className="mb-4 rounded-md py-4 px-6 md:hidden">
<span className="mb-4 rounded-md px-6 py-4 md:hidden">
{item.time}
</span>
</div>
<div className="font-input-mono col-span-2 px-5 md:py-12 md:px-8">
<div className="font-input-mono col-span-2 px-5 md:px-8 md:py-12">
{item.videoUrl ? (
<h3 className="mb-4 underline">
<a href={item.videoUrl} target="_blank" rel="noreferrer">
@ -29,7 +29,7 @@ export const scheduleRow = (item: ScheduleItem): JSX.Element => (
)}
<div className="text-sm">{item.speakers.join(' & ')}</div>
</div>
<p className="col-span-2 px-5 pt-8 pb-12 md:py-12 md:px-8">
<p className="col-span-2 px-5 pb-12 pt-8 md:px-8 md:py-12">
{item.description}
</p>
</article>
@ -40,13 +40,13 @@ export const breakRow = (item: ScheduleItem): JSX.Element => (
<div key={item.title + item.time} className="w-full">
<div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
<div className="grid w-full grid-cols-1 md:grid-cols-5">
<div className="font-input-mono px-5 pt-12 pb-8 md:py-12">
<div className="font-input-mono px-5 pb-8 pt-12 md:py-12">
<span className="hidden md:block">{item.time}</span>
<span className="mb-4 rounded-md py-4 px-6 md:hidden">
<span className="mb-4 rounded-md px-6 py-4 md:hidden">
{item.time}
</span>
</div>
<div className="px-5 pb-12 md:col-span-4 md:border-l md:border-slate-200 md:py-12 md:px-8 md:dark:border-slate-700">
<div className="px-5 pb-12 md:col-span-4 md:border-l md:border-slate-200 md:px-8 md:py-12 md:dark:border-slate-700">
{item.videoUrl ? (
<h3 className="font-input-mono underline">
<a href={item.videoUrl} target="_blank" rel="noreferrer">

2
nx-dev/ui-conference/src/lib/components/speakers.tsx
View File

@ -21,7 +21,7 @@ export function Speakers(speakers: Array<Member>) {
{row.map((speaker) => (
<div
key={speaker.name}
className="border-slate-200 py-8 odd:border-b dark:border-slate-700 md:odd:border-r md:odd:border-b-0 md:odd:pr-12 md:even:pl-12"
className="border-slate-200 py-8 odd:border-b md:odd:border-b-0 md:odd:border-r md:odd:pr-12 md:even:pl-12 dark:border-slate-700"
>
<div className="px-5">
<MemberCard

2
nx-dev/ui-conference/src/lib/conf-location.tsx
View File

@ -1,6 +1,6 @@
export function ConfLocation(): JSX.Element {
return (
<div className="border-t border-b border-slate-200 dark:border-slate-700">
<div className="border-b border-t border-slate-200 dark:border-slate-700">
<div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
<article className="grid grid-cols-1 md:grid-cols-2 md:divide-x md:divide-slate-200 md:dark:divide-slate-700">
<div className="px-5 py-12 md:pr-12">

2
nx-dev/ui-conference/src/lib/conf-schedule-short.tsx
View File

@ -184,7 +184,7 @@ export function ConfScheduleShort(): JSX.Element {
</div>
</div>
</div>
<section className="w-full divide-y divide-slate-200 border-t border-b border-slate-200 dark:divide-slate-700 dark:border-slate-700">
<section className="w-full divide-y divide-slate-200 border-b border-t border-slate-200 dark:divide-slate-700 dark:border-slate-700">
<div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
<article className="md:divide-x md:divide-slate-200 md:dark:divide-slate-700">
<div className="px-5 py-12 md:pr-12">

2
nx-dev/ui-conference/src/lib/conf-sponsors.tsx
View File

@ -107,7 +107,7 @@ export function ConfSponsors(): JSX.Element {
{row.map((speaker) => (
<div
key={speaker.name}
className="border-slate-600 py-8 odd:border-b md:odd:border-r md:odd:border-b-0 md:odd:pr-12 md:even:pl-12"
className="border-slate-600 py-8 odd:border-b md:odd:border-b-0 md:odd:border-r md:odd:pr-12 md:even:pl-12"
>
<div className="h-full px-5">
<SponsorCard

8
nx-dev/ui-conference/src/lib/conf-workshop.tsx
View File

@ -1,13 +1,13 @@
export function ConfWorkshop(): JSX.Element {
return (
<div className="border-t border-b border-slate-200 dark:border-slate-700">
<div className="border-b border-t border-slate-200 dark:border-slate-700">
<div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
<article className="grid grid-cols-1 md:grid-cols-2 md:divide-x md:divide-slate-200 md:dark:divide-slate-700">
<div className="px-5 py-12 md:pr-12">
<div className="font-input-mono text-slate-700 dark:text-slate-300">
Day 1 - Sunday, Oct. 16 | Day 2 - Tuesday, Oct. 18
</div>
<h2 className="font-input-mono pt-8 pb-2 text-2xl">
<h2 className="font-input-mono pb-2 pt-8 text-2xl">
Learn from the Creators of Nx, First Hand!
</h2>
<p className="text-md mb-8">
@ -22,7 +22,7 @@ export function ConfWorkshop(): JSX.Element {
monorepo that not just works initially but scales with your team
and organization.
</p>
<h4 className="font-input-mono mt-8 mb-4 text-lg">
<h4 className="font-input-mono mb-4 mt-8 text-lg">
$800 All-Inclusive / $400 Day 2 only
</h4>
<p className="mb-4">
@ -152,7 +152,7 @@ export function ConfWorkshop(): JSX.Element {
</div>*/}
<div className="px-5 py-12 md:pl-12">
<a
className="font-input-mono group flex w-full items-center text-blue-500 dark:text-sky-500 sm:text-xl"
className="font-input-mono group flex w-full items-center text-blue-500 sm:text-xl dark:text-sky-500"
href="https://ti.to/nx-conf/nx-conf-2022?utm_source=nxdev"
>
<span className="group-hover:underline">Save your ticket!</span>

6
nx-dev/ui-conference/src/lib/launch-week/agenda.tsx
View File

@ -70,7 +70,7 @@ export function LaunchWeekAgenda(): JSX.Element {
return (
<div className="border-t border-slate-200 dark:border-slate-700">
<section className="w-full divide-y divide-slate-200 border-t border-b border-slate-200 dark:divide-slate-700 dark:border-slate-700">
<section className="w-full divide-y divide-slate-200 border-b border-t border-slate-200 dark:divide-slate-700 dark:border-slate-700">
<div className="mx-auto max-w-screen-lg xl:max-w-screen-xl">
<article className="md:divide-x md:divide-slate-200 md:dark:divide-slate-700">
<div className="px-5 py-12 md:pr-12">
@ -82,7 +82,7 @@ export function LaunchWeekAgenda(): JSX.Element {
rel="noreferrer"
target="_blank"
href="https://youtu.be/fy0K2Smyj5A"
className="font-input-mono group flex w-full items-center text-blue-500 dark:text-sky-500 sm:text-xl"
className="font-input-mono group flex w-full items-center text-blue-500 sm:text-xl dark:text-sky-500"
>
<span className="group-hover:underline">
Watch the conference recording
@ -128,7 +128,7 @@ const launchWeekScheduleRow = (item: ScheduleItem): JSX.Element => (
<article className="grid w-full grid-cols-1 md:grid-cols-5 md:divide-x md:divide-slate-200 md:dark:divide-slate-700">
<div className="font-input-mono flex items-center px-5 py-6">
<span className="hidden md:block">{item.time}</span>
<span className="mb-4 rounded-md py-4 px-6 md:hidden">
<span className="mb-4 rounded-md px-6 py-4 md:hidden">
{item.time}
</span>
</div>

10
nx-dev/ui-conference/src/lib/launch-week/announcements.tsx
View File

@ -41,7 +41,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
This is what Nx Project Crystal is all about.
</p>
</div>
<div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-y-0 sm:space-x-2">
<div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-x-2 sm:space-y-0">
<ButtonLink
variant="primary"
size="default"
@ -110,7 +110,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
powerful monorepo capabilities.
</p>
</div>
<div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-y-0 sm:space-x-2">
<div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-x-2 sm:space-y-0">
<ButtonLink
variant="primary"
size="default"
@ -175,7 +175,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
maintaining CI/CD infrastructure.
</p>
</div>
<div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-y-0 sm:space-x-2">
<div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-x-2 sm:space-y-0">
<ButtonLink
variant="primary"
size="default"
@ -237,7 +237,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
and optimize your codebase and pipelines.
</p>
</div>
<div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-y-0 sm:space-x-2">
<div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-x-2 sm:space-y-0">
<ButtonLink
variant="primary"
size="default"
@ -295,7 +295,7 @@ export function LaunchWeekAnnouncements(): JSX.Element {
chime in for our live-stream!
</p>
</div>
<div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-y-0 sm:space-x-2">
<div className="action flex flex-col space-y-2 pt-4 sm:flex-row sm:space-x-2 sm:space-y-0">
<ButtonLink
variant="primary"
size="default"

4
nx-dev/ui-conference/src/lib/launch-week/community-partners.tsx
View File

@ -59,11 +59,11 @@ export function LaunchNxCommunityPartners(): JSX.Element {
return (
<div className="border-t border-slate-200 dark:border-slate-700">
<div className="mx-auto max-w-7xl py-6">
<div className="mx-auto mt-10 px-6 grid max-w-lg grid-cols-1 items-center gap-8 sm:max-w-xl md:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
<div className="mx-auto mt-10 grid max-w-lg grid-cols-1 items-center gap-8 px-6 sm:max-w-xl md:grid-cols-2 lg:mx-0 lg:max-w-none lg:grid-cols-3">
{partners.map((partner) => (
<a
key={partner.name}
className="flex justify-center w-full h-full bg-white p-8 rounded-lg"
className="flex h-full w-full justify-center rounded-lg bg-white p-8"
href={partner.linkTarget}
>
<img

8
nx-dev/ui-conference/src/lib/launch-week/intro.tsx
View File

@ -24,9 +24,9 @@ export function LaunchNxIntro() {
/>
</svg>
</div>
<div className="mt-8 flex w-full flex-col pb-10 lg:mt-0 lg:w-3/5 lg:pl-16 lg:pb-0">
<div className="mt-8 flex w-full flex-col pb-10 lg:mt-0 lg:w-3/5 lg:pb-0 lg:pl-16">
<h2>
<div className="font-input-mono mb-4 inline-block rounded-lg border border-slate-200 bg-white/40 p-4 py-4 px-6 text-xl text-sm font-extrabold leading-none tracking-tight shadow-sm transition hover:bg-white dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800 sm:text-2xl lg:text-2xl">
<div className="font-input-mono mb-4 inline-block rounded-lg border border-slate-200 bg-white/40 p-4 px-6 py-4 text-sm text-xl font-extrabold leading-none tracking-tight shadow-sm transition hover:bg-white sm:text-2xl lg:text-2xl dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800">
<span className="sr-only">Announcing Launch Nx on </span> February
5-9, 2024
</div>
@ -49,7 +49,7 @@ export function LaunchNxIntro() {
<a
href="#conf"
className="font-input-mono group flex w-full items-center text-blue-500 dark:text-sky-500 sm:text-xl"
className="font-input-mono group flex w-full items-center text-blue-500 sm:text-xl dark:text-sky-500"
>
<span className="group-hover:underline">Watch the talks</span>
<svg
@ -72,7 +72,7 @@ export function LaunchNxIntro() {
rel="noreferrer"
target="_blank"
href="https://youtu.be/fy0K2Smyj5A"
className="font-input-mono group flex w-full items-center text-blue-500 dark:text-sky-500 sm:text-xl"
className="font-input-mono group flex w-full items-center text-blue-500 sm:text-xl dark:text-sky-500"
>
<span className="group-hover:underline">
Watch the full conference recording

2
nx-dev/ui-fence/src/lib/fence.tsx
View File

@ -160,7 +160,7 @@ export function Fence({
return (
<div className="code-block group relative w-full">
<div>
<div className="absolute top-0 right-0 z-10 flex">
<div className="absolute right-0 top-0 z-10 flex">
{enableCopy && enableCopy === true && (
<CopyToClipboard
text={command && command !== '' ? command : children}

6
nx-dev/ui-fence/src/lib/selector.tsx
View File

@ -22,7 +22,7 @@ export function Selector<T = {}>(props: SelectorProps<T>): JSX.Element {
<div className="relative">
<Listbox.Button
className={
'relative w-full cursor-pointer border border-slate-200 dark:border-slate-700 py-2 pl-3 pr-10 text-left font-medium focus:outline-none focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300 sm:text-sm' +
'relative w-full cursor-pointer border border-slate-200 py-2 pl-3 pr-10 text-left font-medium focus:outline-none focus-visible:border-blue-500 focus-visible:ring-2 focus-visible:ring-white focus-visible:ring-opacity-75 focus-visible:ring-offset-2 focus-visible:ring-offset-blue-300 sm:text-sm dark:border-slate-700' +
(props.className ? ` ${props.className}` : '')
}
>
@ -51,13 +51,13 @@ export function Selector<T = {}>(props: SelectorProps<T>): JSX.Element {
>
<Listbox.Options
static
className="absolute z-10 mt-1 pl-0 max-h-60 w-full overflow-auto rounded-sm py-1 text-base shadow-md focus:outline-none sm:text-sm bg-white dark:bg-slate-800/60 dark:focus-within:ring-sky-500"
className="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-sm bg-white py-1 pl-0 text-base shadow-md focus:outline-none sm:text-sm dark:bg-slate-800/60 dark:focus-within:ring-sky-500"
>
{props.items.map((item, personIdx) => (
<Listbox.Option
key={personIdx}
className={({ active }) =>
`relative list-none cursor-pointer hover:bg-slate-50 dark:hover:bg-slate-800 select-none py-2 px-3`
`relative cursor-pointer select-none list-none px-3 py-2 hover:bg-slate-50 dark:hover:bg-slate-800`
}
value={item}
>

4
nx-dev/ui-home/src/lib/extensible-and-integrated.tsx
View File

@ -10,7 +10,7 @@ export function ExtensibleAndIntegrated(): JSX.Element {
id="extensible-and-integrated"
className="overflow-hidden bg-slate-50 pt-28 dark:bg-slate-800/40"
>
<div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
<div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
<header className="max-w-2xl">
<SectionHeading
as="h1"
@ -80,7 +80,7 @@ export function ExtensibleAndIntegrated(): JSX.Element {
</p>
</div>
</div>
<div className="relative mx-auto max-w-7xl px-4 pt-6 pb-12 sm:px-6 lg:px-8 lg:pb-4 lg:pt-6">
<div className="relative mx-auto max-w-7xl px-4 pb-12 pt-6 sm:px-6 lg:px-8 lg:pb-4 lg:pt-6">
<Tab.Group>
<Tab.List>
<div className="flex justify-between space-x-4 md:justify-start">

12
nx-dev/ui-home/src/lib/extensible-and-integrated/github-intergration-tab.tsx
View File

@ -45,11 +45,11 @@ export function GitHubIntegrationTab(): JSX.Element {
</div>
{/*HORIZONTAL LINK*/}
<div className="absolute right-0 hidden w-48 translate-x-full translate-y-12 items-center md:flex">
<span className="absolute top-0 left-0 -mt-1 -ml-1 flex h-2 w-2">
<span className="absolute left-0 top-0 -ml-1 -mt-1 flex h-2 w-2">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 dark:bg-sky-500" />
<span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 dark:bg-slate-700" />
</span>
<span className="absolute top-0 right-0 -mt-1 -mr-1 flex h-2 w-2">
<span className="absolute right-0 top-0 -mr-1 -mt-1 flex h-2 w-2">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 dark:bg-sky-500" />
<span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 dark:bg-slate-700" />
</span>
@ -132,11 +132,11 @@ export function GitHubIntegrationTab(): JSX.Element {
</div>
{/*HORIZONTAL LINK*/}
<div className="absolute bottom-80 right-0 hidden w-24 translate-x-full translate-y-12 items-center md:flex">
<span className="absolute top-0 left-0 -mt-1 -ml-1 flex h-2 w-2">
<span className="absolute left-0 top-0 -ml-1 -mt-1 flex h-2 w-2">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 dark:bg-sky-500" />
<span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 dark:bg-slate-700" />
</span>
<span className="absolute top-0 right-0 -mt-1 -mr-1 flex h-2 w-2">
<span className="absolute right-0 top-0 -mr-1 -mt-1 flex h-2 w-2">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 dark:bg-sky-500" />
<span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 dark:bg-slate-700" />
</span>
@ -148,7 +148,7 @@ export function GitHubIntegrationTab(): JSX.Element {
aria-hidden="true"
className="relative hidden px-4 pr-6 md:flex lg:col-span-2 lg:h-full lg:px-0"
>
<div className="absolute -top-28 left-36 mx-auto h-[510px] w-full w-auto max-w-none overflow-hidden rounded-xl border border-slate-200 shadow-xl dark:border-slate-700">
<div className="absolute -top-28 left-36 mx-auto h-[510px] w-auto w-full max-w-none overflow-hidden rounded-xl border border-slate-200 shadow-xl dark:border-slate-700">
<Image
src="/images/nx-cloud.webp"
alt="Nx Cloud app"
@ -157,7 +157,7 @@ export function GitHubIntegrationTab(): JSX.Element {
height={510}
/>
</div>
<div className="absolute left-12 -bottom-2 mx-auto flex w-full w-auto max-w-none overflow-hidden rounded-xl border border-slate-200 shadow-xl">
<div className="absolute -bottom-2 left-12 mx-auto flex w-auto w-full max-w-none overflow-hidden rounded-xl border border-slate-200 shadow-xl">
<Image
src="/images/github-nxcloud.webp"
alt="Nx Cloud GitHub app"

6
nx-dev/ui-home/src/lib/extensible-and-integrated/graph-tab.tsx
View File

@ -39,17 +39,17 @@ export function GraphTab(): JSX.Element {
</div>
</div>
<div className="relative -top-5 mr-0.5 hidden grow items-center lg:flex">
<span className="absolute top-0 left-0 -mt-1 -ml-1 flex h-2 w-2">
<span className="absolute left-0 top-0 -ml-1 -mt-1 flex h-2 w-2">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 dark:bg-sky-500" />
<span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 dark:bg-slate-700" />
</span>
<span className="absolute top-0 right-0 -mt-1 -mr-1 flex h-2 w-2">
<span className="absolute right-0 top-0 -mr-1 -mt-1 flex h-2 w-2">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 dark:bg-sky-500" />
<span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 dark:bg-slate-700" />
</span>
<div className="-m-0.5 h-0.5 w-full bg-slate-200 dark:bg-slate-700" />
</div>
<div className="z-10 h-auto overflow-hidden rounded-lg border border-slate-200 shadow dark:border-slate-700 lg:min-h-[485px] lg:w-[690px]">
<div className="z-10 h-auto overflow-hidden rounded-lg border border-slate-200 shadow lg:min-h-[485px] lg:w-[690px] dark:border-slate-700">
<div className="flex h-7 w-full items-center justify-start space-x-1.5 bg-slate-200 px-3 dark:bg-slate-700">
<span className="h-2 w-2 rounded-full bg-red-400"></span>
<span className="h-2 w-2 rounded-full bg-yellow-400"></span>

12
nx-dev/ui-home/src/lib/extensible-and-integrated/ide-integration-tab.tsx
View File

@ -46,7 +46,7 @@ export function IdeIntegrationTab(): JSX.Element {
className="wrapper my-8 grid h-full items-center gap-16 md:grid-cols-2 lg:grid-cols-3"
>
<div className="lg:col-span-2">
<div className="w-full overflow-hidden overflow-hidden rounded-lg rounded-lg border border-slate-200 shadow-lg shadow dark:hidden dark:border-slate-700">
<div className="w-full overflow-hidden overflow-hidden rounded-lg rounded-lg border border-slate-200 shadow shadow-lg dark:hidden dark:border-slate-700">
<Image
src="/images/nx-console/vscode-light.webp"
alt="Nx Console app screenshot"
@ -55,7 +55,7 @@ export function IdeIntegrationTab(): JSX.Element {
height={800}
/>
</div>
<div className="hidden w-full overflow-hidden overflow-hidden rounded-lg rounded-lg border border-slate-200 shadow-lg shadow dark:block dark:border-slate-700">
<div className="hidden w-full overflow-hidden overflow-hidden rounded-lg rounded-lg border border-slate-200 shadow shadow-lg dark:block dark:border-slate-700">
<Image
src="/images/nx-console/vscode-dark.webp"
alt="Nx Console app screenshot"
@ -69,7 +69,7 @@ export function IdeIntegrationTab(): JSX.Element {
{features.map((feature) => (
<div
key={feature.name}
className="group relative rounded-lg px-4 py-2 transition hover:bg-slate-100 dark:hover:bg-slate-800/40 sm:flex"
className="group relative rounded-lg px-4 py-2 transition hover:bg-slate-100 sm:flex dark:hover:bg-slate-800/40"
>
<div
className={cx(
@ -77,11 +77,11 @@ export function IdeIntegrationTab(): JSX.Element {
feature.connectionWidth
)}
>
<span className="absolute top-0 left-0 -mt-1 -ml-1 flex h-2 w-2">
<span className="absolute left-0 top-0 -ml-1 -mt-1 flex h-2 w-2">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 transition dark:bg-sky-500" />
<span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 transition group-hover:bg-blue-600 group-hover:bg-sky-600 dark:bg-slate-700" />
</span>
<span className="absolute top-0 right-0 -mt-1 -mr-1 flex h-2 w-2">
<span className="absolute right-0 top-0 -mr-1 -mt-1 flex h-2 w-2">
<span className="absolute inline-flex h-full w-full animate-ping rounded-full bg-blue-500 opacity-75 transition dark:bg-sky-500" />
<span className="relative inline-flex h-2 w-2 rounded-full bg-slate-200 transition group-hover:bg-blue-600 group-hover:bg-sky-600 dark:bg-slate-700" />
</span>
@ -90,7 +90,7 @@ export function IdeIntegrationTab(): JSX.Element {
<div className="sm:flex-shrink-0">
<div className="flow-root">{feature.icon}</div>
</div>
<div className="mt-3 sm:mt-0 sm:ml-3">
<div className="mt-3 sm:ml-3 sm:mt-0">
<h3 className="text-sm font-medium">{feature.name}</h3>
<Link href={feature.link}>
<span className="absolute inset-0" aria-hidden="true" />

4
nx-dev/ui-home/src/lib/getting-started.tsx
View File

@ -4,9 +4,9 @@ export function GettingStarted(): JSX.Element {
return (
<article
id="getting-started"
className="border-t border-b border-slate-200 bg-gradient-to-r from-cyan-500 to-blue-500 shadow-inner dark:border-slate-700"
className="border-b border-t border-slate-200 bg-gradient-to-r from-cyan-500 to-blue-500 shadow-inner dark:border-slate-700"
>
<div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-24 lg:px-8">
<div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:flex lg:items-center lg:justify-between lg:px-8 lg:py-24">
<div>
<h2 className="text-3xl font-bold tracking-tight text-slate-900 md:text-4xl">
<span className="block">Ready to dive in?</span>

2
nx-dev/ui-home/src/lib/hero.tsx
View File

@ -41,7 +41,7 @@ export function Hero(): JSX.Element {
</div>
<div className="text-center">
<h1
className="text-3xl font-bold leading-none tracking-tight text-black dark:text-white sm:mt-6 sm:text-5xl md:text-6xl"
className="text-3xl font-bold leading-none tracking-tight text-black sm:mt-6 sm:text-5xl md:text-6xl dark:text-white"
data-cy="primary-heading"
>
<span className="rounded-lg bg-gradient-to-r from-cyan-500 to-blue-500 bg-clip-text text-transparent">

4
nx-dev/ui-home/src/lib/improve-worst-ci-case.tsx
View File

@ -4,9 +4,9 @@ export function ImproveWorstCiCase(): JSX.Element {
return (
<article
id="getting-started"
className="border-t border-b border-slate-200 bg-gradient-to-r from-cyan-500 to-blue-500 shadow-inner dark:border-slate-700"
className="border-b border-t border-slate-200 bg-gradient-to-r from-cyan-500 to-blue-500 shadow-inner dark:border-slate-700"
>
<div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-24 lg:px-8">
<div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:flex lg:items-center lg:justify-between lg:px-8 lg:py-24">
<div>
<h2 className="text-3xl font-bold tracking-tight text-slate-900 md:text-4xl">
<span className="block">Taste the performance,</span>

2
nx-dev/ui-home/src/lib/migrate.tsx
View File

@ -6,7 +6,7 @@ export function Migrate(): JSX.Element {
id="getting-started"
className="bg-gradient-to-r from-pink-500 to-fuchsia-500"
>
<div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:flex lg:items-center lg:justify-between lg:py-24 lg:px-8">
<div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:flex lg:items-center lg:justify-between lg:px-8 lg:py-24">
<div>
<h2 className="text-3xl font-bold tracking-tight text-slate-900 md:text-4xl">
<span className="block">Already have a monorepo?</span>

2
nx-dev/ui-home/src/lib/migrations-and-code-generation.tsx
View File

@ -7,7 +7,7 @@ export function MigrationsAndCodeGeneration(): JSX.Element {
id="affected-and-code-generation"
className="relative overflow-hidden bg-slate-50 py-28 dark:bg-slate-800/40"
>
<div className="mx-auto max-w-7xl py-12 px-4 sm:grid sm:grid-cols-2 sm:gap-8 sm:px-6 lg:py-16 lg:px-8">
<div className="mx-auto max-w-7xl px-4 py-12 sm:grid sm:grid-cols-2 sm:gap-8 sm:px-6 lg:px-8 lg:py-16">
<div>
<header>
<SectionHeading as="h1" variant="title" id="evergreen-setup">

2
nx-dev/ui-home/src/lib/monorepo-styles.tsx
View File

@ -7,7 +7,7 @@ export function MonorepoStyles(): JSX.Element {
id="monorepo-styles"
className="relative overflow-hidden bg-slate-50 pt-28 dark:bg-slate-800/40"
>
<div className="mx-auto max-w-7xl py-12 px-4 sm:grid sm:grid-cols-2 sm:gap-8 sm:px-6 lg:py-16 lg:px-8">
<div className="mx-auto max-w-7xl px-4 py-12 sm:grid sm:grid-cols-2 sm:gap-8 sm:px-6 lg:px-8 lg:py-16">
<div>
<header>
<SectionHeading as="h1" variant="title" id="monorepo-styles">

14
nx-dev/ui-home/src/lib/nx-statistics.tsx
View File

@ -3,13 +3,13 @@ import { LogoCloud } from './logo-cloud';
export function NxStatistics(): JSX.Element {
return (
<div className="bg-white pt-12 dark:bg-slate-900 sm:pt-28">
<div className="bg-white pt-12 sm:pt-28 dark:bg-slate-900">
<div className="mx-auto max-w-7xl px-4 pt-12 sm:px-6 lg:px-8">
<div className="mx-auto max-w-4xl text-center">
<SectionHeading as="h2" variant="display" id="trusted-by-all">
Trusted by developers, enterprises and open-source projects.
</SectionHeading>
<p className="sr-only mt-3 text-lg text-slate-700 dark:text-slate-400 sm:mt-4">
<p className="sr-only mt-3 text-lg text-slate-700 sm:mt-4 dark:text-slate-400">
Whether your workspace{' '}
<span className="font-semibold">
has a single project or a thousand
@ -21,13 +21,13 @@ export function NxStatistics(): JSX.Element {
{/*LOGO CLOUD*/}
<LogoCloud />
{/*STATISTICS*/}
<div className="mt-10 bg-slate-50 pb-12 dark:bg-slate-800/40 sm:pb-16">
<div className="mt-10 bg-slate-50 pb-12 sm:pb-16 dark:bg-slate-800/40">
<div className="relative">
<div className="absolute inset-0 h-1/2 border-b border-slate-200 bg-white dark:border-black dark:bg-slate-900"></div>
<div className="relative mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
<div className="mx-auto max-w-4xl">
<dl className="overflow-hidden rounded-lg bg-white shadow dark:bg-slate-900 sm:grid sm:grid-cols-3">
<div className="flex flex-col border-b border-slate-50 p-6 text-center dark:border-slate-800/40 sm:border-0 sm:border-r">
<dl className="overflow-hidden rounded-lg bg-white shadow sm:grid sm:grid-cols-3 dark:bg-slate-900">
<div className="flex flex-col border-b border-slate-50 p-6 text-center sm:border-0 sm:border-r dark:border-slate-800/40">
<dt className="order-2 mt-2 text-base font-medium leading-6">
developers use it every day
</dt>
@ -35,7 +35,7 @@ export function NxStatistics(): JSX.Element {
2M+
</dd>
</div>
<div className="flex flex-col border-t border-b border-slate-50 p-6 text-center dark:border-slate-800/40 sm:border-0 sm:border-l sm:border-r">
<div className="flex flex-col border-b border-t border-slate-50 p-6 text-center sm:border-0 sm:border-l sm:border-r dark:border-slate-800/40">
<dt className="order-2 mt-2 text-base font-medium leading-6">
of Fortune 500 companies use Nx for key projects
</dt>
@ -43,7 +43,7 @@ export function NxStatistics(): JSX.Element {
50%
</dd>
</div>
<div className="flex flex-col border-t border-slate-50 p-6 text-center dark:border-slate-800/40 sm:border-0 sm:border-l">
<div className="flex flex-col border-t border-slate-50 p-6 text-center sm:border-0 sm:border-l dark:border-slate-800/40">
<dt className="order-2 mt-2 text-base font-medium leading-6">
monthly npm downloads
</dt>

2
nx-dev/ui-home/src/lib/nx-with-ci.tsx
View File

@ -99,7 +99,7 @@ export function NxWithCi(): JSX.Element {
whileInView="end"
variants={ciBar}
viewport={{ once: true }}
className="flex-grow items-center justify-end rounded-r-lg bg-slate-200 py-2 px-4 text-slate-600 dark:bg-slate-700 dark:text-slate-400"
className="flex-grow items-center justify-end rounded-r-lg bg-slate-200 px-4 py-2 text-slate-600 dark:bg-slate-700 dark:text-slate-400"
>
<Counter value={90}></Counter>
<span className="ml-1">minutes</span>

2
nx-dev/ui-home/src/lib/testimonials.tsx
View File

@ -78,7 +78,7 @@ export function Testimonials(): JSX.Element {
id="next-generation"
className="relative bg-slate-50 pt-28 dark:bg-slate-800/40"
>
<div className="mx-auto max-w-7xl items-stretch py-12 px-4 sm:grid sm:grid-cols-1 sm:gap-8 sm:px-6 md:grid-cols-3 lg:py-16 lg:px-8">
<div className="mx-auto max-w-7xl items-stretch px-4 py-12 sm:grid sm:grid-cols-1 sm:gap-8 sm:px-6 md:grid-cols-3 lg:px-8 lg:py-16">
<div className="md:col-span-2">
<header>
<SectionHeading as="h1" variant="title" id="testimonials">

4
nx-dev/ui-home/src/lib/why-is-nx-fast.tsx
View File

@ -4,12 +4,12 @@ export function WhyIsNxFast(): JSX.Element {
id="why-is-nx-fast"
className="relative bg-slate-50 pt-28 dark:bg-slate-800/40"
>
<div className="mx-auto max-w-7xl py-12 px-4 sm:px-6 lg:py-16 lg:px-8">
<div className="mx-auto max-w-7xl px-4 py-12 sm:px-6 lg:px-8 lg:py-16">
<header className="max-w-prose">
<h1 className="text-lg font-semibold tracking-tight text-blue-500 dark:text-sky-500">
Full monorepo support
</h1>
<p className="mt-4 text-3xl font-semibold tracking-tight text-slate-900 dark:text-slate-100 sm:text-5xl">
<p className="mt-4 text-3xl font-semibold tracking-tight text-slate-900 sm:text-5xl dark:text-slate-100">
How Nx makes your workspace performant
</p>
</header>

2
nx-dev/ui-markdoc/src/lib/nodes/heading.component.tsx
View File

@ -22,7 +22,7 @@ export function Heading({
>
{children}
<Link aria-hidden="true" href={`#${id}`}>
<LinkIcon className="ml-2 mb-1 inline h-5 w-5 opacity-0 group-hover:opacity-100" />
<LinkIcon className="mb-1 ml-2 inline h-5 w-5 opacity-0 group-hover:opacity-100" />
</Link>
</Component>
);

6
nx-dev/ui-markdoc/src/lib/tags/disclosure.component.tsx
View File

@ -37,21 +37,21 @@ export function Disclosure({
return (
<span
className={cx(
'my-6 block rounded-md flex-col ring-1 bg-slate-50 dark:bg-slate-800/40 ring-slate-100 dark:ring-slate-700',
'my-6 block flex-col rounded-md bg-slate-50 ring-1 ring-slate-100 dark:bg-slate-800/40 dark:ring-slate-700',
ui.backgroundColor,
ui.borderColor
)}
>
<span
onClick={() => setCollapsed(!collapsed)}
className="flex-shrink-0 cursor-pointer flex p-4"
className="flex flex-shrink-0 cursor-pointer p-4"
>
{collapsed ? ui.downIcon : ui.upIcon}
<span className={cx('ml-3 block text-sm font-medium', ui.titleColor)}>
{title}
</span>
</span>
<span className={cx('p-4 pl-12 pt-0 block', collapsed ? 'hidden' : '')}>
<span className={cx('block p-4 pl-12 pt-0', collapsed ? 'hidden' : '')}>
<span className={cx('prose-sm block', ui.textColor)}>{children}</span>
</span>
</span>

2
nx-dev/ui-markdoc/src/lib/tags/github-repository.component.tsx
View File

@ -8,7 +8,7 @@ export function GithubRepository({
title?: string;
}): JSX.Element {
return (
<div className="not-prose group relative my-12 mx-auto flex w-full max-w-md items-center gap-3 overflow-hidden rounded-lg bg-slate-50 shadow-md transition hover:text-white dark:bg-slate-800/60">
<div className="not-prose group relative mx-auto my-12 flex w-full max-w-md items-center gap-3 overflow-hidden rounded-lg bg-slate-50 shadow-md transition hover:text-white dark:bg-slate-800/60">
<div className="absolute inset-0 z-0 w-2 bg-blue-500 transition-all duration-150 group-hover:w-full dark:bg-sky-500"></div>
<div className="w-2 bg-blue-500 dark:bg-sky-500"></div>

2
nx-dev/ui-markdoc/src/lib/tags/graph.component.tsx
View File

@ -92,7 +92,7 @@ export function Graph({
return (
<div className="my-6 w-full place-content-center overflow-hidden rounded-md ring-1 ring-slate-200 dark:ring-slate-700">
<div className="relative flex justify-center p-2 border-b border-slate-200 bg-slate-100/50 dark:border-slate-700 dark:bg-slate-700/50 font-bold">
<div className="relative flex justify-center border-b border-slate-200 bg-slate-100/50 p-2 font-bold dark:border-slate-700 dark:bg-slate-700/50">
{title}
</div>
{type === 'project' ? (

2
nx-dev/ui-markdoc/src/lib/tags/pill.component.tsx
View File

@ -9,7 +9,7 @@ export function Pill({
children: ReactNode;
}): JSX.Element {
return (
<span className="group relative mr-2 mb-2 inline-flex rounded-md border border-slate-200 bg-slate-50/40 text-sm shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-slate-50 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800">
<span className="group relative mb-2 mr-2 inline-flex rounded-md border border-slate-200 bg-slate-50/40 text-sm shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-slate-50 dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800">
<span className="flex flex-col p-3">
<Link
href={url}

20
nx-dev/ui-markdoc/src/lib/tags/short-embed.tsx
View File

@ -83,7 +83,7 @@ export function ShortEmbeds({
<ShortEmbedContext.Provider
value={{ current: currentVideo, userInteraction }}
>
<aside id="short-embed" className="fixed w-80 bottom-5 right-5 z-50">
<aside id="short-embed" className="fixed bottom-5 right-5 z-50 w-80">
<Transition
appear={true}
show={isShowing}
@ -94,23 +94,23 @@ export function ShortEmbeds({
leaveFrom="opacity-100 translate-y-0"
leaveTo="opacity-0 translate-y-full"
>
<div className="relative mt-12 w-full h-full rounded-xl shadow-xl coding flex flex-col border border-slate-200 bg-slate-50 p-2 leading-normal text-slate-800 subpixel-antialiased dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200">
<div className="coding relative mt-12 flex h-full w-full flex-col rounded-xl border border-slate-200 bg-slate-50 p-2 leading-normal text-slate-800 subpixel-antialiased shadow-xl dark:border-slate-700 dark:bg-slate-800 dark:text-slate-200">
<Button
size="small"
variant="secondary"
onClick={() => {
setTimeout(() => setIsShowing(false), 500);
}}
className="absolute top-2 right-2"
className="absolute right-2 top-2"
title="Close"
>
<XMarkIcon className="w-4 h-4" />
<XMarkIcon className="h-4 w-4" />
</Button>
<h3 className="text-center not-prose">Relevant Videos</h3>
<div className="grid grid-cols-1 gap-4 justify-items-center w-full">
<h3 className="not-prose text-center">Relevant Videos</h3>
<div className="grid w-full grid-cols-1 justify-items-center gap-4">
{children}
<div>
<div className="text-base font-medium pb-1">Continue with:</div>
<div className="pb-1 text-base font-medium">Continue with:</div>
<div className="flex flex-col gap-2">
{videoData
.filter(
@ -127,7 +127,7 @@ export function ShortEmbeds({
setUserInteraction(true);
setCurrentVideo(config);
}}
className="hover:cursor-pointer flex text-sm h-24 rounded-lg overflow-hidden border border-slate-200 bg-white/40 shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:bg-white dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800"
className="flex h-24 overflow-hidden rounded-lg border border-slate-200 bg-white/40 text-sm shadow-sm transition focus-within:ring-2 focus-within:ring-blue-500 focus-within:ring-offset-2 hover:cursor-pointer hover:bg-white dark:border-slate-800/40 dark:bg-slate-800/60 dark:hover:bg-slate-800"
>
<div className="w-32 shrink-0">
<img
@ -136,7 +136,7 @@ export function ShortEmbeds({
alt={`Another recommendation: ${config.title}`}
/>
</div>
<div className="p-2 shrink overflow-ellipsis h-full w-full grid grid-cols-1 content-center">
<div className="grid h-full w-full shrink grid-cols-1 content-center overflow-ellipsis p-2">
{config.title}
</div>
</div>
@ -160,7 +160,7 @@ export function ShortVideo({ embedUrl, title }: VideoData) {
}
return (
<div className="w-full h-96 rounded-lg overflow-hidden">
<div className="h-96 w-full overflow-hidden rounded-lg">
<iframe
className="!m-0 border-0"
width="100%"

2
nx-dev/ui-markdoc/src/lib/tags/side-by-side.component.tsx
View File

@ -3,7 +3,7 @@ import { Children, ReactNode } from 'react';
export function SideBySide({ children }: { children: ReactNode }) {
const [first, ...rest] = Children.toArray(children);
return (
<div className="not-prose grid items-center divide-x divide-solid divide-slate-50 dark:divide-slate-800 md:grid-cols-2">
<div className="not-prose grid items-center divide-x divide-solid divide-slate-50 md:grid-cols-2 dark:divide-slate-800">
<div className="md:pr-6">{first}</div>
<div className="md:pl-6">{rest}</div>
</div>

2
nx-dev/ui-markdoc/src/lib/tags/stackblitz-button.component.tsx
View File

@ -10,7 +10,7 @@ export function StackblitzButton({
const resolvedUrl = url.replace('https://', '');
return (
<div className="not-prose group relative my-12 mx-auto flex w-full max-w-md items-center gap-3 overflow-hidden rounded-lg bg-slate-50 shadow-md transition hover:text-white dark:bg-slate-800/60">
<div className="not-prose group relative mx-auto my-12 flex w-full max-w-md items-center gap-3 overflow-hidden rounded-lg bg-slate-50 shadow-md transition hover:text-white dark:bg-slate-800/60">
<div className="absolute inset-0 z-0 w-2 bg-blue-500 transition-all duration-150 group-hover:w-full dark:bg-sky-500"></div>
<div className="w-2 bg-blue-500 dark:bg-sky-500"></div>

10
nx-dev/ui-markdoc/src/lib/tags/video-link.component.tsx
View File

@ -20,7 +20,7 @@ const youtubeIcon = (
role="img"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
className="w-6 h-6"
className="h-6 w-6"
>
<path d="M23.5 6.19a3.02 3.02 0 0 0-2.12-2.14c-1.88-.5-9.38-.5-9.38-.5s-7.5 0-9.38.5A3.02 3.02 0 0 0 .5 6.19C0 8.07 0 12 0 12s0 3.93.5 5.81a3.02 3.02 0 0 0 2.12 2.14c1.87.5 9.38.5 9.38.5s7.5 0 9.38-.5a3.02 3.02 0 0 0 2.12-2.14C24 15.93 24 12 24 12s0-3.93-.5-5.81zM9.54 15.57V8.43L15.82 12l-6.28 3.57z" />
</svg>
@ -28,16 +28,16 @@ const youtubeIcon = (
export function VideoLink({ text, link }: { text: string; link: string }) {
return (
<div className="flex no-prose">
<div className="no-prose flex">
<a
href={link}
target="_blank"
rel="noopener noreferrer"
className="flex items-center no-underline space-x-2 border-transparent"
className="flex items-center space-x-2 border-transparent no-underline"
>
<div className="flex items-center justify-between pl-2 pr-2 space-x-2 border rounded-md border-slate-200 py-1 pl-3 transition hover:border-slate-500 dark:border-slate-700/40 dark:hover:border-slate-700">
<div className="flex items-center justify-between space-x-2 rounded-md border border-slate-200 py-1 pl-2 pl-3 pr-2 transition hover:border-slate-500 dark:border-slate-700/40 dark:hover:border-slate-700">
{youtubeIcon}
<span className="font-semibold text-md hover:text-slate-900 dark:hover:text-sky-400">
<span className="text-md font-semibold hover:text-slate-900 dark:hover:text-sky-400">
{text || 'Jump to section in video'}
</span>
</div>

4
nx-dev/ui-markdoc/src/lib/tags/video-loop.component.tsx
View File

@ -43,8 +43,8 @@ export function VideoLoop({
return (
<video ref={videoRef} autoPlay muted loop>
<source src={src} type="video/mp4" />
<div className="text-center p-4">
<p className="font-bold pb-3">
<div className="p-4 text-center">
<p className="pb-3 font-bold">
Your browser does not support the video tag. Here is a description of
the video:
</p>

2
nx-dev/ui-theme/src/lib/theme-switcher.component.tsx
View File

@ -67,7 +67,7 @@ export function ThemeSwitcher(): JSX.Element {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Listbox.Options className="absolute top-full -right-10 z-50 mt-2 w-36 origin-top-right divide-y divide-slate-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none dark:divide-slate-800 dark:bg-slate-900 dark:ring-white/5">
<Listbox.Options className="absolute -right-10 top-full z-50 mt-2 w-36 origin-top-right divide-y divide-slate-100 rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none dark:divide-slate-800 dark:bg-slate-900 dark:ring-white/5">
{availableThemes.map((t) => (
<Listbox.Option key={t.value} value={t.value} as={Fragment}>
{({ active, selected }) => (

2
packages/create-nx-workspace/bin/types/bundler-list.ts
View File

@ -1,4 +1,4 @@
// Bundler to be used to build the application
export const bundlerList = ['webpack', 'vite', 'rspack'];
export type Bundler = typeof bundlerList[number];
export type Bundler = (typeof bundlerList)[number];

2
packages/create-nx-workspace/bin/types/framework-list.ts
View File

@ -1,4 +1,4 @@
// Framework option to be used when the node-standalone preset is selected
export const frameworkList = ['express', 'fastify', 'koa', 'nest'];
export type Framework = typeof frameworkList[number];
export type Framework = (typeof frameworkList)[number];

2
packages/create-nx-workspace/src/utils/nx/ab-testing.ts
View File

@ -54,7 +54,7 @@ const messageOptions = {
} as const;
export type MessageKey = keyof typeof messageOptions;
type MessageData = typeof messageOptions[MessageKey][number];
type MessageData = (typeof messageOptions)[MessageKey][number];
export class PromptMessages {
private selectedMessages: { [key in MessageKey]?: number } = {};

2
packages/create-nx-workspace/src/utils/package-manager.ts
View File

@ -9,7 +9,7 @@ import { join } from 'path';
export const packageManagerList = ['pnpm', 'yarn', 'npm', 'bun'] as const;
export type PackageManager = typeof packageManagerList[number];
export type PackageManager = (typeof packageManagerList)[number];
export function detectPackageManager(dir: string = ''): PackageManager {
return existsSync(join(dir, 'bun.lockb'))

3
packages/devkit/src/utils/convert-nx-executor.spec.ts
View File

@ -23,7 +23,8 @@ describe('Convert Nx Executor', () => {
const {
TestingArchitectHost,
// nx-ignore-next-line
} = require('@angular-devkit/architect/testing') as typeof import('@angular-devkit/architect/testing');
} =
require('@angular-devkit/architect/testing') as typeof import('@angular-devkit/architect/testing');
const { Architect } = require('@angular-devkit/architect');
const registry = new schema.CoreSchemaRegistry();

4
packages/jest/src/utils/config/config-file.ts
View File

@ -8,10 +8,10 @@ export const jestConfigExtensions = [
'mts',
'cts',
] as const;
export type JestConfigExtension = typeof jestConfigExtensions[number];
export type JestConfigExtension = (typeof jestConfigExtensions)[number];
export const jestPresetExtensions = ['js', 'cjs', 'mjs'] as const;
export type JestPresetExtension = typeof jestPresetExtensions[number];
export type JestPresetExtension = (typeof jestPresetExtensions)[number];
export function getPresetExt(tree: Tree): JestPresetExtension {
const ext = jestPresetExtensions.find((ext) =>

2
packages/js/src/generators/release-version/release-version.ts
View File

@ -205,7 +205,7 @@ To fix this you will either need to add a package.json file at that location, or
)}Resolving the current version for tag "${tag}" on ${registry}`
);
spinner.color =
color.spinnerColor as typeof colors[number]['spinnerColor'];
color.spinnerColor as (typeof colors)[number]['spinnerColor'];
spinner.start();
try {

2
packages/nx/release/changelog-renderer/index.ts
View File

@ -10,7 +10,7 @@ import type { ProjectGraph } from '../../src/config/project-graph';
// axios types and values don't seem to match
import _axios = require('axios');
const axios = _axios as any as typeof _axios['default'];
const axios = _axios as any as (typeof _axios)['default'];
/**
* The ChangelogRenderOptions are specific to each ChangelogRenderer implementation, and are taken

2
packages/nx/src/command-line/release/utils/github.ts
View File

@ -16,7 +16,7 @@ import { ReleaseVersion, noDiffInChangelogMessage } from './shared';
// axios types and values don't seem to match
import _axios = require('axios');
const axios = _axios as any as typeof _axios['default'];
const axios = _axios as any as (typeof _axios)['default'];
export type RepoSlug = `${string}/${string}`;

2
packages/nx/src/command-line/release/version.ts
View File

@ -72,7 +72,7 @@ export interface ReleaseVersionGeneratorSchema {
fallbackCurrentVersionResolver?: 'disk';
firstRelease?: boolean;
// auto means the existing prefix will be preserved, and is the default behavior
versionPrefix?: typeof validReleaseVersionPrefixes[number];
versionPrefix?: (typeof validReleaseVersionPrefixes)[number];
skipLockFileUpdate?: boolean;
installArgs?: string;
installIgnoreScripts?: boolean;

2
packages/nx/src/command-line/show/project.ts
View File

@ -26,7 +26,7 @@ export async function showProjectHandler(
);
} else {
const chalk = require('chalk') as typeof import('chalk');
const logIfExists = (label, key: keyof typeof node['data']) => {
const logIfExists = (label, key: keyof (typeof node)['data']) => {
if (node.data[key]) {
console.log(`${chalk.bold(label)}: ${node.data[key]}`);
}

2
packages/nx/src/command-line/yargs-utils/shared-options.ts
View File

@ -247,7 +247,7 @@ const allOutputStyles = [
'compact',
] as const;
export type OutputStyle = typeof allOutputStyles[number];
export type OutputStyle = (typeof allOutputStyles)[number];
export function withOutputStyleOption(
yargs: Argv,

2
packages/nx/src/utils/ab-testing.ts
View File

@ -40,7 +40,7 @@ const messageOptions = {
} as const;
export type MessageKey = keyof typeof messageOptions;
export type MessageData = typeof messageOptions[MessageKey][number];
export type MessageData = (typeof messageOptions)[MessageKey][number];
export class PromptMessages {
private selectedMessages = {};

2
packages/nx/src/utils/find-matching-projects.ts
View File

@ -7,7 +7,7 @@ const validPatternTypes = [
'directory', // Pattern is based on the project's root directory
'unlabeled', // Pattern was passed without specifying a type
] as const;
type ProjectPatternType = typeof validPatternTypes[number];
type ProjectPatternType = (typeof validPatternTypes)[number];
interface ProjectPattern {
// If true, the pattern is an exclude pattern