refactor: replace supabase/ui in design system typography components

[babblebey]

Description

This pull request aims to refactor the typography components (Title and Text) in the design system to improve consistency, maintainability, and extensibility. The changes in this branch replaces supabase/ui typography component with native html alternatives leveraging @tailwindcss/typography and introduce enhancements to provide flexibility.

Notable Change

Introduce the TypographyWrapper component

This component serves as a wrapper around child components exposing children components to the prose utility class from @tailwindcss/typography which adds beautiful typographic defaults to uncontrollable vanilla HTML, like HTML rendered from Markdown.

It also serves as a primary wrapper for the Title and Text components.

Implementation

const TypographyWrapper: React.FC<TypographyWrapperProps> = ({ children, className, size = "sm", ...props }) => {
  return (
    <span className={clsx(
      "prose", 
      `prose-${size}`, 
      className)} 
      {...props}
    >
      {children}
    </span>
  );
};

• The Component accepts the className and size props which uses as/to modify the below classes for the returned element

  • "prose": This is a default CSS class that provides basic typographic styles, such as margins and line heights, to improve readability of the text.
  • "prose-${size}": This class is dynamically generated based on the size prop. For example, if size is set to "sm", it will apply the class "prose-sm", which provides smaller font size and line height. Similarly, for other size values, appropriate styles will be applied.
  • className: This is used to apply any additional CSS classes passed through the className prop.

• The component also passes any other props that might be provided to the TypographyWrapper through the ...props spread operator. This allows developers to use additional attributes on the wrapper element.

Use Cases

• As Primary Wrapper for Title components.

const Title: React.FC<TitleProps> = ({ children, level = 1, weight = "medium", className, ...props }) => {
  const TitleTag = `h${level}` as keyof JSX.IntrinsicElements;

  return (
    <TypographyWrapper> // <- 🍕🍕🍕🍕🍕
      <TitleTag className={clsx(className, `font-${weight}`)} {...props}>
        {children}
      </TitleTag>
    </TypographyWrapper> // <- 🍕🍕🍕🍕🍕
  );
};

• Useable sparingly (maybe for Blogposts highlight type 🍕)

<TypographyWrapper>
  <p>We get lots of complaints about it actually, with people regularly asking us things like:</p>
  <blockquote>
    <p>Why is Tailwind removing the default styles on my <code>h1</code> elements? How do I disable this? What do you mean I lose all the other base styles too?</p>
  </blockquote>
</TypographyWrapper>

Other Changes

• Text component very much follows similar implementation and integrates exactly as that in the initial set-up without regression.

<Text>
  Normal Text
</Text>

<Text className="!text-2xl !text-red-500">
  Normal Text (with ClassNames)
</Text>

<Text keyboard>
  Keyboard Text
</Text>

<Text code>
  Code Text
</Text>

<Text underline>
  Underlined Text
</Text>

<Text strikethrough>
  Strikethrough Text
</Text>

<Text small>
  Small Text
</Text>

• Title component also follows similar implementation and integrates exactly as that in the initial set-up.

<Title>
  Title Default Level and Weight
</Title>

<Title level={1} weight="light">
  Title Level 1 with light weight
</Title>

<Title level={3} className="!text-yellow-400">
  Title Level 3 with className
</Title>

What type of PR is this? (check all applicable)

• 🍕 Feature
• 🐛 Bug Fix
• 📝 Documentation Update
• 🎨 Style
• 🧑‍💻 Code Refactor
• 🔥 Performance Improvements
• ✅ Test
• 🤖 Build
• 🔁 CI
• 📦 Chore (Release)
• ⏩ Revert

Related Tickets & Documents

Fixes #1133

Mobile & Desktop Screenshots/Recordings

Added tests?

• 👍 yes
• 🙅 no, because they aren't needed
• 🙋 no, because I need help

Added to documentation?

• 📜 README.md
• 📓 docs.opensauced.pizza
• 🍕 dev.to/opensauced
• 📕 storybook
• 🙅 no documentation needed

[optional] Are there any post-deployment tasks we need to perform?

Install @tailwindcss/typography for local development

[optional] What gif best describes this PR or how it makes you feel?

[netlify]

✅ Deploy Preview for oss-insights ready!

Built without sensitive environment variables

Name	Link
🔨 Latest commit	1df8154
🔍 Latest deploy log	https://app.netlify.com/sites/oss-insights/deploys/64cb5a32af7ef900088ff230
😎 Deploy Preview	https://deploy-preview-1438--oss-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[netlify]

✅ Deploy Preview for design-insights ready!

Name	Link
🔨 Latest commit	1df8154
🔍 Latest deploy log	https://app.netlify.com/sites/design-insights/deploys/64cb5a32fbf4fd00088559a5
😎 Deploy Preview	https://deploy-preview-1438--design-insights.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[OgDev-01]

Hey @babblebey, is this ready for review?

[babblebey]

is this ready for review?

@OgDev-01.... In a bit 🤞

[github-actions]

PR Compliance Checks

Thank you for your Pull Request! We have run several checks on this pull request in order to make sure it's suitable for merging into this project. The results are listed in the following section.

Watched Files

This pull request modifies specific files that require careful review by the maintainers.

Files Matched

• npm-shrinkwrap.json
• package.json

[OgDev-01]

LGTM... Thanks for taking a step forward and adding the tailwinds typography plugin 🍕

Quite a well crafted novel on the typography-wrapper story though 😁