style: prettier the tsdoc

Author: logonoff

package-lock.json

@@ -17,7 +17,8 @@
   },
   "devDependencies": {
     "concurrently": "^9.2.1",
-    "prettier": "3.7.4"
+    "prettier": "3.7.4",
+    "prettier-plugin-jsdoc": "1.8.0"
   },
   "repository": {
     "type": "git",
@@ -33,5 +34,13 @@
     "workspaces/core",
     "workspaces/react",
     "workspaces/website"
-  ]
+  ],
+  "prettier": {
+    "plugins": [
+      "prettier-plugin-jsdoc"
+    ],
+    "tsdoc": true,
+    "jsdocSeparateTagGroups": true,
+    "jsdocPreferCodeFences": true
+  }
 }

package.json

@@ -1,6 +1,4 @@
-/**
- * @fileoverview Generates the banner SCSS file with the current version.
- */
+/** @file Generates the banner SCSS file with the current version. */
 
 import { readFileSync, writeFileSync } from "fs";
 

workspaces/core/scripts/generate-banner.js

@@ -1,7 +1,7 @@
 @use "../theme/base" as *;
 
 /*
- * Card
+ * Dialog
  */
 .#{$shale}dialog {
   --#{$shale}dialog-transition-duration: 0.125s;

workspaces/core/scss/components/_dialog.scss

@@ -29,8 +29,12 @@ $indeterminate: ".#{$shale}-indeterminate" !default;
   --#{$shale}font-1: calc(var(--#{$shale}font-0) * var(--#{$shale}font-scale));
   --#{$shale}font-0: 1rem;
   --#{$shale}font--1: calc(var(--#{$shale}font-0) / var(--#{$shale}font-scale));
-  --#{$shale}font--2: calc(var(--#{$shale}font--1) / var(--#{$shale}font-scale));
-  --#{$shale}font--3: calc(var(--#{$shale}font--2) / var(--#{$shale}font-scale));
+  --#{$shale}font--2: calc(
+    var(--#{$shale}font--1) / var(--#{$shale}font-scale)
+  );
+  --#{$shale}font--3: calc(
+    var(--#{$shale}font--2) / var(--#{$shale}font-scale)
+  );
 
   /* Shadows */
   --#{$shale}shadow-subtle: 0 2px 4px 0 rgba(0, 0, 0, 0.12);

workspaces/core/scss/theme/_base.scss

@@ -5,9 +5,9 @@
 "use strict";
 
 /**
- * toggles dark theme
+ * Toggles dark theme
  *
- * @param {Element} e element which has a .icon elem as a child
+ * @param {Element} e Element which has a .icon elem as a child
  */
 function toggleDark(e) {
   if (document.documentElement.classList.contains("shale-v1-dark")) {
@@ -22,9 +22,9 @@ function toggleDark(e) {
 }
 
 /**
- * toggles contrast theme
+ * Toggles contrast theme
  *
- * @param {Element} e element which has a .icon elem as a child
+ * @param {Element} e Element which has a .icon elem as a child
  */
 function toggleContrast(e) {
   if (document.documentElement.classList.contains("shale-v1-contrast")) {
@@ -39,9 +39,9 @@ function toggleContrast(e) {
 }
 
 /**
- * toggles larger text size
+ * Toggles larger text size
  *
- * @param {Element} e element which has a .icon elem as a child
+ * @param {Element} e Element which has a .icon elem as a child
  */
 function toggleTextSize(e) {
   if (document.documentElement.classList.contains("shale-v1-bigger-text")) {

workspaces/core/shalecss.js

@@ -15,8 +15,9 @@ export interface BaseButtonProps {
  * used to trigger actions when clicked.
  *
  * @example Simple Button
+ *
  * ```tsx
- * <Button variant="primary">Click Me</Button>
+ * <Button variant="primary">Click Me</Button>;
  * ```
  *
  * @alpha

workspaces/react/src/components/Button.tsx

@@ -8,8 +8,9 @@ import { css } from "../utils/css";
  * Use within a {@link CaptionMenu} to render multiple at once.
  *
  * @example Basic example
+ *
  * ```tsx
- * <CaptionButton>×</CaptionButton>
+ * <CaptionButton>×</CaptionButton>;
  * ```
  *
  * @alpha
@@ -29,6 +30,7 @@ export const CaptionButton: PolymorphicComponent<"button"> = ({
  * arranging them in a horizontal layout suitable for window controls.
  *
  * @example Window controls
+ *
  * ```tsx
  * <Header>
  *   <HeaderTitle>
@@ -39,7 +41,7 @@ export const CaptionButton: PolymorphicComponent<"button"> = ({
  *       <CaptionButton>×</CaptionButton>
  *     </CaptionMenu>
  *   </HeaderTitle>
- * </Header>
+ * </Header>;
  * ```
  *
  * @alpha

workspaces/react/src/components/CaptionButton.tsx

@@ -14,17 +14,25 @@ export interface CardProps {
  * card-like visual presentation with optional shadow variants.
  *
  * @example Basic usage
+ *
  * ```tsx
- * <Card shadow="moderate">This is a card with a moderate shadow</Card>
+ * <Card shadow="moderate">This is a card with a moderate shadow</Card>;
  * ```
  *
  * @example With different shadows
+ *
  * ```tsx
  * <FlexContainer variant="space-between">
- *   <Card flex="third" shadow="subtle">subtle shadows</Card>
- *   <Card flex="third" shadow="moderate">moderate shadows</Card>
- *   <Card flex="third" shadow="puffy">puffy shadows</Card>
- * </FlexContainer>
+ *   <Card flex="third" shadow="subtle">
+ *     subtle shadows
+ *   </Card>
+ *   <Card flex="third" shadow="moderate">
+ *     moderate shadows
+ *   </Card>
+ *   <Card flex="third" shadow="puffy">
+ *     puffy shadows
+ *   </Card>
+ * </FlexContainer>;
  * ```
  *
  * @alpha

workspaces/react/src/components/Card.tsx

@@ -11,16 +11,17 @@ export interface BaseCommandBarProps {
 }
 
 /**
- * The `CommandBar` component provides a container for command-based UI elements,
- * typically used for toolbars or action bars.
+ * The `CommandBar` component provides a container for command-based UI
+ * elements, typically used for toolbars or action bars.
  *
  * @example Basic usage
+ *
  * ```tsx
  * <CommandBar>
  *   <Button variant="secondary">Save</Button>
  *   <Button variant="secondary">Edit</Button>
  *   <Button variant="secondary">Delete</Button>
- * </CommandBar>
+ * </CommandBar>;
  * ```
  *
  * @alpha