From 7deb4352dc23e0e8e4acddb4d78189702f051e28 Mon Sep 17 00:00:00 2001
From: zbeyens
Date: Wed, 20 Sep 2023 08:04:50 +0200
Subject: [PATCH 1/2] =?UTF-8?q?=E2=9C=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
apps/www/content/docs/components/cli.mdx | 3 +-
.../docs/components/dark-mode/next.mdx | 7 +++-
packages/cli/src/commands/add.ts | 41 ++++++++++++++-----
.../utils/transformers/transform-css-vars.ts | 18 ++++----
.../transform-css-vars.test.ts.snap | 18 +++++++-
.../test/utils/apply-color-mapping.test.ts | 2 +-
.../cli/test/utils/transform-css-vars.test.ts | 25 ++++++++++-
7 files changed, 89 insertions(+), 25 deletions(-)
diff --git a/apps/www/content/docs/components/cli.mdx b/apps/www/content/docs/components/cli.mdx
index 6b5807a1f6..c11df4c407 100644
--- a/apps/www/content/docs/components/cli.mdx
+++ b/apps/www/content/docs/components/cli.mdx
@@ -58,7 +58,8 @@ npx @udecode/plate-ui@latest add [component]
You will be presented with a list of components to choose from:
```txt
-Which components would you like to add? › Space to select. Return to submit.
+Which components would you like to add? › Space to select. A to toggle all.
+Enter to submit.
◯ align-dropdown-menu
◯ avatar
diff --git a/apps/www/content/docs/components/dark-mode/next.mdx b/apps/www/content/docs/components/dark-mode/next.mdx
index 49bdb1eb31..9bcb06461a 100644
--- a/apps/www/content/docs/components/dark-mode/next.mdx
+++ b/apps/www/content/docs/components/dark-mode/next.mdx
@@ -42,7 +42,12 @@ export default function RootLayout({ children }: RootLayoutProps) {
-
+
{children}
diff --git a/packages/cli/src/commands/add.ts b/packages/cli/src/commands/add.ts
index af19405856..a27830b2ef 100644
--- a/packages/cli/src/commands/add.ts
+++ b/packages/cli/src/commands/add.ts
@@ -25,6 +25,7 @@ const addOptionsSchema = z.object({
yes: z.boolean(),
overwrite: z.boolean(),
cwd: z.string(),
+ all: z.boolean(),
path: z.string().optional(),
});
@@ -32,13 +33,14 @@ export const add = new Command()
.name('add')
.description('add a component to your project')
.argument('[components...]', 'the components to add')
- .option('-y, --yes', 'skip confirmation prompt.', false)
+ .option('-y, --yes', 'skip confirmation prompt.', true)
.option('-o, --overwrite', 'overwrite existing files.', false)
.option(
'-c, --cwd ',
'the working directory. defaults to the current directory.',
process.cwd()
)
+ .option('-a, --all', 'add all available components', false)
.option('-p, --path ', 'the path to add the component to.')
.action(async (components, opts) => {
try {
@@ -66,8 +68,10 @@ export const add = new Command()
const registryIndex = await getRegistryIndex();
- let selectedComponents = options.components;
- if (!options.components?.length) {
+ let selectedComponents = options.all
+ ? registryIndex.map((entry) => entry.name)
+ : options.components;
+ if (!options.components?.length && !options.all) {
const { components } = await prompts({
type: 'multiselect',
name: 'components',
@@ -77,6 +81,9 @@ export const add = new Command()
choices: registryIndex.map((entry) => ({
title: entry.name,
value: entry.name,
+ selected: options.all
+ ? true
+ : options.components?.includes(entry.name),
})),
});
selectedComponents = components;
@@ -132,15 +139,27 @@ export const add = new Command()
if (existingComponent.length > 0 && !options.overwrite) {
if (selectedComponents.includes(item.name)) {
- logger.warn(
- `Component ${item.name} already exists. Use ${chalk.green(
- '--overwrite'
- )} to overwrite.`
- );
- process.exit(1);
- }
+ spinner.stop();
+ const { overwrite } = await prompts({
+ type: 'confirm',
+ name: 'overwrite',
+ message: `Component ${item.name} already exists. Would you like to overwrite?`,
+ initial: false,
+ });
+
+ if (!overwrite) {
+ logger.info(
+ `Skipped ${item.name}. To overwrite, run with the ${chalk.green(
+ '--overwrite'
+ )} flag.`
+ );
+ continue;
+ }
- continue;
+ spinner.start(`Installing ${item.name}...`);
+ } else {
+ continue;
+ }
}
for (const file of item.files) {
diff --git a/packages/cli/src/utils/transformers/transform-css-vars.ts b/packages/cli/src/utils/transformers/transform-css-vars.ts
index 42e15cad05..18993e113e 100644
--- a/packages/cli/src/utils/transformers/transform-css-vars.ts
+++ b/packages/cli/src/utils/transformers/transform-css-vars.ts
@@ -145,27 +145,27 @@ export function applyColorMapping(
// Build color mappings.
const classNames = input.split(' ');
- const lightMode: string[] = [];
- const darkMode: string[] = [];
+ const lightMode = new Set();
+ const darkMode = new Set();
for (const className of classNames) {
const [variant, value, modifier] = splitClassName(className);
const prefix = PREFIXES.find((pre) => value?.startsWith(pre));
if (!prefix) {
- if (!lightMode.includes(className)) {
- lightMode.push(className);
+ if (!lightMode.has(className)) {
+ lightMode.add(className);
}
continue;
}
const needle = value?.replace(prefix, '');
if (needle && needle in mapping.light) {
- lightMode.push(
+ lightMode.add(
[variant, `${prefix}${mapping.light[needle]}`]
.filter(Boolean)
.join(':') + (modifier ? `/${modifier}` : '')
);
- darkMode.push(
+ darkMode.add(
['dark', variant, `${prefix}${mapping.dark[needle]}`]
.filter(Boolean)
.join(':') + (modifier ? `/${modifier}` : '')
@@ -173,10 +173,10 @@ export function applyColorMapping(
continue;
}
- if (!lightMode.includes(className)) {
- lightMode.push(className);
+ if (!lightMode.has(className)) {
+ lightMode.add(className);
}
}
- return lightMode.join(' ') + ' ' + darkMode.join(' ').trim();
+ return [...Array.from(lightMode), ...Array.from(darkMode)].join(' ').trim();
}
diff --git a/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap b/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap
index 5ee8800ec9..981b504a8c 100644
--- a/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap
+++ b/packages/cli/test/utils/__snapshots__/transform-css-vars.test.ts.snap
@@ -1,5 +1,13 @@
// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+exports[`transform css vars 4`] = `
+"import * as React from \\'react\\'
+export function Foo() {
+ return foo
+}''
+ "
+`;
+
exports[`transform css vars false 1`] = `
"import * as React from 'react'
export function Foo() {
@@ -12,7 +20,15 @@ exports[`transform css vars false with cn 1`] = `
"import * as React from 'react'
export function Foo() {
return foo
-}
+}''
+ "
+`;
+
+exports[`transform css vars false with cn 2`] = `
+"import * as React from 'react'
+export function Foo() {
+ return foo
+}''
"
`;
diff --git a/packages/cli/test/utils/apply-color-mapping.test.ts b/packages/cli/test/utils/apply-color-mapping.test.ts
index 2015a6b361..b0b673db7a 100644
--- a/packages/cli/test/utils/apply-color-mapping.test.ts
+++ b/packages/cli/test/utils/apply-color-mapping.test.ts
@@ -64,7 +64,7 @@ describe('apply color mapping', async () => {
input:
'text-destructive border-destructive/50 dark:border-destructive [&>svg]:text-destructive text-destructive',
output:
- 'text-red-500 border-red-500/50 dark:border-red-500 [&>svg]:text-red-500 text-red-500 dark:text-red-900 dark:border-red-900/50 dark:dark:border-red-900 dark:[&>svg]:text-red-900 dark:text-red-900',
+ 'text-red-500 border-red-500/50 dark:border-red-500 [&>svg]:text-red-500 dark:text-red-900 dark:border-red-900/50 dark:dark:border-red-900 dark:[&>svg]:text-red-900',
},
{
input:
diff --git a/packages/cli/test/utils/transform-css-vars.test.ts b/packages/cli/test/utils/transform-css-vars.test.ts
index 7ecabd10ac..04c800efec 100644
--- a/packages/cli/test/utils/transform-css-vars.test.ts
+++ b/packages/cli/test/utils/transform-css-vars.test.ts
@@ -58,7 +58,30 @@ test('transform css vars false with cn', async () => {
raw: `import * as React from 'react'
export function Foo() {
return foo
-}
+}"
+ `,
+ config: {
+ tsx: true,
+ tailwind: {
+ baseColor: 'stone',
+ cssVariables: false,
+ },
+ aliases: {
+ components: '@/components',
+ utils: '@/lib/utils',
+ },
+ },
+ baseColor: stone,
+ })
+ ).toMatchSnapshot();
+
+ expect(
+ await transform({
+ filename: 'test.ts',
+ raw: `import * as React from "react"
+export function Foo() {
+ return foo
+}"
`,
config: {
tailwind: {
From 78fe2921b2bf15651e2cfd859553b794dac4f931 Mon Sep 17 00:00:00 2001
From: Ziad Beyens
Date: Wed, 20 Sep 2023 08:23:36 +0200
Subject: [PATCH 2/2] Create twelve-cars-drop.md
---
.changeset/twelve-cars-drop.md | 5 +++++
1 file changed, 5 insertions(+)
create mode 100644 .changeset/twelve-cars-drop.md
diff --git a/.changeset/twelve-cars-drop.md b/.changeset/twelve-cars-drop.md
new file mode 100644
index 0000000000..1eb1766561
--- /dev/null
+++ b/.changeset/twelve-cars-drop.md
@@ -0,0 +1,5 @@
+---
+"@udecode/plate-ui": minor
+---
+
+- Add command `-a` for adding all available components