diff --git a/@docs/assets/logo/taddy_label.svg b/@docs/assets/logo/taddy_label.svg new file mode 100644 index 0000000..f57e37d --- /dev/null +++ b/@docs/assets/logo/taddy_label.svg @@ -0,0 +1,3 @@ + + + diff --git a/@docs/assets/logo/taddy_new.svg b/@docs/assets/logo/taddy_new.svg new file mode 100644 index 0000000..a48a271 --- /dev/null +++ b/@docs/assets/logo/taddy_new.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/@docs/website/components/playground/CompiledCode.tsx b/@docs/website/components/playground/CompiledCode.tsx index 7e17e58..2b16bf3 100644 --- a/@docs/website/components/playground/CompiledCode.tsx +++ b/@docs/website/components/playground/CompiledCode.tsx @@ -1,26 +1,26 @@ -import {css} from 'taddy'; +import { css } from 'taddy'; -import {useAtom} from '@reatom/react'; -import type {PropsWithChildren} from 'react'; +import { useAtom } from '@reatom/react'; +import type { PropsWithChildren } from 'react'; -import {Column, Row} from '../layout'; -import {transformAtom} from './atoms'; -import {Editor} from './Editor'; -import {EditorLayer} from './EditorLayer'; -import {ReactRender} from './ReactRender'; +import { Column, Row } from '../layout'; +import { transformAtom } from './atoms'; +import { Editor } from './Editor'; +import { EditorLayer } from './EditorLayer'; +import { ReactRender } from './ReactRender'; -const Title = ({children}: PropsWithChildren) =>

{children}

; +const Title = ({ children }: PropsWithChildren) =>

{children}

