archive-gh-me/nextui
1
0
Fork 0
mirror of https://github.com/nextui-org/nextui.git synced 2025-12-08 19:26:11 +00:00
Code Issues Projects Releases Wiki Activity

feat(components): badge stories added, icons packages renames

Browse Source
This commit is contained in:
Junior Garcia 2022-10-09 18:40:27 -03:00
parent 0f07cd0125
commit d383d9ce48
15 changed files with 636 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/components/avatar/package.json
View File

@ -46,7 +46,7 @@
},
"devDependencies": {
"@nextui-org/spacer": "workspace:*",
"@nextui-org/icons-utils": "workspace:*",
"@nextui-org/shared-icons": "workspace:*",
"clean-package": "2.1.1",
"react": "^17.0.2"
}

2
packages/components/avatar/stories/avatar.stories.tsx
View File

@ -1,7 +1,7 @@
import React from "react";
import {Meta} from "@storybook/react";
import {Spacer} from "@nextui-org/spacer";
import {Lock, User, VolumeUp, Camera, Activity} from "@nextui-org/icons-utils";
import {Lock, User, VolumeUp, Camera, Activity} from "@nextui-org/shared-icons";
import {Avatar} from "../src";

7
packages/components/badge/package.json
View File

@ -42,6 +42,13 @@
"@nextui-org/dom-utils": "workspace:*"
},
"devDependencies": {
"@nextui-org/avatar": "workspace:*",
"@nextui-org/spacer": "workspace:*",
"@nextui-org/grid": "workspace:*",
"@nextui-org/col": "workspace:*",
"@nextui-org/row": "workspace:*",
"@nextui-org/text": "workspace:*",
"@nextui-org/shared-icons": "workspace:*",
"clean-package": "2.1.1",
"react": "^17.0.2"
}

2
packages/components/badge/src/use-badge.ts
View File

