add native and web sdks

apps/test/README.md

@@ -0,0 +1,28 @@
+# Create T3 App
+
+This is a [T3 Stack](https://create.t3.gg/) project bootstrapped with `create-t3-app`.
+
+## What's next? How do I make an app with this?
+
+We try to keep this project as simple as possible, so you can start with just the scaffolding we set up for you, and add additional things later when they become necessary.
+
+If you are not familiar with the different technologies used in this project, please refer to the respective docs. If you still are in the wind, please join our [Discord](https://t3.gg/discord) and ask for help.
+
+- [Next.js](https://nextjs.org)
+- [NextAuth.js](https://next-auth.js.org)
+- [Prisma](https://prisma.io)
+- [Tailwind CSS](https://tailwindcss.com)
+- [tRPC](https://trpc.io)
+
+## Learn More
+
+To learn more about the [T3 Stack](https://create.t3.gg/), take a look at the following resources:
+
+- [Documentation](https://create.t3.gg/)
+- [Learn the T3 Stack](https://create.t3.gg/en/faq#what-learning-resources-are-currently-available) — Check out these awesome tutorials
+
+You can check out the [create-t3-app GitHub repository](https://github.com/t3-oss/create-t3-app) — your feedback and contributions are welcome!
+
+## How do I deploy this?
+
+Follow our deployment guides for [Vercel](https://create.t3.gg/en/deployment/vercel), [Netlify](https://create.t3.gg/en/deployment/netlify) and [Docker](https://create.t3.gg/en/deployment/docker) for more information.

apps/test/next-env.d.ts

@@ -0,0 +1,5 @@
+/// <reference types="next" />
+/// <reference types="next/image-types/global" />
+
+// NOTE: This file should not be edited
+// see https://nextjs.org/docs/basic-features/typescript for more information.

apps/test/next.config.mjs

@@ -0,0 +1,23 @@
+/**
+ * Run `build` or `dev` with `SKIP_ENV_VALIDATION` to skip env validation. This is especially useful
+ * for Docker builds.
+ */
+
+/** @type {import("next").NextConfig} */
+const config = {
+  reactStrictMode: false,
+  transpilePackages: ['@mixan/types', '@mixan/sdk', '@mixan/web-sdk'],
+  eslint: { ignoreDuringBuilds: true },
+  typescript: { ignoreBuildErrors: true },
+  /**
+   * If you are using `appDir` then you must comment the below `i18n` config out.
+   *
+   * @see https://github.com/vercel/next.js/issues/41980
+   */
+  i18n: {
+    locales: ['en'],
+    defaultLocale: 'en',
+  },
+};
+
+export default config;

apps/test/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "@mixan/test",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "eslint .",
+    "format": "prettier --write \"**/*.{tsx,mjs,ts,md,json}\"",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "next": "13.4",
+    "react": "18.2.0",
+    "react-dom": "18.2.0",
+    "@mixan-test/sdk": "workspace:@mixan/sdk@*",
+    "@mixan-test/sdk-web": "workspace:@mixan/sdk-web@*"
+  },
+  "devDependencies": {
+    "@mixan/eslint-config": "workspace:*",
+    "@mixan/prettier-config": "workspace:*",
+    "@mixan/tsconfig": "workspace:*",
+    "@types/react": "^18.2.20",
+    "@types/react-dom": "^18.2.7",
+    "@types/react-syntax-highlighter": "^15.5.9",
+    "@typescript-eslint/eslint-plugin": "^6.6.0",
+    "@typescript-eslint/parser": "^6.6.0",
+    "autoprefixer": "^10.4.14",
+    "eslint": "^8.48.0",
+    "postcss": "^8.4.27",
+    "prettier": "^3.0.3",
+    "prettier-plugin-tailwindcss": "^0.5.1",
+    "tailwindcss": "^3.3.3",
+    "typescript": "^5.2.2"
+  },
+  "ct3aMetadata": {
+    "initVersion": "7.21.0"
+  },
+  "eslintConfig": {
+    "root": true,
+    "extends": [
+      "@mixan/eslint-config/base",
+      "@mixan/eslint-config/nextjs",
+      "@mixan/eslint-config/react"
+    ]
+  },
+  "prettier": "@mixan/prettier-config"
+}

apps/test/postcss.config.cjs

@@ -0,0 +1,8 @@
+const config = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};
+
+module.exports = config;

apps/test/src/analytics.ts

@@ -0,0 +1,11 @@
+import { MixanWeb } from '@mixan-test/sdk-web';
+
+export const mixan = new MixanWeb({
+  verbose: true,
+  url: process.env.NEXT_PUBLIC_MIXAN_URL!,
+  clientId: process.env.NEXT_PUBLIC_MIXAN_CLIENT_ID!,
+  clientSecret: process.env.NEXT_PUBLIC_MIXAN_CLIENT_SECRET!,
+  trackIp: true,
+});
+
+mixan.trackOutgoingLinks();

apps/test/src/pages/_app.tsx

@@ -0,0 +1,15 @@
+import { useEffect } from 'react';
+import { mixan } from '@/analytics';
+import type { AppProps } from 'next/app';
+import { useRouter } from 'next/router';
+
+export default function MyApp({ Component, pageProps }: AppProps) {
+  const router = useRouter();
+  useEffect(() => {
+    mixan.init();
+    return router.events.on('routeChangeComplete', () => {
+      mixan.screenView();
+    });
+  }, []);
+  return <Component {...pageProps} />;
+}

apps/test/src/pages/index.tsx

@@ -0,0 +1,14 @@
+import Link from 'next/link';
+
+export default function Home() {
+  return (
+    <div className="flex flex-col gap-2">
+      <Link href="/test">Test</Link>
+      <a href="https://google.se">Google</a>
+      <a href="https://kiddokitchen.se">KiddoKitchen</a>
+      <a href="https://kiddokitchen.se" target="_blank" rel="noreferrer">
+        KiddoKitchen (_blank)
+      </a>
+    </div>
+  );
+}

apps/test/src/pages/test.tsx

@@ -0,0 +1,9 @@
+import Link from 'next/link';
+
+export default function Test() {
+  return (
+    <div>
+      <Link href="/">Home</Link>
+    </div>
+  );
+}

apps/test/tailwind.config.js

@@ -0,0 +1,102 @@
+const colors = [
+  '#7856ff',
+  '#ff7557',
+  '#7fe1d8',
+  '#f8bc3c',
+  '#b3596e',
+  '#72bef4',
+  '#ffb27a',
+  '#0f7ea0',
+  '#3ba974',
+  '#febbb2',
+  '#cb80dc',
+  '#5cb7af',
+];
+
+/** @type {import('tailwindcss').Config} */
+const config = {
+  safelist: [...colors.map((color) => `chart-${color}`)],
+  content: [
+    './pages/**/*.{ts,tsx}',
+    './components/**/*.{ts,tsx}',
+    './app/**/*.{ts,tsx}',
+    './src/**/*.{ts,tsx}',
+  ],
+  theme: {
+    container: {
+      center: true,
+      padding: '2rem',
+      screens: {
+        '2xl': '1400px',
+      },
+    },
+    extend: {
+      colors: {
+        border: 'hsl(var(--border))',
+        input: 'hsl(var(--input))',
+        ring: 'hsl(var(--ring))',
+        background: 'hsl(var(--background))',
+        foreground: 'hsl(var(--foreground))',
+        primary: {
+          DEFAULT: 'hsl(var(--primary))',
+          foreground: 'hsl(var(--primary-foreground))',
+        },
+        secondary: {
+          DEFAULT: 'hsl(var(--secondary))',
+          foreground: 'hsl(var(--secondary-foreground))',
+        },
+        destructive: {
+          DEFAULT: 'hsl(var(--destructive))',
+          foreground: 'hsl(var(--destructive-foreground))',
+        },
+        muted: {
+          DEFAULT: 'hsl(var(--muted))',
+          foreground: 'hsl(var(--muted-foreground))',
+        },
+        accent: {
+          DEFAULT: 'hsl(var(--accent))',
+          foreground: 'hsl(var(--accent-foreground))',
+        },
+        popover: {
+          DEFAULT: 'hsl(var(--popover))',
+          foreground: 'hsl(var(--popover-foreground))',
+        },
+        card: {
+          DEFAULT: 'hsl(var(--card))',
+          foreground: 'hsl(var(--card-foreground))',
+        },
+        ...colors.reduce((acc, color, index) => {
+          return {
+            ...acc,
+            [`chart-${index}`]: color,
+          };
+        }, {}),
+      },
+      borderRadius: {
+        lg: 'var(--radius)',
+        md: 'calc(var(--radius) - 2px)',
+        sm: 'calc(var(--radius) - 4px)',
+      },
+      boxShadow: {
+        DEFAULT: '0 5px 10px rgb(0 0 0 / 5%)',
+      },
+      keyframes: {
+        'accordion-down': {
+          from: { height: '0px' },
+          to: { height: 'var(--radix-accordion-content-height)' },
+        },
+        'accordion-up': {
+          from: { height: 'var(--radix-accordion-content-height)' },
+          to: { height: '0px' },
+        },
+      },
+      animation: {
+        'accordion-down': 'accordion-down 0.2s ease-out',
+        'accordion-up': 'accordion-up 0.2s ease-out',
+      },
+    },
+  },
+  plugins: [require('tailwindcss-animate')],
+};
+
+export default config;

apps/test/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "extends": "@mixan/tsconfig/base.json",
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["./src/*"]
+    },
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "tsBuildInfoFile": "node_modules/.cache/tsbuildinfo.json"
+  },
+  "include": [".", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}