Skip to content
Permalink

Comparing changes

Choose two branches to see what’s changed or to start a new pull request. If you need to, you can also or learn more about diff comparisons.

Open a pull request

Create a new pull request by comparing changes across two branches. If you need to, you can also . Learn more about diff comparisons here.
base repository: versini-org/ui-components
Failed to load repositories. Confirm that selected base ref is valid, then try again.
Loading
base: ui-styles-v1.8.2
Choose a base ref
...
head repository: versini-org/ui-components
Failed to load repositories. Confirm that selected head ref is valid, then try again.
Loading
compare: ui-styles-v1.8.3
Choose a head ref
Loading
Showing with 1,929 additions and 437 deletions.
  1. +5 −5 .release-please-manifest.json
  2. +11 −0 examples/with-vite/nodemon.json
  3. +2 −2 examples/with-vite/package.json
  4. +4 −4 examples/with-vite/src/main.tsx
  5. +11 −0 examples/with-webpack/nodemon.json
  6. +3 −2 examples/with-webpack/package.json
  7. +4 −4 examples/with-webpack/src/main.tsx
  8. +47 −24 packages/documentation/src/Components/Anchor.stories.tsx
  9. +60 −29 packages/documentation/src/Components/Button.stories.tsx
  10. +5 −0 packages/documentation/src/Components/ButtonIcon.stories.tsx
  11. +4 −4 packages/documentation/src/Components/Header.stories.tsx
  12. +192 −2 packages/documentation/src/Components/Table.stories.tsx
  13. +59 −14 packages/documentation/src/Form/Toggle.stories.tsx
  14. +8 −20 packages/documentation/src/Icons/Icons.stories.tsx
  15. +4 −4 packages/documentation/src/Styles/DarkMode.stories.tsx
  16. +70 −0 packages/ui-components/CHANGELOG.md
  17. +3 −3 packages/ui-components/package.json
  18. +0 −16 packages/ui-components/src/common/__tests__/utilities.test.tsx
  19. +0 −16 packages/ui-components/src/common/utilities.ts
  20. +1 −1 packages/ui-components/src/components/Anchor/Anchor.tsx
  21. +12 −23 packages/ui-components/src/components/Anchor/__tests__/Anchor.test.tsx
  22. +2 −6 packages/ui-components/src/components/Button/Button.tsx
  23. +2 −0 packages/ui-components/src/components/Button/ButtonIcon.tsx
  24. +34 −19 packages/ui-components/src/components/Button/ButtonLink.tsx
  25. +16 −15 packages/ui-components/src/components/Button/ButtonTypes.d.ts
  26. +30 −0 packages/ui-components/src/components/Button/__tests__/ButtonIcon.test.tsx
  27. +13 −30 packages/ui-components/src/components/Button/__tests__/ButtonLink.test.tsx
  28. +18 −4 packages/ui-components/src/components/Button/utilities.ts
  29. +4 −2 packages/ui-components/src/components/Menu/__tests__/Menu.test.tsx
  30. +57 −0 packages/ui-components/src/components/Table/Table.tsx
  31. +50 −0 packages/ui-components/src/components/Table/TableTypes.d.ts
  32. +76 −0 packages/ui-components/src/components/Table/__tests__/Table.test.tsx
  33. +5 −0 packages/ui-components/src/components/Table/utilities.ts
  34. +4 −2 packages/ui-components/src/components/index.ts
  35. +97 −0 packages/ui-components/src/components/private/ButtonSort.tsx
  36. +9 −0 packages/ui-components/src/components/private/ButtonSortTypes.d.ts
  37. +374 −0 packages/ui-components/src/components/private/__tests__/ButtonSort.test.tsx
  38. +200 −0 packages/ui-components/stats/stats.json
  39. +14 −0 packages/ui-form/CHANGELOG.md
  40. +1 −1 packages/ui-form/package.json
  41. +2 −0 packages/ui-form/src/components/Toggle/Toggle.tsx
  42. +5 −0 packages/ui-form/src/components/Toggle/ToggleTypes.d.ts
  43. +4 −7 packages/ui-form/src/components/Toggle/__tests__/Toggle.test.tsx
  44. +18 −7 packages/ui-form/src/components/Toggle/utilities.ts
  45. +28 −0 packages/ui-form/stats/stats.json
  46. +21 −0 packages/ui-icons/CHANGELOG.md
  47. +1 −1 packages/ui-icons/lib/buildIcons.js
  48. +15 −1 packages/ui-icons/lib/icons/config.json
  49. +4 −1 packages/ui-icons/lib/icons/svg/address-card.svg
  50. +4 −0 packages/ui-icons/lib/icons/svg/arrow-down-arrow-up.svg
  51. +4 −0 packages/ui-icons/lib/icons/svg/arrow-down-wide-short.svg
  52. +2 −2 packages/ui-icons/lib/icons/svg/arrow-down.svg
  53. +2 −2 packages/ui-icons/lib/icons/svg/arrow-left.svg
  54. +2 −2 packages/ui-icons/lib/icons/svg/arrow-right.svg
  55. +4 −1 packages/ui-icons/lib/icons/svg/arrow-up-left-from-circle.svg
  56. +4 −0 packages/ui-icons/lib/icons/svg/arrow-up-short-wide.svg
  57. +2 −2 packages/ui-icons/lib/icons/svg/arrow-up.svg
  58. +2 −2 packages/ui-icons/lib/icons/svg/brightness.svg
  59. +4 −1 packages/ui-icons/lib/icons/svg/chart-simple.svg
  60. +4 −1 packages/ui-icons/lib/icons/svg/circle-info.svg
  61. +2 −2 packages/ui-icons/lib/icons/svg/circle-star.svg
  62. +4 −1 packages/ui-icons/lib/icons/svg/clock-rotate-left.svg
  63. +4 −1 packages/ui-icons/lib/icons/svg/clone.svg
  64. +4 −1 packages/ui-icons/lib/icons/svg/eye-slash.svg
  65. +4 −1 packages/ui-icons/lib/icons/svg/eye.svg
  66. +4 −1 packages/ui-icons/lib/icons/svg/face-smile.svg
  67. +4 −1 packages/ui-icons/lib/icons/svg/pen-to-square.svg
  68. +2 −2 packages/ui-icons/lib/icons/svg/plus.svg
  69. +4 −1 packages/ui-icons/lib/icons/svg/square-check.svg
  70. +4 −1 packages/ui-icons/lib/icons/svg/trash-can.svg
  71. +4 −1 packages/ui-icons/lib/icons/svg/window-restore.svg
  72. +1 −1 packages/ui-icons/package.json
  73. +2 −3 packages/ui-icons/src/components/Icons/IconAdd.tsx
  74. +2 −6 packages/ui-icons/src/components/Icons/IconBack.tsx
  75. +2 −6 packages/ui-icons/src/components/Icons/IconBrightness.tsx
  76. +2 −6 packages/ui-icons/src/components/Icons/IconChart.tsx
  77. +1 −1 packages/ui-icons/src/components/Icons/IconClose.tsx
  78. +2 −6 packages/ui-icons/src/components/Icons/IconCopied.tsx
  79. +2 −6 packages/ui-icons/src/components/Icons/IconCopy.tsx
  80. +2 −6 packages/ui-icons/src/components/Icons/IconDelete.tsx
  81. +2 −6 packages/ui-icons/src/components/Icons/IconDown.tsx
  82. +2 −6 packages/ui-icons/src/components/Icons/IconEdit.tsx
  83. +1 −1 packages/ui-icons/src/components/Icons/IconGitHub.tsx
  84. +2 −6 packages/ui-icons/src/components/Icons/IconHide.tsx
  85. +2 −6 packages/ui-icons/src/components/Icons/IconHistory.tsx
  86. +2 −6 packages/ui-icons/src/components/Icons/IconInfo.tsx
  87. +2 −6 packages/ui-icons/src/components/Icons/IconNext.tsx
  88. +2 −6 packages/ui-icons/src/components/Icons/IconPrevious.tsx
  89. +2 −6 packages/ui-icons/src/components/Icons/IconProfile.tsx
  90. +2 −6 packages/ui-icons/src/components/Icons/IconRestore.tsx
  91. +1 −1 packages/ui-icons/src/components/Icons/IconSettings.tsx
  92. +2 −6 packages/ui-icons/src/components/Icons/IconShow.tsx
  93. +45 −0 packages/ui-icons/src/components/Icons/IconSort.tsx
  94. +45 −0 packages/ui-icons/src/components/Icons/IconSortDown.tsx
  95. +45 −0 packages/ui-icons/src/components/Icons/IconSortUp.tsx
  96. +4 −10 packages/ui-icons/src/components/Icons/IconStarInCircle.tsx
  97. +2 −6 packages/ui-icons/src/components/Icons/IconUp.tsx
  98. +2 −6 packages/ui-icons/src/components/Icons/IconUser.tsx
  99. +28 −1 packages/ui-icons/src/components/Icons/__tests__/Icons.test.tsx
  100. +6 −0 packages/ui-icons/src/components/index.ts
  101. +7 −0 packages/ui-private/CHANGELOG.md
  102. +2 −2 packages/ui-private/package.json
  103. +7 −0 packages/ui-styles/CHANGELOG.md
  104. +1 −1 packages/ui-styles/package.json
  105. +8 −7 packages/ui-styles/src/plugins/tailwindcss/components/textArea.ts
  106. +6 −6 pnpm-lock.yaml
