@onfido/castor - npm Package Compare versions

Comparing version 1.4.0 to 1.5.0

dist/components/index.js

@@ -8,2 +8,3 @@ export * from './button/button';
 export * from './input/input';
+export * from './popover/popover';
 export * from './progress/progress';
@@ -14,3 +15,4 @@ export * from './radio/radio';
 export * from './textarea/textarea';
+export * from './tooltip/tooltip';
 export * from './validation/validation';
 //# sourceMappingURL=index.js.map

dist/helpers/font/font.js

@@ -35,3 +35,5 @@ import { toCSS } from '@onfido/castor';
     };
-    return { ...styles, toString: () => toCSS(styles) };
+    // can't be enumerable otherwise it breaks CSS-in-JS
+    Object.defineProperty(styles, 'toString', { value: () => toCSS(styles) });
+    return styles;
 }
@@ -38,0 +40,0 @@ const sizes = {

package.json

 {
   "name": "@onfido/castor",
-  "version": "1.4.0",
+  "version": "1.5.0",
   "description": "Onfido's design system.",
@@ -8,3 +8,5 @@ "author": "Onfido",
   "type": "module",
-  "sideEffects": false,
+  "sideEffects": [
+    "*.css"
+  ],
   "repository": {
@@ -29,3 +31,4 @@ "type": "git",
   "dependencies": {
-    "@onfido/castor-tokens": "^1.0.0-beta.4"
+    "@onfido/castor-tokens": "^1.0.0-beta.4",
+    "csstype": "^3.0.8"
   },
@@ -32,0 +35,0 @@ "peerDependencies": {

src/components/button/button.stories.ts

@@ -14,2 +14,3 @@ import { iconNames } from '@onfido/castor-icons';
   argTypes: {
+    children: {},
     disabled: {
@@ -34,9 +35,9 @@ description: 'Only available in `<button>` element.',
 export const Kind = htmlMatrix(Button, { kind });
-Kind.argTypes = omit<ButtonProps>('kind');
+Kind.argTypes = omit('kind');
 
 export const Variant = htmlMatrix(Button, { variant });
-Variant.argTypes = omit<ButtonProps>('variant');
+Variant.argTypes = omit('variant');
 
 export const Disabled = htmlMatrix(Button, { disabled });
-Disabled.argTypes = omit<ButtonProps>('disabled');
+Disabled.argTypes = omit('disabled');
 
@@ -48,3 +49,3 @@ export const AsAnchor: Story<ButtonProps> = (props) =>
 const icon = Icon({ name: firstIconName, ['aria-hidden']: 'true' });
-export const WithIcon: Story<ButtonProps> = (props: ButtonProps) =>
+export const WithIcon: Story<ButtonProps> = (props) =>
   Button({ ...props, children: icon + 'Button' }) +
@@ -51,0 +52,0 @@ Button({ ...props, children: 'Button' + icon });

src/components/field-label/field-label.stories.ts

@@ -14,3 +14,3 @@ import { color } from '@onfido/castor';
   component: FieldLabel,
-  argTypes: omit<FieldLabelProps>('for'),
+  argTypes: omit('for'),
   args: {
@@ -59,3 +59,3 @@ children: 'Label',
   });
-WithHelperText.argTypes = omit<FieldLabelWithHelperTextProps>('children');
+WithHelperText.argTypes = omit('children');
 WithHelperText.args = {
@@ -71,3 +71,7 @@ label: 'Label',
 
-export const WithInput = ({ id, label, ...props }: FieldLabelWithInputProps) =>
+export const WithInput: Story<FieldLabelWithInputProps> = ({
+  id,
+  label,
+  ...props
+}) =>
   Field({
@@ -83,3 +87,3 @@ children: [
   });
-WithInput.argTypes = omit<FieldLabelWithInputProps>('children');
+WithInput.argTypes = omit('children');
 WithInput.args = {
@@ -95,7 +99,7 @@ id: 'field-label-with-input',
 
-export const WithSelect = ({
+export const WithSelect: Story<FieldLabelWithSelectProps> = ({
   id,
   label,
   ...props
-}: FieldLabelWithSelectProps) =>
+}) =>
   Field({
@@ -119,3 +123,3 @@ children: [
   });
-WithSelect.argTypes = omit<FieldLabelWithSelectProps>('children');
+WithSelect.argTypes = omit('children');
 WithSelect.args = {
@@ -131,7 +135,7 @@ id: 'field-label-with-select',
 
-export const WithTextarea = ({
+export const WithTextarea: Story<FieldLabelWithTextareaProps> = ({
   id,
   label,
   ...props
-}: FieldLabelWithTextareaProps) =>
+}) =>
   Field({
@@ -147,3 +151,3 @@ children: [
   });
-WithTextarea.argTypes = omit<FieldLabelWithTextareaProps>('children');
+WithTextarea.argTypes = omit('children');
 WithTextarea.args = {
@@ -150,0 +154,0 @@ id: 'field-label-with-textarea',

src/components/icon/icon.stories.ts

@@ -1,5 +0,11 @@
-import { IconProps } from '@onfido/castor';
 import { iconNames } from '@onfido/castor-icons';
-import { colors, htmlMatrix, Meta, Story } from '../../../../../docs';
-import { Icon } from './icon.story';
+import {
+  colors,
+  htmlMatrix,
+  Meta,
+  omit,
+  optionsToSummary,
+  Story,
+} from '../../../../../docs';
+import { Icon, IconProps } from './icon.story';
 
@@ -12,8 +18,16 @@ const [firstIconName] = iconNames;
   argTypes: {
+    ...omit('aria-hidden'),
     color: {
       control: { type: 'select', options: colors },
       table: {
-        type: { summary: colors.map((value) => `"${value}"`).join('|') },
+        type: { summary: optionsToSummary(colors) },
       },
     },
+    name: {
+      type: { required: true },
+      control: { type: 'select', options: iconNames },
+      table: {
+        type: { summary: optionsToSummary(iconNames) },
+      },
+    },
   },
@@ -20,0 +34,0 @@ args: {

src/components/index.ts

@@ -8,2 +8,3 @@ export * from './button/button';
 export * from './input/input';
+export * from './popover/popover';
 export * from './progress/progress';
@@ -14,2 +15,3 @@ export * from './radio/radio';
 export * from './textarea/textarea';
+export * from './tooltip/tooltip';
 export * from './validation/validation';

src/components/input/input.stories.ts

@@ -1,2 +0,8 @@
-import { htmlMatrix, Meta, omit, Story } from '../../../../../docs';
+import {
+  htmlMatrix,
+  Meta,
+  omit,
+  optionsToSummary,
+  Story,
+} from '../../../../../docs';
 import { FieldLabel } from '../field-label/field-label.story';
@@ -19,3 +25,2 @@ import { Field } from '../field/field.story';
 ] as const;
-type.toString = () => type.map((value) => `"${value}"`).join('|');
 
@@ -26,3 +31,3 @@ export default {
   argTypes: {
-    ...omit<InputProps>('id', 'value'),
+    ...omit('id', 'value'),
     disabled: {
@@ -39,3 +44,3 @@ table: { type: { summary: 'boolean' } },
       control: { type: 'radio', options: type },
-      table: { type: { summary: type.toString() } },
+      table: { type: { summary: optionsToSummary(type) } },
     },
@@ -55,6 +60,6 @@ },
 export const Invalid = htmlMatrix(Input, { invalid });
-Invalid.argTypes = omit<InputProps>('invalid');
+Invalid.argTypes = omit('invalid');
 
 export const Disabled = htmlMatrix(Input, { disabled });
-Disabled.argTypes = omit<InputProps>('disabled');
+Disabled.argTypes = omit('disabled');
 
@@ -67,20 +72,16 @@ interface InputWithLabelAndHelperTextProps extends InputProps {
 
-export const WithLabelAndHelperText = ({
-  id,
-  label,
-  helperText,
-  ...props
-}: InputWithLabelAndHelperTextProps) =>
-  Field({
-    children: [
-      FieldLabel({
-        children: [
-          label,
-          HelperText({ children: helperText }),
-          Input({ ...props, id }),
-        ],
-        for: id,
-      }),
-    ],
-  });
+export const WithLabelAndHelperText: Story<InputWithLabelAndHelperTextProps> =
+  ({ id, label, helperText, ...props }) =>
+    Field({
+      children: [
+        FieldLabel({
+          children: [
+            label,
+            HelperText({ children: helperText }),
+            Input({ ...props, id }),
+          ],
+          for: id,
+        }),
+      ],
+    });
 WithLabelAndHelperText.args = {
@@ -87,0 +88,0 @@ id: 'input-with-label-and-helper-text',

src/components/progress/progress.stories.ts

@@ -1,5 +0,12 @@
-import { htmlMatrix, Meta, omit, Story } from '../../../../../docs';
+import {
+  htmlMatrix,
+  Meta,
+  omit,
+  optionsToSummary,
+  Story,
+} from '../../../../../docs';
 import { Progress, ProgressProps } from './progress.story';
 
 const size = ['regular', 'large'] as const;
+
 const hideLabel = [false, true] as const;
@@ -11,3 +18,3 @@
   argTypes: {
-    ...omit<ProgressProps>('aria-valuetext'),
+    ...omit('aria-valuetext'),
     children: {
@@ -20,25 +27,16 @@ description: 'Optional label.',
     min: {
-      table: {
-        type: { summary: 'number' },
-        defaultValue: { summary: '0' },
-      },
+      control: { type: 'number' },
+      table: { type: { summary: 'number' } },
     },
     max: {
-      table: {
-        type: { summary: 'number' },
-        defaultValue: { summary: '100' },
-      },
+      control: { type: 'number' },
+      table: { type: { summary: 'number' } },
     },
     size: {
       control: { type: 'radio', options: size },
-      table: {
-        type: { summary: size.toString() },
-        defaultValue: { summary: 'regular' },
-      },
+      table: { type: { summary: optionsToSummary(size) } },
     },
     value: {
-      table: {
-        type: { summary: 'number' },
-        defaultValue: { summary: '0' },
-      },
+      type: { required: true },
+      table: { type: { summary: 'number' } },
     },
@@ -49,2 +47,5 @@ },
     hideLabel: false,
+    min: 0,
+    max: 100,
+    size: 'regular',
     value: 25,
@@ -58,9 +59,9 @@ },
 export const Size = htmlMatrix(Progress, { size });
-Size.argTypes = omit<ProgressProps>('size');
+Size.argTypes = omit('size');
 
 export const HideLabel = htmlMatrix(Progress, { hideLabel });
-HideLabel.argTypes = omit<ProgressProps>('hideLabel');
+HideLabel.argTypes = omit('hideLabel');
 
 export const WithCustomLabel: Story<ProgressProps> = (props) => Progress(props);
-WithCustomLabel.argTypes = omit<ProgressProps>('children', 'hideLabel');
+WithCustomLabel.argTypes = omit('children', 'hideLabel');
 WithCustomLabel.args = {
@@ -72,3 +73,3 @@ children: 'Progress: 25%',
 export const AllCombinations = htmlMatrix(Progress, { hideLabel, size });
-AllCombinations.argTypes = omit<ProgressProps>('hideLabel', 'size');
+AllCombinations.argTypes = omit('hideLabel', 'size');
 AllCombinations.parameters = {
@@ -75,0 +76,0 @@ display: 'grid',

src/components/select/select.stories.ts

@@ -16,3 +16,3 @@ import { classy, m } from '@onfido/castor';
   argTypes: {
-    ...omit<SelectProps>('class', 'id', 'value'),
+    ...omit('class', 'id', 'required', 'value'),
     children: {
@@ -43,9 +43,9 @@ description: [
 export const Borderless = htmlMatrix(Select, { borderless });
-Borderless.argTypes = omit<SelectProps>('borderless');
+Borderless.argTypes = omit('borderless');
 
 export const Invalid = htmlMatrix(Select, { invalid });
-Invalid.argTypes = omit<SelectProps>('invalid');
+Invalid.argTypes = omit('invalid');
 
 export const Disabled = htmlMatrix(Select, { disabled });
-Disabled.argTypes = omit<SelectProps>('disabled');
+Disabled.argTypes = omit('disabled');
 
@@ -85,20 +85,16 @@ export const AsRequired: Story<SelectProps> = (props) =>
 
-export const WithLabelAndHelperText = ({
-  id,
-  label,
-  helperText,
-  ...props
-}: SelectWithLabelAndHelperTextProps) =>
-  Field({
-    children: [
-      FieldLabel({
-        children: [
-          label,
-          HelperText({ children: helperText }),
-          Select({ ...props, id }),
-        ],
-        for: id,
-      }),
-    ],
-  });
+export const WithLabelAndHelperText: Story<SelectWithLabelAndHelperTextProps> =
+  ({ id, label, helperText, ...props }) =>
+    Field({
+      children: [
+        FieldLabel({
+          children: [
+            label,
+            HelperText({ children: helperText }),
+            Select({ ...props, id }),
+          ],
+          for: id,
+        }),
+      ],
+    });
 WithLabelAndHelperText.args = {
@@ -115,3 +111,3 @@ id: 'select-with-label-and-helper-text',
 );
-AllCombinations.argTypes = omit<SelectProps>('children');
+AllCombinations.argTypes = omit('children');
 AllCombinations.args = {
@@ -118,0 +114,0 @@ children: null,

src/components/spinner/spinner.stories.ts

@@ -1,2 +0,8 @@
-import { htmlMatrix, Meta, omit, Story } from '../../../../../docs';
+import {
+  htmlMatrix,
+  Meta,
+  omit,
+  optionsToSummary,
+  Story,
+} from '../../../../../docs';
 import { Spinner, SpinnerProps } from './spinner.story';
@@ -13,2 +19,6 @@
     },
+    size: {
+      control: { type: 'radio', options: size },
+      table: { type: { summary: optionsToSummary(size) } },
+    },
   },
@@ -25,8 +35,8 @@ args: {
 export const Size = htmlMatrix(Spinner, { size });
-Size.argTypes = omit<SpinnerProps>('size');
+Size.argTypes = omit('size');
 
 export const WithoutLabel: Story<SpinnerProps> = (props) => Spinner(props);
-WithoutLabel.argTypes = omit<SpinnerProps>('children');
+WithoutLabel.argTypes = omit('children');
 WithoutLabel.args = {
   children: null,
 };

src/components/textarea/textarea.stories.ts

@@ -1,2 +0,8 @@
-import { htmlMatrix, Meta, omit, Story } from '../../../../../docs';
+import {
+  htmlMatrix,
+  Meta,
+  omit,
+  optionsToSummary,
+  Story,
+} from '../../../../../docs';
 import { FieldLabel } from '../field-label/field-label.story';
@@ -9,11 +15,4 @@ import { Field } from '../field/field.story';
 const invalid = [true, false] as const;
+const resize = ['vertical', 'horizontal', 'both', 'none'] as const;
 
-const resize: readonly TextareaProps['resize'][] = [
-  'vertical',
-  'horizontal',
-  'both',
-  'none',
-];
-resize.toString = () => resize.map((value) => `"${value}"`).join('|');
-
 export default {
@@ -23,3 +22,3 @@ title: 'Core/Textarea',
   argTypes: {
-    ...omit<TextareaProps>('id'),
+    ...omit('id'),
     disabled: {
@@ -36,3 +35,3 @@ table: { type: { summary: 'boolean' } },
       control: { type: 'radio', options: resize },
-      table: { type: { summary: resize.toString() } },
+      table: { type: { summary: optionsToSummary(resize) } },
     },
@@ -57,9 +56,9 @@ rows: {
 export const Resize = htmlMatrix(Textarea, { resize });
-Resize.argTypes = omit<TextareaProps>('resize');
+Resize.argTypes = omit('resize');
 
 export const Invalid = htmlMatrix(Textarea, { invalid });
-Invalid.argTypes = omit<TextareaProps>('invalid');
+Invalid.argTypes = omit('invalid');
 
 export const Disabled = htmlMatrix(Textarea, { disabled });
-Disabled.argTypes = omit<TextareaProps>('disabled');
+Disabled.argTypes = omit('disabled');
 
@@ -72,20 +71,16 @@ interface TextareaWithLabelAndHelperTextProps extends TextareaProps {
 
-export const WithLabelAndHelperText = ({
-  id,
-  label,
-  helperText,
-  ...props
-}: TextareaWithLabelAndHelperTextProps) =>
-  Field({
-    children: [
-      FieldLabel({
-        children: [
-          label,
-          HelperText({ children: helperText }),
-          Textarea({ ...props, id }),
-        ],
-        for: id,
-      }),
-    ],
-  });
+export const WithLabelAndHelperText: Story<TextareaWithLabelAndHelperTextProps> =
+  ({ id, label, helperText, ...props }) =>
+    Field({
+      children: [
+        FieldLabel({
+          children: [
+            label,
+            HelperText({ children: helperText }),
+            Textarea({ ...props, id }),
+          ],
+          for: id,
+        }),
+      ],
+    });
 WithLabelAndHelperText.args = {
@@ -92,0 +87,0 @@ id: 'input-with-label-and-helper-text',

src/helpers/font/font.ts

 import { toCSS } from '@onfido/castor';
-import { CSSProperties } from 'react';
+import { Properties } from 'csstype';
 
@@ -39,7 +39,10 @@ /**
 
-  return { ...styles, toString: () => toCSS(styles) } as Font;
+  // can't be enumerable otherwise it breaks CSS-in-JS
+  Object.defineProperty(styles, 'toString', { value: () => toCSS(styles) });
+
+  return styles;
 }
 
 export type Font = Pick<
-  CSSProperties,
+  Properties<string | number>,
   `font${'Family' | 'Size' | 'Weight'}` | 'lineHeight' | 'textTransform'
@@ -46,0 +49,0 @@ >;

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

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

169652

increased by7.84%

Number of package files

191

increased by9.14%

Lines of code

2027

increased by16.03%

Number of medium supply chain risk alerts

0

decreased by-100%

Worsened metrics

Dependency count

3

increased by50%

Dependency changes

• + Addedcsstype@^3.0.8

• + Addedcsstype@3.1.3(transitive)