@ssa-ui-kit/widgets 0.0.29-alpha → 0.0.31-alpha

package/src/components/CollapsibleNavBar/CollapsibleNavBarList.ts

@@ -1,18 +0,0 @@
-import styled from '@emotion/styled';
-import NavBarList from '@components/NavBar/NavBarList';
-
-const CollapsibleNavBarList = styled(NavBarList)`
-  height: auto;
-  padding: 0 0 0 15px;
-  margin: 14px 0 0 0;
-  ${({ theme }) => theme.mediaQueries.md} {
-    margin-top: 90px;
-    width: 100%;
-    padding: 0;
-  }
-  ${({ theme }) => theme.mediaQueries.lg} {
-    margin-top: 84px;
-  }
-`;
-
-export default CollapsibleNavBarList;

package/src/components/CollapsibleNavBar/CollapsibleNavBarWrapper.ts

@@ -1,24 +0,0 @@
-import styled from '@emotion/styled';
-import NavBarWrapper from '@components/NavBar/NavBarWrapper';
-
-const CollapsibleNavBarWrapper = styled(NavBarWrapper)`
-  transform: none;
-  transition: unset;
-  position: static;
-
-  display: none;
-  width: 100%;
-
-  ${({ theme }) => theme.mediaQueries.md} {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    height: 100%;
-    min-height: 100vh;
-    width: 85px;
-    border-radius: 0;
-    padding-top: 35px;
-  }
-`;
-
-export default CollapsibleNavBarWrapper;

package/src/components/CollapsibleNavBar/CollapsibleNavContentToggle.tsx

@@ -1,27 +0,0 @@
-import { Icon } from '@ssa-ui-kit/core';
-import * as S from './styles';
-
-export const NavContentToggle = ({
-  id,
-  isChecked,
-}: {
-  id: string;
-  isChecked: boolean;
-}) => {
-  return (
-    <div css={S.ContentToggle}>
-      <label
-        htmlFor={id}
-        css={{
-          width: '100%',
-          height: '100%',
-          display: 'flex',
-          alignItems: 'center',
-          justifyContent: 'center',
-          cursor: 'pointer',
-        }}>
-        <Icon name={isChecked ? 'carrot-left' : 'carrot-right'} size={14} />
-      </label>
-    </div>
-  );
-};

package/src/components/CollapsibleNavBar/CollapsibleNavToggle.tsx

@@ -1,49 +0,0 @@
-import { Fragment } from 'react';
-import { css } from '@emotion/react';
-
-import CollapsibleNavToggleWrapper from './CollapsibleNavToggleWrapper';
-
-const CollapsibleNavToggle = ({ id }: { id: string }) => {
-  return (
-    <Fragment>
-      <CollapsibleNavToggleWrapper>
-        <label
-          htmlFor={id}
-          css={css`
-            cursor: pointer;
-
-            height: 20px;
-            width: 20px;
-
-            transform: scale(-1, 1);
-
-            span {
-              height: 2px;
-              width: 100%;
-              background: black;
-              display: block;
-              margin: 4px 0;
-              transform-origin: 4px 0;
-              transition: transform 0.3s cubic-bezier(0.77, 0.2, 0.05, 1),
-                background 0.3s cubic-bezier(0.77, 0.2, 0.05, 1),
-                opacity 0.35s ease;
-
-              &:first-of-type {
-                transform-origin: 0% 0%;
-              }
-
-              &:nth-last-of-type(2) {
-                transform-origin: 0% 100%;
-              }
-            }
-          `}>
-          <span></span>
-          <span></span>
-          <span></span>
-        </label>
-      </CollapsibleNavToggleWrapper>
-    </Fragment>
-  );
-};
-
-export default CollapsibleNavToggle;

package/src/components/CollapsibleNavBar/CollapsibleNavToggleWrapper.ts

