github/TheGame
1
1
Fork 0
mirror of https://github.com/MetaFam/TheGame.git synced 2026-04-24 03:00:09 -04:00
Code Issues Packages Projects Releases Wiki Activity

define a few meta components in storybook (#55)

Browse Source
This commit is contained in:
Kris Urbas
2020-08-17 00:28:48 +10:00
committed by GitHub
parent 59a0e8f627
commit ba683acd26
10 changed files with 248 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
packages/design-system/.storybook/preview-body.html Normal file
View File

@@ -0,0 +1,5 @@
<style>
body {
padding: 2em;
}
</style>

26
packages/design-system/src/MetaBox.tsx Normal file
View File

@@ -0,0 +1,26 @@
import { Box, Text } from '@chakra-ui/core';
import React from 'react';
export type MetaBoxProps = {
title: string;
children: React.ReactNode;
};
export const MetaBox: React.FC<MetaBoxProps> = ({ children, title }) => (
<Box>
<Box bg="purpleBoxLight" p={4}>
<Text
fontFamily="mono"
fontSize="sm"
fontWeight="bold"
color="blueLight"
as="div"
>
{title}
</Text>
</Box>
<Box bg="purpleBoxDark" p={6}>
{children}
</Box>
</Box>
);

14
packages/design-system/src/MetaTag.tsx Normal file
View File

@@ -0,0 +1,14 @@
import { Tag, TagProps } from '@chakra-ui/core';
import React from 'react';
export const MetaTag: React.FC<TagProps> = ({ children, ...props }) => (
<Tag
fontFamily="body"
fontSize="sm"
backgroundColor="purpleTag"
color="white"
{...props}
>
{children}
</Tag>
);

22
packages/design-system/src/index.ts
View File

@@ -1,26 +1,26 @@
export { export {
ChakraProvider,
CSSReset,
Heading,
Box,
Image,
Text,
Avatar, Avatar,
Box,
Button, Button,
ButtonGroup, ButtonGroup,
Grid, CSSReset,
SimpleGrid, ChakraProvider,
Flex,
Divider, Divider,
Flex,
Grid,
Heading,
Icon, Icon,
IconButton, IconButton,
Image,
Input,
Link, Link,
List, List,
Input,
Select, Select,
SimpleGrid,
Skeleton, Skeleton,
Spinner, Spinner,
Stack, Stack,
Text,
useTheme, useTheme,
useToast, useToast,
} from '@chakra-ui/core'; } from '@chakra-ui/core';
@@ -30,3 +30,5 @@ export { Icon3box } from './icons';
export { EmailIcon } from '@chakra-ui/icons'; export { EmailIcon } from '@chakra-ui/icons';
export { MetaHeading } from './MetaHeading'; export { MetaHeading } from './MetaHeading';
export { MetaButton } from './MetaButton'; export { MetaButton } from './MetaButton';
export { MetaBox } from './MetaBox';
export { MetaTag } from './MetaTag';

20
packages/design-system/src/theme.ts
View File

@@ -3,6 +3,12 @@ import chakraTheme, { Theme as ChakraTheme } from '@chakra-ui/theme';
interface MetaColors { interface MetaColors {
offwhite: string; offwhite: string;
blue02: string; blue02: string;
dark: string;
purpleBoxDark: string;
purpleBoxLight: string;
purpleTag: string;
blueLight: string;
cyanText: string;
} }
interface MetaTheme { interface MetaTheme {
@@ -17,7 +23,7 @@ export const theme: Theme = {
...chakraTheme.styles, ...chakraTheme.styles,
global: { global: {
...chakraTheme.styles.global, ...chakraTheme.styles.global,
background: 'black', background: '#1b0d2a',
color: 'white', color: 'white',
}, },
}, },
@@ -35,8 +41,6 @@ export const theme: Theme = {
800: '#00494b', 800: '#00494b',
900: '#001a1b', 900: '#001a1b',
}, },
offwhite: '#F6F8F9',
blue02: 'rgba(79, 105, 205, 0.2)',
purple: { purple: {
50: '#eee7ff', 50: '#eee7ff',
100: '#c8bafc', 100: '#c8bafc',
@@ -49,10 +53,18 @@ export const theme: Theme = {
800: '#150747', 800: '#150747',
900: '#07021d', 900: '#07021d',
}, },
offwhite: '#F6F8F9',
blue02: 'rgba(79, 105, 205, 0.2)',
dark: '#1B0D2A',
purpleBoxDark: '#261943',
purpleBoxLight: '#392373',
purpleTag: '#40347C',
blueLight: '#A5B9F6',
cyanText: '#79F8FB',
}, },
fonts: { fonts: {
body: '"IBM Plex Sans", sans-serif', body: '"IBM Plex Sans", sans-serif',
mono: '"IBM Plex Mono", monospace', mono: '"IBM Plex Mono", monospace',
heading: '"Press Start 2P", sans-serif', heading: '"Press Start 2P", sans-serif',
} },
}; };

