create-nizam-app 1.0.0

package/dist/templates/NIZAM_DOC.template

@@ -0,0 +1,10 @@
+# 🚨 nizam documentation
+
+### nizam documentation for how to use some library with some assets. and some Instructions for use.
+
+<br>
+
+> [!TIP]  
+> If you are using `VSCode`, press `Ctrl + Shift + V` for the best preview of these documents.
+
+---

package/dist/templates/env.template

@@ -0,0 +1 @@
+##-nizam@mark-##:VITE_API_URL

package/dist/templates/react/css/bootstrap.template

@@ -0,0 +1,127 @@
+
+
+/* ----------------------------------- *\
+  #index.css
+\* ----------------------------------- */
+
+/**
+ * nizam say: Have fun 😊
+ */
+
+/* ----------------------------------- *\
+  #CUSTOM PROPERTY
+\* ----------------------------------- */
+:root {
+
+  /**
+   * colors
+   */
+  --color-name: value;
+
+  /**
+   * typography
+   */
+  --ff-name: value;
+
+  --fs-num: value;
+
+  --fw-size: value;
+
+  /**
+   * shadow
+   */
+  --shadow: value;
+
+  /**
+   * radius
+   */
+  --radius-num: value;
+
+  /**
+   * transition
+   */
+  --transition-name: value;
+}
+
+
+/* ----------------------------------- *\
+  #RESET
+\* ----------------------------------- */
+
+*,
+*::before,
+*::after {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+li { list-style: none; }
+a,
+img,
+span,
+button,
+ion-icon { display: block; }
+a {
+  color: inherit;
+  text-decoration: none;
+}
+img { height: auto; }
+input,
+button {
+  background: none;
+  border: none;
+  font: inherit;
+  color: inherit;
+}
+input,
+table { width: 100%; }
+button { cursor: pointer; }
+ion-icon { pointer-events: none; }
+html {
+  font-family: var(--ff-name);
+  font-size: value;
+  scroll-behavior: smooth;
+}
+body {
+  background-color: var(--color-name);
+  color: var(--color-name);
+  font-size: value;
+  line-height: value;
+}
+
+/**
+* scrollbar
+*/
+ /*
+body.active { overflow-y: hidden; }
+:focus-visible { outline-offset: value; }
+::-webkit-scrollbar { width: value; }
+::-webkit-scrollbar-track { background-color: var(--color-name); }
+::-webkit-scrollbar-thumb { background-color: var(--color-name); }
+::-webkit-scrollbar-thumb:hover { background-color: var(--color-name); }
+*/
+
+
+/* ----------------------------------- *\
+  #MEDIA QUERIES
+\* ----------------------------------- */
+
+@media (min-width: 640px) { 
+    /* Mobile */
+}
+
+@media (min-width: 768px) { 
+    /* tablets */
+}
+
+@media (min-width: 1024px) {
+    /* laptops */
+ }
+
+@media (min-width: 1280px) {
+    /* desktops */
+ }
+
+@media (min-width: 1536px) {
+    /* large monitors */
+ }

package/dist/templates/react/css/index.template

@@ -0,0 +1 @@
+##-nizam@mark-##:import_tailwindcss

package/dist/templates/react/css/tailwind.template

@@ -0,0 +1,100 @@
+
+
+/* ----------------------------------- *\
+  #index.css
+\* ----------------------------------- */
+
+/**
+ * nizam say: Have fun 😊
+ */
+
+/* ----------------------------------- *\
+  #CUSTOM PROPERTY
+\* ----------------------------------- */
+
+@font-face {
+  font-family: value;
+  src: url("/value");
+}
+
+@theme {
+
+/**
+* fonts
+*/
+  --font-name: value;
+
+/**
+* colors
+*/
+  --color-name: value;
+}
+
+
+/* ----------------------------------- *\
+  #LAYER BASE
+\* ----------------------------------- */
+
+@layer base {
+  *,
+  *::before,
+  *::after {
+    box-sizing: border-box;
+    margin: 0;
+    font-weight: normal;
+  }
+  ul {
+    list-style: none;
+  }
+  img {
+    -webkit-user-drag: none;
+  }
+  body {
+    @apply h-full bg-color-name font-name overflow-x-hidden;
+  }
+
+/*
+  ::-webkit-scrollbar {
+    @apply w-0;
+  }
+*/
+}
+
+
+/* ----------------------------------- *\
+  #LAYER UTILITIES
+\* ----------------------------------- */
+
+@layer utilities {
+  .full-screen {
+    @apply w-dvw h-dvh;
+  }
+  .flex-center {
+    @apply flex justify-center items-center;
+  }
+  .flex-left {
+    @apply flex justify-start items-center;
+  }
+  .flex-right {
+    @apply flex justify-end items-center;
+  }
+  .flex-between {
+    @apply flex justify-between items-center;
+  }
+  .col-center {
+    @apply flex flex-col justify-center items-center;
+  }
+  .abs-center {
+    @apply absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2;
+  }
+}
+
+
+/* ----------------------------------- *\
+  #LAYER COMPONENTS
+\* ----------------------------------- */
+
+/*
+@layer components {
+}
+*/

package/dist/templates/react/js/app.template

@@ -0,0 +1,11 @@
+##-nizam@mark-##:rr_class_import
+##-nizam@mark-##:wouter_import
+
+function App() {
+  return <>
+  ##-nizam@mark-##:rr_class_start_rout
+  ##-nizam@mark-##:wouter_example
+  </>;
+}
+
+export default App;

package/dist/templates/react/js/data_fetching/axios.template

@@ -0,0 +1,11 @@
+import axios from "axios";
+
+
+const api = axios.create({
+  baseURL: import.meta.env.VITE_API_URL,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+export default api;

package/dist/templates/react/js/data_fetching/fetcher.template

@@ -0,0 +1,5 @@
+export const fetcher = async (url) => {
+  const res = await fetch(`${import.meta.env.VITE_API_URL}${url}`);
+  if (!res.ok) throw new Error("Network response was not ok");
+  return res.json();
+};

package/dist/templates/react/js/data_fetching/http.template

@@ -0,0 +1,5 @@
+export const http = async(url) => {
+  const res = await fetch(`${import.meta.env.VITE_API_URL}${url}`);
+  if (!res.ok) throw new Error("Network response was not ok");
+  return res.json();
+};

package/dist/templates/react/js/jsconfig.template

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"]
+    }
+  }
+}

