@stoplight/mosaic - npm Package Compare versions

Comparing version 1.0.0-beta.3 to 1.0.0-beta.4

components/Article/Article.d.ts

 import './style.css';
 import React from 'react';
-import { IMarginProps, IPaddingProps } from '../../utils';
+import { IMarginProps, IPaddingProps } from '../../enhancers';
 import { IBoxHTMLAttributes } from '../Box/types';
@@ -5,0 +5,0 @@ export interface IArticleProps extends IMarginProps, IPaddingProps, IBoxHTMLAttributes {

components/Avatar/Avatar.d.ts

 import React, { CSSProperties } from 'react';
-import { IMarginProps } from '../../utils';
+import { IMarginProps } from '../../enhancers';
 import { IIconProps } from '../Icon';
@@ -4,0 +4,0 @@ declare type BaseAvatarProps = IMarginProps & {

components/Box/types.d.ts

 import { HTMLAttributes } from 'react';
-import { IBackgroundColorProps, IBorderProps, IFlexProps, IFontSizeProps, IHeightProps, IMarginProps, IPaddingProps, IPositionProps, IRoundedProps, IShadowProps, ITextColorProps, IWidthProps } from '../../utils';
-import { IInteractivityProps } from '../../utils/interactivity';
+import { IBackgroundColorProps, IBorderProps, IFlexProps, IFontSizeProps, IHeightProps, IMarginProps, IPaddingProps, IPositionProps, IRoundedProps, IShadowProps, ITextColorProps, IWidthProps } from '../../enhancers';
+import { IInteractivityProps } from '../../enhancers/interactivity';
 /**
@@ -5,0 +5,0 @@ * Box supports standard HTML attributes

components/Button/Button.d.ts

 import './style.css';
 import React from 'react';
-import { IMarginProps, IntentVals } from '../../utils';
+import { IMarginProps, IntentVals } from '../../enhancers';
 import { IBoxHTMLAttributes } from '../Box/types';
@@ -5,0 +5,0 @@ import { IIconProps } from '../Icon';

components/Button/variants.d.ts

@@ -1,4 +0,4 @@
-import { IntentVals } from '../../utils';
+import { IntentVals } from '../../enhancers';
 import { BoxOwnProps } from '../Box/types';
 export declare type AppearanceVals = 'default' | 'primary' | 'minimal';
 export declare const variants: Record<AppearanceVals, Record<IntentVals, Partial<BoxOwnProps>>>;

components/Container/Container.d.ts

 import React from 'react';
-import { IMarginProps, IPaddingProps } from '../../utils';
+import { IMarginProps, IPaddingProps } from '../../enhancers';
 import { IBoxHTMLAttributes } from '../Box/types';
@@ -4,0 +4,0 @@ export declare type ContainerSizeVals = 'full' | 'xl' | 'lg' | 'md' | 'sm';

components/Heading/Heading.d.ts

 import React from 'react';
-import { IMarginProps, IPaddingProps } from '../../utils';
+import { IMarginProps, IPaddingProps } from '../../enhancers';
 import { IBoxHTMLAttributes } from '../Box/types';
@@ -4,0 +4,0 @@ export declare type HeadingSizeVals = 1 | 2 | 3 | 4;

components/Input/Input.d.ts

 import React from 'react';
-import { IMarginProps, IntentVals } from '../../utils';
+import { IMarginProps, IntentVals } from '../../enhancers';
 import { BoxOwnProps } from '../Box/types';
@@ -12,4 +12,5 @@ import { IIconProps } from '../Icon';
     readOnly?: boolean;
+    required?: boolean;
     icon?: IIconProps['icon'] | React.ReactElement;
 }
 export declare const Input: React.MemoExoticComponent<React.ForwardRefExoticComponent<Pick<IInputProps, "form" | "p" | "slot" | "select" | "style" | "title" | "pattern" | "width" | "height" | "color" | "size" | "key" | "accept" | "alt" | "autoComplete" | "autoFocus" | "capture" | "checked" | "crossOrigin" | "disabled" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "list" | "max" | "maxLength" | "min" | "minLength" | "multiple" | "name" | "placeholder" | "readOnly" | "required" | "src" | "step" | "type" | "value" | "onChange" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "className" | "contentEditable" | "contextMenu" | "dir" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-label" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "children" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "icon" | "cursor" | "fontFamily" | "fontSize" | "fontWeight" | "opacity" | "px" | "appearance" | "intent" | "m" | "mx" | "my" | "mt" | "mr" | "mb" | "ml" | "lineHeight" | "minWidth" | "overflowX" | "maxHeight" | "minHeight" | "overflowY" | "py" | "pt" | "pr" | "pb" | "pl" | "rounded" | "boxShadow" | "bg" | "borderColor" | "border" | "borderTop" | "borderRight" | "borderLeft" | "borderBottom" | "flex" | "flexDirection" | "flexWrap" | "flexGrow" | "flexShrink" | "justifyContent" | "justifyItems" | "justifySelf" | "alignContent" | "alignItems" | "alignSelf" | "position" | "inset" | "insetY" | "insetX" | "top" | "left" | "right" | "bottom" | "zIndex" | "as"> & React.RefAttributes<HTMLInputElement>>>;

components/Input/variants.d.ts

@@ -1,4 +0,4 @@
-import { IntentVals } from '../../utils';
+import { IntentVals } from '../../enhancers';
 import { BoxOwnProps } from '../Box/types';
 export declare type AppearanceVals = 'default' | 'minimal';
 export declare const variants: Record<AppearanceVals, Record<IntentVals, Partial<BoxOwnProps>>>;

components/Link/Link.d.ts

 import './style.css';
 import React from 'react';
-import { IMarginProps, IPaddingProps } from '../../utils';
+import { IMarginProps, IPaddingProps } from '../../enhancers';
 import { IBoxHTMLAttributes } from '../Box/types';
@@ -5,0 +5,0 @@ export interface ILinkProps extends IMarginProps, IPaddingProps, IBoxHTMLAttributes<HTMLAnchorElement> {

components/Panel/Panel.d.ts

@@ -25,2 +25,8 @@ import React from 'react';
     /**
+     * Controls whether to show the panel contents or not by default in.
+     *
+     * If defaultIsOpen is provided the panel will be uncontrolled.
+     */
+    defaultIsOpen?: boolean;
+    /**
      * Controls whether to show the panel contents or not.
@@ -36,8 +42,8 @@ *
      */
-    onChange?: (event: React.MouseEvent<HTMLDivElement, MouseEvent>) => void;
+    onChange?: (value: boolean) => void;
 }
 export declare const Panel: {
-    ({ appearance, id, className, children, isCollapsible, isOpen, onChange, ...extraProps }: IPanelProps): JSX.Element;
+    ({ appearance, id, className, children, isCollapsible, isOpen: isOpenProp, defaultIsOpen, onChange, ...extraProps }: IPanelProps): JSX.Element;
     Titlebar: React.NamedExoticComponent<import("./PanelTitlebar").IPanelTitlebar>;
     Content: React.FC<BoxOwnProps<React.ElementType<any>, {}>>;
 };

components/Paragraph/Paragraph.d.ts

 import React from 'react';
-import { IMarginProps } from '../../utils';
+import { IMarginProps } from '../../enhancers';
 export declare type ParagraphSizeVals = 'leading' | 'default' | 'small' | 'tiny';
@@ -4,0 +4,0 @@ export interface IParagraphProps extends IMarginProps {

components/Select/Select.d.ts

 import React from 'react';
-import { IMarginProps, IntentVals } from '../../utils';
-import { BoxOwnProps, IBoxHTMLAttributes } from '../Box/types';
+import { IMarginProps, IntentVals } from '../../enhancers';
+import { BoxOwnProps, IBoxHTMLAttributes } from '../Box';
 export interface ISelectProps extends IMarginProps, IBoxHTMLAttributes<HTMLSelectElement>, BoxOwnProps {
@@ -5,0 +5,0 @@ value?: string | number;

components/Text/Text.d.ts

 import React from 'react';
-import { FontSizeVals, IFontSizeProps, IMarginProps, IPaddingProps, ITextColorProps, ParagraphSizes } from '../../utils';
+import { FontSizeVals, IFontSizeProps, IMarginProps, IPaddingProps, ITextColorProps, ParagraphSizes } from '../../enhancers';
 export declare type TextSizeVals = FontSizeVals | ParagraphSizes;
@@ -4,0 +4,0 @@ export interface ITextProps extends IMarginProps, IPaddingProps, IFontSizeProps, ITextColorProps {

hooks/index.d.ts

@@ -1,1 +0,1 @@
-export * from './useClipboard';
+export * from './use-clipboard';

index.d.ts

@@ -1,4 +0,5 @@
-import './main.css';
+export * from './enhancers';
 export * from './hooks';
 export * from './utils';
+export * from './styles';
 export * from './components/Article';
@@ -5,0 +6,0 @@ export * from './components/Avatar';

package.json

 {
   "name": "@stoplight/mosaic",
-  "version": "1.0.0-beta.3",
+  "version": "1.0.0-beta.4",
   "sideEffects": false,
@@ -15,4 +15,5 @@ "peerDependencies": {
     "@fortawesome/react-fontawesome": "^0.1.12",
-    "zustand": "^3.1.4",
+    "zustand": "^3.2.0",
     "@fortawesome/free-solid-svg-icons": "^5.15.1",
+    "reakit": "^1.3.0",
     "ts-keycode-enum": "^1.0.6",
@@ -19,0 +20,0 @@ "copy-to-clipboard": "^3.3.1"

README.md

@@ -12,8 +12,8 @@ # Mosaic Design System
 - [x] Good dx in browser devtools
+- [x] Scoped classes, won't clash with existing styles when embedded into site
 - [x] Supports SSR
-- [x] Scoped classes, won't clash with existing styles when embedded into site
 - [x] Downstream consumers do not have to separately manage CSS build pipline (css is included in JS bundle)
 - [ ] "Invert-able" component theme. E.g. a "dark" panel can be rendered in context of "light" rest of screen
 - [ ] Great accessibility
-- [x] Sane core library size. Target GZIP bundle size less than 50kb, including CSS
+- [x] Sane core library size. Treeshakable. Target GZIP bundle size less than 50kb, including CSS
 - [x] Core icons are included with the bundle, no need for consumers to manage separate font awesome css / loading. That
@@ -35,4 +35,63 @@ said, other font awesome icons can easily be used by loading a kit or the css in context of consuming application.
 
-Just import and use. No context providers or wrapping components required.
+#### Load CSS Styles
 
+_Client Side_
+
+When using Mosaic in a client side application you must import and inject the css styles. We recommend that you do this
+once towards the top of your application. Calling `injectStyles` more than once results in a no-op so that styles are
+not duplicated by accident.
+
+```tsx
+// your application, somewhere early in the rendering
+
+import { injectStyles } from '@stoplight/mosaic';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+// this injects a style tag into the head of your document, with the mosaic css
+injectStyles();
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root'),
+);
+```
+
+_SSR_
+
+If your application supports server side rendering, we recommend that you inject the style tag on the server to avoid a
+flash of content on page load. You should not need to use the client side loading method above if you include the style
+tag in SSR. If you do this by accident Mosaic will detect the existing style tag and not duplicate styles on the client.
+
+```tsx
+// your application, somewhere early in the rendering
+
+import { InlineStyles as MosaicInlineStyles } from '@stoplight/mosaic';
+import React from 'react';
+import ReactDOM from 'react-dom';
+
+yourServer.handler(res => {
+  const markup = ReactDOM.renderToString(
+    <html>
+      <head>
+        <InlineStyles />
+      </head>
+
+      <body>
+        <div id="root"></div>
+      </body>
+    </html>,
+  );
+
+  return res.send(markup);
+});
+```
+
+**2. Use it**
+
+Once the CSS is taken care of, you can just import and use Mosaic components. No context providers or wrapping
+components required.
+
 ```jsx
@@ -39,0 +98,0 @@ import { Box, Button } from '@stoplight/mosaic';

utils/index.d.ts

@@ -1,10 +0,3 @@
-export * from './border';
-export * from './color';
-export * from './flex';
-export * from './interactivity';
-export * from './position';
-export * from './rounded';
-export * from './shadow';
-export * from './size';
-export * from './spacing';
-export * from './typography';
+export * from './assertion';
+export * from './function';
+export * from './split-box-props';

utils/split-box-props.d.ts

@@ -1,2 +0,2 @@
-import { IFlexProps } from './flex';
+import { IFlexProps } from '../enhancers/flex';
 interface IEnhancerProps extends IFlexProps {
@@ -3,0 +3,0 @@ }

New alerts

Environment variable access

Supply chain risk

Package accesses environment variables, which may be a sign of credential stuffing or data theft.

Found 1 instance in 1 package

Long strings

Supply chain risk

Contains long string literals, which may be a sign of obfuscated or packed code.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

396507

increased by10.97%

Number of package files

74

increased by4.23%

Lines of code

5010

increased by36.77%

Number of lines in readme file

167

increased by54.63%

Worsened metrics

Dependency count

9

increased by12.5%

Number of low supply chain risk alerts

7

increased by133.33%

Dependency changes

• + Addedreakit@^1.3.0

• + Added@popperjs/core@2.11.8(transitive)

• + Addedbody-scroll-lock@3.1.5(transitive)

• + Addedreact@17.0.2(transitive)

• + Addedreact-dom@17.0.2(transitive)

• + Addedreakit@1.3.11(transitive)

• + Addedreakit-system@0.15.2(transitive)

• + Addedreakit-utils@0.15.2(transitive)

• + Addedreakit-warning@0.6.2(transitive)

• + Addedscheduler@0.20.2(transitive)

• Updatedzustand@^3.2.0