Add layout

.editorconfig

@@ -12,7 +12,7 @@ ij_formatter_off_tag = @formatter:off
 ij_formatter_on_tag = @formatter:on
 ij_formatter_tags_enabled = true
 ij_smart_tabs = false
-ij_visual_guides = 
+ij_visual_guides =
 ij_wrap_on_typing = false
 
 [*.css]
@@ -143,10 +143,10 @@ ij_xml_space_around_equals_in_attribute = false
 ij_xml_space_inside_empty_tag = false
 ij_xml_text_wrap = normal
 
-[{*.ats,*.cts,*.mts,*.ts}]
-indent_size = 2
-tab_width = 2
-ij_continuation_indent_size = 2
+[{*.ats,*.cts,*.mts,*.ts,*tsx}]
+indent_size = 4
+tab_width = 4
+ij_continuation_indent_size = 4
 ij_visual_guides = 80
 ij_typescript_align_imports = false
 ij_typescript_align_multiline_array_initializer_expression = false
@@ -235,7 +235,7 @@ ij_typescript_prefer_explicit_types_function_expression_returns = false
 ij_typescript_prefer_explicit_types_function_returns = false
 ij_typescript_prefer_explicit_types_vars_fields = false
 ij_typescript_prefer_parameters_wrap = false
-ij_typescript_property_prefix = 
+ij_typescript_property_prefix =
 ij_typescript_reformat_c_style_comments = false
 ij_typescript_space_after_colon = true
 ij_typescript_space_after_comma = true
@@ -417,7 +417,7 @@ ij_javascript_prefer_explicit_types_function_expression_returns = false
 ij_javascript_prefer_explicit_types_function_returns = false
 ij_javascript_prefer_explicit_types_vars_fields = false
 ij_javascript_prefer_parameters_wrap = false
-ij_javascript_property_prefix = 
+ij_javascript_property_prefix =
 ij_javascript_reformat_c_style_comments = false
 ij_javascript_space_after_colon = true
 ij_javascript_space_after_comma = true

.stylelintrc

@@ -16,7 +16,11 @@
     "at-rule-no-vendor-prefix": true,
     "selector-no-vendor-prefix": true,
     "max-nesting-depth": 3,