@ -91,6 +91,7 @@ export function useBadge(props: UseBadgeProps) {
enableShadow = false,
verticalOffset,
horizontalOffset,
isSquared = false,
isInvisible = false,
disableOutline = false,
disableAnimation = false,
@ -143,6 +144,7 @@ export function useBadge(props: UseBadgeProps) {
color,
borderWeight,
asChild,
isSquared,
isOneChar,
badgeCss,
placement,

594
packages/components/badge/stories/badge.stories.tsx
View File

@ -1,6 +1,16 @@
import React from "react";
import {Meta} from "@storybook/react";
// Row, Spacer, Grid, Avatar, Switch, Text
import {Col} from "@nextui-org/col";
import {Row} from "@nextui-org/row";
import {Spacer} from "@nextui-org/spacer";
import {Grid} from "@nextui-org/grid";
import {Avatar} from "@nextui-org/avatar";
// import {Switch} from "@nextui-org/switch"; TODO: create
// import {Text} from "@nextui-org/text";
import {Notification} from "@nextui-org/shared-icons";
import {Badge} from "../src";
export default {
@ -8,4 +18,586 @@ export default {
component: Badge,
} as Meta;
export const Default = () => <Badge />;
export const Default = () => <Badge>Default</Badge>;
export const WithAvatar = () => (
<Grid.Container gap={1} justify="center">
<Grid>
<Badge color="error" content={5} size="sm">
<Avatar
bordered
pointer
squared
color="secondary"
size="lg"
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
/>
</Badge>
</Grid>
<Grid>
<Badge color="error" content={5} placement="bottom-right" shape="circle" size="sm">
<Avatar
bordered
pointer
color="secondary"
size="lg"
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
/>
</Badge>
</Grid>
</Grid.Container>
);
export const WithIcon = () => (
<Badge color="error" content={5} horizontalOffset={2} shape="circle">
<Notification fill="currentColor" size={30} />
</Badge>
);
export const WithContentIcon = () => (
<Badge
color="error"
content={<Notification fill="currentColor" size={12} />}
css={{p: "$2"}}
horizontalOffset={2}
shape="circle"
>
<Avatar
bordered
pointer
color="secondary"
size="lg"
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
/>
</Badge>
);
// TODO: create
// export const ToggleBadge = () => {
// const [isInvisible, setIsInvisible] = React.useState(false);
// return (
// <Grid.Container alignItems="center" gap={2}>
// <Grid>
// <Badge color="error" content={5} isInvisible={isInvisible} shape="circle">
// <Notification fill="currentColor" size={30} />
// </Badge>
// </Grid>
// <Grid>
// <Badge color="error" content={50} isInvisible={isInvisible} shape="circle">
// <CartIcon fill="currentColor" size={30} />
// </Badge>
// </Grid>
// <Grid>
// <Row align="center">
// <Switch initialChecked onChange={(ev) => setIsInvisible(!ev.target.checked)} />
// <Text css={{ml: "$3"}}>Show badge</Text>
// </Row>
// </Grid>
// </Grid.Container>
// );
// };
export const WithContentPlacements = () => {
return (
<>
<Grid.Container gap={1} justify="center">
<Grid>
<Badge color="error" content={5} size="xs">
<Avatar
bordered
pointer
squared
color="secondary"
size="lg"
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
/>
</Badge>
</Grid>
<Grid>
<Badge color="error" content={5} placement="bottom-right" size="md">
<Avatar
bordered
pointer
squared
color="secondary"
size="lg"
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
/>
</Badge>
</Grid>
<Grid>
<Badge color="error" content={5} placement="top-left" size="sm">
<Avatar
bordered
pointer
squared
color="secondary"
size="lg"
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
/>
</Badge>
</Grid>
<Grid>
<Badge color="error" content={5} placement="bottom-left" size="sm">
<Avatar
bordered
pointer
squared
color="secondary"
size="lg"
src="https://i.pravatar.cc/300?u=a042581f4e290267073"
/>
</Badge>
</Grid>
</Grid.Container>
<Grid.Container gap={1} justify="center">
<Grid>
<Badge
isInvisible
color="primary"
content={5}
placement="bottom-right"
size="md"
variant="points"
>
<Avatar
bordered
pointer
color="primary"
size="lg"
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
/>
</Badge>
</Grid>
<Grid>
<Badge
color="success"
content={5}
placement="bottom-right"
shape="circle"
size="md"
variant="dot"
>
<Avatar
bordered
pointer
color="success"
size="lg"
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
/>
</Badge>
</Grid>
<Grid>
<Badge color="error" content={5} placement="top-left" size="sm">
<Avatar
bordered
pointer
squared
color="secondary"
size="lg"
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
/>
</Badge>
</Grid>
<Grid>
<Badge color="error" content={5} placement="bottom-left" size="sm">
<Avatar
bordered
pointer
squared
color="secondary"
size="lg"
src="https://i.pravatar.cc/300?u=a042581f4e290267073"
/>
</Badge>
</Grid>
</Grid.Container>
</>
);
};
export const Sizes = () => (
<Grid.Container>
<Grid.Container alignItems="center" gap={1} justify="center">
<Grid>
<Badge size="xs">New (xs)</Badge>
</Grid>
<Grid>
<Badge size="sm">New (sm)</Badge>
</Grid>
<Grid>
<Badge size="md">New (md)</Badge>
</Grid>
<Grid>
<Badge size="lg">New (lg)</Badge>
</Grid>
<Grid>
<Badge size="xl">New (xl)</Badge>
</Grid>
</Grid.Container>
<Spacer y={1} />
<Grid.Container gap={1} justify="center">
<Grid>
<Badge color="error" content="xs" size="xs">
<Avatar
bordered
pointer
squared
color="secondary"
size="lg"
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
/>
</Badge>
</Grid>
<Grid>
<Badge color="error" content="sm" size="sm">
<Avatar
bordered
pointer
squared
color="secondary"
size="lg"
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
/>
</Badge>
</Grid>
<Grid>
<Badge color="error" content="md" size="md">
<Avatar
bordered
pointer
squared
color="secondary"
size="lg"
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
/>
</Badge>
</Grid>
<Grid>
<Badge color="error" content="lg" size="lg">
<Avatar
bordered
pointer
squared
color="secondary"
size="lg"
src="https://i.pravatar.cc/300?u=a042581f4e290267073"
/>
</Badge>
</Grid>
<Grid>
<Badge color="error" content="xl" size="xl">
<Avatar
bordered
pointer
squared
color="secondary"
size="lg"
src="https://i.pravatar.cc/300?u=a042581f4e290267071"
/>
</Badge>
</Grid>
</Grid.Container>
<Spacer y={1} />
<Grid.Container gap={2} justify="center">
<Grid>
<Badge color="error" content="999+" size="xs">
<Avatar
bordered
pointer
squared
color="secondary"
size="lg"
src="https://i.pravatar.cc/300?u=a042581f4e29026707d"
/>
</Badge>
</Grid>
<Grid>
<Badge color="error" content="999+" size="sm">
<Avatar
bordered
pointer
squared
color="secondary"
size="lg"
src="https://i.pravatar.cc/300?u=a042581f4e29026707e"
/>
</Badge>
</Grid>
<Grid>
<Badge color="error" content="999+" size="md">
<Avatar
bordered
pointer
squared
color="secondary"
size="lg"
src="https://i.pravatar.cc/300?u=a042581f4e290267072"
/>
</Badge>
</Grid>
<Grid>
<Badge color="error" content="999+" size="lg">
<Avatar
bordered
pointer
squared
color="secondary"
size="lg"
src="https://i.pravatar.cc/300?u=a042581f4e290267073"
/>
</Badge>
</Grid>
<Grid>
<Badge color="error" content="999+" size="xl">
<Avatar
bordered
pointer
squared
color="secondary"
size="lg"
src="https://i.pravatar.cc/300?u=a042581f4e290267071"
/>
</Badge>
</Grid>
</Grid.Container>
</Grid.Container>
);
export const Squared = () => (
<Col css={{pl: "$6"}}>
<Row>
<Badge isSquared size="xs">
New (xs)
</Badge>
</Row>
<Spacer y={0.5} />
<Row>
<Badge isSquared size="sm">
New (sm)
</Badge>
</Row>
<Spacer y={0.5} />
<Row>
<Badge isSquared size="md">
New (md)
</Badge>
</Row>
<Spacer y={0.5} />
<Row>
<Badge isSquared size="lg">
New (lg)
</Badge>
</Row>
<Spacer y={0.5} />
<Row>
<Badge isSquared size="xl">
New (xl)
</Badge>
</Row>
<Spacer y={0.5} />
</Col>
);
export const Colors = () => (
<Col css={{pl: "$6"}}>
<Row>
<Badge>Neutral</Badge>
</Row>
<Spacer y={0.5} />
<Row>
<Badge color="primary">Primary</Badge>
</Row>
<Spacer y={0.5} />
<Row>
<Badge color="secondary">Secondary</Badge>
</Row>
<Spacer y={0.5} />
<Row>
<Badge color="success">Success</Badge>
</Row>
<Spacer y={0.5} />
<Row>
<Badge color="warning">Warning</Badge>
</Row>
<Spacer y={0.5} />
<Row>
<Badge color="error">Error</Badge>
</Row>
</Col>
);
export const EnableShadow = () => (
<Col css={{pl: "$6"}}>
<Row>
<Badge disableOutline enableShadow>
Neutral
</Badge>
</Row>
<Spacer y={0.5} />
<Row>
<Badge disableOutline enableShadow color="primary">
Primary
</Badge>
</Row>
<Spacer y={0.5} />
<Row>
<Badge disableOutline enableShadow color="secondary">
Secondary
</Badge>
</Row>
<Spacer y={0.5} />
<Row>
<Badge disableOutline enableShadow color="success">
Success
</Badge>
</Row>
<Spacer y={0.5} />
<Row>
<Badge disableOutline enableShadow color="warning">
Warning
</Badge>
</Row>
<Spacer y={0.5} />
<Row>
<Badge disableOutline enableShadow color="error">
Error
</Badge>
</Row>
</Col>
);
export const FlatVariant = () => (
<Col css={{pl: "$6"}}>
<Row>
<Badge variant="flat">Neutral</Badge>
</Row>
<Spacer y={0.5} />
<Row>
<Badge color="primary" variant="flat">
Primary
</Badge>
</Row>
<Spacer y={0.5} />
<Row>
<Badge color="secondary" variant="flat">
Secondary
</Badge>
</Row>
<Spacer y={0.5} />
<Row>
<Badge color="success" variant="flat">
Success
</Badge>
</Row>
<Spacer y={0.5} />
<Row>
<Badge color="warning" variant="flat">
Warning
</Badge>
</Row>
<Spacer y={0.5} />
<Row>
<Badge color="error" variant="flat">
Error
</Badge>
</Row>
</Col>
);
export const BorderedVariant = () => (
<Col css={{pl: "$6"}}>
<Row>
<Badge variant="bordered">Neutral</Badge>
</Row>
<Spacer y={0.5} />
<Row>
<Badge color="primary" variant="bordered">
Primary
</Badge>
</Row>
<Spacer y={0.5} />
<Row>
<Badge color="secondary" variant="bordered">
Secondary
</Badge>
</Row>
<Spacer y={0.5} />
<Row>
<Badge color="success" variant="bordered">
Success
</Badge>
</Row>
<Spacer y={0.5} />
<Row>
<Badge color="warning" variant="bordered">
Warning
</Badge>
</Row>
<Spacer y={0.5} />
<Row>
<Badge color="error" variant="bordered">
Error
</Badge>
</Row>
</Col>
);
export const DotVariant = () => (
<Col css={{pl: "$6"}}>
<Row>
<Badge size="xl" variant="dot">
<span>new</span>
</Badge>
</Row>
<Spacer y={0.5} />
<Row>
<Badge color="primary" size="xl" variant="dot" />
</Row>
<Spacer y={0.5} />
<Row>
<Badge color="secondary" size="xl" variant="dot" />
</Row>
<Spacer y={0.5} />
<Row>
<Badge color="success" size="xl" variant="dot" />
</Row>
<Spacer y={0.5} />
<Row>
<Badge color="warning" size="xl" variant="dot" />
</Row>
<Spacer y={0.5} />
<Row>
<Badge color="error" size="xl" variant="dot" />
</Row>
</Col>
);
export const PointsVariant = () => (
<Col css={{pl: "$6"}}>
<Row>
<Badge isSquared size="xs" variant="points" />
</Row>
<Spacer y={0.5} />
<Row>
<Badge isSquared color="primary" size="sm" variant="points" />
</Row>
<Spacer y={0.5} />
<Row>
<Badge isSquared color="secondary" size="md" variant="points" />
</Row>
<Spacer y={0.5} />
<Row>
<Badge isSquared color="success" size="lg" variant="points" />
</Row>
<Spacer y={0.5} />
<Row>
<Badge isSquared color="warning" size="xl" variant="points" />
</Row>
<Spacer y={0.5} />
<Row>
<Badge isSquared color="error" size="xl" variant="points" />
</Row>
</Col>
);

2
packages/components/button/package.json
View File

@ -51,7 +51,7 @@
"@nextui-org/spacer": "workspace:*",
"@nextui-org/grid": "workspace:*",
"@nextui-org/loading": "workspace:*",
"@nextui-org/icons-utils": "workspace:*",
"@nextui-org/shared-icons": "workspace:*",
"@react-types/shared": "^3.14.1",
"@react-types/button": "^3.6.2",
"clean-package": "2.1.1",

2
packages/components/button/stories/button.stories.tsx
View File

@ -3,7 +3,7 @@ import {Meta} from "@storybook/react";
import {Spacer} from "@nextui-org/spacer";
import {Grid} from "@nextui-org/grid";
import {Loading} from "@nextui-org/loading";
import {Lock, Notification, User, Camera, Activity} from "@nextui-org/icons-utils";
import {Lock, Notification, User, Camera, Activity} from "@nextui-org/shared-icons";
import {Button} from "../src";

6
packages/utilities/icons-utils/README.md → packages/utilities/shared-icons/README.md
View File

@ -1,4 +1,4 @@
# @nextui-org/icons-utils
# @nextui-org/shared-icons
A Quick description of the component
@ -7,9 +7,9 @@ A Quick description of the component
## Installation
```sh
yarn add @nextui-org/icons-utils
yarn add @nextui-org/shared-icons
# or
npm i @nextui-org/icons-utils
npm i @nextui-org/shared-icons
```
## Contribution

0
packages/utilities/icons-utils/clean-package.config.json → packages/utilities/shared-icons/clean-package.config.json
View File

2
packages/utilities/icons-utils/package.json → packages/utilities/shared-icons/package.json
View File

@ -1,5 +1,5 @@
{
"name": "@nextui-org/icons-utils",
"name": "@nextui-org/shared-icons",
"version": "1.0.0-beta.11",
"description": "Internal icons set, commonly used in the components stories",
"keywords": [

0
packages/utilities/icons-utils/src/icons.tsx → packages/utilities/shared-icons/src/icons.tsx
View File

0
packages/utilities/icons-utils/src/index.ts → packages/utilities/shared-icons/src/index.ts
View File

0
packages/utilities/icons-utils/tsconfig.json → packages/utilities/shared-icons/tsconfig.json
View File

0
packages/utilities/icons-utils/tsup.config.ts → packages/utilities/shared-icons/tsup.config.ts
View File

38
pnpm-lock.yaml generated
View File

@ -305,8 +305,8 @@ importers:
packages/components/avatar:
specifiers:
'@nextui-org/dom-utils': workspace:*
'@nextui-org/icons-utils': workspace:*
'@nextui-org/shared-css': workspace:*
'@nextui-org/shared-icons': workspace:*
'@nextui-org/shared-utils': workspace:*
'@nextui-org/spacer': workspace:*
'@nextui-org/system': workspace:*
@ -322,16 +322,23 @@ importers:
'@react-aria/focus': 3.9.0_react@17.0.2
'@react-aria/utils': 3.14.0_react@17.0.2
devDependencies:
'@nextui-org/icons-utils': link:../../utilities/icons-utils
'@nextui-org/shared-icons': link:../../utilities/shared-icons
'@nextui-org/spacer': link:../spacer
clean-package: 2.1.1
react: 17.0.2
packages/components/badge:
specifiers:
'@nextui-org/avatar': workspace:*
'@nextui-org/col': workspace:*
'@nextui-org/dom-utils': workspace:*
'@nextui-org/grid': workspace:*
'@nextui-org/row': workspace:*
'@nextui-org/shared-icons': workspace:*
'@nextui-org/shared-utils': workspace:*
'@nextui-org/spacer': workspace:*
'@nextui-org/system': workspace:*
'@nextui-org/text': workspace:*
clean-package: 2.1.1
react: ^17.0.2
dependencies:
@ -339,6 +346,13 @@ importers:
'@nextui-org/shared-utils': link:../../utilities/shared-utils
'@nextui-org/system': link:../../core/system
devDependencies:
'@nextui-org/avatar': link:../avatar
'@nextui-org/col': link:../col
'@nextui-org/grid': link:../grid
'@nextui-org/row': link:../row
'@nextui-org/shared-icons': link:../../utilities/shared-icons
'@nextui-org/spacer': link:../spacer
'@nextui-org/text': link:../text
clean-package: 2.1.1
react: 17.0.2
@ -347,9 +361,9 @@ importers:
'@nextui-org/dom-utils': workspace:*
'@nextui-org/drip': workspace:*
'@nextui-org/grid': workspace:*
'@nextui-org/icons-utils': workspace:*
'@nextui-org/loading': workspace:*
'@nextui-org/shared-css': workspace:*
'@nextui-org/shared-icons': workspace:*
'@nextui-org/shared-utils': workspace:*
'@nextui-org/spacer': workspace:*
'@nextui-org/system': workspace:*
@ -373,8 +387,8 @@ importers:
'@react-aria/utils': 3.14.0_react@17.0.2
devDependencies:
'@nextui-org/grid': link:../grid
'@nextui-org/icons-utils': link:../../utilities/icons-utils
'@nextui-org/loading': link:../loading
'@nextui-org/shared-icons': link:../../utilities/shared-icons
'@nextui-org/spacer': link:../spacer
'@react-types/button': 3.6.2_react@17.0.2
'@react-types/shared': 3.15.0_react@17.0.2
@ -822,14 +836,6 @@ importers:
clean-package: 2.1.1
react: 17.0.2
packages/utilities/icons-utils:
specifiers:
clean-package: 2.1.1
react: ^17.0.2
devDependencies:
clean-package: 2.1.1
react: 17.0.2
packages/utilities/shared-css:
specifiers:
'@nextui-org/system': workspace:*
@ -838,6 +844,14 @@ importers:
'@nextui-org/system': link:../../core/system
clean-package: 2.1.1
packages/utilities/shared-icons:
specifiers:
clean-package: 2.1.1
react: ^17.0.2
devDependencies:
clean-package: 2.1.1
react: 17.0.2
packages/utilities/shared-utils:
specifiers:
clean-package: 2.1.1