[feat]: add gio-grid component

packages/components/src/components/grid/__test__/grid.test.tsx

@@ -0,0 +1,82 @@
+import React from 'react';
+import { render, unmountComponentAtNode } from 'react-dom';
+import { act } from 'react-dom/test-utils';
+import Grid from '..';
+
+let container: HTMLDivElement;
+beforeEach(() => {
+  // 创建一个 DOM 元素作为渲染目标
+  container = document.createElement('div');
+  document.body.appendChild(container);
+});
+
+afterEach(() => {
+  // 退出时进行清理
+  unmountComponentAtNode(container);
+  container.remove();
+  container = (undefined as unknown) as HTMLDivElement;
+});
+
+describe('<Grid />', () => {
+  it('should render correctly', () => {
+    act(() => {
+      render(<Grid />, container);
+    });
+    expect(container.querySelector('.gio-grid')).not.toBeNull();
+  });
+
+  it('should render custom classNames', () => {
+    act(() => {
+      render(<Grid className="test1 test2" />, container);
+    });
+    expect(container.querySelector('.gio-grid.test1.test2')).not.toBeNull();
+  });
+
+  it('should replace the root node with the passed `component` options', () => {
+    act(() => {
+      render(<Grid component="span" />, container);
+    });
+    expect(container.querySelector('.gio-grid')).not.toBeNull();
+  });
+
+  it('should render nested', () => {
+    act(() => {
+      render(
+        <Grid>
+          <Grid />
+          <Grid>
+            <Grid />
+          </Grid>
+        </Grid>,
+        container
+      );
+    });
+    expect(container.querySelectorAll('.gio-grid').length).toEqual(4);
+    expect(container.querySelector('.gio-grid > .gio-grid > .gio-grid')).not.toBeNull();
+  });
+
+  it('should make css custom properties', () => {
+    act(() => {
+      render(
+        <Grid
+          span={12}
+          gap={1}
+          direction="row"
+          wrap="wrap"
+          justify="center"
+          alignItems="center"
+          alignContent="center"
+        />,
+        container
+      );
+    });
+
+    const grid = container.querySelector('.gio-grid') as HTMLDivElement;
+    expect(grid.style.getPropertyValue('--gio-grid-span')).toBe('12');
+    expect(grid.style.getPropertyValue('--gio-grid-gap')).toBe('1');
+    expect(grid.style.getPropertyValue('--gio-grid-wrap')).toBe('wrap');
+    expect(grid.style.getPropertyValue('--gio-grid-justify')).toBe('center');
+    expect(grid.style.getPropertyValue('--gio-grid-align-items')).toBe('center');
+    expect(grid.style.getPropertyValue('--gio-grid-align-content')).toBe('center');
+  });
+});

packages/components/src/components/grid/help.ts

@@ -0,0 +1,39 @@
+import isNil from 'lodash/isNil';
+import isNaN from 'lodash/isNaN';
+import keys from 'lodash/keys';
+import kebabCase from 'lodash/kebabCase';
+
+export default {};
+
+export const getAttrName = (cls: string, prefix?: string): string => {
+  // if (!prefix) {
+  //   return cls;
+  // }
+  return `${prefix}-${kebabCase(cls)}`;
+};
+
+interface ObjType {
+  [key: string]: undefined | number | string | boolean;
+}
+
+type Ret<T> = {
+  [P in keyof T]: string | boolean;
+};
+
+const falsely = <T>(o: T) => isNil(o) || isNaN(o);
+
+export const dataMap = <T extends ObjType = ObjType>(obj: T, prefixCls: string): Ret<T> => {
+  const cls = {} as Ret<T>;
+  keys(obj).forEach((key) => {
+    // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+    cls[getAttrName(key, prefixCls) as keyof Ret<T>] = falsely(obj[key]) ? false : obj[key]!.toString();
+  });
+
+  return cls;
+};
+
+export const clip = (min: number, max: number, value: number): number => {
+  return Math.max(min, Math.min(max, value));
+};
+
+export const isNumber = <T = unknown>(n: T): boolean => typeof n === 'number';

packages/components/src/components/grid/index.tsx

