Texmo React Components setup

* Added Button, Form and Table skeleton (#1)

* WIP

* Tidy

* Started adding table

* Finished skeleton for Table component

* Added CODEOWNERS

* Added form skeleton

* Added form Rich Text

* Added form Date Time Picker

* Use latest Node LTS

* Include /dist

* Updated dist

* Working SCSS

* Added examples

* Changes

* Added card

* Classes to functional components

---------

Co-authored-by: Kishan Jadav <kishan_jadav@hotmail.com>

NPM (#2)

NPM CI

Added list

Styling changes

Added info tile

Added examples

Added Header, Footer, infoTile, searchBarm and userProfile

Removed MUI

CSS fix

Feedback

CSS Extract fix

CSS and Styling Fixes (#4)

* CSS fix

* Minor style changes

* Version Bump

Added breadcrumbs component (#5)

* Added breadcrumbs component

* Styling changes

Styling changes (#6)

* Href change

* Slash fix

* Styling changes

* Label and Button changes

* Form feedback changes

* Form text changes

* Added filter button

* Use relative paths

---------

Co-authored-by: Kishan Jadav <kishan_jadav@hotmail.com>

Version bumb 0.3.0 (#7)

Improved responsiveness (#10)

* Updated Navlink

* Updated Navlink

* Added breadcumb & nav providers

* Exposed dist

* List margin fix

* Made lists responsive

* Added typeahead

* Ignoring dist

* Expose dist

* Updated llist-row

* Improved responsive navbar

* Styling changes

* List Head styles

* Updated List Page

* Added subtitle

Changes to UI based on feedback (#12)

* Changes to UI based on feedback

Added breadcumb & nav providers

Exposed dist

List margin fix

Made lists responsive

Added typeahead

Ignoring dist

Expose dist

Updated llist-row

Improved responsive navbar

Styling changes

List Head styles

Updated List Page

WIP

Updated layout

Updated UserProfile

Changes to tiles

Chip changes

Minor theme changes

Updated progress bar

Minor change

Fix to layout

Added tabs

Added tabs

Updated UI to match designs

Subtitle, searchbar

Breadcrumbs update

Btn stlying

Ignoring dist

Overdue fix

Added texmo icons

Expose dist

Update to navitem

Uppercase

InfoTile Link

Updated secondary color

Added script to generate icon types

Fixed issues

Updated search bar

More feedback changes

Minor styling

Updated types

List update

Info tile and list updates

Added navbar

Updated nav transition

* Updated dist

* Feedback

* Updated sidenav icon

* Updated infotiles

* Updated min-width on lists

* Updated infotiles

* Updated navitem

* WF-102: Rework Navbar resposiveness (squashed)

commit 51878db
Author: Kishan Jadav <kishan_jadav@hotmail.com>
Date:   Mon Mar 18 12:16:57 2024 +0000

    WF-102: Rework Navbar resposiveness

    stuff

    stuff with stuff working

    wip

---------

Co-authored-by: Ian Vexler <ianvexler@Ians-MacBook-Pro.local>
Co-authored-by: Kishan Jadav <kishan_jadav@hotmail.com>

.eslintrc.js

@@ -30,6 +30,8 @@ module.exports = {
     '@typescript-eslint/no-use-before-define': ['error'],
     'react-hooks/rules-of-hooks': 'error', // Checks rules of Hooks
     'react-hooks/exhaustive-deps': 'warn', // Checks effect dependencies
-    'react/react-in-jsx-scope': 'off', // suppress errors for missing 'import React' in files
+    'react/react-in-jsx-scope': 'off', // suppress errors for missing 'import React' in files,
+    'no-unused-vars': 'off',
+    '@typescript-eslint/no-unused-vars': 'error',
   },
 };

.github/CODEOWNERS

@@ -0,0 +1 @@
+**/*  @kishannareshpal @ianvexler @jsteeland @rich-williamson

.github/workflows/ci.yml

@@ -0,0 +1,19 @@
+name: CI
+on: [push]
+
+jobs:
+  build:
+    name: "Build (and lint) the package"
+    runs-on: ubuntu-latest
+    timeout-minutes: 2
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+
+      - name: Install NPM dependencies
+        run: npm ci
+
+      - name: Build (and lint) the package
+        run: npm run build

.github/workflows/publish.yml

@@ -0,0 +1,35 @@
+name: Publish
+on:
+  release:
+    types:
+      created
+
+jobs:
+  publish:
+    name: "Publish NPM package to GitHub Packages"
+    runs-on: ubuntu-latest
+    timeout-minutes: 2
+    concurrency:
+      group: ${{ github.workflow }}-${{ github.ref }}
+      cancel-in-progress: ${{ github.ref != 'refs/heads/main' }}
+    permissions:
+      contents: read
+      packages: write
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20.x
+          registry-url: 'https://npm.pkg.github.com'
+          scope: '@the-curve-consulting'
+
+      - name: Install NPM dependencies
+        run: npm ci
+
+      - name: Build (and lint) the package
+        run: npm run build
+
+      - name: Publish the package
+        run: npm publish
+        env:
+          NODE_AUTH_TOKEN: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -129,6 +129,7 @@ public/
 # Ignore all local history of files
 .history
 
-dist/
-
 # End of https://www.gitignore.io/api/node,macos,visualstudiocode
+
+# Ignore distribution files. They can always be generated manually via `npm run buiild`.
+dist

.npmignore

@@ -0,0 +1 @@
+example

.npmrc

@@ -0,0 +1 @@
+@the-curve-consulting:registry=https://npm.pkg.github.com

.nvmrc

@@ -1 +1 @@
-v16.19.0
+v20.11.0

custom.d.ts

@@ -0,0 +1,4 @@
+declare module '*.svg' {
+  const content: string;
+  export default content;
+}

example/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

example/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

example/README.md

@@ -0,0 +1,30 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react/README.md) uses [Babel](https://babeljs.io/) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type aware lint rules:
+
+- Configure the top-level `parserOptions` property like this:
+
+```js
+export default {
+  // other rules...
+  parserOptions: {
+    ecmaVersion: 'latest',
+    sourceType: 'module',
+    project: ['./tsconfig.json', './tsconfig.node.json'],
+    tsconfigRootDir: __dirname,
+  },
+}
+```
+
+- Replace `plugin:@typescript-eslint/recommended` to `plugin:@typescript-eslint/recommended-type-checked` or `plugin:@typescript-eslint/strict-type-checked`
+- Optionally add `plugin:@typescript-eslint/stylistic-type-checked`
+- Install [eslint-plugin-react](https://github.com/jsx-eslint/eslint-plugin-react) and add `plugin:react/recommended` & `plugin:react/jsx-runtime` to the `extends` list

example/components/Header.tsx

@@ -0,0 +1,22 @@
+import { Header } from '@the-curve-consulting/texmo-react-components';
+import MainNav from '../components/MainNav';
+
+const HeaderComponent = () => {
+  return (
+    <Header>
+      <Header.Dropdown>
+        <Header.Dropdown.Toggle />
+
+        <Header.Dropdown.Menu>
+          <Header.Dropdown.Item>Test</Header.Dropdown.Item>
+        </Header.Dropdown.Menu>
+      </Header.Dropdown>
+
+      <Header.Navbar>
+        <MainNav />
+      </Header.Navbar>
+    </Header>
+  )
+}
+
+export default HeaderComponent;

example/components/MainNav.tsx

@@ -0,0 +1,38 @@
+import { Nav } from '@the-curve-consulting/texmo-react-components';
+
+export interface NavItemProps {
+  route: string;
+  label: string;
+  icon: string;
+}
+
+// TODO: Sort navlink context
+
+const Navbar = () => {
+  return (
+    <Nav>
+      <Nav.Item
+        route={'/'}
+        icon='assets'
+        text='Dashboard'
+      />
+      <Nav.Item
+        route={'/form'}
+        icon='checklist'
+        text='Form'
+      />
+      <Nav.Item
+        route={'/list'}
+        icon='stock-management'
+        text='List'
+      />
+      <Nav.Item
+        route="/table"
+        icon='stock-management'
+        text='Table'
+      />
+    </Nav>
+  )
+}
+
+export default Navbar;

example/index.html

@@ -0,0 +1,14 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <link rel="stylesheet" href="https://use.typekit.net/crw8sum.css" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

example/layouts/Layout.tsx

@@ -0,0 +1,33 @@
+import { Outlet } from "react-router-dom";
+import Container from "react-bootstrap/Container";
+import MainNav from '../components/MainNav';
+import HeaderComponent from '../components/Header';
+import { SideNavbar, Footer, Layout } from "@the-curve-consulting/texmo-react-components";
+
+const LayoutComponent = () => {
+  return (
+    <Layout>
+      <Layout.Brand src='../src/the-curve.png'/>
+
+      <Layout.Main>
+        <SideNavbar>
+          <MainNav />
+        </SideNavbar>
+
+        <Layout.Container>
+          <HeaderComponent />
+
+          <main className="d-flex">
+            <Container fluid className="px-md-5">
+              <Outlet />
+            </Container>
+          </main>
+
+          <Footer organisation='Test' />
+        </Layout.Container>
+      </Layout.Main>
+    </Layout>
+  );
+}
+
+export default LayoutComponent;