💄 Gloss: Ex - Fix Prettier/Linter Warnings

dominicstop · Mar 3, 2023 · 4b5fdea · 4b5fdea
1 parent 219414c
commit 4b5fdea
Show file tree

Hide file tree

Showing 22 changed files with 372 additions and 276 deletions.
diff --git a/example/src/App.tsx b/example/src/App.tsx
@@ -9,48 +9,67 @@ import { Test01Screen } from './screens/Test01Screen';
 
 import { SHARED_ENV } from './constants/SharedEnv';
 
-const shouldEnableTabs = 
-  SHARED_ENV.enableReactNavigation && SHARED_ENV.enableTabNavigation;
-
+const shouldEnableTabs =
+  SHARED_ENV.enableReactNavigation &&
+  SHARED_ENV.enableTabNavigation;
 
 function Tab1StackScreen() {
-  if(shouldEnableTabs){
+  if (shouldEnableTabs) {
     const Tab1Stack = createNativeStackNavigator();
 
     return (
-    <Tab1Stack.Navigator initialRouteName="Home">
-      <Tab1Stack.Screen name="Home" component={HomeScreen} />
-      <Tab1Stack.Screen name="Test01" component={Test01Screen} />
-    </Tab1Stack.Navigator>
-  );
-
+      <Tab1Stack.Navigator initialRouteName="Home">
+        <Tab1Stack.Screen
+          name="Home"
+          component={HomeScreen}
+        />
+        <Tab1Stack.Screen
+          name="Test01"
+          component={Test01Screen}
+        />
+      </Tab1Stack.Navigator>
+    );
   } else {
     return null;
-  };
-};
+  }
+}
 
 export default function App() {
-  if(shouldEnableTabs){
+  if (shouldEnableTabs) {
     const TabNavigator = createBottomTabNavigator();
 
-    return(
+    return (
       <NavigationContainer>
         <TabNavigator.Navigator>
-          <TabNavigator.Screen name="Tab1" component={Tab1StackScreen} />
-          <TabNavigator.Screen name="Tab2" component={HomeScreen} />
+          <TabNavigator.Screen
+            name="Tab1"
+            component={Tab1StackScreen}
+          />
+          <TabNavigator.Screen
+            name="Tab2"
+            component={HomeScreen}
+          />
         </TabNavigator.Navigator>
       </NavigationContainer>
     );
-  } else if(SHARED_ENV.enableReactNavigation){
+  } else if (SHARED_ENV.enableReactNavigation) {
     const Stack = createNativeStackNavigator();
 
-    return(
+    return (
       <NavigationContainer>
         <Stack.Navigator initialRouteName="Home">
-          <Stack.Screen name="Home" component={HomeScreen} />
-          <Stack.Screen name="Test01" component={Test01Screen} />
+          <Stack.Screen
+            name="Home"
+            component={HomeScreen}
+          />
+          <Stack.Screen
+            name="Test01"
+            component={Test01Screen}
+          />
         </Stack.Navigator>
       </NavigationContainer>
     );
-  };
-};
+  }
+
+  return null;
+}
diff --git a/example/src/components/Card/CardBody.tsx b/example/src/components/Card/CardBody.tsx
@@ -3,7 +3,6 @@ import { StyleSheet, View, ViewStyle } from 'react-native';
 
 import * as Colors from '../../constants/Colors';
 
-
 export const CardBody: React.FC<{
   style?: ViewStyle;
 }> = (props) => {
@@ -23,4 +22,4 @@ const styles = StyleSheet.create({
     backgroundColor: Colors.PURPLE[50],
     borderRadius: 10,
   },
-});
+});
diff --git a/example/src/components/Card/CardButton.tsx b/example/src/components/Card/CardButton.tsx
@@ -1,23 +1,27 @@
 import * as React from 'react';
-import { StyleSheet, Text, TouchableOpacity, GestureResponderEvent, ViewStyle } from 'react-native';
+import {
+  StyleSheet,
+  Text,
+  TouchableOpacity,
+  GestureResponderEvent,
+  ViewStyle,
+} from 'react-native';
 
 import * as Colors from '../../constants/Colors';
 
