Skip to content

Commit

Permalink
feat: new Spinner
Browse files Browse the repository at this point in the history
  • Loading branch information
hextion committed Nov 18, 2024
1 parent d9a6a14 commit 2aff3a7
Show file tree
Hide file tree
Showing 47 changed files with 904 additions and 341 deletions.
20 changes: 20 additions & 0 deletions .changeset/cuddly-jeans-laugh.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
---
'@alfalab/core-components-spinner': major
'@alfalab/core-components-shared': minor
---

Крупное обновление Спиннера

* Обновленный вид спиннера.
* Добавлены новые пропсы для тонкой настройки внешнего вида:
- `preset` - преднастроенный вариант спиннера;
- `size` - теперь отвечает за размер кольца спиннера;
- `lineWidth` - толщина линии спиннера;
- `style` - позволяет регулировать отступы, цвет и т.п.
* Добавлен `codemod` для бесшовной миграции `Spinner`:
```bash
npx @alfalab/core-components-codemod --transformers=spinner --glob='src/**/*.tsx'
```
| Внимание |
|---|
| `codemod` может не работать в случаях использования [Spread Operator](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax#spread_in_object_literals) в коде. |
1 change: 1 addition & 0 deletions packages/action-button/src/Component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -150,6 +150,7 @@ export const ActionButton = forwardRef<HTMLAnchorElement | HTMLButtonElement, Ac
>
{showLoader ? (
<Spinner
preset={24}
dataTestId={getDataTestId(dataTestId, 'loader')}
visible={true}
className={cn(styles.loader, colorStyles[colors].loader)}
Expand Down
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 2 additions & 1 deletion packages/action-button/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
"rootDirs": ["src"],
"baseUrl": ".",
"paths": {
"@alfalab/core-components-*": ["../*/src"]
"@alfalab/core-components-*": ["../*/src"],
"@alfalab/core-components-spinner/*": ["../spinner/src/*"]
}
},
"references": [{ "path": "../spinner" }, { "path": "../shared" }]
Expand Down
68 changes: 36 additions & 32 deletions packages/button/src/__snapshots__/Component.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -311,36 +311,37 @@ Object {
href="https://some-url"
>
<svg
class="spinner component size-24 loader loader loader visible"
viewBox="0 0 24 24"
class="spinner component preset24 loader loader loader visible"
style="height: 20px; width: 20px;"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<mask
id=":r1:"
>
<circle
cx="12"
cy="12"
cx="50%"
cy="50%"
pathLength="360"
r="9"
stroke="#fff"
stroke-dasharray="268 16"
stroke-dasharray="263 97"
stroke-dashoffset="-7"
stroke-linecap="round"
stroke-width="2"
/>
</mask>
</defs>
<foreignobject
height="24"
height="20"
mask="url(#:r1:)"
width="24"
width="20"
x="0"
y="0"
>
<div
class="gradient"
style="transform: rotate(6deg);"
/>
</foreignobject>
</svg>
Expand All @@ -354,36 +355,37 @@ Object {
href="https://some-url"
>
<svg
class="spinner component size-24 loader loader loader visible"
viewBox="0 0 24 24"
class="spinner component preset24 loader loader loader visible"
style="height: 20px; width: 20px;"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<mask
id=":r1:"
>
<circle
cx="12"
cy="12"
cx="50%"
cy="50%"
pathLength="360"
r="9"
stroke="#fff"
stroke-dasharray="268 16"
stroke-dasharray="263 97"
stroke-dashoffset="-7"
stroke-linecap="round"
stroke-width="2"
/>
</mask>
</defs>
<foreignobject
height="24"
height="20"
mask="url(#:r1:)"
width="24"
width="20"
x="0"
y="0"
>
<div
class="gradient"
style="transform: rotate(6deg);"
/>
</foreignobject>
</svg>
Expand Down Expand Up @@ -454,36 +456,37 @@ Object {
type="button"
>
<svg
class="spinner component size-24 loader loader loader visible"
viewBox="0 0 24 24"
class="spinner component preset24 loader loader loader visible"
style="height: 20px; width: 20px;"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<mask
id=":r0:"
>
<circle
cx="12"
cy="12"
cx="50%"
cy="50%"
pathLength="360"
r="9"
stroke="#fff"
stroke-dasharray="268 16"
stroke-dasharray="263 97"
stroke-dashoffset="-7"
stroke-linecap="round"
stroke-width="2"
/>
</mask>
</defs>
<foreignobject
height="24"
height="20"
mask="url(#:r0:)"
width="24"
width="20"
x="0"
y="0"
>
<div
class="gradient"
style="transform: rotate(6deg);"
/>
</foreignobject>
</svg>
Expand All @@ -497,36 +500,37 @@ Object {
type="button"
>
<svg
class="spinner component size-24 loader loader loader visible"
viewBox="0 0 24 24"
class="spinner component preset24 loader loader loader visible"
style="height: 20px; width: 20px;"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<defs>
<mask
id=":r0:"
>
<circle
cx="12"
cy="12"
cx="50%"
cy="50%"
pathLength="360"
r="9"
stroke="#fff"
stroke-dasharray="268 16"
stroke-dasharray="263 97"
stroke-dashoffset="-7"
stroke-linecap="round"
stroke-width="2"
/>
</mask>
</defs>
<foreignobject
height="24"
height="20"
mask="url(#:r0:)"
width="24"
width="20"
x="0"
y="0"
>
<div
class="gradient"
style="transform: rotate(6deg);"
/>
</foreignobject>
</svg>
Expand Down
1 change: 1 addition & 0 deletions packages/button/src/components/base-button/Component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,7 @@ export const BaseButton = React.forwardRef<

{showLoader && (
<Spinner
preset={24}
dataTestId={getDataTestId(dataTestId, 'loader')}
visible={true}
className={cn(
Expand Down
3 changes: 2 additions & 1 deletion packages/button/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
"rootDirs": ["src"],
"baseUrl": ".",
"paths": {
"@alfalab/core-components-*": ["../*/src"]
"@alfalab/core-components-*": ["../*/src"],
"@alfalab/core-components-spinner/*": ["../spinner/src/*"]
}
},
"references": [{ "path": "../spinner" }, { "path": "../shared" }, { "path": "../mq" }]
Expand Down
20 changes: 20 additions & 0 deletions packages/codemod/src/spinner/__testfixtures__/transform.input.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from 'react';

import { Spinner } from '@alfalab/core-components/spinner';

export const Component = () => {
const someProps = { size: 48 };

return (
<React.Fragment>
<Spinner size='xs' />
<Spinner size='s' />
<Spinner size='m' />
<Spinner size={16} />
<Spinner size={24} />
<Spinner size={48} />
<Spinner visible={true} />
<Spinner {...someProps} />
</React.Fragment>
);
};
20 changes: 20 additions & 0 deletions packages/codemod/src/spinner/__testfixtures__/transform.output.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from 'react';

import { Spinner } from '@alfalab/core-components/spinner';

export const Component = () => {
const someProps = { size: 48 };

return (
<React.Fragment>
<Spinner preset={16} />
<Spinner preset={24} />
<Spinner preset={48} />
<Spinner preset={16} />
<Spinner preset={24} />
<Spinner preset={48} />
<Spinner visible={true} />
<Spinner {...someProps} />
</React.Fragment>
);
};
6 changes: 6 additions & 0 deletions packages/codemod/src/spinner/__tests__/transform.test.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
// eslint-disable-next-line prefer-destructuring
const defineTest = require('jscodeshift/dist/testUtils').defineTest;

jest.autoMockOff();

defineTest(__dirname, 'transform', null, 'transform', { parser: 'tsx' });
Loading

0 comments on commit 2aff3a7

Please sign in to comment.