@design-system-rte/react 0.9.1 → 0.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (18) hide show
  1. package/README.md +35 -1
  2. package/dist/components/breadcrumbs/Breadcrumbs.d.ts +5 -0
  3. package/dist/components/divider/Divider.d.ts +3 -0
  4. package/dist/components/icon/Icon.d.ts +1 -1
  5. package/dist/components/loader/Loader.d.ts +5 -0
  6. package/dist/components/overlay/Overlay.d.ts +6 -0
  7. package/dist/components/segmentedControl/Segment.d.ts +3 -0
  8. package/dist/components/segmentedControl/SegmentedControl.d.ts +11 -0
  9. package/dist/components/segmentedControl/SegmentedControlUtils.d.ts +4 -0
  10. package/dist/components/segmentedControl/hooks/useFocusFirstSegment.d.ts +2 -0
  11. package/dist/components/segmentedControl/hooks/useSelectedSegmentIndicatorStyle.d.ts +7 -0
  12. package/dist/components/switch/Switch.d.ts +7 -0
  13. package/dist/components/tooltip/Tooltip.d.ts +1 -0
  14. package/dist/index.d.ts +5 -1
  15. package/dist/react-package.cjs +1 -1
  16. package/dist/react-package.js +3662 -3236
  17. package/dist/style.css +1 -1
  18. package/package.json +2 -2
