@ledgerhq/react-ui 0.14.11-nightly.3 → 0.14.12-next.0

package/lib/cjs/components/navigation/FlowStepper/FlowStepper.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../../../src/components/navigation/FlowStepper/FlowStepper.stories.tsx"],
-  "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/client-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\", defaultValue: 0 },\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  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"],
-  "mappings": "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",
+  "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/client-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"],
+  "mappings": "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",
   "names": ["import_react", "React", "styled"]
 }

package/lib/cjs/components/styled.stories.js

@@ -40,25 +40,28 @@ var styled_stories_default = {
     backgroundColor: {
       type: "text",
       control: "color",
-      defaultValue: "#0EBDCD",
       description: "This property defines the backgroundColor of the box. This property any color format."
     },
     width: {
       type: "text",
-      defaultValue: "200px",
       description: "Width of the box."
     },
     py: {
       type: "text",
-      defaultValue: "20px",
       description: "Padding top and bottom."
     },
     mx: {
       type: "text",
-      defaultValue: "20px",
       description: "Margin left and right."
     }
   },
+  args: {
+    backgroundColor: "#0EBDCD",
+    width: "200px",
+    py: "20px",
+    px: "20px",
+    mx: "20px"
+  },
   parameters: {
     docs: {
       description: {

package/lib/cjs/components/styled.stories.js.map

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../../../src/components/styled.stories.tsx"],
-  "sourcesContent": ["import React from \"react\";\nimport baseStyled, { BaseStyledProps } from \"./styled\";\n\nexport default {\n  title: \"Styled/BaseStyled\",\n  argTypes: {\n    backgroundColor: {\n      type: \"text\",\n      control: \"color\",\n      defaultValue: \"#0EBDCD\",\n      description:\n        \"This property defines the backgroundColor of the box. This property any color format.\",\n    },\n    width: {\n      type: \"text\",\n      defaultValue: \"200px\",\n      description: \"Width of the box.\",\n    },\n    py: {\n      type: \"text\",\n      defaultValue: \"20px\",\n      description: \"Padding top and bottom.\",\n    },\n    mx: {\n      type: \"text\",\n      defaultValue: \"20px\",\n      description: \"Margin left and right.\",\n    },\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: `The baseStyled function is a wrapper to \"styled\" from [styled-components](https://styled-components.com/) that lets you write these common css properties to your component more succinctly and inline.\n        \nIt acts like a drop-in remplacement of styled. In your styled component, just replace styled with baseStyled, and the component will includes all the style props exported by the color, layout, position, shadow and flexbox utilities from the [styled-system](https://styled-system.com) library.\n      \n[See more about styled-system utilities](https://styled-system.com/api)`,\n      },\n    },\n  },\n};\n\nconst Block = baseStyled.div``;\n\nexport const Styled = (args: BaseStyledProps) => (\n  <Block {...args}>\n    A plain good ol'block with fixed width, backgroundColor, padding and margin, all by using inline\n    props\n  </Block>\n);\n"],
-  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,oBAA4C;AAE5C,IAAO,yBAAQ;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,IACR,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,MACT,cAAc;AAAA,MACd,aACE;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aAAa;AAAA,IACf;AAAA,IACA,IAAI;AAAA,MACF,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aAAa;AAAA,IACf;AAAA,IACA,IAAI;AAAA,MACF,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,MAKb;AAAA,IACF;AAAA,EACF;AACF;AAEA,MAAM,QAAQ,cAAAA,QAAW;AAElB,MAAM,SAAS,CAAC,SACrB,6BAAAC,QAAA,cAAC,SAAO,GAAG,QAAM,wGAGjB;",
+  "sourcesContent": ["import React from \"react\";\nimport baseStyled, { BaseStyledProps } from \"./styled\";\n\nexport default {\n  title: \"Styled/BaseStyled\",\n  argTypes: {\n    backgroundColor: {\n      type: \"text\",\n      control: \"color\",\n      description:\n        \"This property defines the backgroundColor of the box. This property any color format.\",\n    },\n    width: {\n      type: \"text\",\n      description: \"Width of the box.\",\n    },\n    py: {\n      type: \"text\",\n      description: \"Padding top and bottom.\",\n    },\n    mx: {\n      type: \"text\",\n      description: \"Margin left and right.\",\n    },\n  },\n  args: {\n    backgroundColor: \"#0EBDCD\",\n    width: \"200px\",\n    py: \"20px\",\n    px: \"20px\",\n    mx: \"20px\",\n  },\n  parameters: {\n    docs: {\n      description: {\n        component: `The baseStyled function is a wrapper to \"styled\" from [styled-components](https://styled-components.com/) that lets you write these common css properties to your component more succinctly and inline.\n        \nIt acts like a drop-in remplacement of styled. In your styled component, just replace styled with baseStyled, and the component will includes all the style props exported by the color, layout, position, shadow and flexbox utilities from the [styled-system](https://styled-system.com) library.\n      \n[See more about styled-system utilities](https://styled-system.com/api)`,\n      },\n    },\n  },\n};\n\nconst Block = baseStyled.div``;\n\nexport const Styled = (args: BaseStyledProps) => (\n  <Block {...args}>\n    A plain good ol'block with fixed width, backgroundColor, padding and margin, all by using inline\n    props\n  </Block>\n);\n"],
+  "mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAkB;AAClB,oBAA4C;AAE5C,IAAO,yBAAQ;AAAA,EACb,OAAO;AAAA,EACP,UAAU;AAAA,IACR,iBAAiB;AAAA,MACf,MAAM;AAAA,MACN,SAAS;AAAA,MACT,aACE;AAAA,IACJ;AAAA,IACA,OAAO;AAAA,MACL,MAAM;AAAA,MACN,aAAa;AAAA,IACf;AAAA,IACA,IAAI;AAAA,MACF,MAAM;AAAA,MACN,aAAa;AAAA,IACf;AAAA,IACA,IAAI;AAAA,MACF,MAAM;AAAA,MACN,aAAa;AAAA,IACf;AAAA,EACF;AAAA,EACA,MAAM;AAAA,IACJ,iBAAiB;AAAA,IACjB,OAAO;AAAA,IACP,IAAI;AAAA,IACJ,IAAI;AAAA,IACJ,IAAI;AAAA,EACN;AAAA,EACA,YAAY;AAAA,IACV,MAAM;AAAA,MACJ,aAAa;AAAA,QACX,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA,MAKb;AAAA,IACF;AAAA,EACF;AACF;AAEA,MAAM,QAAQ,cAAAA,QAAW;AAElB,MAAM,SAAS,CAAC,SACrB,6BAAAC,QAAA,cAAC,SAAO,GAAG,QAAM,wGAGjB;",
   "names": ["baseStyled", "React"]
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ledgerhq/react-ui",
-  "version": "0.14.11-nightly.3",
+  "version": "0.14.12-next.0",
   "description": "Ledger Live - Desktop UI",
   "author": "Ledger Live Team <team-live@ledger.fr>",
   "repository": {
@@ -68,7 +68,7 @@
     "react-transition-group": "^4.4.2",
     "react-window": "^1.8.6",
     "styled-system": "^5.1.5",
-    "@ledgerhq/crypto-icons-ui": "^0.7.0-nightly.1",
+    "@ledgerhq/crypto-icons-ui": "^0.7.0-next.0",
     "@ledgerhq/icons-ui": "^0.6.2",
     "@ledgerhq/ui-shared": "^0.2.1"
   },
@@ -79,10 +79,14 @@
   },
   "devDependencies": {
     "@babel/core": "^7.22.8",
-    "@storybook/addon-actions": "^6.3.6",
-    "@storybook/addon-essentials": "^6.3.6",
-    "@storybook/addon-links": "^6.3.6",
-    "@storybook/react": "^6.3.6",
+    "@babel/preset-env": "^7.15.8",
+    "@babel/preset-react": "^7.23.3",
+    "@babel/preset-typescript": "^7.23.3",
+    "@storybook/addon-actions": "^7.5.3",
+    "@storybook/addon-essentials": "^7.5.3",
+    "@storybook/addon-links": "^7.5.3",
+    "@storybook/react": "^7.5.3",
+    "@storybook/react-webpack5": "^7.5.3",
     "@svgr/core": "^5.5.0",
     "@svgr/plugin-svgo": "*",
     "@types/color": "^3.0.2",
@@ -99,10 +103,12 @@
     "esbuild": "^0.19.0",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-storybook": "^0.6.15",
     "fs-extra": "^10.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "rimraf": "^4.4.1",
+    "storybook": "^7.5.3",
     "styled-components": "^5.3.3",
     "stylelint": "^14.9.1",
     "stylelint-config-recommended": "^13.0.0",
@@ -125,10 +131,10 @@
     }
   },
   "scripts": {
-    "storybook": "start-storybook -p 6006 -s ./src",
+    "storybook": "storybook dev -p 6006",
     "build": "tsc -p tsconfig.prod.json && node scripts/transpile && node scripts/postBuild",
     "prebuild:storybook": "pnpm -F ui-shared -F icons-ui -F crypto-icons-ui build",
-    "build:storybook": "build-storybook -s ./src",
+    "build:storybook": "storybook build",
     "watch": "tsc -p tsconfig.prod.json --watch",
     "clean": "rimraf lib",
     "lint": "eslint src --ext .js,.jsx,.ts,.tsx --cache",