Skip to content

Commit

Permalink
🧪
Browse files Browse the repository at this point in the history
  • Loading branch information
zbeyens committed Jul 6, 2023
1 parent df5b3cf commit 30fc37c
Show file tree
Hide file tree
Showing 6 changed files with 101 additions and 98 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,7 @@
},
{
"name": "emoji-toolbar-dropdown.tsx",
"content": "import React, { ReactNode } from 'react';\nimport * as Popover from '@radix-ui/react-popover';\n\ntype EmojiToolbarDropdownProps = {\n control: ReactNode;\n isOpen: boolean;\n setIsOpen: (open: boolean) => void;\n children: ReactNode;\n};\n\nexport function EmojiToolbarDropdown({\n control,\n isOpen,\n setIsOpen,\n children,\n}: EmojiToolbarDropdownProps) {\n return (\n <Popover.Root open={isOpen} onOpenChange={setIsOpen}>\n <Popover.Trigger asChild>{control}</Popover.Trigger>\n\n <Popover.Portal>\n <Popover.Content className=\"z-[100]\">\n {children}\n </Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n );\n}\n"
"content": "import React, { ReactNode } from 'react';\nimport * as Popover from '@radix-ui/react-popover';\n\ntype EmojiToolbarDropdownProps = {\n control: ReactNode;\n isOpen: boolean;\n setIsOpen: (open: boolean) => void;\n children: ReactNode;\n};\n\nexport function EmojiToolbarDropdown({\n control,\n isOpen,\n setIsOpen,\n children,\n}: EmojiToolbarDropdownProps) {\n return (\n <Popover.Root open={isOpen} onOpenChange={setIsOpen}>\n <Popover.Trigger asChild>{control}</Popover.Trigger>\n\n <Popover.Portal>\n <Popover.Content className=\"z-[100]\">{children}</Popover.Content>\n </Popover.Portal>\n </Popover.Root>\n );\n}\n"
},
{
"name": "emoji-icons.tsx",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
"files": [
{
"name": "table-dropdown-menu.tsx",
"content": "import React from 'react';\nimport { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\nimport { focusEditor, someNode } from '@udecode/plate-common';\nimport { usePlateEditorState } from '@udecode/plate-common';\nimport {\n ELEMENT_TABLE,\n deleteColumn,\n deleteRow,\n deleteTable,\n insertTable,\n insertTableColumn,\n insertTableRow,\n} from '@udecode/plate-table';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function TableDropdownMenu(props: DropdownMenuProps) {\n const editor = usePlateEditorState();\n\n const tableSelected = someNode(editor, {\n match: { type: ELEMENT_TABLE },\n });\n\n const openState = useOpenState();\n\n return (\n <DropdownMenu modal={false} {...openState} {...props}>\n <DropdownMenuTrigger asChild>\n <ToolbarButton pressed={openState.open} tooltip=\"Table\" isDropdown>\n <Icons.table />\n </ToolbarButton>\n </DropdownMenuTrigger>\n\n <DropdownMenuContent\n align=\"start\"\n className=\"flex w-[180px] min-w-0 flex-col gap-0.5\"\n >\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>\n <Icons.table className={iconVariants({ variant: 'menuItem' })} />\n <span>Table</span>\n </DropdownMenuSubTrigger>\n <DropdownMenuSubContent>\n <DropdownMenuItem\n className=\"min-w-[180px]\"\n onSelect={async () => {\n insertTable(editor);\n focusEditor(editor);\n }}\n >\n <Icons.add className={iconVariants({ variant: 'menuItem' })} />\n Insert table\n </DropdownMenuItem>\n <DropdownMenuItem\n className=\"min-w-[180px]\"\n disabled={!tableSelected}\n onSelect={async () => {\n deleteTable(editor);\n focusEditor(editor);\n }}\n >\n <Icons.trash className={iconVariants({ variant: 'menuItem' })} />\n Delete table\n </DropdownMenuItem>\n </DropdownMenuSubContent>\n </DropdownMenuSub>\n\n <DropdownMenuSub>\n <DropdownMenuSubTrigger disabled={!tableSelected}>\n <Icons.column className={iconVariants({ variant: 'menuItem' })} />\n <span>Column</span>\n </DropdownMenuSubTrigger>\n <DropdownMenuSubContent>\n <DropdownMenuItem\n className=\"min-w-[180px]\"\n disabled={!tableSelected}\n onSelect={async () => {\n insertTableColumn(editor);\n focusEditor(editor);\n }}\n >\n <Icons.add className={iconVariants({ variant: 'menuItem' })} />\n Insert column after\n </DropdownMenuItem>\n <DropdownMenuItem\n className=\"min-w-[180px]\"\n disabled={!tableSelected}\n onSelect={async () => {\n deleteColumn(editor);\n focusEditor(editor);\n }}\n >\n <Icons.minus className={iconVariants({ variant: 'menuItem' })} />\n Delete column\n </DropdownMenuItem>\n </DropdownMenuSubContent>\n </DropdownMenuSub>\n\n <DropdownMenuSub>\n <DropdownMenuSubTrigger disabled={!tableSelected}>\n <Icons.row className={iconVariants({ variant: 'menuItem' })} />\n <span>Row</span>\n </DropdownMenuSubTrigger>\n <DropdownMenuSubContent>\n <DropdownMenuItem\n className=\"min-w-[180px]\"\n disabled={!tableSelected}\n onSelect={async () => {\n insertTableRow(editor);\n focusEditor(editor);\n }}\n >\n <Icons.add className={iconVariants({ variant: 'menuItem' })} />\n Insert row after\n </DropdownMenuItem>\n <DropdownMenuItem\n className=\"min-w-[180px]\"\n disabled={!tableSelected}\n onSelect={async () => {\n deleteRow(editor);\n focusEditor(editor);\n }}\n >\n <Icons.minus className={iconVariants({ variant: 'menuItem' })} />\n Delete row\n </DropdownMenuItem>\n </DropdownMenuSubContent>\n </DropdownMenuSub>\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n"
"content": "import React from 'react';\nimport { DropdownMenuProps } from '@radix-ui/react-dropdown-menu';\nimport {\n focusEditor,\n someNode,\n usePlateEditorState,\n} from '@udecode/plate-common';\nimport {\n ELEMENT_TABLE,\n deleteColumn,\n deleteRow,\n deleteTable,\n insertTable,\n insertTableColumn,\n insertTableRow,\n} from '@udecode/plate-table';\n\nimport { Icons, iconVariants } from '@/components/icons';\n\nimport {\n DropdownMenu,\n DropdownMenuContent,\n DropdownMenuItem,\n DropdownMenuSub,\n DropdownMenuSubContent,\n DropdownMenuSubTrigger,\n DropdownMenuTrigger,\n useOpenState,\n} from './dropdown-menu';\nimport { ToolbarButton } from './toolbar';\n\nexport function TableDropdownMenu(props: DropdownMenuProps) {\n const editor = usePlateEditorState();\n\n const tableSelected = someNode(editor, {\n match: { type: ELEMENT_TABLE },\n });\n\n const openState = useOpenState();\n\n return (\n <DropdownMenu modal={false} {...openState} {...props}>\n <DropdownMenuTrigger asChild>\n <ToolbarButton pressed={openState.open} tooltip=\"Table\" isDropdown>\n <Icons.table />\n </ToolbarButton>\n </DropdownMenuTrigger>\n\n <DropdownMenuContent\n align=\"start\"\n className=\"flex w-[180px] min-w-0 flex-col gap-0.5\"\n >\n <DropdownMenuSub>\n <DropdownMenuSubTrigger>\n <Icons.table className={iconVariants({ variant: 'menuItem' })} />\n <span>Table</span>\n </DropdownMenuSubTrigger>\n <DropdownMenuSubContent>\n <DropdownMenuItem\n className=\"min-w-[180px]\"\n onSelect={async () => {\n insertTable(editor);\n focusEditor(editor);\n }}\n >\n <Icons.add className={iconVariants({ variant: 'menuItem' })} />\n Insert table\n </DropdownMenuItem>\n <DropdownMenuItem\n className=\"min-w-[180px]\"\n disabled={!tableSelected}\n onSelect={async () => {\n deleteTable(editor);\n focusEditor(editor);\n }}\n >\n <Icons.trash className={iconVariants({ variant: 'menuItem' })} />\n Delete table\n </DropdownMenuItem>\n </DropdownMenuSubContent>\n </DropdownMenuSub>\n\n <DropdownMenuSub>\n <DropdownMenuSubTrigger disabled={!tableSelected}>\n <Icons.column className={iconVariants({ variant: 'menuItem' })} />\n <span>Column</span>\n </DropdownMenuSubTrigger>\n <DropdownMenuSubContent>\n <DropdownMenuItem\n className=\"min-w-[180px]\"\n disabled={!tableSelected}\n onSelect={async () => {\n insertTableColumn(editor);\n focusEditor(editor);\n }}\n >\n <Icons.add className={iconVariants({ variant: 'menuItem' })} />\n Insert column after\n </DropdownMenuItem>\n <DropdownMenuItem\n className=\"min-w-[180px]\"\n disabled={!tableSelected}\n onSelect={async () => {\n deleteColumn(editor);\n focusEditor(editor);\n }}\n >\n <Icons.minus className={iconVariants({ variant: 'menuItem' })} />\n Delete column\n </DropdownMenuItem>\n </DropdownMenuSubContent>\n </DropdownMenuSub>\n\n <DropdownMenuSub>\n <DropdownMenuSubTrigger disabled={!tableSelected}>\n <Icons.row className={iconVariants({ variant: 'menuItem' })} />\n <span>Row</span>\n </DropdownMenuSubTrigger>\n <DropdownMenuSubContent>\n <DropdownMenuItem\n className=\"min-w-[180px]\"\n disabled={!tableSelected}\n onSelect={async () => {\n insertTableRow(editor);\n focusEditor(editor);\n }}\n >\n <Icons.add className={iconVariants({ variant: 'menuItem' })} />\n Insert row after\n </DropdownMenuItem>\n <DropdownMenuItem\n className=\"min-w-[180px]\"\n disabled={!tableSelected}\n onSelect={async () => {\n deleteRow(editor);\n focusEditor(editor);\n }}\n >\n <Icons.minus className={iconVariants({ variant: 'menuItem' })} />\n Delete row\n </DropdownMenuItem>\n </DropdownMenuSubContent>\n </DropdownMenuSub>\n </DropdownMenuContent>\n </DropdownMenu>\n );\n}\n"
}
],
"type": "components:plate-ui"
Expand Down
5 changes: 4 additions & 1 deletion packages/cli/src/utils/transformers/transform-rsc.ts
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,10 @@ export const transformRsc: Transformer = async ({ sourceFile, config }) => {

// Remove "use client" from the top of the file.
const first = sourceFile.getFirstChildByKind(SyntaxKind.ExpressionStatement);
if (first?.getText() === `'use client'`) {
if (
first?.getText() === `'use client'` ||
first?.getText() === `"use client"`
) {
first.remove();
}

Expand Down
162 changes: 81 additions & 81 deletions packages/cli/test/commands/init.test.ts
Original file line number Diff line number Diff line change
@@ -1,166 +1,166 @@
import fs from "fs"
import path from "path"
import { execa } from "execa"
import { afterEach, expect, test, vi } from "vitest"
import fs from 'fs';
import path from 'path';
import { execa } from 'execa';
import { afterEach, expect, test, vi } from 'vitest';

import { runInit } from "../../src/commands/init"
import { getConfig } from "../../src/utils/get-config"
import * as getPackageManger from "../../src/utils/get-package-manager"
import * as registry from "../../src/utils/registry"
import { runInit } from '../../src/commands/init';
import { getConfig } from '../../src/utils/get-config';
import * as getPackageManger from '../../src/utils/get-package-manager';
import * as registry from '../../src/utils/registry';

vi.mock("execa")
vi.mock("fs/promises", () => ({
vi.mock('execa');
vi.mock('fs/promises', () => ({
writeFile: vi.fn(),
mkdir: vi.fn(),
}))
}));

vi.mock("execa")
vi.mock("fs/promises", () => ({
vi.mock('execa');
vi.mock('fs/promises', () => ({
writeFile: vi.fn(),
mkdir: vi.fn(),
}))
vi.mock("ora")
}));
vi.mock('ora');

test("init config-full", async () => {
vi.spyOn(getPackageManger, "getPackageManager").mockResolvedValue("pnpm")
vi.spyOn(registry, "getRegistryBaseColor").mockResolvedValue({
test('init config-full', async () => {
vi.spyOn(getPackageManger, 'getPackageManager').mockResolvedValue('pnpm');
vi.spyOn(registry, 'getRegistryBaseColor').mockResolvedValue({
inlineColors: {},
cssVars: {},
inlineColorsTemplate:
"@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
'@tailwind base;\n@tailwind components;\n@tailwind utilities;\n',
cssVarsTemplate:
"@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
})
const mockMkdir = vi.spyOn(fs.promises, "mkdir").mockResolvedValue(undefined)
const mockWriteFile = vi.spyOn(fs.promises, "writeFile").mockResolvedValue()
'@tailwind base;\n@tailwind components;\n@tailwind utilities;\n',
});
const mockMkdir = vi.spyOn(fs.promises, 'mkdir').mockResolvedValue();
const mockWriteFile = vi.spyOn(fs.promises, 'writeFile').mockResolvedValue();

const targetDir = path.resolve(__dirname, "../fixtures/config-full")
const config = await getConfig(targetDir)
const targetDir = path.resolve(__dirname, '../fixtures/config-full');
const config = await getConfig(targetDir);

await runInit(targetDir, config)
await runInit(targetDir, config);

expect(mockMkdir).toHaveBeenNthCalledWith(
1,
expect.stringMatching(/src\/app$/),
expect.anything()
)
);
expect(mockMkdir).toHaveBeenNthCalledWith(
2,
expect.stringMatching(/src\/lib$/),
expect.anything()
)
);
expect(mockMkdir).toHaveBeenNthCalledWith(
3,
expect.stringMatching(/src\/components$/),
expect.anything()
)
);
expect(mockWriteFile).toHaveBeenNthCalledWith(
1,
expect.stringMatching(/tailwind.config.ts$/),
expect.stringContaining(`/** @type {import('tailwindcss').Config} */`),
"utf8"
)
'utf8'
);
expect(mockWriteFile).toHaveBeenNthCalledWith(
2,
expect.stringMatching(/src\/app\/globals.css$/),
expect.stringContaining(`@tailwind base`),
"utf8"
)
'utf8'
);
expect(mockWriteFile).toHaveBeenNthCalledWith(
3,
expect.stringMatching(/src\/lib\/utils.ts$/),
expect.stringContaining(`import { type ClassValue, clsx } from "clsx"`),
"utf8"
)
expect.stringContaining(`import { type ClassValue, clsx } from 'clsx'`),
'utf8'
);
expect(execa).toHaveBeenCalledWith(
"pnpm",
'pnpm',
[
"add",
"tailwindcss-animate",
"class-variance-authority",
"clsx",
"tailwind-merge",
"@radix-ui/react-icons",
'add',
'tailwindcss-animate',
'class-variance-authority',
'clsx',
'tailwind-merge',
'@radix-ui/react-icons',
],
{
cwd: targetDir,
}
)
);

