@bitrise/bitkit 10.36.2 → 11.0.0

package/src/Foundations/Responsive/Responsive.examples.tsx

@@ -1,95 +0,0 @@
-import { Code } from '@chakra-ui/react';
-import Box from '../../Components/Box/Box';
-import Card from '../../Components/Card/Card';
-import CardContent from '../../Components/Card/CardContent';
-import Link from '../../Components/Link/Link';
-import List from '../../Components/List/List';
-import ListItem from '../../Components/List/ListItem';
-import Provider from '../../Components/Provider/Provider';
-import Text from '../../Components/Text/Text';
-
-import useResponsive from '../../hooks/useResponsive';
-
-export const Responsive = () => {
-  const { isMobile, isTablet, isDesktop, isWideDesktop } = useResponsive();
-  return (
-    <Provider>
-      <Text as="h2" size="8" marginBottom="24">
-        Responsive solutions
-      </Text>
-
-      <Card boxShadow="medium" marginBottom="48" padding="24">
-        <CardContent>
-          <Text as="h3" size="6" marginBottom="12">
-            With responsive style props
-          </Text>
-          <Text marginBottom="32">
-            Use the array syntax on style props, when the element should be always visible, but you want to change
-            margin, padding, etc on it.
-            <br />
-            <Link
-              colorScheme="purple"
-              href="https://chakra-ui.com/docs/styled-system/responsive-styles#the-array-syntax"
-              isExternal
-              isUnderlined
-            >
-              https://chakra-ui.com/docs/styled-system/responsive-styles#the-array-syntax
-            </Link>
-          </Text>
-          <Text marginBottom="8">We have 4 breakpoints:</Text>
-          <Box
-            backgroundColor={['green.40', 'purple.30', 'red.40', 'neutral.40']}
-            color="neutral.93"
-            paddingX="24"
-            paddingY="16"
-            transition="200ms"
-          >
-            This Box is
-            <List>
-              <ListItem>green below 848px (53rem)</ListItem>
-              <ListItem>purple from 848px (53rem)</ListItem>
-              <ListItem>but red from 1280px (80rem)</ListItem>
-              <ListItem>but gray from 1616px (101rem)</ListItem>
-            </List>
-          </Box>
-        </CardContent>
-      </Card>
-
-      <Card boxShadow="medium" marginBottom="24" padding="24">
-        <CardContent>
-          <Text as="h3" size="6" marginBottom="12">
-            With useResponsive hook
-          </Text>
-          <Text marginBottom="24">
-            Use this hook when you want to render something conditionally. It will return an object with 1-4 booleans,
-            like:
-            <br />
-            <Code backgroundColor="neutral.20" color="neutral.93" paddingY="4" paddingX="8">
-              const &#123; isMobile, isTablet, isDesktop, isWideDesktop &#125; = useResponsive();
-            </Code>
-          </Text>
-          {isMobile && (
-            <Box backgroundColor="green.40" color="neutral.93" paddingX="24" paddingY="16">
-              This Box is rendered below 848px (53rem), because isMobile is true.
-            </Box>
-          )}
-          {isTablet && (
-            <Box backgroundColor="purple.30" color="neutral.93" paddingX="24" paddingY="16">
-              This Box is rendered from 848px (53rem) but below 1280px (80rem), because isTablet is true.
-            </Box>
-          )}
-          {isDesktop && (
-            <Box backgroundColor="red.40" color="neutral.93" paddingX="24" paddingY="16">
-              This Box is rendered from 1280px (80rem) but below 1616px, because isDesktop is true.
-            </Box>
-          )}
-          {isWideDesktop && (
-            <Box backgroundColor="neutral.40" color="neutral.93" paddingX="24" paddingY="16">
-              This Box is rendered from 1616px (101rem), because isWideDesktop is true.
-            </Box>
-          )}
-        </CardContent>
-      </Card>
-    </Provider>
-  );
-};

package/src/Foundations/Responsive/Responsive.stories.mdx

@@ -1,6 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import { Responsive } from './Responsive.examples';
-
-<Meta title="Foundations/Responsive" />
-
-<Responsive />

package/src/Foundations/Shadows/Shadows.examples.tsx

@@ -1,24 +0,0 @@
-import { HStack, VStack } from '@chakra-ui/react';
-import Box from '../../Components/Box/Box';
-import Card from '../../Components/Card/Card';
-import Provider from '../../Components/Provider/Provider';
-import Text from '../../Components/Text/Text';
-import shadows from './Shadows';
-
-export const Shadows = () => (
-  <Provider>
-    <Text as="h2" size="8">
-      Shadows
-    </Text>
-    <Card boxShadow="medium" marginTop="24">
-      <HStack as={Card} padding="24" spacing="32">
-        {Object.keys(shadows).map((key) => (
-          <VStack key={key}>
-            <Box boxShadow={key} height="32" width="32" />
-            <Text as="span">{key}</Text>
-          </VStack>
-        ))}
-      </HStack>
-    </Card>
-  </Provider>
-);

