@canonical/react-ds-app-launchpad 0.9.0-experimental.6 → 0.9.0-experimental.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (43) hide show
  1. package/dist/esm/ui/EditableBlock/Context.js +4 -0
  2. package/dist/esm/ui/EditableBlock/Context.js.map +1 -0
  3. package/dist/esm/ui/EditableBlock/EditableBlock.js +33 -0
  4. package/dist/esm/ui/EditableBlock/EditableBlock.js.map +1 -0
  5. package/dist/esm/ui/EditableBlock/EditableBlock.test.js +57 -0
  6. package/dist/esm/ui/EditableBlock/EditableBlock.test.js.map +1 -0
  7. package/dist/esm/ui/EditableBlock/hooks/index.js +2 -0
  8. package/dist/esm/ui/EditableBlock/hooks/index.js.map +1 -0
  9. package/dist/esm/ui/EditableBlock/hooks/useEditableBlock.js +11 -0
  10. package/dist/esm/ui/EditableBlock/hooks/useEditableBlock.js.map +1 -0
  11. package/dist/esm/ui/EditableBlock/index.js +3 -0
  12. package/dist/esm/ui/EditableBlock/index.js.map +1 -0
  13. package/dist/esm/ui/EditableBlock/styles.css +41 -0
  14. package/dist/esm/ui/EditableBlock/types.js +2 -0
  15. package/dist/esm/ui/EditableBlock/types.js.map +1 -0
  16. package/dist/esm/ui/FileTree/common/File/styles.css +4 -0
  17. package/dist/esm/ui/FileTree/common/Folder/styles.css +4 -0
  18. package/dist/esm/ui/FileTree/common/IndentationBlock/styles.css +32 -0
  19. package/dist/esm/ui/FileTree/common/Node/styles.css +60 -0
  20. package/dist/esm/ui/FileTree/common/SearchBox/styles.css +61 -0
  21. package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/HighlighTheme.css +172 -0
  22. package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/common/DiffLine/styles.css +111 -0
  23. package/dist/esm/ui/GitDiffViewer/common/CodeDiffViewer/styles.css +39 -0
  24. package/dist/esm/ui/GitDiffViewer/common/FileHeader/styles.css +75 -0
  25. package/dist/esm/ui/index.js +3 -0
  26. package/dist/esm/ui/index.js.map +1 -1
  27. package/dist/types/ui/EditableBlock/Context.d.ts +4 -0
  28. package/dist/types/ui/EditableBlock/Context.d.ts.map +1 -0
  29. package/dist/types/ui/EditableBlock/EditableBlock.d.ts +10 -0
  30. package/dist/types/ui/EditableBlock/EditableBlock.d.ts.map +1 -0
  31. package/dist/types/ui/EditableBlock/EditableBlock.test.d.ts +2 -0
  32. package/dist/types/ui/EditableBlock/EditableBlock.test.d.ts.map +1 -0
  33. package/dist/types/ui/EditableBlock/hooks/index.d.ts +2 -0
  34. package/dist/types/ui/EditableBlock/hooks/index.d.ts.map +1 -0
  35. package/dist/types/ui/EditableBlock/hooks/useEditableBlock.d.ts +4 -0
  36. package/dist/types/ui/EditableBlock/hooks/useEditableBlock.d.ts.map +1 -0
  37. package/dist/types/ui/EditableBlock/index.d.ts +3 -0
  38. package/dist/types/ui/EditableBlock/index.d.ts.map +1 -0
  39. package/dist/types/ui/EditableBlock/types.d.ts +24 -0
  40. package/dist/types/ui/EditableBlock/types.d.ts.map +1 -0
  41. package/dist/types/ui/index.d.ts +3 -0
  42. package/dist/types/ui/index.d.ts.map +1 -1
  43. package/package.json +3 -3
