Merge pull request #1537 from dev-launchers/master

Release 2.12.0

.github/CODEOWNERS

@@ -4,8 +4,11 @@ packages/ @dev-launchers/platform-enablement
 # Ideaspace code
 apps/ideaspace/ @dev-launchers/ideaspace-team
 
+# UserProfile code
+apps/user-profile/ @dev-launchers/User-profile
+
 # Recruitment code
-apps/dev-recruiters/ @dev-launchers/dev-recruit-team
+apps/dev-recruiters/ @dev-launchers/dev-recruit 
 
 # Website code
 apps/website/ @Enjoy2Live @pyxld-kris
@@ -14,7 +17,7 @@ apps/website/ @Enjoy2Live @pyxld-kris
 apps/app/ @Enjoy2Live @pyxld-kris
 
 # Code in the backend directory
-strapiv4/ @dev-launchers/backend-devs
+strapiv4/ @dev-launchers/Backend-Devs
 
 # Deps
-package.json @Enjoy2Live
+package.json @Enjoy2Live

.github/workflows/chromatic.yml

@@ -15,7 +15,6 @@ jobs:
   deploy:
     # The operating system it will run on
     runs-on: ubuntu-latest
-    continue-on-error: true
     outputs:
       url: ${{ steps.chromatic.outputs.url }}
       buildUrl: ${{ steps.chromatic.outputs.buildUrl }}
@@ -41,6 +40,9 @@ jobs:
       - name: install deps
         run: corepack enable && yarn
 
+      - name: generate css
+        run: yarn workspace @devlaunchers/tailwind build-tw
+
         #👇 Adds Chromatic as a step in the workflow
       - name: Chromatic
         uses: chromaui/action@v1
@@ -52,7 +54,7 @@ jobs:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
           token: ${{ secrets.GITHUB_TOKEN }}
           onlyChanged: true
-      - name: Run Storybook tests
-        run: yarn test-storybook
-        env:
-          TARGET_URL: ${{ steps.chromatic.outputs.storybookUrl }}
+#       - name: Run Storybook tests
+#         run: yarn test-storybook
+#         env:
+#           TARGET_URL: ${{ steps.chromatic.outputs.storybookUrl }}

.github/workflows/create-tokens.yml

@@ -0,0 +1,24 @@
+name: CI
+on: 
+  push:
+    branches:
+      - "development/design-team"
+    paths: 
+      - "packages/tailwind-constructor/tokens.json"
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Setup Node.js environment
+        uses: actions/setup-node@v2.4.0
+      # Install dependencies
+      - run: yarn
+      # Transform Figma Tokens JSON to something Style Dictionary can read, run Style Dictionary and later run Tailwind
+      - run: yarn workspace @devlaunchers/tailwind build
+      # Add files that were created during a run, e.g. created files from style dictionary or token-transformer.
+      - uses: stefanzweifel/git-auto-commit-action@v4
+        with:
+          commit_message: Update Tokens

.github/workflows/staging-apps.yaml

@@ -13,6 +13,8 @@ on:
       - 'staging/website[1-2]'
       - 'staging/user-profile'
       - 'staging/user-profile[1-2]'
+      - 'staging/gptbot'
+      - 'staging/gptbot[1-2]'
 
 jobs:
   Publish:
@@ -44,13 +46,23 @@ jobs:
         shell: bash
         run: "sed -ie 's$unoptimized: false$unoptimized: true$g' ./apps/app/next.config.js"
 
+      - name: Change environment to the app specific subdomains
+        run: "sed -ie 's$https://staging.devlaunchers.org$https://${{ steps.extract_branch.outputs.branch }}.devlaunchers.org$g' ./apps/app/.env.staging"
+
+      - name: Change environment to staging
+        run: mv apps/app/.env.staging apps/app/.env.production
+
+      - name: generate css
+        run: yarn workspace @devlaunchers/tailwind build-tw
+
       - name: Run build
         run: yarn workspace @devlaunchers/app build
 
       - name: Export
         run: yarn workspace @devlaunchers/app export
 
       - name: Publish
