@tecsinapse/react-charts 0.1.0 → 1.3.0

package/LICENSE.md

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021 TecSinapse
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,78 @@
+<div align="center">
+
+# TecSinapse Design System
+
+[![Stars](https://img.shields.io/github/stars/tecsinapse/design-system?style=social)](https://github.com/tecsinapse/design-system/) [![License](https://img.shields.io/github/license/tecsinapse/design-system)](./LICENSE.md) [![Contributor Covenant](https://img.shields.io/badge/Contributor%20Covenant-2.0-4baaaa.svg)](CODE_OF_CONDUCT.md)![build workflow](https://github.com/tecsinapse/design-system/actions/workflows/ci.yml/badge.svg)
+
+
+[TecSinapse Design System](https://tecsinapse.github.io/design-system) is the hybrid implementation of the [TecSinapse](https://www.tecsinapse.com.br/) Design System. 
+Our primary goal is to create a system that can be used to build a wide variety of TecSinapase websites and apps, while providing a consistent and inclusive user experience to our end users.
+In addition, the design system and component library should be easy to use for developers and designers.
+
+</div>
+
+## Quick start
+
+Here are a few helpful links for getting started:
+
+- [Documentation](https://tecsinapse.github.io/design-system) - Learn how to use and view the components in Storybook.
+- [Getting started](https://tecsinapse.github.io/design-system/?path=/docs/introduction-getting-started--page) - Set up a new app with our DS or add it to an existing project.
+- [Design Principles](https://tecsinapse.github.io/design-system/?path=/docs/introduction-design-principles--page) - Discover the guiding principles behind design.
+- [Theming](https://tecsinapse.github.io/design-system/?path=/docs/advanced-theme--page) - Learn about our foundations such as colors, spacing, and typography.
+- [Contribute](https://tecsinapse.github.io/design-system/?path=/docs/introduction-contributing--page) - File a bug report, suggest a change, or open a pull request.
+
+## Packages
+
+| Package                                                         | Content                                              | Version                                                                                                                                    |
+|-----------------------------------------------------------------|------------------------------------------------------|--------------------------------------------------------------------------------------------------------------------------------------------|
+| **[@tecsinapse/react-core](./packages/react-core)**             | the core hybrid React component library              | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-core.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-core)             |
+| **[@tecsinapse/react-web-kit](./packages/react-web-kit)**       | the React component library focused on web           | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-web-kit.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-web-kit)       |
+| **[@tecsinapse/react-native-kit](./packages/react-native-kit)** | the React native component library focused on mobile | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-native-kit.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-native-kit) |
+| **[@tecsinapse/react-charts](./packages/react-charts)**         | Charts for React based on SVG                        | [![npm version](https://badge.fury.io/js/%40tecsinapse%2Freact-charts.svg)](https://badge.fury.io/js/%40tecsinapse%2Freact-charts)         |
+
+## Code of conduct
+
+We want to foster an inclusive and friendly community around our Open Source efforts. This project follows the Contributor Covenant Code of Conduct. Please, [read it and follow it](./CODE_OF_CONDUCT.md).
+
+If you feel another member of the community violated our code or you are experiencing problems participating in our community because of another individual's behavior, please get in touch with our maintainers.
+
+## How to make local changes available for other projects?
+
+At times, it may be necessary to test changes directly in a product, and not in the design system, and for this to work in a less laborious way, we can follow the steps below:
+
+3 terminal tabs should open:
+- In one run the JS code watch:
+```
+yarn build:watch
+```
+- In another run the watch of the TS code watch
+```
+yarn build:declarations:watch
+```
+- On another run yalc push (this script updates linked local projects)
+```
+yarn yalc:push
+```
+
+With that, all changes will be in yalc locally.
+
+To access in your application, see this [example](https://github.com/tecsinapse/vendas-web-poc-playground#tools) in topic "**Yalc link Design System:**"
+
+
+### Maintainers
+
+- [Beatriz Silva](mailto:beatriz.silva@tecsinapse.com.br)
+- [Denner Vidal](mailto:denner.vidal@tecsinapse.com.br)
+- [Gabriel Sanches](mailto:gabriel.sanches@tecsinapse.com.br)
+- [Lucas Ramos](mailto:lucas.ramos@tecsinapse.com.br)
+- [Nilson Antonio](mailto:nilson.antonio@tecsinapse.com.br)
+- [Ryan Correa](mailto:ryan.correa@tecsinapse.com.br)
+
+## Contributing
+
+If you have ideas for how we could improve this readme or the project in general, [let us know](https://github.com/tecsinapse/design-system/issues)!
+
+## About TecSinapse
+
+[TecSinapse](https://www.tecsinapse.com.br/) is a specialist in the automotive industry for over 15 years.
+We operate with diverse integrated solutions, from client prospecting to after-sales, plus market indicators tools and process improvement for complete management.

package/dist/cjs/components/Dot/Dot.js

@@ -0,0 +1,10 @@
+'use strict';
+
+var React = require('react');
+var styled = require('./styled.js');
+
+const Dot = ({ color }) => {
+  return /* @__PURE__ */ React.createElement(styled.Circle, { color }, /* @__PURE__ */ React.createElement(styled.CircleDot, null));
+};
+
+module.exports = Dot;

package/dist/cjs/components/Dot/styled.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var styled = require('@emotion/native');
+var reactNative = require('react-native');
+var constants = require('../../styles/constants.js');
+
+const Circle = styled(reactNative.View)`
+  background-color: ${({ color }) => color};
+  width: ${constants.iconSize.micro};
+  height: ${constants.iconSize.micro};
+  border-radius: ${constants.borderRadius.pill};
+  justify-content: center;
+  align-items: center;
+  margin-right: ${constants.spacing.centi};
+`;
+const CircleDot = styled(reactNative.View)`
+  background-color: #fff;
+  width: 4px;
+  height: 4px;
+  border-radius: ${constants.borderRadius.pill};
+`;
+
+exports.Circle = Circle;
+exports.CircleDot = CircleDot;

package/dist/cjs/components/Label/Label.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var React = require('react');
+var Dot = require('../Dot/Dot.js');
+var styled = require('./styled.js');
+var functions = require('../../styles/functions.js');
+
+const Label = ({ columns, data, chartConfig }) => {
+  const valueFont = functions.getFontFamilyAndWeight(chartConfig?.fontFamily, "bold");
+  const labelFont = functions.getFontFamilyAndWeight(chartConfig?.fontFamily, "regular");
+  return /* @__PURE__ */ React.createElement(styled.Container, { columns }, /* @__PURE__ */ React.createElement(Dot, { color: data.color }), /* @__PURE__ */ React.createElement(styled.Text, { font: labelFont, expand: true }, data.label), /* @__PURE__ */ React.createElement(styled.Text, { font: valueFont, flexEnd: true }, data.value));
+};
+
+module.exports = Label;

package/dist/cjs/components/Label/styled.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var styled = require('@emotion/native');
+var reactNative = require('react-native');
+var constants = require('../../styles/constants.js');
+
+const flexBasis = (columns) => styled.css({ flexBasis: `${100 / columns - 2}%` });
+const Container = styled(reactNative.View)(
+  ({ columns }) => styled.css`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: ${constants.spacing.centi};
+    ${flexBasis(columns)}
+  `
+);
+const expandStyles = (expand) => expand && styled.css`
+    flex: 1;
+  `;
+const flexEndStyles = (flexEnd) => flexEnd && styled.css`
+    justify-content: flex-end;
+  `;
+const Text = styled(reactNative.Text)(({ font, expand = false, flexEnd = false }) => {
+  const { fontFamily, fontWeight } = font;
+  return styled.css`
+    font-size: 14px;
+    font-family: ${fontFamily};
+    font-weight: ${fontWeight};
+    ${expandStyles(expand)}
+    ${flexEndStyles(flexEnd)}
+  `;
+});
+
+exports.Container = Container;
+exports.Text = Text;

package/dist/cjs/components/PieChart/PieChart.js

@@ -0,0 +1,95 @@
+'use strict';
+
+var reactNativeSvg = require('react-native-svg');
+var React = require('react');
+var reactNativeSvgCharts = require('react-native-svg-charts');
+var Label = require('../Label/Label.js');
+var functions = require('./functions.js');
+var styled = require('./styled.js');
+
+const PieChart = ({
+  data,
+  dimension = 200,
+  radius = 32,
+  label,
+  sub,
+  labelProps,
+  subProps,
+  columns = 1,
+  chartConfig
+}) => {
+  const inner = 90 - radius * 100 / (dimension / 2);
+  const chart = data.map((item, index) => ({
+    value: item.value,
+    svg: {
+      fill: item.color,
+      ...functions.getCallback(item.value, item.label, item.onPress)
+    },
+    ...functions.getFeatured(item.featured ?? false),
+    key: `pie-${index}`
+  }));
+  const sum = data.reduce((prev, curr) => prev + curr.value, 0);
+  const {
+    textAnchor,
+    alignmentBaseline,
+    fontSize = 32,
+    fontWeight,
+    fontFamily,
+    fill,
+    y = sub ? -5 : void 0
+  } = functions.getTextStyles(labelProps, "bold", chartConfig);
+  const {
+    textAnchor: textAnchorSub,
+    alignmentBaseline: alignmentBaselineSub,
+    fontSize: fontSizeSub = 14,
+    fontWeight: fontWeightSub,
+    fontFamily: fontFamilySub,
+    fill: fillSub,
+    y: ySub = 16
+  } = functions.getTextStyles(subProps, "bold", chartConfig);
+  return /* @__PURE__ */ React.createElement(styled.Container, null, /* @__PURE__ */ React.createElement(
+    reactNativeSvgCharts.PieChart,
+    {
+      style: { width: dimension, height: dimension, flex: 1 },
+      data: chart,
+      padAngle: 0,
+      innerRadius: `${inner}%`
+    },
+    /* @__PURE__ */ React.createElement(
+      reactNativeSvg.Text,
+      {
+        textAnchor,
+        alignmentBaseline,
+        fontSize,
+        fontWeight,
+        fontFamily,
+        fill,
+        y
+      },
+      label ?? sum
+    ),
+    sub && /* @__PURE__ */ React.createElement(
+      reactNativeSvg.Text,
+      {
+        textAnchor: textAnchorSub,
+        alignmentBaseline: alignmentBaselineSub,
+        fontSize: fontSizeSub,
+        fontWeight: fontWeightSub,
+        fontFamily: fontFamilySub,
+        fill: fillSub,
+        y: ySub
+      },
+      sub
+    )
+  ), /* @__PURE__ */ React.createElement(styled.LabelsContainer, null, data.map((item) => /* @__PURE__ */ React.createElement(
+    Label,
+    {
+      data: item,
+      columns,
+      key: item.label,
+      chartConfig
+    }
+  ))));
+};
+
+module.exports = PieChart;

package/dist/cjs/components/PieChart/functions.js

@@ -0,0 +1,42 @@
+'use strict';
+
+var reactNative = require('react-native');
+var constants = require('../../styles/constants.js');
+var functions = require('../../styles/functions.js');
+
+const getCallback = (value, label, fn) => {
+  if (!fn)
+    return {};
+  return reactNative.Platform.OS === "web" ? {
+    onClick: () => fn?.(value, label)
+  } : {
+    onPress: () => fn?.(value, label)
+  };
+};
+const getFeatured = (featured) => ({
+  arc: { outerRadius: featured ? "100%" : "90%" }
+});
+const getTextStyles = (styles, defaultFontWeight, chartConfig) => {
+  const {
+    textAnchor = "middle",
+    alignmentBaseline = "middle",
+    fontSize,
+    fill = constants.fontColor.dark,
+    y
+  } = styles || {};
+  return {
+    textAnchor,
+    alignmentBaseline,
+    fontSize,
+    fill,
+    y,
+    ...functions.getFontFamilyAndWeight(
+      chartConfig?.fontFamily,
+      styles?.fontWeight ?? defaultFontWeight
+    )
+  };
+};
+
+exports.getCallback = getCallback;
+exports.getFeatured = getFeatured;
+exports.getTextStyles = getTextStyles;

package/dist/cjs/components/PieChart/styled.js

@@ -0,0 +1,22 @@
+'use strict';
+
+var styled = require('@emotion/native');
+var reactNative = require('react-native');
+
+const Container = styled(reactNative.View)`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: space-between;
+  flex: 1;
+`;
+const LabelsContainer = styled(reactNative.View)`
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  width: 100%;
+`;
+
+exports.Container = Container;
+exports.LabelsContainer = LabelsContainer;

package/dist/cjs/index.js

@@ -0,0 +1,17 @@
+'use strict';
+
+var PieChart = require('./components/PieChart/PieChart.js');
+var constants = require('./styles/constants.js');
+var functions = require('./styles/functions.js');
+
+
+
+exports.PieChart = PieChart;
+exports.borderRadius = constants.borderRadius;
+exports.fontColor = constants.fontColor;
+exports.fontStack = constants.fontStack;
+exports.fontWeight = constants.fontWeight;
+exports.iconSize = constants.iconSize;
+exports.nativeFontStack = constants.nativeFontStack;
+exports.spacing = constants.spacing;
+exports.getFontFamilyAndWeight = functions.getFontFamilyAndWeight;

package/dist/cjs/styles/constants.js

@@ -0,0 +1,65 @@
+'use strict';
+
+const fontColor = {
+  light: "#fff",
+  medium: "#85807a",
+  dark: "#353231",
+  // default
+  orange: "#f89907"
+};
+const spacing = {
+  nano: "2px",
+  micro: "4px",
+  mili: "8px",
+  centi: "12px",
+  deca: "16px",
+  kilo: "24px",
+  mega: "32px",
+  giga: "40px",
+  tera: "48px",
+  peta: "56px",
+  hexa: "64px"
+};
+const iconSize = {
+  micro: "12px",
+  mili: "14px",
+  centi: "16px",
+  // '1rem'
+  deca: "18px",
+  // '1.5rem'
+  kilo: "24px",
+  // '1.6rem'
+  mega: "32px"
+  // '2rem'
+};
+const borderRadius = {
+  nano: "2px",
+  micro: "4px",
+  mili: "8px",
+  centi: "16px",
+  deca: "24px",
+  pill: "999999px"
+  // also circle
+};
+const fontStack = {
+  default: "Lato",
+  mono: "Consolas, monaco, monospace"
+};
+const fontWeight = {
+  regular: "400",
+  bold: "700",
+  black: "900"
+};
+const nativeFontStack = {
+  black: "Lato-Black",
+  bold: "Lato-Bold",
+  regular: "Lato-Regular"
+};
+
+exports.borderRadius = borderRadius;
+exports.fontColor = fontColor;
+exports.fontStack = fontStack;
+exports.fontWeight = fontWeight;
+exports.iconSize = iconSize;
+exports.nativeFontStack = nativeFontStack;
+exports.spacing = spacing;

package/dist/cjs/styles/functions.js

@@ -0,0 +1,14 @@
+'use strict';
+
+var reactNative = require('react-native');
+var constants = require('./constants.js');
+
+const getFontFamilyAndWeight = (fontFamily, weight) => reactNative.Platform.OS === "web" ? {
+  fontFamily: fontFamily ? fontFamily[weight] : constants.fontStack.default,
+  fontWeight: constants.fontWeight[weight]
+} : {
+  fontFamily: fontFamily ? fontFamily[weight] : constants.nativeFontStack[weight],
+  fontWeight: constants.fontWeight[weight]
+};
+
+exports.getFontFamilyAndWeight = getFontFamilyAndWeight;

package/dist/esm/components/Dot/Dot.js

@@ -0,0 +1,8 @@
+import React from 'react';
+import { Circle, CircleDot } from './styled.js';
+
+const Dot = ({ color }) => {
+  return /* @__PURE__ */ React.createElement(Circle, { color }, /* @__PURE__ */ React.createElement(CircleDot, null));
+};
+
+export { Dot as default };

package/{src/components/Dot/styled.ts → dist/esm/components/Dot/styled.js}

@@ -1,8 +1,8 @@
 import styled from '@emotion/native';
 import { View } from 'react-native';
-import { borderRadius, iconSize, spacing } from '../../styles';
+import { iconSize, borderRadius, spacing } from '../../styles/constants.js';
 
-export const Circle = styled(View)<{ color: string }>`
+const Circle = styled(View)`
   background-color: ${({ color }) => color};
   width: ${iconSize.micro};
   height: ${iconSize.micro};
@@ -11,10 +11,11 @@ export const Circle = styled(View)<{ color: string }>`
   align-items: center;
   margin-right: ${spacing.centi};
 `;
-
-export const CircleDot = styled(View)`
+const CircleDot = styled(View)`
   background-color: #fff;
   width: 4px;
   height: 4px;
   border-radius: ${borderRadius.pill};
 `;
+
+export { Circle, CircleDot };

package/dist/esm/components/Label/Label.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import Dot from '../Dot/Dot.js';
+import { Container, Text } from './styled.js';
+import { getFontFamilyAndWeight } from '../../styles/functions.js';
+
+const Label = ({ columns, data, chartConfig }) => {
+  const valueFont = getFontFamilyAndWeight(chartConfig?.fontFamily, "bold");
+  const labelFont = getFontFamilyAndWeight(chartConfig?.fontFamily, "regular");
+  return /* @__PURE__ */ React.createElement(Container, { columns }, /* @__PURE__ */ React.createElement(Dot, { color: data.color }), /* @__PURE__ */ React.createElement(Text, { font: labelFont, expand: true }, data.label), /* @__PURE__ */ React.createElement(Text, { font: valueFont, flexEnd: true }, data.value));
+};
+
+export { Label as default };

package/dist/esm/components/Label/styled.js

@@ -0,0 +1,32 @@
+import styled, { css } from '@emotion/native';
+import { View, Text as Text$1 } from 'react-native';
+import { spacing } from '../../styles/constants.js';
+
+const flexBasis = (columns) => css({ flexBasis: `${100 / columns - 2}%` });
+const Container = styled(View)(
+  ({ columns }) => css`
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    margin-bottom: ${spacing.centi};
+    ${flexBasis(columns)}
+  `
+);
+const expandStyles = (expand) => expand && css`
+    flex: 1;
+  `;
+const flexEndStyles = (flexEnd) => flexEnd && css`
+    justify-content: flex-end;
+  `;
+const Text = styled(Text$1)(({ font, expand = false, flexEnd = false }) => {
+  const { fontFamily, fontWeight } = font;
+  return css`
+    font-size: 14px;
+    font-family: ${fontFamily};
+    font-weight: ${fontWeight};
+    ${expandStyles(expand)}
+    ${flexEndStyles(flexEnd)}
+  `;
+});
+
+export { Container, Text };

package/dist/esm/components/PieChart/PieChart.js

@@ -0,0 +1,93 @@
+import { Text } from 'react-native-svg';
+import React from 'react';
+import { PieChart as PieChart$1 } from 'react-native-svg-charts';
+import Label from '../Label/Label.js';
+import { getCallback, getFeatured, getTextStyles } from './functions.js';
+import { Container, LabelsContainer } from './styled.js';
+
+const PieChart = ({
+  data,
+  dimension = 200,
+  radius = 32,
+  label,
+  sub,
+  labelProps,
+  subProps,
+  columns = 1,
+  chartConfig
+}) => {
+  const inner = 90 - radius * 100 / (dimension / 2);
+  const chart = data.map((item, index) => ({
+    value: item.value,
+    svg: {
+      fill: item.color,
+      ...getCallback(item.value, item.label, item.onPress)
+    },
+    ...getFeatured(item.featured ?? false),
+    key: `pie-${index}`
+  }));
+  const sum = data.reduce((prev, curr) => prev + curr.value, 0);
+  const {
+    textAnchor,
+    alignmentBaseline,
+    fontSize = 32,
+    fontWeight,
+    fontFamily,
+    fill,
+    y = sub ? -5 : void 0
+  } = getTextStyles(labelProps, "bold", chartConfig);
+  const {
+    textAnchor: textAnchorSub,
+    alignmentBaseline: alignmentBaselineSub,
+    fontSize: fontSizeSub = 14,
+    fontWeight: fontWeightSub,
+    fontFamily: fontFamilySub,
+    fill: fillSub,
+    y: ySub = 16
+  } = getTextStyles(subProps, "bold", chartConfig);
+  return /* @__PURE__ */ React.createElement(Container, null, /* @__PURE__ */ React.createElement(
+    PieChart$1,
+    {
+      style: { width: dimension, height: dimension, flex: 1 },
+      data: chart,
+      padAngle: 0,
+      innerRadius: `${inner}%`
+    },
+    /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        textAnchor,
+        alignmentBaseline,
+        fontSize,
+        fontWeight,
+        fontFamily,
+        fill,
+        y
+      },
+      label ?? sum
+    ),
+    sub && /* @__PURE__ */ React.createElement(
+      Text,
+      {
+        textAnchor: textAnchorSub,
+        alignmentBaseline: alignmentBaselineSub,
+        fontSize: fontSizeSub,
+        fontWeight: fontWeightSub,
+        fontFamily: fontFamilySub,
+        fill: fillSub,
+        y: ySub
+      },
+      sub
+    )
+  ), /* @__PURE__ */ React.createElement(LabelsContainer, null, data.map((item) => /* @__PURE__ */ React.createElement(
+    Label,
+    {
+      data: item,
+      columns,
+      key: item.label,
+      chartConfig
+    }
+  ))));
+};
+
+export { PieChart as default };

package/dist/esm/components/PieChart/functions.js

@@ -0,0 +1,38 @@
+import { Platform } from 'react-native';
+import { fontColor } from '../../styles/constants.js';
+import { getFontFamilyAndWeight } from '../../styles/functions.js';
+
+const getCallback = (value, label, fn) => {
+  if (!fn)
+    return {};
+  return Platform.OS === "web" ? {
+    onClick: () => fn?.(value, label)
+  } : {
+    onPress: () => fn?.(value, label)
+  };
+};
+const getFeatured = (featured) => ({
+  arc: { outerRadius: featured ? "100%" : "90%" }
+});
+const getTextStyles = (styles, defaultFontWeight, chartConfig) => {
+  const {
+    textAnchor = "middle",
+    alignmentBaseline = "middle",
+    fontSize,
+    fill = fontColor.dark,
+    y
+  } = styles || {};
+  return {
+    textAnchor,
+    alignmentBaseline,
+    fontSize,
+    fill,
+    y,
+    ...getFontFamilyAndWeight(
+      chartConfig?.fontFamily,
+      styles?.fontWeight ?? defaultFontWeight
+    )
+  };
+};
+
+export { getCallback, getFeatured, getTextStyles };