@pyreon/coolgrid 0.11.5 → 0.11.6

package/src/constants.ts

@@ -1,4 +1,4 @@
-export const PKG_NAME = "@pyreon/coolgrid"
+export const PKG_NAME = '@pyreon/coolgrid'
 
 /**
  * Grid configuration keys that are passed through context
@@ -7,14 +7,14 @@ export const PKG_NAME = "@pyreon/coolgrid"
 export const CONTEXT_KEYS = [
   // 'breakpoints',
   // 'rootSize',
-  "columns",
-  "size",
-  "gap",
-  "padding",
-  "gutter",
-  "colCss",
-  "colComponent",
-  "rowCss",
-  "rowComponent",
-  "contentAlignX",
+  'columns',
+  'size',
+  'gap',
+  'padding',
+  'gutter',
+  'colCss',
+  'colComponent',
+  'rowCss',
+  'rowComponent',
+  'contentAlignX',
 ]

package/src/context/ContainerContext.ts

@@ -1,5 +1,5 @@
-import { createContext } from "@pyreon/core"
-import type { Context as ContextType } from "../types"
+import { createContext } from '@pyreon/core'
+import type { Context as ContextType } from '../types'
 
 /**
  * Context for container-level grid configuration.

package/src/context/RowContext.ts

@@ -1,5 +1,5 @@
-import { createContext } from "@pyreon/core"
-import type { Context as ContextType } from "../types"
+import { createContext } from '@pyreon/core'
+import type { Context as ContextType } from '../types'
 
 /**
  * Context for row-level grid configuration.

package/src/context/index.ts

@@ -1,4 +1,4 @@
-import ContainerContext from "./ContainerContext"
-import RowContext from "./RowContext"
+import ContainerContext from './ContainerContext'
+import RowContext from './RowContext'
 
 export { ContainerContext, RowContext }

package/src/index.ts

@@ -1,7 +1,7 @@
-import { Provider } from "@pyreon/unistyle"
-import Col from "./Col"
-import Container from "./Container"
-import Row from "./Row"
-import theme from "./theme"
+import { Provider } from '@pyreon/unistyle'
+import Col from './Col'
+import Container from './Container'
+import Row from './Row'
+import theme from './theme'
 
 export { Col, Container, Provider, Row, theme }

package/src/theme.ts

@@ -14,7 +14,7 @@ export default {
   grid: {
     columns: 12,
     container: {
-      xs: "100%",
+      xs: '100%',
       sm: 540,
       md: 720,
       lg: 960,
@@ -32,7 +32,7 @@ export const defaultBreakpoints: Record<string, number> = {
 }
 
 export const defaultContainerWidths: Record<string, string | number> = {
-  xs: "100%",
+  xs: '100%',
   sm: 540,
   md: 720,
   lg: 960,

package/src/types.ts

@@ -5,9 +5,9 @@
  * and the resolved styled-component prop types.
  */
 
-import type { ComponentFn, VNodeChild } from "@pyreon/core"
-import type { BreakpointKeys, config } from "@pyreon/ui-core"
-import type { AlignContentAlignXKeys, extendCss } from "@pyreon/unistyle"
+import type { ComponentFn, VNodeChild } from '@pyreon/core'
+import type { BreakpointKeys, config } from '@pyreon/ui-core'
+import type { AlignContentAlignXKeys, extendCss } from '@pyreon/unistyle'
 
 type CreateValueType<T> = T | T[] | Partial<Record<BreakpointKeys, T>>
 
@@ -22,12 +22,12 @@ export type ValueType = CreateValueType<number>
 export type ContainerWidth = CreateValueType<Value>
 
 export type ContentAlignX =
-  | "center"
-  | "left"
-  | "right"
-  | "spaceAround"
-  | "spaceBetween"
-  | "spaceEvenly"
+  | 'center'
+  | 'left'
+  | 'right'
+  | 'spaceAround'
+  | 'spaceBetween'
+  | 'spaceEvenly'
 
 export type ConfigurationProps = Partial<{
   size: ValueType

package/src/useContext.tsx

@@ -1,8 +1,8 @@
-import { useContext } from "@pyreon/core"
-import { get, pick } from "@pyreon/ui-core"
-import { context } from "@pyreon/unistyle"
-import { CONTEXT_KEYS } from "./constants"
-import type { Context, Obj, ValueType } from "./types"
+import { useContext } from '@pyreon/core'
+import { get, pick } from '@pyreon/ui-core'
+import { context } from '@pyreon/unistyle'
+import { CONTEXT_KEYS } from './constants'
+import type { Context, Obj, ValueType } from './types'
 
 /**
  * Picks only the recognized grid configuration keys from a props object,
@@ -29,12 +29,12 @@ type GetGridContext = (
 }
 
 export const getGridContext: GetGridContext = (props = {}, theme = {}) => ({
-  columns: (get(props, "columns") ||
-    get(theme, "grid.columns") ||
-    get(theme, "coolgrid.columns")) as ValueType,
-  containerWidth: (get(props, "width") ||
-    get(theme, "grid.container") ||
-    get(theme, "coolgrid.container")) as Record<string, number>,
+  columns: (get(props, 'columns') ||
+    get(theme, 'grid.columns') ||
+    get(theme, 'coolgrid.columns')) as ValueType,
+  containerWidth: (get(props, 'width') ||
+    get(theme, 'grid.container') ||
+    get(theme, 'coolgrid.container')) as Record<string, number>,
 })
 
 /**
@@ -44,7 +44,8 @@ export const getGridContext: GetGridContext = (props = {}, theme = {}) => ({
  */
 type UseGridContext = (props: Obj) => Context
 const useGridContext: UseGridContext = (props) => {
-  const { theme } = useContext(context)
+  const getCtx = useContext(context)
+  const { theme } = getCtx()
   const ctxProps = pickThemeProps(props, CONTEXT_KEYS)
   const gridContext = getGridContext(ctxProps, theme as Record<string, unknown>)
 

package/src/utils.ts

@@ -1,5 +1,5 @@
-import { omit } from "@pyreon/ui-core"
-import { CONTEXT_KEYS } from "./constants"
+import { omit } from '@pyreon/ui-core'
+import { CONTEXT_KEYS } from './constants'
 
 /** Checks whether a value is a finite number. */
 export const isNumber = (value: unknown): value is number => Number.isFinite(value)