feat(storybook): add root level storybook instance for landing page (#…

…358) * feat(sb): add root level storybook for framework composition * chore(sb): update welcome page * chore(sb): update welcome page styles and content * chore(sb): update labs index styles; update gh-pages publish * Update .github/workflows/storybook-publish.yml Co-authored-by: Anna Wen <54281166+annawen1@users.noreply.github.com> --------- Co-authored-by: Anna Wen <54281166+annawen1@users.noreply.github.com>
carbon-design-system · Jan 7, 2025 · 473596b · 473596b
1 parent 180645e
commit 473596b
Show file tree

Hide file tree

Showing 16 changed files with 431 additions and 184 deletions.
diff --git a/.github/workflows/storybook-publish.yml b/.github/workflows/storybook-publish.yml
@@ -28,13 +28,29 @@ jobs:
       - name: Build
         run: yarn build
 
+      - name: Build storybook for Labs
+        working-directory: '.'
+        run: yarn storybook:build
+
       - name: Build storybook for web-components
         working-directory: 'packages/web-components'
         run: yarn storybook:build
 
       - name: Build storybook for react
         working-directory: 'packages/react'
         run: yarn storybook:build
+      - name: Create CNAME
+        run: |
+          touch storybook-static/.nojekyll
+          touch storybook-static/CNAME
+          echo "labs.carbondesignsystem.com" > storybook-static/CNAME
+      # Deploy Labs Storybook Github Pages using `gh-pages` package
+      - name: Deploy Labs Storybook
+        run: |
+          git remote set-url origin https://git:${GITHUB_TOKEN}@github.com/${GITHUB_REPOSITORY}.git
+          npx gh-pages -d storybook-static -u "github-actions-bot <support+actions@github.com>" --message "chore(deploy): deploy storybook"
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
 
       # Deploy web-components Storybook Github Pages using `gh-pages` package
       - name: Deploy web-components Storybook

