aristid-ds 0.9.1 → 0.10.0

package/CHANGELOG.md

@@ -1,7 +1,45 @@
 # Changelog
 
-## [X.X.X](X) (202X-XX-XX)
+## [0.10.0](https://www.npmjs.com/package/aristid-ds/v/0.10.0) (2024-01-19)
 
+### ✨ Features
+  * **⚠️ Breaking change - Card:**
+    * Update visual render and properties (@Delmotte-Vincent)
+    * This `Card` aim to replace actual `Card` and `ItemCard`
+  * **⚠️ Breaking change - Collapse:**
+    * Update visual render (@philippechevieux)
+    * Update properties of `KitHeader` and `KitExtraHeader`
+  * **Notification:**
+    * Update visual render (@evoiron, @renaudAmsellem)
+  * **DataEntry components:**
+    * Update visual render of `hover` and `focus` state for all those components (@evoiron, @renaudAmsellem)
+  * **Antd components:**
+    * Export all components of `Ant Design`. Those components are now available in `aristid-ds`, all prefixed by `Ant` (eg `AntLayout`) (@evoiron)
+  * **Tree shaking:**
+    * All components are now tree shakable (@evoiron)
+
+### 🚨 Tests
+
+* **Chromatic:**
+  * Reduce number of snapshots (Group set of visual tests) (@fatb38)
+
+## [0.9.1](https://www.npmjs.com/package/aristid-ds/v/0.9.1) (2023-12-22)
+
+### 🐛 Bug Fixes
+
+* Fix types issues in `IKitLocale` that was causing build to crash (@fatb38)
+
+## [0.9.0](https://www.npmjs.com/package/aristid-ds/v/0.9.0) (2023-12-22)
+
+### 🎨 Theming
+
+* Improve performance when using multiple `KitApp` component (@Delmotte-Vincent, @evoiron, @fatb38, @philippechevieux)
+* Replace `css-in-js` theming variables by `css variables` (@Delmotte-Vincent, @evoiron, @fatb38, @philippechevieux)
+
+### 🤖 CI
+
+* Add `eslint` to CI pipeline (@evoiron)
+* Add a build to CI pipeline (@evoiron)
 
 ## [0.8.0](https://www.npmjs.com/package/aristid-ds/v/0.8.0) (2023-11-16)
 

package/README.md

@@ -491,7 +491,7 @@ We use Gitflow as Git branching model for this project. We have two branches to
 
 #### Feature
 
-<img src="public/images/gitflow-feature.png" alt="Logo" height="250px">
+<img src="http://storybook.aristid.com/public/images/gitflow-feature.png" alt="Logo" height="250px">
 
 Creating a feature branch
 
@@ -509,7 +509,7 @@ git flow feature finish addTooltipComponent
 
 #### Release
 
-<img src="public/images/gitflow-release.png" alt="Logo" height="250px">
+<img src="http://storybook.aristid.com/public/images/gitflow-release.png" alt="Logo" height="250px">
 
 Creating a release
 
@@ -527,7 +527,7 @@ git flow release finish '0.1.0'
 
 #### Hotfix
 
-<img src="public/images/gitflow-hotfix.png" alt="Logo" height="250px">
+<img src="http://storybook.aristid.com/public/images/gitflow-hotfix.png" alt="Logo" height="250px">
 
 Creating a release
 

package/dist/Kit/Ant/index.d.ts

