Add publish workflow (#5325)

.github/workflows/release.yml

@@ -0,0 +1,56 @@
+name: Release
+
+on:
+  push:
+    branches:
+      - main
+
+concurrency: ${{ github.workflow }}-${{ github.ref }}
+
+jobs:
+  release:
+    name: Release
+    runs-on: ubuntu-latest
+    permissions:
+      contents: write
+      pull-requests: write
+      id-token: write
+    steps:
+      - name: Checkout Repo
+        uses: actions/checkout@v3
+        with:
+          # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
+          fetch-depth: 0
+
+      - uses: pnpm/[email protected]
+        with:
+          version: 8.7.1
+
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v3
+        with:
+          node-version: 20.5
+          cache: "pnpm"
+
+      - name: Install dependencies
+        run: pnpm install --frozen-lockfile
+
+      - name: Build library
+        run: pnpm build:lib
+
+      - name: Build d.ts files
+        run: pnpm build:lib:dts
+
+      - name: Creating .npmrc
+        run: |
+          cat << EOF > "$HOME/.npmrc"
+            [email protected]
+            //registry.npmjs.org/:_authToken=$NPM_TOKEN
+          EOF
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+
+      - name: Publishing next version
+        run: ./publish/publish-next.js
+        env:
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}

documentation-site/components/header-navigation.jsx

@@ -8,7 +8,7 @@ LICENSE file in the root directory of this source tree.
 
 import * as React from "react";
 import Link from "next/link";
-import Image from 'next/image';
+import Image from "next/image";
 import { themedUseStyletron as useStyletron } from "../pages/_app";
 import Menu from "baseui/icon/menu";
 import DarkLogo from "../images/base-web.svg";
@@ -74,7 +74,8 @@ export default function HeaderNavigation({
               outline: `3px solid ${theme.colors.accent}`,
               outlineOffset: "5px",
             },
-          })}>
+          })}
+        >
           {/* eslint-disable-next-line jsx-a11y/anchor-is-valid */}
 
           <Image