package/dist/templates/react/js/layout.template

@@ -0,0 +1,17 @@
+##-nizam@mark-##:rr_Outlet_import
+##-nizam@mark-##:tr_Outlet_import
+
+// ex:import Navbar from "./Navbar";
+// ex:import Footer from "./Footer";
+
+export default function Layout() {
+  return (
+    <>
+        {/*ex:<Navbar />*/}
+      <main>
+        <Outlet />
+      </main>
+        {/*ex:<Footer />*/}
+    </>
+  );
+}

package/dist/templates/react/js/main.template

@@ -0,0 +1,41 @@
+##-nizam@mark-##:bootstrap_min
+##-nizam@mark-##:bootstrap_bundle
+##-nizam@mark-##:bulma_min
+##-nizam@mark-##:foundation_min
+##-nizam@mark-##:materialize_min
+##-nizam@mark-##:ant_reset_css
+
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+##-nizam@mark-##:rr_data_import
+##-nizam@mark-##:tr_data_import
+##-nizam@mark-##:context_import_theme_provider
+##-nizam@mark-##:import_react_toolkit_provider
+##-nizam@mark-##:import_react_toolkit_store
+##-nizam@mark-##:import_react_helmet_async_provider
+##-nizam@mark-##:import_dr_pogodin_react_helmet_async_provider
+##-nizam@mark-##:import_unhead_provider
+##-nizam@mark-##:import_query_client_provider
+import './index.css'
+import App from './App.jsx'
+
+##-nizam@mark-##:import_unhead_createhead
+##-nizam@mark-##:using_query_client
+
+createRoot(document.getElementById('root')).render(
+  <StrictMode>
+  ##-nizam@mark-##:open_tage_query_client_provider
+  ##-nizam@mark-##:open_unhead_provider_tage
+  ##-nizam@mark-##:open_dr_pogodin_react_helmet_async_provider_tage
+  ##-nizam@mark-##:open_react_helmet_async_provider_tage
+  ##-nizam@mark-##:open_tage_theme_provider
+  ##-nizam@mark-##:open_tage_react_toolkit_provider
+    <App />
+  ##-nizam@mark-##:close_tage_theme_provider
+  ##-nizam@mark-##:close_tage_react_toolkit_provider
+  ##-nizam@mark-##:close_react_helmet_async_provider_tage
+  ##-nizam@mark-##:close_dr_pogodin_react_helmet_async_provider_tage
+  ##-nizam@mark-##:close_unhead_provider_tage
+  ##-nizam@mark-##:close_tage_query_client_provider
+  </StrictMode>,
+)

package/dist/templates/react/js/react_router-router.template

@@ -0,0 +1,17 @@
+import { createBrowserRouter } from "react-router-dom";
+import Layout from "./Layout";
+// ex:import Home from "./Home";
+// ex:import About from "./About";
+
+const router = createBrowserRouter([
+  {
+    path: "/",
+     element: <Layout />,
+    children: [
+//      { index: true, element: ex:<Home /> },
+//      { path: "ex:about", element: ex:<About /> },
+    ],
+  },
+]);
+
+export default router;

