@synerise/ds-logic 1.1.44 → 1.1.46

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/CHANGELOG.md +8 -0
  2. package/CLAUDE.md +144 -0
  3. package/package.json +6 -5
package/CHANGELOG.md CHANGED
@@ -3,6 +3,14 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ ## [1.1.46](https://github.com/Synerise/synerise-design/compare/@synerise/ds-logic@1.1.45...@synerise/ds-logic@1.1.46) (2026-07-23)
7
+
8
+ **Note:** Version bump only for package @synerise/ds-logic
9
+
10
+ ## [1.1.45](https://github.com/Synerise/synerise-design/compare/@synerise/ds-logic@1.1.44...@synerise/ds-logic@1.1.45) (2026-06-17)
11
+
12
+ **Note:** Version bump only for package @synerise/ds-logic
13
+
6
14
  ## [1.1.44](https://github.com/Synerise/synerise-design/compare/@synerise/ds-logic@1.1.43...@synerise/ds-logic@1.1.44) (2026-06-11)
7
15
 
8
16
  **Note:** Version bump only for package @synerise/ds-logic
package/CLAUDE.md ADDED
@@ -0,0 +1,144 @@
1
+ # Logic (`@synerise/ds-logic`)
2
+
3
+ > A clickable operator toggler (`AND`/`OR` or custom) and a matching-state toggle (`matching`/`not matching`) used in filter and condition builders.
4
+
5
+ ## Package structure
6
+
7
+ ```
8
+ src/
9
+ Logic.tsx — default export; cycles through operators on click
10
+ Logic.types.ts — LogicProps, LogicOperator, LogicOperatorValue, LogicSubComponents
11
+ Logic.style.ts — styled wrapper with dashed underline and hover colour
12
+ Matching/
13
+ Matching.tsx — inline toggle for matching/not-matching state, supports sentence interpolation
14
+ Matching.types.ts — MatchingProps, MatchingTexts
15
+ Matching.styles.ts — MatchingWrapper + Toggle styled components
16
+ Placeholder/
17
+ Placeholder.tsx — static display-only placeholder with a ClickM icon
18
+ Placeholder.types.ts — PlaceholderType { text?: string }
19
+ Placeholder.styles.ts — PlaceholderContainer styled component
20
+ index.ts — public barrel
21
+ modules.d.ts — ambient module declarations
22
+ ```
23
+
24
+ ## Public exports
25
+
26
+ ```ts
27
+ export { default } // Logic (default)
28
+ export { Matching }
29
+ export { Placeholder }
30
+ export type { LogicOperator, LogicOperatorValue, LogicProps }
31
+ export type { MatchingProps, MatchingTexts }
32
+ ```
33
+
34
+ `Placeholder` and its types (`PlaceholderType`) are exported from `index.ts` as a named export but `PlaceholderType` is **not** re-exported from the barrel — only the component itself is.
35
+
36
+ ### `Logic` (default export)
37
+
38
+ Renders an inline clickable text label. Each click advances `value` to the next operator in the `options` array, wrapping around.
39
+
40
+ | Prop | Type | Default | Description |
41
+ |------|------|---------|-------------|
42
+ | `value` | `LogicOperatorValue` (`'AND' \| 'OR' \| string`) | — (required) | Currently active operator value |
43
+ | `onChange` | `(value: LogicOperatorValue) => void` | — (required) | Called with the next operator value on click |
44
+ | `options` | `LogicOperator[]` | `[{value:'AND', label: intl('AND')}, {value:'OR', label: intl('OR')}]` | Custom operator list; if omitted, uses i18n keys `DS.LOGIC.AND` / `DS.LOGIC.OR` |
45
+ | `readOnly` | `boolean` | `false` | Disables click handler and removes hover/underline styles |
46
+
47
+ `Logic.Matching` is attached as a static sub-component: `Logic.Matching = Matching`.
48
+
49
+ ### `LogicOperator`
50
+
51
+ | Property | Type |
52
+ |----------|------|
53
+ | `value` | `string` |
54
+ | `label` | `string \| React.ReactNode` |
55
+
56
+ ### `Matching` (also `Logic.Matching`)
57
+
58
+ Renders a sentence with an inline clickable toggle that flips between `matching` and `not matching`.
59
+
60
+ | Prop | Type | Default | Description |
61
+ |------|------|---------|-------------|
62
+ | `matching` | `boolean` | `true` | Current state |
63
+ | `onChange` | `(matching: boolean) => void` | — (required) | Called with the toggled boolean |
64
+ | `sentence` | `string` | — | Optional sentence containing `#MATCHING_TOGGLE#`; the placeholder is replaced with the toggle span inline |
65
+ | `texts` | `Partial<MatchingTexts>` | — | Override default i18n labels |
66
+ | `readOnly` | `boolean` | `false` | Disables click and hover styles |
67
+ | ..htmlAttributes | `React.HTMLAttributes<HTMLDivElement>` | — | Spread onto the wrapper `<div>` |
68
+
69
+ When `sentence` is omitted the component renders only the toggle span.
70
+
71
+ ### `MatchingTexts`
72
+
73
+ | Property | Type | Default (i18n) |
74
+ |----------|------|----------------|
75
+ | `matching` | `string` | `'matching'` (`DS.MATCHING.MATCHING`) |
76
+ | `notMatching` | `string` | `'not matching'` (`DS.MATCHING.NOT-MATCHING`) |
77
+
78
+ ### `Placeholder`
79
+
80
+ Static, non-interactive placeholder with a `ClickM` icon and a text label. Used to indicate an empty/unpopulated logic slot.
81
+
82
+ | Prop | Type | Default | Description |
83
+ |------|------|---------|-------------|
84
+ | `text` | `string` | — | Label rendered next to the icon |
85
+
86
+ ## Usage patterns
87
+
88
+ ```tsx
89
+ import Logic from '@synerise/ds-logic';
90
+
91
+ // Basic operator toggle
92
+ <Logic value="AND" onChange={(v) => setValue(v)} />
93
+
94
+ // Read-only display
95
+ <Logic value="OR" onChange={() => {}} readOnly />
96
+
97
+ // Custom operators
98
+ <Logic
99
+ value="INCLUDES"
100
+ options={[{ value: 'INCLUDES', label: 'Includes' }, { value: 'EXCLUDES', label: 'Excludes' }]}
101
+ onChange={(v) => setValue(v)}
102
+ />
103
+
104
+ // Matching toggle inside a sentence
105
+ <Logic.Matching
106
+ matching={isMatching}
107
+ onChange={(v) => setMatching(v)}
108
+ sentence="Find all items #MATCHING_TOGGLE# this condition."
109
+ />
110
+
111
+ // Matching toggle standalone
112
+ <Logic.Matching matching={false} onChange={setMatching} />
113
+
114
+ // Placeholder
115
+ import { Placeholder } from '@synerise/ds-logic';
116
+ <Placeholder text="Click to add condition" />
117
+ ```
118
+
119
+ ## Styling
120
+
121
+ - `Logic`: `styled.div` — dashed bottom border via `::after` pseudo-element (grey-600, hidden in `readOnly`); hover changes text and border to `blue-700`.
122
+ - `Matching` toggle: `styled.span` — green (`green-600`/`green-700` hover) when `matching=true`, red (`red-600`/`red-700` hover) when `matching=false`; grey-800 when `readOnly`.
123
+ - Both use `user-select: none`.
124
+ - `Placeholder`: fixed `min-height: 63px`, white background, icon + text centered in a row.
125
+ - All colour values come from `theme.palette` tokens — no hardcoded hex values.
126
+
127
+ ## Key dependencies
128
+
129
+ | Package | Role |
130
+ |---------|------|
131
+ | `@synerise/ds-typography` | `Title` (level 4) in Logic, `Text` in Placeholder |
132
+ | `@synerise/ds-icon` | `ClickM` icon in Placeholder |
133
+ | `@synerise/ds-utils` | `WithHTMLAttributes` utility type used in `MatchingProps` |
134
+ | `@synerise/ds-core` | `ThemeProps` type in styles; `theme` singleton for static colour in Placeholder |
135
+ | `react-intl` | Default i18n labels for both Logic and Matching |
136
+ | `styled-components` | All styling |
137
+
138
+ ## Implementation notes
139
+
140
+ - **Operator cycling**: `Logic` uses `findIndex` on the operators array and wraps with modulo-equivalent logic — no external state; fully controlled component.
141
+ - **Sentence interpolation**: `Matching` searches for the literal string `'#MATCHING_TOGGLE#'` via `String.prototype.search` and slices the surrounding text into a three-element React array `[before, <Toggle/>, after]`. If the token is absent the toggle renders standalone.
142
+ - **i18n defaults**: Default labels are resolved via `useIntl()` with hardcoded `defaultMessage` fallbacks (`'matching'`, `'not matching'`). Custom `texts` are shallowly merged on top.
143
+ - **Test runner**: Jest (not Vitest) — `jest.config.js` present; tests live in `src/__specs__/`.
144
+ - **`Placeholder` types not re-exported**: `PlaceholderType` is used internally but is not listed in the `index.ts` type exports — consumers cannot import the type from the package.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@synerise/ds-logic",
3
- "version": "1.1.44",
3
+ "version": "1.1.46",
4
4
  "description": "Logic UI Component for the Synerise Design System",
