add Tailwind to News Sifter! (#20)

* chore: move ui into libs, set up storybook
* chore: pkgs for storybook
* feat: set up tailwind!
* chore: move locales into libs
* fix: dont need no p in hurr
* chore: add locales to path aliases
* refactor: make component storybook-ready
* refactor: use tailwind
* refactor: something more production-esque
* fix: import error

.vscode/settings.json

@@ -0,0 +1,15 @@
+{
+  "tailwindCSS.emmetCompletions": true,
+  "editor.inlineSuggest.enabled": true,
+  "css.validate": false,
+  "scss.validate": false,
+  "stylelint.enable": true,
+  "files.associations": {
+    "*.css": "tailwindcss",
+    "*.scss": "tailwindcss"
+  },
+  "editor.quickSuggestions": {
+    "strings": true
+  },
+  "css.customData": [".vscode/css_custom_data.json"]
+}

apps/api/project.json

@@ -47,6 +47,16 @@
       "options": {
         "jestConfig": "apps/api/jest.config.ts"
       }
+    },
+    "deploy": {
+      "executor": "nx:run-commands",
+      "outputs": [],
+      "options": {
+        "command": ""
+      },
+      "production": {
+        "buildTarget": "api:build:production"
+      }
     }
   },
   "tags": []

apps/chatbot/postcss.config.js

@@ -0,0 +1,15 @@
+const { join } = require('path');
+
+// Note: If you use library-specific PostCSS/Tailwind configuration then you should remove the `postcssConfig` build
+// option from your application's configuration (i.e. project.json).
+//
+// See: https://nx.dev/guides/using-tailwind-css-in-react#step-4:-applying-configuration-to-libraries
+
+module.exports = {
+  plugins: {
+    tailwindcss: {
+      config: join(__dirname, 'tailwind.config.js'),
+    },
+    autoprefixer: {},
+  },
+};

apps/chatbot/project.json

