@alveole/components 2.0.0-alpha.11 → 2.0.0-alpha.12

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.
@@ -1,2 +1,2 @@
1
- export declare const ALVEOLE_COMPONENTS_VERSION: "2.0.0-alpha.11";
1
+ export declare const ALVEOLE_COMPONENTS_VERSION: "2.0.0-alpha.12";
2
2
  //# sourceMappingURL=version.d.ts.map
@@ -1 +1 @@
1
- export const ALVEOLE_COMPONENTS_VERSION = "2.0.0-alpha.11";
1
+ export const ALVEOLE_COMPONENTS_VERSION = "2.0.0-alpha.12";
@@ -15,7 +15,7 @@ export default {
15
15
  };
16
16
  export const Default = () => {
17
17
  const [value, setValue] = useState(null);
18
- return (_jsx(FormControl, { label: "Montant", children: _jsx(NumberInput, { value: value, onChange: setValue, placeholder: "0" }) }));
18
+ return (_jsx(FormControl, { label: "Montant", children: _jsx(NumberInput, { value: value, onChange: setValue, placeholder: "Quantit\u00E9" }) }));
19
19
  };
20
20
  export const AvecUnites = () => {
21
21
  const [value, setValue] = useState(null);
@@ -1 +1 @@
1
- {"version":3,"file":"NumberInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/NumberInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA+P,CAAC;AAEpR,eAAO,MAAM,UAAU,cAAqkB,CAAC;AAE7lB,eAAO,MAAM,SAAS,cAAmK,CAAC;AAE1L,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
1
+ {"version":3,"file":"NumberInput.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/FormControl/NumberInput.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAAsQ,CAAC;AAE3R,eAAO,MAAM,UAAU,cAAqkB,CAAC;AAE7lB,eAAO,MAAM,SAAS,cAAmK,CAAC;AAE1L,eAAO,MAAM,YAAY;;;;CAIf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC"}
@@ -1,6 +1,6 @@
1
1
  // This file is generated. Do not edit manually.
2
2
  // Source: src/ui/FormControl/NumberInput.stories.tsx
3
- export const Default = () => "export const Default = () => {\n const [value, setValue] = useState<number | null>(null);\n return (\n <FormControl label=\"Montant\">\n <NumberInput value={value} onChange={setValue} placeholder=\"0\" />\n </FormControl>\n );\n};";
3
+ export const Default = () => "export const Default = () => {\n const [value, setValue] = useState<number | null>(null);\n return (\n <FormControl label=\"Montant\">\n <NumberInput value={value} onChange={setValue} placeholder=\"Quantité\" />\n </FormControl>\n );\n};";
4
4
  export const AvecUnites = () => "export const AvecUnites = () => {\n const [value, setValue] = useState<number | null>(null);\n return (\n <FormControl label=\"Avec unités\">\n <NumberInput\n value={value}\n onChange={setValue}\n startAdornment={\n <Box style={{ paddingLeft: 8, paddingRight: 4 }}>\n <Typography>€</Typography>\n </Box>\n }\n endAdornment={\n <Box style={{ paddingLeft: 4, paddingRight: 8 }}>\n <Typography>TTC</Typography>\n </Box>\n }\n />\n </FormControl>\n );\n};";
5
5
  export const Desactive = () => "export const Desactive = () => (\n <FormControl label=\"Désactivé\">\n <NumberInput value={42} onChange={() => {}} disabled />\n </FormControl>\n);";
6
6
  export const storySources = {
@@ -31,6 +31,7 @@ declare const _default: {
31
31
  alignSelf: "stretch";
32
32
  gap: string | number;
33
33
  position: "relative";
34
+ minHeight: number;
34
35
  };
35
36
  separateur: {
36
37
  left: number;
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAWkB;AAElB,eAAO,MAAM,OAAO,mCAQnB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAgBxB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,mCASvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,QAAQ,mCASpB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAYtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,SAAS,mCAcrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAe7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAe7B,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,YAAY,mCAA6D,CAAC;AAEvF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}
1
+ {"version":3,"file":"ListItem.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAMA,wBAWkB;AAElB,eAAO,MAAM,OAAO,mCAQnB,CAAC;AAEF,eAAO,MAAM,YAAY,mCAgBxB,CAAC;AAEF;;;;GAIG;AACH,eAAO,MAAM,WAAW,mCASvB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,QAAQ,mCASpB,CAAC;AAEF,eAAO,MAAM,UAAU,mCAYtB,CAAC;AAEF,eAAO,MAAM,gBAAgB,mCAS5B,CAAC;AAEF,eAAO,MAAM,SAAS,mCAcrB,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAe7B,CAAC;AAEF,eAAO,MAAM,iBAAiB,mCAe7B,CAAC;AAEF,4DAA4D;AAC5D,eAAO,MAAM,YAAY,mCAA6D,CAAC;AAEvF,OAAO,KAAK,OAAO,MAAM,4BAA4B,CAAC"}
@@ -23,6 +23,7 @@ export declare const useStyles: () => {
23
23
  alignSelf: "stretch";
24
24
  gap: string | number;
25
25
  position: "relative";
26
+ minHeight: number;
26
27
  };
27
28
  separateur: {
28
29
  left: number;
@@ -1 +1 @@
1
- {"version":3,"file":"ListItem.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.styles.ts"],"names":[],"mappings":"AAiHA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAiF,CAAC"}
1
+ {"version":3,"file":"ListItem.styles.d.ts","sourceRoot":"","sources":["../../../src/ui/ListItem/ListItem.styles.ts"],"names":[],"mappings":"AAmHA,eAAO,MAAM,SAAS;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAiF,CAAC"}
@@ -43,6 +43,8 @@ const detail = ({ color, text, spacing }) => ({
43
43
  alignSelf: 'stretch',
44
44
  gap: spacing('1W'),
45
45
  position: 'relative',
46
+ // Hauteur fixee par la maquette, avec ou sans description.
47
+ minHeight: 52,
46
48
  },
47
49
  // Pose en absolu sur le bord haut du detail, et non entre deux lignes : c'est ce qui lui
48
50
  // evite de compter dans la hauteur de la ligne.
@@ -54,6 +54,8 @@ export declare const Default: () => import("react").JSX.Element;
54
54
  export declare const WithTitle: () => import("react").JSX.Element;
55
55
  export declare const WithIcon: () => import("react").JSX.Element;
56
56
  export declare const WithPreviewImageAndTrailing: () => import("react").JSX.Element;
57
+ /** Sans description, le contenu garde ses 52px de haut. */
58
+ export declare const WithoutDescription: () => import("react").JSX.Element;
57
59
  /**
58
60
  * Quand `isLoading` est `true`, la liste entière est remplacée par un
59
61
  * spinner centré. Aucun délai n'est appliqué ici : le chargement initial
@@ -1 +1 @@
1
- {"version":3,"file":"ResourceList.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ResourceList/ResourceList.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,wBASkB;AA6BlB,eAAO,MAAM,OAAO,mCASnB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAUrB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAcpB,CAAC;AAEF,eAAO,MAAM,2BAA2B,mCAevC,CAAC;AAIF;;;;;GAKG;AACH,eAAO,MAAM,SAAS,mCAQrB,CAAC;AAEF,eAAO,MAAM,aAAa,mCAOzB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAUvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,gCAAgC,CAAC"}
1
+ {"version":3,"file":"ResourceList.stories.d.ts","sourceRoot":"","sources":["../../../src/ui/ResourceList/ResourceList.stories.tsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAQA,wBASkB;AA6BlB,eAAO,MAAM,OAAO,mCASnB,CAAC;AAEF,eAAO,MAAM,SAAS,mCAUrB,CAAC;AAEF,eAAO,MAAM,QAAQ,mCAcpB,CAAC;AAEF,eAAO,MAAM,2BAA2B,mCAevC,CAAC;AAEF,2DAA2D;AAC3D,eAAO,MAAM,kBAAkB,mCAO9B,CAAC;AAIF;;;;;GAKG;AACH,eAAO,MAAM,SAAS,mCAQrB,CAAC;AAEF,eAAO,MAAM,aAAa,mCAOzB,CAAC;AAEF,eAAO,MAAM,WAAW,mCAQvB,CAAC;AAEF,OAAO,KAAK,OAAO,MAAM,gCAAgC,CAAC"}
@@ -43,6 +43,8 @@ export const Default = () => (_jsx(ResourceList, { data: exampleData, keyExtract
43
43
  export const WithTitle = () => (_jsx(ResourceList, { titre: "Titre de la liste", data: exampleData, keyExtractor: item => item.id, renderItem: ({ item, index }) => (_jsx(ListItem, { title: item.name, description: item.description, showSeparateur: index !== 0 })), renderNoContent: () => _jsx(EmptyState, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", iconName: "House" }) }));
44
44
  export const WithIcon = () => (_jsx(ResourceList, { data: exampleData, keyExtractor: item => item.id, renderItem: ({ item, index }) => (_jsx(ListItem, { title: item.name, description: item.description, IconProps: { name: 'Settings' }, showSeparateur: index !== 0 })), renderNoContent: () => _jsx(EmptyState, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", iconName: "House" }) }));
45
45
  export const WithPreviewImageAndTrailing = () => (_jsx(ResourceList, { data: exampleDataWithPreview, keyExtractor: item => item.id, renderItem: ({ item, index }) => (_jsx(ListItem, { title: item.name, description: item.description, preview_url: item.preview_url, trailing: () => _jsx(LucideIcon, { name: "ChevronRight", size: "sm" }), showSeparateur: index !== 0 })), renderNoContent: () => _jsx(EmptyState, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", iconName: "House" }) }));
46
+ /** Sans description, le contenu garde ses 52px de haut. */
47
+ export const WithoutDescription = () => (_jsx(ResourceList, { data: exampleData, keyExtractor: item => item.id, renderItem: ({ item, index }) => _jsx(ListItem, { title: item.name, showSeparateur: index !== 0 }), renderNoContent: () => _jsx(EmptyState, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", iconName: "House" }) }));
46
48
  const aucunExemple = [];
47
49
  /**
48
50
  * Quand `isLoading` est `true`, la liste entière est remplacée par un
@@ -52,5 +54,5 @@ const aucunExemple = [];
52
54
  */
53
55
  export const IsLoading = () => (_jsx(ResourceList, { data: aucunExemple, isLoading: true, keyExtractor: item => item.id, renderItem: () => null, renderNoContent: () => null }));
54
56
  export const WithNoContent = () => (_jsx(ResourceList, { data: aucunExemple, keyExtractor: item => item.id, renderItem: ({ item }) => _jsx(ListItem, { title: item.name, description: item.description }), renderNoContent: () => _jsx(EmptyState, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", iconName: "House" }) }));
55
- export const WithDivider = () => (_jsx(ResourceList, { data: exampleData, keyExtractor: item => item.id, renderItem: ({ item, index }) => (_jsx(ListItem, { title: item.name, description: item.description, showSeparateur: index !== 0 })), ItemSeparatorComponent: ResourceListDivider, renderNoContent: () => _jsx(EmptyState, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", iconName: "House" }) }));
57
+ export const WithDivider = () => (_jsx(ResourceList, { data: exampleData, keyExtractor: item => item.id, renderItem: ({ item }) => _jsx(ListItem, { title: item.name, description: item.description, showSeparateur: false }), ItemSeparatorComponent: ResourceListDivider, renderNoContent: () => _jsx(EmptyState, { title: "Aucun \u00E9l\u00E9ment", description: "Cliquez sur le bouton", iconName: "House" }) }));
56
58
  export * as Sources from './ResourceList.stories.sources';
@@ -2,6 +2,7 @@ export declare const Default: () => string;
2
2
  export declare const WithTitle: () => string;
3
3
  export declare const WithIcon: () => string;
4
4
  export declare const WithPreviewImageAndTrailing: () => string;
5
+ export declare const WithoutDescription: () => string;
5
6
  export declare const IsLoading: () => string;
6
7
  export declare const WithNoContent: () => string;
7
8
  export declare const WithDivider: () => string;
@@ -10,6 +11,7 @@ export declare const storySources: {
10
11
  readonly WithTitle: () => string;
11
12
  readonly WithIcon: () => string;
12
13
  readonly WithPreviewImageAndTrailing: () => string;
14
+ readonly WithoutDescription: () => string;
13
15
  readonly IsLoading: () => string;
14
16
  readonly WithNoContent: () => string;
15
17
  readonly WithDivider: () => string;
@@ -1 +1 @@
1
- {"version":3,"file":"ResourceList.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/ResourceList/ResourceList.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA+Y,CAAC;AAEpa,eAAO,MAAM,SAAS,cAAkb,CAAC;AAEzc,eAAO,MAAM,QAAQ,cAA4d,CAAC;AAElf,eAAO,MAAM,2BAA2B,cAAmkB,CAAC;AAE5mB,eAAO,MAAM,SAAS,cAAwN,CAAC;AAE/O,eAAO,MAAM,aAAa,cAAkW,CAAC;AAE7X,eAAO,MAAM,WAAW,cAAqc,CAAC;AAE9d,eAAO,MAAM,YAAY;;;;;;;;CAQf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAEtE,CAAC"}
1
+ {"version":3,"file":"ResourceList.stories.sources.d.ts","sourceRoot":"","sources":["../../../src/ui/ResourceList/ResourceList.stories.sources.ts"],"names":[],"mappings":"AAGA,eAAO,MAAM,OAAO,cAA+Y,CAAC;AAEpa,eAAO,MAAM,SAAS,cAAkb,CAAC;AAEzc,eAAO,MAAM,QAAQ,cAA4d,CAAC;AAElf,eAAO,MAAM,2BAA2B,cAAmkB,CAAC;AAE5mB,eAAO,MAAM,kBAAkB,cAA2W,CAAC;AAE3Y,eAAO,MAAM,SAAS,cAAwN,CAAC;AAE/O,eAAO,MAAM,aAAa,cAAkW,CAAC;AAE7X,eAAO,MAAM,WAAW,cAAwa,CAAC;AAEjc,eAAO,MAAM,YAAY;;;;;;;;;CASf,CAAC;AAEX,MAAM,MAAM,eAAe,GAAG,MAAM,OAAO,YAAY,CAAC;AAExD,eAAO,MAAM,iBAAiB,EAAE,OAAO,CAAC,MAAM,CAAC,eAAe,EAAE,MAAM,CAAC,CAGtE,CAAC"}
@@ -4,18 +4,21 @@ export const Default = () => "export const Default = () => (\n <ResourceList\n
4
4
  export const WithTitle = () => "export const WithTitle = () => (\n <ResourceList\n titre=\"Titre de la liste\"\n data={exampleData}\n keyExtractor={item => item.id}\n renderItem={({ item, index }) => (\n <ListItem title={item.name} description={item.description} showSeparateur={index !== 0} />\n )}\n renderNoContent={() => <EmptyState title=\"Aucun élément\" description=\"Cliquez sur le bouton\" iconName=\"House\" />}\n />\n);";
5
5
  export const WithIcon = () => "export const WithIcon = () => (\n <ResourceList\n data={exampleData}\n keyExtractor={item => item.id}\n renderItem={({ item, index }) => (\n <ListItem\n title={item.name}\n description={item.description}\n IconProps={{ name: 'Settings' }}\n showSeparateur={index !== 0}\n />\n )}\n renderNoContent={() => <EmptyState title=\"Aucun élément\" description=\"Cliquez sur le bouton\" iconName=\"House\" />}\n />\n);";
6
6
  export const WithPreviewImageAndTrailing = () => "export const WithPreviewImageAndTrailing = () => (\n <ResourceList\n data={exampleDataWithPreview}\n keyExtractor={item => item.id}\n renderItem={({ item, index }) => (\n <ListItem\n title={item.name}\n description={item.description}\n preview_url={item.preview_url}\n trailing={() => <LucideIcon name=\"ChevronRight\" size=\"sm\" />}\n showSeparateur={index !== 0}\n />\n )}\n renderNoContent={() => <EmptyState title=\"Aucun élément\" description=\"Cliquez sur le bouton\" iconName=\"House\" />}\n />\n);";
7
+ export const WithoutDescription = () => "export const WithoutDescription = () => (\n <ResourceList\n data={exampleData}\n keyExtractor={item => item.id}\n renderItem={({ item, index }) => <ListItem title={item.name} showSeparateur={index !== 0} />}\n renderNoContent={() => <EmptyState title=\"Aucun élément\" description=\"Cliquez sur le bouton\" iconName=\"House\" />}\n />\n);";
7
8
  export const IsLoading = () => "export const IsLoading = () => (\n <ResourceList\n data={aucunExemple}\n isLoading={true}\n keyExtractor={item => item.id}\n renderItem={() => null}\n renderNoContent={() => null}\n />\n);";
8
9
  export const WithNoContent = () => "export const WithNoContent = () => (\n <ResourceList\n data={aucunExemple}\n keyExtractor={item => item.id}\n renderItem={({ item }) => <ListItem title={item.name} description={item.description} />}\n renderNoContent={() => <EmptyState title=\"Aucun élément\" description=\"Cliquez sur le bouton\" iconName=\"House\" />}\n />\n);";
9
- export const WithDivider = () => "export const WithDivider = () => (\n <ResourceList\n data={exampleData}\n keyExtractor={item => item.id}\n renderItem={({ item, index }) => (\n <ListItem title={item.name} description={item.description} showSeparateur={index !== 0} />\n )}\n ItemSeparatorComponent={ResourceListDivider}\n renderNoContent={() => <EmptyState title=\"Aucun élément\" description=\"Cliquez sur le bouton\" iconName=\"House\" />}\n />\n);";
10
+ export const WithDivider = () => "export const WithDivider = () => (\n <ResourceList\n data={exampleData}\n keyExtractor={item => item.id}\n renderItem={({ item }) => <ListItem title={item.name} description={item.description} showSeparateur={false} />}\n ItemSeparatorComponent={ResourceListDivider}\n renderNoContent={() => <EmptyState title=\"Aucun élément\" description=\"Cliquez sur le bouton\" iconName=\"House\" />}\n />\n);";
10
11
  export const storySources = {
11
12
  Default,
12
13
  WithTitle,
13
14
  WithIcon,
14
15
  WithPreviewImageAndTrailing,
16
+ WithoutDescription,
15
17
  IsLoading,
16
18
  WithNoContent,
17
19
  WithDivider,
18
20
  };
19
21
  export const storyDescriptions = {
22
+ WithoutDescription: "Sans description, le contenu garde ses 52px de haut.",
20
23
  IsLoading: "Quand `isLoading` est `true`, la liste entière est remplacée par un\nspinner centré. Aucun délai n'est appliqué ici : le chargement initial\nd'une liste vide n'a rien à afficher, le spinner apparaît donc\nimmédiatement pour éviter un écran blanc sans feedback.",
21
24
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@alveole/components",
3
- "version": "2.0.0-alpha.11",
3
+ "version": "2.0.0-alpha.12",
4
4
  "description": "Shared UI components.",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",