feat: add Playroom integration

.github/workflows/publish.yml

@@ -42,6 +42,8 @@ jobs:
           yarn tokens build
           yarn tailwind-preset build
           yarn components build
+          yarn components build:playroom
+          yarn components build:storybook
 
       - name: Dry run
         if: ${{ github.event.inputs.dryrun == 'true' }}
@@ -72,3 +74,13 @@ jobs:
           yarn docs changelog
           git add docs/src/data/log.md && git commit -m "docs: update changelog" && git push
           yarn zx scripts/post-changelog.mjs
+
+      - name: Get tag version
+        run: |
+          git fetch --tags --quiet
+          echo "VERSION_TAG=$(git tag --list '@kiwicom/orbit-components@*' --sort=creatordate | sed '$!d' | sed -n '$ s|.*@||; s/\./-/gp')" >> $GITHUB_ENV
+
+      - name: Get Storybook domain
+        run: |
+          echo "DOMAIN=https://kiwicom-orbit-v${VERSION_TAG}.surge.sh" >> $GITHUB_ENV
+          yarn components deploy:surge ${DOMAIN} --token ${{ secrets.SURGE_TOKEN }}

.github/workflows/storybook.yml → .github/workflows/storybook-playroom.yml

@@ -32,6 +32,12 @@ jobs:
       - name: Build tailwind
         run: yarn tailwind-preset build
 
+      - name: Build Orbit components
+        run: yarn components build
+
+      - name: Build Playroom
+        run: yarn components build:playroom
+
       - name: Build Storybook
         run: yarn components build:storybook
 
@@ -46,6 +52,10 @@ jobs:
         if: github.ref != 'refs/heads/master'
         run: echo "DOMAIN=https://kiwicom-orbit-${BRANCH_URL}.surge.sh" >> $GITHUB_ENV
 
+      - name: Get Playroom DOMAIN
+        if: github.ref != 'refs/heads/master'
+        run: echo "DOMAIN_PLAYROOM=${DOMAIN}/playroom" >> $GITHUB_ENV
+
       - name: Deploy to staging
         if: github.ref != 'refs/heads/master'
         run: yarn components deploy:surge ${DOMAIN} --token ${{ secrets.SURGE_TOKEN }}
@@ -55,7 +65,7 @@ jobs:
         uses: actions/github-script@v6
         with:
           script: |
