Merge pull request #62 from apptension/feature/element

feat: add element

lib/default/forms/92daef9d-18d8-4716-9146-8b840cbe7cd1/index.js

@@ -1,5 +1,3 @@
-import '../../../../../src/styles/globals.css';
-
 export default function () {
   return <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Button</button>;
 }

lib/default/forms/formLayouts/586b4ad0-9949-4000-b6bf-202db8fea36f/index.js

@@ -1,5 +1,3 @@
-import '../../../../../src/styles/globals.css';
-
 export default function () {
   return <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Button</button>;
 }

lib/default/lists/4494f6cd-d586-4685-8647-1e7d5c713669/index.js

@@ -1,5 +1,3 @@
-import '../../../../../src/styles/globals.css';
-
 export default function () {
   return <button class="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded">Button</button>;
 }

next.config.js

@@ -3,4 +3,10 @@ module.exports = {
   images: {
     domains: ['avatars.githubusercontent.com'],
   },
+  webpack: (config, { isServer }) => {
+    if (!isServer) {
+      config.resolve.fallback.fs = false;
+    }
+    return config;
+  },
 };

package.json

@@ -21,7 +21,8 @@
     "date-fns": "^2.27.0",
     "next": "12.0.5",
     "react": "17.0.2",
-    "react-dom": "17.0.2"
+    "react-dom": "17.0.2",
+    "react-syntax-highlighter": "^15.4.5"
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",

src/components/element/elementBox/elementBox.component.js

@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import clsx from 'clsx';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { dracula } from 'react-syntax-highlighter/dist/cjs/styles/prism';
+
+import { ELEMENT_BOX_MODE } from './elementBox.const';
+
+export function ElementBoxComponent({ author, description, Component, source }) {
+  const [mode, setMode] = useState(ELEMENT_BOX_MODE.PREVIEW);
+  const handlePreview = () => setMode(ELEMENT_BOX_MODE.PREVIEW);
+  const handleSource = () => setMode(ELEMENT_BOX_MODE.SOURCE);
+  return (
+    <div className="bg-blue-100 p-4 rounded">
+      <div className="flex justify-between">
+        <p>{description}</p>
+        <p>by {author}</p>
+      </div>
+      <div className="flex justify-center">
+        <button
+          onClick={handlePreview}
+          className={clsx(
+            {
+              'border-blue-500 text-gray-900': mode === ELEMENT_BOX_MODE.PREVIEW,
+              'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700':
+                mode !== ELEMENT_BOX_MODE.PREVIEW,
+            },
+            'inline-flex items-center px-1 pt-1 border-b-2 text-m font-medium'
+          )}
+        >
+          Preview
+        </button>
+        <button
+          onClick={handleSource}
+          className={clsx(
+            {
+              'border-blue-500 text-gray-900': mode === ELEMENT_BOX_MODE.SOURCE,
+              'border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700':
+                mode !== ELEMENT_BOX_MODE.SOURCE,
+            },
+            'inline-flex items-center px-1 pt-1 border-b-2 text-m font-medium'
+          )}
+        >
+          Source
+        </button>
+      </div>
+      <div className="bg-white">
+        {mode === ELEMENT_BOX_MODE.PREVIEW && (
+          <div className="h-32 flex justify-center items-center">{Component.default()}</div>
+        )}
+        {mode === ELEMENT_BOX_MODE.SOURCE && (
+          <SyntaxHighlighter showLineNumbers language="javascript" style={dracula}>
+            {source}
+          </SyntaxHighlighter>
+        )}
+      </div>
+    </div>
+  );
+}

src/components/element/elementBox/elementBox.const.js

@@ -0,0 +1,4 @@
+export const ELEMENT_BOX_MODE = {
+  PREVIEW: 'PREVIEW',
+  SOURCE: 'SOURCE',
+};

src/components/element/elementBox/index.js

@@ -0,0 +1 @@
+export { ElementBoxComponent as ElementBox } from './elementBox.component';

src/components/element/elementList/elementList.component.js

@@ -0,0 +1,14 @@
+import { useElement } from '../../../modules/element';
+import { ElementBox } from '../elementBox';
+
+export function ElementListComponent() {
+  const { elements } = useElement();
+
+  return (
+    <div className="mt-10 max-w-7xl mx-auto">
+      {elements.map((data) => (
+        <ElementBox key={data.id} {...data} />
+      ))}
+    </div>
+  );
+}

src/components/element/elementList/index.js

@@ -0,0 +1 @@
+export { ElementListComponent as ElementList } from './elementList.component';

src/components/footer/footer.component.js

@@ -1,7 +1,7 @@
 export function FooterComponent() {
   return (
     <footer className="w-full h-16 flex justify-center items-center bg-blue-500 mt-8">
-      <p className="text-white">Made with ❤️ by Apptension / NY</p>
+      <p className="text-white">Made with ❤️ by Apptension</p>
     </footer>
   );
 }