109
packages/design-system/stories/0-Text.stories.tsx
View File

@@ -1,23 +1,108 @@
import { Stack, Text } from '@chakra-ui/core';
import React from 'react'; import React from 'react';
import { Box, Button, Heading, Link, Stack, Text } from '../src';
export default { export default {
title: 'Text', title: 'Text',
component: Text, component: Text,
}; };
export const Sizes = () => ( export const AllTypes = () => (
<Stack spacing={3}> <Stack spacing={3}>
<Text fontSize="6xl">In love with MetaGame</Text> <Heading fontSize="3xl">Become a Player</Heading>
<Text fontSize="5xl">In love with MetaGame</Text>
<Text fontSize="4xl">In love with MetaGame</Text> <Text fontFamily="mono" fontSize="sm">
<Text fontSize="3xl">In love with MetaGame</Text> I’ll do this later.{' '}
<Text fontSize="2xl">In love with MetaGame</Text> <Button
<Text fontSize="xl">In love with MetaGame</Text> variant="link"
<Text fontSize="lg">In love with MetaGame</Text> size="sm"
<Text fontSize="md">In love with MetaGame</Text> color="cyanText"
<Text fontSize="sm">In love with MetaGame</Text> fontWeight="normal"
<Text fontSize="xs">In love with MetaGame</Text> verticalAlign="inherit"
onClick={() => {}}
>
Go to my profile
</Button>
</Text>
<Box>
<Text fontSize="xl" fontFamily="heading">
PΞTH
</Text>
<Text fontFamily="body" fontSize="md">
@peth
</Text>
</Box>
<Box>
<Text
fontFamily="body"
fontSize="sm"
fontWeight="bold"
color="blueLight"
textTransform="uppercase"
>
Role
</Text>
<Text fontFamily="body" fontSize="md" fontWeight="bold">
Community Lead
</Text>
</Box>
<Text fontFamily="mono" fontSize="sm" color="blueLight">
About me
</Text>
<Box>
<Text fontFamily="body" fontSize="2xl" fontWeight="bold">
Peter Jursic
</Text>
<Text fontFamily="body" fontSize="md">
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet
sint. Velit officia consequat duis enim velit mollit. Exercitation
veniam consequat sunt nostrud amet.{' '}
<Button
fontFamily="body"
variant="link"
size="sm"
color="cyanText"
fontWeight="normal"
verticalAlign="inherit"
onClick={() => {}}
>
Read more
</Button>
</Text>
<Link
fontFamily="body"
fontSize="sm"
color="cyanText"
href="https://metagame.wtf"
>
Go to external url
</Link>
</Box>
<Box>
<Text fontFamily="body" fontSize="lg" fontWeight="bold">
The Reformer
</Text>
<Text fontFamily="body" fontSize="sm" color="blueLight">
Principled, Purposeful, Self-Controlled, and Perfectionistic
</Text>
</Box>
<Box>
<Text fontFamily="body" fontSize="sm" fontWeight="bold" color="blueLight">
MetaGame Discord Bots
</Text>
<Text fontFamily="body" fontSize="sm">
Would be great to have the bot message every person promoted to MG
Player with “Welcome to the game…” (an onboarding guide, something like
this)
</Text>
</Box>
</Stack> </Stack>
); );

73
packages/design-system/stories/1-Button.stories.tsx
View File

