@edvisor/product-language 0.3.0 → 0.4.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 (290) hide show
  1. package/index.d.ts +2 -0
  2. package/index.js +9374 -0
  3. package/lib/components/alert-banner/alert-banner.d.ts +11 -0
  4. package/lib/components/alert-banner/alert-level-flags.d.ts +13 -0
  5. package/lib/components/alert-banner/index.d.ts +1 -0
  6. package/lib/components/badge/badge-type-flags.d.ts +18 -0
  7. package/lib/components/badge/badge.d.ts +5 -0
  8. package/lib/components/badge/index.d.ts +1 -0
  9. package/{src/lib/components/card/atoms/card-frame.tsx → lib/components/card/atoms/card-frame.d.ts} +7 -17
  10. package/lib/components/card/atoms/index.d.ts +1 -0
  11. package/lib/components/card/card.d.ts +14 -0
  12. package/lib/components/card/components/card-alert-banner-slot.d.ts +5 -0
  13. package/lib/components/card/components/card-controls-slot.d.ts +4 -0
  14. package/lib/components/card/components/card-section-slot.d.ts +11 -0
  15. package/lib/components/card/components/index.d.ts +3 -0
  16. package/lib/components/card/index.d.ts +2 -0
  17. package/lib/components/card/molecules/index.d.ts +1 -0
  18. package/lib/components/card/molecules/left-right-card.d.ts +16 -0
  19. package/lib/components/checkbox/checkbox.d.ts +10 -0
  20. package/lib/components/checkbox/helpers.d.ts +12 -0
  21. package/lib/components/checkbox/index.d.ts +1 -0
  22. package/lib/components/divider/divider-type-flags.d.ts +9 -0
  23. package/lib/components/divider/divider.d.ts +7 -0
  24. package/lib/components/divider/index.d.ts +1 -0
  25. package/lib/components/flag/flag-size-flags.d.ts +12 -0
  26. package/lib/components/flag/flag.d.ts +9 -0
  27. package/lib/components/flag/flag.list.d.ts +781 -0
  28. package/lib/components/flag/index.d.ts +1 -0
  29. package/lib/components/icon/icon-list.d.ts +131 -0
  30. package/lib/components/icon/icon.d.ts +131 -0
  31. package/lib/components/icon/index.d.ts +1 -0
  32. package/lib/components/index.d.ts +18 -0
  33. package/lib/components/input-field/components/index.d.ts +2 -0
  34. package/lib/components/input-field/components/labeled-input.d.ts +10 -0
  35. package/lib/components/input-field/components/stepper.d.ts +7 -0
  36. package/lib/components/input-field/index.d.ts +3 -0
  37. package/lib/components/input-field/input-field.d.ts +25 -0
  38. package/lib/components/input-field/input-number.d.ts +18 -0
  39. package/lib/components/input-field/input-text.d.ts +14 -0
  40. package/lib/components/layout/flex.d.ts +16 -0
  41. package/lib/components/layout/grid-layout.d.ts +11 -0
  42. package/lib/components/layout/index.d.ts +3 -0
  43. package/lib/components/layout/left-right-layout.d.ts +34 -0
  44. package/lib/components/link/index.d.ts +1 -0
  45. package/lib/components/link/link.d.ts +14 -0
  46. package/lib/components/molecules/avatar/avatar-size-flags.d.ts +12 -0
  47. package/lib/components/molecules/avatar/avatar.d.ts +12 -0
  48. package/lib/components/molecules/avatar/index.d.ts +1 -0
  49. package/lib/components/molecules/button/button-flags.d.ts +44 -0
  50. package/lib/components/molecules/button/button.d.ts +12 -0
  51. package/lib/components/molecules/button/index.d.ts +1 -0
  52. package/lib/components/molecules/index.d.ts +3 -0
  53. package/lib/components/molecules/input-checkbox/index.d.ts +1 -0
  54. package/lib/components/molecules/input-checkbox/input-checkbox.d.ts +8 -0
  55. package/lib/components/organisms/index.d.ts +1 -0
  56. package/lib/components/organisms/multi-choice-list/index.d.ts +1 -0
  57. package/lib/components/organisms/multi-choice-list/multi-choice-list.d.ts +10 -0
  58. package/lib/components/select/components/menu-container.d.ts +3 -0
  59. package/lib/components/select/components/menu-row.d.ts +9 -0
  60. package/lib/components/select/components/menu.d.ts +2 -0
  61. package/lib/components/select/components/option.d.ts +10 -0
  62. package/lib/components/select/components/select-label.d.ts +1 -0
  63. package/lib/components/select/components/value-component-multi.d.ts +3 -0
  64. package/lib/components/select/components/value-component-single.d.ts +4 -0
  65. package/lib/components/select/components/value.d.ts +4 -0
  66. package/lib/components/select/index.d.ts +1 -0
  67. package/lib/components/select/select.d.ts +9 -0
  68. package/lib/components/select/types.d.ts +124 -0
  69. package/lib/components/select/utils.d.ts +15 -0
  70. package/lib/components/spinner/index.d.ts +1 -0
  71. package/lib/components/spinner/spinner-size-flags.d.ts +10 -0
  72. package/lib/components/spinner/spinner.d.ts +9 -0
  73. package/lib/components/tabs/components/index.d.ts +1 -0
  74. package/lib/components/tabs/components/tab.d.ts +7 -0
  75. package/lib/components/tabs/index.d.ts +1 -0
  76. package/lib/components/tabs/tabs.d.ts +15 -0
  77. package/lib/components/tag/components/close-button.d.ts +8 -0
  78. package/lib/components/tag/components/index.d.ts +2 -0
  79. package/lib/components/tag/components/tag-label.d.ts +8 -0
  80. package/lib/components/tag/index.d.ts +1 -0
  81. package/lib/components/tag/tag.d.ts +10 -0
  82. package/lib/components/thumbnail/index.d.ts +1 -0
  83. package/lib/components/thumbnail/thumbnail-size-flags.d.ts +10 -0
  84. package/lib/components/thumbnail/thumbnail.d.ts +10 -0
  85. package/lib/components/typography/index.d.ts +1 -0
  86. package/lib/components/typography/typography.d.ts +24 -0
  87. package/lib/foundations/color-system/base-palette/base-palette.d.ts +76 -0
  88. package/lib/foundations/color-system/base-palette/index.d.ts +1 -0
  89. package/lib/foundations/color-system/color-guidelines/color-guidelines.d.ts +132 -0
  90. package/lib/foundations/color-system/color-guidelines/index.d.ts +1 -0
  91. package/lib/foundations/color-system/components/color-sample.d.ts +17 -0
  92. package/lib/foundations/color-system/components/index.d.ts +1 -0
  93. package/lib/foundations/color-system/index.d.ts +1 -0
  94. package/lib/foundations/index.d.ts +4 -0
  95. package/lib/foundations/shadows/components.d.ts +8 -0
  96. package/lib/foundations/shadows/index.d.ts +1 -0
  97. package/lib/foundations/shadows/shadows.d.ts +8 -0
  98. package/lib/foundations/spacing/index.d.ts +1 -0
  99. package/lib/foundations/spacing/spacing-guidelines.d.ts +22 -0
  100. package/lib/foundations/spacing/spacing.d.ts +18 -0
  101. package/lib/foundations/typography/constants.d.ts +22 -0
  102. package/lib/foundations/typography/fonts.d.ts +1 -0
  103. package/lib/foundations/typography/index.d.ts +1 -0
  104. package/lib/foundations/typography/text-aspect-flags.d.ts +19 -0
  105. package/lib/foundations/typography/typography.d.ts +24 -0
  106. package/lib/helpers/generic-types.d.ts +21 -0
  107. package/lib/helpers/index.d.ts +6 -0
  108. package/lib/helpers/nothing.d.ts +8 -0
  109. package/{src/lib/helpers/numbers.ts → lib/helpers/numbers.d.ts} +50 -67
  110. package/lib/helpers/safe-navigation.d.ts +15 -0
  111. package/lib/helpers/slots.d.ts +23 -0
  112. package/lib/helpers/strings.d.ts +1 -0
  113. package/package.json +12 -3
  114. package/.babelrc +0 -12
  115. package/.eslintrc.json +0 -147
  116. package/.storybook/main.js +0 -57
  117. package/.storybook/manager.js +0 -7
  118. package/.storybook/preview.js +0 -15
  119. package/.storybook/tsconfig.json +0 -30
  120. package/jest.config.ts +0 -15
  121. package/jest.setup.ts +0 -2
  122. package/project.json +0 -96
  123. package/release-it.json +0 -18
  124. package/src/README.md +0 -61
  125. package/src/assets/svg/example_icon.svg +0 -3
  126. package/src/assets/svg/example_icon_white.svg +0 -3
  127. package/src/assets/svg/spinner.svg +0 -3
  128. package/src/assets/svg/spinner_white.svg +0 -3
  129. package/src/helpers/index.ts +0 -4
  130. package/src/helpers/playground.ts +0 -16
  131. package/src/helpers/talesOf.tsx +0 -42
  132. package/src/index.ts +0 -2
  133. package/src/lib/components/README.md +0 -49
  134. package/src/lib/components/alert-banner/alert-banner.tsx +0 -34
  135. package/src/lib/components/alert-banner/alert-level-flags.ts +0 -77
  136. package/src/lib/components/alert-banner/index.ts +0 -1
  137. package/src/lib/components/badge/badge-type-flags.ts +0 -72
  138. package/src/lib/components/badge/badge.test.tsx +0 -29
  139. package/src/lib/components/badge/badge.tsx +0 -22
  140. package/src/lib/components/badge/index.ts +0 -1
  141. package/src/lib/components/badge/stories/badge.stories.mdx +0 -44
  142. package/src/lib/components/badge/stories/components.tsx +0 -49
  143. package/src/lib/components/card/atoms/index.ts +0 -1
  144. package/src/lib/components/card/card.test.tsx +0 -162
  145. package/src/lib/components/card/card.tsx +0 -78
  146. package/src/lib/components/card/components/card-alert-banner-slot.tsx +0 -16
  147. package/src/lib/components/card/components/card-controls-slot.tsx +0 -19
  148. package/src/lib/components/card/components/card-section-slot.tsx +0 -51
  149. package/src/lib/components/card/components/index.ts +0 -3
  150. package/src/lib/components/card/index.ts +0 -2
  151. package/src/lib/components/card/molecules/index.ts +0 -1
  152. package/src/lib/components/card/molecules/left-right-card.test.tsx +0 -89
  153. package/src/lib/components/card/molecules/left-right-card.tsx +0 -63
  154. package/src/lib/components/card/storybook/card.stories.mdx +0 -100
  155. package/src/lib/components/card/storybook/components.tsx +0 -223
  156. package/src/lib/components/checkbox/checkbox.test.tsx +0 -39
  157. package/src/lib/components/checkbox/checkbox.tsx +0 -63
  158. package/src/lib/components/checkbox/helpers.tsx +0 -100
  159. package/src/lib/components/checkbox/index.tsx +0 -1
  160. package/src/lib/components/checkbox/stories/checkbox.stories.mdx +0 -57
  161. package/src/lib/components/checkbox/stories/components.tsx +0 -84
  162. package/src/lib/components/divider/divider-type-flags.tsx +0 -37
  163. package/src/lib/components/divider/divider.test.tsx +0 -34
  164. package/src/lib/components/divider/divider.tsx +0 -37
  165. package/src/lib/components/divider/index.tsx +0 -1
  166. package/src/lib/components/divider/stories/components.tsx +0 -13
  167. package/src/lib/components/divider/stories/divider.stories.mdx +0 -44
  168. package/src/lib/components/flag/flag-size-flags.tsx +0 -55
  169. package/src/lib/components/flag/flag.list.tsx +0 -788
  170. package/src/lib/components/flag/flag.test.tsx +0 -65
  171. package/src/lib/components/flag/flag.tsx +0 -97
  172. package/src/lib/components/flag/index.tsx +0 -1
  173. package/src/lib/components/flag/stories/components.tsx +0 -403
  174. package/src/lib/components/flag/stories/flag.stories.mdx +0 -48
  175. package/src/lib/components/flag/stories/playGround-select.tsx +0 -145
  176. package/src/lib/components/icon/icon-list.tsx +0 -135
  177. package/src/lib/components/icon/icon.test.tsx +0 -48
  178. package/src/lib/components/icon/icon.tsx +0 -181
  179. package/src/lib/components/icon/index.tsx +0 -1
  180. package/src/lib/components/icon/stories/components.tsx +0 -282
  181. package/src/lib/components/icon/stories/icon.stories.mdx +0 -65
  182. package/src/lib/components/index.ts +0 -19
  183. package/src/lib/components/input-field/components/index.ts +0 -2
  184. package/src/lib/components/input-field/components/labeled-input.tsx +0 -54
  185. package/src/lib/components/input-field/components/stepper.tsx +0 -60
  186. package/src/lib/components/input-field/index.ts +0 -6
  187. package/src/lib/components/input-field/input-field.test.tsx +0 -107
  188. package/src/lib/components/input-field/input-field.tsx +0 -126
  189. package/src/lib/components/input-field/input-number.tsx +0 -41
  190. package/src/lib/components/input-field/input-text.tsx +0 -30
  191. package/src/lib/components/input-field/storybook/components.tsx +0 -327
  192. package/src/lib/components/input-field/storybook/input-field.stories.mdx +0 -113
  193. package/src/lib/components/layout/flex.tsx +0 -22
  194. package/src/lib/components/layout/grid-layout.tsx +0 -40
  195. package/src/lib/components/layout/index.ts +0 -3
  196. package/src/lib/components/layout/left-right-layout.tsx +0 -67
  197. package/src/lib/components/link/index.ts +0 -1
  198. package/src/lib/components/link/link.test.tsx +0 -29
  199. package/src/lib/components/link/link.tsx +0 -56
  200. package/src/lib/components/link/storybook/link.stories.mdx +0 -52
  201. package/src/lib/components/molecules/avatar/avatar-size-flags.tsx +0 -55
  202. package/src/lib/components/molecules/avatar/avatar.test.tsx +0 -114
  203. package/src/lib/components/molecules/avatar/avatar.tsx +0 -80
  204. package/src/lib/components/molecules/avatar/index.tsx +0 -1
  205. package/src/lib/components/molecules/avatar/stories/avatar.stories.mdx +0 -52
  206. package/src/lib/components/molecules/avatar/stories/components.tsx +0 -36
  207. package/src/lib/components/molecules/button/button-flags.tsx +0 -340
  208. package/src/lib/components/molecules/button/button.test.tsx +0 -77
  209. package/src/lib/components/molecules/button/button.tsx +0 -214
  210. package/src/lib/components/molecules/button/index.tsx +0 -1
  211. package/src/lib/components/molecules/button/stories/button.stories.mdx +0 -105
  212. package/src/lib/components/molecules/button/stories/components.tsx +0 -84
  213. package/src/lib/components/molecules/index.ts +0 -3
  214. package/src/lib/components/molecules/input-checkbox/index.tsx +0 -1
  215. package/src/lib/components/molecules/input-checkbox/input-checkbox.test.tsx +0 -34
  216. package/src/lib/components/molecules/input-checkbox/input-checkbox.tsx +0 -49
  217. package/src/lib/components/molecules/input-checkbox/stories/components.tsx +0 -53
  218. package/src/lib/components/molecules/input-checkbox/stories/input-checkbox.stories.mdx +0 -49
  219. package/src/lib/components/organisms/index.ts +0 -1
  220. package/src/lib/components/organisms/multi-choice-list/index.tsx +0 -1
  221. package/src/lib/components/organisms/multi-choice-list/multi-choice-list.test.tsx +0 -33
  222. package/src/lib/components/organisms/multi-choice-list/multi-choice-list.tsx +0 -52
  223. package/src/lib/components/organisms/multi-choice-list/stories/components.tsx +0 -124
  224. package/src/lib/components/organisms/multi-choice-list/stories/multi-choice-list.stories.mdx +0 -99
  225. package/src/lib/components/spinner/index.tsx +0 -1
  226. package/src/lib/components/spinner/spinner-size-flags.tsx +0 -39
  227. package/src/lib/components/spinner/spinner.test.tsx +0 -31
  228. package/src/lib/components/spinner/spinner.tsx +0 -54
  229. package/src/lib/components/spinner/stories/components.tsx +0 -39
  230. package/src/lib/components/spinner/stories/spinner.stories.mdx +0 -35
  231. package/src/lib/components/tabs/components/index.ts +0 -1
  232. package/src/lib/components/tabs/components/tab.tsx +0 -62
  233. package/src/lib/components/tabs/index.tsx +0 -1
  234. package/src/lib/components/tabs/storybook/components.tsx +0 -282
  235. package/src/lib/components/tabs/storybook/tabs.stories.mdx +0 -97
  236. package/src/lib/components/tabs/tabs.test.tsx +0 -86
  237. package/src/lib/components/tabs/tabs.tsx +0 -101
  238. package/src/lib/components/tag/components/close-button.tsx +0 -85
  239. package/src/lib/components/tag/components/index.ts +0 -2
  240. package/src/lib/components/tag/components/tag-label.tsx +0 -44
  241. package/src/lib/components/tag/index.tsx +0 -1
  242. package/src/lib/components/tag/stories/components.tsx +0 -86
  243. package/src/lib/components/tag/stories/tag.stories.mdx +0 -42
  244. package/src/lib/components/tag/tag.test.tsx +0 -36
  245. package/src/lib/components/tag/tag.tsx +0 -33
  246. package/src/lib/components/thumbnail/index.tsx +0 -1
  247. package/src/lib/components/thumbnail/stories/thumbnail.stories.mdx +0 -34
  248. package/src/lib/components/thumbnail/thumbnail-size-flags.tsx +0 -41
  249. package/src/lib/components/thumbnail/thumbnail.test.tsx +0 -51
  250. package/src/lib/components/thumbnail/thumbnail.tsx +0 -45
  251. package/src/lib/components/typography/index.ts +0 -1
  252. package/src/lib/components/typography/storybook/components.tsx +0 -288
  253. package/src/lib/components/typography/storybook/typography.stories.mdx +0 -90
  254. package/src/lib/components/typography/typography.test.tsx +0 -97
  255. package/src/lib/components/typography/typography.tsx +0 -99
  256. package/src/lib/foundations/color-system/base-palette/base-palette.stories.tsx +0 -123
  257. package/src/lib/foundations/color-system/base-palette/base-palette.ts +0 -93
  258. package/src/lib/foundations/color-system/base-palette/index.ts +0 -1
  259. package/src/lib/foundations/color-system/color-guidelines/color-guidelines.stories.mdx +0 -85
  260. package/src/lib/foundations/color-system/color-guidelines/color-guidelines.stories.tsx +0 -231
  261. package/src/lib/foundations/color-system/color-guidelines/color-guidelines.ts +0 -160
  262. package/src/lib/foundations/color-system/color-guidelines/index.ts +0 -1
  263. package/src/lib/foundations/color-system/components/color-sample.tsx +0 -99
  264. package/src/lib/foundations/color-system/components/index.ts +0 -1
  265. package/src/lib/foundations/color-system/index.ts +0 -1
  266. package/src/lib/foundations/index.ts +0 -4
  267. package/src/lib/foundations/shadows/components.tsx +0 -59
  268. package/src/lib/foundations/shadows/index.ts +0 -1
  269. package/src/lib/foundations/shadows/shadows.stories.mdx +0 -71
  270. package/src/lib/foundations/shadows/shadows.tsx +0 -47
  271. package/src/lib/foundations/spacing/index.ts +0 -1
  272. package/src/lib/foundations/spacing/spacing-guidelines.ts +0 -24
  273. package/src/lib/foundations/spacing/spacing.stories.mdx +0 -51
  274. package/src/lib/foundations/spacing/spacing.ts +0 -18
  275. package/src/lib/foundations/typography/constants.ts +0 -25
  276. package/src/lib/foundations/typography/fonts.ts +0 -205
  277. package/src/lib/foundations/typography/index.tsx +0 -1
  278. package/src/lib/foundations/typography/text-aspect-flags.ts +0 -61
  279. package/src/lib/foundations/typography/typography.tsx +0 -102
  280. package/src/lib/helpers/generic-types.ts +0 -44
  281. package/src/lib/helpers/index.ts +0 -6
  282. package/src/lib/helpers/nothing.tsx +0 -18
  283. package/src/lib/helpers/safe-navigation.ts +0 -44
  284. package/src/lib/helpers/slots.test.tsx +0 -98
  285. package/src/lib/helpers/slots.tsx +0 -157
  286. package/src/lib/helpers/strings.test.ts +0 -47
  287. package/src/lib/helpers/strings.ts +0 -16
  288. package/tsconfig.json +0 -35
  289. package/tsconfig.lib.json +0 -28
  290. package/tsconfig.spec.json +0 -21
