@ledgerhq/react-ui 0.22.0-nightly.1 → 0.23.0-next.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.
- package/lib/cjs/components/asorted/Icon/Icons.stories.js +1 -2
- package/lib/cjs/components/asorted/Icon/Icons.stories.js.map +2 -2
- package/lib/cjs/components/asorted/Icon/NotificationIcon.stories.js +1 -1
- package/lib/cjs/components/asorted/Icon/NotificationIcon.stories.js.map +1 -1
- package/lib/cjs/components/cta/Toggle/Toggle.stories.js.map +2 -2
- package/lib/cjs/components/form/Checkbox/Checkbox.stories.js.map +2 -2
- package/lib/cjs/components/form/Radio/Radio.stories.js.map +2 -2
- package/lib/cjs/components/form/Switch/Switch.stories.js.map +2 -2
- package/lib/cjs/components/layout/Carousel/Carousel.stories.js.map +2 -2
- package/lib/cjs/components/layout/Drawer/Drawer.stories.js.map +2 -2
- package/lib/cjs/components/layout/Popin/Popin.stories.js.map +2 -2
- package/lib/cjs/components/navigation/FlowStepper/FlowStepper.stories.js.map +2 -2
- package/lib/cjs/components/navigation/sideBar/SideBar/SideBar.stories.js.map +2 -2
- package/lib/cjs/pre-ldls/components/Input/Input.stories.js.map +2 -2
- package/lib/cjs/pre-ldls/components/Search/Search.js +63 -0
- package/lib/cjs/pre-ldls/components/Search/Search.js.map +7 -0
- package/lib/cjs/pre-ldls/components/Search/Search.stories.js +63 -0
- package/lib/cjs/pre-ldls/components/Search/Search.stories.js.map +7 -0
- package/lib/cjs/pre-ldls/components/index.js +1 -0
- package/lib/cjs/pre-ldls/components/index.js.map +2 -2
- package/lib/cjs/pre-ldls/{types.js → hooks/index.js} +5 -3
- package/lib/cjs/pre-ldls/hooks/index.js.map +7 -0
- package/lib/cjs/pre-ldls/hooks/useDebouncedCallback.js +39 -0
- package/lib/cjs/pre-ldls/hooks/useDebouncedCallback.js.map +7 -0
- package/lib/cjs/pre-ldls/hooks/useDebouncedCallback.stories.js +91 -0
- package/lib/cjs/pre-ldls/hooks/useDebouncedCallback.stories.js.map +7 -0
- package/lib/pre-ldls/components/Search/Search.d.ts +9 -0
- package/lib/pre-ldls/components/Search/Search.d.ts.map +1 -0
- package/lib/pre-ldls/components/Search/Search.js +27 -0
- package/lib/pre-ldls/components/Search/Search.js.map +1 -0
- package/lib/pre-ldls/components/index.d.ts +1 -0
- package/lib/pre-ldls/components/index.d.ts.map +1 -1
- package/lib/pre-ldls/components/index.js +1 -0
- package/lib/pre-ldls/components/index.js.map +1 -1
- package/lib/pre-ldls/hooks/index.d.ts +2 -0
- package/lib/pre-ldls/hooks/index.d.ts.map +1 -0
- package/lib/pre-ldls/hooks/index.js +2 -0
- package/lib/pre-ldls/hooks/index.js.map +1 -0
- package/lib/pre-ldls/hooks/useDebouncedCallback.d.ts +2 -0
- package/lib/pre-ldls/hooks/useDebouncedCallback.d.ts.map +1 -0
- package/lib/pre-ldls/hooks/useDebouncedCallback.js +16 -0
- package/lib/pre-ldls/hooks/useDebouncedCallback.js.map +1 -0
- package/package.json +5 -2
- package/lib/cjs/pre-ldls/types.js.map +0 -7
- package/lib/pre-ldls/types.d.ts +0 -4
- package/lib/pre-ldls/types.d.ts.map +0 -1
- package/lib/pre-ldls/types.js +0 -2
- package/lib/pre-ldls/types.js.map +0 -1
|
@@ -39,8 +39,7 @@ var import__ = require("../../..");
|
|
|
39
39
|
var import_styled_components2 = require("styled-components");
|
|
40
40
|
var Icons_stories_default = {
|
|
41
41
|
title: "asorted/Icons",
|
|
42
|
-
|
|
43
|
-
// Since we're rendering multiple icons, we don't have a single component to import
|
|
42
|
+
components: Icons
|
|
44
43
|
};
|
|
45
44
|
const IconContainer = (0, import_styled_components.default)(import__.Flex).attrs({
|
|
46
45
|
flexDirection: "column",
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/asorted/Icon/Icons.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport { StoryFn, Meta } from \"@storybook/react\";\nimport * as Icons from \"@ledgerhq/icons-ui/react\";\nimport styled from \"styled-components\";\nimport { Flex, Text } from \"../../..\";\nimport { useTheme } from \"styled-components\";\n\ninterface SizeData {\n size: number;\n stroke: number;\n}\n\ninterface AvailableSizes {\n XS: SizeData;\n S: SizeData;\n M: SizeData;\n L: SizeData;\n XL: SizeData;\n}\n\nexport default {\n title: \"asorted/Icons\",\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,YAAuB;AACvB,+BAAmB;AACnB,eAA2B;AAC3B,IAAAA,4BAAyB;AAezB,IAAO,wBAAQ;AAAA,EACb,OAAO;AAAA,EACP,
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport { StoryFn, Meta } from \"@storybook/react\";\nimport * as Icons from \"@ledgerhq/icons-ui/react\";\nimport styled from \"styled-components\";\nimport { Flex, Text } from \"../../..\";\nimport { useTheme } from \"styled-components\";\n\ninterface SizeData {\n size: number;\n stroke: number;\n}\n\ninterface AvailableSizes {\n XS: SizeData;\n S: SizeData;\n M: SizeData;\n L: SizeData;\n XL: SizeData;\n}\n\nexport default {\n title: \"asorted/Icons\",\n components: Icons,\n} as Meta;\n\ninterface IconProps {\n size?: keyof AvailableSizes;\n color?: string;\n style?: React.CSSProperties;\n}\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n flexDirection: \"column\",\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n p: 4,\n fill: \"black\",\n})<{ active?: boolean }>`\n ${p => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n border-radius: 4px;\n height: 100px;\n`;\n\nconst IconGridTemplate: React.FC<IconProps> = ({ size, color, style }) => {\n const iconNames = Object.keys(Icons) as (keyof typeof Icons)[];\n\n const theme = useTheme();\n const selectedColor = color || theme.colors.neutral.c100;\n\n return (\n <div style={{ display: \"grid\", gridTemplateColumns: \"repeat(4, 1fr)\", gap: \"10px\" }}>\n {iconNames.map(iconName => {\n const IconComponent = Icons[iconName];\n return (\n <IconContainer key={iconName}>\n <IconComponent size={size} color={selectedColor} style={style} />\n <Text pt={6}>{iconName}</Text>\n </IconContainer>\n );\n })}\n </div>\n );\n};\n\nexport const IconGrid: StoryFn<IconProps> = (args: IconProps) => <IconGridTemplate {...args} />;\n\nIconGrid.args = {\n size: \"M\",\n color: \"\",\n style: {},\n};\n\nIconGrid.argTypes = {\n size: {\n options: [\"XS\", \"S\", \"M\", \"L\", \"XL\"],\n control: {\n type: \"select\",\n },\n },\n color: { control: \"color\" },\n style: { control: \"object\" },\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,YAAuB;AACvB,+BAAmB;AACnB,eAA2B;AAC3B,IAAAA,4BAAyB;AAezB,IAAO,wBAAQ;AAAA,EACb,OAAO;AAAA,EACP,YAAY;AACd;AAQA,MAAM,oBAAgB,yBAAAC,SAAO,aAAI,EAAE,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AAAA,EACH,MAAM;AACR,CAAC;AAAA,IACG,OAAM,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,GAAG,MAAM,EAAG;AAAA;AAAA;AAAA;AAK7E,MAAM,mBAAwC,CAAC,EAAE,MAAM,OAAO,MAAM,MAAM;AACxE,QAAM,YAAY,OAAO,KAAK,KAAK;AAEnC,QAAM,YAAQ,oCAAS;AACvB,QAAM,gBAAgB,SAAS,MAAM,OAAO,QAAQ;AAEpD,SACE,6BAAAC,QAAA,cAAC,SAAI,OAAO,EAAE,SAAS,QAAQ,qBAAqB,kBAAkB,KAAK,OAAO,KAC/E,UAAU,IAAI,cAAY;AACzB,UAAM,gBAAgB,MAAM,QAAQ;AACpC,WACE,6BAAAA,QAAA,cAAC,iBAAc,KAAK,YAClB,6BAAAA,QAAA,cAAC,iBAAc,MAAY,OAAO,eAAe,OAAc,GAC/D,6BAAAA,QAAA,cAAC,iBAAK,IAAI,KAAI,QAAS,CACzB;AAAA,EAEJ,CAAC,CACH;AAEJ;AAEO,MAAM,WAA+B,CAAC,SAAoB,6BAAAA,QAAA,cAAC,oBAAkB,GAAG,MAAM;AAE7F,SAAS,OAAO;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO,CAAC;AACV;AAEA,SAAS,WAAW;AAAA,EAClB,MAAM;AAAA,IACJ,SAAS,CAAC,MAAM,KAAK,KAAK,KAAK,IAAI;AAAA,IACnC,SAAS;AAAA,MACP,MAAM;AAAA,IACR;AAAA,EACF;AAAA,EACA,OAAO,EAAE,SAAS,QAAQ;AAAA,EAC1B,OAAO,EAAE,SAAS,SAAS;AAC7B;",
|
|
6
6
|
"names": ["import_styled_components", "styled", "React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/asorted/Icon/NotificationIcon.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\n\nimport * as Icons from \"@ledgerhq/icons-ui/react\";\nimport NotificationIcon from \"./NotificationIcon\";\n\nconst meta: Meta<typeof NotificationIcon> = {\n title: \"Asorted/NotificationIcon\",\n component: NotificationIcon,\n argTypes: {\n icon: {\n description: \"Icon to display.\",\n options: Object.keys(Icons),\n control: { type: \"select\" },\n },\n variant: {\n options: [\"round\", \"square\"],\n control: { type: \"inline-radio\" },\n },\n },\n args: {\n icon: \"
|
|
4
|
+
"sourcesContent": ["import type { Meta, StoryObj } from \"@storybook/react\";\n\nimport * as Icons from \"@ledgerhq/icons-ui/react\";\nimport NotificationIcon from \"./NotificationIcon\";\n\nconst meta: Meta<typeof NotificationIcon> = {\n title: \"Asorted/NotificationIcon\",\n component: NotificationIcon,\n argTypes: {\n icon: {\n description: \"Icon to display.\",\n options: Object.keys(Icons),\n control: { type: \"select\" },\n },\n variant: {\n options: [\"round\", \"square\"],\n control: { type: \"inline-radio\" },\n },\n },\n args: {\n icon: \"Information\",\n variant: \"round\",\n },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof NotificationIcon>;\n\nexport const Default: Story = {};\n"],
|
|
5
5
|
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA,YAAuB;AACvB,8BAA6B;AAE7B,MAAM,OAAsC;AAAA,EAC1C,OAAO;AAAA,EACP,WAAW,wBAAAA;AAAA,EACX,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,aAAa;AAAA,MACb,SAAS,OAAO,KAAK,KAAK;AAAA,MAC1B,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,IACA,SAAS;AAAA,MACP,SAAS,CAAC,SAAS,QAAQ;AAAA,MAC3B,SAAS,EAAE,MAAM,eAAe;AAAA,IAClC;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,MAAM;AAAA,IACN,SAAS;AAAA,EACX;AACF;AACA,IAAO,mCAAQ;AAIR,MAAM,UAAiB,CAAC;",
|
|
6
6
|
"names": ["NotificationIcon"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/cta/Toggle/Toggle.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport { useArgs } from \"@storybook/manager-api\";\n\nimport Toggle from \"./index\";\nimport type { ToggleProps } from \"./index\";\nimport { StoryTemplate } from \"./../../helpers\";\n\nexport default {\n title: \"cta/Toggle\",\n component: Toggle,\n argTypes: {\n checked: {\n type: \"boolean\",\n description: \"Control if the component is checked or not\",\n required: true,\n control: { type: \"boolean\" },\n },\n },\n parameters: { controls: { exclude: /^(?!.*(checked))/ } },\n};\n\nconst Template = (args: ToggleProps) => {\n const [currentArgs, updateArgs] = useArgs();\n\n const handleClick = () => updateArgs({ checked: !currentArgs.checked });\n\n return (\n <Toggle {...args} onClick={handleClick}>\n {args.children}\n </Toggle>\n );\n};\n\nexport const Default: StoryTemplate<ToggleProps> = Template.bind({});\nDefault.args = {\n children: \"Max\",\n checked: true,\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,yBAAwB;AAExB,mBAAmB;AAInB,IAAO,yBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,EACF;AAAA,EACA,YAAY,EAAE,UAAU,EAAE,SAAS,mBAAmB,EAAE;AAC1D;AAEA,MAAM,WAAW,CAAC,SAAsB;AACtC,QAAM,CAAC,aAAa,UAAU,QAAI,4BAAQ;AAE1C,QAAM,cAAc,MAAM,WAAW,EAAE,SAAS,CAAC,YAAY,QAAQ,CAAC;AAEtE,SACE,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAQ,GAAG,MAAM,SAAS,eACxB,KAAK,QACR;AAEJ;AAEO,MAAM,UAAsC,SAAS,KAAK,CAAC,CAAC;AACnE,QAAQ,OAAO;AAAA,EACb,UAAU;AAAA,EACV,SAAS;AACX;",
|
|
6
6
|
"names": ["Toggle", "React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/form/Checkbox/Checkbox.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,eAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport { useArgs } from \"@storybook/manager-api\";\n\nimport Checkbox from \"./index\";\nimport type { CheckboxProps } from \"./Checkbox\";\nimport { StoryTemplate } from \"../../helpers\";\n\nexport default {\n title: \"Form/SelectionControls/Checkbox\",\n component: Checkbox,\n argTypes: {\n isDisabled: {\n type: \"boolean\",\n description: \"Control if the component is disabled or not\",\n required: false,\n control: { type: \"boolean\" },\n },\n isChecked: {\n type: \"boolean\",\n description: \"Control if the component is checked or not\",\n required: true,\n control: { type: \"boolean\" },\n },\n variant: {\n type: \"text\",\n description: \"default | success | error\",\n required: false,\n control: false,\n },\n label: {\n type: \"text\",\n description: \"Any valid string\",\n required: false,\n control: { type: \"text\" },\n },\n name: { control: false },\n },\n};\n\nconst Template = (args: CheckboxProps) => {\n const [currentArgs, updateArgs] = useArgs();\n\n const handleChange = () => updateArgs({ isChecked: !currentArgs.isChecked });\n\n return <Checkbox {...args} onChange={handleChange} />;\n};\n\nexport const Default: StoryTemplate<CheckboxProps> = Template.bind({});\nexport const Success: StoryTemplate<CheckboxProps> = Template.bind({});\nexport const Error: StoryTemplate<CheckboxProps> = Template.bind({});\n\nDefault.args = {\n isChecked: false,\n label: \"checkbox with label\",\n variant: \"default\",\n name: \"default checkbox\",\n};\n\nSuccess.args = {\n isChecked: false,\n label: \"checkbox with label\",\n variant: \"success\",\n name: \"success checkbox\",\n};\n\nError.args = {\n isChecked: false,\n label: \"checkbox with label\",\n variant: \"error\",\n name: \"error checkbox\",\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA,eAAAA;AAAA,EAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,yBAAwB;AAExB,mBAAqB;AAIrB,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAC;AAAA,EACX,UAAU;AAAA,IACR,YAAY;AAAA,MACV,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,WAAW;AAAA,MACT,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,IACX;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,OAAO;AAAA,IAC1B;AAAA,IACA,MAAM,EAAE,SAAS,MAAM;AAAA,EACzB;AACF;AAEA,MAAM,WAAW,CAAC,SAAwB;AACxC,QAAM,CAAC,aAAa,UAAU,QAAI,4BAAQ;AAE1C,QAAM,eAAe,MAAM,WAAW,EAAE,WAAW,CAAC,YAAY,UAAU,CAAC;AAE3E,SAAO,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAU,GAAG,MAAM,UAAU,cAAc;AACrD;AAEO,MAAM,UAAwC,SAAS,KAAK,CAAC,CAAC;AAC9D,MAAM,UAAwC,SAAS,KAAK,CAAC,CAAC;AAC9D,MAAMD,SAAsC,SAAS,KAAK,CAAC,CAAC;AAEnE,QAAQ,OAAO;AAAA,EACb,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AACR;AAEA,QAAQ,OAAO;AAAA,EACb,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AACR;AAEAA,OAAM,OAAO;AAAA,EACX,WAAW;AAAA,EACX,OAAO;AAAA,EACP,SAAS;AAAA,EACT,MAAM;AACR;",
|
|
6
6
|
"names": ["Error", "Checkbox", "React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/form/Radio/Radio.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport { useArgs } from \"@storybook/manager-api\";\n\nimport Radio from \"./index\";\nimport type { RadioProps } from \"./index\";\nimport { StoryTemplate } from \"./../../helpers\";\n\nexport default {\n title: \"Form/Radio\",\n argTypes: {\n currentValue: {\n type: \"text\",\n description:\n \"This is the current value. A RadioItem will be checked if its value matches this value.\",\n control: false,\n },\n name: {\n type: \"text\",\n description: \"The name property is used to link all RadioItems\",\n control: false,\n },\n onChange: {\n control: false,\n description: \"The callback receives the value of the pressed RadioItem as parameter\",\n action: \"clicked\",\n },\n },\n};\n\nconst TemplateElement = (args: RadioProps) => {\n const [currentArgs, updateArgs] = useArgs();\n const handleChange: RadioProps[\"onChange\"] = value => {\n // toggle the checked value on click to simulate onChange\n updateArgs({ currentValue: value });\n // trigger the storybook action\n currentArgs.onChange(value);\n };\n\n return (\n <Radio\n {...args}\n onChange={handleChange}\n containerProps={{ flexDirection: \"column\", rowGap: \"1rem\" }}\n >\n <Radio.Element label=\"Blue squad\" value=\"blue\" variant=\"default\" />\n <Radio.Element label=\"Black squad\" value=\"black\" variant=\"main\" />\n <Radio.Element label=\"Yellow squad\" value=\"yellow\" variant=\"success\" />\n <Radio.Element label=\"Core squad\" value=\"core\" variant=\"error\" />\n <Radio.Element label=\"Orange squad\" value=\"orange\" variant=\"default\" disabled />\n <Radio.Element label=\"Purple squad\" value=\"purple\" variant=\"default\" disabled />\n </Radio>\n );\n};\n\nconst TemplateOutlinedElement = (args: RadioProps) => {\n const [currentArgs, updateArgs] = useArgs();\n const handleChange: RadioProps[\"onChange\"] = value => {\n // toggle the checked value on click to simulate onChange\n updateArgs({ currentValue: value });\n // trigger the storybook action\n currentArgs.onChange(value);\n };\n\n return (\n <Radio\n {...args}\n onChange={handleChange}\n containerProps={{ flexDirection: \"column\", rowGap: \"20px\" }}\n >\n <Radio.Element outlined label=\"Black squad\" value=\"black\" variant=\"main\" />\n <Radio.Element outlined label=\"Yellow squad\" value=\"yellow\" variant=\"success\" />\n <Radio.Element outlined label=\"Core squad\" value=\"core\" variant=\"error\" />\n </Radio>\n );\n};\n\nexport const RadioGroup: StoryTemplate<RadioProps> = TemplateElement.bind({\n currentValue: \"purple\",\n});\n\nexport const RadioGroupOutlined: StoryTemplate<RadioProps> = TemplateOutlinedElement.bind({});\n\nconst TemplateListElement = (args: RadioProps) => {\n const [currentArgs, updateArgs] = useArgs();\n const handleChange: RadioProps[\"onChange\"] = value => {\n // toggle the checked value on click to simulate onChange\n updateArgs({ currentValue: value });\n // trigger the storybook action\n currentArgs.onChange(value);\n };\n return (\n <Radio\n {...args}\n onChange={handleChange}\n containerProps={{ flexDirection: \"column\", rowGap: \"1rem\" }}\n >\n <Radio.ListElement\n label=\"Ledger Verse\"\n value=\"ledgerVerse\"\n disabled\n containerProps={{ flex: 1 }}\n />\n <Radio.ListElement label=\"Live Monad\" value=\"liveMonad\" containerProps={{ flex: 1 }} />\n <Radio.ListElement label=\"Live Hub\" value=\"liveHub\" containerProps={{ flex: 1 }} />\n <Radio.ListElement label=\"Live Meta\" value=\"liveMeta\" containerProps={{ flex: 1 }} />\n </Radio>\n );\n};\n\nexport const RadioGroupList: StoryTemplate<RadioProps> = TemplateListElement.bind({});\n\n// Set the disabled item to be checked on mount\nRadioGroup.args = { currentValue: \"purple\" };\nRadioGroupList.args = { currentValue: \"liveHub\" };\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["React", "Radio"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/form/Switch/Switch.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport { useArgs } from \"@storybook/manager-api\";\n\nimport Switch from \"./index\";\nimport type { SwitchProps } from \"./Switch\";\nimport { StoryTemplate } from \"../../helpers\";\n\nexport default {\n title: \"Form/SelectionControls/Switch\",\n component: Switch,\n argTypes: {\n name: { control: false },\n onChange: { control: false },\n checked: {\n type: \"boolean\",\n description: \"Control if the component is checked or not\",\n required: true,\n control: { type: \"boolean\" },\n },\n label: {\n type: \"text\",\n description: \"Any valid string\",\n required: false,\n control: { type: \"text\" },\n },\n disabled: {\n type: \"boolean\",\n description: \"Control if the component is disabled or not\",\n required: false,\n control: { type: \"boolean\" },\n },\n reversed: {\n type: \"boolean\",\n description: \"Control if the component is disabled or not\",\n required: false,\n control: { type: \"boolean\" },\n },\n size: {\n options: [\"normal\", \"small\"],\n control: { type: \"select\" },\n },\n },\n};\n\nconst Template = (args: SwitchProps) => {\n const [currentArgs, updateArgs] = useArgs();\n\n const handleChange = () => updateArgs({ checked: !currentArgs.checked });\n\n return <Switch {...args} onChange={handleChange} />;\n};\n\nexport const Default: StoryTemplate<SwitchProps> = Template.bind({});\nexport const Reversed: StoryTemplate<SwitchProps> = Template.bind({});\n\nDefault.args = {\n checked: false,\n label: \"Switch with label\",\n name: \"default Switch\",\n size: \"normal\",\n};\n\nReversed.args = {\n checked: false,\n label: \"Reversed Switch with label\",\n name: \"success Switch\",\n reversed: true,\n size: \"normal\",\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,yBAAwB;AAExB,mBAAmB;AAInB,IAAO,yBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,MAAM,EAAE,SAAS,MAAM;AAAA,IACvB,UAAU,EAAE,SAAS,MAAM;AAAA,IAC3B,SAAS;AAAA,MACP,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,OAAO;AAAA,IAC1B;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,UAAU;AAAA,MACR,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS,EAAE,MAAM,UAAU;AAAA,IAC7B;AAAA,IACA,MAAM;AAAA,MACJ,SAAS,CAAC,UAAU,OAAO;AAAA,MAC3B,SAAS,EAAE,MAAM,SAAS;AAAA,IAC5B;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,SAAsB;AACtC,QAAM,CAAC,aAAa,UAAU,QAAI,4BAAQ;AAE1C,QAAM,eAAe,MAAM,WAAW,EAAE,SAAS,CAAC,YAAY,QAAQ,CAAC;AAEvE,SAAO,6BAAAC,QAAA,cAAC,aAAAD,SAAA,EAAQ,GAAG,MAAM,UAAU,cAAc;AACnD;AAEO,MAAM,UAAsC,SAAS,KAAK,CAAC,CAAC;AAC5D,MAAM,WAAuC,SAAS,KAAK,CAAC,CAAC;AAEpE,QAAQ,OAAO;AAAA,EACb,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,MAAM;AACR;AAEA,SAAS,OAAO;AAAA,EACd,SAAS;AAAA,EACT,OAAO;AAAA,EACP,MAAM;AAAA,EACN,UAAU;AAAA,EACV,MAAM;AACR;",
|
|
6
6
|
"names": ["Switch", "React"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/layout/Carousel/Carousel.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import { action } from \"@storybook/addon-actions\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport React, { FC, ReactElement, useContext } from \"react\";\n\nimport PortfolioContentCard from \"../ContentCard/PortfolioContentCard\";\nimport Carousel from \"./\";\nimport { Props } from \"./types\";\n\ntype Args = Omit<Props, \"children\"> & { children: number };\ntype Parameters = { Slide: FC<{ index: number }> };\n\nconst SlideContext = React.createContext<ReactElement[]>([]);\nexport default {\n title: \"Layout/Carousel\",\n argTypes: {\n children: {\n description: \"The elements to be displayed.\",\n control: { type: \"range\", min: 0, max: 10, step: 1 },\n },\n variant: {\n description: \"Variant for the carousel.\",\n options: [\"default\", \"content-card\"],\n defaultValue: \"default\",\n control: \"inline-radio\",\n },\n autoPlay: {\n description: \"The time in milliseconds between automatic slide change (0 for no auto-play).\",\n },\n onNext: {\n description: \"Function called when the user moves to the next slide.\",\n },\n onPrev: {\n description: \"Function called when the user moves to the previous slide.\",\n },\n },\n args: {\n variant: \"default\",\n children: 5,\n autoPlay: 0,\n },\n parameters: {\n docs: {\n description: {\n component: \"A simple Carousel component.\",\n },\n },\n },\n decorators: [\n (Story
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAuB;AAEvB,mBAAoD;AAEpD,kCAAiC;AACjC,eAAqB;AAMrB,MAAM,eAAe,aAAAA,QAAM,cAA8B,CAAC,CAAC;AAC3D,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,IACR,UAAU;AAAA,MACR,aAAa;AAAA,MACb,SAAS,EAAE,MAAM,SAAS,KAAK,GAAG,KAAK,IAAI,MAAM,EAAE;AAAA,IACrD;AAAA,IACA,SAAS;AAAA,MACP,aAAa;AAAA,MACb,SAAS,CAAC,WAAW,cAAc;AAAA,MACnC,cAAc;AAAA,MACd,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,aAAa;AAAA,IACf;AAAA,IACA,QAAQ;AAAA,MACN,aAAa;AAAA,IACf;AAAA,IACA,QAAQ;AAAA,MACN,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,CAAC,
|
|
4
|
+
"sourcesContent": ["import { action } from \"@storybook/addon-actions\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport React, { FC, ReactElement, useContext } from \"react\";\n\nimport PortfolioContentCard from \"../ContentCard/PortfolioContentCard\";\nimport Carousel from \"./\";\nimport { Props } from \"./types\";\n\ntype Args = Omit<Props, \"children\"> & { children: number };\ntype Parameters = { Slide: FC<{ index: number }> };\n\nconst SlideContext = React.createContext<ReactElement[]>([]);\nexport default {\n title: \"Layout/Carousel\",\n argTypes: {\n children: {\n description: \"The elements to be displayed.\",\n control: { type: \"range\", min: 0, max: 10, step: 1 },\n },\n variant: {\n description: \"Variant for the carousel.\",\n options: [\"default\", \"content-card\"],\n defaultValue: \"default\",\n control: \"inline-radio\",\n },\n autoPlay: {\n description: \"The time in milliseconds between automatic slide change (0 for no auto-play).\",\n },\n onNext: {\n description: \"Function called when the user moves to the next slide.\",\n },\n onPrev: {\n description: \"Function called when the user moves to the previous slide.\",\n },\n },\n args: {\n variant: \"default\",\n children: 5,\n autoPlay: 0,\n },\n parameters: {\n docs: {\n description: {\n component: \"A simple Carousel component.\",\n },\n },\n },\n decorators: [\n (Story, { args, parameters }) => (\n <SlideContext.Provider\n value={Array.from({ length: args.children }, (_, index) => (\n <parameters.Slide key={index} index={index} />\n ))}\n >\n <Story />\n </SlideContext.Provider>\n ),\n ],\n render: ({ children, ...props }: Args) => (\n <Carousel {...props}>{useContext(SlideContext)}</Carousel>\n ),\n} satisfies Meta<Args>;\n\nexport const Default: StoryObj<Args> = {\n parameters: {\n Slide: (({ index }) => (\n <div\n style={{\n backgroundColor: `hsl(${Math.random() * 360}, 100%, 75%)`,\n padding: \"16px 24px\",\n borderRadius: \"5px\",\n }}\n >\n Slide {index}\n </div>\n )) satisfies Parameters[\"Slide\"],\n },\n};\n\nexport const PortfolioContentCards: StoryObj<Args> = {\n parameters: {\n Slide: (({ index }) => (\n <PortfolioContentCard\n title=\"Ledger Recover\"\n description=\"Get peace of mind and start your free trial.\"\n cta={index % 2 ? undefined : \"Start my free trial\"}\n tag={index % 3 ? undefined : \"New\"}\n image={(index + 1) % 4 ? IMAGE_SRC : undefined}\n onClick={() => onSlideAction(`click on slide ${index}`)}\n onClose={() => onSlideAction(`close slide ${index}`)}\n />\n )) satisfies Parameters[\"Slide\"],\n },\n};\n\nconst onSlideAction = action(\"onSlideAction\");\n\nconst IMAGE_SRC =\n \"data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='450' height='526' viewBox='0 0 450 526'><defs><linearGradient id='g' x0='0' y0='0' x1='1' y1='1'><stop stop-color='%23000' offset='0%' /><stop stop-color='%23FFF' offset='100%' /></linearGradient></defs><path d='M0,0 H450 V526 Q0,526 0,0 z' fill='url(%23g)' /></svg>\";\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,2BAAuB;AAEvB,mBAAoD;AAEpD,kCAAiC;AACjC,eAAqB;AAMrB,MAAM,eAAe,aAAAA,QAAM,cAA8B,CAAC,CAAC;AAC3D,IAAO,2BAAQ;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,IACR,UAAU;AAAA,MACR,aAAa;AAAA,MACb,SAAS,EAAE,MAAM,SAAS,KAAK,GAAG,KAAK,IAAI,MAAM,EAAE;AAAA,IACrD;AAAA,IACA,SAAS;AAAA,MACP,aAAa;AAAA,MACb,SAAS,CAAC,WAAW,cAAc;AAAA,MACnC,cAAc;AAAA,MACd,SAAS;AAAA,IACX;AAAA,IACA,UAAU;AAAA,MACR,aAAa;AAAA,IACf;AAAA,IACA,QAAQ;AAAA,MACN,aAAa;AAAA,IACf;AAAA,IACA,QAAQ;AAAA,MACN,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,SAAS;AAAA,IACT,UAAU;AAAA,IACV,UAAU;AAAA,EACZ;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA,MACb;AAAA,IACF;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,CAAC,OAAO,EAAE,MAAM,WAAW,MACzB,6BAAAA,QAAA;AAAA,MAAC,aAAa;AAAA,MAAb;AAAA,QACC,OAAO,MAAM,KAAK,EAAE,QAAQ,KAAK,SAAS,GAAG,CAAC,GAAG,UAC/C,6BAAAA,QAAA,cAAC,WAAW,OAAX,EAAiB,KAAK,OAAO,OAAc,CAC7C;AAAA;AAAA,MAED,6BAAAA,QAAA,cAAC,WAAM;AAAA,IACT;AAAA,EAEJ;AAAA,EACA,QAAQ,CAAC,EAAE,UAAU,GAAG,MAAM,MAC5B,6BAAAA,QAAA,cAAC,SAAAC,SAAA,EAAU,GAAG,aAAQ,yBAAW,YAAY,CAAE;AAEnD;AAEO,MAAM,UAA0B;AAAA,EACrC,YAAY;AAAA,IACV,OAAQ,CAAC,EAAE,MAAM,MACf,6BAAAD,QAAA;AAAA,MAAC;AAAA;AAAA,QACC,OAAO;AAAA,UACL,iBAAiB,OAAO,KAAK,OAAO,IAAI,GAAG;AAAA,UAC3C,SAAS;AAAA,UACT,cAAc;AAAA,QAChB;AAAA;AAAA,MACD;AAAA,MACQ;AAAA,IACT;AAAA,EAEJ;AACF;AAEO,MAAM,wBAAwC;AAAA,EACnD,YAAY;AAAA,IACV,OAAQ,CAAC,EAAE,MAAM,MACf,6BAAAA,QAAA;AAAA,MAAC,4BAAAE;AAAA,MAAA;AAAA,QACC,OAAM;AAAA,QACN,aAAY;AAAA,QACZ,KAAK,QAAQ,IAAI,SAAY;AAAA,QAC7B,KAAK,QAAQ,IAAI,SAAY;AAAA,QAC7B,QAAQ,QAAQ,KAAK,IAAI,YAAY;AAAA,QACrC,SAAS,MAAM,cAAc,kBAAkB,KAAK,EAAE;AAAA,QACtD,SAAS,MAAM,cAAc,eAAe,KAAK,EAAE;AAAA;AAAA,IACrD;AAAA,EAEJ;AACF;AAEA,MAAM,oBAAgB,6BAAO,eAAe;AAE5C,MAAM,YACJ;",
|
|
6
6
|
"names": ["React", "Carousel", "PortfolioContentCard"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/layout/Drawer/Drawer.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport { useArgs } from \"@storybook/manager-api\";\n\nimport Button from \"../../cta/Button\";\nimport Drawer, { DrawerProps } from \"./index\";\nimport { Flex } from \"../index\";\n\nexport default {\n title: \"Layout/Drawer\",\n component: Drawer,\n argTypes: {\n isOpen: {\n type: \"boolean\",\n value: true,\n description: \"Is open\",\n required: false,\n control: {\n type: \"boolean\",\n },\n },\n title: {\n type: \"text\",\n description: \"Side default title\",\n defaultValue: \"Default title\",\n control: {\n type: \"text\",\n },\n required: false,\n },\n backgroundColor: {\n control: {\n type: \"color\",\n presetColors: [\"coral\", \"tomato\", \"orange\", \"blue\", \"purple\"],\n },\n },\n big: {\n type: \"boolean\",\n value: true,\n description: \"Larger width side drawer.\",\n required: false,\n control: {\n type: \"boolean\",\n },\n },\n ignoreBackdropClick: {\n type: \"boolean\",\n value: true,\n description: \"Prevent drawer from calling onClose when clicking on the backdrop.\",\n required: false,\n control: {\n type: \"boolean\",\n },\n },\n },\n};\n\nconst Template = ({ title, big, ignoreBackdropClick, backgroundColor, direction }: DrawerProps) => {\n const [{ isOpen }, updateArgs] = useArgs();\n\n return (\n <div>\n <Button variant={\"main\"} onClick={() => updateArgs({ isOpen: true })} style={{ flex: 1 }}>\n Open\n </Button>\n <Drawer\n isOpen={isOpen}\n onClose={() => updateArgs({ isOpen: false })}\n title={title}\n big={big}\n footer={\n <Flex flex={1} justifyContent=\"flex-end\">\n <Button variant={\"main\"} onClick={() => updateArgs({ isOpen: false })}>\n Close\n </Button>\n </Flex>\n }\n ignoreBackdropClick={ignoreBackdropClick}\n backgroundColor={backgroundColor}\n direction={direction}\n >\n <Flex flexDirection={\"column\"}>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit mi, tempus sed justo\n et, viverra mattis lorem. Praesent odio ligula, facilisis id porttitor tempor, cursus at\n metus. Etiam consequat ante efficitur sodales iaculis. Aliquam at justo vel erat\n eleifend semper eu non lorem. Cras porta, dolor a porttitor varius, augue lectus congue\n lorem, nec lobortis urna ipsum quis lorem. Nam quis auctor lacus. Aenean sit amet dictum\n purus, at convallis neque. Etiam ac augue non risus luctus laoreet eget a est. Curabitur\n magna purus, fermentum at eros a, faucibus sollicitudin erat. Proin purus sem, lacinia\n tincidunt ornare et, sollicitudin nec libero. Quisque lobortis dui ac lacus mollis\n posuere. Morbi vitae ligula commodo, scelerisque sapien quis, vulputate justo. Cras\n sagittis, ligula quis mollis porttitor, massa neque faucibus mauris, quis consectetur\n eros nibh a ante. Quisque ac porttitor ante. Curabitur in neque a nisl aliquet finibus.\n Mauris in sapien nec odio molestie vulputate. Suspendisse vitae lorem non quam dapibus\n cursus sit amet a mauris.\n </p>\n <p>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed elit mi, tempus sed justo\n et, viverra mattis lorem. Praesent odio ligula, facilisis id porttitor tempor, cursus at\n metus. Etiam consequat ante efficitur sodales iaculis. Aliquam at justo vel erat\n eleifend semper eu non lorem. Cras porta, dolor a porttitor varius, augue lectus congue\n lorem, nec lobortis urna ipsum quis lorem. Nam quis auctor lacus. Aenean sit amet dictum\n purus, at convallis neque. Etiam ac augue non risus luctus laoreet eget a est. Curabitur\n magna purus, fermentum at eros a, faucibus sollicitudin erat. Proin purus sem, lacinia\n tincidunt ornare et, sollicitudin nec libero. Quisque lobortis dui ac lacus mollis\n posuere. Morbi vitae ligula commodo, scelerisque sapien quis, vulputate justo. Cras\n sagittis, ligula quis mollis porttitor, massa neque faucibus mauris, quis consectetur\n eros nibh a ante. Quisque ac porttitor ante. Curabitur in neque a nisl aliquet finibus.\n Mauris in sapien nec odio molestie vulputate. Suspendisse vitae lorem non quam dapibus\n cursus sit amet a mauris.\n </p>\n\n <Flex>\n <Button\n variant={\"main\"}\n onClick={() => updateArgs({ isOpen: false })}\n style={{ flex: 1 }}\n >\n {\"Fermer\"}\n </Button>\n </Flex>\n </Flex>\n </Drawer>\n </div>\n );\n};\n\nexport const Default = Template.bind({});\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,yBAAwB;AAExB,oBAAmB;AACnB,mBAAoC;AACpC,eAAqB;AAErB,IAAO,yBAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,aAAAA;AAAA,EACX,UAAU;AAAA,IACR,QAAQ;AAAA,MACN,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,MACA,UAAU;AAAA,IACZ;AAAA,IACA,iBAAiB;AAAA,MACf,SAAS;AAAA,QACP,MAAM;AAAA,QACN,cAAc,CAAC,SAAS,UAAU,UAAU,QAAQ,QAAQ;AAAA,MAC9D;AAAA,IACF;AAAA,IACA,KAAK;AAAA,MACH,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,IACA,qBAAqB;AAAA,MACnB,MAAM;AAAA,MACN,OAAO;AAAA,MACP,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,QACP,MAAM;AAAA,MACR;AAAA,IACF;AAAA,EACF;AACF;AAEA,MAAM,WAAW,CAAC,EAAE,OAAO,KAAK,qBAAqB,iBAAiB,UAAU,MAAmB;AACjG,QAAM,CAAC,EAAE,OAAO,GAAG,UAAU,QAAI,4BAAQ;AAEzC,SACE,6BAAAC,QAAA,cAAC,aACC,6BAAAA,QAAA,cAAC,cAAAC,SAAA,EAAO,SAAS,QAAQ,SAAS,MAAM,WAAW,EAAE,QAAQ,KAAK,CAAC,GAAG,OAAO,EAAE,MAAM,EAAE,KAAG,MAE1F,GACA,6BAAAD,QAAA;AAAA,IAAC,aAAAD;AAAA,IAAA;AAAA,MACC;AAAA,MACA,SAAS,MAAM,WAAW,EAAE,QAAQ,MAAM,CAAC;AAAA,MAC3C;AAAA,MACA;AAAA,MACA,QACE,6BAAAC,QAAA,cAAC,iBAAK,MAAM,GAAG,gBAAe,cAC5B,6BAAAA,QAAA,cAAC,cAAAC,SAAA,EAAO,SAAS,QAAQ,SAAS,MAAM,WAAW,EAAE,QAAQ,MAAM,CAAC,KAAG,OAEvE,CACF;AAAA,MAEF;AAAA,MACA;AAAA,MACA;AAAA;AAAA,IAEA,6BAAAD,QAAA,cAAC,iBAAK,eAAe,YACnB,6BAAAA,QAAA,cAAC,WAAE,yiCAcH,GACA,6BAAAA,QAAA,cAAC,WAAE,yiCAcH,GAEA,6BAAAA,QAAA,cAAC,qBACC,6BAAAA,QAAA;AAAA,MAAC,cAAAC;AAAA,MAAA;AAAA,QACC,SAAS;AAAA,QACT,SAAS,MAAM,WAAW,EAAE,QAAQ,MAAM,CAAC;AAAA,QAC3C,OAAO,EAAE,MAAM,EAAE;AAAA;AAAA,MAEhB;AAAA,IACH,CACF,CACF;AAAA,EACF,CACF;AAEJ;AAEO,MAAM,UAAU,SAAS,KAAK,CAAC,CAAC;",
|
|
6
6
|
"names": ["Drawer", "React", "Button"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/layout/Popin/Popin.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/manager-api\";\nimport { action } from \"@storybook/addon-actions\";\n\nimport Popin, { PopinProps } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport Button from \"../../cta/Button\";\nimport theme from \"../../../styles/theme\";\n\nconst description = `\n### This is a customizable pop-in component.\n\nThe component exports by default the container that defines how the component should be animated during the mount/unmount process.<br />\nIn addition to that, 3 different sections *(header, body and footer)* of the component are already designed and attached to the Popin default component.<br />\n\n## Usage\n\n\\`\\`\\`js\n\nimport { Popin } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\nFrom the default Popin component, you can access 3 different pre-styled sections *(\\`Popin.Header\\`, \\`Popin.Body\\` and \\`Popin.Footer\\`)*. \\\nAll of these components are optional.\n\n- \\`Popin.Header\\` is accepting an onClose callback. The cross icon is only rendered if the onClose callback is provided\n- \\`Popin.Body\\` is just a customizable scrollable Flex component configured to take all the available space\n- \\`Popin.Footer\\` is a customizable Flex component\n\n## Sandbox\n\nPlacement, style and content can be customized using props as demonstrated in the following example.<br />\nAdditionally, the story provide some playground options to play with the component. These options aren't \\\nprops of the component itself.\n`;\n\nconst code = `\n<Popin isOpen={isOpen}>\n <Popin.Header onClose={onBack} onClose={onBack}><Text variant=\"h5\">A title</Text></Popin.Header>\n <Popin.Body><Text variant=\"paragraph\">Some texts here</Text></Popin.Body>\n <Popin.Footer>\n <Button type=\"main\" onClick={onClick}>\n Next\n </Button>\n </Popin.Footer>\n</Popin>\n`;\n\nexport default {\n title: \"Layout/Popin\",\n component: Popin,\n parameters: {\n docs: {\n description: { component: description },\n source: { code, type: \"code\" },\n },\n },\n argTypes: {\n /** PROPS **/\n width: {\n type: \"number\",\n description: \"Optional popin's width\",\n control: {\n type: \"number\",\n min: theme.sizes.drawer.popin.min.width,\n max: theme.sizes.drawer.popin.max.width,\n },\n table: {\n type: {\n summary: \"Accepted range\",\n detail: `Value lower than ${theme.sizes.drawer.popin.min.width}px or greather than ${theme.sizes.drawer.popin.max.width}px will have no effect because of min/max css rules.`,\n },\n defaultValue: {\n summary: theme.sizes.drawer.popin.min.width,\n },\n },\n },\n height: {\n type: \"number\",\n description: \"Optional popin's height\",\n control: {\n type: \"number\",\n min: theme.sizes.drawer.popin.min.height,\n max: theme.sizes.drawer.popin.max.height,\n },\n table: {\n type: {\n summary: \"Accepted range\",\n detail: `Value lower than ${theme.sizes.drawer.popin.min.height}px or greather than ${theme.sizes.drawer.popin.max.height}px will have no effect because of min/max css rules.`,\n },\n defaultValue: {\n summary: theme.sizes.drawer.popin.min.height,\n },\n },\n },\n isOpen: {\n type: \"boolean\",\n description: \"Controls if the popin is mounted or not.\",\n required: true,\n control: { type: \"boolean\" },\n },\n onClose: {\n description:\n \"Unmount the component when the user click on the cross icon. This props controls if the cross icon should be rendered inside the header component.\",\n control: false,\n },\n\n /** playground **/\n hasHeader: {\n type: \"boolean\",\n value: true,\n description: \"Controls if the header should be displayed.\",\n required: true,\n control: { type: \"boolean\" },\n table: { category: \"playground\" },\n },\n hasFooter: {\n type: \"boolean\",\n value: true,\n description: \"Controls if the footer should be displayed.\",\n required: true,\n control: { type: \"boolean\" },\n table: { category: \"playground\" },\n },\n isCloseDisplayed: {\n type: \"boolean\",\n description: \"Controls if the close button should be rendered.\",\n required: true,\n control: { type: \"boolean\" },\n table: { category: \"playground\" },\n },\n isBackDisplayed: {\n type: \"boolean\",\n description: \"Controls if the back button should be rendered.\",\n required: true,\n control: { type: \"boolean\" },\n table: { category: \"playground\" },\n },\n \"Header.Children.Text\": {\n type: \"text\",\n description:\n \"Any valid text. This parameter is passed to a Text component as children. The Text component is the children of the Header component.\",\n required: true,\n control: { type: \"text\" },\n table: { category: \"playground\" },\n },\n \"Body.Children.Text\": {\n type: \"text\",\n description:\n \"Any valid text. This parameter is passed to a Text component as children. The Text component is the children of the Body component.\",\n required: true,\n control: { type: \"text\" },\n table: { category: \"playground\" },\n },\n },\n args: {\n width: theme.sizes.drawer.popin.max.width,\n height: theme.sizes.drawer.popin.max.height,\n isOpen: true,\n hasHeader: true,\n hasFooter: true,\n isCloseDisplayed: true,\n isBackDisplayed: true,\n \"Body.Children.Text\": `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor.`,\n \"Header.Children.Text\": \"This is a fake title\",\n },\n};\n\ntype playgroundProps = {\n \"Header.Children.Text\": string;\n \"Body.Children.Text\": string;\n hasHeader: boolean;\n hasFooter: boolean;\n isCloseDisplayed: boolean;\n isBackDisplayed: boolean;\n};\n\nconst Template = (args: PopinProps & playgroundProps) => {\n const [, updateArgs] = useArgs();\n\n /* Allow interactive controls from the story. Thanks to this, triggering onClose\n ** function from the component itself (by clicking on the cross icon e.g.)\n ** will update the value of the isOpen props.\n */\n const onClose = () => updateArgs({ isOpen: false });\n\n return (\n <>\n <Button variant=\"shade\" onClick={() => updateArgs({ isOpen: true })}>\n Open the modal\n </Button>\n <Popin {...args}>\n {args.hasHeader ? (\n <Popin.Header\n onBack={args.isBackDisplayed ? action(\"previous\") : undefined}\n onClose={args.isCloseDisplayed ? onClose : undefined}\n >\n <Text variant=\"h5\">{args[\"Header.Children.Text\"]}</Text>\n </Popin.Header>\n ) : null}\n <Popin.Body>\n <Text variant=\"paragraph\">{args[\"Body.Children.Text\"]}</Text>\n </Popin.Body>\n {args.hasFooter ? (\n <Popin.Footer flexDirection=\"row-reverse\">\n <Button variant=\"main\" onClick={action(\"next\")}>\n Next\n </Button>\n </Popin.Footer>\n ) : null}\n </Popin>\n </>\n );\n};\n\nexport const Default = Template.bind({});\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport { useArgs } from \"@storybook/manager-api\";\nimport { action } from \"@storybook/addon-actions\";\n\nimport Popin, { PopinProps } from \"./index\";\nimport Text from \"../../asorted/Text\";\nimport Button from \"../../cta/Button\";\nimport theme from \"../../../styles/theme\";\n\nconst description = `\n### This is a customizable pop-in component.\n\nThe component exports by default the container that defines how the component should be animated during the mount/unmount process.<br />\nIn addition to that, 3 different sections *(header, body and footer)* of the component are already designed and attached to the Popin default component.<br />\n\n## Usage\n\n\\`\\`\\`js\n\nimport { Popin } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\nFrom the default Popin component, you can access 3 different pre-styled sections *(\\`Popin.Header\\`, \\`Popin.Body\\` and \\`Popin.Footer\\`)*. \\\nAll of these components are optional.\n\n- \\`Popin.Header\\` is accepting an onClose callback. The cross icon is only rendered if the onClose callback is provided\n- \\`Popin.Body\\` is just a customizable scrollable Flex component configured to take all the available space\n- \\`Popin.Footer\\` is a customizable Flex component\n\n## Sandbox\n\nPlacement, style and content can be customized using props as demonstrated in the following example.<br />\nAdditionally, the story provide some playground options to play with the component. These options aren't \\\nprops of the component itself.\n`;\n\nconst code = `\n<Popin isOpen={isOpen}>\n <Popin.Header onClose={onBack} onClose={onBack}><Text variant=\"h5\">A title</Text></Popin.Header>\n <Popin.Body><Text variant=\"paragraph\">Some texts here</Text></Popin.Body>\n <Popin.Footer>\n <Button type=\"main\" onClick={onClick}>\n Next\n </Button>\n </Popin.Footer>\n</Popin>\n`;\n\nexport default {\n title: \"Layout/Popin\",\n component: Popin,\n parameters: {\n docs: {\n description: { component: description },\n source: { code, type: \"code\" },\n },\n },\n argTypes: {\n /** PROPS **/\n width: {\n type: \"number\",\n description: \"Optional popin's width\",\n control: {\n type: \"number\",\n min: theme.sizes.drawer.popin.min.width,\n max: theme.sizes.drawer.popin.max.width,\n },\n table: {\n type: {\n summary: \"Accepted range\",\n detail: `Value lower than ${theme.sizes.drawer.popin.min.width}px or greather than ${theme.sizes.drawer.popin.max.width}px will have no effect because of min/max css rules.`,\n },\n defaultValue: {\n summary: theme.sizes.drawer.popin.min.width,\n },\n },\n },\n height: {\n type: \"number\",\n description: \"Optional popin's height\",\n control: {\n type: \"number\",\n min: theme.sizes.drawer.popin.min.height,\n max: theme.sizes.drawer.popin.max.height,\n },\n table: {\n type: {\n summary: \"Accepted range\",\n detail: `Value lower than ${theme.sizes.drawer.popin.min.height}px or greather than ${theme.sizes.drawer.popin.max.height}px will have no effect because of min/max css rules.`,\n },\n defaultValue: {\n summary: theme.sizes.drawer.popin.min.height,\n },\n },\n },\n isOpen: {\n type: \"boolean\",\n description: \"Controls if the popin is mounted or not.\",\n required: true,\n control: { type: \"boolean\" },\n },\n onClose: {\n description:\n \"Unmount the component when the user click on the cross icon. This props controls if the cross icon should be rendered inside the header component.\",\n control: false,\n },\n\n /** playground **/\n hasHeader: {\n type: \"boolean\",\n value: true,\n description: \"Controls if the header should be displayed.\",\n required: true,\n control: { type: \"boolean\" },\n table: { category: \"playground\" },\n },\n hasFooter: {\n type: \"boolean\",\n value: true,\n description: \"Controls if the footer should be displayed.\",\n required: true,\n control: { type: \"boolean\" },\n table: { category: \"playground\" },\n },\n isCloseDisplayed: {\n type: \"boolean\",\n description: \"Controls if the close button should be rendered.\",\n required: true,\n control: { type: \"boolean\" },\n table: { category: \"playground\" },\n },\n isBackDisplayed: {\n type: \"boolean\",\n description: \"Controls if the back button should be rendered.\",\n required: true,\n control: { type: \"boolean\" },\n table: { category: \"playground\" },\n },\n \"Header.Children.Text\": {\n type: \"text\",\n description:\n \"Any valid text. This parameter is passed to a Text component as children. The Text component is the children of the Header component.\",\n required: true,\n control: { type: \"text\" },\n table: { category: \"playground\" },\n },\n \"Body.Children.Text\": {\n type: \"text\",\n description:\n \"Any valid text. This parameter is passed to a Text component as children. The Text component is the children of the Body component.\",\n required: true,\n control: { type: \"text\" },\n table: { category: \"playground\" },\n },\n },\n args: {\n width: theme.sizes.drawer.popin.max.width,\n height: theme.sizes.drawer.popin.max.height,\n isOpen: true,\n hasHeader: true,\n hasFooter: true,\n isCloseDisplayed: true,\n isBackDisplayed: true,\n \"Body.Children.Text\": `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus dignissim fermentum lectus, eu aliquet arcu tincidunt a. Etiam dapibus dolor at felis pretium, a posuere turpis dapibus. Mauris id felis et quam accumsan congue. Curabitur auctor nunc nec augue suscipit sagittis. Nunc eu eros varius, bibendum ligula id, molestie quam. Nam ac sem et mi pellentesque rhoncus sed eu nisi. Maecenas auctor elit at sollicitudin imperdiet. Sed mollis eros at nunc malesuada posuere. Suspendisse luctus commodo porttitor.`,\n \"Header.Children.Text\": \"This is a fake title\",\n },\n};\n\ntype playgroundProps = {\n \"Header.Children.Text\": string;\n \"Body.Children.Text\": string;\n hasHeader: boolean;\n hasFooter: boolean;\n isCloseDisplayed: boolean;\n isBackDisplayed: boolean;\n};\n\nconst Template = (args: PopinProps & playgroundProps) => {\n const [, updateArgs] = useArgs();\n\n /* Allow interactive controls from the story. Thanks to this, triggering onClose\n ** function from the component itself (by clicking on the cross icon e.g.)\n ** will update the value of the isOpen props.\n */\n const onClose = () => updateArgs({ isOpen: false });\n\n return (\n <>\n <Button variant=\"shade\" onClick={() => updateArgs({ isOpen: true })}>\n Open the modal\n </Button>\n <Popin {...args}>\n {args.hasHeader ? (\n <Popin.Header\n onBack={args.isBackDisplayed ? action(\"previous\") : undefined}\n onClose={args.isCloseDisplayed ? onClose : undefined}\n >\n <Text variant=\"h5\">{args[\"Header.Children.Text\"]}</Text>\n </Popin.Header>\n ) : null}\n <Popin.Body>\n <Text variant=\"paragraph\">{args[\"Body.Children.Text\"]}</Text>\n </Popin.Body>\n {args.hasFooter ? (\n <Popin.Footer flexDirection=\"row-reverse\">\n <Button variant=\"main\" onClick={action(\"next\")}>\n Next\n </Button>\n </Popin.Footer>\n ) : null}\n </Popin>\n </>\n );\n};\n\nexport const Default = Template.bind({});\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["Popin", "theme", "React", "Button", "Text"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/components/navigation/FlowStepper/FlowStepper.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React, { useMemo } from \"react\";\nimport { TransitionGroup, CSSTransition } from \"react-transition-group\";\nimport styled from \"styled-components\";\n// @ts-expect-error Typings\u2026\nimport { useArgs } from \"@storybook/manager-api\";\nimport { Props as FlowStepperProps } from \"./index\";\nimport { Divider, Flex, FlowStepper, Text, Button, Box, Link, IconsLegacy, Tag } from \"../../..\";\nimport type { Size as TagSize } from \"../../Tag\";\nimport { lipsum, StoryTemplate } from \"../../helpers\";\nimport { useState } from \"react\";\n\nconst description = `\n### A customizable flow layout.\n\nThis component accepts multiple children as steps and displays the active one as well\na progress stepper and optionally a header and/or a footer.\n\n## Usage\n\n\\`\\`\\`js\n\nimport { FlowStepper } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\nEach step is a child of the component, which must be a JSX element having at least a \\`label\\` prop.\nThis label will be used by the flow stepper to populate the name of the step inside the progress stepper component.\n\n### Tip #1:\nTo avoid creating specific passthrough components you can use the \\`<FlowStepper.Step label=\"Step label\">{\u2026}</FlowStepper.Step>\\` helper.\n\n### Tip #2:\nYou can define a specific header/footer for a given step by using the props \\`header\\`/\\`footer\\` on each step child of the component.\n\n\\`\\`\\`jsx\n<FlowStepper\n activeIndex={1}\n renderStepFooter={ // Optional\n ({activeIndex, stepsLength, children}) => (\n <YourFooterWrapper>\n {children}\n </YourFooterWrapper>\n )\n }\n>\n <YourStepA label=\"StepA\" />\n <YourStepB label=\"StepB\" footer={<YourStepBFooter />}/>\n <YourStepC label=\"StepC\" />\n <YourStepD label=\"StepD\" />\n</FlowStepper.Indexed>\n\\`\\`\\`\n\n### Tip #3:\nIf you want to define steps that are identified by a \\`string\\` identifier, you can use FlowStepper with the \\`activeKey\\` prop and children that each have an \\`itemKey\\` prop.\nThis allows you to not have to hardcode steps indices.\n\n\\`\\`\\`jsx\n<FlowStepper.Indexed activeKey=\"stepC\">\n <YourStepA label=\"StepA\" itemKey=\"stepA\" />\n <YourStepB label=\"StepB\" itemKey=\"stepB\" />\n <YourStepC label=\"StepC\" itemKey=\"stepC\" />\n <YourStepD label=\"StepD\" itemKey=\"stepD\" />\n</FlowStepper.Indexed>\n\\`\\`\\`\n\n\n## Basic example:\n\n\\`\\`\\`jsx\nconst NB_OF_STEPS = 10;\nconst [activeIndex, setActiveIndex] = React.useState(0);\n\n<FlowStepper\n activeIndex={activeIndex}\n header={() => (\n <Text variant=\"h1\">\n Header - Page n\u00B0{activeIndex + 1} / {NB_OF_STEPS}\n </Text>\n )}\n footer={() => (\n <Flex mt={6} flexDirection=\"column\" rowGap={6} alignItems=\"flex-end\">\n <Box alignSelf=\"stretch\">\n <Divider variant=\"light\" />\n </Box>\n <Flex columnGap={6}>\n <Button\n variant=\"main\"\n outline\n disabled={activeIndex <= 0}\n onClick={() => setActiveIndex(i => i - 1)}\n >\n Previous\n </Button>\n <Button\n variant=\"main\"\n disabled={activeIndex >= NB_OF_STEPS - 1}\n onClick={() => setActiveIndex(i => i + 1)}\n >\n Continue\n </Button>\n </Flex>\n </Flex>\n )}\n>\n {new Array(NB_OF_STEPS).fill(0).map((_, index) => (\n <FlowStepper.Step label={\"Step \" + index}>\n <Text key={index} variant=\"body\">\n {lipsum}\n </Text>\n </FlowStepper.Step>\n ))}\n</FlowStepper>\n\\`\\`\\`\n\n\n`;\n\nexport default {\n title: \"Navigation/FlowStepper\",\n component: FlowStepper,\n argTypes: {\n activeIndex: { control: \"number\" },\n extraProps: { control: \"disabled\" },\n extraContainerProps: { control: \"disabled\" },\n extraStepperProps: { control: \"disabled\" },\n extraStepperContainerProps: { control: \"disabled\" },\n children: { control: \"disabled\" },\n renderChildren: { control: \"disabled\" },\n header: { control: \"disabled\" },\n stepHeaders: { control: \"disabled\" },\n renderStepHeader: { control: \"disabled\" },\n footer: { control: \"disabled\" },\n stepFooters: { control: \"disabled\" },\n renderStepFooter: { control: \"disabled\" },\n },\n args: {\n activeIndex: 0,\n },\n parameters: {\n docs: {\n description: {\n component: description,\n },\n },\n },\n};\n\nconst NB_OF_STEPS = 5;\nexport const Minimal: StoryTemplate<FlowStepperProps<unknown>> = args => {\n const { activeIndex, ...rest } = args;\n const [, updateArgs] = useArgs();\n\n return (\n <FlowStepper\n activeIndex={activeIndex}\n header={() => (\n <Text variant=\"h1\">\n Header - Page n\u00B0{activeIndex + 1} / {NB_OF_STEPS}\n </Text>\n )}\n footer={() => (\n <Flex mt={6} flexDirection=\"column\" rowGap={6} alignItems=\"flex-end\">\n <Box alignSelf=\"stretch\">\n <Divider />\n </Box>\n <Flex columnGap={6}>\n <Button\n variant=\"main\"\n outline\n disabled={activeIndex <= 0}\n onClick={() => updateArgs({ activeIndex: activeIndex - 1 })}\n >\n Previous\n </Button>\n <Button\n variant=\"main\"\n disabled={activeIndex >= NB_OF_STEPS - 1}\n onClick={() => updateArgs({ activeIndex: activeIndex + 1 })}\n >\n Continue\n </Button>\n </Flex>\n </Flex>\n )}\n {...rest}\n >\n {[\n ...new Array(NB_OF_STEPS).fill(0).map((_, index) => (\n <FlowStepper.Step label={\"Step \" + index}>\n <Text key={index} variant=\"body\">\n {lipsum}\n </Text>\n <Button mt={2} onClick={() => updateArgs({ activeIndex: NB_OF_STEPS })}>\n Navigate to the hidden step.\n </Button>\n </FlowStepper.Step>\n )),\n <FlowStepper.Step label=\"Hidden Step\" hidden>\n <Text key=\"hidden\" variant=\"body\">\n I am hidden.\n </Text>\n </FlowStepper.Step>,\n ]}\n </FlowStepper>\n );\n};\n\nconst Header = ({ activeIndex, onBack }: { activeIndex: number; onBack?: () => void }) => {\n return (\n <Box position=\"relative\" my={6}>\n {onBack && (\n <Box position=\"absolute\">\n <Link onClick={onBack} Icon={IconsLegacy.ArrowLeftMedium} iconPosition=\"left\">\n Back\n </Link>\n </Box>\n )}\n <Flex justifyContent=\"center\">\n <Text variant=\"h2\">Header {activeIndex + 1}</Text>\n </Flex>\n </Box>\n );\n};\n\nconst Footer = ({\n onContinue,\n children,\n}: {\n onContinue?: () => void;\n children?: React.ReactNode;\n}) => (\n <Flex mt={6} flexDirection=\"column\" rowGap={6}>\n <Box alignSelf=\"stretch\">\n <Divider />\n </Box>\n <Flex flexDirection=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n {children || <Flex />}\n {onContinue && (\n <Button variant=\"main\" onClick={onContinue}>\n Continue\n </Button>\n )}\n </Flex>\n </Flex>\n);\n\nconst AnimatedItem = styled(Flex)`\n transition: opacity 500ms;\n width: 100%;\n height: 100%;\n &.step-enter {\n opacity: 0;\n }\n &.step-enter-active {\n opacity: 1;\n }\n &.step-exit {\n opacity: 1;\n }\n &.step-exit-active {\n opacity: 0;\n }\n`;\nconst Item = ({ label }: { label: string }) => (\n <AnimatedItem>\n <Flex\n position=\"absolute\"\n left=\"0\"\n right=\"0\"\n top=\"0\"\n bottom=\"0\"\n alignItems=\"center\"\n justifyContent=\"center\"\n backgroundColor={`${label.toLowerCase()}.c50`}\n >\n <Text variant=\"h2\" textTransform=\"capitalize\">\n {label}\n </Text>\n </Flex>\n </AnimatedItem>\n);\n\nconst steps = [\"Primary\", \"Neutral\", \"Success\", \"Warning\", \"Error\"];\n\nconst StepFooter = ({ label }: { label: string }) => (\n <Flex flexDirection=\"row\" alignItems=\"center\">\n <Text whiteSpace=\"pre\">Footer for step </Text>\n <Tag size={\"medium\" as TagSize} type=\"plain\" active>\n {label}\n </Tag>\n </Flex>\n);\n\nexport const Demo: StoryTemplate<FlowStepperProps<unknown>> = args => {\n const [, updateArgs] = useArgs();\n\n return (\n <Flex height=\"90vh\">\n <FlowStepper\n header={({ activeIndex }) => (\n <Header\n activeIndex={activeIndex}\n onBack={\n activeIndex > 0\n ? () => {\n updateArgs({ activeIndex: activeIndex - 1 });\n }\n : undefined\n }\n />\n )}\n renderStepFooter={({ stepsLength, activeIndex, children }) => (\n <Footer\n onContinue={\n activeIndex < stepsLength - 1\n ? () => {\n updateArgs({ activeIndex: activeIndex + 1 });\n }\n : undefined\n }\n >\n {children}\n </Footer>\n )}\n extraStepperContainerProps={{ my: 12 }}\n extraStepperProps={{ maxWidth: \"500px\" }}\n renderChildren={({ children }) => (\n <TransitionGroup component={null}>{children}</TransitionGroup>\n )}\n {...args}\n >\n {steps.map(label => (\n <CSSTransition\n key={label}\n label={label}\n footer={<StepFooter label={label} />}\n timeout={500}\n classNames=\"step\"\n mountOnEnter\n unmountOnExit\n >\n <Item label={label} />\n </CSSTransition>\n ))}\n </FlowStepper>\n </Flex>\n );\n};\n\nconst StepWithNavigation = (props: { label: string; setActiveStep: (arg: string) => void }) => {\n const { label, setActiveStep } = props;\n const content = useMemo(() => {\n return steps.map(step => {\n return (\n <Button\n key={step}\n disabled={step === label}\n variant=\"main\"\n onClick={() => setActiveStep(step)}\n >\n Go to \"{step}\"\n </Button>\n );\n });\n }, [setActiveStep, label]);\n return (\n <Flex\n flex={1}\n flexDirection=\"column\"\n justifyContent=\"center\"\n alignItems=\"center\"\n padding={4}\n rowGap={4}\n backgroundColor={`${label.toLowerCase()}.c50`}\n >\n {content}\n </Flex>\n );\n};\n\nexport const IndexedByKey: StoryTemplate<FlowStepperProps<unknown>> = args => {\n const [activeStep, setActiveStep] = useState(steps[0]);\n return (\n <Flex height=\"90vh\">\n <FlowStepper.Indexed\n activeKey={activeStep}\n header={({ activeIndex }) => (\n <Header\n activeIndex={activeIndex}\n onBack={\n activeIndex > 0\n ? () => {\n setActiveStep(steps[activeIndex - 1]);\n }\n : undefined\n }\n />\n )}\n footer={({ stepsLength, activeIndex }) => (\n <Footer\n onContinue={\n activeIndex < stepsLength - 1\n ? () => {\n setActiveStep(steps[activeIndex + 1]);\n }\n : undefined\n }\n />\n )}\n extraStepperContainerProps={{ my: 12 }}\n extraStepperProps={{ maxWidth: \"500px\" }}\n {...args}\n >\n {steps.map(label => (\n <FlowStepper.Indexed.Step key={label} label={label} itemKey={label}>\n <StepWithNavigation label={label} setActiveStep={setActiveStep} />\n </FlowStepper.Indexed.Step>\n ))}\n </FlowStepper.Indexed>\n </Flex>\n );\n};\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA+B;AAC/B,oCAA+C;AAC/C,+BAAmB;
|
|
4
|
+
"sourcesContent": ["import React, { useMemo } from \"react\";\nimport { TransitionGroup, CSSTransition } from \"react-transition-group\";\nimport styled from \"styled-components\";\nimport { useArgs } from \"@storybook/manager-api\";\nimport { Props as FlowStepperProps } from \"./index\";\nimport { Divider, Flex, FlowStepper, Text, Button, Box, Link, IconsLegacy, Tag } from \"../../..\";\nimport type { Size as TagSize } from \"../../Tag\";\nimport { lipsum, StoryTemplate } from \"../../helpers\";\nimport { useState } from \"react\";\n\nconst description = `\n### A customizable flow layout.\n\nThis component accepts multiple children as steps and displays the active one as well\na progress stepper and optionally a header and/or a footer.\n\n## Usage\n\n\\`\\`\\`js\n\nimport { FlowStepper } from \"@ledgerhq/react-ui\"\n\n\\`\\`\\`\n\nEach step is a child of the component, which must be a JSX element having at least a \\`label\\` prop.\nThis label will be used by the flow stepper to populate the name of the step inside the progress stepper component.\n\n### Tip #1:\nTo avoid creating specific passthrough components you can use the \\`<FlowStepper.Step label=\"Step label\">{\u2026}</FlowStepper.Step>\\` helper.\n\n### Tip #2:\nYou can define a specific header/footer for a given step by using the props \\`header\\`/\\`footer\\` on each step child of the component.\n\n\\`\\`\\`jsx\n<FlowStepper\n activeIndex={1}\n renderStepFooter={ // Optional\n ({activeIndex, stepsLength, children}) => (\n <YourFooterWrapper>\n {children}\n </YourFooterWrapper>\n )\n }\n>\n <YourStepA label=\"StepA\" />\n <YourStepB label=\"StepB\" footer={<YourStepBFooter />}/>\n <YourStepC label=\"StepC\" />\n <YourStepD label=\"StepD\" />\n</FlowStepper.Indexed>\n\\`\\`\\`\n\n### Tip #3:\nIf you want to define steps that are identified by a \\`string\\` identifier, you can use FlowStepper with the \\`activeKey\\` prop and children that each have an \\`itemKey\\` prop.\nThis allows you to not have to hardcode steps indices.\n\n\\`\\`\\`jsx\n<FlowStepper.Indexed activeKey=\"stepC\">\n <YourStepA label=\"StepA\" itemKey=\"stepA\" />\n <YourStepB label=\"StepB\" itemKey=\"stepB\" />\n <YourStepC label=\"StepC\" itemKey=\"stepC\" />\n <YourStepD label=\"StepD\" itemKey=\"stepD\" />\n</FlowStepper.Indexed>\n\\`\\`\\`\n\n\n## Basic example:\n\n\\`\\`\\`jsx\nconst NB_OF_STEPS = 10;\nconst [activeIndex, setActiveIndex] = React.useState(0);\n\n<FlowStepper\n activeIndex={activeIndex}\n header={() => (\n <Text variant=\"h1\">\n Header - Page n\u00B0{activeIndex + 1} / {NB_OF_STEPS}\n </Text>\n )}\n footer={() => (\n <Flex mt={6} flexDirection=\"column\" rowGap={6} alignItems=\"flex-end\">\n <Box alignSelf=\"stretch\">\n <Divider variant=\"light\" />\n </Box>\n <Flex columnGap={6}>\n <Button\n variant=\"main\"\n outline\n disabled={activeIndex <= 0}\n onClick={() => setActiveIndex(i => i - 1)}\n >\n Previous\n </Button>\n <Button\n variant=\"main\"\n disabled={activeIndex >= NB_OF_STEPS - 1}\n onClick={() => setActiveIndex(i => i + 1)}\n >\n Continue\n </Button>\n </Flex>\n </Flex>\n )}\n>\n {new Array(NB_OF_STEPS).fill(0).map((_, index) => (\n <FlowStepper.Step label={\"Step \" + index}>\n <Text key={index} variant=\"body\">\n {lipsum}\n </Text>\n </FlowStepper.Step>\n ))}\n</FlowStepper>\n\\`\\`\\`\n\n\n`;\n\nexport default {\n title: \"Navigation/FlowStepper\",\n component: FlowStepper,\n argTypes: {\n activeIndex: { control: \"number\" },\n extraProps: { control: \"disabled\" },\n extraContainerProps: { control: \"disabled\" },\n extraStepperProps: { control: \"disabled\" },\n extraStepperContainerProps: { control: \"disabled\" },\n children: { control: \"disabled\" },\n renderChildren: { control: \"disabled\" },\n header: { control: \"disabled\" },\n stepHeaders: { control: \"disabled\" },\n renderStepHeader: { control: \"disabled\" },\n footer: { control: \"disabled\" },\n stepFooters: { control: \"disabled\" },\n renderStepFooter: { control: \"disabled\" },\n },\n args: {\n activeIndex: 0,\n },\n parameters: {\n docs: {\n description: {\n component: description,\n },\n },\n },\n};\n\nconst NB_OF_STEPS = 5;\nexport const Minimal: StoryTemplate<FlowStepperProps<unknown>> = args => {\n const { activeIndex, ...rest } = args;\n const [, updateArgs] = useArgs();\n\n return (\n <FlowStepper\n activeIndex={activeIndex}\n header={() => (\n <Text variant=\"h1\">\n Header - Page n\u00B0{activeIndex + 1} / {NB_OF_STEPS}\n </Text>\n )}\n footer={() => (\n <Flex mt={6} flexDirection=\"column\" rowGap={6} alignItems=\"flex-end\">\n <Box alignSelf=\"stretch\">\n <Divider />\n </Box>\n <Flex columnGap={6}>\n <Button\n variant=\"main\"\n outline\n disabled={activeIndex <= 0}\n onClick={() => updateArgs({ activeIndex: activeIndex - 1 })}\n >\n Previous\n </Button>\n <Button\n variant=\"main\"\n disabled={activeIndex >= NB_OF_STEPS - 1}\n onClick={() => updateArgs({ activeIndex: activeIndex + 1 })}\n >\n Continue\n </Button>\n </Flex>\n </Flex>\n )}\n {...rest}\n >\n {[\n ...new Array(NB_OF_STEPS).fill(0).map((_, index) => (\n <FlowStepper.Step label={\"Step \" + index}>\n <Text key={index} variant=\"body\">\n {lipsum}\n </Text>\n <Button mt={2} onClick={() => updateArgs({ activeIndex: NB_OF_STEPS })}>\n Navigate to the hidden step.\n </Button>\n </FlowStepper.Step>\n )),\n <FlowStepper.Step label=\"Hidden Step\" hidden>\n <Text key=\"hidden\" variant=\"body\">\n I am hidden.\n </Text>\n </FlowStepper.Step>,\n ]}\n </FlowStepper>\n );\n};\n\nconst Header = ({ activeIndex, onBack }: { activeIndex: number; onBack?: () => void }) => {\n return (\n <Box position=\"relative\" my={6}>\n {onBack && (\n <Box position=\"absolute\">\n <Link onClick={onBack} Icon={IconsLegacy.ArrowLeftMedium} iconPosition=\"left\">\n Back\n </Link>\n </Box>\n )}\n <Flex justifyContent=\"center\">\n <Text variant=\"h2\">Header {activeIndex + 1}</Text>\n </Flex>\n </Box>\n );\n};\n\nconst Footer = ({\n onContinue,\n children,\n}: {\n onContinue?: () => void;\n children?: React.ReactNode;\n}) => (\n <Flex mt={6} flexDirection=\"column\" rowGap={6}>\n <Box alignSelf=\"stretch\">\n <Divider />\n </Box>\n <Flex flexDirection=\"row\" justifyContent=\"space-between\" alignItems=\"center\">\n {children || <Flex />}\n {onContinue && (\n <Button variant=\"main\" onClick={onContinue}>\n Continue\n </Button>\n )}\n </Flex>\n </Flex>\n);\n\nconst AnimatedItem = styled(Flex)`\n transition: opacity 500ms;\n width: 100%;\n height: 100%;\n &.step-enter {\n opacity: 0;\n }\n &.step-enter-active {\n opacity: 1;\n }\n &.step-exit {\n opacity: 1;\n }\n &.step-exit-active {\n opacity: 0;\n }\n`;\nconst Item = ({ label }: { label: string }) => (\n <AnimatedItem>\n <Flex\n position=\"absolute\"\n left=\"0\"\n right=\"0\"\n top=\"0\"\n bottom=\"0\"\n alignItems=\"center\"\n justifyContent=\"center\"\n backgroundColor={`${label.toLowerCase()}.c50`}\n >\n <Text variant=\"h2\" textTransform=\"capitalize\">\n {label}\n </Text>\n </Flex>\n </AnimatedItem>\n);\n\nconst steps = [\"Primary\", \"Neutral\", \"Success\", \"Warning\", \"Error\"];\n\nconst StepFooter = ({ label }: { label: string }) => (\n <Flex flexDirection=\"row\" alignItems=\"center\">\n <Text whiteSpace=\"pre\">Footer for step </Text>\n <Tag size={\"medium\" as TagSize} type=\"plain\" active>\n {label}\n </Tag>\n </Flex>\n);\n\nexport const Demo: StoryTemplate<FlowStepperProps<unknown>> = args => {\n const [, updateArgs] = useArgs();\n\n return (\n <Flex height=\"90vh\">\n <FlowStepper\n header={({ activeIndex }) => (\n <Header\n activeIndex={activeIndex}\n onBack={\n activeIndex > 0\n ? () => {\n updateArgs({ activeIndex: activeIndex - 1 });\n }\n : undefined\n }\n />\n )}\n renderStepFooter={({ stepsLength, activeIndex, children }) => (\n <Footer\n onContinue={\n activeIndex < stepsLength - 1\n ? () => {\n updateArgs({ activeIndex: activeIndex + 1 });\n }\n : undefined\n }\n >\n {children}\n </Footer>\n )}\n extraStepperContainerProps={{ my: 12 }}\n extraStepperProps={{ maxWidth: \"500px\" }}\n renderChildren={({ children }) => (\n <TransitionGroup component={null}>{children}</TransitionGroup>\n )}\n {...args}\n >\n {steps.map(label => (\n <CSSTransition\n key={label}\n label={label}\n footer={<StepFooter label={label} />}\n timeout={500}\n classNames=\"step\"\n mountOnEnter\n unmountOnExit\n >\n <Item label={label} />\n </CSSTransition>\n ))}\n </FlowStepper>\n </Flex>\n );\n};\n\nconst StepWithNavigation = (props: { label: string; setActiveStep: (arg: string) => void }) => {\n const { label, setActiveStep } = props;\n const content = useMemo(() => {\n return steps.map(step => {\n return (\n <Button\n key={step}\n disabled={step === label}\n variant=\"main\"\n onClick={() => setActiveStep(step)}\n >\n Go to \"{step}\"\n </Button>\n );\n });\n }, [setActiveStep, label]);\n return (\n <Flex\n flex={1}\n flexDirection=\"column\"\n justifyContent=\"center\"\n alignItems=\"center\"\n padding={4}\n rowGap={4}\n backgroundColor={`${label.toLowerCase()}.c50`}\n >\n {content}\n </Flex>\n );\n};\n\nexport const IndexedByKey: StoryTemplate<FlowStepperProps<unknown>> = args => {\n const [activeStep, setActiveStep] = useState(steps[0]);\n return (\n <Flex height=\"90vh\">\n <FlowStepper.Indexed\n activeKey={activeStep}\n header={({ activeIndex }) => (\n <Header\n activeIndex={activeIndex}\n onBack={\n activeIndex > 0\n ? () => {\n setActiveStep(steps[activeIndex - 1]);\n }\n : undefined\n }\n />\n )}\n footer={({ stepsLength, activeIndex }) => (\n <Footer\n onContinue={\n activeIndex < stepsLength - 1\n ? () => {\n setActiveStep(steps[activeIndex + 1]);\n }\n : undefined\n }\n />\n )}\n extraStepperContainerProps={{ my: 12 }}\n extraStepperProps={{ maxWidth: \"500px\" }}\n {...args}\n >\n {steps.map(label => (\n <FlowStepper.Indexed.Step key={label} label={label} itemKey={label}>\n <StepWithNavigation label={label} setActiveStep={setActiveStep} />\n </FlowStepper.Indexed.Step>\n ))}\n </FlowStepper.Indexed>\n </Flex>\n );\n};\n"],
|
|
5
|
+
"mappings": "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",
|
|
6
6
|
"names": ["import_react", "React", "styled"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../../src/components/navigation/sideBar/SideBar/SideBar.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport { useArgs } from \"@storybook/manager-api\";\n\nimport SideBar from \"./SideBar\";\nimport type { SideBarProps } from \"./SideBar\";\nimport { action } from \"@storybook/addon-actions\";\nimport PortfolioIcon from \"@ledgerhq/icons-ui/reactLegacy/PortfolioMedium\";\nimport WalletIcon from \"@ledgerhq/icons-ui/reactLegacy/WalletMedium\";\nimport ManagerIcon from \"@ledgerhq/icons-ui/reactLegacy/ManagerMedium\";\nimport ArrowTopIcon from \"@ledgerhq/icons-ui/reactLegacy/ArrowTopMedium\";\nimport ArrowBottomIcon from \"@ledgerhq/icons-ui/reactLegacy/ArrowBottomMedium\";\nimport BuyCryptoAltIcon from \"@ledgerhq/icons-ui/reactLegacy/BuyCryptoAltMedium\";\nimport BuyCryptoIcon from \"@ledgerhq/icons-ui/reactLegacy/BuyCryptoMedium\";\nimport LendIcon from \"@ledgerhq/icons-ui/reactLegacy/LendMedium\";\nimport NanoFoldedIcon from \"@ledgerhq/icons-ui/reactLegacy/NanoFoldedMedium\";\nimport { StoryTemplate } from \"../../../helpers\";\n\nexport default {\n title: \"Navigation/SideBar/SideBar\",\n component: SideBar,\n argTypes: {\n children: {\n type: \"text\",\n description: \"A list a SideBar.Item\",\n required: true,\n control: false,\n },\n isExpanded: { control: false },\n onToggle: { control: false },\n },\n};\n\nconst Template = (args: SideBarProps) => {\n const [currentArgs, updateArgs] = useArgs();\n\n const handleToggle = () => updateArgs({ isExpanded: !currentArgs.isExpanded });\n\n const sidebarIconSize = 20;\n return (\n <SideBar {...args} onToggle={handleToggle}>\n <SideBar.Item onClick={action(\"go to portfolio\")} label=\"portfolio\">\n <PortfolioIcon size={sidebarIconSize} />\n </SideBar.Item>\n <SideBar.Item onClick={action(\"go to accounts\")} label=\"accounts\" isActive>\n <WalletIcon size={sidebarIconSize} />\n </SideBar.Item>\n <SideBar.Item onClick={action(\"go to discover\")} label=\"discover\" isDisabled>\n <ManagerIcon size={sidebarIconSize} />\n </SideBar.Item>\n <SideBar.Item onClick={action(\"go to send\")} label=\"send\" isDisabled>\n <ArrowTopIcon size={sidebarIconSize} />\n </SideBar.Item>\n <SideBar.Item onClick={action(\"go to receive\")} label=\"receive\">\n <ArrowBottomIcon size={sidebarIconSize} />\n </SideBar.Item>\n <SideBar.Item onClick={action(\"go to buy / Sell\")} label=\"buy / Sell\">\n <BuyCryptoAltIcon size={sidebarIconSize} />\n </SideBar.Item>\n <SideBar.Item onClick={action(\"go to exchange\")} label=\"exchange\">\n <BuyCryptoIcon size={sidebarIconSize} />\n </SideBar.Item>\n <SideBar.Item onClick={action(\"go to lend\")} label=\"lend\">\n <LendIcon size={sidebarIconSize} />\n </SideBar.Item>\n <SideBar.Item onClick={action(\"go to manager\")} label=\"manager\" displayNotificationBadge>\n <NanoFoldedIcon size={sidebarIconSize} />\n </SideBar.Item>\n </SideBar>\n );\n};\n\nexport const Default: StoryTemplate<SideBarProps> = Template.bind({});\nDefault.args = {\n onToggle: action(\"toggle sidebar\"),\n isExpanded: true,\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,yBAAwB;AAExB,qBAAoB;AAEpB,2BAAuB;AACvB,6BAA0B;AAC1B,0BAAuB;AACvB,2BAAwB;AACxB,4BAAyB;AACzB,+BAA4B;AAC5B,gCAA6B;AAC7B,6BAA0B;AAC1B,wBAAqB;AACrB,8BAA2B;AAG3B,IAAO,0BAAQ;AAAA,EACb,OAAO;AAAA,EACP,WAAW,eAAAA;AAAA,EACX,UAAU;AAAA,IACR,UAAU;AAAA,MACR,MAAM;AAAA,MACN,aAAa;AAAA,MACb,UAAU;AAAA,MACV,SAAS;AAAA,IACX;AAAA,IACA,YAAY,EAAE,SAAS,MAAM;AAAA,IAC7B,UAAU,EAAE,SAAS,MAAM;AAAA,EAC7B;AACF;AAEA,MAAM,WAAW,CAAC,SAAuB;AACvC,QAAM,CAAC,aAAa,UAAU,QAAI,4BAAQ;AAE1C,QAAM,eAAe,MAAM,WAAW,EAAE,YAAY,CAAC,YAAY,WAAW,CAAC;AAE7E,QAAM,kBAAkB;AACxB,SACE,6BAAAC,QAAA,cAAC,eAAAD,SAAA,EAAS,GAAG,MAAM,UAAU,gBAC3B,6BAAAC,QAAA,cAAC,eAAAD,QAAQ,MAAR,EAAa,aAAS,6BAAO,iBAAiB,GAAG,OAAM,eACtD,6BAAAC,QAAA,cAAC,uBAAAC,SAAA,EAAc,MAAM,iBAAiB,CACxC,GACA,6BAAAD,QAAA,cAAC,eAAAD,QAAQ,MAAR,EAAa,aAAS,6BAAO,gBAAgB,GAAG,OAAM,YAAW,UAAQ,QACxE,6BAAAC,QAAA,cAAC,oBAAAE,SAAA,EAAW,MAAM,iBAAiB,CACrC,GACA,6BAAAF,QAAA,cAAC,eAAAD,QAAQ,MAAR,EAAa,aAAS,6BAAO,gBAAgB,GAAG,OAAM,YAAW,YAAU,QAC1E,6BAAAC,QAAA,cAAC,qBAAAG,SAAA,EAAY,MAAM,iBAAiB,CACtC,GACA,6BAAAH,QAAA,cAAC,eAAAD,QAAQ,MAAR,EAAa,aAAS,6BAAO,YAAY,GAAG,OAAM,QAAO,YAAU,QAClE,6BAAAC,QAAA,cAAC,sBAAAI,SAAA,EAAa,MAAM,iBAAiB,CACvC,GACA,6BAAAJ,QAAA,cAAC,eAAAD,QAAQ,MAAR,EAAa,aAAS,6BAAO,eAAe,GAAG,OAAM,aACpD,6BAAAC,QAAA,cAAC,yBAAAK,SAAA,EAAgB,MAAM,iBAAiB,CAC1C,GACA,6BAAAL,QAAA,cAAC,eAAAD,QAAQ,MAAR,EAAa,aAAS,6BAAO,kBAAkB,GAAG,OAAM,gBACvD,6BAAAC,QAAA,cAAC,0BAAAM,SAAA,EAAiB,MAAM,iBAAiB,CAC3C,GACA,6BAAAN,QAAA,cAAC,eAAAD,QAAQ,MAAR,EAAa,aAAS,6BAAO,gBAAgB,GAAG,OAAM,cACrD,6BAAAC,QAAA,cAAC,uBAAAO,SAAA,EAAc,MAAM,iBAAiB,CACxC,GACA,6BAAAP,QAAA,cAAC,eAAAD,QAAQ,MAAR,EAAa,aAAS,6BAAO,YAAY,GAAG,OAAM,UACjD,6BAAAC,QAAA,cAAC,kBAAAQ,SAAA,EAAS,MAAM,iBAAiB,CACnC,GACA,6BAAAR,QAAA,cAAC,eAAAD,QAAQ,MAAR,EAAa,aAAS,6BAAO,eAAe,GAAG,OAAM,WAAU,0BAAwB,QACtF,6BAAAC,QAAA,cAAC,wBAAAS,SAAA,EAAe,MAAM,iBAAiB,CACzC,CACF;AAEJ;AAEO,MAAM,UAAuC,SAAS,KAAK,CAAC,CAAC;AACpE,QAAQ,OAAO;AAAA,EACb,cAAU,6BAAO,gBAAgB;AAAA,EACjC,YAAY;AACd;",
|
|
6
6
|
"names": ["SideBar", "React", "PortfolioIcon", "WalletIcon", "ManagerIcon", "ArrowTopIcon", "ArrowBottomIcon", "BuyCryptoAltIcon", "BuyCryptoIcon", "LendIcon", "NanoFoldedIcon"]
|
|
7
7
|
}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../../src/pre-ldls/components/Input/Input.stories.tsx"],
|
|
4
|
-
"sourcesContent": ["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { expect, userEvent, within } from \"@storybook/test\";\nimport { Icons } from \"../../../assets\";\nimport
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,kBAA0C;AAC1C,oBAAsB;
|
|
4
|
+
"sourcesContent": ["import React from \"react\";\nimport type { Meta, StoryObj } from \"@storybook/react\";\nimport { expect, userEvent, within } from \"@storybook/test\";\nimport { Icons } from \"../../../assets\";\nimport { Input } from \"./Input\";\n\nconst meta: Meta<typeof Input> = {\n component: Input,\n title: \"PreLdls/Components/Input\",\n tags: [\"autodocs\"],\n args: {},\n};\nexport default meta;\n\ntype Story = StoryObj<typeof Input>;\n\nexport const Default: Story = {\n args: {},\n};\n\nexport const Search: Story = {\n args: {\n placeholder: \"Search\",\n icon: <Icons.Search size=\"S\" />,\n },\n};\n\n// Interaction Testing\nexport const WithInteraction: Story = {\n args: {},\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n const input = canvas.getByRole(\"textbox\");\n await userEvent.type(input, \"Write something\");\n expect(input).toHaveValue(\"Write something\");\n },\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAElB,kBAA0C;AAC1C,oBAAsB;AACtB,mBAAsB;AAEtB,MAAM,OAA2B;AAAA,EAC/B,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM,CAAC;AACT;AACA,IAAO,wBAAQ;AAIR,MAAM,UAAiB;AAAA,EAC5B,MAAM,CAAC;AACT;AAEO,MAAM,SAAgB;AAAA,EAC3B,MAAM;AAAA,IACJ,aAAa;AAAA,IACb,MAAM,6BAAAA,QAAA,cAAC,oBAAM,QAAN,EAAa,MAAK,KAAI;AAAA,EAC/B;AACF;AAGO,MAAM,kBAAyB;AAAA,EACpC,MAAM,CAAC;AAAA,EACP,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AACnC,UAAM,QAAQ,OAAO,UAAU,SAAS;AACxC,UAAM,sBAAU,KAAK,OAAO,iBAAiB;AAC7C,4BAAO,KAAK,EAAE,YAAY,iBAAiB;AAAA,EAC7C;AACF;",
|
|
6
6
|
"names": ["React"]
|
|
7
7
|
}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var Search_exports = {};
|
|
30
|
+
__export(Search_exports, {
|
|
31
|
+
Search: () => Search
|
|
32
|
+
});
|
|
33
|
+
module.exports = __toCommonJS(Search_exports);
|
|
34
|
+
var import_react = __toESM(require("react"));
|
|
35
|
+
var import_assets = require("../../../assets");
|
|
36
|
+
var import_hooks = require("../../hooks");
|
|
37
|
+
var import__ = require("..");
|
|
38
|
+
function Search({ onDebouncedChange, debounceTime = 500, onChange, ...props }) {
|
|
39
|
+
const initialValue = props.value ?? props.defaultValue ?? "";
|
|
40
|
+
const prevValue = (0, import_react.useRef)(String(initialValue));
|
|
41
|
+
const handleDebouncedChange = (0, import_hooks.useDebouncedCallback)(
|
|
42
|
+
(0, import_react.useMemo)(() => {
|
|
43
|
+
if (!onDebouncedChange)
|
|
44
|
+
return;
|
|
45
|
+
return (event) => {
|
|
46
|
+
const current = event.target.value;
|
|
47
|
+
onDebouncedChange(current, prevValue.current);
|
|
48
|
+
prevValue.current = current;
|
|
49
|
+
};
|
|
50
|
+
}, [onDebouncedChange]),
|
|
51
|
+
debounceTime
|
|
52
|
+
);
|
|
53
|
+
const handleChange = (0, import_react.useMemo)(() => {
|
|
54
|
+
if (!handleDebouncedChange && !onChange)
|
|
55
|
+
return;
|
|
56
|
+
return (event) => {
|
|
57
|
+
onChange == null ? void 0 : onChange(event);
|
|
58
|
+
handleDebouncedChange == null ? void 0 : handleDebouncedChange(event);
|
|
59
|
+
};
|
|
60
|
+
}, [handleDebouncedChange, onChange]);
|
|
61
|
+
return /* @__PURE__ */ import_react.default.createElement(import__.Input, { ...props, icon: /* @__PURE__ */ import_react.default.createElement(import_assets.Icons.Search, { size: "S" }), onChange: handleChange });
|
|
62
|
+
}
|
|
63
|
+
//# sourceMappingURL=Search.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../src/pre-ldls/components/Search/Search.tsx"],
|
|
4
|
+
"sourcesContent": ["import React, { ChangeEvent, useMemo, useRef } from \"react\";\nimport { Icons } from \"../../../assets\";\nimport { useDebouncedCallback } from \"../../hooks\";\nimport { Input } from \"..\";\n\ntype InputProps = React.ComponentProps<\"input\">;\ntype Props = Readonly<\n InputProps & {\n onDebouncedChange?: (current: string, prev: string) => void;\n debounceTime?: number;\n }\n>;\n\nexport function Search({ onDebouncedChange, debounceTime = 500, onChange, ...props }: Props) {\n const initialValue = props.value ?? props.defaultValue ?? \"\";\n const prevValue = useRef(String(initialValue));\n\n const handleDebouncedChange = useDebouncedCallback(\n useMemo(() => {\n if (!onDebouncedChange) return;\n return (event: ChangeEvent<HTMLInputElement>) => {\n const current = event.target.value;\n onDebouncedChange(current, prevValue.current);\n prevValue.current = current;\n };\n }, [onDebouncedChange]),\n debounceTime,\n );\n\n const handleChange = useMemo(() => {\n if (!handleDebouncedChange && !onChange) return;\n return (event: ChangeEvent<HTMLInputElement>) => {\n onChange?.(event);\n handleDebouncedChange?.(event);\n };\n }, [handleDebouncedChange, onChange]);\n\n return <Input {...props} icon={<Icons.Search size=\"S\" />} onChange={handleChange} />;\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAoD;AACpD,oBAAsB;AACtB,mBAAqC;AACrC,eAAsB;AAUf,SAAS,OAAO,EAAE,mBAAmB,eAAe,KAAK,UAAU,GAAG,MAAM,GAAU;AAC3F,QAAM,eAAe,MAAM,SAAS,MAAM,gBAAgB;AAC1D,QAAM,gBAAY,qBAAO,OAAO,YAAY,CAAC;AAE7C,QAAM,4BAAwB;AAAA,QAC5B,sBAAQ,MAAM;AACZ,UAAI,CAAC;AAAmB;AACxB,aAAO,CAAC,UAAyC;AAC/C,cAAM,UAAU,MAAM,OAAO;AAC7B,0BAAkB,SAAS,UAAU,OAAO;AAC5C,kBAAU,UAAU;AAAA,MACtB;AAAA,IACF,GAAG,CAAC,iBAAiB,CAAC;AAAA,IACtB;AAAA,EACF;AAEA,QAAM,mBAAe,sBAAQ,MAAM;AACjC,QAAI,CAAC,yBAAyB,CAAC;AAAU;AACzC,WAAO,CAAC,UAAyC;AAC/C,2CAAW;AACX,qEAAwB;AAAA,IAC1B;AAAA,EACF,GAAG,CAAC,uBAAuB,QAAQ,CAAC;AAEpC,SAAO,6BAAAA,QAAA,cAAC,kBAAO,GAAG,OAAO,MAAM,6BAAAA,QAAA,cAAC,oBAAM,QAAN,EAAa,MAAK,KAAI,GAAI,UAAU,cAAc;AACpF;",
|
|
6
|
+
"names": ["React"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var Search_stories_exports = {};
|
|
20
|
+
__export(Search_stories_exports, {
|
|
21
|
+
Default: () => Default,
|
|
22
|
+
WithInteraction: () => WithInteraction,
|
|
23
|
+
default: () => Search_stories_default
|
|
24
|
+
});
|
|
25
|
+
module.exports = __toCommonJS(Search_stories_exports);
|
|
26
|
+
var import_test = require("@storybook/test");
|
|
27
|
+
var import_Search = require("./Search");
|
|
28
|
+
const onDebouncedChange = (0, import_test.fn)();
|
|
29
|
+
const onChange = (0, import_test.fn)();
|
|
30
|
+
const meta = {
|
|
31
|
+
component: import_Search.Search,
|
|
32
|
+
title: "PreLdls/Components/Search",
|
|
33
|
+
tags: ["autodocs"],
|
|
34
|
+
args: {
|
|
35
|
+
debounceTime: 500,
|
|
36
|
+
placeholder: "Search",
|
|
37
|
+
onDebouncedChange,
|
|
38
|
+
onChange
|
|
39
|
+
}
|
|
40
|
+
};
|
|
41
|
+
var Search_stories_default = meta;
|
|
42
|
+
const Default = {};
|
|
43
|
+
const WithInteraction = {
|
|
44
|
+
args: {
|
|
45
|
+
debounceTime: 100
|
|
46
|
+
},
|
|
47
|
+
play: async ({ canvasElement }) => {
|
|
48
|
+
const canvas = (0, import_test.within)(canvasElement);
|
|
49
|
+
const search = canvas.getByRole("textbox");
|
|
50
|
+
await import_test.userEvent.type(search, "Write something");
|
|
51
|
+
(0, import_test.expect)(search).toHaveValue("Write something");
|
|
52
|
+
(0, import_test.expect)(onChange).toHaveBeenCalledTimes("Write something".length);
|
|
53
|
+
(0, import_test.expect)(onDebouncedChange).not.toHaveBeenCalled();
|
|
54
|
+
await (0, import_test.waitFor)(() => (0, import_test.expect)(onDebouncedChange).toHaveBeenCalledTimes(1), { timeout: 200 });
|
|
55
|
+
(0, import_test.expect)(onDebouncedChange).toHaveBeenCalledWith("Write something", "");
|
|
56
|
+
await import_test.userEvent.clear(search);
|
|
57
|
+
await import_test.userEvent.type(search, "Write something else");
|
|
58
|
+
(0, import_test.expect)(onDebouncedChange).toHaveBeenCalledTimes(1);
|
|
59
|
+
await (0, import_test.waitFor)(() => (0, import_test.expect)(onDebouncedChange).toHaveBeenCalledTimes(2), { timeout: 200 });
|
|
60
|
+
(0, import_test.expect)(onDebouncedChange).toHaveBeenCalledWith("Write something else", "Write something");
|
|
61
|
+
}
|
|
62
|
+
};
|
|
63
|
+
//# sourceMappingURL=Search.stories.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../../src/pre-ldls/components/Search/Search.stories.tsx"],
|
|
4
|
+
"sourcesContent": ["import { type Meta, type StoryObj } from \"@storybook/react\";\nimport { expect, fn, userEvent, waitFor, within } from \"@storybook/test\";\nimport { Search } from \"./Search\";\n\nconst onDebouncedChange = fn();\nconst onChange = fn();\n\nconst meta: Meta<typeof Search> = {\n component: Search,\n title: \"PreLdls/Components/Search\",\n tags: [\"autodocs\"],\n args: {\n debounceTime: 500,\n placeholder: \"Search\",\n onDebouncedChange,\n onChange,\n },\n};\nexport default meta;\n\ntype Story = StoryObj<typeof Search>;\n\nexport const Default: Story = {};\n\n// Interaction Testing\nexport const WithInteraction: Story = {\n args: {\n debounceTime: 100,\n },\n play: async ({ canvasElement }) => {\n const canvas = within(canvasElement);\n const search = canvas.getByRole(\"textbox\");\n\n await userEvent.type(search, \"Write something\");\n expect(search).toHaveValue(\"Write something\");\n expect(onChange).toHaveBeenCalledTimes(\"Write something\".length);\n expect(onDebouncedChange).not.toHaveBeenCalled();\n await waitFor(() => expect(onDebouncedChange).toHaveBeenCalledTimes(1), { timeout: 200 });\n expect(onDebouncedChange).toHaveBeenCalledWith(\"Write something\", \"\");\n\n await userEvent.clear(search);\n await userEvent.type(search, \"Write something else\");\n expect(onDebouncedChange).toHaveBeenCalledTimes(1);\n await waitFor(() => expect(onDebouncedChange).toHaveBeenCalledTimes(2), { timeout: 200 });\n expect(onDebouncedChange).toHaveBeenCalledWith(\"Write something else\", \"Write something\");\n },\n};\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AACA,kBAAuD;AACvD,oBAAuB;AAEvB,MAAM,wBAAoB,gBAAG;AAC7B,MAAM,eAAW,gBAAG;AAEpB,MAAM,OAA4B;AAAA,EAChC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,UAAU;AAAA,EACjB,MAAM;AAAA,IACJ,cAAc;AAAA,IACd,aAAa;AAAA,IACb;AAAA,IACA;AAAA,EACF;AACF;AACA,IAAO,yBAAQ;AAIR,MAAM,UAAiB,CAAC;AAGxB,MAAM,kBAAyB;AAAA,EACpC,MAAM;AAAA,IACJ,cAAc;AAAA,EAChB;AAAA,EACA,MAAM,OAAO,EAAE,cAAc,MAAM;AACjC,UAAM,aAAS,oBAAO,aAAa;AACnC,UAAM,SAAS,OAAO,UAAU,SAAS;AAEzC,UAAM,sBAAU,KAAK,QAAQ,iBAAiB;AAC9C,4BAAO,MAAM,EAAE,YAAY,iBAAiB;AAC5C,4BAAO,QAAQ,EAAE,sBAAsB,kBAAkB,MAAM;AAC/D,4BAAO,iBAAiB,EAAE,IAAI,iBAAiB;AAC/C,cAAM,qBAAQ,UAAM,oBAAO,iBAAiB,EAAE,sBAAsB,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC;AACxF,4BAAO,iBAAiB,EAAE,qBAAqB,mBAAmB,EAAE;AAEpE,UAAM,sBAAU,MAAM,MAAM;AAC5B,UAAM,sBAAU,KAAK,QAAQ,sBAAsB;AACnD,4BAAO,iBAAiB,EAAE,sBAAsB,CAAC;AACjD,cAAM,qBAAQ,UAAM,oBAAO,iBAAiB,EAAE,sBAAsB,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC;AACxF,4BAAO,iBAAiB,EAAE,qBAAqB,wBAAwB,iBAAiB;AAAA,EAC1F;AACF;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -16,4 +16,5 @@ var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: tru
|
|
|
16
16
|
var components_exports = {};
|
|
17
17
|
module.exports = __toCommonJS(components_exports);
|
|
18
18
|
__reExport(components_exports, require("./Input/Input"), module.exports);
|
|
19
|
+
__reExport(components_exports, require("./Search/Search"), module.exports);
|
|
19
20
|
//# sourceMappingURL=index.js.map
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../src/pre-ldls/components/index.ts"],
|
|
4
|
-
"sourcesContent": ["export * from \"./Input/Input\";\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,0BAAd;",
|
|
4
|
+
"sourcesContent": ["export * from \"./Input/Input\";\nexport * from \"./Search/Search\";\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;AAAA;AAAA;AAAA,+BAAc,0BAAd;AACA,+BAAc,4BADd;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
|
@@ -11,7 +11,9 @@ var __copyProps = (to, from, except, desc) => {
|
|
|
11
11
|
}
|
|
12
12
|
return to;
|
|
13
13
|
};
|
|
14
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
14
15
|
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
15
|
-
var
|
|
16
|
-
module.exports = __toCommonJS(
|
|
17
|
-
|
|
16
|
+
var hooks_exports = {};
|
|
17
|
+
module.exports = __toCommonJS(hooks_exports);
|
|
18
|
+
__reExport(hooks_exports, require("./useDebouncedCallback"), module.exports);
|
|
19
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
var useDebouncedCallback_exports = {};
|
|
20
|
+
__export(useDebouncedCallback_exports, {
|
|
21
|
+
useDebouncedCallback: () => useDebouncedCallback
|
|
22
|
+
});
|
|
23
|
+
module.exports = __toCommonJS(useDebouncedCallback_exports);
|
|
24
|
+
var import_react = require("react");
|
|
25
|
+
function useDebouncedCallback(callback, delay) {
|
|
26
|
+
const [debouncedCallback, setDebouncedCallback] = (0, import_react.useState)();
|
|
27
|
+
const timeout = (0, import_react.useRef)();
|
|
28
|
+
(0, import_react.useEffect)(() => {
|
|
29
|
+
if (!callback)
|
|
30
|
+
return setDebouncedCallback(void 0);
|
|
31
|
+
setDebouncedCallback(() => (...args) => {
|
|
32
|
+
clearTimeout(timeout.current);
|
|
33
|
+
timeout.current = setTimeout(() => callback(...args), delay);
|
|
34
|
+
});
|
|
35
|
+
return () => clearTimeout(timeout.current);
|
|
36
|
+
}, [callback, delay]);
|
|
37
|
+
return debouncedCallback;
|
|
38
|
+
}
|
|
39
|
+
//# sourceMappingURL=useDebouncedCallback.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/pre-ldls/hooks/useDebouncedCallback.ts"],
|
|
4
|
+
"sourcesContent": ["import { useEffect, useRef, useState } from \"react\";\n\nexport function useDebouncedCallback<T extends unknown[]>(\n callback: ((...args: T) => void) | undefined,\n delay?: number,\n) {\n const [debouncedCallback, setDebouncedCallback] = useState<(...args: T) => void>();\n const timeout = useRef<number>();\n\n useEffect(() => {\n if (!callback) return setDebouncedCallback(undefined);\n\n setDebouncedCallback(() => (...args: T) => {\n clearTimeout(timeout.current);\n timeout.current = setTimeout(() => callback(...args), delay);\n });\n\n return () => clearTimeout(timeout.current);\n }, [callback, delay]);\n\n return debouncedCallback;\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAA4C;AAErC,SAAS,qBACd,UACA,OACA;AACA,QAAM,CAAC,mBAAmB,oBAAoB,QAAI,uBAA+B;AACjF,QAAM,cAAU,qBAAe;AAE/B,8BAAU,MAAM;AACd,QAAI,CAAC;AAAU,aAAO,qBAAqB,MAAS;AAEpD,yBAAqB,MAAM,IAAI,SAAY;AACzC,mBAAa,QAAQ,OAAO;AAC5B,cAAQ,UAAU,WAAW,MAAM,SAAS,GAAG,IAAI,GAAG,KAAK;AAAA,IAC7D,CAAC;AAED,WAAO,MAAM,aAAa,QAAQ,OAAO;AAAA,EAC3C,GAAG,CAAC,UAAU,KAAK,CAAC;AAEpB,SAAO;AACT;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
// If the importer is in node compatibility mode or this is not an ESM
|
|
22
|
+
// file that has been converted to a CommonJS file using a Babel-
|
|
23
|
+
// compatible transform (i.e. "__esModule" has not been set), then set
|
|
24
|
+
// "default" to the CommonJS "module.exports" for node compatibility.
|
|
25
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
26
|
+
mod
|
|
27
|
+
));
|
|
28
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
29
|
+
var useDebouncedCallback_stories_exports = {};
|
|
30
|
+
__export(useDebouncedCallback_stories_exports, {
|
|
31
|
+
Test: () => Test,
|
|
32
|
+
default: () => useDebouncedCallback_stories_default
|
|
33
|
+
});
|
|
34
|
+
module.exports = __toCommonJS(useDebouncedCallback_stories_exports);
|
|
35
|
+
var import_react = __toESM(require("react"));
|
|
36
|
+
var import_test = require("@storybook/test");
|
|
37
|
+
var import__ = require(".");
|
|
38
|
+
const callback1 = (0, import_test.fn)();
|
|
39
|
+
const callback2 = (0, import_test.fn)();
|
|
40
|
+
const meta = {
|
|
41
|
+
component: Template,
|
|
42
|
+
title: "PreLdls/Hooks/useDebouncedCallback",
|
|
43
|
+
tags: ["!autodocs"],
|
|
44
|
+
args: {
|
|
45
|
+
delay: 100,
|
|
46
|
+
callback1,
|
|
47
|
+
callback2
|
|
48
|
+
}
|
|
49
|
+
};
|
|
50
|
+
var useDebouncedCallback_stories_default = meta;
|
|
51
|
+
const Test = {
|
|
52
|
+
name: "useDebouncedCallback",
|
|
53
|
+
play: async ({ canvasElement, step }) => {
|
|
54
|
+
const canvas = (0, import_test.within)(canvasElement);
|
|
55
|
+
const input = canvas.getByRole("textbox");
|
|
56
|
+
const callback2Btn = canvas.getByText("Use Callback 2");
|
|
57
|
+
await step("Debounce callback calls", async () => {
|
|
58
|
+
await import_test.userEvent.type(input, "Write something");
|
|
59
|
+
(0, import_test.expect)(input).toHaveValue("Write something");
|
|
60
|
+
(0, import_test.expect)(callback1).not.toHaveBeenCalled();
|
|
61
|
+
await (0, import_test.waitFor)(() => (0, import_test.expect)(callback1).toHaveBeenCalledTimes(1), { timeout: 200 });
|
|
62
|
+
(0, import_test.expect)(callback1).toHaveBeenCalledWith("Write something");
|
|
63
|
+
});
|
|
64
|
+
await step("Switch callback function", async () => {
|
|
65
|
+
await import_test.userEvent.type(input, " else");
|
|
66
|
+
await import_test.userEvent.click(callback2Btn);
|
|
67
|
+
await import_test.userEvent.type(input, ".");
|
|
68
|
+
await (0, import_test.waitFor)(() => (0, import_test.expect)(callback2).toHaveBeenCalledTimes(1), { timeout: 200 });
|
|
69
|
+
(0, import_test.expect)(callback1).not.toHaveBeenCalledWith(/^Write something else.*/);
|
|
70
|
+
(0, import_test.expect)(callback2).toHaveBeenCalledWith("Write something else.");
|
|
71
|
+
});
|
|
72
|
+
}
|
|
73
|
+
};
|
|
74
|
+
function Template({ callback1: callback12, callback2: callback22, delay }) {
|
|
75
|
+
const [callback, setCallback] = (0, import_react.useState)(() => callback12);
|
|
76
|
+
const debouncedCallback = (0, import__.useDebouncedCallback)(callback, delay);
|
|
77
|
+
const [value, setValue] = (0, import_react.useState)("");
|
|
78
|
+
return /* @__PURE__ */ import_react.default.createElement("div", null, /* @__PURE__ */ import_react.default.createElement(
|
|
79
|
+
"input",
|
|
80
|
+
{
|
|
81
|
+
type: "text",
|
|
82
|
+
value,
|
|
83
|
+
onChange: (event) => {
|
|
84
|
+
const value2 = event.target.value;
|
|
85
|
+
setValue(value2);
|
|
86
|
+
debouncedCallback == null ? void 0 : debouncedCallback(value2);
|
|
87
|
+
}
|
|
88
|
+
}
|
|
89
|
+
), " ", /* @__PURE__ */ import_react.default.createElement("button", { onClick: () => setCallback(() => callback12) }, "Use Callback 1"), " ", /* @__PURE__ */ import_react.default.createElement("button", { onClick: () => setCallback(() => callback22) }, "Use Callback 2"));
|
|
90
|
+
}
|
|
91
|
+
//# sourceMappingURL=useDebouncedCallback.stories.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../src/pre-ldls/hooks/useDebouncedCallback.stories.tsx"],
|
|
4
|
+
"sourcesContent": ["import React, { useState } from \"react\";\nimport { type Meta, type StoryObj } from \"@storybook/react\";\nimport { expect, fn, Mock, userEvent, waitFor, within } from \"@storybook/test\";\nimport { useDebouncedCallback } from \".\";\n\nconst callback1 = fn();\nconst callback2 = fn();\n\nconst meta: Meta<typeof Template> = {\n component: Template,\n title: \"PreLdls/Hooks/useDebouncedCallback\",\n tags: [\"!autodocs\"],\n args: {\n delay: 100,\n callback1,\n callback2,\n },\n};\nexport default meta;\n\nexport const Test: StoryObj<typeof Template> = {\n name: \"useDebouncedCallback\",\n play: async ({ canvasElement, step }) => {\n const canvas = within(canvasElement);\n const input = canvas.getByRole(\"textbox\");\n const callback2Btn = canvas.getByText(\"Use Callback 2\");\n\n await step(\"Debounce callback calls\", async () => {\n await userEvent.type(input, \"Write something\");\n expect(input).toHaveValue(\"Write something\");\n expect(callback1).not.toHaveBeenCalled();\n await waitFor(() => expect(callback1).toHaveBeenCalledTimes(1), { timeout: 200 });\n expect(callback1).toHaveBeenCalledWith(\"Write something\");\n });\n\n await step(\"Switch callback function\", async () => {\n await userEvent.type(input, \" else\");\n await userEvent.click(callback2Btn);\n await userEvent.type(input, \".\");\n await waitFor(() => expect(callback2).toHaveBeenCalledTimes(1), { timeout: 200 });\n expect(callback1).not.toHaveBeenCalledWith(/^Write something else.*/);\n expect(callback2).toHaveBeenCalledWith(\"Write something else.\");\n });\n },\n};\n\ntype TemplateProps = {\n delay: number;\n callback1: Mock;\n callback2: Mock;\n};\nfunction Template({ callback1, callback2, delay }: TemplateProps) {\n const [callback, setCallback] = useState(() => callback1);\n const debouncedCallback = useDebouncedCallback(callback, delay);\n\n const [value, setValue] = useState(\"\");\n return (\n <div>\n <input\n type=\"text\"\n value={value}\n onChange={event => {\n const value = event.target.value;\n setValue(value);\n debouncedCallback?.(value);\n }}\n />{\" \"}\n <button onClick={() => setCallback(() => callback1)}>Use Callback 1</button>{\" \"}\n <button onClick={() => setCallback(() => callback2)}>Use Callback 2</button>\n </div>\n );\n}\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAEhC,kBAA6D;AAC7D,eAAqC;AAErC,MAAM,gBAAY,gBAAG;AACrB,MAAM,gBAAY,gBAAG;AAErB,MAAM,OAA8B;AAAA,EAClC,WAAW;AAAA,EACX,OAAO;AAAA,EACP,MAAM,CAAC,WAAW;AAAA,EAClB,MAAM;AAAA,IACJ,OAAO;AAAA,IACP;AAAA,IACA;AAAA,EACF;AACF;AACA,IAAO,uCAAQ;AAER,MAAM,OAAkC;AAAA,EAC7C,MAAM;AAAA,EACN,MAAM,OAAO,EAAE,eAAe,KAAK,MAAM;AACvC,UAAM,aAAS,oBAAO,aAAa;AACnC,UAAM,QAAQ,OAAO,UAAU,SAAS;AACxC,UAAM,eAAe,OAAO,UAAU,gBAAgB;AAEtD,UAAM,KAAK,2BAA2B,YAAY;AAChD,YAAM,sBAAU,KAAK,OAAO,iBAAiB;AAC7C,8BAAO,KAAK,EAAE,YAAY,iBAAiB;AAC3C,8BAAO,SAAS,EAAE,IAAI,iBAAiB;AACvC,gBAAM,qBAAQ,UAAM,oBAAO,SAAS,EAAE,sBAAsB,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC;AAChF,8BAAO,SAAS,EAAE,qBAAqB,iBAAiB;AAAA,IAC1D,CAAC;AAED,UAAM,KAAK,4BAA4B,YAAY;AACjD,YAAM,sBAAU,KAAK,OAAO,OAAO;AACnC,YAAM,sBAAU,MAAM,YAAY;AAClC,YAAM,sBAAU,KAAK,OAAO,GAAG;AAC/B,gBAAM,qBAAQ,UAAM,oBAAO,SAAS,EAAE,sBAAsB,CAAC,GAAG,EAAE,SAAS,IAAI,CAAC;AAChF,8BAAO,SAAS,EAAE,IAAI,qBAAqB,yBAAyB;AACpE,8BAAO,SAAS,EAAE,qBAAqB,uBAAuB;AAAA,IAChE,CAAC;AAAA,EACH;AACF;AAOA,SAAS,SAAS,EAAE,WAAAA,YAAW,WAAAC,YAAW,MAAM,GAAkB;AAChE,QAAM,CAAC,UAAU,WAAW,QAAI,uBAAS,MAAMD,UAAS;AACxD,QAAM,wBAAoB,+BAAqB,UAAU,KAAK;AAE9D,QAAM,CAAC,OAAO,QAAQ,QAAI,uBAAS,EAAE;AACrC,SACE,6BAAAE,QAAA,cAAC,aACC,6BAAAA,QAAA;AAAA,IAAC;AAAA;AAAA,MACC,MAAK;AAAA,MACL;AAAA,MACA,UAAU,WAAS;AACjB,cAAMC,SAAQ,MAAM,OAAO;AAC3B,iBAASA,MAAK;AACd,+DAAoBA;AAAA,MACtB;AAAA;AAAA,EACF,GAAG,KACH,6BAAAD,QAAA,cAAC,YAAO,SAAS,MAAM,YAAY,MAAMF,UAAS,KAAG,gBAAc,GAAU,KAC7E,6BAAAE,QAAA,cAAC,YAAO,SAAS,MAAM,YAAY,MAAMD,UAAS,KAAG,gBAAc,CACrE;AAEJ;",
|
|
6
|
+
"names": ["callback1", "callback2", "React", "value"]
|
|
7
|
+
}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import React from "react";
|
|
2
|
+
type InputProps = React.ComponentProps<"input">;
|
|
3
|
+
type Props = Readonly<InputProps & {
|
|
4
|
+
onDebouncedChange?: (current: string, prev: string) => void;
|
|
5
|
+
debounceTime?: number;
|
|
6
|
+
}>;
|
|
7
|
+
export declare function Search({ onDebouncedChange, debounceTime, onChange, ...props }: Props): React.JSX.Element;
|
|
8
|
+
export {};
|
|
9
|
+
//# sourceMappingURL=Search.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Search.d.ts","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAuC,MAAM,OAAO,CAAC;AAK5D,KAAK,UAAU,GAAG,KAAK,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC;AAChD,KAAK,KAAK,GAAG,QAAQ,CACnB,UAAU,GAAG;IACX,iBAAiB,CAAC,EAAE,CAAC,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IAC5D,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB,CACF,CAAC;AAEF,wBAAgB,MAAM,CAAC,EAAE,iBAAiB,EAAE,YAAkB,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,qBAyB1F"}
|
|
@@ -0,0 +1,27 @@
|
|
|
1
|
+
import React, { useMemo, useRef } from "react";
|
|
2
|
+
import { Icons } from "../../../assets";
|
|
3
|
+
import { useDebouncedCallback } from "../../hooks";
|
|
4
|
+
import { Input } from "..";
|
|
5
|
+
export function Search({ onDebouncedChange, debounceTime = 500, onChange, ...props }) {
|
|
6
|
+
const initialValue = props.value ?? props.defaultValue ?? "";
|
|
7
|
+
const prevValue = useRef(String(initialValue));
|
|
8
|
+
const handleDebouncedChange = useDebouncedCallback(useMemo(() => {
|
|
9
|
+
if (!onDebouncedChange)
|
|
10
|
+
return;
|
|
11
|
+
return (event) => {
|
|
12
|
+
const current = event.target.value;
|
|
13
|
+
onDebouncedChange(current, prevValue.current);
|
|
14
|
+
prevValue.current = current;
|
|
15
|
+
};
|
|
16
|
+
}, [onDebouncedChange]), debounceTime);
|
|
17
|
+
const handleChange = useMemo(() => {
|
|
18
|
+
if (!handleDebouncedChange && !onChange)
|
|
19
|
+
return;
|
|
20
|
+
return (event) => {
|
|
21
|
+
onChange?.(event);
|
|
22
|
+
handleDebouncedChange?.(event);
|
|
23
|
+
};
|
|
24
|
+
}, [handleDebouncedChange, onChange]);
|
|
25
|
+
return React.createElement(Input, { ...props, icon: React.createElement(Icons.Search, { size: "S" }), onChange: handleChange });
|
|
26
|
+
}
|
|
27
|
+
//# sourceMappingURL=Search.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Search.js","sourceRoot":"","sources":["../../../../src/pre-ldls/components/Search/Search.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,EAAe,OAAO,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC5D,OAAO,EAAE,KAAK,EAAE,MAAM,iBAAiB,CAAC;AACxC,OAAO,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,IAAI,CAAC;AAU3B,MAAM,UAAU,MAAM,CAAC,EAAE,iBAAiB,EAAE,YAAY,GAAG,GAAG,EAAE,QAAQ,EAAE,GAAG,KAAK,EAAS;IACzF,MAAM,YAAY,GAAG,KAAK,CAAC,KAAK,IAAI,KAAK,CAAC,YAAY,IAAI,EAAE,CAAC;IAC7D,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC,CAAC;IAE/C,MAAM,qBAAqB,GAAG,oBAAoB,CAChD,OAAO,CAAC,GAAG,EAAE;QACX,IAAI,CAAC,iBAAiB;YAAE,OAAO;QAC/B,OAAO,CAAC,KAAoC,EAAE,EAAE;YAC9C,MAAM,OAAO,GAAG,KAAK,CAAC,MAAM,CAAC,KAAK,CAAC;YACnC,iBAAiB,CAAC,OAAO,EAAE,SAAS,CAAC,OAAO,CAAC,CAAC;YAC9C,SAAS,CAAC,OAAO,GAAG,OAAO,CAAC;QAC9B,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,iBAAiB,CAAC,CAAC,EACvB,YAAY,CACb,CAAC;IAEF,MAAM,YAAY,GAAG,OAAO,CAAC,GAAG,EAAE;QAChC,IAAI,CAAC,qBAAqB,IAAI,CAAC,QAAQ;YAAE,OAAO;QAChD,OAAO,CAAC,KAAoC,EAAE,EAAE;YAC9C,QAAQ,EAAE,CAAC,KAAK,CAAC,CAAC;YAClB,qBAAqB,EAAE,CAAC,KAAK,CAAC,CAAC;QACjC,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,qBAAqB,EAAE,QAAQ,CAAC,CAAC,CAAC;IAEtC,OAAO,oBAAC,KAAK,OAAK,KAAK,EAAE,IAAI,EAAE,oBAAC,KAAK,CAAC,MAAM,IAAC,IAAI,EAAC,GAAG,GAAG,EAAE,QAAQ,EAAE,YAAY,GAAI,CAAC;AACvF,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/pre-ldls/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/pre-ldls/components/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC;AAC9B,cAAc,iBAAiB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/pre-ldls/hooks/index.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC"}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDebouncedCallback.d.ts","sourceRoot":"","sources":["../../../src/pre-ldls/hooks/useDebouncedCallback.ts"],"names":[],"mappings":"AAEA,wBAAgB,oBAAoB,CAAC,CAAC,SAAS,OAAO,EAAE,EACtD,QAAQ,EAAE,CAAC,CAAC,GAAG,IAAI,EAAE,CAAC,KAAK,IAAI,CAAC,GAAG,SAAS,EAC5C,KAAK,CAAC,EAAE,MAAM,cAEuD,CAAC,KAAK,IAAI,cAehF"}
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
import { useEffect, useRef, useState } from "react";
|
|
2
|
+
export function useDebouncedCallback(callback, delay) {
|
|
3
|
+
const [debouncedCallback, setDebouncedCallback] = useState();
|
|
4
|
+
const timeout = useRef();
|
|
5
|
+
useEffect(() => {
|
|
6
|
+
if (!callback)
|
|
7
|
+
return setDebouncedCallback(undefined);
|
|
8
|
+
setDebouncedCallback(() => (...args) => {
|
|
9
|
+
clearTimeout(timeout.current);
|
|
10
|
+
timeout.current = setTimeout(() => callback(...args), delay);
|
|
11
|
+
});
|
|
12
|
+
return () => clearTimeout(timeout.current);
|
|
13
|
+
}, [callback, delay]);
|
|
14
|
+
return debouncedCallback;
|
|
15
|
+
}
|
|
16
|
+
//# sourceMappingURL=useDebouncedCallback.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"useDebouncedCallback.js","sourceRoot":"","sources":["../../../src/pre-ldls/hooks/useDebouncedCallback.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAEpD,MAAM,UAAU,oBAAoB,CAClC,QAA4C,EAC5C,KAAc;IAEd,MAAM,CAAC,iBAAiB,EAAE,oBAAoB,CAAC,GAAG,QAAQ,EAAwB,CAAC;IACnF,MAAM,OAAO,GAAG,MAAM,EAAU,CAAC;IAEjC,SAAS,CAAC,GAAG,EAAE;QACb,IAAI,CAAC,QAAQ;YAAE,OAAO,oBAAoB,CAAC,SAAS,CAAC,CAAC;QAEtD,oBAAoB,CAAC,GAAG,EAAE,CAAC,CAAC,GAAG,IAAO,EAAE,EAAE;YACxC,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;YAC9B,OAAO,CAAC,OAAO,GAAG,UAAU,CAAC,GAAG,EAAE,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC,EAAE,KAAK,CAAC,CAAC;QAC/D,CAAC,CAAC,CAAC;QAEH,OAAO,GAAG,EAAE,CAAC,YAAY,CAAC,OAAO,CAAC,OAAO,CAAC,CAAC;IAC7C,CAAC,EAAE,CAAC,QAAQ,EAAE,KAAK,CAAC,CAAC,CAAC;IAEtB,OAAO,iBAAiB,CAAC;AAC3B,CAAC"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@ledgerhq/react-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.23.0-next.0",
|
|
4
4
|
"description": "Ledger Live - Desktop UI",
|
|
5
5
|
"author": "Ledger Live Team <team-live@ledger.fr>",
|
|
6
6
|
"repository": {
|
|
@@ -73,8 +73,8 @@
|
|
|
73
73
|
"react-transition-group": "^4.4.2",
|
|
74
74
|
"react-window": "^1.8.6",
|
|
75
75
|
"styled-system": "^5.1.5",
|
|
76
|
+
"@ledgerhq/crypto-icons-ui": "^1.12.0",
|
|
76
77
|
"@ledgerhq/icons-ui": "^0.9.0",
|
|
77
|
-
"@ledgerhq/crypto-icons-ui": "^1.12.0-nightly.0",
|
|
78
78
|
"@ledgerhq/ui-shared": "^0.3.0"
|
|
79
79
|
},
|
|
80
80
|
"peerDependencies": {
|
|
@@ -92,6 +92,7 @@
|
|
|
92
92
|
"@storybook/addon-interactions": "8.6.12",
|
|
93
93
|
"@storybook/addon-links": "^8.6.12",
|
|
94
94
|
"@storybook/addon-webpack5-compiler-babel": "^3.0.6",
|
|
95
|
+
"@storybook/core": "8.6.12",
|
|
95
96
|
"@storybook/manager-api": "^8.6.12",
|
|
96
97
|
"@storybook/react": "^8.6.12",
|
|
97
98
|
"@storybook/react-webpack5": "^8.6.12",
|
|
@@ -99,7 +100,9 @@
|
|
|
99
100
|
"@storybook/theming": "^8.6.12",
|
|
100
101
|
"@svgr/core": "^5.5.0",
|
|
101
102
|
"@svgr/plugin-svgo": "*",
|
|
103
|
+
"@testing-library/dom": "10.4.0",
|
|
102
104
|
"@testing-library/jest-dom": "6.6.3",
|
|
105
|
+
"@testing-library/react": "16.3.0",
|
|
103
106
|
"@testing-library/user-event": "14.5.2",
|
|
104
107
|
"@types/color": "^3.0.2",
|
|
105
108
|
"@types/hoist-non-react-statics": "^3.3.1",
|
|
@@ -1,7 +0,0 @@
|
|
|
1
|
-
{
|
|
2
|
-
"version": 3,
|
|
3
|
-
"sources": ["../../../src/pre-ldls/types.ts"],
|
|
4
|
-
"sourcesContent": ["// NOTE: this type is needed due to Storybook types breaking in `@ledgerhq/react-ui`\nexport type PlayFnProps = { canvasElement: HTMLElement };\n"],
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;AAAA;AAAA;",
|
|
6
|
-
"names": []
|
|
7
|
-
}
|
package/lib/pre-ldls/types.d.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/pre-ldls/types.ts"],"names":[],"mappings":"AACA,MAAM,MAAM,WAAW,GAAG;IAAE,aAAa,EAAE,WAAW,CAAA;CAAE,CAAC"}
|
package/lib/pre-ldls/types.js
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
{"version":3,"file":"types.js","sourceRoot":"","sources":["../../src/pre-ldls/types.ts"],"names":[],"mappings":""}
|