Skip to content

Commit

Permalink
feat: create avatar-group plugin component (#11)
Browse files Browse the repository at this point in the history 
Co-authored-by: Sacha Stafyniak <sacha@digisquad.io>
  • Loading branch information
@bpsmartdesign @stafyniaksacha
bpsmartdesign and stafyniaksacha authored Jul 23, 2023
1 parent b9d4559 commit df22937
Show file tree
Hide file tree
Showing 3 changed files with 274 additions and 0 deletions.
65 changes: 65 additions & 0 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -61,6 +61,71 @@ export default withShurikenUI({
theme: {
extend: {
shurikenUi: {
avatarGroup: {
avatarOuter: {
bgDark: 'muted-800',
rounded: 'full',
duration: '100',
bg: 'white',
avatar: {
bg: 'primary-500/20',
text: 'primary-500',
},
},
avatarCount: {
bgDark: 'muted-800',
rounded: 'full',
bg: 'white',
duration: '100',
inner: {
bg: 'muted-200',
borderDark: 'muted-800',
bgDark: 'muted-700',
size: 'full',
rounded: 'full',
border: 'white',
},
text: {
text: 'muted-500',
textDark: 'muted-300',
font: 'normal',
},
},
avatarGroupXS: {
outer: {
size: '8',
},
count: {
size: '8',
text: 'sm',
},
},
avatarGroupSM: {
outer: {
size: '10',
},
count: {
size: '10',
text: 'sm',
},
},
avatarGroupMD: {
outer: {
size: '12',
},
count: {
size: '12',
text: 'lg',
},
},
avatarGroupLG: {
outer: {
size: '16',
},
count: {
size: '16',
text: 'xl',
},
autocomplete: {
labelFloat: {
text: 'primary-500',
Expand Down
207 changes: 207 additions & 0 deletions src/plugins/components/avatar-group.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,207 @@
import plugin from 'tailwindcss/plugin'
import { defu } from 'defu'
import { type PluginOption, defaultPluginOptions } from '../options'

const defaultAvatarGroupConfig = {
avatarOuter: {
bg: 'white',
bgDark: 'muted-800',
rounded: 'full',
duration: '100',
avatar: {
bg: 'primary-500/20',
text: 'primary-500',
},
},
avatarCount: {
bg: 'white',
bgDark: 'muted-800',
rounded: 'full',
duration: '100',
inner: {
bg: 'muted-200',
bgDark: 'muted-700',
border: 'white',
borderDark: 'muted-800',
size: 'full',
rounded: 'full',
},
text: {
text: 'muted-500',
textDark: 'muted-300',
font: 'normal',
},
},
avatarGroupXS: {
outer: {
size: '8',
},
count: {
size: '8',
text: 'sm',
},
},
avatarGroupSM: {
outer: {
size: '10',
},
count: {
size: '10',
text: 'sm',
},
},
avatarGroupMD: {
outer: {
size: '12',
},
count: {
size: '12',
text: 'lg',
},
},
avatarGroupLG: {
outer: {
size: '16',
},
count: {
size: '16',
text: 'xl',
},
},
}

export default plugin.withOptions(
function (options: PluginOption) {
const { prefix } = defu(options, defaultPluginOptions)

return function ({ addComponents, theme }) {
const config = theme(
'shurikenUi.avatarGroup'
) satisfies typeof defaultAvatarGroupConfig

addComponents({
[`.${prefix}-avatar-group`]: {
[`@apply flex`]: {},

[`.${prefix}-avatar-outer`]: {
[`@apply dark:bg-${config.avatarOuter.bgDark} relative flex shrink-0 items-center justify-center rounded-${config.avatarOuter.rounded} bg-${config.avatarOuter.bg} transition-all duration-${config.avatarOuter.duration} ease-in`]:
{},
[`.${prefix}-avatar`]: {
[`@apply bg-${config.avatarOuter.avatar.bg} text-${config.avatarOuter.avatar.text} !scale-90`]:
{},
},
},
[`.${prefix}-avatar-count`]: {
[`@apply relative dark:bg-${config.avatarCount.bgDark} shrink-0 rounded-${config.avatarCount.rounded} bg-${config.avatarCount.bg} transition-all duration-${config.avatarCount.duration} ease-in`]:
{},

[`.${prefix}-avatar-count-inner`]: {
[`@apply bg-${config.avatarCount.inner.bg} dark:border-${config.avatarCount.inner.borderDark} dark:bg-${config.avatarCount.inner.bgDark} relative inline-flex h-${config.avatarCount.inner.size} w-${config.avatarCount.inner.size} scale-90 items-center justify-center rounded-${config.avatarCount.inner.rounded} border-${config.avatarCount.inner.border}`]:
{},
},
[`.${prefix}-avatar-count-text`]: {
[`@apply text-${config.avatarCount.text.text} dark:text-${config.avatarCount.text.textDark} -ms-1 font-sans font-${config.avatarCount.text.font} uppercase`]:
{},
},
},
[`&.${prefix}-avatar-group-xs`]: {
[`.${prefix}-avatar-outer`]: {
[`@apply h-${config.avatarGroupXS.outer.size} w-${config.avatarGroupXS.outer.size}`]:
{},

[`&:first-child`]: {
[`@apply hover:-ms-2 hover:me-2 focus:-ms-2 focus:me-2`]: {},
},
[`&:not(:first-child)`]: {
[`@apply -ms-2 hover:-ms-4 hover:me-2 focus:-ms-4 focus:me-2`]:
{},
},
},
[`.${prefix}-avatar-count`]: {
[`@apply -ms-2 h-${config.avatarGroupXS.count.size} w-${config.avatarGroupXS.count.size}`]:
{},

[`.${prefix}-avatar-count-text`]: {
[`@apply text-${config.avatarGroupXS.count.text}`]: {},
},
},
},
[`&.${prefix}-avatar-group-sm`]: {
[`.${prefix}-avatar-outer`]: {
[`@apply h-${config.avatarGroupSM.outer.size} w-${config.avatarGroupSM.outer.size}`]:
{},

[`&:first-child`]: {
[`@apply hover:-ms-2 hover:me-2 focus:me-2`]: {},
},
[`&:not(:first-child)`]: {
[`@apply -ms-3 hover:-ms-5 hover:me-2 focus:-ms-5 focus:me-2`]:
{},
},
},
[`.${prefix}-avatar-count`]: {
[`@apply -ms-3 h-${config.avatarGroupSM.count.size} w-${config.avatarGroupSM.count.size}`]:
{},

[`.${prefix}-avatar-count-text`]: {
[`@apply text-${config.avatarGroupSM.count.text}`]: {},
},
},
},
[`&.${prefix}-avatar-group-md`]: {
[`.${prefix}-avatar-outer`]: {
[`@apply h-${config.avatarGroupMD.outer.size} w-${config.avatarGroupMD.outer.size}`]:
{},

[`&:first-child`]: {
[`@apply hover:-ms-3 hover:me-3 focus:me-3`]: {},
},
[`&:not(:first-child)`]: {
[`@apply -ms-4 hover:-ms-7 hover:me-3 focus:me-3`]: {},
},
},
[`.${prefix}-avatar-count`]: {
[`@apply -ms-4 h-${config.avatarGroupMD.count.size} w-${config.avatarGroupMD.count.size}`]:
{},

[`.${prefix}-avatar-count-text`]: {
[`@apply text-${config.avatarGroupMD.count.text}`]: {},
},
},
},
[`&.${prefix}-avatar-group-lg`]: {
[`.${prefix}-avatar-outer`]: {
[`@apply h-${config.avatarGroupLG.outer.size} w-${config.avatarGroupLG.outer.size}`]:
{},

[`&:first-child`]: {
[`@apply hover:-ms-4 hover:me-4 focus:me-4`]: {},
},
[`&:not(:first-child)`]: {
[`@apply -ms-5 hover:-ms-9 hover:me-4 focus:-ms-9 focus:me-4`]:
{},
},
},
[`.${prefix}-avatar-count`]: {
[`@apply -ms-5 h-${config.avatarGroupLG.count.size} w-${config.avatarGroupLG.count.size}`]:
{},

[`.${prefix}-avatar-count-text`]: {
[`@apply text-${config.avatarGroupLG.count.text}`]: {},
},
},
},
},
})
}
},
function () {
return {
theme: {
shurikenUi: {
avatarGroup: defaultAvatarGroupConfig,
},
},
}
}
)
2 changes: 2 additions & 0 deletions src/plugins/components/index.ts
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import plugin from 'tailwindcss/plugin'
import { defu } from 'defu'
import { type PluginOption } from '../options'
import avatarGroup from './avatar-group'
import autocomplete from './autocomplete'
import avatar from './avatar'
import checkbox from './checkbox'
Expand Down Expand Up @@ -30,6 +31,7 @@ import textarea from './textarea'
import tooltip from './tooltip'

const components = [
avatarGroup,
autocomplete,
avatar,
checkbox,
Expand Down

0 comments on commit df22937

Please sign in to comment.