-
 /**
  * ```
  * ┌─────────────────────────────┐
  * │ Title                       │
  * │ Subtitle                    │
  * └─────────────────────────────┘
  * ```
- */         
+ */
 export function CardButton(props: {
   title: string;
-  subtitle: string;
+  subtitle?: string;
   onPress: (event: GestureResponderEvent) => void;
 }) {
-
   // prettier-ignore
   const hasSubtitle = (
     props.subtitle != null ||
@@ -45,7 +49,7 @@ export function CardButton(props: {
       </React.Fragment>
     </TouchableOpacity>
   );
-};
+}
 
 const styles = StyleSheet.create({
   cardButtonContainer: {
@@ -58,10 +62,10 @@ const styles = StyleSheet.create({
   cardButtonTitleText: {
     color: 'white',
     fontSize: 15,
-    fontWeight: '700'
+    fontWeight: '700',
   },
   cardButtonSubtitleText: {
     color: 'white',
-    fontWeight: '400'
+    fontWeight: '400',
   },
-});
+});
diff --git a/example/src/components/Card/CardRowColorPicker.tsx b/example/src/components/Card/CardRowColorPicker.tsx
@@ -1,10 +1,15 @@
-
 import * as React from 'react';
-import { StyleSheet, View, Text, TouchableOpacity, FlatList, ListRenderItem } from 'react-native';
+import {
+  StyleSheet,
+  View,
+  Text,
+  TouchableOpacity,
+  FlatList,
+  ListRenderItem,
+} from 'react-native';
 
 import * as Colors from '../../constants/Colors';
 
-
 type CardRowColorPickerState = {
   selectedItem?: string;
 };
@@ -31,72 +36,85 @@ const PALLETES = [
   Colors.GREY,
 ];
 
-const BASE_COLORS = PALLETES.reduce((acc: string[][], curr) => {
-  if('A700' in curr) acc[0].push(curr.A700);
+const BASE_COLORS = PALLETES.reduce(
+  (acc: string[][], curr) => {
+    if ('A700' in curr) {
+      acc[0].push(curr.A700);
+    }
 
-  acc[1].push(curr['900']);
-  acc[2].push(curr['600']);
-  acc[3].push(curr['300']);
+    acc[1].push(curr['900']);
+    acc[2].push(curr['600']);
+    acc[3].push(curr['300']);
 
-  return acc;
-}, [[], [], [], []]);
+    return acc;
+  },
+  [[], [], [], []]
+);
 
 const DEFAULT_COLORS = [
-  'black', 'white', ...BASE_COLORS.flat(),
+  'black',
+  'white',
+  ...BASE_COLORS.flat(),
 ];
 
-export class CardRowColorPicker extends React.Component<CardRowColorPickerProps, CardRowColorPickerState> {
-
-  constructor(props){
+export class CardRowColorPicker extends React.Component<
+  CardRowColorPickerProps,
+  CardRowColorPickerState
+> {
+  constructor(props) {
     super(props);
 
     this.state = {
       selectedItem: undefined,
     };
-  };
-  
-  _listRenderItem: ListRenderItem<string> = ({item}) => {
+  }
+
+  _listRenderItem: ListRenderItem<string> = ({ item }) => {
     const props = this.props;
     const state = this.state;
 
-    const isSelected = (item === state.selectedItem);
+    const isSelected = item === state.selectedItem;
 
-    return(
-      <TouchableOpacity 
+    return (
+      <TouchableOpacity
         style={[
-          styles.listItem, 
+          styles.listItem,
           isSelected && styles.listItemSelected,
-          { backgroundColor: item }
+          { backgroundColor: item },
         ]}
         onPress={() => {
           // clear if already selected
-          const selectedItem = isSelected? undefined : item;
+          const selectedItem = isSelected
+            ? undefined
+            : item;
 
-          this.setState({selectedItem});
+          this.setState({ selectedItem });
           props.onSelectItem?.(selectedItem);
         }}
       />
     );
   };
 
-  render(){
+  render() {
     const state = this.state;
 
     const hasSelection = state.selectedItem != null;
 
-    return(
+    return (
       <View style={styles.rootContainer}>
         <View style={styles.selectedColorContainer}>
           <Text style={styles.selectedColorLabel}>
             {'Selected Color:'}
           </Text>
-          {hasSelection? (
-            <View style={[
-              styles.listItem,
-              styles.selectedColorValueContainer,
-              { backgroundColor: state.selectedItem }
-            ]}/>
-          ):(
+          {hasSelection ? (
+            <View
+              style={[
+                styles.listItem,
+                styles.selectedColorValueContainer,
+                { backgroundColor: state.selectedItem },
+              ]}
+            />
+          ) : (
             <Text style={styles.selectedColorValue}>
               {'N/A'}
             </Text>
@@ -106,14 +124,14 @@ export class CardRowColorPicker extends React.Component<CardRowColorPickerProps,
           style={styles.list}
           data={DEFAULT_COLORS}
           renderItem={this._listRenderItem}
-          scrollIndicatorInsets={{left: 10, right: 10}}
+          scrollIndicatorInsets={{ left: 10, right: 10 }}
           keyExtractor={(item) => item}
           horizontal={true}
         />
       </View>
     );
-  };
-};
+  }
+}
 
 const styles = StyleSheet.create({
   rootContainer: {
@@ -130,7 +148,7 @@ const styles = StyleSheet.create({
   },
   selectedColorValue: {
     fontSize: 16,
-    color: 'rgba(0,0,0,0.3)'
+    color: 'rgba(0,0,0,0.3)',
   },
   list: {
     marginTop: 10,
@@ -143,14 +161,14 @@ const styles = StyleSheet.create({
     height: 25,
     minWidth: 25,
     backgroundColor: 'white',
-    borderRadius: 25/2,
+    borderRadius: 25 / 2,
     marginRight: 10,
   },
   listItemSelected: {
     width: 50,
   },
   selectedColorValueContainer: {
     borderWidth: 3,
-    borderColor: 'rgba(255,255,255,0.75)'
+    borderColor: 'rgba(255,255,255,0.75)',
   },
-});
+});
diff --git a/example/src/components/Card/CardRowLabelDisplay.tsx b/example/src/components/Card/CardRowLabelDisplay.tsx
@@ -1,20 +1,19 @@
 import * as React from 'react';
 import { StyleSheet, View, Text } from 'react-native';
 
-import * as Colors  from '../../constants/Colors';
-
+import * as Colors from '../../constants/Colors';
 
 /**
  * ```
- * ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ 
+ * ┌ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
  *   Label              Value │
- * └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ 
+ * └ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─ ─
  * ```
- */                            
+ */
 export function CardRowLabelDisplay(props: {
   label?: string;
   value?: string | number;
-}){
+}) {
   return (
     <View style={styles.cardRowLabelDisplayContainer}>
       <Text style={styles.cardRowLabelDisplayLabelText}>
@@ -25,7 +24,7 @@ export function CardRowLabelDisplay(props: {
       </Text>
     </View>
   );
-};
+}
 
 const styles = StyleSheet.create({
   cardRowLabelDisplayContainer: {
@@ -50,4 +49,4 @@ const styles = StyleSheet.create({
     color: Colors.PURPLE[1100],
     opacity: 0.4,
   },
-});
+});