@womp/kookie-ui 0.21.0 → 0.22.0

package/codemods/space-0.17.py

@@ -4,25 +4,35 @@ Kookie UI 0.17 spacing codemod.
 The space palette moved to v2's twelve steps, so every old step N becomes N+1
 (80px and 112px have no match and move to 64px and 96px). This rewrites, in place:
 
-- layout props in .tsx/.jsx/.mdx: p, px, py, pt, pr, pb, pl, m*, gap, gapX, gapY,
-  rowGap, columnGap, inset, top, right, bottom, left; plain strings and responsive objects
-- var(--space-N) in .css/.ts/.tsx/.mdx, and var(--scaling) to var(--scale)
+- layout props in .tsx/.jsx/.js/.mdx: p, px, py, pt, pr, pb, pl, m*, gap, gapX, gapY,
+  rowGap, columnGap, inset, top, right, bottom, left; plain strings, `{"4"}` and responsive objects
+- var(--space-N) in .css/.scss/.ts/.tsx/.js/.jsx/.mjs/.cjs/.mdx, and var(--scaling) to var(--scale)
 
-Usage: python3 space-0.17.py <folder> [<folder> ...]
+It cannot read a value that is not written out: a ternary, a variable, a spread or a template
+string keeps its old step, also as one entry of a responsive object. It prints each such prop;
+MIGRATION.md says how to find the rest.
+
+Usage: python3 space-0.17.py <folder|file> [...]
 Run it once. Running it twice shifts everything twice.
 """
-import glob
 import os
 import re
 import sys
 
+sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
+from _shared import files  # noqa: E402
+
 MAP = {1: 2, 2: 3, 3: 4, 4: 5, 5: 6, 6: 7, 7: 8, 8: 9, 9: 10, 10: 10, 11: 11, 12: 11}
 PROPS = 'p|px|py|pt|pr|pb|pl|m|mx|my|mt|mr|mb|ml|gap|gapX|gapY|rowGap|columnGap|inset|top|right|bottom|left'
-PLAIN = re.compile(r'(?<![\w.-])(' + PROPS + r')=(["\'])(-?\d+)\2')
+PLAIN = re.compile(r'(?<![\w.-])(' + PROPS + r')=(\{\s*)?(["\'])(-?\d+)\3(?(2)\s*\})')
 OBJECT = re.compile(r'(?<![\w.-])(' + PROPS + r')=\{\{([^{}]*)\}\}')
 ENTRY = re.compile(r'(\w+\s*:\s*)(["\'])(-?\d+)\2')
+ENTRY_ONLY = re.compile(r'^\s*(["\']?)\w+\1\s*:\s*(["\'])[^"\']*\2\s*$')
 SPACE = re.compile(r'--space-(\d+)\b')
-SKIP = ('node_modules', '/.next/', '/dist/', '/build/')
+COMPUTED = re.compile(r'(?<![\w.-])(' + PROPS + r')=\{(?!\s*\{)(?!\s*["\'][^"\']*["\']\s*\})')
+SCALING = re.compile(r'var\(--scaling(?=\s*[,)])')
+EXT = ('.css', '.scss', '.ts', '.tsx', '.js', '.jsx', '.mjs', '.cjs', '.mdx')
+JSX = ('.tsx', '.jsx', '.js', '.mdx')
 
 
 def shift(value):
@@ -35,7 +45,7 @@ def shift(value):
 
 def rewrite(text, jsx):
     if jsx:
-        text = PLAIN.sub(lambda m: '%s=%s%s%s' % (m.group(1), m.group(2), shift(m.group(3)), m.group(2)), text)
+        text = PLAIN.sub(lambda m: m.group(0)[:m.start(4) - m.start(0)] + shift(m.group(4)) + m.group(0)[m.end(4) - m.start(0):], text)
         text = OBJECT.sub(
             lambda m: '%s={{%s}}' % (
                 m.group(1),
@@ -44,24 +54,38 @@ def rewrite(text, jsx):
             text,
         )
     text = SPACE.sub(lambda m: '--space-%d' % MAP.get(int(m.group(1)), int(m.group(1))), text)
-    return text.replace('var(--scaling)', 'var(--scale)')
+    return SCALING.sub('var(--scale', text)
+
+
+def literal_object(body):
+    """Whether every entry of a responsive object is a key with a quoted value."""
+    for entry in body.split(','):
+        if entry.strip() and not ENTRY_ONLY.match(entry):
+            return False
+    return True
+
+
+def computed(text):
+    """(line, prop) for every spacing prop whose value, or one of whose responsive entries, is an
+    expression this cannot read."""
+    found = [(m.start(), m.group(1)) for m in COMPUTED.finditer(text)]
+    found += [(m.start(), m.group(1)) for m in OBJECT.finditer(text) if not literal_object(m.group(2))]
+    return [(text.count('\n', 0, start) + 1, prop) for start, prop in sorted(found)]
 
 
-def main(folders):
+def main(targets):
     changed = 0
-    for folder in folders:
-        for path in glob.glob(os.path.join(folder, '**', '*'), recursive=True):
-            if not os.path.isfile(path) or any(s in path for s in SKIP):
-                continue
-            if not path.endswith(('.css', '.scss', '.ts', '.tsx', '.jsx', '.mdx')):
-                continue
-            with open(path) as f:
-                before = f.read()
-            after = rewrite(before, path.endswith(('.tsx', '.jsx', '.mdx')))
-            if after != before:
-                with open(path, 'w') as f:
-                    f.write(after)
-                changed += 1
+    for path in files(targets, EXT):
+        with open(path) as f:
+            before = f.read()
+        if path.endswith(JSX):
+            for line, prop in computed(before):
+                print('%s:%d: %s is not a literal; check it by hand' % (path, line, prop), file=sys.stderr)
+        after = rewrite(before, path.endswith(JSX))
+        if after != before:
+            with open(path, 'w') as f:
+                f.write(after)
+            changed += 1
     print('%d files rewritten' % changed)
 
 

package/codemods/test_codemods.py

@@ -0,0 +1,220 @@
+"""
+Laws for the codemods. Run from this folder: python3 -m unittest test_codemods
+"""
+import contextlib
+import importlib.util
+import io
+import os
+import re
+import shutil
+import tempfile
+import unittest
+
+HERE = os.path.dirname(os.path.abspath(__file__))
+PACKAGE = os.path.dirname(HERE)
+
+
+def load(name):
+    spec = importlib.util.spec_from_file_location(name.replace('-', '_').replace('.', '_'), os.path.join(HERE, name + '.py'))
+    module = importlib.util.module_from_spec(spec)
+    spec.loader.exec_module(module)
+    return module
+
+
+space = load('space-0.17')
+type_ = load('type-0.20')
+components = load('components-0.21')
+names = load('names-0.22')
+shared = load('_shared')
+
+
+class Space(unittest.TestCase):
+    def test_position_output_is_a_position_step(self):
+        # The codemod moves old 9 (64px) to 10. The position props must take every step it
+        # writes, or `top="10"` falls through as the unitless `--top: 10` and the offset is lost.
+        with open(os.path.join(PACKAGE, 'src/props/layout.props.ts')) as f:
+            source = f.read()
+        steps = set(re.search(r'positionEdgeValues = \[([^\]]*)\]', source).group(1).replace("'", '').replace(' ', '').split(','))
+        for old in range(0, 13):
+            for sign in ('', '-'):
+                if sign and old == 0:
+                    continue
+                out = space.rewrite('<Box top="%s%d" />' % (sign, old), True)
+                new = re.search(r'top="([^"]+)"', out).group(1)
+                if not sign:
+                    self.assertIn(new, steps, 'top="%d" becomes "%s", which the position props do not take' % (old, new))
+        self.assertEqual(space.rewrite('<Box top="9" left="-9" />', True), '<Box top="10" left="-10" />')
+
+    def test_literal_expressions(self):
+        self.assertEqual(space.rewrite("<Box p={'3'} gap={{ initial: '1', md: '9' }} />", True), "<Box p={'4'} gap={{ initial: '2', md: '10' }} />")
+
+    def test_non_literal_values_are_reported_not_changed(self):
+        text = "<Box mt={isMobile ? '2' : '4'} p={pad} m={'2'} />"
+        self.assertEqual(space.rewrite(text, True), "<Box mt={isMobile ? '2' : '4'} p={pad} m={'3'} />")
+        self.assertEqual([prop for _, prop in space.computed(text)], ['mt', 'p'])
+
+    def test_non_literal_responsive_entry_is_reported(self):
+        # The literal entry still shifts; the ternary entry keeps its old step, so a person is told.
+        text = "<Box m={{ initial: '2', md: wide ? '3' : '4' }} p={{ initial: '1', md: '2' }} />"
+        self.assertEqual(space.rewrite(text, True), "<Box m={{ initial: '3', md: wide ? '3' : '4' }} p={{ initial: '2', md: '3' }} />")
+        self.assertEqual([prop for _, prop in space.computed(text)], ['m'])
+
+    def test_scaling_with_a_fallback(self):
+        self.assertEqual(space.rewrite('a: calc(2px * var(--scaling, 1)); b: var(--scaling);', False), 'a: calc(2px * var(--scale, 1)); b: var(--scale);')
+
+
+class Type(unittest.TestCase):
+    def test_arrow_function_before_size(self):
+        text = '<Text onClick={() => setOpen(true)} size="8" weight="bold">Hi</Text>'
+        self.assertEqual(type_.rewrite(text, True), '<Text onClick={() => setOpen(true)} size="7" weight="semibold">Hi</Text>')
+
+    def test_comparison_before_weight(self):
+        text = "<Heading className={x > 1 ? 'a' : 'b'} weight=\"light\" size={{ initial: '8', md: '10' }}>H</Heading>"
+        self.assertEqual(type_.rewrite(text, True), "<Heading className={x > 1 ? 'a' : 'b'} weight=\"regular\" size={{ initial: '7', md: '9' }}>H</Heading>")
+
+    def test_nested_tag_and_literal_expression(self):
+        text = "<Text size={'0'} title={<Text size=\"8\">a</Text>}>b</Text>"
+        self.assertEqual(type_.rewrite(text, True), "<Text size={'1'} title={<Text size=\"7\">a</Text>}>b</Text>")
+
+    def test_other_components_and_non_literals_are_left(self):
+        warnings = []
+        text = '<><Avatar size="8" /><Text size={open ? "8" : "2"}>z</Text></>'
+        self.assertEqual(type_.rewrite(text, True, 'x.tsx', warnings.append), text)
+        self.assertEqual(len(warnings), 1)
+
+    def test_non_literal_responsive_entry_is_reported(self):
+        warnings = []
+        text = "<Text size={{ initial: '8', md: big ? '8' : '2' }}>z</Text>"
+        self.assertEqual(type_.rewrite(text, True, 'x.tsx', warnings.append), "<Text size={{ initial: '7', md: big ? '8' : '2' }}>z</Text>")
+        self.assertEqual(len(warnings), 1)
+
+    def test_mdx(self):
+        text = "It's prose with <Text onClick={() => go()} size=\"8\">x</Text> and don't."
+        self.assertEqual(type_.rewrite(text, True, 'x.mdx'), text.replace('size="8"', 'size="7"'))
+
+
+SOURCE = '''import { Badge, IconButton as IB, ToggleIconButton, BadgeProps } from '@womp/kookie-ui';
+import * as K from '@womp/kookie-ui';
+
+// a Badge in a comment
+const label = 'Badge';
+const tpl = `Badge ${label}`;
+const re = /Badge'/g;
+const Comp = ToggleIconButton;
+type P = BadgeProps;
+const f = <T,>(v: T) => v;
+const ok = a < b && c > d;
+export const A = () => (
+  <>
+    <Badge color="gray">New Badge</Badge>
+    <IB aria-label="x" onClick={() => go()} />
+    <K.Badge>don't rename</K.Badge>
+    <K.IconButton aria-label="y"></K.IconButton>
+  </>
+);
+'''
+
+EXPECTED = '''import { Chip, Button as IB, Toggle, ChipProps } from '@womp/kookie-ui';
+import * as K from '@womp/kookie-ui';
+
+// a Badge in a comment
+const label = 'Badge';
+const tpl = `Badge ${label}`;
+const re = /Badge'/g;
+const Comp = ToggleIconButton;
+type P = ChipProps;
+const f = <T,>(v: T) => v;
+const ok = a < b && c > d;
+export const A = () => (
+  <>
+    <Chip color="gray">New Badge</Chip>
+    <IB iconOnly aria-label="x" onClick={() => go()} />
+    <K.Chip>don't rename</K.Chip>
+    <K.Button iconOnly aria-label="y"></K.Button>
+  </>
+);
+'''
+
+
+class Components(unittest.TestCase):
+    def test_renames_code_only(self):
+        warnings = []
+        out = components.rewrite(SOURCE, 'a.tsx', warnings.append)
+        self.assertEqual(out, EXPECTED)
+        # The aliased icon button keeps no square shape without iconOnly, so it is reported.
+        self.assertEqual(len(warnings), 1)
+        self.assertIn('ToggleIconButton', warnings[0])
+
+    def test_aliased_icon_button_reference_is_reported(self):
+        # `Comp = IB` still type-checks after the import becomes `Button as IB`, so the printed
+        # line is the only notice that Comp needs iconOnly.
+        warnings = []
+        text = "import { IconButton as IB, Badge as B } from '@womp/kookie-ui';\nconst Comp = IB;\nconst Tag = B;\n"
+        out = components.rewrite(text, 'a.tsx', warnings.append)
+        self.assertEqual(out, "import { Button as IB, Chip as B } from '@womp/kookie-ui';\nconst Comp = IB;\nconst Tag = B;\n")
+        self.assertEqual(len(warnings), 1)
+        self.assertIn('IB', warnings[0])
+
+    def test_twice(self):
+        once = components.rewrite(SOURCE, 'a.tsx')
+        self.assertEqual(components.rewrite(once, 'a.tsx'), once)
+
+    def test_plain_ts(self):
+        text = "import type { BadgeProps } from '@womp/kookie-ui';\nconst n = 'BadgeProps';\nexport type X = BadgeProps;\n"
+        self.assertEqual(components.rewrite(text, 'a.ts'), "import type { ChipProps } from '@womp/kookie-ui';\nconst n = 'BadgeProps';\nexport type X = ChipProps;\n")
+
+    def test_not_imported_from_kookie(self):
+        text = "import { Badge } from './badge';\nconst a = <Badge />;\n"
+        self.assertEqual(components.rewrite(text, 'a.tsx'), text)
+
+
+class Names(unittest.TestCase):
+    def test_translucent_tokens(self):
+        text = 'a: var(--color-panel-translucent); b: var(--color-surface-translucent); c: var(--color-dialog-translucent);'
+        self.assertEqual(names.rewrite(text), 'a: var(--color-surface); b: var(--color-surface); c: var(--color-surface);')
+
+
+class Files(unittest.TestCase):
+    def test_skips_output_folders_only_at_the_top(self):
+        root = tempfile.mkdtemp()
+        try:
+            for rel in ['src/app/build/page.tsx', 'src/dist/a.tsx', 'src/rebuild/b.tsx', 'build/out.tsx', 'dist/out.tsx',
+                        'node_modules/x/a.tsx', 'src/node_modules/x/a.tsx', '.next/a.tsx', 'src/c.tsx']:
+                path = os.path.join(root, rel)
+                os.makedirs(os.path.dirname(path), exist_ok=True)
+                open(path, 'w').close()
+            found = sorted(os.path.relpath(p, root) for p in shared.files([root], ('.tsx',)))
+            self.assertEqual(found, ['src/app/build/page.tsx', 'src/c.tsx', 'src/dist/a.tsx', 'src/rebuild/b.tsx'])
+            # A path under a folder named build is visited when it is what was given.
+            self.assertEqual(len(list(shared.files([os.path.join(root, 'src', 'app', 'build')], ('.tsx',)))), 1)
+        finally:
+            shutil.rmtree(root)
+
+    def test_every_codemod_visits_a_source_folder_named_build(self):
+        sample = "import { Badge } from '@womp/kookie-ui';\nexport const A = () => <Badge p=\"3\" />;\n"
+        css = '.a { padding: var(--space-3); font-size: var(--font-size-8); color: var(--gray-9); } .rt-Badge {}\n'
+        for module in (space, type_, components, names):
+            root = tempfile.mkdtemp()
+            try:
+                for rel, text in [('src/app/build/page.tsx', sample), ('src/app/build/page.css', css),
+                                  ('build/page.tsx', sample), ('build/page.css', css)]:
+                    path = os.path.join(root, rel)
+                    os.makedirs(os.path.dirname(path), exist_ok=True)
+                    with open(path, 'w') as f:
+                        f.write(text)
+                with contextlib.redirect_stdout(io.StringIO()), contextlib.redirect_stderr(io.StringIO()):
+                    module.main([root])
+                for name, before in (('page.tsx', sample), ('page.css', css)):
+                    with open(os.path.join(root, 'build', name)) as f:
+                        self.assertEqual(f.read(), before, module.__name__)
+                with open(os.path.join(root, 'src/app/build/page.tsx')) as f:
+                    tsx = f.read()
+                with open(os.path.join(root, 'src/app/build/page.css')) as f:
+                    sheet = f.read()
+                self.assertNotEqual((tsx, sheet), (sample, css), module.__name__)
+            finally:
+                shutil.rmtree(root)
+
+
+if __name__ == '__main__':
+    unittest.main()

package/codemods/type-0.20.py

@@ -7,63 +7,92 @@ Type takes v2's nine steps (12, 14, 16, 18, 20, 24, 32, 44, 64px) and three weig
 This rewrites, in place:
 
 - size and weight props on Text, Heading, Link, Code, Kbd, Blockquote, Em, Strong and Quote,
-  plain strings and responsive objects (.tsx/.jsx/.mdx)
+  plain strings, `{"8"}` and responsive objects (.tsx/.jsx/.js/.mdx). Arrow functions and
+  comparisons inside a tag do not stop it. A size or weight it cannot read (a variable, a
+  ternary, also as one entry of a responsive object) is printed for a person to check.
 - var(--font-size-N), var(--line-height-N), var(--letter-spacing-N) and
-  var(--font-weight-NAME) in .css/.ts/.tsx/.mdx
+  var(--font-weight-NAME) in .css/.scss/.ts/.tsx/.js/.jsx/.mjs/.cjs/.mdx
 
-Usage: python3 type-0.20.py <folder> [<folder> ...]   Safe to run twice.
+Usage: python3 type-0.20.py <folder|file> [...]
+Run it once. It maps 8 to 7, so a second run moves the new size 8 too.
 """
