Design v2 (#75)

* Update SCSS variables from Figma

* progress

* setup form

* just to make e2e pass

* just to make e2e pass

* removed legacy code

* cleaned up exports

* clean up

* clean up on about

* progress

* progress

* setup form

* clean up

* clean up on about

* WIP

* Finish Components, Refactor, finalize design for PR

* Updated Styles/Padding

* Code Review updates

* added spinner

* More Code Review Changes

* final comments

* fix About page

* adjust about to use variables not mixins

---------

Co-authored-by: Stefan Attoh <[email protected]>

Author: m-thompson-code

packages/common/src/types/message-to-ui-payload.ts

@@ -40,6 +40,10 @@ export interface PRCreatedPayload extends BaseMessageToUIPayload {
   prUrl: string;
 }
 
+export interface PRCreatingPayload extends BaseMessageToUIPayload {
+  type: 'pr-creating';
+}
+
 export interface ErrorPayload extends BaseMessageToUIPayload {
   type: 'error';
   message: string;
@@ -58,6 +62,7 @@ export type MessageToUIPayload =
   | ProgressEndPayload
   | ConfigSavedPayload
   | ConfigLoadedPayload
+  | PRCreatingPayload
   | PRCreatedPayload
   | ErrorPayload
   | TestDataExportedPayload;

packages/figma/scripts/generate-theme.js

@@ -147,4 +147,4 @@ export const themeTokens: {
 
 fs.writeFileSync(path.resolve(__dirname, '../src/theme-tokens.ts'), tsOutput);
 
-console.log('✅ Generated theme-tokens.ts');
+console.info('✅ Generated theme-tokens.ts');

packages/figma/src/index.ts

@@ -34,7 +34,7 @@ const main = async () => {
   // Show the UI with resizable window
   figma.showUI(html, {
     width: 600,
-    height: 1200,
+    height: 900,
     themeColors: true,
     title: 'Eggstractor',
   });

packages/figma/src/services/effect.service.ts

@@ -77,7 +77,7 @@ export async function collectAllFigmaEffectStyles(
       }
     }
 
-    console.log(`✨ Collected ${effectTokens.length} effect style tokens`);
+    console.info(`✨ Collected ${effectTokens.length} effect style tokens`);
     collection.tokens.push(...effectTokens);
   } catch (error) {
     console.warn('Failed to collect Figma Effect Styles:', error);

packages/figma/src/services/variable.service.ts

@@ -267,7 +267,7 @@ export async function collectPrimitiveVariables(
       }
     }
 
-    console.log(`✨ Collected ${primitiveTokens.length} primitive variable tokens`);
+    console.info(`✨ Collected ${primitiveTokens.length} primitive variable tokens`);
     collection.tokens.push(...primitiveTokens);
   } catch (error) {
     console.warn('Failed to collect Figma Variables:', error);

packages/figma/src/tests/utils/theme-tokens.utils.test.ts

@@ -1,9 +1,10 @@
 import { buildDynamicThemeTokens, generateThemeDirective } from '../../utils/theme-tokens.utils';
 import { TokenCollection, VariableToken } from '../../types';
 
-// Mock console.log to suppress output during tests
+// Mock console to suppress output during tests
 vi.mock('console', () => ({
   log: vi.fn(),
+  info: vi.fn(),
   warn: vi.fn(),
   error: vi.fn(),
 }));

packages/ui/src/app/app.tsx

@@ -1,12 +1,12 @@
 import { useEffect, useState } from 'react';
 import { getValidStylesheetFormat } from '@eggstractor/common';
 import { Route, Routes } from 'react-router-dom';
-import '../styles.scss';
 import { messageMainThread } from './utils';
-import { About, Form, StatusProvider } from './routes';
+import { Export, Setup, About, Components, StatusProvider } from './routes';
 import { GeneratedStylesProvider, Config, ConfigProvider } from './context';
 import { useOnPluginMessage, useRoutePersistence } from './hooks';
-import { MemoryPersistenceRouter } from './components';
+import { MemoryPersistenceRouter, Nav } from './components';
+import '../styles.scss';
 
 export const App = () => {
   const initialRoute = useRoutePersistence();
@@ -24,6 +24,7 @@ export const App = () => {
   });
 
   useEffect(() => {
+    console.info('loading config');
     // Load saved config when UI opens
     messageMainThread({ type: 'load-config' });
   }, []);
@@ -37,11 +38,12 @@ export const App = () => {
       <GeneratedStylesProvider>
         <StatusProvider>
           <ConfigProvider {...loadedConfig}>
-            {/* TODO: Add navigation */}
-            {/*<Nav />*/}
+            <Nav />
             <Routes>
-              <Route path="/" element={<Form />} />
+              <Route path="/" element={<Export />} />
+              <Route path="/setup" element={<Setup />} />
               <Route path="/about" element={<About />} />
+              <Route path="components" element={<Components />} />
             </Routes>
           </ConfigProvider>
         </StatusProvider>

packages/ui/src/app/components/Button/Button.module.scss

@@ -0,0 +1,65 @@
+@use '../../../generated.scss' as *;
+@use '../../../resets.scss' as *;
+
+.button {
+  @include reset-button;
+  @include button;
+  // TODO: generated set width is causing issues
+  width: unset;
+  .label {
+    @include button-label;
+  }
+  &.icon {
+    @include button-icon;
+    // TODO: generated icon styles don't include height/width
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 44px;
+    height: 44px;
+  }
+
+  &:not(:hover) {
+    @include button-status_resting;
+    // TODO: generated padding: 0 is causing issues with padding
+    padding: $size-none $size-2xl;
+    &.primary {
+      @include button-primary-status_resting;
+      .label {
+        @include button-label-primary-status_resting;
+      }
+    }
+    &.secondary {
+      .label {
+        @include button-label-secondary-status_resting;
+      }
+    }
+    &.icon {
+      // TODO: generated icon styles don't include color styles for icon
+      color: $colour-button-secondary-text-resting;
+      padding: 0rem 0rem;
+    }
+  }
+  &:hover {
+    @include button-status_hover;
+    // TODO: generated padding: 0 is causing issues with padding
+    padding: $size-none $size-2xl;
+    &.primary {
+      @include button-primary-status_hover;
+      width: unset;
+      .label {
+        @include button-label-primary-status_hover;
+      }
+    }
+    &.secondary {
+      .label {
+        @include button-label-secondary-status_hover;
+      }
+    }
+    &.icon {
+      // TODO: generated icon styles don't include color styles for icon
+      color: $colour-button-secondary-text-hover;
+      padding: 0rem 0rem;
+    }
+  }
+}

packages/ui/src/app/components/Button/Button.tsx

@@ -1,14 +1,29 @@
 import { ButtonHTMLAttributes, FC } from 'react';
 import cn from 'classnames';
+import styles from './Button.module.scss';
 
-export const Button: FC<ButtonHTMLAttributes<HTMLButtonElement>> = ({
+interface ButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  children: React.ReactNode;
+  variant?: 'primary' | 'secondary' | 'icon';
+}
+
+export const Button: FC<ButtonProps> = ({
   children,
   type = 'button',
+  variant = 'primary',
   ...props
 }) => {
   return (
-    <button {...props} className={cn('button', props.className)} type={type}>
-      {children}
+    <button
+      {...props}
+      className={cn(styles.button, props.className, {
+        [styles.icon]: variant === 'icon',
+        [styles.primary]: variant === 'primary',
+        [styles.secondary]: variant === 'secondary',
+      })}
+      type={type}
+    >
+      <span className={styles.label}>{children}</span>
     </button>
   );
 };

packages/ui/src/app/components/ButtonGroup/ButtonGroup.module.scss

@@ -0,0 +1,51 @@
+@use '../../../resets.scss' as *;
+@use '../../../generated.scss' as *;
+
+.button-group {
+  display: flex;
+  width: 100%;
+
+  // TODO: There is an issue with rendering the border radius of the buttons
+  // with the container. The workaround for now is to remove the background
+  // color of the buttons and just put it on the container
+  background: $colour-button-segmented-unselected-bg-resting;
+
+  // TODO: these styles didn't generate, adding them manually
+  border-radius: $radius-brand;
+  border: $size-1px solid $colour-button-segmented-unselected-border;
+}
+
+// TODO: These styles didn't generate, adding them manually
+.button-group-label {
+  display: flex;
+  justify-content: space-between;
+
+  // TODO: really should be using eggstracted color variables here.
+  color: $colour-input-label;
+
+  /* Label */
+  // TODO: same idea; var fallbacks here are indicate the intended design system
+  font-family: $font-family-display;
+  font-size: $size-xl;
+  font-style: normal; // TODO: no variable(s) for font style
+  font-weight: 600; // TODO: no variable(s) for font weight
+  line-height: $size-xl; /* 100% */
+
+  margin-bottom: $size-md;
+}
+
+// TODO: These styles didn't generate, adding them manually
+.button-group-hint {
+  align-self: stretch;
+  color: $colour-input-hint;
+
+  /* Helper */
+  font-family: $font-family-body;
+  // TODO: consider design match
+  font-size: 14px;
+  font-style: normal; // TODO: no variable(s) for font style
+  font-weight: 400; // TODO: no variable(s) for font weight
+  line-height: $size-xl; /* 114.286% */
+
+  margin-top: $size-md;
+}