chore: use createVariants over getClassNameFactory in Viewport components

Author: mu29

packages/react/src/editor/ViewportControl/ViewportControl.module.css

@@ -1,39 +1,33 @@
-.ViewportControl {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.viewportControl {
   position: relative;
-  height: 1.25rem;
+  height: 20px;
   overflow: hidden;
   border-bottom: 1px solid var(--composify-palette-outline);
   background-color: var(--composify-palette-surface-container-low);
 }
 
-.ViewportControl-ViewportItem {
+.viewportItem {
   display: flex;
   align-items: center;
   justify-content: center;
-  box-sizing: border-box;
   position: absolute;
   top: 0;
   bottom: 0;
+  padding: 0;
+  border: none;
   border-left: 2px solid var(--composify-palette-outline);
   border-right: 2px solid var(--composify-palette-outline);
   background-color: var(--composify-palette-surface-container-low);
-  transition: all 0.1s linear;
+  transition: all 0.15s linear;
 }
 
-.ViewportControl-ViewportItem:first-child {
+.viewportItem:first-child {
   border: none;
-  width: auto !important;
   left: 0;
   right: 0;
 }
 
-.ViewportControl-Highlight {
-  display: flex;
-  align-items: center;
-  justify-content: center;
+.highlight {
   position: relative;
   width: 100%;
   height: 100%;
@@ -43,12 +37,12 @@
   transition: all 0.1s linear;
 }
 
-.ViewportControl-ViewportItem:hover .ViewportControl-Highlight {
+.viewportItem:hover .highlight {
   z-index: 1;
   opacity: 0.7;
 }
 
-.ViewportControl-Label {
+.label {
   position: absolute;
   opacity: 0;
   pointer-events: none;
@@ -57,7 +51,7 @@
   color: var(--composify-palette-on-surface);
 }
 
-.ViewportControl-ViewportItem:hover .ViewportControl-Label {
+.viewportItem:hover .label {
   z-index: 2;
   opacity: 1;
 }

packages/react/src/editor/ViewportControl/ViewportControl.tsx

@@ -1,8 +1,9 @@
 import { type FC, useCallback, useEffect, useRef, useState } from 'react';
-import { getClassNameFactory } from '../../utils';
+import { HStack } from '../../preset';
+import { createVariants } from '../../utils';
 import styles from './ViewportControl.module.css';
 
-const getClassName = getClassNameFactory('ViewportControl', styles);
+const variants = createVariants(styles);
 
 type Props = {
   viewports: {
@@ -46,21 +47,26 @@ export const ViewportControl: FC<Props> = ({ viewports, selectedWidth, onClick }
   }, [autoScale]);
 
   return (
-    <div ref={containerRef} className={getClassName()}>
+    <HStack
+      ref={containerRef}
+      alignHorizontal="center"
+      alignVertical="center"
+      className={variants('viewportControl')}
+    >
       {viewports
         .sort((a, b) => b.width - a.width)
         .map((viewport) => (
-          <div
-            role="button"
+          <button
+            type="button"
             key={viewport.width}
-            className={getClassName('ViewportItem')}
+            className={variants('viewportItem')}
             style={{ width: viewport.width * scale }}
             onClick={() => onClick(viewport.width)}
           >
-            <div className={getClassName('Highlight')} />
-            <span className={getClassName('Label')}>{viewport.label}</span>
-          </div>
+            <div className={variants('highlight')} />
+            <span className={variants('label')}>{viewport.label}</span>
+          </button>
         ))}
-    </div>
+    </HStack>
   );
 };

packages/react/src/editor/ViewportManager/ViewportManager.module.css

@@ -1,14 +1,8 @@
-.ViewportManager {
-  display: flex;
-  flex: 1;
-  flex-direction: column;
+.viewportManager {
   background-color: var(--composify-palette-surface-container);
 }
 
-.ViewportManager-Content {
-  flex: 1;
-  display: flex;
-  justify-content: center;
+.content {
   overflow: hidden;
-  margin: 2rem 1rem;
+  margin: 32px 16px;
 }

packages/react/src/editor/ViewportManager/ViewportManager.tsx

@@ -1,10 +1,11 @@
 import { type FC, type PropsWithChildren, useState } from 'react';
-import { getClassNameFactory } from '../../utils';
+import { VStack } from '../../preset';
+import { createVariants } from '../../utils';
 import { ViewportControl } from '../ViewportControl';
 import { ViewportScaler } from '../ViewportScaler';
 import styles from './ViewportManager.module.css';
 
-const getClassName = getClassNameFactory('ViewportManager', styles);
+const variants = createVariants(styles);
 
 type Props = PropsWithChildren<{
   viewports?: {
@@ -52,11 +53,11 @@ export const ViewportManager: FC<Props> = ({
   const [width, setWidth] = useState(initialViewport.width);
 
   return (
-    <section className={getClassName()}>
+    <VStack flex={1} className={variants('viewportManager')}>
       <ViewportControl viewports={viewports} selectedWidth={width} onClick={setWidth} />
-      <div className={getClassName('Content')}>
+      <VStack flex={1} alignHorizontal="center" className={variants('content')}>
         <ViewportScaler width={width}>{children}</ViewportScaler>
-      </div>
-    </section>
+      </VStack>
+    </VStack>
   );
 };

packages/react/src/editor/ViewportScaler/ViewportScaler.module.css

@@ -1,8 +1,8 @@
-*:has(> .ViewportScaler-Container) {
+*:has(> .container) {
   position: relative;
 }
 
-.ViewportScaler-Container {
+.container {
   position: absolute;
   top: 0;
   left: 0;
@@ -11,7 +11,7 @@
   pointer-events: none;
 }
 
-.ViewportScaler-Target {
+.target {
   position: absolute;
   top: 0;
   bottom: 0;

packages/react/src/editor/ViewportScaler/ViewportScaler.tsx

@@ -1,9 +1,9 @@
 import { getBox } from 'css-box-model';
 import { type FC, type PropsWithChildren, useCallback, useEffect, useRef, useState } from 'react';
-import { getClassNameFactory } from '../../utils';
+import { createVariants } from '../../utils';
 import styles from './ViewportScaler.module.css';
 
-const getClassName = getClassNameFactory('ViewportScaler', styles);
+const variants = createVariants(styles);
 
 type Props = PropsWithChildren<{
   width: number;
@@ -46,10 +46,10 @@ export const ViewportScaler: FC<Props> = ({ width, children }) => {
 
   return (
     <>
-      <div ref={containerRef} className={getClassName('Container')} />
+      <div ref={containerRef} className={variants('container')} />
       <div
         ref={targetRef}
-        className={getClassName('Target')}
+        className={variants('target')}
         style={{
           width,
           height,

packages/react/src/preset/HStack/HStack.tsx

@@ -1,11 +1,10 @@
-import type { FC, PropsWithChildren } from 'react';
+import type { ComponentProps, FC } from 'react';
 import { createVariants } from '../../utils';
 import styles from './HStack.module.css';
 
 const variants = createVariants(styles);
 
-type Props = PropsWithChildren<{
-  className?: string;
+type Props = ComponentProps<'div'> & {
   alignHorizontal?: 'start' | 'end' | 'center' | 'between' | 'around';
   alignVertical?: 'stretch' | 'start' | 'end' | 'center';
   flex?: number;
@@ -15,7 +14,7 @@ type Props = PropsWithChildren<{
   margin?: { top: number; right: number; bottom: number; left: number };
   gap?: number;
   background?: string;
-}>;
+};
 
 export const HStack: FC<Props> = ({
   className,

packages/react/src/preset/VStack/VStack.tsx

@@ -1,11 +1,10 @@
-import type { FC, PropsWithChildren } from 'react';
+import type { ComponentProps, FC } from 'react';
 import { createVariants } from '../../utils';
 import styles from './VStack.module.css';
 
 const variants = createVariants(styles);
 
-type Props = PropsWithChildren<{
-  className?: string;
+type Props = ComponentProps<'div'> & {
   alignHorizontal?: 'stretch' | 'start' | 'end' | 'center';
   alignVertical?: 'start' | 'end' | 'center' | 'between' | 'around';
   flex?: number;
@@ -15,7 +14,7 @@ type Props = PropsWithChildren<{
   padding?: { top: number; right: number; bottom: number; left: number };
   margin?: { top: number; right: number; bottom: number; left: number };
   background?: string;
-}>;
+};
 
 export const VStack: FC<Props> = ({
   className,