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"> <component name="InspectionProjectProfileManager">
<profile version="1.0"> <profile version="1.0">
<option name="myName" value="Project Default" /> <option name="myName" value="Project Default" />
<inspection_tool class="HtmlUnknownAttribute" enabled="true" level="WARNING" enabled_by_default="true"> <inspection_tool class="Eslint" 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>
</profile> </profile>
</component> </component>

2
.idea/modules.xml
View File

@ -2,7 +2,7 @@
<project version="4"> <project version="4">
<component name="ProjectModuleManager"> <component name="ProjectModuleManager">
<modules> <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> </modules>
</component> </component>
</project> </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] Text fields
- [x] Switches - [x] Switches
- [ ] Chips - [ ] Chips
- [x] Icon
- [x] Ripple Effect - [x] Ripple Effect
- [x] Dividers - [x] Dividers
- [x] Badges - [x] Badges

135
app/components/badges.tsx
View File

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

66
app/components/buttons.tsx
View File

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

90
app/components/checkboxes.tsx
View File

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

295
app/components/fabs.tsx
View File

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

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

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

26
app/components/radios.tsx
View File

@ -1,23 +1,31 @@
import React from 'react'; 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() { export default function Radios() {
return ( return (
<div className={"m3 m3-wrapper"}> <div className={'m3 m3-wrapper'}>
<h1> Radio </h1> <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> <div>
<h2> Default </h2> <h2> Default </h2>
<div style={{display: "flex", gap: "2em"}}> <div style={{display: 'flex', gap: '2em'}}>
<Radio centralRipple/> <Radio centralRipple />
<Radio defaultChecked/> <Radio defaultChecked />
</div> </div>
</div> </div>
<div> <div>
<h2> Disabled </h2> <h2> Disabled </h2>
<div style={{display: "flex", gap: "2em"}}> <div style={{display: 'flex', gap: '2em'}}>
<Radio disabled/> <Radio disabled />
<Radio disabled defaultChecked/> <Radio disabled defaultChecked />
</div> </div>
</div> </div>
</div> </div>

66
app/components/switches.tsx
View File

@ -1,53 +1,77 @@
import React from 'react'; 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() { export default function Switches() {
return ( 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> <h1> Switches </h1>
<div style={{display: "flex", flexDirection: "row", gap: "2em"}}> <div style={{display: 'flex', flexDirection: 'row', gap: '2em'}}>
<div style={{display: "flex", flexDirection: "column"}}> <div style={{display: 'flex', flexDirection: 'column'}}>
<h2 style={{margin: 0}}> Without icon </h2> <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> <div>
<h2> Default </h2> <h2> Default </h2>
<Switch/> <Switch />
<Switch defaultChecked/> <Switch defaultChecked />
</div> </div>
<div> <div>
<h2> Disabled </h2> <h2> Disabled </h2>
<Switch disabled/> <Switch disabled />
<Switch disabled defaultChecked/> <Switch disabled defaultChecked />
</div> </div>
</div> </div>
</div> </div>
<div style={{display: "flex", flexDirection: "column"}}> <div style={{display: 'flex', flexDirection: 'column'}}>
<h2 style={{margin: 0}}> With icon (both)</h2> <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> <div>
<h2> Default </h2> <h2> Default </h2>
<Switch icon/> <Switch icon />
<Switch defaultChecked icon/> <Switch defaultChecked icon />
</div> </div>
<div> <div>
<h2> Disabled </h2> <h2> Disabled </h2>
<Switch disabled icon/> <Switch disabled icon />
<Switch disabled defaultChecked icon/> <Switch disabled defaultChecked icon />
</div> </div>
</div> </div>
</div> </div>
<div style={{display: "flex", flexDirection: "column"}}> <div style={{display: 'flex', flexDirection: 'column'}}>
<h2 style={{margin: 0}}> With icon (selected)</h2> <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> <div>
<h2> Default </h2> <h2> Default </h2>
<Switch selected icon/> <Switch selected icon />
<Switch selected defaultChecked icon/> <Switch selected defaultChecked icon />
</div> </div>
<div> <div>
<h2> Disabled </h2> <h2> Disabled </h2>
<Switch selected disabled icon/> <Switch selected disabled icon />
<Switch selected disabled defaultChecked icon/> <Switch selected disabled defaultChecked icon />
</div> </div>
</div> </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/generics.css';
import "../src/styles/button.css" import '../src/styles/button.css';
import "../src/styles/ripple.css" import '../src/styles/ripple.css';
import {Metadata, Viewport} from "next"; import {Metadata, Viewport} from 'next';
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'Create Next App', title: 'Create Next App',
description: 'Generated by create next app', description: 'Generated by create next app',
} };
export const viewport: Viewport = { export const viewport: Viewport = {
width: 'device-width', width: 'device-width',
initialScale: 1, initialScale: 1,
maximumScale: 1, maximumScale: 1,
userScalable: false, userScalable: false,
} };
export default function RootLayout({ export default function RootLayout({children}: {children: React.ReactNode}) {
children,
}: {
children: React.ReactNode
}) {
return ( return (
<html lang="en"> <html lang="en">
<body> <body>{children}</body>
{children}
</body>
</html> </html>
) );
} }

72
app/page.tsx
View File

@ -1,42 +1,46 @@
import {Fragment} from "react"; import {Fragment} from 'react';
import Fabs from "./components/fabs"; import Fabs from './components/fabs';
import Badges from "./components/badges"; import Badges from './components/badges';
import IconButtons from "./components/icon-buttons"; import IconButtons from './components/icon-buttons';
import Buttons from "./components/buttons"; import Buttons from './components/buttons';
import Switches from "./components/switches"; import Switches from './components/switches';
import Checkboxes from "./components/checkboxes"; import Checkboxes from './components/checkboxes';
import Radios from "./components/radios"; import Radios from './components/radios';
import {TextFields} from "./components/text-fields"; import {TextFields} from './components/text-fields';
export default function Page() { export default function Page() {
return( return (
<Fragment> <Fragment>
<div style={{ <div
display: "flex", style={{
flexDirection:"column", display: 'flex',
justifyContent: "center", flexDirection: 'column',
alignItems: "center", justifyContent: 'center',
overflowX: "auto", alignItems: 'center',
gap: "0em" overflowX: 'auto',
}}> gap: '0em',
}}
>
<h1>Google Material You UI kit</h1> <h1>Google Material You UI kit</h1>
<div style={{ <div
display: "flex", style={{
flexDirection: "column", display: 'flex',
gap: "0.5em", flexDirection: 'column',
justifyContent: "center", gap: '0.5em',
alignItems: "center" justifyContent: 'center',
}}> alignItems: 'center',
<Buttons/> }}
<IconButtons/> >
<Switches/> <Buttons />
<Checkboxes/> <IconButtons />
<Radios/> <Switches />
<TextFields/> <Checkboxes />
<Fabs/> <Radios />
<Badges/> <TextFields />
<Fabs />
<Badges />
</div> </div>
</div> </div>
</Fragment> </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": { "scripts": {
"dev": "next dev --turbo", "dev": "next dev --turbo",
"build": "next build", "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": { "dependencies": {
"axios": "^1.6.5", "install": "^0.13.0",
"lodash": "^4.17.21",
"mui": "^0.0.1",
"next": "latest", "next": "latest",
"normalize.css": "^8.0.1", "npm": "^10.4.0",
"prop-types": "^15.8.1",
"react": "^18.2.0", "react": "^18.2.0",
"react-dom": "^18.2.0", "react-dom": "^18.2.0"
"react-transition-group": "^4.4.5",
"styled-components": "^6.1.1"
}, },
"devDependencies": { "devDependencies": {
"@types/node": "20.8.10", "@types/node": "20.8.2",
"@types/react": "18.2.33", "@types/react": "18.2.33",
"@types/react-dom": "18.2.14", "@types/react-dom": "18.2.14",
"@typescript-eslint/eslint-plugin": "^6.19.0", "gts": "^5.2.0",
"autoprefixer": "^10.4.16", "typescript": "~5.2.0"
"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"
} }
} }

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 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>{ interface BadgeProps extends PropsWithChildren<any> {
disableValue?: boolean, 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, return (
disableValueClassName = (disableValue || (!props.children ?? true)) ? "disable-value" : ""; <svg
{...props}
return ( ref={ref}
<svg {...props} width={`${digitLength}px`}
ref={ref} className={`m3 m3-badge ${
width={`${digitLength}px`} '' ?? props.className
className={`m3 m3-badge ${"" ?? props.className}${disableValueClassName}`.trimEnd()}> }${disableValueClassName}`.trimEnd()}
{props.children && >
<text x={"50%"} y={"50%"}> {props.children && (
{props.children} <text x={'50%'} y={'50%'}>
</text> {props.children}
} </text>
</svg> )}
); </svg>
}) );
}
);
Badge.propTypes = { Badge.propTypes = {
children: number, children: number,
className: string, className: string,
disableValue: bool, disableValue: bool,
} };
export {Badge}; 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 {RippleArea} from '../ripple/ripple-area';
import React, {forwardRef, PropsWithChildren, useId, useRef, useState} from "react"; import React, {
import useRippleEffect from "../ripple/hooks/useRippleEffect"; forwardRef,
import {IRippleProps} from "../ripple/ripple.types"; PropsWithChildren,
useId,
useRef,
useState,
} from 'react';
import useRippleEffect from '../ripple/hooks/useRippleEffect';
import {IRippleProps} from '../ripple/ripple.types';
const ButtonLayout = forwardRef( 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), const [isActive, setIsActive] = useState<boolean>(false),
ripplesRef = useRef(null), ripplesRef = useRef(null),
buttonId = useId(), buttonId = useId(),
events = useRippleEffect(ripplesRef, setIsActive); events = useRippleEffect(ripplesRef, setIsActive);
let { const {variant, disabled, className} = props;
variant,
disabled,
className
} = props;
let classes = className ? const classes = className
`m3 ${className} ${variant}${isActive ? " is-active" : ""}` : ? `m3 ${className} ${variant}${isActive ? ' is-active' : ''}`
`m3 ${variant}${isActive ? " is-active" : ""}`; : `m3 ${variant}${isActive ? ' is-active' : ''}`;
return ( return (
<button {...props} <button
{...events} {...props}
ref={ref} {...events}
id={buttonId} ref={ref}
className={classes} id={buttonId}
disabled={disabled}> className={classes}
disabled={disabled}
>
{props.children} {props.children}
<RippleArea ref={ripplesRef} <RippleArea
central={centralRipple} ref={ripplesRef}
callback={setIsActive}/> central={centralRipple}
callback={setIsActive}
/>
</button> </button>
) );
} }
);
)
export {ButtonLayout}; 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 = { type toggleButtonType = {
selected: string, selected: string;
unselected: string, unselected: string;
};
export interface buttonMainProps extends PropsWithChildren<any> {
disabled?: boolean;
variant?: 'filled' | 'outlined' | 'elevated' | 'tonal' | 'text';
} }
export interface buttonMainProps extends PropsWithChildren<any>{ export interface FABMainProps extends PropsWithChildren<any> {
disabled? : boolean, icon: string;
variant? : "filled" | "outlined" | "elevated" | "tonal" | "text", disabled?: boolean;
size?: 'small' | 'default' | 'large' | 'extended';
variant?: 'surface' | 'primary' | 'secondary' | 'tertiary';
} }
export interface FABMainProps extends PropsWithChildren<any>{ export interface iconButtonMainProps extends PropsWithChildren<any> {
icon : string; icon: string;
disabled? : boolean; toggled?: false | toggleButtonType;
size? : "small" | "default" | "large" | "extended"; disabled?: boolean;
variant? : "surface" | "primary" | "secondary" | "tertiary"; 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 {forwardRef} from 'react';
import {Icon} from "../material-you-components"; import {Icon} from '../material-you-components';
import {IRippleProps} from "../ripple/ripple.types"; import {IRippleProps} from '../ripple/ripple.types';
import {ButtonLayout} from "../button-layout/button-layout"; import {ButtonLayout} from '../button-layout/button-layout';
import {buttonMainProps} from "../button-layout/button.types"; import {buttonMainProps} from '../button-layout/button.types';
/** /**
* Button component * Button component
@ -10,24 +10,25 @@ import {buttonMainProps} from "../button-layout/button.types";
*/ */
export const Button = forwardRef( export const Button = forwardRef(
(
({centralRipple = false, variant, disabled, icon, ...props} : buttonMainProps & IRippleProps, ref) => ( {
<ButtonLayout {...props} centralRipple = false,
ref={ref} variant,
disabled={props.disabled} disabled,
centralRipple={centralRipple} icon,
variant={variant ? variant : "filled"}> ...props
{ }: buttonMainProps & IRippleProps,
icon ? ref
<Icon iconSize={20}> ) => (
{icon} <ButtonLayout
</Icon> {...props}
: <></> ref={ref}
} disabled={disabled}
<span className={"label-large"}> centralRipple={centralRipple}
{props.children} variant={variant ? variant : 'filled'}
</span> >
{icon ? <Icon iconSize={20}>{icon}</Icon> : <></>}
<span className={'label-large'}>{props.children}</span>
</ButtonLayout> </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 React, {forwardRef, useEffect, useImperativeHandle, useRef} from 'react';
import {CheckboxLayoutProps} from "./checkbox-layout.types"; import {CheckboxLayoutProps} from './checkbox-layout.types';
export const CheckBoxLayout = forwardRef( 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); const checkboxRef = useRef<any>(null);
useEffect(() => { useEffect(() => {
@ -15,18 +16,20 @@ export const CheckBoxLayout = forwardRef(
useImperativeHandle(ref, () => checkboxRef.current); useImperativeHandle(ref, () => checkboxRef.current);
let classesType = typeInput || type; const classesType = typeInput || type;
const classes = props.className !== undefined ? const classes =
`m3 m3-${type} ${props.className}` : `m3 m3-${classesType}` props.className !== undefined
? `m3 m3-${type} ${props.className}`
: `m3 m3-${classesType}`;
return ( return (
<input ref={checkboxRef} <input
{...props} ref={checkboxRef}
type={type} {...props}
className={classes.trimEnd()}/> 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; indeterminate?: boolean;
typeInput? : string; typeInput?: string;
type? : string; type?: string;
} }

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

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

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

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

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

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

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

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

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

@ -1,48 +1,59 @@
import React, {ForwardedRef, forwardRef} from 'react'; import React, {ForwardedRef, forwardRef} from 'react';
import {IconProps} from "./icon.types"; import {IconProps} from './icon.types';
import {bool, number, string} from "prop-types"; import {bool, number, string} from 'prop-types';
const Icon = forwardRef(function Icon( const Icon = forwardRef(
{ (
grade = 0, {
weight = 500, grade = 0,
svgSize = 20, weight = 500,
fill = false, svgSize = 20,
iconSize = 20, fill = false,
opticalSize = 24, iconSize = 20,
type = "outlined", opticalSize = 24,
...props type = 'outlined',
} : IconProps, ref : ForwardedRef<any>) { ...props
}: IconProps,
ref: ForwardedRef<any>
) => {
const fontVariation = {
fontVariationSettings: `'FILL' ${
fill ? 1 : 0
}, 'wght' ${weight}, 'GRAD' ${grade}, 'optz' ${opticalSize}`,
};
let fontVariation = { return (
fontVariationSettings: `'FILL' ${fill ? 1 : 0}, 'wght' ${weight}, 'GRAD' ${grade}, 'optz' ${opticalSize}` <svg
}; {...props}
ref={ref}
return ( className={`m3 m3-svg-icon ${props.className ?? ''}`.trim()}
<svg {...props} width={svgSize}
ref={ref} height={svgSize}
className={`m3 m3-svg-icon ${props.className ?? ""}`.trim()} >
width={svgSize} <text
height={svgSize}> className={`m3-${
<text className={`m3-${type[0].toUpperCase() + type.slice(1)} m3-size-${iconSize}px`} type[0].toUpperCase() + type.slice(1)
style={fontVariation} } m3-size-${iconSize}px`}
x={"50%"} style={fontVariation}
y={"50%"}> x={'50%'}
{props.children ?? "add_circle"} y={'50%'}
</text> >
</svg> {props.children ?? 'add_circle'}
); </text>
}) </svg>
);
}
);
Icon.propTypes = { Icon.propTypes = {
fill : bool, fill: bool,
type : string, type: string,
grade : number, grade: number,
weight : number, weight: number,
svgSize : number, svgSize: number,
iconSize : number, iconSize: number,
children : string, children: string,
opticalSize : number, opticalSize: number,
} };
export {Icon}; 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; fill?: boolean;
grade?: number; grade?: number;
svgSize?: number; svgSize?: number;
iconSize?: number; iconSize?: number;
opticalSize?: number; opticalSize?: number;
type?: "outlined" | "rounded" | "sharp"; type?: 'outlined' | 'rounded' | 'sharp';
weight?: 100 | 200 | 300 | 400 | 500 | 600 | 700; 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 {FAB} from "./fab/fab"; export {Radio} from './radio/radio';
export {Icon} from "./icon/icon"; export {Badge} from './badge/badge';
export {Radio} from "./radio/radio"; export {Switch} from './switch/switch';
export {Badge} from "./badge/badge"; export {Button} from './button/button';
export {Switch} from "./switch/switch"; export {Divider} from './divider/divider';
export {Button} from "./button/button"; export {Checkbox} from './checkbox/checkbox';
export {Divider} from "./divider/divider"; export {RippleArea} from './ripple/ripple-area';
export {Checkbox} from "./checkbox/checkbox"; export {Ripples, Ripple} from './ripple/ripple';
export {RippleArea} from "./ripple/ripple-area"; export {TextField} from './text-field/text-field';
export {Ripples, Ripple} from "./ripple/ripple"; export {IconButton} from './icon-button/icon-button';
export {TextField} from "./text-field/text-field"; export {ButtonLayout} from './button-layout/button-layout';
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 {RippleArea} from '../ripple/ripple-area';
import {forwardRef, useRef, useState} from "react"; import {forwardRef, useRef, useState} from 'react';
import useRippleEffect from "../ripple/hooks/useRippleEffect"; import useRippleEffect from '../ripple/hooks/useRippleEffect';
import {CheckBoxLayout} from "../checkbox-layout/check-box-layout"; import {CheckBoxLayout} from '../checkbox-layout/check-box-layout';
import {IRippleProps} from "../ripple/ripple.types"; import {IRippleProps} from '../ripple/ripple.types';
/** /**
* Radio component * Radio component
@ -10,30 +10,27 @@ import {IRippleProps} from "../ripple/ripple.types";
*/ */
export const Radio = forwardRef( export const Radio = forwardRef(
({centralRipple, ...props}: any & IRippleProps, ref) => {
({centralRipple, ...props} : any & IRippleProps, ref) => {
const [isActive, setIsActive] = useState<boolean>(false), const [isActive, setIsActive] = useState<boolean>(false),
ripplesRef = useRef(null), ripplesRef = useRef(null),
events = useRippleEffect(ripplesRef, setIsActive); 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 ( return (
<label {...events} <label {...events} className={classes}>
className={classes}> <CheckBoxLayout {...props} ref={ref} type={'radio'} />
<CheckBoxLayout {...props} <span className={'m3 m3-radio-state-layer'} />
ref={ref} <RippleArea
type={"radio"}/> className={'m3-checkbox-ripple-layer'}
<span className={"m3 m3-radio-state-layer"}/> ref={ripplesRef}
<RippleArea className={"m3-checkbox-ripple-layer"} central={centralRipple}
ref={ripplesRef} callback={setIsActive}
central={centralRipple} />
callback={setIsActive}/>
{props.children} {props.children}
</label> </label>
) );
} }
);
)

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

@ -12,30 +12,44 @@ interface RippleEventHandlers {
onTouchStart: React.TouchEventHandler; 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(() => { useEffect(() => {
if (!mounted) setMounted(true); if (!mounted) setMounted(true);
}) });
if (!mounted) return; if (!mounted) return;
const {start, stop} = ref.current; const {start, stop} = ref.current;
return { return {
onBlur: (event) => stop(event, callback), onBlur: event => stop(event, callback),
onContextMenu: (event) => start(event, callback), onContextMenu: event => start(event, callback),
onDragLeave: (event) => stop(event, callback), onDragLeave: event => stop(event, callback),
onMouseDown: (event) => start(event, callback), onMouseDown: event => start(event, callback),
onMouseLeave: (event) => stop(event, callback), onMouseLeave: event => stop(event, callback),
onMouseUp: (event) => stop(event, callback), onMouseUp: event => stop(event, callback),
onTouchEnd: (event) => stop(event, callback), onTouchEnd: event => stop(event, callback),
onTouchMove: (event) => stop(event, callback), onTouchMove: event => stop(event, callback),
onTouchStart: (event) => stop(event, callback), onTouchStart: event => stop(event, callback),
} };
};
}
export default UseRippleEffect; export default UseRippleEffect;

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

@ -1,4 +1,4 @@
"use client" 'use client';
import React, { import React, {
useId, useId,
@ -6,109 +6,128 @@ import React, {
useState, useState,
forwardRef, forwardRef,
useCallback, useCallback,
useImperativeHandle useImperativeHandle,
} from 'react'; } from 'react';
import {Ripple} from "./ripple"; import {Ripple} from './ripple';
import {Ripples} from "./ripple"; import {Ripples} from './ripple';
import {RippleAreaProps} from "./ripple.types"; import {RippleAreaProps} from './ripple.types';
const TIMEOUT : number = 550; const TIMEOUT = 550;
const rippleAreaContext = React.createContext(false); const rippleAreaContext = React.createContext(false);
const RippleArea = forwardRef( const RippleArea = forwardRef(
({central = false, callback, ...props}: RippleAreaProps, ref) => {
function RippleArea({central = false, callback, ...props} : RippleAreaProps, ref) {
const [ripples, setRipples] = useState<Array<JSX.Element>>([]), const [ripples, setRipples] = useState<Array<JSX.Element>>([]),
rippleDomain = useRef<any>(null), rippleDomain = useRef<any>(null),
clicked = useRef<boolean>(false), clicked = useRef<boolean>(false),
uniqueKey = useRef<number>(0), uniqueKey = useRef<number>(0),
uniqueId = useId(); uniqueId = useId();
let classes = props.className ? const classes = props.className
`m3 m3-ripple-domain ${props.className}`.trimEnd() : ? `m3 m3-ripple-domain ${props.className}`.trimEnd()
"m3 m3-ripple-domain"; : '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; const rippleDomainChar = rippleDomain.current
cb(clicked.current); ? rippleDomain.current.getBoundingClientRect()
: {
width: 0,
height: 0,
left: 0,
top: 0,
};
const rippleDomainChar = rippleDomain.current ? rippleDomain.current.getBoundingClientRect() : { const rippleX: number = !central
width: 0, ? event.clientX - rippleDomainChar.left
height: 0, : rippleDomainChar.width / 2,
left: 0, rippleY: number = !central
top: 0, ? 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, setRipples((prevRipples: Array<JSX.Element>) => {
rippleY : number = !central ? event.clientY - rippleDomainChar.top : rippleDomainChar.height / 2, if (prevRipples.length === 0) {
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){
return [ return [
<Ripple rippleX={rippleX} <Ripple
rippleY={rippleY} rippleX={rippleX}
rippleS={rippleS} rippleY={rippleY}
key={uniqueKey.current} rippleS={rippleS}
lifetime={TIMEOUT}/> key={uniqueKey.current}
] lifetime={TIMEOUT}
/>,
];
} else { } else {
let old = [...prevRipples]; const old = [...prevRipples];
old.push( old.push(
<Ripple rippleX={rippleX} <Ripple
rippleY={rippleY} rippleX={rippleX}
rippleS={rippleS} rippleY={rippleY}
key={uniqueKey.current} rippleS={rippleS}
lifetime={TIMEOUT}/> key={uniqueKey.current}
) lifetime={TIMEOUT}
/>
);
return old; 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) => { setRipples((prevRipples: Array<JSX.Element>) => {
if (prevRipples.length > 0) {
clicked.current = false; const old = [...prevRipples];
cb(clicked.current); old.shift();
return old;
setRipples((prevRipples : Array<JSX.Element>) => { }
if(prevRipples.length > 0) { return prevRipples;
let old = [...prevRipples]; });
old.shift(); },
return old; []
} );
return prevRipples
});
},[]);
useImperativeHandle(ref, () => ({
start,
stop,
}), [start, stop]);
useImperativeHandle(
ref,
() => ({
start,
stop,
}),
[start, stop]
);
return ( return (
<span className={classes} <span className={classes} id={uniqueId} ref={rippleDomain}>
id={uniqueId}
ref={rippleDomain}>
<rippleAreaContext.Provider value={clicked.current}> <rippleAreaContext.Provider value={clicked.current}>
<Ripples> <Ripples>{ripples}</Ripples>
{ripples}
</Ripples>
</rippleAreaContext.Provider> </rippleAreaContext.Provider>
</span> </span>
); );
} }
);
)
export {rippleAreaContext, RippleArea}; 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 isEmpty from './utils/utils';
import {rippleProps} from "./ripple.types"; import {rippleProps} from './ripple.types';
import {rippleAreaContext} from "./ripple-area"; import {rippleAreaContext} from './ripple-area';
import RippleEffectBuild from "./utils/ripple-effect-builder"; import RippleEffectBuild from './utils/ripple-effect-builder';
import React, { import React, {
useRef, useRef,
useState, useState,
@ -12,82 +12,69 @@ import React, {
useContext, useContext,
useCallback, useCallback,
ForwardedRef, ForwardedRef,
useTransition, JSX useTransition,
JSX,
} from 'react'; } 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 [ripples, setRipples] = useState({});
const firstRender = useRef<boolean>(true); const firstRender = useRef<boolean>(true);
const [pending, startTransition] = useTransition(); const [pending, startTransition] = useTransition();
const LifetimeEnd = useCallback((child : JSX.Element) => { const LifetimeEnd = useCallback((child: JSX.Element) => {
if (child.props.endLifetime) { if (child.props.endLifetime) {
child.props.endLifetime(); child.props.endLifetime();
} }
setRipples(state => { setRipples(state => {
let children = {...state}; const children = {...state};
delete children[child.key]; delete children[child.key];
return children; return children;
}) });
}, []); }, []);
useEffect(() => { useEffect(() => {
if (props.children.length > 0) {
if(props.children.length > 0){
startTransition(() => { startTransition(() => {
if (firstRender.current || isEmpty(ripples)) { if (firstRender.current || isEmpty(ripples)) {
setRipples(RippleEffectBuild(props.children, LifetimeEnd)); setRipples(RippleEffectBuild(props.children, LifetimeEnd));
firstRender.current = false; firstRender.current = false;
} else { } else {
setRipples(RippleEffectBuild(props.children, LifetimeEnd, ripples)) setRipples(
RippleEffectBuild(props.children, LifetimeEnd, ripples)
);
} }
}); });
} }
}, [props.children]); }, [props.children]);
return( return <>{Object.values(ripples)}</>;
<> });
{ Object.values(ripples) }
</>
)
}) const Ripple = forwardRef((props: rippleProps, ref: ForwardedRef<any>) => {
const {rippleX, rippleY, rippleS, endLifetime, lifetime} = props;
const Ripple = forwardRef(function Ripple(props : rippleProps, ref : ForwardedRef<any>) {
const {
rippleX,
rippleY,
rippleS,
endLifetime,
lifetime
} = props;
const clicked = useContext<boolean>(rippleAreaContext); const clicked = useContext<boolean>(rippleAreaContext);
const [classes, setClasses] = useState<string>("m3 ripple visible"); const [classes, setClasses] = useState<string>('m3 ripple visible');
useEffect(() => { useEffect(() => {
if(endLifetime !== null && !clicked) { if (endLifetime !== null && !clicked) {
setClasses("m3 ripple") setClasses('m3 ripple');
setTimeout(endLifetime, lifetime); setTimeout(endLifetime, lifetime);
} }
}, [clicked, endLifetime]); }, [clicked, endLifetime]);
return ( return (
<span className={classes} style={ <span
{ className={classes}
style={{
left: -(rippleS / 2) + rippleX, left: -(rippleS / 2) + rippleX,
top: -(rippleS / 2) + rippleY, top: -(rippleS / 2) + rippleY,
width: rippleS, width: rippleS,
aspectRatio: 1, aspectRatio: 1,
} }}
}/> />
); );
});
})
export {Ripple, Ripples}; 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 { export interface IRippleProps {
centralRipple? : boolean centralRipple?: boolean;
} }
export interface RippleAreaProps extends PropsWithChildren<any>{ export interface RippleAreaProps extends PropsWithChildren<any> {
callback : Dispatch<SetStateAction<boolean>>, callback: Dispatch<SetStateAction<boolean>>;
central? : boolean, central?: boolean;
} }
export type rippleProps = { export type rippleProps = {
rippleX : number, rippleX: number;
rippleY : number, rippleY: number;
rippleS : number, rippleS: number;
endLifetime? : any, endLifetime?: any;
lifetime : number, lifetime: number;
key? : number, key?: number;
} };
import {PropsWithChildren} from "react";

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

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

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

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

@ -1,6 +1,6 @@
import React, {ForwardedRef, forwardRef} from "react"; import React, {ForwardedRef, forwardRef} from 'react';
import {switchMainProps} from "./switch.types"; import {switchMainProps} from './switch.types';
import {CheckBoxLayout} from "../checkbox-layout/check-box-layout"; import {CheckBoxLayout} from '../checkbox-layout/check-box-layout';
/** /**
* Switch component * Switch component
@ -8,32 +8,31 @@ import {CheckBoxLayout} from "../checkbox-layout/check-box-layout";
*/ */
export const Switch = forwardRef( export const Switch = forwardRef(
({icon, disabled, selected = false, ...props} : switchMainProps, ref : ForwardedRef<any>) => ( (
<div className={"m3 m3-switch-exp"} ref={ref}> {icon, disabled, selected = false, ...props}: switchMainProps,
<CheckBoxLayout {...props} ref: ForwardedRef<HTMLInputElement>
type={"checkbox"} ) => (
disabled={disabled} <div className={'m3 m3-switch-exp'}>
className={`m3 ${props.className ?? ""}`.trimEnd()}/> <CheckBoxLayout
{...props}
ref={ref}
type={'checkbox'}
disabled={disabled}
className={`m3 ${props.className ?? ''}`.trimEnd()}
/>
<svg> <svg>
<rect className={"m3 m3-switch-track"}/> <rect className={'m3 m3-switch-track'} />
<circle className={"m3 m3-switch-handler"}/> <circle className={'m3 m3-switch-handler'} />
<circle className={"m3 m3-switch-handler-state-layer"}/> <circle className={'m3 m3-switch-handler-state-layer'} />
<g> <g>
{ {icon && !selected && (
icon && !selected && <text className={'m3 m3-icon-unchecked'}>close</text>
<text className={"m3 m3-icon-unchecked"}> )}
close {icon && (
</text> <text className={'m3 m3-icon-checked'}>check</text>
} )}
{
icon &&
<text className={"m3 m3-icon-checked"}>
check
</text>
}
</g> </g>
</svg> </svg>
</div> </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>{ export interface switchMainProps extends PropsWithChildren<any> {
disabled? : boolean, disabled?: boolean;
icon? : boolean, icon?: boolean;
selected? : 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 React, {useState} from 'react';
import {bool, string} from "prop-types"; import {bool, string} from 'prop-types';
import {TextFieldInterface} from "./text-field.types"; import {type TextFieldInterface} from './text-field.types';
export function TextField({variant = "filled", withAfterIcon, withBeforeIcon, supportingText, ...props} : TextFieldInterface) {
export function TextField({
variant = 'filled',
withAfterIcon,
withBeforeIcon,
supportingText,
...props
}: TextFieldInterface) {
const [raised, setRaised] = useState<boolean>(props.placeholder ?? false); const [raised, setRaised] = useState<boolean>(props.placeholder ?? false);
const callback = (e : any) => { const callback = (e: any) => {
if(e.type === "blur" && e.target.value.length === 0 && !props.placeholder) setRaised(false); if (
else if(e.type === "focus") setRaised(true); 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" : const iconStyles =
withBeforeIcon ? "with-before-icon" : withAfterIcon ? "with-after-icon" : "" withBeforeIcon && withAfterIcon
? 'with-before-icon with-after-icon'
: withBeforeIcon
? 'with-before-icon'
: withAfterIcon
? 'with-after-icon'
: '';
return ( return (
<span> <span>
<div className={`m3 m3-text-field ${variant}`.trimEnd()}> <div className={`m3 m3-text-field ${variant}`.trimEnd()}>
{variant === "outlined" && {variant === 'outlined' && (
<fieldset> <fieldset>
<legend className={raised && "raised"}> <legend className={raised && 'raised'}>
<span>Label</span> <span>Label</span>
</legend> </legend>
</fieldset> </fieldset>
} )}
{withBeforeIcon && {withBeforeIcon && (
<span className={"m3-icon icon-before"}> <span className={'m3-icon icon-before'}>
{withBeforeIcon && "search"} {withBeforeIcon && 'search'}
</span> </span>
} )}
<input {...props} <input
className={`${props.className ?? ""} ${iconStyles}`.trim()} {...props}
onFocus={(event) => { className={`${props.className ?? ''} ${iconStyles}`.trim()}
callback(event); onFocus={event => {
if(props.onFocus) props.onFocus(event) callback(event);
}} if (props.onFocus) props.onFocus(event);
onBlur={(event) => { }}
callback(event) onBlur={event => {
if(props.onBlur) props.onBlur(event) callback(event);
}}/> if (props.onBlur) props.onBlur(event);
<label className={raised ? "raised" : ""}> }}
{props.children ?? "Label"} />
<label className={raised ? 'raised' : ''}>
{props.children ?? 'Label'}
</label> </label>
<span className={"m3-text-field-state-layer"}/> <span className={'m3-text-field-state-layer'} />
{withAfterIcon && {withAfterIcon && (
<span className={"m3-icon"}> <span className={'m3-icon'}>
{withAfterIcon && "cancel"} {withAfterIcon && 'cancel'}
</span> </span>
} )}
</div> </div>
{supportingText && {supportingText && (
<span className={"m3-text-field-supporting-text"}> <span className={'m3-text-field-supporting-text'}>
{supportingText} {supportingText}
</span> </span>
} )}
</span> </span>
); );
} }
TextField.propTypes = { TextField.propTypes = {
@ -69,4 +86,4 @@ TextField.propTypes = {
variant: string, variant: string,
placeholder: string, placeholder: string,
supportingText: 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>{ export interface TextFieldInterface extends PropsWithChildren<any> {
variant: "filled" | "outlined", variant: 'filled' | 'outlined';
withAfterIcon?: boolean, withAfterIcon?: boolean;
withBeforeIcon?: boolean, withBeforeIcon?: boolean;
supportingText?: string, supportingText?: string;
} }

23
tsconfig.json
View File

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