@@ -0,0 +1,68 @@
+export { Affix as AntAffix } from "antd";
+export { Alert as AntAlert } from "antd";
+export { Anchor as AntAnchor } from "antd";
+export { App as AntApp } from "antd";
+export { AutoComplete as AntAutoComplete } from "antd";
+export { Avatar as AntAvatar } from "antd";
+export { BackTop as AntBackTop } from "antd";
+export { Badge as AntBadge } from "antd";
+export { Breadcrumb as AntBreadcrumb } from "antd";
+export { Button as AntButton } from "antd";
+export { Calendar as AntCalendar } from "antd";
+export { Card as AntCard } from "antd";
+export { Carousel as AntCarousel } from "antd";
+export { Cascader as AntCascader } from "antd";
+export { Checkbox as AntCheckbox } from "antd";
+export { Col as AntCol } from "antd";
+export { Collapse as AntCollapse } from "antd";
+export { ColorPicker as AntColorPicker } from "antd";
+export { ConfigProvider as AntConfigProvider } from "antd";
+export { DatePicker as AntDatePicker } from "antd";
+export { Descriptions as AntDescriptions } from "antd";
+export { Divider as AntDivider } from "antd";
+export { Drawer as AntDrawer } from "antd";
+export { Dropdown as AntDropdown } from "antd";
+export { Empty as AntEmpty } from "antd";
+export { Flex as AntFlex } from "antd";
+export { FloatButton as AntFloatButton } from "antd";
+export { Form as AntForm } from "antd";
+export { Grid as AntGrid } from "antd";
+export { Image as AntImage } from "antd";
+export { Input as AntInput } from "antd";
+export { InputNumber as AntInputNumber } from "antd";
+export { Layout as AntLayout } from "antd";
+export { List as AntList } from "antd";
+export { Mentions as AntMentions } from "antd";
+export { Menu as AntMenu } from "antd";
+export { Modal as AntModal } from "antd";
+export { Pagination as AntPagination } from "antd";
+export { Popconfirm as AntPopconfirm } from "antd";
+export { Popover as AntPopover } from "antd";
+export { Progress as AntProgress } from "antd";
+export { QRCode as AntQRCode } from "antd";
+export { Radio as AntRadio } from "antd";
+export { Rate as AntRate } from "antd";
+export { Result as AntResult } from "antd";
+export { Row as AntRow } from "antd";
+export { Segmented as AntSegmented } from "antd";
+export { Select as AntSelect } from "antd";
+export { Skeleton as AntSkeleton } from "antd";
+export { Slider as AntSlider } from "antd";
+export { Space as AntSpace } from "antd";
+export { Spin as AntSpin } from "antd";
+export { Statistic as AntStatistic } from "antd";
+export { Steps as AntSteps } from "antd";
+export { Switch as AntSwitch } from "antd";
+export { Table as AntTable } from "antd";
+export { Tabs as AntTabs } from "antd";
+export { Tag as AntTag } from "antd";
+export { TimePicker as AntTimePicker } from "antd";
+export { Timeline as AntTimeline } from "antd";
+export { Tooltip as AntTooltip } from "antd";
+export { Tour as AntTour } from "antd";
+export { Transfer as AntTransfer } from "antd";
+export { Tree as AntTree } from "antd";
+export { TreeSelect as AntTreeSelect } from "antd";
+export { Typography as AntTypography } from "antd";
+export { Upload as AntUpload } from "antd";
+export { Watermark as AntWatermark } from "antd";

package/dist/Kit/App/index.d.ts

@@ -6,4 +6,5 @@ export declare const KitApp: FunctionComponent<{
     locale?: IKitLocale;
     children?: ReactNode;
     id?: string;
+    includeFont?: boolean;
 }>;

package/dist/Kit/App/index.js

@@ -0,0 +1,27 @@
+import e, { useEffect as i } from "react";
+import { ConfigProvider as n } from "antd";
+import c from "../Feedback/SnackBar/SnackBarProvider.js";
+import { DropDownStyle as a } from "../Navigation/DropDown/style.js";
+import { SelectDropDownStyle as p } from "../DataEntry/Select/style.js";
+import { DatePickerDropDownStyle as f } from "../DataEntry/DatePicker/style.js";
+import { NotificationStyle as u } from "../Feedback/Notification/style.js";
+import { KitThemeProvider as E } from "../../theme/theme-context.js";
+import { TypographyStyle as d } from "../General/Typography/style.js";
+import { TabsDropDownStyle as y } from "../DataDisplay/Tabs/style.js";
+import { antdThemeConfig as S } from "../../theme/utils/tokens-mapper/index.js";
+import { KitLocaleProvider as K } from "../../translation/locale-context.js";
+import { mapKitLocaleToAntdLocale as D } from "../../translation/utils/index.js";
+import { ColorPickerPanelStyle as h } from "../DataEntry/ColorPicker/style.js";
+import { TourStyle as s } from "../DataDisplay/Tour/style.js";
+import { useKitLocale as P } from "../../translation/useKitLocale.js";
+import { KitNotificationProvider as T } from "../Feedback/Notification/notification-provider.js";
+import { KitFontStyle as v } from "../Font/index.js";
+const M = ({ children: r, locale: t, customTheme: l, id: o, includeFont: m = !0 }) => e.createElement(E, { customTheme: l, id: o }, e.createElement(K, null, e.createElement(L, { locale: t, includeFont: m }, r))), L = ({ children: r, locale: t, includeFont: l }) => {
+  const o = P().setKitLocale;
+  return i(() => {
+    t !== void 0 && o(t);
+  }, [t, o]), e.createElement(n, { theme: S, locale: D(t) }, e.createElement(T, null, l && e.createElement(v, null), e.createElement(c, null), e.createElement(h, null), e.createElement(a, null), e.createElement(p, null), e.createElement(y, null), e.createElement(f, null), e.createElement(u, null), e.createElement(d, null), e.createElement(s, null), r));
+};
+export {
+  M as KitApp
+};

