bump deps, fix some packaging issues, fix ci

.github/workflows/npm-publish.yml

@@ -12,9 +12,6 @@ permissions:
 
 jobs:
  build:
- # allow failure publishing to npm for now
- # TODO: remove this once we have a token
- continue-on-error: ${{ matrix.registry.url == 'https://registry.npmjs.org' }}
  strategy:
  matrix:
  registry:
@@ -39,14 +36,26 @@ jobs:
  node-version-file: '.nvmrc'
  cache: pnpm
  registry-url: ${{ matrix.registry.url }}
- scope: "@invoke-ai"
+ scope: '@invoke-ai'
+
+ # TODO: remove when https://github.com/pnpm/pnpm/issues/7579 is resolved
+ - name: Reinstall @invoke-ai packages
+ shell: bash
+ run: |
+ VERSION_ESLINT=$(node -p "require('./package.json').devDependencies['@invoke-ai/eslint-config-react']")
+ VERSION_PRETTIER=$(node -p "require('./package.json').devDependencies['@invoke-ai/prettier-config-react']")
+
+ pnpm uninstall @invoke-ai/eslint-config-react @invoke-ai/prettier-config-react
+ pnpm install --ignore-scripts -D @invoke-ai/eslint-config-react@$VERSION_ESLINT -D @invoke-ai/prettier-config-react@$VERSION_PRETTIER
+ env:
+ NODE_AUTH_TOKEN: ${{ secrets[matrix.registry.token_secret] }}
 
  - name: Install dependencies
  run: pnpm install --frozen-lockfile --ignore-scripts
  env:
  NODE_AUTH_TOKEN: ${{ secrets[matrix.registry.token_secret] }}
 
- - name: Version bump
+ - name: Version bump (prepatch)
  # only if manual workflow dispatch and not on a tag
  if: github.event_name == 'workflow_dispatch' && !startsWith(github.ref, 'refs/tags/')
  run: npm version prepatch --preid=$(git rev-parse --short HEAD) --no-git-tag-version

.gitignore

@@ -22,3 +22,5 @@ dist-ssr
 *.njsproj
 *.sln
 *.sw?
+
+stats.html

lib/components/context-menu/context-menu.tsx