package/src/Foundations/Shadows/Shadows.stories.mdx

@@ -1,6 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import { Shadows } from './Shadows.examples';
-
-<Meta title="Foundations/Shadows" />
-
-<Shadows />

package/src/Foundations/Sizes/Sizes.examples.tsx

@@ -1,25 +0,0 @@
-import { HStack, VStack } from '@chakra-ui/react';
-import Box from '../../Components/Box/Box';
-import Card from '../../Components/Card/Card';
-import CardContent from '../../Components/Card/CardContent';
-import Provider from '../../Components/Provider/Provider';
-import Text from '../../Components/Text/Text';
-import sizes from './Sizes';
-
-export const Sizes = () => (
-  <Provider>
-    <Text as="h2" size="8">
-      Sizes
-    </Text>
-    <Card boxShadow="medium" marginTop="24">
-      <HStack as={CardContent} alignItems="flex-end" padding="24" spacing="24">
-        {Object.keys(sizes).map((size) => (
-          <VStack key={size}>
-            <Box backgroundColor="brand.primary" height={size} width={size} />
-            <Text>{size}</Text>
-          </VStack>
-        ))}
-      </HStack>
-    </Card>
-  </Provider>
-);

package/src/Foundations/Sizes/Sizes.stories.mdx

@@ -1,6 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import { Sizes } from './Sizes.examples';
-
-<Meta title="Foundations/Sizes" />
-
-<Sizes />

package/src/Foundations/Typography/Typography.examples.tsx

@@ -1,63 +0,0 @@
-import { VStack } from '@chakra-ui/react';
-import Card from '../../Components/Card/Card';
-import Provider from '../../Components/Provider/Provider';
-import Text from '../../Components/Text/Text';
-import typography from './Typography';
-
-const style = {
-  alignItems: 'flex-start',
-  counterReset: 'sizes',
-  listStyle: 'none',
-  li: {
-    counterIncrement: 'sizes',
-    _before: {
-      content: '"Size " counter(sizes) ":"',
-      display: 'inline-block',
-      minWidth: '9.375rem',
-      marginRight: '16',
-      textAlign: 'left',
-    },
-  },
-};
-
-export const FontSizes = () => (
-  <Provider>
-    <Text as="h2" size="8">
-      TT Norm Pro
-    </Text>
-    <Text sx={{ marginTop: '8' }}>
-      <strong>Font weight:</strong> Normal, <strong>Bold</strong>
-    </Text>
-    <Text sx={{ marginTop: '8' }}>
-      <strong>Text transform:</strong> None, UPPERCASE
-    </Text>
-    <Card boxShadow="medium" marginTop="24" padding="24">
-      <VStack as="ol" spacing={24} sx={style}>
-        <Text as="li" size="1">
-          {typography.fontSizes[1]} / {typography.lineHeights[1]} / Normal / Uppercase
-        </Text>
-        <Text as="li" size="2">
-          {typography.fontSizes[2]} / {typography.lineHeights[2]} / Normal
-        </Text>
-        <Text as="li" size="3">
-          {typography.fontSizes[3]} / {typography.lineHeights[3]} / Normal
-        </Text>
-        <Text as="li" size="4">
-          {typography.fontSizes[4]} / {typography.lineHeights[4]} / Normal
-        </Text>
-        <Text as="li" size="5">
-          {typography.fontSizes[5]} / {typography.lineHeights[5]} / Bold
-        </Text>
-        <Text as="li" size="6">
-          {typography.fontSizes[6]} / {typography.lineHeights[6]} / Bold
-        </Text>
-        <Text as="li" size="7">
-          {typography.fontSizes[7]} / {typography.lineHeights[7]} / Bold
-        </Text>
-        <Text as="li" size="8">
-          {typography.fontSizes[8]} / {typography.lineHeights[8]} / Bold
-        </Text>
-      </VStack>
-    </Card>
-  </Provider>
-);

package/src/Foundations/Typography/Typography.stories.mdx

@@ -1,8 +0,0 @@
-import { Meta } from '@storybook/addon-docs';
-import { FontSizes } from './Typography.examples';
-
-<Meta title="Foundations/Typography" />
-
-<FontSizes />
-
-[Go to `Text` component](?path=/story/components-text--with-props)