feat: Add code view component

.stylelintrc

@@ -0,0 +1,12 @@
+{
+  "extends": ["stylelint-config-recommended-scss"],
+  "rules": {
+    "property-disallowed-list": ["border", "border-radius", "border-style", "margin", "padding"],
+    "scss/comment-no-empty": null,
+    "selector-pseudo-class-no-unknown": [true, { "ignorePseudoClasses": ["global"] }],
+    "selector-max-type": [0, { "ignore": ["compounded"] }],
+    "selector-max-universal": [0],
+    "order/order": ["rules"]
+  },
+  "plugins": ["stylelint-use-logical", "stylelint-order"]
+}

package.json

@@ -9,11 +9,11 @@
   "scripts": {
     "prebuild": "rm -rf lib dist .cache",
     "build": "npm-run-all build:pkg --parallel build:src:* --parallel build:pages:*",
-    "lint": "eslint --ignore-path .gitignore --ext ts,tsx,js .",
+    "lint": "eslint --ignore-path .gitignore --ext ts,tsx,js . && stylelint --ignore-path .gitignore '{src,pages}/**/*.{css,scss}'",
     "prepare": "husky install",
-    "test:unit": "vitest run --config vite.unit.config.js",
+    "test:unit": "vitest run --config vite.unit.config.mjs",
     "test:visual": "run-p -r preview test:visual:vitest",
-    "test:visual:vitest": "vitest run --config vite.e2e-visual.config.js",
+    "test:visual:vitest": "vitest run --config vite.e2e-visual.config.mjs",
     "test:visual:update": "UPDATE_SCREENSHOTS=true npm run test:visual",
     "pretest": "tsc -p tsconfig.unit.json && tsc -p tsconfig.e2e.json",
     "test": "run-s lint test:unit",
@@ -23,7 +23,6 @@
     "start:watch:ts": "tsc --watch",
     "start:watch:css": "chokidar \"./src/**/*.scss\" -c \"npm run build:src:css\"",
     "build:pkg": "node scripts/package-json.js",
-    "build:src:ace": "vite build --config vite.ace.config.js",
     "build:src:js": "tsc -p tsconfig.json",
     "build:src:css": "node scripts/compile-styles.js",
     "build:src:test-utils": "node scripts/test-utils.js",
@@ -37,15 +36,24 @@
     ".": "./index.js",
     "./code-view": "./code-view/index.js",
     "./highlight": "./code-view/highlight/index.js",
+    "./highlight/abap": "./code-view/highlight/abap.js",
+    "./highlight/cpp": "./code-view/highlight/cpp.js",
+    "./highlight/csharp": "./code-view/highlight/csharp.js",
     "./highlight/css": "./code-view/highlight/css.js",
+    "./highlight/go": "./code-view/highlight/go.js",
     "./highlight/html": "./code-view/highlight/html.js",
     "./highlight/java": "./code-view/highlight/java.js",
     "./highlight/javascript": "./code-view/highlight/javascript.js",
     "./highlight/json": "./code-view/highlight/json.js",
+    "./highlight/jsx": "./code-view/highlight/jsx.js",
+    "./highlight/kotlin": "./code-view/highlight/kotlin.js",
     "./highlight/markdown": "./code-view/highlight/markdown.js",
     "./highlight/php": "./code-view/highlight/php.js",
     "./highlight/python": "./code-view/highlight/python.js",
+    "./highlight/ruby": "./code-view/highlight/ruby.js",
+    "./highlight/rust": "./code-view/highlight/rust.js",
     "./highlight/sh": "./code-view/highlight/sh.js",
+    "./highlight/swift": "./code-view/highlight/swift.js",
     "./highlight/typescript": "./code-view/highlight/typescript.js",
     "./highlight/xml": "./code-view/highlight/xml.js",
     "./highlight/yaml": "./code-view/highlight/yaml.js",
@@ -54,7 +62,7 @@
     "./test-utils/selectors": "./test-utils/selectors/index.js"
   },
   "dependencies": {
-    "ace-code": "^1.32.1",
+    "ace-code": "^1.32.3",
     "clsx": "^1.2.1"
   },
   "peerDependencies": {
@@ -74,13 +82,13 @@
     "@testing-library/react": "^13.4.0",
     "@types/jest-image-snapshot": "^6.1.0",
     "@types/lodash": "^4.14.191",
-    "@types/node": "^16.0.0",
+    "@types/node": "^18.19.4",
     "@types/react": "^18.0.26",
     "@types/react-dom": "^18.0.10",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
     "@typescript-eslint/parser": "^5.48.0",
-    "@vitejs/plugin-react": "^3.0.0",
-    "@vitest/coverage-istanbul": "^0.28.3",
+    "@vitejs/plugin-react": "^4.2.1",
+    "@vitest/coverage-istanbul": "^1.1.1",
     "chokidar-cli": "^3.0.0",
     "eslint": "^8.31.0",
     "eslint-config-prettier": "^8.6.0",
@@ -104,18 +112,27 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.6.1",
-    "typescript": "^4.9.4",
-    "vite": "^4.0.5",
-    "vitest": "^0.34.6"
+    "stylelint": "^15.11.0",
+    "stylelint-config-recommended-scss": "^12.0.0",
+    "stylelint-order": "^6.0.3",
+    "stylelint-prettier": "^2.0.0",
+    "stylelint-scss": "^5.0.1",
+    "stylelint-use-logical": "^2.1.0",
+    "typescript": "4.9.4",
+    "vite": "^5.0.10",
+    "vitest": "^1.1.1"
   },