@@ -0,0 +1,4 @@
1
+ import { createContext } from "react";
2
+ const EditingContext = createContext(undefined);
3
+ export default EditingContext;
4
+ //# sourceMappingURL=Context.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Context.js","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/Context.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,OAAO,CAAC;AAGtC,MAAM,cAAc,GAAG,aAAa,CAAiC,SAAS,CAAC,CAAC;AAEhF,eAAe,cAAc,CAAC"}
@@ -0,0 +1,33 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { useCallback, useRef, useState } from "react";
3
+ import EditingContext from "./Context.js";
4
+ import "./styles.css";
5
+ /**
6
+ * Component that renders toggling edit mode block
7
+ * @returns {React.ReactElement} - Rendered EditableBlock
8
+ */
9
+ const EditableBlock = ({ id, EditComponent, className: userClassName, style, title, tag: TitleTag = "h3", }) => {
10
+ const [isEditing, setIsEditing] = useState(false);
11
+ const isFocusedRef = useRef(false);
12
+ const toggleEditing = useCallback(() => {
13
+ setIsEditing((editing) => !editing);
14
+ }, []);
15
+ const handleBlur = useCallback(() => {
16
+ isFocusedRef.current = false;
17
+ }, []);
18
+ const handleFocus = useCallback(() => {
19
+ isFocusedRef.current = true;
20
+ }, []);
21
+ const handleKeyUp = useCallback((event) => {
22
+ if ((isFocusedRef.current && event.key === "Enter") ||
23
+ event.key === " ") {
24
+ toggleEditing();
25
+ }
26
+ }, [toggleEditing]);
27
+ const componentCssClassName = "ds editable-block";
28
+ return (_jsx(EditingContext.Provider, { value: { isEditing, toggleEditing }, children: _jsxs("div", { className: [componentCssClassName, userClassName]
29
+ .filter(Boolean)
30
+ .join(" "), style: style, id: id, children: [_jsxs("header", { children: [_jsx(TitleTag, { className: "title", children: title }), _jsx("div", { className: `icon ${isEditing ? "icon-close" : "icon-edit"}`, onClick: toggleEditing, onKeyUp: handleKeyUp, onBlur: handleBlur, onFocus: handleFocus, role: "button", tabIndex: 0 })] }), _jsx("div", { className: "content", children: EditComponent && (_jsx(EditComponent, { ...{ isEditing, toggleEditing } })) })] }) }));
31
+ };
32
+ export default EditableBlock;
33
+ //# sourceMappingURL=EditableBlock.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"EditableBlock.js","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/EditableBlock.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEtD,OAAO,cAAc,MAAM,cAAc,CAAC;AAG1C,OAAO,cAAc,CAAC;AAEtB;;;GAGG;AAEH,MAAM,aAAa,GAAG,CAA6B,EACjD,EAAE,EACF,aAAa,EACb,SAAS,EAAE,aAAa,EACxB,KAAK,EACL,KAAK,EACL,GAAG,EAAE,QAAQ,GAAG,IAAI,GACE,EAAsB,EAAE;IAC9C,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,QAAQ,CAAU,KAAK,CAAC,CAAC;IAC3D,MAAM,YAAY,GAAG,MAAM,CAAU,KAAK,CAAC,CAAC;IAE5C,MAAM,aAAa,GAAG,WAAW,CAAC,GAAG,EAAE;QACrC,YAAY,CAAC,CAAC,OAAO,EAAE,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC;IACtC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,UAAU,GAAG,WAAW,CAAC,GAAG,EAAE;QAClC,YAAY,CAAC,OAAO,GAAG,KAAK,CAAC;IAC/B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,WAAW,CAAC,GAAG,EAAE;QACnC,YAAY,CAAC,OAAO,GAAG,IAAI,CAAC;IAC9B,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,WAAW,GAAG,WAAW,CAC7B,CAAC,KAA0B,EAAE,EAAE;QAC7B,IACE,CAAC,YAAY,CAAC,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,CAAC;YAC/C,KAAK,CAAC,GAAG,KAAK,GAAG,EACjB,CAAC;YACD,aAAa,EAAE,CAAC;QAClB,CAAC;IACH,CAAC,EACD,CAAC,aAAa,CAAC,CAChB,CAAC;IAEF,MAAM,qBAAqB,GAAG,mBAAmB,CAAC;IAElD,OAAO,CACL,KAAC,cAAc,CAAC,QAAQ,IAAC,KAAK,EAAE,EAAE,SAAS,EAAE,aAAa,EAAE,YAC1D,eACE,SAAS,EAAE,CAAC,qBAAqB,EAAE,aAAa,CAAC;iBAC9C,MAAM,CAAC,OAAO,CAAC;iBACf,IAAI,CAAC,GAAG,CAAC,EACZ,KAAK,EAAE,KAAK,EACZ,EAAE,EAAE,EAAE,aAEN,6BACE,KAAC,QAAQ,IAAC,SAAS,EAAC,OAAO,YAAE,KAAK,GAAY,EAC9C,cACE,SAAS,EAAE,QAAQ,SAAS,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,WAAW,EAAE,EAC3D,OAAO,EAAE,aAAa,EACtB,OAAO,EAAE,WAAW,EACpB,MAAM,EAAE,UAAU,EAClB,OAAO,EAAE,WAAW,EACpB,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,GACX,IACK,EACT,cAAK,SAAS,EAAC,SAAS,YACrB,aAAa,IAAI,CAChB,KAAC,aAAa,OAAM,EAAE,SAAS,EAAE,aAAa,EAAQ,GAAI,CAC3D,GACG,IACF,GACkB,CAC3B,CAAC;AACJ,CAAC,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -0,0 +1,57 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ /* @canonical/generator-ds 0.8.0-experimental.0 */
3
+ import { fireEvent, render, screen } from "@testing-library/react";
4
+ import { describe, expect, it } from "vitest";
5
+ import EditableBlock from "./EditableBlock.js";
6
+ import { useEditableBlock } from "./hooks/useEditableBlock.js";
7
+ const SampleEditComponent = () => {
8
+ return _jsx("div", { children: "Sample" });
9
+ };
10
+ describe("EditableBlock component", () => {
11
+ it("renders children content", () => {
12
+ render(_jsx(EditableBlock, { title: "Hello world!", EditComponent: SampleEditComponent }));
13
+ const sampleElement = screen.getByText("Sample");
14
+ expect(sampleElement).not.toBeNull();
15
+ expect(document.body.contains(sampleElement)).toBe(true);
16
+ });
17
+ it("toggles editing state when icon is clicked", () => {
18
+ render(_jsx(EditableBlock, { title: "Hello world!", EditComponent: SampleEditComponent }));
19
+ const editIcon = screen.getByRole("button");
20
+ fireEvent.click(editIcon);
21
+ expect(editIcon.classList.contains("icon-close")).toBe(true);
22
+ fireEvent.click(editIcon);
23
+ expect(editIcon.classList.contains("icon-edit")).toBe(true);
24
+ });
25
+ it("toggles editing state when Enter key is pressed", () => {
26
+ render(_jsx(EditableBlock, { title: "Hello world!", EditComponent: SampleEditComponent }));
27
+ const editIcon = screen.getByRole("button");
28
+ fireEvent.keyUp(editIcon, { key: "Enter", code: "Enter", charCode: 13 });
29
+ expect(editIcon.classList.contains("icon-close")).toBe(true);
30
+ fireEvent.keyUp(editIcon, { key: "Enter", code: "Enter", charCode: 13 });
31
+ expect(editIcon.classList.contains("icon-edit")).toBe(true);
32
+ });
33
+ it("toggles editing state when Space key is pressed", () => {
34
+ render(_jsx(EditableBlock, { title: "Hello world!", EditComponent: SampleEditComponent }));
35
+ const editIcon = screen.getByRole("button");
36
+ fireEvent.keyUp(editIcon, { key: " ", code: "Space", charCode: 32 });
37
+ expect(editIcon.classList.contains("icon-close")).toBe(true);
38
+ fireEvent.keyUp(editIcon, { key: " ", code: "Space", charCode: 32 });
39
+ expect(editIcon.classList.contains("icon-edit")).toBe(true);
40
+ });
41
+ it("provides editing context to children", () => {
42
+ const ChildComponent = () => {
43
+ const { isEditing } = useEditableBlock();
44
+ return _jsx("div", { children: isEditing ? "Editing" : "Not Editing" });
45
+ };
46
+ render(_jsx(EditableBlock, { title: "Hello world!", EditComponent: ChildComponent }));
47
+ const notEditingElement = screen.getByText("Not Editing");
48
+ expect(notEditingElement).not.toBeNull();
49
+ expect(document.body.contains(notEditingElement)).toBe(true);
50
+ const editIcon = screen.getByRole("button");
51
+ fireEvent.click(editIcon);
52
+ const editingElement = screen.getByText("Editing");
53
+ expect(editingElement).not.toBeNull();
54
+ expect(document.body.contains(editingElement)).toBe(true);
55
+ });
56
+ });
57
+ //# sourceMappingURL=EditableBlock.test.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"EditableBlock.test.js","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/EditableBlock.test.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,2 @@
1
+ export * from "./useEditableBlock.js";
2
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/ui/EditableBlock/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}
@@ -0,0 +1,11 @@
1
+ import { useContext } from "react";
2
+ import EditingContext from "../Context.js";
3
+ export const useEditableBlock = () => {
4
+ const context = useContext(EditingContext);
5
+ if (!context) {
6
+ throw new Error("useEditing cannot be used directly.");
7
+ }
8
+ return context;
9
+ };
10
+ export default useEditableBlock;
11
+ //# sourceMappingURL=useEditableBlock.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useEditableBlock.js","sourceRoot":"","sources":["../../../../../src/ui/EditableBlock/hooks/useEditableBlock.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACnC,OAAO,cAAc,MAAM,eAAe,CAAC;AAG3C,MAAM,CAAC,MAAM,gBAAgB,GAAG,GAAuB,EAAE;IACvD,MAAM,OAAO,GAAG,UAAU,CAAC,cAAc,CAAC,CAAC;IAC3C,IAAI,CAAC,OAAO,EAAE,CAAC;QACb,MAAM,IAAI,KAAK,CAAC,qCAAqC,CAAC,CAAC;IACzD,CAAC;IACD,OAAO,OAAO,CAAC;AACjB,CAAC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
@@ -0,0 +1,3 @@
1
+ /* @canonical/generator-ds 0.8.0-experimental.0 */
2
+ export { default as EditableBlock } from "./EditableBlock.js";
3
+ //# sourceMappingURL=index.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/index.ts"],"names":[],"mappings":"AAAA,kDAAkD;AAClD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC"}
@@ -0,0 +1,41 @@
1
+ .ds.editable-block {
2
+ --editable-block-header-icon-size: 16px;
3
+ --editable-block-header-icon-edit-url: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M14 13.25v1.5H2v-1.5h12zM11.907 1.676l.58.58a2 2 0 010 2.829l-5.133 5.133c-.038.038-.079.073-.122.104l.01.008a3.77 3.77 0 01-1.718.983l-3.52.914.863-3.583c.138-.57.41-1.099.795-1.54l.17-.183.01.01c.03-.043.065-.084.103-.122l5.133-5.133a2 2 0 012.829 0zm-3.309 2.6L5.036 7.84l-.593.82 1.062 1.063.814-.591 3.567-3.568-1.288-1.288zm1.61-1.597l-.07.057-.479.48 1.288 1.288.48-.48a.5.5 0 00.057-.638l-.057-.069-.581-.58a.5.5 0 00-.638-.058z' fill='%23000000' fill-rule='nonzero'/%3E%3C/svg%3E");
4
+ --editable-block-header-icon-close-url: url("data:image/svg+xml,%3Csvg width='16' height='16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23000000' fill-rule='nonzero' d='M13.041 1.898l1.06 1.06L9.062 8l5.04 5.042-1.06 1.06L8 9.062 2.96 14.1l-1.06-1.06L6.938 8 1.9 2.96l1.06-1.06 5.04 5.04z'/%3E%3C/svg%3E");
5
+ --editable-block-header-title-font-weight: 550;
6
+
7
+ > header {
8
+ display: flex;
9
+ justify-content: space-between;
10
+ align-items: center;
11
+
12
+ > .icon {
13
+ width: var(--editable-block-header-icon-size);
14
+ height: var(--editable-block-header-icon-size);
15
+ background-size: contain;
16
+ background-repeat: no-repeat;
17
+ cursor: pointer;
18
+ }
19
+
20
+ > .icon-edit {
21
+ background-image: var(--editable-block-header-icon-edit-url);
22
+ }
23
+
24
+ > .icon-close {
25
+ background-image: var(--editable-block-header-icon-close-url);
26
+ }
27
+
28
+ > .title {
29
+ flex: 1;
30
+ text-align: left;
31
+ font-weight: var(--editable-block-header-title-font-weight);
32
+ }
33
+ }
34
+
35
+ > .content {
36
+ flex-grow: 1;
37
+ display: flex;
38
+ justify-content: center;
39
+ align-items: center;
40
+ }
41
+ }
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=types.js.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/types.ts"],"names":[],"mappings":""}
@@ -0,0 +1,4 @@
1
+ /* @canonical/generator-ds 0.9.0-experimental.4 */
2
+ /*
3
+ .ds.node.file {
4
+ } */
@@ -0,0 +1,4 @@
1
+ /* @canonical/generator-ds 0.9.0-experimental.4 */
2
+ /*
3
+ .ds.node.folder {
4
+ } */
@@ -0,0 +1,32 @@
1
+ /* @canonical/generator-ds 0.9.0-experimental.4 */
2
+
3
+ .ds.indentation-block {
4
+ display: inline-flex;
5
+ gap: var(--file-tree-node-items-gap);
6
+ align-items: center;
7
+ user-select: none;
8
+
9
+ & > .indent-block {
10
+ width: var(--file-tree-node-indent-width);
11
+ position: relative;
12
+ isolation: isolate;
13
+
14
+ padding: var(--file-tree-node-vertical-padding) 0;
15
+ &:not(.empty)::before {
16
+ content: "";
17
+ display: block;
18
+ position: absolute;
19
+ left: 50%;
20
+ top: 0;
21
+ bottom: 0;
22
+ transform: translateX(-50%);
23
+ width: var(--file-tree-node-indent-bar-width);
24
+ height: 100%;
25
+ background-color: var(--file-tree-node-indent-bar-color);
26
+ }
27
+ }
28
+ &:has(> .indent-block.empty) {
29
+ width: 0;
30
+ margin-left: calc(-1 * var(--file-tree-node-items-gap));
31
+ }
32
+ }
@@ -0,0 +1,60 @@
1
+ .ds.node {
2
+ list-style: none;
3
+ display: flex;
4
+ gap: var(--file-tree-node-items-gap);
5
+ align-items: center;
6
+ /* vertical padding is set on the indentation level */
7
+ padding: 0 var(--file-tree-node-horizontal-padding);
8
+ cursor: default;
9
+ color: var(--file-tree-node-text-color-default);
10
+
11
+ /* When the list is interactive we change colors on interactions */
12
+ &.selectable,
13
+ &.expandable {
14
+ cursor: pointer;
15
+ &:focus,
16
+ &:hover {
17
+ background-color: var(--file-tree-node-background-color-hover);
18
+ }
19
+ &:focus {
20
+ outline: 1px solid var(--file-tree-node-focus-outline-color);
21
+ outline-offset: -1px;
22
+ color: var(--file-tree-node-text-color-active);
23
+ & > .icon {
24
+ filter: opacity(1);
25
+ }
26
+ }
27
+ }
28
+
29
+ /* When the list is static we apply active colors */
30
+ &:not(.selectable):not(.expandable) {
31
+ color: var(--file-tree-node-text-color-active);
32
+ & > .icon {
33
+ filter: opacity(1);
34
+ }
35
+ }
36
+
37
+ & > .icon {
38
+ user-select: none;
39
+ width: var(--file-tree-node-icon-size);
40
+ filter: opacity(0.6);
41
+ &.file {
42
+ content: var(--file-tree-node-file-icon);
43
+ }
44
+ &.folder {
45
+ content: var(--file-tree-node-closed-folder-icon);
46
+ &.expanded {
47
+ content: var(--file-tree-node-opened-folder-icon);
48
+ }
49
+ }
50
+ }
51
+ & > .nodename {
52
+ flex: 1;
53
+ white-space: nowrap;
54
+ overflow: hidden;
55
+ text-overflow: ellipsis;
56
+ }
57
+ & > .marker {
58
+ display: inline-block;
59
+ }
60
+ }
@@ -0,0 +1,61 @@
1
+ /* @canonical/generator-ds 0.9.0-experimental.4 */
2
+
3
+ .ds.search-box {
4
+ display: flex;
5
+ align-items: center;
6
+ border-bottom: 1px solid var(--file-tree-search-box-border-color);
7
+ padding: var(--file-tree-search-box-vertical-padding)
8
+ var(--file-tree-search-box-horizontal-padding);
9
+ &:has(.input:focus) {
10
+ outline: 2px solid -webkit-focus-ring-color;
11
+ outline-offset: -2px;
12
+ box-sizing: border-box;
13
+ }
14
+ & > .input {
15
+ flex: 1 1 100%;
16
+
17
+ vertical-align: baseline;
18
+ font-size: 1rem;
19
+ line-height: var(--file-tree-search-box-line-height);
20
+ }
21
+
22
+ & > .input:not(:valid) ~ .reset {
23
+ display: none;
24
+ }
25
+ & > .search,
26
+ & > .reset {
27
+ cursor: pointer;
28
+ width: var(--file-tree-search-box-button-size);
29
+ height: var(--file-tree-search-box-button-size);
30
+ display: inline-flex;
31
+ align-items: center;
32
+ justify-content: center;
33
+ background-color: transparent;
34
+ border: none;
35
+ }
36
+ & > .search > .icon {
37
+ content: var(--file-tree-search-box-search-icon);
38
+ }
39
+
40
+ & > .reset > .icon {
41
+ content: var(--file-tree-search-box-reset-icon);
42
+ }
43
+
44
+ /* remove search input default appearance */
45
+ & > .input {
46
+ border: none;
47
+ background-color: transparent;
48
+ &::-webkit-search-cancel-button {
49
+ appearance: none;
50
+ }
51
+ &:-webkit-autofill,
52
+ &:-webkit-autofill:hover,
53
+ &:-internal-autofill-selected,
54
+ &:active,
55
+ &:focus {
56
+ background-color: transparent;
57
+ border-color: transparent;
58
+ outline: none;
59
+ }
60
+ }
61
+ }
@@ -0,0 +1,172 @@
1
+ .ds.code-diff-viewer {
2
+ .hljs {
3
+ display: block;
4
+ overflow-x: auto;
5
+ padding: 0.5em;
6
+
7
+ color: #000000;
8
+ background: #0d1117;
9
+ }
10
+
11
+ .hljs-comment,
12
+ .hljs-prolog,
13
+ .hljs-doctype,
14
+ .hljs-cdata {
15
+ color: #8b949e;
16
+ }
17
+
18
+ .hljs-punctuation {
19
+ color: #000000;
20
+ }
21
+
22
+ .hljs-namespace {
23
+ opacity: 0.7;
24
+ }
25
+
26
+ .hljs-property,
27
+ .hljs-tag,
28
+ .hljs-boolean,
29
+ .hljs-number,
30
+ .hljs-constant,
31
+ .hljs-symbol,
32
+ .hljs-deleted {
33
+ color: #77216f;
34
+ }
35
+
36
+ .hljs-selector,
37
+ .hljs-attr-name,
38
+ .hljs-string,
39
+ .hljs-char,
40
+ .hljs-builtin,
41
+ .hljs-inserted {
42
+ color: #0e811f;
43
+ }
44
+
45
+ .hljs-operator,
46
+ .hljs-entity,
47
+ .hljs-url,
48
+ .language-css .hljs-string,
49
+ .style .hljs-string {
50
+ color: #a86500;
51
+ }
52
+
53
+ .hljs-atrule,
54
+ .hljs-attr-value,
55
+ .hljs-keyword {
56
+ color: #06c;
57
+ }
58
+
59
+ .hljs-function,
60
+ .hljs-class-name {
61
+ color: #c7162b;
62
+ }
63
+
64
+ .hljs-regexp,
65
+ .hljs-important,
66
+ .hljs-variable {
67
+ color: #dc3023;
68
+ }
69
+
70
+ .hljs-important,
71
+ .hljs-bold {
72
+ font-weight: bold;
73
+ }
74
+
75
+ .hljs-italic {
76
+ font-style: italic;
77
+ }
78
+
79
+ .hljs-entity {
80
+ cursor: help;
81
+ }
82
+
83
+ .hljs-attr,
84
+ .hljs-attribute,
85
+ .hljs-meta,
86
+ .hljs-selector-attr,
87
+ .hljs-selector-class,
88
+ .hljs-selector-id {
89
+ color: #77216f;
90
+ }
91
+
92
+ .hljs-variable,
93
+ .hljs-literal,
94
+ .hljs-number,
95
+ .hljs-doctag {
96
+ color: #77216f;
97
+ }
98
+
99
+ .hljs-params {
100
+ color: #000000;
101
+ }
102
+
103
+ .hljs-class,
104
+ .hljs-tag,
105
+ .hljs-title,
106
+ .hljs-built_in {
107
+ color: #0e811f;
108
+ }
109
+
110
+ .hljs-keyword,
111
+ .hljs-type,
112
+ .hljs-builtin-name,
113
+ .hljs-meta-keyword,
114
+ .hljs-template-tag,
115
+ .hljs-template-variable {
116
+ color: #06c;
117
+ }
118
+
119
+ .hljs-string,
120
+ .hljs-undefined {
121
+ color: #0e811f;
122
+ }
123
+
124
+ .hljs-regexp {
125
+ color: #dc3023;
126
+ }
127
+
128
+ .hljs-symbol {
129
+ color: #77216f;
130
+ }
131
+
132
+ .hljs-bullet {
133
+ color: #a86500;
134
+ }
135
+
136
+ .hljs-section {
137
+ color: #77216f;
138
+ font-weight: bold;
139
+ }
140
+
141
+ .hljs-quote,
142
+ .hljs-name,
143
+ .hljs-selector-tag,
144
+ .hljs-selector-pseudo {
145
+ color: #0e811f;
146
+ }
147
+
148
+ .hljs-emphasis {
149
+ color: #06c;
150
+ font-style: italic;
151
+ }
152
+
153
+ .hljs-strong {
154
+ color: #06c;
155
+ font-weight: bold;
156
+ }
157
+
158
+ .hljs-deletion {
159
+ color: #dc3023;
160
+ background-color: #490202;
161
+ }
162
+
163
+ .hljs-addition {
164
+ color: #0e811f;
165
+ background-color: #04260f;
166
+ }
167
+
168
+ .hljs-link {
169
+ color: #a86500;
170
+ font-style: underline;
171
+ }
172
+ }
@@ -0,0 +1,111 @@
1
+ /* @canonical/generator-canonical-ds 0.0.1 */
2
+
3
+ .ds.diff-line {
4
+ display: flex;
5
+ font-family: var(--font-family-mono);
6
+ min-width: var(--table-width);
7
+ color: var(--git-diff-viewer-code-default-color);
8
+
9
+ &.diff-line-add {
10
+ background-color: var(--git-diff-viewer-code-insertion-background);
11
+
12
+ td.diff-gutter {
13
+ background-color: var(--git-diff-viewer-code-insertion-background);
14
+ }
15
+ }
16
+
17
+ &.diff-line-context {
18
+ background-color: var(--git-diff-viewer-code-default-background);
19
+
20
+ td.diff-gutter {
21
+ background-color: var(--git-diff-viewer-code-default-background);
22
+ }
23
+ }
24
+
25
+ &.diff-line-remove {
26
+ background-color: var(--git-diff-viewer-code-deletion-background);
27
+
28
+ td.diff-gutter {
29
+ background-color: var(--git-diff-viewer-code-deletion-background);
30
+ }
31
+ }
32
+
33
+ &.diff-line-hunk {
34
+ background-color: var(--git-diff-viewer-hunk-header-background);
35
+ color: var(--git-diff-viewer-hunk-header-color);
36
+ user-select: none;
37
+ border-bottom: 1px solid var(--git-diff-viewer-border-color-tinted);
38
+
39
+ td.diff-gutter {
40
+ background-color: var(--git-diff-viewer-hunk-header-background);
41
+ border-color: var(--git-diff-viewer-border-color-tinted);
42
+ }
43
+ }
44
+
45
+ td.diff-gutter {
46
+ min-width: var(--git-diff-viewer-gutter-width);
47
+ max-width: var(--git-diff-viewer-gutter-width);
48
+ padding: 0;
49
+ text-align: right;
50
+ border-right: 1px solid var(--git-diff-viewer-border-color-tinted);
51
+ user-select: none;
52
+ vertical-align: top;
53
+
54
+ &:not(.wrap) {
55
+ position: sticky;
56
+ left: 0;
57
+ }
58
+
59
+ .diff-line-numbers {
60
+ display: flex;
61
+ justify-content: space-between;
62
+ align-items: center;
63
+ padding: 0px;
64
+ }
65
+ .line-num {
66
+ display: inline-block;
67
+ width: calc(var(--git-diff-viewer-gutter-width) / 2 - 4px);
68
+ text-align: center;
69
+ }
70
+ }
71
+
72
+ td.diff-content {
73
+ /* padding: 0 0 0 calc(var(--git-diff-viewer-gutter-width) + 4px); */
74
+ padding: 0 0 0 4px;
75
+
76
+ &.wrap {
77
+ pre {
78
+ text-wrap: wrap;
79
+ }
80
+ }
81
+
82
+ pre {
83
+ margin: 0;
84
+ padding: 0 8px;
85
+ font-family: var(--font-family-mono);
86
+ }
87
+ }
88
+ &.interactive {
89
+ --icon-opacity: 0;
90
+ &:not(.diff-line-hunk) {
91
+ .diff-gutter {
92
+ cursor: pointer;
93
+ .diff-line-numbers::before {
94
+ content: var(--comment-icon);
95
+ display: inline-block;
96
+ width: var(--comment-icon-width);
97
+ opacity: var(--icon-opacity);
98
+ padding: 0 4px;
99
+ }
100
+ }
101
+
102
+ &:has(.diff-gutter:hover),
103
+ &:has(.diff-gutter:focus) {
104
+ filter: brightness(0.9);
105
+ }
106
+ &:has(.diff-gutter:hover) {
107
+ --icon-opacity: 1;
108
+ }
109
+ }
110
+ }
111
+ }
@@ -0,0 +1,39 @@
1
+ /* @canonical/generator-canonical-ds 0.0.1 */
2
+
3
+ .ds.code-diff-viewer {
4
+ font-size: 13px;
5
+ .diff-table {
6
+ --comment-icon: url('data:image/svg+xml,<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M12 2C12.7956 2 13.5587 2.31607 14.1213 2.87868C14.6839 3.44129 15 4.20435 15 5V10C15 10.6204 14.8076 11.2256 14.4495 11.7323C14.0913 12.2389 13.5849 12.622 13 12.829V16L8.5 13H4C3.20435 13 2.44129 12.6839 1.87868 12.1213C1.31607 11.5587 1 10.7956 1 10V5C1 4.20435 1.31607 3.44129 1.87868 2.87868C2.44129 2.31607 3.20435 2 4 2H12ZM12 3.5H4C3.62712 3.50002 3.26761 3.63892 2.99158 3.88962C2.71555 4.14032 2.5428 4.48484 2.507 4.856L2.5 5V10C2.50002 10.3729 2.63892 10.7324 2.88962 11.0084C3.14032 11.2844 3.48484 11.4572 3.856 11.493L4 11.5H8.954L11.5 13.196L11.501 11.768L12.501 11.415C13.049 11.221 13.436 10.725 13.493 10.146L13.5 10V5C13.5 4.62712 13.3611 4.26761 13.1104 3.99158C12.8597 3.71555 12.5152 3.5428 12.144 3.507L12 3.5ZM7.976 8.25V9.75H4.994V8.25H7.976ZM10.981 5.25V6.75H4.994V5.25H10.981Z" fill="currentColor"/></svg>');
7
+ --comment-icon-width: 16px;
8
+
9
+ /* updated dynamically on window resize */
10
+ --table-width: 300px;
11
+
12
+ table-layout: auto;
13
+ border-collapse: separate;
14
+ border-spacing: 1px 0;
15
+ display: block;
16
+ overflow: auto;
17
+ outline: none;
18
+
19
+ tr {
20
+ /* remove outer spacing from the sides of the table */
21
+ margin-left: -1px;
22
+ margin-right: -1px;
23
+ }
24
+
25
+ .line-decoration {
26
+ display: flex;
27
+ position: sticky;
28
+ left: 0;
29
+ width: var(--table-width);
30
+ .container {
31
+ width: 100%;
32
+ border: 1px solid var(--git-diff-viewer-border-color-tinted);
33
+ border-width: 1px 0;
34
+ border-radius: 1px;
35
+ padding: 0;
36
+ }
37
+ }
38
+ }
39
+ }
@@ -0,0 +1,75 @@
1
+ /* @canonical/generator-canonical-ds 0.0.1 */
2
+
3
+ .ds.file-header {
4
+ display: flex;
5
+ align-items: center;
6
+ justify-content: space-between;
7
+ gap: var(--git-diff-file-header-items-gap);
8
+ background-color: var(--git-diff-file-header-background-color);
9
+ padding: var(--git-diff-file-header-vertical-padding)
10
+ var(--git-diff-file-header-horizontal-padding);
11
+
12
+ &:not(:has(.left-content > .collapse-button.collapsed)) {
13
+ border-bottom: 1px solid var(--git-diff-viewer-border-color-tinted);
14
+ }
15
+
16
+ & > .left-content,
17
+ & > .right-content {
18
+ display: flex;
19
+ align-items: center;
20
+ gap: var(--git-diff-file-header-items-gap);
21
+ }
22
+
23
+ & > .left-content {
24
+ & > .file-name {
25
+ font-weight: 550;
26
+ }
27
+
28
+ & > .collapse-button {
29
+ border: none;
30
+ background-color: var(--git-diff-file-header-button-background);
31
+ cursor: pointer;
32
+ padding: 4px;
33
+ margin: 0;
34
+ display: flex;
35
+ align-items: center;
36
+ border-radius: 1px;
37
+
38
+ &:hover {
39
+ background-color: var(--git-diff-file-header-button-hover-background);
40
+ }
41
+ &:focus {
42
+ background-color: var(--git-diff-file-header-button-focus-background);
43
+ }
44
+
45
+ &.collapsed {
46
+ transform: rotate(90deg);
47
+ }
48
+ }
49
+ }
50
+
51
+ & > .right-content {
52
+ & > .change-count {
53
+ font-size: 12px;
54
+ font-weight: 550;
55
+ line-height: 16px;
56
+ display: flex;
57
+ align-items: center;
58
+
59
+ & > .insertions,
60
+ & > .deletions {
61
+ padding: 0 4px;
62
+ display: flex;
63
+ align-items: center;
64
+ }
65
+ & > .insertions {
66
+ background-color: var(--git-diff-file-header-insertion-background);
67
+ color: var(--git-diff-file-header-insertion-color);
68
+ }
69
+ & > .deletions {
70
+ background-color: var(--git-diff-file-header-deletion-background);
71
+ color: var(--git-diff-file-header-deletion-color);
72
+ }
73
+ }
74
+ }
75
+ }
@@ -1,2 +1,5 @@
1
+ export * from "./EditableBlock/index.js";
2
+ export * from "./FileTree/index.js";
1
3
  export * from "./GitDiffViewer/index.js";
