Updates configs & ci

Update turbo.json

Update turbo.json

Update nx.json

Update benchmark.yml

restore build-storybook

fixes dependencies

Create sizeDiff.yml

Update sizeDiff.yml

Update sizeDiff.yml

Update .npmpackagejsonlintrc.json

rm lodash from icon-button

rm bad references from palette story

fix nx?

Author: TheSonOfThomp

.github/workflows/benchmark.yml

@@ -13,14 +13,13 @@ jobs:
     name: Baseline Build
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-
-      # Only setup & build if there was no build cache hit
       - name: Use Node.js 16
         uses: actions/setup-node@v3
         with:
           node-version: '16'
 
+      - uses: actions/checkout@v2
+
       - name: Install
         run: yarn install --frozen-lockfile --prefer-offline
 
@@ -31,13 +30,15 @@ jobs:
     name: Build with Turbo
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-
       - name: Use Node.js 16
         uses: actions/setup-node@v3
         with:
           node-version: '16'
 
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
       - name: Install
         run: yarn install --frozen-lockfile --prefer-offline
 
@@ -48,13 +49,15 @@ jobs:
     name: Build with Nx
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v2
-
       - name: Use Node.js 16
         uses: actions/setup-node@v3
         with:
           node-version: '16'
 
+      - uses: actions/checkout@v2
+        with:
+          fetch-depth: 0
+
       - name: Install
         run: yarn install --frozen-lockfile --prefer-offline
 

.github/workflows/sizeDiff.yml

@@ -0,0 +1,36 @@
+name: File Size
+
+on:
+  pull_request:
+    types: [opened, synchronize, reopened]
+
+jobs:
+  sizeDiff:
+    name: Check file size
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+
+      - name: Use Node.js 16
+        uses: actions/setup-node@v3
+        with:
+          node-version: '16'
+          cache: yarn
+          cache-dependency-path: 'yarn.lock'
+
+      - run: yarn install --frozen-lockfile --prefer-offline
+
+      - uses: actions/cache/restore@v3
+        name: Restore build cache
+        id: build-cache
+        with:
+          path: |
+            **/dist
+            !**/node_modules
+          key: ${{ runner.os }}-build-cache-${{ hashFiles('**/rollup.config.js', '**/babel.config.js', '**/src/', '**/scripts/', '!**/node_modules', '!**/dist') }}
+
+      - uses: preactjs/compressed-size-action@v2
+        with:
+          repo-token: ${{ secrets.GITHUB_TOKEN }}
+          clean-script: 'clean'
+          build-script: 'build'

.npmpackagejsonlintrc.json

@@ -6,7 +6,7 @@
     {
       "patterns": ["./packages/code/package.json"],
       "rules": {
-        "prefer-caret-version-dependencies": "warning"
+        "prefer-caret-version-dependencies": "off"
       }
     }
   ]

nx.json

@@ -18,7 +18,7 @@
     },
     "tsc": {
       "dependsOn": ["^tsc", "^build"],
-      "outputs": ["{projectRoot}/dist/*.d.ts"]
+      "outputs": ["{projectRoot}/dist"]
     }
   }
 }

package.json

@@ -12,7 +12,7 @@
     "build": "turbo run build tsc",
     "build:turbo": "turbo run build tsc",
     "build:nx": "nx run-many -t build,tsc",
-    "build:storybook": "storybook build",
+    "build-storybook": "storybook build",
     "build:docs": "npx ts-node ./scripts/parse-tsdocs.ts",
     "lint": "npm-run-all --parallel lint:*",
     "lint:prettier": "prettier --check \"**/*.{js,ts,tsx,json,md,yml}\"",

packages/icon-button/package.json

@@ -39,8 +39,5 @@
   },
   "bugs": {
     "url": "https://jira.mongodb.org/projects/PD/summary"
-  },
-  "devDependencies": {
-    "lodash": "^4.17.21"
   }
 }

packages/palette/src/Palette.story.tsx

