docs(csblink): 📝 add support for multiple csb files

adaptui · Jul 21, 2022 · 2e62661 · 2e62661
1 parent 9e38545
commit 2e62661
Show file tree

Hide file tree

Showing 10 changed files with 434 additions and 290 deletions.
diff --git a/docs-templates/calendar.md b/docs-templates/calendar.md
@@ -21,13 +21,13 @@ navigaiton & focus management. Support all the features as React Aria's
 link_title: Calendar
 js: src/calendar/stories/templates/CalendarBasicJsx.ts
 css: src/calendar/stories/templates/CalendarBasicCss.ts
-utils: src/calendar/stories/templates/UtilsJsx.ts
+files: [src/calendar/stories/templates/UtilsJsx.ts]
 -->
 <!-- CODESANDBOX
 link_title: Calendar TS
 tsx: src/calendar/stories/templates/CalendarBasicTsx.ts
 css: src/calendar/stories/templates/CalendarBasicCss.ts
-utils: src/calendar/stories/templates/UtilsTsx.ts
+files: [src/calendar/stories/templates/UtilsTsx.ts]
 -->
 
 ### Range Calendar
@@ -79,13 +79,13 @@ Also we can customize and style the ranges with CSS attribute selectors
 link_title: Range Calendar
 js: src/calendar/stories/templates/CalendarRangeJsx.ts
 css: src/calendar/stories/templates/CalendarRangeCss.ts
-utils: src/calendar/stories/templates/UtilsJsx.ts
+files: [src/calendar/stories/templates/UtilsJsx.ts]
 -->
 <!-- CODESANDBOX
 link_title: Range Calendar TS
 tsx: src/calendar/stories/templates/CalendarRangeTsx.ts
 css: src/calendar/stories/templates/CalendarRangeCss.ts
-utils: src/calendar/stories/templates/UtilsTsx.ts
+files: [src/calendar/stories/templates/UtilsTsx.ts]
 -->
 
 ## Other Examples
@@ -94,26 +94,26 @@ utils: src/calendar/stories/templates/UtilsTsx.ts
 link_title: Calendar Styled
 js: src/calendar/stories/templates/CalendarStyledJsx.ts
 css: src/calendar/stories/templates/CalendarBasicCss.ts
-utils: src/calendar/stories/templates/UtilsJsx.ts
+files: [src/calendar/stories/templates/UtilsJsx.ts]
 -->
 <!-- CODESANDBOX
 link_title: Calendar Styled TS
 tsx: src/calendar/stories/templates/CalendarStyledTsx.ts
 css: src/calendar/stories/templates/CalendarBasicCss.ts
-utils: src/calendar/stories/templates/UtilsTsx.ts
+files: [src/calendar/stories/templates/UtilsTsx.ts]
 -->
 
 <!-- CODESANDBOX
 link_title: Calendar Range Styled
 js: src/calendar/stories/templates/CalendarRangeStyledJsx.ts
 css: src/calendar/stories/templates/CalendarRangeCss.ts
-utils: src/calendar/stories/templates/UtilsJsx.ts
+files: [src/calendar/stories/templates/UtilsJsx.ts]
 -->
 <!-- CODESANDBOX
 link_title: Calendar Range Styled TS
 tsx: src/calendar/stories/templates/CalendarRangeStyledTsx.ts
 css: src/calendar/stories/templates/CalendarRangeCss.ts
-utils: src/calendar/stories/templates/UtilsTsx.ts
+files: [src/calendar/stories/templates/UtilsTsx.ts]
 -->
 
 <!-- ADD_COMPOSITION src/calendar -->

diff --git a/docs-templates/datepicker.md b/docs-templates/datepicker.md
@@ -17,18 +17,30 @@ for the keyboard navigation & accessibility features.
 link_title: DatePicker
 js: src/datepicker/stories/templates/DatePickerBasicJsx.ts
 css: src/datepicker/stories/templates/DatePickerBasicCss.ts