@@ -1,16 +0,0 @@
-import styled from '@emotion/styled';
-import NavToggleWrapper from '@components/NavBar/NavToggleWrapper';
-
-const CollapsibleNavToggleWrapper = styled(NavToggleWrapper)`
-  border-radius: 50%;
-  background: ${({ theme }) => theme.colors.greyLighter};
-
-  height: 40px;
-  width: 40px;
-
-  ${({ theme }) => theme.mediaQueries.md} {
-    display: none;
-  }
-`;
-
-export default CollapsibleNavToggleWrapper;

package/src/components/CollapsibleNavBar/NavBarAccordionContent.tsx

@@ -1,52 +0,0 @@
-import styled from '@emotion/styled';
-import { AccordionContent, RenderContentProps } from '@ssa-ui-kit/core';
-import CollapsibleNavBarLink from './CollapsibleNavBarLink';
-import * as S from './styles';
-
-const Link = styled(CollapsibleNavBarLink)`
-  width: 100%;
-  padding: 4.8px 0;
-
-  &:first-of-type {
-    padding-top: 15px;
-  }
-
-  &:not(.active):hover {
-    filter: initial;
-  }
-
-  &.active {
-    text-decoration: underline;
-    filter: initial;
-  }
-`;
-
-export const NavBarAccordionContent = ({
-  items,
-  accordionUniqueName,
-  prefix,
-  isPopover,
-  onClick,
-  ...rest
-}: RenderContentProps & {
-  items: Array<{ path: string; title: string }>;
-  accordionUniqueName: string;
-  prefix?: string;
-  isPopover?: boolean;
-  onClick?: () => void;
-}) => (
-  <AccordionContent
-    {...rest}
-    css={[S.AccordionContent, isPopover && S.AccordionContentPopover]}>
-    {items.map((subMenuItem) => (
-      <Link
-        key={`${accordionUniqueName}-link-${subMenuItem.title
-          .replace(' ', '')
-          .toLowerCase()}`}
-        onClick={onClick}
-        to={'/' + prefix + subMenuItem.path}>
-        {subMenuItem.title}
-      </Link>
-    ))}
-  </AccordionContent>
-);

package/src/components/CollapsibleNavBar/NavBarItemWithSubMenu.tsx

@@ -1,94 +0,0 @@
-import { useMatch } from 'react-router-dom';
-import {
-  AccordionGroupContextProvider,
-  AccordionGroup,
-  Accordion,
-  Wrapper,
-  AccordionTitle,
-} from '@ssa-ui-kit/core';
-import CollapsibleNavBarItem from './CollapsibleNavBarItem';
-import CollapsibleNavBarLink from './CollapsibleNavBarLink';
-import { NavBarAccordionContent } from './NavBarAccordionContent';
-import { CollapsibleNavBarPopover } from './NavBarPopover';
-import { TriggerIcon } from './TriggerIcon';
-import { CollapsibleNavBarGroup } from './types';
-import * as S from './styles';
-
-const Link = CollapsibleNavBarLink.withComponent('div');
-
-export const NavBarItemWithSubMenu = ({
-  item,
-  onClick,
-}: {
-  item: CollapsibleNavBarGroup;
-  onClick?: () => void;
-}) => {
-  const { iconName, iconSize, title, items, prefix, css, CustomIcon } = item;
-  const uniqName = iconName + title.replace(' ', '').toLowerCase();
-  const accordionUniqName = uniqName + 'accordion';
-  const match = useMatch(prefix + ':id');
-
-  const Icon = () => (
-    <TriggerIcon iconName={iconName} iconSize={iconSize} css={{ ...css }} />
-  );
-
-  return (
-    <AccordionGroupContextProvider key={uniqName}>
-      <CollapsibleNavBarItem>
-        <AccordionGroup
-          size="small"
-          css={{
-            width: '100%',
-          }}>
-          <Accordion
-            id={accordionUniqName}
-            title={title}
-            isOpened={false}
-            ariaControls={`${accordionUniqName}-panel`}
-            css={{
-              padding: 0,
-              '& ul li:last-child': {
-                paddingBottom: 10,
-              },
-            }}
-            renderContent={(props) => (
-              <NavBarAccordionContent
-                items={items}
-                accordionUniqueName={accordionUniqName}
-                prefix={prefix}
-                isPopover={false}
-                onClick={onClick}
-                {...props}
-              />
-            )}
-            renderTitle={(data) => (
-              <Wrapper onClick={data.onClick} css={S.AccordionTitleWrapper}>
-                <Link to="" className={match ? ' active' : ''}>
-                  <CollapsibleNavBarPopover
-                    triggerIcon={<Icon />}
-                    title={data.title}
-                    content={
-                      <NavBarAccordionContent
-                        items={items}
-                        accordionUniqueName={accordionUniqName}
-                        prefix={prefix}
-                        id={accordionUniqName}
-                        isOpened
-                        isPopover
-                      />
-                    }
-                  />
-                </Link>
-
-                <Link to="" className={`icon-wrapper${match ? ' active' : ''}`}>
-                  {CustomIcon ? <CustomIcon /> : <Icon />}
-                  <AccordionTitle {...data} css={S.AccordionTitle} />
-                </Link>
-              </Wrapper>
-            )}
-          />
-        </AccordionGroup>
-      </CollapsibleNavBarItem>
-    </AccordionGroupContextProvider>
-  );
-};

