@ledgerhq/react-ui 0.11.0 → 0.12.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.
Files changed (19) hide show
  1. package/lib/cjs/components/asorted/Icon/index.js +0 -2
  2. package/lib/cjs/components/asorted/Icon/index.js.map +2 -2
  3. package/lib/cjs/components/asorted/index.js +0 -1
  4. package/lib/cjs/components/asorted/index.js.map +2 -2
  5. package/lib/cjs/components/form/BaseInput/index.js +13 -4
  6. package/lib/cjs/components/form/BaseInput/index.js.map +2 -2
  7. package/lib/components/asorted/Icon/index.d.ts +0 -1
  8. package/lib/components/asorted/Icon/index.js +0 -1
  9. package/lib/components/asorted/index.d.ts +1 -1
  10. package/lib/components/asorted/index.js +1 -1
  11. package/lib/components/form/BaseInput/index.d.ts +2 -0
  12. package/lib/components/form/BaseInput/index.js +7 -5
  13. package/package.json +2 -2
  14. package/lib/cjs/components/asorted/Icon/FlagIcon.js +0 -77
  15. package/lib/cjs/components/asorted/Icon/FlagIcon.js.map +0 -7
  16. package/lib/cjs/components/asorted/Icon/Flags.stories.js +0 -124
  17. package/lib/cjs/components/asorted/Icon/Flags.stories.js.map +0 -7
  18. package/lib/components/asorted/Icon/FlagIcon.d.ts +0 -14
  19. package/lib/components/asorted/Icon/FlagIcon.js +0 -46
