Skip to content

Commit

Permalink
Refactored icon search view
Browse files Browse the repository at this point in the history
  • Loading branch information
fgatti675 committed Jan 23, 2024
1 parent 80f50e7 commit b4565bc
Show file tree
Hide file tree
Showing 29 changed files with 14,047 additions and 35 deletions.
2 changes: 1 addition & 1 deletion packages/collection_editor/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -72,5 +72,5 @@
"publishConfig": {
"access": "public"
},
"gitHead": "cf8ced8b7900922f517900d498beca9a19853b3b"
"gitHead": "7f6599121c226abbb4fb4dccbe109b2c8ba6e23e"
}
2 changes: 1 addition & 1 deletion packages/create_firecms_app/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -44,5 +44,5 @@
"node_modules",
"template/node_modules"
],
"gitHead": "cf8ced8b7900922f517900d498beca9a19853b3b"
"gitHead": "7f6599121c226abbb4fb4dccbe109b2c8ba6e23e"
}
2 changes: 1 addition & 1 deletion packages/data_import_export/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -91,5 +91,5 @@
"publishConfig": {
"access": "public"
},
"gitHead": "cf8ced8b7900922f517900d498beca9a19853b3b"
"gitHead": "7f6599121c226abbb4fb4dccbe109b2c8ba6e23e"
}
2 changes: 1 addition & 1 deletion packages/firebase_firecms/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -55,5 +55,5 @@
"react-app/jest"
]
},
"gitHead": "cf8ced8b7900922f517900d498beca9a19853b3b"
"gitHead": "7f6599121c226abbb4fb4dccbe109b2c8ba6e23e"
}
2 changes: 1 addition & 1 deletion packages/firebase_firecms_pro/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,5 +35,5 @@
"react-app/jest"
]
},
"gitHead": "cf8ced8b7900922f517900d498beca9a19853b3b"
"gitHead": "7f6599121c226abbb4fb4dccbe109b2c8ba6e23e"
}
2 changes: 1 addition & 1 deletion packages/firecms/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -55,5 +55,5 @@
"react-app/jest"
]
},
"gitHead": "cf8ced8b7900922f517900d498beca9a19853b3b"
"gitHead": "7f6599121c226abbb4fb4dccbe109b2c8ba6e23e"
}
2 changes: 1 addition & 1 deletion packages/firecms_cli/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -64,5 +64,5 @@
"node_modules",
"template/node_modules"
],
"gitHead": "cf8ced8b7900922f517900d498beca9a19853b3b"
"gitHead": "7f6599121c226abbb4fb4dccbe109b2c8ba6e23e"
}
2 changes: 1 addition & 1 deletion packages/firecms_core/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -107,7 +107,7 @@
"dist",
"src"
],
"gitHead": "cf8ced8b7900922f517900d498beca9a19853b3b",
"gitHead": "7f6599121c226abbb4fb4dccbe109b2c8ba6e23e",
"publishConfig": {
"access": "public"
}
Expand Down
2 changes: 1 addition & 1 deletion packages/schema_inference/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -22,5 +22,5 @@
"build": "vite build && tsc --emitDeclarationOnly -p tsconfig.prod.json",
"clean": "rm -rf dist && find ./src -name '*.js' -type f | xargs rm -f"
},
"gitHead": "cf8ced8b7900922f517900d498beca9a19853b3b"
"gitHead": "7f6599121c226abbb4fb4dccbe109b2c8ba6e23e"
}
2 changes: 1 addition & 1 deletion packages/ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@
"dist",
"src"
],
"gitHead": "cf8ced8b7900922f517900d498beca9a19853b3b",
"gitHead": "7f6599121c226abbb4fb4dccbe109b2c8ba6e23e",
"publishConfig": {
"access": "public"
}
Expand Down
12 changes: 3 additions & 9 deletions packages/ui/src/scripts/saveIconFiles.ts
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,10 @@ import fs from "fs";
import path from "path";

import { fileURLToPath } from "url";
import { keyToIconComponent } from "../util/key_to_icon_component.ts";
// import { iconKeys } from "../icons/icon_keys.ts";


