Make React examples work; Improving components and data attribute int…

…erface

all.ts

@@ -1,32 +1,14 @@
 import { create } from './index'
+import Popper from './popper'
+import * as components from './components'
 
-// These can be imported individually
-import Alert from './components/alert'
-import Button from './components/button'
-import Carousel from './components/carousel'
-import Collapse from './components/collapse'
-import Dropdown from './components/dropdown'
-import Modal from './components/modal'
-import Offcanvas from './components/offcanvas'
-import Popover from './components/popover'
-import ScrollSpy from './components/scrollspy'
-import Tab from './components/tab'
-import Toast from './components/toast'
-import Tooltip from './components/tooltip'
+const design =
+  typeof window === 'undefined'
+    ? {}
+    : create({
+        components: Object.assign(components, {
+          Popper,
+        }),
+      })
 
-create({
-  components: {
-    Alert,
-    Button,
-    Carousel,
-    Collapse,
-    Dropdown,
-    Modal,
-    Offcanvas,
-    Popover,
-    ScrollSpy,
-    Tab,
-    Toast,
-    Tooltip,
-  },
-})
+export default design

base.ts

@@ -22,6 +22,8 @@ export default function createBaseComponent({
 
       element = getElement(element)
       if (!element) {
+        console.warn('No element found for component', this.NAME)
+        console.trace()
         return
       }
 

components/dropdown.ts

@@ -87,7 +87,6 @@ export default function createDropdown({
   class Dropdown extends BaseComponent {
     constructor(element, config) {
       super(element, config)
-
       this._popper = null
       this._parent = this._element.parentNode // dropdown wrapper
       // TODO: v6 revert #37011 & change markup https://getbootstrap.com/docs/5.3/forms/input-group/
@@ -433,6 +432,8 @@ export default function createDropdown({
     }
 
     static dataApiKeydownHandler(event) {
+      console.log('dropdown instance', event)
+
       // If not an UP | DOWN | ESCAPE key => not a dropdown command
       // If input/textarea && if key is other than ESCAPE => not a dropdown command
 
@@ -461,7 +462,6 @@ export default function createDropdown({
           )
 
       const instance = Dropdown.getOrCreateInstance(getToggleButton)
-
       if (isUpOrDownEvent) {
         event.stopPropagation()
         instance.show()

components/images.scss

@@ -1,8 +1,8 @@
 // Responsive images (ensure images don't scale beyond their parents)
 //
 // This is purposefully opt-in via an explicit class rather than being the default for all `<img>`s.
-// We previously tried the "images are responsive by default" approach in Bootstrap v2,
-// and abandoned it in Bootstrap v3 because it breaks lots of third-party widgets (including Google Maps)
+// We previously tried the "images are responsive by default" approach in v2,
+// and abandoned it in v3 because it breaks lots of third-party widgets (including Google Maps)
 // which weren't expecting the images within themselves to be involuntarily resized.
 // See also https://github.com/twbs/bootstrap/issues/18178
 .#{$class-prefix}img-fluid {

components/index.ts

@@ -0,0 +1,12 @@
+export { default as Alert } from './alert'
+export { default as Button } from './button'
+export { default as Carousel } from './carousel'
+export { default as Collapse } from './collapse'
+export { default as Dropdown } from './dropdown'
+export { default as Modal } from './modal'
+export { default as Offcanvas } from './offcanvas'
+export { default as Popover } from './popover'
+export { default as ScrollSpy } from './scrollspy'
+export { default as Tab } from './tab'
+export { default as Toast } from './toast'
+export { default as Tooltip } from './tooltip'

components/modal.ts

@@ -65,7 +65,11 @@ export default function createModal({
 
   class Modal extends BaseComponent {
     constructor(element, config) {
+      console.log('ELEMENT', element)
       super(element, config)
+      if (!element) {
+        return
+      }
 
       this._dialog = SelectorEngine.findOne(SELECTOR_DIALOG, this._element)
       this._backdrop = this._initializeBackDrop()
@@ -361,6 +365,11 @@ export default function createModal({
     function (event) {
       const target = SelectorEngine.getElementFromSelector(this)
 
+      if (!target) {
+        console.warn('No target found for component', NAME)
+        return
+      }
+
       if (['A', 'AREA'].includes(this.tagName)) {
         event.preventDefault()
       }

components/navbar.scss

@@ -133,7 +133,7 @@
 // Responsive navbar
 //
 // Custom styles for responsive collapsing and toggling of navbar contents.
-// Powered by the collapse Bootstrap JavaScript plugin.
+// Powered by the collapse JavaScript plugin.
 
 // When collapsed, prevent the toggleable navbar contents from appearing in
 // the default flexbox row orientation. Requires the use of `flex-wrap: wrap`

components/tables.scss

@@ -1,5 +1,5 @@
 //
-// Basic Bootstrap table
+// Basic table
 //
 
 .#{$class-prefix}table {

components/tooltip.ts

@@ -193,7 +193,7 @@ export default function createTooltip({
       if (this._element.style.display === 'none') {
         throw new Error('Please use show on visible elements')
       }
-
+console.log('show tooltip', this._config, this._isWithContent() , this._isEnabled)
       if (!(this._isWithContent() && this._isEnabled)) {
         return
       }

core-global.ts

@@ -0,0 +1,9 @@
+import { create } from './index'
+
+const design = create({
+  // data- attributes are still prefixed
+  classPrefix: '',
+  components: {},
+})
+
+export default design

core-prefixed.ts

@@ -0,0 +1,7 @@
+import { create } from './index'
+
+const design = create({
+  components: {},
+})
+
+export default design

docs/lib/accordion.tsx

@@ -1,3 +1,5 @@
+import '@site/all' // Listens to events on data-t attributes
+
 export default function AccordionExample({
   prefix = 't-' // or ''
 }) {

docs/lib/badge.tsx

@@ -2,7 +2,10 @@ export default function BadgesExample({
   prefix = 't-' // or ''
 }) {
   return (
-    <>
+    <div style={{
+      display: 'flex',
+      gap: '.25rem',
+    }}>
       <span className={`${prefix}badge ${prefix}text-bg-primary`}>Primary</span>
       <span className={`${prefix}badge ${prefix}text-bg-secondary`}>Secondary</span>
       <span className={`${prefix}badge ${prefix}text-bg-success`}>Success</span>
@@ -11,6 +14,6 @@ export default function BadgesExample({
       <span className={`${prefix}badge ${prefix}text-bg-info`}>Info</span>
       <span className={`${prefix}badge ${prefix}text-bg-light`}>Light</span>
       <span className={`${prefix}badge ${prefix}text-bg-dark`}>Dark</span>
-    </>
+    </div>
   )
 }

docs/lib/buttons.tsx

@@ -2,7 +2,10 @@ export default function ButtonsExample({
   prefix = 't-' // or ''
 }) {
   return (
-    <>
+    <div style={{
+      display: 'flex',
+      gap: '.5rem',
+    }}>
       <button type='button' className={`${prefix}btn ${prefix}btn-primary`}>
         Primary
       </button>
@@ -31,6 +34,6 @@ export default function ButtonsExample({
       <button type='button' className={`${prefix}btn ${prefix}btn-link`}>
         Link
       </button>
-    </>
+    </div>
   )
 }

docs/lib/carousel.tsx

@@ -1,3 +1,7 @@
+import '@site/all' // Listens to events on data-t attributes
+import { placeholderImage300x150 } from '@site/utilities/placeholder'
+
+
 export default function Example({
   prefix = 't-' // or ''
 }) {
@@ -28,29 +32,29 @@ export default function Example({
         </div>
         <div className={`${prefix}carousel-inner`}>
           <div className={`${prefix}carousel-item ${prefix}active`}>
-            <img src='...' className={`${prefix}d-block ${prefix}w-100`} alt='...' />
+            <img src={placeholderImage300x150} className={`${prefix}d-block ${prefix}w-100`} alt='...' />
             <div className={`${prefix}carousel-caption ${prefix}d-none ${prefix}d-md-block`}>
               <h5>First slide label</h5>
               <p>
-                Some representative placeholder content for the first slide.
+                Placeholder content for the first slide.
               </p>
             </div>
           </div>
           <div className={`${prefix}carousel-item`}>
-            <img src='...' className={`${prefix}d-block ${prefix}w-100`} alt='...' />
+            <img src={placeholderImage300x150} className={`${prefix}d-block ${prefix}w-100`} alt='...' />
             <div className={`${prefix}carousel-caption ${prefix}d-none ${prefix}d-md-block`}>
               <h5>Second slide label</h5>
               <p>
-                Some representative placeholder content for the second slide.
+                Placeholder content for the second slide.
               </p>
             </div>
           </div>
           <div className={`${prefix}carousel-item`}>
-            <img src='...' className={`${prefix}d-block ${prefix}w-100`} alt='...' />
+            <img src={placeholderImage300x150} className={`${prefix}d-block ${prefix}w-100`} alt='...' />
             <div className={`${prefix}carousel-caption ${prefix}d-none ${prefix}d-md-block`}>
               <h5>Third slide label</h5>
               <p>
-                Some representative placeholder content for the third slide.
+                Placeholder content for the third slide.
               </p>
             </div>
           </div>

docs/lib/collapse.tsx

@@ -1,3 +1,5 @@
+import '@site/all' // Listens to events on data-t attributes
+
 export default function Example({
   prefix = 't-' // or ''
 }) {

docs/lib/dropdown.tsx

@@ -1,3 +1,5 @@
+import '@site/all' // Listens to events on data-t attributes
+
 export default function Dropdown({
   prefix = 't-' // or ''
 }) {

docs/lib/modal.tsx

@@ -1,3 +1,5 @@
+import '@site/all' // Listens to events on data-t attributes
+
 export default function Example({
   prefix = 't-', // or ''
 }) {
@@ -6,12 +8,13 @@ export default function Example({
       <button
         type='button'
         className={`${prefix}btn ${prefix}btn-primary`}
-        data-bs-toggle='modal'
+        data-t-toggle='modal'
         data-t-target='#exampleModal'
       >
         Launch demo modal
       </button>
       <div
+        id='exampleModal'
         className={`${prefix}modal ${prefix}fade`}
         tabIndex={-1}
         aria-labelledby='exampleModalLabel'
@@ -29,16 +32,18 @@ export default function Example({
               <button
                 type='button'
                 className={`${prefix}btn-close`}
-                data-bs-dismiss='modal'
+                data-t-dismiss='modal'
                 aria-label='Close'
               ></button>
             </div>
-            <div className={`${prefix}modal-body`}>...</div>
+            <div className={`${prefix}modal-body`}>
+              Description of modal content
+            </div>
             <div className={`${prefix}modal-footer`}>
               <button
                 type='button'
                 className={`${prefix}btn ${prefix}btn-secondary`}
-                data-bs-dismiss='modal'
+                data-t-dismiss='modal'
               >
                 Close
               </button>

docs/lib/navbar.tsx

@@ -1,3 +1,5 @@
+import '@site/all' // Listens to events on data-t attributes
+
 export default function Example({
   prefix = 't-', // or ''
 }) {

docs/lib/offcanvas.tsx

@@ -1,8 +1,14 @@
+import '@site/all' // Listens to events on data-t attributes
+
 export default function Example({
   prefix = 't-' // or ''
 }) {
   return (
     <>
+    <div style={{
+      display: 'flex',
+      gap: '.5rem',
+    }}>
       <a
         className={`${prefix}btn ${prefix}btn-primary`}
         data-t-toggle='offcanvas'
@@ -21,6 +27,7 @@ export default function Example({
       >
         Button with data-t-target
       </button>
+    </div>
 
       <div
         className={`${prefix}offcanvas ${prefix}offcanvas-start`}

docs/lib/placeholders.tsx

@@ -4,7 +4,11 @@ export default function Example({
   prefix = 't-', // or ''
 }) {
   return (
-    <>
+    <div style={{
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '2rem',
+    }}>
       <div className={`${prefix}card`}>
         <img
           src={placeholderImage300x150}
@@ -47,6 +51,6 @@ export default function Example({
           ></a>
         </div>
       </div>
-    </>
+    </div>
   )
 }