@idea-fragments/react-components-zendesk 0.1.1 → 0.1.2

package/src/components/layout/FlexBox.tsx

@@ -1,69 +0,0 @@
-import styled, { css } from "styled-components"
-import { MediaQuery }  from "styles/mediaQueries"
-import { SPACINGS }    from "styles/spacings"
-
-export type ResponsiveProps<P> = {
-  mediaQueryFunc: MediaQuery,
-  props: P
-}
-
-export type Props = {
-  alignItems?: string,
-  gap?: string | null | "unset",
-  fluid?: boolean,
-  inline?: boolean,
-  justifyContent?: string,
-  responsivePropsList?: ResponsiveProps<Props>[]
-  withRows?: boolean,
-  wrap?: boolean,
-}
-
-export type FlexBoxProps = Props
-
-const getFlexDirection = ({ withRows }: Props) => withRows ? "column" : "row"
-
-export const FlexBox = styled.div<Props>`
-  align-items: ${({ alignItems }) => alignItems ? alignItems : "initial"};
-  display: ${(p) => p.inline ? "inline-flex" : "flex"};
-  flex: ${({ fluid }: Props) => fluid ? 1 : "unset"};
-  flex-direction: ${getFlexDirection};
-  gap: ${(p) => p.gap ? p.gap : SPACINGS.SM};
-  justify-content: ${(p) => p.justifyContent || "initial"};
-  ${(p: Props) => p.wrap ? wrappedStyling : ""}
-
-  ${(p: Props) => p.responsivePropsList ? responsiveStyles(p) : ""}
-`
-
-FlexBox.defaultProps   = { withRows: false }
-
-const responsiveStyles = ({ responsivePropsList, ...originalProps }: Props) => (
-  responsivePropsList?.map(({
-                              mediaQueryFunc,
-                              props: rProps,
-                            }): string => {
-    const props = { ...originalProps, ...rProps }
-    const {
-            alignItems,
-            gap,
-            inline,
-            justifyContent,
-            fluid,
-            wrap
-          }     = props
-
-    return mediaQueryFunc(css`
-      align-items: ${alignItems ? alignItems : "initial"};
-      display: ${inline ? "inline-flex" : "flex"};
-      flex: ${fluid ? 1 : "unset"};
-      flex-direction: ${getFlexDirection(props)};
-      gap: ${gap ? gap : SPACINGS.SM};
-      justify-content: ${justifyContent || "initial"};
-      ${wrap ? wrappedStyling : ""}
-    `).join("")
-  })
-)
-
-
-const wrappedStyling = css`
-  flex-wrap: wrap;
-`

package/src/components/layout/Grid.tsx

@@ -1,23 +0,0 @@
-import {
-  Grid as ZGrid,
-  Row as ZRow,
-  Col as ZCol,
-  /* @ts-ignore */
-}                   from "@zendeskgarden/react-grid"
-import styled       from "styled-components"
-import { SPACINGS } from "styles/spacings"
-
-export const Grid = styled(ZGrid)`
-  && {
-    padding: 0;
-  }
-`
-
-export const Row = ZRow
-
-export const Col = styled(ZCol)`
-  && {
-    margin-top: ${SPACINGS.XS};
-    margin-bottom: ${SPACINGS.XS};
-  }
-`

package/src/components/layout/Line.tsx

@@ -1,13 +0,0 @@
-import styled     from "styled-components"
-import { COLORS } from "styles/colors"
-
-type Props = {
-  color?: string,
-}
-
-export const Line = styled.hr<Props>`
-  background: ${({ color }) => color ? color : COLORS.LIGHT_GREY};
-  height: 2px;
-  border: none;
-  margin: unset;
-`

package/src/components/layout/OpacityTransition.tsx

@@ -1,6 +0,0 @@
-import styled from "styled-components"
-
-export const OpacityTransition = styled.div`
-  opacity: ${({ opacity = 1 }: { opacity: number }) => opacity};
-  transition: opacity .25s ease-in-out;
-`

package/src/components/layout/OverflowMenu.tsx

