Skip to content

Commit

Permalink
fix: updated the view of stories, fixed the styles export, fixed comm…
Browse files Browse the repository at this point in the history 
…ents
  • Loading branch information
@molok0aleks99
molok0aleks99 committed Feb 19, 2025
1 parent 3b8b591 commit 0e073ed
Show file tree
Hide file tree
Showing 17 changed files with 364 additions and 388 deletions.
19 changes: 19 additions & 0 deletions .storybook/styles/storybook.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,26 @@
src: local("Arial");
}

/* should be main instead of html or body, otherwise chrome devtools behaves weirdly */
main {
overflow: clip;
}

html,
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
scroll-behavior: smooth;
font-family: "Manrope", "Manrope-fallback";
background: var(--lido-color-background);
}

#storybook-root {
width: 100%;
background: var(--lido-color-background);
}

.docs-story>div>div {
width: 100%;
background: var(--lido-color-background);
}
28 changes: 15 additions & 13 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,16 +12,16 @@ For release a new version of the library you need to create a commit with `!` li

## Getting Started

Simply add `lido-ui` to your dependencies:
1. Simply add `lido-ui` to your dependencies:

```bash
yarn add @lidofinance/lido-ui
```

Then, import Lido theme provider and wrap your components in `_app.js`:
2. Import Lido theme provider and wrap your components in `_app.js`:

```js
import { ThemeProvider } from '../lido-ui'
import { ThemeProvider } from '@lidofinance/lido-ui'

function App({ Component }) {
return (
Expand All @@ -32,12 +32,23 @@ function App({ Component }) {
}
```

3. Import styles into your `_app.js` file:
```tsx
import '@lidofinance/lido-ui/index.css';
```

4. To use typography across your application, you need to import the provided CSS styles for typography.
Insert the following line at the top of `_app.js` file to import the typography styles
```tsx
import '@lidofinance/lido-ui/styles/typography.css';
```

## Usage

Simply import any components and use in your project:

```js
import { Button } from '../lido-ui'
import { Button } from '@lidofinance/lido-ui'
```

## Developing
Expand Down Expand Up @@ -77,12 +88,3 @@ yarn dev
Packages are automatically published to npm when you push to master. The publication is based on [semantic-release](https://github.com/semantic-release/semantic-release) and [@qiwi/multi-semantic-release](https://github.com/qiwi/multi-semantic-release).

For correct version detection, please follow the [conventional commit format](https://www.conventionalcommits.org/en/v1.0.0/).

## Typography styles
To use typography across your application, you need to import the provided CSS styles for typography.
How to Do It:
- Locate Your Main Application File (`_app.tsx`)
- Insert the following line at the top of your main application file to import the typography styles:
```tsx
import '@lidofinance/lido-ui/styles/typography.css';
```
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -113,6 +113,7 @@
"next": "^14.0.0",
"postcss": "^8.4.27",
"postcss-custom-media": "^11.0.5",
"postcss-import": "^16.1.0",
"postcss-loader": "^8.1.1",
"postcss-nested": "^7.0.2",
"prettier": "^3.0.1",
Expand Down
238 changes: 53 additions & 185 deletions packages/button/Button.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -69,205 +69,73 @@ export const AllStates: StoryFn<ButtonProps> = () => {
'transparent',
]
const sizes: ButtonProps['size'][] = ['s', 'm', 'l', 'xl']
const shapes: ButtonProps['shape'][] = ['oval', 'circle']
const textStyles: ButtonProps['textStyle'][] = [
'normal',
'semibold',
'subhead',
'description',
]
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '32px' }}>
<div>
<h3>Default Buttons</h3>
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
{colors.map((color) => (
<Button
key={`default-${color}`}
color={color}
size='m'
shape='oval'
textStyle='semibold'
icon={undefined}
withArrow={false}
loading={false}
>
{color}
</Button>
))}
</div>
</div>
<div>
<h3>Disabled Buttons</h3>
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
{colors.map((color) => (
<Button
key={`disabled-${color}`}
color={color}
size='m'
shape='oval'
textStyle='semibold'
disabled={true}
icon={undefined}
withArrow={false}
loading={false}
loaderVariant='transparent'
>
{color}
</Button>
))}
</div>
</div>