4
+ export * from "./RelativeTime/index.js";
2
5
  //# sourceMappingURL=index.js.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC"}
@@ -0,0 +1,4 @@
1
+ import type { EditingContextType } from "./types.js";
2
+ declare const EditingContext: import("react").Context<EditingContextType | undefined>;
3
+ export default EditingContext;
4
+ //# sourceMappingURL=Context.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"Context.d.ts","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/Context.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAErD,QAAA,MAAM,cAAc,yDAA2D,CAAC;AAEhF,eAAe,cAAc,CAAC"}
@@ -0,0 +1,10 @@
1
+ import type React from "react";
2
+ import type { EditElementProps, EditableBlockProps } from "./types.js";
3
+ import "./styles.css";
4
+ /**
5
+ * Component that renders toggling edit mode block
6
+ * @returns {React.ReactElement} - Rendered EditableBlock
7
+ */
8
+ declare const EditableBlock: <T extends EditElementProps>({ id, EditComponent, className: userClassName, style, title, tag: TitleTag, }: EditableBlockProps<T>) => React.ReactElement;
9
+ export default EditableBlock;
10
+ //# sourceMappingURL=EditableBlock.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"EditableBlock.d.ts","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/EditableBlock.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,KAAK,EAAE,gBAAgB,EAAE,kBAAkB,EAAE,MAAM,YAAY,CAAC;AAEvE,OAAO,cAAc,CAAC;AAEtB;;;GAGG;AAEH,QAAA,MAAM,aAAa,GAAI,CAAC,SAAS,gBAAgB,iFAO9C,kBAAkB,CAAC,CAAC,CAAC,KAAG,KAAK,CAAC,YA2DhC,CAAC;AAEF,eAAe,aAAa,CAAC"}
@@ -0,0 +1,2 @@
1
+ export {};
2
+ //# sourceMappingURL=EditableBlock.test.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"EditableBlock.test.d.ts","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/EditableBlock.test.tsx"],"names":[],"mappings":""}
@@ -0,0 +1,2 @@
1
+ export * from "./useEditableBlock.js";
2
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../src/ui/EditableBlock/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAC"}
@@ -0,0 +1,4 @@
1
+ import type { EditingContextType } from "../types.js";
2
+ export declare const useEditableBlock: () => EditingContextType;
3
+ export default useEditableBlock;
4
+ //# sourceMappingURL=useEditableBlock.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useEditableBlock.d.ts","sourceRoot":"","sources":["../../../../../src/ui/EditableBlock/hooks/useEditableBlock.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,aAAa,CAAC;AAEtD,eAAO,MAAM,gBAAgB,QAAO,kBAMnC,CAAC;AAEF,eAAe,gBAAgB,CAAC"}
@@ -0,0 +1,3 @@
1
+ export { default as EditableBlock } from "./EditableBlock.js";
2
+ export type { default as EditableBlockProps } from "./types.js";
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,oBAAoB,CAAC;AAC9D,YAAY,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,YAAY,CAAC"}
@@ -0,0 +1,24 @@
1
+ import type React from "react";
2
+ import type { JSX } from "react";
3
+ export interface EditingContextType {
4
+ isEditing: boolean;
5
+ toggleEditing: () => void;
6
+ }
7
+ export type EditElementProps = EditingContextType;
8
+ export type EditElement<T extends EditElementProps> = (props: T) => React.ReactNode;
9
+ export interface EditableBlockProps<T extends EditElementProps> {
10
+ /** Unique identifier for the editable block */
11
+ id?: string;
12
+ /** Component to render when in edit mode, must implement EditElement interface */
13
+ EditComponent: EditElement<T>;
14
+ /** CSS class name for additional styling */
15
+ className?: string;
16
+ /** Inline CSS styles to apply to the component */
17
+ style?: React.CSSProperties;
18
+ /** Title text for the editable block */
19
+ title?: string;
20
+ /** HTML element type to render as the title component (e.g., 'div', 'section') */
21
+ tag?: keyof JSX.IntrinsicElements;
22
+ }
23
+ export default EditableBlockProps;
24
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../../src/ui/EditableBlock/types.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAC/B,OAAO,KAAK,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAEjC,MAAM,WAAW,kBAAkB;IACjC,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,IAAI,CAAC;CAC3B;AAED,MAAM,MAAM,gBAAgB,GAAG,kBAAkB,CAAC;AAElD,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,gBAAgB,IAAI,CACpD,KAAK,EAAE,CAAC,KACL,KAAK,CAAC,SAAS,CAAC;AAErB,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,gBAAgB;IAC5D,+CAA+C;IAC/C,EAAE,CAAC,EAAE,MAAM,CAAC;IACZ,kFAAkF;IAClF,aAAa,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC;IAC9B,4CAA4C;IAC5C,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,kDAAkD;IAClD,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,wCAAwC;IACxC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kFAAkF;IAClF,GAAG,CAAC,EAAE,MAAM,GAAG,CAAC,iBAAiB,CAAC;CACnC;AAED,eAAe,kBAAkB,CAAC"}
@@ -1,2 +1,5 @@
1
+ export * from "./EditableBlock/index.js";
2
+ export * from "./FileTree/index.js";
1
3
  export * from "./GitDiffViewer/index.js";