@@ -1,45 +0,0 @@
-import { mdiDotsVertical }    from "@mdi/js"
-import { Button }             from "components/forms/Button"
-import { MenuPlacement } from "components/forms/selectors/Dropdown"
-import { Dropdown }           from "components/forms/selectors/Dropdown"
-import React                  from "react"
-import styled                 from "styled-components"
-import { COLORS, darker }     from "styles/colors"
-
-const COMPONENT_NAME = "OverflowMenu"
-
-export type OverflowMenuItem = {
-  label: string,
-  action: () => void
-}
-
-type Props = {
-  placement?: MenuPlacement,
-  actions: Array<OverflowMenuItem>
-}
-
-const OverflowButton = styled(Button).attrs({
-  icon:                  mdiDotsVertical,
-  "data-component-name": COMPONENT_NAME,
-  color:                 darker(COLORS.GREY),
-  "aria-label":          "Row actions",
-  inline:                true,
-})`
-  align-self: flex-start;
-  display: flex;
-  flex-direction: column;
-  justify-content: flex-start;
-`
-
-export const OverflowMenu = ({ actions, placement }: Props) => (
-  <Dropdown options={actions}
-            placement={placement}
-            returnItemOnChange
-            valueField={"label"}
-            keyField={"label"}
-            // @ts-ignore
-            onChange={({ action }) => { action() }}
-            // @ts-ignore
-            trigger={<OverflowButton />}
-  />
-)

package/src/components/layout/Section.tsx

@@ -1,41 +0,0 @@
-import styled, { css }            from "styled-components"
-import { textColorForBackground } from "styles/mixins"
-
-type Props = {
-    titleHidden? :boolean
-}
-
-const hideTitle = css`
-  & > h1,
-  & > h2,
-  & > h3,
-  & > h4,
-  & > h5,
-  & > h6 {
-    display: none;
-  }
-`
-
-export const Section = styled.section`
-  background: ${({ color, theme }) => color ? color : theme.styles.section.background};
-  border-radius: ${(p) => p.theme.styles.section.borderRadius};
-  box-shadow: ${(p) => p.theme.styles.section.shadow};
-  margin: ${(p) => p.theme.styles.section.margin};
-  padding: ${(p) => p.theme.styles.section.padding};
-  
-  ${({color}) => color ? textColorForBackground : ""}
-  ${({titleHidden} :Props) => titleHidden ? hideTitle : ""}
-  
-  & > :first-child {
-    margin-top: 0;
-    padding-top: 0;
-  }
-  
-  & > section {
-    padding-bottom: 0;
-  }
-  
-  & + section {
-    //padding-top: 0;
-  }
-`

package/src/components/layout/Sidebar.tsx

@@ -1,107 +0,0 @@
-// @flow
-
-// import { Button }              from "components/forms/Button"
-// import { IconButton }          from "components/forms/IconButton"
-// import { FlexBlock }           from "components/layout/FlexBlock"
-// import { H3 }                  from "components/text/Header"
-// import React, { type ElementType }  from "react"
-// import styled                  from "styled-components"
-// import { mdiArrowLeft }        from "@mdi/js"
-// import { SPACINGS }            from "styles/spacings"
-// import { ContainerProps } from "styles/types"
-import { DO_NOTHING }          from "utils/functionHelpers"
-//
-// const Container = styled(FlexBlock)`
-//   height: 100%;
-//   padding: ${SPACINGS.LG};
-//   width: ${({ width }) => width};
-// `
-//
-// const Header = styled(H3)`
-//   color: ${({ theme }) => theme.styles.colorPrimary} !important;
-//   margin: 0;
-// `
-//
-// const ActionContainer = styled(FlexBlock)`
-//   flex: 1;
-// `
-//
-// const ActionItem = styled(Button).attrs({
-//     flat: true, fluid: true,
-// })`
-//   && {
-//     text-align: left;
-//   }
-// `
-
-// export type Action = {
-//     name :string,
-//     onClick :() => void,
-// }
-
-// type Props = {
-//     title :string,
-//     actions :Array<Action>,
-//     showBackButton :boolean,
-//     onBackClicked :() => void,
-//     onLogoClicked :() => void,
-//     logo? :ElementType,
-//     width :string,
-// } & ContainerProps
-
-export const Sidebar = () => {
-    throw new Error("Not Completed Yet")
-}
-
-// export const Sidebar = ({
-                            // title,
-                            // actions,
-                            // showBackButton,
-                            // onBackClicked,
-                            // onLogoClicked,
-                            // logo,
-                            // width,
-                        // } :Props) => {
-    // throw "Not Completed Yet"
-    // return <Container
-    //     data-component-name={Sidebar.COMPONENT_NAME}
-    //     spacing={SPACINGS.SM}
-    //     withRows
-    //     width={width}
-    // >
-    //     <FlexBlock>
-    //         {
-    //             showBackButton
-    //             ? <IconButton icon={mdiArrowLeft}
-    //                           flat
-    //                           onClick={onBackClicked} />
-    //             : null
-    //         }
-    //
-    //         <FlexBlock alignItems={"center"}
-    //                    onClick={onLogoClicked}
-    //                    css={`cursor: pointer;`}>
-    //             {logo ? logo : null}
-    //             <Header>{title}</Header>
-    //         </FlexBlock>
-    //     </FlexBlock>
-    //
-    //     <ActionContainer withRows>
-    //         {
-    //             actions.map(({ name, onClick } :Action) => {
-    //                 return <ActionItem onClick={onClick}>{name}</ActionItem>
-    //             })
-    //         }
-    //     </ActionContainer>
-    // </Container>
-// }
-
-Sidebar.defaultProps = {
-    actions       : [],
-    showBackButton: false,
-    onBackClicked : DO_NOTHING,
-    onLogoClicked : DO_NOTHING,
-    width         : "250px",
-}
-
-Sidebar.COMPONENT_NAME = "Sidebar"

