creactive 0.0.56 → 0.0.58

package/source/components/index.ts

@@ -1,2 +0,0 @@
-export { Text } from '@/components/text'
-export type { TextComponent, TextProps } from '@/components/text'

package/source/components/text/constants/color.ts

@@ -1,26 +0,0 @@
-/**
- * Supported text color constants.
- * Part of theme colors, suitable for text coloring.
- * Some extra constants like transparent for example are also included.
- */
-export enum TextColor {
-  TRANSPARENT,
-  BASE_100,
-  BASE_200,
-  BASE_300,
-  BASE_400,
-  BASE_500,
-  BASE_600,
-  BASE_700,
-  BASE_800,
-  BASE_900,
-  INVERSE_100,
-  INVERSE_200,
-  INVERSE_300,
-  INVERSE_400,
-  INVERSE_500,
-  INVERSE_600,
-  INVERSE_700,
-  INVERSE_800,
-  INVERSE_900,
-}

package/source/components/text/constants/font.ts

@@ -1,32 +0,0 @@
-/**
- * Supported by text component font weights enum.
- * Should be used to control the weight of the text.
- */
-export enum TextFontWeight {
-  THIN,
-  EXTRA_LIGHT,
-  LIGHT,
-  REGULAR,
-  MEDIUM,
-  SEMIBOLD,
-  BOLD,
-  EXTRA_BOLD,
-  BLACK,
-}
-
-/**
- * Supported text font sizes enum.
- * Should be used to control the size of the text.
- */
-export enum TextFontSize {
-  X2S,
-  XS,
-  SM,
-  MD,
-  LG,
-  XL,
-  X2L,
-  X3L,
-  X4L,
-  X5L,
-}

package/source/components/text/constants/index.ts

@@ -1,5 +0,0 @@
-export { TextColor } from './color'
-export { TextFontSize, TextFontWeight } from './font'
-export { TextRole } from './role'
-export { TextAlign, TextLineHeight } from './text'
-export { TEXT_TYPE_HEADING, TextType } from './type'

package/source/components/text/constants/role.ts

@@ -1,12 +0,0 @@
-/**
- * Text role enum (for inner usage).
- * A part of react-native role type, used by text.
- */
-export const enum TextRole {
-  HEADING = 'heading',
-  /**
-   * There is no paragraph role in react-native types.
-   * But thats how we render text to paragraph tag in react-native-web.
-   */
-  PARAGRAPH = 'paragraph',
-}

package/source/components/text/constants/text.ts

@@ -1,22 +0,0 @@
-/**
- * Text align enum supported by compoent.
- * Allows to control text alignment if required.
- */
-export enum TextAlign {
-  LEFT,
-  CENTER,
-  RIGHT,
-}
-
-/**
- * Available text line height enum.
- * Should be used to control the line height of the text.
- */
-export enum TextLineHeight {
-  NONE,
-  TIGHT,
-  SNUG,
-  NORMAL,
-  RELAXED,
-  LOOSE,
-}

package/source/components/text/constants/type.ts

@@ -1,27 +0,0 @@
-/**
- * Supported specific text types enum.
- * Responsible for text appearance, accessibility and semantics.
- */
-export enum TextType {
-  H1,
-  H2,
-  H3,
-  H4,
-  H5,
-  H6,
-  P,
-}
-
-/**
- * Types, that are considered as heading types.
- * We convert them into heading text role.
- * This types comes with aria-level attribute.
- */
-export const TEXT_TYPE_HEADING = [
-  TextType.H1,
-  TextType.H2,
-  TextType.H3,
-  TextType.H4,
-  TextType.H5,
-  TextType.H6,
-]

package/source/components/text/index.ts

@@ -1,2 +0,0 @@
-export { Text } from './text'
-export type { TextComponent, TextProps } from './text.types'

package/source/components/text/spec/children.spec.tsx