export function saveIconFiles(iconKeys: string[]) {
const __dirname = path.dirname(fileURLToPath(import.meta.url));

Expand All @@ -19,15 +21,7 @@ export function saveIconFiles(iconKeys: string[]) {

// for each key, generate a file with an Icon ts component
iconKeys.forEach((key: string) => {

const startsWithNumber = key.match(/^\d/);

// convert key to came case
const componentName = (startsWithNumber ? "_" : "") +
key.split("_").map((word: string) => {
return word.charAt(0).toUpperCase() + word.slice(1);
}).join("") +
"Icon";
const componentName = keyToIconComponent(key);

const iconComponent = `import React from "react";
import { Icon, IconProps } from "../Icon";
Expand Down
1 change: 1 addition & 0 deletions packages/ui/src/util/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
export * from "./cn";
export * from "./debounce";
export * from "./chip_colors";
export * from "./key_to_icon_component";
export * from "./useInjectStyles";
export * from "./useOutsideAlerter";
11 changes: 11 additions & 0 deletions packages/ui/src/util/key_to_icon_component.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
export function keyToIconComponent(key: string) {
const startsWithNumber = key.match(/^\d/);

// convert key to came case
const componentName = (startsWithNumber ? "_" : "") +
key.split("_").map((word: string) => {
return word.charAt(0).toUpperCase() + word.slice(1);
}).join("") +
"Icon";
return componentName;
}
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file modified website/.yarn/install-state.gz
Binary file not shown.
2 changes: 1 addition & 1 deletion website/docs/components/alert.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ Alerts are used to communicate a state or feedback to users. They often indicate
The `color` prop is used to define the severity level of the alert.

import CodeBlock from "@theme/CodeBlock";
import CodeSample from "../../src/partials/CodeSample";
import CodeSample from "../../src/CodeSample";

import AlertColorDemo from '../../samples/components/alert/alert_color';
import AlertColorSource from '!!raw-loader!../../samples/components/alert/alert_color';
Expand Down
2 changes: 1 addition & 1 deletion website/docs/components/avatar.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Avatars are visual placeholders for representing users or entities. They can con
The `src` prop specifies the image URL for the avatar.

import CodeBlock from "@theme/CodeBlock";
import CodeSample from "../../src/partials/CodeSample";
import CodeSample from "../../src/CodeSample";

import AvatarImageDemo from '../../samples/components/avatar/avatar_image';
import AvatarImageSource from '!!raw-loader!../../samples/components/avatar/avatar_image';
Expand Down
2 changes: 1 addition & 1 deletion website/docs/components/badge.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ import BadgeInvisibleSource from '!!raw-loader!../../samples/components/badge/ba
The `color` prop determines the color of the badge. Possible values are `primary`, `secondary`, and `error`.

import CodeBlock from "@theme/CodeBlock";
import CodeSample from "../../src/partials/CodeSample";
import CodeSample from "../../src/CodeSample";

import BadgeColorDemo from '../../samples/components/badge/badge_color';
import BadgeColorSource from '!!raw-loader!../../samples/components/badge/badge_color';
Expand Down
2 changes: 1 addition & 1 deletion website/docs/components/boolean_switch.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ BooleanSwitch is a component for toggling between `true`, `false`, or an indeter

Import the `BooleanSwitch` from "firecms" and provide the `value`, and optionally, a callback with `onValueChange` to handle the state changes.

import CodeSample from "../../src/partials/CodeSample";
import CodeSample from "../../src/CodeSample";
import CodeBlock from "@theme/CodeBlock";

## Default Switch
Expand Down
2 changes: 1 addition & 1 deletion website/docs/components/button.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ The prop `size` can be used to change the size of the button.

Buttons come in three sizes: `small`, `medium` and `large`

import CodeSample from "../../src/partials/CodeSample";
import CodeSample from "../../src/CodeSample";
import CodeBlock from "@theme/CodeBlock";

import ButtonSizeDemo from "../../samples/components/button/button_size";
Expand Down
11 changes: 11 additions & 0 deletions website/docs/icons/icons.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,17 @@ id: icons
title: Icons
---

When building a UI, it's often necessary to include icons to represent different actions, states, or content.
FireCMS uses **Material Design icons**, which are available for free from Google. These icons are conveniently
packed as independent React components, which can be used in your own components.

In some cases you might need to use the icons as components, for example in a button. In other cases, you might
need to specify the icon key.

In this view you can see all the available icons and their keys. Just **search** for the icon you need!




import { DocsIconsView } from "../../src/DocsIconsView";

Expand Down
16 changes: 8 additions & 8 deletions website/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,13 @@
"@docusaurus/plugin-sitemap": "^3.1.0",
"@docusaurus/preset-classic": "^3.1.0",
"@docusaurus/theme-search-algolia": "^3.1.0",
"@firecms/collection_editor": "link:../packages/collection_editor",
"@firecms/core": "link:../packages/firecms_core",
"@firecms/data_import_export": "link:../packages/data_import_export",
"@firecms/firebase": "link:../packages/firebase_firecms",
"@firecms/neat": "0.1.5",
"@firecms/schema_inference": "link:../packages/schema_inference",
"@firecms/ui": "link:../packages/ui",
"@mdx-js/react": "^3.0.0",
"aos": "^2.3.4",
"autoprefixer": "^10.4.14",
Expand All @@ -33,8 +39,8 @@
"postprocessing": "^6.30.1",
"prism-react-renderer": "^2.1.0",
"raw-loader": "^4.0.2",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react": "link:../../node_modules/react",
"react-dom": "link:../../node_modules/react-dom",
"react-syntax-highlighter": "^15.5.0",
"react-transition-group": "^4.4.5",
"react-type-animation": "^2.1.2",
Expand All @@ -57,12 +63,6 @@
"devDependencies": {
"@docusaurus/module-type-aliases": "^3.1.0",
"@docusaurus/types": "3.1.0",
"@firecms/collection_editor": "link:../packages/collection_editor",
"@firecms/core": "link:../packages/firecms_core",
"@firecms/data_import_export": "link:../packages/data_import_export",
"@firecms/firebase": "link:../packages/firebase_firecms",
"@firecms/schema_inference": "link:../packages/schema_inference",
"@firecms/ui": "link:../packages/ui",
"@tsconfig/docusaurus": "^1.0.7",
"@types/react": "^18.2.33",
"@types/react-helmet": "^6.1.6",
Expand Down
File renamed without changes.
2 changes: 2 additions & 0 deletions website/src/DefaultSearchIconsView.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import { SearchIconsView } from "@firecms/core";
export default SearchIconsView;
26 changes: 23 additions & 3 deletions website/src/DocsIconsView.tsx
Original file line number Diff line number Diff line change
@@ -1,7 +1,27 @@
import React from "react";
import React, { Suspense } from "react";
import CodeBlock from "@theme/CodeBlock";
import { keyToIconComponent } from "@firecms/ui";

import { SearchIconsView } from "@firecms/core";
const LazySearchIconsView = React.lazy(() => import("./DefaultSearchIconsView"));

export function DocsIconsView() {
return <SearchIconsView/>;
const [selectedIcon, setSelectedIcon] = React.useState<string | undefined>(undefined);
const componentName = selectedIcon ? keyToIconComponent(selectedIcon) : undefined;
return <div className={"flex flex-col gap-4"}>

<Suspense fallback={<div/>}>
<LazySearchIconsView
onIconSelected={setSelectedIcon}
/>
</Suspense>
{selectedIcon && <div className={"flex flex-col gap-4"}>
<div>
If you need to specify your icon as a key, you can use the following value:
</div>
<b><code>{selectedIcon ?? "None"}</code></b>
{componentName && <CodeBlock language={"tsx"}>
{`import { ${componentName} } from "@firecms/ui";\n<${componentName}/>`}
</CodeBlock>}
</div>}
</div>;
}
3 changes: 3 additions & 0 deletions website/tsconfig.json
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,9 @@
"strictNullChecks": true,
"baseUrl": ".",
"paths": {
"@firecms/ui": [
"../packages/ui",
],
"@firecms/core": [
"../packages/firecms_core"
],
Expand Down
Loading

0 comments on commit b4565bc

Please sign in to comment.