doryan
/
material-you-react
0
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: doryan:945cdf5202912d3cb1190be441de36cbe216432a
Branches Tags
doryan:main
doryan:experimental
...
compare: doryan:e14630ab42089c559cb5871bc267678b08c17c21
Branches Tags
doryan:main
doryan:experimental

No commits in common. "945cdf5202912d3cb1190be441de36cbe216432a" and "e14630ab42089c559cb5871bc267678b08c17c21" have entirely different histories.
945cdf5202 ... e14630ab42

56 changed files with 6698 additions and 5832 deletions
Show Stats Expand all files Collapse all files

8
.editorconfig Normal file
View File

@ -0,0 +1,8 @@
root = true
[*]
indent_style = space
indent_size = 4
end_of_line = lf
charset = utf-8
insert_final_newline = true

1
.eslintignore Normal file
View File

@ -0,0 +1 @@
build/

3
.eslintrc.json Normal file
View File

@ -0,0 +1,3 @@
{
"extends": "./node_modules/gts/"
}

12
.eslintrc.yml
View File

@ -1,12 +0,0 @@
env:
browser: true
es2021: true
extends:
- standard-with-typescript
- plugin:react/recommended
parserOptions:
ecmaVersion: latest
sourceType: module
plugins:
- react
rules: {}

5
.idea/.gitignore vendored Normal file
View File

@ -0,0 +1,5 @@
# Default ignored files
/shelf/
/workspace.xml
# Editor-based HTTP Client requests
/httpRequests/

0
.idea/doryan-blog-next-turbo.iml → .idea/google_m3_ui_kit.iml
View File

11
.idea/inspectionProfiles/Project_Default.xml
View File

@ -1,15 +1,6 @@
<component name="InspectionProjectProfileManager">
<profile version="1.0">
<option name="myName" value="Project Default" />
<inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true">
<option name="myValues">
<value>
<list size="1">
<item index="0" class="java.lang.String" itemvalue="indeterminate" />
</list>
</value>
</option>
<option name="myCustomValuesEnabled" value="true" />
</inspection_tool>
<inspection_tool class="Eslint" enabled="true" level="WARNING" enabled_by_default="true" />
</profile>
</component>

2
.idea/modules.xml
View File

@ -2,7 +2,7 @@
<project version="4">
<component name="ProjectModuleManager">
<modules>
<module fileurl="file://$PROJECT_DIR$/.idea/doryan-blog-next-turbo.iml" filepath="$PROJECT_DIR$/.idea/doryan-blog-next-turbo.iml" />
<module fileurl="file://$PROJECT_DIR$/.idea/google_m3_ui_kit.iml" filepath="$PROJECT_DIR$/.idea/google_m3_ui_kit.iml" />
</modules>
</component>
</project>

220
.idea/shelf/Uncommitted_changes_before_Update_at_1_28_24,_7_04_PM_[Changes]/shelved.patch
View File

File diff suppressed because one or more lines are too long

4
.idea/shelf/Uncommitted_changes_before_Update_at_1_28_24__7_04_PM__Changes_.xml
View File

@ -1,4 +0,0 @@
<changelist name="Uncommitted_changes_before_Update_at_1_28_24,_7_04_PM_[Changes]" date="1706454282148" recycled="true" deleted="true">
<option name="PATH" value="$PROJECT_DIR$/.idea/shelf/Uncommitted_changes_before_Update_at_1_28_24,_7_04_PM_[Changes]/shelved.patch" />
<option name="DESCRIPTION" value="Uncommitted changes before Update at 1/28/24, 7:04 PM [Changes]" />
</changelist>

25
.idea/watcherTasks.xml
View File

@ -1,25 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="ProjectTasksOptions">
<TaskOptions isEnabled="true">
<option name="arguments" value="$FileName$:$FileNameWithoutExtension$.css" />
<option name="checkSyntaxErrors" value="true" />
<option name="description" />
<option name="exitCodeBehavior" value="ERROR" />
<option name="fileExtension" value="sass" />
<option name="immediateSync" value="true" />
<option name="name" value="Sass" />
<option name="output" value="$FileNameWithoutExtension$.css:$FileNameWithoutExtension$.css.map" />
<option name="outputFilters">
<array />
</option>
<option name="outputFromStdout" value="false" />
<option name="program" value="sass" />
<option name="runOnExternalChanges" value="true" />
<option name="scopeName" value="Project Files" />
<option name="trackOnlyRoot" value="false" />
<option name="workingDir" value="$FileDir$" />
<envs />
</TaskOptions>
</component>
</project>

657
.idea/workspace.xml
View File

