@julo-ui/system - npm Package Compare versions

Comparing version 0.0.1-alpha.2 to 0.0.1-alpha.3

dist/factory.d.ts

 import { HTMLJuloComponents } from './system.js';
 import { As, JuloComponent } from './types.js';
+import '@emotion/styled';
+import './styled-system-types.js';
 import 'react';
+import '@emotion/react';
 
@@ -5,0 +8,0 @@ declare type JuloFactory = {

dist/factory.js

@@ -36,6 +36,34 @@ "use strict";
 var import_styled = __toESM(require("@emotion/styled"));
+
+// src/utils/assign-after.ts
+function assignAfter(target, ...sources) {
+  if (typeof target === "undefined" || target === null)
+    throw new Error("Cannot convert undefined or null to object");
+  const result = { ...target };
+  for (const nextSource of sources) {
+    if (!nextSource)
+      continue;
+    for (const nextKey in nextSource) {
+      if (!Object.prototype.hasOwnProperty.call(nextSource, nextKey))
+        continue;
+      if (nextKey in result)
+        delete result[nextKey];
+      result[nextKey] = nextSource[nextKey];
+    }
+  }
+  return result;
+}
+
+// src/system.ts
 var _a;
 var emotionStyled = (_a = import_styled.default.default) != null ? _a : import_styled.default;
+var cssObjectManager = (props) => {
+  const { theme: _, __css, sx } = props;
+  const styles = assignAfter({}, sx);
+  return [`${__css == null ? void 0 : __css.styles}`, styles];
+};
 function styled(component) {
-  const Component = emotionStyled(component)();
+  const Component = emotionStyled(component)(
+    cssObjectManager
+  );
   const juloComponent = (0, import_react.forwardRef)(function JuloComponent(props, ref) {
@@ -42,0 +70,0 @@ return (0, import_react.createElement)(Component, {

dist/forward-ref.d.ts

 import { ForwardRefRenderFunction } from 'react';
-import { As, RightJoinProps, PropsOf, ComponentWithAs } from './types.js';
+import { As, ComponentWithAs } from './types.js';
+import './styled-system-types.js';
+import '@emotion/react';
 
@@ -10,4 +12,4 @@ declare function forwardRef<Props extends object, Component extends As>(component: ForwardRefRenderFunction<
  */
-any, RightJoinProps<PropsOf<Component>, Props>>): ComponentWithAs<Component, Props>;
+any, Props>): ComponentWithAs<Component, Props>;
 
 export { forwardRef as default };

dist/index.d.ts

@@ -1,5 +0,11 @@
-export { HTMLJuloComponents, HTMLJuloProps, JuloReactElement, styled } from './system.js';
-export { As, Assign, ComponentWithAs, DOMElements, JuloComponent, MaybeRenderProp, MergeWithAs, PropsOf, RightJoinProps } from './types.js';
+export { julo } from './factory.js';
 export { default as forwardRef } from './forward-ref.js';
-export { julo } from './factory.js';
+export { DOMAttributes, DOMElement, MaybeRenderProp, PropGetter, RequiredPropGetter } from './react-types.js';
+export { HTMLJuloComponents, HTMLJuloProps, JuloHTMLElement, JuloReactElement, cssObjectManager, styled } from './system.js';
+export { RecursiveCSSSelector, SystemStyleObject } from './styled-system-types.js';
+export { As, Assign, ComponentWithAs, DOMElements, JuloComponent, JuloProps, MergeWithAs, PropsOf, RightJoinProps } from './types.js';
+export { assignAfter } from './utils/assign-after.js';
+export { ArrayClassNamesArg, ClassNamesArg, cx, isValidClassName } from './utils/cx.js';
 import 'react';
+import '@emotion/styled';
+import '@emotion/react';

dist/index.js

@@ -29,3 +29,7 @@ "use strict";
 __export(src_exports, {
+  assignAfter: () => assignAfter,
+  cssObjectManager: () => cssObjectManager,
+  cx: () => cx,
   forwardRef: () => forward_ref_default,
+  isValidClassName: () => isValidClassName,
   julo: () => julo,
@@ -39,6 +43,74 @@ styled: () => styled
 var import_styled = __toESM(require("@emotion/styled"));
+
+// src/utils/assign-after.ts
+function assignAfter(target, ...sources) {
+  if (typeof target === "undefined" || target === null)
+    throw new Error("Cannot convert undefined or null to object");
+  const result = { ...target };
+  for (const nextSource of sources) {
+    if (!nextSource)
+      continue;
+    for (const nextKey in nextSource) {
+      if (!Object.prototype.hasOwnProperty.call(nextSource, nextKey))
+        continue;
+      if (nextKey in result)
+        delete result[nextKey];
+      result[nextKey] = nextSource[nextKey];
+    }
+  }
+  return result;
+}
+
+// src/utils/cx.ts
+function isValidClassName(className) {
+  if (/^[0-9]/.test(className))
+    return false;
+  if (/^-\d/.test(className))
+    return false;
+  return true;
+}
+function cx(...classNames) {
+  const result = [];
+  for (const className of classNames) {
+    if (!className)
+      continue;
+    switch (typeof className) {
+      case "object":
+        let classStr = "";
+        if (Array.isArray(className)) {
+          result.push(
+            className.map((v) => {
+              return cx(v);
+            }).join(" ")
+          );
+          continue;
+        }
+        Object.keys(className).forEach((key) => {
+          if (className[key])
+            classStr += key + " ";
+        });
+        result.push(classStr.trim());
+        continue;
+      case "string":
+        result.push(className);
+        continue;
+      default:
+        continue;
+    }
+  }
+  return result.join(" ");
+}
+
+// src/system.ts
 var _a;
 var emotionStyled = (_a = import_styled.default.default) != null ? _a : import_styled.default;
+var cssObjectManager = (props) => {
+  const { theme: _, __css, sx } = props;
+  const styles = assignAfter({}, sx);
+  return [`${__css == null ? void 0 : __css.styles}`, styles];
+};
 function styled(component) {
-  const Component = emotionStyled(component)();
+  const Component = emotionStyled(component)(
+    cssObjectManager
+  );
   const juloComponent = (0, import_react.forwardRef)(function JuloComponent(props, ref) {
@@ -53,9 +125,2 @@ return (0, import_react.createElement)(Component, {
 
-// src/forward-ref.tsx
-var import_react2 = require("react");
-function forwardRef2(component) {
-  return (0, import_react2.forwardRef)(component);
-}
-var forward_ref_default = forwardRef2;
-
 // src/factory.ts
@@ -77,7 +142,18 @@ function factory() {
 var julo = factory();
+
+// src/forward-ref.tsx
+var import_react2 = require("react");
+function forwardRef2(component) {
+  return (0, import_react2.forwardRef)(component);
+}
+var forward_ref_default = forwardRef2;
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
+  assignAfter,
+  cssObjectManager,
+  cx,
   forwardRef,
+  isValidClassName,
   julo,
   styled
 });

dist/system.d.ts

@@ -1,15 +0,26 @@
-import { JSXElementConstructor, ReactElement, Ref, ForwardedRef } from 'react';
-import { As, JuloComponent, PropsOf, DOMElements } from './types.js';
+import { FunctionInterpolation } from '@emotion/styled';
+import { As, JuloComponent, JuloProps, PropsOf, DOMElements } from './types.js';
+import { SystemStyleObject } from './styled-system-types.js';
+import 'react';
+import '@emotion/react';
 
+declare type CSSObjectManagerProps = SystemStyleObject & JuloProps & {
+    /**
+     * @reason theme is the value passed from emotion that has a type of any
+     *
+     * @dev [e-mail]
+     */
+    theme: any;
+};
+declare const cssObjectManager: FunctionInterpolation<CSSObjectManagerProps>;
 declare function styled<T extends As, P extends object = NonNullable<object>>(component: T): JuloComponent<T, P>;
-interface JuloReactElement<P, T extends string | JSXElementConstructor<object> = JSXElementConstructor<object>> extends ReactElement<P & {
-    ref: Ref<P>;
+interface JuloReactElement<P, T extends string | React.JSXElementConstructor<object> = React.JSXElementConstructor<object>> extends React.ReactElement<P & {
+    ref: React.Ref<P>;
 }, T & {
     id: string;
 }> {
-    ref: ForwardedRef<P> | null;
+    ref: React.ForwardedRef<P> | null;
 }
-declare type HTMLJuloProps<T extends As> = Omit<PropsOf<T>, 'ref'> & {
-    as?: As;
-};
+declare type JuloHTMLElement = HTMLElement & JuloProps;
+declare type HTMLJuloProps<T extends As> = Omit<PropsOf<T>, 'ref'> & JuloProps;
 declare type HTMLJuloComponents = {
@@ -19,2 +30,2 @@ [Tag in DOMElements]: JuloComponent<Tag, NonNullable<object>>;
 
-export { HTMLJuloComponents, HTMLJuloProps, JuloReactElement, styled };
+export { HTMLJuloComponents, HTMLJuloProps, JuloHTMLElement, JuloReactElement, cssObjectManager, styled };

dist/system.js

@@ -29,2 +29,3 @@ "use strict";
 __export(system_exports, {
+  cssObjectManager: () => cssObjectManager,
   styled: () => styled
@@ -35,6 +36,34 @@ });
 var import_styled = __toESM(require("@emotion/styled"));
+
+// src/utils/assign-after.ts
+function assignAfter(target, ...sources) {
+  if (typeof target === "undefined" || target === null)
+    throw new Error("Cannot convert undefined or null to object");
+  const result = { ...target };
+  for (const nextSource of sources) {
+    if (!nextSource)
+      continue;
+    for (const nextKey in nextSource) {
+      if (!Object.prototype.hasOwnProperty.call(nextSource, nextKey))
+        continue;
+      if (nextKey in result)
+        delete result[nextKey];
+      result[nextKey] = nextSource[nextKey];
+    }
+  }
+  return result;
+}
+
+// src/system.ts
 var _a;
 var emotionStyled = (_a = import_styled.default.default) != null ? _a : import_styled.default;
+var cssObjectManager = (props) => {
+  const { theme: _, __css, sx } = props;
+  const styles = assignAfter({}, sx);
+  return [`${__css == null ? void 0 : __css.styles}`, styles];
+};
 function styled(component) {
-  const Component = emotionStyled(component)();
+  const Component = emotionStyled(component)(
+    cssObjectManager
+  );
   const juloComponent = (0, import_react.forwardRef)(function JuloComponent(props, ref) {
@@ -50,3 +79,4 @@ return (0, import_react.createElement)(Component, {
 0 && (module.exports = {
+  cssObjectManager,
   styled
 });

dist/types.d.ts

@@ -1,7 +0,19 @@
-import { ElementType, ComponentPropsWithoutRef, ReactNode, ComponentProps } from 'react';
+import { ElementType, ComponentPropsWithoutRef, ComponentProps } from 'react';
+import { SystemStyleObject } from './styled-system-types.js';
+import { SerializedStyles } from '@emotion/react';
 
+interface JuloProps {
+    sx?: SystemStyleObject;
+    /**
+     * Only for internal usage
+     *
+     * @private
+     */
+    __css?: SerializedStyles;
+}
 declare type DOMElements = keyof JSX.IntrinsicElements;
 declare type As = ElementType;
-declare type PropsOf<T extends As> = ComponentPropsWithoutRef<T>;
-declare type MaybeRenderProp<P> = ReactNode | ((props: P) => ReactNode);
+declare type PropsOf<T extends As> = ComponentPropsWithoutRef<T> & {
+    as?: As;
+};
 declare type RightJoinProps<SourceProps extends object = NonNullable<object>, OverrideProps extends object = NonNullable<object>> = Omit<SourceProps, keyof OverrideProps> & OverrideProps;
@@ -17,4 +29,4 @@ declare type Assign<T, U> = Omit<T, keyof U> & U;
 }
-declare type JuloComponent<T extends As, P extends object = NonNullable<object>> = ComponentWithAs<T, P>;
+declare type JuloComponent<T extends As, P extends object = NonNullable<object>> = ComponentWithAs<T, Assign<JuloProps, P>>;
 
-export { As, Assign, ComponentWithAs, DOMElements, JuloComponent, MaybeRenderProp, MergeWithAs, PropsOf, RightJoinProps };
+export { As, Assign, ComponentWithAs, DOMElements, JuloComponent, JuloProps, MergeWithAs, PropsOf, RightJoinProps };

package.json

 {
   "name": "@julo-ui/system",
-  "version": "0.0.1-alpha.2",
+  "version": "0.0.1-alpha.3",
   "description": "Julo UI system primitives",
@@ -5,0 +5,0 @@ "keywords": [

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Major refactor

Supply chain risk

Package has recently undergone a major refactor. It may be unstable or indicate significant internal changes. Use caution when updating to versions that include significant changes.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

32538

increased by115.86%

Number of package files

40

increased by100%

Lines of code

946

increased by148.95%

No dependency changes