refactor(infra): directory structure (#4615)

2026-07-29 16:19:43 +08:00 · 2023-10-18 23:30:08 +08:00
parent 814d552be8
commit bed9310519
1150 changed files with 539 additions and 584 deletions
@@ -0,0 +1,145 @@
+import type { CSSProperties } from 'react';
+
+export const displayFlex = (
+  justifyContent: CSSProperties['justifyContent'] = 'unset',
+  alignItems: CSSProperties['alignItems'] = 'unset',
+  alignContent: CSSProperties['alignContent'] = 'unset'
+): {
+  display: CSSProperties['display'];
+  justifyContent: CSSProperties['justifyContent'];
+  alignItems: CSSProperties['alignItems'];
+  alignContent: CSSProperties['alignContent'];
+} => {
+  return {
+    display: 'flex',
+    justifyContent,
+    alignItems,
+    alignContent,
+  };
+};
+export const displayInlineFlex = (
+  justifyContent: CSSProperties['justifyContent'] = 'unset',
+  alignItems: CSSProperties['alignContent'] = 'unset',
+  alignContent: CSSProperties['alignContent'] = 'unset'
+): {
+  display: CSSProperties['display'];
+  justifyContent: CSSProperties['justifyContent'];
+  alignItems: CSSProperties['alignContent'];
+  alignContent: CSSProperties['alignContent'];
+} => {
+  return {
+    display: 'inline-flex',
+    justifyContent,
+    alignItems,
+    alignContent,
+  };
+};
+
+export const absoluteCenter = ({
+  horizontal = false,
+  vertical = false,
+  position: { left, right, top, bottom } = {},
+}: {
+  horizontal?: boolean;
+  vertical?: boolean;
+  position?: {
+    left?: CSSProperties['left'];
+    right?: CSSProperties['right'];
+    top?: CSSProperties['top'];
+    bottom?: CSSProperties['bottom'];
+  };
+}): {
+  position: CSSProperties['position'];
+  left: CSSProperties['left'];
+  top: CSSProperties['top'];
+  right: CSSProperties['right'];
+  bottom: CSSProperties['bottom'];
+  transform: CSSProperties['transform'];
+} => {
+  return {
+    position: 'absolute',
+    left: left ? left : horizontal ? '50%' : 'auto',
+    top: top ? top : vertical ? '50%' : 'auto',
+    right: right ? right : 'auto',
+    bottom: bottom ? bottom : 'auto',
+    transform: `translate(${horizontal ? '-50%' : '0'}, ${
+      vertical ? '-50%' : '0'
+    })`,
+  };
+};
+export const fixedCenter = ({
+  horizontal = false,
+  vertical = false,
+  position: { left, right, top, bottom } = {},
+}: {
+  horizontal?: boolean;
+  vertical?: boolean;
+  position?: {
+    left?: CSSProperties['left'];
+    right?: CSSProperties['right'];
+    top?: CSSProperties['top'];
+    bottom?: CSSProperties['bottom'];
+  };
+}): {
+  position: CSSProperties['position'];
+  left: CSSProperties['left'];
+  top: CSSProperties['top'];
+  right: CSSProperties['right'];
+  bottom: CSSProperties['bottom'];
+  transform: CSSProperties['transform'];
+} => {
+  return {
+    position: 'fixed',
+    left: left ? left : horizontal ? '50%' : 'auto',
+    top: top ? top : vertical ? '50%' : 'auto',
+    right: right ? right : 'auto',
+    bottom: bottom ? bottom : 'auto',
+    transform: `translate(${horizontal ? '-50%' : '0'}, ${
+      vertical ? '-50%' : '0'
+    })`,
+  };
+};
+
+export const textEllipsis = (lineNum = 1): CSSProperties => {
+  if (lineNum > 1) {
+    return {
+      display: '-webkit-box',
+      wordBreak: 'break-all',
+      WebkitBoxOrient: 'vertical',
+      WebkitLineClamp: `${lineNum}`, //the number of rows to display
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+    };
+  }
+  return {
+    overflow: 'hidden',
+    textOverflow: 'ellipsis',
+    whiteSpace: 'nowrap',
+  };
+};
+
+export const positionAbsolute = ({
+  left,
+  top,
+  right,
+  bottom,
+}: {
+  left?: CSSProperties['left'];
+  top?: CSSProperties['top'];
+  right?: CSSProperties['right'];
+  bottom?: CSSProperties['bottom'];
+}): {
+  position: CSSProperties['position'];
+  left: CSSProperties['left'];
+  top: CSSProperties['top'];
+  right: CSSProperties['right'];
+  bottom: CSSProperties['bottom'];
+} => {
+  return {
+    position: 'absolute',
+    left,
+    top,
+    right,
+    bottom,
+  };
+};
@@ -0,0 +1,3 @@
+export * from './helper';
+export * from './mui-theme';
+export * from './mui-theme-provider';
@@ -0,0 +1,3 @@
+import { alpha, css, keyframes, styled } from '@mui/material/styles';
+
+export { alpha, css, keyframes, styled };
@@ -0,0 +1,86 @@
+import type {
+  Breakpoint,
+  BreakpointsOptions,
+  ThemeOptions,
+} from '@mui/material';
+
+export const muiThemes = {
+  breakpoints: {
+    values: {
+      xs: 0,
+      sm: 640,
+      md: 960,
+      lg: 1280,
+      xl: 1920,
+    },
+  },
+} satisfies ThemeOptions;
+
+// Ported from mui
+// See https://github.com/mui/material-ui/blob/eba90da5359ff9c58b02800dfe468dc6c0b95bd2/packages/mui-system/src/createTheme/createBreakpoints.js
+// License under MIT
+function createBreakpoints(breakpoints: BreakpointsOptions): Readonly<
+  Omit<BreakpointsOptions, 'up' | 'down'> & {
+    up: (key: Breakpoint | number, pure?: boolean) => string;
+    down: (key: Breakpoint | number, pure?: boolean) => string;
+  }
+> {
+  const {
+    // The breakpoint **start** at this value.
+    // For instance with the first breakpoint xs: [xs, sm).
+    values = {
+      xs: 0, // phone
+      sm: 600, // tablet
+      md: 900, // small laptop
+      lg: 1200, // desktop
+      xl: 1536, // large screen
+    },
+    unit = 'px',
+    step = 5,
+    ...other
+  } = breakpoints;
+
+  const keys = Object.keys(values) as ['xs', 'sm', 'md', 'lg', 'xl'];
+
+  function up(key: Breakpoint | number, pure = false) {
+    const value = typeof key === 'number' ? key : values[key];
+    const original = `(min-width:${value}${unit})`;
+    if (pure) {
+      return original;
+    }
+    return `@media ${original}`;
+  }
+
+  function down(key: Breakpoint | number, pure = false) {
+    const value = typeof key === 'number' ? key : values[key];
+    const original = `(max-width:${value - step / 100}${unit})`;
+    if (pure) {
+      return original;
+    }
+    return `@media ${original}`;
+  }
+
+  return {
+    keys,
+    values,
+    up,
+    down,
+    unit,
+    // between,
+    // only,
+    // not,
+    ...other,
+  };
+}
+
+/**
+ * @example
+ * ```ts
+ * export const iconButtonStyle = style({
+ *   [breakpoints.up('sm')]: {
+ *     padding: '6px'
+ *   },
+ * });
+ * ```
+ */
+export const breakpoints = createBreakpoints(muiThemes.breakpoints);