feat(blank-app): initialize new blank app with Nimbus, Vite & TS #94
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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? |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,32 @@ | ||
| # Nimbus Blank App Template | ||
|
|
||
| This directory serves as a template for creating basic applications that utilize | ||
| Nimbus. It provides a starting point for new app development within the Nimbus | ||
| ecosystem. | ||
|
|
||
| ## Creating a New App | ||
|
|
||
| To create a new application (e.g., `fancy-app`) based on this template, follow | ||
| these steps: | ||
|
|
||
| 1. **Duplicate the folder:** Copy the entire `blank-app` directory within the | ||
| `apps` directory. | ||
| 2. **Rename:** Rename the duplicated folder to your desired app name in | ||
| kebab-case (e.g., `fancy-app`). | ||
| 3. **Update `package.json`:** Open the `package.json` file inside your new app | ||
| folder (e.g., `apps/fancy-app/package.json`) and change the `name` property | ||
| to match your folder name (e.g., `"name": "fancy-app"`). | ||
| 4. **Install dependencies:** Run `pnpm install` from the root directory of the | ||
| repository. This will install dependencies for all workspaces, including | ||
| your new app. | ||
| 5. **Navigate to your app:** Change your current directory to your new app's | ||
| folder (e.g., `cd apps/fancy-app`). | ||
| 6. **Start the development server:** Run `pnpm dev` to start the Vite | ||
| development server for your application. | ||
|
|
||
| > [!NOTE] This template is based on Vite's `react-swc-ts` template with minor | ||
| > adjustments: | ||
| > | ||
| > 1. The `package.json` includes references to Nimbus catalog dependencies. | ||
| > 2. The default ESLint configuration generated by Vite has been removed, as a | ||
| > root-level ESLint configuration is already present in the repository. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| <!doctype html> | ||
| <html lang="en"> | ||
| <head> | ||
| <meta charset="UTF-8" /> | ||
| <link rel="icon" type="image/svg+xml" href="/vite.svg" /> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | ||
| <title>Nimbus + Vite + TS</title> | ||
| </head> | ||
| <body> | ||
| <div id="root"></div> | ||
| <script type="module" src="/src/main.tsx"></script> | ||
| </body> | ||
| </html> | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| { | ||
| "name": "blank-app", | ||
| "private": true, | ||
| "version": "0.0.0", | ||
| "type": "module", | ||
| "scripts": { | ||
| "dev": "vite", | ||
| "build": "tsc -b && vite build", | ||
| "lint": "eslint .", | ||
| "preview": "vite preview" | ||
| }, | ||
| "dependencies": { | ||
| "react": "catalog:react", | ||
| "react-dom": "catalog:react", | ||
| "@commercetools/nimbus": "workspace:*", | ||
| "@commercetools/nimbus-icons": "workspace:*" | ||
| }, | ||
| "devDependencies": { | ||
| "@eslint/js": "catalog:tooling", | ||
| "@types/react": "catalog:react", | ||
| "@types/react-dom": "catalog:react", | ||
| "@vitejs/plugin-react-swc": "catalog:tooling", | ||
| "eslint": "catalog:tooling", | ||
| "eslint-plugin-react-hooks": "catalog:tooling", | ||
| "eslint-plugin-react-refresh": "catalog:tooling", | ||
| "globals": "catalog:tooling", | ||
| "typescript": "catalog:tooling", | ||
| "typescript-eslint": "catalog:tooling", | ||
| "vite": "catalog:tooling" | ||
| } | ||
| } |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
|
There was a problem hiding this comment.
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,43 @@ | ||
| import { | ||
| Box, | ||
| Flex, | ||
| Heading, | ||
| Text, | ||
| useColorMode, | ||
| Button, | ||
| } from "@commercetools/nimbus"; | ||
|
|
||
| import { CommercetoolsCube } from "@commercetools/nimbus-icons"; | ||
|
|
||
| export const App = () => { | ||
| const { colorMode, toggleColorMode } = useColorMode(); | ||
|
|
||
| return ( | ||
| <Flex width="100vw" height="100vh"> | ||
| <Flex direction="column" m="auto"> | ||
| <Box | ||
| mx="auto" | ||
| mb="400" | ||
| animation="bounce" | ||
| animationDuration="1.5s" | ||
| boxSize="5600" | ||
| asChild | ||
| > | ||
| <CommercetoolsCube /> | ||
| </Box> | ||
| <Heading>@commercetools/nimbus</Heading> | ||
| <Text mx="auto" color="colorPalette.11" mb="600"> | ||
| Nimbus + Vite + TS | ||
| </Text> | ||
| <Button | ||
| variant="solid" | ||
| tone="primary" | ||
| mx="auto" | ||
| onClick={toggleColorMode} | ||
| > | ||
| Switch to {colorMode === "light" ? "dark" : "light"} theme | ||
| </Button> | ||
| </Flex> | ||
| </Flex> | ||
| ); | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| import { StrictMode } from "react"; | ||
| import { createRoot } from "react-dom/client"; | ||
| import { App } from "./app"; | ||
| import { NimbusProvider } from "@commercetools/nimbus"; | ||
|
|
||
| createRoot(document.getElementById("root")!).render( | ||
| <StrictMode> | ||
| <NimbusProvider> | ||
| <App /> | ||
| </NimbusProvider> | ||
|
Comment on lines
+8
to
+10
There was a problem hiding this comment.
|
||
| </StrictMode> | ||
| ); | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| /// <reference types="vite/client" /> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| { | ||
| "compilerOptions": { | ||
| "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo", | ||
| "target": "ES2020", | ||
| "useDefineForClassFields": true, | ||
| "lib": ["ES2020", "DOM", "DOM.Iterable"], | ||
| "module": "ESNext", | ||
| "skipLibCheck": true, | ||
|
|
||
| /* Bundler mode */ | ||
| "moduleResolution": "bundler", | ||
| "allowImportingTsExtensions": true, | ||
| "isolatedModules": true, | ||
| "moduleDetection": "force", | ||
| "noEmit": true, | ||
| "jsx": "react-jsx", | ||
|
|
||
| /* Linting */ | ||
| "strict": true, | ||
| "noUnusedLocals": true, | ||
| "noUnusedParameters": true, | ||
| "noFallthroughCasesInSwitch": true, | ||
| "noUncheckedSideEffectImports": true | ||
| }, | ||
| "include": ["src"] | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| { | ||
| "files": [], | ||
| "references": [ | ||
| { "path": "./tsconfig.app.json" }, | ||
| { "path": "./tsconfig.node.json" } | ||
| ] | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| { | ||
| "compilerOptions": { | ||
| "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo", | ||
| "target": "ES2022", | ||
| "lib": ["ES2023"], | ||
| "module": "ESNext", | ||
| "skipLibCheck": true, | ||
|
|
||
| /* Bundler mode */ | ||
| "moduleResolution": "bundler", | ||
| "allowImportingTsExtensions": true, | ||
| "isolatedModules": true, | ||
| "moduleDetection": "force", | ||
| "noEmit": true, | ||
|
|
||
| /* Linting */ | ||
| "strict": true, | ||
| "noUnusedLocals": true, | ||
| "noUnusedParameters": true, | ||
| "noFallthroughCasesInSwitch": true, | ||
| "noUncheckedSideEffectImports": true | ||
| }, | ||
| "include": ["vite.config.ts"] | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| import { defineConfig } from 'vite' | ||
| import react from '@vitejs/plugin-react-swc' | ||
|
|
||
| // https://vite.dev/config/ | ||
| export default defineConfig({ | ||
| plugins: [react()], | ||
| }) |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import type { SVGProps } from "react"; | ||
| import { Ref, forwardRef } from "react"; | ||
|
|
||
| const CubeSvg = (props: SVGProps<SVGSVGElement>, ref: Ref<SVGSVGElement>) => ( | ||
| <svg | ||
| xmlns="http://www.w3.org/2000/svg" | ||
| width="1em" | ||
| height="1em" | ||
| aria-hidden="true" | ||
| fill="none" | ||
| viewBox="0 0 24 24" | ||
| ref={ref} | ||
| {...props} | ||
| > | ||
| <path | ||
| d="M19.62 16.4276L12.4275 13.1262C12.3772 13.1037 12.3269 13.0869 12.2766 13.07V11.1015C12.2766 10.9384 12.2766 10.9384 12.3828 10.8878L12.6678 10.7585C13.1484 10.5391 13.1484 10.5391 15.9874 9.22871L19.6256 7.55273C19.8547 7.44587 20 7.2209 20 6.97344C20 6.72598 19.8547 6.49539 19.6256 6.39416L12.4331 3.0928C12.1593 2.96907 11.8463 2.96907 11.5725 3.0928L4.38002 6.38853C4.16766 6.48414 4.02794 6.68661 4.00559 6.9172H4V17.0012C4 17.2487 4.1453 17.4737 4.37443 17.5805L11.5781 20.9044C11.5781 20.9044 11.7904 21 12.014 21C12.1984 21 12.3884 20.9325 12.4443 20.9044L19.6256 17.5918C19.8547 17.4849 20 17.26 20 17.0125C19.9944 16.7594 19.8491 16.5344 19.62 16.4276ZM4.55327 6.96219C4.55327 6.92845 4.57562 6.8947 4.60915 6.87783L11.8016 3.58772C11.9246 3.53148 12.0699 3.53148 12.1984 3.58772L19.3908 6.88908C19.4244 6.90595 19.4467 6.9397 19.4467 6.97344C19.4467 7.00719 19.4244 7.04093 19.3908 7.0578L15.7527 8.73379C12.9193 10.0442 12.9193 10.0442 12.4331 10.2636L12.1649 10.3873C12.1481 10.3929 12.1313 10.3985 12.109 10.4042L12.0866 10.4098C12.0587 10.4154 12.0307 10.4154 12.0028 10.4154C11.9357 10.4154 11.8687 10.3985 11.8128 10.3704L4.60915 7.04656C4.59797 7.04093 4.59239 7.03531 4.5868 7.03531C4.56444 7.01843 4.55327 6.99031 4.55327 6.96219ZM19.4411 17.0069C19.4411 17.0406 19.4188 17.0744 19.3853 17.0912L12.271 20.3701V13.6605L19.3853 16.9281C19.4188 16.9394 19.4411 16.9731 19.4411 17.0069ZM4.55327 7.62584L11.5781 10.8653C11.6284 10.8878 11.6787 10.9047 11.7345 10.9216C11.729 10.9722 11.7234 11.0341 11.7234 11.1015V13.07C11.6675 13.0869 11.6172 13.1037 11.5725 13.1262L4.55327 16.3376V7.62584ZM4.60915 17.08C4.57562 17.0631 4.55327 17.0294 4.55327 16.9956C4.55327 16.9844 4.55327 16.9788 4.55885 16.9675C4.56444 16.945 4.5868 16.9225 4.60915 16.9113L11.7234 13.6549V20.3589L4.60915 17.08Z" | ||
| fill="currentColor" | ||
| /> | ||
| </svg> | ||
| ); | ||
|
|
||
| export const CommercetoolsCube = forwardRef(CubeSvg); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,6 +1,6 @@ | ||
| packages: | ||
| - "packages/*" | ||
| - "apps/*" | ||
|
|
||
| catalogs: | ||
| # a dependency that exists in multiple packages can be managed | ||
|
|
||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
vite, this file is the entry point, in this case, an html file that is being rendered in the browser. Vite will start here and attempt to resolve every reference to a file. The only reference in here though is the link tomain.tsxvia the script-tag.-> Next