Merge pull request #832 from WestpacGEL/develop

Develop
WestpacGEL · Jul 30, 2024 · 537551a · 537551a
2 parents a6c00b8 + 74df4d5
commit 537551a
Show file tree

Hide file tree

Showing 19 changed files with 638 additions and 95 deletions.
diff --git a/apps/playground/.eslintrc.json b/apps/playground/.eslintrc.json
@@ -0,0 +1,3 @@
+{
+  "extends": "next/core-web-vitals"
+}
diff --git a/apps/playground/.gitignore b/apps/playground/.gitignore
@@ -0,0 +1,36 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+.yarn/install-state.gz
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env*.local
+
+# vercel
+.vercel
+
+# typescript
+*.tsbuildinfo
+next-env.d.ts
diff --git a/apps/playground/README.md b/apps/playground/README.md
@@ -0,0 +1,36 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+# or
+pnpm dev
+# or
+bun dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `app/page.tsx`. The page auto-updates as you edit the file.
+
+This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
diff --git a/apps/playground/next.config.mjs b/apps/playground/next.config.mjs
@@ -0,0 +1,4 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {};
+
+export default nextConfig;
diff --git a/apps/playground/package.json b/apps/playground/package.json
@@ -0,0 +1,28 @@
+{
+  "name": "playground",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint",
+    "lint:fix": "next lint --fix"
+  },
+  "dependencies": {
+    "next": "14.2.5",
+    "react": "^18",
+    "react-dom": "^18",
+    "zustand": "~4.5.4"
+  },
+  "devDependencies": {
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.2.5",
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
+  }
+}
diff --git a/apps/playground/postcss.config.mjs b/apps/playground/postcss.config.mjs
@@ -0,0 +1,8 @@
+/** @type {import('postcss-load-config').Config} */
+const config = {
+  plugins: {
+    tailwindcss: {},
+  },
+};
+
+export default config;
diff --git a/apps/playground/public/next.svg b/apps/playground/public/next.svg
diff --git a/apps/playground/public/vercel.svg b/apps/playground/public/vercel.svg
diff --git a/apps/playground/src/app/favicon.ico b/apps/playground/src/app/favicon.ico
diff --git a/apps/playground/src/app/globals.css b/apps/playground/src/app/globals.css
@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
diff --git a/apps/playground/src/app/layout.tsx b/apps/playground/src/app/layout.tsx
@@ -0,0 +1,23 @@
+import { type Metadata } from 'next';
+import { Inter } from 'next/font/google';
+
+import './globals.css';
+
+const inter = Inter({ subsets: ['latin'] });
+
+export const metadata: Metadata = {
+  title: 'GEL Playground',
+  description: 'GEl Playground',
+};
+
+export default function RootLayout({
+  children,
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body className={inter.className}>{children}</body>
+    </html>
+  );
+}
diff --git a/apps/playground/src/app/page.tsx b/apps/playground/src/app/page.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import { Card } from '@/components/card/card.component';
+import { useThemeStore } from '@/theme/theme.store';
+import { BrandKey } from '@/theme/theme.types';
+
+export default function Home() {
+  const { activeThemeKey, setTheme } = useThemeStore();
+  return (
+    <main className="flex min-h-screen flex-col items-center justify-between p-24">
+      <ul className="flex w-1/2 flex-col gap-5">
+        <div className="flex flex-col gap-2">
+          <label className="font-bold">Select brand</label>
+          <select value={activeThemeKey} onChange={e => setTheme(e.target.value as BrandKey)} className="border p-2">
+            <option value="wbc">Westpac</option>
+            <option value="stg">St. George</option>
+            <option value="bom">Bank of Melbourne</option>
+            <option value="bsa">BankSA</option>
+          </select>
+        </div>
+        <Card active />
+        <Card brand="wbc" />
+        <Card brand="stg" />
+        <Card brand="bom" />
+        <Card brand="bsa" />
+      </ul>
+    </main>
+  );
+}
diff --git a/apps/playground/src/components/card/card.component.tsx b/apps/playground/src/components/card/card.component.tsx
@@ -0,0 +1,28 @@
+'use client';
+
+import { useThemeStore } from '@/theme/theme.store';
+import { BrandKey } from '@/theme/theme.types';
+
+export function Card({ active, brand = 'wbc' }: { active?: boolean; brand?: BrandKey }) {
+  const { themes, activeTheme, activeThemeKey, brandName } = useThemeStore();
+  return (
+    <li
+      style={{ borderColor: activeTheme.border }}
+      className="flex content-center justify-center gap-3 rounded border p-4"
+    >
+      <div
+        style={{ backgroundColor: active ? activeTheme.primary : themes[brand].primary }}
+        className="size-16 shrink-0 rounded-full"
+      />
+      <div>
+        <h3 style={{ color: active ? activeTheme.hero : themes[brand].hero }} className="mb-2 text-xl font-bold">
+          {active ? `Active brand: ${brandName[activeThemeKey]}` : brandName[brand]}
+        </h3>
+        <p style={{ color: active ? activeTheme.text : themes[brand].text }}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua.
+        </p>
+      </div>
+    </li>
+  );
+}
diff --git a/apps/playground/src/theme/theme.store.ts b/apps/playground/src/theme/theme.store.ts
@@ -0,0 +1,30 @@
+import { create } from 'zustand';
+
+import { BrandKey, Theme } from './theme.types';
+import { BOMTheme, BSATheme, STGTheme, WBCTheme } from './themes';
+
+type ThemeState = {
+  activeTheme: Theme;
+  activeThemeKey: BrandKey;
+  brandName: Record<BrandKey, string>;
+  setTheme: (theme: BrandKey) => void;
+  themes: Record<BrandKey, Theme>;
+};
+
+export const useThemeStore = create<ThemeState>()(set => ({
+  activeTheme: WBCTheme,
+  activeThemeKey: 'wbc',
+  brandName: {
+    wbc: 'Westpac',
+    stg: 'St. George',
+    bom: 'Bank of Melbourne',
+    bsa: 'BankSA',
+  },
+  setTheme: theme => set(state => ({ activeThemeKey: theme, activeTheme: state.themes[theme] })),
+  themes: {
+    wbc: WBCTheme,
+    bom: BOMTheme,
+    bsa: BSATheme,
+    stg: STGTheme,
+  },
+}));
diff --git a/apps/playground/src/theme/theme.types.ts b/apps/playground/src/theme/theme.types.ts
@@ -0,0 +1,5 @@
+export type BrandKey = 'bom' | 'bsa' | 'stg' | 'wbc';
+
+export type ColorKey = 'primary' | 'hero' | 'text' | 'border';
+
+export type Theme = Record<ColorKey, string>;
diff --git a/apps/playground/src/theme/themes.ts b/apps/playground/src/theme/themes.ts
@@ -0,0 +1,29 @@
+import { Theme } from './theme.types';
+
+export const WBCTheme: Theme = {
+  primary: '#DA1710',
+  hero: '#1F1C4F',
+  text: '#181B25',
+  border: '#DEDEE1',
+};
+
+export const STGTheme: Theme = {
+  primary: '#E30000',
+  hero: '#008739',
+  text: '#004833',
+  border: '#D6D5D0',
+};
+
+export const BOMTheme: Theme = {
+  primary: '#D13900',
+  hero: '#534891',
+  text: '#20024E',
+  border: '#D4D4D8',
+};
+
+export const BSATheme: Theme = {
+  primary: '#D81B2B',
+  hero: '#002F6C',
+  text: '#333',
+  border: '#D3D4D5',
+};
diff --git a/apps/playground/tailwind.config.ts b/apps/playground/tailwind.config.ts
@@ -0,0 +1,19 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    './src/pages/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/components/**/*.{js,ts,jsx,tsx,mdx}',
+    './src/app/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      backgroundImage: {
+        'gradient-radial': 'radial-gradient(var(--tw-gradient-stops))',
+        'gradient-conic': 'conic-gradient(from 180deg at 50% 50%, var(--tw-gradient-stops))',
+      },
+    },
+  },
+  plugins: [],
+};
+export default config;
diff --git a/apps/playground/tsconfig.json b/apps/playground/tsconfig.json
@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}