@inc2734/unitone-css 0.46.5 → 0.47.0

package/package.json

@@ -1,8 +1,13 @@
 {
   "name": "@inc2734/unitone-css",
-  "version": "0.46.5",
+  "version": "0.47.0",
   "description": "",
-  "main": "index.js",
+  "main": "dist/index.js",
+  "exports": {
+    ".": "./dist/index.js",
+    "./app": "./dist/app.js",
+    "./library": "./dist/library.js"
+  },
   "license": "MIT",
   "repository": {
     "type": "git",
@@ -26,8 +31,7 @@
     "css:app": "sass --no-source-map src/app.scss:dist/app.css && postcss dist/app.css -r",
     "css:storybook": "sass --no-source-map src/storybook.scss:dist/storybook.css && postcss dist/storybook.css -r",
     "css": "run-p css:*",
-    "js:app": "webpack ./src/app.js -o ./dist/ --output-filename app.js --config webpack.config.js",
-    "js": "run-p js:*",
+    "js": "rollup -c --bundleConfigAsCjs",
     "build": "run-s clean format css js",
     "test": "echo \"Error: no test specified\" && exit 1",
     "format:js": "prettier --write './src/**/*.{js,jsx}'",
@@ -36,27 +40,32 @@
     "public": "npm run build && storybook build -c ./.storybook -o ./public"
   },
   "devDependencies": {
-    "@babel/core": "^7.22.9",
-    "@babel/preset-env": "^7.22.9",
-    "@storybook/addon-actions": "^7.2.1",
-    "@storybook/addon-essentials": "^7.2.1",
-    "@storybook/addon-links": "^7.2.1",
-    "@storybook/react-webpack5": "^7.2.1",
+    "@babel/core": "^7.23.2",
+    "@babel/plugin-transform-runtime": "^7.23.2",
+    "@babel/preset-env": "^7.23.2",
+    "@babel/preset-react": "^7.22.15",
+    "@rollup/plugin-babel": "^6.0.4",
+    "@rollup/plugin-commonjs": "^25.0.7",
+    "@rollup/plugin-node-resolve": "^15.2.3",
+    "@rollup/plugin-terser": "^0.4.4",
+    "@storybook/addon-actions": "^7.5.2",
+    "@storybook/addon-essentials": "^7.5.2",
+    "@storybook/addon-links": "^7.5.2",
+    "@storybook/react-webpack5": "^7.5.2",
     "@whitespace/storybook-addon-html": "^5.1.6",
-    "autoprefixer": "^10.4.14",
+    "autoprefixer": "^10.4.16",
     "babel-loader": "^9.1.3",
     "cssnano": "^6.0.1",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.27",
+    "postcss": "^8.4.31",
     "postcss-cli": "^10.1.0",
     "postcss-import": "^15.1.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-syntax-highlighter": "^15.5.0",
-    "rimraf": "^5.0.1",
-    "sass": "^1.64.2",
-    "storybook": "next",
-    "webpack": "^5.88.2",
-    "webpack-cli": "^5.1.4"
+    "rimraf": "^5.0.5",
+    "rollup": "^4.3.0",
+    "sass": "^1.69.5",
+    "storybook": "^7.5.2"
   }
 }

package/src/app.js

