@blockle/blocks-v2 - npm Package Compare versions

Comparing version 0.0.21 to 0.0.22

package.json

 {
   "name": "@blockle/blocks-v2",
-  "version": "0.0.21",
+  "version": "0.0.22",
   "description": "Blockle blocks",
@@ -19,5 +19,5 @@ "main": "src/index.ts",
     "prepublishOnly": "npm run build",
-    "storybook": "start-storybook -p 6006",
-    "storybook:build": "build-storybook",
-    "storybook:test": "test-storybook",
+    "storybook": "cross-env TS_NODE_PROJECT=./.storybook/tsconfig.json NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006",
+    "storybook:build": "cross-env TS_NODE_PROJECT=./.storybook/tsconfig.json NODE_OPTIONS=--openssl-legacy-provider build-storybook",
+    "storybook:test": "cross-env TS_NODE_PROJECT=./.storybook/tsconfig.json NODE_OPTIONS=--openssl-legacy-provider test-storybook",
     "eslint": "eslint --ext .js,.jsx,.ts,.tsx src/",
@@ -40,7 +40,7 @@ "ts": "tsc --noemit --project ./tsconfig.json",
     "@testing-library/jest-dom": "^5.16.5",
-    "@testing-library/react": "^13.4.0",
+    "@testing-library/react": "^14.0.0",
     "@types/react": "^18.0.28",
-    "@types/react-dom": "^18.0.10",
-    "@typescript-eslint/eslint-plugin": "^5.52.0",
-    "@typescript-eslint/parser": "^5.52.0",
+    "@types/react-dom": "^18.0.11",
+    "@typescript-eslint/eslint-plugin": "^5.54.0",
+    "@typescript-eslint/parser": "^5.54.0",
     "@vanilla-extract/css": "^1.9.5",
@@ -51,5 +51,7 @@ "@vanilla-extract/css-utils": "^0.1.3",
     "@vanilla-extract/vite-plugin": "^3.8.0",
-    "@vitejs/plugin-react-swc": "^3.1.0",
-    "esbuild": "^0.17.8",
-    "eslint": "^8.34.0",
+    "@vitejs/plugin-react": "^3.1.0",
+    "@vitejs/plugin-react-swc": "^3.2.0",
+    "cross-env": "^7.0.3",
+    "esbuild": "^0.17.10",
+    "eslint": "^8.35.0",
     "eslint-config-prettier": "^8.6.0",
@@ -60,5 +62,5 @@ "eslint-plugin-jest": "^27.2.1",
     "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-storybook": "^0.6.10",
+    "eslint-plugin-storybook": "^0.6.11",
     "eslint-plugin-unicorn": "^45.0.2",
-    "heroicons": "^2.0.15",
+    "heroicons": "^2.0.16",
     "jsdom": "^21.1.0",
@@ -70,3 +72,3 @@ "prettier": "^2.8.4",
     "typescript": "^4.9.5",
-    "vitest": "^0.28.5"
+    "vitest": "^0.29.2"
   },
