@ubloimmo/uikit 0.1.0-beta.0

package/README.md

@@ -0,0 +1,19 @@
+# @ubloimmo/uikit `v0.0.1`
+
+Ublo's global uikit library.
+
+## Contents
+
+- Global theme
+- Fonts
+- Layouts
+- Components
+- Utils
+
+## Documentation
+
+Documentation, usage examples and API references are available [online](https://ublo.ublo.org/design-system).
+
+## Changelog
+
+For a (mostly) exhaustive changelog, refer to [CHANGELOG.md](https://github.com/UbloImmo/front-ui/blob/main/CHANGELOG.md).

package/README.template.md

@@ -0,0 +1,87 @@
+# @ubloimmo/front-lib-boilerplate
+
+Template repository to create Internal library and private NPM package.
+
+## Prerequisites
+- [Bun](https://bun.sh)
+
+## Includes
+
+### Github actions
+This template comes with two pre-configured github workflows to your life easier:
+
+- publish.yml :
+  - Increments the package revision
+  - Builds the package using the `bun run build`
+  - Publishes it to the NPM Registry
+  - Commits the build and new version to `main`
+  - Triggers a release
+- release.yml :
+  - Bundles the build directory (`/lib`) in a zip file based on the current version
+  - Authors a new github release
+
+### Typescript
+
+Bun comes with typescript support out of the box.
+
+Some basic utility types are also included.
+
+### Utils
+
+- Config validator
+- Logger
+
+## Getting started
+
+1. Fork this repository or select it as a starting template when creating a new repository.
+
+
+2. Go to your new repository's secrets settings and add the following values.
+
+- `NPM_TOKEN`: Personal access token generated in your [account settings](https://docs.npmjs.com/creating-and-viewing-access-tokens).
+
+3. Clone and navigate to your new repository.
+
+```bash
+git clone <my repository>
+cd <my repository name>  
+```
+
+4. Edit `package.json` with your package information.
+
+```bash
+# nano
+nano package.json
+# neovim
+nvim package.json
+# vscode
+code package.json
+# webstorm
+webstorm package.json
+```
+- `name`: your package's name
+- `description`: your package description
+- `author`: your name and npm email
+- `homepage`: your repository's URL
+- `repository.url`: your repository's URL
+- `scripts.build`: a script to build your package before publishing it
+
+5. **Start writing your package !** :rocket:
+
+## Publishing your package
+
+### Before publishing your package
+
+Make sure to replace this README.md file with documentation about your package.
+
+### Triggering the publishing workflow
+
+Once you're satisfied with the current state of your package and have committed it to / merged it onto the `main` branch, you'll want to publish it.
+
+To publish your package to the NPM registry:
+1. Navigate to the *Actions* tab of your repository
+2. Select `NPM Publish` in the side menu
+3. Click on `Run workflow` in the dark blue banner
+4. Wait for it to finish
+
+**Note**: Upon successful publishing to NPM, the `Relase create` workflow will automatically run.

package/dist/_virtual/jsx-runtime.js

@@ -0,0 +1,12 @@
+/**
+* @ubloimmo/uikit version 0.1.0-beta.0
+*
+* © Ublo 2024
+* https://ublo.immo
+*/
+
+
+var e = { exports: {} };
+export {
+  e as __module
+};

package/dist/_virtual/react-jsx-runtime.development.js

@@ -0,0 +1,12 @@
+/**
+* @ubloimmo/uikit version 0.1.0-beta.0
+*
+* © Ublo 2024
+* https://ublo.immo
+*/
+
+
+var e = {};
+export {
+  e as __exports
+};

package/dist/_virtual/react-jsx-runtime.production.min.js

@@ -0,0 +1,12 @@
+/**
+* @ubloimmo/uikit version 0.1.0-beta.0
+*
+* © Ublo 2024
+* https://ublo.immo
+*/
+
+
+var r = {};
+export {
+  r as __exports
+};

package/dist/components/Badge/Badge.component.d.ts

@@ -0,0 +1,18 @@
+import { BadgeProps, DefaultBadgeProps } from './Badge.types';
+
+export declare const defaultBadgeProps: DefaultBadgeProps;
+/**
+ * Renders a Badge component, with an optionnal Icon and a required Text.
+ *
+ * Badge shades are based on two sets of colors, light and dark, depending on the shade prop.
+ *
+ * @version 0.0.2
+ *
+ * @param {BadgeProps} props - the props for the Badge component
+ * @return {JSX.Element} the Badge component
+ */
+declare const Badge: {
+    (props: BadgeProps): JSX.Element;
+    defaultProps: Required<BadgeProps>;
+};
+export { Badge };

package/dist/components/Badge/Badge.component.js

@@ -0,0 +1,47 @@
+/**
+* @ubloimmo/uikit version 0.1.0-beta.0
+*
+* © Ublo 2024
+* https://ublo.immo
+*/
+
+
+import { j as t } from "../../node_modules/react/jsx-runtime.js";
+import { useMemo as S } from "react";
+import u from "styled-components";
+import { backgroundShade as x, grayBadgeShadeStyleMap as f, badgeShadeStyleMap as h } from "./Badge.styles.js";
+import { Icon as C } from "../Icon/Icon.component.js";
+import { Text as b } from "../Text/Text.component.js";
+import "@ubloimmo/front-util";
+import { useMergedProps as P, useStyleProps as j } from "../../utils/props.utils.js";
+const s = {
+  label: "label",
+  icon: null,
+  color: "primary",
+  shade: "light"
+}, $ = (a) => {
+  const r = P(s, a), { color: o, shade: e, label: i, icon: l } = r, n = j(r), { iconColorStyle: d, textColorStyle: c } = S(() => {
+    const { iconColor: m, textColor: p } = o === "gray" ? f[e] : h[e], g = `${o}-${m}`, y = `${o}-${p}`;
+    return { iconColorStyle: g, textColorStyle: y };
+  }, [o, e]);
+  return /* @__PURE__ */ t.jsxs(B, { "data-testid": "badge", ...n, children: [
+    l && /* @__PURE__ */ t.jsx(
+      C,
+      {
+        "data-testid": "badge-icon",
+        color: d,
+        name: l,
+        size: "s-3"
+      }
+    ),
+    /* @__PURE__ */ t.jsx(b, { size: "s", color: c, weight: "medium", children: i })
+  ] });
+};
+$.defaultProps = s;
+const B = u.div`
+  ${x}
+`;
+export {
+  $ as Badge,
+  s as defaultBadgeProps
+};

package/dist/components/Badge/Badge.styles.d.ts

@@ -0,0 +1,6 @@
+import { StyleProps, ValueMap } from '../../types';
+import { BadgeShade, BadgeShadeStyle, DefaultBadgeProps } from './Badge.types';
+
+export declare const badgeShadeStyleMap: ValueMap<BadgeShade, BadgeShadeStyle>;
+export declare const grayBadgeShadeStyleMap: ValueMap<BadgeShade, BadgeShadeStyle>;
+export declare const backgroundShade: (props: StyleProps<DefaultBadgeProps>) => import('styled-components').RuleSet<object>;

package/dist/components/Badge/Badge.styles.js

@@ -0,0 +1,55 @@
+/**
+* @ubloimmo/uikit version 0.1.0-beta.0
+*
+* © Ublo 2024
+* https://ublo.immo
+*/
+
+
+import { css as t } from "styled-components";
+import "@ubloimmo/front-util";
+import "react";
+import { fromStyleProps as d } from "../../utils/props.utils.js";
+const l = {
+  light: {
+    textColor: "dark",
+    backgroundColor: "light",
+    iconColor: "base"
+  },
+  dark: {
+    textColor: "light",
+    backgroundColor: "dark",
+    iconColor: "medium"
+  }
+}, i = {
+  light: {
+    textColor: "800",
+    backgroundColor: "50",
+    iconColor: "800"
+  },
+  dark: {
+    textColor: "50",
+    backgroundColor: "700",
+    iconColor: "100"
+  }
+}, C = (a) => {
+  const { color: o, shade: r } = d(a), { backgroundColor: e } = o === "gray" ? i[r] : l[r];
+  return t`
+    border: 1px solid var(--${o}-${o === "gray" ? "300" : "medium"});
+    background-color: var(--${o}-${e});
+    padding: 0 var(--s-2);
+    border-radius: var(--s-1);
+    gap: var(--s-1);
+    display: flex;
+    align-items: center;
+    height: var(--s-5);
+    max-height: var(--s-5);
+    min-height: var(--s-5);
+    user-select: none;
+  `;
+};
+export {
+  C as backgroundShade,
+  l as badgeShadeStyleMap,
+  i as grayBadgeShadeStyleMap
+};

package/dist/components/Badge/Badge.types.d.ts

@@ -0,0 +1,44 @@
+import { ColorKey, DefaultPaletteColorShadeKey, Enum, GrayscalePaletteColorShadeKey } from '../../types';
+import { IconName } from '../Icon/Icon.types';
+import { Nullable } from '@ubloimmo/front-util';
+
+declare const badgeShades: readonly ["light", "dark"];
+export type BadgeShade = Enum<typeof badgeShades>;
+export type BadgeProps = {
+    /**
+     * The label of the Badge
+     *
+     * @required
+     * @type {string}
+     * @default undefined
+     */
+    label: string;
+    /**
+     * Optional icon to display inside the Badge
+     *
+     * @type {IconName}
+     */
+    icon?: Nullable<IconName>;
+    /**
+     * The dominant color of the Badge
+     *
+     * @type {ColorKey}
+     * @default "primary"
+     */
+    color?: ColorKey;
+    /**
+     * The badge's shade
+     * Determines its background, text and icon colors according to the `color` prop
+     *
+     * @type {BadgeShade}
+     * @default "light"
+     */
+    shade?: BadgeShade;
+};
+export type DefaultBadgeProps = Required<BadgeProps>;
+export type BadgeShadeStyle = {
+    textColor: DefaultPaletteColorShadeKey | GrayscalePaletteColorShadeKey;
+    backgroundColor: DefaultPaletteColorShadeKey | GrayscalePaletteColorShadeKey;
+    iconColor: DefaultPaletteColorShadeKey | GrayscalePaletteColorShadeKey;
+};
+export {};

package/dist/components/Badge/index.d.ts

@@ -0,0 +1,2 @@
+export * from './Badge.component';
+export * from './Badge.types';

package/dist/components/Button/Button.component.d.ts

@@ -0,0 +1,16 @@
+import { ButtonProps, DefaultButtonProps } from './Button.types';
+import { Nullable } from '@ubloimmo/front-util';
+
+/**
+ * A simple, clickable, responsive & accessible button.
+ *
+ * @version 0.0.1
+ *
+ * @param {ButtonProps} props - the button's props
+ * @returns {Nullable<JSX.Element>} the rendered button
+ */
+declare const Button: {
+    (props: ButtonProps): Nullable<JSX.Element>;
+    defaultProps: DefaultButtonProps;
+};
+export { Button };

package/dist/components/Button/Button.component.js

@@ -0,0 +1,68 @@
+/**
+* @ubloimmo/uikit version 0.1.0-beta.0
+*
+* © Ublo 2024
+* https://ublo.immo
+*/
+
+
+import { j as e } from "../../node_modules/react/jsx-runtime.js";
+import { isNull as y } from "@ubloimmo/front-util";
+import { useCallback as B, useMemo as u } from "react";
+import d from "styled-components";
+import { buildButtonStyles as h, buildButtonLoadingContainerStyles as x } from "./Button.styles.js";
+import { Icon as j } from "../Icon/Icon.component.js";
+import { Loading as C } from "../Loading/Loading.component.js";
+import { Text as P } from "../Text/Text.component.js";
+import { useLogger as k } from "../../utils/log.utils.js";
+import { useMergedProps as S, useStyleProps as L } from "../../utils/props.utils.js";
+const m = {
+  type: "button",
+  color: "primary",
+  label: null,
+  title: "",
+  role: "button",
+  icon: null,
+  iconPlacement: "left",
+  secondary: !1,
+  disabled: !1,
+  loading: !1,
+  onClick: null
+}, v = (c) => {
+  const { warn: p } = k("Button"), o = S(
+    m,
+    c
+  ), i = L(o), f = B(() => {
+    o.disabled || o.loading || y(o.onClick) || o.onClick();
+  }, [o]), { label: t, icon: n, disabled: l, title: r, role: s, type: g } = o, a = u(() => r && r.length > 0 ? r : t ?? void 0, [r, t]), b = u(() => s ?? "button", [s]);
+  return !n && !t || !n && (t == null ? void 0 : t.length) === 0 ? (p(
+    "Button must have at least a label and / or an icon. Both are missing"
+  ), null) : /* @__PURE__ */ e.jsxs(
+    z,
+    {
+      ...i,
+      type: g,
+      "data-testid": "button",
+      onClick: f,
+      disabled: l,
+      "aria-disabled": l,
+      title: a,
+      "aria-label": a,
+      role: b,
+      children: [
+        n && /* @__PURE__ */ e.jsx(j, { name: n, size: "1rem" }),
+        t && t.length > 0 && /* @__PURE__ */ e.jsx(P, { size: "m", weight: "medium", children: t }),
+        /* @__PURE__ */ e.jsx(w, { ...i, children: /* @__PURE__ */ e.jsx(C, { animation: "BouncingBalls", size: "s-3" }) })
+      ]
+    }
+  );
+};
+v.defaultProps = m;
+const z = d.button`
+  ${h}
+`, w = d.div`
+  ${x}
+`;
+export {
+  v as Button
+};

package/dist/components/Button/Button.styles.d.ts

@@ -0,0 +1,6 @@
+import { RuleSet } from 'styled-components';
+import { StyleProps } from '../../types';
+import { DefaultButtonProps } from './Button.types';
+
+export declare const buildButtonStyles: (styledProps: StyleProps<DefaultButtonProps>) => RuleSet;
+export declare const buildButtonLoadingContainerStyles: ({ $loading, }: StyleProps<Pick<DefaultButtonProps, "loading">>) => RuleSet;

package/dist/components/Button/Button.styles.js

@@ -0,0 +1,267 @@
+/**
+* @ubloimmo/uikit version 0.1.0-beta.0
+*
+* © Ublo 2024
+* https://ublo.immo
+*/
+
+
+import { transformObject as b, objectFromEntries as p, objectEntries as g } from "@ubloimmo/front-util";
+import { css as a } from "styled-components";
+import { breakpointsPx as y } from "../../sizes/breakpoints.js";
+import { cssVarUsage as s } from "../../utils/css.utils.js";
+import "react";
+import { fromStyleProps as m } from "../../utils/props.utils.js";
+const v = {
+  primary: {
+    default: {
+      background: "gray-900",
+      content: "gray-100"
+    },
+    hover: {
+      background: "gray-800"
+    }
+  },
+  secondary: {
+    default: {
+      content: "gray-900",
+      border: "gray-900"
+    },
+    hover: {
+      background: "gray-100"
+    }
+  }
+}, h = {
+  primary: {
+    default: {
+      background: "gray-50",
+      content: "gray-900"
+    },
+    hover: {
+      background: "primary-light"
+    }
+  },
+  secondary: {
+    default: {
+      content: "gray-900",
+      border: "gray-50"
+    },
+    hover: {
+      background: "primary-light"
+    }
+  }
+}, f = {
+  primary: {
+    default: {
+      content: "primary-base"
+    },
+    hover: {
+      content: "primary-dark"
+    }
+  },
+  secondary: {
+    default: {
+      content: "gray-600"
+    },
+    hover: {
+      content: "gray-800"
+    }
+  }
+}, l = (t) => ({
+  primary: {
+    default: {
+      background: `${t}-base`,
+      content: "gray-50"
+    },
+    hover: {
+      background: `${t}-dark`
+    }
+  },
+  secondary: {
+    default: {
+      border: `${t}-base`,
+      content: `${t}-dark`,
+      icon: `${t}-base`
+    },
+    hover: {
+      icon: `${t}-dark`,
+      background: `${t}-light`,
+      border: `${t}-dark`
+    }
+  }
+}), $ = {
+  black: v,
+  white: h,
+  clear: f,
+  primary: l("primary"),
+  red: l("error")
+}, u = ({
+  color: t,
+  secondary: o
+}) => {
+  const r = $[t][o ? "secondary" : "primary"];
+  let n = b(
+    r.default,
+    (e) => e ? s(e) : null
+  );
+  n = {
+    ...n,
+    icon: n.icon ?? n.content
+  };
+  const c = p(
+    g({
+      ...r.hover,
+      icon: r.hover.icon ?? r.hover.content
+    }).map(([e, i]) => [
+      e,
+      i ? s(i) : n[e] ?? null
+    ])
+  );
+  return (e, i) => {
+    const d = n[e] ?? "transparent";
+    return i ? c[e] ?? d : d;
+  };
+}, k = (t) => {
+  const o = u(t);
+  return a`
+    background-color: ${o("background")};
+    color: ${o("content")};
+    border-color: ${o("border")};
+
+    span {
+      color: ${o("content")};
+    }
+
+    svg {
+      fill: ${o("icon")};
+
+      path {
+        fill: inherit;
+      }
+    }
+
+    &:hover:not(:disabled) {
+      background-color: ${o("background", !0)};
+      color: ${o("content", !0)};
+      border-color: ${o("border", !0)};
+
+      span {
+        color: ${o("content", !0)};
+      }
+
+      svg {
+        fill: ${o("icon", !0)};
+      }
+    }
+  `;
+}, z = ({
+  iconPlacement: t,
+  label: o,
+  color: r
+}) => a`
+  --button-size: var(--s-8);
+  --padding-vertical: calc(var(--button-size) / 4);
+  --padding-horizontal-label: calc(var(--button-size) / 2);
+  --padding-horizontal: ${o ? s("padding-horizontal-label") : s("padding-vertical")};
+  padding: var(--padding-vertical) var(--padding-horizontal);
+  height: var(--button-size);
+  max-height: var(--button-size);
+  min-height: var(--button-size);
+  font-size: var(--text-m);
+  border-radius: calc(var(--button-size) / 2);
+  cursor: pointer;
+  display: flex;
+  flex-direction: ${t === "right" ? "row-reverse" : "row"};
+  align-items: center;
+  justify-content: center;
+  gap: var(--s-2);
+  border-width: 1px;
+  border-style: solid;
+  box-shadow: ${r === "clear" ? "none" : "var(--shadow-button)"};
+  transition: color 300ms ease-out 0s, background-color 300ms ease-out 0s,
+    border-color 300ms ease-out 0s;
+
+  & > span {
+    transition: color 300ms ease-out 0s;
+  }
+
+  & > svg[data-testid="icon"] {
+    transition: fill 300ms ease-out 0s;
+  }
+
+  &:focus {
+    outline: none;
+  }
+
+  &:hover {
+    transition-duration: 150ms;
+
+    svg,
+    span {
+      transition-duration: 150ms;
+    }
+  }
+
+  &:disabled,
+  &:disabled:hover {
+    cursor: not-allowed;
+    opacity: 0.33;
+    box-shadow: none;
+  }
+
+  // fix width if only icon
+  &:has([data-testid="icon"]):not(:has(span[data-testid="text"])) {
+    width: var(--button-size);
+    max-width: var(--button-size);
+    min-width: var(--button-size);
+  }
+
+  @media only screen and (max-width: ${y.XS}) {
+    --button-size: var(--s-13);
+    --padding-vertical: var(--s-4);
+    --padding-horizontal-label: var(--s-6);
+    gap: var(--s-3);
+  }
+`, w = ({
+  loading: t,
+  color: o,
+  secondary: r
+}) => {
+  const n = t ? 0 : 1, c = u({ color: o, secondary: r });
+  return a`
+    position: relative;
+
+    & > span,
+    & > svg[data-testid="icon"] {
+      transition: opacity 150ms ease-in-out 0s;
+      opacity: ${n};
+    }
+
+    ${t && a`
+      cursor: progress;
+      background: ${c("background", !0)};
+    `}
+  `;
+}, O = (t) => {
+  const o = m(t);
+  return a`
+    ${z(o)}
+    ${k(o)}
+    ${w(o)}
+  `;
+}, D = ({
+  $loading: t
+}) => a`
+    position: absolute;
+    inset: 0;
+    opacity: ${t ? 1 : 0};
+    transition: opacity 150ms ease-out ${t ? 150 : 0}ms;
+    pointer-events: ${t ? "all" : "none"};
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  `;
+export {
+  D as buildButtonLoadingContainerStyles,
+  O as buildButtonStyles
+};