package/src/components/CollapsibleNavBar/NavBarItemWithoutSubMenu.tsx

@@ -1,33 +0,0 @@
-import CollapsibleNavBarItem from './CollapsibleNavBarItem';
-import { CollapsibleNavBarPopover } from './NavBarPopover';
-import { TriggerIcon } from './TriggerIcon';
-import CollapsibleNavBarLink from './CollapsibleNavBarLink';
-import * as T from './types';
-
-export const NavBarItemWithoutSubMenu = ({
-  item,
-  onClick,
-}: {
-  item: T.CollapsibleNavBarItem;
-  onClick?: () => void;
-}) => {
-  const { path, iconName, title, iconSize, css, CustomIcon } = item;
-  const Icon = () => (
-    <TriggerIcon
-      iconName={iconName}
-      iconSize={iconSize}
-      CustomIcon={CustomIcon}
-      css={{ ...css }}
-    />
-  );
-
-  return (
-    <CollapsibleNavBarItem key={path}>
-      <CollapsibleNavBarLink to={'/' + path} onClick={onClick}>
-        <CollapsibleNavBarPopover triggerIcon={<Icon />} title={title} />
-        <Icon />
-        <span>{title}</span>
-      </CollapsibleNavBarLink>
-    </CollapsibleNavBarItem>
-  );
-};

package/src/components/CollapsibleNavBar/NavBarPopover.tsx

