Merge pull request #206 from mverissimo/refactor/styles

Refactor/styles
mverissimo · Jul 8, 2022 · 6da0041 · 6da0041
2 parents ae9cf0c + ed05799
commit 6da0041
Show file tree

Hide file tree

Showing 15 changed files with 374 additions and 394 deletions.
diff --git a/.releaserc b/.releaserc
@@ -14,20 +14,20 @@
       '@semantic-release/commit-analyzer',
       '@semantic-release/release-notes-generator',
       '@semantic-release/npm',
-      '@semantic-release/github'
-    ],
-    [
-      '@semantic-release/changelog',
-      {
-        'changelogTitle': 'Changelog',
-        'changelogFile': 'docs/CHANGELOG.md'
-      }
-    ],
-    [
-      '@semantic-release/git',
-      {
-        'assets': ['docs/CHANGELOG.md']
-      }
+      '@semantic-release/github',
+      [
+        '@semantic-release/changelog',
+        {
+          'changelogTitle': 'Changelog',
+          'changelogFile': 'docs/CHANGELOG.md'
+        }
+      ],
+      [
+        '@semantic-release/git',
+        {
+          'assets': ['docs/CHANGELOG.md']
+        }
+      ]
     ]
   }
 }
diff --git a/package.json b/package.json
@@ -48,6 +48,9 @@
     "get-pkg-repo": "4.1.1",
     "hosted-git-info": "^2.1.4"
   },
+  "dependencies": {
+    "@emotion/is-prop-valid": "^1.1.3"
+  },
   "devDependencies": {
     "@babel/eslint-parser": "^7.18.2",
     "@babel/preset-env": "7.18.6",
@@ -57,6 +60,8 @@
     "@emotion/babel-plugin": "^11.9.2",
     "@emotion/eslint-plugin": "^11.7.0",
     "@emotion/jest": "^11.9.3",
+    "@emotion/react": "^11.9.3",
+    "@emotion/styled": "^11.9.3",
     "@preconstruct/cli": "2.1.7",
     "@semantic-release/changelog": "^6.0.1",
     "@semantic-release/commit-analyzer": "9.0.2",
@@ -83,18 +88,16 @@
     "lint-staged": "13.0.3",
     "prettier": "2.7.1",
     "pretty-quick": "3.1.3",
+    "react": "^18.2.0",
+    "react-dom": "^18.2.0",
     "semantic-release": "19.0.3",
     "stylelint": "14.9.1",
     "ts-jest": "28.0.5",
     "typescript": "4.7.4"
   },
