@rango-dev/ui 0.15.1-next.2 → 0.15.1-next.21

package/src/components/Typography/Typography.stories.tsx

@@ -1,7 +1,9 @@
+import type { PropTypes } from './Typography.types';
+import type { Meta } from '@storybook/react';
+
 import React from 'react';
-import { Meta } from '@storybook/react';
 
-import { Typography, PropTypes } from './Typography';
+import { Typography } from './Typography';
 
 export default {
   title: 'Components/Typography',
@@ -34,39 +36,90 @@ export default {
       control: { type: 'boolean' },
     },
   },
-} as Meta<typeof Typography>;
+} satisfies Meta<typeof Typography>;
 
 export const Main = (props: PropTypes) => (
   <div>
-    <Typography {...props} variant="h1">
-      Heading 1
-    </Typography>
-    <Typography {...props} variant="h2">
-      Heading 2
-    </Typography>
-    <Typography {...props} variant="h3">
-      Heading 3
-    </Typography>
-    <Typography {...props} variant="h4">
-      Heading 4
-    </Typography>
-    <Typography {...props} variant="h5">
-      Heading 5
-    </Typography>
-    <Typography {...props} variant="h6">
-      Heading 6
-    </Typography>
-    <Typography {...props} variant="body1">
-      Body 1
-    </Typography>
-    <Typography {...props} variant="body2">
-      Body 2
-    </Typography>
-    <Typography {...props} variant="body3">
-      Body 3
-    </Typography>
-    <Typography {...props} variant="caption">
-      Caption
-    </Typography>
+    <div>
+      <Typography {...props} variant="display" size="large">
+        Display Large
+      </Typography>
+      {', '}
+      <Typography {...props} variant="display" size="medium">
+        Display Medium
+      </Typography>
+      {', '}
+      <Typography {...props} variant="display" size="small">
+        Display Small
+      </Typography>
+    </div>
+
+    <div>
+      <Typography {...props} variant="headline" size="large">
+        Headline Large
+      </Typography>
+      {', '}
+      <Typography {...props} variant="headline" size="medium">
+        Headline Medium
+      </Typography>
+      {', '}
+      <Typography {...props} variant="headline" size="small">
+        Headline Small
+      </Typography>
+      {', '}
+      <Typography {...props} variant="headline" size="xsmall">
+        Headline Xsmall
+      </Typography>
+    </div>
+
+    <div>
+      <Typography {...props} variant="title" size="large">
+        Title Large
+      </Typography>
+      {', '}
+      <Typography {...props} variant="title" size="medium">
+        Title Medium
+      </Typography>
+      {', '}
+      <Typography {...props} variant="title" size="xmedium">
+        Title Xmedium
+      </Typography>
+      {', '}
+      <Typography {...props} variant="title" size="small">
+        Title Small
+      </Typography>
+    </div>
+
+    <div>
+      <Typography {...props} variant="label" size="large">
+        Label Large
+      </Typography>
+      {', '}
+      <Typography {...props} variant="label" size="medium">
+        Label Medium
+      </Typography>
+      {', '}
+      <Typography {...props} variant="label" size="small">
+        Label Small
+      </Typography>
+    </div>
+
+    <div>
+      <Typography {...props} variant="body" size="large">
+        Body Large
+      </Typography>
+      {', '}
+      <Typography {...props} variant="body" size="medium">
+        Body Medium
+      </Typography>
+      {', '}
+      <Typography {...props} variant="body" size="small">
+        Body Small
+      </Typography>
+      {', '}
+      <Typography {...props} variant="body" size="xsmall">
+        Body Xsmall
+      </Typography>
+    </div>
   </div>
 );

package/src/components/Typography/Typography.styles.tsx