@@ -1,125 +0,0 @@
-import { useEffect, useState } from 'react';
-import { offset } from '@floating-ui/react';
-import { useTheme } from '@emotion/react';
-import {
-  Popover,
-  PopoverContent,
-  PopoverDescription,
-  PopoverHeading,
-  PopoverTrigger,
-} from '@ssa-ui-kit/core';
-import { useWindowSize } from '@ssa-ui-kit/hooks';
-
-export const CollapsibleNavBarPopover = ({
-  triggerIcon,
-  title,
-  content,
-}: {
-  triggerIcon: React.ReactElement;
-  title: string;
-  content?: React.ReactElement;
-}) => {
-  const theme = useTheme();
-  const [open, setOpen] = useState(false);
-
-  const onOpenChange = (open: boolean) => {
-    setOpen(open);
-  };
-
-  const { width } = useWindowSize();
-
-  useEffect(() => {
-    setOpen(false);
-  }, [width]);
-
-  return (
-    <Popover
-      floatingOptions={{
-        onOpenChange,
-        open,
-        middleware: [
-          offset({
-            mainAxis: 37,
-          }),
-        ],
-      }}
-      placement="right-start"
-      interactionsEnabled="both">
-      <PopoverTrigger
-        variant="custom"
-        dataTestId="collapsible-nav-bar-trigger-button"
-        css={{
-          height: 'auto',
-          padding: 0,
-          margin: 0,
-          cursor: 'pointer',
-          backgroundColor: 'unset',
-          borderRadius: 0,
-        }}
-        startIcon={triggerIcon}
-      />
-      <PopoverContent
-        css={{
-          [theme.mediaQueries.xs]: {
-            display: 'none',
-          },
-          [theme.mediaQueries.md]: {
-            display: 'block',
-          },
-          zIndex: 2,
-        }}
-        isFocusManagerDisabled={true}>
-        <PopoverHeading
-          css={{
-            color: theme.colors.white,
-            fontSize: 12,
-            padding: '3px 5px 5px 5px',
-            background: theme.colors.greyGraphite,
-            borderRadius: 5,
-            cursor: 'default',
-            marginBottom: 1,
-            width: 'auto',
-            whiteSpace: 'nowrap',
-            '&::before': {
-              content: '""',
-              display: 'block',
-              background: 'rgba(71, 74, 80, 1)',
-              borderRadius: 2,
-              position: 'absolute',
-              width: 9,
-              height: 9,
-              top: 7,
-              left: -4,
-              transform: 'rotate(45deg)',
-              zIndex: -1,
-            },
-          }}>
-          {title}
-        </PopoverHeading>
-        <PopoverDescription
-          css={{
-            '& > div': {
-              padding: 0,
-              background: theme.colors.greyGraphite,
-              borderRadius: 5,
-              width: 85,
-              '& > a': {
-                color: theme.colors.white,
-                padding: 5,
-                fontSize: 12,
-                fontWeight: 400,
-                '&:first-of-type': {
-                  paddingTop: 5,
-                },
-                '&:hover': {
-                  background: '#62656B',
-                },
-              },
-            },
-          }}>
-          {content}
-        </PopoverDescription>
-      </PopoverContent>
-    </Popover>
-  );
-};

package/src/components/CollapsibleNavBar/TriggerIcon.tsx

@@ -1,43 +0,0 @@
-import { css, useTheme } from '@emotion/react';
-import { Wrapper, Icon, MapIconsType, SVGProps } from '@ssa-ui-kit/core';
-
-export const TriggerIcon = ({
-  iconName,
-  iconSize,
-  className,
-  CustomIcon,
-}: {
-  iconName: keyof MapIconsType;
-  iconSize?: number;
-  className?: string;
-  CustomIcon?: (props: Omit<SVGProps, 'fill'>) => JSX.Element;
-}) => {
-  const theme = useTheme();
-  return (
-    <Wrapper
-      css={css`
-        width: auto;
-        min-width: 22px;
-        justify-content: center;
-        overflow: visible;
-        position: relative;
-        height: 26px;
-      `}
-      className="trigger-icon">
-      {CustomIcon ? (
-        <CustomIcon
-          size={iconSize}
-          className={className}
-          color={theme.colors.grey}
-        />
-      ) : (
-        <Icon
-          name={iconName}
-          color={theme.colors.grey}
-          size={iconSize}
-          className={className}
-        />
-      )}
-    </Wrapper>
-  );
-};

package/src/components/CollapsibleNavBar/index.ts

@@ -1,2 +0,0 @@
-export { CollapsibleNavBar } from './CollapsibleNavBar';
-export type * from './types';

package/src/components/CollapsibleNavBar/stories/CollapsibleNavBar.stories.tsx