package/src/components/layout/SidebarLayout.tsx

@@ -1,32 +0,0 @@
-// @flow
-
-// import { FlexBlock } from "components/layout/FlexBlock"
-// import * as React    from "react"
-
-// type Props = {
-//     sidebar :React.Node,
-//     content :React.Node,
-//     className? :string,
-// }
-
-
-export const SidebarLayout = () => {
-    throw new Error("Not Completed Yet")
-}
-
-// export const SidebarLayout = ({ className, sidebar, content } :Props) => {
-//     return (
-//         <FlexBlock data-component-name={SidebarLayout.COMPONENT_NAME}
-//                    alignSelf={"center"}
-//                    className={className}>
-//             <FlexBlock withRows css={`height: 100vh`}>
-//                 {sidebar}
-//             </FlexBlock>
-//             <FlexBlock withRows fluid>
-//                 {content}
-//             </FlexBlock>
-//         </FlexBlock>
-//     )
-// }
-
-SidebarLayout.COMPONENT_NAME = "SidebarLayout"

package/src/components/layout/Tabs.tsx

@@ -1,39 +0,0 @@
-// @ts-ignore
-import { TabPanel as ZTabPanel, Tabs as ZTabs } from "@zendeskgarden/react-tabs"
-import styled                                   from "styled-components"
-import { COLORS }                               from "styles/colors"
-import { FONT_WEIGHTS }                         from "styles/typography"
-
-export const Tabs = styled(ZTabs)`
-  &&& {
-    //overflow: unset;
-
-    *[data-garden-id="tabs.tab"], *[data-garden-id="tabs.tablist"] {
-      font-size: inherit;
-    }
-
-    *[data-garden-id="tabs.tablist"] {
-      //border-bottom: none;
-      overflow-x: auto;
-    }
-
-    *[data-garden-id="tabs.tab"] {
-      padding: 10px 15px 6px;
-
-      &[aria-selected="true"] {
-        font-weight: ${FONT_WEIGHTS.BOLD};
-      }
-
-      :hover:not(&[aria-selected="true"]) {
-        color: ${({ theme }) => theme.styles.textColorPrimary};
-        border-bottom: 3px solid ${COLORS.LIGHT_GREY};
-      }
-
-      :focus, &[aria-selected="true"] {
-        color: ${({ theme }) => theme.styles.colorPrimary} !important;
-      }
-    }
-  }
-`
-
-export const TabPanel = ZTabPanel

package/src/components/loaders/AsyncLoadable.tsx

