@stevederico/skateboard-ui 0.5.3 → 0.5.5

package/AppSidebar.jsx

@@ -1,6 +1,15 @@
+import React from "react";
 import { useNavigate, useLocation } from "react-router-dom";
 import constants from "@/constants.json";
-import { DynamicIcon } from "./lucide-react/dynamic.mjs";
+import * as LucideIcons from "lucide-react";
+
+// Dynamic Icon Component
+const DynamicIcon = ({ name, size = 24, color = 'currentColor', strokeWidth = 2, ...props }) => {
+  const toPascalCase = (str) => str.split(/[-_\s]/).map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join('');
+  const possibleNames = [name, toPascalCase(name), name.charAt(0).toUpperCase() + name.slice(1)];
+  const LucideIcon = possibleNames.find(n => LucideIcons[n]) ? LucideIcons[possibleNames.find(n => LucideIcons[n])] : null;
+  return LucideIcon ? React.createElement(LucideIcon, { size, color, strokeWidth, ...props }) : null;
+};
 import {
   Sidebar,
   SidebarContent,

package/LandingView.jsx

@@ -1,6 +1,14 @@
+import React from 'react';
 import constants from "@/constants.json";
+import * as LucideIcons from "lucide-react";
 
-import { DynamicIcon } from "./lucide-react/dynamic"; // Verify this import
+// Dynamic Icon Component
+const DynamicIcon = ({ name, size = 24, color = 'currentColor', strokeWidth = 2, ...props }) => {
+  const toPascalCase = (str) => str.split(/[-_\s]/).map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join('');
+  const possibleNames = [name, toPascalCase(name), name.charAt(0).toUpperCase() + name.slice(1)];
+  const LucideIcon = possibleNames.find(n => LucideIcons[n]) ? LucideIcons[possibleNames.find(n => LucideIcons[n])] : null;
+  return LucideIcon ? React.createElement(LucideIcon, { size, color, strokeWidth, ...props }) : null;
+};
 
 export default function LandingView() {
   return (

package/Layout.jsx

@@ -3,7 +3,7 @@ import TabBar from './TabBar.jsx'
 import { SidebarProvider, SidebarTrigger } from "./shadcn/ui/sidebar"
 import AppSidebar from "./AppSidebar"
 import { useEffect } from 'react';
-import constants from "@/constants.json";
+
 
 export default function Layout({ children }) {
 
@@ -22,7 +22,7 @@ export default function Layout({ children }) {
     <div className="min-h-screen">
       <div className="fixed inset-0 flex overflow-hidden pt-[env(safe-area-inset-top)] pb-[env(safe-area-inset-bottom)] pl-[env(safe-area-inset-left)] pr-[env(safe-area-inset-right)]">
         <SidebarProvider>
-          {!constants?.hideSideBar && <AppSidebar />}
+          <AppSidebar />
           <main className="flex-1 relative overflow-y-auto scrollbar-hide">
             <Outlet />
           </main>

package/SettingsView.jsx

@@ -1,7 +1,15 @@
 import { useNavigate } from 'react-router-dom';
 import { getState } from '@/context.jsx';
 import { useEffect, useState } from 'react';
-import { DynamicIcon } from "./lucide-react/dynamic"; // Verify this import
+import * as LucideIcons from "lucide-react";
+
+// Dynamic Icon Component
+const DynamicIcon = ({ name, size = 24, color = 'currentColor', strokeWidth = 2, ...props }) => {
+  const toPascalCase = (str) => str.split(/[-_\s]/).map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join('');
+  const possibleNames = [name, toPascalCase(name), name.charAt(0).toUpperCase() + name.slice(1)];
+  const LucideIcon = possibleNames.find(n => LucideIcons[n]) ? LucideIcons[possibleNames.find(n => LucideIcons[n])] : null;
+  return LucideIcon ? React.createElement(LucideIcon, { size, color, strokeWidth, ...props }) : null;
+};
 import constants from "@/constants.json";
 import pkg from '@package';
 import { showCheckout } from './Utilities';

package/SignInView.jsx

@@ -9,7 +9,15 @@ import {
 } from "./shadcn/ui/card"
 import { Input } from "./shadcn/ui/input"
 import { Label } from "./shadcn/ui/label"
-import { DynamicIcon } from "./lucide-react/dynamic"; // Verify this import
+import * as LucideIcons from "lucide-react";
+
+// Dynamic Icon Component
+const DynamicIcon = ({ name, size = 24, color = 'currentColor', strokeWidth = 2, ...props }) => {
+  const toPascalCase = (str) => str.split(/[-_\s]/).map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join('');
+  const possibleNames = [name, toPascalCase(name), name.charAt(0).toUpperCase() + name.slice(1)];
+  const LucideIcon = possibleNames.find(n => LucideIcons[n]) ? LucideIcons[possibleNames.find(n => LucideIcons[n])] : null;
+  return LucideIcon ? React.createElement(LucideIcon, { size, color, strokeWidth, ...props }) : null;
+};
 
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';

package/SignUpView.jsx

@@ -7,7 +7,15 @@ import {
 } from "./shadcn/ui/card"
 import { Input } from "./shadcn/ui/input"
 import { Label } from "./shadcn/ui/label"
-import { DynamicIcon } from "./lucide-react/dynamic"; // Verify this import
+import * as LucideIcons from "lucide-react";
+
+// Dynamic Icon Component
+const DynamicIcon = ({ name, size = 24, color = 'currentColor', strokeWidth = 2, ...props }) => {
+  const toPascalCase = (str) => str.split(/[-_\s]/).map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join('');
+  const possibleNames = [name, toPascalCase(name), name.charAt(0).toUpperCase() + name.slice(1)];
+  const LucideIcon = possibleNames.find(n => LucideIcons[n]) ? LucideIcons[possibleNames.find(n => LucideIcons[n])] : null;
+  return LucideIcon ? React.createElement(LucideIcon, { size, color, strokeWidth, ...props }) : null;
+};
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
 import constants from "@/constants.json";

package/TabBar.jsx

@@ -1,6 +1,15 @@
+import React from 'react';
 import constants from "@/constants.json";
 import { Link, useLocation } from 'react-router-dom';
-import { DynamicIcon } from "./lucide-react/dynamic"; // Verify this import
+import * as LucideIcons from "lucide-react";
+
+// Dynamic Icon Component
+const DynamicIcon = ({ name, size = 24, color = 'currentColor', strokeWidth = 2, ...props }) => {
+  const toPascalCase = (str) => str.split(/[-_\s]/).map(word => word.charAt(0).toUpperCase() + word.slice(1).toLowerCase()).join('');
+  const possibleNames = [name, toPascalCase(name), name.charAt(0).toUpperCase() + name.slice(1)];
+  const LucideIcon = possibleNames.find(n => LucideIcons[n]) ? LucideIcons[possibleNames.find(n => LucideIcons[n])] : null;
+  return LucideIcon ? React.createElement(LucideIcon, { size, color, strokeWidth, ...props }) : null;
+};
 
 export default function TabBar() {
   const location = useLocation();

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@stevederico/skateboard-ui",
   "private": false,
-  "version": "0.5.3",
+  "version": "0.5.5",
   "type": "module",
   "exports": {
     "./AppSidebar": {
@@ -76,6 +76,7 @@
     "@radix-ui/react-slot": "^1.2.3",
     "@radix-ui/react-tooltip": "^1.2.7",
     "class-variance-authority": "^0.7.1",
+    "lucide-react": "^0.523.0",
     "clsx": "^2.1.1",
     "tailwind-merge": "^3.3.0",
     "tailwindcss-animate": "^1.0.7"

package/shadcn/ui/sheet.jsx

@@ -1,6 +1,6 @@
 import * as React from "react"
 import * as SheetPrimitive from "@radix-ui/react-dialog"
-import { X } from "../../lucide-react/dist/esm/lucide-react.js"
+import { X } from "lucide-react"
 
 
 import { cn } from "../lib/utils"

package/shadcn/ui/sidebar.jsx

@@ -1,7 +1,7 @@
 import * as React from "react"
 import { Slot } from "@radix-ui/react-slot"
 import { cva } from "class-variance-authority";
-import { PanelLeft } from "../../lucide-react/dist/esm/lucide-react.js"
+import { PanelLeft } from "lucide-react"
 
 import { useIsMobile } from "../hooks/use-mobile"
 import { cn } from "../lib/utils"

package/lucide-react/LICENSE

@@ -1,15 +0,0 @@
-ISC License
-
-Copyright (c) for portions of Lucide are held by Cole Bemis 2013-2022 as part of Feather (MIT). All other copyright (c) for Lucide are held by Lucide Contributors 2022.
-
-Permission to use, copy, modify, and/or distribute this software for any
-purpose with or without fee is hereby granted, provided that the above
-copyright notice and this permission notice appear in all copies.
-
-THE SOFTWARE IS PROVIDED "AS IS" AND THE AUTHOR DISCLAIMS ALL WARRANTIES
-WITH REGARD TO THIS SOFTWARE INCLUDING ALL IMPLIED WARRANTIES OF
-MERCHANTABILITY AND FITNESS. IN NO EVENT SHALL THE AUTHOR BE LIABLE FOR
-ANY SPECIAL, DIRECT, INDIRECT, OR CONSEQUENTIAL DAMAGES OR ANY DAMAGES
-WHATSOEVER RESULTING FROM LOSS OF USE, DATA OR PROFITS, WHETHER IN AN
-ACTION OF CONTRACT, NEGLIGENCE OR OTHER TORTIOUS ACTION, ARISING OUT OF
-OR IN CONNECTION WITH THE USE OR PERFORMANCE OF THIS SOFTWARE.

package/lucide-react/README.md

@@ -1,73 +0,0 @@
-<p align="center">
-  <a href="https://github.com/lucide-icons/lucide">
-    <img src="https://lucide.dev/package-logos/lucide-react.svg" alt="Lucide icon library for React applications." width="540">
-  </a>
-</p>
-
-<p align="center">
-Lucide icon library for React applications.
-</p>
-
-<div align="center">
-
-  [![npm](https://img.shields.io/npm/v/lucide-react?color=blue)](https://www.npmjs.com/package/lucide-react)
-  ![NPM Downloads](https://img.shields.io/npm/dw/lucide-react)
-  [![GitHub](https://img.shields.io/github/license/lucide-icons/lucide)](https://lucide.dev/license)
-</div>
-
-<p align="center">
-  <a href="https://lucide.dev/guide/">About</a>
-  ·
-  <a href="https://lucide.dev/icons/">Icons</a>
-  ·
-  <a href="https://lucide.dev/guide/packages/lucide-react">Documentation</a>
-  ·
-  <a href="https://lucide.dev/license">License</a>
-</p>
-
-# Lucide React
-
-Implementation of the lucide icon library for React applications.
-
-## Installation
-
-```sh
-pnpm add lucide-react
-```
-
-```sh
-npm install lucide-react
-```
-
-```sh
-yarn add lucide-react
-```
-
-```sh
-bun add lucide-react
-```
-
-## Documentation
-
-For full documentation, visit [lucide.dev](https://lucide.dev/guide/packages/lucide-react)
-
-## Community
-
-Join the [Discord server](https://discord.gg/EH6nSts) to chat with the maintainers and other users.
-
-## License
-
-Lucide is licensed under the ISC license. See [LICENSE](https://lucide.dev/license).
-
-## Sponsors
-
-<a href="https://vercel.com?utm_source=lucide&utm_campaign=oss">
-  <img src="https://lucide.dev/vercel.svg" alt="Powered by Vercel" width="200" />
-</a>
-
-<a href="https://www.digitalocean.com/?refcode=b0877a2caebd&utm_campaign=Referral_Invite&utm_medium=Referral_Program&utm_source=badge"><img src="https://lucide.dev/digitalocean.svg" width="200" alt="DigitalOcean Referral Badge" /></a>
-
-### Awesome backers 🍺
-
-<a href="https://www.scipress.io?utm_source=lucide"><img src="https://lucide.dev/sponsors/scipress.svg" width="180" alt="Scipress sponsor badge" /></a>
-<a href="https://github.com/pdfme/pdfme"><img src="https://lucide.dev/sponsors/pdfme.svg" width="180" alt="pdfme sponsor badge" /></a>