From daf5837a21fa3c5897fadc1f3f17e489e5ea8824 Mon Sep 17 00:00:00 2001 From: Juri Date: Fri, 23 Aug 2024 00:16:55 +0200 Subject: [PATCH] feat(nx-dev): add deepdive callout component --- docs/README.md | 10 +-- docs/nx-cloud/concepts/reduce-waste.md | 4 +- docs/nx-cloud/features/dynamic-agents.md | 4 +- nx-dev/ui-markdoc/src/index.ts | 4 - .../src/lib/tags/callout.component.tsx | 87 ++++++++++++++----- .../src/lib/tags/disclosure.component.tsx | 61 ------------- .../src/lib/tags/disclosure.schema.ts | 14 --- 7 files changed, 75 insertions(+), 109 deletions(-) delete mode 100644 nx-dev/ui-markdoc/src/lib/tags/disclosure.component.tsx delete mode 100644 nx-dev/ui-markdoc/src/lib/tags/disclosure.schema.ts diff --git a/docs/README.md b/docs/README.md index 0466657cad473..826fab1789de8 100644 --- a/docs/README.md +++ b/docs/README.md @@ -94,14 +94,14 @@ Your content goes here. {% /callout %} ``` -#### Disclosure +#### Deep Dives -A disclosure can be used for less important information that is initially collapsed. +These are special callouts that are collapsed with the intention of containing more deep-dive information about the topic which isn't required to understand right away. ```markdown -{% disclosure title="string" %} -Your content goes here. -{% /disclosure %} +{% callout type="deepdive" title="string" %} +Your deep-dive content goes here. +{% /callout %} ``` #### Cards diff --git a/docs/nx-cloud/concepts/reduce-waste.md b/docs/nx-cloud/concepts/reduce-waste.md index f528484a564ef..17f1cfa1280e4 100644 --- a/docs/nx-cloud/concepts/reduce-waste.md +++ b/docs/nx-cloud/concepts/reduce-waste.md @@ -251,7 +251,7 @@ If we don't use the `nx affected` command in CI, no matter how our repo is struc Note that the 50% chance of any project being modified is an arbitrary number. If we had picked a lower chance of being modified all the expected values would decrease as well. Every repository is different, but this illustrates that a flatter structure will help speed up your CI pipeline. -{% disclosure title="The Math Behind the Expected Number of Affected Projects" %} +{% callout title="The Math Behind the Expected Number of Affected Projects" type="deepdive" %} **Definitions:** @@ -290,7 +290,7 @@ Note that the 50% chance of any project being modified is an arbitrary number. I **Expected Number of Affected Projects:** ℙa(1) + ℙa(2) + ℙa(3) = 0.5 + 0.5 + 0.5 = 1.5 -{% /disclosure %} +{% /callout %} ## Reduce Wasted Time with Remote Caching diff --git a/docs/nx-cloud/features/dynamic-agents.md b/docs/nx-cloud/features/dynamic-agents.md index 2c77cf6cd08c8..7ad91cd95f401 100644 --- a/docs/nx-cloud/features/dynamic-agents.md +++ b/docs/nx-cloud/features/dynamic-agents.md @@ -33,8 +33,8 @@ distribute-on: large-changeset: 10 linux-medium-js ``` -{% callout type="note" title="How is the size of the PR determined?" %} -To determine the size of the PR, Nx Cloud calculates the ratio between the number of [affected projects](/ci/features/affected) and the total number of projects in the workspace. It then categorizes it as small, medium, or large. +{% callout type="deepdive" title="How is the size of the PR determined?" %} +To determine the size of the PR, Nx Cloud calculates the relationship between the number of [affected projects](/ci/features/affected) and the total number of projects in the workspace. It then assigns it to one of the three categories: small, medium, or large. {% /callout %} You can then reference it in your CI pipeline configuration: diff --git a/nx-dev/ui-markdoc/src/index.ts b/nx-dev/ui-markdoc/src/index.ts index ef906b25980a4..3a2f2969f4e71 100644 --- a/nx-dev/ui-markdoc/src/index.ts +++ b/nx-dev/ui-markdoc/src/index.ts @@ -19,8 +19,6 @@ import { CallToAction } from './lib/tags/call-to-action.component'; import { callToAction } from './lib/tags/call-to-action.schema'; import { Card, Cards, LinkCard } from './lib/tags/cards.component'; import { card, cards, linkCard } from './lib/tags/cards.schema'; -import { Disclosure } from './lib/tags/disclosure.component'; -import { disclosure } from './lib/tags/disclosure.schema'; import { GithubRepository } from './lib/tags/github-repository.component'; import { githubRepository } from './lib/tags/github-repository.schema'; import { StackblitzButton } from './lib/tags/stackblitz-button.component'; @@ -78,7 +76,6 @@ export const getMarkdocCustomConfig = ( 'call-to-action': callToAction, card, cards, - disclosure, 'link-card': linkCard, 'github-repository': githubRepository, 'stackblitz-button': stackblitzButton, @@ -107,7 +104,6 @@ export const getMarkdocCustomConfig = ( CallToAction, Card, Cards, - Disclosure, LinkCard, CustomLink, FenceWrapper, diff --git a/nx-dev/ui-markdoc/src/lib/tags/callout.component.tsx b/nx-dev/ui-markdoc/src/lib/tags/callout.component.tsx index ec8283a68ba39..d138fc9893d37 100644 --- a/nx-dev/ui-markdoc/src/lib/tags/callout.component.tsx +++ b/nx-dev/ui-markdoc/src/lib/tags/callout.component.tsx @@ -1,13 +1,19 @@ +'use client'; + +import React, { useState, useEffect } from 'react'; +import cx from 'classnames'; import { + ChevronRightIcon, + ChevronDownIcon, CheckCircleIcon, ExclamationCircleIcon, HandRaisedIcon, InformationCircleIcon, + AcademicCapIcon, } from '@heroicons/react/24/outline'; -import cx from 'classnames'; -import { ReactNode } from 'react'; -type CalloutType = 'note' | 'warning' | 'check' | 'caution'; +type CalloutType = 'note' | 'warning' | 'check' | 'caution' | 'deepdive'; + const typeMap: Record< CalloutType, { @@ -26,7 +32,7 @@ const typeMap: Record< /> ), backgroundColor: 'bg-slate-50 dark:bg-slate-800/40', - borderColor: 'ring-slate-100 dark:ring-slate-700', + borderColor: 'border-slate-200 dark:border-slate-700', titleColor: 'text-slate-600 dark:text-slate-300', textColor: 'text-slate-700 dark:text-slate-400', }, @@ -38,7 +44,7 @@ const typeMap: Record< /> ), backgroundColor: 'bg-yellow-50 dark:bg-yellow-900/30', - borderColor: 'ring-yellow-100 dark:ring-yellow-900', + borderColor: 'border-yellow-200 dark:border-yellow-800', titleColor: 'text-yellow-600 dark:text-yellow-400', textColor: 'text-yellow-700 dark:text-yellow-600', }, @@ -50,7 +56,7 @@ const typeMap: Record< /> ), backgroundColor: 'bg-green-50 dark:bg-green-900/30', - borderColor: 'ring-green-100 dark:ring-green-900', + borderColor: 'border-green-200 dark:border-green-800', titleColor: 'text-green-600 dark:text-green-400', textColor: 'text-green-700 dark:text-green-600', }, @@ -59,43 +65,82 @@ const typeMap: Record<