feat: add @einride/ui-labs package

.changeset/config.json

@@ -3,7 +3,7 @@
   "changelog": "@changesets/cli/changelog",
   "commit": false,
   "fixed": [],
-  "linked": [["@einride/ui", "@einride/ui-maps"]],
+  "linked": [["@einride/ui", "@einride/ui-maps", "@einride/ui-labs"]],
   "access": "restricted",
   "baseBranch": "main",
   "updateInternalDependencies": "patch",

.changeset/polite-rice-change.md

@@ -0,0 +1,5 @@
+---
+"@einride/ui-labs": minor
+---
+
+Add @einride/ui-labs package.

.storybook/main.ts

@@ -18,6 +18,10 @@ export default {
       directory: "../packages/einride-ui-maps/src/hooks",
       titlePrefix: "maps",
     },
+    {
+      directory: "../packages/einride-ui-labs/src/components",
+      titlePrefix: "labs",
+    },
   ],
   addons: [
     "@storybook/addon-essentials",

packages/einride-ui-labs/index.ts

@@ -0,0 +1 @@
+export { Example } from "./src/components/Example/Example"

packages/einride-ui-labs/package.json

@@ -0,0 +1,68 @@
+{
+  "name": "@einride/ui-labs",
+  "version": "7.60.0",
+  "description": "Experimental new components that are not yet included in the core package",
+  "scripts": {
+    "build": "rollup --config"
+  },
+  "devDependencies": {
+    "@rollup/plugin-typescript": "11.1.1",
+    "@storybook/jest": "0.1.0",
+    "@storybook/react": "7.0.20",
+    "@storybook/testing-library": "0.1.0",
+    "@types/react": "18.2.12",
+    "@types/react-dom": "18.2.5",
+    "@vitejs/plugin-react": "4.0.0",
+    "framer-motion": "10.12.16",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "rollup": "3.25.1",
+    "typescript": "5.1.3"
+  },
+  "peerDependencies": {
+    "@einride/ui": "^7.45.3",
+    "@emotion/react": "^11.10.6",
+    "@emotion/styled": "^11.10.6",
+    "react": "^18.0.0"
+  },
+  "files": [
+    "dist"
+  ],
+  "types": "./dist/index.d.ts",
+  "main": "./dist/main.cjs.js",
+  "module": "./dist/main.esm.js",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/main.esm.js",
+      "require": "./dist/main.cjs.js"
+    }
+  },
+  "keywords": [
+    "react",
+    "typescript",
+    "ui",
+    "components",
+    "library"
+  ],
+  "homepage": "https://github.com/einride/ui",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/einride/ui.git",
+    "directory": "packages/einride-ui-labs"
+  },
+  "bugs": {
+    "email": "open-source@einride.tech",
+    "url": "https://github.com/einride/ui/issues"
+  },
+  "license": "MIT",
+  "author": "Filip Tammergård <filip.tammergard@einride.tech> https://github.com/filiptammergard",
+  "engines": {
+    "node": "16 || 18"
+  },
+  "publishConfig": {
+    "access": "public",
+    "provenance": true
+  },
+  "packageManager": "yarn@3.4.1"
+}

packages/einride-ui-labs/rollup.config.mjs

@@ -0,0 +1,22 @@
+import typescript from "@rollup/plugin-typescript"
+import pkg from "./package.json" assert { type: "json" }
+
+export default {
+  input: "src/index.ts",
+  output: [
+    {
+      file: pkg.main,
+      format: "cjs",
+    },
+    {
+      file: pkg.module,
+      format: "esm",
+    },
+  ],
+  external: [
+    ...Object.keys(pkg.dependencies ?? {}),
+    ...Object.keys(pkg.peerDependencies ?? {}),
+    "react/jsx-runtime",
+  ],
+  plugins: [typescript({ tsconfig: "./tsconfig.build.json" })],
+}

packages/einride-ui-labs/src/components/Example/Example.mdx

