@toptal/picasso-form-layout 1.0.1

package/dist-package/src/FieldsLayout/FieldsLayoutContext.d.ts

@@ -0,0 +1,20 @@
+import React from 'react';
+import type { BreakpointKeys } from '@toptal/picasso-utils';
+export declare type LabelColumnSize = 2 | 3 | 4;
+export declare type ResponsiveLabelColumnSize = {
+    [k in BreakpointKeys]?: LabelColumnSize;
+};
+export declare type FieldLayout = 'horizontal' | 'vertical';
+export declare type FieldsLayoutContextValue = {
+    layout: FieldLayout;
+    labelWidth: LabelColumnSize | ResponsiveLabelColumnSize;
+};
+export declare const DEFAULT_LABEL_WIDTH_SIZE: LabelColumnSize;
+export declare type FieldsLayoutContextProviderProps = {
+    layout?: FieldLayout;
+    labelWidth?: LabelColumnSize | ResponsiveLabelColumnSize;
+    children: React.ReactNode;
+};
+export declare const FieldsLayoutContextProvider: ({ layout, labelWidth, children, }: FieldsLayoutContextProviderProps) => JSX.Element;
+export declare const useFieldsLayoutContext: () => FieldsLayoutContextValue;
+//# sourceMappingURL=FieldsLayoutContext.d.ts.map

package/dist-package/src/FieldsLayout/FieldsLayoutContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldsLayoutContext.d.ts","sourceRoot":"","sources":["../../../src/FieldsLayout/FieldsLayoutContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAA6C,MAAM,OAAO,CAAA;AAEjE,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAA;AAE3D,oBAAY,eAAe,GAAG,CAAC,GAAG,CAAC,GAAG,CAAC,CAAA;AAEvC,oBAAY,yBAAyB,GAAG;KACrC,CAAC,IAAI,cAAc,CAAC,CAAC,EAAE,eAAe;CACxC,CAAA;AAED,oBAAY,WAAW,GAAG,YAAY,GAAG,UAAU,CAAA;AAEnD,oBAAY,wBAAwB,GAAG;IACrC,MAAM,EAAE,WAAW,CAAA;IACnB,UAAU,EAAE,eAAe,GAAG,yBAAyB,CAAA;CACxD,CAAA;AAED,eAAO,MAAM,wBAAwB,EAAE,eAAmB,CAAA;AAO1D,oBAAY,gCAAgC,GAAG;IAC7C,MAAM,CAAC,EAAE,WAAW,CAAA;IACpB,UAAU,CAAC,EAAE,eAAe,GAAG,yBAAyB,CAAA;IACxD,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAC1B,CAAA;AAED,eAAO,MAAM,2BAA2B,sCAIrC,gCAAgC,gBAgBlC,CAAA;AAED,eAAO,MAAM,sBAAsB,gCAAwC,CAAA"}

package/dist-package/src/FieldsLayout/FieldsLayoutContext.js

@@ -0,0 +1,17 @@
+import React, { createContext, useContext, useMemo } from 'react';
+import { useBreakpoint } from '@toptal/picasso-utils';
+export const DEFAULT_LABEL_WIDTH_SIZE = 3;
+const FieldsLayoutContext = createContext({
+    layout: 'vertical',
+    labelWidth: DEFAULT_LABEL_WIDTH_SIZE,
+});
+export const FieldsLayoutContextProvider = ({ layout = 'vertical', labelWidth = DEFAULT_LABEL_WIDTH_SIZE, children, }) => {
+    const isSmallScreen = useBreakpoint(['sm', 'xs']);
+    const value = useMemo(() => ({
+        layout: isSmallScreen ? 'vertical' : layout,
+        labelWidth,
+    }), [layout, isSmallScreen, labelWidth]);
+    return (React.createElement(FieldsLayoutContext.Provider, { value: value }, children));
+};
+export const useFieldsLayoutContext = () => useContext(FieldsLayoutContext);
+//# sourceMappingURL=FieldsLayoutContext.js.map