<div>
<h3>Loading Buttons</h3>
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
{colors.map((color) => (
<Button
key={`loading-${color}`}
color={color}
size='m'
shape='oval'
textStyle='semibold'
disabled={false}
icon={undefined}
withArrow={false}
loading={true}
loaderVariant='opaque'
>
{color}
</Button>
))}
</div>
</div>

<div>
<h3>Buttons with Icon</h3>
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
{colors.map((color) => (
<Button
key={`icon-${color}`}
color={color}
size='m'
shape='oval'
textStyle='semibold'
disabled={false}
icon={<Eth />}
withArrow={false}
loading={false}
loaderVariant='transparent'
>
{color}
</Button>
))}
</div>
</div>

<div>
<h3>Buttons with Arrow</h3>
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
{colors.map((color) => (
<Button
key={`arrow-${color}`}
color={color}
size='m'
shape='oval'
textStyle='semibold'
disabled={false}
icon={undefined}
withArrow={true}
loading={false}
loaderVariant='transparent'
>
{color}
</Button>
))}
</div>
</div>
const gridContainerStyle: React.CSSProperties = {
display: 'grid',
gridTemplateColumns: 'repeat(auto-fit, minmax(300px, 1fr))',
gap: '32px',
}

<div>
<h3>Buttons with Icon and Arrow</h3>
<div style={{ display: 'flex', gap: '16px', flexWrap: 'wrap' }}>
{colors.map((color) => (
<Button
key={`icon-arrow-${color}`}
color={color}
size='m'
shape='oval'
textStyle='semibold'
disabled={false}
icon={<Eth />}
withArrow={true}
loading={false}
loaderVariant='transparent'
>
{color}
</Button>
))}
</div>
</div>
return (
<div style={gridContainerStyle}>
{sizes.map((size) => (
<div
key={size}
style={{ padding: '16px', border: '1px solid #eaeaea' }}
>
<h3>Size: {size}</h3>

{colors.map((color) => (
<div key={color}>
<h3>Color: {color}</h3>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
{sizes.map((size) => (
<div key={size} style={{ marginBottom: '16px' }}>
<h4>Size: {size}</h4>
<div style={{ display: 'flex', flexWrap: 'wrap', gap: '16px' }}>
{shapes.map((shape) => (
<div key={shape}>
<h5>Shape: {shape}</h5>
<div
style={{
display: 'flex',
gap: '8px',
flexWrap: 'wrap',
}}
>
{textStyles.map((textStyle, index) => (
<>
{shape === 'circle' && index === 0 && (
<Button
key={`${color}-${size}-${shape}-${textStyle}`}
color={color}
size={size}
shape={shape}
textStyle={textStyle}
disabled={false}
icon={<Eth />}
withArrow={false}
loading={false}
loaderVariant='transparent'
>
{`${textStyle}`}
</Button>
)}
{shape !== 'circle' && (
<Button
key={`${color}-${size}-${shape}-${textStyle}`}
color={color}
size={size}
shape={shape}
textStyle={textStyle}
disabled={false}
icon={<Eth />}
withArrow={false}
loading={false}
loaderVariant='transparent'
>
{`${textStyle}`}
</Button>
)}
</>
))}
</div>
</div>
<div>
{colors.map((color) => (
<div key={color} style={{ marginBottom: '16px' }}>
<h5>Color: {color}</h5>
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
{textStyles.map((textStyle) => (
<Button
key={`oval-${size}-${color}-${textStyle}`}
color={color}
size={size}
shape='oval'
textStyle={textStyle}
disabled={false}
icon={undefined}
withArrow={false}
loading={false}
loaderVariant='transparent'
>
{textStyle}
</Button>
))}
</div>
</div>
))}
</div>

<div style={{ marginBottom: '16px' }}>
<h5>Shape: Circle</h5>
<div style={{ display: 'flex', gap: '8px', flexWrap: 'wrap' }}>
<Button
key={`circle-${size}`}
color='default'
size={size}
shape='circle'
textStyle='normal'
disabled={false}
icon={<Eth />}
withArrow={false}
loading={false}
loaderVariant='transparent'
>
Circle
</Button>
</div>
</div>
</div>
))}
</div>
Expand Down
4 changes: 0 additions & 4 deletions packages/button/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -60,10 +60,6 @@ export const Button = forwardRef(
) => {
const isCircle = shape === 'circle'

if (isCircle) {
icon
}

const content = (
<>
<WaveLoader
Expand Down
Loading

0 comments on commit 0e073ed

Please sign in to comment.