feat: add storybook paragraph

src/plugins/components/paragraph.ts → src/plugins/components/paragraph/index.ts

@@ -1,8 +1,8 @@
 import plugin from 'tailwindcss/plugin'
 import { defu } from 'defu'
-import { type PluginOption, defaultPluginOptions } from '../options'
+import { type PluginOption, defaultPluginOptions } from '../../options'
 
-const defaultParagraphConfig = {
+export const defaultParagraphConfig = {
   textXS: 'xs',
   textSM: 'sm',
   textMD: 'base',

src/plugins/components/paragraph/paragraph.component.ts

@@ -0,0 +1,29 @@
+import { html, unsafeStatic } from 'lit/static-html.js'
+import { spread } from '@open-wc/lit-helpers'
+
+import type { ParagraphAttrs } from './paragraph.types'
+import * as variants from './paragraph.variants'
+
+/**
+ * Primary UI component for user interaction
+ */
+export const Paragraph = ({
+  size = 'md',
+  weight = 'normal',
+  lead = 'normal',
+  as = 'p',
+  children,
+  ...attrs
+}: ParagraphAttrs) => {
+  return html`
+    <${unsafeStatic(as)} class=${[
+      'nui-paragraph',
+      size && variants.size[size],
+      weight && variants.weight[weight],
+      lead && variants.lead[lead],
+    ]
+      .filter(Boolean)
+      .join(' ')}
+      ${spread(attrs)}>${children}</${unsafeStatic(as)}>
+  `
+}

src/plugins/components/paragraph/paragraph.doc.mdx

@@ -0,0 +1,75 @@
+import { Meta, Primary, Controls, Story } from '@storybook/blocks'
+import * as ParagraphStories from './paragraph.stories'
+import { defaultParagraphConfig } from '.'
+
+<Meta of={ParagraphStories} />
+
+# Paragraph
+
+Paragraphs are an important part of any website or application and are often referred as part of the "Typography". They help creating structure and consistency accross the page and your content.
+
+<Primary />
+
+## Props
+
+<Controls />
+
+## Variants
+
+<br />
+
+### Sizes
+
+Use the Paragraph component to display some content or a subtitle. You can use various props to customize the size, weight, the line-height and the Html tag used to render the paragraph.
+
+<div className="bg-slate-100 dark:bg-slate-900 p-6 rounded-sm">
+  <Story of={ParagraphStories.Size2Xl} />
+  <br />
+  <Story of={ParagraphStories.SizeXl} />
+  <br />
+  <Story of={ParagraphStories.SizeLg} />
+  <br />
+  <Story of={ParagraphStories.SizeMd} />
+  <br />
+  <Story of={ParagraphStories.SizeSm} />
+  <br />
+  <Story of={ParagraphStories.SizeXs} />
+</div>
+
+<br />
+<br />
+
+## Customization
+
+### Default config
+
+<div class="relative">
+  <details class="relative bg-slate-50 border border-slate-200 rounded-lg p-4 [&>summary>svg]:open:-rotate-180">
+    <summary class="list-none cursor-pointer">
+      <span class="font-sans text-slate-500">View configuration options</span>
+      <svg
+        class="w-5 h-5 text-slate-500 absolute top-5 end-4 transition-transform duration-300"
+        xmlns="http://www.w3.org/2000/svg"
+        width="32"
+        height="32"
+        viewBox="0 0 24 24"
+      >
+        <path
+          fill="none"
+          stroke="currentColor"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+          stroke-width="2"
+          d="m6 9l6 6l6-6"
+        />
+      </svg>
+    </summary>
+
+    <div class="!mt-4">
+      <pre >
+        {JSON.stringify(defaultParagraphConfig, null, 2)}
+      </pre>
+    </div>
+
+  </details>
+</div>

src/plugins/components/paragraph/paragraph.stories.ts

@@ -0,0 +1,149 @@
+import type { Meta, StoryObj } from '@storybook/web-components'
+import { html } from 'lit'
+
+import type { ParagraphAttrs } from './paragraph.types'
+import { Paragraph } from './paragraph.component'
+
+// More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction
+const meta = {
+  title: 'Shuriken UI/Typography/Paragraph',
+  // tags: ['autodocs'],
+  render: (args) => Paragraph(args),
+  argTypes: {
+    as: {
+      control: { type: 'select' },
+      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'span', 'p'],
+      defaultValue: 'p',
+    },
+    size: {
+      control: { type: 'select' },
+      options: [
+        'xs',
+        'sm',
+        'md',
+        'lg',
+        'xl',
+        '2xl',
+        '3xl',
+        '4xl',
+        '5xl',
+        '6xl',
+        '7xl',
+        '8xl',
+        '9xl',
+      ],
+      defaultValue: 'md',
+    },
+    weight: {
+      control: { type: 'select' },
+      options: ['light', 'normal', 'medium', 'semibold', 'bold', 'extrabold'],
+      defaultValue: 'normal',
+    },
+    lead: {
+      control: { type: 'select' },
+      options: ['none', 'tight', 'snug', 'normal', 'relaxed', 'loose'],
+      defaultValue: 'normal',
+    },
+  },
+} satisfies Meta<ParagraphAttrs>
+
+export default meta
+type Story = StoryObj<ParagraphAttrs>
+
+// first export is the Primary story
+
+// #region Main
+export const Main: Story = {
+  name: 'Main example',
+  args: {
+    // set default values used for UI preview
+    as: 'p',
+    size: 'md',
+    weight: 'normal',
+    lead: 'none',
+    children: html`
+      This is a nice content paragraph.
+    `,
+  },
+}
+// #endregion
+
+// #region Variants
+export const Size2Xl: Story = {
+  name: 'Size: 2xl',
+  args: {
+    as: 'p',
+    size: '2xl',
+    weight: 'normal',
+    lead: 'none',
+    children: html`
+      Iam a 2xl paragraph
+    `,
+  },
+}
+
+export const SizeXl: Story = {
+  name: 'Size: xl',
+  args: {
+    as: 'p',
+    size: 'xl',
+    weight: 'normal',
+    lead: 'none',
+    children: html`
+      Iam a xl paragraph
+    `,
+  },
+}
+
+export const SizeLg: Story = {
+  name: 'Size: lg',
+  args: {
+    as: 'p',
+    size: 'lg',
+    weight: 'normal',
+    lead: 'none',
+    children: html`
+      Iam a lg paragraph
+    `,
+  },
+}
+
+export const SizeMd: Story = {
+  name: 'Size: md',
+  args: {
+    as: 'p',
+    size: 'md',
+    weight: 'normal',
+    lead: 'none',
+    children: html`
+      Iam a md paragraph
+    `,
+  },
+}
+
+export const SizeSm: Story = {
+  name: 'Size: sm',
+  args: {
+    as: 'p',
+    size: 'sm',
+    weight: 'normal',
+    lead: 'none',
+    children: html`
+      Iam a sm paragraph
+    `,
+  },
+}
+
+export const SizeXs: Story = {
+  name: 'Size: xs',
+  args: {
+    as: 'p',
+    size: 'xs',
+    weight: 'normal',
+    lead: 'none',
+    children: html`
+      Iam a sm paragraph
+    `,
+  },
+}
+// #endregion

src/plugins/components/paragraph/paragraph.test.ts

@@ -0,0 +1,35 @@
+import { axe } from 'vitest-axe'
+import { expect, test, describe } from 'vitest'
+import { render, html } from 'lit'
+
+import { Paragraph } from './paragraph.component'
+
+describe('Paragraph', () => {
+  test('Should render slot', () => {
+    const paragraph = Paragraph({
+      children: html`
+        <span>Hello world</span>
+      `,
+    })
+
+    render(paragraph, document.body)
+
+    expect(document.body.querySelector('.nui-paragraph')?.outerHTML)?.toContain(
+      'Hello world',
+    )
+  })
+
+  test('Should have no axe violations', async () => {
+    const paragraph = Paragraph({
+      children: html`
+        <span>Hello world</span>
+      `,
+    })
+
+    render(paragraph, document.body)
+
+    expect(
+      await axe(document.body.querySelector('.nui-paragraph')!.outerHTML),
+    )?.toHaveNoViolations()
+  })
+})

src/plugins/components/paragraph/paragraph.types.ts

@@ -0,0 +1,30 @@
+import type { PropertyVariant } from '~/types/utils'
+
+export interface ParagraphProps extends Record<string, unknown> {
+  as?: string
+  size?:
+    | 'xs'
+    | 'sm'
+    | 'md'
+    | 'lg'
+    | 'xl'
+    | '2xl'
+    | '3xl'
+    | '4xl'
+    | '5xl'
+    | '6xl'
+    | '7xl'
+    | '8xl'
+    | '9xl'
+  weight?: 'light' | 'normal' | 'medium' | 'semibold' | 'bold' | 'extrabold'
+  lead?: 'none' | 'tight' | 'snug' | 'normal' | 'relaxed' | 'loose'
+}
+
+export interface ParagraphEvents {}
+
+export interface ParagraphSlots {
+  children: any
+}
+
+export type ParagraphAttrs = ParagraphProps & ParagraphEvents & ParagraphSlots
+export type ParagraphVariant<T> = PropertyVariant<T, ParagraphProps>

src/plugins/components/paragraph/paragraph.variants.ts

@@ -0,0 +1,35 @@
+import type { ParagraphVariant } from './paragraph.types'
+
+export const size = {
+  xs: 'nui-paragraph-xs',
+  sm: 'nui-paragraph-sm',
+  md: 'nui-paragraph-md',
+  lg: 'nui-paragraph-lg',
+  xl: 'nui-paragraph-xl',
+  '2xl': 'nui-paragraph-2xl',
+  '3xl': 'nui-paragraph-3xl',
+  '4xl': 'nui-paragraph-4xl',
+  '5xl': 'nui-paragraph-5xl',
+  '6xl': 'nui-paragraph-6xl',
+  '7xl': 'nui-paragraph-7xl',
+  '8xl': 'nui-paragraph-8xl',
+  '9xl': 'nui-paragraph-9xl',
+} as const satisfies ParagraphVariant<'size'>
+
+export const weight = {
+  light: 'nui-weight-light',
+  normal: 'nui-weight-normal',
+  medium: 'nui-weight-medium',
+  semibold: 'nui-weight-semibold',
+  bold: 'nui-weight-bold',
+  extrabold: 'nui-weight-extrabold',
+} as const satisfies ParagraphVariant<'weight'>
+
+export const lead = {
+  none: 'nui-lead-none',
+  tight: 'nui-lead-tight',
+  snug: 'nui-lead-snug',
+  normal: 'nui-lead-normal',
+  relaxed: 'nui-lead-relaxed',
+  loose: 'nui-lead-loose',
+} as const satisfies ParagraphVariant<'lead'>