feat: integrate Universal Design System with Web, Print, and Presentation examples

packages/ui/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "@mintel/ui",
+  "version": "1.0.0",
+  "private": true,
+  "main": "./src/index.ts",
+  "types": "./src/index.ts",
+  "scripts": {
+    "ladle": "ladle serve",
+    "build": "ladle build"
+  },
+  "dependencies": {
+    "@react-pdf/renderer": "^3.4.0",
+    "framer-motion": "^11.0.0",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0"
+  },
+  "devDependencies": {
+    "@ladle/react": "^4.0.0",
+    "tailwindcss": "^3.4.0",
+    "postcss": "^8.4.0",
+    "autoprefixer": "^10.4.0",
+    "typescript": "^5.0.0",
+    "@types/react": "^18.2.0",
+    "@types/react-dom": "^18.2.0"
+  }
+}

packages/ui/src/components/universal/Box.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { View } from '@react-pdf/renderer';
+import { motion, HTMLMotionProps } from 'framer-motion';
+import { useEnvironment } from '../context/EnvironmentContext';
+
+export interface BoxProps extends HTMLMotionProps<"div"> {
+  children?: React.ReactNode;
+  pdfStyle?: any; // Specifically for PDF if Tailwind mapping is not enough
+}
+
+export const Box: React.FC<BoxProps> = ({ children, className, style, pdfStyle, ...props }) => {
+  const env = useEnvironment();
+
+  if (env === 'print') {
+    return <View style={pdfStyle || style}>{children}</View>;
+  }
+
+  // Web and Presentation get Framer Motion by default
+  return (
+    <motion.div className={className} style={style} {...props}>
+      {children}
+    </motion.div>
+  );
+};

packages/ui/src/components/universal/Text.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Text as PdfText } from '@react-pdf/renderer';
+import { motion, HTMLMotionProps } from 'framer-motion';
+import { useEnvironment } from '../context/EnvironmentContext';
+
+export interface TextProps extends HTMLMotionProps<"span"> {
+  children?: React.ReactNode;
+  pdfStyle?: any;
+}
+
+export const Text: React.FC<TextProps> = ({ children, className, style, pdfStyle, ...props }) => {
+  const env = useEnvironment();
+
+  if (env === 'print') {
+    return <PdfText style={pdfStyle || style}>{children}</PdfText>;
+  }
+
+  return (
+    <motion.span className={className} style={style} {...props}>
+      {children}
+    </motion.span>
+  );
+};

packages/ui/src/context/EnvironmentContext.tsx

@@ -0,0 +1,17 @@
+import React, { createContext, useContext } from 'react';
+
+export type Environment = 'web' | 'print' | 'presentation';
+
+const EnvironmentContext = createContext<Environment>('web');
+
+export const EnvironmentProvider: React.FC<{ env: Environment; children: React.ReactNode }> = ({ env, children }) => {
+  return (
+    <EnvironmentContext.Provider value={env}>
+      {children}
+    </EnvironmentContext.Provider>
+  );
+};
+
+export const useEnvironment = () => {
+  return useContext(EnvironmentContext);
+};

packages/ui/src/index.ts

@@ -0,0 +1,3 @@
+export { Box } from './components/universal/Box';
+export { Text } from './components/universal/Text';
+export { EnvironmentProvider, useEnvironment } from './context/EnvironmentContext';

packages/ui/tailwind.config.js

@@ -0,0 +1,17 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    "./src/**/*.{js,jsx,ts,tsx}",
+  ],
+  theme: {
+    extend: {
+      colors: {
+        mintel: {
+          primary: '#1E40AF',
+          accent: '#82ed20',
+        }
+      }
+    },
+  },
+  plugins: [],
+}