@ledgerhq/lumen-ui-rnative 0.1.47 → 0.1.49

package/src/lib/Components/Tag/Tag.figma.tsx

@@ -0,0 +1,52 @@
+import figma from '@figma/code-connect';
+import { Placeholder } from '../../Symbols';
+import { Tag } from './Tag';
+import type { TagProps } from './types';
+
+figma.connect(
+  Tag,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=722%3A5547',
+  {
+    imports: [
+      "import { Tag } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Placeholder } from '@ledgerhq/lumen-ui-rnative/symbols'",
+    ],
+    props: {
+      label: figma.string('label'),
+      appearance: figma.enum('appearance', {
+        base: 'base',
+        gray: 'gray',
+        accent: 'accent',
+        'accent-subtle': 'accent-subtle',
+        success: 'success',
+        error: 'error',
+        warning: 'warning',
+        white: 'white',
+      }),
+      size: figma.enum('size', {
+        md: 'md',
+        sm: 'sm',
+      }),
+      icon: figma.boolean('show-icon', {
+        true: Placeholder,
+        false: undefined,
+      }),
+      disabled: figma.enum('appearance', {
+        disabled: true,
+      }),
+    },
+    example: (
+      props: Omit<TagProps, 'icon'> & {
+        icon: any;
+      },
+    ) => (
+      <Tag
+        disabled={props.disabled}
+        label={props.label}
+        appearance={props.appearance}
+        size={props.size}
+        icon={props.icon}
+      />
+    ),
+  },
+);

package/src/lib/Components/Tag/Tag.mdx

@@ -1,8 +1,6 @@
 import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as TagStories from './Tag.stories';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
-import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility/Box';
 
 <Meta title='Core/Tag' of={TagStories} />

package/src/lib/Components/TextInput/TextInput.figma.tsx

