@ledgerhq/react-ui 0.14.11-nightly.0 → 0.14.11-nightly.1

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.
Files changed (3) hide show
  1. package/lib/cjs/components/asorted/Icon/Icons.stories.js +46 -0
  2. package/lib/cjs/components/asorted/Icon/Icons.stories.js.map +2 -2
  3. package/package.json +2 -2
package/lib/cjs/components/asorted/Icon/Icons.stories.js CHANGED
@@ -78,4 +78,50 @@ IconGrid.argTypes = {
78
78
  color: { control: "color" },
79
79
  style: { control: "object" }
80
80
  };
81
+ IconGrid.parameters = {
82
+ docs: {
83
+ description: {
84
+ component: `
85
+ ### Adding New Icons to @ledgerHQ/icons-ui Package
86
+
87
+ 1. **Access Figma Core File:**
88
+ - Navigate to the [Figma Core Library](https://www.figma.com/file/lbUZsVWtBdZpuHSv6lTY9U/%E2%9A%9B%EF%B8%8F-Core-Library?type=design&node-id=12801-12882&mode=design&t=jx0X8jco5kW0wHSP-0).
89
+
90
+ 2. **Export Medium-sized Icons as SVG:**
91
+ - In Figma, open the medium-sized icons.
92
+ - Select all the icons you want to export.
93
+ - Right-click and choose **Export**.
94
+ - Ensure that the export parameters are already set as needed (no modifications required).
95
+ - Export the selected icons as SVG files.
96
+
97
+ 3. **Drop Exported SVGs to icons Package:**
98
+ - Move all the exported SVG files to the \`libs/ui/packages/icons/src/svg\` directory in your project.
99
+
100
+ 4. **Build @ledgerHQ/icons-ui Package:**
101
+ - Run the command to build the \`@ledgerHQ/icons-ui\` package:
102
+ \`\`\`
103
+ cd libs/ui/packages/icons && pnpm build
104
+ \`\`\`
105
+ - Alternatively, you can build app dependencies using:
106
+ \`\`\`
107
+ pnpm build:llm:deps
108
+ \`\`\`
109
+ - This step ensures that the updated icons are built into the \`@ledgerHQ/icons-ui\` package.
110
+
111
+ 5. **Verify Changes Locally:**
112
+ - Start your local Storybook to ensure the new icons are rendering correctly:
113
+ \`\`\`
114
+ cd libs/ui/packages/react && pnpm storybook
115
+ \`\`\`
116
+ - Open your browser and navigate to [http://localhost:6006](http://localhost:6006).
117
+ - Check that the new icons are visible and functional in the Storybook UI.
118
+
119
+
120
+
121
+
122
+ ### Reference
123
+ `
124
+ }
125
+ }
126
+ };
81
127
  //# sourceMappingURL=Icons.stories.js.map
