chore: add Box

Author: echarles

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/primer-addons",
-  "version": "1.0.2",
+  "version": "1.0.3",
   "license": "BSD-3-Clause",
   "scripts": {
     "dev": "vite",

src/components/box/Box.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+
+import { ComponentProps } from 'react';
+import styled from 'styled-components';
+import type { BackgroundProps, BorderProps, ColorProps, FlexboxProps, GridProps, LayoutProps, PositionProps, ShadowProps, SpaceProps, TypographyProps } from 'styled-system';
+import {background, border, color, flexbox, grid, layout, position, shadow, space, typography} from 'styled-system';
+import sx, {type SxProp } from './sx';
+
+type StyledBoxProps = SxProp &
+  SpaceProps &
+  ColorProps &
+  TypographyProps &
+  LayoutProps &
+  FlexboxProps &
+  GridProps &
+  BackgroundProps &
+  BorderProps &
+  PositionProps &
+  ShadowProps;
+
+export const Box = styled.div<StyledBoxProps>(
+  space,
+  color,
+  typography,
+  layout,
+  flexbox,
+  grid,
+  background,
+  border,
+  position,
+  shadow,
+  sx,
+);
+
+export type BoxProps = ComponentProps<typeof Box>;
+
+export default Box;

src/components/box/sx.ts

@@ -0,0 +1,45 @@
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+
+import type {SystemCssProperties, SystemStyleObject} from '@styled-system/css'
+import css from '@styled-system/css'
+// import type {ThemeColorPaths, ThemeShadowPaths} from '@primer/react/test-helpers'
+import type {ColorProps, BorderColorProps, ShadowProps} from 'styled-system'
+import merge from 'deepmerge'
+
+type ThemeColorPaths = string
+type ThemeShadowPaths = string
+
+export type BetterCssProperties = {
+  [K in keyof SystemCssProperties]: K extends keyof ColorProps
+    ? ThemeColorPaths | SystemCssProperties[K]
+    : K extends keyof BorderColorProps
+      ? ThemeColorPaths | SystemCssProperties[K]
+      : K extends keyof ShadowProps
+        ? ThemeShadowPaths | SystemCssProperties[K]
+        : SystemCssProperties[K]
+}
+
+// Support CSS custom properties in the `sx` prop
+export type CSSCustomProperties = {
+  [key: `--${string}`]: string | number
+}
+
+type CSSSelectorObject = {
+  [cssSelector: string]: SystemStyleObject | CSSCustomProperties
+}
+
+export type BetterSystemStyleObject = BetterCssProperties | SystemStyleObject | CSSCustomProperties | CSSSelectorObject
+
+export interface SxProp {
+  sx?: BetterSystemStyleObject
+}
+
+const sx = (props: SxProp) => css(props.sx)
+
+export default sx
+
+export {merge}

src/index.ts

@@ -1,3 +1,4 @@
+export * from "./components/box/Box";
 export * from "./components/card/Card";
 export * from "./components/content-loader/ContentLoader";
 export * from "./components/closeable-flash/CloseableFlash";