@@ -1,13 +0,0 @@
-import { faker } from '@faker-js/faker'
-import { render, screen } from '@testing-library/react-native'
-import { Text } from '../text'
-
-describe('@/components/text', () => {
-  describe('children passing as property', () => {
-    it('renders provided string as a child', () => {
-      const text = faker.lorem.words(2)
-      render(<Text>{text}</Text>)
-      expect(screen.getByText(text)).toBeTruthy()
-    })
-  })
-})

package/source/components/text/spec/color.spec.native.tsx

@@ -1,15 +0,0 @@
-import { faker } from '@faker-js/faker'
-import { render, screen } from '@testing-library/react-native'
-import { Text } from '../text'
-
-describe('@/components/text', () => {
-  describe('color passing as property', () => {
-    it('renders with TRANSPARENT color', () => {
-      const text = faker.lorem.words(2)
-      render(<Text color={Text.Color.TRANSPARENT}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        color: 'transparent',
-      })
-    })
-  })
-})

package/source/components/text/spec/color.spec.tsx

@@ -1,159 +0,0 @@
-import { faker } from '@faker-js/faker'
-import { render, screen } from '@testing-library/react-native'
-import { Text } from '../text'
-
-describe('@/components/text', () => {
-  describe('color passing as property', () => {
-    it('renders with BASE_800 color by default', () => {
-      const text = faker.lorem.words(2)
-      render(<Text>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        color: 'rgb(39,39,42)',
-      })
-    })
-
-    it('renders with BASE_100 color', () => {
-      const text = faker.lorem.words(2)
-      render(<Text color={Text.Color.BASE_100}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        color: 'rgb(244,244,245)',
-      })
-    })
-
-    it('renders with BASE_200 color', () => {
-      const text = faker.lorem.words(2)
-      render(<Text color={Text.Color.BASE_200}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        color: 'rgb(228,228,231)',
-      })
-    })
-
-    it('renders with BASE_300 color', () => {
-      const text = faker.lorem.words(2)
-      render(<Text color={Text.Color.BASE_300}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        color: 'rgb(212,212,216)',
-      })
-    })
-
-    it('renders with BASE_400 color', () => {
-      const text = faker.lorem.words(2)
-      render(<Text color={Text.Color.BASE_400}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        color: 'rgb(159,159,169)',
-      })
-    })
-
-    it('renders with BASE_500 color', () => {
-      const text = faker.lorem.words(2)
-      render(<Text color={Text.Color.BASE_500}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        color: 'rgb(113,113,123)',
-      })
-    })
-
-    it('renders with BASE_600 color', () => {
-      const text = faker.lorem.words(2)
-      render(<Text color={Text.Color.BASE_600}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        color: 'rgb(82,82,92)',
-      })
-    })
-
-    it('renders with BASE_700 color', () => {
-      const text = faker.lorem.words(2)
-      render(<Text color={Text.Color.BASE_700}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        color: 'rgb(63,63,70)',
-      })
-    })
-
-    it('renders with BASE_800 color', () => {
-      const text = faker.lorem.words(2)
-      render(<Text color={Text.Color.BASE_800}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        color: 'rgb(39,39,42)',
-      })
-    })
-
-    it('renders with BASE_900 color', () => {
-      const text = faker.lorem.words(2)
-      render(<Text color={Text.Color.BASE_900}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        color: 'rgb(24,24,27)',
-      })
-    })
-
-    it('renders with INVERSE_100 color', () => {
-      const text = faker.lorem.words(2)
-      render(<Text color={Text.Color.INVERSE_100}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        color: 'rgb(24,24,27)',
-      })
-    })
-
-    it('renders with INVERSE_200 color', () => {
-      const text = faker.lorem.words(2)
-      render(<Text color={Text.Color.INVERSE_200}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        color: 'rgb(39,39,42)',
-      })
-    })
-
-    it('renders with INVERSE_300 color', () => {
-      const text = faker.lorem.words(2)
-      render(<Text color={Text.Color.INVERSE_300}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        color: 'rgb(63,63,70)',
-      })
-    })
-
-    it('renders with INVERSE_400 color', () => {
-      const text = faker.lorem.words(2)
-      render(<Text color={Text.Color.INVERSE_400}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        color: 'rgb(82,82,92)',
-      })
-    })
-
-    it('renders with INVERSE_500 color', () => {
-      const text = faker.lorem.words(2)
-      render(<Text color={Text.Color.INVERSE_500}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        color: 'rgb(113,113,123)',
-      })
-    })
-
-    it('renders with INVERSE_600 color', () => {
-      const text = faker.lorem.words(2)
-      render(<Text color={Text.Color.INVERSE_600}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        color: 'rgb(159,159,169)',
-      })
-    })
-
-    it('renders with INVERSE_700 color', () => {
-      const text = faker.lorem.words(2)
-      render(<Text color={Text.Color.INVERSE_700}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        color: 'rgb(212,212,216)',
-      })
-    })
-
-    it('renders with INVERSE_800 color', () => {
-      const text = faker.lorem.words(2)
-      render(<Text color={Text.Color.INVERSE_800}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        color: 'rgb(228,228,231)',
-      })
-    })
-
-    it('renders with INVERSE_900 color', () => {
-      const text = faker.lorem.words(2)
-      render(<Text color={Text.Color.INVERSE_900}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        color: 'rgb(244,244,245)',
-      })
-    })
-  })
-})