package/lib/cjs/components/asorted/Icon/Icons.stories.js.map CHANGED
@@ -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 { Story, 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 component: null, // Since we're rendering multiple icons, we don't have a single component to import\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: Story<IconProps> = (args: IconProps) => <IconGridTemplate {...args} />;\n\nIconGrid.args = {\n size: \"M\",\n color: \"\",\n style: {},\n};\n\nIconGrid.argTypes = {\n size: {\n control: {\n type: \"select\",\n options: [\"XS\", \"S\", \"M\", \"L\", \"XL\"],\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,WAAW;AAAA;AACb;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,WAA6B,CAAC,SAAoB,6BAAAA,QAAA,cAAC,oBAAkB,GAAG,MAAM;AAE3F,SAAS,OAAO;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO,CAAC;AACV;AAEA,SAAS,WAAW;AAAA,EAClB,MAAM;AAAA,IACJ,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,CAAC,MAAM,KAAK,KAAK,KAAK,IAAI;AAAA,IACrC;AAAA,EACF;AAAA,EACA,OAAO,EAAE,SAAS,QAAQ;AAAA,EAC1B,OAAO,EAAE,SAAS,SAAS;AAC7B;",
4
+ "sourcesContent": ["import React from \"react\";\nimport { Story, 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 component: null, // Since we're rendering multiple icons, we don't have a single component to import\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: Story<IconProps> = (args: IconProps) => <IconGridTemplate {...args} />;\n\nIconGrid.args = {\n size: \"M\",\n color: \"\",\n style: {},\n};\n\nIconGrid.argTypes = {\n size: {\n control: {\n type: \"select\",\n options: [\"XS\", \"S\", \"M\", \"L\", \"XL\"],\n },\n },\n color: { control: \"color\" },\n style: { control: \"object\" },\n};\n\nIconGrid.parameters = {\n docs: {\n description: {\n component: `\n### Adding New Icons to @ledgerHQ/icons-ui Package\n\n1. **Access Figma Core File:**\n - Navigate to the [Figma Core Library](https://www.figma.com/file/lbUZsVWtBdZpuHSv6lTY9U/%E2%9A%9B%EF%B8%8F-Core-Library?type=design&node-id=12801-12882&mode=design&t=jx0X8jco5kW0wHSP-0).\n\n2. **Export Medium-sized Icons as SVG:**\n - In Figma, open the medium-sized icons.\n - Select all the icons you want to export.\n - Right-click and choose **Export**.\n - Ensure that the export parameters are already set as needed (no modifications required).\n - Export the selected icons as SVG files.\n\n3. **Drop Exported SVGs to icons Package:**\n - Move all the exported SVG files to the \\`libs/ui/packages/icons/src/svg\\` directory in your project.\n\n4. **Build @ledgerHQ/icons-ui Package:**\n - Run the command to build the \\`@ledgerHQ/icons-ui\\` package:\n \\`\\`\\`\n cd libs/ui/packages/icons && pnpm build\n \\`\\`\\`\n - Alternatively, you can build app dependencies using:\n \\`\\`\\`\n pnpm build:llm:deps\n \\`\\`\\`\n - This step ensures that the updated icons are built into the \\`@ledgerHQ/icons-ui\\` package.\n\n5. **Verify Changes Locally:**\n - Start your local Storybook to ensure the new icons are rendering correctly:\n \\`\\`\\`\n cd libs/ui/packages/react && pnpm storybook\n \\`\\`\\`\n - Open your browser and navigate to [http://localhost:6006](http://localhost:6006).\n - Check that the new icons are visible and functional in the Storybook UI.\n\\n\n\\n\n### Reference\n `,\n },\n },\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,WAAW;AAAA;AACb;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,WAA6B,CAAC,SAAoB,6BAAAA,QAAA,cAAC,oBAAkB,GAAG,MAAM;AAE3F,SAAS,OAAO;AAAA,EACd,MAAM;AAAA,EACN,OAAO;AAAA,EACP,OAAO,CAAC;AACV;AAEA,SAAS,WAAW;AAAA,EAClB,MAAM;AAAA,IACJ,SAAS;AAAA,MACP,MAAM;AAAA,MACN,SAAS,CAAC,MAAM,KAAK,KAAK,KAAK,IAAI;AAAA,IACrC;AAAA,EACF;AAAA,EACA,OAAO,EAAE,SAAS,QAAQ;AAAA,EAC1B,OAAO,EAAE,SAAS,SAAS;AAC7B;AAEA,SAAS,aAAa;AAAA,EACpB,MAAM;AAAA,IACJ,aAAa;AAAA,MACX,WAAW;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAsCb;AAAA,EACF;AACF;",
6
6
  "names": ["import_styled_components", "styled", "React"]
7
7
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ledgerhq/react-ui",
3
- "version": "0.14.11-nightly.0",
3
+ "version": "0.14.11-nightly.1",
4
4
  "description": "Ledger Live - Desktop UI",
5
5
  "author": "Ledger Live Team <team-live@ledger.fr>",
6
6
  "repository": {
@@ -68,7 +68,7 @@
68
68
  "react-transition-group": "^4.4.2",
69
69
  "react-window": "^1.8.6",
70
70
  "styled-system": "^5.1.5",
71
- "@ledgerhq/crypto-icons-ui": "^0.6.1-nightly.0",
71
+ "@ledgerhq/crypto-icons-ui": "^0.7.0-nightly.1",
72
72
  "@ledgerhq/icons-ui": "^0.6.2",
73
73
  "@ledgerhq/ui-shared": "^0.2.1"
74
74
  },