5
5
  "license": "ISC",
6
6
  "repository": "Synerise/synerise-design",
@@ -17,6 +17,7 @@
17
17
  "files": [
18
18
  "/dist",
19
19
  "CHANGELOG.md",
20
+ "CLAUDE.md",
20
21
  "README.md",
21
22
  "package.json",
22
23
  "LICENSE.md"
@@ -41,9 +42,9 @@
41
42
  ],
42
43
  "types": "dist/index.d.ts",
43
44
  "dependencies": {
44
- "@synerise/ds-icon": "^1.18.3",
45
- "@synerise/ds-typography": "^1.1.25",
46
- "@synerise/ds-utils": "^1.10.0"
45
+ "@synerise/ds-icon": "^1.18.5",
46
+ "@synerise/ds-typography": "^1.1.27",
47
+ "@synerise/ds-utils": "^1.10.2"
47
48
  },
48
49
  "peerDependencies": {
49
50
  "@synerise/ds-core": "*",
@@ -52,5 +53,5 @@
52
53
  "styled-components": "^5.3.3",
53
54
  "vitest": "4"
54
55
  },
55
- "gitHead": "fe3379f50afdce6d8c61a2222ebbf03324107c95"
56
+ "gitHead": "d0a43cc43d8528a36f105aceea52ab470edb71d9"
56
57
  }