feat: Add code view component

.github/ISSUE_TEMPLATE/2_feature_request.yaml

@@ -22,6 +22,5 @@ body:
         - label: I agree to follow this project's [Code of
             Conduct](https://github.com/cloudscape-design/components/blob/main/CODE_OF_CONDUCT.md)
           required: true
-        - label:
-            I checked the current issues on [this](https://github.com/cloudscape-design/code-view/issues) and
+        - label: I checked the current issues on [this](https://github.com/cloudscape-design/code-view/issues) and
             [main](https://github.com/cloudscape-design/components/issues) repositories for duplicate requests

.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

@@ -0,0 +1,139 @@
+{
+  "name": "@cloudscape-design/code-view",
+  "version": "3.0.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/cloudscape-design/code-view.git"
+  },
+  "homepage": "https://cloudscape.design",
+  "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 . && stylelint --ignore-path .gitignore '{src,pages}/**/*.{css,scss}'",
+    "prepare": "husky install",
+    "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.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",
+    "preview": "vite preview",
+    "start": "run-p start:server start:watch:ts start:watch:css",
+    "start:server": "vite",
+    "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:js": "tsc -p tsconfig.json",
+    "build:src:css": "node scripts/compile-styles.js",
+    "build:src:test-utils": "node scripts/test-utils.js",
+    "build:src:copy": "cp README.md lib/components/",
+    "build:src:docs": "node scripts/docs.js",
+    "build:src:environment": "node scripts/environment",
+    "build:pages:vite": "vite build",
+    "build:pages:tsc": "tsc -p pages/tsconfig.json"
+  },
+  "exports": {
+    ".": "./index.js",
+    "./code-view": "./code-view/index.js",
+    "./highlight": "./code-view/highlight/index.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",
+    "./internal/api-docs/*.js": "./internal/api-docs/*.js",
+    "./test-utils/dom": "./test-utils/dom/index.js",
+    "./test-utils/selectors": "./test-utils/selectors/index.js"
+  },
+  "dependencies": {
+    "ace-code": "^1.32.3",
+    "clsx": "^1.2.1"
+  },
+  "peerDependencies": {
+    "@cloudscape-design/components": "^3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@cloudscape-design/browser-test-tools": "^3.0.4",
+    "@cloudscape-design/components": "^3",
+    "@cloudscape-design/design-tokens": "^3",
+    "@cloudscape-design/documenter": "^1.0.0",
+    "@cloudscape-design/global-styles": "^1.0.1",
+    "@cloudscape-design/test-utils-converter": "^1.0.0",
+    "@cloudscape-design/theming-build": "^1",
+    "@testing-library/jest-dom": "^5.16.5",
+    "@testing-library/react": "^13.4.0",
+    "@types/jest-image-snapshot": "^6.1.0",
+    "@types/lodash": "^4.14.191",
+    "@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": "^4.2.1",
+    "@vitest/coverage-istanbul": "^1.1.1",
+    "chokidar-cli": "^3.0.0",
+    "eslint": "^8.31.0",
+    "eslint-config-prettier": "^8.6.0",
+    "eslint-plugin-header": "^3.1.1",
+    "eslint-plugin-import": "^2.26.0",
+    "eslint-plugin-no-unsanitized": "^4.0.2",
+    "eslint-plugin-prettier": "^4.2.1",
+    "eslint-plugin-react": "^7.31.11",
+    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-unicorn": "^45.0.2",
+    "execa": "^6.1.0",
+    "globby": "^13.1.3",
+    "husky": "^8.0.3",
+    "jest-image-snapshot": "^6.1.0",
+    "jsdom": "^20.0.3",
+    "lint-staged": "^13.1.0",
+    "lodash": "^4.17.21",
+    "lodash-es": "^4.17.21",
+    "npm-run-all": "^4.1.5",
+    "prettier": "^2.8.1",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "react-router-dom": "^6.6.1",
+    "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 typescript 4.9.4. It prints a warning, but works",
+  "overrides": {
+    "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/index.tsx

@@ -0,0 +1,45 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { HashRouter, Link, Route, Routes, useLocation } from "react-router-dom";
+import { pages } from "../pages";
+import Page from "./page";
+
+export default function App() {
+  return (
+    <HashRouter>
+      <Routes>
+        <Route path="/" element={<Start />} />
+        <Route path="/*" element={<PageWithFallback />} />
+      </Routes>
+    </HashRouter>
+  );
+}
+
+const Start = () => (
+  <>
+    <h1>Pages</h1>
+    <main>
+      <Index />
+    </main>
+  </>
+);
+
+const Index = () => (
+  <ul className="list">
+    {pages.map((page) => (
+      <li key={page}>
+        <Link to={`${page}`}>{page}</Link>
+      </li>
+    ))}
+  </ul>
+);
+
+const PageWithFallback = () => {
+  const { pathname: page } = useLocation();
+
+  if (!page || !page.includes(page)) {
+    return <span>Not Found</span>;
+  }
+
+  return <Page pageId={page} />;
+};

pages/app/page-layout.module.css

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

pages/app/page-layout.tsx

@@ -0,0 +1,19 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { ReactNode } from "react";
+
+import classnames from "./page-layout.module.css";
+
+export interface PageLayoutProps {
+  header?: ReactNode;
+  children?: ReactNode;
+}
+
+export default function PageLayout({ children, header }: PageLayoutProps) {
+  return (
+    <div className={classnames.content}>
+      <header>{header}</header>
+      <main>{children}</main>
+    </div>
+  );
+}

pages/app/page.tsx

@@ -0,0 +1,45 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { SpaceBetween, Toggle } from "@cloudscape-design/components";
+import { Density, Mode, applyDensity, applyMode } from "@cloudscape-design/global-styles";
+import { Suspense } from "react";
+import { useEffect, useState } from "react";
+import { pagesMap } from "../pages";
+import PageLayout from "./page-layout";
+
+export interface PageProps {
+  pageId: string;
+}
+
+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>
+          <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>
+    </PageLayout>
+  );
+}

pages/code-view/simple.page.tsx

@@ -0,0 +1,15 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { CodeView } from "../../lib/components";
+import { ScreenshotArea } from "../screenshot-area";
+export default function CodeViewPage() {
+  return (
+    <ScreenshotArea>
+      <h1>Code View</h1>
+      <main>
+        <CodeView content={"Hello World"} />
+      </main>
+    </ScreenshotArea>
+  );
+}

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 ariaLabel="Copy code" iconName="copy"></Button>} content={`Lorem Ipsum `} />
+          <CodeView
+            actions={<Button ariaLabel="Copy code" 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

@@ -0,0 +1,24 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+
+import { Button } from "@cloudscape-design/components";
+import { CodeView } from "../../lib/components";
+import javascriptHighlight from "../../lib/components/code-view/highlight/javascript";
+import { ScreenshotArea } from "../screenshot-area";
+
+export default function CodeViewPage() {
+  return (
+    <ScreenshotArea>
+      <h1>Code View</h1>
+      <main>
+        <CodeView
+          ariaLabel="Code snippet with all features enabled"
+          actions={<Button ariaLabel="Copy code">Copy</Button>}
+          content={`const hello = "np";\nconsole.log('Hello')\nfunction hello() {}\nthrow new Error()`}
+          lineNumbers={true}
+          highlight={javascriptHighlight}
+        />
+      </main>
+    </ScreenshotArea>
+  );
+}

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

@@ -0,0 +1,20 @@
+// 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";
+export default function CodeViewPage() {
+  return (
+    <ScreenshotArea>
+      <h1>Code View</h1>
+      <main>
+        <SpaceBetween direction="vertical" size="l">
+          <CodeView lineNumbers={true} content={`# Hello World`} />
+          <CodeView lineNumbers={true} content={`# Hello World\n\nThis is Cloudscape.`} />
+        </SpaceBetween>
+      </main>
+    </ScreenshotArea>
+  );
+}