+        if: ${{ !env.ACT }}
         uses: cloudflare/pages-action@v1
         with:
           apiToken: ${{ secrets.CLOUDFLARE_API_TOKEN }}

.github/workflows/test.yaml

@@ -30,4 +30,6 @@ jobs:
           push: false
           # Get cache from latest build on main branch
           cache-from: type=gha
-          # Don't set cache-to which will export the cache
+          # Don't set cache-to which will export the cache
+          build-args: |
+            NODE_ENV=staging

.gitignore

@@ -69,3 +69,6 @@ yarn-error.log*
 
 # Storybook
 storybook-static
+
+# Tailwind
+packages/tailwind-constructor/tailwind.css

.vscode/typescriptreact.code-snippets

@@ -0,0 +1,51 @@
+{
+	"Create a component": {
+		"prefix": "comp",
+		"body": [
+		  "import * as React from 'react';",
+		  "import { tv, type VariantProps } from 'tailwind-variants';",
+		  "",
+		  "const $1Styles = tv({",
+		  "  slots: {$2},",
+		  "  variants: {$3},",
+		  "});",
+		  "",
+		  "interface $1Props extends VariantProps<typeof $1Styles> {}",
+		  "",
+		  "const $1 = ({}: $1Props) => {",
+		  "  return <div>$0</div>;",
+		  "};",
+		  "",
+		  "$1.displayName = '$1';",
+		  "export default $1;",
+		  ""
+		],
+		"description": "Create a component"
+  },
+  "create a sample story": {
+		"prefix": "story",
+		"body": [
+		  "import type { Meta, StoryObj } from '@storybook/react';",
+		  "",
+		  "import $1 from './$1';",
+		  "",
+		  "const meta: Meta<typeof $1> = {",
+		  "  component: $1,",
+		  "};",
+		  "",
+		  "export default meta;",
+		  "type Story = StoryObj<typeof $1>;",
+		  "",
+		  "/*",
+		  " *👇 Render functions are a framework specific feature to allow you control on how the component renders.",
+		  " * See https://storybook.js.org/docs/react/api/csf",
+		  " * to learn how to use render functions.",
+		  " */",
+		  "export const Primary: Story = {",
+		  "  render: () => <$1 />,",
+		  "};",
+		  ""
+		],
+		"description": "create a sample story"
+  }
+}

Dockerfile

@@ -84,6 +84,7 @@ COPY --from=deps /workspace-install ./
 RUN if [ "${NODE_ENV}" = "staging" ]; then mv ./apps/app/.env.staging ./apps/app/.env.production ; fi
 
 # # Optional: if the app depends on global /static shared assets like images, locales...
+RUN yarn workspace @devlaunchers/tailwind build-tw
 RUN yarn workspace @devlaunchers/app build
 
 # Does not play well with buildkit on CI

README.md

@@ -22,11 +22,11 @@ Visit https://www.volunteermatch.org/s/srp/orgOpps?org=1189675 to join one of ou
 
 1. Clone the repo
 
-2. Install: `yarn`
+2. Install dependencies: `yarn install`
 
-3. Install project dependencies: `yarn install`
+3. Run the tailwindcss compiler: `yarn workspace @devlaunchers/tailwind dev`
 
-4. Run dev version: `yarn workspace @devlaunchers/app dev`
+4. Run the app's development server: `yarn workspace @devlaunchers/app dev`
 
 ---
 

apps/app/.env.development

@@ -1,5 +1,7 @@
 NEXT_PUBLIC_NAME=DEVELOPMENT