@@ -0,0 +1,40 @@
+import figma from '@figma/code-connect';
+import { TextInput } from './TextInput';
+
+figma.connect(
+  TextInput,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=2248-3905',
+  {
+    imports: ["import { TextInput } from '@ledgerhq/lumen-ui-rnative'"],
+    props: {
+      label: figma.string('label'),
+      placeholder: figma.enum('input-state', {
+        placeholder: figma.string('placeholder'),
+      }),
+      value: figma.enum('input-state', {
+        input: figma.string('value'),
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      status: figma.enum('state', {
+        error: 'error',
+        success: 'success',
+      }),
+      helperText: figma.nestedProps('.status', {
+        label: figma.string('label'),
+      }),
+    },
+    example: (props) => (
+      <TextInput
+        disabled={props.disabled}
+        label={props.label}
+        placeholder={props.placeholder}
+        value={props.value}
+        helperText={props.helperText.label}
+        status={props.status}
+        onChangeText={() => {}}
+      />
+    ),
+  },
+);

package/src/lib/Components/TextInput/TextInput.mdx

@@ -2,8 +2,6 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as TextInputStories from './TextInput.stories';
 import { TextInput } from './TextInput';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
-import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Core/TextInput' of={TextInputStories} />
 
@@ -286,182 +284,6 @@ Use the `editable` prop to make the input non-editable without the muted visual
 <TextInput label='Username' value='johndoe' editable={false} />
 ```
 
-## Do's and Don'ts
-
-<div style={{ display: 'flex', flexDirection: 'column', gap: 24 }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use controlled input pattern'
-      description='Use value and onChangeText props for controlled input state management'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { TextInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [value, setValue] = useState('');
-
-<TextInput
-  label='Email'
-  value={value}
-  onChangeText={setValue}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't mix controlled and uncontrolled patterns"
-      description='Avoid using both value and defaultValue props together'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { TextInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [value, setValue] = useState('');
-
-<TextInput
-  label='Email'
-  value={value}
-  defaultValue='initial'
-  onChangeText={setValue}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use onClear for custom logic only'
-      description='Let the component handle clearing automatically, add onClear only for additional logic'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { TextInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [value, setValue] = useState('');
-
-<TextInput
-  label='Search'
-  value={value}
-  onChangeText={setValue}
-  onClear={() => {
-    // Default clearing happens automatically
-    analytics.track('search_cleared');
-  }}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't manually clear value in onClear"
-      description='Value clearing happens automatically - no need to call setValue'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { TextInput } from '@ledgerhq/lumen-ui-rnative';
-import { useState } from 'react';
-
-const [value, setValue] = useState('');
-
-<TextInput
-  label='Search'
-  value={value}
-  onChangeText={setValue}
-  onClear={() => setValue('')}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Always provide labels'
-      description='Use label prop to provide clear, descriptive labels for inputs'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { TextInput } from '@ledgerhq/lumen-ui-rnative';
-
-<TextInput
-  label='Email Address'
-  value={email}
-  onChangeText={setEmail}
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use placeholder as label replacement"
-      description='Placeholder text disappears when typing - use label prop instead'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { TextInput } from '@ledgerhq/lumen-ui-rnative';
-
-<TextInput
-  placeholder='Enter your email'
-  value={email}
-  onChangeText={setEmail}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use appropriate keyboard types'
-      description='Provide the right keyboardType to show contextually appropriate keyboards'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { TextInput } from '@ledgerhq/lumen-ui-rnative';
-
-<TextInput
-  label='Email'
-  value={email}
-  onChangeText={setEmail}
-  keyboardType='email-address'
-/>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't use default keyboard for specialized inputs"
-      description='Avoid using default keyboard when specialized keyboards would improve UX'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { TextInput } from '@ledgerhq/lumen-ui-rnative';
-
-<TextInput
-  label='Email'
-  value={email}
-  onChangeText={setEmail}
-/>
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</div>
 
 ## Platform Considerations
 

package/src/lib/Components/Tile/Tile.figma.tsx

@@ -0,0 +1,113 @@
+import figma from '@figma/code-connect';
+import CryptoIcon from '@ledgerhq/crypto-icons/native';
+import { Placeholder, Settings } from '../../Symbols';
+import { Spot } from '../Spot';
+import { Tag } from '../Tag';
+import { Trend } from '../Trend';
+import {
+  Tile,
+  TileContent,
+  TileDescription,
+  TileTitle,
+  TileTrailingContent,
+} from './Tile';
+
+const sharedProps = {
+  title: figma.string('title'),
+  description: figma.boolean('show-description', {
+    true: figma.boolean('show-network', {
+      true: (
+        <TileDescription>
+          Description <CryptoIcon ledgerId='ethereum' ticker='ETH' size={20} />
+        </TileDescription>
+      ),
+      false: <TileDescription>Description</TileDescription>,
+    }),
+    false: undefined,
+  }),
+  appearance: figma.enum('appearance', {
+    'no-background': 'no-background',
+    card: 'card',
+  }),
+  disabled: figma.enum('state', {
+    disabled: true,
+  }),
+  leadingContent: figma.enum('leading-icon', {
+    coin: <CryptoIcon ledgerId='bitcoin' ticker='BTC' size={48} />,
+    spot: <Spot appearance='icon' icon={Settings} />,
+    'interface-icon': <Placeholder size={24} />,
+  }),
+};
+
+const sharedImports = [
+  "import { Tile, Spot, TileContent, TileTitle, TileDescription, TileTrailingContent } from '@ledgerhq/lumen-ui-rnative'",
+  "import { Tag } from '@ledgerhq/lumen-ui-rnative'",
+  "import { Text } from '@ledgerhq/lumen-ui-rnative'",
+  "import { Placeholder, Settings } from '@ledgerhq/lumen-ui-rnative/symbols'",
+  "import CryptoIcon from '@ledgerhq/crypto-icons/native'",
+];
+
+figma.connect(
+  Tile,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=5783-1328',
+  {
+    imports: sharedImports,
+    variant: { 'show-additionnal-content': false },
+    props: sharedProps,
+    example: (props) => (
+      <Tile
+        appearance={props.appearance}
+        disabled={props.disabled}
+        onPress={() => {}}
+      >
+        {props.leadingContent}
+        <TileContent>
+          <TileTitle>{props.title}</TileTitle>
+          {props.description}
+        </TileContent>
+      </Tile>
+    ),
+  },
+);
+
+figma.connect(
+  Tile,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=5783-1328',
+  {
+    imports: sharedImports,
+    variant: { 'show-additionnal-content': true },
+    props: {
+      ...sharedProps,
+      tag: figma.boolean('show-tag', {
+        true: <Tag label='Label' appearance='base' />,
+        false: undefined,
+      }),
+      subInfo: figma.boolean('show-sub-info', {
+        true: <Tag icon={Settings} label='Label' appearance='base' />,
+        false: undefined,
+      }),
+      trend: figma.boolean('show-trend', {
+        true: <Trend value={7.87} size='sm' />,
+        false: undefined,
+      }),
+    },
+    example: (props) => (
+      <Tile
+        appearance={props.appearance}
+        disabled={props.disabled}
+        onPress={() => {}}
+      >
+        {props.leadingContent}
+        <TileContent>
+          <TileTitle>{props.title}</TileTitle>
+          {props.description}
+          <TileTrailingContent>
+            {props.tag}
+            {props.subInfo}
+            {props.trend}
+          </TileTrailingContent>
+        </TileContent>
+      </Tile>
+    ),
+  },
+);

package/src/lib/Components/Tile/Tile.mdx

@@ -4,11 +4,7 @@ import { Tile } from './Tile';
 import {
   CustomTabs,
   Tab,
-  DoVsDontRow,
-  DoBlockItem,
-  DontBlockItem,
 } from '../../../../.storybook/components';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 import { Box } from '../Utility';
 
 <Meta title='Core/Tile' of={TileStories} />
@@ -250,56 +246,7 @@ import { Tile, TileContent, TileTitle, TileDescription, Spot } from '@ledgerhq/l
 </Tile>
 ```
 
-## Do's and Don'ts
 
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-
-### Trailing Content
-
-<DoVsDontRow>
-  <DoBlockItem
-    title='Use TileTrailingContent for additional elements'
-    description='Wrap Tags, labels, or supplementary content inside TileTrailingContent within TileContent for proper spacing.'
-  >
-
-```tsx
-{/* prettier-ignore */}
-<Tile>
-  <Spot appearance="icon" icon={Settings} />
-  <TileContent>
-    <TileTitle>Title</TileTitle>
-    <TileDescription>Description</TileDescription>
-    <TileTrailingContent>
-      <Tag label="Active" />
-    </TileTrailingContent>
-  </TileContent>
-</Tile>
-```
-
-  </DoBlockItem>
-  <DontBlockItem
-    title="Don't place trailing content directly in TileContent"
-    description='Placing Tags or other elements directly in TileContent without TileTrailingContent results in incorrect spacing.'
-  >
-
-```tsx
-{/* prettier-ignore */}
-<Tile>
-  <Spot appearance="icon" icon={Settings} />
-  <TileContent>
-    <TileTitle>Title</TileTitle>
-    <TileDescription>Description</TileDescription>
-    <Tag label="Active" />
-  </TileContent>
-</Tile>
-```
-
-  </DontBlockItem>
-</DoVsDontRow>
-
-<CommonRulesDoAndDont />
-
-</Box>
 
 </Tab>
 </CustomTabs>

package/src/lib/Components/TileButton/TileButton.figma.tsx

@@ -0,0 +1,35 @@
+import figma from '@figma/code-connect';
+import { Placeholder } from '../../Symbols';
+import { TileButton } from './TileButton';
+import type { TileButtonProps } from './types';
+
+figma.connect(
+  TileButton,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=11291-620',
+  {
+    imports: [
+      "import { TileButton } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Placeholder } from '@ledgerhq/lumen-ui-rnative/symbols'",
+    ],
+    props: {
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      children: figma.string('label'),
+      icon: Placeholder,
+    },
+    example: (
+      props: Omit<TileButtonProps, 'icon'> & {
+        icon: any;
+      },
+    ) => (
+      <TileButton
+        disabled={props.disabled}
+        icon={props.icon}
+        onPress={() => {}}
+      >
+        {props.children}
+      </TileButton>
+    ),
+  },
+);

package/src/lib/Components/TileButton/TileButton.mdx

@@ -2,8 +2,6 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as TileButtonStories from './TileButton.stories';
 import { TileButton } from './TileButton';
 import { CustomTabs, Tab } from '../../../../.storybook/components';
-import { DoVsDontRow, DoBlockItem, DontBlockItem } from '../../../../.storybook/components/DoVsDont';
-import CommonRulesDoAndDont from '../../../../.storybook/components/DoVsDont/CommonRulesDoAndDont.mdx';
 
 <Meta title='Core/TileButton' of={TileButtonStories} />
 
@@ -154,44 +152,6 @@ Or use the `style` prop for escape-hatch styling:
 </TileButton>
 ```
 
-## Do's and Don'ts
-
-<div className='flex flex-col gap-24'>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use the icon prop'
-      description='Pass icon as a component reference'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Plus } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<TileButton icon={Plus} onPress={() => {}}>
-  Add
-</TileButton>
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't include icon in children"
-      description='The icon and children are separate'
-    >
-
-{/* prettier-ignore */}
-```tsx
-import { Plus } from '@ledgerhq/lumen-ui-rnative/symbols';
-
-<TileButton icon={Plus} onPress={() => {}}>
-  <Plus /> Add
-</TileButton>
-```
-
-    </DontBlockItem>
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</div>
 
 ## Platform Considerations
 

package/src/lib/Components/Tooltip/Tooltip.figma.tsx

@@ -0,0 +1,30 @@
+import figma from '@figma/code-connect';
+import { Text } from '../Utility/Text';
+import { Tooltip, TooltipContent, TooltipTrigger } from './Tooltip';
+
+figma.connect(
+  Tooltip,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=6387%3A409',
+  {
+    imports: [
+      "import { Tooltip, TooltipTrigger, TooltipContent } from '@ledgerhq/lumen-ui-rnative'",
+    ],
+    props: {
+      header: figma.nestedProps('.bottom-sheet-header', {
+        title: figma.string('title'),
+        description: figma.string('description'),
+      }),
+    },
+    example: (props) => (
+      <Tooltip>
+        <TooltipTrigger>
+          <></>
+        </TooltipTrigger>
+        <TooltipContent
+          title={props.header.title}
+          content={<Text>{props.header.description}</Text>}
+        />
+      </Tooltip>
+    ),
+  },
+);