chore: Merge PR #56 from feat/with-clerk-auth

.github/workflows/README.md

@@ -1,20 +1,20 @@
 # Automatic deployments with Github Actions
 
-We generally advise that you take full use of either [Vercel](vercel.com) or [Netlify](netlify.com) for automatic web deployments. These are quite good and easy to set-up / link to your repo in their UI.
+We generally advise that you take full use of [Vercel](vercel.com) and [Expo](expo.dev) for automatic deployments. These are quite good and easy to set-up and link to your repo in their UI.
 
 On top of this though, you can also enable automatic deployments through Github Actions to:
-- [Chromatic](https://www.chromatic.com/) (deploys your storybook)
-- [Expo](https://github.com/expo/expo-github-action) (runs `eas update` whenever a branch updates)
+- Deploy your storybook docs with [Chromatic](https://www.chromatic.com/)
+- Deploy your feature branches for testing with [Expo](https://github.com/expo/expo-github-action) (runs `eas update` whenever a branch updates)
 
 Heads up though, as this will require setting up some secrets in your repository.
 
-> We recommend doppler for managing and syncing secrets or env vars between services. You can find more information on how to set this up at [the doppler docs](https://docs.doppler.com/docs/github-actions).
+> We recommend [doppler](doppler.com) for managing and syncing secrets or env vars between services. You can find more information on how to set this up at [the doppler docs](https://docs.doppler.com/docs/github-actions).
 
 ## Publishing with EAS update
 
-A basic workflow for publishing with EAS update is already added to your project. You can find it in `.github/workflows/eas.yml`.
+A basic workflow for publishing with EAS update is already added to your project when forking the repo. You can find it in `.github/workflows/eas.yml`.
 
-However, it will only run when you add an `EXPO_ACCESS_TOKEN` secret to your repository. You can do this in the repository settings, but before you do that, you'll need to generate this token.
+However, it will only run when you add an `EXPO_ACCESS_TOKEN` secret to your repository. You can do this in the repository settings, but before you do that, you'll need to generate this token in their UI.
 
 ### Creating an Expo project and generating an access token
 

.github/workflows/eas.yml

@@ -58,4 +58,5 @@ jobs:
         env:
           ENV: staging
           BACKEND_URL: ${{ secrets.BACKEND_URL }}
-          NEXT_PUBLIC_APP_LINKS: ${{ secrets.NEXT_PUBLIC_APP_LINKS }}
+          NEXT_PUBLIC_APP_LINKS: ${{ secrets.NEXT_PUBLIC_APP_LINKS }}
+          NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ secrets.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}

.storybook/__mocks__/@aetherspace-clerk-auth/hooks/index.tsx

@@ -0,0 +1,127 @@
+// -i- Mocked to avoid using @clerk/nextjs in Storybook
+import React from 'react'
+import { useMemo } from 'react'
+import { action } from '@storybook/addon-actions'
+
+/* --- useAuth() ------------------------------------------------------------------------------- */
+
+export const useAuth = () => ({
+  isSignedIn: false,
+  session: null,
+  user: null,
+  signUp: {
+    isLoaded: true,
+    create: async () => {},
+    prepareEmailAddressVerification: async () => {},
+  },
+  signIn: {
+    isLoaded: true,
+    create: async () => {},
+  },
+  signOut: {
+    isLoaded: true,
+    create: async () => {},
+  },
+  setActive: async () => {},
+  getActive: async () => {},
+})
+
+/* --- useClerk() ------------------------------------------------------------------------------ */
+
+export const useClerk = () => ({
+  isLoaded: true,
+  isSignedIn: false,
+  session: null,
+  user: null,
+  signUp: {
+    isLoaded: true,
+    create: async () => {},
+    prepareEmailAddressVerification: async () => {},
+  },
+  signIn: {
+    isLoaded: true,
+    create: async () => {},
+  },
+  signOut: {
+    isLoaded: true,
+    create: async () => {},
+  },
+  setActive: async () => {},
+  getActive: async () => {},
+})
+
+/* --- useOrganisation() ----------------------------------------------------------------------- */
+
+export const useOrganisation = () => ({
+  isLoaded: true,
+  organisation: null,
+  setOrganisation: async () => {},
+  getOrganisation: async () => {},
+})
+
+/* --- useOrganisationList() ------------------------------------------------------------------- */
+
+export const useOrganisationList = () => ({
+  isLoaded: true,
+  organisationList: [],
+  setOrganisationList: async () => {},
+  getOrganisationList: async () => {},
+})
+
+/* --- useSession() ----------------------------------------------------------------------------- */
+
+export const useSession = () => ({
+  isLoaded: true,
+  isSignedIn: false,
+  session: null,
+  user: null,
+  signUp: {
+    isLoaded: true,
+    create: async () => {},
+    prepareEmailAddressVerification: async () => {},
+  },
+  signIn: {
+    isLoaded: true,
+    create: async () => {},
+  },
+  signOut: {
+    isLoaded: true,
+    create: async () => {},
+  },
+  setActive: async () => {},
+  getActive: async () => {},
+})
+
+/* --- useSignIn() ------------------------------------------------------------------------------ */
+
+export const useSignIn = () => ({
+  isLoaded: true,
+  signIn: {
+    isLoaded: true,
+    create: async () => {},
+  },
+})
+
+/* --- useSignUp() ------------------------------------------------------------------------------ */
+
+export const useSignUp = () => ({
+  isLoaded: true,
+  signUp: {
+    isLoaded: true,
+    create: async () => {},
+    prepareEmailAddressVerification: async () => {},
+  },
+})
+
+/* --- useUser() ------------------------------------------------------------------------------- */
+
+export const useUser = () => ({
+  isLoaded: true,
+  user: null,
+  setUser: async () => {},
+  getUser: async () => {},
+})
+
+/* --- useWarmUpBrowser() ---------------------------------------------------------------------- */
+
+export const useWarmUpBrowser = () => {}

.storybook/__mocks__/@aetherspace-clerk-auth/schemas/index.ts

@@ -0,0 +1 @@
+export * from '../../../../packages/@aetherspace-clerk-auth/schemas'

.storybook/__mocks__/aetherspaceNavigation.tsx → .storybook/__mocks__/aetherspace/navigation/index.tsx

@@ -3,11 +3,11 @@ import React from 'react'
 import { useMemo } from 'react'
 import { action } from '@storybook/addon-actions'
 import { create as createTailwindWithConfig } from 'twrnc'
-import { AetherText, AetherView } from '../../packages/@aetherspace/primitives'
-import { useAetherRoute } from '../../packages/@aetherspace/navigation/useAetherRoute'
-import { fetchAetherProps } from '../../packages/@aetherspace/navigation/fetchAetherProps'
-import { getEnvVar } from '../../packages/@aetherspace/utils'
-import tailwindConfig from '../../features/app-core/tailwind.config'
+import { AetherText, AetherView } from '../../../../packages/@aetherspace/primitives'
+import { useAetherRouteData } from '../../../../packages/@aetherspace/navigation/useAetherRouteData'
+import { fetchAetherProps } from '../../../../packages/@aetherspace/navigation/fetchAetherProps'
+import { getEnvVar } from '../../../../packages/@aetherspace/utils'
+import tailwindConfig from '../../../../features/app-core/tailwind.config'
 
 /* --- Styles ---------------------------------------------------------------------------------- */
 
@@ -86,5 +86,5 @@ export const AetherLink = (props) => {
 
 /* --- Exports --------------------------------------------------------------------------------- */
 
-export { useAetherRoute, fetchAetherProps }
+export { useAetherRouteData, fetchAetherProps }
 export const Link = AetherLink

.storybook/main.js

@@ -55,7 +55,9 @@ module.exports = {
         config.resolve.alias['react-native$'] = require.resolve('react-native-web')
         // Other aliases for web support (https://github.com/expo/expo/issues/21469#issuecomment-1576001543)
         config.resolve.alias['expo-asset'] = 'expo-asset-web'
-        config.resolve.alias['aetherspace/navigation'] = require.resolve('./__mocks__/aetherspaceNavigation.tsx')
+        config.resolve.alias['aetherspace/navigation'] = require.resolve('./__mocks__/aetherspace/navigation/index.tsx')
+        config.resolve.alias['@aetherspace/clerk-auth/schemas'] = require.resolve('./__mocks__/@aetherspace-clerk-auth/schemas/index.ts')
+        config.resolve.alias['@aetherspace/clerk-auth/hooks'] = require.resolve('./__mocks__/@aetherspace-clerk-auth/hooks/index.tsx')
         config.resolve.extensions.push('.ts', '.tsx')
         config.resolve.fallback = {
           ...config.resolve.fallback,
@@ -64,6 +66,7 @@ module.exports = {
           zlib: false,
           http: false,
           stream: false,
+          fs: false
         }
         // Compatibility
         config.optimization = {

.storybook/plugins/README.md

@@ -1,16 +1,32 @@
+<img src="/packages/@aetherspace/assets/AetherspaceLogo.svg" width="50" height="50" />
+
 # Aetherspace Plugin Branches
 
-While you can use any package you want in your Aetherspace monorepo, we've created a few plugin branches to make your life easier.
+While you can use any package you want in your Aetherspace monorepo, we've created a few merge ready plugin branches to make the starterkit even more plug & play using git.
+
+Some example use cases:
+- Need to provide cross-platform authentication? (e.g. using Clerk) -> `git merge with/clerk-auth`
+- Need to convert .svg files into cross-platform Icon components, or use known ones? -> `git merge with/green-stack-icons`
+- Need utils to turn your single sources of truth into DB models? (e.g. for Mongoose? -> `git merge with/mongoose`)
+
+Plugins are branches that you can merge (or copy) into your repo, and they'll usually add tools for aetherspace specific ways of working:
+- `schemas/` - single sources of truth for the package / solution / plugin (e.g. Clerk auth, Mongoose, ...) and typescript types
+- `routes/` - example pages and API routes to integrate the selected solution into your app
+- `scripts/` - scripts to generate code from your schemas or assets (e.g. CRUD resolver generators for your DB models)
 
-Some example use cases of merging in these plugin branches from the starter repo:
-- Scripts to generate code from your schemas or assets (like converting .svg `with/green-stack-icons`)
-- Utils to turn your schemas into models for your database (like on the `with/mongoose` branch)
-- Extra helpers to make your life easier or integrate better with third party tools
+... as well as `components/`, `hooks/`, `screens/`, `styles/`, `utils/` and more to optimize integrations through:
+- ✅ Optimizing for cross-platform (Expo + Next.js) development
+- ✅ Integrating with your [Single sources of truth](/packages/@aetherspace/schemas/README.md)
+- ✅ Adding code generators to skip manual boilerplate
 
 ---
-> 💚 To use plugin branches, you do need [access to the official green-stack-starter](https://github.com/sponsors/codinsonn).
+> **💚 To use plugin branches, you do need [access to the official green-stack-starter](https://github.com/sponsors/codinsonn):**
 ---
 
+![GithubTemplateRepo.png](/.storybook/public/GithubTemplateRepo.png)
+
+![GithubTemplateRepoWithPlugins.png](/.storybook/public/GithubTemplateRepoWithPlugins.png)
+
 While generating your repo from there, you can choose to "✅ include all branches".  
 Or, if you've already generated your repo, you can merge in the branches manually.