-NEXT_PUBLIC_API_URL=https://api-staging.devlaunchers.org
-NEXT_PUBLIC_STRAPI_URL=https://api-staging.devlaunchers.org
-NEXT_PUBLIC_GOOGLE_AUTH_URL=https://api-staging.devlaunchers.org/connect/google
-NEXT_PUBLIC_DISCORD_AUTH_URL=https://discord.com/api/oauth2/authorize?client_id=815294711983112194&redirect_uri=https%3A%2F%2Fapi-staging.devlaunchers.org%2Fusers%2Fauth%2Fdiscord%2Fcallback&response_type=code&scope=identify
+NEXT_PUBLIC_API_BASE_URL=https://apiv4-staging.devlaunchers.org
+NEXT_PUBLIC_API_URL=https://apiv4-staging.devlaunchers.org/api
+NEXT_PUBLIC_STRAPI_URL=https://apiv4-staging.devlaunchers.org/api
+NEXT_PUBLIC_GOOGLE_AUTH_URL=https://apiv4-staging.devlaunchers.org/api/connect/google
+NEXT_PUBLIC_DISCORD_AUTH_URL=https://discord.com/api/oauth2/authorize?client_id=815294711983112194&redirect_uri=https%3A%2F%2Fapi-staging.devlaunchers.org%2Fusers%2Fauth%2Fdiscord%2Fcallback&response_type=code&scope=identify
+NEXT_PUBLIC_FRONT_END_URL=http://localhost:3000

apps/app/.env.production

@@ -1,5 +1,7 @@
 NEXT_PUBLIC_NAME=PRODUCTION
-NEXT_PUBLIC_API_URL=https://api.devlaunchers.org
-NEXT_PUBLIC_STRAPI_URL=https://api.devlaunchers.org
-NEXT_PUBLIC_GOOGLE_AUTH_URL=https://api.devlaunchers.org/connect/google
-NEXT_PUBLIC_DISCORD_AUTH_URL=https://discord.com/api/oauth2/authorize?client_id=709889509864636496&redirect_uri=https%3A%2F%2Fapi.devlaunchers.org%2Fusers%2Fauth%2Fdiscord%2Fcallback&response_type=code&scope=identify
+NEXT_PUBLIC_API_BASE_URL=https://apiv4.devlaunchers.org
+NEXT_PUBLIC_API_URL=https://apiv4.devlaunchers.org/api
+NEXT_PUBLIC_STRAPI_URL=https://apiv4.devlaunchers.org/api
+NEXT_PUBLIC_GOOGLE_AUTH_URL=https://apiv4.devlaunchers.org/api/connect/google
+NEXT_PUBLIC_DISCORD_AUTH_URL=https://discord.com/api/oauth2/authorize?client_id=709889509864636496&redirect_uri=https%3A%2F%2Fapi.devlaunchers.org%2Fusers%2Fauth%2Fdiscord%2Fcallback&response_type=code&scope=identify
+NEXT_PUBLIC_FRONT_END_URL=https://devlaunchers.org

apps/app/.env.staging

@@ -1,5 +1,7 @@
 NEXT_PUBLIC_NAME=STAGING
-NEXT_PUBLIC_API_URL=https://api-staging.devlaunchers.org
-NEXT_PUBLIC_STRAPI_URL=https://api-staging.devlaunchers.org
-NEXT_PUBLIC_GOOGLE_AUTH_URL=https://api-staging.devlaunchers.org/connect/google
-NEXT_PUBLIC_DISCORD_AUTH_URL=https://discord.com/api/oauth2/authorize?client_id=815294711983112194&redirect_uri=https%3A%2F%2Fapi-staging.devlaunchers.org%2Fusers%2Fauth%2Fdiscord%2Fcallback&response_type=code&scope=identify
+NEXT_PUBLIC_API_BASE_URL=https://apiv4-staging.devlaunchers.org
+NEXT_PUBLIC_API_URL=https://apiv4-staging.devlaunchers.org/api
+NEXT_PUBLIC_STRAPI_URL=https://apiv4-staging.devlaunchers.org/api
+NEXT_PUBLIC_GOOGLE_AUTH_URL=https://apiv4-staging.devlaunchers.org/api/connect/google
+NEXT_PUBLIC_DISCORD_AUTH_URL=https://discord.com/api/oauth2/authorize?client_id=815294711983112194&redirect_uri=https%3A%2F%2Fapi-staging.devlaunchers.org%2Fusers%2Fauth%2Fdiscord%2Fcallback&response_type=code&scope=identify
+NEXT_PUBLIC_FRONT_END_URL=https://staging.devlaunchers.org

