Update Showcases

showcase-animations/.env

@@ -0,0 +1,6 @@
+NEXT_PUBLIC_URL=
+NEXT_PUBLIC_URL_HOSTNAME=http://localhost:3000
+NEXT_PUBLIC_LICENSE=vERESgSXbYj5Rs-FF4DzkMvhdQLh0Mxe6AD8V-doP6wqe_gmYmx_oUKqIlMkwpMu
+NEXT_PUBLIC_CUSTOM_ASSET_LIBRARIES_AIRTABLE_API_KEY=
+NEXT_PUBLIC_CUSTOM_ASSET_LIBRARIES_PEXELS_API_KEY=
+NEXT_PUBLIC_ADD_CESDK_GLOBALS=true

showcase-animations/.eslintrc.json

@@ -0,0 +1,19 @@
+{
+  "extends": "next",
+  "root": true,
+  "rules": {
+    "@next/next/no-img-element": "off",
+    "no-unused-vars": "off",
+    "unused-imports/no-unused-imports": "error",
+    "unused-imports/no-unused-vars": [
+      "warn",
+      {
+        "vars": "all",
+        "varsIgnorePattern": "^_",
+        "args": "after-used",
+        "argsIgnorePattern": "^_"
+      }
+    ]
+  },
+  "plugins": ["unused-imports"]
+}

showcase-animations/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.

showcase-animations/next.config.mjs

@@ -0,0 +1,26 @@
+/** @type {import('next').NextConfig} */
+const nextConfig = {
+  webpack(config, { webpack }) {
+    config.module.rules.push({
+      test: /\.svg$/,
+      issuer: {
+        and: [/\.(js|ts)x?$/]
+      },
+
+      use: [{ loader: '@svgr/webpack' }]
+    });
+    // Temporary fix until the following fix is merged into our NextJS version: https://github.com/vercel/next.js/pull/65248
+    // Should be included in NextJS >= 14.2.6
+    config.plugins.push(
+      new webpack.DefinePlugin({
+        'process.env.NEXT_PUBLIC_URL': JSON.stringify(
+          process.env.NEXT_PUBLIC_URL ?? ''
+        )
+      })
+    );
+
+    return config;
+  }
+};
+
+export default nextConfig;

showcase-animations/package.json

@@ -0,0 +1,48 @@
+{
+  "name": "showcases",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@cesdk/cesdk-js": "1.37.0",
+    "@cesdk/engine": "1.37.0",
+    "@google/model-viewer": "3.1.1",
+    "@imgly/idml-importer": "^1.0.6",
+    "@imgly/psd-importer": "^0.0.3",
+    "@imgly/plugin-background-removal-web": "^1.0.0",
+    "@imgly/plugin-cutout-library-web": "^1.0.4",
+    "@imgly/plugin-qr-code-web": "^0.1.0",
+    "@imgly/plugin-vectorizer-web": "^1.0.0",
+    "airtable": "^0.12.1",
+    "chroma-js": "^2.4.2",
+    "classnames": "^2.3.2",
+    "lodash": "^4.17.21",
+    "next": "14.2.5",
+    "react": "^18",
+    "react-colorful": "^5.6.1",
+    "react-dom": "^18",
+    "react-draggable": "^4.4.5",
+    "react-masonry-css": "^1.0.16",
+    "react-slider": "^2.0.6",
+    "react-tiny-popover": "^7.2.4",
+    "three": "^0.154.0",
+    "unsplash-js": "^7.0.18"
+  },
+  "devDependencies": {
+    "@svgr/webpack": "^8.1.0",
+    "@types/chroma-js": "^2.4.0",
+    "@types/lodash": "^4.14.197",
+    "@types/node": "^20",
+    "@types/react": "^18",
+    "@types/react-dom": "^18",
+    "eslint": "^8",
+    "eslint-config-next": "14.1.3",
+    "eslint-plugin-unused-imports": "^3.1.0",
+    "typescript": "^5"
+  }
+}

showcase-animations/src/app/layout.tsx

@@ -0,0 +1,19 @@
+import type { Metadata } from 'next';
+import './root.css';
+
+export const metadata: Metadata = {
+  title: 'CE.SDK Showcase',
+  description: 'Build using the CE.SDK'
+};
+
+export default function RootLayout({
+  children
+}: Readonly<{
+  children: React.ReactNode;
+}>) {
+  return (
+    <html lang="en">
+      <body style={{ minHeight: '100vh' }}>{children}</body>
+    </html>
+  );
+}

showcase-animations/src/app/page.tsx

@@ -0,0 +1,22 @@
+import dynamic from 'next/dynamic';
+
+const DynamicCaseComponent = dynamic(
+  () => import('../components/case/CaseComponent'),
+  {
+    ssr: false
+  }
+);
+
+export default function Home() {
+  return (
+    <div
+      className="App showcaseContainer"
+      style={{
+        minHeight: '100vh',
+        display: 'flex'
+      }}
+    >
+      <DynamicCaseComponent />
+    </div>
+  );
+}

showcase-animations/src/app/root.css

@@ -0,0 +1,14 @@
+body {
+  height: 100%;
+  background: #e7e7e9 linear-gradient(180deg, rgba(0, 0, 0, .04), transparent 10%);
+}
+
+@import '@/styles/button.css';
+@import '@/styles/ci-v11-variables.css';
+@import '@/styles/css-reset.css';
+@import '@/styles/fonts.css';
+@import '@/styles/forms.css';
+@import '@/styles/root.css';
+@import '@/styles/typography.css';
+@import '@/styles/util.css';
+@import '@/styles/variables.css';