@ledgerhq/lumen-ui-rnative 0.1.48 → 0.1.49

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

@@ -0,0 +1,66 @@
+import figma from '@figma/code-connect';
+import { Switch } from './Switch';
+
+// Standalone Switch component
+figma.connect(
+  Switch,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=802-186',
+  {
+    imports: ["import { Switch } from '@ledgerhq/lumen-ui-rnative'"],
+    props: {
+      checked: figma.boolean('selected', {
+        true: true,
+        false: false,
+      }),
+      disabled: figma.enum('state', {
+        disabled: true,
+      }),
+      size: figma.enum('size', {
+        sm: 'sm',
+        md: 'md',
+      }),
+    },
+    example: (props) => (
+      <Switch
+        checked={props.checked}
+        defaultChecked={false}
+        onCheckedChange={(_checked: boolean) => {}}
+        size={props.size}
+        disabled={props.disabled}
+      />
+    ),
+  },
+);
+
+// Switch embedded inside a compound component (e.g. ListItem toggle)
+figma.connect(
+  Switch,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=8739-1875',
+  {
+    imports: ["import { Switch } from '@ledgerhq/lumen-ui-rnative'"],
+    props: {
+      switchProps: figma.nestedProps('.switch', {
+        checked: figma.boolean('selected', {
+          true: true,
+          false: false,
+        }),
+        disabled: figma.enum('state', {
+          disabled: true,
+        }),
+        size: figma.enum('size', {
+          sm: 'sm',
+          md: 'md',
+        }),
+      }),
+    },
+    example: (props) => (
+      <Switch
+        checked={props.switchProps.checked}
+        defaultChecked={false}
+        onCheckedChange={(_checked: boolean) => {}}
+        size={props.switchProps.size}
+        disabled={props.switchProps.disabled}
+      />
+    ),
+  },
+);

package/src/lib/Components/Switch/Switch.mdx

@@ -3,8 +3,6 @@ import * as SwitchStories from './Switch.stories';
 import { Switch } from './Switch';
 import { Box } from '../Utility';
 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/Switch' of={SwitchStories} />
 
@@ -146,43 +144,6 @@ The Switch component automatically supports:
 - **Space**: Toggle checked/unchecked state
 - **Enter**: Submit form (when inside a form)
 
-## Do's and Don'ts
-
-The following guidelines ensure consistent usage of the Switch component and maintain design system principles.
-
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <DoVsDontRow>
-    <DoBlockItem
-      title='Use controlled components for form state'
-      description='Use checked and onCheckedChange props for controlled switches'
-    >
-
-{/* prettier-ignore */}
-```tsx
-const [isChecked, setIsChecked] = useState(false);
-
-<Switch checked={isChecked} onCheckedChange={setIsChecked} />
-```
-
-    </DoBlockItem>
-    <DontBlockItem
-      title="Don't mix controlled and uncontrolled patterns"
-      description='Avoid using both checked and defaultChecked props together'
-    >
-
-{/* prettier-ignore */}
-```tsx
-const [isChecked, setIsChecked] = useState(false);
-
-<Switch checked={isChecked} defaultChecked={true} />
-```
-
-    </DontBlockItem>
-
-  </DoVsDontRow>
-
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>

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

@@ -0,0 +1,70 @@
+import figma from '@figma/code-connect';
+import { Placeholder } from '../../Symbols';
+import { TabBar, TabBarItem } from './TabBar';
+
+figma.connect(
+  TabBar,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=10804-1045',
+  {
+    imports: [
+      "import { TabBar, TabBarItem } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Placeholder } from '@ledgerhq/lumen-ui-rnative/symbols'",
+    ],
+    props: {
+      items: figma.enum('nb-tabs', {
+        '2': (
+          <>
+            <TabBarItem value='tab1' label='Label1' icon={Placeholder} />
+            <TabBarItem value='tab2' label='Label2' icon={Placeholder} />
+          </>
+        ),
+        '3': (
+          <>
+            <TabBarItem value='tab1' label='Label1' icon={Placeholder} />
+            <TabBarItem value='tab2' label='Label2' icon={Placeholder} />
+            <TabBarItem value='tab3' label='Label3' icon={Placeholder} />
+          </>
+        ),
+        '4': (
+          <>
+            <TabBarItem value='tab1' label='Label1' icon={Placeholder} />
+            <TabBarItem value='tab2' label='Label2' icon={Placeholder} />
+            <TabBarItem value='tab3' label='Label3' icon={Placeholder} />
+            <TabBarItem value='tab4' label='Label4' icon={Placeholder} />
+          </>
+        ),
+        '5': (
+          <>
+            <TabBarItem value='tab1' label='Label1' icon={Placeholder} />
+            <TabBarItem value='tab2' label='Label2' icon={Placeholder} />
+            <TabBarItem value='tab3' label='Label3' icon={Placeholder} />
+            <TabBarItem value='tab4' label='Label4' icon={Placeholder} />
+            <TabBarItem value='tab5' label='Label5' icon={Placeholder} />
+          </>
+        ),
+      }),
+    },
+    example: (props) => (
+      <TabBar active='tab1' onTabPress={() => {}}>
+        {props.items}
+      </TabBar>
+    ),
+  },
+);
+
+figma.connect(
+  TabBarItem,
+  'https://www.figma.com/design/JxaLVMTWirCpU0rsbZ30k7?node-id=10804-913',
+  {
+    imports: [
+      "import { TabBarItem } from '@ledgerhq/lumen-ui-rnative'",
+      "import { Placeholder } from '@ledgerhq/lumen-ui-rnative/symbols'",
+    ],
+    props: {
+      label: figma.textContent('Label'),
+    },
+    example: (props) => (
+      <TabBarItem value='tab1' label={props.label} icon={Placeholder} />
+    ),
+  },
+);

package/src/lib/Components/TabBar/TabBar.mdx

@@ -2,8 +2,6 @@ import { Meta, Canvas, Controls } from '@storybook/addon-docs/blocks';
 import * as TabBarStories from './TabBar.stories';
 import { TabBar } from './TabBar';
 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';
 
 <Meta title='Core/TabBar' of={TabBarStories} />
@@ -206,9 +204,6 @@ export default function TabLayout() {
 }
 ```
 
-<Box lx={{ flexDirection: 'column', gap: 's24' }}>
-  <CommonRulesDoAndDont />
-</Box>
 
 </Tab>
 </CustomTabs>

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>