package/lib/cjs/components/asorted/Icon/index.js CHANGED
@@ -24,7 +24,6 @@ var __toModule = (module2) => {
24
24
  __export(exports, {
25
25
  BoxedIcon: () => import_BoxedIcon.default,
26
26
  CryptoIcon: () => import_CryptoIcon.default,
27
- FlagIcon: () => import_FlagIcon.default,
28
27
  IconBox: () => import_BoxedIcon.IconBox,
29
28
  PaymentIcon: () => import_PaymentIcon.default,
30
29
  ProviderIcon: () => import_ProviderIcon.default,
@@ -36,5 +35,4 @@ var import_BoxedIcon = __toModule(require("./BoxedIcon"));
36
35
  var import_CryptoIcon = __toModule(require("./CryptoIcon"));
37
36
  var import_PaymentIcon = __toModule(require("./PaymentIcon"));
38
37
  var import_ProviderIcon = __toModule(require("./ProviderIcon"));
39
- var import_FlagIcon = __toModule(require("./FlagIcon"));
40
38
  //# sourceMappingURL=index.js.map
package/lib/cjs/components/asorted/Icon/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/components/asorted/Icon/index.tsx"],
4
- "sourcesContent": ["export { default, iconNames } from \"./Icon\";\nimport BoxedIcon, { IconBox } from \"./BoxedIcon\";\nexport { BoxedIcon, IconBox };\nexport type { Props } from \"./Icon\";\nexport { default as CryptoIcon } from \"./CryptoIcon\";\nexport { default as PaymentIcon } from \"./PaymentIcon\";\nexport { default as ProviderIcon } from \"./ProviderIcon\";\nexport { default as FlagIcon } from \"./FlagIcon\";\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAmC;AACnC,uBAAmC;AAGnC,wBAAsC;AACtC,yBAAuC;AACvC,0BAAwC;AACxC,sBAAoC;",
4
+ "sourcesContent": ["export { default, iconNames } from \"./Icon\";\nimport BoxedIcon, { IconBox } from \"./BoxedIcon\";\nexport { BoxedIcon, IconBox };\nexport type { Props } from \"./Icon\";\nexport { default as CryptoIcon } from \"./CryptoIcon\";\nexport { default as PaymentIcon } from \"./PaymentIcon\";\nexport { default as ProviderIcon } from \"./ProviderIcon\";\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,kBAAmC;AACnC,uBAAmC;AAGnC,wBAAsC;AACtC,yBAAuC;AACvC,0BAAwC;",
6
6
  "names": []
7
7
  }
package/lib/cjs/components/asorted/index.js CHANGED
@@ -25,7 +25,6 @@ __export(exports, {
25
25
  BoxedIcon: () => import_Icon.BoxedIcon,
26
26
  CryptoIcon: () => import_Icon.CryptoIcon,
27
27
  Divider: () => import_Divider.default,
28
- FlagIcon: () => import_Icon.FlagIcon,
29
28
  Icon: () => import_Icon.default,
30
29
  IconBox: () => import_Icon.IconBox,
31
30
  PaymentIcon: () => import_Icon.PaymentIcon,
package/lib/cjs/components/asorted/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../src/components/asorted/index.ts"],
4
- "sourcesContent": ["export { default as Divider } from \"./Divider\";\nexport {\n default as Icon,\n IconBox,\n BoxedIcon,\n CryptoIcon,\n ProviderIcon,\n PaymentIcon,\n FlagIcon,\n} from \"./Icon\";\nexport { default as Text } from \"./Text\";\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAmC;AACnC,kBAQO;AACP,kBAAgC;",
4
+ "sourcesContent": ["export { default as Divider } from \"./Divider\";\nexport { default as Icon, IconBox, BoxedIcon, CryptoIcon, ProviderIcon, PaymentIcon } from \"./Icon\";\nexport { default as Text } from \"./Text\";\n"],
5
+ "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,qBAAmC;AACnC,kBAA2F;AAC3F,kBAAgC;",
6
6
  "names": []
7
7
  }
package/lib/cjs/components/form/BaseInput/index.js CHANGED
@@ -26,6 +26,7 @@ __export(exports, {
26
26
  ClearableButtonUnstyled: () => ClearableButtonUnstyled,
27
27
  InputContainer: () => InputContainer,
28
28
  InputErrorContainer: () => InputErrorContainer,
29
+ InputInfoContainer: () => InputInfoContainer,
29
30
  InputRenderLeftContainer: () => InputRenderLeftContainer,
30
31
  InputRenderRightContainer: () => InputRenderRightContainer,
31
32
  InputWarningContainer: () => InputWarningContainer,
@@ -114,6 +115,10 @@ const InputWarningContainer = (0, import_styled_components.default)(import_Text.
114
115
  color: ${(p) => p.theme.colors.warning.c80};
115
116
  margin-left: 12px;
116
117
  `;
118
+ const InputInfoContainer = (0, import_styled_components.default)(import_Text.default)`
119
+ color: ${(p) => p.theme.colors.neutral.c60};
120
+ margin-left: 12px;
121
+ `;
117
122
  const InputRenderLeftContainer = (0, import_styled_components.default)(import_Flex.default).attrs(() => ({
118
123
  alignItems: "center",
119
124
  pl: "16px"
@@ -132,6 +137,7 @@ function Input(props, ref) {
132
137
  disabled,
133
138
  error,
134
139
  warning,
140
+ info,
135
141
  onChange,
136
142
  onChangeEvent,
137
143
  renderLeft,
@@ -158,6 +164,7 @@ function Input(props, ref) {
158
164
  disabled,
159
165
  error,
160
166
  warning,
167
+ info,
161
168
  onChange: handleChange,
162
169
  value: inputValue,
163
170
  onFocus: (event) => {
@@ -189,15 +196,17 @@ function Input(props, ref) {
189
196
  error,
190
197
  warning,
191
198
  ...containerProps
192
- }, inner), (error || warning) && !disabled && /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
199
+ }, inner), (error || warning || info) && !disabled && /* @__PURE__ */ import_react.default.createElement(import_Flex.default, {
193
200
  flexDirection: "column",
194
201
  rowGap: 2,
195
202
  mt: 2
196
- }, error && /* @__PURE__ */ import_react.default.createElement(InputErrorContainer, {
203
+ }, error ? /* @__PURE__ */ import_react.default.createElement(InputErrorContainer, {
204
+ variant: "small"
205
+ }, error) : warning ? /* @__PURE__ */ import_react.default.createElement(InputWarningContainer, {
197
206
  variant: "small"
198
- }, error), warning && /* @__PURE__ */ import_react.default.createElement(InputWarningContainer, {
207
+ }, warning) : info ? /* @__PURE__ */ import_react.default.createElement(InputInfoContainer, {
199
208
  variant: "small"
200
- }, warning)));
209
+ }, info) : null));
201
210
  }
202
211
  var BaseInput_default = import_react.default.forwardRef(Input);
203
212
  //# sourceMappingURL=index.js.map
package/lib/cjs/components/form/BaseInput/index.js.map CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "version": 3,
3
3
  "sources": ["../../../../../src/components/form/BaseInput/index.tsx"],
4
- "sourcesContent": ["import styled, { css } from \"styled-components\";\nimport { typography, TypographyProps } from \"styled-system\";\nimport React, { InputHTMLAttributes, useState, useMemo, useCallback } from \"react\";\nimport CircledCrossSolidMedium from \"@ledgerhq/icons-ui/react/CircledCrossSolidMedium\";\nimport FlexBox from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\nimport { rgba } from \"../../../styles/helpers\";\nimport { ButtonUnstyled } from \"../../cta/Button\";\n\ntype ValueType = HTMLInputElement[\"value\"];\n\nexport type CommonProps = InputHTMLAttributes<HTMLInputElement> &\n TypographyProps & {\n disabled?: boolean;\n error?: string;\n warning?: string;\n };\n\nexport type InputProps<T = ValueType> = Omit<CommonProps, \"value\" | \"onChange\"> & {\n value: T;\n onChange?: (value: T) => void;\n onChangeEvent?: InputHTMLAttributes<HTMLInputElement>[\"onChange\"];\n renderLeft?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;\n renderRight?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;\n unwrapped?: boolean;\n containerProps?: InputContainerProps;\n clearable?: boolean;\n /**\n * A function can be provided to serialize a value of any type to a string.\n *\n * This can be useful to wrap the `<BaseInput />` component (which expects a string)\n * and create higher-level components that will automatically perform the input/output\n * conversion to other types.\n *\n * *A serializer function should always be used in conjunction with a deserializer function.*\n */\n serialize?: (value: T) => ValueType;\n /**\n * A deserializer can be provided to convert the html input value from a string to any other type.\n *\n * *A deserializer function should always be used in conjunction with a serializer function.*\n */\n deserialize?: (value: ValueType) => T;\n};\n\nexport type InputContainerProps = React.ComponentProps<typeof InputContainer>;\nexport const InputContainer = styled.div<Partial<CommonProps> & { focus?: boolean }>`\n display: flex;\n height: 48px;\n border: ${(p) => `1px solid ${p.theme.colors.neutral.c40}`};\n border-radius: 24px;\n transition: all 0.2s ease;\n color: ${(p) => p.theme.colors.neutral.c100};\n\n ${(p) =>\n p.focus &&\n !p.error &&\n !p.warning &&\n css`\n border: 1px solid ${p.theme.colors.primary.c80};\n box-shadow: 0 0 0 4px ${rgba(p.theme.colors.primary.c60, 0.4)};\n `};\n\n ${(p) =>\n p.error &&\n !p.disabled &&\n css`\n border: 1px solid ${p.theme.colors.error.c100};\n `};\n\n ${(p) =>\n !p.error &&\n p.warning &&\n !p.disabled &&\n css`\n border: 1px solid ${p.theme.colors.warning.c80};\n `};\n\n ${(p) =>\n !p.error &&\n !p.warning &&\n !p.disabled &&\n css`\n &:hover {\n border: ${!p.disabled && `1px solid ${p.theme.colors.primary.c80}`};\n }\n `};\n\n ${(p) =>\n p.disabled &&\n css`\n color: ${p.theme.colors.neutral.c60};\n background: ${(p) => p.theme.colors.neutral.c20};\n `};\n`;\n\nexport const BaseInput = styled.input.attrs<\n Partial<CommonProps> & { focus?: boolean } & TypographyProps\n>({\n fontSize: \"paragraph\",\n fontWeight: \"medium\",\n})<Partial<CommonProps> & { focus?: boolean } & TypographyProps>`\n height: 100%;\n width: 100%;\n border: 0;\n caret-color: ${(p) => (p.error ? p.theme.colors.error.c100 : p.theme.colors.primary.c80)};\n background: none;\n outline: none;\n cursor: ${(p) => (p.disabled ? \"not-allowed\" : \"text\")};\n flex-shrink: 1;\n padding-left: 20px;\n padding-right: 20px;\n &::placeholder {\n color: ${(p) => (p.disabled ? p.theme.colors.neutral.c50 : p.theme.colors.neutral.c70)};\n }\n\n /* stylelint-disable property-no-vendor-prefix */\n\n /* Hide type=number arrow for Chrome, Safari, Edge, Opera */\n &::-webkit-outer-spin-button,\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n /* Hide type=number arrow for Firefox */\n &[type=\"number\"] {\n -moz-appearance: textfield;\n }\n /* stylelint-enable property-no-vendor-prefix */\n\n ${typography}\n`;\n\nexport const InputErrorContainer = styled(Text)`\n color: ${(p) => p.theme.colors.error.c100};\n margin-left: 12px;\n`;\nexport const InputWarningContainer = styled(Text)`\n color: ${(p) => p.theme.colors.warning.c80};\n margin-left: 12px;\n`;\n\nexport const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({\n alignItems: \"center\",\n pl: \"16px\",\n}))``;\n\nexport const InputRenderRightContainer = styled(FlexBox).attrs(() => ({\n alignItems: \"center\",\n pr: \"16px\",\n}))``;\n\nexport const ClearableButtonUnstyled = styled(ButtonUnstyled)`\n display: flex;\n`;\n\n// Yes, this is dirty. If you can figure out a better way please change the code :).\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst IDENTITY = (_: any): any => _;\n\nfunction Input<T = ValueType>(\n props: InputProps<T>,\n ref?: React.ForwardedRef<HTMLInputElement>,\n): JSX.Element {\n const {\n value,\n disabled,\n error,\n warning,\n onChange,\n onChangeEvent,\n renderLeft,\n renderRight,\n unwrapped,\n containerProps,\n serialize = IDENTITY,\n deserialize = IDENTITY,\n clearable,\n ...htmlInputProps\n } = props;\n const [focus, setFocus] = useState(false);\n const inputValue = useMemo(() => serialize(value), [serialize, value]);\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange && onChange(deserialize(e.target.value));\n onChangeEvent && onChangeEvent(e);\n },\n [onChange, onChangeEvent, deserialize],\n );\n\n const handleClear = useCallback(() => {\n onChange && onChange(deserialize(\"\"));\n }, [onChange, deserialize]);\n\n const inner = (\n <>\n {typeof renderLeft === \"function\" ? renderLeft(props) : renderLeft}\n <BaseInput\n ref={ref}\n {...htmlInputProps}\n disabled={disabled}\n error={error}\n warning={warning}\n onChange={handleChange}\n value={inputValue}\n onFocus={(event: React.FocusEvent<HTMLInputElement>) => {\n setFocus(true);\n htmlInputProps.onFocus && htmlInputProps.onFocus(event);\n }}\n onBlur={(event: React.FocusEvent<HTMLInputElement>) => {\n setFocus(false);\n htmlInputProps.onBlur && htmlInputProps.onBlur(event);\n }}\n />\n {clearable && inputValue && (\n <FlexBox alignItems={\"center\"} mr={7}>\n <ClearableButtonUnstyled onClick={handleClear}>\n <CircledCrossSolidMedium size={18} color={\"neutral.c50\"} />\n </ClearableButtonUnstyled>\n </FlexBox>\n )}\n {typeof renderRight === \"function\" ? renderRight(props) : renderRight}\n </>\n );\n\n if (unwrapped) {\n return (\n <FlexBox alignItems=\"stretch\" style={{ height: \"100%\" }}>\n {inner}\n </FlexBox>\n );\n }\n\n return (\n <div>\n <InputContainer\n disabled={disabled}\n focus={focus}\n error={error}\n warning={warning}\n {...containerProps}\n >\n {inner}\n </InputContainer>\n {(error || warning) && !disabled && (\n <FlexBox flexDirection=\"column\" rowGap={2} mt={2}>\n {error && <InputErrorContainer variant=\"small\">{error}</InputErrorContainer>}\n {warning && <InputWarningContainer variant=\"small\">{warning}</InputWarningContainer>}\n </FlexBox>\n )}\n </div>\n );\n}\n\nexport default React.forwardRef(Input) as <T>(\n props: InputProps<T> & { ref?: React.ForwardedRef<HTMLInputElement> },\n) => ReturnType<typeof Input>;\n"],
5
- "mappings": "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",
4
+ "sourcesContent": ["import styled, { css } from \"styled-components\";\nimport { typography, TypographyProps } from \"styled-system\";\nimport React, { InputHTMLAttributes, useState, useMemo, useCallback } from \"react\";\nimport CircledCrossSolidMedium from \"@ledgerhq/icons-ui/react/CircledCrossSolidMedium\";\nimport FlexBox from \"../../layout/Flex\";\nimport Text from \"../../asorted/Text\";\nimport { rgba } from \"../../../styles/helpers\";\nimport { ButtonUnstyled } from \"../../cta/Button\";\n\ntype ValueType = HTMLInputElement[\"value\"];\n\nexport type CommonProps = InputHTMLAttributes<HTMLInputElement> &\n TypographyProps & {\n disabled?: boolean;\n error?: string;\n warning?: string;\n info?: string;\n };\n\nexport type InputProps<T = ValueType> = Omit<CommonProps, \"value\" | \"onChange\"> & {\n value: T;\n onChange?: (value: T) => void;\n onChangeEvent?: InputHTMLAttributes<HTMLInputElement>[\"onChange\"];\n renderLeft?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;\n renderRight?: ((props: InputProps<T>) => React.ReactNode) | React.ReactNode;\n unwrapped?: boolean;\n containerProps?: InputContainerProps;\n clearable?: boolean;\n /**\n * A function can be provided to serialize a value of any type to a string.\n *\n * This can be useful to wrap the `<BaseInput />` component (which expects a string)\n * and create higher-level components that will automatically perform the input/output\n * conversion to other types.\n *\n * *A serializer function should always be used in conjunction with a deserializer function.*\n */\n serialize?: (value: T) => ValueType;\n /**\n * A deserializer can be provided to convert the html input value from a string to any other type.\n *\n * *A deserializer function should always be used in conjunction with a serializer function.*\n */\n deserialize?: (value: ValueType) => T;\n};\n\nexport type InputContainerProps = React.ComponentProps<typeof InputContainer>;\nexport const InputContainer = styled.div<Partial<CommonProps> & { focus?: boolean }>`\n display: flex;\n height: 48px;\n border: ${(p) => `1px solid ${p.theme.colors.neutral.c40}`};\n border-radius: 24px;\n transition: all 0.2s ease;\n color: ${(p) => p.theme.colors.neutral.c100};\n\n ${(p) =>\n p.focus &&\n !p.error &&\n !p.warning &&\n css`\n border: 1px solid ${p.theme.colors.primary.c80};\n box-shadow: 0 0 0 4px ${rgba(p.theme.colors.primary.c60, 0.4)};\n `};\n\n ${(p) =>\n p.error &&\n !p.disabled &&\n css`\n border: 1px solid ${p.theme.colors.error.c100};\n `};\n\n ${(p) =>\n !p.error &&\n p.warning &&\n !p.disabled &&\n css`\n border: 1px solid ${p.theme.colors.warning.c80};\n `};\n\n ${(p) =>\n !p.error &&\n !p.warning &&\n !p.disabled &&\n css`\n &:hover {\n border: ${!p.disabled && `1px solid ${p.theme.colors.primary.c80}`};\n }\n `};\n\n ${(p) =>\n p.disabled &&\n css`\n color: ${p.theme.colors.neutral.c60};\n background: ${(p) => p.theme.colors.neutral.c20};\n `};\n`;\n\nexport const BaseInput = styled.input.attrs<\n Partial<CommonProps> & { focus?: boolean } & TypographyProps\n>({\n fontSize: \"paragraph\",\n fontWeight: \"medium\",\n})<Partial<CommonProps> & { focus?: boolean } & TypographyProps>`\n height: 100%;\n width: 100%;\n border: 0;\n caret-color: ${(p) => (p.error ? p.theme.colors.error.c100 : p.theme.colors.primary.c80)};\n background: none;\n outline: none;\n cursor: ${(p) => (p.disabled ? \"not-allowed\" : \"text\")};\n flex-shrink: 1;\n padding-left: 20px;\n padding-right: 20px;\n &::placeholder {\n color: ${(p) => (p.disabled ? p.theme.colors.neutral.c50 : p.theme.colors.neutral.c70)};\n }\n\n /* stylelint-disable property-no-vendor-prefix */\n\n /* Hide type=number arrow for Chrome, Safari, Edge, Opera */\n &::-webkit-outer-spin-button,\n ::-webkit-inner-spin-button {\n -webkit-appearance: none;\n margin: 0;\n }\n\n /* Hide type=number arrow for Firefox */\n &[type=\"number\"] {\n -moz-appearance: textfield;\n }\n /* stylelint-enable property-no-vendor-prefix */\n\n ${typography}\n`;\n\nexport const InputErrorContainer = styled(Text)`\n color: ${(p) => p.theme.colors.error.c100};\n margin-left: 12px;\n`;\nexport const InputWarningContainer = styled(Text)`\n color: ${(p) => p.theme.colors.warning.c80};\n margin-left: 12px;\n`;\nexport const InputInfoContainer = styled(Text)`\n color: ${(p) => p.theme.colors.neutral.c60};\n margin-left: 12px;\n`;\n\nexport const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({\n alignItems: \"center\",\n pl: \"16px\",\n}))``;\n\nexport const InputRenderRightContainer = styled(FlexBox).attrs(() => ({\n alignItems: \"center\",\n pr: \"16px\",\n}))``;\n\nexport const ClearableButtonUnstyled = styled(ButtonUnstyled)`\n display: flex;\n`;\n\n// Yes, this is dirty. If you can figure out a better way please change the code :).\n// eslint-disable-next-line @typescript-eslint/no-explicit-any\nconst IDENTITY = (_: any): any => _;\n\nfunction Input<T = ValueType>(\n props: InputProps<T>,\n ref?: React.ForwardedRef<HTMLInputElement>,\n): JSX.Element {\n const {\n value,\n disabled,\n error,\n warning,\n info,\n onChange,\n onChangeEvent,\n renderLeft,\n renderRight,\n unwrapped,\n containerProps,\n serialize = IDENTITY,\n deserialize = IDENTITY,\n clearable,\n ...htmlInputProps\n } = props;\n const [focus, setFocus] = useState(false);\n const inputValue = useMemo(() => serialize(value), [serialize, value]);\n\n const handleChange = useCallback(\n (e: React.ChangeEvent<HTMLInputElement>) => {\n onChange && onChange(deserialize(e.target.value));\n onChangeEvent && onChangeEvent(e);\n },\n [onChange, onChangeEvent, deserialize],\n );\n\n const handleClear = useCallback(() => {\n onChange && onChange(deserialize(\"\"));\n }, [onChange, deserialize]);\n\n const inner = (\n <>\n {typeof renderLeft === \"function\" ? renderLeft(props) : renderLeft}\n <BaseInput\n ref={ref}\n {...htmlInputProps}\n disabled={disabled}\n error={error}\n warning={warning}\n info={info}\n onChange={handleChange}\n value={inputValue}\n onFocus={(event: React.FocusEvent<HTMLInputElement>) => {\n setFocus(true);\n htmlInputProps.onFocus && htmlInputProps.onFocus(event);\n }}\n onBlur={(event: React.FocusEvent<HTMLInputElement>) => {\n setFocus(false);\n htmlInputProps.onBlur && htmlInputProps.onBlur(event);\n }}\n />\n {clearable && inputValue && (\n <FlexBox alignItems={\"center\"} mr={7}>\n <ClearableButtonUnstyled onClick={handleClear}>\n <CircledCrossSolidMedium size={18} color={\"neutral.c50\"} />\n </ClearableButtonUnstyled>\n </FlexBox>\n )}\n {typeof renderRight === \"function\" ? renderRight(props) : renderRight}\n </>\n );\n\n if (unwrapped) {\n return (\n <FlexBox alignItems=\"stretch\" style={{ height: \"100%\" }}>\n {inner}\n </FlexBox>\n );\n }\n\n return (\n <div>\n <InputContainer\n disabled={disabled}\n focus={focus}\n error={error}\n warning={warning}\n {...containerProps}\n >\n {inner}\n </InputContainer>\n {(error || warning || info) && !disabled && (\n <FlexBox flexDirection=\"column\" rowGap={2} mt={2}>\n {error ? (\n <InputErrorContainer variant=\"small\">{error}</InputErrorContainer>\n ) : warning ? (\n <InputWarningContainer variant=\"small\">{warning}</InputWarningContainer>\n ) : info ? (\n <InputInfoContainer variant=\"small\">{info}</InputInfoContainer>\n ) : null}\n </FlexBox>\n )}\n </div>\n );\n}\n\nexport default React.forwardRef(Input) as <T>(\n props: InputProps<T> & { ref?: React.ForwardedRef<HTMLInputElement> },\n) => ReturnType<typeof Input>;\n"],
5
+ "mappings": "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",
6
6
  "names": []
7
7
  }
package/lib/components/asorted/Icon/index.d.ts CHANGED
@@ -5,4 +5,3 @@ export type { Props } from "./Icon";
5
5
  export { default as CryptoIcon } from "./CryptoIcon";
6
6
  export { default as PaymentIcon } from "./PaymentIcon";
7
7
  export { default as ProviderIcon } from "./ProviderIcon";
8
- export { default as FlagIcon } from "./FlagIcon";
package/lib/components/asorted/Icon/index.js CHANGED
@@ -4,4 +4,3 @@ export { BoxedIcon, IconBox };
4
4
  export { default as CryptoIcon } from "./CryptoIcon";
5
5
  export { default as PaymentIcon } from "./PaymentIcon";
6
6
  export { default as ProviderIcon } from "./ProviderIcon";
7
- export { default as FlagIcon } from "./FlagIcon";
package/lib/components/asorted/index.d.ts CHANGED
@@ -1,3 +1,3 @@
1
1
  export { default as Divider } from "./Divider";
2
- export { default as Icon, IconBox, BoxedIcon, CryptoIcon, ProviderIcon, PaymentIcon, FlagIcon, } from "./Icon";
2
+ export { default as Icon, IconBox, BoxedIcon, CryptoIcon, ProviderIcon, PaymentIcon } from "./Icon";
3
3
  export { default as Text } from "./Text";
package/lib/components/asorted/index.js CHANGED
@@ -1,3 +1,3 @@
1
1
  export { default as Divider } from "./Divider";
2
- export { default as Icon, IconBox, BoxedIcon, CryptoIcon, ProviderIcon, PaymentIcon, FlagIcon, } from "./Icon";
2
+ export { default as Icon, IconBox, BoxedIcon, CryptoIcon, ProviderIcon, PaymentIcon } from "./Icon";
3
3
  export { default as Text } from "./Text";
package/lib/components/form/BaseInput/index.d.ts CHANGED
@@ -5,6 +5,7 @@ export type CommonProps = InputHTMLAttributes<HTMLInputElement> & TypographyProp
5
5
  disabled?: boolean;
6
6
  error?: string;
7
7
  warning?: string;
8
+ info?: string;
8
9
  };
9
10
  export type InputProps<T = ValueType> = Omit<CommonProps, "value" | "onChange"> & {
10
11
  value: T;
@@ -41,6 +42,7 @@ export declare const BaseInput: import("styled-components").StyledComponent<"inp
41
42
  } & TypographyProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>>, never>;
42
43
  export declare const InputErrorContainer: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../asorted/Text").TextProps, keyof import("../../asorted/Text").TextProps>;
43
44
  export declare const InputWarningContainer: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../asorted/Text").TextProps, keyof import("../../asorted/Text").TextProps>;
45
+ export declare const InputInfoContainer: import("styled-components").StyledComponent<"span", import("styled-components").DefaultTheme, import("../../asorted/Text").TextProps, keyof import("../../asorted/Text").TextProps>;
44
46
  export declare const InputRenderLeftContainer: import("styled-components").StyledComponent<"div", import("styled-components").DefaultTheme, import("styled-system").SpaceProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").FlexboxProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").PositionProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").ColorProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, string | number | symbol> & import("styled-system").LayoutProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & import("styled-system").BorderProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>, import("csstype").Property.Border<import("styled-system").TLengthStyledSystem>> & import("styled-system").OverflowProps<Required<import("styled-system").Theme<import("styled-system").TLengthStyledSystem>>> & {
45
47
  columnGap?: string | number | undefined;
46
48
  rowGap?: string | number | undefined;
package/lib/components/form/BaseInput/index.js CHANGED
@@ -104,6 +104,10 @@ export const InputWarningContainer = styled(Text) `
104
104
  color: ${(p) => p.theme.colors.warning.c80};
105
105
  margin-left: 12px;
106
106
  `;
107
+ export const InputInfoContainer = styled(Text) `
108
+ color: ${(p) => p.theme.colors.neutral.c60};
109
+ margin-left: 12px;
110
+ `;
107
111
  export const InputRenderLeftContainer = styled(FlexBox).attrs(() => ({
108
112
  alignItems: "center",
109
113
  pl: "16px",
@@ -119,7 +123,7 @@ export const ClearableButtonUnstyled = styled(ButtonUnstyled) `
119
123
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
120
124
  const IDENTITY = (_) => _;
121
125
  function Input(props, ref) {
122
- const { value, disabled, error, warning, onChange, onChangeEvent, renderLeft, renderRight, unwrapped, containerProps, serialize = IDENTITY, deserialize = IDENTITY, clearable } = props, htmlInputProps = __rest(props, ["value", "disabled", "error", "warning", "onChange", "onChangeEvent", "renderLeft", "renderRight", "unwrapped", "containerProps", "serialize", "deserialize", "clearable"]);
126
+ const { value, disabled, error, warning, info, onChange, onChangeEvent, renderLeft, renderRight, unwrapped, containerProps, serialize = IDENTITY, deserialize = IDENTITY, clearable } = props, htmlInputProps = __rest(props, ["value", "disabled", "error", "warning", "info", "onChange", "onChangeEvent", "renderLeft", "renderRight", "unwrapped", "containerProps", "serialize", "deserialize", "clearable"]);
123
127
  const [focus, setFocus] = useState(false);
124
128
  const inputValue = useMemo(() => serialize(value), [serialize, value]);
125
129
  const handleChange = useCallback((e) => {
@@ -131,7 +135,7 @@ function Input(props, ref) {
131
135
  }, [onChange, deserialize]);
132
136
  const inner = (React.createElement(React.Fragment, null,
133
137
  typeof renderLeft === "function" ? renderLeft(props) : renderLeft,
134
- React.createElement(BaseInput, Object.assign({ ref: ref }, htmlInputProps, { disabled: disabled, error: error, warning: warning, onChange: handleChange, value: inputValue, onFocus: (event) => {
138
+ React.createElement(BaseInput, Object.assign({ ref: ref }, htmlInputProps, { disabled: disabled, error: error, warning: warning, info: info, onChange: handleChange, value: inputValue, onFocus: (event) => {
135
139
  setFocus(true);
136
140
  htmlInputProps.onFocus && htmlInputProps.onFocus(event);
137
141
  }, onBlur: (event) => {
@@ -147,8 +151,6 @@ function Input(props, ref) {
147
151
  }
148
152
  return (React.createElement("div", null,
149
153
  React.createElement(InputContainer, Object.assign({ disabled: disabled, focus: focus, error: error, warning: warning }, containerProps), inner),
150
- (error || warning) && !disabled && (React.createElement(FlexBox, { flexDirection: "column", rowGap: 2, mt: 2 },
151
- error && React.createElement(InputErrorContainer, { variant: "small" }, error),
152
- warning && React.createElement(InputWarningContainer, { variant: "small" }, warning)))));
154
+ (error || warning || info) && !disabled && (React.createElement(FlexBox, { flexDirection: "column", rowGap: 2, mt: 2 }, error ? (React.createElement(InputErrorContainer, { variant: "small" }, error)) : warning ? (React.createElement(InputWarningContainer, { variant: "small" }, warning)) : info ? (React.createElement(InputInfoContainer, { variant: "small" }, info)) : null))));
153
155
  }
154
156
  export default React.forwardRef(Input);
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ledgerhq/react-ui",
3
- "version": "0.11.0",
3
+ "version": "0.12.0-next.0",
4
4
  "description": "Ledger Live - Desktop UI",
5
5
  "author": "Ledger Live Team <team-live@ledger.fr>",
6
6
  "repository": {
@@ -76,7 +76,7 @@
76
76
  "react-window": "^1.8.6",
77
77
  "styled-system": "^5.1.5",
78
78
  "@ledgerhq/crypto-icons-ui": "^0.2.1",
79
- "@ledgerhq/icons-ui": "^0.3.4",
79
+ "@ledgerhq/icons-ui": "^0.3.5-next.0",
80
80
  "@ledgerhq/ui-shared": "^0.1.10"
81
81
  },
82
82
  "peerDependencies": {
package/lib/cjs/components/asorted/Icon/FlagIcon.js DELETED
@@ -1,77 +0,0 @@
1
- var __create = Object.create;
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __getProtoOf = Object.getPrototypeOf;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
- var __export = (target, all) => {
9
- __markAsModule(target);
10
- for (var name in all)
11
- __defProp(target, name, { get: all[name], enumerable: true });
12
- };
13
- var __reExport = (target, module2, desc) => {
14
- if (module2 && typeof module2 === "object" || typeof module2 === "function") {
15
- for (let key of __getOwnPropNames(module2))
16
- if (!__hasOwnProp.call(target, key) && key !== "default")
17
- __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
18
- }
19
- return target;
20
- };
21
- var __toModule = (module2) => {
22
- return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
23
- };
24
- __export(exports, {
25
- default: () => FlagIcon_default,
26
- iconNames: () => iconNames,
27
- sizes: () => sizes
28
- });
29
- var flags = __toModule(require("@ledgerhq/icons-ui/react/Flags/index"));
30
- var import_react = __toModule(require("react"));
31
- var import_styled_components = __toModule(require("styled-components"));
32
- var import_Flex = __toModule(require("../../layout/Flex"));
33
- const sizes = {
34
- XXS: 16,
35
- S: 32,
36
- L: 48
37
- };
38
- const iconNames = Array.from(Object.keys(flags).reduce((set, rawKey) => {
39
- const key = rawKey.replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, "$1").replace(/(.+)(Ultra)+$/g, "$1");
40
- if (!set.has(key))
41
- set.add(key);
42
- return set;
43
- }, new Set()));
44
- const FlagContainer = (0, import_styled_components.default)(import_Flex.default).attrs({
45
- borderRadius: "50%",
46
- position: "relative"
47
- })`
48
- &:after {
49
- content: "";
50
- display: block;
51
- box-shadow: inset 0 0 10px black;
52
- position: absolute;
53
- top: 0;
54
- left: 0;
55
- width: 100%;
56
- height: 100%;
57
- border-radius: 100%;
58
- opacity: 10%;
59
- ${(p) => `box-shadow: inset 0px 0px 0px 1px ${p.theme.colors.neutral.c100};`}
60
- }
61
- `;
62
- const FlagIcon = ({ name, size = "S" }) => {
63
- const maybeIconName = `${name}`;
64
- if (maybeIconName in flags) {
65
- const Component = flags[maybeIconName];
66
- return /* @__PURE__ */ import_react.default.createElement(FlagContainer, {
67
- width: sizes[size],
68
- height: sizes[size],
69
- overflow: "hidden"
70
- }, /* @__PURE__ */ import_react.default.createElement(Component, {
71
- size: sizes[size]
72
- }));
73
- }
74
- return null;
75
- };
76
- var FlagIcon_default = FlagIcon;
77
- //# sourceMappingURL=FlagIcon.js.map
package/lib/cjs/components/asorted/Icon/FlagIcon.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../src/components/asorted/Icon/FlagIcon.tsx"],
4
- "sourcesContent": ["import * as flags from \"@ledgerhq/icons-ui/react/Flags/index\";\nimport React from \"react\";\nimport styled from \"styled-components\";\nimport FlexBox from \"../../layout/Flex\";\n\nexport const sizes = {\n XXS: 16,\n S: 32,\n L: 48,\n};\n\nexport type FlagsSizes = keyof typeof sizes;\n\nexport type Props = {\n name: string;\n size?: FlagsSizes;\n};\n\nexport const iconNames = Array.from(\n Object.keys(flags).reduce((set, rawKey) => {\n const key = rawKey\n .replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, \"$1\")\n .replace(/(.+)(Ultra)+$/g, \"$1\");\n if (!set.has(key)) set.add(key);\n return set;\n }, new Set<string>()),\n);\n\nconst FlagContainer = styled(FlexBox).attrs({\n borderRadius: \"50%\",\n position: \"relative\",\n})`\n &:after {\n content: \"\";\n display: block;\n box-shadow: inset 0 0 10px black;\n position: absolute;\n top: 0;\n left: 0;\n width: 100%;\n height: 100%;\n border-radius: 100%;\n opacity: 10%;\n ${(p) => `box-shadow: inset 0px 0px 0px 1px ${p.theme.colors.neutral.c100};`}\n }\n`;\n\nconst FlagIcon = ({ name, size = \"S\" }: Props): JSX.Element | null => {\n const maybeIconName = `${name}`;\n\n if (maybeIconName in flags) {\n // @ts-expect-error FIXME I don't know how to make you happy ts\n const Component = flags[maybeIconName];\n return (\n <FlagContainer width={sizes[size]} height={sizes[size]} overflow={\"hidden\"}>\n <Component size={sizes[size]} />\n </FlagContainer>\n );\n }\n return null;\n};\n\nexport default FlagIcon;\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAAuB;AACvB,mBAAkB;AAClB,+BAAmB;AACnB,kBAAoB;AAEb,MAAM,QAAQ;AAAA,EACnB,KAAK;AAAA,EACL,GAAG;AAAA,EACH,GAAG;AAAA;AAUE,MAAM,YAAY,MAAM,KAC7B,OAAO,KAAK,OAAO,OAAO,CAAC,KAAK,WAAW;AACzC,QAAM,MAAM,OACT,QAAQ,iDAAiD,MACzD,QAAQ,kBAAkB;AAC7B,MAAI,CAAC,IAAI,IAAI;AAAM,QAAI,IAAI;AAC3B,SAAO;AAAA,GACN,IAAI;AAGT,MAAM,gBAAgB,sCAAO,qBAAS,MAAM;AAAA,EAC1C,cAAc;AAAA,EACd,UAAU;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,MAaN,CAAC,MAAM,qCAAqC,EAAE,MAAM,OAAO,QAAQ;AAAA;AAAA;AAIzE,MAAM,WAAW,CAAC,EAAE,MAAM,OAAO,UAAqC;AACpE,QAAM,gBAAgB,GAAG;AAEzB,MAAI,iBAAiB,OAAO;AAE1B,UAAM,YAAY,MAAM;AACxB,WACE,mDAAC,eAAD;AAAA,MAAe,OAAO,MAAM;AAAA,MAAO,QAAQ,MAAM;AAAA,MAAO,UAAU;AAAA,OAChE,mDAAC,WAAD;AAAA,MAAW,MAAM,MAAM;AAAA;AAAA;AAI7B,SAAO;AAAA;AAGT,IAAO,mBAAQ;",
6
- "names": []
7
- }
package/lib/cjs/components/asorted/Icon/Flags.stories.js DELETED
@@ -1,124 +0,0 @@
1
- var __create = Object.create;
2
- var __defProp = Object.defineProperty;
3
- var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
4
- var __getOwnPropNames = Object.getOwnPropertyNames;
5
- var __getProtoOf = Object.getPrototypeOf;
6
- var __hasOwnProp = Object.prototype.hasOwnProperty;
7
- var __markAsModule = (target) => __defProp(target, "__esModule", { value: true });
8
- var __export = (target, all) => {
9
- __markAsModule(target);
10
- for (var name in all)
11
- __defProp(target, name, { get: all[name], enumerable: true });
12
- };
13
- var __reExport = (target, module2, desc) => {
14
- if (module2 && typeof module2 === "object" || typeof module2 === "function") {
15
- for (let key of __getOwnPropNames(module2))
16
- if (!__hasOwnProp.call(target, key) && key !== "default")
17
- __defProp(target, key, { get: () => module2[key], enumerable: !(desc = __getOwnPropDesc(module2, key)) || desc.enumerable });
18
- }
19
- return target;
20
- };
21
- var __toModule = (module2) => {
22
- return __reExport(__markAsModule(__defProp(module2 != null ? __create(__getProtoOf(module2)) : {}, "default", module2 && module2.__esModule && "default" in module2 ? { get: () => module2.default, enumerable: true } : { value: module2, enumerable: true })), module2);
23
- };
24
- __export(exports, {
25
- List: () => List,
26
- SingleIcon: () => SingleIcon,
27
- default: () => Flags_stories_default
28
- });
29
- var import_react = __toModule(require("react"));
30
- var import_styled_components = __toModule(require("styled-components"));
31
- var import_FlagIcon = __toModule(require("./FlagIcon"));
32
- var import__ = __toModule(require("../../.."));
33
- const ScrollArea = (0, import_styled_components.default)(import__.Grid)`
34
- flex: 1;
35
- height: auto;
36
- ${(p) => p.theme.overflow.y};
37
- `;
38
- const Container = (0, import_styled_components.default)(import__.Flex).attrs({
39
- flex: 1,
40
- flexDirection: "column",
41
- p: 4
42
- })`
43
- overflow: hidden;
44
- height: calc(100vh - 4em);
45
- `;
46
- const IconContainer = (0, import_styled_components.default)(import__.Flex).attrs({
47
- flexDirection: "column",
48
- justifyContent: "flex-end",
49
- alignItems: "center",
50
- p: 4
51
- })`
52
- ${(p) => p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``}
53
- border-radius: 4px;
54
- height: 100px;
55
- `;
56
- const Bold = import_styled_components.default.b`
57
- color: ${(p) => p.theme.colors.primary.c80};
58
- `;
59
- const Story = {
60
- title: "Asorted/Icons/Flags",
61
- argTypes: {
62
- size: {
63
- type: "enum",
64
- description: "Icon size",
65
- defaultValue: "L",
66
- control: {
67
- options: Object.keys(import_FlagIcon.sizes)
68
- }
69
- },
70
- name: {
71
- type: "enum",
72
- defaultValue: "France",
73
- description: "[Only for single icon], Icon name",
74
- control: {
75
- options: import_FlagIcon.iconNames,
76
- control: {
77
- type: "select"
78
- }
79
- }
80
- }
81
- }
82
- };
83
- var Flags_stories_default = Story;
84
- const ListTemplate = (args) => {
85
- const [search, setSearch] = (0, import_react.useState)("");
86
- const s = search.toLowerCase();
87
- const regexp = new RegExp(s, "i");
88
- return /* @__PURE__ */ import_react.default.createElement(Container, null, /* @__PURE__ */ import_react.default.createElement(import__.SearchInput, {
89
- value: search,
90
- onChange: setSearch
91
- }), /* @__PURE__ */ import_react.default.createElement(ScrollArea, {
92
- gridTemplateColumns: "repeat(auto-fill, 100px);",
93
- gridTemplateRows: "repeat(auto-fill, 100px);",
94
- gridGap: 4,
95
- mt: 4
96
- }, import_FlagIcon.iconNames.sort((a, b) => {
97
- return s ? b.toLowerCase().indexOf(s) - a.toLowerCase().indexOf(s) : a.localeCompare(b);
98
- }).map((name) => {
99
- const match = name.match(regexp);
100
- const active = s && match;
101
- const index = match?.index ?? 0;
102
- return /* @__PURE__ */ import_react.default.createElement(IconContainer, {
103
- active: !!active
104
- }, /* @__PURE__ */ import_react.default.createElement(import__.Flex, {
105
- flex: 1,
106
- justifyContent: "center",
107
- alignItems: "center"
108
- }, /* @__PURE__ */ import_react.default.createElement(import_FlagIcon.default, {
109
- key: name,
110
- name,
111
- size: args.size
112
- })), /* @__PURE__ */ import_react.default.createElement(import__.Text, {
113
- variant: "extraSmall"
114
- }, active ? /* @__PURE__ */ import_react.default.createElement(import_react.default.Fragment, null, name.substr(0, index), /* @__PURE__ */ import_react.default.createElement(Bold, null, name.substr(index, s.length)), name.substr(index + s.length)) : name));
115
- })));
116
- };
117
- const FlagTemplate = (args) => {
118
- return /* @__PURE__ */ import_react.default.createElement(import_FlagIcon.default, {
119
- ...args
120
- });
121
- };
122
- const List = ListTemplate.bind({});
123
- const SingleIcon = FlagTemplate.bind({});
124
- //# sourceMappingURL=Flags.stories.js.map
package/lib/cjs/components/asorted/Icon/Flags.stories.js.map DELETED
@@ -1,7 +0,0 @@
1
- {
2
- "version": 3,
3
- "sources": ["../../../../../src/components/asorted/Icon/Flags.stories.tsx"],
4
- "sourcesContent": ["import React, { useState } from \"react\";\nimport styled from \"styled-components\";\nimport FlagIcon, { iconNames, Props as FlagIconProps, sizes as flagSizes } from \"./FlagIcon\";\nimport { Text, SearchInput, Flex, Grid } from \"../../..\";\n\nconst ScrollArea = styled(Grid)`\n flex: 1;\n height: auto;\n ${(p) => p.theme.overflow.y};\n`;\n\nconst Container = styled(Flex).attrs({\n flex: 1,\n flexDirection: \"column\",\n p: 4,\n})`\n overflow: hidden;\n height: calc(100vh - 4em);\n`;\n\nconst IconContainer = styled(Flex).attrs<{ active?: boolean }>({\n flexDirection: \"column\",\n justifyContent: \"flex-end\",\n alignItems: \"center\",\n p: 4,\n})<{ active?: boolean }>`\n ${(p) => (p.active ? `background-color: ${p.theme.colors.neutral.c20};` : ``)}\n border-radius: 4px;\n height: 100px;\n`;\n\nconst Bold = styled.b`\n color: ${(p) => p.theme.colors.primary.c80};\n`;\n\nconst Story = {\n title: \"Asorted/Icons/Flags\",\n argTypes: {\n size: {\n type: \"enum\",\n description: \"Icon size\",\n defaultValue: \"L\",\n control: {\n options: Object.keys(flagSizes),\n },\n },\n name: {\n type: \"enum\",\n defaultValue: \"France\",\n description: \"[Only for single icon], Icon name\",\n control: {\n options: iconNames,\n control: {\n type: \"select\",\n },\n },\n },\n },\n};\nexport default Story;\n\nconst ListTemplate = (args: FlagIconProps) => {\n const [search, setSearch] = useState(\"\");\n const s = search.toLowerCase();\n const regexp = new RegExp(s, \"i\");\n\n return (\n <Container>\n <SearchInput value={search} onChange={setSearch} />\n <ScrollArea\n gridTemplateColumns=\"repeat(auto-fill, 100px);\"\n gridTemplateRows=\"repeat(auto-fill, 100px);\"\n gridGap={4}\n mt={4}\n >\n {iconNames\n .sort((a: string, b: string) => {\n return s ? b.toLowerCase().indexOf(s) - a.toLowerCase().indexOf(s) : a.localeCompare(b);\n })\n .map((name) => {\n const match = name.match(regexp);\n const active = s && match;\n const index = match?.index ?? 0;\n return (\n <IconContainer active={!!active}>\n <Flex flex={1} justifyContent=\"center\" alignItems=\"center\">\n <FlagIcon key={name} name={name} size={args.size} />\n </Flex>\n <Text variant=\"extraSmall\">\n {active ? (\n <>\n {name.substr(0, index)}\n <Bold>{name.substr(index, s.length)}</Bold>\n {name.substr(index + s.length)}\n </>\n ) : (\n name\n )}\n </Text>\n </IconContainer>\n );\n })}\n </ScrollArea>\n </Container>\n );\n};\nconst FlagTemplate = (args: FlagIconProps) => {\n return <FlagIcon {...args} />;\n};\n\nexport const List = ListTemplate.bind({});\nexport const SingleIcon = FlagTemplate.bind({});\n"],
5
- "mappings": ";;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAAgC;AAChC,+BAAmB;AACnB,sBAAgF;AAChF,eAA8C;AAE9C,MAAM,aAAa,sCAAO;AAAA;AAAA;AAAA,IAGtB,CAAC,MAAM,EAAE,MAAM,SAAS;AAAA;AAG5B,MAAM,YAAY,sCAAO,eAAM,MAAM;AAAA,EACnC,MAAM;AAAA,EACN,eAAe;AAAA,EACf,GAAG;AAAA;AAAA;AAAA;AAAA;AAML,MAAM,gBAAgB,sCAAO,eAAM,MAA4B;AAAA,EAC7D,eAAe;AAAA,EACf,gBAAgB;AAAA,EAChB,YAAY;AAAA,EACZ,GAAG;AAAA;AAAA,IAED,CAAC,MAAO,EAAE,SAAS,qBAAqB,EAAE,MAAM,OAAO,QAAQ,SAAS;AAAA;AAAA;AAAA;AAK5E,MAAM,OAAO,iCAAO;AAAA,WACT,CAAC,MAAM,EAAE,MAAM,OAAO,QAAQ;AAAA;AAGzC,MAAM,QAAQ;AAAA,EACZ,OAAO;AAAA,EACP,UAAU;AAAA,IACR,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,aAAa;AAAA,MACb,cAAc;AAAA,MACd,SAAS;AAAA,QACP,SAAS,OAAO,KAAK;AAAA;AAAA;AAAA,IAGzB,MAAM;AAAA,MACJ,MAAM;AAAA,MACN,cAAc;AAAA,MACd,aAAa;AAAA,MACb,SAAS;AAAA,QACP,SAAS;AAAA,QACT,SAAS;AAAA,UACP,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAMhB,IAAO,wBAAQ;AAEf,MAAM,eAAe,CAAC,SAAwB;AAC5C,QAAM,CAAC,QAAQ,aAAa,2BAAS;AACrC,QAAM,IAAI,OAAO;AACjB,QAAM,SAAS,IAAI,OAAO,GAAG;AAE7B,SACE,mDAAC,WAAD,MACE,mDAAC,sBAAD;AAAA,IAAa,OAAO;AAAA,IAAQ,UAAU;AAAA,MACtC,mDAAC,YAAD;AAAA,IACE,qBAAoB;AAAA,IACpB,kBAAiB;AAAA,IACjB,SAAS;AAAA,IACT,IAAI;AAAA,KAEH,0BACE,KAAK,CAAC,GAAW,MAAc;AAC9B,WAAO,IAAI,EAAE,cAAc,QAAQ,KAAK,EAAE,cAAc,QAAQ,KAAK,EAAE,cAAc;AAAA,KAEtF,IAAI,CAAC,SAAS;AACb,UAAM,QAAQ,KAAK,MAAM;AACzB,UAAM,SAAS,KAAK;AACpB,UAAM,QAAQ,OAAO,SAAS;AAC9B,WACE,mDAAC,eAAD;AAAA,MAAe,QAAQ,CAAC,CAAC;AAAA,OACvB,mDAAC,eAAD;AAAA,MAAM,MAAM;AAAA,MAAG,gBAAe;AAAA,MAAS,YAAW;AAAA,OAChD,mDAAC,yBAAD;AAAA,MAAU,KAAK;AAAA,MAAM;AAAA,MAAY,MAAM,KAAK;AAAA,SAE9C,mDAAC,eAAD;AAAA,MAAM,SAAQ;AAAA,OACX,SACC,wFACG,KAAK,OAAO,GAAG,QAChB,mDAAC,MAAD,MAAO,KAAK,OAAO,OAAO,EAAE,UAC3B,KAAK,OAAO,QAAQ,EAAE,WAGzB;AAAA;AAAA;AAUpB,MAAM,eAAe,CAAC,SAAwB;AAC5C,SAAO,mDAAC,yBAAD;AAAA,OAAc;AAAA;AAAA;AAGhB,MAAM,OAAO,aAAa,KAAK;AAC/B,MAAM,aAAa,aAAa,KAAK;",
6
- "names": []
7
- }
package/lib/components/asorted/Icon/FlagIcon.d.ts DELETED
@@ -1,14 +0,0 @@
1
- /// <reference types="react" />
2
- export declare const sizes: {
3
- XXS: number;
4
- S: number;
5
- L: number;
6
- };
7
- export type FlagsSizes = keyof typeof sizes;
8
- export type Props = {
9
- name: string;
10
- size?: FlagsSizes;
11
- };
12
- export declare const iconNames: string[];
13
- declare const FlagIcon: ({ name, size }: Props) => JSX.Element | null;
14
- export default FlagIcon;
package/lib/components/asorted/Icon/FlagIcon.js DELETED
@@ -1,46 +0,0 @@
1
- import * as flags from "@ledgerhq/icons-ui/react/Flags/index";
2
- import React from "react";
3
- import styled from "styled-components";
4
- import FlexBox from "../../layout/Flex";
5
- export const sizes = {
6
- XXS: 16,
7
- S: 32,
8
- L: 48,
9
- };
10
- export const iconNames = Array.from(Object.keys(flags).reduce((set, rawKey) => {
11
- const key = rawKey
12
- .replace(/(.+)(Regular|Light|UltraLight|Thin|Medium)+$/g, "$1")
13
- .replace(/(.+)(Ultra)+$/g, "$1");
14
- if (!set.has(key))
15
- set.add(key);
16
- return set;
17
- }, new Set()));
18
- const FlagContainer = styled(FlexBox).attrs({
19
- borderRadius: "50%",
20
- position: "relative",
21
- }) `
22
- &:after {
23
- content: "";
24
- display: block;
25
- box-shadow: inset 0 0 10px black;
26
- position: absolute;
27
- top: 0;
28
- left: 0;
29
- width: 100%;
30
- height: 100%;
31
- border-radius: 100%;
32
- opacity: 10%;
33
- ${(p) => `box-shadow: inset 0px 0px 0px 1px ${p.theme.colors.neutral.c100};`}
34
- }
35
- `;
36
- const FlagIcon = ({ name, size = "S" }) => {
37
- const maybeIconName = `${name}`;
38
- if (maybeIconName in flags) {
39
- // @ts-expect-error FIXME I don't know how to make you happy ts
40
- const Component = flags[maybeIconName];
41
- return (React.createElement(FlagContainer, { width: sizes[size], height: sizes[size], overflow: "hidden" },
42
- React.createElement(Component, { size: sizes[size] })));
43
- }
44
- return null;
45
- };
46
- export default FlagIcon;