Feature/www

packages/ui/components/CodeInputRegex/CodeInputRegex.tsx

@@ -4,7 +4,9 @@ import { theme } from '../../css/theme';
 import { Color } from '../../types/styled';
 import { IconProps } from '../Icon/Icon';
 import { Text } from '../Text/Text';
-import { TextField, TextFieldProps } from '../TextField';
+// import { TextField, TextFieldProps } from '../TextField';
+import { TextField } from '../TextField';
+import { TextFieldProps } from '../TextField/TextField';
 
 
 const StyledTextField: React.FC<TextFieldProps> = styled(TextField)`

packages/ui/components/FormField/FormField.tsx

@@ -8,7 +8,9 @@ import { CheckboxProps } from '../Checkbox/Checkbox.styles';
 import { ErrorMessage } from '../ErrorMessage/ErrorMessage';
 import { useBrixFormContext } from '../Form/Form';
 import { Select } from '../Select/Select';
-import { TextField, TextFieldProps } from '..';
+// import { TextField, TextFieldProps } from '..';
+import { TextField } from '..';
+import { TextFieldProps } from '../TextField/TextField';
 
 
 // import { OptionProps } from 'react-select';

packages/ui/components/TextField/index.ts

@@ -1,2 +1,2 @@
 export { TextField } from './TextField.styles';
-export { TextFieldProps } from './TextField';
+// export { TextFieldProps } from './TextField';

packages/ui/styleguide/stories.ts

@@ -5,6 +5,8 @@ import StoryCard from '../components/Card/Card.story.mdx';
 import StorySliderField from '../components/SliderField/SliderField.story.mdx';
 import StoryErrorMessage from '../components/ErrorMessage/ErrorMessage.story.mdx';
 import StoryText from '../components/Text/Text.story.mdx';
+import StoryBox from '../components/Box/Box.story.mdx';
+import StoryCard from '../components/Card/Card.story.mdx';
 import StoryLoader from '../components/Loader/Loader.story.mdx';
 
 export interface Story {
@@ -21,5 +23,7 @@ export const stories: Story[] = [
   { id: 'sliderField', title: 'SliderField', story: StorySliderField },
   { id: 'error-message', title: 'Error Message', story: StoryErrorMessage },
   { id: 'text', title: 'Text', story: StoryText },
+  { id: 'box', title: 'Box', story: StoryBox },
+  { id: 'card', title: 'Card', story: StoryCard },
   { id: 'loader', title: 'Loader', story: StoryLoader }
 ];

packages/www/.babelrc

@@ -0,0 +1,5 @@
+{
+  "extends": "../../babel.config.json",
+  "presets": ["next/babel"],
+  "plugins": [["styled-components", { "ssr": true }]]
+}

packages/www/.gitignore

@@ -0,0 +1,34 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# next.js
+/.next/
+/out/
+
+# production
+/build
+
+# misc
+.DS_Store
+*.pem
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# vercel
+.vercel

packages/www/README.md

@@ -0,0 +1,30 @@
+This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
+
+## Getting Started
+
+First, run the development server:
+
+```bash
+npm run dev
+# or
+yarn dev
+```
+
+Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
+
+You can start editing the page by modifying `pages/index.js`. The page auto-updates as you edit the file.
+
+## Learn More
+
+To learn more about Next.js, take a look at the following resources:
+
+- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
+- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
+
+You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
+
+## Deploy on Vercel
+
+The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/import?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
+
+Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.

packages/www/components/languages.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from 'styled-components';
+import { PathIcon, theme as t } from '@codement/ui';
+
+const StyledLanguages = styled.div`
+  position: absolute;
+  bottom: ${t.size('xl')};
+  left: 50%;
+  transform: translateX(-50%);
+
+  h3 {
+    text-align: center;
+    margin-bottom: ${t.size('sm')};
+    font-size: ${t.size('sm')};
+    color: ${t.colors.grey[700]};
+    letter-spacing: ${t.size(0.75)};
+  }
+`;
+
+const StyledPathIcon = styled(PathIcon)`
+  &:not(:last-of-type) {
+    margin-right: ${t.size('xbig')};
+  }
+`;
+
+export default function Languages({ icons }) {
+  return (
+    <StyledLanguages>
+      <h3>{icons.headline}</h3>
+      <div>
+        {icons.name.map(n => (
+          <StyledPathIcon icon={n} key={n} size="huge" />
+        ))}
+      </div>
+    </StyledLanguages>
+  );
+}

packages/www/components/layout.tsx

@@ -0,0 +1,85 @@
+/* eslint-disable max-len */
+/* eslint-disable jsx-a11y/anchor-is-valid */
+import React from 'react';
+import Link from 'next/link';
+import Head from 'next/head';
+import { theme as t } from '@codement/ui';
+import styled from 'styled-components';
+import People from '../public/people.svg';
+import Logo from '../public/logo.svg';
+
+const StyledHomePage = styled.div`
+  background: linear-gradient(180deg, ${t.color('white')}, ${t.colors.primary[100]});
+  height: 100vh;
+  position: relative;
+`;
+
+const StyledNav = styled.nav`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: ${t.size('lg')} ${t.size('giant')};
+`;
+
+const StyledNavList = styled.ul`
+  li {
+    display: inline-block;
+
+    :not(:last-of-type) {
+      margin: 0 ${t.size('lg')} 0 0;
+    }
+  }
+`;
+
+const StyledAnchor = styled.a`
+  color: ${t.colors.grey[700]};
+  font-weight: ${t.fontWeight.heavy};
+  text-transform: uppercase;
+  cursor: pointer;
+
+  &:hover {
+    color: ${t.color('primary')};
+  }
+`;
+
+const StyledPeople = styled(People)`
+  position: fixed;
+  left: -${t.size('tiny')};
+  bottom: -${t.size('tiny')};
+`;
+
+export default function Layout({ children, page, people = false }) {
+  return (
+    <StyledHomePage>
+      <Head>
+        <title>{page} - Code Mentoring</title>
+      </Head>
+      <StyledNav>
+        <Link href="/">
+          <a>
+            <Logo />
+          </a>
+        </Link>
+        <StyledNavList>
+          <li>
+            <Link href="/pricing">
+              <StyledAnchor>Pricing</StyledAnchor>
+            </Link>
+          </li>
+          <li>
+            <Link href="/signup">
+              <StyledAnchor>Signup</StyledAnchor>
+            </Link>
+          </li>
+          <li>
+            <Link href="/login">
+              <StyledAnchor>Login</StyledAnchor>
+            </Link>
+          </li>
+        </StyledNavList>
+      </StyledNav>
+      {children}
+      {people && <StyledPeople />}
+    </StyledHomePage>
+  );
+}

packages/www/content/icon.yml

@@ -0,0 +1,7 @@
+headline:
+  - We teach
+name:
+  - html
+  - css
+  - js
+  - nodejs

packages/www/content/pricing.yml

@@ -0,0 +1,21 @@
+headline: 
+ - We’re with you.
+ - Every step of the way.
+description:
+ - Ever wanted a mentor to help you through your coding career?
+ - We’ve designed our platform to be with you every step along the way.
+ - We’re always by your side.
+pricing:
+ - level: BEGINNER
+   description: To help you get started on your coding journey.
+   price: FREE
+   limit: 1 Lesson/Day
+ - level: HOBBYIST
+   description: Take your coding to the next level.
+   price: $10/Month
+   limit: 5 lessons/Day
+ - level: JOB SEEKER
+   description: For the serious learners looking to get a job.
+   price: $20/Month
+   limit: Unlimited lessons!
+

packages/www/lib/icons.ts

@@ -0,0 +1,20 @@
+import fs from 'fs';
+import YAML from 'yaml';
+import path from 'path';
+import Languages from '../components/languages';
+
+export interface Icon {
+  headline: String;
+  name: String[];
+}
+
+export function getIcon() {
+  try {
+    const ic = path.resolve('./content/icon.yml');
+    const yml = fs.readFileSync(ic).toString();
+    const icons = <Languages>YAML.parse(yml);
+    return icons;
+  } catch (error) {
+    throw new Error('Could not read icons.yml');
+  }
+}

packages/www/lib/pricing.ts

@@ -0,0 +1,26 @@
+import fs from 'fs';
+import YAML from 'yaml';
+import path from 'path';
+import Pricing from '../pages/pricing';
+
+export interface Pricing {
+  headline: String[];
+  description: String[];
+  pricing: {
+    level: String;
+    descritpion: String;
+    price: String;
+    limit: String;
+  }[];
+}
+
+export function getPricing(): Pricing {
+  try {
+    const fp = path.resolve('./content/pricing.yml');
+    const yml = fs.readFileSync(fp).toString();
+    const pricings = <Pricing>YAML.parse(yml);
+    return pricings;
+  } catch {
+    throw new Error('Failed reading pricing.yml');
+  }
+}

packages/www/next-env.d.ts

@@ -0,0 +1,3 @@
+/* eslint-disable spaced-comment */
+/// <reference types="next" />
+/// <reference types="next/types/global" />

packages/www/next.config.js

@@ -0,0 +1,28 @@
+/* eslint-disable no-param-reassign */
+const path = require('path');
+
+const workspace = path.join(__dirname, '..');
+module.exports = {
+  poweredByHeader: false,
+  webpack: (config, options) => {
+    /** Allows import modules from packages in workspace. */
+    config.module = {
+      ...config.module,
+      rules: [
+        ...config.module.rules,
+        {
+          test: /\.(js|jsx|ts|tsx)$/,
+          include: [workspace],
+          exclude: /node_modules/,
+          use: options.defaultLoaders.babel
+        },
+        { test: /\.svg$/, use: 'react-svg-loader' },
+        {
+          test: /\/ui\/lib\/history.ts/,
+          use: 'null-loader'
+        }
+      ]
+    };
+    return config;
+  }
+};

packages/www/package.json

@@ -0,0 +1,26 @@
+{
+  "name": "learn-www",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start"
+  },
+  "dependencies": {
+    "@codement/ui": "0.0.2",
+    "next": "9.5.2",
+    "next-transpile-modules": "^4.1.0",
+    "null-loader": "^4.0.0",
+    "react": "16.13.1",
+    "react-dom": "16.13.1",
+    "styled-components": "^5.1.1"
+  },
+  "devDependencies": {
+    "@types/node": "^14.0.27",
+    "@types/react": "^16.9.46",
+    "babel-plugin-styled-components": "^1.11.1",
+    "react-svg-loader": "^3.0.3",
+    "typescript": "^3.9.7"
+  }
+}

packages/www/pages/_app.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import { AppProps } from 'next/app';
+import { GlobalStyle, theme } from '@codement/ui';
+import { ThemeProvider } from 'styled-components';
+
+function MyApp({ Component, pageProps }: AppProps) {
+  return (
+    <ThemeProvider theme={theme}>
+      <GlobalStyle />
+      <Component {...pageProps} />
+    </ThemeProvider>
+  );
+}
+
+export default MyApp;