package/README.md CHANGED
@@ -1 +1,35 @@
1
- <h1 align="center">@design-system/react</h1>
1
+ ### Installation Instructions
2
+
3
+ 1. **Add Design System base styles:**
4
+ ```tsx
5
+ import "@design-system-rte/react/dist/style.css";
6
+
7
+ createRoot(document.getElementById("root")!).render(
8
+ <StrictMode>
9
+ <App />
10
+ </StrictMode>,
11
+ );
12
+ ```
13
+
14
+ 2. **Add Branding/Theme Mixin:**
15
+
16
+ Include the branding/theme mixin in your main `.scss` file. This will create a style scope for the components.
17
+ (If you don't have scss support, you can use the .css files in `@design-system/core/css/rte-themes.css` and add them to your main styles file).
18
+ ```scss
19
+ @use "@design-system-rte/core/design-tokens/tokens/mixins" as *;
20
+
21
+ @include theme-selector('bleu_iceberg', 'light');
22
+ ```
23
+
24
+ 3. **Add HTML Selector:**
25
+
26
+ Add an HTML selector to define the context for applying component styles.
27
+ ```html
28
+ <body data-theme="bleu_iceberg" data-mode="light">
29
+ ...
30
+ </body>
31
+ ```
32
+
33
+ 4. **Use Components:**
34
+
35
+ Implement the different components as documented in the [Storybook](https://opensource.rte-france.com/design-system-rte/?path=/docs/react_button--docs) provided with the library.
package/dist/components/breadcrumbs/Breadcrumbs.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { BreadcrumbsProps as BreadcrumbsPropsCore } from '../../../../core/components/breadcrumbs/breadcrumbs.interface';
2
+ export interface BreadcrumbsProps extends BreadcrumbsPropsCore, React.HTMLAttributes<HTMLElement> {
3
+ }
4
+ declare const Breadcrumbs: import('react').ForwardRefExoticComponent<BreadcrumbsProps & import('react').RefAttributes<HTMLDivElement>>;
5
+ export default Breadcrumbs;
package/dist/components/divider/Divider.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { DividerProps } from '../../../../core/components/divider/divider.interface';
2
+ declare const Divider: import('react').ForwardRefExoticComponent<DividerProps & import('react').RefAttributes<HTMLDivElement>>;
3
+ export default Divider;
package/dist/components/icon/Icon.d.ts CHANGED
@@ -6,7 +6,7 @@ export interface IconProps extends coreIconProps {
6
6
  className?: string;
7
7
  }
8
8
  interface IconWrapperProps extends CoreIconWrapperProps, Omit<React.SVGProps<SVGSVGElement>, "name" | "width" | "height"> {
9
- name: RegularIconIdKey | TogglableIconIdKey;
9
+ name: string;
10
10
  appearance?: "outlined" | "filled";
11
11
  }
12
12
  declare const Icon: ({ name, size, color, appearance, ...props }: IconWrapperProps) => import("react/jsx-runtime").JSX.Element | null;
package/dist/components/loader/Loader.d.ts ADDED
@@ -0,0 +1,5 @@
1
+ import { LoaderProps as CoreLoaderProps } from '../../../../core/components/loader/loader.interface';
2
+ interface LoaderProps extends CoreLoaderProps, React.HTMLAttributes<HTMLDivElement> {
3
+ }
4
+ declare const Loader: import('react').ForwardRefExoticComponent<LoaderProps & import('react').RefAttributes<HTMLDivElement>>;
5
+ export default Loader;
package/dist/components/overlay/Overlay.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ import { ReactNode } from 'react';
2
+ type OverlayPortalProps = {
3
+ children: ReactNode;
4
+ };
5
+ export declare const Overlay: ({ children }: OverlayPortalProps) => import("react/jsx-runtime").JSX.Element | null;
6
+ export {};
package/dist/components/segmentedControl/Segment.d.ts ADDED
@@ -0,0 +1,3 @@
1
+ import { SegmentProps } from './SegmentedControl';
2
+ declare const Segment: ({ id, icon, label, position, isSelected, onClick, ...props }: SegmentProps) => import("react/jsx-runtime").JSX.Element;
3
+ export default Segment;
package/dist/components/segmentedControl/SegmentedControl.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ import { SegmentProps as CoreSegmentProps, SegmentedControlProps as CoreSegmentedControlProps } from '../../../../core/components/segmented-control/segmented-control.interface';
2
+ import { MutableRefObject } from 'react';
3
+ export interface SegmentProps extends CoreSegmentProps, Omit<React.HTMLAttributes<HTMLDivElement>, "id"> {
4
+ onClick?: (event: React.MouseEvent<HTMLDivElement> | React.KeyboardEvent<HTMLDivElement>) => void;
5
+ parentRef?: MutableRefObject<HTMLDivElement | null>;
6
+ }
7
+ interface SegmentedControlProps extends CoreSegmentedControlProps, Omit<React.HTMLAttributes<HTMLDivElement>, "onChange"> {
8
+ onChange: (id: string) => void;
9
+ }
10
+ declare const SegmentedControl: import('react').ForwardRefExoticComponent<SegmentedControlProps & import('react').RefAttributes<HTMLDivElement>>;
11
+ export default SegmentedControl;
package/dist/components/segmentedControl/SegmentedControlUtils.d.ts ADDED
@@ -0,0 +1,4 @@
1
+ export declare const focusNextNotSegmentElement: (currentFocusedElementIndex: number, allFocusableElement: HTMLElement[], criteria: string) => void;
2
+ export declare const focusPreviousNotSegmentElement: (currentFocusedElementIndex: number, allFocusableElement: HTMLElement[], criteria: string) => void;
3
+ export declare const focusNextSegmentElement: (currentActiveSegmentElementIndex: number, allSegmentElements: HTMLElement[]) => void;
4
+ export declare const focusPreviousSegmentElement: (currentActiveSegmentElementIndex: number, allSegmentElements: HTMLElement[]) => void;
package/dist/components/segmentedControl/hooks/useFocusFirstSegment.d.ts ADDED
@@ -0,0 +1,2 @@
1
+ declare const useFocusCurrentSegmentElement: (ref: React.RefObject<HTMLDivElement>) => void;
2
+ export default useFocusCurrentSegmentElement;
package/dist/components/segmentedControl/hooks/useSelectedSegmentIndicatorStyle.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { SegmentedControlProps as CoreSegmentedControlProps } from '../../../../../core/components/segmented-control/segmented-control.interface';
2
+ import { MutableRefObject } from 'react';
3
+ declare const useSelectedSegmentIndicatorStyle: (containerRef: MutableRefObject<HTMLDivElement | null>, options: CoreSegmentedControlProps["options"], selectedSegment?: string) => {
4
+ left: number;
5
+ width: number;
6
+ };
7
+ export default useSelectedSegmentIndicatorStyle;
package/dist/components/switch/Switch.d.ts ADDED
@@ -0,0 +1,7 @@
1
+ import { SwitchProps as CoreSwitchProps } from '../../../../core/components/switch/switch.interface';
2
+ import { InputHTMLAttributes } from 'react';
3
+ interface SwitchProps extends CoreSwitchProps, InputHTMLAttributes<HTMLInputElement> {
4
+ onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
5
+ }
6
+ declare const Switch: ({ label, appearance, showLabel, showIcon, disabled, readOnly, checked, onChange, ...props }: SwitchProps) => import("react/jsx-runtime").JSX.Element;
7
+ export default Switch;
package/dist/components/tooltip/Tooltip.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { TooltipProps as CoreTooltipProps } from '../../../../core/components/tooltip/tooltip.interface';
2
2
  interface TooltipProps extends CoreTooltipProps, Omit<React.HTMLAttributes<HTMLDivElement>, "children"> {
3
3
  children: React.ReactNode;
4
+ triggerStyles?: React.CSSProperties;
4
5
  }
5
6
  declare const Tooltip: import('react').ForwardRefExoticComponent<TooltipProps & import('react').RefAttributes<HTMLDivElement>>;
6
7
  export default Tooltip;
package/dist/index.d.ts CHANGED
@@ -1,8 +1,10 @@
1
1
  import { default as Badge } from './components/badge/Badge.tsx';
2
+ import { default as Breadcrumbs } from './components/breadcrumbs/Breadcrumbs.tsx';
2
3
  import { default as Button } from './components/button/Button';
3
4
  import { default as Checkbox } from './components/checkbox/Checkbox.tsx';
4
5
  import { default as CheckboxGroup } from './components/checkboxGroup/CheckboxGroup.tsx';
5
6
  import { default as Chip } from './components/chip/Chip.tsx';
7
+ import { default as Divider } from './components/divider/Divider.tsx';
6
8
  import { default as Grid } from './components/grid/Grid.tsx';
7
9
  import { default as Icon } from './components/icon/Icon.tsx';
8
10
  import { default as IconButton } from './components/iconButton/IconButton.tsx';
@@ -10,8 +12,10 @@ import { default as IconButtonToggle } from './components/iconButtonToggle/IconB
10
12
  import { default as Link } from './components/link/Link.tsx';
11
13
  import { default as RadioButton } from './components/radioButton/RadioButton.tsx';
12
14
  import { default as RadioButtonGroup } from './components/radioButtonGroup/RadioButtonGroup.tsx';
15
+ import { default as SegmentedControl } from './components/segmentedControl/SegmentedControl.tsx';
13
16
  import { default as SplitButton } from './components/splitButton/SplitButton.tsx';
17
+ import { default as Switch } from './components/switch/Switch.tsx';
14
18
  import { default as Textarea } from './components/textarea/Textarea.tsx';
15
19
  import { default as TextInput } from './components/textInput/TextInput.tsx';
16
20
  import { default as Tooltip } from './components/tooltip/Tooltip.tsx';
17
- export { Button, Grid, Checkbox, CheckboxGroup, Link, RadioButton, RadioButtonGroup, Icon, IconButton, IconButtonToggle, SplitButton, Tooltip, TextInput, Chip, Badge, Textarea, };
21
+ export { Button, Grid, Checkbox, CheckboxGroup, Link, RadioButton, RadioButtonGroup, Icon, IconButton, IconButtonToggle, SplitButton, Tooltip, TextInput, Chip, Badge, Textarea, Divider, Switch, SegmentedControl, Breadcrumbs, };