@cronocode/react-box 1.5.4 → 1.5.6

package/README.md

@@ -0,0 +1,90 @@
+# React box
+
+This is a react base component which will reduce considerably necessity to write css code.
+
+## Getting Started
+
+1. Installation
+
+```
+npm install @cronocode/react-box
+```
+
+2. Import styles
+
+```
+import "@cronocode/react-box/styles.css";
+```
+
+OR
+
+```
+@import "@cronocode/react-box/styles.css";
+```
+
+3. Use component
+
+Sizes are divided to `4`
+`padding={3}` means `1rem/4 => 0.75rem`
+
+In the example below is creating a box with `maring: 0.5rem` and `padding: 1.75rem`
+
+Root `font-size` is set to `16px`
+
+```
+import Box from "@cronocode/react-box";
+
+export default function Component(props: Props) {
+  return (
+    <Box className="custom-class" m={2} p={7}>
+      basic example
+    </Box>
+  );
+}
+```
+
+## Components
+
+- **Box** - base component with a tons of props
+
+```
+import Box from "@cronocode/react-box";
+```
+
+<br/>
+
+### Alias-shortcuts components
+
+- **Flex** - this is a `Box` component with `display: flex` style
+
+```
+import Flex from "@cronocode/react-box/components/flex";
+```
+
+- **Button** - this is a `Box` component with html tag `button` and `onClick` prop
+
+```
+import Button from "@cronocode/react-box/components/button";
+```
+
+- **Textbox**
+
+```
+import Textbox from "@cronocode/react-box/components/textbox";
+```
+
+- **Tooltip** - this is useful when you need a position absolute and the parent has overflow hidden.
+
+```
+import Tooltip from "@cronocode/react-box/components/tooltip";
+```
+
+## Theme variables
+
+```
+  --borderColor: black;
+  --outlineColor: black;
+  --lineHeight: 1.2;
+  --fontSize: 14px;
+  --transitionTime: 0.25s;
+```

package/components/dataGrid.cjs

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const i=require("react/jsx-runtime"),u=require("../box.cjs");require("react");require("../box.module.css.cjs");require("../utils/utils.cjs");require("../theme.cjs");function o(r){if(!(r!=null&&r.length))return{rows:[],columns:[]};const t=Object.keys(r[0]);return{rows:r.map(e=>({dataRow:e,cells:t.map(n=>({key:n,value:e[n]}))})),columns:t.map(e=>({key:e}))}}function c(r){const{data:t}=r,e=o(t);return e.columns.length===0?i.jsx(u.default,{display:"grid",children:"empty grid"}):i.jsxs(u.default,{display:"grid",children:[e.columns.map((n,s)=>i.jsx(u.default,{style:{gridColumn:s+1},children:n.key.toString()},n.key.toString())),e.rows.map((n,s)=>n.cells.map(l=>i.jsx(u.default,{children:l.value},l.key.toString()+s)))]})}exports.default=c;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const t=require("react/jsx-runtime"),u=require("../box.cjs");require("react");require("../box.module.css.cjs");require("../utils/utils.cjs");require("../theme.cjs");function o(r){if(!(r!=null&&r.length))return{rows:[],columns:[]};const i=Object.keys(r[0]);return{rows:r.map(e=>({dataRow:e,cells:i.map(n=>({key:n,value:e[n]}))})),columns:i.map(e=>({key:e}))}}function c(r){const{data:i}=r,e=o(i);return t.jsx(u.default,{display:"grid",b:1,borderRadius:1,children:e.columns.length===0?t.jsx(t.Fragment,{children:"empty grid"}):t.jsxs(t.Fragment,{children:[e.columns.map((n,s)=>t.jsx(u.default,{style:{gridColumn:s+1},children:n.key.toString()},n.key.toString())),e.rows.map((n,s)=>n.cells.map(l=>t.jsx(u.default,{children:l.value},l.key.toString()+s)))]})})}exports.default=c;

package/components/dataGrid.mjs

@@ -1,36 +1,36 @@
-import { jsx as s, jsxs as l } from "react/jsx-runtime";
-import t from "../box.mjs";
+import { jsx as o, Fragment as l, jsxs as u } from "react/jsx-runtime";
+import s from "../box.mjs";
 import "react";
 import "../box.module.css.mjs";
 import "../utils/utils.mjs";
 import "../theme.mjs";