4
+ export * from "./RelativeTime/index.js";
2
5
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/ui/index.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,yBAAyB,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@canonical/react-ds-app-launchpad",
3
- "version": "0.9.0-experimental.6",
3
+ "version": "0.9.0-experimental.8",
4
4
  "type": "module",
5
5
  "module": "dist/esm/index.js",
6
6
  "types": "dist/types/index.d.ts",
@@ -24,7 +24,7 @@
24
24
  "build": "bun run build:package",
25
25
  "build:storybook": "storybook build",
26
26
  "build:package": "bun run build:package:tsc && bun run build:package:copycss",
27
- "build:package:copycss": "copyfiles -u 1 src/ui/**/*.css dist/esm",
27
+ "build:package:copycss": "copyfiles -u 1 'src/ui/{,**/}*.css' dist/esm",
28
28
  "build:package:tsc": "tsc -p tsconfig.build.json",
29
29
  "check": "bun run check:biome && bun run check:ts",
30
30
  "check:fix": "bun run check:biome:fix && bun run check:ts",
@@ -69,5 +69,5 @@
69
69
  "vite-tsconfig-paths": "^5.1.4",
70
70
  "vitest": "^2.1.8"
71
71
  },
72
- "gitHead": "88907393fcb7f317006ac5198c849fd6ba0b8c0b"
72
+ "gitHead": "bb7aeae5a7ce05d425f225e3e04ea4b6ca81d440"
73
73
  }