@@ -0,0 +1,262 @@
+import { styled } from '../../theme';
+
+export const TypographyContainer = styled('span', {
+  display: 'inline-block',
+  variants: {
+    variant: {
+      display: {},
+      headline: {},
+      title: {},
+      label: {},
+      body: {},
+    },
+    size: {
+      large: {},
+      medium: {},
+      xmedium: {},
+      small: {},
+      xsmall: {},
+    },
+    align: {
+      center: {
+        textAlign: 'center',
+      },
+      left: {
+        textAlign: 'left',
+      },
+      right: {
+        textAlign: 'right',
+      },
+    },
+    noWrap: {
+      true: {
+        whiteSpace: 'nowrap',
+      },
+    },
+    ml: {
+      2: {
+        marginLeft: '$2',
+      },
+      4: {
+        marginLeft: '$4',
+      },
+      8: {
+        marginLeft: '$8',
+      },
+      12: {
+        marginLeft: '$12',
+      },
+    },
+    mt: {
+      2: {
+        marginTop: '$2',
+      },
+      4: {
+        marginTop: '$4',
+      },
+      8: {
+        marginTop: '$8',
+      },
+      12: {
+        marginTop: '$12',
+      },
+    },
+    mr: {
+      2: {
+        marginRight: '$2',
+      },
+      4: {
+        marginRight: '$4',
+      },
+      8: {
+        marginRight: '$8',
+      },
+      12: {
+        marginRight: '$12',
+      },
+    },
+    mb: {
+      2: {
+        marginBottom: '$2',
+      },
+      4: {
+        marginBottom: '$4',
+      },
+      8: {
+        marginBottom: '$8',
+      },
+      12: {
+        marginBottom: '$12',
+      },
+    },
+  },
+
+  compoundVariants: [
+    {
+      size: 'large',
+      variant: 'display',
+      css: {
+        fontSize: '$48',
+        fontWeight: '$semiBold',
+        lineHeight: '$64',
+      },
+    },
+    {
+      size: 'medium',
+      variant: 'display',
+      css: {
+        fontSize: '$40',
+        fontWeight: '$semiBold',
+        lineHeight: '$52',
+      },
+    },
+    {
+      size: 'small',
+      variant: 'display',
+      css: {
+        fontSize: '$36',
+        fontWeight: '$semiBold',
+        lineHeight: '$44',
+      },
+    },
+
+    {
+      size: 'large',
+      variant: 'headline',
+      css: {
+        fontSize: '$32',
+        fontWeight: '$semiBold',
+        lineHeight: '$40',
+      },
+    },
+    {
+      size: 'medium',
+      variant: 'headline',
+      css: {
+        fontSize: '$38',
+        fontWeight: '$semiBold',
+        lineHeight: '$36',
+      },
+    },
+    {
+      size: 'small',
+      variant: 'headline',
+      css: {
+        fontSize: '$22',
+        fontWeight: '$semiBold',
+        lineHeight: '$30',
+      },
+    },
+    {
+      size: 'xsmall',
+      variant: 'headline',
+      css: {
+        fontSize: '$20',
+        fontWeight: '$semiBold',
+        lineHeight: '$28',
+      },
+    },
+
+    {
+      size: 'large',
+      variant: 'title',
+      css: {
+        fontSize: '$22',
+        fontWeight: '$medium',
+        lineHeight: '$28',
+      },
+    },
+    {
+      size: 'medium',
+      variant: 'title',
+      css: {
+        fontSize: '$18',
+        fontWeight: '$medium',
+        lineHeight: '$26',
+      },
+    },
+    {
+      size: 'xmedium',
+      variant: 'title',
+      css: {
+        fontSize: '$16',
+        fontWeight: '$medium',
+        lineHeight: '$24',
+      },
+    },
+    {
+      size: 'small',
+      variant: 'title',
+      css: {
+        fontSize: '$14',
+        fontWeight: '$medium',
+        lineHeight: '$20',
+      },
+    },
+
+    {
+      size: 'large',
+      variant: 'label',
+      css: {
+        fontSize: '$14',
+        fontWeight: '$medium',
+        lineHeight: '$20',
+      },
+    },
+    {
+      size: 'medium',
+      variant: 'label',
+      css: {
+        fontSize: '$12',
+        fontWeight: '$medium',
+        lineHeight: '$16',
+      },
+    },
+    {
+      size: 'small',
+      variant: 'label',
+      css: {
+        fontSize: '$10',
+        fontWeight: '$medium',
+        lineHeight: '$16',
+      },
+    },
+
+    {
+      size: 'large',
+      variant: 'body',
+      css: {
+        fontSize: '$16',
+        fontWeight: '$regular',
+        lineHeight: '$24',
+      },
+    },
+    {
+      size: 'medium',
+      variant: 'body',
+      css: {
+        fontSize: '$14',
+        fontWeight: '$regular',
+        lineHeight: '$20',
+      },
+    },
+    {
+      size: 'small',
+      variant: 'body',
+      css: {
+        fontSize: '$12',
+        fontWeight: '$regular',
+        lineHeight: '$16',
+      },
+    },
+    {
+      size: 'xsmall',
+      variant: 'body',
+      css: {
+        fontSize: '$10',
+        fontWeight: '$regular',
+        lineHeight: '$12',
+      },
+    },
+  ],
+});