-  "//": "ensure that typedoc uses latest typescript. It prints a warning, but works",
+  "//": "ensure that typedoc uses typescript 4.9.4. It prints a warning, but works",
   "overrides": {
-    "typescript": "^4.9.4"
+    "typescript": "4.9.4"
   },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
       "eslint --fix"
     ],
+    "*.{scss,css}": [
+      "stylelint --fix"
+    ],
     "package-lock.json": [
       "./scripts/prepare-package-lock.js"
     ]

pages/app/page-layout.module.css

@@ -1,3 +1,4 @@
 .content {
-  padding: 20px;
+  padding-block: 20px;
+  padding-inline: 20px;
 }

pages/app/page.tsx

@@ -1,7 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 import { SpaceBetween, Toggle } from "@cloudscape-design/components";
-import { Mode, applyMode } from "@cloudscape-design/global-styles";
+import { Density, Mode, applyDensity, applyMode } from "@cloudscape-design/global-styles";
 import { Suspense } from "react";
 import { useEffect, useState } from "react";
 import { pagesMap } from "../pages";
@@ -14,19 +14,29 @@ export interface PageProps {
 export default function Page({ pageId }: PageProps) {
   const Component = pagesMap[pageId];
   const [dark, setDark] = useState(false);
+  const [compact, setCompact] = useState(false);
 
   useEffect(() => {
     applyMode(dark ? Mode.Dark : Mode.Light, document.documentElement);
   }, [dark]);
 
+  useEffect(() => {
+    applyDensity(compact ? Density.Compact : Density.Comfortable, document.documentElement);
+  }, [compact]);
+
   return (
     <PageLayout>
       <Suspense fallback="Loading">
         <SpaceBetween direction="vertical" size="m">
           <a href="/index.html#">Back to all pages</a>
-          <Toggle checked={dark} onChange={(event) => setDark(event.detail.checked)}>
-            Dark mode
-          </Toggle>
+          <SpaceBetween direction="horizontal" size="m">
+            <Toggle checked={dark} onChange={(event) => setDark(event.detail.checked)}>
+              Dark mode
+            </Toggle>
+            <Toggle checked={compact} onChange={(event) => setCompact(event.detail.checked)}>
+              Compact mode
+            </Toggle>
+          </SpaceBetween>
         </SpaceBetween>
         <Component />
       </Suspense>

pages/code-view/with-actions-button.page.tsx

@@ -0,0 +1,22 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Button, SpaceBetween } from "@cloudscape-design/components";
+import { CodeView } from "../../lib/components";
+import { ScreenshotArea } from "../screenshot-area";
+export default function CodeViewPage() {
+  return (
+    <ScreenshotArea>
+      <h1>Code View</h1>
+      <main>
+        <SpaceBetween direction="vertical" size="l">
+          <CodeView actions={<Button iconName="copy"></Button>} content={`Lorem Ipsum `} />
+          <CodeView
+            actions={<Button iconName="copy"></Button>}
+            content={`Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.`}
+          />
+        </SpaceBetween>
+      </main>
+    </ScreenshotArea>
+  );
+}

pages/code-view/with-all-features.page.tsx

@@ -12,7 +12,8 @@ export default function CodeViewPage() {
       <h1>Code View</h1>
       <main>
         <CodeView
-          copyButton={<Button>Copy</Button>}
+          ariaLabel="Code snippet with all features enabled"
+          actions={<Button>Copy</Button>}
           content={`const hello = "np";\nconsole.log('Hello')\nfunction hello() {}\nthrow new Error()`}
           lineNumbers={true}
           highlight={javascriptHighlight}

pages/code-view/with-line-numbers.page.tsx

@@ -1,6 +1,7 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
 
+import { SpaceBetween } from "@cloudscape-design/components";
 import { CodeView } from "../../lib/components";
 
 import { ScreenshotArea } from "../screenshot-area";
@@ -9,12 +10,10 @@ export default function CodeViewPage() {
     <ScreenshotArea>
       <h1>Code View</h1>
       <main>
-        <CodeView
-          content={`Hello
-          World
-          !`}
-          lineNumbers={true}
-        />
+        <SpaceBetween direction="vertical" size="l">
+          <CodeView lineNumbers={true} content={`# Hello World`} />
+          <CodeView lineNumbers={true} content={`# Hello World\n\nThis is Cloudscape.`} />
+        </SpaceBetween>
       </main>
     </ScreenshotArea>
   );

pages/code-view/with-syntax-highlighting.page.tsx

@@ -0,0 +1,57 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { SpaceBetween } from "@cloudscape-design/components";
+import { CodeView } from "../../lib/components";
+import cssHighlight from "../../lib/components/code-view/highlight/css";
+import htmlHighlight from "../../lib/components/code-view/highlight/html";
+import javaHighlight from "../../lib/components/code-view/highlight/java";
+import javascriptHighlight from "../../lib/components/code-view/highlight/javascript";
+import jsonHighlight from "../../lib/components/code-view/highlight/json";
+import markdownHighlight from "../../lib/components/code-view/highlight/markdown";
+import phpHighlight from "../../lib/components/code-view/highlight/php";
+import pythonHighlight from "../../lib/components/code-view/highlight/python";
+import shHighlight from "../../lib/components/code-view/highlight/sh";
+import typescriptHighlight from "../../lib/components/code-view/highlight/typescript";
+import xmlHighlight from "../../lib/components/code-view/highlight/xml";
+import yamlHighlight from "../../lib/components/code-view/highlight/yaml";
+
+import { ScreenshotArea } from "../screenshot-area";
+export default function CodeViewPage() {
+  return (
+    <ScreenshotArea>
+      <h1>Code View</h1>
+      <main>
+        <SpaceBetween direction="vertical" size="l">
+          JavaScript
+          <CodeView content={`const hello = "world";\nconsole.log(hello);`} highlight={javascriptHighlight} />
+          TypeScript
+          <CodeView content={`let hello: string = "world";\nconsole.log(hello);`} highlight={typescriptHighlight} />
+          XML
+          <CodeView content={`<greeting>Hello, world!</greeting>`} highlight={xmlHighlight} />
+          Markdown (MDX)
+          <CodeView content={`# Hello World\n\nThis is a markdown example.`} highlight={markdownHighlight} />
+          Bash (Shell Script)
+          <CodeView content={`echo "Hello, world!"`} highlight={shHighlight} />
+          CSS
+          <CodeView content={`body { background-color: lightblue; }`} highlight={cssHighlight} />
+          HTML
+          <CodeView content={`<h1>Hello, World!</h1>`} highlight={htmlHighlight} />
+          Java
+          <CodeView
+            content={`public class HelloWorld {\n    public static void main(String[] args) {\n        System.out.println("Hello, World!");\n    }\n}`}
+            highlight={javaHighlight}
+          />
+          JSON
+          <CodeView content={`{"greeting": "Hello, world!"}`} highlight={jsonHighlight} />
+          PHP
+          <CodeView content={`<?php\necho 'Hello, world!';\n?>`} highlight={phpHighlight} />
+          Python
+          <CodeView content={`print("Hello, World!")`} highlight={pythonHighlight} />
+          YAML
+          <CodeView content={`greeting: Hello, world!`} highlight={yamlHighlight} />
+        </SpaceBetween>
+      </main>
+    </ScreenshotArea>
+  );
+}

scripts/compile-styles.js

@@ -2,11 +2,13 @@
 // SPDX-License-Identifier: Apache-2.0
 import { ThemeBuilder, buildThemedComponentsInternal } from "@cloudscape-design/theming-build";
 
+// Generates scoped styles for the component
+// The output includes files like 'styles.css.js', 'styles.scoped.css', and 'styles.selectors.js'
 await buildThemedComponentsInternal({
-  primary: new ThemeBuilder("unused", ":root", []).build(),
-  componentsOutputDir: "lib/components",
-  skip: ["design-tokens", "preset"],
-  scssDir: "src",
-  variablesMap: {},
-  exposed: [],
+  primary: new ThemeBuilder("unused", ":root", []).build(), // "unused" as placeholder and ":root" for global style
+  componentsOutputDir: "lib/components", // sets the output directory for the processed styles
+  skip: ["design-tokens", "preset"], // skips generation of design tokens and presets
+  scssDir: "src", // sets the source directory for SCSS files
+  variablesMap: {}, // not needed - can be used for custom token-variable mappings
+  exposed: [], // not needed - can be used for exposing specific design tokens
 });

scripts/environment.js

@@ -20,7 +20,7 @@ writeFile(`${basePath}.json`, JSON.stringify(values, null, 2));
 writeFile(
   `${basePath}.js`,
   Object.entries(values)
-    .map(([key, value]) => `export var ${key} = ${JSON.stringify(value)};`)
+    .map(([key, value]) => `export const ${key} = ${JSON.stringify(value)};`)
     .join("\n")
 );
 writeFile(

scripts/prepare-package-lock.js

@@ -13,28 +13,20 @@ const require = createRequire(import.meta.url);
 const filename = require.resolve("../package-lock.json");
 const packageLock = require(filename);
 
-if (packageLock.lockfileVersion !== 2) {
-  throw new Error('package-lock.json must have "lockfileVersion": 2');
+if (packageLock.lockfileVersion !== 3) {
+  throw Error("package-lock.json file is not version 3. Use regular npm to update the packages.");
 }
 
-function unlock(packages) {
-  Object.keys(packages).forEach((dependencyName) => {
-    const dependency = packages[dependencyName];
-
-    if (dependencyName.includes("@cloudscape-design/")) {
-      delete packages[dependencyName];
-    } else if (dependency.resolved && dependency.resolved.includes("codeartifact.us-west-2.amazonaws.com")) {
-      throw Error(
-        "package-lock.json file contains a reference to CodeArtifact. Use regular npm to update the packages."
-      );
-    }
-  });
-
-  return packages;
-}
-
-packageLock.packages = unlock(packageLock.packages);
-packageLock.dependencies = unlock(packageLock.dependencies);
+Object.keys(packageLock.packages).forEach((dependencyName) => {
+  const dependency = packageLock.packages[dependencyName];
+  if (dependencyName.includes("@cloudscape-design/")) {
+    delete packageLock.packages[dependencyName];
+  } else if (dependency.resolved && dependency.resolved.indexOf("codeartifact.us-west-2.amazonaws.com") !== -1) {
+    throw Error(
+      `package-lock.json file contains a reference to CodeArtifact at ${dependencyName}. Use regular npm to update the packages.`
+    );
+  }
+});
 
 fs.writeFileSync(filename, JSON.stringify(packageLock, null, 2) + "\n");
 console.log("Removed @cloudscape-design/ dependencies from package-lock file");