@@ -1,16 +1,8 @@
-const setFluidFontSizeMagnification = (target) => {
-  const baseFontSize = parseFloat(
-    window.getComputedStyle(document.documentElement).getPropertyValue('font-size'),
-  );
-  const fontSize = parseFloat(window.getComputedStyle(target).getPropertyValue('font-size'));
-  target.style.setProperty('--unitone--fluid-font-size-magnification', fontSize / baseFontSize);
-};
-
-export const fluidFontSizeResizeObserver = new ResizeObserver((entries) => {
-  for (const entry of entries) {
-    setFluidFontSizeMagnification(entry.target);
-  }
-});
+import {
+  fluidFontSizeResizeObserver,
+  dividersResizeObserver,
+  verticalsResizeObserve,
+} from '@inc2734/unitone-css/library';
 
 document.addEventListener('DOMContentLoaded', () => {
   const fluidFontSizeElements = document.querySelectorAll(
@@ -21,45 +13,6 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 });
 
-const setDividerLinewrap = (target) => {
-  const firstChild = [].slice.call(target.children)?.[0];
-  if (!!firstChild) {
-    let prevChild;
-
-    [].slice.call(target.children).forEach((child) => {
-      const baseRect = firstChild.getBoundingClientRect();
-      const prevRect = prevChild?.getBoundingClientRect();
-      const targetRect = child.getBoundingClientRect();
-
-      let layout = (child.getAttribute('data-unitone-layout') || '').split(' ');
-      if (baseRect.top < targetRect.top) {
-        if (!layout.includes('-linewrap')) {
-          layout.push('-linewrap');
-        }
-      } else {
-        layout = layout.filter((value) => value !== '-linewrap');
-      }
-
-      if (firstChild === child || (!!prevRect?.top && prevRect.top < targetRect.top)) {
-        if (!layout.includes('-bol')) {
-          layout.push('-bol');
-        }
-      } else {
-        layout = layout.filter((value) => value !== '-bol');
-      }
-
-      child.setAttribute('data-unitone-layout', layout.join(' '));
-      prevChild = child;
-    });
-  }
-};
-
-export const dividersResizeObserver = new ResizeObserver((entries) => {
-  for (const entry of entries) {
-    setDividerLinewrap(entry.target);
-  }
-});
-
 document.addEventListener('DOMContentLoaded', () => {
   const dividers = document.querySelectorAll('[data-unitone-layout*="-divider:"]');
   dividers.forEach((target) => {
@@ -67,86 +20,6 @@ document.addEventListener('DOMContentLoaded', () => {
   });
 });
 
-const setColumnCountForVertical = (target) => {
-  target.parentNode.style.height = '';
-  target.parentNode.style.width = '';
-  target.style.columnCount = '';
-
-  let lastChild;
-  [].slice
-    .call(target.children)
-    .reverse()
-    .some((child) => {
-      if (!['absolute', 'fixed'].includes(getComputedStyle(child).position)) {
-        lastChild = child;
-        return true;
-      }
-    });
-
-  if (!lastChild) {
-    return;
-  }
-
-  // For Firefox
-  if (target.getBoundingClientRect().left > lastChild.getBoundingClientRect().left) {
-    target.style.columnCount = 'auto';
-    target.parentNode.style.width = `${Math.ceil(
-      target.getBoundingClientRect().width +
-        target.getBoundingClientRect().left -
-        lastChild.getBoundingClientRect().left,
-    )}px`;
-
-    if (target.getBoundingClientRect().width >= target.parentNode.getBoundingClientRect().width) {
-      target.style.columnCount = '';
-    }
-  }
-
-  // For Safari
-  if (target.getBoundingClientRect().left > lastChild.getBoundingClientRect().left) {
-    target.style.columnCount = 2;
-  }
-
-  const targetY = target.getBoundingClientRect().top + target.getBoundingClientRect().height;
-  const lastChildY =
-    lastChild.getBoundingClientRect().top + lastChild.getBoundingClientRect().height;
-  if (targetY < lastChildY) {
-    target.parentNode.style.height = `${Math.ceil(
-      lastChildY - target.getBoundingClientRect().top,
-    )}px`;
-  }
-};
-
-export const verticalsResizeObserve = (target) => {
-  let prevWidth = 0;
-
-  const mutationObserver = new MutationObserver((entries) => {
-    for (const entry of entries) {
-      setColumnCountForVertical(target);
-    }
-  });
-
-  mutationObserver.observe(target, {
-    // attributes: true,
-    characterData: true,
-    childList: true,
-    subtree: true,
-  });
-
-  const resizeObserver = new ResizeObserver((entries, observer) => {
-    for (const entry of entries) {
-      const width = entry.borderBoxSize?.[0].blockSize;
-      if (width !== prevWidth) {
-        prevWidth = width;
-        observer.unobserve(entry.target);
-        setColumnCountForVertical(entry.target);
-        observer.observe(entry.target);
-      }
-    }
-  });
-
-  resizeObserver.observe(target);
-};
-
 document.addEventListener('DOMContentLoaded', () => {
   const verticals = document.querySelectorAll('[data-unitone-layout~="vertical-writing"]');
   verticals.forEach((target) => {

package/src/index.js

@@ -0,0 +1 @@
+export * from './layout-primitives/index';

package/src/layout-primitives/both-sides/README.md

@@ -1,8 +1,14 @@
+# Both Sides
+
+Child elements are aligned at both ends. If the width of a child element becomes too large to maintain justification, it will be placed in a single column.
+
 ## Usage
 
+### HTML
+
 ```html
 <div data-unitone-layout="both-sides">
-  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill</p>
+  <p>Lorem ipsum dolor sit amet</p>
   <ul>
     <li>Lorem</li>
     <li>ipsum</li>
@@ -11,7 +17,28 @@
 </div>
 ```
 
-### Customizing gap
+### JSX
+
+```jsx
+import { BothSides } from '@inc2734/unitone-css';
+
+<BothSides>
+  <p>Lorem ipsum dolor sit amet</p>
+  <ul>
+    <li>Lorem</li>
+    <li>ipsum</li>
+    <li>dolor</li>
+  </ul>
+</BothSides>
+```
+
+## Props
+
+### Gap
+
+Gap.
+
+#### HTML
 
 ```html
 <div data-unitone-layout="both-sides -gap:1">
@@ -19,7 +46,21 @@
 </div>
 ```
 
-### Customizing align
+#### JSX
+
+```jsx
+import { BothSides } from '@inc2734/unitone-css';
+
+<BothSides gap={1}>
+  ...
+</BothSides>
+```
+
+### Align items
+
+Alignment of the row direction.
+
+#### HTML
 
 ```html
 <ul data-unitone-layout="both-sides -align-items:center">
@@ -27,11 +68,25 @@
 </ul>
 ```
 
-### Customizing item max-width
+#### JSX
+
+```jsx
+import { BothSides } from '@inc2734/unitone-css';
+
+<BothSides alignItems="center">
+  ...
+</BothSides>
+```
+
+### Items max width
+
+Set max-width of the item.
+
+#### HTML
 
 ```html
 <div data-unitone-layout="both-sides">
-  <p style="--unitone--content-max-width: 400px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill</p>
+  <p style="--unitone--content-max-width: 400px">Lorem ipsum dolor sit amet</p>
   <ul>
     <li>Lorem</li>
     <li>ipsum</li>
@@ -40,11 +95,30 @@
 </div>
 ```
 
-### Customizing item width
+#### JSX
+
+```jsx
+import { BothSides } from '@inc2734/unitone-css';
+
+<BothSides>
+  <p style={{ '--unitone--content-max-width': '400px' }}>Lorem ipsum dolor sit amet</p>
+  <ul>
+    <li>Lorem</li>
+    <li>ipsum</li>
+    <li>dolor</li>
+  </ul>
+</BothSides>
+```
+
+### Items width
+
+Set width of the item.
+
+### HTML
 
 ```html
 <div data-unitone-layout="both-sides">
-  <p style="--unitone--content-width: 400px">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cill</p>
+  <p style="--unitone--content-width: 400px">Lorem ipsum dolor sit amet</p>
   <ul>
     <li>Lorem</li>
     <li>ipsum</li>
@@ -52,3 +126,18 @@
   </ul>
 </div>
 ```
+
+#### JSX
+
+```jsx
+import { BothSides } from '@inc2734/unitone-css';
+
+<BothSides>
+  <p style={{ '--unitone--content-width': '400px' }}>Lorem ipsum dolor sit amet</p>
+  <ul>
+    <li>Lorem</li>
+    <li>ipsum</li>
+    <li>dolor</li>
+  </ul>
+</BothSides>
+```

package/src/layout-primitives/both-sides/stories/index.stories.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import readme from '../README.md';
 
-import { BothSides } from '../BothSides';
+import { BothSides } from '../';
 
 const meta = {
   title: 'Layout Primitives/BothSides',
@@ -35,13 +35,10 @@ const meta = {
 };
 export default meta;
 
-const content =
-  'Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.';
-
 export const Default = (args) => {
   return (
     <BothSides {...args}>
-      <p>{content}</p>
+      <p>Lorem ipsum dolor sit amet</p>
       <ul>
         <li>Lorem</li>
         <li>ipsum</li>

package/src/layout-primitives/center/README.md

@@ -1,49 +1,113 @@
+# Center
+
+Center the box. Settings also allow for centering of child elements and centering of text.
+
 ## Usage
 
+### HTML
+
 ```html
-<div data-unitone-layout="text">
-  <h2>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h2>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
-    reprehenderit in voluptate velit esse cill
-  </p>
-
-  <div data-unitone-layout="center">
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit
-  </div>
-
-  <h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit</h3>
-  <p>
-    Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt
-    ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
-    ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
-    reprehenderit in voluptate velit esse cill
-  </p>
+<div data-unitone-layout="center">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit
 </div>
 ```
 
+### JSX
+
+```jsx
+import { Center } from '@inc2734/unitone-css';
+
+<Center>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit
+</Center>
+```
+
+## Props
+
 ### Intrinsic centering
 
+Child elements are also centered.
+
+#### HTML
+
 ```html
 <div data-unitone-layout="center -intrinsic">
   ...
 </div>
 ```
 
+#### JSX
+
+```jsx
+import { Center } from '@inc2734/unitone-css';
+
+<Center intrinsic>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit
+</Center>
+```
+
 ### Centering with text
 
+Text is also centered.
+
+#### HTML
+
 ```html
 <div data-unitone-layout="center -with-text">
   ...
 </div>
 ```
 
-### Customizing gutters
+#### JSX
+
+```jsx
+import { Center } from '@inc2734/unitone-css';
+
+<Center withText>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit
+</Center>
+```
+
+### Gutters
+
+Gutters.
+
+#### HTML
 
 ```html
 <div data-unitone-layout="center -gutters:1">
   ...
 </div>
 ```
+
+#### JSX
+
+```jsx
+import { Center } from '@inc2734/unitone-css';
+
+<Center gutters={1}>
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit
+</Center>
+```
+
+### Max width
+
+Max width.
+
+#### HTML
+
+```html
+<div data-unitone-layout="center" style="--unitone--max-width: 1280px">
+  ...
+</div>
+```
+
+#### JSX
+
+```jsx
+import { Center } from '@inc2734/unitone-css';
+
+<Center maxWidth="1280px">
+  Lorem ipsum dolor sit amet, consectetur adipisicing elit
+</Center>
+```

package/src/layout-primitives/center/stories/index.stories.jsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import readme from '../README.md';
 
-import { Center } from '../Center';
-import { Stack } from '../../stack/Stack';
+import { Center } from '../';
+import { Stack } from '../../stack';
 
 export default {
   title: 'Layout Primitives/Center',

package/src/layout-primitives/cluster/README.md

@@ -1,5 +1,11 @@
+# Cluster
+
+Arranges child elements horizontally.
+
 ## Usage
 
+### HTML
+
 ```html
 <ul data-unitone-layout="cluster">
   <li>Lorem ipsum</li>
@@ -10,7 +16,27 @@
 </ul>
 ```
 
-### Customizing align
+### JSX
+
+```jsx
+import { Cluster } from '@inc2734/unitone-css';
+
+<Cluster tagName="ul">
+  <li>Lorem ipsum</li>
+  <li>dolor sit</li>
+  <li>amet consectetur</li>
+  <li>adipisicing elit</li>
+  <li>sed do</li>
+</Cluster>
+```
+
+## Props
+
+### Align items
+
+Alignment of the row direction.
+
+#### HTML
 
 ```html
 <ul data-unitone-layout="cluster -align-items:center">
@@ -18,7 +44,21 @@
 </ul>
 ```
 
-### Customizing justify
+#### JSX
+
+```jsx
+import { Cluster } from '@inc2734/unitone-css';
+
+<Cluster tagName="ul" alignItems="center">
+  ...
+</Cluster>
+```
+
+### Justify content
+
+#### HTML
+
+Alignment of the column direction.
 
 ```html
 <ul data-unitone-layout="cluster -justify-content:space-between">
@@ -26,7 +66,21 @@
 </ul>
 ```
 
-### Customizing gap
+#### JSX
+
+```jsx
+import { Cluster } from '@inc2734/unitone-css';
+
+<Cluster tagName="ul" justifyContent="space-between">
+  ...
+</Cluster>
+```
+
+### Gap
+
+Gap.
+
+#### HTML
 
 ```html
 <ul data-unitone-layout="cluster -gap:1">
@@ -34,10 +88,24 @@
 </ul>
 ```
 
-### Using divider
+#### JSX
+
+```jsx
+import { Cluster } from '@inc2734/unitone-css';
+
+<Cluster tagName="ul" gap={1}>
+  ...
+</Cluster>
+```
+
+### Divider
+
+Using divider.
 
 stripe / slash / bordered
 
+#### HTML
+
 ```html
 <div data-unitone-layout="cluster -divider:stripe">
   <div>
@@ -48,3 +116,18 @@ stripe / slash / bordered
   </div>
 </div>
 ```
+
+#### JSX
+
+```jsx
+import { Cluster } from '@inc2734/unitone-css';
+
+<Cluster divider="stripe">
+  <div>
+    ...
+  </div>
+  <div>
+    ...
+  </div>
+</Cluster>
+```

package/src/layout-primitives/cluster/stories/index.stories.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import readme from '../README.md';
 
-import { Cluster } from '../Cluster';
+import { Cluster } from '../';
 
 export default {
   title: 'Layout Primitives/Cluster',