@@ -1,79 +0,0 @@
-import { Fragment } from 'react';
-import { Routes, Route, MemoryRouter } from 'react-router-dom';
-import { Meta } from '@storybook/react';
-import { Title, Description, Source } from '@storybook/addon-docs';
-
-import { DecoratorFunction } from '@storybook/types';
-import { CollapsibleNavBar } from '../CollapsibleNavBar';
-import { ITEMS } from './consts';
-import { Logo } from './Logo';
-import { Layout } from './Layout';
-import { CustomIcon } from './CustomIcon';
-
-type Args = Parameters<typeof CollapsibleNavBar>[0];
-
-const reactRouterDecorator: DecoratorFunction<
-  {
-    component: typeof CollapsibleNavBar;
-    storyResult: React.ReactElement;
-    canvasElement: unknown;
-  },
-  Args
-> = (Story) => {
-  return (
-    <MemoryRouter>
-      <Routes>
-        <Route path="/*" element={<Story />} />
-      </Routes>
-    </MemoryRouter>
-  );
-};
-
-export default {
-  title: 'Widgets/CollapsibleNavBar',
-  component: CollapsibleNavBar,
-  parameters: {
-    layout: 'fullscreen',
-    docs: {
-      page: () => (
-        <Fragment>
-          <Title />
-          <Description />
-          <Source code={`<CollapsibleNavBar />`} />
-        </Fragment>
-      ),
-    },
-  },
-  decorators: [reactRouterDecorator, (Story) => <Layout>{Story()}</Layout>],
-  args: {
-    items: ITEMS,
-    renderLogo: <Logo />,
-    onChange: (isChecked) => {
-      console.log('>>>onChange', isChecked);
-    },
-  },
-} as Meta<typeof CollapsibleNavBar>;
-
-export const Default = {};
-
-export const WithCustomIcon = {
-  title: 'With Custom Icon',
-  component: CollapsibleNavBar,
-  parameters: {
-    layout: 'fullscreen',
-  },
-  args: {
-    items: [
-      ...ITEMS,
-      {
-        path: 'custom',
-        CustomIcon,
-        title: 'Item with custom icon',
-      },
-    ],
-    renderLogo: <Logo />,
-    onChange: (isChecked) => {
-      console.log('>>>onChange', isChecked);
-    },
-  },
-} as Meta<typeof CollapsibleNavBar>;

package/src/components/CollapsibleNavBar/stories/CustomIcon.tsx

@@ -1,20 +0,0 @@
-export const CustomIcon = () => {
-  const size = 24;
-  const fill = 'rgb(195, 197, 204)';
-  const props = {};
-  return (
-    <svg
-      className="svg-icon"
-      width={size}
-      height={size}
-      viewBox="0 0 1024 1024"
-      version="1.1"
-      xmlns="http://www.w3.org/2000/svg"
-      {...props}>
-      <path
-        d="M708.76 993.953333a53.366667 53.366667 0 0 1-46.28-26.666666L532.1 741.466667l-154.666667 148.586666A21.333333 21.333333 0 0 1 341.333333 874.666667V192a21.333333 21.333333 0 0 1 6.706667-15.526667c5.333333-5.02 15.26-8.74 25.72-2.666666l91.946667 53.086666 498.833333 288a21.333333 21.333333 0 0 1-4.733333 38.966667l-206 59.64 130.386666 225.826667a53.333333 53.333333 0 0 1-19.526666 72.826666l-129.333334 74.666667a53.02 53.02 0 0 1-26.573333 7.133333z m-171.806667-308.073333a20.666667 20.666667 0 0 1 3 0.213333 21.333333 21.333333 0 0 1 15.48 10.453334l144 249.413333a10.666667 10.666667 0 0 0 14.566667 3.906667l129.333333-74.666667a10.666667 10.666667 0 0 0 3.906667-14.573333l-144-249.413334a21.333333 21.333333 0 0 1 12.546667-31.16l184.053333-53.286666L384 228.953333v595.633334l138.18-132.76a21.333333 21.333333 0 0 1 14.773333-5.946667zM298.666667 661.333333a21.333333 21.333333 0 0 0-21.333334-21.333333H96a10.666667 10.666667 0 0 1-10.666667-10.666667V96a10.666667 10.666667 0 0 1 10.666667-10.666667h746.666667a10.666667 10.666667 0 0 1 10.666666 10.666667v266.666667a21.333333 21.333333 0 0 0 42.666667 0V96a53.393333 53.393333 0 0 0-53.333333-53.333333H96a53.393333 53.393333 0 0 0-53.333333 53.333333v533.333333a53.393333 53.393333 0 0 0 53.333333 53.333334h181.333333a21.333333 21.333333 0 0 0 21.333334-21.333334z"
-        fill={fill}
-      />
-    </svg>
-  );
-};