mockMkdir.mockRestore()
mockWriteFile.mockRestore()
})
mockMkdir.mockRestore();
mockWriteFile.mockRestore();
});

test("init config-partial", async () => {
vi.spyOn(getPackageManger, "getPackageManager").mockResolvedValue("npm")
vi.spyOn(registry, "getRegistryBaseColor").mockResolvedValue({
test('init config-partial', async () => {
vi.spyOn(getPackageManger, 'getPackageManager').mockResolvedValue('npm');
vi.spyOn(registry, 'getRegistryBaseColor').mockResolvedValue({
inlineColors: {},
cssVars: {},
inlineColorsTemplate:
"@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
'@tailwind base;\n@tailwind components;\n@tailwind utilities;\n',
cssVarsTemplate:
"@tailwind base;\n@tailwind components;\n@tailwind utilities;\n",
})
const mockMkdir = vi.spyOn(fs.promises, "mkdir").mockResolvedValue(undefined)
const mockWriteFile = vi.spyOn(fs.promises, "writeFile").mockResolvedValue()
'@tailwind base;\n@tailwind components;\n@tailwind utilities;\n',
});
const mockMkdir = vi.spyOn(fs.promises, 'mkdir').mockResolvedValue();
const mockWriteFile = vi.spyOn(fs.promises, 'writeFile').mockResolvedValue();

const targetDir = path.resolve(__dirname, "../fixtures/config-partial")
const config = await getConfig(targetDir)
const targetDir = path.resolve(__dirname, '../fixtures/config-partial');
const config = await getConfig(targetDir);

await runInit(targetDir, config)
await runInit(targetDir, config);

expect(mockMkdir).toHaveBeenNthCalledWith(
1,
expect.stringMatching(/src\/assets\/css$/),
expect.anything()
)
);
expect(mockMkdir).toHaveBeenNthCalledWith(
2,
expect.stringMatching(/lib$/),
expect.anything()
)
);
expect(mockMkdir).toHaveBeenNthCalledWith(
3,
expect.stringMatching(/components$/),
expect.anything()
)
);
expect(mockWriteFile).toHaveBeenNthCalledWith(
1,
expect.stringMatching(/tailwind.config.ts$/),
expect.stringContaining(`/** @type {import('tailwindcss').Config} */`),
"utf8"
)
'utf8'
);
expect(mockWriteFile).toHaveBeenNthCalledWith(
2,
expect.stringMatching(/src\/assets\/css\/tailwind.css$/),
expect.stringContaining(`@tailwind base`),
"utf8"
)
'utf8'
);
expect(mockWriteFile).toHaveBeenNthCalledWith(
3,
expect.stringMatching(/utils.ts$/),
expect.stringContaining(`import { type ClassValue, clsx } from "clsx"`),
"utf8"
)
expect.stringContaining(`import { type ClassValue, clsx } from 'clsx'`),
'utf8'
);
expect(execa).toHaveBeenCalledWith(
"npm",
'npm',
[
"install",
"tailwindcss-animate",
"class-variance-authority",
"clsx",
"tailwind-merge",
"lucide-react",
'install',
'tailwindcss-animate',
'class-variance-authority',
'clsx',
'tailwind-merge',
'lucide-react',
],
{
cwd: targetDir,
}
)
);

mockMkdir.mockRestore()
mockWriteFile.mockRestore()
})
mockMkdir.mockRestore();
mockWriteFile.mockRestore();
});

afterEach(() => {
vi.resetAllMocks()
})
vi.resetAllMocks();
});
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import { Foo } from \\"bar\\"
`;

exports[`transform rsc 3`] = `
" import * as React from \\"react\\"
" import * as React from \\"react\\"
import { Foo } from \\"bar\\"
"
`;
Expand Down
Loading

1 comment on commit 30fc37c

@vercel
Copy link

@vercel vercel bot commented on 30fc37c Jul 6, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

plate – ./

www.platejs.org
plate-git-plate-ui-tw-udecode.vercel.app
plate-gold.vercel.app
platejs.org

Please sign in to comment.