-function p(i) {
-  if (!(i != null && i.length))
+function c(e) {
+  if (!(e != null && e.length))
     return {
       rows: [],
       columns: []
     };
-  const e = Object.keys(i[0]);
+  const i = Object.keys(e[0]);
   return {
-    rows: i.map((r) => ({
+    rows: e.map((r) => ({
       dataRow: r,
-      cells: e.map((n) => ({
+      cells: i.map((n) => ({
         key: n,
         value: r[n]
       }))
     })),
-    columns: e.map((r) => ({
+    columns: i.map((r) => ({
       key: r
     }))
   };
 }
-function h(i) {
-  const { data: e } = i, r = p(e);
-  return r.columns.length === 0 ? /* @__PURE__ */ s(t, { display: "grid", children: "empty grid" }) : /* @__PURE__ */ l(t, { display: "grid", children: [
-    r.columns.map((n, o) => /* @__PURE__ */ s(t, { style: { gridColumn: o + 1 }, children: n.key.toString() }, n.key.toString())),
-    r.rows.map((n, o) => n.cells.map((m) => /* @__PURE__ */ s(t, { children: m.value }, m.key.toString() + o)))
-  ] });
+function k(e) {
+  const { data: i } = e, r = c(i);
+  return /* @__PURE__ */ o(s, { display: "grid", b: 1, borderRadius: 1, children: r.columns.length === 0 ? /* @__PURE__ */ o(l, { children: "empty grid" }) : /* @__PURE__ */ u(l, { children: [
+    r.columns.map((n, t) => /* @__PURE__ */ o(s, { style: { gridColumn: t + 1 }, children: n.key.toString() }, n.key.toString())),
+    r.rows.map((n, t) => n.cells.map((m) => /* @__PURE__ */ o(s, { children: m.value }, m.key.toString() + t)))
+  ] }) });
 }
 export {
-  h as default
+  k as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@cronocode/react-box",
-  "version": "1.5.4",
+  "version": "1.5.6",
   "main": "./box.cjs",
   "module": "./box.mjs",
   "types": "./box.d.ts",
@@ -36,7 +36,7 @@
     "preview": "vite preview",
     "build": "vite build",
     "build:dev": "vite build --mode dev",
-    "postbuild": "cp package.json dist & cp LICENSE dist & rm ./dist/index.d.ts & rm ./dist/index.js",
+    "postbuild": "cp package.json dist & cp LICENSE dist & cp README.md dist & cp docs -r dist & rm ./dist/index.d.ts & rm ./dist/index.js",
     "compile": "tsc --noEmit --skipLibCheck",
     "test": "echo \"Error: no test specified\" && exit 1"
   },
@@ -60,6 +60,7 @@
     "@rollup/pluginutils": "^5.0.2",
     "@types/node": "^18.15.7",
     "@types/postcss-mixins": "^9.0.0",
+    "@types/prismjs": "^1.26.3",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@vitejs/plugin-react": "^3.1.0",
@@ -70,6 +71,7 @@
     "postcss-nested": "^6.0.1",
     "postcss-simple-vars": "^7.0.1",
     "prettier": "^2.8.7",
+    "prismjs": "^1.29.0",
     "react": "^18.1.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.16.0",

package/plugins.cjs

@@ -148,11 +148,11 @@
 
 .bg_a_${o}:active {
   background: var(--background${o});
-}`),s=Object.keys(r.colors).map(o=>`'${o}'`).join(" | "),$=Object.keys(r.backgrounds).map(o=>`'${o}'`).join(" | "),b=Object.keys(r.shadows).map(o=>`'${o}'`).join(" | "),p=`import {ColorType} from '@cronocode/react-box/types';
+}`),$=Object.keys(r.colors).map(o=>`'${o}'`).join(" | "),s=Object.keys(r.backgrounds).map(o=>`'${o}'`).join(" | "),b=Object.keys(r.shadows).map(o=>`'${o}'`).join(" | "),p=`import '@cronocode/react-box';
 
 declare module '@cronocode/react-box/types' {
-  type ColorType = ${s};
-  type BackgroundType = ${$};
+  type ColorType = ${$};
+  type BackgroundType = ${s};
   type ShadowType = ${b};
 
   namespace Augmented {

package/plugins.mjs

@@ -1,4 +1,4 @@
-function C(r) {
+function u(r) {
   const _ = Object.entries(r.colors).map(([o, e]) => `--color${o}: ${e};`).join(`
   `), t = Object.entries(r.shadows).map(([o, e]) => `--shadow${o}: ${e};`).join(`
   `), c = Object.entries(r.backgrounds).map(([o, e]) => `--background${o}: ${e};`).join(`
@@ -151,7 +151,7 @@ function C(r) {
 
 .bg_a_${o}:active {
   background: var(--background${o});
-}`), $ = Object.keys(r.colors).map((o) => `'${o}'`).join(" | "), s = Object.keys(r.backgrounds).map((o) => `'${o}'`).join(" | "), b = Object.keys(r.shadows).map((o) => `'${o}'`).join(" | "), p = `import {ColorType} from '@cronocode/react-box/types';
+}`), $ = Object.keys(r.colors).map((o) => `'${o}'`).join(" | "), s = Object.keys(r.backgrounds).map((o) => `'${o}'`).join(" | "), b = Object.keys(r.shadows).map((o) => `'${o}'`).join(" | "), p = `import '@cronocode/react-box';
 
 declare module '@cronocode/react-box/types' {
   type ColorType = ${$};
@@ -215,5 +215,5 @@ declare module '@cronocode/react-box/types' {
   };
 }
 export {
-  C as boxTheme
+  u as boxTheme
 };

package/{types.d.ts → src/types.d.ts}

@@ -217,7 +217,7 @@ interface BoxPointerEvents {
     pointerEvents?: PointerEventsType;
 }
 type BoxNormalStyles = BoxPseudoClasses & BoxDisplay & BoxSizing & BoxPosition & BoxSize & BoxMargin & BoxPadding & BoxBorder & BoxCursor & BoxZIndex & BoxOverflow & BoxOpacity & BoxFont & BoxText & BoxFlex & BoxOutline & BoxTransition & BoxUserSelect & BoxAppearance & BoxPointerEvents;
-declare namespace Augmented {
+export declare namespace Augmented {
     interface BoxProps {
     }
     interface SvgProps {