@datalayer/primer-addons 1.0.1 → 1.0.3

package/README.md

@@ -34,13 +34,13 @@ This project has been [shared in a discussion](https://github.com/primer/react/d
 Install the dependencies.
 
 ```bash
-yarn
+npm i
 ```
 
 Start the storybook.
 
 ```bash
-npm storybook
+npm run storybook
 ```
 
 Start the playground.

package/lib/components/box/Box.d.ts

@@ -0,0 +1,7 @@
+import { ComponentProps } from 'react';
+import type { BackgroundProps, BorderProps, ColorProps, FlexboxProps, GridProps, LayoutProps, PositionProps, ShadowProps, SpaceProps, TypographyProps } from 'styled-system';
+import { type SxProp } from './sx';
+type StyledBoxProps = SxProp & SpaceProps & ColorProps & TypographyProps & LayoutProps & FlexboxProps & GridProps & BackgroundProps & BorderProps & PositionProps & ShadowProps;
+export declare const Box: import("styled-components").StyledComponent<"div", any, StyledBoxProps, never>;
+export type BoxProps = ComponentProps<typeof Box>;
+export default Box;

package/lib/components/box/Box.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import styled from 'styled-components';
+import { background, border, color, flexbox, grid, layout, position, shadow, space, typography } from 'styled-system';
+import sx from './sx';
+export const Box = styled.div(space, color, typography, layout, flexbox, grid, background, border, position, shadow, sx);
+export default Box;

package/lib/components/box/sx.d.ts

@@ -0,0 +1,21 @@
+import type { SystemCssProperties, SystemStyleObject } from '@styled-system/css';
+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];
+};
+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;
+}
+declare const sx: (props: SxProp) => import("@styled-system/css").CssFunctionReturnType;
+export default sx;
+export { merge };

package/lib/components/box/sx.js

@@ -0,0 +1,10 @@
+/*
+ * Copyright (c) 2021-2024 Datalayer, Inc.
+ *
+ * Datalayer License
+ */
+import css from '@styled-system/css';
+import merge from 'deepmerge';
+const sx = (props) => css(props.sx);
+export default sx;
+export { merge };

package/lib/index.d.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";

package/lib/index.js

@@ -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";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@datalayer/primer-addons",
-  "version": "1.0.1",
+  "version": "1.0.3",
   "license": "BSD-3-Clause",
   "scripts": {
     "dev": "vite",
@@ -27,32 +27,32 @@
     "@primer/octicons-react": "^19.15.1",
     "@primer/primitives": "^10.5.0",
     "@primer/react": "^37.19.0",
-    "react": "18.3.1",
-    "react-dom": "18.3.1",
+    "react": "^18.3.1 || ^19.0.0",
+    "react-dom": "^18.3.1 || ^19.0.0",
     "react-loading-skeleton": "^3.5.0",
     "styled-components": "^5.3.10"
   },
   "devDependencies": {
-    "@storybook/addon-essentials": "^8.0.10",
-    "@storybook/addon-interactions": "^8.0.10",
-    "@storybook/addon-links": "^8.0.10",
-    "@storybook/blocks": "^8.0.10",
-    "@storybook/react": "^8.0.10",
-    "@storybook/react-vite": "^8.0.10",
+    "@storybook/addon-essentials": "9.0.0-alpha.12",
+    "@storybook/addon-interactions": "9.0.0-alpha.10",
+    "@storybook/addon-links": "^9.0.15",
+    "@storybook/blocks": "9.0.0-alpha.17",
+    "@storybook/react": "^9.0.15",
+    "@storybook/react-vite": "^9.0.15",
     "@storybook/testing-library": "^0.2.2",
     "@types/react": "18.3.20",
     "@types/react-dom": "18.3.6",
     "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^8.29.1",
     "@typescript-eslint/parser": "^8.29.1",
-    "@vitejs/plugin-react": "^4.2.1",
+    "@vitejs/plugin-react": "^4.5.2",
     "eslint": "^9.0.0",
     "eslint-plugin-react-hooks": "^5.2.0",
     "eslint-plugin-react-refresh": "^0.3.4",
     "eslint-plugin-storybook": "^0.6.12",
     "prop-types": "^15.8.1",
-    "storybook": "^8.0.10",
+    "storybook": "^9.0.15",
     "typescript": "^5.8.3",
-    "vite": "^6.2.6"
+    "vite": "^7.0.0"
   }
 }