package/src/components/Typography/Typography.tsx

@@ -1,200 +1,9 @@
-import { CSSProperties } from '@stitches/react';
-import React, { PropsWithChildren } from 'react';
-import { styled } from '../../theme';
+import type { PropTypes } from './Typography.types';
+import type { PropsWithChildren } from 'react';
 
-const TypographyContainer = styled('span', {
-  margin: 0,
-  display: 'inline-block',
-  variants: {
-    variant: {
-      h1: {
-        fontSize: '$36',
-        fontWeight: '$700',
-        '@md': {
-          fontSize: '$40',
-        },
-        '@lg': {
-          fontSize: '$48',
-        },
-      },
-      h2: {
-        fontSize: '$32',
-        fontWeight: '$700',
-        '@md': {
-          fontSize: '$36',
-        },
-        '@lg': {
-          fontSize: '$40',
-        },
-      },
-      h3: {
-        fontSize: '$20',
-        fontWeight: '$700',
-        '@md': {
-          fontSize: '$24',
-        },
-        '@lg': {
-          fontSize: '$32',
-        },
-      },
-      h4: {
-        fontSize: '$18',
-        fontWeight: '$600',
-        '@md': {
-          fontSize: '$20',
-        },
-        '@lg': {
-          fontSize: '$24',
-        },
-      },
-      h5: {
-        fontSize: '$16',
-        fontWeight: '$600',
-      },
-      h6: {
-        fontSize: '$14',
-        fontWeight: '$500',
-        '@md': {
-          fontSize: '$16',
-        },
-        '@lg': {
-          fontSize: '$18',
-        },
-      },
-      title: {
-        fontSize: '$14',
-        fontWeight: '$500',
-        '@md': {
-          fontSize: '$15',
-        }
-      },
-      body1: {
-        fontSize: '$14',
-        fontWeight: '$400',
-        '@md': {
-          fontSize: '$16',
-        },
-        '@lg': {
-          fontSize: '$18',
-        },
-      },
-      body2: {
-        fontSize: '$14',
-        fontWeight: '$400',
-        // '@lg': {
-        //   fontSize: '$14',
-        // },
-      },
-      body3: {
-        fontSize: '$12',
-        fontWeight: '$400',
-      },
-      caption: {
-        fontSize: '$10',
-        fontWeight: '$400',
-        '@lg': {
-          fontSize: '$12',
-        },
-      },
-    },
-    align: {
-      center: {
-        textAlign: 'center',
-      },
-      left: {
-        textAlign: 'left',
-      },
-      right: {
-        textAlign: 'right',
-      },
-    },
-    noWrap: {
-      true: {
-        whiteSpace: 'nowrap',
-      },
-    },
-    ml: {
-      2: {
-        marginLeft: '$2',
-      },
-      4: {
-        marginLeft: '$4',
-      },
-      8: {
-        marginLeft: '$8',
-      },
-      12: {
-        marginLeft: '$12',
-      },
-    },
-    mt: {
-      2: {
-        marginTop: '$2',
-      },
-      4: {
-        marginTop: '$4',
-      },
-      8: {
-        marginTop: '$8',
-      },
-      12: {
-        marginTop: '$12',
-      },
-    },
-    mr: {
-      2: {
-        marginRight: '$2',
-      },
-      4: {
-        marginRight: '$4',
-      },
-      8: {
-        marginRight: '$8',
-      },
-      12: {
-        marginRight: '$12',
-      },
-    },
-    mb: {
-      2: {
-        marginBottom: '$2',
-      },
-      4: {
-        marginBottom: '$4',
-      },
-      8: {
-        marginBottom: '$8',
-      },
-      12: {
-        marginBottom: '$12',
-      },
-    },
-  },
-});
+import React from 'react';
 
