sync button primitive with figma

packages/client-core/src/common/services/ThemeService.tsx

@@ -61,10 +61,18 @@ export interface CSSClasses {
   'border-focus': string
 
   'blue-primary': string
+  'blue-secondary': string
   selection: string
 }
 
+const common: Partial<CSSClasses> = {
+  'blue-primary': '#375DAF',
+  'blue-secondary': '#162546'
+}
+
 const lightTheme: CSSClasses = {
+  ...(common as CSSClasses),
+
   'bg-primary': '#F5F5F5',
   'bg-secondary': '#FFFFFF',
   'bg-highlight': '#D9D9D9',
@@ -97,11 +105,12 @@ const lightTheme: CSSClasses = {
   'border-input': '#42454D',
   'border-focus': '#375DAF',
 
-  'blue-primary': '#375DAF',
   selection: '#3166D0'
 }
 
 const darkTheme: CSSClasses = {
+  ...(common as CSSClasses),
+
   'bg-primary': '#111113',
   'bg-secondary': '#000000',
   'bg-highlight': '#212226',
@@ -134,7 +143,6 @@ const darkTheme: CSSClasses = {
   'border-input': '#42454D',
   'border-focus': '#375DAF',
 
-  'blue-primary': '#375DAF',
   selection: '#1E4273'
 }
 

packages/ui/.storybook/main.ts

@@ -36,7 +36,7 @@ const config: StorybookConfig = {
       path: '../../.env.local'
     }).parsed
   }),
-  stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+  stories: ['../src/primitives/**/*.stories.@(js|jsx|ts|tsx)'],
   addons: [
     getAbsolutePath('@storybook/addon-links'),
     getAbsolutePath('@storybook/addon-toolbars'),
@@ -72,38 +72,8 @@ const config: StorybookConfig = {
           '@': require('path').resolve(__dirname, '../../client/public')
         }
       },
-      server: {
-        ...userConfig?.server,
-        proxy: {
-          ...userConfig?.server?.proxy,
-          cors: false,
-          '^3030': {
-            target: `https://${host}:3030`,
-            changeOrigin: true,
-            secure: false,
-            ws: true
-          },
-          '^3031': {
-            target: `https://${host}:3031`,
-            changeOrigin: true,
-            secure: false,
-            ws: true
-          },
-          '/sfx': {
-            target: `https://${host}:3000`,
-            changeOrigin: true,
-            secure: false,
-            // replace port 6006 with 3000
-            pathRewrite: { '^6006': '3000' }
-          },
-          '/fonts': {
-            target: `https://${host}:3000`,
-            changeOrigin: true,
-            secure: false,
-            // replace port 6006 with 3000
-            pathRewrite: { '^6006': '3000' }
-          }
-        }
+      build: {
+        cssMinify: false
       },
       plugins: []
     })

packages/ui/.storybook/preview.tsx

@@ -24,39 +24,39 @@ Ethereal Engine. All Rights Reserved.
 */
 
 import MetaTags from '@etherealengine/client-core/src/common/components/MetaTags'
-import { ThemeProvider } from '@etherealengine/client-core/src/common/services/ThemeService'
+import { ThemeState, useThemeProvider } from '@etherealengine/client-core/src/common/services/ThemeService'
+import Engine from '@etherealengine/client/src/engine'
 import { Description, Primary, Stories, Subtitle, Title } from '@storybook/addon-docs'
 import { Preview } from '@storybook/react'
-import React, { lazy } from 'react'
+import React, { useEffect } from 'react'
 import { DndProvider } from 'react-dnd'
 import { HTML5Backend } from 'react-dnd-html5-backend'
-import { withRouter } from 'storybook-addon-react-router-v6'
 import '../../client/src/themes/base.css'
 import '../../client/src/themes/components.css'
 import '../../client/src/themes/utilities.css'
 
