From df9eb5f4c49d38231b80386e402414ebe41c83eb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=C5=81ukasz=20Holeczek?= Date: Tue, 25 Oct 2022 13:39:01 +0200 Subject: [PATCH 001/489] docs: add links to other frameworks --- .../docs/content/4.4/components/accordion.mdx | 2 + .../docs/content/4.4/components/alert.mdx | 1 + .../docs/content/4.4/components/avatar.mdx | 2 +- .../docs/content/4.4/components/badge.mdx | 2 +- .../content/4.4/components/breadcrumb.mdx | 2 +- .../content/4.4/components/button-group.mdx | 1 + .../docs/content/4.4/components/button.mdx | 1 + .../docs/content/4.4/components/callout.mdx | 1 + packages/docs/content/4.4/components/card.mdx | 1 + .../docs/content/4.4/components/carousel.mdx | 1 + .../content/4.4/components/close-button.mdx | 1 + .../docs/content/4.4/components/collapse.mdx | 1 + .../docs/content/4.4/components/dropdown.mdx | 1 + .../docs/content/4.4/components/footer.mdx | 1 + .../docs/content/4.4/components/header.mdx | 2 +- .../docs/content/4.4/components/image.mdx | 1 + .../content/4.4/components/list-group.mdx | 1 + .../docs/content/4.4/components/modal.mdx | 1 + .../docs/content/4.4/components/navbar.mdx | 2 +- .../docs/content/4.4/components/navs-tabs.mdx | 1 + .../docs/content/4.4/components/offcanvas.mdx | 1 + .../content/4.4/components/pagination.mdx | 2 +- .../content/4.4/components/placeholder.mdx | 1 + .../docs/content/4.4/components/popover.mdx | 2 +- .../docs/content/4.4/components/progress.mdx | 2 +- .../docs/content/4.4/components/sidebar.mdx | 1 + .../docs/content/4.4/components/spinner.mdx | 1 + .../docs/content/4.4/components/table.mdx | 1 + .../docs/content/4.4/components/toast.mdx | 1 + .../docs/content/4.4/components/tooltip.mdx | 2 +- packages/docs/content/4.4/forms/checkbox.mdx | 1 + .../content/4.4/forms/floating-labels.mdx | 1 + .../docs/content/4.4/forms/input-group.mdx | 1 + packages/docs/content/4.4/forms/input.mdx | 1 + packages/docs/content/4.4/forms/radio.mdx | 1 + packages/docs/content/4.4/forms/range.mdx | 1 + packages/docs/content/4.4/forms/select.mdx | 1 + packages/docs/content/4.4/forms/switch.mdx | 1 + packages/docs/content/4.4/forms/textarea.mdx | 1 + packages/docs/src/components/Footer.tsx | 4 +- packages/docs/src/components/Header.tsx | 9 +- packages/docs/src/templates/Docs.tsx | 136 +++++++--- .../docs/src/templates/other_frameworks.json | 241 ++++++++++++++++++ 43 files changed, 384 insertions(+), 55 deletions(-) create mode 100644 packages/docs/src/templates/other_frameworks.json diff --git a/packages/docs/content/4.4/components/accordion.mdx b/packages/docs/content/4.4/components/accordion.mdx index 3aba6212..e78c74b6 100644 --- a/packages/docs/content/4.4/components/accordion.mdx +++ b/packages/docs/content/4.4/components/accordion.mdx @@ -4,6 +4,8 @@ name: Accordion description: Build vertically collapsing accordions in combination with our React Accordion component. menu: Components route: /components/accordion +other_frameworks: accordion +pro_component: false --- import { useState } from 'react' diff --git a/packages/docs/content/4.4/components/alert.mdx b/packages/docs/content/4.4/components/alert.mdx index 393c2322..f17bc62f 100644 --- a/packages/docs/content/4.4/components/alert.mdx +++ b/packages/docs/content/4.4/components/alert.mdx @@ -4,6 +4,7 @@ name: Alert description: React alert component gives contextual feedback information for common user operations. The alert component is delivered with a bunch of usable and adjustable alert messages. menu: Components route: /components/alert +other_frameworks: alert --- import { useState } from 'react' diff --git a/packages/docs/content/4.4/components/avatar.mdx b/packages/docs/content/4.4/components/avatar.mdx index c134327f..adbe64e0 100644 --- a/packages/docs/content/4.4/components/avatar.mdx +++ b/packages/docs/content/4.4/components/avatar.mdx @@ -2,9 +2,9 @@ title: React Avatar Component name: Avatar description: React avatar component can be used to display circular user profile pictures. Avatar can be used to portray people or objects. It supports images, icons, or letters. - menu: Components route: /components/avatar +other_frameworks: avatar --- import { CAvatar } from '@coreui/react/src/index' diff --git a/packages/docs/content/4.4/components/badge.mdx b/packages/docs/content/4.4/components/badge.mdx index 1e42c569..741fc8cc 100644 --- a/packages/docs/content/4.4/components/badge.mdx +++ b/packages/docs/content/4.4/components/badge.mdx @@ -2,9 +2,9 @@ title: React Badge Component name: Badge description: React badge component is small count and labeling component. - menu: Components route: /components/badge +other_frameworks: badge --- import { CBadge, CButton } from '@coreui/react/src/index' diff --git a/packages/docs/content/4.4/components/breadcrumb.mdx b/packages/docs/content/4.4/components/breadcrumb.mdx index 0f0e72e4..cb09d251 100644 --- a/packages/docs/content/4.4/components/breadcrumb.mdx +++ b/packages/docs/content/4.4/components/breadcrumb.mdx @@ -2,9 +2,9 @@ title: React Breadcrumb Component name: Breadcrumb description: React breadcrumb navigation component which indicates the current location within a navigational hierarchy that automatically adds separators. - menu: Components route: /components/breadcrumb +other_frameworks: breadcrumb --- import { CBreadcrumb, CBreadcrumbItem } from '@coreui/react/src/index' diff --git a/packages/docs/content/4.4/components/button-group.mdx b/packages/docs/content/4.4/components/button-group.mdx index f0ad688c..81a74d81 100644 --- a/packages/docs/content/4.4/components/button-group.mdx +++ b/packages/docs/content/4.4/components/button-group.mdx @@ -4,6 +4,7 @@ name: Button group description: React button group component allows to group a series of buttons and power them with JavaScript. menu: Components route: /components/button-group +other_frameworks: button-group --- import { diff --git a/packages/docs/content/4.4/components/button.mdx b/packages/docs/content/4.4/components/button.mdx index c4eed1e3..ed6e5c42 100644 --- a/packages/docs/content/4.4/components/button.mdx +++ b/packages/docs/content/4.4/components/button.mdx @@ -4,6 +4,7 @@ name: Buttons description: React button component for actions in tables, forms, cards, and more. CoreUI for React.js provides various styles, states, and size. Ready to use and easy to customize. menu: Components route: /components/buttons +other_frameworks: button --- import { CButton, CCallout } from '@coreui/react/src/index' diff --git a/packages/docs/content/4.4/components/callout.mdx b/packages/docs/content/4.4/components/callout.mdx index 3301847f..d77afa71 100644 --- a/packages/docs/content/4.4/components/callout.mdx +++ b/packages/docs/content/4.4/components/callout.mdx @@ -4,6 +4,7 @@ name: Callout description: React callout component provides presentation of content in a visually distinct manner. Includes a heading, icon and typically text-based content. menu: Components route: /components/callout +other_frameworks: callout --- import { CCallout } from '@coreui/react/src/index' diff --git a/packages/docs/content/4.4/components/card.mdx b/packages/docs/content/4.4/components/card.mdx index 04f3a544..9d55b101 100644 --- a/packages/docs/content/4.4/components/card.mdx +++ b/packages/docs/content/4.4/components/card.mdx @@ -4,6 +4,7 @@ name: Card description: React card component provides a flexible and extensible container for displaying content. Card is delivered with a bunch of variants and options. menu: Components route: /components/card +other_frameworks: card --- import { diff --git a/packages/docs/content/4.4/components/carousel.mdx b/packages/docs/content/4.4/components/carousel.mdx index 39435597..160e1b7b 100644 --- a/packages/docs/content/4.4/components/carousel.mdx +++ b/packages/docs/content/4.4/components/carousel.mdx @@ -4,6 +4,7 @@ name: Carousel description: React carousel is a slideshow component for cycling through elements—images or slides of text—like a carousel. menu: Components route: /components/carousel +other_frameworks: carousel --- import { diff --git a/packages/docs/content/4.4/components/close-button.mdx b/packages/docs/content/4.4/components/close-button.mdx index e2233257..5a037bb8 100644 --- a/packages/docs/content/4.4/components/close-button.mdx +++ b/packages/docs/content/4.4/components/close-button.mdx @@ -4,6 +4,7 @@ name: Close Button description: A generic close button component for dismissing content like modals and alerts. menu: Components route: /components/close-button +other_frameworks: close-button --- import { CCloseButton } from '@coreui/react/src/index' diff --git a/packages/docs/content/4.4/components/collapse.mdx b/packages/docs/content/4.4/components/collapse.mdx index bc6e08b7..f90084a5 100644 --- a/packages/docs/content/4.4/components/collapse.mdx +++ b/packages/docs/content/4.4/components/collapse.mdx @@ -4,6 +4,7 @@ name: Collapse description: React collapse component toggles the visibility of content across your project with a few classes and some scripts. Useful for a large amount of content. menu: Components route: /components/collapse +other_frameworks: collapse --- import { useState } from 'react' diff --git a/packages/docs/content/4.4/components/dropdown.mdx b/packages/docs/content/4.4/components/dropdown.mdx index 28225bfb..5b0c4f6f 100644 --- a/packages/docs/content/4.4/components/dropdown.mdx +++ b/packages/docs/content/4.4/components/dropdown.mdx @@ -4,6 +4,7 @@ name: Dropdown description: React dropdown component allows you to toggle contextual overlays for displaying lists, links, and more html elements. menu: Components route: /components/dropdown +other_frameworks: dropdown --- import { diff --git a/packages/docs/content/4.4/components/footer.mdx b/packages/docs/content/4.4/components/footer.mdx index cbbc1ed0..1d7484a3 100644 --- a/packages/docs/content/4.4/components/footer.mdx +++ b/packages/docs/content/4.4/components/footer.mdx @@ -4,6 +4,7 @@ name: Footer description: React footer component is an additional navigation used for displaying general information that a user might want to access from any page within your site. It is a place to display boilerplate text about the site, company info, copyrights, links to a contact form, sitemap, FAQ and other such resources. menu: Components route: /components/footer +other_frameworks: footer --- import { CFooter, CLink } from '@coreui/react/src/index' diff --git a/packages/docs/content/4.4/components/header.mdx b/packages/docs/content/4.4/components/header.mdx index ea426c8c..dc97f09b 100644 --- a/packages/docs/content/4.4/components/header.mdx +++ b/packages/docs/content/4.4/components/header.mdx @@ -2,9 +2,9 @@ title: React Header Component name: Header description: Documentation and examples for the Header powerful, responsive navigation header. Includes support for branding, links, dropdowns, and more. - menu: Components route: /components/header +other_frameworks: header --- import { useState } from 'react' diff --git a/packages/docs/content/4.4/components/image.mdx b/packages/docs/content/4.4/components/image.mdx index 111ea6f8..27a6d1b2 100644 --- a/packages/docs/content/4.4/components/image.mdx +++ b/packages/docs/content/4.4/components/image.mdx @@ -4,6 +4,7 @@ name: Image description: React image component with responsive behavior (so it's never become larger than their parent element) and special styles. menu: Components route: /components/image +other_frameworks: image --- import { CImage } from '@coreui/react/src/index' diff --git a/packages/docs/content/4.4/components/list-group.mdx b/packages/docs/content/4.4/components/list-group.mdx index 3a8d511a..43e39c3c 100644 --- a/packages/docs/content/4.4/components/list-group.mdx +++ b/packages/docs/content/4.4/components/list-group.mdx @@ -4,6 +4,7 @@ name: List group description: React List Group component allows displaying a series of content. Learn how to use react list group to build complex list structure on your website. menu: Components route: /components/list-group +other_frameworks: list-group --- import { diff --git a/packages/docs/content/4.4/components/modal.mdx b/packages/docs/content/4.4/components/modal.mdx index 0840f1ec..9ab01d3b 100644 --- a/packages/docs/content/4.4/components/modal.mdx +++ b/packages/docs/content/4.4/components/modal.mdx @@ -4,6 +4,7 @@ name: Modal description: React Modal component offers a lightweight, multi-purpose popup to add dialogs to yours. Learn how to customize CoreUI React modal components easily. Multiple examples and tutorial. menu: Components route: /components/modal +other_frameworks: modal --- import { useState } from 'react' diff --git a/packages/docs/content/4.4/components/navbar.mdx b/packages/docs/content/4.4/components/navbar.mdx index 1b0f6767..95f81c1e 100644 --- a/packages/docs/content/4.4/components/navbar.mdx +++ b/packages/docs/content/4.4/components/navbar.mdx @@ -2,9 +2,9 @@ title: React Navbar Component name: Navbar description: Documentation and examples for the React navbar powerful, responsive navigation header component. Includes support for branding, links, dropdowns, and more. - menu: Components route: /components/navbar +other_frameworks: navbar --- import { useState } from 'react' diff --git a/packages/docs/content/4.4/components/navs-tabs.mdx b/packages/docs/content/4.4/components/navs-tabs.mdx index dbf9de65..52f11e96 100644 --- a/packages/docs/content/4.4/components/navs-tabs.mdx +++ b/packages/docs/content/4.4/components/navs-tabs.mdx @@ -4,6 +4,7 @@ name: Navs & Tabs description: Documentation and examples for how to use CoreUI's included React navigation components. menu: Components route: /components/navs-tabs +other_frameworks: navs-tabs --- import { useState } from 'react' diff --git a/packages/docs/content/4.4/components/offcanvas.mdx b/packages/docs/content/4.4/components/offcanvas.mdx index 948b8155..8a1ab763 100644 --- a/packages/docs/content/4.4/components/offcanvas.mdx +++ b/packages/docs/content/4.4/components/offcanvas.mdx @@ -4,6 +4,7 @@ name: Offcanvas description: React alert component allows build hidden sidebars into your project for navigation, shopping carts. menu: Components route: /components/offcanvas +other_frameworks: offcanvas --- import { useState } from 'react' diff --git a/packages/docs/content/4.4/components/pagination.mdx b/packages/docs/content/4.4/components/pagination.mdx index 4846b141..e8e4d952 100644 --- a/packages/docs/content/4.4/components/pagination.mdx +++ b/packages/docs/content/4.4/components/pagination.mdx @@ -2,9 +2,9 @@ title: React Pagination Component name: Pagination description: Documentation and examples for showing pagination to indicate a series of related content exists across multiple pages. - menu: Components route: /components/pagination +other_frameworks: pagination --- import { CPagination, CPaginationItem } from '@coreui/react/src/index' diff --git a/packages/docs/content/4.4/components/placeholder.mdx b/packages/docs/content/4.4/components/placeholder.mdx index cde5a61c..f973a1be 100644 --- a/packages/docs/content/4.4/components/placeholder.mdx +++ b/packages/docs/content/4.4/components/placeholder.mdx @@ -4,6 +4,7 @@ name: Placeholder description: Use loading react placeholders for your components or pages to indicate something may still be loading. menu: Components route: /components/placeholder +other_frameworks: placeholder --- import { useState } from 'react' diff --git a/packages/docs/content/4.4/components/popover.mdx b/packages/docs/content/4.4/components/popover.mdx index 9147dd11..44ecd12b 100644 --- a/packages/docs/content/4.4/components/popover.mdx +++ b/packages/docs/content/4.4/components/popover.mdx @@ -2,9 +2,9 @@ title: React Popover Component name: Popover description: Documentation and examples for adding React popovers, like those found in iOS, to any element on your site. - menu: Components route: /components/popover +other_frameworks: popover --- import { CPopover, CButton } from '@coreui/react/src/index' diff --git a/packages/docs/content/4.4/components/progress.mdx b/packages/docs/content/4.4/components/progress.mdx index 726146eb..a78a3a00 100644 --- a/packages/docs/content/4.4/components/progress.mdx +++ b/packages/docs/content/4.4/components/progress.mdx @@ -2,9 +2,9 @@ title: React Progress Component name: Progress description: Documentation and examples for using React progress bars featuring support for stacked bars, animated backgrounds, and text labels. - menu: Components route: /components/progress +other_frameworks: progress --- import { CProgress, CProgressBar, CButton } from '@coreui/react/src/index' diff --git a/packages/docs/content/4.4/components/sidebar.mdx b/packages/docs/content/4.4/components/sidebar.mdx index d80add08..cb554455 100644 --- a/packages/docs/content/4.4/components/sidebar.mdx +++ b/packages/docs/content/4.4/components/sidebar.mdx @@ -4,6 +4,7 @@ name: Sidebar description: menu: Components route: /components/sidebar +other_frameworks: sidebar --- import CIcon from '@coreui/icons-react' diff --git a/packages/docs/content/4.4/components/spinner.mdx b/packages/docs/content/4.4/components/spinner.mdx index 5ef646c7..a52c040b 100644 --- a/packages/docs/content/4.4/components/spinner.mdx +++ b/packages/docs/content/4.4/components/spinner.mdx @@ -4,6 +4,7 @@ name: Spinner description: Indicate the loading state of a component or page with CoreUI spinners, built entirely with HTML, CSS, and no JavaScript. menu: Components route: /components/spinner +other_frameworks: spinner --- import { CSpinner, CButton } from '@coreui/react/src/index' diff --git a/packages/docs/content/4.4/components/table.mdx b/packages/docs/content/4.4/components/table.mdx index 2cc907c4..0de83bf1 100644 --- a/packages/docs/content/4.4/components/table.mdx +++ b/packages/docs/content/4.4/components/table.mdx @@ -4,6 +4,7 @@ name: Table description: Documentation and examples for opt-in styling of tables. menu: Components route: /components/table +other_frameworks: table --- import { diff --git a/packages/docs/content/4.4/components/toast.mdx b/packages/docs/content/4.4/components/toast.mdx index 6d877952..6016f5af 100644 --- a/packages/docs/content/4.4/components/toast.mdx +++ b/packages/docs/content/4.4/components/toast.mdx @@ -4,6 +4,7 @@ name: Toast description: Push notifications to your visitors with a toast, a lightweight and easily customizable alert message. menu: Components route: /components/toast +other_frameworks: toast --- import { useState, useRef } from 'react' diff --git a/packages/docs/content/4.4/components/tooltip.mdx b/packages/docs/content/4.4/components/tooltip.mdx index 2b4f2343..458d50ba 100644 --- a/packages/docs/content/4.4/components/tooltip.mdx +++ b/packages/docs/content/4.4/components/tooltip.mdx @@ -2,9 +2,9 @@ title: React Tooltip Component name: Tooltip description: Documentation and examples for adding React Tooltips. - menu: Components route: /components/tooltip +other_frameworks: tooltip --- import { CTooltip, CButton, CLink } from '@coreui/react/src/index' diff --git a/packages/docs/content/4.4/forms/checkbox.mdx b/packages/docs/content/4.4/forms/checkbox.mdx index 4cac3e58..3f36e1db 100644 --- a/packages/docs/content/4.4/forms/checkbox.mdx +++ b/packages/docs/content/4.4/forms/checkbox.mdx @@ -4,6 +4,7 @@ name: Checkbox description: Create consistent cross-browser and cross-device checkboxes with our React checkbox components. menu: Forms route: /forms/checkbox +other_frameworks: checkbox --- import { useEffect, useRef } from 'react' diff --git a/packages/docs/content/4.4/forms/floating-labels.mdx b/packages/docs/content/4.4/forms/floating-labels.mdx index 23331d0c..ef5958f6 100644 --- a/packages/docs/content/4.4/forms/floating-labels.mdx +++ b/packages/docs/content/4.4/forms/floating-labels.mdx @@ -4,6 +4,7 @@ name: Floating labels description: React floating label component. Create beautifully simple form labels that float over your input fields. menu: Forms route: /forms/floating-labels +other_frameworks: floating-labels --- import { diff --git a/packages/docs/content/4.4/forms/input-group.mdx b/packages/docs/content/4.4/forms/input-group.mdx index cdf1b958..4c5be87b 100644 --- a/packages/docs/content/4.4/forms/input-group.mdx +++ b/packages/docs/content/4.4/forms/input-group.mdx @@ -4,6 +4,7 @@ name: Input group description: Easily extend form controls by adding text, buttons, or button groups on either side of textual inputs, custom selects, and custom file inputs. menu: Forms route: /forms/input-group +other_frameworks: input-group --- import { diff --git a/packages/docs/content/4.4/forms/input.mdx b/packages/docs/content/4.4/forms/input.mdx index cd1c1bce..376473d1 100644 --- a/packages/docs/content/4.4/forms/input.mdx +++ b/packages/docs/content/4.4/forms/input.mdx @@ -4,6 +4,7 @@ name: Form control description: React input components. Give textual form ``s an upgrade with custom styles, sizing, focus states, validation, and more. menu: Forms route: /forms/input +other_frameworks: input --- import { diff --git a/packages/docs/content/4.4/forms/radio.mdx b/packages/docs/content/4.4/forms/radio.mdx index 5d16eadf..fc41c748 100644 --- a/packages/docs/content/4.4/forms/radio.mdx +++ b/packages/docs/content/4.4/forms/radio.mdx @@ -4,6 +4,7 @@ name: Radio description: Create consistent cross-browser and cross-device radios with our React radio component. menu: Forms route: /forms/radio +other_frameworks: radio --- import { useEffect, useRef } from 'react' diff --git a/packages/docs/content/4.4/forms/range.mdx b/packages/docs/content/4.4/forms/range.mdx index c9dac9b0..9fe4ecce 100644 --- a/packages/docs/content/4.4/forms/range.mdx +++ b/packages/docs/content/4.4/forms/range.mdx @@ -4,6 +4,7 @@ name: Range description: React range component. Use our custom range inputs for consistent cross-browser styling and built-in customization. menu: Forms route: /forms/range +other_frameworks: range --- import { CForm, CFormLabel, CFormRange } from '@coreui/react/src/index' diff --git a/packages/docs/content/4.4/forms/select.mdx b/packages/docs/content/4.4/forms/select.mdx index 7c3d97ad..186e1aff 100644 --- a/packages/docs/content/4.4/forms/select.mdx +++ b/packages/docs/content/4.4/forms/select.mdx @@ -4,6 +4,7 @@ name: Select description: React select component. Customize the native ` diff --git a/packages/coreui-react/src/components/form/CInputGroup.tsx b/packages/coreui-react/src/components/form/CInputGroup.tsx index 05046473..eedd5169 100644 --- a/packages/coreui-react/src/components/form/CInputGroup.tsx +++ b/packages/coreui-react/src/components/form/CInputGroup.tsx @@ -15,15 +15,18 @@ export interface CInputGroupProps extends HTMLAttributes { export const CInputGroup = forwardRef( ({ children, className, size, ...rest }, ref) => { - const _className = classNames( - 'input-group', - { - [`input-group-${size}`]: size, - }, - className, - ) return ( -
+
{children}
) diff --git a/packages/coreui-react/src/components/form/CInputGroupText.tsx b/packages/coreui-react/src/components/form/CInputGroupText.tsx index d7a4008c..8f65c1da 100644 --- a/packages/coreui-react/src/components/form/CInputGroupText.tsx +++ b/packages/coreui-react/src/components/form/CInputGroupText.tsx @@ -16,9 +16,8 @@ export interface CInputGroupTextProps export const CInputGroupText = forwardRef( ({ children, className, component: Component = 'span', ...rest }, ref) => { - const _className = classNames('input-group-text', className) return ( - + {children} ) diff --git a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CForm.spec.tsx.snap b/packages/coreui-react/src/components/form/__tests__/__snapshots__/CForm.spec.tsx.snap index 7ee4f638..518a05bf 100644 --- a/packages/coreui-react/src/components/form/__tests__/__snapshots__/CForm.spec.tsx.snap +++ b/packages/coreui-react/src/components/form/__tests__/__snapshots__/CForm.spec.tsx.snap @@ -12,9 +12,7 @@ exports[`CForm customize 1`] = ` exports[`CForm example 1`] = `
-
+