package/dist/Kit/DataDisplay/Avatar/Avatar.js

@@ -0,0 +1,25 @@
+import c, { useMemo as p } from "react";
+import { Avatar as d } from "antd";
+import { styled as u } from "styled-components";
+import { useKitTheme as v } from "../../../theme/useKitTheme.js";
+import { isValidColor as y, getColor as f, isSecondaryColor as g, getLighterColor as C, getContrastColor as k } from "../../../utils/functions/index.js";
+import { kitAvatarCssTokens as a } from "../../../theme/aristid/components/DataDisplay/Avatar/index.js";
+import { kitColorsPaletteCssTokens as l } from "../../../theme/aristid/general/colors/index.js";
+const A = u(d)`
+    &:not(.ant-avatar-image) {
+        background: var(
+            ${a.colors.background.default},
+            var(${l.neutral.black60})
+        );
+        color: var(
+            ${a.colors.typography.default},
+            var(${l.neutral.typography.white})
+        );
+    }
+`, h = (o, r) => o && y(o) ? { [a.colors.background.default]: f(o, r), [a.colors.typography.default]: g(o) ? C(o, r) : k(o) } : null, s = ({ color: o, className: r, style: t, secondaryColorInvert: e = !1, ...m }) => {
+  var n = v().appId, i = p(() => ({ ...t, ...h(o, e) }), [o, e, t]);
+  return c.createElement(A, { style: i, className: n + " " + (r ?? ""), ...m });
+}, w = (s.displayName = "KitAvatar", s);
+export {
+  w as default
+};

package/dist/Kit/DataDisplay/Avatar/AvatarGroup.js

@@ -0,0 +1,29 @@
+import l from "react";
+import { Avatar as i } from "antd";
+import { useKitTheme as m } from "../../../theme/useKitTheme.js";
+import p, { css as u } from "styled-components";
+import { kitAvatarGroupCssTokens as a } from "../../../theme/aristid/components/DataDisplay/Avatar/index.js";
+import { kitColorsPaletteCssTokens as e } from "../../../theme/aristid/general/colors/index.js";
+const v = p(i.Group)`
+    ${({ $shouldOverrideLastAvatarStyle: r }) => r ? u`
+                  &.ant-avatar-group > span:last-child {
+                      background: var(
+                          ${a.colors.background.default},
+                          var(${e.primary.primary100})
+                      );
+                      color: var(
+                          ${a.colors.typography.default},
+                          var(
+                              ${a.colors.background.default},
+                              var(${e.primary.primary200})
+                          )
+                      );
+                  }
+              ` : void 0}
+`, c = ({ className: r, maxCount: o, ...t }) => {
+  var s = m().appId;
+  return l.createElement(v, { ...t, maxCount: o, $shouldOverrideLastAvatarStyle: !!o, className: s + " " + (r ?? ""), maxStyle: { cursor: t.maxPopoverTrigger === "click" ? "pointer" : "initial" } });
+}, $ = c;
+export {
+  $ as default
+};

package/dist/Kit/DataDisplay/Avatar/index.js

@@ -0,0 +1,7 @@
+import a from "./Avatar.js";
+import t from "./AvatarGroup.js";
+const r = a;
+r.displayName = "KitAvatar", r.Group = t;
+export {
+  r as KitAvatar
+};

package/dist/Kit/DataDisplay/Avatar/types.d.ts

