KynaAcademy · StevenMater · Jan 6, 2023 · Jan 6, 2023 · Jan 6, 2023 · Jan 6, 2023
diff --git a/.storybook/main.js b/.storybook/main.js
@@ -6,6 +6,14 @@ module.exports = {
     "@storybook/addon-interactions",
     "storybook-addon-designs",
     "storybook-dark-mode",
+    {
+      name: "@storybook/addon-postcss",
+      options: {
+        postcssLoaderOptions: {
+          implementation: require("postcss"),
+        },
+      },
+    },
   ],
   framework: "@storybook/react",
 };
diff --git a/.storybook/preview.js b/.storybook/preview.js
@@ -1,47 +1 @@
-import React, { Children, useContext } from "react";
-import { Theme, ThemeProvider } from "../src";
-import { GlobalStyles } from "../src/GlobalStyles";
-import { useDarkMode } from "storybook-dark-mode";
-import tw, { css } from "twin.macro";
-
-export const parameters = {
-  actions: { argTypesRegex: "^on[A-Z].*" },
-  controls: {
-    matchers: {
-      color: /(background|color)$/i,
-      date: /Date$/,
-    },
-  },
-};
-
-const backgroundColor = css`
-  html {
-    background-color: ${tw`bg-white`};
-
-    &.dark {
-      background-color: ${tw`bg-slate-800`};
-    }
-  }
-`;
-
-const StoryWrapper = ({ children }) => {
-  const dark = useDarkMode();
-  const { overrideMode } = useContext(Theme);
-  overrideMode(dark ? "dark" : "light");
-  return <>{children}</>;
-};
-
-export const decorators = [
-  (Story) => {
-    return (
-      <ThemeProvider>
-        <StoryWrapper>
-          <GlobalStyles />
-          <div css={backgroundColor}>
-            <Story />
-          </div>
-        </StoryWrapper>
-      </ThemeProvider>
-    );
-  },
-];
+import "../styles/globals.css";
diff --git a/package.json b/package.json
@@ -23,7 +23,9 @@
     "@swc/helpers": "^0.4.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-helmet": "^6.1.0"
+    "react-helmet": "^6.1.0",
+    "tailwind-styled-components": "^2.2.0",
+    "twin.macro": "^3.1.0"
   },
   "devDependencies": {
     "@babel/core": "^7.18.5",
@@ -35,6 +37,7 @@
     "@storybook/addon-essentials": "^6.5.9",
     "@storybook/addon-interactions": "^6.5.9",
     "@storybook/addon-links": "^6.5.9",
+    "@storybook/addon-postcss": "^2.0.0",
     "@storybook/addons": "^6.5.9",
     "@storybook/builder-webpack4": "^6.5.9",
     "@storybook/manager-webpack4": "^6.5.9",
@@ -45,19 +48,19 @@
     "@types/react": "^18.0.14",
     "@types/react-dom": "^18.0.5",
     "@types/react-helmet": "^6.1.5",
-    "autoprefixer": "^10.4.7",
+    "autoprefixer": "^10.4.13",
     "babel-loader": "^8.2.5",
     "babel-plugin-macros": "^3.1.0",
     "babel-plugin-twin": "^1.0.2",
     "chromatic": "^6.5.6",
     "jest": "27",
     "parcel": "^2.6.0",
+    "postcss": "^8.4.20",
     "process": "^0.11.10",
     "storybook": "^6.5.9",
     "storybook-addon-designs": "^6.3.1",
     "storybook-dark-mode": "^1.1.0",
-    "tailwindcss": "^3.1.3",
-    "twin.macro": "^2.8.2",
+    "tailwindcss": "^3.2.4",
     "typescript": "^4.7.4"
   },
   "browserslist": "> 0.5%, last 2 versions, not dead",

diff --git a/postcss.config.js b/postcss.config.js
@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}
diff --git a/src/GlobalStyles.tsx b/src/GlobalStyles.tsx
@@ -1,7 +1,9 @@
-import React from "react";
+import "../styles/globals.css";
+
+import tw, { GlobalStyles as BaseStyles, css, styled, theme } from "twin.macro";
+
 import { Global } from "@emotion/react";
 import { Helmet } from "react-helmet";