@@ -9,7 +9,8 @@
       "outputs": ["{options.outputPath}"],
       "defaultConfiguration": "production",
       "options": {
-        "outputPath": "dist/apps/chatbot"
+        "outputPath": "dist/apps/chatbot",
+        "postcssConfig": "apps/chatbot/postcss.config.js"
       },
       "configurations": {
         "development": {

apps/chatbot/src/app/app.tsx

@@ -1,6 +1,7 @@
 import styled from 'styled-components';
+import '../styles.scss';
 
-import { TextField, SubmitButton, Heading } from '@newssifter/ui';
+import { SubmitButton, TextField, Heading } from '@newssifter/ui';
 
 const StyledApp = styled.div`
   // Your style here
@@ -9,9 +10,39 @@ const StyledApp = styled.div`
 export function App() {
   return (
     <StyledApp>
-      <Heading></Heading>
-      <TextField></TextField>
-      <SubmitButton></SubmitButton>
+      <div className="relative isolate overflow-hidden bg-gray-900 py-24 sm:py-32 justify-center">
+        <div
+          className="hidden sm:absolute sm:-top-10 sm:right-1/2 sm:-z-10 sm:mr-10 sm:block sm:transform-gpu sm:blur-3xl"
+          aria-hidden="true"
+        >
+          <div
+            className="aspect-[1097/845] w-[68.5625rem] bg-gradient-to-tr from-[#ff4694] to-[#776fff] opacity-20"
+            style={{
+              clipPath:
+                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+            }}
+          />
+        </div>
+        <div
+          className="absolute -top-52 left-1/2 -z-10 -translate-x-1/2 transform-gpu blur-3xl sm:top-[-28rem] sm:ml-16 sm:translate-x-0 sm:transform-gpu"
+          aria-hidden="true"
+        >
+          <div
+            className="aspect-[1097/845] w-[68.5625rem] bg-gradient-to-tr from-[#ff4694] to-[#776fff] opacity-20"
+            style={{
+              clipPath:
+                'polygon(74.1% 44.1%, 100% 61.6%, 97.5% 26.9%, 85.5% 0.1%, 80.7% 2%, 72.5% 32.5%, 60.2% 62.4%, 52.4% 68.1%, 47.5% 58.3%, 45.2% 34.5%, 27.5% 76.7%, 0.1% 64.9%, 17.9% 100%, 27.6% 76.8%, 76.1% 97.7%, 74.1% 44.1%)',
+            }}
+          />
+        </div>
+        <div className="mx-auto max-w-7xl px-6 lg:px-8">
+          <div className="mx-auto max-w-2xl lg:mx-0">
+            <Heading></Heading>
+            <TextField></TextField>
+            <SubmitButton className="border-indigo-500 bg-indigo-500 hover:bg-indigo-600"></SubmitButton>
+          </div>
+        </div>
+      </div>
     </StyledApp>
   );
 }

apps/chatbot/src/styles.scss

@@ -0,0 +1,3 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;

apps/chatbot/tailwind.config.js

@@ -0,0 +1,17 @@
+const { createGlobPatternsForDependencies } = require('@nx/react/tailwind');
+const { join } = require('path');
+
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    join(
+      __dirname,
+      '{src,pages,components,app}/**/*!(*.stories|*.spec).{ts,tsx,html}'
+    ),
+    ...createGlobPatternsForDependencies(__dirname),
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

libs/ui/.storybook/main.ts

@@ -0,0 +1,24 @@
+import type { StorybookConfig } from '@storybook/react-vite';
+
+import { nxViteTsPaths } from '@nx/vite/plugins/nx-tsconfig-paths.plugin';
+import { mergeConfig } from 'vite';
+
+const config: StorybookConfig = {
+  stories: ['../src/lib/**/*.stories.@(js|jsx|ts|tsx|mdx)'],
+  addons: ['@storybook/addon-essentials', '@storybook/addon-interactions'],
+  framework: {
+    name: '@storybook/react-vite',
+    options: {},
+  },
+
+  viteFinal: async (config) =>
+    mergeConfig(config, {
+      plugins: [nxViteTsPaths()],
+    }),
+};
+
+export default config;
+
+// To customize your Vite configuration you can use the viteFinal field.
+// Check https://storybook.js.org/docs/react/builders/vite#configuration
+// and https://nx.dev/recipes/storybook/custom-builder-configs

libs/ui/project.json

@@ -0,0 +1,63 @@
+{
+  "name": "ui",
+  "$schema": "../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "libs/ui/src",
+  "projectType": "library",
+  "tags": [],
+  "targets": {
+    "lint": {
+      "executor": "@nx/eslint:lint",
+      "outputs": ["{options.outputFile}"]
+    },
+    "test": {
+      "executor": "@nx/jest:jest",
+      "outputs": ["{workspaceRoot}/coverage/{projectRoot}"],
+      "options": {
+        "jestConfig": "ui/jest.config.ts"
+      }
+    },
+    "storybook": {
+      "executor": "@nx/storybook:storybook",
+      "options": {
+        "port": 4400,
+        "configDir": "libs/ui/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "build-storybook": {
+      "executor": "@nx/storybook:build",
+      "outputs": ["{options.outputDir}"],
+      "options": {
+        "outputDir": "dist/storybook/ui",
+        "configDir": "libs/ui/.storybook"
+      },
+      "configurations": {
+        "ci": {
+          "quiet": true
+        }
+      }
+    },
+    "test-storybook": {
+      "executor": "nx:run-commands",
+      "options": {
+        "command": "test-storybook -c libs/ui/.storybook --url=http://localhost:4400"
+      }
+    },
+    "static-storybook": {
+      "executor": "@nx/web:file-server",
+      "options": {
+        "buildTarget": "ui:build-storybook",
+        "staticFilePath": "dist/storybook/ui"
+      },
+      "configurations": {
+        "ci": {
+          "buildTarget": "ui:build-storybook:ci"
+        }
+      }
+    }
+  }
+}

ui/src/lib/Heading.tsx → libs/ui/src/lib/Heading.tsx

@@ -10,7 +10,9 @@ const StyledHeading = styled.div`
 export function Heading(props: HeadingProps) {
   return (
     <StyledHeading>
-      <h1>News Sifter</h1>
+      <h1 className="text-4xl font-bold tracking-tight text-white sm:text-6xl">
+        News Sifter
+      </h1>
     </StyledHeading>
   );
 }

ui/src/lib/SubmitButton.spec.tsx → libs/ui/src/lib/SubmitButton.spec.tsx

@@ -1,6 +1,6 @@
 import { render } from '@testing-library/react';
 
-import SubmitButton from './SubmitButton';
+import { SubmitButton } from './SubmitButton';
 
 describe('SubmitButton', () => {
   it('should render successfully', () => {

libs/ui/src/lib/SubmitButton.stories.tsx

@@ -0,0 +1,37 @@
+import type { Meta, StoryObj, StoryFn } from '@storybook/react';
+import { SubmitButton, SubmitButtonProps, styles } from './SubmitButton';
+
+export default {
+  component: SubmitButton,
+  title: 'SubmitButton',
+} as Meta<SubmitButtonProps & { level: keyof typeof SubmitButton }>;
+
+const Template: StoryFn<SubmitButtonProps> = (args) => (
+  <SubmitButton {...args} />
+);
+
+export const Primary = Template.bind({});
+Primary.args = {
+  children: 'Primary',
+  className: styles.primary,
+};
+export const Success = Template.bind({});
+Success.args = {
+  children: 'Success',
+  className: styles.success,
+};
+export const Error = Template.bind({});
+Error.args = {
+  children: 'Error',
+  className: styles.error,
+};
+export const Warning = Template.bind({});
+Warning.args = {
+  children: 'Warning',
+  className: styles.warning,
+};
+export const Info = Template.bind({});
+Info.args = {
+  children: 'Info',
+  className: styles.info,
+};

libs/ui/src/lib/SubmitButton.tsx

@@ -0,0 +1,35 @@
+import { ButtonHTMLAttributes, PropsWithChildren } from 'react';
+import styled from 'styled-components';
+
+export const styles = {
+  primary: 'border-indigo-500 bg-indigo-500 hover:bg-indigo-600',
+  success: 'border-green-500 bg-green-500 hover:bg-green-600',
+  error: 'border-red-500 bg-red-500 hover:bg-red-600',
+  warning: 'border-yellow-500 bg-yellow-500 hover:bg-yellow-600',
+  info: 'border-teal-500 bg-teal-500 hover:bg-teal-600',
+};
+export type SubmitButtonProps = PropsWithChildren<
+  ButtonHTMLAttributes<HTMLButtonElement>
+>;
+
+const StyledFormField = styled.div``;
+
+export function SubmitButton({ children, ...props }: SubmitButtonProps) {
+  const className = props.className || '';
+
+  return (
+    <StyledFormField>
+      <button
+        {...props}
+        type={'button'}
+        className={'border text-white rounded-md px-4 py-2 m-2 transition duration-500 ease select-none focus:outline-none focus:shadow-outline'.concat(
+          className
+        )}
+        name="start"
+        id="start"
+      >
+        Tell Me!
+      </button>
+    </StyledFormField>
+  );
+}

libs/ui/src/lib/TextField.stories.tsx

@@ -0,0 +1,24 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TextField } from './TextField';
+
+import { within } from '@storybook/testing-library';
+import { expect } from '@storybook/jest';
+
+const meta: Meta<typeof TextField> = {
+  component: TextField,
+  title: 'TextField',
+};
+export default meta;
+type Story = StoryObj<typeof TextField>;
+
+export const Primary = {
+  args: {},
+};
+
+export const Heading: Story = {
+  args: {},
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    expect(canvas.getByText(/Welcome to TextField!/gi)).toBeTruthy();
+  },
+};

ui/tsconfig.json → libs/ui/tsconfig.json

@@ -14,7 +14,10 @@
     },
     {
       "path": "./tsconfig.spec.json"
+    },
+    {
+      "path": "./tsconfig.storybook.json"
     }
   ],
-  "extends": "../tsconfig.base.json"
+  "extends": "../../tsconfig.base.json"
 }

ui/tsconfig.lib.json → libs/ui/tsconfig.lib.json

@@ -1,14 +1,13 @@
 {
   "extends": "./tsconfig.json",
   "compilerOptions": {
-    "outDir": "../dist/out-tsc",
-    "types": [
-      "node",
-
-      "@nx/react/typings/cssmodule.d.ts",
-      "@nx/react/typings/image.d.ts"
-    ]
+    "outDir": "../dist/out-tsc"
   },
+  "files": [
+    "../../node_modules/@nx/react/typings/styled-jsx.d.ts",
+    "../../node_modules/@nx/react/typings/cssmodule.d.ts",
+    "../../node_modules/@nx/react/typings/image.d.ts"
+  ],
   "exclude": [
     "jest.config.ts",
     "src/**/*.spec.ts",
@@ -18,7 +17,11 @@
     "src/**/*.spec.js",
     "src/**/*.test.js",
     "src/**/*.spec.jsx",
-    "src/**/*.test.jsx"
+    "src/**/*.test.jsx",
+    "**/*.stories.ts",
+    "**/*.stories.js",
+    "**/*.stories.jsx",
+    "**/*.stories.tsx"
   ],
   "include": ["src/**/*.js", "src/**/*.jsx", "src/**/*.ts", "src/**/*.tsx"]
 }