chore: add Playroom deployment

.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

@@ -52,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 }}
@@ -61,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/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
 

readme.md

@@ -63,7 +63,7 @@ If you want to use custom theme inside your project, it's necessary to wrap your
 
 For live preview check out [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).
 
 ## Documentation
 

scripts/post-changelog.mjs

@@ -102,13 +102,22 @@ async function publishChangelog(package_) {
     const tags = await simpleGit().tags({ "--sort": "-taggerdate" });
     const diff = await getDiff(tags.latest ?? "", changelogPath(package_));
     const files = gitDiffParser.parse(diff);
+    let playroomLink;
+
     if (files.length === 0) {
       console.log(`No changes in ${package_}`);
       return;
     }
+
+    if (package_ === "orbit-components") {
+      const latestTag = tags.all.find(tag => tag.includes("@kiwicom/orbit-components@"));
+      const releaseVersion = latestTag.split("@").pop().replace(".", "-");
+      playroomLink = `**Playroom for ${releaseVersion} is available [here](https://kiwicom-orbit-v${releaseVersion}.surge.sh)** 🕹️ \n`
+    }
+
     const changelog = getChangelogFromDiff(files);
     const formattedChangelog = format(changelog, package_);
-    const slackifiedChangelog = slackifyMarkdown(formattedChangelog);
+    const slackifiedChangelog = slackifyMarkdown(playroomLink || '' + formattedChangelog);
 
     if (argv.dry) {
       console.info(formattedChangelog);