@@ -83,7 +84,6 @@ export default function HeaderNavigation({
             height={40}
             width={97}
           />
-
         </Link>
         {/* Version Selector */}
         <div
@@ -117,7 +117,7 @@ export default function HeaderNavigation({
           </Button>
         </Link>
         {/* Link to component gallery */}
-        <Link href="/components" passHref legacyBehavior>
+        <Link href="https://baseweb.design/ladle" passHref legacyBehavior>
           <Button
             $as="a"
             size={SIZE.compact}

documentation-site/pages/components/layout-grid.mdx

@@ -43,8 +43,6 @@ All of these values are [customizable via your theme](https://baseweb.design/gui
 
 ## Examples
 
-Some examples may require you to open them in CodeSandbox to achieve a wide enough viewport for certain behaviors.
-
 <Example title="Basic" path="layout-grid/basic.tsx">
   <BasicExample />
 </Example>
@@ -127,8 +125,6 @@ The `order` prop is simply a proxy for the CSS property of the same name. [Click
   <BehaviorExample />
 </Example>
 
-To appreciate this example you may need to open it in CodeSandbox. The "behavior" (😅) is only visible on a wider viewport.
-
 The grid can have one of two possible behaviors: `fixed` or `fluid`. By default the grid is `fixed`- that is, once it reaches its maximum width, it will stay centered in the containing element.
 
 A fluid grid essentially ignores any maximum width. The grid will continue to expand to fill the containing element's width ad infinitum. Note, both fluid and fixed grids still have a margin on both sides.

documentation-site/pages/components/tabs-motion.mdx

@@ -121,7 +121,7 @@ By default, the content within a `TabPanel` will only mount once the correspondi
   <AlignmentExample />
 </Example>
 
-In this example we align the Tabs and TabPanels with our LayoutGrid component. This allows the TabBorder to expand to fill the viewport. You may want to open this example in CodeSandbox to get a better sense of the visual effect.
+In this example we align the Tabs and TabPanels with our LayoutGrid component. This allows the TabBorder to expand to fill the viewport.
 
 <Example title="Refs" path="tabs-motion/refs.tsx">
   <RefsExample />

documentation-site/pages/getting-started/learn.mdx

@@ -87,7 +87,7 @@ or through [GitHub issues](https://github.com/uber/baseweb/issues).
 
 ### Base Web with data fetching
 
-You can find a more complex application using Base Web [here](https://github.com/tajo/fusion-baseui) and see how it works on [CodeSandbox](https://codesandbox.io/s/strange-shadow-0lhyw). It helps you build an application
+You can find a more complex application using Base Web [here](https://github.com/tajo/fusion-baseui). It helps you build an application
 on top of Base Web, step by step.
 
 ### Base Web themes

documentation-site/pages/guides/theming.mdx

@@ -732,7 +732,7 @@ The following colors are "primitive" colors used to construct the theme when usi
 <Color name="mono900" />
 <Color name="mono1000" />
 
-The `theme.colors` object also includes component-specific properties. We won't enumerate those here since you should rarely need to reference them. The best way to explore component-specific properties is to go to a component's documentation page and use the sandbox at the top. An interactive Theme tab lets you dynamically change any property relevant to the component.
+The `theme.colors` object also includes component-specific properties. We won't enumerate those here since you should rarely need to reference them. The best way to explore component-specific properties is to go to a component's documentation page. An interactive Theme tab lets you dynamically change any property relevant to the component.
 
 ### Direction
 

documentation-site/pages/index.jsx

@@ -172,7 +172,7 @@ const Index = (props) => (
     </Markdown.p>
     <Markdown.p>
       For an overview of everything that we offer, check out the{` `}
-      <Link href="/components">component gallery</Link>.
+      <Link href="https://baseweb.design/ladle">component gallery</Link>.
     </Markdown.p>
     <H2>Extensibility</H2>
     <Markdown.p>

package.json

@@ -11,20 +11,22 @@
   "license": "MIT",
   "types": "index.d.ts",
   "sideEffects": false,
-  "module": "./esm/index.js",
   "repository": "uber/baseweb",
   "scripts": {
     "dev:docs": "next dev documentation-site",
     "dev:ladle": "ladle serve",
     "build:docs": "next build documentation-site",
     "build:ladle": "ladle build",
+    "build:lib": "NODE_ENV=production babel ./src --out-dir ./dist --config-file ./publish/.babelrc.js --extensions '.ts,.tsx,.js' --ignore **.test.*,**/__tests__/**,**/e2e.*,**/template-component/**,**/test/**",
+    "build:lib:dts": "tsc -p tsconfig.dist.json || true",
     "build": "ladle build && next build documentation-site && mkdir -p public && mv build public/ladle && cp -r documentation-site/out/* public",
     "prepare": "husky install"
   },
   "dependencies": {
     "@date-io/date-fns": "^2.13.1",
     "@date-io/moment": "^2.13.1",
     "card-validator": "^6.2.0",
+    "csstype": "2.6.11",
     "d3": "^6.7.0",
     "d3-array": "2.4.0",
     "date-fns": "^2.28.0",
@@ -58,7 +60,11 @@
     "styletron-react": ">=6"
   },
   "devDependencies": {
+    "@babel/cli": "^7.23.4",
     "@babel/generator": "^7.23.6",
+    "@babel/plugin-transform-class-properties": "^7.23.3",
+    "@babel/preset-env": "^7.23.6",
+    "@babel/preset-react": "^7.23.3",
     "@babel/preset-typescript": "^7.23.3",
     "@babel/template": "^7.22.15",
     "@babel/traverse": "^7.23.6",
@@ -71,7 +77,9 @@
     "@types/node": "20.10.5",
     "@types/react": "^18.2.45",
     "@types/react-dom": "^18.2.18",
+    "babel-plugin-transform-styletron-display-name": "^1.2.0",
     "codesandboxer": "^1.0.3",
+    "core-js": "^3.34.0",
     "cross-env": "^7.0.3",
     "email-validator": "^2.0.4",
     "husky": "^8.0.0",