; -const Wrapper = ({children}: PropsWithChildren) => ( +const Wrapper = ({ children }: PropsWithChildren) => (
{children} @@ -31,19 +31,21 @@ export const CompiledCode = ({ showCompiledCode, showCompiledCSS, showRender, + useTest }: { showCompiledCode?: boolean; showCompiledCSS?: boolean; showRender?: boolean; + useTest?: boolean }) => { const data = useAtom(transformAtom); let layerProps: React.ComponentProps = {}; if (data.status === 'error') { - layerProps = {variant: 'error', children: data.error.toString()}; + layerProps = { variant: 'error', children: data.error.toString() }; } else if (data.status === 'pending') { - layerProps = {variant: 'compiling', children: 'Compiling...'}; + layerProps = { variant: 'compiling', children: 'Compiling...' }; } const content = ( @@ -105,7 +107,7 @@ export const CompiledCode = ({ > {content} - +
); }; diff --git a/@docs/website/components/playground/index.tsx b/@docs/website/components/playground/index.tsx index c3e70f2..04a2626 100644 --- a/@docs/website/components/playground/index.tsx +++ b/@docs/website/components/playground/index.tsx @@ -1,15 +1,15 @@ import Head from 'next/head'; -import {css} from 'taddy'; +import { css } from 'taddy'; -import {Column, Row} from '../layout'; +import { Column, Row } from '../layout'; -import {LiveEditor} from './LiveEditor'; -import {Options} from './Options'; -import {CompiledCode} from './CompiledCode'; +import { LiveEditor } from './LiveEditor'; +import { Options } from './Options'; +import { CompiledCode } from './CompiledCode'; -import {createStore} from '@reatom/core'; -import {context} from '@reatom/react'; +import { createStore } from '@reatom/core'; +import { context } from '@reatom/react'; export default function Playground({ initialCode, @@ -18,6 +18,7 @@ export default function Playground({ showCompiledCSS, showRender, persistent, + useTest }: { initialCode?: string; showOptions?: boolean; @@ -25,6 +26,7 @@ export default function Playground({ showCompiledCSS?: boolean; showRender?: boolean; persistent?: boolean; + useTest?: boolean }) { const store = createStore(); @@ -38,7 +40,7 @@ export default function Playground({ > - + {showOptions && } @@ -48,7 +50,7 @@ export default function Playground({ /> diff --git a/@docs/website/package.json b/@docs/website/package.json index c282e0d..74e7517 100644 --- a/@docs/website/package.json +++ b/@docs/website/package.json @@ -18,6 +18,7 @@ "@taddy/babel-plugin": "^0.1.0-alpha.0", "@taddy/next-plugin": "^0.1.0-alpha.0", "filer": "1.4.1", + "framer-motion": "^10.16.4", "history": "5.3.0", "lz-string": "1.5.0", "next": "13.2.4", diff --git a/@docs/website/pages/_app.tsx b/@docs/website/pages/_app.tsx index afdb3be..c35f97b 100644 --- a/@docs/website/pages/_app.tsx +++ b/@docs/website/pages/_app.tsx @@ -5,19 +5,18 @@ import '@docs/website/styles/reset.css'; // import '@taddy/babel-plugin/.cache'; // import '@taddy/babel-plugin/.cache/index.css'; +import { css } from 'taddy'; -import {css} from 'taddy'; +import { MDXProvider } from '@mdx-js/react'; -import {MDXProvider} from '@mdx-js/react'; +import { createStore } from '@reatom/core'; +import { context } from '@reatom/react'; -import {createStore} from '@reatom/core'; -import {context} from '@reatom/react'; - -import {Sidebar} from '@docs/website/components/Sidebar/index'; +import { Sidebar } from '@docs/website/components/Sidebar/index'; import sidebarStyles from '@docs/website/components/Sidebar/styles.module.css'; -import {Link} from '@docs/website/components/Link'; -import {AppProps} from 'next/app'; +import { Link } from '@docs/website/components/Link'; +import { AppProps } from 'next/app'; import ico from '@docs/website/public/favicon.ico'; @@ -26,8 +25,8 @@ const store = createStore(); const components = { a: (props) => , pre: (props) => 
,
-    code: ({...props}) => ,
-    inlineCode: ({className, ...props}) => (
+    code: ({ ...props }) => ,
+    inlineCode: ({ className, ...props }) => (
         
-                        
+                        {name !== 'test' && }
 
                         
 {
+  return (
+    

+      

+        

+          
Start developing with

+          taddy label
+        

+        Go to docs
+      

+    

+  );
+};
+
+
+const styles = {
+  wrapper: css({
+    margin: '100px auto 220px auto',
+  }),
+  banner: css({
+    display: 'flex',
+    flexDirection: 'column',
+    margin: 'auto',
+    padding: '65px',
+    height: '240px',
+    backgroundImage: `url(${banner.src})`,
+    backgroundRepeat: 'no-repeat',
+    backgroundSize: 'contain',
+    backgroundPosition: 'center',
+  }),
+  label: css({
+    marginTop: '8px',
+    marginLeft: '16px'
+  }),
+  text: css({
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+  }),
+  title: css({
+    textAlign: 'center',
+    ...typography.header2,
+    color: colors.background,
+  }),
+  link: css({
+    margin: '16px auto 0 auto',
+    padding: '15px 42px',
+    ...typography.body,
+    color: colors.text,
+    borderRadius: '50px',
+    background: colors.background,
+    transition: 'all 0.2s ease',
+
+    ':hover': {
+      color: '#247eab'
+    }
+  })
+}
\ No newline at end of file
diff --git a/@docs/website/pages/test/components/Footer/Footer.tsx b/@docs/website/pages/test/components/Footer/Footer.tsx
new file mode 100644
index 0000000..5d0ccc0
--- /dev/null
+++ b/@docs/website/pages/test/components/Footer/Footer.tsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import Image from 'next/image';
+
+import { css } from 'taddy';
+
+import taddy from '@docs/website/public/logo/taddy_new.svg';
+import label from '@docs/website/public/logo/taddy_label.svg';
+import { colors, typography } from 'styles/theme';
+
+
+const links = {
+  docs: {
+    title: 'Docs',
+    href: 'https://github.com/lttb/taddy'
+  },
+  github: {
+    title: 'Github',
+    href: 'https://github.com/lttb/taddy'
+  },
+  twitter: {
+    title: 'Twitter',
+    href: 'https://twitter.com/_lttb'
+  }
+}
+
+export const Footer = () => {
+  return (
+    
+  );
+};
+
+
+const styles = {
+  header: css({
+    display: 'flex',
+    flexWrap: 'wrap',
+    // justifyContent: 'center',
+    // padding: '20px 0',
+    padding: '20px 42px',
+    justifyContent: 'space-between',
+    background: '#eef7fd',
+    // '@media': {
+    //   'min-width: 768px': {
+    //     padding: '20px 42px',
+    //     justifyContent: 'space-between',
+    //   }
+    // },
+  }),
+  left: css({
+    display: 'flex'
+  }),
+  right: css({
+    alignSelf: 'center',
+    display: 'flex',
+    alignItems: 'center'
+  }),
+  label: css({
+    marginLeft: '12px',
+    marginTop: '4px'
+  }),
+  link: css({
+    ...typography.body,
+    color: colors.text,
+    marginLeft: '48px',
+    marginBottom: '8px',
+    transition: 'all 0.2s ease',
+
+    ':hover': {
+      color: '#247eab'
+    }
+  })
+}
\ No newline at end of file
diff --git a/@docs/website/pages/test/components/Header/Header.tsx b/@docs/website/pages/test/components/Header/Header.tsx
new file mode 100644
index 0000000..9a04f11
--- /dev/null
+++ b/@docs/website/pages/test/components/Header/Header.tsx
@@ -0,0 +1,78 @@
+import React from 'react';
+import Image from 'next/image';
+
+import { css } from 'taddy';
+
+import taddy from '@docs/website/public/logo/taddy_new.svg';
+import label from '@docs/website/public/logo/taddy_label.svg';
+import { colors, typography } from 'styles/theme';
+
+
+const links = {
+  docs: {
+    title: 'Docs',
+    href: 'https://github.com/lttb/taddy'
+  },
+  github: {
+    title: 'Github',
+    href: 'https://github.com/lttb/taddy'
+  },
+  twitter: {
+    title: 'Twitter',
+    href: 'https://twitter.com/_lttb'
+  }
+}
+
+export const Header = () => {
+  return (
+    

+      

+        taddy logo
+        taddy logo
+      

+      
+    

+  );
+};
+
+
+const styles = {
+  header: css({
+    display: 'flex',
+    flexWrap: 'wrap',
+    padding: '0 42px',
+    justifyContent: 'space-between',
+    // '@media': {
+    //   'min-width: 768px': {
+    //     padding: '0 42px',
+    //     justifyContent: 'space-between',
+    //   }
+    // },
+  }),
+  left: css({
+    display: 'flex'
+  }),
+  right: css({
+    alignSelf: 'center',
+    display: 'flex',
+    alignItems: 'center'
+  }),
+  label: css({
+    marginLeft: '12px',
+    marginTop: '4px'
+  }),
+  link: css({
+    ...typography.body,
+    color: colors.text,
+    marginLeft: '48px',
+    transition: 'all 0.2s ease',
+
+    ':hover': {
+      color: '#247eab'
+    }
+  })
+}
\ No newline at end of file
diff --git a/@docs/website/pages/test/components/Hero/Hero.tsx b/@docs/website/pages/test/components/Hero/Hero.tsx
new file mode 100644
index 0000000..d97d4c5
--- /dev/null
+++ b/@docs/website/pages/test/components/Hero/Hero.tsx
@@ -0,0 +1,156 @@
+import React from 'react';
+
+import { css } from 'taddy';
+import { colors, typography } from 'styles/theme';
+
+import { motion } from 'framer-motion';
+
+import taddy from '@docs/website/public/logo/taddy_new.svg';
+import label from '@docs/website/public/logo/taddy_label.svg';
+
+import polygon1 from '@docs/website/public/logo/polygons/Polygon 1.svg';
+import polygon2 from '@docs/website/public/logo/polygons/Polygon 2.svg';
+import polygon3 from '@docs/website/public/logo/polygons/Polygon 3.svg';
+import polygon5 from '@docs/website/public/logo/polygons/Polygon 5.svg';
+import polygon6 from '@docs/website/public/logo/polygons/Polygon 6.svg';
+import polygon7 from '@docs/website/public/logo/polygons/Polygon 7.svg';
+
+import Image from 'next/image';
+
+
+export const Hero = () => {
+  return (
+    

+      

+        Minimal bundle sizes and{' '}
+        maximum performance with taddy,
+        atomic compile-time CSS-in-JS library for any framework.
+      

+      

+        taddy label
+        
+          taddy logo
+        
+        

+          
$ npm install --save taddy

+          Github
+          Get ready
+        

+      

+      

+        polygon
+        polygon
+        polygon
+        polygon
+        polygon
+        polygon
+      

+    

+  );
+};
+
+const styles = {
+  wrapper: css({
+    position: 'relative',
+    padding: '0 42px'
+    // '@media': {
+    //   'min-width: 768px': {
+    //     padding: '0 42px',
+    //   }
+    // },
+  }),
+  h1: css({
+    ...typography.caption,
+    color: colors.text,
+    margin: 0,
+    marginTop: '60px',
+    maxWidth: '690px'
+  }),
+  blue: css({
+    color: '#247eab'
+  }),
+  mainContainer: css({
+    display: 'flex',
+    flexWrap: 'wrap',
+    justifyContent: 'space-between',
+    height: '380px',
+  }),
+  logo: css({
+    flex: '0 0 33%',
+    animation: 'float 7s ease-in-out infinite'
+  }),
+  buttons: css({
+    alignSelf: 'flex-end',
+    flex: '0 0 33%'
+    // '@media': {
+    //   'min-width: 768px': {
+    //     flex: '0 0 33%',
+    //   }
+    // },
+  }),
+  button: css({
+    display: 'inline-block',
+    marginRight: '12px',
+    marginTop: '12px',
+    padding: '15px 42px',
+    ...typography.body,
+    color: colors.primary,
+    borderRadius: '50px',
+    background: 'linear-gradient(90deg, #aed3e5 0%, #e7f0fd 100%)',
+    backgroundColor: '#3596ff',
+    transition: 'all 0.2s ease',
+
+    ':hover': {
+      color: colors.background
+    }
+  }),
+  install: css({
+    ...typography.body,
+    color: '#e55454'
+  })
+}
+
+
+const polygons = {
+  one: css.mixin({
+    top: '256px',
+    left: '239px'
+  }),
+  two: css.mixin({
+    top: '320px',
+    left: '340px'
+  }),
+  three: css.mixin({
+    top: '332px',
+    left: '94px'
+  }),
+  five: css.mixin({
+    top: '54px',
+    right: '269px'
+  }),
+  six: css.mixin({
+    top: '175px',
+    right: '225px'
+  }),
+  seven: css.mixin({
+    top: '45px',
+    right: '110px'
+  }),
+  common: css.mixin({
+    position: 'absolute',
+    animation: 'rotate 7s ease-in-out infinite'
+  })
+}
\ No newline at end of file
diff --git a/@docs/website/pages/test/components/KeyFeatures/KeyFeatures.tsx b/@docs/website/pages/test/components/KeyFeatures/KeyFeatures.tsx
new file mode 100644
index 0000000..144a91c
--- /dev/null
+++ b/@docs/website/pages/test/components/KeyFeatures/KeyFeatures.tsx
@@ -0,0 +1,97 @@
+import React from 'react';
+
+import { css } from 'taddy';
+import { colors, typography } from 'styles/theme';
+
+const texts = [
+  {
+    title: 'Compile-time Atomic Style',
+    text: 'generates optimized atomic styles during the build process, resulting in minimal'
+  },
+  {
+    title: 'Mixins and Composes',
+    text: 'create reusable styling objects and easily apply and combine them to your styles'
+  },
+  {
+    title: 'Framework-Agnostic',
+    text: 'can be used with any JS framework or environment, making it highly versatile and adaptable'
+  },
+  {
+    title: 'Efficient and Performant',
+    text: 'optimizes the CSS output by reducing duplication and generating atomic class names'
+  },
+  {
+    title: 'Autocomplete',
+    text: 'with TypeScript support, taddy ensures type safety, allowing you to catch errors and get code suggestions for styles'
+  },
+  {
+    title: 'Developer Experience',
+    text: 'intuitive API and powerful features make it easy to write clean and maintainable styles for your components'
+  }
+]
+
+
+
+export const KeyFeatures = () => {
+  return (
+    

+      
Key features

+      

+        {texts.map(({ title, text }, index) => (
+          

+            🧸
+            

+              
{title}

+              {text}
+            

+          

+        ))}
+      

+    

+  );
+};
+
+const styles = {
+  wrapper: css({
+    padding: '80px 180px 120px 180px',
+    background: 'linear-gradient(180deg, #aed3e5 0%, #e7f0fd 100%)',
+  }),
+  title: css({
+    textAlign: 'center',
+    ...typography.header2,
+    color: colors.primary,
+    marginBottom: '45px'
+  }),
+  blocks: css({
+    display: 'grid',
+    gridGap: '36px 95px',
+    gridTemplateColumns: '1fr 1fr',
+    maxWidth: '900px',
+    margin: 'auto'
+  }),
+  block: css({
+    display: 'flex',
+    padding: '16px 20px',
+    background: 'rgba(255, 255, 255, 0.90)',
+    borderRadius: '16px',
+    color: colors.primary,
+    boxShadow: '0px 3px 10px 0px rgba(16, 60, 78, 0.15)'
+  }),
+  taddy: css({
+    marginTop: '-6px',
+    fontSize: '24px'
+  }),
+  right: css({
+    marginLeft: '12px'
+  }),
+  feature: css({
+    marginBottom: '4px',
+    ...typography.body,
+    fontWeight: 700,
+  }),
+  text: css({
+    fontSize: '16px',
+    fontWeight: '400',
+    color: colors.text
+  })
+}
\ No newline at end of file
diff --git a/@docs/website/pages/test/components/MadeFor/MadeFor.tsx b/@docs/website/pages/test/components/MadeFor/MadeFor.tsx
new file mode 100644
index 0000000..81cfb67
--- /dev/null
+++ b/@docs/website/pages/test/components/MadeFor/MadeFor.tsx
@@ -0,0 +1,46 @@
+import React from 'react';
+
+import { css } from 'taddy';
+import { colors, typography } from 'styles/theme';
+
+
+
+export const MadeFor = () => {
+  return (
+    

+      
Made for

+      

+        {['React Native', 'React', 'Svelte', 'Next.js', 'Nuxt', 'Vue', 'Parcel', 'Remix', 'Solid'].map((name) => (
+          {name}
+        ))}
+      

+    

+  );
+};
+
+const styles = {
+  wrapper: css({
+    margin: '120px 84px 0 84px',
+    padding: '70px 120px',
+  }),
+  title: css({
+    textAlign: 'center',
+    ...typography.header2,
+    color: colors.primary
+  }),
+  names: css({
+    marginTop: '24px',
+    display: 'flex',
+    justifyContent: 'center',
+    flexWrap: 'wrap'
+  }),
+  name: css({
+    marginRight: '42px',
+    marginBottom: '24px',
+    padding: '15px 36px',
+    border: `1px solid #aed3e5`,
+    borderRadius: '64px',
+    color: colors.primary,
+    ...typography.body
+  }),
+}
\ No newline at end of file
diff --git a/@docs/website/pages/test/components/Playground/Playground.tsx b/@docs/website/pages/test/components/Playground/Playground.tsx
new file mode 100644
index 0000000..067aa75
--- /dev/null
+++ b/@docs/website/pages/test/components/Playground/Playground.tsx
@@ -0,0 +1,81 @@
+import React from 'react';
+import dynamic from 'next/dynamic';
+
+import { css } from 'taddy';
+import { colors, typography } from 'styles/theme';
+
+
+const Playground = dynamic(
+  () => import('@docs/website/components/playground'),
+  {
+    ssr: false,
+    loading: () => 
loading ...
,
+  },
+);
+
+
+
+export const PlaygroundSection = () => {
+  return (
+    

+      
Playground

+      You can try taddy right now
+
+      

+         {
+        return (
+          
+        );
+      };
+      `}
+        />
+      

+    

+  );
+};
+
+const styles = {
+  wrapper: css({
+    marginTop: '120px',
+    padding: '0 120px',
+    textAlign: 'center'
+  }),
+  title: css({
+    ...typography.header2,
+    color: colors.primary
+  }),
+  subtitle: css({
+    fontFamily: 'Inter',
+    fontSize: '20px',
+    fontWeight: 400,
+  }),
+  container: css({
+    marginTop: '24px'
+  })
+}
\ No newline at end of file
diff --git a/@docs/website/pages/test/index.tsx b/@docs/website/pages/test/index.tsx
new file mode 100644
index 0000000..9127fd3
--- /dev/null
+++ b/@docs/website/pages/test/index.tsx
@@ -0,0 +1,23 @@
+import { Header } from './components/Header/Header';
+import { Footer } from './components/Footer/Footer';
+import { Hero } from './components/Hero/Hero';
+import { MadeFor } from './components/MadeFor/MadeFor';
+import { KeyFeatures } from './components/KeyFeatures/KeyFeatures';
+import { Banner } from './components/Banner/Banner';
+import { PlaygroundSection } from './components/Playground/Playground';
+
+export default function Home() {
+  return (
+    <>
+      

+      

+        
+        
+        
+        
+        
+      

+