`
- position: absolute;
- top: 0;
- left: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- background-color: rgb(255, 255, 255, 0.5);
- width: 100%;
- height: 100%;
- z-index: 4;
-
- div {
- width: 55px;
- height: 55px;
- border: 6px solid var(--sq-loading);
- border-color: var(--sq-loading) transparent transparent transparent;
- }
-`;
-
-const TableSpinner = (props: RingProps) => {
- const { bottom, right, left, paddingRight, color, customCSS } = props;
- return (
-
-
-
-
-
-
- );
-};
-
-const TableInitialSpinnerStyle = styled(RingDefault)`
- height: 160px;
- background: transparent;
- position: absolute;
- left: 0;
- display: flex;
- justify-content: center;
- align-items: center;
- width: 100%;
- z-index: 4;
-
- div {
- width: 55px;
- height: 55px;
- border: 6px solid var(--sq-loading);
- border-color: var(--sq-loading) transparent transparent transparent;
- }
-`;
-
-const TableInitialLoad = () => {
- return (
-
-
-
-
-
-
-
-
- );
-};
-
-export const LoadingSpinner = {
- Normal: SmallSpinner,
- Large: LoadingSpinnerLarge,
- TableInitial: TableInitialLoad,
- Table: TableSpinner,
-};
diff --git a/packages/visual-dev/src/components/Misc.stories.tsx b/packages/visual-dev/src/components/Misc.stories.tsx
deleted file mode 100644
index a099b1f0f3..0000000000
--- a/packages/visual-dev/src/components/Misc.stories.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from "react";
-import { CardContainer } from "./Layouts";
-
-export default {
- title: "Misc",
-};
-
-export const Link = () => {
- return Test link ;
-};
-
-export const Pre = () => {
- return Test pre element text ;
-};
-
-export const Hr = () => {
- return ;
-};
-
-export const ContentCard = () => {
- return This is some card content ;
-};
diff --git a/packages/visual-dev/src/components/Modal/Modal.stories.tsx b/packages/visual-dev/src/components/Modal/Modal.stories.tsx
deleted file mode 100644
index 09dc5a6f38..0000000000
--- a/packages/visual-dev/src/components/Modal/Modal.stories.tsx
+++ /dev/null
@@ -1,730 +0,0 @@
-import React, { useCallback, useState } from "react";
-import { ButtonView } from "../Button";
-import { DropdownView } from "../Dropdown";
-import { InputView } from "../Input";
-import { RadioActionView } from "../RadioAction";
-import { IconView } from "../Icon";
-import { CheckboxView } from "../Checkbox";
-import { ModalView } from ".";
-
-export default {
- title: "Components / Modal",
- component: ModalView,
-};
-
-export const WithPrimaryAction = () => {
- const [active, setActive] = useState(true);
- const handleChange = useCallback(() => setActive(!active), [active]);
- return (
-
-
- Open Modal
-
-
-
-
- Configure actions which will be completed when the form is submitted
- by a user.
-
-
- You need to first enable and configure the Salesforce integration on
- the{" "}
-
- Integrations Page{" "}
-
-
-
-
-
-
- );
-};
-
-export const WithCustomZIndex = () => {
- const [active, setActive] = useState(true);
- const handleChange = useCallback(() => setActive(!active), [active]);
- return (
-
-
- Open Modal
-
-
-
-
- Configure actions which will be completed when the form is submitted
- by a user.
-
-
- You need to first enable and configure the Salesforce integration on
- the{" "}
-
- Integrations Page{" "}
-
-
-
-
-
-
- );
-};
-
-export const WithPrimaryActionCustomTitle = () => {
- const [active, setActive] = useState(true);
- const handleChange = useCallback(() => setActive(!active), [active]);
- return (
-
-
- Open Modal
-
-
-
-
- Configure actions which will be completed when the form is submitted
- by a user.
-
-
- You need to first enable and configure the Salesforce integration on
- the{" "}
-
- Integrations Page{" "}
-
-
-
-
-
-
- );
-};
-
-export const WithPrimaryAndSecondaryAction = () => {
- const [active, setActive] = useState(true);
- const handleChange = useCallback(() => setActive(!active), [active]);
-
- return (
-
-
- Open Modal
-
-
-
-
- Select a program{" "}
- (required)
-
-
-
- Referral Code (required)
-
-
-
-
- A program's primary referral code will be used in widgets,
- emails, API and integrations.
-
-
- SHIRLEYCODE129 will no longer be primary
-
- A new primary sharelink will be
- created
-
- }
- value={true}
- onChange={void 0}
- />
-
- A program's primary referral code will not be used in widgets,
- emails, API and integrations.
-
- }
- value={false}
- onChange={void 0}
- />
-
-
-
-
-
-
- );
-};
-
-export const WithCriticalAction = () => {
- const [active, setActive] = useState(true);
- const handleChange = useCallback(() => setActive(!active), [active]);
- return (
-
-
- Open Modal
-
-
-
-
- Delete this reward?
-
-
-
- {" "}
- This action cannot be undone
-
-
-
-
-
-
-
- );
-};
-
-export const WithBanner = () => {
- const [active, setActive] = useState(true);
- const handleChange = useCallback(() => setActive(!active), [active]);
- const program_icon = (
-
-
-
- );
- return (
-
-
- Open Modal
-
-
-
-
-
- Encourage new users to try your product or service by offering a
- special reward upon signup.
-
-
- This can be leveraged to increase sales or engagement during the
- holidays or any special event with unique and exclusive incentives.
-
-
- Example:
- An e-learning subscription platform is ready to scale up their
- customer base at the start of the school year.
-
-
- The company launches a signup program that gives a free month
- premium subscription for brand new signups during the month of
- September.
-
-
- Features:
-
-
- Specify the conditions that will cause users to be rewarded.
-
- Specify the reward earned when signup is completed.
-
- Customize the email to notify users when they get a reward.
-
-
-
-
-
-
-
-
- );
-};
-
-export const WithHeaderAction = () => {
- const [active, setActive] = useState(true);
- const handleChange = useCallback(() => setActive(!active), [active]);
- return (
-
-
- Open Modal
-
-
-
- ,
- }}
- />
-
-
- {" "}
- Name your program to start setting up your program rules.{" "}
-
-
-
- Program Name
-
-
- Program ID
-
-
-
-
-
-
-
- );
-};
-
-export const WithMultipleSectionsAndActions = () => {
- const [active, setActive] = useState(true);
- const handleChange = useCallback(() => setActive(!active), [active]);
- return (
-
-
- Open Modal
-
-
-
-
-
- Change Email Address
-
-
- {" "}
- (Current address: shirley.lam@referralsaasquatch.com){" "}
-
-
-
- Enter New Email
-
- Enter Password
-
-
-
-
-
- Change Password
-
- {" "}
- Passwords must be at least 8 characters long{" "}
-
-
-
- Current Password
-
- New Password
-
- Re-enter New Password
-
-
-
-
-
-
- );
-};
-
-export const WithFormElements = () => {
- const [active, setActive] = useState(true);
- const handleChange = useCallback(() => setActive(!active), [active]);
- return (
-
-
- Open Modal
-
-
-
-
- First Name
-
- Last Name
-
- Email
-
- Account ID (required)
-
- User ID (required)
-
-
-
-
-
-
-
-
-
- );
-};
-
-export const WithCodeBlock = () => {
- const code = `Insert c{
-"id": "61425f36976a1d00171c46c7",
-"type": "CREDIT",
-"value": 1,
-"prettyValue": "1 MONTH",
-"prettyRedeemedCredit": "0 MONTH",
-"prettyAssignedCredit": "1 MONTH",
-"prettyAvailableValue": "1 MONTH",
-"usTaxableValue": 0,
-"unit": "MONTH",
-"currency": null,
-"rewardUnit": {
- "key": "MONTH",
- "name": "Month",
- "currency": null,
-"__typename": "RewardUnit"
-},
-"name": "Signup Reward",`;
-
- const [active, setActive] = useState(true);
- const handleChange = useCallback(() => setActive(!active), [active]);
- return (
-
-
- Open Modal
-
-
-
-
- {code}
-
-
-
-
-
-
- );
-};
-
-export const WithCodeBlockOverflow = () => {
- const code = `{
-"id": "61425f36976a1d00171c46c7",
-"type": "CREDIT",
-"value": 1,
-"prettyValue": "1 MONTH",
-"prettyRedeemedCredit": "0 MONTH",
-"prettyAssignedCredit": "1 MONTH",
-"prettyAvailableValue": "1 MONTH",
-"usTaxableValue": 0,
-"unit": "MONTH",
-"currency": null,
-"rewardUnit": {
- "key": "MONTH",
- "name": "Month",
- "currency": null,
- "__typename": "RewardUnit"
-},
-"name": "Signup Reward",
-"dateGiven": 1631739702723,
-"dateExpires": null,
-"dateCancelled": null,
-"dateCreated": 1631739702723,
-"dateScheduledFor": null,
-"rewardSource": "AUTOMATED",
-"fuelTankCode": null,
-"fuelTankType": null,
-"programId": "looking-at-signup",
-"programRewardKey": "signupReward",
-"program": {
- "id": "looking-at-signup",
- "name": "looking at signup",
- "__typename": "Program"
-},
-"integration": null,
-"description": null,
-"redeemedCredit": 0,
-"statuses": [
- "AVAILABLE"
-],
-"pendingReasons": [],
-"assignedCredit": 1,
-"cancellable": true,
-"meta": null,
-"__typename": "FlatReward"
-}`;
-
- const [active, setActive] = useState(true);
- const handleChange = useCallback(() => setActive(!active), [active]);
- return (
-
-
- Open Modal
-
-
-
-
- {code}
-
-
-
-
-
-
- );
-};
-
-export const WithStickyFooter = () => {
- const [active, setActive] = useState(true);
- const handleChange = useCallback(() => setActive(!active), [active]);
-
- return (
-
-
- Open Modal
-
-
-
-
-
- Configure actions which will be completed when the form is
- submitted by a user.
-
-
- You need to first enable and configure the Salesforce integration
- on the {" "}
-
- {" "}
- Integrations Page{" "}
-
-
-
- test last line
-
-
-
-
-
-
-
-
- );
-};
-
-export const MaxHeight = () => {
- const [active, setActive] = useState(true);
- const handleChange = useCallback(() => setActive(!active), [active]);
- const [containerHeight, setContainerHeight] = useState(500);
- return (
-
-
- Open Modal
-
-
setContainerHeight(parseInt(e.target.value))}
- />
-
-
-
-
- Configure actions which will be completed when the form is
- submitted by a user.
-
-
- You need to first enable and configure the Salesforce integration
- on the
-
- {" "}
- Integrations Page{" "}
-
-
-
-
-
-
-
- );
-};
-
-export const MaxWidth = () => {
- const [active, setActive] = useState(true);
- const handleChange = useCallback(() => setActive(!active), [active]);
- const [containerHeight, setContainerHeight] = useState(500);
- return (
-
-
- Open Modal
-
- setContainerHeight(parseInt(e.target.value))}
- />
-
-
-
- Configure actions which will be completed when the form is submitted
- by a user.
-
-
- You need to first enable and configure the Salesforce integration on
- the{" "}
-
- Integrations Page{" "}
-
-
-
-
-
-
-
- );
-};
diff --git a/packages/visual-dev/src/components/Modal/Modal.tsx b/packages/visual-dev/src/components/Modal/Modal.tsx
deleted file mode 100644
index 8e6fcd547c..0000000000
--- a/packages/visual-dev/src/components/Modal/Modal.tsx
+++ /dev/null
@@ -1,111 +0,0 @@
-import * as React from "react";
-import styled, { CSSProp } from "styled-components";
-import { IconView } from "../Icon";
-import * as Styles from "./Styles";
-
-type ModalProps = OptionProps &
- StyleProps &
- Partial>;
-
-export interface OptionProps {
- /**
- * Title at top of modal
- */
- title: string;
- /**
- * Display the open modal
- */
- open?: boolean;
- /**
- * Callback triggered when the "X" in the top right of the modal is clicked
- */
- onClose: any;
- /**
- * Callback triggered when the primary modal action button is clicked (if available)
- */
- primaryAction?: any;
- /**
- * Callback triggered when the secondary modal action button is clicked (if available)
- */
- secondaryAction?: any;
- /**
- * Z-index used to overlay the modal over existing content (prefer a construct like react portals)
- */
- zIndex?: number;
- /**
- * Content inside the modal under the title
- */
- children: React.ReactNode;
- /**
- * Set the footer of modal to stick to bottom when scrolling. Should be set on ModalContentView and footer should be contained in ModalContentFooter
- */
- stickyFooter?: boolean;
-}
-
-export interface StyleProps {
- /**
- * Custom CSS applied to the modal container
- */
- customCSS?: CSSProp;
- /**
- * Max width applied to the modal container
- */
- maxWidth?: string;
- /**
- * Custom CSS applied to the modal title
- */
- customTitleCSS?: CSSProp;
-}
-
-const ModalBackdrop = styled.div<{ zIndex?: number }>`
- ${Styles.ModalBackdropStyle}
- ${(props) => (props.zIndex ? `z-index: ${props.zIndex};` : "z-index: 1;")}
-`;
-
-const ModalDiv = styled.div<{ customCSS?: CSSProp; maxWidth?: string }>`
- ${Styles.ModalDivStyle}
- ${(props) => props.customCSS}
- ${(props) => props.maxWidth && `max-width: ${props.maxWidth};`}
-`;
-
-const ModalHeader = styled.div<{ customTitleCSS?: CSSProp }>`
- ${Styles.ModalHeaderStyle}
- ${(props) => props.customTitleCSS}
-`;
-
-export const ModalView = React.forwardRef, ModalProps>(
- (props, forwardedRef) => {
- const {
- title,
- open = false,
- onClose,
- zIndex,
- children,
- customCSS = {},
- customTitleCSS = {},
- ...rest
- } = props;
- return (
-
- {open && (
-
-
-
- {title}
-
-
- {children}
-
-
- )}
-
- );
- }
-);
diff --git a/packages/visual-dev/src/components/Modal/ModalContent.tsx b/packages/visual-dev/src/components/Modal/ModalContent.tsx
deleted file mode 100644
index 8e9428a878..0000000000
--- a/packages/visual-dev/src/components/Modal/ModalContent.tsx
+++ /dev/null
@@ -1,253 +0,0 @@
-import * as React from "react";
-import styled, { css, CSSProp } from "styled-components";
-import { Button, ButtonProps } from "../Button";
-import * as Styles from "./Styles";
-
-type ModalActionProps = ActionOptions &
- StyleProps &
- Partial>;
-
-interface ActionProps {
- onAction?: any;
- text?: any;
- danger?: any;
-}
-
-export interface ActionOptions {
- primaryAction?: ActionProps & Omit;
- secondaryAction?: ActionProps & Omit;
-}
-
-export interface StyleProps {
- customCSS?: CSSProp;
-}
-
-const ModalActionDiv = styled.div>`
- ${Styles.ModalActionDivStyle}
- ${(props) => props.customCSS}
-`;
-
-export const ModalContentActionView = React.forwardRef<
- React.ElementRef<"div">,
- ModalActionProps
->((props, forwardedRef) => {
- const {
- primaryAction,
- secondaryAction,
- children,
- customCSS = {},
- ...rest
- } = props;
-
- const {
- onAction: primaryOnAction,
- text: primaryText,
- danger: primaryDanger,
- ...primaryOptions
- } = primaryAction || {};
-
- const {
- onAction: secondaryOnAction,
- text: secondaryText,
- danger: secondaryDanger,
- ...secondaryOptions
- } = secondaryAction || {};
-
- return (
-
- {secondaryAction && (
-
- {secondaryText}
-
- )}
- {primaryAction && (
-
- {primaryText}
-
- )}
-
- );
-});
-
-type ModalContentProps = ContentOptions &
- StyleProps &
- Partial>;
-
-export interface ContentOptions {
- children?: React.ReactNode;
- /**
- * Set the footer to always show at the bottom
- */
- stickyFooter?: boolean;
- /**
- * Max height of the container, use a valid CSS size value (px, %)
- */
- maxHeight?: string;
-}
-
-const ModalContentDiv = styled.div<
- Required
->`
- ${Styles.ModalContentDivStyle}
- ${(props) => props.maxHeight && `max-height: ${props.maxHeight};`}
- ${(props) => props.customCSS}
- ${(props) =>
- props.stickyFooter &&
- css`
- padding-bottom: 0;
-
- & ${ModalFooterDiv} {
- position: sticky;
- bottom: 0;
- background-color: var(--sq-surface);
- }
- & ${ModalActionDiv} {
- padding-bottom: var(--sq-spacing-large);
- box-sizing: border-box;
- }
- `}
-`;
-
-export const ModalContentView = React.forwardRef<
- React.ElementRef<"div">,
- ModalContentProps
->((props, forwardedRef) => {
- const {
- children,
- customCSS = {},
- maxHeight = "",
- stickyFooter = false,
- ...rest
- } = props;
- return (
-
- {children}
-
- );
-});
-
-const ModalContentTextDiv = styled.div>`
- ${Styles.ModalContentTextDivStyle}
- ${(props) => props.customCSS}
-`;
-
-export const ModalContentTextView = React.forwardRef<
- React.ElementRef<"div">,
- ModalContentProps
->((props, forwardedRef) => {
- const { children, customCSS = {}, ...rest } = props;
-
- return (
-
- {children}
-
- );
-});
-
-const CodeDiv = styled.div>`
- ${Styles.CodeDivStyle}
- ${(props) => props.customCSS}
-`;
-
-export const ModalContentCodeView = React.forwardRef<
- React.ElementRef<"div">,
- ModalContentProps
->((props, forwardedRef) => {
- const { children, customCSS = {}, ...rest } = props;
-
- return (
-
- {children}
-
- );
-});
-
-const DividerDiv = styled.div>`
- ${Styles.DividerDivStyle}
- ${(props) => props.customCSS}
-`;
-
-export const ModalContentDividerView = React.forwardRef<
- React.ElementRef<"div">,
- ModalContentProps
->((props, forwardedRef) => {
- const { children, customCSS = {}, ...rest } = props;
-
- return ;
-});
-
-const ModalBannerDiv = styled.div>`
- ${Styles.ModalBannerDivStyle}
-`;
-
-export const ModalContentBannerView = React.forwardRef<
- React.ElementRef<"div">,
- ModalContentProps & { banner: any }
->((props, forwardedRef) => {
- const { banner, children, customCSS = {}, ...rest } = props;
-
- return (
-
- {banner ? banner.icon : ""}
- {banner ? banner.text : ""}
-
- );
-});
-
-const ModalBackDiv = styled.div>`
- ${Styles.ModalBackDivStyle}
-`;
-
-export const ModalContentTopActionView = React.forwardRef<
- React.ElementRef<"div">,
- ModalContentProps & { action: any }
->((props, forwardedRef) => {
- const { action, children, customCSS = {}, ...rest } = props;
-
- return (
-
- {action ? action.icon : ""}
- {action ? action.text : ""}
-
- );
-});
-
-const ModalFooterDiv = styled.div>`
- ${(props) => props.customCSS}
-`;
-
-export const ModalContentFooter = React.forwardRef<
- React.ElementRef<"div">,
- ModalContentProps
->((props, forwardedRef) => {
- const { children, customCSS = {}, ...rest } = props;
-
- return (
-
- {children}
-
- );
-});
diff --git a/packages/visual-dev/src/components/Modal/Styles.ts b/packages/visual-dev/src/components/Modal/Styles.ts
deleted file mode 100644
index 7835d0ac0d..0000000000
--- a/packages/visual-dev/src/components/Modal/Styles.ts
+++ /dev/null
@@ -1,149 +0,0 @@
-import { css } from "styled-components";
-
-export const ModalBackdropStyle = css`
- position: absolute;
- display: flex;
- flex-direction: column;
- background-color: rgba(0, 0, 0, 0.7);
- top: 0;
- right: 0;
- bottom: 0;
- left: 0;
- padding: var(--sq-spacing-x-large);
- box-sizing: border-box;
-`;
-
-export const ModalDivStyle = css`
- position: relative;
- white-space: pre-wrap;
- min-width: 500px;
- background-color: var(--sq-surface);
- border-radius: 8px;
- margin: auto;
- padding: 0;
- display: grid;
- grid-template-rows: auto 1fr;
-`;
-
-export const ModalHeaderStyle = css`
- user-select: none;
- padding: var(--sq-spacing-large);
- background: var(--sq-nav-surface-primary);
- margin-top: -1px;
- border-radius: 8px 8px 0px 0px;
- box-sizing: border-box;
- font-family: var(--sq-font-family-sans);
- font-weight: var(--sq-font-weight-bold);
- font-size: var(--sq-font-size-header-three);
- line-height: var(--sq-line-height-header-one);
- color: var(--sq-surface);
-`;
-
-export const ModalActionDivStyle = css`
- margin-top: 10px;
- box-sizing: border-box;
- border-radius: 0 0 8px 8px;
- display: flex;
- align-items: center;
- justify-content: center;
-`;
-export const ModalActionFooterDivStyle = css`
- position: absolute;
- bottom: 0;
- width: calc(100% - var(--sq-spacing-large) * 2);
- box-sizing: border-box;
- background-color: white;
- padding: var(--sq-spacing-large) 0;
-`;
-
-export const ModalContentDivStyle = css`
- max-height: 650px;
- overflow: hidden;
- overflow-y: overlay;
-
- ::-webkit-scrollbar {
- width: 6px;
- }
-
- ::-webkit-scrollbar-track {
- }
-
- ::-webkit-scrollbar-thumb {
- background: var(--sq-border);
- border-radius: 50px;
- }
-
- ::-webkit-scrollbar-thumb:hover {
- }
- padding: var(--sq-spacing-large);
-`;
-
-export const ModalContentTextDivStyle = css`
- max-width: fit-content;
- margin-top: 10px;
- margin-bottom: 10px;
- color: var(--sq-text);
- font-family: var(--sq-font-family-sans);
- font-size: var(--sq-font-size-regular);
- font-weight: var(--sq-font-weight-regular);
- line-height: var(--sq-line-height-regular);
-`;
-
-export const CodeDivStyle = css`
- display: flex;
- align-items: center;
- padding: var(--sq-spacing-large);
- color: var(--sq-text);
- background: var(--sq-background);
- border: 1px solid var(--sq-border);
- box-sizing: border-box;
- border-radius: var(--sq-border-radius-normal);
- font-family: monospace;
- font-size: var(--sq-font-size-regular);
- font-weight: var(--sq-font-weight-regular);
- line-height: var(--sq-line-height-regular);
-`;
-
-export const DividerDivStyle = css`
- height: 1px;
- width: calc(100% + 40px);
- background: var(--sq-border);
- margin: var(--sq-spacing-large) calc(-1 * var(--sq-spacing-large));
- padding-right: 40px;
-`;
-
-export const ModalBannerDivStyle = css`
- user-select: none;
- display: flex;
- padding: var(--sq-spacing-large);
- margin: calc(-1 * var(--sq-spacing-large));
- margin-bottom: var(--sq-spacing-large);
- align-items: center;
- text-indent: var(--sq-spacing-large);
- background: var(--sq-surface-modal-banner);
- color: var(--sq-surface);
- font-family: var(--sq-font-family-sans);
- font-weight: var(--sq-font-weight-bold);
- font-size: var(--sq-font-size-header-three);
- line-height: var(--sq-line-height-regular);
-`;
-
-export const ModalBackDivStyle = css`
- user-select: none;
- display: flex;
- height: 20px;
- align-items: center;
- background: var(--sq-surface-modal-banner);
- text-indent: 15px;
- font-family: Helvetica;
- font-style: normal;
- font-weight: normal;
- font-size: var(--sq-font-size-header-three);
- line-height: var(--sq-line-height-header-three);
- color: var(--sq-text-subdued);
- background: var(--sq-surface);
- border-bottom: 1px solid var(--sq-border);
- padding: var(--sq-spacing-large);
- margin: calc(-1 * var(--sq-spacing-large));
- margin-bottom: var(--sq-spacing-large);
-`;
diff --git a/packages/visual-dev/src/components/Modal/index.ts b/packages/visual-dev/src/components/Modal/index.ts
deleted file mode 100644
index ac9e5e3cdc..0000000000
--- a/packages/visual-dev/src/components/Modal/index.ts
+++ /dev/null
@@ -1,24 +0,0 @@
-import {
- ModalContentView,
- ModalContentDividerView,
- ModalContentActionView,
- ModalContentTextView,
- ModalContentBannerView,
- ModalContentTopActionView,
- ModalContentCodeView,
- ModalContentFooter,
-} from "./ModalContent";
-import { ModalView } from "./Modal";
-
-const ModalNamespace = Object.assign(ModalView, {
- ModalContentView,
- ModalContentDividerView,
- ModalContentActionView,
- ModalContentTextView,
- ModalContentBannerView,
- ModalContentTopActionView,
- ModalContentCodeView,
- ModalContentFooter,
-});
-
-export { ModalNamespace as ModalView };
diff --git a/packages/visual-dev/src/components/ObjectFieldTemplate/ObjectFieldTemplate.stories.tsx b/packages/visual-dev/src/components/ObjectFieldTemplate/ObjectFieldTemplate.stories.tsx
deleted file mode 100644
index 3ebed38672..0000000000
--- a/packages/visual-dev/src/components/ObjectFieldTemplate/ObjectFieldTemplate.stories.tsx
+++ /dev/null
@@ -1,191 +0,0 @@
-import { JSONSchema7 } from "json-schema";
-import React from "react";
-import { Button } from "../Button";
-import { RJSFInput } from "../Input";
-import Form, { WidgetProps } from "@rjsf/core";
-import { ObjectFieldTemplate } from "./ObjectFieldTemplate";
-import { FieldTemplate } from "../FieldTemplate";
-
-export default {
- title: "RJSF / Object Field Template",
- component: ObjectFieldTemplate,
-};
-
-const log = (type: any) => console.log.bind(console, type);
-
-export const Default = () => {
- const uiSchema = {
- field1: {
- "ui:title": "First Field",
- "ui:description":
- "Field descriptions appear below their respective fields now. Descriptions can get quite long",
- "ui:widget": (props: WidgetProps) => {
- return ;
- },
- },
- field2: {
- "ui:title": "Second Field",
- "ui:description":
- "Field descriptions appear below their respective fields now. Descriptions can get quite long",
- "ui:widget": (props: WidgetProps) => {
- return ;
- },
- },
- };
-
- const schema: JSONSchema7 = {
- type: "object",
- title: "Object Field Title",
- description: "This is an object field description",
- properties: {
- field1: {
- type: "string",
- },
- field2: {
- type: "string",
- },
- },
- };
-
- return (
-
-
-
- );
-};
-
-export const TwoColumns = () => {
- const uiSchema = {
- "ui:options": {
- customCSS: {
- display: "grid",
- gridTemplateColumns: "1fr 1fr",
- gridGap: "var(--sq-spacing-small)",
- },
- },
- field1: {
- "ui:title": "First Field",
- "ui:description":
- "Field descriptions appear below their respective fields now. Descriptions can get quite long",
- "ui:widget": (props: WidgetProps) => {
- return ;
- },
- },
- field2: {
- "ui:title": "Second Field",
- "ui:description":
- "Field descriptions appear below their respective fields now. Descriptions can get quite long",
- "ui:widget": (props: WidgetProps) => {
- return ;
- },
- },
- };
-
- const schema: JSONSchema7 = {
- type: "object",
- title: "Object Field Title",
- description: "This is an object field description",
- properties: {
- field1: {
- type: "string",
- },
- field2: {
- type: "string",
- },
- },
- };
-
- return (
-
-
-
- );
-};
-
-export const UISchemaTitle = () => {
- const uiSchema = {
- field1: {
- "ui:title": "First Object Field (UI Schema Title)",
- "ui:description":
- "Field descriptions appear below their respective fields now. Descriptions can get quite long",
- field11: {
- "ui:title": "First String Field",
- "ui:description":
- "Field descriptions appear below their respective fields now. Descriptions can get quite long",
- "ui:widget": (props: WidgetProps) => {
- return ;
- },
- },
- },
- field2: {
- "ui:title": "Second String Field",
- "ui:description":
- "Field descriptions appear below their respective fields now. Descriptions can get quite long",
- "ui:widget": (props: WidgetProps) => {
- return ;
- },
- },
- };
-
- const schema: JSONSchema7 = {
- type: "object",
- title: "Object Field Title",
- description: "This is an object field description",
- properties: {
- field1: {
- type: "object",
- title: "Object Field Title (Schema Title)",
- properties: {
- field11: {
- type: "string",
- },
- },
- },
- field2: {
- type: "string",
- },
- },
- };
-
- return (
-
-
-
- );
-};
diff --git a/packages/visual-dev/src/components/ObjectFieldTemplate/ObjectFieldTemplate.tsx b/packages/visual-dev/src/components/ObjectFieldTemplate/ObjectFieldTemplate.tsx
deleted file mode 100644
index 34d2de3215..0000000000
--- a/packages/visual-dev/src/components/ObjectFieldTemplate/ObjectFieldTemplate.tsx
+++ /dev/null
@@ -1,70 +0,0 @@
-import { ObjectFieldTemplateProps } from "@rjsf/core";
-import React from "react";
-import styled from "styled-components";
-import * as Styles from "./Styles";
-
-export const Container = styled.div`
- ${Styles.Container}
-`;
-
-export const FieldContainer = styled.div`
- ${Styles.FieldContainer}
-`;
-
-export const FieldsContainer = styled.div<{ customCSS?: any }>`
- display: contents;
- ${(props) => props.customCSS}
-`;
-
-export const Title = styled.label`
- ${Styles.Title}
-`;
-
-export const Description = styled.p`
- ${Styles.Description}
-`;
-
-export const FrontMatterContainer = styled.div`
- ${Styles.FrontMatterContainer}
-`;
-
-const RequiredLabel = styled.span`
- ${Styles.RequiredLabel}
-`;
-
-export const ObjectFieldTemplate = (props: ObjectFieldTemplateProps) => {
- const {
- idSchema,
- title,
- description,
- properties,
- required,
- uiSchema,
- } = props;
- return (
-
- {(title || description) && (
-
- {title && (
-
- {title}
- {required && (required) }
-
- )}
- {description && (
-
- {description}
-
- )}
-
- )}
-
- {properties.map((element: any, index: number) => (
-
- {element.content}
-
- ))}
-
-
- );
-};
diff --git a/packages/visual-dev/src/components/ObjectFieldTemplate/Styles.ts b/packages/visual-dev/src/components/ObjectFieldTemplate/Styles.ts
deleted file mode 100644
index 50bd8a33b2..0000000000
--- a/packages/visual-dev/src/components/ObjectFieldTemplate/Styles.ts
+++ /dev/null
@@ -1,30 +0,0 @@
-import { css } from "styled-components";
-
-export const Container = css``;
-
-export const FieldContainer = css`
- margin: 0 0 var(--sq-spacing-xx-large);
-`;
-
-export const FrontMatterContainer = css`
- margin: 0 0 var(--sq-spacing-xx-large);
- font-size: var(--sq-font-size-regular);
- font-weight: var(--sq-font-weight-regular);
- line-height: var(--sq-line-height-button-medium);
- font-family: var(--sq-font-family-sans);
-`;
-
-export const Title = css`
- color: var(--sq-text);
- font-weight: var(--sq-font-weight-semibold);
- font-size: var(--sq-font-size-caption);
-`;
-
-export const Description = css`
- color: var(--sq-text-subdued) !important;
- margin: var(--sq-spacing-small) 0 0;
-`;
-
-export const RequiredLabel = css`
- color: var(--sq-placeholder-text-on-secondary);
-`;
diff --git a/packages/visual-dev/src/components/ObjectFieldTemplate/index.ts b/packages/visual-dev/src/components/ObjectFieldTemplate/index.ts
deleted file mode 100644
index 11602c09e5..0000000000
--- a/packages/visual-dev/src/components/ObjectFieldTemplate/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./ObjectFieldTemplate";
diff --git a/packages/visual-dev/src/components/Paragraph/Paragraph.tsx b/packages/visual-dev/src/components/Paragraph/Paragraph.tsx
deleted file mode 100644
index d9f002c546..0000000000
--- a/packages/visual-dev/src/components/Paragraph/Paragraph.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { Text } from "../Text";
-import * as Styles from "./Styles";
-
-type ParagraphSizeVariants = "1" | "2";
-type ParagraphSizes = "4" | "5";
-export type ParagraphProps = {
- size?: ParagraphSizeVariants;
- bold?: boolean;
-};
-
-const StyledParagraph = styled(Text)`
- ${Styles.base}
-`;
-
-export const Paragraph: React.FC> = (
- props
-) => {
- const { size = "1", ...rest } = props;
-
- const textSize: Record = {
- "1": "4",
- "2": "5",
- };
-
- return ;
-};
diff --git a/packages/visual-dev/src/components/Paragraph/Styles.ts b/packages/visual-dev/src/components/Paragraph/Styles.ts
deleted file mode 100644
index dcf147f665..0000000000
--- a/packages/visual-dev/src/components/Paragraph/Styles.ts
+++ /dev/null
@@ -1,5 +0,0 @@
-import { css } from 'styled-components'
-
-export const base = css`
- line-height: 20px;
-`
diff --git a/packages/visual-dev/src/components/Paragraph/index.ts b/packages/visual-dev/src/components/Paragraph/index.ts
deleted file mode 100644
index 07a63ef8d5..0000000000
--- a/packages/visual-dev/src/components/Paragraph/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Paragraph'
diff --git a/packages/visual-dev/src/components/Popover/HoverPopover.tsx b/packages/visual-dev/src/components/Popover/HoverPopover.tsx
deleted file mode 100644
index 04bc23fa61..0000000000
--- a/packages/visual-dev/src/components/Popover/HoverPopover.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import React from "react";
-import { useState } from "react";
-
-export type HoverPopoverProps = {
- handle: React.ReactNode;
-} & Omit, "translate" | "css">;
-
-export const HoverPopover: React.FC = ({
- handle,
- children,
-}) => {
- const [show, setShow] = useState(false);
-
- return (
- {
- setShow(true);
- }}
- onMouseLeave={() => {
- setShow(false);
- }}
- style={{ position: "relative", display: "contents" }}
- >
- {handle}
- {show && children}
-
- );
-};
diff --git a/packages/visual-dev/src/components/Popover/Popover.stories.tsx b/packages/visual-dev/src/components/Popover/Popover.stories.tsx
deleted file mode 100644
index ddd351978a..0000000000
--- a/packages/visual-dev/src/components/Popover/Popover.stories.tsx
+++ /dev/null
@@ -1,131 +0,0 @@
-import * as React from "react";
-import { PopoverView } from ".";
-import { Paragraph } from "../Paragraph";
-import { IconView } from "../Icon";
-import { HoverPopover } from "./HoverPopover";
-import { CopyWrapperView } from "../CopyWrapper/CopyWrapper";
-
-export default {
- title: "Components / Popover",
- component: PopoverView,
-};
-
-export const Default = () => {
- return (
-
-
-
- Shown in widgets, emails, and used in integrations, API, for:
-
- Test program
-
-
- Here is a long amount of text by itself to show that the text wraps
- after a certain width
-
-
- Popover action
-
-
- );
-};
-
-export const Functional = () => {
- return (
- This is a popover, hover here}>
-
-
-
- Shown in widgets, emails, and used in integrations, API, for:
-
- Test program
-
-
- Here is a long amount of text by itself to show that the text wraps
- after a certain width
-
-
- Popover action
-
-
-
- );
-};
-
-export const PopoverWidthLongWord = () => {
- return (
-
-
- The longest town name in Wales is:
- Llanfairpwllgwyngyllgogerychwyrndrobwllllantysiliogogogoch
-
-
-
- The longest town name in New Zealand is:
- Taumatawhakatangihangakoauauotamateaturipukakapikimaungahoronukupokaiwhenuakitanatahu
-
-
-
- );
-};
-
-export const WithPositionOffset = () => {
- return (
- This is a popover, hover here}>
-
-
-
- Shown in widgets, emails, and used in integrations, API, for:
-
- Test program
-
-
- Here is a long amount of text by itself to show that the text wraps
- after a certain width
-
-
- Popover action
-
-
-
- );
-};
-
-export const OnlyAction = () => (
-
- console.log("Hello")}>
- Something
-
-
-);
-
-export const CustomPadding = () => (
-
- console.log("Hello")}>
- Something
-
-
-);
-
-export const OnlyOneChild = () => (
-
- Here is a long amount of text by itself to show that the text wraps after a
- certain width
-
-);
-
-export const CopyPopover = () => (
-
-
- http://coleton-example.com/mz3aN3{" "}
- {
- console.log(result);
- }}
- copyContent="This is test clipboard content"
- >
-
-
-
-
-);
diff --git a/packages/visual-dev/src/components/Popover/Popover.tsx b/packages/visual-dev/src/components/Popover/Popover.tsx
deleted file mode 100644
index 18acb96ce2..0000000000
--- a/packages/visual-dev/src/components/Popover/Popover.tsx
+++ /dev/null
@@ -1,121 +0,0 @@
-import * as React from "react";
-import styled from "styled-components";
-import { Button, ButtonProps } from "../Button";
-import * as Styles from "./Styles";
-
-// type Position = "top" | "bottom" | "right" | "left";
-
-export type PopoverProps = PopoverOptions &
- Partial>;
-export interface PopoverOptions {
- /**
- * Choose if popover is rendered
- */
- show?: boolean;
- /**
- * Content displayed inside the popover
- */
- children: React.ReactNode;
- /**
- * X offset of the popover relative to the element it originates from
- */
- relativeX?: string;
- /**
- * Y offset of the popover relative to the element it originates from
- */
- relativeY?: string;
- /**
- * Apply custom padding
- */
- padding?: string;
-}
-
-export interface SectionProps {
- /**
- * Content to display inside the popover section
- */
- children: React.ReactNode;
-}
-
-const StyledSectionDiv = styled.div`
- ${Styles.StyledSection}
-`;
-
-const SectionView: React.FC = ({ children }) => {
- return {children} ;
-};
-
-export interface ActionProps extends Omit {}
-
-const StyledActionButton = styled(Button)`
- ${Styles.StyledAction}
-`;
-
-const ActionView: React.FC = ({ children, ...rest }) => (
-
- {children}
-
-);
-
-const StyledContainerDiv = styled.div<
- Pick
->`
- display: ${({ show }) => (show ? "block" : "none")};
-
- transform: translate(
- ${({ relativeX }) => relativeX},
- ${({ relativeY }) => relativeY}
- );
-
- ${Styles.StyledContainer}
-`;
-
-const PopoverView: React.FC = ({
- show = true,
- relativeY = "0px",
- relativeX = "0px",
- children,
- padding = "8px 16px",
-}) => {
- if (React.Children.count(children) > 1) {
- return (
-
- {children}
-
- );
- } else {
- return (
-
- {children}
-
- );
- }
-};
-
-const PopoverNamespace = Object.assign(PopoverView, {
- SectionView: SectionView,
- ActionView: ActionView,
-});
-
-/**
- * @deprecated use {@link ListView} instead
- */
-const PopoverNamespaceDeprecated = Object.assign(PopoverView, {
- Section: SectionView,
- Action: ActionView,
-});
-
-export { PopoverNamespace as PopoverView };
-
-/**
- * @deprecated use {@link ListView} instead
- */
-export { PopoverNamespaceDeprecated as Popover };
diff --git a/packages/visual-dev/src/components/Popover/Styles.ts b/packages/visual-dev/src/components/Popover/Styles.ts
deleted file mode 100644
index 0575d111e2..0000000000
--- a/packages/visual-dev/src/components/Popover/Styles.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { css } from "styled-components";
-
-export const StyledSection = css`
- box-sizing: border-box;
- padding: 12px 24px;
- overflow-wrap: break-word;
- word-wrap: break-word;
-
- &:not(:last-child) {
- border-bottom: 1px solid var(--sq-border);
- }
-`;
-
-export const StyledAction = css`
- padding: 0px;
- box-sizing: border-box;
- font-size: var(--sq-font-size-small);
- text-decoration: none;
- color: var(--sq-action-primary);
- overflow-wrap: break-word;
- word-wrap: break-word;
- max-width: 100%;
-`;
-
-export const StyledContainer = css`
- position: absolute;
- z-index: 999;
- background: var(--sq-surface);
- max-width: 300px;
- width: fit-content;
- box-sizing: border-box;
- border-radius: 10px;
- border: 1px solid var(--sq-border);
- color: var(--sq-text);
- font-size: var(--sq-font-size-small);
- line-height: var(--sq-line-height-regular);
- font-family: var(--sq-font-family-sans);
- box-shadow: 3px 3px 7px 0px #00000014;
-`;
diff --git a/packages/visual-dev/src/components/Popover/index.ts b/packages/visual-dev/src/components/Popover/index.ts
deleted file mode 100644
index a9e48047b9..0000000000
--- a/packages/visual-dev/src/components/Popover/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./Popover";
-export * from "./HoverPopover";
diff --git a/packages/visual-dev/src/components/ProgressBar/ProgressBar.stories.tsx b/packages/visual-dev/src/components/ProgressBar/ProgressBar.stories.tsx
deleted file mode 100644
index f861aea77f..0000000000
--- a/packages/visual-dev/src/components/ProgressBar/ProgressBar.stories.tsx
+++ /dev/null
@@ -1,75 +0,0 @@
-import React from "react";
-import { ProgressBarView } from "./ProgressBar";
-export default {
- title: "Components / Progress Bar",
- component: ProgressBarView,
-};
-
-const threeSteps = [
- "Create contact properties",
- "Customize contact record section",
- "Review",
-];
-
-const sixSteps = [
- "Create contact properties",
- "Customize contact record section",
- "Create referral object",
- "Customize referral object view",
- "Sync settings",
- "Review",
-];
-
-const twelveSteps = [
- "Create contact properties",
- "Customize contact record section",
- "Create referral object",
- "Customize referral object view",
- "Sync settings",
- "Create",
- "Read",
- "Update",
- "Delete",
- "Edit",
- "Confirm all fields are correct",
- "Review",
-];
-
-const longNameSteps = [
- "Create contact properties",
- "Customize contact record section",
- "Create referral object",
- "Customize referral object view",
- "Sync settings",
- "Step six has a really really long name, but that's okay because the text will wrap accordingly",
-];
-
-const defaultProps = {
- steps: threeSteps,
- currentStep: 0,
-};
-
-export const ThreeSteps = () => {
- return ;
-};
-
-export const SixSteps = () => {
- return ;
-};
-
-export const TwelveSteps = () => {
- return (
-
- );
-};
-export const WithLongName = () => {
- return (
-
- );
-};
-
-export const WithCustomColor = () => {
- return (
-
- );
-};
diff --git a/packages/visual-dev/src/components/ProgressBar/ProgressBar.tsx b/packages/visual-dev/src/components/ProgressBar/ProgressBar.tsx
deleted file mode 100644
index 16bbabdeb2..0000000000
--- a/packages/visual-dev/src/components/ProgressBar/ProgressBar.tsx
+++ /dev/null
@@ -1,82 +0,0 @@
-import * as React from "react";
-import styled, { CSSProp } from "styled-components";
-import * as Styles from "./Styles";
-
-export type ProgressBarProps = OptionProps &
- Partial>;
-
-export interface OptionProps {
- /**
- * Name of each step in the progress bar
- */
- steps: string[];
- /**
- * Used to indicate which step is focused
- */
- currentStep: number;
- /**
- * Color of each progress bar step
- */
- barColor?: string;
- /**
- * TODO: This prop currently doesn't do anything, need to make it work in the future.
- * Order style shown above each progress bar step
- */
- // orderStyle?:
- // | "number"
- // | "uppercase_letter"
- // | "lowercase_letter"
- // | "uppercase_roman_numerals"
- // | "lowercase_roman_numerals";
- /**
- * Custom CSS applied to slider
- */
- customCSS?: CSSProp;
-}
-const StyledOl = styled.ol<{
- customCSS?: CSSProp;
-}>`
- ${Styles.ListStyle}
- ${(props) => props.customCSS}
-`;
-
-const StyledBarDiv = styled.div<{
- active: boolean;
- completed: boolean;
- barColor?: string;
-}>`
- ${Styles.BarStyle}
-
- border: 2px solid ${(props) =>
- props.completed || props.active ? props.barColor : "var(--sq-border)"};
- ${(props) => props.active && "opacity: 0.5;"}
-`;
-
-export const ProgressBarView = React.forwardRef<
- React.ElementRef<"ol">,
- ProgressBarProps
->((props, forwardedRef) => {
- const {
- customCSS = {},
- currentStep,
- steps,
- barColor = "var(--sq-loading)",
- ...rest
- } = props;
- return (
-
- {steps.map((step: string, idx: number) => (
-
- idx}
- />
-
- {step}
-
-
- ))}
-
- );
-});
diff --git a/packages/visual-dev/src/components/ProgressBar/Styles.ts b/packages/visual-dev/src/components/ProgressBar/Styles.ts
deleted file mode 100644
index 320eca028f..0000000000
--- a/packages/visual-dev/src/components/ProgressBar/Styles.ts
+++ /dev/null
@@ -1,25 +0,0 @@
-import { css } from "styled-components";
-
-export const BarStyle = css`
- width: 100%;
- min-width: 110px;
-`;
-
-export const ListStyle = css`
- width: 100%;
- display: flex;
- align-items: flex-start;
- justify-content: flex-start;
- gap: var(--sq-spacing-x-small);
- list-style-position: inside;
- padding: 0;
-
- & .item-wrapper {
- width: 100%;
- display: flex;
- flex-direction: column;
- gap: var(--sq-spacing-x-small);
- align-items: flex-start;
- justify-content: center;
- }
-`;
diff --git a/packages/visual-dev/src/components/ProgressBar/index.ts b/packages/visual-dev/src/components/ProgressBar/index.ts
deleted file mode 100644
index a550d58d84..0000000000
--- a/packages/visual-dev/src/components/ProgressBar/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./ProgressBar";
diff --git a/packages/visual-dev/src/components/Radio/Radio.stories.tsx b/packages/visual-dev/src/components/Radio/Radio.stories.tsx
deleted file mode 100644
index 7e896b6987..0000000000
--- a/packages/visual-dev/src/components/Radio/Radio.stories.tsx
+++ /dev/null
@@ -1,36 +0,0 @@
-import React from "react";
-import { RadioView } from ".";
-
-export default {
- title: "Components / Radio",
- component: RadioView,
-};
-
-export const Functional = () => {
- return (
-
-
-
-
-
- );
-};
-
-export const radio = () => {
- return void 0} />;
-};
-
-export const radioChecked = () => {
- return void 0} />;
-};
-
-export const customLabelCSS = () => {
- return (
- void 0}
- />
- );
-};
diff --git a/packages/visual-dev/src/components/Radio/Radio.tsx b/packages/visual-dev/src/components/Radio/Radio.tsx
deleted file mode 100644
index afaa20a574..0000000000
--- a/packages/visual-dev/src/components/Radio/Radio.tsx
+++ /dev/null
@@ -1,83 +0,0 @@
-import * as React from "react";
-import root from "react-shadow/styled-components";
-import styled, { CSSProp } from "styled-components";
-import * as Styles from "./Styles";
-
-type RadioProps = OptionProps &
- StyleProps &
- Omit>, "value">;
-
-export interface OptionProps {
- /**
- * Value for form input, generally should be true or false
- */
- value?: any;
- /**
- * Callback triggered on radio select/deselect
- */
- onChange?: any;
- /**
- * Label for the radio, appears on the right
- */
- label?: React.ReactNode | "string";
-}
-
-export interface StyleProps {
- /**
- * Custom CSS applied to radio
- */
- customLabelCSS?: CSSProp;
-}
-
-const ShadowDom = styled(root.div)`
- display: contents;
-`;
-
-const RadioLabel = styled.label>`
- ${Styles.RadioLabelStyle}
- ${(props) => props.customLabelCSS}
-`;
-
-const RadioInput = styled.input`
- ${Styles.RadioInputStyle}
-`;
-
-const RadioButtonDiv = styled.div`
- ${Styles.RadioButtonStyle}
-`;
-
-export const RadioView = React.forwardRef<
- React.ElementRef<"input">,
- RadioProps
->((props, forwardRef) => {
- const { value, onChange, label, customLabelCSS = {}, ...rest } = props;
- return (
-
-
-
- {label ? label : ""}
-
- );
-});
-
-export const RadioGroupView = (props: RadioProps) => {
- const { children } = props;
-
- return {children} ;
-};
-
-/**
- * @deprecated use {@link RadioView} instead
- */
-export const Radio = RadioView;
-
-/**
- * @deprecated use {@link RadioGroupView} instead
- */
-export const RadioGroup = RadioGroupView;
diff --git a/packages/visual-dev/src/components/Radio/Styles.ts b/packages/visual-dev/src/components/Radio/Styles.ts
deleted file mode 100644
index a2b862ae17..0000000000
--- a/packages/visual-dev/src/components/Radio/Styles.ts
+++ /dev/null
@@ -1,54 +0,0 @@
-import { css } from "styled-components";
-
-export const RadioLabelStyle = css`
- display: flex;
- flex-direction: row;
- align-items: flex-start;
- margin-right: 10px;
- user-select: none;
- cursor: pointer;
- color: var(--sq-text);
- font-family: var(--sq-font-family-sans);
- font-weight: var(--sq-font-weight-regular);
- font-size: var(--sq-font-size-regular);
- line-height: var(--sq-line-height-regular);
-`;
-
-export const RadioInputStyle = css`
- display: none;
-
- &:checked + div {
- border-color: var(--sq-action-primary);
- }
-
- &:checked + div::after {
- transform: scale(1) translate(-50%, -50%);
- }
-`;
-
-export const RadioButtonStyle = css`
- margin-top: 2px;
- width: 14px;
- height: 14px;
- border: 1.5px solid var(--sq-text);
- border-radius: 50%;
- margin-right: 20px;
- box-sizing: border-box;
- flex-shrink: 0;
- position: relative;
-
- &::after {
- transform-origin: top left;
- position: relative;
- content: "";
- width: 8px;
- height: 8px;
- display: block;
- background: var(--sq-action-primary);
- border-radius: 100%;
- left: 50%;
- top: 50%;
- transform: scale(0) translate(-50%, -50%);
- transition: transform 0.15s;
- }
-`;
diff --git a/packages/visual-dev/src/components/Radio/index.ts b/packages/visual-dev/src/components/Radio/index.ts
deleted file mode 100644
index 034d6d838a..0000000000
--- a/packages/visual-dev/src/components/Radio/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./Radio";
-export * from "./rjsf-Radio"
\ No newline at end of file
diff --git a/packages/visual-dev/src/components/Radio/rjsf-Radio.tsx b/packages/visual-dev/src/components/Radio/rjsf-Radio.tsx
deleted file mode 100644
index bd11f39996..0000000000
--- a/packages/visual-dev/src/components/Radio/rjsf-Radio.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React, { useRef } from "react";
-import { RadioView } from "./Radio";
-import { WidgetProps } from "@rjsf/core";
-
-interface enumOption {
- label: string;
- value: any;
-}
-
-function isEnumOption(option: any): option is enumOption {
- return (
- typeof option === "object" &&
- option !== null &&
- option.hasOwnProperty("label") &&
- option.hasOwnProperty("value")
- );
-}
-
-function isEnumArray(options: any): options is any[] {
- return Array.isArray(options);
-}
-
-export const RJSFRadio = (props: WidgetProps) => {
- const valueOptions = props?.options?.enumOptions;
- if (!isEnumArray(valueOptions)) {
- return <>>;
- }
- const dummyRef = useRef(null);
- return (
-
- {valueOptions?.map((option: unknown) => {
- if (!isEnumOption(option)) {
- return <>>;
- }
- return (
- props.onChange(option.value)}
- />
- );
- })}
-
- );
-};
diff --git a/packages/visual-dev/src/components/RadioAction/RadioAction.stories.tsx b/packages/visual-dev/src/components/RadioAction/RadioAction.stories.tsx
deleted file mode 100644
index b7bf7aed36..0000000000
--- a/packages/visual-dev/src/components/RadioAction/RadioAction.stories.tsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import React, { useState } from "react";
-import { RadioActionView, RadioActionGroupView } from ".";
-
-export default {
- title: "Components / RadioAction",
- component: RadioActionView,
-};
-
-export const Functional = () => {
- const [value, setValue] = useState(0);
- return (
-
- setValue(1)}
- />
- setValue(2)}
- />
- setValue(3)}
- />
-
- );
-};
-
-export const RadioActionUnselected = () => {
- return (
-
-
-
- );
-};
-
-export const RadioActionNoDescription = () => {
- return (
-
-
-
- );
-};
-
-export const RadioActionSelected = () => {
- return (
-
-
-
- );
-};
-
-export const TwoColumnLayout = () => {
- return (
-
-
-
-
- );
-};
diff --git a/packages/visual-dev/src/components/RadioAction/RadioAction.tsx b/packages/visual-dev/src/components/RadioAction/RadioAction.tsx
deleted file mode 100644
index 2470fe5f11..0000000000
--- a/packages/visual-dev/src/components/RadioAction/RadioAction.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import * as React from "react";
-import root from "react-shadow/styled-components";
-import styled from "styled-components";
-import * as Styles from "./Styles";
-
-type GroupProps = React.ComponentProps<"input"> & GroupOptions;
-
-type InputProps = OptionProps &
- Omit>, "translate" | "value">;
-
-export interface GroupOptions {
- /**
- * Display two columns of radio actions
- */
- twoColumns?: boolean;
-}
-export interface OptionProps {
- /**
- * Current value of radio action form group
- */
- value?: any;
- /**
- * Form value of radio action
- */
- optionValue?: any;
- /**
- * Callback triggered on radio action select/deselect
- */
- onChange?: any;
- /**
- * Title that appears next to the radio
- */
- title: string;
- /**
- * Description that appears below the title, use ReactNodes for custom text styles
- */
- description?: string | React.ReactNode;
-}
-
-const ShadowDom = styled(root.div)`
- display: contents;
-`;
-
-const ContainerDiv = styled.div<{ twoColumns: boolean }>`
- display: contents;
- ${(props) => props.twoColumns && Styles.RadioTwoColumn}
-`;
-
-const RadioLabel = styled.label<{ isChecked: boolean }>`
- ${Styles.RadioLabelStyle}
- ${(props) => (props.isChecked ? "background: var(--sq-background);" : "")}
-`;
-const RadioInput = styled.input`
- ${Styles.RadioInputStyle}
-`;
-const RadioButtonDiv = styled.div`
- ${Styles.RadioButtonStyle}
-`;
-const RadioTextDiv = styled.div`
- ${Styles.RadioTextStyle}
-`;
-
-export const RadioActionView = React.forwardRef<
- React.ElementRef<"input">,
- InputProps
->((props, forwardedRef) => {
- const { value, optionValue, onChange, title, description, ...rest } = props;
-
- const selected = value === optionValue;
-
- return (
-
-
-
-
- {title ? {title}
: ""}
- {description ? (
-
- {" "}
- {description}{" "}
-
- ) : (
- ""
- )}
-
-
- );
-});
-
-export const RadioActionGroupView = (props: GroupProps) => {
- const { twoColumns = false, children } = props;
- return (
-
- {children}
-
- );
-};
-
-/**
- * @deprecated use {@link RadioActionView} instead
- */
-export const RadioAction = RadioActionView;
-
-/**
- * @deprecated use {@link RadioGroupView} instead
- */
-export const RadioActionGroup = RadioActionGroupView;
diff --git a/packages/visual-dev/src/components/RadioAction/Styles.ts b/packages/visual-dev/src/components/RadioAction/Styles.ts
deleted file mode 100644
index d35e7b7fa4..0000000000
--- a/packages/visual-dev/src/components/RadioAction/Styles.ts
+++ /dev/null
@@ -1,58 +0,0 @@
-import { css } from "styled-components";
-
-export const RadioLabelStyle = css`
- display: flex;
- flex-direction: row;
- align-items: flex-start;
- padding: var(--sq-spacing-large);
- user-select: none;
- cursor: pointer;
- color: var(--sq-text);
- font-family: var(--sq-font-family-sans);
- font-weight: var(--sq-font-weight-regular);
- font-size: var(--sq-font-size-regular);
- line-height: var(--sq-line-height-regular);
-`;
-export const RadioInputStyle = css`
- display: none;
-
- &:checked + div {
- border-color: var(--sq-action-primary);
- }
-
- &:checked + div::after {
- transform: scale(1);
- }
-`;
-export const RadioButtonStyle = css`
- margin-top: 2px;
- width: 14px;
- height: 14px;
- border: 1px solid var(--sq-text);
- border-radius: 50%;
- margin-right: var(--sq-spacing-large);
- box-sizing: border-box;
- padding: 2px;
- flex-shrink: 0;
-
- &::after {
- content: "";
- width: 8px;
- height: 8px;
- display: block;
- background: var(--sq-action-primary);
- border-radius: 100%;
- transform: scale(0);
- transition: transform 0.15s;
- }
-`;
-export const RadioTextStyle = css`
- flex-direction: column;
-`;
-export const RadioTwoColumn = css`
- display: grid;
- width: 100%;
- display: grid;
- grid-template-columns: 50% 50%;
- grid-gap: var(--sq-spacing-small);
-`;
diff --git a/packages/visual-dev/src/components/RadioAction/index.ts b/packages/visual-dev/src/components/RadioAction/index.ts
deleted file mode 100644
index 8ca7326984..0000000000
--- a/packages/visual-dev/src/components/RadioAction/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./RadioAction";
diff --git a/packages/visual-dev/src/components/RadioAction/rjsf-RadioAction.tsx b/packages/visual-dev/src/components/RadioAction/rjsf-RadioAction.tsx
deleted file mode 100644
index 5ed10e0bdd..0000000000
--- a/packages/visual-dev/src/components/RadioAction/rjsf-RadioAction.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import { WidgetProps } from "@rjsf/core";
-import React from "react";
-import { isEnumArray, isEnumValue } from "../RadioCard";
-import { RadioActionView, RadioActionGroupView } from "./RadioAction";
-
-interface enumOption {
- key: number;
- title: string;
- description: string;
- value: any;
-}
-
-function isActionOption(option: any): option is enumOption {
- return (
- typeof option === "object" &&
- option !== null &&
- option.hasOwnProperty("value") &&
- option.hasOwnProperty("title") &&
- option.hasOwnProperty("description")
- );
-}
-
-export function RJSFRadioActionWidget(props: WidgetProps) {
- const valueOptions = props?.options?.enumOptions;
- const actionOptions = props?.options?.ruleOptions;
- const twoColumns = props?.uiSchema["ui:options"]?.twoColumns ? true : false;
- if (!isEnumArray(valueOptions) || !isEnumArray(actionOptions)) {
- return <>>;
- }
- return (
-
- {valueOptions?.map((option: unknown) => {
- if (!isEnumValue(option)) {
- return <>>;
- }
- const action = actionOptions.filter(
- (action) => action.value === option?.value
- )[0];
- if (!action || !isActionOption(action)) {
- return <>>;
- }
- return (
- {
- props.onChange(option.value);
- }}
- />
- );
- })}
-
- );
-}
diff --git a/packages/visual-dev/src/components/RadioCard/RadioCard.stories.tsx b/packages/visual-dev/src/components/RadioCard/RadioCard.stories.tsx
deleted file mode 100644
index 218eec7550..0000000000
--- a/packages/visual-dev/src/components/RadioCard/RadioCard.stories.tsx
+++ /dev/null
@@ -1,241 +0,0 @@
-import React, { useState } from "react";
-import { RadioCardView } from ".";
-import { IconView } from "../Icon";
-
-export default {
- title: "Components / RadioCard",
- component: RadioCardView,
-};
-
-export const Functional = () => {
- const [value, setValue] = useState(0);
- return (
-
- setValue(1)}
- icon="calendar"
- />
- setValue(2)}
- icon="calendar"
- disabled
- />
- setValue(3)}
- icon="calendar"
- />
-
- );
-};
-
-export const radioCard = () => {
- return (
-
-
-
- );
-};
-
-export const radioCardWithTitleIcon = () => {
- return (
-
- }
- />
-
- );
-};
-
-export const radioCardCustomCSS = () => {
- return (
-
-
-
- );
-};
-
-export const radioCardSelected = () => {
- return (
-
-
-
- );
-};
-
-export const radioCardNoIcon = () => {
- return (
-
-
-
- );
-};
-
-export const radioCardNoTitle = () => {
- return (
-
-
-
- );
-};
-
-export const radioCardNoDescription = () => {
- return (
-
-
-
- );
-};
-
-export const radioCardNoText = () => {
- return (
-
-
-
- );
-};
-
-export const CustomCSSNoIcon = () => {
- return (
-
-
-
- );
-};
-
-export const Disabled = () => {
- return (
-
-
-
- );
-};
-
-export const DisabledAndSelected = () => {
- return (
-
-
-
- );
-};
diff --git a/packages/visual-dev/src/components/RadioCard/RadioCard.tsx b/packages/visual-dev/src/components/RadioCard/RadioCard.tsx
deleted file mode 100644
index 75f8972a65..0000000000
--- a/packages/visual-dev/src/components/RadioCard/RadioCard.tsx
+++ /dev/null
@@ -1,201 +0,0 @@
-import * as React from "react";
-import root from "react-shadow/styled-components";
-import styled, { css, CSSProp } from "styled-components";
-import * as Styles from "./Styles";
-import { IconKey, IconView } from "../Icon";
-
-type GroupProps = React.ComponentProps<"input">;
-
-type InputProps = OptionProps &
- Partial, "value">>;
-export interface OptionProps {
- /**
- * Current value of radio card form group
- */
- value: any;
- /**
- * Form value of radio card
- */
- optionValue: any;
- /**
- * Callback triggered on radio action select/deselect
- */
- onChange?: any;
- /**
- * Main title at the top of the card
- */
- title?: string | React.ReactNode;
- /**
- * Description in the card below the title
- */
- description?: string | React.ReactNode;
- /**
- * Icon displayed in the left side section of the card
- */
- icon?: IconKey;
- /**
- * Icon displayed to the right of the title
- */
- titleIconSlot?: React.ReactNode;
- /**
- * Custom CSS applied to Radio Card
- */
- customCSS?: CSSProp;
-}
-
-const ShadowDom = styled(root.div)`
- display: contents;
-`;
-
-interface RadioLabelProps {
- isChecked: boolean;
- customCSS: CSSProp;
- disabled: boolean;
-}
-
-const RadioLabel = styled.label`
- ${Styles.RadioLabelStyle}
- ${(props) => props.customCSS && props.customCSS}
-
-
-${(props) =>
- !props.isChecked &&
- !props.disabled &&
- "&:hover {border-color: var(--sq-text-subdued);}; &:hover * {border-color: var(--sq-text-subdued);}"}
-
- ${(props) =>
- props.disabled &&
- css`
- cursor: default;
- background-color: var(--sq-border);
- border-color: var(--sq-placeholder-text-on-secondary);
- & * {
- border-color: var(--sq-placeholder-text-on-secondary);
- }
- & ${RightSegmentDiv} {
- color: var(--sq-text-subdued);
- }
- `}
- ${(props) =>
- props.isChecked &&
- "border-color: var(--sq-action-primary-hovered); & * {border-color: var(--sq-action-primary-hovered);}"}
-${(props) => props.customCSS}
-`;
-const RadioInput = styled.input<{ disabled: boolean }>`
- ${Styles.RadioInputStyle}
- ${(props) => props.disabled && "border-color: unset;"}
-`;
-
-const RightSegmentDiv = styled.div`
- ${Styles.RightSegmentStyle}
-`;
-
-const RadioTextDiv = styled.div`
- ${Styles.RadioTextStyle}
-`;
-
-const LeftSegmentDiv = styled.div<{ isChecked: boolean }>`
- ${Styles.LeftSegmentStyle}
- ${(props) => props.isChecked && "color: var(--sq-action-primary-hovered);"}
-`;
-
-const RadioGridDiv = styled.div`
- ${Styles.RadioGridStyle}
-`;
-
-const TitleContainerDiv = styled.div`
- ${Styles.TitleContainerStyle}
-`;
-
-const TitleP = styled.p`
- ${Styles.TitleStyle}
-`;
-
-const RadioCardView = React.forwardRef, InputProps>(
- (props, forwardedRef) => {
- const {
- value,
- optionValue,
- title,
- description,
- icon = "",
- titleIconSlot,
- customCSS = {},
- disabled = false,
- ...rest
- } = props;
-
- const selected = value === optionValue;
-
- const icon_color = selected ? "var(--sq-action-primary-hovered)" : "";
-
- return (
-
-
- {icon && (
-
-
-
- )}
-
-
- {title && (
-
- {title}
- {titleIconSlot && titleIconSlot}
-
- )}
- {description && (
- {description}
- )}
-
-
-
- );
- }
-);
-
-export const RadioCardGroupView = (props: GroupProps) => {
- const { children } = props;
-
- return (
-
- {children}
-
- );
-};
-
-/**
- * @deprecated use {@link RadioGroupView} instead
- */
-export const RadioCardGroup = RadioCardGroupView;
-
-const RadioCardNamespace = Object.assign(RadioCardView, {
- GroupView: RadioCardGroupView,
-});
-
-/**
- * @deprecated use {@link RadioCardView} instead
- */
-const RadioCardNamespaceDeprecated = Object.assign(RadioCardView, {
- Group: RadioCardGroupView,
-});
-
-export { RadioCardNamespace as RadioCardView };
-
-/**
- * @deprecated use {@link RadioCardView} instead
- */
-export { RadioCardNamespaceDeprecated as RadioCard };
diff --git a/packages/visual-dev/src/components/RadioCard/Styles.ts b/packages/visual-dev/src/components/RadioCard/Styles.ts
deleted file mode 100644
index 5e02d2d441..0000000000
--- a/packages/visual-dev/src/components/RadioCard/Styles.ts
+++ /dev/null
@@ -1,73 +0,0 @@
-import { css } from "styled-components";
-
-export const RadioLabelStyle = css`
- display: flex;
- flex-direction: row;
- min-height: 95px;
- box-sizing: border-box;
- border: 1px solid var(--sq-border);
- border-radius: var(--sq-border-radius-normal);
- align-items: center;
- user-select: none;
- cursor: pointer;
- color: var(--sq-text);
- font-family: var(--sq-font-family-sans);
- font-weight: var(--sq-font-weight-regular);
- font-size: var(--sq-font-size-regular);
- line-height: var(--sq-line-height-regular);
- background-color: var(--sq-surface);
- & * {
- border-color: var(--sq-border);
- }
-`;
-
-export const RadioGridStyle = css`
- display: grid;
- grid-template-columns: repeat(2, 1fr);
- gap: 20px;
-`;
-
-export const RadioInputStyle = css`
- display: none;
-
- &:checked + div::after {
- transform: scale(1);
- }
-`;
-
-export const RadioTextStyle = css`
- flex-direction: column;
- padding: var(--sq-spacing-large);
-`;
-
-export const RightSegmentStyle = css`
- width: auto;
- align-self: stretch;
- float: right;
-`;
-
-export const LeftSegmentStyle = css`
- float: left;
- min-width: 117px;
- height: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
- border-right-width: 1px;
- border-right-style: solid;
-`;
-
-export const TitleContainerStyle = css`
- display: flex;
- gap: var(--sq-spacing-xx-small);
- align-items: center;
- justify-content: flex-start;
- margin-bottom: var(--sq-spacing-xx-small);
-`;
-
-export const TitleStyle = css`
- font-weight: bold;
- margin: 0px;
- font-size: var(--sq-font-size-regular);
- color: inherit;
-`;
diff --git a/packages/visual-dev/src/components/RadioCard/index.ts b/packages/visual-dev/src/components/RadioCard/index.ts
deleted file mode 100644
index ac4048d511..0000000000
--- a/packages/visual-dev/src/components/RadioCard/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./RadioCard";
-export * from "./rjsf-RadioCard";
diff --git a/packages/visual-dev/src/components/RadioCard/rjsf-RadioCard.tsx b/packages/visual-dev/src/components/RadioCard/rjsf-RadioCard.tsx
deleted file mode 100644
index 2219021c05..0000000000
--- a/packages/visual-dev/src/components/RadioCard/rjsf-RadioCard.tsx
+++ /dev/null
@@ -1,92 +0,0 @@
-import { WidgetProps } from "@rjsf/core";
-import React from "react";
-import { IconKey } from "../Icon";
-import { RadioCardView, RadioCardGroupView } from "./RadioCard";
-
-interface cardOption {
- key: number;
- icon: string;
- title: string;
- description: string;
- value: any;
-}
-
-interface enumValue {
- label: any;
- value: any;
-}
-
-export function isEnumValue(option: any): option is enumValue {
- return (
- typeof option === "object" &&
- option !== null &&
- option.hasOwnProperty("label") &&
- option.hasOwnProperty("value")
- );
-}
-
-export function isCardOption(card: any): card is cardOption {
- return (
- typeof card === "object" &&
- card !== null &&
- card.hasOwnProperty("value") &&
- card.hasOwnProperty("icon") &&
- card.hasOwnProperty("title") &&
- card.hasOwnProperty("description")
- );
-}
-
-export function isEnumArray(options: any): options is any[] {
- return Array.isArray(options);
-}
-
-export function RJSFRadioCardWidget(props: WidgetProps) {
- if (
- !isEnumArray(props?.options?.enumOptions) ||
- !isEnumArray(props?.options?.ruleOptions)
- ) {
- return <>>;
- }
-
- console.log();
-
- const valueOptions = props?.options?.reverse
- ? props?.options?.enumOptions?.reverse()
- : props?.options?.enumOptions;
- const cardOptions = props?.options?.reverse
- ? props?.options?.ruleOptions?.reverse()
- : props?.options?.ruleOptions;
-
- return (
-
- {valueOptions?.map((option: unknown) => {
- if (!isEnumValue(option)) {
- return <>>;
- }
- const card = cardOptions.filter(
- (card) => card.value === option?.value
- )[0];
- if (!card || !isCardOption(card)) {
- return <>>;
- }
- return (
- {
- e.preventDefault();
- props.onChange(option.value);
- }}
- />
- );
- })}
-
- );
-}
diff --git a/packages/visual-dev/src/components/RadioGeneric/RadioGeneric.stories.tsx b/packages/visual-dev/src/components/RadioGeneric/RadioGeneric.stories.tsx
deleted file mode 100644
index 9ca7bfedc5..0000000000
--- a/packages/visual-dev/src/components/RadioGeneric/RadioGeneric.stories.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import React from "react";
-import { useState } from "react";
-import { RadioGenericView } from ".";
-
-export default {
- title: "Components / Generic Radio",
- component: RadioGenericView,
-};
-
-// TODO: Fix typing
-// const RadioHandle = ({
-// value,
-// activeValue,
-// }: {
-// value: string;
-// activeValue: string;
-// }) => {
-// return (
-//
-// {value}
-//
-// );
-// };
-
-export const Functional = () => {
- const [value, setValue] = useState();
- // const opts: Array = [
- // { value: "1", view: },
- // { value: "2", view: },
- // { value: "3", view: },
- // ];
- return (
- {
- setValue(val);
- }}
- >
- );
-};
diff --git a/packages/visual-dev/src/components/RadioGeneric/RadioGeneric.tsx b/packages/visual-dev/src/components/RadioGeneric/RadioGeneric.tsx
deleted file mode 100644
index 366a4f1148..0000000000
--- a/packages/visual-dev/src/components/RadioGeneric/RadioGeneric.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import * as React from "react";
-import root from "react-shadow/styled-components";
-import styled, { CSSProp } from "styled-components";
-import * as Styles from "./Styles";
-
-type RadioGenericProps = OptionProps &
- StyleProps &
- Partial>;
-
-export interface RadioOption {
- value: any;
- view: React.ComponentType; // TODO switch to using component type and stop injecting props with clone https://flow.org/en/docs/react/types/#toc-react-componenttype
-}
-
-export interface OptionProps {
- /**
- * Value for form input
- */
- activeValue?: any;
- /**
- * Callback triggered on radio select/deselect
- */
- onChange?: any;
-
- name: string;
-
- radioOptions: Array;
-}
-
-export interface StyleProps {
- /**
- * Custom CSS applied to radio
- */
- customCSS?: CSSProp;
-}
-
-const ShadowDom = styled(root.div)`
- display: contents;
-`;
-
-const StyledRadioInput = styled.input``;
-
-const ContainerDiv = styled.div>`
- ${Styles.ContainerDiv}
-`;
-
-export const RadioGenericView = React.forwardRef<
- React.ElementRef<"div">,
- RadioGenericProps
->((props, forwardRef) => {
- const {
- name,
- activeValue,
- onChange,
- customCSS = {},
- radioOptions,
- ...rest
- } = props;
- return (
-
-
- {radioOptions &&
- radioOptions.map((radioOption: any) => (
- <>
-
- {React.cloneElement(radioOption.view, {
- activeValue: activeValue,
- htmlFor: radioOption.value.toLowerCase(),
- onClick: () => onChange(radioOption.value),
- })}
- >
- ))}
-
-
- );
-});
diff --git a/packages/visual-dev/src/components/RadioGeneric/Styles.ts b/packages/visual-dev/src/components/RadioGeneric/Styles.ts
deleted file mode 100644
index d8f216fd6c..0000000000
--- a/packages/visual-dev/src/components/RadioGeneric/Styles.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import { css } from "styled-components";
-
-export const ContainerDiv = css``;
diff --git a/packages/visual-dev/src/components/RadioGeneric/index.ts b/packages/visual-dev/src/components/RadioGeneric/index.ts
deleted file mode 100644
index ba0de80b43..0000000000
--- a/packages/visual-dev/src/components/RadioGeneric/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./RadioGeneric";
diff --git a/packages/visual-dev/src/components/ScrollNav/ScrollNav.stories.tsx b/packages/visual-dev/src/components/ScrollNav/ScrollNav.stories.tsx
deleted file mode 100644
index 572f0ffd03..0000000000
--- a/packages/visual-dev/src/components/ScrollNav/ScrollNav.stories.tsx
+++ /dev/null
@@ -1,78 +0,0 @@
-import React from "react";
-import { ScrollNavView } from ".";
-
-export default {
- title: "Components / Scroll Nav",
-
- component: ScrollNavView,
-};
-
-export const Default = () => {
- return (
-
- console.log("Scrolling to section")}
- >
- Item1
-
- console.log("Scrolling to section")}
- >
- A very long nav item that breaks
-
- console.log("Scrolling to section")}
- >
- Item3
-
-
- );
-};
-
-export const OnSection2 = () => {
- return (
-
- console.log("Scrolling to section")}
- >
- Item1
-
- console.log("Scrolling to section")}
- >
- A very long nav item that breaks
-
- console.log("Scrolling to section")}
- >
- Item3
-
-
- );
-};
-
-export const CustomCSS = () => {
- return (
-
- console.log("Scrolling to section")}
- >
- Item1
-
- console.log("Scrolling to section")}
- >
- A very long nav item that breaks
-
- console.log("Scrolling to section")}
- customCSS={{ backgroundColor: "pink" }}
- >
- Item3
-
-
- );
-};
diff --git a/packages/visual-dev/src/components/ScrollNav/ScrollNav.tsx b/packages/visual-dev/src/components/ScrollNav/ScrollNav.tsx
deleted file mode 100644
index 37584a5e96..0000000000
--- a/packages/visual-dev/src/components/ScrollNav/ScrollNav.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import React from "react";
-import styled, { CSSProp } from "styled-components";
-import * as Styles from "./Styles";
-
-export type ScrollNavViewProps = OptionProps &
- StyleProps &
- Partial>;
-
-export interface OptionProps {
- /**
- * Scroll nav content for adding items
- */
- children: React.ReactNode[] | React.ReactNode;
- /**
- * To indicate the current section that the page is on
- */
- currentSection: number;
-}
-
-export type ScrollNavItemViewProps = {
- children: React.ReactNode[] | React.ReactNode;
- onClick: () => void;
- customCSS?: CSSProp;
-} & Partial>;
-
-export interface StyleProps {
- /**
- * Custom CSS applied to the target
- */
- customCSS?: CSSProp;
-}
-
-const ItemDiv = styled.div`
- ${Styles.ItemDiv}
- ${(props) => props.customCSS}
-`;
-
-const ContainerDiv = styled.div`
- ${Styles.ContainerDiv}
-
- ${ItemDiv}:nth-child( ${(props) => props.current}) {
- border-left: 2px solid var(--sq-action-primary);
- }
- ${(props) => props.customCSS}
-`;
-
-export const ScrollNavView = React.forwardRef<
- React.ElementRef<"div">,
- ScrollNavViewProps
->((props, forwardedRef) => {
- const { currentSection, customCSS = {}, children, ...rest } = props;
- return (
-
- {children}
-
- );
-});
-
-export const ScrollNavItemView = React.forwardRef<
- React.ElementRef<"div">,
- ScrollNavItemViewProps
->((props, forwardedRef) => {
- const { children, customCSS = {}, onClick, ...rest } = props;
- return (
-
- {children}
-
- );
-});
diff --git a/packages/visual-dev/src/components/ScrollNav/Styles.ts b/packages/visual-dev/src/components/ScrollNav/Styles.ts
deleted file mode 100644
index 393138f91c..0000000000
--- a/packages/visual-dev/src/components/ScrollNav/Styles.ts
+++ /dev/null
@@ -1,23 +0,0 @@
-import { css } from "styled-components";
-
-export const ItemDiv = css`
- padding: var(--sq-spacing-x-small) var(--sq-spacing-small);
- color: var(--sq-text);
- position: relative;
- left: -1px;
- cursor: pointer;
-
- &:hover {
- background: var(--sq-surface-subdued);
- }
-`;
-
-export const ContainerDiv = css`
- display: flex;
- flex-direction: column;
- position: relative;
- width: max-content;
- margin: auto;
- border-left: 1px solid var(--sq-border);
- max-width: 180px;
-`;
diff --git a/packages/visual-dev/src/components/ScrollNav/index.ts b/packages/visual-dev/src/components/ScrollNav/index.ts
deleted file mode 100644
index 9a03e5c960..0000000000
--- a/packages/visual-dev/src/components/ScrollNav/index.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-import { ScrollNavView, ScrollNavItemView } from "./ScrollNav";
-
-const ScrollNavNamespace = Object.assign(ScrollNavView, {
- ItemView: ScrollNavItemView,
-});
-export { ScrollNavNamespace as ScrollNavView };
diff --git a/packages/visual-dev/src/components/Select/Combobox.stories.tsx b/packages/visual-dev/src/components/Select/Combobox.stories.tsx
deleted file mode 100644
index 14fe14ad1c..0000000000
--- a/packages/visual-dev/src/components/Select/Combobox.stories.tsx
+++ /dev/null
@@ -1,250 +0,0 @@
-import { useCombobox } from "downshift";
-import React, { useState } from "react";
-import styled from "styled-components";
-import { Select } from "./Select";
-import { SelectView } from "./Select2";
-import { useComboboxDemo } from "./useComboboxDemo";
-
-export default {
- title: "Components / Combobox",
- component: Select,
-};
-const items = ["Salt Spring", "Gabriola", "Mayne", "Pender"];
-const StoryContainerDiv = styled.div`
- resize: both;
- height: 400px;
- overflow: auto;
- margin: 100px;
-`;
-
-export const Basic = () => {
- const props = useComboboxDemo({
- items,
- });
- return (
-
-
-
- );
-};
-
-export const Placeholder = () => {
- const props = useComboboxDemo({
- items,
- });
- return (
-
-
-
- );
-};
-
-export const CustomIcon = () => {
- const props = useComboboxDemo({
- items,
- });
- return (
-
-
-
- );
-};
-
-export const Empty = () => {
- const props = useComboboxDemo({
- items,
- });
- return (
-
-
-
- );
-};
-
-export const FullWidth = () => {
- const props = useComboboxDemo({
- items,
- });
- return (
-
-
-
- );
-};
-
-export const CustomWidth = () => {
- const props = useComboboxDemo({
- items,
- });
- return (
-
-
-
- );
-};
-
-export const LimitHeight = () => {
- const items = [
- "Salt Spring",
- "Galiano",
- "Saturna",
- "Sidney",
- "Gabriola",
- "Mayne",
- "Pender",
- ];
- const props = useComboboxDemo({
- items,
- });
- return (
-
-
-
- );
-};
-
-export const CustomHeight = () => {
- const props = useComboboxDemo({
- items,
- });
- return (
-
-
-
- );
-};
-
-export const Loading = () => {
- const props = useComboboxDemo({
- items,
- });
- return (
-
-
-
- );
-};
-
-export const Clearable = () => {
- const props = useComboboxDemo({
- items,
- });
- return ;
-};
-
-export const Detailed = () => {
- interface Islands {
- text: string;
- description: string;
- }
- const selectItems: Array = [
- { text: "Salt Spring", description: "The big one" },
- { text: "Gabriola", description: "Way up north" },
- { text: "Mayne", description: "With a y" },
- { text: "Pender", description: "There's actually two" },
- ];
- const itemToString = (item: Islands | null) => (item ? item.text : "");
- const props = useComboboxDemo({ items: selectItems, itemToString });
- return (
-
-
-
- {props.items.map((item: any, index: number) => (
- (
-
-
{item.text}
-
{item.description}
-
- ),
- }}
- />
- ))}
-
-
- );
-};
-
-export const Disabled = () => {
- const props = useComboboxDemo({
- items,
- });
- return ;
-};
-
-export const Error = () => {
- const props = useComboboxDemo({
- items,
- });
- return ;
-};
-
-export const CustomCSS = () => {
- const props = useComboboxDemo({
- items,
- });
- return ;
-};
-
-export const Frame = () => {
- const items = ["Salt Spring", "Gabriola", "Mayne", "Pender"];
- const items2 = ["Orca", "San Juan"];
- const combinedItems = [...items, ...items2];
- const [inputItems, setInputItems] = useState(combinedItems);
- const functional = useCombobox({
- items: [...items, ...items2],
- onInputValueChange: ({ inputValue }) => {
- setInputItems(
- combinedItems.filter((item) =>
- item.toLowerCase().startsWith(inputValue?.toLowerCase() || "")
- )
- );
- },
- });
- const props = { limitWidth: false, items: inputItems, functional };
- return (
-
-
-
-
- Gulf Islands
- {inputItems
- .filter((x) => items.includes(x))
- .map((item, index) => (
-
- ))}
- San Juan Islands
- {inputItems
- .filter((x) => items2.includes(x))
- .map((item, index) => {
- const global_index = items.length + index;
- return (
-
- );
- })}
-
-
-
- );
-};
diff --git a/packages/visual-dev/src/components/Select/MultiSelect.stories.tsx b/packages/visual-dev/src/components/Select/MultiSelect.stories.tsx
deleted file mode 100644
index 72b1178f99..0000000000
--- a/packages/visual-dev/src/components/Select/MultiSelect.stories.tsx
+++ /dev/null
@@ -1,272 +0,0 @@
-import { useMultipleSelection, useSelect } from "downshift";
-import React, { useState } from "react";
-import { TagView } from "../Tag";
-import { SelectView } from "./Select2";
-import { useMultiSelectDemo } from "./useMultiSelectDemo";
-
-export default {
- title: "Components / Multi Select",
- component: SelectView,
-};
-
-const books = [
- "To Kill a Mockingbird",
- "War and Peace",
- "The Idiot",
- "A Picture of Dorian Gray",
- "1984",
- "Pride and Prejudice",
- "Meditations",
-];
-
-export function MultipleSelect() {
- const props = useMultiSelectDemo({ selectItems: books });
-
- return (
-
-
-
-
- );
-}
-
-export function MultipleSelectDisabled() {
- const props = {
- ...useMultiSelectDemo({ selectItems: books }),
- disabled: true,
- };
-
- return (
-
-
-
-
- );
-}
-
-export function MultipleSelectCombobox() {
- const props = useMultiSelectDemo({ selectItems: books, useCombobox: true });
-
- return (
-
-
-
-
- );
-}
-
-export function MultipleSelectComboboxDisabled() {
- const props = {
- ...useMultiSelectDemo({ selectItems: books, useCombobox: true }),
- disabled: true,
- };
-
- return (
-
-
-
-
- );
-}
-
-export function MultipleSelectCreatableCombobox() {
- const [stateBooks, setStateBooks] = useState(books);
- const props = {
- ...useMultiSelectDemo({
- selectItems: stateBooks,
- useCombobox: true,
- }),
- limitWidth: false,
- };
-
- return (
-
-
-
-
- {
- setStateBooks([...stateBooks, props.functional.inputValue]);
- }}
- >
- + Create Reward "{props.functional.inputValue}"
-
- {props.items.map((item: any, index: number) => (
-
- ))}
-
-
- );
-}
-
-export function MultipleSelectFullWidth() {
- const props = useMultiSelectDemo({ selectItems: books });
-
- return (
-
-
-
-
- );
-}
-
-export function MultiSelectWithManyItems() {
- const longBooks = [
- "To Kill a Mockingbird",
- "War and Peace",
- "The Idiot",
- "A Picture of Dorian Gray",
- "1984",
- "Pride and Prejudice",
- "Meditations",
- "Harry Potter",
- "The Lord of the Rings",
- "The Alchemist",
- "The Da Vince Code",
- "The Twilight Saga",
- "Gone with the Wind",
- "Think and Grow Rich",
- "A Tale of Two Cities",
- "The Little Prince",
- "The Hobbit",
- "Atomic Habits",
- ];
-
- const props = useMultiSelectDemo({ selectItems: longBooks });
-
- return (
-
-
-
-
- );
-}
-
-interface Book {
- title: string;
- author: string;
-}
-
-const booksObject: Book[] = [
- { title: "To Kill a Mockingbird", author: "Harper Lee" },
- { title: "War and Peace", author: "Leo Tolstoy" },
- { title: "A Picture of Dorian Gray", author: "Oscar Wilde" },
- { title: "1984", author: "George Orwell" },
-];
-
-export function MultipleSelectObjectItem() {
- const itemToString = (item: Book | null) => {
- return item?.title || "";
- };
- const itemToNode = (item: Book | null) => {
- if (item === null) {
- return null;
- }
- return (
-
-
{item?.title}
-
{item?.author}
-
- );
- };
-
- const {
- getSelectedItemProps,
- getDropdownProps,
- addSelectedItem,
- removeSelectedItem,
- selectedItems,
- } = useMultipleSelection({
- initialSelectedItems: [booksObject[0], booksObject[1]],
- });
-
- function getBooksObjectFilter(selectedItems: Book[]) {
- return function booksFilter(book: Book) {
- return selectedItems.indexOf(book) < 0;
- };
- }
-
- const items = booksObject.filter(getBooksObjectFilter(selectedItems));
-
- const functional = useSelect({
- selectedItem: null,
- defaultHighlightedIndex: 0, // after selection, highlight the first item.
- items,
- stateReducer: (_, actionAndChanges) => {
- const { changes, type } = actionAndChanges;
- switch (type) {
- case useSelect.stateChangeTypes.MenuKeyDownEnter:
- case useSelect.stateChangeTypes.MenuKeyDownSpaceButton:
- case useSelect.stateChangeTypes.ItemClick:
- return {
- ...changes,
- isOpen: true, // keep the menu open after selection.
- };
- }
- return changes;
- },
- onStateChange: ({ type, selectedItem }) => {
- switch (type) {
- case useSelect.stateChangeTypes.MenuKeyDownEnter:
- case useSelect.stateChangeTypes.MenuKeyDownSpaceButton:
- case useSelect.stateChangeTypes.ItemClick:
- if (selectedItem) {
- addSelectedItem(selectedItem);
- }
- break;
- default:
- break;
- }
- },
- });
-
- const tagsSlot = (
- <>
- {selectedItems.map(function renderSelectedItem(
- selectedItemForRender,
- index
- ) {
- return (
- {
- e.stopPropagation();
- removeSelectedItem(selectedItemForRender);
- }}
- >
- {itemToString(selectedItemForRender)}
-
- );
- })}
- >
- );
-
- const props = {
- getSelectedItemProps,
- getDropdownProps,
- addSelectedItem,
- removeSelectedItem,
- functional,
- items,
- tagsSlot,
- itemToNode,
- itemToString,
- };
-
- return (
-
-
-
-
- );
-}
diff --git a/packages/visual-dev/src/components/Select/Select.stories.tsx b/packages/visual-dev/src/components/Select/Select.stories.tsx
deleted file mode 100644
index 0f2ed75c3c..0000000000
--- a/packages/visual-dev/src/components/Select/Select.stories.tsx
+++ /dev/null
@@ -1,262 +0,0 @@
-import { useSelect } from "downshift";
-import React from "react";
-import { Select } from ".";
-import { IconKey } from "../Icon";
-
-export default {
- title: "Components / Select",
- component: Select,
-};
-
-export const Basic = () => {
- const items = ["Salt Spring", "Gabriola", "Mayne", "Pender"];
- const functional = useSelect({ items });
- const props = { items, functional };
- return (
-
-
-
- );
-};
-
-export const CustomIcon = () => {
- const items = ["Salt Spring", "Gabriola", "Mayne", "Pender"];
- const functional = useSelect({ items });
- const props = { items, functional, customIcon: "add" as IconKey };
- return (
-
-
-
- );
-};
-
-export const FullWidth = () => {
- const items = ["Salt Spring", "Gabriola", "Mayne", "Pender"];
- const functional = useSelect({ items });
- const props = { limitWidth: false, items, functional };
- return (
-
-
-
- );
-};
-
-export const CustomWidth = () => {
- const items = ["Salt Spring", "Gabriola", "Mayne", "Pender"];
- const functional = useSelect({ items });
- const props = { limitWidth: "600px", items, functional };
- return (
-
-
-
- );
-};
-
-export const LimitHeight = () => {
- const items = [
- "Salt Spring",
- "Galiano",
- "Saturna",
- "Sidney",
- "Gabriola",
- "Mayne",
- "Pender",
- ];
- const functional = useSelect({ items });
- const props = { limitHeight: true, items, functional };
- return (
-
-
-
- );
-};
-
-export const CustomHeight = () => {
- const items = ["Salt Spring", "Gabriola", "Mayne", "Pender"];
- const functional = useSelect({ items });
- const props = { limitHeight: "100px", items, functional };
- return (
-
-
-
- );
-};
-
-export const LongItemName = () => {
- const items = [
- "Salt Spring",
- "Gabriola",
- "Mayne",
- "Pender",
- "Some really super long name that runs off the input",
- ];
- const functional = useSelect({ items });
- const props = { items, functional };
- return ;
-};
-
-export const WithPlaceholder = () => {
- const items = ["Salt Spring", "Gabriola", "Mayne", "Pender"];
- const functional = useSelect({ items });
- const props = {
- placeholder: "Enter a value! Long text placeholder with ellipses",
- items,
- functional,
- };
- return ;
-};
-
-export const Loading = () => {
- const items = ["Salt Spring", "Gabriola", "Mayne", "Pender"];
- const hooks = useSelect({ items });
- const props = { loading: true, items, functional: hooks };
- return (
-
-
-
- );
-};
-
-export const LoadingCustomSlotContent = () => {
- const items = ["Salt Spring", "Gabriola", "Mayne", "Pender"];
- const hooks = useSelect({ items });
- const props = {
- loading: true,
- loadingSlot: "Loading...",
- items,
- functional: hooks,
- };
- return (
-
-
-
- );
-};
-
-export const Empty = () => {
- const items = ["Salt Spring", "Gabriola", "Mayne", "Pender"];
- const hooks = useSelect({ items });
- const props = {
- empty: true,
- items,
- functional: hooks,
- emptySlot: "No items to display",
- };
- return (
-
-
-
- );
-};
-
-export const Clearable = () => {
- const items = ["Salt Spring", "Gabriola", "Mayne", "Pender"];
- const functional = useSelect({ items });
- const props = { items, functional, clearable: true };
- return ;
-};
-
-export const Detailed = () => {
- interface Islands {
- text: string;
- description: string;
- }
- const items: Array = [
- { text: "Salt Spring", description: "The big one" },
- { text: "Gabriola", description: "Way up north" },
- { text: "Mayne", description: "With a y" },
- { text: "Pender", description: "There's actually two" },
- ];
- const itemToString = (item: Islands | null) => (item ? item.text : "");
- const functional = useSelect({ items, itemToString });
- const props = { items, functional, itemToString };
- return ;
-};
-
-export const Disabled = () => {
- const items = ["Salt Spring", "Gabriola", "Mayne", "Pender"];
- const functional = useSelect({ items });
- const props = { items, functional, disabled: true };
- return ;
-};
-
-export const Error = () => {
- const items = ["Salt Spring", "Gabriola", "Mayne", "Pender"];
- const functional = useSelect({ items });
- const props = {
- items,
- functional,
- errors: { field1: "error" },
- };
- return ;
-};
-
-export const CustomCSS = () => {
- const items = ["Salt Spring", "Gabriola", "Mayne", "Pender"];
- const functional = useSelect({ items });
- const props = { css: "color: blue", items, functional };
- return ;
-};
diff --git a/packages/visual-dev/src/components/Select/Select.tsx b/packages/visual-dev/src/components/Select/Select.tsx
deleted file mode 100644
index 4040861185..0000000000
--- a/packages/visual-dev/src/components/Select/Select.tsx
+++ /dev/null
@@ -1,109 +0,0 @@
-import { CSSProp } from "styled-components";
-import { UseComboboxReturnValue, UseSelectReturnValue } from "downshift";
-import React from "react";
-import { IconKey } from "../Icon";
-import { SelectView } from "./Select2";
-
-export type SelectProps = OptionProps &
- Partial>;
-
-export interface OptionProps {
- /**
- * Downshift hook for component functionality (useSelect or useCombobox)
- */
- functional: UseSelectReturnValue | UseComboboxReturnValue;
- /**
- * Function to transform item objects to strings for display
- */
- itemToString?: (item: ItemType | null) => string;
- /**
- * Function to transform item objects into template code for dropdown items
- */
- itemToNode?: (item: ItemType) => React.ReactNode;
- /**
- * Disable the select
- */
- disabled?: boolean;
- /**
- * Render the select with red border and background to indicate an error
- */
- errors?: any;
- /**
- * Items to include in the select list
- */
- items: Array;
- /**
- * Custom CSS for the select handle
- */
- customCSS?: CSSProp;
- /**
- * Custom CSS for the select handle container
- */
- customContainerCSS?: CSSProp;
- /**
- * Allow the select value to be cleared
- */
- clearable?: boolean;
- /**
- * Render the handle in the loading state
- */
- loading?: boolean;
- /**
- * Placeholder displayed in the handle before a selection is made
- */
- placeholer?: string;
- /**
- * Limit the width of the select with a valid CSS size (px, %) [default 300px]
- */
- limitWidth?: SizeType;
- /**
- * Limit the height of the input in its expanded state with a valid CSS size (px, %) [default 200px]
- */
- limitHeight?: SizeType;
- /**
- * Render in empty state
- */
- empty?: boolean;
- /**
- * Content to display when in the empty state
- */
- emptySlot?: string | React.ReactNode;
- /**
- * Content to display when in the loading state
- */
- loadingSlot?: string | React.ReactNode;
- /**
- * Use a custom icon instead of a chevron
- */
- customIcon?: IconKey;
-}
-
-type SizeType = boolean | string;
-
-type ItemTypeBase = { description?: string } | string | number | boolean;
-
-// Redeclare forwardRef for use with generic prop types.
-declare module "react" {
- function forwardRef(
- render: (props: P, ref: React.Ref) => React.ReactElement | null
- ): (props: P & React.RefAttributes) => React.ReactElement | null;
-}
-
-const SelectInnerView = (
- props: SelectProps,
- ref: React.Ref
-) => {
- return (
-
-
-
-
- );
-};
-
-// export const SelectView = React.forwardRef(SelectInnerView);
-
-/**
- * @deprecated use {@link SelectView} instead
- */
-export const Select = React.forwardRef(SelectInnerView);
diff --git a/packages/visual-dev/src/components/Select/Select2.stories.tsx b/packages/visual-dev/src/components/Select/Select2.stories.tsx
deleted file mode 100644
index 3cf40aecb4..0000000000
--- a/packages/visual-dev/src/components/Select/Select2.stories.tsx
+++ /dev/null
@@ -1,272 +0,0 @@
-import React from "react";
-import styled from "styled-components";
-import { SelectView } from "./Select2";
-import { useSelectDemo } from "./useSelectDemo";
-import { useSelect } from "downshift";
-
-export default {
- title: "Components / Select v2",
- component: SelectView,
-};
-
-const items = ["Salt Spring", "Gabriola", "Mayne", "Pender"];
-const TitleP = styled.p`
- margin: 0;
- color: var(--sq-text);
- font-weight: var(--sq-font-weight-regular);
- font-size: var(--sq-font-size-regular);
-`;
-const DescriptionP = styled(TitleP)`
- color: var(--sq-text-subdued);
- font-size: var(--sq-font-size-small);
-`;
-const StoryContainerDiv = styled.div`
- resize: both;
- height: 400px;
- overflow: auto;
- margin: 100px;
-`;
-export const Basic = () => {
- const props = useSelectDemo({ items });
- return (
-
-
-
-
-
-
- );
-};
-
-export const Disabled = () => {
- const props = useSelectDemo({ items });
- const disabledProps = { ...props, disabled: true };
- return (
-
-
-
-
-
-
- );
-};
-
-export const Placeholder = () => {
- const props = useSelectDemo({
- items,
- });
- return (
-
-
-
-
-
-
- );
-};
-
-export const WithItemToString = () => {
- interface Islands {
- text: string;
- description: string;
- }
- const items: Array = [
- { text: "Salt Spring", description: "The big one" },
- { text: "Gabriola", description: "Way up north" },
- { text: "Mayne", description: "With a y" },
- { text: "Pender", description: "There's actually two" },
- ];
- const itemToString = (item: Islands | null) => {
- return item ? item.text : "";
- };
- const props = useSelectDemo({ items, itemToString });
- return (
-
-
-
-
- {items.map((item: any, index: number) => (
- (
-
- {item.text}
- {item.description}
-
- ),
- }}
- />
- ))}
-
-
-
- );
-};
-
-export const FullWidth = () => {
- const props = useSelectDemo({
- items,
- });
- return (
-
-
-
-
-
-
- );
-};
-
-export const CustomCSS = () => {
- const props = useSelectDemo({
- items,
- });
- return (
-
-
-
-
-
-
- );
-};
-
-export const Frame = () => {
- const items = ["Salt Spring", "Gabriola", "Mayne", "Pender"];
- const items2 = ["Orca", "San Juan"];
- const props = {
- ...useSelectDemo({ items: [...items, ...items2] }),
- limitWidth: false,
- };
- return (
-
-
-
-
- Gulf Islands
- {items.map((item, index) => (
-
- ))}
- San Juan Islands
- {items2.map((item, index) => {
- const global_index = items.length + index;
- return (
-
- );
- })}
-
-
-
- );
-};
-
-export const FrameWithItemsDisabled = () => {
- const items = ["Salt Spring", "Gabriola", "Mayne", "Pender"];
- const items2 = ["Orca", "San Juan"];
- const functional = useSelect({ items: [...items, ...items2] });
- const props = { limitWidth: false, items, functional, limitHeight: true };
- return (
-
-
-
-
- Gulf Islands
- {items.map((item, index) => {
- const disabled = index === 2 ? true : false;
- return (
-
- );
- })}
- San Juan Islands
- {items2.map((item, index) => {
- const global_index = items.length + index;
- return (
-
- );
- })}
-
-
-
- );
-};
-
-export const FrameCustomCSS = () => {
- const items = ["Salt Spring", "Gabriola", "Mayne", "Pender"];
- const items2 = ["Orca", "San Juan"];
- const props = useSelectDemo({ items: [...items, ...items2] });
- return (
-
-
-
-
- Gulf Islands
- {items.map((item, index) => (
-
- ))}
- San Juan Islands
- {items2.map((item, index) => {
- const global_index = items.length + index;
- return (
-
- );
- })}
-
-
-
- );
-};
diff --git a/packages/visual-dev/src/components/Select/Select2.tsx b/packages/visual-dev/src/components/Select/Select2.tsx
deleted file mode 100644
index 2f5ef58d8d..0000000000
--- a/packages/visual-dev/src/components/Select/Select2.tsx
+++ /dev/null
@@ -1,730 +0,0 @@
-import styled, { CSSProp } from "styled-components";
-import * as Styles from "./Styles";
-import { UseComboboxReturnValue, UseSelectReturnValue } from "downshift";
-import { InputView } from "../Input";
-import { IconButtonView } from "../Button";
-import React from "react";
-import { IconKey, IconView } from "../Icon";
-import { DataTableView } from "../DataTable";
-
-export type ItemTypeBase = string | number | boolean | object;
-
-export type SelectHandleViewProps<
- ItemType extends ItemTypeBase
-> = HandleOptionProps & Partial>;
-
-export interface SelectContainerViewProps {
- /**
- * Limit the width of the select with a valid CSS size (px, %) [default 300px]
- */
- limitWidth?: SizeType;
- /**
- * Custom CSS for the select handle container
- */
- customContainerCSS?: CSSProp;
- /**
- * Children of the container, generally SelectHandleView and SelectListView
- */
- children: React.ReactNode;
- /**
- * Disable the select
- */
- disabled?: boolean;
-}
-export interface HandleOptionProps {
- /**
- * Downshift hook for component functionality (useSelect or useCombobox or useMultipleSelection)
- */
- functional: UseSelectReturnValue | UseComboboxReturnValue;
- /**
- * Function to transform item objects to strings for display
- */
- itemToString?: (item: ItemType | null) => string;
- /**
- * Function to transform item objects into template code for dropdown items
- */
- itemToNode?: (item: ItemType) => React.ReactNode;
- /**
- * Disable the select
- */
- disabled?: boolean;
- /**
- * Render the select with red border and background to indicate an error
- */
- errors?: any;
- /**
- * Custom CSS for the select handle
- */
- customCSS?: CSSProp;
- /**
- * Allow the select value to be cleared
- */
- clearable?: boolean;
- /**
- * Placeholder displayed in the handle before a selection is made
- */
- placeholer?: string;
- /**
- * Limit the height of the input in its expanded state with a valid CSS size (px, %) [default 200px]
- */
- limitHeight?: SizeType;
- /**
- * Limit the width of the select with a valid CSS size (px, %) [default 300px]
- */
- limitWidth?: SizeType;
- /**
- * Use a custom icon instead of a chevron
- */
- customIcon?: IconKey;
- /**
- * Slot used to pass tag content to select when using a multi select
- */
- tagsSlot?: React.ReactNode;
-}
-export interface SelectListViewProps {
- /**
- * Render the select with red border and background to indicate an error
- */
- errors?: any;
- /**
- * Limit the height of the input in its expanded state with a valid CSS size (px, %) [default 200px]
- */
- limitHeight?: SizeType;
- /**
- * Limit the width of the select with a valid CSS size (px, %) [default 300px]
- */
- limitWidth?: SizeType;
- /**
- * Render the handle in the loading state
- */
- loading?: boolean;
- /**
- * Downshift hook for component functionality (useSelect or useCombobox or useMultipleSelection)
- */
- functional: UseSelectReturnValue | UseComboboxReturnValue;
- /**
- * Function to transform item objects to strings for display
- */
- itemToString?: (item: ItemType | null) => string;
- /**
- * Function to transform item objects into template code for dropdown items
- */
- itemToNode?: (item: ItemType) => React.ReactNode;
- /**
- * Disable the select
- */
- disabled?: boolean;
- /**
- * Items to include in the select list
- */
- items: Array;
- /**
- * Render in empty state
- */
- empty?: boolean;
- /**
- * Content to display when in the empty state
- */
- emptySlot?: string | React.ReactNode;
- /**
- * Content to display when in the loading state
- */
- loadingSlot?: string | React.ReactNode;
- /**
- * Custom CSS applied to the list container
- */
- customCSS?: CSSProp;
-}
-
-export interface ListItemViewProps {
- /**
- * Index of the current list item in the full list (including subgroups)
- */
- index: number;
- /**
- * Set item to disabled
- */
- disabled?: boolean;
- /**
- * Current list item to render
- */
- item: ItemType;
- /**
- * Function to transform item objects to strings for display
- */
- itemToString?: (item: ItemType | null) => string;
- /**
- * Function to transform item objects into template code for dropdown items
- */
- itemToNode?: (item: ItemType) => React.ReactNode;
- /**
- * Downshift hook for component functionality (useSelect or useCombobox or useMultipleSelection)
- */
- functional: UseSelectReturnValue | UseComboboxReturnValue;
- /**
- * Custom CSS applied to the item's container
- */
- customCSS?: CSSProp;
-}
-
-export type SelectFrameViewProps = Omit<
- SelectListViewProps,
- "itemToNode" | "itemToString"
-> & { children: React.ReactNode | React.ReactNode[] };
-
-type SizeType = boolean | string;
-
-const ItemContainerList = styled.ul<{
- errors: any;
- limitWidth: SizeType;
- limitHeight: SizeType;
- empty: boolean;
- customCSS: CSSProp;
-}>`
- ${Styles.ItemContainer}
- ${props =>
- props.errors &&
- "border-color: var(--sq-border-critical); background-color: var(--sq-surface-critical-subdued);"}
- ${props =>
- props.limitWidth
- ? typeof props.limitWidth === "string"
- ? `max-width: ${props.limitWidth};`
- : "max-width: 300px;"
- : "max-width: 100%;"}
- ${props =>
- props.limitHeight
- ? typeof props.limitHeight === "string"
- ? `max-height: ${props.limitHeight};`
- : "max-height: 200px;"
- : "max-height: auto;"}
- ${props =>
- props.empty && "& li:hover {background: white; cursor: default;}"}
- ${props => props.customCSS}
-`;
-
-const ListItem = styled.li<{ isHighlighted?: boolean; customCSS?: CSSProp }>`
- ${Styles.Item}
- ${props =>
- props.isHighlighted ? "background-color: var(--sq-surface-hover);" : ""}
- ${props => props.customCSS}
-`;
-
-const ListItemDisabled = styled.li<{ customCSS?: CSSProp }>`
- ${Styles.ItemDisabled}
-
- ${props => props.customCSS}
-`;
-
-const ButtonContainerDiv = styled.div`
- ${Styles.ButtonContainer}
-`;
-
-const ItemDescriptionSpan = styled("span")`
- ${Styles.ItemDescription}
-`;
-
-const ContainerDiv = styled("div")<{
- customContainerCSS: CSSProp;
- limitWidth: SizeType;
-}>`
- ${Styles.Container}
- ${props =>
- props.limitWidth
- ? typeof props.limitWidth === "string"
- ? `max-width: ${props.limitWidth};`
- : "max-width: 300px;"
- : "max-width: 100%;"}
- ${props => props.customContainerCSS}
-`;
-
-const TagsSlotWrapperDiv = styled.div`
- ${Styles.TagsSlotWrapper}
-`;
-
-const SelectInputButton = styled.button<{
- disabled: boolean | undefined;
- errors: any;
- isOpen: boolean;
- customCSS: CSSProp;
-}>`
- ${Styles.SelectInputStyle}
- ${props =>
- props.disabled &&
- "background: var(--sq-surface-input-disabled); cursor: default;"}
- ${props =>
- `border-radius: ${
- props.isOpen
- ? "var(--sq-border-radius-normal) var(--sq-border-radius-normal) 0 0"
- : "var(--sq-border-radius-normal)"
- };`}
- ${props =>
- props.isOpen &&
- !props.disabled &&
- "border-color: var(--sq-focused); border-bottom: none; padding-bottom: var(--sq-spacing-xxx-small);"}
- ${props =>
- !props.isOpen &&
- !props.disabled &&
- `&:hover{
- border-color: ${
- props.errors
- ? "var(--sq-surface-critical-hovered)"
- : "var(--sq-action-secondary-border)"
- } ;
- }`}
-
- ${props =>
- !props.disabled &&
- `&:focus {
- border-color: var(--sq-focused);
- }`}
-
- ${props =>
- props.errors &&
- "border-color: var(--sq-border-critical); background: var(--sq-surface-critical-subdued);"}
-
- ${props => props.customCSS}
-`;
-
-const SelectedValueSpan = styled.span<{
- subdued: boolean;
-}>`
- ${Styles.SelectedValue}
- ${props => props.subdued && "color: var(--sq-text-subdued)"}
-`;
-
-const ButtonDiv = styled.div`
- ${Styles.ButtonDiv}
-`;
-
-const EmptyContainerDiv = styled.div`
- ${Styles.EmptyContainerDiv}
-`;
-
-const LabelSpan = styled.span`
- ${Styles.LabelSpan}
-`;
-
-const InputWrapperDiv = styled.div`
- ${Styles.InputWrapperDiv}
-`;
-
-const ComboboxContainerDiv = styled.div<{
- isOpen: boolean;
- errors: boolean;
- disabled: boolean;
-}>`
- ${Styles.ComboboxContainerDiv}
- ${props =>
- props.isOpen
- ? "border: 1px solid var(--sq-focused); border-bottom: none; border-radius: var(--sq-border-radius-normal) var(--sq-border-radius-normal) 0 0; padding-bottom: var(--sq-spacing-xxx-small)"
- : ""};
- ${props =>
- props.errors
- ? "border-color: var(--sq-border-critical); background-color: var(--sq-surface-critical-subdued);"
- : ""}
- ${props =>
- props.disabled ? "background: var(--sq-surface-input-disabled);" : ""}
-`;
-
-// Redeclare forwardRef for use with generic prop types.
-declare module "react" {
- function forwardRef(
- render: (props: P, ref: React.Ref) => React.ReactElement | null
- ): (props: P & React.RefAttributes) => React.ReactElement | null;
-}
-
-const ItemView = (
- props: ListItemViewProps & Partial>
-) => {
- const {
- item,
- index,
- disabled = false,
- itemToString = itemToStringDefault,
- functional,
- customCSS = {},
- ...rest
- } = props;
-
- const itemAsString = itemToString(item);
-
- const itemToNode = props.itemToNode
- ? props.itemToNode(item)
- : itemToNodeDefault(item, itemAsString);
-
- if (disabled) {
- return (
- //@ts-ignore
-
- {itemToNode}
-
- );
- }
-
- return (
-
- {itemToNode}
-
- );
-};
-
-const SelectContainerView = (props: SelectContainerViewProps) => {
- const { limitWidth = true, customContainerCSS = ``, children } = props;
-
- return (
-
- {children}
-
- );
-};
-
-const StyledIconButtonView = styled(IconButtonView)`
- &:hover {
- background: transparent;
- }
-`;
-
-const SelectHandleInnerView = (
- props: SelectHandleViewProps,
- ref: React.Ref
-) => {
- const {
- customCSS = ``,
- disabled = false,
- errors = false,
- clearable = false,
- placeholder = "",
- limitWidth = true,
- limitHeight = false,
- customIcon,
- functional,
- tagsSlot,
- itemToString = itemToStringDefault,
- ...rest
- } = props;
-
- const showClear = clearable ? "inline-flex" : "none";
-
- function isCombobox(
- hook: UseSelectReturnValue | UseComboboxReturnValue
- ): hook is UseComboboxReturnValue {
- return (
- (hook as UseComboboxReturnValue).getComboboxProps !== undefined
- );
- }
-
- const isOpen = disabled ? false : functional.isOpen;
-
- return !isCombobox(functional) ? (
-
- {tagsSlot && {tagsSlot} }
-
- {functional.selectedItem
- ? itemToString(functional.selectedItem)
- : placeholder}
-
-
- ) => {
- e.stopPropagation();
- functional.selectItem((null as unknown) as ItemType);
- }}
- />
- {customIcon ? (
-
- ) : (
-
- )}
-
-
- ) : (
-
- {tagsSlot && (
-
- {tagsSlot}
-
- )}
-
- functional.openMenu()}
- />
-
-
- ) => {
- e.stopPropagation();
- functional.selectItem((null as unknown) as ItemType);
- }}
- />
- {customIcon ? (
-
- ) : (
-
- )}
-
-
- );
-};
-
-interface itemsToNodeProps {
- items: Array;
- functional: UseSelectReturnValue | UseComboboxReturnValue;
- itemToString?: (item: ItemType | null) => string;
- itemToNode?: (item: ItemType) => React.ReactNode;
-}
-
-const itemsToNode = (
- props: itemsToNodeProps
-): React.ReactNode | React.ReactNode[] => {
- const { items, functional, itemToString, itemToNode } = props;
- return items.map((item, index) => (
-
- {...{
- functional,
- index,
- item,
- itemToNode,
- itemToString
- }}
- />
- ));
-};
-
-const SelectInnerFrameView = (
- props: SelectFrameViewProps,
- ref: React.Ref
-) => {
- const {
- errors = false,
- limitWidth = true,
- limitHeight = false,
- disabled = false,
- loading = false,
- functional,
- items,
- children,
- loadingSlot = (
- <>
-
-
-
-
-
-
-
-
-
- >
- ),
- empty = !items.length,
- emptySlot = (
-
- No results found
-
- ),
- customCSS = {}
- } = props;
-
- const isOpen = !disabled && functional.isOpen;
-
- return (
-
- {/* Place the conditional render inside getMenuProps call to avoid downshift errors */}
- {isOpen ? (
- loading ? (
- loadingSlot
- ) : empty ? (
- {emptySlot}
- ) : (
- children
- )
- ) : (
- <>>
- )}
-
- );
-};
-
-function itemToStringDefault(item: ItemType | null): string {
- return `${item}`;
-}
-
-type ItemWithDescription = ItemType & { description: string };
-
-function hasDescription(
- item: ItemType
-): item is ItemWithDescription {
- return (
- typeof item === "object" &&
- (item as ItemWithDescription).hasOwnProperty("description")
- );
-}
-
-function itemToNodeDefault(
- item: ItemType,
- itemAsString: string
-): React.ReactNode {
- if (item === null || item === undefined) {
- return <>>;
- }
- const description =
- item && hasDescription(item) && item.description;
-
- return (
- <>
- {itemAsString}
- {description && (
- <>
-
- {description}
- >
- )}
- >
- );
-}
-
-const SelectInnerListView = (
- props: SelectListViewProps,
- ref: React.Ref
-) => {
- const { itemToString, itemToNode, ...rest } = props;
- return (
-
- {itemsToNode({
- items: props.items,
- functional: props.functional,
- itemToString,
- itemToNode
- })}
-
- );
-};
-
-export const SelectView = {
- HandleView: React.forwardRef(SelectHandleInnerView),
- ListView: React.forwardRef(SelectInnerListView),
- FrameView: React.forwardRef(SelectInnerFrameView),
- ContainerView: SelectContainerView,
- ItemView: ItemView,
- ItemToNode: itemToNodeDefault,
- ItemToString: itemToStringDefault
-};
diff --git a/packages/visual-dev/src/components/Select/Styles.ts b/packages/visual-dev/src/components/Select/Styles.ts
deleted file mode 100644
index 6c62290279..0000000000
--- a/packages/visual-dev/src/components/Select/Styles.ts
+++ /dev/null
@@ -1,165 +0,0 @@
-import { css } from "styled-components";
-
-export const Item = css`
- padding: var(--sq-spacing-x-small);
- cursor: pointer;
- color: var(--sq-text);
- font-family: var(--sq-font-family-sans);
- font-size: var(--sq-font-size-regular);
- font-weight: var(--sq-font-weight-regular);
- line-height: var(--sq-line-height-regular);
- border-radius: inherit;
- &:hover {
- background: var(--sq-surface-hover);
- }
-`;
-
-export const ItemDisabled = css`
- ${Item}
- cursor: default;
- background: var(--sq-surface-subdued);
- color: var(--sq-placeholder-text-on-secondary);
-
- &:hover {
- background: var(--sq-surface-subdued);
- }
-`;
-
-export const ItemContainer = css`
- position: absolute;
- z-index: 9;
- box-sizing: border-box;
- list-style-type: none;
- width: 100%;
- padding: 0;
- margin: 0;
- background: var(--sq-surface);
- border: 1px solid var(--sq-focused);
- border-radius: 0 0 var(--sq-border-radius-normal)
- var(--sq-border-radius-normal);
- border-top: none;
- outline: none;
- overflow-y: auto;
-
- &:empty {
- border: none;
- }
-`;
-
-export const ButtonContainer = css`
- position: absolute;
- display: flex;
- align-items: center;
- text-indent: 0px;
- padding-right: var(--sq-spacing-small);
- right: 0px;
- top: 5px;
- & > :not(:last-child) {
- margin-right: var(--sq-spacing-x-small);
- }
-`;
-
-export const ItemDescription = css`
- color: var(--sq-text-subdued);
- font-size: var(--sq-font-size-small);
- line-height: var(--sq-line-height-regular);
-`;
-
-export const Container = css`
- display: inline-block;
- width: 100%;
- position: relative;
-`;
-
-export const SelectInputStyle = css`
- cursor: pointer;
- display: flex;
- justify-content: space-between;
- align-items: center;
- width: 100%;
- min-height: 36px;
- max-height: 100%;
- box-sizing: border-box;
- text-indent: 6px;
- color: var(--sq-text);
- background: var(--sq-surface);
- font-family: var(--sq-font-family-sans);
- font-size: var(--sq-font-size-regular);
- font-weight: var(--sq-font-weight-regular);
- line-height: var(--sq-line-height-regular);
- border: 1px solid var(--sq-border);
- // border-radius: var(--sq-border-radius-normal);
- padding: 1px var(--sq-spacing-x-small);
-
- &:focus {
- border-color: var(--sq-focused);
- }
-`;
-
-export const SelectedValue = css`
- padding-top: var(--sq-spacing-xxx-small);
- margin: 4px 0 auto;
- text-indent: 0px;
- text-overflow: ellipsis;
- overflow: hidden;
- white-space: nowrap;
-`;
-
-export const ButtonDiv = css`
- display: flex;
- align-items: center;
- text-indent: 0px;
- padding: 2px 4px 0px;
-
- & svg {
- &:hover {
- cursor: pointer;
- }
- }
-
- & > :not(:last-child) {
- margin-right: var(--sq-spacing-xx-small);
- }
-`;
-
-export const TagsSlotWrapper = css`
- display: flex;
- align-items: center;
- justify-content: flex-start;
- flex-wrap: wrap;
- width: auto;
- gap: var(--sq-spacing-xx-small);
- max-width: 100%;
-`;
-
-export const EmptyContainerDiv = css`
- width: 100%;
- display: flex;
- align-items: center;
- justify-content: center;
- gap: var(--sq-spacing-xx-small);
- flex-direction: column;
- min-height: 50px;
-`;
-
-export const LabelSpan = css`
- font-weight: var(--sq-font-weight-bold);
- font-size: var(--sq-font-size-regular);
- line-height: var(--sq-line-height-regular);
- text-align: center;
-`;
-
-export const ComboboxContainerDiv = css`
- display: flex;
- border: 1px solid var(--sq-border);
- border-radius: var(--sq-border-radius-normal);
- flex-wrap: wrap;
- &:focus {
- outline: none;
- border-color: var(--sq-focused);
- }
-`;
-
-export const InputWrapperDiv = css`
- flex-grow: 1;
-`;
diff --git a/packages/visual-dev/src/components/Select/groupedDataShape.ts b/packages/visual-dev/src/components/Select/groupedDataShape.ts
deleted file mode 100644
index e587c78e4b..0000000000
--- a/packages/visual-dev/src/components/Select/groupedDataShape.ts
+++ /dev/null
@@ -1,14 +0,0 @@
-const groupedItems = [{
- group: "Test title",
- items:[
- {...item1Object}
- {...item2Object}
- {...item3Object}
- ]
-}]
-
-items:[
- {...item1Object}
- {...item2Object}
- {...item3Object}
-]
diff --git a/packages/visual-dev/src/components/Select/index.ts b/packages/visual-dev/src/components/Select/index.ts
deleted file mode 100644
index a3c84d8b5e..0000000000
--- a/packages/visual-dev/src/components/Select/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./Select";
-export * from "./Select2";
diff --git a/packages/visual-dev/src/components/Select/rjsf-Select.tsx b/packages/visual-dev/src/components/Select/rjsf-Select.tsx
deleted file mode 100644
index d550978c08..0000000000
--- a/packages/visual-dev/src/components/Select/rjsf-Select.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import { WidgetProps } from "@rjsf/core";
-import React from "react";
-import { Select } from "./Select";
-import { useRJSFSelect } from "./useRJSFSelect";
-
-export function RJSFSelect(props: WidgetProps) {
- const hook = useRJSFSelect(props);
- if (hook === null) {
- return <>>;
- }
- const viewProps = { ...props.options, ...hook };
- return ;
-}
diff --git a/packages/visual-dev/src/components/Select/useComboboxDemo.ts b/packages/visual-dev/src/components/Select/useComboboxDemo.ts
deleted file mode 100644
index fca59a3959..0000000000
--- a/packages/visual-dev/src/components/Select/useComboboxDemo.ts
+++ /dev/null
@@ -1,29 +0,0 @@
-import { useCombobox } from "downshift";
-import { useState } from "react";
-import { SelectView } from "./Select2";
-type useDemoComboboxProps = {
- items: any;
- itemToString?: (item: any) => string;
-};
-
-export const useComboboxDemo = ({
- items,
- itemToString = SelectView.ItemToString,
-}: useDemoComboboxProps) => {
- const [inputItems, setInputItems] = useState(items);
- const functional = useCombobox({
- items: inputItems,
- onInputValueChange: ({ inputValue = "" }) => {
- setInputItems(() =>
- items.filter((item: any) => {
- return itemToString(item)
- .toLowerCase()
- .startsWith(inputValue?.toLowerCase());
- })
- );
- },
- itemToString,
- });
-
- return { items: inputItems, functional, itemToString };
-};
diff --git a/packages/visual-dev/src/components/Select/useMultiSelectDemo.tsx b/packages/visual-dev/src/components/Select/useMultiSelectDemo.tsx
deleted file mode 100644
index 2226ec1c40..0000000000
--- a/packages/visual-dev/src/components/Select/useMultiSelectDemo.tsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import { useMultipleSelection, useSelect, useCombobox } from "downshift";
-import React, { useMemo, useState } from "react";
-import { TagView } from "../Tag";
-
-type useMultiSelectDemoProps = {
- selectItems: any;
- onChange?: (value: any) => void;
- itemMap?: { [key: string]: string };
- emptySlot?: React.ReactNode;
- itemToString?: (item: any | null) => string;
- itemToNode?: (item: any) => React.ReactNode;
- useCombobox?: boolean;
-};
-
-export const useMultiSelectDemo = ({
- selectItems,
- ...props
-}: useMultiSelectDemoProps) => {
- const [filter, setFilter] = useState("");
-
- function getSelectItemsFilter(selectedItems: string[]) {
- return function selectItemsFilter(book: string) {
- return selectedItems.indexOf(book) < 0;
- };
- }
-
- const defaultItemToString = (item: any) => {
- return props?.itemMap?.[item] ?? item;
- };
-
- const itemToString = props.itemToString || defaultItemToString;
-
- const {
- getSelectedItemProps,
- getDropdownProps,
- addSelectedItem,
- removeSelectedItem,
- selectedItems,
- } = useMultipleSelection({
- initialSelectedItems: [selectItems[0], selectItems[1]],
- });
-
- const filteredItems = props.useCombobox
- ? useMemo(
- () =>
- selectItems?.filter((item: any) => {
- const isSelected = selectedItems.includes(item);
-
- const isQueried =
- props.itemMap?.[item]
- ?.toLowerCase()
- ?.includes(filter?.toLowerCase()) ||
- item.toLowerCase().includes(filter.toLowerCase());
-
- return !isSelected && isQueried;
- }),
- [filter, selectedItems, selectItems]
- )
- : selectItems;
-
- const items = selectItems.filter(getSelectItemsFilter(selectedItems));
-
- let functional;
-
- if (props.useCombobox) {
- functional = useCombobox({
- itemToString,
- selectedItem: null,
- items: filteredItems,
- inputValue: filter,
- onInputValueChange: ({ inputValue }) => {
- setFilter(inputValue || "");
- },
- defaultHighlightedIndex: 0, // after selection, highlight the first item.
- //@ts-ignore
- stateReducer: (state, actionAndChanges) => {
- const { changes, type } = actionAndChanges;
- switch (type) {
- case useCombobox.stateChangeTypes.InputKeyDownEnter:
- case useCombobox.stateChangeTypes.ItemClick:
- return {
- ...changes,
- isOpen: true, // keep the menu open after selection.
- };
- }
- return changes;
- },
- onStateChange: ({ type, selectedItem }) => {
- switch (type) {
- case useCombobox.stateChangeTypes.InputKeyDownEnter:
- case useCombobox.stateChangeTypes.ItemClick:
- if (selectedItem) {
- addSelectedItem(selectedItem);
- setFilter("");
- }
- break;
- default:
- break;
- }
- },
- });
- } else {
- functional = useSelect({
- selectedItem: null,
- defaultHighlightedIndex: 0, // after selection, highlight the first item.
- items,
- stateReducer: (_, actionAndChanges) => {
- const { changes, type } = actionAndChanges;
- switch (type) {
- case useSelect.stateChangeTypes.MenuKeyDownEnter:
- case useSelect.stateChangeTypes.MenuKeyDownSpaceButton:
- case useSelect.stateChangeTypes.ItemClick:
- return {
- ...changes,
- isOpen: true, // keep the menu open after selection.
- };
- }
- return changes;
- },
- onStateChange: ({ type, selectedItem }) => {
- switch (type) {
- case useSelect.stateChangeTypes.MenuKeyDownEnter:
- case useSelect.stateChangeTypes.MenuKeyDownSpaceButton:
- case useSelect.stateChangeTypes.ItemClick:
- if (selectedItem) {
- addSelectedItem(selectedItem);
- }
- break;
- default:
- break;
- }
- },
- });
- }
-
- const tagsSlot = (
- <>
- {selectedItems.map(function renderSelectedItem(
- selectedItemForRender,
- index
- ) {
- return (
- {
- e.stopPropagation();
- removeSelectedItem(selectedItemForRender);
- }}
- >
- {selectedItemForRender}
-
- );
- })}
- >
- );
-
- return {
- getSelectedItemProps,
- getDropdownProps,
- addSelectedItem,
- removeSelectedItem,
- functional,
- items: props.useCombobox ? filteredItems : items,
- tagsSlot,
- empty: !items.length,
- };
-};
diff --git a/packages/visual-dev/src/components/Select/useRJSFSelect.tsx b/packages/visual-dev/src/components/Select/useRJSFSelect.tsx
deleted file mode 100644
index f032d1be74..0000000000
--- a/packages/visual-dev/src/components/Select/useRJSFSelect.tsx
+++ /dev/null
@@ -1,29 +0,0 @@
-import { WidgetProps } from "@rjsf/core";
-import { useSelect } from "downshift";
-import { OptionProps } from ".";
-import { isEnumArray } from "../RadioCard";
-
-export function useRJSFSelect(props: WidgetProps): OptionProps | null {
- const items = props?.options?.enumOptions;
- const disabled = props?.options?.enumDisabled ? true : false;
- if (!isEnumArray(items)) {
- return null;
- }
- const selectedItem = items.find((item) => item.value === props.value) || null;
- const itemToString = (item: any | null) => (item?.label ? item.label : "");
- const onSelectedItemChange = ({ selectedItem }: { selectedItem?: any }) => {
- props.onChange(selectedItem?.value || "");
- };
- const functional = useSelect({
- items,
- itemToString,
- selectedItem,
- onSelectedItemChange,
- });
- return {
- disabled,
- items,
- functional,
- itemToString,
- };
-}
diff --git a/packages/visual-dev/src/components/Select/useSelectDemo.ts b/packages/visual-dev/src/components/Select/useSelectDemo.ts
deleted file mode 100644
index 2ead6ed021..0000000000
--- a/packages/visual-dev/src/components/Select/useSelectDemo.ts
+++ /dev/null
@@ -1,17 +0,0 @@
-import { useSelect } from "downshift";
-import { SelectView } from "./Select2";
-
-type useDemoSelectProps = {
- items: any;
- hasDescription?: boolean;
- itemToString?: (item: any) => string;
-};
-
-export const useSelectDemo = ({
- items,
- itemToString = SelectView.ItemToString,
-}: useDemoSelectProps) => {
- const functional = useSelect({ items, itemToString });
-
- return { items, functional, itemToString };
-};
diff --git a/packages/visual-dev/src/components/Slider/Slider.stories.tsx b/packages/visual-dev/src/components/Slider/Slider.stories.tsx
deleted file mode 100644
index 1d69c19c1a..0000000000
--- a/packages/visual-dev/src/components/Slider/Slider.stories.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from "react";
-import { SliderView } from "./Slider";
-
-export default {
- title: "Components / Slider",
- component: SliderView,
-};
-
-export const InputSlider = () => ;
diff --git a/packages/visual-dev/src/components/Slider/Slider.tsx b/packages/visual-dev/src/components/Slider/Slider.tsx
deleted file mode 100644
index 0f52807819..0000000000
--- a/packages/visual-dev/src/components/Slider/Slider.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import * as React from "react";
-import styled, { CSSProp } from "styled-components";
-import * as Styles from "./Styles";
-
-type SliderProps = OptionProps & Partial>;
-
-type SliderWidthType = boolean | string;
-
-export interface OptionProps {
- /**
- * Value of the slider
- */
- value?: number;
- /**
- * Callback triggered when the slider changes
- */
- onChange?: any;
- /**
- * Disable the slider
- */
- disabled?: boolean;
- /**
- * Button to display inside the slider field
- */
- buttons?: React.ReactElement;
- /**
- * Custon CSS applied to slider
- */
- customCSS?: CSSProp;
- /**
- * Limit the slider width using a valid CSS size value (e.g. px, %) [default 300px]
- */
- limitWidth?: SliderWidthType;
-}
-const StyledSlider = styled.input<{
- customCSS?: CSSProp;
-}>`
- ${Styles.SliderStyle}
- ${(props) => props.customCSS}
-`;
-
-export const SliderView = React.forwardRef<
- React.ElementRef<"input">,
- SliderProps
->((props, forwardedRef) => {
- const {
- customCSS = {},
- limitWidth = false,
- required = false,
- ...rest
- } = props;
- return (
-
- );
-});
diff --git a/packages/visual-dev/src/components/Slider/Styles.ts b/packages/visual-dev/src/components/Slider/Styles.ts
deleted file mode 100644
index 292fbd569d..0000000000
--- a/packages/visual-dev/src/components/Slider/Styles.ts
+++ /dev/null
@@ -1,82 +0,0 @@
-import { css } from "styled-components";
-
-export const SliderStyle = css`
- &[type="range"] {
- -webkit-appearance: none;
- background: transparent;
- width: 100%;
- border-color: transparent;
- border-width: 6px 0;
- height: 4px;
- color: transparent;
- }
- &[type="range"]::-webkit-slider-runnable-track {
- height: 10px;
- -webkit-appearance: none;
- margin-top: -1px;
- }
- &[type="range"]::-webkit-slider-thumb {
- -webkit-appearance: none;
- }
- &[type="range"]:focus {
- outline: none;
- }
-
- &[type="range"]::-ms-track {
- width: 100%;
- cursor: pointer;
- background: transparent;
- border-color: transparent;
- color: transparent;
- }
-
- &[type="range"]::-webkit-slider-thumb {
- -webkit-appearance: none;
- height: 16px;
- width: 16px;
- border-radius: 50%;
- background: var(--sq-text);
- cursor: pointer;
- margin-top: -5px;
- }
- &[type="range"]::-moz-range-thumb {
- -webkit-appearance: none;
- height: 16px;
- width: 16px;
- border-radius: 50%;
- background: var(--sq-text);
- cursor: pointer;
- margin-top: -5px;
- }
- &[type="range"]::-ms-thumb {
- -webkit-appearance: none;
- height: 16px;
- width: 16px;
- border-radius: 50%;
- background: var(--sq-text);
- cursor: pointer;
- margin-top: -5px;
- }
-
- &[type="range"]::-webkit-slider-runnable-track {
- width: 100%;
- height: 5px;
- cursor: pointer;
- background: var(--sq-border);
- border-radius: 4px;
- }
- &[type="range"]::-moz-range-track {
- width: 100%;
- height: 5px;
- cursor: pointer;
- background: var(--sq-border);
- border-radius: 4px;
- }
- &[type="range"]::-ms-track {
- width: 100%;
- height: 5px;
- cursor: pointer;
- background: var(--sq-border);
- border-radius: 4px;
- }
-`;
diff --git a/packages/visual-dev/src/components/Slider/index.ts b/packages/visual-dev/src/components/Slider/index.ts
deleted file mode 100644
index a58909197c..0000000000
--- a/packages/visual-dev/src/components/Slider/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./Slider";
diff --git a/packages/visual-dev/src/components/Switch/Styles.ts b/packages/visual-dev/src/components/Switch/Styles.ts
deleted file mode 100644
index ffc7776ef8..0000000000
--- a/packages/visual-dev/src/components/Switch/Styles.ts
+++ /dev/null
@@ -1,72 +0,0 @@
-import { css } from "styled-components";
-
-export const base = css`
- position: absolute;
- width: 40px;
- height: 20px;
- border: 2px solid var(--sq-border);
- border-radius: var(--sq-border-radius-pill);
- background: var(--sq-surface-input-disabled);
- cursor: pointer;
- transform: translateX(-100%);
- box-sizing: border-box;
- &::after {
- content: "";
- display: block;
- border-radius: 50%;
- width: 20px;
- height: 20px;
- margin: -2px;
- background: var(--sq-surface);
- border: 2px solid var(--sq-border);
- transition: 0.1s;
- box-sizing: border-box;
- }
-`;
-
-export const label = css`
- display: flex;
- align-items: center;
- font-family: var(--sq-font-family-sans);
- font-size: var(--sq-font-size-regular);
- line-height: var(--sq-line-height-regular);
- color: var(--sq-text-dark);
- user-select: none;
-`;
-
-export const success = css`
- background: var(--sq-border-success);
- transition: 0.15s ease-out;
-`;
-
-export const critical = css`
- background: var(--sq-border-critical);
- transition: 0.15s ease-out;
-`;
-
-export const off = css`
- opacity: 0;
- z-index: 1;
- border-radius: var(--sq-border-radius-pill);
- width: 40px;
- height: 20px;
- margin: 0;
-`;
-
-export const on = css`
- &::after {
- content: "";
- display: block;
- border-radius: 50%;
- width: 20px;
- height: 20px;
- margin-left: 17px;
- transition: 0.1s ease-out;
- }
-`;
-
-export const wrapper = css`
- position: relative;
- display: inline-block;
- height: 20px;
-`;
diff --git a/packages/visual-dev/src/components/Switch/Switch.stories.tsx b/packages/visual-dev/src/components/Switch/Switch.stories.tsx
deleted file mode 100644
index c707e08c38..0000000000
--- a/packages/visual-dev/src/components/Switch/Switch.stories.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import React, { useState } from "react";
-import { SwitchView } from ".";
-
-export default {
- title: "Components / Switch",
- component: SwitchView,
-};
-
-export const Functional = () => {
- const [enabled, setEnable] = useState(false);
- return (
- setEnable(!enabled)}
- />
- );
-};
-
-export const SuccessOff = () => ;
-export const SuccessOn = () => ;
-export const CriticalOff = () => (
-
-);
-export const CriticalOn = () => ;
-export const CustomCSS = () => (
-
-);
diff --git a/packages/visual-dev/src/components/Switch/Switch.tsx b/packages/visual-dev/src/components/Switch/Switch.tsx
deleted file mode 100644
index 06f08b6711..0000000000
--- a/packages/visual-dev/src/components/Switch/Switch.tsx
+++ /dev/null
@@ -1,95 +0,0 @@
-import * as React from "react";
-import styled, { CSSProp } from "styled-components";
-import root from "react-shadow/styled-components";
-import * as Styles from "./Styles";
-
-type SwitchProps = Partial<
- Omit, "value" | "css" | "label">
-> &
- OptionProps &
- StyleProps;
-
-export interface OptionProps {
- /**
- * Callback triggered on switch state change
- */
- onChange?: any;
- /**
- * Current form value of the switch
- */
- value?: boolean;
- /**
- * Indicte a positive action (success) or negative action (critical)
- */
- color?: "success" | "critical";
- /**
- * Switch element id
- */
- id?: string;
-}
-
-export interface StyleProps {
- /**
- * CSS applied to switch
- */
- customCSS?: CSSProp;
-}
-
-const SwitchContainerDiv = styled.div>`
- ${Styles.wrapper}
- ${(props) => props.customCSS}
-`;
-
-const SwitchButtonLabel = styled.label`
- ${Styles.base}
-`;
-
-const SwitchBackgroundInput = styled.input>`
- ${Styles.off}
- &:checked + ${SwitchButtonLabel} {
- ${(props) =>
- props.color === "critical" ? Styles.critical : Styles.success}
- ${Styles.on}
- }
-`;
-
-const ShadowDom = styled(root.div)`
- display: contents;
-`;
-
-export const SwitchView = React.forwardRef<
- React.ElementRef<"input">,
- SwitchProps
->((props, forwardedRef) => {
- const {
- id,
- color = "success",
- value,
- checked,
- customCSS = {},
- onChange,
- ...rest
- } = props;
-
- return (
-
-
-
-
-
-
- );
-});
-
-/**
- * @deprecated use {@link SwitchView} instead
- */
-export const Switch = SwitchView;
diff --git a/packages/visual-dev/src/components/Switch/index.ts b/packages/visual-dev/src/components/Switch/index.ts
deleted file mode 100644
index d1f1080ece..0000000000
--- a/packages/visual-dev/src/components/Switch/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./Switch";
-export * from "./rjsf-Switch";
diff --git a/packages/visual-dev/src/components/Switch/rjsf-Switch.tsx b/packages/visual-dev/src/components/Switch/rjsf-Switch.tsx
deleted file mode 100644
index 19af1987d7..0000000000
--- a/packages/visual-dev/src/components/Switch/rjsf-Switch.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { WidgetProps } from "@rjsf/core";
-import React from "react";
-import { SwitchView } from "./Switch";
-
-export function RJSFSwitch(props: WidgetProps) {
- const options = props.options;
- return (
- props.onChange(e.target.checked)}
- />
- );
-}
diff --git a/packages/visual-dev/src/components/TabGroup/Styles.ts b/packages/visual-dev/src/components/TabGroup/Styles.ts
deleted file mode 100644
index 4f19966489..0000000000
--- a/packages/visual-dev/src/components/TabGroup/Styles.ts
+++ /dev/null
@@ -1,39 +0,0 @@
-import { css } from "styled-components";
-
-export const tabgroup = css`
- display: flex;
-`;
-
-export const tab = css`
- font: 700 18px Helvetica;
- font-weight: normal;
- padding: 15px 15px;
- margin: 4px 18px;
- cursor: pointer;
- border-bottom: 2px solid transparent;
- &:hover {
- color: inherit;
- }
-`;
-export const selected = css`
- color: inherit;
- border-color: inherit;
-`;
-export const primary_bg = css`
- background: var(--sq-nav-surface-primary);
-`;
-export const secondary_bg = css`
- background: var(--sq-nav-surface-secondary);
-`;
-export const primary_text = css`
- color: var(--sq-nav-text-on-primary);
-`;
-export const secondary_text = css`
- color: var(--sq-nav-text-on-secondary);
-`;
-export const primary_grey = css`
- color: var(--sq-nav-text-on-primary-subdued);
-`;
-export const secondary_grey = css`
- color: var(--sq-nav-text-on-secondary-subdued);
-`;
diff --git a/packages/visual-dev/src/components/TabGroup/TabGroup.stories.tsx b/packages/visual-dev/src/components/TabGroup/TabGroup.stories.tsx
deleted file mode 100644
index cfaa48757a..0000000000
--- a/packages/visual-dev/src/components/TabGroup/TabGroup.stories.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import React, { useState } from "react";
-import { Tab, TabGroup } from ".";
-
-export default {
- title: "Components / Tab",
- component: TabGroup,
-};
-
-export const Functional = () => {
- const [count, setCount] = useState(0);
-
- let states = [false, false, false];
-
- states[count] = true;
-
- return (
-
- setCount(0)}>
- Tab 1
-
- setCount(1)}>
- Tab 2
-
- setCount(2)}>
- Tab 3
-
-
- );
-};
-export const Primary = () => {
- return (
-
- Selected
- Unselected
- Unselected
-
- );
-};
-
-export const Secondary = () => {
- return (
-
-
- Selected
-
- Unselected
- Unselected
-
- );
-};
diff --git a/packages/visual-dev/src/components/TabGroup/TabGroup.tsx b/packages/visual-dev/src/components/TabGroup/TabGroup.tsx
deleted file mode 100644
index c5d6125695..0000000000
--- a/packages/visual-dev/src/components/TabGroup/TabGroup.tsx
+++ /dev/null
@@ -1,87 +0,0 @@
-import * as React from "react";
-import styled, { CSSProp } from "styled-components";
-import * as Styles from "./Styles";
-
-type TabGroupProps = OptionProps &
- StyleProps &
- Partial>;
-
-export interface OptionProps {
- /**
- * Tab group content, typically a number of Tab components
- */
- children?: React.ReactNode;
- /**
- * True if the given tab is selected
- */
- selected?: boolean;
-}
-
-export interface StyleProps {
- /**
- * Tab color scheme, primary or secondary
- */
- color?: "primary" | "secondary";
- /**
- * Custom CSS applied to the tab container
- */
- customCSS?: CSSProp;
-}
-
-const TabGroupStyle = styled("div")>`
- ${Styles.tabgroup}
- ${(props) => Styles[(props.color + "_bg") as keyof typeof Styles]};
- ${(props) => Styles[(props.color + "_text") as keyof typeof Styles]};
- ${(props) => props.customCSS}
-`;
-
-const TabStyle = styled("div")>`
- ${Styles.tab}
- ${(props) => Styles[(props.color + "_grey") as keyof typeof Styles]};
- ${(props) => props.selected && Styles.selected}
- ${(props) => props.customCSS}
-`;
-
-export const TabGroup = React.forwardRef<
- React.ElementRef<"div">,
- TabGroupProps
->((props, forwardedRef) => {
- const { color = "primary", children, customCSS = {}, ...rest } = props;
-
- return (
-
- {children}
-
- );
-});
-
-type TabProps = OptionProps & StyleProps & Partial>;
-
-export const Tab = React.forwardRef, TabProps>(
- (props, forwardedRef) => {
- const {
- color = "primary",
- selected = false,
- children,
- customCSS = {},
- ...rest
- } = props;
-
- return (
-
- {children}
-
- );
- }
-);
diff --git a/packages/visual-dev/src/components/TabGroup/index.ts b/packages/visual-dev/src/components/TabGroup/index.ts
deleted file mode 100644
index 179d567bc6..0000000000
--- a/packages/visual-dev/src/components/TabGroup/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./TabGroup";
diff --git a/packages/visual-dev/src/components/Tabs/Styles.ts b/packages/visual-dev/src/components/Tabs/Styles.ts
deleted file mode 100644
index c31ead96e4..0000000000
--- a/packages/visual-dev/src/components/Tabs/Styles.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-import { css } from "styled-components";
-
-export const root = css`
- box-sizing: border-box;
- display: flex;
- flex-direction: row;
- justify-content: flex-start;
- align-items: center;
-
- color: var(--sq-text);
- font-family: var(--sq-font-family-sans);
- font-weight: var(--sq-font-weight-regular);
- font-size: var(--sq-font-size-regular);
- line-height: var(--sq-line-height-regular);
- border-bottom: 1px solid var(--sq-border);
- width: 100%;
-`;
-
-export const Tab = css`
- cursor: pointer;
-`;
-
-export const defaultTabStyle = css`
- border-bottom: 2px solid transparent;
-
- padding: 12px 32px;
-
- &.active {
- font-weight: bold;
- border-bottom: 2px solid #575757;
- }
-
- &.disabled {
- color: var(--sq-text-subdued);
- cursor: default;
- }
-`;
diff --git a/packages/visual-dev/src/components/Tabs/Tabs.stories.tsx b/packages/visual-dev/src/components/Tabs/Tabs.stories.tsx
deleted file mode 100644
index 7d8b210471..0000000000
--- a/packages/visual-dev/src/components/Tabs/Tabs.stories.tsx
+++ /dev/null
@@ -1,110 +0,0 @@
-import * as React from "react";
-import { Tabs, TabsView } from ".";
-import styled, { css } from "styled-components";
-
-export default {
- title: "Components / Tabs",
- component: TabsView,
-};
-
-// const TabStyling = css`
-// border-bottom: 1px solid transparent;
-
-// &:not(:first-child) {
-// margin-left: 16px;
-// }
-
-// &.active {
-// border-bottom: 1px solid #575757;
-// }
-// `;
-
-export const defaultTabs = () => {
- return (
- {}}>
- First
- Second
-
- );
-};
-
-export const FunctionalTabs = () => {
- const [selected, setSelected] = React.useState("first");
-
- return (
- <>
-
- First
- Second
-
- Tab selected: {selected}
- >
- );
-};
-
-export const DisabledTabs = () => {
- const [selected, setSelected] = React.useState("second");
-
- return (
- <>
-
-
- First
-
- Second
- Third
-
- Tab selected: {selected}
- >
- );
-};
-
-export const NavigationTabs = () => {
- const [selected, setSelected] = React.useState("programs");
-
- const NavTabStyling = css`
- font-size: 14px;
- color: var(--sq-nav-text-on-primary);
- padding: 4px 8px;
- border-bottom: 2px solid transparent;
- text-align: center;
-
- &:not(:first-child) {
- margin-left: 32px;
- }
-
- &.active {
- border-bottom: 2px solid white;
- }
-
- &:not(.active) {
- color: var(--sq-nav-text-on-primary-subdued);
- }
-
- &:hover {
- color: var(--sq-nav-text-on-primary);
- }
- `;
-
- const NavContainer = styled.div`
- background: var(--sq-nav-surface-primary);
- box-sizing: border-box;
- padding: 16px 24px;
- `;
-
- return (
-
-
- Programs
- Rewards
- Analytics
- Participants
- Settings
-
-
- );
-};
diff --git a/packages/visual-dev/src/components/Tabs/Tabs.tsx b/packages/visual-dev/src/components/Tabs/Tabs.tsx
deleted file mode 100644
index 7aa13ed33b..0000000000
--- a/packages/visual-dev/src/components/Tabs/Tabs.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import * as React from "react";
-import * as Styles from "./Styles";
-import styled from "styled-components";
-
-type TabsContextType = [string | undefined, undefined | Function];
-const TabsContext = React.createContext([
- undefined,
- undefined,
-]);
-
-export interface TabViewProps {
- /**
- * Unique identifier for the given tab
- */
- id: string;
- /**
- * Content displayed to represent the tab, typically a label
- */
- children: React.ReactNode;
- /**
- * Disable switching to the given tab
- */
- disabled?: boolean;
-}
-
-const TabView: React.FC = ({ id, disabled, children }) => {
- const [selected, setId] = useTabs();
-
- return (
- !disabled && setId!(id)}
- >
- {children}
-
- );
-};
-
-export interface TabsProps {
- /**
- * Currently selected tab, by tab id
- */
- selected?: string;
- /**
- * Callback triggered when the tab is clicked, passed the tab id
- */
- onTabClick: (tab: any) => void;
- /**
- * Custom styling applied to the tabs container
- */
- customTabStyle?: any;
- /**
- * Content of the Tabs container, typically a number of TabView components
- */
- children: React.ReactNode;
-}
-
-function useTabs() {
- const cxt = React.useContext(TabsContext);
- if (!cxt) throw new Error("Tab must be within Tabs component");
-
- return cxt;
-}
-
-const StyledTabsContainerDiv = styled.div<{ customStyle?: any }>`
- ${Styles.root}
- & > .tab {
- ${Styles.Tab}
- ${({ customStyle }) => (customStyle ? customStyle : Styles.defaultTabStyle)}
- }
-`;
-
-const TabsView: React.FC = ({
- selected,
- onTabClick,
- customTabStyle,
- children,
-}) => {
- return (
-
-
- {children}
-
-
- );
-};
-
-const TabsNamespace = Object.assign(TabsView, {
- TabView: TabView,
-});
-
-/**
- * @deprecated use {@link TabsView} instead
- */
-const TabsNamespaceDeprecated = Object.assign(TabsView, {
- Tab: TabView,
-});
-
-export { TabsNamespace as TabsView };
-
-/**
- * @deprecated use {@link TabsView} instead
- */
-export { TabsNamespaceDeprecated as Tabs };
diff --git a/packages/visual-dev/src/components/Tabs/index.ts b/packages/visual-dev/src/components/Tabs/index.ts
deleted file mode 100644
index 443079cdf1..0000000000
--- a/packages/visual-dev/src/components/Tabs/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Tabs'
diff --git a/packages/visual-dev/src/components/Tag/Styles.ts b/packages/visual-dev/src/components/Tag/Styles.ts
deleted file mode 100644
index b879e71e35..0000000000
--- a/packages/visual-dev/src/components/Tag/Styles.ts
+++ /dev/null
@@ -1,46 +0,0 @@
-import { css } from "styled-components";
-
-export const base = css`
- display: flex;
- flex-direction: row;
- background: var(--sq-background);
- box-sizing: border-box;
- align-items: center;
- width: max-content;
- border: 1px solid var(--sq-border);
- border-radius: 2px;
-`;
-
-export const textSegment = css`
- box-sizing: border-box;
- border-left: 1px solid var(--sq-border);
- padding: var(--sq-spacing-xx-small) var(--sq-spacing-x-small);
- font-weight: 400;
- font-size: 14px;
- font-style: normal;
- line-height: 20px;
- font-family: var(--sq-font-family-sans);
- color: var(--sq-text-dark);
-`;
-
-export const iconSegment = css`
- display: flex;
- flex-direction: row;
- justify-content: center;
- align-items: center;
- box-sizing: border-box;
- padding: 3px 7px;
- width: 28px;
- height: 26px;
- fill: var(--sq-text-subdued);
- &:hover {
- background: #f4f4f4;
- fill: var(--sq-text-dark);
- cursor: pointer;
- }
- & svg {
- &:hover {
- cursor: pointer;
- }
- }
-`;
diff --git a/packages/visual-dev/src/components/Tag/Tag.stories.tsx b/packages/visual-dev/src/components/Tag/Tag.stories.tsx
deleted file mode 100644
index 292744c851..0000000000
--- a/packages/visual-dev/src/components/Tag/Tag.stories.tsx
+++ /dev/null
@@ -1,33 +0,0 @@
-import React from "react";
-import { TagView } from ".";
-
-export default {
- title: "Components / Tag",
- component: TagView,
-};
-
-const fake = async () => {
- Promise.resolve(alert("You clicked a tag."));
-};
-
-export const shortTag = () => (
- New Segment
-);
-export const longTag = () => (
-
- A really really long tag with lots of text
-
-);
-export const customCSS = () => (
-
- A long segment
-
-);
-export const multipleLines = () => (
-
- A multi- line tag
-
-);
diff --git a/packages/visual-dev/src/components/Tag/Tag.tsx b/packages/visual-dev/src/components/Tag/Tag.tsx
deleted file mode 100644
index 7a1d28adb1..0000000000
--- a/packages/visual-dev/src/components/Tag/Tag.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import * as React from "react";
-import styled, { CSSProp } from "styled-components";
-import * as Styles from "./Styles";
-import { IconView } from "../Icon";
-
-type TagProps = OptionProps & StyleProps & Partial>;
-
-export interface OptionProps {
- /**
- * Callback triggered when the close on the tag is clicked
- */
- onClickClose?: (e?: any) => void;
- /**
- * Content displayed inside tag, generally small pieces of content like a
- */
- children: React.ReactNode;
-}
-
-export interface StyleProps {
- /**
- * Custom CSS applied to tag
- */
- customCSS?: CSSProp;
-}
-
-const TagDiv = styled.div`
- ${Styles.base}
- ${(props) => props.customCSS}
-`;
-
-const IconSegmentDiv = styled.div`
- ${Styles.iconSegment}
-`;
-
-const TextSegmentDiv = styled.div`
- ${Styles.textSegment}
-`;
-
-export const TagView = React.forwardRef, TagProps>(
- (props, forwardedRef) => {
- const { onClickClose, children, customCSS = {}, ...rest } = props;
-
- return (
-
-
- { }
-
- {children}
-
- );
- }
-);
-
-/**
- * @deprecated use {@link TagView} instead
- */
-export const Tag = TagView;
diff --git a/packages/visual-dev/src/components/Tag/index.ts b/packages/visual-dev/src/components/Tag/index.ts
deleted file mode 100644
index 0c2ebe9c6e..0000000000
--- a/packages/visual-dev/src/components/Tag/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./Tag";
diff --git a/packages/visual-dev/src/components/TagInput/Styles.ts b/packages/visual-dev/src/components/TagInput/Styles.ts
deleted file mode 100644
index 5384fecb13..0000000000
--- a/packages/visual-dev/src/components/TagInput/Styles.ts
+++ /dev/null
@@ -1,48 +0,0 @@
-import { css } from "styled-components";
-
-export const ContainerDiv = css`
- width: 100%;
- border: 1px solid var(--sq-border);
- padding: var(--sq-spacing-xx-small) var(--sq-spacing-x-small);
- display: flex;
- flex-wrap: wrap;
- gap: var(--sq-spacing-xx-small);
- border-radius: var(--sq-border-radius-normal);
-`;
-
-export const StyledInputSpan = css`
- display: inline-block;
- padding: var(--sq-spacing-xxx-small);
- border: none;
- outline-width: 0;
- font-size: 14px;
- line-height: var(--sq-line-height-regular);
- flex: 1 1 100px;
- max-width: 100%;
-`;
-
-export const TagDiv = css`
- background: var(--sq-surface-subdued);
- border-radius: var(--sq-border-radius-normal);
- border: 1px solid var(--sq-border);
- display: grid;
- grid-template-columns: auto min-content;
- grid-gap: var(--sq-spacing-xx-small);
- align-items: center;
- padding: var(--sq-spacing-xxx-small) var(--sq-spacing-x-small);
- font-size: 14px;
- line-height: var(--sq-line-height-regular);
- margin: -1px 0px;
-
- & svg {
- cursor: pointer;
- margin-top: 3px;
- }
-`;
-
-export const customButtonCSS = css`
- &:hover {
- background: none;
- color: var(--sq-text-dark);
- }
-`;
diff --git a/packages/visual-dev/src/components/TagInput/TagInput.stories.tsx b/packages/visual-dev/src/components/TagInput/TagInput.stories.tsx
deleted file mode 100644
index a26cd7a166..0000000000
--- a/packages/visual-dev/src/components/TagInput/TagInput.stories.tsx
+++ /dev/null
@@ -1,144 +0,0 @@
-import React, { useCallback, useEffect, useState, useRef } from "react";
-import { TagInputView, TagInputViewProps, TagView } from "./TagInput";
-
-export default {
- title: "Components / Tag Input",
- component: TagInputView,
-};
-
-const defaultProps: TagInputViewProps = {
- tagSlot: [
- {}} id={0}>
- test1@example.com
- ,
- {}} id={1}>
- test1@example.com
- ,
- ],
-};
-
-export const Default = () => {
- //@ts-ignore
- return ;
-};
-
-export const FullWidth = () => {
- //@ts-ignore
- return ;
-};
-
-export const CustomCSS = () => {
- return (
- //@ts-ignore
-
- );
-};
-
-function useTagInput(
- onChange: (value: string) => void,
- initialValue: string | undefined
-) {
- const [_value, setValue] = useState(initialValue?.split(",") || []);
- const ref = useRef(null);
-
- const createCodes = ["Enter", "Comma", "Space"];
- const deleteCodes = ["Backspace"];
-
- const onKeyDown = useCallback(
- (e) => {
- const code = e.code;
- if (createCodes.includes(code)) {
- e.preventDefault();
-
- if (e.target.innerText !== "") {
- setValue((prev) => {
- const next = [...prev, e.target.innerText];
- onChange(next.join(","));
- return next;
- });
-
- e.target.innerText = "";
- }
-
- return;
- }
-
- if (deleteCodes.includes(code)) {
- if (e.target.innerText.length === 0) {
- e.preventDefault();
- setValue((prev) => {
- const next = [...prev.slice(0, prev.length - 1)];
- onChange(next.join(","));
- return next;
- });
- }
- }
- },
- [setValue, onChange]
- );
- const onKeyUp = useCallback(
- (e) => {
- const code = e.code;
- if (!createCodes.includes(code) && !deleteCodes.includes(code)) {
- onChange([..._value, e.target.innerText].join(","));
- }
- },
- [onChange, _value]
- );
-
- useEffect(() => {
- if (!ref.current) return;
-
- ref.current.addEventListener("keydown", onKeyDown);
- ref.current.addEventListener("keyup", onKeyUp);
-
- // Attach listeners
- return () => {
- ref.current?.removeEventListener("keydown", onKeyDown);
- ref.current?.removeEventListener("keyup", onKeyUp);
- };
- }, [ref.current, onKeyDown, onKeyUp]);
-
- useEffect(() => {
- if (!ref.current) return;
-
- const splitVal = initialValue?.split(",") || [""];
- ref.current.innerText = splitVal[splitVal.length - 1];
- }, []);
-
- const onDeleteTag = (idx: number) => {
- setValue((prev) => {
- const next = [...prev.slice(0, idx), ...prev.slice(idx + 1, prev.length)];
-
- onChange(next.join(","));
-
- return next;
- });
- };
-
- return {
- ref,
- tagSlot: _value?.map((v, idx) => (
-
- {v}
-
- )),
- };
-}
-
-export const Functional = () => {
- return (
- console.log("test", v), undefined)}
- />
- );
-};
diff --git a/packages/visual-dev/src/components/TagInput/TagInput.tsx b/packages/visual-dev/src/components/TagInput/TagInput.tsx
deleted file mode 100644
index 022221d4ad..0000000000
--- a/packages/visual-dev/src/components/TagInput/TagInput.tsx
+++ /dev/null
@@ -1,104 +0,0 @@
-import React from "react";
-import styled, { CSSProp } from "styled-components";
-import { IconButtonView } from "../Button";
-import { InputWidthType } from "../Input";
-import * as Styles from "./Styles";
-
-export type TagInputViewProps = OptionProps &
- StyleProps &
- Partial>;
-
-export interface OptionProps {
- /**
- * Slot for tags of fully input emails
- */
- tagSlot: React.ReactNode | React.ReactNode[];
- /**
- * Limit the input width using a valid CSS size value (e.g. px, %) [default 300px]
- */
- limitWidth?: InputWidthType;
-}
-
-export interface TagViewProps {
- /**
- * The id of the tag, used to reference the tag for deletion
- */
- id: number;
- /**
- * Callback to delete a tag by id
- */
- onDelete: (id: number) => void;
- /**
- * Tag content
- */
- children: React.ReactNode | React.ReactNode[];
-}
-
-export interface StyleProps {
- /**
- * Custom CSS applied to input container
- */
- customCSS?: CSSProp;
-}
-
-const ContainerDiv = styled.div`
- ${Styles.ContainerDiv}
-
- ${(props) =>
- props.limitWidth
- ? typeof props.limitWidth === "string"
- ? `max-width: ${props.limitWidth};`
- : "max-width: 300px;"
- : "max-width: 100%;"}
-
- ${(props) => props.customCSS}
-`;
-
-const StyledInput = styled.span`
- ${Styles.StyledInputSpan}
-`;
-
-const TagDiv = styled.div`
- ${Styles.TagDiv}
-`;
-
-export const TagView = (props: TagViewProps) => {
- const { children } = props;
- return (
-
- {children}
- props.onDelete(props.id)}
- customCSS={Styles.customButtonCSS}
- />
-
- );
-};
-
-const TagInputView = React.forwardRef<
- React.ElementRef<"span">,
- TagInputViewProps
->((props, forwardedRef) => {
- const { tagSlot, limitWidth = true, customCSS = {}, ...rest } = props;
- return (
-
- {tagSlot}
-
-
- );
-});
-
-const TagInputNamespace = Object.assign(TagInputView, {
- TagView: TagView,
-});
-
-export { TagInputNamespace as TagInputView };
diff --git a/packages/visual-dev/src/components/TagInput/index.ts b/packages/visual-dev/src/components/TagInput/index.ts
deleted file mode 100644
index 545988576e..0000000000
--- a/packages/visual-dev/src/components/TagInput/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./TagInput";
diff --git a/packages/visual-dev/src/components/Text/Styles.ts b/packages/visual-dev/src/components/Text/Styles.ts
deleted file mode 100644
index 34dc847cb2..0000000000
--- a/packages/visual-dev/src/components/Text/Styles.ts
+++ /dev/null
@@ -1,26 +0,0 @@
-import { css } from "styled-components";
-
-export const base = css`
- font-weight: 400;
- line-height: 1;
- margin: 0px;
- font-family: var(--sq-font-family-sans);
-`;
-
-export const sizeVariants = {
- "1": css`
- font-size: var(--sq-font-size-header-one);
- `,
- "2": css`
- font-size: var(--sq-font-size-header-two);
- `,
- "3": css`
- font-size: var(--sq-font-size-header-three);
- `,
- "4": css`
- font-size: var(--sq-font-size-regular);
- `,
- "5": css`
- font-size: var(--sq-font-size-small);
- `,
-};
diff --git a/packages/visual-dev/src/components/Text/Text.stories.tsx b/packages/visual-dev/src/components/Text/Text.stories.tsx
deleted file mode 100644
index 451cc0b8e0..0000000000
--- a/packages/visual-dev/src/components/Text/Text.stories.tsx
+++ /dev/null
@@ -1,9 +0,0 @@
-import React from 'react';
-import {Text} from '.'
-
-export default {
- title: "Typography / Text",
- component: Text
-}
-
-export const Normal = () => Hello World
diff --git a/packages/visual-dev/src/components/Text/Text.tsx b/packages/visual-dev/src/components/Text/Text.tsx
deleted file mode 100644
index fd4de10afc..0000000000
--- a/packages/visual-dev/src/components/Text/Text.tsx
+++ /dev/null
@@ -1,34 +0,0 @@
-import styled from "styled-components";
-import * as Styles from "./Styles";
-
-const DEFAULT_TAG = "span";
-
-type TextSizeVariants = keyof typeof Styles.sizeVariants;
-
-export type TextProps = {
- /**
- * Text size given by a value of 1 (largest) to 5 (smallest)
- */
- size?: TextSizeVariants;
- /**
- * Set the text to boldface
- */
- bold?: boolean;
- /**
- * Set the text color, must be a valid CSS color
- */
- color?: string;
- /**
- * Text to display
- */
- children: string;
-};
-
-type StyledTextProps = Pick;
-
-export const Text = styled[DEFAULT_TAG]`
- ${Styles.base}
- ${(props) => Styles.sizeVariants[props.size || "4"]}
- ${(props) => (props.bold ? "font-weight: 600;" : "")}
- ${(props) => (props.color ? `color: ${props.color};` : "")}
-`;
diff --git a/packages/visual-dev/src/components/Text/index.ts b/packages/visual-dev/src/components/Text/index.ts
deleted file mode 100644
index cb34914a10..0000000000
--- a/packages/visual-dev/src/components/Text/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from './Text'
diff --git a/packages/visual-dev/src/components/TextArea/Styles.ts b/packages/visual-dev/src/components/TextArea/Styles.ts
deleted file mode 100644
index 06bf7c20fb..0000000000
--- a/packages/visual-dev/src/components/TextArea/Styles.ts
+++ /dev/null
@@ -1,56 +0,0 @@
-import { css } from "styled-components";
-
-export const TextareaBoxStyle = css`
- position: relative;
- width: 100%;
- box-sizing: border-box;
- height: 100%;
- color: var(--sq-text);
- background: var(--sq-surface);
- font-family: var(--sq-font-family-sans);
- font-size: var(--sq-font-size-regular);
- font-weight: var(--sq-font-weight-regular);
- line-height: var(--sq-line-height-regular);
-
- border: 1px solid var(--sq-border);
- border-radius: var(--sq-border-radius-normal);
-
- &::placeholder {
- color: var(--sq-text-input-disabled);
- }
-
- &:focus {
- outline: none;
- border-color: var(--sq-focused);
- }
-
- &:disabled {
- user-select: none;
- color: var(--sq-text-input-disabled);
- background-color: var(--sq-surface-input-disabled);
- }
-
- &::-webkit-inner-spin-button {
- opacity: 1;
- margin-right: 10px;
- padding: 10px 1px 10px 1px;
- }
-`;
-
-export const invalid = css`
- background: var(--sq-surface-critical-subdued);
- border: 1px solid var(--sq-border-critical);
- border-radius: var(--sq-border-radius-normal);
-
- &:focus {
- outline: none;
- border-color: var(--sq-border-critical);
- }
-`;
-
-export const Container = css`
- display: inline-block;
- width: 100%;
- position: relative;
- height: 100%;
-`;
diff --git a/packages/visual-dev/src/components/TextArea/Textarea.stories.tsx b/packages/visual-dev/src/components/TextArea/Textarea.stories.tsx
deleted file mode 100644
index c499a46a02..0000000000
--- a/packages/visual-dev/src/components/TextArea/Textarea.stories.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React, { useState } from "react";
-import { TextareaView } from ".";
-
-export default {
- title: "Components / Textarea",
- component: TextareaView,
-};
-
-export const FunctionalTextarea = () => {
- const [value, setValue] = useState("");
- return (
- setValue(e.target.value)}
- disabled={undefined}
- errors={undefined}
- />
- );
-};
-
-export const TextareaText = () => ;
-
-export const FullWidth = () => (
-
-);
-
-export const CustomHeight = () => (
-
-);
-
-export const TextareaDisabled = () => (
-
-);
-
-export const Placeholder = () => (
-
-);
-
-export const PlaceholderDisabled = () => (
-
-);
-export const InvalidField = () => (
-
-);
diff --git a/packages/visual-dev/src/components/TextArea/Textarea.tsx b/packages/visual-dev/src/components/TextArea/Textarea.tsx
deleted file mode 100644
index 3364b149fd..0000000000
--- a/packages/visual-dev/src/components/TextArea/Textarea.tsx
+++ /dev/null
@@ -1,98 +0,0 @@
-import root from "react-shadow/styled-components";
-import styled, { CSSProp } from "styled-components";
-import * as Styles from "./Styles";
-import React from "react";
-
-type TextareaProps = OptionProps & Partial>;
-
-type TextareaSizeType = boolean | string;
-
-export interface OptionProps {
- /**
- * Form value of the textarea
- */
- value?: any;
- /**
- * Callback triggered when the textarea input changes
- */
- onChange?: any;
- /**
- * Render in the disabled state and disallow input
- */
- disabled?: boolean;
- /**
- * Indicate an error with a red border and background
- */
- errors?: any;
- /**
- * Custon CSS applied to textarea input
- */
- customCSS?: CSSProp;
- /**
- * Limit textarea width, use "true" to fill parent, or indicate a custom value with a CSS size value (px, %) [default 300px]
- */
- limitWidth?: TextareaSizeType;
- /**
- * Limit textarea width, use "true" to fill parent, or indicate a custom value with a CSS size value (px, %) [default 48px]
- */
- height?: string;
-}
-
-const ShadowDom = styled(root.div)`
- display: contents;
-`;
-
-const StyledTextarea = styled.textarea<{
- isInvalid: boolean;
- customCSS: CSSProp;
-}>`
- ${Styles.TextareaBoxStyle}
- ${(props) => (props.isInvalid ? Styles.invalid : "")}
- ${(props) => props.customCSS}
-`;
-
-const ContainerDiv = styled.div<{
- limitWidth: TextareaSizeType;
- height: string;
-}>`
- ${Styles.Container}
- ${(props) =>
- props.limitWidth
- ? typeof props.limitWidth === "string"
- ? `max-width: ${props.limitWidth};`
- : "max-width: 300px;"
- : "max-width: 100%;"}
- ${(props) => `height: ${props.height}`}
-`;
-
-export const TextareaView = React.forwardRef<
- React.ElementRef<"textarea">,
- TextareaProps
->((props, forwardedRef) => {
- const {
- errors: rawErrors,
- customCSS = {},
- limitWidth = true,
- height = "48px",
- required = false,
- ...rest
- } = props;
- return (
-
-
-
-
-
- );
-});
-
-/**
- * @deprecated use {@link TextareaView} instead
- */
-export const Textarea = TextareaView;
diff --git a/packages/visual-dev/src/components/TextArea/index.ts b/packages/visual-dev/src/components/TextArea/index.ts
deleted file mode 100644
index 01ec90997b..0000000000
--- a/packages/visual-dev/src/components/TextArea/index.ts
+++ /dev/null
@@ -1,2 +0,0 @@
-export * from "./Textarea";
-export * from "./rjsf-Textarea";
diff --git a/packages/visual-dev/src/components/TextArea/rjsf-Textarea.tsx b/packages/visual-dev/src/components/TextArea/rjsf-Textarea.tsx
deleted file mode 100644
index 132e0e2c7c..0000000000
--- a/packages/visual-dev/src/components/TextArea/rjsf-Textarea.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { WidgetProps } from "@rjsf/core";
-import React from "react";
-import { TextareaView } from "./Textarea";
-
-export function RJSFTextarea(props: WidgetProps) {
- const options = props.options;
- return (
- props.onChange(e.target.value)}
- disabled={props.disabled}
- errors={props.rawErrors && !!props.rawErrors.length}
- required={props.required}
- />
- );
-}
diff --git a/packages/visual-dev/src/components/TextLink/Styles.ts b/packages/visual-dev/src/components/TextLink/Styles.ts
deleted file mode 100644
index 9cefc63070..0000000000
--- a/packages/visual-dev/src/components/TextLink/Styles.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import { css } from "styled-components";
-
-export const base = css`
- text-decoration: none;
- color: #14b1f7;
- cursor: pointer;
- &:hover {
- color: #14b1f7;
- }
-`;
diff --git a/packages/visual-dev/src/components/TextLink/TextLink.stories.tsx b/packages/visual-dev/src/components/TextLink/TextLink.stories.tsx
deleted file mode 100644
index 69213dff6a..0000000000
--- a/packages/visual-dev/src/components/TextLink/TextLink.stories.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import React from "react";
-import { TextLinkView } from "./TextLink";
-
-export default {
- title: "Components / Text Link",
- component: TextLinkView,
-};
-
-export const Default = () => (
-
- Test text link
-
-);
-
-export const Underline = () => (
-
- underline="none"
- underline="hover"
- underline="always"
-
-);
diff --git a/packages/visual-dev/src/components/TextLink/TextLink.tsx b/packages/visual-dev/src/components/TextLink/TextLink.tsx
deleted file mode 100644
index 8b2921fc46..0000000000
--- a/packages/visual-dev/src/components/TextLink/TextLink.tsx
+++ /dev/null
@@ -1,79 +0,0 @@
-import * as React from "react";
-import styled, { CSSProp, css } from "styled-components";
-import * as Styles from "./Styles";
-
-type TagProps = OptionProps & StyleProps & Partial>;
-
-export interface OptionProps {
- /**
- * Used to set the underline behavior. The default is always.
- */
- underline?: "always" | "hover" | "none";
- /**
- * Callback triggered when the Link is clicked
- */
- onClick?: (e?: any) => void;
- /**
- * Content displayed inside tag, generally small pieces of content like a
- */
- children: React.ReactNode;
-}
-
-export interface StyleProps {
- /**
- * Custom CSS applied to tag
- */
- customCSS?: CSSProp;
-}
-
-const TextLinkA = styled.a<{
- underline: "always" | "hover" | "none";
- customCSS?: CSSProp;
-}>`
- ${Styles.base}
- ${({ underline }) =>
- // refactor this to a switch statement
- underline === "hover"
- ? css`
- &:hover {
- text-decoration: underline;
- }
- `
- : underline === "none"
- ? css`
- text-decoration: none;
- `
- : css`
- text-decoration: underline;
- `}
-
- ${(props) => props.customCSS}
-`;
-
-export const TextLinkView = React.forwardRef, TagProps>(
- (props, forwardedRef) => {
- const {
- onClick,
- underline = "always",
- children,
- customCSS = {},
- ...rest
- } = props;
-
- return (
-
- {children}
-
- );
- }
-);
-
-/**
- * @deprecated use {@link TextLinkView} instead
- */
-export const TextLink = TextLinkView;
diff --git a/packages/visual-dev/src/components/TextLink/index.ts b/packages/visual-dev/src/components/TextLink/index.ts
deleted file mode 100644
index ceccbbdacb..0000000000
--- a/packages/visual-dev/src/components/TextLink/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./TextLink";
diff --git a/packages/visual-dev/src/components/Tooltip/Styles.ts b/packages/visual-dev/src/components/Tooltip/Styles.ts
deleted file mode 100644
index 3f20a38557..0000000000
--- a/packages/visual-dev/src/components/Tooltip/Styles.ts
+++ /dev/null
@@ -1,95 +0,0 @@
-import { css, keyframes } from "styled-components";
-
-export const base = css`
- display: inline-block;
- position: relative;
-`;
-
-const fadeIn = keyframes`
- from {
- opacity: 0;
- }
- to {
- opacity: 1;
- }
-`;
-
-export const tooltip = css`
- user-select: none;
- position: absolute;
- padding: var(--sq-spacing-small);
- border-radius: var(--sq-border-radius-normal);
- width: max-content;
- min-height: 20px;
- color: var(--sq-surface);
- background: rgba(35, 35, 35, 0.9);
- font-family: var(--sq-font-family-sans);
- font-size: var(--sq-font-size-regular);
- line-height: 20px;
- animation: ${fadeIn} 0.2s;
-
- &::before {
- content: " ";
- border: solid transparent;
- left: 50%;
- height: 0;
- width: 0;
- position: absolute;
- border-width: 5px;
- margin-left: calc(5px * -1);
- }
-
- &.right {
- right: auto;
- left: calc(100% + 10px);
- top: 50%;
- transform: translateX(0) translateY(-50%);
- }
-
- &.right::before {
- left: calc(5px * -1);
- top: 50%;
- transform: translateX(0) translateY(-50%);
- border-right-color: rgba(35, 35, 35, 0.9);
- }
-
- &.left {
- left: auto;
- right: calc(100% + 10px);
- top: 50%;
- transform: translateX(0) translateY(-50%);
- }
-
- &.left::before {
- left: auto;
- right: calc(5px * -2);
- top: 50%;
- transform: translateX(0%) translateY(-50%);
- border-left-color: rgba(35, 35, 35, 0.9);
- }
-
- &.top {
- bottom: calc(100% + 10px);
- left: 50%;
- transform: translateX(-50%);
- }
-
- &.top::before {
- top: 100%;
- transform: translateX(5%);
- border-top-color: rgba(35, 35, 35, 0.9);
- }
-
- &.bottom {
- top: calc(100% + 10px);
- left: 50%;
- transform: translateX(-50%);
- }
-
- &.bottom::before {
- bottom: calc(100%);
- left: 50%;
- transform: translateX(5%);
- border-bottom-color: rgba(35, 35, 35, 0.9);
- }
-`;
diff --git a/packages/visual-dev/src/components/Tooltip/Tooltip.stories.tsx b/packages/visual-dev/src/components/Tooltip/Tooltip.stories.tsx
deleted file mode 100644
index 3fd39580a6..0000000000
--- a/packages/visual-dev/src/components/Tooltip/Tooltip.stories.tsx
+++ /dev/null
@@ -1,148 +0,0 @@
-import React, { useState } from "react";
-import { directions, TooltipView } from ".";
-import { Button } from "../Button";
-import styled from "styled-components";
-import { InputView } from "../Input";
-
-export default {
- title: "Components / Tooltip",
- component: TooltipView,
-};
-
-const StoryFrame = styled.div`
- width: 900px;
- height: 300px;
- display: flex;
- align-items: center;
- justify-content: center;
-`;
-const ButtonFrame = styled.div`
- position: absolute;
- display: flex;
- align-items: center;
- justify-content: space-between;
- bottom: 30px;
- width: 30%;
-`;
-
-export const Functional = () => {
- let timeout: ReturnType;
- const [delay, setDelay] = useState(150);
- const [enabled, setEnable] = useState(false);
-
- const showTooltip = () => {
- timeout = setTimeout(() => {
- setEnable(true);
- }, delay);
- };
-
- const hideTooltip = () => {
- clearInterval(timeout);
- setEnable(false);
- };
-
- const [direction, setDirection] = useState("top");
-
- return (
-
-
- Hover
-
-
- Delay:
-
- setDelay(Number(e.target.value))
- }
- min="0"
- max="5000"
- customContainerCSS="width: 75px;"
- />
-
-
- setDirection("top")}>
- Top
-
- setDirection("left")}>
- Left
-
- setDirection("bottom")}>
- Bottom
-
- setDirection("right")}>
- Right
-
-
-
- );
-};
-
-export const Top = () => (
-
-
-
-);
-
-export const Left = () => (
-
-
-
-);
-
-export const Bottom = () => (
-
-
-
-);
-
-export const Right = () => (
-
-
-
-);
-
-export const LongTooltip = () => (
-
-
-
-);
-
-export const CustomCSS = () => (
-
-
-
-);
diff --git a/packages/visual-dev/src/components/Tooltip/Tooltip.tsx b/packages/visual-dev/src/components/Tooltip/Tooltip.tsx
deleted file mode 100644
index 074fdc9bfb..0000000000
--- a/packages/visual-dev/src/components/Tooltip/Tooltip.tsx
+++ /dev/null
@@ -1,86 +0,0 @@
-import React from "react";
-import styled, { CSSProp } from "styled-components";
-
-import * as Styles from "./Styles";
-
-type TooltipProps = OptionProps &
- StyleProps &
- Partial>;
-
-export type directions = "top" | "left" | "bottom" | "right";
-export interface OptionProps {
- /**
- * Text displayed inside the tooltip
- */
- text?: string | React.ReactNode;
- /**
- * Where the tooltip appears in relation to the element it is attached to
- */
- direction?: directions;
- /**
- * Display/hide the tooltip
- */
- showTooltip?: boolean;
- /**
- * Element the tooltip is attached to
- */
- children?: React.ReactNode;
-}
-
-export interface StyleProps {
- /**
- * Max width of the tooltip, use a valid CSS size value (px, %)
- */
- maxWidth?: string;
- /**
- * Custom CSS applied to tooltip
- */
- customCSS?: CSSProp;
-}
-
-const WrapperDiv = styled.div`
- ${Styles.base}
-`;
-
-const TooltipDiv = styled.div>`
- ${Styles.tooltip};
-
- max-width: ${(props) => (props.maxWidth ? props.maxWidth : "144px")};
-
- ${(props) => props.customCSS}
-`;
-
-export const TooltipView = React.forwardRef<
- React.ElementRef<"div">,
- TooltipProps
->((props, forwardedRef) => {
- const {
- text = "",
- direction = "top",
- showTooltip = false,
- children,
- maxWidth = "",
- customCSS = {},
- ...rest
- } = props;
-
- return (
-
- {children}
- {showTooltip && (
-
- {text}
-
- )}
-
- );
-});
-
-/**
- * @deprecated use {@link TooltipView} instead
- */
-export const Tooltip = TooltipView;
diff --git a/packages/visual-dev/src/components/Tooltip/index.ts b/packages/visual-dev/src/components/Tooltip/index.ts
deleted file mode 100644
index 5a57dbfa4e..0000000000
--- a/packages/visual-dev/src/components/Tooltip/index.ts
+++ /dev/null
@@ -1 +0,0 @@
-export * from "./Tooltip";
diff --git a/packages/visual-dev/src/components/meta.tsx b/packages/visual-dev/src/components/meta.tsx
deleted file mode 100644
index c1bec267d1..0000000000
--- a/packages/visual-dev/src/components/meta.tsx
+++ /dev/null
@@ -1,53 +0,0 @@
-import styled from 'styled-components'
-import React from 'react'
-import marked from 'marked'
-
-const VisualSpecContainer = styled.div`
- width: 100%;
- & pre {
- padding: 20px;
- background-color: #f9f9f9;
- }
- & code {
- font-size: 14px;
- color: black;
- word-break: break-word;
- & span {
- color: #439b76;
- }
- & br {
- content: '';
- margin: 1.25em;
- display: block;
- font-size: 25%;
- }
- }
-`
-
-interface VisualSpecProps {
- spec: string
- onModal?: boolean
-}
-
-export const VisualSpec = ({ spec, onModal = false }: VisualSpecProps) => {
- try {
- const html = marked(spec)
- const highlighted_html = html.replace(/\Given\b|\bThen\b|\bAnd\b|\bWhen\b/g, '$& ')
- const spaced_highlighted_html = highlighted_html.replace(/(\r\n|\n|\r)/gm, ' ').replace(/ \w* /gm, ' ')
- return (
- <>
- {onModal &&
}
-
-
- >
- )
- } catch (e) {
- return (
- <>
-
- Error {JSON.stringify(e)}
-
- >
- )
- }
-}
diff --git a/packages/visual-dev/src/components/stories/Heading.stories.tsx b/packages/visual-dev/src/components/stories/Heading.stories.tsx
deleted file mode 100644
index 3c0f5bc364..0000000000
--- a/packages/visual-dev/src/components/stories/Heading.stories.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import { Heading } from '../Heading'
-
-export default {
- title: "Typography / Heading",
- component: Heading
-}
-
-export const H1 = () => Hello
-export const H2 = () => Hello
-export const H3 = () => Hello
diff --git a/packages/visual-dev/src/components/stories/LoadingSpinner.stories.tsx b/packages/visual-dev/src/components/stories/LoadingSpinner.stories.tsx
deleted file mode 100644
index 5cc92fe2b4..0000000000
--- a/packages/visual-dev/src/components/stories/LoadingSpinner.stories.tsx
+++ /dev/null
@@ -1,56 +0,0 @@
-import React from "react";
-import { LoadingSpinner } from "../LoadingSpinner";
-
-export default {
- title: "Components / Loading Spinner",
-};
-
-export const Normal = () => {
- return (
-
-
-
- );
-};
-Normal.parameters = {
- storyshots: { disable: true },
-};
-
-export const NormalWithProps = () => {
- return (
-
-
-
- );
-};
-NormalWithProps.parameters = {
- storyshots: { disable: true },
-};
-
-export const Large = () => {
- return (
-
-
-
- );
-};
-export const LargeNoMargin = () => {
- return ;
-};
-Large.parameters = {
- storyshots: { disable: true },
-};
-
-export const TableInitialLoad = () => {
- return ;
-};
-
-export const Table = () => {
- return ;
-};
diff --git a/packages/visual-dev/src/components/stories/Paragraph.stories.tsx b/packages/visual-dev/src/components/stories/Paragraph.stories.tsx
deleted file mode 100644
index d3abf99878..0000000000
--- a/packages/visual-dev/src/components/stories/Paragraph.stories.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import React from 'react';
-import {Paragraph} from '../Paragraph'
-
-export default {
- title: "Typography / Paragraph",
- component: Text
-}
-
-export const Default = () => This is a Paragraph size 1. A really long paragraph of text, to demonstrate prose text, like for example, the kind you might read in a blog post. The reason we're using prose here is because the most common use case for this container size is longform text. So we're previewing some longform text here so we can make sure the container width provides an optimal line length for this font size.
-
-export const Caption = () => This is a Paragraph size 2. A really long paragraph of text, to demonstrate prose text, like for example, the kind you might read in a blog post. The reason we're using prose here is because the most common use case for this container size is longform text. So we're previewing some longform text here so we can make sure the container width provides an optimal line length for this font size.
diff --git a/packages/visual-dev/src/components/stories/json.tsx b/packages/visual-dev/src/components/stories/json.tsx
deleted file mode 100644
index 189f5b1791..0000000000
--- a/packages/visual-dev/src/components/stories/json.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import React from 'react'
-import { render } from 'react-dom'
-import Form from 'react-jsonschema-form'
-import { JSONSchema6 } from 'json-schema'
-
-const jsonSchema: JSONSchema6 = {
- title: "Let's get started",
- description: '',
- type: 'object',
- required: ['firstName', 'lastName', 'email', 'password', 'passwordcheck'],
- properties: {
- firstName: {
- type: 'string',
- title: 'First name',
- },
- lastName: {
- type: 'string',
- title: 'Last name',
- },
- email: {
- type: 'string',
- title: 'Email',
- },
- password: {
- type: 'string',
- title: 'Password',
- minLength: 6,
- },
- passwordcheck: {
- type: 'string',
- title: 'Password',
- minLength: 6,
- },
- },
-}
-
-const log = (type) => console.log.bind(console, type)
-
-render(
- ,
- document.getElementById('app')
-)
diff --git a/packages/visual-dev/src/index.d.ts b/packages/visual-dev/src/index.d.ts
deleted file mode 100644
index e69de29bb2..0000000000
diff --git a/packages/visual-dev/src/index.ts b/packages/visual-dev/src/index.ts
deleted file mode 100644
index a6a67d6904..0000000000
--- a/packages/visual-dev/src/index.ts
+++ /dev/null
@@ -1,186 +0,0 @@
-import { LoadingSpinner } from "./components/LoadingSpinner";
-import { Alert, AlertView } from "./components/Alert";
-import { Avatar, AvatarView } from "./components/Avatar";
-import { Badge, BadgeView } from "./components/Badge";
-import { Switch, SwitchView } from "./components/Switch";
-import { Tag, TagView } from "./components/Tag";
-import { Tooltip, TooltipView } from "./components/Tooltip";
-import {
- GlobalStyle,
- CSSVariables,
- TextRules,
- LinkRules,
- TypographyRules,
- FontFamilyRules,
-} from "./components/GlobalStyle";
-import {
- Button,
- ButtonView,
- IconButton,
- IconButtonView,
-} from "./components/Button";
-import { Checkbox, CheckboxView, RJSFCheckbox } from "./components/Checkbox";
-import {
- Radio,
- RadioGroup,
- RadioGroupView,
- RadioView,
- RJSFRadio,
-} from "./components/Radio";
-import {
- Input,
- InputView,
- RJSFCancellableInput,
- RJSFClearableInput,
- RJSFInput,
- RJSFLockableInput,
- RJSFNumericalInput,
- RJSFPasswordInput,
-} from "./components/Input";
-
-import { Select, SelectView } from "./components/Select";
-import { FieldTemplate } from "./components/FieldTemplate";
-import { ObjectFieldTemplate } from "./components/ObjectFieldTemplate";
-import { ArrayFieldTemplate } from "./components/ArrayFieldTemplate";
-import { ErrorListTemplate } from "./components/ErrorListTemplate";
-import {
- RadioCard,
- RadioCardView,
- RJSFRadioCardWidget,
-} from "./components/RadioCard";
-import { Icon, IconView } from "./components/Icon";
-import { RJSFTextarea, Textarea, TextareaView } from "./components/TextArea";
-import { RJSFSelect } from "./components/Select/rjsf-Select";
-import { RJSFRadioActionWidget } from "./components/RadioAction/rjsf-RadioAction";
-import {
- RadioAction,
- RadioActionGroup,
- RadioActionGroupView,
- RadioActionView,
-} from "./components/RadioAction";
-import { List, ListView } from "./components/List";
-import { Accordion, AccordionView } from "./components/Accordion";
-import { DataGraphic } from "./components/Graphics";
-import { DataTable, DataTableView } from "./components/DataTable";
-import { PopoverView, HoverPopover, Popover } from "./components/Popover";
-import { CopyWrapper, CopyWrapperView } from "./components/CopyWrapper";
-import { CardContainer } from "./components/Layouts";
-import {
- CardView,
- CardEditView,
- CardLongView,
- Card,
- CardEdit,
- CardLong,
-} from "./components/Card";
-import { Dropdown, DropdownView } from "./components/Dropdown";
-import { Tabs, TabsView } from "./components/Tabs";
-import { ModalView } from "./components/Modal";
-import { SliderView } from "./components/Slider";
-import { TagInputView } from "./components/TagInput";
-import { DisplayDropdown } from "./components/DisplayDropdown";
-import { ProgressBarView } from "./components/ProgressBar";
-import { DetailsView } from "./components/Details";
-import { ScrollNavView } from "./components/ScrollNav";
-import { useSelectDemo } from "./components/Select/useSelectDemo";
-import { useMultiSelectDemo } from "./components/Select/useMultiSelectDemo";
-import { useComboboxDemo } from "./components/Select/useComboboxDemo";
-import { ButtonDropdownView } from "./components/ButtonDropdown";
-
-///
-
-export {
- Accordion,
- AccordionView,
- Alert,
- AlertView,
- Avatar,
- AvatarView,
- Badge,
- BadgeView,
- ButtonView,
- Button,
- CardView,
- Card,
- CardContainer,
- CardEditView,
- CardEdit,
- CardLongView,
- CardLong,
- CheckboxView,
- Checkbox,
- CopyWrapperView,
- CopyWrapper,
- CSSVariables,
- DataGraphic,
- DataTableView,
- DataTable,
- Dropdown,
- DropdownView,
- ButtonDropdownView,
- ErrorListTemplate,
- FieldTemplate,
- GlobalStyle,
- LinkRules,
- HoverPopover,
- IconView,
- Icon,
- IconButton,
- IconButtonView,
- InputView,
- Input,
- ListView,
- List,
- LoadingSpinner,
- ModalView,
- ObjectFieldTemplate,
- ArrayFieldTemplate,
- PopoverView,
- Popover,
- RadioView,
- Radio,
- RadioGroupView,
- RadioGroup,
- RadioActionView,
- RadioAction,
- RadioActionGroup,
- RadioActionGroupView,
- RadioCardView,
- RadioCard,
- RJSFCancellableInput,
- RJSFCheckbox,
- RJSFClearableInput,
- RJSFInput,
- RJSFLockableInput,
- RJSFNumericalInput,
- RJSFPasswordInput,
- RJSFRadio,
- RJSFRadioActionWidget,
- RJSFRadioCardWidget,
- RJSFSelect,
- RJSFTextarea,
- Select,
- SelectView,
- SwitchView,
- Switch,
- TagView,
- Tag,
- TagInputView,
- TextareaView,
- Textarea,
- TextRules,
- TooltipView,
- Tooltip,
- Tabs,
- TabsView,
- SliderView,
- DisplayDropdown,
- ProgressBarView,
- DetailsView,
- ScrollNavView,
- useSelectDemo,
- useMultiSelectDemo,
- useComboboxDemo,
- TypographyRules,
- FontFamilyRules,
-};
diff --git a/packages/visual-dev/src/utlis.ts b/packages/visual-dev/src/utlis.ts
deleted file mode 100644
index 15be893c71..0000000000
--- a/packages/visual-dev/src/utlis.ts
+++ /dev/null
@@ -1,4 +0,0 @@
-import { StyleProps as BadgeStyleProps } from "./components/Badge";
-
-export const dashToSnakeCase = (str: BadgeStyleProps["status"]) =>
- str.replace("-", "_");
diff --git a/packages/visual-dev/tsconfig.json b/packages/visual-dev/tsconfig.json
deleted file mode 100644
index 2d7419fbbf..0000000000
--- a/packages/visual-dev/tsconfig.json
+++ /dev/null
@@ -1,35 +0,0 @@
-{
- // see https://www.typescriptlang.org/tsconfig to better understand tsconfigs
- "include": ["src", "types"],
- "compilerOptions": {
- "module": "esnext",
- "lib": ["dom", "esnext"],
- "importHelpers": true,
- // output .d.ts declaration files for consumers
- "declaration": true,
- // output .js.map sourcemap files for consumers
- "sourceMap": true,
- // match output dir to input dir. e.g. dist/index instead of dist/src/index
- "rootDir": "./src",
- // stricter type-checking for stronger correctness. Recommended by TS
- "strict": true,
- // linter checks for common issues
- "noImplicitReturns": true,
- "noFallthroughCasesInSwitch": true,
- // noUnused* overlap with @typescript-eslint/no-unused-vars, can disable if duplicative
- "noUnusedLocals": true,
- "noUnusedParameters": true,
- // use Node's module resolution algorithm, instead of the legacy TS one
- "moduleResolution": "node",
- // transpile JSX to React.createElement
- "jsx": "react",
- // interop between ESM and CJS modules. Recommended by TS
- "esModuleInterop": true,
- // significant perf increase by skipping checking .d.ts files, particularly those in node_modules. Recommended by TS
- "skipLibCheck": true,
- // error out if import and file system have a casing mismatch. Recommended by TS
- "forceConsistentCasingInFileNames": true,
- // `tsdx build` ignores this option, but it is commonly used when type-checking separately with `tsc`
- "noEmit": true
- }
-}