@bitrise/bitkit 9.41.0-alpha-chakra.2 → 10.0.2

package/src/Components/Breadcrumb/Breadcrumb.stories.tsx

@@ -1,30 +0,0 @@
-import { ComponentStory, ComponentMeta } from '@storybook/react';
-import Breadcrumb from './Breadcrumb';
-import BreadcrumbLink from './BreadcrumbLink';
-
-export default {
-  title: 'Components/Breadcrumb',
-  component: Breadcrumb,
-  subcomponents: { BreadcrumbLink },
-} as ComponentMeta<typeof Breadcrumb>;
-
-const Template: ComponentStory<typeof Breadcrumb> = (props) => (
-  <Breadcrumb {...props}>
-    <BreadcrumbLink
-      avatarUrl="https://bitrise-public-content-production.s3.amazonaws.com/org-icons/default_avatar-02.png"
-      href="#"
-    >
-      Bitrise #Core
-    </BreadcrumbLink>
-    <BreadcrumbLink avatarName="Bitkit" href="#">
-      bitkit
-    </BreadcrumbLink>
-    <BreadcrumbLink isCurrentPage>settings</BreadcrumbLink>
-  </Breadcrumb>
-);
-
-export const WithProps = Template.bind({});
-WithProps.args = {
-  hasSeparatorAfterLast: false,
-  hasSeparatorBeforeFirst: false,
-};

package/src/Components/Breadcrumb/Breadcrumb.theme.ts

@@ -1,25 +0,0 @@
-import type { SystemStyleObject } from '@chakra-ui/theme-tools';
-
-const BreadcrumbTheme: SystemStyleObject = {
-  baseStyle: {
-    container: {
-      '> ol': {
-        display: 'flex',
-        alignItems: 'center',
-      },
-    },
-    link: {
-      display: 'flex',
-      alignItems: 'center',
-      gap: '8',
-      '[aria-current]': {
-        color: 'red',
-      },
-    },
-    separator: {
-      display: 'flex',
-    },
-  },
-};
-
-export default BreadcrumbTheme;

package/src/Components/Breadcrumb/Breadcrumb.tsx

@@ -1,50 +0,0 @@
-import { Children } from 'react';
-import {
-  Breadcrumb as ChakraBreadcrumb,
-  BreadcrumbProps as ChakraBreadcrumbProps,
-  BreadcrumbItem,
-  BreadcrumbSeparator,
-  forwardRef,
-  useBreakpointValue,
-} from '@chakra-ui/react';
-import Icon, { TypeIconName } from '../Icon/Icon';
-
-export interface BreadcrumbProps extends ChakraBreadcrumbProps {
-  hasSeparatorAfterLast?: boolean;
-  hasSeparatorBeforeFirst?: boolean;
-  separatorIconName?: TypeIconName;
-}
-
-/**
- * Breadcrumbs is a navigation pattern that helps users understand the hierarchy of a website.
- */
-const Breadcrumb = forwardRef<BreadcrumbProps, 'nav'>((props, ref) => {
-  const { children, hasSeparatorAfterLast, hasSeparatorBeforeFirst, separatorIconName, ...rest } = props;
-  const isMobile = !!useBreakpointValue({ mobile: true, desktop: false }, 'desktop');
-
-  const childrenCount = Children.count(children);
-  const items = Children.map(children, (child, index) => {
-    return (
-      <BreadcrumbItem>
-        {hasSeparatorBeforeFirst && index === 0 && <BreadcrumbSeparator />}
-        {child}
-        {hasSeparatorAfterLast && index === childrenCount - 1 && <BreadcrumbSeparator />}
-      </BreadcrumbItem>
-    );
-  });
-
-  const defaultIconName = isMobile ? 'ChevronLeft' : 'ChevronRight';
-  const properties = {
-    separator: <Icon name={separatorIconName || defaultIconName} color="neutral.70" size="16" />,
-    ...rest,
-  };
-  return (
-    <ChakraBreadcrumb {...properties} ref={ref}>
-      {items}
-    </ChakraBreadcrumb>
-  );
-});
-
-Breadcrumb.defaultProps = {};
-
-export default Breadcrumb;

