@beydesign/storybook 0.0.30 → 0.0.31

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 (4) hide show
  1. package/dist/stories/CreditsCard.js +11 -3
  2. package/dist/stories/NavItem.js +11 -7
  3. package/dist/stories/Sidebar.js +8 -2
  4. package/package.json +1 -1
package/dist/stories/CreditsCard.js CHANGED
@@ -18,7 +18,10 @@ const StyledCard = styled.div `
18
18
  ? 'var(--spacing-tokens-size-in-px-spacing-spacing-md)'
19
19
  : '8px var(--spacing-tokens-size-in-px-spacing-spacing-lg)'};
20
20
  opacity: 1;
21
- transition: all 0.2s ease;
21
+ transition:
22
+ padding 0.3s ease-in-out,
23
+ width 0.3s ease-in-out,
24
+ height 0.3s ease-in-out;
22
25
  width: 100%;
23
26
  height: auto;
24
27
  position: relative;
@@ -28,14 +31,19 @@ const CreditRow = styled.div `
28
31
  justify-content: ${({ $collapsed }) => $collapsed ? 'center' : 'space-between'};
29
32
  align-items: center;
30
33
  width: 100%;
34
+ transition: justify-content 0.3s ease-in-out;
35
+ `;
36
+ const TextWrapper = styled.span `
37
+ display: inline-block;
38
+ white-space: nowrap;
31
39
  `;
32
40
  export const CreditsCard = ({ size = CreditsCardSize.Expanded, className, maxCredits = 1, usedCredits = 0, onUpgradeClick, creditInfoText = '1 Credit = 1 min video', }) => {
33
41
  const isCollapsed = size === CreditsCardSize.Collapsed;
34
42
  return (_jsxs(StyledCard, { "$collapsed": isCollapsed, "$size": size, className: className, children: [!isCollapsed &&
35
43
  maxCredits !== undefined &&
36
- usedCredits !== undefined && (_jsxs(_Fragment, { children: [_jsxs(CreditRow, { children: [_jsxs(Box, { gap: '2px', display: "flex", flexDirection: "row", children: [_jsx(Typography, { text: "My Credits: ", size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)" }), _jsx(Typography, { text: `${usedCredits}/`, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)" }), _jsx(Typography, { text: `${maxCredits}`, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)" })] }), _jsx(Box, { onClick: (e) => e.stopPropagation(), children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TetriaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => {
44
+ usedCredits !== undefined && (_jsxs(_Fragment, { children: [_jsxs(CreditRow, { children: [_jsxs(Box, { gap: "2px", display: "flex", flexDirection: "row", children: [_jsx(TextWrapper, { children: _jsx(Typography, { text: "My Credits: ", size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)" }) }), _jsx(TextWrapper, { children: _jsx(Typography, { text: `${usedCredits}/`, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)" }) }), _jsx(TextWrapper, { children: _jsx(Typography, { text: `${maxCredits}`, size: TypographySize.TextS, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-paragraph)" }) })] }), _jsx(Box, { onClick: (e) => e.stopPropagation(), children: _jsx(MainButton, { text: "Upgrade", hierarchy: ButtonHierarchy.TetriaryColor, size: ButtonSize.md, style: { padding: '0' }, onClick: () => {
37
45
  if (onUpgradeClick) {
38
46
  onUpgradeClick();
39
47
  }
40
- } }) })] }), _jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(Typography, { text: creditInfoText, size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)" }) }) })] })), isCollapsed && maxCredits !== undefined && usedCredits !== undefined && (_jsx(_Fragment, { children: _jsx(CreditRow, { "$collapsed": true, children: _jsx(Box, { display: "flex", flexDirection: "row", gap: "2px", children: _jsx(Typography, { text: `${usedCredits}`, size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)" }) }) }) }))] }));
48
+ } }) })] }), _jsx(CreditRow, { style: { justifyContent: 'end' }, children: _jsx(Box, { display: "flex", flexDirection: "row", children: _jsx(TextWrapper, { children: _jsx(Typography, { text: creditInfoText, size: TypographySize.TextXS, weight: TypographyWeight.Regular, color: "var(--colors-light-text-text-subtle)" }) }) }) })] })), isCollapsed && maxCredits !== undefined && usedCredits !== undefined && (_jsx(_Fragment, { children: _jsx(CreditRow, { "$collapsed": true, children: _jsx(Box, { display: "flex", flexDirection: "row", gap: "2px", children: _jsx(TextWrapper, { children: _jsx(Typography, { text: `${usedCredits}`, size: TypographySize.TextM, weight: TypographyWeight.Medium, color: "var(--colors-light-text-text-title)" }) }) }) }) }))] }));
41
49
  };
package/dist/stories/NavItem.js CHANGED
@@ -12,12 +12,12 @@ const StyledNavItem = styled.div `
12
12
  flex-direction: row;
