@bitrise/bitkit 9.3.0-alpha.3 → 9.3.1

package/site/components/Documentation/Components/SectionButton2.tsx

@@ -1,109 +0,0 @@
-  /* eslint-disable object-shorthand */
-  import * as React from 'react';
-  import {
-    Base,
-    Buttons,
-    Icon,
-    Tab,
-    Tabs,
-  } from '@bitrise/bitkit';
-  import CodeBlock from '../../CodeBlock/CodeBlock';
-  import Section from '../../Section/Section';
-  import Button2 from '../../../../src/Button2/Button2';
-
-  const SectionButtons = () => {
-    const [selectedTab, setSelectedTab] = React.useState(1);
-
-    return (
-      <Section>
-        <Tabs gap="x6" margin="x8">
-          <Tab
-              active={ selectedTab === 1 }
-              onClick={ () => setSelectedTab(1) }>
-            Variants & Sizes
-          </Tab>
-
-          <Tab
-              active={ selectedTab === 2 }
-              onClick={ () => setSelectedTab(2) }>
-            With Icons
-          </Tab>
-        </Tabs>
-
-        { selectedTab === 1 && (
-        <>
-          <Base margin="x12">
-            <Buttons alignChildrenVertical="end" margin="x3">
-              <Button2 as="a" href="https://www.bitrise.io" onClick={ (e) => console.log(e) } size="small" target="_blank">Primary</Button2>
-              <Button2 disabled size="small" variant="primary">Disabled</Button2>
-              <Button2 size="medium" type="submit" variant="primary">Primary</Button2>
-              <Button2 disabled size="medium" variant="primary">Disabled</Button2>
-            </Buttons>
-
-            <Buttons alignChildrenVertical="end" margin="x3">
-              <Button2 onClick={ () => alert('onClick') } size="small" variant="secondary">Secondary</Button2>
-              <Button2 disabled size="small" variant="secondary">Disabled</Button2>
-              <Button2 size="medium" variant="secondary">Secondary</Button2>
-              <Button2 disabled size="medium" variant="secondary">Disabled</Button2>
-            </Buttons>
-
-            <Buttons alignChildrenVertical="end" margin="x3">
-              <Button2 size="small" variant="tertiary">Tertiary</Button2>
-              <Button2 disabled size="small" variant="tertiary">Disabled</Button2>
-              <Button2 size="medium" variant="tertiary">Tertiary</Button2>
-              <Button2 disabled size="medium" variant="tertiary">Disabled</Button2>
-            </Buttons>
-            <Buttons alignChildrenVertical="end" margin="x3">
-              <Button2 size="small" variant="dangerPrimary">Primary</Button2>
-              <Button2 disabled size="small" variant="dangerPrimary">Disabled</Button2>
-              <Button2 size="medium" variant="dangerPrimary">Primary</Button2>
-              <Button2 disabled size="medium" variant="dangerPrimary">Disabled</Button2>
-            </Buttons>
-
-            <Buttons alignChildrenVertical="end" margin="x3">
-              <Button2 size="small" variant="dangerSecondary">Secondary</Button2>
-              <Button2 disabled size="small" variant="dangerSecondary">Disabled</Button2>
-              <Button2 size="medium" variant="dangerSecondary">Secondary</Button2>
-              <Button2 disabled size="medium" variant="dangerSecondary">Disabled</Button2>
-            </Buttons>
-          </Base>
-
-          <CodeBlock title="Button Usage Example">{
-`const Component = () => (
-  <Buttons>
-    <Button2 size="small" variant="secondary">Secondary</Button2>
-    <Button2 variant="dangerPrimary">Danger Action</Button2>
-  </Buttons>
-);`
-            }</CodeBlock>
-        </>
-      ) }
-
-        { selectedTab === 2 && (
-        <>
-          <Buttons margin="x4">
-            <Button2 leftIcon={ <Icon name="Group" /> } variant="primary">
-              On the left
-            </Button2>
-
-            <Button2 rightIcon={ <Icon name="Group" /> } variant="secondary">
-              On the right
-            </Button2>
-          </Buttons>
-
-          <Buttons margin="x4">
-            <Button2 leftIcon={ <Icon name="Group" /> } size="small" variant="primary">
-              On the left
-            </Button2>
-
-            <Button2 rightIcon={ <Icon name="Group" /> } size="small" variant="secondary">
-              On the right
-            </Button2>
-          </Buttons>
-        </>
-      ) }
-      </Section>
-    );
-  };
-
-  export default SectionButtons;

package/src/Button2/Button2.tsx

@@ -1,24 +0,0 @@
-/* eslint-disable object-shorthand */
-import * as React from 'react';
-import { Button as ChakraButton, ButtonProps } from '@chakra-ui/react';
-
-interface Props extends Pick<ButtonProps, 'as' | 'disabled' | 'leftIcon' | 'rightIcon' |'sx'> {
-    children: ButtonProps['children'];
-    href?: string;
-    onClick?: (e: React.MouseEvent<HTMLAnchorElement | HTMLButtonElement, MouseEvent>) => void;
-    size?: 'small' | 'medium';
-    target?: '_blank' | '_parent' | '_self' | '_top';
-    type?: ButtonProps['type'];
-    variant?: 'primary' | 'secondary' | 'tertiary' | 'dangerPrimary' | 'dangerSecondary';
-  }
-
-const Button2 = (props: Props) => {
-  const defaults = {
-    size: 'medium',
-    variant: 'primary',
-  };
-  const iconSpacing = props.size === 'medium' ? '10px' : '6px';
-  return <ChakraButton iconSpacing={ iconSpacing } { ...defaults } { ...props } />;
-};
-
-export default Button2;