-            const commentBody = `Storybook staging is available at ${process.env.DOMAIN}`;
+            const commentBody = `Storybook staging is available at ${process.env.DOMAIN}\n Playroom staging is available at ${process.env.DOMAIN_PLAYROOM}`;
 
             const commentsList = await github.rest.issues.listComments({
               issue_number: context.issue.number,

docs/src/components/Footer.tsx

@@ -112,6 +112,10 @@ export default function Footer() {
               <Dot />
               <StyledFooterLink to="https://kiwicom.github.io/orbit/">Storybook</StyledFooterLink>
               <Dot />
+              <StyledFooterLink to="https://kiwicom.github.io/orbit/playroom">
+                Playroom
+              </StyledFooterLink>
+              <Dot />
               <StyledFooterLink to="/changelog/">Changelog</StyledFooterLink>
               <Dot />
               <StyledFooterLink to="/themer/">Themer</StyledFooterLink>

docs/src/components/Navbar/Links.tsx

@@ -9,7 +9,7 @@ import ReadArt from "../../images/streamline-light/read-art.svg";
 import IrisScanIcon from "../../images/streamline-light/iris-scan.svg";
 import ScriptIcon from "../../images/streamline-light/script.svg";
 
-type Link = "Components" | "Guides" | "Tokens" | "Accessibility" | "Foundation" | "Playground";
+type Link = "Components" | "Guides" | "Tokens" | "Accessibility" | "Foundation" | "Playroom";
 
 interface Props {
   links?: Link[];
@@ -31,7 +31,7 @@ const LinkIcon = ({ name }: { name?: string }) => {
       return <ColorBrushIcon {...iconStyles} />;
     case "Accessibility":
       return <IrisScanIcon {...iconStyles} />;
-    case "Playground":
+    case "Playroom":
       return <Code size="medium" />;
     default:
       return <ScriptIcon {...iconStyles} />;
@@ -59,6 +59,7 @@ const getLinkPath = (link: Link) => {
   if (link === "Tokens") return "/foundation/design-tokens/";
   if (link === "Guides") return "/development/guides/";
   if (link === "Accessibility") return "/foundation/accessibility/";
+  if (link === "Playroom") return "https://kiwicom.github.io/orbit/playroom";
 
   return link.toLowerCase();
 };
@@ -82,7 +83,7 @@ const LinkList = ({ isDesktop, links }: { isDesktop?: boolean; links: Props["lin
 );
 
 const Links = ({
-  links = ["Foundation", "Components", "Tokens", "Guides", "Accessibility", "Playground"],
+  links = ["Foundation", "Components", "Tokens", "Guides", "Accessibility", "Playroom"],
 }: Props) => {
   return (
     <>

docs/src/documentation/01-getting-started/02-for-developers.mdx

@@ -57,7 +57,7 @@ See [more info about the Orbit provider](/utilities/orbit-provider/).
 
 For a live preview, check out our [Storybook](https://kiwicom.github.io/orbit/) or [orbit.kiwi](https://orbit.kiwi).
 
-You can also try `orbit-components` directly on our [Playground](https://orbit.kiwi/playground/).
+You can also try `orbit-components` directly on our [Playroom](https://kiwicom.github.io/orbit/playroom/).
 
 ## Typescript
 

packages/orbit-components/.gitignore

@@ -5,6 +5,7 @@
 .out
 .cache
 .DS_STORE
+.playroom
 src/data/airportIllustrations.json
 src/data/illustrations.json
 src/data/icons.json

packages/orbit-components/.storybook/main.ts

@@ -7,8 +7,8 @@ function getAbsolutePath(value: string): string {
 }
 
 const config: StorybookConfig = {
-  staticDirs: [path.resolve(__dirname, "../static")],
-  stories: ["../src/**/*.stories.*"],
+  staticDirs: [path.resolve(__dirname, "../static"), path.resolve(__dirname, "../.playroom")],
+  stories: ["../src/**/*.@(mdx|stories.*)"],
   framework: getAbsolutePath("@storybook/react-webpack5"),
 
   addons: [
@@ -44,6 +44,7 @@ const config: StorybookConfig = {
       },
     },
   ],
+
   webpackFinal(cfg) {
     if (cfg) {
       // resolve to .js rather than .mjs to avoid webpack failing because of ambiguous imports
@@ -60,6 +61,10 @@ const config: StorybookConfig = {
     }
     return undefined;
   },
+
+  typescript: {
+    reactDocgen: "react-docgen-typescript",
+  },
 };
 
 export default config;

packages/orbit-components/README.md

@@ -42,7 +42,7 @@ or do so with [Yarn](https://yarnpkg.com/):
 
 For a live preview, check out our [Storybook](https://kiwicom.github.io/orbit/) or [orbit.kiwi](https://orbit.kiwi).
 
-You can also try `orbit-components` directly on our [Playground](https://orbit.kiwi/playground/).
+You can also try `orbit-components` directly on our [Playroom](https://kiwicom.github.io/orbit/playroom/).
 
 ## Contributing
 

packages/orbit-components/package.json

@@ -11,6 +11,7 @@
   },
   "scripts": {
     "storybook": "storybook dev -p 6007 -c .storybook --ci",
+    "playroom": "playroom start",
     "cy:dev": "vite cypress/integration --logLevel silent",
     "cy:run": "start-server-and-test cy:dev http-get://localhost:3000 'cypress run'",
     "cy:open": "start-server-and-test cy:dev http-get://localhost:3000 'cypress open'",
@@ -27,6 +28,7 @@
     "build:iconsFont": "node --loader ts-node/esm config/createSVGFont.mts",
     "build:emailIcons": "yarn build:icons && yarn build:iconsFont && node --loader ts-node/esm config/generateEmailIcons.mts",
     "build:storybook": "yarn build:icons && storybook build -c .storybook -o .out",
+    "build:playroom": "playroom build",
     "eslint:check": "eslint . --report-unused-disable-directives",
     "test-ct": "playwright test -c playwright-ct.config.ts",
     "deploy:storybook": "yarn storybook-to-ghpages -e ./.out",
@@ -91,17 +93,17 @@
     "@nanostores/router": "^0.3.1",
     "@playwright/experimental-ct-react": "^1.44.1",
     "@size-limit/webpack-why": "^11.1.4",
-    "@storybook/addon-a11y": "^8.2.4",
-    "@storybook/addon-controls": "^8.2.4",
-    "@storybook/addon-essentials": "^8.2.4",
-    "@storybook/addon-styling-webpack": "^1.0.0",
-    "@storybook/blocks": "^8.2.4",
-    "@storybook/manager-api": "^8.2.4",
-    "@storybook/preview-api": "^8.2.4",
-    "@storybook/react": "^8.2.4",
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-controls": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-styling-webpack": "^1.0.1",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/manager-api": "^8.4.7",
+    "@storybook/preview-api": "^8.4.7",
+    "@storybook/react": "^8.4.7",
     "@storybook/react-webpack5": "^8.4.7",
     "@storybook/storybook-deployer": "^2.8.16",
-    "@storybook/theming": "^8.2.1",
+    "@storybook/theming": "^8.4.7",
     "@svgr/core": "^6.3.1",
     "@svgr/plugin-jsx": "^6.3.1",
     "@svgr/plugin-prettier": "^6.3.1",
@@ -116,7 +118,7 @@
     "babel-plugin-require-context-hook": "^1.0.0",
     "css-loader": "^7.1.2",
     "cypress": "^13.2.0",
-    "eslint-plugin-storybook": "^0.9.0",
+    "eslint-plugin-storybook": "^0.11.2",
     "fs-extra": "^11.2.0",
     "jscodeshift": "^0.13.1",
     "jsdom": "^20.0.3",
@@ -125,15 +127,16 @@
     "onecolor": "^4.1.0",
     "ora": "^6.1.0",
     "pixelmatch": "^5.3.0",
+    "playroom": "^0.39.1",
     "pngjs": "^7.0.0",
     "postcss-loader": "8.1.1",
     "prism-react-renderer": "^2.3.1",
     "react-element-to-jsx-string": "^14.3.2",
     "react-window": "^1.8.10",
     "sharp": "^0.32.6",
     "start-server-and-test": "^1.13.1",
-    "storybook": "^8.2.4",
-    "storybook-addon-pseudo-states": "^3.1.1",
+    "storybook": "^8.4.7",
+    "storybook-addon-pseudo-states": "^4.0.2",
     "style-loader": "^4.0.0",
     "surge": "^0.23.0",
     "svg2ttf": "^6.0.0",

packages/orbit-components/playroom.config.js

@@ -0,0 +1,88 @@
+const path = require("path");
+const { defaultFoundation } = require("@kiwicom/orbit-design-tokens");
+
+module.exports = {
+  title: "Orbit Playroom",
+  components: require.resolve("./playroomComponents.tsx"),
+  outputPath: "./.playroom/playroom",
+  frameComponent: "./playroom/FrameComponent.tsx",
+  snippets: "./playroom/snippets/index.ts",
+  scope: "./playroom/scope.ts",
+  port: 9000,
+  openBrowser: false,
+  widths: Object.values(defaultFoundation.breakpoint),
+  defaultVisibleWidths: [
+    defaultFoundation.breakpoint.mediumMobile,
+    defaultFoundation.breakpoint.desktop,
+  ],
+  baseUrl: "/playroom/",
+  webpackConfig: () => ({
+    resolve: {
+      extensions: [".js", ".jsx", ".ts", ".tsx", ".css"],
+      modules: [
+        "node_modules",
+        path.resolve(__dirname),
+        path.resolve(__dirname, "src"),
+        path.resolve(__dirname, "lib"),
+        path.resolve(__dirname, "node_modules"),
+        path.resolve(__dirname, "../.."),
+      ],
+      alias: {
+        "@kiwicom/orbit-components": path.resolve(__dirname),
+      },
+    },
+    module: {
+      rules: [
+        {
+          test: /\.css$/i,
+          sideEffects: true,
+          exclude: /node_modules/,
+          use: [
+            require.resolve("style-loader"),
+            require.resolve("css-loader"),
+            {
+              loader: require.resolve("postcss-loader"),
+              options: {
+                postcssOptions: {
+                  plugins: [require.resolve("tailwindcss"), require.resolve("autoprefixer")],
+                },
+              },
+            },
+          ],
+        },
+        {
+          test: /\.(js|jsx|ts|tsx)$/,
+          exclude: /node_modules/,
+          use: {
+            loader: "babel-loader",
+            options: {
+              presets: ["@babel/preset-env", "@babel/preset-react", "@babel/preset-typescript"],
+            },
+          },
+        },
+      ],
+    },
+  }),
+  reactDocgenTypescriptConfig: {
+    // TODO: Disabling prop intellisense until we can fix the issue with correctly getting the props
+    propFilter: () => false,
+  },
+  exampleCode: `
+  <div className="bg-white-normal p-300 h-screen">
+    <Context>
+      {() => {
+        const [hasError, setHasError] = React.useState(false);
+
+        return (
+          <Button
+            onClick={() => setHasError(!hasError)}
+            type={hasError ? "critical" : "primary"}
+          >
+            {hasError ? "Ups, click again" : "Click Me"}
+          </Button>
+        );
+      }}
+    </Context>
+  </div>
+`,
+};

packages/orbit-components/playroom/FrameComponent.tsx

@@ -0,0 +1,14 @@
+import * as React from "react";
+import { OrbitProvider, defaultTheme } from "@kiwicom/orbit-components";
+
+import "./index.css";
+
+const FrameComponent = ({ children }) => {
+  return (
+    <OrbitProvider theme={defaultTheme} useId={React.useId}>
+      <div id="playroom-frame">{children}</div>
+    </OrbitProvider>
+  );
+};
+
+export default FrameComponent;

packages/orbit-components/playroom/index.css

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

packages/orbit-components/playroom/scope.ts

@@ -0,0 +1,9 @@
+import { useTheme } from "../src";
+
+const useScope = () => {
+  return {
+    theme: useTheme(),
+  };
+};
+
+export default useScope;