@gama-academy/smash-web - npm Package Compare versions

Comparing version 1.0.5 to 1.0.6

lib/typescript/index.d.ts

@@ -1,9 +0,367 @@
-import { ThemeColorsName, ThemeColorsShade, ThemePaddings } from '@common-theme';
-export * from '@common-theme';
-export * from '@common-types';
+import * as styled_components from 'styled-components';
+import { ThemedStyledProps } from 'styled-components';
 import * as React from 'react';
 import React__default, { CSSProperties } from 'react';
-import { glyphmap } from '@common-assets';
-import * as styled_components from 'styled-components';
 
+/**
+ * ** IMPORTANT **
+ * Remember to always use the literal type in each value, this is because, during
+ * the autocomplete, the majority of IDEs can show the value of de property on this ways.
+ * If this is not defined, the IDE will show the type of property as string/number
+ *
+ * see an example:
+ * - with literal type:
+ *  https://i.imgur.com/n7piYD9.png
+ *
+ * - without literal type:
+ * https://i.imgur.com/JZ9rcI8.png
+ */
+/**
+ * Define the colors of theme
+ * to add a new color in theme, remember to add the color name at ThemeColorsName
+ * the shades are defined in ThemeColorsShade, remember: the base shade is the
+ * only one needed
+ */
+declare const colors: ThemeColorsGroup;
+/**
+ * Define the name of the fonts families
+ */
+declare const fonts: {
+    /**
+     * Used in common text elements
+     */
+    default: "Raleway";
+    /**
+     * Used in Titles of sections, headers and etc.
+     */
+    title: "Raleway";
+};
+/**
+ * Define the fonts sizes
+ * this values will be used as pixels (px)
+ */
+declare const fontSizes: {
+    xsm: 8;
+    sm: 12;
+    md: 16;
+    lg: 24;
+};
+/**
+ * Define the line heights for each font size.
+ * IMPORTANT: these values will be used with the fontsSizes, so you must make sure
+ * that: the values are sync as in the example
+ *
+ * in short, if an text element use the "md" of fontSizes, it must use the "md"
+ * of lineHeights too
+ *
+ * @example
+ * ```ts
+ * styled.Text`
+ *    font-size: ${fontSizes.md}
+ *    line-height: ${fontSizes.md}
+ * `
+ * ```
+ */
+declare const lineHeights: {
+    xsm: 12;
+    sm: 18;
+    md: 24;
+    lg: 36;
+};
+/**
+ * Define the fonts weights
+ */
+declare const fontWeights: {
+    regular: 400;
+    medium: 500;
+    bold: 700;
+    black: 900;
+};
+/**
+ * Define the measure units of the theme
+ * any values can be defined here, these values will be used as global within
+ * the theme
+ *
+ * @example
+ * ```ts
+ * const units = {
+ *   base: 8 (measure base)
+ *   header: 60 (header height)
+ *   navigation: 70 (navigation - tabstack - height)
+ * }
+ * ```
+ */
+declare const units: {
+    base: 8;
+    header: 60;
+    radius: 8;
+};
+/**
+ * define the value of different sizes of padding
+ * remember to always use the unit base defined before.
+ */
+declare const paddings: {
+    sm: 8;
+    md: 16;
+    lg: 24;
+    xl: 32;
+    xxl: 40;
+};
+
+/**
+ * the name of the colors of theme
+ */
+declare type ThemeColorsName = 'primary' | 'secondary' | 'black' | 'white' | 'gray' | 'red' | 'transparent' | 'yellow';
+/**
+ * Existing tones for each color (ThemeColorsName). Each one color must have the
+ * tone "base" and optionally the "light", "lighter", "dark" and "darker" tones
+ */
+interface ThemeColorsShade {
+    base: string;
+    light?: string;
+    lighter?: string;
+    dark?: string;
+    darker?: string;
+}
+/**
+ * The group of the colors (ThemeColorsName) and shades (ThemeColorsShade)
+ *
+ * @example
+ * Each one color in ThemeColorsName becomes a key of an object, this object must have
+ * the shades of ThemeColorsShade
+ * ```json
+ * {
+ *   primary: {
+ *     base: '#fff',
+ *     light: '#fff',
+ *     lighter: '#fff',
+ *   }
+ * }
+ * ```
+ */
+declare type ThemeColorsGroup = {
+    [color in ThemeColorsName]: ThemeColorsShade;
+};
+/**
+ * Final type of theme colors, bases on colors defined before.
+ * that is: Union of ThemeColorsName and ThemeColorsShades with their values defined
+ */
+declare type ThemeColors = typeof colors;
+/**
+ * Type created based on values of font families defined on theme creation.
+ * That is: If a family needs to be adde or removed a family, the type are
+ * updated automatically
+ */
+declare type ThemeFonts = {
+    [fontName in keyof typeof fonts]: string;
+};
+/**
+ * Type created based on font sizes also defined when creating the theme
+ * @example
+ * Sizes defined as follows:
+ * ```json
+ * {
+ *   sm: '0px' as '0px',
+ *   md: '0px' as '0px',
+ *   ...
+ * }
+ * ```
+ */
+declare type ThemeFontSizes = {
+    [fontSize in keyof typeof fontSizes]: number;
+};
+/**
+ * Type of font weights, based on values defined also in the theme creation
+ * @example
+ * Weights defined as follows:
+ * ```json
+ * {
+ *   regular: 500 as 500,,
+ *   bold: 900 as 900,
+ *   ...
+ * }
+ * ```
+ */
+declare type ThemeFontWeights = {
+    [fontSize in keyof typeof fontWeights]: number;
+};
+/**
+ * Type of the line heights, based on their values defined
+ */
+declare type ThemeLineHeights = {
+    [fontSize in keyof typeof lineHeights]: number;
+};
+/**
+ * Type created based on measure units values defineds on theme creation
+ * @example
+ * Any units as example:
+ * - base unit of spacing: 8
+ * - header height (mobile): 60
+ */
+declare type ThemeUnits = {
+    [fontSize in keyof typeof units]: number;
+};
+/**
+ * Type of pre-definitions of paddings (using base unit). Pre-definition also created
+ * in initial theme values.
+ * @example
+ * The padding values are defined using the base unit, that is:
+ * ```json
+ * {
+ *   sm: units.base as 8,
+ *   md: (units.base * 2) as 16,
+ *   lg: (units.base * 3) as 24,
+ *   ...
+ * }
+ * ```
+ */
+declare type ThemePaddings = {
+    [fontSize in keyof typeof paddings]: number;
+};
+/**
+ * The final interface of the theme.
+ * The union of all types/interfaces created before.
+ */
+interface Theme {
+    colors: ThemeColors;
+    fonts: ThemeFonts;
+    fontSizes: ThemeFontSizes;
+    fontWeights: ThemeFontWeights;
+    lineHeights: ThemeLineHeights;
+    units: ThemeUnits;
+    paddings: ThemePaddings;
+}
+/**
+ * Inject the theme props into a styled component.
+ */
+declare type ThemedProps<P> = ThemedStyledProps<P, Theme>;
+declare module 'styled-components/native' {
+    interface DefaultTheme extends Theme {
+    }
+}
+
+/**
+ * DeepPartial is a type used to recursively set an interface or type
+ * property as optional
+ *
+ * @example
+ *
+ * ```ts
+ * interface A {
+ *   propertyA: {
+ *     prop: string
+ *     prop: number
+ *   }
+ * }
+ *
+ * output:
+ *
+ * interface A {
+ *   propertyA?: {
+ *     prop?: string
+ *     prop?: number
+ *   }
+ * }
+ * ```
+ */
+declare type DeepPartial<T> = {
+    [P in keyof T]?: DeepPartial<T[P]>;
+};
+
+/**
+ * This function create an theme object.
+ * Optionally, you can pass an custom theme object with custom values and it will
+ * always be merged with the default theme (smash)
+ *
+ * @param theme - custom theme
+ *
+ * @example
+ * ```ts
+ * const theme_a = { a: 1, b: 2, c: 3 };
+ * const theme_b = { a: 2 };
+ *
+ * const theme_c = createTheme(theme_a, theme_b);
+ *
+ * // the output (theme_c) is equal to:
+ * // theme_c = { a: 2, b: 2, c: 3 };
+ * ```
+ */
+declare const createTheme: (theme?: DeepPartial<Theme>) => Theme;
+/**
+ * easy way to get an theme color with a shade and optionally an alpha channel
+ *
+ * @param colorName - the name of the color
+ * @param colorShade - the shade of the color
+ * @param alpha - an alpha value in hexadecimal pattern, that is: two character from '00' to 'FF'
+ *
+ * @example
+ * ```ts
+ * inside a styled-component
+ * ${getThemeColor(...props)}
+ *
+ * outside a styled-component
+ * getThemeColor(...props)({ theme })
+ * ```
+ */
+declare const getThemeColor: (colorName: ThemeColorsName, colorShade?: keyof ThemeColorsShade, alpha?: string) => ({ theme }: {
+    theme: any;
+}) => string;
+/**
+
+ *
+ * @param weight - Font weight, ie light, regular, bold, etc.
+ * @param family - Font family - only used on Android
+ *
+ * @example
+ * ```ts
+ * const Bold = styled.Text`
+ *   ${getFontWeight('bold')}
+ * `
+ * ```
+ */
+declare const getFontWeight: (weight: keyof ThemeFontWeights, family?: keyof ThemeFonts) => ({ theme }: {
+    theme: any;
+}) => string;
+/**
+ * Get the correct style for a font size.
+ * return a style, with the font size and the relative line-height.
+ *
+ * @param size - Font size name, ie sm, md, lg, etc.
+ * @param rawValue - If it's true, returns the raw integer value
+ *                   instead of a style.
+ *
+ * @example
+ * ```ts
+ * const Title = styled.Text`
+ *   ${getFontSize('lg')};
+ * `
+ * ```
+ *
+ * @example - `theme` comes from styled-component's ThemeContext.
+ * ```tsx
+ *   return <Icon size={getFontSize('lg', true)({ theme })} />
+ * ```
+ */
+declare const getFontSize: (size: keyof ThemeFontSizes, rawValue?: boolean) => ({ theme }: ThemedProps<Theme>) => string | number;
+/**
+ *
+ *
+ * @param family - the name of the family
+ * @param weight - optionally an weight of the family. use it only in android
+ *
+ * *
+ * @example
+ * ```ts
+ * const TitleFamily = styled.Text`
+ *   ${getFontFamily('title')}
+ * `
+ * ```
+ */
+declare const getFontFamily: (family?: keyof ThemeFonts, weight?: keyof ThemeFontWeights) => ({ theme }: ThemedProps<Theme>) => string;
+
+/**
+ * Default gama theme - SMASH
+ */
+declare const theme: Theme;
+
 declare type ButtonTypes = 'primary' | 'secondary' | 'none';
