62 konverter til tailwindcss

.storybook/main.ts

@@ -0,0 +1,18 @@
+import type { StorybookConfig } from '@storybook/nextjs'
+const config: StorybookConfig = {
+  stories: ['../stories/**/*.mdx', '../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
+  addons: [
+    '@storybook/addon-links',
+    '@storybook/addon-essentials',
+    '@storybook/addon-onboarding',
+    '@storybook/addon-interactions',
+  ],
+  framework: {
+    name: '@storybook/nextjs',
+    options: {},
+  },
+  docs: {
+    autodocs: 'tag',
+  },
+}
+export default config

.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from '@storybook/react'
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: '^on[A-Z].*' },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/,
+      },
+    },
+  },
+}
+
+export default preview

app/about/page.tsx

@@ -1,5 +1,7 @@
-import pagestyles from './about.module.css'
 import { Metadata } from 'next'
+import { Title } from '@/components/title/Title'
+import { Section } from '@/components/section/Section'
+import { BackgroundSection } from '@/components/backgroundSection/BackgroundSection'
 
 export const metadata: Metadata = {
   title: 'JavaZone 2023 - About JavaZone',
@@ -8,45 +10,45 @@ export const metadata: Metadata = {
 export default function About() {
   return (
     <div>
-      <div className="is-inline-block">
-        <h1 className="title is-size-1">JavaZone: The biggest community-driven Java conference</h1>
+      <div className="inline-block">
+        <Title type="big-title">JavaZone: The biggest community-driven Java conference</Title>
       </div>
-      <h2 className="content is-size-3">What is it? Who is behind it?</h2>
+      <h2 className="text-3xl mb-8">What is it? Who is behind it?</h2>
 
-      <section className="content is-normal">
-        <h2>WHAT IS JAVAZONE?</h2>
+      <Section>
+        <Title type="subtitle">WHAT IS JAVAZONE?</Title>
 
-        <p>
+        <p className="mb-4">
           JavaZone is the biggest community-driven Java conference that has been organized in Oslo,
           Norway since 2001. It is organized on a voluntary basis by a group of people from javaBin,
           the Norwegian Java User Group, working around the year and putting many hours to create an
           amazing conference experience for you.
         </p>
-        <p>
+        <p className="mb-4">
           Our goal is to organize a community-driven conference for developers where they can learn
           new things, share knowledge, and socialize.
         </p>
-        <p>
+        <p className="mb-4">
           We are happy to see the event grow bigger and better every year. In 2019 we hosted over
           3200 participants and 160 speakers across 7 parallel tracks over the course of two days.
           In addition, we also offered a selection of 11 workshops held on the day before the
           conference started.
         </p>
-      </section>
+      </Section>
 
-      <section className={pagestyles.child} />
+      <BackgroundSection type="about" />
 
-      <section className="content is-normal mt-5">
-        <h2>WHO IS BEHIND IT?</h2>
-        <p>
+      <Section>
+        <Title type="subtitle">WHO IS BEHIND IT?</Title>
+        <p className="mb-4">
           Organizing a conference of this size on a voluntary basis is a lot of hard work (and it is
           great fun too!). The conference organization is represented by the JavaZone Core Team – a
           group of main organizers of the conference, where each representative is responsible for
           one or several areas or is leading a group of other JUG members. An example of such groups
           can be Program Committee, IT systems, etc.
         </p>
-        <p>The JavaZone Core Team for 2023:</p>
-        <ul>
+        <p className="mb-4">The JavaZone Core Team for 2023:</p>
+        <ul className="ml-8 my-4 list-disc">
           <li>
             <em>Leader</em> –{' '}
             <a href="mailto:[email protected]" target="_blank" rel="noreferrer">
@@ -78,20 +80,20 @@ export default function About() {
           </li>
         </ul>
 
-        <p>
+        <p className="mb-4">
           Being the biggest community-driven conference would not have been easy without all the
           partners, event coordinators, and subcontractors, so we would like to thank them as well!
           Thank you, all!
         </p>
 
-        <p>
+        <p className="mb-4">
           If you have any questions or comments, you can always reach the Core Team at{' '}
           <a href="mailto:[email protected]" target="_blank" rel="noreferrer">
             [email protected]
           </a>
           .
         </p>
-      </section>
+      </Section>
     </div>
   )
 }

app/footer.tsx

@@ -1,4 +1,5 @@
-import styles from "./footer.module.css"
+import React from 'react'
+import { Link } from '@/components/link/Link'
 
 interface FooterLinkProps {
   href: string
@@ -34,24 +35,24 @@ const footerData = [
 
 const FooterLink = ({ href, text }: FooterLinkProps) => {
   return (
-    <a className={`link is-info ${styles.link}`} href={href} target="_blank" rel="noopener noreferrer">
+    <Link type="footer" href={href} target="_blank" rel="noopener noreferrer">
       {text}
-    </a>
+    </Link>
   )
 }
 
 const createFooterLinks = () =>
   footerData.map(({ url, text }) => (
-    <p key={url} className="level-item has-text-centered">
+    <p key={url} className="text-center mt-3">
       <FooterLink href={url} text={text} />
     </p>
   ))
 
 export function Footer() {
   const footerLinks = createFooterLinks()
   return (
-    <footer className="footer">
-      <nav className="level">{footerLinks}</nav>
-    </footer>
+    <div className="bg-dark-blue-background flex justify-evenly py-4 max-md:flex-col">
+      {footerLinks}
+    </div>
   )
 }

app/header.tsx

@@ -1,8 +1,8 @@
 'use client'
 
-import { ReactNode, useState } from 'react'
-import Link from 'next/link'
+import React, { ReactNode, useState } from 'react'
 import Image from 'next/image'
+import { Link } from '@/components/link/Link'
 
 const HeaderLink = ({
   children,
@@ -13,11 +13,23 @@ const HeaderLink = ({
   href: string
   onClick?: () => void
 }) => (
-  <Link className={`navbar-item`} style={{ fontWeight: 'bold' }} href={href} onClick={onClick}>
+  <Link type="header" href={href} onClick={onClick}>
     {children}
   </Link>
 )
 
+const Line = ({ className }: { className: string }) => (
+  <>
+    <span
+      className={`block w-[16px] h-[1px] bg-big-text-color absolute left-[calc(50%-8px)] duration-100 ease-out origin-center transition-[background-color] transition-[opacity] transition-[transform] ${className}`}
+      aria-hidden="true"
+    />
+  </>
+)
+type BurgerProps = {
+  active: boolean
+  setActive: (b: boolean) => void
+}
 const paths = [
   { text: 'Partners', href: '/partners' },
   { text: 'Speakers', href: '/speakers' },
@@ -30,40 +42,45 @@ const paths = [
   { text: 'About us', href: '/about' },
 ]
 
+const Burger = ({ active, setActive }: BurgerProps) => (
+  <a
+    role="button"
+    onClick={() => setActive(!active)}
+    className="bg-none border-none cursor-pointer block h-[3.25rem] w-[3.25rem] relative ml-auto hover:text-[#26A27E] hover:bg-[#033443] lg:hidden"
+    aria-label="menu"
+    aria-expanded="false"
+  >
+    <Line className={`top-[calc(50%-6px)] ${active ? 'translate-y-[5px] rotate-45' : ''}`} />
+    <Line className={`top-[calc(50%-1px)] ${active ? 'hidden' : ''}`} />
+    <Line className={`top-[calc(50%+4px)] ${active ? 'translate-y-[-5px] rotate-[-45deg]' : ''}`} />
+  </a>
+)
+
 export function Header() {
-  const [burger, setBurger] = useState(false)
+  const [active, setActive] = useState(false)
 
-  const handleLinkClick = () => setBurger(false)
+  const handleLinkClick = () => setActive(false)
 
   return (
-    <nav className={'navbar is-fixed-top'} role="navigation" aria-label="main navigation">
-      <div className="navbar-brand">
-        <a className="navbar-item" href="/">
+    <nav
+      className="lg:flex lg:items-stretch top-0 left-0 right-0 fixed z-30 bg-dark-blue-background min-h[3.25rem]"
+      role="navigation"
+      aria-label="main navigation"
+    >
+      <div className="flex items-stretch grow-0 shrink-0 min-h-[3.25rem]">
+        <Link type="header" href="/">
           <Image src="/svg/JZ2023-Hero.svg" height={48} width={48} alt="logo" />
-        </a>
+        </Link>
 
-        <a
-          role="button"
-          onClick={() => setBurger(!burger)}
-          className={`navbar-burger ${burger && 'is-active'}`}
-          aria-label="menu"
-          aria-expanded="false"
-          data-target="navbarBasicExample"
-        >
-          <span aria-hidden="true"></span>
-          <span aria-hidden="true"></span>
-          <span aria-hidden="true"></span>
-        </a>
+        <Burger active={active} setActive={setActive} />
       </div>
 
-      <div id="navbarBasicExample" className={burger ? 'navbar-menu is-active' : 'navbar-menu'}>
-        <div className="navbar-start">
-          {paths.map((path) => (
-            <HeaderLink href={path.href} key={path.href} onClick={handleLinkClick}>
-              {path.text}
-            </HeaderLink>
-          ))}
-        </div>
+      <div className={`flex max-lg:flex-col ${active ? '' : 'max-lg:hidden'} `}>
+        {paths.map((path) => (
+          <HeaderLink href={path.href} key={path.href} onClick={handleLinkClick}>
+            {path.text}
+          </HeaderLink>
+        ))}
       </div>
     </nav>
   )

app/layout.tsx

@@ -1,5 +1,5 @@
 import { ReactNode } from 'react'
-import '../styles/globals.scss'
+import '../styles/globals.css'
 import { Footer } from './footer'
 import { Header } from './header'
 import { Metadata } from 'next'
@@ -32,15 +32,15 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: ReactNode }) {
   return (
     <html lang="en">
-      <body className="has-navbar-fixed-top">
+      <body className="pt-[3.25rem]">
         <Header />
-        <div className={`hero is-fullheight`}>
-          <div className={`hero-body`}>
-            <div className="container is-max-desktop">
+        <div className="min-h-screen flex flex-col justify-between items-stretch">
+          <div className="flex items-center grow shrink-0 py-12 !px-6 md:!px-12 ">
+            <div className="relative grow shrink w-auto my-0 w-full lg:max-w-[960px] mx-auto">
               <main>{children}</main>
             </div>
           </div>
-          <div className="hero-foot">
+          <div className="flex-grow-0 shrink">
             <Footer />
           </div>
         </div>

app/page.tsx

@@ -4,27 +4,29 @@ import AnimatedDivider from '../components/AnimatedDivider'
 import AnimatedHero from '../components/AnimatedHero'
 import AnimatedFireworks from '../components/AnimatedFireworks'
 import Image from 'next/image'
+import React from 'react'
+import { Title } from '@/components/title/Title'
 
 export default function Home() {
   return (
-    <div className={'columns'}>
+    <div className="flex m-[0.75rem]">
       <div className={styles.wendy}>
         <Image src={'/svg/JZ2023-Character-Wendy-cropped.svg'} width={300} height={300} alt={'f'} />
       </div>
 
-      <section className={`has-text-centered`}>
+      <section className="text-center">
         <div className="mb-4">
           <AnimatedHero />
         </div>
 
-        <div>
+        <div className="flex justify-center">
           <AnimatedDivider />
           <AnimatedFireworks />
         </div>
 
-        <h1 className={`title ${styles.fontAndColor} mt-4`}>
+        <Title className={`mt-4 font-['Noto Serif', 'Open Sans', 'serif'] `}>
           Welcome to The Amazing JavaZone 6-7 September in Oslo Spektrum
-        </h1>
+        </Title>
         <div className={'mb-4'}>
           <p>Conference: September 6-7, 2023</p>
           <p>Workshop: September 5, 2023</p>
@@ -34,11 +36,11 @@ export default function Home() {
           <div>
             <Link href="/program">Program</Link> is now ready! 🚀
           </div>
-          <div className="has-text-weight-bold">
+          <div className="font-bold">
             NB! Want to be a partner? Click <Link href="/partners">here</Link>
           </div>
         </div>
-        <div className="mt-6">
+        <div className="flex justify-center mt-6">
           <AnimatedDivider />
         </div>
       </section>

app/partners/PartnerOverview.tsx

@@ -1,4 +1,4 @@
-"use client"
+'use client'
 
 import '../../styles/globals.css'
 import Image from 'next/image'
@@ -15,7 +15,7 @@ interface Props {
 
 export default function PartnerOverview({ partners }: Props) {
   return (
-    <section className="block w-screen bg-[#FED12D] p-4 ml-[calc(-50vw+50%)] mr-[calc(-50vw+50%)]">
+    <section className="block w-screen bg-big-text-color p-4 ml-[calc(-50vw+50%)] mr-[calc(-50vw+50%)]">
       <h1 className="text-2xl text-center text-black uppercase my-4">Partners in 2023</h1>
       <div className="flex flex-wrap justify-center gap-10">
         {[...partners]
@@ -30,7 +30,7 @@ export default function PartnerOverview({ partners }: Props) {
                   className="h-16 w-40 hover:scale-[1.2]"
                   src={partner.logoUrl}
                   alt={partner.name}
-                  style={{"padding":"5px"}}
+                  style={{ padding: '5px' }}
                 />
               </a>
             )