feature: setup separate subscription site in firebase and new workspa…

…ce vite app (#202)

* feature: setup separate subscription app and site in firebase

* fix: setup eslint for the new project and fix formatting

* ci: add firebase hosting targets

* fix: simplify site

* ci: upgrade turbo

* fix: update base_url for the new app

* feat(subscription): init subscription markup (#203)

* feat(subscription): init subscription markup

* chore: separate subscription assets

* chore: separate subscription assets

* chore: separate subscription assets

* chore: separate subscription assets

* chore: separate subscription assets

* chore: separate subscription assets

* fix: header offset

* feat(subscription): add localization (#206)

* chore: remove unused

* fix: prerender

* fix: video

* ci: use lfs when checking out site

* fix: link for default locale should just be `/`

---------

Co-authored-by: Stanislav Holts <[email protected]>

.eslintrc.js

@@ -8,6 +8,7 @@ module.exports = {
       './apps/dashboard/tsconfig.json',
       './apps/widget/tsconfig.json',
       './apps/landing/tsconfig.json',
+      './apps/subscription/tsconfig.json',
     ],
     tsconfigRootDir: __dirname,
   },
@@ -21,7 +22,7 @@ module.exports = {
   },
   overrides: [
     {
-      files: ['**/*.ts', '**/*.tsx', '**/*.js'],
+      files: ['**/*.{ts,tsx,js}'],
       rules: {
         '@typescript-eslint/naming-convention': 'off',
         '@typescript-eslint/no-unsafe-return': 'off',
@@ -67,7 +68,7 @@ module.exports = {
       },
     },
     {
-      files: ['apps/{widget,landing,dashboard}/**/*.{ts,tsx,js}'],
+      files: ['apps/{widget,landing,dashboard,subscription}/**/*.{ts,tsx,js}'],
       rules: {
         'react/react-in-jsx-scope': 'off',
       },

.firebaserc

@@ -1,5 +1,17 @@
 {
   "projects": {
     "default": "stand-with-ukraine-bc-app"
+  },
+  "targets": {
+    "stand-with-ukraine-bc-app": {
+      "hosting": {
+        "main": [
+          "stand-with-ukraine-bc-app"
+        ],
+        "subscription": [
+          "subscription-stand-with-ukraine-bc-app"
+        ]
+      }
+    }
   }
-}
+}

.gitattributes

@@ -1 +1,4 @@
 .yarn/** linguist-vendored
+static/**/*.webm filter=lfs diff=lfs merge=lfs -text
+static/**/*.mp4 filters=lfs diff=lfs merge=lfs -text
+static/**/*.mp4 filter=lfs diff=lfs merge=lfs -text

.github/workflows/main.yml

@@ -15,6 +15,8 @@ jobs:
     steps:
       - name: Checkout
         uses: actions/checkout@v4
+        with:
+          lfs: 'true'
 
       - uses: actions/setup-node@v4
         with:

apps/subscription/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

apps/subscription/package.json

@@ -0,0 +1,34 @@
+{
+  "name": "subscription",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc && vite build && rm -rf ../../build/subscription && cp -R ../../build/.subscription/client ../../build/subscription",
+    "preview": "vite preview",
+    "lint": "tsc --noEmit",
+    "clean": "rm -rf .turbo && rm -rf node_modules && rm -rf dist"
+  },
+  "dependencies": {
+    "config": "*",
+    "lazysizes": "^5.3.2",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
+    "swiper": "^9.4.1",
+    "video.js": "^8.8.0"
+  },
+  "devDependencies": {
+    "@types/react": "^18.2.55",
+    "@types/react-dom": "^18.2.18",
+    "@types/styled-components": "^5.1.34",
+    "@vitejs/plugin-react": "^4.2.1",
+    "react-streaming": "^0.3.20",
+    "styled-components": "^5.3.6",
+    "tsconfig": "workspace:^",
+    "typescript": "^5.3.3",
+    "vike": "^0.4.160",
+    "vite": "^5.0.12",
+    "vite-plugin-svgr": "^4.2.0"
+  }
+}

apps/subscription/public

@@ -0,0 +1 @@
+../../static/

apps/subscription/src/components/Button.tsx

@@ -0,0 +1,60 @@
+import styled, { css } from 'styled-components';
+
+interface ButtonProps {
+  fullWidth?: boolean;
+  margin?: string;
+  variant?: 'light' | 'dark';
+}
+
+const getBackground = (variant: ButtonProps['variant'] = 'dark') => css`
+  color: ${variant === 'dark' ? '#fff' : '#4C4B58'};
+  background-position-x: -400px;
+  background-position-y: -400px;
+  background-repeat: no-repeat;
+  background-size: 950px 690px;
+  background-image: ${variant === 'dark'
+    ? 'linear-gradient(to bottom right,#ffd500 50%,#121118 0)'
+    : 'linear-gradient(to bottom right,#ffd500 50%,#fff 0)'};
+
+  &:hover {
+    color: #4c4b58;
+    background-position-x: 0;
+    background-position-y: 0;
+  }
+`;
+
+const getTransition = () => css`
+  transition: all 0.3s cubic-bezier(0.85, 0, 0.4, 1);
+`;
+
+const getBaseStyles = ({ fullWidth, margin = '0', variant }: ButtonProps) => css`
+  cursor: pointer;
+  display: inline-block;
+  padding: 1.4rem 2.5rem;
+  width: ${fullWidth ? '100%' : 'auto'};
+  border: 0;
+  border-radius: 0.5rem;
+  font-size: 1.3rem;
+  margin: ${margin};
+  letter-spacing: 0.1rem;
+  text-transform: uppercase;
+  text-align: center;
+
+  &[disabled] {
+    opacity: 0.5;
+    pointer-events: none;
+  }
+
+  ${getBackground(variant)}
+  ${getTransition()}
+`;
+
+export const Button = styled.button<ButtonProps>`
+  ${(props) => getBaseStyles(props)}
+`;
+
+export const ButtonLink = styled.a<ButtonProps>`
+  text-decoration: none;
+
+  ${(props) => getBaseStyles(props)}
+`;

apps/subscription/src/components/Input.tsx

@@ -0,0 +1,86 @@
+import { InputHTMLAttributes, useState } from 'react';
+import styled, { css } from 'styled-components';
+
+interface Props {
+  label: string;
+  error?: string;
+}
+
+const StyledLabel = styled.label<{ isError: boolean; isSmall: boolean }>`
+  color: #5d5d69;
+  cursor: text;
+  font-size: 1.7rem;
+  line-height: 3rem;
+  overflow: hidden;
+  position: absolute;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  transform-origin: 0 0;
+  transition: transform 0.2s ease;
+
+  ${({ isSmall }) =>
+    isSmall &&
+    css`
+      transform: scale(0.7) translateY(-70%);
+    `}
+
+  ${({ isError }) =>
+    isError &&
+    css`
+      color: #b20a0a;
+    `}
+`;
+
+const StyledInput = styled.input<{ isError: boolean }>`
+  border: 0;
+  border-bottom: 1px solid #121118;
+  height: 3rem;
+  width: 100%;
+
+  ${({ isError }) =>
+    isError &&
+    css`
+      border-color: #b20a0a;
+    `}
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+const StyledError = styled.div`
+  color: #b20a0a;
+  font-size: 1.3rem;
+  padding: 0.5rem 0;
+`;
+
+const StyledContainer = styled.div`
+  margin-bottom: 4rem;
+  padding-top: 1rem;
+  position: relative;
+`;
+
+export const Input = ({
+  label,
+  error,
+  ...inputProps
+}: Props & InputHTMLAttributes<HTMLInputElement>) => {
+  const [isFocused, setIsFocused] = useState(false);
+  const nextId = inputProps.id ?? label.toLowerCase().replace(' ', '_');
+
+  return (
+    <StyledContainer>
+      <StyledLabel htmlFor={nextId} isError={!!error} isSmall={isFocused || !!inputProps.value}>
+        {label}
+      </StyledLabel>
+      <StyledInput
+        {...inputProps}
+        id={nextId}
+        isError={!!error}
+        onBlur={() => setIsFocused(false)}
+        onFocus={() => setIsFocused(true)}
+      />
+      {!!error && <StyledError>{error}</StyledError>}
+    </StyledContainer>
+  );
+};