@udixio/ui-react 0.0.1 → 0.1.0

package/src/lib/styles/switch.style.ts

@@ -0,0 +1,51 @@
+import { classNames, defaultClassNames } from '../utils';
+import { SwitchInterface } from '../interfaces/switch.interface';
+
+export const switchStyle = defaultClassNames<SwitchInterface>(
+  'switch',
+  ({ isSelected, disabled, inactiveIcon }) => ({
+    switch: classNames(
+      'group w-[52px] h-[32px] outline-none rounded-full  border-2 flex items-center',
+
+      { 'bg-on-surface/[0.12] border-transparent': disabled },
+      !disabled && [
+        'cursor-pointer ',
+        { 'bg-primary  border-primary': isSelected },
+        { 'bg-surface-container border-outline': !isSelected },
+      ]
+
+      // { 'justify-start': !isSelected },
+      // { 'justify-end': isSelected },
+    ),
+    handleContainer: classNames(
+      'flex items-center justify-center absolute',
+      { 'left-[14px]': !isSelected },
+      { 'right-[14px]': isSelected }
+    ),
+    handle: classNames(
+      'transition-all duration-100  z-10 rounded-full  flex items-center justify-center',
+      { 'w-[16px] h-[16px]': !isSelected && !inactiveIcon },
+      { 'w-[24px] h-[24px]': !(!isSelected && !inactiveIcon) },
+      !disabled && [
+        'cursor-pointer group-active:h-[28px] group-active:w-[28px]',
+        { 'bg-on-primary group-hover:bg-primary-container': isSelected },
+        { 'bg-outline group-hover:bg-on-surface-variant': !isSelected },
+      ],
+
+      { 'bg-surface': disabled }
+    ),
+    handleStateLayer: classNames(
+      'w-[40px] h-[40px] -z-10 rounded-full absolute',
+      { 'group-state-primary': !disabled }
+    ),
+    icon: classNames(
+      'w-[16px] h-[16px]',
+      !disabled && [
+        { 'text-on-primary-container': isSelected },
+        { 'text-on-primary': !isSelected },
+      ],
+
+      { 'text-on-surface/[0.38]': disabled }
+    ),
+  })
+);

package/src/lib/styles/tab.style.ts

@@ -0,0 +1,68 @@
+import { classNames } from '../utils';
+import { TabInterface } from '../interfaces/tab.interface';
+import { defaultClassNames } from '../utils/styles/get-classname';
+
+export const tabStyle = defaultClassNames<TabInterface>(
+  'tab',
+  ({ isSelected, icon, label, variant }) => ({
+    tab: classNames(
+      'bg-surface flex-1 group outline-none flex px-4 justify-center items-center cursor-pointer',
+      { 'z-10': isSelected },
+      Boolean(icon && label) && variant === 'primary' && 'h-16',
+      !(Boolean(icon && label) && variant === 'primary') && 'h-12',
+    ),
+    stateLayer: classNames(
+      'absolute w-full h-full overflow-hidden left-1/2 top-1/2 transform -translate-y-1/2 -translate-x-1/2',
+      variant === 'primary' && {
+        'group-hover:hover-state-on-surface group-focus-visible:focus-state-on-surface':
+          !isSelected,
+        'group-hover:hover-state-primary group-focus-visible:focus-state-primary':
+          isSelected,
+      },
+      variant === 'secondary' &&
+        'group-hover:hover-state-on-surface group-focus-visible:focus-state-on-surface',
+    ),
+    content: classNames(
+      'flex  gap-0.5 h-full justify-center',
+      {
+        relative: variant == 'primary',
+      },
+      {
+        '': Boolean(label && !icon),
+      },
+
+      variant === 'primary' && 'flex-col items-center',
+      variant === 'secondary' && {
+        'flex-col items-center': Boolean(!(label && icon)),
+        'flex-row items-center gap-2': Boolean(label && icon),
+      },
+    ),
+    icon: classNames(
+      'h-6 w-6 p-0.5 !box-border',
+      variant === 'primary' && {
+        'text-on-surface-variant': !isSelected,
+        'text-primary': isSelected,
+      },
+      variant === 'secondary' && {
+        'text-on-surface-variant': !isSelected,
+        'text-on-surface': isSelected,
+      },
+    ),
+    label: classNames(
+      'text-title-small  text-nowrap',
+      variant === 'primary' && {
+        'text-on-surface-variant': !isSelected,
+        'text-primary': isSelected,
+      },
+      variant === 'secondary' && {
+        'text-on-surface-variant': !isSelected,
+        'text-on-surface': isSelected,
+      },
+    ),
+    underline: classNames(
+      'bg-primary  absolute w-full left-0 bottom-0',
+      variant === 'primary' && 'h-[3px] rounded-t',
+      variant === 'secondary' && 'h-0.5',
+    ),
+  }),
+);