@@ -2,7 +2,7 @@ import {AvatarProps} from 'antd';
 import {GroupProps} from 'antd/lib/avatar';
 import {KitHTMLAttributes} from '../../../types';
 import {FunctionComponent} from 'react';
-import {KitColorProp} from '@utils/functions/types';
+import {KitColorProp} from '../../../utils/functions/types';
 
 type AntdAvatarTypesToOmit = '';
 type AntdAvatarGroupTypesToOmit = 'maxStyle';

package/dist/Kit/DataDisplay/Badge/index.js

@@ -0,0 +1,44 @@
+import s, { useMemo as i } from "react";
+import { Badge as d } from "antd";
+import { styled as g } from "styled-components";
+import { useKitTheme as c } from "../../../theme/useKitTheme.js";
+import { isValidColor as m, getColor as p, getLighterColor as u } from "../../../utils/functions/index.js";
+import { kitBadgeCssTokens as r } from "../../../theme/aristid/components/DataDisplay/Badge/index.js";
+const y = g(d)`
+    height: 16px;
+    min-width: 16px;
+    line-height: 16px;
+    font-size: calc(var(--general-typography-fontSize7) * 1px);
+
+    .ant-badge-count {
+        background: var(--components-Badge-colors-background-default, var(--general-colors-secondary-red-red400));
+        color: var(--components-Badge-colors-typography-default, var(--general-colors-neutral-typography-white));
+    }
+
+    &.ant-badge {
+        .ant-badge-status-processing {
+            &.ant-scroll-number {
+                position: absolute;
+            }
+
+            &::after {
+                animation-name: none;
+                content: initial;
+            }
+
+            &.ant-badge-status-dot {
+                &::after {
+                    animation-name: none;
+                    content: initial;
+                }
+            }
+        }
+    }
+`, f = (o, e) => o && m(o) ? { [r.colors.background.default]: p(o, e), [r.colors.typography.default]: u(o, e) } : null, h = ({ color: o, style: e, secondaryColorInvert: t = !1, ...a }) => {
+  var n = c().appId, l = i(() => ({ ...e, ...f(o, t) }), [o, t, e]);
+  return s.createElement(y, { style: l, className: a.className + " " + n, ...a });
+};
+h.displayName = "KitBadge";
+export {
+  h as KitBadge
+};

package/dist/Kit/DataDisplay/Badge/types.d.ts

@@ -1,6 +1,6 @@
 import {BadgeProps} from 'antd';
 import {KitHTMLAttributes} from '../../../types';
-import {KitColorProp} from '@utils/functions/types';
+import {KitColorProp} from '../../../utils/functions/types';
 
 type AntdBadgeTypesToOmit = 'color' | 'size' | 'offset' | 'text';
 

package/dist/Kit/DataDisplay/Card/index.d.ts

@@ -1,3 +1,3 @@
 import { FunctionComponent } from 'react';
-import IKitCard from './types';
+import { IKitCard } from './types';
 export declare const KitCard: FunctionComponent<IKitCard>;

package/dist/Kit/DataDisplay/Card/index.js