@@ -0,0 +1,29 @@
+import {
+  Meta,
+  Primary,
+  Description,
+  Source,
+  Title,
+  ArgTypes,
+  Subtitle,
+  Controls,
+  Story,
+  Canvas,
+  Stories,
+  Markdown,
+} from "@storybook/blocks"
+import * as Example from "./Example.stories.tsx"
+
+<Meta of={Example} />
+<Title />
+<Description of={Example} />
+
+```tsx
+import { Example } from "@einride/ui-labs"
+```
+
+## Basic
+
+<Description of={Example.Basic} />
+<Canvas of={Example.Basic} />
+<Controls of={Example.Basic} />

packages/einride-ui-labs/src/components/Example/Example.stories.tsx

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from "@storybook/react"
+import { Example } from "./Example"
+
+const meta = {
+  component: Example,
+} satisfies Meta<typeof Example>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Basic = {
+  args: {
+    background: "secondary",
+  },
+} satisfies Story

packages/einride-ui-labs/src/components/Example/Example.tsx

@@ -0,0 +1,18 @@
+import { Box } from "@einride/ui"
+import { forwardRef } from "react"
+
+export interface ExampleProps {
+  /** Example prop. */
+  background?: "secondary" | "tertiary"
+}
+
+/** An example component. */
+export const Example = forwardRef<HTMLDivElement, ExampleProps>(
+  ({ background = "secondary", ...props }, ref) => {
+    return (
+      <Box background={background} {...props} ref={ref}>
+        Example
+      </Box>
+    )
+  },
+)

packages/einride-ui-labs/src/types/emotion.d.ts

@@ -0,0 +1,7 @@
+import "@emotion/react"
+import type { Theme as EinrideTheme } from "../lib/theme/types"
+
+declare module "@emotion/react" {
+  // eslint-disable-next-line @typescript-eslint/no-empty-interface
+  export interface Theme extends EinrideTheme {}
+}

packages/einride-ui-labs/tsconfig.build.json

@@ -0,0 +1,11 @@
+{
+  "extends": "./tsconfig.json",
+  "compilerOptions": {
+    "declaration": true,
+    "noEmit": false,
+    "rootDir": "./src",
+    "outDir": "./dist"
+  },
+  "include": ["./src"],
+  "exclude": ["**/*.stories.tsx", "**/*.test.ts"]
+}

packages/einride-ui-labs/tsconfig.json

@@ -0,0 +1,13 @@
+{
+  "extends": "../../tsconfig.json",
+  "compilerOptions": {
+    "baseUrl": "./",
+    "composite": true,
+    "moduleResolution": "node",
+    "rootDir": "./src",
+    "paths": {
+      "@einride/ui": ["../einride-ui/src"]
+    }
+  },
+  "references": [{ "path": "../einride-ui" }]
+}

yarn.lock

@@ -2406,6 +2406,30 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@einride/ui-labs@workspace:packages/einride-ui-labs":
+  version: 0.0.0-use.local
+  resolution: "@einride/ui-labs@workspace:packages/einride-ui-labs"
+  dependencies:
+    "@rollup/plugin-typescript": 11.1.1
+    "@storybook/jest": 0.1.0
+    "@storybook/react": 7.0.20
+    "@storybook/testing-library": 0.1.0
+    "@types/react": 18.2.12
+    "@types/react-dom": 18.2.5
+    "@vitejs/plugin-react": 4.0.0
+    framer-motion: 10.12.16
+    react: 18.2.0
+    react-dom: 18.2.0
+    rollup: 3.25.1
+    typescript: 5.1.3
+  peerDependencies:
+    "@einride/ui": ^7.45.3
+    "@emotion/react": ^11.10.6
+    "@emotion/styled": ^11.10.6
+    react: ^18.0.0
+  languageName: unknown
+  linkType: soft
+
 "@einride/ui-maps@workspace:packages/einride-ui-maps":
   version: 0.0.0-use.local
   resolution: "@einride/ui-maps@workspace:packages/einride-ui-maps"