mrege

Parts/Button.js

@@ -1,6 +1,6 @@
 import React from "react"
 import tw, { styled } from "twin.macro"
-import "styled-components/macro"
+ 
 import { colors, colorsDisabled, colorsHover } from "./Colors"
 
 const BtnCreator = function ({ children, type, ...props }) {

Parts/Card.js

@@ -1,6 +1,6 @@
 import React from "react";
 import tw, {styled} from "twin.macro"
-import "styled-components/macro"
+ 
 
 let Card = styled.div(tw`relative flex flex-col min-w-0 break-words bg-primary w-full shadow-xl rounded-2xl`)
 

Parts/Colors.js

@@ -1,6 +1,6 @@
 
 import tw, {styled} from "twin.macro"
-import "styled-components/macro"
+ 
 
 
 export let colors = {

Parts/DropDown.js

@@ -3,7 +3,7 @@ import { createPopper } from "@popperjs/core";
 import { usePopper } from 'react-popper';
 
 import tw, { styled } from "twin.macro"
-import "styled-components/macro"
+ 
 
 import { colors, colorsDisabled, colorsHover, textColors, textColorsHover } from "./Colors";
 

Parts/Input.js

@@ -1,8 +1,9 @@
 import React from "react";
 
 import tw, { styled } from "twin.macro";
-import "styled-components/macro";
-import { useField as useFormikField, useFormikContext } from "formik";
+//import { useField as useFormikField, useFormikContext } from "formik";
+const useFormikField = null;
+const useFormikContext = ()=>{};
 
 export function useField(props){
   let getField = useFormikField;
@@ -15,7 +16,7 @@ export function useField(props){
   return getField(props);
 }
 
-export default function Input({ label, title, className, children, ...props }) {
+export default function Input({ label, title, children, className, ...props }) {
   /*name, id*/
   props.id = props.id ?? props.name ?? title;
 
@@ -48,7 +49,6 @@ export default function Input({ label, title, className, children, ...props }) {
 export function TextArea({
   label,
   title,
-  className,
     children,
   ...props
 }) {
@@ -56,7 +56,7 @@ export function TextArea({
   const [field, meta, helpers] = useField(props);
 
   return (
-    <div css={[title && tw`my-1`]} className={className}>
+    <div css={[title && tw`my-1`]} >
       {title && (
         <label
           {...label}
@@ -92,7 +92,7 @@ export function TextArea({
 export function CheckBox({
   label,
   title,
-  className,
+  
   children,
   ...props
 }) {
@@ -100,7 +100,7 @@ export function CheckBox({
   const [field, meta, helpers] = useField(props); 
 
   return (
-    <div tw="my-1 flex text-secondary" className={className}>
+    <div tw="my-1 flex text-secondary">
       <input
         checked={field.value}
         {...props}

Parts/Layout.js

@@ -1,11 +1,11 @@
 import React from "react"
 import tw, {styled} from "twin.macro"
-import "styled-components/macro"
+ 
 
 const Full = styled.div(tw`w-full lg:px-2 py-2`)
 export {Full}
 
-const Half = styled.div(tw`w-full lg:w-6/12 lg:px-2 py-2`)
+const Half = styled.div(tw`w-full lg:w-8/12 xl:w-6/12 lg:px-2 py-2`)
 export {Half}
 
 const Quarter = styled.div(tw`w-full lg:w-6/12 xl:w-3/12 lg:px-2 py-2 `)
@@ -14,7 +14,7 @@ export {Quarter}
 const Sixth = styled.div(tw`w-full lg:w-1/5 xl:w-1/6 lg:px-2 py-2 `)
 export {Sixth}
 
-const Third = styled.div(tw`w-full lg:w-4/12 lg:px-2 py-2 `)
+const Third = styled.div(tw`w-full lg:w-8/12 xl:w-4/12 lg:px-2 py-2 `)
 export {Third}
 
 const TwoThird = styled.div(tw`w-full lg:w-8/12 lg:px-2 py-2 `)

Parts/Modal.js

@@ -2,7 +2,7 @@ import React from "react"
 import { Half, Third } from "./Layout"
 
 import tw, { styled } from "twin.macro"
-import "styled-components/macro"
+ 
 
 function Modal({ isOpen, onBackdropClick, ...props }) {
   if (isOpen) {

Parts/Pagination.js

@@ -1,6 +1,6 @@
 import Button from "./Button";
 import tw, { styled } from "twin.macro";
-import "styled-components/macro";
+ ;
 
 const Btn = styled(Button)(({ active }) => [tw`rounded-none mx-0`, active && tw`bg-accent`]);
 

Parts/RangeSlider.js

@@ -3,7 +3,7 @@ import React, { useState, useEffect, useRef } from "react";
 import styles from "./RangeSlider.scss"
 
 import tw from "twin.macro"
-import "styled-components/macro"
+ 
 
 
 export function RangeSlider({ value=0, rangeType="", onChange, min=0, max=10, right = true, ...props }) {

Parts/Table.js

@@ -1,6 +1,6 @@
 import React from "react";
 import tw, {styled} from "twin.macro"
-import "styled-components/macro"
+ 
 
 export function Table(props) {
   return <div tw="block w-full overflow-x-auto text-secondary">

Parts/Text.js

@@ -1,6 +1,6 @@
 import React from "react"
 import tw, {styled} from "twin.macro"
-import "styled-components/macro"
+ 
 import { textColors, textColorsHover } from "./Colors"
 
 

globalStyle.js

@@ -1,4 +1,3 @@
-import React, { useState } from "react"
 import { createGlobalStyle } from "styled-components"
 import tw, { theme, GlobalStyles as BaseStyles } from "twin.macro"
 
@@ -68,7 +67,7 @@ body {
 
 const GlobalStyles = () => {
   return <>
-    {/* <BaseStyles /> */}
+    <BaseStyles />
     <CustomStyles />
   </>
 }

styledRegistry.js

@@ -0,0 +1,25 @@
+'use client'
+
+import React, { useState } from 'react'
+import { useServerInsertedHTML } from 'next/navigation'
+import { ServerStyleSheet, StyleSheetManager } from 'styled-components'
+
+export default function StyledComponentsRegistry({ children }) {
+  // Only create stylesheet once with lazy initial state
+  // x-ref: https://reactjs.org/docs/hooks-reference.html#lazy-initial-state
+  const [styledComponentsStyleSheet] = useState(() => new ServerStyleSheet())
+
+  useServerInsertedHTML(() => {
+    const styles = styledComponentsStyleSheet.getStyleElement()
+    styledComponentsStyleSheet.instance.clearTag()
+    return <>{styles}</>
+  })
+
+  if (typeof window !== 'undefined') return <>{children}</>
+
+  return (
+    <StyleSheetManager sheet={styledComponentsStyleSheet.instance}>
+      {children}
+    </StyleSheetManager>
+  )
+}