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
1
packages/design-system/atoms/typography/index.ts
Normal file
1
packages/design-system/atoms/typography/index.ts
Normal file
|
|
@ -0,0 +1 @@
|
|||
export * from './typography';
|
||||
21
packages/design-system/atoms/typography/mdx.tsx
Normal file
21
packages/design-system/atoms/typography/mdx.tsx
Normal file
|
|
@ -0,0 +1,21 @@
|
|||
import styled from 'styled-components';
|
||||
import { Link, Text, text600, text700, text800, text900 } from './typography';
|
||||
|
||||
export const mdxComponents = {
|
||||
h1: styled.h1`
|
||||
${text900}
|
||||
`,
|
||||
h2: styled.h2`
|
||||
${text800}
|
||||
`,
|
||||
h3: styled.h3`
|
||||
${text700}
|
||||
`,
|
||||
h4: styled.h4`
|
||||
${text600}
|
||||
`,
|
||||
p: styled.p`
|
||||
${Text}
|
||||
`,
|
||||
a: Link,
|
||||
};
|
||||
118
packages/design-system/atoms/typography/typography.stories.tsx
Normal file
118
packages/design-system/atoms/typography/typography.stories.tsx
Normal file
|
|
@ -0,0 +1,118 @@
|
|||
import * as React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import * as typography from './typography';
|
||||
|
||||
export default {
|
||||
title: 'Atoms/Typography',
|
||||
};
|
||||
|
||||
const Text = () => (
|
||||
<>
|
||||
<p>
|
||||
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Et facilis alias
|
||||
placeat cumque sapiente ad delectus omnis quae. Reiciendis quibusdam deserunt
|
||||
repellat. Exercitationem modi incidunt autem nemo tempore eaque soluta.
|
||||
</p>
|
||||
<p>
|
||||
帯カノ需混モイ一録43旧百12共ドレ能生ホクユ禁度ヨ材図クほはそ護関ラト郵張エノヨ議件クめざ県読れみとぶ論税クょンど慎転リつぎみ松期ほへド.
|
||||
縦投記ふで覧速っだせあ過先課フ演無ぎぱべ習併相ーす気6元ゆる領気希ぎ投代ラ我関レ森郎由系堂ず.
|
||||
読ケリ夜指ーっトせ認平引ウシ間花ヱクム年6台ぐ山婦ラスエ子著コア掲中ロ像属戸メソユ職諏ルど詐児題たに書希ク幕値長ラそめド.
|
||||
</p>
|
||||
<p>
|
||||
🔸🐕🔺💱🎊👽🐛 👨📼🕦📞 👱👆🍗👚🌈 🔝🔟🍉🔰🍲🏁🕗 🎡🐉🍲📻🔢🔄 💟💲🍻💜💩🔼
|
||||
🎱🌸📛👫🌻 🗽🕜🐥👕🍈. 🐒🍚🔓📱🏦 🎦🌑🔛💙👣🔚 🔆🗻🌿🎳📲🍯 🌞💟🎌🍌 🔪📯🐎💮
|
||||
👌👭🎋🏉🏰 📓🕃🎂💉🔩 🐟🌇👺🌊🌒 📪👅🍂🍁 🌖🐮🔽🌒📊. 🔤🍍🌸📷🎴 💏🍌📎👥👉👒
|
||||
👝💜🔶🍣 💨🗼👈💉💉💰 🍐🕖🌰👝🕓🏊🐕 🏀📅📼📒 🐕🌈👋
|
||||
</p>
|
||||
</>
|
||||
);
|
||||
|
||||
const swatches: [string, string | undefined, string][] = [
|
||||
['text900', 'LargeTitle', 'Used for large titles.'],
|
||||
['text800', 'MediumTitle', 'Used for medium titles.'],
|
||||
['text700', 'SmallTitle', 'Used for small titles.'],
|
||||
['text600', 'AccentTitle', 'Used for accenting titles.'],
|
||||
['text500', 'LargeText', 'Used for general large font text blocks.'],
|
||||
['text400', 'Text', 'Used for less important font text blocks.'],
|
||||
['text300', undefined, 'Used for smaller UI elements.'],
|
||||
['text200', 'AmbientLarge', 'Used for ambient text.'],
|
||||
['text100', 'AmbientSmall', 'Used for ambient text.'],
|
||||
];
|
||||
|
||||
const Section = styled.section`
|
||||
margin: 3.26rem;
|
||||
`;
|
||||
|
||||
const swatch = (mixin: typeof typography.text900) =>
|
||||
styled.p`
|
||||
${mixin}
|
||||
`;
|
||||
|
||||
const Usage = styled.code`
|
||||
${typography.text300}
|
||||
`;
|
||||
|
||||
const Description = styled.i`
|
||||
${typography.text200}
|
||||
`;
|
||||
|
||||
export const Sizes = () => (
|
||||
<div>
|
||||
{swatches.map(([mixin, componentName, usage], i) => {
|
||||
const Component = swatch((typography as any)[mixin]);
|
||||
return (
|
||||
<Section key={i}>
|
||||
<div>
|
||||
<Component>
|
||||
The quick brown fox jumped over the lazy dog.
|
||||
</Component>
|
||||
</div>
|
||||
<div>
|
||||
<Usage>
|
||||
<code>
|
||||
@{mixin} {componentName && `<${componentName} />`}
|
||||
</code>
|
||||
</Usage>
|
||||
</div>
|
||||
<div>
|
||||
<Description>{usage}</Description>
|
||||
</div>
|
||||
</Section>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
|
||||
const SpacingHead = styled.p`
|
||||
${typography.text700}
|
||||
`;
|
||||
|
||||
const SpacingSection = styled(Section)`
|
||||
max-width: 50vw;
|
||||
border-bottom: 1px solid rgba(0, 0, 0, 0.25);
|
||||
`;
|
||||
|
||||
export const Spacing = () => (
|
||||
<div>
|
||||
{swatches.map(([mixin], i) => {
|
||||
const Component = swatch((typography as any)[mixin]);
|
||||
return (
|
||||
<SpacingSection key={i}>
|
||||
<SpacingHead>@{mixin}</SpacingHead>
|
||||
<Component>
|
||||
<Text />
|
||||
</Component>
|
||||
</SpacingSection>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
);
|
||||
|
||||
export const Link = () => (
|
||||
<typography.Link
|
||||
target="_blank"
|
||||
href="https://images.boredomfiles.com/wp-content/uploads/sites/5/2016/03/fox-door-5.png"
|
||||
>
|
||||
Here is a link <3
|
||||
</typography.Link>
|
||||
);
|
||||
117
packages/design-system/atoms/typography/typography.tsx
Normal file
117
packages/design-system/atoms/typography/typography.tsx
Normal file
|
|
@ -0,0 +1,117 @@
|
|||
import { palette } from '@roleypoly/design-system/atoms/colors';
|
||||
import { transitions } from '@roleypoly/design-system/atoms/timings';
|
||||
import styled, { css } from 'styled-components';
|
||||
|
||||
const reset = css`
|
||||
margin: 0;
|
||||
line-height: 163%;
|
||||
padding: 0;
|
||||
font-weight: 400;
|
||||
text-decoration: none;
|
||||
font-size-adjust: 0.75;
|
||||
`;
|
||||
|
||||
export const text900 = css`
|
||||
${reset}
|
||||
|
||||
font-size: 2.3rem;
|
||||
`;
|
||||
|
||||
export const text800 = css`
|
||||
${reset}
|
||||
|
||||
font-size: 2rem;
|
||||
`;
|
||||
|
||||
export const text700 = css`
|
||||
${reset}
|
||||
|
||||
font-size: 1.7rem;
|
||||
`;
|
||||
|
||||
export const text600 = css`
|
||||
${reset}
|
||||
|
||||
font-size: 1.4rem;
|
||||
`;
|
||||
|
||||
export const text500 = css`
|
||||
${reset}
|
||||
|
||||
font-size: 1.2rem;
|
||||
`;
|
||||
|
||||
export const text400 = css`
|
||||
${reset}
|
||||
|
||||
font-size: 1rem;
|
||||
`;
|
||||
|
||||
export const text300 = css`
|
||||
${reset}
|
||||
|
||||
font-size: 0.9rem;
|
||||
`;
|
||||
|
||||
export const text200 = css`
|
||||
${reset}
|
||||
|
||||
font-size: 0.7rem;
|
||||
`;
|
||||
|
||||
export const text100 = css`
|
||||
${reset}
|
||||
|
||||
font-size: 0.5rem;
|
||||
`;
|
||||
|
||||
export const LargeTitle = styled.span`
|
||||
${text900}
|
||||
`;
|
||||
|
||||
export const MediumTitle = styled.span`
|
||||
${text800}
|
||||
`;
|
||||
|
||||
export const SmallTitle = styled.span`
|
||||
${text700}
|
||||
`;
|
||||
|
||||
export const AccentTitle = styled.span`
|
||||
${text600}
|
||||
`;
|
||||
|
||||
export const LargeText = styled.span`
|
||||
${text500}
|
||||
`;
|
||||
|
||||
export const Text = styled.span`
|
||||
${text400}
|
||||
`;
|
||||
|
||||
export const AmbientLarge = styled.span`
|
||||
${text200}
|
||||
`;
|
||||
|
||||
export const AmbientSmall = styled.span`
|
||||
${text100}
|
||||
`;
|
||||
|
||||
export const Link = styled.a`
|
||||
color: ${palette.taupe500};
|
||||
text-decoration: none;
|
||||
transition: color ${transitions.actionable}s ease-in-out;
|
||||
&:hover {
|
||||
color: ${palette.taupe600};
|
||||
}
|
||||
`;
|
||||
|
||||
export const CompletelyStylelessLink = styled.a`
|
||||
color: inherit;
|
||||
text-decoration: none;
|
||||
:visited,
|
||||
:active,
|
||||
:hover {
|
||||
color: inherit;
|
||||
}
|
||||
`;
|
||||
Loading…
Add table
Add a link
Reference in a new issue