package/dist/templates/react/js/state_management/context/theme_context.template

@@ -0,0 +1,3 @@
+import { createContext } from "react";
+
+export const ThemeContext = createContext();

package/dist/templates/react/js/state_management/context/theme_provider.template

@@ -0,0 +1,15 @@
+import { useState, ReactNode } from "react";
+import { ThemeContext } from "./context";
+
+export const ThemeProvider = ({ children }) => {
+  const [theme, setTheme] = useState("light");
+
+  const toggleTheme = () =>
+    setTheme((t) => (t === "light" ? "dark" : "light"));
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

package/dist/templates/react/js/state_management/context/use_theme.template

@@ -0,0 +1,14 @@
+import { useContext } from "react";
+import { ThemeContext } from "./context";
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+
+  if (!context) {
+    throw new Error(
+      "usemain must be used inside ThemeProvider"
+    );
+  }
+
+  return context;
+};

package/dist/templates/react/js/state_management/store/counter_slice.template

@@ -0,0 +1,19 @@
+import { createSlice } from "@reduxjs/toolkit";
+
+const counterSlice = createSlice({
+  name: "counter",
+  initialState: {
+    value: 0,
+  },
+  reducers: {
+    increment: (state) => {
+      state.value += 1;
+    },
+    decrement: (state) => {
+      state.value -= 1;
+    },
+  },
+});
+
+export const { increment, decrement } = counterSlice.actions;
+export default counterSlice.reducer;

package/dist/templates/react/js/state_management/store/index.template

@@ -0,0 +1 @@
+export { default as counterSlice } from "./counterSlice";

package/dist/templates/react/js/state_management/store/store.template

@@ -0,0 +1,8 @@
+import { configureStore } from "@reduxjs/toolkit";
+import { counterSlice } from "./slices";
+
+export const store = configureStore({
+  reducer: {
+    counter: counterSlice,
+  },
+});

package/dist/templates/react/js/state_management/zustand/index.template

@@ -0,0 +1 @@
+export { default as useCounterStore } from "./useCounterStore";

package/dist/templates/react/js/state_management/zustand/use_counter_store.template

@@ -0,0 +1,11 @@
+import { create } from "zustand";
+
+const useCounterStore = create((set) => ({
+  count: 0,
+  increment: () =>
+    set((state) => ({ count: state.count + 1 })),
+  decrement: () =>
+    set((state) => ({ count: state.count - 1 })),
+}));
+
+export default useCounterStore;

package/dist/templates/react/js/tanstack_router-router.template

@@ -0,0 +1,24 @@
+import { createReactRouter, createRouteConfig } from '@tanstack/react-router';
+import { RootRoute } from '@tanstack/react-router';
+import Layout from './layout';
+// ex:import Home from './pages/Home';
+// ex:import About from './pages/About';
+
+
+const rootRoute = new RootRoute({
+  component: Layout,
+});
+
+const homeRoute = rootRoute.createRoute({
+  path: '/',
+//  component: ex:Home,
+});
+
+const aboutRoute = rootRoute.createRoute({
+  path: '/about',
+//   component: ex:About,
+});
+
+export const router = createReactRouter({
+  routeConfig: rootRoute.addChildren([homeRoute, aboutRoute]),
+});

package/dist/templates/react/js/vite.config.template

@@ -0,0 +1,16 @@
+##-nizam@mark-##:import_fileURLToPath
+##-nizam@mark-##:import_dirname_resolve
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+##-nizam@mark-##:import_tailwindcss
+
+##-nizam@mark-##:make__filename
+##-nizam@mark-##:make__dirname
+
+export default defineConfig({
+  plugins: [
+  react(),
+  ##-nizam@mark-##:append_tailwindcss_plugins
+  ],
+  ##-nizam@mark-##:add_resolve
+})

package/dist/templates/react/ts/app.template

@@ -0,0 +1,11 @@
+##-nizam@mark-##:rr_class_import
+##-nizam@mark-##:wouter_import
+
+function App() {
+  return <>
+  ##-nizam@mark-##:rr_class_start_rout
+  ##-nizam@mark-##:wouter_example
+  </>;
+}
+
+export default App;

package/dist/templates/react/ts/data_fetching/axios.template

@@ -0,0 +1,13 @@
+import axios from "axios";
+import type { AxiosInstance } from "axios";
+
+export interface Post {}
+
+const api: AxiosInstance = axios.create({
+  baseURL: import.meta.env.VITE_API_URL,
+  headers: {
+    "Content-Type": "application/json",
+  },
+});
+
+export default api;

package/dist/templates/react/ts/data_fetching/fetcher.template

@@ -0,0 +1,7 @@
+export interface Post {}
+
+export const fetcher = async <T>(url: string): Promise<T> => {
+  const res = await fetch(`${import.meta.env.VITE_API_URL}${url}`);
+  if (!res.ok) throw new Error("Network response was not ok");
+  return res.json();
+};