@@ -0,0 +1,53 @@
+import React, { useContext } from 'react';
+import classNames from 'classnames';
+
+import { ConfigContext } from '../config-provider/context';
+import { GridProps } from './interface';
+import { clip, dataMap, isNumber } from './help';
+
+const Grid: React.FC<GridProps> = (props: React.PropsWithChildren<GridProps>) => {
+  const {
+    component: Component = 'div',
+    prefixCls: customizePrefixCls,
+    className,
+    children,
+    direction,
+    justify,
+    alignItems,
+    alignContent,
+    wrap,
+    span,
+    gap,
+    container = false,
+    collapse = false,
+    style,
+  } = props;
+  const { getPrefixCls } = useContext(ConfigContext);
+  const prefixCls = getPrefixCls('grid', customizePrefixCls);
+  const cssProps = dataMap(
+    {
+      direction,
+      justify,
+      alignItems,
+      alignContent,
+      span: isNumber(span) ? clip(0, 12, span as number) : span,
+      gap,
+      wrap,
+    },
+    '--gio-grid'
+  );
+
+  return (
+    <Component
+      className={classNames(prefixCls, className)}
+      data-collapse={collapse}
+      data-gap={!!gap}
+      data-container={!!container}
+      style={{ ...cssProps, ...style }}
+    >
+      {children}
+    </Component>
+  );
+};
+
+export default Grid;

packages/components/src/components/grid/interface.ts

@@ -0,0 +1,25 @@
+import React, { ElementType } from 'react';
+
+interface ComponentProps {
+  className?: string;
+  style?: React.CSSProperties;
+}
+
+export interface GridProps<C extends ElementType = ElementType> extends ComponentProps {
+  prefixCls?: string;
+  component?: C;
+
+  // flexbox types
+  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+  justify?: 'flex-start' | 'center' | 'flex-end' | 'space-between' | 'space-around' | 'space-evenly';
+  alignItems?: 'flex-start' | 'center' | 'flex-end' | 'stretch' | 'baseline';
+  alignContent?: 'stretch' | 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around';
+  wrap?: 'nowrap' | 'wrap' | 'wrap-reverse';
+  gap?: number | string;
+
+  // grid property
+  span?: number;
+  container?: boolean;
+
+  collapse?: boolean;
+}

packages/components/src/components/grid/style/index.less

@@ -0,0 +1,59 @@
+@import '../../../stylesheet/index.less';
+
+@component-cls: ~'@{component-prefix}-grid';
+
+.@{component-cls} {
+  display: flex;
+  flex-wrap: var(--gio-grid-wrap, wrap);
+  box-sizing: border-box;
+  flex-direction: var(--gio-grid-direction, row);
+  justify-content: var(--gio-grid-justify, flex-start);
+  align-items: var(--gio-grid-align-items, stretch);
+  align-content: var(--gio-grid-align-content, stretch);
+
+  --gio-grid-gap-size: calc(var(--gio-grid-gap, 0) * 8px);
+
+  &[data-container='true'] {
+    position: relative;
+    width: 100%;
+  }
+
+  .normal-gap {
+    width: calc(100% * var(--gio-grid-span) / 12 - var(--gio-grid-gap-size));
+
+    &[data-gap='true'] {
+      > * {
+        --gio-grid-item-marign: calc(var(--gio-grid-gap-size) / 2);
+        margin: var(--gio-grid-item-marign);
+      }
+    }
+  }
+
+  .css-grid-gap {
+    gap: var(--gio-grid-gap-size);
+    width: calc((100% + var(--gio-grid-gap-size)) / 12 * var(--gio-grid-span) - var(--gio-grid-gap-size));
+
+    &[data-gap='true'] {
+      --gio-grid-item-marign: unset;
+      // > * {
+      //   margin: unset !important;
+      // }
+    }
+  }
+
+  &[data-collapse='false'] {
+    .normal-gap();
+
+    > [data-gap] {
+      .normal-gap();
+    }
+  }
+
+  &[data-collapse='true'] {
+    .css-grid-gap();
+
+    > [data-gap] {
+      .css-grid-gap();
+    }
+  }
+}

packages/components/src/components/grid/style/index.ts

@@ -0,0 +1 @@
+import './index.less';