package/src/lib/styles/tabs.style.ts

@@ -0,0 +1,13 @@
+import { TabsInterface } from '../interfaces/tabs.interface';
+import { classNames, defaultClassNames } from '../utils';
+
+export const tabsStyle = defaultClassNames<TabsInterface>(
+  'tabs',
+  ({ scrollable }) => ({
+    tabs: classNames(
+      'border-b border-surface-container-highest',
+      'flex relative ',
+      { 'overflow-x-auto': scrollable }
+    ),
+  })
+);

package/src/lib/styles/text-field.style.ts

@@ -0,0 +1,104 @@
+import React from 'react';
+import { classNames } from '../utils';
+import { TextFieldInterface } from '../interfaces/text-field.interface';
+import { defaultClassNames } from '../utils/styles/get-classname';
+
+export const textFieldStyle = defaultClassNames<TextFieldInterface>(
+  'textField',
+  ({
+    disabled,
+    leadingIcon,
+    trailingIcon,
+    variant,
+    errorText,
+    isFocused,
+    value,
+    suffix,
+    textLine,
+  }) => ({
+    textField: classNames({
+      'opacity-[.38]': disabled,
+    }),
+    content: classNames(
+      'group  transition-border duration-200 relative  flex  items-center ',
+      { 'h-14': textLine == 'singleLine' },
+      {
+        'border-on-surface-variant':
+          !errorText?.length && !isFocused && variant == 'filled',
+        'border-outline':
+          !errorText?.length && !isFocused && variant == 'outlined',
+        'border-primary': !errorText?.length && isFocused,
+        'border-error': !!errorText?.length,
+      },
+      { 'bg-on-surface/[0.04]': disabled },
+      variant == 'filled' && [
+        'rounded-t overflow-hidden border-b',
+        { 'bg-surface-container-highest': !disabled },
+      ],
+
+      variant == 'outlined' && [
+        'border rounded box-border',
+        {
+          'border-[3px]': isFocused,
+        },
+      ]
+    ),
+    stateLayer: classNames(
+      'absolute -z-10 w-full h-full top-0 left-0',
+      {
+        hidden: variant == 'outlined',
+      },
+      {
+        'group-state-on-surface': !disabled,
+        'focus-state-on-surface': isFocused,
+      }
+    ),
+    label: classNames(
+      'inline-flex outline-none  whitespace-nowrap',
+      { 'text-on-surface-variant': !disabled && !errorText?.length },
+      { 'text-on-surface': disabled },
+      { 'text-error': !!errorText?.length },
+      { 'text-primary': !errorText?.length && isFocused }
+    ),
+    input: classNames(
+      'w-full resize-none px-4 text-body-large bg-[inherit] outline-none autofill:transition-colors autofill:duration-[5000000ms]',
+      {
+        ' text-on-surface placeholder:text-on-surface-variant': !disabled,
+        'placeholder:text-on-surface text-on-surface': disabled,
+      },
+      {
+        'pr-0': !!suffix,
+      },
+      variant == 'filled' && ' pb-2 pt-6',
+      variant == 'outlined' && 'py-4 relative z-10'
+    ),
+    activeIndicator: classNames(
+      'absolute w-0 inset-x-0 border-rounded mx-auto bottom-0',
+      variant == 'filled' && [
+        'h-[2px] transition-all duration-300',
+        { 'bg-primary': !errorText?.length },
+        { 'bg-error': !!errorText?.length },
+        { '!w-full': isFocused },
+      ]
+    ),
+    supportingText: classNames(
+      ' text-body-small px-4 pt-1',
+      { 'text-on-surface-variant': !disabled && !errorText?.length },
+      { 'text-on-surface': disabled },
+      { '!w-full': isFocused },
+      { 'text-error': !!errorText?.length }
+    ),
+    leadingIcon: classNames([
+      'h-12 ml-3 flex items-center justify-center',
+      { 'cursor-text': !React.isValidElement(leadingIcon) },
+    ]),
+    trailingIcon: classNames('h-12 w-12 flex items-center justify-center', {
+      'cursor-text': !React.isValidElement(trailingIcon),
+    }),
+    suffix: classNames(
+      'text-on-surface-variant pl-0 pr-4',
+      variant == 'filled' && ' pb-2 pt-6',
+      variant == 'outlined' && 'py-4 relative z-10'
+    ),
+  })
+);

