@streamlinedfi/div 0.1.0 → 0.1.1

package/README.md

@@ -1,2 +1,136 @@
-# div
+# Build UI with Speed
+
 Streamlined Div is a styled-components extension of the html div for building products with speed
+
+## Installation
+
+```
+# with Yarn
+$ yarn add @streamlinedfi/div styled-components
+
+# with npm
+$ npm i @streamlinedfi/div styled-components
+
+# with pnpm
+$ pnpm add @streamlinedfi/div styled-components
+
+# with Bun
+$ bun add @streamlinedfi/div styled-components
+```
+
+## Usage
+
+### 1. Create a UI System
+
+```jsx
+import { createUISystem } from '@streamlinedfi/div';
+
+export const uiSystem = createUISystem({
+  theme: {
+    background: 'darkblue',
+    red: 'red',
+    blue: 'blue',
+    green: 'green',
+  },
+  breakpoints: {
+    mobile: { max: 768 },
+    tablet: { min: 769, max: 1023 },
+    desktop: { min: 1024 },
+  },
+  spacingUnit: 16,
+});
+```
+
+### 2. Wrap app with uiSystem.theme
+
+```jsx
+import { createRoot } from 'react-dom/client';
+import { ThemeProvider } from 'styled-components';
+import App from './App.jsx';
+import { uiSystem } from './uiSystem';
+
+createRoot(document.getElementById('root')).render(
+  <ThemeProvider theme={uiSystem.theme}>
+    <App />
+  </ThemeProvider>,
+);
+```
+
+### 3. Use @streamlinedfi/div
+
+```jsx
+import Div from '@streamlinedfi/div';
+
+function App() {
+  return (
+    <Div
+      as="main"
+      $flex
+      $innerCenter
+      $grow
+      $p={2.5}
+      $background={theme => theme.background}
+    >
+      <Div $w={100} $h={100} />
+      <Div $w={100} $h={100} />
+    </Div>
+  );
+}
+
+export default App;
+```
+
+## Shorthand props
+
+It inherits most of css rules:
+
+| CSS Property     | Shorthand Prop    |
+| ---------------- | ----------------- |
+| max-width        | \$maxWidth        |
+| background-color | \$backgroundColor |
+| text-decoration  | \$textDecoration  |
+
+But also has some shorthands ([see the full list in `src/rules.js`](./src/rules.js)):
+
+| CSS Property  | Shorthand Prop |
+| ------------- | -------------- |
+| width         | \$w            |
+| height        | \$h            |
+| padding       | \$p            |
+| padding-top   | \$pt           |
+| ...           | ...            |
+| margin        | \$mt           |
+| margin-bottom | \$mb           |
+| ...           | ...            |
+
+And some props are new extensions (handy for flex):
+
+| New Shorthand Prop |
+| ------------------ |
+| \$innerCenter      |
+| \$outerCenter      |
+| \$innerTop         |
+| \$innerLeft        |
+| ...                |
+
+And some props use the spacing system based on the provided spacingUnit.
+
+```jsx
+const uiSystem = createUISystem({
+  // ...
+  spacingUnit: 16,
+});
+
+/**
+ * with spacingUnit: 16, the div will have:
+ * padding-left: 32px
+ * margin-bottom: 16px;
+ */
+<Div $pl={2} $mb={1}>
+```
+
+Lastly, the div accepts media props:
+
+```jsx
+<Div $w={300} $mobile$w={100} $tablet$w={200}>
+```

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamlinedfi/div",
-  "version": "0.1.0",
+  "version": "0.1.1",
   "description": "Streamlined Div is a styled-components extension of the html div for building products with speed",
   "author": "Streamlined Finance",
   "repository": {

package/src/Text.js

@@ -0,0 +1,58 @@
+import isFunction from 'lodash/isFunction';
+import styled from 'styled-components';
+import { colorMixin, sizeFormatter } from './utils';
+
+import { divMixin, renderCss } from './Div';
+
+const textRules = {
+  weight: 'font-weight',
+  size: {
+    css: 'font-size',
+    format: sizeFormatter,
+  },
+  color: {
+    css: (props, media, extensions) => {
+      const color = extensions.includes('hover')
+        ? props.$color$hover
+        : props.$color;
+
+      return colorMixin(color, props.theme);
+    },
+  },
+  tnum: 'font-feature-settings: "tnum";letter-spacing:-0.04em;',
+  breakWord: 'word-break: break-word;',
+  noBreak: 'white-space: nowrap;',
+  uppercase: 'text-transform: uppercase;',
+  serif: 'font-family: "Times New Roman", Times, serif',
+  'spacing|letterSpacing': `letter-spacing`,
+  left: 'text-align: left;',
+  right: 'text-align: right;',
+  center: 'text-align: center;',
+  lineThrough: 'text-decoration: line-through',
+  // underline: 'text-decoration: underline;',
+  linearGradient: props => `
+    -webkit-text-fill-color: transparent;
+    text-fill-color: transparent;
+    -webkit-background-clip: text;
+    background-clip: text;
+    background-image: linear-gradient(${
+      isFunction(props.$linearGradient)
+        ? props.$linearGradient(props.theme)
+        : props.$linearGradient
+    });
+  `,
+  ellipsis: `
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    max-width: 100%;
+  `,
+  underline: 'text-decoration: underline;',
+};
+
+const Text = styled.p`
+  ${props => divMixin(props)}
+  ${props => renderCss(props, textRules)}
+`;
+
+export default Text;

package/src/index.js

@@ -1,6 +1,7 @@
-import Div from './Div';
+import Div, { divMixin } from './Div';
+import Text from './Text';
 import createUISystem from './createUISystem';
 
 export default Div;
 
-export { createUISystem };
+export { createUISystem, Div, divMixin, Text };

package/src/utils.js

@@ -81,3 +81,27 @@ export function getMediaPropRegex(theme) {
 
   return mediaPropRegex;
 }
+
+export function colorMixin(color, theme) {
+  if (color) {
+    if ([100, 200, 300, 400, 500, 600, 700, 800, 900].includes(color)) {
+      return `color: ${theme[`fill${color}`]};`;
+    }
+
+    if (typeof color === 'string') {
+      if (theme[color]) {
+        return `color: ${theme[color]};`;
+      }
+      return `color: ${color};`;
+    }
+  }
+
+  return '';
+}
+
+export const sizeFormatter = value => {
+  if (typeof value === 'number') {
+    return `${value}px`;
+  }
+  return value;
+};

package/test-app/src/main.jsx

@@ -1,13 +1,10 @@
-import { StrictMode } from 'react';
 import { createRoot } from 'react-dom/client';
 import { ThemeProvider } from 'styled-components';
 import App from './App.jsx';
 import { uiSystem } from './uiSystem.js';
 
 createRoot(document.getElementById('root')).render(
-  <StrictMode>
-    <ThemeProvider theme={uiSystem.theme}>
-      <App />
-    </ThemeProvider>
-  </StrictMode>,
+  <ThemeProvider theme={uiSystem.theme}>
+    <App />
+  </ThemeProvider>,
 );