package/src/components/CollapsibleNavBar/stories/Layout.tsx

@@ -1,53 +0,0 @@
-import styled from '@emotion/styled';
-import { NotificationCard } from '@components/NotificationCard';
-
-const Main = styled.main`
-  background: linear-gradient(
-      143deg,
-      #e7ebf1 -4.16%,
-      #d7d9dd 39.37%,
-      #cccdd2 52.66%,
-      #e1e4ea 87.68%
-    ),
-    #f8f9fb;
-  width: 100%;
-  padding: 60px 10px 10px 15px;
-
-  ${({ theme }) => theme.mediaQueries.md} {
-    padding: 10px 21px 10px 35px;
-  }
-
-  ${({ theme }) => theme.mediaQueries.lg} {
-    padding: 10px 49px 10px 36px;
-  }
-
-  ${({ theme }) => theme.mediaQueries.xlg} {
-    padding: 10px 60px 10px 62px;
-  }
-`;
-export const Layout = ({ children }: { children: React.ReactNode }) => {
-  /* cSpell:disable */
-  return (
-    <div
-      css={{
-        display: 'flex',
-        minHeight: '100vh',
-        position: 'relative',
-      }}>
-      {children}
-      <Main>
-        {new Array(100).fill(1).map((_, index) => (
-          <NotificationCard
-            key={index}
-            title="CyberVeinToken is Now Available"
-            text="With our newest listing, we’re welcoming Wrapped"
-            isRead={false}
-            type="Informational"
-            time={Date.now()}
-          />
-        ))}
-      </Main>
-    </div>
-  );
-  /* cSpell:enable */
-};

package/src/components/CollapsibleNavBar/stories/Logo.tsx

@@ -1,12 +0,0 @@
-import { ResponsiveImage } from '@ssa-ui-kit/core';
-import * as S from './styles';
-
-export const Logo = () => (
-  <ResponsiveImage
-    css={S.ResponsiveLogo}
-    srcSet="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/logo%2FCTP_Large_Left.png?alt=media&token=b6fe7ab8-fd0b-475f-bb08-360311f27693 69w, https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/logo%2FCTP_Medium_Left.png?alt=media&token=a1aeba69-7c07-40c9-aeac-c2477640870d 55w"
-    sizes="(min-width: 900px) 55px, (min-width: 1440px) 69px"
-    src="https://firebasestorage.googleapis.com/v0/b/admin-themes.appspot.com/o/logo%2FCTP_Small_Left.png?alt=media&token=bff7149e-3b90-4657-8a11-040e83990e6f"
-    alt="SSA CTP logo"
-  />
-);

package/src/components/CollapsibleNavBar/stories/StoryComponent.tsx

@@ -1,26 +0,0 @@
-import { MemoryRouter, Routes, Route } from 'react-router-dom';
-import { CollapsibleNavBar } from '../CollapsibleNavBar';
-import { Logo } from './Logo';
-
-export const StoryComponent = ({
-  items,
-}: Parameters<typeof CollapsibleNavBar>[0]) => (
-  <MemoryRouter>
-    <Routes>
-      <Route
-        path="/*"
-        element={
-          <div style={{ height: '100vh', position: 'relative' }}>
-            <CollapsibleNavBar
-              items={items}
-              renderLogo={<Logo />}
-              onChange={(isChecked) => {
-                console.log('>>>checked ', isChecked);
-              }}
-            />
-          </div>
-        }
-      />
-    </Routes>
-  </MemoryRouter>
-);