@moises.ai/design-system 3.4.5 → 3.5.0

package/src/components/BannerAnnouncement/BannerAnnouncement.stories.jsx

@@ -0,0 +1,120 @@
+import { BannerAnnouncement } from './BannerAnnouncement'
+import { Countdown } from '../Countdown/Countdown'
+import { Flex, Text, Heading } from '@radix-ui/themes'
+import { useState, useEffect } from 'react'
+
+export default {
+  title: 'Features/BannerAnnouncement',
+  component: BannerAnnouncement,
+  tags: ['autodocs'],
+  argTypes: {
+    onClose: { action: 'close' },
+    badge: { control: 'object' },
+    image: { control: 'text' },
+    link: { control: 'text' },
+    buttonText: { control: 'text' },
+    buttonColor: { control: 'text' },
+    children: { control: 'object' },
+    alt: { control: 'text' },
+  },
+}
+
+const withFlexContainer = (Story) => (
+  <Flex width="300px">
+    <Story />
+  </Flex>
+)
+
+export const FeatureAnnouncement = {
+  render: (args) => (
+    <BannerAnnouncement {...args}>
+      <Flex direction="column" gap="2">
+        <Heading size="3" weight="bold">
+          Moises AI Studio
+        </Heading>
+        <Text size="2">
+          Step into the future of music creation. Record, separate, generate,
+          convert voice, mix, and master with our all-in-one essential AI tool
+          for musicians.
+        </Text>
+      </Flex>
+    </BannerAnnouncement>
+  ),
+  args: {
+    badge: { label: 'New', color: 'green' },
+    image:
+      'https://storage.googleapis.com/moises-cms/1_day_discount_banner_2d5990f994/1_day_discount_banner_2d5990f994.png',
+    link: 'https://www.google.com',
+    buttonText: 'Learn More',
+    buttonColor: 'gray',
+  },
+  decorators: [withFlexContainer],
+}
+
+export const DayOne = {
+  render: (args) => {
+    const [timeLeft, setTimeLeft] = useState({
+      days: 0,
+      hours: 23,
+      minutes: 59,
+      seconds: 59,
+    })
+
+    useEffect(() => {
+      const interval = setInterval(() => {
+        setTimeLeft((prev) => {
+          let { days, hours, minutes, seconds } = prev
+
+          if (seconds > 0) {
+            seconds--
+          } else if (minutes > 0) {
+            minutes--
+            seconds = 59
+          } else if (hours > 0) {
+            hours--
+            minutes = 59
+            seconds = 59
+          } else if (days > 0) {
+            days--
+            hours = 23
+            minutes = 59
+            seconds = 59
+          } else {
+            clearInterval(interval)
+            return prev
+          }
+
+          return { days, hours, minutes, seconds }
+        })
+      }, 1000)
+
+      return () => clearInterval(interval)
+    }, [])
+
+    return (
+      <BannerAnnouncement {...args}>
+        <Flex direction="column" gap="3">
+          <Text size="2">Up to 30% off any individual plan for the next:</Text>
+          <Countdown
+            show={true}
+            days={timeLeft.days}
+            hours={timeLeft.hours}
+            minutes={timeLeft.minutes}
+            seconds={timeLeft.seconds}
+            theme="default"
+            variant="lg"
+            showDays={false}
+          />
+        </Flex>
+      </BannerAnnouncement>
+    )
+  },
+  args: {
+    image:
+      'https://storage.googleapis.com/moises-cms/1_day_discount_banner_2d5990f994/1_day_discount_banner_2d5990f994.png',
+    link: 'https://moises.ai/pricing',
+    buttonText: 'Upgrade now',
+    buttonColor: 'primary',
+  },
+  decorators: [withFlexContainer],
+}

package/src/components/Button/Button.jsx