package/dist-package/src/FieldsLayout/FieldsLayoutContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"FieldsLayoutContext.js","sourceRoot":"","sources":["../../../src/FieldsLayout/FieldsLayoutContext.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,OAAO,EAAE,MAAM,OAAO,CAAA;AACjE,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAA;AAgBrD,MAAM,CAAC,MAAM,wBAAwB,GAAoB,CAAC,CAAA;AAE1D,MAAM,mBAAmB,GAAG,aAAa,CAA2B;IAClE,MAAM,EAAE,UAAU;IAClB,UAAU,EAAE,wBAAwB;CACrC,CAAC,CAAA;AAQF,MAAM,CAAC,MAAM,2BAA2B,GAAG,CAAC,EAC1C,MAAM,GAAG,UAAU,EACnB,UAAU,GAAG,wBAAwB,EACrC,QAAQ,GACyB,EAAE,EAAE;IACrC,MAAM,aAAa,GAAG,aAAa,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAA;IAEjD,MAAM,KAAK,GAAG,OAAO,CACnB,GAAG,EAAE,CAAC,CAAC;QACL,MAAM,EAAE,aAAa,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,MAAM;QAC3C,UAAU;KACX,CAAC,EACF,CAAC,MAAM,EAAE,aAAa,EAAE,UAAU,CAAC,CACpC,CAAA;IAED,OAAO,CACL,oBAAC,mBAAmB,CAAC,QAAQ,IAAC,KAAK,EAAE,KAAK,IACvC,QAAQ,CACoB,CAChC,CAAA;AACH,CAAC,CAAA;AAED,MAAM,CAAC,MAAM,sBAAsB,GAAG,GAAG,EAAE,CAAC,UAAU,CAAC,mBAAmB,CAAC,CAAA"}

package/dist-package/src/FieldsLayout/index.d.ts

@@ -0,0 +1,2 @@
+export * from './FieldsLayoutContext';
+//# sourceMappingURL=index.d.ts.map

package/dist-package/src/FieldsLayout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/FieldsLayout/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}

package/dist-package/src/FieldsLayout/index.js

@@ -0,0 +1,2 @@
+export * from './FieldsLayoutContext';
+//# sourceMappingURL=index.js.map

package/dist-package/src/FieldsLayout/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/FieldsLayout/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA"}

package/dist-package/src/index.d.ts

@@ -0,0 +1,3 @@
+export type { FieldsLayoutContextProviderProps, FieldsLayoutContextValue, FieldLayout, LabelColumnSize, ResponsiveLabelColumnSize, } from './FieldsLayout';
+export { useFieldsLayoutContext, FieldsLayoutContextProvider, DEFAULT_LABEL_WIDTH_SIZE, } from './FieldsLayout';
+//# sourceMappingURL=index.d.ts.map

package/dist-package/src/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAAA,YAAY,EACV,gCAAgC,EAChC,wBAAwB,EACxB,WAAW,EACX,eAAe,EACf,yBAAyB,GAC1B,MAAM,gBAAgB,CAAA;AACvB,OAAO,EACL,sBAAsB,EACtB,2BAA2B,EAC3B,wBAAwB,GACzB,MAAM,gBAAgB,CAAA"}

package/dist-package/src/index.js

@@ -0,0 +1,2 @@
+export { useFieldsLayoutContext, FieldsLayoutContextProvider, DEFAULT_LABEL_WIDTH_SIZE, } from './FieldsLayout';
+//# sourceMappingURL=index.js.map

package/dist-package/src/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAOA,OAAO,EACL,sBAAsB,EACtB,2BAA2B,EAC3B,wBAAwB,GACzB,MAAM,gBAAgB,CAAA"}

