feat(docs): Completed HowItWorks HowItWorks section

WIP morfeojs#707

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

@@ -1,58 +1,128 @@
 import { morfeo } from '@morfeo/css';
-import { Card } from '../Card';
+import { useState } from 'react';
+import { Steps } from './Steps';
+import { MobileSteps } from './MobileSteps';
 
 const classes = morfeo.css({
   container: {
-    textAlign: 'center',
     display: 'flex',
     flexDirection: 'column',
-    height: '100vh',
+    minHeight: '100vh',
     py: '4xl',
+    alignItems: 'center',
+    justifyContent: 'center',
+    position: 'relative',
   },
   title: {
     componentName: 'Typography',
     variant: 'display',
     lineHeight: 'none',
     color: 'gray.lightest',
     mb: 's',
+    textAlign: 'center',
     '& span': {
       textGradient: 'text.primary',
     },
   },
+  subTitle: {
+    componentName: 'Typography',
+    variant: 'p',
+    maxW: 'raw:800px',
+    textAlign: 'center',
+  },
   inner: {
+    h: '100',
     display: 'flex',
-    gap: 's',
+    flexDirection: {
+      default: 'column-reverse',
+      md: 'row',
+    },
+    gap: {
+      default: 'm',
+      md: '5xl',
+    },
     width: '100',
-    pt: 'l',
+    mt: {
+      default: 'l',
+      md: '4xl',
+    },
   },
-  cards: {
+  preview: {
+    border: 'thin',
+    borderColor: 'primary.lightest',
     display: 'flex',
-    flexDirection: 'column',
-    gap: 's',
-    flex: '1',
+    alignItems: 'center',
+    justifyContent: 'center',
+    corner: 'xs',
+    flex: '2',
+    position: 'relative',
+    overflow: 'hidden',
+    '& image': {
+      w: '100',
+      h: '100',
+      objectFit: 'cover',
+    },
   },
-  card: {
-    cursor: 'pointer',
-    p: 'm',
+  cardTitle: {
+    componentName: 'Typography',
+    variant: 'h3',
   },
-  preview: {
-    flex: '1',
+  textContainer: {
+    w: '100',
+    p: 'm',
+    display: 'flex',
+    opacity: 'light',
+    flexDirection: 'column',
+    border: 'thin',
   },
 });
 
+const stepContentList: { title: string; body: string }[] = [
+  {
+    title: 'Set your theme',
+    body: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit enim, accusantium omnis ducimus earum est. Libero numquam quos consectetur eveniet?',
+  },
+  {
+    title: 'Create styles based on the theme',
+    body: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit enim, accusantium omnis ducimus earum est. Libero numquam quos consectetur eveniet?',
+  },
+  {
+    title: 'Morfeo will generate a valid CSS-in-JS',
+    body: 'Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit enim, accusantium omnis ducimus earum est. Libero numquam quos consectetur eveniet?',
+  },
+];
+
 export function HowItWorks() {
+  const [selectedStepIndex, setSelectedStepIndex] = useState<number>(0);
+
+  function handleStepIndex(index: number) {
+    setSelectedStepIndex(index);
+  }
+
   return (
     <section className={classes.container}>
       <h2 className={classes.title}>
         How it <span>Works</span>
       </h2>
+      <p className={classes.subTitle}>
+        Lorem ipsum dolor sit amet consectetur adipisicing elit. Officia culpa
+        harum aliquid repellendus necessitatibus. Ab repellendus beatae vitae
+        facere culpa?
+      </p>
+      <MobileSteps
+        stepOnClick={handleStepIndex}
+        steps={stepContentList}
+        selectedStepIndex={selectedStepIndex}
+      />
       <div className={classes.inner}>
-        <div className={classes.cards}>
-          <Card className={classes.card}>Set your theme</Card>
-          <Card className={classes.card}>Style your components</Card>
-          <Card className={classes.card}>Enjoy</Card>
+        <Steps
+          steps={stepContentList}
+          selectedStepIndex={selectedStepIndex}
+          stepOnClick={handleStepIndex}
+        />
+        <div className={classes.preview}>
+          Code snippet {selectedStepIndex + 1}
         </div>
-        <Card className={classes.preview} />
       </div>
     </section>
   );

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

@@ -0,0 +1,63 @@
+import { morfeo } from '@morfeo/css';
+import { useMemo } from 'react';
+import clsx from 'clsx';
+
+type Props = {
+  steps: {
+    title: string;
+    body: string;
+  }[];
+  selectedStepIndex: number;
+  stepOnClick: (index: number) => void;
+};
+
+const classes = morfeo.css({
+  mobileStepContainer: {
+    w: '100',
+    display: {
+      default: 'flex',
+      md: 'none',
+    },
+    alignItems: 'center',
+    justifyContent: 'center',
+    gap: 'm',
+    mt: 'm',
+  },
+  mobileStep: {
+    w: 'raw:50px',
+    h: 'raw:50px',
+    corner: 'xl',
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    border: 'thin',
+    opacity: 'light',
+  },
+  isActive: {
+    opacity: 'strong',
+  },
+});
+
+export const MobileSteps: React.FC<Props> = ({
+  stepOnClick,
+  steps,
+  selectedStepIndex,
+}) => {
+  const renderSteps = useMemo(
+    () =>
+      steps.map((step, i) => (
+        <div
+          key={step.title}
+          className={clsx(
+            classes.mobileStep,
+            i === selectedStepIndex && classes.isActive,
+          )}
+          onClick={() => stepOnClick(i)}
+        >
+          {i + 1}
+        </div>
+      )),
+    [selectedStepIndex, stepOnClick, steps],
+  );
+  return <div className={classes.mobileStepContainer}>{renderSteps}</div>;
+};

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

@@ -0,0 +1,79 @@
+import { morfeo } from '@morfeo/css';
+import clsx from 'clsx';
+import { MouseEventHandler } from 'react';
+type Props = {
+  isActive?: boolean;
+  onClick?: MouseEventHandler<HTMLDivElement>;
+  title: string;
+  body: string;
+  index?: number;
+};
+
+const classes = morfeo.css({
+  container: {
+    w: '100',
+    py: {
+      default: 'none',
+      md: 'l',
+    },
+    px: {
+      default: 'none',
+      md: 'l',
+    },
+    flexDirection: 'column',
+    borderWidth: {
+      default: 'none',
+      md: 's',
+    },
+    borderColor: 'primary.lightest',
+    corner: 'xs',
+    transition: 'fast',
+  },
+  title: {
+    componentName: 'Typography',
+    variant: 'h3',
+  },
+  unActive: {
+    display: {
+      default: 'none',
+      md: 'flex',
+    },
+    opacity: 'light',
+  },
+  active: {
+    opacity: 'strong',
+    display: 'flex',
+  },
+  stepIndex: {
+    componentName: 'Typography',
+    variant: 'h2',
+    display: {
+      default: 'none',
+      md: 'block',
+    },
+  },
+});
+
+export const Step: React.FC<Props> = ({
+  isActive,
+  body,
+  title,
+  onClick,
+  index,
+}) => {
+  return (
+    <div
+      className={clsx(
+        isActive ? classes.active : classes.unActive,
+        classes.container,
+      )}
+      onClick={onClick}
+    >
+      {index !== undefined && (
+        <h4 className={classes.stepIndex}>{index + 1}</h4>
+      )}
+      <h3 className={classes.title}>{title}</h3>
+      <p>{body}</p>
+    </div>
+  );
+};

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

@@ -0,0 +1,43 @@
+import { morfeo } from '@morfeo/css';
+import { Step } from './Step';
+import { useMemo } from 'react';
+
+type Props = {
+  steps: {
+    title: string;
+    body: string;
+  }[];
+  selectedStepIndex: number;
+  stepOnClick: (index: number) => void;
+};
+
+const classes = morfeo.css({
+  cards: {
+    display: 'flex',
+    flexDirection: 'column',
+    justifyContent: 'center',
+    gap: 'm',
+    flex: '3',
+  },
+});
+
+export const Steps: React.FC<Props> = ({
+  selectedStepIndex,
+  stepOnClick,
+  steps,
+}) => {
+  const renderSteps = useMemo(
+    () =>
+      steps.map((step, i) => (
+        <Step
+          key={step.title}
+          isActive={i === selectedStepIndex}
+          onClick={() => stepOnClick(i)}
+          index={i}
+          {...step}
+        />
+      )),
+    [selectedStepIndex, stepOnClick, steps],
+  );
+  return <div className={classes.cards}>{renderSteps}</div>;
+};

packages/core/src/theme/createTheme.ts

@@ -27,10 +27,7 @@ export function createTheme() {
     const breakpoints = getSlice('breakpoints');
     if (typeof value === 'object' && breakpoints) {
       const keys = Object.keys(value);
-      return (
-        keys.includes('default') ||
-        keys.some(key => breakpoints[key] !== undefined)
-      );
+      return keys.some(key => breakpoints[key] !== undefined);
     }
 
     return false;