diff --git a/packages/business-features/dock/index.ts b/packages/business-features/dock/index.ts index 6f73270f3f..8f2e1acb7c 100644 --- a/packages/business-features/dock/index.ts +++ b/packages/business-features/dock/index.ts @@ -1 +1,3 @@ +export { DockHost } from "./src/dock/dock-host"; + export { dockFeature } from "./src/feature"; diff --git a/packages/business-features/dock/package.json b/packages/business-features/dock/package.json index b286ec8fd5..cce4c43de3 100644 --- a/packages/business-features/dock/package.json +++ b/packages/business-features/dock/package.json @@ -24,18 +24,19 @@ "license": "MIT", "homepage": "https://github.com/lensapp/lens", "scripts": { - "buildasd": "webpack", - "devasdasd": "webpack --mode=development --watch", + "build": "webpack", "test:unit": "jest --coverage --runInBand", "lint": "lens-lint", "lint:fix": "lens-lint --fix" }, "peerDependencies": { "@k8slens/feature-core": "^6.5.0-alpha.0", + "@k8slens/ui-components": "^1.0.0-alpha.0", "@ogre-tools/injectable": "^15.1.2", "@ogre-tools/injectable-extension-for-auto-registration": "^15.1.2", "@ogre-tools/fp": "^15.1.2", - "lodash": "^4.17.21" + "lodash": "^4.17.21", + "react": "^17" }, "devDependencies": { "@async-fn/jest": "^1.6.4", diff --git a/packages/business-features/dock/src/__snapshots__/dock.test.tsx.snap b/packages/business-features/dock/src/__snapshots__/dock.test.tsx.snap new file mode 100644 index 0000000000..49ba3f6533 --- /dev/null +++ b/packages/business-features/dock/src/__snapshots__/dock.test.tsx.snap @@ -0,0 +1,63 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`dock when rendered renders 1`] = ` + +
+
+
+
+
+
+ + Some title + +
+
+
+
+
+
+ + Some other title + +
+
+
+
+
+
+
+
+ Some content +
+
+
+ +`; diff --git a/packages/business-features/dock/src/dock.test.tsx b/packages/business-features/dock/src/dock.test.tsx new file mode 100644 index 0000000000..619acfdf14 --- /dev/null +++ b/packages/business-features/dock/src/dock.test.tsx @@ -0,0 +1,29 @@ +import { createContainer, DiContainer } from "@ogre-tools/injectable"; +import { renderFor } from "@k8slens/test-utils"; +import { DockHost } from "./dock/dock-host"; +import React from "react"; +import type { RenderResult } from "@testing-library/react"; + +describe("dock", () => { + let di: DiContainer; + + beforeEach(() => { + di = createContainer("some-container"); + + // registerFeature(di, dockFeature); + }); + + describe("when rendered", () => { + let rendered: RenderResult; + + beforeEach(() => { + const render = renderFor(di); + + rendered = render(); + }); + + it("renders", () => { + expect(rendered.baseElement).toMatchSnapshot(); + }); + }); +}); diff --git a/packages/business-features/dock/src/dock/dock-host.tsx b/packages/business-features/dock/src/dock/dock-host.tsx new file mode 100644 index 0000000000..477efd47f6 --- /dev/null +++ b/packages/business-features/dock/src/dock/dock-host.tsx @@ -0,0 +1,37 @@ +import React from "react"; +import { Tab } from "./tab"; +import { Div, Span } from "@k8slens/ui-components"; + +export const DockHost = () => ( +
+
+ +
+ Some title +
+ + + +
+ Some other title +
+ +
+ +
+
+
+ +
+ Some content +
+
+); diff --git a/packages/business-features/dock/src/dock/dock.scss b/packages/business-features/dock/src/dock/dock.scss index dfe11b1139..2035a44c78 100644 --- a/packages/business-features/dock/src/dock/dock.scss +++ b/packages/business-features/dock/src/dock/dock.scss @@ -1,8 +1,8 @@ .Dock { - position: relative; - background: var(--dockHeadBackground); - display: flex; - flex-direction: column; + //position: relative; + //background: var(--dockHeadBackground); + //display: flex; + //flex-direction: column; &:not(:focus-within) .DockTab.active { &::after { diff --git a/packages/business-features/dock/src/dock/tab.tsx b/packages/business-features/dock/src/dock/tab.tsx new file mode 100644 index 0000000000..faa9e2d2a9 --- /dev/null +++ b/packages/business-features/dock/src/dock/tab.tsx @@ -0,0 +1,14 @@ +import { Div } from "@k8slens/ui-components"; +import React from "react"; + +export interface TabProps { + children: React.ReactNode; +} + +export const Tab = ({ children }: TabProps) => { + return ( +
+
{children}
+
+ ); +}; diff --git a/packages/business-features/dock/styles.d.ts b/packages/business-features/dock/styles.d.ts new file mode 100644 index 0000000000..58009c88b5 --- /dev/null +++ b/packages/business-features/dock/styles.d.ts @@ -0,0 +1,14 @@ +// Support import for custom module extensions +// https://www.typescriptlang.org/docs/handbook/modules.html#wildcard-module-declarations + +declare module "*.module.scss"; + +declare module "*.module.css" { + const classes: { [key: string]: string }; + export default classes; +} + +declare module "*.scss" { + const content: string; + export = content; +}