Clean props (#1088)

* Make all props after id keyword only

* Reorder props and make docstrings consistent

* Some typos

* Update Table tests

Author: tcbegley

justfile

@@ -137,4 +137,10 @@ _move-generated-files:
         if file_.name in ("__init__.py", "_table.py", "_version.py", "icons.py", "themes.py"):
             continue
         filename = "__init__.py" if file_.name == "_imports_.py" else file_.name
-        file_.rename(file_.parent / "_components" / filename)
+        new_file = file_.parent / "_components" / filename
+        file_.rename(new_file)
+        # enforce keyword arguments only after the id argument
+        id_pattern = "        id: typing.Optional[str] = None,\n"
+        new_file.write_text(
+            new_file.read_text().replace(id_pattern, f"{id_pattern}{8 * ' '}*,\n")
+        )

src/components/accordion/Accordion.js

@@ -15,11 +15,11 @@ import {getLoadingState} from '../../private/util';
 function Accordion({
   children,
   active_item,
-  key,
-  class_name,
-  className,
   always_open = false,
   start_collapsed = false,
+  class_name,
+  className,
+  key,
   setProps,
   ...otherProps
 }) {
@@ -92,76 +92,56 @@ Accordion.dashPersistence = {
 
 Accordion.propTypes = {
   /**
-   * The ID of this component, used to identify dash components
-   * in callbacks. The ID needs to be unique across all of the
-   * components in an app.
-   */
-  id: PropTypes.string,
-
-  /**
-   * The children of this component
+   * The children of the Accordion.
    */
   children: PropTypes.node,
 
   /**
-   * Defines CSS styles which will override styles previously set.
-   */
-  style: PropTypes.object,
-
-  /**
-   * Often used with CSS to style elements with common properties.
+   * The ID of the Accordion.
    */
-  class_name: PropTypes.string,
-
-  /**
-   * **DEPRECATED** Use `class_name` instead.
-   *
-   * Often used with CSS to style elements with common properties.
-   */
-  className: PropTypes.string,
-
-  /**
-   * A unique identifier for the component, used to improve
-   * performance by React.js while rendering components
-   * See https://reactjs.org/docs/lists-and-keys.html for more info
-   */
-  key: PropTypes.string,
-
-  /**
-   * Renders accordion edge-to-edge with its parent container
-   */
-  flush: PropTypes.bool,
+  id: PropTypes.string,
 
   /**
    * The item_id of the currently active item. If item_id has not been specified
    * for the active item, this will default to item-i, where i is the index
    * (starting from 0) of the item.
    *
-   * If `always_open=True`, this needs to be a list of string IDs.
+   * If `always_open=True`, then active_item should be a list item_ids of all the
+   * currently open AccordionItems
    */
   active_item: PropTypes.oneOfType([
     PropTypes.string,
     PropTypes.arrayOf(PropTypes.string)
   ]),
 
   /**
-   * You can make accordion items stay open when another item is opened by
-   * using the always_open prop.
+   * If True, multiple items can be expanded at once.
    */
   always_open: PropTypes.bool,
 
   /**
-   * Set to True for all items to be collapsed initially.
+   * If True, all items will start collapsed.
    */
   start_collapsed: PropTypes.bool,
 
   /**
-   * Used to allow user interactions in this component to be persisted when
-   * the component - or the page - is refreshed. If `persisted` is truthy and
-   * hasn't changed from its previous value, a `value` that the user has
-   * changed while using the app will keep that change, as long as
-   * the new `value` also matches what was given originally.
-   * Used in conjunction with `persistence_type`.
+   * If True the Accordion will be rendered edge-to-edge within its parent container.
+   */
+  flush: PropTypes.bool,
+
+  /**
+   * Additional inline styles to apply to the Accordion
+   */
+  style: PropTypes.object,
+
+  /**
+   * Additional CSS class to apply to the Accordion.
+   */
+  class_name: PropTypes.string,
+
+  /**
+   * Used to allow user interactions to be persisted when the page is refreshed.
+   * See https://dash.plotly.com/persistence for more details
    */
   persistence: PropTypes.oneOfType([
     PropTypes.bool,
@@ -170,20 +150,34 @@ Accordion.propTypes = {
   ]),
 
   /**
-   * Properties whose user interactions will persist after refreshing the
-   * component or the page. Since only `value` is allowed this prop can
+   * Properties to persist. Since only `active_item` is supported, this prop can
    * normally be ignored.
    */
   persisted_props: PropTypes.arrayOf(PropTypes.oneOf(['active_item'])),
 
   /**
    * Where persisted user changes will be stored:
-   * memory: only kept in memory, reset on page refresh.
-   * local: window.localStorage, data is kept after the browser quit.
-   * session: window.sessionStorage, data is cleared once the browser quit.
+   * - memory: only kept in memory, reset on page refresh.
+   * - local: window.localStorage, data is kept after the browser quit.
+   * - session: window.sessionStorage, data is cleared once the browser quit.
    */
   persistence_type: PropTypes.oneOf(['local', 'session', 'memory']),
 
+  /**
+   * A unique identifier for the component, used to improve performance by React.js
+   * while rendering components
+   *
+   * See https://react.dev/learn/rendering-lists#why-does-react-need-keys for more info
+   */
+  key: PropTypes.string,
+
+  /**
+   * **DEPRECATED** Use `class_name` instead.
+   *
+   * Additional CSS class to apply to the Accordion.
+   */
+  className: PropTypes.string,
+
   /**
    * Dash-assigned callback that gets fired when the value changes.
    */

src/components/accordion/AccordionItem.js

@@ -11,12 +11,12 @@ import {getLoadingState, stringifyId} from '../../private/util';
  * A component to build up the children of the accordion.
  */
 function AccordionItem({
+  children,
+  id,
   title,
   item_id,
   class_name,
   className,
-  id,
-  children,
   ...otherProps
 }) {
   const {toggle, idx} = useContext(AccordionContext);
@@ -43,46 +43,49 @@ function AccordionItem({
 
 AccordionItem.propTypes = {
   /**
-   * The ID of this component, used to identify dash components
-   * in callbacks. The ID needs to be unique across all of the
-   * components in an app.
+   * The ID of the AccordionItem.
    */
   id: PropTypes.string,
 
   /**
-   * The children of this component
+   * The children of the AccordionItem.
    */
   children: PropTypes.node,
 
   /**
-   * Defines CSS styles which will override styles previously set.
+   * Text to display in the header of the AccordionItem.
+   */
+  title: PropTypes.node,
+
+  /**
+   * Optional identifier for item used for determining which item is visible if not
+   * specified, and AccordionItem is being used inside Accordion component, the item_id
+   * will be set to "item-i" where i is (zero indexed) position of item in list items
+   * passed to Accordion component.
+   */
+  item_id: PropTypes.string,
+
+  /**
+   * Additional inline CSS styles to apply to the AccordionItem.
    */
   style: PropTypes.object,
 
   /**
-   * Often used with CSS to style elements with common properties.
+   * Additional CSS classes to apply to the AccordionItem.
    */
   class_name: PropTypes.string,
 
   /**
    * **DEPRECATED** Use `class_name` instead.
    *
-   * Often used with CSS to style elements with common properties.
+   * Additional CSS classes to apply to the AccordionItem.
    */
   className: PropTypes.string,
 
   /**
-   * The title on display in the collapsed accordion item.
-   */
-  title: PropTypes.node,
-
-  /**
-   * Optional identifier for item used for determining which item is visible
-   * if not specified, and AccordionItem is being used inside Accordion component, the itemId
-   * will be set to "item-i" where i is (zero indexed) position of item in list
-   * items pased to Accordion component.
+   * Dash-assigned callback that gets fired when the value changes.
    */
-  item_id: PropTypes.string
+  setProps: PropTypes.func
 };
 
 export default AccordionItem;