feat(react-ui): 🚀 updated to v1.2.0-beta.1 (#75)

* feat(react-ui): 🚀 updated to v1.2.0-beta.1 * fix(font-face-observer): 🐛 font face observer was never actually used specificity issues when using the body.font-loaded send help 🤷‍♂️ * refactor(font-display): 🔍 added font-display: swap, removed ffobserver * fix(old-state): 🐛 css prop allows for pseudo elements as well
storyofams · Mar 10, 2021 · aff556e · aff556e · vercel · Mar 10, 2021
1 parent 1b590be
commit aff556e
Show file tree

Hide file tree

Showing 21 changed files with 1,702 additions and 1,650 deletions.
diff --git a/.babelrc b/.babelrc
@@ -1,9 +1,9 @@
 {
   "presets": ["next/babel"],
   "plugins": [
-    ["styled-components", {"ssr": true}],
     "babel-plugin-transform-typescript-metadata",
     ["@babel/plugin-proposal-decorators", { "legacy": true }],
-    "babel-plugin-parameter-decorator"
+    "babel-plugin-parameter-decorator",
+    ["styled-components", {"ssr": true}]
   ]
 }
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -12,7 +12,7 @@
     "**/yarn-error.log": true,
     "**/next-env.d.ts": true,
     "**/yarn.lock": true,
-    ".babelrc": true,
+    // ".babelrc": true,
     ".cz-config.js": true,
     ".eslintignore": true,
     ".gitignore": true,

diff --git a/package.json b/package.json
@@ -21,31 +21,33 @@
   },
   "dependencies": {
     "@next/bundle-analyzer": "^10.0.6",
-    "@reach/alert": "0.12.1",
-    "@rebass/forms": "4.0.6",
+    "@reach/alert": "0.13.2",
+    "@reach/checkbox": "0.13.2",
+    "@reach/dialog": "0.13.2",
     "@sentry/browser": "6.0.0",
     "@sentry/integrations": "6.0.0",
     "@sentry/node": "6.0.0",
     "@storyofams/next-api-decorators": "1.2.0",
     "@storyofams/react-helpers": "0.3.6",
-    "@storyofams/react-ui": "1.0.3",
+    "@storyofams/react-ui": "1.2.0-beta.1",
     "@styled-system/css": "5.1.5",
     "@styled-system/props": "5.1.5",
     "@svgr/webpack": "5.5.0",
     "@zeit/next-source-maps": "0.0.3",
     "axios": "0.21.1",
     "date-fns": "2.16.1",
     "fontfaceobserver": "2.1.0",
+    "framer-motion": "^3.10.2",
     "next": "10.0.5",
     "next-seo": "4.17.0",
     "object-fit-images": "3.2.4",
     "react": "17.0.1",
     "react-dom": "17.0.1",
+    "react-flatpickr": "^3.10.7",
     "react-hook-form": "6.14.2",
     "react-id-generator": "3.0.1",
     "react-lazyload": "3.1.0",
     "react-select": "3.2.0",
-    "rebass": "4.0.7",
     "sitemap": "6.3.5",
     "styled-components": "5.2.1",
     "styled-system": "5.1.5",

diff --git a/public/static/fonts/stylesheet.css b/public/static/fonts/stylesheet.css
@@ -4,6 +4,7 @@
         url('DomaineDisp-Bold.woff') format('woff');
     font-weight: bold;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
@@ -12,6 +13,7 @@
         url('Inter-Bold.woff') format('woff');
     font-weight: bold;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
@@ -20,6 +22,7 @@
         url('Inter-BoldItalic.woff') format('woff');
     font-weight: bold;
     font-style: italic;
+    font-display: swap;
 }
 
 @font-face {
@@ -28,6 +31,7 @@
         url('Inter-Regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
@@ -36,6 +40,7 @@
         url('Inter-Italic.woff') format('woff');
     font-weight: normal;
     font-style: italic;
+    font-display: swap;
 }
 
 @font-face {
@@ -44,6 +49,7 @@
         url('Inter-Medium.woff') format('woff');
     font-weight: 500;
     font-style: normal;
+    font-display: swap;
 }
 
 @font-face {
@@ -52,5 +58,6 @@
         url('Inter-MediumItalic.woff') format('woff');
     font-weight: 500;
     font-style: italic;
+    font-display: swap;
 }
 
diff --git a/src/components/common/Image/image.stories.tsx b/src/components/common/Image/image.stories.tsx
@@ -1,5 +1,5 @@
 import { Stack } from '@storyofams/react-ui';
-import { Box } from 'rebass/styled-components';
+import { Box } from '@storyofams/react-ui';
 
 import { Image, ImageProps } from '~components';
 

diff --git a/src/components/common/Image/index.tsx b/src/components/common/Image/index.tsx
@@ -1,10 +1,6 @@
+import { Box, System } from '@storyofams/react-ui';
 import { pick, omit } from '@styled-system/props';
 import NextImage, { ImageProps as NextImageProps } from 'next/image';
-import {
-  Box,
-  BoxProps,
-  BoxProps as RebassBoxProps,
-} from 'rebass/styled-components';
 import { HeightProps, WidthProps } from 'styled-system';
 
 const getHighestValue = (value: any): number | string => {
@@ -29,7 +25,7 @@ const getHighestValue = (value: any): number | string => {
 };
 
 export type ImageProps = Omit<NextImageProps, 'layout' | 'width' | 'height'> &
-  Omit<BoxProps, 'width' | 'height'> &
+  Omit<System, 'width' | 'height'> &
   (
     | {
         layout: 'fill';
@@ -53,18 +49,18 @@ export const Image = (props: ImageProps) => {
     NextImageProps,
     'width' | 'height'
   >;
-  const rebassImageProps = pick(props) as RebassBoxProps;
+  const imageProps = pick(props);
 
   if (props.layout === 'fill') {
     return (
-      <Box {...rebassImageProps} sx={{ position: 'relative' }}>
+      <Box {...imageProps} sx={{ position: 'relative' }}>
         <NextImage layout="fill" {...nextImageProps} />
       </Box>
     );
   }
 
   return (
-    <Box {...rebassImageProps}>
+    <Box {...imageProps}>
       <NextImage
         height={getHighestValue(props.width)}
         width={getHighestValue(props.width)}

diff --git a/src/components/home/background/index.tsx b/src/components/home/background/index.tsx
@@ -1,23 +1,25 @@
-import { Flex } from 'rebass/styled-components';
+import { Flex, css } from '@storyofams/react-ui';
 
 import { CrossPattern } from './CrossPattern';
 
 export const Background = () => (
   <Flex
-    bg="black"
+    display="flex"
     flexWrap="wrap"
     alignContent="start"
     justifyContent="space-evenly"
     flex={1}
     overflow="hidden"
-    sx={{
-      position: 'absolute',
-      top: 0,
-      left: 0,
-      bottom: 0,
-      right: 0,
-      '&:after': {
-        content: "''",
+    position="absolute"
+    top={0}
+    right={0}
+    bottom={0}
+    left={0}
+    css={css({
+      backgroundColor: 'black',
+      color: 'blue',
+      '&::after': {
+        content: '""',
         position: 'fixed',
         top: 0,
         left: 0,
@@ -26,7 +28,7 @@ export const Background = () => (
         background:
           'radial-gradient(circle, rgba(0,0,0,0.75) 0%, rgba(0,0,0,75) 80%);',
       },
-    }}
+    })}
   >
     <CrossPattern />
   </Flex>

diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
@@ -5,7 +5,6 @@ import objectFitImages from 'object-fit-images';
 import { Providers } from '~components';
 import { seo } from '~config';
 import { initSentry } from '~lib';
-
 import CSSreset from '~styles/CSSreset';
 
 import '../../public/static/fonts/stylesheet.css';

diff --git a/src/pages/_error.tsx b/src/pages/_error.tsx
@@ -1,5 +1,7 @@
+import { Button, Box, Flex, Heading, Text } from '@storyofams/react-ui';
 import { NextSeo } from 'next-seo';
-import { Button, Flex, Link, Text } from 'rebass/styled-components';
+
+import { Background } from '~components/home/background';
 
 const getError = ({ res, err }) => {
   const statusCode = res ? res.statusCode : err ? err.statusCode : 404;
@@ -25,21 +27,22 @@ const Error = ({ statusCode }) => {
   return (
     <>
       <NextSeo title={statusCode} description={content} />
-      <Flex
-        height="100vh"
-        backgroundColor="black"
-        justifyContent="center"
-        alignItems="center"
-        flexDirection="column"
-      >
-        <Text fontFamily="mono" fontSize={9} color="white">
-          {statusCode}
-        </Text>
-        <Text color="white">{content}</Text>
-        <Link href="/">
-          <Button mt={3}>Take me home</Button>
-        </Link>
-      </Flex>
+      <Background />
+      <Box pt={'50vh' as any} position="relative">
+        <Flex
+          variant="center"
+          flexDirection="column"
+          transform="translateY(-50%)"
+        >
+          <Heading fontFamily="mono" fontSize={8} color="white">
+            {statusCode}
+          </Heading>
+          <Text color="white">{content}</Text>
+          <Button as="a" variant="link" to="/" mt={2} color="white">
+            Take me home
+          </Button>
+        </Flex>
+      </Box>
     </>
   );
 };

diff --git a/src/pages/index.tsx b/src/pages/index.tsx
@@ -1,17 +1,17 @@
+import { Heading, Box } from '@storyofams/react-ui';
 import { NextSeo } from 'next-seo';
-import { Heading, Box } from 'rebass/styled-components';
 import { Background } from '~components/home';
 
 const Home = () => (
   <>
     <NextSeo title="Home" description="What will your Story be?" />
     <Background />
-    <Box pt="50vh" sx={{ position: 'relative' }}>
+    <Box pt={'50vh' as any} position="relative">
       <Heading
-        fontSize={[6, 9]}
+        fontSize={[6, 8]}
         color="white"
         textAlign="center"
-        sx={{ transform: 'translateY(-50%)' }}
+        transform="translateY(-50%)"
       >
         What will your Story be?
       </Heading>

diff --git a/src/styles/CSSreset.ts b/src/styles/CSSreset.ts
@@ -1,24 +1,10 @@
 import { createGlobalStyle, css } from 'styled-components';
 
 const themeStyles = ({ theme }) => css`
-  /* typograhpy */
-  body.font-loaded {
-    font-family: ${theme.fonts.body};
-
-    h1,
-    h2,
-    h3,
-    h4,
-    h5,
-    h6 {
-      font-weight: ${theme.fontSizes.heading};
-      font-family: ${theme.fonts.heading};
-    }
-  }
   html {
-    font-size: ${theme.fontSizes.root};
-
+    font-size: ${theme.fontSizes.root}px;
     font-weight: ${theme.fontWeights.regular};
+
     /* outline only when the user is using tab */
     &:not(.user-is-tabbing) {
       a[href],
@@ -268,8 +254,7 @@ const CSSreset = createGlobalStyle(
     h4,
     h5,
     h6 {
-      font-size: inherit;
-      font-weight: inherit;
+      font-family: ${theme.fonts.heading};
     }
     a {
       color: inherit;

diff --git a/src/styles/fonts.ts b/src/styles/fonts.ts
diff --git a/src/styles/styled.d.ts b/src/styles/styled.d.ts
@@ -1,5 +1,5 @@
 import 'styled-components';
-interface Breakpoints extends Array<string> {
+export interface Breakpoints extends Array<string> {
   sm?: string;
   md?: string;
   lg?: string;