@@ -33,7 +33,9 @@ export const ContextMenu = typedMemo(<T extends HTMLElement = HTMLElement>(props
  onClose();
  return;
  }
- if (targetRef.current?.contains(e.target as HTMLElement) || e.target === targetRef.current) {
+ // `contains()` requires the arg to be Node. Technically it can be any EventTarget, but it won't cause an error.
+ /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+ if (targetRef.current?.contains(e.target as Node) || e.target === targetRef.current) {
  // clear pending delayed open
  window.clearTimeout(timeoutRef.current);
  e.preventDefault();

lib/components/custom-select/custom-select.tsx

@@ -89,7 +89,7 @@ export const CustomSelect = (props: CustomSelectProps) => {
  const value = useMemo(() => (selectedItem ? [selectedItem.value] : []), [selectedItem]);
 
  const groupedItems = useMemo<ItemGroup[]>(() => {
- const _groupedItems = items.reduce(groupedItemsReducer, [] as ItemGroup[]);
+ const _groupedItems = items.reduce<ItemGroup[]>(groupedItemsReducer, []);
  _groupedItems.sort(groupSortFunc);
  return _groupedItems;
  }, [groupSortFunc, items]);

lib/components/slider/range-slider-mark.tsx

@@ -3,7 +3,7 @@ import { motion } from 'framer-motion';
 
 import { typedMemo } from '../../util';
 import type { SliderMarkProps } from './slider-mark';
-import { sliderMarkAnimationConstants } from './slider-mark';
+import { sliderMarkStyles } from './slider-mark-styles';
 
 export type RangeSliderMarkProps = SliderMarkProps;
 
@@ -12,12 +12,12 @@ export const RangeSliderMark = typedMemo(({ value, label, index, total }: RangeS
  return (
  <ChakraRangeSliderMark
  as={motion.div}
- initial={sliderMarkAnimationConstants.initialFirstLast}
- animate={sliderMarkAnimationConstants.animateFirstLast}
- exit={sliderMarkAnimationConstants.exitFirstLast}
+ initial={sliderMarkStyles.initialFirstLast}
+ animate={sliderMarkStyles.animateFirstLast}
+ exit={sliderMarkStyles.exitFirstLast}
  key={value}
  value={value}
- sx={sliderMarkAnimationConstants.firstMarkStyle}
+ sx={sliderMarkStyles.firstMarkStyle}
  >
  {label}
  </ChakraRangeSliderMark>
@@ -28,12 +28,12 @@ export const RangeSliderMark = typedMemo(({ value, label, index, total }: RangeS
  return (
  <ChakraRangeSliderMark
  as={motion.div}
- initial={sliderMarkAnimationConstants.initialFirstLast}
- animate={sliderMarkAnimationConstants.animateFirstLast}
- exit={sliderMarkAnimationConstants.exitFirstLast}
+ initial={sliderMarkStyles.initialFirstLast}
+ animate={sliderMarkStyles.animateFirstLast}
+ exit={sliderMarkStyles.exitFirstLast}
  key={value}
  value={value}
- sx={sliderMarkAnimationConstants.lastMarkStyle}
+ sx={sliderMarkStyles.lastMarkStyle}
  >
  {label}
  </ChakraRangeSliderMark>
@@ -43,9 +43,9 @@ export const RangeSliderMark = typedMemo(({ value, label, index, total }: RangeS
  return (
  <ChakraRangeSliderMark
  as={motion.div}
- initial={sliderMarkAnimationConstants.initialOther}
- animate={sliderMarkAnimationConstants.animateOther}
- exit={sliderMarkAnimationConstants.exitOther}
+ initial={sliderMarkStyles.initialOther}
+ animate={sliderMarkStyles.animateOther}
+ exit={sliderMarkStyles.exitOther}
  key={value}
  value={value}
  >

lib/components/slider/slider-mark-styles.ts

@@ -0,0 +1,50 @@
+import type { SystemStyleObject } from '@chakra-ui/styled-system';
+import type { MotionProps } from 'framer-motion';
+
+const initialFirstLast: MotionProps['initial'] = { opacity: 0, y: 10 };
+const initialOther = { ...initialFirstLast, x: '-50%' };
+
+const animateFirstLast: MotionProps['animate'] = {
+ opacity: 1,
+ y: 0,
+ transition: { duration: 0.2, ease: 'easeOut' },
+};
+const animateOther: MotionProps['animate'] = { ...animateFirstLast, x: '-50%' };
+
+const exitFirstLast: MotionProps['exit'] = {
+ opacity: 0,
+ y: 10,
+ transition: { duration: 0.2, ease: 'anticipate' },
+};
+const exitOther: MotionProps['exit'] = { ...exitFirstLast, x: '-50%' };
+
+const firstMarkStyle: SystemStyleObject = {
+ insetInlineStart: '0 !important',
+ insetInlineEnd: 'unset !important',
+};
+const lastMarkStyle: SystemStyleObject = {
+ insetInlineStart: 'unset !important',
+ insetInlineEnd: '0 !important',
+};
+
+type SliderMarkAnimationOptions = {
+ initialFirstLast: MotionProps['initial'];
+ initialOther: MotionProps['initial'];
+ exitFirstLast: MotionProps['exit'];
+ exitOther: MotionProps['exit'];
+ animateFirstLast: MotionProps['animate'];
+ animateOther: MotionProps['animate'];
+ firstMarkStyle: SystemStyleObject;
+ lastMarkStyle: SystemStyleObject;
+};
+
+export const sliderMarkStyles: SliderMarkAnimationOptions = {
+ initialFirstLast,
+ initialOther,
+ exitFirstLast,
+ exitOther,
+ animateFirstLast,
+ animateOther,
+ firstMarkStyle,
+ lastMarkStyle,
+} as const;

lib/components/slider/slider-mark.tsx

@@ -1,57 +1,8 @@
 import { SliderMark as ChakraSliderMark } from '@chakra-ui/react';
-import type { SystemStyleObject } from '@chakra-ui/styled-system';
-import type { MotionProps } from 'framer-motion';
 import { motion } from 'framer-motion';
 
 import { typedMemo } from '../../util';
-
-const initialFirstLast: MotionProps['initial'] = { opacity: 0, y: 10 };
-const initialOther = { ...initialFirstLast, x: '-50%' };
-
-const animateFirstLast: MotionProps['animate'] = {
- opacity: 1,
- y: 0,
- transition: { duration: 0.2, ease: 'easeOut' },
-};
-const animateOther: MotionProps['animate'] = { ...animateFirstLast, x: '-50%' };
-
-const exitFirstLast: MotionProps['exit'] = {
- opacity: 0,
- y: 10,
- transition: { duration: 0.2, ease: 'anticipate' },
-};
-const exitOther: MotionProps['exit'] = { ...exitFirstLast, x: '-50%' };
-
-const firstMarkStyle: SystemStyleObject = {
- insetInlineStart: '0 !important',
- insetInlineEnd: 'unset !important',
-};
-const lastMarkStyle: SystemStyleObject = {
- insetInlineStart: 'unset !important',
- insetInlineEnd: '0 !important',
-};
-
-type SliderMarkAnimationOptions = {
- initialFirstLast: MotionProps['initial'];
- initialOther: MotionProps['initial'];
- exitFirstLast: MotionProps['exit'];
- exitOther: MotionProps['exit'];
- animateFirstLast: MotionProps['animate'];
- animateOther: MotionProps['animate'];
- firstMarkStyle: SystemStyleObject;
- lastMarkStyle: SystemStyleObject;
-};
-
-export const sliderMarkAnimationConstants: SliderMarkAnimationOptions = {
- initialFirstLast,
- initialOther,
- exitFirstLast,
- exitOther,
- animateFirstLast,
- animateOther,
- firstMarkStyle,
- lastMarkStyle,
-} as const;
+import { sliderMarkStyles } from './slider-mark-styles';
 
 export type SliderMarkProps = {
  value: number;
@@ -65,12 +16,12 @@ export const SliderMark = typedMemo(({ value, label, index, total }: SliderMarkP
  return (
  <ChakraSliderMark
  as={motion.div}
- initial={sliderMarkAnimationConstants.initialFirstLast}
- animate={sliderMarkAnimationConstants.animateFirstLast}
- exit={sliderMarkAnimationConstants.exitFirstLast}
+ initial={sliderMarkStyles.initialFirstLast}
+ animate={sliderMarkStyles.animateFirstLast}
+ exit={sliderMarkStyles.exitFirstLast}
  key={value}
  value={value}
- sx={sliderMarkAnimationConstants.firstMarkStyle}
+ sx={sliderMarkStyles.firstMarkStyle}
  >
  {label}
  </ChakraSliderMark>
@@ -81,12 +32,12 @@ export const SliderMark = typedMemo(({ value, label, index, total }: SliderMarkP
  return (
  <ChakraSliderMark
  as={motion.div}
- initial={sliderMarkAnimationConstants.initialFirstLast}
- animate={sliderMarkAnimationConstants.animateFirstLast}
- exit={sliderMarkAnimationConstants.exitFirstLast}
+ initial={sliderMarkStyles.initialFirstLast}
+ animate={sliderMarkStyles.animateFirstLast}
+ exit={sliderMarkStyles.exitFirstLast}
  key={value}
  value={value}
- sx={sliderMarkAnimationConstants.lastMarkStyle}
+ sx={sliderMarkStyles.lastMarkStyle}
  >
  {label}
  </ChakraSliderMark>
@@ -96,9 +47,9 @@ export const SliderMark = typedMemo(({ value, label, index, total }: SliderMarkP
  return (
  <ChakraSliderMark
  as={motion.div}
- initial={sliderMarkAnimationConstants.initialOther}
- animate={sliderMarkAnimationConstants.animateOther}
- exit={sliderMarkAnimationConstants.exitOther}
+ initial={sliderMarkStyles.initialOther}
+ animate={sliderMarkStyles.animateOther}
+ exit={sliderMarkStyles.exitOther}
  key={value}
  value={value}
  >

lib/theme/space.ts

@@ -4,12 +4,12 @@ const getSpaceValues = (fractionOfDefault = 0.75) => {
  80, 96,
  ];
 
- const spaceObject = spaceKeys.reduce(
+ const spaceObject = spaceKeys.reduce<Record<string, string>>(
  (acc, val) => {
  acc[val] = `${val * (0.25 * fractionOfDefault)}rem`;
  return acc;
  },
- { px: '1px' } as Record<string, string>
+ { px: '1px' }
  );
 
  return spaceObject;

lib/theme/util/generateColorPalette.ts

@@ -15,14 +15,21 @@ export function generateColorPalette(H: string | number, S: string | number, alp
  const lightnessSteps = [0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55, 59, 64, 68, 73, 77, 82, 86, 95, 100];
 
  const p = colorSteps.reduce((palette, step, index) => {
+ // We know this is a number.
+ /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
  const A = alpha ? (lightnessSteps[index] as number) / 100 : 1;
 
  // Lightness should be 50% for alpha colors
  const L = alpha ? 50 : lightnessSteps[colorSteps.length - 1 - index];
 
- palette[step as keyof typeof palette] = `hsl(${H} ${S}% ${L}% / ${A})`;
+ // We know this is a key of PaletteSteps.
+ /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
+ palette[step as keyof PaletteSteps] = `hsl(${H} ${S}% ${L}% / ${A})`;
 
  return palette;
+
+ // We know this will eventually be a valid PaletteSteps object.
+ /* eslint-disable-next-line @typescript-eslint/consistent-type-assertions */
  }, {} as PaletteSteps);
 
  return p;

package.json

@@ -9,10 +9,6 @@
  "type": "git",
  "url": "git+https://github.com/invoke-ai/ui-library.git"
  },
- "publishConfig": {
- "access": "public",
- "registry": "https://npm.pkg.github.com"
- },
  "author": "Invoke",
  "license": "Apache-2.0",
  "bugs": {
@@ -62,8 +58,8 @@
  "react-dom": "^18.2.0"
  },
  "devDependencies": {
- "@invoke-ai/eslint-config-react": "^0.0.8",
- "@invoke-ai/prettier-config-react": "^0.0.3",
+ "@invoke-ai/eslint-config-react": "^0.0.11",
+ "@invoke-ai/prettier-config-react": "^0.0.6",
  "@storybook/addon-essentials": "^7.6.10",
  "@storybook/addon-interactions": "^7.6.10",
  "@storybook/addon-links": "^7.6.10",
@@ -79,6 +75,7 @@
  "@vitejs/plugin-react": "^4.2.1",
  "eslint": "^8.56.0",
  "prettier": "^3.2.4",
+ "rollup-plugin-visualizer": "^5.12.0",
  "storybook": "^7.6.10",
  "typescript": "^5.3.3",
  "vite": "^5.0.12",