[docs-app] Move examples to individual modules (#7538)

Author: ggdouglas

.prettierrc.json

@@ -16,6 +16,12 @@
                 "tabWidth": 2,
                 "printWidth": 100
             }
+        },
+        {
+            "files": ["packages/docs-app/src/examples/**/*.tsx"],
+            "options": {
+                "printWidth": 100
+            }
         }
     ]
 }

packages/docs-app/eslint.config.js

@@ -1,6 +1,11 @@
-const config = require("../../eslint.config.js");
+/* !
+ * (c) Copyright 2025 Palantir Technologies Inc. All rights reserved.
+ */
+
 const tseslint = require("typescript-eslint");
 
+const config = require("../../eslint.config.js");
+
 module.exports = tseslint.config([
     config,
     {
@@ -9,4 +14,13 @@ module.exports = tseslint.config([
             "react/jsx-no-bind": "off",
         },
     },
+    {
+        files: ["**/examples/**/*.{ts,tsx}"],
+        rules: {
+            "@typescript-eslint/no-deprecated": "off",
+            "header/header": "off",
+            "import/no-default-export": "off",
+            "no-console": "off",
+        },
+    },
 ]);

packages/docs-app/package.json

@@ -51,6 +51,7 @@
         "copy-webpack-plugin": "^12.0.2",
         "monaco-editor-webpack-plugin": "^7.1.0",
         "npm-run-all": "^4.1.5",
+        "raw-loader": "^4.0.2",
         "webpack-cli": "^5.1.4",
         "webpack-dev-server": "^4.15.1"
     },

packages/docs-app/src/examples/core-examples/alertExample.tsx

@@ -110,8 +110,8 @@ const FileErrorAlert: React.FC<AlertExampleProps> = ({
                 onClose={handleClose}
             >
                 <p>
-                    Couldn't create the file because the containing folder doesn't exist anymore. You will be redirected
-                    to your user folder.
+                    Couldn't create the file because the containing folder doesn't exist anymore.
+                    You will be redirected to your user folder.
                 </p>
             </Alert>
         </>
@@ -164,8 +164,8 @@ const FileDeletionAlert: React.FC<AlertExampleProps> = ({
                 onConfirm={handleConfirm}
             >
                 <p>
-                    Are you sure you want to move <b>filename</b> to Trash? You will be able to restore it later, but it
-                    will become private to you.
+                    Are you sure you want to move <b>filename</b> to Trash? You will be able to
+                    restore it later, but it will become private to you.
                 </p>
             </Alert>
         </>

packages/docs-app/src/examples/core-examples/breadcrumbs/BreadcrumbsBasic.tsx

@@ -0,0 +1,16 @@
+import { Breadcrumbs } from "@blueprintjs/core";
+
+export default function BreadcrumbsBasic() {
+    return (
+        <div>
+            <Breadcrumbs
+                items={[
+                    { text: "Blueprint" },
+                    { text: "Docs" },
+                    { text: "Components" },
+                    { text: "Breadcrumbs" },
+                ]}
+            />
+        </div>
+    );
+}

packages/docs-app/src/examples/core-examples/breadcrumbs/BreadcrumbsBasic.tsx.preview

@@ -0,0 +1,8 @@
+<Breadcrumbs
+    items={[
+        { text: "Blueprint" },
+        { text: "Docs" },
+        { text: "Components" },
+        { text: "Breadcrumbs" },
+    ]}
+/>

packages/docs-app/src/examples/core-examples/breadcrumbs/BreadcrumbsOverflow.tsx

@@ -0,0 +1,19 @@
+import { Breadcrumbs } from "@blueprintjs/core";
+
+export default function BreadcrumbsOverflow() {
+    return (
+        <div>
+            <Breadcrumbs
+                items={[
+                    { text: "All files" },
+                    { text: "Users" },
+                    { text: "Janet" },
+                    { text: "Photos" },
+                    { text: "Wednesday" },
+                    { current: true, text: "image.jpg" },
+                ]}
+                minVisibleItems={3}
+            />
+        </div>
+    );
+}

packages/docs-app/src/examples/core-examples/breadcrumbs/BreadcrumbsOverflow.tsx.preview

@@ -0,0 +1,11 @@
+<Breadcrumbs
+    items={[
+        { text: "All files" },
+        { text: "Users" },
+        { text: "Janet" },
+        { text: "Photos" },
+        { text: "Wednesday" },
+        { current: true, text: "image.jpg" },
+    ]}
+    minVisibleItems={3}
+/>

packages/docs-app/src/examples/core-examples/breadcrumbs/BreadcrumbsRenderer.tsx

@@ -0,0 +1,19 @@
+import { Breadcrumb, Breadcrumbs, Icon } from "@blueprintjs/core";
+
+export default function BreadcrumbsRenderer() {
+    return (
+        <Breadcrumbs
+            currentBreadcrumbRenderer={({ text, ...rest }) => (
+                <Breadcrumb {...rest}>
+                    {text}&nbsp;
+                    <Icon icon="star" />
+                </Breadcrumb>
+            )}
+            items={[
+                { href: "/users", icon: "folder-close", text: "Users" },
+                { href: "/users/janet", icon: "folder-close", text: "Janet" },
+                { icon: "document", text: "image.jpg" },
+            ]}
+        />
+    );
+}

packages/docs-app/src/examples/core-examples/breadcrumbs/BreadcrumbsRenderer.tsx.preview

@@ -0,0 +1,13 @@
+<Breadcrumbs
+    currentBreadcrumbRenderer={({ text, ...rest }) => (
+        <Breadcrumb {...rest}>
+            {text}&nbsp;
+            <Icon icon="star" />
+        </Breadcrumb>
+    )}
+    items={[
+        { href: "/users", icon: "folder-close", text: "Users" },
+        { href: "/users/janet", icon: "folder-close", text: "Janet" },
+        { icon: "document", text: "image.jpg" },
+    ]}
+/>