{`$1`}')
+}
+
+/**
+ * Generates the relative filename based on the file path.
+ *
+ * @param {string} file - The absolute file path.
+ * @returns {string} - The relative filename.
+ */
+const getRelativeFilename = (file) => {
+ let relativePath = file.includes('node_modules')
+ ? file.split('node_modules/@coreui/')[1]
+ : path.relative(GLOBBY_OPTIONS.cwd, file).replace('coreui-', '')
-async function createMdx(file, filename, name, props) {
- if (typeof props === 'undefined') {
- return
+ // Remove '-pro' from the filename if not a pro component
+ const isPro = PRO_COMPONENTS.some((component) => file.includes(component))
+ if (!isPro) {
+ relativePath = relativePath.replace('-pro', '')
}
- const pro = PRO_COMPONENTS.some((v) => file.includes(v))
- let relativeFilename
- if (file.includes('node_modules')) {
- relativeFilename = file.replace(path.join(file, '..', '..', '..'), '').replace('coreui-', '')
- } else {
- relativeFilename = file.replace(GLOBBY_OPTIONS.cwd, '').replace('coreui-', '')
+ return relativePath
+}
+
+/**
+ * Splits the input string by the '|' character, but only when the '|' is outside of any curly braces {} and parentheses ().
+ *
+ * @param {string} input - The string to be split.
+ * @returns {string[]} An array of split parts, trimmed of whitespace.
+ * @throws {Error} Throws an error if there are unmatched braces or parentheses in the input.
+ */
+const splitOutsideBracesAndParentheses = (input) => {
+ if (input.endsWith('...')) {
+ return [input]
+ }
+
+ const parts = []
+ let currentPart = ''
+ let braceDepth = 0
+ let parenthesisDepth = 0
+
+ for (const char of input) {
+ switch (char) {
+ case '{': {
+ braceDepth++
+ break
+ }
+ case '}': {
+ braceDepth--
+ if (braceDepth < 0) {
+ throw new Error('Unmatched closing curly brace detected.')
+ }
+ break
+ }
+ case '(': {
+ parenthesisDepth++
+ break
+ }
+ case ')': {
+ parenthesisDepth--
+ if (parenthesisDepth < 0) {
+ throw new Error('Unmatched closing parenthesis detected.')
+ }
+ break
+ }
+ case '|': {
+ // Split only if not inside any braces or parentheses
+ if (braceDepth === 0 && parenthesisDepth === 0 && currentPart.trim()) {
+ parts.push(currentPart.trim())
+ currentPart = ''
+ continue
+ }
+ break
+ }
+ default: {
+ break
+ }
+ }
+ currentPart += char
+ }
+
+ if (braceDepth !== 0) {
+ throw new Error('Unmatched opening curly brace detected.')
+ }
+ if (parenthesisDepth !== 0) {
+ throw new Error('Unmatched opening parenthesis detected.')
+ }
+
+ if (currentPart.trim()) {
+ parts.push(currentPart.trim())
}
- if (!pro) {
- relativeFilename = relativeFilename.replace('-pro', '')
+ return parts
+}
+
+/**
+ * Replaces specified text within component documentation.
+ *
+ * @param {string} componenName - The name of the component.
+ * @param {string} keyName - The key of the text replacement (e.g., 'description', 'example').
+ * @param {string} text - The text to be replaced.
+ * @returns {string} The replaced text.
+ */
+const replaceText = (componenName, keyName, text) => {
+ const keyNames = Object.keys(TEXT_REPLACEMENTS)
+
+ if (keyNames.includes(componenName) && TEXT_REPLACEMENTS[componenName][keyName]) {
+ const replacements = TEXT_REPLACEMENTS[componenName][keyName]
+ for (const replacement of replacements) {
+ for (const [key, value] of Object.entries(replacement)) {
+ if (text && key && value) {
+ return text.replaceAll(key, value)
+ }
+ }
+ }
+ } else {
+ return text
}
+}
+
+/**
+ * Creates an MDX file with the component's API documentation.
+ *
+ * @param {string} file - The absolute path to the component file.
+ * @param {object} component - The component info extracted by react-docgen-typescript.
+ */
+const createMdx = async (file, component) => {
+ if (!component) return
- let content = `\n`
- content += `\`\`\`jsx\n`
- content += `import { ${name} } from '@coreui/${relativeFilename.split('/')[1]}'\n`
+ const filename = path.basename(file, '.tsx')
+ const relativeFilename = getRelativeFilename(file)
+
+ let content = `\n\`\`\`jsx\n`
+ const importPathParts = relativeFilename.split('/')
+ if (importPathParts.length > 1) {
+ content += `import { ${component.displayName} } from '@coreui/${importPathParts[0]}'\n`
+ }
content += `// or\n`
- content += `import ${name} from '@coreui${relativeFilename.replace('.tsx', '')}'\n`
+ content += `import ${component.displayName} from '@coreui/${relativeFilename.replace('.tsx', '')}'\n`
content += `\`\`\`\n\n`
- let index = 0
- for (const [key, value] of Object.entries(props).sort()) {
- if (
- value.parent.fileName.includes('@types/react/index.d.ts') ||
- value.parent.fileName.includes('@types/react/ts5.0/index.d.ts')
- ) {
- continue
+ const filteredProps = Object.entries(component.props)
+ .filter(([_, value]) => {
+ if (!value.parent?.fileName) return true
+ return (
+ !value.parent.fileName.includes('@types/react/index.d.ts') &&
+ !value.parent.fileName.includes('@types/react/ts5.0/index.d.ts')
+ )
+ })
+ .sort(([a], [b]) => a.localeCompare(b))
+
+ for (const [index, [propName, propInfo]] of filteredProps.entries()) {
+ if (index === 0) {
+ content += `| Property | \n` + content += `Default | \n` + content += `Type | \n` + content += `
|---|---|---|
| ${displayName}${anchor}${since}${deprecated} | \n` + content += `${escapeMarkdown(defaultValue)} | \n` + content += `${escapeMarkdown(types)} | \n` + content += `
\n`
+ content += ` ${converter
+ .makeHtml(description)
+ .replaceAll(/(.*?)<\/code>/g, ' | \n`
+ content += ` ||
| Property | +Default | +Type | +
|---|---|---|
| activeItemKey# | +- | +{`string`}, {`number`} |
+
|
+ The active item key. + |
+ ||
| alwaysOpen# | +{`false`} |
+ {`boolean`} |
+
|
+ Make accordion items stay open when another item is opened + |
+ ||
| className# | +- | +{`string`} |
+
|
+ A string of all className you want applied to the base component. + |
+ ||
| flush# | +- | +{`boolean`} |
+
|
+ Removes the default background-color, some borders, and some rounded corners to render accordions edge-to-edge with their parent container. + |
+ ||
| Property | +Default | +Type | +
|---|---|---|
| className# | +- | +{`string`} |
+
|
+ A string of all className you want applied to the base component. + |
+ ||
| Property | +Default | +Type | +
|---|---|---|
| className# | +- | +{`string`} |
+
|
+ A string of all className you want applied to the base component. + |
+ ||
| Property | +Default | +Type | +
|---|---|---|
| className# | +- | +{`string`} |
+
|
+ A string of all className you want applied to the base component. + |
+ ||
| Property | +Default | +Type | +
|---|---|---|
| className# | +- | +{`string`} |
+
|
+ A string of all className you want applied to the base component. + |
+ ||
| id# | +- | +{`string`} |
+
|
+ The id global attribute defines an identifier (ID) that must be unique in the whole document. + |
+ ||
| itemKey# | +- | +{`string`}, {`number`} |
+
|
+ Item key. + |
+ ||
| Property | +Default | +Type | +
|---|---|---|
| className# | +- | +{`string`} |
+
|
+ A string of all className you want applied to the component. + |
+ ||
| color# | +{`primary`} |
+ {`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} |
+
|
+ Sets the color context of the component to one of CoreUI’s themed colors. + |
+ ||
| dismissible# | +- | +{`boolean`} |
+
|
+ Optionally add a close button to alert and allow it to self dismiss. + |
+ ||
| onClose# | +- | +{`() => void`} |
+
|
+ Callback fired when the component requests to be closed. + |
+ ||
| variant# | +- | +{`string`} |
+
|
+ Set the alert variant to a solid. + |
+ ||
| visible# | +{`true`} |
+ {`boolean`} |
+
|
+ Toggle the visibility of component. + |
+ ||
| Property | +Default | +Type | +
|---|---|---|
| as# | +- | +{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'h4')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} |
+
|
+ Component used for the root node. Either a string to use a HTML element or a component. + |
+ ||
| className# | +- | +{`string`} |
+
|
+ A string of all className you want applied to the base component. + |
+ ||
| Property | +Default | +Type | +
|---|---|---|
| className# | +- | +{`string`} |
+
|
+ A string of all className you want applied to the base component. + |
+ ||
| Property | +Default | +Type | +
|---|---|---|
| className# | +- | +{`string`} |
+
|
+ A string of all className you want applied to the component. + |
+ ||
| color# | +- | +{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} |
+
|
+ Sets the color context of the component to one of CoreUI’s themed colors. + |
+ ||
| shape# | +- | +{`'rounded'`}, {`'rounded-top'`}, {`'rounded-end'`}, {`'rounded-bottom'`}, {`'rounded-start'`}, {`'rounded-circle'`}, {`'rounded-pill'`}, {`'rounded-0'`}, {`'rounded-1'`}, {`'rounded-2'`}, {`'rounded-3'`}, {`string`} |
+
|
+ Select the shape of the component. + |
+ ||
| size# | +- | +{`string`} |
+
|
+ Size the component small, large, or extra large. + |
+ ||
| src# | +- | +{`string`} |
+
|
+ The src attribute for the img element. + |
+ ||
| status# | +- | +{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} |
+
|
+ Sets the color context of the status indicator to one of CoreUI’s themed colors. + |
+ ||
| textColor# | +- | +{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`'primary-emphasis'`}, {`'secondary-emphasis'`}, {`'success-emphasis'`}, {`'danger-emphasis'`}, {`'warning-emphasis'`}, {`'info-emphasis'`}, {`'light-emphasis'`}, {`'body'`}, {`'body-emphasis'`}, {`'body-secondary'`}, {`'body-tertiary'`}, {`'black'`}, {`'black-50'`}, {`'white'`}, {`'white-50'`}, {`string`} |
+
|
+ Sets the text color of the component to one of CoreUI’s themed colors. + |
+ ||
| Property | +Default | +Type | +
|---|---|---|
| className# | +{`modal-backdrop`} |
+ {`string`} |
+
|
+ A string of all className you want applied to the base component. + |
+ ||
| visible# | +- | +{`boolean`} |
+
|
+ Toggle the visibility of modal component. + |
+ ||
| Property | +Default | +Type | +
|---|---|---|
| as# | +- | +{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'span')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} |
+
|
+ Component used for the root node. Either a string to use a HTML element or a component. + |
+ ||
| className# | +- | +{`string`} |
+
|
+ A string of all className you want applied to the component. + |
+ ||
| color# | +- | +{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} |
+
|
+ Sets the color context of the component to one of CoreUI’s themed colors. + |
+ ||
| position# | +- | +{`'top-start'`}, {`'top-end'`}, {`'bottom-end'`}, {`'bottom-start'`} |
+
|
+ Position badge in one of the corners of a link or button. + |
+ ||
| shape# | +- | +{`'rounded'`}, {`'rounded-top'`}, {`'rounded-end'`}, {`'rounded-bottom'`}, {`'rounded-start'`}, {`'rounded-circle'`}, {`'rounded-pill'`}, {`'rounded-0'`}, {`'rounded-1'`}, {`'rounded-2'`}, {`'rounded-3'`}, {`string`} |
+
|
+ Select the shape of the component. + |
+ ||
| size# | +- | +{`'sm'`} |
+
|
+ Size the component small. + |
+ ||
| textBgColor#5.0.0+ | +- | +{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} |
+
|
+ Sets the component's color scheme to one of CoreUI's themed colors, ensuring the text color contrast adheres to the WCAG 4.5:1 contrast ratio standard for accessibility. + |
+ ||
| textColor# | +- | +{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`'primary-emphasis'`}, {`'secondary-emphasis'`}, {`'success-emphasis'`}, {`'danger-emphasis'`}, {`'warning-emphasis'`}, {`'info-emphasis'`}, {`'light-emphasis'`}, {`'body'`}, {`'body-emphasis'`}, {`'body-secondary'`}, {`'body-tertiary'`}, {`'black'`}, {`'black-50'`}, {`'white'`}, {`'white-50'`}, {`string`} |
+
|
+ Sets the text color of the component to one of CoreUI’s themed colors. + |
+ ||
| Property | +Default | +Type | +
|---|---|---|
| className# | +- | +{`string`} |
+
|
+ A string of all className you want applied to the component. + |
+ ||
| Property | +Default | +Type | +
|---|---|---|
| active# | +- | +{`boolean`} |
+
|
+ Toggle the active state for the component. + |
+ ||
| as#5.4.0+ | +- | +{`(ElementType & 'symbol')`}, {`(ElementType & 'object')`}, {`(ElementType & 'li')`}, {`(ElementType & 'slot')`}, {`(ElementType & 'style')`}, {`... 174 more ...`}, {`(ElementType & FunctionComponent\<...>)`} |
+
|
+ Component used for the root node. Either a string to use a HTML element or a component. + |
+ ||
| className# | +- | +{`string`} |
+
|
+ A string of all className you want applied to the base component. + |
+ ||
| href# | +- | +{`string`} |
+
|
+ The |
+ ||
| Property | +Default | +Type | +
|---|---|---|
| active# | +- | +{`boolean`} |
+
|
+ Highlight a table row or cell. + |
+ ||
| align# | +- | +{`string`} |
+
|
+ Set the vertical aligment. + |
+ ||
| className# | +- | +{`string`} |
+
|
+ A string of all className you want applied to the component. + |
+ ||
| color# | +- | +{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} |
+
|
+ Sets the color context of the component to one of CoreUI’s themed colors. + |
+ ||
| Property | +Default | +Type | +
|---|---|---|
| className# | +- | +{`string`} |
+
|
+ A string of all className you want applied to the component. + |
+ ||
| color# | +- | +{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} |
+
|
+ Sets the color context of the component to one of CoreUI’s themed colors. + |
+ ||
| Property | +Default | +Type | +
|---|---|---|
| className# | +- | +{`string`} |
+
|
+ A string of all className you want applied to the component. + |
+ ||
| color# | +- | +{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} |
+
|
+ Sets the color context of the component to one of CoreUI’s themed colors. + |
+ ||
| Property | +Default | +Type | +
|---|---|---|
| className# | +- | +{`string`} |
+
|
+ A string of all className you want applied to the component. + |
+ ||
| color# | +- | +{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} |
+
|
+ Sets the color context of the component to one of CoreUI’s themed colors. + |
+ ||
| Property | +Default | +Type | +
|---|---|---|
| responsive# | +- | +{`boolean`}, {`'sm'`}, {`'md'`}, {`'lg'`}, {`'xl'`}, {`'xxl'`} |
+
|
+ Make any table responsive across all viewports or pick a maximum breakpoint with which to have a responsive table up to. + |
+ ||
| Property | +Default | +Type | +
|---|---|---|
| active# | +- | +{`boolean`} |
+
|
+ Highlight a table row or cell.. + |
+ ||
| align# | +- | +{`string`} |
+
|
+ Set the vertical aligment. + |
+ ||
| className# | +- | +{`string`} |
+
|
+ A string of all className you want applied to the component. + |
+ ||
| color# | +- | +{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} |
+
|
+ Sets the color context of the component to one of CoreUI’s themed colors. + |
+ ||
| Property | +Default | +Type | +
|---|---|---|
| activeItemKey# | +- | +{`string`}, {`number`} |
+
|
+ Controls the currently active tab. +When provided, the component operates in a controlled mode. |
+ ||
| className# | +- | +{`string`} |
+
|
+ A string of all className you want applied to the base component. + |
+ ||
| defaultActiveItemKey# | +- | +{`string`}, {`number`} |
+
|
+ Sets the initially active tab when the component mounts. +After initialization, the component manages active tab changes internally. +Use |
+ ||
| onChange# | +- | +{`(value: string | number) => void`} |
+
|
+ Callback fired when the active tab changes. +
|
+ ||
| Property | +Default | +Type | +
|---|---|---|
| animation# | +{`true`} |
+ {`boolean`} |
+
|
+ Apply a CSS fade transition to the toast. + |
+ ||
| autohide# | +{`true`} |
+ {`boolean`} |
+
|
+ Auto hide the toast. + |
+ ||
| className# | +- | +{`string`} |
+
|
+ A string of all className you want applied to the base component. + |
+ ||
| color# | +- | +{`'primary'`}, {`'secondary'`}, {`'success'`}, {`'danger'`}, {`'warning'`}, {`'info'`}, {`'dark'`}, {`'light'`}, {`string`} |
+
|
+ Sets the color context of the component to one of CoreUI’s themed colors. + |
+ ||
| delay# | +{`5000`} |
+ {`number`} |
+
|
+ Delay hiding the toast (ms). + |
+ ||
| onClose# | +- | +{`(index: number) => void`} |
+
|
+ Callback fired when the component requests to be closed. + |
+ ||
| onShow# | +- | +{`(index: number) => void`} |
+
|
+ Callback fired when the component requests to be shown. + |
+ ||
| visible# | +{`false`} |
+ {`boolean`} |
+
|
+ Toggle the visibility of component. + |
+ ||
| Property | +Default | +Type | +
|---|---|---|
| className# | +- | +{`string`} |
+
|
+ A string of all className you want applied to the base component. + |
+ ||