package/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "@toptal/picasso-form-layout",
+  "version": "1.0.1",
+  "description": "Toptal UI components library - Form Layout",
+  "publishConfig": {
+    "access": "public"
+  },
+  "main": "./dist-package/src/index.js",
+  "module": "./dist-package/src/index.js",
+  "scripts": {
+    "build:package": "tsc -b tsconfig.json",
+    "prepublishOnly": "yarn build:package"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/toptal/picasso.git"
+  },
+  "author": "Toptal",
+  "license": "MIT",
+  "bugs": {
+    "url": "https://github.com/toptal/picasso/issues"
+  },
+  "homepage": "https://github.com/toptal/picasso/tree/master/packages/picasso#readme",
+  "dependencies": {
+    "@toptal/picasso-shared": "15.0.0",
+    "@toptal/picasso-utils": "3.0.0",
+    "ap-style-title-case": "^1.1.2"
+  },
+  "sideEffects": [
+    "**/styles.ts",
+    "**/styles.js"
+  ],
+  "peerDependencies": {
+    "@material-ui/core": "4.12.4",
+    "@toptal/picasso-tailwind": ">=2.7",
+    "@toptal/picasso-tailwind-merge": "^2.0.0",
+    "react": ">=16.12.0 < 19.0.0"
+  },
+  "exports": {
+    ".": "./dist-package/src/index.js"
+  },
+  "devDependencies": {
+    "@toptal/picasso-tailwind-merge": "2.0.2",
+    "@toptal/picasso-test-utils": "1.1.1"
+  },
+  "files": [
+    "dist-package/**",
+    "!dist-package/tsconfig.tsbuildinfo",
+    "src"
+  ]
+}

package/src/FieldsLayout/FieldsLayoutContext.tsx

@@ -0,0 +1,53 @@
+import React, { createContext, useContext, useMemo } from 'react'
+import { useBreakpoint } from '@toptal/picasso-utils'
+import type { BreakpointKeys } from '@toptal/picasso-utils'
+
+export type LabelColumnSize = 2 | 3 | 4
+
+export type ResponsiveLabelColumnSize = {
+  [k in BreakpointKeys]?: LabelColumnSize
+}
+
+export type FieldLayout = 'horizontal' | 'vertical'
+
+export type FieldsLayoutContextValue = {
+  layout: FieldLayout
+  labelWidth: LabelColumnSize | ResponsiveLabelColumnSize
+}
+
+export const DEFAULT_LABEL_WIDTH_SIZE: LabelColumnSize = 3
+
+const FieldsLayoutContext = createContext<FieldsLayoutContextValue>({
+  layout: 'vertical',
+  labelWidth: DEFAULT_LABEL_WIDTH_SIZE,
+})
+
+export type FieldsLayoutContextProviderProps = {
+  layout?: FieldLayout
+  labelWidth?: LabelColumnSize | ResponsiveLabelColumnSize
+  children: React.ReactNode
+}
+
+export const FieldsLayoutContextProvider = ({
+  layout = 'vertical',
+  labelWidth = DEFAULT_LABEL_WIDTH_SIZE,
+  children,
+}: FieldsLayoutContextProviderProps) => {
+  const isSmallScreen = useBreakpoint(['sm', 'xs'])
+
+  const value = useMemo(
+    () => ({
+      layout: isSmallScreen ? 'vertical' : layout,
+      labelWidth,
+    }),
+    [layout, isSmallScreen, labelWidth]
+  )
+
+  return (
+    <FieldsLayoutContext.Provider value={value}>
+      {children}
+    </FieldsLayoutContext.Provider>
+  )
+}
+
+export const useFieldsLayoutContext = () => useContext(FieldsLayoutContext)

package/src/FieldsLayout/index.ts

@@ -0,0 +1 @@
+export * from './FieldsLayoutContext'

package/src/index.ts

@@ -0,0 +1,12 @@
+export type {
+  FieldsLayoutContextProviderProps,
+  FieldsLayoutContextValue,
+  FieldLayout,
+  LabelColumnSize,
+  ResponsiveLabelColumnSize,
+} from './FieldsLayout'
+export {
+  useFieldsLayoutContext,
+  FieldsLayoutContextProvider,
+  DEFAULT_LABEL_WIDTH_SIZE,
+} from './FieldsLayout'