13
13
  align-items: center;
14
14
  gap: 12px;
15
- padding: ${({ $size }) => $size === NavItemSize.Collapsed ? '0px 28px 0px 0px' : '0px 60px 0px 0px'};
15
+ padding: ${({ $size }) => $size === NavItemSize.Collapsed ? '0px 22px 0px 0px' : '0px 60px 0px 0px'};
16
16
  border-radius: 8px;
17
17
  cursor: ${({ $state }) => $state === NavItemState.Disabled ? 'not-allowed' : 'pointer'};
18
18
  opacity: ${({ $state }) => ($state === NavItemState.Disabled ? 0.5 : 1)};
19
- transition: color 0.2s ease;
20
- justify-content: ${({ $size }) => $size === NavItemSize.Collapsed ? 'space-between' : 'flex-start'};
19
+ transition: padding 0.3s ease-in-out;
20
+ justify-content: ${({ $size }) => $size === NavItemSize.Collapsed ? 'center' : 'flex-start'};
21
21
 
22
22
  &:hover {
23
23
  .nav-item-icon {
@@ -39,7 +39,11 @@ const IconWrapper = styled.span `
39
39
  color: ${({ $state }) => $state === NavItemState.Active
40
40
  ? 'var(--colors-light-background-bg-brand)'
41
41
  : 'var(--primitives-desktop-primary-gray-500)'};
42
- transition: color 0.2s ease;
42
+ transition: color 0.3s ease-in-out;
43
+ `;
44
+ const TextWrapper = styled.span `
45
+ display: inline-block;
46
+ white-space: nowrap;
43
47
  `;
44
48
  export const NavItem = ({ text, icon, state = NavItemState.Default, size = NavItemSize.Expanded, showBadge = false, onClick, className, }) => {
45
49
  const handleClick = () => {
@@ -50,11 +54,11 @@ export const NavItem = ({ text, icon, state = NavItemState.Default, size = NavIt
50
54
  const isCollapsed = size === NavItemSize.Collapsed;
51
55
  return (_jsxs(StyledNavItem, { "$state": state, "$size": size, onClick: handleClick, className: className, title: isCollapsed ? text : undefined, children: [_jsx("svg", { width: "5", height: "36", viewBox: "0 0 5 36", fill: state === NavItemState.Active
52
56
  ? 'var(--colors-light-background-bg-brand)'
53
- : 'transparent', xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M0 0C2.76142 0 5 2.23858 5 5V31C5 33.7614 2.76142 36 0 36V0Z" }) }), _jsxs(Box, { display: "flex", alignItems: 'center', gap: '8px', children: [_jsx(IconWrapper, { className: "nav-item-icon", "$state": state, children: getIconComponent(icon, {
57
+ : 'transparent', xmlns: "http://www.w3.org/2000/svg", style: { transition: 'fill 0.3s ease-in-out' }, children: _jsx("path", { d: "M0 0C2.76142 0 5 2.23858 5 5V31C5 33.7614 2.76142 36 0 36V0Z" }) }), _jsxs(Box, { display: "flex", alignItems: "center", gap: "8px", sx: { transition: 'gap 0.3s ease-in-out' }, children: [_jsx(IconWrapper, { className: "nav-item-icon", "$state": state, children: getIconComponent(icon, {
54
58
  size: 20,
55
- }) }), !isCollapsed && (_jsx("span", { className: "nav-item-text", children: _jsx(Typography, { text: text, size: TypographySize.TextS, weight: state === NavItemState.Active
59
+ }) }), !isCollapsed && (_jsx(TextWrapper, { className: "nav-item-text", children: _jsx(Typography, { text: text, size: TypographySize.TextS, weight: state === NavItemState.Active
56
60
  ? TypographyWeight.Medium
57
61
  : TypographyWeight.Regular, className: "nav-item-text", color: state === NavItemState.Active
58
62
  ? 'var(--colors-light-background-bg-brand)'
59
- : 'var(--colors-light-text-text-subtle)' }) })), showBadge && (_jsx(Badge, { size: BadgeSize.xs, icon: "ClockCountdown", text: isCollapsed ? '' : 'Coming Soon', color: BadgeColor.Default }))] })] }));
63
+ : 'var(--colors-light-text-text-subtle)' }) })), showBadge && !isCollapsed && (_jsx(Badge, { size: BadgeSize.xs, icon: "ClockCountdown", text: "Coming Soon", color: BadgeColor.Default }))] })] }));
60
64
  };