10 changes: 5 additions & 5 deletions .release-please-manifest.json
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
{
"packages/eslint-plugin-client": "1.0.2",
"packages/ui-components": "5.14.3",
"packages/ui-components": "5.18.1",
"packages/ui-hooks": "2.2.0",
"packages/ui-system": "1.3.0",
"packages/ui-private": "1.4.1",
"packages/ui-icons": "1.5.0",
"packages/ui-styles": "1.8.2",
"packages/ui-form": "1.2.0"
"packages/ui-private": "1.4.2",
"packages/ui-icons": "1.8.0",
"packages/ui-styles": "1.8.3",
"packages/ui-form": "1.3.0"
}
11 changes: 11 additions & 0 deletions examples/with-vite/nodemon.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"watch": [
"tailwind.config.js",
"src/**/*.*",
"../../packages/ui-components/src/**/*.*",
"../../packages/ui-components/lib/**/*.*",
"../../packages/ui-styles/src/**/*.*",
"../../packages/ui-form/src/**/*.*",
"../../packages/ui-icons/src/**/*.*"
]
}
4 changes: 2 additions & 2 deletions examples/with-vite/package.json
Original file line number Diff line number Diff line change
@@ -5,10 +5,10 @@
"type": "module",
"scripts": {
"clean": "rimraf dist",
"dev": "vite",
"dev": "nodemon",
"build": "tsc && vite build",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"preview": "vite preview"
"start": "vite"
},
"dependencies": {
"@versini/ui-components": "workspace:../../packages/ui-components",
8 changes: 4 additions & 4 deletions examples/with-vite/src/main.tsx
Original file line number Diff line number Diff line change
@@ -92,14 +92,14 @@ module.exports = {
<Button>Button</Button>
</div>
<div className="mb-2 flex flex-wrap gap-2">
<Anchor link="https://www.google.com">Anchor as a button</Anchor>
<Anchor link="https://www.google.com">
<Anchor href="https://www.google.com">Anchor as a button</Anchor>
<Anchor href="https://www.google.com">
Anchor as a button lorem ipsum
</Anchor>
<Anchor link="https://www.google.com">
<Anchor href="https://www.google.com">
Anchor as a button lorem ipsum dolor
</Anchor>
<Anchor link="https://www.google.com">
<Anchor href="https://www.google.com">
Anchor as a button lorem ipsum dolor sit amet
</Anchor>
</div>
11 changes: 11 additions & 0 deletions examples/with-webpack/nodemon.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
{
"watch": [
"tailwind.config.js",
"src/**/*.*",
"../../packages/ui-components/src/**/*.*",
"../../packages/ui-components/lib/**/*.*",
"../../packages/ui-styles/src/**/*.*",
"../../packages/ui-form/src/**/*.*",
"../../packages/ui-icons/src/**/*.*"
]
}
5 changes: 3 additions & 2 deletions examples/with-webpack/package.json
Original file line number Diff line number Diff line change
@@ -6,8 +6,9 @@
"clean": "rimraf dist",
"build:js": "webpack --mode=production",
"build": "npm run clean && npm run build:js",
"dev": "webpack serve --mode=development",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0"
"dev": "nodemon",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
"start": "webpack serve --mode=development"
},
"dependencies": {
"@versini/ui-components": "workspace:../../packages/ui-components",
8 changes: 4 additions & 4 deletions examples/with-webpack/src/main.tsx
Original file line number Diff line number Diff line change
@@ -92,14 +92,14 @@ module.exports = {
<Button>Button</Button>
</div>
<div className="mb-2 flex flex-wrap gap-2">
<Anchor link="https://www.google.com">Anchor as a button</Anchor>
<Anchor link="https://www.google.com">
<Anchor href="https://www.google.com">Anchor as a button</Anchor>
<Anchor href="https://www.google.com">
Anchor as a button lorem ipsum
</Anchor>
<Anchor link="https://www.google.com">
<Anchor href="https://www.google.com">
Anchor as a button lorem ipsum dolor
</Anchor>
<Anchor link="https://www.google.com">
<Anchor href="https://www.google.com">
Anchor as a button lorem ipsum dolor sit amet
</Anchor>
</div>
71 changes: 47 additions & 24 deletions packages/documentation/src/Components/Anchor.stories.tsx
Original file line number Diff line number Diff line change
@@ -6,40 +6,63 @@ export default {
meta: {
importName: "Anchor",
},
args: {
fullWidth: false,
mode: "system",
focusMode: "system",
raw: false,
href: "https://example.com",
noBorder: false,
size: "small",
noTruncate: false,
noNewWindowIcon: false,
},
argTypes: {
mode: {
options: ["dark", "light", "system", "alt-system"],
control: { type: "radio" },
},
focusMode: {
options: ["dark", "light", "system", "alt-system"],
control: { type: "radio" },
},
size: {
options: ["small", "medium", "large"],
control: { type: "radio" },
},
},
};

export const Basic: Story<any> = (args) => (
<div className="flex flex-wrap">
<div className="flex flex-wrap gap-2">
<Anchor {...args}>Anchor as a button</Anchor>
<Anchor {...args}>Anchor as a button lorem ipsum</Anchor>
<Anchor {...args}>Anchor as a button lorem ipsum dolor</Anchor>
<Anchor {...args}>Anchor as a button lorem ipsum dolor sit amet</Anchor>
</div>
);

Basic.args = {
fullWidth: false,
mode: "system",
focusMode: "system",
raw: false,
link: "https://www.google.com",
noBorder: false,
size: "small",
noTruncate: false,
spacing: { r: 2, b: 2 },
export const NewWindow: Story<any> = (args) => (
<div className="flex flex-wrap gap-2">
<Anchor {...args}>Anchor as a button</Anchor>
<Anchor {...args}>Anchor as a button lorem ipsum</Anchor>
<Anchor {...args}>Anchor as a button lorem ipsum dolor</Anchor>
<Anchor {...args}>Anchor as a button lorem ipsum dolor sit amet</Anchor>
</div>
);
NewWindow.args = {
target: "_blank",
};

Basic.argTypes = {
mode: {
options: ["dark", "light", "system", "alt-system"],
control: { type: "radio" },
},
focusMode: {
options: ["dark", "light", "system", "alt-system"],
control: { type: "radio" },
},
size: {
options: ["small", "medium", "large"],
control: { type: "radio" },
},
export const Truncate: Story<any> = (args) => (
<div className="flex flex-wrap gap-2">
<Anchor {...args}>Anchor as a button</Anchor>
<Anchor {...args}>Anchor as a button lorem ipsum</Anchor>
<Anchor {...args}>Anchor as a button lorem ipsum dolor</Anchor>
<Anchor {...args}>Anchor as a button lorem ipsum dolor sit amet</Anchor>
</div>
);

Truncate.args = {
className: "w-44 sm:w-52",
};
89 changes: 60 additions & 29 deletions packages/documentation/src/Components/Button.stories.tsx
Original file line number Diff line number Diff line change
@@ -6,15 +6,44 @@ export default {
meta: {
importName: "Button",
},
args: {
disabled: false,
fullWidth: false,
mode: "system",
focusMode: "system",
size: "medium",
raw: false,
noBorder: false,
variant: "primary",
noTruncate: false,
},
argTypes: {
mode: {
options: ["dark", "light", "system", "alt-system"],
control: { type: "radio" },
},
focusMode: {
options: ["dark", "light", "system", "alt-system"],
control: { type: "radio" },
},
size: {
options: ["small", "medium", "large"],
control: { type: "radio" },
},
variant: {
options: ["primary", "secondary", "danger"],
control: { type: "radio" },
},
},
};

export const Basic: Story<any> = (args) => {
return (
<>
<div className="flex flex-wrap gap-2">
<Button {...args}>Button</Button>
<Button {...args}>Button</Button>
<Button {...args}>Button</Button>
<Button {...args}>Button lorem ipsum</Button>
<Button {...args}>Button lorem ipsum dolor</Button>
<Button {...args}>Button lorem ipsum dolor sit amet</Button>
</div>

<p>
@@ -35,31 +64,33 @@ export const Basic: Story<any> = (args) => {
);
};

Basic.args = {
disabled: false,
fullWidth: false,
mode: "system",
focusMode: "system",
size: "medium",
raw: false,
noBorder: false,
variant: "primary",
export const Truncate: Story<any> = (args) => {
return (
<>
<div className="flex flex-wrap gap-2">
<Button {...args}>Button lorem ipsum</Button>
<Button {...args}>Button lorem ipsum dolor</Button>
<Button {...args}>Button lorem ipsum dolor sit amet</Button>
</div>

<p>
The following row is having the <code>variant</code> prop hard-coded:
</p>
<div className="flex flex-wrap gap-2">
<Button {...args} variant="primary">
Button lorem ipsum
</Button>
<Button {...args} variant="secondary">
Button lorem ipsum dolor
</Button>
<Button {...args} variant="danger">
Button lorem ipsum dolor sit amet
</Button>
</div>
</>
);
};
Basic.argTypes = {
mode: {
options: ["dark", "light", "system", "alt-system"],
control: { type: "radio" },
},
focusMode: {
options: ["dark", "light", "system", "alt-system"],
control: { type: "radio" },
},
size: {
options: ["small", "medium", "large"],
control: { type: "radio" },
},
variant: {
options: ["primary", "secondary", "danger"],
control: { type: "radio" },
},

Truncate.args = {
className: "w-44 sm:w-52",
};
5 changes: 5 additions & 0 deletions packages/documentation/src/Components/ButtonIcon.stories.tsx
Original file line number Diff line number Diff line change
@@ -81,8 +81,13 @@ export default {
noBackground: false,
size: "medium",
label: "some label",
align: "center",
},
argTypes: {
align: {
options: ["center", "left", "right"],
control: { type: "radio" },
},
mode: {
options: ["dark", "light", "system", "alt-system"],
control: { type: "radio" },
8 changes: 4 additions & 4 deletions packages/documentation/src/Components/Header.stories.tsx
Original file line number Diff line number Diff line change
@@ -131,14 +131,14 @@ const CommonTemplate = () => {
<Button>Button</Button>
</div>
<div className="mb-2 flex flex-wrap gap-2">
<Anchor link="https://www.google.com">Anchor as a button</Anchor>
<Anchor link="https://www.google.com">
<Anchor href="https://www.google.com">Anchor as a button</Anchor>
<Anchor href="https://www.google.com">
Anchor as a button lorem ipsum
</Anchor>
<Anchor link="https://www.google.com">
<Anchor href="https://www.google.com">
Anchor as a button lorem ipsum dolor
</Anchor>
<Anchor link="https://www.google.com">
<Anchor href="https://www.google.com">
Anchor as a button lorem ipsum dolor sit amet
</Anchor>
</div>
Loading