@blockle/blocks-v2 - npm Package Compare versions

Comparing version 0.0.11 to 0.0.12

.eslintrc.js

@@ -41,2 +41,3 @@ /* eslint-env node */
     'unicorn/prevent-abbreviations': 'off',
+    'unicorn/prefer-query-selector': 'off',
   },
@@ -43,0 +44,0 @@ settings: {

.storybook/main.js

@@ -16,4 +16,5 @@ const { VanillaExtractPlugin } = require('@vanilla-extract/webpack-plugin');
     '@storybook/addon-interactions',
+    '@storybook/addon-a11y',
   ],
   framework: '@storybook/react',
 };

ideas/Momotaro.md

@@ -66,3 +66,3 @@ # Momotaro theme
 
-### AutoFormattingInput
+### TextFormattInput
 
@@ -72,3 +72,3 @@ Define a format how the input should be formatted.
 ```tsx
-<AutoFormattingInput
+<TextFormattInput
   format="###-####-####"
@@ -111,3 +111,3 @@ name=""
 
-### TextArea
+### Textarea
 
@@ -117,5 +117,5 @@ Show maxlength when user types.
 ```tsx
-<TextArea name="" defaultValue="" onChange={() => {}} maxLength={100}>
+<Textarea name="" defaultValue="" onChange={() => {}} maxLength={100}>
   Controlled