package/src/lib/styles/tooltip.style.ts

@@ -0,0 +1,37 @@
+import { classNames, defaultClassNames } from '../utils';
+import { ToolTipInterface } from '../interfaces/tooltip.interface';
+
+export const toolStyle = defaultClassNames<ToolTipInterface>(
+  'toolTip',
+  ({ position, variant }) => ({
+    toolTip: classNames(
+      ' pointer-events-auto w-max z-10  absolute  m-1 w-max-content max-w-[312px]',
+      {
+        'bottom-full left-1/2 -translate-x-1/2': position == 'top',
+        'top-full left-1/2 -translate-x-1/2': position == 'bottom',
+        'right-full top-1/2 -translate-y-1/2': position == 'left',
+        'left-full top-1/2 -translate-y-1/2': position == 'right',
+        'bottom-full right-full': position == 'top-left',
+        'bottom-full left-full': position == 'top-right',
+        'top-full right-full': position == 'bottom-left',
+        'top-full left-full': position == 'bottom-right',
+      }
+    ),
+    container: classNames(
+      'pb-2',
+      variant == 'rich' &&
+        'bg-surface-container rounded-2xl text-on-surface-container px-4 pt-3 shadow-2',
+      variant == 'plain' &&
+        'bg-inverse-surface rounded text-inverse-on-surface px-2 py-1'
+    ),
+    actions: classNames(
+      'flex gap-10 px-1 mt-2',
+      variant == 'plain' && 'hidden'
+    ),
+    subHead: classNames(
+      'text-title-small mb-1',
+      variant == 'plain' && 'hidden'
+    ),
+    supportingText: classNames(''),
+  })
+);

package/src/lib/utils/component-helper.ts

