roleypoly/v3
1
0
Fork 0
mirror of https://github.com/roleypoly/roleypoly.git synced 2025-06-16 09:39:09 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

chore: update prettier tab width for consistency (#175)

Browse source
This commit is contained in:
41666 2021-03-13 22:54:34 -05:00 • committed by GitHub
parent a931f8c69c
commit f24d2fcc99
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
247 changed files with 7224 additions and 7375 deletions
Download patch file Download diff file Expand all files Collapse all files

2
packages/design-system/molecules/demo-discord/DemoDiscord.stories.tsx
View file

@ -2,7 +2,7 @@ import * as React from 'react';
import { DemoDiscord } from './DemoDiscord';
export default {
title: 'Molecules/Role Demos',
title: 'Molecules/Role Demos',
};
export const Discord = () => <DemoDiscord />;

52
packages/design-system/molecules/demo-discord/DemoDiscord.styled.ts
View file

@ -2,35 +2,35 @@ import { palette } from '@roleypoly/design-system/atoms/colors';
import styled, { keyframes } from 'styled-components';
export const Base = styled.div`
background-color: ${palette.discord100};
border: solid 1px rgba(0, 0, 0, 0.15);
border-radius: 3px;
padding: 10px;
user-select: none;
background-color: ${palette.discord100};
border: solid 1px rgba(0, 0, 0, 0.15);
border-radius: 3px;
padding: 10px;
user-select: none;
`;
export const Timestamp = styled.span`
padding: 0 5px;
font-size: 0.7em;
opacity: 0.3;
padding: 0 5px;
font-size: 0.7em;
opacity: 0.3;
`;
export const TextParts = styled.span`
padding: 0 5px;
padding: 0 5px;
`;
export const Username = styled(TextParts)`
&:hover {
text-decoration: underline;
cursor: pointer;
}
&:hover {
text-decoration: underline;
cursor: pointer;
}
`;
export const InputBox = styled.div`
margin-top: 10px;
background-color: ${palette.discord200};
padding: 7px 10px;
border-radius: 3px;
margin-top: 10px;
background-color: ${palette.discord200};
padding: 7px 10px;
border-radius: 3px;
`;
const lineBlink = keyframes`
@ -52,16 +52,16 @@ const lineBlink = keyframes`
`;
export const Line = styled.div`
background-color: ${palette.grey600};
width: 1px;
height: 1.5em;
display: inline-block;
position: absolute;
right: -5px;
animation: ${lineBlink} 0.5s ease-in-out infinite alternate-reverse;
background-color: ${palette.grey600};
width: 1px;
height: 1.5em;
display: inline-block;
position: absolute;
right: -5px;
animation: ${lineBlink} 0.5s ease-in-out infinite alternate-reverse;
`;
export const InputTextAlignment = styled.div`
position: relative;
display: inline-block;
position: relative;
display: inline-block;
`;

86
packages/design-system/molecules/demo-discord/DemoDiscord.tsx
View file

@ -2,52 +2,52 @@ import { Typist } from '@roleypoly/design-system/atoms/typist';
import { demoData } from '@roleypoly/types/demoData';
import * as React from 'react';
import {
Base,
InputBox,
InputTextAlignment,
Line,
TextParts,
Timestamp,
Username,
Base,
InputBox,
InputTextAlignment,
Line,
TextParts,
Timestamp,
Username,
} from './DemoDiscord.styled';
export const DemoDiscord = () => {
const time = new Date();
const timeString = time.toTimeString();
const time = new Date();
const timeString = time.toTimeString();
const [easterEggCount, setEasterEggCount] = React.useState(0);
const [easterEggCount, setEasterEggCount] = React.useState(0);
return (
<Base>
<Timestamp>
{time.getHours() % 12}:{timeString.slice(3, 5)}&nbsp;
{time.getHours() <= 12 ? 'AM' : 'PM'}
</Timestamp>
<Username onClick={() => setEasterEggCount(easterEggCount + 1)}>
okano&nbsp;cat
</Username>
<TextParts>
{easterEggCount >= 15
? `NYAAAAAAA${'A'.repeat(easterEggCount - 15)}`
: easterEggCount >= 11
? `I'm.. I'm gonna...`
: easterEggCount >= 10
? `S-senpai... Be careful...`
: easterEggCount >= 5
? `H-hey... Stop that..`
: `Hey, I'd like some roles!`}
</TextParts>
<InputBox>
<InputTextAlignment>
&nbsp;
<Typist
resetTimeout={2000}
charTimeout={75}
lines={demoData.map((role) => `.iam ${role.name}`)}
/>
<Line />
</InputTextAlignment>
</InputBox>
</Base>
);
return (
<Base>
<Timestamp>
{time.getHours() % 12}:{timeString.slice(3, 5)}&nbsp;
{time.getHours() <= 12 ? 'AM' : 'PM'}
</Timestamp>
<Username onClick={() => setEasterEggCount(easterEggCount + 1)}>
okano&nbsp;cat
</Username>
<TextParts>
{easterEggCount >= 15
? `NYAAAAAAA${'A'.repeat(easterEggCount - 15)}`
: easterEggCount >= 11
? `I'm.. I'm gonna...`
: easterEggCount >= 10
? `S-senpai... Be careful...`
: easterEggCount >= 5
? `H-hey... Stop that..`
: `Hey, I'd like some roles!`}
</TextParts>
<InputBox>
<InputTextAlignment>
&nbsp;
<Typist
resetTimeout={2000}
charTimeout={75}
lines={demoData.map((role) => `.iam ${role.name}`)}
/>
<Line />
</InputTextAlignment>
</InputBox>
</Base>
);
};