@@ -1,57 +0,0 @@
-// @ts-ignore
-import { Dots }                            from "@zendeskgarden/react-loaders"
-import { FlexBlock }                       from "components/layout/FlexBlock"
-import { StyledComponentProps }       from "components/StyledComponentProps.type"
-import React, { FC, useContext, useState } from "react"
-import styled, { ThemeContext }            from "styled-components"
-import { Theme }                      from "styles/theme/Theme.type"
-import { FONT_SIZES }                      from "styles/typography"
-import { returnAfterMinimum }              from "utils/dateTimeHelpers"
-import { PromiseFunc }                from "utils/function.types"
-
-type AsyncLoadFunc = <T>(f: PromiseFunc<any, T>) => Promise<T>
-export type RenderProp = { withLoading: AsyncLoadFunc }
-
-type Props = {
-  children: (p: RenderProp) => JSX.Element
-} & StyledComponentProps
-
-export let AsyncLoadable: FC<Props> = ({ children, className }) => {
-  const theme                        = useContext<Theme>(ThemeContext)
-  const [isLoading, setLoadingState] = useState<boolean>(false)
-
-  const withLoading = async <T, >(f: PromiseFunc<any, T>): Promise<T> => {
-    setLoadingState(true)
-
-    let val: Promise<any>
-    try {
-      val = await returnAfterMinimum(500, f)
-    } finally {
-      setLoadingState(false)
-    }
-
-    return val
-  }
-
-  if (isLoading) {
-    return <Container justify={"center"}
-                      className={className}
-                      alignItems={"center"}>
-      <Dots color={theme.styles.colorPrimary}
-            size={FONT_SIZES.XXL}
-            delayMS={100}
-            velocity={-.25} />
-    </Container>
-  }
-
-  return children({ withLoading })
-}
-
-AsyncLoadable = styled(AsyncLoadable)``
-
-const Container = styled(FlexBlock)`
-  height: 100%;
-  width: 100%;
-  min-width: 200px;
-  min-height: 200px;
-`

package/src/components/loaders/Dots.tsx

@@ -1,16 +0,0 @@
-// @ts-ignore
-import { Dots as ZDots }        from "@zendeskgarden/react-loaders"
-import React, { FC }            from "react"
-import { FONT_SIZES, FontSize } from "styles/typography"
-
-type Props = {
-  color?: string,
-  size?: FontSize
-}
-
-export const Dots: FC<Props> = ({ color, size = FONT_SIZES.XXL }) => {
-  return <ZDots color={color}
-                size={size}
-                delayMS={100}
-                velocity={-.25} />
-}

package/src/components/loaders/Loadable.tsx

@@ -1,99 +0,0 @@
-// @ts-ignore
-import { Dots }                 from "@zendeskgarden/react-loaders"
-import { FlexBox }              from "components/layout/FlexBox"
-import { useIsMounted }         from "hooks/useIsMounted"
-import React, {
-  FC,
-
-  PropsWithChildren,
-  useContext,
-  useEffect,
-  useState
-} from "react"
-import styled, { ThemeContext } from "styled-components"
-import { Theme }                                 from "styles/theme/Theme.type"
-import { FONT_SIZES }                                 from "styles/typography"
-import { Logger }                                     from "utils/logging/Logger"
-
-const logger = new Logger("Loadable")
-
-const Container = styled(FlexBox)`
-  //height: 100%;
-  width: 100%;
-  position: relative;
-`
-
-const LoaderContainer = styled(FlexBox)<{ showSpinner :boolean }>`
-  height: 100%;
-  width: 100%;
-  position: absolute;
-`
-
-const ChildrenContainer = styled(FlexBox)<{
-  showSpinner :boolean, opaqueSpinner :boolean,
-}>`
-  width: 100%;
-  opacity: ${({ showSpinner, opaqueSpinner }) => {
-    if (!showSpinner) return "1"
-    return opaqueSpinner ? "0" : ".3"
-  }};
-`
-
-type Props = {
-  className?: string,
-  debugId?: number,
-  opaqueSpinner?: boolean,
-  showSpinner: boolean,
-}
-
-export let Loadable: FC<PropsWithChildren<Props>> = ({
-                                    children,
-                                    className,
-                                    debugId,
-                                    opaqueSpinner = false,
-                                    showSpinner = false,
-                                  }) => {
-  logger.writeInfo("Rendering id:", debugId, "showSpinner", showSpinner)
-  const isMounted                           = useIsMounted()
-  const theme                               = useContext<Theme>(ThemeContext)
-  const [canHideSpinner, setCanHideSpinner] = useState<boolean>(true)
-
-  useEffect(() => {
-    if (!showSpinner) return
-    setCanHideSpinner(false)
-    setTimeout(() => {
-      logger.writeInfo("setting setCanHideSpinner true id:", debugId)
-      if (isMounted()) setCanHideSpinner(true)
-    }, 500)
-  }, [debugId, isMounted, showSpinner])
-
-  const showingSpinner = showSpinner || !canHideSpinner
-
-
-
-  return <Container justifyContent={"center"}
-                    gap={"unset"}
-                    alignItems={"center"}>
-    <ChildrenContainer gap={"unset"}
-                       className={className}
-                       opaqueSpinner={opaqueSpinner}
-                       showSpinner={showingSpinner}
-                       withRows
-    >
-      {children}
-    </ChildrenContainer>
-
-    {showingSpinner
-     ? <LoaderContainer justifyContent={"center"}
-                        alignItems={"center"}
-                        showSpinner={showingSpinner}>
-       <Dots color={theme.styles.colorPrimary}
-             size={FONT_SIZES.XXL}
-             delayMS={100}
-             velocity={-.25} />
-     </LoaderContainer>
-     : null}
-  </Container>
-}
-
-Loadable = styled(Loadable)``

