@mrshmllw/smores-react 9.1.4 → 9.3.0

package/dist/Modal/Modal.d.ts

@@ -3,6 +3,7 @@ export type ModalProps = {
     title?: string;
     icon?: string;
     children?: ReactNode;
+    rightPanel?: ReactNode;
     showModal?: boolean;
     handleClick: () => void;
     drawer?: boolean;
@@ -10,5 +11,6 @@ export type ModalProps = {
     width?: string;
     containerClass?: string;
     portalContainer?: Element | DocumentFragment;
+    closeOnOverlayClick?: boolean;
 };
 export declare const Modal: FC<ModalProps>;

package/dist/Modal/Modal.js

@@ -6,16 +6,18 @@ import { Box } from '../Box';
 import { IconStrict } from '../IconStrict';
 import { Text } from '../Text';
 import { useBodyScrollLock } from '../hooks/useBodyScrollLock';
-export const Modal = ({ title = '', children, showModal = false, handleClick, drawer = true, cross = true, width, containerClass, portalContainer = document.body, }) => {
+export const Modal = ({ title = '', children, rightPanel, showModal = false, handleClick, drawer = true, cross = true, width, containerClass, portalContainer = document.body, closeOnOverlayClick = true, }) => {
     const modalRef = useRef(null);
     useBodyScrollLock({ node: modalRef.current, showModal });
     return createPortal(React.createElement(Wrapper, { "$showModal": showModal, ref: modalRef },
-        React.createElement(Overlay, { onClick: handleClick }),
+        React.createElement(Overlay, { onClick: () => closeOnOverlayClick && handleClick(), closeOnOverlayClick: closeOnOverlayClick }),
         React.createElement(Container, { "$drawer": drawer, "$width": width || '460px', className: containerClass },
             React.createElement(Box, { flex: true, alignItems: "flex-start", justifyContent: "space-between", mb: "8px" },
                 React.createElement(TitleElements, { flex: true, direction: "column" },
                     React.createElement(Text, { tag: "h2", typo: "heading-small", align: "left" }, title)),
-                cross && (React.createElement(IconStrict, { render: "cross", backgroundColor: "oatmeal", handleClick: handleClick, size: 36 }))),
+                React.createElement(Box, { flex: true, alignItems: "center", gap: '8px' },
+                    rightPanel,
+                    cross && (React.createElement(IconStrict, { render: "cross", backgroundColor: "oatmeal", handleClick: handleClick, size: 36 })))),
             React.createElement(Box, { flex: true, direction: "column" }, children))), portalContainer);
 };
 const Wrapper = styled(Box)(({ $showModal }) => css `
@@ -32,7 +34,7 @@ const Wrapper = styled(Box)(({ $showModal }) => css `
 const Overlay = styled.div `
   position: fixed;
   background: ${theme.colors.liquorice};
-  cursor: pointer;
+  cursor: ${(props) => (props.closeOnOverlayClick ? 'pointer' : 'default')};
   opacity: 0.4;
   top: 0;
   bottom: 0;
@@ -49,6 +51,7 @@ const Container = styled.div(({ $drawer, $width }) => css `
     position: fixed;
     max-height: calc(100vh - 64px);
     overflow: auto;
+    transition: all 0.3s ease-in-out;
 
     ${$drawer === true &&
     css `

package/dist/Modal/Modal.js.map

@@ -1 +1 @@
-{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAiB,MAAM,EAAE,MAAM,OAAO,CAAA;AACpD,OAAO,EAAE,YAAY,EAAE,MAAM,WAAW,CAAA;AACxC,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAC/C,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAA;AAEhC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAA;AAC1C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAA;AAC9B,OAAO,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAA;AA0B9D,MAAM,CAAC,MAAM,KAAK,GAAmB,CAAC,EACpC,KAAK,GAAG,EAAE,EACV,QAAQ,EACR,SAAS,GAAG,KAAK,EACjB,WAAW,EACX,MAAM,GAAG,IAAI,EACb,KAAK,GAAG,IAAI,EACZ,KAAK,EACL,cAAc,EACd,eAAe,GAAG,QAAQ,CAAC,IAAI,GAChC,EAAE,EAAE;IACH,MAAM,QAAQ,GAAG,MAAM,CAAiB,IAAI,CAAC,CAAA;IAE7C,iBAAiB,CAAC,EAAE,IAAI,EAAE,QAAQ,CAAC,OAAO,EAAE,SAAS,EAAE,CAAC,CAAA;IAExD,OAAO,YAAY,CACjB,oBAAC,OAAO,kBAAa,SAAS,EAAE,GAAG,EAAE,QAAQ;QAC3C,oBAAC,OAAO,IAAC,OAAO,EAAE,WAAW,GAAI;QACjC,oBAAC,SAAS,eACC,MAAM,YACP,KAAK,IAAI,OAAO,EACxB,SAAS,EAAE,cAAc;YAEzB,oBAAC,GAAG,IACF,IAAI,QACJ,UAAU,EAAC,YAAY,EACvB,cAAc,EAAC,eAAe,EAC9B,EAAE,EAAC,KAAK;gBAER,oBAAC,aAAa,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ;oBACpC,oBAAC,IAAI,IAAC,GAAG,EAAC,IAAI,EAAC,IAAI,EAAC,eAAe,EAAC,KAAK,EAAC,MAAM,IAC7C,KAAK,CACD,CACO;gBACf,KAAK,IAAI,CACR,oBAAC,UAAU,IACT,MAAM,EAAC,OAAO,EACd,eAAe,EAAC,SAAS,EACzB,WAAW,EAAE,WAAW,EACxB,IAAI,EAAE,EAAE,GACR,CACH,CACG;YACN,oBAAC,GAAG,IAAC,IAAI,QAAC,SAAS,EAAC,QAAQ,IACzB,QAAQ,CACL,CACI,CACJ,EACV,eAAe,CAChB,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CACzB,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;eACV,UAAU,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,MAAM;;;;;;;;;GASxC,CACF,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAA;;gBAEV,KAAK,CAAC,MAAM,CAAC,SAAS;;;;;;;CAOrC,CAAA;AAED,MAAM,SAAS,GAAG,MAAM,CAAC,GAAG,CAC1B,CAAC,EAAE,OAAO,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,GAAG,CAAA;kBACZ,KAAK,CAAC,MAAM,CAAC,OAAO;;;;;iBAKrB,MAAM;;;;;MAKjB,OAAO,KAAK,IAAI;IAClB,GAAG,CAAA;;;;;;;;;;;;KAYF;GACF,CACF,CAAA;AAED,MAAM,aAAa,GAAG,MAAM,CAAC,GAAG,CAAC,CAAA;;CAEhC,CAAA"}
+{"version":3,"file":"Modal.js","sourceRoot":"","sources":["../../src/Modal/Modal.tsx"],"names":[],"mappings":"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"}

package/dist/SegmentedControl/SegmentedControl.d.ts

@@ -0,0 +1,35 @@
+/// <reference types="react" />
+import { Color } from '../theme';
+export type SegmentedControlOption<T = string | number> = {
+    label: string;
+    /** value needs to be number or string */
+    value: T;
+    /** optional tag able to show in the toggle if showTag prop is passed */
+    tag?: string;
+    isDisabled?: boolean;
+};
+type StylingOptions = {
+    toggle?: Color;
+    background?: Color;
+    text?: Color;
+    selectedText?: Color;
+    tagBg?: Color;
+    tagBorder?: Color;
+    tagText?: Color;
+};
+export type SegmentedControlProps<T> = {
+    /** you can pass more than 2 options */
+    options: SegmentedControlOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    /**  pass this prop if you want to show the tag in the toggle */
+    showTag?: boolean;
+    /** pass a StylingOptions object with the needed styles if you want to style the SegmentedControl */
+    styles?: StylingOptions;
+};
+/**
+ * ### How do I pass state to the `SegmentedControl` component?
+ * We recommend pulling the state up to at least the component that renders `SegmentedControl` up to at least the component that renders `SegmentedControl`, this should make it easier to pass state to the `SegmentedControl` component
+ */
+export declare const SegmentedControl: <T>({ options, value, onChange, showTag, styles: { tagBorder, tagText, tagBg, selectedText, text, background, toggle, }, }: SegmentedControlProps<T>) => JSX.Element;
+export {};

package/dist/SegmentedControl/SegmentedControl.js

@@ -0,0 +1,59 @@
+import styled from 'styled-components';
+import { theme } from '../theme';
+import { Box } from '../Box';
+import { Tag } from '../Tag';
+import { Text } from '../Text';
+import React from 'react';
+import { ToggleButton } from './ToggleButton';
+/**
+ * ### How do I pass state to the `SegmentedControl` component?
+ * We recommend pulling the state up to at least the component that renders `SegmentedControl` up to at least the component that renders `SegmentedControl`, this should make it easier to pass state to the `SegmentedControl` component
+ */
+export const SegmentedControl = ({ options, value, onChange, showTag, styles: { tagBorder = 'marshmallowPink', tagText = 'cream', tagBg = 'marshmallowPink', selectedText = 'cream', text = 'liquorice', background, toggle, } = {}, }) => {
+    return (React.createElement(ToggleWrapper, { backgroundColor: background },
+        React.createElement(IndicatorWrapper, { backgroundColor: background },
+            options.map((option) => {
+                return (React.createElement(ToggleButton, { key: option.label, name: "toggle-version-button", value: option.value, onChange: onChange, isSelected: option.value === value, isDisabled: option.isDisabled },
+                    React.createElement(StyledWrapper, null,
+                        showTag && option.tag && (React.createElement(StyledTag, { bgColor: tagBg, borderColor: tagBorder, color: tagText, label: option.tag })),
+                        React.createElement(StyledText, { isSelected: option.value === value, selectedTextColor: selectedText, color: text }, option.label))));
+            }),
+            React.createElement(ToggleIndicator, { selectedIndex: options.findIndex((option) => option.value === value), sections: options.length, toggleColor: toggle }))));
+};
+const BORDER_RADIUS = 25;
+const StyledWrapper = styled(Box) `
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 4px;
+`;
+const StyledTag = styled(Tag) `
+  border-radius: 100px;
+`;
+const StyledText = styled(Text) `
+  font-weight: ${theme.font.weight.medium};
+  ${({ isSelected, selectedTextColor }) => isSelected && `color: ${theme.colors[selectedTextColor]};`}
+  padding: 2px 0px;
+`;
+const ToggleWrapper = styled(Box) `
+  padding: 4px;
+  background-color: ${(p) => theme.colors[p.backgroundColor ?? 'custard']};
+  border-radius: ${BORDER_RADIUS}px;
+`;
+const IndicatorWrapper = styled(Box) `
+  position: relative;
+  display: flex;
+  background-color: ${(p) => theme.colors[p.backgroundColor ?? 'custard']};
+  border-radius: ${BORDER_RADIUS}px;
+`;
+const ToggleIndicator = styled(Box) `
+  background-color: ${(p) => theme.colors[p.toggleColor ?? 'liquorice']};
+  border-radius: ${BORDER_RADIUS}px;
+  position: absolute;
+  z-index: 1;
+  height: 100%;
+  width: ${(p) => `calc(100% / ${p.sections})`};
+  transition: transform 0.4s;
+  transform: ${(p) => `translateX(${p.selectedIndex * 100}%)`};
+`;
+//# sourceMappingURL=SegmentedControl.js.map

package/dist/SegmentedControl/SegmentedControl.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SegmentedControl.js","sourceRoot":"","sources":["../../src/SegmentedControl/SegmentedControl.tsx"],"names":[],"mappings":"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"}

package/dist/SegmentedControl/ToggleButton.d.ts

@@ -0,0 +1,11 @@
+import { ReactNode } from 'react';
+type ToggleButtonProps<Value> = {
+    name: string;
+    value: Value;
+    onChange: (value: Value) => void;
+    isSelected: boolean;
+    isDisabled?: boolean;
+    children: ReactNode;
+};
+export declare const ToggleButton: <Value>({ name, value, onChange, isSelected, isDisabled, children, }: ToggleButtonProps<Value>) => JSX.Element;
+export {};

package/dist/SegmentedControl/ToggleButton.js

@@ -0,0 +1,32 @@
+import { Box } from '../Box';
+import React from 'react';
+import styled, { css } from 'styled-components';
+export const ToggleButton = ({ name, value, onChange, isSelected, isDisabled = false, children, }) => {
+    return (React.createElement(Wrapper, { as: "label", "data-testId": `value-toggle-${value}`, isDisabled: isDisabled },
+        React.createElement(VisuallyHiddenInput, { type: "radio", name: name, checked: isSelected, onClick: () => onChange(value), onChange: () => onChange(value) }),
+        children));
+};
+const Wrapper = styled(Box) `
+  cursor: pointer;
+  ${({ isDisabled }) => isDisabled &&
+    css `
+      pointer-events: none;
+      opacity: 0.5;
+    `}
+  padding: 10px 14px;
+  transition: color 0.1s linear;
+  height: fit-content;
+  width: 100%;
+  align-content: center;
+  z-index: 3;
+`;
+const VisuallyHiddenInput = styled.input `
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+`;
+//# sourceMappingURL=ToggleButton.js.map

package/dist/SegmentedControl/ToggleButton.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToggleButton.js","sourceRoot":"","sources":["../../src/SegmentedControl/ToggleButton.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAA;AAC5B,OAAO,KAAK,MAAM,OAAO,CAAA;AAEzB,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAA;AAW/C,MAAM,CAAC,MAAM,YAAY,GAAG,CAAS,EACnC,IAAI,EACJ,KAAK,EACL,QAAQ,EACR,UAAU,EACV,UAAU,GAAG,KAAK,EAClB,QAAQ,GACiB,EAAE,EAAE;IAC7B,OAAO,CACL,oBAAC,OAAO,IACN,EAAE,EAAC,OAAO,iBACG,gBAAgB,KAAK,EAAE,EACpC,UAAU,EAAE,UAAU;QAEtB,oBAAC,mBAAmB,IAClB,IAAI,EAAC,OAAO,EACZ,IAAI,EAAE,IAAI,EACV,OAAO,EAAE,UAAU,EACnB,OAAO,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,EAC9B,QAAQ,EAAE,GAAG,EAAE,CAAC,QAAQ,CAAC,KAAK,CAAC,GAC/B;QACD,QAAQ,CACD,CACX,CAAA;AACH,CAAC,CAAA;AAED,MAAM,OAAO,GAAG,MAAM,CAAC,GAAG,CAAC,CAAyB;;IAEhD,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,CACnB,UAAU;IACV,GAAG,CAAA;;;KAGF;;;;;;;CAOJ,CAAA;AAED,MAAM,mBAAmB,GAAG,MAAM,CAAC,KAAK,CAAA;;;;;;;;CAQvC,CAAA"}

package/dist/SegmentedControl/index.d.ts

@@ -0,0 +1 @@
+export * from './SegmentedControl';

package/dist/SegmentedControl/index.js

@@ -0,0 +1,2 @@
+export * from './SegmentedControl';
+//# sourceMappingURL=index.js.map

package/dist/SegmentedControl/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/SegmentedControl/index.ts"],"names":[],"mappings":"AAAA,cAAc,oBAAoB,CAAA"}

package/dist/index.d.ts

@@ -43,3 +43,4 @@ export * from './theme';
 export * from './utils/space';
 export * from './RichText';
 export * from './RichTextEditor';
+export * from './SegmentedControl';

package/dist/index.js

@@ -43,4 +43,5 @@ export * from './theme';
 export * from './utils/space';
 export * from './RichText';
 export * from './RichTextEditor';
+export * from './SegmentedControl';
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,aAAa,CAAA;AAC3B,cAAc,kBAAkB,CAAA;AAChC,cAAc,UAAU,CAAA;AACxB,cAAc,OAAO,CAAA;AACrB,cAAc,aAAa,CAAA;AAC3B,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,YAAY,CAAA;AAC1B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,WAAW,CAAA;AACzB,cAAc,YAAY,CAAA;AAC1B,cAAc,SAAS,CAAA;AACvB,cAAc,QAAQ,CAAA;AACtB,cAAc,cAAc,CAAA;AAC5B,cAAc,eAAe,CAAA;AAC7B,cAAc,gBAAgB,CAAA;AAC9B,cAAc,QAAQ,CAAA;AACtB,cAAc,UAAU,CAAA;AACxB,cAAc,QAAQ,CAAA;AACtB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,iBAAiB,CAAA;AAC/B,cAAc,cAAc,CAAA;AAC5B,cAAc,cAAc,CAAA;AAC5B,cAAc,OAAO,CAAA;AACrB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,SAAS,CAAA;AACvB,cAAc,OAAO,CAAA;AACrB,cAAc,QAAQ,CAAA;AACtB,cAAc,aAAa,CAAA;AAC3B,cAAc,YAAY,CAAA;AAC1B,cAAc,UAAU,CAAA;AACxB,cAAc,WAAW,CAAA;AACzB,cAAc,gBAAgB,CAAA;AAC9B,cAAc,mBAAmB,CAAA;AACjC,cAAc,aAAa,CAAA;AAC3B,cAAc,SAAS,CAAA;AACvB,cAAc,SAAS,CAAA;AACvB,cAAc,eAAe,CAAA;AAC7B,cAAc,YAAY,CAAA;AAC1B,cAAc,kBAAkB,CAAA;AAChC,cAAc,oBAAoB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mrshmllw/smores-react",
-  "version": "9.1.4",
+  "version": "9.3.0",
   "main": "./dist/index.js",
   "description": "Collection of React components used by Marshmallow Technology",
   "keywords": [
@@ -28,6 +28,7 @@
     "snyk-protect": "snyk-protect",
     "prepare": "npm run snyk-protect && husky",
     "pre-commit-lint": "npm run check-types && lint-staged",
+    "commitlint": "commitlint --edit",
     "fix-package-lock-conflicts": "echo \"Make sure conflicts in package.json are resolved before running this script\" && npm i --package-lock-only"
   },
   "devDependencies": {
@@ -37,6 +38,8 @@
     "@babel/preset-env": "^7.20.2",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
+    "@commitlint/cli": "^19.3.0",
+    "@commitlint/types": "^19.0.3",
     "@semantic-release/changelog": "^6.0.3",
     "@semantic-release/git": "^10.0.1",
     "@semantic-release/github": "^10.0.2",