feat(refactor)

packages/Spinners/demo/SpinnerCircular.stories.mdx

@@ -0,0 +1,35 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+import { SpinnerCircular, SpinnerCircularProps } from '../src/Elements/SpinnerCircular';
+
+<Meta title="Spinners/SpinnerCircular" component={SpinnerCircular} />
+
+# SpinnerCircular
+
+A circular spinner component.
+
+
+### How to Use:
+
+```jsx
+import React from 'react';
+import { SpinnerCircular } from 'your-library'; // Replace 'your-library' with the actual path
+
+function App() {
+  return (
+    <div>
+      <h1>Adding Joyful Animation to Your UI!</h1>
+      <SpinnerCircular
+        secondaryColor="#1BFD9C" // Customize the secondary color
+        speed={1.2} // Adjust the animation speed
+        still={false} // Set to true to stop the animation
+        thickness={5} // Customize the thickness of the spinner
+        style={{ width: "200px", height: "200px" }} // Set the size of the spinner
+      />
+    </div>
+  );
+}
+
+export default App;
+
+
+```

packages/Spinners/demo/SpinnerDiamond.stories.mdx

@@ -0,0 +1,35 @@
+import { Meta, Story } from '@storybook/addon-docs/blocks';
+import { SpinnerDiamond, SpinnerDiamondProps } from '../src/Elements/SpinnerDiamond';
+
+<Meta title="Spinners/SpinnerDiamond" component={SpinnerDiamond} />
+
+# SpinnerDiamond
+
+A circular spinner component.
+
+
+### How to Use:
+
+```jsx
+import React from 'react';
+import { SpinnerDiamond } from 'your-library'; // Replace 'your-library' with the actual path
+
+function App() {
+  return (
+    <div>
+      <h1>Adding Joyful Animation to Your UI!</h1>
+      <SpinnerDiamond
+        secondaryColor="#1BFD9C" // Customize the secondary color
+        speed={1.2} // Adjust the animation speed
+        still={false} // Set to true to stop the animation
+        thickness={5} // Customize the thickness of the spinner
+        style={{ width: "200px", height: "200px" }} // Set the size of the spinner
+      />
+    </div>
+  );
+}
+
+export default App;
+
+
+```

packages/Spinners/demo/SpinnerInfinity.stories.mdx

@@ -0,0 +1,36 @@
+
+
+import { Meta } from '@storybook/addon-docs/blocks';
+
+import SpinnerInfinity from '../src/Elements/SpinnerInfinity/SpinnerInfinity';
+
+<Meta title="Spinners/SpinnerInfinity" component={SpinnerInfinity} />
+
+## SpinnerInfinity: Brew Some Fun into Your UI!
+
+Introducing the *SpinnerInfinity* component, a delightful way to add a touch of warmth and charm to your user interface. ☕🌀
+
+Bring the cozy vibe of a coffee break to your app as the SpinnerInfinity swirls and twirls with enchanting animations. Whether it's a caffeine-driven app or just a playful twist to your design, the SpinnerInfinity is here to lift your spirits.
+
+### Features:
+
+- **Automatic Brewing**: The SpinnerInfinity starts its joyful spin as soon as it's summoned, giving your UI an instant dose of cheer.
+- **Infinite Sips**: Like a bottomless cup, the SpinnerInfinity keeps spinning endlessly, providing a comforting and captivating experience.
+- **Easy Integration**: Adding the SpinnerInfinity to your project is as smooth as a perfectly brewed latte, thanks to its user-friendly API.
+
+### How to Brew the Fun:
+
+
+```jsx
+import React from 'react';
+import SpinnerInfinity from 'react-craftify-buttons';  
+
+const MyComponent = () => {
+  return (
+    <div>
+        <SpinnerInfinity style={{ width: "200px", height: "200px" }} />
+    </div>
+  );
+};
+
+```

packages/Spinners/src/Elements/SpinnerCircular.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import styled, { keyframes, css } from 'styled-components';
+import {
+  secondaryColorDefaultProps,
+  SecondaryColorSpinnerProps,
+} from '../helpers';
+import { SpinnersProps, withSharedProps } from '../withSharedProps';
+
+export type SpinnerCircularProps = SpinnersProps & SecondaryColorSpinnerProps;
+
+const spinAnimation = keyframes`
+  0% {
+    stroke-dashoffset: 306;
+  }
+  50% {
+    stroke-dasharray: 40, 134;
+  }
+  100% {
+    stroke-dasharray: 1, 174;
+    stroke-dashoffset: 132;
+  }
+`;
+
+const StyledSvg = styled.svg`
+  display: block;
+`;
+
+const StyledCircle = styled.circle<SpinnerCircularProps>`
+  fill: none;
+  stroke: ${props => props.secondaryColor};
+  stroke-width: ${props => 4 * (props.thickness / 100)};
+`;
+
+const StyledAnimatedCircle = styled(StyledCircle)<SpinnerCircularProps>`
+  stroke: currentColor;
+  stroke-dasharray: 1, 174;
+  stroke-dashoffset: 306;
+  stroke-linecap: round;
+  animation: ${props =>
+    !props.still
+      ? css`
+          ${spinAnimation} ${140 / props.speed}s linear infinite
+        `
+      : 'none'};
+`;
+
+const Component: React.FC<SpinnerCircularProps> = ({
+  secondaryColor,
+  speed,
+  still,
+  thickness,
+  ...svgProps
+}) => {
+  return (
+    <StyledSvg fill="none" {...svgProps} viewBox="0 0 66 66">
+      <StyledCircle
+        cx="33"
+        cy="33"
+        r="28"
+        secondaryColor={secondaryColor}
+        thickness={thickness}
+      />
+      <StyledAnimatedCircle
+        cx="33"
+        cy="33"
+        r="28"
+        thickness={thickness}
+        speed={speed}
+        still={still}
+      />
+    </StyledSvg>
+  );
+};
+
+Component.defaultProps = secondaryColorDefaultProps;
+
+export const SpinnerCircular = withSharedProps(Component);