src/components/home/homeHero/homeHero.component.js

@@ -1,7 +1,7 @@
 export function HomeHeroComponent() {
   return (
     <div className="bg-blue-500 h-96 w-full flex justify-center items-center">
-      <p className="text-white text-7xl">Something about the project</p>
+      <p className="text-white text-7xl">Community-Driven Tailwind UI Kit</p>
     </div>
   );
 }

src/components/home/homeResults/homeCategory/homeCategory.component.js

@@ -1,7 +1,7 @@
 import { HomeResult } from '../homeResult';
 
 export function HomeCategoryComponent({ category, items }) {
-  const renderItem = ({ type, count }) => <HomeResult type={type} count={count} />;
+  const renderItem = ({ url, count, label }) => <HomeResult url={url} count={count} label={label} />;
   return (
     <div className="mt-8">
       <h3 className="text-xl uppercase  mb-2">{category}</h3>

src/components/home/homeResults/homeResult/homeResult.component.js

@@ -1,8 +1,21 @@
-export function HomeResultComponent({ type, count }) {
+import clsx from 'clsx';
+import Link from 'next/link';
+import { ROUTES } from '../../../../utils/routes';
+
+export function HomeResultComponent({ url, count, label }) {
   return (
-    <div className="bg-blue-500 text-white relative rounded h-60 flex justify-center items-center">
-      {type}
-      <div className="absolute bottom-2 right-2">{count}</div>
-    </div>
+    <Link href={ROUTES.element(url)}>
+      <a
+        className={clsx({
+          'cursor-not-allowed opacity-80 pointer-events-none': count === 0,
+          'cursor-pointer': count > 0,
+        })}
+      >
+        <div className="bg-blue-500 text-white relative rounded h-60 flex justify-center items-center">
+          {label}
+          <div className="absolute bottom-2 right-2">{count}</div>
+        </div>
+      </a>
+    </Link>
   );
 }

src/components/layout/layout.component.js

@@ -10,9 +10,11 @@ export function LayoutComponent({ children }) {
         <meta name="description" content="Community driven Tailwind UI Kit" />
         <link rel="icon" href="/favicon.ico" />
       </Head>
-      <Navbar />
-      <main className="mt-16">{children}</main>
-      <Footer />
+      <div className="min-h-screen flex flex-col">
+        <Navbar />
+        <main className="mt-16 flex-1">{children}</main>
+        <Footer />
+      </div>
     </>
   );
 }

src/modules/element/element.hook.js

@@ -0,0 +1,22 @@
+import { useContext, useMemo } from 'react';
+// import { readFileSync } from 'fs-extra';
+import { ElementContext } from './element.provider';
+import data from '../../../elements.json';
+
+export const useElement = () => {
+  return useContext(ElementContext);
+};
+
+export const useElementProvider = ({ category, type, sources }) => {
+  const elements = useMemo(
+    () =>
+      (data?.[category]?.[type] || []).map((item) => ({
+        ...item,
+        Component: require(`../../../lib/${item.category}/${item.type}/${item.id}/index.js`),
+        source: sources.find((s) => s.id === item.id)?.source,
+      })),
+    [category, type, sources]
+  );
+  console.log(elements);
+  return { elements };
+};

src/modules/element/element.provider.js

@@ -0,0 +1,9 @@
+import { createContext } from 'react';
+import { useElementProvider } from './element.hook';
+
+export const ElementContext = createContext({});
+
+export const ElementProvider = ({ children, category, type, sources }) => {
+  const values = useElementProvider({ category, type, sources });
+  return <ElementContext.Provider value={values}>{children}</ElementContext.Provider>;
+};

src/modules/element/index.js

@@ -0,0 +1,2 @@
+export { ElementProvider } from './element.provider';
+export { useElement } from './element.hook';

src/modules/home/home.hook.js

@@ -20,7 +20,13 @@ export const useHomeProvider = () => {
   );
 
   const getCount = useCallback(
-    ({ category, type }) => ({ category, type: startCase(type), count: data?.[category]?.[type]?.length || 0 }),
+    ({ category, type }) => ({
+      category,
+      type,
+      url: `${category}/${type}`,
+      label: startCase(type),
+      count: data?.[category]?.[type]?.length || 0,
+    }),
     []
   );
   const groupedElements = useMemo(() => groupBy(prop('category'), map(getCount, elements)), [elements, getCount]);

src/pages/element/[category]/[type].js

@@ -0,0 +1,35 @@
+import { useRouter } from 'next/router';
+import data from '../../../../elements.json';
+import path from 'path';
+import { readFileSync } from 'fs-extra';
+import { ElementList } from '../../../components/element/elementList';
+import { Layout } from '../../../components/layout';
+import { ElementProvider } from '../../../modules/element';
+
+export default function ElementType({ sources }) {
+  const router = useRouter();
+  const { category, type } = router.query;
+  return (
+    <Layout>
+      <ElementProvider category={category} type={type} sources={sources}>
+        <ElementList />
+      </ElementProvider>
+    </Layout>
+  );
+}
+
+export async function getServerSideProps({ params }) {
+  const { category, type } = params;
+  const arr = data[category][type];
+  const sources = arr.map((e) => ({
+    id: e.id,
+    source: readFileSync(
+      path.resolve(__dirname, `../../../../../lib/${e.category}/${e.type}/${e.id}/index.js`),
+      'utf-8'
+    ),
+  }));
+
+  return {
+    props: { sources },
+  };
+}

src/utils/routes.js

@@ -1,4 +1,5 @@
 export const ROUTES = {
   home: '/',
   board: '/board',
+  element: (url) => `/element/${url}`,
 };

yarn.lock

@@ -6335,7 +6335,7 @@ hex-color-regex@^1.1.0:
   resolved "https://registry.yarnpkg.com/hex-color-regex/-/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e"
   integrity sha512-l9sfDFsuqtOqKDsQdqrMRk0U85RZc0RtOR9yPI7mRVOa4FsR/BVnZ0shmQRM96Ji99kYZP/7hn1cedc1+ApsTQ==
 
-highlight.js@^10.1.1, highlight.js@~10.7.0:
+highlight.js@^10.1.1, highlight.js@^10.4.1, highlight.js@~10.7.0:
   version "10.7.3"
   resolved "https://registry.yarnpkg.com/highlight.js/-/highlight.js-10.7.3.tgz#697272e3991356e40c3cac566a74eef681756531"
   integrity sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==
@@ -7514,7 +7514,7 @@ lower-case@^2.0.2:
   dependencies:
     tslib "^2.0.3"
 
-lowlight@^1.14.0:
+lowlight@^1.14.0, lowlight@^1.17.0:
   version "1.20.0"
   resolved "https://registry.yarnpkg.com/lowlight/-/lowlight-1.20.0.tgz#ddb197d33462ad0d93bf19d17b6c301aa3941888"
   integrity sha512-8Ktj+prEb1RoCPkEOrPMYUN/nCggB7qAWe3a7OpMjWQkh3l2RD5wKRQ+o8Q8YuI9RG/xs95waaI/E6ym/7NsTw==
@@ -8897,7 +8897,7 @@ pretty-hrtime@^1.0.3:
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
   integrity sha1-t+PqQkNaTJsnWdmeDyAesZWALuE=
 
-prismjs@^1.21.0, prismjs@~1.25.0:
+prismjs@^1.21.0, prismjs@^1.25.0, prismjs@~1.25.0:
   version "1.25.0"
   resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.25.0.tgz#6f822df1bdad965734b310b315a23315cf999756"
   integrity sha512-WCjJHl1KEWbnkQom1+SzftbtXMKQoezOCYs5rECqMN+jP+apI7ftoflyqigqzopSO3hMhTEb0mFClA8lkolgEg==
@@ -9346,6 +9346,17 @@ react-syntax-highlighter@^13.5.3:
     prismjs "^1.21.0"
     refractor "^3.1.0"
 
+react-syntax-highlighter@^15.4.5:
+  version "15.4.5"
+  resolved "https://registry.yarnpkg.com/react-syntax-highlighter/-/react-syntax-highlighter-15.4.5.tgz#db900d411d32a65c8e90c39cd64555bf463e712e"
+  integrity sha512-RC90KQTxZ/b7+9iE6s9nmiFLFjWswUcfULi4GwVzdFVKVMQySkJWBuOmJFfjwjMVCo0IUUuJrWebNKyviKpwLQ==
+  dependencies:
+    "@babel/runtime" "^7.3.1"
+    highlight.js "^10.4.1"
+    lowlight "^1.17.0"
+    prismjs "^1.25.0"
+    refractor "^3.2.0"
+
 react-textarea-autosize@^8.3.0:
   version "8.3.3"
   resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.3.3.tgz#f70913945369da453fd554c168f6baacd1fa04d8"
@@ -9442,7 +9453,7 @@ reduce-css-calc@^2.1.8:
     css-unit-converter "^1.1.1"
     postcss-value-parser "^3.3.0"
 
-refractor@^3.1.0:
+refractor@^3.1.0, refractor@^3.2.0:
   version "3.5.0"
   resolved "https://registry.yarnpkg.com/refractor/-/refractor-3.5.0.tgz#334586f352dda4beaf354099b48c2d18e0819aec"
   integrity sha512-QwPJd3ferTZ4cSPPjdP5bsYHMytwWYnAN5EEnLtGvkqp/FCCnGsBgxrm9EuIDnjUC3Uc/kETtvVi7fSIVC74Dg==