package/project.json DELETED
@@ -1,96 +0,0 @@
1
- {
2
- "$schema": "../../node_modules/nx/schemas/project-schema.json",
3
- "sourceRoot": "packages/product-language/src",
4
- "projectType": "library",
5
- "tags": [],
6
- "targets": {
7
- "build": {
8
- "executor": "@nrwl/web:rollup",
9
- "outputs": ["{options.outputPath}"],
10
- "options": {
11
- "outputPath": "dist/packages/product-language",
12
- "tsConfig": "packages/product-language/tsconfig.lib.json",
13
- "project": "packages/product-language/package.json",
14
- "entryFile": "packages/product-language/src/index.ts",
15
- "external": ["react/jsx-runtime"],
16
- "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
17
- "compiler": "babel",
18
- "assets": [
19
- {
20
- "glob": "packages/product-language/README.md",
21
- "input": ".",
22
- "output": "."
23
- }
24
- ]
25
- }
26
- },
27
- "dev": {
28
- "executor": "@nrwl/web:rollup",
29
- "outputs": ["{options.outputPath}"],
30
- "options": {
31
- "watch": true,
32
- "outputPath": "../react-web-client/product-language",
33
- "tsConfig": "packages/product-language/tsconfig.lib.json",
34
- "project": "packages/product-language/package.json",
35
- "entryFile": "packages/product-language/src/index.ts",
36
- "external": ["react/jsx-runtime"],
37
- "rollupConfig": "@nrwl/react/plugins/bundle-rollup",
38
- "compiler": "babel",
39
- "assets": [
40
- {
41
- "glob": "packages/product-language/README.md",
42
- "input": ".",
43
- "output": "."
44
- }
45
- ]
46
- }
47
- },
48
- "lint": {
49
- "executor": "@nrwl/linter:eslint",
50
- "outputs": ["{options.outputFile}"],
51
- "options": {
52
- "lintFilePatterns": ["packages/product-language/**/*.{ts,tsx,js,jsx}"]
53
- }
54
- },
55
- "test": {
56
- "executor": "@nrwl/jest:jest",
57
- "outputs": ["coverage/packages/product-language"],
58
- "options": {
59
- "jestConfig": "packages/product-language/jest.config.ts",
60
- "passWithNoTests": true
61
- }
62
- },
63
- "storybook": {
64
- "executor": "@nrwl/storybook:storybook",
65
- "options": {
66
- "uiFramework": "@storybook/react",
67
- "tsConfig": "packages/product-language/tsconfig.storybook.json",
68
- "port": 4400,
69
- "config": {
70
- "configFolder": "packages/product-language/.storybook"
71
- }
72
- },
73
- "configurations": {
74
- "ci": {
75
- "quiet": true
76
- }
77
- }
78
- },
79
- "build-storybook": {
80
- "executor": "@nrwl/storybook:build",
81
- "outputs": ["{options.outputPath}"],
82
- "options": {
83
- "uiFramework": "@storybook/react",
84
- "outputPath": "dist/storybook/product-language",
85
- "config": {
86
- "configFolder": "packages/product-language/.storybook"
87
- }
88
- },
89
- "configurations": {
90
- "ci": {
91
- "quiet": true
92
- }
93
- }
94
- }
95
- }
96
- }
package/release-it.json DELETED
@@ -1,18 +0,0 @@
1
- {
2
- "git": {
3
- "requireCleanWorkingDir": false,
4
- "commitMessage": "chore: release ${version}",
5
- "tagName": "v${version}"
6
- },
7
- "github": {
8
- "release": true,
9
- "tokenRef": "BOB"
10
- },
11
- "npm": {
12
- "publish": true,
13
- "manifestPath": "./dist/packages/product-language/package.json"
14
- },
15
- "publishConfig": {
16
- "registry": "https://registry.npmjs.org"
17
- }
18
- }
package/src/README.md DELETED
@@ -1,61 +0,0 @@
1
- Directory Structure
2
- ===================
3
-
4
- Manifest Files (index.ts)
5
- -------------------------
6
-
7
- RWC, and now product-language, export components to be consumed by another system. Their API is a list of components that they export, and this API is declared in src/index.ts the “root manifest”.
8
-
9
- ```ts
10
- // src/index.ts
11
- export * from 'src/components'
12
- export * from 'src/foundations'
13
- ```
14
-
15
- And then things get… recursive.
16
-
17
- The “components” directory is a module that exports components to be consumed by another system. It’s API is the list of components it exports, and this API is declared in src/components/index.ts
18
-
19
- ```ts
20
- // src/components/index.ts
21
- export * from 'src/components/atoms'
22
- export * from 'src/components/molecules'
23
- ```
24
-
25
- The “molecules” directory is a module that exports components to be consumed by another system. It’s API is the list of components it exports, and this API is declared in src/components/molecules/index.ts
26
-
27
- ```ts
28
- // src/components/molecules/index.ts
29
- export * from 'src/components/molecules/button
30
- export * from 'src/components/molecules/card
31
- export * from 'src/components/molecules/input-field
32
- ```
33
-
34
- The “button” directory is a module that exports components to be consumed by another system. It’s API is the list of components it exports, and this API is declared in src/components/molecules/button/index.ts
35
-
36
- This file, this index.ts file is the public API or public interface of the button module. A public interface should only expose public things. Private things should not be exported. So for example:
37
-
38
- ```ts
39
- // src/components/molecules/button/index.ts
40
-
41
- export * from './stories' // NOPE! this is not public
42
- export * from './components' // Nope! don't expose implementation details
43
-
44
- // in most cases, this is all you need
45
- export * from './Button.tsx'
46
- ```
47
-
48
- Within the Button module, we have to be careful to remember that these index files are the public api they are not to be consumed internally. So for example in a storybook file:
49
-
50
- ```ts
51
- // src/components/molecules/button/stories/button.stories.mdx
52
-
53
- import { Button } from '../index' // Nope!
54
- import { Button } from '../Button' // yes!
55
- ```
56
-
57
- Importing from the index file within the module that index file describes is a potential problem, it can cause cyclic dependencies which can be hard to debug.
58
-
59
- On a similar note: your stories and tests folders don’t need index files at all. They are just there to provide a place to put helpers specific to the stories and tests for the component. They are not modules that export components for other systems to use, so they do not need an index.ts file.
60
-
61
- On the other hand, the components folder in the Button module should have an index.ts file since it exposes a list of components that Button consumes. Doing this also makes it easier to lift a helper component from the Button module to a shared place if you discover you’ve created a helpful shared component.
@@ -1,3 +0,0 @@
1
- <svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M14.3751 15.6444H1.62507C1.12228 15.6444 0.714355 16.0527 0.714355 16.5559C0.714355 17.0902 1.12228 17.5 1.62507 17.5H14.3751C14.8779 17.5 15.2858 17.0917 15.2858 16.5885C15.2858 16.0846 14.8798 15.6444 14.3751 15.6444ZM12.1932 7.16719L8.91078 10.6583V1.41451C8.91078 0.908303 8.50476 0.5 8.00007 0.5C7.49538 0.5 7.08936 0.908304 7.08936 1.41147V10.6552L3.80585 7.16719C3.62674 6.97366 3.38503 6.8788 3.14293 6.8788C2.91882 6.8788 2.69478 6.96068 2.51909 7.12681C2.15268 7.47095 2.13507 8.04777 2.47996 8.41433L7.33711 13.5788C7.68098 13.9467 8.31916 13.9467 8.66296 13.5788L13.5201 8.41433C13.8652 8.04766 13.8474 7.47099 13.481 7.12681C13.1152 6.78013 12.5385 6.76496 12.1932 7.16719Z" fill="#6B7280"/>
3
- </svg>
@@ -1,3 +0,0 @@
1
- <svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path d="M14.3751 15.6444H1.62507C1.12228 15.6444 0.714355 16.0527 0.714355 16.5559C0.714355 17.0902 1.12228 17.5 1.62507 17.5H14.3751C14.8779 17.5 15.2858 17.0917 15.2858 16.5885C15.2858 16.0846 14.8798 15.6444 14.3751 15.6444ZM12.1932 7.16719L8.91078 10.6583V1.41451C8.91078 0.908303 8.50476 0.5 8.00007 0.5C7.49538 0.5 7.08936 0.908304 7.08936 1.41147V10.6552L3.80585 7.16719C3.62674 6.97366 3.38503 6.8788 3.14293 6.8788C2.91882 6.8788 2.69478 6.96068 2.51909 7.12681C2.15268 7.47095 2.13507 8.04777 2.47996 8.41433L7.33711 13.5788C7.68098 13.9467 8.31916 13.9467 8.66296 13.5788L13.5201 8.41433C13.8652 8.04766 13.8474 7.47099 13.481 7.12681C13.1152 6.78013 12.5385 6.76496 12.1932 7.16719Z" fill="white"/>
3
- </svg>
@@ -1,3 +0,0 @@
1
- <svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path fill-rule="evenodd" clip-rule="evenodd" d="M9 2.09302C5.18538 2.09302 2.09302 5.18538 2.09302 9C2.09302 12.8146 5.18538 15.907 9 15.907C9.57797 15.907 10.0465 16.3755 10.0465 16.9535C10.0465 17.5315 9.57797 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C11.5884 0 13.9229 1.09405 15.5635 2.84196C15.959 3.26339 15.938 3.92567 15.5166 4.3212C15.0951 4.71674 14.4329 4.69575 14.0373 4.27432C12.7759 2.93035 10.9866 2.09302 9 2.09302Z" fill="#6B7280"/>
3
- </svg>
@@ -1,3 +0,0 @@
1
- <svg width="16" height="18" viewBox="0 0 16 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2
- <path fill-rule="evenodd" clip-rule="evenodd" d="M9 2.09302C5.18538 2.09302 2.09302 5.18538 2.09302 9C2.09302 12.8146 5.18538 15.907 9 15.907C9.57797 15.907 10.0465 16.3755 10.0465 16.9535C10.0465 17.5315 9.57797 18 9 18C4.02944 18 0 13.9706 0 9C0 4.02944 4.02944 0 9 0C11.5884 0 13.9229 1.09405 15.5635 2.84196C15.959 3.26339 15.938 3.92567 15.5166 4.3212C15.0951 4.71674 14.4329 4.69575 14.0373 4.27432C12.7759 2.93035 10.9866 2.09302 9 2.09302Z" fill="white"/>
3
- </svg>
@@ -1,4 +0,0 @@
1
- // these are helpers used for development, they are not included in the build
2
-
3
- export * from './talesOf'
4
- export * from './playground'
@@ -1,16 +0,0 @@
1
- import styled from 'styled-components'
2
- import { Playground } from 'storybook-addon-jarle-monaco'
3
- import { Margin, Surface, Text } from '@foundations'
4
- export { Playground } from 'storybook-addon-jarle-monaco'
5
-
6
- /** when using playground with a card inside we style it in night mode */
7
- export const CardPlayground = styled(Playground)`
8
- background: ${Surface.Neutral.Default};
9
-
10
- margin-bottom: ${Margin.xxl};
11
-
12
- > div:nth-of-type(2) {
13
- background: ${Surface.Default.Inverse};
14
- color: ${Text.OnPrimary};
15
- }
16
- `
@@ -1,42 +0,0 @@
1
- import { storiesOf as _storiesOf } from '@storybook/react'
2
- import { StoryFn } from '@storybook/addons'
3
- import { isDefined, isNil } from '@helpers'
4
- import { StoryFnReactReturnType } from '@storybook/react/dist/ts3.9/client/preview/types'
5
-
6
- const DIRECTORY_BASE_PATH = 'packages/product-language/src/lib/'
7
-
8
- const getStoryPath = (filepath: string) => {
9
- const path = filepath.split('/')
10
-
11
- return isDefined(path)
12
- ? path
13
- .slice(0, path.length - 1) // remove the filename
14
- .join('/')
15
- .replace(DIRECTORY_BASE_PATH, '') // remove the base path
16
- : 'misc'
17
- }
18
-
19
- function getStoryTitle (filepath: string, storyName? : string): string {
20
- const path = filepath.split('/')
21
-
22
- const nameFromPath = isDefined(path) ? path.pop()?.split('.').shift() : undefined
23
-
24
- if (isNil(nameFromPath)) return 'Base'
25
-
26
- if (isDefined(storyName)) return `${nameFromPath}/${storyName}`
27
-
28
- return nameFromPath
29
- }
30
-
31
- export type StoryComponent = StoryFn<StoryFnReactReturnType>
32
-
33
- export function talesOf (filepath: string, module: NodeModule, Storybook?: StoryComponent, storyName?: string) {
34
- if (isNil(Storybook)) {
35
- return _storiesOf(getStoryPath(filepath), module)
36
- }
37
-
38
- const title = getStoryTitle(filepath, storyName)
39
-
40
- return _storiesOf(getStoryPath(filepath), module)
41
- .add(title, Storybook)
42
- }
package/src/index.ts DELETED
@@ -1,2 +0,0 @@
1
- export * from './lib/components'
2
- export * from './lib/foundations'
@@ -1,49 +0,0 @@
1
- Components
2
- ==========
3
-
4
- This folder contains the components that will be exported from the Product Language and used in the front-end.
5
-
6
- ```
7
- /src
8
- /lib
9
- /components
10
- /alert-banner
11
- /card
12
- index.ts
13
- ```
14
-
15
- The index.ts file is a manifest and anything in the manifest will be available the clients.
16
-
17
- ```
18
- /src
19
- /lib
20
- /components
21
- /alert-banner
22
- /card
23
- /components
24
- /helpers
25
- index.tsx
26
- card.tsx
27
- card.stories.tsx
28
- card.spec.ts
29
- index.ts
30
- ```
31
-
32
- inside of any component, like `card` you will find another index.ts file. This is a manifest and it should only declare the main file of the component as an export:
33
-
34
- ```ts
35
- export * from './card'
36
- ```
37
-
38
- None of the specs, stories, sub-components, helpers, or any other kind of thing should appear in the manifest. Using manifests like this allows us to give each component a rich eco-system of helpers and sub-components without needing to move everything to a global scope.
39
-
40
- For example, here is a helper in card/helpers.ts
41
-
42
- ```ts
43
- // this is not a real helper, just an example
44
- export function makeCardTitle (title: string) {
45
- return `Card: ${title}`
46
- }
47
- ```
48
-
49
- This helper is obviously tightly coupled to the card "concern". It should not be declared in a global helpers file, that wouldn't make sense and it would lower cohesion in the app. In addition, it should not be exported from the manifest, since it is not intended for the client to use it.
@@ -1,34 +0,0 @@
1
- import styled from 'styled-components'
2
- import { FC, Hex, PropsWithChildren } from '@helpers'
3
- import { AlertLevelProps, getBackgroundColor, getBorderColor } from './alert-level-flags'
4
- import { Padding } from '@foundations'
5
- import { CardFrame } from 'components/card/atoms'
6
-
7
- interface IAlertBannerProps extends PropsWithChildren {
8
- /** @TODO can we get some examples of alert banner in card from figma? */
9
- inCard?: boolean
10
- dismissible?: boolean
11
- className?: string
12
- }
13
-
14
- export type AlertBannerProps = IAlertBannerProps & AlertLevelProps
15
-
16
- const InCardFrame = styled(CardFrame).attrs({ as: 'div' })<{ background: Hex, border: Hex }>`
17
- display: inline-block;
18
- padding: ${Padding.m};
19
- width: fill-available;
20
-
21
- background: ${({ background }) => background};
22
- border: 1px solid ${({ border }) => border};
23
- `
24
-
25
- export const AlertBanner: FC<AlertBannerProps> = (props) => {
26
- const background = getBackgroundColor(props)
27
- const border = getBorderColor(props)
28
-
29
- return (
30
- <InCardFrame background={background} border={border} className={props.className}>
31
- {props.children}
32
- </InCardFrame>
33
- )
34
- }
@@ -1,77 +0,0 @@
1
- // this file was generated, but it is safe to modify
2
- import { Borders, Surface } from '@foundations'
3
- import { bitwiseOr, Hex, MappedEnum, RequireOnlyOne, PropsWithChildren } from '@helpers'
4
-
5
- const enum AlertLevel {
6
- neutral = 1,
7
- info = 2,
8
- success = 4,
9
- warning = 8,
10
- critical = 16,
11
- }
12
-
13
- type AlertLevels<T> = MappedEnum<typeof AlertLevel, T>
14
-
15
- function toAlertLevel(n: number): AlertLevel {
16
- switch (n) {
17
- case AlertLevel.neutral:
18
- return AlertLevel.neutral
19
- case AlertLevel.info:
20
- return AlertLevel.info
21
- case AlertLevel.success:
22
- return AlertLevel.success
23
- case AlertLevel.warning:
24
- return AlertLevel.warning
25
- case AlertLevel.critical:
26
- return AlertLevel.critical
27
- default:
28
- return AlertLevel.neutral
29
- }
30
- }
31
-
32
- export type AlertLevelProps = Partial<RequireOnlyOne<AlertLevels<boolean>>> &
33
- PropsWithChildren
34
-
35
- const AlertLevelBackgroundColors = {
36
- [AlertLevel.neutral]: Surface.Neutral.Subdued,
37
- [AlertLevel.info]: Surface.Highlight.Subdued,
38
- [AlertLevel.success]: Surface.Success.Subdued,
39
- [AlertLevel.warning]: Surface.Warning.Subdued,
40
- [AlertLevel.critical]: Surface.Critical.Subdued,
41
- }
42
-
43
- const AlertLevelBorderColors = {
44
- [AlertLevel.neutral]: Borders.Default.Default,
45
- [AlertLevel.info]: Borders.Highlight.Subdued,
46
- [AlertLevel.success]: Borders.Success.Subdued,
47
- [AlertLevel.warning]: Borders.Warning.Subdued,
48
- [AlertLevel.critical]: Borders.Critical.Subdued,
49
- }
50
-
51
- export function getBackgroundColor(props: AlertLevelProps): Hex {
52
- return AlertLevelBackgroundColors[
53
- toAlertLevel(
54
- bitwiseOr([
55
- props.neutral,
56
- props.info,
57
- props.success,
58
- props.warning,
59
- props.critical,
60
- ])
61
- )
62
- ]
63
- }
64
-
65
- export function getBorderColor(props: AlertLevelProps): Hex {
66
- return AlertLevelBorderColors[
67
- toAlertLevel(
68
- bitwiseOr([
69
- props.neutral,
70
- props.info,
71
- props.success,
72
- props.warning,
73
- props.critical,
74
- ])
75
- )
76
- ]
77
- }
@@ -1 +0,0 @@
1
- export * from './alert-banner'
@@ -1,72 +0,0 @@
1
- // this file was generated, but it is safe to modify
2
- import { Hex, PropsWithChildren } from '@helpers'
3
- import { Surface } from '@foundations'
4
-
5
- const enum BadgeType {
6
- neutral = 1,
7
- info = 2,
8
- success = 4,
9
- warning = 8,
10
- critical = 16,
11
- }
12
-
13
- export type RequireOnlyOne<T, Keys extends keyof T = keyof T> = Pick<
14
- T,
15
- Exclude<keyof T, Keys>
16
- > &
17
- {
18
- [K in Keys]-?: Required<Pick<T, K>> &
19
- Partial<Record<Exclude<Keys, K>, undefined>>;
20
- }[Keys];
21
-
22
- export type MappedEnum<E, T> = {
23
- [key in keyof E]: T;
24
- }
25
-
26
- type BadgeTypes<T> = MappedEnum<typeof BadgeType, T>
27
-
28
- function toBadgeType(n: number): BadgeType {
29
- switch (n) {
30
- case BadgeType.neutral:
31
- return BadgeType.neutral
32
- case BadgeType.info:
33
- return BadgeType.info
34
- case BadgeType.success:
35
- return BadgeType.success
36
- case BadgeType.warning:
37
- return BadgeType.warning
38
- case BadgeType.critical:
39
- return BadgeType.critical
40
- default:
41
- return BadgeType.neutral
42
- }
43
- }
44
-
45
- const BadgeTypeColors = {
46
- [BadgeType.neutral]: Surface.Neutral.Default,
47
- [BadgeType.info]: Surface.Highlight.Default,
48
- [BadgeType.success]: Surface.Success.Default,
49
- [BadgeType.warning]: Surface.Warning.Default,
50
- [BadgeType.critical]: Surface.Critical.Default,
51
- }
52
-
53
- export type BadgeTypeProps = Partial<RequireOnlyOne<BadgeTypes<boolean>>> &
54
- PropsWithChildren
55
-
56
- function bitwiseOr(flags: unknown[]): number {
57
- return flags.reduce((mask: number, flag, i) => mask | (Number(flag) << i), 0)
58
- }
59
-
60
- export function getColor(props: BadgeTypeProps): Hex {
61
- return BadgeTypeColors[
62
- toBadgeType(
63
- bitwiseOr([
64
- props.neutral,
65
- props.info,
66
- props.success,
67
- props.warning,
68
- props.critical,
69
- ])
70
- )
71
- ]
72
- }
@@ -1,29 +0,0 @@
1
- import { render } from '@testing-library/react'
2
- import { Badge } from './badge'
3
-
4
- describe('Badge', () => {
5
- it('should render Neutral Badge successfully', () => {
6
- const { baseElement } = render(<Badge neutral>Neutral</Badge>)
7
- expect(baseElement).toBeTruthy()
8
- })
9
-
10
- it('should render Informational Badge successfully', () => {
11
- const { baseElement } = render(<Badge info>Informational</Badge>)
12
- expect(baseElement).toBeTruthy()
13
- })
14
-
15
- it('should render Warning Badge successfully', () => {
16
- const { baseElement } = render(<Badge warning>Warning</Badge>)
17
- expect(baseElement).toBeTruthy()
18
- })
19
-
20
- it('should render Success Badge successfully', () => {
21
- const { baseElement } = render(<Badge success>Success</Badge>)
22
- expect(baseElement).toBeTruthy()
23
- })
24
-
25
- it('should render Critical Badge successfully', () => {
26
- const { baseElement } = render(<Badge critical>Critical</Badge>)
27
- expect(baseElement).toBeTruthy()
28
- })
29
- })
@@ -1,22 +0,0 @@
1
- import styled from 'styled-components'
2
- import { Padding } from '@foundations'
3
- import { BadgeTypeProps, getColor } from './badge-type-flags'
4
- import { FC, PropsWithChildren } from '@helpers'
5
- import { Label } from 'components/typography'
6
-
7
- const BadgeFrame = styled(Label)<{color: string}>`
8
- background: ${props => props.color};
9
- display: flex;
10
- align-items:center;
11
- padding: ${Padding.xxxs} ${Padding.xs};
12
- border-radius:10px;
13
- height: fit-content;
14
- `
15
-
16
- type IBadgeProps = BadgeTypeProps & PropsWithChildren
17
-
18
- export const Badge: FC<IBadgeProps> = (props) => {
19
- const color = getColor(props)
20
-
21
- return <BadgeFrame color={color}>{props.children}</BadgeFrame>
22
- }
@@ -1 +0,0 @@
1
- export * from './badge'
@@ -1,44 +0,0 @@
1
- import { Badge } from '../badge'
2
- import { Meta } from '@storybook/addon-docs'
3
- import { BadgeExample } from './components'
4
-
5
- <Meta
6
- title="Components/Badge"
7
- component={Badge}
8
- />
9
-
10
- # Badge
11
-
12
- This is an atom.
13
-
14
- For more details, check out the component page on [Figma](https://www.figma.com/file/ue1CurHfZ426o2T2l8Dk64/Edvisor-Product-Language?node-id=1008%3A1257)
15
-
16
- ## How to use
17
-
18
- ```tsx
19
- import { Badge } from '@edvisor/product-language'
20
-
21
- <Badge>Contents</Badge>
22
- ```
23
-
24
- ### Attitudes
25
-
26
- The badge can be rendered with various attitudes.
27
-
28
- <BadgeExample />
29
-
30
- ## API
31
-
32
- | Name | Type | Description |
33
- | ----------- | --------- | ------------------------- |
34
- | `neutral?` | `boolean` | renders the neutral badge |
35
- | `info?` | `boolean` | renders the info badge |
36
- | `warning?` | `boolean` | renders the info warning |
37
- | `success?` | `boolean` | renders the info success |
38
- | `critical?` | `boolean` | renders the info critical |
39
-
40
- ## Changelog
41
-
42
- ### [0.0.0]
43
- - adopt the preferred storybook style
44
- - removed a containing div, adjusted styles to match figma
@@ -1,49 +0,0 @@
1
- import { Margin } from '@foundations'
2
- import { Flex } from 'components/layout'
3
- import { Heading1 } from 'components/typography'
4
- import { Playground } from 'storybook-addon-jarle-monaco'
5
- import styled from 'styled-components'
6
- import { Badge } from '../badge'
7
-
8
- const Heading = styled(Heading1)`
9
- margin-bottom: ${Margin.none};
10
- margin-right: ${Margin.s};
11
- `
12
-
13
- const Header = styled(Flex)`
14
- margin-bottom: ${Margin.l};
15
- align-items: center;
16
- `
17
-
18
- export const BadgeExample = () => (
19
- <Playground
20
- code={`
21
- <>
22
- <Header>
23
- <Heading>Booking &#x23;1123</Heading>
24
- <Badge warning>Pending</Badge>
25
- </Header>
26
- <Header>
27
- <Heading>Booking &#x23;1124</Heading>
28
- <Badge success>Accepted</Badge>
29
- </Header>
30
- <Header>
31
- <Heading>Booking &#x23;1125</Heading>
32
- <Badge info>Processing</Badge>
33
- </Header>
34
- <Header>
35
- <Heading>Booking &#x23;1126</Heading>
36
- <Badge critical>Declined</Badge>
37
- </Header>
38
- </>
39
- `}
40
- providerProps={{
41
- renderAsComponent: true,
42
- scope: {
43
- Badge,
44
- Heading,
45
- Header,
46
- },
47
- }}
48
- />
49
- )
@@ -1 +0,0 @@
1
- export * from './card-frame'