@@ -0,0 +1,134 @@
+import { StyleProps } from './styles';
+import { ComponentInterface } from './component';
+
+export interface HTMLElements {
+  a: HTMLAnchorElement;
+  abbr: HTMLElement;
+  address: HTMLElement;
+  area: HTMLAreaElement;
+  article: HTMLElement;
+  aside: HTMLElement;
+  audio: HTMLAudioElement;
+  b: HTMLElement;
+  base: HTMLBaseElement;
+  bdi: HTMLElement;
+  bdo: HTMLElement;
+  big: HTMLElement;
+  blockquote: HTMLQuoteElement;
+  body: HTMLBodyElement;
+  br: HTMLBRElement;
+  button: HTMLButtonElement;
+  canvas: HTMLCanvasElement;
+  caption: HTMLElement;
+  center: HTMLElement;
+  cite: HTMLElement;
+  code: HTMLElement;
+  col: HTMLTableColElement;
+  colgroup: HTMLTableColElement;
+  data: HTMLDataElement;
+  datalist: HTMLDataListElement;
+  dd: HTMLElement;
+  del: HTMLModElement;
+  details: HTMLDetailsElement;
+  dfn: HTMLElement;
+  dialog: HTMLDialogElement;
+  div: HTMLDivElement;
+  dl: HTMLDListElement;
+  dt: HTMLElement;
+  em: HTMLElement;
+  embed: HTMLEmbedElement;
+  fieldset: HTMLFieldSetElement;
+  figcaption: HTMLElement;
+  figure: HTMLElement;
+  footer: HTMLElement;
+  form: HTMLFormElement;
+  h1: HTMLHeadingElement;
+  h2: HTMLHeadingElement;
+  h3: HTMLHeadingElement;
+  h4: HTMLHeadingElement;
+  h5: HTMLHeadingElement;
+  h6: HTMLHeadingElement;
+  head: HTMLHeadElement;
+  header: HTMLElement;
+  hgroup: HTMLElement;
+  hr: HTMLHRElement;
+  html: HTMLHtmlElement;
+  i: HTMLElement;
+  iframe: HTMLIFrameElement;
+  img: HTMLImageElement;
+  input: HTMLInputElement;
+  ins: HTMLModElement;
+  kbd: HTMLElement;
+  keygen: HTMLElement;
+  label: HTMLLabelElement;
+  legend: HTMLLegendElement;
+  li: HTMLLIElement;
+  link: HTMLLinkElement;
+  main: HTMLElement;
+  map: HTMLMapElement;
+  mark: HTMLElement;
+  menu: HTMLElement;
+  menuitem: HTMLElement;
+  meta: HTMLMetaElement;
+  meter: HTMLMeterElement;
+  nav: HTMLElement;
+  noindex: HTMLElement;
+  noscript: HTMLElement;
+  object: HTMLObjectElement;
+  ol: HTMLOListElement;
+  optgroup: HTMLOptGroupElement;
+  option: HTMLOptionElement;
+  output: HTMLOutputElement;
+  p: HTMLParagraphElement;
+  param: HTMLParamElement;
+  picture: HTMLElement;
+  pre: HTMLPreElement;
+  progress: HTMLProgressElement;
+  q: HTMLQuoteElement;
+  rp: HTMLElement;
+  rt: HTMLElement;
+  ruby: HTMLElement;
+  s: HTMLElement;
+  samp: HTMLElement;
+  search: HTMLElement;
+  slot: HTMLSlotElement;
+  script: HTMLScriptElement;
+  section: HTMLElement;
+  select: HTMLSelectElement;
+  small: HTMLElement;
+  source: HTMLSourceElement;
+  span: HTMLSpanElement;
+  strong: HTMLElement;
+  style: HTMLStyleElement;
+  sub: HTMLElement;
+  summary: HTMLElement;
+  sup: HTMLElement;
+  table: HTMLTableElement;
+  template: HTMLTemplateElement;
+  tbody: HTMLTableSectionElement;
+  td: HTMLTableDataCellElement;
+  textarea: HTMLTextAreaElement;
+  tfoot: HTMLTableSectionElement;
+  th: HTMLTableHeaderCellElement;
+  thead: HTMLTableSectionElement;
+  time: HTMLTimeElement;
+  title: HTMLTitleElement;
+  tr: HTMLTableRowElement;
+  track: HTMLTrackElement;
+  u: HTMLElement;
+  ul: HTMLUListElement;
+  var: HTMLElement;
+  video: HTMLVideoElement;
+  wbr: HTMLElement;
+  webview: HTMLWebViewElement;
+}
+
+// export type MotionComponentProps<
+//   Props extends object,
+//   States extends object,
+//   Elements extends string,
+//   ElementType extends keyof HTMLElements,
+// > = ComponentProps<Props, States, Elements, ElementType> &
+//   Omit<HTMLMotionProps<ElementType>, 'ref' | 'className'>;
+
+export type ComponentClassName<T extends ComponentInterface> = StyleProps<T>;

package/src/lib/utils/component.ts

