Merge pull request #2661 from opral/nilsjacobsen/inlmc-76-add-in-page…

…-nav-to-the-right-column-of-doc-layout-component

feat: add doc-layout component package

inlang/source-code/doc-layout-component/.storybook/main.js

@@ -0,0 +1,13 @@
+/** @type { import('@storybook/web-components-vite').StorybookConfig } */
+const config = {
+	stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+	addons: ["@storybook/addon-links", "@storybook/addon-essentials"],
+	framework: {
+		name: "@storybook/web-components-vite",
+		options: {},
+	},
+	docs: {
+		autodocs: "tag",
+	},
+}
+export default config

inlang/source-code/doc-layout-component/.storybook/preview.js

@@ -0,0 +1,17 @@
+/** @type { import('@storybook/web-components').Preview } */
+
+import "./../src/styling/preview.css"
+
+const preview = {
+	parameters: {
+		actions: { argTypesRegex: "^on[A-Z].*" },
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/i,
+			},
+		},
+	},
+}
+
+export default preview

inlang/source-code/doc-layout-component/CHANGELOG.md

@@ -0,0 +1,102 @@
+# @inlang/settings-component
+
+## 1.0.6
+
+### Patch Changes
+
+- Updated dependencies [3c959bc]
+  - @inlang/sdk@0.34.2
+
+## 1.0.5
+
+### Patch Changes
+
+- @inlang/sdk@0.34.1
+
+## 1.0.4
+
+### Patch Changes
+
+- Updated dependencies [5b8c053]
+  - @inlang/sdk@0.34.0
+
+## 1.0.3
+
+### Patch Changes
+
+- c92bde5: Added description to project settings type & allow experimental field in settings component
+- 2508271: Style fix float
+- 0b4af82: Fixed mobile styling for objects
+  - @inlang/sdk@0.33.1
+
+## 1.0.2
+
+### Patch Changes
+
+- Updated dependencies [d573ab8]
+  - @inlang/sdk@0.33.0
+
+## 1.0.1
+
+### Patch Changes
+
+- ddea787: Don't display the lint rule levels when there are no lint rules installed
+
+## 1.0.0
+
+### Major Changes
+
+- 552037b: First fully releasable version of the settings componeny
+
+## 0.0.16
+
+### Patch Changes
+
+- Updated dependencies [bc9875d]
+  - @inlang/sdk@0.32.0
+
+## 0.0.15
+
+### Patch Changes
+
+- Updated dependencies [c068dd2]
+  - @inlang/sdk@0.31.0
+
+## 0.0.14
+
+### Patch Changes
+
+- Updated dependencies [9b26a31]
+  - @inlang/sdk@0.30.0
+
+## 0.0.13
+
+### Patch Changes
+
+- Updated dependencies [62dfa26]
+  - @inlang/sdk@0.29.0
+
+## 0.0.12
+
+### Patch Changes
+
+- @inlang/sdk@0.28.3
+
+## 0.0.11
+
+### Patch Changes
+
+- @inlang/sdk@0.28.2
+
+## 0.0.10
+
+### Patch Changes
+
+- @inlang/sdk@0.28.1
+
+## 0.0.2
+
+### Patch Changes
+
+- Updated dependencies [4837297]
+  - @inlang/sdk@0.27.0

inlang/source-code/doc-layout-component/README.md

@@ -0,0 +1,9 @@
+# doc-layout-conponent
+
+This package provides the doc-layout component for documentation pages as a shared web-components mainly used by inlang.com.
+
+### Docs
+To open the docs please execute this on the root of the project.
+```bash
+pnpm --filter @inlang/doc-layout-component run storybook
+```

inlang/source-code/doc-layout-component/package.json