@@ -0,0 +1,188 @@
+import e from "react";
+import { styled as G } from "styled-components";
+import N from "classnames";
+import { kitColorsPaletteCssTokens as t } from "../../../theme/aristid/general/colors/index.js";
+import { typographyCssTokens as i } from "../../../theme/aristid/general/typography/index.js";
+import { spacingCssTokens as b } from "../../../theme/aristid/general/spacing/index.js";
+import { FontAwesomeIcon as T } from "@fortawesome/react-fontawesome";
+import { faEllipsis as S } from "@fortawesome/free-solid-svg-icons";
+import { kitCardCssTokens as r } from "../../../theme/aristid/components/DataDisplay/Card/index.js";
+import { useKitTheme as z } from "../../../theme/useKitTheme.js";
+import { convertToPixel as d } from "../../../theme/utils/convert.js";
+import { KitCheckbox as K } from "../../DataEntry/Checkbox/index.js";
+import { KitSwitch as F } from "../../DataEntry/Switch/index.js";
+import { KitButton as c } from "../../General/Button/index.js";
+import { KitDropDown as W } from "../../Navigation/DropDown/index.js";
+import { KitTag as B } from "../Tag/index.js";
+import { KitTypography as n } from "../../General/Typography/index.js";
+const I = G.div`
+    display: flex;
+    flex-direction: column;
+    border-radius: 10px;
+    overflow: hidden;
+    background-color: var(
+        ${r.colors.background.default},
+        var(${t.neutral.white})
+    );
+    border: 1px solid
+        var(
+            ${r.colors.border.default},
+            var(${t.secondary.mediumGrey.mediumGrey200})
+        );
+    margin: 2px;
+    box-shadow: 0px 3px 8px 0px rgba(0, 0, 0, 0.1);
+    width: 300px;
+
+    &.kit-card-disabled {
+        background-color: var(
+            ${r.colors.background.disabled},
+            var(${t.secondary.mediumGrey.mediumGrey100})
+        );
+        .kit-card-picture {
+            border-color: var(
+                ${r.colors.separator.disabled},
+                var(${t.secondary.mediumGrey.mediumGrey400})
+            );
+        }
+
+        .kit-card-content {
+            .kit-card-title {
+                color: var(
+                    ${r.colors.typography.title.disabled},
+                    var(${t.secondary.mediumGrey.mediumGrey400})
+                );
+            }
+            .kit-card-description {
+                color: var(
+                    ${r.colors.typography.description.disabled},
+                    var(${t.secondary.mediumGrey.mediumGrey400})
+                );
+            }
+            .kit-card-extra {
+                color: var(
+                    ${r.colors.typography.extra.disabled},
+                    var(${t.secondary.mediumGrey.mediumGrey400})
+                );
+            }
+        }
+    }
+
+    &.kit-card-selected {
+        margin: 0;
+        border: 3px solid
+            var(${r.colors.border.selected}, var(${t.primary.primary400}));
+    }
+
+    .kit-card-content {
+        grid-area: content;
+        display: flex;
+        flex-direction: column;
+        gap: ${d(b.xs)};
+        padding: ${d(b.s)};
+
+        .kit-card-title {
+            font-size: ${d(r.typography.title.fontSize, i.fontSize3)};
+            font-weight: var(
+                ${r.typography.title.fontWeight},
+                var(${i.boldFontWeight})
+            );
+            color: var(
+                ${r.colors.typography.title.default},
+                var(${t.primary.primary400})
+            );
+        }
+
+        .kit-card-description {
+            font-size: ${d(r.typography.description.fontSize, i.fontSize5)};
+            font-weight: var(
+                ${r.typography.description.fontWeight},
+                var(${i.regularFontWeight})
+            );
+            color: var(
+                ${r.colors.typography.description.default},
+                var(${t.secondary.mediumGrey.mediumGrey600})
+            );
+        }
+
+        .kit-card-extra {
+            font-size: ${d(r.typography.extra.fontSize, i.fontSize4)};
+            font-weight: var(
+                ${r.typography.extra.fontWeight},
+                var(${i.boldFontWeight})
+            );
+            color: var(
+                ${r.colors.typography.extra.default},
+                var(${t.primary.primary400})
+            );
+        }
+    }
+
+    .kit-card-picture {
+        display: flex;
+        justify-content: center;
+        height: 200px;
+        padding: 10px;
+        overflow: hidden;
+        position: relative;
+        border-bottom: 4px solid
+            ${({ $brandingBar: o }) => o ? `var(${r.colors.separator.default}, var(${t.primary.primary400}))` : "transparent"};
+
+        img {
+            height: 100%;
+            transition-duration: 500ms;
+            transition-property: transform;
+        }
+
+        .kit-card-checkbox {
+            position: absolute;
+            top: 10px;
+            left: 10px;
+        }
+
+        .kit-card-switch {
+            position: absolute;
+            top: 10px;
+            right: 10px;
+        }
+
+        .kit-card-buttons {
+            position: absolute;
+            bottom: 10px;
+            right: 10px;
+            display: flex;
+            flex-direction: column;
+            gap: 8px;
+        }
+    }
+
+    &:focus:not(.kit-card-disabled),
+    &:focus-visible:not(.kit-card-disabled),
+    &:focus-within:not(.kit-card-disabled) {
+        margin: 0;
+        border: 3px solid
+            var(${r.colors.border.focus}, var(${t.primary.primary200}));
+        outline: none;
+    }
+
+    &:hover:not(.kit-card-disabled) {
+        margin: 0;
+        border: 3px solid
+            var(${r.colors.border.hover}, var(${t.primary.primary400}));
+
+        .kit-card-picture {
+            border-color: transparent;
+
+            img {
+                transform: scale(1.3);
+            }
+        }
+    }
+`, A = ({ actions: o, description: s, className: h, style: v, title: l, extra: m, previewSrc: x, tags: p, onActivate: y, onSelect: g, brandingBar: k = !1, selected: f = !1, activated: $ = !1, disabled: a = !1 }) => {
+  const E = z().appId;
+  var C = o && 2 < o.length, w = o && o.length <= 2;
+  return e.createElement(I, { tabIndex: a ? -1 : 0, className: N(h, E, { "kit-card-selected": f, "kit-card-disabled": a }), style: v, $brandingBar: k }, e.createElement("div", { className: "kit-card-picture" }, e.createElement("img", { src: x ?? "public/images/no-preview.png" }), g && e.createElement(K, { className: "kit-card-checkbox", onChange: g, checked: f, disabled: a }), y && e.createElement(F, { className: "kit-card-switch", onChange: y, checked: $, disabled: a }), e.createElement("div", { className: "kit-card-buttons" }, w && e.createElement(e.Fragment, null, o.map((u) => e.createElement(c, { type: "segmented", icon: u.icon, onClick: u.onClick, disabled: a }))), C && e.createElement(e.Fragment, null, e.createElement(c, { type: "segmented", icon: o[0].icon, onClick: o[0].onClick, disabled: a }), e.createElement(W, { menu: { items: o.slice(1) }, disabled: a }, e.createElement(c, { type: "segmented", icon: e.createElement(T, { icon: S }) }))))), e.createElement("div", { className: "kit-card-content" }, p && e.createElement(B.Group, { tags: p }), l && e.createElement(n.Text, { className: "kit-card-title" }, l), s && e.createElement(n.Text, { className: "kit-card-description" }, s), m && e.createElement(n.Text, { className: "kit-card-extra", ellipsis: { tooltip: !0 } }, m)));
+};
+A.displayName = "KitCard";
+export {
+  A as KitCard
+};