-    "selector-max-compound-selectors": 5
+    "selector-max-compound-selectors": 5,
+    "declaration-block-no-redundant-longhand-properties": null,
+    "custom-property-pattern": ["^[a-z][a-zA-Z0-9]+$", {
+      "message":  "Expected \"%s\" variable name to be lower camelCase"
+    }]
   },
   "plugins": [
     "stylelint-order"

package.json

@@ -55,10 +55,11 @@
     "react-dom": ">=18.2.0"
   },
   "dependencies": {
+    "classnames": "^2.3.2",
+    "css-vars-hook": "^0.6.19",
     "lodash": "^4.17.21"
   },
   "devDependencies": {
-    "autoprefixer": "10.4.16",
     "@storybook/addon-essentials": "7.6.2",
     "@storybook/addon-interactions": "7.6.2",
     "@storybook/addon-links": "7.6.2",
@@ -78,6 +79,7 @@
     "@vitejs/plugin-react": "4.2.0",
     "@yelo/rollup-node-external": "^1.0.1",
     "alias-hq": "6.2.3",
+    "autoprefixer": "10.4.16",
     "eslint": "8.54.0",
     "eslint-config-prettier": "9.0.0",
     "eslint-plugin-import": "2.29.0",
@@ -95,6 +97,7 @@
     "lint-staged": "15.1.0",
     "npm-run-all": "4.1.5",
     "postcss": "8.4.31",
+    "postcss-nesting": "^12.0.1",
     "prettier": "3.1.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",

src/lib/CounterDemo/useLogic.ts

@@ -1,11 +1,11 @@
 import {useState} from 'react';
 
 const useLogic = (initialState: number) => {
-  const [count, setCount] = useState(initialState);
-  return {
-    count,
-    incrementCount: () => setCount(count + 1),
-  };
+    const [count, setCount] = useState(initialState);
+    return {
+        count,
+        incrementCount: () => setCount(count + 1),
+    };
 };
 
 export default useLogic;

src/lib/Layout/Cell.module.css

@@ -0,0 +1,12 @@
+.cell {
+    align-items: center;
+    background: steelblue;
+    border-radius: 4px;
+    color: white;
+    display: flex;
+    flex-direction: column;
+    height: 64px;
+    justify-content: center;
+    margin-bottom: 24px;
+    width: 100%;
+}

src/lib/Layout/Cell.tsx

@@ -0,0 +1,7 @@
+import type {FC, ReactNode} from 'react';
+
+import classes from './Cell.module.css';
+
+export const Cell: FC<{children?: ReactNode}> = ({children}) => {
+    return <div className={classes.cell}>{children}</div>;
+};

src/lib/Layout/Col.tsx

@@ -0,0 +1,70 @@
+import type {FC, ReactNode} from 'react';
+import {useEffect} from 'react';
+import {useLocalTheme} from 'css-vars-hook';
+import classNames from 'classnames';
+
+import type {OffsetConfig, SizesConfig} from './SizeTypes';
+import classes from './Layout.module.css';
+
+export type ColProps = Partial<SizesConfig> &
+    Partial<OffsetConfig> & {
+        /** Select an HTML element to render as a container */
+        as?: string;
+        children?: ReactNode;
+        className?: string;
+    };
+
+export const Col: FC<ColProps> = ({
+    as = 'div',
+    children,
+    className,
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    offsetXS,
+    offsetSM,
+    offsetMD,
+    offsetLG,
+    offsetXL,
+}) => {
+    const {LocalRoot, setTheme} = useLocalTheme();
+
+    useEffect(() => {
+        setTheme({
+            xs: xs ?? '',
+            sm: sm ?? '',
+            md: md ?? '',
+            lg: lg ?? '',
+            xl: xl ?? '',
+            offsetXS: offsetXS ?? '',
+            offsetSM: offsetSM ?? '',
+            offsetMD: offsetMD ?? '',
+            offsetLG: offsetLG ?? '',
+            offsetXL: offsetXL ?? '',
+        });
+    }, [setTheme, xs, sm, md, lg, xl, offsetXS, offsetSM, offsetMD, offsetLG, offsetXL]);
+    return (
+        <LocalRoot
+            as={as}
+            className={classNames(
+                classes.column,
+                {
+                    [classes.xs]: !!xs,
+                    [classes.sm]: !!sm,
+                    [classes.md]: !!md,
+                    [classes.lg]: !!lg,
+                    [classes.xl]: !!xl,
+                    [classes['fluid-xs']]: xs === 'fluid',
+                    [classes['fluid-sm']]: sm === 'fluid',
+                    [classes['fluid-md']]: md === 'fluid',
+                    [classes['fluid-lg']]: lg === 'fluid',
+                    [classes['fluid-xl']]: xl === 'fluid',
+                },
+                className
+            )}>
+            {children}
+        </LocalRoot>
+    );
+};

src/lib/Layout/Container.tsx

@@ -0,0 +1,48 @@
+import type {FC, ReactNode} from 'react';
+import {useLocalTheme} from 'css-vars-hook';
+import {useEffect} from 'react';
+import classNames from 'classnames';
+
+import type {SizeUnit, FluidUnit} from './SizeTypes';
+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;
+    /** Set amount of columns to place in container */
+    base?: number;
+    /** Set a gap between columns in pixels */
+    gap?: number;
+    /** Select HTML element to render as a container */
+    as?: string;
+    /** Specify additional CSS class. This allows you to use styled(Container) or the css prop in styled-components or emotion. */
+    className?: string;
+    children: ReactNode;
+};
+
+const normalizeWidth = (widthProp: ContainerProps['containerWidth']) => {
+    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);
+    const {LocalRoot, setTheme} = useLocalTheme();
+    useEffect(() => {
+        setTheme({containerWidth: width, base, gap: `${gap}px`});
+    }, [setTheme, width, gap, base]);
+    return (
+        <LocalRoot as={as} className={classNames(classes.container, className)}>
+            {children}
+        </LocalRoot>
+    );
+};

src/lib/Layout/Layout.mdx

@@ -0,0 +1,36 @@
+import { Meta, ArgsTable, Story } from "@storybook/blocks";
+import * as LayoutStories from './Layout.stories';
+import { Container } from "./Container";
+
+<Meta title="Layout/Container" component={Container} />
+
+# Example Component Demo
+
+## Counter props
+
+<ArgsTable of={Container} />
+
+## Description
+
+`Counter` component provides user basic interface to increment counter by one.
+
+## Demo
+
+<Story of={LayoutStories.ContainerExample} />
+
+## Demo 2
+
+<Story of={LayoutStories.ContainerResponsive} />
+
+## Demo 3
+
+<Story of={LayoutStories.ContainerOffset} />
+
+## Demo 4
+
+<Story of={LayoutStories.ContainerFluid} />
+
+## Demo 4
+
+<Story of={LayoutStories.ContainerWidth} />
+