@remember-web/mixin 0.1.12 → 0.1.13

package/dist/mixin/src/provider/index.cjs.js

@@ -33,7 +33,7 @@ function RUIProvider(_ref) {
 function useRUI() {
   var ruiContextValue = react.useContext(RUIContext);
   if (ruiContextValue === null) {
-    throw new Error('useRUI must be used within RUIProvider');
+    throw new Error('useRUI must be used within RUIProvider!');
   }
   return ruiContextValue;
 }

package/dist/mixin/src/provider/index.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.cjs.js","sources":["../../../../src/provider/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { createContext, useContext, useMemo } from 'react';\n\nimport type { ColorThemeType, ThemeType } from '@/colors';\nimport { getBrowserTheme } from '@/colors';\n\nimport { RUIGlobalStyle } from './styles';\n\nexport interface RUIContentProps {\n  customMixins?: ColorThemeType;\n  forceTheme?: ThemeType;\n  setTheme?: (theme: ThemeType) => void;\n}\n\nexport interface RUIContextValue {\n  currentTheme: ThemeType;\n  setTheme: RUIContentProps['setTheme'];\n}\n\nconst RUIContext = createContext<RUIContextValue | null>(null);\n\n/** theme과 setTheme은 사용하는 곳에서 주입,\n * 기본적으로는 브라우저의 미디어쿼리를 통해서 light, dark를 결정 */\nexport function RUIProvider({\n  children,\n  customMixins,\n  forceTheme,\n  setTheme,\n}: { children: ReactNode } & RUIContentProps) {\n  const currentTheme: ThemeType = forceTheme ?? getBrowserTheme();\n  const ruiContextValue: RUIContextValue = useMemo(\n    () => ({ currentTheme, setTheme }),\n    [currentTheme, setTheme]\n  );\n\n  return (\n    <RUIContext.Provider value={ruiContextValue}>\n      <RUIGlobalStyle customMixins={customMixins} forceTheme={forceTheme} />\n      {children}\n    </RUIContext.Provider>\n  );\n}\n\nexport function useRUI() {\n  const ruiContextValue = useContext(RUIContext);\n\n  if (ruiContextValue === null) {\n    throw new Error('useRUI must be used within RUIProvider');\n  }\n\n  return ruiContextValue;\n}\n"],"names":["currentTheme","setTheme","value","customMixins","forceTheme"],"mappings":";;;;;;;;AAqBA;;AAEA;AACA;AACO;AAKuC;;;;;;;AAGjCA;AAAcC;;AAAU;AAInC;AACuBC;;AACHC;AAA4BC;;AACnC;AAGf;AAEO;AACL;;AAGE;AACF;AAEA;AACF;;;"}
+{"version":3,"file":"index.cjs.js","sources":["../../../../src/provider/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { createContext, useContext, useMemo } from 'react';\n\nimport type { ColorThemeType, ThemeType } from '@/colors';\nimport { getBrowserTheme } from '@/colors';\n\nimport { RUIGlobalStyle } from './styles';\n\nexport interface RUIContentProps {\n  customMixins?: ColorThemeType;\n  forceTheme?: ThemeType;\n  setTheme?: (theme: ThemeType) => void;\n}\n\nexport interface RUIContextValue {\n  currentTheme: ThemeType;\n  setTheme: RUIContentProps['setTheme'];\n}\n\nconst RUIContext = createContext<RUIContextValue | null>(null);\n\n/** theme과 setTheme은 사용하는 곳에서 주입,\n * 기본적으로는 브라우저의 미디어쿼리를 통해서 light, dark를 결정 */\nexport function RUIProvider({\n  children,\n  customMixins,\n  forceTheme,\n  setTheme,\n}: { children: ReactNode } & RUIContentProps) {\n  const currentTheme: ThemeType = forceTheme ?? getBrowserTheme();\n  const ruiContextValue: RUIContextValue = useMemo(\n    () => ({ currentTheme, setTheme }),\n    [currentTheme, setTheme]\n  );\n\n  return (\n    <RUIContext.Provider value={ruiContextValue}>\n      <RUIGlobalStyle customMixins={customMixins} forceTheme={forceTheme} />\n      {children}\n    </RUIContext.Provider>\n  );\n}\n\nexport function useRUI() {\n  const ruiContextValue = useContext(RUIContext);\n\n  if (ruiContextValue === null) {\n    throw new Error('useRUI must be used within RUIProvider!');\n  }\n\n  return ruiContextValue;\n}\n"],"names":["currentTheme","setTheme","value","customMixins","forceTheme"],"mappings":";;;;;;;;AAqBA;;AAEA;AACA;AACO;AAKuC;;;;;;;AAGjCA;AAAcC;;AAAU;AAInC;AACuBC;;AACHC;AAA4BC;;AACnC;AAGf;AAEO;AACL;;AAGE;AACF;AAEA;AACF;;;"}

package/dist/mixin/src/provider/index.esm.js

@@ -31,7 +31,7 @@ function RUIProvider(_ref) {
 function useRUI() {
   var ruiContextValue = useContext(RUIContext);
   if (ruiContextValue === null) {
-    throw new Error('useRUI must be used within RUIProvider');
+    throw new Error('useRUI must be used within RUIProvider!');
   }
   return ruiContextValue;
 }

package/dist/mixin/src/provider/index.esm.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.esm.js","sources":["../../../../src/provider/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { createContext, useContext, useMemo } from 'react';\n\nimport type { ColorThemeType, ThemeType } from '@/colors';\nimport { getBrowserTheme } from '@/colors';\n\nimport { RUIGlobalStyle } from './styles';\n\nexport interface RUIContentProps {\n  customMixins?: ColorThemeType;\n  forceTheme?: ThemeType;\n  setTheme?: (theme: ThemeType) => void;\n}\n\nexport interface RUIContextValue {\n  currentTheme: ThemeType;\n  setTheme: RUIContentProps['setTheme'];\n}\n\nconst RUIContext = createContext<RUIContextValue | null>(null);\n\n/** theme과 setTheme은 사용하는 곳에서 주입,\n * 기본적으로는 브라우저의 미디어쿼리를 통해서 light, dark를 결정 */\nexport function RUIProvider({\n  children,\n  customMixins,\n  forceTheme,\n  setTheme,\n}: { children: ReactNode } & RUIContentProps) {\n  const currentTheme: ThemeType = forceTheme ?? getBrowserTheme();\n  const ruiContextValue: RUIContextValue = useMemo(\n    () => ({ currentTheme, setTheme }),\n    [currentTheme, setTheme]\n  );\n\n  return (\n    <RUIContext.Provider value={ruiContextValue}>\n      <RUIGlobalStyle customMixins={customMixins} forceTheme={forceTheme} />\n      {children}\n    </RUIContext.Provider>\n  );\n}\n\nexport function useRUI() {\n  const ruiContextValue = useContext(RUIContext);\n\n  if (ruiContextValue === null) {\n    throw new Error('useRUI must be used within RUIProvider');\n  }\n\n  return ruiContextValue;\n}\n"],"names":["currentTheme","setTheme","value","customMixins","forceTheme"],"mappings":";;;;;;AAqBA;;AAEA;AACA;AACO;AAKuC;;;;;;;AAGjCA;AAAcC;;AAAU;AAInC;AACuBC;;AACHC;AAA4BC;;AACnC;AAGf;AAEO;AACL;;AAGE;AACF;AAEA;AACF;;"}
+{"version":3,"file":"index.esm.js","sources":["../../../../src/provider/index.tsx"],"sourcesContent":["'use client';\n\nimport type { ReactNode } from 'react';\nimport { createContext, useContext, useMemo } from 'react';\n\nimport type { ColorThemeType, ThemeType } from '@/colors';\nimport { getBrowserTheme } from '@/colors';\n\nimport { RUIGlobalStyle } from './styles';\n\nexport interface RUIContentProps {\n  customMixins?: ColorThemeType;\n  forceTheme?: ThemeType;\n  setTheme?: (theme: ThemeType) => void;\n}\n\nexport interface RUIContextValue {\n  currentTheme: ThemeType;\n  setTheme: RUIContentProps['setTheme'];\n}\n\nconst RUIContext = createContext<RUIContextValue | null>(null);\n\n/** theme과 setTheme은 사용하는 곳에서 주입,\n * 기본적으로는 브라우저의 미디어쿼리를 통해서 light, dark를 결정 */\nexport function RUIProvider({\n  children,\n  customMixins,\n  forceTheme,\n  setTheme,\n}: { children: ReactNode } & RUIContentProps) {\n  const currentTheme: ThemeType = forceTheme ?? getBrowserTheme();\n  const ruiContextValue: RUIContextValue = useMemo(\n    () => ({ currentTheme, setTheme }),\n    [currentTheme, setTheme]\n  );\n\n  return (\n    <RUIContext.Provider value={ruiContextValue}>\n      <RUIGlobalStyle customMixins={customMixins} forceTheme={forceTheme} />\n      {children}\n    </RUIContext.Provider>\n  );\n}\n\nexport function useRUI() {\n  const ruiContextValue = useContext(RUIContext);\n\n  if (ruiContextValue === null) {\n    throw new Error('useRUI must be used within RUIProvider!');\n  }\n\n  return ruiContextValue;\n}\n"],"names":["currentTheme","setTheme","value","customMixins","forceTheme"],"mappings":";;;;;;AAqBA;;AAEA;AACA;AACO;AAKuC;;;;;;;AAGjCA;AAAcC;;AAAU;AAInC;AACuBC;;AACHC;AAA4BC;;AACnC;AAGf;AAEO;AACL;;AAGE;AACF;AAEA;AACF;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@remember-web/mixin",
-  "version": "0.1.12",
+  "version": "0.1.13",
   "description": "Remember Web Mixins",
   "homepage": "https://dramancompany.github.io/remember-web-packages/",
   "author": "Remember",
@@ -16,9 +16,8 @@
   "scripts": {
     "build": "rollup -c && yarn fix:dts-alias",
     "fix:dts-alias": "yarn tsc-alias -p tsconfig.alias.json",
-    "type-check": "tsc -p ./tsconfig.json",
-    "lint": "eslint src --fix --ext .js,.jsx,.ts,.tsx --cache",
-    "release": "yarn build && npm publish"
+    "type-check": "tsc -p ./tsconfig.cli.json",
+    "lint": "eslint src --fix --ext .js,.jsx,.ts,.tsx --cache"
   },
   "files": [
     "dist",

package/src/colors/color.stories.tsx

@@ -0,0 +1,67 @@
+import type { Meta } from '@storybook/react';
+import { useRUI } from '@remember-web/mixin';
+import { Grid, Typography } from '@remember-web/primitive';
+
+import type { RUIColorVariable, ThemeType } from './types';
+import * as colors from './variables';
+import { getHexFromRuiCssVariable, getRgba } from './utils';
+
+const meta = {
+  title: 'Mixins/Colors',
+} satisfies Meta;
+
+const ColorChip = ({
+  colorName,
+  color,
+  theme,
+}: {
+  colorName: string;
+  color: string;
+  theme: ThemeType;
+}) => (
+  <div
+    style={{
+      borderRadius: 4,
+      overflow: 'hidden',
+      boxShadow: `0 3px 12px 0px ${getRgba(colors.contents000, 0.1)}`,
+    }}
+  >
+    <div style={{ backgroundColor: color, width: '100%', height: '100px' }} />
+    <div
+      style={{ padding: 8, display: 'flex', justifyContent: 'space-between' }}
+    >
+      <Typography variant="Title1">{colorName}</Typography>
+      <Typography variant="Body1" color={colors.contents100}>
+        {getHexFromRuiCssVariable({
+          colorVariable: color as RUIColorVariable,
+          theme,
+        })}
+      </Typography>
+    </div>
+  </div>
+);
+
+export const Overview = {
+  render: () => {
+    // eslint-disable-next-line react-hooks/rules-of-hooks
+    const { currentTheme } = useRUI();
+
+    return (
+      <div>
+        <Typography variant="Headline">Colors</Typography>
+        <Grid columns={2} columnGap="16px" rowGap="16px">
+          {Object.entries(colors).map(([key, value]) => (
+            <ColorChip
+              key={value}
+              colorName={key}
+              color={value}
+              theme={currentTheme}
+            />
+          ))}
+        </Grid>
+      </div>
+    );
+  },
+};
+
+export default meta;

package/src/provider/index.tsx

@@ -47,7 +47,7 @@ export function useRUI() {
   const ruiContextValue = useContext(RUIContext);
 
   if (ruiContextValue === null) {
-    throw new Error('useRUI must be used within RUIProvider');
+    throw new Error('useRUI must be used within RUIProvider!');
   }
 
   return ruiContextValue;