Skip to content

Commit 57c6693

Browse files
giardivYevgenChopmw-kupros
authored
Release 1.1.2 (#42)
* Update to 1.1.1, minor updates (#38) * Release #4 (#27) * feat: - Added ProgressBar, FreshnessBar components - Added stories * fix: - Removed useHover utility * rk2k8t60 Select (#23) * feat: - Added Checkbox, CheckboxGroup components - Added stories * feat: - Added ToggleButton component - Added stories * feat: - Added ability to set list item action - Renamed folder icon - Fix variable name in useDropdown - Added Select component - Added Select stories * fix: - Incorrect variant in storybook * fix: - Added spacing for the label * fix: - Build error * fix: - Circle dependency - Updated peerDependencies Co-authored-by: YevgenChop <yevgenchop@gmail.com> Co-authored-by: YevgenChop <44809341+YevgenChop@users.noreply.github.com> * Add rebassform (#28) * feat: - Added ProgressBar, FreshnessBar components - Added stories * fix: - Removed useHover utility * rk2k8t60 Select (#23) * feat: - Added Checkbox, CheckboxGroup components - Added stories * feat: - Added ToggleButton component - Added stories * feat: - Added ability to set list item action - Renamed folder icon - Fix variable name in useDropdown - Added Select component - Added Select stories * fix: - Incorrect variant in storybook * fix: - Added spacing for the label * fix: - Build error * fix: - Circle dependency - Updated peerDependencies * add rebass form dependencie * 1.1.0 Co-authored-by: YevgenChop <yevgenchop@gmail.com> Co-authored-by: YevgenChop <44809341+YevgenChop@users.noreply.github.com> * update to 1.1.1, minor updates (#36) * Revert "update to 1.1.1, minor updates (#36)" (#37) This reverts commit c86a823. * update to 1.1.1, minor updates * plus git issue Co-authored-by: YevgenChop <yevgenchop@gmail.com> Co-authored-by: YevgenChop <44809341+YevgenChop@users.noreply.github.com> * Master update dev (#40) * Release #4 (#27) * feat: - Added ProgressBar, FreshnessBar components - Added stories * fix: - Removed useHover utility * rk2k8t60 Select (#23) * feat: - Added Checkbox, CheckboxGroup components - Added stories * feat: - Added ToggleButton component - Added stories * feat: - Added ability to set list item action - Renamed folder icon - Fix variable name in useDropdown - Added Select component - Added Select stories * fix: - Incorrect variant in storybook * fix: - Added spacing for the label * fix: - Build error * fix: - Circle dependency - Updated peerDependencies Co-authored-by: YevgenChop <yevgenchop@gmail.com> Co-authored-by: YevgenChop <44809341+YevgenChop@users.noreply.github.com> * Add rebassform (#28) * feat: - Added ProgressBar, FreshnessBar components - Added stories * fix: - Removed useHover utility * rk2k8t60 Select (#23) * feat: - Added Checkbox, CheckboxGroup components - Added stories * feat: - Added ToggleButton component - Added stories * feat: - Added ability to set list item action - Renamed folder icon - Fix variable name in useDropdown - Added Select component - Added Select stories * fix: - Incorrect variant in storybook * fix: - Added spacing for the label * fix: - Build error * fix: - Circle dependency - Updated peerDependencies * add rebass form dependencie * 1.1.0 Co-authored-by: YevgenChop <yevgenchop@gmail.com> Co-authored-by: YevgenChop <44809341+YevgenChop@users.noreply.github.com> * update to 1.1.1, minor updates (#36) * Revert "update to 1.1.1, minor updates (#36)" (#37) This reverts commit c86a823. * Update to 1.1.1, minor updates (#38) (#39) * Release #4 (#27) * feat: - Added ProgressBar, FreshnessBar components - Added stories * fix: - Removed useHover utility * rk2k8t60 Select (#23) * feat: - Added Checkbox, CheckboxGroup components - Added stories * feat: - Added ToggleButton component - Added stories * feat: - Added ability to set list item action - Renamed folder icon - Fix variable name in useDropdown - Added Select component - Added Select stories * fix: - Incorrect variant in storybook * fix: - Added spacing for the label * fix: - Build error * fix: - Circle dependency - Updated peerDependencies Co-authored-by: YevgenChop <yevgenchop@gmail.com> Co-authored-by: YevgenChop <44809341+YevgenChop@users.noreply.github.com> * Add rebassform (#28) * feat: - Added ProgressBar, FreshnessBar components - Added stories * fix: - Removed useHover utility * rk2k8t60 Select (#23) * feat: - Added Checkbox, CheckboxGroup components - Added stories * feat: - Added ToggleButton component - Added stories * feat: - Added ability to set list item action - Renamed folder icon - Fix variable name in useDropdown - Added Select component - Added Select stories * fix: - Incorrect variant in storybook * fix: - Added spacing for the label * fix: - Build error * fix: - Circle dependency - Updated peerDependencies * add rebass form dependencie * 1.1.0 Co-authored-by: YevgenChop <yevgenchop@gmail.com> Co-authored-by: YevgenChop <44809341+YevgenChop@users.noreply.github.com> * update to 1.1.1, minor updates (#36) * Revert "update to 1.1.1, minor updates (#36)" (#37) This reverts commit c86a823. * update to 1.1.1, minor updates * plus git issue Co-authored-by: YevgenChop <yevgenchop@gmail.com> Co-authored-by: YevgenChop <44809341+YevgenChop@users.noreply.github.com> Co-authored-by: YevgenChop <yevgenchop@gmail.com> Co-authored-by: YevgenChop <44809341+YevgenChop@users.noreply.github.com> * Minor issue Co-authored-by: YevgenChop <yevgenchop@gmail.com> Co-authored-by: YevgenChop <44809341+YevgenChop@users.noreply.github.com> * Rows * yk6Mla2q Rows (#27) - Added Row, RowGroup, RowItem components - Added stories * yk6Mla2q Rows (#27) - Added ghost button onClick action - Fixed text split multiline - Fixed padding in full mode - Removed the backgrounds of the text - Replace avatar component with user badge * l4DjkT0E Sticky Summary (#25) (#35) * l4DjkT0E Sticky Summary (#25) - Added Sticky Summary component - Added stories * l4DjkT0E Sticky Summary (#25) Update - Replaced box-shadow with border - Fixed padding Co-authored-by: Vincent <giardiv@users.noreply.github.com> * version 1.1.2 (#41) Co-authored-by: YevgenChop <yevgenchop@gmail.com> Co-authored-by: YevgenChop <44809341+YevgenChop@users.noreply.github.com> Co-authored-by: mw-kupros <70627550+mw-kupros@users.noreply.github.com>
1 parent 3867b37 commit 57c6693

15 files changed

+553
-4
lines changed

‎README.md

+3-3
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@
44
55
![header image](https://uploads-ssl.webflow.com/5e6f7cd3ee7f51d539a4da0b/5f58c6619b7b20b02e88b0d9_quartz.jpg)
66

7-
[![NPM](https://img.shields.io/npm/v/quartz-design-system.svg)](https://www.npmjs.com/package/quartz-design-system) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
7+
[![NPM](https://img.shields.io/npm/v/@logicalclocks/quartz.svg)](https://www.npmjs.com/package/@logicalclocks/quartz) [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
88

99
The current repo is the implementation of the library of the design system of Logical Clocks, so called Quartz.
1010

@@ -22,12 +22,12 @@ The DS is first experimented on Figma before being implemented:
2222

2323
NPM
2424
```bash
25-
npm install --save quartz-design-system
25+
npm install --save @logicalclocks/quartz
2626
```
2727

2828
Yarn
2929
```bash
30-
yarn add quartz-design-system
30+
yarn add @logicalclocks/quartz
3131
```
3232

3333
### Usage

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@logicalclocks/quartz",
3-
"version": "1.1.1",
3+
"version": "1.1.2",
44
"description": "Logical Clocks Design System Library",
55
"author": "logicalclocks",
66
"license": "MIT",

‎src/components/row/container/container.styles.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export default {
2+
tableLayout: 'auto',
3+
borderCollapse: 'collapse',
4+
width: '100%',
5+
};

‎src/components/row/container/index.tsx

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import React, { ComponentType, FC, useMemo } from 'react';
2+
import { Box } from 'rebass';
3+
import TableRow from '../group';
4+
import { Mode } from './types';
5+
import styles from './container.styles';
6+
7+
export interface RowProps {
8+
mode?: Mode;
9+
groupComponents: ComponentType<any>[][];
10+
groupProps: Record<string, any>[][];
11+
middleColumn: number;
12+
}
13+
14+
const Row: FC<RowProps> = ({
15+
mode = Mode.full,
16+
groupComponents,
17+
groupProps,
18+
middleColumn,
19+
...props
20+
}: RowProps) => {
21+
const keys = useMemo(
22+
() => Object.keys(Array.from({ length: groupComponents.length })),
23+
[groupComponents],
24+
);
25+
26+
return (
27+
<Box as="table" sx={styles} {...props}>
28+
<Box as="tbody">
29+
{groupComponents.map((row, index) => (
30+
<TableRow
31+
key={keys[index]}
32+
mode={mode}
33+
components={row}
34+
componentsProps={groupProps[index]}
35+
middleColumn={middleColumn}
36+
/>
37+
))}
38+
</Box>
39+
</Box>
40+
);
41+
};
42+
43+
export default Row;

‎src/components/row/container/types.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
export enum Mode {
2+
full = 'full',
3+
tiny = 'tiny',
4+
}

‎src/components/row/group/index.tsx

+46
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import React, { ComponentType, FC, useMemo } from 'react';
2+
import { Box } from 'rebass';
3+
import TableItem from '../item';
4+
import styles from './row-group.styles';
5+
import { Mode } from '../container/types';
6+
import { TableItemPosition } from '../item/types';
7+
8+
export interface RowGroupProps {
9+
mode?: Mode;
10+
components: ComponentType<any>[];
11+
componentsProps: any[];
12+
middleColumn: number;
13+
}
14+
15+
const RowGroup: FC<RowGroupProps> = ({
16+
mode = Mode.full,
17+
components,
18+
componentsProps,
19+
middleColumn,
20+
...props
21+
}: RowGroupProps) => {
22+
function getPosition(mc: number, key: number): TableItemPosition {
23+
return key <= mc ? TableItemPosition.left : TableItemPosition.right;
24+
}
25+
26+
const keys = useMemo(
27+
() => Object.keys(Array.from({ length: components.length })),
28+
[components],
29+
);
30+
31+
return (
32+
<Box as="tr" {...props} sx={styles({ mode })} width="100%">
33+
{components.map((component, index) => (
34+
<TableItem
35+
key={keys[index]}
36+
mode={mode}
37+
component={component}
38+
componentProps={componentsProps[index] || {}}
39+
position={getPosition(middleColumn, index)}
40+
fillSpace={middleColumn === index}
41+
/>
42+
))}
43+
</Box>
44+
);
45+
};
46+
export default RowGroup;

‎src/components/row/group/row-group.styles.ts

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import { Mode } from '../container/types';
2+
3+
enum BorderSides {
4+
left = 'Left',
5+
right = 'Right',
6+
top = 'Top',
7+
bottom = 'Bottom',
8+
}
9+
10+
function createBorder(side: BorderSides): { [key: string]: string } {
11+
return {
12+
[`border${side}Style`]: 'solid',
13+
[`border${side}Width`]: '1px',
14+
[`border${side}Color`]: 'grayShade2',
15+
};
16+
}
17+
18+
export default ({ mode }: any) => ({
19+
...createBorder(BorderSides.top),
20+
...createBorder(BorderSides.bottom),
21+
...(mode === Mode.tiny && {
22+
...createBorder(BorderSides.left),
23+
...createBorder(BorderSides.right),
24+
}),
25+
26+
':hover': {
27+
bg: 'grayShade3',
28+
},
29+
});

‎src/components/row/item/index.tsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React, { FC, ComponentType } from 'react';
2+
import { Box } from 'rebass';
3+
import styles from './row-item.styles';
4+
import { TableItemPosition } from './types';
5+
import { Mode } from '../container/types';
6+
7+
export interface RowItemProps {
8+
mode?: Mode;
9+
component: ComponentType<any>;
10+
componentProps: any;
11+
position?: TableItemPosition;
12+
fillSpace?: boolean;
13+
}
14+
15+
const RowItem: FC<RowItemProps> = ({
16+
mode = Mode.full,
17+
component: Component,
18+
componentProps,
19+
position = TableItemPosition.left,
20+
fillSpace = false,
21+
...props
22+
}: RowItemProps) => (
23+
<Box as="td" sx={styles({ position, mode, fillSpace })} {...props}>
24+
<Component {...componentProps} />
25+
</Box>
26+
);
27+
export default RowItem;

‎src/components/row/item/row-item.styles.ts

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
import { ITableItemStyles } from './types';
2+
import { Mode } from '../container/types';
3+
4+
export default function ({ position, mode, fillSpace }: ITableItemStyles) {
5+
return {
6+
whiteSpace: 'nowrap',
7+
width: fillSpace ? '100%' : 'auto',
8+
textAlign: position,
9+
py: mode === Mode.full ? '12px' : '8px',
10+
px: mode === Mode.full ? '20px' : '4px',
11+
':first-of-type': { pl: '8px' },
12+
':last-of-type': { pr: '8px' },
13+
};
14+
}

‎src/components/row/item/types.ts

+12
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import { Mode } from '../container/types';
2+
3+
export enum TableItemPosition {
4+
left = 'left',
5+
right = 'right',
6+
}
7+
8+
export interface ITableItemStyles {
9+
position: TableItemPosition;
10+
mode: Mode;
11+
fillSpace: boolean;
12+
}

0 commit comments

Comments
 (0)