package/dist/templates/react/ts/data_fetching/http.template

@@ -0,0 +1,7 @@
+export interface Post {}
+
+export const http = async <T>(url: string): Promise<T> => {
+  const res = await fetch(`${import.meta.env.VITE_API_URL}${url}`);
+  if (!res.ok) throw new Error("Network response was not ok");
+  return res.json();
+};

package/dist/templates/react/ts/layout.template

@@ -0,0 +1,17 @@
+##-nizam@mark-##:rr_Outlet_import
+##-nizam@mark-##:tr_Outlet_import
+
+// ex:import Navbar from "./Navbar";
+// ex:import Footer from "./Footer";
+
+export default function Layout() {
+  return (
+    <>
+        {/*ex:<Navbar />*/}
+      <main>
+        <Outlet />
+      </main>
+        {/*ex:<Footer />*/}
+    </>
+  );
+}

package/dist/templates/react/ts/main.template

@@ -0,0 +1,41 @@
+##-nizam@mark-##:bootstrap_min
+##-nizam@mark-##:bootstrap_bundle
+##-nizam@mark-##:bulma_min
+##-nizam@mark-##:foundation_min
+##-nizam@mark-##:materialize_min
+##-nizam@mark-##:ant_reset_css
+
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+##-nizam@mark-##:rr_data_import
+##-nizam@mark-##:tr_data_import
+##-nizam@mark-##:context_import_theme_provider
+##-nizam@mark-##:import_react_toolkit_provider
+##-nizam@mark-##:import_react_toolkit_store
+##-nizam@mark-##:import_react_helmet_async_provider
+##-nizam@mark-##:import_dr_pogodin_react_helmet_async_provider
+##-nizam@mark-##:import_unhead_provider
+##-nizam@mark-##:import_query_client_provider
+import './index.css'
+import App from './App.tsx'
+
+##-nizam@mark-##:import_unhead_createhead
+##-nizam@mark-##:using_query_client
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+  ##-nizam@mark-##:open_tage_query_client_provider
+  ##-nizam@mark-##:open_unhead_provider_tage
+  ##-nizam@mark-##:open_dr_pogodin_react_helmet_async_provider_tage
+  ##-nizam@mark-##:open_react_helmet_async_provider_tage
+  ##-nizam@mark-##:open_tage_theme_provider
+  ##-nizam@mark-##:open_tage_react_toolkit_provider
+    <App />
+  ##-nizam@mark-##:close_tage_theme_provider
+  ##-nizam@mark-##:close_tage_react_toolkit_provider
+  ##-nizam@mark-##:close_react_helmet_async_provider_tage
+  ##-nizam@mark-##:close_dr_pogodin_react_helmet_async_provider_tage
+  ##-nizam@mark-##:close_unhead_provider_tage
+  ##-nizam@mark-##:close_tage_query_client_provider
+  </StrictMode>,
+)

package/dist/templates/react/ts/react_router-router.template

@@ -0,0 +1,20 @@
+import { createBrowserRouter } from "react-router-dom";
+import type { RouteObject } from "react-router-dom";
+import Layout from "./Layout";
+// ex:import Home from "./Home";
+// ex:import About from "./About";
+
+const routes: RouteObject[] = [
+  {
+    path: "/",
+    element: <Layout />,
+    children: [
+//      { index: true, element: ex:<Home /> },
+//      { path: "ex:about", element: ex:<About /> },
+    ],
+  },
+];
+
+const router = createBrowserRouter(routes);
+
+export default router;

package/dist/templates/react/ts/state_management/context/theme_context.template

@@ -0,0 +1,11 @@
+import { createContext } from "react";
+
+export type Theme = "light" | "dark";
+
+export type ThemeContextType = {
+  theme: Theme;
+  toggleTheme: () => void;
+};
+
+export const ThemeContext =
+  createContext<ThemeContextType | undefined>(undefined);

package/dist/templates/react/ts/state_management/context/theme_provider.template

@@ -0,0 +1,15 @@
+import { useState, ReactNode } from "react";
+import { ThemeContext } from "./context";
+
+export const ThemeProvider = ({ children }: { children: ReactNode }) => {
+  const [theme, setTheme] = useState<"light" | "dark">("light");
+
+  const toggleTheme = () =>
+    setTheme((t) => (t === "light" ? "dark" : "light"));
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};

package/dist/templates/react/ts/state_management/context/use_theme.template

@@ -0,0 +1,14 @@
+import { useContext } from "react";
+import { ThemeContext } from "./context";
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+
+  if (!context) {
+    throw new Error(
+      "usemain must be used inside ThemeProvider"
+    );
+  }
+
+  return context;
+};