@@ -1,16 +1,9 @@
-import React, { useRef, useState } from 'react';
+import React from 'react';
 import { isUndefined } from 'lodash';
 import { darken, lighten, readableColor, transparentize } from 'polished';
 
 import { css, cx } from '@leafygreen-ui/emotion';
 import { HTMLElementProps, StoryMetaType } from '@leafygreen-ui/lib';
-import {
-  focusRing,
-  hoverRing,
-  transitionDuration,
-  typeScales,
-} from '@leafygreen-ui/tokens';
-import Tooltip from '@leafygreen-ui/tooltip';
 
 import palette from './palette';
 
@@ -30,31 +23,20 @@ const colorBlock = css`
   padding-bottom: 100%;
   border-radius: 8px;
   cursor: pointer;
-  transition: box-shadow ease-in-out ${transitionDuration.default}ms;
-  &:hover {
-    box-shadow: ${hoverRing.light.gray};
-  }
-  &:focus {
-    box-shadow: ${focusRing.light.default};
-  }
 `;
 
 const hexLabelStyle = css`
   width: calc(100% - 1em);
   position: absolute;
   left: 50%;
   margin: auto;
-  font-size: ${typeScales.body1.fontSize}px;
-  line-height: ${typeScales.body1.lineHeight}px;
   text-align: center;
   padding: 3px 0.3rem;
   border-radius: 4px;
   transform: translate(-50%, -125%);
 `;
 
 const nameLabelStyle = css`
-  font-size: ${typeScales.body1.fontSize}px;
-  line-height: ${typeScales.body1.lineHeight}px;
   text-align: center;
   color: ${palette.gray.dark1};
   margin: auto;
@@ -82,8 +64,6 @@ interface ColorBlockProps extends HTMLElementProps<'div'> {
 }
 
 function ColorBlock({ hue, shade, ...rest }: ColorBlockProps) {
-  const [copied, setCopied] = useState(false);
-  const colorBlockRef = useRef<HTMLButtonElement>(null);
   const name = `${hue} ${shade ?? ''}`;
 
   let color: string;
@@ -109,29 +89,11 @@ function ColorBlock({ hue, shade, ...rest }: ColorBlockProps) {
     background-color: ${lighten(0.2, color)};
   `;
 
-  const copyHex = () => {
-    navigator.clipboard.writeText(color);
-
-    setCopied(true);
-
-    setTimeout(() => {
-      setCopied(false);
-    }, 1500);
-  };
-
   return (
     <div className={cx(colorBlockWrapper, colorBlockWrapperDynamic)} {...rest}>
-      <button className={cx(colorBlock, colorBlockColor)} onClick={copyHex} />
+      <button className={cx(colorBlock, colorBlockColor)} />
       <div className={cx(hexLabelStyle, hexLabelColor)}>{color}</div>
       <div className={nameLabelStyle}>{name}</div>
-      <Tooltip
-        open={copied}
-        refEl={colorBlockRef}
-        usePortal={false}
-        spacing={0}
-      >
-        Copied {color}
-      </Tooltip>
     </div>
   );
 }
@@ -162,7 +124,13 @@ export function AllColors() {
 
   return (
     <div>
-      <ColorBlock hue="white" name="white" style={{ marginRight: '24px' }} />
+      <ColorBlock
+        hue="white"
+        name="white"
+        className={css`
+          marginright: '24px';
+        `}
+      />
       <ColorBlock hue="black" name="black" />
       {hues.map(hue => {
         const hueValues = palette[hue];

packages/lib/src/storybook/PropCombinationsDecorator.story.tsx renamed to stories/PropCombinationsDecorator.story.tsx

@@ -10,7 +10,7 @@
     },
     "tsc": {
       "dependsOn": ["^tsc", "^build"],
-      "outputs": ["dist/**/*.d.ts", "tsconfig.tsbuildinfo"]
+      "outputs": ["dist/**", "tsconfig.tsbuildinfo"]
     }
   }
 }