@ -1,657 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<project version="4">
<component name="AutoImportSettings">
<option name="autoReloadType" value="SELECTIVE" />
</component>
<component name="ChangeListManager">
<list default="true" id="dfedb2a6-20cd-4ce8-b2bd-3125f42708f3" name="Changes" comment="ADDED: opportunity align to the center ripple for all components that have ripple effect">
<change afterPath="$PROJECT_DIR$/src/primitive-components/checkbox-layout/checkbox-layout.types.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/primitive-components/icon/icon.tsx" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/primitive-components/icon/icon.types.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/primitive-components/text-field/text-field.types.ts" afterDir="false" />
<change afterPath="$PROJECT_DIR$/src/styles/icon.sass" afterDir="false" />
<change beforePath="$PROJECT_DIR$/.idea/workspace.xml" beforeDir="false" afterPath="$PROJECT_DIR$/.idea/workspace.xml" afterDir="false" />
<change beforePath="$PROJECT_DIR$/app/components/checkboxes.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/checkboxes.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/app/components/icon-buttons.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/icon-buttons.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/app/components/radios.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/radios.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/app/components/switches.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/components/switches.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/app/layout.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/app/layout.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/dist/output.css" beforeDir="false" afterPath="$PROJECT_DIR$/dist/output.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/dist/styles/styles.css" beforeDir="false" afterPath="$PROJECT_DIR$/dist/styles/styles.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/button-skeleton/button-layout.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/button-layout/button-layout.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/button-skeleton/button.types.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/button-layout/button.types.ts" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/button/button.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/button/button.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/checkbox-skeleton/check-box-skeleton.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/checkbox-layout/check-box-skeleton.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/checkbox/checkbox.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/checkbox/checkbox.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/fab/fab.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/fab/fab.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/icon-button/icon-button.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/icon-button/icon-button.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/material-you-components.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/material-you-components.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/radio/radio.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/radio/radio.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/switch/switch.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/switch/switch.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/primitive-components/text-field/text-field.tsx" beforeDir="false" afterPath="$PROJECT_DIR$/src/primitive-components/text-field/text-field.tsx" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/button.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/button.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/button.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/button.css.map" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/button.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/button.sass" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/checkbox.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/checkbox.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/checkbox.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/checkbox.css.map" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/checkbox.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/checkbox.sass" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/fabs.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/fabs.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/fabs.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/fabs.css.map" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/fonts.css" beforeDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/fonts.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/fonts.css.map" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/fonts.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/fonts.sass" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/generics.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/generics.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.css.map" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/generics.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/generics.sass" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/icon-button.css" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/icon-button.css" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/icon-button.css.map" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/icon-button.css.map" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/icon-button.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/icon-button.sass" afterDir="false" />
<change beforePath="$PROJECT_DIR$/src/styles/mixins/m3-mixins.sass" beforeDir="false" afterPath="$PROJECT_DIR$/src/styles/mixins/m3-mixins.sass" afterDir="false" />
</list>
<option name="SHOW_DIALOG" value="false" />
<option name="HIGHLIGHT_CONFLICTS" value="true" />
<option name="HIGHLIGHT_NON_ACTIVE_CHANGELIST" value="false" />
<option name="LAST_RESOLUTION" value="IGNORE" />
</component>
<component name="FileTemplateManagerImpl">
<option name="RECENT_TEMPLATES">
<list>
<option value="TypeScript JSX File" />
<option value="Sass File" />
<option value="TypeScript File" />
</list>
</option>
</component>
<component name="Git.Settings">
<option name="RECENT_GIT_ROOT_PATH" value="$PROJECT_DIR$" />
</component>
<component name="HighlightingSettingsPerFile">
<setting file="file://$PROJECT_DIR$/node_modules/@material/web/checkbox/checkbox.d.ts" root0="SKIP_INSPECTION" />
</component>
<component name="MarkdownSettingsMigration">
<option name="stateVersion" value="1" />
</component>
<component name="ProjectColorInfo">{
&quot;customColor&quot;: &quot;&quot;,
&quot;associatedIndex&quot;: 2
}</component>
<component name="ProjectId" id="2aMzZwdBm9SBJKBvmCHBJPUs4Gu" />
<component name="ProjectViewState">
<option name="hideEmptyMiddlePackages" value="true" />
<option name="showLibraryContents" value="true" />
</component>
<component name="PropertiesComponent">{
&quot;keyToString&quot;: {
&quot;RunOnceActivity.OpenProjectViewOnStart&quot;: &quot;true&quot;,
&quot;RunOnceActivity.ShowReadmeOnStart&quot;: &quot;true&quot;,
&quot;WebServerToolWindowFactoryState&quot;: &quot;false&quot;,
&quot;git-widget-placeholder&quot;: &quot;main&quot;,
&quot;last_opened_file_path&quot;: &quot;/home/drn04/material-you-react&quot;,
&quot;list.type.of.created.stylesheet&quot;: &quot;Sass&quot;,
&quot;node.js.detected.package.eslint&quot;: &quot;true&quot;,
&quot;node.js.detected.package.tslint&quot;: &quot;true&quot;,
&quot;node.js.selected.package.eslint&quot;: &quot;(autodetect)&quot;,
&quot;node.js.selected.package.tslint&quot;: &quot;(autodetect)&quot;,
&quot;nodejs_package_manager_path&quot;: &quot;npm&quot;,
&quot;settings.editor.selected.configurable&quot;: &quot;watcher.settings&quot;,
&quot;ts.external.directory.path&quot;: &quot;/home/doryan04/DoryanNetwork/doryan-blog-next-turbo/node_modules/typescript/lib&quot;,
&quot;vue.rearranger.settings.migration&quot;: &quot;true&quot;
}
}</component>
<component name="RecentsManager">
<key name="CopyFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/src/styles" />
<recent name="$PROJECT_DIR$/src/styles/font" />
</key>
<key name="MoveFile.RECENT_KEYS">
<recent name="$PROJECT_DIR$/src/primitive-components" />
</key>
</component>
<component name="RunManager" selected="npm.dev">
<configuration name="build" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
<package-json value="$PROJECT_DIR$/package.json" />
<command value="run" />
<scripts>
<script value="build" />
</scripts>
<node-interpreter value="project" />
<envs />
<method v="2" />
</configuration>
<configuration name="dev" type="js.build_tools.npm" nameIsGenerated="true">
<package-json value="$PROJECT_DIR$/package.json" />
<command value="run" />
<scripts>
<script value="dev" />
</scripts>
<node-interpreter value="project" />
<envs />
<method v="2" />
</configuration>
<configuration name="start" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
<package-json value="$PROJECT_DIR$/package.json" />
<command value="run" />
<scripts>
<script value="start" />
</scripts>
<node-interpreter value="project" />
<envs />
<method v="2" />
</configuration>
<recent_temporary>
<list>
<item itemvalue="npm.start" />
<item itemvalue="npm.build" />
</list>
</recent_temporary>
</component>
<component name="SpellCheckerSettings" RuntimeDictionaries="0" Folders="0" CustomDictionaries="0" DefaultDictionary="application-level" UseSingleDictionary="true" transferred="true" />
<component name="TaskManager">
<task active="true" id="Default" summary="Default task">
<changelist id="dfedb2a6-20cd-4ce8-b2bd-3125f42708f3" name="Changes" comment="" />
<created>1704143295326</created>
<option name="number" value="Default" />
<option name="presentableId" value="Default" />
<updated>1704143295326</updated>
<workItem from="1704143297251" duration="2066000" />
<workItem from="1704145458812" duration="1333000" />
<workItem from="1704147434511" duration="2788000" />
<workItem from="1704179271846" duration="27334000" />
<workItem from="1704228987899" duration="62000" />
<workItem from="1704266465200" duration="4226000" />
<workItem from="1704303741925" duration="11908000" />
<workItem from="1704352985433" duration="28906000" />
<workItem from="1704441648986" duration="8737000" />
<workItem from="1704453712620" duration="34000" />
<workItem from="1704453866252" duration="4606000" />
<workItem from="1704470557960" duration="599000" />
<workItem from="1704482822622" duration="25572000" />
<workItem from="1704622017317" duration="1170000" />
<workItem from="1704624362614" duration="32454000" />
<workItem from="1704736262141" duration="16696000" />
<workItem from="1704788077373" duration="1228000" />
<workItem from="1704791818898" duration="8375000" />
<workItem from="1704833453490" duration="5101000" />
<workItem from="1704989132540" duration="9364000" />
<workItem from="1705064322484" duration="9060000" />
<workItem from="1705088474200" duration="6084000" />
<workItem from="1705095829356" duration="1674000" />
<workItem from="1705097515215" duration="1484000" />
<workItem from="1705144217658" duration="184000" />
<workItem from="1705175691296" duration="9914000" />
<workItem from="1705221294286" duration="3349000" />
<workItem from="1705225252401" duration="32000" />
<workItem from="1705225292674" duration="8000" />
<workItem from="1705225306474" duration="555000" />
<workItem from="1705446738426" duration="38000" />
<workItem from="1705483840463" duration="31000" />
<workItem from="1705521877221" duration="7923000" />
<workItem from="1705592136891" duration="692000" />
<workItem from="1705594003195" duration="6604000" />
<workItem from="1705603674262" duration="5421000" />
<workItem from="1705661083275" duration="4000" />
<workItem from="1705666401100" duration="1064000" />
<workItem from="1705667596747" duration="3042000" />
<workItem from="1705671414099" duration="1026000" />
<workItem from="1705695392779" duration="6092000" />
<workItem from="1705775936603" duration="80000" />
<workItem from="1705776495106" duration="3149000" />
<workItem from="1705784955475" duration="3244000" />
<workItem from="1705824814760" duration="3000" />
<workItem from="1705872118999" duration="5390000" />
<workItem from="1705911291566" duration="124000" />
<workItem from="1705937322215" duration="316000" />
<workItem from="1705937839794" duration="11116000" />
<workItem from="1706023242228" duration="822000" />
<workItem from="1706024195558" duration="6543000" />
<workItem from="1706212432785" duration="1892000" />
<workItem from="1706214971346" duration="611000" />
<workItem from="1706288977398" duration="4026000" />
<workItem from="1706338830405" duration="10157000" />
<workItem from="1706351565380" duration="805000" />
<workItem from="1706373080363" duration="1879000" />
<workItem from="1706426744715" duration="17520000" />
<workItem from="1706516378911" duration="15403000" />
<workItem from="1706552378046" duration="8738000" />
<workItem from="1706598284665" duration="4240000" />
<workItem from="1706617852695" duration="6530000" />
<workItem from="1706629691514" duration="13025000" />
</task>
<task id="LOCAL-00025" summary="added radio component">
<option name="closed" value="true" />
<created>1704577073405</created>
<option name="number" value="00025" />
<option name="presentableId" value="LOCAL-00025" />
<option name="project" value="LOCAL" />
<updated>1704577073405</updated>
</task>
<task id="LOCAL-00026" summary="added in preview page radio component">
<option name="closed" value="true" />
<created>1704577088372</created>
<option name="number" value="00026" />
<option name="presentableId" value="LOCAL-00026" />
<option name="project" value="LOCAL" />
<updated>1704577088372</updated>
</task>
<task id="LOCAL-00027" summary="I forgot, what I change">
<option name="closed" value="true" />
<created>1704577111494</created>
<option name="number" value="00027" />
<option name="presentableId" value="LOCAL-00027" />
<option name="project" value="LOCAL" />
<updated>1704577111494</updated>
</task>
<task id="LOCAL-00028" summary="I forgot, what I change">
<option name="closed" value="true" />
<created>1704577125154</created>
<option name="number" value="00028" />
<option name="presentableId" value="LOCAL-00028" />
<option name="project" value="LOCAL" />
<updated>1704577125154</updated>
</task>
<task id="LOCAL-00029" summary="added radio styles and mixins">
<option name="closed" value="true" />
<created>1704577139599</created>
<option name="number" value="00029" />
<option name="presentableId" value="LOCAL-00029" />
<option name="project" value="LOCAL" />
<updated>1704577139599</updated>
</task>
<task id="LOCAL-00030" summary="radio styles component update">
<option name="closed" value="true" />
<created>1704665181492</created>
<option name="number" value="00030" />
<option name="presentableId" value="LOCAL-00030" />
<option name="project" value="LOCAL" />
<updated>1704665181492</updated>
</task>
<task id="LOCAL-00031" summary="I forgot, what I changed">
<option name="closed" value="true" />
<created>1704665219291</created>
<option name="number" value="00031" />
<option name="presentableId" value="LOCAL-00031" />
<option name="project" value="LOCAL" />
<updated>1704665219291</updated>
</task>
<task id="LOCAL-00032" summary="Updated switch styles">
<option name="closed" value="true" />
<created>1704665235238</created>
<option name="number" value="00032" />
<option name="presentableId" value="LOCAL-00032" />
<option name="project" value="LOCAL" />
<updated>1704665235238</updated>
</task>
<task id="LOCAL-00033" summary="Updated preview page">
<option name="closed" value="true" />
<created>1704665243297</created>
<option name="number" value="00033" />
<option name="presentableId" value="LOCAL-00033" />
<option name="project" value="LOCAL" />
<updated>1704665243297</updated>
</task>
<task id="LOCAL-00034" summary="added mixins">
<option name="closed" value="true" />
<created>1704665255268</created>
<option name="number" value="00034" />
<option name="presentableId" value="LOCAL-00034" />
<option name="project" value="LOCAL" />
<updated>1704665255268</updated>
</task>
<task id="LOCAL-00035" summary="moved fonts to separated file">
<option name="closed" value="true" />
<created>1704665272238</created>
<option name="number" value="00035" />
<option name="presentableId" value="LOCAL-00035" />
<option name="project" value="LOCAL" />
<updated>1704665272238</updated>
</task>
<task id="LOCAL-00036" summary="added roboto fonts">
<option name="closed" value="true" />
<created>1704665285628</created>
<option name="number" value="00036" />
<option name="presentableId" value="LOCAL-00036" />
<option name="project" value="LOCAL" />
<updated>1704665285628</updated>
</task>
<task id="LOCAL-00037" summary="added roboto fonts, fabs and fonts style sheets after sass compiling">
<option name="closed" value="true" />
<created>1704665322221</created>
<option name="number" value="00037" />
<option name="presentableId" value="LOCAL-00037" />
<option name="project" value="LOCAL" />
<updated>1704665322221</updated>
</task>
<task id="LOCAL-00038" summary="added and updated some component (fabs, button, switch, radio, checkbox)">
<option name="closed" value="true" />
<created>1704665352879</created>
<option name="number" value="00038" />
<option name="presentableId" value="LOCAL-00038" />
<option name="project" value="LOCAL" />
<updated>1704665352879</updated>
</task>
<task id="LOCAL-00039" summary="added sass style sheet file for fabs">
<option name="closed" value="true" />
<created>1704665367142</created>
<option name="number" value="00039" />
<option name="presentableId" value="LOCAL-00039" />
<option name="project" value="LOCAL" />
<updated>1704665367142</updated>
</task>
<task id="LOCAL-00040" summary="updated button styles and renaming button component file">
<option name="closed" value="true" />
<created>1704665398936</created>
<option name="number" value="00040" />
<option name="presentableId" value="LOCAL-00040" />
<option name="project" value="LOCAL" />
<updated>1704665398936</updated>
</task>
<task id="LOCAL-00041" summary="updated checkbox styles">
<option name="closed" value="true" />
<created>1704665410733</created>
<option name="number" value="00041" />
<option name="presentableId" value="LOCAL-00041" />
<option name="project" value="LOCAL" />
<updated>1704665410733</updated>
</task>
<task id="LOCAL-00042" summary="updated styles for preview page">
<option name="closed" value="true" />
<created>1704748096828</created>
<option name="number" value="00042" />
<option name="presentableId" value="LOCAL-00042" />
<option name="project" value="LOCAL" />
<updated>1704748096828</updated>
</task>
<task id="LOCAL-00043" summary="switch styles completed">
<option name="closed" value="true" />
<created>1704748124500</created>
<option name="number" value="00043" />
<option name="presentableId" value="LOCAL-00043" />
<option name="project" value="LOCAL" />
<updated>1704748124500</updated>
</task>
<task id="LOCAL-00044" summary="updated preview page">
<option name="closed" value="true" />
<created>1704748135954</created>
<option name="number" value="00044" />
<option name="presentableId" value="LOCAL-00044" />
<option name="project" value="LOCAL" />
<updated>1704748135954</updated>
</task>
<task id="LOCAL-00045" summary="added attribute &quot;selected&quot; for icons">
<option name="closed" value="true" />
<created>1704748153364</created>
<option name="number" value="00045" />
<option name="presentableId" value="LOCAL-00045" />
<option name="project" value="LOCAL" />
<updated>1704748153364</updated>
</task>
<task id="LOCAL-00046" summary="switch styles hotfix">
<option name="closed" value="true" />
<created>1704751209333</created>
<option name="number" value="00046" />
<option name="presentableId" value="LOCAL-00046" />
<option name="project" value="LOCAL" />
<updated>1704751209333</updated>
</task>
<task id="LOCAL-00047" summary="switch styles hotfix">
<option name="closed" value="true" />
<created>1704751889114</created>
<option name="number" value="00047" />
<option name="presentableId" value="LOCAL-00047" />
<option name="project" value="LOCAL" />
<updated>1704751889114</updated>
</task>
<task id="LOCAL-00048" summary="added compiled sass styles for icon-buttons">
<option name="closed" value="true" />
<created>1704837754211</created>
<option name="number" value="00048" />
<option name="presentableId" value="LOCAL-00048" />
<option name="project" value="LOCAL" />
<updated>1704837754211</updated>
</task>
<task id="LOCAL-00049" summary="icon button styles completed">
<option name="closed" value="true" />
<created>1704837786812</created>
<option name="number" value="00049" />
<option name="presentableId" value="LOCAL-00049" />
<option name="project" value="LOCAL" />
<updated>1704837786812</updated>
</task>
<task id="LOCAL-00050" summary="separated components previews">
<option name="closed" value="true" />
<created>1704837827996</created>
<option name="number" value="00050" />
<option name="presentableId" value="LOCAL-00050" />
<option name="project" value="LOCAL" />
<updated>1704837827996</updated>
</task>
<task id="LOCAL-00051" summary="added m3 wrapper">
<option name="closed" value="true" />
<created>1704837841727</created>
<option name="number" value="00051" />
<option name="presentableId" value="LOCAL-00051" />
<option name="project" value="LOCAL" />
<updated>1704837841727</updated>
</task>
<task id="LOCAL-00052" summary="added icon button (wip)">
<option name="closed" value="true" />
<created>1704837855501</created>
<option name="number" value="00052" />
<option name="presentableId" value="LOCAL-00052" />
<option name="project" value="LOCAL" />
<updated>1704837855501</updated>
</task>
<task id="LOCAL-00053" summary="??? wtf bro">
<option name="closed" value="true" />
<created>1704837877968</created>
<option name="number" value="00053" />
<option name="presentableId" value="LOCAL-00053" />
<option name="project" value="LOCAL" />
<updated>1704837877968</updated>
</task>
<task id="LOCAL-00054" summary="??? wtf bro">
<option name="closed" value="true" />
<created>1704837881086</created>
<option name="number" value="00054" />
<option name="presentableId" value="LOCAL-00054" />
<option name="project" value="LOCAL" />
<updated>1704837881086</updated>
</task>
<task id="LOCAL-00055" summary="??? wtf bro">
<option name="closed" value="true" />
<created>1704837896608</created>
<option name="number" value="00055" />
<option name="presentableId" value="LOCAL-00055" />
<option name="project" value="LOCAL" />
<updated>1704837896608</updated>
</task>
<task id="LOCAL-00056" summary="updated styles">
<option name="closed" value="true" />
<created>1704837910534</created>
<option name="number" value="00056" />
<option name="presentableId" value="LOCAL-00056" />
<option name="project" value="LOCAL" />
<updated>1704837910534</updated>
</task>
<task id="LOCAL-00057" summary="added forward ref for further refs actions, added functionality for switchable icon buttons, added half of styles for icon buttons">
<option name="closed" value="true" />
<created>1705098993824</created>
<option name="number" value="00057" />
<option name="presentableId" value="LOCAL-00057" />
<option name="project" value="LOCAL" />
<updated>1705098993824</updated>
</task>
<task id="LOCAL-00058" summary="icon button styles completed">
<option name="closed" value="true" />
<created>1705187043022</created>
<option name="number" value="00058" />
<option name="presentableId" value="LOCAL-00058" />
<option name="project" value="LOCAL" />
<updated>1705187043022</updated>
</task>
<task id="LOCAL-00059" summary="icon button styles completed">
<option name="closed" value="true" />
<created>1705187047711</created>
<option name="number" value="00059" />
<option name="presentableId" value="LOCAL-00059" />
<option name="project" value="LOCAL" />
<updated>1705187047711</updated>
</task>
<task id="LOCAL-00060" summary="icon button styles completed">
<option name="closed" value="true" />
<created>1705187050731</created>
<option name="number" value="00060" />
<option name="presentableId" value="LOCAL-00060" />
<option name="project" value="LOCAL" />
<updated>1705187050731</updated>
</task>
<task id="LOCAL-00061" summary="added a few variation of icon button">
<option name="closed" value="true" />
<created>1705187070169</created>
<option name="number" value="00061" />
<option name="presentableId" value="LOCAL-00061" />
<option name="project" value="LOCAL" />
<updated>1705187070169</updated>
</task>
<task id="LOCAL-00062" summary="added support attribute &quot;selected&quot; for icon buttons">
<option name="closed" value="true" />
<created>1705187096566</created>
<option name="number" value="00062" />
<option name="presentableId" value="LOCAL-00062" />
<option name="project" value="LOCAL" />
<updated>1705187096567</updated>
</task>
<task id="LOCAL-00063" summary="improved file management">
<option name="closed" value="true" />
<created>1705446770845</created>
<option name="number" value="00063" />
<option name="presentableId" value="LOCAL-00063" />
<option name="project" value="LOCAL" />
<updated>1705446770846</updated>
</task>
<task id="LOCAL-00064" summary="TODO: complete supporting text&#10;ADDED: semi-complete filled text fields&#10;CHANGED: preview page and m3 color scheme">
<option name="closed" value="true" />
<created>1705788187457</created>
<option name="number" value="00064" />
<option name="presentableId" value="LOCAL-00064" />
<option name="project" value="LOCAL" />
<updated>1705788187457</updated>
</task>
<task id="LOCAL-00065" summary="TODO: complete supporting text&#10;ADDED: semi-complete filled text fields&#10;CHANGED: preview page and m3 color scheme">
<option name="closed" value="true" />
<created>1705788194219</created>
<option name="number" value="00065" />
<option name="presentableId" value="LOCAL-00065" />
<option name="project" value="LOCAL" />
<updated>1705788194219</updated>
</task>
<task id="LOCAL-00066" summary="TODO: before icon&#10;ADDED: semi-complete filled text fields">
<option name="closed" value="true" />
<created>1705877491483</created>
<option name="number" value="00066" />
<option name="presentableId" value="LOCAL-00066" />
<option name="project" value="LOCAL" />
<updated>1705877491483</updated>
</task>
<task id="LOCAL-00067" summary="TODO: placeholder&#10;ADDED: supported text, animation move for label, and etc">
<option name="closed" value="true" />
<created>1705955541881</created>
<option name="number" value="00067" />
<option name="presentableId" value="LOCAL-00067" />
<option name="project" value="LOCAL" />
<updated>1705955541881</updated>
</task>
<task id="LOCAL-00068" summary="DONE: I forget, what I do">
<option name="closed" value="true" />
<created>1706461771129</created>
<option name="number" value="00068" />
<option name="presentableId" value="LOCAL-00068" />
<option name="project" value="LOCAL" />
<updated>1706461771129</updated>
</task>
<task id="LOCAL-00069" summary="DONE: I forget, what I do">
<option name="closed" value="true" />
<created>1706461783505</created>
<option name="number" value="00069" />
<option name="presentableId" value="LOCAL-00069" />
<option name="project" value="LOCAL" />
<updated>1706461783505</updated>
</task>
<task id="LOCAL-00070" summary="DONE: Dividers, Badges, disable elevation state for FABS&#10;FIXED: Checkboxes, toggled icon-button style">
<option name="closed" value="true" />
<created>1706560991099</created>
<option name="number" value="00070" />
<option name="presentableId" value="LOCAL-00070" />
<option name="project" value="LOCAL" />
<updated>1706560991099</updated>
</task>
<task id="LOCAL-00071" summary="DONE: Dividers, Badges, disable elevation state for FABS&#10;FIXED: Checkboxes, toggled icon-button style">
<option name="closed" value="true" />
<created>1706561005869</created>
<option name="number" value="00071" />
<option name="presentableId" value="LOCAL-00071" />
<option name="project" value="LOCAL" />
<updated>1706561005869</updated>
</task>
<task id="LOCAL-00072" summary="UPDATE: README.md">
<option name="closed" value="true" />
<created>1706562164219</created>
<option name="number" value="00072" />
<option name="presentableId" value="LOCAL-00072" />
<option name="project" value="LOCAL" />
<updated>1706562164219</updated>
</task>
<task id="LOCAL-00073" summary="ADDED: opportunity align to the center ripple for all components that have ripple effect">
<option name="closed" value="true" />
<created>1706603599586</created>
<option name="number" value="00073" />
<option name="presentableId" value="LOCAL-00073" />
<option name="project" value="LOCAL" />
<updated>1706603599586</updated>
</task>
<option name="localTasksCounter" value="74" />
<servers />
</component>
<component name="TypeScriptGeneratedFilesManager">
<option name="version" value="3" />
</component>
<component name="Vcs.Log.Tabs.Properties">
<option name="TAB_STATES">
<map>
<entry key="MAIN">
<value>
<State />
</value>
</entry>
</map>
</option>
</component>
<component name="VcsManagerConfiguration">
<MESSAGE value="updated button styles and renaming button component file" />
<MESSAGE value="updated checkbox styles" />
<MESSAGE value="updated styles for preview page" />
<MESSAGE value="switch styles completed" />
<MESSAGE value="updated preview page" />
<MESSAGE value="added attribute &quot;selected&quot; for icons" />
<MESSAGE value="switch styles hotfix" />
<MESSAGE value="added compiled sass styles for icon-buttons" />
<MESSAGE value="separated components previews" />
<MESSAGE value="added m3 wrapper" />
<MESSAGE value="added icon button (wip)" />
<MESSAGE value="??? wtf bro" />
<MESSAGE value="updated styles" />
<MESSAGE value="added forward ref for further refs actions, added functionality for switchable icon buttons, added half of styles for icon buttons" />
<MESSAGE value="icon button styles completed" />
<MESSAGE value="added a few variation of icon button" />
<MESSAGE value="added support attribute &quot;selected&quot; for icon buttons" />
<MESSAGE value="improved file management" />
<MESSAGE value="TODO: complete supporting text&#10;ADDED: semi-complete filled text fields&#10;CHANGED: preview page and m3 color scheme" />
<MESSAGE value="TODO: before icon&#10;ADDED: semi-complete filled text fields" />
<MESSAGE value="TODO: placeholder&#10;ADDED: supported text, animation move for label, and etc" />
<MESSAGE value="DONE: I forget, what I do" />
<MESSAGE value="DONE: Dividers, Badges, disable elevation state for FABS&#10;FIXED: Checkboxes, toggled icon-button style" />
<MESSAGE value="UPDATE: README.md" />
<MESSAGE value="ADDED: opportunity align to the center ripple for all components that have ripple effect" />
<option name="LAST_COMMIT_MESSAGE" value="ADDED: opportunity align to the center ripple for all components that have ripple effect" />
</component>
</project>

