Skip to content

Commit

Permalink
feat: new Spinner
Browse files Browse the repository at this point in the history
  • Loading branch information
hextion committed Sep 4, 2024
1 parent 5999356 commit db158d7
Show file tree
Hide file tree
Showing 38 changed files with 881 additions and 327 deletions.
25 changes: 25 additions & 0 deletions .changeset/cuddly-jeans-laugh.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,25 @@
---
'@alfalab/core-components-spinner': major
'@alfalab/core-components-action-button': patch
'@alfalab/core-components-button': patch
'@alfalab/core-components-confirmation': patch
'@alfalab/core-components-custom-button': patch
'@alfalab/core-components-file-upload-item': patch
'@alfalab/core-components-shared': patch
---

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

* Обновленный вид спиннера.
* Добавлены новые пропсы для тонкой настройки внешнего вида:
- `size` - теперь отвечает за размер кольца спиннера;
- `lineWidth` - толщина линии спиннера;
- `style` - позволяет регулировать отступы, цвет и т.п.
* Добавлен преднастроенный вариант спиннера `Spinner.Preset`.
* Добавлен `codemod` для бесшовной миграции со старого `Spinner` на `Spinner.Preset`:
```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) в коде. |
2 changes: 1 addition & 1 deletion packages/action-button/src/Component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -149,7 +149,7 @@ export const ActionButton = forwardRef<HTMLAnchorElement | HTMLButtonElement, Ac
)}
>
{showLoader ? (
<Spinner
<Spinner.Preset
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.
60 changes: 32 additions & 28 deletions packages/button/src/__snapshots__/Component.test.tsx.snap
Original file line number Diff line number Diff line change
Expand Up @@ -312,35 +312,36 @@ Object {
>
<svg
class="spinner component size-24 loader loader loader visible"
viewBox="0 0 24 24"
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 @@ -355,35 +356,36 @@ Object {
>
<svg
class="spinner component size-24 loader loader loader visible"
viewBox="0 0 24 24"
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 @@ -455,35 +457,36 @@ Object {
>
<svg
class="spinner component size-24 loader loader loader visible"
viewBox="0 0 24 24"
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 @@ -498,35 +501,36 @@ Object {
>
<svg
class="spinner component size-24 loader loader loader visible"
viewBox="0 0 24 24"
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
2 changes: 1 addition & 1 deletion packages/button/src/components/base-button/Component.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -165,7 +165,7 @@ export const BaseButton = React.forwardRef<
)}

{showLoader && (
<Spinner
<Spinner.Preset
dataTestId={getDataTestId(dataTestId, 'loader')}
visible={true}
className={cn(
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 = {};

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 = {};

return (
<React.Fragment>
<Spinner.Preset preset={16} />
<Spinner.Preset preset={24} />
<Spinner.Preset preset={48} />
<Spinner.Preset preset={16} />
<Spinner.Preset preset={24} />
<Spinner.Preset preset={48} />
<Spinner.Preset visible={true} />
<Spinner.Preset {...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 db158d7

Please sign in to comment.