Skip to content

Commit dbd9f92

Browse files
mrholekmrholek
committed
docs(ExampleSnippet): add support for pro component
1 parent d9255fe commit dbd9f92

File tree

4 files changed

+40
-27
lines changed

4 files changed

+40
-27
lines changed

‎packages/docs/src/components/ExampleSnippet.tsx‎

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ export interface ExampleSnippetProps {
1919
code: string | CodeSnippets
2020
codeSandbox?: boolean
2121
componentName?: string
22+
pro?: boolean
2223
stackBlitz?: boolean
2324
}
2425

@@ -28,6 +29,7 @@ const ExampleSnippet: FC<ExampleSnippetProps> = ({
2829
code,
2930
codeSandbox = true,
3031
componentName,
32+
pro = false,
3133
stackBlitz = true,
3234
}) => {
3335
const [language, setLanguage] = useState<'js' | 'ts'>('js')
@@ -87,9 +89,10 @@ const ExampleSnippet: FC<ExampleSnippetProps> = ({
8789
onClick={() =>
8890
openCodeSandboxProject({
8991
name: React.isValidElement(children) && (children as any).type?.name,
90-
language: language,
92+
language,
9193
code: language === 'js' ? codeJS : codeTS || '',
9294
componentName,
95+
pro,
9396
})
9497
}
9598
disabled={language === 'ts' && !hasTS}
@@ -107,9 +110,10 @@ const ExampleSnippet: FC<ExampleSnippetProps> = ({
107110
onClick={() =>
108111
openStackBlitzProject({
109112
name: React.isValidElement(children) && (children as any).type?.name,
110-
language: language,
113+
language,
111114
code: language === 'js' ? codeJS : codeTS || '',
112115
componentName,
116+
pro,
113117
})
114118
}
115119
disabled={language === 'ts' && !hasTS}

‎packages/docs/src/utils/codesandbox.ts‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -16,16 +16,16 @@ interface CodeSandboxOptions extends ProjectOptions {
1616

1717
// Function to open a CodeSandbox project
1818
export const openCodeSandboxProject = async (options: CodeSandboxOptions) => {
19-
const { code, componentName, language, name } = options
19+
const { code, componentName, language, name, pro = false } = options
2020

2121
const title = generateTitle(componentName)
2222
const description = generateDescription(componentName)
2323
const template = 'create-react-app'
2424

2525
const indexHTML = generateIndexHTML(title)
2626
const indexExtension = language === 'ts' ? 'tsx' : 'js'
27-
const indexJS = generateIndexJS(name, language, 'codesandbox')
28-
const packageJSON = generatePackageJSON(title, description, language, 'codesandbox')
27+
const indexJS = generateIndexJS(name, language, pro, 'codesandbox')
28+
const packageJSON = generatePackageJSON(title, description, language, pro, 'codesandbox')
2929

3030
// Define the files structure
3131
const files: Record<string, { content: string }> = {

‎packages/docs/src/utils/projectUtils.ts‎

Lines changed: 27 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@ export interface ProjectOptions {
66
componentName?: string
77
language: 'js' | 'ts'
88
name: string
9-
pro?: boolean
9+
pro: boolean
1010
}
1111

1212
// Function to generate title
@@ -23,10 +23,17 @@ export const generateDescription = (componentName?: string): string => {
2323
}
2424

2525
// Function to generate dependencies
26-
export const getDependencies = (language: 'js' | 'ts'): Record<string, string> => {
26+
export const getDependencies = (language: 'js' | 'ts', pro: boolean): Record<string, string> => {
2727
const dependencies: Record<string, string> = {
28-
'@coreui/coreui': 'latest',
29-
'@coreui/react': 'latest',
28+
...(pro
29+
? {
30+
'@coreui/coreui-pro': 'latest',
31+
'@coreui/react-pro': 'latest',
32+
}
33+
: {
34+
'@coreui/coreui': 'latest',
35+
'@coreui/react': 'latest',
36+
}),
3037
'@popperjs/core': 'latest',
3138
react: 'latest',
3239
'react-dom': 'latest',
@@ -55,22 +62,23 @@ export const getScripts = (): Record<string, string> => {
5562
// Function to generate index.html content
5663
export const generateIndexHTML = (title: string): string => {
5764
return `<!DOCTYPE html>
58-
<html lang="en">
59-
<head>
60-
<meta charset="UTF-8">
61-
<title>${title}</title>
62-
<meta name="viewport" content="width=device-width, initial-scale=1.0">
63-
</head>
64-
<body>
65-
<div id="root"></div>
66-
</body>
67-
</html>`
65+
<html lang="en">
66+
<head>
67+
<meta charset="UTF-8">
68+
<title>${title}</title>
69+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
70+
</head>
71+
<body>
72+
<div id="root"></div>
73+
</body>
74+
</html>`
6875
}
6976

7077
// Function to generate index.js or index.tsx content
7178
export const generateIndexJS = (
7279
name: string,
7380
language: 'js' | 'ts',
81+
pro: boolean,
7482
templateType: 'codesandbox' | 'stackblitz',
7583
): string => {
7684
const importReactDOM =
@@ -98,9 +106,9 @@ export const generateIndexJS = (
98106

99107
return `import React from 'react';
100108
${importReactDOM}
101-
import '@coreui/coreui/dist/css/coreui.min.css';
109+
import '@coreui/${pro ? 'coreui-pro' : 'coreui'}/dist/css/coreui.min.css';
102110
import { ${name} } from './${name}.${language}x';
103-
111+
104112
${renderMethod}`
105113
}
106114

@@ -109,6 +117,7 @@ export const generatePackageJSON = (
109117
title: string,
110118
description: string,
111119
language: 'js' | 'ts',
120+
pro: boolean,
112121
templateType: 'codesandbox' | 'stackblitz',
113122
): string => {
114123
const indexExtension = language === 'ts' ? 'tsx' : 'js'
@@ -119,9 +128,9 @@ export const generatePackageJSON = (
119128
description,
120129
main: templateType === 'codesandbox' ? `src/index.${indexExtension}` : `index.js`,
121130
scripts: getScripts(),
122-
dependencies: getDependencies(language),
131+
dependencies: getDependencies(language, pro),
123132
...(templateType === 'stackblitz' && {
124-
devDependencies: language === 'ts' ? getDependencies(language) : {},
133+
devDependencies: language === 'ts' ? getDependencies(language, pro) : {},
125134
}),
126135
}
127136

‎packages/docs/src/utils/stackblitz.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,15 +18,15 @@ interface StackBlitzOptions extends ProjectOptions {
1818

1919
// Function to open a StackBlitz project
2020
export const openStackBlitzProject = (options: StackBlitzOptions) => {
21-
const { code, componentName, language, name } = options
21+
const { code, componentName, language, name, pro = false } = options
2222

2323
const title = generateTitle(componentName)
2424
const description = generateDescription(componentName)
2525
const template = 'create-react-app'
2626

2727
const indexHTML = generateIndexHTML(title)
28-
const indexJS = generateIndexJS(name, language, 'stackblitz')
29-
const packageJSON = generatePackageJSON(title, description, language, 'stackblitz')
28+
const indexJS = generateIndexJS(name, language, pro, 'stackblitz')
29+
const packageJSON = generatePackageJSON(title, description, language, pro, 'stackblitz')
3030

3131
const files = {
3232
'public/index.html': indexHTML,
@@ -40,7 +40,7 @@ export const openStackBlitzProject = (options: StackBlitzOptions) => {
4040
description,
4141
template,
4242
files,
43-
dependencies: getDependencies(language),
43+
dependencies: getDependencies(language, pro),
4444
tags: ['coreui', 'react'],
4545
}
4646

0 commit comments

Comments
 (0)