-  "dependencies": {
-    "@emotion/css": "^11.9.0",
-    "@emotion/is-prop-valid": "^1.1.3",
+  "peerDependencies": {
     "@emotion/react": "^11.9.3",
     "@emotion/styled": "^11.9.3",
-    "@swc/helpers": "^0.4.3",
-    "gatsby-plugin-emotion": "^7.18.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0"
   }

diff --git a/src/components/Col/Col.styles.ts b/src/components/Col/Col.styles.ts
@@ -0,0 +1,62 @@
+import { css } from '@emotion/react';
+
+import { config } from '../../config';
+import { responsive } from '../../utils';
+
+import type { ColProps } from '.';
+import type { DefaultTheme, StyleProps } from '../../types/emotion';
+
+export const base = ({ theme }: StyleProps) => css`
+  label: col;
+
+  position: relative;
+  flex: 1 0 0%;
+
+  width: 100%;
+  max-width: 100%;
+
+  box-sizing: border-box;
+
+  ${responsive(
+    config(theme).grid.breakpoints,
+    (breakpoint: keyof DefaultTheme['grid']['breakpoints']) => `
+      padding-left: ${config(theme).grid.gutter[breakpoint] / 2}rem;
+      padding-right: ${config(theme).grid.gutter[breakpoint] / 2}rem;
+    `
+  )};
+`;
+
+export const size = (props: ColProps & StyleProps) =>
+  responsive(
+    config(props.theme).grid.breakpoints,
+    (breakpoint: keyof DefaultTheme['grid']['breakpoints']) =>
+      props[breakpoint] &&
+      `
+        label: col--size;
+        flex: 0 0 ${
+          (props[breakpoint] / config(props.theme).grid.columns[breakpoint]) *
+          100
+        }%;
+        max-width: ${
+          (props[breakpoint] / config(props.theme).grid.columns[breakpoint]) *
+          100
+        }%;
+    `
+  );
+
+export const offset = ({ theme, offset }: ColProps & StyleProps) =>
+  offset &&
+  responsive(
+    config(theme).grid.breakpoints,
+    (breakpoint: keyof DefaultTheme['grid']['breakpoints']) =>
+      offset[breakpoint] &&
+      `
+        label: col--offset;
+        margin-left: ${
+          offset[breakpoint] >= 0
+            ? (offset[breakpoint] / config(theme).grid.columns[breakpoint]) *
+              100
+            : 0
+        }%;
+    `
+  );
diff --git a/src/components/Col/Col.tsx b/src/components/Col/Col.tsx
@@ -1,31 +1,25 @@
-import React, { Ref, ReactNode } from 'react';
+import React from 'react';
+import type { Ref, ReactNode } from 'react';
 
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
 import isPropValid from '@emotion/is-prop-valid';
 
-import { config } from '../../config';
-import { responsive } from '../../utils';
+import { DefaultTheme } from '../../types/emotion';
 
-import { DefaultTheme, StyleProps } from '../../types/emotion';
+import * as styles from './Col.styles';
 
 export interface ColProps {
   /**
-   * Trigger column styles
-   * based on breakpoint
+   * Controls the column `size`, based on breakpoint
    */
   xs?: number;
-
   sm?: number;
-
   md?: number;
-
   lg?: number;
-
   xl?: number;
 
   /**
-   * The column `span`
+   * Controls the column `offset`
    */
   offset?: DefaultTheme['grid']['breakpoints'];
 
@@ -40,64 +34,9 @@ export interface ColProps {
   children: ReactNode;
 }
 
-const baseStyle = ({ theme }: StyleProps) => css`
-  label: col;
-
-  position: relative;
-  flex: 1 0 0%;
-
-  width: 100%;
-  max-width: 100%;
-
-  box-sizing: border-box;
-
-  ${responsive(
-    config(theme).grid.breakpoints,
-    (breakpoint: keyof DefaultTheme['grid']['breakpoints']) => `
-      padding-left: ${config(theme).grid.gutter[breakpoint] / 2}rem;
-      padding-right: ${config(theme).grid.gutter[breakpoint] / 2}rem;
-    `
-  )};
-`;
-
-const sizeStyle = (props: ColProps & StyleProps) =>
-  responsive(
-    config(props.theme).grid.breakpoints,
-    (breakpoint: keyof DefaultTheme['grid']['breakpoints']) =>
-      props[breakpoint] &&
-      `
-        label: col--size;
-        flex: 0 0 ${
-          (props[breakpoint] / config(props.theme).grid.columns[breakpoint]) *
-          100
-        }%;
-        max-width: ${
-          (props[breakpoint] / config(props.theme).grid.columns[breakpoint]) *
-          100
-        }%;
-    `
-  );
-
-const offsetStyle = ({ theme, offset }: ColProps & StyleProps) =>
-  offset &&
-  responsive(
-    config(theme).grid.breakpoints,
-    (breakpoint: keyof DefaultTheme['grid']['breakpoints']) =>
-      offset[breakpoint] &&
-      `
-        label: col--offset;
-        margin-left: ${
-          offset[breakpoint] >= 0
-            ? (offset[breakpoint] / config(theme).grid.columns[breakpoint]) *
-              100
-            : 0
-        }%;
-    `
-  );
-
 const ColEl = styled('div', {
   shouldForwardProp: (prop) => isPropValid(prop) && prop !== 'offset',
-})<ColProps>(baseStyle, sizeStyle, offsetStyle);
+})<ColProps>(styles.base, styles.size, styles.offset);
 
 const Col = React.forwardRef((props: ColProps, ref?: ColProps['ref']) => {
   return <ColEl ref={ref} className="EmotionGrid-Col" {...props} />;

diff --git a/src/components/Container/Container.styles.ts b/src/components/Container/Container.styles.ts
@@ -0,0 +1,57 @@
+import { css } from '@emotion/react';
+
+import { config } from '../../config';
+import { responsive } from '../../utils';
+
+import { ContainerProps } from '.';
+import type { DefaultTheme, StyleProps } from '../../types/emotion';
+
+export const base = ({ theme }: StyleProps) => css`
+  label: container;
+
+  width: 100%;
+  max-width: 100%;
+
+  margin-right: auto;
+  margin-left: auto;
+
+  box-sizing: border-box;
+
+  ${responsive(
+    config(theme).grid.breakpoints,
+    (breakpoint: keyof DefaultTheme['grid']['breakpoints']) => `
+    padding-left: ${config(theme).grid.padding[breakpoint] / 2}rem;
+    padding-right: ${config(theme).grid.padding[breakpoint] / 2}rem;
+`
+  )}
+`;
+
+export const fluid = ({ theme, fluid }: ContainerProps & StyleProps) =>
+  !fluid &&
+  responsive(
+    config(theme).grid.breakpoints,
+    (breakpoint: keyof DefaultTheme['grid']['breakpoints']) =>
+      typeof config(theme).grid.container[breakpoint] === 'number' &&
+      `
+      label: container--fluid;
+      max-width: ${config(theme).grid.container[breakpoint]}rem;
+    `
+  );
+
+export const debug = ({ theme, debug }: ContainerProps & StyleProps) => {
+  return (
+    debug &&
+    css`
+      .EmotionGrid-Row {
+        label: row--debug;
+        background: ${config(theme).grid.colors.blue}0D;
+      }
+
+      .EmotionGrid-Col {
+        label: col--debug;
+        background: ${config(theme).grid.colors.blue}0D;
+        border: 1px solid ${config(theme).grid.colors.blue};
+      }
+    `
+  );
+};
diff --git a/src/components/Container/Container.tsx b/src/components/Container/Container.tsx
@@ -1,21 +1,18 @@
-import React, { Ref, ReactNode } from 'react';
+import React from 'react';
+import type { Ref, ReactNode } from 'react';
 
 import styled from '@emotion/styled';
-import { css } from '@emotion/react';
 
-import { config } from '../../config';
-import { responsive } from '../../utils';
-
-import { DefaultTheme, StyleProps } from '../../types/emotion';
+import * as styles from './Container.styles';
 
 export interface ContainerProps {
   /**
-   * Set the container `max-width`
+   * The CSS `max-width` property
    */
   fluid?: boolean;
 
   /**
-   * Set a visual background
+   * Enable a background, to visual debug
    */
   debug?: boolean;
 
@@ -30,60 +27,10 @@ export interface ContainerProps {
   children: ReactNode;
 }
 
-const baseStyle = ({ theme }: StyleProps) => css`
-  label: container;
-
-  width: 100%;
-  max-width: 100%;
-
-  margin-right: auto;
-  margin-left: auto;
-
-  box-sizing: border-box;
-
-  ${responsive(
-    config(theme).grid.breakpoints,
-    (breakpoint: keyof DefaultTheme['grid']['breakpoints']) => `
-      padding-left: ${config(theme).grid.padding[breakpoint] / 2}rem;
-      padding-right: ${config(theme).grid.padding[breakpoint] / 2}rem;
-  `
-  )}
-`;
-
-const fluidStyle = ({ theme, fluid }: ContainerProps & StyleProps) =>
-  !fluid &&
-  responsive(
-    config(theme).grid.breakpoints,
-    (breakpoint: keyof DefaultTheme['grid']['breakpoints']) =>
-      typeof config(theme).grid.container[breakpoint] === 'number' &&
-      `
-        label: container--fluid;
-        max-width: ${config(theme).grid.container[breakpoint]}rem;
-      `
-  );
-
-const debugStyle = ({ theme, debug }: ContainerProps & StyleProps) => {
-  return (
-    debug &&
-    css`
-      .EmotionGrid-Row {
-        label: row--debug;
-        background: ${config(theme).grid.colors.blue}0D;
-      }
-
-      .EmotionGrid-Col {
-        label: col--debug;
-        background: ${config(theme).grid.colors.blue}0D;
-        border: 1px solid ${config(theme).grid.colors.blue};
-      }
-    `
-  );
-};
-
 const ContainerEl = styled('div')<ContainerProps>(
-  baseStyle,
-  fluidStyle,
-  debugStyle
+  styles.base,
+  styles.fluid,
+  styles.debug
 );
 
 const Container = React.forwardRef(