packages/Spinners/src/Elements/SpinnerCircularFixed.tsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import styled, { keyframes, css } from 'styled-components';
+import {
+  secondaryColorDefaultProps,
+  SecondaryColorSpinnerProps,
+} from '../helpers';
+import { SpinnersProps, withSharedProps } from '../withSharedProps';
+
+export type SpinnerCircularFixedProps = SpinnersProps & SecondaryColorSpinnerProps;
+
+const spinAnimation = keyframes`
+  0% {
+    stroke-dashoffset: 325;
+  }
+  100% {
+    stroke-dashoffset: 151;
+  }
+`;
+
+const StyledSvg = styled.svg`
+  display: block;
+`;
+
+const StyledCircle = styled.circle<SpinnerCircularFixedProps>`
+  fill: none;
+  stroke: ${props => props.secondaryColor};
+  stroke-width: ${props => 4 * (props.thickness / 100)};
+`;
+
+const StyledAnimatedCircle = styled(StyledCircle)<SpinnerCircularFixedProps>`
+  stroke: currentColor;
+  stroke-dasharray: 40, 134;
+  stroke-dashoffset: 325;
+  stroke-linecap: round;
+  animation: ${spinAnimation} ${props =>
+    140 / props.speed}s linear infinite;
+`;
+
+const Component: React.FC<SpinnerCircularFixedProps> = ({
+  secondaryColor,
+  speed,
+  still,
+  thickness,
+  ...svgProps
+}) => {
+  return (
+    <StyledSvg fill="none" {...svgProps} viewBox="0 0 66 66">
+      <StyledCircle
+        cx="33"
+        cy="33"
+        r="28"
+        secondaryColor={secondaryColor}
+        thickness={thickness}
+      />
+      <StyledAnimatedCircle
+        cx="33"
+        cy="33"
+        r="28"
+        thickness={thickness}
+        speed={speed}
+        still={still}
+      />
+    </StyledSvg>
+  );
+};
+
+Component.defaultProps = secondaryColorDefaultProps;
+
+export const SpinnerCircularFixed = withSharedProps(Component);

packages/Spinners/src/Elements/SpinnerCircularSplit.tsx

@@ -0,0 +1,96 @@
+import React, { CSSProperties } from 'react';
+import styled, { keyframes, css } from 'styled-components';
+import {
+  secondaryColorDefaultProps,
+  SecondaryColorSpinnerProps,
+} from '../helpers';
+import { SpinnersProps, withSharedProps } from '../withSharedProps';
+
+export type SpinnerCircularSplitProps = SpinnersProps & SecondaryColorSpinnerProps;
+
+const spinAnimation = keyframes`
+  0% {
+    stroke-dashoffset: 1;
+    stroke-dasharray: 5, 170;
+  }
+  10% {
+    stroke-dashoffset: 13;
+    stroke-dasharray: 30, 145;
+  }
+  13% {
+    stroke-dashoffset: -11;
+    stroke-dasharray: 5, 145;
+  }
+  50% {
+    stroke-dasharray: 5, 0, 5, 165;
+    stroke-dashoffset: -82;
+  }
+  51% {
+    stroke-dasharray: 2, 0, 2, 139;
+    stroke-dashoffset: -85;
+  }
+  61% {
+    stroke-dasharray: 15, 0, 15, 165;
+    stroke-dashoffset: -72;
+  }
+  64% {
+    stroke-dasharray: 5, 20, 5, 145;
+    stroke-dashoffset: -72;
+  }
+`;
+
+const StyledSvg = styled.svg`
+  display: block;
+`;
+
+const StyledCircle = styled.circle<SpinnerCircularSplitProps>`
+  fill: none;
+  stroke: ${props => props.secondaryColor};
+  stroke-width: ${props => 4 * (props.thickness / 100)};
+`;
+
+const StyledAnimatedCircle = styled(StyledCircle)<SpinnerCircularSplitProps>`
+  stroke: currentColor;
+  stroke-dasharray: 5, 170;
+  stroke-dashoffset: 1;
+  stroke-linecap: round;
+  transform: rotate(-90deg);
+  animation: ${props =>
+    !props.still
+      ? css`
+          ${spinAnimation} ${140 / props.speed}s linear infinite
+        `
+      : 'none'};
+`;
+
+const Component: React.FC<SpinnerCircularSplitProps> = ({
+  secondaryColor,
+  speed,
+  still,
+  thickness,
+  ...svgProps
+}) => {
+  return (
+    <StyledSvg fill="none" {...svgProps} viewBox="0 0 66 66">
+      <StyledCircle
+        cx="33"
+        cy="33"
+        r="28"
+        secondaryColor={secondaryColor}
+        thickness={thickness}
+      />
+      <StyledAnimatedCircle
+        cx="33"
+        cy="33"
+        r="28"
+        thickness={thickness}
+        speed={speed}
+        still={still}
+      />
+    </StyledSvg>
+  );
+};
+
+Component.defaultProps = secondaryColorDefaultProps;
+
+export const SpinnerCircularSplit = withSharedProps(Component);