packages/components/src/index.ts

@@ -40,3 +40,4 @@ export { default as List } from './components/list';
 export { default as Select } from './components/select';
 export { default as Form, FormLayout } from './components/form';
 export { default as TimePicker } from './components/time-picker';
+export { default as Grid } from './components/grid';

packages/website/src/components/basic/grid/demo/base.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Grid } from '@gio-design/components';
+
+import '@gio-design/components/es/components/grid/style/index.css';
+import './style.less';
+
+const Base = (): JSX.Element => {
+  return (
+    <Grid className="demo">
+      <Grid className="box" span={12}>
+        span=12
+      </Grid>
+      <Grid className="box" span={3}>
+        span=3
+      </Grid>
+      <Grid className="box" span={3}>
+        span=3
+      </Grid>
+      <Grid className="box" span={3}>
+        span=3
+      </Grid>
+      <Grid className="box" span={3}>
+        span=3
+      </Grid>
+    </Grid>
+  );
+};
+
+export default Base;

packages/website/src/components/basic/grid/demo/collapse.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { Grid } from '@gio-design/components';
+
+import '@gio-design/components/es/components/grid/style/index.css';
+import './style.less';
+
+const Base = (): JSX.Element => {
+  return (
+    <Grid collapse container gap={1} className="demo">
+      <Grid span={12}>span=12</Grid>
+      <Grid span={3} gap={1} collapse container>
+        <Grid span={12}>span=12</Grid>
+        <Grid span={6}>span=6</Grid>
+        <Grid span={6}>span=6</Grid>
+      </Grid>
+      <Grid span={3}>span=3</Grid>
+      <Grid span={3}>span=3</Grid>
+      <Grid span={3}>span=3</Grid>
+    </Grid>
+  );
+};
+
+export default Base;

packages/website/src/components/basic/grid/demo/flex.tsx

@@ -0,0 +1,65 @@
+import '@gio-design/components/es/components/grid/style/index.css';
+
+import React, { useState } from 'react';
+
+import { Grid, Form, Radio, RadioGroup } from '@gio-design/components';
+
+const { Item } = Form;
+
+const options = {
+  direction: ['row', 'row-reverse', 'column', 'column-reverse'],
+  justify: ['flex-start', 'center', 'flex-end', 'space-between', 'space-around', 'space-evenly'],
+  alignItems: ['flex-start', 'center', 'flex-end', 'stretch', 'baseline'],
+  alignContent: ['stretch', 'center', 'flex-start', 'flex-end', 'space-between', 'space-around'],
+  wrap: ['wrap', 'nowrap', 'wrap-reverse'],
+} as const;
+
+type Options = typeof options;
+type OptionKey = keyof Options;
+const optionKeys = Object.keys(options) as Array<OptionKey>;
+
+type InitState = {
+  [P in OptionKey]: Options[P][number];
+};
+const initState = {} as InitState;
+
+optionKeys.forEach((key) => {
+  const [value] = options[key];
+  (initState[key] as InitState[OptionKey]) = value;
+});
+
+const Base = (): JSX.Element => {
+  const [formData, setFormData] = useState(initState);
+  const onValuesChange = (value: Partial<InitState>) => setFormData({ ...formData, ...value });
+
+  return (
+    <div className="flex-props">
+      <Grid container gap={1} {...(formData as unknown)} className="box demo">
+        <Grid span={12}>span=12</Grid>
+        <Grid span={3}>span=3</Grid>
+        <Grid span={3}>span=6</Grid>
+        <Grid span={3} style={{ height: 140 }}>
+          span=3
+        </Grid>
+      </Grid>
+
+      <div className="box">
+        <Form initialValues={formData} onValuesChange={onValuesChange}>
+          {optionKeys.map((key) => (
+            <Item key={key} name={key} label={`${key}:`}>
+              <RadioGroup>
+                {(options[key] as readonly string[]).map((d) => (
+                  <Radio key={d} value={d}>
+                    {d}
+                  </Radio>
+                ))}
+              </RadioGroup>
+            </Item>
+          ))}
+        </Form>
+      </div>
+    </div>
+  );
+};
+
+export default Base;