@@ -0,0 +1,45 @@
+import { Button as ButtonPrimitive } from '@radix-ui/themes'
+import styles from './Button.module.css'
+import classNames from 'classnames'
+
+export const Button = ({
+  children,
+  className,
+  variant = 'solid',
+  color = 'neutral',
+  size = '2',
+  disabled,
+  loading,
+  highContrast = false,
+  onClick,
+  style,
+  ...props
+}) => {
+  const resolvedColor = color === 'neutral' ? 'gray' : color
+
+  return (
+    <ButtonPrimitive
+      variant={variant}
+      color={resolvedColor}
+      size={size}
+      className={classNames(styles.Button, className, styles.button, {
+        [styles[resolvedColor]]: true,
+        [styles[`size${size}`]]: true,
+        [styles[variant]]: true,
+        [styles.disabled]: disabled,
+        [styles.loading]: loading,
+        [styles.highContrast]: highContrast,
+      })}
+      disabled={disabled}
+      loading={loading}
+      highContrast={highContrast}
+      onClick={onClick}
+      style={style}
+      {...props}
+    >
+      {children}
+    </ButtonPrimitive>
+  )
+}
+
+Button.displayName = 'Button'

package/src/components/Button/Button.module.css

@@ -0,0 +1,288 @@
+.button {
+  box-shadow: none;
+}
+
+.size2 {
+  font-size: 14px;
+}
+
+.size3 {
+  font-size: 16px;
+}
+
+.solid.disabled, 
+.solid.loading,
+.soft.disabled,
+.soft.loading {
+  background-color: var(--neutral-alpha-3) !important;
+  color: var(--neutral-alpha-8) !important;
+  cursor: default;
+}
+
+.surface.disabled,
+.surface.loading {
+  background-color: var(--neutral-alpha-2) !important;
+  border: 1px solid var(--neutral-alpha-6) !important;
+  cursor: default;
+}
+
+.ghost.disabled,
+.ghost.loading {
+  background-color: transparent !important;
+  color: var(--neutral-alpha-8) !important;
+  cursor: default;
+}
+
+.solid.disabled:hover, 
+.solid.disabled:active,
+.solid.loading:hover,
+.solid.loading:active,
+.soft.disabled:hover,
+.soft.disabled:active,
+.soft.loading:hover,
+.soft.loading:active {
+  background-color: var(--neutral-alpha-3) !important;
+  color: var(--neutral-alpha-8) !important;
+  cursor: default;
+}
+
+.surface.disabled:hover,
+.surface.disabled:active,
+.surface.loading:hover,
+.surface.loading:active {
+  background-color: var(--neutral-alpha-2) !important;
+  border: 1px solid var(--neutral-alpha-6) !important;
+  cursor: default;
+}
+
+.ghost.disabled:hover,
+.ghost.disabled:active,
+.ghost.loading:hover,
+.ghost.loading:active {
+  background-color: transparent !important;
+  color: var(--neutral-alpha-8) !important;
+  cursor: default;
+}
+
+.solid.cyan {
+  background-color: var(--aqua-9);
+  color: var(--accent-d1);
+}
+
+.solid.cyan:hover:not(.disabled):not(.loading) {
+  background-color: var(--aqua-10);
+}
+
+.solid.cyan.highContrast {
+  background-color: var(--aqua-dark-12);
+  color: var(--neutral-1);
+}
+
+.solid.cyan.highContrast:hover:not(.disabled):not(.loading) {
+  opacity: 0.88;
+}
+
+.solid.cyan.highContrast:active:not(.disabled):not(.loading) {
+  opacity: 0.82;
+}
+
+.solid.gray,
+.solid.gray.highContrast  {
+  background-color: var(--neutral-12);
+  color: var(--neutral-1);
+}
+
+.solid.gray:hover:not(.disabled):not(.loading),
+.solid.gray.highContrast:hover:not(.disabled):not(.loading) {
+  opacity: 0.88;
+}
+
+.solid.red {
+  background-color: var(--red-9);
+  color: var(--neutral-12);
+}
+
+.solid.red:hover:not(.disabled):not(.loading) {
+  background-color: var(--red-10);
+}
+
+.solid.red.highContrast {
+  background-color: var(--red-12);
+  color: var(--red-1);
+}
+
+.solid.red.highContrast:hover:not(.disabled):not(.loading) {  
+  background-color: var(--red-12);
+  opacity: 0.88;
+}
+
+.solid.red.highContrast:active:not(.disabled):not(.loading) {
+  background-color: var(--red-12);
+  opacity: 0.82;
+}
+
+.soft.gray { 
+  background-color: var(--neutral-alpha-3);
+  color: var(--neutral-11);
+}
+
+.soft.gray:hover:not(.disabled):not(.loading) {
+  background-color: var(--neutral-alpha-4);
+}
+
+.soft.gray:active:not(.disabled):not(.loading) {
+  background-color: var(--neutral-alpha-5);
+  opacity: 0.92;
+}
+
+.soft.gray.highContrast {
+  background-color: var(--neutral-alpha-3);
+  color: var(--neutral-12);
+}
+
+.soft.gray.highContrast:hover:not(.disabled):not(.loading) {
+  background-color: var(--neutral-alpha-4);
+  opacity: 0.88;
+}
+
+.soft.gray.highContrast:active:not(.disabled):not(.loading) {
+  background-color: var(--neutral-alpha-5);
+  opacity: 0.82;
+}
+
+.surface.gray {
+  color: var(--neutral-11);
+  border: 1px solid var(--neutral-alpha-7);
+}
+
+.surface.gray:hover:not(.disabled):not(.loading) {
+  border: 1px solid  var(--neutral-alpha-8);
+}
+
+.surface.gray:active:not(.disabled):not(.loading) {
+  background-color: var(--neutral-alpha-3);
+  border: 1px solid var(--neutral-alpha-8);
+  opacity: 0.92;
+}
+
+.surface.gray.highContrast {
+  color: var(--neutral-12);
+  border: 1px solid var(--neutral-alpha-7);
+}
+
+.surface.gray.highContrast:hover:not(.disabled):not(.loading) {
+  border: 1px solid var(--neutral-alpha-8);
+  opacity: 0.88;
+}
+
+.surface.gray.highContrast:active:not(.disabled):not(.loading) {
+  background-color: var(--neutral-alpha-3);
+  border: 1px solid var(--neutral-alpha-8);
+  opacity: 0.82;
+}
+
+.ghost {
+  background-color: transparent;
+  margin: 0;
+  padding: 0;
+  border-radius: 0;
+  box-sizing: revert !important;
+}
+
+.ghost.cyan {
+  color: var(--aqua-dark-alpha-11);
+}
+
+.ghost.cyan:hover:not(.disabled):not(.loading) {
+  background-color: var(--aqua-dark-alpha-2) !important;
+  border-radius: max(var(--radius-2), var(--radius-full)) ;
+}
+
+.ghost.cyan:active:not(.disabled):not(.loading) {
+  background-color: var(--aqua-dark-alpha-3) !important;
+  border-radius: max(var(--radius-2), var(--radius-full));
+  opacity: 0.92;
+}
+
+.ghost.cyan.highContrast {
+  color: var(--aqua-dark-12);
+}
+
+.ghost.cyan.highContrast:hover:not(.disabled):not(.loading) {
+  background-color: var(--aqua-dark-alpha-2) !important;
+  border-radius: max(var(--radius-2), var(--radius-full));
+  opacity: 0.88;
+}
+
+.ghost.cyan.highContrast:active:not(.disabled):not(.loading) {
+  background-color: var(--aqua-dark-alpha-3) !important;
+  border-radius: max(var(--radius-2), var(--radius-full));
+  opacity: 0.82;
+}
+
+.ghost.gray {
+  color: var(--neutral-11);
+  background-color: transparent ;
+}
+
+.ghost.gray:hover:not(.disabled):not(.loading) {
+ color: var(--neutral-12);
+}
+
+.ghost.gray:active:not(.disabled):not(.loading) {
+ color: var(--neutral-11);
+}
+
+.ghost.gray.highContrast,
+.ghost.gray.highContrast:hover:not(.disabled):not(.loading) {
+  color: var(--neutral-12);
+}
+
+.ghost.gray.highContrast:active:not(.disabled):not(.loading) {
+ color: var(--neutral-11);
+}
+
+.ghost.red {
+  color: var(--red-11);
+}
+
+.ghost.red:hover:not(.disabled):not(.loading) {
+  background-color: var(--red-alpha-2) !important;
+  border-radius: max(var(--radius-2), var(--radius-full));
+}
+
+.ghost.red:active:not(.disabled):not(.loading) {
+  background-color: var(--red-alpha-3) !important;
+  border-radius: max(var(--radius-2), var(--radius-full));
+  opacity: 0.92;
+}
+
+.ghost.red.highContrast {
+  background-color: transparent;
+  color: var(--red-12);
+}
+
+.ghost.red.highContrast:hover:not(.disabled):not(.loading) {
+  background-color: var(--red-alpha-2) !important;
+  border-radius: max(var(--radius-2), var(--radius-full));
+  opacity: 0.88;
+}
+
+.ghost.red.highContrast:active:not(.disabled):not(.loading) {
+  background-color: var(--red-alpha-3) !important;
+  border-radius: max(var(--radius-2), var(--radius-full));
+  opacity: 0.82;
+}
+
+.ghost.size1 {
+  padding: 4px 8px;
+}
+
+.ghost.size2 {
+ padding: 6px 12px;
+}
+
+.ghost.size3 {
+ padding: 10px 16px;
+}
+