@@ -1,73 +0,0 @@
import { Button, ButtonGroup } from '@chakra-ui/core';
import { ArrowForwardIcon, EmailIcon } from '@chakra-ui/icons';
import React from 'react';
export default {
title: 'Button',
component: Button,
};
export const Sizes = () => (
<ButtonGroup spacing={4}>
<Button colorScheme="teal" size="xs">
Button
</Button>
<Button colorScheme="teal" size="sm">
Button
</Button>
<Button colorScheme="teal" size="md">
Button
</Button>
<Button colorScheme="teal" size="lg">
Button
</Button>
</ButtonGroup>
);
export const Variants = () => (
<ButtonGroup spacing={4}>
<Button colorScheme="teal" variant="solid">
Button
</Button>
<Button colorScheme="teal" variant="outline">
Button
</Button>
<Button colorScheme="teal" variant="ghost">
Button
</Button>
<Button colorScheme="teal" variant="link">
Button
</Button>
</ButtonGroup>
);
export const Icons = () => (
<ButtonGroup spacing={4}>
<Button leftIcon={<EmailIcon />} colorScheme="teal" variant="solid">
Email
</Button>
<Button
rightIcon={<ArrowForwardIcon />}
colorScheme="teal"
variant="outline"
>
Call us
</Button>
</ButtonGroup>
);
export const Loading = () => (
<ButtonGroup spacing={4}>
<Button isLoading colorScheme="teal" variant="solid">
Email
</Button>
<Button
isLoading
loadingText="Submitting"
colorScheme="teal"
variant="outline"
>
Submit
</Button>
</ButtonGroup>
);

42
packages/design-system/stories/1-MetaButton.stories.tsx Normal file
View File

@@ -0,0 +1,42 @@
import React from 'react';
import { ButtonGroup, MetaButton, Stack } from '../src';
export default {
title: 'MetaButton',
component: MetaButton,
};
export const Sizes = () => (
<Stack spacing={4}>
<ButtonGroup spacing={4}>
<MetaButton size="xs">MetaButton</MetaButton>
<MetaButton size="sm">MetaButton</MetaButton>
<MetaButton size="md">MetaButton</MetaButton>
<MetaButton size="lg">MetaButton</MetaButton>
</ButtonGroup>
<ButtonGroup spacing={4}>
<MetaButton size="xs" variant="outline">
MetaButton
</MetaButton>
<MetaButton size="sm" variant="outline">
MetaButton
</MetaButton>
<MetaButton size="md" variant="outline">
MetaButton
</MetaButton>
<MetaButton size="lg" variant="outline">
MetaButton
</MetaButton>
</ButtonGroup>
</Stack>
);
export const Variants = () => (
<ButtonGroup spacing={4}>
<MetaButton variant="solid">MetaButton</MetaButton>
<MetaButton variant="outline">MetaButton</MetaButton>
<MetaButton variant="ghost">MetaButton</MetaButton>
<MetaButton variant="link">MetaButton</MetaButton>
</ButtonGroup>
);

34
packages/design-system/stories/2-MetaBox.stories.tsx Normal file
View File

@@ -0,0 +1,34 @@
import React from 'react';
import { MetaBox, MetaTag, Stack, Text } from '../src';
export default {
title: 'MetaBox',
component: MetaBox,
};
export const Default = () => (
<MetaBox title="About me">
<Text fontFamily="body" fontSize="2xl" fontWeight="bold" mb={4}>
Name Nickname
</Text>
<Text fontFamily="body">
Amet minim mollit non deserunt ullamco est sit aliqua dolor do amet sint.
Velit officia consequat duis enim velit mollit. Exercitation veniam
consequat sunt nostrud amet....
</Text>
</MetaBox>
);
export const WithTags = () => (
<MetaBox title="Skills">
<Stack spacing={2} isInline flexWrap="wrap" mb={-2}>
<MetaTag mb={2}>Writing code</MetaTag>
<MetaTag mb={2}>Observability</MetaTag>
<MetaTag mb={2}>Dealing with ambiguity</MetaTag>
<MetaTag mb={2}>Knowledge Sharing</MetaTag>
<MetaTag mb={2}>Facilitation</MetaTag>
<MetaTag mb={2}>Teamwork</MetaTag>
</Stack>
</MetaBox>
);

4
packages/design-system/test/0-Text.test.tsx
View File

@@ -1,12 +1,12 @@
import React from 'react'; import React from 'react';
import * as ReactDOM from 'react-dom'; import * as ReactDOM from 'react-dom';
import { Sizes } from '../stories/0-Text.stories'; import { Fonts } from '../stories/0-Text.stories';
describe('Text Stories', () => { describe('Text Stories', () => {
it('renders without crashing', () => { it('renders without crashing', () => {
const div = document.createElement('div'); const div = document.createElement('div');
ReactDOM.render(<Sizes />, div); ReactDOM.render(<Fonts />, div);
ReactDOM.unmountComponentAtNode(div); ReactDOM.unmountComponentAtNode(div);
}); });
}); });