package/src/Components/Breadcrumb/BreadcrumbLink.tsx

@@ -1,33 +0,0 @@
-import {
-  BreadcrumbLink as ChakraBreadcrumbLink,
-  BreadcrumbLinkProps as ChakraBreadcrumbLinkProps,
-  forwardRef,
-  useBreakpointValue,
-} from '@chakra-ui/react';
-import Avatar from '../Avatar/Avatar';
-
-export interface BreadcrumbLinkProps extends ChakraBreadcrumbLinkProps {
-  avatarName?: string;
-  avatarUrl?: string;
-}
-
-const Breadcrumb = forwardRef<BreadcrumbLinkProps, 'a'>((props, ref) => {
-  const { avatarName, avatarUrl, children, isCurrentPage, ...rest } = props;
-  const isMobile = !!useBreakpointValue({ mobile: true, desktop: false }, 'desktop');
-
-  const properties: ChakraBreadcrumbLinkProps = {
-    color: isCurrentPage ? 'neutral.40' : 'inherit',
-    isCurrentPage,
-    ...rest,
-  };
-  return (
-    <ChakraBreadcrumbLink {...properties} color={isCurrentPage ? 'neutral.40' : 'inherit'} ref={ref}>
-      {!isMobile && (avatarName || avatarUrl) && (
-        <Avatar name={avatarName || children?.toString()} src={avatarUrl} borderRadius="4" />
-      )}
-      {children}
-    </ChakraBreadcrumbLink>
-  );
-});
-
-export default Breadcrumb;

package/src/Old/Appear/Appear.css

@@ -1,116 +0,0 @@
-.Appear {
-  animation-timing-function: var(--transition-timing-function);
-}
-
-.Appear--fast {
-  transition-duration: var(--transition-duration--fast);
-  animation-duration: var(--transition-duration--fast);
-}
-
-.Appear--base {
-  transition-duration: var(--transition-duration--base);
-  animation-duration: var(--transition-duration--base);
-}
-
-.Appear--slow {
-  transition-duration: var(--transition-duration--slow);
-  animation-duration: var(--transition-duration--slow);
-}
-
-.Appear--Fade {
-  opacity: 0;
-  transition-property: opacity;
-}
-
-.Appear--Fade-appear-active,
-.Appear--Fade-appear-done,
-.Appear--Fade-enter-active,
-.Appear--Fade-enter-done,
-.Appear--Fade-exit {
-  opacity: 1;
-}
-
-.Appear--Fade-appear,
-.Appear--Fade-enter,
-.Appear--Fade-exit-active,
-.Appear--Fade-exit-done {
-  opacity: 0;
-}
-
-.Appear--FadeSlideDown,
-.Appear--FadeSlideUp {
-  opacity: 0;
-  transition-property: transform, opacity;
-}
-
-.Appear--FadeSlideUp { transform: translateY(var(--size--x4)); }
-.Appear--FadeSlideDown { transform: translateY(calc(var(--size--x4) * -1)); }
-
-.Appear--FadeSlideDown-appear-active,
-.Appear--FadeSlideDown-appear-done,
-.Appear--FadeSlideDown-enter-active,
-.Appear--FadeSlideDown-enter-done,
-.Appear--FadeSlideDown-exit,
-.Appear--FadeSlideUp-appear-active,
-.Appear--FadeSlideUp-appear-done,
-.Appear--FadeSlideUp-enter-active,
-.Appear--FadeSlideUp-enter-done,
-.Appear--FadeSlideUp-exit {
-  transform: translateY(0);
-  opacity: 1;
-}
-
-.Appear--FadeSlideDown-appear,
-.Appear--FadeSlideDown-enter,
-.Appear--FadeSlideDown-exit-active,
-.Appear--FadeSlideDown-exit-done {
-  transform: translateY(calc(var(--size--x4) * -1));
-  opacity: 0;
-}
-
-.Appear--FadeSlideUp-appear,
-.Appear--FadeSlideUp-enter,
-.Appear--FadeSlideUp-exit-active,
-.Appear--FadeSlideUp-exit-done {
-  transform: translateY(var(--size--x4));
-  opacity: 0;
-}
-
-.Appear--FadeSlideRight,
-.Appear--FadeSlideLeft {
-  opacity: 0;
-  transition-property: transform, opacity;
-}
-
-.Appear--FadeSlideRight { transform: translateX(calc(var(--size--x4) * -1)); }
-.Appear--FadeSlideLeft { transform: translateX(var(--size--x4)); }
-
-.Appear--FadeSlideRight-appear-active,
-.Appear--FadeSlideRight-appear-done,
-.Appear--FadeSlideRight-enter-active,
-.Appear--FadeSlideRight-enter-done,
-.Appear--FadeSlideRight-exit,
-.Appear--FadeSlideLeft-appear-active,
-.Appear--FadeSlideLeft-appear-done,
-.Appear--FadeSlideLeft-enter-active,
-.Appear--FadeSlideLeft-enter-done,
-.Appear--FadeSlideLeft-exit {
-  transform: translateX(0);
-  opacity: 1;
-}
-
-.Appear--FadeSlideRight-appear,
-.Appear--FadeSlideRight-enter,
-.Appear--FadeSlideRight-exit-active,
-.Appear--FadeSlideRight-exit-done {
-  transform: translateX(calc(var(--size--x4) * -1));
-  opacity: 0;
-}
-
-.Appear--FadeSlideLeft-appear,
-.Appear--FadeSlideLeft-enter,
-.Appear--FadeSlideLeft-exit-active,
-.Appear--FadeSlideLeft-exit-done {
-  transform: translateX(var(--size--x4));
-  opacity: 0;
-}