package/src/chakra/provider.tsx

@@ -1,9 +0,0 @@
-import * as React from 'react';
-import { ChakraProvider, ChakraProviderProps } from '@chakra-ui/react';
-import theme from './theme';
-
-const BitchakraProvider = ({ children }: ChakraProviderProps) => {
-  return <ChakraProvider theme={ theme }>{ children }</ChakraProvider>;
-};
-
-export default BitchakraProvider;

package/src/chakra/theme.tsx

@@ -1,159 +0,0 @@
-import { extendTheme } from '@chakra-ui/react';
-import { variables } from '@bitrise/bitkit';
-
-const theme = extendTheme({
-  config: {
-    cssVarPrefix: 'bitkit',
-  },
-  colors: variables.colorMap,
-  fonts: {
-    body: '"TT Norms Pro", sans-serif',
-    heading: '"TT Norms Pro", sans-serif',
-  },
-  fontSizes: {
-    1: '11px',
-    2: '14px',
-    3: '16px',
-    4: '19px',
-    5: '24px',
-    6: '30px',
-    7: '36px',
-    8: '48px',
-  },
-  lineHeights: {
-    1: '16px',
-    2: '20px',
-    3: '24px',
-    4: '28px',
-    5: '36px',
-    6: '40px',
-    7: '48px',
-    8: '60px',
-  },
-  styles: {
-    global: {
-      body: {
-        color: 'grape-5',
-      },
-    },
-  },
-  components: {
-    Button: {
-      baseStyle: {
-        border: '1px solid',
-        borderRadius: 'base',
-        fontWeight: 'normal',
-        lineHeight: 3,
-      },
-      variants: {
-        primary: {
-          bgGradient: 'linear(to-b, #6C0EB2, #450674)',
-          borderColor: '#683D87',
-          color: '#F8F8F8',
-          fontWeight: 'bold',
-          _hover: {
-            bgGradient: 'linear(to-b, #50167B, #3D125D)',
-            _disabled: {
-              bgGradient: 'linear(to-b, #ccc, #ACACAC)',
-              borderColor: '#ACACAC',
-            },
-          },
-          _active: {
-            bgGradient: 'linear(to-b, #351D48, #351D48)',
-          },
-          _disabled: {
-            bgGradient: 'linear(to-b, #ccc, #ACACAC)',
-            borderColor: '#ACACAC',
-          },
-        },
-        secondary: {
-          bgGradient: 'linear(to-b, #f8f8f8, #fff)',
-          borderColor: '#ddd',
-          color: '#351D48',
-          _hover: {
-            bgGradient: 'linear(to-b, #ECECEC, #ECECEC)',
-          },
-          _active: {
-            bgGradient: 'linear(to-b, #351D48, #351D48)',
-            color: '#F8F8F8',
-          },
-          _disabled: {
-            color: '#ACACAC',
-          },
-        },
-        tertiary: {
-          background: 'transparent',
-          borderColor: 'transparent',
-          color: '#760FC3',
-          _hover: {
-            background: '#F8F0FF',
-          },
-          _active: {
-            background: '#351D48',
-            color: '#F8F8F8',
-          },
-          _disabled: {
-            color: '#ACACAC',
-          },
-        },
-        dangerPrimary: {
-          bgGradient: 'linear(to-b, #E41447, #FF2158)',
-          borderColor: '#D4093C',
-          color: '#fff',
-          fontWeight: 'bold',
-          _hover: {
-            bgGradient: 'linear(to-b, #C90032, #C90032)',
-            _disabled: {
-              bgGradient: 'linear(to-b, #ccc, #acacac)',
-              borderColor: '#ACACAC',
-            },
-          },
-          _active: {
-            bgGradient: 'linear(to-b, #C02048, #C02048)',
-          },
-          _disabled: {
-            bgGradient: 'linear(to-b, #ccc, #acacac)',
-            borderColor: '#ACACAC',
-          },
-        },
-        dangerSecondary: {
-          bgGradient: 'linear(to-b, #f8f8f8, #fff)',
-          borderColor: '#ddd',
-          color: '#FF2158',
-          _hover: {
-            bgGradient: 'linear(to-b, #FFE8EE, #FFE8EE)',
-            borderColor: '#FF8FAB',
-            _disabled: {
-              bgGradient: 'linear(to-b, #f8f8f8, #fff)',
-              borderColor: '#ddd',
-              color: '#ACACAC',
-            },
-          },
-          _active: {
-            bgGradient: 'linear(to-b, #C02048, #C02048)',
-            color: '#fff',
-          },
-          _disabled: {
-            color: '#ACACAC',
-          },
-        },
-      },
-      sizes: {
-        small: {
-          h: '32px',
-          fontSize: 2,
-          px: '12px',
-          py: '3px',
-        },
-        medium: {
-          h: '48px',
-          fontSize: 3,
-          px: '16px',
-          py: '11px',
-        },
-      },
-    },
-  },
-});
-
-export default theme;