-</TextArea>
+</Textarea>
 ```
@@ -122,0 +122,0 @@

jest.setup.ts

 import '@testing-library/jest-dom';
 
-import { setGlobalConfig } from '@storybook/testing-react';
+// import { setGlobalConfig } from '@storybook/testing-react';
+import { setProjectAnnotations } from '@storybook/react';
 
 import * as globalStorybookConfig from './.storybook/preview';
 
-setGlobalConfig(globalStorybookConfig);
+setProjectAnnotations(globalStorybookConfig);

package.json

 {
   "name": "@blockle/blocks-v2",
-  "version": "0.0.11",
+  "version": "0.0.12",
   "description": "Blockle blocks",
@@ -15,2 +15,3 @@ "main": "src/index.ts",
     "build": "npm run clean && node build.js && tsc --emitDeclarationOnly --outDir dist",
+    "build:sprite": "svg-sprite-generate -d node_modules/heroicons/24/solid/ -o assets/icons.svg",
     "clean": "rimraf dist",
@@ -25,47 +26,50 @@ "dev": "node serve.js",
     "eslint": "eslint --ext .js,.jsx,.ts,.tsx src/",
-    "svg": "svg-sprite-generate -d src/icons -o public/icons.svg"
+    "ts": "tsc --noemit --project ./tsconfig.json"
   },
   "devDependencies": {
-    "@babel/core": "^7.19.0",
-    "@babel/preset-env": "^7.19.0",
+    "@babel/core": "^7.19.3",
+    "@babel/preset-env": "^7.19.4",
     "@babel/preset-typescript": "^7.18.6",
-    "@storybook/addon-actions": "^6.5.10",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-interactions": "^6.5.10",
-    "@storybook/addon-links": "^6.5.10",
+    "@storybook/addon-a11y": "^6.5.12",
+    "@storybook/addon-actions": "^6.5.12",
+    "@storybook/addon-essentials": "^6.5.12",
+    "@storybook/addon-interactions": "^6.5.12",
+    "@storybook/addon-links": "^6.5.12",
     "@storybook/jest": "^0.0.10",
-    "@storybook/react": "^6.5.10",
-    "@storybook/test-runner": "^0.7.1",
+    "@storybook/react": "^6.5.12",
+    "@storybook/test-runner": "^0.8.0",
     "@storybook/testing-library": "^0.0.13",
     "@storybook/testing-react": "^1.3.0",
     "@testing-library/react": "^13.4.0",
-    "@types/jest": "^29.0.0",
-    "@types/react": "^18.0.18",
+    "@types/jest": "^29.1.2",
+    "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
-    "@typescript-eslint/eslint-plugin": "^5.36.2",
-    "@typescript-eslint/parser": "^5.36.2",
+    "@typescript-eslint/eslint-plugin": "^5.40.0",
+    "@typescript-eslint/parser": "^5.40.0",
     "@vanilla-extract/babel-plugin": "^1.2.0",
-    "@vanilla-extract/css": "^1.9.0",
+    "@vanilla-extract/css": "^1.9.1",
     "@vanilla-extract/css-utils": "^0.1.2",
-    "@vanilla-extract/esbuild-plugin": "^2.1.0",
+    "@vanilla-extract/esbuild-plugin": "^2.2.0",
     "@vanilla-extract/sprinkles": "^1.5.0",
-    "@vanilla-extract/webpack-plugin": "^2.1.12",
+    "@vanilla-extract/webpack-plugin": "^2.2.0",
     "babel-loader": "^8.2.5",
     "babel-preset-next": "^1.4.0",
-    "esbuild": "^0.15.7",
+    "esbuild": "^0.15.10",
     "esbuild-jest": "^0.5.0",
-    "eslint": "^8.23.0",
+    "eslint": "^8.25.0",
     "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-jest": "^27.0.2",
+    "eslint-plugin-jest": "^27.1.1",
     "eslint-plugin-prettier": "^4.2.1",
-    "eslint-plugin-react": "^7.31.7",
+    "eslint-plugin-react": "^7.31.10",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.4",
-    "eslint-plugin-unicorn": "^43.0.2",
-    "jest": "^29.0.2",
-    "jest-environment-jsdom": "^29.0.2",
+    "eslint-plugin-storybook": "^0.6.6",
+    "eslint-plugin-unicorn": "^44.0.2",
+    "heroicons": "^2.0.12",
+    "jest": "^29.1.2",
+    "jest-environment-jsdom": "^29.1.2",
     "prettier": "^2.7.1",
     "rimraf": "^3.0.2",
+    "svg-sprite-generator": "^0.0.7",
     "ts-node": "^10.9.1",
-    "typescript": "^4.8.2"
+    "typescript": "^4.8.4"
   },
@@ -72,0 +76,0 @@ "peerDependencies": {

src/components/Checkbox/Checkbox.css.ts

@@ -29,3 +29,3 @@ import { style } from '@vanilla-extract/css';
   transform: 'scale(0)',
-  transition: 'transform 0.2s ease-in-out',
+  transition: 'transform 0.1s ease-out',
   selectors: {
@@ -32,0 +32,0 @@ [`${input}:checked + ${checkbox} &`]: {

src/components/Dialog/Dialog.css.ts

@@ -47,3 +47,2 @@ import { keyframes, style } from '@vanilla-extract/css';
   overflow: 'hidden',
-  backgroundColor: 'rgba(0, 0, 0, 0.2)',
   opacity: '0',
@@ -62,3 +61,2 @@ animationName: backdropEnterAnimation,
   position: 'relative',
-  backgroundColor: '#fff',
   border: 'none',
@@ -69,4 +67,2 @@ animationName: dialogEnterAnimation,
   margin: 0,
-  maxHeight: '94%',
-  maxWidth: '94%',
 });
@@ -73,0 +69,0 @@

src/components/Icon/index.ts

 export * from './Icon';
+export type { IconNames } from './iconNames';

src/hooks/index.ts

 export { useFlip } from './useFlip/useFlip';
 export { useFocusLock } from './useFocusLock/useFocusLock';
+export { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
 export { useLayer } from './useLayer/useLayer';
 export { usePreventBodyScroll } from './usePreventBodyScroll/usePreventBodyScroll';
 export { useVisibilityState } from './useVisibilityState/useVisibilityState';

src/hooks/useFlip/useFlip.ts

@@ -1,3 +0,4 @@
-import { useCallback, useLayoutEffect, useRef } from 'react';
+import { useCallback, useRef } from 'react';
 import { Animate, animate } from '../../utils/animate';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
 
@@ -54,8 +55,11 @@ const createScheduler = () => {
   switch (axis) {
-    case 'x':
+    case 'x': {
       return `translateX(${x}px)`;
-    case 'y':
+    }
+    case 'y': {
       return `translateY(${y}px)`;
-    case 'both':
+    }
+    case 'both': {
       return `translate(${x}px, ${y}px)`;
+    }
   }
@@ -85,3 +89,3 @@ }
 
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const animations: Animate[] = [];
@@ -88,0 +92,0 @@

src/hooks/usePreventBodyScroll/usePreventBodyScroll.ts

@@ -1,5 +0,5 @@
-import { useLayoutEffect } from 'react';
+import { useIsomorphicLayoutEffect } from '../useIsomorphicLayoutEffect/useIsomorphicLayoutEffect';
 
 export const usePreventBodyScroll = (enabled = true) => {
-  useLayoutEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const prevValue = document.body.style.getPropertyValue('overflow');
@@ -6,0 +6,0 @@

src/index.ts

@@ -5,3 +5,3 @@ export * from './components/BlocksProvider';
 export * from './components/Dialog';
-export * from './components/Grid';
+export * from './components/FlexGrid';
 export * from './components/Heading';
@@ -18,2 +18,3 @@ export * from './components/Icon';
 export * from './components/Text';
+export * from './components/TextArea';
 export * from './components/TextInput';
@@ -20,0 +21,0 @@ export { atoms } from './css/sprinkles/sprinkles.css';

src/Themes/Momotaro/index.ts

 import { Theme } from '../../types/theme';
 import { button } from './button.css';
 import { checkbox } from './checkbox.css';
+import { dialog } from './dialog.css';
 import { iconButton } from './iconButton.css';
@@ -20,6 +21,3 @@ import { link } from './link.css';
   iconButton,
-  dialog: {
-    base: 'dialog',
-    backdrop: 'backdrop',
-  },
+  dialog,
 };

src/Themes/Momotaro/textInput.css.ts

 import { style } from '@vanilla-extract/css';
 import { createComponentTheme } from '../../components/BlocksProvider/createComponentTheme';
 
+// TODO Should be form all form elements?
 export const textInput = createComponentTheme('textInput', ({ atoms, vars }) => ({
@@ -13,3 +14,3 @@ container: style([
     style({
-      height: 56,
+      minHeight: 56,
       vars: {
@@ -16,0 +17,0 @@ '--background-primary': '#fff',

src/Themes/Momotaro/theme.css.ts

@@ -7,3 +7,3 @@ import { makeTheme } from '../../utils/makeTheme';
     gutter: '28px',
-    xsmall: '6px',
+    xsmall: '4px',
     small: '8px',
@@ -43,3 +43,3 @@ medium: '12px',
     regular: '500',
-    strong: '500',
+    strong: '700',
   },
@@ -46,0 +46,0 @@ border: {

src/utils/focusable.ts

 const query =
   'button:not([disabled]), [href], input:not([disabled]), select:not([disabled]), ' +
   'textarea:not([disabled]), [tabindex]:not([tabindex="-1"])';
-let previousFocus: Element | null = null;
 
@@ -13,4 +12,2 @@ export const getFirstFocusableElement = (container: HTMLElement): HTMLElement | null => {
 export const focusFirstElement = (container: HTMLElement): void => {
-  storeActiveElement();
-
   const focusable = getFirstFocusableElement(container);
@@ -22,11 +19,1 @@
 };
-
-export const storeActiveElement = () => {
-  previousFocus = document.activeElement;
-};
-
-export const restoreFocus = () => {
-  if (previousFocus instanceof HTMLElement) {
-    previousFocus.focus();
-  }
-};

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

298697

increased by73.36%

Number of package files

154

increased by17.56%

Lines of code

4794

increased by31.7%

Worsened metrics

Dev dependency count

45

increased by7.14%

No dependency changes