@logora/debate 0.1.0

package/README.md

@@ -0,0 +1,90 @@
+# Logora UI
+
+---
+Design system for [Logora](https://logora.fr) made with React.
+
+This repository is now running with open source tooling (pnpm, Vitest, Storybook).
+
+## Public API contract
+
+This package exposes a hybrid public API with two supported import styles:
+
+### 1) Root API (default)
+
+```js
+import { Button, Modal, useAuth } from "@logora/debate";
+```
+
+Use this style by default for developer experience and discoverability.
+
+### 2) Subpath API (supported)
+
+```js
+import { Button } from "@logora/debate/action/button";
+import { Modal } from "@logora/debate/dialog/modal";
+import { useAuth } from "@logora/debate/auth/use_auth";
+```
+
+Use this style when you want explicit module-level imports in performance-sensitive areas.
+
+### Tree-shaking guarantees
+
+- JavaScript modules are tree-shakable with named ESM imports.
+- Root imports are supported and expected to be tree-shaken by modern bundlers.
+- Subpath imports remain available for strict control over dependency boundaries.
+- Avoid namespace imports if tree-shaking matters:
+
+```js
+// Avoid for bundle size-sensitive code
+import * as Debate from "@logora/debate";
+```
+
+### Styles contract
+
+- Components include their own styles (CSS Modules).
+- Consumers should not need to import an extra global CSS file for standard component usage.
+- Package `sideEffects` is limited to `*.css` and `*.scss` to preserve JS tree-shaking.
+
+### Compatibility policy
+
+- Paths exposed through package exports are public API.
+- Root exports and documented subpaths follow semantic versioning.
+- Internal files not exposed by package exports are private and may change without notice.
+
+### Deprecation policy
+
+- Breaking API changes are introduced only in major versions.
+- Deprecated exports should be announced before removal.
+- During deprecation windows, keep both old and new imports when possible.
+
+## Installation
+
+### Install dependencies
+
+```bash
+pnpm install
+```
+
+## Run Storybook
+
+```bash
+pnpm storybook
+```
+
+## Test components
+
+```bash
+pnpm test
+```
+
+## Coverage
+
+```bash
+pnpm test:coverage
+```
+
+## Build Storybook
+
+```bash
+pnpm build-storybook
+```

package/package.json

@@ -0,0 +1,101 @@
+{
+  "name": "@logora/debate",
+  "version": "0.1.0",
+  "license": "AGPL-3.0",
+  "description": "Design system of @Logora made with React",
+  "main": "./src/index.js",
+  "sideEffects": [
+    "**/*.css",
+    "**/*.scss"
+  ],
+  "exports": {
+    ".": "./src/index.js",
+    "./*": "./src/components/*/index.js",
+    "./*/*": "./src/components/*/*/index.js",
+    "./styles/*": "./src/components/styles/*"
+  },
+  "author": "Logora <contact@logora.fr>",
+  "scripts": {
+    "dev": "storybook dev -p 6006",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test": "vitest run",
+    "test:watch": "vitest",
+    "test:coverage": "vitest run --coverage"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/Logora/interface.git"
+  },
+  "engines": {
+    "node": ">=18.0"
+  },
+  "keywords": [
+    "ui",
+    "design-system",
+    "react",
+    "logora",
+    "debate"
+  ],
+  "bugs": {
+    "url": "https://github.com/Logora/interface/issues"
+  },
+  "homepage": "https://github.com/Logora/interface#readme",
+  "dependencies": {
+    "@lexical/headless": "^0.38.2",
+    "@lexical/html": "^0.38.2",
+    "@lexical/list": "^0.38.2",
+    "@lexical/overflow": "^0.38.2",
+    "@lexical/react": "^0.38.2",
+    "@lexical/rich-text": "^0.38.2",
+    "@lexical/selection": "^0.38.2",
+    "@lexical/utils": "^0.38.2",
+    "@rooks/use-localstorage-state": "^4.11.2",
+    "@rooks/use-previous": "^4.11.2",
+    "@rooks/use-sessionstorage-state": "^4.11.2",
+    "axios": "^1.11.0",
+    "chart.js": "^4.5.1",
+    "chartjs-plugin-datalabels": "^2.2.0",
+    "classnames": "^2.5.1",
+    "dompurify": "^3.3.3",
+    "flat": "^5.0.2",
+    "lexical": "^0.38.2",
+    "path-to-regexp": "^6.3.0",
+    "prop-types": "^15.8.1",
+    "react-chartjs-2": "^5.3.1",
+    "react-copy-to-clipboard": "^5.1.1",
+    "react-hot-toast": "^2.4.1",
+    "react-intl": "^7.0.1",
+    "react-loading-skeleton": "^3.5.0",
+    "react-modern-drawer": "^1.4.0",
+    "react-oauth-popup": "^1.0.5",
+    "react-router": "^6.29.0",
+    "react-router-dom": "^6.29.0",
+    "use-debounce": "^10.0.4",
+    "use-onclickoutside": "^0.4.1",
+    "webfontloader": "^1.6.28"
+  },
+  "devDependencies": {
+    "@faker-js/faker": "^10.4.0",
+    "@storybook/addon-a11y": "^10.3.5",
+    "@storybook/react": "^10.3.5",
+    "@storybook/react-vite": "^10.3.5",
+    "@testing-library/dom": "^10.4.0",
+    "@testing-library/jest-dom": "^6.8.0",
+    "@testing-library/react": "^16.3.2",
+    "@testing-library/user-event": "^14.5.2",
+    "@vitejs/plugin-react": "^6.0.1",
+    "@vitest/coverage-v8": "^4.1.3",
+    "jsdom": "^29.0.2",
+    "sass": "^1.85.0",
+    "storybook": "^10.3.5",
+    "vite": "^8.0.7",
+    "vitest": "^4.1.3"
+  },
+  "peerDependencies": {
+    "react": "^17.0.0 || ^18.0.0",
+    "react-dom": "^17.0.0 || ^18.0.0",
+    "react-router": "^6.29.0",
+    "react-router-dom": "^6.29.0"
+  }
+}

package/src/components/action/back_link/BackLink.docs.mdx

@@ -0,0 +1,25 @@
+---
+description: A back link component.
+labels: ['link', 'back-link', 'react-router']
+---
+
+import { BackLink } from './BackLink';
+
+A button that opens a link with back arrow and text.
+Props can be passed to the underlying [Link](https://bit.cloud/logora/debate/action/link) component to have an external link or a link from react-router.
+
+It should be inside [IconProvider](https://bit.cloud/logora/debate/icons/icon_provider).
+
+
+### Component usage
+
+```js
+import { BackLink } from '@logora/debate.action.back_link';
+```
+
+```js
+<BackLink
+    to="https://example.com/source-link"
+    text="Back to article"
+/>
+```

package/src/components/action/back_link/BackLink.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { Link } from '@logora/debate/action/link';
+import { Icon } from "@logora/debate/icons/icon";
+import cx from 'classnames';
+import styles from './BackLink.module.scss';
+import PropTypes from "prop-types";
+
+export const BackLink = ({ to, text, external = true, className, ...rest }) => {
+    return (
+        <Link to={to} className={cx(className, styles.backLink)} external={external} {...rest}>
+            <Icon name="arrow" height={24} width={24} />
+            <span className={styles.arrowIcon}>
+                { text }
+            </span>
+        </Link>
+    );
+}
+
+BackLink.propTypes = {
+    /** href, or object passed to the link */
+    to: PropTypes.any.isRequired,
+    /** Link text */
+    text: PropTypes.string.isRequired,
+    /** If `true`, will render a plain anchor tag instead of react-router's Link */
+    external: PropTypes.bool,
+    /**  Class name to style the link */
+    className: PropTypes.string,
+    /** Extra props passed to the link */
+    rest: PropTypes.object
+};

package/src/components/action/back_link/BackLink.module.scss

@@ -0,0 +1,34 @@
+@use 'styles/theme' as theme;
+@use 'styles/spacing' as spacing;
+
+a.backLink {
+    display: flex !important;
+    align-items: center !important;
+    font-weight: theme.$font-weight-normal;
+    font-size: theme.$font-size-small;
+    color: theme.$text-secondary;
+    text-decoration: none !important;
+    svg {
+        fill: theme.$text-secondary;
+        fill-rule: evenodd;
+    }
+    &:hover {
+        color: theme.$text-primary;
+        text-decoration: none;
+    
+        svg {
+            fill: theme.$text-primary;
+            fill-rule: evenodd;
+        }
+    }
+    &:focus {
+        border: none;
+    }
+    &:active {
+        border: none;
+    }
+}
+
+.arrowIcon {
+    @include spacing.ml(2, xs);
+}

package/src/components/action/back_link/BackLink.stories.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { BackLink } from './BackLink';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+export default {
+    title: 'Action/Back Link',
+    component: BackLink,
+    args: {
+        to: '#',
+        text: 'Back to article'
+    },
+    argTypes: {
+        to: {
+            control: 'text'
+        },
+        text: {
+            control: 'text'
+        }
+    },
+    render: (args) => (
+        <IconProvider library={regularIcons}>
+            <BackLink {...args} />
+        </IconProvider>
+    )
+};
+
+export const DefaultBackLink = {};

package/src/components/action/back_link/BackLink.test.jsx

@@ -0,0 +1,105 @@
+import React from 'react';
+import { render, screen, fireEvent } from '@testing-library/react';
+import { BackLink } from './BackLink';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+
+describe('BackLink', () => {
+    it('should render with correct text', () => {
+        const container = render(
+            <IconProvider library={regularIcons}>
+                <BackLink text='Back to source' to='https://example.com/share-link' />
+            </IconProvider>
+        );
+        expect(screen.getByText('Back to source')).toBeTruthy();
+    });
+
+    it('should render with correct link', () => {
+        const container = render(
+            <IconProvider library={regularIcons}>
+                <BackLink text='Back to source' to='https://example.com/share-link' />
+            </IconProvider>
+        );
+        const link = screen.getByRole('link');
+        expect(link).toHaveAttribute('href', 'https://example.com/share-link');
+    });
+
+    it('should call onClick handler', () => {
+        const onClick = vi.fn();
+        render(
+            <IconProvider library={regularIcons}>
+                <BackLink
+                    text='Back to source'
+                    to='https://example.com/share-link'
+                    onClick={onClick}
+                />
+            </IconProvider>
+        );
+
+        const link = screen.getByRole('link');
+        fireEvent.click(link);
+        expect(onClick).toHaveBeenCalled();
+    });
+
+    it('should render with correct className', () => {
+        render(
+            <IconProvider library={regularIcons}>
+                <BackLink text='Back to source' to='https://example.com/share-link' className='foo' />
+            </IconProvider>
+        );
+        const link = screen.getByRole('link');
+        expect(link).toHaveClass('foo');
+    });
+
+    it('should render without duplicate className', () => {
+        render(
+            <IconProvider library={regularIcons}>
+                <BackLink
+                    text='Back to source'
+                    to='https://example.com/share-link'
+                    className='foo foo bar'
+                />
+            </IconProvider>
+        );
+        const link = screen.getByRole('link');
+        const classList = Array.from(link.classList);
+        const unique = classList.filter((v, i, a) => a.indexOf(v) === i);
+
+        expect(classList.length).toEqual(unique.length);
+    });
+
+    it('should render with additional props', () => {
+        render(
+            <IconProvider library={regularIcons}>
+                <BackLink
+                    text='Back to source'
+                    to='https://example.com/share-link'
+                    data-testid='back-link'
+                    aria-label='Go back to the source'
+                />
+            </IconProvider>
+        );
+
+        const link = screen.getByRole('link');
+        expect(link).toHaveAttribute('data-testid', 'back-link');
+        expect(link).toHaveAttribute('aria-label', 'Go back to the source');
+    });
+
+    it('should render with custom styles', () => {
+        render(
+            <IconProvider library={regularIcons}>
+                <BackLink
+                    text='Back to source'
+                    to='https://example.com/share-link'
+                    className='custom-link'
+                    style={{ color: 'red', fontWeight: 'bold' }}
+                />
+            </IconProvider>
+        );
+
+        const link = screen.getByRole('link');
+        expect(link).toHaveClass('custom-link');
+        expect(link.style.color).toBe('red');
+        expect(['bold', '700']).toContain(link.style.fontWeight);
+    });
+});

package/src/components/action/back_link/index.js

@@ -0,0 +1 @@
+export { BackLink } from './BackLink';

package/src/components/action/button/Button.docs.mdx

@@ -0,0 +1,43 @@
+---
+description: A Button component.
+labels: ['button', 'link']
+---
+
+import { Button } from './Button';
+
+A component that renders a clickable button. The button comes with different styles and the possibility to add icons.
+It can also become a link, with the *to* property.
+
+### Component usage
+
+To import the Button component:
+
+```js
+import { Button } from '@logora/debate.action.button';
+```
+
+To use the Button component:
+
+```js
+<Button 
+    active={true} 
+    leftIcon={<i>Left Icon</i>}
+    rightIcon={<i>Right Icon</i>}  
+    accent="success"
+    handleClick={clickCallbackFunction} 
+    className={classNameToPass}
+>
+    Click !
+</Button>
+```
+
+To use the Button component as a link:
+
+```js
+<Button 
+    to={link}
+    external={false}
+>
+    Click !
+</Button>
+```

package/src/components/action/button/Button.examples.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import { IconProvider } from '@logora/debate/icons/icon_provider';
+import * as regularIcons from '@logora/debate/icons/regular_icons';
+import { Icon } from '@logora/debate/icons/icon';
+import { Button } from './Button';
+import { MemoryRouter } from "react-router-dom";
+
+export const ActiveButton = () => {
+    return <Button active handleClick={() => null}>Active</Button>;
+};
+
+export const InactiveButton = () => {
+    return <Button active={false} handleClick={null}>Inactive</Button>;
+};
+
+export const ButtonWithLeftIcon = () => {
+    return <IconProvider library={regularIcons}><Button leftIcon={<Icon name="home" />} handleClick={null}>Home</Button></IconProvider>;
+};
+
+export const ButtonWithRightIcon = () => {
+    return <IconProvider library={regularIcons}><Button rightIcon={<Icon name="send" />} handleClick={null}>Home</Button></IconProvider>;
+};
+
+export const ButtonWithIconOnly = () => {
+    return <IconProvider library={regularIcons}><Button leftIcon={<Icon name="home" />} handleClick={null} /></IconProvider>;
+};
+
+export const ButtonWithSuccessAccent = () => {
+    return <Button accent="success" handleClick={null}>Success</Button>;
+};
+
+export const ButtonWithDangerAccent = () => {
+    return <Button accent="danger" handleClick={null}>Danger</Button>;
+};
+
+export const ButtonDisabledWithoutBorder = () => {
+    return <Button border={false} disabled>Disabled</Button>;
+};
+
+export const ButtonWithoutBorder = () => {
+    return <Button border={false} handleClick={null} active>No border</Button>;
+};
+
+export const ButtonWithLink = () => {
+    return (
+        <MemoryRouter>
+            <Button to="/page">Link button</Button>
+        </MemoryRouter>
+    );
+};
+
+export const ButtonWithLinkAndIcon = () => {
+    return (
+        <IconProvider library={regularIcons}>
+            <MemoryRouter>
+                <Button rightIcon={<Icon name="send" />} to="/page">Link button</Button>
+            </MemoryRouter>
+        </IconProvider>
+    );
+};

package/src/components/action/button/Button.jsx

@@ -0,0 +1,88 @@
+import React from 'react';
+import classnames from 'classnames';
+import styles from './Button.module.scss'
+import PropTypes from "prop-types";
+import { Link } from '@logora/debate/action/link';
+
+export const Button = ({ className, type = "button", active, leftIcon, rightIcon, accent, border = true, handleClick, to, external, children, ...rest }) => {
+  const onClick = (event) => {
+      handleClick && handleClick(event);
+  }
+
+  return (
+    <>
+      {to ?
+        <Link 
+          to={to} 
+          tabIndex={0}
+          className={classnames(
+            styles.primaryButton,
+            className, 
+            (leftIcon || rightIcon) && !children && styles.iconOnly,
+            (leftIcon || rightIcon) && styles.withIcon,
+            leftIcon && styles.withLeftIcon,
+            rightIcon && styles.withRightIcon,
+            active && styles.active,
+            !border && styles.withoutBorder,
+            styles[accent],
+          )}
+          external={external}
+          {...rest}
+        >
+          { leftIcon }
+          { children }
+          { rightIcon }
+        </Link>
+      :
+        <button 
+          type={type} 
+          tabIndex={0}
+          className={classnames(
+            styles.primaryButton,
+            className, 
+            (leftIcon || rightIcon) && !children && styles.iconOnly,
+            (leftIcon || rightIcon) && styles.withIcon,
+            leftIcon && styles.withLeftIcon,
+            rightIcon && styles.withRightIcon,
+            active && styles.active,
+            !border && styles.withoutBorder,
+            styles[accent],
+          )} 
+          onClick={onClick} 
+          {...rest}
+        >
+            { leftIcon }
+            { children }
+            { rightIcon }
+        </button>
+      }
+    </>
+  );
+}
+
+Button.propTypes = {
+  /** The type of the button (e.g. 'button', 'submit') */
+  type: PropTypes.string,
+  /** The active state of the button */
+  active: PropTypes.bool,
+  /** Left icon displayed inside the button  */
+  leftIcon: PropTypes.node,
+  /**  Right icon displayed inside the button */
+  rightIcon: PropTypes.node,
+  /**  Color accent of the button, can be `success` or `danger` */
+  accent: PropTypes.string,
+  /**  Whether to show the border */
+  border: PropTypes.bool,
+  /**  Callback function for the onClick event. */
+  handleClick: PropTypes.func,
+  /**  Class name to style the button */
+  className: PropTypes.string,
+  /** href, or object passed to react-router's Link */
+  to: PropTypes.any,
+  /** If `true`, will render a plain anchor tag instead of react-router's Link */
+  external: PropTypes.bool,
+  /**  Content of the button */
+  children: PropTypes.node,
+  /** Extra props passed to the button */
+  rest: PropTypes.object
+};