refactor(cli): prefer recommended snippets

Author: segunadebayo

.changeset/small-rockets-build.md

@@ -0,0 +1,11 @@
+---
+"@chakra-ui/cli": minor
+---
+
+Add support for `--all` flag to add all snippets. By default, we only install a
+minimal/recommended set of snippets.
+
+> **Recommended snippets:** provider, avatar, button, checkbox, radio,
+> input-group, slider, popover, dialog, drawer, tooltip, field
+
+If you want to add all snippets, you can use the `--all` flag.

.changeset/stupid-donkeys-learn.md

@@ -6,3 +6,5 @@
  rgb, hsb formats.
 
 - Add new `ColorSwatch` component to preview a color.
+
+- Fix issue where `mergeConfigs` mutates the underlying configs passed to it.

.changeset/three-jeans-breathe.md

@@ -60,6 +60,13 @@ Use the `openDelay` and `closeDelay` prop to change the delay of the tooltip.
 
 <ExampleTabs name="tooltip-with-delay" />
 
+### Custom Background
+
+Use the `--tooltip-bg` CSS variable to change the background color of the
+tooltip.
+
+<ExampleTabs name="tooltip-with-custom-bg" />
+
 ### Controlled
 
 Use the `open` and `onOpenChange` prop to control the visibility of the tooltip.
@@ -80,6 +87,38 @@ not be shown.
 
 <ExampleTabs name="tooltip-with-disabled" />
 
+### With Avatar
+
+Here's an example of how to use the `Tooltip` component with an `Avatar`
+component.
+
+<ExampleTabs name="tooltip-with-avatar" />
+
+### With Checkbox
+
+Here's an example of how to use the `Tooltip` component with a `Checkbox`
+component.
+
+<ExampleTabs name="tooltip-with-checkbox" />
+
+### With MenuItem
+
+Here's an example of how to use the `Tooltip` with a `MenuItem` component.
+
+<ExampleTabs name="tooltip-with-menu-item" />
+
+### With Switch
+
+Here's an example of how to wrap `Tooltip` around a `Switch` component.
+
+<ExampleTabs name="tooltip-with-switch" />
+
+### With Tabs
+
+Here's an example of how to wrap `Tooltip` around a `Tabs` component.
+
+<ExampleTabs name="tooltip-with-tab" />
+
 ## Props
 
 ### Root

apps/www/content/docs/components/tooltip.mdx

@@ -11,26 +11,16 @@ import { fetchComposition, fetchCompositions } from "../utils/fetch"
 import { getFileDependencies } from "../utils/get-file-dependencies"
 import { ensureDir } from "../utils/io"
 import { installCommand } from "../utils/run-command"
-import { type CompositionFile, addCommandFlagsSchema } from "../utils/schema"
+import {
+ type CompositionFile,
+ type Compositions,
+ addCommandFlagsSchema,
+} from "../utils/schema"
 import { uniq } from "../utils/shared"
 import { tasks } from "../utils/tasks"
 
 const debug = createDebug("chakra:snippet")
 
-async function transformToJsx(item: CompositionFile) {
- const content = await convertTsxToJsx(item.file.content)
- item.file.content = content
- item.file.name = item.file.name.replace(".tsx", ".jsx")
-}
-
-function printFileSync(item: CompositionFile) {
- const boxText = boxen(item.file.content, {
- headerText: `${item.file.name}\n`,
- borderStyle: "none",
- })
- p.log.info(boxText)
-}
-
 export const SnippetCommand = new Command("snippet")
  .description("Add snippets to your project for better DX")
  .addCommand(
@@ -39,10 +29,11 @@ export const SnippetCommand = new Command("snippet")
  .argument("[snippets...]", "snippets to add")
  .option("-d, --dry-run", "Dry run")
  .option("--outdir <dir>", "Output directory to write the snippets")
+ .option("--all", "Add all snippets")
  .option("-f, --force", "Overwrite existing files")
- .action(async (components: string[], flags: unknown) => {
+ .action(async (selectedComponents: string[], flags: unknown) => {
  const parsedFlags = addCommandFlagsSchema.parse(flags)
- const { dryRun, force } = parsedFlags
+ const { dryRun, force, all } = parsedFlags
 
  const ctx = await getProjectContext({ cwd: process.cwd() })
  debug("context", ctx)
@@ -54,16 +45,16 @@ export const SnippetCommand = new Command("snippet")
 
  const items = await fetchCompositions()
 
- const all = components.length === 0
-
- if (all) {
- p.log.info("No components selected, Adding all...")
- components = items.map((item) => item.id)
- }
+ const inferredComponents = getComponents({
+ components: selectedComponents,
+ all,
+ items,
+ })
 
+ const components = inferredComponents.items
  debug("components", components)
 
- p.log.info(`Adding ${components.length} snippet(s)...`)
+ p.log.info(inferredComponents.message)
 
  const deps = uniq(
  components.flatMap((id) => getFileDependencies(items, id)),
@@ -191,3 +182,56 @@ export const SnippetCommand = new Command("snippet")
  p.outro("🎉 Done!")
  }),
  )
+
+async function transformToJsx(item: CompositionFile) {
+ const content = await convertTsxToJsx(item.file.content)
+ item.file.content = content
+ item.file.name = item.file.name.replace(".tsx", ".jsx")
+}
+
+function printFileSync(item: CompositionFile) {
+ const boxText = boxen(item.file.content, {
+ headerText: `${item.file.name}\n`,
+ borderStyle: "none",
+ })
+ p.log.info(boxText)
+}
+
+const RECOMMENDED_SNIPPETS = [
+ "provider",
+ "avatar",
+ "button",
+ "checkbox",
+ "radio",
+ "input-group",
+ "slider",
+ "popover",
+ "dialog",
+ "drawer",
+ "tooltip",
+ "field",
+]
+
+function getComponents(opts: {
+ components: string[]
+ all: boolean | undefined
+ items: Compositions
+}) {
+ const { components, all, items } = opts
+ if (components.length === 0 && !all)
+ return {
+ message: "No component(s) selected, adding recommended snippets...",
+ items: RECOMMENDED_SNIPPETS,
+ }
+
+ if (all)
+ return {
+ message: "Adding all snippets...",
+ items: items.map((item) => item.id),
+ }
+
+ return {
+ message: `Adding ${components.length} snippet(s)...`,
+ items: components,
+ }
+}

packages/cli/src/commands/snippet.ts

@@ -38,6 +38,7 @@ export const addCommandFlagsSchema = z.object({
  force: z.boolean().optional(),
  dryRun: z.boolean().optional(),
  outdir: z.string().optional(),
+ all: z.boolean().optional(),
 })
 
 export interface AddCommandFlags