clean up

morewings · Dec 3, 2023 · cd9de6d · cd9de6d
1 parent 9f6e8f5
commit cd9de6d
Show file tree

Hide file tree

Showing 8 changed files with 70 additions and 71 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -2,6 +2,7 @@ import type { Preview } from '@storybook/react';
 import {Provider} from './../src/lib/Provider';
 
 import 'the-new-css-reset/css/reset.css';
+import './../src/lib/global.css';
 
 const preview: Preview = {
     parameters: {

diff --git a/src/lib/Layout/Col.tsx b/src/lib/Layout/Col.tsx
@@ -3,6 +3,7 @@ import {useMemo} from 'react';
 import {useLocalTheme} from 'css-vars-hook';
 import classNames from 'classnames';
 
+import {Offsets, Sizes} from './SizeTypes';
 import type {OffsetConfig, SizesConfig} from './SizeTypes';
 import classes from './Layout.module.css';
 
@@ -31,29 +32,29 @@ export const Col: FC<ColProps> = ({
     md,
     lg,
     xl,
-    offsetXS,
-    offsetSM,
-    offsetMD,
-    offsetLG,
-    offsetXL,
+    shiftXS,
+    shiftSM,
+    shiftMD,
+    shiftLG,
+    shiftXL,
 }) => {
     const {LocalRoot} = useLocalTheme();
 
     const theme = useMemo(
         () =>
             filterUndefined({
-                xs: xs ?? '',
-                sm: sm ?? '',
-                md: md ?? '',
-                lg: lg ?? '',
-                xl: xl ?? '',
-                offsetXS: offsetXS ?? '',
-                offsetSM: offsetSM ?? '',
-                offsetMD: offsetMD ?? '',
-                offsetLG: offsetLG ?? '',
-                offsetXL: offsetXL ?? '',
+                [Sizes.xs]: xs ?? '',
+                [Sizes.sm]: sm ?? '',
+                [Sizes.md]: md ?? '',
+                [Sizes.lg]: lg ?? '',
+                [Sizes.xl]: xl ?? '',
+                [Offsets.xs]: shiftXS ?? '',
+                [Offsets.sm]: shiftSM ?? '',
+                [Offsets.md]: shiftMD ?? '',
+                [Offsets.lg]: shiftLG ?? '',
+                [Offsets.xl]: shiftXL ?? '',
             }),
-        [xs, sm, md, lg, xl, offsetXS, offsetSM, offsetMD, offsetLG, offsetXL]
+        [xs, sm, md, lg, xl, shiftXS, shiftSM, shiftMD, shiftLG, shiftXL]
     );
     return (
         <LocalRoot

diff --git a/src/lib/Layout/Container.tsx b/src/lib/Layout/Container.tsx
@@ -8,7 +8,7 @@ import classes from './Layout.module.css';
 
 export type ContainerProps = {
     /** Set Container width in pixels as a number or set to `fluid` to make it 100% */
-    containerWidth?: SizeUnit | FluidUnit;
+    width?: SizeUnit | FluidUnit;
     /** Set amount of columns to place in container */
     base?: number;
     /** Set a gap between columns in pixels */
@@ -20,24 +20,16 @@ export type ContainerProps = {
     children: ReactNode;
 };
 
-const normalizeWidth = (widthProp: ContainerProps['containerWidth']) => {
+const normalizeWidth = (widthProp: ContainerProps['width']) => {
     if (widthProp === 'fluid') {
         return '100%';
     }
     return `${widthProp}px`;
 };
 
-export const Container: FC<ContainerProps> = ({
-    containerWidth = 1280,
-    className,
-    as = 'div',
-    children,
-    gap = 16,
-    base = 12,
-}) => {
-    const width = normalizeWidth(containerWidth);
+export const Container: FC<ContainerProps> = ({width = 1280, className, as = 'div', children, gap = 16, base = 12}) => {
     const {LocalRoot} = useLocalTheme();
-    const theme = useMemo(() => ({containerWidth: width, base, gap: `${gap}px`}), [width, gap, base]);
+    const theme = useMemo(() => ({containerWidth: normalizeWidth(width), base, gap: `${gap}px`}), [width, gap, base]);
     return (
         <LocalRoot theme={theme} as={as} className={classNames(classes.container, className)}>
             {children}

diff --git a/src/lib/Layout/Layout.module.css b/src/lib/Layout/Layout.module.css
@@ -1,6 +1,6 @@
 @custom-media --viewport-xs (width >= 320px);
 @custom-media --viewport-sm (width >= 640px);
-@custom-media --viewport-md (width >= 768px);
+@custom-media --viewport-md (width >= 992px);
 @custom-media --viewport-lg (width >= 1366px);
 @custom-media --viewport-xl (width >= 1920px);
 
@@ -11,11 +11,11 @@
     --md: 0;
     --lg: 0;
     --xl: 0;
-    --offsetXS: 0;
-    --offsetSM: 0;
-    --offsetMD: 0;
-    --offsetLG: 0;
-    --offsetXL: 0;
+    --shiftXS: 0;
+    --shiftSM: 0;
+    --shiftMD: 0;
+    --shiftLG: 0;
+    --shiftXL: 0;
     --gap: 0;
     --base: 0;
     --containerWidth: 0;
@@ -37,48 +37,48 @@
 }
 
 .column {
-    --totalGaps: calc(var(--gap) * (var(--base) - 1));
-    --includedGaps: calc(var(--gap) * (var(--span) - 1));
-    --singleWidth: calc((var(--containerWidth) - var(--totalGaps)) / var(--base));
-    --totalWidth: calc(var(--singleWidth) * var(--span) + var(--includedGaps));
-    --offsetWidth: calc(var(--singleWidth) * var(--offset) + var(--gap) * var(--offset));
+    --gapsTotal: calc(var(--gap) * (var(--base) - 1));
+    --gapsIncluded: calc(var(--gap) * (var(--space) - 1));
+    --singleSpaceWidth: calc((var(--containerWidth) - var(--gapsTotal)) / var(--base));
+    --shiftWidth: calc(var(--singleSpaceWidth) * var(--shift) + var(--gap) * var(--shift));
+    --columnWidth: calc(var(--singleSpaceWidth) * var(--space) + var(--gapsIncluded));
 
-    flex: var(--span);
-    margin-left: var(--offsetWidth);
-    max-width: var(--totalWidth);
+    flex: var(--space);
+    margin-left: var(--shiftWidth);
+    max-width: var(--columnWidth);
 
     &.xs {
         @media (--viewport-xs) {
-            --span: var(--xs);
-            --offset: var(--offsetXS);
+            --space: var(--xs);
+            --shift: var(--shiftXS);
         }
     }
 
     &.sm {
         @media (--viewport-sm) {
-            --span: var(--sm);
-            --offset: var(--offsetSM);
+            --space: var(--sm);
+            --shift: var(--shiftSM);
         }
     }
 
     &.md {
         @media (--viewport-md) {
-            --span: var(--md);
-            --offset: var(--offsetMD);
+            --space: var(--md);
+            --shift: var(--shiftMD);
         }
     }
 
     &.lg {
         @media (--viewport-lg) {
-            --span: var(--lg);
-            --offset: var(--offsetLG);
+            --space: var(--lg);
+            --shift: var(--shiftLG);
         }
     }
 
     &.xl {
         @media (--viewport-xl) {
-            --span: var(--xl);
-            --offset: var(--offsetXL);
+            --space: var(--xl);
+            --shift: var(--shiftXL);
         }
     }
 

diff --git a/src/lib/Layout/Layout.stories.tsx b/src/lib/Layout/Layout.stories.tsx
@@ -174,10 +174,10 @@ export const ContainerExample: Story = {
     },
 };
 
-export const ContainerWidth: Story = {
+export const width: Story = {
     args: {
         children: (
-            <Container containerWidth={888}>
+            <Container width={888}>
                 <Row>
                     <Col xs={3}>
                         <Cell>Takes 3 columns.</Cell>
@@ -203,7 +203,7 @@ export const ContainerFluid: Story = {
     args: {
         children: (
             <div style={{background: 'lightgreen', width: '666px'}}>
-                <Container containerWidth={333}>
+                <Container width={333}>
                     <Row>
                         <Col xs={4}>
                             <Cell>Takes</Cell>
@@ -216,7 +216,7 @@ export const ContainerFluid: Story = {
                         </Col>
                     </Row>
                 </Container>
-                <Container containerWidth="fluid">
+                <Container width="fluid">
                     <Row>
                         <Col xs={3}>
                             <Cell>Takes</Cell>
@@ -241,7 +241,7 @@ export const ContainerResponsive: Story = {
     args: {
         children: (
             <Fragment>
-                <Container containerWidth={666}>
+                <Container width={666}>
                     <Row>
                         <Col xs={2}>
                             <Cell>span: 2</Cell>
@@ -300,7 +300,7 @@ export const ContainerResponsive: Story = {
 export const ContainerOffset: Story = {
     args: {
         children: (
-            <Container containerWidth={666}>
+            <Container width={666}>
                 <Row>
                     <Col xs={3}>
                         <Cell>span: 3</Cell>
@@ -316,7 +316,7 @@ export const ContainerOffset: Story = {
                     </Col>
                 </Row>
                 <Row>
-                    <Col xs={6} offsetXS={3}>
+                    <Col xs={6} shiftXS={3}>
                         <Cell>
                             <div>xs: 6</div>
                             <div>offset-xs: 3</div>

diff --git a/src/lib/Layout/SizeTypes.tsx b/src/lib/Layout/SizeTypes.tsx
@@ -7,11 +7,11 @@ export enum Sizes {
 }
 
 export enum Offsets {
-    xs = 'offsetXS',
-    sm = 'offsetSM',
-    md = 'offsetMD',
-    lg = 'offsetLG',
-    xl = 'offsetXL',
+    xs = 'shiftXS',
+    sm = 'shiftSM',
+    md = 'shiftMD',
+    lg = 'shiftLG',
+    xl = 'shiftXL',
 }
 
 export type SizeUnit = number;
@@ -20,25 +20,25 @@ export type FluidUnit = 'fluid';
 export type SizesConfig = {
     /** The number of columns to span on tiny devices (≥360px) */
     [Sizes.xs]: SizeUnit | FluidUnit;
-    /** The number of columns to span on small devices (≥576px) */
+    /** The number of columns to span on small devices (≥640px) */
     [Sizes.sm]: SizeUnit | FluidUnit;
-    /** The number of columns to span on medium devices (≥768px) */
+    /** The number of columns to span on medium devices (≥992px) */
     [Sizes.md]: SizeUnit | FluidUnit;
-    /** The number of columns to span on large devices (≥992px) */
+    /** The number of columns to span on large devices (≥1366px) */
     [Sizes.lg]: SizeUnit | FluidUnit;
-    /** The number of columns to span on extremely large devices (≥1280px) */
+    /** The number of columns to span on extremely large devices (≥1920px) */
     [Sizes.xl]: SizeUnit | FluidUnit;
 };
 
 export type OffsetConfig = {
     /** The number of columns to off set this item from left side on extremely small devices (≥360px) */
     [Offsets.xs]: SizeUnit;
-    /** The number of columns to off set this item from left side on small devices (≥576px) */
+    /** The number of columns to off set this item from left side on small devices (≥640px) */
     [Offsets.sm]: SizeUnit;
     /** The number of columns to off set this item from left side on medium devices (≥768px) */
     [Offsets.md]: SizeUnit;
-    /** The number of columns to off set this item from left side on large devices (≥992px) */
+    /** The number of columns to off set this item from left side on large devices (≥1366px) */
     [Offsets.lg]: SizeUnit;
-    /** The number of columns to off set this item from left side on extremely large devices (≥1280px) */
+    /** The number of columns to off set this item from left side on extremely large devices (≥1920px) */
     [Offsets.xl]: SizeUnit;
 };
diff --git a/src/lib/global.css b/src/lib/global.css
@@ -0,0 +1,4 @@
+body {
+    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif,
+        "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
+}
diff --git a/src/lib/index.ts b/src/lib/index.ts
@@ -1,5 +1,6 @@
 /* Bundle css reset before everything else */
 import 'the-new-css-reset/css/reset.css';
+import './global.css';
 
 export {Counter} from './CounterDemo';
 export {Provider} from './Provider';