-utils: src/datepicker/stories/templates/UtilsJsx.ts
+files: [src/datepicker/stories/templates/UtilsJsx.ts, src/calendar/stories/templates/CalendarBasicJsx.ts, src/datefield/stories/templates/DateFieldBasicJsx.ts]
+-->
+<!-- CODESANDBOX
+link_title: DatePicker TS
+tsx: src/datepicker/stories/templates/DatePickerBasicTsx.ts
+css: src/datepicker/stories/templates/DatePickerBasicCss.ts
+files: [src/datepicker/stories/templates/UtilsTsx.ts, src/calendar/stories/templates/CalendarBasicTsx.ts, src/datefield/stories/templates/DateFieldBasicTsx.ts]
 -->
 
 ### Range DatePicker
 
 <!-- ADD_EXAMPLE src/datepicker/stories/templates/DateRangePickerBasicJsx.ts -->
 
 <!-- CODESANDBOX
-link_title: RangeDatePicker
+link_title: DateRangePicker
 js: src/datepicker/stories/templates/DateRangePickerBasicJsx.ts
 css: src/datepicker/stories/templates/DateRangePickerBasicCss.ts
-utils: src/datepicker/stories/templates/UtilsJsx.ts
+files: [src/datepicker/stories/templates/UtilsJsx.ts, src/calendar/stories/templates/CalendarRangeJsx.ts, src/datefield/stories/templates/DateFieldBasicJsx.ts]
+-->
+<!-- CODESANDBOX
+link_title: DateRangePicker TS
+tsx: src/datepicker/stories/templates/DateRangePickerBasicTsx.ts
+css: src/datepicker/stories/templates/DateRangePickerBasicCss.ts
+files: [src/datepicker/stories/templates/UtilsTsx.ts, src/calendar/stories/templates/CalendarRangeTsx.ts, src/datefield/stories/templates/DateFieldBasicTsx.ts]
 -->
 
 <!-- ADD_COMPOSITION src/datepicker -->

diff --git a/docs/calendar.md b/docs/calendar.md
@@ -145,7 +145,7 @@ const CalendarCellComp = props => {
 };
 ```
 
-[![Edit CodeSandbox](https://img.shields.io/badge/Calendar-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/8etxc0)
+[![Edit CodeSandbox](https://img.shields.io/badge/Calendar-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/pi4t06)
 [![Edit CodeSandbox](https://img.shields.io/badge/Calendar%20TS-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/5by8vl)
 
 ### Range Calendar
@@ -193,15 +193,15 @@ Also we can customize and style the ranges with CSS attribute selectors
 }
 ```
 
-[![Edit CodeSandbox](https://img.shields.io/badge/Range%20Calendar-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/9mwysg)
+[![Edit CodeSandbox](https://img.shields.io/badge/Range%20Calendar-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/rjrv9x)
 [![Edit CodeSandbox](https://img.shields.io/badge/Range%20Calendar%20TS-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/uj6zx9)
 
 ## Other Examples
 
-[![Edit CodeSandbox](https://img.shields.io/badge/Calendar%20Styled-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/xwt87e)
+[![Edit CodeSandbox](https://img.shields.io/badge/Calendar%20Styled-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/4y954h)
 [![Edit CodeSandbox](https://img.shields.io/badge/Calendar%20Styled%20TS-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/5bivzk)
 
-[![Edit CodeSandbox](https://img.shields.io/badge/Calendar%20Range%20Styled-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/t8rnvf)
+[![Edit CodeSandbox](https://img.shields.io/badge/Calendar%20Range%20Styled-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/tlh7rw)
 [![Edit CodeSandbox](https://img.shields.io/badge/Calendar%20Range%20Styled%20TS-Open%20On%20CodeSandbox-%230971f1?style=for-the-badge&logo=codesandbox&labelColor=151515)](https://codesandbox.io/s/pjwlqp)
 
 ## Composition