Created ButtonBase, Button, IconButton, and LinkButton docs

nomada-sh · Apr 13, 2022 · e61f516 · e61f516
1 parent 50d5ece
commit e61f516
Show file tree

Hide file tree

Showing 71 changed files with 6,871 additions and 200 deletions.
diff --git a/.eslintignore b/.eslintignore
@@ -6,4 +6,6 @@ babel.config.js
 cucumber.js
 jest.config.js
 jest.setup.js
-metro.config.js
+metro.config.js
+
+website
diff --git a/example/src/Calendars/Calendars.tsx b/example/src/Calendars/Calendars.tsx
@@ -18,7 +18,9 @@ export default function Calendars() {
       <CalendarStrip ref={ref} value={value} onChange={setValue} />
       <Body>{value.toLocaleDateString()}</Body>
       <Button
+        variant="rounded"
         text="Today"
+        color="primary"
         onPress={() => {
           setValue(new Date());
           ref.current?.jumpToDate(new Date());

diff --git a/package.json b/package.json
@@ -3,10 +3,12 @@
   "private": true,
   "workspaces": [
     "example",
+    "website",
     "packages/*"
   ],
   "scripts": {
     "start": "yarn workspace example start",
+    "start:website": "yarn workspace website start",
     "build:theme": "yarn workspace @nomada-sh/react-native-eyecandy-theme build",
     "build:icons": "yarn workspace @nomada-sh/react-native-eyecandy-icons build",
     "build:components": "yarn workspace @nomada-sh/react-native-eyecandy build",

diff --git a/packages/react-native-eyecandy-theme/src/colors/getBackgroundColors.ts b/packages/react-native-eyecandy-theme/src/colors/getBackgroundColors.ts
@@ -14,7 +14,7 @@ const getButtonColors: GetThemeColors<ThemeBackgroundColors> = options => {
 
   return mergeColors({
     ...options,
-    defaultColors: defaultColors,
+    defaultColors,
   });
 };
 

diff --git a/packages/react-native-eyecandy-theme/src/colors/getBadgeColors.ts b/packages/react-native-eyecandy-theme/src/colors/getBadgeColors.ts
@@ -37,7 +37,7 @@ const getDividerColors: GetThemeColors<ThemeBadgeColors> = options => {
 
   return mergeColors({
     ...options,
-    defaultColors: defaultColors,
+    defaultColors,
   });
 };
 

diff --git a/packages/react-native-eyecandy-theme/src/colors/getButtonColors.ts b/packages/react-native-eyecandy-theme/src/colors/getButtonColors.ts
@@ -13,11 +13,15 @@ const getButtonColors: GetThemeColors<ThemeButtonColors> = options => {
       background: palette.primary['500'],
       foreground: palette.primary['100'],
     },
+    secondary: {
+      background: palette.secondary['500'],
+      foreground: palette.secondary['100'],
+    },
   };
 
   return mergeColors({
     ...options,
-    defaultColors: defaultColors,
+    defaultColors,
   });
 };
 

diff --git a/packages/react-native-eyecandy-theme/src/colors/getDividerColors.ts b/packages/react-native-eyecandy-theme/src/colors/getDividerColors.ts
@@ -10,7 +10,7 @@ const getDividerColors: GetThemeColors<ThemeDividerColors> = options => {
 
   return mergeColors({
     ...options,
-    defaultColors: defaultColors,
+    defaultColors,
   });
 };
 

diff --git a/packages/react-native-eyecandy-theme/src/colors/getInputColors.ts b/packages/react-native-eyecandy-theme/src/colors/getInputColors.ts
@@ -32,7 +32,7 @@ const getInputColors: GetThemeColors<ThemeInputColors> = options => {
 
   return mergeColors({
     ...options,
-    defaultColors: defaultColors,
+    defaultColors,
   });
 };
 

diff --git a/packages/react-native-eyecandy-theme/src/colors/getSwitchColors.ts b/packages/react-native-eyecandy-theme/src/colors/getSwitchColors.ts
@@ -14,7 +14,7 @@ const getSwitchColors: GetThemeColors<ThemeSwitchColors> = options => {
 
   return mergeColors({
     ...options,
-    defaultColors: defaultColors,
+    defaultColors,
   });
 };
 

diff --git a/packages/react-native-eyecandy-theme/src/colors/getTextColors.ts b/packages/react-native-eyecandy-theme/src/colors/getTextColors.ts
@@ -25,7 +25,7 @@ const getTextColors: GetThemeColors<ThemeTextColors> = options => {
 
   return mergeColors({
     ...options,
-    defaultColors: defaultColors,
+    defaultColors,
   });
 };
 

diff --git a/packages/react-native-eyecandy-theme/src/colors/types.ts b/packages/react-native-eyecandy-theme/src/colors/types.ts
@@ -62,7 +62,7 @@ export type ThemeBackgroundColors = {
  * Button
  */
 
-export type ThemeButtonColorChoices = 'default' | 'primary';
+export type ThemeButtonColorChoices = 'default' | 'primary' | 'secondary';
 
 export type ThemeButtonColor = {
   background: string;

diff --git a/packages/react-native-eyecandy/src/components/BaseButton/index.ts b/packages/react-native-eyecandy/src/components/BaseButton/index.ts
diff --git a/packages/react-native-eyecandy/src/components/BaseMenuItem/BaseMenuItem.tsx b/packages/react-native-eyecandy/src/components/BaseMenuItem/BaseMenuItem.tsx
@@ -64,9 +64,10 @@ function BaseMenuItem({
       <View style={styles.content}>
         {icon && (
           <IconButton
-            variant="transparent-rounded"
+            variant="rounded"
+            transparent
             style={styles.icon}
-            buttonStyle={{
+            pressableStyle={{
               backgroundColor: iconBackgroundColor,
             }}
             icon={icon}

diff --git a/packages/react-native-eyecandy/src/components/Button/Button.tsx b/packages/react-native-eyecandy/src/components/Button/Button.tsx
@@ -1,23 +1,25 @@
 import React from 'react';
+import { TextStyle, StyleProp } from 'react-native';
 
 import { Body } from '../../typography';
-import BaseButton, { BaseButtonProps } from '../BaseButton';
+import ButtonBase, { ButtonBaseProps } from '../ButtonBase';
 
 import useStyles from './useStyles';
 
-export interface ButtonProps extends Omit<BaseButtonProps, 'children'> {
-  text: string;
+export interface ButtonProps extends Omit<ButtonBaseProps, 'children'> {
+  text?: string;
+  textStyle?: StyleProp<TextStyle>;
 }
 
-function Button({ text, color, inverse, ...props }: ButtonProps) {
+function Button({ text, color, inverse, textStyle, ...props }: ButtonProps) {
   const styles = useStyles({ color, inverse });
 
   return (
-    <BaseButton color={color} inverse={inverse} {...props}>
-      <Body weight="bold" size="large" style={styles.text}>
+    <ButtonBase color={color} inverse={inverse} {...props}>
+      <Body weight="bold" size="large" style={[styles.text, textStyle]}>
         {text}
       </Body>
-    </BaseButton>
+    </ButtonBase>
   );
 }
 

diff --git a/packages/react-native-eyecandy/src/components/Button/useStyles.ts b/packages/react-native-eyecandy/src/components/Button/useStyles.ts
@@ -1,4 +1,3 @@
-import { useMemo } from 'react';
 import { StyleSheet } from 'react-native';
 
 import {
@@ -15,13 +14,9 @@ export default function useStyles({
 }) {
   const { background, foreground } = useColors(c => c.button[color]);
 
-  return useMemo(
-    () =>
-      StyleSheet.create({
-        text: {
-          color: inverse ? background : foreground,
-        },
-      }),
-    [inverse, background, foreground],
-  );
+  return StyleSheet.create({
+    text: {
+      color: inverse ? background : foreground,
+    },
+  });
 }
diff --git a/.../src/components/BaseButton/BaseButton.tsx → .../src/components/ButtonBase/ButtonBase.tsx b/.../src/components/BaseButton/BaseButton.tsx → .../src/components/ButtonBase/ButtonBase.tsx
@@ -7,6 +7,7 @@ import {
   StyleProp,
   View,
   ViewStyle,
+  StyleSheet,
 } from 'react-native';
 
 import type { ThemeButtonColorChoices } from '@nomada-sh/react-native-eyecandy-theme';
@@ -16,7 +17,7 @@ import { usePressableStyles } from '../../hooks';
 
 import useStyles from './useStyles';
 
-export interface BaseButtonProps extends PressableProps {
+export interface ButtonBaseProps extends PressableProps {
   children?: ReactNode;
   /**
    * Container view style.
@@ -25,7 +26,7 @@ export interface BaseButtonProps extends PressableProps {
   /**
    * Pressable style.
    */
-  buttonStyle?: PressableProps['style'];
+  pressableStyle?: PressableProps['style'];
   inverse?: boolean;
   color?: ThemeButtonColorChoices;
   styles?: {
@@ -38,17 +39,20 @@ export interface BaseButtonProps extends PressableProps {
      */
     button?: PressableProps['style'];
   };
-  variant?: 'default' | 'outlined' | 'rounded' | 'transparent-rounded';
+  variant?: 'default' | 'rounded';
   height?: number;
   fullwidth?: boolean;
   loading?: boolean;
   hideDisabledOverlay?: boolean;
+  transparent?: boolean;
+  outlined?: boolean;
+  disableHapticFeedback?: boolean;
 }
 
-function BaseButton({
+function ButtonBase({
   children,
   style,
-  buttonStyle,
+  pressableStyle,
   inverse,
   color,
   variant,
@@ -59,8 +63,11 @@ function BaseButton({
   styles: customStyles = {},
   hideDisabledOverlay,
   onPress: onPressProp,
+  transparent,
+  outlined,
+  disableHapticFeedback = false,
   ...props
-}: BaseButtonProps) {
+}: ButtonBaseProps) {
   const disabled = disabledProp || loading;
 
   const styles = useStyles({
@@ -70,20 +77,23 @@ function BaseButton({
     height,
     disabled,
     fullwidth,
+    transparent,
+    outlined,
   });
 
   const getButtonStyle = usePressableStyles([
-    styles.button,
-    buttonStyle,
+    styles.pressable,
+    pressableStyle,
     customStyles.button,
   ]);
 
   const onPress = useCallback(
     (e: GestureResponderEvent) => {
-      ReactNativeHapticFeedback.trigger('impactMedium');
+      if (!disableHapticFeedback)
+        ReactNativeHapticFeedback.trigger('impactMedium');
       onPressProp?.(e);
     },
-    [onPressProp],
+    [disableHapticFeedback, onPressProp],
   );
 
   return (
@@ -111,4 +121,4 @@ function BaseButton({
   );
 }
 
-export default BaseButton;
+export default ButtonBase;
diff --git a/packages/react-native-eyecandy/src/components/ButtonBase/index.ts b/packages/react-native-eyecandy/src/components/ButtonBase/index.ts
@@ -0,0 +1,2 @@
+export { default } from './ButtonBase';
+export * from './ButtonBase';
diff --git a/...dy/src/components/BaseButton/useStyles.ts → ...dy/src/components/ButtonBase/useStyles.ts b/...dy/src/components/BaseButton/useStyles.ts → ...dy/src/components/ButtonBase/useStyles.ts
@@ -15,44 +15,57 @@ export default function useStyles({
   height = 56,
   disabled,
   fullwidth = true,
+  transparent = false,
+  outlined = false,
 }: {
   color?: ThemeButtonColorChoices;
   inverse?: boolean;
-  variant?: 'default' | 'outlined' | 'rounded' | 'transparent-rounded';
+  variant?: 'default' | 'rounded';
   height?: number;
   disabled?: boolean | null;
   fullwidth?: boolean;
+  transparent?: boolean;
+  outlined?: boolean;
 }) {
   const colors = useColors(c => c.button);
   const { background, foreground } = colors[color];
 
-  const borderRadius = /([a-z]+-)?rounded$/.test(variant) ? height / 2 : 12;
+  let borderWidth = 0;
+  let borderColor = undefined;
+  const borderRadius = variant === 'rounded' ? height / 2 : 12;
 
   let backgroundColor = Color(inverse ? foreground : background).rgb();
 
-  const rippleColor = getRippleColor(backgroundColor);
+  const rippleColor = getRippleColor(backgroundColor).string();
 
   let disabledColor = backgroundColor.fade(0.4);
 
-  if (/^transparent(-[a-z]+)?/.test(variant))
+  if (outlined) {
+    borderWidth = 1;
+    borderColor = inverse ? background : foreground;
     backgroundColor = backgroundColor.alpha(0);
+  }
+
+  if (transparent) backgroundColor = backgroundColor.alpha(0);
 
   return StyleSheet.create({
     container: {
       height,
       borderRadius,
       overflow: 'hidden',
       width: fullwidth ? '100%' : undefined,
+      borderWidth,
+      borderColor,
     },
-    button: {
+    pressable: {
       flex: 1,
       borderRadius,
       backgroundColor: backgroundColor.string(),
       justifyContent: 'center',
       alignItems: 'center',
     },
     ripple: {
-      color: rippleColor.string(),
+      color: rippleColor,
     },
     disabled: {
       backgroundColor: disabled ? disabledColor.string() : undefined,

diff --git a/packages/react-native-eyecandy/src/components/DatePicker/DatePicker.tsx b/packages/react-native-eyecandy/src/components/DatePicker/DatePicker.tsx
@@ -131,7 +131,7 @@ function DatePicker({
         icon={CalendarEvent}
         onPress={onPress}
         text={formattedDate}
-        showChevron={false}
+        showChevronRight={false}
         bold
         focused={visible}
       />

diff --git a/packages/react-native-eyecandy/src/components/DatePicker/Years/Years.tsx b/packages/react-native-eyecandy/src/components/DatePicker/Years/Years.tsx
@@ -63,7 +63,7 @@ function Years({ onPressBack, year, maxYears, onPressYear }: YearsProps) {
           >
             <Button
               onPress={() => onPressYear(y)}
-              buttonStyle={{
+              pressableStyle={{
                 height: 50,
               }}
               color={year === y ? 'primary' : 'default'}
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,2 @@
		export { default } from './ButtonBase';
		export * from './ButtonBase';