@@ -0,0 +1,34 @@
+import { JSX } from 'react/jsx-runtime';
+import React from 'react';
+import { ComponentClassName, HTMLElements } from './component-helper';
+import { HTMLMotionProps } from 'motion/react';
+
+export type ReactProps<T extends ComponentInterface> = Omit<
+  JSX.IntrinsicElements[T['type']],
+  keyof T['props'] | 'className'
+> &
+  ComponentClassName<T> & {
+    ref?: React.RefObject<HTMLElements[T['type']] | null>;
+  } & T['props'];
+
+export type MotionProps<T extends ComponentInterface> = ReactProps<T> &
+  HTMLMotionProps<T['type']>;
+
+export interface LinkInterface<Props> {
+  type: 'a';
+  props: Props & { href?: string };
+}
+
+export interface ActionInterface<Props> {
+  type: 'button';
+  props: Props & { href?: never };
+}
+
+export type ActionOrLink<Props> = LinkInterface<Props> | ActionInterface<Props>;
+
+export interface ComponentInterface {
+  type: keyof HTMLElements;
+  props?: object;
+  states?: object;
+  elements: string[];
+}

package/src/lib/utils/index.ts

@@ -0,0 +1,7 @@
+export * from './component-helper';
+export * from './component';
+export * from './component';
+export * from './component';
+export * from './component';
+export * from './component';
+export * from './styles';

package/src/lib/utils/string.ts

@@ -0,0 +1,9 @@
+export function convertToKebabCase(text: string) {
+  return text
+    .replace(/([a-z])([A-Z])/g, '$1-$2') // Gérer les transitions camelCase (ajouter un tiret entre les lettres)
+    .toLowerCase() // Convertir tout en minuscules
+    .normalize('NFD') // Décomposer les caractères accentués
+    .replace(/[\u0300-\u036f]/g, '') // Supprimer les accents (diacritics)
+    .replace(/[^a-z0-9]+/g, '-') // Remplacer les caractères non-alphanumériques par des tirets
+    .replace(/^-+|-+$/g, ''); // Supprimer les tirets en début/fin
+}

package/src/lib/utils/styles/classnames.ts

@@ -0,0 +1,49 @@
+import { ClassValue, clsx } from 'clsx';
+import { extendTailwindMerge } from 'tailwind-merge';
+
+type AdditionalClassGroupIds = 'font';
+
+const twMerge = extendTailwindMerge<AdditionalClassGroupIds>({
+  override: {
+    classGroups: {
+      'text-color': [
+        {
+          text: [
+            (value: string) =>
+              !value.startsWith('display-') &&
+              !value.startsWith('headline-') &&
+              !value.startsWith('title-') &&
+              !value.startsWith('body-') &&
+              !value.startsWith('label-'),
+          ],
+        },
+      ],
+    },
+  },
+  extend: {
+    classGroups: {
+      font: [
+        {
+          text: [
+            (value: string) =>
+              value.startsWith('display-') ||
+              value.startsWith('headline-') ||
+              value.startsWith('title-') ||
+              value.startsWith('body-') ||
+              value.startsWith('label-'),
+          ],
+        },
+      ],
+    },
+    conflictingClassGroups: {
+      font: ['font'],
+    },
+  },
+});
+
+export const classNames = (...args: ClassValue[]) => {
+  return twMerge(clsx(args));
+};
+export const classnames = (...args: ClassValue[]) => {
+  return twMerge(clsx(args));
+};

package/src/lib/utils/styles/get-classname.ts