package/src/components/Button/Button.stories.jsx

@@ -0,0 +1,269 @@
+import { Button } from './Button'
+import { PlusIcon } from '@radix-ui/react-icons'
+import { Flex } from '@radix-ui/themes'
+
+export default {
+  title: 'Components/Button',
+  component: Button,
+  parameters: {
+    layout: 'centered',
+    docs: {
+      description: {
+        component: `
+Button is a versatile interactive component that triggers actions when clicked. It's built on top of Radix UI's Button component and 
+supports various variants, colors, sizes, and states.
+
+## Usage
+
+\`\`\`jsx
+import { Button } from '@moises.ai/design-system'
+import { PlusIcon } from '@moises.ai/design-system/icons'
+
+const MyComponent = () => (
+  <>
+    <Button variant="solid" color="cyan">Click me</Button>
+    <Button variant="ghost" color="neutral">
+      <PlusIcon width={16} height={16} /> With Icon
+    </Button>
+  </>
+)
+\`\`\`
+        `,
+      },
+    },
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    children: {
+      description:
+        'The button content - can be text, icon, or a combination of both',
+      control: { type: 'text' },
+      table: {
+        type: { summary: 'React.ReactNode' },
+      },
+    },
+    variant: {
+      description:
+        'The visual style of the button. **Note:** surface and soft variants only support neutral color.',
+      options: ['ghost', 'surface', 'soft', 'solid'],
+      control: { type: 'select' },
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'solid' },
+      },
+    },
+    color: {
+      description: 'The color of the button.',
+      options: ['cyan', 'neutral', 'red'],
+      control: { type: 'select' },
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'neutral' },
+      },
+    },
+    size: {
+      description: 'The size of the button',
+      options: ['1', '2', '3'],
+      control: { type: 'select' },
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: '2' },
+      },
+    },
+    disabled: {
+      description: 'Whether the button is disabled',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    loading: {
+      description: 'Whether the button is in loading state',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    highContrast: {
+      description: 'Whether to use high contrast styling',
+      control: 'boolean',
+      table: {
+        type: { summary: 'boolean' },
+        defaultValue: { summary: false },
+      },
+    },
+    className: {
+      description: 'Additional CSS class names to apply to the button',
+      control: false,
+      table: {
+        type: { summary: 'string' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+    onClick: {
+      action: 'clicked',
+      description: 'Function called when the button is clicked',
+      table: {
+        type: { summary: 'function' },
+        defaultValue: { summary: 'undefined' },
+      },
+    },
+  },
+}
+
+export const Default = {
+  args: {
+    children: 'Button',
+    variant: 'solid',
+    color: 'neutral',
+    size: '2',
+  },
+}
+
+export const Variants = {
+  render: () => (
+    <Flex gap="4" direction="column">
+      <Button variant="solid" color="neutral">
+        Solid (alias: neutral)
+      </Button>
+      <Button variant="soft" color="neutral">
+        Soft (neutral only)
+      </Button>
+      <Button variant="surface" color="neutral">
+        Surface (neutral only)
+      </Button>
+      <Button variant="ghost" color="neutral">
+        Ghost (neutral)
+      </Button>
+    </Flex>
+  ),
+}
+
+export const SolidButtons = {
+  render: () => (
+    <Flex gap="4" direction="column">
+      <Button variant="solid" color="cyan">
+        Cyan
+      </Button>
+      <Button variant="solid" color="neutral">
+        Neutral
+      </Button>
+      <Button variant="solid" color="red">
+        Red
+      </Button>
+    </Flex>
+  ),
+}
+
+export const GhostButtons = {
+  render: () => (
+    <Flex gap="4" direction="column">
+      <Button variant="ghost" color="cyan">
+        Cyan
+      </Button>
+      <Button variant="ghost" color="neutral">
+        Neutral
+      </Button>
+      <Button variant="ghost" color="red">
+        Red
+      </Button>
+    </Flex>
+  ),
+}
+
+export const SurfaceButtons = {
+  render: () => (
+    <Flex gap="4" direction="column">
+      <Button variant="surface" color="neutral">
+        Neutral (only available color)
+      </Button>
+    </Flex>
+  ),
+}
+
+export const SoftButtons = {
+  render: () => (
+    <Flex gap="4" direction="column">
+      <Button variant="soft" color="gray">
+        Neutral (only available color)
+      </Button>
+    </Flex>
+  ),
+}
+
+export const Sizes = {
+  render: () => (
+    <Flex gap="4" direction="column">
+      <Button size="1">Size 1</Button>
+      <Button size="2">Size 2</Button>
+      <Button size="3">Size 3</Button>
+    </Flex>
+  ),
+}
+
+export const States = {
+  render: () => (
+    <Flex gap="4" direction="column">
+      <Flex gap="4" direction="column">
+        <Button>Normal</Button>
+        <Button disabled>Disabled</Button>
+        <Button loading>Loading</Button>
+      </Flex>
+      <Flex gap="4" direction="column">
+        <Button variant="soft" color="gray">
+          Normal
+        </Button>
+        <Button variant="soft" color="gray" disabled>
+          Disabled
+        </Button>
+        <Button variant="soft" color="gray" loading>
+          Loading
+        </Button>
+      </Flex>
+      <Flex gap="4" direction="column">
+        <Button variant="ghost" color="red">
+          Normal
+        </Button>
+        <Button variant="ghost" color="red" disabled>
+          Disabled
+        </Button>
+        <Button variant="ghost" color="red" loading>
+          Loading
+        </Button>
+      </Flex>
+    </Flex>
+  ),
+}
+
+export const HighContrast = {
+  render: () => (
+    <Flex gap="4" direction="column">
+      <Button color="neutral">Normal</Button>
+      <Button color="neutral" highContrast>
+        High Contrast
+      </Button>
+      <Button variant="ghost" color="cyan">
+        Normal
+      </Button>
+      <Button variant="ghost" color="cyan" highContrast>
+        High Contrast
+      </Button>
+    </Flex>
+  ),
+}
+
+export const WithIcons = {
+  render: () => (
+    <Flex gap="4" direction="column" width="100%">
+      <Button variant="solid" color="cyan">
+        <PlusIcon width={16} height={16} />
+        New Item
+      </Button>
+      <Button variant="soft" color="gray">
+        Icon Only <PlusIcon width={16} height={16} />
+      </Button>
+    </Flex>
+  ),
+}