@@ -0,0 +1,48 @@
+{
+	"name": "@inlang/doc-layout-component",
+	"type": "module",
+	"version": "0.0.1",
+	"publishConfig": {
+		"access": "public"
+	},
+	"description": "",
+	"exports": {
+		".": {
+			"import": "./dist/index.mjs",
+			"types": "./dist/index.d.ts"
+		}
+	},
+	"scripts": {
+		"build": "pnpm run format && esbuild src/index.ts --bundle --external:node:crypto --format=esm --platform=browser --outfile=dist/index.mjs && tsc --emitDeclarationOnly --declaration --outDir dist",
+		"test": "tsc --noEmit && vitest run --passWithNoTests --coverage",
+		"format": "prettier --write **/*.ts",
+		"storybook": "storybook dev -p 6006"
+	},
+	"keywords": [],
+	"author": "",
+	"license": "ISC",
+	"devDependencies": {
+		"@inlang/marketplace-registry": "workspace:^",
+		"@nx/storybook": "^18.0.4",
+		"@storybook/addon-essentials": "^7.6.16",
+		"@storybook/addon-links": "^7.6.16",
+		"@storybook/blocks": "^7.6.16",
+		"@storybook/web-components": "^7.6.16",
+		"@storybook/web-components-vite": "^7.6.16",
+		"@types/chroma-js": "^2.4.4",
+		"esbuild": "^0.20.0",
+		"lit": "^3.1.2",
+		"react": "^18.2.0",
+		"react-dom": "^18.2.0",
+		"storybook": "^7.6.16",
+		"vitest": "0.33.0",
+		"@vitest/coverage-v8": "^0.33.0"
+	},
+	"dependencies": {
+		"@inlang/sdk": "workspace:^",
+		"@lit/task": "^1.0.0",
+		"@shoelace-style/shoelace": "2.14.0",
+		"chroma-js": "^2.4.2",
+		"@sinclair/typebox": "0.31.28"
+	}
+}

inlang/source-code/doc-layout-component/src/helper/overridePrimitiveColors.test.ts

@@ -0,0 +1,38 @@
+import { describe, expect, it } from "vitest"
+import { getColor, getPalette } from "./overridePrimitiveColors.js"
+import chroma from "chroma-js"
+
+describe("getColors", () => {
+	//color of violet
+	const refColor = chroma("#EE82EE")
+
+	it("should pickup css colors", () => {
+		const color = getColor("violet")
+		expect(color).toStrictEqual(refColor)
+	})
+	it("should pickup hex colors", () => {
+		const color = getColor("#EE82EE")
+		expect(color).toStrictEqual(refColor)
+	})
+	it("should pickup rgb colors", () => {
+		const color = getColor("rgb(238, 130, 238)")
+		expect(color).toStrictEqual(refColor)
+	})
+	it("should pickup rgba colors", () => {
+		const color = getColor("rgba(238, 130, 238, 1)")
+		expect(color).toStrictEqual(refColor)
+	})
+})
+
+describe("getPalette", () => {
+	//reference color (green) with good white on green contrast ratio
+	const refColor = "#16a34a"
+
+	it("should create a palette with 50, 100-900 and 950 shades", () => {
+		const palette = getPalette(refColor)
+		expect(Object.keys(palette).length).toBe(11)
+		expect(palette[50]).toBe("#f4f9f5")
+		expect(palette[600]).toBe(refColor)
+		expect(palette[950]).toBe("#083a1a")
+	})
+})

inlang/source-code/doc-layout-component/src/helper/overridePrimitiveColors.ts

