mirror of
https://github.com/roleypoly/roleypoly.git
synced 2025-06-16 09:39:09 +00:00
Refactor node packages to yarn workspaces & ditch next.js for CRA. (#161)
* chore: restructure project into yarn workspaces, remove next * fix tests, remove webapp from terraform * remove more ui deployment bits * remove pages, fix FUNDING.yml * remove isomorphism * remove next providers * fix linting issues * feat: start basis of new web ui system on CRA * chore: move types to @roleypoly/types package * chore: move src/common/utils to @roleypoly/misc-utils * chore: remove roleypoly/ path remappers * chore: renmove vercel config * chore: re-add worker-types to api package * chore: fix type linting scope for api * fix(web): craco should include all of packages dir * fix(ci): change api webpack path for wrangler * chore: remove GAR actions from CI * chore: update codeql job * chore: test better github dar matcher in lint-staged
This commit is contained in:
GitHub
parent
49e308507e
commit
2ff6588030
328 changed files with 16624 additions and 3525 deletions
204
packages/design-system/atoms/sparkle/Shapes.tsx
Normal file
204
packages/design-system/atoms/sparkle/Shapes.tsx
Normal file
|
|
@ -0,0 +1,204 @@
|
|||
import * as React from 'react';
|
||||
import { CSSProperties } from 'styled-components';
|
||||
|
||||
type SparkleProps = {
|
||||
height: string;
|
||||
strokeColor: string;
|
||||
repeatCount?: number;
|
||||
style?: CSSProperties;
|
||||
delay?: number;
|
||||
};
|
||||
|
||||
const Animation = (props: SparkleProps) => (
|
||||
<>
|
||||
<animateTransform
|
||||
fill="freeze"
|
||||
attributeName="transform"
|
||||
type="scale"
|
||||
begin={`${props.delay || 0}s`}
|
||||
additive="sum"
|
||||
dur="1s"
|
||||
repeatCount={props.repeatCount || 'indefinite'}
|
||||
from="-1 -1"
|
||||
to="1 1"
|
||||
/>
|
||||
<animateTransform
|
||||
fill="freeze"
|
||||
attributeName="transform"
|
||||
type="translate"
|
||||
begin={`${props.delay || 0}s`}
|
||||
additive="sum"
|
||||
dur="1s"
|
||||
repeatCount={props.repeatCount || 'indefinite'}
|
||||
from="-1 -1"
|
||||
to="1 1"
|
||||
/>
|
||||
|
||||
<animateTransform
|
||||
// additive="sum"
|
||||
fill="freeze"
|
||||
attributeName="transform"
|
||||
type="scale"
|
||||
to="0 0"
|
||||
dur="0.3s"
|
||||
begin={props.repeatCount || 10}
|
||||
/>
|
||||
</>
|
||||
);
|
||||
|
||||
const SparkleCircle = (props: SparkleProps) => (
|
||||
<svg height={props.height} style={props.style} viewBox="-16 -16 16 16" fill="none">
|
||||
<g transform="translate(-8 -8)">
|
||||
<circle cx="0" cy="0" r="6.5" stroke={props.strokeColor} strokeWidth="2">
|
||||
<Animation {...props} />
|
||||
</circle>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const SparkleStar = (props: SparkleProps) => (
|
||||
<svg height={props.height} style={props.style} viewBox="-30 -30 30 30" fill="none">
|
||||
<g transform="translate(0 0)">
|
||||
<path
|
||||
d="M15.5 3.23607L18.0289 11.0193L18.2534 11.7102H18.98H27.1637L20.5429 16.5205L19.9551 16.9476L20.1796 17.6385L22.7086 25.4217L16.0878 20.6115L15.5 20.1844L14.9122 20.6115L8.29144 25.4217L10.8204 17.6385L11.0449 16.9476L10.4571 16.5205L3.83631 11.7102H12.02H12.7466L12.9711 11.0193L15.5 3.23607Z"
|
||||
stroke={props.strokeColor}
|
||||
strokeWidth="2"
|
||||
>
|
||||
<Animation {...props} />
|
||||
<animateTransform
|
||||
fill="freeze"
|
||||
attributeName="transform"
|
||||
type="translate"
|
||||
begin={`${props.delay || 0}s`}
|
||||
additive="sum"
|
||||
dur="0.5s"
|
||||
repeatCount={props.repeatCount || 'indefinite'}
|
||||
from="30 30"
|
||||
to="0 0"
|
||||
/>
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const SparkleCross = (props: SparkleProps) => (
|
||||
<svg height={props.height} style={props.style} viewBox="-15 -15 15 15" fill="none">
|
||||
<g transform="translate(-15 -15)">
|
||||
<path
|
||||
d="M-3.27836e-07 7.5L5 7.5M7.5 4.99999L7.5 2.53319e-06M9.99999 7.49999L15 7.49999M7.5 15L7.5 10"
|
||||
stroke={props.strokeColor}
|
||||
strokeWidth="2"
|
||||
>
|
||||
<Animation {...props} />
|
||||
</path>
|
||||
</g>
|
||||
</svg>
|
||||
);
|
||||
|
||||
const patternBase: CSSProperties = {
|
||||
position: 'relative',
|
||||
};
|
||||
|
||||
const shapeMixin: CSSProperties = {
|
||||
position: 'absolute',
|
||||
};
|
||||
|
||||
export const SparklePatternAlpha = ({ style, ...props }: SparkleProps) => (
|
||||
<div style={patternBase}>
|
||||
<SparkleCircle
|
||||
{...props}
|
||||
height="20%"
|
||||
style={{
|
||||
...shapeMixin,
|
||||
|
||||
top: 0,
|
||||
left: 0,
|
||||
}}
|
||||
delay={0.24}
|
||||
/>
|
||||
<SparkleCross
|
||||
{...props}
|
||||
height="20%"
|
||||
style={{
|
||||
...shapeMixin,
|
||||
|
||||
top: '45%',
|
||||
left: '15%',
|
||||
}}
|
||||
delay={0.55}
|
||||
/>
|
||||
<SparkleCross
|
||||
{...props}
|
||||
height="10%"
|
||||
style={{
|
||||
...shapeMixin,
|
||||
|
||||
top: '30%',
|
||||
left: '-15%',
|
||||
transform: 'rotate(30deg)',
|
||||
}}
|
||||
delay={0.33}
|
||||
/>
|
||||
<SparkleStar
|
||||
{...props}
|
||||
height="30%"
|
||||
style={{
|
||||
...shapeMixin,
|
||||
|
||||
bottom: '0%',
|
||||
right: '10%',
|
||||
}}
|
||||
delay={0.75}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
|
||||
export const SparklePatternBeta = ({ style, ...props }: SparkleProps) => (
|
||||
<div style={patternBase}>
|
||||
<SparkleCircle
|
||||
{...props}
|
||||
height="15%"
|
||||
style={{
|
||||
...shapeMixin,
|
||||
|
||||
top: '60%',
|
||||
left: '20%',
|
||||
}}
|
||||
delay={0.9}
|
||||
/>
|
||||
<SparkleCross
|
||||
{...props}
|
||||
height="20%"
|
||||
style={{
|
||||
...shapeMixin,
|
||||
|
||||
top: 0,
|
||||
right: 0,
|
||||
}}
|
||||
delay={0.11}
|
||||
/>
|
||||
<SparkleCross
|
||||
{...props}
|
||||
height="15%"
|
||||
style={{
|
||||
...shapeMixin,
|
||||
|
||||
top: '80%',
|
||||
right: 0,
|
||||
}}
|
||||
delay={0.15}
|
||||
/>
|
||||
<SparkleStar
|
||||
{...props}
|
||||
height="30%"
|
||||
style={{
|
||||
...shapeMixin,
|
||||
|
||||
top: '20%',
|
||||
left: '30%',
|
||||
transform: 'rotate(30deg)',
|
||||
}}
|
||||
delay={0.6}
|
||||
/>
|
||||
</div>
|
||||
);
|
||||
22
packages/design-system/atoms/sparkle/Sparkle.stories.tsx
Normal file
22
packages/design-system/atoms/sparkle/Sparkle.stories.tsx
Normal file
|
|
@ -0,0 +1,22 @@
|
|||
import { Button } from '@roleypoly/design-system/atoms/button';
|
||||
import { Hero } from '@roleypoly/design-system/atoms/hero';
|
||||
import * as React from 'react';
|
||||
import { SparkleOverlay } from './Sparkle';
|
||||
|
||||
export default {
|
||||
title: 'Atoms/Sparkle',
|
||||
component: SparkleOverlay,
|
||||
args: {
|
||||
size: -10,
|
||||
opacity: 1,
|
||||
repeatCount: 3,
|
||||
},
|
||||
};
|
||||
|
||||
export const ExampleButton = (args) => (
|
||||
<Hero>
|
||||
<SparkleOverlay {...args}>
|
||||
<Button>Yo check this!</Button>
|
||||
</SparkleOverlay>
|
||||
</Hero>
|
||||
);
|
||||
52
packages/design-system/atoms/sparkle/Sparkle.tsx
Normal file
52
packages/design-system/atoms/sparkle/Sparkle.tsx
Normal file
|
|
@ -0,0 +1,52 @@
|
|||
import { palette } from '@roleypoly/design-system/atoms/colors';
|
||||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import { SparklePatternAlpha, SparklePatternBeta } from './Shapes';
|
||||
|
||||
type Props = {
|
||||
children: React.ReactNode;
|
||||
size?: number;
|
||||
opacity?: number;
|
||||
repeatCount?: number;
|
||||
strokeColor?: string;
|
||||
};
|
||||
|
||||
const SparkleContainer = styled.div`
|
||||
position: relative;
|
||||
`;
|
||||
|
||||
type EffectProps = {
|
||||
effectSize: Props['size'];
|
||||
effectOpacity: Props['opacity'];
|
||||
};
|
||||
|
||||
const SparkleEffect = styled.div<EffectProps>`
|
||||
position: absolute;
|
||||
top: ${(props) => props.effectSize}px;
|
||||
bottom: ${(props) => props.effectSize}px;
|
||||
left: ${(props) => props.effectSize}px;
|
||||
right: ${(props) => props.effectSize}px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
z-index: 5;
|
||||
opacity: ${(props) => props.effectOpacity};
|
||||
pointer-events: none;
|
||||
`;
|
||||
|
||||
export const SparkleOverlay = ({ strokeColor = palette.gold400, ...props }: Props) => (
|
||||
<SparkleContainer>
|
||||
<SparkleEffect effectSize={props.size || 0} effectOpacity={props.opacity || 1}>
|
||||
<SparklePatternAlpha
|
||||
repeatCount={props.repeatCount}
|
||||
height="100%"
|
||||
strokeColor={strokeColor}
|
||||
/>
|
||||
<SparklePatternBeta
|
||||
repeatCount={props.repeatCount}
|
||||
height="100%"
|
||||
strokeColor={strokeColor}
|
||||
/>
|
||||
</SparkleEffect>
|
||||
{props.children}
|
||||
</SparkleContainer>
|
||||
);
|
||||
1
packages/design-system/atoms/sparkle/index.ts
Normal file
1
packages/design-system/atoms/sparkle/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './Sparkle';
|
||||
Loading…
Add table
Add a link
Reference in a new issue