apps/app/.env.test

@@ -1,5 +1,7 @@
 NEXT_PUBLIC_NAME=STAGING
+NEXT_PUBLIC_API_BASE_URL=https://api-staging.devlaunchers.org
 NEXT_PUBLIC_API_URL=https://api-staging.devlaunchers.org
 NEXT_PUBLIC_STRAPI_URL=https://api-staging.devlaunchers.org
 NEXT_PUBLIC_GOOGLE_AUTH_URL=https://api-staging.devlaunchers.org/connect/google
-NEXT_PUBLIC_DISCORD_AUTH_URL=https://discord.com/api/oauth2/authorize?client_id=815294711983112194&redirect_uri=https%3A%2F%2Fapi-staging.devlaunchers.org%2Fusers%2Fauth%2Fdiscord%2Fcallback&response_type=code&scope=identify
+NEXT_PUBLIC_DISCORD_AUTH_URL=https://discord.com/api/oauth2/authorize?client_id=815294711983112194&redirect_uri=https%3A%2F%2Fapi-staging.devlaunchers.org%2Fusers%2Fauth%2Fdiscord%2Fcallback&response_type=code&scope=identify
+NEXT_PUBLIC_FRONT_END_URL=http://localhost:3000

apps/app/next.config.js

@@ -35,7 +35,10 @@ const nextConfig = {
     domains: [
       'images.prismic.io',
       'devlaunchersproduction.blob.core.windows.net',
+      'devlaunchersstaging.blob.core.windows.net',
       'lh3.googleusercontent.com',
+      'localhost',
+      'apiv4-staging.devlaunchers.org'
     ],
     disableStaticImages: true,
     unoptimized: false

apps/app/package.json

@@ -9,6 +9,7 @@
     "@devlaunchers/dev-recruiters": "workspace:^",
     "@devlaunchers/ideaspace": "*",
     "@devlaunchers/site-projects": "*",
+    "@devlaunchers/tailwind": "workspace:*",
     "@devlaunchers/website": "*",
     "@next/env": "^12.2.3",
     "@ramonak/react-progress-bar": "^5.0.2",
@@ -17,6 +18,7 @@
     "autosave": "^1.0.3",
     "axios": "^0.27.2",
     "constate": "^3.3.2",
+    "formik": "^2.2.9",
     "luxon": "^3.0.1",
     "next": "^12.2.3",
     "next-compose-plugins": "^2.2.1",

apps/app/pages/_app.js

@@ -13,6 +13,7 @@ import { ThemeProvider } from 'styled-components';
 import theme from '../styles/theme';
 import Script from 'next/script';
 import iubendaScript from '../scripts/iubendaScript';
+import '@devlaunchers/tailwind/tailwind.css';
 
 const hashRedirect = (router) => {
   // Strip out hash from url (if any) so we can transition from HashRouter to BrowserRouter

apps/dev-recruiters/src/components/common/Footer/Newsletter/Newsletter.js

@@ -9,7 +9,6 @@ import {
   Secret,
 } from "./StyledNewsletter";
 import validateEmail from "@utils/ValidateEmail";
-import { env } from "@utils/EnvironmentVariables";
 
 const NewsLetter = (props) => {
   const [email, setEmail] = useState("");
@@ -25,7 +24,7 @@ const NewsLetter = (props) => {
       setCheck(true);
     } else {
       axios
-        .post(`${env().STRAPI_URL}/newsletters`, {
+        .post(`${process.env.NEXT_PUBLIC_STRAPI_URL}/newsletters`, {
           email,
         })
         .then(() => {
@@ -53,7 +52,7 @@ const NewsLetter = (props) => {
           }}
         >
           →{" "}
-          <Secret href="https://devlaunchers.org/hangout">
+          <Secret href={process.env.NEXT_PUBLIC_FRONT_END_URL + "/hangout"}>
             <span>😄</span>
           </Secret>{" "}
           ←