acinguiux-ds-react-framework 0.0.3 → 0.0.4

package/CHANGELOG.md

@@ -1,7 +1,9 @@
 # acinguiux-ds-react-framework
 
-## 0.0.2
+## 12.0.0-next-major.20
 
-### Patch Changes
+### Minor Changes
 
-- [#3122](https://github.com/ace-ds-react-framework/pull/3122) [`550b2efa`](https://github.com/ace-ds-react-framework/commit/550b2efa6e3db6412cfc53e1cdec3fdacc404646) Thanks [@acinguix](https://github.com/acinguix)! - Fix/react base/sync and do not release
+- [#3142](https://github.com/acinguiux-ds-react-framework/pull/3142) [`90adfc0d`](https://github.com/acinguiux-ds-react-framework/commit/90adfc0dd507ddc3f37efa7a6e434df1a46b0d5e) Thanks [@Wyrobowa](https://github.com/Wyrobowa)! - feat(react-framework): add styles to sorter button
+
+## 11.3.0-beta.10

package/README.md

@@ -1,8 +1,8 @@
-# Acinguiux Design System - React Framework
+# acinguiux Design System - React Framework
 
 ---
 
-Welcome to the Acinguiux Design System React Framework, a collection of reusable components written in ReactJS. You can explore these components on our [Storybook page](https://Acinguiux-ds-react-framework.azurewebsites.net/).
+Welcome to the acinguiux Design System React Framework, a collection of reusable components written in ReactJS. You can explore these components on our [Storybook page](https://acinguiux-ds-react-framework.azurewebsites.net/).
 
 ## Table of Contents
 
@@ -13,3 +13,112 @@ Welcome to the Acinguiux Design System React Framework, a collection of reusable
 5. [Transpiling](#transpiling)
 
 ---
+
+## Documentation
+
+Our comprehensive documentation is available in the [GitHub Wiki](https://github.com/acinguiux-ds-react-framework/wiki).
+We provide a Storybook page to showcase and document our components:
+- beta (release/minor_patch branch): [https://acinguiux-ds-minor-patch-react-framework.azurewebsites.net/](https://acinguiux-ds-minor-patch-react-framework.azurewebsites.net/)
+- next-major (release/major branch): [https://acinguiux-ds-major-react-framework.azurewebsites.net/](https://acinguiux-ds-major-react-framework.azurewebsites.net/)
+- stable (main branch): [https://acinguiux-ds-react-framework.azurewebsites.net/](https://acinguiux-ds-react-framework.azurewebsites.net/)
+
+---
+
+## Installation
+
+To use the acinguiux Design System React Framework in your project, follow these steps:
+
+### Step 1: Generate GitHub Token
+
+1. Go to [GitHub Tokens](https://github.com/settings/tokens)or navigate to GitHub Settings => Developer Settings => Personal Access Tokens.
+2. Generate a new token with at least the repo and read:packages scopes.
+3. Copy the token and, if prompted, configure SSO authorization in the `sede-x` organization.
+
+Add the token to the file `~/.npmrc` (if it does not exist, create it):
+
+```
+//npm.pkg.github.com/:_authToken=YOUR_TOKEN_HERE
+```
+
+If you do not have access to this file or you are in a Windows OS, you can run the following command:
+
+```
+npm login --scope=@sede-x --registry=https://npm.pkg.github.com
+> Username: USERNAME
+> Password: TOKEN
+> Email: PUBLIC-EMAIL-ADDRESS
+```
+
+### Step 2: Update NPM Registry
+
+Update your npm registry. Create or edit a `.npmrc` file in your project root folder and add:
+
+```
+@sede-x:registry=https://npm.pkg.github.com
+```
+
+Your other dependencies will still be downloaded from the default npm registry.
+
+### Step 3: Install the Framework
+
+Run the following command:
+
+```
+npm install --save acinguiux-ds-react-framework
+```
+
+### Step 4: Add Fonts
+
+Add the following font link to your `index.html`:
+
+```html
+<link href="https://acinguiux-fonts.azureedge.net/index.css" rel="stylesheet">
+```
+
+### Step 5: Theme Provider
+
+In your app entry point (e.g., `src/App.tsx` for Create React App), add the following snippet:
+
+```js
+import React, { ReactElement } from 'react';
+import { acinguiuxThemeProvider } from 'acinguiux-ds-react-framework';
+
+function App(): ReactElement {
+  return <acinguiuxThemeProvider theme="light"><!-- Your app content --></acinguiuxThemeProvider>;
+}
+
+export default App;
+```
+
+Choose between the light and dark themes.
+
+---
+
+## Commands
+
+- `pnpm start`: launches the Storybook app
+- `pnpm test`: runs tests for all `*.test.ts?x` files
+- `pnpm test:watch`: watches all `*.test.ts?x` files and runs tests on each change
+- `pnpm build`: builds the application for distribution as a NPM package
+- `pnpm lint`: runs TS and Styled Component linters
+- `pnpm format`: formats all files based on Prettier configurations
+
+---
+
+## Support
+
+For support or inquiries, please contact the acinguiux Design System Team:
+
+- [GitHub issues page](https://github.com/acinguiux-ds-react-framework/issues)
+- [SDS Teams channel](https://teams.microsoft.com/l/channel/19%3Aac0e8c95a3c840c2a1095a7440206c51%40thread.tacv2/Questions?groupId=dd072cdc-70c5-4aaf-a665-284c4fdeef4d&tenantId=db1e96a8-a3da-442a-930b-235cac24cd5c)
+- [mail: GX-GL-acinguiuxDesignSystemTeam@acinguiux.com](mailto:GX-GL-acinguiuxDesignSystemTeam@acinguiux.com)
+
+---
+
+## Transpiling
+
+Transpiling documentation can be found in the [root README.md file](../../README.md).
+
+---
+
+> See root README here: https://github.com/acinguiux-ds-react-framework/README.md

package/build/esm/components/Card/Card.styles.js

@@ -2,14 +2,13 @@ import n, { css as o } from "styled-components";
 import { Directions as l, Sizes as s } from "../../react-base/src/consts.js";
 import { consts as t } from "../../react-base/src/components/Card/Card.consts.js";
 const c = n.div`
-  ${({ size: r, $elevated: a, $direction: d, $isClickable: e, theme: i }) => o`
+  ${({ size: r, $elevated: a, $direction: i, $isClickable: e, theme: d }) => o`
     display: flex;
-    flex-direction: ${d === l.Vertical ? "column" : "row"};
+    flex-direction: ${i === l.Vertical ? "column" : "row"};
     width: 100%;
-    background-color: ${i.onSurface.surface.default.background};
-    border: 1px solid ${i.onSurface.surface.default.border.subtle};
+    background-color: ${d.onSurface.surface.default.background};
+    border: 1px solid ${d.onSurface.surface.default.border.subtle};
     transition: box-shadow 0.3s ease;
-    overflow: hidden;
 
     ${r && o`
       border-radius: ${t[r].borderRadius};
@@ -17,7 +16,7 @@ const c = n.div`
 
     ${a && o`
       border: none;
-      box-shadow: ${i.elevation.level1};
+      box-shadow: ${d.elevation.level1};
     `}
 
     ${e && o`
@@ -26,16 +25,16 @@ const c = n.div`
       cursor: pointer;
 
       &:hover {
-        box-shadow: ${i.elevation.level2};
+        box-shadow: ${d.elevation.level2};
       }
     `}
 
     &:focus-visible {
-      outline: 3px solid ${i.additional.focus.subtle};
+      outline: 3px solid ${d.additional.focus.subtle};
     }
   `}
 `, $ = n(c)`
-  ${({ size: r = s.Medium, backgroundImage: a, $interactive: d }) => o`
+  ${({ size: r = s.Medium, backgroundImage: a, $interactive: i }) => o`
     overflow: hidden;
     position: relative;
     align-items: flex-end;
@@ -58,14 +57,14 @@ const c = n.div`
       transition: all 0.5s;
     }
 
-    ${d && o`
+    ${i && o`
       &:hover::before {
         transform: scale(1.05);
       }
     `}
   `}
 `, g = n.div`
-  ${({ size: r, padding: a, bgColor: d, theme: e }) => o`
+  ${({ size: r, padding: a, bgColor: i, theme: e }) => o`
     ${e.paragraph.medium.normal};
     display: grid;
     flex-grow: 1;
@@ -76,7 +75,7 @@ const c = n.div`
       padding: ${t[r].padding};
     `}
 
-    ${d && o`
+    ${i && o`
       background-color: ${e.onSurface.base.default.background};
     `}
 

package/build/esm/components/Table/components/TableElements/SorterButton.js

@@ -1,34 +1,54 @@
-import { jsx as r, jsxs as i, Fragment as a } from "react/jsx-runtime";
-import { forwardRef as s } from "react";
-import { useTable as n } from "../../hooks/useTable.js";
-import S from "../../../Icon/components/ArrowDown.js";
-import p from "../../../Icon/components/ArrowUp.js";
+import { jsx as r, jsxs as i, Fragment as n } from "react/jsx-runtime";
+import { forwardRef as c, useMemo as S } from "react";
+import u, { css as l } from "styled-components";
+import { useTable as p } from "../../hooks/useTable.js";
+import d from "../../../Icon/components/ArrowDown.js";
+import f from "../../../Icon/components/ArrowUp.js";
 import _ from "../../../Icon/components/ChevronUpDown.js";
-import { getSize as f } from "../../utils/tableUtils.js";
-import h from "../../../Button/Button.js";
-import { Sizes as A, TABLE_SORTER_BUTTON_CLASS as C, Variants as c, TABLE_ASC_ICON_CLASS as l, TABLE_DESC_ICON_CLASS as N, TABLE_NO_DIR_ICON_CLASS as T } from "../../../../react-base/src/consts.js";
-const I = s(
+import { getSize as h } from "../../utils/tableUtils.js";
+import m from "../../../Button/Button.js";
+import { Sizes as A, TABLE_SORTER_BUTTON_CLASS as C, TABLE_ASC_ICON_CLASS as N, TABLE_DESC_ICON_CLASS as T, Variants as b, TABLE_NO_DIR_ICON_CLASS as w } from "../../../../react-base/src/consts.js";
+const B = u(m)`
+  ${({ theme: o }) => l`
+    background-color: ${o.focus.extraSubtle};
+
+    &:hover:not(:disabled) {
+      background-color: ${o.focus.subtle};
+    }
+  `}
+`, $ = c(
   ({ sortDirection: o, ...t }, e) => {
-    const { size: m = A.Medium } = n();
-    return /* @__PURE__ */ r(
-      h,
-      {
+    const { size: s = A.Medium } = p(), a = S(
+      () => ({
         className: C,
         "aria-label": "Sorter button",
-        size: f(m),
-        variant: c.Transparent,
+        size: h(s),
         iconOnly: !0,
-        icon: /* @__PURE__ */ i(a, { children: [
-          o === "asc" && /* @__PURE__ */ r(p, { className: l, width: 16, height: 16 }),
-          o === "desc" && /* @__PURE__ */ r(S, { className: N, width: 16, height: 16 }),
-          !o && /* @__PURE__ */ r(_, { className: T, width: 16, height: 16 })
-        ] }),
         ref: e,
         ...t
+      }),
+      [s, e, t]
+    );
+    return o === "asc" || o === "desc" ? /* @__PURE__ */ r(
+      B,
+      {
+        icon: /* @__PURE__ */ i(n, { children: [
+          o === "asc" && /* @__PURE__ */ r(f, { className: N, width: 16, height: 16 }),
+          o === "desc" && /* @__PURE__ */ r(d, { className: T, width: 16, height: 16 })
+        ] }),
+        ...a
+      }
+    ) : /* @__PURE__ */ r(
+      m,
+      {
+        ...a,
+        variant: b.Transparent,
+        icon: /* @__PURE__ */ r(_, { className: w, width: 16, height: 16 }),
+        ...t
       }
     );
   }
 );
 export {
-  I as SorterButton
+  $ as SorterButton
 };

package/build/esm/react-base/src/components/Text/components/Display/Display.styles.js

@@ -1,15 +1,18 @@
 import { css as o } from "styled-components";
-import { consts as n } from "../Text/Text.consts.js";
-import { font as a } from "./Display.utils.js";
+import { consts as f } from "../Text/Text.consts.js";
+import { font as i } from "./Display.utils.js";
 const p = o`
-  ${({ theme: t, level: r, bold: m, gutter: s }) => o`
-    ${a(r, t, m)}
+  ${({ theme: t, level: m, bold: s, gutter: a, prominence: r }) => o`
+    ${i(m, t, s)}
     margin-top: 0;
     margin-bottom: 0;
-    color: ${t.onSurface.surface.default.text.strong};
 
-    ${s && o`
-      margin-bottom: ${n.gutter.display};
+    ${r && o`
+      color: ${t.onSurface.surface.default.text[r]};
+    `}
+
+    ${a && o`
+      margin-bottom: ${f.gutter.display};
     `}
   `}
 `;

package/build/esm/react-base/src/components/Text/components/Display/Display.utils.js

@@ -1,15 +1,16 @@
-import { TextElementTypes as e } from "../../../../consts.js";
-import { getType as p } from "../Text/Text.utils.js";
-const m = (n, r, o) => o ? r.display[n].demi : r.display[n].normal, a = ({ level: n = 1, type: r = e.Span, ...o }) => {
-  const t = p(r);
+import { TextElementTypes as p } from "../../../../consts.js";
+import { getType as s } from "../Text/Text.utils.js";
+const a = (r, n, o) => o ? n.display[r].demi : n.display[r].normal, f = ({ level: r = 1, prominence: n, type: o = p.Span, ...t }) => {
+  const e = s(o);
   return {
-    level: n,
-    type: r,
-    innerType: t,
-    ...o
+    level: r,
+    type: o,
+    innerType: e,
+    prominence: n,
+    ...t
   };
 };
 export {
-  m as font,
-  a as useProps
+  a as font,
+  f as useProps
 };

package/build/esm/react-base/src/components/Text/components/Heading/Heading.styles.js

@@ -1,9 +1,9 @@
 import { css as t } from "styled-components";
 import { consts as a } from "../Text/Text.consts.js";
-import { fontBold as r, fontNormal as c } from "./Heading.utils.js";
-const b = t`
-  ${({ innerLevel: o, gutter: m, bold: s, innerProminence: f, theme: $ }) => t`
-    ${s ? r(o, $) : c(o, $)}
+import { fontBold as s, fontNormal as c } from "./Heading.utils.js";
+const p = t`
+  ${({ innerLevel: o, gutter: m, bold: r, prominence: f, theme: $ }) => t`
+    ${r ? s(o, $) : c(o, $)}
     margin: unset;
 
     ${f && t`
@@ -24,5 +24,5 @@ const b = t`
   `}
 `;
 export {
-  b as Styles
+  p as Styles
 };

package/build/esm/react-base/src/components/Text/components/Heading/Heading.utils.js

@@ -1,26 +1,25 @@
-import { getType as g, getProminence as u } from "../Text/Text.utils.js";
+import { getType as f } from "../Text/Text.utils.js";
 import { TextElementTypes as i } from "../../../../consts.js";
-const s = [
+const g = [
   i.H1,
   i.H2,
   i.H3,
   i.H4,
   i.H5,
   i.H6
-], m = (n, r) => n === 1 || n === 2 || n === 3 || n === 4 ? r.heading[n].normal : r.heading[5].normal, p = (n, r) => n === 1 || n === 2 || n === 3 ? r.heading[n].demi : n === 4 ? r.heading[n].bold : r.heading[5].bold, T = ({ type: n = i.H1, prominence: r, level: o, ...a }) => {
-  const d = g(n), t = u(r), f = o || s.indexOf(n || i.H1) + 1 || 1;
+], H = (n, r) => n === 1 || n === 2 || n === 3 || n === 4 ? r.heading[n].normal : r.heading[5].normal, c = (n, r) => n === 1 || n === 2 || n === 3 ? r.heading[n].demi : n === 4 ? r.heading[n].bold : r.heading[5].bold, m = ({ type: n = i.H1, prominence: r, level: o, ...a }) => {
+  const d = f(n), t = o || g.indexOf(n || i.H1) + 1 || 1;
   return {
     ...a,
     type: n,
     prominence: r,
     innerType: d,
-    innerProminence: t,
-    innerLevel: f
+    innerLevel: t
   };
 };
 export {
-  s as allHeadings,
-  p as fontBold,
-  m as fontNormal,
-  T as useProps
+  g as allHeadings,
+  c as fontBold,
+  H as fontNormal,
+  m as useProps
 };

package/build/esm/react-base/src/components/Text/components/Label/Label.styles.js

@@ -1,16 +1,19 @@
 import { css as o } from "styled-components";
-import { consts as f } from "../Text/Text.consts.js";
-import { font as l } from "./Label.utils.js";
+import { consts as l } from "../Text/Text.consts.js";
+import { font as s } from "./Label.utils.js";
 const i = o`
-  ${({ size: r, innerProminence: m, gutter: a, bold: n, theme: t }) => o`
-    ${l(r, n ? "bold" : "normal", t)}
+  ${({ size: m, prominence: t, gutter: a, bold: f, theme: r }) => o`
+    ${s(m, f ? "bold" : "normal", r)}
 
     margin-top: 0;
     margin-bottom: 0;
-    color: ${t.onSurface.surface.default.text[m]};
+    
+    ${t && o`
+      color: ${r.onSurface.surface.default.text[t]};
+    `}
 
     ${a && o`
-      margin-bottom: ${f.gutter.label};
+      margin-bottom: ${l.gutter.label};
     `}
   `}
 `;

package/build/esm/react-base/src/components/Text/components/Label/Label.utils.js

@@ -1,26 +1,25 @@
-import { Sizes as n, TextElementTypes as u } from "../../../../consts.js";
-import { getType as s, getProminence as b } from "../Text/Text.utils.js";
-const c = (e, r, l) => e === n.XSmall ? l.label.extraSmall[r] : e === n.Small ? l.label.small[r] : e === n.Large ? l.label.large[r] : e === n.XLarge ? l.label.extraLarge[r === "bold" ? "demi" : "normal"] : l.label.medium[r], S = ({
-  size: e = n.Medium,
-  type: r = u.Span,
+import { Sizes as e, TextElementTypes as t } from "../../../../consts.js";
+import { getType as u } from "../Text/Text.utils.js";
+const b = (a, r, l) => a === e.XSmall ? l.label.extraSmall[r] : a === e.Small ? l.label.small[r] : a === e.Large ? l.label.large[r] : a === e.XLarge ? l.label.extraLarge[r === "bold" ? "demi" : "normal"] : l.label.medium[r], S = ({
+  size: a = e.Medium,
+  type: r = t.Span,
   prominence: l,
-  gutter: a = !1,
+  gutter: n = !1,
   bold: o = !1,
   ...m
 }) => {
-  const t = s(r), f = b(l);
+  const f = u(r);
   return {
     ...m,
-    size: e,
+    size: a,
     bold: o,
-    gutter: a,
+    gutter: n,
     type: r,
     prominence: l,
-    innerType: t,
-    innerProminence: f
+    innerType: f
   };
 };
 export {
-  c as font,
+  b as font,
   S as useProps
 };

package/build/esm/react-base/src/components/Text/components/Text/Text.utils.js

@@ -1,7 +1,6 @@
-import { css as p } from "styled-components";
-import { Prominences as g } from "acinguiux-ds-fabrics";
-import { Sizes as t, TextElementTypes as n } from "../../../../consts.js";
-const d = (r, a, e) => r === t.Small ? e.paragraph.small[a] : r === t.Large ? e.paragraph.large[a] : r === t.XLarge ? e.paragraph.extraLarge[a] : e.paragraph.medium[a], m = (r) => r || g.Strong, f = (r) => {
+import { css as s } from "styled-components";
+import { Sizes as p, TextElementTypes as n } from "../../../../consts.js";
+const m = (r, a, e) => r === p.Small ? e.paragraph.small[a] : r === p.Large ? e.paragraph.large[a] : r === p.XLarge ? e.paragraph.extraLarge[a] : e.paragraph.medium[a], g = (r) => {
   switch (r) {
     case "p":
       return n.Paragraph;
@@ -24,37 +23,35 @@ const d = (r, a, e) => r === t.Small ? e.paragraph.small[a] : r === t.Large ? e.
     default:
       return r;
   }
-}, h = (r, a) => p`
-  ${({ theme: e }) => p`
-    ${r === t.Small && e.paragraph.small[a]}
-    ${r === t.Medium && e.paragraph.medium[a]}
-    ${r === t.Large && e.paragraph.large[a]}
-    ${r === t.XLarge && e.paragraph.extraLarge[a]}
+}, L = (r, a) => s`
+  ${({ theme: e }) => s`
+    ${r === p.Small && e.paragraph.small[a]}
+    ${r === p.Medium && e.paragraph.medium[a]}
+    ${r === p.Large && e.paragraph.large[a]}
+    ${r === p.XLarge && e.paragraph.extraLarge[a]}
   `}
-`, i = ({
-  size: r = t.Medium,
+`, H = ({
+  size: r = p.Medium,
   type: a = n.Paragraph,
   prominence: e,
-  gutter: s = !1,
-  bold: u = !1,
-  ...c
+  gutter: u = !1,
+  bold: t = !1,
+  ...l
 }) => {
-  const o = f(a), l = m(e);
+  const c = g(a);
   return {
-    ...c,
+    ...l,
     size: r,
-    gutter: s,
-    bold: u,
+    gutter: u,
+    bold: t,
     type: a,
     prominence: e,
-    innerType: o,
-    innerProminence: l
+    innerType: c
   };
 };
 export {
-  d as font,
-  m as getProminence,
-  f as getType,
-  h as textFont,
-  i as useProps
+  m as font,
+  g as getType,
+  L as textFont,
+  H as useProps
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "acinguiux-ds-react-framework",
-  "version": "0.0.3",
+  "version": "0.0.4",
   "description": "Acinguiux UI Web Library",
   "main": "./build/esm/index.js",
   "module": "./build/esm/index.mjs",
@@ -12,6 +12,14 @@
     "package.json"
   ],
   "sideEffects": false,
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/acinguiux-ds-react-framework.git",
+    "directory": "packages/react-framework"
+  },
+  "author": {
+    "name": "Acinguiux"
+  },
   "homepage": "https://github.com/acinguiux-ds-react-framework#readme",
   "scripts": {
     "clean": "rimraf build",