-import glob
 import os
 import re
 import sys
 
+sys.path.insert(0, os.path.dirname(os.path.abspath(__file__)))
+from _shared import Scan, apply, files, line_of  # noqa: E402
+
 SIZE = {'0': '1', '8': '7', '10': '9', '11': '9', '12': '9'}
 WEIGHT = {'thin': 'regular', 'extralight': 'regular', 'light': 'regular', 'bold': 'semibold', 'extrabold': 'semibold'}
-TYPE = r'(?:Text|Heading|Link|Code|Kbd|Blockquote|Em|Strong|Quote)'
-TAG = re.compile(r'<' + TYPE + r'\b[^<>]*?>', re.S)
-PLAIN = re.compile(r'(\b(size|weight)=)(["\'])([\w-]+)\3')
-OBJECT = re.compile(r'(\b(size|weight)=\{\{)([^{}]*)(\}\})')
+TYPES = {'Text', 'Heading', 'Link', 'Code', 'Kbd', 'Blockquote', 'Em', 'Strong', 'Quote'}
+START = re.compile(r'<(?:' + '|'.join(sorted(TYPES)) + r')(?![\w$-])')
+QUOTED = re.compile(r'^(["\'])([\w-]+)\1$')
+LITERAL = re.compile(r'^\{\s*(["\'])([\w-]+)\1\s*\}$')
+OBJECT = re.compile(r'^\{\s*\{([^{}]*)\}\s*\}$')
 ENTRY = re.compile(r'(\w+\s*:\s*)(["\'])([\w-]+)\2')