diff --git a/.gitignore b/.gitignore
@@ -33,3 +33,5 @@ package.tgz
 .nx/*
 agentic.stories.js
 /.history
+
+*storybook.log
diff --git a/.storybook/index.scss b/.storybook/index.scss
@@ -0,0 +1 @@
+@forward '@carbon/styles';
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -0,0 +1,33 @@
+import { join, dirname } from 'path';
+
+/**
+ * This function is used to resolve the absolute path of a package.
+ * It is needed in projects that use Yarn PnP or are set up within a monorepo.
+ */
+function getAbsolutePath(value) {
+  return dirname(require.resolve(join(value, 'package.json')));
+}
+
+/** @type { import('@storybook/web-components-vite').StorybookConfig } */
+const config = {
+  stories: [
+    './welcome/**/*.mdx',
+    './welcome/**/*.stories.@(js|jsx|mjs|ts|tsx)',
+  ],
+  addons: [getAbsolutePath('@storybook/addon-essentials')],
+  framework: {
+    name: getAbsolutePath('@storybook/web-components-vite'),
+    options: {},
+  },
+  refs: {
+    'web-components': {
+      title: 'Web Components',
+      url: 'web-components/index.html',
+    },
+    react: {
+      title: 'React components',
+      url: 'react/index.html',
+    },
+  },
+};
+export default config;
diff --git a/.storybook/manager-head.html b/.storybook/manager-head.html
@@ -0,0 +1,122 @@
+<meta
+  name="keywords"
+  content="IBM, design, system, Carbon, design system, Bluemix, styleguide, style, guide, components, library, pattern, kit, component, cloud, React, React.js" />
+<meta
+  name="description"
+  content="This is Carbon Labs, an innovation space for the creation of components leveraging Carbon Design System." />
+
+<!-- Open Graph -->
+<meta property="og:title" content="Carbon Labs" />
+<meta property="og:site_name" content="Carbon Labs" />
+<meta
+  property="og:description"
+  content="This is Carbon Labs, an innovation space for the creation of components leveraging Carbon Design System." />
+<meta
+  property="og:image"
+  content="https://media.github.ibm.com/user/1679/files/aa651000-7749-11eb-900e-eeb9312ed756" />
+<meta property="og:url" content="http://labs.carbondesignsystem.com" />
+
+<!-- Favicon -->
+<link rel="icon" type="image/svg+xml" href="favicon.svg" sizes="any" />
+
+<footer>
+  <dds-footer-container
+    key="footer"
+    disable-locale-button="true"
+    size="micro" />,
+</footer>
+
+<script
+  key="8"
+  type="module"
+  src="https://1.www.s81c.com/common/carbon-for-ibm-dotcom/tag/v1/latest/footer.min.js" />
+
+<!-- Storybook override -->
+<script>
+  setTimeout(function () {
+    document.title = 'Carbon Labs';
+  }, 1000);
+</script>
+
+<!-- Tealium/GA Set up -->
+<script type="text/javascript">
+  window._ibmAnalytics = {
+    settings: {
+      name: 'CarbonLabsStorybook',
+      isSpa: true,
+      tealiumProfileName: 'ibm-web-app',
+    },
+    onLoad: [['ibmStats.pageview', []]],
+  };
+  digitalData = {
+    page: {
+      pageInfo: {
+        ibm: {
+          siteId: 'IBM_' + _ibmAnalytics.settings.name,
+        },
+      },
+      category: {
+        primaryCategory: 'PC100',
+      },
+    },
+  };
+</script>
+
+<script
+  src="//1.www.s81c.com/common/stats/ibm-common.js"
+  type="text/javascript"
+  async="async"></script>
+
+<!-- Style overrides -->
+<style>
+  body {
+    font-family: 'IBM Plex Sans', 'Helvetica Neue', Arial, sans-serif;
+  }
+
+  body a[href='/?path=/settings/about'] {
+    display: none;
+  }
+
+  /* This style is required because of the compliance footer */
+  #root > div {
+    height: calc(100vh - 48px);
+  }
+
+  /* This style is required because of the compliance footer in smaller screens */
+  @media (max-width: 671px) {
+    nav[class^='css-'] {
+      height: 281px;
+    }
+  }
+
+  footer {
+    position: absolute;
+    bottom: 0;
+    width: 100%;
+    z-index: 99999;
+  }
+
+  .os-content form span {
+    font-weight: 600;
+  }
+
+  .os-content a button {
+    color: #161616;
+  }
+
+  button.sidebar-item svg {
+    color: #161616;
+  }
+
+  a.sidebar-item[data-selected='true'] {
+    color: #161616;
+  }
+
+  a.sidebar-item[data-selected='true'] svg {
+    color: #161616;
+  }
+
+  mark[class*='css-'] {
+    color: #0f62fe;
+  }
+</style>
diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html
@@ -0,0 +1,41 @@
+<!--
+@license
+
+Copyright IBM Corp. 2023
+
+This source code is licensed under the Apache-2.0 license found in the
+LICENSE file in the root directory of this source tree.
+-->
+
+<link
+  rel="stylesheet"
+  href="https://1.www.s81c.com/common/carbon/plex/sans.css" />
+
+<script>
+  window.digitalData = window.digitalData || {
+    page: {
+      category: {
+        primaryCategory: '',
+      },
+      pageInfo: {
+        effectiveDate: '',
+        expiryDate: '',
+        language: 'en-US',
+        publishDate: '',
+        publisher: '',
+        version: 'Carbon Labs',
+        ibm: {
+          contentDelivery: '',
+          contentProducer: '',
+          country: 'US',
+          industry: '',
+          owner: '',
+          siteID: '',
+          subject: '',
+          type: '',
+        },
+      },
+      isDataLayerReady: true,
+    },
+  };
+</script>
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -0,0 +1,15 @@
+import './styles.scss';
+
+/** @type { import('@storybook/web-components').Preview } */
+const preview = {
+  parameters: {
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;
diff --git a/.storybook/styles.scss b/.storybook/styles.scss
@@ -0,0 +1,3 @@
+@use 'index.scss' as styles with (
+  $font-path: '~@ibm/plex'
+);
diff --git a/.storybook/welcome/CarbonLabs2.png b/.storybook/welcome/CarbonLabs2.png
diff --git a/.storybook/welcome/Welcome.jsx b/.storybook/welcome/Welcome.jsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { ArrowRight } from '@carbon/icons-react';
+import { Link, Stack } from '@carbon/react';
+import './welcome.scss';
+export const Welcome = () => {
+  return (
+    <>
+      <div className="welcome__container">
+        <h2 className="welcome__heading">@carbon-labs</h2>
+        <Stack>
+          <Link
+            href="https://github.com/carbon-design-system/carbon-labs"
+            className="welcome__link"
+            renderIcon={ArrowRight}>
+            GitHub repo
+          </Link>
+          <Link
+            href="https://carbondesignsystem.com/"
+            className="welcome__link"
+            renderIcon={ArrowRight}>
+            Carbon Design System
+          </Link>
+          <Link
+            href="https://github.com/carbon-design-system/carbon/blob/main/SECURITY.md"
+            className="welcome__link"
+            renderIcon={ArrowRight}>
+            Security policy
+          </Link>
+        </Stack>
+      </div>
+    </>
+  );
+};
diff --git a/.storybook/welcome/Welcome.mdx b/.storybook/welcome/Welcome.mdx
@@ -0,0 +1,8 @@
+import { Welcome as Intro } from './Welcome';
+import { Meta, Unstyled } from '@storybook/blocks';
+
+<Meta title="Welcome to Carbon Labs" />
+
+<Unstyled>
+  <Intro />
+</Unstyled>
diff --git a/.storybook/welcome/welcome.scss b/.storybook/welcome/welcome.scss
@@ -0,0 +1,30 @@
+@use '@carbon/styles/scss/type';
+@use '@carbon/styles/scss/colors';
+
+.welcome__container {
+  position: fixed;
+  padding: 3rem;
+  background: url('./CarbonLabs2.png') no-repeat center center fixed;
+  background-size: cover;
+  block-size: 100vh;
+  inline-size: 100vw;
+  inset-block-start: 0;
+  inset-inline-start: 0;
+}
+
+.welcome__heading {
+  @include type.type-style('productive-heading-07');
+
+  color: colors.$gray-80;
+}
+
+.welcome__link,
+.welcome__link:hover,
+.welcome__link.cds--link:visited {
+  margin-top: 1rem;
+  color: colors.$blue-70;
+}
+
+.welcome__link:first-child {
+  margin-top: 2rem;
+}
diff --git a/package.json b/package.json
@@ -28,11 +28,17 @@
     "lint:license:staged": "tools/check-license.cjs -w",
     "lint:styles": "stylelint '**/*.{css,scss}' --report-needless-disables --report-invalid-scope-disables",
     "prepare": "husky install",
-    "reset": "yarn cache clean && yarn clean && yarn install && yarn build"
+    "reset": "yarn cache clean && yarn clean && yarn install && yarn build",
+    "storybook": "storybook dev -p 6006",
+    "storybook:build": "storybook build"
   },
   "devDependencies": {
     "@commitlint/cli": "^19.0.0",
     "@commitlint/config-conventional": "^19.0.0",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/blocks": "^8.4.7",
+    "@storybook/web-components": "^8.4.7",
+    "@storybook/web-components-vite": "^8.4.7",
     "@types/fs-extra": "^11.0.4",
     "@types/mocha": "^10.0.3",
     "@types/react": "^18.2.36",
@@ -59,12 +65,14 @@
     "husky": "^9.0.0",
     "lerna": "^8.0.0",
     "lint-staged": "^15.0.2",
+    "lit": "^3.2.1",
     "prettier": "^2.8.8",
     "prettier-config-carbon": "^0.11.0",
     "rollup": "^4.0.0",
     "rollup-plugin-esbuild": "^6.1.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-postcss-lit": "^2.1.0",
+    "storybook": "^8.4.7",
     "strip-comments": "^2.0.1",
     "stylelint": "15.11.0",
     "stylelint-config-carbon": "1.17.0",

diff --git a/packages/react/package.json b/packages/react/package.json
@@ -1,14 +1,14 @@
 {
-  "name": "@carbon/labs-react",
+  "name": "@carbon-labs/react",
   "version": "0.0.0",
   "private": true,
   "type": "module",
   "description": "React components for Carbon Labs",
   "license": "Apache-2.0",
   "repository": "https://github.com/carbon-design-system/carbon-labs",
   "scripts": {
+    "storybook": "storybook dev -p 6008",
     "generate": "node tasks/generate",
-    "storybook": "storybook dev -p 3000",
     "storybook:build": "storybook build",
     "test": "jest",
     "test:updateSnapshot": "jest -u"