3
.prettierrc.js Normal file
View File

@ -0,0 +1,3 @@
module.exports = {
...require('gts/.prettierrc.json')
}

1
README.md
View File

@ -10,6 +10,7 @@ This repository is including and will be including components, enumerates in tab
- [x] Text fields
- [x] Switches
- [ ] Chips
- [x] Icon
- [x] Ripple Effect
- [x] Dividers
- [x] Badges

135
app/components/badges.tsx
View File

@ -1,75 +1,92 @@
import React from 'react';
import {Badge} from "../../src/primitive-components/badge/badge";
import {Divider} from "../../src/primitive-components/divider/divider";
import {Badge} from '../../src/primitive-components/badge/badge';
import {Divider} from '../../src/primitive-components/divider/divider';
export default function Badges() {
return (
<div className={"m3 m3-wrapper"} style={{display:"flex", flexDirection:"row"}}>
<div
className={'m3 m3-wrapper'}
style={{display: 'flex', flexDirection: 'row'}}
>
<div>
<div style={{
display: "flex",
flexDirection: "column",
gap: "0.5em",
justifyContent: "center",
alignItems: "center"
}}>
<div style={{
width: "24px",
aspectRatio: 1,
display: "flex",
justifyContent: "center",
alignItems: "center"
}}>
<Badge/>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
justifyContent: 'center',
alignItems: 'center',
}}
>
<div
style={{
width: '24px',
aspectRatio: 1,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Badge />
</div>
<Divider/>
<div style={{
width: "24px",
aspectRatio: 1,
display: "flex",
justifyContent: "center",
alignItems: "center"
}}>
<Badge disableValue/>
<Divider />
<div
style={{
width: '24px',
aspectRatio: 1,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Badge disableValue />
</div>
<Divider/>
<div style={{
width: "24px",
aspectRatio: 1,
display: "flex",
justifyContent: "center",
alignItems: "center"
}}>
<Divider />
<div
style={{
width: '24px',
aspectRatio: 1,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Badge disableValue>3487</Badge>
</div>
<Divider/>
<div style={{
width: "24px",
aspectRatio: 1,
display: "flex",
justifyContent: "center",
alignItems: "center"
}}>
<Divider />
<div
style={{
width: '24px',
aspectRatio: 1,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Badge>5</Badge>
</div>
<Divider/>
<div style={{
width: "24px",
aspectRatio: 1,
display: "flex",
justifyContent: "center",
alignItems: "center"
}}>
<Divider />
<div
style={{
width: '24px',
aspectRatio: 1,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Badge>32</Badge>
</div>
<Divider/>
<div style={{
width: "24px",
aspectRatio: 1,
display: "flex",
justifyContent: "center",
alignItems: "center"
}}>
<Divider />
<div
style={{
width: '24px',
aspectRatio: 1,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Badge>322342</Badge>
</div>
</div>

66
app/components/buttons.tsx
View File

@ -1,56 +1,66 @@
"use client"
'use client';
import React, {useCallback, useState} from 'react';
import {Button} from "../../src/primitive-components/material-you-components";
import {Button} from '../../src/primitive-components/material-you-components';
export default function Buttons() {
const [state, setState] = useState(1);
const callback = useCallback(() =>
setState(prevState => prevState + 1)
, [state]);
const callback = useCallback(
() => setState(prevState => prevState + 1),
[state]
);
return (
<div className={"m3 m3-wrapper"}>
<div className={'m3 m3-wrapper'}>
<h1> Buttons </h1>
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
<div style={{display: 'flex', flexDirection: 'row', gap: '2em'}}>
<div>
<h2> Default buttons </h2>
<div style={{display: "flex", flexDirection: "column", width: "150px", gap: "0.5em"}}>
<Button variant={"filled"} onClick={callback} centralRipple>
<div
style={{
display: 'flex',
flexDirection: 'column',
width: '150px',
gap: '0.5em',
}}
>
<Button
variant={'filled'}
onClick={callback}
centralRipple
>
Label + {state}
</Button>
<Button variant={"outlined"}>
Label
</Button>
<Button variant={"tonal"}>
Label
</Button>
<Button variant={"elevated"}>
Label
</Button>
<Button variant={"text"}>
Label
</Button>
<Button variant={'elevated'} />
<Button variant={'tonal'}>Label</Button>
<Button variant={'elevated'}>Label</Button>
<Button variant={'text'}>Label</Button>
</div>
</div>
<div>
<h2> Buttons with icon </h2>
<div style={{display: "flex", flexDirection: "column", width: "150px", gap: "0.5em"}}>
<Button variant={"filled"} icon={"add"}>
<div
style={{
display: 'flex',
flexDirection: 'column',
width: '150px',
gap: '0.5em',
}}
>
<Button variant={'filled'} icon={'add'}>
Label
</Button>
<Button variant={"outlined"} icon={"add"}>
<Button variant={'outlined'} icon={'add'}>
Label
</Button>
<Button variant={"tonal"} icon={"add"}>
<Button variant={'tonal'} icon={'add'}>
Label
</Button>
<Button variant={"elevated"} icon={"add"}>
<Button variant={'elevated'} icon={'add'}>
Label
</Button>
<Button variant={"text"} icon={"add"}>
<Button variant={'text'} icon={'add'}>
Label
</Button>
</div>

90
app/components/checkboxes.tsx
View File

@ -1,47 +1,87 @@
"use client"
'use client';
import React from 'react';
import {Button, Checkbox } from '../../src/primitive-components/material-you-components';
import {
Button,
Checkbox,
} from '../../src/primitive-components/material-you-components';
export default function Checkboxes() {
return (
<div className={"m3 m3-wrapper"}>
<div className={'m3 m3-wrapper'}>
<h1> Checkboxes </h1>
<div style={{display: "flex", flexDirection: "row", width: "100%", gap: "5em", justifyContent:"center"}}>
<div style={{display: "flex", flexDirection: "column", gap: "2em"}}>
<div
style={{
display: 'flex',
flexDirection: 'row',
width: '100%',
gap: '5em',
justifyContent: 'center',
}}
>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '2em',
}}
>
<div>
<h2> Default </h2>
<div style={{display: "flex", gap: "2em"}}>
<Checkbox centralRipple/>
<Checkbox defaultChecked/>
<Checkbox indeterminate={true}/>
<div style={{display: 'flex', gap: '2em'}}>
<Checkbox centralRipple />
<Checkbox defaultChecked />
<Checkbox indeterminate={true} />
</div>
</div>
<div>
<h2> Disabled </h2>
<div style={{display: "flex", gap: "2em"}}>
<Checkbox disabled/>
<Checkbox disabled defaultChecked/>
<div style={{display: 'flex', gap: '2em'}}>
<Checkbox disabled />
<Checkbox disabled defaultChecked />
</div>
</div>
</div>
<div>
<h2> Errored </h2>
<form style={{display: "flex", gap: "2em", flexDirection: "column"}}>
<div style={{display: "flex", gap: "2em", flexDirection: "row"}}>
<Checkbox required/>
<Checkbox required defaultChecked/>
<Checkbox required indeterminate={true}/>
<form
style={{
display: 'flex',
gap: '2em',
flexDirection: 'column',
}}
>
<div
style={{
display: 'flex',
gap: '2em',
flexDirection: 'row',
}}
>
<Checkbox required />
<Checkbox required defaultChecked />
<Checkbox required indeterminate={true} />
</div>
<div style={{display: "flex", gap: "2em", flexDirection: "row"}}>
<Checkbox required className={"m3-error"}/>
<Checkbox required defaultChecked className={"m3-error"}/>
<Checkbox required indeterminate={true} className={"m3-error"}/>
<div
style={{
display: 'flex',
gap: '2em',
flexDirection: 'row',
}}
>
<Checkbox required className={'m3-error'} />
<Checkbox
required
defaultChecked
className={'m3-error'}
/>
<Checkbox
required
indeterminate={true}
className={'m3-error'}
/>
</div>
<Button type={"submit"}>
Send
</Button>
<Button type={'submit'}>Send</Button>
</form>
</div>
</div>

295
app/components/fabs.tsx
View File

@ -1,103 +1,123 @@
import React from 'react';
import {FAB} from "../../src/primitive-components/material-you-components";
import {FAB} from '../../src/primitive-components/material-you-components';
export default function Fabs() {
return (
<div className={"m3 m3-wrapper"}>
<div style={{display:"flex",flexDirection:"row",gap:"2em"}}>
<div className={'m3 m3-wrapper'}>
<div style={{display: 'flex', flexDirection: 'row', gap: '2em'}}>
<div>
<h1> FABs with elevation</h1>
<div style={{display: "flex", flexDirection: "column", width: "100%", gap: "2em"}}>
<div
style={{
display: 'flex',
flexDirection: 'column',
width: '100%',
gap: '2em',
}}
>
<div>
<h2> Small </h2>
<div style={{display: "flex", gap: "2em"}}>
<FAB size={"small"}
icon={"edit"}
elevated
centralRipple/>
<FAB variant={"primary"}
size={"small"}
icon={"edit"}
elevated/>
<FAB variant={"secondary"}
size={"small"}
icon={"edit"}
elevated/>
<FAB variant={"tertiary"}
size={"small"}
icon={"edit"}
elevated/>
<div style={{display: 'flex', gap: '2em'}}>
<FAB
size={'small'}
icon={'edit'}
elevated
centralRipple
/>
<FAB
variant={'primary'}
size={'small'}
icon={'edit'}
elevated
/>
<FAB
variant={'secondary'}
size={'small'}
icon={'edit'}
elevated
/>
<FAB
variant={'tertiary'}
size={'small'}
icon={'edit'}
elevated
/>
</div>
</div>
<div>
<h2> Default </h2>
<div style={{display: "flex", gap: "2em"}}>
<FAB icon={"edit"}
elevated/>
<FAB variant={"primary"}
icon={"edit"}
elevated/>
<FAB variant={"secondary"}
icon={"edit"}
elevated/>
<FAB variant={"tertiary"}
icon={"edit"}
elevated/>
<div style={{display: 'flex', gap: '2em'}}>
<FAB icon={'edit'} elevated />
<FAB
variant={'primary'}
icon={'edit'}
elevated
/>
<FAB
variant={'secondary'}
icon={'edit'}
elevated
/>
<FAB
variant={'tertiary'}
icon={'edit'}
elevated
/>
</div>
</div>
<div>
<h2> Large </h2>
<div style={{display: "flex", gap: "2em"}}>
<FAB size={"large"}
icon={"edit"}
elevated/>
<FAB variant={"primary"}
size={"large"}
icon={"edit"}
elevated/>
<FAB variant={"secondary"}
size={"large"}
icon={"edit"}
elevated/>
<FAB variant={"tertiary"}
size={"large"}
icon={"edit"}
elevated/>
<div style={{display: 'flex', gap: '2em'}}>
<FAB size={'large'} icon={'edit'} />
<FAB
variant={'primary'}
size={'large'}
icon={'edit'}
elevated
/>
<FAB
variant={'secondary'}
size={'large'}
icon={'edit'}
elevated
/>
<FAB
variant={'tertiary'}
size={'large'}
icon={'edit'}
elevated
/>
</div>
</div>
<div>
<h2> Extended </h2>
<div style={{display: "flex", gap: "2em"}}>
<FAB size={"extended"}
icon={"edit"}
elevated>
<span className={"label-large"}>
Label
</span>
<div style={{display: 'flex', gap: '2em'}}>
<FAB size={'extended'} icon={'edit'} elevated>
<span className={'label-large'}>Label</span>
</FAB>
<FAB variant={"primary"}
size={"extended"}
icon={"edit"}
elevated>
<span className={"label-large"}>
Label
</span>
<FAB
variant={'primary'}
size={'extended'}
icon={'edit'}
elevated
>
<span className={'label-large'}>Label</span>
</FAB>
<FAB variant={"secondary"}
size={"extended"}
icon={"edit"}
elevated>
<span className={"label-large"}>
Label
</span>
<FAB
variant={'secondary'}
size={'extended'}
icon={'edit'}
elevated
>
<span className={'label-large'}>Label</span>
</FAB>
<FAB variant={"tertiary"}
size={"extended"}
icon={"edit"}
elevated>
<span className={"label-large"}>
Label
</span>
<FAB
variant={'tertiary'}
size={'extended'}
icon={'edit'}
elevated
>
<span className={'label-large'}>Label</span>
</FAB>
</div>
</div>
@ -105,77 +125,90 @@ export default function Fabs() {
</div>
<div>
<h1> FABs without elevation</h1>
<div style={{display: "flex", flexDirection: "column", width: "100%", gap: "2em"}}>
<div
style={{
display: 'flex',
flexDirection: 'column',
width: '100%',
gap: '2em',
}}
>
<div>
<h2> Small </h2>
<div style={{display: "flex", gap: "2em"}}>
<FAB size={"small"}
icon={"edit"}/>
<FAB variant={"primary"}
size={"small"}
icon={"edit"}/>
<FAB variant={"secondary"}
size={"small"}
icon={"edit"}/>
<FAB variant={"tertiary"}
size={"small"}
icon={"edit"}/>
<div style={{display: 'flex', gap: '2em'}}>
<FAB
size={'small'}
icon={'edit'}
variant={'primary'}
/>
<FAB
variant={'secondary'}
size={'small'}
icon={'edit'}
/>
<FAB
variant={'tertiary'}
size={'small'}
icon={'edit'}
/>
</div>
</div>
<div>
<h2> Default </h2>
<div style={{display: "flex", gap: "2em"}}>
<FAB icon={"edit"}/>
<FAB variant={"primary"} icon={"edit"}/>
<FAB variant={"secondary"} icon={"edit"}/>
<FAB variant={"tertiary"} icon={"edit"}/>
<div style={{display: 'flex', gap: '2em'}}>
<FAB icon={'edit'} />
<FAB variant={'primary'} icon={'edit'} />
<FAB variant={'secondary'} icon={'edit'} />
<FAB variant={'tertiary'} icon={'edit'} />
</div>
</div>
<div>
<h2> Large </h2>
<div style={{display: "flex", gap: "2em"}}>
<FAB size={"large"}
icon={"edit"}/>
<FAB variant={"primary"}
size={"large"}
icon={"edit"}/>
<FAB variant={"secondary"}
size={"large"}
icon={"edit"}/>
<FAB variant={"tertiary"}
size={"large"}
icon={"edit"}/>
<div style={{display: 'flex', gap: '2em'}}>
<FAB size={'large'} icon={'edit'} />
<FAB
variant={'primary'}
size={'large'}
icon={'edit'}
/>
<FAB
variant={'secondary'}
size={'large'}
icon={'edit'}
/>
<FAB
variant={'tertiary'}
size={'large'}
icon={'edit'}
/>
</div>
</div>
<div>
<h2> Extended </h2>
<div style={{display: "flex", gap: "2em"}}>
<FAB size={"extended"}
icon={"edit"}>
<span className={"label-large"}>
Label
</span>
<div style={{display: 'flex', gap: '2em'}}>
<FAB size={'extended'} icon={'edit'}>
<span className={'label-large'}>Label</span>
</FAB>
<FAB variant={"primary"}
size={"extended"}
icon={"edit"}>
<span className={"label-large"}>
Label
</span>
<FAB
variant={'primary'}
size={'extended'}
icon={'edit'}
>
<span className={'label-large'}>Label</span>
</FAB>
<FAB variant={"secondary"}
size={"extended"}
icon={"edit"}>
<span className={"label-large"}>
Label
</span>
<FAB
variant={'secondary'}
size={'extended'}
icon={'edit'}
>
<span className={'label-large'}>Label</span>
</FAB>
<FAB variant={"tertiary"}
size={"extended"}
icon={"edit"}>
<span className={"label-large"}>
Label
</span>
<FAB
variant={'tertiary'}
size={'extended'}
icon={'edit'}
>
<span className={'label-large'}>Label</span>
</FAB>
</div>
</div>

254
app/components/icon-buttons.tsx
View File

@ -1,111 +1,185 @@
"use client"
'use client';
import React from 'react';
import {IconButton} from "../../src/primitive-components/material-you-components";
import {IconButton} from '../../src/primitive-components/material-you-components';
function IconButtons() {
return (
<div className={"m3 m3-wrapper"}>
<div className={'m3 m3-wrapper'}>
<h1> Icon buttons </h1>
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
<div style={{display: 'flex', flexDirection: 'row', gap: '2em'}}>
<div>
<h2> Default buttons </h2>
<div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
<IconButton icon={"settings"} centralRipple/>
<IconButton icon={"settings"} variant={"filled"}/>
<IconButton icon={"settings"} variant={"tonal"}/>
<IconButton icon={"settings"} variant={"outlined"}/>
<div
style={{
display: 'flex',
flexDirection: 'row',
gap: '0.5em',
}}
>
<IconButton icon={'settings'} centralRipple />
<IconButton icon={'settings'} variant={'filled'} />
<IconButton icon={'settings'} variant={'tonal'} />
<IconButton icon={'settings'} variant={'outlined'} />
</div>
<h2> Disabled default buttons </h2>
<div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
<IconButton icon={"settings"} disabled/>
<IconButton icon={"settings"} variant={"filled"} disabled/>
<IconButton icon={"settings"} variant={"tonal"} disabled/>
<IconButton icon={"settings"} variant={"outlined"} disabled/>
<div
style={{
display: 'flex',
flexDirection: 'row',
gap: '0.5em',
}}
>
<IconButton icon={'settings'} disabled />
<IconButton
icon={'settings'}
variant={'filled'}
disabled
/>
<IconButton
icon={'settings'}
variant={'tonal'}
disabled
/>
<IconButton
icon={'settings'}
variant={'outlined'}
disabled
/>
</div>
</div>
<div>
<h2> Toggle buttons </h2>
<div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
<IconButton icon={"settings"} toggled={
{
selected: "settings",
unselected: "settings",
}
}/>
<IconButton icon={"settings"} variant={"filled"} toggled={
{
selected: "settings",
unselected: "settings",
}
}/>
<IconButton icon={"settings"} variant={"tonal"} toggled={
{
selected: "settings",
unselected: "settings",
}
}/>
<IconButton icon={"settings"} variant={"outlined"} toggled={
{
selected: "settings",
unselected: "settings",
}
}/>
<div
style={{
display: 'flex',
flexDirection: 'row',
gap: '0.5em',
}}
>
<IconButton
icon={'settings'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
/>
<IconButton
icon={'settings'}
variant={'filled'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
/>
<IconButton
icon={'settings'}
variant={'tonal'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
/>
<IconButton
icon={'settings'}
variant={'outlined'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
/>
</div>
<h2> Disabled toggle buttons </h2>
<div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
<IconButton icon={"settings"} toggled={
{
selected: "settings",
unselected: "settings",
}
} disabled/>
<IconButton icon={"settings"} variant={"filled"} toggled={
{
selected: "settings",
unselected: "settings",
}
} disabled/>
<IconButton icon={"settings"} variant={"tonal"} toggled={
{
selected: "settings",
unselected: "settings",
}
} disabled/>
<IconButton icon={"settings"} variant={"outlined"} toggled={
{
selected: "settings",
unselected: "settings",
}
} disabled/>
<div
style={{
display: 'flex',
flexDirection: 'row',
gap: '0.5em',
}}
>
<IconButton
icon={'settings'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
disabled
/>
<IconButton
icon={'settings'}
variant={'filled'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
disabled
/>
<IconButton
icon={'settings'}
variant={'tonal'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
disabled
/>
<IconButton
icon={'settings'}
variant={'outlined'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
disabled
/>
</div>
<h2> Disabled selected toggle buttons </h2>
<div style={{display: "flex", flexDirection: "row", gap: "0.5em"}}>
<IconButton icon={"settings"} toggled={
{
selected: "settings",
unselected: "settings",
}
} disabled selected/>
<IconButton icon={"settings"} variant={"filled"} toggled={
{
selected: "settings",
unselected: "settings",
}
} disabled selected/>
<IconButton icon={"settings"} variant={"tonal"} toggled={
{
selected: "settings",
unselected: "settings",
}
} disabled selected/>
<IconButton icon={"settings"} variant={"outlined"} toggled={
{
selected: "settings",
unselected: "settings",
}
} disabled selected/>
<div
style={{
display: 'flex',
flexDirection: 'row',
gap: '0.5em',
}}
>
<IconButton
icon={'settings'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
disabled
selected
/>
<IconButton
icon={'settings'}
variant={'filled'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
disabled
selected
/>
<IconButton
icon={'settings'}
variant={'tonal'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
disabled
selected
/>
<IconButton
icon={'settings'}
variant={'outlined'}
toggled={{
selected: 'settings',
unselected: 'settings',
}}
disabled
selected
/>
</div>
</div>
</div>

26
app/components/radios.tsx
View File

@ -1,23 +1,31 @@
import React from 'react';
import { Radio } from '../../src/primitive-components/material-you-components';
import {Radio} from '../../src/primitive-components/material-you-components';
export default function Radios() {
return (
<div className={"m3 m3-wrapper"}>
<div className={'m3 m3-wrapper'}>
<h1> Radio </h1>
<div style={{display: "flex", flexDirection: "row", width: "100%", gap: "5em", justifyContent:"center"}}>
<div
style={{
display: 'flex',
flexDirection: 'row',
width: '100%',
gap: '5em',
justifyContent: 'center',
}}
>
<div>
<h2> Default </h2>
<div style={{display: "flex", gap: "2em"}}>
<Radio centralRipple/>
<Radio defaultChecked/>
<div style={{display: 'flex', gap: '2em'}}>
<Radio centralRipple />
<Radio defaultChecked />
</div>
</div>
<div>
<h2> Disabled </h2>
<div style={{display: "flex", gap: "2em"}}>
<Radio disabled/>
<Radio disabled defaultChecked/>
<div style={{display: 'flex', gap: '2em'}}>
<Radio disabled />
<Radio disabled defaultChecked />
</div>
</div>
</div>

66
app/components/switches.tsx
View File

@ -1,53 +1,77 @@
import React from 'react';
import {Switch} from "../../src/primitive-components/material-you-components";
import {Switch} from '../../src/primitive-components/material-you-components';
export default function Switches() {
return (
<div className={"m3 m3-wrapper"} style={{display: "flex", flexDirection: "column", gap: "1.5em"}}>
<div
className={'m3 m3-wrapper'}
style={{display: 'flex', flexDirection: 'column', gap: '1.5em'}}
>
<h1> Switches </h1>
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}>
<div style={{display: "flex", flexDirection: "column"}}>
<div style={{display: 'flex', flexDirection: 'row', gap: '2em'}}>
<div style={{display: 'flex', flexDirection: 'column'}}>
<h2 style={{margin: 0}}> Without icon </h2>
<div style={{display: "flex", flexDirection: "row", width: "100%", gap: "2em"}}>
<div
style={{
display: 'flex',
flexDirection: 'row',
width: '100%',
gap: '2em',
}}
>
<div>
<h2> Default </h2>
<Switch/>
<Switch defaultChecked/>
<Switch />
<Switch defaultChecked />
</div>
<div>
<h2> Disabled </h2>
<Switch disabled/>
<Switch disabled defaultChecked/>
<Switch disabled />
<Switch disabled defaultChecked />
</div>
</div>
</div>
<div style={{display: "flex", flexDirection: "column"}}>
<div style={{display: 'flex', flexDirection: 'column'}}>
<h2 style={{margin: 0}}> With icon (both)</h2>
<div style={{display: "flex", flexDirection: "row", width: "100%", gap: "2em"}}>
<div
style={{
display: 'flex',
flexDirection: 'row',
width: '100%',
gap: '2em',
}}
>
<div>
<h2> Default </h2>
<Switch icon/>
<Switch defaultChecked icon/>
<Switch icon />
<Switch defaultChecked icon />
</div>
<div>
<h2> Disabled </h2>
<Switch disabled icon/>
<Switch disabled defaultChecked icon/>
<Switch disabled icon />
<Switch disabled defaultChecked icon />
</div>
</div>
</div>
<div style={{display: "flex", flexDirection: "column"}}>
<div style={{display: 'flex', flexDirection: 'column'}}>
<h2 style={{margin: 0}}> With icon (selected)</h2>
<div style={{display: "flex", flexDirection: "row", width: "100%", gap: "2em"}}>
<div
style={{
display: 'flex',
flexDirection: 'row',
width: '100%',
gap: '2em',
}}
>
<div>
<h2> Default </h2>
<Switch selected icon/>
<Switch selected defaultChecked icon/>
<Switch selected icon />
<Switch selected defaultChecked icon />
</div>
<div>
<h2> Disabled </h2>
<Switch selected disabled icon/>
<Switch selected disabled defaultChecked icon/>
<Switch selected disabled icon />
<Switch selected disabled defaultChecked icon />
</div>
</div>
</div>

1831
app/components/text-fields.tsx
View File

File diff suppressed because it is too large Load Diff

24
app/layout.tsx
View File

@ -1,30 +1,24 @@
import "../src/styles/generics.css"
import "../src/styles/button.css"
import "../src/styles/ripple.css"
import {Metadata, Viewport} from "next";
import '../src/styles/generics.css';
import '../src/styles/button.css';
import '../src/styles/ripple.css';
import {Metadata, Viewport} from 'next';
export const metadata: Metadata = {
title: 'Create Next App',
description: 'Generated by create next app',
}
};
export const viewport: Viewport = {
width: 'device-width',
initialScale: 1,
maximumScale: 1,
userScalable: false,
}
};
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
export default function RootLayout({children}: {children: React.ReactNode}) {
return (
<html lang="en">
<body>
{children}
</body>
<body>{children}</body>
</html>
)
);
}

72
app/page.tsx
View File

@ -1,42 +1,46 @@
import {Fragment} from "react";
import Fabs from "./components/fabs";
import Badges from "./components/badges";
import IconButtons from "./components/icon-buttons";
import Buttons from "./components/buttons";
import Switches from "./components/switches";
import Checkboxes from "./components/checkboxes";
import Radios from "./components/radios";
import {TextFields} from "./components/text-fields";
import {Fragment} from 'react';
import Fabs from './components/fabs';
import Badges from './components/badges';
import IconButtons from './components/icon-buttons';
import Buttons from './components/buttons';
import Switches from './components/switches';
import Checkboxes from './components/checkboxes';
import Radios from './components/radios';
import {TextFields} from './components/text-fields';
export default function Page() {
return(
return (
<Fragment>
<div style={{
display: "flex",
flexDirection:"column",
justifyContent: "center",
alignItems: "center",
overflowX: "auto",
gap: "0em"
}}>
<div
style={{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
alignItems: 'center',
overflowX: 'auto',
gap: '0em',
}}
>
<h1>Google Material You UI kit</h1>
<div style={{
display: "flex",
flexDirection: "column",
gap: "0.5em",
justifyContent: "center",
alignItems: "center"
}}>
<Buttons/>
<IconButtons/>
<Switches/>
<Checkboxes/>
<Radios/>
<TextFields/>
<Fabs/>
<Badges/>
<div
style={{
display: 'flex',
flexDirection: 'column',
gap: '0.5em',
justifyContent: 'center',
alignItems: 'center',
}}
>
<Buttons />
<IconButtons />
<Switches />
<Checkboxes />
<Radios />
<TextFields />
<Fabs />
<Badges />
</div>
</div>
</Fragment>
)
);
}

541
dist/output.css vendored
View File

@ -1,541 +0,0 @@
/*
! tailwindcss v3.3.6 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box;
/* 1 */
border-width: 0;
/* 2 */
border-style: solid;
/* 2 */
border-color: #e5e7eb;
/* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
*/
html {
line-height: 1.5;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-moz-tab-size: 4;
/* 3 */
-o-tab-size: 4;
tab-size: 4;
/* 3 */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* 4 */
font-feature-settings: normal;
/* 5 */
font-variation-settings: normal;
/* 6 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0;
/* 1 */
line-height: inherit;
/* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0;
/* 1 */
color: inherit;
/* 2 */
border-top-width: 1px;
/* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* 1 */
font-feature-settings: normal;
/* 2 */
font-variation-settings: normal;
/* 3 */
font-size: 1em;
/* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0;
/* 1 */
border-color: inherit;
/* 2 */
border-collapse: collapse;
/* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-feature-settings: inherit;
/* 1 */
font-variation-settings: inherit;
/* 1 */
font-size: 100%;
/* 1 */
font-weight: inherit;
/* 1 */
line-height: inherit;
/* 1 */
color: inherit;
/* 1 */
margin: 0;
/* 2 */
padding: 0;
/* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button-layout styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
/* 1 */
background-color: transparent;
/* 2 */
background-image: none;
/* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
/* 1 */
vertical-align: middle;
/* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
display: none;
}
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}

541
dist/styles/styles.css vendored
View File

@ -1,541 +0,0 @@
/*
! tailwindcss v3.3.6 | MIT License | https://tailwindcss.com
*/
/*
1. Prevent padding and border from affecting element width. (https://github.com/mozdevs/cssremedy/issues/4)
2. Allow adding a border to an element by just adding a border-width. (https://github.com/tailwindcss/tailwindcss/pull/116)
*/
*,
::before,
::after {
box-sizing: border-box;
/* 1 */
border-width: 0;
/* 2 */
border-style: solid;
/* 2 */
border-color: #e5e7eb;
/* 2 */
}
::before,
::after {
--tw-content: '';
}
/*
1. Use a consistent sensible line-height in all browsers.
2. Prevent adjustments of font size after orientation changes in iOS.
3. Use a more readable tab size.
4. Use the user's configured `sans` font-family by default.
5. Use the user's configured `sans` font-feature-settings by default.
6. Use the user's configured `sans` font-variation-settings by default.
*/
html {
line-height: 1.5;
/* 1 */
-webkit-text-size-adjust: 100%;
/* 2 */
-moz-tab-size: 4;
/* 3 */
-o-tab-size: 4;
tab-size: 4;
/* 3 */
font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
/* 4 */
font-feature-settings: normal;
/* 5 */
font-variation-settings: normal;
/* 6 */
}
/*
1. Remove the margin in all browsers.
2. Inherit line-height from `html` so users can set them as a class directly on the `html` element.
*/
body {
margin: 0;
/* 1 */
line-height: inherit;
/* 2 */
}
/*
1. Add the correct height in Firefox.
2. Correct the inheritance of border color in Firefox. (https://bugzilla.mozilla.org/show_bug.cgi?id=190655)
3. Ensure horizontal rules are visible by default.
*/
hr {
height: 0;
/* 1 */
color: inherit;
/* 2 */
border-top-width: 1px;
/* 3 */
}
/*
Add the correct text decoration in Chrome, Edge, and Safari.
*/
abbr:where([title]) {
-webkit-text-decoration: underline dotted;
text-decoration: underline dotted;
}
/*
Remove the default font size and weight for headings.
*/
h1,
h2,
h3,
h4,
h5,
h6 {
font-size: inherit;
font-weight: inherit;
}
/*
Reset links to optimize for opt-in styling instead of opt-out.
*/
a {
color: inherit;
text-decoration: inherit;
}
/*
Add the correct font weight in Edge and Safari.
*/
b,
strong {
font-weight: bolder;
}
/*
1. Use the user's configured `mono` font-family by default.
2. Use the user's configured `mono` font-feature-settings by default.
3. Use the user's configured `mono` font-variation-settings by default.
4. Correct the odd `em` font sizing in all browsers.
*/
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
/* 1 */
font-feature-settings: normal;
/* 2 */
font-variation-settings: normal;
/* 3 */
font-size: 1em;
/* 4 */
}
/*
Add the correct font size in all browsers.
*/
small {
font-size: 80%;
}
/*
Prevent `sub` and `sup` elements from affecting the line height in all browsers.
*/
sub,
sup {
font-size: 75%;
line-height: 0;
position: relative;
vertical-align: baseline;
}
sub {
bottom: -0.25em;
}
sup {
top: -0.5em;
}
/*
1. Remove text indentation from table contents in Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=999088, https://bugs.webkit.org/show_bug.cgi?id=201297)
2. Correct table border color inheritance in all Chrome and Safari. (https://bugs.chromium.org/p/chromium/issues/detail?id=935729, https://bugs.webkit.org/show_bug.cgi?id=195016)
3. Remove gaps between table borders by default.
*/
table {
text-indent: 0;
/* 1 */
border-color: inherit;
/* 2 */
border-collapse: collapse;
/* 3 */
}
/*
1. Change the font styles in all browsers.
2. Remove the margin in Firefox and Safari.
3. Remove default padding in all browsers.
*/
button,
input,
optgroup,
select,
textarea {
font-family: inherit;
/* 1 */
font-feature-settings: inherit;
/* 1 */
font-variation-settings: inherit;
/* 1 */
font-size: 100%;
/* 1 */
font-weight: inherit;
/* 1 */
line-height: inherit;
/* 1 */
color: inherit;
/* 1 */
margin: 0;
/* 2 */
padding: 0;
/* 3 */
}
/*
Remove the inheritance of text transform in Edge and Firefox.
*/
button,
select {
text-transform: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Remove default button-layout styles.
*/
button,
[type='button'],
[type='reset'],
[type='submit'] {
-webkit-appearance: button;
/* 1 */
background-color: transparent;
/* 2 */
background-image: none;
/* 2 */
}
/*
Use the modern Firefox focus style for all focusable elements.
*/
:-moz-focusring {
outline: auto;
}
/*
Remove the additional `:invalid` styles in Firefox. (https://github.com/mozilla/gecko-dev/blob/2f9eacd9d3d995c937b4251a5557d95d494c9be1/layout/style/res/forms.css#L728-L737)
*/
:-moz-ui-invalid {
box-shadow: none;
}
/*
Add the correct vertical alignment in Chrome and Firefox.
*/
progress {
vertical-align: baseline;
}
/*
Correct the cursor style of increment and decrement buttons in Safari.
*/
::-webkit-inner-spin-button,
::-webkit-outer-spin-button {
height: auto;
}
/*
1. Correct the odd appearance in Chrome and Safari.
2. Correct the outline style in Safari.
*/
[type='search'] {
-webkit-appearance: textfield;
/* 1 */
outline-offset: -2px;
/* 2 */
}
/*
Remove the inner padding in Chrome and Safari on macOS.
*/
::-webkit-search-decoration {
-webkit-appearance: none;
}
/*
1. Correct the inability to style clickable types in iOS and Safari.
2. Change font properties to `inherit` in Safari.
*/
::-webkit-file-upload-button {
-webkit-appearance: button;
/* 1 */
font: inherit;
/* 2 */
}
/*
Add the correct display in Chrome and Safari.
*/
summary {
display: list-item;
}
/*
Removes the default spacing and border for appropriate elements.
*/
blockquote,
dl,
dd,
h1,
h2,
h3,
h4,
h5,
h6,
hr,
figure,
p,
pre {
margin: 0;
}
fieldset {
margin: 0;
padding: 0;
}
legend {
padding: 0;
}
ol,
ul,
menu {
list-style: none;
margin: 0;
padding: 0;
}
/*
Reset default styling for dialogs.
*/
dialog {
padding: 0;
}
/*
Prevent resizing textareas horizontally by default.
*/
textarea {
resize: vertical;
}
/*
1. Reset the default placeholder opacity in Firefox. (https://github.com/tailwindlabs/tailwindcss/issues/3300)
2. Set the default placeholder color to the user's configured gray 400 color.
*/
input::-moz-placeholder, textarea::-moz-placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
input::placeholder,
textarea::placeholder {
opacity: 1;
/* 1 */
color: #9ca3af;
/* 2 */
}
/*
Set the default cursor for buttons.
*/
button,
[role="button"] {
cursor: pointer;
}
/*
Make sure disabled buttons don't get the pointer cursor.
*/
:disabled {
cursor: default;
}
/*
1. Make replaced elements `display: block` by default. (https://github.com/mozdevs/cssremedy/issues/14)
2. Add `vertical-align: middle` to align replaced elements more sensibly by default. (https://github.com/jensimmons/cssremedy/issues/14#issuecomment-634934210)
This can trigger a poorly considered lint error in some tools but is included by design.
*/
img,
svg,
video,
canvas,
audio,
iframe,
embed,
object {
display: block;
/* 1 */
vertical-align: middle;
/* 2 */
}
/*
Constrain images and videos to the parent width and preserve their intrinsic aspect ratio. (https://github.com/mozdevs/cssremedy/issues/14)
*/
img,
video {
max-width: 100%;
height: auto;
}
/* Make elements with the HTML hidden attribute stay hidden by default */
[hidden] {
display: none;
}
*, ::before, ::after {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}
::backdrop {
--tw-border-spacing-x: 0;
--tw-border-spacing-y: 0;
--tw-translate-x: 0;
--tw-translate-y: 0;
--tw-rotate: 0;
--tw-skew-x: 0;
--tw-skew-y: 0;
--tw-scale-x: 1;
--tw-scale-y: 1;
--tw-pan-x: ;
--tw-pan-y: ;
--tw-pinch-zoom: ;
--tw-scroll-snap-strictness: proximity;
--tw-gradient-from-position: ;
--tw-gradient-via-position: ;
--tw-gradient-to-position: ;
--tw-ordinal: ;
--tw-slashed-zero: ;
--tw-numeric-figure: ;
--tw-numeric-spacing: ;
--tw-numeric-fraction: ;
--tw-ring-inset: ;
--tw-ring-offset-width: 0px;
--tw-ring-offset-color: #fff;
--tw-ring-color: rgb(59 130 246 / 0.5);
--tw-ring-offset-shadow: 0 0 #0000;
--tw-ring-shadow: 0 0 #0000;
--tw-shadow: 0 0 #0000;
--tw-shadow-colored: 0 0 #0000;
--tw-blur: ;
--tw-brightness: ;
--tw-contrast: ;
--tw-grayscale: ;
--tw-hue-rotate: ;
--tw-invert: ;
--tw-saturate: ;
--tw-sepia: ;
--tw-drop-shadow: ;
--tw-backdrop-blur: ;
--tw-backdrop-brightness: ;
--tw-backdrop-contrast: ;
--tw-backdrop-grayscale: ;
--tw-backdrop-hue-rotate: ;
--tw-backdrop-invert: ;
--tw-backdrop-opacity: ;
--tw-backdrop-saturate: ;
--tw-backdrop-sepia: ;
}

6307
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

34
package.json
View File

@ -3,32 +3,28 @@
"scripts": {
"dev": "next dev --turbo",
"build": "next build",
"start": "next start"
"start": "next start",
"lint": "gts lint",
"clean": "gts clean",
"compile": "tsc",
"fix": "gts fix",
"prepare": "npm run compile",
"pretest": "npm run compile",
"posttest": "npm run lint"
},
"dependencies": {
"axios": "^1.6.5",
"lodash": "^4.17.21",
"mui": "^0.0.1",
"install": "^0.13.0",
"next": "latest",
"normalize.css": "^8.0.1",
"npm": "^10.4.0",
"prop-types": "^15.8.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-transition-group": "^4.4.5",
"styled-components": "^6.1.1"
"react-dom": "^18.2.0"
},
"devDependencies": {
"@types/node": "20.8.10",
"@types/node": "20.8.2",
"@types/react": "18.2.33",
"@types/react-dom": "18.2.14",
"@typescript-eslint/eslint-plugin": "^6.19.0",
"autoprefixer": "^10.4.16",
"eslint": "^8.56.0",
"eslint-config-standard-with-typescript": "^43.0.0",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-n": "^16.6.2",
"eslint-plugin-promise": "^6.1.1",
"eslint-plugin-react": "^7.33.2",
"postcss": "^8.4.32",
"typescript": "^5.3.3"
"gts": "^5.2.0",
"typescript": "~5.2.0"
}
}

5
postcss.config.js
View File

@ -1,5 +0,0 @@
module.exports = {
plugins: {
autoprefixer: {},
},
}

33
src/index.ts Normal file
View File

@ -0,0 +1,33 @@
console.log('Try npm run lint/fix!');
const longString =
'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer ut aliquet diam.';
const trailing = 'Semicolon';
const why = {am: 'I tabbed?'};
const iWish = "I didn't have a trailing space...";
const sicilian = true;
const vizzini = sicilian ? !sicilian : sicilian;
const re = /foo {3}bar/;
export function doSomeStuff(
withThis: string,
andThat: string,
andThose: string[]
) {
//function on one line
if (!andThose.length) {
return false;
}
console.log(withThis);
console.log(andThat);
console.dir(andThose);
console.log(longString, trailing, why, iWish, vizzini, re);
return;
}
// TODO: more examples

52
src/primitive-components/badge/badge.tsx
View File

@ -1,33 +1,43 @@
import React, {ForwardedRef, forwardRef, PropsWithChildren} from 'react';
import {bool, number, string} from "prop-types";
import {bool, number, string} from 'prop-types';
interface BadgeProps extends PropsWithChildren<any>{
disableValue?: boolean,
interface BadgeProps extends PropsWithChildren<any> {
disableValue?: boolean;
}
const Badge = forwardRef(function Badge({disableValue = false, ...props} : BadgeProps, ref : ForwardedRef<any>) {
const Badge = forwardRef(
({disableValue = false, ...props}: BadgeProps, ref: ForwardedRef<any>) => {
const digitLength = props.children
? 16 + (props.children.length - 1) * 6
: 6,
disableValueClassName =
disableValue || (!props.children ?? true)
? 'disable-value'
: '';
let digitLength = props.children ? 16 + ((props.children.length - 1) * 6) : 6,
disableValueClassName = (disableValue || (!props.children ?? true)) ? "disable-value" : "";
return (
<svg {...props}
ref={ref}
width={`${digitLength}px`}
className={`m3 m3-badge ${"" ?? props.className}${disableValueClassName}`.trimEnd()}>
{props.children &&
<text x={"50%"} y={"50%"}>
{props.children}
</text>
}
</svg>
);
})
return (
<svg
{...props}
ref={ref}
width={`${digitLength}px`}
className={`m3 m3-badge ${
'' ?? props.className
}${disableValueClassName}`.trimEnd()}
>
{props.children && (
<text x={'50%'} y={'50%'}>
{props.children}
</text>
)}
</svg>
);
}
);
Badge.propTypes = {
children: number,
className: string,
disableValue: bool,
}
};
export {Badge};

72
src/primitive-components/button-layout/button-layout.tsx
View File

@ -1,45 +1,53 @@
"use client"
'use client';
import {RippleArea} from "../ripple/ripple-area";
import React, {forwardRef, PropsWithChildren, useId, useRef, useState} from "react";
import useRippleEffect from "../ripple/hooks/useRippleEffect";
import {IRippleProps} from "../ripple/ripple.types";
import {RippleArea} from '../ripple/ripple-area';
import React, {
forwardRef,
PropsWithChildren,
useId,
useRef,
useState,
} from 'react';
import useRippleEffect from '../ripple/hooks/useRippleEffect';
import {IRippleProps} from '../ripple/ripple.types';
const ButtonLayout = forwardRef(
function ButtonBase({centralRipple = false, ...props} : PropsWithChildren<any> & IRippleProps, ref){
(
{
centralRipple = false,
...props
}: PropsWithChildren<any> & IRippleProps,
ref
) => {
const [isActive, setIsActive] = useState<boolean>(false),
ripplesRef = useRef(null),
buttonId = useId(),
events = useRippleEffect(ripplesRef, setIsActive);
ripplesRef = useRef(null),
buttonId = useId(),
events = useRippleEffect(ripplesRef, setIsActive);
let {
variant,
disabled,
className
} = props;
const {variant, disabled, className} = props;
let classes = className ?
`m3 ${className} ${variant}${isActive ? " is-active" : ""}` :
`m3 ${variant}${isActive ? " is-active" : ""}`;
const classes = className
? `m3 ${className} ${variant}${isActive ? ' is-active' : ''}`
: `m3 ${variant}${isActive ? ' is-active' : ''}`;
return (
<button {...props}
{...events}
ref={ref}
id={buttonId}
className={classes}
disabled={disabled}>
<button
{...props}
{...events}
ref={ref}
id={buttonId}
className={classes}
disabled={disabled}
>
{props.children}
<RippleArea ref={ripplesRef}
central={centralRipple}
callback={setIsActive}/>
<RippleArea
ref={ripplesRef}
central={centralRipple}
callback={setIsActive}
/>
</button>
)
);
}
)
);
export {ButtonLayout};

36
src/primitive-components/button-layout/button.types.ts
View File

@ -1,25 +1,25 @@
import {PropsWithChildren} from "react";
import {PropsWithChildren} from 'react';
type toggleButtonType = {
selected: string,
unselected: string,
selected: string;
unselected: string;
};
export interface buttonMainProps extends PropsWithChildren<any> {
disabled?: boolean;
variant?: 'filled' | 'outlined' | 'elevated' | 'tonal' | 'text';
}
export interface buttonMainProps extends PropsWithChildren<any>{
disabled? : boolean,
variant? : "filled" | "outlined" | "elevated" | "tonal" | "text",
export interface FABMainProps extends PropsWithChildren<any> {
icon: string;
disabled?: boolean;
size?: 'small' | 'default' | 'large' | 'extended';
variant?: 'surface' | 'primary' | 'secondary' | 'tertiary';
}
export interface FABMainProps extends PropsWithChildren<any>{
icon : string;
disabled? : boolean;
size? : "small" | "default" | "large" | "extended";
variant? : "surface" | "primary" | "secondary" | "tertiary";
}
export interface iconButtonMainProps extends PropsWithChildren<any>{
icon : string;
toggled? : false | toggleButtonType;
disabled? : boolean;
variant? : "default" | "filled" | "tonal" | "outlined";
export interface iconButtonMainProps extends PropsWithChildren<any> {
icon: string;
toggled?: false | toggleButtonType;
disabled?: boolean;
variant?: 'default' | 'filled' | 'tonal' | 'outlined';
}

49
src/primitive-components/button/button.tsx
View File

@ -1,8 +1,8 @@
import {forwardRef} from "react";
import {Icon} from "../material-you-components";
import {IRippleProps} from "../ripple/ripple.types";
import {ButtonLayout} from "../button-layout/button-layout";
import {buttonMainProps} from "../button-layout/button.types";
import {forwardRef} from 'react';
import {Icon} from '../material-you-components';
import {IRippleProps} from '../ripple/ripple.types';
import {ButtonLayout} from '../button-layout/button-layout';
import {buttonMainProps} from '../button-layout/button.types';
/**
* Button component
@ -10,24 +10,25 @@ import {buttonMainProps} from "../button-layout/button.types";
*/
export const Button = forwardRef(
({centralRipple = false, variant, disabled, icon, ...props} : buttonMainProps & IRippleProps, ref) => (
<ButtonLayout {...props}
ref={ref}
disabled={props.disabled}
centralRipple={centralRipple}
variant={variant ? variant : "filled"}>
{
icon ?
<Icon iconSize={20}>
{icon}
</Icon>
: <></>
}
<span className={"label-large"}>
{props.children}
</span>
(
{
centralRipple = false,
variant,
disabled,
icon,
...props
}: buttonMainProps & IRippleProps,
ref
) => (
<ButtonLayout
{...props}
ref={ref}
disabled={disabled}
centralRipple={centralRipple}
variant={variant ? variant : 'filled'}
>
{icon ? <Icon iconSize={20}>{icon}</Icon> : <></>}
<span className={'label-large'}>{props.children}</span>
</ButtonLayout>
)
)
);

31
src/primitive-components/checkbox-layout/check-box-layout.tsx
View File

@ -1,12 +1,13 @@
"use client"
'use client';
import React, {forwardRef, useEffect, useImperativeHandle, useRef} from 'react';
import {CheckboxLayoutProps} from "./checkbox-layout.types";
import {CheckboxLayoutProps} from './checkbox-layout.types';
export const CheckBoxLayout = forwardRef(
function CheckBoxBase({indeterminate, typeInput, type, ...props} : CheckboxLayoutProps, ref) : JSX.Element {
(
{indeterminate, typeInput, type, ...props}: CheckboxLayoutProps,
ref
): JSX.Element => {
const checkboxRef = useRef<any>(null);
useEffect(() => {
@ -15,18 +16,20 @@ export const CheckBoxLayout = forwardRef(
useImperativeHandle(ref, () => checkboxRef.current);
let classesType = typeInput || type;
const classesType = typeInput || type;
const classes = props.className !== undefined ?
`m3 m3-${type} ${props.className}` : `m3 m3-${classesType}`
const classes =
props.className !== undefined
? `m3 m3-${type} ${props.className}`
: `m3 m3-${classesType}`;
return (
<input ref={checkboxRef}
{...props}
type={type}
className={classes.trimEnd()}/>
<input
ref={checkboxRef}
{...props}
type={type}
className={classes.trimEnd()}
/>
);
}
);

8
src/primitive-components/checkbox-layout/checkbox-layout.types.ts
View File

@ -1,7 +1,7 @@
import {PropsWithChildren} from "react";
import {PropsWithChildren} from 'react';
export interface CheckboxLayoutProps extends PropsWithChildren<any>{
export interface CheckboxLayoutProps extends PropsWithChildren<any> {
indeterminate?: boolean;
typeInput? : string;
type? : string;
typeInput?: string;
type?: string;
}

58
src/primitive-components/checkbox/checkbox.tsx
View File

@ -1,8 +1,14 @@
import {RippleArea} from "../ripple/ripple-area";
import {IRippleProps} from "../ripple/ripple.types";
import useRippleEffect from "../ripple/hooks/useRippleEffect";
import {CheckBoxLayout} from "../checkbox-layout/check-box-layout";
import {forwardRef, useEffect, useImperativeHandle, useRef, useState} from "react";
import {RippleArea} from '../ripple/ripple-area';
import {IRippleProps} from '../ripple/ripple.types';
import useRippleEffect from '../ripple/hooks/useRippleEffect';
import {CheckBoxLayout} from '../checkbox-layout/check-box-layout';
import {
forwardRef,
useEffect,
useImperativeHandle,
useRef,
useState,
} from 'react';
/**
* Checkbox component
@ -10,39 +16,41 @@ import {forwardRef, useEffect, useImperativeHandle, useRef, useState} from "reac
*/
export const Checkbox = forwardRef(
({centralRipple, ...props} : any & IRippleProps, ref) => {
({centralRipple, ...props}: any & IRippleProps, ref) => {
const [isActive, setIsActive] = useState<boolean>(false),
[checked, setChecked] = useState<boolean>(props.checked ?? false),
ripplesRef = useRef(null),
checkboxRef = useRef(null),
events = useRippleEffect(ripplesRef, setIsActive);
const classes = `m3 m3-checkbox-label ${isActive === true ? "visible" : ""}`.trimEnd();
const classes = `m3 m3-checkbox-label ${
isActive === true ? 'visible' : ''
}`.trimEnd();
const indeterminate = (props.indeterminate === true).toString();
useImperativeHandle(ref, () => checkboxRef.current)
useImperativeHandle(ref, () => checkboxRef.current);
useEffect(() => {
setChecked(!checked)
setChecked(!checked);
}, [checkboxRef.current?.checked]);
return (
<label {...events}
className={classes}>
<CheckBoxLayout {...props}
ref={checkboxRef}
indeterminate={indeterminate}
type={"checkbox"}/>
<span className={"m3 m3-checkbox-state-layer"}/>
<RippleArea className={"m3-checkbox-ripple-layer"}
ref={ripplesRef}
central={centralRipple}
callback={setIsActive}/>
<label {...events} className={classes}>
<CheckBoxLayout
{...props}
ref={checkboxRef}
indeterminate={indeterminate}
type={'checkbox'}
/>
<span className={'m3 m3-checkbox-state-layer'} />
<RippleArea
className={'m3-checkbox-ripple-layer'}
ref={ripplesRef}
central={centralRipple}
callback={setIsActive}
/>
{props.children}
</label>
)
);
}
)
);

27
src/primitive-components/divider/divider.tsx
View File

@ -1,16 +1,25 @@
import React, {ForwardedRef, forwardRef, PropsWithChildren} from 'react';
interface DividerProps extends PropsWithChildren<any> {
orientation?: "vertical" | "horizontal";
variant?: "full-width" | "inset" | "middle-inset";
orientation?: 'vertical' | 'horizontal';
variant?: 'full-width' | 'inset' | 'middle-inset';
}
const Divider = forwardRef(function Divider({orientation, variant, ...props} : DividerProps, ref : ForwardedRef<any>) {
return (
<hr {...props}
ref={ref}
className={`m3 m3-divider ${orientation ?? "horizontal"} ${variant ?? "full-width"}`.trimEnd()}/>
);
})
const Divider = forwardRef(
(
{orientation, variant, ...props}: DividerProps,
ref: ForwardedRef<any>
) => {
return (
<hr
{...props}
ref={ref}
className={`m3 m3-divider ${orientation ?? 'horizontal'} ${
variant ?? 'full-width'
}`.trimEnd()}
/>
);
}
);
export {Divider};

57
src/primitive-components/fab/fab.tsx
View File

@ -1,8 +1,8 @@
import {forwardRef} from "react";
import {FABMainProps} from "../button-layout/button.types";
import {ButtonLayout} from "../button-layout/button-layout";
import {IRippleProps} from "../ripple/ripple.types";
import {Icon} from "../material-you-components";
import {forwardRef} from 'react';
import {FABMainProps} from '../button-layout/button.types';
import {ButtonLayout} from '../button-layout/button-layout';
import {IRippleProps} from '../ripple/ripple.types';
import {Icon} from '../material-you-components';
/**
* FABs component
@ -10,37 +10,42 @@ import {Icon} from "../material-you-components";
*/
const sizes = {
"small": 24,
"default": 24,
"large": 36,
"extended": 24,
}
small: 24,
default: 24,
large: 36,
extended: 24,
};
export const FAB = forwardRef(
({
(
{
variant,
disabled,
icon,
centralRipple = false,
size = "default",
size = 'default',
elevated,
...props} : FABMainProps & IRippleProps, ref) => (
<ButtonLayout {...props}
ref={ref}
centralRipple={centralRipple}
variant={variant ? variant : "surface"}
className={`m3-fab m3-${size}-fab ${!(elevated ?? false) && "without-elevation"}`}>
...props
}: FABMainProps & IRippleProps,
ref
) => (
<ButtonLayout
{...props}
ref={ref}
centralRipple={centralRipple}
variant={variant ? variant : 'surface'}
className={`m3-fab m3-${size}-fab ${
!(elevated ?? false) && 'without-elevation'
}`}
>
<Icon iconSize={sizes[size]} svgSize={sizes[size]}>
{icon}
</Icon>
{
size === "extended" ? (
<span className={"label-large"}>
{props.children}
</span>
) : <></>
}
{size === 'extended' ? (
<span className={'label-large'}>{props.children}</span>
) : (
<></>
)}
</ButtonLayout>
)
);

84
src/primitive-components/icon-button/icon-button.tsx
View File

@ -1,8 +1,14 @@
import {ButtonLayout} from "../button-layout/button-layout";
import {iconButtonMainProps} from "../button-layout/button.types";
import {forwardRef, useCallback, useImperativeHandle, useRef, useState} from "react";
import {IRippleProps} from "../ripple/ripple.types";
import {Icon} from "../material-you-components";
import {ButtonLayout} from '../button-layout/button-layout';
import {iconButtonMainProps} from '../button-layout/button.types';
import {
forwardRef,
useCallback,
useImperativeHandle,
useRef,
useState,
} from 'react';
import {IRippleProps} from '../ripple/ripple.types';
import {Icon} from '../material-you-components';
/**
* Icon button-layout component
@ -10,8 +16,8 @@ import {Icon} from "../material-you-components";
*/
export const IconButton = forwardRef(
({
(
{
icon,
variant,
disabled,
@ -19,48 +25,54 @@ export const IconButton = forwardRef(
toggled = false,
centralRipple,
...props
} : iconButtonMainProps & IRippleProps,
ref) => {
}: iconButtonMainProps & IRippleProps,
ref
) => {
const [toggleIcon, setToggleIcon] = useState<any>({
state : selected == true ? "selected" : "unselected",
icon : toggled ? toggled.unselected ?? "add_circle" : "add_circle"
state: selected === true ? 'selected' : 'unselected',
icon: toggled ? toggled.unselected ?? 'add_circle' : 'add_circle',
});
const toggle = (classes, icon) => {
const toggle = (classes: string, icon: string) => {
setToggleIcon(() => ({
state : classes,
icon : icon,
}))
}
state: classes,
icon: icon,
}));
};
let buttonRef = useRef<HTMLButtonElement>(null);
const buttonRef = useRef<HTMLButtonElement>(null);
const callback = useCallback(() => {
if(toggled) {
if (toggleIcon.state === "selected") toggle("", toggled.unselected ?? "add_circle")
else toggle("selected", toggled.selected ?? "add_circle")
if (toggled) {
if (toggleIcon.state === 'selected')
toggle('', toggled.unselected ?? 'add_circle');
else toggle('selected', toggled.selected ?? 'add_circle');
}
if(props.onClick) props.onClick();
}, [toggleIcon])
if (props.onClick) props.onClick();
}, [toggleIcon]);
useImperativeHandle(ref, () => buttonRef);
return (
<ButtonLayout {...props}
ref={buttonRef}
onClick={callback}
centralRipple={centralRipple}
disabled={disabled}
className={`m3-icon-button ${toggleIcon.state} ${toggled ? "toggled" : ""}`.trimEnd()}
variant={variant ? variant : "default"}>
<Icon svgSize={40} iconSize={28} fill={toggleIcon.state === "selected" ? 1 : 0}>
<ButtonLayout
{...props}
ref={buttonRef}
onClick={callback}
centralRipple={centralRipple}
disabled={disabled}
className={`m3-icon-button ${toggleIcon.state} ${
toggled ? 'toggled' : ''
}`.trimEnd()}
variant={variant ? variant : 'default'}
>
<Icon
svgSize={40}
iconSize={28}
fill={toggleIcon.state === 'selected' ? 1 : 0}
>
{toggled ? toggleIcon.icon : icon ? icon : undefined}
</Icon>
</ButtonLayout>
)
);
}
)
);

93
src/primitive-components/icon/icon.tsx
View File

@ -1,48 +1,59 @@
import React, {ForwardedRef, forwardRef} from 'react';
import {IconProps} from "./icon.types";
import {bool, number, string} from "prop-types";
import {IconProps} from './icon.types';
import {bool, number, string} from 'prop-types';
const Icon = forwardRef(function Icon(
{
grade = 0,
weight = 500,
svgSize = 20,
fill = false,
iconSize = 20,
opticalSize = 24,
type = "outlined",
...props
} : IconProps, ref : ForwardedRef<any>) {
const Icon = forwardRef(
(
{
grade = 0,
weight = 500,
svgSize = 20,
fill = false,
iconSize = 20,
opticalSize = 24,
type = 'outlined',
...props
}: IconProps,
ref: ForwardedRef<any>
) => {
const fontVariation = {
fontVariationSettings: `'FILL' ${
fill ? 1 : 0
}, 'wght' ${weight}, 'GRAD' ${grade}, 'optz' ${opticalSize}`,
};
let fontVariation = {
fontVariationSettings: `'FILL' ${fill ? 1 : 0}, 'wght' ${weight}, 'GRAD' ${grade}, 'optz' ${opticalSize}`
};
return (
<svg {...props}
ref={ref}
className={`m3 m3-svg-icon ${props.className ?? ""}`.trim()}
width={svgSize}
height={svgSize}>
<text className={`m3-${type[0].toUpperCase() + type.slice(1)} m3-size-${iconSize}px`}
style={fontVariation}
x={"50%"}
y={"50%"}>
{props.children ?? "add_circle"}
</text>
</svg>
);
})
return (
<svg
{...props}
ref={ref}
className={`m3 m3-svg-icon ${props.className ?? ''}`.trim()}
width={svgSize}
height={svgSize}
>
<text
className={`m3-${
type[0].toUpperCase() + type.slice(1)
} m3-size-${iconSize}px`}
style={fontVariation}
x={'50%'}
y={'50%'}
>
{props.children ?? 'add_circle'}
</text>
</svg>
);
}
);
Icon.propTypes = {
fill : bool,
type : string,
grade : number,
weight : number,
svgSize : number,
iconSize : number,
children : string,
opticalSize : number,
}
fill: bool,
type: string,
grade: number,
weight: number,
svgSize: number,
iconSize: number,
children: string,
opticalSize: number,
};
export {Icon};

6
src/primitive-components/icon/icon.types.ts
View File

@ -1,11 +1,11 @@
import {PropsWithChildren} from "react";
import {PropsWithChildren} from 'react';
export interface IconProps extends PropsWithChildren<any>{
export interface IconProps extends PropsWithChildren<any> {
fill?: boolean;
grade?: number;
svgSize?: number;
iconSize?: number;
opticalSize?: number;
type?: "outlined" | "rounded" | "sharp";
type?: 'outlined' | 'rounded' | 'sharp';
weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700;
}

28
src/primitive-components/material-you-components.tsx
View File

@ -1,15 +1,13 @@
"use client"
export {FAB} from "./fab/fab";
export {Icon} from "./icon/icon";
export {Radio} from "./radio/radio";
export {Badge} from "./badge/badge";
export {Switch} from "./switch/switch";
export {Button} from "./button/button";
export {Divider} from "./divider/divider";
export {Checkbox} from "./checkbox/checkbox";
export {RippleArea} from "./ripple/ripple-area";
export {Ripples, Ripple} from "./ripple/ripple";
export {TextField} from "./text-field/text-field";
export {IconButton} from "./icon-button/icon-button";
export {ButtonLayout} from "./button-layout/button-layout";
export {FAB} from './fab/fab';
export {Icon} from './icon/icon';
export {Radio} from './radio/radio';
export {Badge} from './badge/badge';
export {Switch} from './switch/switch';
export {Button} from './button/button';
export {Divider} from './divider/divider';
export {Checkbox} from './checkbox/checkbox';
export {RippleArea} from './ripple/ripple-area';
export {Ripples, Ripple} from './ripple/ripple';
export {TextField} from './text-field/text-field';
export {IconButton} from './icon-button/icon-button';
export {ButtonLayout} from './button-layout/button-layout';

43
src/primitive-components/radio/radio.tsx
View File

@ -1,8 +1,8 @@
import {RippleArea} from "../ripple/ripple-area";
import {forwardRef, useRef, useState} from "react";
import useRippleEffect from "../ripple/hooks/useRippleEffect";
import {CheckBoxLayout} from "../checkbox-layout/check-box-layout";
import {IRippleProps} from "../ripple/ripple.types";
import {RippleArea} from '../ripple/ripple-area';
import {forwardRef, useRef, useState} from 'react';
import useRippleEffect from '../ripple/hooks/useRippleEffect';
import {CheckBoxLayout} from '../checkbox-layout/check-box-layout';
import {IRippleProps} from '../ripple/ripple.types';
/**
* Radio component
@ -10,30 +10,27 @@ import {IRippleProps} from "../ripple/ripple.types";
*/
export const Radio = forwardRef(
({centralRipple, ...props} : any & IRippleProps, ref) => {
({centralRipple, ...props}: any & IRippleProps, ref) => {
const [isActive, setIsActive] = useState<boolean>(false),
ripplesRef = useRef(null),
events = useRippleEffect(ripplesRef, setIsActive);
const classes = `m3 m3-radio-label ${isActive === true ? "visible" : ""}`.trimEnd();
const classes = `m3 m3-radio-label ${
isActive === true ? 'visible' : ''
}`.trimEnd();
return (
<label {...events}
className={classes}>
<CheckBoxLayout {...props}
ref={ref}
type={"radio"}/>
<span className={"m3 m3-radio-state-layer"}/>
<RippleArea className={"m3-checkbox-ripple-layer"}
ref={ripplesRef}
central={centralRipple}
callback={setIsActive}/>
<label {...events} className={classes}>
<CheckBoxLayout {...props} ref={ref} type={'radio'} />
<span className={'m3 m3-radio-state-layer'} />
<RippleArea
className={'m3-checkbox-ripple-layer'}
ref={ripplesRef}
central={centralRipple}
callback={setIsActive}
/>
{props.children}
</label>
)
);
}
)
);

44
src/primitive-components/ripple/hooks/useRippleEffect.ts
View File

@ -12,30 +12,44 @@ interface RippleEventHandlers {
onTouchStart: React.TouchEventHandler;
}
const UseRippleEffect = (ref, callback) : undefined | RippleEventHandlers => {
export type EventHandlerType<T> =
| React.FocusEvent<T>
| React.DragEvent<T>
| React.MouseEvent<T>
| React.TouchEvent<T>;
const [mounted, setMounted] = useState<boolean>(false)
interface RefImperativeType {
current: {
start: (event: EventHandlerType<Element>, callback: () => void) => void;
stop: (event: EventHandlerType<Element>, callback: () => void) => void;
};
}
const UseRippleEffect = (
ref: RefImperativeType,
callback: () => void
): undefined | RippleEventHandlers => {
const [mounted, setMounted] = useState<boolean>(false);
useEffect(() => {
if (!mounted) setMounted(true);
})
});
if (!mounted) return;
const {start, stop} = ref.current;
return {
onBlur: (event) => stop(event, callback),
onContextMenu: (event) => start(event, callback),
onDragLeave: (event) => stop(event, callback),
onMouseDown: (event) => start(event, callback),
onMouseLeave: (event) => stop(event, callback),
onMouseUp: (event) => stop(event, callback),
onTouchEnd: (event) => stop(event, callback),
onTouchMove: (event) => stop(event, callback),
onTouchStart: (event) => stop(event, callback),
}
}
onBlur: event => stop(event, callback),
onContextMenu: event => start(event, callback),
onDragLeave: event => stop(event, callback),
onMouseDown: event => start(event, callback),
onMouseLeave: event => stop(event, callback),
onMouseUp: event => stop(event, callback),
onTouchEnd: event => stop(event, callback),
onTouchMove: event => stop(event, callback),
onTouchStart: event => stop(event, callback),
};
};
export default UseRippleEffect;

177
src/primitive-components/ripple/ripple-area.tsx
View File

@ -1,4 +1,4 @@
"use client"
'use client';
import React, {
useId,
@ -6,109 +6,128 @@ import React, {
useState,
forwardRef,
useCallback,
useImperativeHandle
useImperativeHandle,
} from 'react';
import {Ripple} from "./ripple";
import {Ripples} from "./ripple";
import {RippleAreaProps} from "./ripple.types";
import {Ripple} from './ripple';
import {Ripples} from './ripple';
import {RippleAreaProps} from './ripple.types';
const TIMEOUT : number = 550;
const TIMEOUT = 550;
const rippleAreaContext = React.createContext(false);
const RippleArea = forwardRef(
function RippleArea({central = false, callback, ...props} : RippleAreaProps, ref) {
({central = false, callback, ...props}: RippleAreaProps, ref) => {
const [ripples, setRipples] = useState<Array<JSX.Element>>([]),
rippleDomain = useRef<any>(null),
clicked = useRef<boolean>(false),
uniqueKey = useRef<number>(0),
uniqueId = useId();
rippleDomain = useRef<any>(null),
clicked = useRef<boolean>(false),
uniqueKey = useRef<number>(0),
uniqueId = useId();
let classes = props.className ?
`m3 m3-ripple-domain ${props.className}`.trimEnd() :
"m3 m3-ripple-domain";
const classes = props.className
? `m3 m3-ripple-domain ${props.className}`.trimEnd()
: 'm3 m3-ripple-domain';
const start = useCallback((event : any, cb : (state : boolean) => void) : void => {
const start = useCallback(
(event: any, cb: (state: boolean) => void): void => {
clicked.current = true;
cb(clicked.current);
clicked.current = true;
cb(clicked.current);
const rippleDomainChar = rippleDomain.current
? rippleDomain.current.getBoundingClientRect()
: {
width: 0,
height: 0,
left: 0,
top: 0,
};
const rippleDomainChar = rippleDomain.current ? rippleDomain.current.getBoundingClientRect() : {
width: 0,
height: 0,
left: 0,
top: 0,
}
const rippleX: number = !central
? event.clientX - rippleDomainChar.left
: rippleDomainChar.width / 2,
rippleY: number = !central
? event.clientY - rippleDomainChar.top
: rippleDomainChar.height / 2,
rippleSizeX: number =
Math.max(
Math.abs(rippleDomainChar.width - rippleX),
rippleX
) *
2 +
2,
rippleSizeY: number =
Math.max(
Math.abs(rippleDomainChar.height - rippleY),
rippleY
) *
2 +
2,
rippleS: number =
(rippleSizeX ** 2 + rippleSizeY ** 2) ** 0.5;
let rippleX : number = !central ? event.clientX - rippleDomainChar.left : rippleDomainChar.width / 2,
rippleY : number = !central ? event.clientY - rippleDomainChar.top : rippleDomainChar.height / 2,
rippleSizeX : number = Math.max(Math.abs(rippleDomainChar.width - rippleX), rippleX) * 2 + 2,
rippleSizeY : number = Math.max(Math.abs(rippleDomainChar.height - rippleY), rippleY) * 2 + 2,
rippleS : number = (rippleSizeX ** 2 + rippleSizeY ** 2) ** 0.5;
setRipples((prevRipples : Array<JSX.Element>) => {
if(prevRipples.length === 0){
setRipples((prevRipples: Array<JSX.Element>) => {
if (prevRipples.length === 0) {
return [
<Ripple rippleX={rippleX}
rippleY={rippleY}
rippleS={rippleS}
key={uniqueKey.current}
lifetime={TIMEOUT}/>
]
<Ripple
rippleX={rippleX}
rippleY={rippleY}
rippleS={rippleS}
key={uniqueKey.current}
lifetime={TIMEOUT}
/>,
];
} else {
let old = [...prevRipples];
const old = [...prevRipples];
old.push(
<Ripple rippleX={rippleX}
rippleY={rippleY}
rippleS={rippleS}
key={uniqueKey.current}
lifetime={TIMEOUT}/>
)
<Ripple
rippleX={rippleX}
rippleY={rippleY}
rippleS={rippleS}
key={uniqueKey.current}
lifetime={TIMEOUT}
/>
);
return old;
}
}
)
});
uniqueKey.current += 1;
uniqueKey.current += 1;
},
[]
);
}, []);
const stop = useCallback(
(_event: any, cb: (state: boolean) => void) => {
clicked.current = false;
cb(clicked.current);
const stop = useCallback((_event : any, cb : (state : boolean) => void) => {
clicked.current = false;
cb(clicked.current);
setRipples((prevRipples : Array<JSX.Element>) => {
if(prevRipples.length > 0) {
let old = [...prevRipples];
old.shift();
return old;
}
return prevRipples
});
},[]);
useImperativeHandle(ref, () => ({
start,
stop,
}), [start, stop]);
setRipples((prevRipples: Array<JSX.Element>) => {
if (prevRipples.length > 0) {
const old = [...prevRipples];
old.shift();
return old;
}
return prevRipples;
});
},
[]
);
useImperativeHandle(
ref,
() => ({
start,
stop,
}),
[start, stop]
);
return (
<span className={classes}
id={uniqueId}
ref={rippleDomain}>
<span className={classes} id={uniqueId} ref={rippleDomain}>
<rippleAreaContext.Provider value={clicked.current}>
<Ripples>
{ripples}
</Ripples>
<Ripples>{ripples}</Ripples>
</rippleAreaContext.Provider>
</span>
);
}
)
);
export {rippleAreaContext, RippleArea};

69
src/primitive-components/ripple/ripple.tsx
View File

@ -1,9 +1,9 @@
"use client"
'use client';
import isEmpty from "./utils/utils";
import {rippleProps} from "./ripple.types";
import {rippleAreaContext} from "./ripple-area";
import RippleEffectBuild from "./utils/ripple-effect-builder";
import isEmpty from './utils/utils';
import {rippleProps} from './ripple.types';
import {rippleAreaContext} from './ripple-area';
import RippleEffectBuild from './utils/ripple-effect-builder';
import React, {
useRef,
useState,
@ -12,82 +12,69 @@ import React, {
useContext,
useCallback,
ForwardedRef,
useTransition, JSX
useTransition,
JSX,
} from 'react';
const Ripples = forwardRef(function Ripples(props : any, ref : ForwardedRef<any>){
const Ripples = forwardRef((props: any, ref: ForwardedRef<any>) => {
const [ripples, setRipples] = useState({});
const firstRender = useRef<boolean>(true);
const [pending, startTransition] = useTransition();
const LifetimeEnd = useCallback((child : JSX.Element) => {
const LifetimeEnd = useCallback((child: JSX.Element) => {
if (child.props.endLifetime) {
child.props.endLifetime();
}
setRipples(state => {
let children = {...state};
const children = {...state};
delete children[child.key];
return children;
})
});
}, []);
useEffect(() => {
if(props.children.length > 0){
if (props.children.length > 0) {
startTransition(() => {
if (firstRender.current || isEmpty(ripples)) {
setRipples(RippleEffectBuild(props.children, LifetimeEnd));
firstRender.current = false;
} else {
setRipples(RippleEffectBuild(props.children, LifetimeEnd, ripples))
setRipples(
RippleEffectBuild(props.children, LifetimeEnd, ripples)
);
}
});
}
}, [props.children]);
return(
<>
{ Object.values(ripples) }
</>
)
return <>{Object.values(ripples)}</>;
});
})
const Ripple = forwardRef(function Ripple(props : rippleProps, ref : ForwardedRef<any>) {
const {
rippleX,
rippleY,
rippleS,
endLifetime,
lifetime
} = props;
const Ripple = forwardRef((props: rippleProps, ref: ForwardedRef<any>) => {
const {rippleX, rippleY, rippleS, endLifetime, lifetime} = props;
const clicked = useContext<boolean>(rippleAreaContext);
const [classes, setClasses] = useState<string>("m3 ripple visible");
const [classes, setClasses] = useState<string>('m3 ripple visible');
useEffect(() => {
if(endLifetime !== null && !clicked) {
setClasses("m3 ripple")
if (endLifetime !== null && !clicked) {
setClasses('m3 ripple');
setTimeout(endLifetime, lifetime);
}
}, [clicked, endLifetime]);
return (
<span className={classes} style={
{
<span
className={classes}
style={{
left: -(rippleS / 2) + rippleX,
top: -(rippleS / 2) + rippleY,
width: rippleS,
aspectRatio: 1,
}
}/>
}}
/>
);
})
});
export {Ripple, Ripples};

26
src/primitive-components/ripple/ripple.types.ts
View File

@ -1,21 +1,19 @@
import {Dispatch, SetStateAction} from "react";
import {Dispatch, SetStateAction, PropsWithChildren} from 'react';
export interface IRippleProps {
centralRipple? : boolean
centralRipple?: boolean;
}
export interface RippleAreaProps extends PropsWithChildren<any>{
callback : Dispatch<SetStateAction<boolean>>,
central? : boolean,
export interface RippleAreaProps extends PropsWithChildren<any> {
callback: Dispatch<SetStateAction<boolean>>;
central?: boolean;
}
export type rippleProps = {
rippleX : number,
rippleY : number,
rippleS : number,
endLifetime? : any,
lifetime : number,
key? : number,
}
import {PropsWithChildren} from "react";
rippleX: number;
rippleY: number;
rippleS: number;
endLifetime?: any;
lifetime: number;
key?: number;
};

25
src/primitive-components/ripple/utils/array-convert-to-obj.ts
View File

@ -1,18 +1,15 @@
import {cloneElement, ReactElement} from "react";
import {cloneElement, ReactElement} from 'react';
export default function ArrayConvertToObj(
obj : Object,
nextChildren : ReactElement[],
callback : (child: any) => void
) : void {
Object
.values(nextChildren)
.forEach((child : JSX.Element) =>
obj[child.key] = cloneElement(child, {
obj: Object,
nextChildren: ReactElement[],
callback: (child: any) => void
): void {
Object.values(nextChildren).forEach(
(child: JSX.Element) =>
(obj[child.key] = cloneElement(child, {
...child.props,
endLifetime: callback.bind(null, child)
})
);
endLifetime: callback.bind(null, child),
}))
);
}

32
src/primitive-components/ripple/utils/ripple-effect-builder.ts
View File

@ -1,15 +1,17 @@
import ArrayConvertToObj from "./array-convert-to-obj";
import {cloneElement, ReactElement} from "react";
import isEmpty from "./utils";
import isEmpty from './utils';
import {cloneElement, ReactElement} from 'react';
import ArrayConvertToObj from './array-convert-to-obj';
export default function RippleEffectBuild(
nextRipples : ReactElement[],
callback : (child : any) => void,
prevRipples? : any | null
nextRipples: ReactElement[],
callback: (child: any) => void,
prevRipples?: any | null
) {
const next: object = {};
const empty: boolean = isEmpty(prevRipples);
const preparedRipples: object = empty ? {} : prevRipples;
let empty : boolean = isEmpty(prevRipples);
let preparedRipples : object = empty ? {} : prevRipples;
console.log(preparedRipples);
switch (empty) {
case true:
@ -17,20 +19,16 @@ export default function RippleEffectBuild(
break;
case false:
let next : object = {};
ArrayConvertToObj(next, nextRipples, callback)
for(let rippleKey of Object.keys(next)){
if(preparedRipples[rippleKey] == undefined){
ArrayConvertToObj(next, nextRipples, callback);
for (const rippleKey of Object.keys(next)) {
if (preparedRipples[rippleKey] === undefined) {
preparedRipples[rippleKey] = cloneElement(next[rippleKey], {
...next[rippleKey].props,
endLifetime: callback.bind(null, next[rippleKey])
})
endLifetime: callback.bind(null, next[rippleKey]),
});
}
}
break;
}
return preparedRipples;
}

4
src/primitive-components/ripple/utils/utils.ts
View File

@ -1,4 +1,4 @@
export default function isEmpty(obj : Object) : boolean{
for(let _i in obj) return false;
export default function isEmpty(obj: Object): boolean {
for (const _i in obj) return false;
return true;
}

51
src/primitive-components/switch/switch.tsx
View File

@ -1,6 +1,6 @@
import React, {ForwardedRef, forwardRef} from "react";
import {switchMainProps} from "./switch.types";
import {CheckBoxLayout} from "../checkbox-layout/check-box-layout";
import React, {ForwardedRef, forwardRef} from 'react';
import {switchMainProps} from './switch.types';
import {CheckBoxLayout} from '../checkbox-layout/check-box-layout';
/**
* Switch component
@ -8,32 +8,31 @@ import {CheckBoxLayout} from "../checkbox-layout/check-box-layout";
*/
export const Switch = forwardRef(
({icon, disabled, selected = false, ...props} : switchMainProps, ref : ForwardedRef<any>) => (
<div className={"m3 m3-switch-exp"} ref={ref}>
<CheckBoxLayout {...props}
type={"checkbox"}
disabled={disabled}
className={`m3 ${props.className ?? ""}`.trimEnd()}/>
(
{icon, disabled, selected = false, ...props}: switchMainProps,
ref: ForwardedRef<HTMLInputElement>
) => (
<div className={'m3 m3-switch-exp'}>
<CheckBoxLayout
{...props}
ref={ref}
type={'checkbox'}
disabled={disabled}
className={`m3 ${props.className ?? ''}`.trimEnd()}
/>
<svg>
<rect className={"m3 m3-switch-track"}/>
<circle className={"m3 m3-switch-handler"}/>
<circle className={"m3 m3-switch-handler-state-layer"}/>
<rect className={'m3 m3-switch-track'} />
<circle className={'m3 m3-switch-handler'} />
<circle className={'m3 m3-switch-handler-state-layer'} />
<g>
{
icon && !selected &&
<text className={"m3 m3-icon-unchecked"}>
close
</text>
}
{
icon &&
<text className={"m3 m3-icon-checked"}>
check
</text>
}
{icon && !selected && (
<text className={'m3 m3-icon-unchecked'}>close</text>
)}
{icon && (
<text className={'m3 m3-icon-checked'}>check</text>
)}
</g>
</svg>
</div>
)
)
);

10
src/primitive-components/switch/switch.types.ts
View File

@ -1,7 +1,7 @@
import {PropsWithChildren} from "react";
import {PropsWithChildren} from 'react';
export interface switchMainProps extends PropsWithChildren<any>{
disabled? : boolean,
icon? : boolean,
selected? : boolean
export interface switchMainProps extends PropsWithChildren<any> {
disabled?: boolean;
icon?: boolean;
selected?: boolean;
}

97
src/primitive-components/text-field/text-field.tsx
View File

@ -1,64 +1,81 @@
"use client"
'use client';
import React, {useState} from 'react';
import {bool, string} from "prop-types";
import {TextFieldInterface} from "./text-field.types";
export function TextField({variant = "filled", withAfterIcon, withBeforeIcon, supportingText, ...props} : TextFieldInterface) {
import {bool, string} from 'prop-types';
import {type TextFieldInterface} from './text-field.types';
export function TextField({
variant = 'filled',
withAfterIcon,
withBeforeIcon,
supportingText,
...props
}: TextFieldInterface) {
const [raised, setRaised] = useState<boolean>(props.placeholder ?? false);
const callback = (e : any) => {
if(e.type === "blur" && e.target.value.length === 0 && !props.placeholder) setRaised(false);
else if(e.type === "focus") setRaised(true);
}
const callback = (e: any) => {
if (
e.type === 'blur' &&
e.target.value.length === 0 &&
!props.placeholder
)
setRaised(false);
else if (e.type === 'focus') setRaised(true);
};
const iconStyles = withBeforeIcon && withAfterIcon ? "with-before-icon with-after-icon" :
withBeforeIcon ? "with-before-icon" : withAfterIcon ? "with-after-icon" : ""
const iconStyles =
withBeforeIcon && withAfterIcon
? 'with-before-icon with-after-icon'
: withBeforeIcon
? 'with-before-icon'
: withAfterIcon
? 'with-after-icon'
: '';
return (
<span>
<div className={`m3 m3-text-field ${variant}`.trimEnd()}>
{variant === "outlined" &&
{variant === 'outlined' && (
<fieldset>
<legend className={raised && "raised"}>
<legend className={raised && 'raised'}>
<span>Label</span>
</legend>
</fieldset>
}
{withBeforeIcon &&
<span className={"m3-icon icon-before"}>
{withBeforeIcon && "search"}
)}
{withBeforeIcon && (
<span className={'m3-icon icon-before'}>
{withBeforeIcon && 'search'}
</span>
}
<input {...props}
className={`${props.className ?? ""} ${iconStyles}`.trim()}
onFocus={(event) => {
callback(event);
if(props.onFocus) props.onFocus(event)
}}
onBlur={(event) => {
callback(event)
if(props.onBlur) props.onBlur(event)
}}/>
<label className={raised ? "raised" : ""}>
{props.children ?? "Label"}
)}
<input
{...props}
className={`${props.className ?? ''} ${iconStyles}`.trim()}
onFocus={event => {
callback(event);
if (props.onFocus) props.onFocus(event);
}}
onBlur={event => {
callback(event);
if (props.onBlur) props.onBlur(event);
}}
/>
<label className={raised ? 'raised' : ''}>
{props.children ?? 'Label'}
</label>
<span className={"m3-text-field-state-layer"}/>
{withAfterIcon &&
<span className={"m3-icon"}>
{withAfterIcon && "cancel"}
<span className={'m3-text-field-state-layer'} />
{withAfterIcon && (
<span className={'m3-icon'}>
{withAfterIcon && 'cancel'}
</span>
}
)}
</div>
{supportingText &&
<span className={"m3-text-field-supporting-text"}>
{supportingText && (
<span className={'m3-text-field-supporting-text'}>
{supportingText}
</span>
}
)}
</span>
);
}
TextField.propTypes = {
@ -69,4 +86,4 @@ TextField.propTypes = {
variant: string,
placeholder: string,
supportingText: string,
}
};

12
src/primitive-components/text-field/text-field.types.ts
View File

@ -1,8 +1,8 @@
import {PropsWithChildren} from "react";
import {PropsWithChildren} from 'react';
export interface TextFieldInterface extends PropsWithChildren<any>{
variant: "filled" | "outlined",
withAfterIcon?: boolean,
withBeforeIcon?: boolean,
supportingText?: string,
export interface TextFieldInterface extends PropsWithChildren<any> {
variant: 'filled' | 'outlined';
withAfterIcon?: boolean;
withBeforeIcon?: boolean;
supportingText?: string;
}

23
tsconfig.json
View File

@ -1,23 +1,18 @@
{
"extends": "./node_modules/gts/tsconfig-google.json",
"compilerOptions": {
"target": "es5",
"lib": [
"dom",
"dom.iterable",
"esnext"
],
"rootDir": ".",
"outDir": "build",
"allowSyntheticDefaultImports": true,
"allowJs": true,
"skipLibCheck": true,
"strict": false,
"forceConsistentCasingInFileNames": true,
"noEmit": true,
"incremental": true,
"esModuleInterop": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
"incremental": true,
"plugins": [
{
"name": "next"
@ -25,12 +20,8 @@
]
},
"include": [
"next-env.d.ts",
"**/*.ts",
"**/*.tsx",
"src/**/*.ts",
"test/**/*.ts",
".next/types/**/*.ts"
],
"exclude": [
"node_modules"
]
}