@@ -73,0 +75,0 @@ "peerDependencies": {

src/components/BlocksProvider/BlocksProviderContext.ts

 import { ComponentType, createContext } from 'react';
-import { Theme } from '../../types/theme';
+import { Theme } from '../../types/componentTheme';
 
@@ -4,0 +4,0 @@ export type BlocksProviderContextValue = {

src/components/BlocksProvider/createComponentTheme.ts

@@ -0,4 +1,5 @@
+// Move to other folder
 import { atoms } from '../../css/sprinkles.css';
 import { vars } from '../../css/theme.css';
-import { ComponentTheme } from '../../types/theme';
+import { ComponentTheme } from '../../types/componentTheme';
 
@@ -5,0 +6,0 @@ type Options = {

src/components/BlocksProvider/useComponentStyles.ts

@@ -1,2 +0,3 @@
-import { ComponentTheme, ComponentThemeOptions } from '../../types/theme';
+// Move to other folder
+import { ComponentTheme, ComponentThemeOptions } from '../../types/componentTheme';
 import { classnames } from '../../utils/classnames';
@@ -3,0 +4,0 @@ import { useTheme } from './useTheme';

src/components/BlocksProvider/useTheme.ts

@@ -1,2 +0,2 @@
-import { Theme } from '../../types/theme';
+import { Theme } from '../../types/componentTheme';
 import { useBlocksContext } from './useBlocksContext';
@@ -3,0 +3,0 @@

src/components/Button/Button.css.ts

@@ -1,10 +0,8 @@
-import { style } from '@vanilla-extract/css';
-import { vars } from '../../css/theme.css';
+import { globalStyle, style } from '@vanilla-extract/css';
 
-export const buttonReset = style({
-  appearance: 'none',
+export const buttonReset = style({});
+
+globalStyle(`:where(${buttonReset})`, {
+  all: 'unset',
   cursor: 'pointer',
-  fontFamily: 'inherit',
-  outline: 'none',
-  fontWeight: vars.weight.regular,
 });

src/components/Checkbox/Checkbox.css.ts

@@ -9,3 +9,3 @@ import { style } from '@vanilla-extract/css';
 export const checkbox = style({
-  transition: 'background-color 0.2s linear',
+  transition: 'background-color 80ms linear',
   selectors: {
@@ -23,7 +23,3 @@ [`${input}:focus-visible + &`]: {
 export const checkboxMark = style({
-  width: vars.icon.size.small,
-  height: vars.icon.size.small,
-  color: vars.color.white,
   transform: 'scale(0)',
-  transition: 'transform 0.1s ease-out',
   selectors: {
@@ -30,0 +26,0 @@ [`${input}:checked + ${checkbox} &`]: {

src/components/FlexGrid/index.ts

@@ -1,3 +0,2 @@
-// TODO Remove FlexGrid and use Grid instead
 export * from './Col';
 export * from './Row';

src/components/Icon/iconNames.ts

 import { OptionalLiteral } from '../../types/utils';
 
+// All icons from heroicons.com
 export type IconNames = OptionalLiteral<
@@ -4,0 +5,0 @@ | 'academic-cap'

src/components/Radio/Radio.css.ts

@@ -13,3 +13,2 @@ import { style } from '@vanilla-extract/css';
 export const radio = style({
-  transition: 'background-color 0.2s linear',
   selectors: {
@@ -35,3 +34,2 @@ [`${input}:focus-visible + &`]: {
     transform: 'scale(0)',
-    transition: 'transform 0.1s ease-in-out',
     selectors: {
@@ -38,0 +36,0 @@ [`${input}:checked + ${radio} &`]: {

src/css/sprinkles.css.ts

@@ -84,2 +84,3 @@ import { createSprinkles, defineProperties } from '@vanilla-extract/sprinkles';
     height: { auto: 'auto', full: '100%' },
+    maxHeight: { full: '100%' },
     left: [0],
@@ -98,2 +99,3 @@ opacity: [0, 1],
     width: { auto: 'auto', full: '100%' },
+    maxWidth: { full: '100%' },
     wordBreak: ['break-word'],
@@ -100,0 +102,0 @@ wordWrap: ['break-word'],

src/css/theme.css.ts

@@ -47,6 +47,2 @@ import { createThemeContract } from '@vanilla-extract/css';
   },
-  // headingWeight: {
-  //   medium: '500',
-  //   regular: '600',
-  // },
   border: {
@@ -85,3 +81,14 @@ styles: {
   // },
-  // transition: {}
+  // transition: {
+  //   duration: {
+  //     fast: null,
+  //     medium: null,
+  //     slow: null,
+  //   },
+  //   timing: {
+  //     ease: null,
+  //     easeIn: null,
+  //     easeOut: null,
+  //   },
+  // },
   // transform: {}
@@ -88,0 +95,0 @@ // animation: {

src/index.ts

@@ -5,2 +5,3 @@ export * from './components/BlocksProvider';
 export * from './components/Dialog';
+export * from './components/Divider';
 export * from './components/FlexGrid';
@@ -25,3 +26,3 @@ export * from './components/Heading';
 export * from './hooks';
-export type { Theme } from './types/theme';
+export type { Theme } from './types/componentTheme';
 export * from './utils';

src/Themes/Momotaro/button.css.ts

@@ -14,2 +14,3 @@ import { style, styleVariants } from '@vanilla-extract/css';
       borderRadius: 'medium',
+      fontWeight: 'medium',
     }),
@@ -16,0 +17,0 @@ focusable,

src/Themes/Momotaro/checkbox.css.ts

 import { style } from '@vanilla-extract/css';
 import { createComponentTheme } from '../../components/BlocksProvider/createComponentTheme';
+import { bounceOut } from './transitions';
 
 export const checkbox = createComponentTheme('checkbox', ({ atoms }) => ({
   checkbox: style([
+    {
+      transition: 'background-color 120ms linear',
+    },
     atoms({
+      color: 'white',
       backgroundColor: 'primaryLight',
@@ -15,2 +20,5 @@ borderRadius: 'xsmall',
   ]),
+  icon: style({
+    transition: `transform 160ms ${bounceOut}`,
+  }),
 }));

src/Themes/Momotaro/index.ts

@@ -1,2 +0,2 @@
-import { Theme } from '../../types/theme';
+import { Theme } from '../../types/componentTheme';
 import { button } from './button.css';
@@ -3,0 +3,0 @@ import { checkbox } from './checkbox.css';

src/Themes/Momotaro/radio.css.ts

 import { style } from '@vanilla-extract/css';
 import { createComponentTheme } from '../../components/BlocksProvider/createComponentTheme';
+import { bounceOut } from './transitions';
 
 export const radio = createComponentTheme('radio', ({ atoms }) => ({
   radio: style([
+    {
+      transition: 'background-color 120ms linear',
+    },
     atoms({
@@ -15,2 +19,5 @@ backgroundColor: 'primaryLight',
   ]),
+  icon: style({
+    transition: `transform 160ms ${bounceOut}`,
+  }),
 }));

src/Themes/Momotaro/theme.css.ts

@@ -42,4 +42,4 @@ import { makeTheme } from '../../utils/makeTheme';
   weight: {
-    medium: '400',
-    regular: '500',
+    regular: '400',
+    medium: '500',
     strong: '700',
@@ -46,0 +46,0 @@ },

src/types/polymorphic.ts

@@ -1,5 +0,1 @@
-// type PolyProps<T extends React.ElementType, Props = {}> = ComponentPropsWithoutRef<T> & {
-//   as?: T;
-// } & Props;
-
 import {
@@ -16,3 +12,3 @@ ComponentProps,
   Component extends ElementType,
-  Props = {},
+  Props = object,
 > = ComponentPropsWithoutRef<Component> & {
@@ -26,3 +22,3 @@ as?: Component;
 
-export type PolymorphicComponent<Props = {}> = <Component extends ElementType>(
+export type PolymorphicComponent<Props = object> = <Component extends ElementType>(
   props: PolymorphicComponentProps<Component, Props> & {
@@ -32,1 +28,8 @@ ref?: ComponentPropsWithRef<Component>['ref'];
 ) => ReactElement | null;
+
+// ---
+// NOTE: When using props from an polymorphic component in another polymorphic component
+// you need to exclude 'as' prop.
+// type ButtonProps = { my: 'props' } & SantizePolymorphicProps<BoxProps>;
+// ---
+export type SantizePolymorphicProps<T> = Omit<T, 'as' | 'ref'>;

src/types/utils.ts

@@ -1,6 +0,5 @@
-/* eslint-disable @typescript-eslint/ban-types */
-import { HTMLProps } from 'react';
+import { HTMLProps as ReactHTMLProps } from 'react';
 import { Atoms } from '../css/sprinkles.css';
 
-export type OmitHTMLProps<E extends Element> = Omit<HTMLProps<E>, keyof Atoms | 'as' | 'ref'>;
+export type HTMLProps<E extends Element> = Omit<ReactHTMLProps<E>, keyof Atoms | 'as' | 'ref'>;
 
@@ -7,0 +6,0 @@ export type DeepPartial<T> = T extends object

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

286438

increased by0.54%

Number of package files

148

increased by1.37%

Lines of code

4527

increased by0.82%

Worsened metrics

Dev dependency count

41

increased by5.13%

No dependency changes