-const Engine = lazy(() => import('@etherealengine/client/src/engine'))
+const ThemeProvider = () => {
+  useThemeProvider()
+  useEffect(() => ThemeState.setTheme('dark'), [])
+  return null
+}
 
 export const decorators = [
-  withRouter,
-  (Story) => {
-    return (
-      <Engine>
-        <ThemeProvider>
-          <DndProvider backend={HTML5Backend}>
-            <MetaTags>
-              <link
-                href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap"
-                rel="stylesheet"
-                type="text/css"
-              />
-            </MetaTags>
-            <Story />
-          </DndProvider>
-        </ThemeProvider>
-      </Engine>
-    )
-  }
+  (Story) => (
+    <Engine>
+      <DndProvider backend={HTML5Backend}>
+        <ThemeProvider />
+        <MetaTags>
+          <link
+            href="https://fonts.googleapis.com/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap"
+            rel="stylesheet"
+            type="text/css"
+          />
+        </MetaTags>
+        <Story />
+      </DndProvider>
+    </Engine>
+  )
 ]
 
 const preview: Preview = {

packages/ui/src/primitives/tailwind/Button/index.stories.tsx

@@ -22,20 +22,23 @@ Original Code is the Ethereal Engine team.
 All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
 Ethereal Engine. All Rights Reserved.
 */
-import { ArgTypes } from '@storybook/react'
+import { ArgTypes, StoryObj } from '@storybook/react'
 import React from 'react'
-import { IoAddOutline, IoSend } from 'react-icons/io5'
 
-import Button from './index'
+import { HiMail } from 'react-icons/hi'
+import Button, { ButtonProps } from './index'
+
+const sizes: ButtonProps['size'][] = ['xs', 'sm', 'l', 'xl']
 
 const argTypes: ArgTypes = {
-  size: {
-    control: 'select',
-    options: ['small', 'medium', 'large']
+  startIcon: {
+    control: 'boolean'
+  },
+  endIcon: {
+    control: 'boolean'
   },
-  variant: {
-    control: 'select',
-    options: ['primary', 'outline', 'danger']
+  disabled: {
+    control: 'boolean'
   }
 }
 
@@ -44,31 +47,82 @@ export default {
   component: Button,
   parameters: {
     componentSubtitle: 'Button',
-    jest: 'Button.test.tsx',
     design: {
       type: 'figma',
-      url: ''
+      url: 'https://www.figma.com/design/ln2VDACenFEkjVeHkowxyi/iR-Engine-Design-Library-File?node-id=2035-16950'
+    },
+    controls: {
+      include: ['children', ...Object.keys(argTypes)]
     }
   },
   argTypes
 }
 
-export const Default = {
-  args: {
-    children: 'Submit'
+type Story = StoryObj<typeof Button>
+
+const ButtonRenderer = (args: ButtonProps) => {
+  if (args.startIcon) {
+    args.startIcon = <HiMail />
   }
+  if (args.endIcon) {
+    args.endIcon = <HiMail />
+  }
+
+  return (
+    <div className="flex items-center gap-3">
+      {sizes.map((size) => (
+        <Button key={size} size={size} {...args} />
+      ))}
+    </div>
+  )
 }
 
-export const WithStartIcon = {
+export const Default: Story = {
+  name: 'Primary',
   args: {
     children: 'Submit',
-    startIcon: <IoAddOutline />
-  }
+    variant: 'primary'
+  },
+  render: ButtonRenderer
 }
 
-export const WithEndIcon = {
+export const Secondary: Story = {
   args: {
-    children: 'Send',
-    endIcon: <IoSend />
-  }
+    children: 'Click',
+    variant: 'secondary'
+  },
+  render: ButtonRenderer
+}
+
+export const Tertiary: Story = {
+  name: 'Outline',
+  args: {
+    children: 'Open',
+    variant: 'outline'
+  },
+  render: ButtonRenderer
+}
+
+export const Success: Story = {
+  args: {
+    children: 'Finish',
+    variant: 'success'
+  },
+  render: ButtonRenderer
+}
+
+export const Danger: Story = {
+  args: {
+    children: 'Cancel',
+    variant: 'danger'
+  },
+  render: ButtonRenderer
+}
+
+export const Transparent: Story = {
+  args: {
+    children: 'Try',
+    variant: 'transparent'
+  },
+  render: ButtonRenderer
 }

packages/ui/src/primitives/tailwind/Button/index.tsx

@@ -31,7 +31,7 @@ export interface ButtonProps extends React.HTMLAttributes<HTMLButtonElement> {
   startIcon?: ReactNode
   endIcon?: ReactNode
   children?: ReactNode
-  size?: 'small' | 'medium' | 'large'
+  size?: 'xs' | 'sm' | 'l' | 'xl'
   variant?: 'primary' | 'secondary' | 'outline' | 'danger' | 'success' | 'transparent' | 'sidebar'
   disabled?: boolean
   fullWidth?: boolean
@@ -48,17 +48,18 @@ const roundedTypes = {
 }
 
 const sizes = {
-  small: 'text-sm px-3 py-2',
-  medium: 'text-base px-4 py-2',
-  large: 'text-lg px-7 py-3'
+  xs: 'h-6',
+  sm: 'h-7',
+  l: 'h-8',
+  xl: 'h-10'
 }
 
 const variants = {
-  primary: 'bg-blue-primary',
-  secondary: 'bg-blue-secondary',
-  outline: 'border border-solid border-theme-primary bg-theme-surface-main dark:bg-theme-highlight text-theme-primary',
-  danger: 'bg-red-500',
-  success: 'bg-teal-700',
+  primary: 'bg-blue-primary hover:bg-[#214AA6] focus:bg-blue-primary disabled:bg-[#5F7DBF]',
+  secondary: 'bg-blue-secondary hover:bg-[#213869] focus:bg-[#213869] disabled:bg-[#375DAF]',
+  outline: 'border border-solid border-[#162546] bg-transparent text-theme-primary',
+  success: 'bg-[#0D9467] hover:bg-[#10B981] focus:bg-[#10B981] disabled:bg-[#0A6F4D]',
+  danger: 'bg-[#F43F5E] hover:bg-[#FB7185] focus:bg-[#F43F5E] disabled:bg-[#C3324B]',
   transparent: 'bg-transparent dark:bg-transparent',
   sidebar: 'bg-[#141619]'
 }
@@ -83,7 +84,8 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
   ) => {
     const twClassName = twMerge(
       'flex items-center',
-      'font-medium text-white',
+      'text-sm font-medium leading-4 text-white',
+      'px-4 py-1',
       'transition ease-in-out',
       'disabled:cursor-not-allowed',
       (StartIcon || EndIcon) && 'justify-center',

packages/ui/src/primitives/tailwind/Button/Button.test.tsx → packages/ui/tailwind.config.js

@@ -23,16 +23,8 @@ All portions of the code written by the Ethereal Engine team are Copyright © 20
 Ethereal Engine. All Rights Reserved.
 */
 
-import { describe, expect, it } from '@jest/globals'
-import { shallow } from 'enzyme'
-import React from 'react'
+import tailwindConfig from '../../tailwind.config'
 
-import Button from './index'
-import { Default as story } from './index.stories'
-
-describe('Button', () => {
-  it('- should render', () => {
-    const wrapper = shallow(<Button {...story?.args} />)
-    expect(wrapper).toMatchSnapshot()
-  })
-})
+module.exports = {
+  ...tailwindConfig
+}

tailwind.config.js

@@ -77,7 +77,8 @@ module.exports = {
         }
       },
       colors: {
-        'blue-primary': 'var(--blue-primary)'
+        'blue-primary': 'var(--blue-primary)',
+        'blue-secondary': 'var(--blue-secondary)'
       },
       fontFamily: {
         sans: ['Inter', 'sans-serif'],