@@ -0,0 +1,73 @@
+import { ComponentInterface } from '../component';
+import { convertToKebabCase } from '../string';
+import { classnames } from './classnames';
+
+type RequiredNullable<T> = {
+  [K in keyof T]-?: any;
+};
+
+export interface StyleProps<T extends ComponentInterface> {
+  className?: string | ClassNameComponent<T>;
+}
+
+export type ClassNameComponent<T extends ComponentInterface> = (
+  states: T['states'] & T['props'],
+) => Partial<Record<T['elements'][number], string>>;
+
+export const getClassNames = <T extends ComponentInterface>(args: {
+  classNameList: (ClassNameComponent<T> | string | undefined)[];
+  default: T['elements'][0];
+  states: T['states'] & T['props'];
+}): Record<T['elements'][number], string> => {
+  const classNames: Partial<Record<T['elements'][number], string[]>> = {};
+  args.classNameList.forEach((classNameComponent) => {
+    if (classNameComponent) {
+      if (typeof classNameComponent == 'string') {
+        (classNames[args.default] ??= []).push(classNameComponent);
+      } else {
+        const result = classNameComponent(args.states);
+        Object.entries(result).map((argsElement) => {
+          const [key, value] = argsElement as [T['elements'][number], string];
+          (classNames[key] ??= []).push(value);
+        });
+      }
+    }
+  });
+
+  const result = classNames as unknown as Record<T['elements'][number], string>;
+
+  Object.entries(classNames).map((argsElement) => {
+    // eslint-disable-next-line prefer-const
+    let [key, value] = argsElement as [T['elements'][number], string[]];
+
+    value = value.reverse();
+
+    if (key == args.default) {
+      value.unshift('relative');
+    }
+
+    value.unshift(convertToKebabCase(key));
+
+    result[key] = classnames(...value);
+  });
+
+  return result;
+};
+
+export const defaultClassNames = <T extends ComponentInterface>(
+  element: T['elements'][0],
+  defaultClassName: ClassNameComponent<T> | string,
+) => {
+  return (
+    states: RequiredNullable<T['props']> &
+      T['props'] &
+      T['states'] & {
+        className: ClassNameComponent<T> | string | undefined;
+      },
+  ) =>
+    getClassNames({
+      classNameList: [states.className, defaultClassName],
+      default: element,
+      states,
+    });
+};

package/src/lib/utils/styles/index.ts

@@ -0,0 +1,3 @@
+export * from './classnames';
+export * from './classnames';
+export * from './get-classname';

package/src/stories/action/button.stories.tsx

@@ -0,0 +1,86 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import {
+  Button,
+  ButtonInterface,
+  IconButtonInterface,
+  ReactProps,
+} from '../../';
+import { faPlus } from '@fortawesome/free-solid-svg-icons';
+
+// More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+const meta = {
+  title: 'Action/Button',
+  component: Button,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/react/configure/story-layout
+  },
+  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/react/writing-docs/autodocs
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {
+    type: { table: { disable: true } },
+    icon: { table: { disable: true } },
+    disabled: { table: { disable: true } },
+  },
+} satisfies Meta<typeof Button>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/react/writing-stories/args
+
+const createButtonStory = (variant: ReactProps<ButtonInterface>['variant']) => {
+  const sizes: ReactProps<IconButtonInterface>['size'][] = [
+    'xSmall',
+    'small',
+    'medium',
+    'large',
+    'xLarge',
+  ];
+
+  const ButtonStory: Story = (
+    args: Pick<ReactProps<ButtonInterface>, 'label'>,
+  ) => (
+    <div className="">
+      {sizes.map((size) => (
+        <div className="flex m-4 gap-4 items-center justify-around">
+          <Button {...args} size={size} disabled={false} />
+          <Button {...args} size={size} shape={'squared'} disabled={false} />
+          <Button {...args} size={size} disabled={true} />
+          <Button {...args} size={size} shape={'squared'} disabled={true} />
+        </div>
+      ))}
+      {sizes.map((size) => (
+        <div className="flex m-4 gap-4 items-center justify-around">
+          <Button {...args} icon={faPlus} size={size} disabled={false} />
+          <Button
+            {...args}
+            icon={faPlus}
+            size={size}
+            shape={'squared'}
+            disabled={false}
+          />
+          <Button {...args} icon={faPlus} size={size} disabled={true} />
+          <Button
+            {...args}
+            icon={faPlus}
+            size={size}
+            shape={'squared'}
+            disabled={true}
+          />
+        </div>
+      ))}
+    </div>
+  );
+  ButtonStory.args = {
+    label: 'Label',
+    variant: variant,
+    onClick: () => console.log('click'),
+  };
+  return ButtonStory;
+};
+export const Filled = createButtonStory('filled');
+export const Outlined = createButtonStory('outlined');
+export const Text = createButtonStory('text');
+export const Elevated = createButtonStory('elevated');
+export const Tonal = createButtonStory('filledTonal');