@@ -125,2 +483,4 @@ declare type ButtonVariants = 'contained' | 'outlined' | 'text';
 
+declare const glyphmap: any;
+
 declare type IconShape = 'round' | 'round-square' | 'none';
@@ -236,2 +596,2 @@ declare type MaterialIconName = keyof typeof glyphmap;
 
-export { Button, ButtonBaseProps, ButtonInnerProps, ButtonProps, HeightWidth, Icon, SmashGlobalStyle, Spinner, SpinnerProps };
+export { Button, ButtonBaseProps, ButtonInnerProps, ButtonProps, DeepPartial, HeightWidth, Icon, SmashGlobalStyle, Spinner, SpinnerProps, Theme, ThemeColors, ThemeColorsGroup, ThemeColorsName, ThemeColorsShade, ThemeFontSizes, ThemeFontWeights, ThemeFonts, ThemeLineHeights, ThemePaddings, ThemeUnits, ThemedProps, colors, createTheme, fontSizes, fontWeights, fonts, getFontFamily, getFontSize, getFontWeight, getThemeColor, lineHeights, paddings, theme, units };

package.json

 {
   "name": "@gama-academy/smash-web",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "description": "> TODO: description",
@@ -19,2 +19,3 @@ "author": "danillo oliveira <[e-mail]>",
     "storybook": "start-storybook -p 6006",
+    "build": "npx rollup --config rollup.config.js",
     "test": "jest",
@@ -21,0 +22,0 @@ "test:cov": "jest --coverage",

New alerts

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Uses eval

Supply chain risk

Package uses dynamic code execution (e.g., eval()), which is a dangerous practice. This can prevent the code from running in certain environments and increases the risk that the code may contain exploits or malicious behavior.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

3396762

increased by373.77%

Lines of code

25296

increased by366.2%

Worsened metrics

Number of medium supply chain risk alerts

5

increased byInfinity%

No dependency changes