adds lint checks to web shared pkg

.github/workflows/lint.yml

@@ -1,27 +1,41 @@
-name: Lint Web Embeds
+name: Lint Web Packages
 
 on:
   push:
+    branches:
+      - main
     paths:
       - 'web-embeds/**'
+      - 'packages/web-shared/**'
+      - '.github/workflows/lint.yml'
+      - 'package.json'
+      - 'yarn.lock'
   pull_request:
     paths:
       - 'web-embeds/**'
+      - 'packages/web-shared/**'
+      - '.github/workflows/lint.yml'
+      - 'package.json'
+      - 'yarn.lock'
 
 jobs:
   lint:
     runs-on: ubuntu-latest
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
 
       - name: Set up Node.js
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
-          node-version: '>=18.17.0'
+          node-version: '18'
+          cache: 'yarn'
 
-      - name: Install Dependencies
-        run: cd web-embeds && yarn install
+      - name: Install dependencies
+        run: yarn install --frozen-lockfile
 
-      - name: Run Lint
-        run: cd web-embeds && yarn lint
+      - name: Lint web embeds
+        run: yarn workspace @apollosproject/apollos-embeds lint
+
+      - name: Lint web shared
+        run: yarn workspace @apollosproject/web-shared lint

packages/web-shared/.eslintrc.js

@@ -0,0 +1,44 @@
+module.exports = {
+  extends: ['react-app', 'plugin:prettier/recommended'],
+  plugins: ['simple-import-sort', 'import'],
+  rules: {
+    'import/first': 'error',
+    'import/newline-after-import': 'error',
+    'import/no-duplicates': 'error',
+    'import/order': [
+      'error',
+      {
+        groups: [['external', 'builtin'], 'internal', ['sibling', 'parent'], 'index'],
+        pathGroups: [
+          {
+            pattern: '@(react|react-native)',
+            group: 'external',
+            position: 'before',
+          },
+          {
+            pattern: '@src/**',
+            group: 'internal',
+          },
+        ],
+        pathGroupsExcludedImportTypes: ['internal', 'react'],
+        'newlines-between': 'always',
+        alphabetize: {
+          order: 'asc',
+          caseInsensitive: true,
+        },
+      },
+    ],
+    'lines-around-comment': [
+      'error',
+      {
+        allowArrayStart: true,
+        allowBlockStart: true,
+        allowClassStart: true,
+        allowObjectStart: true,
+        beforeBlockComment: true,
+        beforeLineComment: true,
+      },
+    ],
+    'spaced-comment': ['error', 'always'],
+  },
+};

packages/web-shared/analytics/segment.js

@@ -1,4 +1,5 @@
 import { AnalyticsBrowser } from '@segment/analytics-next';
