{children}
;
16 | }
17 |
18 | BaseBar.displayName = symToStr({ BaseBar });
19 |
20 | const useStyles = tss.withName({ BaseBar }).create(({ theme }) => ({
21 | root: {
22 | backgroundColor: theme.colors.useCases.surfaces.surface1,
23 | boxShadow: theme.shadows[1],
24 | borderRadius: 8,
25 | overflow: "hidden",
26 | },
27 | }));
28 |
--------------------------------------------------------------------------------
/src/ButtonBar.tsx:
--------------------------------------------------------------------------------
1 | import { memo, ReactNode } from "react";
2 | import { useCallbackFactory } from "powerhooks/useCallbackFactory";
3 | import { ButtonBarButton } from "./ButtonBarButton";
4 | import { symToStr } from "tsafe/symToStr";
5 | import { BaseBar } from "./BaseBar";
6 | import type { IconProps } from "./Icon";
7 |
8 | export type ButtonBarProps
30 | {aboveDivider !== undefined && (
31 |
35 | );
36 | }),
37 | );
38 |
39 | const useStyles = tss.withName({ Card }).create(({ theme }) => ({
40 | root: {
41 | borderRadius: 8,
42 | boxShadow: theme.shadows[1],
43 | backgroundColor: theme.colors.useCases.surfaces.surface1,
44 | "&:hover": {
45 | boxShadow: theme.shadows[6],
46 | },
47 | display: "flex",
48 | flexDirection: "column",
49 | },
50 | aboveDivider: {
51 | padding: theme.spacing({ topBottom: 3, rightLeft: 4 }),
52 | borderBottom: `1px solid ${theme.colors.useCases.typography.textTertiary}`,
53 | boxSizing: "border-box",
54 | },
55 | belowDivider: {
56 | padding: theme.spacing(4),
57 | paddingTop: theme.spacing(3),
58 | flex: 1,
59 | display: "flex",
60 | flexDirection: "column",
61 | },
62 | }));
63 |
--------------------------------------------------------------------------------
/src/Checkbox.tsx:
--------------------------------------------------------------------------------
1 | import { useState, useEffect, memo } from "react";
2 | import MuiCheckbox from "@mui/material/Checkbox";
3 | import type { CheckboxProps as MuiCheckboxProps } from "@mui/material/Checkbox";
4 | import { useConstCallback } from "powerhooks/useConstCallback";
5 | import { symToStr } from "tsafe/symToStr";
6 |
7 | export type CheckboxProps = MuiCheckboxProps;
8 |
9 | export const Checkbox = memo((props: CheckboxProps) => {
10 | const { defaultChecked: props_defaultChecked, ...rest } = props;
11 |
12 | const defaultChecked =
13 | rest.checked === undefined ? false : props_defaultChecked ?? false;
14 |
15 | const [isChecked, setIsChecked] = useState(defaultChecked);
16 |
17 | useEffect(() => setIsChecked(defaultChecked), [defaultChecked]);
18 |
19 | const onChange = useConstCallback{aboveDivider}
32 | )}
33 | {children}
34 |
35 | {title}
42 |
43 | {isCollapsed && (
44 |
49 | {showAllStr}
50 | {total !== undefined && ({total})}
51 |
52 | )}
53 |
54 | );
55 | },
56 | );
57 |
58 | CollapsibleSectionHeader.displayName = symToStr({ CollapsibleSectionHeader });
59 |
60 | const useStyles = tss
61 | .withName({ CollapsibleSectionHeader })
62 | .withParams<{ isCollapsed: boolean }>()
63 | .create(({ theme, isCollapsed }) => ({
64 | root: {
65 | display: "flex",
66 | alignItems: "center",
67 | },
68 | chevron: {
69 | paddingLeft: 0,
70 | ...(!isCollapsed
71 | ? {}
72 | : {
73 | width: 0,
74 | paddingLeft: 0,
75 | paddingRight: 0,
76 | visibility: "hidden",
77 | }),
78 | },
79 | link: {
80 | cursor: "pointer",
81 | //Ugly solution to vertically align with text
82 | paddingTop:
83 | 0.183 *
84 | pxToNumber(
85 | theme.typography.variants["section heading"].style
86 | .lineHeight,
87 | ),
88 | },
89 | }));
90 |
--------------------------------------------------------------------------------
/src/CollapsibleWrapper.tsx:
--------------------------------------------------------------------------------
1 | import { useEffect, useReducer, useRef, memo } from "react";
2 | import type { RefObject } from "react";
3 | import { useDomRect } from "powerhooks/useDomRect";
4 | import type { ReactNode } from "react";
5 | import { useGuaranteedMemo } from "powerhooks/useGuaranteedMemo";
6 | import { assert } from "tsafe/assert";
7 | import { useStyles } from "tss-react";
8 |
9 | export type CollapseParams =
10 | | CollapseParams.Controlled
11 | | CollapseParams.CollapsesOnScroll;
12 | export namespace CollapseParams {
13 | export type Common = {
14 | /** Default 250ms */
15 | transitionDuration?: number;
16 | };
17 |
18 | export type Controlled = Common & {
19 | behavior: "controlled";
20 | isCollapsed: boolean;
21 | };
22 |
23 | export type CollapsesOnScroll = Common & {
24 | behavior: "collapses on scroll";
25 | scrollTopThreshold: number;
26 | // NOTE: If not provided assume window (body)
27 | scrollableElementRef?: RefObject `${prop} ${transitionDuration}ms`)
144 | .join(", "),
145 | overflow: "hidden",
146 | }),
147 | className,
148 | )}
149 | >
150 |
152 | );
153 | });
154 |
--------------------------------------------------------------------------------
/src/CopyToClipboardIconButton.tsx:
--------------------------------------------------------------------------------
1 | import { useState, memo } from "react";
2 | import { useConstCallback } from "powerhooks/useConstCallback";
3 | import { Tooltip } from "./Tooltip";
4 | import { IconButton } from "./IconButton";
5 | import { tss } from "./lib/tss";
6 | import CheckIcon from "@mui/icons-material/Check";
7 | import FilterNoneIcon from "@mui/icons-material/FilterNone";
8 |
9 | type Props = {
10 | className?: string;
11 | copyToClipboardText?: string;
12 | copiedToClipboardText?: string;
13 | textToCopy: string;
14 | /** Default: false */
15 | disabled?: boolean;
16 | };
17 |
18 | export const CopyToClipboardIconButton = memo((props: Props) => {
19 | const {
20 | className,
21 | textToCopy,
22 | copiedToClipboardText = "Copied!",
23 | copyToClipboardText = "Copy to clipboard",
24 | disabled = false,
25 | } = props;
26 |
27 | const { isCopyFeedbackOn, onClick } = (function useClosure() {
28 | const [isCopyFeedbackOn, setIsCopyFeedbackOn] = useState(false);
29 |
30 | const onClick = useConstCallback(() => {
31 | navigator.clipboard.writeText(textToCopy);
32 |
33 | (async () => {
34 | setIsCopyFeedbackOn(true);
35 |
36 | await new Promise(resolve => setTimeout(resolve, 1000));
37 |
38 | setIsCopyFeedbackOn(false);
39 | })();
40 | });
41 |
42 | return { isCopyFeedbackOn, onClick };
43 | })();
44 |
45 | const { classes, cx } = useStyles({ isCopyFeedbackOn });
46 |
47 | const size = "small";
48 |
49 | return (
50 | {children}
151 |
49 |
66 | );
67 | });
68 |
69 | const useStyles = tss.withName({ DirectoryHeader }).create(({ theme }) => ({
70 | root: {
71 | display: "flex",
72 | alignItems: "center",
73 | borderBottom: `1px solid ${theme.colors.useCases.typography.textTertiary}`,
74 | },
75 | imageWrapper: {
76 | margin: theme.spacing({ topBottom: 4, rightLeft: 3 }),
77 | marginLeft: theme.spacing(1),
78 | ...(() => {
79 | const height =
80 | pxToNumber(
81 | theme.typography.variants["object heading"].style
82 | .lineHeight,
83 | ) +
84 | pxToNumber(
85 | theme.typography.variants["caption"].style.lineHeight,
86 | ) +
87 | theme.spacing(2);
88 |
89 | return {
90 | width: height,
91 | height,
92 | };
93 | })(),
94 | display: "flex",
95 | justifyContent: "center",
96 | alignItems: "center",
97 | },
98 | subtitle: {
99 | marginTop: theme.spacing(2),
100 | color: theme.colors.useCases.typography.textSecondary,
101 | textTransform: "capitalize",
102 | },
103 | }));
104 |
--------------------------------------------------------------------------------
/src/Icon.tsx:
--------------------------------------------------------------------------------
1 | import { memo, forwardRef, type ElementType } from "react";
2 | import type { MouseEventHandler } from "react";
3 | import { tss } from "./lib/tss";
4 | import SvgIcon from "@mui/material/SvgIcon";
5 | import type { Equals } from "tsafe";
6 | import type { IconSizeName } from "./lib/icon";
7 | import { createLazySvg } from "./tools/LazySvg";
8 | import { symToStr } from "tsafe/symToStr";
9 | import memoize from "memoizee";
10 | import type { OverridableComponent } from "@mui/material/OverridableComponent";
11 | import type { SvgIconTypeMap } from "@mui/material/SvgIcon";
12 | import { assert } from "tsafe/assert";
13 | import CropSquareIcon from "@mui/icons-material/CropSquare";
14 |
15 | /**
16 | *
17 | * ======== icon:
18 | *
19 | * This can be either a MUI Icon Component or an url pointing to an SVG file.
20 | *
21 | * MUI Icons Component:
22 | * Find the icon you want to use here: https://mui.com/material-ui/material-icons/
23 | * If, for example you'd like to use this one: https://mui.com/material-ui/material-icons/?selected=AddHomeWork
24 | * ```ts
25 | * import AddHomeWorkIcon from '@mui/icons-material/AddHomeWork';
26 | *
50 |
56 | {image}
57 |
58 | {title}
59 | {subtitle !== undefined && (
60 |
61 | {subtitle}
62 |
63 | )}
64 |
65 |
22 | {typeof text === "string" ? (
23 |
24 | {text}
25 |
26 | ) : (
27 | text
28 | )}
29 |
30 | );
31 | });
32 |
33 | const useStyles = tss.withName({ Tag }).create(({ theme }) => ({
34 | root: {
35 | backgroundColor:
36 | theme.colors.palette[theme.isDarkModeEnabled ? "light" : "dark"]
37 | .main,
38 | padding: theme.spacing({ topBottom: 1, rightLeft: 2 }),
39 | borderRadius: theme.spacing(3),
40 | display: "inline-block",
41 | cursor: "pointer",
42 | },
43 | text: {
44 | color: theme.colors.palette[theme.isDarkModeEnabled ? "dark" : "light"]
45 | .main,
46 | },
47 | }));
48 |
--------------------------------------------------------------------------------
/src/Text.tsx:
--------------------------------------------------------------------------------
1 | import { memo, forwardRef, createElement } from "react";
2 | import { assert, type Equals } from "tsafe/assert";
3 | import { tss } from "./lib/tss";
4 | import type { Theme } from "./lib/theme";
5 | import { symToStr } from "tsafe/symToStr";
6 | import type { TypographyDesc } from "./lib/typography";
7 |
8 | export type TextProps = {
9 | className?: string;
10 | //typo: TypographyVariantNameCustom | TypographyDesc.VariantNameBase;
11 | typo: TypographyDesc.VariantNameBase;
12 | color?: "primary" | "secondary" | "disabled" | "focus";
13 | children: React.ReactNode;
14 | htmlComponent?: TypographyDesc.HtmlComponent;
15 | componentProps?: JSX.IntrinsicElements[TypographyDesc.HtmlComponent];
16 |
17 | fixedSize_enabled?: boolean;
18 | fixedSize_content?: string;
19 | fixedSize_fontWeight?: number;
20 | };
21 |
22 | export const Text = memo(
23 | forwardRef
80 | {selectedTags.map(tag => (
81 | {tag}
82 | ))}
83 |
84 | 97 |
106 | t("github picker create tag", { tag }),
107 | done: t("github picker done"),
108 | }}
109 | />
110 |
111 | );
112 | }
113 |
114 | export const VueDefault = getStory({});
115 |
--------------------------------------------------------------------------------
/src/stories/Icon.stories.tsx:
--------------------------------------------------------------------------------
1 | import { Icon } from "../Icon";
2 | import { sectionName } from "./sectionName";
3 | import { getStoryFactory } from "./getStory";
4 | import { customIcons } from "./theme";
5 | import HomeIcon from "@mui/icons-material/Home";
6 | import HelpIcon from "@mui/icons-material/Help";
7 | import { id } from "tsafe/id";
8 |
9 | const icons = [
10 | HomeIcon,
11 | HelpIcon,
12 | customIcons.tourSvgUrl,
13 | customIcons.servicesSvgUrl,
14 | ] as const;
15 |
16 | const { meta, getStory } = getStoryFactory({
17 | sectionName,
18 | wrappedComponent: { Icon },
19 | argTypes: {
20 | icon: {
21 | options: icons,
22 | control: { type: "radio" },
23 | },
24 | size: {
25 | options: ["extra small", "small", "default", "medium", "large"],
26 | control: { type: "radio" },
27 | },
28 | },
29 | });
30 |
31 | export default meta;
32 |
33 | export const Home = getStory({
34 | icon: icons[0],
35 | size: "default",
36 | });
37 |
--------------------------------------------------------------------------------
/src/stories/IconButton.stories.tsx:
--------------------------------------------------------------------------------
1 | import { IconButton } from "../IconButton";
2 | import { sectionName } from "./sectionName";
3 | import { getStoryFactory, logCallbacks } from "./getStory";
4 | import { customIcons } from "./theme";
5 | import HelpIcon from "@mui/icons-material/Help";
6 | import HomeIcon from "@mui/icons-material/Home";
7 |
8 | const icons = [
9 | HomeIcon,
10 | HelpIcon,
11 | customIcons.tourSvgUrl,
12 | customIcons.servicesSvgUrl,
13 | ] as const;
14 |
15 | const { meta, getStory } = getStoryFactory({
16 | sectionName,
17 | wrappedComponent: { IconButton },
18 | argTypes: {
19 | icon: {
20 | options: icons,
21 | control: { type: "radio" },
22 | },
23 | },
24 | });
25 |
26 | export default meta;
27 |
28 | export const Vue = getStory({
29 | icon: icons[0],
30 | ...logCallbacks(["onClick"]),
31 | });
32 |
--------------------------------------------------------------------------------
/src/stories/LanguageSelect.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { useState } from "react";
3 | import { LanguageSelect, type LanguageSelectProps } from "../LanguageSelect";
4 | import { sectionName } from "./sectionName";
5 | import { getStoryFactory } from "./getStory";
6 | import { symToStr } from "tsafe/symToStr";
7 | import { id } from "tsafe/id";
8 |
9 | const languagesPrettyPrint = {
10 | en: "English",
11 | fr: "Français",
12 | };
13 |
14 | type Language = keyof typeof languagesPrettyPrint;
15 |
16 | function Component(
17 | props: Omit<
18 | LanguageSelectProps84 | 97 |
27 |
30 | `,
31 | });
32 |
--------------------------------------------------------------------------------
/src/stories/PageHeader.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { PageHeader, type PageHeaderProps } from "../PageHeader";
3 | import { sectionName } from "./sectionName";
4 | import { getStoryFactory } from "./getStory";
5 | import { symToStr } from "tsafe/symToStr";
6 | import { useStateRef } from "powerhooks/useStateRef";
7 | import SentimentSatisfiedIcon from "@mui/icons-material/SentimentSatisfied";
8 | import HomeIcon from "@mui/icons-material/Home";
9 | import accountSvgUrl from "./assets/svg/account_v1.svg";
10 |
11 | function Component(
12 | props: Omit<
13 | PageHeaderProps,
14 | "titleCollapseParams" | "helpCollapseParams"
15 | > & {
16 | transitionDuration: number;
17 | },
18 | ) {
19 | const { transitionDuration, ...rest } = props;
20 |
21 | const scrollableElementRef = useStateRefClick to expand
28 | This is the hidden content inside the details tag. 29 |
31 |
70 | );
71 | }
72 |
73 | const { meta, getStory } = getStoryFactory({
74 | sectionName,
75 | wrappedComponent: { [symToStr({ PageHeader })]: Component },
76 | defaultWidth: 750,
77 | });
78 |
79 | export default meta;
80 |
81 | export const VueDefault = getStory({
82 | helpContent: "This is the content of the help",
83 | helpIcon: SentimentSatisfiedIcon,
84 | helpTitle: "This is the help title",
85 | mainIcon: HomeIcon,
86 | title: "This is the title",
87 | transitionDuration: 250,
88 | });
89 |
90 | export const VueWithCustomIcon = getStory({
91 | helpContent: "This is the content of the help",
92 | helpIcon: accountSvgUrl,
93 | helpTitle: "This is the help title",
94 | mainIcon: accountSvgUrl,
95 | title: "This is the title",
96 | transitionDuration: 250,
97 | });
98 |
--------------------------------------------------------------------------------
/src/stories/Picker.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { Picker } from "../Picker";
3 | import type { PickerProps } from "../Picker";
4 | import { Button } from "../Button";
5 | import { useStateRef } from "powerhooks/useStateRef";
6 | import { useState } from "react";
7 | import { sectionName } from "./sectionName";
8 | import { getStoryFactory } from "./getStory";
9 | import { symToStr } from "tsafe/symToStr";
10 | import { Evt } from "evt";
11 | import type { UnpackEvt } from "evt";
12 | import { useConst } from "powerhooks/useConst";
13 | import { assert } from "tsafe/assert";
14 | import { useConstCallback } from "powerhooks/useConstCallback";
15 | import { useTranslation } from "./i18n";
16 |
17 | const { meta, getStory } = getStoryFactory({
18 | sectionName,
19 | wrappedComponent: { [symToStr({ Picker })]: Component },
20 | });
21 |
22 | export default meta;
23 |
24 | function getTagColor(tag: string) {
25 | return getRandomColor(tag);
26 | }
27 |
28 | function getRandomColor(stringInput: string) {
29 | const h = [...stringInput].reduce((acc, char) => {
30 | return char.charCodeAt(0) + ((acc << 5) - acc);
31 | }, 0);
32 | const s = 95,
33 | l = 35 / 100;
34 | const a = (s * Math.min(l, 1 - l)) / 100;
35 | const f = n => {
36 | const k = (n + h / 30) % 12;
37 | const color = l - a * Math.max(Math.min(k - 3, 9 - k, 1), -1);
38 | return Math.round(255 * color)
39 | .toString(16)
40 | .padStart(2, "0"); // convert to Hex and prefix "0" if needed
41 | };
42 | return `#${f(0)}${f(8)}${f(4)}`;
43 | }
44 |
45 | function Component() {
46 | const evtGitHubPickerAction = useConst(() =>
47 | Evt.create
57 | {new Array(300).fill("").map(i => (
58 |
67 | ))}
68 |
69 |
97 | {selectedOptionIds.map(id => (
98 | {id}
99 | ))}
100 |
101 | 114 |
123 | t("github picker create tag", { tag: optionLabel }),
124 | done: t("github picker done"),
125 | }}
126 | />
127 |
128 | );
129 | }
130 |
131 | export const VueDefault = getStory({});
132 |
--------------------------------------------------------------------------------
/src/stories/RangeSlider.stories.tsx:
--------------------------------------------------------------------------------
1 | import React from "react";
2 | import { RangeSlider } from "../RangeSlider";
3 | import type { RangeSliderProps } from "../RangeSlider";
4 | import { sectionName } from "./sectionName";
5 | import { getStoryFactory } from "./getStory";
6 | import { useState } from "react";
7 | import { symToStr } from "tsafe/symToStr";
8 | import { useConstCallback } from "powerhooks/useConstCallback";
9 |
10 | function Component(
11 | props: Omit101 | 114 |
123 |
125 |
126 | );
127 | };
128 |
129 | function getStory(props: Props): typeof Template {
130 | const out = Template.bind({});
131 |
132 | out.args = {
133 | darkMode: getIsDarkModeEnabledOsDefault(),
134 | width: defaultWidth ?? 0,
135 | ...props,
136 | };
137 |
138 | return out;
139 | }
140 |
141 | return {
142 | meta: id({
143 | title: `${sectionName}/${symToStr(wrappedComponent)}`,
144 | component: Component,
145 | argTypes: {
146 | width: {
147 | control: {
148 | type: "range",
149 | min: 0,
150 | max: 1920,
151 | step: 1,
152 | },
153 | },
154 | ...argTypes,
155 | },
156 | }),
157 | getStory,
158 | };
159 | }
160 |
161 | export function logCallbacks