package/src/components/loaders/Loader.tsx

@@ -1,52 +0,0 @@
-import { FlexBlock }            from "components/layout/FlexBlock"
-import { useContext }           from "react"
-import * as React               from "react"
-import { useObserver }          from "mobx-react"
-// @ts-ignore
-import { Dots }                 from "@zendeskgarden/react-loaders"
-import { useStores }            from "stores/useStores"
-import { Theme }           from "styles/theme/Theme.type"
-import { FONT_SIZES }           from "styles/typography"
-import styled, { ThemeContext } from "styled-components"
-
-type Props = {
-    forceVisibility :boolean,
-    delay :number,
-}
-
-const Container = styled(FlexBlock)`
-  background: ${({ theme }) => theme.styles.pageBackground}B3;
-  position: fixed;
-  top: 0;
-  left: 0;
-  height: 100%;
-  width: 100%;
-`
-
-export const Loader = ({ forceVisibility, delay } :Props) => {
-    const { ui } = useStores()
-    const theme  = useContext<Theme>(ThemeContext)
-
-    return useObserver(() => {
-        if (!ui.isLoaderVisible && !forceVisibility) {
-            return null
-        }
-
-        return (
-            <Container justify={"center"}
-                       alignItems={"center"}>
-                <Dots data-component-name={`${Loader.COMPONENT_NAME}`}
-                      color={theme.styles.colorPrimary}
-                      size={FONT_SIZES.XXL}
-                      delayMS={delay}
-                      velocity={-.25} />
-            </Container>
-        )
-    })
-}
-
-Loader.defaultProps   = {
-    forceVisibility: false,
-    delay          : 100,
-}
-Loader.COMPONENT_NAME = "Loader"

package/src/components/loaders/TranslucentLoader.tsx

@@ -1,49 +0,0 @@
-import { FlexBox }                                             from "components/layout/FlexBox"
-import { Dots }                                                from "components/loaders/Dots"
-import React, { ComponentType, PropsWithChildren, useContext } from "react"
-import styled, { ThemeContext }                                from "styled-components"
-import { Theme }                                               from "styles/theme/Theme.type"
-
-type Props = {
-  className?: string,
-  innerAs?: ComponentType<any>,
-  isLoading: boolean,
-}
-
-export let TranslucentLoader = ({
-                                  children,
-                                  className,
-                                  innerAs,
-                                  isLoading = true
-                                }: PropsWithChildren<Props>) => {
-  const theme = useContext<Theme>(ThemeContext)
-
-  return (
-    <Container as={innerAs} className={className}>
-      {children}
-      {
-        isLoading
-        ? <FlexBox alignItems={"center"}
-                   justifyContent={"center"}
-                   css={`
-                     background: white;
-                     opacity: .7;
-                     top: 0;
-                     left: 0;
-                     position: absolute;
-                     height: 100%;
-                     width: 100%;
-                   `}>
-          <Dots color={theme.styles.colorPrimary} />
-        </FlexBox>
-        : null
-      }
-    </Container>
-  )
-}
-
-TranslucentLoader = styled(TranslucentLoader)<Props>``
-
-const Container = styled.div`
-  position: relative;
-`