package/source/components/text/spec/color.spec.web.tsx

@@ -1,15 +0,0 @@
-import { faker } from '@faker-js/faker'
-import { render, screen } from '@testing-library/react-native'
-import { Text } from '../text'
-
-describe('@/components/text', () => {
-  describe('color passing as property', () => {
-    it('renders with TRANSPARENT color', () => {
-      const text = faker.lorem.words(2)
-      render(<Text color={Text.Color.TRANSPARENT}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        color: 'rgba(0,0,0,0)',
-      })
-    })
-  })
-})

package/source/components/text/spec/font.spec.tsx

@@ -1,196 +0,0 @@
-import { faker } from '@faker-js/faker'
-import { render, screen } from '@testing-library/react-native'
-import { Text } from '../text'
-
-describe('@/components/text', () => {
-  describe('font family passing as property', () => {
-    it('renders with base font family style by default', () => {
-      const text = faker.lorem.words(2)
-      render(<Text>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        fontFamily: [
-          'ui-sans-serif',
-          '-apple-system',
-          'BlinkMacSystemFont',
-          '"Segoe UI"',
-          'Roboto',
-          'Helvetica',
-          'Arial',
-          'sans-serif',
-        ].join(','),
-      })
-    })
-  })
-
-  describe('font weight passing as property', () => {
-    it('renders with REGULAR font weight style by default', () => {
-      const text = faker.lorem.words(2)
-      render(<Text>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        fontWeight: 400,
-      })
-    })
-
-    it('renders with THIN font weight style when provided', () => {
-      const text = faker.lorem.words(2)
-      render(<Text fontWeight={Text.FontWeight.THIN}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        fontWeight: 100,
-      })
-    })
-
-    it('renders with EXTRA_LIGHT font weight style when provided', () => {
-      const text = faker.lorem.words(2)
-      render(<Text fontWeight={Text.FontWeight.EXTRA_LIGHT}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        fontWeight: 200,
-      })
-    })
-
-    it('renders with LIGHT font weight style when provided', () => {
-      const text = faker.lorem.words(2)
-      render(<Text fontWeight={Text.FontWeight.LIGHT}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        fontWeight: 300,
-      })
-    })
-
-    it('renders with REGULAR font weight style when provided', () => {
-      const text = faker.lorem.words(2)
-      render(<Text fontWeight={Text.FontWeight.REGULAR}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        fontWeight: 400,
-      })
-    })
-
-    it('renders with MEDIUM font weight style when provided', () => {
-      const text = faker.lorem.words(2)
-      render(<Text fontWeight={Text.FontWeight.MEDIUM}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        fontWeight: 500,
-      })
-    })
-
-    it('renders with SEMIBOLD font weight style when provided', () => {
-      const text = faker.lorem.words(2)
-      render(<Text fontWeight={Text.FontWeight.SEMIBOLD}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        fontWeight: 600,
-      })
-    })
-
-    it('renders with BOLD font weight style when provided', () => {
-      const text = faker.lorem.words(2)
-      render(<Text fontWeight={Text.FontWeight.BOLD}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        fontWeight: 700,
-      })
-    })
-
-    it('renders with EXTRA_BOLD font weight style when provided', () => {
-      const text = faker.lorem.words(2)
-      render(<Text fontWeight={Text.FontWeight.EXTRA_BOLD}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        fontWeight: 800,
-      })
-    })
-
-    it('renders with BLACK font weight style when provided', () => {
-      const text = faker.lorem.words(2)
-      render(<Text fontWeight={Text.FontWeight.BLACK}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        fontWeight: 900,
-      })
-    })
-  })
-
-  describe('font size passing as property', () => {
-    it('renders with MD font size style by default', () => {
-      const text = faker.lorem.words(2)
-      render(<Text>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        fontSize: 18,
-      })
-    })
-
-    it('renders with X2S font size style when provided', () => {
-      const text = faker.lorem.words(2)
-      render(<Text fontSize={Text.FontSize.X2S}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        fontSize: 12,
-      })
-    })
-
-    it('renders with XS font size style when provided', () => {
-      const text = faker.lorem.words(2)
-      render(<Text fontSize={Text.FontSize.XS}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        fontSize: 14,
-      })
-    })
-
-    it('renders with SM font size style when provided', () => {
-      const text = faker.lorem.words(2)
-      render(<Text fontSize={Text.FontSize.SM}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        fontSize: 16,
-      })
-    })
-
-    it('renders with MD font size style when provided', () => {
-      const text = faker.lorem.words(2)
-      render(<Text fontSize={Text.FontSize.MD}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        fontSize: 18,
-      })
-    })
-
-    it('renders with LG font size style when provided', () => {
-      const text = faker.lorem.words(2)
-      render(<Text fontSize={Text.FontSize.LG}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        fontSize: 20,
-      })
-    })
-
-    it('renders with XL font size style when provided', () => {
-      const text = faker.lorem.words(2)
-      render(<Text fontSize={Text.FontSize.XL}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        fontSize: 24,
-      })
-    })
-
-    it('renders with X2L font size style when provided', () => {
-      const text = faker.lorem.words(2)
-      render(<Text fontSize={Text.FontSize.X2L}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        fontSize: 30,
-      })
-    })
-
-    it('renders with X3L font size style when provided', () => {
-      const text = faker.lorem.words(2)
-      render(<Text fontSize={Text.FontSize.X3L}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        fontSize: 36,
-      })
-    })
-
-    it('renders with X4L font size style when provided', () => {
-      const text = faker.lorem.words(2)
-      render(<Text fontSize={Text.FontSize.X4L}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        fontSize: 48,
-      })
-    })
-
-    it('renders with X5L font size style when provided', () => {
-      const text = faker.lorem.words(2)
-      render(<Text fontSize={Text.FontSize.X5L}>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        fontSize: 60,
-      })
-    })
-  })
-})

package/source/components/text/spec/position.spec.tsx

@@ -1,15 +0,0 @@
-import { faker } from '@faker-js/faker'
-import { render, screen } from '@testing-library/react-native'
-import { Text } from '../text'
-
-describe('@/components/text', () => {
-  describe('text position possible property', () => {
-    it('renders with static position by default', () => {
-      const text = faker.lorem.words(2)
-      render(<Text>{text}</Text>)
-      expect(screen.getByText(text)).toHaveStyle({
-        position: 'static',
-      })
-    })
-  })
-})