package/dist/Kit/DataDisplay/Card/types.d.ts

@@ -1,31 +1,32 @@
-import {CardProps} from 'antd';
+import {CSSProperties, ReactNode} from 'react';
+import {IKitTagConfig} from '../../DataDisplay/Tag/types';
+import {CheckboxChangeEvent} from 'antd/lib/checkbox';
+import {SwitchChangeEventHandler} from 'antd/lib/switch';
 
-type AntdCardTypesToOmit =
-    | 'size'
-    | 'type'
-    | 'bordered'
-    | 'bodyStyle'
-    | 'hoverable'
-    | 'tabProps'
-    | 'tabList'
-    | 'defaultActiveTabKey'
-    | 'tabBarExtraContent'
-    | 'onTabChange';
-
-export default interface IKitCard extends Omit<CardProps, AntdCardTypesToOmit> {
+export interface IKitCard {
+    title: string;
+    actions?: IKitCardAction[];
+    activated?: boolean;
+    brandingBar?: boolean;
+    className?: string;
+    description?: string;
+    extra?: string;
+    style?: CSSProperties;
     disabled?: boolean;
-    contentTitle?: string;
-    contentDescription?: string;
-    separator?: boolean;
-    onContentTitleClick?: () => void;
+    previewSrc?: string;
+    onActivate?: SwitchChangeEventHandler;
+    onSelect?: (e: CheckboxChangeEvent) => void;
+    selected?: boolean;
+    tags?: IKitTagConfig[];
 }
 
-export interface IStyledKitCard {
-    $disabled: boolean;
-    $separator: boolean;
+export interface IKitCardAction {
+    key: string;
+    label: string;
+    icon: ReactNode;
+    onClick: (e: unknown) => void;
 }
 
-export interface IStyledKitCardContentTitleContainer {
-    $isContentTitleClick: boolean;
-    $disabled: boolean;
+export interface IStyledKitCard {
+    $brandingBar: boolean;
 }