@tecsinapse/react-core 1.16.1 → 1.16.2

package/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.16.2](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.16.1...@tecsinapse/react-core@1.16.2) (2022-06-19)
+
+
+### Features
+
+* add capital option to text component ([56821ee](https://github.com/tecsinapse/design-system/commit/56821ee96eefc13a0b93d9b8b2d61af1be65e705))
+
+
+
+
+
 ## [1.16.1](https://github.com/tecsinapse/design-system/compare/@tecsinapse/react-core@1.16.0...@tecsinapse/react-core@1.16.1) (2022-05-24)
 
 **Note:** Version bump only for package @tecsinapse/react-core

package/dist/components/atoms/Text/Text.d.ts

@@ -10,6 +10,8 @@ export interface TextProps {
     colorTone?: ColorGradationType;
     numberOfLines?: number;
     ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
+    textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
+    capitalFirst?: boolean;
     style?: StyleProp<TextStyle>;
 }
 declare const Text: FC<TextProps>;

package/dist/components/atoms/Text/Text.js

@@ -7,6 +7,8 @@ var _react = _interopRequireDefault(require("react"));
 
 var _styled = require("./styled");
 
+var _functions = require("./functions");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
@@ -21,6 +23,8 @@ const Text = ({
   typography = 'base',
   numberOfLines,
   ellipsizeMode,
+  textTransform = 'none',
+  capitalFirst = false,
   ...rest
 }) => {
   return _react.default.createElement(_styled.StyledColoredText, _extends({}, rest, {
@@ -31,8 +35,9 @@ const Text = ({
     fontWeight: fontWeight,
     typography: typography,
     numberOfLines: numberOfLines,
-    ellipsizeMode: ellipsizeMode
-  }), children);
+    ellipsizeMode: ellipsizeMode,
+    textTransform: textTransform
+  }), (0, _functions.getLabel)(children, capitalFirst));
 };
 
 var _default = Text;

package/dist/components/atoms/Text/Text.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Text/Text.tsx"],"names":["Text","children","style","fontColor","colorTone","colorVariant","fontWeight","typography","numberOfLines","ellipsizeMode","rest"],"mappings":";;;;;AAAA;;AAUA;;;;;;AAqBA,MAAMA,IAAmB,GAAG,CAAC;AAC3BC,EAAAA,QAD2B;AAE3BC,EAAAA,KAF2B;AAG3BC,EAAAA,SAAS,GAAG,MAHe;AAI3BC,EAAAA,SAAS,GAAG,QAJe;AAK3BC,EAAAA,YAL2B;AAM3BC,EAAAA,UAAU,GAAG,SANc;AAO3BC,EAAAA,UAAU,GAAG,MAPc;AAQ3BC,EAAAA,aAR2B;AAS3BC,EAAAA,aAT2B;AAU3B,KAAGC;AAVwB,CAAD,KAWT;AACjB,SACE,6BAAC,yBAAD,eACMA,IADN;AAEE,IAAA,KAAK,EAAER,KAFT;AAGE,IAAA,SAAS,EAAEC,SAHb;AAIE,IAAA,SAAS,EAAEC,SAJb;AAKE,IAAA,YAAY,EAAEC,YALhB;AAME,IAAA,UAAU,EAAEC,UANd;AAOE,IAAA,UAAU,EAAEC,UAPd;AAQE,IAAA,aAAa,EAAEC,aARjB;AASE,IAAA,aAAa,EAAEC;AATjB,MAWGR,QAXH,CADF;AAeD,CA3BD;;eA6BeD,I","sourcesContent":["import React, { FC } from 'react';\nimport {\n  ColorGradationType,\n  ColorType,\n  FontColorType,\n  FontStackType,\n  FontWeightType,\n  TypographyVariationType,\n} from '@tecsinapse/react-core';\nimport { StyleProp, TextStyle } from 'react-native';\nimport { StyledColoredText } from './styled';\n\nexport interface TextProps {\n  /** Font theme text color */\n  fontColor?: FontColorType;\n  /** Font theme weight */\n  fontWeight?: FontWeightType;\n  /** Font theme sizes */\n  typography?: TypographyVariationType;\n  /** Font theme stack */\n  fontStack?: FontStackType;\n  /** Palette theme colors. You can specify this prop to override theme fontColor */\n  colorVariant?: ColorType;\n  /** Palette theme colors gradation */\n  colorTone?: ColorGradationType;\n  numberOfLines?: number;\n  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';\n  style?: StyleProp<TextStyle>;\n}\n\n/** NOTE: When using colors, be careful to not override fontColor by using colorVariant and colorTone, referent to theme colors and not text colors. */\nconst Text: FC<TextProps> = ({\n  children,\n  style,\n  fontColor = 'dark',\n  colorTone = 'medium',\n  colorVariant,\n  fontWeight = 'regular',\n  typography = 'base',\n  numberOfLines,\n  ellipsizeMode,\n  ...rest\n}): JSX.Element => {\n  return (\n    <StyledColoredText\n      {...rest}\n      style={style}\n      fontColor={fontColor}\n      colorTone={colorTone}\n      colorVariant={colorVariant}\n      fontWeight={fontWeight}\n      typography={typography}\n      numberOfLines={numberOfLines}\n      ellipsizeMode={ellipsizeMode}\n    >\n      {children}\n    </StyledColoredText>\n  );\n};\n\nexport default Text;\n"],"file":"Text.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Text/Text.tsx"],"names":["Text","children","style","fontColor","colorTone","colorVariant","fontWeight","typography","numberOfLines","ellipsizeMode","textTransform","capitalFirst","rest"],"mappings":";;;;;AAAA;;AAUA;;AACA;;;;;;AAuBA,MAAMA,IAAmB,GAAG,CAAC;AAC3BC,EAAAA,QAD2B;AAE3BC,EAAAA,KAF2B;AAG3BC,EAAAA,SAAS,GAAG,MAHe;AAI3BC,EAAAA,SAAS,GAAG,QAJe;AAK3BC,EAAAA,YAL2B;AAM3BC,EAAAA,UAAU,GAAG,SANc;AAO3BC,EAAAA,UAAU,GAAG,MAPc;AAQ3BC,EAAAA,aAR2B;AAS3BC,EAAAA,aAT2B;AAU3BC,EAAAA,aAAa,GAAG,MAVW;AAW3BC,EAAAA,YAAY,GAAG,KAXY;AAY3B,KAAGC;AAZwB,CAAD,KAaT;AACjB,SACE,6BAAC,yBAAD,eACMA,IADN;AAEE,IAAA,KAAK,EAAEV,KAFT;AAGE,IAAA,SAAS,EAAEC,SAHb;AAIE,IAAA,SAAS,EAAEC,SAJb;AAKE,IAAA,YAAY,EAAEC,YALhB;AAME,IAAA,UAAU,EAAEC,UANd;AAOE,IAAA,UAAU,EAAEC,UAPd;AAQE,IAAA,aAAa,EAAEC,aARjB;AASE,IAAA,aAAa,EAAEC,aATjB;AAUE,IAAA,aAAa,EAAEC;AAVjB,MAYG,yBAAST,QAAT,EAAmBU,YAAnB,CAZH,CADF;AAgBD,CA9BD;;eAgCeX,I","sourcesContent":["import React, { FC } from 'react';\nimport {\n  ColorGradationType,\n  ColorType,\n  FontColorType,\n  FontStackType,\n  FontWeightType,\n  TypographyVariationType,\n} from '@tecsinapse/react-core';\nimport { StyleProp, TextStyle } from 'react-native';\nimport { StyledColoredText } from './styled';\nimport { getLabel } from './functions';\n\nexport interface TextProps {\n  /** Font theme text color */\n  fontColor?: FontColorType;\n  /** Font theme weight */\n  fontWeight?: FontWeightType;\n  /** Font theme sizes */\n  typography?: TypographyVariationType;\n  /** Font theme stack */\n  fontStack?: FontStackType;\n  /** Palette theme colors. You can specify this prop to override theme fontColor */\n  colorVariant?: ColorType;\n  /** Palette theme colors gradation */\n  colorTone?: ColorGradationType;\n  numberOfLines?: number;\n  ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';\n  textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';\n  capitalFirst?: boolean;\n  style?: StyleProp<TextStyle>;\n}\n\n/** NOTE: When using colors, be careful to not override fontColor by using colorVariant and colorTone, referent to theme colors and not text colors. */\nconst Text: FC<TextProps> = ({\n  children,\n  style,\n  fontColor = 'dark',\n  colorTone = 'medium',\n  colorVariant,\n  fontWeight = 'regular',\n  typography = 'base',\n  numberOfLines,\n  ellipsizeMode,\n  textTransform = 'none',\n  capitalFirst = false,\n  ...rest\n}): JSX.Element => {\n  return (\n    <StyledColoredText\n      {...rest}\n      style={style}\n      fontColor={fontColor}\n      colorTone={colorTone}\n      colorVariant={colorVariant}\n      fontWeight={fontWeight}\n      typography={typography}\n      numberOfLines={numberOfLines}\n      ellipsizeMode={ellipsizeMode}\n      textTransform={textTransform}\n    >\n      {getLabel(children, capitalFirst)}\n    </StyledColoredText>\n  );\n};\n\nexport default Text;\n"],"file":"Text.js"}

package/dist/components/atoms/Text/functions.d.ts

@@ -0,0 +1,2 @@
+export declare const getFirstCapitalCharacter: (value: string) => string;
+export declare const getLabel: (children: any, capitalFirst: boolean) => any;

package/dist/components/atoms/Text/functions.js

@@ -0,0 +1,13 @@
+"use strict";
+
+exports.__esModule = true;
+exports.getLabel = exports.getFirstCapitalCharacter = void 0;
+
+const getFirstCapitalCharacter = value => value.charAt(0).toUpperCase().concat(value.slice(1));
+
+exports.getFirstCapitalCharacter = getFirstCapitalCharacter;
+
+const getLabel = (children, capitalFirst) => typeof children === 'string' && capitalFirst ? getFirstCapitalCharacter(children) : children;
+
+exports.getLabel = getLabel;
+//# sourceMappingURL=functions.js.map

package/dist/components/atoms/Text/functions.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../src/components/atoms/Text/functions.ts"],"names":["getFirstCapitalCharacter","value","charAt","toUpperCase","concat","slice","getLabel","children","capitalFirst"],"mappings":";;;;;AAAO,MAAMA,wBAAwB,GAAIC,KAAD,IACtCA,KAAK,CAACC,MAAN,CAAa,CAAb,EAAgBC,WAAhB,GAA8BC,MAA9B,CAAqCH,KAAK,CAACI,KAAN,CAAY,CAAZ,CAArC,CADK;;;;AAIA,MAAMC,QAAQ,GAAG,CAACC,QAAD,EAAWC,YAAX,KACtB,OAAOD,QAAP,KAAoB,QAApB,IAAgCC,YAAhC,GACIR,wBAAwB,CAACO,QAAD,CAD5B,GAEIA,QAHC","sourcesContent":["export const getFirstCapitalCharacter = (value: string): string =>\n  value.charAt(0).toUpperCase().concat(value.slice(1));\n\n// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types\nexport const getLabel = (children, capitalFirst: boolean) =>\n  typeof children === 'string' && capitalFirst\n    ? getFirstCapitalCharacter(children)\n    : children;\n"],"file":"functions.js"}

package/dist/components/atoms/Text/styled.js

@@ -32,6 +32,9 @@ const StyledText = (0, _native.default)(_reactNative.Text)`
   theme,
   fontStack = 'default'
 }) => `'${theme.font.stack[fontStack]}'`};
+  text-transform: ${({
+  textTransform = 'none'
+}) => `${textTransform}`};
 `;
 exports.StyledText = StyledText;
 

package/dist/components/atoms/Text/styled.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../src/components/atoms/Text/styled.ts"],"names":["StyledText","RNText","theme","fontColor","font","color","fontWeight","weight","typography","fontSize","lineHeight","fontStack","stack","colorStyles","colorVariant","colorTone","StyledColoredText"],"mappings":";;;;;AAAA;;AAEA;;;;;;AAEO,MAAMA,UAAU,GAAG,qBAAOC,iBAAP,CAAgD;AAC1E,WAAW,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA,SAAS,GAAG;AAArB,CAAD,KAAmCD,KAAK,CAACE,IAAN,CAAWC,KAAX,CAAiBF,SAAjB,CAA4B;AAC1E,iBAAiB,CAAC;AAAED,EAAAA,KAAF;AAASI,EAAAA,UAAU,GAAG;AAAtB,CAAD,KACbJ,KAAK,CAACE,IAAN,CAAWG,MAAX,CAAkBD,UAAlB,CAA8B;AAClC,eAAe,CAAC;AAAEJ,EAAAA,KAAF;AAASM,EAAAA,UAAU,GAAG;AAAtB,CAAD,KACXN,KAAK,CAACM,UAAN,CAAiBA,UAAjB,EAA6BC,QAAS;AAC1C,iBAAiB,CAAC;AAAEP,EAAAA,KAAF;AAASM,EAAAA,UAAU,GAAG;AAAtB,CAAD,KACbN,KAAK,CAACM,UAAN,CAAiBA,UAAjB,EAA6BE,UAAW;AAC5C,iBAAiB,CAAC;AAAER,EAAAA,KAAF;AAASS,EAAAA,SAAS,GAAG;AAArB,CAAD,KACZ,IAAGT,KAAK,CAACE,IAAN,CAAWQ,KAAX,CAAiBD,SAAjB,CAA4B,GAAG;AACvC,CAVO;;;AAYP,MAAME,WAAW,GAAG,CAAC;AACnBC,EAAAA,YADmB;AAEnBC,EAAAA,SAFmB;AAGnBb,EAAAA;AAHmB,CAAD,KAKlBY,YAAY,IACZC,SADA,IAEA,gBAAI;AACN,aAAab,KAAK,CAACG,KAAN,CAAYS,YAAZ,EAA0BC,SAA1B,CAAqC;AAClD,GATA;;AAWO,MAAMC,iBAAiB,GAAG,qBAAOhB,UAAP,EAE/Ba,WAF+B,CAA1B","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { StyleProps, TextProps } from '@tecsinapse/react-core';\nimport { Text as RNText } from 'react-native';\n\nexport const StyledText = styled(RNText)<TextProps & Partial<StyleProps>>`\n  color: ${({ theme, fontColor = 'dark' }) => theme.font.color[fontColor]};\n  font-weight: ${({ theme, fontWeight = 'regular' }) =>\n    theme.font.weight[fontWeight]};\n  font-size: ${({ theme, typography = 'base' }) =>\n    theme.typography[typography].fontSize};\n  line-height: ${({ theme, typography = 'base' }) =>\n    theme.typography[typography].lineHeight};\n  font-family: ${({ theme, fontStack = 'default' }) =>\n    `'${theme.font.stack[fontStack]}'`};\n`;\n\nconst colorStyles = ({\n  colorVariant,\n  colorTone,\n  theme,\n}: TextProps & StyleProps) =>\n  colorVariant &&\n  colorTone &&\n  css`\n    color: ${theme.color[colorVariant][colorTone]};\n  `;\n\nexport const StyledColoredText = styled(StyledText)<\n  TextProps & Partial<StyleProps>\n>(colorStyles);\n"],"file":"styled.js"}
+{"version":3,"sources":["../../../../src/components/atoms/Text/styled.ts"],"names":["StyledText","RNText","theme","fontColor","font","color","fontWeight","weight","typography","fontSize","lineHeight","fontStack","stack","textTransform","colorStyles","colorVariant","colorTone","StyledColoredText"],"mappings":";;;;;AAAA;;AAEA;;;;;;AAEO,MAAMA,UAAU,GAAG,qBAAOC,iBAAP,CAAgD;AAC1E,WAAW,CAAC;AAAEC,EAAAA,KAAF;AAASC,EAAAA,SAAS,GAAG;AAArB,CAAD,KAAmCD,KAAK,CAACE,IAAN,CAAWC,KAAX,CAAiBF,SAAjB,CAA4B;AAC1E,iBAAiB,CAAC;AAAED,EAAAA,KAAF;AAASI,EAAAA,UAAU,GAAG;AAAtB,CAAD,KACbJ,KAAK,CAACE,IAAN,CAAWG,MAAX,CAAkBD,UAAlB,CAA8B;AAClC,eAAe,CAAC;AAAEJ,EAAAA,KAAF;AAASM,EAAAA,UAAU,GAAG;AAAtB,CAAD,KACXN,KAAK,CAACM,UAAN,CAAiBA,UAAjB,EAA6BC,QAAS;AAC1C,iBAAiB,CAAC;AAAEP,EAAAA,KAAF;AAASM,EAAAA,UAAU,GAAG;AAAtB,CAAD,KACbN,KAAK,CAACM,UAAN,CAAiBA,UAAjB,EAA6BE,UAAW;AAC5C,iBAAiB,CAAC;AAAER,EAAAA,KAAF;AAASS,EAAAA,SAAS,GAAG;AAArB,CAAD,KACZ,IAAGT,KAAK,CAACE,IAAN,CAAWQ,KAAX,CAAiBD,SAAjB,CAA4B,GAAG;AACvC,oBAAoB,CAAC;AAAEE,EAAAA,aAAa,GAAG;AAAlB,CAAD,KAAiC,GAAEA,aAAc,EAAE;AACvE,CAXO;;;AAaP,MAAMC,WAAW,GAAG,CAAC;AACnBC,EAAAA,YADmB;AAEnBC,EAAAA,SAFmB;AAGnBd,EAAAA;AAHmB,CAAD,KAKlBa,YAAY,IACZC,SADA,IAEA,gBAAI;AACN,aAAad,KAAK,CAACG,KAAN,CAAYU,YAAZ,EAA0BC,SAA1B,CAAqC;AAClD,GATA;;AAWO,MAAMC,iBAAiB,GAAG,qBAAOjB,UAAP,EAE/Bc,WAF+B,CAA1B","sourcesContent":["import styled, { css } from '@emotion/native';\nimport { StyleProps, TextProps } from '@tecsinapse/react-core';\nimport { Text as RNText } from 'react-native';\n\nexport const StyledText = styled(RNText)<TextProps & Partial<StyleProps>>`\n  color: ${({ theme, fontColor = 'dark' }) => theme.font.color[fontColor]};\n  font-weight: ${({ theme, fontWeight = 'regular' }) =>\n    theme.font.weight[fontWeight]};\n  font-size: ${({ theme, typography = 'base' }) =>\n    theme.typography[typography].fontSize};\n  line-height: ${({ theme, typography = 'base' }) =>\n    theme.typography[typography].lineHeight};\n  font-family: ${({ theme, fontStack = 'default' }) =>\n    `'${theme.font.stack[fontStack]}'`};\n  text-transform: ${({ textTransform = 'none' }) => `${textTransform}`};\n`;\n\nconst colorStyles = ({\n  colorVariant,\n  colorTone,\n  theme,\n}: TextProps & StyleProps) =>\n  colorVariant &&\n  colorTone &&\n  css`\n    color: ${theme.color[colorVariant][colorTone]};\n  `;\n\nexport const StyledColoredText = styled(StyledText)<\n  TextProps & Partial<StyleProps>\n>(colorStyles);\n"],"file":"styled.js"}

package/dist/types/defaults.d.ts

@@ -1,3 +1,4 @@
+/// <reference types="react" />
 export declare type Color = {
     primary: ColorGradation;
     secondary: ColorGradation;
@@ -111,6 +112,7 @@ export declare type ThemeProp = {
     zIndex: ZIndex;
 };
 export interface ThemeProviderProps {
+    children?: React.ReactNode;
     theme: ThemeProp;
 }
 export declare type StyleProps = ThemeProviderProps;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@tecsinapse/react-core",
   "description": "TecSinapse hybrid React components",
-  "version": "1.16.1",
+  "version": "1.16.2",
   "license": "MIT",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -31,5 +31,5 @@
     "react-native": "^0.64.0",
     "react-native-vector-icons": "^8.1.0 || ^9.0.0"
   },
-  "gitHead": "f4d635a35883748ec2594557606c00e2822a1ad6"
+  "gitHead": "0935a2a1210e341648136e3247ec54c41815142f"
 }

package/src/components/atoms/Text/Text.tsx

@@ -9,6 +9,7 @@ import {
 } from '@tecsinapse/react-core';
 import { StyleProp, TextStyle } from 'react-native';
 import { StyledColoredText } from './styled';
+import { getLabel } from './functions';
 
 export interface TextProps {
   /** Font theme text color */
@@ -25,6 +26,8 @@ export interface TextProps {
   colorTone?: ColorGradationType;
   numberOfLines?: number;
   ellipsizeMode?: 'head' | 'middle' | 'tail' | 'clip';
+  textTransform?: 'none' | 'uppercase' | 'lowercase' | 'capitalize';
+  capitalFirst?: boolean;
   style?: StyleProp<TextStyle>;
 }
 
@@ -39,6 +42,8 @@ const Text: FC<TextProps> = ({
   typography = 'base',
   numberOfLines,
   ellipsizeMode,
+  textTransform = 'none',
+  capitalFirst = false,
   ...rest
 }): JSX.Element => {
   return (
@@ -52,8 +57,9 @@ const Text: FC<TextProps> = ({
       typography={typography}
       numberOfLines={numberOfLines}
       ellipsizeMode={ellipsizeMode}
+      textTransform={textTransform}
     >
-      {children}
+      {getLabel(children, capitalFirst)}
     </StyledColoredText>
   );
 };

package/src/components/atoms/Text/functions.ts

@@ -0,0 +1,8 @@
+export const getFirstCapitalCharacter = (value: string): string =>
+  value.charAt(0).toUpperCase().concat(value.slice(1));
+
+// eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
+export const getLabel = (children, capitalFirst: boolean) =>
+  typeof children === 'string' && capitalFirst
+    ? getFirstCapitalCharacter(children)
+    : children;

package/src/components/atoms/Text/styled.ts

@@ -12,6 +12,7 @@ export const StyledText = styled(RNText)<TextProps & Partial<StyleProps>>`
     theme.typography[typography].lineHeight};
   font-family: ${({ theme, fontStack = 'default' }) =>
     `'${theme.font.stack[fontStack]}'`};
+  text-transform: ${({ textTransform = 'none' }) => `${textTransform}`};
 `;
 
 const colorStyles = ({

package/src/types/defaults.ts

@@ -125,6 +125,7 @@ export type ThemeProp = {
 };
 
 export interface ThemeProviderProps {
+  children?: React.ReactNode;
   theme: ThemeProp;
 }