package/dist/stories/Sidebar.js CHANGED
@@ -20,8 +20,8 @@ const StyledSidebar = styled.div `
20
20
  background-color: var(--colors-light-background-bg-surface);
21
21
  border-right: 1px solid var(--colors-light-border-border-default);
22
22
  height: 100vh;
23
- width: 100%;
24
- transition: width 0.3s ease;
23
+ width: ${({ $size }) => ($size === SidebarSize.Expanded ? 'auto' : '64px')};
24
+ transition: width 0.3s ease-in-out;
25
25
  overflow-x: hidden;
26
26
  overflow-y: scroll;
27
27
  position: relative;
@@ -40,6 +40,7 @@ const LogoContainer = styled.div `
40
40
  margin-bottom: 32px;
41
41
  min-height: 38px;
42
42
  height: 38px;
43
+ transition: all 0.3s ease-in-out;
43
44
  `;
44
45
  const ToggleButtonWrapper = styled.div `
45
46
  position: absolute;
@@ -50,6 +51,7 @@ const ToggleButtonWrapper = styled.div `
50
51
  visibility: visible;
51
52
  filter: drop-shadow(0px 2px 4px rgba(29, 20, 40, 0.08));
52
53
  contain: layout;
54
+ transition: transform 0.3s ease-in-out;
53
55
  `;
54
56
  const NavItemsContainer = styled.div `
55
57
  display: flex;
@@ -61,6 +63,7 @@ const NavSection = styled.div `
61
63
  display: flex;
62
64
  flex-direction: column;
63
65
  gap: 8px;
66
+ transition: all 0.3s ease-in-out;
64
67
  `;
65
68
  const SectionTitle = styled.div `
66
69
  color: var(--colors-light-text-text-subtle);
@@ -68,6 +71,7 @@ const SectionTitle = styled.div `
68
71
  display: ${({ $size }) => $size === SidebarSize.Collapsed ? 'flex' : 'block'};
69
72
  opacity: ${({ $size }) => ($size === SidebarSize.Collapsed ? 0 : 0.5)};
70
73
  justify-content: ${({ $size }) => $size === SidebarSize.Collapsed ? 'center' : 'flex-start'};
74
+ transition: all 0.3s ease-in-out;
71
75
  `;
72
76
  const Separator = styled.div `
73
77
  height: 0.31px;
@@ -75,9 +79,11 @@ const Separator = styled.div `
75
79
  padding: 0 28px;
76
80
  margin: 10px;
77
81
  opacity: 0.05;
82
+ transition: all 0.3s ease-in-out;
78
83
  `;
79
84
  const BottomContainer = styled.div `
80
85
  margin-top: 16px;
86
+ transition: all 0.3s ease-in-out;
81
87
  `;
82
88
  // Wrapper component to handle links
83
89
  const NavItemWrapper = ({ item, isCollapsed, }) => {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@beydesign/storybook",
3
3
  "private": false,
4
- "version": "0.0.30",
4
+ "version": "0.0.31",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",