-export interface PropTypes {
-  variant:
-    | 'h1'
-    | 'h2'
-    | 'h3'
-    | 'h4'
-    | 'h5'
-    | 'h6'
-    | 'title'
-    | 'body1'
-    | 'body2'
-    | 'body3'
-    | 'caption';
-  align?: 'center' | 'left' | 'right';
-  noWrap?: boolean;
-  mt?: 2 | 4 | 8 | 12;
-  mb?: 2 | 4 | 8 | 12;
-  ml?: 2 | 4 | 8 | 12;
-  mr?: 2 | 4 | 8 | 12;
-  className?: string;
-  style?: CSSProperties;
-  color?: string;
-}
+import { TypographyContainer } from './Typography.styles';
 
 export function Typography({
   children,
@@ -209,16 +18,12 @@ export function Typography({
     : {
         color: '$foreground',
       };
-
   return (
     <TypographyContainer
       className={`_typography _text ${className || ''}`}
       css={customCss}
-      {...props}
-    >
+      {...props}>
       {children}
     </TypographyContainer>
   );
 }
-
-Typography.toString = () => '._typography';

package/src/components/Typography/Typography.types.tsx

@@ -0,0 +1,28 @@
+import type { TypographyContainer } from './Typography.styles';
+import type * as Stitches from '@stitches/react';
+
+type BaseProps = Stitches.VariantProps<typeof TypographyContainer>;
+type BaseSizes = Exclude<BaseProps['size'], object>;
+type BaseVariants = Exclude<BaseProps['variant'], object>;
+type BaseAlign = Exclude<BaseProps['align'], object>;
+
+// eslint-disable-next-line @typescript-eslint/no-magic-numbers
+type margin = 2 | 4 | 8 | 12;
+
+export interface PropTypes {
+  variant: BaseVariants;
+  size: BaseSizes;
+  align?: BaseAlign;
+  noWrap?: boolean;
+  // @depreacted It will be removed
+  mt?: margin;
+  // @depreacted It will be removed
+  mb?: margin;
+  // @depreacted It will be removed
+  ml?: margin;
+  // @depreacted It will be removed
+  mr?: margin;
+  className?: string;
+  style?: Stitches.CSSProperties;
+  color?: string;
+}

package/src/components/VirtualizedList/VirtualizedList.tsx

@@ -1,27 +1,15 @@
-import React, { PropsWithChildren } from 'react';
-import { ReactElementType, VariableSizeList as List } from 'react-window';
-import InfiniteLoader from 'react-window-infinite-loader';
-import AutoSizer from 'react-virtualized-auto-sizer';
-import { CSSProperties } from '@stitches/react';
-
-export type VirtualizedListItem = ({
-  index,
-  style,
-}: {
-  index: number;
-  style: CSSProperties | undefined;
-}) => JSX.Element | null;
+import type { PropTypes } from './VirtualizedList.types';
+import type { CSSProperties } from '@stitches/react';
+import type { PropsWithChildren } from 'react';
 
-type PropTypes = {
-  itemCount: number;
-  hasNextPage: boolean;
-  loadNextPage: () => void;
-  Item: VirtualizedListItem;
-  innerElementType: ReactElementType | undefined;
-  size: number;
-};
+import React from 'react';
+import AutoSizer from 'react-virtualized-auto-sizer';
+import { VariableSizeList as List } from 'react-window';
+import InfiniteLoader from 'react-window-infinite-loader';
 
 export function VirtualizedList(props: PropsWithChildren<PropTypes>) {
+  // TODO:  react/prop-types problem
+  // eslint-disable-next-line react/prop-types
   const { itemCount, hasNextPage, loadNextPage, Item, innerElementType, size } =
     props;
 

package/src/components/VirtualizedList/VirtualizedList.types.ts

@@ -0,0 +1,19 @@
+import type { CSSProperties } from '@stitches/react';
+import type { ReactElementType } from 'react-window';
+
+export type VirtualizedListItem = ({
+  index,
+  style,
+}: {
+  index: number;
+  style: CSSProperties | undefined;
+}) => JSX.Element | null;
+
+export type PropTypes = {
+  itemCount: number;
+  hasNextPage: boolean;
+  loadNextPage: () => void;
+  Item: VirtualizedListItem;
+  innerElementType: ReactElementType | undefined;
+  size: number;
+};

package/src/components/VirtualizedList/index.ts

@@ -0,0 +1 @@
+export { VirtualizedList } from './VirtualizedList';