+
 const clientFactory = (writeKey, clientManaged = false) => {
   if (!writeKey) {
     return null;

packages/web-shared/client/apolloClient.js

@@ -1,11 +1,11 @@
 import { ApolloClient, ApolloLink } from '@apollo/client';
-import { AUTH_TOKEN_KEY, AUTH_REFRESH_TOKEN_KEY } from '../config/keys';
 
 import apollosApiLink from './apollosApiLink';
 import authLink from './authLink';
+import buildErrorLink from './buildErrorLink';
 import httpLink from './httpLink';
 import initCache from './initCache';
-import buildErrorLink from './buildErrorLink';
+import { AUTH_TOKEN_KEY, AUTH_REFRESH_TOKEN_KEY } from '../config/keys';
 
 const client = async (church_slug) => {
   let storeIsResetting = false;

packages/web-shared/client/authLink.js

@@ -1,4 +1,5 @@
 import { setContext } from '@apollo/client/link/context';
+
 import { AUTH_TOKEN_KEY } from '../config/keys';
 
 export default setContext(async (request, { headers }) => {

packages/web-shared/client/httpLink.js

@@ -1,6 +1,6 @@
-import { createUploadLink } from 'apollo-upload-client';
 import { split, createHttpLink } from '@apollo/client';
 import { getMainDefinition } from '@apollo/client/utilities';
+import { createUploadLink } from 'apollo-upload-client';
 
 export const uri =
   process.env.NEXT_PUBLIC_DATA_URL || process.env.REACT_APP_DATA_URL || 'https://cdn.apollos.app';

packages/web-shared/client/initCache.js

@@ -1,5 +1,6 @@
 import { InMemoryCache } from '@apollo/client/core';
 import { persistCache } from 'apollo3-cache-persist';
+
 import { uri } from './httpLink';
 
 const initCache = async (initialState, { church }) => {

packages/web-shared/client/introspectionToPossibleTypes.js

@@ -3,9 +3,7 @@ function introspectionToPossibleTypes(introspectionQueryResultData) {
 
   introspectionQueryResultData.__schema.types.forEach((supertype) => {
     if (supertype.possibleTypes) {
-      possibleTypes[supertype.name] = [
-        ...supertype.possibleTypes.map((subtype) => subtype.name),
-      ];
+      possibleTypes[supertype.name] = [...supertype.possibleTypes.map((subtype) => subtype.name)];
     }
   });
 

packages/web-shared/components/AddToCalendar/AddToCalendar.js

@@ -1,4 +1,5 @@
 import React from 'react';
+
 import { Menu } from '@headlessui/react';
 import {
   CalendarPlus,
@@ -7,9 +8,10 @@ import {
   MicrosoftOutlookLogo,
   FileArrowDown,
 } from '@phosphor-icons/react';
-import { ActionIcon, List, MenuLink } from './AddToCalendar.styles';
 import { addSeconds, parseISO } from 'date-fns';
 
+import { ActionIcon, List, MenuLink } from './AddToCalendar.styles';
+
 function convertToGoogleLink({ start, duration, location, allDay, title }) {
   const startDate = parseISO(start);
   const endDate = addSeconds(startDate, duration);

packages/web-shared/components/AddToCalendar/AddToCalendar.styles.js

@@ -1,10 +1,10 @@
 import React from 'react';
+
 import { Menu } from '@headlessui/react';
-import styled from 'styled-components';
-import { withTheme } from 'styled-components';
+import { themeGet } from '@styled-system/theme-get';
 import { rgba } from 'polished';
+import styled, { withTheme } from 'styled-components';
 
-import { themeGet } from '@styled-system/theme-get';
 import { system } from '../../ui-kit/_lib/system';
 
 export const ActionIcon = withTheme(styled(Menu.Button)`

packages/web-shared/components/AddToCalendar/index.js

@@ -1,2 +1,3 @@
 import AddToCalendar from './AddToCalendar';
+
 export default AddToCalendar;

packages/web-shared/components/AppHeader/AppHeader.js

@@ -1,11 +1,10 @@
-import Wordmark from '../Wordmark';
-import { useCurrentChurch } from '../../hooks';
-import { Box, Avatar } from '../../ui-kit';
 import { User } from '@phosphor-icons/react';
 
-import SearchStyles from '../Searchbar/Search.styles';
-
+import { useCurrentChurch } from '../../hooks';
+import { Box } from '../../ui-kit';
 import ProfileButton from '../Profile/ProfileButton';
+import SearchStyles from '../Searchbar/Search.styles';
+import Wordmark from '../Wordmark';
 
 function ChurchLogo(props) {
   const { currentChurch } = useCurrentChurch();

packages/web-shared/components/Auth/AuthConfirm.js

@@ -1,15 +1,13 @@
 import React, { useEffect, useState } from 'react';
-import isEmpty from 'lodash/isEmpty';
 
-import { useValidateLogin, useValidateRegister } from '../../hooks';
-// import amplitude from '../../libs/amplitude';
-import { update as updateAuth, useAuth } from '../../providers/AuthProvider';
+import isEmpty from 'lodash/isEmpty';
 
-import { Box, Button, Input } from '../../ui-kit';
 import AuthLayout from './AuthLayout';
-
 import authSteps from './authSteps';
+import { useValidateLogin, useValidateRegister } from '../../hooks';
 import { useAnalytics } from '../../providers/AnalyticsProvider';
+import { update as updateAuth, useAuth } from '../../providers/AuthProvider';
+import { Box, Button, Input } from '../../ui-kit';
 
 const AuthConfirm = (props) => {
   const [status, setStatus] = useState('IDLE');
@@ -18,7 +16,7 @@
 
   /* OTP */
   const [otpCode, setOTPCode] = useState('');
   const [isPinReady, setIsPinReady] = useState(false);
   const codeLength = 6;
 
   const analytics = useAnalytics();
@@ -146,11 +144,7 @@
           error={error?.passcode}
         />
       </Box>
-      <Button
-        title={`Verify${isLoading ? 'ing...' : ''}`}
-        // disabled={!isPinReady}
-        onClick={handleSignInSubmit}
-      />
+      <Button title={`Verify${isLoading ? 'ing...' : ''}`} onClick={handleSignInSubmit} />
     </AuthLayout>
   );
 };

packages/web-shared/components/Auth/AuthDetails.js

@@ -1,12 +1,11 @@
 import React, { useState, useEffect } from 'react';
 
+import AuthLayout from './AuthLayout';
 import { useForm, useUpdateProfileFields, useCurrentUser, useCompleteRegister } from '../../hooks';
 import { update as updateAuth, useAuth } from '../../providers/AuthProvider';
 import { Box, Button, Input, Select } from '../../ui-kit';
 import authSteps from '../Auth/authSteps';
 
-import AuthLayout from './AuthLayout';
-
 function upperFirst(string) {
   return string.charAt(0).toUpperCase() + string.slice(1);
 }
@@ -14,9 +13,9 @@
 function AuthDetails(props) {
   const [status, setStatus] = useState('IDLE');
   const [error, setError] = useState(null);
   const [user, setUser] = useState(null);
   const [state, dispatch] = useAuth();
   const [updateProfileFields] = useUpdateProfileFields();
   const [completeRegister] = useCompleteRegister();
   const { currentUser } = useCurrentUser();
 

packages/web-shared/components/Auth/AuthIdentity.js

@@ -1,11 +1,11 @@
 import React, { useState } from 'react';
 
+import AuthLayout from './AuthLayout';
 import authSteps from './authSteps';
 import { useForm, useRequestLogin, useRequestRegister } from '../../hooks';
 import { update as updateAuth, useAuth } from '../../providers/AuthProvider';
 import { Button, Input, SmallSystemText, Box } from '../../ui-kit';
 import { validateEmail, validatePhoneNumber } from '../../utils';
-import AuthLayout from './AuthLayout';
 
 const AuthIdentity = (props) => {
   const [status, setStatus] = useState('IDLE');

packages/web-shared/components/Auth/AuthLayout/AuthLayout.js

@@ -1,11 +1,12 @@
 import React from 'react';
-import PropTypes from 'prop-types';
+
 import { CaretLeft, X } from '@phosphor-icons/react';
+import PropTypes from 'prop-types';
 
-import { Box, Card, Button } from '../../../ui-kit';
-import customizations from './customizations';
 import { Heading, SubHeading } from './AuthLayout.styles';
+import customizations from './customizations';
 import { update as updateAuth, useAuth } from '../../../providers/AuthProvider';
+import { Box, Card, Button } from '../../../ui-kit';
 import authSteps from '../authSteps';
 
 function AuthLayout(props = {}) {

packages/web-shared/components/Auth/AuthLayout/AuthLayout.styles.js

@@ -1,8 +1,7 @@
 import React from 'react';
 
-import { withTheme } from 'styled-components';
-import styled from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
+import styled, { withTheme } from 'styled-components';
 
 import { TypeStyles, utils } from '../../../ui-kit';
 

packages/web-shared/components/Auth/AuthManager.js

@@ -1,13 +1,13 @@
 import React from 'react';
 
-import { useAuth } from '../../providers/AuthProvider';
-import { Box } from '../../ui-kit';
 import Confirm from './AuthConfirm';
 import Details from './AuthDetails';
-import Merge from './AuthMerge';
 import Identity from './AuthIdentity';
+import Merge from './AuthMerge';
 import authSteps from './authSteps';
 import Welcome from './AuthWelcome';
+import { useAuth } from '../../providers/AuthProvider';
+import { Box } from '../../ui-kit';
 
 function AuthManager(props = {}) {
   const [{ step }] = useAuth();

packages/web-shared/components/Auth/AuthMerge/AuthMerge.js

@@ -1,22 +1,10 @@
 import React, { useState, useCallback, useMemo } from 'react';
 
-import { useForm } from '../../../hooks';
+import { Heading, SubHeading } from './AuthMerge.styles';
+import { useForm, useCompleteRegister } from '../../../hooks';
 import { update as updateAuth, useAuth } from '../../../providers/AuthProvider';
-import {
-  Avatar,
-  Card,
-  Box,
-  Button,
-  Input,
-  H2,
-  H5,
-  H6,
-  SmallBodyText,
-} from '../../../ui-kit';
+import { Avatar, Card, Box, Button, Input, H2, H5, H6, SmallBodyText } from '../../../ui-kit';
 import authSteps from '../authSteps';
-import { useCompleteRegister } from '../../../hooks';
-
-import { Heading, SubHeading } from './AuthMerge.styles';
 
 function AuthMerge() {
   const [status, setStatus] = useState('IDLE');
@@ -48,10 +36,7 @@ function AuthMerge() {
   const onSuccess = ({ birthDate, gender, firstName, lastName }) => {
     setStatus('SUCCESS');
     const needsOnboarding =
-      firstName === null ||
-      lastName === null ||
-      gender === null ||
-      birthDate === null;
+      firstName === null || lastName === null || gender === null || birthDate === null;
 
     if (needsOnboarding) {
       dispatch(
@@ -81,16 +66,7 @@ function AuthMerge() {
         variables: { mergeProfileId },
         update: (
           cache,
-          {
-            data: {
-              completeRegistration: {
-                birthDate,
-                gender,
-                firstName,
-                lastName,
-              } = {},
-            } = {},
-          }
+          { data: { completeRegistration: { birthDate, gender, firstName, lastName } = {} } = {} }
         ) => {
           onSuccess({ birthDate, gender, firstName, lastName });
         },
@@ -121,8 +97,7 @@ function AuthMerge() {
       <Card p="l" display="flex" flexDirection="column" width="440px">
         <Heading>Are any of these people you?</Heading>
         <SubHeading>
-          Based on your verified phone number or email, we've matched you to an
-          existing profile.
+          Based on your verified phone number or email, we've matched you to an existing profile.
         </SubHeading>
 
         {allOptions.map((item, index) => (
@@ -136,14 +111,10 @@ function AuthMerge() {
               checked={item.id === mergeProfileId}
               onChange={onChange}
             />
-            {item.photo?.uri ? (
-              <Avatar src={item.photo?.uri} alt="avatar" mr="s" />
-            ) : null}
+            {item.photo?.uri ? <Avatar src={item.photo?.uri} alt="avatar" mr="s" /> : null}
             <Box>
               <H6>{item.firstName}</H6>
-              <SmallBodyText color="text.secondary">
-                {item.lastName}
-              </SmallBodyText>
+              <SmallBodyText color="text.secondary">{item.lastName}</SmallBodyText>
             </Box>
           </Box>
         ))}

packages/web-shared/components/Auth/AuthMerge/AuthMerge.styles.js

@@ -1,8 +1,7 @@
 import React from 'react';
 
-import { withTheme } from 'styled-components';
-import styled, { css } from 'styled-components';
 import { themeGet } from '@styled-system/theme-get';
+import styled, { withTheme, css } from 'styled-components';
 
 import { system, TypeStyles, utils } from '../../../ui-kit';