feat(docs): added playground section

examples/nextra/package.json

@@ -9,6 +9,8 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@codesandbox/sandpack-react": "^2.6.4",
+    "@codesandbox/sandpack-themes": "^2.0.21",
     "@lottiefiles/react-lottie-player": "^3.5.3",
     "@morfeo/css": "workspace:*",
     "@morfeo/next": "workspace:*",

examples/nextra/src/components/BundleSize/BundleSize.tsx

@@ -2,6 +2,7 @@ import { morfeo } from '@morfeo/css';
 import { useMediaQuery } from '@/hooks';
 import { DesktopPlayer } from './DesktopChartPlayer';
 import { SmartphoneChartPlayer } from './SmartphoneChartPlayer';
+import { FadeInBox } from '../FadeInBox';
 
 const classes = morfeo.css({
   container: {
@@ -10,6 +11,7 @@ const classes = morfeo.css({
     width: '100',
     alignItems: 'center',
     justifyContent: 'center',
+    mb: '4xl',
   },
   textContainer: {
     maxWidth: 'raw:800px',
@@ -41,10 +43,7 @@ export const BundleSize: React.FC = () => {
   const isTabletOrBelow = useMediaQuery('(max-width: 768px)');
 
   return (
-    <div className={classes.container}>
-      <div className={classes.animationContainer}>
-        {isTabletOrBelow ? <SmartphoneChartPlayer /> : <DesktopPlayer />}
-      </div>
+    <FadeInBox className={classes.container}>
       <div className={classes.textContainer}>
         <h1 className={classes.title}>CSS bundle size? No problem</h1>
         <p>
@@ -53,6 +52,9 @@ export const BundleSize: React.FC = () => {
           netus mi viverra. Congue sit sagittis tempus odio arcu in. Donec amet.
         </p>
       </div>
-    </div>
+      <div className={classes.animationContainer}>
+        {isTabletOrBelow ? <SmartphoneChartPlayer /> : <DesktopPlayer />}
+      </div>
+    </FadeInBox>
   );
 };

examples/nextra/src/components/HowItWorks/HowItWorks.tsx

@@ -5,6 +5,7 @@ import { MobileSteps } from './MobileSteps';
 import ThemeSnippet from './ThemeSnippet.mdx';
 import CSS from './CSS.mdx';
 import Code from './Code.mdx';
+import { FadeInBox } from '../FadeInBox';
 
 const classes = morfeo.css({
   container: {
@@ -103,7 +104,7 @@ export function HowItWorks() {
   }
 
   return (
-    <section className={classes.container}>
+    <FadeInBox className={classes.container}>
       <h2 className={classes.title}>
         How it <span>Works</span>
       </h2>
@@ -131,6 +132,6 @@ export function HowItWorks() {
           {stepContentList[selectedStepIndex].snippet}
         </div>
       </div>
-    </section>
+    </FadeInBox>
   );
 }

examples/nextra/src/components/PlaygroundSection/PlaygroundSection.tsx

@@ -0,0 +1,97 @@
+import { morfeo } from '@morfeo/css';
+import { Sandpack } from '@codesandbox/sandpack-react';
+import { nightOwl } from '@codesandbox/sandpack-themes';
+import { playgroundFiles } from './playgroundFiles';
+import { useMemo, useState } from 'react';
+import { PlaygroundTemplateList } from './TemplateList';
+import { PlaygroundTemplate } from './types';
+import { FadeInBox } from '../FadeInBox';
+
+const classes = morfeo.css({
+  container: {
+    w: '100',
+    minH: '100vh',
+    display: 'flex',
+    alignItems: 'center',
+    flexDirection: 'column',
+    gap: 'xl',
+    mb: '4xl',
+  },
+  textContainer: {
+    maxW: 'raw:800px',
+    textAlign: 'center',
+  },
+  title: {
+    componentName: 'Typography',
+    variant: 'display',
+  },
+  wrapper: {
+    w: '100',
+  },
+  editor: {
+    h: 'raw:700px',
+  },
+});
+
+export const PlaygroundSection: React.FC = () => {
+  const [selectedTemplate, setSelectedTemplate] =
+    useState<PlaygroundTemplate>('nextjs');
+
+  function handleTemplateChange(template: PlaygroundTemplate) {
+    setSelectedTemplate(template);
+  }
+
+  const playgroundTemplateList: PlaygroundTemplate[] = [
+    'nextjs',
+    'vite-react-ts',
+  ];
+
+  const selectedTemplateFiles = useMemo(
+    () => playgroundFiles[selectedTemplate],
+    [selectedTemplate],
+  );
+
+  return (
+    <FadeInBox className={classes.container}>
+      <div className={classes.textContainer}>
+        <h1 className={classes.title}>Landing playground</h1>
+        <p>
+          Lorem ipsum dolor sit amet consectetur adipisicing elit. Ipsam dolor
+          sapiente autem libero, esse inventore consequatur officia laboriosam
+          itaque beatae quis id suscipit vero vel adipisci blanditiis cumque
+        </p>
+        <PlaygroundTemplateList
+          playgroundTemplateList={playgroundTemplateList}
+          handleTemplateChange={handleTemplateChange}
+          selectedTemplate={selectedTemplate}
+        />
+      </div>
+      <div className={classes.wrapper}>
+        <Sandpack
+          template={selectedTemplate}
+          theme={nightOwl}
+          options={{
+            editorHeight: 580,
+            autoReload: true,
+            autorun: true,
+          }}
+          files={selectedTemplateFiles}
+          customSetup={{
+            dependencies: {
+              '@morfeo/web': 'latest',
+              '@morfeo/css': 'latest',
+              '@morfeo/next': 'latest',
+              '@morfeo/preset-default': 'latest',
+              '@morfeo/spec': 'latest',
+              '@morfeo/utils': 'latest',
+              '@types/react-dom': '18.2.4',
+              '@babel/core': 'latest',
+              tslib: 'latest',
+              '@morfeo/compiler': 'latest',
+            },
+          }}
+        />
+      </div>
+    </FadeInBox>
+  );
+};

examples/nextra/src/components/PlaygroundSection/TemplateList.tsx

@@ -0,0 +1,86 @@
+import { morfeo } from '@morfeo/css';
+import Image from 'next/image';
+import clsx from 'clsx';
+import { PlaygroundTemplate } from './types';
+
+type Props = {
+  handleTemplateChange: (template: PlaygroundTemplate) => void;
+  playgroundTemplateList: PlaygroundTemplate[];
+  selectedTemplate: PlaygroundTemplate;
+};
+
+const classes = morfeo.css({
+  container: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 's',
+    mt: 'm',
+    flexWrap: 'wrap',
+  },
+  templateTab: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: '2xs',
+    px: 'xs',
+    py: '2xs',
+    corner: '2xs',
+    borderWidth: 's',
+    borderColor: 'gray.dark',
+    transition: 'fast',
+    cursor: 'pointer',
+  },
+  active: {
+    borderColor: 'primary.lightest',
+  },
+  label: {
+    componentName: 'Typography',
+    variant: 'body',
+    color: 'gray.lighter',
+    '&.active': {
+      color: 'primary',
+    },
+  },
+});
+
+const templateLogoMap: Record<PlaygroundTemplate, string> = {
+  nextjs: '/next_logo.png',
+  'vite-react-ts': '/vite_logo.png',
+};
+
+const templateLabelMap: Record<PlaygroundTemplate, string> = {
+  nextjs: 'Next.js',
+  'vite-react-ts': 'Vite + React',
+};
+
+export const PlaygroundTemplateList: React.FC<Props> = ({
+  handleTemplateChange,
+  playgroundTemplateList,
+  selectedTemplate,
+}) => {
+  return (
+    <div className={classes.container}>
+      {playgroundTemplateList.map(template => {
+        return (
+          <div
+            className={clsx(
+              classes.templateTab,
+              selectedTemplate === template && classes.active,
+            )}
+            key={template}
+            onClick={() => handleTemplateChange(template)}
+          >
+            <Image
+              src={templateLogoMap[template]}
+              width={30}
+              height={30}
+              alt={`${template} logo`}
+            />
+            <h3 className={classes.label}>{templateLabelMap[template]}</h3>
+          </div>
+        );
+      })}
+    </div>
+  );
+};