Convert scss to tailwind and setup npm module

app/layout.tsx

@@ -1,3 +1,4 @@
+import '../styles.css';
 import Providers from '@components/Providers';
 
 export default function RootLayout({ children }: { children: React.ReactNode }) {

app/manifest.ts

@@ -1,4 +1,4 @@
-import Package from '@root/package.json';
+import Package from '../package.json';
 
 import { MetadataRoute } from 'next';
 

app/page.tsx

@@ -1,4 +1,4 @@
-import '@root/global.scss';
+import '../styles.css';
 
 import * as Constants from '@common/constants';
 import * as Utilities from '@common/utilities';
@@ -58,7 +58,7 @@ import ModalStack from '@components/ModalStack';
 import ModalTrigger from '@components/ModalTrigger';
 import Navigation from '@components/Navigation';
 import NumberRangeSlider from '@components/NumberRangeSlider';
-import Package from '@root/package.json';
+import Package from '../package.json';
 import RadioButtonGroup from '@components/RadioButtonGroup';
 import Row from '@components/Row';
 import RowSpaceBetween from '@components/RowSpaceBetween';
@@ -72,13 +72,13 @@ import Text from '@components/Text';
 import TextArea from '@components/TextArea';
 import TreeView from '@components/TreeView';
 import UpdatingDataTable from '@components/examples/UpdatingDataTable';
-import ModalDOMSnake from '@root/components/modals/ModalDOMSnake';
+import ModalDOMSnake from '@components/modals/ModalDOMSnake';
 
 export const dynamic = 'force-static';
 
 // NOTE(jimmylee)
 // https://nextjs.org/docs/app/api-reference/functions/generate-metadata
-export async function generateMetadata({ params, searchParams }) {
+export async function generateMetadata({ params, searchParams }: any) {
   const title = Package.name;
   const description = Package.description;
   const url = 'https://sacred.computer';
@@ -126,7 +126,7 @@ export async function generateMetadata({ params, searchParams }) {
 
 // NOTE(jimmylee)
 // https://nextjs.org/docs/pages/building-your-application/routing/pages-and-layouts
-export default async function Page(props) {
+export default async function Page(props: any) {
   return (
     <DefaultLayout previewPixelSRC="https://intdev-global.s3.us-west-2.amazonaws.com/template-app-icon.png">
       <br />

components/Accordion.tsx

@@ -1,19 +1,24 @@
 'use client';
 
-import styles from '@components/Accordion.module.scss';
-
 import * as React from 'react';
-import * as Utilities from '@common/utilities';
+import clsx from 'clsx';
 
 import Row from '@components/Row';
 
-interface AccordionProps {
+const styles = {
+  flex: "flex items-center justify-between hover:bg-[var(--theme-focused-foreground)]",
+  icon: "flex-shrink-0 select-none cursor-pointer",
+  content: "min-w-[10%] w-full select-none cursor-pointer transition-[padding] duration-200 ease",
+  active: "pl-[1ch]"
+};
+
+export interface AccordionProps {
   defaultValue?: boolean;
   title: string;
   children?: React.ReactNode;
 }
 
-const Accordion: React.FC<AccordionProps> = ({ defaultValue = false, title, children }) => {
+export const Accordion: React.FC<AccordionProps> = ({ defaultValue = false, title, children }) => {
   const [show, setShow] = React.useState<boolean>(defaultValue);
   const accordionRef = React.useRef<HTMLDivElement | null>(null);
 
@@ -24,9 +29,9 @@ const Accordion: React.FC<AccordionProps> = ({ defaultValue = false, title, chil
   return (
     <>
       <Row ref={accordionRef} tabIndex={0} role="button" onClick={toggleShow} aria-expanded={show}>
-        <div className={Utilities.classNames(styles.flex, show ? styles.active : undefined)}>
+        <div className={clsx(styles.flex)}>
           <span className={styles.icon}>{show ? '▾' : '▸'}</span>
-          <span className={styles.content}>{title}</span>
+          <span className={clsx(styles.content, show && styles.active)}>{title}</span>
         </div>
       </Row>
       {show && <Row style={{ paddingLeft: '1ch' }}>{children}</Row>}

components/ActionBar.tsx

@@ -1,11 +1,9 @@
-import styles from '@components/ActionBar.module.scss';
-
 import * as React from 'react';
-import * as Utilities from '@common/utilities';
+import clsx from 'clsx';
 
 import ButtonGroup from '@components/ButtonGroup';
 
-interface ActionBarItem {
+export interface ActionBarItem {
   hotkey?: string;
   onClick?: () => void;
   openHotkey?: string;
@@ -14,11 +12,15 @@ interface ActionBarItem {
   items?: any;
 }
 
-interface ActionBarProps {
+export interface ActionBarProps {
   items: ActionBarItem[];
 }
 
-const ActionBar: React.FC<ActionBarProps> = ({ items }) => {
+const styles = {
+  root: "bg-[var(--theme-background)] shadow-[inset_0_0_0_1px_var(--theme-border)]"
+};
+
+export const ActionBar: React.FC<ActionBarProps> = ({ items }) => {
   return (
     <div className={styles.root}>
       <ButtonGroup items={items} />

components/ActionButton.tsx

@@ -1,9 +1,9 @@
-import styles from '@components/ActionButton.module.scss';
-
 import * as React from 'react';
+import clsx from 'clsx';
+
 import * as Utilities from '@common/utilities';
 
-interface ActionButtonProps {
+export interface ActionButtonProps {
   onClick?: () => void;
   hotkey?: any;
   children?: React.ReactNode;
@@ -12,11 +12,18 @@ interface ActionButtonProps {
   isSelected?: boolean;
 }
 
-const ActionButton = React.forwardRef<HTMLDivElement, ActionButtonProps>(({ onClick, hotkey, children, style, rootStyle, isSelected }, ref) => {
+const styles = {
+  root: "inline-flex items-center justify-between cursor-pointer outline-0 border-0 m-0 p-0 box-border font-[var(--font-family-mono)] text-[var(--font-size)] flex-shrink-0",
+  hotkey: "bg-[var(--theme-button-foreground)] text-[var(--theme-text)] cursor-pointer flex-shrink-0 font-normal px-[1ch] text-indent-0 select-none group-hover:bg-[var(--theme-focused-foreground)] group-focus:bg-[var(--theme-focused-foreground)]",
+  content: "bg-[var(--theme-button-background)] shadow-[inset_0_0_0_2px_var(--theme-button-foreground)] cursor-pointer flex-shrink-0 font-normal px-[1ch] text-indent-0 uppercase select-none group-hover:shadow-[inset_0_0_0_2px_var(--theme-focused-foreground)] group-focus:shadow-[inset_0_0_0_2px_var(--theme-focused-foreground)]",
+  selected: "bg-[var(--theme-focused-foreground)]"
+};
+
+export const ActionButton = React.forwardRef<HTMLDivElement, ActionButtonProps>(({ onClick, hotkey, children, style, rootStyle, isSelected }, ref) => {
   return (
-    <div className={Utilities.classNames(styles.root, isSelected ? styles.selected : null)} style={rootStyle} onClick={onClick} tabIndex={0} ref={ref} role="button">
+    <div className={clsx(styles.root, 'group', isSelected && styles.selected)} style={rootStyle} onClick={onClick} tabIndex={0} ref={ref} role="button">
       {Utilities.isEmpty(hotkey) ? null : <span className={styles.hotkey}>{hotkey}</span>}
-      <span className={styles.content} style={style}>
+      <span className={clsx(styles.content, isSelected && styles.selected)} style={style}>
         {children}
       </span>
     </div>

components/ActionListItem.tsx

@@ -1,8 +1,12 @@
-import styles from '@components/ActionListItem.module.scss';
-
 import * as React from 'react';
 
-interface ActionListItemProps {
+const styles = {
+  item: "flex items-center justify-between bg-transparent text-[var(--theme-text)] cursor-pointer outline-0 border-0 no-underline group !no-underline h-[calc(var(--theme-line-height-base)*1rem)]",
+  icon: "flex items-center justify-center bg-[var(--theme-button-foreground)] flex-shrink-0 w-[3ch] h-full select-none group-hover:bg-[var(--theme-focused-foreground)] group-focus:bg-[var(--theme-focused-foreground)]",
+  text: "inline-flex items-center justify-start bg-[var(--theme-button-background)] min-w-[10%] w-full px-[1ch] select-none h-full"
+};
+
+export interface ActionListItemProps {
   style?: React.CSSProperties;
   icon?: React.ReactNode;
   children?: React.ReactNode;
@@ -11,7 +15,7 @@ interface ActionListItemProps {
   onClick?: React.MouseEventHandler<HTMLDivElement | HTMLAnchorElement>;
 }
 
-const ActionListItem: React.FC<ActionListItemProps> = (props) => {
+export const ActionListItem: React.FC<ActionListItemProps> = (props) => {
   const { href, target, onClick, children, icon, style } = props;
 
   if (href) {

components/AlertBanner.tsx

@@ -1,16 +1,19 @@
-import styles from '@components/AlertBanner.module.scss';
-
 import * as React from 'react';
+import clsx from 'clsx';
+
+const styles = {
+  root: "block bg-[var(--theme-border)] shadow-[1ch_1ch_0_0_var(--theme-border-subdued)] px-[2ch] py-[calc(var(--font-size)*var(--theme-line-height-base))] font-normal"
+};
 
-interface AlertBannerProps {
+export interface AlertBannerProps {
   style?: any;
   children?: any;
 }
 
-const AlertBanner: React.FC<AlertBannerProps> = ({ style: propStyle, ...rest }) => {
+export const AlertBanner: React.FC<AlertBannerProps> = ({ style: propStyle, ...rest }) => {
   let style: React.CSSProperties = { ...propStyle };
 
-  return <div className={styles.root} {...rest} style={style} />;
+  return <div className={clsx(styles.root)} {...rest} style={style} />;
 };
 
 export default AlertBanner;