@stoplight/mosaic
Advanced tools
Comparing version 1.0.0-beta.3 to 1.0.0-beta.4
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 { |
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 & { |
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 |
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'; |
@@ -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>>>; |
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'; |
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; |
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>>>; |
@@ -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>>>; |
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> { |
@@ -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>, {}>>; | ||
}; |
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 { |
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; |
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 { |
@@ -1,1 +0,1 @@ | ||
export * from './useClipboard'; | ||
export * from './use-clipboard'; |
@@ -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'; |
{ | ||
"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" |
@@ -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'; |
@@ -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'; |
@@ -1,2 +0,2 @@ | ||
import { IFlexProps } from './flex'; | ||
import { IFlexProps } from '../enhancers/flex'; | ||
interface IEnhancerProps extends IFlexProps { | ||
@@ -3,0 +3,0 @@ } |
Sorry, the diff of this file is too big to display
Sorry, the diff of this file is too big to display
Environment variable access
Supply chain riskPackage accesses environment variables, which may be a sign of credential stuffing or data theft.
Found 1 instance in 1 package
Long strings
Supply chain riskContains long string literals, which may be a sign of obfuscated or packed code.
Found 1 instance in 1 package
396507
74
5010
167
9
7
+ 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