better combo stories

.github/workflows/chromatic.yml

@@ -36,3 +36,5 @@ jobs:
         uses: chromaui/action@latest
         with:
           projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          exitOnceUploaded: true
+          onlyChanged: true

.storybook/manager-head.html

@@ -0,0 +1,7 @@
+<meta
+  name="react-subtle-nudge"
+  content="A collection of animations to subtly nudge users to your React components"
+  key="desc"
+/>
+
+<meta name="robots" content="noindex" />

src/stories/multi/bounce-shake/bounce-shake.stories.tsx

@@ -4,9 +4,14 @@ import type { Meta, StoryObj } from '@storybook/react'
 import Bounce from '../../../components/bounce'
 import Shake from '../../../components/shake'
 
+import { Button as ShakeButton } from '../../shake/shake.stories'
+import { Input as ShakeInput } from '../../shake/shake.stories'
+import { Button as BounceButton } from '../../bounce/bounce.stories'
+import { Input as BounceInput } from '../../bounce/bounce.stories'
+
 const meta: Meta<typeof Bounce> = {
   component: Bounce,
-  title: 'Components/Combination/Bounce&Shake',
+  title: 'Components/Combinations/Bounce&Shake',
   subcomponents: { Shake: Shake as React.ComponentType<unknown> },
   argTypes: {
     children: {
@@ -28,9 +33,9 @@ export const Button: Story = {
     reverse: false,
   },
 
-  render: (args) => (
-    <Bounce {...args}>
-      <Shake {...args}>
+  render: () => (
+    <Bounce {...BounceButton.args}>
+      <Shake {...ShakeButton.args}>
         <button>Click Me!</button>
       </Shake>
     </Bounce>
@@ -45,9 +50,9 @@ export const Input: Story = {
     reverse: false,
   },
 
-  render: (args) => (
-    <Bounce {...args}>
-      <Shake {...args}>
+  render: () => (
+    <Bounce {...BounceInput.args}>
+      <Shake {...ShakeInput.args}>
         <input placeholder='Write Something!' type='text' />
       </Shake>
     </Bounce>

src/stories/multi/pulse-circle/pulse-circle.stories.tsx

@@ -4,10 +4,22 @@ import type { Meta, StoryObj } from '@storybook/react'
 import Pulse from '../../../components/pulse'
 import Circle from '../../../components/circle'
 
+import { Button as CircleButton } from '../../circle/circle.stories'
+import { Input as CircleInput } from '../../circle/circle.stories'
+import { Button as PulseButton } from '../../pulse/pulse.stories'
+import { Input as PulseInput } from '../../pulse/pulse.stories'
+
 const meta: Meta<typeof Pulse> = {
   component: Pulse,
-  title: 'Components/Combination/Pulse&Circle',
+  title: 'Components/Combinations/Pulse&Circle',
   subcomponents: { Circle: Circle as React.ComponentType<unknown> },
+  decorators: [
+    (Story) => (
+      <div style={{ borderRadius: '5px' }}>
+        <Story />
+      </div>
+    ),
+  ],
   argTypes: {
     children: {
       table: {
@@ -21,33 +33,19 @@ export default meta
 type Story = StoryObj<typeof Pulse>
 
 export const Button: Story = {
-  args: {
-    duration: '1s',
-    iterations: 0,
-    iterationDelay: '1s',
-    reverse: false,
-  },
-
-  render: (args) => (
-    <Pulse {...args}>
-      <Circle {...args}>
+  render: () => (
+    <Circle {...CircleButton.args}>
+      <Pulse {...PulseButton.args}>
         <button>Click Me!</button>
-      </Circle>
-    </Pulse>
+      </Pulse>
+    </Circle>
   ),
 }
 
 export const Input: Story = {
-  args: {
-    duration: '1s',
-    iterations: 0,
-    iterationDelay: '1s',
-    reverse: false,
-  },
-
-  render: (args) => (
-    <Pulse {...args}>
-      <Circle {...args}>
+  render: () => (
+    <Pulse {...PulseInput.args}>
+      <Circle {...CircleInput.args}>
         <input placeholder='Write Something!' type='text' />
       </Circle>
     </Pulse>

src/stories/multi/pulse-wiggle/pulse-wiggle.stories.tsx

@@ -4,9 +4,14 @@ import type { Meta, StoryObj } from '@storybook/react'
 import Pulse from '../../../components/pulse'
 import Wiggle from '../../../components/wiggle'
 
+import { Button as PulseButton } from '../../pulse/pulse.stories'
+import { Input as PulseInput } from '../../pulse/pulse.stories'
+import { Button as WiggleButton } from '../../wiggle/wiggle.stories'
+import { Input as WiggleInput } from '../../wiggle/wiggle.stories'
+
 const meta: Meta<typeof Pulse> = {
   component: Pulse,
-  title: 'Components/Combination/Pulse&Wiggle',
+  title: 'Components/Combinations/Pulse&Wiggle',
   subcomponents: { Wiggle: Wiggle as React.ComponentType<unknown> },
   argTypes: {
     children: {
@@ -21,16 +26,9 @@ export default meta
 type Story = StoryObj<typeof Pulse>
 
 export const Button: Story = {
-  args: {
-    duration: '1s',
-    iterations: 0,
-    iterationDelay: '1s',
-    reverse: false,
-  },
-
-  render: (args) => (
-    <Pulse {...args}>
-      <Wiggle {...args}>
+  render: () => (
+    <Pulse {...PulseButton.args}>
+      <Wiggle {...WiggleButton.args}>
         <button>Click Me!</button>
       </Wiggle>
     </Pulse>
@@ -45,9 +43,9 @@ export const Input: Story = {
     reverse: false,
   },
 
-  render: (args) => (
-    <Pulse {...args}>
-      <Wiggle {...args}>
+  render: () => (
+    <Pulse {...PulseInput.args}>
+      <Wiggle {...WiggleInput.args}>
         <input placeholder='Write Something!' type='text' />
       </Wiggle>
     </Pulse>