package/src/Old/Appear/Appear.tsx

@@ -1,74 +0,0 @@
-import * as React from 'react';
-import { CSSTransition } from 'react-transition-group';
-import classnames from 'classnames';
-import { transitionDurationFast, transitionDurationBase, transitionDurationSlow } from '../variables';
-import Base, { Props as BaseProps } from '../Base/Base';
-import './Appear.css';
-
-const isClient = typeof window !== 'undefined';
-
-const durations = {
-  fast: transitionDurationFast,
-  base: transitionDurationBase,
-  slow: transitionDurationSlow,
-};
-
-export type TypeAppearAnimationName = 'Fade' | 'FadeSlideUp' | 'FadeSlideRight' | 'FadeSlideDown' | 'FadeSlideLeft';
-
-export interface Props extends BaseProps {
-  /** Type of enter and exit animation */
-  animation: TypeAppearAnimationName;
-  className?: string;
-  /** Entrance delay time */
-  delay?: number;
-  /** Entrance duration */
-  duration?: 'slow' | 'base' | 'fast';
-  style?: React.CSSProperties;
-  /** Flag if the element is visible or not */
-  visible?: boolean;
-}
-
-/** Enter and exit components into view with a bit of bedazzle */
-const Appear: React.FunctionComponent<Props> = (props: Props) => {
-  const { animation, className, delay, duration = 'fast', style, visible, ...rest } = props;
-
-  const classes = classnames(className, 'Appear', `Appear--${animation}`, `Appear--${duration}`, {
-    [`Appear--${animation}-appear`]: !isClient && visible,
-  });
-
-  const transition = {
-    appear: `Appear--${animation}-appear`,
-    appearActive: `Appear--${animation}-appear-active`,
-    enter: `Appear--${animation}-enter`,
-    enterActive: `Appear--${animation}-enter-active`,
-    enterDone: `Appear--${animation}-enter-done`,
-    exit: `Appear--${animation}-exit`,
-    exitActive: `Appear--${animation}-exit-active`,
-    exitDone: `Appear--${animation}-exit-done`,
-  };
-
-  const newStyle = {
-    ...style,
-    animationDelay: `${delay}ms`,
-    transitionDelay: `${delay}ms`,
-  };
-
-  return (
-    <CSSTransition
-      appear={isClient && visible}
-      classNames={transition}
-      in={isClient && visible}
-      timeout={durations[duration]}
-    >
-      <Base {...rest} className={classes} style={newStyle} />
-    </CSSTransition>
-  );
-};
-
-Appear.defaultProps = {
-  delay: 0,
-  duration: 'fast',
-  visible: true,
-};
-
-export default Appear;