+ENTRY_ONLY = re.compile(r'^\s*(["\']?)\w+\1\s*:\s*(["\'])[^"\']*\2\s*$')
 TOKEN = re.compile(r'--(font-size|line-height|letter-spacing)-(\d+)\b')
 WEIGHT_TOKEN = re.compile(r'--font-weight-(thin|extralight|light|bold|extrabold)\b')
-SKIP = ('node_modules', '/.next/', '/dist/', '/build/')
+EXT = ('.css', '.scss', '.ts', '.tsx', '.js', '.jsx', '.mjs', '.cjs', '.mdx')
+JSX = ('.tsx', '.jsx', '.js', '.mdx')
 
 
 def value(prop, v):
     return (SIZE if prop == 'size' else WEIGHT).get(v, v)
 
 
-def tag(m):
-    t = PLAIN.sub(lambda p: p.group(1) + p.group(3) + value(p.group(2), p.group(4)) + p.group(3), m.group(0))
-    return OBJECT.sub(
-        lambda o: o.group(1) + ENTRY.sub(lambda e: e.group(1) + e.group(2) + value(o.group(2), e.group(3)) + e.group(2), o.group(3)) + o.group(4),
-        t,
-    )
+def attribute(prop, raw):
+    """The rewritten attribute value, or None when it is not a literal this can read."""
+    m = QUOTED.match(raw)
+    if m:
+        return m.group(1) + value(prop, m.group(2)) + m.group(1)
+    m = LITERAL.match(raw)
+    if m:
+        return raw[:m.start(2)] + value(prop, m.group(2)) + raw[m.end(2):]
+    m = OBJECT.match(raw)
+    if m:
+        body = ENTRY.sub(lambda e: e.group(1) + e.group(2) + value(prop, e.group(3)) + e.group(2), m.group(1))
+        return raw[:m.start(1)] + body + raw[m.end(1):]
+    return None
+
+
+def rewrite_tags(text, path='<text>', warn=None):
+    scan = Scan.elements(text, START) if path.endswith('.mdx') else Scan(text, True)
+    edits = []
+    for tag, prop, start, end in scan.attrs:
+        name = scan.tags[tag][2]
+        if prop not in ('size', 'weight') or name.rpartition('.')[2] not in TYPES:
+            continue
+        raw = text[start:end]
+        new = attribute(prop, raw)
+        whole = OBJECT.match(raw)
+        if new is None or whole and not all(ENTRY_ONLY.match(e) for e in whole.group(1).split(',') if e.strip()):
+            if warn is not None:
+                warn('%s:%d: %s %s=%s is not a literal; check it by hand' % (path, line_of(text, start), name, prop, raw))
+        if new is not None and new != raw:
+            edits.append((start, end, new))
+    return apply(text, edits)
 
 
-def rewrite(text, jsx):
+def rewrite(text, jsx, path='<text>', warn=None):
     if jsx:
-        text = TAG.sub(tag, text)
+        text = rewrite_tags(text, path, warn)
     text = TOKEN.sub(lambda m: '--%s-%s' % (m.group(1), SIZE.get(m.group(2), m.group(2))), text)
     return WEIGHT_TOKEN.sub(lambda m: '--font-weight-' + WEIGHT[m.group(1)], text)
 
 
-def main(folders):
+def main(targets):
     changed = 0
-    for folder in folders:
-        for path in glob.glob(os.path.join(folder, '**', '*'), recursive=True):
-            if not os.path.isfile(path) or any(s in path for s in SKIP):
-                continue
-            if not path.endswith(('.css', '.scss', '.ts', '.tsx', '.jsx', '.mdx')):
-                continue
-            with open(path) as f:
-                before = f.read()
-            after = rewrite(before, path.endswith(('.tsx', '.jsx', '.mdx')))
-            if after != before:
-                with open(path, 'w') as f:
-                    f.write(after)
-                changed += 1
+    warn = lambda message: print(message, file=sys.stderr)
+    for path in files(targets, EXT):
+        with open(path) as f:
+            before = f.read()
+        after = rewrite(before, path.endswith(JSX), path, warn)
+        if after != before:
+            with open(path, 'w') as f:
+                f.write(after)
+            changed += 1
     print('%d files rewritten' % changed)