-import tw, { css, styled, theme, GlobalStyles as BaseStyles } from "twin.macro";
 import { useMode } from "./hooks/useMode";
 
 const customStyles = css`
@@ -10,6 +12,7 @@ const customStyles = css`
     ${tw`antialiased`}
   }
 `;
+// todo - fix single prop types (primary !== boolean), see error message in console
 
 type HtmlProps = { dark: boolean };
 const HTML = styled.html<HtmlProps>(({ dark }) => [tw`h-full`, dark && "dark"]);
@@ -37,7 +40,6 @@ export const GlobalStyles = () => {
         />
         <BODY dark={mode(false, true)} />
       </Helmet>
-      <BaseStyles />
       <Global styles={customStyles} />
     </>
   );

diff --git a/src/components/Branding/Logo.stories.tsx b/src/components/Branding/Logo.stories.tsx
@@ -1,5 +1,3 @@
-import "twin.macro";
-
 import { ComponentMeta } from "@storybook/react";
 import { Logo } from "./Logo";
 import React from "react";
@@ -21,7 +19,7 @@ export default {
 
 // More on component templates: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
 const Template = (args) => (
-  <div tw="w-96">
+  <div className="w-96">
     <Logo {...args} />
   </div>
 );

diff --git a/src/components/Marketing/Guide.stories.tsx b/src/components/Marketing/Guide.stories.tsx
@@ -1,7 +1,7 @@
-import React from "react";
-import { ComponentMeta } from "@storybook/react";
-import { Guide, GuideProps } from "./Guide";
 import { AcademicCapIcon } from "@heroicons/react/solid";
+import { ComponentMeta } from "@storybook/react";
+import { Guide } from "./Guide";
+import React from "react";
 
 // More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {

diff --git a/src/components/Marketing/Guide.tsx b/src/components/Marketing/Guide.tsx
@@ -1,6 +1,6 @@
 import { FunctionComponent, ReactNode } from "react";
-import { useMode } from "../../hooks/useMode";
-import tw, { styled } from "twin.macro";
+
+import tw from "tailwind-styled-components";
 
 type BullitType = "numbers" | "checks" | ReactNode;
 
@@ -19,53 +19,108 @@ const Bullit: FunctionComponent<BullitProps> = ({ type, num }) => {
   switch (type) {
     case "numbers":
       return (
-        <span tw="flex rounded-full bg-pink-600 text-white p-4 w-6 h-6 mr-2 items-center">
-          <span tw="block -ml-1">{num}</span>
-        </span>
+        <BullitWrapper>
+          <NumWrapper>{num}</NumWrapper>
+        </BullitWrapper>
       );
 
     case "checks":
-      return <span tw="mr-2 text-2xl font-black">✔</span>;
+      return <ChecksWrapper>✔</ChecksWrapper>;
 
     default:
-      return <span tw="mr-2">{type}</span>;
+      return <DefaultWrapper>{type}</DefaultWrapper>;
   }
 };
 
-const Section = styled.section(() => {
-  const mode = useMode();
-  return [
-    tw`p-0 m-0 text-slate-900 dark:text-slate-200`,
-    mode(tw`text-slate-900`, tw`text-slate-200`),
-  ];
-});
-
 export const Guide: FunctionComponent<GuideProps> = ({
   title,
   items,
   bullit,
 }) => {
   return (
-    <Section>
-      <div tw="container">
-        <h1 tw="text-3xl font-extrabold font-serif capitalize sm:text-4xl lg:text-5xl lg:text-center">
-          {title}
-        </h1>
-        <article tw="w-full lg:mx-16 lg:max-w-lg">
-          <ul tw="flex my-8 space-y-2 flex-col">
+    <SectionWrapper>
+      <div className="container">
+        <GuideHeader>{title}</GuideHeader>
+        <GuideArticle>
+          <GuideUl>
             {items.map((item, i) => (
-              <li tw="flex items-center font-black font-sans text-lg" key={i}>
+              <GuideLi key={i}>
                 <Bullit type={bullit} num={i + 1} />
                 {item}
-              </li>
+              </GuideLi>
             ))}
-          </ul>
-        </article>
+          </GuideUl>
+        </GuideArticle>
       </div>
-    </Section>
+    </SectionWrapper>
   );
 };
 
 Guide.defaultProps = {
   bullit: "numbers",
 };
+
+const SectionWrapper = tw.section`
+p-0
+m-0
+text-slate-900
+dark:text-slate-200
+`;
+
+const BullitWrapper = tw.span`
+flex
+rounded-full
+bg-pink-600
+text-white
+p-4
+w-6
+h-6
+mr-2
+items-center
+`;
+
+const NumWrapper = tw.span`
+block
+-ml-1
+`;
+
+const ChecksWrapper = tw.span`
+mr-2
+text-2xl
+font-black
+`;
+
+const DefaultWrapper = tw.span`
+mr-2
+`;
+
+const GuideHeader = tw.h1`
+text-3xl
+font-extrabold
+font-serif
+capitalize
+sm:text-4xl
+lg:text-5xl
+lg:text-center
+`;
+
+const GuideArticle = tw.article`
+w-full
+lg:mx-16
+lg:max-w-lg
+`;
+
+const GuideUl = tw.ul`
+flex
+my-8
+space-y-2
+flex-col
+`;
+
+const GuideLi = tw.li`
+flex
+items-center
+font-black
+font-sans
+text-lg
+`;