@@ -0,0 +1,59 @@
+import chroma from "chroma-js"
+
+const overridePrimitiveColors = () => {
+	const inlangDocLayout = document.querySelector("inlang-doc-layout")
+	if (!inlangDocLayout) return undefined
+
+	const primitives = ["primary", "success", "warning", "danger", "neutral"]
+
+	for (const primitive of primitives) {
+		const unformattedColor = window
+			.getComputedStyle(inlangDocLayout)
+			.getPropertyValue(`--inlang-color-${primitive}`)
+			.trim()
+
+		if (unformattedColor !== "") {
+			const colorShades = getPalette(unformattedColor)
+			appendCSSProperties(colorShades, primitive, inlangDocLayout)
+		}
+	}
+}
+
+const appendCSSProperties = (
+	colorShades: Record<number, string>,
+	primitive: string,
+	element: HTMLElement
+) => {
+	let textContent = Object.entries(colorShades)
+		.map(([index, shade]) => `--sl-color-${primitive}-${index}: ${shade} !important;`)
+		.join("\n")
+
+	textContent = ":host { " + textContent + " }"
+
+	const shadowRoot = element.shadowRoot || element.attachShadow({ mode: "open" })
+
+	const style = document.createElement("style")
+	style.textContent = textContent
+	shadowRoot.appendChild(style)
+}
+
+export const getColor = (unformattedColor: string) => chroma(unformattedColor)
+
+export const getPalette = (unformattedColor: string) => {
+	const color = getColor(unformattedColor)
+	const colors = chroma.scale(["white", color, "black"]).domain([0, 0.6, 1]).mode("lrgb")
+	const palette: Record<number, string> = {}
+
+	// Create 50
+	palette[50] = colors(0.05).hex()
+
+	// Create 100-900
+	for (let i = 0.1; i < 0.9; i += 0.1) {
+		palette[Math.round(i * 1000)] = colors(i).hex()
+	}
+	// Create 950
+	palette[950] = colors(0.95).hex()
+	return palette
+}
+
+export default overridePrimitiveColors

inlang/source-code/doc-layout-component/src/index.ts

@@ -0,0 +1 @@
+export { default as InlangDocLayout } from "./stories/inlang-doc-layout.js"

inlang/source-code/doc-layout-component/src/inlang-doc-layout.mdx

@@ -0,0 +1,81 @@
+import { Meta, Primary, Controls, Story, Canvas, ArgTypes, Source } from '@storybook/blocks';
+import * as InlangDocLayout from './stories/inlang-doc-layout.stories';
+
+<Meta of={InlangDocLayout} />
+
+# Settings Component
+
+The settings component is a simple form that allows app builders add settings quickly. The component can be used as `inlang-settings`.
+
+## Table of Contents
+- [Example](#example-settings)
+- [Props and Attributes](#props-and-attributes)
+- [Events](#events)
+- [Usage](#usage)
+- [CSS Custom properties](#css-custom-properties)
+- [Part API](#part-api)
+
+## Example Settings
+
+<Canvas>
+    <Story of={InlangDocLayout.Props} />
+</Canvas>
+
+## Props and Attributes
+
+<ArgTypes/>
+
+Depending on your framework you can use pass the needed information as a prop or as an [attribute](https://lit.dev/docs/components/properties/#attributes).
+
+## Events
+
+The settings component emits the following events:
+
+- `set-settings`: Emitted when the settings are changed. The event detail contains the new settings.
+
+## Usage
+
+- Solidjs - Prop: `prop:settings={obj}` - Event: `on:set-settings`
+- Lit - Attribute: `settings=${JSON.stringify(obj)}` - Event: `@set-settings`
+- Lit - Props: `.settings=${obj}` - Event: `@set-settings`
+- Html - Attribute: `settings=${JSON.stringify(obj)}` - Event: EventListener -> `set-settings`
+
+## CSS Custom properties
+
+The settings component uses the following css properties:
+
+### Primitives
+
+From each property the component derives different shades and maps it on the shoelace components.
+
+- `--inlang-color-primary`
+- `--inlang-color-success`
+- `--inlang-color-warning`
+- `--inlang-color-danger`
+- `--inlang-color-neutral`
+
+### Inputs
+
+Most styles are derrived from input css properties.
+
+Examples:
+- `--sl-input-color`
+- `--sl-input-background-color`
+- `--sl-input-border-color`
+
+You can find all css properties listed [here](https://shoelace.style/tokens/more).
+
+## Part API
+
+The settings component is built with the following parts:
+
+- `base`: Root of component
+- `module-container`: List of modules
+- `module-title`: The title of a module
+- `property`: Root of property
+- `property-title`: The title of a property
+- `property-paragraph`: All p elements in a property
+- `option-wrapper`: Wrapper for options
+- `option`: All options in a dropdown
+- `float`: The floating bar when a change exists
+- `button`: The root of all neutral buttons